:root{
  --bg:#070B14;
  --bg2:rgba(0,0,0,.18);
  --surface:rgba(255,255,255,.06);
  --surface2:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.12);
  --shadow:0 20px 70px rgba(0,0,0,.45);
  --primary:#2F6BFF;
  --primary2:#55D6FF;
  --radius:18px;

  /* ===== Fix scroll con header sticky ===== */
  --header-h: 78px;
}

html[data-theme="light"]{
  --bg:#F6F8FF;
  --bg2:rgba(255,255,255,.75);
  --surface:rgba(0,0,0,.04);
  --surface2:rgba(0,0,0,.06);
  --text:rgba(10,16,28,.92);
  --muted:rgba(10,16,28,.64);
  --line:rgba(10,16,28,.12);
  --shadow:0 18px 55px rgba(20,30,60,.12);
}

*{box-sizing:border-box;}

/* ===== Fix scroll con header sticky ===== */
html{
  scroll-behavior:smooth;
  scroll-padding-top: var(--header-h);
}
[id]{
  scroll-margin-top: var(--header-h);
}

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 800px at 20% -10%,rgba(47,107,255,.35),transparent 60%),
    radial-gradient(900px 700px at 110% 10%,rgba(85,214,255,.25),transparent 55%),
    var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.muted{color:var(--muted);}
.tiny{font-size:12px;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(47,107,255,.95),rgba(85,214,255,.85));
  color:#061021;
  font-weight:800;
  box-shadow:0 16px 45px rgba(47,107,255,.20);
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.02);}
.btn:active{transform:translateY(0px);}
.btn.secondary{
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:none;
}
.btn.ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:none;
}
.btn.full{width:100%;}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(7,11,20,.65);
  backdrop-filter:blur(12px);
  gap:14px;
}
html[data-theme="light"] .topbar{
  background:rgba(246,248,255,.78);
  border-bottom:1px solid rgba(10,16,28,.10);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand-logo{
  height:42px;
  width:auto;
  border-radius:10px;
  flex:0 0 auto;
}
.brand-copy{line-height:1.05;min-width:0;}
.brand-name{font-size:16px;font-weight:900;letter-spacing:.2px;white-space:nowrap;}
.brand-tagline{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw;}

.top-actions{
  display:none;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.menu-btn{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
}

.nav{
  display:flex;
  align-items:center;
  gap:16px;
}
.nav a{
  font-size:14px;
  color:rgba(255,255,255,.82);
  padding:8px 10px;
  border-radius:10px;
}
html[data-theme="light"] .nav a{color:rgba(10,16,28,.82);}
.nav a:hover{background:var(--surface);}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:10px;}

.lang{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}
.lang select{
  background:transparent;
  border:none;
  color:var(--text);
  outline:none;
  font-weight:800;
}
.lang-dot{
  width:8px;height:8px;border-radius:99px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
}

.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}
.theme-toggle:hover{filter:brightness(1.02);}
.theme-icon{font-size:14px;}

.hero{
  position:relative;
  overflow:hidden;
  padding:56px 22px 26px;
}
.hero-bg{
  position:absolute;
  inset:-80px -80px auto -80px;
  height:420px;
  background:
    radial-gradient(500px 300px at 20% 20%,rgba(47,107,255,.35),transparent 60%),
    radial-gradient(700px 380px at 70% 10%,rgba(85,214,255,.20),transparent 65%);
  filter:blur(2px);
  pointer-events:none;
}
.hero-inner{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:28px;
  align-items:start;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
  color:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:800;
}
html[data-theme="light"] .pill{color:rgba(10,16,28,.78);}

.hero-title{
  margin:14px 0 0;
  font-size:clamp(28px,4.2vw,46px);
  line-height:1.05;
  letter-spacing:-0.8px;
}
.hero-subtitle{
  margin:12px 0 18px;
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
  max-width:58ch;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}

.hero-stats{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.stat{
  padding:14px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--line);
}
.stat-num{font-weight:900;font-size:18px;}
.stat-label{font-size:12px;color:var(--muted);margin-top:4px;}

.preview{
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),rgba(255,255,255,.04));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.preview-top{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}
.dot{width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.20);}
html[data-theme="light"] .dot{background:rgba(10,16,28,.16);}
.preview-title{margin-left:6px;color:var(--muted);font-size:12px;font-weight:800;}
.preview-body{padding:14px;}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.kpi{
  padding:12px;
  border-radius:16px;
  background:var(--surface);
  border:1px solid var(--line);
}
.kpi-label{font-size:12px;color:var(--muted);font-weight:800;}
.kpi-value{font-size:22px;font-weight:900;margin-top:4px;}

.mini-table{margin-top:12px;display:grid;gap:8px;opacity:.9;}
.row{
  display:grid;
  grid-template-columns:1.3fr .9fr .8fr;
  gap:10px;
}
.row span{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
}
html[data-theme="light"] .row span{background:rgba(10,16,28,.10);}
.row.head span{background:rgba(255,255,255,.14);height:12px;}
html[data-theme="light"] .row.head span{background:rgba(10,16,28,.14);}

.trusted{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
html[data-theme="light"] .trusted{
  background:rgba(10,16,28,.03);
  border:1px solid rgba(10,16,28,.10);
}

.section{
  max-width:1120px;
  margin:0 auto;
  padding:56px 22px;
}
.section.alt{
  background:rgba(255,255,255,.02);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
html[data-theme="light"] .section.alt{
  background:rgba(10,16,28,.02);
  border-top:1px solid rgba(10,16,28,.08);
  border-bottom:1px solid rgba(10,16,28,.08);
}

.section-head h2{
  margin:0;
  font-size:clamp(22px,2.8vw,34px);
  letter-spacing:-0.4px;
}
.section-head p{margin:10px 0 0;max-width:70ch;}

.cards-3{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.card{
  padding:18px;
  border-radius:18px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}
html[data-theme="light"] .card{box-shadow:0 18px 55px rgba(20,30,60,.10);}
.card h3{margin:0 0 10px;font-size:16px;}
.card p{margin:0;line-height:1.55;}

.grid-6{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.chip{
  padding:14px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface);
  font-weight:900;
  color:rgba(255,255,255,.88);
}
html[data-theme="light"] .chip{color:rgba(10,16,28,.88);}

.benefit-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.benefit{
  padding:18px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--surface);
}
.benefit h3{margin:0 0 10px;}

.cta{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
  border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(47,107,255,.14),rgba(85,214,255,.08));
  box-shadow:var(--shadow);
  padding:18px;
}
.cta-copy h2{margin:0;font-size:clamp(22px,2.6vw,32px);}
.cta-copy p{margin:10px 0 16px;}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px;}

.cta-form{
  padding:14px;
  border-radius:18px;
  background:var(--surface);
  border:1px solid var(--line);
}
.form-row{display:grid;gap:8px;margin-bottom:12px;}
.form-row label{font-size:12px;font-weight:900;color:rgba(255,255,255,.78);}
html[data-theme="light"] .form-row label{color:rgba(10,16,28,.78);}

.form-row input{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
html[data-theme="light"] .form-row input{background:rgba(255,255,255,.85);}
.form-row input:focus{
  border-color:rgba(85,214,255,.50);
  box-shadow:0 0 0 3px rgba(85,214,255,.12);
}

.faq{margin-top:18px;display:grid;gap:10px;}
details{
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--surface);
  padding:14px 16px;
}
summary{cursor:pointer;font-weight:900;}
details p{margin:10px 0 0;}

.footer{
  padding:30px 22px 46px;
  border-top:1px solid rgba(255,255,255,.08);
  background:var(--bg2);
}
html[data-theme="light"] .footer{border-top:1px solid rgba(10,16,28,.10);}
.footer-grid{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr .7fr .7fr;
  gap:18px;
  align-items:start;
}
.footer-brand{display:flex;gap:12px;align-items:center;}
.footer-brand img{height:40px;border-radius:10px;}
.footer-links{display:grid;gap:10px;}
.footer-links a{color:rgba(255,255,255,.76);padding:6px 0;}
html[data-theme="light"] .footer-links a{color:rgba(10,16,28,.76);}
.footer-links a:hover{color:var(--text);}

.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:60;
}

.mobile-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(360px, 92vw);
  background:rgba(7,11,20,.92);
  backdrop-filter:blur(14px);
  border-left:1px solid rgba(255,255,255,.10);
  transform:translateX(110%);
  transition:transform .18s ease;
  z-index:70;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
}
html[data-theme="light"] .mobile-drawer{
  background:rgba(246,248,255,.92);
  border-left:1px solid rgba(10,16,28,.10);
}

.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 2px 10px;
}
.drawer-title{font-weight:900;}
.drawer-close{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:900;
}

.drawer-nav{
  display:grid;
  gap:10px;
}
.drawer-nav a{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface);
}

.drawer-controls{
  margin-top:auto;
  display:grid;
  gap:10px;
}

body.nav-open .nav-overlay{
  opacity:1;
  pointer-events:auto;
}
body.nav-open .mobile-drawer{
  transform:translateX(0);
}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;}
  .cards-3{grid-template-columns:1fr;}
  .grid-6{grid-template-columns:repeat(2,minmax(0,1fr));}
  .benefit-grid{grid-template-columns:1fr;}
  .cta{grid-template-columns:1fr;}

  .desktop-nav{display:none;}
  .top-actions{display:flex;}
  .brand-logo{height:34px;}
  .brand-tagline{max-width:52vw;}
}

@media (min-width: 981px){
  .nav-overlay{display:none;}
  .mobile-drawer{display:none;}
  .top-login{display:none;}
  .menu-btn{display:none;}
}

/* ===== Mobile header fix (anchors) ===== */
@media (max-width: 720px){
  :root{
    /* Ajusta este número si aún queda escondido: 84 / 92 / 100 */
    --header-h: 10px;
    --safe-top: env(safe-area-inset-top, 0px);
    --anchor-offset: calc(var(--header-h) + var(--safe-top) + 8px);
  }

  html, body{
    scroll-padding-top: var(--anchor-offset);
  }

  /* Para TODOS los targets tipo #modulos, #faq, etc */
  [id]{
    scroll-margin-top: var(--anchor-offset);
  }

  .topbar{
    padding: 10px 12px;
    gap: 10px;
  }

  .brand{
    min-width: 0;
    gap: 10px;
  }

  .brand-logo{
    height: 32px;
    border-radius: 10px;
  }

  .brand-name{ font-size: 14px; }
  .brand-tagline{ display:none; }

  .top-actions{
    margin-left: auto;
    display:flex;
    align-items:center;
    gap: 8px;
  }

  .top-login{
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  .menu-btn{
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .nav.desktop-nav{
    display:none !important;
  }
}