/* ===== raíces — almacén saludable · scrollytelling botánico ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --paper:#FAF6EC; --paper2:#F3ECDC; --ink:#211d15; --ink-soft:#6b6357;
  --line:rgba(33,29,21,.14);
  --mostaza:#E0A52E; --verde:#5f8a52; --verde-deep:#243a2a; --bordo:#9a4636;
  --bg:#FAF6EC;
  --disp:Rubik,system-ui,sans-serif; --hand:Caveat,cursive;
}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ink);background:var(--bg);
  transition:background .8s ease;-webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:none}
@media (pointer:coarse){body{cursor:auto}#cur,#curRing{display:none}}
body[data-loading]{overflow:hidden;height:100vh}
em{font-style:italic}

/* ---- WORDMARK (logo recreado) ---- */
.wordmark{font-family:var(--disp);font-weight:800;letter-spacing:-.01em;display:inline-flex;align-items:center;line-height:1;color:var(--ink)}
.wordmark .brk{display:inline-block;width:.22em;height:.74em;border:.085em solid currentColor;flex:0 0 auto}
.wordmark .brk.l{border-right:none;margin-right:.16em}
.wordmark .brk.r{border-left:none;margin-left:.16em}
.wordmark .il{font-style:normal;position:relative;display:inline-block}
.wordmark .il::after,.wordmark .il::before{content:"";position:absolute;top:-.5em;left:50%;width:.3em;height:.34em;
  background:var(--verde);border-radius:0 100% 0 100%}
.wordmark .il::after{transform:translateX(-14%) rotate(-22deg);transform-origin:bottom left}
.wordmark .il::before{transform:translateX(-86%) rotate(22deg) scaleX(-1);transform-origin:bottom right}
.wordmark.big{font-size:clamp(4.5rem,20vw,12rem)}

/* ---- LOADER ---- */
#loader{position:fixed;inset:0;z-index:200;background:var(--verde-deep);display:grid;place-items:center}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.load-mark{color:#f3ecd9;font-size:clamp(3rem,13vw,4.6rem)}
/* en el loader, de la í sale la FLOR (no las hojas) */
.load-mark .il::before,.load-mark .il::after{display:none}
.il-flower{position:absolute;left:50%;bottom:88%;width:.92em;height:.92em;transform:translateX(-50%);pointer-events:none}
.il-flower svg{width:100%;height:100%;overflow:visible}
.lf-petals path{fill:var(--mostaza);transform-box:fill-box;transform-origin:center}
.lf-core{fill:var(--bordo);transform-box:fill-box;transform-origin:center}
.load-mark .lf-petals path{transform:scale(0);animation:bloomP 1.9s ease-out infinite alternate;animation-delay:calc(var(--i,0)*.045s)}
.load-mark .lf-core{transform:scale(.2);animation:bloomC 1.9s ease-out infinite alternate}
@keyframes bloomP{0%,16%{transform:scale(0)}68%,100%{transform:scale(1)}}
@keyframes bloomC{0%,26%{transform:scale(.2)}76%,100%{transform:scale(1)}}
.loader-bar{width:150px;height:2px;background:rgba(207,224,194,.25);overflow:hidden}
.loader-bar i{display:block;height:100%;width:100%;background:#cfe0c2;transform:scaleX(0);transform-origin:left}

/* ---- progreso + cursor ---- */
#scrollbar{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--verde),var(--mostaza));transform:scaleX(0);transform-origin:left;z-index:120}
#cur{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--ink);margin:-3.5px 0 0 -3.5px;z-index:150;pointer-events:none;opacity:0}
#curRing{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid rgba(33,29,21,.4);border-radius:50%;margin:-17px 0 0 -17px;z-index:150;pointer-events:none;opacity:0;transition:width .25s,height .25s}

/* ---- HEADER ---- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;
  padding:14px clamp(16px,5vw,40px);background:linear-gradient(180deg,rgba(250,246,236,.92) 40%,rgba(250,246,236,0));transition:background .5s}
body[data-theme-green] .site-head{background:linear-gradient(180deg,rgba(36,58,42,.94) 40%,rgba(36,58,42,0))}
.brand{text-decoration:none}
.brand .wordmark{font-size:26px}
body[data-theme-green] .brand .wordmark{color:#f3ecd9}
.nav-cta{font-weight:700;font-size:13px;text-decoration:none;color:#fff;background:var(--verde);padding:11px 18px;border-radius:999px;
  box-shadow:0 8px 20px rgba(95,138,82,.32);transition:transform .2s}
.nav-cta:hover{transform:translateY(-1px)}

/* ---- SCENE base ---- */
.scene{position:relative;min-height:100svh}
.chapter{position:relative;padding:clamp(5rem,13vh,9rem) clamp(20px,6vw,48px)}
.stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;padding:0 clamp(20px,6vw,48px)}
.stage-center{text-align:center}
.kicker{font-family:var(--disp);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
[data-rev]{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
[data-rev].in{opacity:1;transform:none}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top}
[data-split] .w i{display:inline-block;transform:translateY(108%);font-style:normal}

/* fondos foto (swap) */
.bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.bg .ph{position:absolute;inset:0;background:linear-gradient(135deg,#e7dec9,#cdbfa0)}
.bg.has-asset .ph{display:none}

/* ---- HERO ---- */
#hero{height:165svh;background:var(--verde-deep)}
.hero-stage{padding:0}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;background:#243a2a url("assets/seq/intro/f_0000.webp") center/cover no-repeat}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,16,8,.5) 0%,rgba(20,16,8,.08) 30%,rgba(20,16,8,.12) 54%,rgba(20,16,8,.74) 100%)}
.hero-copy{position:relative;z-index:3;width:100%;max-width:1000px;margin-top:auto;margin-bottom:clamp(4rem,14vh,8rem);
  padding:0 clamp(20px,7vw,48px);text-align:left;color:#fff}
.hero-copy .kicker{color:#f3e7cd}
.hero-h{font-family:var(--disp);font-weight:800;font-size:clamp(3.2rem,14vw,7rem);line-height:.93;letter-spacing:-.02em;margin:12px 0 0;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.hero-h em{font-style:italic;color:var(--mostaza)}
.hero-sub{font-size:clamp(1.1rem,3.4vw,1.4rem);margin-top:12px;color:#f3ecd9;max-width:26ch}
.chips{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.chips li{font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:.02em;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.42);color:#fff;backdrop-filter:blur(4px)}
.cue{position:absolute;bottom:max(18px,3.5svh);left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:11px;color:#fff}
.cue-tx{font-family:var(--hand);font-weight:700;font-size:clamp(1.7rem,5.4vw,2.2rem);line-height:1;color:#fff;
  text-shadow:0 2px 16px rgba(255,255,255,.55),0 1px 4px rgba(0,0,0,.45)}
.cue-arrow{position:relative;width:66px;height:66px;border-radius:50%;background:var(--verde);display:grid;place-items:center;color:#fff;
  animation:cuebob 1.25s ease-in-out infinite,cueglow 1.8s ease-in-out infinite}
.cue-arrow svg{width:32px;height:32px;margin-top:2px}
.cue-arrow::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #fff;opacity:.65;animation:cuering 1.7s ease-out infinite}
@keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@keyframes cueglow{0%,100%{box-shadow:0 10px 30px rgba(95,138,82,.5),0 0 0 rgba(224,165,46,0)}
  50%{box-shadow:0 12px 38px rgba(95,138,82,.7),0 0 38px 6px rgba(224,165,46,.85)}}
@keyframes cuering{0%{transform:scale(1);opacity:.65}100%{transform:scale(1.75);opacity:0}}
body.rm .cue-arrow{animation:none}

/* ---- MANIFIESTO (capa del hero, crossfade con el video) ---- */
.hero-mani{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:960px;margin:0 auto;padding:0 clamp(20px,7vw,48px);opacity:0;pointer-events:none}
.hero-mani .kicker{color:#a9c69a;margin-bottom:.4rem}
.mani-list{list-style:none;display:flex;flex-direction:column;gap:.34em;margin-top:1.2rem}
.mani-list li{font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,6vw,3.4rem);line-height:1.12;color:#f3ecd9;letter-spacing:-.01em}
.mani-list li em{color:var(--mostaza);font-style:italic}

/* ---- RAÍCES QUE CRECEN (video frame-a-frame) ---- */
#crece{height:280svh}
.crece-stage{display:grid;place-items:center;padding:0}
#creceSeq{aspect-ratio:9/16;height:min(94svh,calc(96vw*16/9));max-width:96vw;display:block}

/* ---- headings ---- */
.chapter h2,.scene h2{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,10vw,5rem);line-height:.98;letter-spacing:-.02em;margin:.18em 0 .5em}

/* ---- EL LOCAL ---- */
#local{background:var(--paper2)}
.local-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,56px);align-items:center}
.local-copy .kicker{color:var(--verde)}
.local-copy h2{color:var(--ink)}
.local-lead{font-size:clamp(1.05rem,2.6vw,1.25rem);line-height:1.5;color:var(--ink-soft);margin-bottom:1.8rem;max-width:40ch}
.local-feats{list-style:none;display:flex;flex-direction:column;gap:14px}
.local-feats li{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:14px}
.local-feats b{font-family:var(--disp);font-weight:700;font-size:1.05rem}
.local-feats span{font-size:.95rem;color:var(--ink-soft)}
.local-photo{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px rgba(33,29,21,.18)}
.local-photo figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:center;padding:30px 0 16px;
  font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:lowercase;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,transparent,rgba(20,16,8,.6))}
.local-photo figcaption .brk{display:inline-block;width:.8em;height:1.5em;border:.14em solid currentColor}
.local-photo figcaption .brk.l{border-right:none}.local-photo figcaption .brk.r{border-left:none}

/* ---- OUTRO ---- */
#outro{background:var(--verde-deep)}
.outro-h{color:#f3ecd9;text-align:center}
.cta-grid{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:.8rem}
.cta-card{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:#f3ecd9;
  background:rgba(255,255,255,.06);border:1px solid rgba(243,236,217,.22);border-radius:18px;padding:22px 26px;min-width:150px;transition:transform .2s,background .2s}
.cta-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.1)}
.cta-card .cc-ico{font-size:26px;margin-bottom:6px}
.cta-card b{font-family:var(--disp);font-weight:700;font-size:1.05rem}
.cta-card small{font-size:.8rem;color:#a9c69a}
.cta-card.wa{background:rgba(95,138,82,.2);border-color:rgba(95,138,82,.5)}
.outro-foot{margin-top:2rem;font-family:var(--disp);font-size:.85rem;letter-spacing:.04em;color:#a9c69a;text-align:center}

/* ---- RESPONSIVE ---- */
@media (max-width:760px){
  .local-inner{grid-template-columns:1fr;gap:28px}
  .local-photo{max-width:380px;margin:0 auto;width:100%}
  .nav-cta{font-size:12px;padding:9px 14px}
}

/* ---- reduced motion ---- */
body.rm [data-rev]{opacity:1;transform:none}
body.rm [data-split] .w i{transform:none}