:root{
  --bg:#0a1324; --lowest:#050e1f; --low:#131b2d; --container:#171f31; --high:#212a3c;
  --card:#0f1d32; --navy:#0c192c;
  --border:#1e293b; --border-2:#334155;
  --text:#dae2fa; --text-2:#bec7d3; --muted:#94a3b8; --white:#fff;
  --primary:#0098ea; --primary-hover:#38bdf8; --sky:#7bd0ff; --ok:#10b981;
  --r:.5rem; --r-lg:1rem;
  --head:'Plus Jakarta Sans',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 16px/24px var(--body);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}
::selection{background:var(--primary);color:#fff}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:760px}
section{padding:3rem 0}
h1,h2,h3{font-family:var(--head);color:var(--white)}
h1{font-size:36px;line-height:44px;font-weight:800;letter-spacing:-.02em}
h2{font-size:28px;line-height:36px;font-weight:700;letter-spacing:-.02em}
h3{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.01em}
.eyebrow{font:600 12px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--sky)}
.sub{color:var(--muted);font-size:14px;line-height:20px;margin-top:.5rem}
.head{text-align:center;margin-bottom:2.5rem}
.head .eyebrow{display:block;margin-bottom:.25rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(min-width:768px){h1{font-size:56px;line-height:64px;letter-spacing:-.03em}h2{font-size:40px;line-height:48px}section{padding:4.5rem 0}}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:48px;padding:0 1.5rem;border-radius:var(--r);font:600 14px/20px var(--body);letter-spacing:.01em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,transform .15s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 24px -8px rgba(0,152,234,.45)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-ghost{background:transparent;color:#fff;border-color:var(--border-2)}
.btn-ghost:hover{background:rgba(0,152,234,.1);border-color:var(--primary)}
.btn-sm{height:36px;padding:0 1rem}
.btn svg{width:18px;height:18px}

/* cabecera */
header.top{position:sticky;top:0;z-index:50;background:rgba(10,19,36,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:.5rem;padding-bottom:.5rem}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.logo{width:32px;height:32px;border-radius:var(--r);background:var(--container);border:1px solid var(--border-2);display:grid;place-items:center;color:var(--sky)}
.logo svg{width:16px;height:16px}
.brand b{display:block;font:700 18px/20px var(--head);color:#fff;letter-spacing:-.01em}
.brand small{display:block;font:500 12px/14px var(--body);color:var(--sky);letter-spacing:.03em;white-space:nowrap}

/* píldoras */
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:9999px;background:rgba(12,25,44,.8);border:1px solid var(--border);font:600 12px/16px var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--sky)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.dot{animation:none}html{scroll-behavior:auto}}

/* hero */
.hero{padding-top:2.5rem;padding-bottom:1.5rem;text-align:center}
.hero .pill{margin-bottom:1rem}
.hero h1{max-width:820px;margin:0 auto 1rem}
.hero h1 span{color:var(--sky)}
.hero p.lead{max-width:640px;margin:0 auto 1.5rem;color:var(--text-2)}
.price-pill{display:inline-block;padding:.375rem 1rem;border-radius:9999px;background:var(--container);border:1px solid var(--border-2);font:600 14px/20px var(--body);margin-bottom:1.5rem}
.price-pill b{color:var(--sky)}
.actions{display:flex;flex-direction:column;gap:.5rem;max-width:420px;margin:0 auto 1rem}
@media(min-width:640px){.actions{flex-direction:row;max-width:none;justify-content:center}}
.trust{display:flex;align-items:center;justify-content:center;gap:.5rem;color:var(--muted);font-size:14px}
.trust svg{width:18px;height:18px;color:var(--ok);flex:none}

/* demo: panel + vídeo vertical */
.demo{display:grid;gap:1.5rem;align-items:center;background:rgba(15,29,50,.9);border:1px solid var(--border);border-radius:var(--r-lg);padding:1rem;box-shadow:0 12px 32px -8px rgba(0,152,234,.15)}
@media(min-width:860px){.demo{grid-template-columns:1.1fr .9fr;padding:2rem;gap:2.5rem}}
.term{display:flex;flex-direction:column;gap:1rem}
.bar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:.5rem;font:600 14px/20px var(--body);color:#fff}
.bar span+span{font-weight:500;font-size:12px;color:var(--muted)}
.msg{background:rgba(33,42,60,.6);border:1px solid var(--border-2);border-radius:var(--r);padding:.75rem}
.msg small{display:block;font:600 12px/16px var(--body);color:var(--muted);margin-bottom:.25rem;letter-spacing:.03em}
.msg p{color:#fff}
.steps{background:rgba(5,14,31,.8);border:1px solid var(--border);border-radius:var(--r);padding:.75rem;display:grid;gap:.5rem;font-size:13px;line-height:18px;color:var(--text-2)}
.steps li{list-style:none;display:flex;gap:.5rem;align-items:flex-start;background:var(--container);padding:.4rem .5rem;border-radius:4px}
.steps li::before{content:"✓";color:var(--ok);font-weight:700}
.steps li.ask{border:1px solid rgba(0,152,234,.45)}
.steps li.ask::before{content:"?";color:var(--sky)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;font-size:12px}
.chip{background:var(--container);border:1px solid var(--border);border-radius:4px;padding:.25rem .5rem;color:var(--text-2)}
.chip.ok{color:var(--ok);border-color:rgba(16,185,129,.35)}

/* vídeo */
.vid{position:relative;width:100%;max-width:300px;margin:0 auto;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border-2);background:var(--lowest);box-shadow:0 20px 40px -12px rgba(0,0,0,.6)}
.vid video{width:100%;height:100%;object-fit:cover}
.vid button.play{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(transparent 55%,rgba(5,14,31,.65));border:0;cursor:pointer;color:#fff}
.vid button.play span{width:56px;height:56px;border-radius:50%;background:rgba(0,152,234,.92);display:grid;place-items:center;box-shadow:0 8px 24px -4px rgba(0,152,234,.5);transition:transform .15s}
.vid button.play:hover span{transform:scale(1.08)}
.vid button.play svg{width:24px;height:24px;margin-left:3px}
.vid.playing button.play{display:none}
.hero-reel{max-width:300px;margin:0 auto;display:grid;gap:.75rem}
.vid .tag{position:absolute;left:.5rem;top:.5rem;background:rgba(5,14,31,.9);border:1px solid var(--border);padding:.125rem .5rem;border-radius:4px;font:500 11px/16px ui-monospace,Menlo,monospace;color:var(--sky);pointer-events:none}

/* métricas */
.metrics{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(5,14,31,.4);padding:2rem 0}
.metrics .wrap{display:grid;gap:1.5rem;text-align:center}
@media(min-width:768px){.metrics .wrap{grid-template-columns:repeat(2,1fr)}.metrics .wrap>div+div{border-left:1px solid var(--border)}}
.metrics b{display:block;font:800 32px/40px var(--head);color:var(--sky)}
.metrics span{font-size:14px;color:var(--muted)}

/* tarjetas */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1rem;transition:border-color .15s,box-shadow .15s}
@media(min-width:768px){.card{padding:1.5rem}}
.card.hov:hover{border-color:rgba(0,152,234,.5);box-shadow:0 12px 32px -8px rgba(0,152,234,.15)}
.stack{display:grid;gap:1.5rem}
.fig{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;font:600 12px/16px ui-monospace,Menlo,monospace;color:var(--sky)}
.fig em{font-style:normal;background:var(--container);padding:.125rem .5rem;border-radius:4px;color:var(--muted);font-family:var(--body)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--text-2);font-size:15px}
.code{margin-top:1rem;background:var(--lowest);border:1px solid var(--border);border-radius:var(--r);padding:.75rem;font:13px/20px ui-monospace,Menlo,monospace;color:var(--text)}
.code .p{color:var(--sky);font-weight:700}
.code .ln{display:flex;gap:.5rem;color:var(--muted)}
.code .ln i{color:var(--ok);font-style:normal}
.grid2{display:grid;gap:1rem}
@media(min-width:768px){.grid2{grid-template-columns:1fr 1fr}}
.grid3{display:grid;gap:1rem}
@media(min-width:768px){.grid3{grid-template-columns:repeat(3,1fr)}}
.ico{width:40px;height:40px;border-radius:var(--r);background:var(--container);border:1px solid var(--border);display:grid;place-items:center;color:var(--primary);margin-bottom:.75rem}
.ico svg{width:20px;height:20px}
.card.small h3{font-size:18px;line-height:24px}
.card.small p{font-size:14px;line-height:20px;color:var(--muted)}

/* muestras publicadas */
.reels{display:grid;gap:1.5rem}
@media(min-width:768px){.reels{grid-template-columns:repeat(3,1fr)}}
.reel{display:flex;flex-direction:column;gap:.75rem}
.reel{width:100%;max-width:340px;margin:0 auto}
.reel .vid{max-width:none}
@media(min-width:768px){.reel{max-width:none}}
.reel h3{font-size:16px;line-height:24px}
.reel small{color:var(--muted);font-size:13px}
.ver{display:flex;align-items:center;gap:.25rem;color:var(--sky);font-size:13px}
.stats{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:13px;color:var(--muted)}
.reel .stats{margin-top:auto}
.stats .views{display:flex;align-items:center;gap:.375rem}
.stats .views b{color:#fff;font-weight:600}
.stats svg{width:16px;height:16px;flex:none}
.stats a{display:inline-flex;align-items:center;gap:.25rem;color:var(--sky);text-decoration:none}
.stats a:hover{text-decoration:underline}
.note{margin-top:1.5rem;text-align:center;color:var(--muted);font-size:13px}

/* requisitos */
.req{list-style:none;padding:0;display:grid;gap:.75rem}
.req li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start}
.req b{color:#fff;font-weight:600}
.req span{color:var(--text-2);font-size:14px;line-height:20px;display:block}
.tagx{font:600 11px/16px var(--body);letter-spacing:.05em;text-transform:uppercase;padding:.125rem .5rem;border-radius:9999px;border:1px solid var(--border-2);color:var(--muted);align-self:start;margin-top:2px}
.tagx.need{color:var(--sky);border-color:rgba(0,152,234,.5)}

/* precio */
.price{max-width:520px;margin:0 auto;background:var(--card);border:2px solid var(--primary);border-radius:1.5rem;padding:1.5rem;position:relative;overflow:hidden;box-shadow:0 12px 32px -8px rgba(0,152,234,.25)}
.price .ribbon{position:absolute;top:0;right:0;background:var(--primary);color:#fff;font:700 11px/16px ui-monospace,Menlo,monospace;padding:.25rem .75rem;border-bottom-left-radius:var(--r)}
.price .amount{display:flex;align-items:baseline;gap:.5rem;margin:.5rem 0}
.price .amount b{font:800 40px/48px var(--head);color:#fff}
.price ul{list-style:none;padding:1rem 0;margin:1rem 0 .5rem;border-top:1px solid var(--border);display:grid;gap:.75rem;font-size:14px;line-height:20px}
.price li{display:flex;gap:.625rem;align-items:flex-start;color:var(--text)}
.price li svg,.ok-ico{width:18px;height:18px;color:var(--ok);flex:none;margin-top:1px}
.price .btn{width:100%}
.price .fine{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}

/* garantía */
.guar{display:flex;flex-direction:column;gap:1.5rem;align-items:center;text-align:center;background:var(--low);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem}
.guar .badge{width:80px;height:80px;flex:none;border-radius:1rem;background:var(--container);border:1px solid var(--border-2);display:grid;place-items:center;color:var(--sky)}
.guar .badge svg{width:40px;height:40px}
@media(min-width:768px){.guar{flex-direction:row;text-align:left;padding:2rem}}

/* faq */
details{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1rem;transition:border-color .15s}
details[open]{border-color:var(--primary)}
details+details{margin-top:.5rem}
summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;list-style:none;font:600 16px/24px var(--head);color:#fff}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--sky);border-bottom:2px solid var(--sky);transform:rotate(45deg);transition:transform .2s;flex:none;margin-top:-4px}
details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
details p{margin-top:.75rem;color:var(--text-2);font-size:14px;line-height:22px}

/* cierre + legal */
.final{text-align:center;background:rgba(33,42,60,.7);border:1px solid var(--border);border-radius:1.5rem;padding:2.5rem 1.25rem}
.final p{max-width:520px;margin:.5rem auto 1.5rem;color:var(--text-2)}
.legal h3{font-size:16px;margin-bottom:.5rem}
.legal p,.legal li{color:var(--muted);font-size:13px;line-height:20px}
.legal ul{padding-left:1.1rem}
footer{background:var(--lowest);border-top:1px solid var(--border);margin-top:2rem}
footer .wrap{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;padding-top:2.5rem;padding-bottom:2.5rem}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;font:600 12px/16px var(--body);letter-spacing:.03em}
footer nav a{color:var(--muted);text-decoration:none}
footer nav a:hover{color:var(--sky);text-decoration:underline}
footer p{color:var(--muted);font-size:13px;max-width:640px}

/* guía de inicio */
nav.links{display:none;gap:1.25rem;font:600 14px/20px var(--body)}
nav.links a{color:var(--text-2);text-decoration:none}
nav.links a:hover{color:var(--sky)}
@media(min-width:640px){nav.links{display:flex}}
.top .right{display:flex;align-items:center;gap:1.5rem}
.guide-hero{text-align:center;padding-top:2.5rem;padding-bottom:1rem}
.guide-hero p{max-width:560px;margin:1rem auto 0;color:var(--text-2)}
.need{display:grid;gap:.75rem}
.need li{list-style:none;display:flex;gap:.625rem;align-items:flex-start;font-size:15px;line-height:22px;color:var(--text)}
.need b{color:#fff;font-weight:600}
.need span{color:var(--muted)}
.step{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.num{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font:700 16px/1 var(--head);box-shadow:0 8px 20px -6px rgba(0,152,234,.5)}
.step h3{margin:.25rem 0 .5rem}
.step p,.step li{color:var(--text-2);font-size:15px;line-height:23px}
.step p+p,.step p+.cmd,.step p+.dl,.step .cmd+p,.step ul+p{margin-top:.75rem}
.step ul,.step ol{padding-left:1.1rem;display:grid;gap:.375rem;margin-top:.5rem}
.step b{color:#fff;font-weight:600}
.step .tip{margin-top:.75rem;padding:.625rem .75rem;border-left:3px solid var(--primary);background:rgba(0,152,234,.08);border-radius:0 var(--r) var(--r) 0;font-size:14px;line-height:21px;color:var(--text-2)}
.dl{display:flex;flex-wrap:wrap;gap:.5rem}
.cmd{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:var(--lowest);border:1px solid var(--border-2);border-radius:var(--r);padding:.5rem .5rem .5rem .875rem;font:15px/22px ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff}
.cmd .p{color:var(--sky);font-weight:700;margin-right:.5rem}
.cmd button{flex:none;height:32px;padding:0 .75rem;border-radius:6px;border:1px solid var(--border-2);background:var(--container);color:var(--text);font:600 12px/16px var(--body);cursor:pointer}
.cmd button:hover{border-color:var(--primary);background:rgba(0,152,234,.12)}
.cmd button.done{color:var(--ok);border-color:rgba(16,185,129,.5)}
.pages{display:grid;gap:.5rem;margin-top:.75rem}
.pages div{background:var(--container);border:1px solid var(--border);border-radius:var(--r);padding:.5rem .75rem;font-size:14px;line-height:21px;color:var(--text-2)}
.pages b{color:var(--sky)}
.opt{margin-top:.5rem}
.opt details{background:var(--lowest)}
.opt summary{font-size:15px}
.opt ol{padding-left:1.25rem;margin-top:.75rem;display:grid;gap:.375rem;font-size:14px;line-height:21px;color:var(--text-2)}
.opt p{margin-top:.5rem}
@media(max-width:480px){.step{grid-template-columns:1fr}.num{width:32px;height:32px}}

/* documentos legales */
.doc{padding-top:2rem}
.doc .toc{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.25rem}
.doc .toc a{padding:.375rem .875rem;border-radius:9999px;border:1px solid var(--border-2);font:600 13px/20px var(--body);color:var(--text-2);text-decoration:none}
.doc .toc a:hover{border-color:var(--primary);color:var(--sky)}
.doc article{scroll-margin-top:80px}
.doc article+article{margin-top:1.5rem}
.doc h2{font-size:24px;line-height:32px;margin-bottom:1rem}
.doc h3{font-size:17px;line-height:24px;margin:1.25rem 0 .375rem}
.doc p,.doc li{color:var(--text-2);font-size:15px;line-height:24px}
.doc p+p{margin-top:.75rem}
.doc ul,.doc ol{padding-left:1.25rem;display:grid;gap:.375rem;margin-top:.5rem}
.doc b{color:#fff;font-weight:600}
.doc .upd{color:var(--muted);font-size:13px;text-align:center;margin-top:.75rem}
