/* ═══════════════════════════════════════════════════════════════════════════
   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);
  /* SOLO el logotipo, y con dos escalas porque el ancho de su columna cambia
     de golpe en el corte: en teléfono lo tiene todo para él y en escritorio
     comparte la rejilla con el arco. Una sola interpolación obligaba a elegir
     —o pequeño en el móvil, o desbordado a 900 px—.
     Al pasar a VERSALES la palabra se ensancha un 22 % y la Q sobredimensionada
     añade otro tanto, así que ambas escalas bajan: lo que manda no es el cuerpo
     sino el ancho que ocupa. Medido a 320, 390, 430, 900, 1024, 1440 y 1920. */
  --t-6:  clamp(3rem,     -0.44rem  + 17.45vw, 7rem);    /* solo el logotipo */

  /* UN solo tamaño de rótulo para todo el sitio. Antes había tres (0.2em,
     0.16em y 0.14em de tracking) y ninguno era una decisión: eran tres veces
     la misma por defecto. Mínimo 12 px: por debajo, el sensor de móvil lo
     marca y con razón. */
  --t-rotulo: clamp(0.75rem, 0.716rem + 0.17vw, 0.8125rem);

  /* ── 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);
  /* 1.66 es interlínea de sans a 16 px. Una serif con este ojo y esta medida
     se lee mejor apretada: la mancha se vuelve un bloque y no una escalera. */
  line-height: 1.6;
  font-synthesis: none;              /* ni negrita ni cursiva falsas */
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;                  /* clip y NO hidden: hidden mata view() */
}

/* ───────────────────────────────────────────────────────────────────────────
   3 · TIPOGRAFÍA
   ─────────────────────────────────────────────────────────────────────────── */
/* Una Didone pide tracking NEGATIVO y CRECIENTE con el cuerpo: el espacio
   entre letras que a 17 px es correcto, a 150 px abre huecos y el titular se
   deshace. Un solo valor heredado para todos los niveles —que es lo que
   había— deja los grandes flojos y los chicos apretados. Cada nivel lleva el
   suyo. */
h1, h2, h3, .didone {
  font-family: 'Libre Bodoni', 'Bodoni MT', Didot, Georgia, serif;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--tinta);
  font-feature-settings: 'kern' 1, 'liga' 1;
}
h1 { font-size: var(--t-6); line-height: 0.84; letter-spacing: -0.048em; }
h2 { font-size: var(--t-4); letter-spacing: -0.03em; }
h3 { font-size: var(--t-2); letter-spacing: -0.014em; }

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;
}

/* ── EL SISTEMA DE RÓTULOS ─────────────────────────────────────────────────
   Antes: Archivo en mayúsculas con 0.2 / 0.16 / 0.14 em de tracking. Espaciar
   una grotesca normal es el gesto por defecto de cualquier plantilla, y a
   0.2em «COLINAS DEL CIMATARIO» se leía como la etiqueta de un formulario.

   Ahora: la MISMA familia pero ANCHA de verdad. Archivo trae el eje wdth
   (62–125) y el archivo que se descargaba no lo incluía, así que la única
   palanca disponible era el espaciado. Con la anchura al 117 % y el tracking
   a menos de la mitad, el rótulo ocupa lo mismo pero el DIBUJO es distinto:
   una grotesca ancha y compacta es un rótulo de revista; una normal muy
   espaciada es un pie de plantilla. Un solo tamaño para todo el sitio. */
.rotulo, .hora, .dato dt, .pie h3, .indice__rotulo, .celebrar__ficha dt {
  font-family: 'Archivo', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  font-stretch: 117%;
  font-weight: 500;
  font-size: var(--t-rotulo);
  letter-spacing: 0.085em;
  text-transform: uppercase;
}
.rotulo { display: inline-block; color: var(--tinta-2); }

/* la hora del capítulo: el hilo que hilvana el recorrido */
.hora {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}
.hora::before { content: ''; width: 1.75rem; height: 1px; background: currentColor; opacity: 0.6; }

/* Los precios van un punto ESTRECHOS: una columna de cifras ligeramente
   condensada es el gesto de una carta impresa, y de paso los importes de
   cuatro dígitos ocupan lo mismo que los de tres. */
.cifra {
  font-family: 'Archivo', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
  font-stretch: 94%;
  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); }

/* La respiración cambia con el capítulo. Todas las secciones con el mismo
   aire producen una página que avanza a paso de metrónomo: correcta y sin
   énfasis. La casa —donde el sitio se presenta— abre a lo grande; la carta es
   una herramienta de consulta y va densa; el lugar entra pegado a la escena
   de celebrar porque esa fotografía a sangre ya dio todo el aire que hacía
   falta y separarla otra vez rompería el corte. */
#casa           { padding-block: var(--e-8); }
.carta > .seccion { padding-block: var(--e-6) var(--e-7); }
#lugar          { padding-block: var(--e-6) var(--e-7); }

.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-stretch: 108%;
  font-size: var(--t-0); font-weight: 600; letter-spacing: 0.005em;
  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-stretch: 117%;
  font-size: var(--t-rotulo); font-weight: 600;
  letter-spacing: 0.085em; 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-stretch: 117%;
  font-size: var(--t-rotulo); font-weight: 500;
  letter-spacing: 0.085em; 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-3) 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: 44rem; }
.heroe h1 { margin-block: var(--e-4) 0; }
/* 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. */
/* ── EL LOGOTIPO ───────────────────────────────────────────────────────────
   Su marca NO se escribe «Querena». Se escribe QUERENA, en VERSALES, con la Q
   a un cuerpo y medio del resto y la cola cayendo por debajo de la línea de
   base, y «Eatery + Bar» en cursiva centrado debajo. Eso es lo que se ve en su
   letrero, en su portada y en su monograma, y es exactamente lo que se perdía
   al componerlo en caja alta y baja: quedaba un titular grande, no una marca.

   La Q va en su propio cuerpo dentro de la misma línea; su interlínea se baja a
   0.53 para que el cuerpo grande NO empuje la caja de línea —si la empujara, el
   resto de las letras dejaría de rimar con el filete de abajo—. El clip de la
   línea, que es lo que hace que las letras suban desde detrás de una base, se
   abre por abajo lo justo para que la cola de la Q quepa: es la única parte del
   glifo que vive fuera de la caja. */
.nombre {
  /* fit-content y no inline-block: en teléfono el bloque de texto del héroe es
     , así que el h1 pasa a ser celda de la rejilla y una
     celda BLOQUIFICA el inline-block. Con la caja a todo lo ancho, «Eatery +
     Bar» se centraba bajo la columna y no bajo la palabra. */
  display: block; width: fit-content;
  font-size: var(--t-6); line-height: 0.84;
  /* Las VERSALES piden tracking positivo, no negativo: en caja alta y baja el
     -0.048em cerraba los huecos entre redondas; aquí abriría agujeros. */
  letter-spacing: 0.008em;
}
/* NUNCA envuelve: siete versales con una Q a cuerpo y medio pueden partirse
   en dos líneas y entonces deja de ser un logotipo. Si no cabe, se achica la
   escala —que es lo que hace el clamp—, no se parte la palabra. */
/* El recorte es de UN SOLO LADO. `overflow: clip` recorta las cuatro caras y
   la Q, a cuerpo y medio, se sale de su caja por arriba (el cuenco monta sobre
   la altura de versal) y la A por la derecha (el vértice sobresale de su
   avance): las dos salían cortadas a cuchillo. Aquí sólo hace falta tapar por
   ABAJO, que es de donde suben las letras. Con inset() de valores negativos
   arriba y a los lados, el recorte se abre por esas tres caras y sólo cierra
   por la de abajo. */
.nombre__linea {
  display: block; white-space: nowrap;
  padding-block: 0.04em 0.34em;
  clip-path: inset(-100% -12% 0 -12%);
}
.nombre__letra { display: inline-block; }
.nombre__letra--q {
  font-size: 1.56em;
  line-height: 0.535;                 /* iguala su caja a la de las otras */
  margin-inline-end: -0.075em;        /* la U se mete bajo el hombro de la Q */
}
/* «Eatery + Bar»: centrado bajo la palabra, como en su letrero. El text-indent
   compensa el tracking que la última letra arrastra a su derecha; sin él, una
   línea muy espaciada se ve desplazada media letra a la izquierda. */
.nombre__pie {
  display: block; text-align: center;
  margin-top: -0.16em;
  font-style: italic; font-weight: 400;
  /* El descriptor va en proporción al logotipo, PERO con suelo: a 320 px el
     logotipo mide 49 px y 0.155em son 7.6 px reales. Medido con movil.mjs, que
     lo marcó. Con max() manda la proporción en escritorio y el suelo en
     teléfono, que es donde la proporción deja de ser legible. */
  font-size: max(0.155em, 0.78rem); line-height: 1;
  letter-spacing: 0.30em; text-indent: 0.30em;
  color: var(--tinta-2);
}

/* EL CIERRE DEL LOGOTIPO. De la última letra sale un filete, y encima del
   filete va el dato que decide la visita. Es la construcción de su propio
   monograma —marca, línea, descriptor— y de paso mete el horario, los días y
   el estacionamiento en los primeros tres segundos, sin una caja aparte. */
/* El filete NO es un muñón de 5 rem al lado del texto: cruza la columna
   entera, de margen a margen, y los tres datos se reparten debajo. Un trozo
   de línea junto a un párrafo es una viñeta; una línea que atraviesa con los
   datos colgando es una cabecera de periódico. Además así ninguno de los tres
   parte a media frase: cada uno es un elemento y envuelve entero. */
.heroe__filete {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--e-2) var(--e-4);
  /* La caja de la línea ya reserva sitio para la cola de la Q, así que el
     filete se sube: sin esto quedaba un pasillo muerto entre el logotipo y su
     dato. */
  margin-top: var(--e-3); padding-top: var(--e-3);
  font-family: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  font-stretch: 117%; font-weight: 500;
  font-size: var(--t-rotulo); letter-spacing: 0.085em; text-transform: uppercase;
  color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.heroe__filete::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--linea-2); transform-origin: left center;
}
.heroe__filete i { font-style: normal; color: var(--acento); }
/* el punto va DETRÁS de cada dato, nunca encabezando la línea siguiente */
.heroe__filete 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.15em;
}
.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); }

/* El arco del héroe. El sello blanco «Abierto hoy» que se apoyaba en su
   arranque se retiró: era una cajita opaca sobre la fotografía, repetía el
   horario que ahora lleva el filete del nombre, y le quitaba al arco lo único
   que tiene que hacer, que es ser una ventana. */
.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); }
/* El velo de la corona y la inscripción curva se retiraron del arco: «Eatery +
   Bar» pertenece al logotipo, y tenerlo dos veces a 200 px de distancia era
   repetirlo. Sin inscripción, el velo sólo oscurecía la sombrilla. */

/* ───────────────────────────────────────────────────────────────────────────
   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.94; letter-spacing: -0.034em; max-width: 16ch; }
.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); }
/* ── LOS TRES HECHOS ───────────────────────────────────────────────────────
   Antes eran tres renglones con la MISMA estructura —numerito, cifra grande,
   pie en versalitas— separados por filetes iguales. Eso es una tabla: la
   información era buena y la composición no existía. Se leía como el horario
   pegado en el cristal de la entrada.

   Ahora cada hecho tiene su forma y su sitio en doce columnas que nunca se
   alinean. El rango de horas MANDA: seis columnas y el cuerpo más grande de
   la página después del nombre, con la flecha DIBUJADA —una regla con punta—
   y no puesta con un glifo del teclado. El topónimo entra en cursiva, más
   pequeño, apoyado en la base de la línea anterior y desplazado a la derecha.
   El número de la calle es el único que se lee en dos tamaños a la vez: el
   nombre en rótulo diminuto y el 82 enorme al lado. Y un solo filete, que
   cruza la pieza entera por el medio en vez de encabezar cada renglón.

   Los pies van en la serif del cuerpo y en cursiva, no en versalitas: tres
   líneas de mayúsculas espaciadas debajo de tres cifras es exactamente lo que
   hacía que el bloque pareciera administrativo. */
/* ── LOS TRES HECHOS ───────────────────────────────────────────────────────
   Tercera versión, y las dos anteriores se rechazaron por lo mismo aunque
   parecieran distintas: v1 eran tres renglones idénticos con filete (una
   tabla) y v2 una retícula de doce columnas desalineadas (tres islas de
   tipografía flotando en 650 px de papel). El diagnóstico que faltaba: no
   había ningún OBJETO, sólo tres posiciones. Y en toda la página no había un
   solo bloque sin fotografía salvo éste.

   Lo que lo arregla:
   1 · Entran DOS fotografías grandes, no tres. La correspondencia uno a uno
       entre dato e imagen es la máquina que convierte cualquier serie en
       tabla; con dos de tres, es estructuralmente imposible leerlo como tres
       celdas del mismo formulario.
   2 · El que se queda sin foto es el estacionamiento, del que además NO hay
       una fotografía suya. La restricción de veracidad y la decisión de
       composición coinciden, que es cuando una decisión es buena.
   3 · CERO texto sobre fotografía. El texto va bajo cada vano, sobre el papel.
       Tres velos oscuros aquí serían tres tarjetas negras y abrirían tres
       pozos de noche en el capítulo claro, antes del puente, que es el único
       sitio donde este sitio deja caer el día. De paso el contraste vuelve a
       ser una constante medible sobre #f7f2e6 y no un dato que depende del
       recorte.
   4 · La forma la decide la regla que ya existe: ARCO para el horario, porque
       es el LUGAR; RECTÁNGULO para la cecina, porque es el PLATO.
   5 · Un rótulo-sujeto encima de cada dato (EL HORARIO · LA CARNE · EL
       ESTACIONAMIENTO). Sin él, «82» y «Yecapixtla» eran cifras huérfanas que
       obligaban a leer el pie para entender qué eran.
   6 · «82» deja de ser el objeto grande. El local es el 92a y el 82 es el
       estacionamiento: un 82 aislado en Didone a 76 px se lee como la
       dirección del restaurante. Ahora el objeto es «Sin costo», que además es
       la parte útil, y el número baja al pie.
   ─────────────────────────────────────────────────────────────────────────── */
.hechos { margin-top: var(--e-7); display: grid; gap: var(--e-7); }
.hecho { margin: 0; }
.hecho .foto { background: color-mix(in oklab, var(--bejuco) 8%, transparent); }
.hecho--horario .arco { aspect-ratio: 4 / 5; }
.hecho--carne .foto { aspect-ratio: 16 / 10; }
.hecho__pieza { margin-top: var(--e-4); }
.hecho__pieza .rotulo { color: var(--tinta-3); }

.hecho__cifra {
  display: flex; align-items: baseline; flex-wrap: wrap;
  margin-top: var(--e-2);
  font-family: 'Libre Bodoni', 'Bodoni MT', Didot, Georgia, serif;
  font-size: clamp(3.5rem, 1.5rem + 8.4vw, 5.25rem);
  line-height: 0.84; letter-spacing: -0.052em; color: var(--tinta);
  font-variant-numeric: lining-nums tabular-nums;
}
.hecho__voz {
  margin-top: var(--e-2);
  font-family: 'Libre Bodoni', 'Bodoni MT', Didot, Georgia, serif; font-style: italic;
  font-size: clamp(2.75rem, 1.3rem + 6vw, 4rem);
  line-height: 0.92; letter-spacing: -0.036em; color: var(--tinta);
}
/* el estacionamiento habla más bajo: no tiene fotografía y tampoco es el dato
   que decide la visita */
.hecho__voz--breve { font-size: clamp(2.25rem, 1.1rem + 4.6vw, 3.25rem); }

/* LA FLECHA. Regla de 1 px con punta, y se DIBUJA de izquierda a derecha
   mientras se baja: es la única pieza del sitio que mide una duración, y once
   horas se leen mejor recorriéndolas.
   Va por `clip-path` y no por `scaleX`: escalar deformaría la punta, que es un
   cuadrado girado 45°. Y la línea de tiempo se toma del BLOQUE (que mide unos
   800 px) con `view-timeline-name`, no de la propia regla: la fase `entry` de
   una view-timeline dura el tamaño del SUJETO, y sobre un elemento de 1 px de
   alto son décimas de píxel de recorrido — la flecha aparecería de golpe. */
.hecho--horario { view-timeline-name: --horario; view-timeline-axis: block; }
.hecho__flecha {
  align-self: center; flex: 0 0 auto; position: relative;
  width: clamp(2.5rem, 6.5vw, 5rem); height: 1px;
  background: var(--acento); margin-inline: 0.44em;
}
.hecho__flecha::after {
  content: ''; position: absolute; inset-inline-end: 0; inset-block-start: -4px;
  width: 8px; height: 8px;
  border-top: 1px solid var(--acento); border-right: 1px solid var(--acento);
  transform: rotate(45deg); transform-origin: 100% 0;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hecho__flecha {
      /* `linear`, no la curva de muelle: esto mide tiempo, no aterriza. */
      animation: flecha-corre linear both;
      animation-timeline: --horario;
      /* termina bastante antes de que el bloque acabe de entrar: si la flecha
         se completa justo al final, quien deja de bajar a media pantalla se
         queda mirando un muñón de regla sin punta, que se lee como un fallo. */
      animation-range: entry 18% entry 66%;
    }
  }
}
@keyframes flecha-corre {
  from { clip-path: inset(-10px 100% -10px 0); }
  to   { clip-path: inset(-10px 0 -10px 0); }
}

.hecho__nota {
  margin-top: var(--e-3); max-width: 34ch;
  font-size: var(--t-0); line-height: 1.55; color: var(--tinta-2);
}
.hecho--parque .enlace { margin-top: var(--e-3); }
/* 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--chilaquiles img { object-position: 50% 50%; }
.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 ──────────────────────────────────────────────────────────────
   La sección más floja del sitio, rehecha entera.

   La fotografía anterior era una selfie de grupo delante de los espejos:
   cabezas cortadas arriba y abajo, calcomanías en la cara y ni un metro
   cuadrado de local visible. Respondía «unos amigos» a la pregunta «¿me
   imagino celebrando algo importante aquí?». La nueva es la MESA LARGA —que
   es literalmente lo que se ofrece en esta sección— corriendo en diagonal
   hacia el fondo, con el pastel, dos bengalas encendidas y las tazas de café
   todavía servidas.

   Y la forma cambia con ella. Antes: banda, y debajo título + párrafo. Ahora
   la imagen manda a toda altura, el título se apoya SOBRE ella por abajo a la
   izquierda con su propio velo, y la ficha de cómo apartar sale del borde
   inferior derecho, medio sobre la fotografía y medio sobre la noche. */
.celebrar { padding-block: 0 var(--e-7); }
.celebrar__escena { position: relative; }
/* El velo va en diagonal y sólo por donde pisa el título: en el resto la
   fotografía queda limpia. Un velo uniforme apaga las bengalas, que son
   exactamente lo que hace que esta imagen venda. */
.celebrar__escena::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(8deg,
              rgb(0 0 0 / 0.84) 0%, rgb(0 0 0 / 0.58) 26%,
              rgb(0 0 0 / 0.16) 54%, rgb(0 0 0 / 0) 76%);
}
.celebrar__rotulo { position: absolute; inset-block-end: var(--e-5); inset-inline: 0; z-index: 2; }
.celebrar__rotulo .hora { color: var(--amarillo); }
.celebrar__rotulo h2 {
  margin-top: var(--e-2); font-size: var(--t-5); line-height: 0.86;
  color: var(--hueso); text-shadow: 0 2px 36px rgb(0 0 0 / 0.5);
}
.celebrar__panel {
  background: var(--noche-2); border: 1px solid var(--linea);
  padding: var(--e-5); margin-top: var(--e-5);
}
.celebrar__frase {
  font-family: 'Libre Bodoni', Georgia, serif; font-style: italic;
  font-size: var(--t-2); line-height: 1.22; letter-spacing: -0.014em; color: var(--hueso);
}
.celebrar__ficha { margin-top: var(--e-5); }
.celebrar__ficha > div { display: grid; gap: var(--e-1); padding-block: var(--e-3); border-top: 1px solid var(--linea); }
.celebrar__ficha dt { color: var(--tinta-3); }
.celebrar__ficha dd { font-size: var(--t-0); color: var(--tinta); }
.celebrar__banda { margin: 0; height: clamp(22rem, 68vh, 38rem); }
.celebrar__banda img { object-position: 50% 42%; }
.celebrar__pie { position: relative; z-index: 3; display: grid; }
.celebrar .acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
@media (min-width: 56.25rem) {
  /* La escena ocupa una pantalla y las dos piezas de texto se apoyan DENTRO
     de ella: el título abajo a la izquierda, la ficha abajo a la derecha.
     Colgando la ficha por fuera —que fue el primer intento— quedaban 550 px
     de verde vacío debajo de la fotografía, que es el mismo hueco que este
     encargo señala en otras secciones. */
  .celebrar { position: relative; padding-block: 0; }
  .celebrar__banda { height: clamp(30rem, 92vh, 50rem); }
  .celebrar__rotulo { inset-block-end: var(--e-6); }
  .celebrar__rotulo h2 { font-size: clamp(3.5rem, 6.6vw, 6rem); }
  .celebrar__pie { position: absolute; inset-block-end: var(--e-6); inset-inline: 0; }
  .celebrar__panel {
    /* OPACO a propósito. Un panel translúcido sobre una fotografía deja el
       contraste del texto a merced de lo que haya debajo, y el medidor lee el
       pixel pintado: un dato que cambia con la foto no es un dato. */
    width: min(46%, 30rem); justify-self: end; margin-top: 0;
  }
  .celebrar__frase { font-size: var(--t-1); }
  .celebrar__ficha > div { padding-block: var(--e-2); }
  .celebrar .acciones { margin-top: var(--e-4); }
}

.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); }
/* 25 px en unidades del dibujo se pintaban a 26 px reales en escritorio: el
   doble que cualquier otro rótulo del sitio, así que el nombre de la colonia
   se leía como un titular. No puede bajar de 20: el SVG escala con su caja y
   a 320 px de ancho el dibujo mide 280 y el factor es 0.5, con lo que 21
   saldrían a 10.5 px reales. Medido: bajarlo en teléfono cuesta un aviso del
   sensor. Así que baja SOLO en escritorio, donde el factor es 1.05. */
.esquema .rot { font-size: 25px; letter-spacing: 0.14em; fill: var(--tinta-3); font-stretch: 117%; }
.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; }
/* 30 % dejaba el letrero CORTADO por arriba: la corona de la Q quedaba fuera
   del encuadre en todos los anchos de escritorio. Se mide sobre el archivo,
   no sobre la intención. */
.cierre__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 11%; }
.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 3% entry 62%;
      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 3% entry 62%, normal;
      will-change: clip-path, scale, translate;
    }
  }
}
/* 92 % de mascara sobre un rango del 72 % dejaba la foto convertida en una
   tira durante media entrada. Con 82 % y 62 % la imagen entra ya con un quinto
   abierto y termina de abrirse antes: sigue siendo un telon, deja de ser una
   rendija. */
@keyframes revelar { from { clip-path: inset(0 0 82% 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; }
/* BUG PAGADO: reescribir SOLO el nombre no basta. La regla de «.viva > img»
   declara DOS lineas de tiempo —«view(), auto»— y con un unico animation-name
   el motor se queda con la PRIMERA, que es «view()»; y como estas fotos van
   «position: sticky», «view()» no avanza. Medido en produccion: la camara de
   los tres momentos llevaba congelada en su ultimo fotograma (scale 1.08,
   translate 0.7% 0.5%, identico a los 3 s). Para apagar una capa hay que
   reescribir la LISTA COMPLETA de propiedades animation-*, no solo el nombre. */
.momento__foto.viva .foto > img,
.momento__foto .foto.viva > img {
  animation-name: var(--camara, camara-deriva);
  animation-timeline: auto;
  animation-duration: var(--vida, 19s);
  animation-timing-function: cubic-bezier(.37, 0, .63, 1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-range: normal;
}

/* 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 · LA SECUENCIA DE APERTURA.
   Antes eran cinco entradas independientes que coincidían en el tiempo; se
   leía como cinco cosas apareciendo, no como una. Ahora es UN gesto que se
   desenrolla y cada paso arranca cuando el anterior va por la mitad, así que
   no queda ni un hueco: el rótulo sitúa, el arco se abre desde abajo, el
   nombre sube letra a letra, de su última letra se DIBUJA el filete —de
   izquierda a derecha, con scaleX, no apareciendo—, encima del filete
   llegan los datos, y sólo entonces la frase y los botones.

   El último paso entra a 1.18 s: es una apertura, no una espera. Y nada de
   esto oculta contenido — bajo prefers-reduced-motion no se instala una
   sola de estas reglas y el héroe se pinta entero de una vez. */
@media (prefers-reduced-motion: no-preference) {
  .heroe .rotulo       { animation: alza 0.9s var(--curva) both 0.04s; }
  .heroe__arco .arco   { animation: arco-abre 1.5s var(--curva) both 0.12s; }
  .heroe__filete::before { animation: filete 0.75s var(--curva) both 0.72s; }
  .heroe__filete li      { animation: alza 0.9s var(--curva) both 0.92s; }
  .heroe__idea         { animation: alza 1s var(--curva) both 1.02s; }
  .heroe__acciones     { animation: alza 1s var(--curva) both 1.18s; }
}
@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); } }
@keyframes filete { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 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.24s + var(--i) * 0.052s), 0.24s;
  }
  /* «Eatery + Bar» cierra el logotipo: entra cuando la última letra ya se
     asentó, y sólo entonces empieza el filete. */
  .nombre__pie {
    animation: alza 0.8s var(--curva) both 0.72s;
  }
}
@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__filete   { order: 3; }
  .heroe__idea     { order: 4; }
  .heroe__acciones { order: 5; margin-top: var(--e-4); }
  .heroe__arco     { order: 6; margin-top: var(--e-5); }
  .heroe__rejilla  { gap: 0; }
  /* el nombre pide más aire arriba cuando es lo primero que se ve */
  .heroe h1 { margin-block: var(--e-2) 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; }

  /* En teléfono se apilan, y el estacionamiento —que no lleva fotografía—
     entra con filete para que no parezca un párrafo suelto al final. */
  .hecho--parque .hecho__pieza { padding-top: var(--e-5); border-top: 1px solid var(--linea); }

  /* Los puntos del filete del héroe SE QUITAN al envolver. Con tres datos en
     dos líneas, el punto del segundo se quedaba colgando al final de la
     primera y se leía como una viñeta huérfana. Se sustituye por más hueco. */
  .heroe__filete { gap: var(--e-1) var(--e-4); }
  .heroe__filete li:not(:last-child)::after { display: none; }

  /* Los dos botones del héroe caben en una fila si se les quita 16 px de
     costado; apilados se comían 62 px de la única pantalla que casi todo el
     mundo ve. */
  .heroe__acciones .boton { padding-inline: var(--e-4); }

  /* 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; }

  /* el logotipo ocupa entre el 80 y el 90 % de su columna a cualquier ancho de
     escritorio; medido a 900, 1024, 1440 y 1920 */
  :root { --t-6: clamp(4.5rem, 0.95rem + 6.98vw, 7.25rem); }
  .heroe { padding-block: var(--e-4) var(--e-7); }
  /* La columna del texto gana peso para que el nombre pueda crecer: a 9.75rem
     «Querena» mide casi 600 px y en la mitad exacta de la rejilla no cabía sin
     partirse. */
  .heroe__rejilla { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); align-items: center; gap: var(--e-6); }
  .heroe__arco { width: min(100%, 29rem); justify-self: end; }
  /* 5/7 es la proporción REAL del archivo (1400x1958): con 3/4 el arco recorta
     medio metro de terraza por abajo para nada. */
  .heroe__arco .arco { aspect-ratio: 5 / 7; }

  /* Las tres piezas ENGRANAN en vez de alinearse: el arco del horario es alto
     y cruza las dos filas; el plato ocupa la mitad derecha arriba; la nota del
     estacionamiento cuelga debajo del plato, dentro de la misma columna. Así
     ninguna de las tres empieza donde termina otra, que es lo que hacía que la
     versión anterior se leyera como una tabla desalineada. */
  .hechos {
    margin-top: var(--e-7);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--e-5); row-gap: var(--e-6);
    align-items: start;
  }
  .hecho--horario { grid-column: 1 / span 5;  grid-row: 1 / span 2; }
  .hecho--carne   { grid-column: 7 / span 6;  grid-row: 1; }
  .hecho--parque  { grid-column: 7 / span 6;  grid-row: 2; }
  .hecho--parque .hecho__pieza { margin-top: 0; padding-top: var(--e-5); border-top: 1px solid var(--linea); }

  /* Alineado arriba quedaban 280 px de hueco muerto bajo el párrafo, porque la columna
     de texto mide la mitad que la fotografía. Centrado, el mismo aire se
     reparte arriba y abajo y se lee como respiración y no como un agujero. */
  .casa__rejilla { grid-template-columns: 1.12fr 0.88fr; align-items: center; }
  /* 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; }

  .esquema .rot { font-size: 21px; }
  .texturas { grid-template-columns: repeat(4, 1fr); }
  .visita__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1.2fr; }
}