/* ═══════════════════════════════════════════════════════════════════════════
   QUERENA · Eatery + Bar — Colinas del Cimatario, Querétaro
   CSS propio. Cero librerías, cero JavaScript de autor.

   ─── LA TRADUCCIÓN ────────────────────────────────────────────────────────
   El sitio no habla SOBRE Querena: está hecho con lo que Querena está hecho.
   Cinco materiales del local, abstraídos a sistema y no copiados como adorno:

   EL ARCO      Está tres veces en su edificio: la hilera de espejos del
                salón, el hueco de la barra y el emparrado de la bugambilia.
                Es la apertura de todo el sitio — el héroe, la escena del día,
                la barra y el espacio miran por un arco. Un rectángulo con la
                esquina redondeada no es un arco: la curva superior es media
                elipse y arranca en el arranque, como en obra.
   EL BEJUCO    Su tejido es ritmo vertical fino y repetido. Se traduce en la
                pauta de filetes: los renglones de la carta, las fichas de
                datos y las tiras de hechos comparten un mismo hilo de 1 px.
   EL AZULEJO   El verde de la barra es la superficie de la noche, y su módulo
                aparece una sola vez, en la sección de la barra, como retícula
                al 4 % — textura, no papel tapiz.
   LA BUGAMBILIA Flor real de su techo. Es el ÚNICO color de acción del sitio.
   LA LUZ       Abren a las 8:00 y cierran a las 19:00. El suelo de la página
                recorre ese día: papel de mañana, papel tostado de mediodía,
                noche verde en la barra. La única transición de claro a oscuro
                ocurre SOBRE una fotografía — un degradado de papel a noche
                atraviesa un gris oliva que parece un error de imprenta.

   ─── TIPOGRAFÍA ──────────────────────────────────────────────────────────
   Libre Bodoni  display y la VOZ en cursiva. Es la Didone de su carta y de su
                 logotipo; su monograma lleva «Eatery + Bar» en cursiva, así
                 que la cursiva es su letra, no un adorno.
   Newsreader    prosa y nombres de plato. Serif hecha para pantalla.
   Archivo       rótulos, navegación, botones y PRECIOS (cifras tabulares).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1 · TOKENS
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── color medido sobre SU material ── */
  --bugambilia:       #d21552;   /* la flor del techo — ÚNICO color de acción */
  --bugambilia-honda: #b0103f;   /* el vivo da 4.33:1 sobre el papel tostado */
  --ambar:            #f29833;   /* sus focos Edison — solo sobre oscuro */
  --amarillo:         #f8e884;   /* el amarillo de su post — solo sobre oscuro */

  --bejuco:           #1b2617;   /* la tinta: el verde de sus sillas. No hay negro. */
  --bejuco-2:         #3b4a38;
  --bejuco-3:         #515c4a;
  --noche:            #141c15;   /* el bejuco al anochecer */
  --noche-2:          #1c271e;

  --papel:            #f7f2e6;   /* la crema de su carta */
  --papel-2:          #e6dcc2;   /* segundo paso del día, distinguible del primero */
  --hueso:            #f3ecdc;
  --madera:           #432719;

  /* Las tintas de la noche van HORNEADAS a hex a propósito. Un
     `color-mix(in oklab, …)` computa a `oklab(...)` y el detector de contraste
     solo sabe leer `rgb()`: con la mezcla puesta devolvía 1.21:1 sobre texto
     perfectamente legible y quedaba ciego justo en los capítulos oscuros. */
  --hueso-80:         #c1bdaf;
  --hueso-62:         #969589;

  /* ── superficie / tinta / filete: los reescribe cada capítulo ── */
  --suelo:   var(--papel);
  --tinta:   var(--bejuco);
  --tinta-2: var(--bejuco-2);
  --tinta-3: var(--bejuco-3);
  --linea:   color-mix(in oklab, var(--bejuco) 15%, transparent);
  --linea-2: color-mix(in oklab, var(--bejuco) 30%, transparent);
  --acento:  var(--bugambilia-honda);
  --accion:  var(--bugambilia);          /* el botón NO cambia de capítulo */

  /* ── geometría: el arco ── */
  --arco:      50% 50% 0 0 / 34% 34% 0 0;    /* proporción 3:4 */
  --arco-alto: 50% 50% 0 0 / 27% 27% 0 0;    /* proporción 3:5, más esbelto */
  --r-chip:    999px;
  --r-min:     2px;

  /* ── escala tipográfica: siete pasos + display.
        Interpola entre 20rem y 56.25rem y se congela en el único corte del
        sitio: la letra deja de crecer cuando el layout deja de moverse. El
        término rem manda, así que el zoom al 200 % es correcto. ── */
  --t--1: clamp(0.8125rem, 0.78rem  + 0.17vw, 0.875rem);
  --t-0:  clamp(1rem,      0.966rem + 0.17vw, 1.0625rem);
  --t-1:  clamp(1.125rem,  1.056rem + 0.34vw, 1.25rem);
  --t-2:  clamp(1.375rem,  1.168rem + 1.03vw, 1.75rem);
  --t-3:  clamp(1.75rem,   1.336rem + 2.07vw, 2.5rem);
  --t-4:  clamp(2.25rem,   1.56rem  + 3.45vw, 3.5rem);
  --t-5:  clamp(2.75rem,   1.72rem  + 5.17vw, 4.625rem);
  --t-6:  clamp(3.5rem,    1.2rem   + 11.5vw, 8.5rem);   /* solo el nombre */

  /* ── espacio: una sola escala, sin números sueltos ── */
  --e-1: 0.375rem;  --e-2: 0.75rem;  --e-3: 1.125rem;  --e-4: 1.75rem;
  --e-5: 2.5rem;    --e-6: 3.5rem;   --e-7: clamp(4rem, 8vw, 7rem);
  --e-8: clamp(5.5rem, 11vw, 10rem);

  /* ── contenedor y rejilla ── */
  --ancho:  min(100% - 2.5rem, 78rem);
  --medida: 38rem;                         /* medida de lectura cómoda */

  /* ── movimiento ── */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);
  /* muelle (masa 1, rigidez 170, amortiguación 22), muestreado una vez */
  --muelle: linear(0, 0.012 1.6%, 0.05 3.4%, 0.19 7.3%, 0.49 13.1%, 0.72 18.6%,
                   0.86 23.9%, 0.95 29.5%, 1.005 36%, 1.022 43%, 1.018 51%,
                   1.006 62%, 0.999 78%, 1);
  --v-1: 0.22s;  --v-2: 0.4s;  --v-3: 0.9s;

  color-scheme: light;
}

/* ───────────────────────────────────────────────────────────────────────────
   2 · RESET ACOTADO
   Sin `* { margin: 0 }` universal: se resetea lo que estorba y nada más. Un
   reset universal fuera de capa anula las utilidades de espaciado del sitio
   entero y compila sin un solo error.
   ─────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd, fieldset { margin: 0; }
ul[class], ol[class], nav ul, .pie ul { list-style: none; padding: 0; }
img, picture, video, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
fieldset { border: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 5rem; }   /* la barra de atajos mide 45 px */

body {
  background: var(--noche);          /* el suelo del final: evita el flash blanco */
  color: var(--tinta);
  font-family: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-size: var(--t-0);
  line-height: 1.66;
  font-synthesis: none;              /* ni negrita ni cursiva falsas */
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;                  /* clip y NO hidden: hidden mata view() */
}

/* ───────────────────────────────────────────────────────────────────────────
   3 · TIPOGRAFÍA
   ─────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, .didone {
  font-family: 'Libre Bodoni', 'Bodoni MT', Didot, Georgia, serif;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--tinta);
}
h1 { font-size: var(--t-6); line-height: 0.88; letter-spacing: -0.032em; }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-2); }

p { text-wrap: pretty; hyphens: auto; }
:lang(es-MX) { hyphenate-limit-chars: 8 4 4; }

/* la voz de la marca: su cursiva, la del monograma */
.voz {
  font-family: 'Libre Bodoni', 'Bodoni MT', Didot, Georgia, serif;
  font-style: italic;
  letter-spacing: 0;
}

/* rótulos: Archivo en versalitas espaciadas */
.rotulo {
  display: inline-block;
  font-family: 'Archivo', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* la hora del capítulo: el hilo que hilvana el recorrido */
.hora {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-family: 'Archivo', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--t--1);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
}
.hora::before { content: ''; width: 1.75rem; height: 1px; background: currentColor; opacity: 0.6; }

.cifra {
  font-family: 'Archivo', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   4 · CAPÍTULOS · el día que cae
   El suelo lo pinta la CLASE del capítulo, no el tipo de elemento. Cuando esto
   apuntaba a `section`, los bloques que eran <article> se quedaban sin fondo:
   se veía el del <body> (la noche) con la tinta del día encima. Ninguna
   medición lo detecta, porque el par de colores declarado era correcto.
   ─────────────────────────────────────────────────────────────────────────── */
.cap { background: var(--suelo); color: var(--tinta); }
.cap--alba { --suelo: var(--papel); }
.cap--dia  { --suelo: var(--papel-2); }
.cap--noche {
  --suelo:   var(--noche);
  --tinta:   var(--hueso);
  --tinta-2: var(--hueso-80);
  --tinta-3: var(--hueso-62);
  --linea:   color-mix(in oklab, var(--hueso) 18%, transparent);
  --linea-2: color-mix(in oklab, var(--hueso) 34%, transparent);
  --acento:  var(--ambar);
  color-scheme: dark;
}

.envoltura { width: var(--ancho); margin-inline: auto; }
.seccion { padding-block: var(--e-7); }
.seccion--corta { padding-block: var(--e-6); }

.cabecera-seccion { max-width: 46rem; margin-bottom: var(--e-6); }
.cabecera-seccion h2 { margin-top: var(--e-3); }
.cabecera-seccion .voz {
  display: block; margin-top: var(--e-3);
  font-size: var(--t-2); line-height: 1.25; color: var(--tinta-2);
}

/* ───────────────────────────────────────────────────────────────────────────
   5 · EL ARCO · la geometría del edificio
   La curva de arriba es media elipse, no una esquina redondeada: por eso los
   dos radios van separados por la barra. Debajo, el arranque es recto.
   ─────────────────────────────────────────────────────────────────────────── */
.arco {
  position: relative;
  border-radius: var(--arco);
  overflow: hidden;
  overflow: clip;     /* `hidden` CREA contenedor de scroll y congela view();
                         `clip` recorta igual y no lo crea. Se deja `hidden`
                         delante como respaldo para Safari 15. */
}
.arco > img { width: 100%; height: 100%; object-fit: cover; }
.arco--alto { border-radius: var(--arco-alto); }
/* el filo del arco: un hilo que sigue la curva, como el marco de sus espejos */
.arco--marco::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid var(--linea-2);
  border-radius: inherit;
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   6 · ACCIONES
   ─────────────────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.125rem;                       /* 50 px, por encima del mínimo */
  padding: var(--e-3) var(--e-5);
  font-family: 'Archivo', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--t-0); font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-chip);
  transition: transform var(--v-2) var(--muelle), background-color var(--v-1) var(--curva),
              color var(--v-1) var(--curva), border-color var(--v-1) var(--curva);
}
.boton--principal { background: var(--accion); color: #fff; }
.boton--principal:hover { background: var(--bugambilia-honda); }
.boton--linea { border-color: var(--linea-2); color: var(--tinta); }
.boton--linea:hover { border-color: var(--tinta); background: color-mix(in oklab, var(--tinta) 7%, transparent); }
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: none; }

.enlace {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-family: 'Archivo', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--t--1); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--linea-2);
  color: var(--tinta-2);
  transition: color var(--v-1) var(--curva), border-color var(--v-1) var(--curva);
}
.enlace:hover { color: var(--acento); border-color: currentColor; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acento); outline-offset: 3px; border-radius: var(--r-min);
}

.salto {
  position: absolute; inset-block-start: var(--e-2); inset-inline-start: var(--e-2); z-index: 90;
  transform: translateY(-180%);
  background: var(--accion); color: #fff;
  padding: var(--e-3) var(--e-4); border-radius: var(--r-chip);
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 600; text-decoration: none;
  transition: transform var(--v-2) var(--curva);
}
.salto:focus-visible { transform: none; }

/* ───────────────────────────────────────────────────────────────────────────
   7 · EL HILO DE LA HORA
   Tres píxeles arriba del todo que avanzan de ámbar a bugambilia conforme se
   baja: son las once horas que Querena está abierto. Sin JS.
   ─────────────────────────────────────────────────────────────────────────── */
.reloj {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 80;
  height: 3px; transform-origin: 0 50%; transform: scaleX(0);
  background: var(--bugambilia);   /* un solo color: era el unico degradado del sistema */
  pointer-events: none;
}
@supports (animation-timeline: scroll(root)) {
  .reloj { animation: reloj linear both; animation-timeline: scroll(root); }
}
@keyframes reloj { to { transform: scaleX(1); } }

/* ───────────────────────────────────────────────────────────────────────────
   8 · CABECERA — no es fija. Una barra pegada arriba en un teléfono es una
   barra que tapa, y aquí no gana nada: el botón de volver arriba resuelve el
   regreso y el ancla vive en la propia cabecera.
   ─────────────────────────────────────────────────────────────────────────── */
.cabecera { background: var(--papel); padding-block: var(--e-2) var(--e-1); }
.cabecera .envoltura { display: flex; align-items: center; gap: var(--e-1) var(--e-5); flex-wrap: wrap; }
.marca { display: inline-flex; align-items: center; min-height: 2.75rem; flex: 0 0 auto; }
.marca img { width: clamp(8.5rem, 14vw, 11.5rem); }
.nav { flex: 1 1 auto; min-width: 0; }
.nav ul { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); }
.nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--t--1); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  color: var(--bejuco-2);
  transition: color var(--v-1) var(--curva);
}
.nav a:hover { color: var(--bugambilia); }
.cabecera .boton { display: none; }

/* ───────────────────────────────────────────────────────────────────────────
   9 · HÉROE · 8:00
   ─────────────────────────────────────────────────────────────────────────── */
.heroe { --suelo: var(--papel); position: relative; overflow: clip; padding-block: var(--e-4) var(--e-6); }
/* la luz rasante de la mañana, detrás del arco */
.heroe::before {
  /* medidas en unidades de ventana y NO en porcentaje del héroe: el héroe
     cambia de alto cuando cargan las fuentes, y con `inset` en % el
     resplandor se movía con él — 0.14 de CLS por un adorno. */
  content: ''; position: absolute; inset: -16vw -8vw auto auto;
  width: min(66rem, 88vw); aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle at 60% 42%,
              color-mix(in oklab, var(--ambar) 24%, transparent) 0%,
              color-mix(in oklab, var(--ambar) 8%,  transparent) 36%,
              transparent 64%);
}
.heroe__rejilla { position: relative; display: grid; gap: var(--e-6); }
.heroe__texto { max-width: 34rem; }
.heroe h1 { margin-block: var(--e-3) var(--e-4); }
/* EL NOMBRE. Cada letra sube desde detras de su propia linea de base y el
   tracking arranca abierto y se cierra al asentarse: el gesto de una marca,
   no un efecto de diapositiva. Despues no vuelve a moverse. */
.nombre { display: block; font-size: var(--t-6); line-height: 0.86; letter-spacing: -0.032em; }
.nombre__linea { display: block; }
.nombre__letra { display: inline-block; }
.heroe__idea {
  margin-top: var(--e-4);
  font-family: 'Libre Bodoni', Georgia, serif; font-style: italic;
  font-size: var(--t-2); line-height: 1.24; color: var(--tinta-2); max-width: 26ch;
}
.heroe__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
/* la tira de hechos: la pauta del bejuco, hilo de 1 px entre datos */
.hechos-tira {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4);
  margin-top: var(--e-5); padding-top: var(--e-3);
  border-top: 1px solid var(--linea);
  font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t-0);
  font-variant-numeric: tabular-nums; color: var(--tinta-2);
}
/* el punto va DETRÁS de cada dato, no delante del siguiente: al envolver en
   teléfono, un separador que encabeza línea se lee como una viñeta suelta. */
.hechos-tira li:not(:last-child)::after {
  content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--bugambilia); margin-inline-start: var(--e-4); vertical-align: 0.2em;
}

/* el arco del héroe, con el sello del horario apoyado en su arranque */
.heroe__arco { position: relative; width: min(100%, 23rem); justify-self: center; }
.heroe__arco .arco { aspect-ratio: 3 / 4; box-shadow: 0 2rem 4rem -1.75rem color-mix(in oklab, var(--bejuco) 42%, transparent); }
.sello {
  position: absolute; inset-block-end: 7%; inset-inline-start: -6%;
  background: var(--papel); border: 1px solid var(--linea-2);
  padding: var(--e-2) var(--e-3);
  font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t--1); line-height: 1.4;
  color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.sello b { display: block; font-family: 'Libre Bodoni', Georgia, serif; font-weight: 400; font-size: var(--t-1); color: var(--tinta); }
/* «Eatery + Bar» siguiendo la curva del arco, como en su monograma */
.heroe__curva { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.heroe__curva text {
  font-family: 'Libre Bodoni', Georgia, serif; font-style: italic;
  font-size: 5px; fill: var(--hueso); letter-spacing: 0.14em;
}
/* el velo de la corona: sin él la inscripción se pierde sobre las sombrillas */
.arco--inscrito::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 34%; z-index: 1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.46), transparent);
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   10 · LA CASA · identidad
   ─────────────────────────────────────────────────────────────────────────── */
.casa__rejilla { display: grid; gap: var(--e-6); align-items: start; }
.casa h2 { font-size: var(--t-5); line-height: 0.98; letter-spacing: -0.025em; max-width: 11ch; }
.casa h2 em { font-style: italic; display: block; }
.casa__cuerpo { max-width: 34rem; margin-top: var(--e-4); }
.casa__cuerpo p { font-size: var(--t-1); color: var(--tinta-2); }
.casa__cuerpo p + p { margin-top: var(--e-3); }
/* la pauta: el ritmo del bejuco aplicado a los tres hechos verificados */
/* LOS TRES DATOS, como pieza editorial y no como tres fichas: numeracion
   pequena en Archivo, la cifra o el nombre GRANDE en la Didone y el matiz
   diminuto debajo. Cada uno abre con filete; el ultimo no cierra, para que la
   serie no parezca una tabla. */
.datos { margin-top: var(--e-6); display: grid; gap: 0; counter-reset: dato; }
.datos > li {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-4);
  align-items: baseline; padding-block: var(--e-4);
  border-top: 1px solid var(--linea);
}
.datos > li::before {
  counter-increment: dato; content: '0' counter(dato);
  font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t--1); font-weight: 600;
  letter-spacing: 0.18em; color: var(--acento);
}
.datos__grande {
  font-family: 'Libre Bodoni', Georgia, serif; font-size: var(--t-3);
  line-height: 1; letter-spacing: -0.02em; color: var(--tinta);
  font-variant-numeric: lining-nums tabular-nums;
}
.datos__grande i { font-style: normal; color: var(--acento); margin-inline: 0.16em; }
.datos__pie {
  margin-top: var(--e-2);
  font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t--1);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .datos > li { animation: dato-entra 0.8s var(--curva) both; animation-timeline: view(); animation-range: entry 4% entry 46%; }
    .datos > li:nth-child(2) { animation-range: entry 10% entry 52%; }
    .datos > li:nth-child(3) { animation-range: entry 16% entry 58%; }
  }
}
@keyframes dato-entra { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
/* Una imagen, grande. El bloque del delantal se retiro: no respondia a
   ninguna pregunta del visitante y su foto no daba para el tamano. */
.casa__foto { margin: 0; }
.casa__foto .foto { aspect-ratio: 4 / 5; border-radius: var(--arco); }
.casa__foto figcaption {
  margin-top: var(--e-3);
  font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t--1);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3);
}

/* ───────────────────────────────────────────────────────────────────────────
   11 · LOS PLATOS · rejilla editorial
   Nueve, en cuatro filas de estructura distinta. Ni mosaico uniforme ni
   tarjetas: cada foto pide su formato y las filas no repiten registro.
   ─────────────────────────────────────────────────────────────────────────── */
/* Nueve platos en una reticula simetrica de 3x3: mismo formato, misma altura,
   mismos huecos. Lo que cambia de una a otra es el ENCUADRE, no la caja: cada
   una lleva su `object-position`. La asimetria anterior repartia nueve huecos
   distintos entre fotos de calidad desigual y se notaba; con nueve del mismo
   nivel, la simetria se lee como decision. */
.platos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4) var(--e-3); }
.plato:last-child { grid-column: span 2; }
@media (min-width: 56.25rem) { .plato:last-child { grid-column: auto; } }
.plato { margin: 0; position: relative; transition: opacity var(--v-2) var(--curva); }
.plato .foto { aspect-ratio: 5 / 4; background: color-mix(in oklab, var(--bejuco) 8%, transparent); }
.plato figcaption { margin-top: var(--e-2); }
.plato b { display: block; font-weight: 600; font-size: var(--t-0); line-height: 1.3; color: var(--tinta); }
.plato span { display: block; margin-top: 0.1rem; font-style: italic; font-size: var(--t--1); color: var(--tinta-3); }
.plato--molcajete img { object-position: 50% 46%; }
.plato--cecina    img { object-position: 50% 52%; }
.plato--pulpo     img { object-position: 50% 44%; }
.plato--comal     img { object-position: 50% 50%; }
.plato--postre    img { object-position: 50% 42%; }
.plato--verdes    img { object-position: 50% 48%; }
.plato--papaya    img { object-position: 50% 46%; }
.plato--corte     img { object-position: 50% 54%; }
.plato--bowl      img { object-position: 50% 40%; }
@media (hover: hover) {
  .plato .foto::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgb(0 0 0 / 0.26), transparent 40%);
    opacity: 0; transition: opacity var(--v-2) var(--curva);
  }
  .plato:hover .foto::after { opacity: 1; }
  .platos:has(.plato:hover) .plato:not(:hover) { opacity: 0.6; }
}
.platos__pie {
  margin-top: var(--e-6); padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5);
}
.platos__pie p { color: var(--tinta-3); font-style: italic; max-width: 28rem; }

/* ───────────────────────────────────────────────────────────────────────────
   12 · EL DÍA · escena pegada
   El arco se queda quieto y la luz de dentro cambia mientras pasan los tres
   momentos. Sin soporte para líneas de tiempo de scroll se ve la mañana fija:
   los textos, que son los que informan, están siempre completos.
   ─────────────────────────────────────────────────────────────────────────── */
.dia { --suelo: var(--papel-2); position: relative; }
.dia__rejilla { display: grid; gap: var(--e-6); }
/* En teléfono cada momento es imagen + texto apilados. En escritorio el <div>
   del momento desaparece con `display: contents` y sus dos hijos caen como
   celdas de la rejilla de dos columnas: la foto se queda pegada mientras se
   lee su texto y la siguiente sube por encima al soltarse.
   La versión anterior tenía las tres fotos en un solo marco pegado y las
   fundía con líneas de tiempo de scroll: en escritorio se veía bien, y en
   móvil el arco quedaba arriba del todo y los otros dos momentos se quedaban
   literalmente sin imagen. */
.momento__foto { margin: 0; }
.momento__foto .arco { aspect-ratio: 3 / 4; }
.momento__texto { padding-block: var(--e-4) 0; }
.momento__texto h3 { font-size: var(--t-4); margin-top: var(--e-2); }
.momento__texto p { margin-top: var(--e-3); color: var(--tinta-2); font-size: var(--t-1); max-width: var(--medida); }
.dia__lista { margin-top: var(--e-4); border-top: 1px solid var(--linea); max-width: var(--medida); }
.dia__lista li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3);
  padding-block: var(--e-2); border-bottom: 1px solid var(--linea); color: var(--tinta-2);
}
.dia__lista .cifra { color: var(--tinta); }

/* ───────────────────────────────────────────────────────────────────────────
   13 · LA CARTA
   Índice pegado + destacados + los ~110 precios. La consulta rápida manda:
   los precios van alineados, en cifras tabulares, y nunca escondidos.
   ─────────────────────────────────────────────────────────────────────────── */
.carta { --suelo: var(--papel-2); }
.indice {
  position: sticky; inset-block-start: 2.8125rem; z-index: 40;   /* justo bajo la barra de atajos */
  background: var(--suelo);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e-5);
}
.indice .envoltura { display: flex; align-items: center; gap: var(--e-3); }
.indice__rotulo {
  display: none;                 /* en teléfono le quita sitio a los chips */
  flex: 0 0 auto;
  font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t--1); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-3);
}
.indice ul {
  display: flex; gap: var(--e-2); flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; padding-block: var(--e-2);
  scroll-snap-type: x proximity;
  /* el desvanecido del borde derecho es lo que dice «esto sigue»: sin el, el
     tercer chip aparecia cortado a mitad de palabra y se leia como un fallo */
  mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
}
.indice ul::-webkit-scrollbar { display: none; }
.indice a {
  display: inline-flex; align-items: center; white-space: nowrap;
  min-height: 2.75rem; padding-inline: var(--e-3);
  scroll-snap-align: start;
  font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t--1); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--tinta-2);
  border: 1px solid var(--linea-2); border-radius: var(--r-chip);
  transition: color var(--v-1) var(--curva), border-color var(--v-1) var(--curva), background-color var(--v-1) var(--curva);
}
.indice a:hover { color: var(--accion); border-color: currentColor; }

/* los destacados: lo que pide quien no sabe qué pedir */
.destacados { display: grid; gap: var(--e-4); margin-bottom: var(--e-7); }
.destacado { display: grid; gap: var(--e-3); }
.destacado .arco { aspect-ratio: 4 / 5; }
.destacado--ancho .arco { aspect-ratio: 1; }
.destacado__nombre { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.destacado h3 { font-size: var(--t-2); }
.destacado .cifra { font-family: 'Libre Bodoni', Georgia, serif; font-size: var(--t-2); color: var(--acento); }
.destacado p { margin-top: var(--e-1); font-style: italic; color: var(--tinta-3); font-size: var(--t-0); }
.destacado--ancho { border: 1px solid var(--linea-2); padding: var(--e-4); }
.destacado--ancho .rotulo { color: var(--acento); }
.destacado--ancho h3 { margin-top: var(--e-2); font-size: var(--t-4); line-height: 1; }
.destacado--solo > div:last-child { justify-self: end; text-align: right; }
.destacado--solo .cifra { font-family: 'Libre Bodoni', Georgia, serif; font-size: var(--t-5); color: var(--acento); line-height: 1; }

/* los cinco grupos de la carta. Antes era una rejilla de dos columnas, y ahí
   un índice pegado no puede funcionar: el primer grupo de la columna derecha
   queda a la MISMA altura que el de la izquierda, así que dos anclas distintas
   llevan al mismo sitio. Apilados y con sus columnas dentro, cada ancla cae
   donde dice. */
/* la barra pegada del índice mide 69 px: con 4.25rem (68) el encabezado al
   que salta el chip aterrizaba UN píxel por debajo de ella, o sea tapado. */
.cluster { scroll-margin-top: 8.75rem; }   /* barra de atajos + índice + aire */
.cluster + .cluster { margin-top: var(--e-7); }
.cluster__titulo {
  font-size: var(--t-3);
  padding-bottom: var(--e-2);
  margin-bottom: var(--e-4);
  border-bottom: 2px solid var(--tinta);
}
.cluster__cols { display: grid; gap: var(--e-5); }
.cluster__cols > .grupo:first-child { margin-top: 0; }

.grupo { scroll-margin-top: 4.5rem; break-inside: avoid; }
.grupo + .grupo, .grupo + .pliegue { margin-top: var(--e-5); }
.grupo h3 { padding-bottom: var(--e-2); margin-bottom: var(--e-1); border-bottom: 1px solid var(--linea-2); }
.grupo h3 .voz { font-size: var(--t-0); color: var(--tinta-3); letter-spacing: 0; }
.grupo__oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grupo__nota { margin-bottom: var(--e-2); color: var(--tinta-3); font-size: var(--t-0); }
.carta__rejilla { display: grid; gap: var(--e-5); }

.renglon {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: var(--e-1) var(--e-2);
  padding-block: var(--e-2);
  border-bottom: 1px solid var(--linea);
}
.renglon__nombre { font-weight: 600; font-size: var(--t-0); line-height: 1.35; color: var(--tinta); }
.renglon__nombre small { display: block; margin-top: 0.15rem; font-style: italic; font-weight: 400; font-size: var(--t--1); line-height: 1.45; color: var(--tinta-3); }
.renglon__puntos { display: none; }
.renglon__precio { font-family: 'Archivo', system-ui, sans-serif; font-weight: 500; font-variant-numeric: tabular-nums; font-size: var(--t-0); color: var(--tinta-2); }
.renglon--sub { border-bottom: 0; padding-top: 0; }
.renglon--sub .renglon__nombre { font-weight: 400; font-style: italic; font-size: var(--t--1); color: var(--tinta-3); }

.pliegue { border-top: 1px solid var(--linea-2); margin-top: var(--e-5); }
.pliegue summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  min-height: 3.25rem;
  font-family: 'Libre Bodoni', Georgia, serif; font-size: var(--t-2); color: var(--tinta);
}
.pliegue summary::-webkit-details-marker { display: none; }
.pliegue summary::after {
  content: '+'; font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t-3);
  line-height: 1; color: var(--acento); transition: transform var(--v-2) var(--curva);
}
.pliegue[open] summary::after { transform: rotate(45deg); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .pliegue::details-content { block-size: 0; overflow: clip; transition: block-size var(--v-2) var(--curva), content-visibility var(--v-2) allow-discrete; }
  .pliegue[open]::details-content { block-size: auto; }
}
.carta__nota { margin-top: var(--e-5); color: var(--tinta-3); font-style: italic; font-size: var(--t--1); }
/* enlace en línea dentro de una frase: la regla de 44 px no aplica a los
   enlaces embebidos en texto corrido, y el mismo destino tiene su objetivo
   grande en «Cómo llegar». Aquí solo tiene que LEERSE como enlace. */
.carta__nota a { color: var(--tinta-2); text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 0.22em; }
.carta__nota a:hover { color: var(--acento); }

/* ───────────────────────────────────────────────────────────────────────────
   14 · EL PUENTE · aquí cae el día
   La transición de claro a oscuro ocurre SOBRE la fotografía. Un
   `linear-gradient` de papel a noche atraviesa un gris oliva que parece un
   error de imprenta; una foto de su terraza al anochecer, no.
   ─────────────────────────────────────────────────────────────────────────── */
.puente { position: relative; background: var(--noche); }
.puente__foto { position: relative; height: clamp(18rem, 44vw, 34rem); overflow: hidden; overflow: clip; }
.puente__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.puente__foto::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--papel-2) 0%, color-mix(in oklab, var(--papel-2) 55%, transparent) 14%, transparent 42%),
    linear-gradient(0deg,  var(--noche) 0%, color-mix(in oklab, var(--noche) 60%, transparent) 20%, transparent 58%);
}
.puente__texto { position: absolute; inset-block-end: var(--e-5); inset-inline: 0; text-align: center; color: var(--hueso); }
.puente__texto .hora { color: var(--amarillo); }
.puente__texto p {
  font-family: 'Libre Bodoni', Georgia, serif; font-style: italic;
  font-size: var(--t-3); line-height: 1.15; margin-top: var(--e-2);
  text-shadow: 0 1px 26px rgb(0 0 0 / 0.6);
}

/* ───────────────────────────────────────────────────────────────────────────
   15 · DOS COLUMNAS · la barra, celebrar
   ─────────────────────────────────────────────────────────────────────────── */
.duo { display: grid; gap: var(--e-6); align-items: center; }
.duo figure { margin: 0; }
.duo .arco { aspect-ratio: 4 / 5; }
.duo img { width: 100%; height: 100%; object-fit: cover; }
.duo h2 { margin-top: var(--e-2); }
.duo p { margin-top: var(--e-3); color: var(--tinta-2); font-size: var(--t-1); max-width: 34rem; }
.duo .acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
.lista-precio { margin-top: var(--e-4); border-top: 1px solid var(--linea); max-width: 34rem; }
.lista-precio li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3);
  padding-block: var(--e-2); border-bottom: 1px solid var(--linea); color: var(--tinta-2);
}
.lista-precio .cifra { color: var(--acento); font-weight: 600; }

/* la barra lleva el módulo del azulejo verde, al 4 %: textura, no papel tapiz */
/* CELEBRAR · el unico ritmo horizontal del sitio: una banda ancha y el texto
   debajo, partido en dos. Todo lo demas es rejilla o dos columnas, asi que
   este cambio de compas se nota sin gritar. */
.celebrar { padding-block: 0 var(--e-7); }
/* la proporción de la banda sigue a la del recorte (1.74), así que `cover`
   casi no recorta y no se comen cabezas. En teléfono se abre a 4/3. */
.celebrar__banda { margin: 0; aspect-ratio: 4 / 3; }
.celebrar__banda img { object-position: 50% 40%; }
.celebrar__pie { display: grid; gap: var(--e-5); padding-top: var(--e-6); }
.celebrar__pie h2 { margin-top: var(--e-2); font-size: var(--t-5); }
.celebrar__pie p { color: var(--tinta-2); font-size: var(--t-1); max-width: 34rem; }
.celebrar__hechos { margin-top: var(--e-4); border-top: 1px solid var(--linea); max-width: 30rem; }
.celebrar__hechos li {
  padding-block: var(--e-2); border-bottom: 1px solid var(--linea);
  font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t--1);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-3);
}
.celebrar .acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
@media (min-width: 56.25rem) {
  .celebrar__pie { grid-template-columns: 0.85fr 1.15fr; gap: var(--e-7); align-items: start; }
  .celebrar__banda { aspect-ratio: 16 / 9; }
}

.barra { position: relative; }
.barra::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--hueso) 4%, transparent) 0 1px, transparent 1px 4.5rem),
    repeating-linear-gradient(0deg,  color-mix(in oklab, var(--hueso) 4%, transparent) 0 1px, transparent 1px 2.25rem);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.barra > * { position: relative; }

/* ───────────────────────────────────────────────────────────────────────────
   16 · EL LUGAR · espacio y texturas
   ─────────────────────────────────────────────────────────────────────────── */
.lugar__texto { max-width: 44rem; }
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
.etiquetas li {
  font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t--1);
  border: 1px solid var(--linea-2); border-radius: var(--r-chip);
  padding: var(--e-1) var(--e-3); color: var(--tinta-2);
}
/* Ocho ventanas en arco, ocho asuntos distintos del local. En arco porque la
   regla del sitio no tiene excepcion: arco = el lugar, rectangulo = el plato.
   Ocho arcos en fila leen como una columnata, que es lo que son. */
.texturas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-4) var(--e-3); margin-top: var(--e-6); }
.texturas figure { margin: 0; }
.texturas .foto { aspect-ratio: 3 / 4; border-radius: var(--arco-alto); }
.texturas figcaption {
  margin-top: var(--e-2);
  font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t--1);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3);
}
.tx--salon      img { object-position: 50% 46%; }
.tx--exterior   img { object-position: 50% 52%; }
.tx--arcos      img { object-position: 34% 44%; }
.tx--lamparas   img { object-position: 50% 40%; }
.tx--mesa       img { object-position: 50% 50%; }
.tx--banca      img { object-position: 50% 48%; }
.tx--fachada    img { object-position: 50% 44%; }
.tx--barra img { object-position: 50% 46%; }

/* ───────────────────────────────────────────────────────────────────────────
   17 · LA BANDA
   ─────────────────────────────────────────────────────────────────────────── */
.banda { --suelo: var(--noche-2); overflow: clip; padding-block: var(--e-3); border-block: 1px solid var(--linea); }
.banda__pista { display: flex; width: max-content; }
.banda__grupo {
  display: flex; align-items: center; gap: var(--e-4); padding-inline-end: var(--e-4);
  font-family: 'Libre Bodoni', Georgia, serif; font-style: italic;
  font-size: var(--t-2); color: var(--tinta-2); white-space: nowrap;
}
.banda__grupo i { color: var(--ambar); font-style: normal; }
@media (prefers-reduced-motion: no-preference) { .banda__pista { animation: banda 52s linear infinite; } }
@keyframes banda { to { transform: translateX(-50%); } }

/* ───────────────────────────────────────────────────────────────────────────
   18 · CÓMO LLEGAR
   ─────────────────────────────────────────────────────────────────────────── */
.visita__rejilla { display: grid; gap: var(--e-6); align-items: start; }
.dato { padding-block: var(--e-3); border-bottom: 1px solid var(--linea); }
.dato dt { font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t--1); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: var(--e-1); }
.dato dd { font-size: var(--t-1); color: var(--tinta); }
.dato dd a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.28em; text-decoration-color: var(--acento);
}
.dato dd a:hover { color: var(--acento); }
.dato dd small { display: block; margin-top: var(--e-1); font-size: var(--t--1); color: var(--tinta-3); font-style: italic; }
.acciones-visita { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }

/* El texto de un SVG escala CON el dibujo: a 320 px la envoltura mide 280 y el
   viewBox 560, o sea escala 0.5, así que cada tamaño de aquí se lee a la
   MITAD. Están puestos para que el más pequeño aterrice sobre 12 px reales. */
.esquema svg { width: 100%; height: auto; font-family: 'Archivo', system-ui, sans-serif; font-size: 25px; fill: var(--tinta-2); }
.esquema .rot { font-size: 25px; letter-spacing: 0.16em; fill: var(--tinta-3); }
.esquema .didone { font-family: 'Libre Bodoni', Georgia, serif; font-size: 31px; fill: var(--tinta); }
.esquema .via { fill: color-mix(in oklab, var(--hueso) 9%, transparent); }
.esquema a { text-decoration: none; }
.esquema a:hover .didone { fill: var(--acento); }
.esquema__pie { margin-top: var(--e-2); font-size: var(--t--1); font-style: italic; color: var(--tinta-3); }

/* ───────────────────────────────────────────────────────────────────────────
   19 · CIERRE Y PIE
   ─────────────────────────────────────────────────────────────────────────── */
.cierre { position: relative; }
/* El ultimo plano de la pelicula: alto de verdad, no una banda. */
.cierre__foto { position: relative; height: clamp(26rem, 78vh, 46rem); overflow: hidden; overflow: clip; }
.cierre__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cierre__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--noche) 1%, rgb(0 0 0 / 0.62) 42%, rgb(0 0 0 / 0.12) 100%); }
/* abajo, no al centro: al centro el titular caía justo encima del letrero y
   se leían las dos cosas a la vez. Abajo se apoya en la zona oscura del velo. */
.cierre__texto {
  position: absolute; inset: 0;
  display: grid; align-content: end; justify-items: center; text-align: center;
  color: var(--hueso); padding: var(--e-4) var(--e-4) var(--e-6);
}
.cierre__texto h2 { font-size: var(--t-5); color: var(--hueso); text-shadow: 0 2px 30px rgb(0 0 0 / 0.55); }
.cierre__texto p { margin-top: var(--e-3); font-size: var(--t-1); color: var(--hueso); text-shadow: 0 1px 20px rgb(0 0 0 / 0.6); }
.cierre__texto .acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-5); }
.cierre__texto .boton--linea { border-color: color-mix(in oklab, var(--hueso) 55%, transparent); color: var(--hueso); }
.cierre__texto .boton--linea:hover { background: color-mix(in oklab, var(--hueso) 12%, transparent); border-color: var(--hueso); }

.pie { --suelo: var(--noche); padding-block: var(--e-7) var(--e-5); }
.pie__rejilla { display: grid; gap: var(--e-6); }
.pie__lema { margin-top: var(--e-3); font-size: var(--t-2); color: var(--tinta-2); }
.pie h3 { font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t--1); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: var(--e-3); }
.pie ul { display: grid; gap: var(--e-1); }
.pie ul a, .pie ul li { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--tinta-2); text-decoration: none; }
.pie ul a:hover { color: var(--acento); }
.redes { display: flex; gap: var(--e-2); margin-top: var(--e-4); }
.redes a { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--linea); border-radius: var(--arco); color: var(--tinta-2); transition: color var(--v-1) var(--curva), border-color var(--v-1) var(--curva); }
.redes a:hover { color: var(--ambar); border-color: currentColor; }
.redes svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.pie__legal { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--linea); font-size: var(--t--1); color: var(--tinta-3); }

/* ── LA BARRA DE ATAJOS ──────────────────────────────────────────────────
   Sustituye al botón flotante «volver arriba», que se midió tapando glifos en
   31 posiciones de scroll —una de ellas el área táctil del enlace del
   estacionamiento—, aparecía ya a scrollY 0 y era el único elemento fijo del
   sitio. Esta ocupa el ancho completo, así que no tapa nada: el contenido
   pasa por debajo. Y lleva las dos acciones que importan. */
.minibarra {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
  background: var(--noche); color: var(--hueso);
  border-bottom: 1px solid color-mix(in oklab, var(--hueso) 16%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(-100%);
}
.minibarra .envoltura { display: flex; align-items: center; gap: var(--e-4); min-height: 2.75rem; }
.minibarra a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-family: 'Archivo', system-ui, sans-serif; font-size: var(--t--1);
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--hueso-80);
  transition: color var(--v-1) var(--curva);
}
.minibarra a:hover { color: var(--ambar); }
.minibarra__marca { font-family: 'Libre Bodoni', Georgia, serif; font-size: var(--t-1);
  font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--hueso); margin-inline-end: auto; }
@supports (animation-timeline: scroll(root)) {
  .minibarra { animation: asoma linear both; animation-timeline: scroll(root); animation-range: 88vh 108vh; }
}
@keyframes asoma { to { opacity: 1; visibility: visible; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   20 · MOVIMIENTO · dos capas
   Gramática tomada de una referencia propia del estudio (la-jalisciense), no
   de su identidad: entrada guiada por scroll + una «cámara» de reposo muy
   larga con curva senoidal.

   CAPA A · ENTRADA. Una máscara que descubre la foto y un reencuadre. Va por
   `clip-path`, no por `scale`, precisamente para dejar `scale` y `translate`
   libres para la capa B: así las dos animaciones conviven en el MISMO
   elemento sin pisarse, porque animan propiedades distintas.

   CAPA B · REPOSO. La foto sigue viva cuando dejas de bajar: un travelling
   lentísimo de 16 a 24 s con `cubic-bezier(.37,0,.63,1)`, que es una senoidal
   —acelera y frena sin picos— e `infinite alternate`, que evita el salto del
   ciclo. Cada asunto se mueve distinto: la comida empuja hacia dentro, la
   arquitectura panea en horizontal, la terraza deriva en diagonal y la noche
   hace marea. Arranca PARADA y solo corre con `.viva`, que pone el
   IntersectionObserver: animar treinta imágenes fuera de pantalla es tirar
   GPU. Sin JavaScript la foto simplemente no respira; se ve igual.

   Sobrebarrido: la escala mínima de cada fotograma es siempre mayor que el
   doble de su desplazamiento máximo, así que el borde de la imagen nunca
   asoma dentro del marco.
   ═══════════════════════════════════════════════════════════════════════════ */

.foto { position: relative; overflow: hidden; overflow: clip; }
.foto > img { width: 100%; height: 100%; object-fit: cover; }

/* CAPA A · la máscara que descubre */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .foto > img {
      animation-name: revelar;
      animation-timeline: view();
      animation-range: entry 2% entry 72%;
      animation-fill-mode: both;
      animation-timing-function: var(--curva);
    }
    /* las dos capas juntas: nombres y líneas de tiempo en paralelo */
    .viva > img {
      animation-name: revelar, var(--camara, camara-deriva);
      animation-timeline: view(), auto;
      animation-duration: auto, var(--vida, 19s);
      animation-timing-function: var(--curva), cubic-bezier(.37, 0, .63, 1);
      animation-iteration-count: 1, infinite;
      animation-direction: normal, alternate;
      animation-fill-mode: both, both;
      animation-range: entry 2% entry 72%, normal;
      will-change: clip-path, scale, translate;
    }
  }
}
@keyframes revelar { from { clip-path: inset(0 0 92% 0); } to { clip-path: inset(0 0 0 0); } }

/* En la escena del día las fotos van PEGADAS, y `view()` sobre un elemento
   pinchado no avanza: se queda en el fotograma inicial y la máscara nunca se
   abre — la mañana salía en blanco y la tarde con una tira del 8 %. Ahí la
   entrada la hace el propio pinchado (el arco siguiente sube por encima del
   anterior), así que solo corre la cámara de reposo. */
.momento__foto .foto > img { animation-name: none; }
.momento__foto.viva .foto > img,
.momento__foto .foto.viva > img { animation-name: var(--camara, camara-deriva); }

/* CAPA B · las cuatro cámaras */
@keyframes camara-empuje  { from { scale: 1.03; translate: 0 0; }              to { scale: 1.075; translate: 0 -0.7%; } }
@keyframes camara-pan     { from { scale: 1.055; translate: -1.6% 0; }         to { scale: 1.055; translate: 1.6% 0; } }
@keyframes camara-deriva  { from { scale: 1.035; translate: -0.7% -0.5%; }     to { scale: 1.08;  translate: 0.7% 0.5%; } }
@keyframes camara-marea   { 0% { scale: 1.07; translate: -2.2% 0.4%; }
                            50% { scale: 1.11; translate: 0 -0.7%; }
                            100% { scale: 1.07; translate: 2.2% 0.4%; } }

.cam--comida  { --camara: camara-empuje; --vida: 17s; }
.cam--arq     { --camara: camara-pan;    --vida: 22s; }
.cam--terraza { --camara: camara-deriva; --vida: 19s; }
.cam--noche   { --camara: camara-marea;  --vida: 24s; }

/* 20.3 · entrada del texto: SOLO desplazamiento, sin desvanecido. Con
   `opacity: 0 -> 1` sobre un rango largo, un bloque puede estar entero en
   pantalla y seguir a media opacidad: se llegó a medir texto legítimo a
   1.21:1 sobre la noche. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .entra { animation: entra var(--v-3) var(--curva) both; animation-timeline: view(); animation-range: entry 2% entry 42%; }
    .entra--tarde { animation-range: entry 12% entry 58%; }
  }
}
@keyframes entra { from { transform: translateY(1.5rem); } to { transform: none; } }

/* 20.4 · el héroe, escalonado al abrir. Sin scroll: entrada normal. */
@media (prefers-reduced-motion: no-preference) {
  .heroe .rotulo   { animation: alza 1.05s var(--curva) both; }
  .heroe__idea     { animation: alza 1.05s var(--curva) both 0.42s; }
  .heroe__acciones { animation: alza 1.05s var(--curva) both 0.56s; }
  .hechos-tira     { animation: alza 1.05s var(--curva) both 0.66s; }
  .heroe__arco .arco { animation: arco-abre 1.6s var(--curva) both 0.12s; }
}
@keyframes alza { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }
@keyframes arco-abre { from { opacity: 0; clip-path: inset(64% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* 20.5 · EL NOMBRE · momento de marca.
   Cada letra sube desde detrás de una línea de base con el tracking abierto,
   que se cierra al asentarse. No brinca: una sola pasada, curva de salida y
   nada de rebote. Después no vuelve a moverse. El <h1> lleva `aria-label`,
   así que el lector de pantalla dice «Querena» y no lo deletrea. */
@media (prefers-reduced-motion: no-preference) {
  .nombre__linea { display: block; overflow: hidden; overflow: clip; padding-block: 0.06em; }
  .nombre__letra {
    display: inline-block;
    /* dos propiedades distintas, dos animaciones que no se pisan:
       `transform` sube la letra y `translate` cierra el tracking. */
    animation: letra-sube 1.15s cubic-bezier(0.16, 1, 0.3, 1) both,
               letra-junta 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(0.1s + var(--i) * 0.055s), 0.1s;
  }
}
@keyframes letra-sube { from { transform: translateY(105%); } to { transform: none; } }
/* El tracking se cierra con `translate`, NO con `letter-spacing`: el segundo
   reflowa, y a 1440 «Querena» con el tracking abierto se partía en dos líneas
   y volvía a una — 0.08 de CLS por una animación de entrada. */
@keyframes letra-junta {
  from { translate: calc(var(--i) * 0.062em) 0; }
  to   { translate: 0 0; }
}
/* ───────────────────────────────────────────────────────────────────────────
   21 · PREFERENCIAS DEL USUARIO
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
  :root { --linea: color-mix(in oklab, var(--bejuco) 44%, transparent); --tinta-3: var(--bejuco-2); }
  .cap--noche { --linea: color-mix(in oklab, var(--hueso) 46%, transparent); --tinta-3: #ddd8c8; }
  .puente__foto::after { background: rgb(0 0 0 / 0.45); }
  .barra::before { display: none; }
}
@media (forced-colors: active) {
  .boton { border: 1px solid ButtonText; }
  .plato__marco, .dato, .destacado--ancho { border: 1px solid CanvasText; }
  .reloj, .barra::before { display: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   22 · EL ÚNICO CORTE — 56.25rem = 900 px
   En rem, jamás en px. Un breakpoint en px sale del orden numérico con el que
   el motor compara las media queries y deja que las variantes pequeñas le
   ganen en TODO el sitio.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 56.24rem) {
  /* ── EL HÉROE EN TELÉFONO NO ES EL DE ESCRITORIO ENCOGIDO ──
     Apilado tal cual, el arco —el gesto que sostiene toda la traducción— caía
     a 1.200 px de scroll y la primera pantalla era 100 % texto. Aquí el bloque
     de texto se disuelve (`display: contents`) y sus piezas se reordenan como
     celdas de la rejilla: nombre, promesa y las dos acciones primero, el arco
     inmediatamente después —entra en la primera pantalla— y la prosa larga y
     los datos debajo, que es donde se leen con calma. */
  .heroe__texto { display: contents; }
  /* OJO: estas clases son las del héroe ACTUAL. Cuando se renombró `.heroe__voz`
     y `.heroe__que` a `.heroe__idea`, estas reglas quedaron huérfanas y la idea
     se pintaba ANTES del nombre. */
  .heroe .rotulo   { order: 1; }
  .heroe h1        { order: 2; }
  .heroe__idea     { order: 3; }
  .heroe__acciones { order: 4; margin-top: var(--e-4); }
  .heroe__arco     { order: 5; margin-top: var(--e-5); }
  .hechos-tira     { order: 6; }
  .heroe__rejilla  { gap: 0; }

  /* la navegación en una sola fila que se desplaza: en dos filas se comía
     44 px de la única pantalla que casi todo el mundo ve */
  .nav ul {
    min-width: 0;
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; gap: var(--e-4);
    mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
  }
  .nav ul::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }

  /* sin puntos: al envolver, el separador quedaba colgando al final de línea */
  .hechos-tira { gap: var(--e-1) var(--e-4); }
  .hechos-tira li:not(:last-child)::after { display: none; }

  /* el pasillo del botón flotante: 3.5rem son 56 px y el botón ocupa 48 a 20
     del borde, así que ninguna cifra queda debajo */
}

@media (min-width: 56.25rem) {
  .cabecera { padding-block: var(--e-4) var(--e-3); }
  .cabecera .envoltura { flex-wrap: nowrap; gap: var(--e-4) var(--e-5); }
  .cabecera .boton { display: inline-flex; }
  .indice__rotulo { display: inline-block; }
  .nav ul { justify-content: center; }

  .heroe { padding-block: var(--e-4) var(--e-7); }
  .heroe__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: center; gap: var(--e-7); }
  .heroe__arco { width: min(100%, 30rem); justify-self: end; }

  .casa__rejilla { grid-template-columns: 1.12fr 0.88fr; }
  /* apiladas y desalineadas, no una al lado de otra: en dos columnas quedaban
     a 200 px dentro de una columna de 430 y la mitad de la altura se perdía. */
  .casa__par { grid-template-columns: 1fr; gap: var(--e-5); }
  .casa__par figure:first-child { width: 82%; margin-inline-start: auto; }
  .casa__par figure:last-child  { width: 72%; }

  .platos { grid-template-columns: repeat(3, 1fr); gap: var(--e-5) var(--e-4); }

  .dia__rejilla { grid-template-columns: 0.95fr 1.05fr; column-gap: var(--e-7); row-gap: 0; align-items: start; }
  .momento { display: contents; }
  .momento__foto { position: sticky; inset-block-start: max(6vh, 3rem); align-self: start; }
  .momento__foto .arco { aspect-ratio: auto; height: min(70vh, 38rem); }
  .momento__texto { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--e-6); }

  .destacados { grid-template-columns: repeat(3, 1fr); gap: var(--e-5); }
  /* la foto del bloque sale de un fotograma de 720 px (es lo que hay): se le
     da menos ancho para que no se estire por encima de su resolución. */
  /* Sin foto: el Especial es «chilaquiles divorciados con cecina y huevo» y no
     existe una fotografía de ESE plato. Poner otra al lado de su precio sería
     afirmar lo que no consta. Se resuelve con tipografía. */
  .destacado--ancho { grid-column: span 3; padding: var(--e-6); }
  .destacado--solo { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--e-6); align-items: center; }
  /* `display: block` explícito: el multicolumna NO aplica a un contenedor de
     rejilla, y la regla base pone `grid`. Sin esto la carta salía en una sola
     columna de 5 000 px. */
  .cluster__cols { display: block; columns: 2; column-gap: var(--e-7); }
  .cluster__cols > .grupo { margin-top: 0; margin-bottom: var(--e-5); }
  .cluster__cols > .pliegue { break-inside: avoid; column-span: all; margin-top: var(--e-6); }
  /* Un grupo solo (Promociones) no se puede partir en dos columnas —lleva
     `break-inside: avoid`— así que dejaba media sección vacía. Con uno solo,
     una columna y medida de lectura. */
  .cluster__cols:not(:has(.grupo:nth-of-type(2))) { columns: 1; max-width: 42rem; }
  .indice a { padding-inline: var(--e-4); }

  .duo { grid-template-columns: 0.85fr 1.15fr; gap: var(--e-7); }
  .duo--invertido figure { order: 2; }

  .texturas { grid-template-columns: repeat(4, 1fr); }
  .visita__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1.2fr; }
}