/* ==========================================================================
   EL JARDÍN DE LAS DELIZIAS · páginas de refugio — EDICIÓN EDITORIAL
   Revista de viajes impresa en papel bueno, no web de producto.
   Tipografía grande, mucho aire, capítulos numerados, fotos a sangre.
   SIN scroll-jacking: aquí se lee, no se secuestra el scroll.

   CONTINUIDAD CON LA HOME (los cinco elementos que viajan):
   1. los tokens: carbón CÁLIDO, crema, naranja mongol
   2. Fraunces itálica + Archivo
   3. el grano de película sobre todo el documento
   4. el sello del pájaro cerrando la pieza
   5. la voz: segunda persona, presente, frases cortas
   ========================================================================== */
:root{
  --carbon:#191310;
  --carbon-2:#1f1712;
  --crema:#f6eee2;
  --bruma:#d9cdbb;
  --linea:rgba(246,238,226,.15);
  --naranja:#e75d1a;
  --naranja-hi:#f0742e;
  --rosa:#eba98f;
  --f-d:"Fraunces",Georgia,serif;
  --f-s:"Archivo",system-ui,sans-serif;
  --pad-x:clamp(1.5rem,7vw,9rem);
  --col:clamp(20rem,46vw,38rem);   /* la columna de lectura: ~65 caracteres */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--carbon);color:var(--crema);font-family:var(--f-s);
  font-size:clamp(1rem,1.05vw,1.12rem);line-height:1.75;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--naranja-hi);outline-offset:4px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--naranja);color:#221008;padding:.8rem 1.2rem;font-weight:700}
.skip:focus{left:0}

/* el grano de la home, para que no parezcan dos webs */
.grano{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-size:190px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:1.05rem var(--pad-x);
  background:linear-gradient(rgba(25,19,16,.72),transparent);pointer-events:none;
  transition:background .3s}
.nav.solido{background:rgba(25,19,16,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea)}
.nav > *{pointer-events:auto}
.nav__marca{display:flex;align-items:center;gap:.55rem;font-family:var(--f-d);font-style:italic;
  font-weight:600;font-size:1rem;text-decoration:none;min-height:44px;
  text-shadow:0 1px 12px rgba(25,19,16,.8)}
/* emblema del imagotipo (círculo estrellado + pájaro, sin wordmark: ya está el texto al lado) */
.nav__emblema{flex:none;width:36px;height:36px;transition:transform .2s ease-out}
.nav__marca:hover .nav__emblema{transform:rotate(2deg)}
.nav__d{display:flex;align-items:center;gap:1.5rem}
.nav__d a:not(.btn){font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bruma);text-decoration:none}
.nav__d a:not(.btn):hover{color:var(--crema)}
@media(max-width:900px){ .nav__d a:not(.btn){display:none} }
/* v2 · a 375px «El Jardín de las Delizias» + el botón Reservar no cabían en una
   línea (el nav se iba a 89px, por encima del límite de 80). El wordmark baja
   de tamaño y no rompe línea; el botón recupera un line-height de botón (heredaba
   el 1.75 del body, que por sí solo ya lo dejaba en 53px de alto). */
@media(max-width:700px){
  .nav{padding:.85rem var(--pad-x)}
  .nav__marca{font-size:.72rem;white-space:nowrap;gap:.4rem}
  .nav__emblema{width:29px;height:29px}
  .nav__d{gap:.6rem}
  /* objetivo táctil: DESIGN.md pide 44px mínimo, así que se fija por min-height
     en vez de dejar que la altura la marque el line-height heredado del body */
  .nav__d .btn--pri{line-height:1.2;padding:.6rem 1.15rem;font-size:.82rem;
    min-height:44px;display:inline-flex;align-items:center}
}

.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:99px;font-family:var(--f-s);
  transition:background .18s,transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s}
.btn--pri{background:var(--naranja);color:#221008;padding:.82rem 1.7rem;font-size:.95rem;
  box-shadow:0 6px 26px rgba(231,93,26,.34)}
.btn--pri:hover{background:var(--naranja-hi);transform:translateY(-2px) scale(1.02);box-shadow:0 14px 38px rgba(231,93,26,.5)}
.btn--xl{padding:1.25rem 3rem;font-size:1.15rem}
.btn--sec{border:1px solid rgba(246,238,226,.36);color:var(--crema);padding:.8rem 1.6rem;font-size:.92rem;font-weight:500}
.btn--sec:hover{border-color:var(--crema);background:rgba(246,238,226,.07)}

/* ---------- PORTADA: como la de una revista ---------- */
.portada{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.portada__img{position:absolute;inset:0}
.portada__img img{width:100%;height:100%;object-fit:cover}
.portada__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(25,19,16,.5) 0%,rgba(25,19,16,.05) 30%,rgba(25,19,16,.5) 66%,var(--carbon) 100%)}
/* el nav va fijo: con titulares largos la portada crece hacia arriba y el
   kicker se metía debajo del nav. Este aire arriba es lo único que lo evita. */
.portada__txt{position:relative;z-index:2;width:100%;
  padding:clamp(5rem,9vh,6.5rem) var(--pad-x) clamp(2.2rem,4.5vw,3.4rem)}
.portada__kicker{font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--bruma);
  margin-bottom:1.4rem}
.portada__kicker a{text-decoration:none}
.portada h1{font-family:var(--f-d);font-style:italic;font-weight:900;
  font-size:clamp(2.7rem,9.2vw,6.8rem);line-height:.88;letter-spacing:-.035em;text-wrap:balance}
.portada__claim{margin-top:1.2rem;font-family:var(--f-d);font-weight:600;
  font-size:clamp(1.05rem,2.2vw,1.55rem);line-height:1.3;max-width:38ch;text-wrap:balance}
.portada__pie{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;
  font-size:.86rem;color:var(--bruma);letter-spacing:.02em}
.portada__pie span+span::before{content:"·";margin-right:1.1rem;color:var(--naranja-hi)}
.portada__baja{position:absolute;left:50%;transform:translateX(-50%);bottom:1.2rem;z-index:3;
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(246,238,226,.55)}

/* ---------- CAPÍTULOS ---------- */
.cap{padding:clamp(4.5rem,11vw,9rem) var(--pad-x)}
.cap__n{font-family:var(--f-d);font-style:italic;font-weight:600;font-size:.9rem;
  letter-spacing:.3em;color:var(--naranja-hi);text-transform:uppercase;margin-bottom:1.6rem}
.cap h2{font-family:var(--f-d);font-style:italic;font-weight:900;letter-spacing:-.025em;
  font-size:clamp(2.2rem,6.5vw,4.6rem);line-height:1.02;max-width:16ch;text-wrap:balance}
.cap__txt{margin-top:1.8rem;max-width:var(--col)}
.cap__txt p{margin-bottom:1.1rem;color:var(--bruma)}
.cap__txt p:first-child{color:var(--crema);font-size:clamp(1.1rem,1.5vw,1.32rem);line-height:1.6}
.cap__txt strong{color:var(--crema);font-weight:600}
.cap--centro{text-align:center}
.cap--centro h2{margin-inline:auto}
.cap--centro .cap__txt{margin-inline:auto}

/* foto a sangre entre capítulos: el respiro de la revista */
.sangre{position:relative;margin:0}
.sangre img{width:100%;height:clamp(60svh,72vh,860px);object-fit:cover}
.sangre figcaption{padding:1rem var(--pad-x) 0;font-size:.8rem;color:var(--bruma);letter-spacing:.02em}
.sangre--alta img{height:clamp(78svh,92vh,1000px)}

/* pareja foto + texto */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;
  padding:clamp(3.5rem,9vw,7rem) var(--pad-x)}
.duo--inv .duo__foto{order:2}
.duo__foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.duo h2{font-family:var(--f-d);font-style:italic;font-weight:900;
  font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.duo p{margin-top:1.2rem;color:var(--bruma);max-width:44ch}
@media(max-width:860px){ .duo{grid-template-columns:1fr} .duo--inv .duo__foto{order:0} }

/* frase colosal: el latido de la home, traído aquí */
.grito{padding:clamp(4rem,10vw,8rem) var(--pad-x);text-align:center}
.grito p{font-family:var(--f-d);font-style:italic;font-weight:900;letter-spacing:-.03em;
  font-size:clamp(2rem,7vw,5.2rem);line-height:.98;max-width:18ch;margin-inline:auto;text-wrap:balance}
.grito em{color:var(--rosa);font-style:italic}
.grito small{display:block;margin-top:1.8rem;font-family:var(--f-s);font-size:.92rem;
  letter-spacing:.02em;color:var(--bruma);font-weight:400}

/* ---------- FICHA TÉCNICA: editorial, no tabla de hotel ---------- */
.ficha{padding:clamp(3.5rem,9vw,7rem) var(--pad-x);border-top:1px solid var(--linea)}
.ficha__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2.8rem;margin-top:2.6rem}
.ficha h3{font-family:var(--f-d);font-style:italic;font-weight:600;font-size:1.15rem;
  margin-bottom:1.1rem;color:var(--crema)}
.ficha ul{list-style:none}
.ficha li{padding:.32rem 0;color:var(--bruma);font-size:.96rem}
.ficha li.no{color:rgba(217,205,187,.5)}
.ficha li.no::before{content:"— ";color:rgba(217,205,187,.4)}

/* ---------- PRECIO: grande, claro y sin letra pequeña ---------- */
.precio{padding:clamp(3.5rem,9vw,7rem) var(--pad-x);border-top:1px solid var(--linea);text-align:center}
.precio__cifra{font-family:var(--f-d);font-style:italic;font-weight:900;line-height:.9;
  font-size:clamp(3.4rem,11vw,7.5rem);letter-spacing:-.04em}
.precio__cifra small{font-size:.26em;font-style:normal;font-weight:600;letter-spacing:.02em;
  display:block;margin-top:1rem;color:var(--bruma);font-family:var(--f-s)}
.precio__ejemplo{margin-top:2rem;font-size:1.02rem;color:var(--crema)}
.precio__ejemplo b{font-weight:700}
.precio__incluye{margin-top:1rem;color:var(--bruma);font-size:.95rem;max-width:52ch;margin-inline:auto}
.precio__ctas{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.6rem}
.precio__nota{margin-top:1.3rem;font-size:.85rem;color:rgba(217,205,187,.75)}

/* ---------- PREMIOS: sección propia, con orgullo ---------- */
.premios{padding:clamp(4rem,10vw,8rem) var(--pad-x);background:var(--carbon-2);
  border-block:1px solid var(--linea)}
.premios__in{max-width:62rem;margin:0 auto}
.premios h2{font-family:var(--f-d);font-style:italic;font-weight:900;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.premios__intro{margin-top:1.4rem;color:var(--bruma);max-width:56ch;font-size:1.05rem}
.premios__lista{margin-top:3rem;display:grid;gap:0}
.premio{display:grid;grid-template-columns:5.5rem 1fr;gap:1.6rem;padding:1.5rem 0;
  border-top:1px solid var(--linea);align-items:baseline}
.premio:last-child{border-bottom:1px solid var(--linea)}
.premio__ano{font-family:var(--f-d);font-style:italic;font-weight:900;font-size:1.35rem;color:var(--naranja-hi)}
.premio__que{font-family:var(--f-d);font-weight:600;font-size:1.1rem;color:var(--crema)}
.premio__quien{display:block;font-family:var(--f-s);font-weight:400;font-size:.88rem;
  color:var(--bruma);margin-top:.25rem}
.prensa{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--linea)}
.prensa__t{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bruma);margin-bottom:1.4rem}
.prensa__logos{display:flex;flex-wrap:wrap;gap:.9rem 2.4rem;align-items:baseline}
.prensa__logos span{font-family:var(--f-d);font-style:italic;font-weight:600;
  font-size:clamp(1.05rem,2.2vw,1.5rem);color:rgba(246,238,226,.72)}
@media(max-width:560px){ .premio{grid-template-columns:1fr;gap:.3rem} }

/* ---------- LOS OTROS DOS: no es una tabla, es una invitación ---------- */
.otros{padding:clamp(4rem,10vw,7rem) var(--pad-x);border-top:1px solid var(--linea)}
.otros__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.6rem);margin-top:2.6rem}
.otro{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:4px;
  aspect-ratio:3/4}
.otro img{width:100%;height:100%;object-fit:cover;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.otro:hover img{transform:scale(1.04)}
.otro::after{content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 35%,rgba(25,19,16,.9))}
.otro__txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.2rem,3vw,2rem)}
.otro__n{font-family:var(--f-d);font-style:italic;font-weight:900;font-size:clamp(1.5rem,3.4vw,2.4rem);
  line-height:1}
.otro__p{margin-top:.5rem;font-size:.92rem;color:var(--bruma)}
.otro__mas{margin-top:.9rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--crema)}
@media(max-width:700px){ .otros__grid{grid-template-columns:1fr} .otro{aspect-ratio:16/10} }
/* las dos páginas de destino (floración y valle) enseñan LOS TRES refugios,
   no dos: mismo componente, una columna más. Va después del media anterior
   a propósito, para poder ganarle el orden en móvil. */
.otros__grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){ .otros__grid--3{grid-template-columns:1fr} .otros__grid--3 .otro{aspect-ratio:16/10} }

/* ---------- FAQ ---------- */
.faq{padding:clamp(3.5rem,9vw,7rem) var(--pad-x);border-top:1px solid var(--linea)}
.faq__in{max-width:46rem}
.faq details{border-top:1px solid var(--linea)}
.faq details:last-of-type{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;
  align-items:center;padding:1.2rem 0;font-family:var(--f-d);font-weight:600;font-size:1.06rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-d);font-size:1.4rem;color:var(--naranja-hi);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.3rem;color:var(--bruma);max-width:58ch}
.faq a{color:var(--crema);border-bottom:1px solid var(--naranja);text-decoration:none}

/* ---------- CIERRE + sello del pájaro (continuidad con los créditos) ---------- */
.cierre{padding:clamp(4.5rem,11vw,9rem) var(--pad-x);text-align:center;border-top:1px solid var(--linea)}
/* imagotipo oficial (manual de marca, 1.01): círculo estrellado + pájaro + wordmark.
   Sobre fondo oscuro la tipografía va en blanco, como prescribe el punto 4.03.
   NO se le aplica ningún filtro: alterar los colores es uso incorrecto (punto 4.05). */
.cierre__sello{width:clamp(150px,17vw,220px);height:auto;margin:0 auto .9rem}
/* la firma de la casa: el claim con el que Leticia y José cierran siempre,
   justo debajo del imagotipo — discreta, no es un titular */
.cierre__firma{margin:0 auto 2.4rem;font-family:var(--f-d);font-size:.95rem;
  color:var(--bruma);letter-spacing:.03em}
.cierre h2{font-family:var(--f-d);font-style:italic;font-weight:900;letter-spacing:-.03em;
  font-size:clamp(2.1rem,6.5vw,4.4rem);line-height:1;max-width:16ch;margin-inline:auto;text-wrap:balance}
.cierre__sub{margin-top:1.6rem;color:var(--bruma);max-width:46ch;margin-inline:auto}
.cierre__ctas{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.6rem}
.cierre__dato{margin-top:1.8rem;font-size:.86rem;color:var(--bruma)}

.footer{padding:3.5rem var(--pad-x) 9rem;text-align:center;border-top:1px solid var(--linea)}
.footer__marca{font-family:var(--f-d);font-style:italic;font-weight:900;font-size:1.2rem;margin-bottom:.6rem}
/* páginas legales: no tienen sello de cierre, así que la firma va aquí,
   pegada a la marca del pie — mismo criterio tipográfico que .cierre__firma */
.footer__firma{font-family:var(--f-d);font-size:.95rem;color:var(--bruma);
  letter-spacing:.03em;margin-bottom:1.1rem}
.footer p{font-size:.86rem;color:var(--bruma)}
.footer a{color:var(--crema)}
.footer__legal{margin-top:1.5rem;display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap}
.footer__legal a{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bruma);
  text-decoration:none;border-bottom:1px solid transparent}
.footer__legal a:hover{border-bottom-color:var(--naranja)}

/* ---------- BARRA DE RESERVA: omnipresente, también en escritorio ---------- */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.75rem clamp(1rem,4vw,2.5rem);
  background:rgba(25,19,16,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--linea);
  transform:translateY(110%);transition:transform .3s cubic-bezier(.22,.61,.36,1);
  padding-bottom:calc(.75rem + env(safe-area-inset-bottom))}
.barra.on{transform:none}
.barra__izq{min-width:0}
.barra__q{font-family:var(--f-d);font-weight:600;font-size:1rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra__p{font-size:.78rem;color:var(--bruma)}
.barra__p b{color:var(--crema);font-weight:700}
.barra__der{display:flex;align-items:center;gap:.7rem;flex:none}
@media(max-width:560px){ .barra__q{display:none} .barra{padding-inline:1rem} }

.wapp{position:fixed;right:clamp(1rem,3vw,2.2rem);bottom:5.4rem;z-index:65;
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  background:rgba(25,19,16,.8);color:var(--crema);border:1px solid rgba(246,238,226,.28);
  padding:.68rem 1rem;border-radius:99px;font-size:.83rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.wapp:hover{border-color:var(--crema)}
.wapp svg{width:17px;height:17px;fill:currentColor;flex:none}
@media(max-width:560px){ .wapp span{display:none} .wapp{padding:.6rem .7rem} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn,.otro img,.barra,.nav__emblema{transition:none}
  .btn:hover{transform:none}
  .otro:hover img{transform:none}
  .barra{transform:none}
  .nav__marca:hover .nav__emblema{transform:none}
}

/* ==========================================================================
   MOSAICO + LIGHTBOX · el sistema de galería
   --------------------------------------------------------------------------
   Por qué existe: había demasiada foto a sangre a pantalla completa. A partir
   de aquí, sólo DOS .sangre por página (los dos momentos de más emoción) y el
   resto de las fotos viven aquí, en rejilla, donde se ven muchas de golpe y se
   avanza rápido hacia el botón de reservar.

   Reglas que cumple, por escrito:
   · NO es un carrusel. No se mueve solo, no hay autoplay, no hay puntitos.
   · La foto grande sólo se abre si la pide el usuario (clic o Enter).
   · El pie de foto está calcado del patrón que ya usa .otro (degradado abajo
     + texto crema encima), para que no parezcan dos webs.

   CÓMO SE MIDE UNA CELDA (esto es todo el truco):
   la rejilla tiene 12 columnas iguales. Cada figura declara dos números:
     --span  → cuántas columnas ocupa de ancho  (lo pone .m-3 … .m-12)
     --alto  → cuántas "columnas" mide de alto  (lo pone .m--h3/h5/h6, def. 4)
   y de ahí sale su aspect-ratio: span/alto. Consecuencia práctica:
   DOS CELDAS CON EL MISMO --alto MIDEN LO MISMO DE ALTO AUNQUE TENGAN DISTINTO
   ANCHO. Por eso las filas encajan solas y no quedan huecos raros.

   Receta para quien escriba el HTML:
     1. las figuras de una misma fila deben sumar 12 de --span
     2. y llevar el mismo --alto
   Y si no quieres pensar: ponle a la rejilla .mosaico--5 / --6 / --7 / --8
   según cuántas fotos metas, y las medidas se reparten solas.
   ========================================================================== */

/* ---------- la rejilla ---------- */
.mosaico{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(.45rem,.9vw,.95rem);
  padding:clamp(2.5rem,6vw,4.5rem) var(--pad-x);
  align-items:stretch;                 /* iguala la fila: cero huecos abajo */
}
/* variante a sangre por los lados, para un mosaico que respire de borde a borde */
.mosaico--ancho{padding-inline:clamp(.6rem,1.5vw,1.4rem)}

/* cabecera opcional de la galería: ocupa la fila entera dentro de la rejilla,
   así no hace falta envolver nada. Va antes de las figuras. */
.mosaico__cab{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.5rem 1.5rem;margin-bottom:.6rem}
.mosaico__t{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bruma)}
.mosaico__pista{font-size:.78rem;color:rgba(217,205,187,.72)}

/* ---------- la celda ---------- */
.mosaico > figure{
  --span:6;                            /* por defecto: dos fotos por fila */
  --alto:4;
  position:relative;
  grid-column:span var(--span);
  aspect-ratio:var(--span)/var(--alto);
  /* este width:100% no sobra: sin él, la celda más baja de una fila se estira
     para igualar a la más alta y luego se RE-CALCULA el ancho a partir de su
     propia proporción, y se sale de su columna (medido: 3,7 px de desbordamiento
     en las filas 8+4). Con el ancho fijado, la proporción sólo manda en el alto. */
  width:100%;
  overflow:hidden;
  border-radius:4px;
  background:var(--carbon-2);          /* color de espera mientras carga */
  margin:0;
}
.mosaico > figure img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
/* zoom MUY leve, el justo para que la foto conteste al ratón */
.mosaico > figure:hover img,
.mosaico > figure:focus-within img{transform:scale(1.03)}

/* ---------- el pie: corto, sobre degradado (patrón de .otro) ---------- */
.mosaico > figure figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:2.6rem .9rem .78rem;
  font-size:.78rem;line-height:1.35;letter-spacing:.01em;color:var(--crema);
  background:linear-gradient(transparent,rgba(25,19,16,.88));
  text-shadow:0 1px 10px rgba(25,19,16,.65);
  pointer-events:none;                 /* el clic es del botón, no del pie */
  /* dos líneas como mucho: en una celda estrecha un pie largo se comería la foto */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------- el botón que abre la foto ---------- */
/* Es un <button> de verdad, tapando la celda entera: así funciona con teclado
   y el lector de pantalla anuncia qué se amplía. El foco va hacia dentro
   (offset negativo) porque la figura recorta con overflow:hidden. */
.mosaico__btn{
  position:absolute;inset:0;z-index:4;
  appearance:none;-webkit-appearance:none;border:0;padding:0;
  background:transparent;color:inherit;font:inherit;
  cursor:zoom-in;border-radius:4px;
}
.mosaico__btn:focus-visible{outline:3px solid var(--naranja-hi);outline-offset:-5px}

/* ---------- la lupa: "esto se puede abrir" ---------- */
.mosaico__lupa{
  position:absolute;top:.6rem;right:.6rem;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:99px;
  background:rgba(25,19,16,.55);border:1px solid rgba(246,238,226,.3);
  color:var(--crema);font-family:var(--f-s);font-size:1.05rem;line-height:1;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:scale(.9);
  transition:opacity .25s,transform .25s;
  pointer-events:none;
}
.mosaico > figure:hover .mosaico__lupa,
.mosaico > figure:focus-within .mosaico__lupa{opacity:1;transform:none}
/* en el móvil no hay hover: ahí se queda puesta, discreta */
@media(hover:none){ .mosaico__lupa{opacity:.92;transform:none} }
.mosaico__lupa svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   RECETAS: el reparto automático según cuántas fotos hay
   Usan :nth-of-type(figure) a propósito, para que una .mosaico__cab delante
   no descoloque la cuenta. Van ANTES de las clases .m-* para que una clase
   escrita a mano siempre gane.
   ========================================================================== */

/* 5 fotos → [7+5] · [4+4+4] */
.mosaico--5 > figure:nth-of-type(1){--span:7;--alto:5}
.mosaico--5 > figure:nth-of-type(2){--span:5;--alto:5}
.mosaico--5 > figure:nth-of-type(n+3){--span:4}

/* 6 fotos → [8+4] · [4+8] · [6+6] (zigzag) */
.mosaico--6 > figure:nth-of-type(1),
.mosaico--6 > figure:nth-of-type(4){--span:8;--alto:5}
.mosaico--6 > figure:nth-of-type(2),
.mosaico--6 > figure:nth-of-type(3){--span:4;--alto:5}
.mosaico--6 > figure:nth-of-type(n+5){--span:6}

/* 7 fotos → [6+6] · [4+4+4 en vertical] · [5+7] */
.mosaico--7 > figure:nth-of-type(-n+2){--span:6}
.mosaico--7 > figure:nth-of-type(n+3):nth-of-type(-n+5){--span:4;--alto:5}
.mosaico--7 > figure:nth-of-type(6){--span:5}
.mosaico--7 > figure:nth-of-type(7){--span:7}

/* 8 fotos → [8+4] · [4+8] · tira de cuatro detalles */
.mosaico--8 > figure:nth-of-type(1),
.mosaico--8 > figure:nth-of-type(4){--span:8;--alto:5}
.mosaico--8 > figure:nth-of-type(2),
.mosaico--8 > figure:nth-of-type(3){--span:4;--alto:5}
.mosaico--8 > figure:nth-of-type(n+5){--span:3}

/* ---------- anchos a mano (ganan a la receta) ---------- */
.mosaico > figure.m-2{--span:2}
.mosaico > figure.m-3{--span:3}
.mosaico > figure.m-4{--span:4}
.mosaico > figure.m-5{--span:5}
.mosaico > figure.m-6{--span:6}
.mosaico > figure.m-7{--span:7}
.mosaico > figure.m-8{--span:8}
.mosaico > figure.m-9{--span:9}
.mosaico > figure.m-10{--span:10}
.mosaico > figure.m-12{--span:12}

/* ---------- altos a mano (4 es el de casa) ---------- */
.mosaico > figure.m--h3{--alto:3}      /* apaisada, casi panorámica */
.mosaico > figure.m--h4{--alto:4}
.mosaico > figure.m--h5{--alto:5}      /* la de retrato */
.mosaico > figure.m--h6{--alto:6}      /* torre: úsala una vez, no tres */

/* ---------- tablet: la tira de cuatro se parte en dos ---------- */
@media(max-width:1000px){
  .mosaico--8 > figure:nth-of-type(n+5){--span:6}
  .mosaico > figure.m-2,
  .mosaico > figure.m-3{--span:6}
}

/* ---------- móvil: dos columnas y todas iguales ---------- */
/* Aquí se acaba el mosaico: en 380 px de ancho una rejilla desigual es ruido.
   Dos columnas, todas en retrato, y la panorámica cruzando de lado a lado. */
@media(max-width:760px){
  .mosaico{grid-template-columns:repeat(2,1fr);gap:.4rem}
  .mosaico > figure{grid-column:span 1;aspect-ratio:4/5}
  .mosaico > figure.m-12,
  .mosaico > figure.m--ancha-movil{grid-column:1/-1;aspect-ratio:3/2}
  .mosaico > figure figcaption{padding:2rem .7rem .6rem;font-size:.74rem}
}

/* ==========================================================================
   LIGHTBOX · la capa de ampliación
   Nace apagada (hidden). Para abrirla: quitar el atributo hidden y, EN EL
   FRAME SIGUIENTE, añadir la clase .on — si se hacen a la vez no hay
   transición porque se viene de display:none.
   Al cerrar: quitar .on, esperar la transición y volver a poner hidden.
   Mientras esté abierta, .sin-scroll en el <body>.
   ========================================================================== */
.lightbox{
  position:fixed;inset:0;z-index:200;      /* por encima de nav(60), barra(70) y grano(80) */
  /* minmax(0,1fr) y no 1fr: si no, una foto vertical de 1.448 px estira la fila
     hasta su tamaño natural y se sale de la pantalla por abajo */
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  padding:clamp(.75rem,2vw,1.4rem);
  padding-bottom:calc(clamp(.75rem,2vw,1.4rem) + env(safe-area-inset-bottom));
  background:rgba(25,19,16,.96);
  backdrop-filter:blur(18px) saturate(.85);
  -webkit-backdrop-filter:blur(18px) saturate(.85);
  opacity:0;transition:opacity .3s ease;
}
.lightbox.on{opacity:1}
.lightbox[hidden]{display:none}          /* sin esto, display:grid le gana a hidden */

.lightbox__barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-inline:.2rem}
.lightbox__n{font-family:var(--f-d);font-style:italic;font-weight:600;font-size:.92rem;
  color:var(--bruma);letter-spacing:.04em}

/* centrado con flex, no con grid: con grid, la celda implícita se dimensiona
   con el alto NATURAL de la foto y la empuja fuera de la pantalla */
.lightbox__vista{display:flex;align-items:center;justify-content:center;min-height:0;
  padding-inline:clamp(3.2rem,7vw,5.5rem)}   /* hueco para que las flechas no pisen la foto */
.lightbox__img{
  max-width:100%;max-height:min(86vh,100%);
  width:auto;height:auto;object-fit:contain;
  border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:scale(.985);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.lightbox.on .lightbox__img{transform:none}

.lightbox__pie{text-align:center;color:var(--bruma);font-size:.86rem;line-height:1.5;
  max-width:62ch;margin-inline:auto;padding:.9rem 1rem .3rem}

/* los tres botones: 44 px de área de toque como mínimo, y foco bien visible */
.lightbox__cerrar,.lightbox__nav{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;width:clamp(44px,5.2vw,52px);aspect-ratio:1;
  border-radius:99px;border:1px solid var(--linea);
  background:rgba(25,19,16,.6);color:var(--crema);cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s,transform .2s;
}
.lightbox__cerrar:hover,.lightbox__nav:hover{
  background:rgba(246,238,226,.12);border-color:rgba(246,238,226,.5)}
.lightbox__cerrar svg,.lightbox__nav svg{width:20px;height:20px;fill:none;
  stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lightbox__cerrar:focus-visible,.lightbox__nav:focus-visible{
  outline:3px solid var(--naranja-hi);outline-offset:3px}
/* un botón sin destino (primera o última foto) se apaga, no desaparece:
   así no bailan los controles */
.lightbox__nav[disabled]{opacity:.3;cursor:default}
.lightbox__nav[disabled]:hover{background:rgba(25,19,16,.6);border-color:var(--linea)}

/* el centrado va en `translate` y el hover en `transform`: así uno no pisa al
   otro cuando las flechas cambian de sitio en móvil */
.lightbox__nav{position:absolute;top:50%;translate:0 -50%;z-index:2}
.lightbox__nav:hover{transform:scale(1.06)}
.lightbox__nav--ant{left:clamp(.5rem,2vw,1.6rem)}
.lightbox__nav--sig{right:clamp(.5rem,2vw,1.6rem)}

/* móvil: las flechas bajan al pie, donde llega el pulgar */
@media(max-width:560px){
  .lightbox__vista{padding-inline:0}
  .lightbox__nav{top:auto;bottom:calc(.8rem + env(safe-area-inset-bottom));translate:0}
  .lightbox__img{max-height:min(72svh,100%)}
  .lightbox__pie{padding-inline:4.2rem;font-size:.8rem}
}

/* con la ampliación abierta, el fondo no se mueve */
body.sin-scroll{overflow:hidden}

/* ---------- respeto por quien pide que nada se mueva ---------- */
@media (prefers-reduced-motion: reduce){
  .mosaico > figure img,
  .mosaico__lupa,
  .lightbox,
  .lightbox__img,
  .lightbox__cerrar,
  .lightbox__nav{transition:none}
  .mosaico > figure:hover img,
  .mosaico > figure:focus-within img{transform:none}
  .lightbox__img{transform:none}
  .lightbox__nav:hover{transform:none}
  .mosaico__lupa{transform:none}
}

/* ==========================================================================
   REPRO · el reproductor de la casa
   --------------------------------------------------------------------------
   Por qué existe: los vídeos de los bloques .duo llevaban controles nativos
   diminutos (o un botón gris de 3,2 rem) que no se veían y que no eran de
   esta web. Aquí el play es un objeto de marca: el mismo naranja mongol, la
   misma sombra y el mismo hover que .btn--pri. Se lee desde el otro lado de
   la habitación.

   La regla de oro del componente: EL BOTÓN MANDA CUANDO ESTÁ PARADO Y SE
   APARTA CUANDO NO. En reposo ocupa el centro y mide 68-80 px. En cuanto el
   vídeo corre, encoge a 44 px, se va a la esquina inferior derecha y se vuelve
   carbón translúcido con blur, para no taparle la cara a la imagen. Al pasar
   el ratón o al llegar con el teclado, vuelve a estar entero.

   Sin autoplay, nunca. El vídeo no se mueve hasta que alguien lo pide, y el
   mismo botón lo para (WCAG 2.2.2 sin controles nativos que no pegan).

   Estados (los pone el JS, no hay :checked ni trucos):
     .repro.visto     → ya se ha reproducido alguna vez: el póster se retira y
                        aparece la barra de progreso
     .repro.jugando   → está corriendo AHORA: botón pequeño en la esquina y
                        velo fuera
   Un vídeo pausado a mitad NO recupera el póster (taparía el fotograma), pero
   sí recupera el botón grande: es el momento en el que hay que volver a verlo.

   Capas (z-index): vídeo 0 · póster 1 · velo 2 · barra 4 · botón 5.
   Todo por debajo del nav (60), la barra de reserva (70) y el grano (80).
   ========================================================================== */

.repro{
  --repro-tam:clamp(68px,7.5vw,80px);   /* el diámetro en reposo */
  --repro-pad:.85rem;                   /* separación del botón a la esquina */
  --repro-p:0;                          /* progreso 0→1, lo escribe el JS */
  position:relative;
  width:100%;
  aspect-ratio:4/5;                     /* el mismo retrato que .duo__foto img */
  overflow:hidden;
  border-radius:4px;
  background:var(--carbon-2);           /* color de espera mientras carga */
  margin:0;
  isolation:isolate;                    /* los z-index de dentro no salen fuera */
}
/* proporciones alternativas, por si el vídeo no es vertical */
.repro--apaisado{aspect-ratio:16/9}
.repro--cuadrado{aspect-ratio:1/1}

/* el vídeo: se le fijan las dos medidas a propósito, así ninguna regla suelta
   de página (.duo__foto video{aspect-ratio:4/5}) puede deformarlo */
.repro__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ---------- el póster: siempre puesto antes del play ---------- */
/* Va como <img> y no como atributo poster= del vídeo por dos razones: se puede
   pedir en lazy y no se descarga dos veces la misma imagen. Se retira sólo
   cuando el vídeo ya está pintando fotogramas (evento 'playing'), nunca antes:
   si se quitara en 'play' se vería un parpadeo negro mientras bufferea. */
.repro__poster{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .3s ease;
  pointer-events:none;
}
.repro.visto .repro__poster{opacity:0}

/* ---------- el velo: carbón muy suave para que el botón destaque ---------- */
/* Es radial y no lineal a propósito: oscurece el centro, que es exactamente
   donde está el botón, y deja los bordes de la foto casi limpios. Sobre una
   foto clara (nieve, cielo blanco) es lo único que garantiza que el naranja
   se lea. Desaparece mientras el vídeo corre: ahí manda la imagen. */
.repro::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(70% 70% at 50% 50%,rgba(25,19,16,.5),rgba(25,19,16,.2));
  transition:opacity .3s ease;
}
.repro.jugando::after{opacity:0}

/* ---------- el botón ---------- */
/* El centrado va con left/top en porcentaje + margen negativo (y NO con
   inset:0;margin:auto) porque así la ida a la esquina es interpolable: cuando
   cambia --repro-tam, width, height, left, top y margin se recalculan a la vez
   y el botón se desliza. Con inset:auto no hay transición, hay salto. */
.repro__btn{
  position:absolute;z-index:5;
  left:50%;top:50%;
  width:var(--repro-tam);height:var(--repro-tam);
  margin:calc(var(--repro-tam) / -2) 0 0 calc(var(--repro-tam) / -2);
  display:inline-flex;align-items:center;justify-content:center;
  appearance:none;-webkit-appearance:none;border:0;padding:0;
  border-radius:99px;cursor:pointer;
  /* el naranja de la puerta mongola con el triángulo en carbón: 5,2:1 */
  background:var(--naranja);color:#221008;
  box-shadow:0 6px 26px rgba(231,93,26,.34);     /* la sombra de .btn--pri */
  transition:width .25s cubic-bezier(.22,.61,.36,1),
             height .25s cubic-bezier(.22,.61,.36,1),
             left .25s cubic-bezier(.22,.61,.36,1),
             top .25s cubic-bezier(.22,.61,.36,1),
             margin .25s cubic-bezier(.22,.61,.36,1),
             background-color .18s,box-shadow .18s,opacity .2s,
             transform .18s cubic-bezier(.22,.61,.36,1);
}
/* mismo hover que el botón primario de la casa, ni un píxel más */
.repro__btn:hover{
  background:var(--naranja-hi);
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 14px 38px rgba(231,93,26,.5);
}
.repro__btn:focus-visible{outline:3px solid var(--naranja-hi);outline-offset:3px}

.repro__i{width:38%;height:38%;fill:currentColor;flex:none}
/* el triángulo pesa a la izquierda: se empuja un pelo para que parezca centrado */
.repro__i--play{margin-left:6%}
.repro__i--pausa{display:none}
.repro.jugando .repro__i--play{display:none}
.repro.jugando .repro__i--pausa{display:block}

/* ---------- reproduciendo: el botón se aparta ---------- */
.repro.jugando{--repro-tam:44px}         /* 44 px clavados: el mínimo táctil */
.repro.jugando .repro__btn{
  left:calc(100% - var(--repro-tam) - var(--repro-pad));
  top:calc(100% - var(--repro-tam) - var(--repro-pad));
  margin:0;
  background:rgba(25,19,16,.55);
  border:1px solid rgba(246,238,226,.3);  /* para que sobreviva a un fotograma claro */
  color:var(--crema);
  box-shadow:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  /* .7 y no .5: medido sobre un fotograma oscuro, por debajo de .7 el botón
     desaparece de verdad y ya no se puede parar lo que se ha arrancado */
  opacity:.7;
}
/* vuelve entero si lo buscas: con el ratón encima del vídeo o con el teclado */
.repro.jugando:hover .repro__btn,
.repro.jugando .repro__btn:hover,
.repro.jugando .repro__btn:focus-visible{opacity:1}
.repro.jugando .repro__btn:hover{background:rgba(25,19,16,.78);border-color:rgba(246,238,226,.55)}
/* en táctil no hay hover: ahí se queda legible pero discreto */
@media(hover:none){ .repro.jugando .repro__btn{opacity:.82} }

/* ---------- la barra de progreso ---------- */
/* Fina, abajo, naranja sobre una línea que casi no está. Sin números y sin
   tiempo: esto es ambiente, no YouTube. No se puede arrastrar a propósito —
   un scrubber pediría 44 px de alto y se comería la foto. Va aria-hidden
   porque no aporta nada que no diga ya el botón. */
.repro__barra{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  height:3px;background:rgba(246,238,226,.14);
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.repro.visto .repro__barra{opacity:1}
.repro__progreso{
  display:block;width:100%;height:100%;
  transform-origin:left center;
  transform:scaleX(var(--repro-p,0));
  background:var(--naranja);
  /* sin transición: el JS la pinta en rAF a 60 fps. Con transición, cada
     vuelta del loop la barra "volvía" hacia atrás y se veía fatal. */
}

/* ---------- quien pide que nada se mueva ---------- */
/* El vídeo NO se esconde: aquí nada arranca solo, así que basta con quitarle
   los deslizamientos. Quien quiera verlo, lo pide; quien no, ve el póster. */
@media (prefers-reduced-motion: reduce){
  .repro__poster,.repro::after,.repro__btn,.repro__progreso{transition:none}
  .repro__btn:hover{transform:none}
}