:root { --bg:#05070f; --panel:#0a0f1f; --panel-strong:#111a33; --line:#1b2a4a; --text:#dbe9ff; --muted:#6b7fa8; --blue:#1f6feb; --blue-hover:#1557c0; --neon:#2ea8ff; --sky:#0096e0; --red:#ff4d5e; --red-alert:#ff2a3d; --green:#2ee88a; --shadow:0 18px 40px rgba(17,36,82,0.35); }
:root[data-theme="light"] { --bg:#e8eef8; --panel:#fbfcff; --panel-strong:#edf3ff; --line:#cddcf7; --text:#0f1530; --muted:#4f628d; --blue:#0b5bd3; --blue-hover:#0949a8; --neon:#2ea8ff; --sky:#0096e0; --red:#c4162a; --red-alert:#a50d1f; --green:#1dbb69; --shadow:0 18px 32px rgba(27,52,101,0.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Bahnschrift,"Segoe UI",Arial,sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font:inherit; }
.container { width:min(1180px, calc(100% - 32px)); margin:0 auto; }
.section { padding:96px 0; }
.alt-section { background:rgba(17,26,51,0.35); }
.topbar { position:sticky; top:0; z-index:20; backdrop-filter:blur(14px); background:rgba(5,7,15,0.78); border-bottom:1px solid var(--line); }
:root[data-theme="light"] .topbar { background: rgba(232,238,248,0.82); }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:74px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; }
.brand-mark { display:block; width:32px; height:32px; flex:none; }
.nav { display:flex; align-items:center; gap:24px; color:var(--muted); }
.nav a { transition:color 0.2s ease; }
.nav a:hover, .nav a:focus-visible { color:var(--text); }
.topbar-actions { display:flex; align-items:center; gap:12px; }
.lang-toggle,.theme-toggle { display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:4px; }
.lang-toggle button,.theme-toggle button { border:none; background:transparent; color:var(--muted); padding:7px 10px; border-radius:6px; cursor:pointer; }
.lang-toggle button.active,.theme-toggle button.active { background:var(--panel-strong); color:var(--text); }
.button { display:inline-flex; align-items:center; justify-content:center; border-radius:8px; padding:12px 18px; border:1px solid transparent; font-weight:700; transition:all 0.2s ease; }
.button-primary { background:var(--blue); color:white; }
.button-primary:hover, .button-primary:focus-visible { background:var(--blue-hover); }
.button-secondary { background:var(--panel-strong); border-color:var(--line); color:var(--text); }
.button-secondary:hover, .button-secondary:focus-visible { border-color:var(--neon); }
.hero { padding-top:72px; }
.hero-grid { display:grid; grid-template-columns:1.2fr 0.8fr; align-items:center; gap:40px; }
.eyebrow { display:inline-block; margin-bottom:16px; color:var(--neon); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; font-size:0.74rem; }
.hero h1,.section-head h2,.role-copy h1,.role-copy h2,.role-copy h3,.cta-box h2 { margin:0 0 16px; letter-spacing:-0.03em; line-height:1.08; font-weight:800; }
.hero h1 { font-size:clamp(2.8rem, 5vw, 5rem); }
.accent { color:var(--red); }
.lead { max-width:640px; color:var(--muted); font-size:1.08rem; margin:14px 0 0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.hero-meta { display:flex; flex-wrap:wrap; gap:16px 20px; margin-top:32px; color:var(--muted); font-size:0.94rem; }
.hero-meta span { display:inline-flex; align-items:center; gap:8px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 16px rgba(46,232,138,0.8); }
.visual { position:relative; display:flex; justify-content:center; }
.visual-window { width:min(100%,530px); background:linear-gradient(180deg, rgba(16,24,43,0.95), rgba(10,15,31,0.95)); border:1px solid var(--line); border-radius:16px; padding:18px 18px 24px; box-shadow:var(--shadow); }
:root[data-theme="light"] .visual-window { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,248,255,0.96)); }
.window-bar { display:flex; gap:8px; margin-bottom:18px; }
.window-dot { width:11px; height:11px; border-radius:50%; display:block; }
.window-dot.red { background:var(--red-alert); }
.window-dot.yellow { background:#f6c542; }
.window-dot.green { background:var(--green); }
.illustration { display:grid; gap:16px; }
.illustration-card { background:var(--panel-strong); border:1px solid var(--line); border-radius:12px; padding:18px 16px; }
.illustration-card strong { display:block; margin-bottom:14px; font-size:0.98rem; }
.metric-row { display:flex; justify-content:space-between; color:var(--muted); margin-bottom:10px; font-size:0.82rem; }
.metric-bar { height:10px; border-radius:999px; background:rgba(123,140,178,0.15); overflow:hidden; }
.metric-bar span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--sky), var(--blue)); }
.visual-float { position:absolute; right:-8px; bottom:22px; min-width:150px; display:grid; gap:3px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow); }
.visual-float strong { font-size:1.5rem; }
.small { color:var(--muted); font-size:0.75rem; }
.section-head { max-width:760px; margin:0 auto 42px; text-align:center; }
.section-head h2 { font-size:clamp(2rem, 3vw, 3rem); }
.section-head p { margin:0; color:var(--muted); font-size:1.05rem; }
.section-spacer { margin-top:54px; }
.grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
.card { background:rgba(17,26,51,0.8); border:1px solid var(--line); border-radius:12px; padding:24px 20px; transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.card:hover, .card:focus-visible { transform:translateY(-2px); border-color:var(--neon); box-shadow:0 0 0 1px rgba(46,168,255,0.2), 0 18px 28px rgba(17,26,51,0.15); }
.card-icon { font-size:2rem; margin-bottom:12px; }
.card h3 { margin:0 0 10px; font-size:1.2rem; }
.card p { margin:0; color:var(--muted); }
.steps { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.step { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px 18px; }
.step-number { width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; background:linear-gradient(135deg, var(--blue), var(--sky)); color:white; margin-bottom:14px; }
.step h3 { margin:0 0 8px; font-size:1.08rem; }
.step p { margin:0; color:var(--muted); }
.role-card { display:block; }
.feature-list { display:grid; gap:18px; }
.feature { display:flex; gap:18px; align-items:center; background:rgba(17,26,51,0.7); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.feature span { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; background:rgba(46,168,255,0.12); color:var(--neon); font-weight:800; }
.feature p { margin:0; color:var(--text); }
.cta-box { display:flex; align-items:center; justify-content:space-between; gap:28px; background:linear-gradient(135deg, rgba(31,111,235,0.12), rgba(46,168,255,0.04)); border:1px solid var(--line); border-radius:14px; padding:32px 28px; }
.cta-box h2 { font-size:clamp(2rem, 3vw, 2.6rem); }
.cta-box p { margin:0; color:var(--muted); }
.footer { border-top:1px solid var(--line); padding:28px 0 40px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--muted); }
.role-header { padding-top:44px; padding-bottom:54px; }
.role-layout { display:grid; grid-template-columns:1.4fr 0.6fr; gap:28px; align-items:start; }
.role-copy,.side-panel .panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px; }
.role-copy h1 { font-size:clamp(2.2rem, 4vw, 3.3rem); }
.subtitle { margin:0 0 26px; color:var(--muted); font-size:1.05rem; }
.checklist { margin:0; padding-left:1.2rem; color:var(--text); display:grid; gap:10px; }
.role-cta { margin-top:26px; }
.side-panel { display:grid; gap:18px; }
.side-panel .panel h3 { margin:0 0 8px; font-size:1.1rem; }
.side-panel .panel p,.side-panel .panel li { margin:0; color:var(--muted); }
.side-panel .panel ul { margin:0; padding-left:1rem; display:grid; gap:8px; }
@media (max-width: 1024px) { .hero-grid, .role-layout { grid-template-columns:1fr; } .steps { grid-template-columns:repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) { .nav { display:none; } .topbar-inner,.topbar-actions,.cta-box,.footer-inner { flex-direction:column; align-items:flex-start; } .grid-3,.steps { grid-template-columns:1fr; } .section { padding:72px 0; } .hero-actions,.hero-meta { flex-direction:column; align-items:flex-start; } }

/* Planes y página de suscripción */
.plan-grid { align-items: stretch; }
.plan-card { display:flex; flex-direction:column; gap:12px; }
.plan-card h3 { margin:0; }
.plan-card.plan-featured { border-color:var(--neon); }
.plan-desc { margin:0; color:var(--muted); }
.plan-list { margin:0 0 8px; padding-left:18px; color:var(--text); display:grid; gap:6px; }
.plan-card .button { margin-top:auto; align-self:flex-start; }
.plan-note { margin:14px 0 0; color:var(--muted); font-size:0.9rem; }
.checkout { max-width:720px; padding-top:48px; padding-bottom:48px; }
.checkout-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:var(--shadow); }
.checkout-card h1 { margin:0 0 12px; }
.checkout-step { display:grid; gap:14px; }
.checkout-step[hidden] { display:none; }
.campo { font-weight:700; }
.campo-input { width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:var(--panel-strong); color:var(--text); font:inherit; }
.note { margin:0; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--panel-strong); color:var(--text); }
.note[hidden] { display:none; }
.plan-choices { border:none; margin:0; padding:0; display:grid; gap:10px; }
.plan-choices.periodo { grid-template-columns:repeat(2, minmax(0,1fr)); }
.plan-option, .plan-choices label { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--panel-strong); cursor:pointer; }
.plan-option input, .plan-choices label input { accent-color:var(--blue); }
.error { margin:0; color:var(--red-alert); font-weight:700; min-height:1.2em; }
.link-button { background:none; border:none; color:var(--neon); cursor:pointer; padding:0; font:inherit; text-decoration:underline; }
button:disabled { opacity:0.55; cursor:not-allowed; }
@media (max-width: 640px) { .checkout-card { padding:20px; } .plan-choices.periodo { grid-template-columns:1fr; } }

.ia-ayuda { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:6px; border:1.5px solid var(--neon); border-radius:50%; color:var(--neon); font-size:0.78rem; font-weight:800; line-height:1; text-decoration:none; vertical-align:middle; transition:background 0.2s ease, color 0.2s ease; }
.ia-ayuda:hover,.ia-ayuda:focus-visible { background:var(--neon); color:var(--bg); outline:none; }
.role-card-wrap { position:relative; }
.role-card-wrap .role-card { height:100%; box-sizing:border-box; }
.role-card-wrap .ia-ayuda { position:absolute; top:18px; right:18px; margin:0; background:var(--panel); }
.ia-externa { color:var(--muted); }
.diagrama { margin:28px 0 0; }
.diagrama img { display:block; width:100%; height:auto; background:#fff; border:1px solid var(--line); border-radius:12px; }
.diagrama figcaption { margin-top:12px; color:var(--muted); font-size:0.95rem; }
#uso-ia { scroll-margin-top:96px; }

/* Video de presentación, entre la portada y "El problema" */
.video-section { padding-top:0; }
.video-gobernix { display:block; width:100%; max-width:1040px; margin:0 auto; aspect-ratio:16 / 9; background:#000; border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.video-gobernix.vertical { width:auto; max-width:100%; height:min(80vh, 720px); aspect-ratio:9 / 16; }