/* =============================================================
   PISO E TIERRA — Visor de fotografías (v1.4)
   Archivo: assets/css/pt-lightbox.css  (solo en fichas de alojamiento)

   Composición: barra superior (sección + cerrar) · escenario con la
   foto y las flechas pegadas a ella · pie con contador y progreso.
   Los botones neutralizan los estilos de botón de Astra (el azul de
   :hover/:focus) con `all: unset` y estados propios explícitos.
   ============================================================= */

body .pt-lightbox {
	--lb-btn: 54px;
	--lb-gap: clamp(.7rem, 1.6vw, 1.3rem);
	--lb-pad: clamp(.75rem, 2.2vw, 2rem);
	--lb-bar: 4.6rem;
	--lb-foot: 5.6rem;
	--lb-crema: #F3F0E7;
	--lb-verde: #6E7A4E;
	--lb-ease: cubic-bezier(.22,.61,.36,1);

	position: fixed; inset: 0; z-index: 99999;
	display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
	padding: 0; margin: 0;
	background:
		radial-gradient(120% 85% at 50% 38%, rgba(40,52,32,.97) 0%, rgba(20,26,15,.985) 62%, #0c100a 100%);
	color: var(--lb-crema); font-family: var(--pt-sans, "Montserrat", system-ui, sans-serif);
	opacity: 0; visibility: hidden;
	transition: opacity .35s ease, visibility 0s linear .35s;
	overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
	-webkit-tap-highlight-color: transparent;
}
body .pt-lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
body .pt-lightbox *, body .pt-lightbox *::before, body .pt-lightbox *::after { box-sizing: border-box; }

/* ── Barra superior ── */
body .pt-lightbox__bar {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: var(--lb-bar); padding: .9rem var(--lb-pad) .4rem;
}
body .pt-lightbox__meta { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
body .pt-lightbox__eyebrow {
	font: 600 .62rem/1 var(--pt-sans, sans-serif); letter-spacing: .22em; text-transform: uppercase;
	color: rgba(243,240,231,.55);
}
body .pt-lightbox__section {
	font: italic 600 clamp(1.15rem, 2.6vw, 1.6rem)/1.15 var(--pt-serif, Georgia, serif);
	color: var(--lb-crema); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	max-width: min(70vw, 40rem);
}
body .pt-lightbox__section:empty { display: none; }
body .pt-lightbox__section-count {
	font: 600 .68rem/1 var(--pt-sans, sans-serif); letter-spacing: .08em; color: rgba(243,240,231,.6);
}

/* ── Botones (cerrar + flechas) ── */
body #pt-lightbox button.pt-lightbox__close,
body #pt-lightbox button.pt-lightbox__nav {
	all: unset; box-sizing: border-box; cursor: pointer;
	display: grid; place-items: center; flex: 0 0 auto;
	width: var(--lb-btn); height: var(--lb-btn); border-radius: 50%;
	background: rgba(243,240,231,.1); color: var(--lb-crema);
	border: 1px solid rgba(243,240,231,.26);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px rgba(0,0,0,.28);
	transition: background-color .3s ease, color .3s ease, border-color .3s ease,
	            transform .35s var(--lb-ease), box-shadow .3s ease;
	-webkit-tap-highlight-color: transparent;
}
body #pt-lightbox .pt-lightbox__close svg,
body #pt-lightbox .pt-lightbox__nav svg {
	width: 22px; height: 22px; display: block; pointer-events: none;
	fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
	transition: transform .35s var(--lb-ease);
}
/* Cerrar: crema al pasar el cursor, la X gira un cuarto de vuelta. */
body #pt-lightbox button.pt-lightbox__close { width: 48px; height: 48px; }
body #pt-lightbox button.pt-lightbox__close:hover,
body #pt-lightbox button.pt-lightbox__close:active {
	background: var(--lb-crema); color: #2E3825; border-color: var(--lb-crema);
}
body #pt-lightbox button.pt-lightbox__close:hover svg { transform: rotate(90deg); }
/* Flechas: verde de marca; el chevrón se desplaza hacia su dirección. */
body #pt-lightbox button.pt-lightbox__nav:hover,
body #pt-lightbox button.pt-lightbox__nav:active {
	background: var(--lb-verde); border-color: var(--lb-verde); color: #fff;
	box-shadow: 0 12px 28px rgba(0,0,0,.34);
}
body #pt-lightbox button.pt-lightbox__nav--prev:hover svg { transform: translateX(-3px); }
body #pt-lightbox button.pt-lightbox__nav--next:hover svg { transform: translateX(3px); }
body #pt-lightbox button.pt-lightbox__close:active,
body #pt-lightbox button.pt-lightbox__nav:active { transform: scale(.92); }
body #pt-lightbox button.pt-lightbox__nav--prev:active,
body #pt-lightbox button.pt-lightbox__nav--next:active { transform: translateY(-50%) scale(.92); }
/* Foco por teclado: anillo crema, sin tinte azul. */
body #pt-lightbox button:focus-visible {
	outline: 2px solid #dfe8c8; outline-offset: 3px;
}
body #pt-lightbox button:focus:not(:focus-visible) { outline: none; }

/* ── Escenario ── */
body .pt-lightbox__stage {
	display: flex; align-items: center; justify-content: center;
	min-height: 0; padding: 0 var(--lb-pad); position: relative;
}
body .pt-lightbox__frame {
	position: relative; display: flex; align-items: center; justify-content: center;
	max-width: 100%;
}
/* Las flechas se pegan a la foto, no al borde de la pantalla. */
body #pt-lightbox button.pt-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
}
body #pt-lightbox button.pt-lightbox__nav--prev { right: 100%; margin-right: var(--lb-gap); }
body #pt-lightbox button.pt-lightbox__nav--next { left: 100%; margin-left: var(--lb-gap); }

body .pt-lightbox__img {
	display: block; width: auto; height: auto; object-fit: contain;
	/* Sin ampliar por encima de su tamaño real y sin recortar: se ajusta al espacio libre. */
	max-width: calc(100vw - 2 * (var(--lb-btn) + var(--lb-gap) + var(--lb-pad)));
	max-height: calc(100vh - var(--lb-bar) - var(--lb-foot));
	border-radius: 14px;
	box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(243,240,231,.08);
	background: rgba(243,240,231,.04);
	user-select: none; -webkit-user-drag: none;
}
@supports (height: 100dvh) {
	body .pt-lightbox__img { max-height: calc(100dvh - var(--lb-bar) - var(--lb-foot)); }
}
body .pt-lightbox__img.is-hidden { opacity: 0; }

/* Indicador de carga (aparece solo si la foto tarda). */
body .pt-lightbox__loader {
	position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
	border-radius: 50%; border: 2px solid rgba(243,240,231,.18); border-top-color: var(--lb-crema);
	opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
body .pt-lightbox.is-loading .pt-lightbox__loader { opacity: 1; animation: ptLbSpin .8s linear infinite; }
@keyframes ptLbSpin { to { transform: rotate(360deg); } }
body .pt-lightbox__error {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	font: 600 .85rem var(--pt-sans, sans-serif); color: rgba(243,240,231,.8); text-align: center;
	opacity: 0; pointer-events: none; transition: opacity .25s ease; max-width: 80%;
}
body .pt-lightbox.has-error .pt-lightbox__error { opacity: 1; }

/* ── Pie: contador + progreso ── */
body .pt-lightbox__foot {
	display: flex; flex-direction: column; align-items: center; gap: .75rem;
	padding: .6rem var(--lb-pad) calc(1.2rem + env(safe-area-inset-bottom, 0px));
	min-height: var(--lb-foot);
}
body .pt-lightbox__counter { display: flex; align-items: baseline; gap: .45rem; font-family: var(--pt-serif, Georgia, serif); }
body .pt-lightbox__cur { font-size: 1.7rem; font-style: italic; font-weight: 600; line-height: 1; color: var(--lb-crema); min-width: 1.4ch; text-align: right; }
body .pt-lightbox__sep { font: 300 1rem var(--pt-sans, sans-serif); color: rgba(243,240,231,.4); }
body .pt-lightbox__tot { font: 600 .85rem var(--pt-sans, sans-serif); letter-spacing: .08em; color: rgba(243,240,231,.6); }
body .pt-lightbox__progress {
	width: min(280px, 56vw); height: 3px; border-radius: 3px; overflow: hidden;
	background: rgba(243,240,231,.14);
}
body .pt-lightbox__progress span {
	display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--lb-verde), #b4c486);
	transform-origin: left center; transform: scaleX(var(--lb-progress, .1));
	transition: transform .5s var(--lb-ease);
}
body .pt-lightbox.is-single .pt-lightbox__nav,
body .pt-lightbox.is-single .pt-lightbox__foot { display: none; }

/* ── Entrada del conjunto ── */
@media (prefers-reduced-motion: no-preference) {
	body .pt-lightbox__bar  { transform: translate3d(0, -12px, 0); opacity: 0; transition: transform .6s var(--lb-ease) .1s, opacity .5s ease .1s; }
	body .pt-lightbox__foot { transform: translate3d(0, 12px, 0);  opacity: 0; transition: transform .6s var(--lb-ease) .15s, opacity .5s ease .15s; }
	body .pt-lightbox.is-open .pt-lightbox__bar,
	body .pt-lightbox.is-open .pt-lightbox__foot { transform: none; opacity: 1; }
	body #pt-lightbox button.pt-lightbox__nav { opacity: 0; transition-property: background-color, color, border-color, transform, box-shadow, opacity; }
	body #pt-lightbox.is-open button.pt-lightbox__nav { opacity: 1; transition-delay: 0s, 0s, 0s, 0s, 0s, .25s; }
}

/* ── Móvil: la foto aprovecha todo el ancho; las flechas se apoyan sobre ella ── */
@media (max-width: 760px) {
	body .pt-lightbox { --lb-btn: 46px; --lb-pad: .6rem; --lb-bar: 3.9rem; --lb-foot: 5.2rem; }
	body .pt-lightbox__bar { padding-top: .7rem; }
	body #pt-lightbox button.pt-lightbox__close { width: 44px; height: 44px; }
	body .pt-lightbox__img {
		max-width: calc(100vw - 2 * var(--lb-pad));
		border-radius: 10px;
	}
	body #pt-lightbox button.pt-lightbox__nav--prev { right: auto; left: .55rem; margin: 0; }
	body #pt-lightbox button.pt-lightbox__nav--next { left: auto; right: .55rem; margin: 0; }
	body #pt-lightbox button.pt-lightbox__nav { background: rgba(20,26,15,.55); }
	body .pt-lightbox__cur { font-size: 1.45rem; }
}
@media (max-width: 760px) and (orientation: landscape) {
	body .pt-lightbox { --lb-bar: 3.2rem; --lb-foot: 3.6rem; }
	body .pt-lightbox__foot { flex-direction: row; gap: 1rem; padding-bottom: .6rem; }
	body .pt-lightbox__progress { width: min(200px, 30vw); }
}
@media (min-width: 1700px) {
	body .pt-lightbox { --lb-btn: 60px; --lb-bar: 5.2rem; --lb-foot: 6.2rem; }
}

@media (prefers-reduced-motion: reduce) {
	body .pt-lightbox, body .pt-lightbox * { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}