/* ═══════════════════════════════════════════════
   savia — showcase landing
   palette: deep forest / cream / sage / amber
   type: Fraunces (display) + Space Grotesk (text)
   ═══════════════════════════════════════════════ */

/* fuentes self-hosted (subset latin, mismas instancias variables que servía Google Fonts) */
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("/fonts/fraunces.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";font-style:italic;font-weight:300 700;font-display:swap;
  src:url("/fonts/fraunces-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("/fonts/space-grotesk.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg: #0B0F0A;
  --bg-2: #10160E;
  --bg-3: #161E13;
  --ink: #F6F2E9;
  --ink-dim: rgba(246,242,233,.58);
  --ink-faint: rgba(246,242,233,.34);
  --leaf: #45593E;
  --moss: #5C6F52;
  --sage: #8FA582;
  --amber: #E8A33D;
  --amber-2: #F0BC6B;
  --cream: #F2EDE1;
  --cream-2: #EAE3D3;
  --ink-dark: #232D1E;
  --line: rgba(246,242,233,.09);
  --line-strong: rgba(246,242,233,.16);
  --font-d: "Fraunces", Georgia, serif;
  --font-t: "Space Grotesk", system-ui, sans-serif;
  --ease: cubic-bezier(.22,.9,.28,1);
  --pad: clamp(1.25rem, 4vw, 4rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-t);
  font-weight:300;
  font-size:clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--amber);color:var(--bg)}

/* scrollbar acorde al diseño */
html{scrollbar-width:thin;scrollbar-color:#3A4633 var(--bg)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#3A4633;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--moss)}

a{color:inherit;text-decoration:none}
em{font-family:var(--font-d);font-style:italic;font-weight:400}
b{font-weight:500}

/* film grain */
.grain{
  position:fixed;inset:-50%;z-index:200;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;
  animation:grain 9s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-2%,3%)}
  40%{transform:translate(3%,-2%)} 60%{transform:translate(-3%,-3%)} 80%{transform:translate(2%,2%)}
}

/* ══════════ loader ══════════ */
.loader{
  position:fixed;inset:0;z-index:300;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;
  background:var(--bg);
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.done{opacity:0;visibility:hidden}
.ll-body{fill:none;stroke:var(--sage);stroke-width:2.5;stroke-dasharray:270;stroke-dashoffset:270;animation:draw 1.3s .1s var(--ease) forwards}
.ll-vein{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-dasharray:90;stroke-dashoffset:90;animation:draw 1s .8s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.loader-word{
  font-family:var(--font-d);font-size:1.4rem;letter-spacing:.06em;color:var(--ink-dim);
  opacity:0;animation:fadeUp .8s 1s var(--ease) forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ══════════ nav ══════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--pad);
  transition:transform .5s var(--ease), background .4s, backdrop-filter .4s;
}
.nav.scrolled{
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav.hidden{transform:translateY(-110%)}
.nav-brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-d);font-size:1.3rem;letter-spacing:.02em}
.brand-leaf{fill:var(--sage);transition:fill .3s}
.brand-vein{stroke:var(--bg);stroke-width:4;fill:none;stroke-linecap:round}
.nav-brand:hover .brand-leaf{fill:var(--amber)}
.nav-links{display:flex;gap:2rem}
.nav-links a{
  font-size:.85rem;letter-spacing:.04em;color:var(--ink-dim);
  transition:color .3s;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;
  background:var(--amber);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-t);font-weight:400;font-size:.9rem;letter-spacing:.03em;
  padding:.8rem 1.6rem;border-radius:99px;border:1px solid transparent;
  cursor:pointer;transition:all .35s var(--ease);position:relative;overflow:hidden;
}
.btn-nav{padding:.55rem 1.2rem;font-size:.82rem;border-color:var(--line-strong);color:var(--ink)}
.btn-nav:hover{border-color:var(--amber);color:var(--amber)}
.btn-solid{background:var(--amber);color:#1E1503;font-weight:500}
.btn-solid:hover{background:var(--amber-2);transform:translateY(-2px);box-shadow:0 12px 40px -8px rgba(232,163,61,.45)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--sage);color:var(--sage)}
.btn-big{padding:1.1rem 2.6rem;font-size:1rem}

/* ══════════ shared ══════════ */
.section{padding:clamp(6rem,12vh,10rem) var(--pad);position:relative}
.eyebrow{
  display:flex;align-items:center;gap:.7rem;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:2.2rem;font-weight:400;
}
.eyebrow-num{
  font-family:var(--font-d);font-style:italic;color:var(--amber);
  font-size:.85rem;letter-spacing:.05em;
}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber)}
.h2{
  font-family:var(--font-d);font-weight:350;
  font-size:clamp(2rem, 1.4rem + 3.2vw, 4rem);
  line-height:1.08;letter-spacing:-.01em;max-width:20ch;
  font-variation-settings:"opsz" 100, "SOFT" 50;
}
.h2 em{color:var(--amber-2)}
.lead{max-width:56ch;color:var(--ink-dim);margin-top:1.6rem;font-size:clamp(1rem,.95rem+.4vw,1.2rem)}
.fine{color:var(--ink-faint);font-size:.85em}
.amber{color:var(--amber)}

/* split reveal */
[data-split] .sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
[data-split] .swi{display:inline-block;transform:translateY(115%)}

/* ══════════ hero ══════════ */
.hero{
  min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:7rem var(--pad) 2rem;overflow:hidden;
  background:radial-gradient(120% 90% at 75% 40%, #131B0F 0%, var(--bg) 60%);
}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero-inner{position:relative;z-index:2;max-width:56rem}
.hero-eyebrow{margin-bottom:1.8rem}
.hero-title{
  font-family:var(--font-d);font-weight:340;
  font-size:clamp(2.2rem, 1.3rem + 4.4vw, 5rem);
  line-height:1.04;letter-spacing:-.015em;
  font-variation-settings:"opsz" 144, "SOFT" 50;
  margin-bottom:2rem;
}
.ht-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ht-w{display:inline-block;transform:translateY(112%)}
.ht-w.it{font-style:italic;color:var(--amber-2);font-variation-settings:"opsz" 144, "SOFT" 100}
.hero-sub{
  max-width:46ch;color:var(--ink-dim);font-size:clamp(1rem,.9rem+.5vw,1.25rem);
  margin-bottom:2.4rem;opacity:0;
}
.hero-sub em{color:var(--ink)}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;opacity:0}
.hero-foot{
  position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;
  margin-top:auto;padding-top:3rem;opacity:0;
}
.hero-stats{display:flex;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap}
.hstat{display:flex;flex-direction:column;gap:.15rem}
.hstat-n{font-family:var(--font-d);font-size:clamp(1.3rem,1rem+1vw,1.8rem);color:var(--ink)}
.hstat-l{font-size:.78rem;letter-spacing:.05em;color:var(--ink-faint)}
.scroll-cue{
  width:1px;height:56px;background:var(--line-strong);position:relative;overflow:hidden;margin-right:1rem;
}
.scroll-cue span{
  position:absolute;top:-40%;left:0;width:100%;height:40%;
  background:var(--amber);animation:cue 2s var(--ease) infinite;
}
@keyframes cue{to{top:110%}}

/* ══════════ marquee ══════════ */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:1.1rem 0;background:var(--bg-2);
}
.marquee-track{
  display:flex;width:max-content;
  font-family:var(--font-d);font-style:italic;font-size:1.05rem;color:var(--ink-dim);
}
.marquee-track.on{animation:marq 36s linear infinite}
.marquee-copy{
  display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem;white-space:nowrap;
}
.marquee-copy i{font-style:normal;color:var(--amber);font-size:.7rem}
@keyframes marq{to{transform:translateX(-50%)}}

/* ══════════ 01 problema ══════════ */
.manifesto{
  font-family:var(--font-d);font-weight:350;
  font-size:clamp(1.7rem, 1.1rem + 3vw, 3.4rem);
  line-height:1.22;max-width:24ch;letter-spacing:-.005em;
  margin-bottom:clamp(4rem,8vh,6rem);
}
.manifesto .mw{opacity:.14;transition:none}
.manifesto b{font-style:italic;font-weight:400;color:var(--amber-2)}
.pain-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
@media (min-width:1120px){.pain-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){.pain-grid{grid-template-columns:1fr}}
.pain{
  background:var(--bg);padding:2.2rem 1.9rem 2.6rem;position:relative;
  transition:background .45s var(--ease);
}
.pain:hover{background:var(--bg-2)}
.pain::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--amber),transparent 70%);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.pain:hover::before{transform:scaleX(1)}
.pain-wide{grid-column:1 / -1}
.pain-num{
  font-family:var(--font-d);font-style:italic;color:var(--ink-faint);
  font-size:.95rem;display:block;margin-bottom:1.4rem;
}
.pain h3{
  font-family:var(--font-d);font-weight:400;font-size:1.35rem;line-height:1.2;
  margin-bottom:.8rem;letter-spacing:-.01em;
}
.pain p{color:var(--ink-dim);font-size:.95rem}

/* ══════════ 02 cómo funciona ══════════ */
.como{background:var(--bg-2)}
.como-head{margin-bottom:4rem}
.steps-progress{
  display:flex;align-items:center;gap:1rem;margin-bottom:2.6rem;
  font-family:var(--font-d);font-style:italic;color:var(--ink-dim);font-size:.95rem;
}
.sp-bar{flex:0 0 180px;height:1px;background:var(--line-strong);position:relative}
.sp-bar i{position:absolute;inset:0;right:auto;width:0%;background:var(--amber);transition:width .3s linear}
.steps-stage{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);
  align-items:center;min-height:60vh;
}
.steps-copy{position:relative}
.step-text{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.step-text.is-active{position:relative;opacity:1;transform:none;pointer-events:auto}
.step-text h3{
  font-family:var(--font-d);font-weight:380;font-size:clamp(1.5rem,1.2rem+1.4vw,2.2rem);
  line-height:1.15;margin-bottom:1.1rem;letter-spacing:-.01em;
}
.st-num{font-style:italic;color:var(--amber);font-size:.7em;margin-right:.4rem}
.step-text p{color:var(--ink-dim);max-width:44ch}

.steps-visual{position:relative;min-height:420px}
.sv{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:1rem;
  opacity:0;transform:translateY(30px) scale(.97);pointer-events:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.sv.is-active{opacity:1;transform:none;pointer-events:auto}
.sv-window{
  background:linear-gradient(160deg,#141B10,#0E130B);
  border:1px solid var(--line-strong);border-radius:16px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  overflow:hidden;
}
.sv-bar{
  display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--line);
}
.sv-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.sv-bar span{margin-left:.6rem;font-size:.75rem;letter-spacing:.06em;color:var(--ink-faint)}
.sv-msgs{padding:1.2rem;display:flex;flex-direction:column;gap:.9rem}
.sv-msg{display:flex;gap:.7rem;font-size:.88rem;color:var(--ink-dim);align-items:flex-start}
.sv-msg b{color:var(--ink);font-weight:500;margin-right:.3rem}
.sv-ava{
  flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:.6rem;letter-spacing:.03em;color:var(--cream);font-weight:500;
}
.sv-ava.a1{background:#4E6046}.sv-ava.a2{background:#6B5A35}
.sv-msg-tag{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;
  font-size:.75rem;color:var(--sage);border:1px solid rgba(143,165,130,.3);
  border-radius:99px;padding:.35rem .8rem;margin-top:.2rem;
  background:rgba(143,165,130,.07);
}
.sv-docs{display:flex;gap:.6rem;flex-wrap:wrap}
.sv-doc{
  font-size:.75rem;color:var(--ink-dim);border:1px solid var(--line-strong);
  border-radius:8px;padding:.45rem .8rem;background:var(--bg-2);
  animation:docFloat 4s calc(var(--d) * -1.3s) ease-in-out infinite;
}
@keyframes docFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sv-chat{padding:1.2rem;display:flex;flex-direction:column;gap:.9rem}
.sv-q{
  align-self:flex-end;background:var(--leaf);color:var(--cream);
  padding:.7rem 1.1rem;border-radius:14px 14px 4px 14px;font-size:.9rem;max-width:80%;
}
.sv-a{
  align-self:flex-start;background:var(--bg-2);border:1px solid var(--line);
  padding:1rem 1.2rem;border-radius:14px 14px 14px 4px;font-size:.9rem;max-width:92%;
  color:var(--ink-dim);
}
.sv-a p{margin-bottom:.8rem}
.sv-src{display:flex;gap:.5rem;flex-wrap:wrap}
.sv-src-chip{
  font-size:.72rem;color:var(--amber-2);background:rgba(232,163,61,.09);
  border:1px solid rgba(232,163,61,.28);border-radius:99px;padding:.3rem .7rem;
}
.sv-perm{font-size:.75rem;color:var(--ink-faint);padding-left:.2rem}
.sv-gapflow{padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;font-size:.88rem}
.sv-gq{
  display:flex;align-items:center;gap:.8rem;color:var(--ink-dim);
  border:1px dashed rgba(232,163,61,.4);border-radius:12px;padding:.9rem 1.1rem;
}
.sv-gq span{
  flex:0 0 26px;height:26px;border-radius:50%;background:rgba(232,163,61,.15);
  color:var(--amber);display:grid;place-items:center;font-family:var(--font-d);font-style:italic;
}
.sv-arrow{color:var(--ink-faint);padding-left:1.2rem;font-size:.8rem}
.sv-form{
  color:var(--ink-dim);border:1px solid var(--line-strong);border-radius:12px;
  padding:.9rem 1.1rem;background:var(--bg-2);
}
.sv-form b{color:var(--ink)}
.sv-ok{
  color:var(--sage);border:1px solid rgba(143,165,130,.35);border-radius:12px;
  padding:.9rem 1.1rem;background:rgba(143,165,130,.06);
}
/* mockups más grandes en escritorio */
@media (min-width: 900px){
  .steps-visual{min-height:480px}
  .sv-bar{padding:.85rem 1.2rem}
  .sv-bar span{font-size:.82rem}
  .sv-msgs{padding:1.6rem;gap:1.1rem}
  .sv-msg{font-size:1rem}
  .sv-ava{flex-basis:30px;height:30px;font-size:.68rem}
  .sv-msg-tag{font-size:.85rem;padding:.45rem 1rem}
  .sv-doc{font-size:.85rem;padding:.55rem 1rem}
  .sv-chat{padding:1.6rem;gap:1.1rem}
  .sv-q{font-size:1rem;padding:.85rem 1.25rem}
  .sv-a{font-size:1rem;padding:1.2rem 1.4rem}
  .sv-src-chip{font-size:.8rem;padding:.38rem .85rem}
  .sv-perm{font-size:.85rem}
  .sv-gapflow{padding:1.7rem;gap:.8rem;font-size:1rem}
  .sv-gq{padding:1.05rem 1.25rem}
  .sv-form,.sv-ok{padding:1.05rem 1.25rem}
}

/* pasos apilados (pantallas estrechas) */
.steps-stacked .steps-progress{display:none}
.steps-stacked .steps-stage{display:block;min-height:0}
.steps-stacked .step-text{position:relative;margin:3.2rem 0 1.6rem}
.steps-stacked .sv{position:relative;inset:auto;margin-bottom:1rem}

/* ══════════ 03 grafo ══════════ */
.grafo{padding-left:0;padding-right:0}
.grafo-head{padding:0 var(--pad);margin-bottom:3rem}
.graph-wrap{
  position:relative;height:min(78vh, 760px);min-height:480px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:
    radial-gradient(90% 70% at 50% 30%, #121A0E 0%, #0A0E08 70%),
    var(--bg);
  overflow:hidden;
  cursor:grab;
}
.graph-wrap.dragging{cursor:grabbing}
.graph-wrap::before{ /* patrón orgánico sutil */
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%238FA582' stroke-width='1'%3E%3Cpath d='M20,400 C120,320 80,200 180,140 C260,90 300,60 340,10'/%3E%3Cpath d='M120,420 C200,340 180,260 260,200 C330,148 360,120 400,80'/%3E%3Cpath d='M-20,300 C60,240 40,160 120,100'/%3E%3C/g%3E%3C/svg%3E");
}
#graph-canvas{position:absolute;inset:0;width:100%;height:100%}
.graph-panel{
  position:absolute;z-index:5;width:min(300px, 78vw);
  background:rgba(14,19,10,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line-strong);border-radius:14px;
  padding:1.2rem 1.3rem 1.1rem;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
  opacity:0;transform:translateY(8px) scale(.97);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events:auto;
}
.graph-panel.visible{opacity:1;transform:none}
.gp-close{
  position:absolute;top:.5rem;right:.6rem;background:none;border:0;color:var(--ink-faint);
  font-size:1.2rem;cursor:pointer;line-height:1;padding:.3rem;
}
.gp-close:hover{color:var(--ink)}
.gp-type{
  display:inline-block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);border:1px solid rgba(232,163,61,.35);border-radius:99px;
  padding:.2rem .7rem;margin-bottom:.7rem;
}
.gp-title{font-family:var(--font-d);font-weight:400;font-size:1.15rem;line-height:1.2;margin-bottom:.9rem}
.gp-meta{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.9rem}
.gp-meta div{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem}
.gp-meta div[hidden]{display:none}
.gp-meta dt{color:var(--ink-faint);letter-spacing:.04em}
.gp-meta dd{color:var(--ink-dim);text-align:right}
.gp-estado-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.4rem;vertical-align:1px}
.gp-refs{display:flex;flex-wrap:wrap;gap:.4rem;border-top:1px solid var(--line);padding-top:.8rem}
.gp-refs-label{width:100%;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.1rem}
.gp-ref{
  font-size:.74rem;color:var(--sage);background:rgba(143,165,130,.08);
  border:1px solid rgba(143,165,130,.25);border-radius:99px;padding:.28rem .7rem;
  cursor:pointer;transition:all .25s;
  font-family:var(--font-t);
}
.gp-ref:hover{color:var(--amber-2);border-color:rgba(232,163,61,.4);background:rgba(232,163,61,.08)}
.graph-legend{
  position:absolute;left:var(--pad);bottom:1.2rem;z-index:4;
  display:flex;gap:1.2rem;flex-wrap:wrap;
  font-size:.75rem;letter-spacing:.05em;color:var(--ink-dim);
}
.graph-legend span{display:flex;align-items:center;gap:.45rem}
.lg-dot{width:9px;height:9px;border-radius:50%}
.lg-persona{background:#A9BC9B}
.lg-doc{background:#5C6F52}
.lg-conv{background:#C4B27A}
.lg-memo{background:#7A8C6B;outline:1px dashed rgba(246,242,233,.4);outline-offset:2px}
.lg-art{background:var(--amber)}
.lg-dept{background:transparent;outline:2px solid var(--sage);outline-offset:-1px}
.graph-hint{
  position:absolute;right:var(--pad);bottom:1.2rem;z-index:4;
  font-size:.73rem;letter-spacing:.06em;color:var(--ink-faint);
}
.grafo-head .h2{margin-bottom:2.4rem}
/* Nota al margen en el hueco que deja el h2 (max-width:20ch). Va con la
   tipografia display en cursiva de .grafo-foot para que lea como parte del
   texto de la seccion y no como un banner pegado. */
.grafo-aside{
  margin-top:2.6rem;max-width:36ch;
  border-left:1px solid var(--line-strong);padding-left:1.4rem;
}
.grafo-aside p{
  font-family:var(--font-d);font-style:italic;font-weight:350;
  font-size:1.05rem;line-height:1.5;color:var(--ink-dim);margin-bottom:1.1rem;
}
.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.86rem;letter-spacing:.06em;color:var(--amber-2);
  border-bottom:1px solid rgba(240,188,107,.3);padding-bottom:.15rem;
  transition:color .3s,border-color .3s;
}
.link-arrow span{transition:transform .3s var(--ease)}
.link-arrow:hover{border-color:var(--amber-2)}
.link-arrow:hover span{transform:translateX(4px)}
/* A partir de aqui el h2 ya no ocupa el ancho: la nota sube al hueco de su derecha. */
@media (min-width:1080px){
  .grafo-head{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,22rem);
    column-gap:clamp(2.5rem,6vw,6rem);align-items:start;
  }
  .grafo-head .eyebrow{grid-column:1 / -1}
  .grafo-aside{grid-column:2;grid-row:2 / span 2;align-self:end;margin-top:0}
}
.grafo-foot{
  padding:1.4rem var(--pad) 0;max-width:64ch;
  font-family:var(--font-d);font-style:italic;font-size:1.02rem;color:var(--ink-dim);
}

/* ══════════ 04 diferenciadores ══════════ */
.diff{background:var(--bg-2)}
#diferenciadores .h2{margin-bottom:3.5rem}
.diff-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.4rem;
}
/* 6 tarjetas + 1 ancha: columnas fijas para que las filas cierren siempre.
   auto-fit daba 5 columnas en monitores grandes y 3 muy estrechas en portátil al 125%. */
#diferenciadores .diff-grid{grid-template-columns:repeat(3,1fr)}
.dcard{
  border:1px solid var(--line);border-radius:16px;padding:2rem 1.8rem;
  background:linear-gradient(160deg, rgba(246,242,233,.025), transparent 55%);
  transition:border-color .4s, transform .4s var(--ease), box-shadow .4s;
  position:relative;
}
.dcard:hover{
  border-color:rgba(232,163,61,.4);transform:translateY(-4px);
  box-shadow:0 20px 50px -25px rgba(0,0,0,.7);
}
.dcard h3{
  font-family:var(--font-d);font-weight:400;font-size:1.3rem;
  margin-bottom:.8rem;letter-spacing:-.01em;
}
.dcard p{color:var(--ink-dim);font-size:.94rem}
.dcard-wide{grid-column:1 / -1;background:linear-gradient(120deg, rgba(232,163,61,.06), transparent 50%)}
.tag-opt{
  font-family:var(--font-t);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);border:1px solid rgba(232,163,61,.4);border-radius:99px;
  padding:.18rem .6rem;vertical-align:3px;margin-left:.5rem;
}
/* ojo: estas media queries van al final del bloque a propósito.
   Si van antes, las reglas base de abajo las pisan (misma especificidad, gana la última). */
@media (max-width:1200px){
  #diferenciadores .diff-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  #diferenciadores .h2{margin-bottom:2rem}
  #diferenciadores .diff-grid{grid-template-columns:1fr}
  .diff-grid{gap:1rem}
  .dcard{padding:1.6rem 1.4rem}
  .dcard h3{font-size:1.18rem}
}

/* ══════════ 05 faq ══════════ */
.faq .h2{margin-bottom:3.5rem}
.faq-list{max-width:760px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  background:none;border:0;color:var(--ink);text-align:left;cursor:pointer;
  font-family:var(--font-d);font-weight:380;font-size:clamp(1.05rem,1rem+.5vw,1.35rem);
  padding:1.5rem 0;transition:color .3s;
}
.faq-q:hover{color:var(--amber-2)}
.faq-ico{
  flex-shrink:0;width:34px;height:34px;border:1px solid var(--line-strong);border-radius:50%;
  position:relative;transition:transform .4s var(--ease), border-color .3s;
}
.faq-ico::before,.faq-ico::after{
  content:"";position:absolute;top:50%;left:50%;background:currentColor;
  transform:translate(-50%,-50%);
}
.faq-ico::before{width:12px;height:1px}
.faq-ico::after{width:1px;height:12px;transition:transform .35s var(--ease)}
.faq-item.open .faq-ico{transform:rotate(180deg);border-color:var(--amber)}
.faq-item.open .faq-ico::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease);
}
.faq-a > div{overflow:hidden}
.faq-a p{color:var(--ink-dim);padding-bottom:1.6rem;max-width:60ch;font-size:.96rem}

/* ══════════ 07 final ══════════ */
.final{
  position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
  background:radial-gradient(90% 90% at 50% 100%, #131B0E 0%, var(--bg) 65%);
}
#final-canvas{position:absolute;inset:0;width:100%;height:100%}
.final-inner{position:relative;z-index:2;max-width:52rem;display:flex;flex-direction:column;align-items:center}
.final-badge{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.6rem;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-2);
  border:1px solid rgba(232,163,61,.3);border-radius:99px;padding:.4rem 1rem;
  background:rgba(232,163,61,.06);
}
.final-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber);animation:pulseDot 2s var(--ease) infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.3}}
.final-title{
  font-family:var(--font-d);font-weight:340;
  font-size:clamp(2.6rem, 1.8rem + 5vw, 6rem);
  line-height:1.02;letter-spacing:-.015em;margin-bottom:1.6rem;
  font-variation-settings:"opsz" 144, "SOFT" 60;
}
.final-sub{color:var(--ink-dim);max-width:52ch;margin:0 auto 2.6rem}
.final-fine{margin-top:1.4rem;font-size:.8rem;letter-spacing:.05em;color:var(--ink-faint)}

/* ══════════ footer ══════════ */
.footer{
  border-top:1px solid var(--line);
  padding:clamp(3rem,6vh,4.5rem) var(--pad) 2rem;
}
.footer-top{
  display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:2.6rem 2rem;
  padding-bottom:clamp(2.4rem,5vh,3.4rem);
  border-bottom:1px solid var(--line);
}
.footer-col{display:flex;flex-direction:column;align-items:flex-start}
.footer-brand{display:flex;align-items:center;gap:.5rem;font-family:var(--font-d);font-size:1.1rem}
.footer-tag{margin-top:.9rem;max-width:32ch;font-size:.85rem;line-height:1.65;color:var(--ink-dim)}
.footer-tag a{color:var(--sage);border-bottom:1px solid rgba(143,165,130,.35);transition:color .3s,border-color .3s}
.footer-tag a:hover{color:var(--amber-2);border-color:rgba(232,163,61,.5)}
.footer-h{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.9rem;
}
/* padding vertical, no margin: da area tactil de 40px sin separar de mas en escritorio */
.footer-col a{font-size:.88rem;color:var(--ink-dim);padding:.45rem 0;transition:color .3s}
.footer-col a:hover{color:var(--amber-2)}
.footer-fine{font-size:.75rem;color:var(--ink-faint);margin-top:1.6rem}
@media (max-width:820px){
  .footer-top{grid-template-columns:repeat(3,1fr);gap:2.4rem 1.4rem}
  .footer-col-brand{grid-column:1 / -1}
  .footer-col a{padding:.6rem 0}
}
@media (max-width:520px){
  .footer-top{grid-template-columns:repeat(2,1fr)}
}

/* ══════════ responsive ══════════ */
@media (max-width: 900px){
  #hero-canvas{opacity:.5}
  .nav-links{display:none}
  .steps-stage{grid-template-columns:1fr;min-height:0;gap:2.5rem}
  .steps-visual{min-height:380px}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:2rem}
  .scroll-cue{display:none}
  .graph-hint{display:none}
}
@media (max-width: 640px){
  .graph-panel{
    left:0!important;right:0;bottom:0;top:auto!important;width:100%;
    border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0;
    transform:translateY(12px);
  }
  .graph-panel.visible{transform:none}
  .graph-legend{top:1rem;bottom:auto;left:1.25rem}
}
@media (max-width: 560px){
  .hero-ctas .btn{width:100%}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .ht-w,[data-split] .swi{transform:none!important}
  .hero-sub,.hero-ctas,.hero-foot{opacity:1!important}
  .manifesto .mw{opacity:1!important}
}

/* ══════════ blog ══════════ */
.nav-links a.on{color:var(--ink)}
.blog-main{padding:8.5rem var(--pad) clamp(5rem,10vh,8rem)}
.blog-wrap{max-width:52rem;margin:0 auto}
.blog-head{margin-bottom:4rem}
.blog-title{
  font-family:var(--font-d);font-weight:350;
  font-size:clamp(2.2rem, 1.6rem + 3vw, 4rem);
  line-height:1.06;letter-spacing:-.01em;
  font-variation-settings:"opsz" 100, "SOFT" 50;
  margin-bottom:1.2rem;
}
.blog-title em{color:var(--amber-2)}
.blog-intro{color:var(--ink-dim);max-width:58ch}

.post-list{border-top:1px solid var(--line)}
.post-row{display:block;padding:2.4rem 0;border-bottom:1px solid var(--line)}
.post-meta{
  display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:1rem;
}
.post-meta i{font-style:normal;color:var(--amber);font-size:.6rem}
.post-row h2{
  font-family:var(--font-d);font-weight:380;
  font-size:clamp(1.45rem, 1.2rem + 1.3vw, 2.1rem);
  line-height:1.16;letter-spacing:-.01em;margin-bottom:.8rem;
  transition:color .35s var(--ease);
}
.post-row:hover h2{color:var(--amber-2)}
.post-row p{color:var(--ink-dim);font-size:.98rem;max-width:65ch}
.post-more{
  display:inline-block;margin-top:1.2rem;font-size:.82rem;letter-spacing:.06em;
  color:var(--sage);transition:color .3s;
}
.post-row:hover .post-more{color:var(--amber-2)}

/* artículo */
.post{max-width:44rem;margin:0 auto}
.post-back{
  display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:2.6rem;transition:color .3s;
}
.post-back:hover{color:var(--amber-2)}
.post-head{margin-bottom:3rem;padding-bottom:2.4rem;border-bottom:1px solid var(--line)}
.post-title{
  font-family:var(--font-d);font-weight:350;
  font-size:clamp(2rem, 1.5rem + 2.6vw, 3.4rem);
  line-height:1.08;letter-spacing:-.012em;
  font-variation-settings:"opsz" 100, "SOFT" 50;
}
.post-title em{color:var(--amber-2)}
.post-author{margin-top:1rem;font-size:.9rem;color:var(--ink-dim)}
.post-author a{color:var(--sage);border-bottom:1px solid rgba(143,165,130,.35);transition:color .3s,border-color .3s}
.post-author a:hover{color:var(--amber-2);border-color:rgba(232,163,61,.5)}
.faq-a a{color:var(--sage);border-bottom:1px solid rgba(143,165,130,.35);transition:color .3s,border-color .3s}
.faq-a a:hover{color:var(--amber-2);border-color:rgba(232,163,61,.5)}
.post-body p{color:rgba(246,242,233,.82);margin-bottom:1.5rem;line-height:1.75}
.post-body h2{
  font-family:var(--font-d);font-weight:380;
  font-size:clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
  line-height:1.2;letter-spacing:-.01em;
  margin:2.6rem 0 1.1rem;
}
.post-body h2 em{color:var(--amber-2)}
.post-body a{color:var(--sage);border-bottom:1px solid rgba(143,165,130,.35);transition:color .3s,border-color .3s}
.post-body a:hover{color:var(--amber-2);border-color:rgba(232,163,61,.5)}
.post-body strong{font-weight:500}
.post-body ul,.post-body ol{margin:0 0 1.5rem 1.25rem;color:rgba(246,242,233,.82)}
.post-body li{margin-bottom:.7rem;line-height:1.7}
.post-body li::marker{color:var(--amber)}
.post-body blockquote{
  margin:2.2rem 0;padding:.3rem 0 .3rem 1.5rem;
  border-left:2px solid var(--amber);
  font-family:var(--font-d);font-style:italic;font-weight:350;
  font-size:1.18em;line-height:1.5;color:var(--ink);
}
.post-cta{
  margin-top:4.5rem;padding:clamp(1.8rem,4vw,2.8rem);
  border:1px solid var(--line-strong);border-radius:18px;
  background:linear-gradient(160deg,var(--bg-3),var(--bg-2));
  text-align:center;
}
.post-cta-kicker{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin-bottom:1rem}
.post-cta h2{
  font-family:var(--font-d);font-weight:360;
  font-size:clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  line-height:1.2;letter-spacing:-.01em;margin-bottom:.9rem;
}
.post-cta p{color:var(--ink-dim);max-width:46ch;margin:0 auto 1.8rem;font-size:.95rem}
.post-cta .btn + p{margin:1.4rem auto 0}

/* ══════════ precios ══════════ */
.pricing-wrap{max-width:64rem;margin:0 auto}
.plan{display:flex;flex-direction:column;align-items:flex-start}
.plan-tag{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);border:1px solid rgba(232,163,61,.4);border-radius:99px;
  padding:.18rem .6rem;margin-bottom:1rem;
}
.plan-featured{border-color:rgba(232,163,61,.5);background:linear-gradient(160deg, rgba(232,163,61,.07), transparent 55%)}
.plan-for{color:var(--ink-dim);font-size:.9rem;margin-bottom:1.6rem}
.plan-price{font-family:var(--font-d);font-weight:380;font-size:2.6rem;line-height:1;margin-bottom:1.6rem;letter-spacing:-.01em}
.plan-price span{font-family:var(--font-t);font-weight:300;font-size:.95rem;color:var(--ink-faint);letter-spacing:0}
.plan-list{list-style:none;margin-bottom:2rem;display:flex;flex-direction:column;gap:.55rem;color:var(--ink-dim);font-size:.94rem}
.plan-list li{padding-left:1.2rem;position:relative}
.plan-list li::before{content:"✓";position:absolute;left:0;color:var(--amber)}
.plan .btn{margin-top:auto;width:100%}
.pricing-note{margin:2.2rem auto 0;max-width:52ch;text-align:center;font-size:.88rem;color:var(--ink-faint)}
.pricing-includes{margin-top:clamp(4rem,8vh,6rem)}
.includes{list-style:none;columns:2;column-gap:2.5rem;color:var(--ink-dim);font-size:.95rem}
.includes li{break-inside:avoid;margin-bottom:.7rem;padding-left:1.2rem;position:relative}
.includes li::before{content:"✓";position:absolute;left:0;color:var(--amber)}
@media (max-width:700px){.includes{columns:1}}
.pricing-fine{margin-top:1.4rem;font-size:.78rem;letter-spacing:.03em;color:var(--ink-faint)}
.final-ctas{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* ══════════ desplegable del lead magnet ══════════ */
/* <dialog> nativo: el oscurecido, el ESC y el foco los pone el navegador */
.pop{
  width:min(92vw,31rem);padding:0;text-align:center;
  margin:auto;overflow:auto; /* el reset * {margin:0} se carga el centrado del UA */
  background:var(--bg-2);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:20px;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.8);
  /* entra despues del fondo y mas despacio que el: sube, no salta */
  transition:opacity .8s var(--ease) .12s, transform .8s var(--ease) .12s;
}
.pop::backdrop{
  background:rgba(6,9,5,.74);backdrop-filter:blur(4px);
  transition:background .65s var(--ease), backdrop-filter .65s var(--ease);
}
/* animacion de entrada sin JS: el estado del que parte al pasar a display:block */
@starting-style{
  .pop[open]{opacity:0;transform:translateY(22px) scale(.985)}
  .pop[open]::backdrop{background:transparent;backdrop-filter:blur(0)}
}
.pop-in{padding:2.6rem 2.2rem 2.1rem;position:relative}
.pop .eyebrow{justify-content:center;margin-bottom:1.4rem}
.pop-t{
  font-family:var(--font-d);font-weight:350;line-height:1.15;letter-spacing:-.01em;
  font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
}
.pop-t em{font-style:italic;color:var(--amber-2)}
.pop-p{color:var(--ink-dim);font-size:.95rem;margin:1rem auto 1.8rem;max-width:38ch}
.pop-fine{font-size:.78rem;letter-spacing:.03em;color:var(--ink-faint);margin-top:1.2rem}
.pop-x{
  position:absolute;top:1rem;right:1rem;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  background:transparent;border:1px solid var(--line);color:var(--ink-faint);
  cursor:pointer;transition:color .3s var(--ease), border-color .3s var(--ease);
}
.pop-x:hover{color:var(--ink);border-color:var(--line-strong)}
@media (prefers-reduced-motion:reduce){
  .pop,.pop::backdrop{transition:none}
  .pop::backdrop{backdrop-filter:none}
}