/* ============================================================================
   LA MARUCHA · Street Food · Grill · Música
   Dirección "LETRERO VIVO" — fachada de club de neón que enciende.
   Neón en capas (se gana su lugar) + menú legible tipo comanda + hilo dorado.
   ============================================================================ */

:root {
  --bg: #06040e;
  --bg-2: #0b0818;
  --panel: rgba(10, 7, 20, 0.92);   /* paneles mate del menú (respiro) */

  /* Neón */
  --cyan: #19e3ff;  --pink: #ff2d9b;  --purple: #9d4bff;  --orange: #ff7a1a;
  --yellow: #ffd23f; --green: #3dffa0; --red: #ff3b5c;     --blue: #2f7bff;
  --gold: #d8b25a;                   /* hilo premium Art-Deco (solo filetes) */

  --cat: var(--cyan);                /* acento por categoría (lo fija el JS) */

  --wa: #25d366;  --wa-dark: #1da851;

  --text: #f6f2ff;  --muted: #c3bce0;  --dim: #8d86ad;

  --radius: 16px;  --radius-sm: 12px;  --maxw: 1160px;

  /* Sistema de neón en capas (radios encadenados) */
  --neon-1: 0 0 2px;  --neon-2: 0 0 6px;  --neon-3: 0 0 16px;  --neon-4: 0 0 40px;

  --f-display: "Bricolage Grotesque", system-ui, sans-serif; /* títulos, precios, números */
  --f-wordmark: "Monoton", cursive;                           /* SOLO wordmark */
  --f-label: "Saira Condensed", sans-serif;                   /* micro-labels stencil */
  --f-body: "Hanken Grotesk", system-ui, sans-serif;          /* cuerpo legible */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--f-body); background: var(--bg); color: var(--text); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* Mural de fondo (fijo) + viñeta de "pared de escenario" */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: url("../images/mural-1.png") center/cover no-repeat; }
body::after  { content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(125% 95% at 50% 34%, transparent 0%, rgba(6,4,14,.5) 42%, rgba(6,4,14,.9) 82%); }

/* ✨ Estrellas fugaces sutiles por todo el fondo (detrás del contenido) */
.shooting-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.shooting-star { position: absolute; left: 0; top: var(--y, 20vh); width: 2px; height: 2px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 1px rgba(255,255,255,.85); opacity: 0;
  transform: rotate(var(--ang, 18deg)) translateX(-14vw); animation: shoot 5s linear infinite; }
.shooting-star::after { content: ""; position: absolute; top: 50%; left: 0; width: var(--len, 90px); height: 1px; border-radius: 1px;
  transform: translate(-100%, -50%); background: linear-gradient(270deg, rgba(255,255,255,.85), rgba(255,255,255,0)); }
@keyframes shoot {
  0%   { transform: rotate(var(--ang, 18deg)) translateX(-14vw);  opacity: 0; }
  3%   { opacity: var(--peak, .6); }
  14%  { opacity: var(--peak, .6); }
  18%  { transform: rotate(var(--ang, 18deg)) translateX(118vw); opacity: 0; }
  100% { transform: rotate(var(--ang, 18deg)) translateX(118vw); opacity: 0; }
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--pink); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Iconos (Font Awesome) */
.cat__icon i { color: var(--cat); text-shadow: 0 0 9px var(--cat); line-height: 1; }
.catnav__pill i { font-size: .9em; margin-right: .12em; }
.hero__badge i { color: var(--yellow); }
.hero__sub i { color: var(--orange); margin: 0 .05em; }
.hero__sub i.fa-guitar { color: var(--green); }
.drawer__head h2 i { font-size: .82em; }
.footer__info i { width: 1.15em; color: var(--cyan); }
.footer__slug i { color: var(--green); }
.footer__credit i { color: var(--orange); }

/* ── Sistema de neón (utilities) ────────────────────────────────── */
.neon {
  color: #fff;
  text-shadow: var(--neon-1) #fff, var(--neon-2) var(--cat), var(--neon-3) var(--cat),
    var(--neon-4) color-mix(in srgb, var(--cat) 55%, transparent);
}
.neon-box { box-shadow: 0 0 6px -1px var(--cat), 0 0 18px -4px var(--cat), inset 0 0 12px -8px var(--cat); }
.neon-stroke { filter: drop-shadow(0 0 2px var(--cat)) drop-shadow(0 0 8px var(--cat)); }

/* ── Botones hero ───────────────────────────────────────────────── */
/* Botones "Shiny Button" — port 1:1 del componente de 21st.dev (Ali Imam), en nuestros neón */
@property --gradient-angle        { syntax: "<angle>";      initial-value: 0deg;    inherits: false; }
@property --gradient-angle-offset { syntax: "<angle>";      initial-value: 0deg;    inherits: false; }
@property --gradient-percent      { syntax: "<percentage>"; initial-value: 5%;      inherits: false; }
@property --gradient-shine        { syntax: "<color>";      initial-value: #ffffff; inherits: false; }

.btn {
  --sb-bg: #0a0711;
  --sb-bg-subtle: #1a1818;
  --highlight: var(--pink);
  --highlight-subtle: #ffd0ec;
  --animation: gradient-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);

  isolation: isolate; position: relative; overflow: hidden; cursor: pointer; outline-offset: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .95rem 1.9rem;
  font-family: var(--f-body); font-size: 1.02rem; line-height: 1.2; font-weight: 700; color: #fff; text-decoration: none;
  border: 1px solid transparent; border-radius: 360px;
  background: linear-gradient(var(--sb-bg), var(--sb-bg)) padding-box,
    conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent, var(--highlight) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--highlight) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--sb-bg-subtle);
  transition: var(--transition);
  transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
}
.btn i { font-size: 1.05em; }
.btn::before, .btn::after {
  content: ""; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1;
}
.btn:active { translate: 0 1px; }
/* Dots pattern */
.btn::before {
  --size: calc(100% - var(--shadow-size) * 3); --position: 2px; --space: calc(var(--position) * 2);
  width: var(--size); height: var(--size);
  background: radial-gradient(circle at var(--position) var(--position), #fff calc(var(--position) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space); background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), #000, transparent 10% 90%, #000);
  mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), #000, transparent 10% 90%, #000);
  border-radius: inherit; opacity: .4; z-index: -1;
}
/* Inner shimmer */
.btn::after {
  --animation: shimmer linear infinite;
  width: 100%; aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--highlight), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  opacity: .6;
}
.btn .sb { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .55rem; }
/* (glow "breathe" eliminado: causaba un cuadro al pasar el mouse) */
.btn, .btn::before, .btn::after {
  animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / 0.4) reverse paused;
  animation-composition: add;
  animation-delay: var(--sb-d, 0s), var(--sb-d, 0s);   /* desfase por botón → giro desincronizado */
}
.btn:is(:hover, :focus-visible) { --gradient-percent: 20%; --gradient-angle-offset: 95deg; --gradient-shine: var(--highlight-subtle); }
.btn:is(:hover, :focus-visible), .btn:is(:hover, :focus-visible)::before, .btn:is(:hover, :focus-visible)::after { animation-play-state: running; }
@keyframes gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes shimmer { to { rotate: 360deg; } }
@keyframes breathe { from, to { scale: 1; } 50% { scale: 1.2; } }

.btn--menu { --highlight: var(--pink);  --highlight-subtle: #ffd0ec; --duration: 3s;   --sb-d: 0s; }
.btn--maps { --highlight: var(--cyan);  --highlight-subtle: #c8f7ff; --duration: 3.7s; --sb-d: -1.4s; }
.btn--wa   { --highlight: var(--green); --highlight-subtle: #c9ffe6; --duration: 2.6s; --sb-d: -2.2s; padding-left: 1rem; }
.btn--wa .sb { gap: .8rem; }
.btn--menu .fa-arrow-right { transition: transform .25s; }
.btn--menu:is(:hover, :focus-visible) .fa-arrow-right { transform: translateX(4px); }
.btn__ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, var(--highlight) 22%, transparent); border: 1px solid color-mix(in srgb, var(--highlight) 55%, transparent); display: grid; place-items: center; font-size: 1.1rem; box-shadow: 0 0 12px -5px var(--highlight); }
.btn__tx { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.06; text-align: left; }
.btn__tx b { font-weight: 800; }
.btn__tx small { font-weight: 600; font-size: .72rem; opacity: .85; }
.btn__dot { position: absolute; top: 9px; right: 11px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; animation: onair 1.7s steps(1) infinite; z-index: 2; }

/* ── Topbar ─────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 1rem;
  padding: .5rem clamp(.8rem, 3vw, 1.5rem); background: rgba(6,4,14,.88); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent; transform: translateY(-110%);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s;
}
.topbar.is-visible { transform: translateY(0); border-bottom-color: rgba(216,178,90,.25); }
.topbar__brand { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.topbar__logo { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(25,227,255,.55)); }
.topbar__name { font-family: var(--f-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.01em; color: #fff; display: none; }
.topbar__name::before { content: "●"; color: var(--green); font-size: .55em; vertical-align: middle; margin-right: .45rem; animation: onair 1.7s steps(1) infinite; }
@keyframes onair { 50% { opacity: .18; } }

.catnav { position: relative; display: flex; gap: .1rem; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; flex: 1; padding: .3rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.catnav::-webkit-scrollbar { display: none; }
.catnav__pill {
  --cat: var(--cyan); position: relative; z-index: 1; flex-shrink: 0; white-space: nowrap; padding: .5rem 1.05rem; border-radius: 999px;
  font-family: var(--f-label); font-weight: 600; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase;
  color: #d8d2f6; transition: color .25s;
}
.catnav__pill:hover { color: #fff; }
.catnav__pill.is-active { color: #fff; text-shadow: 0 0 8px var(--cat); }
/* Tubelight: luz que se desliza bajo la pestaña activa */
.catnav__lamp {
  position: absolute; top: .3rem; bottom: .3rem; left: 0; width: 0; z-index: 0; pointer-events: none; border-radius: 999px;
  background: color-mix(in srgb, var(--lamp, var(--cyan)) 18%, transparent);
  box-shadow: inset 0 0 14px -6px var(--lamp, var(--cyan));
  transition: left .35s cubic-bezier(.34,1.3,.5,1), width .35s cubic-bezier(.34,1.3,.5,1);
}
.catnav__lamp::before {
  content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 42%; height: 4px; border-radius: 0 0 8px 8px;
  background: var(--lamp, var(--cyan));
  box-shadow: 0 0 14px 1px var(--lamp, var(--cyan)), 0 0 28px 6px color-mix(in srgb, var(--lamp, var(--cyan)) 55%, transparent);
}

/* Buscador del menú (en el topbar) */
.topbar__search { position: relative; flex-shrink: 0; display: flex; align-items: center; gap: .4rem; width: clamp(120px, 30vw, 230px); padding: .45rem .75rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid color-mix(in srgb, var(--cyan) 32%, transparent); transition: box-shadow .2s, border-color .2s; }
.topbar__search:focus-within { border-color: var(--cyan); box-shadow: 0 0 16px -5px var(--cyan); }
.topbar__search > i { color: var(--cyan); font-size: .85rem; flex-shrink: 0; }
.topbar__search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: #fff; font-family: var(--f-body); font-size: .9rem; }
.topbar__search input::placeholder { color: var(--dim); }
.topbar__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__dropdown { position: absolute; top: calc(100% + .5rem); right: 0; width: min(360px, 88vw); max-height: min(64vh, 460px); overflow-y: auto; background: var(--bg-2); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); border-radius: 14px; box-shadow: 0 24px 60px -18px #000, 0 0 26px -12px var(--cyan); padding: .4rem; z-index: 70; }
.search__dropdown[hidden] { display: none; }
.search__dropdown::-webkit-scrollbar { width: 6px; }
.search__dropdown::-webkit-scrollbar-thumb { background: #2a2148; border-radius: 6px; }
.search__item { --cat: var(--cyan); display: flex; align-items: center; gap: .55rem; padding: .55rem .6rem; border-radius: 10px; transition: background .15s; }
.search__item:hover { background: rgba(255,255,255,.05); }
.search__info { flex: 1; min-width: 0; }
.search__name { font-family: var(--f-body); font-weight: 600; font-size: .94rem; color: #fff; line-height: 1.2; }
.search__meta { font-family: var(--f-label); letter-spacing: .05em; text-transform: uppercase; font-size: .68rem; color: var(--dim); margin-top: .1rem; }
.search__price { font-family: var(--f-display); font-weight: 800; font-size: .98rem; white-space: nowrap; font-feature-settings: "tnum"; }
.search__add { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #08040f; background: var(--cat); box-shadow: 0 0 12px -3px var(--cat); transition: transform .15s; }
.search__add svg { width: 15px; height: 15px; }
.search__add:hover { transform: scale(1.1); }
.search__add.added { animation: bump .4s; }
.search__empty { padding: .9rem; text-align: center; color: var(--muted); font-size: .88rem; }

.cart-btn {
  position: relative; flex-shrink: 0; display: none; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; color: var(--cyan); border: 1px solid var(--cyan); background: rgba(8,5,18,.5);
  box-shadow: 0 0 14px -4px var(--cyan); transition: all .25s;
}
.cart-btn:hover { color: #fff; transform: scale(1.06); box-shadow: 0 0 20px -2px var(--cyan); }
.cart-btn__count {
  position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px; font-family: var(--f-display); font-size: .72rem; font-weight: 700;
  background: var(--pink); color: #fff; border: 2px solid var(--bg); box-shadow: 0 0 10px var(--pink);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cart-btn__count[data-empty="true"] { transform: scale(0); }
.cart-btn__count.bump { animation: bump .4s; }
@keyframes bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.4); } }

/* ── HERO ───────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center;
  padding: clamp(4.5rem, 11vh, 7rem) 1.25rem 3rem; background: url("../images/mural-1.png") center/cover no-repeat;
}
.hero__scrim { position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(115% 85% at 50% 44%, rgba(6,4,14,.88) 0%, rgba(6,4,14,.42) 38%, rgba(6,4,14,.05) 66%, transparent 80%),
    linear-gradient(to bottom, rgba(6,4,14,.35) 0%, rgba(6,4,14,.1) 45%, var(--bg) 100%); }
/* esquinas Art-Deco doradas */
.hero::before, .hero::after { content: ""; position: absolute; width: 54px; height: 54px; z-index: 3; opacity: .4; }
.hero::before { top: 16px; left: 16px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.hero::after  { bottom: 16px; right: 16px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.hero__inner { position: relative; z-index: 2; max-width: 760px; display: flex; flex-direction: column; align-items: center; }

.hero__badge {
  font-family: var(--f-label); letter-spacing: .18em; text-transform: uppercase; font-size: 1rem; color: var(--yellow);
  background: rgba(8,5,18,.6); border: 1px solid var(--yellow); border-radius: 999px; padding: .35rem 1.1rem;
  box-shadow: 0 0 16px -4px var(--yellow); margin-bottom: 1.4rem; animation: neonOn 1.3s steps(1,end) both;
}
.hero__badge .dot { color: var(--green); animation: onair 1.7s steps(1) infinite; }

.hero__logo-wrap { position: relative; width: clamp(250px, 56vw, 400px); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: .1rem; }
.hero__logo-wrap::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(6,4,14,.6) 0%, rgba(6,4,14,.26) 44%, transparent 70%); }
.hero__logo { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(25,227,255,.4)) drop-shadow(0 0 26px rgba(255,45,155,.28)); }
@keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Ascuas / chispas sobre el fueguito del logo (partículas en canvas, ver js/app.js) */
.hero__flame { position: absolute; z-index: 2; left: 50%; top: -16%; transform: translateX(-50%); width: 30%; height: 56%; pointer-events: none;
  mix-blend-mode: screen; filter: drop-shadow(0 0 7px rgba(255,160,50,.6)); }

.hero__kick { font-family: var(--f-label); letter-spacing: .34em; text-transform: uppercase; font-size: 1rem; color: var(--cyan); text-shadow: 0 0 8px var(--cyan); margin-bottom: .3rem; }

/* Wordmark Monoton con neón en capas + encendido */
.hero__wordmark { --cat: var(--pink); font-family: var(--f-wordmark); font-weight: 400; line-height: .92;
  font-size: clamp(2.9rem, 11vw, 5.6rem); letter-spacing: .01em; color: #fff;
  text-shadow: var(--neon-1) #fff5fb, var(--neon-2) var(--pink), var(--neon-3) var(--pink),
    0 0 28px #ff0080, 0 0 56px color-mix(in srgb, var(--pink) 50%, transparent);
  animation: neonOn 1.4s steps(1,end) both; }
.hero__wordmark .wm-la { font-size: .56em; vertical-align: .55em; margin-right: .06em; }
.hero__wordmark .wm-flick { animation: flicker 7s steps(1) 2s infinite; }

.hero__slug { font-family: var(--f-label); font-weight: 600; font-size: clamp(1.1rem, 4vw, 1.7rem); text-transform: uppercase; letter-spacing: .26em; color: #fff; margin-top: .6rem; text-shadow: 0 0 6px var(--yellow), 0 0 16px var(--orange); }
.hero__slug b { color: var(--green); text-shadow: 0 0 7px var(--green), 0 0 18px #0a9d4a; font-weight: 600; }
.hero__slug .v { display: inline-block; width: .62em; height: .62em; vertical-align: -.04em; margin: 0 .15em; }
.hero__sub { font-family: var(--f-body); color: #e7e2ff; font-size: clamp(1rem, 2.2vw, 1.12rem); margin-top: 1.2rem; max-width: 42ch; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* Glitch SECUENCIAL por palabra — cada palabra glitchea en su turno (1 a la vez). --cycle/--delay desde js/app.js */
.gword { position: relative; display: inline-block; isolation: isolate; animation: wordSkew var(--cycle, 8s) steps(1) infinite; animation-delay: var(--delay, 0s); }
.gword--green { color: var(--green); text-shadow: 0 0 7px var(--green); }
.gword::before, .gword::after { content: attr(data-text); position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; }
.gword::before { color: var(--cyan); text-shadow: 0 0 5px var(--cyan); animation: wordGlA var(--cycle, 8s) steps(1) infinite; animation-delay: var(--delay, 0s); }
.gword::after  { color: var(--pink); text-shadow: 0 0 5px var(--pink); animation: wordGlB var(--cycle, 8s) steps(1) infinite; animation-delay: var(--delay, 0s); }
/* ráfaga breve al inicio del ciclo (~6.5%); el desfase por palabra hace que vayan 1 a 1 */
@keyframes wordGlA {
  0%   { opacity: 0; }
  0.6% { opacity: .8; transform: translate(-3px,-1px); clip-path: inset(8% 0 62% 0); }
  2%   { opacity: .8; transform: translate(3px,1px);   clip-path: inset(55% 0 18% 0); }
  3.5% { opacity: .8; transform: translate(-2px,0);    clip-path: inset(30% 0 46% 0); }
  5%   { opacity: .8; transform: translate(2px,-1px);  clip-path: inset(72% 0 6% 0); }
  6.5% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes wordGlB {
  0%   { opacity: 0; }
  0.6% { opacity: .8; transform: translate(3px,1px);   clip-path: inset(50% 0 22% 0); }
  2%   { opacity: .8; transform: translate(-3px,-1px); clip-path: inset(14% 0 64% 0); }
  3.5% { opacity: .8; transform: translate(2px,0);     clip-path: inset(66% 0 14% 0); }
  5%   { opacity: .8; transform: translate(-2px,1px);  clip-path: inset(36% 0 40% 0); }
  6.5% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes wordSkew {
  0%   { transform: skewX(0deg); }
  0.6% { transform: skewX(3deg); }
  3%   { transform: skewX(-2.5deg); }
  5.5% { transform: skewX(1.5deg); }
  6.5% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }
}
.hero__cta { display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; margin-top: 1.9rem; }
.hero__powered { margin-top: 1rem; font-family: var(--f-label); letter-spacing: .16em; text-transform: lowercase; font-size: .74rem; color: var(--dim); }
.hero__powered a { color: var(--cyan); text-decoration: none; font-weight: 700; transition: text-shadow .25s, color .25s; }
.hero__powered a:hover { color: #fff; text-shadow: 0 0 10px var(--cyan), 0 0 18px var(--cyan); }

.hero__scroll { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .15rem; text-decoration: none; }
.hero__scroll-txt { font-family: var(--f-label); letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }
.hero__scroll-arrows { display: flex; flex-direction: column; align-items: center; line-height: .5; }
.hero__scroll-arrows i { font-size: 1.15rem; animation: scrollChev 1.5s ease-in-out infinite; }
.hero__scroll-arrows i:nth-child(1) { color: var(--cyan);  filter: drop-shadow(0 0 6px var(--cyan)); }
.hero__scroll-arrows i:nth-child(2) { color: var(--pink);  filter: drop-shadow(0 0 6px var(--pink)); margin-top: -.42rem; animation-delay: .18s; }
.hero__scroll:hover .hero__scroll-arrows i { animation-duration: .9s; }
@keyframes scrollChev { 0%,100% { transform: translateY(-2px); opacity: .45; } 50% { transform: translateY(3px); opacity: 1; } }

/* ── Marquesina / ticker ────────────────────────────────────────── */
.ticker { position: relative; z-index: 1; overflow: hidden; border-top: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); background: rgba(6,4,14,.6); padding: .5rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker__track { display: flex; align-items: center; width: max-content; gap: 0; animation: tickerScroll 34s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__cell { flex-shrink: 0; line-height: 0; font-size: 0; }
.ticker__vid { height: 150px; width: 84px; object-fit: cover; border-radius: 12px; margin: 0 .4rem; display: block; background: #0a0711; border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); box-shadow: 0 0 16px -5px var(--cyan); }
@keyframes tickerScroll { to { transform: translateX(-50%); } }

/* ── Sección menú ───────────────────────────────────────────────── */
.menu { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem,6vw,4rem) clamp(1rem,4vw,2rem) 5rem; }

.section-head { --cat: var(--cyan); text-align: center; margin-bottom: clamp(2rem,5vw,3.5rem); }
.section-head__kicker { font-family: var(--f-label); letter-spacing: .3em; text-transform: uppercase; font-size: 1rem; color: var(--pink); text-shadow: 0 0 10px var(--pink); }
.section-head__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem,7vw,3.4rem); text-transform: uppercase; letter-spacing: -.01em; margin: .35rem 0 .7rem; }
.section-head__hint { font-family: var(--f-body); color: var(--muted); font-size: .95rem; }
.section-head__hint strong { color: var(--yellow); }

/* Ecualizador (acento musical) */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; margin-top: 1rem; }
.eq span { width: 4px; height: 30%; border-radius: 2px; background: var(--pink); box-shadow: 0 0 8px var(--pink); transform-origin: bottom; animation: eq 1s ease-in-out infinite alternate; }
.eq span:nth-child(2){ background: var(--cyan); box-shadow:0 0 8px var(--cyan); animation-duration: 1.3s; }
.eq span:nth-child(3){ background: var(--yellow); box-shadow:0 0 8px var(--yellow); animation-duration: .85s; }
.eq span:nth-child(4){ background: var(--green); box-shadow:0 0 8px var(--green); animation-duration: 1.15s; }
.eq span:nth-child(5){ background: var(--purple); box-shadow:0 0 8px var(--purple); animation-duration: .95s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* Cabecera de categoría = mini-letrero */
.cat { margin-bottom: clamp(2.5rem,6vw,4rem); scroll-margin-top: 88px;
  /* Render diferido: el navegador omite render/paint (y los blur) de las
     categorías fuera de pantalla. Invisible; gran mejora de scroll con 131 tarjetas.
     `auto` recuerda el alto real tras el primer render; 700px es la estimación inicial. */
  content-visibility: auto; contain-intrinsic-size: auto 700px; }
.cat__head { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.cat__icon { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; font-size: 1.5rem; border-radius: 14px;
  background: color-mix(in srgb, var(--cat) 14%, rgba(8,5,18,.7)); border: 1.5px solid var(--cat); box-shadow: 0 0 16px -3px var(--cat), inset 0 0 14px -8px var(--cat); }
.cat__titles { display: flex; flex-direction: column; gap: .1rem; }
.cat__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.5rem,4.4vw,2.1rem); line-height: 1; text-transform: uppercase; letter-spacing: -.01em;
  color: #fff; -webkit-text-stroke: 1px #000; paint-order: stroke fill;
  /* Efecto "rainbow text": extrusión 3D arcoíris (desktop y móvil por igual) */
  text-shadow:
    1px 2px #FFD20E,  1px 4px #EC8401,  2px 6px #E65C04,  2px 8px #E52E06,
    3px 10px #DE006B, 3px 12px #CA039E, 4px 14px #A203CB, 4px 16px #6D01C9,
    5px 18px #22008F, 5px 20px #0045AC, 6px 22px #007DB2, 6px 24px #00B8D9,
    5px 27px 6px rgba(0,0,0,.5); }
.cat__title.is-lit { animation: litPulse .3s steps(1,end); }
.cat__rule { height: 2px; border-radius: 2px; margin-bottom: 1.4rem; background: linear-gradient(90deg, var(--cat), color-mix(in srgb, var(--cat) 10%, transparent)); box-shadow: 0 0 8px -1px var(--cat); }
.cat__note { font-family: var(--f-body); color: var(--muted); font-size: .9rem; margin-top: .9rem; font-style: italic; padding-left: .2rem; }

/* ── Tarjeta de plato = comanda con leader-dots ─────────────────── */
.dishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; align-items: stretch; }
/* Tarjeta glassmorphism: vidrio esmerilado translúcido sobre el mural */
.dish {
  position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 1.05rem 1.15rem; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, rgba(22,17,38,.42), rgba(8,6,16,.56));
  -webkit-backdrop-filter: blur(16px) saturate(135%); backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 44px -24px #000;
  transition: transform .28s, box-shadow .28s, border-color .28s;
}
.dish:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cat) 65%, rgba(255,255,255,.25)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 26px -8px var(--cat), 0 26px 52px -26px #000; }
.dish:hover .dish__leader { border-bottom-style: solid; border-bottom-color: var(--cat); }

/* Foto opcional del plato (se muestra solo si el plato tiene `img` en data.js) */
.dish__photo { position: relative; margin: -1.05rem -1.15rem .15rem; height: 150px; line-height: 0; }
.dish__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dish__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,6,16,0) 45%, rgba(8,6,16,.6)); }

.dish__line { display: flex; align-items: baseline; gap: .5rem; }
.dish__name { font-family: var(--f-body); font-weight: 600; font-size: 1.06rem; line-height: 1.25; color: #fff; }
.dish__leader { flex: 1; min-width: 14px; border-bottom: 1.5px dotted color-mix(in srgb, var(--cat) 45%, transparent); transform: translateY(-4px); transition: border-color .28s; }
.dish__price { font-family: var(--f-display); font-weight: 800; font-size: 1.28rem; white-space: nowrap; font-feature-settings: "tnum","lnum"; }

.dish__tag { display: inline-block; align-self: flex-start; font-family: var(--f-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; padding: .14rem .7rem; border-radius: 6px; color: #fff; background: color-mix(in srgb, var(--cat) 24%, transparent); border: 1px solid var(--cat); box-shadow: 0 0 12px -4px var(--cat); transform: rotate(-1.5deg); }
.dish__desc { font-family: var(--f-body); color: var(--muted); font-size: .9rem; line-height: 1.45; }

.dish__buy { display: flex; margin-top: auto; padding-top: .2rem; }
/* Botón "Agregar al carrito" estilo vidrio (glassmorphism), ancho completo */
.add-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 46px; padding: .6rem 1rem; border-radius: 14px;
  font-family: var(--f-body); font-weight: 700; font-size: .95rem; color: #fff;
  background: rgba(255,255,255,.09); /* sin backdrop-filter: el blur no se notaba sobre la tarjeta y pesaba ~131 veces */
  border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 20px -14px #000;
  transition: transform .18s, box-shadow .18s, background .18s, border-color .18s; }
.add-btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--cat) 24%, rgba(255,255,255,.06)); border-color: var(--cat); box-shadow: 0 0 24px -6px var(--cat), inset 0 1px 0 rgba(255,255,255,.22); }
.add-btn:active { transform: scale(.97); }
.add-btn.pulse { animation: addPulse .45s ease-out; }
.add-btn svg { width: 18px; height: 18px; }

.variants { display: flex; flex-direction: column; gap: .45rem; margin-top: .15rem; }
.variant { display: flex; align-items: center; gap: .5rem; }
.variant__label { font-family: var(--f-body); font-size: .92rem; color: var(--muted); }
.variant__price { font-family: var(--f-display); font-weight: 800; font-size: 1.02rem; font-feature-settings: "tnum","lnum"; }
.variant .dish__leader { transform: translateY(0); align-self: center; }
.variant .add-btn { width: auto; min-height: 36px; padding: .4rem .55rem; border-radius: 10px; flex-shrink: 0; }
.variant .add-btn span { display: none; }

/* ── Footer ─────────────────────────────────────────────────────── */
.footer { position: relative; z-index: 1; text-align: center; padding: 3.5rem 1.5rem 8rem; border-top: 1px solid rgba(216,178,90,.25); background: rgba(6,4,14,.6); }
.footer::before, .footer::after { content: ""; position: absolute; width: 46px; height: 46px; opacity: .4; }
.footer::before { top: 18px; left: 18px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.footer::after  { top: 18px; right: 18px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.footer__logo { width: 120px; height: 120px; object-fit: contain; margin: 0 auto .4rem; filter: drop-shadow(0 0 14px rgba(255,45,155,.4)); }
.footer__name { --cat: var(--pink); font-family: var(--f-wordmark); font-weight: 400; font-size: clamp(2rem,8vw,2.8rem); line-height: 1; color: #fff;
  text-shadow: var(--neon-1) #fff5fb, var(--neon-2) var(--pink), 0 0 18px var(--pink); }
.footer__slug { font-family: var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 8px var(--cyan); margin-top: .5rem; }
.footer__info { font-family: var(--f-body); display: flex; flex-direction: column; gap: .3rem; color: var(--muted); font-size: .92rem; margin: 1.2rem 0; }
.footer__ig { display: inline-block; font-family: var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); border: 1px solid var(--yellow); padding: .5rem 1.3rem; border-radius: 999px; font-size: .9rem; box-shadow: 0 0 14px -5px var(--yellow); transition: all .25s; }
.footer__ig:hover { background: rgba(255,210,63,.1); box-shadow: 0 0 20px -3px var(--yellow); }
.footer__credit { font-family: var(--f-body); color: var(--dim); font-size: .8rem; margin-top: 1.6rem; }
.footer__credit a { color: var(--cyan); text-decoration: none; font-weight: 600; transition: text-shadow .25s, color .25s; }
.footer__credit a:hover { color: #fff; text-shadow: 0 0 10px var(--cyan), 0 0 18px var(--cyan); }

/* ── FAB (móvil) ────────────────────────────────────────────────── */
.fab { position: fixed; right: max(.85rem, env(safe-area-inset-right)); bottom: max(.85rem, env(safe-area-inset-bottom)); z-index: 55; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: .4rem; padding: .28rem .42rem .28rem .32rem; border-radius: 999px; color: #fff; font-family: var(--f-body); font-weight: 700; font-size: .8rem;
  /* Liquid chrome: metal líquido animado (recreado en CSS, sin WebGL/ogl) */
  background: linear-gradient(115deg, #1f2329 0%, #6b7280 9%, #cfd6e0 17%, #ffffff 23%, #a7afbd 31%, #474e5a 43%, #99a2b1 53%, #ffffff 61%, #c2cad6 67%, #515865 79%, #b9c1ce 90%, #262b33 100%);
  background-size: 280% 280%;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 8px 22px -8px rgba(0,0,0,.7), 0 14px 36px -12px #000, inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 6px -2px rgba(0,0,0,.5);
  transition: transform .25s cubic-bezier(.2,.85,.25,1), box-shadow .25s;
  animation: fabIn .45s cubic-bezier(.34,1.56,.64,1), chromeFlow 6s linear infinite; max-width: calc(100vw - 1.7rem); }
.fab[hidden] { display: none; }
.fab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; mix-blend-mode: overlay; opacity: .5;
  background: conic-gradient(from 0deg at 50% 50%, rgba(25,227,255,.55), rgba(157,75,255,.55), rgba(255,45,155,.55), rgba(255,210,63,.55), rgba(61,255,160,.55), rgba(25,227,255,.55));
  background-size: 200% 200%; animation: chromeFlow 8.5s linear infinite reverse; }
.fab::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; z-index: -1; pointer-events: none; transform: translateX(-170%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: fabShine 5s ease-in-out 1.2s infinite; }
.fab:hover, .fab:focus-visible { transform: translateY(-2px) scale(1.03); }
.fab:active { transform: scale(.96); }
.fab__icon { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(8,8,12,.55); border: 1px solid rgba(255,255,255,.5); font-size: .76rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.5); }
.fab__label { display: none; }
.fab__total { font-family: var(--f-display); font-weight: 800; background: rgba(0,0,0,.55); padding: .22rem .55rem; border-radius: 999px; font-size: .82rem; font-feature-settings: "tnum"; text-shadow: 0 1px 2px rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
@keyframes fabIn { from { transform: translateY(140%); } }
@keyframes chromeFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes fabShine { 0% { transform: translateX(-170%) skewX(-20deg); } 24%,100% { transform: translateX(360%) skewX(-20deg); } }

/* Sparkles del FAB — efecto "SparklesText" recreado en vanilla (sin React/framer-motion) */
.fab__sparkles { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; }
.fab__spark { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; opacity: 0; transform: scale(0); transform-origin: center; will-change: transform, opacity; animation: fabSparkle .9s linear infinite; }
.fab__spark svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 3px currentColor); }
@keyframes fabSparkle {
  0%   { opacity: 0; transform: scale(0) rotate(75deg); }
  50%  { opacity: 1; transform: scale(var(--s, 1)) rotate(120deg); }
  100% { opacity: 0; transform: scale(0) rotate(150deg); }
}
@media (prefers-reduced-motion: reduce) { .fab__sparkles { display: none; } }

/* ── Carrito (drawer) ───────────────────────────────────────────── */
.drawer-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.66); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s; }
.drawer-overlay.is-open { opacity: 1; }
.drawer-overlay[hidden] { display: none; }
.drawer { position: fixed; top: 0; right: 0; z-index: 80; height: 100svh; width: min(420px, 100vw); display: flex; flex-direction: column;
  background: var(--bg-2); border-left: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); box-shadow: -30px 0 80px -20px #000, -1px 0 30px -10px var(--cyan);
  transform: translateX(105%); transition: transform .42s cubic-bezier(.22,.9,.25,1); }
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 1.4rem; border-bottom: 1px solid rgba(216,178,90,.22); }
.drawer__head h2 { --cat: var(--cyan); font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.4rem; color: #fff; text-shadow: 0 0 10px var(--cyan); }
.drawer__close { font-size: 2rem; line-height: 1; color: var(--muted); width: 40px; height: 40px; border-radius: 10px; transition: all .2s; }
.drawer__close:hover { color: #fff; background: rgba(255,255,255,.06); }
.drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; }
.drawer__body::-webkit-scrollbar { width: 6px; }
.drawer__body::-webkit-scrollbar-thumb { background: #2a2148; border-radius: 6px; }
.citem { display: flex; gap: .8rem; align-items: center; padding: .8rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); animation: itemIn .3s ease; }
@keyframes itemIn { from { opacity: 0; transform: translateY(8px); } }
.citem__info { flex: 1; min-width: 0; }
.citem__name { font-family: var(--f-body); font-weight: 600; font-size: .96rem; line-height: 1.2; color: #fff; }
.citem__meta { font-family: var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); font-size: .8rem; margin-top: .15rem; }
.citem__price { font-family: var(--f-display); font-weight: 800; color: var(--cyan); font-size: .95rem; margin-top: .25rem; font-feature-settings: "tnum"; }
.citem__qty { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.qbtn { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 1.2rem; font-weight: 700; background: rgba(255,255,255,.06); color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); transition: all .2s; }
.qbtn:hover { background: var(--pink); color: #fff; border-color: transparent; box-shadow: 0 0 12px -2px var(--pink); }
.citem__count { min-width: 20px; text-align: center; font-family: var(--f-display); font-weight: 700; }
.drawer__empty { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); gap: .3rem; padding: 2rem; }
.drawer__empty-icon { font-size: 3rem; opacity: .5; margin-bottom: .5rem; }
.drawer__empty span { color: var(--dim); font-size: .9rem; }
.drawer.is-empty .drawer__body { display: none; }
.drawer.is-empty .drawer__empty { display: flex; }
.drawer.is-empty .drawer__foot { display: none; }
.drawer__foot { padding: 1.1rem 1.4rem max(1.1rem, env(safe-area-inset-bottom)); border-top: 1px solid rgba(216,178,90,.22); background: var(--bg); display: flex; flex-direction: column; gap: .8rem; }
.order-type { display: flex; gap: .4rem; }
.order-type__opt { flex: 1; }
.order-type__opt input { position: absolute; opacity: 0; pointer-events: none; }
.order-type__opt span { display: flex; align-items: center; justify-content: center; gap: .25rem; padding: .55rem .3rem; border-radius: 10px; font-family: var(--f-label); letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; font-weight: 600; color: var(--muted); border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); transition: all .2s; text-align: center; }
.order-type__opt input:checked + span { color: #fff; border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 18%, transparent); box-shadow: 0 0 14px -4px var(--cyan); }
.field { position: relative; }
.field input, .field textarea { width: 100%; padding: .95rem .9rem .55rem; border-radius: 12px; resize: none; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: var(--text); font-family: var(--f-body); font-size: .95rem; transition: border-color .2s, box-shadow .2s; }
.field textarea { padding-top: 1.1rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 14px -5px var(--cyan); }
.field label { position: absolute; left: .9rem; top: .8rem; color: var(--dim); font-size: .95rem; pointer-events: none; transition: all .2s; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { top: .3rem; font-size: .68rem; color: var(--cyan); }
#addressField { display: none; }
#addressField.show { display: block; }
.drawer__total { display: flex; align-items: center; justify-content: space-between; padding-top: .2rem; }
.drawer__total span { font-family: var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.drawer__total strong { --cat: var(--yellow); font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; font-feature-settings: "tnum","lnum"; }
.btn-wa { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: 1.05rem; border-radius: 14px; font-family: var(--f-body); font-weight: 700; font-size: 1.05rem; color: #fff; background: linear-gradient(135deg, var(--wa), var(--wa-dark)); box-shadow: 0 0 22px -4px var(--wa); transition: transform .2s, box-shadow .2s, filter .2s; }
.btn-wa:not(:disabled) { animation: waBreathe 3.6s ease-in-out infinite; }
.btn-wa:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 32px -2px var(--wa); }
.btn-wa:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); box-shadow: none; animation: none; }
.drawer__disclaimer { text-align: center; font-family: var(--f-body); color: var(--dim); font-size: .76rem; }

/* ── Toast ──────────────────────────────────────────────────────── */
.toast { position: fixed; bottom: 5.5rem; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 90; padding: .8rem 1.3rem; border-radius: 999px; font-family: var(--f-body); font-weight: 600; font-size: .92rem; background: var(--bg-2); color: #fff; border: 1px solid var(--cyan); box-shadow: 0 0 22px -4px var(--cyan); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; white-space: nowrap; max-width: calc(100vw - 2rem); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Reveal ─────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ── Keyframes de letrero ───────────────────────────────────────── */
@keyframes neonOn { 0%{opacity:0;} 8%{opacity:.1;} 12%{opacity:0;} 20%{opacity:.1;} 28%{opacity:1;} 34%{opacity:.25;} 42%{opacity:1;} 100%{opacity:1;} }
@keyframes flicker { 0%,100%{opacity:1;} 0.5%{opacity:.55;} 1%{opacity:1;} 1.5%{opacity:.4;} 2%{opacity:1;} }
@keyframes litPulse { 0%{opacity:.3;} 50%{opacity:1;} 100%{opacity:1;} }
@keyframes addPulse { 0%{box-shadow:0 0 0 0 var(--cat);} 100%{box-shadow:0 0 0 18px transparent;} }
@keyframes waBreathe { 0%,100%{box-shadow:0 0 18px -6px var(--wa);} 50%{box-shadow:0 0 30px 0 var(--wa);} }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (min-width: 600px) { .topbar__name { display: block; } }
/* el FAB (píldora "ver pedido") es ahora el acceso al carrito en todos los tamaños */
@media (max-width: 760px) {
  body::before { background-image: url("../images/mural-mobile.png"); }
  .hero { background-image: url("../images/mural-mobile.png"); }
}
@media (max-width: 560px) {
  /* tarjetas del menú de 2 en 2 */
  .dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .dish { padding: .8rem .75rem; gap: .4rem; }
  .dish__line { align-items: flex-start; gap: .4rem; }
  .dish__name { font-size: .9rem; line-height: 1.2; flex: 1; min-width: 0; }
  .dish__leader { display: none; }
  .dish__price { font-size: 1rem; }
  .dish__tag { font-size: .68rem; }
  .dish__desc { font-size: .8rem; }
  .variant__label { flex: 1; }
  .add-btn { min-height: 38px; padding: .45rem .6rem; font-size: .82rem; gap: .35rem; border-radius: 11px; }
  .add-btn__more { display: none; } /* en 2 columnas solo "Agregar" */
  .add-btn svg { width: 15px; height: 15px; }
  .variant .add-btn { min-height: 32px; padding: .3rem .45rem; }
  .dish__photo { margin: -.8rem -.75rem .1rem; height: 112px; }
  /* videos de la cinta, tamaño cool en móvil */
  .ticker__vid { height: 116px; width: 65px; border-radius: 10px; margin: 0 .3rem; }
  /* 2 botones arriba + 1 largo (WhatsApp) abajo */
  .hero__cta { gap: .7rem; }
  .btn--menu, .btn--maps { flex: 1 1 0; min-width: 0; }
  .btn--wa { flex: 1 1 100%; justify-content: center; }
  .drawer { width: 100vw; border-left: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__wordmark, .hero__badge, .footer__name { opacity: 1 !important; }
  .ticker__track { transform: none; }
  .eq span { transform: scaleY(.6); }
  .gword { transform: none; }
  .gword::before, .gword::after { display: none; }
}

/* ============================================================================
   LA MARUCHA · MEJORAS SOLO-ESCRITORIO (inspirado en somostundra.com)
   ----------------------------------------------------------------------------
   TODO va dentro de @media (min-width:...), así el bloque móvil (≤560px) y el
   cambio de mural (≤760px) NUNCA se tocan: el celular queda idéntico.
   Solo escala/re-posiciona los componentes existentes; la identidad neón
   (botones Shiny, títulos arcoíris 3D, glass cards, navbar tubelight, FAB,
   ascuas, estrellas fugaces) se mantiene intacta. Dos elementos nuevos
   (.info-strip y .section-head__action) se ocultan ≤767px con el guard final.
   ============================================================================ */

/* ░░ TABLET / DESKTOP ░░ ──────────────────────────────────────────────────── */
@media (min-width: 768px) {

  :root { --maxw: 1320px; }

  /* ── HÉROE: que deje de ser una isla de 760px ─────────────────────────── */
  .hero { padding: clamp(6rem, 13vh, 9rem) 2rem clamp(4rem, 7vh, 6rem); }
  .hero__inner { max-width: 940px; width: 100%; }
  .hero__logo-wrap { width: clamp(330px, 40vw, 440px); margin-bottom: .35rem; }
  .hero__kick { font-size: 1.28rem; letter-spacing: .42em; margin-bottom: .5rem; }
  .hero__slug { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: .24em; line-height: 1.08; margin-top: .8rem; }
  .hero__sub { font-size: 1.18rem; margin-top: 1.5rem; max-width: 46ch; }

  .hero__cta { gap: 1.1rem; margin-top: 2.4rem; flex-wrap: nowrap; align-items: stretch; }
  /* Escala los botones Shiny — el borde cónico @property, los puntos y el
     shimmer se heredan intactos; solo cambia padding / tamaño / chip de ícono. */
  .hero__cta .btn { padding: 1.15rem 2.3rem; font-size: 1.12rem; --shadow-size: 3px; }
  .hero__cta .btn i { font-size: 1.1em; }
  .hero__cta .btn--wa { padding: .85rem 2rem .85rem 1rem; }
  .hero__cta .btn--wa .sb { gap: 1rem; }
  .hero__cta .btn--wa .btn__ic { width: 46px; height: 46px; font-size: 1.3rem; }
  .hero__cta .btn--wa .btn__tx b { font-size: 1.16rem; }
  .hero__cta .btn--wa .btn__tx small { font-size: .82rem; }

  .hero__powered { margin-top: 1.5rem; font-size: .8rem; }

  /* ── FRANJA DE DATOS (estilo Tundra) — inyectada por JS tras el héroe ──── */
  .info-strip { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 1px;
    max-width: var(--maxw); margin: -1rem auto 0; padding: 0 clamp(1rem, 4vw, 2rem); position: relative; z-index: 2; }
  .info-strip__cell { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .3rem;
    padding: 1.5rem 1.6rem; background: var(--panel); border: 1px solid rgba(216,178,90,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
  .info-strip__cell:first-child { border-radius: var(--radius) 0 0 var(--radius); }
  .info-strip__cell:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
  .info-strip__cell + .info-strip__cell { border-left: none; }
  .info-strip__top { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--f-display); font-weight: 800; font-size: 1.45rem; line-height: 1.05; color: #fff; }
  .info-strip__top i { color: var(--cat, var(--cyan)); text-shadow: 0 0 10px var(--cat, var(--cyan)); font-size: .9em; }
  .info-strip__sub { font-family: var(--f-label); letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; color: var(--muted); }
  .info-strip__cell:nth-child(1) { --cat: var(--yellow); }
  .info-strip__cell:nth-child(2) { --cat: var(--green); }
  .info-strip__cell:nth-child(3) { --cat: var(--cyan); }

  /* ── NAVBAR — un poco más grande ──────────────────────────────────────── */
  .topbar { padding: .6rem clamp(1.2rem, 3vw, 2.2rem); gap: 1.3rem; }
  .topbar__logo { width: 50px; height: 50px; }
  .topbar__name { font-size: 1.32rem; }
  .catnav { gap: .2rem; padding: .35rem; }
  .catnav__pill { padding: .58rem 1.25rem; font-size: 1.06rem; letter-spacing: .07em; }
  .catnav__lamp { top: .35rem; bottom: .35rem; }
  .cart-btn { width: 50px; height: 50px; }
  .cart-btn svg { width: 24px; height: 24px; }
  .topbar__search { width: clamp(180px, 22vw, 260px); padding: .55rem .85rem; }
  .topbar__search input { font-size: .98rem; }

  /* ── MENÚ: espaciado deliberado + wordmark gigante de fondo ────────────── */
  .menu { padding: clamp(4rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem) 7rem; }
  .menu::before {
    content: "LA MARUCHA"; position: absolute; top: clamp(7rem, 16vh, 12rem); left: 50%; transform: translateX(-50%);
    z-index: -1; pointer-events: none; font-family: var(--f-wordmark); font-weight: 400; white-space: nowrap;
    font-size: clamp(7rem, 16vw, 15rem); line-height: .8; letter-spacing: .02em; color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--pink) 22%, transparent);
    text-shadow: 0 0 60px color-mix(in srgb, var(--pink) 10%, transparent); opacity: .5;
  }

  /* ── ENCABEZADO DE MENÚ: eyebrow + titular grande + acción a la derecha ── */
  .section-head { text-align: left; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 2rem; margin-bottom: clamp(3rem, 5vw, 4.5rem); }
  .section-head__kicker { grid-column: 1; font-size: 1.15rem; letter-spacing: .34em; }
  .section-head__kicker::before { content: "— "; color: var(--pink); opacity: .8; }
  .section-head__title { grid-column: 1; font-size: clamp(3.2rem, 5.2vw, 4.2rem); line-height: .98; letter-spacing: -.02em; margin: .5rem 0 0; }
  .section-head__hint { grid-column: 1; font-size: 1.05rem; margin-top: .9rem; }
  .section-head .eq { grid-column: 1; grid-row: auto; align-self: start; margin-top: 1rem; }
  .section-head__action { display: inline-flex; grid-column: 2; grid-row: 1 / span 4; align-self: end; justify-self: end; align-items: center; gap: .5rem;
    font-family: var(--f-label); text-transform: uppercase; letter-spacing: .14em; font-size: 1rem; font-weight: 600;
    color: var(--cyan); text-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 60%, transparent); white-space: nowrap; transition: gap .25s, text-shadow .25s, color .25s; }
  .section-head__action:hover { color: #fff; gap: .85rem; text-shadow: 0 0 12px var(--cyan), 0 0 22px var(--cyan); }
  .section-head:not(:has(.section-head__action)) .eq { align-self: end; }

  /* ── CABECERA DE CATEGORÍA (títulos arcoíris): SOLO ESCALA ─────────────── */
  .cat { margin-bottom: clamp(3.5rem, 6vw, 5rem); }
  .cat__head { gap: 1.1rem; margin-bottom: 1.1rem; }
  .cat__icon { width: 60px; height: 60px; font-size: 1.8rem; }
  .cat__title { font-size: clamp(2.2rem, 3.4vw, 2.9rem); letter-spacing: -.02em; line-height: 1; }
  .cat__rule { margin-bottom: 1.7rem; }

  /* ── GRID DE PLATOS: tarjetas generosas ───────────────────────────────── */
  .dishes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
  .dish { padding: 1.35rem 1.5rem; border-radius: 20px; gap: .65rem; }
  .dish__photo { margin: -1.35rem -1.5rem .2rem; height: 172px; }
  .dish:hover { transform: translateY(-7px); }
  .dish__name { font-size: 1.12rem; }
  .dish__price { font-size: 1.36rem; }
  .dish__desc { font-size: .94rem; }

  /* ── BOTÓN "Agregar al carrito" — más contundente ─────────────────────── */
  .add-btn { min-height: 54px; padding: .8rem 1.2rem; border-radius: 16px; font-size: 1rem; gap: .6rem; }
  .add-btn svg { width: 20px; height: 20px; }
  .add-btn:hover { transform: translateY(-3px); }
  .variant .add-btn { min-height: 42px; padding: .5rem .7rem; border-radius: 12px; }
  .variant .add-btn svg { width: 18px; height: 18px; }
}

/* ░░ ESCRITORIO GRANDE ░░ ─────────────────────────────────────────────────── */
@media (min-width: 1200px) {

  :root { --maxw: 1400px; }

  .hero { padding: clamp(7rem, 14vh, 10rem) 2.5rem 6rem; }
  .hero__inner { max-width: 1040px; }
  .hero__logo-wrap { width: clamp(400px, 32vw, 480px); }
  .hero__kick { font-size: 1.45rem; letter-spacing: .46em; }
  .hero__slug { font-size: clamp(2rem, 2.4vw, 2.6rem); letter-spacing: .22em; }
  .hero__sub  { font-size: 1.26rem; }

  .hero__cta { gap: 1.25rem; margin-top: 3rem; }
  .hero__cta .btn { padding: 1.3rem 2.7rem; font-size: 1.2rem; }
  .hero__cta .btn--wa { padding: .95rem 2.4rem .95rem 1.05rem; }
  .hero__cta .btn--wa .btn__ic { width: 50px; height: 50px; font-size: 1.4rem; }
  .hero__cta .btn--wa .btn__tx b { font-size: 1.24rem; }

  .info-strip { margin-top: -1.4rem; }
  .info-strip__cell { padding: 1.8rem 2rem; }
  .info-strip__top { font-size: 1.7rem; }
  .info-strip__sub { font-size: .86rem; }

  .catnav__pill { padding: .62rem 1.4rem; font-size: 1.12rem; }

  .menu { padding: clamp(5rem, 6vw, 7rem) clamp(2.5rem, 3vw, 3.5rem) 8rem; }
  .menu::before { font-size: clamp(11rem, 15vw, 18rem); opacity: .6; }

  .section-head__title { font-size: clamp(4rem, 4.4vw, 5.2rem); }
  .section-head__kicker { font-size: 1.25rem; }
  .cat__title { font-size: clamp(2.6rem, 2.8vw, 3.4rem); }

  .dishes { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.6rem; }
  .dish { padding: 1.5rem 1.65rem; }
  .dish__photo { margin: -1.5rem -1.65rem .25rem; height: 188px; }
  .dish__price { font-size: 1.48rem; }
  .add-btn { min-height: 58px; font-size: 1.05rem; }
}

/* ░░ GUARD: ocultar los 2 elementos nuevos ≤767px (no toca el bloque móvil) ░░ */
@media (max-width: 767px) {
  .info-strip,
  .section-head__action { display: none !important; }
}