/* ==========================================================================
   BURGERS VS TACOS — hoja de estilos principal
   San Antonio, TX
   --------------------------------------------------------------------------
   1.  Tokens y reset
   2.  Utilidades y tipografía
   3.  Botones
   4.  Navbar
   5.  Hero (video)
   6.  Ticker
   7.  Sobre nosotros
   8.  Ruleta
   9.  Menú
   10. Galería / carrusel
   11. Promociones
   12. Opiniones
   13. Horarios y ubicación
   14. Redes sociales
   15. Footer
   16. Flotantes y lightbox
   17. Animaciones de scroll
   18. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS Y RESET
   ========================================================================== */
:root{
  /* Marca */
  --ink:      #0A0C10;
  --ink-2:    #11151E;
  --ink-3:    #1A1F2B;
  --navy:     #14305C;
  --orange:   #FF6A13;
  --orange-d: #E1550A;
  --red:      #E0362B;
  /* White text on the brand red measures 4.43:1 at small sizes — just under the
     4.5 AA floor. This slightly deeper red is indistinguishable in the layout
     and clears 5:1, so small white-on-red type stays legible. */
  --red-deep: #D0302A;
  --yellow:   #FFC229;
  --cream:    #F7F1E4;
  --white:    #FFFFFF;
  /* Azules del letrero oficial de la fachada */
  --blue:     #1B6FB0;
  --blue-l:   #4FA8E0;
  --wine:     #7C1F2B;

  /* Texto */
  --tx:       #F4F1EA;
  --tx-soft:  rgba(244,241,234,.66);
  /* Was .42, which computed to 3.72:1 over the dark base — every footer link
     and muted caption on the site failed AA. .52 clears 5:1 and still reads as
     secondary next to --tx-soft. */
  --tx-mute:  rgba(244,241,234,.52);

  /* Superficies */
  --glass:    rgba(255,255,255,.055);
  --glass-2:  rgba(255,255,255,.09);
  --line:     rgba(255,255,255,.10);
  --line-2:   rgba(255,255,255,.18);

  /* Sombras */
  --sh-sm: 0 2px 10px rgba(0,0,0,.35);
  --sh-md: 0 14px 38px rgba(0,0,0,.42);
  --sh-lg: 0 30px 80px rgba(0,0,0,.55);
  --sh-glow: 0 12px 40px rgba(255,106,19,.32);

  /* Medidas */
  --nav-h: 76px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --maxw: 1240px;
  --pad:  clamp(18px, 5vw, 40px);
  --hero-col: 560px;   /* hero copy column — sized to its content, see .hero__content */

  /* Curvas */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--tx);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.68;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video,iframe{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
address{ font-style:normal; }

svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* Los iconos de marca (Instagram, Facebook…) son de relleno, no de trazo.
   Hay que reponer el fill porque el CSS gana al atributo del SVG. */
svg[fill="currentColor"]{ fill:currentColor; stroke:none; }

::selection{ background:var(--orange); color:#111; }

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

/* Scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:#2A3140; border-radius:8px; border:3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--orange); }


/* ==========================================================================
   2. UTILIDADES Y TIPOGRAFÍA
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

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

/* The hidden attribute must beat a component's own display value. .sbtn and
   .fab both set display, which silently defeats plain [hidden] — that is how a
   button meant to stay off could still render. */
[hidden]{ display:none !important; }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:2000;
  background:var(--orange); color:#111; font-weight:700;
  padding:12px 20px; border-radius:0 0 var(--r-sm) var(--r-sm);
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:0; }

.section{
  position:relative;
  padding:clamp(72px,9vw,132px) 0;
}
.section:nth-of-type(even){ background:var(--ink-2); }

.section__head{
  max-width:720px;
  margin:0 auto clamp(40px,5vw,64px);
  text-align:center;
}

.eyebrow{
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:14px;
}
.eyebrow::before{ content:"— "; color:var(--tx-mute); }

.h2{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(2.6rem,6.4vw,5rem);
  line-height:.92;
  letter-spacing:.012em;
  text-transform:uppercase;
}
.h2--sm{ font-size:clamp(2rem,3.6vw,2.9rem); }

.hl{
  position:relative;
  color:var(--orange);
  white-space:nowrap;
}
.hl::after{
  content:"";
  position:absolute; left:0; right:0; bottom:.06em; height:.1em;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .7s var(--ease-out) .25s;
}
[data-reveal].is-in .hl::after,
.is-in .hl::after{ transform:scaleX(1); }

.section__lead{
  margin-top:18px;
  color:var(--tx-soft);
  font-size:1.02rem;
}
.section__lead a{ color:var(--orange); font-weight:600; }
.section__lead a:hover{ color:var(--yellow); }
.section__lead--warn{
  display:inline-block;
  background:rgba(255,194,41,.09);
  border:1px dashed rgba(255,194,41,.4);
  border-radius:var(--r-md);
  padding:12px 20px;
  font-size:.92rem;
  color:rgba(255,214,120,.9);
}

.chip{
  display:inline-block;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:100px;
  padding:7px 16px;
  font-size:.84rem;
  font-weight:500;
  backdrop-filter:blur(8px);
}


/* ==========================================================================
   3. BOTONES
   ========================================================================== */
.btn{
  --btn-bg:var(--orange);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px;
  border-radius:100px;
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:.86rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
  transition:transform .3s var(--ease-bounce), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn svg{ width:1.15em; height:1.15em; }

.btn--primary{
  background:var(--btn-bg);
  color:#12100C;
  box-shadow:var(--sh-glow);
}
.btn--primary::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn--primary:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 46px rgba(255,106,19,.48);
  background:var(--yellow);
}
.btn--primary:hover::before{ transform:translateX(120%); }

.btn--ghost{
  background:var(--glass);
  color:var(--tx);
  border:1.5px solid var(--line-2);
  backdrop-filter:blur(12px);
}
.btn--ghost:hover{
  transform:translateY(-3px);
  background:var(--glass-2);
  border-color:var(--orange);
  color:var(--orange);
}

.btn:active{ transform:translateY(-1px) scale(.98); }

.btn--lg{ padding:17px 36px; font-size:.94rem; }
.btn--sm{ padding:10px 20px; font-size:.76rem; }


/* ==========================================================================
   4. NAVBAR
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease),
             box-shadow .4s var(--ease), height .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  height:64px;
  background:rgba(10,12,16,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
  box-shadow:0 10px 40px rgba(0,0,0,.4);
}

.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.nav__brand{
  display:flex; align-items:center; gap:9px;
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:1.42rem;
  line-height:1;
  letter-spacing:.045em;
  white-space:nowrap;
  flex-shrink:0;
}
.nav__brand-vs{
  background:var(--orange); color:#12100C;
  font-size:.74em; padding:3px 8px 1px; border-radius:5px;
  transform:rotate(-6deg);
  transition:transform .35s var(--ease-bounce), background .3s var(--ease);
}
.nav__brand:hover .nav__brand-vs{ transform:rotate(6deg) scale(1.12); background:var(--yellow); }

.nav__links{ display:flex; align-items:center; gap:6px; }
.nav__links > a:not(.btn){
  position:relative;
  padding:8px 13px;
  font-size:.9rem;
  font-weight:500;
  color:var(--tx-soft);
  border-radius:8px;
  transition:color .25s var(--ease);
}
.nav__links > a:not(.btn)::after{
  content:"";
  position:absolute; left:13px; right:13px; bottom:2px; height:2px;
  background:var(--orange);
  transform:scaleX(0); transform-origin:right;
  transition:transform .32s var(--ease-out);
}
.nav__links > a:not(.btn):hover{ color:var(--white); }
.nav__links > a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links > a.is-current{ color:var(--white); }
.nav__links > a.is-current::after{ transform:scaleX(1); }
.nav__cta{ margin-left:10px; }

.nav__toggle{
  display:none;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(10px);
  padding:12px 11px;
  flex-direction:column; justify-content:space-between;
}
.nav__toggle span{
  display:block; height:2px; width:100%;
  background:var(--tx); border-radius:2px;
  transition:transform .35s var(--ease), opacity .2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

.lang-toggle{
  display:flex; align-items:center; gap:2px;
  margin-left:14px;
  padding:3px;
  border-radius:100px;
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  flex-shrink:0;
}
.lang-toggle button{
  padding:6px 13px;
  border-radius:100px;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--tx-soft);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.lang-toggle button:hover{ color:var(--white); }
.lang-toggle button.is-active{
  background:var(--orange);
  color:#12100C;
}


/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 40px) 0 90px;
  overflow:hidden;
}

.hero__media{ position:absolute; inset:-8% 0 -8%; z-index:0; will-change:transform; }

/* Poster sits under the video and carries the first paint (LCP). The video is the
   same first frame, so it fades in without a visible jump. */
.hero__poster{ position:absolute; inset:0; }
.hero__poster img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}

.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:0;
  transition:opacity .55s var(--ease);
  /* Colour grade is baked into the encode — no per-frame filter on a full-screen video. */
}
.hero__video.is-ready{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .hero__video{ transition:none; }
}

/* Parallax is off below 860px (see main.js), so the -8% overscan there only ate
   into the framing of the portrait cut. Give phones the full frame. */
@media (max-width:860px){
  .hero__media{ inset:0; }
}

/* The footage carries the venue's own BURGERS VS TACOS signage, and the hero
   headline is that same wordmark — so the copy band has to be an opaque reading
   surface or the two sets of letters fight. Held near-solid across the copy
   column, then opened up further than before on the right so the picture
   actually reads where nothing sits on top of it. */
/* Shaped to the copy column, not to the viewport. The words now end at ~42% of
   a 1440 screen, so the solid band ends there too and the picture opens from
   64% out instead of 80%. Holding the scrim only where the type actually sits
   means less veil overall AND more contrast under the type — not a trade. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(10,12,16,.96) 0%, rgba(10,12,16,.94) 30%, rgba(10,12,16,.88) 43%, rgba(10,12,16,.40) 62%, rgba(10,12,16,.17) 82%, rgba(10,12,16,.42) 100%),
    linear-gradient(to top, var(--ink) 2%, rgba(10,12,16,.15) 45%, rgba(10,12,16,.55) 100%);
}
.hero__grain{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:3px 3px;
  opacity:.5; mix-blend-mode:overlay;
}

/* The hero copy deliberately LEAVES the centred .container shell. Inside it the
   820px cap beat .container's 1240px while margin-inline:auto still applied, so
   the block sat centred and drifted further right as the screen grew — 21.5% of
   a 1440 screen before the words started, 28.6% at 1920, 34% at 2560.
   Pinned to --pad instead, so the inset is the same at every width.
   --hero-col is sized to the CONTENT, not the shell: widest item is the 520px
   sub-paragraph (headline ink is 427px), so 560px reflows nothing. */
.hero__content{
  position:relative; z-index:2;
  margin-inline:var(--pad);
  max-width:var(--hero-col);
}

.hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--glass);
  border:1px solid var(--line-2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:100px;
  padding:8px 18px;
  font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:.74rem;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--cream);
  margin-bottom:22px;
}
.dot{
  width:8px; height:8px; border-radius:50%;
  background:#3BD16F;
  box-shadow:0 0 0 0 rgba(59,209,111,.7);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 12px rgba(59,209,111,0); }
  100%{ box-shadow:0 0 0 0 rgba(59,209,111,0); }
}

.hero__title{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-weight:400;
  /* Optical pull. Bebas Neue's left side bearing put the B stem 6px right of the
     box at 152px, so against the flush edge the headline read as indented while
     the kicker pill, buttons and sub all landed on 40px. In em so it tracks the
     clamp instead of drifting at smaller widths. */
  margin-inline-start:-0.039em;
  font-size:clamp(3.6rem,13vw,9.5rem);
  line-height:.82;
  letter-spacing:.01em;
  text-transform:uppercase;
  display:flex; flex-direction:column;
  margin-bottom:6px;
}
.hero__word{
  display:block;
  background:linear-gradient(180deg,#fff 30%,#CFC9BC 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:0 18px 60px rgba(0,0,0,.5);
}
.hero__word--tacos{
  background:linear-gradient(180deg,var(--yellow) 10%,var(--orange) 65%,var(--red) 105%);
  -webkit-background-clip:text; background-clip:text;
  margin-left:clamp(30px,9vw,120px);
}
.hero__vs{
  align-self:flex-start;
  margin:.06em 0 .06em clamp(4px,2vw,26px);
  background:var(--red-deep);
  color:var(--white);
  font-size:.26em;
  line-height:1;
  padding:.16em .42em .1em;
  border-radius:8px;
  transform:rotate(-4deg);
  box-shadow:0 10px 28px rgba(224,54,43,.45);
  animation:vsWobble 4.5s var(--ease) infinite;
}
@keyframes vsWobble{
  0%,100%{ transform:rotate(-4deg) scale(1); }
  50%    { transform:rotate(3deg) scale(1.05); }
}

.hero__sub{
  max-width:520px;
  margin:26px 0 34px;
  font-size:clamp(1rem,1.1vw + .7rem,1.18rem);
  color:rgba(255,255,255,.9);
  /* This is the smallest type sitting on the video, so it carries a tight dense
     halo plus a wide soft one. Darkening each glyph's immediate surround buys
     legibility without putting another veil over the whole picture. */
  text-shadow:0 1px 2px rgba(0,0,0,.92), 0 2px 22px rgba(0,0,0,.78);
}
.hero__sub strong{ color:var(--yellow); font-weight:600; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__facts{
  display:flex; flex-wrap:wrap; gap:clamp(18px,4vw,44px);
  margin-top:44px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.hero__facts li{
  font-family:'Montserrat',sans-serif;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-mute); font-weight:700;
}
.hero__facts strong{
  display:block;
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:1.9rem; letter-spacing:.02em;
  color:var(--white);
  font-weight:400;
}

.hero__scroll{
  position:absolute; left:50%; bottom:26px; z-index:3;
  transform:translateX(-50%);
  width:26px; height:46px;
  border:2px solid var(--line-2);
  border-radius:100px;
  display:grid; place-items:start center;
  padding-top:8px;
}
.hero__scroll-line{
  width:3px; height:9px; border-radius:3px;
  background:var(--orange);
  animation:scrollCue 1.9s var(--ease) infinite;
}
@keyframes scrollCue{
  0%  { transform:translateY(0);    opacity:0; }
  35% { opacity:1; }
  100%{ transform:translateY(18px); opacity:0; }
}


/* ==========================================================================
   6. TICKER
   ========================================================================== */
.ticker{
  background:var(--orange);
  color:#12100C;
  padding:13px 0;
  overflow:hidden;
  border-block:2px solid rgba(0,0,0,.16);
}
.ticker__track{
  display:flex; align-items:center; gap:28px;
  width:max-content;
  animation:tick 34s linear infinite;
}
.ticker__track span{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:1.25rem; letter-spacing:.09em; white-space:nowrap;
}
.ticker__track i{ font-style:normal; font-size:.72rem; opacity:.55; }
@keyframes tick{ to{ transform:translateX(-50%); } }


/* ==========================================================================
   7. SOBRE NOSOTROS
   ========================================================================== */
.about__grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(36px,6vw,84px);
  align-items:center;
}
.about__copy p{ color:var(--tx-soft); margin-top:18px; }
.about__copy p strong{ color:var(--tx); font-weight:600; }
.about__copy .h2{ margin-bottom:8px; }
.about__badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }

.about__media{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:16px;
}
.about__shot{
  overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--sh-md);
}
.about__shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease-out);
}
.about__shot:hover img{ transform:scale(1.06); }
.about__shot--a{ grid-column:1 / -1; aspect-ratio:16/10; }
.about__shot--b{ aspect-ratio:4/5; }
.about__shot--c{ aspect-ratio:4/5; }

.about__stamp{
  position:absolute; right:-14px; top:-24px;
  width:96px; height:96px;
  display:grid; place-content:center; text-align:center;
  border-radius:50%;
  background:var(--red-deep);
  color:var(--white);
  box-shadow:0 14px 34px rgba(224,54,43,.42);
  transform:rotate(-12deg);
  font-family:'Bebas Neue',Impact,sans-serif;
  line-height:1;
}
/* No opacity here: at 11.2px the faded white measured 3.57:1 on the red disc.
   Full white on --red-deep clears 5:1, and the size difference against
   .about__stamp strong already carries the hierarchy. */
.about__stamp span{ font-size:.7rem; letter-spacing:.2em; }
.about__stamp strong{ display:block; font-size:1.6rem; font-weight:400; letter-spacing:.04em; }


/* ==========================================================================
   8. RULETA
   ========================================================================== */
.roulette{
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(255,106,19,.13), transparent 62%),
    radial-gradient(760px 480px at 90% 100%, rgba(224,54,43,.12), transparent 60%),
    var(--ink-2);
}

.roulette__stage{
  display:grid;
  grid-template-columns:minmax(300px,470px) 1fr;
  gap:clamp(34px,5vw,72px);
  align-items:center;
}

.roulette__wheel-wrap{
  position:relative;
  aspect-ratio:1;
  display:grid; place-items:center;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}

.roulette__wheel{
  width:100%; height:100%;
  border-radius:50%;
  transition:transform 5.2s cubic-bezier(.13,.86,.14,1);
  will-change:transform;
}
.roulette__wheel svg{ width:100%; height:100%; display:block; stroke:none; }

.roulette__pointer{
  position:absolute; top:-14px; left:50%; z-index:6;
  transform:translateX(-50%);
  transform-origin:50% 12px;
  width:36px; height:52px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.65));
}
/* Cabeza redonda + punta que entra en la rueda */
.roulette__pointer::before{
  content:"";
  position:absolute; top:0; left:0;
  width:36px; height:36px; border-radius:50%;
  background:var(--yellow);
  border:4px solid var(--ink);
}
.roulette__pointer::after{
  content:"";
  position:absolute; top:26px; left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-top:24px solid var(--yellow);
}
.roulette__wheel-wrap.is-spinning .roulette__pointer{ animation:tickTick .1s linear infinite; }
@keyframes tickTick{
  0%,100%{ transform:translateX(-50%) rotate(0deg); }
  50%    { transform:translateX(-50%) rotate(-9deg); }
}

.roulette__hub{
  position:absolute; z-index:5;
  width:27%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FF8A3D, var(--orange) 45%, var(--orange-d));
  color:#12100C;
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:clamp(1rem,2.2vw,1.5rem);
  letter-spacing:.09em;
  display:grid; place-items:center;
  border:5px solid var(--ink);
  box-shadow:0 0 0 4px rgba(255,194,41,.55), 0 12px 30px rgba(0,0,0,.5);
  transition:transform .3s var(--ease-bounce), box-shadow .3s var(--ease);
}
.roulette__hub:hover:not(:disabled){
  transform:scale(1.08);
  box-shadow:0 0 0 8px rgba(255,194,41,.35), 0 16px 40px rgba(0,0,0,.55);
}
.roulette__hub:active:not(:disabled){ transform:scale(.95); }
.roulette__hub:disabled{ cursor:progress; opacity:.85; }
.roulette__hub-label{ pointer-events:none; }

/* Tarjeta de resultado */
.rcard{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:0;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sh-md);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.rcard.is-win{
  border-color:rgba(255,194,41,.55);
  box-shadow:0 24px 60px rgba(255,106,19,.24);
  animation:winPop .55s var(--ease-bounce);
}
@keyframes winPop{
  0%{ transform:scale(.96); } 60%{ transform:scale(1.02); } 100%{ transform:scale(1); }
}

.rcard__media{ position:relative; background:var(--ink-3); }
.rcard__media img{ width:100%; height:100%; object-fit:cover; min-height:230px; }
.rcard.is-idle .rcard__media img{ filter:grayscale(1) brightness(.5); transition:filter .6s var(--ease); }
.rcard__price{
  position:absolute; left:14px; bottom:14px;
  background:var(--yellow); color:#12100C;
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:1.4rem; letter-spacing:.03em;
  padding:3px 13px 1px; border-radius:100px;
  box-shadow:var(--sh-sm);
}

.rcard__body{ padding:clamp(22px,3vw,34px); }
.rcard__tag{
  font-family:'Montserrat',sans-serif; font-weight:900;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange); margin-bottom:8px;
}
.rcard__name{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  line-height:1; text-transform:uppercase;
  margin-bottom:12px;
}
.rcard__desc{ color:var(--tx-soft); font-size:.96rem; }
.rcard__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }


/* ==========================================================================
   9. MENÚ
   ========================================================================== */
.menu__tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-bottom:clamp(34px,4vw,52px);
}
.tab{
  padding:11px 22px;
  border-radius:100px;
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(10px);
  font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:.82rem;
  letter-spacing:.04em;
  color:var(--tx-soft);
  transition:all .3s var(--ease);
}
.tab:hover{ color:var(--white); border-color:var(--line-2); transform:translateY(-2px); }
.tab.is-active{
  background:var(--orange); color:#12100C;
  border-color:var(--orange);
  box-shadow:var(--sh-glow);
}

.menu__panel[hidden]{ display:none; }
.menu__panel{ animation:panelIn .5s var(--ease-out); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.menu__subhead{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(1.6rem,3vw,2.3rem);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin:44px 0 22px;
  padding-bottom:12px;
  border-bottom:2px solid var(--line);
  display:flex; align-items:center; gap:14px;
}
.menu__subhead::after{
  content:""; flex:1; height:2px;
  background:linear-gradient(90deg,var(--orange),transparent);
}
.menu__panel > .menu__subhead:first-child{ margin-top:0; }

.dishes{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:clamp(16px,2vw,24px);
}

.dish{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .45s var(--ease-out), border-color .35s var(--ease), box-shadow .45s var(--ease);
}
.dish::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,106,19,.16),transparent 45%);
  opacity:0; transition:opacity .45s var(--ease);
  pointer-events:none;
}
.dish:hover{
  transform:translateY(-8px);
  border-color:rgba(255,106,19,.5);
  box-shadow:0 26px 56px rgba(0,0,0,.5);
}
.dish:hover::after{ opacity:1; }

.dish__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--ink-3);
  display:grid; place-items:center;
}
.dish__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.dish:hover .dish__media img{ transform:scale(1.08); }

/* Arte generado para los platillos sin foto todavía.
   📸 Para usar una foto real: sustituye el <div class="dish__media" data-art="N">…</div>
   por  <div class="dish__media"><img src="images/menu/archivo.webp" …></div>          */
.dish__media[data-art]{
  --a1:var(--orange);
  --a2:#B32C10;
  background:
    radial-gradient(120% 96% at 24% 12%, rgba(255,194,41,.62), transparent 58%),
    radial-gradient(110% 90% at 84% 88%, rgba(224,54,43,.62), transparent 56%),
    linear-gradient(135deg, var(--a1), var(--a2));
}
/* Trama de puntos + franjas diagonales: guiño al cartel impreso */
.dish__media[data-art]::before{
  content:"";
  position:absolute; inset:-10%;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.14) 0 10px, transparent 10px 26px),
    radial-gradient(rgba(0,0,0,.22) 1.4px, transparent 1.6px);
  background-size:auto, 9px 9px;
  transition:transform .9s var(--ease-out);
}
.dish:hover .dish__media[data-art]::before{ transform:scale(1.12) rotate(3deg); }

/* Variantes de color por platillo */
.dish__media[data-art="2"] { --a1:#F0483A; --a2:#8E1C14; }
.dish__media[data-art="3"] { --a1:#FFA61E; --a2:#C4520A; }
.dish__media[data-art="4"] { --a1:#E0362B; --a2:#6E1710; }
.dish__media[data-art="5"] { --a1:#FFC229; --a2:#C97A06; }
.dish__media[data-art="6"] { --a1:#FF7A2E; --a2:#9E2C0C; }
.dish__media[data-art="7"] { --a1:#F2601C; --a2:#7C1F2B; }
.dish__media[data-art="8"] { --a1:#FFB01C; --a2:#B33C08; }
.dish__media[data-art="9"] { --a1:#E84B22; --a2:#5E1C33; }
.dish__media[data-art="10"]{ --a1:#FFD34D; --a2:#D0430C; }

.dish__emblem{
  position:relative; z-index:2;
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:3.6rem; line-height:1;
  color:#FFF6E6;
  -webkit-text-stroke:2px rgba(18,16,12,.72);
  paint-order:stroke fill;
  text-shadow:0 8px 18px rgba(0,0,0,.42);
  transition:transform .5s var(--ease-bounce);
}
.dish:hover .dish__emblem{ transform:scale(1.14) rotate(-5deg); }

.dish__ribbon{
  position:absolute; top:12px; left:12px; z-index:3;
  background:rgba(10,12,16,.72);
  backdrop-filter:blur(8px);
  border:1px solid var(--line-2);
  border-radius:100px;
  padding:4px 12px;
  font-family:'Montserrat',sans-serif;
  font-size:.62rem; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--yellow);
}

.dish__body{ padding:20px 22px 24px; flex:1; position:relative; z-index:2; }
.dish__flag{
  display:inline-block;
  background:var(--red); color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:.6rem; font-weight:900;
  letter-spacing:.16em; text-transform:uppercase;
  padding:4px 10px; border-radius:5px;
  margin-bottom:10px;
}
.dish__name{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-weight:400;
  font-size:1.55rem;
  line-height:1.06;
  letter-spacing:.02em;
  text-transform:uppercase;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:9px;
}
.dish__price{
  flex-shrink:0;
  color:var(--yellow);
  font-size:1.3rem;
}
.dish__desc{ color:var(--tx-soft); font-size:.885rem; line-height:1.6; }

.dish--featured{ border-color:rgba(255,194,41,.4); }
.dish--king{
  border-color:rgba(224,54,43,.45);
  background:linear-gradient(150deg, rgba(224,54,43,.12), var(--glass));
}
.dish--king .dish__price{ color:var(--red); }

.allergen{
  display:flex; align-items:center; gap:16px;
  margin-top:34px;
  padding:18px 24px;
  background:rgba(255,194,41,.08);
  border:1px dashed rgba(255,194,41,.42);
  border-radius:var(--r-md);
}
.allergen__icon{ font-size:1.5rem; }
.allergen p{ font-size:.9rem; color:rgba(255,214,120,.92); }
.allergen strong{ color:var(--yellow); }

/* Listas de precios */
.pricelist{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);
  backdrop-filter:blur(10px);
  max-width:560px;
  margin-inline:auto;
}
.pricelist__title{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-weight:400; font-size:1.5rem; letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:14px;
}
.pricelist__list li{
  display:flex; align-items:baseline; gap:12px;
  padding:13px 0;
  border-bottom:1px dashed var(--line);
  transition:padding-left .3s var(--ease), color .3s var(--ease);
}
.pricelist__list li:last-child{ border-bottom:0; }
.pricelist__list li:hover{ padding-left:8px; color:var(--white); }
.pricelist__list span{ flex:1; }
.pricelist__list li::after{
  content:""; flex:0 1 auto; min-width:20px;
  border-bottom:1px dotted var(--line-2);
  transform:translateY(-4px);
  order:1;
}
.pricelist__list b{
  order:2;
  font-family:'Bebas Neue',Impact,sans-serif;
  font-weight:400; font-size:1.3rem;
  color:var(--yellow);
}

/* Combos */
.combos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  align-items:start;
}
.combos .pricelist{ max-width:none; margin:0; }
.combo{
  position:relative;
  padding:clamp(26px,3vw,36px);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:linear-gradient(150deg,var(--orange),var(--orange-d));
  color:#12100C;
  box-shadow:var(--sh-glow);
  transition:transform .4s var(--ease-out);
}
.combo--alt{ background:linear-gradient(150deg,var(--red),#A4231A); color:#fff; }
.combo:hover{ transform:translateY(-6px) rotate(-.6deg); }
.combo::after{
  content:"";
  position:absolute; right:-30px; bottom:-40px;
  width:150px; height:150px; border-radius:50%;
  background:rgba(255,255,255,.14);
}
.combo__eyebrow{
  font-family:'Montserrat',sans-serif; font-weight:900;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  opacity:.75; margin-bottom:8px;
}
.combo__title{
  font-family:'Bebas Neue',Impact,sans-serif; font-weight:400;
  font-size:2.1rem; line-height:1; text-transform:uppercase;
}
.combo__price{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:3.2rem; line-height:1; margin:6px 0 10px;
}
.combo__note{ font-size:.88rem; opacity:.86; position:relative; z-index:2; }


/* ==========================================================================
   10. GALERÍA / CARRUSEL
   ========================================================================== */
.carousel{ position:relative; }

.carousel__viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-block:6px 22px;
  scroll-padding-inline:var(--pad);
}
.carousel__viewport::-webkit-scrollbar{ display:none; }

.carousel__track{
  display:flex;
  gap:clamp(12px,1.6vw,20px);
  padding-inline:var(--pad);
  width:max-content;
}

.slide{ scroll-snap-align:center; }
.slide__btn{
  position:relative;
  display:block;
  width:clamp(230px,30vw,340px);
  aspect-ratio:3/4;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--ink-3);
  box-shadow:var(--sh-md);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .35s var(--ease);
}
.slide__btn img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease-out), filter .5s var(--ease);
  filter:saturate(.94) brightness(.92);
}
.slide__btn::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:55%;
  background:linear-gradient(to top,rgba(10,12,16,.92),transparent);
  transition:opacity .4s var(--ease);
}
.slide__btn:hover{
  transform:translateY(-10px);
  border-color:rgba(255,106,19,.55);
  box-shadow:0 30px 64px rgba(0,0,0,.6);
}
.slide__btn:hover img{ transform:scale(1.08); filter:saturate(1.12) brightness(1); }

.slide__cap{
  position:absolute; z-index:2; left:18px; right:18px; bottom:16px;
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:1.28rem; letter-spacing:.05em;
  text-transform:uppercase;
  text-align:left;
  color:var(--white);
  transform:translateY(4px);
  transition:transform .4s var(--ease-out), color .3s var(--ease);
}
.slide__btn:hover .slide__cap{ transform:translateY(0); color:var(--yellow); }

.carousel__nav{
  position:absolute; top:50%; z-index:6;
  transform:translateY(-50%);
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(10,12,16,.68);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2);
  color:var(--white);
  transition:all .3s var(--ease);
}
.carousel__nav svg{ width:22px; height:22px; }
.carousel__nav:hover{ background:var(--orange); color:#12100C; border-color:var(--orange); transform:translateY(-50%) scale(1.1); }
.carousel__nav--prev{ left:clamp(8px,2vw,26px); }
.carousel__nav--next{ right:clamp(8px,2vw,26px); }
.carousel__nav[disabled]{ opacity:.28; pointer-events:none; }

.carousel__dots{
  display:flex; justify-content:center; gap:8px;
  margin-top:22px;
}
.carousel__dots button{
  width:9px; height:9px; border-radius:50%;
  background:var(--line-2);
  transition:all .3s var(--ease);
}
.carousel__dots button.is-on{ background:var(--orange); width:28px; border-radius:100px; }


/* ==========================================================================
   10B. CARRUSEL CINEMÁTICO DE LA FACHADA
   Segundo carrusel, distinto al de la galería: una foto a la vez,
   fundido con efecto Ken Burns, miniaturas y autoplay con barra de progreso.
   ========================================================================== */
.facade{
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(27,111,176,.16), transparent 62%),
    var(--ink);
}
.facade .hl{ color:var(--blue-l); }
.facade .hl::after{ background:var(--blue); }

.cine{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--pad);
}

.cine__frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--ink-3);
  border:1px solid var(--line);
  box-shadow:var(--sh-lg);
}

.cine__stage{ position:absolute; inset:0; }

.cshot{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1s var(--ease);
  pointer-events:none;
}
.cshot.is-on{ opacity:1; pointer-events:auto; }
.cshot img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--focus,center 50%);
  transform:scale(1.04);
}
/* Ken Burns solo en la foto visible */
.cshot.is-on img{ animation:kenburns 9s var(--ease) forwards; }
@keyframes kenburns{
  from{ transform:scale(1.02); }
  to  { transform:scale(1.12); }
}

.cine__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,10,14,.9) 0%, rgba(8,10,14,.24) 38%, transparent 62%);
  pointer-events:none;
}

.cine__hud{
  position:absolute; inset:auto 0 0 0;
  padding:clamp(18px,3vw,32px);
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:16px 20px;
}
.cine__cap{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:clamp(1.2rem,2.6vw,2rem);
  line-height:1.05;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--white);
  text-shadow:0 4px 24px rgba(0,0,0,.7);
  animation:capIn .6s var(--ease-out);
}
@keyframes capIn{ from{ opacity:0; transform:translateY(10px); } }

.cine__ctrl{ display:flex; align-items:center; gap:8px; }
.cine__btn{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid var(--line-2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--white);
  transition:all .3s var(--ease);
}
.cine__btn svg{ width:19px; height:19px; }
.cine__btn:hover{ background:var(--blue); border-color:var(--blue-l); transform:scale(1.1); }
.cine__count{
  font-family:'Montserrat',sans-serif;
  font-size:.76rem; font-weight:700; letter-spacing:.12em;
  color:rgba(255,255,255,.6);
  padding-inline:6px;
  min-width:58px; text-align:center;
}
.cine__count b{ color:var(--white); font-weight:900; }

.cine__btn--play .ico-play{ display:none; }
.cine__btn--play[aria-pressed="false"] .ico-pause{ display:none; }
.cine__btn--play[aria-pressed="false"] .ico-play{ display:block; }

.cine__bar{
  grid-column:1 / -1;
  height:3px; border-radius:3px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
}
.cine__bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--blue-l),var(--orange));
  border-radius:3px;
}
.cine__bar i.is-running{ animation:cineBar var(--cine-dur,6s) linear forwards; }
@keyframes cineBar{ from{ width:0; } to{ width:100%; } }

.cine__thumbs{
  display:flex; gap:10px;
  margin-top:16px;
  overflow-x:auto;
  padding-bottom:8px;
  scrollbar-width:none;
}
.cine__thumbs::-webkit-scrollbar{ display:none; }
.cthumb{
  position:relative;
  flex:0 0 auto;
  width:clamp(84px,11vw,118px);
  aspect-ratio:4/3;
  border-radius:12px;
  overflow:hidden;
  border:2px solid transparent;
  opacity:.5;
  transition:all .35s var(--ease);
}
.cthumb img{ width:100%; height:100%; object-fit:cover; }
.cthumb:hover{ opacity:.85; transform:translateY(-3px); }
.cthumb.is-on{
  opacity:1;
  border-color:var(--orange);
  box-shadow:0 8px 24px rgba(255,106,19,.35);
}


/* ==========================================================================
   11. PROMOCIONES
   ========================================================================== */
.promo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(18px,2.4vw,26px);
}
.promo{
  position:relative;
  padding:clamp(28px,3.4vw,40px);
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  transition:transform .45s var(--ease-out), border-color .35s var(--ease), box-shadow .45s var(--ease);
}
.promo::before{
  content:"";
  position:absolute; inset:0;
  opacity:.16;
  background:
    repeating-linear-gradient(-45deg, currentColor 0 8px, transparent 8px 26px);
  mask-image:linear-gradient(to bottom left,#000,transparent 62%);
  -webkit-mask-image:linear-gradient(to bottom left,#000,transparent 62%);
  pointer-events:none;
}
.promo--a{ color:var(--orange); }
.promo--b{ color:var(--yellow); }
.promo--c{ color:var(--red); }
.promo:hover{
  transform:translateY(-8px);
  border-color:currentColor;
  box-shadow:0 26px 58px rgba(0,0,0,.5);
}
.promo.is-off{ display:none; }

.promo__tag{
  display:inline-block;
  background:rgba(255,255,255,.09);
  border:1px dashed var(--line-2);
  border-radius:100px;
  padding:4px 12px;
  font-family:'Montserrat',sans-serif;
  font-size:.62rem; font-weight:900;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-mute);
  margin-bottom:16px;
}
.promo__title{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-weight:400;
  font-size:clamp(1.9rem,3vw,2.5rem);
  line-height:1; text-transform:uppercase;
  color:var(--tx);
  margin-bottom:12px;
}
.promo__desc{ color:var(--tx-soft); font-size:.93rem; }
.promo__meta{
  margin-top:18px;
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tx-mute);
}
.promo__link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:16px;
  font-family:'Montserrat',sans-serif;
  font-weight:900; font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:currentColor;
  position:relative; z-index:2;
}
.promo__link::after{ content:"→"; transition:transform .3s var(--ease); }
.promo__link:hover::after{ transform:translateX(6px); }


/* ==========================================================================
   12. OPINIONES
   ========================================================================== */

/* Real Google rating. The stars are two stacked rows — a dim full row with a
   gold row clipped over it — so 4.6 renders as 4.6, not as five filled stars
   rounded up in the customer's favour. Width lives inline next to the number
   so the two can never drift apart. */
.rating{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(20px,4vw,44px);
  max-width:760px; margin:0 auto;
  padding:clamp(26px,4vw,38px) clamp(22px,4vw,40px);
  border:1px solid var(--line);
  border-radius:var(--r-lg,20px);
  background:var(--glass);
  text-align:center;
}
.rating__score{ display:grid; justify-items:center; gap:6px; }
.rating__num{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:clamp(3rem,9vw,4.2rem); line-height:.9;
  color:var(--yellow);
}
.rating__stars{
  position:relative; display:inline-block;
  font-size:1.15rem; letter-spacing:.16em; line-height:1;
  color:rgba(255,255,255,.20);
}
.rating__stars i{
  position:absolute; inset:0 auto 0 0; overflow:hidden;
  white-space:nowrap; font-style:normal;
  color:var(--yellow);
}
.rating__src{ color:var(--tx-soft); font-size:.85rem; }
.rating__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* No promo cards while there are no confirmed promotions — just the two real
   places a customer can act. */
.promo-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

.reviews__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
  gap:clamp(18px,2.4vw,26px);
}
.review{
  position:relative;
  padding:clamp(26px,3vw,36px);
  border-radius:var(--r-xl);
  background:var(--glass);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  transition:transform .45s var(--ease-out), border-color .35s var(--ease);
}
.review::before{
  content:"”";
  position:absolute; top:6px; right:22px;
  font-family:'Bebas Neue',Impact,serif;
  font-size:6rem; line-height:1;
  color:var(--orange); opacity:.16;
}
.review:hover{ transform:translateY(-6px); border-color:rgba(255,106,19,.42); }
.review__stars{ color:var(--yellow); letter-spacing:.14em; font-size:1.02rem; margin-bottom:14px; }
.review blockquote{ color:var(--tx-soft); font-size:.98rem; font-style:italic; }
.review figcaption{
  display:flex; align-items:center; gap:14px;
  margin-top:24px; padding-top:18px;
  border-top:1px solid var(--line);
}
.review__avatar{
  width:42px; height:42px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(140deg,var(--orange),var(--red));
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:1.25rem; color:#12100C;
}
.review figcaption b{ display:block; font-size:.9rem; font-weight:600; }
.review figcaption small{ color:var(--tx-mute); font-size:.76rem; }


/* ==========================================================================
   13. HORARIOS Y UBICACIÓN
   ========================================================================== */
.visit__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(32px,5vw,68px);
  align-items:start;
}

.hours .h2{ margin-bottom:16px; }
.hours__note{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:100px;
  padding:8px 18px;
  font-size:.84rem; font-weight:600;
  margin-bottom:22px;
}
.hours__note::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--tx-mute);
}
.hours__note.is-open{ color:#7BE8A4; border-color:rgba(123,232,164,.35); }
.hours__note.is-open::before{ background:#3BD16F; box-shadow:0 0 0 0 rgba(59,209,111,.7); animation:pulse 2.2s infinite; }
.hours__note.is-closed{ color:#FF9C93; border-color:rgba(255,156,147,.32); }
.hours__note.is-closed::before{ background:var(--red); }

.hours__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 16px;
  border-radius:12px;
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.hours__list li:last-child{ border-bottom:0; }
.hours__list li:hover{ background:var(--glass); transform:translateX(4px); }
.hours__list li.is-today{
  background:linear-gradient(90deg,rgba(255,106,19,.16),transparent);
  border-bottom-color:rgba(255,106,19,.3);
}
.hours__list li.is-today span::after{
  content:"HOY";
  margin-left:10px;
  background:var(--orange); color:#12100C;
  font-family:'Montserrat',sans-serif;
  font-size:.56rem; font-weight:900; letter-spacing:.14em;
  padding:3px 7px; border-radius:4px;
  vertical-align:middle;
}
.hours__list span{ font-weight:500; }
.hours__list b{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-weight:400; font-size:1.16rem; letter-spacing:.03em;
  color:var(--yellow);
}
.hours__small{ margin-top:18px; font-size:.78rem; color:var(--tx-mute); }

.place .h2{ margin-bottom:16px; }
.place__address{
  font-size:1.06rem; color:var(--tx-soft);
  padding-left:18px;
  border-left:3px solid var(--orange);
  margin-bottom:22px;
}
.place__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.place__map{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--sh-md);
  filter:grayscale(.35) contrast(1.06);
  transition:filter .5s var(--ease);
}
.place__map:hover{ filter:none; }
.place__map iframe{ display:block; }


/* ==========================================================================
   14. REDES SOCIALES
   ========================================================================== */
.social__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(14px,2vw,20px);
}
.sbtn{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:clamp(24px,3vw,32px);
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(10px);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease), border-color .35s var(--ease);
}
.sbtn svg{ width:34px; height:34px; margin-bottom:16px; transition:transform .45s var(--ease-bounce); }
.sbtn__t{
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:1.7rem; letter-spacing:.04em; text-transform:uppercase;
}
.sbtn__s{ font-size:.82rem; color:var(--tx-mute); }
.sbtn::after{
  content:"";
  position:absolute; inset:0;
  background:var(--sbtn-grad,linear-gradient(140deg,var(--orange),var(--red)));
  opacity:0; transition:opacity .4s var(--ease);
  z-index:-1;
}
.sbtn:hover{ transform:translateY(-8px); border-color:transparent; box-shadow:0 26px 58px rgba(0,0,0,.5); }
.sbtn:hover::after{ opacity:1; }
.sbtn:hover svg{ transform:scale(1.16) rotate(-7deg); }
.sbtn:hover .sbtn__s{ color:rgba(255,255,255,.86); }

.sbtn--ig{ --sbtn-grad:linear-gradient(140deg,#833AB4,#E1306C 55%,#F77737); }
.sbtn--fb{ --sbtn-grad:linear-gradient(140deg,#1877F2,#0B5FCC); }
.sbtn--wa{ --sbtn-grad:linear-gradient(140deg,#25D366,#128C7E); }
.sbtn--tt{ --sbtn-grad:linear-gradient(140deg,#25F4EE,#FE2C55 70%); }

.sbtn.is-soon .sbtn__s::after{
  content:" · próximamente";
  opacity:.7;
}


/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.footer{
  background:var(--ink);
  border-top:1px solid var(--line);
  padding-top:clamp(56px,7vw,84px);
}
.footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,52px);
  padding-bottom:clamp(40px,5vw,60px);
}
.footer__logo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:1.65rem; letter-spacing:.04em;
  margin-bottom:14px;
}
.footer__logo em{
  font-style:normal;
  background:var(--orange); color:#12100C;
  font-size:.78rem; padding:3px 8px; border-radius:5px;
  transform:rotate(-6deg);
}
.footer__tag{ color:var(--tx-mute); font-size:.9rem; max-width:300px; }
.footer__social{ display:flex; gap:10px; margin-top:20px; }
.footer__social a{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--glass);
  color:var(--tx-soft);
  transition:all .3s var(--ease);
}
.footer__social a svg{ width:19px; height:19px; display:block; }
.footer__social a:hover{
  background:var(--orange); color:#12100C;
  border-color:var(--orange);
  transform:translateY(-3px);
}

.footer__col h3{
  font-family:'Montserrat',sans-serif;
  font-weight:900; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--orange);
  margin-bottom:18px;
}
.footer__col a,
.footer__col p{
  display:block;
  color:var(--tx-mute);
  font-size:.9rem;
  margin-bottom:11px;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.footer__col a:hover{ color:var(--white); transform:translateX(4px); }

.footer__bar{ border-top:1px solid var(--line); padding:22px 0; }
.footer__bar-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
}
.footer__bar p{ font-size:.8rem; color:var(--tx-mute); }


/* ==========================================================================
   16. FLOTANTES Y LIGHTBOX
   ========================================================================== */
.fab{
  position:fixed; z-index:800;
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:50%;
  box-shadow:var(--sh-md);
  transition:transform .35s var(--ease-bounce), opacity .35s var(--ease),
             visibility .35s, box-shadow .35s var(--ease);
}
.fab svg{ width:27px; height:27px; }

.fab--wa{
  right:20px; bottom:20px;
  background:#25D366; color:#08361B;
  animation:waPop .6s var(--ease-bounce) 1.2s backwards;
}
@keyframes waPop{ from{ transform:scale(0) rotate(-90deg); } }
.fab--wa::after{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366;
  animation:waRing 2.6s var(--ease) infinite;
}
@keyframes waRing{
  0%  { transform:scale(1);   opacity:.7; }
  70% { transform:scale(1.6); opacity:0; }
  100%{ opacity:0; }
}
.fab--wa:hover{ transform:scale(1.12); box-shadow:0 16px 40px rgba(37,211,102,.45); }

.fab__tip{
  position:absolute; right:calc(100% + 12px);
  white-space:nowrap;
  background:var(--ink-3); color:var(--tx);
  border:1px solid var(--line);
  border-radius:100px;
  padding:7px 15px;
  font-size:.78rem; font-weight:600;
  opacity:0; transform:translateX(8px);
  pointer-events:none;
  transition:all .3s var(--ease);
}
.fab--wa:hover .fab__tip{ opacity:1; transform:translateX(0); }

.fab--top{
  right:20px; bottom:88px;
  background:var(--glass-2);
  border:1px solid var(--line-2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--tx);
  opacity:0; visibility:hidden; transform:translateY(12px);
}
.fab--top.is-on{ opacity:1; visibility:visible; transform:none; }
.fab--top:hover{ background:var(--orange); color:#12100C; border-color:var(--orange); transform:translateY(-4px); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:1500;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(6px,2vw,20px);
  padding:clamp(16px,4vw,48px);
  background:rgba(6,7,10,.94);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  animation:lbIn .3s var(--ease-out);
}
.lightbox[hidden]{ display:none; }
@keyframes lbIn{ from{ opacity:0; } }

.lightbox__fig{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  max-height:100%;
  min-width:0;
}
.lightbox__fig img{
  max-width:100%;
  max-height:calc(100svh - 160px);
  object-fit:contain;
  border-radius:var(--r-md);
  box-shadow:var(--sh-lg);
  animation:lbImg .4s var(--ease-out);
}
@keyframes lbImg{ from{ opacity:0; transform:scale(.94); } }
.lightbox__fig figcaption{
  font-family:'Montserrat',sans-serif;
  font-size:.82rem; letter-spacing:.06em;
  color:var(--tx-soft);
  text-align:center;
  max-width:60ch;
}

.lightbox__close{
  position:absolute; top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px);
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--glass-2);
  border:1px solid var(--line-2);
  font-size:1.1rem;
  transition:all .3s var(--ease);
}
.lightbox__close:hover{ background:var(--red); border-color:var(--red); transform:rotate(90deg); }

.lightbox__nav{
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--glass-2);
  border:1px solid var(--line-2);
  color:var(--tx);
  transition:all .3s var(--ease);
}
.lightbox__nav svg{ width:22px; height:22px; }
.lightbox__nav:hover{ background:var(--orange); color:#12100C; border-color:var(--orange); }


/* ==========================================================================
   17. ANIMACIONES DE SCROLL (estilo AOS, sin dependencias)
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--rd,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

.no-js [data-reveal]{ opacity:1; transform:none; }


/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .about__grid{ grid-template-columns:1fr; }
  .about__media{ order:-1; max-width:620px; }
  .about__stamp{ width:80px; height:80px; right:-6px; top:-16px; }
  .roulette__stage{ grid-template-columns:1fr; justify-items:center; }
  .roulette__wheel-wrap{ width:min(430px,86vw); }
  .roulette__result{ width:100%; max-width:620px; }
  .visit__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .nav__toggle{ display:flex; }

  .nav__links{
    position:fixed; inset:0 0 auto 0;
    top:var(--nav-h);
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:20px var(--pad) 30px;
    background:rgba(10,12,16,.96);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 48px rgba(0,0,0,.5);
    transform:translateY(-14px);
    opacity:0; visibility:hidden;
    transition:all .35s var(--ease);
  }
  .nav__links.is-open{ transform:none; opacity:1; visibility:visible; }
  .nav__links > a:not(.btn){ padding:14px 4px; font-size:1.02rem; border-bottom:1px solid var(--line); }
  .nav__links > a:not(.btn)::after{ display:none; }
  .nav__cta{ margin:16px 0 0; justify-content:center; }
  .lang-toggle{ margin:14px 0 0; align-self:center; }

  .hero{ min-height:92svh; }
  /* Phones stack the copy over the whole frame, so the protection is vertical:
     hold the upper band (kicker + headline) opaque, open the lower band so the
     room, booths and warm light still come through. */
  .hero__scrim{
    background:
      linear-gradient(to top, var(--ink) 4%, rgba(10,12,16,.40) 34%, rgba(10,12,16,.86) 66%, rgba(10,12,16,.92) 100%);
  }
  .hero__word--tacos{ margin-left:clamp(16px,6vw,48px); }
  .hero__facts{ gap:22px; }
  .hero__actions .btn{ flex:1 1 auto; }

  .rcard{ grid-template-columns:1fr; }
  .rcard__media{ aspect-ratio:16/10; }
  .rcard__media img{ min-height:0; }

  .carousel__nav{ display:none; }

  .cine__frame{ aspect-ratio:4/3; }
  .cine__hud{ grid-template-columns:1fr; align-items:start; }
  .cine__ctrl{ justify-content:flex-start; }

  .reviews__grid,
  .promo-grid{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  :root{ --nav-h:66px; }
  .dishes{ grid-template-columns:1fr; }
  .dish{ flex-direction:row; align-items:stretch; }
  .dish__media{ width:112px; flex-shrink:0; aspect-ratio:auto; }
  .dish__body{ padding:16px 18px; }
  .dish__name{ font-size:1.3rem; flex-direction:column; gap:2px; }
  .dish__price{ font-size:1.15rem; }
  .dish__emblem{ font-size:2.1rem; }
  .dish--featured .dish__ribbon{ display:none; }

  .footer__grid{ grid-template-columns:1fr; }
  .footer__bar-inner{ justify-content:center; text-align:center; }
  .about__media{ grid-template-columns:1fr; }
  .about__shot--b,
  .about__shot--c{ aspect-ratio:16/10; }
  .fab{ width:52px; height:52px; }
  .fab--top{ bottom:82px; }
  .lightbox{ grid-template-columns:1fr; grid-template-rows:1fr auto; }
  .lightbox__nav{ position:absolute; bottom:22px; }
  .lightbox__nav--prev{ left:22%; }
  .lightbox__nav--next{ right:22%; }
  .lightbox__fig img{ max-height:calc(100svh - 210px); }
}

/* Preferencias del sistema */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .roulette__wheel{ transition:transform 1.4s ease-out !important; }
}

@media print{
  .nav,.fab,.hero__media,.carousel__nav,.lightbox,.ticker{ display:none !important; }
  body{ background:#fff; color:#111; }
}