/* La receta de Prego — a scroll story on white paper.
   Layout: full-height chapters that pin while their objects move; Bodoni (Italian, Parma) for the voice, Jost for the system. */
:root{
  --paper:#FFFFFF;
  --paper-2:#F8F4EF;      /* warm napkin, for the few panels that need a ground */
  --ink:#1D1615;
  --ink-2:#5D5350;
  --line:#ECE4DD;
  --prego:#C8102E;        /* Prego red */
  --prego-hi:#EC3348;     /* red on night */
  --basil:#2E6B3C;        /* Maia */
  --night:#070505;
  --cream:#FBF4EC;
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Jost","Futura","Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(20px,6vw,120px);
  --nav-h:56px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--prego);outline-offset:4px;border-radius:4px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}

/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;gap:16px;font:600 clamp(11px,.85vw,15px)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--prego)}
.eyebrow::before{content:"";width:40px;height:1.5px;background:currentColor;flex:none}
.eyebrow.mx{color:var(--basil)}
.eyebrow.light{color:var(--cream)}
.h2{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5vw,96px);line-height:1.02;letter-spacing:-.018em;text-wrap:balance;max-width:17ch}
.h2 em,.display em{font-style:italic;color:var(--prego)}
.h2 em.mx{color:var(--basil)}
.h2.light,.display{color:var(--cream)}
.h2.light em{color:#FFD9CF}
.display{font-family:var(--serif);font-weight:500;font-size:clamp(56px,8.4vw,170px);line-height:.92;letter-spacing:-.025em}
.cierre .display{font-size:clamp(46px,6.2vw,128px)}
.cierre .display em{color:var(--prego-hi);display:block}
.body{font-size:clamp(17px,1.45vw,26px);line-height:1.5;color:var(--ink-2);max-width:34ch}
.body.light{color:rgba(251,244,236,.86)}
.src{position:absolute;left:var(--gutter);right:var(--gutter);bottom:22px;font-size:clamp(11px,.75vw,13px);line-height:1.5;color:var(--ink-2);opacity:.85;z-index:2}
.src.light{color:rgba(251,244,236,.7)}
.sec-head{display:flex;flex-direction:column;gap:22px}
.sec-head.center{align-items:center;text-align:center}
.sec-head.center .h2{max-width:20ch}
[data-split] [class*="mask"]{padding-bottom:.12em;margin-bottom:-.12em}
.u{font-family:var(--sans);font-weight:300;font-size:.38em;letter-spacing:0;margin-left:.08em;vertical-align:1.05em;font-style:normal}

/* ---------- local nav (frosted, Apple-style) ---------- */
.localnav{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--nav-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(29,22,21,.07);color:var(--ink);transition:background .45s,color .45s,border-color .45s}
.ln-title{font:500 20px/1 var(--serif);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.ln-title em{color:var(--prego)}
.localnav ul{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);font:500 13px/1 var(--sans);letter-spacing:.03em}
.localnav ul a{text-decoration:none;opacity:.62;transition:opacity .25s}
.localnav ul a:hover,.localnav ul a.on{opacity:1}
.localnav .cta{opacity:1!important;background:var(--prego);color:#fff;padding:8px 14px;border-radius:999px}
.ln-bar{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--prego);transform-origin:left;transform:scaleX(var(--p,0))}
body.nav-dark .localnav{background:rgba(18,8,7,.5);color:var(--cream);border-color:rgba(255,255,255,.08)}
body.nav-dark .ln-title em{color:#FF8F8F}


/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:radial-gradient(120% 70% at 50% 115%,#FCEDE7 0%,var(--paper) 58%)}
.hero-inner{position:absolute;inset:0}
.kicker{position:absolute;left:0;right:0;top:calc(var(--nav-h) + 4.5vh);text-align:center;font:600 clamp(11px,.85vw,14px)/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.hero-title{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(var(--nav-h) + 9vh);text-align:center;font:500 clamp(54px,8.6vw,176px)/.95 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.hero-title em{font-style:italic;color:var(--prego)}
/* the product moment: real tomatoes spinning, the jar, then the sauce landing on pasta */
.vine{position:absolute;mix-blend-mode:multiply;pointer-events:none;height:auto}
.vine-a{left:-3vw;top:30vh;width:36vw}
.vine-b{right:-4vw;top:44vh;width:32vw;scale:-1 1}
.jar-wrap{--jar:min(64vh,90vw);position:absolute;left:50%;bottom:2vh;width:var(--jar);height:var(--jar);margin-left:calc(var(--jar) / -2);mix-blend-mode:multiply;z-index:2}
.jar{position:relative;width:100%;height:100%;object-fit:contain}
.jar-shadow{position:absolute;left:30%;right:30%;bottom:1.5%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(110,28,16,.38),rgba(110,28,16,0));filter:blur(6px)}
.dish{--d:min(64vh,36vw);position:absolute;left:66%;top:53%;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);z-index:1}
.dish-clip{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#EDE6DF;box-shadow:0 70px 110px -50px rgba(120,28,18,.45),0 0 0 1px rgba(29,22,21,.05)}
.dish-video{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.ring{position:absolute;left:-10%;top:-10%;width:120%;height:120%;overflow:visible;animation:spin 220s linear infinite reverse}
.ring text{font:500 15px var(--sans);letter-spacing:.42em;text-transform:uppercase;fill:var(--ink-2)}
.hero-lede{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);max-width:min(520px,30vw);z-index:3;font:400 clamp(26px,2.5vw,46px)/1.22 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.hero-lede b{font-weight:500;font-style:italic;color:var(--prego)}
.hero-lede b:last-of-type{color:var(--basil)}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:600 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.scroll-hint i{width:1px;height:44px;background:linear-gradient(var(--prego),transparent);animation:drip 2s var(--ease) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- I · escena ---------- */
.escena{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#6E1209;color:var(--cream)}
.sauce{position:absolute;inset:0;transform-origin:60% 50%}
.sauce img,.sauce canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sauce canvas{opacity:0;transition:opacity 1.2s}
.sauce canvas.on{opacity:1}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(34,5,3,.86) 0%,rgba(34,5,3,.62) 36%,rgba(34,5,3,.08) 72%,rgba(34,5,3,0) 100%)}
.escena-copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,34px);padding:var(--nav-h) var(--gutter) 40px;max-width:min(980px,100%)}
.escena .h2{max-width:14ch}
.searchbar{display:flex;align-items:center;gap:16px;width:min(620px,100%);padding:16px 18px 16px 24px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 30px 70px -24px rgba(0,0,0,.55)}
.searchbar svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--prego);stroke-width:2;stroke-linecap:round}
.typed{flex:1;min-width:0;white-space:nowrap;overflow:hidden;font:italic 400 clamp(19px,1.7vw,30px)/1.25 var(--serif)}
.typed::after,.q-typed::after{content:"";display:inline-block;width:2px;height:1em;margin-left:4px;vertical-align:-.14em;background:var(--prego);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.searchbar small{flex:none;font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);padding:6px 9px;border-radius:999px}
.stat-inline{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.stat-inline b{font:500 clamp(60px,7vw,132px)/.9 var(--serif);letter-spacing:-.03em;color:#fff;font-variant-numeric:lining-nums}
.stat-inline span{font-size:clamp(16px,1.3vw,22px);line-height:1.4;max-width:22ch;color:rgba(251,244,236,.86)}

/* ---------- II · giro ---------- */
.giro{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;padding:calc(var(--nav-h) + 6vh) var(--gutter) 10vh;display:flex;flex-direction:column;gap:6vh}
.facts{flex:1;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3vw;align-items:end}
.fact{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid var(--line)}
.fact .big{font:500 clamp(64px,8vw,160px)/.86 var(--serif);letter-spacing:-.035em;font-variant-numeric:lining-nums}
.fact p{font-size:clamp(15px,1.2vw,21px);line-height:1.45;color:var(--ink-2);max-width:28ch}
.fact.hot .big{color:var(--prego)}
.coda{grid-column:1 / -1;font:italic 400 clamp(24px,2.5vw,46px)/1.25 var(--serif);max-width:32ch;color:var(--ink)}
.coda b{font-weight:500;color:var(--prego)}
/* sequence mode (set by script): one fact per screen */
.giro.seq{height:100vh;height:100svh}
.facts.seq{display:block}
.facts.seq .fact{position:absolute;left:0;right:0;top:0;bottom:12vh;padding:0;border:0;align-items:center;justify-content:center;text-align:center}
.facts.seq .fact .big{font-size:clamp(120px,22vw,400px);line-height:.8}
.facts.seq .fact p{font-size:clamp(17px,1.6vw,26px);max-width:30ch}
.facts.seq .coda{position:absolute;left:0;right:0;bottom:0;margin:0 auto;text-align:center}

/* ---------- III · preguntas ---------- */
.preguntas{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;padding:calc(var(--nav-h) + 6vh) var(--gutter) 9vh;display:flex;flex-direction:column;gap:4vh}
.qs{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:2vw;perspective:1400px}
.q{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.4vw,40px);border-radius:28px;background:var(--paper-2);position:relative;z-index:2}
.q-tag{font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.q.tt .q-tag{color:var(--prego)}
.q.mx .q-tag{color:var(--basil)}
.q h3{font:italic 500 clamp(30px,3.1vw,58px)/1.02 var(--serif);letter-spacing:-.015em}
.q p{font-size:clamp(15px,1.2vw,21px);line-height:1.5;color:var(--ink-2)}
.plate-mini{position:relative;z-index:1;justify-self:center;width:min(100%,50vh);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 60px 100px -50px rgba(120,28,18,.45),0 0 0 1px rgba(29,22,21,.05)}
.plate-mini img{width:100%;height:100%;object-fit:cover;animation:spin 150s linear infinite}

/* ---------- IV · topic tree ---------- */
.tree-sec{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;padding:calc(var(--nav-h) + 4vh) var(--gutter) 7vh;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);gap:4vw;align-items:center}
.tree-copy{display:flex;flex-direction:column;gap:clamp(18px,3vh,32px);min-width:0}
.tree-copy .h2{font-size:clamp(36px,4vw,78px)}
.callouts{display:flex;flex-direction:column}
.callouts li{display:flex;flex-direction:column;gap:6px;padding:14px 0 14px 22px;border-left:2px solid var(--line);opacity:.38;transition:opacity .5s,border-color .5s}
.callouts li.on{opacity:1;border-color:var(--prego)}
.callouts b{font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--prego)}
.callouts span{font-size:clamp(15px,1.15vw,20px);line-height:1.45;color:var(--ink-2)}
.tree-3d{position:relative;perspective:1600px;min-width:0}
.tree-card{position:relative;transform-style:preserve-3d}
.tree{display:block;width:100%;height:auto;overflow:visible}
.tree .hdr{font:600 12px var(--sans);letter-spacing:.2em;fill:var(--ink-2)}
.tree .link{fill:none;stroke:var(--prego);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0;opacity:.7}
.tree .root rect{fill:var(--prego)}
.tree .root text{fill:#fff;font:600 19px var(--sans)}
.tree .topic rect{fill:var(--paper);stroke:var(--prego);stroke-width:1.5}
.tree .topic text{fill:var(--ink);font:500 19px var(--sans)}
.tree .topic.hl.lit rect{fill:#FBE7E9}
.tree .kw circle{fill:var(--prego)}
.tree .kw text{fill:var(--ink);font:italic 400 22px var(--serif)}
.tree .pulses circle{fill:var(--prego)}
.signals{position:absolute;right:-1vw;top:50%;width:min(400px,44%);translate:0 -50%;padding:26px 28px;border-radius:24px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:0 50px 90px -40px rgba(80,24,18,.35)}
.sig-head{font:500 22px/1.2 var(--serif);margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sig-head span{display:block;font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--prego);margin-bottom:8px}
.signals ul{display:flex;flex-direction:column;gap:9px}
.signals li{display:flex;flex-direction:column;gap:3px}
.signals b{font:600 12px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--prego)}
.signals span{font-size:14px;line-height:1.38;color:var(--ink-2)}

/* ---------- V · maia ---------- */
.maia-sec{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;padding:calc(var(--nav-h) + 4vh) var(--gutter) 7vh;display:flex;flex-direction:column;gap:3.5vh}
.maia-sec .h2{font-size:clamp(34px,3.9vw,74px);max-width:24ch}
.maia-stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(24px,3vw,56px);align-items:center;perspective:1800px}
.console{display:flex;flex-direction:column;gap:20px;padding:clamp(22px,2.2vw,38px);border-radius:30px;background:var(--paper);border:1px solid var(--line);box-shadow:0 60px 120px -60px rgba(46,107,60,.35),0 10px 30px -18px rgba(29,22,21,.18);min-width:0;transform-style:preserve-3d}
.console-top{display:flex;justify-content:space-between;gap:16px;font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.console-top b{color:var(--basil);font-weight:600}
.modes{display:flex;flex-wrap:wrap;gap:8px}
.modes button{padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);cursor:pointer;font:500 clamp(12px,.95vw,15px)/1 var(--sans);letter-spacing:.02em;transition:background .3s,color .3s,border-color .3s}
.modes button:hover{border-color:var(--basil);color:var(--ink)}
.modes button[aria-selected="true"]{background:var(--basil);border-color:var(--basil);color:#fff}
.search{display:flex;align-items:flex-start;gap:18px;padding:clamp(18px,1.8vw,30px);border-radius:20px;background:var(--paper-2);min-height:clamp(110px,15vh,170px)}
.search svg{flex:none;width:28px;height:28px;margin-top:8px;fill:none;stroke:var(--basil);stroke-width:2;stroke-linecap:round}
.q-typed{font:italic 400 clamp(24px,2.6vw,48px)/1.18 var(--serif);letter-spacing:-.01em;min-width:0}
.q-typed::after{background:var(--basil)}
.console dl{display:flex;flex-direction:column;gap:12px}
.console dl div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px}
.console dt{padding-top:4px;font:600 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.console dd{font-size:clamp(15px,1.2vw,20px);line-height:1.45}
.ficha{display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2vw,34px);border-radius:30px;background:var(--paper-2);min-width:0;box-shadow:0 60px 100px -60px rgba(29,22,21,.35)}
.ficha header{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.avatar{flex:none;width:56px;height:56px;border-radius:50%;background:var(--basil);display:grid;place-items:center}
.avatar svg{width:30px;height:30px;fill:#fff}
.ficha header b{display:block;font:500 clamp(19px,1.5vw,25px)/1.15 var(--serif)}
.ficha header span{display:block;margin-top:6px;font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--prego)}
.checks{display:flex;flex-direction:column;gap:13px}
.checks li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start}
.tick{width:30px;height:30px;border-radius:50%;background:var(--basil);display:grid;place-items:center}
.tick svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.checks b{display:block;font-size:clamp(15px,1.15vw,19px);font-weight:600;line-height:1.3}
.checks span{display:block;font-size:clamp(13px,1vw,16px);line-height:1.4;color:var(--ink-2)}
.ready{align-self:flex-start;padding:10px 16px;border-radius:999px;background:var(--basil);color:#fff;font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}

/* ---------- VI · receta (horizontal) ---------- */
.receta{position:relative;overflow:hidden;background:var(--paper-2)}
.receta-track{display:flex;height:100vh;height:100svh;min-height:620px;width:max-content}
.panel{flex:none;width:min(520px,86vw);height:100%;padding:calc(var(--nav-h) + 8vh) clamp(28px,3vw,56px) 12vh;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;border-right:1px solid var(--line)}
.panel.intro{width:min(1180px,100vw);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding:0;gap:0;border:0}
.spiral{height:100%;overflow:hidden}
.spiral img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.intro-copy{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:calc(var(--nav-h) + 4vh) clamp(28px,4vw,80px) 8vh}
.ingredients{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 10px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ingredients b{width:100%;font:italic 500 clamp(22px,1.8vw,30px)/1 var(--serif);color:var(--prego);margin-bottom:6px}
.ingredients span{font:500 clamp(13px,1vw,16px)/1 var(--sans);letter-spacing:.04em;padding:9px 13px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.swipe-note{font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}
.step .n{font:italic 500 clamp(130px,15vw,260px)/.78 var(--serif);letter-spacing:-.04em;margin-bottom:auto}
.step.tt .n,.step.tt .tool{color:var(--prego)}
.step.mx .n,.step.mx .tool{color:var(--basil)}
.step .tool{font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.step h3{font:500 clamp(30px,2.8vw,52px)/1.04 var(--serif);letter-spacing:-.015em}
.step .ex{font-size:clamp(16px,1.25vw,22px);line-height:1.5;color:var(--ink-2);max-width:30ch}
.panel.loop{width:min(620px,92vw);justify-content:center;gap:22px;border:0}
.panel.loop svg{width:56px;height:56px;fill:none;stroke:var(--basil);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.panel.loop p{font:italic 400 clamp(26px,2.4vw,44px)/1.22 var(--serif);max-width:20ch}
.panel.loop small{font-size:13px;line-height:1.5;color:var(--ink-2);max-width:44ch}

/* ---------- VII · arranque ---------- */
.arranque{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,120px);align-items:center;padding:clamp(100px,16vh,180px) var(--gutter)}
.arranque-copy{display:flex;flex-direction:column;gap:clamp(24px,5vh,56px)}
.plan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vh,56px) clamp(24px,3vw,56px)}
.plan li{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid var(--line)}
.plan .k{display:flex;align-items:baseline;gap:14px;font:500 clamp(28px,2.6vw,46px)/1 var(--serif)}
.plan .k i{font:600 12px/1 var(--sans);letter-spacing:.2em;color:var(--prego);font-style:normal}
.plan p{font-size:clamp(15px,1.2vw,21px);line-height:1.5;color:var(--ink-2)}
.arch{position:relative;aspect-ratio:3/4;border-radius:999px 999px 28px 28px;overflow:hidden;box-shadow:0 60px 100px -50px rgba(120,28,18,.4)}
.arch img{width:100%;height:118%;object-fit:cover}

/* ---------- epílogo ---------- */
.cierre{position:relative;min-height:100vh;min-height:100svh;background:var(--night);color:var(--cream);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;overflow:hidden}
.cierre-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(20px,4vh,40px);padding:calc(var(--nav-h) + 6vh) 0 14vh var(--gutter)}
.fork{position:relative;height:100vh;height:100svh;overflow:hidden}
.fork img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%);mask-image:linear-gradient(90deg,transparent 0%,#000 26%)}
.steam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.site-foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:22px;z-index:2;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12px;line-height:1.5;color:rgba(251,244,236,.55)}

/* ---------- phones ---------- */
@media (max-width:900px){
  :root{--nav-h:52px}
  .localnav ul li:not(.cta-li){display:none}
  .ln-title{font-size:18px}
  .kicker{left:var(--gutter);right:var(--gutter);font-size:10px;letter-spacing:.18em;line-height:1.5}
  .hero-title{top:calc(var(--nav-h) + 10vh)}
  .scroll-hint{display:none}
  .vine-a{left:-20vw;top:30vh;width:74vw}
  .vine-b{right:-24vw;top:50vh;width:66vw}
  .jar-wrap{--jar:min(54vh,118vw);bottom:1vh}
  .dish{--d:76vw;left:50%;top:35%}
  .hero-lede{left:var(--gutter);right:var(--gutter);top:auto;bottom:5vh;transform:none;max-width:none;text-align:center;font-size:clamp(20px,5.6vw,28px)}
  .escena .h2{max-width:none}
  .shade{background:linear-gradient(180deg,rgba(34,5,3,.55) 0%,rgba(34,5,3,.82) 55%,rgba(34,5,3,.9) 100%)}
  .searchbar small{display:none}
  .facts{grid-template-columns:1fr 1fr;gap:28px 20px}
  .qs{grid-template-columns:1fr;gap:16px}
  .plate-mini{order:-1;width:min(300px,72vw)}
  .tree-sec{grid-template-columns:1fr;align-content:start;gap:20px;padding-top:calc(var(--nav-h) + 3vh)}
  .callouts{position:relative;min-height:84px}
  .callouts li{position:absolute;inset:0 0 auto 0;opacity:0;border-left-color:var(--prego)}
  .callouts li.on{opacity:1}
  .signals{right:0;left:0;margin:0 auto;width:min(360px,100%);top:auto;bottom:-6px;translate:none}
  .maia-stage{grid-template-columns:1fr;align-items:start;position:relative}
  .ficha{position:absolute;left:0;right:0;top:0}
  .console dl div{grid-template-columns:1fr;gap:4px}
  .receta-track{flex-direction:column;width:auto;height:auto;min-height:0}
  .panel{width:auto;height:auto;padding:56px var(--gutter);border-right:0;border-bottom:1px solid var(--line)}
  .panel.intro{width:auto;grid-template-columns:1fr}
  .spiral{height:52vh}
  .intro-copy{padding:40px var(--gutter)}
  .swipe-note{display:none}
  .step .n{margin-bottom:12px}
  .arranque{grid-template-columns:1fr}
  .arch{order:-1;width:min(360px,80%);margin:0 auto}
  .plan{grid-template-columns:1fr}
  .cierre{grid-template-columns:1fr}
  .fork{position:absolute;inset:0;height:auto;opacity:.55}
  .fork img{-webkit-mask-image:none;mask-image:none}
  .cierre-copy{padding-right:var(--gutter)}
}
@media (prefers-reduced-motion:reduce){
  .plate-mini img,.ring,.scroll-hint i,.typed::after,.q-typed::after{animation:none}
  .hero-lede{opacity:1}
}