*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:1rem;line-height:1.6;color:var(--text-main);background:#030507;-webkit-font-smoothing:antialiased}
:root{
  --c-base:#030507;--c-deep:#040810;--c-panel:rgba(4,10,20,.85);
  --text-main:#e8f4ff;--text-sub:rgba(180,215,240,.6);--text-dim:rgba(120,170,210,.38);
  --cyan:rgba(80,210,255,.8);--cyan-hi:rgba(120,230,255,1);
  --accent:#0e5580;--accent-hi:#1a7ab0;
  --gap:clamp(3rem,6vw,6rem);--inset:clamp(1.25rem,5vw,3rem);--r:3px;
}
h1,h2,h3{font-weight:200;text-transform:uppercase;letter-spacing:.1em;line-height:.95;text-wrap:balance}
.rule{width:100%;height:1px;background:rgba(80,180,255,.07)}

nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:.75rem var(--inset);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(3,5,7,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(80,180,255,.06);
}
.nav-logo-svg{height:72px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:1.5rem;list-style:none}
.nav-links a{font-size:.78rem;color:var(--text-sub);text-decoration:none;letter-spacing:.08em;text-transform:uppercase;transition:color .15s;white-space:nowrap}
.nav-links a:hover{color:var(--text-main)}
.nav-seguimiento{display:flex;align-items:center;gap:.35rem;color:rgba(80,210,255,.6)!important;border:1px solid rgba(80,210,255,.15);padding:.3rem .75rem;border-radius:var(--r);transition:border-color .15s!important}
.nav-seguimiento:hover{border-color:rgba(80,210,255,.4)!important;color:var(--cyan-hi)!important}
.nav-cta{font-size:.78rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;padding:.45rem 1.25rem;border:1px solid rgba(80,210,255,.28);color:var(--cyan-hi)!important;text-decoration:none;border-radius:var(--r);transition:border-color .15s,box-shadow .15s}
.nav-cta:hover{border-color:rgba(80,210,255,.65);box-shadow:0 0 16px rgba(80,210,255,.1)}
.nav-ghost{border-color:rgba(80,180,255,.1)!important;color:var(--text-sub)!important}
.nav-ghost:hover{border-color:rgba(80,180,255,.25)!important;color:var(--text-main)!important;box-shadow:none!important}

/* HERO */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--gap) + 5rem) var(--inset) var(--gap);overflow:hidden}
#gl-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-inner{position:relative;z-index:1;max-width:1200px;width:100%}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero h1{font-size:clamp(2rem,5vw,3.75rem);margin-bottom:1.5rem;color:var(--text-main);font-weight:200}
.hero h1 em{font-style:normal;color:var(--cyan-hi)}
.hero-sub{font-size:1.05rem;color:var(--text-sub);max-width:44ch;margin-bottom:2rem;line-height:1.7;font-weight:300;letter-spacing:.01em}
.hero-note{font-size:.82rem;color:rgba(160,205,235,.72);letter-spacing:.04em;margin-top:1.25rem;display:flex;align-items:center;gap:.4rem}
.hero-note svg{flex-shrink:0;opacity:.7}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 2rem;background:rgba(14,85,128,.8);border:1px solid rgba(80,210,255,.25);color:var(--text-main);text-decoration:none;border-radius:var(--r);font-size:.9rem;font-weight:300;letter-spacing:.08em;text-transform:uppercase;transition:background .15s,border-color .15s,box-shadow .15s}
.btn-primary:hover{background:rgba(26,122,176,.9);border-color:rgba(80,210,255,.5);box-shadow:0 0 24px rgba(80,210,255,.12)}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 1.5rem;color:var(--text-sub);text-decoration:none;border-radius:var(--r);font-size:.9rem;border:1px solid rgba(80,180,255,.12);letter-spacing:.08em;text-transform:uppercase;font-weight:300;transition:color .15s,border-color .15s}
.btn-ghost:hover{color:var(--text-main);border-color:rgba(80,180,255,.3)}

/* HERO MOCKUP */
.hero-mockup{background:rgba(4,8,16,.82);border:1px solid rgba(80,180,255,.1);border-radius:6px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 60px rgba(20,80,160,.08)}
.mock-bar{display:flex;align-items:center;gap:.625rem;padding:.75rem 1rem;background:rgba(6,12,24,.9);border-bottom:1px solid rgba(80,180,255,.07)}
.mock-dot{width:6px;height:6px;border-radius:50%;background:rgba(80,180,255,.15)}
.mock-label{font-size:.65rem;color:var(--text-dim);letter-spacing:.12em;font-weight:400;text-transform:uppercase;margin-left:.25rem}
.hero-mockup img{width:100%;display:block}

/* PROBLEMA */
.problema-section{background:var(--c-deep);padding:var(--gap) var(--inset)}
.problema-inner{max-width:1200px;margin:0 auto}
.problema-h2{font-size:clamp(1.75rem,3.5vw,3rem);margin-bottom:2.25rem;color:var(--text-main)}
.problema-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(80,180,255,.05)}
.problema-card{padding:2.5rem 2rem;background:var(--c-deep)}
.pc-icon{width:36px;height:36px;margin-bottom:1.25rem;opacity:.35}
.pc-title{font-size:1rem;font-weight:300;text-transform:uppercase;letter-spacing:.1em;color:var(--text-main);margin-bottom:.625rem}
.pc-desc{font-size:.875rem;color:var(--text-sub);line-height:1.7;font-weight:300}

/* FEATURES */
.features-section{background:#050a10;padding:var(--gap) var(--inset)}
.features-inner{max-width:1200px;margin:0 auto}
.features-h2{font-size:clamp(2rem,4.5vw,4rem);margin-bottom:2rem;color:var(--text-main)}
.cue-board{border:1px solid rgba(80,180,255,.08);border-radius:4px;overflow:hidden}
.cue-tabs{display:flex;background:rgba(5,10,20,.9);border-bottom:1px solid rgba(80,180,255,.08);overflow-x:auto}
.cue-tab{display:flex;align-items:center;gap:.4rem;padding:.85rem 1.25rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:400;color:var(--text-dim);background:none;border:none;cursor:pointer;white-space:nowrap;border-right:1px solid rgba(80,180,255,.06);transition:color .15s,background .15s;position:relative}
.cue-tab:last-child{border-right:none}
.cue-tab:hover{color:var(--text-sub)}
.cue-tab.active{color:var(--cyan-hi)}
.cue-tab.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:rgba(80,210,255,.6)}
.cue-icon{width:14px;height:14px;flex-shrink:0}
.cue-panel{display:none;padding:2rem;background:rgba(4,9,18,.7)}
.cue-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.panel-title{font-size:clamp(1.3rem,2.2vw,2rem);font-weight:200;text-transform:uppercase;letter-spacing:.1em;color:var(--text-main);margin-bottom:.875rem;line-height:1.05}
.panel-desc{font-size:.9rem;color:var(--text-sub);max-width:44ch;line-height:1.75;margin-bottom:1.75rem;font-weight:300}
.panel-features{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.panel-features li{display:flex;align-items:flex-start;gap:.7rem;font-size:.875rem;color:var(--text-sub);line-height:1.5;font-weight:300}
.panel-features li svg{flex-shrink:0;margin-top:.15rem}
.panel-visual{background:rgba(4,10,22,.85);border:1px solid rgba(80,180,255,.08);border-radius:3px;padding:1.5rem}
.pv-head{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);font-weight:400;margin-bottom:.875rem}
.pv-row{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;padding:.42rem 0;border-bottom:1px solid rgba(255,255,255,.025)}
.pv-row:last-child{border-bottom:none}
.pv-k{color:var(--text-dim)}
.pv-v{color:var(--text-main);font-weight:300}
.pv-sep{height:1px;background:rgba(80,180,255,.07);margin:.6rem 0}
.badge{display:inline-block;padding:.16rem .5rem;border-radius:2px;font-size:.66rem;font-weight:500;letter-spacing:.04em}
.b-blue{background:rgba(20,90,160,.3);color:rgba(100,200,255,.9)}
.b-green{background:rgba(20,130,80,.25);color:rgba(60,210,140,.9)}
.b-orange{background:rgba(180,110,20,.25);color:rgba(230,170,60,.9)}
.b-gray{background:rgba(80,110,140,.12);color:var(--text-dim)}

/* STEPS */
.steps-section{background:var(--c-deep);padding:var(--gap) var(--inset)}
.steps-inner{max-width:1200px;margin:0 auto}
.steps-h2{font-size:clamp(2rem,4.5vw,4rem);margin-bottom:2rem;color:var(--text-main)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(80,180,255,.05)}
.step{padding:2.5rem;background:var(--c-deep)}
.step-num{font-size:3.5rem;font-weight:200;letter-spacing:.05em;color:rgba(80,210,255,.15);line-height:1;margin-bottom:.875rem;font-variant-numeric:tabular-nums}
.step-title{font-size:1.2rem;font-weight:300;text-transform:uppercase;letter-spacing:.1em;color:var(--text-main);margin-bottom:.75rem}
.step-desc{font-size:.875rem;color:var(--text-sub);line-height:1.7;max-width:28ch;font-weight:300}

/* PRICING */
.pricing-section{background:#050a10;padding:var(--gap) var(--inset)}
.pricing-inner{max-width:1200px;margin:0 auto}
.pricing-h2{font-size:clamp(2rem,4.5vw,4rem);margin-bottom:.75rem;color:var(--text-main)}
.pricing-sub{font-size:1rem;color:var(--text-sub);margin-bottom:3rem;font-weight:300}
.pricing-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(80,180,255,.06)}
.pricing-card{padding:2rem 1.5rem;background:#050a10;position:relative}
.pricing-card.featured{background:rgba(8,20,40,.8)}
.pricing-badge{position:absolute;top:0;right:1rem;background:rgba(14,85,128,.8);border:1px solid rgba(80,210,255,.2);border-top:none;color:rgba(120,230,255,.9);font-size:.6rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .6rem;border-radius:0 0 3px 3px}
.pricing-plan{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);font-weight:400;margin-bottom:1.25rem}
.pricing-price{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:200;color:var(--text-main);line-height:1;letter-spacing:.03em;font-variant-numeric:tabular-nums;margin-bottom:.2rem}
.pricing-price sup{font-size:.9rem;vertical-align:super;opacity:.5;font-weight:300}
.pricing-por-mes{font-size:.75rem;color:var(--cyan-hi);opacity:.7;margin-bottom:.3rem;font-weight:300;font-variant-numeric:tabular-nums}
.pricing-period{font-size:.72rem;color:var(--text-dim);margin-bottom:1.5rem;font-weight:300}
.pricing-features{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}
.pricing-features li{font-size:.82rem;color:var(--text-sub);display:flex;align-items:center;gap:.55rem;font-weight:300}
.pricing-features li::before{content:'';display:inline-block;width:4px;height:4px;flex-shrink:0;border-radius:50%;background:rgba(80,210,255,.5)}
.pricing-nota{max-width:1200px;margin:2rem auto 0;display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-dim);font-weight:300}
.pricing-nota svg{flex-shrink:0;opacity:.4}

/* CTA */
.cta-section{background:var(--c-deep);padding:var(--gap) var(--inset);position:relative;overflow:hidden}
.cta-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(14,85,128,.2) 0%,transparent 65%)}
.cta-inner{max-width:1200px;margin:0 auto;position:relative;display:flex;align-items:center;justify-content:space-between;gap:3rem}
.cta-h2{font-size:clamp(2.2rem,5.5vw,5rem);color:var(--text-main);max-width:13ch}
.cta-desc{font-size:1rem;color:var(--text-sub);margin-bottom:2rem;line-height:1.75;max-width:40ch;font-weight:300}
.cta-note{font-size:.75rem;color:var(--text-dim);margin-top:.875rem;letter-spacing:.04em}

/* FOOTER */
footer{background:var(--c-base);border-top:1px solid rgba(80,180,255,.06);padding:3rem var(--inset)}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem}
.footer-logo-svg{height:40px;width:auto;display:block;margin-bottom:.875rem;opacity:.8}
.footer-tagline{font-size:.825rem;color:var(--text-dim);max-width:28ch;line-height:1.65;font-weight:300}
.footer-col-head{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);font-weight:400;margin-bottom:.875rem}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.footer-links a{font-size:.825rem;color:var(--text-dim);text-decoration:none;font-weight:300;transition:color .15s}
.footer-links a:hover{color:var(--text-sub)}
.footer-bottom{max-width:1200px;margin:1.5rem auto 0;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.03);display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-dim);font-weight:300;letter-spacing:.04em}

/* REVEAL */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* NAV HAMBURGER */
.nav-ham{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;background:none;border:1px solid rgba(80,180,255,.15);border-radius:3px;cursor:pointer;padding:0;flex-shrink:0}
.nav-ham span{display:block;width:18px;height:1.5px;background:var(--text-sub);border-radius:1px;transition:transform .22s ease,opacity .22s ease}
.nav-ham.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-ham.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* MOBILE MENU SLIDE-DOWN */
.nav-mob{display:none;position:fixed;top:0;left:0;right:0;z-index:99;padding-top:62px;background:rgba(3,5,7,.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(80,180,255,.1);transform:translateY(-110%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.nav-mob.open{transform:translateY(0)}
.nav-mob ul{list-style:none;padding:.5rem 1.25rem 1.5rem;display:flex;flex-direction:column}
.nav-mob a{display:block;padding:.875rem 0;font-size:.78rem;color:var(--text-sub);text-decoration:none;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid rgba(80,180,255,.05);transition:color .15s}
.nav-mob a:hover{color:var(--text-main)}
.nav-mob .mob-cta{display:block;margin-top:1rem;padding:.75rem 1.5rem;background:rgba(14,85,128,.8);border:1px solid rgba(80,210,255,.25);color:var(--text-main)!important;border-radius:3px;text-align:center;border-bottom:none!important}

/* RESPONSIVE */
@media(max-width:1100px){.pricing-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-mockup{display:none}.problema-grid{grid-template-columns:1fr}.steps-grid{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr 1fr}.cta-inner{flex-direction:column;align-items:flex-start}}
@media(max-width:640px){
  /* Nav */
  .nav-logo-svg{height:38px}
  .nav-links{display:none}
  .nav-ham{display:flex}
  .nav-mob{display:block}
  /* Hero */
  .hero{padding-top:calc(62px + 2rem);padding-bottom:2.5rem}
  .hero h1{font-size:1.9rem;margin-bottom:1rem}
  .hero-sub{font-size:.9rem;margin-bottom:1.5rem}
  .hero-actions{flex-direction:column}
  .hero-actions a{text-align:center;justify-content:center;width:100%}
  /* Sections */
  .problema-card{padding:1.75rem 1.25rem}
  .cue-panel.active{grid-template-columns:1fr}
  .cue-panel{padding:1.25rem}
  .step{padding:1.75rem 1.25rem}
  .step-desc{max-width:none}
  /* Pricing */
  .pricing-cards{grid-template-columns:1fr}
  .pricing-card{padding:1.5rem 1.25rem}
  /* Footer */
  .footer-inner{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
}

/* WhatsApp flotante */
#wa-btn{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);z-index:9000;transition:transform .18s ease,box-shadow .18s ease;text-decoration:none}
#wa-btn svg{width:28px;height:28px}
#wa-btn:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(37,211,102,.55)}
#wa-btn::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(37,211,102,.4);animation:wa-pulse 2.2s ease-out infinite}
@keyframes wa-pulse{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
#wa-bubble{position:fixed;bottom:90px;right:24px;background:#1c2128;border:1px solid rgba(255,255,255,.09);border-radius:12px 12px 4px 12px;padding:12px 16px 10px;font-size:13px;color:#e8f4ff;line-height:1.4;box-shadow:0 4px 20px rgba(0,0,0,.45);z-index:8999;display:flex;flex-direction:column;gap:3px;max-width:210px;transition:opacity .25s ease,transform .25s ease;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
#wa-bubble.wa-hidden{opacity:0;transform:translateY(6px);pointer-events:none}
.wa-bubble-sub{font-size:11px;color:rgba(255,255,255,.4)}
#wa-bubble-close{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#444;border:none;cursor:pointer;color:rgba(255,255,255,.7);font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center}