/* CONSTELA 360 · G8 «Cosmic» · Sitio público. Sin dependencias externas (CSP: self). */
@font-face{font-family:"Constela Sans";src:url("/assets/fonts/plus-jakarta-sans-var.woff?v=g8") format("woff");font-weight:200 800;font-display:swap}
:root{
 --font:"Constela Sans","Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 --night:#070B22;--night-2:#0B1131;--night-3:#121A48;--ink:#11143A;--ink-2:#30355E;--muted:#5F668C;--faint:#8A90B0;
 --line:#E3E5F1;--bg:#F6F7FC;--white:#fff;
 --n-text:#EEF0FF;--n-muted:#A9B1DC;--n-line:rgba(160,174,255,.16);
 --cyan:#19B4FF;--blue:#2F6BFF;--violet:#7A3CF0;--orchid:#B24BE8;
 --grad:linear-gradient(135deg,#2F6BFF 0%,#5B45F2 55%,#8B3FEA 100%);
 --grad-text:linear-gradient(100deg,#5CC8FF 0%,#7C8CFF 40%,#B78CFF 75%,#E39BFF 100%);
 --r:18px;--r-lg:26px;--ease:cubic-bezier(.2,.7,.2,1);
 --shadow:0 30px 80px -30px rgba(10,14,60,.45);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;letter-spacing:-.03em;line-height:1.1;font-weight:800}
p{margin:0}
:focus-visible{outline:2px solid #7C8CFF;outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;z-index:999;background:#fff;color:var(--ink);padding:10px 14px;border-radius:10px}
.skip:focus{left:12px}
.shell{width:min(1220px,100% - 40px);margin-inline:auto}
.narrow{width:min(860px,100% - 40px)}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin-bottom:14px}
.dark .eyebrow,.hero .eyebrow,.final .eyebrow{color:#B9A6FF}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 20px;border-radius:12px;font:700 .94rem/1.1 var(--font);text-decoration:none;border:1px solid transparent;transition:transform .2s var(--ease),box-shadow .25s,background .2s,filter .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-lg{min-height:54px;padding:15px 26px;font-size:1rem;border-radius:14px}
.btn-sm{min-height:40px;padding:9px 16px;font-size:.86rem;border-radius:11px}
.btn-glow{background:var(--grad);color:#fff;box-shadow:0 12px 30px -10px rgba(91,69,242,.75),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-glow:hover{filter:brightness(1.08);box-shadow:0 18px 40px -12px rgba(91,69,242,.9),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-ghost{color:var(--n-text);border-color:rgba(190,200,255,.28);background:rgba(255,255,255,.04)}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(190,200,255,.5)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1E2360}
.btn-light{background:#fff;color:#24186E;box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}

/* Cielo estrellado (sin imágenes) */
.sky{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.sky::before{content:"";position:absolute;inset:-10%;background-image:
 radial-gradient(1.3px 1.3px at 8% 18%,#fff,transparent 60%),radial-gradient(1px 1px at 18% 62%,rgba(255,255,255,.7),transparent 60%),
 radial-gradient(1.6px 1.6px at 29% 28%,rgba(255,255,255,.9),transparent 60%),radial-gradient(1px 1px at 37% 82%,rgba(200,210,255,.7),transparent 60%),
 radial-gradient(1.2px 1.2px at 46% 12%,#fff,transparent 60%),radial-gradient(1px 1px at 55% 48%,rgba(255,255,255,.5),transparent 60%),
 radial-gradient(1.5px 1.5px at 64% 74%,rgba(255,255,255,.85),transparent 60%),radial-gradient(1px 1px at 72% 22%,rgba(200,210,255,.8),transparent 60%),
 radial-gradient(1.3px 1.3px at 81% 56%,#fff,transparent 60%),radial-gradient(1px 1px at 90% 14%,rgba(255,255,255,.65),transparent 60%),
 radial-gradient(1.1px 1.1px at 95% 86%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1px 1px at 4% 90%,rgba(200,210,255,.7),transparent 60%);
 opacity:.85;animation:twinkle 9s ease-in-out infinite alternate}
.sky.soft::before{opacity:.45}
@keyframes twinkle{from{opacity:.55}to{opacity:.9}}
.orbit{position:absolute;border-radius:50%;border:1px solid rgba(150,160,255,.14)}
.o1{width:1100px;height:1100px;right:-380px;top:-420px}
.o2{width:760px;height:760px;right:-200px;top:-240px;border-color:rgba(120,190,255,.16)}
.o3{width:460px;height:460px;right:-40px;top:-80px;border-color:rgba(190,140,255,.18)}
.orbit::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff,#8FB4FF 50%,transparent 70%);box-shadow:0 0 16px 4px rgba(120,160,255,.6);top:50%;left:-5px}
.o2::after{top:12%;left:14%;background:radial-gradient(circle,#fff,#D59BFF 50%,transparent 70%);box-shadow:0 0 16px 4px rgba(190,120,255,.6)}
.o3::after{top:auto;bottom:6%;left:30%}

/* Cabecera */
.site-head{position:sticky;top:0;z-index:100;background:rgba(7,11,34,.72);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--n-line);color:var(--n-text)}
.head-row{display:flex;align-items:center;gap:22px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.15rem;letter-spacing:-.03em;color:inherit}
.brand img{width:36px;height:36px;filter:drop-shadow(0 4px 12px rgba(120,100,255,.55))}
.brand b{margin-left:4px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{color:var(--n-muted);text-decoration:none;font-size:.9rem;font-weight:600;padding:8px 12px;border-radius:999px;transition:color .2s,background .2s}
.nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.head-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.link-login{color:var(--n-text);text-decoration:none;font-weight:700;font-size:.9rem;padding:8px 12px;border-radius:10px}
.link-login:hover{background:rgba(255,255,255,.07)}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;display:grid;gap:4px;place-content:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--n-line);cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{display:block;width:18px;height:2px;border-radius:2px;background:#fff}
.mnav nav{position:absolute;right:0;top:52px;display:flex;flex-direction:column;min-width:220px;padding:8px;border-radius:16px;background:#0E1440;border:1px solid var(--n-line);box-shadow:var(--shadow)}
.mnav nav a{padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--n-text);font-weight:650}
.mnav nav a:hover{background:rgba(255,255,255,.07)}

/* Hero */
.hero{position:relative;overflow:hidden;color:var(--n-text);background:radial-gradient(900px 520px at 85% 15%,rgba(122,60,240,.35),transparent 60%),radial-gradient(800px 500px at 0% 90%,rgba(25,180,255,.20),transparent 60%),linear-gradient(170deg,#060A20 0%,#0B1236 50%,#130E3D 100%);padding:76px 0 34px;isolation:isolate}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:52px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;border:1px solid rgba(190,200,255,.22);background:rgba(255,255,255,.05);font-size:.8rem;font-weight:700;color:#D6DBFF;letter-spacing:.02em}
.pulse{width:8px;height:8px;border-radius:50%;background:#5CE1B5;box-shadow:0 0 0 0 rgba(92,225,181,.6);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(92,225,181,.55)}70%{box-shadow:0 0 0 10px rgba(92,225,181,0)}100%{box-shadow:0 0 0 0 rgba(92,225,181,0)}}
.hero h1{font-size:clamp(2.3rem,4.3vw,3.65rem);margin:22px 0 22px;color:#fff;line-height:1.05;text-wrap:balance}
.lead{font-size:1.13rem;color:var(--n-muted);max-width:560px;line-height:1.7}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 26px}
.proof{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0;color:#C3C9F0;font-size:.88rem;font-weight:600}
.proof li::before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:rgba(92,225,181,.15);color:#5CE1B5;font-size:.7rem}
.hero-shot{position:relative;margin:0}
.frame{position:relative;border-radius:20px;padding:6px;background:linear-gradient(140deg,rgba(130,150,255,.45),rgba(160,100,255,.25) 40%,rgba(80,200,255,.25));box-shadow:0 50px 120px -40px rgba(60,40,200,.75),0 0 0 1px rgba(255,255,255,.06)}
.frame::before{content:"";position:absolute;inset:-30px;z-index:-1;border-radius:40px;background:radial-gradient(closest-side,rgba(110,90,255,.45),transparent);filter:blur(20px)}
.frame-bar{display:flex;align-items:center;gap:6px;padding:8px 10px 10px;color:#9AA3D6;font-size:.72rem;font-weight:600}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.frame-bar span{margin-left:10px}
.frame img{border-radius:14px;width:100%}
.float{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:rgba(14,19,58,.82);border:1px solid rgba(170,182,255,.24);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 20px 50px -20px rgba(0,0,0,.8);color:#fff;animation:float 6s ease-in-out infinite}
.float strong{display:block;font-size:.86rem}
.float small{display:block;color:var(--n-muted);font-size:.74rem}
.f1{left:-28px;bottom:58px}
.f2{right:-14px;top:-22px;gap:6px;animation-delay:-3s}
.dot.live{width:10px;height:10px;border-radius:50%;background:#5CE1B5;box-shadow:0 0 0 4px rgba(92,225,181,.18)}
.chip{padding:5px 10px;border-radius:999px;font-size:.74rem;font-weight:700;border:1px solid}
.c-support{color:#7CF0D2;border-color:rgba(61,214,181,.55);background:rgba(61,214,181,.1)}
.c-loyal{color:#D3BCFF;border-color:rgba(179,140,255,.55);background:rgba(179,140,255,.1)}
.c-dist{color:#B9C3E6;border-color:rgba(131,144,184,.55);background:rgba(131,144,184,.1)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-shot figcaption{margin-top:14px;text-align:center;color:#7F88B8;font-size:.76rem}
.trust{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:56px;padding-top:24px;border-top:1px solid var(--n-line)}
.trust span{display:flex;align-items:center;gap:10px;color:#C9CEF2;font-weight:650;font-size:.9rem}
.trust b{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--n-line);color:#B9A6FF}

/* Secciones */
.section{position:relative;padding:104px 0}
.light{background:var(--white)}
.light.tint{background:var(--bg)}
.dark{background:radial-gradient(900px 500px at 100% 0%,rgba(122,60,240,.22),transparent 60%),linear-gradient(180deg,#080C26,#0C1235);color:var(--n-text);overflow:hidden;isolation:isolate}
.dark>.shell{position:relative;z-index:1}
.intro{max-width:780px;margin:0 auto 54px;text-align:center}
.intro h2{text-wrap:balance}
.intro h2,.split h2,.mobile h2,.resp h2,.final h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.intro>p:last-child{margin-top:18px;color:var(--muted);font-size:1.06rem;line-height:1.7}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{position:relative;padding:30px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(17,20,58,.05);transition:transform .25s var(--ease),box-shadow .3s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(40,40,140,.35);border-color:#D2CFF4}
.card.q .num{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--grad);color:#fff;font-weight:800;font-size:.86rem;box-shadow:0 10px 24px -10px rgba(91,69,242,.7)}
.card.q h3{font-size:1.18rem;margin:22px 0 10px;line-height:1.3}
.card p{color:var(--muted);line-height:1.65}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-bottom:46px}
.split p{color:var(--n-muted);font-size:1rem}
.show{display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:auto auto;gap:18px}
.show-card{border-radius:var(--r-lg);background:rgba(255,255,255,.035);border:1px solid var(--n-line);overflow:hidden;transition:transform .3s var(--ease),border-color .2s}
.show-card:hover{transform:translateY(-4px);border-color:rgba(170,182,255,.32)}
.show-card.wide{display:flex;flex-direction:column}
.show-card.features{grid-column:1/-1}
.show-card.features .feat{grid-template-columns:repeat(4,1fr);gap:20px}
.shot{padding:10px 10px 0}
.shot img{border-radius:14px;border:1px solid rgba(255,255,255,.06)}
.show-body{padding:22px 24px 26px}
.show-body h3{font-size:1.2rem;margin:10px 0 8px;color:#fff;line-height:1.3}
.show-body p{color:var(--n-muted);font-size:.95rem;line-height:1.65}
.tag{display:inline-flex;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9FD8FF}
.features{padding:22px}
.feat{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.feat li{display:flex;gap:12px;align-items:flex-start}
.feat b{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:rgba(122,60,240,.18);color:#D0BEFF;border:1px solid rgba(179,140,255,.3)}
.feat strong{display:block;color:#fff;font-size:.92rem}
.feat span{color:var(--n-muted);font-size:.84rem;line-height:1.5}
.note{margin-top:22px;text-align:center;color:#7F88B8;font-size:.82rem}
.aud{display:flex;flex-direction:column;padding:34px}
.aud-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,rgba(47,107,255,.12),rgba(139,63,234,.14));color:var(--violet);font-size:1.4rem;margin-bottom:18px;border:1px solid rgba(122,60,240,.15)}
.kicker{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.aud h3{font-size:1.6rem;margin:6px 0 12px}
.checks{list-style:none;padding:0;margin:20px 0 28px;display:grid;gap:10px}
.checks li{display:flex;gap:10px;color:var(--ink-2);font-weight:550}
.checks li::before{content:"✓";flex:0 0 22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#EEEAFE;color:var(--violet);font-size:.72rem;font-weight:800}
.aud .btn{margin-top:auto;align-self:flex-start}
.aud.alt{background:radial-gradient(500px 220px at 100% 0%,rgba(25,180,255,.10),transparent 70%),#fff}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:6%;right:6%;top:26px;height:2px;background:linear-gradient(90deg,transparent,#C9C2F7 15%,#C9C2F7 85%,transparent)}
.steps li{position:relative;padding:0 8px;text-align:center}
.steps span{position:relative;display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid #D9D3FA;color:var(--violet);font-weight:800;box-shadow:0 10px 24px -14px rgba(91,69,242,.6)}
.steps h3{font-size:1.06rem;margin:18px 0 8px}
.steps p{color:var(--muted);font-size:.93rem;line-height:1.6}
.mobile-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.lead-sm{color:var(--n-muted);margin:18px 0 26px;font-size:1.04rem;line-height:1.7}
.modes{display:grid;gap:12px}
.modes div{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--n-line)}
.modes span{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(122,60,240,.2);color:#D0BEFF;font-weight:800;font-size:.8rem}
.modes strong{color:#fff}
.modes p{color:var(--n-muted);font-size:.9rem}
.phone{margin:0;justify-self:center}
.phone-body{width:min(300px,72vw);padding:10px;border-radius:44px;background:linear-gradient(160deg,#2A2F66,#11153C);box-shadow:0 50px 100px -40px rgba(80,60,255,.6),inset 0 0 0 1px rgba(255,255,255,.12)}
.phone-body img{border-radius:34px}
.phone figcaption{text-align:center;margin-top:14px;color:#7F88B8;font-size:.78rem}
.resp{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.resp p{color:var(--muted);line-height:1.75;margin-bottom:14px}
.sec{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sec li{padding:7px 12px;border-radius:999px;background:#F1F0FE;color:#4A3C9E;font-size:.82rem;font-weight:700;border:1px solid #E1DCFB}
.faq{display:grid;gap:10px}
.faq details{border-radius:16px;background:#fff;border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:#CFCBF3;box-shadow:0 20px 40px -28px rgba(40,40,140,.35)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 22px;font-weight:700;cursor:pointer;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#F1F0FE;color:var(--violet);font-weight:800;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;color:var(--muted);line-height:1.7}
.final{position:relative;overflow:hidden;isolation:isolate;padding:96px 0;color:var(--n-text);background:radial-gradient(800px 400px at 15% 0%,rgba(25,180,255,.22),transparent 60%),radial-gradient(800px 500px at 100% 100%,rgba(178,75,232,.35),transparent 60%),linear-gradient(135deg,#0A0F33,#1B1150)}
.final-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.final h2{color:#fff;margin-bottom:16px}
.final p{color:var(--n-muted)}
.final-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.final-cta small{color:#8F98C8}
.foot{background:#060920;color:var(--n-muted);padding:56px 0 26px}
.foot-top{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;padding-bottom:30px;border-bottom:1px solid var(--n-line)}
.foot .brand{color:#fff}
.foot p{font-size:.9rem;line-height:1.6}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot nav a{color:#C6CBF0;text-decoration:none;font-size:.88rem;font-weight:600}
.foot nav a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:.8rem;color:#6F78A8}
.wa-float{position:fixed;right:20px;bottom:20px;z-index:90;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 14px 30px -10px rgba(37,211,102,.7);transition:transform .2s}
.wa-float:hover{transform:scale(1.07)}

/* Responsive */
@media (max-width:1060px){
 .nav{display:none}.mnav{display:block}
 .hero-grid{grid-template-columns:1fr;gap:46px}
 .hero{padding-top:54px}
 .f1{left:10px}.f2{right:10px}
 .grid3{grid-template-columns:1fr}
 .show{grid-template-columns:1fr}.show-card.features .feat{grid-template-columns:1fr 1fr}
 .steps{grid-template-columns:repeat(2,1fr);row-gap:34px}.steps::before{display:none}
 .mobile-grid,.resp,.final-inner,.split{grid-template-columns:1fr;gap:36px}
 .trust{grid-template-columns:repeat(2,1fr)}
 .foot-top{grid-template-columns:1fr;gap:20px}
}
@media (max-width:680px){
 .section{padding:72px 0}
 .link-login,.head-actions .btn-sm{display:none}
 .hero h1{font-size:2.35rem}
 .lead{font-size:1.02rem}
 .cta-row .btn{width:100%}
 .grid2{grid-template-columns:1fr}
 .card,.aud{padding:24px}
 .float{display:none}
 .show-card.features .feat{grid-template-columns:1fr}
 .steps{grid-template-columns:1fr}
 .intro{text-align:left}
 .trust span{font-size:.82rem}
 .aud .btn{white-space:normal;text-align:center;align-self:stretch}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}