/* ============================================================
   TENOCH — homepage hero + page-heroes + section layouts
   ============================================================ */

/* ---------- HERO ---------- */
.hero{ position:relative; isolation:isolate; min-height:clamp(620px,92vh,920px); display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; background:var(--mole); }
.hero__poster,.hero__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__media{ transform:scale(1.08); will-change:transform; }
#hero-gl{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.hero__scrim{ position:absolute; inset:0; z-index:3;
  background:linear-gradient(180deg, rgba(20,12,8,.62) 0%, rgba(20,12,8,.28) 36%, rgba(20,12,8,.55) 72%, rgba(20,12,8,.92) 100%); }
.hero__scrim::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 18% 90%, rgba(224,69,31,.28), transparent 60%); mix-blend-mode:screen; }
.hero__papel{ position:absolute; top:0; left:0; right:0; z-index:4; }
.hero__inner{ position:relative; z-index:5; padding-bottom:clamp(48px,8vh,96px); padding-top:90px; color:var(--masa); }
.hero__inner .pill{ margin-bottom:22px; }
.hero h1{ color:var(--masa); font-size:clamp(2.9rem,8vw,6.4rem); line-height:.98; max-width:16ch; text-shadow:0 4px 40px rgba(0,0,0,.4); }
.hero h1 .word{ display:inline-block; }
.hero h1 em{ font-style:normal; color:var(--marigold); }
.hero__sub{ max-width:56ch; margin:22px 0 30px; font-size:clamp(1.05rem,1.6vw,1.32rem); color:rgba(244,231,207,.92); line-height:1.55; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero__scroll{ display:inline-flex; align-items:center; gap:.5rem; margin-top:30px; font-family:var(--sans);
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(244,231,207,.7); }
.hero__scroll svg{ width:1.1em; height:1.1em; animation:bob 1.8s ease-in-out infinite; color:var(--marigold); }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ---------- hours bar ---------- */
.hours-bar{ background:var(--mole-2); color:var(--masa); position:relative; z-index:6; }
.hours-bar .container{ display:flex; align-items:center; justify-content:center; gap:clamp(18px,4vw,52px); flex-wrap:wrap; padding-block:18px; }
.hours-bar .hb{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--sans); font-size:.96rem; }
.hours-bar .hb svg{ width:1.2em; height:1.2em; color:var(--marigold); }
.hours-bar .hb b{ color:var(--marigold); font-weight:600; }
.hours-bar .hb-divider{ width:1px; height:22px; background:var(--dark-line); }

/* ---------- page hero (inner) ---------- */
.phero{ position:relative; isolation:isolate; background:var(--mole); color:var(--masa); overflow:hidden;
  padding:clamp(120px,16vh,180px) 0 clamp(54px,8vh,84px); }
.phero__media{ position:absolute; inset:0; z-index:0; }
.phero__media img{ width:100%; height:100%; object-fit:cover; opacity:.5; transform:scale(1.05); }
.phero__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(20,12,8,.72),rgba(20,12,8,.62)); }
.phero__scrim::after{ content:""; position:absolute; inset:0; background:radial-gradient(110% 90% at 80% 0%, rgba(30,142,78,.3), transparent 55%); mix-blend-mode:screen; }
.phero__papel{ position:absolute; top:0; left:0; right:0; z-index:2; }
.phero .container{ position:relative; z-index:3; }
.phero h1{ color:var(--masa); max-width:18ch; margin-top:16px; }
.phero .lead{ color:rgba(244,231,207,.82); max-width:58ch; margin-top:16px; }
.crumb{ display:flex; align-items:center; gap:8px; font-family:var(--sans); font-size:.85rem; color:rgba(244,231,207,.6); }
.crumb a:hover{ color:var(--marigold); }
.crumb svg{ width:.9em; height:.9em; }
.phero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

/* ---------- split section ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,70px); align-items:center; }
.split--rev .split-media{ order:-1; }
.split-copy .h-2{ margin:16px 0 18px; }
.media-frame{ position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.media-frame img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.media-frame:hover img{ transform:scale(1.05); }
.media-frame .badge{ position:absolute; bottom:16px; left:16px; background:var(--marigold); color:var(--mole);
  font-family:var(--sans); font-weight:700; font-size:.82rem; padding:.5em 1em; border-radius:999px; box-shadow:var(--shadow); }
.media-stack{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.media-stack .media-frame:first-child{ grid-column:1 / -1; }
.media-stack img{ aspect-ratio:1/1; }

/* ---------- signature dishes ---------- */
.dish-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; }
.dish{ background:#fff; border:1px solid var(--cream-line); border-radius:var(--r-lg); overflow:hidden; position:relative;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.dish::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
  background:linear-gradient(90deg,transparent,var(--marigold),transparent); }
.dish:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); }
.dish__img{ position:relative; overflow:hidden; aspect-ratio:4/3; }
.dish__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.dish:hover .dish__img img{ transform:scale(1.08); }
.dish__tag{ position:absolute; top:12px; left:12px; z-index:2; background:rgba(30,20,16,.78); color:var(--marigold);
  font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:.35em .8em; border-radius:999px; backdrop-filter:blur(4px); }
.dish__body{ padding:20px 22px 24px; }
.dish__body h3{ font-family:var(--display); font-size:1.5rem; margin-bottom:6px; display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.dish__price{ font-family:var(--sans); font-weight:700; font-size:1.05rem; color:var(--achiote); white-space:nowrap; }
.dish__body p{ color:var(--muted); font-size:.93rem; margin:0; }

/* ---------- stat strip ---------- */
.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-radius:var(--r-lg); overflow:hidden;
  background:var(--mole-2); }
.stat{ padding:34px 22px; text-align:center; position:relative; }
.stat + .stat::before{ content:""; position:absolute; left:0; top:22%; height:56%; width:1px;
  background:linear-gradient(180deg,transparent,var(--dark-line),transparent); }
.stat .num{ font-family:var(--display); font-size:clamp(2.4rem,4vw,3.4rem); color:var(--marigold); line-height:1; }
.stat .lbl{ font-family:var(--sans); font-size:.84rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(244,231,207,.72); margin-top:8px; }

/* ---------- events ---------- */
.event-list{ display:grid; gap:18px; }
.event{ display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding:24px 28px;
  background:#fff; border:1px solid var(--cream-line); border-radius:var(--r-lg); transition:transform .3s, box-shadow .3s; }
.event:hover{ transform:translateX(6px); box-shadow:var(--shadow); }
.event__when{ text-align:center; min-width:92px; }
.event__when .d{ font-family:var(--display); font-size:1.5rem; color:var(--achiote); line-height:1; }
.event__when .m{ font-family:var(--sans); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
.event__body h3{ font-family:var(--display); font-size:1.6rem; margin-bottom:5px; }
.event__body p{ color:var(--muted); font-size:.95rem; margin:0; }
.event__cover{ font-family:var(--sans); font-weight:700; font-size:.9rem; color:var(--nopal-deep); white-space:nowrap;
  background:var(--masa-2); padding:.5em 1em; border-radius:999px; }
.event__cover.free{ color:var(--nopal-deep); }
.section--dark .event{ background:var(--mole-2); border-color:var(--dark-line); }
.section--dark .event__body p{ color:rgba(244,231,207,.7); }
.section--dark .event__when .m{ color:rgba(244,231,207,.6); }
.section--dark .event__cover{ background:rgba(244,231,207,.08); color:var(--marigold); }

/* ---------- menu page ---------- */
.menu-nav{ position:sticky; top:78px; z-index:50; background:rgba(251,243,228,.95); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cream-line); padding:12px 0; }
.menu-nav .container{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.menu-nav .container::-webkit-scrollbar{ display:none; }
.menu-nav a{ flex:0 0 auto; font-family:var(--sans); font-weight:600; font-size:.88rem; padding:.5em 1em;
  border-radius:999px; color:var(--ink); border:1px solid var(--cream-line); transition:.2s; white-space:nowrap; }
.menu-nav a:hover{ background:var(--nopal); color:#fff; border-color:var(--nopal); }
.menu-section{ scroll-margin-top:140px; }
.menu-section + .menu-section{ margin-top:clamp(48px,7vw,84px); }
.menu-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:26px;
  border-bottom:2px solid var(--cream-line); padding-bottom:14px; flex-wrap:wrap; }
.menu-head h2{ font-size:clamp(1.9rem,3.5vw,2.8rem); }
.menu-head .note{ font-family:var(--sans); font-size:.9rem; color:var(--muted); }
.menu-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }
.mi{ display:flex; gap:16px; padding:14px; background:#fff; border:1px solid var(--cream-line); border-radius:var(--r); transition:transform .3s, box-shadow .3s; }
.mi:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.mi__img{ flex:0 0 96px; width:96px; height:96px; border-radius:12px; overflow:hidden; background:var(--masa-2); }
.mi__img img{ width:100%; height:100%; object-fit:cover; }
.mi__body{ flex:1; min-width:0; }
.mi__top{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.mi__name{ font-family:var(--sans); font-weight:600; font-size:1.04rem; color:var(--ink); }
.mi__price{ font-family:var(--sans); font-weight:700; color:var(--achiote); white-space:nowrap; }
.mi__desc{ color:var(--muted); font-size:.88rem; margin:5px 0 0; line-height:1.45; }
.mi--text{ } /* item without photo */
.menu-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:8px 30px; }
.ml-row{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px dashed var(--cream-line); }
.ml-row .n{ font-family:var(--sans); font-weight:500; color:var(--ink); }
.ml-row .n small{ display:block; color:var(--muted); font-weight:400; font-size:.83rem; }
.ml-row .p{ font-family:var(--sans); font-weight:700; color:var(--achiote); white-space:nowrap; }

/* ---------- cta band ---------- */
.cta-band{ position:relative; border-radius:var(--r-xl); overflow:hidden; padding:clamp(44px,7vw,84px) clamp(28px,5vw,64px);
  text-align:center; color:var(--masa); isolation:isolate; }
.cta-band__bg{ position:absolute; inset:0; z-index:-2; }
.cta-band__bg img{ width:100%; height:100%; object-fit:cover; }
.cta-band::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(20,12,8,.72),rgba(20,12,8,.84)); }
.cta-band .h-1,.cta-band .h-2{ color:var(--masa); margin:14px auto 16px; max-width:18ch; }
.cta-band .lead{ color:rgba(244,231,207,.85); max-width:52ch; margin:0 auto 30px; }
.cta-band .hero__cta{ justify-content:center; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.contact-info{ display:grid; gap:18px; margin-bottom:24px; }
.ci{ display:flex; gap:14px; align-items:flex-start; }
.ci .ic{ width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border-radius:13px;
  background:var(--masa-2); color:var(--nopal-deep); }
.ci .ic svg{ width:22px; height:22px; }
.ci b{ font-family:var(--sans); display:block; font-size:.95rem; color:var(--ink); margin-bottom:2px; }
.ci p{ margin:0; color:var(--muted); font-size:.96rem; }
.ci a:hover{ color:var(--achiote); }
.map-frame{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--cream-line); box-shadow:var(--shadow-sm); }
.map-frame iframe{ width:100%; height:340px; border:0; display:block; }
.panel{ background:#fff; border:1px solid var(--cream-line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:clamp(26px,4vw,42px); }

/* area chips */
.area-grid{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.area-chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.55em 1.1em; border-radius:999px;
  background:#fff; border:1px solid var(--cream-line); font-family:var(--sans); font-weight:500; font-size:.92rem; color:var(--ink); }
.area-chip svg{ width:1em; height:1em; color:var(--achiote); }

/* marquee */
.marquee{ overflow:hidden; white-space:nowrap; padding:18px 0; border-block:1px solid var(--dark-line); }
.marquee__track{ display:inline-flex; gap:42px; animation:marq 28s linear infinite; }
.marquee span{ font-family:var(--display); font-size:clamp(1.6rem,3vw,2.4rem); color:var(--masa); display:inline-flex; align-items:center; gap:42px; }
.marquee span::after{ content:"✦"; color:var(--achiote); font-size:.7em; }
.marquee .outline{ color:transparent; -webkit-text-stroke:1px var(--marigold); }
@keyframes marq{ to{ transform:translateX(-50%); } }
html.reduce-fx .marquee__track{ animation:none; }

/* responsive */
@media (max-width:880px){
  .split{ grid-template-columns:1fr; }
  .split--rev .split-media{ order:0; }
  .stat-strip{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(3)::before{ display:none; }
  .contact-grid{ grid-template-columns:1fr; }
  .event{ grid-template-columns:auto 1fr; }
  .event__cover{ grid-column:2; justify-self:start; }
  .menu-nav{ top:64px; }
}
@media (max-width:520px){
  .stat-strip{ grid-template-columns:1fr 1fr; }
  .mi__img{ flex-basis:74px; width:74px; height:74px; }
}