/* ═══════════════════════════════════════════════════════════════════
   VISOR AMPLIADO (lightbox) · partials/visor.php + js/visor.js
   Lo usan la galería de para tiendas y los destacados de la home.
   Botón invisible sobre cada [data-lb-item] (lo crea visor.js) y un <dialog>
   a pantalla completa con la foto o el panorama 360º, el pie, las flechas
   y el botón de cerrar. Se carga después de styles.css.
   ═══════════════════════════════════════════════════════════════════ */
.lb-zoom {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	padding:0;
	border:0;
	border-radius:inherit;
	background:transparent;
	cursor:zoom-in;
}
/* doble anillo (blanco y azul) para que el foco se vea sobre cualquier foto */
.lb-zoom:focus-visible {
	outline:none;
	box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px var(--navy);
}
/* foto que abre un panorama 360º ([data-lb-item][data-pano]): icono de órbita en el
   centro, con el mismo círculo que el botón del visor de panoramas de deco */
[data-lb-item][data-pano] > .lb-zoom {
	cursor:pointer;
}
[data-lb-item][data-pano]::after {
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:56px;
	height:56px;
	transform:translate(-50%,-50%);
	border:1px solid rgba(255,255,255,.4);
	border-radius:50%;
	background:rgba(0,0,0,.5) url("../img/pano-orbit-play.png") center / 44px no-repeat;
	pointer-events:none;
}
/* mientras está abierto, la página de detrás no hace scroll */
html.is-lb {
	overflow:hidden;
}
.lb {
	width:100%;
	height:100%;
	max-width:none;
	max-height:none;
	margin:0;
	padding:clamp(72px,6vw,88px) clamp(16px,6vw,96px) clamp(20px,3vw,32px);
	border:0;
	background:rgba(16,16,18,.94);
	color:#fff;
}
.lb[open] {
	display:flex;
	align-items:center;
	justify-content:center;
}
.lb::backdrop {
	background:transparent;
}
.lb__fig {
	margin:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	max-width:100%;
}
/* caja de la foto o del panorama: el QR se coloca respecto a ella */
.lb__media {
	position:relative;
	max-width:100%;
}
.lb__img {
	display:block;
	max-width:100%;
	max-height:calc(100vh - 190px);
	max-height:calc(100dvh - 190px);
	border-radius:clamp(8px,.8vw,12px);
}
.lb__img[hidden] {
	display:none;
}
/* panorama 360º embebido: 16:9 lo más grande que quepa (hasta 1600 px de ancho) */
.lb__frame {
	display:block;
	width:min(calc(100vw - 2 * clamp(16px,6vw,96px)), calc((100vh - 190px) * 16 / 9), 1600px);
	width:min(calc(100vw - 2 * clamp(16px,6vw,96px)), calc((100dvh - 190px) * 16 / 9), 1600px);
	aspect-ratio:16 / 9;
	border:0;
	border-radius:clamp(8px,.8vw,12px);
	background:#000;
}
/* QR del panorama, en la esquina superior derecha. Va en caja blanca con
   margen: el QR viene sin borde y los lectores necesitan un margen claro alrededor */
.lb__qr {
	position:absolute;
	top:clamp(10px,1.2vw,16px);
	right:clamp(10px,1.2vw,16px);
	width:clamp(104px,8vw,132px);
	padding:10px 10px 8px;
	border-radius:10px;
	background:#fff;
	box-shadow:0 8px 24px rgba(0,0,0,.35);
	text-align:center;
}
.lb__qr[hidden] {
	display:none;
}
.lb__qr img {
	display:block;
	width:100%;
	height:auto;
}
.lb__qr-txt {
	margin-top:6px;
	font-size:11px;
	font-weight:600;
	line-height:1.25;
	color:var(--ink);
}
.lb__cap {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:4px 14px;
	font-size:14px;
	font-weight:600;
	line-height:1.4;
	text-align:center;
}
.lb__count {
	font-weight:500;
	color:rgba(255,255,255,.72);
}
.lb__close {
	position:absolute;
	top:clamp(12px,1.6vw,24px);
	right:clamp(12px,1.6vw,24px);
}
.lb__btn {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}
.lb__btn[hidden] {
	display:none;
}
.lb__btn--prev {
	left:clamp(12px,2vw,32px);
}
.lb__btn--next {
	right:clamp(12px,2vw,32px);
}
.lb button:focus-visible {
	outline:3px solid #fff;
	outline-offset:3px;
}
/* solo para lectores de pantalla: anuncia «Imagen 2 de 6: …» al cambiar */
.lb__sr {
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
}
/* en móvil las flechas bajan bajo la foto, para no taparla; el panorama ocupa
   todo el alto libre y el QR no sale (ya se está en el móvil) */
@media (max-width:760px) {
	.lb {
		padding-bottom:96px;
	}
	.lb__frame {
		height:calc(100vh - 210px);
		height:calc(100dvh - 210px);
		aspect-ratio:auto;
	}
	.lb__qr {
		display:none;
	}
	.lb__btn {
		top:auto;
		bottom:24px;
		transform:none;
	}
	.lb__btn--prev {
		left:calc(50% - 64px);
	}
	.lb__btn--next {
		right:calc(50% - 64px);
	}
}
@media (prefers-reduced-motion:no-preference) {
	.lb[open] {
		animation:lb-in .2s ease both;
	}
}
@keyframes lb-in {
	from { opacity:0; }
	to { opacity:1; }
}