/* ============================================================
   THE PLAN B RESTOBAR — amarillo sobre negro
   ------------------------------------------------------------
   Ratios de contraste calculados con la fórmula WCAG, no estimados.
   Sobre la base #0B0B0B:
     #FFC300 amarillo → 12.24:1  (AAA)
     #FF9500 ámbar    →  8.95:1  (AAA)
     #FFFFFF blanco   → 19.68:1  (AAA)
     #A39B8E apagado  →  7.16:1  (AAA)  · sobre --surface: 6.68:1
     #E63946 rojo     →  4.72:1  (AA)   · solo para la etiqueta "picante"

   El amarillo también funciona AL REVÉS: #FFC300 de fondo con texto
   #0B0B0B encima da los mismos 12.24:1. Por eso los botones amarillos
   llevan texto negro, y por eso el combo real puede invertirse entero.

   El negro casi puro se eligió sobre el azul marino anterior porque
   sube el margen de contraste de todo (el navy daba 6.70:1 al naranja,
   este da 8.95:1 al ámbar) y porque un vídeo de fuego compuesto con
   mix-blend-mode:screen necesita negro real debajo para que el fondo
   del vídeo desaparezca del todo.
   ============================================================ */

:root{
  /* Tres niveles de negro. La "superficie" se construye con estos
     escalones cálidos, no con bordes: el salto de luminancia es lo que
     hace que una tarjeta se lea como levantada del fondo. */
  --bg:#0B0B0B;
  --bg-rgb:11,11,11;       /* el mismo negro para rgba(): cambiar la base
                              es una línea, no una búsqueda por el archivo */
  --surface:#161412;
  --surface-2:#211E19;

  --yellow:#FFC72C;        /* amarillo vivo */
  --yellow-deep:#E0A800;   /* degradados y profundidad */
  --amber:#FFB000;         /* acento secundario cálido */
  /* Único color de alarma: picante. Era #E63946, pero con texto blanco
     encima daba 4.17:1 y la etiqueta va a 9.6px — texto pequeño, así que
     el mínimo es 4.5. Este rojo más profundo da 4.97:1 y además convive
     mejor con el ámbar de la paleta. */
  --red:#D62839;

  --text:#FFFFFF;
  --muted:#A39B8E;         /* gris cálido, no frío: sobre negro un gris
                              azulado se lee apagado y fuera de tono */
  --on-bright:#0B0B0B;     /* texto sobre amarillo/ámbar */

  /* Alias de la paleta anterior. Se quedan para que nada que aún
     referencie --gold o --orange se rompa en silencio. */
  --gold:var(--yellow);
  --orange:var(--amber);

  --maxw:1200px;
  --pad:clamp(1.25rem, 5vw, 4rem);
  --radius:14px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

/* NO poner scroll-behavior:smooth aquí.
   ScrollTrigger.refresh() mide así: guarda el scroll → salta a 0 → mide →
   restaura. Con smooth, ese salto a 0 es una animación y no ha ocurrido
   cuando toca medir, así que todo se mide relativo al viewport en vez de
   al documento: el start del pin salía como (posición - scrollY) y "La
   Noche" dejaba de engancharse tras cualquier refresh.
   El scroll suave de los enlaces del nav se hace en animations.js con
   scrollIntoView({behavior:'smooth'}), que es una llamada puntual y no
   secuestra los saltos internos de ScrollTrigger. */

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* NO poner overflow-x:hidden aquí.
     Por spec, si un eje deja de ser `visible` el otro pasa a `auto`: el
     body se convierte en contenedor de scroll y ScrollTrigger deja de
     saber quién scrollea. Efecto medido: tras cada refresh() calculaba
     el start del pin relativo al viewport en vez de al documento
     (start = 4505 - scrollY), y el pin de "La Noche" no enganchaba.
     Acertaba solo en la carga inicial, cuando scrollY todavía era 0.
     Aquí no hay desbordamiento horizontal (scrollWidth == clientWidth),
     así que la regla sobraba. Si algún día hiciera falta contenerlo,
     `overflow-x: clip` recorta sin crear contenedor de scroll. */
}

/* Sin grano global: una textura repetida en toda la página se siente como
   un filtro automático y ensucia las fotos. La profundidad se construye
   por escena con luz, sombra y reflejo controlados. */

img{max-width:100%;display:block}

h1,h2,h3{
  font-family:'Anton',Impact,'Arial Black',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:.95;
  margin:0;
}

a{color:inherit}

::selection{background:var(--orange);color:var(--on-bright)}

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* Fuera de pantalla por arriba, no por la izquierda: sin overflow-x:hidden
   conteniéndolo, un left:-9999px puede generar área scrolleable. */
.skip-link{
  position:fixed;left:0;top:0;z-index:999;
  transform:translateY(-120%);
  background:var(--gold);color:var(--on-bright);
  padding:.75rem 1.25rem;font-weight:700;text-decoration:none;
  transition:transform .2s var(--ease-out);
}
.skip-link:focus{transform:translateY(0)}

/* ─────────── NAV ─────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:1.5rem;
  min-height:88px;padding:.85rem var(--pad);
  background:rgba(11,11,11,.97);
  border-bottom:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(14px);
  transition:background .35s var(--ease-out), backdrop-filter .35s var(--ease-out), padding .35s var(--ease-out);
}
.nav.is-stuck{
  background:rgba(11,11,11,.98);
  backdrop-filter:blur(18px);
  padding-block:.6rem;
}
.nav__brand{
  display:flex;align-items:center;justify-content:center;
  width:96px;height:58px;margin-right:auto;text-decoration:none;
}
.nav__brand img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  filter:drop-shadow(1px 0 0 rgba(255,167,0,.45)) drop-shadow(-1px 0 0 rgba(116,10,28,.78)) drop-shadow(0 5px 9px rgba(0,0,0,.65));
}
.nav__links{display:flex;gap:1.5rem}
.nav__links a{
  text-decoration:none;font-size:.96rem;font-weight:700;color:rgba(255,255,255,.84);
  text-shadow:none;transition:color .2s;
}
.nav__link--button{
  appearance:none;border:0;background:none;padding:0;
  font:inherit;font-size:.96rem;font-weight:700;color:rgba(255,255,255,.84);
  cursor:pointer;text-transform:none;
}
.nav__link--button:hover{color:var(--yellow);text-shadow:0 0 12px rgba(255,244,196,.42)}
.nav__links a:hover{color:var(--yellow);text-shadow:0 0 12px rgba(255,244,196,.42)}
.nav > .btn--gold{background:var(--yellow);color:var(--on-bright);border-color:var(--yellow);box-shadow:0 7px 24px rgba(255,195,0,.24)}
.nav > .btn--gold:hover{
  background:#ffd633;color:var(--on-bright);border-color:#ffd633;
  box-shadow:0 7px 24px rgba(255,195,0,.3);
}

/* ── Nav móvil ──
   Antes esto era `display:none` a secas: bajo 720px no había NINGUNA forma
   de navegar, y el tráfico viene del bio de Instagram, o sea casi todo
   móvil. Ahora colapsa a un panel desplegable. */
.nav__toggle{
  display:none;
  background:none;border:0;cursor:pointer;padding:.5rem;
  width:44px;height:44px;   /* objetivo táctil mínimo */
}
.nav__toggle span{
  display:block;width:22px;height:2px;margin:4px auto;
  background:var(--text);border-radius:2px;
  transition:transform .3s var(--ease-out), opacity .2s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:720px){
  .nav__toggle{display:block;order:3}
  .nav__links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
  background:#3a0915;backdrop-filter:none;
    border-top:1px solid rgba(255,255,255,.08);
    /* visibility además de opacity: sin ella los enlaces siguen siendo
       tabulables con el panel cerrado. */
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s .25s;
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav__links a,.nav__link--button{display:block;width:100%;padding:1rem var(--pad);border-bottom:1px solid rgba(255,255,255,.05);text-align:left}
}

/* ─────────── BOTONES ─────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 1.6rem;border-radius:999px;
  font-weight:700;font-size:.95rem;text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:transform .22s var(--ease-out), background .22s, color .22s, border-color .22s;
}
/* Texto #0B0B0B sobre ámbar: 8.95:1 — AAA. Blanco daría 2.30:1. */
.btn--orange{background:var(--amber);color:var(--on-bright)}
.btn--orange:hover{background:#ffab33}
/* Texto #0B0B0B sobre amarillo: 12.24:1 — AAA */
.btn--gold{background:var(--gold);color:var(--on-bright)}
.btn--gold:hover{background:#ffd633}
.btn--ghost{background:transparent;color:var(--text);border-color:rgba(255,255,255,.35)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--sm{padding:.55rem 1.1rem;font-size:.85rem}
.btn--lg{padding:1.05rem 2rem;font-size:1.05rem}
.btn--full{width:100%;margin-top:auto}
@media (hover:hover){ .btn:hover{transform:translateY(-2px)} }
.btn:active{transform:translateY(0)}

/* ─────────── HERO VIDEO CINEMÁTICO ───────────
   El video hace el trabajo de atmósfera. El texto queda limpio y el único
   movimiento adicional lo controla hero-video.js con ScrollTrigger: un
   zoom muy lento y una salida al avanzar hacia la carta. */
.hero-video{
  position:relative;isolation:isolate;height:100svh;min-height:38rem;
  overflow:hidden;background:#160006;color:#fff;
}
.hero-video__media,.hero-video__veil{
  position:absolute;inset:0;width:100%;height:100%;
}
.hero-video__media{
  z-index:0;object-fit:cover;object-position:center;
  filter:saturate(.86) contrast(1.12) brightness(.56);
  transform:scale(1.03);will-change:transform;
}
.hero-video__veil{
  z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(9,0,3,.82) 0%,rgba(31,0,8,.42) 42%,rgba(12,0,3,.18) 100%),
    linear-gradient(180deg,rgba(7,0,2,.36) 0%,rgba(14,0,4,.04) 44%,rgba(7,0,2,.72) 100%);
  will-change:opacity;
}
.hero-video__copy{
  position:absolute;z-index:2;left:var(--pad);top:50%;
  width:min(42rem,74vw);transform:translateY(-50%);
  text-shadow:0 .2rem 1.8rem rgba(0,0,0,.58);
  will-change:transform,opacity;
}
.hero-video__title{
  font-family:'Bodoni Moda',Georgia,serif;
  font-size:clamp(3.4rem,7.2vw,7.4rem);font-weight:600;
  line-height:.86;letter-spacing:-.06em;color:#fff4df;
}
.hero-video__title em{color:var(--yellow);font-style:normal;}
.hero-video__subline{
  margin:1.7rem 0 0;color:rgba(255,245,230,.84);
  font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.4;
}
.hero-video__cta{
  display:inline-flex;margin-top:1.65rem;padding:.85rem 1.35rem;
  border:1px solid rgba(255,199,44,.76);border-radius:999px;
  color:var(--yellow);font-size:.84rem;font-weight:800;
  letter-spacing:.08em;text-decoration:none;text-transform:uppercase;
  transition:background .25s,color .25s,transform .25s;
}
.hero-video__cta:hover{background:var(--yellow);color:var(--on-bright);transform:translateY(-2px);}
@media (max-width:720px){
  .hero-video{min-height:38rem;}
  .hero-video__media{object-position:58% center;}
  .hero-video__copy{left:1.25rem;right:1.25rem;top:54%;width:auto;}
  .hero-video__title{font-size:clamp(3.1rem,14vw,5.4rem);}
  .hero-video__subline{font-size:.95rem;margin-top:1.35rem;}
}
@media (prefers-reduced-motion:reduce){
  .hero-video__media{transform:none;}
}

/* ─────────── HERO ─────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;place-items:stretch;
  padding:5.5rem var(--pad) 0;
  overflow:clip;
  isolation:isolate;
  background:#210006;
  color:#fff;
}
.hero--crust::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-conic-gradient(from 246deg at 62% 54%,rgba(255,46,44,.018) 0deg 2.5deg,transparent 2.5deg 15deg),
    radial-gradient(ellipse at 70% 54%,rgba(188,16,30,.72) 0%,rgba(119,5,16,.76) 27%,rgba(49,0,8,.94) 66%,transparent 82%),
    linear-gradient(180deg,#180004 0%,#41020b 54%,#1b0005 100%);
}
.hero__crust-grid{position:absolute;inset:0;height:auto;z-index:0;opacity:.9;pointer-events:none;background:linear-gradient(180deg,#180004 0%,#39020b 48%,#210006 100%);overflow:hidden}
.hero__crust-grid::before{content:'';position:absolute;left:-7%;right:-7%;bottom:-7%;height:59%;background:linear-gradient(180deg,rgba(24,0,4,1) 0%,rgba(24,0,4,.72) 14%,rgba(24,0,4,.1) 38%,rgba(9,0,3,.08) 100%),url('assets/hero/plan-b-hero-floor.png') center bottom/cover no-repeat;filter:contrast(1.16) saturate(1.18) brightness(1.04);opacity:.98;transform:perspective(850px) rotateX(7deg) scale(1.06);transform-origin:center bottom;box-shadow:0 -2.2rem 5rem rgba(255,27,38,.2);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 100%)}
.hero__crust-grid::after{content:'';position:absolute;left:18%;right:-8%;bottom:3%;height:52%;background:radial-gradient(ellipse at 65% 70%,rgba(255,58,39,.26) 0%,rgba(205,8,26,.13) 26%,transparent 70%);filter:blur(22px);transform:skewX(-8deg)}
.hero__carousel{position:relative;z-index:1;width:min(1180px,100%);min-height:calc(100svh - 5.5rem);margin:0 auto}
.hero-slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.88fr) minmax(24rem,1.55fr);align-items:stretch;gap:clamp(1rem,4vw,4rem);opacity:0;visibility:hidden;pointer-events:none}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.hero-slide__copy{position:relative;z-index:2;align-self:center;width:min(100%,34rem);margin-top:clamp(3rem,8vh,6rem);padding-left:0}
.hero-slide__title{margin:0;font-family:'Anton','Arial Narrow',Impact,sans-serif;font-size:clamp(6.7rem,12.8vw,12.6rem);font-weight:400;line-height:.96;letter-spacing:.018em;word-spacing:.04em;transform:scaleX(.9);transform-origin:left center;text-transform:uppercase;text-shadow:0 .055em 0 rgba(91,0,11,.62)}
.hero-slide__title em{font-style:normal;color:var(--gold)}
.hero-slide__text{max-width:26rem;margin:2rem 0 1.65rem;color:rgba(255,247,236,.96);font-size:1.2rem;line-height:1.34;letter-spacing:0;text-transform:none;font-weight:500;text-shadow:0 1px 0 rgba(116,0,15,.3)}
.hero-slide__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.hero-slide__cta{position:relative;display:inline-flex;align-items:center;gap:1rem;min-width:24rem;min-height:4.45rem;padding:.85rem 2.35rem;border:0;border-radius:999px;color:#fff;text-decoration:none;font-family:'Anton','Arial Narrow',sans-serif;font-size:1.45rem;font-weight:400;letter-spacing:.02em;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s}
.hero-slide__cta-plus{display:grid;place-items:center;width:3.1rem;height:3.1rem;border:0;border-radius:50%;background:var(--on-bright);color:var(--amber);font-family:Inter,sans-serif;font-size:2.1rem;font-weight:500;line-height:1}
.hero-slide__cta-label{position:relative;z-index:1;color:inherit}
.hero-slide__cta--primary{background:var(--amber);color:var(--on-bright);box-shadow:0 10px 26px rgba(255,148,15,.16)}
.hero-slide__cta--primary .hero-slide__cta-plus{border-color:rgba(11,11,11,.48)}
.hero-slide__cta:hover{transform:translateY(-2px)}
.hero-slide__cta--primary:hover{background:#ffab33;color:var(--on-bright)}
.hero-slide__cta.is-added{background:#fff7ec;color:#970817}
.hero-slide__cta.is-added:hover{background:#fff7ec;color:#970817}
.hero-slide__visual{position:relative;height:100%;min-height:20rem;display:flex;align-items:flex-end;justify-content:flex-end;overflow:visible;padding-bottom:0}
.hero-slide__visual::before{content:'';display:block;position:absolute;left:13%;right:-4%;bottom:1%;height:24%;z-index:0;border-radius:50%;background:radial-gradient(ellipse at 57% 65%,rgba(255,57,43,.52) 0%,rgba(193,5,24,.24) 23%,transparent 68%);filter:blur(16px);transform:scaleX(1.08)}
.hero-slide__visual::after{content:'';position:absolute;left:5%;right:-5%;bottom:0;height:16%;z-index:0;border-radius:50%;background:radial-gradient(ellipse at 57% 62%,rgba(0,0,0,.9) 0%,rgba(38,0,7,.6) 25%,transparent 70%);filter:blur(10px);opacity:.98;transform:scaleX(1.08)}
.hero-slide__visual img{position:relative;z-index:1;width:min(104%,740px);height:96%;object-fit:contain;object-position:center bottom;filter:contrast(1.06) saturate(1.08) drop-shadow(0 1.4rem 1.4rem rgba(0,0,0,.55));transform:translateY(-2rem) rotate(0deg);will-change:transform,opacity}
.hero-slide[data-hero-slide="0"] .hero-slide__visual img{width:min(122%,880px);margin-right:-10rem;margin-bottom:-1.5rem;transform:translate(4rem,-3.5rem) rotate(0deg) scale(1.17);transform-origin:center bottom}
.hero-slide[data-hero-slide="2"] .hero-slide__visual::before{left:27%;right:2%;bottom:2%;height:18%;background:radial-gradient(ellipse at 52% 66%,rgba(255,70,42,.58) 0%,rgba(193,5,24,.25) 28%,transparent 70%)}
.hero-slide[data-hero-slide="2"] .hero-slide__visual::after{left:29%;right:5%;bottom:1%;height:11%;background:radial-gradient(ellipse at 52% 62%,rgba(0,0,0,.95) 0%,rgba(38,0,7,.58) 30%,transparent 72%)}
.hero-slide__visual--promo{isolation:isolate}
.hero-slide__visual--promo .hero-promo-glass{position:absolute;width:min(66%,450px);height:92%;object-fit:contain;will-change:transform,opacity}
.hero-slide__visual--promo .hero-promo-glass--back{z-index:1;right:-1%;top:0;transform:translateY(-1.5rem) rotate(0deg) scale(.96);opacity:.92;filter:contrast(1.04) saturate(1.08) drop-shadow(0 1.2rem 1.2rem rgba(0,0,0,.46))}
.hero-slide__visual--promo .hero-promo-glass--front{z-index:2;left:8%;top:2%;transform:translateY(-1.5rem) rotate(0deg) scale(1.06);filter:contrast(1.08) saturate(1.1) drop-shadow(0 1.6rem 1.5rem rgba(0,0,0,.58))}
@media (max-width:720px){
  .hero{padding:6.4rem 1rem 4.4rem;min-height:100svh}
  .hero__carousel{min-height:78svh;margin-top:1.2rem}
  .hero-slide{grid-template-columns:1fr;align-content:center;gap:0}
  .hero-slide__copy{padding:0 1rem;align-self:end;margin-top:0;margin-bottom:-2rem}
  .hero-slide__title{font-size:clamp(5rem,23vw,8rem)}
  .hero-slide__text{margin:.9rem 0 1.1rem;max-width:18rem;font-size:.82rem}
  .hero-slide__actions{gap:.5rem}
  .hero-slide__cta{min-width:0;min-height:2.5rem;padding:.65rem .9rem;font-size:.62rem;letter-spacing:.03em}
  .hero-slide__visual{height:44svh;min-height:16rem;align-self:start;margin-top:-1rem}
  .hero-slide__visual img{width:min(88%,380px);height:100%;margin-right:0;transform:translateY(-1rem) rotate(0deg)}
  .hero-slide[data-hero-slide="0"] .hero-slide__visual img{width:min(100%,430px);margin-right:-1.5rem;transform:translateY(-2rem) rotate(0deg) scale(1.08)}
  .hero-slide__visual--promo .hero-promo-glass{width:min(58%,245px);height:100%}
  .hero-slide__visual--promo .hero-promo-glass--back{right:13%;top:0;transform:translateY(-1rem) rotate(0deg) scale(.88)}
  .hero-slide__visual--promo .hero-promo-glass--front{left:17%;top:5%;transform:translateY(-1rem) rotate(0deg) scale(.98)}
  .hero-slide__visual::before{width:clamp(13rem,62vw,20rem);height:clamp(13rem,62vw,20rem)}
  .hero-slide__visual::after{left:8%;right:4%;bottom:5%;height:12%}
}

@media (prefers-reduced-motion:reduce){
  .hero-slide{position:relative;display:none;opacity:1;visibility:visible}.hero-slide.is-active{display:grid}
}

/* ─────────── CARTA INTERNA ─────────── */
/* La cuadrícula antigua queda como fuente de datos para no duplicar los 89
   productos. La experiencia pública se abre desde el encabezado y se pinta
   en #menuView con capítulos verticales y carriles horizontales. */
#carta{display:none}

/* La carta se convierte en una escena independiente: el hero no debe
   transparentarse ni competir visualmente mientras el panel está abierto. */
body.menu-is-open> .nav,
body.menu-is-open> main> *:not(#menuView),
body.menu-is-open> footer,
body.menu-is-open> .cart-fab{
  visibility:hidden!important;
  pointer-events:none!important;
}
body.menu-is-open> main> #menuView{
  visibility:visible!important;
  pointer-events:auto!important;
}

.menu-view[hidden],.menu-detail[hidden],.menu-list-view[hidden],.menu-landing[hidden]{display:none}
.menu-view{
  position:fixed;inset:0;z-index:9999;overflow:hidden;
  isolation:isolate;color:var(--text);background:#160106 url("assets/hero/plan-b-hero-floor.png") center top/cover fixed no-repeat;
  opacity:0;visibility:hidden;transform:translateY(18px);
  transition:opacity .36s var(--ease-out),transform .36s var(--ease-out),visibility 0s .36s;
}
.menu-view.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu-view__backdrop{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,0,2,.35),rgba(13,0,4,.18) 35%,rgba(4,0,2,.48) 100%)}
.menu-view__shell{position:relative;z-index:1;height:100%;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--pad) 5rem}
.menu-view__bar{display:flex;align-items:center;gap:2rem;max-width:none;min-height:76px;margin:0 calc(var(--pad) * -1);padding:0 var(--pad);background:rgba(6,6,6,.92);border-bottom:1px solid rgba(255,255,255,.08)}
.menu-view__brand{display:flex;width:96px;height:56px;margin-right:auto;align-items:center}
.menu-view__brand img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.menu-view__bar nav{display:flex;align-items:center;gap:1.7rem}
.menu-view__bar nav a,.menu-view__bar nav .is-current{color:rgba(255,247,236,.72);font-size:.78rem;font-weight:700;letter-spacing:.13em;text-decoration:none;text-transform:uppercase}
.menu-view__bar nav a:hover,.menu-view__bar nav .is-current{color:var(--yellow)}
.menu-view__reserve{padding:.65rem 1rem;border:1px solid var(--yellow);border-radius:999px;color:var(--yellow);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;white-space:nowrap}
.menu-view__reserve:hover{background:var(--yellow);color:var(--on-bright)}
.menu-view__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(15rem,.72fr) auto;align-items:end;gap:clamp(1.5rem,4vw,4rem);max-width:var(--maxw);margin:clamp(2rem,3.5vw,3.2rem) auto clamp(1.8rem,3vw,2.8rem);padding:clamp(1.4rem,2.5vw,2.3rem) 0;border-bottom:1px solid rgba(255,255,255,.16)}
.menu-view__headline{min-width:0}
.menu-view__eyebrow{margin:0 0 .75rem;color:var(--yellow);font-size:.78rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase}
.menu-view__head h1{font-family:'Bodoni Moda',Georgia,serif;font-size:clamp(4.2rem,9.5vw,8.4rem);font-weight:600;line-height:.78;letter-spacing:-.055em;white-space:nowrap;color:#fff6e6;text-shadow:.055em .06em 0 rgba(125,0,18,.72);transform:scaleX(.86);transform-origin:left bottom}
.menu-view.is-list-open .menu-view__head{display:flex;align-items:center;justify-content:flex-end;min-height:3.8rem;margin:1.2rem auto 0;padding:.35rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.menu-view.is-list-open .menu-view__headline,.menu-view.is-list-open .menu-view__aside{display:none}
.menu-view.is-list-open .menu-view__close{width:2.4rem;height:2.4rem;font-size:1.1rem}
.menu-view__aside{align-self:end;max-width:20rem;padding-bottom:.35rem}
.menu-view__aside-title{margin:0 0 .8rem;color:#fff6e6;font-size:1rem;font-weight:800;letter-spacing:.26em;line-height:1.35;text-transform:uppercase}
.menu-view__intro{max-width:31rem;margin:0;color:rgba(255,247,236,.72);font-size:.94rem;line-height:1.55}
.menu-view__close{display:grid;place-items:center;flex:none;width:2.8rem;height:2.8rem;background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.28);border-radius:50%;padding:0;font:700 1.35rem/1 Inter,sans-serif;cursor:pointer}
.menu-view__close span{display:block;color:var(--yellow);line-height:1}
.menu-view__close:hover{border-color:var(--yellow);color:var(--yellow)}
.menu-view__index{display:none}
.menu-view__index a{display:inline-flex;align-items:center;min-height:2.6rem;padding:.55rem 1rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:rgba(255,255,255,.76);font-weight:700;text-decoration:none;text-transform:uppercase;font-size:.78rem;letter-spacing:.16em}
.menu-view__index a:hover{border-color:var(--yellow);color:var(--yellow)}
.menu-view__content{max-width:var(--maxw);margin:0 auto}
.menu-group{scroll-margin-top:2rem;margin-bottom:clamp(3.5rem,6vw,5rem)}
.menu-group--food>.menu-group__head{display:none}
.menu-group__head{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:1.25rem}
.menu-group__eyebrow{margin:0 0 .6rem;color:var(--yellow);font:700 .78rem/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase}
.menu-group__title{font-family:'Bodoni Moda',Georgia,serif;font-size:clamp(3.5rem,7vw,6.8rem);font-weight:600;color:#fff6e6}
.menu-group__note{max-width:23rem;margin:0;color:rgba(255,247,236,.58);font-size:.95rem;line-height:1.5;text-align:right}
.menu-chapter{scroll-margin-top:2rem;position:relative;display:flex;align-items:center;min-height:25rem;padding:3.6rem 0;overflow:hidden;border-top:1px solid rgba(255,214,125,.28);border-bottom:1px solid rgba(0,0,0,.52);background-color:#190207;background-image:var(--chapter-bg);background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transform:translateY(20px);box-shadow:inset 0 1.2rem 2.5rem rgba(0,0,0,.12),inset 0 -1.2rem 2.5rem rgba(0,0,0,.3)}
.menu-chapter::before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(17,0,4,.98) 0%,rgba(17,0,4,.84) 27%,rgba(17,0,4,.24) 62%,rgba(17,0,4,.2) 100%);pointer-events:none}
.menu-chapter--reverse::before{background:linear-gradient(270deg,rgba(17,0,4,.98) 0%,rgba(17,0,4,.84) 27%,rgba(17,0,4,.24) 62%,rgba(17,0,4,.2) 100%)}
.menu-chapter--reverse{justify-content:flex-end;text-align:right}
.menu-view.is-open .menu-chapter{animation:menuChapterIn .7s var(--ease-out) forwards}
.menu-view.is-open .menu-chapter:nth-child(2){animation-delay:.07s}.menu-view.is-open .menu-chapter:nth-child(3){animation-delay:.14s}.menu-view.is-open .menu-chapter:nth-child(4){animation-delay:.21s}.menu-view.is-open .menu-chapter:nth-child(5){animation-delay:.28s}.menu-view.is-open .menu-chapter:nth-child(6){animation-delay:.35s}
.menu-chapter__foreground{position:absolute;z-index:1;right:-2%;bottom:-11%;width:min(58%,46rem);height:125%;object-fit:contain;object-position:center bottom;pointer-events:none;filter:drop-shadow(0 1.4rem 1.4rem rgba(0,0,0,.6)) drop-shadow(0 0 .7rem rgba(255,82,34,.12));transition:transform .7s var(--ease-out),filter .7s var(--ease-out)}
.menu-chapter--reverse .menu-chapter__foreground{right:auto;left:-2%}
.menu-chapter__head{position:relative;z-index:2;display:block;width:49%;min-height:11rem;padding:1rem 2rem 1rem 0;margin:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.menu-chapter--reverse .menu-chapter__head{padding:1rem 0 1rem 2rem;text-align:right}
.menu-chapter__head:hover .menu-chapter__title,.menu-chapter__head:focus-visible .menu-chapter__title{color:var(--yellow)}
.menu-chapter__head:hover~.menu-chapter__foreground,.menu-chapter__head:focus-visible~.menu-chapter__foreground{transform:translateY(-.4rem) scale(1.02);filter:drop-shadow(0 1.8rem 1.7rem rgba(0,0,0,.7)) drop-shadow(0 0 .9rem rgba(255,82,34,.2))}
.menu-chapter__head:focus-visible{outline:2px solid var(--yellow);outline-offset:6px}
.menu-chapter__copy{display:block}
.menu-chapter__number{display:block;margin-bottom:.45rem;color:var(--yellow);font:700 .82rem/1 Inter,sans-serif;letter-spacing:.2em}
.menu-chapter__title{display:block;font-family:'Bodoni Moda',Georgia,serif;font-size:clamp(3.1rem,5vw,5.6rem);font-weight:600;line-height:.82;letter-spacing:-.045em;color:#fff6e6;text-shadow:.045em .055em 0 rgba(119,0,16,.68);transform:scaleX(.86);transform-origin:left center}
.menu-chapter--reverse .menu-chapter__title{transform-origin:right center}
.menu-chapter__desc{display:block;max-width:14rem;margin:1rem 0 0;color:rgba(255,247,236,.66);font-size:1rem;line-height:1.5}
.menu-track{position:relative;z-index:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(18rem,25vw);gap:1rem;overflow-x:auto;padding:.25rem .1rem 1.3rem;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--yellow) rgba(255,255,255,.14);overscroll-behavior-x:contain;touch-action:pan-x;cursor:grab}
.menu-track:active{cursor:grabbing}
.menu-track::-webkit-scrollbar{height:.35rem}
.menu-track::-webkit-scrollbar-track{background:rgba(255,255,255,.14);border-radius:999px}
.menu-track::-webkit-scrollbar-thumb{background:var(--yellow);border-radius:999px}
.menu-card{position:relative;min-height:20rem;display:flex;align-items:flex-end;overflow:hidden;padding:1.15rem;text-align:left;border:1px solid rgba(255,255,255,.13);border-radius:7px;background:#28040c center/cover no-repeat;color:#fff;cursor:pointer;scroll-snap-align:start;box-shadow:0 .8rem 1.8rem rgba(0,0,0,.35);transition:transform .35s var(--ease-out),border-color .35s,box-shadow .35s}
.menu-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,0,3,.04) 28%,rgba(10,0,3,.9) 100%)}
.menu-card::after{content:'';position:absolute;left:1rem;right:1rem;bottom:.75rem;height:1px;background:linear-gradient(90deg,var(--yellow),transparent)}
.menu-card:hover,.menu-card:focus-visible{transform:translateY(-7px);border-color:var(--yellow);box-shadow:0 1.5rem 2.4rem rgba(0,0,0,.46),0 0 2rem rgba(255,199,44,.1)}
.menu-card__body{position:relative;z-index:1;width:100%}
.menu-card__name{margin:0;max-width:14rem;font-family:'Bodoni Moda',Georgia,serif;font-size:clamp(1.7rem,2.8vw,2.35rem);font-weight:600;line-height:.88;letter-spacing:-.035em;text-transform:uppercase}
.menu-card__meta{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.75rem;color:var(--yellow);font-size:.9rem;font-weight:700}
.menu-group--drinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 1rem;padding-top:clamp(3rem,6vw,5rem);border-top:1px solid rgba(255,199,44,.32);background:linear-gradient(180deg,rgba(7,0,3,.1),rgba(7,0,3,.32))}
.menu-group--drinks>.menu-group__head{grid-column:1/-1}
.menu-group--drinks>.menu-chapter{display:flex;align-items:flex-end;min-height:22rem;padding:0;border-top:0;background-size:cover;background-position:center!important}
.menu-group--drinks>.menu-chapter .menu-chapter__head{width:100%;min-height:0;padding:5rem 1.25rem 1.4rem;background:linear-gradient(180deg,transparent,rgba(10,0,3,.94));text-align:left}
.menu-group--drinks>.menu-chapter .menu-chapter__number{color:var(--yellow)}
.menu-group--drinks>.menu-chapter .menu-chapter__title{font-family:'Bodoni Moda',Georgia,serif;font-size:clamp(1.8rem,3vw,3.1rem);font-weight:600;letter-spacing:-.035em;color:var(--yellow)}
.menu-group--drinks .menu-chapter__desc{max-width:none;font-size:.86rem}
.menu-group--drinks .menu-track{grid-auto-columns:100%;padding-bottom:.4rem}
.menu-group--drinks .menu-card{min-height:18rem}

.menu-list-view{max-width:var(--maxw);margin:0 auto;padding:clamp(1.5rem,3vw,2.8rem) 0 5rem;opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.menu-list-view.is-open{opacity:1;transform:none}
.menu-list__head{display:flex;align-items:end;gap:2rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.16)}
.menu-list__back{flex:none;border:1px solid rgba(255,199,44,.58);border-radius:999px;background:transparent;color:var(--yellow);padding:.65rem .9rem;font:700 .72rem/1 Inter,sans-serif;letter-spacing:.16em;cursor:pointer}
.menu-list__back:hover,.menu-list__back:focus-visible{background:var(--yellow);color:var(--on-bright)}
.menu-list__title{font-family:'Bodoni Moda',Georgia,serif;font-size:clamp(3rem,7vw,6.8rem);font-weight:600;letter-spacing:-.045em;color:#fff6e6;line-height:.82;transform:scaleX(.86);transform-origin:left center}
.menu-list__note{max-width:30rem;margin:.8rem 0 0;color:rgba(255,247,236,.68);font-size:1rem;line-height:1.5}
.menu-list__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(18rem,25vw);gap:1rem;overflow-x:auto;padding:.25rem .1rem 1.3rem;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--yellow) rgba(255,255,255,.14);overscroll-behavior-x:contain;touch-action:pan-x}
.menu-list__track::-webkit-scrollbar{height:.35rem}.menu-list__track::-webkit-scrollbar-track{background:rgba(255,255,255,.14);border-radius:999px}.menu-list__track::-webkit-scrollbar-thumb{background:var(--yellow);border-radius:999px}

/* Detalle del plato: el tipo de producto decide qué incluye se muestra.
   En bebidas no se recicla la lógica de comidas ni aparecen cremas. */
.menu-detail{position:fixed;inset:0;z-index:270;display:grid;place-items:center;padding:1.25rem;opacity:0;visibility:hidden;transition:opacity .25s var(--ease-out),visibility 0s .25s}
.menu-detail.is-open{opacity:1;visibility:visible;transition-delay:0s}
.menu-detail__backdrop{position:absolute;inset:0;background:rgba(7,0,3,.78);backdrop-filter:blur(8px)}
.menu-detail__panel{position:relative;z-index:1;width:min(760px,100%);display:grid;grid-template-columns:minmax(15rem,.9fr) minmax(0,1.1fr);overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:linear-gradient(145deg,#2d0710,#100104);box-shadow:0 2rem 5rem rgba(0,0,0,.65);transform:translateY(18px) scale(.98);transition:transform .35s var(--ease-out)}
.menu-detail.is-open .menu-detail__panel{transform:none}
.menu-detail__close{position:absolute;z-index:2;top:.9rem;right:.9rem;width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(11,11,11,.62);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.menu-detail__close:hover{border-color:var(--yellow);color:var(--yellow)}
.menu-detail__image{min-height:28rem;background:#2b0610 center/cover no-repeat;box-shadow:inset -2rem 0 3rem rgba(16,1,4,.38)}
.menu-detail__body{display:flex;flex-direction:column;padding:clamp(1.6rem,4vw,3rem)}
.menu-detail__cat{margin:0 0 .7rem;color:var(--yellow);font:700 .72rem/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.menu-detail__body h2{font-size:clamp(2.8rem,6vw,5rem);color:#fff6e6}
.menu-detail__desc{margin:1rem 0 0;color:rgba(255,247,236,.74);font-size:1rem;line-height:1.55}
.menu-detail__includes{margin:1.35rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14)}
.menu-detail__includes h3{margin:0 0 .75rem;font:700 .72rem/1 Inter,sans-serif;letter-spacing:.18em;color:var(--yellow)}
.menu-detail__includes ul{display:flex;flex-wrap:wrap;gap:.45rem .55rem;margin:0;padding:0;list-style:none}
.menu-detail__includes li{padding:.45rem .65rem;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:rgba(255,247,236,.82);font-size:.8rem}
.menu-detail__buy{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.9rem;margin-top:auto;padding-top:2rem}
.menu-detail__price{color:var(--yellow);font:400 2.2rem/1 'Anton',sans-serif}
.menu-detail__quantity{display:flex;align-items:center;gap:.65rem;margin-left:auto}
.menu-detail__quantity button{width:2.2rem;height:2.2rem;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:transparent;color:#fff;font-size:1.3rem;cursor:pointer}
.menu-detail__quantity button:hover{border-color:var(--yellow);color:var(--yellow)}
.menu-detail__quantity span{min-width:1.5ch;text-align:center;font-weight:700}
.menu-detail__add{grid-column:1/-1;width:100%;min-height:3.3rem}
.menu-toast{position:fixed;right:1.25rem;bottom:1.25rem;z-index:360;max-width:min(24rem,calc(100vw - 2rem));margin:0;padding:.9rem 1.1rem;border:1px solid rgba(255,199,44,.58);border-radius:999px;background:#ffc72c;color:#0b0b0b;font-weight:700;box-shadow:0 1rem 2.5rem rgba(0,0,0,.42);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility 0s .25s}
.menu-toast.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@keyframes menuChapterIn{to{opacity:1;transform:none}}

@media (max-width:720px){
  .menu-view__shell{padding:0 1rem 5rem}
  .menu-view__bar{gap:.7rem;min-height:64px}
  .menu-view__brand{width:74px;height:46px}
  .menu-view__bar nav{display:none}
  .menu-view__reserve{margin-left:auto;padding:.55rem .7rem;font-size:.6rem}
  .menu-view__head{display:block;margin-top:2.8rem;margin-bottom:2rem;padding:1.6rem 0 2rem}
  .menu-view__head h1{font-size:clamp(4.6rem,22vw,7.5rem)}
  .menu-view__aside{max-width:22rem;margin-top:1.5rem;padding-bottom:0}
  .menu-view__aside-title{font-size:.86rem}
  .menu-view__intro{font-size:.9rem}
  .menu-view__close{margin-top:1.4rem}
  .menu-view__index{margin-bottom:2rem}
  .menu-group__head{display:block}.menu-group__note{margin-top:.8rem;text-align:left}
  .menu-chapter{display:block;min-height:22rem;padding:1.5rem 0;background-size:cover;background-position:center!important}
  .menu-chapter__foreground{right:-12%;bottom:-8%;width:78%;height:78%}
  .menu-chapter--reverse .menu-chapter__foreground{right:-12%;left:auto}
  .menu-chapter::before,.menu-chapter--reverse::before{background:linear-gradient(180deg,rgba(17,0,4,.88) 0%,rgba(17,0,4,.66) 45%,rgba(17,0,4,.18) 100%)}
  .menu-chapter--reverse{text-align:left}
  .menu-chapter__head,.menu-chapter--reverse .menu-chapter__head{display:block;width:100%;min-height:12rem;padding:1rem 1rem 1rem 0;text-align:left}
  .menu-chapter__desc{margin-top:.8rem}
  .menu-track{grid-auto-columns:minmax(16rem,78vw)}
  .menu-card{min-height:17rem}
  .menu-group--drinks{display:block}.menu-group--drinks>.menu-chapter{min-height:17rem;margin-top:1rem}.menu-group--drinks>.menu-chapter .menu-chapter__head{width:100%;padding:4rem 1rem 1.1rem}
  .menu-list__head{display:block}.menu-list__back{margin-bottom:1.3rem}.menu-list__track{grid-auto-columns:minmax(16rem,78vw)}
  .menu-detail__panel{display:block;max-height:calc(100svh - 2rem);overflow-y:auto}
  .menu-detail__image{min-height:14rem;height:32svh;max-height:20rem}
  .menu-detail__body{min-height:23rem}
}

@media (prefers-reduced-motion:reduce){
  .menu-view,.menu-detail,.menu-detail__panel{transition:none}
  .menu-chapter,.menu-view.is-open .menu-chapter{animation:none;opacity:1;transform:none}
}

/* ─────────── SECCIONES ─────────── */
.section{padding:clamp(4.5rem,11vw,9rem) var(--pad);max-width:var(--maxw);margin-inline:auto}
.section__head{margin-bottom:3rem}
.section__kicker{
  font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--orange);margin:0 0 .75rem;font-weight:700;
}
.section__title{font-size:clamp(2rem,6vw,4rem)}
.section__title--sm{font-size:clamp(1.75rem,4.5vw,3rem)}

/* ─────────── CHIPS ─────────── */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.chip{
  font-family:inherit;font-size:.85rem;font-weight:500;
  padding:.5rem 1rem;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--muted);
  border:1px solid rgba(255,255,255,.18);
  transition:all .2s var(--ease-out);
}
.chip:hover{color:var(--text);border-color:rgba(255,255,255,.4)}
.chip.is-active{background:var(--gold);color:var(--on-bright);border-color:var(--gold);font-weight:700}

/* ─────────── GRID DE PLATOS ─────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}

.dish{
  display:flex;flex-direction:column;
  /* Degradado, no color plano: sobre negro un plano se lee como un agujero.
     El escalón --surface → --bg da el borde superior iluminado que hace
     que la tarjeta parezca tener volumen. */
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  overflow:hidden;position:relative;
  /* Sombra base: incluso en reposo la tarjeta se despega del fondo. */
  box-shadow:0 2px 12px rgba(0,0,0,.5);
  transition:border-color .25s var(--ease-out), transform .25s var(--ease-out),
             box-shadow .25s var(--ease-out);
}
/* Filo amarillo de un píxel arriba: el reflejo especular que separa la
   tarjeta del negro. Es lo que más "superficie" añade por menos código. */
.dish::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,195,0,.5),transparent);
}
.dish.is-hidden{display:none}
@media (hover:hover){
  .dish:hover{
    transform:perspective(1000px) rotateX(-4deg) rotateY(6deg) translateZ(16px) translateY(-4px);
    border-color:var(--yellow);
    box-shadow:0 20px 45px rgba(0,0,0,.7), 0 0 34px rgba(255,195,0,.14);
  }
  .dish:hover .dish__ghost{opacity:.32;transform:scale(1.08)}
}

.dish__media{
  height:130px;position:relative;overflow:hidden;
  display:grid;place-items:center;
  /* Ken Burns: la foto se acerca despacio al pasar el puntero. La escala
     vive aquí y no en .dish porque .dish ya rota en 3D — animar ambas en
     el mismo elemento haría que la rotación arrastrara el zoom. */
  background-size:cover;background-position:center;
  transition:transform 1.6s var(--ease-out);
}
@media (hover:hover){
  .dish:hover .dish__media{transform:scale(1.09)}
}
.dish__ghost{
  font-family:'Anton',sans-serif;font-size:4.5rem;line-height:1;
  color:#fff;opacity:.16;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
/* Las fotos se asignan con IntersectionObserver cuando la tarjeta se acerca.
   El degradado mantiene una primera pintura limpia sin descargar la carta
   completa al abrir la página. */
.dish__media--alitas{background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4));background-size:cover;background-position:center}
.dish__media--burger{background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35));background-size:cover;background-position:center}
.dish__media--salchi{background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4));background-size:cover;background-position:center}
.dish__media--broaster{background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35));background-size:cover;background-position:center}
.dish__media--cuchara{background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4));background-size:cover;background-position:center}
.dish__media--parrilla{background:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.38));background-size:cover;background-position:center}
.dish__media--ahumado{background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35));background-size:cover;background-position:center}
.dish__media--coctel  {background:linear-gradient(135deg,var(--yellow-deep),#5A3D00)}

.dish__body{padding:1.25rem 1.25rem .5rem;flex:1}
.dish__cat{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .5rem;font-weight:500;
}
.dish__name{font-size:1.15rem;margin-bottom:.5rem;line-height:1.15}
.dish__desc{font-size:.88rem;color:var(--muted);margin:0}
.dish__price{
  font-size:1.4rem;font-weight:700;color:var(--gold);
  margin:0;padding:0 1.25rem 1.25rem;
  font-variant-numeric:tabular-nums;
}
/* Cuando cart.js mueve el precio dentro de .dish__foot, el padding pasa a
   ser del contenedor. Sin esto el precio queda doblemente indentado. */
.dish__foot .dish__price{padding:0}

/* Badges. Blanco sobre rojo = 4.17:1 → solo válido en bold pequeño-grande;
   lo fijo en 700 y uppercase para mantenerlo legible. */
.tag{
  display:inline-block;vertical-align:middle;
  font-family:'Inter',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.25rem .5rem;border-radius:4px;margin-left:.4rem;
  background:rgba(255,255,255,.12);color:var(--text);
}
.tag--red{background:var(--red);color:#fff}
.tag--gold{background:var(--gold);color:var(--on-bright)}

.carta__note{
  margin-top:2.5rem;font-size:.85rem;color:var(--muted);text-align:center;
}
.carta__note a{color:var(--gold);font-weight:700}

/* ─────────── COMBOS ─────────── */
.combos{position:relative}
.combos__rail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;
}
.combo{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  padding:1.5rem;
}
/* La única promo verificada del Instagram va INVERTIDA: amarillo sólido con
   texto negro. En una página de amarillo sobre negro, invertir el bloque es
   el acento más fuerte disponible sin salirse de dos colores — y el contraste
   es el mismo 12.24:1 en ambos sentidos. */
.combo--hero{
  background:linear-gradient(160deg,var(--yellow),var(--yellow-deep));
  border-color:var(--yellow);
  color:var(--on-bright);
}
.combo--hero .combo__detail{color:rgba(var(--bg-rgb),.72)}
.combo--hero .combo__price{color:var(--on-bright)}
.combo--hero .combo__badge{background:var(--on-bright);color:var(--yellow)}
/* El botón dentro de la tarjeta amarilla se invierte también: negro sólido.
   Un botón amarillo sobre fondo amarillo desaparecería. */
.combo--hero .btn{background:var(--on-bright);color:var(--yellow);border-color:transparent}
.combo--hero .btn:hover{background:#000}
.combo__badge{
  align-self:flex-start;
  font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--gold);color:var(--on-bright);
  padding:.3rem .65rem;border-radius:999px;margin-bottom:1rem;
}
.combo__badge--muted{background:rgba(255,255,255,.12);color:var(--muted)}
.combo__name{font-size:1.35rem;margin-bottom:.4rem}
.combo__detail{font-size:.88rem;color:var(--muted);margin:0 0 1rem}
.combo__price{
  font-family:'Anton',sans-serif;font-size:3rem;line-height:1;
  color:var(--gold);margin:0 0 1.5rem;font-variant-numeric:tabular-nums;
}
.combo__price span{font-size:1.25rem;margin-right:.2rem;vertical-align:super}

/* ─────────── LA NOCHE (pin) ───────────
   La altura de scroll la declara el CSS (300vh), no el pin-spacer de
   ScrollTrigger. Con pinSpacing:false el pin no inserta nada ni altera
   la altura del documento, así que un refresh (p. ej. al filtrar la
   carta) no tiene nada que recalcular mal. */
.noche{position:relative;isolation:isolate;height:300vh}
.noche__bg{position:absolute;inset:0;overflow:hidden;z-index:-2}
.noche__photo{
  position:absolute;left:0;width:100%;height:52%;
  background-size:cover;background-position:center;
}
/* Fuego → barra → humo: el recorrido de la noche.
   Para cambiarlas por video del local, sustituye .noche__bg por
   <video autoplay muted loop playsinline> con object-fit:cover.
   El parallax de animations.js sigue funcionando igual. */
.noche__photo--1{top:0;   background-image:url('assets/menu/_Parrilla_Btn4vCmczlU.webp')}
.noche__photo--2{top:38%; background-image:url('assets/menu/_Coctelera_lgSbiibLxhM.webp')}
.noche__photo--3{top:76%; background-image:url('assets/menu/_Ahumados_UeYkqQh4PoI.webp')}
/* Velo al 72%: sin esto el texto blanco encima no garantiza 4.5:1 sobre foto */
.noche__veil{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--bg) 0%, rgba(var(--bg-rgb),.72) 18%, rgba(var(--bg-rgb),.72) 82%, var(--bg) 100%);
}
.noche__pin{
  height:100svh;display:grid;place-items:center;
  padding:5rem var(--pad);text-align:center;
}
.noche__stage{position:relative;width:min(680px,100%);min-height:260px}
.noche__card{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  opacity:0;transform:translateY(24px);
  /* visibility además de opacity: con solo opacity las tres tarjetas siguen
     en el árbol de accesibilidad y un lector de pantalla las lee seguidas
     como un bloque. El retardo de .5s la mantiene visible mientras sale. */
  visibility:hidden;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility 0s .5s;
  pointer-events:none;
}
.noche__card.is-active{
  opacity:1;transform:none;pointer-events:auto;
  visibility:visible;transition-delay:0s,0s,0s;
}
.noche__kicker{
  font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--orange);margin:0 0 1rem;font-weight:700;
}
.noche__figure{
  font-family:'Anton',sans-serif;font-size:clamp(2.25rem,7vw,4.5rem);
  line-height:1;color:var(--gold);margin:0 0 1rem;
  font-variant-numeric:tabular-nums;
}
.noche__text{max-width:44ch;color:var(--text);margin:0;font-size:1.05rem}
.noche__dots{display:flex;gap:.5rem;margin-top:2.5rem;justify-content:center}
.noche__dots span{
  width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.25);
  transition:background .3s, width .3s;
}
.noche__dots span.is-active{background:var(--gold);width:24px}

/* ─────────── PEDIDO ─────────── */
.pedido__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.pedido__lead{color:var(--muted);margin:1rem 0 2rem;max-width:40ch}
.pedido__cta .btn{margin-right:.75rem;margin-bottom:.75rem}

.info{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.75rem;margin:0;
  background:var(--surface);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);padding:2rem;
}
.info dt{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);font-weight:700;margin-bottom:.5rem;
}
.info dd{margin:0;font-size:.95rem;line-height:1.5}
.info__map{
  display:inline-block;margin-top:1.5rem;
  color:var(--gold);font-weight:700;font-size:.9rem;text-decoration:none;
}
.info__map:hover{text-decoration:underline}

/* ─────────── FOOTER ─────────── */
.foot{
  border-top:1px solid rgba(255,255,255,.08);
  padding:3rem var(--pad);text-align:center;
}
.foot__brand{width:150px;margin:0 0 1rem}
.foot__brand img{width:100%;height:auto;object-fit:contain;mix-blend-mode:screen}
.foot__links{display:flex;gap:1.5rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}
.foot__links a{color:var(--muted);text-decoration:none;font-size:.9rem}
.foot__links a:hover{color:var(--gold)}
.foot__legal{color:var(--muted);font-size:.8rem;margin:0}

/* Visible solo para lectores de pantalla. clip-path y no display:none,
   que sacaría el elemento del árbol de accesibilidad y anularía aria-live. */
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ─────────── BUSCADOR ─────────── */
.search{position:relative;margin-bottom:1.25rem;max-width:420px}
.search input{
  width:100%;font-family:inherit;font-size:.95rem;
  padding:.8rem 1rem .8rem 2.6rem;
  color:var(--text);background:var(--surface);
  border:1px solid rgba(255,255,255,.12);border-radius:999px;
  transition:border-color .2s var(--ease-out);
}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none;border-color:var(--orange)}
.search__icon{
  position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;line-height:1;
}
/* Mensaje de "no hay resultados". Vive fuera de la grid para que el
   layout de columnas no lo estire. */
.search__empty{
  display:none;color:var(--muted);padding:2rem 0;font-size:1rem;
}
.search__empty.is-on{display:block}

/* ─────────── CARRITO ─────────── */
.dish{display:flex;flex-direction:column}
.dish__body{flex:1}
.dish__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding:0 1.25rem 1.25rem;
}
.dish__add{
  font-family:inherit;font-size:.82rem;font-weight:700;
  padding:.5rem .9rem;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--orange);
  border:1.5px solid var(--orange);
  transition:background .2s var(--ease-out), color .2s var(--ease-out);
  white-space:nowrap;
}
.dish__add:hover,.dish__add:focus-visible{background:var(--orange);color:var(--on-bright)}
.dish__add.is-added{background:var(--gold);border-color:var(--gold);color:var(--on-bright)}

/* Botón flotante. Solo aparece con algo dentro: un carrito vacío
   permanente es ruido en pantalla. */
.cart-fab{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:200;
  display:flex;align-items:center;gap:.5rem;
  font-family:inherit;font-size:.95rem;font-weight:700;
  padding:.9rem 1.3rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--gold);color:var(--on-bright);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s .3s;
}
.cart-fab.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.cart-fab__count{
  display:grid;place-items:center;min-width:22px;height:22px;padding:0 .35rem;
  background:var(--bg);color:var(--gold);border-radius:999px;
  font-size:.78rem;
}

.cart{
  position:fixed;inset:0;z-index:300;
  display:flex;justify-content:flex-end;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease-out), visibility 0s .3s;
}
.cart.is-open{opacity:1;visibility:visible;transition-delay:0s}
.cart__backdrop{position:absolute;inset:0;background:rgba(4,6,18,.7);backdrop-filter:blur(3px)}
.cart__panel{
  position:relative;width:min(400px,100%);height:100%;
  display:flex;flex-direction:column;
  background:var(--surface);
  border-left:1px solid rgba(255,255,255,.1);
  transform:translateX(100%);
  transition:transform .35s var(--ease-out);
}
.cart.is-open .cart__panel{transform:none}
.cart__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem;border-bottom:1px solid rgba(255,255,255,.08);
}
.cart__head h2{font-family:'Anton',sans-serif;font-size:1.4rem;margin:0;letter-spacing:.02em}
.cart__close{
  background:none;border:0;color:var(--muted);cursor:pointer;
  font-size:1.6rem;line-height:1;width:44px;height:44px;
}
.cart__close:hover{color:var(--text)}
.cart__items{flex:1;overflow-y:auto;padding:1rem 1.5rem;margin:0;list-style:none}
.cart__empty{color:var(--muted);text-align:center;padding:3rem 1rem}
.cart__item{
  display:grid;grid-template-columns:1fr auto;gap:.25rem .75rem;
  padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.cart__name{font-weight:700;font-size:.95rem}
.cart__unit{color:var(--muted);font-size:.82rem}
.cart__line{color:var(--gold);font-weight:700;font-size:.95rem;text-align:right}
.cart__qty{display:flex;align-items:center;gap:.5rem;grid-column:2}
.cart__qty button{
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--text);
  border:1px solid rgba(255,255,255,.22);
  font-size:1.05rem;line-height:1;
}
.cart__qty button:hover{border-color:var(--orange);color:var(--orange)}
.cart__qty span{min-width:1.5ch;text-align:center;font-weight:700}
.cart__foot{padding:1.5rem;border-top:1px solid rgba(255,255,255,.08)}
.cart__total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:1rem;font-size:1.05rem;
}
.cart__total strong{font-family:'Anton',sans-serif;font-size:1.8rem;color:var(--gold)}
/* Aviso de precios referenciales: se muestra solo si algún ítem del carrito
   sigue siendo placeholder. Desaparece solo cuando entren los precios reales. */
.cart__note{color:var(--muted);font-size:.78rem;margin:.75rem 0 0;text-align:center}
.cart__note[hidden]{display:none}

.nav__profile-button{margin-left:.35rem}
.profile-modal{justify-content:center;align-items:center;padding:1.25rem}
.profile-modal__panel{width:min(480px,100%);height:auto;max-height:min(92vh,760px);overflow:auto;border:1px solid rgba(255,255,255,.14);border-radius:18px;transform:translateY(18px);transition:transform .35s var(--ease-out)}
.profile-modal.is-open .profile-modal__panel{transform:none}
.profile-modal__copy{color:var(--muted);line-height:1.55;padding:0 1.5rem}
.profile-form{display:grid;gap:.8rem;padding:1rem 1.5rem}
.profile-form label{display:grid;gap:.35rem;color:var(--muted);font-size:.82rem}
.profile-form input{width:100%;padding:.8rem .9rem;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(255,255,255,.05);color:var(--text);font:inherit}
.profile-avatar{display:grid;place-items:center;width:64px;height:64px;margin:1rem auto 0;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(255,195,0,.1);font-size:2rem}
.profile-orders{padding:0 1.5rem 1.5rem}
.profile-orders__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid rgba(255,255,255,.08);padding-top:1rem}
.profile-orders h3{font-family:'Anton',sans-serif;letter-spacing:.02em;margin:0}
.profile-orders__head .btn{padding:.45rem .7rem;font-size:.72rem}
.profile-empty{color:var(--muted);font-size:.84rem;line-height:1.5}
.profile-order{margin-top:.7rem;padding:.8rem;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.035)}
.profile-order>div{display:flex;justify-content:space-between;gap:.75rem}.profile-order span{color:var(--gold);font-size:.76rem}.profile-order p{margin:.45rem 0;color:var(--text);font-size:.86rem}.profile-order small{color:var(--muted);line-height:1.45}

@media (max-width:480px){
  .cart__panel{width:100%}
  .cart-fab{right:1rem;bottom:1rem}
}

/* ─────────── REDUCED MOTION ───────────
   No es un extra: si el usuario lo pide, todo aparece en su estado final. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .noche{height:auto}
  .noche__pin{height:auto}
  .noche__card{position:relative;opacity:1;transform:none;visibility:visible;margin-bottom:3rem}
  .noche__stage{min-height:0}
  .hero__scroll{display:none}
}