:root{
  --ink:#140C2B; --ink2:#1D1340; --ink3:#2A1D57;
  --violet:#8B5CF6; --violet2:#A78BFA; --deep:#5B21B6;
  --lime:#C5F04A; --lime2:#A3D12A;
  --text:#F1ECFF; --muted:#A99FCC; --line:rgba(167,139,250,.22);
  --disp:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'Figtree', system-ui, sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--ink);color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:var(--ink);padding:8px 14px;border-radius:8px;font-weight:700;z-index:50}
.skip:focus{left:12px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:rgba(20,12,43,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.brand{font:800 22px/1 var(--disp);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.brand .wm span{color:var(--lime)}
.nav nav{display:flex;gap:26px;margin-left:auto}
.nav nav a{text-decoration:none;color:var(--muted);font-weight:500;font-size:15.5px}
.nav nav a:hover{color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 16px/1 var(--body);text-decoration:none;border-radius:999px;padding:15px 24px;border:0;cursor:pointer;transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn.lime:hover{background:#D3F76A}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--violet2)}
.btn.sm{padding:11px 18px;font-size:15px}
.wa-ic{width:18px;height:18px;flex:none}

/* ---------- hero ---------- */
.hero{position:relative;padding:84px 0 96px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -10% auto auto;width:900px;height:900px;background:radial-gradient(closest-side,rgba(139,92,246,.42),rgba(91,33,182,.18) 55%,transparent 75%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:center}
.hero h1{font:800 clamp(44px,6.2vw,84px)/.96 var(--disp);letter-spacing:-.035em;margin:0 0 26px}
.hero h1 .l2{display:block;color:var(--lime)}
.hero p.lead{font-size:20px;line-height:1.55;color:#D6CEF3;max-width:34em;margin:0 0 34px}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.hero small{display:block;margin-top:18px;color:var(--muted);font-size:14.5px}

/* live ticket */
.ticket{position:relative;justify-self:end;width:min(380px,100%);background:#FBFAFF;color:#1B1336;border-radius:18px;padding:22px 22px 18px;box-shadow:0 30px 80px rgba(8,3,24,.55),0 0 0 1px rgba(255,255,255,.06);transform:rotate(2.2deg)}
.ticket::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;background:radial-gradient(circle at 8px 0,transparent 7px,#FBFAFF 7.5px) 0 0/16px 12px repeat-x}
.tk-h{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1.5px dashed #D8D2EA}
.tk-h img{width:34px;height:34px;border-radius:9px}
.tk-h b{font:700 16px/1.1 var(--disp)}
.tk-h small{display:block;color:#6B6290;font-size:12.5px}
.tk-h .cb{margin-left:auto;background:#EEE9FF;color:#4C1D95;font-weight:700;font-size:12.5px;padding:5px 9px;border-radius:7px}
.tk-l{list-style:none;margin:10px 0 0;padding:0;min-height:176px}
.tk-l li{display:grid;grid-template-columns:30px 1fr auto;gap:8px;padding:8px 0;font-size:15px;border-bottom:1px solid #EFECF7}
.tk-l li em{font-style:normal;color:#7B72A0;font-weight:600}
.tk-l li b{font-variant-numeric:tabular-nums}
.tk-l li.new{animation:pop .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(-6px);background:#F3FBDC}to{opacity:1;transform:none;background:transparent}}
.tk-t{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px}
.tk-t span{color:#6B6290;font-weight:600}
.tk-t b{font:800 32px/1 var(--disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tk-ok{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:10px;background:#ECFCCB;color:#365314;font-weight:700;font-size:14px;opacity:0;transform:translateY(4px);transition:opacity .35s, transform .35s}
.tk-ok.on{opacity:1;transform:none}
.tk-ok svg{flex:none}

/* ---------- sections ---------- */
section{padding:96px 0}
.sec-h{max-width:720px;margin:0 0 48px}
.sec-h h2{font:800 clamp(34px,4.4vw,56px)/1.02 var(--disp);letter-spacing:-.03em;margin:0 0 16px}
.sec-h p{color:#CFC6EE;font-size:19px;margin:0}

/* programas: vidriera */
.shelf{display:grid;grid-template-columns:1.7fr 1fr;gap:22px}
.prod{position:relative;border-radius:28px;padding:38px;overflow:hidden}
.prod.gq{background:linear-gradient(150deg,#3A1C8C 0%,#24125E 55%,#1A0F45 100%);box-shadow:inset 0 0 0 1px rgba(167,139,250,.3)}
.prod.gq::after{content:"";position:absolute;right:-120px;bottom:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(197,240,74,.28),transparent 70%)}
.prod-top{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.prod-top img{width:64px;height:64px;border-radius:16px}
.prod-top h3{font:800 38px/1 var(--disp);letter-spacing:-.025em;margin:0}
.state{display:inline-block;margin-top:6px;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--lime);padding:4px 10px;border-radius:999px}
.prod.gq p{font-size:19px;color:#E4DCFF;max-width:30em;margin:0 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none}
.chips li{font-size:14.5px;font-weight:600;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.prod.next{border:2px dashed var(--line);display:flex;flex-direction:column;justify-content:flex-end;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(167,139,250,.04) 14px 28px)}
.prod.next h3{font:700 28px/1.1 var(--disp);letter-spacing:-.02em;margin:0 0 12px}
.prod.next p{color:var(--muted);margin:0 0 22px}
.prod.next .slot{font:800 120px/0.8 var(--disp);color:rgba(167,139,250,.16);margin-bottom:auto;letter-spacing:-.05em}

/* gestiq: qué hace */
.gq-sec{background:var(--ink2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.does{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.does div{padding:30px 28px 32px 0;border-bottom:1px solid var(--line)}
.does div:not(:nth-child(3n)){border-right:1px solid var(--line);margin-right:28px}
.does h3{font:700 22px/1.2 var(--disp);margin:0 0 8px;letter-spacing:-.01em}
.does p{margin:0;color:#C3B9E6;font-size:16px}
.does svg{width:28px;height:28px;color:var(--lime);margin-bottom:14px}

/* planes */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:64px}
.plan{border-radius:24px;padding:34px;background:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.plan.top{background:#F4F0FF;color:#1B1336;box-shadow:none}
.plan h3{font:800 28px/1 var(--disp);margin:0 0 6px;letter-spacing:-.02em}
.plan .for{color:var(--muted);margin:0 0 22px;font-size:15.5px}
.plan.top .for{color:#625A86}
.price{font:800 54px/1 var(--disp);letter-spacing:-.035em;margin:0 0 4px;font-variant-numeric:tabular-nums}
.price small{font:600 17px var(--body);letter-spacing:0;color:var(--muted)}
.plan.top .price small{color:#625A86}
.plan ul{list-style:none;margin:24px 0 30px;padding:0}
.plan li{display:flex;gap:10px;padding:7px 0;font-size:16px}
.plan li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140C2B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.plan.top li::before{background-color:#7C3AED;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.plan.top .btn{background:#5B21B6;color:#fff}
.plan.top .btn:hover{background:#4C1D95}
.trial{margin-top:26px;color:#CFC6EE;font-size:16.5px}
.trial b{color:var(--lime)}

/* forma de trabajar */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.how h3{font:700 23px/1.2 var(--disp);margin:0 0 10px;letter-spacing:-.01em}
.how p{color:#C3B9E6;margin:0}
.how .n{display:block;font:800 15px var(--body);color:var(--lime);margin-bottom:14px}

/* contacto */
.contact{padding:0 0 96px}
.cbox{border-radius:32px;background:var(--lime);color:var(--ink);padding:56px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.cbox h2{font:800 clamp(34px,4.6vw,60px)/1 var(--disp);letter-spacing:-.035em;margin:0 0 14px}
.cbox p{margin:0;font-size:19px;color:#2A3A0C}
.cbox .acts{display:flex;flex-direction:column;gap:12px}
.cbox .btn.dark{background:var(--ink);color:#fff;padding:18px 26px;font-size:17px}
.cbox .btn.dark:hover{background:#2A1D57}
.cbox .mail{display:block;font-weight:700;text-align:center;text-decoration:none;padding:12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(20,12,43,.35)}
.cbox .mail:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}

/* footer */
footer{border-top:1px solid var(--line);padding:30px 0 40px;color:var(--muted);font-size:14.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
footer .brand{font-size:18px;color:var(--text)}
footer nav{display:flex;flex-wrap:wrap;gap:20px;margin-left:auto}
footer a{text-decoration:none}
footer a:hover{color:var(--text)}


/* hero: estante de programas */
.rack{display:grid;grid-template-columns:1fr 1fr;gap:14px;justify-self:end;width:min(400px,100%)}
.tile{position:relative;aspect-ratio:1/1;border-radius:26px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;color:var(--text)}
.tile b{font:800 24px/1.05 var(--disp);letter-spacing:-.02em}
.tile small{color:var(--muted);font-size:14px;margin-top:3px}
.tile.on{background:linear-gradient(155deg,#4A22B0,#24125E 70%);box-shadow:0 24px 60px rgba(8,3,24,.5),inset 0 0 0 1px rgba(167,139,250,.35);transform:rotate(-3deg);transition:transform .2s ease}
.tile.on:hover{transform:rotate(-1deg) translateY(-3px)}
.tile.on img{position:absolute;top:22px;left:22px;width:62px;height:62px;border-radius:16px}
.tile.on small{color:#D9CFFF}
.tile .st{position:absolute;top:24px;right:20px;background:var(--lime);color:var(--ink);font-weight:700;font-size:12.5px;padding:4px 9px;border-radius:999px}
.tile.soon{border:2px dashed var(--line);background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(167,139,250,.05) 12px 24px)}
.tile.soon b{color:#CFC6EE;font-size:20px}
.tile.soon i{position:absolute;top:22px;left:22px;width:46px;height:46px;border-radius:14px;border:2px dashed rgba(167,139,250,.35)}
.tile.soon:nth-child(2){transform:rotate(2deg)}
.tile.soon:nth-child(3){transform:rotate(1.5deg)}
.tile.soon:nth-child(4){transform:rotate(-2deg)}
.pfrom{font-size:16px!important;color:#CFC6EE!important;margin:-6px 0 24px!important}
.pfrom b{color:var(--lime)}
.idea{padding:0 0 64px}
.idea-in{border-top:1px solid var(--line);padding-top:72px;max-width:760px}
.idea-in h2{font:800 clamp(32px,4vw,50px)/1.05 var(--disp);letter-spacing:-.03em;margin:0 0 16px}
.idea-in p{color:#CFC6EE;font-size:19px;margin:0 0 28px}
@media (max-width:960px){ .rack{justify-self:start;width:min(420px,100%)} }
@media (max-width:640px){ .tile{border-radius:20px;padding:16px} .tile b{font-size:19px} .tile.on img{width:46px;height:46px;top:16px;left:16px} .tile .st{top:18px;right:14px} .tile.soon i{width:36px;height:36px;top:16px;left:16px} }

/* responsive */
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr}
  .ticket{justify-self:start;transform:rotate(1.2deg)}
  .shelf{grid-template-columns:1fr}
  .prod.next .slot{font-size:80px}
  .does{grid-template-columns:1fr 1fr}
  .does div{border-right:0!important;margin-right:0!important}
  .does div:nth-child(odd){border-right:1px solid var(--line)!important;margin-right:24px!important}
  .plans{grid-template-columns:1fr}
  .how{grid-template-columns:1fr;gap:30px}
  .cbox{grid-template-columns:1fr;padding:40px 30px}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav nav{display:none}
  .nav .btn{margin-left:auto}
  .hero{padding:52px 0 70px}
  .hero p.lead{font-size:18px}
  section{padding:72px 0}
  .prod{padding:28px 24px}
  .prod-top h3{font-size:32px}
  .does{grid-template-columns:1fr}
  .does div,.does div:nth-child(odd){border-right:0!important;margin-right:0!important;padding-right:0}
  .plan{padding:28px 24px}
  .price{font-size:46px}
  footer nav{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tk-l li.new{animation:none}
  .btn{transition:none}
}

/* página de programa */
.back{display:inline-block;margin-bottom:26px;color:var(--muted);text-decoration:none;font-weight:600;font-size:15px}
.back:hover{color:var(--text)}
.ph-name{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.ph-name img{width:56px;height:56px;border-radius:15px}
.ph-name b{font:800 30px/1 var(--disp);letter-spacing:-.02em}
.ph-name .state{margin:0 0 0 4px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:st}
.steps li{counter-increment:st;border-top:2px solid var(--line);padding-top:20px}
.steps li::before{content:counter(st);display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lime);color:var(--ink);font:800 17px var(--disp);margin-bottom:16px}
.steps h3{font:700 21px/1.2 var(--disp);margin:0 0 8px}
.steps p{margin:0;color:#C3B9E6;font-size:16px}
.note{margin-top:22px;padding:18px 22px;border-radius:16px;background:rgba(197,240,74,.08);box-shadow:inset 0 0 0 1px rgba(197,240,74,.25);color:#E4F5B8;font-size:16px;max-width:760px}
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font:700 20px/1.3 var(--disp);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2.5px solid var(--lime);border-bottom:2.5px solid var(--lime);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{margin:0 0 22px;color:#CFC6EE;max-width:46em}
a.prod{display:block;text-decoration:none;color:inherit}
.prod.gq{transition:box-shadow .2s, transform .2s}
a.prod.gq:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(197,240,74,.55),0 24px 60px rgba(8,3,24,.45)}
.prod .more{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--lime)}
@media (max-width:960px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .steps{grid-template-columns:1fr} .faq summary{font-size:18px} }

/* anclas: que el título no quede tapado por la barra de arriba */
section[id], [id].prod, .plans[id]{scroll-margin-top:96px}

/* ---------- página de programa en tonos claros ---------- */
body.light{background:#F7F5FF;color:#1B1336;--text:#1B1336;--muted:#5E5683;--line:rgba(91,33,182,.16)}
.light .nav{--text:#F1ECFF;--muted:#A99FCC;--line:rgba(167,139,250,.22);background:rgba(20,12,43,.94);color:#F1ECFF}
.light .hero{background:linear-gradient(180deg,#EDE7FF 0%,#F7F5FF 100%)}
.light .hero::before{background:radial-gradient(closest-side,rgba(139,92,246,.22),rgba(139,92,246,.06) 60%,transparent 75%)}
.light .hero h1 .l2{color:#6D28D9}
.light .hero p.lead{color:#3F3763}
.light .ticket{box-shadow:0 30px 70px rgba(76,29,149,.22),0 0 0 1px rgba(91,33,182,.08)}
.light .sec-h p{color:#4A4270}
.light .gq-sec{background:#FFFFFF;border-color:var(--line)}
.light .does p,.light .steps p{color:#4A4270}
.light .does svg{color:#7C3AED}
.light .steps li::before{background:#7C3AED;color:#fff}
.light .note{background:#F1FAD9;box-shadow:inset 0 0 0 1px #CDE98A;color:#334A0B}
.light .plan{background:#F7F5FF;box-shadow:inset 0 0 0 1px var(--line)}
.light .plan.top{background:linear-gradient(160deg,#4C1D95,#2A1570);color:#F1ECFF;box-shadow:0 24px 60px rgba(76,29,149,.28)}
.light .plan.top .for,.light .plan.top .price small{color:#CFC4F5}
.light .plan.top li::before{background-color:var(--lime);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140C2B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.light .plan.top .btn{background:var(--lime);color:var(--ink)}
.light .plan.top .btn:hover{background:#D3F76A}
.light .plan:not(.top) li::before{background-color:#7C3AED;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.light .trial{color:#4A4270}
.light .trial b{color:#6D28D9}
.light .faq details p{color:#4A4270}
.light .faq summary::after{border-color:#7C3AED}
.light .btn.lime{box-shadow:inset 0 0 0 1px rgba(20,12,43,.08)}
.light footer{background:#FFFFFF}
.light footer .brand .wm span{color:#6D28D9!important}

/* tonos claros más suaves (menos brillo, más contraste) */
body.light{background:#E6E1F2;color:#16102E;--text:#16102E;--muted:#4E4672;--line:rgba(76,29,149,.20)}
.light .hero{background:linear-gradient(180deg,#D9D0F2 0%,#E6E1F2 100%)}
.light .hero::before{background:radial-gradient(closest-side,rgba(124,58,237,.22),rgba(124,58,237,.06) 60%,transparent 75%)}
.light .gq-sec{background:#EFEBF8}
.light .plan{background:#F3F0FA;box-shadow:inset 0 0 0 1px rgba(76,29,149,.22)}
.light .hero p.lead{color:#342C57}
.light .sec-h p,.light .does p,.light .steps p,.light .trial,.light .faq details p{color:#3E3664}
.light .note{background:#E4F2C4;box-shadow:inset 0 0 0 1px #B9D96A;color:#2C3F08}
.light .btn.ghost{box-shadow:inset 0 0 0 1.5px rgba(76,29,149,.35)}
.light footer{background:#DCD6EC}
.light .ticket{background:#FBFAFF}

/* tarjetas flotantes para "Qué hace" / "Lo que tienen" */
.does{gap:20px;border-top:0}
.does div,.does div:not(:nth-child(3n)),.does div:nth-child(odd){border:0!important;margin:0!important;padding:28px 26px 30px!important;border-radius:22px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(167,139,250,.18),0 18px 40px rgba(6,2,20,.35);transition:transform .2s ease, box-shadow .2s ease}
.does div:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(197,240,74,.35),0 26px 50px rgba(6,2,20,.45)}
.does svg{width:44px;height:44px;padding:10px;border-radius:13px;background:rgba(197,240,74,.12)}
.light .does div{background:#F8F6FD;box-shadow:0 1px 2px rgba(40,20,90,.06),0 14px 34px rgba(60,30,130,.13)}
.light .does div:hover{box-shadow:0 2px 4px rgba(40,20,90,.08),0 24px 48px rgba(60,30,130,.2)}
.light .does svg{background:#EDE6FF}
@media (prefers-reduced-motion:reduce){ .does div{transition:none} .does div:hover{transform:none} }

/* capturas del programa */
.shots{position:relative;padding:8px 0 60px}
.browser{border-radius:18px;overflow:hidden;background:#0F0A22;box-shadow:0 40px 90px rgba(40,15,100,.35),0 0 0 1px rgba(76,29,149,.18);max-width:1000px}
.browser .bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#1C1438}
.browser .bar i{width:11px;height:11px;border-radius:50%;background:#3A2E62}
.browser .bar span{margin-left:12px;flex:1;max-width:360px;height:24px;border-radius:7px;background:#2A2050;color:#A99FCC;font-size:12.5px;line-height:24px;padding:0 12px}
.browser img{width:100%;height:auto}
.phone{position:absolute;right:0;bottom:0;width:min(250px,26%);border-radius:34px;padding:9px;background:#0F0A22;box-shadow:0 40px 80px rgba(40,15,100,.4),0 0 0 1px rgba(255,255,255,.08)}
.phone img{border-radius:26px;width:100%;height:auto}
.shot-cap{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:18px;color:var(--muted);font-size:15px}
.shot-cap b{color:var(--text)}
@media (max-width:760px){ .shots{padding-bottom:0} .phone{position:relative;width:62%;margin:-90px 0 0 auto} }

/* comparación */
.cmp{width:100%;border-collapse:separate;border-spacing:0;border-radius:22px;overflow:hidden;background:#F3F0FA;box-shadow:0 14px 34px rgba(60,30,130,.12);font-size:16px}
.cmp th,.cmp td{padding:16px 22px;text-align:left;border-bottom:1px solid rgba(76,29,149,.12)}
.cmp thead th{font:700 18px/1.2 var(--disp);background:#E7E1F7}
.cmp thead th.us{background:#4C1D95;color:#fff}
.cmp td.us{background:rgba(124,58,237,.07);font-weight:600}
.cmp tr:last-child td{border-bottom:0}
.cmp .y,.cmp .n{display:inline-flex;align-items:center;gap:8px}
.cmp .y::before,.cmp .n::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;background-position:center;background-repeat:no-repeat;background-size:11px}
.cmp .y::before{background-color:#7C3AED;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.cmp .n::before{background-color:#D8D2E8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E5683' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E")}
.cmp-wrap{overflow-x:auto;border-radius:22px}
@media (max-width:640px){ .cmp th,.cmp td{padding:13px 14px;font-size:14.5px} .cmp thead th{font-size:16px} }

/* WhatsApp flotante */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:40;display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#06301A;font:700 16px var(--body);text-decoration:none;padding:14px 18px;border-radius:999px;box-shadow:0 12px 30px rgba(6,48,26,.35);transition:transform .15s}
.wa-float:hover{transform:translateY(-2px)}
.wa-float svg{width:24px;height:24px}
@media (max-width:640px){ .wa-float span{display:none} .wa-float{padding:15px} }
@media (prefers-reduced-motion:reduce){ .wa-float{transition:none} }

/* herramienta */
.tool{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.calc{border-radius:24px;padding:30px;background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line),0 24px 60px rgba(6,2,20,.35)}
.calc label{display:block;font-weight:600;margin:0 0 8px;font-size:15.5px}
.calc .f{margin-bottom:20px}
.calc .inp{width:100%;font:600 22px var(--body);color:var(--text);background:rgba(255,255,255,.05);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;font-variant-numeric:tabular-nums}
.calc .inp:focus{outline:none;border-color:var(--lime)}
.calc .row{display:flex;gap:8px;flex-wrap:wrap}
.calc .row button{font:600 15px var(--body);color:var(--text);background:rgba(255,255,255,.05);border:1.5px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer}
.calc .row button.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.res{border-radius:24px;padding:30px;background:var(--lime);color:var(--ink)}
.res .big{font:800 clamp(44px,6vw,68px)/1 var(--disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:6px 0 18px}
.res dl{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:0;font-size:16px}
.res dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.res p{margin:18px 0 0;font-size:15px;color:#2A3A0C}
@media (max-width:860px){ .tool{grid-template-columns:1fr} }

/* precio vs otros */
.cheap{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin-top:44px;padding:30px 32px;border-radius:24px;background:#F3F0FA;box-shadow:0 14px 34px rgba(60,30,130,.12)}
.cheap h3{font:800 28px/1.1 var(--disp);letter-spacing:-.02em;margin:0 0 10px}
.cheap p{margin:0;color:#3E3664}
.cheap-r{display:grid;gap:12px}
.cheap .bar{display:flex;justify-content:space-between;align-items:center;border-radius:14px;padding:14px 18px;font-weight:600}
.cheap .bar b{font:800 24px var(--disp);font-variant-numeric:tabular-nums}
.cheap .bar.them{background:#DCD6EC;color:#4E4672;width:100%}
.cheap .bar.them b{font-size:22px}
.cheap .bar.us{background:var(--lime);color:var(--ink);width:52%;min-width:230px}
@media (max-width:760px){ .cheap{grid-template-columns:1fr;padding:24px} .cheap .bar.us{width:100%;min-width:0} }
.browser video{display:block;width:100%;height:auto;background:#fff}

/* centro de ayuda */
.help-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.help-cards a{display:block;text-decoration:none;color:var(--text);padding:22px;border-radius:20px;background:#F3F0FA;box-shadow:0 1px 2px rgba(40,20,90,.06),0 14px 34px rgba(60,30,130,.13);transition:transform .2s}
.help-cards a:hover{transform:translateY(-3px)}
.help-cards b{display:block;font:700 19px/1.2 var(--disp);margin-bottom:6px}
.help-cards span{color:#4E4672;font-size:15px}
.guide{display:grid;grid-template-columns:1fr 1.3fr;gap:36px;align-items:start;padding:32px;border-radius:24px;background:#F3F0FA;box-shadow:0 14px 34px rgba(60,30,130,.12)}
.guide h3{font:800 26px/1.15 var(--disp);margin:0 0 10px}
.guide p{color:#3E3664;margin:0 0 22px}
.steps.mini{grid-template-columns:1fr;gap:16px}
.steps.mini li{padding-top:14px}
.steps.mini h3{font-size:18px;margin:0 0 4px}
.steps.mini p{margin:0}
.light .sec-h p a{color:#6D28D9;font-weight:600}
@media (max-width:900px){ .help-cards{grid-template-columns:1fr 1fr} .guide{grid-template-columns:1fr} }
@media (max-width:520px){ .help-cards{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .help-cards a{transition:none} }
.brand{display:inline-flex;align-items:center;gap:10px}
.brand img{flex:none;border-radius:50%}

.brand .wm{color:inherit}
footer .brand .wm{color:var(--text)}
.phone video{display:block;width:100%;height:auto;border-radius:26px;background:#fff}

/* página principal en tonos claros */
.light .tile.soon{border-color:rgba(76,29,149,.28);background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(124,58,237,.06) 12px 24px)}
.light .tile.soon b{color:#3E3664}
.light .tile.soon small{color:#5E5683}
.light .tile.soon i{border-color:rgba(76,29,149,.3)}
.light .tile.on{box-shadow:0 24px 60px rgba(60,30,130,.35),inset 0 0 0 1px rgba(167,139,250,.35)}
.light .prod.gq{box-shadow:0 24px 60px rgba(60,30,130,.3)}
.light .prod.next{border-color:rgba(76,29,149,.28);background:repeating-linear-gradient(135deg,#EFEBF8 0 14px,#EAE5F6 14px 28px)}
.light .prod.next .slot{color:rgba(124,58,237,.22)}
.light .prod.next p{color:#4E4672}
.light .how p,.light .idea-in p{color:#3E3664}
.light .how .n{color:#6D28D9}
.light .idea-in{border-color:rgba(76,29,149,.2)}
.light .nav .btn.lime{color:var(--ink)}
.light .tile.on,.light .prod.gq{--text:#F1ECFF;--muted:#C9BFEF;--line:rgba(167,139,250,.3);color:#F1ECFF}
.light .prod.gq .btn.ghost{color:#F1ECFF}

/* pasos como tarjetas flotantes */
.how{gap:20px}
.how > div{padding:28px 26px 30px;border-radius:22px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(167,139,250,.18),0 18px 40px rgba(6,2,20,.35);transition:transform .2s ease, box-shadow .2s ease}
.how > div:hover{transform:translateY(-4px)}
.how .n{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(197,240,74,.15);margin-bottom:16px}
.light .how > div{background:#F8F6FD;box-shadow:0 1px 2px rgba(40,20,90,.06),0 14px 34px rgba(60,30,130,.13)}
.light .how > div:hover{box-shadow:0 2px 4px rgba(40,20,90,.08),0 24px 48px rgba(60,30,130,.2)}
.light .how .n{background:#EDE6FF}
@media (prefers-reduced-motion:reduce){ .how > div{transition:none} .how > div:hover{transform:none} }

/* corte de color en la portada */
.light .hero{background:linear-gradient(160deg,#CBBDF3 0%,#D8CDF6 55%,#D3C7F4 100%);border-bottom:1px solid rgba(76,29,149,.18)}
.light .hero::before{background:radial-gradient(closest-side,rgba(124,58,237,.30),rgba(124,58,237,.08) 60%,transparent 75%)}
.light .hero + section{background:#EEEAF8}

/* portada de la página de programa: más compacta */
.hero.ph{padding:40px 0 56px}
.hero.ph .back{margin-bottom:16px}
.hero.ph .ph-name{margin-bottom:14px}
.hero.ph h1{font-size:clamp(38px,4.6vw,64px);margin-bottom:18px}
.hero.ph p.lead{font-size:18.5px;margin-bottom:26px}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 0;padding:0;font-size:15px;font-weight:600;color:#3E3664}
.trust li{display:flex;align-items:center;gap:7px}
.trust li::before{content:"";width:16px;height:16px;border-radius:50%;background:#7C3AED url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.tkwrap{position:relative;justify-self:end;width:min(380px,100%)}
.tkwrap .ticket{justify-self:auto;width:100%}
.fchip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 9px;border-radius:999px;background:#fff;color:#1B1336;font:700 14px var(--body);box-shadow:0 14px 34px rgba(60,30,130,.25);opacity:0;transform:translateY(8px) scale(.96);transition:opacity .35s, transform .35s;white-space:nowrap}
.fchip i{font-style:normal;display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 6px;border-radius:999px;font-size:12.5px}
.fchip.c1{left:-56px;top:-20px}
.fchip.c1 i{background:#EDE6FF;color:#5B21B6}
.fchip.c2{right:-40px;bottom:-24px}
.fchip.c2 i{background:#DCFCE7;color:#166534}
.fchip.on{opacity:1;transform:none}
@media (max-width:960px){ .tkwrap{justify-self:start} .fchip.c1{left:-10px} .fchip.c2{right:0} }
@media (prefers-reduced-motion:reduce){ .fchip{transition:none} }
@media (max-width:480px){ .nav .wrap{gap:12px;padding:0 16px} .nav .brand{font-size:18px;gap:8px} .nav .brand img{width:30px;height:30px} .nav .btn.sm{padding:10px 14px;font-size:14px} .nav .btn.sm .wa-ic{display:none} }
/* botón privado al panel */
.gb-pbtn{position:fixed;left:16px;bottom:16px;z-index:41;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:#140C2B;color:#fff;font:700 14px var(--body);text-decoration:none;box-shadow:0 10px 26px rgba(20,12,43,.35);opacity:.85}
.gb-pbtn:hover{opacity:1}
.gb-pbtn img{width:24px;height:24px;border-radius:50%}