:root{
  --bg:#070A08; --bg2:#0A0E0B; --card:#11160F; --card2:#161D14;
  --green:#2BD976; --green-deep:#169d53; --green-light:#8FD14F;
  --blue:#5BC9F5; --yellow:#F5B547; --red:#F06A5D; --purple:#9B6BFF;
  --text:#F2F5F3; --muted:#8B998F; --line:rgba(255,255,255,.07);
  --glow:0 0 60px rgba(43,217,118,.25); --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--text); font-family:Inter,system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,.display{font-family:Sora,system-ui,sans-serif; letter-spacing:-.025em; line-height:1.08}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--green); display:inline-block; margin-bottom:18px}
.muted{color:var(--muted)} .green{color:var(--green)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:Sora,sans-serif; font-weight:700; font-size:15px; padding:15px 28px; border-radius:12px; cursor:pointer; border:none; transition:transform .2s, box-shadow .2s, background .2s; text-align:center}
.btn-primary{background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#06130B; box-shadow:0 10px 34px rgba(43,217,118,.32)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 46px rgba(43,217,118,.48)}
.btn-ghost{background:rgba(255,255,255,.03); color:var(--text); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--green); color:var(--green)}
.btn-lg{padding:18px 38px; font-size:16px}

header{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(7,10,8,.8); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px; gap:18px}
.logo{display:flex; align-items:center; gap:11px; font-family:Sora,sans-serif; font-weight:800; font-size:18px}
.logo .plus{color:var(--green)}
.logo-text{font-size:24px; letter-spacing:-.02em; padding:8px 2px}
@media(min-width:760px){.logo-text{font-size:26px}}
.nav-links{display:none; gap:26px; font-size:14px; color:var(--muted)}
.nav-links a:hover{color:var(--text)}
@media(min-width:900px){.nav-links{display:flex}}
.nav-cta{display:flex; align-items:center; gap:10px}
.nav .btn{padding:11px 20px; font-size:14px}
.nav-ghost{display:none}
@media(min-width:760px){.nav-ghost{display:inline-flex}}

.hero{position:relative; overflow:hidden; padding:70px 0 80px; min-height:calc(100vh - 68px); display:flex; align-items:center}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero-bg::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 75% 35%, rgba(43,217,118,.16), transparent 60%), radial-gradient(ellipse 50% 40% at 15% 80%, rgba(43,217,118,.06), transparent 60%)}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.55}
.hero-cta-note{font-size:12.5px; color:var(--muted); margin-top:14px}
.grid-lines{position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size:54px 54px; mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%)}
.hero-line{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.hero-grid{position:relative; z-index:2; display:grid; gap:40px; align-items:center}
@media(min-width:940px){.hero-grid{grid-template-columns:1.08fr .92fr}}
.hero-badge{display:inline-flex; align-items:center; gap:8px; background:rgba(43,217,118,.1); border:1px solid rgba(43,217,118,.3); color:var(--green); font-size:12.5px; font-weight:600; padding:7px 15px; border-radius:999px; margin-bottom:22px}
.hero h1{font-size:clamp(36px,6.2vw,62px); font-weight:800; margin-bottom:22px}
.hero h1 .hl{background:linear-gradient(120deg,var(--green),var(--green-light)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero .sub{font-size:clamp(16px,2.1vw,19px); color:var(--muted); max-width:540px; margin-bottom:30px}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px}
.counter-box{display:flex; align-items:baseline; gap:14px; margin-bottom:6px; flex-wrap:wrap}
.counter{font-family:Sora,sans-serif; font-weight:800; font-size:clamp(30px,5vw,46px); color:var(--green); line-height:1; text-shadow:0 0 30px rgba(43,217,118,.4)}
.counter-lbl{font-size:13px; color:var(--muted); max-width:230px}
.hero-portrait{position:relative; z-index:2}
.portrait-frame{position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(180deg,#0d130f,#070a08); box-shadow:0 40px 100px rgba(0,0,0,.6), var(--glow); aspect-ratio:1/1}
.portrait-frame img{width:100%; height:100%; object-fit:cover; display:block}
.name-tag{position:absolute; left:16px; bottom:16px; right:16px; background:rgba(7,10,8,.72); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:13px; padding:13px 16px}
.name-tag .n{font-family:Sora,sans-serif; font-weight:800; font-size:17px}
.name-tag .r{font-size:12px; color:var(--green); font-weight:600; letter-spacing:.5px; text-transform:uppercase}

.sec{padding:84px 0; position:relative}
.center{text-align:center}
h2.title{font-size:clamp(28px,4.6vw,44px); font-weight:800; margin-bottom:16px}
.lead{font-size:clamp(15px,2vw,18px); color:var(--muted); max-width:680px; margin:0 auto}
.band{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

.prob-grid{display:grid; gap:18px; margin-top:42px}
@media(min-width:760px){.prob-grid{grid-template-columns:1fr 1fr}}
.prob-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px}
.prob-card.bad{border-color:rgba(240,106,93,.28)}
.prob-card.good{border-color:rgba(43,217,118,.32); box-shadow:var(--glow)}
.prob-card h3{font-size:19px; margin-bottom:8px}
.prob-card.bad h3{color:var(--red)} .prob-card.good h3{color:var(--green)}
.prob-num{font-family:Sora,sans-serif; font-weight:800; font-size:32px; margin-bottom:6px}

.chart-wrap{margin-top:42px; background:linear-gradient(180deg,var(--card),#0b110d); border:1px solid var(--line); border-radius:22px; padding:28px 26px 22px; box-shadow:0 30px 70px rgba(0,0,0,.4)}
.chart-head{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-bottom:18px}
.chart-head h3{font-size:clamp(17px,2.4vw,21px)}
.chart-svg-box{position:relative; width:100%}
#cmpChart{width:100%; height:auto; display:block; overflow:visible}
.ax-line{stroke:rgba(255,255,255,.06)}
.ax-txt{fill:var(--muted); font-size:11px; font-family:Inter,sans-serif}
.ln{fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; pathLength:1; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 4s cubic-bezier(.25,.6,.3,1)}
.ln.in{stroke-dashoffset:0}
.ln-banco{stroke:#7d8a82}
.ln-bolsa{stroke:var(--green); filter:drop-shadow(0 0 8px rgba(43,217,118,.5))}
.end-lbl{font-family:Sora,sans-serif; font-weight:800; font-size:14px}
.end-lbl.banco{fill:#9aa69e} .end-lbl.bolsa{fill:var(--green)}
.chart-legend{display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; font-size:13px; color:var(--muted)}
.chart-legend i{display:inline-block; width:14px; height:3px; border-radius:2px; margin-right:7px; vertical-align:middle}
.chart-legend .banco{background:#7d8a82} .chart-legend .bolsa{background:var(--green)}
.chart-result{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.chip-res{flex:1; min-width:150px; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.chip-res .lbl{font-size:12px; color:var(--muted)}
.chip-res .amt{font-family:Sora,sans-serif; font-weight:800; font-size:clamp(20px,3vw,26px)}
.chip-res.bolsa{border-color:rgba(43,217,118,.3)}
.chip-res.bolsa .amt{color:var(--green)}
.chart-note{font-size:11.5px; color:var(--muted); margin-top:16px; line-height:1.5}
.chart-compare{margin-top:18px; background:linear-gradient(135deg,rgba(43,217,118,.08),rgba(0,0,0,.2)); border:1px solid rgba(43,217,118,.25); border-radius:14px; padding:18px 20px}
.chart-compare p{font-size:14.5px; color:var(--text); line-height:1.6}
.chart-compare b{font-family:Sora,sans-serif}
.chart-motiv{display:block; margin-top:10px; font-size:15.5px; color:var(--green); font-weight:700}

.method-grid{margin-top:50px; display:grid; gap:18px; grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.method-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.method-grid{grid-template-columns:repeat(4,1fr)}}
.lvl{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--card); transition:transform .25s, border-color .25s, box-shadow .25s}
.lvl:hover{transform:translateY(-6px); border-color:rgba(43,217,118,.4); box-shadow:0 24px 50px rgba(0,0,0,.5)}
.lvl-img{aspect-ratio:3/4; position:relative; overflow:hidden; background:linear-gradient(160deg,#0f1a12,#070a08)}
.lvl-img img{width:100%; height:100%; object-fit:cover}
.lvl-tag{position:absolute; top:12px; left:12px; background:var(--green); color:#06130B; font-family:Sora,sans-serif; font-weight:800; font-size:12px; padding:5px 12px; border-radius:8px}
@media(max-width:719px){
  .lvl-tag{top:auto; left:50%; bottom:10px; transform:translateX(-50%); white-space:nowrap}
}
.lvl-cta{display:grid; place-items:center; grid-column:1/-1; padding:28px; text-align:center}
.lvl-body{padding:16px 16px 20px}
.lvl-body h3{font-size:15.5px; margin-bottom:6px; line-height:1.25}
.lvl-body p{font-size:13px; color:var(--muted)}

.app-sec{background:radial-gradient(ellipse 70% 55% at 50% 0%, rgba(43,217,118,.09), transparent 55%), var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.app-flag{display:inline-flex; align-items:center; gap:9px; background:rgba(43,217,118,.12); border:1px solid rgba(43,217,118,.34); color:var(--green); font-weight:700; font-size:13px; padding:8px 16px; border-radius:999px; margin-bottom:18px}
.app-hook{font-size:clamp(27px,4.6vw,42px); font-weight:800; margin-bottom:14px}
.app-value{display:inline-flex; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap; justify-content:center; font-size:14px; color:var(--muted)}
.price-strike{text-decoration:line-through}
.price-free{color:var(--green); font-weight:800; font-family:Sora,sans-serif; font-size:16px}
.badge-incl{background:rgba(43,217,118,.12); border:1px solid rgba(43,217,118,.3); color:var(--green); padding:5px 13px; border-radius:999px; font-weight:700; font-size:12px}
.mods{display:grid; gap:16px; margin-top:48px}
@media(min-width:680px){.mods{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.mods{grid-template-columns:1fr 1fr 1fr}}
.mod{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px; transition:transform .22s, border-color .22s}
.mod:hover{transform:translateY(-5px); border-color:rgba(43,217,118,.34)}
.mod.feat{grid-column:1/-1; border-color:rgba(43,217,118,.34); background:linear-gradient(135deg,var(--card),#0b130d); box-shadow:var(--glow)}
@media(min-width:1000px){.mod.feat{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center}}
.mod-ico{width:50px; height:50px; border-radius:14px; display:grid; place-items:center; font-size:24px; margin-bottom:16px; background:rgba(255,255,255,.04); border:1px solid var(--line)}
.mod.feat .mod-ico{width:68px; height:68px; font-size:32px; margin-bottom:0}
.mod h3{font-size:17px; margin-bottom:8px} .mod.feat h3{font-size:23px}
.mod p{font-size:14px; color:var(--muted)} .mod.feat p{font-size:15px}

/* ===== Dashboard financiero ===== */
.dash-sec{background:var(--bg)}
.dash-grid{margin-top:46px; display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:760px){.dash-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.dash-grid{grid-template-columns:repeat(3,1fr)}}
.dash-card{position:relative; background:linear-gradient(160deg,var(--card),#0a0f0b); border:1px solid var(--line); border-radius:18px; padding:24px; overflow:hidden; transition:transform .25s, border-color .25s, box-shadow .25s}
.dash-card:hover{transform:translateY(-6px); border-color:rgba(43,217,118,.4); box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(43,217,118,.1)}
.dash-card .tag{font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--green); margin-bottom:12px; display:inline-block}
.dash-card h3{font-size:18px; margin-bottom:8px}
.dash-card p{font-size:13.5px; color:var(--muted)}
.dash-spark{margin-top:18px; height:54px; width:100%}
.dash-spark path{fill:none; stroke:var(--green); stroke-width:2; opacity:.85}
.dash-spark .fill{fill:url(#sparkFill); stroke:none; opacity:.5}
.dash-card.feat{grid-column:1/-1; display:grid; gap:24px; align-items:center; border-color:rgba(43,217,118,.3)}
@media(min-width:760px){.dash-card.feat{grid-template-columns:1.1fr .9fr}}
.dash-card.feat img{width:100%; border-radius:14px; border:1px solid var(--line); object-fit:cover}
.dash-ticker{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.dash-ticker span{font-family:Sora,sans-serif; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:7px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted)}
.dash-ticker span.up{color:var(--green); border-color:rgba(43,217,118,.3)}

.about{background:var(--bg)}
.about-grid{display:grid; gap:44px; align-items:center}
@media(min-width:920px){.about-grid{grid-template-columns:.85fr 1.15fr}}
.about-photo{position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/5; background:linear-gradient(160deg,#0f1a12,#070a08); box-shadow:0 30px 70px rgba(0,0,0,.5)}
.about-photo img{width:100%; height:100%; object-fit:cover}
.about h2{font-size:clamp(27px,4vw,40px); font-weight:800; margin-bottom:8px}
.about .role{color:var(--green); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:1px; margin-bottom:20px; display:block}
.about p{color:var(--muted); font-size:15.5px; margin-bottom:16px}
.about p b{color:var(--text)}
.about .sign{font-family:Sora,sans-serif; color:var(--green); font-weight:600}
.cred-row{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 8px}
.cred{background:rgba(17,22,15,.7); border:1px solid var(--line); border-radius:10px; padding:8px 14px; font-size:13px; font-weight:600}
.cred .g{color:var(--green)}

.myths{display:grid; gap:14px; margin-top:44px}
@media(min-width:760px){.myths{grid-template-columns:1fr 1fr}}
.myth{background:var(--card); border:1px solid var(--line); border-radius:15px; padding:24px}
.myth .tag{font-size:11.5px; font-weight:700; color:var(--red); letter-spacing:.5px; text-transform:uppercase}
.myth h3{font-size:16px; margin:7px 0 9px; text-decoration:line-through; text-decoration-color:rgba(240,106,93,.5)}
.myth p{font-size:14px; color:var(--muted)}
.myth .truth{color:var(--green); font-weight:700; font-size:11.5px; display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px}

.benef-grid{display:grid; gap:16px; margin-top:44px; grid-template-columns:1fr}
@media(min-width:680px){.benef-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.benef-grid{grid-template-columns:1fr 1fr 1fr}}
.benef{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; display:flex; gap:14px; align-items:flex-start; transition:border-color .2s, transform .2s}
.benef:hover{border-color:rgba(43,217,118,.35); transform:translateY(-3px)}
.benef .ico{color:var(--green); font-size:20px; flex:0 0 auto; margin-top:1px}
.benef h3{font-size:15px; margin-bottom:5px}
.benef p{font-size:13px; color:var(--muted)}

.testi-grid{display:grid; gap:18px; margin-top:44px; grid-template-columns:1fr}
@media(min-width:700px){.testi-grid{grid-template-columns:repeat(3,1fr)}}
.testi{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px; display:flex; flex-direction:column; gap:14px}
.testi .stars{color:var(--green); font-size:14px; letter-spacing:2px}
.testi .quote{font-size:14.5px; color:var(--muted); flex:1}
.testi .who{display:flex; align-items:center; gap:12px; margin-top:6px}
.testi .who .av{width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--card2),#1c241a); border:1px solid var(--line); display:grid; place-items:center; font-family:Sora,sans-serif; font-weight:800; color:var(--green); font-size:14px}
.testi .who .nm{font-size:13.5px; font-weight:700}
.testi .who .rl{font-size:11.5px; color:var(--muted)}

.results-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:44px}
@media(min-width:680px){.results-grid{grid-template-columns:repeat(3,1fr)}}
.result-ph{aspect-ratio:4/5; background:var(--card); border:1px dashed var(--line); border-radius:14px; display:grid; place-items:center; color:var(--muted); font-size:13px; text-align:center; padding:14px}

.offer-grid{display:grid; gap:20px; margin-top:46px; grid-template-columns:1fr}
@media(min-width:880px){.offer-grid{grid-template-columns:1fr 1fr}}
.offer-card{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:30px}
.offer-card.yes{border-color:rgba(43,217,118,.32); box-shadow:var(--glow)}
.offer-card.no{border-color:rgba(240,106,93,.25)}
.offer-card h3{font-size:18px; margin-bottom:16px}
.offer-card.yes h3{color:var(--green)} .offer-card.no h3{color:var(--red)}
.offer-card ul{list-style:none; display:grid; gap:12px}
.offer-card li{display:flex; gap:10px; font-size:14.5px; color:var(--muted)}
.offer-card.yes li::before{content:"✓"; color:var(--green); font-weight:800; flex:0 0 auto}
.offer-card.no li::before{content:"✕"; color:var(--red); font-weight:800; flex:0 0 auto}

.incl-card{max-width:720px; margin:44px auto 0; background:linear-gradient(135deg,var(--card),#0b130d); border:1px solid rgba(43,217,118,.28); border-radius:24px; padding:36px 32px; box-shadow:0 40px 90px rgba(0,0,0,.5), var(--glow)}
.stack{list-style:none; display:grid; gap:2px; margin:6px 0 0}
.stack li{display:flex; gap:12px; align-items:center; padding:14px 4px; border-bottom:1px solid var(--line); font-size:15px}
.stack li .nm{display:flex; gap:11px; align-items:flex-start}
.stack .check{color:var(--green); font-weight:800; margin-top:1px}
.stack li .val{margin-left:auto; font-family:Sora,sans-serif; font-weight:700; color:var(--text); white-space:nowrap}
.stack li .sub{display:block; font-size:12.5px; color:var(--muted); font-weight:400; margin-top:2px}
.stack-total{display:flex; align-items:center; justify-content:space-between; padding:18px 4px 6px; margin-top:6px}
.stack-total .t-lbl{font-family:Sora,sans-serif; font-weight:800; font-size:17px}
.stack-total .t-val{font-family:Sora,sans-serif; font-weight:800; font-size:24px; color:var(--green)}

.price-anchor{text-align:center; margin:22px 0 4px; padding:26px 0 8px; border-top:1px dashed var(--line)}
.price-anchor .was{font-size:15px; color:var(--muted)}
.price-anchor .was s{color:var(--muted)}
.price-anchor .save-big{font-family:Sora,sans-serif; font-weight:800; line-height:1; margin:10px 0 14px}
.price-anchor .save-big .k{display:block; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--green); font-weight:700; margin-bottom:6px}
.price-anchor .save-big .amt{font-size:clamp(48px,11vw,82px); color:var(--green); text-shadow:0 0 40px rgba(43,217,118,.45)}
.price-anchor .now{font-family:Sora,sans-serif; font-weight:700; font-size:clamp(18px,3vw,22px); color:var(--text); margin-bottom:18px}
.price-anchor .now b{color:var(--green); font-weight:800}

.callout{max-width:720px; margin:26px auto 0; background:linear-gradient(135deg,rgba(91,201,245,.06),var(--card)); border:1px solid rgba(91,201,245,.25); border-radius:20px; padding:28px 26px; text-align:center}
.callout h3{font-size:21px; margin-bottom:8px}
.callout p{color:var(--muted); font-size:14.5px; margin-bottom:20px; max-width:480px; margin-left:auto; margin-right:auto}
.callout .btn-call{background:transparent; color:var(--blue); border:1px solid rgba(91,201,245,.5)}
.callout .btn-call:hover{background:rgba(91,201,245,.1); border-color:var(--blue)}

.faq{max-width:800px; margin:44px auto 0; display:grid; gap:10px}
.qa{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.qa summary{cursor:pointer; list-style:none; padding:20px 22px; font-family:Sora,sans-serif; font-weight:600; font-size:15.5px; display:flex; justify-content:space-between; gap:14px; align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ic{color:var(--green); transition:transform .25s; flex:0 0 auto; font-size:21px; line-height:1}
.qa[open] summary .ic{transform:rotate(45deg)}
.qa .a{padding:0 22px 20px; color:var(--muted); font-size:14.5px}

.final{background:radial-gradient(ellipse 70% 80% at 50% 0%, rgba(43,217,118,.13), transparent 60%), var(--bg)}
.capture{max-width:560px; margin:38px auto 0; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:34px 30px; text-align:center; box-shadow:var(--glow)}
.capture h3{font-size:23px; margin-bottom:8px}
.capture p{color:var(--muted); font-size:14.5px; margin-bottom:22px}
.form-row{display:grid; gap:12px}
.form-row input{width:100%; padding:15px 16px; border-radius:12px; background:var(--card2); border:1px solid var(--line); color:var(--text); font-size:15px; font-family:Inter,sans-serif}
.form-row input::placeholder{color:var(--muted)}
.form-row input:focus{outline:none; border-color:var(--green)}
.form-note{font-size:12px; color:var(--muted); margin-top:14px}

footer{border-top:1px solid var(--line); padding:42px 0 56px; background:var(--bg2)}
.foot{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center}
.foot .logo-text{font-size:20px}
.legal{font-size:11.5px; color:var(--muted); max-width:920px; margin:26px auto 0; line-height:1.65}
.legal b{color:#aab5ac}

.reveal{opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* ===== Lucide icons ===== */
[data-lucide]{width:1em; height:1em; display:inline-block; vertical-align:-2px}
.ic-12{width:12px; height:12px}
.hero-badge [data-lucide],.app-flag [data-lucide]{width:13px; height:13px}
.mod-ico [data-lucide]{width:24px; height:24px; stroke-width:2}
.mod.feat .mod-ico [data-lucide]{width:32px; height:32px}
.benef .ico [data-lucide]{width:20px; height:20px; stroke-width:2.2}

/* ===== 3D hover tilt (premium, like Linear/Vercel cards) ===== */
[data-tilt]{transform-style:preserve-3d; will-change:transform; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease}
[data-tilt]:hover{transition:transform .08s linear}

/* ===== Efecto táctil elegante en mobile (sin mouse) ===== */
[data-tilt].touch-active{
  transform:scale(.97) translateY(-2px);
  border-color:rgba(43,217,118,.5) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(43,217,118,.18), 0 0 24px rgba(43,217,118,.22) !important;
}

/* ===== CTA banner reusable ===== */
.cta-banner{margin-top:48px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; background:linear-gradient(135deg,var(--card),#0b130d); border:1px solid rgba(43,217,118,.28); border-radius:20px; padding:28px 30px; box-shadow:0 30px 70px rgba(0,0,0,.4)}
.cta-banner h3{font-size:19px; margin-bottom:6px}
.cta-banner p{font-size:13.5px; color:var(--muted); max-width:420px}
.cta-banner-btns{display:flex; gap:12px; flex-wrap:wrap}

/* ===== Testimonios con captura ===== */
.testi-shot-wrap{width:100%; aspect-ratio:4/3; border-radius:12px; border:1px solid var(--line); margin-bottom:6px; background:#0b0f0c; display:flex; align-items:center; justify-content:center; overflow:hidden}
.testi-shot{width:100%; height:100%; object-fit:contain}
.testi-disclaimer{text-align:center; font-size:12px; color:var(--muted); max-width:680px; margin:30px auto 0; line-height:1.6}

/* ===== CTA final simplificado ===== */
.final-ctas{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:28px}
.final-note{font-size:13.5px; color:var(--muted); margin-top:18px; max-width:480px; margin-left:auto; margin-right:auto}
.draw{stroke-dasharray:2600; stroke-dashoffset:2600; animation:draw 3s ease forwards .4s}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}html{scroll-behavior:auto}.draw{stroke-dashoffset:0 !important; animation:none !important}.ln{transition:none; stroke-dashoffset:0}}

.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:40; padding:12px 16px; background:rgba(7,10,8,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line); display:flex; gap:10px; transform:translateY(120%); transition:transform .3s}
.sticky-cta.show{transform:none}
.sticky-cta .btn{flex:1; padding:14px; font-size:14px}
@media(min-width:760px){.sticky-cta{display:none}}

/* ===== Gate page (captura previa) ===== */
.gate-screen{position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden; padding:32px 18px}
.gate-card{position:relative; z-index:2; width:100%; max-width:460px; background:linear-gradient(180deg,var(--card),#0b110d); border:1px solid rgba(43,217,118,.22); border-radius:24px; padding:38px 32px; box-shadow:0 40px 100px rgba(0,0,0,.6), var(--glow)}
.gate-logo{display:flex; flex-direction:column; align-items:center; margin-bottom:22px}
.gate-logo .wordmark{font-family:Sora,sans-serif; font-weight:800; font-size:28px}
.gate-logo .tag{margin-top:2px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted)}
.gate-badge{display:inline-flex; align-self:center; align-items:center; gap:7px; background:rgba(43,217,118,.1); border:1px solid rgba(43,217,118,.3); color:var(--green); font-size:12px; font-weight:600; padding:6px 14px; border-radius:999px; margin-bottom:18px}
.gate-card h1{font-size:clamp(22px,4vw,28px); font-weight:800; text-align:center; margin-bottom:10px}
.gate-card .sub{text-align:center; font-size:14.5px; color:var(--muted); margin-bottom:26px; line-height:1.55}
.gate-form{display:grid; gap:14px}
.gate-row{display:grid; gap:14px}
.gate-field label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px}
.gate-input, .gate-select{width:100%; padding:13px 15px; border-radius:11px; background:var(--card2); border:1px solid var(--line); color:var(--text); font-size:15px; font-family:Inter,sans-serif; outline:none; transition:border-color .15s}
.gate-input:focus, .gate-select:focus{border-color:var(--green)}
.gate-select{text-overflow:ellipsis; padding-right:32px}
.gate-phone-wrap{display:flex; align-items:stretch; gap:8px}
.gate-phone-prefix{flex:0 0 auto; display:flex; align-items:center; justify-content:center; min-width:60px; padding:0 12px; border-radius:11px; background:var(--card2); border:1px solid var(--line); color:var(--green); font-family:Sora,sans-serif; font-weight:700; font-size:14px; white-space:nowrap}
.gate-phone-input{flex:1}
.gate-select{appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%238B998F'/></svg>"); background-repeat:no-repeat; background-position:right 14px center}
.gate-error{font-size:12.5px; color:var(--red); margin-top:-4px; display:none}
.gate-error.show{display:block}
.gate-submit{width:100%; margin-top:6px}
.gate-submit[disabled]{opacity:.6; cursor:not-allowed}
.gate-note{text-align:center; font-size:11.5px; color:var(--muted); margin-top:16px; line-height:1.5}
.gate-loader{display:none; align-items:center; justify-content:center; gap:9px}
.gate-loader.show{display:flex}
.gate-spinner{width:16px; height:16px; border-radius:50%; border:2px solid rgba(6,19,11,.35); border-top-color:#06130B; animation:gateSpin .7s linear infinite}
@keyframes gateSpin{to{transform:rotate(360deg)}}
.gate-success{display:none; text-align:center}
.gate-success.show{display:block}
.gate-success .check{width:54px; height:54px; border-radius:50%; background:rgba(43,217,118,.14); border:1px solid rgba(43,217,118,.4); display:grid; place-items:center; margin:0 auto 16px; color:var(--green)}