:root{
  --bg:#fbfcfe; --surface:#ffffff; --ink:#04121e; --navy:#00234b; --ink2:#4c5c74; --ink3:#8a96b0;
  --line:#e2e8f2; --mint:#12c48b; --mint-deep:#0da075; --mint-soft:#e3f8f0;
  --blue:#3898ff; --blue-soft:#e8f2ff;
  --bad:#c0392b; --bad-soft:#fbeae7; --warn:#b4740a; --warn-soft:#fdf3e0;
  --grid:#edf1f8;
  --shadow:0 1px 2px rgba(4,18,30,.05),0 10px 30px -14px rgba(0,35,75,.18);
  --logo-ink:#0f2055;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#070d1c; --surface:#0e1729; --ink:#eaeff8; --navy:#c9d9f2; --ink2:#9fadc6; --ink3:#6c7b96;
    --line:#1d2a44; --mint:#2fe0ab; --mint-deep:#5ceabf; --mint-soft:#0d2b23;
    --blue:#6cb4ff; --blue-soft:#0e2140;
    --bad:#e6786d; --bad-soft:#391f1c; --warn:#e0a944; --warn-soft:#33260d;
    --grid:#16213a;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px -14px rgba(0,0,0,.6);
    --logo-ink:#ffffff;
  }
}
:root[data-theme="dark"]{
  --bg:#070d1c; --surface:#0e1729; --ink:#eaeff8; --navy:#c9d9f2; --ink2:#9fadc6; --ink3:#6c7b96;
  --line:#1d2a44; --mint:#2fe0ab; --mint-deep:#5ceabf; --mint-soft:#0d2b23;
  --blue:#6cb4ff; --blue-soft:#0e2140; --bad:#e6786d; --bad-soft:#391f1c;
  --warn:#e0a944; --warn-soft:#33260d; --grid:#16213a; --logo-ink:#ffffff;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px -14px rgba(0,0,0,.6);
}
.brandbar svg path[fill="#0f2055"]{ fill:var(--logo-ink) }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv05"; overflow-x:hidden}
.wrap{max-width:960px; margin:0 auto; padding:44px 20px 80px}
.mono{font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
a{color:var(--mint-deep); text-decoration-thickness:1px; text-underline-offset:2px}

/* cabecera */
.brandbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:40px}
.brandbar svg{height:32px; width:auto; display:block; max-width:100%}
.prep{font-size:12px; color:var(--ink3); text-align:right; line-height:1.5}
.prep b{color:var(--ink2); font-weight:650}
@media(max-width:520px){ .prep{text-align:left} }

.eyebrow{font-size:11px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--mint-deep); margin:0 0 14px}
h1{font-size:clamp(27px,4.4vw,41px); line-height:1.12; letter-spacing:-.025em; font-weight:700;
   margin:0 0 18px; color:var(--navy); text-wrap:balance; max-width:27ch}
.lede{font-size:17.5px; color:var(--ink2); max-width:64ch; margin:0}
.anchor{margin:28px 0 0; padding:18px 22px; background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--mint); border-radius:10px; box-shadow:var(--shadow);
  font-size:16px; font-weight:560; color:var(--navy); max-width:68ch; line-height:1.55}
.anchor b{font-weight:730}
.anchor .fuente{display:block; margin-top:9px; font-size:12.5px; font-weight:500; color:var(--ink3); font-variant-numeric:tabular-nums}

section{margin-top:72px}
.sec-eyebrow{font-size:11px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:var(--mint-deep); margin:0 0 9px}
h2{font-size:clamp(22px,3vw,32px); line-height:1.2; letter-spacing:-.02em; font-weight:700; margin:0 0 10px; color:var(--navy); text-wrap:balance; max-width:30ch}
h3{font-size:16px; letter-spacing:-.01em; font-weight:680; color:var(--navy); margin:0 0 5px}
.sec-intro{color:var(--ink2); max-width:66ch; margin:0 0 26px; font-size:16.5px}
p.nota{font-size:13.5px; color:var(--ink3); max-width:72ch; margin:14px 0 0; line-height:1.55}

/* tarjeta de gráfica */
.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:24px 24px 20px; overflow:hidden}
.card + .card{margin-top:14px}
.card-top{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.card-top .t{font-size:14.5px; font-weight:680; color:var(--navy); letter-spacing:-.01em}
.card-top .s{font-size:12.5px; color:var(--ink3)}
.leyenda{display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; font-size:12.5px; color:var(--ink2)}
.leyenda i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.leyenda i.ln{height:2px; border-radius:2px; width:14px; vertical-align:3px}

/* kpis */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin:0 0 20px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:17px 18px; box-shadow:var(--shadow)}
.kpi .v{font-size:clamp(24px,3.4vw,31px); font-weight:720; color:var(--navy); letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; display:block}
.kpi .k{font-size:12.5px; color:var(--ink2); margin-top:7px; line-height:1.4}
.kpi.ac .v{color:var(--mint-deep)}
.kpi.al{border-left:3px solid var(--warn)}

/* tabla */
.tabla{width:100%; border-collapse:collapse; font-size:14px}
.tabla th{text-align:right; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); font-weight:700; padding:0 0 10px; border-bottom:1px solid var(--line)}
.tabla th:first-child{text-align:left}
.tabla td{padding:11px 0; border-bottom:1px solid var(--grid); text-align:right; font-variant-numeric:tabular-nums; color:var(--ink2)}
.tabla td:first-child{text-align:left; color:var(--ink); font-weight:600}
.tabla tr:last-child td{border-bottom:0}
.tabla tr.sirve td{color:var(--mint-deep)}
.tabla tr.sirve td:first-child{color:var(--mint-deep)}
.tabla tr.pierde td{color:var(--bad)}
.tabla tr.pierde td:first-child{color:var(--bad)}
.tabla .b{font-weight:700; color:var(--navy)}
.scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* pasos */
.pasos{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.pasos .it{display:grid; grid-template-columns:96px 1fr; gap:18px; padding:20px 24px; border-bottom:1px solid var(--line); align-items:start}
.pasos .it:last-child{border-bottom:0}
.pasos .cuando{font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--mint-deep); padding-top:3px; line-height:1.4}
.pasos .it p{margin:0; font-size:14.5px; color:var(--ink2); line-height:1.55; max-width:62ch}
@media(max-width:560px){ .pasos .it{grid-template-columns:1fr; gap:7px} }

/* alcance */
.alcance{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:700px){ .alcance{grid-template-columns:1fr} }
.col{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:22px 24px}
.col .rol{font-size:11px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; color:var(--mint-deep); margin-bottom:12px}
.col.b .rol{color:var(--blue)}
.col ul{margin:0; padding:0; list-style:none}
.col li{position:relative; padding:0 0 11px 20px; font-size:14.3px; color:var(--ink2); line-height:1.5}
.col li:last-child{padding-bottom:0}
.col li::before{content:""; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:2px; background:var(--mint)}
.col.b li::before{background:var(--blue)}
.col li b{color:var(--navy); font-weight:650}
.fuera{margin-top:14px; padding:16px 20px; border:1px dashed var(--line); border-radius:12px; font-size:13.5px; color:var(--ink3); line-height:1.55}
.fuera b{color:var(--ink2)}

/* precio */
.precio{background:var(--surface); border:2px solid var(--mint); border-radius:16px; box-shadow:var(--shadow); padding:30px 32px}
.precio .plan{font-size:11px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--mint-deep)}
.precio .monto{font-size:clamp(38px,6.5vw,58px); font-weight:730; color:var(--navy); letter-spacing:-.035em; line-height:1; margin:12px 0 4px; font-variant-numeric:tabular-nums}
.precio .monto small{font-size:.38em; font-weight:620; letter-spacing:-.01em; color:var(--ink2)}
.precio .sub{font-size:15px; color:var(--ink2); max-width:56ch; margin:10px 0 0}
.precio hr{border:0; border-top:1px solid var(--line); margin:22px 0}
.precio .linea{display:flex; justify-content:space-between; gap:16px; font-size:14.5px; padding:7px 0; color:var(--ink2); flex-wrap:wrap}
.precio .linea b{color:var(--navy); font-weight:650; font-variant-numeric:tabular-nums}
.sin{margin-top:14px; padding:16px 20px; background:var(--mint-soft); border-radius:12px; font-size:14px; color:var(--navy); line-height:1.55}
.sin b{font-weight:730}

/* salida */
.regla{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--warn); border-radius:12px; box-shadow:var(--shadow); padding:22px 24px; margin-top:14px}
.regla p{margin:0; color:var(--ink2); font-size:15px; max-width:68ch; line-height:1.6}
.regla b{color:var(--navy)}

/* pendientes */
.pend{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.pend .p{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow)}
.pend .p .q{font-size:23px; font-weight:720; color:var(--warn); letter-spacing:-.025em; font-variant-numeric:tabular-nums; display:block}
.pend .p .d{font-size:13.5px; color:var(--ink2); margin-top:6px; line-height:1.5}

footer{margin-top:80px; padding-top:28px; border-top:1px solid var(--line); font-size:13px; color:var(--ink3); line-height:1.6}
footer b{color:var(--ink2)}

/* revelado al hacer scroll */
.rv{opacity:0; transform:translateY(14px); transition:opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1)}
.rv.on{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

/* svg */
svg.g{display:block; width:100%; height:auto; overflow:visible}
svg.g .eje{stroke:var(--grid); stroke-width:1}
svg.g .et{fill:var(--ink3); font-size:11.5px; font-variant-numeric:tabular-nums}
svg.g .et.v{fill:var(--navy); font-weight:700; font-size:12.5px}
svg.g .barra{fill:var(--mint); transition:none}
svg.g .linea{fill:none; stroke:var(--navy); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
svg.g .punto{fill:var(--surface); stroke:var(--navy); stroke-width:2}