/* ===========================================================================
   Juancito's Tacos — site/v1  ·  CONCEPT: "LA LOTERÍA DE JUANCITO"
   The site as a Mexican lotería board (the family bingo every regular knows).
   Customer truth (140 reviews): "the most authentic Mexican food outside of
   Mexico", festive & bright, family-run (Juan & Valerie), made fresh to order.
   Concept = custom CSS + markup arrangement over the VERBATIM hardened
   controllers (nav.js / gallery.js / reviews.js / order.js / menu-nav.js) —
   the same data-hooks, a bespoke lotería skin on top.
   Palette anchored on the REAL logo (lime field + taco-orange script);
   every load-bearing pair AA-verified (web-ui-kit/contrast.py).
   =========================================================================== */

:root{
  /* grounds */
  --cream:    #FBF3E0;   /* papel / page ground */
  --cream-2:  #F6EAD0;   /* slightly deeper card mat */
  --mole:     #241410;   /* dark depth bands (the night board) */
  --pine:     #143D2A;   /* lotería-card dark frame ground */
  --agave:    #2A1208;   /* footer */
  /* brand (from the logo) */
  --lime:     #AED138;   /* the logo field — decorative bands only */
  --lime-deep:#9DBF2A;
  --nopal:    #2C6E2B;   /* cactus green — heads + links on cream */
  --nopal-d:  #1F5320;
  --orange:   #B84A18;   /* taco-shell — the CTA */
  --orange-h: #98370E;   /* CTA hover */
  --orange-on-lime:#7E2E14; /* deep taco-red — accent text on lime (AA on lime) */
  --salsa:    #C0341F;   /* hot accent (card numbers, rules) */
  --marigold: #F2B33C;   /* sombrero yellow — prices/accents on dark */
  /* ink */
  --ink:      #2A1A0E;
  --ink-soft: #4A3320;
  --muted:    #6A4A2C;
  --line:     #E2D4B4;
  /* type */
  --display: "Anton", system-ui, sans-serif;   /* tall festive caps */
  --script:  "Pacifico", cursive;               /* loteria "cantor" flourish */
  --body:    "Nunito Sans", system-ui, -apple-system, sans-serif;
  /* metrics */
  --wrap: 1180px;
  --header-h: 68px;
  --r-card: 14px;
  --shadow: 0 10px 28px -16px rgba(36,20,16,.55);
  --shadow-lg: 0 24px 60px -28px rgba(36,20,16,.6);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--body); font-size:clamp(16px,1.02rem,18px); line-height:1.62;
  font-weight:500; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:var(--nopal); text-underline-offset:2px; }
h1,h2,h3{ margin:0; line-height:1.02; font-family:var(--display); font-weight:400;
  letter-spacing:.01em; text-transform:uppercase; }
.wrap{ width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto; }
.section{ padding:clamp(3.4rem,6vw,6rem) 0; position:relative; }

/* ---- buttons -------------------------------------------------------------- */
.btn{
  --bg:var(--orange); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.035em;
  font-size:1.02rem; line-height:1; padding:.92rem 1.4rem; min-height:48px;
  background:var(--bg); color:var(--fg); border:0; border-radius:11px;
  cursor:pointer; text-decoration:none; transition:transform .12s, background .15s, box-shadow .15s;
  box-shadow:0 3px 0 rgba(0,0,0,.18);
}
.btn:hover{ background:var(--orange-h); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.18); }
.btn:focus-visible{ outline:3px solid var(--marigold); outline-offset:2px; }
.btn .icon{ width:1.18em; height:1.18em; flex:0 0 auto; }
.btn--lg{ font-size:1.18rem; padding:1.06rem 1.7rem; min-height:54px; }
.btn--ghost{ --bg:transparent; --fg:var(--nopal); border:2px solid var(--nopal);
  box-shadow:none; }
.btn--ghost:hover{ background:var(--nopal); --fg:#fff; }
.btn--marigold{ --bg:var(--marigold); --fg:#3A1F06; }
.btn--marigold:hover{ background:#E2A026; }
.btn--ghost-light{ --bg:transparent; --fg:var(--cream); border:2px solid rgba(251,243,224,.6);
  box-shadow:none; }
.btn--ghost-light:hover{ background:rgba(251,243,224,.12); border-color:var(--cream); }
.btn--on-lime{ --bg:var(--orange-on-lime); --fg:#fff; }
.btn--on-lime:hover{ background:#6A2410; }

/* ---- concept primitive: papel-picado on a string -------------------------
   The festive bunting hung at panel seams. Pure CSS cut-paper flags on a
   string — pinking-tooth bottom via a repeating conic mask. Decorative only. */
.papel{ height:30px; width:100%; position:relative; }
.papel::before{ /* the string */
  content:""; position:absolute; top:5px; left:0; right:0; height:2px;
  background:rgba(36,20,16,.32);
}
.papel__row{ display:flex; gap:0; height:100%; padding-top:6px; }
.papel__flag{ flex:1 1 0; height:22px;
  -webkit-mask:radial-gradient(10px at 50% 100%, transparent 96%, #000 100%) bottom/20px 12px repeat-x,
        linear-gradient(#000 0 0) top/100% 12px no-repeat;
          mask:radial-gradient(10px at 50% 100%, transparent 96%, #000 100%) bottom/20px 12px repeat-x,
        linear-gradient(#000 0 0) top/100% 12px no-repeat;
  margin-top:0;
}
.papel__flag:nth-child(4n-3){ background:var(--salsa); }
.papel__flag:nth-child(4n-2){ background:var(--marigold); }
.papel__flag:nth-child(4n-1){ background:var(--nopal); }
.papel__flag:nth-child(4n){ background:#2389BC; }
.papel--on-dark::before{ background:rgba(251,243,224,.3); }

/* ---- concept primitive: the lotería card FRAME ---------------------------
   A real lotería card = an illustrated picture in a double-ruled frame, with a
   big number in the corner and the card's name on a banner below. This is the
   signature unit: dish cards, gallery cards, and section heads all wear it. */
.loteria-frame{
  position:relative; background:var(--cream); border:2px solid var(--ink);
  border-radius:6px; padding:7px;
  box-shadow:var(--shadow);
}
.loteria-frame::after{ /* the inner rule */
  content:""; position:absolute; inset:11px; border:1.5px solid var(--salsa);
  border-radius:3px; pointer-events:none;
}

/* ===========================================================================
   HEADER  ·  rides nav.js verbatim ([data-nav]/[data-nav-toggle]/[data-nav-panel])
   =========================================================================== */
.site-header{
  position:sticky; top:0; z-index:60; background:var(--cream);
  border-bottom:2px solid var(--ink);
  box-shadow:0 2px 0 var(--salsa), 0 6px 18px -12px rgba(36,20,16,.5);
}
.header__inner{ display:flex; align-items:center; gap:1rem;
  min-height:var(--header-h); padding-block:.45rem; }
.wordmark{ display:flex; align-items:center; gap:.6rem; text-decoration:none;
  color:var(--ink); margin-right:auto; }
.wordmark__logo{ height:42px; width:auto; flex:0 0 auto; }
.wordmark__text{ display:flex; flex-direction:column; line-height:1; }
.wordmark__name{ font-family:var(--display); font-size:1.32rem; letter-spacing:.01em;
  color:var(--orange); text-transform:none; }
.wordmark__tag{ font-family:var(--script); font-size:.74rem; color:var(--nopal);
  margin-top:1px; }

.nav-toggle{ display:none; }

.nav{ display:flex; align-items:center; gap:.3rem; }
.nav a{ font-family:var(--display); text-transform:uppercase; letter-spacing:.03em;
  font-size:1rem; color:var(--ink); text-decoration:none; padding:.5rem .7rem;
  border-radius:8px; }
.nav a:hover{ color:var(--orange); background:#fff; }
.nav .btn{ margin-left:.4rem; }

/* ---- mobile nav: closed state keyed on the ALWAYS-PRESENT .site-header
   (NOT .nav-enhanced) so there is no flash-of-open-menu before JS runs. The OPEN
   menu is a full-viewport opaque cover (data-nav-lock locks body scroll), so no
   hero shows through at the top seam and the wordmark stays clean above it. ---- */
@media (max-width:760px){
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; border:2px solid var(--ink); border-radius:10px;
    background:#fff; color:var(--ink); cursor:pointer; flex:0 0 auto;
    position:relative; z-index:90;   /* stay tappable ABOVE the open panel (z 80) */
  }
  .nav-toggle .icon{ width:24px; height:24px; }
  .nav-toggle__close{ display:none; }
  .site-header[data-open] .nav-toggle__open{ display:none; }
  .site-header[data-open] .nav-toggle__close{ display:inline-flex; }
  /* drop the header seam so the open cover reads as one clean cream field;
     keep the brand crisp above the panel. */
  .site-header[data-open]{ box-shadow:none; border-bottom-color:transparent; }
  .site-header[data-open] .wordmark{ position:relative; z-index:90; }

  .nav{
    position:fixed; inset:0; z-index:80;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:.2rem; padding:calc(var(--header-h) + 1rem) 1.2rem 2rem;
    background:var(--cream);
    background-image:radial-gradient(120% 60% at 50% 100%, rgba(184,74,24,.10), transparent 62%);
    border-bottom:none;
    /* CLOSED first-paint state (no .nav-enhanced needed) */
    visibility:hidden; opacity:0; transform:translateY(-10px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    overflow-y:auto;
  }
  .site-header[data-open] .nav{
    visibility:visible; opacity:1; transform:none;
    transition:opacity .22s ease, transform .22s ease, visibility 0s;
  }
  .nav a{ font-size:1.34rem; padding:.78rem .4rem; border-bottom:1px solid var(--line);
    border-radius:0; }
  .nav a:hover{ background:transparent; }
  .nav .btn{ margin:.7rem 0 0; width:100%; }
}
html.nav-locked{ overflow:hidden; }

/* ===========================================================================
   HERO  ·  centered-emblem: the REAL logo as the lotería "title card" on a
   lime band; the rating shown as a "called card" strip; the food band beneath.
   =========================================================================== */
.hero{ position:relative; background:var(--lime); overflow:hidden; }
.hero .papel{ position:relative; z-index:2; }
.hero__inner{ position:relative; z-index:2; text-align:center;
  padding:clamp(1.4rem,3vw,2.6rem) 0 clamp(1.8rem,4vw,3rem);
  max-width:920px; }
.hero__eyebrow{ font-family:var(--script); color:#5E1F0C;
  font-size:clamp(1.05rem,2.6vw,1.45rem); margin:.2rem 0 1rem; }
/* the real logo, sat on the lime so the green field blends edge-to-edge */
.hero__emblem{
  width:min(86vw,560px); height:auto; margin:0 auto .2rem;
  filter:drop-shadow(0 14px 26px rgba(36,20,16,.28));
}
.hero__title{ font-size:clamp(2.5rem,8vw,5rem); color:var(--mole);
  margin:.5rem 0 .2rem; letter-spacing:.005em; }
.hero__title-accent{ color:var(--orange-on-lime); }
.hero__lede{ color:#3A2410; font-weight:700;
  font-size:clamp(1.05rem,2.5vw,1.24rem); line-height:1.5;
  max-width:46ch; margin:.7rem auto 1.4rem; }
.hero__cta{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
/* "called card" — the rating, framed like a card that's been marked.
   Wraps and fits any phone width: flex-wrap + max-width:100% so the strip
   never runs past the viewport at 360px (the pieces stack instead). */
.hero__called{
  display:inline-flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:.4rem .7rem; margin:1.5rem auto 0;
  max-width:100%; background:var(--cream); border:2px solid var(--ink);
  border-radius:10px; padding:.55rem 1rem; box-shadow:var(--shadow);
  position:relative;
}
.hero__called::before{ /* the bean marker (frijol) — how you mark a called card */
  content:""; width:14px; height:14px; border-radius:50% 50% 50% 0;
  background:var(--salsa); transform:rotate(-45deg); flex:0 0 auto;
  box-shadow:inset -1px -1px 0 rgba(0,0,0,.25);
}
.hero__called .stars{ color:var(--marigold); font-size:1.04rem; letter-spacing:1px;
  -webkit-text-stroke:.6px #9A6A12; flex:0 0 auto; }
.hero__called b{ color:var(--ink); font-family:var(--display); font-size:1.18rem;
  flex:0 0 auto; }
.hero__called small{ color:var(--muted); font-weight:700; font-size:.86rem;
  white-space:nowrap; }
.hero__called .called__sep{ color:var(--muted); flex:0 0 auto; }
.hero__called a{ color:var(--nopal); font-weight:800; white-space:nowrap; flex:0 0 auto; }

/* the food band beneath the title card */
.hero__band{ position:relative; margin:0; }
.hero__band img{ width:100%; height:clamp(190px,30vw,330px); object-fit:cover;
  display:block; border-top:3px solid var(--ink); }
.hero__band-cap{ position:absolute; right:1rem; bottom:.7rem;
  font-family:var(--script); color:#fff; font-size:1.05rem;
  background:rgba(36,20,16,.6); padding:.25rem .7rem; border-radius:8px;
  text-shadow:0 1px 3px rgba(0,0,0,.6); }

/* ===========================================================================
   SECTION HEADS  ·  the "cantor" calling a card (script kicker over caps title)
   =========================================================================== */
.section-head{ max-width:760px; }
.section-head--center{ margin-inline:auto; text-align:center; }
.kicker{ font-family:var(--script); color:var(--salsa);
  font-size:clamp(1.1rem,2.6vw,1.5rem); margin:0 0 .15rem; }
.kicker--on-dark{ color:var(--marigold); }
.section-head__title{ font-size:clamp(1.9rem,4.6vw,3rem); color:var(--mole); }
.section-head__title--light{ color:var(--cream); }
.section-head__lede{ color:var(--muted); font-weight:600;
  font-size:1.06rem; margin:.7rem 0 0; max-width:58ch; }
.section-head--center .section-head__lede{ margin-inline:auto; }
/* the bean-divider under a centered head */
.bean-rule{ display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin:.9rem auto 0; }
.bean-rule span{ width:9px; height:9px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); background:var(--salsa); }
.bean-rule span:nth-child(2){ background:var(--marigold); }
.bean-rule span:nth-child(3){ background:var(--nopal); }

/* ===========================================================================
   SIGNATURES  ·  THE concept moment — each dish is a numbered LOTERÍA CARD.
   (number chip · framed photo · "El/La <dish>" name banner · the cantor's call)
   Rides nothing JS — pure markup + concept CSS. Stays multi-column on mobile.
   =========================================================================== */
.tabla{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.2vw,1.6rem);
  margin-top:clamp(1.6rem,3vw,2.4rem);
}
.lcard{ position:relative; background:var(--cream); border:2px solid var(--ink);
  border-radius:10px; padding:9px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition:transform .14s, box-shadow .14s; }
.lcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.lcard__num{ position:absolute; top:-13px; left:-13px; z-index:3;
  width:38px; height:38px; border-radius:50%;
  background:var(--salsa); color:#fff; border:2px solid var(--ink);
  display:grid; place-items:center; font-family:var(--display); font-size:1.1rem;
  box-shadow:0 3px 0 rgba(0,0,0,.2); }
.lcard__media{ position:relative; border:1.5px solid var(--ink); border-radius:5px;
  overflow:hidden; }
.lcard__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.lcard__name{ font-family:var(--display); font-size:clamp(1.12rem,2vw,1.42rem);
  color:var(--mole); text-align:center; margin:.7rem .2rem .1rem;
  line-height:1; }
.lcard__es{ display:block; font-family:var(--script); text-transform:none;
  color:var(--salsa); font-size:.92rem; margin-bottom:.25rem; }
.lcard__call{ color:var(--ink-soft); font-weight:600; font-size:.95rem;
  text-align:center; margin:.15rem .35rem .35rem; line-height:1.45; }

/* ===========================================================================
   MENU TEASER  ·  "the full deck" — a called-cards board on the dark mole night
   =========================================================================== */
.teaser{ background:var(--mole); color:var(--cream); overflow:hidden; }
.teaser .papel{ position:relative; z-index:2; }
.teaser__inner{ display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(1.6rem,3.5vw,3rem); align-items:center;
  padding-top:clamp(1.6rem,3vw,2.4rem); }
.teaser__title{ font-size:clamp(2rem,4.4vw,3.1rem); color:var(--cream); margin:.1rem 0 .4rem; }
.teaser__lede{ color:#E9D9BC; font-weight:600; font-size:1.06rem; line-height:1.55; }
.teaser__note{ font-family:var(--display); color:var(--marigold);
  letter-spacing:.04em; font-size:1.04rem; margin:1rem 0 1.3rem; text-transform:uppercase; }
.teaser__cta{ display:flex; gap:.7rem; flex-wrap:wrap; }
/* the board — a lotería tabla of "called" dishes with marigold prices */
.board{ background:var(--pine); border:2px solid var(--marigold); border-radius:12px;
  padding:1.1rem 1.2rem; box-shadow:var(--shadow-lg); }
.board__head{ font-family:var(--script); color:var(--marigold); text-transform:none;
  font-size:1.3rem; text-align:center; margin:0 0 .6rem; }
.board ul{ list-style:none; margin:0; padding:0; }
.board li{ display:flex; align-items:baseline; gap:.5rem; padding:.42rem 0;
  border-bottom:1px dashed rgba(251,243,224,.22); }
.board li:last-child{ border-bottom:0; }
.board__dish{ color:var(--cream); font-weight:700; }
.board__dots{ flex:1 1 auto; border-bottom:1px dotted rgba(251,243,224,.4);
  transform:translateY(-3px); }
.board__price{ color:var(--marigold); font-family:var(--display); font-size:1.08rem;
  letter-spacing:.02em; }

/* ===========================================================================
   GALLERY  ·  the photos as the lotería TABLA strung along the marquee.
   Rides gallery.js VERBATIM: .marquee[data-marquee] > .marquee__track >
   button[data-ph]. Concept = each photo wears the lotería card frame.
   =========================================================================== */
.gallery{ background:var(--cream-2); }
.gallery .marquee{ margin-top:clamp(1.4rem,3vw,2.2rem);
  -webkit-mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee{ overflow:hidden; }
.marquee__track{ display:flex; gap:1rem; width:max-content;
  padding:.6rem .4rem; animation:tabla-scroll 56s linear infinite; }
@keyframes tabla-scroll{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee--static{ overflow-x:auto; }
.marquee--static .marquee__track{ animation:none; }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }
/* each card = a lotería tile (frame + name not shown; the photo IS the card) */
.shot{ flex:0 0 auto; border:0; background:var(--cream); cursor:pointer; padding:7px;
  border:2px solid var(--ink); border-radius:9px; box-shadow:var(--shadow);
  transition:transform .14s; }
.shot:hover{ transform:translateY(-3px) rotate(-1deg); }
.shot:focus-visible{ outline:3px solid var(--marigold); outline-offset:3px; }
.shot img{ width:clamp(168px,22vw,238px); aspect-ratio:4/5; object-fit:cover;
  border:1.5px solid var(--ink); border-radius:5px; }

/* lightbox (gallery.js injects .ph-lightbox into <body> and opens it by
   setting aria-hidden="false" — the CSS keys the display on that attribute). */
.ph-lightbox{ position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; }
.ph-lightbox[aria-hidden="false"]{ display:flex; }
.ph-lightbox__backdrop{ position:absolute; inset:0; background:rgba(20,10,6,.9); }
html.ph-lock{ overflow:hidden; }
.ph-lightbox__dialog{ position:relative; z-index:1; width:min(94vw,1000px); }
.ph-lightbox__figure{ margin:0; }
.ph-lightbox__img{ width:100%; max-height:82vh; object-fit:contain;
  border:3px solid var(--marigold); border-radius:8px; background:#0c0704; }
.ph-lightbox__cap{ color:var(--cream); text-align:center; margin-top:.7rem;
  font-family:var(--script); font-size:1.05rem; }
.ph-lightbox__btn{ position:absolute; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border-radius:50%; border:2px solid var(--marigold);
  background:rgba(20,10,6,.7); color:var(--cream); cursor:pointer;
  display:grid; place-items:center; }
.ph-lightbox__btn svg{ width:24px; height:24px; }
.ph-lightbox__prev{ left:-4px; } .ph-lightbox__next{ right:-4px; }
.ph-lightbox__close{ top:-54px; right:0; transform:none; }
.ph-lightbox__btn:hover{ background:var(--marigold); color:var(--mole); }
@media (max-width:560px){
  .ph-lightbox__prev{ left:4px; } .ph-lightbox__next{ right:4px; }
}

/* ===========================================================================
   AMBIANCE  ·  "festive and bright" — the real room, in a lotería double frame
   =========================================================================== */
.ambiance__inner{ display:grid; grid-template-columns:1fr 1.08fr;
  gap:clamp(1.6rem,3.5vw,3rem); align-items:stretch; }
.ambiance__copy{ align-self:center; }
.ambiance__title{ font-size:clamp(1.9rem,4.2vw,2.8rem); color:var(--mole); margin:.1rem 0 .5rem; }
.ambiance__lede{ color:var(--ink-soft); font-weight:600; font-size:1.07rem; line-height:1.6; }
.ambiance__quote{ font-family:var(--script); color:var(--nopal);
  font-size:1.3rem; line-height:1.45; margin:1.2rem 0 0; text-transform:none; }
.ambiance__cite{ display:block; font-family:var(--body); font-weight:700;
  font-style:normal; color:var(--muted); font-size:.86rem; margin-top:.3rem; }
/* one interior shot fills the whole media column (no empty second cell) and
   stretches to the copy's height — the lotería frame, full-bleed. */
.ambiance__media{ display:grid; }
.ambiance__shot{ margin:0; display:flex; }
.ambiance__shot--lg{ width:100%; }
.ambiance__shot img{ width:100%; height:100%; object-fit:cover; min-height:340px;
  border-radius:5px; }
/* wear the loteria frame */
.ambiance__shot{ background:var(--cream); border:2px solid var(--ink);
  border-radius:9px; padding:7px; box-shadow:var(--shadow); }
.ambiance__shot img{ border:1.5px solid var(--ink); }

/* ===========================================================================
   REVIEWS  ·  carousel on the dark mole night. Rides reviews.js VERBATIM:
   [data-reviews] / [data-reviews-track] / -prev / -next / -dots. Each review =
   a lotería card laid face-up on the board.
   =========================================================================== */
.reviews{ background:var(--mole); color:var(--cream); overflow:hidden; }
.reviews .papel{ position:relative; z-index:2; }
.reviews__viewport{ overflow:hidden; margin-top:clamp(1.4rem,3vw,2.2rem); }
/* align-items:stretch (flex default) makes every face-up card in the row take
   the tallest card's height — equal-height "cards face-up on the board". The
   quote is line-clamped (below) so one long review can't balloon the whole row,
   and the author is pushed to the card foot so every name baseline lines up. */
.reviews__track{ display:flex; align-items:stretch; gap:1.2rem; list-style:none; margin:0; padding:.4rem;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; }
.reviews__track::-webkit-scrollbar{ display:none; }
/* lotería cards laid face-up on the DARK night board: a lifted-charcoal card with
   a marigold edge so it pops off the mole section, light cream copy, and the
   sombrero-yellow star reading bright on the dark (AA on the dark card AND the
   mole band — a gold star needs a dark ground, not the cream it vanished on). */
.review{ scroll-snap-align:start; flex:0 0 min(85vw,360px);
  background:#2E1B12; color:var(--cream); border:2px solid var(--marigold);
  border-radius:11px; padding:1.3rem 1.3rem 1.4rem; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; position:relative; }
.review::after{ content:""; position:absolute; inset:7px; border:1.5px solid rgba(242,179,60,.4);
  border-radius:6px; pointer-events:none; }
.review__stars{ color:var(--marigold); font-size:1.05rem; letter-spacing:1px; margin:0 0 .55rem; }
.review__text{ margin:0; font-size:1.04rem; line-height:1.56; font-weight:600;
  color:var(--cream); quotes:"\201C""\201D";
  /* clamp to a consistent line count so cards stay even height; quotes are
     curated to fit, so nothing readable is actually cut. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden; }
.review__text::before{ content:open-quote; color:var(--marigold); font-family:var(--display);
  font-size:1.4rem; margin-right:.1rem; }
/* margin-top:auto floats the author to the card foot → all names baseline-align
   across the equal-height row. */
.review__author{ margin:.9rem 0 0; margin-top:auto; padding-top:.9rem; font-family:var(--display); color:var(--marigold);
  font-size:1.02rem; }
.reviews__controls{ display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:1.4rem; }
.reviews__btn{ width:48px; height:48px; border-radius:50%;
  border:2px solid var(--marigold); background:transparent; color:var(--marigold);
  cursor:pointer; display:grid; place-items:center; }
.reviews__btn svg{ width:22px; height:22px; }
.reviews__btn:hover{ background:var(--marigold); color:var(--mole); }
.reviews__dots{ display:flex; gap:.5rem; }
.reviews__dots button{ width:11px; height:11px; padding:0; border-radius:50%;
  border:1.5px solid var(--marigold); background:transparent; cursor:pointer; }
.reviews__dots button[aria-current="true"]{ background:var(--marigold); }

/* ===========================================================================
   VISIT  ·  storefront (brick & mortar) + details, in a lotería frame
   =========================================================================== */
.visit__inner{ display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(1.6rem,3.5vw,3rem); align-items:center; }
.visit__photo{ margin:0; background:var(--cream); border:2px solid var(--ink);
  border-radius:10px; padding:8px; box-shadow:var(--shadow); }
.visit__photo img{ width:100%; height:clamp(240px,34vw,400px); object-fit:cover;
  border:1.5px solid var(--ink); border-radius:5px; }
.visit__title{ font-size:clamp(1.9rem,4.2vw,2.8rem); color:var(--mole); margin:.1rem 0 1rem; }
.visit__lines{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:1rem; }
.visit__line{ display:flex; gap:.8rem; align-items:flex-start; }
.visit__ico{ flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  background:var(--lime); border:2px solid var(--ink); display:grid; place-items:center;
  color:var(--mole); }
.visit__ico svg{ width:21px; height:21px; }
.visit__line strong{ color:var(--ink); font-size:1.06rem; }
.visit__line a{ color:var(--nopal); font-weight:800; }
.visit__cta{ display:flex; gap:.7rem; flex-wrap:wrap; }

/* --- hours block (weekly table + special days + live open/closed pill) --- */
.visit__hours{ margin:0 0 1.4rem; }
.hours__head{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:0 0 .7rem; }
.hours__title{ font-size:1.12rem; color:var(--mole); margin:0; font-weight:800; }
/* live-status pill — filled + unhidden by hours-status.js; hidden with no JS */
.hours__status{ display:inline-flex; align-items:center; gap:.4rem; font:800 .82rem/1 var(--body);
  padding:.34rem .7rem; border-radius:999px; border:2px solid var(--ink);
  background:var(--cream-2); color:var(--ink); white-space:nowrap; }
.hours__status::before{ content:""; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--ink); flex:none; }
.hours__status[data-state="open"]{ background:var(--nopal); color:#fff; border-color:var(--nopal-d); }
.hours__status[data-state="open"]::before{ background:var(--marigold); }
.hours__status[data-state="kitchen-closed"]{ background:var(--marigold); color:#3A1F06; border-color:var(--ink); }
.hours__status[data-state="kitchen-closed"]::before{ background:var(--salsa); }
.hours__status[data-state="closed"]{ background:var(--cream-2); color:var(--ink-soft); }
.hours__status[data-state="closed"]::before{ background:var(--salsa); }
.hours__week{ margin:0; display:grid; gap:.18rem; }
.hours__row{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.34rem .1rem; border-bottom:1px dotted rgba(42,26,14,.22); }
.hours__row:last-child{ border-bottom:0; }
.hours__day{ font-weight:800; color:var(--ink); }
.hours__when{ margin:0; text-align:right; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.hours__row--closed .hours__when{ color:var(--salsa); font-weight:700; }
.hours__specials{ list-style:none; margin:.9rem 0 0; padding:.8rem .9rem; display:grid; gap:.5rem;
  background:var(--cream-2); border:1.5px solid var(--ink); border-radius:8px; }
.hours__special{ display:flex; flex-wrap:wrap; gap:.2rem .55rem; align-items:baseline; font-size:.94rem; }
.hours__special-date{ font-weight:800; color:var(--mole); }
.hours__special-when{ color:var(--ink-soft); }
.hours__special-when:only-of-type{ }
.hours__timezone{ margin:.7rem 0 0; font-size:.8rem; color:var(--ink-soft); }

/* ===========================================================================
   FOOTER
   =========================================================================== */
.footer{ background:var(--agave); color:#EAD9BD; }
.footer .papel{ position:relative; z-index:2; }
.footer__inner{ display:flex; flex-wrap:wrap; gap:2rem 3rem; align-items:flex-start;
  padding:clamp(2.2rem,4vw,3.2rem) 0 1.6rem; }
.footer__brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none;
  color:#fff; margin-right:auto; }
.footer__logo{ height:54px; width:auto; }
.footer__name{ font-family:var(--display); font-size:1.4rem; color:var(--marigold);
  display:flex; flex-direction:column; line-height:1; text-transform:none; }
.footer__name small{ font-family:var(--script); font-size:.78rem; color:#C9B68F;
  margin-top:3px; }
.footer__cols{ display:flex; flex-wrap:wrap; gap:1.6rem 2.6rem; }
.footer__col p{ margin:.2rem 0; font-weight:600; }
.footer__lbl{ font-family:var(--display); color:var(--marigold);
  text-transform:uppercase; letter-spacing:.05em; font-size:.92rem; margin-bottom:.4rem !important; }
.footer__col a{ color:#EAD9BD; font-weight:800; }
.footer__col a:hover{ color:#fff; }
.footer__link{ background:none; border:0; color:#EAD9BD; font:inherit; font-weight:800;
  cursor:pointer; padding:.4rem 0; min-height:44px; display:inline-flex; align-items:center;
  text-align:left; text-decoration:underline; text-underline-offset:3px; }
.footer__legal{ border-top:1px solid rgba(251,243,224,.16); padding-top:1.1rem;
  font-size:.85rem; color:#B49E78; }

/* ===========================================================================
   ORDER SHEET  ·  rides order.js VERBATIM. App rows carry the REAL brand marks
   (web-ui-kit icons.md). Brand-tinted chips via --brand.
   =========================================================================== */
.order-sheet{ position:fixed; inset:0; z-index:120; display:none; }
.order-sheet[aria-hidden="false"], .order-sheet.is-open{ display:block; }
.order-sheet__scrim{ position:absolute; inset:0; background:rgba(20,10,6,.66); }
.order-sheet__panel{ position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(100%,520px); max-height:90dvh; overflow:auto;
  background:var(--cream); border:2px solid var(--ink); border-bottom:0;
  border-radius:18px 18px 0 0; box-shadow:var(--shadow-lg);
  padding:1.1rem 1.1rem 1.4rem; }
@media (min-width:560px){
  .order-sheet__panel{ bottom:auto; top:50%; transform:translate(-50%,-50%);
    border:2px solid var(--ink); border-radius:16px; }
}
.order-sheet__head{ display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.4rem; }
.order-sheet__title{ font-family:var(--display); font-size:1.5rem; color:var(--mole); }
.order-sheet__close{ width:42px; height:42px; border-radius:10px; border:2px solid var(--ink);
  background:#fff; color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.order-sheet__close svg{ width:20px; height:20px; }
.order-toggle{ display:flex; gap:.4rem; background:var(--cream-2); border:1.5px solid var(--line);
  border-radius:11px; padding:.3rem; margin:.6rem 0 1rem; }
.order-toggle__tab{ flex:1 1 0; min-height:44px; border:0; border-radius:8px; cursor:pointer;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.03em; font-size:1rem;
  background:transparent; color:var(--muted); }
.order-toggle__tab[aria-selected="true"]{ background:var(--orange); color:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.18); }
.order-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.order-row__link{ display:flex; align-items:center; gap:.9rem; text-decoration:none;
  background:#fff; border:2px solid var(--ink); border-radius:12px; padding:.8rem .9rem;
  min-height:64px; color:var(--ink); transition:transform .12s, box-shadow .12s; }
.order-row__link:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.order-row__icon{ flex:0 0 auto; width:46px; height:46px; border-radius:11px;
  background:var(--cream-2); border:1.5px solid var(--line);
  display:grid; place-items:center; color:var(--brand,var(--ink)); }
.order-row__icon svg{ width:26px; height:26px; }
.order-row__body{ display:flex; flex-direction:column; line-height:1.2; }
.order-row__name{ font-family:var(--display); font-size:1.12rem; color:var(--mole); }
.order-row__meta{ color:var(--muted); font-weight:600; font-size:.88rem; }


/* ===========================================================================
   MENU PAGE  ·  menu.html — chips ride menu-nav.js VERBATIM ([data-menu-nav]).
   Concept = the chip bar reads as the lotería tabla's card-tabs; price rows on
   the cream board with marigold-on-orange leaders.
   =========================================================================== */
.menu-hero{ position:relative; background:var(--mole); overflow:hidden; }
.menu-hero__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.42; }
.menu-hero__scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(36,20,16,.55), rgba(36,20,16,.82)); }
.menu-hero .papel{ position:relative; z-index:2; }
.menu-hero__field{ position:relative; z-index:2; padding:clamp(1.6rem,4vw,3rem) 0; }
.menu-hero__kicker{ font-family:var(--script); color:var(--marigold);
  font-size:clamp(1.2rem,3vw,1.6rem); margin:0 0 .2rem; }
.menu-hero h1{ font-size:clamp(2.2rem,6vw,3.6rem); color:var(--cream); margin:0 0 .5rem; }
.menu-hero p{ color:#E9D9BC; font-weight:600; max-width:60ch; margin:.3rem 0; }
.menu-hero__note{ font-size:.95rem; color:#C9B68F !important; }
.menu-hero__note a{ color:var(--marigold); font-weight:800; }

/* The sticky category bar. menu-nav.js injects flanking prev/next arrows as
   direct children of [data-menu-nav] when the chip strip overflows, so the bar
   is a flex ROW: [◀ arrow] [.wrap horizontal scroller] [arrow ▶]. The arrows
   are hidden until the strip actually overflows (--scrollable). The .wrap is
   the lone horizontal scroller menu-nav.js drives (overflow-x:auto). */
.menu-nav{ position:sticky; top:var(--header-h); z-index:50; background:var(--cream);
  border-bottom:2px solid var(--ink); box-shadow:0 2px 0 var(--salsa);
  display:flex; align-items:stretch; }
.menu-nav .wrap{ flex:1 1 auto; min-width:0; width:auto;
  display:flex; gap:.55rem; overflow-x:auto; padding:.7rem clamp(.9rem,3vw,1.2rem);
  scroll-padding-inline:1rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.menu-nav .wrap::-webkit-scrollbar{ display:none; }
.menu-nav a{ flex:0 0 auto; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.03em; font-size:.95rem; line-height:1; color:var(--ink);
  text-decoration:none; padding:0 .95rem; min-height:44px;
  display:inline-flex; align-items:center; background:#fff;
  border:1.5px solid var(--ink); border-radius:999px; white-space:nowrap;
  transition:background-color .14s, color .14s, box-shadow .14s, transform .14s; }
.menu-nav a:hover{ background:var(--lime); }
.menu-nav a:focus-visible{ outline:3px solid var(--nopal); outline-offset:2px; }
.menu-nav a[aria-current="true"], .menu-nav a.is-active{
  background:var(--orange); color:#fff; border-color:var(--ink);
  box-shadow:0 3px 0 var(--orange-h); transform:translateY(-1px); }

/* Injected scroll arrows — round brand buttons that flank the strip. Hidden
   until the strip overflows; the JS toggles .menu-nav--scrollable and the
   per-button [disabled] at each scroll end. */
.menu-nav__arrow{ flex:0 0 auto; display:none; align-items:center; justify-content:center;
  width:44px; min-height:44px; align-self:center; margin:0 .35rem; padding:0;
  color:var(--ink); background:var(--cream-2); border:1.5px solid var(--ink);
  border-radius:50%; cursor:pointer; box-shadow:var(--shadow);
  transition:background-color .14s, color .14s, opacity .14s; }
.menu-nav__arrow svg{ width:22px; height:22px; }
.menu-nav__arrow:hover:not(:disabled){ background:var(--orange); color:#fff; }
.menu-nav__arrow:focus-visible{ outline:3px solid var(--nopal); outline-offset:2px; }
.menu-nav__arrow:disabled{ opacity:.32; cursor:default; }
.menu-nav--scrollable .menu-nav__arrow{ display:inline-flex; }
/* subtle edge fade so the strip clearly reads as horizontally scrollable */
.menu-nav--scrollable .wrap{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }

.menu-main{ padding:clamp(2rem,4vw,3.4rem) 0 4rem; }
.menu-section{ scroll-margin-top:calc(var(--header-h) + var(--menu-nav-h,56px) + 14px);
  margin-bottom:clamp(2.2rem,4vw,3.2rem); }
.menu-section__head{ display:flex; align-items:baseline; gap:.8rem; margin:0 0 1rem;
  padding-bottom:.5rem; border-bottom:2px solid var(--ink); position:relative; }
.menu-section__head::after{ content:""; position:absolute; left:0; bottom:-2px; width:80px;
  height:2px; background:var(--salsa); }
.menu-section__title{ font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--mole); }
.menu-section__es{ font-family:var(--script); text-transform:none; color:var(--salsa);
  font-size:1.05rem; }
.menu-list{ list-style:none; margin:0; padding:0; display:grid; gap:.2rem; }
.menu-item{ display:flex; align-items:baseline; gap:.5rem; padding:.5rem 0;
  border-bottom:1px solid var(--line); }
.menu-item:last-child{ border-bottom:0; }
.menu-item__name{ font-weight:800; color:var(--ink); }
.menu-item__desc{ display:block; font-weight:500; color:var(--muted); font-size:.92rem;
  line-height:1.4; margin-top:1px; }
.menu-item__dots{ flex:1 1 auto; border-bottom:1px dotted var(--muted);
  transform:translateY(-3px); min-width:1.5rem; }
.menu-item__price{ font-family:var(--display); color:var(--orange); font-size:1.06rem;
  white-space:nowrap; letter-spacing:.01em; }
.menu-item__col{ flex:1 1 auto; }
.menu-foot{ text-align:center; color:var(--muted); font-weight:600; margin-top:2.4rem; }
.menu-foot .btn{ margin-top:1rem; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:900px){
  .teaser__inner, .ambiance__inner, .visit__inner{ grid-template-columns:1fr; }
  .teaser__copy, .ambiance__copy{ order:1; }
  .board, .ambiance__media, .visit__photo{ order:2; }
}
@media (max-width:680px){
  /* THE STANDING RULE: image grids stay MULTI-COLUMN on mobile (never 1-up). */
  .tabla{ grid-template-columns:repeat(2,1fr); gap:1.1rem 1rem; }
  .lcard__num{ width:32px; height:32px; font-size:.98rem; top:-11px; left:-11px; }
  .lcard__name{ font-size:1.04rem; }
  .lcard__call{ font-size:.86rem; }
  .ambiance__shot img{ min-height:240px; }
}
@media (max-width:420px){
  .hero__title{ font-size:2.2rem; }
  .order-row__meta{ font-size:.82rem; }
}


/* ---- review CTA (Google "write a review" ask — ADR 0047, free/ungated) ---- */
.review-cta{ background:#AED138; padding:clamp(2.6rem,7vw,4.4rem) 1rem;
  background-image:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.35), transparent 60%); }
.review-cta__inner{ max-width:34rem; margin:0 auto; text-align:center; background:#FBF3E0;
  border:2px solid #B84A18; border-radius:20px; padding:clamp(1.7rem,4vw,2.6rem);
  box-shadow:0 16px 34px -20px rgba(36,20,16,.5); }
.review-cta__title{ font-family:var(--display,'Anton',sans-serif); color:#2E4A12;
  font-size:clamp(1.7rem,5vw,2.4rem); margin:0 0 .4rem; }
.review-cta__lede{ color:#5A4326; margin:0 auto 1.3rem; max-width:30rem; }
.review-cta__btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:#B84A18; color:#FBF3E0; font-weight:800; letter-spacing:.01em; text-decoration:none;
  padding:.9rem 1.7rem; min-height:50px; border-radius:999px;
  box-shadow:0 10px 22px -12px rgba(184,74,24,.7); transition:filter .15s ease; }
.review-cta__btn:active{ filter:brightness(.93); }  /* color-only feedback, no size-shift */