/* Sesión de inversión · estilos del deck (lienzo 1920×1080 que escala a cualquier pantalla) */
@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk-Regular.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk-Medium.woff2') format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk-Bold.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Google Sans Flex';src:url('fonts/GoogleSansFlex_36pt-Regular.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Google Sans Flex';src:url('fonts/GoogleSansFlex_36pt-Medium.woff2') format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'Google Sans Flex';src:url('fonts/GoogleSansFlex_36pt-SemiBold.woff2') format('woff2');font-weight:600;font-display:block}
@font-face{font-family:'Google Sans Flex';src:url('fonts/GoogleSansFlex_36pt-Bold.woff2') format('woff2');font-weight:700;font-display:block}

:root{
  --ink:#121212; --ink-2:#44433e; --ink-3:#6c6b65;
  --paper:#fff; --paper-2:#f3f2ee; --paper-3:#e8e7e1;
  --line:rgba(18,18,18,.14);
  --green:#0a8754; --green-soft:#e1f1e8;
  --red:#d92d20; --red-soft:#fbe7e4;
  --disp:'Space Grotesk','Google Sans Flex',system-ui,sans-serif;
  --sans:'Google Sans Flex',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  /* la cuadrícula punteada: líneas de puntos cada 60px */
  --grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 3H60M3 0V60' fill='none' stroke='%23121212' stroke-opacity='.3' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='0 6'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink)}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
p,ul,ol{margin:0}
:focus{outline:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:10px}

/* ───────── escenario ───────── */
.stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--s,.5));overflow:hidden;
  touch-action:pan-y pinch-zoom} /* sin esto el navegador se queda con el gesto horizontal y el deslizar nunca llega */
.slide{position:absolute;inset:0;isolation:isolate;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.slide.active{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.paper{position:absolute;z-index:-1;pointer-events:none;background-image:var(--grid);background-size:60px 60px;
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)}
.top{position:absolute;left:120px;right:120px;top:54px;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--disp);font-size:20px}
.top .b{font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.top .c{font-weight:500}
.bar{position:absolute;left:0;bottom:0;height:5px;background:var(--green);transition:width .6s var(--ease);z-index:5}

/* ───────── tipografía y piezas comunes ───────── */
h1{font-family:var(--disp);font-weight:700;font-size:108px;line-height:.97;letter-spacing:-.045em;margin:0}
h1.xl{font-size:176px;line-height:.9;letter-spacing:-.052em}
h2{font-family:var(--disp);font-weight:700;font-size:56px;line-height:1.04;letter-spacing:-.03em;margin:0}
h3{font-family:var(--disp);font-weight:700;font-size:34px;letter-spacing:-.02em;margin:0}
.lead{font-size:38px;line-height:1.38;margin-top:30px}
.k{font-size:26px;line-height:1.35;color:var(--ink-2)}
.src{font-size:19px;line-height:1.45;color:var(--ink-3)}
.num{font-family:var(--disp);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.money .c{font-size:.52em;vertical-align:.6em;margin-right:.03em;letter-spacing:0}
.money .u{font-size:.2em;font-weight:500;letter-spacing:.08em;margin-left:.35em;vertical-align:.25em}
.g{color:var(--green)} .r{color:var(--red)}
.hl{background:linear-gradient(transparent 62%,var(--green-soft) 62%)}
.slide .l{position:absolute;left:120px;top:160px}

[data-f]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-f].in{opacity:1;transform:none}

.chips{display:flex;gap:12px;flex-wrap:wrap}
.chip{background:var(--paper-2);padding:14px 26px;border-radius:999px;font-family:var(--disp);font-weight:700;font-size:26px;transition:background .2s,color .2s}
.chip:hover{background:var(--paper-3)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}

.ctl{margin-top:40px}
.ctl .v{font-size:72px;line-height:1;margin:10px 0 14px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:40px;background:transparent;cursor:pointer;margin:0;display:block}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(var(--ink),var(--ink)) 0/var(--p,50%) 100% no-repeat,var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:var(--ink);margin-top:-14px;box-shadow:0 0 0 6px #fff}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--line)}
input[type=range]::-moz-range-progress{height:6px;border-radius:3px;background:var(--ink)}
input[type=range]::-moz-range-thumb{width:34px;height:34px;border:0;border-radius:50%;background:var(--ink)}

/* gráficas SVG comunes */
.chart-svg{position:absolute;inset:0;overflow:visible}
.chart-svg .gl{stroke:var(--line);stroke-width:1.5;stroke-dasharray:3 7}
.chart-svg .tl,.chart-svg .tx{font:500 19px var(--sans);fill:var(--ink-3)}
.chart-svg .lab{font:700 24px var(--disp);letter-spacing:-.02em}
.dot{opacity:0;transition:opacity .45s}
.dot.on{opacity:1}
.tagx{position:absolute;left:var(--x);top:var(--y);white-space:nowrap;pointer-events:none}
.tagx .v{font-family:var(--disp);font-weight:700;font-size:46px;letter-spacing:-.03em;line-height:1}
.tagx .k{font-size:22px;margin-top:4px}
.tagx.up{transform:translate(-50%,calc(-100% - 20px))}
.tagx.up.in{transform:translate(-50%,calc(-100% - 20px))}
.tagx.dn{transform:translate(-50%,22px)}
.tagx.dn.in{transform:translate(-50%,22px)}
.tagx.rt{transform:translate(calc(-100% + 20px),calc(-100% - 20px));text-align:right}
.tagx.rt.in{transform:translate(calc(-100% + 20px),calc(-100% - 20px))}
.tagx.lf{transform:translate(-20px,calc(-100% - 20px))}
.tagx.lf.in{transform:translate(-20px,calc(-100% - 20px))}

/* ═════════ 1 · portada ═════════ */
.s-cover .main{position:absolute;left:120px;top:190px}
.s-cover .lead{max-width:760px}
.s-cover .who{position:absolute;left:120px;top:790px}
.s-cover .nm{font-family:var(--disp);font-weight:700;font-size:36px;letter-spacing:-.02em}
.s-cover .for{font-size:28px;margin-top:6px}
.s-cover .disc{position:absolute;left:120px;bottom:60px;width:880px}
.s-cover .art{position:absolute;left:1000px;top:470px;width:800px;height:420px}
.s-cover .art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cline{fill:none;stroke:var(--green);stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.cdot{fill:var(--green);stroke:#fff;stroke-width:5}
.s-cover .cap{position:absolute;right:0;bottom:-50px}

/* ═════════ 2 · agenda ═════════ */
.s-agenda h1{position:absolute;left:120px;top:190px;width:620px}
.agenda{position:absolute;left:760px;right:120px;top:196px;margin:0;padding:0;list-style:none}
.agenda li{border-top:2px solid var(--line)}
.agenda li:last-child{border-bottom:2px solid var(--line)}
.agenda button{display:flex;gap:36px;align-items:baseline;width:100%;padding:26px 0}
.agenda .n{font-family:var(--disp);font-weight:700;font-size:40px;color:var(--green);width:64px;flex-shrink:0;font-variant-numeric:tabular-nums}
.agenda b{display:block;font-family:var(--disp);font-weight:700;font-size:52px;letter-spacing:-.03em;line-height:1.05;transition:transform .35s var(--ease)}
.agenda small{display:block;font-size:28px;margin-top:8px;color:var(--ink-2)}
.agenda button:hover b{transform:translateX(10px)}
.slide.active .agenda li{animation:rise .8s var(--ease) both;animation-delay:calc(var(--i)*90ms + .1s)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ═════════ 3 · motivación ═════════ */
.s-motivo .l{width:1060px}
.s-motivo .lead{max-width:1000px}
.mo-chips{margin-top:50px;gap:14px}
.mo-chips .chip{font-size:30px;padding:18px 30px}
.mo-chips .chip[aria-pressed="true"]{background:var(--green);color:#fff}
.mo-otro{display:flex;gap:12px;margin-top:22px}
.mo-otro input{font:500 28px var(--sans);color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:999px;padding:14px 28px;width:480px;outline:none}
.mo-otro input:focus{border-color:var(--ink)}
.mo-otro input::placeholder{color:var(--ink-3)}
.mo-mine{position:absolute;left:1280px;right:120px;top:330px}
.mo-list{list-style:none;margin:18px 0 24px;padding:0}
.mo-list li{font-family:var(--disp);font-weight:700;font-size:56px;letter-spacing:-.035em;line-height:1.12;color:var(--green);animation:rise .5s var(--ease) both}
.mo-list li.empty{color:var(--ink-3);font-size:34px;font-weight:500;letter-spacing:-.01em}

/* ═════════ 4 · inflación ═════════ */
.s-infl .l{width:780px}
.s-infl .l h1{font-size:100px}
.s-infl .story{font-size:34px;line-height:1.42;margin-top:36px}
.s-infl .rt{position:absolute;left:980px;right:120px;top:160px;bottom:110px}
.yr{font-size:150px;line-height:.9;letter-spacing:-.05em}
.yr small{font-family:var(--sans);font-size:40px;font-weight:500;letter-spacing:0;margin-left:20px;color:var(--ink-2)}
.breads{margin-top:60px;display:grid;grid-template-columns:repeat(5,1fr);gap:30px 26px}
.bread{position:relative;aspect-ratio:120/84}
.bread svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.bread .ghost path{fill:none;stroke:rgba(18,18,18,.3);stroke-width:2.5;stroke-dasharray:5 6}
.bread .fw{position:absolute;left:0;top:0;height:100%;overflow:hidden}
.bread .fw svg{width:calc((820px - 4*26px)/5)}
.bread .bd{fill:var(--ink)}
.bread .sc{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round}
.stats{display:flex;gap:80px;margin-top:60px}
.stat .v{font-size:64px;margin-top:6px}
.scrub{position:absolute;left:0;right:0;bottom:0;height:72px;cursor:pointer;touch-action:none}
.scrub .track,.scrub .fill{position:absolute;left:0;top:20px;height:4px;border-radius:2px}
.scrub .track{right:0;background:var(--line)}
.scrub .fill{background:var(--red)}
.scrub .knob{position:absolute;top:22px;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 6px #fff}
.scrub .ticks span{position:absolute;top:44px;transform:translateX(-50%);font-size:19px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.s-infl .punch{position:absolute;left:120px;top:830px;width:800px}
.punch .big{font-family:var(--disp);font-weight:700;font-size:54px;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
.punch .src{margin-top:18px}

/* ═════════ 6 · ahorrar vs invertir ═════════ */
.tbl{position:absolute;left:120px;top:370px;width:1140px}
.tbl .row{display:grid;grid-template-columns:190px 390px 1fr;align-items:baseline;padding:12px 0;border-top:2px solid var(--line)}
.tbl .hd{border-top:0;padding-bottom:12px}
.tbl .hd span{font-size:26px;color:var(--ink-2)}
.tbl .y{font-size:44px;font-weight:500}
.tbl .s,.tbl .i{font-size:56px}
.tbl .i{position:relative;justify-self:start}
.hand{position:absolute;left:-12px;bottom:-22px;height:30px;width:calc(100% + 24px);overflow:visible}
.hand path{fill:none;stroke:var(--green);stroke-width:6;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset 1.1s var(--ease) .4s}
.row.in .hand path{stroke-dashoffset:0}
.s-tabla .why{position:absolute;left:1380px;right:120px;top:400px}
.why p{font-size:26px;line-height:1.45;margin-top:16px}

/* ═════════ 7 · calculadora ═════════ */
.s-calc .l{width:640px}
.s-calc .rt{position:absolute;left:860px;right:120px;top:160px;bottom:100px}
.res .v{font-size:150px;line-height:.95;margin-top:8px}
.split{display:flex;gap:44px;font-size:27px;margin-top:22px}
.split i{display:inline-block;width:18px;height:18px;border-radius:5px;margin-right:12px;vertical-align:-1px}
.split b{font-family:var(--disp);font-variant-numeric:tabular-nums}
.ca-real{font-size:24px;line-height:1.4;color:var(--ink-2);margin-top:14px}
.ca-real b{font-family:var(--disp);color:var(--ink)}
.s-calc .chart{position:absolute;left:0;right:0;bottom:0;height:400px}
.csvg .at{fill:var(--green-soft)}
.csvg .ap{fill:rgba(18,18,18,.07)}
.csvg .lt{fill:none;stroke:var(--green);stroke-width:5;stroke-linejoin:round}
.csvg .lp{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1 9}
.csvg .dt{fill:var(--green);stroke:#fff;stroke-width:5}
.csvg .gl{stroke-dasharray:none}

/* ═════════ 8 · empezar temprano le gana a poner más ═════════ */
.s-tiempo .l{width:1680px}
.s-tiempo h1{font-size:96px}
.s-tiempo .lead{max-width:1120px;margin-top:22px}
.ti-chart{position:absolute;left:120px;top:440px;width:1100px;height:520px}
.ti-svg .la{fill:none;stroke:var(--green);stroke-width:5;stroke-linejoin:round}
.ti-svg .lb{fill:none;stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.ti-svg .band{opacity:0;transition:opacity .5s}
.ti-svg .band.on{opacity:1}
.ti-cards{position:absolute;left:1300px;right:120px;top:440px;display:flex;flex-direction:column;gap:20px}
.ti-card{border-radius:24px;background:var(--paper-2);padding:22px 28px}
.ti-card.ana{background:var(--green-soft)}
.ti-card .nm{font-family:var(--disp);font-weight:700;font-size:32px;letter-spacing:-.02em}
.ti-card .nm span{font-family:var(--sans);font-weight:500;font-size:22px;letter-spacing:0;color:var(--ink-2)}
.ti-card .k{font-size:22px;margin-top:4px}
.ti-card .v{font-size:58px;line-height:1;margin-top:10px}
.ti-punch{position:absolute;left:1300px;right:120px;top:850px;font-family:var(--disp);font-weight:700;font-size:38px;letter-spacing:-.02em;line-height:1.12}
/* el paso «¿por qué?»: la marca a los 35 y la explicación dentro de la gráfica */
.ti-svg .m35{stroke:var(--green);stroke-width:3;stroke-dasharray:2 10;stroke-linecap:round;opacity:0;transition:opacity .5s}
.ti-svg .m35.on{opacity:1}
.tagx.ti-t35,.tagx.ti-t35.in{transform:translate(calc(-100% - 26px),calc(-100% - 8px));text-align:right}
.tagx.ti-t35 .v{color:var(--green)}
.ti-why{position:absolute;left:390px;top:30px;width:450px}
.ti-why .k{font-family:var(--disp);font-weight:700;font-size:32px;letter-spacing:-.02em;color:var(--ink)}
.ti-why p:not(.k){font-size:25px;line-height:1.4;margin-top:8px}
.ti-why b{font-family:var(--disp);font-variant-numeric:tabular-nums}
.ti-why .ti-w2{color:var(--ink-2)}

/* ═════════ 9 · mapa financiero ═════════ */
.ma-path{position:absolute;left:120px;right:120px;top:450px;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.ma-line{position:absolute;left:63px;width:1290px;top:60px;height:6px;background:var(--line);border-radius:3px}
.ma-line i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--green);border-radius:3px;transition:width .8s var(--ease)}
.ma-step{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.ma-n{display:grid;place-items:center;width:126px;height:126px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--disp);font-weight:700;font-size:44px;box-shadow:0 0 0 12px #fff;transition:transform .35s var(--ease)}
.ma-step:hover .ma-n{transform:scale(1.06)}
.ma-step b{font-family:var(--disp);font-size:40px;letter-spacing:-.025em;line-height:1.08;margin-top:36px}
.ma-t{font-size:26px;line-height:1.45;color:var(--ink-2);margin-top:14px}

/* ═════════ 10 · deudas ═════════ */
.s-deudas .l{top:320px;width:700px}
.s-deudas h1{position:absolute;left:120px;top:160px}
.de-v{font-size:120px!important}
.de-pre{margin-top:20px}
.de-pre .chip{font-size:22px;padding:12px 20px}
.s-deudas .rt{position:absolute;left:920px;right:120px;top:360px}
.de-bar{margin-bottom:30px}
.de-bar .trk{height:34px;border-radius:17px;background:var(--paper-2);margin-top:12px;overflow:hidden}
.de-bar .trk i{display:block;height:100%;border-radius:17px;transition:width .5s var(--ease)}
.de-b1{background:var(--red)} .de-b2{background:var(--green)}
.de-bar .num{font-size:40px;margin-top:8px}
.de-verdict{font-family:var(--disp);font-weight:700;font-size:72px;letter-spacing:-.04em;line-height:1;margin-top:8px}
.de-why{font-size:30px;line-height:1.45;margin-top:18px;max-width:860px}
.de-src{position:absolute;left:120px;right:120px;bottom:40px}

/* ═════════ 11 · fondo de emergencia ═════════ */
.s-fondo h1{position:absolute;left:120px;top:160px}
.fo-lead{position:absolute;left:120px;top:290px;width:1160px;margin:0}
.s-fondo .l{top:430px;width:840px}
.s-fondo .ctl{margin-top:0}
.fo-months{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:30px}
.fo-months i{height:80px;border-radius:14px;background:var(--green);display:grid;place-items:center;color:#fff;font:700 22px var(--disp);font-style:normal}
.fo-months i.opt{background:var(--green-soft);color:var(--green)}
.fo-res{margin-top:24px;font-size:26px;color:var(--ink-2)}
.fo-res b{display:inline-block;font-size:80px;color:var(--ink);margin-top:6px}
.fo-res .fo-a{font-family:var(--disp);font-size:40px;margin:0 10px}
.s-fondo .rt{position:absolute;left:1080px;right:120px;top:440px}
.fo-rule{font-size:28px;line-height:1.45;margin-top:12px}
.fo-opt{margin-top:24px;padding-top:20px;border-top:2px solid var(--line)}
.fo-opt p{font-size:27px;line-height:1.45}
.fo-opt p.k{font-size:24px;margin-bottom:4px}
.fo-logos{display:flex;gap:28px;align-items:center;margin-top:16px}
.fo-logos img{height:38px;width:auto;display:block}

/* ═════════ 12 · cuánto puedes invertir ═════════ */
.s-disp h1{position:absolute;left:120px;top:160px}
.s-disp .l{top:300px;width:700px}
.s-disp .rt{position:absolute;left:940px;right:120px;top:340px}
.di-sobra{font-size:110px;line-height:1;margin-top:6px}
.s-disp .rt .ctl{margin-top:30px}
.di-fv{font-size:30px;line-height:1.4;margin-top:26px}
.di-fv b{font-family:var(--disp);color:var(--green)}
.di-tip{font-size:27px;line-height:1.45;margin-top:20px;max-width:800px}

/* ═════════ tu libertad financiera ═════════ */
.s-libre h1{position:absolute;left:120px;top:160px}
.li-lead{position:absolute;left:120px;top:282px;margin:0;width:1680px}
/* tres controles arriba; abajo el rendimiento con sus 4 chips en una línea y la inflación con lo que sobra */
.li-ctl{position:absolute;left:120px;top:385px;width:880px;display:flex;flex-wrap:wrap;gap:30px 44px}
.li-ctl .ctl{margin-top:0;flex:0 0 calc((100% - 88px)/3)}
.li-ctl .li-rt{flex-basis:320px}
.li-ctl .li-inf{flex:1 1 0}
.li-ctl .k{font-size:24px}
.li-ctl .ctl .v{font-size:56px;margin:8px 0 10px}
.li-ctl .src{font-size:18px;margin-top:4px}
.li-a-n.r{color:var(--red)}
.li-rates{margin-top:14px;gap:10px}
.li-rates .chip{font-size:22px;padding:11px 18px}
.li-ih{display:flex;align-items:center;gap:24px}
.li-ih .chip{font-size:20px;padding:10px 18px}
.li-why{position:absolute;left:120px;top:822px;width:860px}
.li-wt{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:-.02em}
.li-why p:not(.li-wt){font-size:23px;line-height:1.42;margin-top:8px;color:var(--ink-2)}
.li-res{position:absolute;left:1080px;right:120px;top:385px}
.li-n{font-size:118px;line-height:.95;margin-top:6px}
.li-n-x{font-size:23px;line-height:1.35;color:var(--ink-2);margin-top:10px}
.li-stats{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:26px;padding-top:20px;border-top:2px solid var(--line)}
.li-stats .num{font-size:56px;line-height:1;margin-top:4px}
.li-t-d{font-size:22px;line-height:1.35;color:var(--ink-2);margin-top:8px}
.li-chart{position:relative;height:190px;margin-top:24px}
.li-svg .at{fill:var(--green-soft)}
.li-svg .lt{fill:none;stroke:var(--green);stroke-width:4.5;stroke-linejoin:round}
.li-svg .mt{stroke:var(--ink);stroke-width:2.5;stroke-dasharray:2 8;stroke-linecap:round}
.li-svg .ml{font:700 20px var(--disp);fill:var(--ink)}
.li-svg .dt{fill:var(--green);stroke:#fff;stroke-width:4}
.li-svg .gl{stroke-dasharray:none}

/* ═════════ 13 · perfil (quiz) ═════════ */
.s-perfil h1{position:absolute;left:120px;top:160px}
.qbox{position:absolute;left:120px;top:370px;width:940px}
.qmeta{display:flex;align-items:center;gap:22px;font-family:var(--disp);font-weight:700;font-size:24px}
.dots{display:flex;gap:8px}
.dots i{width:44px;height:6px;border-radius:3px;background:var(--line)}
.dots i.done{background:var(--ink)}
.q{font-family:var(--disp);font-weight:700;font-size:54px;letter-spacing:-.03em;line-height:1.08;margin:26px 0 30px;min-height:118px}
.opt{display:flex;align-items:center;gap:24px;width:100%;background:var(--paper-2);border-radius:22px;padding:24px 28px;font-size:30px;line-height:1.3;margin-top:14px;transition:background .15s,transform .2s var(--ease)}
.opt:hover{background:var(--paper-3);transform:translateX(6px)}
.opt .kb{font-family:var(--disp);font-weight:700;font-size:22px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;flex-shrink:0}
.quiz.swap,.swap{animation:qin .5s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.result{animation:qin .6s var(--ease)}
.result h2{font-size:92px;letter-spacing:-.045em;margin-top:6px;color:var(--green)}
.rdesc{font-size:30px;line-height:1.42;margin-top:14px;max-width:880px}
.mix{margin-top:34px}
.mbar{display:flex;height:24px;border-radius:12px;overflow:hidden;margin-top:12px;background:var(--line)}
.mbar i{display:block;height:100%;transition:width .8s var(--ease)}
.mix .ms{background:var(--green)} .mix .mb{background:var(--ink)}
.mleg{display:flex;gap:36px;margin-top:14px;font-size:24px}
.mleg i{display:inline-block;width:16px;height:16px;border-radius:4px;margin-right:10px;vertical-align:-1px}
.result .note{font-size:26px;line-height:1.45;margin-top:30px;max-width:880px}
.result .again{margin-top:26px}
.zoo{position:absolute;left:1150px;right:120px;top:430px}
.animals{display:flex;justify-content:space-between;align-items:flex-end;height:290px}
.animal{display:flex;flex-direction:column;align-items:center;gap:22px;color:var(--ink);transition:color .5s,opacity .5s,transform .7s var(--ease);transform-origin:50% 100%}
.animal svg{display:block}
.a-conejo{width:170px;height:160px}.a-venado{width:180px;height:230px}.a-leon{width:250px;height:150px}
.animal b{font-family:var(--disp);font-size:28px}
.animal.win{color:var(--green);transform:scale(1.12)}
.animal.dim{opacity:.18}
.meter{position:relative;height:6px;border-radius:3px;background:var(--line);margin:56px 60px 0}
.meter .mk{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 6px #fff;opacity:0;transition:left .7s var(--ease),opacity .4s}

/* ═════════ 14 · escalera del riesgo ═════════ */
.s-esc .l{width:1500px}
.es-steps{position:absolute;left:120px;right:120px;top:330px;height:370px;display:flex;gap:14px;align-items:flex-end}
.es-s{flex:1;height:var(--h);border-radius:22px 22px 8px 8px;background:var(--paper-2);padding:20px 24px 22px;display:flex;flex-direction:column;gap:8px;text-align:left;transition:background .3s,color .3s}
.es-s:hover{background:var(--paper-3)}
.es-s.on{background:var(--ink);color:#fff}
.es-s b{font-family:var(--disp);font-size:32px;letter-spacing:-.02em;line-height:1.05}
.es-n{font-family:var(--disp);font-weight:700;font-size:22px;opacity:.55}
.es-risk{display:flex;gap:6px;margin-top:auto}
.es-risk i{width:14px;height:14px;border-radius:50%;background:currentColor;opacity:.16}
.es-risk i.f{opacity:1;background:var(--red)}
.es-s.on .es-risk i{opacity:.3}
.es-s.on .es-risk i.f{opacity:1;background:#ff8a80}
.es-panel{position:absolute;left:120px;right:120px;top:735px}
.es-hint{font-size:30px}
.es-body h2{font-size:52px}
.es-what{font-size:30px;line-height:1.4;margin-top:10px}
.es-cols{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;gap:44px;margin-top:20px}
.es-cols p:not(.k){font-size:26px;line-height:1.4;margin-top:6px}

/* ═════════ 15 · la bolsita del súper ═════════ */
.s-bolsa h1{position:absolute;left:120px;top:160px}
.bo-scene{position:absolute;left:120px;right:120px;top:320px;height:540px}
.bo-items{position:absolute;left:0;top:0;width:960px;height:520px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:20px}
.bo-it{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:transform .9s cubic-bezier(.55,0,.25,1),opacity .7s ease;transition-delay:calc(var(--i)*80ms)}
.bo-it svg{width:170px;height:140px}
.bo-it span{font-family:var(--disp);font-weight:700;font-size:28px}
.packed .bo-it{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}
.bo-bag{position:absolute;left:1200px;top:0;width:420px;height:520px;transform-origin:50% 100%}
.bo-bag svg{width:100%;height:100%;display:block}
.bo-label{position:absolute;left:40px;right:40px;top:290px;text-align:center;font-family:var(--disp);font-weight:700;font-size:58px;letter-spacing:-.035em;line-height:1;opacity:0;transition:opacity .4s}
.lbl .bo-label{opacity:1}
.filled .bo-bag{animation:bump .6s var(--ease) .95s}
@keyframes bump{40%{transform:scale(1.06)}}
.bo-cos{position:absolute;left:0;top:0;width:1040px;height:520px;display:flex;flex-wrap:wrap;align-content:center;gap:16px;pointer-events:none}
.bo-co{font-family:var(--disp);font-weight:700;font-size:36px;letter-spacing:-.02em;padding:16px 28px;border-radius:999px;background:var(--paper-2);opacity:0;transform:translateX(140px) scale(.6);
  transition:opacity .5s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i)*70ms)}
.bo-co small{font-weight:500;font-size:24px;color:var(--ink-2);margin-left:10px}
.bo-co.more{background:none;color:var(--ink-2)}
.spd .bo-co{opacity:1;transform:none}
.bo-cap{position:absolute;left:120px;right:120px;top:890px;font-size:40px;line-height:1.35;margin:0;transition:opacity .25s;text-wrap:balance}

/* ═════════ 16 · dentro del S&P 500 ═════════ */
.s-sp .l{width:1680px}
.sp-bars{position:absolute;left:120px;top:430px;width:1080px}
.sp-row{display:grid;grid-template-columns:270px 1fr 100px;align-items:center;gap:22px;height:46px}
.sp-row .n{font-family:var(--disp);font-weight:700;font-size:27px;letter-spacing:-.01em}
.sp-row .b{height:24px;border-radius:12px;overflow:hidden}
.sp-row .b i{display:block;height:100%;width:0;background:var(--ink);border-radius:12px;transition:width 1s var(--ease);transition-delay:calc(var(--i)*70ms + .2s)}
.slide.active .sp-row .b i{width:var(--w)}
.sp-row .p{font-family:var(--disp);font-weight:700;font-size:27px;text-align:right;font-variant-numeric:tabular-nums}
.sp-row.rest{margin-top:10px;border-top:2px solid var(--line);height:62px;padding-top:8px}
.sp-row.rest .b{height:auto;font-size:26px;color:var(--ink-2)}
.sp-side{position:absolute;left:1300px;right:120px;top:430px}
.sp-big{font-size:150px;line-height:.9;color:var(--green)}
.sp-t{font-size:28px;line-height:1.45;margin-top:14px}
.sp-side > div + div{margin-top:36px}
.sp-src{position:absolute;left:120px;bottom:40px}

/* ═════════ ¿por qué 8%? · cada año del S&P 500 es un cuadrito (opción A de los mockups) ═════════ */
.s-ocho .l{width:1060px}
.oc-res{position:absolute;left:1190px;right:120px;top:150px;text-align:right}
.oc-v{font-size:170px;line-height:.85;color:var(--green)}
.oc-n{font-size:27px;line-height:1.4;color:var(--ink-2);max-width:560px;margin:14px 0 0 auto}
.oc-chips{position:absolute;left:120px;top:385px}
.oc-chips .chip{font-size:24px;padding:12px 22px}
.oc-hist{position:absolute;left:120px;top:462px;width:1680px;height:540px}
.oc-svg .yr{transition:opacity .35s;transform-box:fill-box;transform-origin:50% 100%}
.slide.active .oc-svg .yr{animation:oc-in .5s var(--ease) both;animation-delay:calc(var(--r)*45ms + var(--c)*12ms)}
@keyframes oc-in{from{transform:scaleY(0)}to{transform:none}}
.oc-svg .pos{fill:var(--green)} .oc-svg .neg{fill:var(--red)} .oc-svg .mid{fill:var(--ink)}
.oc-svg .off{opacity:.12}
.oc-svg .band{fill:var(--green-soft)}
.oc-svg .base{stroke:var(--ink);stroke-width:2}
.oc-lab{position:absolute;top:0;font-size:22px;line-height:1.3;color:var(--ink-2);white-space:nowrap}
.oc-lab b{display:block;font-family:var(--disp);font-size:34px;letter-spacing:-.02em;color:var(--ink)}
.oc-lneg b{color:var(--red)}
.oc-lmid{transform:translateX(-50%);text-align:center}
.oc-src{position:absolute;left:120px;bottom:24px}

/* ═════════ 18 · hay ETFs de todo ═════════ */
.s-etf .l{width:1020px}
.et-note{position:absolute;left:1180px;right:120px;top:180px;font-size:28px;line-height:1.45}
.et-grid{position:absolute;left:120px;right:120px;top:400px;display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.et-c{background:var(--paper-2);border-radius:20px;padding:16px 18px 14px;height:176px;display:flex;flex-direction:column;text-align:left;transition:background .2s,color .2s,transform .25s var(--ease)}
.et-c:hover{transform:translateY(-4px)}
.et-c.on{background:var(--ink);color:#fff}
.et-g{font-size:17px;font-weight:600;opacity:.7}
.et-c b{font-family:var(--disp);font-size:38px;letter-spacing:-.02em;line-height:1;margin-top:6px}
.et-d{font-size:19px;line-height:1.25;margin-top:4px}
.et-sp{width:100%;height:44px;margin-top:auto;overflow:visible}
.et-sp path{fill:none;stroke-width:2.5;stroke:var(--green);vector-effect:non-scaling-stroke;stroke-linejoin:round}
.et-sp path.dn{stroke:var(--red)}
.et-c.on .et-sp path{stroke:#7be0a9}
.et-c.on .et-sp path.dn{stroke:#ff9a90}
.et-panel{position:absolute;left:120px;right:120px;top:800px;display:grid;grid-template-columns:420px 1fr auto;gap:44px;align-items:start}
.et-pt{font-family:var(--disp);font-weight:700;font-size:76px;line-height:.95;letter-spacing:-.04em}
.et-pd{font-size:24px;line-height:1.4;margin-top:8px}
.et-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.et-stats .k{font-size:21px}
.et-stats .num{font-size:40px;margin-top:4px}
.et-stats .num.sm{font-size:24px;letter-spacing:-.01em;margin-top:10px}
.et-stats .src{font-size:18px;margin-top:4px}
.et-link{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:999px;padding:16px 26px;font:700 22px var(--disp);text-decoration:none;white-space:nowrap}
.et-link:hover{background:#000}

/* ═════════ 19 · costos ═════════ */
.s-cos .l{width:1680px}
.s-cos .lead{max-width:1600px}
.co-l{position:absolute;left:120px;top:400px;width:640px}
.co-l .ctl{margin-top:0}
.co-v{font-size:110px!important}
.co-pre{margin-top:18px}
.co-pre .chip{font-size:22px;padding:12px 20px}
.co-rt{position:absolute;left:860px;right:120px;top:400px}
.co-nums{display:flex;gap:64px}
.co-nums .num{font-size:76px;line-height:1;margin-top:6px}
.co-lost{font-size:30px;line-height:1.4;margin-top:18px}
.co-chart{position:relative;height:320px;margin-top:26px}
.co-svg .la{fill:none;stroke:var(--green);stroke-width:5;stroke-linejoin:round}
.co-svg .lb{fill:none;stroke:var(--red);stroke-width:5;stroke-linejoin:round}

/* ═════════ 20 · comprar cada mes (DCA) ═════════ */
.s-dca .l{width:1680px}
.s-dca .lead{max-width:1160px}
.dc-chart{position:absolute;left:120px;top:430px;width:1180px;height:500px}
.dc-svg .val{fill:none;stroke:var(--green);stroke-width:5;stroke-linejoin:round}
.dc-svg .paid{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1 9}
.dc-svg .dot{fill:var(--ink);stroke:#fff;stroke-width:4}
.dc-svg .dot.red{fill:var(--red)} .dc-svg .dot.grn{fill:var(--green)}
.dc-side{position:absolute;left:1380px;right:120px;top:430px}
.dc-leg{position:absolute;left:130px;top:14px}
.dc-leg p{font-size:22px;line-height:1.5;display:flex;align-items:center;gap:12px;color:var(--ink-2)}
.dc-leg i{display:inline-block;width:34px;height:0;border-top:5px solid var(--green)}
.dc-leg i.p{border-top:4px dotted var(--ink)}
.dc-ev{margin-top:0}
.dc-ev > div{padding:14px 0;border-top:2px solid var(--line)}
.dc-ev .t{font-family:var(--disp);font-weight:700;font-size:28px;letter-spacing:-.02em;line-height:1.1}
.dc-ev .k{font-size:22px;margin-top:4px}
.tagx.dc-lo{transform:translate(18px,-50%)}
.tagx.dc-lo.in{transform:translate(18px,-50%)}
.tagx.dc-lo .v{font-size:34px}
.dc-x{font-size:25px;line-height:1.45;margin-top:18px}
.dc-src{position:absolute;left:120px;bottom:30px}

/* ═════════ 21 · plataformas ═════════ */
.pf-cards{position:absolute;left:120px;right:120px;top:360px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.pf-card{background:var(--paper-2);border-radius:28px;padding:34px 38px}
.pf-card h2{font-size:54px}
.pf-card p{font-size:26px;line-height:1.45;margin-top:12px}
.pf-card .ojo{color:var(--red);font-weight:500}
.pf-crit{position:absolute;left:120px;right:120px;top:760px}
.pf-crit ol{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;list-style:none;padding:0;margin:14px 0 0}
.pf-crit li{font-size:24px;line-height:1.4;border-top:2px solid var(--line);padding-top:14px;color:var(--ink-2)}
.pf-crit li b{display:block;font-family:var(--disp);font-size:28px;color:var(--ink);margin-bottom:6px}

/* ═════════ 22 · letra pequeña ═════════ */
.lt-rows{position:absolute;left:120px;right:120px;top:400px}
.lt-row{display:grid;grid-template-columns:90px 330px 1fr;gap:30px;align-items:baseline;padding:22px 0;border-top:2px solid var(--line)}
.lt-row .n{font-family:var(--disp);font-weight:700;font-size:40px;color:var(--green)}
.lt-row b{font-family:var(--disp);font-size:36px;letter-spacing:-.02em;line-height:1.1}
.lt-row p{font-size:27px;line-height:1.45}

/* ═════════ dibújala tú: la misma gráfica y la misma escala que la montaña rusa ═════════ */
.s-dib .l{width:900px}
.dj-svg{cursor:crosshair;touch-action:none}
.dj-svg .ml{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linejoin:round;opacity:0}
.dj-svg .ink path{fill:none;stroke:var(--ink-3);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:opacity .6s}
.s-dib.real .dj-svg .ink path{opacity:.3}
.dj-punch{position:absolute;left:1080px;right:120px;top:150px;font-family:var(--disp);font-weight:700;font-size:40px;letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
.dj-ctl{position:absolute;right:120px;top:350px;display:flex;align-items:center;gap:22px}
.dj-ctl .k{transition:opacity .4s}
.s-dib.real .dj-ctl .k{opacity:0}
.dj-ctl .chip{font-size:22px;padding:12px 24px}
.dj-leg{position:absolute;left:120px;top:10px;pointer-events:none}
.dj-leg p{font-size:22px;line-height:1.6;display:flex;align-items:center;gap:12px;color:var(--ink-2)}
.dj-leg i{display:inline-block;width:34px;height:0;border-top:4px solid var(--ink)}
.dj-leg i.u{border-top:9px solid var(--ink-3);border-radius:5px;opacity:.55}

/* ═════════ 23 · montaña rusa ═════════ */
.s-mont .l{width:900px}
.s-mont .mchart,.s-dib .mchart{position:absolute;left:120px;top:440px;width:1680px;height:540px}
.msvg .ml{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linejoin:round}
.msvg .cs{fill:none;stroke:var(--red);stroke-width:7;stroke-linejoin:round;stroke-linecap:round;opacity:0;transition:opacity .45s}
.msvg .cd{fill:var(--red);stroke:#fff;stroke-width:4;opacity:0;transition:opacity .45s}
.msvg .on{opacity:1}
.tag{position:absolute;left:var(--x);top:calc(var(--y) + 22px);transform:translateX(-50%);opacity:0;white-space:nowrap;pointer-events:none;
  transition:opacity .45s var(--ease),top .6s var(--ease),transform .6s var(--ease)}
.tag .dd{font-family:var(--disp);font-weight:700;color:var(--red);letter-spacing:-.03em;line-height:1;font-size:28px;transition:font-size .6s var(--ease)}
.tag .nm{font-family:var(--disp);font-weight:700;font-size:28px;margin-top:10px}
.tag .rc{font-size:23px;color:var(--ink-2);margin-top:4px}
.tag .nm,.tag .rc{display:none}
.tag.full{opacity:1}
.tag.full .dd{font-size:76px}
.tag.full .nm,.tag.full .rc{display:block}
.tag.full.t-top{top:10px}
.tag.full.t-bot{top:330px}
.tag.full.t-right{transform:translateX(calc(-100% + 70px))}
.tag.mini{opacity:1}
.s-mont .dca{position:absolute;left:1080px;right:120px;top:150px}
.dca .dt{font-size:30px;line-height:1.4;margin-top:6px}
.dca .v{font-size:118px;line-height:.95;margin-top:10px}
.s-mont .msrc,.s-dib .msrc{position:absolute;left:120px;right:120px;bottom:30px}

/* ═════════ 24 · los mejores días ═════════ */
.s-mej .l{width:1600px}
.s-mej h1{font-size:96px}
.mj-bars{position:absolute;left:120px;top:470px;width:1080px}
.mj-row{margin-bottom:24px}
.mj-row .k{font-size:26px}
.mj-row .b{display:flex;align-items:center;gap:22px;margin-top:8px}
.mj-row .b i{display:block;height:46px;border-radius:12px;background:var(--ink);width:0;transition:width 1s var(--ease)}
.mj-row.in .b i{width:calc(var(--w) * 7.2px)}
.mj-row.g .b i{background:var(--green)}
.mj-row .num{font-size:46px}
.mj-row.g .num{color:var(--green)}
.mj-side{position:absolute;left:1300px;right:120px;top:480px}
.mj-side p{font-size:28px;line-height:1.45;margin-bottom:18px}
.mj-src{position:absolute;left:120px;right:120px;bottom:36px}

/* ═════════ 25 · trader vs inversionista ═════════ */
.tr-cols{position:absolute;left:120px;right:120px;top:380px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.tr-col{border-radius:28px;padding:34px 40px;background:var(--paper-2)}
.tr-col.inv{background:var(--green-soft)}
.tr-col h2{font-size:54px}
.tr-col ul{margin:14px 0 0;padding:0;list-style:none}
.tr-col li{font-size:28px;line-height:1.4;padding:9px 0 9px 34px;position:relative}
.tr-col li::before{content:"";position:absolute;left:0;top:.8em;width:14px;height:14px;border-radius:50%;background:currentColor}
.tr-col.inv li::before{background:var(--green)}
.tr-q{position:absolute;left:120px;right:120px;top:860px;margin:0}
.tr-q p{font-family:var(--disp);font-weight:700;font-size:42px;letter-spacing:-.025em;line-height:1.15}
.tr-q cite{display:block;font-style:normal;font-size:22px;color:var(--ink-2);margin-top:12px}

/* ═════════ 26 · las rebajas ═════════ */
.s-reb .lead{max-width:1500px}
.rb-cols{position:absolute;left:120px;right:120px;top:450px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.rb-col{border-radius:28px;padding:30px 36px;background:var(--paper-2)}
.rb-tag{font-family:var(--disp);font-weight:700;font-size:36px;letter-spacing:-.02em}
.rb-col svg{width:100%;height:180px;margin-top:16px;overflow:visible;display:block}
.rb-col svg .ln{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linejoin:round}
.rb-col svg .ln.rd{stroke:var(--red)}
.rb-col svg .lab{font:700 22px var(--disp)}
.rb-col p{font-size:26px;line-height:1.45;margin-top:14px}
.rb-leg{display:flex;align-items:center;gap:12px;font-size:21px!important;color:var(--ink-2);margin-top:8px!important}
.rb-leg i{display:inline-block;width:28px;height:0;border-top:4px solid var(--ink)}
.rb-leg i.rd{border-top-color:var(--red);margin-left:12px}

/* ═════════ 27 · gestión ═════════ */
.ge-cols{position:absolute;left:120px;right:120px;top:340px;display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.ge-n{font-family:var(--disp);font-weight:700;font-size:40px;color:var(--green)}
.ge-col h2{font-size:44px;margin-top:12px}
.ge-col p,.ge-col li{font-size:26px;line-height:1.45;margin-top:12px}
.ge-col ol{padding-left:30px;margin-top:6px}
.ge-bar{display:flex;height:48px;border-radius:12px;overflow:hidden;margin-top:26px}
.ge-bar i{display:grid;place-items:center;color:#fff;font:700 20px var(--disp);font-style:normal;transition:width .9s var(--ease)}
.ge-a{background:var(--green)} .ge-b{background:var(--ink)}
.ge-lab{font-size:23px!important;color:var(--ink-2)}
.ge-demo .chips{margin-top:16px}
.ge-demo .chip{font-size:21px;padding:11px 18px}

/* ═════════ 28 · tu plan ═════════ */
.s-plan .l{width:1680px}
.pn-steps{position:absolute;left:120px;right:120px;top:400px;list-style:none;padding:0}
.pn-steps li{display:grid;grid-template-columns:80px 400px 1fr;gap:30px;align-items:baseline;padding:20px 0;border-top:2px solid var(--line)}
.pn-steps .n{font-family:var(--disp);font-weight:700;font-size:36px;color:var(--green)}
.pn-steps b{font-family:var(--disp);font-size:34px;letter-spacing:-.02em;line-height:1.1}
.pn-steps p{font-size:27px;line-height:1.45}
.pn-steps p b{font-size:inherit;letter-spacing:0}
.pn-steps .todo{color:var(--ink-3)}
.pn-act{position:absolute;left:120px;bottom:46px;display:flex;gap:12px}
.pn-act .chip{font-size:22px;padding:12px 22px}

/* ═════════ 29 · siguientes pasos ═════════ */
.sg-card{position:absolute;left:120px;top:410px;width:1000px;background:var(--paper-2);border-radius:28px;padding:40px 44px}
.sg-card h2{font-size:52px}
.sg-card .k{margin-top:8px}
.sg-card ul{list-style:none;padding:0;margin-top:20px}
.sg-card li{font-size:28px;line-height:1.4;padding:8px 0 8px 34px;position:relative}
.sg-card li::before{content:"";position:absolute;left:0;top:.8em;width:14px;height:14px;border-radius:50%;background:var(--green)}
.sg-bye{position:absolute;left:1220px;right:100px;top:430px}
.sg-g{font-family:var(--disp);font-weight:700;font-size:148px;letter-spacing:-.055em;line-height:.9}
.sg-bye .nm{font-family:var(--disp);font-weight:700;font-size:40px;margin-top:22px}
.sg-disc{position:absolute;left:120px;bottom:50px;width:1100px}

/* ═════════ planes y precios (al final, y desde el menú) ═════════ */
.s-planes .l{width:1680px}
.pl-cols{position:absolute;left:120px;right:120px;top:370px;display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:56px}
.pl-col{border-top:2px solid var(--line);padding-top:24px}
.pl-k{font-family:var(--disp);font-weight:700;font-size:24px;color:var(--green)}
.pl-col h2{font-size:44px;margin-top:4px}
.pl-p{font-size:72px;line-height:1;margin-top:20px;white-space:nowrap}
.pl-p .pm{font-family:var(--sans);font-size:24px;font-weight:500;letter-spacing:0;margin-left:12px;color:var(--ink-2)}
.pl-n{font-size:23px;color:var(--ink-2);margin-top:10px}
.pl-col ul{list-style:none;padding:0;margin:22px 0 0}
.pl-col li{font-size:22px;line-height:1.4;padding:6px 0 6px 28px;position:relative}
.pl-col li::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:12px;border-radius:50%;background:var(--green)}
.pl-foot{position:absolute;left:120px;right:120px;bottom:44px}
/* las notas de abajo terminan en x=1220, como .sg-disc: los botones de abajo a la derecha son fijos y no
   escalan con el lienzo, así que en pantallas chicas ocupan más del slide (hasta x≈1240 a 1280×720) */
.de-src,.sp-src,.oc-src,.dc-src,.s-mont .msrc,.s-dib .msrc,.mj-src,.pl-foot{max-width:1100px}

/* ───────── controles e índice (fuera del escenario) ───────── */
.ctrl{position:fixed;right:18px;bottom:16px;display:flex;align-items:center;gap:6px;font-family:var(--disp);z-index:20;transition:opacity .4s}
.ctrl.hide{opacity:0;pointer-events:none}
.ctrl button{display:grid;place-items:center;height:38px;min-width:38px;padding:0 13px;border-radius:999px;background:rgba(243,242,238,.94);font-weight:700;font-size:14px}
.ctrl button:hover{background:var(--paper-3)}
.ctrl svg{width:16px;height:16px}
.ctrl .count{padding:0 8px;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.index{position:fixed;inset:0;background:#fff;z-index:30;display:none;overflow:auto;padding:52px 56px 80px}
.index.open{display:block}
.index .ih{display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto}
.index h2{font-size:52px}
.index .chip{font-size:16px;padding:10px 18px}
.index ol{list-style:none;margin:28px auto 0;padding:0;max-width:1100px;columns:2;column-gap:56px}
.index li{break-inside:avoid}
.index .ch{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin:24px 0 6px;color:var(--ink-2)}
.index a{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:18px}
.index a:hover{color:var(--green)}
.index a.cur{font-weight:600}
.index a span:last-child{font-family:var(--disp);font-variant-numeric:tabular-nums}
.index .ifoot{max-width:1100px;margin:34px auto 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center;color:var(--ink-3);font-size:15px}
/* ajustes: persona, país y precios (como el índice, fuera del escenario) */
.ajustes{position:fixed;inset:0;background:#fff;z-index:30;display:none;overflow:auto;padding:52px 56px 80px}
.ajustes.open{display:block}
.aj{max-width:1000px;margin:0 auto}
.aj .ih{display:flex;justify-content:space-between;align-items:center}
.aj h2{font-size:52px}
.aj h3{font-size:22px;color:var(--green);margin:40px 0 6px}
.aj .chip{font-size:16px;padding:10px 18px}
.aj-row{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:center;padding:14px 0;border-top:1px solid var(--line);font-size:18px}
.aj input[type=text],.aj input[type=number],.aj select{font:500 18px var(--sans);color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:12px;padding:9px 14px}
.aj input:focus,.aj select:focus{border-color:var(--ink)}
.aj input[type=text]{width:100%;max-width:420px}
.aj-ck{grid-template-columns:22px 1fr;gap:14px;cursor:pointer}
.aj-ck input{width:22px;height:22px;margin:0;accent-color:var(--ink)}
.aj-note{font-size:15px;line-height:1.5;color:var(--ink-3);margin-top:8px;max-width:880px}
.aj-act{display:flex;align-items:center;gap:18px;margin-top:14px}
.aj-act .aj-note{margin:0}
.aj .aj-go{background:var(--ink);color:#fff;white-space:nowrap}
.aj-pr{display:grid;grid-template-columns:220px 1fr 1fr;gap:12px 20px;align-items:center;font-size:18px;border-top:1px solid var(--line);padding-top:14px}
.aj-pr b{font:700 16px var(--disp);color:var(--ink-2)}
.aj-m{display:flex;gap:8px}
.aj-m input{width:150px}
.aj-reset{font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:4px;margin-left:4px}

/* ═════════ menú: dos sesiones ═════════ */
.s-menu .l{width:1680px}
.mn-cols{position:absolute;left:120px;right:120px;top:400px;display:grid;grid-template-columns:1fr 1fr;gap:80px}
.mn-s{font-family:var(--disp);font-weight:700;font-size:26px;color:var(--green);margin-bottom:12px}
.mn-row{display:flex;gap:28px;align-items:baseline;width:100%;padding:22px 0;border-top:2px solid var(--line)}
.mn-col .mn-row:last-child{border-bottom:2px solid var(--line)}
.mn-row .n{font-family:var(--disp);font-weight:700;font-size:34px;color:var(--green);width:52px;flex-shrink:0;font-variant-numeric:tabular-nums}
.mn-row b{display:block;font-family:var(--disp);font-weight:700;font-size:42px;letter-spacing:-.03em;line-height:1.05;transition:transform .35s var(--ease)}
.mn-row small{display:block;font-size:25px;margin-top:6px;color:var(--ink-2)}
.mn-row:hover b{transform:translateX(8px)}
.slide.active .mn-row{animation:rise .7s var(--ease) both;animation-delay:calc(var(--i,0)*70ms + .1s)}
.mn-act{position:absolute;left:120px;right:120px;top:910px}
.mn-act .chip{font-size:22px;padding:12px 22px}
.mn-act .mn-back{background:var(--ink);color:#fff}

/* ═════════ primera impresión ═════════ */
.s-gut .l{width:1020px}
.gu-q{font-family:var(--disp);font-weight:700;font-size:50px;letter-spacing:-.03em;line-height:1.1;margin-top:44px}
.gu-opts{margin-top:22px}
.gu-opts .opt[aria-pressed="true"]{background:var(--ink);color:#fff}
.gu-opts .opt[aria-pressed="true"] .kb{background:var(--green);color:#fff}
.gu-ok{margin-top:18px;opacity:0;transition:opacity .4s}
.gu-ok.on{opacity:1}
.gu-art{position:absolute;left:1300px;right:120px;top:300px;height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.gu-a,.gu-b{font-size:120px;line-height:1}
.gu-arrow{width:56px;height:110px}

/* ═════════ portadilla del capítulo 02 · ¿en qué se puede invertir? ═════════ */
.s-alt .l{width:1680px;top:190px}
.al-n{font-size:44px;line-height:1;color:var(--green);letter-spacing:-.02em}
.s-alt h1{font-size:128px;margin-top:18px}
.al-list{position:absolute;left:120px;right:120px;top:470px;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.al-it{height:240px;border-radius:22px;background:var(--paper-2);padding:22px 26px 24px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;transition:background .25s,color .25s}
.al-it:hover{background:var(--paper-3)}
.al-it .n{font-family:var(--disp);font-weight:700;font-size:22px;opacity:.55}
.al-it b{font-family:var(--disp);font-size:38px;letter-spacing:-.025em;line-height:1.05;margin-top:auto}
.al-it .st{font-size:22px;font-weight:500;line-height:1.35;margin-top:10px;min-height:1.35em}
.al-it[data-s="1"]{background:var(--ink);color:#fff}
.al-it[data-s="2"]{background:var(--green);color:#fff}
.slide.active .al-it{animation:rise .7s var(--ease) both;animation-delay:calc(var(--i,0)*80ms + .1s)}
.al-q{position:absolute;left:120px;right:120px;top:790px}
.al-qt{font-family:var(--disp);font-weight:700;font-size:56px;letter-spacing:-.03em;line-height:1.08}
.al-q .src{margin-top:16px;font-size:22px}

/* ═════════ qué es una acción ═════════ */
.s-acc .l{width:1060px}
.ac-rows{margin-top:56px}
.ac-row{display:flex;gap:26px;align-items:center;padding:20px 0;border-top:2px solid var(--line)}
.ac-row p{font-size:32px;line-height:1.35}
.ac-i{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;flex-shrink:0}
.ac-i.g{background:var(--green-soft);color:var(--green)}
.ac-i.r{background:var(--red-soft);color:var(--red)}
.ac-i svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ac-art{position:absolute;left:1180px;right:120px;top:250px;height:680px}
.ac-pie{position:absolute;left:0;top:0;width:100%;height:620px;overflow:visible}
.ac-pie .sl{fill:var(--ink);stroke:#fff;stroke-width:5}
.ac-pie .me{fill:var(--green);stroke:#fff;stroke-width:5;transition:fill .5s}
.ac-pie g.pie{transition:transform .8s var(--ease)}
.ac-pie.up g.pie{transform:scale(1.07)}
.ac-pie.down g.pie{transform:scale(.88)}
.ac-pie.down .me{fill:var(--red)}
.ac-pie .lab{font:700 30px var(--disp);fill:var(--green);transition:fill .5s}
.ac-pie.down .lab{fill:var(--red)}
.ac-cap{position:absolute;left:0;right:0;bottom:0;text-align:center}

/* ═════════ cierre de la sesión 1 ═════════ */
.c1-rows{position:absolute;left:120px;top:300px;width:1060px}
.c1-row{display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:baseline;padding:20px 0;border-top:2px solid var(--line)}
.c1-row .n{font-family:var(--disp);font-weight:700;font-size:34px;color:var(--green)}
.c1-row p{font-size:29px;line-height:1.4}
.c1-next{position:absolute;left:1260px;right:120px;top:310px;background:var(--green-soft);border-radius:28px;padding:36px 40px}
.c1-next h2{font-size:64px;margin-top:4px}
.c1-next p{font-size:27px;line-height:1.45;margin-top:14px}
.c1-next .c1-bring{margin-top:20px;padding-top:18px;border-top:2px solid rgba(10,135,84,.2)}

/* mapa: lo que viene de la sesión 1 */
.ma-s1{position:absolute;left:120px;right:120px;top:890px;font-size:27px;color:var(--ink-2)}
.ma-s1 b{font-family:var(--disp);color:var(--ink)}
.ma-test{font:inherit;color:var(--green);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* quiz: la primera impresión */
.q-gut{margin:-14px 0 14px;font-size:24px}
.r-gut{font-size:26px;line-height:1.45;margin-top:14px;color:var(--ink-2);max-width:880px}
.r-gut b{color:var(--ink)}

/* volver a donde íbamos (fuera del escenario, como los controles) */
.back{position:fixed;left:18px;bottom:16px;z-index:20;display:none;align-items:center;gap:8px;height:38px;padding:0 18px 0 12px;border-radius:999px;background:var(--ink);color:#fff;font:700 14px var(--disp);transition:opacity .4s}
.back.on{display:inline-flex}
.back.hide{opacity:0;pointer-events:none}
.back svg{width:16px;height:16px}
.index .ses{font-family:var(--disp);font-weight:700;font-size:22px;color:var(--green);margin:30px 0 0;break-after:avoid}

@media (prefers-reduced-motion:reduce){
  [data-f]{transform:none;transition:opacity .2s}
  .slide.active .agenda li,.mo-list li,.slide.active .al-it,.slide.active .oc-svg .yr{animation:none}
  .quiz.swap,.swap,.result{animation:none}
}

/* ───────── imprimir el plan (una sola página 16:9) ───────── */
@page{size:1920px 1080px;margin:0}
@media print{
  html,body{overflow:visible;height:auto;background:#fff}
  .ctrl,.index,.ajustes,.bar,.no-print{display:none!important}
  .stage{position:relative;left:auto;top:auto;transform:none!important}
  .slide{display:none!important}
  .slide.print-me{display:block!important;opacity:1!important;visibility:visible!important}
  .slide.print-me [data-f]{opacity:1!important;transform:none!important}
}