:root{--ink:#0f1b2d;--mut:#5a6779;--r:#c8102e;--r2:#e63950;--n:#1d3557;--ln:#e3e8ef;--sh:0 1px 2px rgba(15,27,45,.05),0 16px 40px rgba(15,27,45,.1)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:auto}
body{font:16px/1.6 "Segoe UI",system-ui,-apple-system,Tahoma,sans-serif;color:var(--ink);background:#fff}a{color:inherit;text-decoration:none}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:linear-gradient(180deg,#fff,#f3f6fb)}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;transition:background .9s;will-change:transform}
.b1{width:520px;height:520px;top:-160px;right:-120px;background:#ffd6dc;transform:translate(calc(var(--p,0)*-300px),calc(var(--p,0)*400px))}
.b2{width:480px;height:480px;bottom:-180px;left:-140px;background:#cfe0f7;transform:translate(calc(var(--p,0)*320px),calc(var(--p,0)*-300px))}
[data-tone=b] .b1{background:#cfe0f7}[data-tone=b] .b2{background:#ffd6dc}
.bignum{position:absolute;right:4vw;bottom:-4vw;font-size:34vw;line-height:1;font-weight:800;color:var(--n);opacity:.045;letter-spacing:-.05em;pointer-events:none;user-select:none}
.top{position:absolute;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:18px 32px}.logo{height:44px;display:block}
.cnt{display:flex;align-items:baseline;gap:6px;font-weight:600;color:var(--mut)}.cnt b{font-size:22px;color:var(--r)}.lbl{margin-left:14px;padding:6px 14px;border:1px solid var(--ln);border-radius:30px;background:#fff;font-size:13px;color:var(--n)}
.bar{position:absolute;top:0;left:0;right:0;height:3px;z-index:11}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--r),var(--n))}
.rail{position:absolute;right:22px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:6px}
.rail button{position:relative;display:flex;justify-content:flex-end;align-items:center;gap:12px;background:none;border:0;cursor:pointer;padding:6px 0}
.rail i{width:10px;height:10px;border-radius:50%;background:#c6cfdb;transition:.3s}.rail .on i{background:var(--r);transform:scale(1.5);box-shadow:0 0 0 5px rgba(200,16,46,.15)}
.rail span{font-size:12px;font-weight:600;color:var(--n);background:#fff;border:1px solid var(--ln);padding:3px 10px;border-radius:20px;opacity:0;transform:translateX(8px);transition:.25s;pointer-events:none;white-space:nowrap}.rail button:hover span{opacity:1;transform:none}
.sc{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr 1fr;gap:5vw;align-items:center;padding:90px 90px 70px 7vw;opacity:0;visibility:hidden}
.tx{transform:translateY(var(--dy,0))}.vis{transform:translateY(calc(var(--dy,0)*-.6)) scale(var(--sc,1));display:flex;justify-content:center;align-items:center}
.kick{display:inline-flex;align-items:center;gap:12px;color:var(--r);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.kick::before{content:"";width:28px;height:2px;background:var(--r)}
h1{font-size:clamp(38px,5.6vw,76px);line-height:1.06;font-weight:800;letter-spacing:-.03em;margin:20px 0}
h2{font-size:clamp(28px,3.8vw,52px);line-height:1.1;font-weight:800;letter-spacing:-.025em;margin:16px 0;color:var(--ink)}
.grad{background:linear-gradient(100deg,var(--r),var(--r2) 45%,var(--n));-webkit-background-clip:text;background-clip:text;color:transparent}
.tx>p{color:var(--mut);font-size:clamp(15px,1.5vw,19px);max-width:520px}
.hint{display:inline-flex;align-items:center;gap:10px;margin-top:30px;color:var(--n);font-weight:600;font-size:14px}.hint .ic{animation:dn 1.6s infinite;color:var(--r)}@keyframes dn{50%{transform:translateY(6px)}}
.hero-card{position:relative;width:min(420px,100%);aspect-ratio:1/1.05}.hero-card img{position:absolute;width:78%;border-radius:20px;background:#fff;padding:7px;box-shadow:0 30px 70px rgba(15,27,45,.22);animation:bob 7s ease-in-out infinite}.hero-card img:first-child{left:0;top:0}.hero-card .h2{right:0;bottom:0;animation-delay:-3.5s}@keyframes bob{50%{translate:0 -12px}}
.photo{width:min(500px,100%);border-radius:24px;background:#fff;padding:9px;box-shadow:0 34px 80px rgba(15,27,45,.22)}.photo img{display:block;width:100%;border-radius:16px}
.fl{list-style:none;padding:0;display:grid;gap:14px;margin-top:26px;max-width:540px}
.fl li{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--ln);border-radius:16px;padding:16px 18px;box-shadow:var(--sh);color:var(--mut);font-size:14.5px;line-height:1.45}.fl b{display:block;color:var(--n);font-size:16px;margin-bottom:2px}
.ico{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#fdecef,#e8eff9);color:var(--r)}
.bars{display:grid;gap:22px;width:min(520px,100%)}.bw{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:end;background:#fff;border:1px solid var(--ln);border-radius:16px;padding:16px 20px;box-shadow:var(--sh)}
.bw span{font-weight:700;color:var(--n)}.bw em{font-style:normal;color:var(--r);font-weight:800}.bt{grid-column:1/-1;height:10px;background:#eef1f6;border-radius:8px;overflow:hidden}.bt i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--r),var(--r2))}
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:540px}.ch{background:#fff;border:1px solid var(--ln);border-radius:40px;padding:13px 22px;font-weight:600;color:var(--n);box-shadow:var(--sh);border-left:4px solid var(--r)}
.rk{list-style:none;padding:0;margin-top:24px;display:grid;gap:10px;counter-reset:q}.rk li{counter-increment:q;display:flex;align-items:center;gap:14px;font-weight:600;color:var(--n)}.rk li::before{content:counter(q);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--r);color:#fff;font-size:13px}
.ring{position:relative;width:min(340px,70vw);aspect-ratio:1}.ring svg:first-child{width:100%;transform:rotate(-90deg)}.rb,.rf{fill:none;stroke-width:14}.rb{stroke:#e8edf4}.rf{stroke:var(--r);stroke-linecap:round;transition:stroke-dashoffset .5s}
.rc{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;color:var(--mut);font-size:14px}.rc .ic{width:34px;height:34px;color:var(--n)}.rc b{font-size:72px;line-height:1;color:var(--n)}
.mv{display:grid;gap:20px;width:min(520px,100%)}.mv div{background:#fff;border:1px solid var(--ln);border-left:5px solid var(--r);border-radius:18px;padding:26px 28px;box-shadow:var(--sh)}.mv b{color:var(--r);text-transform:uppercase;letter-spacing:.12em;font-size:13px}.mv p{margin-top:8px;color:var(--mut)}
.cl{display:grid;gap:14px;width:min(440px,100%)}.cl a{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,var(--n),#13243f);color:#fff;padding:18px 22px;border-radius:18px;font-weight:700;font-size:18px;box-shadow:0 20px 44px rgba(29,53,87,.28);transition:background .25s,translate .25s}.cl a:hover{background:var(--r);translate:6px 0}
.cl small{display:block;font-size:12px;opacity:.7;font-weight:500}.cl .ico{background:rgba(255,255,255,.14);color:#fff}
.ft{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:13px;color:var(--mut);z-index:10}.ft a{color:var(--r);font-weight:700;border-bottom:1px solid currentColor}
@media(max-width:860px){.sc{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:18px;align-items:start;padding:80px 22px 64px 22px}.vis{align-self:center}.rail{right:8px}.rail span{display:none}.top{padding:14px 18px}.logo{height:36px}.lbl{display:none}
 .hero-card{width:min(280px,70vw)}.photo{width:min(270px,70%)}.fl{gap:8px;margin-top:14px}.fl li{padding:11px 14px;font-size:13px}.ico{width:38px;height:38px}.tx>p{max-width:none}.bars{gap:12px}.bw{padding:12px 16px}.ring{width:min(240px,58vw)}.rc b{font-size:52px}.rk{margin-top:14px;gap:6px;font-size:14px}.chips{gap:8px}.ch{padding:9px 14px;font-size:13px}.mv{gap:12px}.mv div{padding:16px 18px;font-size:14px}.cl a{padding:14px 16px;font-size:16px}h2{margin:10px 0}}
@media(max-width:860px) and (max-height:700px){.photo{width:min(240px,70%)}.fl li:nth-child(n+3){display:none}.hero-card{width:min(200px,60vw)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.blob{transform:none!important}}

/* aviso de demostración */
.demo{position:fixed;top:0;left:0;right:0;z-index:100;height:28px;padding:0 12px;background:#0f1b2d;color:#fff;font:12px/28px "Segoe UI",system-ui,sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:2px solid #c8102e}
.demo b{color:#ff8a9b;text-transform:uppercase;letter-spacing:.06em}.demo .s{display:none}
.demo-f{max-width:820px;margin:14px auto 0;padding:10px 16px;font-size:12px;line-height:1.5;color:inherit;border:1px solid currentColor;border-radius:8px;opacity:.85;text-align:center}
@media(max-width:700px){.demo .l{display:none}.demo .s{display:inline}}
.bar{top:28px!important}.top{padding-top:46px!important}.ft{bottom:8px!important}.demo-f{margin:4px 14px 0;padding:4px 10px;font-size:11px;border:0;opacity:.8}@media(max-width:860px){.sc{padding-bottom:104px!important}.demo-f{font-size:10px;line-height:1.35}}
.sc{padding-bottom:96px!important}
@media(max-width:860px){.sc{padding-bottom:150px!important}.ft{background:rgba(255,255,255,.94);padding:6px 8px 8px;bottom:0!important}.photo{width:min(230px,62%)!important}}