/* ============================================================
   KELCAR'S 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:#FFC300;        /* primario */
  --yellow-deep:#E0A800;   /* degradados y profundidad */
  --amber:#FF9500;         /* 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. */
}

/* Grano de película sobre todo el documento.
   Un negro plano y un amarillo saturado juntos se ven digitales y baratos;
   el grano les da textura de impresión y evita el banding en los degradados
   del hero. Es un SVG inline (~250 bytes), sin petición de red, y no
   intercepta el puntero. */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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;
  padding:1rem var(--pad);
  background:rgba(var(--bg-rgb),0);
  backdrop-filter:blur(0px);
  transition:background .35s var(--ease-out), backdrop-filter .35s var(--ease-out), padding .35s var(--ease-out);
}
.nav.is-stuck{
  background:rgba(var(--bg-rgb),.86);
  backdrop-filter:blur(14px);
  padding-block:.6rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav__brand{
  font-family:'Anton',sans-serif;font-size:1.35rem;
  text-decoration:none;letter-spacing:.04em;margin-right:auto;
}
.nav__brand span{color:var(--orange)}
.nav__links{display:flex;gap:1.5rem}
.nav__links a{
  text-decoration:none;font-size:.9rem;font-weight:500;color:var(--muted);
  transition:color .2s;
}
.nav__links a:hover{color:var(--text)}

/* ── 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:rgba(var(--bg-rgb),.97);backdrop-filter:blur(14px);
    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{padding:1rem var(--pad);border-bottom:1px solid rgba(255,255,255,.05)}
}

/* ─────────── 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 ─────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;place-items:center;
  padding:6rem var(--pad) 4rem;
  isolation:isolate;
}
/* ── Vídeo del hero: parrilla en llamas ──
   "Sin fondo" en la web no se consigue con canal alfa (no existe en stock
   gratuito y Safari usa otro códec). Se consigue con tres cosas:

   1. Negros aplastados a cero, horneado en el fichero con el filtro
      `curves` de ffmpeg. Ya no hay gris de fondo que delatar.
   2. mix-blend-mode:screen. Sin él, el negro puro del vídeo (0.0) sería
      MÁS OSCURO que la página (#0B0B0B = 0.043) y se vería un rectángulo
      oscuro. Con screen, screen(0.0, 0.043) = 0.043 exacto: invisible.
      Y como screen solo puede aclarar, el vídeo nunca puede ensuciar.
   3. Máscara radial que desvanece los bordes. Es lo que de verdad borra
      la forma rectangular; sin ella se adivinan las esquinas. */
.hero__video{
  position:absolute;inset:0;z-index:-3;
  width:100%;height:100%;object-fit:cover;
  mix-blend-mode:screen;
  opacity:.9;
  -webkit-mask-image:radial-gradient(ellipse 80% 74% at 50% 48%, #000 38%, transparent 84%);
          mask-image:radial-gradient(ellipse 80% 74% at 50% 48%, #000 38%, transparent 84%);
}

/* Refuerzo de contraste sobre el vídeo */
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    /* Scrim central. Va encima del canvas (z-index -1 vs -2) y apaga las
       brasas justo detrás del bloque de texto. Sin él, el subtítulo cae
       sobre el núcleo más brillante del fuego y deja de leerse. */
    radial-gradient(46% 40% at 50% 46%, rgba(var(--bg-rgb),.80) 0%, rgba(var(--bg-rgb),.42) 55%, transparent 78%),
    radial-gradient(60% 50% at 50% 55%, rgba(255,149,0,.18), transparent 70%),
    linear-gradient(180deg, rgba(var(--bg-rgb),.55) 0%, rgba(var(--bg-rgb),.25) 45%, var(--bg) 100%);
}
.hero__inner{max-width:var(--maxw);text-align:center}
.hero__eyebrow{
  font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.5rem;font-weight:500;
}
.hero__title{font-size:clamp(3rem,13vw,9.5rem);display:grid}
.hero__title--accent{color:var(--orange)}
/* Blanco, no --muted: este texto va sobre brasas animadas, así que el
   fondo cambia frame a frame. El gris de las secciones tranquilas no
   aguanta ahí. */
.hero__sub{
  margin:1.5rem auto 2.5rem;max-width:34ch;
  color:var(--text);font-size:clamp(.95rem,2vw,1.15rem);
  text-wrap:balance;
}
.hero__eyebrow{text-wrap:balance}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

.hero__scroll{
  position:absolute;bottom:2rem;left:50%;translate:-50% 0;
  width:24px;height:38px;border:2px solid rgba(255,255,255,.3);border-radius:999px;
}
.hero__scroll span{
  position:absolute;top:7px;left:50%;translate:-50% 0;
  width:3px;height:7px;border-radius:2px;background:var(--gold);
  animation:wheel 1.9s var(--ease-out) infinite;
}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}25%{opacity:1}70%{opacity:0;transform:translate(-50%,14px)}100%{opacity:0}}

/* ─────────── 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);
}
/* Imágenes profesionales de Unsplash + overlay oscuro para legibilidad del ghost */
.dish__media--alitas{background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url('assets/menu/_Alitas_BBQ_am6F7o56534.webp');background-size:cover;background-position:center}
.dish[data-cat="alitas"]:nth-of-type(2) .dish__media--alitas{background-image:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url('assets/menu/_Alitas_BBQ_CgXEzyC2fNA.webp')}
.dish__media--burger{background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url('assets/menu/_Hamburguesas_2zWfvyqPwnc.webp');background-size:cover;background-position:center}
.dish[data-cat="burger"]:nth-of-type(2) .dish__media--burger{background-image:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url('assets/menu/_Hamburguesas_KAfMLyM5wiI.webp')}
.dish__media--salchi{background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url('assets/menu/_Salchipapas_p91GLhQv35o.webp');background-size:cover;background-position:center}
.dish[data-cat="salchipapas"]:nth-of-type(2) .dish__media--salchi{background-image:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url('assets/menu/_Salchipapas_rTXgNusQbus.webp')}
.dish__media--broaster{background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url('assets/menu/_Broaster_Yh9Ut4d3K0A.webp');background-size:cover;background-position:center}
.dish[data-cat="broaster"]:nth-of-type(2) .dish__media--broaster{background-image:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url('assets/menu/_Broaster_UgckYUoc0tM.webp')}
.dish__media--cuchara{background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url('assets/menu/_Cuchareables_YgirePmHPZU.webp');background-size:cover;background-position:center}
.dish[data-cat="cuchareables"]:nth-of-type(2) .dish__media--cuchara{background-image:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url('assets/menu/_Cuchareables_y_7KLDoPlAc.webp')}
.dish__media--parrilla{background:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.38)),url('assets/menu/_Parrilla_Btn4vCmczlU.webp');background-size:cover;background-position:center}
.dish[data-cat="parrillas"]:nth-of-type(2) .dish__media--parrilla{background-image:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.38)),url('assets/menu/_Parrilla__aR4l6fj6wQ.webp')}
.dish__media--ahumado{background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url('assets/menu/_Ahumados_UeYkqQh4PoI.webp');background-size:cover;background-position:center}
.dish[data-cat="ahumados"]:nth-of-type(2) .dish__media--ahumado{background-image:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url('assets/menu/_Ahumados_3wzps8KbdCQ.webp')}
.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{font-family:'Anton',sans-serif;font-size:1.5rem;margin:0 0 1rem;letter-spacing:.04em}
.foot__brand span{color:var(--orange)}
.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}

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