@layer componentes {

/* ═══════════════ saltar ═══════════════ */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--llama); color: #1A0C00;
  padding: .75rem 1.25rem; font-weight: 600; font-size: var(--t-min);
}
.saltar:focus { left: 0; }

/* ═══════════════ títulos con la voz italiana ═══════════════ */
.titulo {
  font-family: var(--marca);
  font-size: var(--t-gran);
  color: var(--hueso);
  text-transform: uppercase;
  letter-spacing: .028em;
  line-height: 1.02;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 12, 'wght' 500;
  font-weight: 500;
}
.titulo em {
  font-style: normal;
  color: var(--oro);
  font-variation-settings: 'opsz' 12, 'wght' 500;
  font-weight: 500;
  display: block;
}
.texto { color: var(--hueso-medio); }

/* ═══════════════ NAV superior ═══════════════
   No existe durante la portada: aparece al dejar la primera pantalla. */
.timon {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .65rem var(--marco);
  background: color-mix(in srgb, var(--tinta-honda) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea-tenue);
  opacity: 0; visibility: hidden; translate: 0 -0.5rem;
}
.timon__marca {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 2.75rem;
  font-family: var(--display); font-weight: 600;
  font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hueso);
}
.timon__marca img { width: 1.6rem; height: auto; }
.timon__rutas {
  display: none;
  gap: clamp(.9rem, 2vw, 1.75rem);
  margin-inline: auto;
}
.timon__rutas a {
  font-size: var(--t-rotulo);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hueso-medio);
  padding: .8rem .15rem;
  transition: color .25s var(--curva);
}
.timon__rutas a:hover { color: var(--oro); }
.timon__cta { margin-left: auto; min-height: 2.5rem; padding: .6rem 1.3rem; }

@supports (animation-timeline: view()) {
  .timon { animation: asomar linear both; animation-timeline: scroll(root block); animation-range: 85vh 110vh; }
}
@supports not (animation-timeline: view()) {
  .timon { opacity: 1; visibility: visible; translate: 0 0; }
}

/* ═══════════════ LA FLORITURA ═══════════════
   El rotulo de cada seccion deja de ser versalitas diminutas y pasa a ser
   escritura formal, grande y en oro. Es la segunda voz de la marca: la
   didona manda y la cursiva acompaña. Nunca por debajo de 24px — una
   escritura chica no se lee y se ve barata. */
.floritura {
  font-family: var(--floritura);
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  color: var(--oro);
  font-weight: 400;
  letter-spacing: .01em;
  /* la escritura trae su propio aire arriba y abajo; se recorta para que
     no abra un hueco raro contra el titular */
  margin-block: -0.18em -0.1em;
}
.floritura--tenue { color: var(--oro-tenue); }

/* ═══════════════ PORTADA ═══════════════ */
.portada {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: clip;              /* clip, no hidden: hidden rompe view() */
  isolation: isolate;
}

/* ── la galería: siete cuadros que se funden, en CSS puro ──
   Ciclo de 56s, 7s por cuadro, y cada uno DERIVA para que se sienta
   que la cámara camina dentro del lugar. */
.galeria { position: absolute; inset: 0; z-index: -2; }

.galeria__cuadro {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  filter: brightness(.94) saturate(1.12) contrast(1.08);
  opacity: 0;
  animation: pasar 56s var(--curva) infinite, andar 56s ease-in-out infinite;
}
.galeria__cuadro--1 img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 12%;
}
.galeria__cuadro--1 { animation-delay:  0s,  0s; }
.galeria__cuadro--2 { animation-delay:  7s,  7s; object-position: center 58%;
                      animation-name: pasar, andar-vuelta; }
.galeria__cuadro--3 { animation-delay: 14s, 14s; object-position: center 44%; }
.galeria__cuadro--4 { animation-delay: 21s, 21s; object-position: center 62%;
                      animation-name: pasar, andar-vuelta;
                      filter: brightness(.82) saturate(1.06) contrast(1.06); }
.galeria__cuadro--5 { animation-delay: 28s, 28s; object-position: center 42%;
                      filter: brightness(1.05) saturate(1.10) contrast(1.06); }
.galeria__cuadro--6 { animation-delay: 35s, 35s; object-position: center 55%;
                      animation-name: pasar, andar-vuelta; }
.galeria__cuadro--7 { animation-delay: 42s, 42s; object-position: center 50%;
                      filter: brightness(1.04) saturate(1.10) contrast(1.06); }

@keyframes pasar {
  0%           { opacity: 0; }
  3%, 12.5%    { opacity: 1; }
  16.5%, 100%  { opacity: 0; }
}
/* la cámara camina: escala + paso lateral, en las dos direcciones */
@keyframes andar {
  0%   { scale: 1.08; translate: 1.2% 0; }
  17%  { scale: 1.2;  translate: -1.2% 0; }
  100% { scale: 1.2;  translate: -1.2% 0; }
}
@keyframes andar-vuelta {
  0%   { scale: 1.08; translate: -1.2% 0; }
  17%  { scale: 1.2;  translate: 1.2% 0; }
  100% { scale: 1.2;  translate: 1.2% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .galeria__cuadro { animation: none; opacity: 0; scale: 1.02; }
  .galeria__cuadro--1 { opacity: 1; }
}

.portada__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(105% 72% at 50% 55%, rgb(19 20 10 / 0) 34%, rgb(19 20 10 / .62) 76%, rgb(19 20 10 / .93) 100%),
    linear-gradient(to bottom, rgb(12 13 6 / .88) 0%, rgb(12 13 6 / .60) 26%, rgb(12 13 6 / .66) 62%, rgb(12 13 6 / .97) 100%);
}

.portada__cuerpo {
  position: relative;
  align-self: center;
  display: grid; justify-items: center;
  text-align: center;
  padding: 7rem var(--marco) 2rem;
}
.portada__cuerpo::before {
  content: "";
  position: absolute; z-index: -1;
  inset: -22% -10%;
  background: radial-gradient(66% 64% at 50% 54%,
    rgb(8 9 4 / .88) 0%, rgb(8 9 4 / .66) 46%, rgb(8 9 4 / 0) 82%);
  pointer-events: none;
}

.portada__placa {
  width: clamp(3.75rem, 7vw, 5.5rem); height: auto;
  opacity: 0; animation: entrar 1.15s var(--curva) .15s forwards;
}

.portada__nombre {
  font-family: var(--marca);
  font-size: var(--t-mega);
  color: var(--hueso);
  letter-spacing: .035em;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  text-transform: uppercase;
  /* opsz BAJO a proposito: en Bodoni Moda el eje optico engorda los filetes
     al bajar. Con el automatico (opsz 96 a este cuerpo) el trazo fino se
     borra sobre la tinta y el nombre se ve defectuoso. */
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 8, 'wght' 600;
  font-weight: 600;
  opacity: 0; animation: entrar 1.15s var(--curva) .3s forwards;
  text-shadow: 0 .12em 2rem rgb(8 9 4 / .8), 0 1px 12px rgb(8 9 4 / .6);
}

.portada__lema {
  font-family: var(--floritura);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--laton);
  margin-top: .35rem;
  opacity: 0; animation: entrar 1.15s var(--curva) .45s forwards;
}

.portada__sitio {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  --rotulo-tinta: var(--hueso);   /* sobre foto manda el contraste, no el oro */
  opacity: 0; animation: entrar 1.15s var(--curva) .6s forwards;
}

@keyframes entrar { from { opacity: 0; translate: 0 1.25rem; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .portada__placa, .portada__nombre, .portada__lema, .portada__sitio {
    animation: none; opacity: 1;
  }
}

.portada__pie {
  display: grid; justify-items: center; gap: .75rem;
  padding-bottom: 2.25rem;
  color: var(--hueso-medio);
}
.portada__hilo {
  width: 1px; height: 3rem;
  background: linear-gradient(to bottom, var(--oro), transparent);
}

/* ═══════════════ la marca de agua H ═══════════════ */
.agua {
  position: absolute;
  font-family: var(--marca);
  font-weight: 600;
  font-size: clamp(18rem, 42vw, 34rem);
  line-height: .8;
  color: var(--oro);
  opacity: .045;
  pointer-events: none;
  user-select: none;
}
.agua--a { top: -0.05em; right: -0.08em; }
.agua--b { bottom: -0.12em; left: -0.06em; }

/* ═══════════════ MANIFIESTO ═══════════════ */

/* ═══════════════════ LA EXPERIENCIA ═══════════════════
   Un mosaico donde el dicho es una tesela más. La parrilla es de 6 columnas
   para poder dar a cada pieza un peso distinto: una fila de rectángulos
   iguales se lee como plantilla. Cada foto deriva un poco con el scroll —
   distinta cada una — y eso es lo único que la mantiene viva. */
.experiencia {
  background: var(--tinta);
  position: relative;
  overflow: clip;
  padding-block: var(--aire);
  padding-inline: var(--marco);
}

.mosaico {
  max-width: var(--tope);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.5rem, 1.2vw, .9rem);
}
/* en telefono: las grandes ocupan el ancho, los detalles van pareados */
.tesela--mesa, .tesela--dicho, .tesela--tina, .tesela--noche { grid-column: span 2; }
.tesela--coctel, .tesela--sellos, .tesela--coral, .tesela--burger { aspect-ratio: 1; }

.tesela {
  margin: 0;
  position: relative;
  overflow: clip;
  border-radius: .25rem;
  background: var(--elevado);
  min-width: 0;
}
.tesela img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.9) saturate(1.02);
  transition: filter .8s var(--curva), scale 1.6s var(--curva);
}
@media (hover: hover) {
  .tesela:hover img { filter: brightness(1.03) saturate(1.06); scale: 1.05; }
}

/* proporciones nativas de cada recorte, para que nada se deforme */
.tesela--mesa, .tesela--noche { aspect-ratio: 3 / 2; }
.tesela--tina                 { aspect-ratio: 5 / 9; }   /* la proporcion real del recorte */
.tesela--coctel, .tesela--sellos,
.tesela--coral,  .tesela--burger { aspect-ratio: 1; }

/* ── el dicho, tratado como una pieza más del mosaico ── */
.tesela--dicho {
  background: var(--tinta-honda);
  border: 1px solid var(--linea-tenue);
  display: grid;
  align-content: center;
  gap: clamp(.9rem, 2vw, 1.4rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  overflow: visible;
}
.experiencia__frase {
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  line-height: 1.08;
  color: var(--hueso);
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 14, 'wght' 500;
}
.experiencia__frase em {
  font-style: normal;
  color: var(--oro);
}
.experiencia__nota {
  font-size: var(--t-base);
  line-height: 1.75;
  color: var(--hueso-medio);
  max-width: 46ch;
  text-wrap: pretty;   /* sin huerfanas al final del parrafo */
}

/* ── la deriva: cada tesela a su propio ritmo ──
   Ligada al scroll en CSS nativo. Sin soporte no pasa nada: las fotos
   se ven enteras y quietas, que es el estado correcto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tesela img {
      animation: derivar-tesela linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes derivar-tesela {
      from { scale: 1.14; translate: 0 -1.8%; }
      to   { scale: 1.02; translate: 0  1.8%; }
    }
    .tesela--tina img, .tesela--sellos img { animation-direction: reverse; }
    .tesela--coctel img { animation-delay: -0.2s; }
  }
}

/* ── el encaje ──
   Con colocación automática la primera fila dejaba un hueco negro a la
   derecha: el dicho no cabía en las dos columnas sobrantes y saltaba de
   fila. Se colocan por ÁREAS, que no dejan nada al azar. Las alturas van
   por fila y las fotos rellenan con object-fit — así no hay ni un hueco. */
@media (min-width: 40rem) {
  .mosaico {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 19rem minmax(19rem, auto) 14rem 14rem;
    grid-template-areas:
      "mesa   mesa   mesa   mesa   tina   tina"
      "dicho  dicho  dicho  dicho  tina   tina"
      "noche  noche  noche  coctel coctel coctel"
      "sellos sellos coral  coral  burger burger";
  }
  /* con la fila mandando la altura, la proporción sobra y estorba */
  .tesela { aspect-ratio: auto; }
  .tesela--mesa   { grid-area: mesa; }
  .tesela--tina   { grid-area: tina; }
  .tesela--dicho  { grid-area: dicho; }
  .tesela--noche  { grid-area: noche; }
  .tesela--coctel { grid-area: coctel; }
  .tesela--sellos { grid-area: sellos; }
  .tesela--coral  { grid-area: coral; }
  .tesela--burger { grid-area: burger; }
}

@media (min-width: 70rem) {
  .mosaico { grid-template-rows: 25rem minmax(23rem, auto) 18rem 18rem; }
}

.firma {
  font-family: var(--floritura);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--oro-tenue);
}

/* ═══════════════ EL COCODRILO DEL JOSPER ═══════════════
   Antes cruzaba de izquierda a derecha en bucle, con reloj propio y sin
   relación con lo que hacía el visitante. Ahora TODO lo mueve el scroll:
   el animal avanza mientras la sección pasa por la pantalla, la cola ondula,
   el humo sube y las fauces se abren al cruzar el centro. Sin librería:
   animation-timeline: view() lo resuelve el navegador. */
.bestia {
  position: relative;
  overflow-x: clip;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background:
    radial-gradient(90% 120% at 50% 50%, rgb(252 130 19 / .06), transparent 66%),
    var(--tinta-honda);
  border-block: 1px solid var(--linea-tenue);
  display: grid;
  justify-items: center;
  gap: clamp(1.4rem, 3vw, 2.25rem);
}
.bestia__rotulo,
.bestia__pie {
  --rotulo-tinta: var(--oro-tenue);
  color: var(--oro-tenue);
  text-align: center;
  margin: 0;
}
.bestia__lienzo {
  position: relative;
  width: min(88%, 54rem);
  aspect-ratio: 569 / 201;
}
.bestia__croc { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── LA MASCOTA DE LA CASA ────────────────────────────────────────────
   El cocodrilo de chistera comiendo pasta, trazado de su propio dibujo.
   Al ser una figura maciza no se anima por partes; se anima como pieza,
   que es como se mueve un logotipo:
     · avanza despacio con el scroll, como si cruzara
     · el contorno se dibuja solo — y aquí luce, porque hay sombrero,
       dientes, escamas y fideos que trazar uno a uno
     · y respira, para que no parezca una calcomanía pegada           */
.bestia__croc {
  color: var(--oro);
  animation: cruzar linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}
@keyframes cruzar {
  from { translate: -7% 0; scale: .975; }
  to   { translate:  7% 0; scale: 1.015; }
}
/* la masa entra después: primero se ve el trazo, luego se rellena */
.croc__masa {
  animation: encarnar linear both;
  animation-timeline: view();
  animation-range: entry 16% entry 82%;
  opacity: 0;
}
@keyframes encarnar { from { opacity: 0; } to { opacity: 1; } }

/* 13.356 unidades de contorno, medidas con getTotalLength, no a ojo */
.croc__trazo {
  color: var(--laton);
  stroke-dasharray: 13356;
  stroke-dashoffset: 13356;
  animation: trazar linear both;
  animation-timeline: view();
  animation-range: entry 2% entry 76%;
}
@keyframes trazar { to { stroke-dashoffset: 0; } }

/* respira: un animal quieto nunca está del todo quieto */
.bestia__lienzo { animation: respirar 7s ease-in-out infinite; }
@keyframes respirar {
  0%, 100% { translate: 0 0;    }
  50%      { translate: 0 -1%;  }
}

@media (prefers-reduced-motion: reduce) {
  .bestia__croc, .bestia__lienzo, .croc__masa, .croc__trazo { animation: none; }
  .croc__masa { opacity: 1; }
  .croc__trazo { stroke-dashoffset: 0; }
}
/* sin soporte de animation-timeline se ve entera y quieta */
@supports not (animation-timeline: view()) {
  .croc__masa  { opacity: 1; animation: none; }
  .croc__trazo { stroke-dashoffset: 0; animation: none; }
}

/* ═══════════════ LA BARRA ═══════════════ */
.barra { overflow-x: clip; }
.barra__dicho { display: grid; gap: 1.25rem; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* tríptico a sangre completa: cero margen, el lugar en pantalla entera */
/* Tres cuadrados iguales daban una tira plana, sin jerarquía y sin sitio
   donde descansar la vista. Ahora la primera manda —vertical y grande— y
   las otras dos la acompañan; cada una entra a su tiempo con el scroll y
   se ilumina desde abajo, como la barra de verdad. */
.triptico {
  display: grid;
  gap: clamp(.4rem, 1vw, .75rem);
}
.triptico__pieza {
  margin: 0;
  position: relative;
  overflow: clip;
  border-radius: .2rem;
  animation: alzar linear both;
  animation-timeline: view();
  animation-range: entry 4% entry 62%;
}
.triptico__pieza:nth-child(2) { animation-range: entry 10% entry 68%; }
.triptico__pieza:nth-child(3) { animation-range: entry 16% entry 74%; }
@keyframes alzar {
  from { opacity: 0; translate: 0 2.5rem; }
  to   { opacity: 1; translate: 0 0; }
}
.triptico__pieza img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: filter .7s var(--curva), scale 1.4s var(--curva);
  filter: brightness(.84) saturate(.95);
}
/* la primera pieza manda: ocupa dos filas y respira más */
.triptico__pieza--eje img { aspect-ratio: 4 / 6.2; }
/* luz cálida desde abajo, como la de su salón */
.triptico__pieza::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(19 20 10 / .92) 0%, rgb(19 20 10 / .3) 34%, transparent 62%),
              radial-gradient(90% 55% at 50% 108%, rgb(252 130 19 / .20), transparent 70%);
  pointer-events: none;
}
@media (hover: hover) {
  .triptico__pieza:hover img { filter: brightness(1.0) saturate(1.02); scale: 1.035; }
}
.triptico__pieza figcaption {
  position: absolute; left: clamp(.9rem, 2vw, 1.4rem); bottom: clamp(.8rem, 2vw, 1.2rem);
  right: clamp(.9rem, 2vw, 1.4rem);
  --rotulo-tinta: var(--hueso);
  text-shadow: 0 1px 14px rgb(8 9 4 / .9);
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .triptico__pieza { animation: none; opacity: 1; translate: none; }
}

/* el programa: gavetas que se abren con las botellas reales */
.programa { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.programa__nota { color: var(--hueso-medio); }
.programa__nota em { font-family: var(--display); font-style: italic; color: var(--laton); font-size: 1.06em; }

.programa__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

.gaveta {
  border: 1px solid var(--linea-tenue);
  border-radius: 3px;
  background: linear-gradient(170deg, var(--elevado) 0%, var(--tinta-honda) 100%);
  transition: border-color .3s var(--curva);
}
.gaveta[open] { border-color: var(--oro-tenue); }
@media (hover: hover) { .gaveta:hover { border-color: var(--oro-tenue); } }

.gaveta summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.1rem 1.25rem;
  min-height: 2.75rem;
}
.gaveta summary::-webkit-details-marker { display: none; }
.gaveta__n {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: .85;
  color: var(--oro);
  font-feature-settings: "lnum";
  min-width: 2.2ch;
}
.gaveta--vino  .gaveta__n { color: var(--terracota); }
.gaveta--copeo .gaveta__n { color: var(--rosa-polvo); }
.gaveta__q {
  font-size: var(--t-min);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hueso); font-weight: 500;
}
.gaveta__mas {
  margin-left: auto;
  font-family: var(--display);
  font-size: 1.5rem; color: var(--oro-tenue);
  transition: rotate .3s var(--curva);
}
.gaveta[open] .gaveta__mas { rotate: 45deg; }

.gaveta__lista {
  padding: 0 1.25rem 1.25rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--laton);
}
.gaveta__lista strong { color: var(--oro); font-weight: 600; }
.gaveta__lista em { color: var(--hueso); font-style: normal; font-family: var(--texto); font-size: var(--t-rotulo); letter-spacing: .18em; text-transform: uppercase; }
.gaveta__lista p { margin-bottom: .6rem; }

.programa__pendiente {
  font-family: var(--display); font-style: italic;
  color: var(--oro-tenue); font-size: var(--t-sub);
}

/* ═══════════════ LA MESA ═══════════════ */
.mesa { overflow-x: clip; background: var(--tinta); }
.mesa__intro {
  display: flex; align-items: end; justify-content: space-between; gap: 1.5rem;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.mesa__intro > div:first-child { display: grid; gap: 1rem; }

.mesa__mandos { display: flex; gap: .5rem; }
.mando {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--linea);
  border-radius: 50%;
  color: var(--oro);
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color .25s var(--curva), background .25s var(--curva);
}
@media (hover: hover) {
  .mando:hover { border-color: var(--oro); background: var(--elevado); }
}

/* la vitrina: manual, con imán por platillo. Nada se mueve solo. */
.vitrina {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-inline: var(--marco);
  padding-bottom: .5rem;
}
.vitrina::-webkit-scrollbar { display: none; }

.plato {
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin: 0;
  width: clamp(17rem, 34vw, 26rem);
  position: relative;
  border-radius: 3px;
  overflow: clip;
}
.plato img {
  width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: scale 1.1s var(--curva);
}
.plato figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem 1.2rem 1.1rem;
  display: grid; gap: .15rem;
  background: linear-gradient(to top, rgb(8 9 4 / .96) 0%, rgb(8 9 4 / .78) 45%, rgb(8 9 4 / 0) 100%);
}
.plato__n {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--hueso);
  line-height: 1.15;
}
.plato__d { font-size: var(--t-min); color: var(--laton); }
@media (hover: hover) {
  .plato:hover img { scale: 1.05; }
}

.mesa__pista {
  text-align: center;
  padding: 1.25rem var(--marco) clamp(2rem, 4vw, 3rem);
}

/* ═══════════════ LA CARTA ═══════════════ */
.carta { background: var(--tinta-honda); }

.carta__encabezado {
  display: grid; gap: .85rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--linea-tenue);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.carta__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.grupo { min-width: 0; }

.grupo__nombre {
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600;
  color: var(--oro);
  padding-bottom: .9rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--linea);
}
.grupo__nombre--seguido { margin-top: 2.75rem; }

.lista { display: grid; gap: 1.5rem; }
.lista--corta { gap: .9rem; }

.linea__cab {
  display: flex; align-items: baseline; gap: .75rem;
  justify-content: space-between;
}
.linea__n {
  font-size: var(--t-sub);
  font-family: var(--display);
  font-style: italic;
  color: var(--hueso);
  line-height: 1.25;
  min-width: 0;
}
.linea__p {
  font-size: var(--t-min);
  color: var(--laton);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 500;
}
.linea__p small { font-size: var(--t-rotulo); color: var(--hueso-medio); font-weight: 380; }
.linea__d {
  font-size: var(--t-min);
  line-height: 1.62;
  color: var(--hueso-medio);
  margin-top: .4rem;
  max-width: 44ch;
}

.carta__nota {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--linea-tenue);
  font-size: var(--t-min);
  color: var(--hueso-medio);
  max-width: 52ch;
}
.carta__nota strong { color: var(--laton); font-weight: 500; }

/* ═══════════════ EL HORNO DE LEÑA ═══════════════ */
.horno {
  padding-block: var(--aire);
  padding-inline: var(--marco);
  overflow-x: clip;
  background: var(--tinta);
}
.horno__par {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.horno__foto { margin: 0; }
.horno__foto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 3px;
}
.horno__dicho { display: grid; gap: 1.25rem; }
.horno__lista { margin-top: .5rem; }
.horno__nota {
  font-family: var(--display); font-style: italic;
  color: var(--oro-tenue); font-size: var(--t-base);
}

/* ═══════════════ LA NOCHE ═══════════════ */
.noche { position: relative; overflow: clip; background: var(--tinta-honda); }
.noche__caja {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
}
.noche__dicho { display: grid; gap: 1.25rem; justify-items: start; }
.noche__fotos {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(.75rem, 1.4vw, 1.25rem);
  align-items: start;
}
.noche__fotos figure { margin: 0; min-width: 0; }
.noche__fotos img {
  width: 100%; object-fit: cover;
  border-radius: 3px;
}
.noche__fotos figure:first-child img { aspect-ratio: 1; }
.noche__fotos figure:last-child img { aspect-ratio: 3 / 4; margin-top: clamp(1.5rem, 4vw, 3rem); }

/* ═══════════════ VISITA ═══════════════ */
.visita { background: var(--tinta); }
.visita__rejilla { display: grid; gap: clamp(2.75rem, 6vw, 5rem); }
.visita__dicho { display: grid; gap: 1.25rem; justify-items: start; }

.visita__botones { display: flex; flex-wrap: wrap; gap: .75rem; }
.visita__domicilio {
  font-size: var(--t-min);
  color: var(--hueso-medio);
  margin-top: .5rem;
}

.datos { display: grid; gap: 2.25rem; margin: 0; }
.dato dt { margin-bottom: .7rem; }
.dato dd { margin: 0; color: var(--hueso); line-height: 1.75; }
.fila {
  display: flex; justify-content: space-between; gap: 1.5rem;
  max-width: 24rem;
  border-bottom: 1px solid var(--linea-tenue);
  padding-block: .35rem;
  font-size: var(--t-min);
}
.fila span:last-child { color: var(--laton); font-variant-numeric: tabular-nums; white-space: nowrap; }

.enlace {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; min-width: 2.75rem;   /* 44px de área táctil real */
  color: var(--oro);
  box-shadow: inset 0 -1px 0 var(--oro-tenue);
  transition: color .25s var(--curva), box-shadow .25s var(--curva);
}
@media (hover: hover) {
  .enlace:hover { color: var(--laton); box-shadow: inset 0 -1px 0 var(--laton); }
}

/* ═══════════════ BOTONES ═══════════════ */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem;
  padding: .95rem 1.85rem;
  font-size: var(--t-min);
  font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  border-radius: 2px;
  transition: background .25s var(--curva), color .25s var(--curva), border-color .25s var(--curva);
}
.boton--llama { background: var(--llama); color: #1A0C00; }
.boton--borde {
  border: 1px solid var(--oro-tenue);
  color: var(--oro);
  background: none;
}
@media (hover: hover) {
  .boton--llama:hover { background: var(--laton); }
  .boton--borde:hover { border-color: var(--oro); background: var(--elevado); }
}

/* ═══════════════ CTA fijo (solo móvil; en escritorio manda el nav) ═══ */
.anclaje {
  position: fixed;
  z-index: 40;
  opacity: 0; visibility: hidden;
  translate: 0 1rem;
}
.anclaje__boton { box-shadow: 0 .5rem 2rem rgb(0 0 0 / .45); }

@supports (animation-timeline: view()) {
  .anclaje { animation: asomar linear both; animation-timeline: scroll(root block); animation-range: 88vh 118vh; }
}
@keyframes asomar {
  from { opacity: 0; visibility: hidden; translate: 0 1rem; }
  to   { opacity: 1; visibility: visible; translate: 0 0; }
}
@supports not (animation-timeline: view()) {
  .anclaje { opacity: 1; visibility: visible; translate: 0 0; }
}

/* ═══════════════ PIE ═══════════════ */
.pie {
  padding: var(--aire) var(--marco) clamp(6rem, 10vw, 4rem);
  border-top: 1px solid var(--linea-tenue);
}
.pie__caja { display: grid; justify-items: center; gap: 1.1rem; text-align: center; }
.pie__placa { width: 3.25rem; height: auto; opacity: .8; }
.pie__lema {
  font-family: var(--display); font-style: italic;
  font-size: var(--t-med); color: var(--laton);
}
.pie__legal { color: var(--oro-tenue); }


/* ══════════════════════════════════════════════════════════════════
   ESCRITORIO · un solo corte, en rem (56.25rem = 900px)
   px sacaría el bloque del orden y sm:/md: le ganarían. Lección del taller.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 56.25rem) {

  .timon__rutas { display: flex; }

  .triptico { grid-template-columns: repeat(3, 1fr); }
  .triptico__pieza img { aspect-ratio: 3 / 4; }

  .programa__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gaveta--vino { grid-column: span 2; }

  .horno__par { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }

  .noche__caja { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }

  .visita__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  /* en escritorio el CTA fijo sobra: el nav trae Reservar */
  .anclaje { display: none; }
}

/* móvil: barra inferior con su hueco y su suelo */
@media (max-width: 56.24rem) {
  body { padding-bottom: 10.5rem; }     /* barra fija de 108px + aire; medido: el pie queda libre */

  .timon__cta { display: none; }     /* abajo ya hay Reservar: no dos a la vez */

  .anclaje {
    left: 0; right: 0; bottom: 0;
    padding: 2.5rem var(--marco) max(1rem, env(safe-area-inset-bottom));
    background: linear-gradient(to bottom,
      rgb(19 20 10 / 0) 0%, rgb(19 20 10 / .82) 34%, rgb(19 20 10 / .97) 62%);
  }
  .anclaje__boton { width: 100%; }

  .mesa__mandos { display: none; }   /* en táctil se arrastra, sin flechas */
}
}

/* ═══════════════ PLATAFORMAS Y REDES ═══════════════
   Cada marca con su color propio en el borde y en el logo: es lo que hace
   que se reconozcan de un vistazo sin romper la penumbra del sitio. */
.plataformas {
  display: grid;
  width: 100%;
  justify-self: stretch;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.plat {
  --tono: var(--oro);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.1rem;
  min-height: 3.5rem;
  border: 1px solid var(--linea-tenue);
  border-radius: .25rem;
  background: rgb(255 255 255 / .022);
  color: var(--hueso);
  transition: border-color .3s var(--curva), background-color .3s var(--curva),
              transform .45s var(--curva);
}
.plat__icono { width: 1.5rem; height: 1.5rem; color: var(--tono); flex: none; }
.plat__txt { display: grid; line-height: 1.2; }
.plat__txt b { font-size: .9375rem; font-weight: 600; letter-spacing: .01em; }
.plat__txt small {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hueso-medio);
}
.plat__flecha { width: .95rem; height: .95rem; color: var(--hueso-medio); transition: transform .35s var(--curva); }
.plat:hover {
  border-color: var(--tono);
  background: color-mix(in srgb, var(--tono) 10%, transparent);
  transform: translateY(-2px);
}
.plat:hover .plat__flecha { transform: translateX(3px); color: var(--tono); }
.plat--uber   { --tono: #06C167; }
.plat--rappi  { --tono: #FF441F; }
.plat--ig     { --tono: #E1306C; }
.plat--fb     { --tono: #4267B2; }
.plat--wa     { --tono: #25D366; }

/* ═══════════════ EL MAPA ═══════════════
   Dibujado a mano con su paleta: el gris de Google rompía la penumbra.
   Las calles reales de Jurica la Campana, el trazo del acueducto y su placa. */
.mapa {
  position: relative;
  width: 100%;
  justify-self: stretch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--linea-tenue);
  border-radius: .25rem;
  overflow: clip;
  background: var(--tinta-honda);
  display: block;
  aspect-ratio: 16 / 10;
  transition: border-color .35s var(--curva);
}
.mapa:hover { border-color: var(--oro-tenue); }
.mapa > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa__abrir svg { width: .8rem; height: .8rem; flex: none; }
.mapa__calle { stroke: var(--linea-tenue); fill: none; }
.mapa__via   { stroke: var(--oro-tenue); fill: none; opacity: .5; }
.mapa__manzana { fill: rgb(255 255 255 / .02); }
.mapa__verde { fill: rgb(28 42 23 / .55); }
.mapa__pin { color: var(--llama); }
.mapa__pin circle:first-child { animation: latir 2.6s ease-out infinite; transform-origin: center; }
@keyframes latir {
  0%   { r: 9;  opacity: .55; }
  70%  { r: 30; opacity: 0; }
  100% { r: 30; opacity: 0; }
}
/* Los rótulos van en HTML, no dentro del SVG: el texto de un SVG escala con
   el dibujo, y a 390 px de pantalla ese 11px acababa en 7px reales. */
.mapa__rot {
  position: absolute;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hueso-medio);
  pointer-events: none;
  white-space: nowrap;
}
.mapa__rot--via   { left: 2.2%; top: 44%; }
.mapa__rot--verde { left: 37%;  top: 55%; opacity: .75; }
@media (max-width: 30rem) { .mapa__rot--verde { display: none; } }
.mapa__placa {
  position: absolute;
  left: 1rem; bottom: 1rem; right: 1rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .7rem .9rem;
  background: rgb(19 20 10 / .88);
  border: 1px solid var(--linea-tenue);
  border-radius: .2rem;
  backdrop-filter: blur(6px);
}
.mapa__placa b { font-size: .875rem; color: var(--hueso); font-weight: 600; }
.mapa__placa span { font-size: .75rem; color: var(--hueso-medio); display: block; }
.mapa__abrir {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--llama); white-space: nowrap;
  display: inline-flex; align-items: center; gap: .4rem;
}
.mapa:hover .mapa__abrir { text-decoration: underline; text-underline-offset: .25em; }
@media (prefers-reduced-motion: reduce) { .mapa__pin circle:first-child { animation: none; opacity: .3; } }

/* ═══════════════ EL HORNO, INTEGRADO ═══════════════
   La foto del horno se veía pegada encima del fondo, como un recorte. Ahora
   la lumbre se derrama fuera del marco y el borde inferior se funde con la
   tinta del sitio: deja de ser una foto puesta y pasa a ser parte de la
   página. La luz naranja es la de su propio Josper. */
.horno__foto {
  position: relative;
  overflow: visible;
  border-radius: .2rem;
}
.horno__foto::before {
  /* el resplandor que sale del horno hacia la página */
  content: "";
  position: absolute;
  inset: -14% -10% -18%;
  background: radial-gradient(58% 52% at 50% 46%, rgb(252 130 19 / .30), rgb(206 90 15 / .12) 46%, transparent 72%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  animation: brasa 6.5s ease-in-out infinite;
}
@keyframes brasa {
  0%, 100% { opacity: .8;  scale: 1; }
  50%      { opacity: 1;   scale: 1.045; }
}
.horno__foto img {
  position: relative;
  z-index: 1;
  border-radius: .2rem;
  /* el pie de la foto se disuelve en el fondo en vez de cortarse en seco */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) { .horno__foto::before { animation: none; } }

/* ═══════════════ LÍMITES DE SECCIÓN ═══════════════
   Daniel pedía saber dónde empieza y dónde acaba cada cosa. Un filete de oro
   que se desvanece a los lados: se nota el corte sin meter una caja. */
.seccion + .seccion,
section + section { position: relative; }
.bestia + section::before,
#mesa::before, #carta::before, #horno::before, #noche::before, #visita::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linea-tenue) 18%,
              var(--oro-tenue) 50%, var(--linea-tenue) 82%, transparent);
  opacity: .5;
}

/* el tríptico a dos columnas: la pieza eje ocupa las dos filas */
@media (min-width: 48rem) {
  /* la composición: una manda y dos la acompañan. Con altura tasada —si
     no, la primera se come una pantalla entera y las tres no se ven
     nunca juntas, que es lo que hace que una composición sea una. */
  .triptico {
    grid-template-columns: 1.22fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: min(74vh, 38rem);
  }
  .triptico__pieza { min-height: 0; }
  .triptico__pieza--eje { grid-row: 1 / 3; }
  .triptico__pieza img,
  .triptico__pieza--eje img { height: 100%; aspect-ratio: auto; }
}

/* ═══════════════ EL PIE DE LA MESA ═══════════════
   Los nueve platos de la vitrina van SIN precio: solo dos de ellos están
   en su carta con precio verificado y el resto habría que inventarlo. O
   todos o ninguno — así que ninguno, y desde aquí se salta a la carta,
   que sí los lleva los treinta y cuatro. */
.mesa__pie {
  /* en teléfono este bloque coincidía con la barra fija de acciones al
     pasar por él; con algo más de aire abajo deja de tropezar */
  padding-bottom: clamp(2.5rem, 6vw, 3rem);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: .6rem clamp(1rem, 3vw, 2.25rem);
  padding: 1.35rem var(--marco) clamp(2rem, 4vw, 3rem);
}
.mesa__pista { padding: 0; text-align: center; }
.mesa__precios {
  --rotulo-tinta: var(--oro);
  color: var(--oro);
  /* zona táctil de 44 px sin separar el subrayado del texto: el borde
     va en un hijo de línea, no en la caja */
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding-inline: .2rem;
  box-shadow: inset 0 -1px 0 var(--oro-tenue);
  transition: color .3s var(--curva), border-color .3s var(--curva);
}
.mesa__precios:hover { color: var(--laton); box-shadow: inset 0 -1px 0 var(--laton); }

/* ═══════════════ LOS BOTONES, CON ACABADO DE VIDRIO ═══════════════
   Estaban apretados y planos: un rectángulo con borde y ya. Ahora tienen
   el acabado de un cristal biselado — luz que entra por arriba, canto
   claro, sombra que los levanta del fondo y un reflejo que los barre al
   pasar el cursor. Y el doble de aire dentro. */
.plataformas { gap: clamp(.6rem, 1.4vw, .9rem); grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); }
.plat {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  min-height: 4.25rem;
  border: 1px solid rgb(255 255 255 / .09);
  border-radius: .75rem;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .085) 0%, rgb(255 255 255 / .022) 42%, rgb(0 0 0 / .16) 100%),
    var(--elevado);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .16),          /* el canto que recoge la luz */
    inset 0 -1px 0 rgb(0 0 0 / .38),
    0 1px 2px rgb(0 0 0 / .4),
    0 10px 24px -12px rgb(0 0 0 / .7);
  transition: border-color .35s var(--curva), box-shadow .45s var(--curva),
              translate .45s var(--curva), background-color .35s var(--curva);
}
/* el reflejo que barre el cristal */
.plat::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgb(255 255 255 / .14) 48%, transparent 62%);
  translate: -130% 0;
  transition: translate .85s var(--curva);
  pointer-events: none;
  z-index: -1;
}
.plat__icono { width: 1.6rem; height: 1.6rem; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .5)); }
.plat__txt b { font-size: 1rem; letter-spacing: .055em; }
.plat__txt small { letter-spacing: .16em; font-size: .75rem; }
.plat:hover {
  border-color: color-mix(in srgb, var(--tono) 52%, transparent);
  translate: 0 -3px;
  transform: none;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .24),
    inset 0 -1px 0 rgb(0 0 0 / .38),
    0 2px 4px rgb(0 0 0 / .45),
    0 20px 40px -16px color-mix(in srgb, var(--tono) 40%, rgb(0 0 0 / .8));
}
.plat:hover::before { translate: 130% 0; }
.plat:active { translate: 0 0; box-shadow: inset 0 2px 6px rgb(0 0 0 / .55); }
@media (prefers-reduced-motion: reduce) {
  .plat, .plat::before { transition: none; }
}

/* ═══════════════ LA COLUMNA DE LA VISITA ═══════════════
   El mapa colgaba de la columna izquierda, debajo de cinco botones, en
   un carril de la mitad de ancho — de ahí que se viera aplastado a un
   lado con media pantalla vacía enfrente. Ahora cierra la columna de
   los datos, a todo su ancho, y esa mitad deja de estar hueca. */
.visita__lado { display: grid; gap: clamp(2rem, 4vw, 3rem); align-content: start; }
.visita__lado .mapa { margin-top: 0; }

/* ═══════════════ EL MAPA, VISIBLE ═══════════════
   Estaba dibujado con grises al 2 % sobre negro: sobre el papel se
   distinguía, en pantalla era un rectángulo vacío. Se sube el contraste
   de las manzanas, la avenida se hace de oro y el barrio recibe la luz
   cálida del propio local. */
.mapa {
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(62% 58% at 58% 50%, rgb(252 130 19 / .07), transparent 72%),
    var(--tinta-honda);
}
.mapa__manzana { fill: rgb(232 226 214 / .055); }
.mapa__calle   { stroke: rgb(232 226 214 / .14); }
.mapa__via     { stroke: var(--oro); opacity: .72; }
.mapa__verde   { fill: rgb(40 62 33 / .8); }
/* halo bajo el punto: se ve dónde está antes de leer nada */
.mapa__pin::before { content: none; }
.mapa__pin circle:nth-child(2) { filter: drop-shadow(0 0 10px rgb(252 130 19 / .9)); }
.mapa__rot { color: var(--hueso-medio); }
.mapa__rot--via { color: var(--laton); }
.mapa:hover { border-color: var(--oro); }

/* ═══════════════ LAS GAVETAS DE LA BARRA ═══════════════
   Siete fichas en dos columnas dejaban una celda vacía del tamaño de
   una ficha al final. Que fluyan y se repartan solas. */
.programa__rejilla { align-content: start; }
/* siete fichas en dos columnas dejaban una celda vacía del tamaño de una
   ficha al final; la impar sobrante ocupa las dos y el hueco desaparece */
.gaveta:last-child:nth-child(odd) { grid-column: 1 / -1; }


/* ═══════════════ EL PIE, POR ENCIMA DE LA BARRA FIJA ═══════════════
   En teléfono la barra de acciones se queda pegada abajo y se comía las
   dos últimas líneas del pie. La reserva se calcula sobre su alto real
   más el área segura del aparato. */
@media (max-width: 56.24rem) {
  .pie { padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ═══════════════════ NUESTRO ESPACIO ═══════════════════
   Una sala que se recorre de izquierda a derecha. Las piezas van a
   distinta altura a propósito: una fila de rectángulos iguales se lee
   como una plantilla, y este local tiene demasiada personalidad para
   eso. El encaje lo hace scroll-snap del navegador — sin librería. */
.espacio {
  background: var(--tinta-honda);
  padding-block: var(--aire) clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
  overflow-x: clip;
}
/* .tope solo pone el ancho máximo; el margen lateral lo trae .seccion, y
   esta cabecera no la lleva: sin esto el titular sale a sangre y se corta
   por la izquierda en el teléfono. */
.espacio__intro {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: end;
  width: 100%;
  padding-inline: var(--marco);
}
.espacio__dicho { color: var(--hueso-medio); max-width: var(--medida); }

.sala {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* arranca alineada con el resto del contenido y sangra por la derecha:
     así se ve que hay más y se invita a empujar */
  padding-inline: var(--marco);
  scroll-padding-inline-start: var(--marco);
  cursor: grab;
}
.sala::-webkit-scrollbar { display: none; }
.sala.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.sala:focus-visible { outline: 2px solid var(--llama); outline-offset: -4px; }
.sala__carril {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  /* el último hueco: si no, la última foto queda pegada al borde */
  padding-inline-end: var(--marco);
}

.pieza {
  margin: 0;
  position: relative;
  flex: none;
  scroll-snap-align: start;
  border-radius: .25rem;
  overflow: clip;
  background: var(--elevado);
}
.pieza img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.9) saturate(.98);
  transition: filter .7s var(--curva), scale 1.5s var(--curva);
}
/* tres siluetas, para que la fila tenga ritmo */
.pieza--alta   { width: min(78vw, 23rem); aspect-ratio: 4 / 5; }
.pieza--ancha  { width: min(88vw, 32rem); aspect-ratio: 4 / 3; }
.pieza--cuadra { width: min(78vw, 25rem); aspect-ratio: 1; }
/* y una de cada tres se alza, para romper la línea del horizonte */
.pieza:nth-child(3n + 2) { align-self: start; }
.pieza:nth-child(3n)     { align-self: end; }

.pieza::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(12 13 6 / .92) 0%, rgb(12 13 6 / .28) 32%, transparent 58%);
  pointer-events: none;
}
.pieza figcaption {
  position: absolute; inset-inline: clamp(1rem, 2.5vw, 1.6rem);
  bottom: clamp(.9rem, 2.5vw, 1.35rem);
  display: grid; gap: .3rem;
  z-index: 1;
}
.pieza__n {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--hueso);
  line-height: 1.15;
  text-shadow: 0 1px 16px rgb(8 9 4 / .95);
}
.pieza__d {
  font-size: var(--t-min);
  color: var(--laton);
  text-shadow: 0 1px 12px rgb(8 9 4 / .95);
}
@media (hover: hover) {
  .pieza:hover img { filter: brightness(1.02) saturate(1.04); scale: 1.04; }
}

/* los mandos: puntos a la izquierda, flechas a la derecha */
.sala__mandos {
  /* dentro de una rejilla, el margin-inline:auto de .tope encoge el
     elemento a su contenido y lo centra; con el ancho declarado, los
     mandos vuelven a repartirse de margen a margen */
  width: 100%;
  padding-inline: var(--marco);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.sala__puntos { display: flex; gap: .5rem; align-items: center; }
.punto {
  width: 44px; height: 44px;      /* zona táctil entera, marca chica */
  padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.punto::before {
  content: "";
  width: 1.6rem; height: 2px;
  background: var(--linea);
  transition: background-color .35s var(--curva), width .35s var(--curva);
}
.punto[aria-selected="true"]::before { background: var(--oro); width: 2.6rem; }
.punto:hover::before { background: var(--oro-tenue); }
.sala__flechas { display: flex; gap: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .sala { scroll-behavior: auto; }
  .pieza img { transition: none; }
}

/* En teléfono las flechas quedaban debajo de los puntos, justo donde se
   posa la barra fija de acciones. Y sobran: con el dedo se arrastra. Los
   puntos siguen ahí para saltar, y el teclado también. */
@media (max-width: 56.24rem) {
  .sala__flechas { display: none; }
  .sala__mandos { justify-content: center; }
}