/* ============================================================
   BIBLIOTECA SAVIA BUSINESS — chasis compartido
   Una sola hoja. Cada demo de industria solo cambia:
   (1) el acento --ac* en su propio :root,  (2) el vocabulario,
   (3) los guiones de WhatsApp,  (4) las cifras del tablero.
   Verde de la casa = --accent (#4DDE9C). NO incluye precios.
   ============================================================ */
:root{
  --bg-deep:#08090C; --bg:#0C0E12; --surface:#14171D; --surface-2:#1B1F27;
  --border:#282D38; --border-2:#3A4150;
  --text:#F2F0EC; --text-2:#A6ABB6; --text-3:#686E7B;
  /* verde de la casa SAVIA */
  --accent:#4DDE9C; --accent-bright:#95F5C6; --accent-deep:#34B87C;
  --accent-soft:rgba(77,222,156,0.10); --accent-glow:rgba(77,222,156,0.28);
  /* acento de industria (lo sobreescribe cada página) */
  --ac:#4F9CF0; --ac-bright:#86BEF7; --ac-deep:#2C6BB3;
  --ac-soft:rgba(79,156,240,0.12); --ac-glow:rgba(79,156,240,0.30);
  /* whatsapp */
  --wa-bg:#0B141A; --wa-in:#1F2C34; --wa-out:#005C4B; --wa-text:#E9EDEF; --wa-meta:#8696A0;
  --ease:cubic-bezier(0.32,0.72,0,1);
  --radius:14px; --radius-lg:22px; --radius-xl:30px;
  --shadow-md:0 2px 4px rgba(0,0,0,.30),0 16px 40px rgba(0,0,0,.40);
  --shadow-lg:0 4px 8px rgba(0,0,0,.32),0 40px 90px rgba(0,0,0,.55);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg-deep);color:var(--text);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.deck{height:100vh;overflow-y:auto;scroll-snap-type:y mandatory}
section{min-height:100vh;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:72px 24px;position:relative;overflow:hidden}
.wrap{width:100%;max-width:1080px;margin:0 auto;position:relative;z-index:2}
h1,h2,h3,.serif{font-family:'Fraunces',serif;letter-spacing:-0.02em}
h2{font-size:clamp(30px,4.4vw,52px);font-weight:600;line-height:1.12;margin-bottom:18px}
.lead{font-size:clamp(16px,1.9vw,20px);color:var(--text-2);line-height:1.65;max-width:660px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--ac);margin-bottom:20px}
.kicker.green{color:var(--accent)}
.kicker::before{content:'';width:22px;height:1px;background:currentColor;opacity:.7}

.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.glow.ac{background:var(--ac-glow);width:480px;height:480px;opacity:.45}
.glow.sav{background:var(--accent-glow);width:480px;height:480px;opacity:.42}

.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.on{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* portada */
.hero{text-align:center}
.feat{display:flex;align-items:baseline;justify-content:center;gap:clamp(12px,2.4vw,24px);flex-wrap:wrap;margin-bottom:26px}
.wm{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(32px,6vw,68px);line-height:1;letter-spacing:-0.03em}
.wm .ac{background:linear-gradient(135deg,var(--ac-bright),var(--ac-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.wm .v{background:linear-gradient(135deg,var(--accent-bright),var(--accent-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.feat .x{font-family:'Fraunces',serif;font-size:clamp(18px,2.6vw,30px);color:var(--text-3)}
.hero-tag{font-family:'Fraunces',serif;font-size:clamp(20px,3.2vw,32px);font-weight:500;color:var(--text);margin-bottom:16px}
.hero-tag em{font-style:italic;color:var(--ac-bright)}
.hero .lead{margin:0 auto 38px}
.rings{width:168px;height:168px;margin:0 auto 34px;position:relative;filter:drop-shadow(0 0 60px var(--ac-glow));animation:hbeat 1.7s ease-in-out infinite}
.rings svg{display:block}
.rings .rg{transform-box:fill-box;transform-origin:center}
.rings .r1{animation:spin 14s linear infinite}
.rings .r2{animation:spin 10s linear infinite reverse}
.rings .r3{animation:spin 7s linear infinite}
.rings .core{filter:drop-shadow(0 0 10px var(--ac-glow))}
@keyframes hbeat{0%,100%{transform:scale(1)}9%{transform:scale(1.05)}18%{transform:scale(1)}27%{transform:scale(1.035)}40%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:var(--text-3);font-size:12px;letter-spacing:.12em;text-transform:uppercase;animation:hint 2.4s ease-in-out infinite}
@keyframes hint{0%,100%{opacity:.45;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,6px)}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:42px}
.stat{background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 26px;box-shadow:var(--shadow-md)}
.stat .n{font-family:'Fraunces',serif;font-size:clamp(34px,4.4vw,52px);font-weight:600;line-height:1;margin-bottom:10px}
.stat .n.ac{color:var(--ac-bright)} .stat .n.green{color:var(--accent)} .stat .n.dim{color:var(--text-3)}
.stat p{font-size:14px;color:var(--text-2);line-height:1.5}
.foot-note{margin-top:26px;font-size:12.5px;color:var(--text-3)}

/* cards */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:42px}
.card{background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 28px;box-shadow:var(--shadow-md);transition:transform .45s var(--ease),border-color .45s var(--ease)}
.card:hover{transform:translateY(-5px);border-color:var(--border-2)}
.card .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:18px;background:var(--ac-soft);border:1px solid var(--ac-glow)}
.card .ic.green{background:var(--accent-soft);border-color:rgba(77,222,156,.25)}
.card h3{font-size:21px;font-weight:600;margin-bottom:10px}
.card p{font-size:14.5px;color:var(--text-2);line-height:1.62}
.card p strong{color:var(--text);font-weight:600}

/* tabla comparativa */
.ctable-wrap{margin-top:38px;overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-md)}
table.ctable{width:100%;border-collapse:collapse;min-width:680px;background:linear-gradient(165deg,var(--surface-2),var(--surface))}
.ctable th,.ctable td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:14px}
.ctable thead th{font-family:'Fraunces',serif;font-size:15px;font-weight:600;color:var(--text);background:rgba(0,0,0,.22);position:sticky;top:0}
.ctable thead th.us{color:var(--accent)}
.ctable thead th.chain{color:var(--text-2)}
.ctable td:first-child,.ctable th:first-child{color:var(--text);font-weight:500}
.ctable tbody tr:last-child td{border-bottom:none}
.ctable tbody tr:hover{background:rgba(255,255,255,.02)}
.mk{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:13px;font-weight:700}
.mk.y{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(77,222,156,.3)}
.mk.n{background:var(--ac-soft);color:var(--ac);border:1px solid var(--ac-glow)}
.mk.m{background:rgba(229,180,90,.12);color:#E5B45A;border:1px solid rgba(229,180,90,.3)}
.ctd{font-size:12.5px;color:var(--text-3);display:block;margin-top:3px}
.col-us{background:rgba(77,222,156,.045)}

/* phone / chat */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:8px}
@media(max-width:880px){.duo{grid-template-columns:1fr;gap:36px}}
.phone{width:min(360px,92vw);margin:0 auto;background:var(--wa-bg);border:1px solid var(--border-2);border-radius:34px;overflow:hidden;box-shadow:var(--shadow-lg)}
.phone-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--wa-in);border-bottom:1px solid rgba(255,255,255,.05)}
.avatar{width:38px;height:38px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 32%,var(--ac-bright),var(--ac-deep));display:flex;align-items:center;justify-content:center;font-size:17px}
.avatar.green{background:radial-gradient(circle at 35% 32%,var(--accent-bright),var(--accent-deep))}
.phone-head .who{flex:1;min-width:0}
.phone-head .who b{display:block;font-size:14.5px;color:var(--wa-text);font-weight:600}
.phone-head .who span{font-size:12px;color:var(--accent)}
.chat{padding:18px 14px 20px;display:flex;flex-direction:column;gap:9px;min-height:330px}
.msg{max-width:84%;padding:9px 13px;border-radius:12px;font-size:13.8px;line-height:1.5;color:var(--wa-text);opacity:0;transform:translateY(14px) scale(.97);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.msg.show{opacity:1;transform:none}
.msg.in{background:var(--wa-in);align-self:flex-start;border-top-left-radius:4px}
.msg.out{background:var(--wa-out);align-self:flex-end;border-top-right-radius:4px}
.msg .t{display:block;font-size:10.5px;color:var(--wa-meta);text-align:right;margin-top:4px}
.msg.sys{align-self:center;max-width:92%;background:rgba(77,222,156,.08);border:1px solid rgba(77,222,156,.25);color:var(--accent-bright);font-size:12px;text-align:center;border-radius:10px}
.demo-tag{display:inline-block;margin-top:18px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--border);border-radius:999px;padding:5px 14px}
.side h2{margin-bottom:16px}
.side .pts{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.pt{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;color:var(--text-2);line-height:1.55}
.pt::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:7px;box-shadow:0 0 10px var(--accent-glow)}
.pt.ac::before{background:var(--ac);box-shadow:0 0 10px var(--ac-glow)}
.pt strong{color:var(--text)}

/* reviews flow */
.flow{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
@media(max-width:760px){.flow{grid-template-columns:1fr}}
.branch{border-radius:var(--radius-lg);padding:28px 26px;background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--border);box-shadow:var(--shadow-md)}
.branch.good{border-top:2px solid var(--accent)}
.branch.bad{border-top:2px solid var(--ac)}
.branch h3{font-size:18px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.bubble{background:var(--wa-in);border-radius:11px;padding:9px 13px;font-size:13.5px;color:var(--wa-text);margin-bottom:9px;line-height:1.5;max-width:94%}
.bubble.me{background:var(--wa-out);margin-left:auto}
.result{margin-top:16px;padding:13px 16px;border-radius:var(--radius);font-size:13.5px;line-height:1.55}
.result.good{background:var(--accent-soft);border:1px solid rgba(77,222,156,.3);color:var(--accent-bright)}
.result.bad{background:var(--ac-soft);border:1px solid var(--ac-glow);color:var(--ac-bright)}
.stars{color:#FFC76B;letter-spacing:3px;font-size:15px}

/* tablero */
.dash{border-radius:var(--radius-xl);padding:30px;background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.dash-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:10px}
.dash-head .serif{font-size:20px;font-weight:600}
.badge{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--border);border-radius:999px;padding:4px 11px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.dcell{background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px}
.dcell .lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.dcell .val{font-family:'Fraunces',serif;font-size:25px;font-weight:600}
.dcell .val.green{color:var(--accent)} .dcell .val.ac{color:var(--ac-bright)}
.dcell .sub{font-size:12px;color:var(--text-2);margin-top:5px}
.dcell .sub.up{color:var(--accent)}
.ring{display:flex;align-items:center;gap:16px}
.ring svg{flex:none}
.barrow{display:flex;align-items:center;gap:10px;margin-top:9px}
.barrow .bl{font-size:12.5px;color:var(--text-2);width:120px;flex:none}
.barrow .bar{height:7px;border-radius:99px;background:linear-gradient(90deg,var(--accent-deep),var(--accent));box-shadow:0 0 10px var(--accent-glow)}
.barrow .pv{font-size:12px;color:var(--text-3)}

/* roadmap */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:42px;counter-reset:step}
.step{position:relative;border-radius:var(--radius-lg);padding:30px 26px 26px;background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--border);box-shadow:var(--shadow-md)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:24px;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#06120C;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 18px var(--accent-glow)}
.step .when{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ac);margin-bottom:10px;font-weight:600}
.step h3{font-size:19px;margin-bottom:12px}
.step ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.step li{font-size:13.8px;color:var(--text-2);line-height:1.5;padding-left:18px;position:relative}
.step li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent-deep)}

/* línea roja / nota de confianza */
.redline{margin-top:34px;border-radius:var(--radius-lg);padding:24px 26px;background:var(--accent-soft);border:1px solid rgba(77,222,156,.3);box-shadow:var(--shadow-md)}
.redline h3{font-size:18px;margin-bottom:8px;color:var(--accent-bright)}
.redline p{font-size:14.5px;color:var(--text-2);line-height:1.6}
.redline p strong{color:var(--text)}

/* calculadora */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:36px}
@media(max-width:880px){.calc-grid{grid-template-columns:1fr;gap:28px}}
.calc-inputs{display:flex;flex-direction:column;gap:18px}
.field label{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--text-2);margin-bottom:8px;gap:12px}
.field label b{font-family:'Fraunces',serif;font-size:18px;color:var(--text);font-weight:600;white-space:nowrap}
.field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:var(--surface-2);outline:none;border:1px solid var(--border)}
.field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--accent-bright),var(--accent-deep));box-shadow:0 0 12px var(--accent-glow);cursor:pointer;border:2px solid var(--bg)}
.field input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent-glow);cursor:pointer;border:2px solid var(--bg)}
.field .hint{font-size:11.5px;color:var(--text-3);margin-top:6px;line-height:1.4}
.calc-out{display:flex;flex-direction:column;gap:13px}
.out-card{background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:var(--radius-lg);padding:17px 20px}
.out-card .lbl{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:7px}
.out-card .num{font-family:'Fraunces',serif;font-size:26px;font-weight:600;line-height:1}
.out-card .num.green{color:var(--accent)} .out-card .num.ac{color:var(--ac-bright)}
.out-card .note{font-size:12.5px;color:var(--text-2);margin-top:7px;line-height:1.5}
.verdict{margin-top:2px;padding:20px 22px;border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(77,222,156,.14),var(--ac-soft));border:1px solid rgba(77,222,156,.35);box-shadow:var(--shadow-md)}
.verdict .vt{font-family:'Fraunces',serif;font-size:18.5px;font-weight:500;line-height:1.4;color:var(--text)}
.verdict .vt b{color:var(--accent-bright);font-weight:600}
.verdict .vt b.ac{color:var(--ac-bright)}
.calc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.calc-actions button{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;border-radius:999px;padding:11px 20px;border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);transition:all .3s var(--ease)}
.calc-actions button:hover{border-color:var(--accent);color:var(--accent-bright)}
.calc-actions button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#06120C;border:none;box-shadow:0 0 22px var(--accent-glow)}
.calc-disclaimer{font-size:11.5px;color:var(--text-3);margin-top:14px;line-height:1.5}

/* cierre */
.close{text-align:center}
.close h2{font-size:clamp(30px,4.6vw,54px);max-width:900px;margin:0 auto 22px}
.close h2 em{font-style:italic;color:var(--ac-bright)}
.close .lead{margin:0 auto 40px}
.cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#06120C;font-weight:700;font-size:16px;text-decoration:none;padding:16px 34px;border-radius:999px;box-shadow:0 0 34px var(--accent-glow);transition:transform .4s var(--ease)}
.cta:hover{transform:translateY(-3px)}
.brandfoot{margin-top:54px;color:var(--text-3);font-size:13px}
.brandfoot .wm{font-size:26px}

/* nav dots */
.dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:50}
.dots a{width:8px;height:8px;border-radius:50%;background:var(--border-2);transition:all .35s var(--ease)}
.dots a.on{background:var(--accent);box-shadow:0 0 10px var(--accent-glow);transform:scale(1.3)}
@media(max-width:760px){.dots{display:none}}

@media print{
  @page{size:1280px 880px;margin:0}
  html,body{background:#08090C;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .deck{height:auto;overflow:visible;scroll-snap-type:none}
  section{min-height:880px;height:880px;page-break-after:always;page-break-inside:avoid;padding:56px 60px;overflow:hidden}
  .dots,.scroll-hint,.calc-actions{display:none!important}
  .rv{opacity:1!important;transform:none!important}
  .msg{opacity:1!important;transform:none!important}
  .rings,.rings .rg{animation:none!important}
  .wm .ac{background:none!important;-webkit-text-fill-color:var(--ac-bright);color:var(--ac-bright)}
  .wm .v{background:none!important;-webkit-text-fill-color:var(--accent);color:var(--accent)}
  .ctable-wrap{overflow:visible}
  table.ctable{min-width:0}
}