/* Mismos tokens del diseño de la app (oscuro por defecto, claro con data-theme="light") */
:root { --accent:#7c6cf6; --on-accent:#0b0e24; --bg:#0b0e24; --surface:#171b3a; --surface-3:#1f2452; --border:#242a58; --border-strong:#2b3062; --line:#22254a; --text:#f5f6fb; --text-2:#c6cae7; --muted:#9aa0c7; --ok:#3ddc97; --accent-text:color-mix(in srgb, var(--accent) 62%, #fff); --accent-soft:color-mix(in srgb, var(--accent) 14%, transparent); --font:'Plus Jakarta Sans',system-ui,sans-serif; color-scheme:dark; }
:root[data-theme="light"] { --bg:#f3f4fb; --surface:#fff; --surface-3:#eceefa; --border:#dde1f5; --border-strong:#cfd4ee; --line:#dde1f5; --text:#171a35; --text-2:#3a3f6b; --muted:#5b6089; --ok:#0ea472; --accent-text:color-mix(in srgb, var(--accent) 85%, #000); color-scheme:light; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:400 15px/1.6 var(--font); }
a { color:var(--accent-text); }
.wrap { max-width:1040px; margin:0 auto; padding:0 18px; }
.spacer { flex:1; } .muted { color:var(--muted); } .small { font-size:.85rem; }
.top { position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:1px solid var(--line); }
.top__in { display:flex; align-items:center; gap:12px; min-height:64px; }
.brand { display:flex; align-items:center; gap:12px; } .brand__mark { width:38px; height:38px; border-radius:10px; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-weight:800; }
.brand__txt { display:flex; flex-direction:column; line-height:1.25; } .brand__txt small { font-size:11px; color:var(--muted); } .brand__txt strong { font-size:16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 18px; border-radius:12px; border:1px solid var(--border-strong); color:var(--text-2); text-decoration:none; font:700 14px/1 var(--font); background:transparent; cursor:pointer; }
.btn:hover { background:var(--surface-3); } .btn.primary { background:var(--accent); color:var(--on-accent); border-color:transparent; font-weight:800; } .btn.primary:hover { filter:brightness(1.08); } .btn.lg { padding:15px 24px; font-size:15px; }
.icon-btn { background:none; border:0; color:var(--text); font-size:1.15rem; min-width:44px; min-height:44px; border-radius:10px; cursor:pointer; } .icon-btn:hover { background:var(--surface-3); }
section { padding:34px 0 6px; } h1,h2,h3 { line-height:1.2; margin:0 0 .5em; font-weight:800; } h2 { font-size:1.4rem; } h3 { font-size:1rem; }
.hero { padding:56px 0 20px; } .eyebrow { font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--accent-text); margin:0 0 10px; }
.hero h1 { font-size:clamp(1.9rem,5vw,3rem); max-width:760px; } .lead { color:var(--text-2); font-size:1.05rem; max-width:720px; } .hero__cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.grid3,.grid2 { display:grid; gap:16px; } @media (min-width:760px) { .grid3 { grid-template-columns:repeat(3,1fr); } .grid2 { grid-template-columns:repeat(2,1fr); } }
.card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; } .card.flat { border-radius:14px; padding:16px; } .card.flat p { margin:0; color:var(--muted); font-size:.92rem; }
.card ul { margin:10px 0 0; padding-left:18px; color:var(--text-2); } .card li { margin-bottom:6px; }
.num { width:34px; height:34px; border-radius:10px; background:var(--accent-soft); color:var(--accent-text); display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:12px; }
.steps { list-style:none; padding:0; margin:0; display:grid; gap:12px; counter-reset:s; } .steps li { counter-increment:s; display:grid; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px 14px 56px; position:relative; }
.steps li::before { content:counter(s); position:absolute; left:16px; top:14px; width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-weight:800; display:flex; align-items:center; justify-content:center; }
.steps span { color:var(--muted); font-size:.92rem; }
.checks { list-style:none; padding:0; margin:0 0 12px; display:grid; gap:8px; } .checks li { padding-left:28px; position:relative; color:var(--text-2); } .checks li::before { content:'✓'; position:absolute; left:0; color:var(--ok); font-weight:800; }
.cta { text-align:center; margin:34px 0 0; padding:32px 18px; background:linear-gradient(135deg,var(--accent-soft),transparent); } .cta p { margin:0 0 16px; }
.foot { padding:28px 18px 40px; text-align:center; }
.plans { display:grid; gap:16px; } @media (min-width:760px) { .plans { grid-template-columns:repeat(3,1fr); } }
.plan { display:flex; flex-direction:column; } .plan.featured { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.plan .tag { font:700 11px/1 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); }
.plan h3 { margin:8px 0 2px; } .plan .for { margin:0; color:var(--muted); font-size:.92rem; }
.plan .price { margin:14px 0 2px; font:600 30px/1.1 'JetBrains Mono',monospace; } .plan .price small { font:500 13px var(--font); color:var(--muted); }
.plan .setup { margin:0 0 12px; color:var(--text-2); font-size:.92rem; } .plan .setup strong { font-family:'JetBrains Mono',monospace; color:var(--text); }
.plan ul { margin-top:auto; border-top:1px solid var(--line); padding-top:12px; }
.plans-note { margin-top:14px; }
.nav { display:none; gap:18px; } .nav a { color:var(--text-2); text-decoration:none; font:700 14px/1 var(--font); } .nav a:hover { color:var(--accent-text); } @media (min-width:760px) { .nav { display:flex; } }