/* ============================================================
   TENOCH GRILL & BAR — "Mercado Nocturno" design system
   Warm Mexican-cantina, green-led fiesta palette. One edit re-themes.
   ============================================================ */
:root{
  /* palette */
  --masa:#FBF3E4; --masa-2:#F4E7CF; --masa-3:#EADAB8;
  --mole:#1E1410; --mole-2:#2A1B14; --mole-3:#3A2719;
  --ink:#241712; --ink-soft:#5c4a3d;
  --nopal:#1E8E4E; --nopal-deep:#155E37; --nopal-bright:#37B86A;
  --achiote:#E0451F; --achiote-deep:#B8350F;
  --marigold:#F4A52C; --marigold-deep:#D98410;
  --jamaica:#D81E5B; --lime:#BBD83A;
  --cream-line:rgba(36,23,18,.14); --dark-line:rgba(244,231,207,.16);

  /* semantic */
  --bg:var(--masa); --surface:#fff; --text:var(--ink); --muted:var(--ink-soft);
  --brand:var(--nopal-deep); --cta:var(--achiote);

  /* type */
  --display:'Rozha One', Georgia, serif;
  --sans:'Outfit', system-ui, -apple-system, sans-serif;

  /* shape */
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px;
  --shadow-sm:0 2px 10px rgba(30,20,16,.08);
  --shadow:0 14px 40px -16px rgba(30,20,16,.28);
  --shadow-lg:0 30px 70px -28px rgba(30,20,16,.45);
  --shadow-warm:0 18px 50px -20px rgba(224,69,31,.35);

  --container:1200px;
  --z-nav:200; --z-drawer:400; --z-cursor:9000; --z-banner:9999;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ scroll-behavior:auto !important; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--achiote); color:#fff; }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:1.04; margin:0;
  letter-spacing:-.01em; color:var(--ink); }
.h-1{ font-size:clamp(2.6rem,6.4vw,5rem); }
.h-2{ font-size:clamp(2rem,4.4vw,3.4rem); }
.h-3{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
p{ margin:0 0 1rem; }
/* inline icons inside headings stay text-sized (never balloon to container width) */
h1 svg, h2 svg, h3 svg, h4 svg{ width:1.05em; height:1.05em; vertical-align:-.12em; flex:0 0 auto; display:inline-block; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--muted); line-height:1.62; }
.eyebrow{ font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--nopal-deep); display:inline-flex; align-items:center; gap:.5rem; }
.eyebrow--center{ justify-content:center; }
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--achiote); border-radius:2px; }
.eyebrow--center::after{ content:""; width:26px; height:2px; background:var(--achiote); border-radius:2px; }
.muted{ color:var(--muted); }
.accent{ color:var(--achiote); }
.serif-accent{ font-family:var(--display); color:var(--achiote); font-style:normal; }

/* ---------- layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(18px,4vw,40px); }
.section{ padding:clamp(64px,9vw,120px) 0; position:relative; }
.section--tight{ padding:clamp(44px,6vw,80px) 0; }
.section--dark{ background:var(--mole); color:var(--masa); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:var(--masa); }
.section--dark .eyebrow{ color:var(--marigold); }
.section--dark .lead,.section--dark .muted{ color:rgba(244,231,207,.74); }
.section--masa2{ background:var(--masa-2); }
.shead{ max-width:760px; margin-bottom:clamp(34px,5vw,56px); }
.shead.center{ margin-inline:auto; text-align:center; }
.shead .h-1,.shead .h-2{ margin:16px 0 14px; }

/* ---------- buttons ---------- */
.btn{ --bg:var(--achiote); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--sans); font-weight:600; font-size:.98rem; letter-spacing:.01em;
  padding:.92em 1.5em; border-radius:999px; border:1.5px solid transparent;
  background:var(--bg); color:var(--fg); cursor:pointer; position:relative; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .25s, color .25s;
  box-shadow:var(--shadow-warm); white-space:nowrap; }
.btn svg{ width:1.15em; height:1.15em; }
.btn:hover{ transform:translateY(-3px); box-shadow:0 22px 50px -18px rgba(224,69,31,.55); }
.btn:focus-visible{ outline:3px solid var(--marigold); outline-offset:3px; }
.btn::after{ content:""; position:absolute; inset:0; left:-90%; width:60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg); transition:left .6s; }
.btn:hover::after{ left:130%; }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--cream-line); box-shadow:none; }
.btn--ghost:hover{ --fg:var(--ink); border-color:var(--nopal); box-shadow:var(--shadow-sm); }
.section--dark .btn--ghost,.hero .btn--ghost{ --fg:var(--masa); border-color:var(--dark-line); }
.section--dark .btn--ghost:hover,.hero .btn--ghost:hover{ border-color:var(--marigold); }
.btn--gold{ --bg:var(--marigold); --fg:var(--mole); box-shadow:0 14px 40px -18px rgba(244,165,44,.6); }
.btn--gold:hover{ box-shadow:0 22px 50px -18px rgba(244,165,44,.7); }
.btn--green{ --bg:var(--nopal); --fg:#fff; box-shadow:0 14px 40px -18px rgba(30,142,78,.55); }
.btn--lg{ padding:1.05em 1.8em; font-size:1.05rem; }
.btn--block{ width:100%; }

.pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.5em 1em; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid var(--dark-line); backdrop-filter:blur(6px);
  font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.04em; }
.pill svg{ width:1.05em; height:1.05em; }

/* ---------- header ---------- */
.site-head{ position:sticky; top:0; z-index:var(--z-nav); }
.topbar{ background:var(--mole); color:var(--masa); font-family:var(--sans); font-size:.82rem; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:40px; padding-block:6px; }
.topbar a{ display:inline-flex; align-items:center; gap:.45rem; color:rgba(244,231,207,.85); }
.topbar a:hover{ color:var(--marigold); }
.topbar svg{ width:1em; height:1em; color:var(--marigold); }
.tb-right{ display:flex; align-items:center; gap:18px; }
.tb-tag{ color:var(--nopal-bright); font-weight:600; letter-spacing:.04em; }

.nav{ background:rgba(251,243,228,.86); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--cream-line); display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding-block:12px; transition:background .3s, box-shadow .3s; }
.site-head.scrolled .nav{ box-shadow:var(--shadow); background:rgba(251,243,228,.96); }
.brand{ display:inline-flex; align-items:center; gap:12px; }
.brand img{ height:50px; width:auto; }
.brand-txt{ display:flex; flex-direction:column; line-height:1; font-family:var(--display); }
.brand-txt b{ font-size:1.32rem; color:var(--ink); letter-spacing:0; }
.brand-txt span{ font-family:var(--sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--achiote); font-weight:700; margin-top:3px; }
.nav-links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav-links > li > a{ font-family:var(--sans); font-weight:500; font-size:.96rem; color:var(--ink);
  padding:.55em .85em; border-radius:999px; display:inline-flex; align-items:center; gap:.3rem; transition:color .2s, background .2s; }
.nav-links > li > a:hover{ color:var(--achiote); background:rgba(224,69,31,.07); }
.nav-links svg{ width:.95em; height:.95em; }
.has-drop{ position:relative; }
.drop{ position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(8px);
  background:#fff; border:1px solid var(--cream-line); border-radius:var(--r); box-shadow:var(--shadow-lg);
  padding:10px; min-width:230px; opacity:0; visibility:hidden; transition:.25s; display:grid; gap:2px; }
.has-drop:hover .drop, .has-drop:focus-within .drop{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.drop a{ display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:10px; transition:background .18s; }
.drop a:hover{ background:var(--masa-2); }
.drop b{ font-family:var(--sans); font-weight:600; font-size:.92rem; display:block; color:var(--ink); }
.drop small{ color:var(--muted); font-size:.78rem; }
.drop .di{ width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:9px;
  background:var(--masa-2); color:var(--nopal-deep); }
.drop .di svg{ width:18px; height:18px; }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-phone{ display:flex; align-items:center; gap:.5rem; font-family:var(--sans); font-weight:600; font-size:.92rem; color:var(--ink); }
.nav-phone .pi{ width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--nopal); color:#fff; }
.nav-phone .pi svg{ width:16px; height:16px; }
.nav-phone small{ display:block; font-weight:400; font-size:.68rem; color:var(--muted); }
.burger{ display:none; background:none; border:1px solid var(--cream-line); border-radius:10px; padding:8px; color:var(--ink); cursor:pointer; }
.burger svg{ width:24px; height:24px; }
.hide-sm{}

/* drawer */
.drawer{ position:fixed; inset:0; z-index:var(--z-drawer); visibility:hidden; }
.drawer.open{ visibility:visible; }
.drawer-scrim{ position:absolute; inset:0; background:rgba(30,20,16,.55); opacity:0; transition:.3s; }
.drawer.open .drawer-scrim{ opacity:1; }
.drawer-panel{ position:absolute; top:0; right:0; height:100%; width:min(360px,86vw); background:var(--masa);
  box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
  padding:22px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.drawer.open .drawer-panel{ transform:translateX(0); }
.dh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.drawer-close{ background:none; border:1px solid var(--cream-line); border-radius:10px; padding:7px; cursor:pointer; color:var(--ink); }
.drawer-close svg{ width:22px; height:22px; }
.dl{ font-family:var(--sans); font-weight:500; font-size:1.06rem; padding:13px 8px; border-bottom:1px solid var(--cream-line); color:var(--ink); }
.dl:hover{ color:var(--achiote); }

/* ---------- papel picado banner ---------- */
.papel{ display:flex; width:100%; overflow:hidden; line-height:0; }
.papel svg{ width:100%; height:34px; display:block; }
.papel .flag{ transform-origin:top center; animation:sway 5s ease-in-out infinite; }
.papel .flag:nth-child(2n){ animation-delay:-1.6s; }
.papel .flag:nth-child(3n){ animation-delay:-3.1s; }
@keyframes sway{ 0%,100%{ transform:rotate(-1.2deg);} 50%{ transform:rotate(1.4deg);} }

/* ---------- footer ---------- */
.site-foot{ background:var(--mole); color:var(--masa); position:relative; overflow:hidden; }
.foot-top{ padding:clamp(54px,7vw,86px) 0 40px; position:relative; z-index:1; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; }
.foot-brand .brand-txt b{ color:var(--masa); }
.foot-brand p{ color:rgba(244,231,207,.7); font-size:.95rem; margin:16px 0 22px; max-width:32ch; }
.foot-col h4{ font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--marigold); margin:0 0 16px; }
.foot-col a{ display:block; color:rgba(244,231,207,.78); padding:6px 0; font-size:.96rem; transition:color .2s, padding .2s; }
.foot-col a:hover{ color:var(--marigold); padding-left:5px; }
.foot-contact{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.foot-contact li{ display:flex; gap:11px; color:rgba(244,231,207,.8); font-size:.94rem; }
.foot-contact svg{ width:18px; height:18px; color:var(--marigold); flex:0 0 18px; margin-top:2px; }
.foot-contact a:hover{ color:var(--marigold); }
.foot-social{ display:flex; gap:10px; margin-top:18px; }
.foot-social a{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--dark-line); color:var(--masa); transition:.25s; }
.foot-social a:hover{ background:var(--achiote); border-color:var(--achiote); transform:translateY(-3px); }
.foot-social svg{ width:20px; height:20px; }
.foot-bottom{ border-top:1px solid var(--dark-line); padding:22px 0; display:flex; justify-content:space-between;
  align-items:center; gap:14px; flex-wrap:wrap; font-size:.85rem; color:rgba(244,231,207,.6); position:relative; z-index:1; }
.foot-watermark{ position:absolute; bottom:-3.5vw; left:50%; transform:translateX(-50%); font-family:var(--display);
  font-size:19vw; line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(244,231,207,.07); white-space:nowrap; pointer-events:none; z-index:0; }

/* ---------- forms ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--sans); font-weight:600; font-size:.85rem; margin-bottom:6px; color:var(--ink); }
.field input,.field select,.field textarea{ width:100%; padding:.85em 1em; border:1.5px solid var(--cream-line);
  border-radius:12px; background:#fff; font-family:var(--sans); font-size:1rem; color:var(--ink); transition:border .2s, box-shadow .2s; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--nopal); box-shadow:0 0 0 3px rgba(30,142,78,.15); }
.field textarea{ min-height:120px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-note{ display:flex; align-items:center; gap:10px; margin-top:16px; color:var(--nopal-deep);
  font-family:var(--sans); font-weight:600; font-size:.92rem; }
.form-note svg{ width:1.2em; height:1.2em; }

/* ---------- generic cards / grids ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.card{ background:#fff; border:1px solid var(--cream-line); border-radius:var(--r-lg); overflow:hidden;
  position:relative; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--marigold),transparent); opacity:.6; }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }

/* feature/icon cards */
.feat{ background:#fff; border:1px solid var(--cream-line); border-radius:var(--r-lg); padding:30px;
  transition:transform .35s, box-shadow .35s; position:relative; }
.feat:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.feat .fi{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(140deg,var(--nopal),var(--nopal-deep)); color:#fff; box-shadow:0 10px 24px -10px rgba(30,142,78,.5); }
.feat .fi svg{ width:26px; height:26px; }
.feat h3{ font-family:var(--display); font-size:1.4rem; margin-bottom:8px; }
.feat p{ color:var(--muted); font-size:.96rem; margin:0; }
.feat--alt .fi{ background:linear-gradient(140deg,var(--achiote),var(--achiote-deep)); box-shadow:0 10px 24px -10px rgba(224,69,31,.5); }
.feat--alt2 .fi{ background:linear-gradient(140deg,var(--marigold),var(--marigold-deep)); color:var(--mole); }

/* check list */
.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.check-list li{ display:flex; gap:11px; align-items:flex-start; font-size:1rem; color:var(--ink); }
.check-list svg{ width:22px; height:22px; flex:0 0 22px; color:var(--nopal); margin-top:1px; }

/* quick answer / key facts / faq (AEO) */
.quick-answer{ background:var(--masa-2); border-left:4px solid var(--nopal); border-radius:0 12px 12px 0;
  padding:18px 22px; margin:0 0 26px; }
.quick-answer .qa-label{ font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--nopal-deep); margin:0 0 6px; }
.quick-answer p{ margin:0; color:var(--ink); font-size:1.02rem; }
.key-facts{ width:100%; border-collapse:collapse; margin:8px 0 4px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); }
.key-facts th,.key-facts td{ text-align:left; padding:13px 18px; border-bottom:1px solid var(--cream-line); font-size:.96rem; }
.key-facts th{ width:42%; font-family:var(--sans); font-weight:600; color:var(--nopal-deep); background:var(--masa-2); }
.key-facts tr:last-child th,.key-facts tr:last-child td{ border-bottom:0; }

.faqs .faq-item{ border:1px solid var(--cream-line); border-radius:14px; margin-bottom:12px; background:#fff; overflow:hidden; }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:18px 22px;
  font-family:var(--sans); font-weight:600; font-size:1.04rem; color:var(--ink); display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq-q .ic{ flex:0 0 24px; width:24px; height:24px; display:grid; place-items:center; color:var(--achiote); transition:transform .3s; }
.faq-q .ic svg{ width:20px; height:20px; }
.faq-item.open .faq-q .ic{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a p{ padding:0 22px 20px; margin:0; color:var(--muted); }
.section--dark .faqs .faq-item{ background:var(--mole-2); border-color:var(--dark-line); }
.section--dark .faq-q{ color:var(--masa); }
.section--dark .faq-a p{ color:rgba(244,231,207,.72); }

/* updated stamp */
.updated{ font-size:.82rem; color:var(--muted); font-family:var(--sans); }

/* custom cursor */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:var(--z-cursor);
  border-radius:50%; mix-blend-mode:normal; opacity:0; transition:opacity .3s; }
.cursor-dot{ width:8px; height:8px; background:var(--achiote); margin:-4px 0 0 -4px; }
.cursor-ring{ width:38px; height:38px; border:2px solid var(--marigold); margin:-19px 0 0 -19px; transition:opacity .3s, width .25s, height .25s, background .25s, border-color .25s; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor summary, html.has-cursor .btn, html.has-cursor [data-tilt]{ cursor:none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select{ cursor:auto; }
.cursor-ring.is-active{ width:54px; height:54px; background:rgba(244,165,44,.14); border-color:var(--achiote); }

/* grain overlay */
.grain{ position:fixed; inset:0; pointer-events:none; z-index:120; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* motion/contrast toggle */
.motion-toggle{ position:fixed; bottom:18px; left:18px; z-index:var(--z-nav); display:inline-flex; align-items:center; gap:.5rem;
  background:var(--mole); color:var(--masa); border:1px solid var(--dark-line); border-radius:999px;
  padding:.55em .95em; font-family:var(--sans); font-weight:600; font-size:.78rem; cursor:pointer; box-shadow:var(--shadow); }
.motion-toggle svg{ width:1.05em; height:1.05em; color:var(--marigold); }
html.reduce-fx .grain{ display:none; }

/* floating call button (mobile) */
.fab{ position:fixed; right:16px; bottom:16px; z-index:var(--z-nav); display:none; align-items:center; gap:.5rem;
  background:var(--achiote); color:#fff; padding:.85em 1.25em; border-radius:999px; font-family:var(--sans); font-weight:600;
  box-shadow:var(--shadow-warm); }
.fab svg{ width:1.2em; height:1.2em; }

/* reveals */
[data-reveal]{ opacity:0; }
html.reduce-fx [data-reveal]{ opacity:1 !important; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .papel .flag{ animation:none; }
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .nav-links, .nav-phone{ display:none; }
  .burger{ display:inline-flex; }
  .grid-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .hide-sm{ display:none !important; }
  .grid-3,.grid-2,.form-row{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:30px; }
  .fab{ display:inline-flex; }
  .topbar .tb-left{ display:none; }
}