/* Fuentes locales (assets/fonts): las arma _gen/fuentes.py. Nada se pide a servidores de terceros.
   font-display: swap: el texto se pinta de inmediato con la fuente del sistema y cambia al llegar la suya. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/dm-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Ma Shan Zheng'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/ma-shan-zheng-nanjing.woff2) format('woff2');
  unicode-range: U+4eac, U+5357, U+548f, U+6625; }
/* Chifa Nanjing · web v2 · noche de wok. Un solo tema (oscuro): es un chifa de noche. */
:root {
  --laca: #100B0A;
  --tinta: #1A1210;
  --tinta2: #251A17;
  --tinta3: #33241F;
  --borde: rgba(245, 234, 218, .12);
  --borde2: rgba(245, 234, 218, .22);
  --rojo: #C1121F;
  --rojo-vivo: #E8323C;
  --lacado: #8E0C15;
  --oro: #E4B343;
  --oro-claro: #F6CE68;
  --crema: #F5EADA;
  --humo: #C2B5A6;
  --humo2: #9E9184;
  --jade: #4FC98A;
  --f-disp: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --f-txt: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-num: 'DM Mono', ui-monospace, 'Cascadia Mono', monospace;
  --f-han: 'Ma Shan Zheng', 'KaiTi', 'STKaiti', serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --radio: 22px;
  --gutter: clamp(18px, 4.5vw, 56px);
  --ancho: 1240px;
  --nav-h: 64px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--laca); color: var(--crema);
  font: 400 1rem/1.6 var(--f-txt); font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
::selection { background: var(--rojo); color: #fff; }
:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--tinta3) var(--laca); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar:focus { position: fixed !important; left: 16px; top: 16px; z-index: 100; width: auto; height: auto; clip: auto; padding: 12px 18px; border-radius: 12px; background: var(--crema); color: #1a1210; font-weight: 700; }
.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }

/* grano cálido: va pintado en el fondo del body, que se rasteriza una vez y se desplaza con la página.
   Antes era una capa fija a pantalla completa con mix-blend-mode, que obligaba a mezclar toda la
   página en cada cuadro. En celular no se pinta: ahí no se nota y cuesta batería. */
@media (min-width: 900px) and (pointer: fine) {
  body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .9 0 0 0 0 .82 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  }
}

/* tipografía */
h1, h2, h3 { font-family: var(--f-disp); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; margin: 0; text-wrap: balance; font-variation-settings: 'opsz' 96; }
h2 { font-size: clamp(2.3rem, 7.2vw, 4.9rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -.015em; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
.bajada { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--humo); max-width: 38ch; margin-top: 18px; }
.num, .precio { font-family: var(--f-num); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.han { font-family: var(--f-han); font-weight: 400; line-height: 1; }

/* botones */
.boton {
  --bg: var(--rojo); display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--bg); color: #fff; font: 700 1rem/1 var(--f-txt); text-decoration: none; letter-spacing: .005em; white-space: nowrap;
  box-shadow: 0 10px 30px -12px rgba(193, 18, 31, .8), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .25s var(--ease), background-color .2s, box-shadow .25s var(--ease);
}
.boton:hover { background: var(--rojo-vivo); transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(232, 50, 60, .9), inset 0 1px 0 rgba(255,255,255,.2); }
.boton:active { transform: translateY(0) scale(.98); }
.boton svg { width: 18px; height: 18px; }
.boton.sec { --bg: rgba(245, 234, 218, .08); color: var(--crema); box-shadow: inset 0 0 0 1px var(--borde2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.boton.sec:hover { background: rgba(245, 234, 218, .14); }
.boton.oro { --bg: var(--oro); color: #22150c; box-shadow: 0 10px 30px -14px rgba(228, 179, 67, .8); }
.boton.oro:hover { background: var(--oro-claro); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* navegación: una píldora flotante */
.nav {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 12px); width: min(calc(100% - 24px), 1180px);
  display: flex; align-items: center; gap: 10px; height: var(--nav-h); padding: 0 8px 0 10px;
  border-radius: 999px; background: rgba(20, 13, 12, .62); box-shadow: inset 0 0 0 1px var(--borde), 0 18px 40px -24px #000;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  transition: transform .45s var(--ease), background-color .3s;
}
.nav .marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; flex: none; }
.nav .marca img { width: 44px; height: 44px; border-radius: 50%; }
.nav .marca b { font: 800 1.1rem/1 var(--f-disp); letter-spacing: -.02em; white-space: nowrap; }
.nav .marca small { display: block; font: 500 .75rem/1.2 var(--f-txt); color: var(--humo2); margin-top: 3px; }
.nav .enlaces { display: none; gap: 4px; }
.nav .enlaces a { text-decoration: none; padding: 10px 14px; border-radius: 999px; color: var(--humo); font-weight: 600; font-size: .95rem; transition: color .2s, background-color .2s; }
.nav .enlaces a:hover { color: var(--crema); background: rgba(245, 234, 218, .07); }
.nav .boton { min-height: 46px; padding: 0 20px; }
.estado-pill { display: none; align-items: center; gap: 8px; font: 600 .82rem/1 var(--f-txt); color: var(--humo); padding: 0 12px; white-space: nowrap; }
/* Antes de que corra el script la barra ya dice si está abierto o cerrado (la clase la pone la cabeza
   del HTML antes de pintar): cuando llega el texto completo, los enlaces no se mueven. */
html.js .estado-pill:not([data-corto]) span { display: none; }
html.js .estado-pill:not([data-corto])::after { content: var(--estado, 'Horario'); }
html.js.abierto .estado-pill:not([data-corto]) i { background: var(--jade); box-shadow: 0 0 0 4px rgba(79, 201, 138, .16); }
/* barra angosta (900 a 1079 px): solo «Abierto ahora» o «Cerrado»; el detalle está en «Horario».
   Con el texto largo («Cerrado · abrimos el miércoles a las 11:30 a. m.») la marca pisaba a «Platos». */
@media (min-width: 900px) and (max-width: 1079px) {
  .estado-pill { min-width: 9.6em; justify-content: flex-end; }
  html.js .estado-pill:not([data-corto])::after { content: 'Horario de hoy'; }
  html.js.abierto .estado-pill:not([data-corto])::after { content: 'Abierto ahora'; }
  html.js.cerrado .estado-pill:not([data-corto])::after { content: 'Cerrado'; }
  .estado-pill[data-corto] span { display: none; }
  .estado-pill[data-corto]::after { content: attr(data-corto); }
}
/* (ancho fijo, texto pegado a la derecha: el horario de hoy, «Abierto ahora…» y «Cerrado…» caben sin mover nada) */
@media (min-width: 1080px) { .estado-pill { min-width: 24em; justify-content: flex-end; } }
.estado-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--humo2); }
.estado-pill.abierto i { background: var(--jade); box-shadow: 0 0 0 4px rgba(79, 201, 138, .16); }
/* el Club en la barra: en celular una píldora corta que baja a la sección; en pantallas anchas,
   además, «Crear cuenta» directo a la app */
.nav .en-club { color: var(--oro-claro); }
.nav-club { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px; text-decoration: none;
  font: 700 .88rem/1 var(--f-txt); color: var(--oro-claro); box-shadow: inset 0 0 0 1px rgba(228, 179, 67, .4); white-space: nowrap; }
.nav-club svg { width: 14px; height: 14px; }
.nav-cuenta { display: none; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font: 700 .95rem/1 var(--f-txt); color: var(--oro-claro); box-shadow: inset 0 0 0 1px rgba(228, 179, 67, .45); transition: background-color .2s, color .2s; }
.nav-cuenta:hover { background: var(--oro); color: #22150c; }
/* celulares angostos (360-389 px): la barra se aprieta un poco para que quepan marca, Club y Pedir */
@media (max-width: 389px) {
  .nav { gap: 8px; padding: 0 7px 0 8px; }
  .nav .marca { gap: 8px; }
  .nav .marca img { width: 40px; height: 40px; }
  .nav .marca b { font-size: 1rem; }
  .nav-club { padding: 0 10px; min-height: 38px; font-size: .84rem; gap: 5px; }
  .nav .boton { padding: 0 16px; min-height: 44px; }
}
@media (max-width: 339px) { .nav-club { display: none; } }
/* celular: la barra es opaca. El desenfoque de fondo se recalcula en cada cuadro del scroll y en un
   teléfono modesto es lo más caro de la página */
@media (max-width: 899px) {
  .nav { background: rgba(22, 14, 13, .94); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .boton.sec { backdrop-filter: none; -webkit-backdrop-filter: none; --bg: rgba(42, 30, 27, .92); }
}
@media (min-width: 900px) { .nav .enlaces { display: flex; } .estado-pill { display: inline-flex; } .nav-club { display: none; } }
@media (min-width: 1240px) { .nav-cuenta { display: inline-flex; } }
html.sin-club [data-club], html.sin-club .nav .en-club { display: none !important; }

/* ============ HÉROE: video que el scroll rebobina ============ */
.heroe { position: relative; height: 330vh; }
.heroe .escena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #0b0706; }
.heroe .cuadro, .heroe video, .heroe .poster-fin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heroe .cuadro img, .heroe .poster-fin img { width: 100%; height: 100%; object-fit: cover; }
.heroe video { opacity: 0; transition: opacity .5s; }
.heroe.video-listo video { opacity: 1; }
.heroe .poster-fin { opacity: 0; }
.heroe .velo { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 7, 6, .82) 0%, rgba(12, 7, 6, .5) 38%, rgba(12, 7, 6, 0) 62%),
              linear-gradient(0deg, rgba(12, 7, 6, .85) 0%, rgba(12, 7, 6, 0) 30%); }
/* el borde de abajo del video se funde con la página: al soltarse la escena no hay un corte */
.heroe .escena::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; pointer-events: none;
  background: linear-gradient(0deg, var(--laca) 0%, rgba(16, 11, 10, 0) 100%); }
/* los textos van en su propia capa fija, hermana de la escena y con el mismo recorrido */
.heroe .textos { position: sticky; top: 0; z-index: 6; height: 100vh; height: 100svh; margin-top: -100vh; margin-top: -100svh; pointer-events: none;
  display: grid; align-items: end; padding: 0 var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 44px); }
.heroe .banda:not(.fuera) { pointer-events: auto; }
.banda { grid-area: 1 / 1; max-width: 820px; transition: opacity .45s var(--ease), transform .6s var(--ease), filter .45s; }
.banda.fuera { opacity: 0; transform: translateY(18px); filter: blur(6px); pointer-events: none; }
.banda .sello { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 600 .9rem/1 var(--f-txt); color: var(--crema); }
.banda .sello img { width: 40px; height: 40px; border-radius: 50%; }
.banda h1 { font-size: clamp(2.6rem, 10.5vw, 5rem); }
.banda h1 em { display: inline-block; }
.banda h1 em { font-style: normal; color: var(--oro-claro); }
.banda h2 { font-size: clamp(2.2rem, 8vw, 4.4rem); }
.banda p { margin-top: 16px; font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: #E6D9C7; max-width: 34ch; }
.banda .acciones { margin-top: 26px; }
.heroe .anillo { position: absolute; right: var(--gutter); bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); width: 34px; height: 34px; color: var(--oro); opacity: .8; transition: opacity .4s; }
.heroe.video-listo .anillo, .heroe.video-fallo .anillo { opacity: 0; }
@media (min-width: 900px) {
  /* El dragón nace con los cuernos al 5,4 % del alto del video; la barra ocupa los primeros 76 px.
     El video baja lo justo (--baja) para que los cuernos queden 14 px por debajo de la barra en
     cualquier alto de pantalla, y el hueco de arriba se funde con el techo oscuro de la cocina.
     Con pantallas más anchas que el video se recorta por abajo, nunca por arriba. */
  .heroe { --baja: clamp(0px, calc(90px - 5.4vh), 64px); }
  .heroe .cuadro, .heroe video, .heroe .poster-fin { top: var(--baja); object-position: 50% 0; }
  .heroe .cuadro img, .heroe .poster-fin img { object-position: 50% 0; }
  .heroe .escena::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: calc(var(--baja) + 36px); pointer-events: none;
    background: linear-gradient(180deg, #0b0706 0, #0b0706 calc(var(--baja) - 1px), rgba(11, 7, 6, 0) 100%); }
  .heroe .textos { align-items: center; padding-bottom: 0; }
  /* los títulos de la escena van en dos líneas: nunca llegan al wok ni al dragón del video */
  .banda h2 { max-width: 13ch; }
  .heroe .velo { background: linear-gradient(90deg, rgba(12, 7, 6, .86) 0%, rgba(12, 7, 6, .55) 34%, rgba(12, 7, 6, 0) 58%); }
}
@media (max-width: 899px) {
  .heroe { height: 280vh; }
  .heroe .velo { background: linear-gradient(0deg, rgba(12, 7, 6, .92) 0%, rgba(12, 7, 6, .55) 34%, rgba(12, 7, 6, 0) 58%), linear-gradient(180deg, rgba(12, 7, 6, .55) 0%, rgba(12, 7, 6, 0) 18%); }
}
/* celulares bajos (hasta ~700 px de alto): el texto del héroe ocupa más de media pantalla y el título
   quedaba sobre el vapor blanco. El velo oscuro sube con él. */
@media (max-width: 899px) and (max-height: 700px) {
  .heroe .velo { background: linear-gradient(0deg, rgba(12, 7, 6, .94) 0%, rgba(12, 7, 6, .82) 46%, rgba(12, 7, 6, .5) 68%, rgba(12, 7, 6, 0) 90%), linear-gradient(180deg, rgba(12, 7, 6, .55) 0%, rgba(12, 7, 6, 0) 14%); }
}
/* Botones de pedir: «Pedir ahora» solo cuando se sabe que está abierto (html.abierto); mientras no se
   sabe, y cerrado, «Arma tu pedido». Los dos textos ocupan la misma celda: el botón mide siempre lo del
   más largo, así al cambiar de estado no se mueve ni un píxel (a 360 px el salto era de 64 px). */
[data-cta] { display: inline-grid; justify-items: center; }
[data-cta] > span { grid-area: 1 / 1; }
html.abierto .cta-c, html:not(.abierto) .cta-a { visibility: hidden; }

/* ============ secciones ============ */
.seccion { position: relative; padding-block: clamp(72px, 11vh, 128px); }
.foto { position: relative; margin: 0; border-radius: var(--radio); overflow: hidden; background: var(--tinta2); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9); }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.foto:hover img { transform: scale(1.03); }
.leyenda { margin-top: 12px; font-size: .95rem; color: var(--humo); max-width: 44ch; }
.leyenda b { color: var(--crema); font-weight: 700; }
.han-marca { position: absolute; pointer-events: none; font-family: var(--f-han); color: rgba(193, 18, 31, .08); line-height: .9; user-select: none; }
.ceja { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; font: 700 .8rem/1 var(--f-txt); letter-spacing: .1em; text-transform: uppercase; color: var(--oro); }
.ceja svg { width: 15px; height: 15px; }

/* El pie se compone recién cuando se acerca (content-visibility): la carga ya no mide ni arma ese
   texto de golpe. Solo se estima el ALTO (contain-intrinsic-height). No va en bloques que comparten
   fila de grilla con otro: al pintarse cambiaban el alto de la fila y movían a su vecino en pantalla. */
.pie { content-visibility: auto; contain-intrinsic-height: auto 790px; }
@media (min-width: 900px) { .pie { contain-intrinsic-height: auto 236px; } }

/* ---- platos: una fila que se desliza con el dedo, la rueda o las flechas ----
   Es desplazamiento nativo con imán (scroll-snap): no secuestra el scroll de la página ni la alarga.
   La fila arranca alineada con el texto y sangra hasta el borde derecho de la pantalla. */
.platos { --card: clamp(232px, 62vw, 300px); --final: clamp(250px, 68vw, 320px); --hueco: clamp(14px, 1.8vw, 22px);
  --sangre: max(var(--gutter), calc((100% - var(--ancho)) / 2 + var(--gutter))); overflow: hidden; }
.platos-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.flechas { display: none; gap: 10px; flex: none; }
.flecha { width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--crema);
  background: rgba(245, 234, 218, .07); box-shadow: inset 0 0 0 1px var(--borde2); transition: background-color .2s, transform .25s var(--ease), opacity .2s; }
.flecha svg { width: 20px; height: 20px; }
.flecha[data-dir="-1"] svg { transform: scaleX(-1); }
.flecha:hover { background: rgba(245, 234, 218, .14); }
.flecha:active { transform: scale(.94); }
.flecha:disabled { opacity: .32; cursor: default; }
@media (min-width: 900px) and (hover: hover) { .flechas { display: flex; } }
.pista { display: flex; gap: var(--hueco); margin-top: clamp(26px, 4.5vh, 44px); padding: 8px var(--sangre) 22px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--sangre); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pista::-webkit-scrollbar { display: none; }
.pista:focus-visible { outline-offset: -4px; }
.plato { position: relative; width: var(--card); flex: none; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--tinta); border-radius: var(--radio); overflow: hidden; box-shadow: inset 0 0 0 1px var(--borde), 0 26px 40px -34px #000; transition: transform .5s var(--ease), box-shadow .3s; }
@media (hover: hover) { .plato:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--borde2), 0 34px 46px -34px #000; } }
.plato figure { margin: 0; aspect-ratio: 5 / 4; overflow: hidden; position: relative; background: radial-gradient(90% 80% at 50% 62%, #5a2216 0%, #231512 72%); }
.plato figure img { width: 100%; height: 100%; object-fit: cover; }
/* plato sin foto real: su ticket de cocina (mismo papel que el de la sazón), no una ilustración */
.plato figure.sin-foto { display: grid; place-items: center; container-type: inline-size; }
.ticket-plato {
  width: 74%; background: #F7F0E3; color: #231714; border-radius: 5px 5px 0 0; padding: 12px 14px 18px;
  font: 500 .74rem/1.3 var(--f-num); transform: rotate(-3deg); box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .9);
  -webkit-mask: radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) -6px 0 / 12px 100% repeat-x;
  mask: radial-gradient(circle at 6px 100%, transparent 5px, #000 5.5px) -6px 0 / 12px 100% repeat-x;
}
.plato:nth-child(4n) .ticket-plato { transform: rotate(2.5deg); }
.ticket-plato header { display: flex; justify-content: space-between; gap: 8px; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: #6d5a52; padding-bottom: 6px; border-bottom: 1px dashed #c9b9a6; }
.ticket-plato .linea { margin-top: 8px; font-size: .8rem; color: #1b1110; }
.ticket-plato ul { list-style: none; margin: 6px 0 0; padding: 0; }
.ticket-plato li { color: var(--lacado); padding: 1px 0; }
.ticket-plato li::before { content: '> '; color: #a08d80; }
.ticket-plato footer { display: none; }
@container (max-width: 280px) { /* tarjeta de celular: el ticket entra entero en el cuadro */
  .ticket-plato { width: 80%; padding: 10px 12px 16px; font-size: .66rem; }
  .ticket-plato .linea { font-size: .7rem; margin-top: 6px; }
  .ticket-plato header { font-size: .52rem; padding-bottom: 5px; }
  .ticket-plato ul { margin-top: 5px; }
}
.plato .cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.plato p { color: var(--humo); font-size: .93rem; line-height: 1.45; }
.plato .pie-plato { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plato .precio { font-size: 1.35rem; color: var(--oro-claro); }
.plato .boton { min-height: 44px; padding: 0 18px; font-size: .92rem; }
.plato .fama { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--rojo); color: #fff; font: 700 .75rem/1 var(--f-txt); padding: 7px 10px; border-radius: 6px; }
.plato-final { width: var(--final); flex: none; scroll-snap-align: end; display: grid; align-content: center; justify-items: start; gap: 16px; padding: 24px 8px 24px 14px; }
.plato-final p { color: var(--humo); max-width: 24ch; }

/* ---- sazón ---- */
/* (recorta solo a los lados: la cebolla y el ají asoman por arriba, sobre el margen de la sección) */
@supports (overflow: clip) { .sazon { overflow: visible !important; overflow-x: clip !important; } }
.sazon { overflow: hidden; background: radial-gradient(110% 70% at 85% 35%, rgba(193, 18, 31, .2), transparent 62%), var(--laca); }
.sazon-grid { display: grid; gap: 36px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip {
  min-height: 46px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 600; font-size: .98rem;
  background: rgba(245, 234, 218, .06); box-shadow: inset 0 0 0 1px var(--borde2); color: var(--crema);
  transition: background-color .2s, box-shadow .2s, transform .2s var(--ease), color .2s;
}
.chip:hover { background: rgba(245, 234, 218, .11); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--crema); color: #1d1210; box-shadow: none; }
.chip[aria-pressed="true"]::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--rojo); vertical-align: .05em; }
.nota { margin-top: 16px; font-size: .92rem; color: var(--humo2); }
/* el ticket arriba a la izquierda y el dragón cocinero abajo a la derecha: cada uno en su sitio.
   El ticket es texto y va siempre encima; del dragón solo le cubre la punta de la cola. */
.ticket-zona { position: relative; display: grid; justify-items: start; padding-bottom: 46px; }
.ticket {
  position: relative; z-index: 2; width: min(64%, 240px); background: #F7F0E3; color: #231714; border-radius: 6px 6px 0 0;
  padding: 24px 22px 32px; font-family: var(--f-num); font-size: .9rem; transform: rotate(-2.5deg);
  box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .9);
  -webkit-mask: radial-gradient(circle at 8px 100%, transparent 7px, #000 7.5px) -8px 0 / 16px 100% repeat-x;
  mask: radial-gradient(circle at 8px 100%, transparent 7px, #000 7.5px) -8px 0 / 16px 100% repeat-x;
}
.ticket header { display: flex; justify-content: space-between; gap: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: .76rem; color: #6d5a52; padding-bottom: 12px; border-bottom: 1px dashed #c9b9a6; }
.ticket .linea { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; font-weight: 500; font-size: .95rem; color: #1b1110; }
.ticket ul { list-style: none; margin: 10px 0 0; padding: 0; min-height: 104px; }
.ticket li { color: var(--lacado); font-weight: 500; padding: 3px 0; animation: tinta .5s var(--ease) both; }
.ticket li::before { content: '> '; color: #a08d80; }
.ticket li.vacio { color: #8e7d72; animation: none; }
.ticket li.vacio::before { content: none; }
.ticket footer { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #c9b9a6; font-size: .76rem; color: #6d5a52; letter-spacing: .04em; }
@keyframes tinta { from { opacity: 0; transform: translateX(-8px); filter: blur(3px); } }
.sazon .envoltura { position: relative; z-index: 2; }
@media (max-width: 899px) { .ingrediente.solo-ancho { display: none; } }
/* los ingredientes flotan solo donde no hay texto: en el margen de arriba (por encima del título) y
   junto al cocinero. Su recorrido con el scroll es corto y no llega a ningún renglón. */
.ingrediente { position: absolute; z-index: 1; height: auto; pointer-events: none; }
.ing-cebolla { width: clamp(52px, 8vw, 96px); left: 2%; top: -30px; }
.ing-aji { width: clamp(44px, 7vw, 88px); right: 5%; top: -14px; }
.ing-ajo { width: clamp(48px, 5.4vw, 74px); left: 56%; bottom: 7%; }
html.mov .ingrediente { will-change: transform; } /* capa propia: flotar con el scroll no repinta nada */
@media (max-width: 899px) { .ticket { padding: 20px 18px 28px; font-size: .84rem; } .ticket .linea { font-size: .9rem; } .ticket header { letter-spacing: .02em; font-size: .75rem; } }
@media (min-width: 900px) { .sazon-grid { grid-template-columns: 1.05fr .95fr; gap: 64px; } .ticket { width: 240px; } .ticket-zona { padding-bottom: 56px; } }
@media (min-width: 1200px) { .ticket { width: 280px; } .ticket-zona { padding-bottom: 70px; } }

/* ---- historia ---- */
.historia { overflow: hidden; }
.hist-grid { position: relative; display: grid; gap: 28px; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
.hist-texto { grid-column: 1 / -1; }
.cita-mini { margin: 26px 0 0; padding: 0; font: 600 1.15rem/1.4 var(--f-disp); color: var(--crema); max-width: 30ch; }
.cita-mini cite { display: block; margin-top: 8px; font: 500 .9rem/1.3 var(--f-txt); color: var(--humo2); font-style: normal; }
.cocina-caja { position: relative; grid-column: 1 / -1; }
.f-cocina { aspect-ratio: 4 / 3; }
.f-mari-wrap { grid-column: 1 / 4; }
.f-mari { aspect-ratio: 3 / 4; }
/* la foto del mural deja libre, encima, el sitio por donde se asoma el dragón */
.f-mural-wrap { position: relative; grid-column: 4 / -1; margin-top: 104px; }
.f-mural { aspect-ratio: 4 / 5; z-index: 1; }
.f-mural img { object-position: 66% 50%; }
.historia .han-marca { right: -3vw; top: 30px; font-size: clamp(8rem, 30vw, 22rem); writing-mode: vertical-rl; }
@media (min-width: 900px) {
  .hist-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 44px; }
  .hist-texto { grid-column: 1 / 6; grid-row: 1; align-self: center; }
  .cocina-caja { grid-column: 6 / -1; grid-row: 1 / span 2; }
  .f-cocina { aspect-ratio: 5 / 4; }
  .f-mari-wrap { grid-column: 2 / 6; grid-row: 2 / span 2; }
  .f-mural-wrap { grid-column: 7 / 12; grid-row: 3; margin-top: 84px; }
  .f-mural { aspect-ratio: 3 / 2; }
}

/* ---- la carta vive en la app ---- */
.app, .pedido { overflow: hidden; } /* las entradas del dragón nunca ensanchan la página */
.app { background: radial-gradient(80% 60% at 82% 30%, rgba(228, 179, 67, .07), transparent 65%), var(--laca); }
.app-grid { display: grid; gap: 40px; align-items: center; }
.razones, .ventajas { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.razones li, .ventajas li { display: flex; align-items: center; gap: 14px; color: var(--humo); font-size: 1.02rem; line-height: 1.4; }
.razones b, .ventajas b { color: var(--crema); font-weight: 700; }
.razones svg, .ventajas svg { flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 13px; color: var(--oro-claro); background: rgba(228, 179, 67, .1); box-shadow: inset 0 0 0 1px rgba(228, 179, 67, .22); }
.app .acciones, .club .acciones { margin-top: 30px; }
/* la escena: el teléfono con la app y, a su derecha, el sitio del dragón que la presenta */
.app-escena { position: relative; display: flex; justify-content: center; padding-right: 24%; }
.telefono { position: relative; width: clamp(196px, 52vw, 224px); aspect-ratio: 9 / 18.6; padding: 7px; border-radius: 34px; background: #0a0706;
  box-shadow: inset 0 0 0 1.5px rgba(245, 234, 218, .2), 0 50px 70px -40px #000, 0 0 90px -30px rgba(228, 179, 67, .3); transform: rotate(-3deg); }
.tel-pantalla { height: 100%; border-radius: 27px; overflow: hidden; display: flex; flex-direction: column; background: #F4EEE6; color: #1c1210; font: 500 10px/1.3 var(--f-txt); }
.tel-cab { display: flex; align-items: center; gap: 8px; padding: 18px 12px 11px; color: #fff; background: linear-gradient(120deg, #C1121F, #8E0C15); }
.tel-cab img { width: 28px; height: 28px; border-radius: 8px; background: #fff; }
.tel-cab b { display: block; font: 800 12px/1.1 var(--f-disp); letter-spacing: -.01em; }
.tel-cab small { display: block; margin-top: 2px; font-size: 8.5px; opacity: .9; }
.tel-cats { display: flex; gap: 5px; padding: 9px 10px; background: #fff; border-bottom: 1px solid #e8dfd3; overflow: hidden; white-space: nowrap; }
.tel-cats span { flex: none; padding: 6px 9px; border-radius: 999px; font-weight: 700; font-size: 8.5px; background: #F4EEE6; }
.tel-cats .on { background: #C1121F; color: #fff; }
.tel-lista { list-style: none; margin: 9px 9px 0; padding: 0; flex: 1; background: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 0 0 1px #ebe2d6; overflow: hidden; }
.tel-lista li { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px; border-top: 1px solid #efe7dc; }
.tel-lista li:first-child { border-top: 0; }
.tel-lista li > span { flex: 1; min-width: 0; }
.tel-lista b { display: block; font: 700 10.5px/1.2 var(--f-txt); }
.tel-lista small { display: block; margin-top: 2px; font-size: 8px; color: #7b6c62; }
.tel-lista em { display: block; margin-top: 4px; font: 500 10.5px/1 var(--f-num); font-style: normal; color: #1c1210; }
.tel-lista picture { flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: #e9e0d4; }
.tel-lista img { width: 100%; height: 100%; object-fit: cover; }
.tel-lista i { position: absolute; right: 5px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #C1121F; color: #fff; font: 700 14px/1 var(--f-txt); font-style: normal; box-shadow: 0 0 0 2px #fff; }
.tel-barra { display: flex; justify-content: space-around; padding: 9px 4px 12px; background: #fff; border-top: 1px solid #e8dfd3; font-weight: 700; font-size: 8px; color: #7b6c62; }
.tel-barra span { position: relative; }
.tel-barra .on { color: #C1121F; }
.tel-barra i { position: absolute; left: 100%; top: -5px; margin-left: 1px; min-width: 12px; height: 12px; padding: 0 3px; border-radius: 6px; background: #C1121F; color: #fff; font: 700 8px/12px var(--f-txt); font-style: normal; text-align: center; }
/* las categorías: fichas que abren la app en esa parte de la carta */
.fichas-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-top: clamp(48px, 8vh, 76px); }
.fichas-cab h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.fuente { display: inline-flex; align-items: center; gap: 8px; font: 600 .85rem/1 var(--f-txt); color: var(--humo); }
.fuente i { width: 8px; height: 8px; border-radius: 50%; background: var(--humo2); }
.fuente.viva i { background: var(--jade); box-shadow: 0 0 0 4px rgba(79, 201, 138, .15); }
.fichas { --cols: 2; --g: 10px; display: flex; flex-wrap: wrap; gap: var(--g); margin-top: 20px; }
.ficha { position: relative; flex: 0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols)); min-width: 0; min-height: 70px; display: grid; align-content: center; gap: 4px;
  padding: 12px 38px 12px 16px; border-radius: 16px; text-decoration: none; background: var(--tinta); box-shadow: inset 0 0 0 1px var(--borde);
  transition: transform .3s var(--ease), background-color .2s, box-shadow .2s; }
.ficha b { font: 700 1.02rem/1.2 var(--f-disp); letter-spacing: -.015em; }
.ficha small { font-size: .8rem; line-height: 1.3; color: var(--humo2); }
.ficha small .precio { color: var(--oro-claro); }
.ficha svg { position: absolute; right: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--oro); transition: transform .3s var(--ease); }
.ficha:active { transform: scale(.98); }
@media (hover: hover) {
  .ficha:hover { background: var(--tinta2); box-shadow: inset 0 0 0 1px rgba(228, 179, 67, .5); transform: translateY(-2px); }
  .ficha:hover svg { transform: translateX(4px); }
}
.ficha.todo { flex-grow: 1; background: var(--rojo); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 30px -18px rgba(193, 18, 31, .9); }
.ficha.todo small { color: rgba(255, 255, 255, .85); }
.ficha.todo svg { color: #fff; }
@media (hover: hover) { .ficha.todo:hover { background: var(--rojo-vivo); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 18px 34px -18px rgba(232, 50, 60, .9); } }
@media (min-width: 620px) { .fichas { --cols: 3; } }
@media (min-width: 900px) {
  .app-grid { grid-template-columns: 1.08fr .92fr; gap: 56px; }
  .fichas { --cols: 4; --g: 12px; }
  .telefono { width: clamp(214px, 21vw, 250px); }
  .tel-pantalla { font-size: 11px; }
}
@media (min-width: 1160px) { .fichas { --cols: 5; } }

/* ---- Club Nanjing ---- */
.club { overflow: hidden; border-block: 1px solid var(--borde);
  background: radial-gradient(70% 90% at 88% 12%, rgba(228, 179, 67, .13), transparent 62%), radial-gradient(90% 90% at 0% 100%, rgba(193, 18, 31, .26), transparent 60%), #140c0b; }
.club-grid { display: grid; gap: 36px; align-items: center; }
.club .bajada { max-width: 40ch; }
.club .bajada b { color: var(--crema); }
/* la tarjeta de premios: arriba queda libre el sitio donde el dragón se enrosca a cuidar los puntos */
.club-lado { padding-top: clamp(124px, 34vw, 156px); }
.club-tarjeta { position: relative; padding: 30px 22px 26px; border-radius: 26px; background: linear-gradient(165deg, #2b1612 0%, #190e0c 100%);
  box-shadow: inset 0 0 0 1px rgba(228, 179, 67, .3), 0 40px 70px -44px #000; }
.club-regla { display: flex; align-items: baseline; gap: 12px; max-width: calc(100% - clamp(120px, 36vw, 170px)); font: 800 clamp(1.7rem, 6.4vw, 2.5rem)/1 var(--f-disp); letter-spacing: -.03em; color: var(--oro-claro); white-space: nowrap; }
.club-regla span { color: var(--humo2); font-weight: 600; }
.club-sub { margin-top: 12px; color: var(--humo); font-size: .96rem; max-width: 34ch; }
.premios { list-style: none; margin: 22px 0 0; padding: 0; position: relative; display: grid; gap: 12px; }
.premios::before { content: ''; position: absolute; left: 29px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(180deg, rgba(228, 179, 67, .7), rgba(228, 179, 67, .15)); transform-origin: 50% 0; }
.premios li { position: relative; display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 0; }
.premios .pts { flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 34% 28%, #F9DC8A, #E4B343 58%, #B7862A); color: #2a1a08;
  font: 700 .75rem/1 var(--f-txt); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 0 0 5px #20110e, 0 10px 18px -8px rgba(0, 0, 0, .8), inset 0 -3px 0 rgba(120, 78, 12, .35); }
.premios .pts b { display: block; margin-bottom: 0; font: 800 1.2rem/1 var(--f-disp); letter-spacing: -.03em; }
.premios .premio { font: 700 1.06rem/1.25 var(--f-disp); letter-spacing: -.01em; }
@media (min-width: 900px) {
  .club-grid { grid-template-columns: 1.05fr .95fr; gap: 72px; }
  .club-lado { padding-top: 150px; }
  .club-tarjeta { padding: 34px 30px 28px; }
  .club-regla { max-width: calc(100% - 190px); }
}

/* ---- pedido: mapa con la ruta ---- */
/* la cabecera reserva, junto al título, el carril por donde llega volando el dragón con el pedido */
.pedido-cab { display: grid; gap: 10px; align-items: end; }
.pedido-grid { display: grid; gap: 22px; margin-top: 36px; }
.mapa { position: relative; margin: 0; border-radius: var(--radio); overflow: hidden; background: #1A1210; box-shadow: inset 0 0 0 1px var(--borde); aspect-ratio: 1200 / 1040; }
.mapa svg { width: 100%; height: 100%; }
/* la ruta y la caja que viaja van en su propia capa, encima del mapa de calles */
.mapa .mapa-ruta { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
/* la caja que recorre la ruta aparece cuando el script la pone en marcha (sin movimiento no hay caja) */
#repartidor { visibility: hidden; }
#repartidor.en-ruta { visibility: visible; }
.mapa .ruta { fill: none; stroke: var(--oro); stroke-width: 7; stroke-linecap: round; } /* sin filtro: se redibuja en cada cuadro del scroll */
.mapa .ruta-base { fill: none; stroke: rgba(228, 179, 67, .3); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 14; }
.mapa figcaption { position: absolute; left: 14px; bottom: 12px; font-size: .75rem; color: var(--humo2); }
.tiles { display: grid; gap: 14px; }
.tile { border-radius: var(--radio); padding: 24px 22px; background: var(--tinta); box-shadow: inset 0 0 0 1px var(--borde); }
.tile h3 { font-size: 1.35rem; }
.tile p { color: var(--humo); margin-top: 8px; }
.tile ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.tile li { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.tile li .precio { color: var(--oro-claro); font-size: 1.15rem; }
.enlace-flecha { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; margin-top: 10px; font-weight: 700; color: var(--oro-claro); text-decoration: none; white-space: nowrap; }
.enlace-flecha svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.enlace-flecha:hover svg { transform: translateX(3px); }
.tile.yape { background: linear-gradient(150deg, #5b1a8f 0%, #3a1160 70%); box-shadow: none; }
.tile.yape p { color: #e9dcf5; }
.tile.yape .grande { font: 500 clamp(1.7rem, 5vw, 2.2rem)/1 var(--f-num); color: #fff; margin-top: 12px; letter-spacing: -.02em; }
.pasos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; counter-reset: p; }
.pasos li { position: relative; padding-top: 16px; border-top: 2px solid var(--tinta3); color: var(--humo); }
.pasos li b { display: block; color: var(--crema); font: 800 1.2rem/1.2 var(--f-disp); letter-spacing: -.01em; }
.pedido .acciones { margin-top: 34px; }
@media (min-width: 900px) {
  .pedido-cab { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 40px; }
  .pedido-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; }
  /* el mapa llena su columna y toma el alto de las fichas de al lado (el SVG encuadra con «slice»);
     con aspect-ratio y stretch a la vez, a 1024 px se ensanchaba y tapaba las fichas */
  .mapa { aspect-ratio: auto; min-height: 440px; }
  .mapa > svg { position: absolute; inset: 0; }
  .pasos { grid-template-columns: repeat(4, 1fr); }
}

/* ---- reseñas ---- */
.res-grid { display: grid; gap: 40px; align-items: center; }
.nota-google .enorme { font: 800 clamp(5.5rem, 24vw, 10rem)/.85 var(--f-disp); letter-spacing: -.05em; color: var(--crema); font-variant-numeric: tabular-nums; }
.estrellas { display: flex; gap: 4px; margin-top: 14px; color: var(--oro); }
.estrellas svg { width: 24px; height: 24px; }
.nota-google p.cuantas { margin-top: 10px; color: var(--humo); }
.nota-google .boton { margin-top: 24px; }
.citas { display: grid; gap: 16px; }
.cita { margin: 0; padding: 24px 22px; border-radius: var(--radio); background: var(--tinta); box-shadow: inset 0 0 0 1px var(--borde); }
.cita blockquote { margin: 0; font: 600 clamp(1.1rem, 2.2vw, 1.3rem)/1.4 var(--f-disp); letter-spacing: -.01em; }
.cita figcaption { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--humo2); font-size: .9rem; }
.cita figcaption b { color: var(--crema); font-weight: 700; }
.cita .mini { display: inline-flex; gap: 2px; color: var(--oro); }
.cita .mini svg { width: 14px; height: 14px; }
.cita .mini .apagada { color: var(--tinta3); }
@media (min-width: 900px) { .res-grid { grid-template-columns: .8fr 1.2fr; gap: 72px; } .cita:nth-child(2) { margin-left: 48px; } }

/* ---- visítanos ---- */
.vis-grid { display: grid; gap: 36px; align-items: center; }
.vis-foto { aspect-ratio: 3 / 2; }
.estado { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 16px; border-radius: 22px; background: var(--tinta2); font-weight: 600; line-height: 1.35; text-wrap: balance; }
.estado i { flex: none; }
.estado i { width: 9px; height: 9px; border-radius: 50%; background: var(--humo2); }
.estado.abierto i { background: var(--jade); box-shadow: 0 0 0 4px rgba(79, 201, 138, .16); }
.horario { width: 100%; margin-top: 24px; border-collapse: collapse; font-size: .98rem; }
.horario th { text-align: left; font-weight: 700; padding: 12px 12px 12px 0; vertical-align: top; white-space: nowrap; }
.horario td { padding: 12px 0; color: var(--humo); }
.horario td span { display: block; }
.horario tr + tr th, .horario tr + tr td { border-top: 1px solid rgba(245, 234, 218, .08); }
.horario tr.hoy th, .horario tr.hoy td { color: var(--oro-claro); }
.visitanos .acciones { margin-top: 28px; }
@media (min-width: 900px) { .vis-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } }

/* ---- cierre: la fachada real, y el dragón aterriza en el letrero ---- */
.cierre { position: relative; height: 230vh; }
.cierre .escena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; background: #0b0706; }
.cierre .marco { position: relative; width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 899px) {
  /* (la barra ya no se esconde al bajar: el cuadro del letrero empieza debajo de ella) */
  .cierre .escena { display: flex; flex-direction: column; justify-content: center; gap: 30px; padding-top: 88px; }
  .cierre .velo { display: none; } /* (en celular no pinta nada, pero como hijo del flex sumaba otro hueco) */
  .cierre .cierre-texto { position: relative; padding-bottom: 0; }
  .cierre .marco { box-shadow: 0 30px 60px -20px #000; aspect-ratio: 1 / 1; width: min(100%, 52svh); margin-inline: auto; border-radius: 6px; overflow: hidden; }
}
.cierre .marco img, .cierre .marco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cierre video, .cierre .c-fin { opacity: 0; transition: opacity .5s; }
.cierre.video-fallo .c-fin { opacity: 1; }
.cierre.video-listo video { opacity: 1; }
.cierre .fondo-borroso { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none; object-fit: cover; filter: blur(30px) brightness(.35); transform: scale(1.1); }
.cierre .cierre-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 40px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.cierre .cierre-texto.fuera { opacity: 0; transform: translateY(24px); pointer-events: none; }
/* con el teclado: si el foco entra en sus enlaces, el texto se muestra aunque el scroll no haya llegado */
.cierre .cierre-texto.fuera:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.cierre .cierre-texto p { margin-top: 14px; color: #E6D9C7; font-size: 1.1rem; max-width: 36ch; }
.cierre .cierre-texto .acciones { margin-top: 24px; }
.cierre .cierre-texto p.cierre-club { margin-top: 18px; max-width: 44ch; font-size: .98rem; color: var(--humo); }
.cierre .cierre-club a { color: var(--oro-claro); font-weight: 700; }
/* celular: el cuadro del letrero y, debajo, el texto (en flujo; la regla de arriba lo dejaba absoluto
   encima del video). El cuadro se achica en pantallas bajas para que todo quepa. */
@media (max-width: 899px) {
  .cierre .cierre-texto { position: relative; left: auto; right: auto; bottom: auto; padding-bottom: 0; }
  .cierre .marco { flex: none; width: min(100%, max(210px, calc(100svh - 440px))); }
  /* celulares muy bajos (menos de ~660 px visibles): el cuadro quedaba aplastado en una franja de 40 px.
     Sin sitio para él, queda el texto sobre el fondo borroso de la fachada. */
  @media (max-height: 659px) { .cierre .marco { display: none; } }
}
@media (min-width: 900px) {
  .cierre .marco { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; height: 100%; transform-origin: 50% 0; }
  /* al final el pie empuja la escena: el cuadro se aleja desde arriba (ver 02-rebobinado.js) y el
     letrero con el dragón siguen a la vista sobre el texto; el fondo borroso rellena los lados */
  .cierre .marco img, .cierre .marco video { object-position: 50% 0; }
  /* el dragón se posa con las puntas de los cuernos al 1 % del alto del cuadro: el cuadro baja lo justo
     para que queden 14 px por debajo de la barra (arriba asoma el fondo borroso) y su borde se funde
     en 8 px. Las mismas medidas usa 02-rebobinado.js para acomodarlo cuando sube el pie. */
  .cierre { --baja: clamp(0px, calc(90px - 1vh), 86px); }
  .cierre .marco img, .cierre .marco video { top: var(--baja);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8px); mask-image: linear-gradient(180deg, transparent 0, #000 8px); }
  .cierre .velo { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 7, 6, .92) 0%, rgba(12, 7, 6, .45) 34%, rgba(12, 7, 6, 0) 60%); pointer-events: none; }
  .cierre .cierre-texto { max-width: var(--ancho); margin: 0 auto; padding-bottom: 56px; }
  /* el título del cierre cabe en una línea también cuando dice «Abrimos mañana a las 11:30 a. m.», y la
     bajada y la invitación al club van a lo ancho: así queda sitio para el letrero cuando sube el pie */
  .cierre .cierre-texto h2 { font-size: clamp(2.3rem, 5vw, 3.9rem); }
  .cierre .cierre-texto p, .cierre .cierre-texto p.cierre-club { max-width: 72ch; }
  /* ventanas bajas (laptops a 1366x768 o 1280x720 con la barra del navegador: 600 a 700 px útiles): el
     texto del cierre y el pie se compactan para que, al llegar al fondo, el título no quede bajo la barra */
  @media (max-height: 700px) {
    .cierre .cierre-texto { padding-bottom: 26px; }
    .cierre .cierre-texto h2 { font-size: clamp(2rem, 3.6vw, 2.7rem); }
    .cierre .cierre-texto p { margin-top: 10px; font-size: 1rem; }
    .cierre .cierre-texto .acciones { margin-top: 16px; }
    .cierre .cierre-texto .boton { min-height: 46px; }
    .cierre .cierre-texto p.cierre-club { margin-top: 12px; font-size: .92rem; }
  }
  @media (max-height: 560px) { .cierre #cierre-bajada { display: none; } }
}

/* ---- pie ---- */
.pie { padding: 64px 0 calc(env(safe-area-inset-bottom, 0px) + 40px); border-top: 1px solid var(--borde); background: #0c0807; }
.pie-grid { display: grid; gap: 28px; }
.pie .marca { display: flex; align-items: center; gap: 12px; font: 800 1.3rem/1 var(--f-disp); color: var(--crema); }
.pie .marca img { width: 56px; height: 56px; border-radius: 50%; }
.pie p, .pie li { color: var(--humo); font-size: .95rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pie a { color: var(--crema); }
/* donde se toca con el dedo, cada enlace del pie tiene 44 px de alto (el texto medía 18) */
@media (max-width: 899px), (pointer: coarse) {
  .pie ul { gap: 0; }
  .pie li > a { display: inline-flex; align-items: center; min-height: 44px; }
  .pie li > b { display: block; padding: 6px 0 4px; }
  .pie ul#horario-pie li + li { padding: 4px 0; }
}
.pie .legal { margin-top: 36px; font-size: .82rem; color: var(--humo2); }
@media (min-width: 900px) { .pie-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
/* ventanas bajas de escritorio: el pie también se compacta (va junto con el texto del cierre: entre los
   dos dejan el título del cierre por debajo de la barra cuando se llega al fondo de la página) */
@media (min-width: 900px) and (max-height: 700px) {
  .pie { padding: 32px 0 20px; }
  .pie .legal { margin-top: 18px; }
}

/* ---- entradas ---- */
html.js .revela { opacity: 0; transform: translateY(26px); }
html.js .revela.visto { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform 1s var(--ease); }

/* ---- sin movimiento: todo quieto y legible ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .heroe { height: auto; }
  .heroe .escena { position: relative; height: 100svh; }
  .heroe video { display: none; }
  .heroe .poster-fin { opacity: 1; }
  .banda.fuera { display: none; }
  .cierre { height: auto; }
  .cierre .escena { position: relative; height: auto; min-height: 100svh; }
  .cierre video { display: none; }
  .cierre .c-fin { opacity: 1; }
  html.js .revela { opacity: 1; transform: none; }
}

/* ---- sin JavaScript: nada de escenas largas ni anillos de carga ---- */
html:not(.js) .heroe, html:not(.js) .cierre { height: auto; }
html:not(.js) .heroe .escena, html:not(.js) .cierre .escena { position: relative; min-height: 100svh; }
html:not(.js) .anillo { display: none; }
html:not(.js) .cierre .c-fin { opacity: 1; }

/* ================= el dragón por estaciones =================
 * Son renders con fondo transparente (assets/ia/dragon), no un lienzo 3D. En cada sección el dragón
 * tiene un sitio RESERVADO en la maquetación: nunca flota encima de un título, un precio o un botón.
 * Tres capas, cada una con su propio transform para que no se pisen:
 *   .dg-entra  entrada y salida ligadas al scroll (GSAP, 03-escena.js)
 *   .dg-flota  flotación en reposo (CSS, solo mientras está a la vista)
 *   .dg-toca   reacción al pasar el cursor o tocar (GSAP)
 * Solo se animan transform y opacity. Sin JS, sin GSAP o con movimiento reducido: la pose quieta. */
.dragon { position: relative; pointer-events: none; }
.dg-entra, .dg-flota, .dg-toca, .dg-espejo { position: relative; display: block; }
.dg-toca { transform-origin: 50% 88%; }
.dragon img { display: block; width: 100%; height: auto; max-width: none; -webkit-user-drag: none; user-select: none; }
.dg-img { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Nada de filter: drop-shadow en lo que se mueve (se recalcula en cada cuadro en un celular modesto).
   Los que están de pie llevan su sombra en el piso: un óvalo fijo que NO flota con ellos. */
.dg-chef .dg-entra::before, .dg-guia .dg-entra::before { content: ''; position: absolute; left: 4%; right: 28%; bottom: -3.5%; height: 12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.dg-guia .dg-entra::before { left: 26%; right: 4%; }
.dragon.activa .dg-entra { will-change: transform, opacity; }
@keyframes dg-flota { from { transform: translate3d(0, -5px, 0) rotate(-.7deg); } to { transform: translate3d(0, 6px, 0) rotate(.7deg); } }
@keyframes dg-planea { from { transform: translate3d(0, -7px, 0) rotate(-1.2deg); } to { transform: translate3d(0, 8px, 0) rotate(1deg); } }
@keyframes dg-pendulo { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
@keyframes dg-parpado { 0%, 93%, 100% { opacity: 0; } 94.5%, 97% { opacity: 1; } }
html.mov .dragon.viva .dg-flota { animation: dg-flota 3.4s ease-in-out infinite alternate; }

/* ---- sazón: el cocinero, a la derecha y por debajo del ticket. Solo la punta de la cola queda
   detrás del papel (el ticket le tapa, como mucho, el 23 % izquierdo, donde el render no tiene cara) ---- */
.dg-chef { position: absolute; z-index: 1; right: -8px; bottom: -6px; width: min(50%, 200px); }
.dg-llama, .dg-chispas { position: absolute; pointer-events: none; opacity: 0; }
.dg-llama { left: 70%; top: 27%; width: 30% !important; transform-origin: 50% 96%; }
.dg-chispas { left: 62%; top: 4%; width: 40% !important; }
@media (min-width: 900px) { .dg-chef { width: 228px; right: -10px; } }
@media (min-width: 1200px) { .dg-chef { width: 300px; right: -14px; } }

/* ---- la app: saluda junto al teléfono, con la mano hacia la pantalla ---- */
.dg-guia { position: absolute; z-index: 2; right: 0; bottom: -3%; width: 46%; max-width: 236px; }
html.mov .dragon.dg-guia.viva .dg-flota { animation-duration: 3.9s; }

/* ---- club: enroscado sobre el borde de la tarjeta, cuidando los puntos ---- */
.dg-tesoro { position: absolute; z-index: 2; right: 14px; bottom: calc(100% - 30px); width: clamp(128px, 36vw, 172px); }
html.mov .dragon.dg-tesoro.viva .dg-flota { animation-duration: 4.4s; }
@media (min-width: 900px) { .dg-tesoro { right: 22px; width: 190px; bottom: calc(100% - 36px); } }

/* ---- pedido: llega volando con la caja del delivery. El render mira a la derecha; aquí va en
   espejo para que vuele hacia el texto y no de espaldas. La caja cuelga de las patas delanteras. ---- */
/* (el margen de arriba es parte de su sitio: al planear y al dar el aletazo sube unos 25 px) */
.dg-vuelo { justify-self: end; width: min(76%, 320px); aspect-ratio: 1132 / 668; margin-top: 30px; }
.dg-espejo { transform: scaleX(-1); }
.dg-caja { position: absolute; z-index: -1; left: 58.6%; top: 90%; width: 12.4% !important; transform-origin: 50% 4%; }
html.mov .dragon.dg-vuelo.viva .dg-flota { animation: dg-planea 2.9s ease-in-out infinite alternate; }
html.mov .dragon.dg-vuelo.viva .dg-caja { animation: dg-pendulo 1.45s ease-in-out infinite alternate; }
@media (min-width: 900px) { .dg-vuelo { width: 100%; max-width: 400px; margin-top: 0; } }

/* ---- historia: se asoma por detrás de la foto del mural (de ahí salió). La caja recorta todo lo
   que queda por debajo del borde de la foto, así sube «desde adentro». ---- */
.dg-asoma { position: absolute; z-index: 0; right: 7%; bottom: calc(100% - 2px); width: clamp(96px, 58%, 150px); aspect-ratio: 403 / 318; overflow: hidden; }
.dg-parpado { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
html.mov .dragon.dg-asoma.viva .dg-parpado { animation: dg-parpado 4.6s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .dragon .dg-flota, .dragon .dg-caja, .dragon .dg-parpado { animation: none !important; }
}