/* ============================================================
   HUNGER · propuesta B — «Papel y jungla»
   Componentes. CSS puro: ninguna librería de movimiento.
   ============================================================ */

/* ============ 1 · BARRA SUPERIOR ============ */
.barra-nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent);
}
/* El nav de la portada. En la referencia se queda BLANCO sobre el fondo crema
   al bajar y desaparece: ese defecto no se hereda. Aquí el punto de partida es
   un velo oscuro —legible sobre foto y sobre papel—, y donde el navegador lo
   soporta, ese velo se pinta solo al salir de la portada. */
.barra-nav--sobre-foto {
  background: color-mix(in srgb, var(--tinta) 80%, transparent);
  backdrop-filter: blur(10px) saturate(1.05);
  border-bottom: 0;
  color: var(--hueso);
}
@supports (animation-timeline: scroll()) {
  .barra-nav--sobre-foto {
    animation: velar-nav linear both;
    animation-timeline: scroll(root);
    animation-range: 0 62svh;
  }
}
@keyframes velar-nav {
  0%, 22%  { background-color: transparent; backdrop-filter: blur(0px); }
  100%     { background-color: color-mix(in srgb, var(--tinta) 86%, transparent); backdrop-filter: blur(12px); }
}
.barra-nav__caja {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.5rem;
}
.marca { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex-shrink: 0; padding-block: 0.75rem; }
/* El cocodrilo de su logotipo real, recortado de su propio material.
   Va como máscara para poder pintarlo del color que toque en cada fondo. */
.marca__sello {
  width: 2.9rem; height: 1.71rem; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url('../img/mascota.webp') center/contain no-repeat;
          mask: url('../img/mascota.webp') center/contain no-repeat;
}
.marca__nombre {
  font-family: var(--marca);
  font-weight: 400; font-size: 1.6rem; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.barra-nav--sobre-foto .marca { color: var(--hueso); text-shadow: 0 1px 14px rgb(0 0 0 / 0.5); }

.menu-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
.menu-nav a {
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem;              /* «Carta» mide 41px de ancho: por debajo de
                                      44 el dedo falla aunque el alto sobre */
  font-size: var(--t-menudo); font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding-block: 0.8125rem;        /* 13+13+18 = 44px de área táctil */
  border-bottom: 1px solid transparent;
  transition: border-color 0.22s ease-out, color 0.22s ease-out;
}
.menu-nav a:hover { border-bottom-color: currentColor; }
.menu-nav a[aria-current='page'] { border-bottom-color: var(--llama); }
.barra-nav--sobre-foto .menu-nav a { color: var(--hueso); text-shadow: 0 1px 12px rgb(0 0 0 / 0.55); }

/* el nav de teléfono: se convierte en carril deslizante, nunca en hamburguesa */
@media (width < 56.25rem) {
  .barra-nav__caja { min-height: 3.75rem; }
  .marca__nombre { font-size: 1.25rem; }
  .marca__sello { width: 2.5rem; height: 1.05rem; }
  /* Carril deslizante, no hamburguesa. Y con desvanecido al borde: un carril
     que se corta a hueso parece un texto roto; desvanecido se lee como «sigue». */
  .menu-nav {
    gap: 1.1rem; overflow-x: auto; scrollbar-width: none; min-width: 0;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2rem), transparent 100%);
    padding-inline-end: 1.5rem;
  }
  .menu-nav::-webkit-scrollbar { display: none; }
  .menu-nav a { white-space: nowrap; font-size: 0.75rem; letter-spacing: 0.1em; }
}

/* ============ 2 · PORTADA CON PASE DE CINCO ============ */
.portada {
  position: relative;
  height: 100svh; min-height: 33rem;
  margin-block-start: -4.5rem;        /* el nav sticky flota encima, sin robarle alto */
  overflow: clip;                     /* clip, no hidden: hidden rompe view() */
  background: var(--tinta);
  isolation: isolate;
}
.portada__pila { position: absolute; inset: 0; }
.portada__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0;
  animation: pase 26s linear infinite;
}
/* Los retardos NO son 0 · 6,5 · 13 · 19,5. Con esos, cada foto se apagaba
   antes de que arrancara la siguiente y quedaba ~1,3 s de fondo negro en cada
   cambio — medido, no supuesto. El keyframe ahora entra y sale dentro de su
   propio ciclo, y el primer retardo es NEGATIVO para que la portada aparezca
   ya encendida en vez de amanecer 1,3 s después de cargar. */
.portada__foto:nth-child(1) { animation-delay: -1.3s; }
.portada__foto:nth-child(2) { animation-delay:  5.2s; }
.portada__foto:nth-child(3) { animation-delay: 11.7s; }
.portada__foto:nth-child(4) { animation-delay: 18.2s; }

@keyframes pase {
  0%   { opacity: 0; scale: 1.005; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; scale: 1.075; }
  100% { opacity: 0; scale: 1.075; }
}

/* Dos capas. La vertical asienta el nav y el pie de la portada; la elipse
   central sostiene el titular, que si no depende de qué diapositiva toque —y
   una de las cuatro es un salón claro. */
/* El velo tiene que sostener el nombre sobre CUALQUIERA de las cuatro fotos, y
   una de ellas es la barra a plena luz. Con la elipse al 52% el titular se
   quedaba justo sobre esa. */
.portada__velo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 66% 52% at 50% 48%, rgb(14 16 10 / 0.66) 0%, rgb(14 16 10 / 0.34) 60%, transparent 100%),
    linear-gradient(to bottom, rgb(14 16 10 / 0.70) 0%, rgb(14 16 10 / 0.26) 26%, rgb(14 16 10 / 0.38) 60%, rgb(14 16 10 / 0.86) 100%);
}
.portada__texto {
  position: relative; z-index: 2;
  height: 100%;
  display: grid; align-content: center; justify-items: center;
  text-align: center; color: var(--hueso);
  padding-block: 6rem 5rem;
}
.portada__rotulo { color: var(--laton); margin-bottom: 1.5rem; }
.portada__nombre {
  font-family: var(--marca);
  font-weight: 400; font-size: var(--t-portada);
  letter-spacing: 0.035em; text-transform: uppercase;
  line-height: 0.92; margin: 0;
  text-shadow: 0 2px 40px rgb(0 0 0 / 0.5);
}
.portada__sello {
  width: clamp(6rem, 13vw, 11rem); aspect-ratio: 1600/566;
  background: var(--hueso); margin-bottom: 1.25rem;
  -webkit-mask: url('../img/mascota.webp') center/contain no-repeat;
          mask: url('../img/mascota.webp') center/contain no-repeat;
  filter: drop-shadow(0 2px 20px rgb(0 0 0 / 0.5));
}
.portada__lema {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: var(--t-guia); color: var(--laton);
  margin-top: 1.25rem; letter-spacing: 0.01em;
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: 0.875rem; justify-content: center; margin-top: 2.25rem; }

/* contador del pase, abajo a la derecha */
.pase-cuenta {
  position: absolute; z-index: 2;
  inset-block-end: 2rem; inset-inline-end: var(--canal);
  display: grid; color: var(--hueso);
  font-size: var(--t-rotulo); letter-spacing: 0.24em;
}
/* El contador NO hereda el crossfade de las fotos: dos cifras superpuestas
   durante el segundo de cruce se leen como un error de impresión. Corta seco. */
.pase-cuenta span { grid-area: 1 / 1; opacity: 0; animation: pase-cuenta 26s steps(1, end) infinite; }
@keyframes pase-cuenta { 0%, 24.99% { opacity: 1; } 25%, 99.99% { opacity: 0; } 100% { opacity: 1; } }
.pase-cuenta span:nth-child(1) { animation-delay: -1.3s; }
.pase-cuenta span:nth-child(2) { animation-delay:  5.2s; }
.pase-cuenta span:nth-child(3) { animation-delay: 11.7s; }
.pase-cuenta span:nth-child(4) { animation-delay: 18.2s; }

.desliza {
  position: absolute; z-index: 2; inset-block-end: 2rem; inset-inline-start: var(--canal);
  color: var(--hueso); font-size: var(--t-rotulo); letter-spacing: 0.24em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.6rem;
}
.desliza::after {
  content: ''; width: 2.5rem; height: 1px; background: currentColor;
  transform-origin: left; animation: tirar 2.6s ease-in-out infinite;
}
@keyframes tirar { 0%, 100% { scale: 1 1; opacity: 0.45; } 50% { scale: 1.7 1; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .portada__foto, .pase-cuenta span { animation: none; }
  .portada__foto:first-child, .pase-cuenta span:first-child { opacity: 1; }
  .desliza::after { animation: none; }
}
@media (width < 56.25rem) {
  .portada { height: 92svh; margin-block-start: -3.75rem; }
  .desliza { display: none; }
  .pase-cuenta { inset-inline: 0; inset-block-end: 1.5rem; justify-items: center; }
}

/* ============ 3 · BOTONES ============ */
.boton {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.9rem 1.75rem;
  font-size: var(--t-menudo); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background-color 0.22s ease-out, color 0.22s ease-out, border-color 0.22s ease-out;
}
.boton--llama { background: var(--llama); color: #17140C; }
.boton--llama:hover { background: #FF9333; }
.boton--linea {
  background: transparent; color: currentColor;
  border: 1.5px solid color-mix(in srgb, currentColor 60%, transparent);
}
.boton--linea:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }
.boton--tinta { background: var(--tinta); color: var(--hueso); }
.boton--tinta:hover { background: #2E2A1D; }

/* ============ 4 · SECCIONES ============ */
.tramo { padding-block: var(--aire); }
.tramo--jungla { background: var(--jungla); color: var(--hueso); }
.tramo--jungla h1, .tramo--jungla h2, .tramo--jungla h3 { color: var(--hueso); }
.tramo--hondo { background: var(--papel-hondo); }

.cabecera-tramo { text-align: center; margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.cabecera-tramo .rotulo { color: var(--oro-hondo); display: block; margin-bottom: 1.125rem; }
.tramo--jungla .cabecera-tramo .rotulo { color: var(--oro); }
.titulo { font-size: var(--t-titulo); }
.titulo em { font-style: italic; }
.guia {
  font-size: var(--t-guia); line-height: 1.62; margin-inline: auto;
  color: var(--tinta-suave);
  margin-top: 1.5rem;
}
.tramo--jungla .guia, .pantano .guia, .pie .guia { color: var(--hueso-suave); }

/* ============ 5 · LOS TRES NICHOS  ★ ============ */
/* El defecto de la referencia era que los rótulos estaban puestos a ojo y
   quedaban a tres alturas distintas. Aquí la altura del hueco es fija por
   aspect-ratio y el rótulo cuelga de una fila de rejilla común: los tres
   caen forzosamente en la misma línea base. No es cuidado: es estructura. */
.nichos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3.2vw, 3rem);
  align-items: start;
}
.nicho {
  display: grid; grid-template-rows: auto auto auto; row-gap: 0;
  text-align: center; text-decoration: none; color: inherit;
}

.nicho__hueco {
  position: relative;
  aspect-ratio: 3 / 4.35;
  clip-path: url(#arco-horno);
  background: var(--papel-hondo);
  overflow: clip;
}
.nicho__vista { position: absolute; inset: 0; clip-path: inset(0 0 0 0); }
.nicho__vista img {
  width: 100%; height: 100%; object-fit: cover;
  scale: 1;
}
.nicho__rotulo {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-nicho); line-height: 1.15;
  margin-top: 1.75rem;          /* la MISMA separación en los tres */
}
.nicho__pie {
  font-size: var(--t-menudo); line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--tinta-suave);
  margin-top: 0.5rem;
  max-width: 22ch; margin-inline: auto;
}
.nicho__hueco, .nicho__rotulo, .nicho__pie { display: block; }
.nicho:hover .nicho__vista img, .nicho:focus-visible .nicho__vista img { scale: 1.05; }
.nicho:hover .nicho__rotulo { color: var(--terracota); }
.nicho__rotulo { transition: color 0.22s ease-out; }
.nicho__vista img { transition: scale 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* — el despliegue —
   La coreografía cuelga de UN solo timeline por nicho, declarado en el enlace.
   Con un `view()` propio por elemento, la foto y el rótulo miden rangos
   distintos —son cajas de distinto alto— y el texto acaba apareciendo de golpe
   cuando la imagen ya está entera. Compartiendo timeline, los porcentajes son
   comparables y la secuencia se lee: sube la foto, y cuando va por dos tercios
   entra el rótulo. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .nicho { view-timeline-name: --nicho; view-timeline-axis: block; }

    .nicho__vista {
      animation: alzar-nicho cubic-bezier(0.22, 0.61, 0.36, 1) both;
      animation-timeline: --nicho;
      animation-range: entry 6% entry 72%;
    }
    .nicho__vista img {
      animation: asentar-foto cubic-bezier(0.22, 0.61, 0.36, 1) both;
      animation-timeline: --nicho;
      animation-range: entry 6% entry 84%;
    }
    .nicho__rotulo, .nicho__pie {
      animation: emerger cubic-bezier(0.22, 0.61, 0.36, 1) both;
      animation-timeline: --nicho;
      animation-range: entry 44% entry 96%;
    }
    .nicho__pie { animation-range: entry 52% entry 100%; }

    /* Escalonado deliberado, y SOLO cuando están lado a lado: apilados en
       teléfono cada uno entra solo y un retardo se leería como lentitud. */
    @media (width >= 56.25rem) {
      .nichos > li:nth-child(2) .nicho__vista     { animation-range: entry 14% entry 80%; }
      .nichos > li:nth-child(2) .nicho__vista img { animation-range: entry 14% entry 92%; }
      .nichos > li:nth-child(2) .nicho__rotulo    { animation-range: entry 52% entry 104%; }
      .nichos > li:nth-child(2) .nicho__pie       { animation-range: entry 60% entry 108%; }

      .nichos > li:nth-child(3) .nicho__vista     { animation-range: entry 22% entry 88%; }
      .nichos > li:nth-child(3) .nicho__vista img { animation-range: entry 22% entry 100%; }
      .nichos > li:nth-child(3) .nicho__rotulo    { animation-range: entry 60% entry 112%; }
      .nichos > li:nth-child(3) .nicho__pie       { animation-range: entry 68% entry 116%; }
    }
  }
}
@keyframes alzar-nicho {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes asentar-foto {
  from { scale: 1.18; }
  to   { scale: 1; }
}
@keyframes emerger {
  from { opacity: 0; translate: 0 1.5rem; }
  to   { opacity: 1; translate: 0 0; }
}

@media (width < 56.25rem) {
  .nichos { grid-template-columns: 1fr; gap: 3.5rem; max-width: 26rem; margin-inline: auto; }
  .nicho__hueco { aspect-ratio: 3 / 3.7; }
}

/* ============ 6 · MANIFIESTO ============ */
.manifiesto { text-align: center; }
.manifiesto__frase {
  font-family: var(--display); font-weight: 600; font-style: italic;
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.5rem);
  line-height: 1.34; letter-spacing: -0.008em;
  max-width: 30ch; margin-inline: auto;
}
.manifiesto__firma { margin-top: 2.25rem; color: var(--oro-hondo); }
.tramo--jungla .manifiesto__firma { color: var(--oro); }

/* ============ 7 · BANDA DE DOS FOTOS (patrón del menú de la referencia) ============ */
/* grid-template-rows: 1fr NO es opcional. Sin ella la fila implícita es `auto`
   y crece con la imagen a su tamaño natural: el `height` del contenedor no la
   limita, la banda se dispara a mil y pico de píxeles y se come la sección de
   abajo. Compila sin error y solo se ve mirando la página. */
.banda-doble {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 0;
  height: clamp(15rem, 34vw, 30rem);
  overflow: clip;
}
.banda-doble img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
@media (width < 56.25rem) { .banda-doble { height: 13rem; } }

.foto-sangre { height: clamp(18rem, 56vw, 40rem); position: relative; overflow: clip; }
.foto-sangre img { width: 100%; height: 100%; object-fit: cover; }
.foto-sangre__frase {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: var(--canal);
  text-align: center; color: var(--hueso);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.375rem, 0.9rem + 2vw, 2.375rem);
  line-height: 1.3; text-shadow: 0 2px 30px rgb(0 0 0 / 0.6);
  /* El velo tiene que sostener una frase sobre CUALQUIERA de las fotos, y una
     de ellas es un salón claro: con 0.34 el texto se quedaba en 2,87:1. */
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgb(14 16 10 / 0.42) 0%, transparent 100%),
    linear-gradient(to bottom, rgb(14 16 10 / 0.46), rgb(14 16 10 / 0.62));
}
.foto-sangre__frase span { max-width: 22ch; }

/* ============ 8 · LA CARTA ============ */
.carta-cols {
  columns: 2; column-gap: clamp(2rem, 5vw, 5rem);
  orphans: 3; widows: 3;
}
@media (width < 56.25rem) { .carta-cols { columns: 1; } }

.grupo { break-inside: avoid-column; margin-bottom: 3rem; }
.grupo__nombre {
  font-family: var(--texto);
  font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--oro-hondo);
  padding-bottom: 0.75rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 16%, transparent);
}
.linea { margin-bottom: 1.4rem; break-inside: avoid; }
.linea__cab {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-weight: 500;
}
.linea__n { font-size: 1rem; font-weight: 600; letter-spacing: 0.005em; }
.linea__guion {
  flex: 1 1 auto; min-width: 1.5rem;
  border-bottom: 1px dotted color-mix(in srgb, var(--tinta) 30%, transparent);
  translate: 0 -0.22em;
}
.linea__p { font-variant-numeric: tabular-nums; color: var(--terracota); white-space: nowrap; }
.linea__p small { font-size: 0.78em; letter-spacing: 0.04em; }
.linea__d {
  font-size: var(--t-menudo); line-height: 1.55; margin-top: 0.3rem;
  color: var(--tinta-suave);
}
/* los ingredientes con la barra vertical de la referencia */
.linea__d b { font-weight: 400; color: var(--oro-hondo); }

.nota-carta {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
  font-size: var(--t-menudo); line-height: 1.6;
  color: var(--tinta-suave);
  max-width: 46ch;
}

/* ============ 9 · GAVETAS DEL ANAQUEL ============ */
.gavetas { display: grid; gap: 0; max-width: 52rem; margin-inline: auto; }
.gaveta {
  border-top: 1px solid color-mix(in srgb, var(--hueso) 20%, transparent);
}
.gaveta:last-child { border-bottom: 1px solid color-mix(in srgb, var(--hueso) 20%, transparent); }
.gaveta summary {
  display: flex; align-items: baseline; gap: 1rem;
  padding-block: 1.35rem; cursor: pointer; list-style: none;
  min-height: 3.5rem;
  transition: color 0.2s ease-out;
}
.gaveta summary::-webkit-details-marker { display: none; }
.gaveta summary:hover { color: var(--oro); }
.gaveta__n {
  font-family: var(--marca); font-size: 1.4rem; font-weight: 400;
  color: var(--oro); font-variant-numeric: tabular-nums; min-width: 2.4ch;
}
.gaveta__q { flex: 1; font-size: var(--t-guia); }
.gaveta__mas {
  font-size: 1.5rem; line-height: 1; color: var(--oro);
  transition: rotate 0.25s ease-out;
}
.gaveta[open] .gaveta__mas { rotate: 45deg; }
.gaveta__lista {
  padding-bottom: 1.75rem; max-width: 62ch;
  font-size: var(--t-menudo); line-height: 1.9;
  color: var(--hueso-tenue);
}
.gaveta__lista strong { color: var(--oro); font-weight: 500; }
.gaveta__lista em {
  display: block; font-style: normal; margin-top: 0.75rem;
  font-size: var(--t-rotulo); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--oro);
}

/* ============ 10 · EL COCODRILO ============ */
.pantano {
  position: relative; overflow: clip;
  background: var(--jungla);
  color: var(--hueso);            /* sin esto el cuerpo hereda la tinta del papel
                                     y el párrafo queda negro sobre verde negro */
}
.pantano h1, .pantano h2, .pantano h3 { color: var(--hueso); }
/* el fondo de lunares del bar de la referencia, aquí en escamas */
.pantano::before {
  content: ''; position: absolute; inset: -10%;
  background-image: radial-gradient(circle at center, color-mix(in srgb, var(--oro) 15%, transparent) 0 38%, transparent 39%);
  background-size: 1.55rem 1.55rem;
  opacity: 0.5;
}
.pantano__caja { position: relative; z-index: 1; }
.pantano__reja {
  display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.pantano__coco {
  width: 100%; min-width: 0;
  aspect-ratio: 1600 / 566;
  background: var(--oro);
  -webkit-mask: url('../img/mascota.webp') center/contain no-repeat;
          mask: url('../img/mascota.webp') center/contain no-repeat;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pantano__coco {
      animation: nadar linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 58%;
    }
  }
}
@keyframes nadar {
  from { translate: 7% 0; opacity: 0.25; }
  to   { translate: 0 0; opacity: 1; }
}

@media (width < 56.25rem) {
  .pantano__reja { grid-template-columns: 1fr; }
  .pantano__coco { order: -1; }
}

/* ============ 11 · TARJETAS DE ESPACIO ============ */
.espacios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.espacio { background: var(--papel-hondo); display: grid; grid-template-rows: auto 1fr; overflow: clip; }
.tramo--jungla .espacio { background: color-mix(in srgb, var(--hueso) 7%, transparent); }
.espacio img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.espacio__cuerpo {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  display: flex; flex-direction: column; align-items: start; gap: 0.7rem;
  flex: 1;
}
/* el botón se ancla abajo: si no, cae donde termine el texto y los tres
   quedan a tres alturas — el defecto que se vino a corregir de la referencia */
.espacio__cta { margin-top: auto; padding-top: 0.5rem; }
.espacio__n { font-family: var(--display); font-size: 1.375rem; font-weight: 600; }
.espacio__d { font-size: var(--t-menudo); line-height: 1.6; color: var(--tinta-suave); }
.tramo--jungla .espacio__d, .pantano .espacio__d { color: var(--hueso-suave); }

/* ============ 12 · VITRINA DESLIZANTE ============ */
.vitrina {
  display: grid; grid-auto-flow: column;
  /* Ancho ÚNICO, no un minmax. Con un rango, cada columna se resuelve contra el
     tamaño intrínseco de su foto y salen de anchos distintos: las imágenes
     quedan a distinta altura y los pies de foto, desnivelados. El mismo defecto
     que se vino a corregir en los nichos. */
  grid-auto-columns: clamp(13.5rem, 38vw, 19rem);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1.25rem; min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--tinta) 30%, transparent) transparent;
}
.plato { scroll-snap-align: center; margin: 0; }
.plato img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.plato figcaption { padding-top: 0.9rem; display: grid; gap: 0.25rem; }
.plato__n { font-family: var(--display); font-size: 1.1875rem; font-weight: 600; }
.plato__d { font-size: var(--t-menudo); color: var(--tinta-suave); }
.tramo--jungla .plato__d { color: var(--hueso-suave); }

/* ============ 13 · VISITA ============ */
.visita { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.dato { display: grid; align-content: start; gap: 0.6rem; }
.dato .rotulo { color: var(--oro-hondo); }
.tramo--jungla .dato .rotulo { color: var(--oro); }
.dato p, .dato a { font-size: var(--t-cuerpo); line-height: 1.62; text-decoration: none; }
.dato > p > a { display: inline-flex; align-items: center; min-height: 2.875rem; }
.dato a:hover { text-decoration: underline; text-underline-offset: 4px; }
.dato__fila { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 0.35rem; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.dato__fila:last-child { border-bottom: 0; }
.dato__fila b { font-weight: 400; }
.dato__fila span { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.tramo--jungla .dato__fila span { color: var(--hueso-suave); }

/* ============ 14 · PIE ============ */
.pie { background: var(--tinta); color: var(--hueso); padding-block: clamp(3.5rem, 6vw, 5rem); }
.pie__caja { display: grid; gap: 2.5rem; }
.pie__alto { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; }
.pie__lema { font-family: var(--display); font-weight: 500; font-style: italic; font-weight: 500; font-size: var(--t-guia); color: var(--laton); }
.pie__menu { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pie__menu a { font-size: var(--t-menudo); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; opacity: 0.78; padding-block: 0.7rem; display: inline-block; }
.pie__menu a:hover { opacity: 1; }
.pie__bajo a { display: inline-block; padding-block: 0.7rem; }
.pie__bajo {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; align-items: center;
  padding-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--hueso) 16%, transparent);
  font-size: var(--t-menudo); color: var(--pie-suave);
}

/* ============ 15 · CTA FIJO DE TELÉFONO ============ */
/* No existe durante la portada: en la portada ya hay dos botones grandes,
   y un botón flotante sobre texto a sangre siempre tapa algo. */
.cta-fijo {
  position: fixed; z-index: 70;
  inset-block-end: 0; inset-inline: 0;
  display: none;
  background: var(--llama); color: #17140C;
  padding: 0.95rem; text-align: center; text-decoration: none;
  font-size: var(--t-menudo); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
@media (width < 56.25rem) {
  .cta-fijo { display: block; }
  /* La reserva la hace el BODY —es lo que mide el navegador y lo que miden los
     detectores—, y el PIE se estira por debajo con un pseudo para que esa franja
     salga en tinta y no en papel. Con el padding solo en el pie quedaba una
     banda clara entre el pie oscuro y la barra naranja. */
  body.con-cta-fijo { padding-bottom: 4.75rem; }
  body.con-cta-fijo .pie { position: relative; }
  body.con-cta-fijo .pie::after {
    content: ''; position: absolute; inset-inline: 0; top: 100%;
    height: 4.75rem; background: var(--tinta);
  }
}

/* ============ 16 · REMATES ============ */
.sello-coco { display: grid; place-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); }
.sello-coco img { width: clamp(4rem, 8vw, 6rem); height: auto; opacity: 0.5; }

.aviso {
  font-size: var(--t-menudo); line-height: 1.6;
  color: var(--tinta-suave);
  max-width: 52ch;
}
.tramo--jungla .aviso, .pantano .aviso { color: var(--hueso-suave); }

/* ============ 17 · EL ENJAMBRE ============ */
/* Donde la referencia arma un mandala repitiendo su copa, aquí va el cocodrilo
   de su placa en formación. Es el mismo path del sello, no un dibujo aparte. */
.enjambre { display: grid; place-items: center; padding-block: clamp(3rem, 6vw, 5.5rem); }
.enjambre svg { width: min(100% - 2rem, 34rem); height: auto; opacity: 0.55; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .enjambre svg { animation: respirar-enjambre linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  }
}
@keyframes respirar-enjambre {
  from { opacity: 0; scale: 0.88; rotate: -3deg; }
  to   { opacity: 0.55; scale: 1; rotate: 0deg; }
}

/* ============ 18 · VÍDEO EN BUCLE  ★ ============
   Esta es LA pieza de la referencia y es lo que hace que la comida «cobre
   vida»: no son fotos con un efecto encima, son clips verticales de 10 s,
   mudos, en bucle y sin controles. La referencia sirve cuatro en tira en su
   página de barra y uno en columna junto a la carta. Aquí igual, con material
   propio del restaurante.

   `playsinline` y `muted` no son opcionales: sin los dos, iOS abre el vídeo a
   pantalla completa en vez de reproducirlo en su caja. */
.clip {
  position: relative;
  overflow: clip;
  background: var(--tinta);
  aspect-ratio: 3 / 4;
}
.clip video, .clip img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.clip img { z-index: 0; }        /* el cartel, debajo: sin él hay un hueco negro */
.clip video { z-index: 1; }

/* la tira de cuatro, a sangre completa */
.tira-clips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.tira-clips .clip { aspect-ratio: 3 / 3.5; }
@media (width < 56.25rem) {
  .tira-clips { grid-template-columns: repeat(2, 1fr); }
  .tira-clips .clip { aspect-ratio: 3 / 4; }
}

/* pareja carta + vídeo: el patrón del menú de la referencia */
.carta-con-clip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.carta-con-clip .clip { position: sticky; top: 6rem; aspect-ratio: 3 / 4.2; }
@media (width < 56.25rem) {
  .carta-con-clip { grid-template-columns: 1fr; }
  .carta-con-clip .clip { position: static; max-width: 22rem; margin-inline: auto; aspect-ratio: 3/4; }
}

/* el clip entra desde su base, igual que los nichos */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .clip { animation: alzar-nicho cubic-bezier(0.22, 0.61, 0.36, 1) both;
            animation-timeline: view(); animation-range: entry 4% entry 62%; }
  }
}
/* Con el movimiento reducido, el vídeo no debe reproducirse solo: se queda el
   cartel. No se puede pausar por CSS, así que se tapa con su propio fotograma. */
@media (prefers-reduced-motion: reduce) {
  .clip video { display: none; }
}

.pie-clip {
  font-size: var(--t-menudo); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding-top: 0.9rem; color: var(--tinta-suave);
}
.tramo--jungla .pie-clip, .pantano .pie-clip { color: var(--hueso-suave); }

/* ============ 19 · REPARTO ============ */
.reparto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; max-width: 40rem; margin-inline: auto; }
.reparto__ficha {
  display: grid; gap: 0.35rem; align-content: center; justify-items: start;
  padding: 1.4rem 1.6rem; min-height: 6.5rem;
  text-decoration: none;
  border: 1.5px solid color-mix(in srgb, var(--tinta) 22%, transparent);
  background: var(--papel);
  transition: border-color 0.22s ease-out, background-color 0.22s ease-out, translate 0.22s ease-out;
}
.reparto__ficha:hover { border-color: var(--llama); background: color-mix(in srgb, var(--llama) 8%, var(--papel)); translate: 0 -2px; }
.reparto__n { font-family: var(--display); font-weight: 600; font-size: 1.3rem; }
.reparto__d { font-size: var(--t-menudo); color: var(--tinta-suave); }
.reparto__f { font-size: var(--t-rotulo); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracota); margin-top: 0.2rem; }   /* la brasa da 3,35:1 sobre papel; la terracota, 6,07 */

/* ============ 20 · BANDA TRIPLE ============ */
.banda-triple {
  display: grid; grid-template-columns: 1fr 1fr 1.35fr; grid-template-rows: 1fr;
  height: clamp(16rem, 38vw, 32rem);
  overflow: clip;
}
.banda-triple img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
@media (width < 56.25rem) {
  .banda-triple { grid-template-columns: 1fr 1fr; height: 14rem; }
  .banda-triple img:last-child { display: none; }
}

/* ============ 21 · ENJAMBRE con el logotipo real ============ */
.enjambre {
  display: grid; place-items: center;
  grid-template-columns: repeat(5, auto); gap: clamp(0.75rem, 2vw, 1.75rem);
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.enjambre__c {
  background: var(--oro-hondo); aspect-ratio: 1600/566;
  -webkit-mask: url('../img/mascota.webp') center/contain no-repeat;
          mask: url('../img/mascota.webp') center/contain no-repeat;
}
.enjambre__c:nth-child(1) { width: clamp(2.5rem,5vw,4rem); opacity: .3; }
.enjambre__c:nth-child(2) { width: clamp(3.5rem,7vw,5.5rem); opacity: .5; }
.enjambre__c:nth-child(3) { width: clamp(5.5rem,11vw,9rem); opacity: .85; grid-row: 1; }
.enjambre__c:nth-child(4) { width: clamp(3.5rem,7vw,5.5rem); opacity: .5; }
.enjambre__c:nth-child(5) { width: clamp(2.5rem,5vw,4rem); opacity: .3; }
.enjambre__c:nth-child(6), .enjambre__c:nth-child(7) { display: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .enjambre__c { animation: nadar-corto linear both; animation-timeline: view(); animation-range: entry 5% cover 45%; }
    .enjambre__c:nth-child(2) { animation-range: entry 10% cover 50%; }
    .enjambre__c:nth-child(3) { animation-range: entry 15% cover 55%; }
    .enjambre__c:nth-child(4) { animation-range: entry 20% cover 60%; }
    .enjambre__c:nth-child(5) { animation-range: entry 25% cover 65%; }
  }
}
@keyframes nadar-corto { from { translate: -18% 0; opacity: 0; } to { translate: 0 0; } }

.sello-coco__c {
  display: block; width: clamp(7rem, 15vw, 12rem); aspect-ratio: 1600/566;
  background: var(--oro-hondo); opacity: .5;
  -webkit-mask: url('../img/mascota.webp') center/contain no-repeat;
          mask: url('../img/mascota.webp') center/contain no-repeat;
}



/* ============ REDES ============ */
.redes { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.red {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.8rem 1.35rem; text-decoration: none;
  border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
  font-size: var(--t-menudo); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color .22s ease-out, background-color .22s ease-out;
}
.red:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }
.red svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

/* ============ LA NOCHE — que deje de ser un párrafo suelto ============ */
.noche { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem); margin-block: clamp(2.5rem, 5vw, 3.5rem); }
.noche__ficha { border-top: 2px solid var(--oro); padding-top: 1.1rem;
  display: grid; gap: 0.5rem; align-content: start; }
.noche__n { font-family: var(--display); font-weight: 600; font-size: 1.25rem; }
.noche__d { font-size: var(--t-menudo); line-height: 1.6; color: var(--hueso-suave); }

/* ============ VISITA — con más peso ============ */
.dato { padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: color-mix(in srgb, var(--tinta) 4%, transparent);
  border-top: 2px solid var(--oro-hondo); }
.tramo--jungla .dato { background: color-mix(in srgb, var(--hueso) 6%, transparent); border-top-color: var(--oro); }