/* ░░ Green Is My Thing — concept site (Ancla) ░░ */

:root{
  /* 2026-08-29 — El cliente rebotó el verde: "más vivo, más nuestro green,
     no tan oscuro". El olive medido del empaque (#4E5B22) y el fondo #26330F
     eran fieles al material físico pero leían como oscuros en móvil, donde
     .show__bg no existe y el fondo queda plano. Subidos hacia su verde
     declarado (#7fbc0b) sin llegar a él: el fondo no puede competir con las
     fotos ni el olive pisar a --leaf, que es el acento.
     El scrim rgba(29,40,7) va sobre fotografía y se mantiene proporcional
     al fondo (~0.54 de su luminancia); si el fondo se mueve, se mueve. */
  --olive:#6A8020;
  --moss:#748E23;
  --deep:#364B0D;
  --ink:#1E2B0E;
  --cream:#F8F4EB;
  --paper:#E8EAE5;
  --check:#D6DFC4;
  --leaf:#81BC00;
  --leaf-2:#60BE44;

  --disp:"Fraunces", Georgia, serif;
  --ui:"Nunito Sans", system-ui, sans-serif;
  --wonk:"SOFT" 40, "WONK" 1;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--deep);color:var(--cream);
  font-family:var(--ui);overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-variation-settings:var(--wonk);font-weight:600;line-height:.94;letter-spacing:-.018em}
em{font-style:italic;font-variation-settings:"SOFT" 60,"WONK" 1}

/* grano global — mata el look "plano de CSS" */
.grain{
  position:fixed;inset:-120px;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 700ms steps(2) infinite;mix-blend-mode:overlay;
}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-14px,9px)}100%{transform:translate(8px,-11px)}}

/* ── LOADER ───────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:100;background:var(--deep);
  display:grid;place-content:center;justify-items:center;gap:38px;
}
.loader__logo{width:min(38vw,300px);opacity:0;transform:scale(.92)}
.loader__track{width:min(46vw,320px);height:2px;background:rgba(248,244,235,.2);overflow:hidden}
.loader__track span{display:block;height:100%;width:0%;background:var(--leaf)}

/* ── NAV ──────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px clamp(18px,3.4vw,46px);
  transform:translateY(-110%);
  background:linear-gradient(180deg,rgba(29,40,7,.7),rgba(29,40,7,0));
  transition:background .45s ease;
}
.nav--solid{background:var(--olive)}
/* La barra medía 140px: al saltar a una sección desde el menú tapaba el titular.
   Lo alto lo ponía el logo (SVG cuadrado). 68px + 10px de padding = 88px.
   El salto además lleva su propio offset en main.js — no depende de este número. */
.nav__brand img{width:clamp(56px,5vw,68px)}
.nav__links{display:flex;gap:clamp(16px,2.2vw,34px);font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.nav__links a{opacity:.8;transition:opacity .3s}
.nav__links a:hover{opacity:1}
.nav__cta{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(248,244,235,.5);border-radius:999px;padding:9px 18px;
  transition:background .35s,color .35s,border-color .35s;
}
.nav__cta:hover{background:var(--cream);color:var(--deep);border-color:var(--cream)}
@media(max-width:860px){.nav__links{display:none}}

/* ── 1 · EL FILM ──────────────────────────── */
.film{height:290vh;position:relative;background:var(--deep)}
.film__stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--deep)}

/* fondo ambiental: el MISMO frame, borroso y oscuro. El color siempre pega. */
.film__amb{
  position:absolute;inset:-8%;width:116%;height:116%;
  filter:blur(64px) saturate(1.35) brightness(.42);
  transform:scale(1.06);
}
.film__wash{
  position:absolute;inset:0;
  background:
    radial-gradient(78% 70% at 50% 46%,rgba(29,40,7,0) 0%,rgba(29,40,7,.72) 100%),
    linear-gradient(180deg,rgba(29,40,7,.5) 0%,rgba(29,40,7,0) 30%);
}

/* la lámina: arranca contenida y se abre a sangre con el scroll */
.film__shell{
  position:absolute;inset:0;
  transform:scale(var(--s,.56)) translateY(var(--ty,-7vh));
  transform-origin:center center;
  box-shadow:0 60px 140px rgba(8,12,3,.6);
  will-change:transform;
}
.film__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.film__veil{
  position:absolute;inset:0;pointer-events:none;opacity:var(--veil,0);
  background:
    linear-gradient(180deg,rgba(29,40,7,.5) 0%,rgba(29,40,7,0) 26%),
    linear-gradient(0deg,rgba(29,40,7,.62) 0%,rgba(29,40,7,0) 38%);
}

/* el bloque de marca que acompaña a la lámina mientras está contenida */
.film__intro{
  position:absolute;left:50%;bottom:clamp(18px,4.5vh,52px);z-index:4;
  width:max-content;max-width:90vw;transform:translateX(-50%);
  text-align:center;will-change:opacity,transform;
}
.film__intro h1{
  font-size:clamp(26px,3.4vw,56px);line-height:1.02;color:var(--cream);
  letter-spacing:-.02em;text-shadow:0 10px 44px rgba(15,22,6,.6);
}
.film__intro h1 span{display:block}
.film__intro h1 em{color:var(--leaf)}
@media(max-width:860px){
  .film__intro{max-width:90vw}
  .film__intro h1{font-size:clamp(21px,5.6vw,34px)}
}

.cap{
  position:absolute;left:clamp(20px,5.4vw,92px);bottom:clamp(64px,12vh,132px);
  max-width:min(46ch,52vw);opacity:0;z-index:4;
  font-family:var(--disp);font-variation-settings:var(--wonk);
  font-size:clamp(26px,3.5vw,58px);line-height:1.02;letter-spacing:-.02em;
  text-shadow:0 10px 46px rgba(15,22,6,.7);
}
.cap span{display:block;overflow:hidden}
.cap span > *,.cap span{will-change:transform}
.cap em{color:var(--leaf)}

.film__end{
  position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:26px;
  opacity:0;text-align:center;padding:0 6vw;z-index:5;
}
.film__end img{width:min(40vw,380px);filter:drop-shadow(0 18px 60px rgba(15,22,6,.6))}
.film__end p{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(248,244,235,.8)}

/* ── 2 · EL SPLIT ────────────────────────── */
.split{height:122vh;position:relative;background:var(--deep)}
.split__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.split__hero{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;
  transform:scale(var(--hs,1.16));will-change:transform;
}
.split__scrim{
  position:absolute;inset:0;
  background:radial-gradient(70% 65% at 50% 52%,rgba(29,40,7,.15) 0%,rgba(29,40,7,.72) 100%);
}
.split__tiles{position:absolute;inset:0;z-index:2}
.split__tiles i{
  position:absolute;width:50.4%;height:50.4%;overflow:hidden;display:block;
  will-change:transform;
}
.split__tiles i:nth-child(1){left:0;top:0}
.split__tiles i:nth-child(2){right:0;top:0}
.split__tiles i:nth-child(3){left:0;bottom:0}
.split__tiles i:nth-child(4){right:0;bottom:0}
.split__tiles img{width:100%;height:100%;object-fit:cover}
.split__tiles b{
  position:absolute;left:clamp(18px,2.4vw,34px);bottom:clamp(16px,2.6vh,32px);
  font-family:var(--ui);font-weight:600;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-shadow:0 2px 14px rgba(0,0,0,.7);
  opacity:var(--lb,0);
}
.split__tiles i:nth-child(2) b,.split__tiles i:nth-child(4) b{left:auto;right:clamp(18px,2.4vw,34px)}
.split__type{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:0 7vw;
  pointer-events:none;
}
.split__type h2{
  font-size:clamp(34px,5.4vw,92px);text-align:center;color:var(--cream);
  text-shadow:0 14px 60px rgba(15,22,6,.7);opacity:var(--te,0);
  transform:scale(var(--ts,.94));will-change:opacity,transform;
}
.split__type h2 em{color:var(--leaf)}

/* ── 3 · SHOWCASE ─────────────────────────── */
.show{height:280vh;position:relative;background:var(--deep)}
.show__stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(20px,4vh,52px);padding-top:clamp(70px,10vh,110px);
}
.show__bg{
  position:absolute;inset:-10%;
  background:radial-gradient(70% 70% at 30% 40%,rgba(94,134,55,.5) 0%,rgba(38,51,15,0) 70%);
  will-change:transform;
}
.show__label{
  position:relative;z-index:3;flex:0 0 auto;
  padding-left:clamp(20px,5vw,80px);max-width:min(720px,62vw);
}
.show__label h2{font-size:clamp(22px,2.5vw,40px);line-height:1.04;color:var(--cream)}
.show__label h2 em{color:var(--leaf)}
.show__label p{
  margin-top:14px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(248,244,235,.5);white-space:nowrap;
}
@media(max-width:860px){.show__label{max-width:86vw}.show__label p{white-space:normal}}
.show__rail{
  display:flex;align-items:center;gap:clamp(20px,3vw,54px);
  padding-left:clamp(20px,5vw,80px);will-change:transform;position:relative;z-index:2;
}
.pc{flex:0 0 auto;width:clamp(260px,26vw,400px);will-change:transform}
.pc__img{overflow:hidden;aspect-ratio:4/5;background:#263509;margin-bottom:18px}
.pc__img img{width:100%;height:100%;object-fit:cover;will-change:transform}
.pc h3{
  font-size:clamp(19px,1.7vw,27px);line-height:1.1;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.pc h3 b{font-weight:600;color:var(--leaf);white-space:nowrap}
.pc p{margin-top:9px;font-size:12.5px;line-height:1.55;color:rgba(248,244,235,.6);max-width:34ch}

/* ── 4 · MOOD — la pared ──────────────────── */
/* 195vh = 100vh de stage pineado + 95vh de scroll para la secuencia.
   Son 8 preguntas que entran y 8 fotos que las tapan una por una: a 125vh
   quedaban 238px para todo (18px por foto) y pasaba disparado.
   Regla: esta sección no se acorta mirando su altura, sino dividiendo el
   scroll disponible entre la cantidad de eventos. */
.mood{height:195vh;position:relative}
.mood__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.mood__base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.34) saturate(.8)}
.mood__tint{position:absolute;inset:0;background:rgba(38,51,15,.72)}

.mood__wall{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:17vh clamp(24px,8vw,150px) 11vh;
}
.mw{
  align-self:var(--al,center);
  font-family:var(--disp);font-variation-settings:var(--wonk);font-weight:600;
  font-size:calc(clamp(26px,4.4vw,74px) * var(--fs));
  line-height:1;letter-spacing:-.02em;color:var(--cream);max-width:16ch;
  text-shadow:0 10px 40px rgba(15,22,6,.55);
  will-change:opacity,transform;
}
.mood__pics{position:absolute;inset:0;z-index:3;pointer-events:none}
.mp{
  position:absolute;left:0;top:0;display:block;
  width:clamp(120px,13vw,210px);aspect-ratio:4/5;overflow:hidden;opacity:0;
  box-shadow:0 30px 70px rgba(12,18,5,.55);will-change:opacity,transform;
}
.mp img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){
  .mood__wall{padding:15vh 6vw 8vh}
  .mw{font-size:calc(clamp(20px,6.4vw,40px) * var(--fs));max-width:13ch}
  .mp{width:clamp(96px,26vw,150px)}
}

.mood__end{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:0 7vw;
  opacity:0;background:rgba(29,40,7,.55);backdrop-filter:none;
}
.mood__end h2{
  font-size:clamp(38px,6.2vw,102px);text-align:center;
  text-shadow:0 14px 60px rgba(0,0,0,.6);will-change:transform;
}
.mood__end h2 em{color:var(--leaf)}

@media(max-width:860px){
  .mw{max-width:80vw}
  .mw b{font-size:calc(clamp(24px,7.4vw,52px) * var(--fs))}
  .mw i{width:clamp(110px,30vw,170px)}
}

/* ── 4 · MENÚ ─────────────────────────────── */
.menu{
  position:relative;color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(45deg,var(--check) 25%,transparent 25%,transparent 75%,var(--check) 75%),
    linear-gradient(45deg,var(--check) 25%,transparent 25%,transparent 75%,var(--check) 75%);
  background-size:56px 56px;
  background-position:0 0,28px 28px;
}
.menu__inner{
  background:var(--cream);
  margin:clamp(16px,2.4vw,40px);
  padding:clamp(46px,7vh,96px) clamp(18px,3.4vw,58px) clamp(60px,8vh,110px);
}
.menu__title{font-size:clamp(44px,7vw,120px);color:var(--olive);margin-bottom:clamp(24px,3.4vh,48px)}
.menu__title em{color:var(--moss)}

/* marquee */
.marquee{overflow:hidden;background:var(--olive);color:var(--cream);padding:16px 0;position:relative;z-index:2}
.marquee__row{display:flex;align-items:center;gap:34px;width:max-content;will-change:transform;
  transform:translate3d(0,0,0)}
.marquee__row span{
  font-family:var(--disp);font-variation-settings:var(--wonk);
  font-size:clamp(22px,2.6vw,42px);white-space:nowrap;
}
.marquee__row i{width:10px;height:10px;border-radius:50%;background:var(--leaf);flex:0 0 auto}

.menu__mural{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,1vw,16px);margin-bottom:clamp(50px,7vh,96px)}
.mc{position:relative;overflow:hidden;background:var(--paper)}
.mc img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.mc:hover img{transform:scale(1.06)}
.mc--a{grid-column:span 4;aspect-ratio:4/5}
.mc--b{grid-column:span 4;aspect-ratio:4/5}
.mc--c{grid-column:span 4;aspect-ratio:4/5}
.mc--d{grid-column:span 3;aspect-ratio:1/1}
.mc--e{grid-column:span 3;aspect-ratio:1/1}
.mc--f{grid-column:span 3;aspect-ratio:1/1}
.mc--g{grid-column:span 3;aspect-ratio:1/1}
.mc--h{grid-column:span 6;aspect-ratio:16/10}
.mc--i{grid-column:span 3;aspect-ratio:8/10}
.mc--j{grid-column:span 3;aspect-ratio:8/10}
@media(max-width:820px){
  .menu__mural{grid-template-columns:repeat(4,1fr)}
  .mc--a,.mc--b,.mc--c,.mc--h{grid-column:span 4}
  .mc--d,.mc--e,.mc--f,.mc--g,.mc--i,.mc--j{grid-column:span 2;aspect-ratio:1/1}
}

.menu__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,66px);
  border-top:1px solid rgba(51,66,26,.2);padding-top:clamp(28px,4vh,52px)}
@media(max-width:900px){.menu__list{grid-template-columns:1fr}}
.ml h3{font-size:clamp(22px,2.1vw,32px);color:var(--olive);margin:0 0 14px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ml h3 i{font-family:var(--ui);font-style:normal;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(51,66,26,.55)}
.ml h3:not(:first-child){margin-top:34px}
.ml ul{list-style:none}
.ml li{display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-bottom:1px dotted rgba(51,66,26,.22);font-size:clamp(13px,1.02vw,15px)}
.ml li span{flex:1}
.ml li b{font-family:var(--disp);font-weight:600;color:var(--olive)}
.ml__note{margin-top:22px;font-size:12px;line-height:1.6;color:rgba(51,66,26,.6);max-width:36ch}


/* ── 6 · EL LOCAL ─────────────────────────── */
.local{position:relative;background:var(--olive)}
.local__hero{position:relative;height:min(100vh,900px);overflow:hidden}
/* max-width:none — si no, el img{max-width:100%} global capa el 120% del parallax */
.local__hero img{position:absolute;inset:-10%;width:120%;max-width:none;height:120%;object-fit:cover}
.local__hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(29,40,7,.78) 0%,rgba(29,40,7,.25) 55%,rgba(29,40,7,.1) 100%)}
.local__copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(20px,6vw,110px)}
.local__copy h2{font-size:clamp(36px,5.4vw,92px)}
.local__copy h2 em{color:var(--leaf)}
.hours{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:clamp(24px,4vh,48px)}
.hours span{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(248,244,235,.66)}
.hours b{font-family:var(--disp);font-size:20px;letter-spacing:0;text-transform:none;color:var(--cream)}

.local__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,16px);
  padding:clamp(8px,1vw,16px)}
.lg{overflow:hidden;aspect-ratio:4/5;background:var(--deep)}
.lg img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.local__grid{grid-template-columns:repeat(2,1fr)}}

/* ── 7 · FOOTER ───────────────────────────── */

/* ── 7 · PUNTOS DE VENTA ───────────────────
   Fondo crema a propósito: viene después del local, que es verde y con foto.
   Es la única sección puramente informativa del sitio y se lee mejor en claro. */
.pdv{background:var(--cream);color:var(--deep);padding:clamp(70px,11vh,150px) clamp(20px,5vw,80px)}
.pdv__head{max-width:min(780px,92vw);margin-bottom:clamp(38px,6vh,64px)}
.pdv__head h2{font-size:clamp(30px,5vw,62px)}
.pdv__head h2 em{color:var(--moss)}
.pdv__head p{margin-top:16px;font-size:clamp(14px,1.5vw,17px);line-height:1.6;
  color:rgba(38,51,15,.72);max-width:56ch}
.pdv__grid{display:grid;gap:clamp(28px,3.4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pdvg h3{font-family:var(--ui);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--olive);padding-bottom:12px;margin-bottom:16px;
  border-bottom:1px solid rgba(38,51,15,.16)}
.pdvg ul{list-style:none}
.pdvg li{font-size:clamp(14px,1.5vw,16.5px);line-height:1.35;padding:9px 0;
  border-bottom:1px solid rgba(38,51,15,.07)}
.pdvg li:last-child{border-bottom:0}
/* el detalle de sucursales va debajo del nombre, no entre paréntesis: son
   listas largas y el paréntesis las parte visualmente */
.pdvg li i{display:block;font-style:normal;margin-top:3px;font-size:11.5px;
  letter-spacing:.05em;color:rgba(38,51,15,.5)}

/* ── 8 · LAS FUNDADORAS ────────────────────
   El copy es de ellas y va en PRIMERA PERSONA ("mi mamá"), así que la sección
   no habla de la marca en tercera: es una carta firmada. */
.fund{background:var(--deep);color:var(--cream);padding:clamp(70px,11vh,150px) clamp(20px,5vw,80px)}
.fund__inner{display:grid;gap:clamp(34px,4.5vw,72px);align-items:center;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);max-width:1240px;margin:0 auto}
.fund__foto{overflow:hidden;aspect-ratio:4/5;background:#263509}
.fund__foto img{width:100%;height:100%;object-fit:cover}
.fund__copy h2{font-size:clamp(32px,5.2vw,68px);margin-bottom:clamp(20px,3vh,34px)}
.fund__copy p{font-size:clamp(14.5px,1.55vw,17px);line-height:1.68;
  color:rgba(248,244,235,.76);max-width:58ch}
.fund__copy p + p{margin-top:15px}
@media(max-width:860px){
  .fund__inner{grid-template-columns:1fr}
  .fund__foto{aspect-ratio:1/1}
}

.foot{position:relative;overflow:hidden;padding:clamp(80px,13vh,170px) clamp(18px,4vw,64px) clamp(34px,5vh,56px)}
/* La fachada del footer trae a las fundadoras (s14). En desktop el footer es
   panorámico y de una foto 2:3 solo se ve una franja del ~26%: a 29% caen las
   dos caras completas y el logo entra en el hueco entre ellas. Más abajo se
   les corta la cabeza; más arriba el letrero pintado de la fachada compite
   con el logo blanco y la marca se lee dos veces. */
.foot__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 29%;filter:brightness(.42) saturate(.85)}
.foot__inner{position:relative;display:grid;justify-items:center;gap:clamp(28px,4vh,48px);text-align:center}
.foot__logo{width:min(46vw,340px)}
.foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase}
.foot__links a{opacity:.78;transition:opacity .3s,color .3s}
.foot__links a:hover{opacity:1;color:var(--leaf)}
.foot__ancla{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:26px;
  border-top:1px solid rgba(248,244,235,.18);width:min(420px,84vw);justify-content:center;
  opacity:.7;transition:opacity .35s}
.foot__ancla:hover{opacity:1}
.foot__ancla span{font-size:10px;letter-spacing:.26em;text-transform:uppercase}
.foot__ancla img{width:88px}

@media(prefers-reduced-motion:reduce){
  .grain{display:none}
  .cap,.frase__line i,.frase__line b,.mood__q span{opacity:1}
}

/* remates */
.mood__end h2 em{color:var(--leaf)}
.nav__links a[href="#showcase"]{}

/* ══════════════════════════════════════════════════════
   2026-07-23 — el cliente compró el sitio.
   Menú completo por categorías + bebidas + salty + celebraciones.
   ══════════════════════════════════════════════════════ */

/* ── MENÚ: tabs y grupos ──────────────────── */
.menu__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,3vh,34px)}
.mt{
  font-family:var(--ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 20px;border:1px solid rgba(51,66,26,.28);background:transparent;
  color:rgba(51,66,26,.7);cursor:pointer;transition:background .3s,color .3s,border-color .3s;
}
.mt:hover{border-color:rgba(51,66,26,.5);color:var(--deep)}
.mt.is-on{background:var(--olive);border-color:var(--olive);color:var(--cream)}

.menu__list{display:block}
/* multi-columna, no grid: con grid la columna de Cakes (19 ítems) deja
   media pantalla vacía debajo de Cheesecakes y Cupcakes */
.ml__group{display:none}
.ml__group.is-on{display:block;column-count:3;column-gap:clamp(24px,4vw,66px)}
.ml{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:inline-block;width:100%;margin-bottom:clamp(26px,3.4vh,48px)}
.ml h3:not(:first-child){margin-top:34px}
/* completos: los ítems son de dos líneas, a 3 columnas quedan apretados
   y el balanceo deja la tercera vacía */
.ml__group[data-cat="completos"].is-on,
.ml__group[data-cat="bebidas"].is-on{column-count:2}
@media(max-width:1100px){.ml__group.is-on{column-count:2}}
@media(max-width:760px){.ml__group.is-on{column-count:1}}

/* subtítulo dentro del ítem (ingredientes, add-ons, free-from) */
.ml li span u{
  display:block;text-decoration:none;margin-top:3px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(51,66,26,.5);line-height:1.5;
}
/* cakes completos: nombre + tamaños */
.li--t{flex-direction:column;align-items:stretch;gap:4px}
.li--t .nm{font-weight:600}
.szs{display:flex;flex-wrap:wrap;gap:4px 22px}
/* nowrap: si no, "12 PERSONAS" parte en dos líneas y descuadra la fila */
.sz{display:flex;gap:8px;align-items:baseline;white-space:nowrap;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:rgba(51,66,26,.55)}
.sz b{font-family:var(--disp);font-size:15px;letter-spacing:0;text-transform:none;color:var(--olive)}
.ml__note--pie{margin-top:34px;max-width:none;border-top:1px solid rgba(51,66,26,.18);padding-top:18px}

/* ── 3b · BEBIDAS ─────────────────────────── */
.beb{background:var(--cream);color:var(--deep);padding:clamp(70px,11vh,150px) clamp(20px,5vw,80px)}
.beb__head{max-width:52ch;margin-bottom:clamp(34px,5vh,64px)}
.beb__head h2{font-size:clamp(34px,5vw,84px);color:var(--olive)}
.beb__head h2 em{color:var(--moss)}
.beb__head p{margin-top:18px;font-size:clamp(14px,1.15vw,17px);line-height:1.65;color:rgba(51,66,26,.72);max-width:44ch}

.beb__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1vw,16px)}
.bg{position:relative;overflow:hidden;background:var(--paper);aspect-ratio:3/4}
/* la tall queda muy alta en desktop: encuadrar abajo o se ve puro cielo */
.bg--tall img{object-position:center 78%}

/* El placement de 12 columnas vive SOLO en desktop. Si se declara suelto,
   `.beb__grid .bg:nth-child(3)` (0,3,0) le gana a cualquier reset móvil que
   apunte a `.beb__grid .bg` (0,2,0) y dos fotos colapsan a 20px. */
@media(min-width:901px){
  .beb__grid{grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(0,auto)}
  .bg--tall{grid-column:1/6;grid-row:1/3;aspect-ratio:auto}
  .beb__grid .bg:nth-child(2){grid-column:6/13;grid-row:1/2;aspect-ratio:16/9}
  .beb__grid .bg:nth-child(3){grid-column:6/10;grid-row:2/3;aspect-ratio:3/4}
  .bg--wide{grid-column:10/13;grid-row:2/3;aspect-ratio:3/4}
}
.bg img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.bg:hover img{transform:scale(1.04)}
.bg figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,1.6vw,24px);
  background:linear-gradient(180deg,rgba(29,40,7,0),rgba(29,40,7,.82));
  color:var(--cream);font-family:var(--disp);font-size:clamp(15px,1.3vw,21px);line-height:1.15;
}
.bg figcaption i{
  display:block;margin-top:6px;font-family:var(--ui);font-style:normal;
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:rgba(248,244,235,.72);line-height:1.6;
}
@media(max-width:900px){
  /* la del cielo arriba y los protein shakes abajo, ambas a lo ancho;
     las dos del medio en dos columnas. Si la última no se estira, deja hueco. */
  .beb__grid .bg--tall{grid-column:1/3;aspect-ratio:16/11}
  .beb__grid .bg--tall img{object-position:center 62%}
  .beb__grid .bg--wide{grid-column:1/3;aspect-ratio:16/11}
  /* en 171px de ancho el caption se come la foto */
  .bg figcaption{padding:11px 12px;font-size:14px}
  .bg figcaption i{font-size:9px;letter-spacing:.08em;margin-top:4px}
}

/* ── 3c · SALTY ───────────────────────────── */
.salty{position:relative;background:var(--deep);min-height:100vh;overflow:hidden;
  display:grid;align-items:center;padding:clamp(70px,10vh,130px) clamp(20px,5vw,80px)}
.salty__stage{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,90px);align-items:center;width:100%}
.salty__bg{position:absolute;inset:-8%;width:116%;max-width:none;height:116%;object-fit:cover;z-index:0}
/* el scrim va a sangre de la sección, NO del stage: el stage está inset por el padding
   y dejaba los bordes sin cubrir */
.salty__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(29,40,7,.94) 0%,rgba(29,40,7,.86) 42%,rgba(29,40,7,.6) 100%)}
.salty__copy{position:relative;z-index:2}
.salty__copy h2{font-size:clamp(34px,5vw,84px)}
.salty__copy h2 em{color:var(--leaf)}
.salty__copy ul{list-style:none;margin-top:clamp(22px,3.4vh,40px)}
.salty__copy li{padding:11px 0;border-bottom:1px dotted rgba(248,244,235,.22);
  font-size:clamp(14px,1.2vw,18px);color:rgba(248,244,235,.92)}
.salty__copy li i{font-style:normal;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(248,244,235,.5);margin-left:10px}
.salty__soon{margin-top:24px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--leaf)}
.salty__pair{position:relative;z-index:2;display:grid;gap:clamp(8px,1vw,16px)}
.salty__pair figure{overflow:hidden;aspect-ratio:16/10}
.salty__pair img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .salty__stage{grid-template-columns:1fr}
  .salty__scrim{background:linear-gradient(180deg,rgba(29,40,7,.86),rgba(29,40,7,.72))}
}

/* ── 6b · CELEBRACIONES ───────────────────── */
.cel{background:var(--cream);color:var(--deep);padding:clamp(70px,11vh,150px) 0}
.cel__head{padding:0 clamp(20px,5vw,80px);max-width:60ch;margin-bottom:clamp(34px,5vh,60px)}
.cel__head h2{font-size:clamp(34px,5vw,84px);color:var(--olive)}
.cel__head h2 em{color:var(--moss)}
.cel__head p{margin-top:18px;font-size:clamp(14px,1.15vw,17px);line-height:1.65;color:rgba(51,66,26,.72)}
.cel__cta{
  display:inline-block;margin-top:26px;padding:14px 30px;background:var(--olive);color:var(--cream);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;transition:background .3s;
}
.cel__cta:hover{background:var(--deep)}
.cel__rail{display:flex;gap:clamp(8px,1vw,16px);padding:0 clamp(20px,5vw,80px);
  overflow-x:auto;scrollbar-width:none}
.cel__rail::-webkit-scrollbar{display:none}
.cel__rail figure{flex:0 0 auto;width:clamp(220px,26vw,380px);aspect-ratio:4/5;overflow:hidden}
.cel__rail img{width:100%;height:100%;object-fit:cover}

/* ── MENÚ MÓVIL ────────────────────────────
   Debajo de 860px los .nav__links se ocultan y no quedaba forma de navegar. */
/* posicionamiento absoluto, no grid: dejando que el grid dimensione las filas
   las barras quedaban a 15.5px y al rotarlas formaban un ">" en vez de una X */
.nav__burger{display:none;position:relative;width:40px;height:40px;border:0;
  background:none;cursor:pointer;padding:0}
.nav__burger i{position:absolute;left:9px;width:22px;height:1.5px;background:var(--cream);
  transition:transform .34s cubic-bezier(.2,.7,.2,1)}
.nav__burger i:first-child{top:16px}
.nav__burger i:last-child{top:23px}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.sheet{position:fixed;inset:0;z-index:59;background:var(--olive);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:96px clamp(24px,7vw,48px) 40px;
  opacity:0;transition:opacity .32s ease}
.sheet[hidden]{display:none}
.sheet.is-on{opacity:1}
.sheet nav{display:flex;flex-direction:column}
.sheet nav a{font-family:var(--disp);font-variation-settings:var(--wonk);
  font-size:clamp(30px,9vw,42px);line-height:1.18;color:var(--cream);
  padding:5px 0;border-bottom:1px solid rgba(248,244,235,.14)}
.sheet nav a:last-child{border-bottom:0}
.sheet__cta{margin-top:28px;align-self:flex-start;padding:14px 26px;
  border:1px solid rgba(248,244,235,.5);color:var(--cream);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase}

@media(max-width:860px){
  .nav__burger{display:grid}
  .nav__cta{display:none}          /* el WhatsApp vive dentro del sheet */
  body.sheet-open{overflow:hidden}
}
@media(min-width:861px){.sheet{display:none!important}}

/* El footer móvil: la fachada trae a las fundadoras y el logo va centrado.
   Con el padding de desktop el logo les cae justo en la cara (el object-position
   no salva: a esos anchos el contenedor casi calza con la foto y solo se recorta
   un 6%). Se baja el bloque para que las caras queden arriba y el logo caiga
   sobre los torsos. Cuesta ~150px de scroll, 1.4% del total. */
@media(max-width:860px){
  .foot{padding-top:250px}
  .foot__bg{object-position:center 22%}
}

/* EL LOCAL en móvil: el degradado horizontal deja el titular sobre la parte
   clara de la foto y no se lee. Vertical y más cerrado. */
@media(max-width:860px){
  .local__hero::after{background:linear-gradient(180deg,rgba(29,40,7,.55) 0%,rgba(29,40,7,.35) 35%,rgba(29,40,7,.92) 100%)}
  .local__copy{justify-content:flex-end;padding-bottom:clamp(30px,6vh,56px)}
}

/* ── EL LOCAL · dónde estamos ─────────────── */
.local__where{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(8px,1vw,16px);padding:clamp(8px,1vw,16px);background:var(--olive)}
.lw__map{position:relative;min-height:clamp(280px,42vh,440px);overflow:hidden;background:var(--paper)}
/* sin filtros: desaturar el mapa apagaba el pin, que es justo lo que hay que ver */
.lw__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lw__info{background:var(--deep);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4vw,52px);gap:16px}
.lw__info h3{font-family:var(--disp);font-variation-settings:var(--wonk);
  font-size:clamp(26px,2.6vw,42px);line-height:1;color:var(--leaf)}
.lw__info address{font-style:normal;font-size:clamp(14px,1.15vw,17px);
  line-height:1.7;color:rgba(248,244,235,.86)}
.lw__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.lw__cta{padding:13px 24px;border:1px solid rgba(248,244,235,.45);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  transition:background .3s,color .3s,border-color .3s}
.lw__cta:hover{background:var(--cream);color:var(--deep);border-color:var(--cream)}
.lw__cta--solid{background:var(--leaf);border-color:var(--leaf);color:var(--deep)}
.lw__cta--solid:hover{background:var(--cream);border-color:var(--cream)}
@media(max-width:860px){
  .local__where{grid-template-columns:1fr}
  .lw__map{min-height:300px;order:2}
  .lw__info{order:1}
}

/* ── FILM en móvil ─────────────────────────
   640vh son 6.4 pantallas de scroll solo para el hero: en un celular es una
   eternidad. Con la mitad de altura y 100 frames en vez de 150 la densidad
   queda parecida a la de desktop y el pulgar sufre menos. */
@media(max-width:860px){
  .film{height:340vh}
}

/* ══════════════════════════════════════════════════════
   MÓVIL: menos scroll.
   Eran 30 pantallas. Los rieles pineados gastaban scroll VERTICAL para mover
   cosas de lado — en un teléfono eso se siente como pedalear sin avanzar.
   Con swipe nativo ocupan una pantalla y se manejan con el dedo.
   ══════════════════════════════════════════════════════ */
@media(max-width:860px){
  .film{height:300vh}
  .split{height:170vh}
  .mood{height:230vh}

  /* showcase y texturas: de sección pineada a riel que se desliza con el dedo */
  .show{height:auto}
  .show__stage{position:static;height:auto;overflow:visible}
  .show__rail{
    transform:none!important;                 /* el scrub de GSAP queda apagado */
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 clamp(20px,5vw,80px) 4px;
  }
  .show__rail::-webkit-scrollbar{display:none}
  .pc{scroll-snap-align:center}
  .pc{opacity:1!important;transform:none!important;width:74vw}
  .pc__img img{transform:none!important}

  .show{padding:clamp(50px,8vh,90px) 0}
  .show__bg{display:none}
  .show__label{position:static;padding:0 clamp(20px,5vw,80px);margin-bottom:26px}

  /* el menú: 118 ítems de corrido abruman. Acordeón por categoría. */
  .ml{margin-bottom:0;border-bottom:1px solid rgba(51,66,26,.18)}
  .ml summary{cursor:pointer;list-style:none;padding:16px 0;
    display:flex;align-items:center;justify-content:space-between;gap:12px}
  .ml summary::-webkit-details-marker{display:none}
  .ml summary::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-right:4px;
    border-right:1.5px solid var(--olive);border-bottom:1.5px solid var(--olive);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .28s ease}
  .ml[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
  .ml summary h3{margin:0}
  .ml[open] ul{padding-bottom:14px}
  .ml h3:not(:first-child){margin-top:0}
}

/* en desktop el <summary> no debe verse ni comportarse como control */
@media(min-width:861px){
  .ml summary{list-style:none;display:block}
  .ml summary::-webkit-details-marker{display:none}
}