/* ============================================================================
   El Grand Taco — app.css (v2). Bright Mexican street-taco stand, light-committed.
   Compiled stylesheet (tokens + critical live inline in head.php).
   ========================================================================== */

/* ---------- Layout primitives ---------- */
.section{padding-block:clamp(3.2rem,7vw,5.6rem)}
.section-head{max-width:44rem;margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.h-sec{font-size:clamp(1.7rem,1.2rem + 2vw,2.7rem);margin-block:.5rem .6rem}
.lead{font-size:var(--step-1);color:var(--ink-soft);line-height:1.5}

/* ---------- Hero ---------- */
.hero__grid{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.hero__lead{margin-top:1rem;max-width:34rem;font-size:var(--step-1);color:var(--ink-soft)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.hero__tags{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.4rem;list-style:none}
.hero__tags li{display:inline-flex;align-items:center;gap:.4ch;font-family:var(--font-head);font-weight:600;font-size:.86rem;color:var(--ink-soft);background:var(--cream-2);border:1px solid var(--border);padding:.4rem .8rem;border-radius:var(--pill)}
.hero__tags svg{color:var(--lime-600)}
.hero__media{position:relative;justify-self:center;width:100%}
.hero__media img{width:100%;max-height:min(34svh,240px);object-fit:cover;border-radius:22px;box-shadow:var(--shadow-lg);border:3px solid var(--paper)}
.hero__badge{position:absolute;left:.9rem;bottom:.9rem;display:inline-flex;align-items:center;gap:.45ch;background:var(--ink);color:var(--cream);font-family:var(--font-head);font-weight:700;font-size:.8rem;padding:.42rem .8rem;border-radius:var(--pill)}
.hero__badge svg{color:var(--maize)}
/* Mobile single-column: keep the whole hero within one screen */
@media (max-width:859px){
  .hero__grid{gap:.85rem}
  .hero__copy{order:1}
  .hero__media{order:2}
  .hero__lead{margin-top:.6rem;font-size:var(--step-0)}
  .hero__ctas{margin-top:1rem}
  .hero__tags{margin-top:.7rem}
  .hero__media img{max-height:min(28svh,185px)}
}
@media (min-width:860px){
  .hero__grid{grid-template-columns:1.05fr .95fr}
  .hero__media img{max-height:calc(100svh - var(--header-h) - 5rem)}
}
/* Short-viewport tiers so hero + CTA always fit one screen */
@media (max-height:780px){
  .hero{padding-block:.9rem}
  .hero__tags{display:none}
  .hero__media img{max-height:26svh}
}
@media (max-height:660px){
  .hero__lead{margin-top:.5rem}
  .hero__ctas{margin-top:.9rem}
  .hero__media img{max-height:22svh}
}
@media (max-height:560px){
  .hero__media{display:none}
  .hero__grid{grid-template-columns:1fr}
  .hero__lead{display:none}
}

/* ---------- Reveal (below-the-fold only) ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-root] [data-reveal]:nth-child(2){transition-delay:.06s}
.rail__card[data-reveal]{transition-delay:0s}
.rail__track [data-reveal].is-in{transition-delay:calc(var(--i,0) * .07s)}
.why__grid [data-reveal].is-in{transition-delay:calc(var(--i,0) * .08s)}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- Signature rail (horizontal) ---------- */
.signature{background:linear-gradient(180deg,var(--cream),var(--cream-2))}
.rail{margin-top:1.6rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail__track{display:flex;gap:1rem;padding-inline:var(--gutter);padding-block:.4rem 1rem;width:max-content}
.rail__card{position:relative;flex:0 0 78vw;max-width:20rem;scroll-snap-align:start;border-radius:20px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow);border:1px solid var(--border)}
.rail__card img{width:100%;height:22rem;object-fit:cover;transition:transform .5s ease}
.rail__card:hover img{transform:scale(1.05)}
.rail__cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1rem .9rem;display:flex;flex-direction:column;gap:.1rem;color:#fff;background:linear-gradient(180deg,transparent,rgba(20,15,10,.82))}
.rail__k{font-family:var(--font-display);font-weight:800;font-size:1.25rem}
.rail__t{font-size:.85rem;opacity:.9}
.rail__card--cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;text-align:center;background:var(--lime-100);border:2px dashed var(--lime);padding:1.5rem}
.rail__cta-ico{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--red);color:#fff}
.rail__cta-line{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--ink)}
.rail__cta-num{font-family:var(--font-head);font-weight:700;color:var(--lime-600)}
@media (min-width:680px){.rail__card{flex-basis:20rem}}

/* ---------- Photo menu (STAR tool) ---------- */
.menu-section{background:
  radial-gradient(90% 60% at 100% 0,var(--red-100),transparent 55%),var(--cream)}
.menu{background:var(--paper);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.menu__tabs{display:flex;gap:.3rem;padding:.6rem;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);background:var(--cream-2)}
.menu__tabs::-webkit-scrollbar{display:none}
.menu__tab{flex:0 0 auto;padding:.7rem 1.25rem;min-height:2.9rem;border:2px solid transparent;border-radius:var(--pill);background:transparent;color:var(--ink-soft);font-family:var(--font-head);font-weight:700;font-size:.98rem;cursor:pointer;transition:background .18s,color .18s,transform .18s}
.menu__tab:hover{color:var(--ink)}
.menu__tab[aria-selected=true]{background:var(--red);color:#fff;box-shadow:0 6px 16px -8px rgba(201,55,42,.7)}
.menu__panel{padding:clamp(1rem,3vw,1.8rem)}
.menu__panel[hidden]{display:none}
.menu__grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:620px){.menu__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.menu__grid{grid-template-columns:repeat(3,1fr)}}
.dish{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--cream-2);transition:transform .2s ease,box-shadow .2s ease}
.dish:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.dish__media{aspect-ratio:4/3;overflow:hidden;background:var(--border)}
.dish__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.dish:hover .dish__media img{transform:scale(1.06)}
.dish__body{padding:1rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.dish__name{font-family:var(--font-display);font-weight:800;font-size:1.18rem}
.dish__desc{font-size:.95rem;color:var(--ink-soft);line-height:1.5;flex:1}
.dish__call{display:inline-flex;align-items:center;gap:.45ch;align-self:flex-start;margin-top:.3rem;font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--lime-600);padding:.4rem .7rem;border-radius:var(--pill);background:var(--lime-100);transition:background .15s,transform .15s}
.dish__call:hover{background:var(--lime);color:#fff;transform:translateY(-1px)}
.menu__foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding:1.1rem clamp(1rem,3vw,1.8rem);border-top:1px solid var(--border);background:var(--cream-2)}
.menu__note{font-size:.86rem;color:var(--ink-soft);max-width:32rem}

/* ---------- Patio ---------- */
.patio{background:linear-gradient(180deg,var(--cream-2),var(--cream))}
.patio__grid{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.patio__media{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);border:3px solid var(--paper)}
.patio__media img{width:100%;height:100%;max-height:30rem;object-fit:cover}
.patio__cap{position:absolute;left:.9rem;bottom:.9rem;display:inline-flex;align-items:center;gap:.45ch;background:var(--ink);color:var(--cream);font-family:var(--font-head);font-weight:700;font-size:.8rem;padding:.42rem .8rem;border-radius:var(--pill)}
.patio__cap svg{color:var(--maize)}
.ticks{list-style:none;margin:1.4rem 0;display:flex;flex-direction:column;gap:.7rem}
.ticks li{display:flex;align-items:flex-start;gap:.6ch;font-weight:500}
.ticks__i{display:grid;place-items:center;flex:0 0 auto;width:1.65rem;height:1.65rem;border-radius:50%;background:var(--lime-100);color:var(--lime-600)}
@media (min-width:860px){.patio__grid{grid-template-columns:1fr 1fr}}

/* ---------- Why ---------- */
.why__grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
.why__card{padding:1.6rem;border:1px solid var(--border);border-radius:20px;background:var(--paper);box-shadow:var(--shadow)}
.why__ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:14px;background:var(--maize-100);color:var(--red);margin-bottom:.9rem}
.why__card h3{font-size:1.3rem;margin-bottom:.4rem}
.why__card p{color:var(--ink-soft)}
@media (min-width:760px){.why__grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- Visit + map facade ---------- */
.visit{background:linear-gradient(180deg,var(--cream),var(--cream-2))}
.visit__grid{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.facts{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}
.fact{display:flex;gap:.9rem;align-items:flex-start}
.fact__i{display:grid;place-items:center;flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:12px;background:var(--red-100);color:var(--red)}
.fact__k{display:block;font-family:var(--font-head);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.fact__v{display:block;font-weight:500;margin-top:.15rem}
.fact__v a{color:var(--lime-600);font-weight:700}
.visit__map{min-height:20rem}
.mapfacade{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;width:100%;height:100%;min-height:20rem;cursor:pointer;border:none;border-radius:22px;color:var(--ink);text-align:center;
  background-color:var(--lime-100);
  background-image:
    radial-gradient(circle at 20% 30%,rgba(90,165,40,.18) 0 8%,transparent 9%),
    radial-gradient(circle at 75% 65%,rgba(201,55,42,.14) 0 10%,transparent 11%),
    linear-gradient(0deg,rgba(255,255,255,.5),rgba(255,255,255,.5)),
    repeating-linear-gradient(0deg,var(--border) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,var(--border) 0 1px,transparent 1px 46px);
  overflow:hidden;box-shadow:var(--shadow)}
.mapfacade__pin{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--red);color:#fff;box-shadow:0 8px 18px -6px rgba(201,55,42,.7)}
.mapfacade__addr{font-family:var(--font-display);font-weight:800;font-size:1.05rem;line-height:1.3}
.mapfacade__load{font-family:var(--font-head);font-weight:700;font-size:.82rem;color:var(--lime-600);background:var(--paper);padding:.35rem .8rem;border-radius:var(--pill);border:1px solid var(--border)}
.mapfacade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (min-width:860px){.visit__grid{grid-template-columns:1fr 1fr}}

/* ---------- Final CTA ---------- */
.final{background:var(--ink);color:var(--cream);padding-block:clamp(3.4rem,8vw,5.6rem)}
.final__inner{text-align:center;max-width:42rem;margin-inline:auto}
.final__eye{color:var(--maize)}
.final__title{font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);margin-block:.6rem .8rem;color:#fff}
.final__lead{color:color-mix(in srgb,var(--cream) 82%,transparent);font-size:var(--step-1)}
.final__btn{margin-top:1.6rem;background:var(--maize);color:var(--ink);box-shadow:0 12px 30px -10px rgba(242,183,5,.6)}
.final__btn:hover{background:#ffc61a;transform:translateY(-2px)}

/* ---------- Footer ---------- */
.site-footer{background:var(--cream-2);border-top:1px solid var(--border)}
.foot-band{background:var(--red);color:#fff}
.foot-band__inner{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;padding-block:1.5rem}
.foot-band__k{display:inline-flex;align-items:center;gap:.5ch;font-family:var(--font-head);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;opacity:.92}
.foot-band__k svg{color:var(--maize)}
.foot-band__line{font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,1rem + 1.5vw,1.9rem)}
.foot-band__btn{background:#fff;color:var(--red)}
.foot-band__btn:hover{background:var(--cream);transform:translateY(-2px)}
.foot-grid{display:grid;gap:2rem;grid-template-columns:1fr;padding-block:clamp(2.4rem,5vw,3.4rem)}
.foot-logo{height:2.6rem;width:auto;margin-bottom:.9rem}
.foot-tag{color:var(--ink-soft);max-width:22rem;margin-bottom:1rem}
.foot-nap{font-style:normal;color:var(--ink-soft);line-height:1.7}
.foot-nap a{color:var(--lime-600);font-weight:700}
.foot-col h3{font-family:var(--font-head);font-weight:800;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:.9rem}
.foot-col a{display:block;color:var(--ink-soft);padding:.25rem 0;transition:color .15s}
.foot-col a:hover{color:var(--red)}
.foot-hours{color:var(--ink-soft);margin-bottom:.6rem}
.foot-inline{display:inline-flex!important;align-items:center;gap:.45ch;color:var(--lime-600)!important;font-weight:700}
.foot-bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;justify-content:space-between;padding-block:1.3rem;border-top:1px solid var(--border);font-size:.85rem;color:var(--ink-soft)}
.studio-credit{font-size:.82rem}
.studio-credit__link{color:var(--lime-600);font-weight:700}
@media (min-width:640px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}}

/* ---------- Mobile menu ---------- */
.mobile-menu{position:fixed;inset:0;z-index:200;background:color-mix(in srgb,var(--ink) 40%,transparent);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s}
.mobile-menu[hidden]{display:none}
.mobile-menu.is-open{opacity:1}
.mobile-menu__inner{position:absolute;top:0;right:0;height:100%;width:min(20rem,82vw);background:var(--cream);padding:calc(var(--header-h) + 1rem) 1.4rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.mobile-menu.is-open .mobile-menu__inner{transform:none}
.mobile-menu__inner a[data-mm-link]{font-family:var(--font-display);font-weight:700;font-size:1.4rem;padding:.6rem 0;border-bottom:1px solid var(--border)}
.mobile-menu__inner .btn{margin-top:1rem}
@media (prefers-reduced-motion:reduce){.mobile-menu,.mobile-menu__inner{transition:none}}

/* ---------- Sticky mobile call ---------- */
.stickycall{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:90;display:none;align-items:center;justify-content:center;gap:.55ch;min-height:3.3rem;background:var(--red);color:#fff;font-family:var(--font-head);font-weight:800;border-radius:var(--pill);box-shadow:0 14px 30px -10px rgba(201,55,42,.75);transform:translateY(150%);transition:transform .3s ease}
.stickycall.is-show{transform:none}
@media (max-width:899px){.stickycall{display:flex}}
@media (prefers-reduced-motion:reduce){.stickycall{transition:none}}