:root{
  /* Paleta azules elegantes */
  --bg:#0c1222;
  --bg-2:#0f1a33;
  --card:#121a2b;
  --muted:#b9c4d6;
  --blue:#1f6feb;
  --blue-2:#2470ff;
  --blue-3:#5aa0ff;
  --white:#eef3fb;
  --ink:#0a0c12;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(36,112,255,.12), transparent 60%),
    radial-gradient(1000px 500px at -10% 105%, rgba(31,111,235,.12), transparent 60%),
    var(--bg);
  color:var(--white);
}

a{color:var(--blue-3); text-decoration:none}
a:hover{opacity:.9}
.muted{color:var(--muted)}

.wrap{max-width:1100px; margin:0 auto; padding:0 20px}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(10,14,24,.95), rgba(10,14,24,.7));
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
}
.bar{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:36px; height:36px; border-radius:10px; object-fit:contain; background:#0a0e1c}
.brand h1{margin:0; font-size:18px}
.menu{display:flex; gap:18px; align-items:center}
.cta{padding:10px 14px; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--blue-2)); color:#fff; font-weight:800; box-shadow:var(--shadow)}

/* HERO */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center;
  padding:32px 0 44px;
}
.card{
  background:linear-gradient(180deg, rgba(24, 64, 197, 0.04), rgba(255, 255, 255, 0.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)
}
.kicker{color:var(--blue-3); font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:12px}
.title{font-size:38px; margin:8px 0 8px}
.lead{color:#d7e2f3}
.presentacion-placeholder{
  height:180px; border:1px dashed rgba(255,255,255,.15); border-radius:12px; display:grid; place-items:center; background:rgba(36,112,255,.05)
}

/* Secciones */
section{padding:44px 0}
.pill{display:inline-block; padding:6px 10px; background:rgba(16, 1, 228, 0.15); border:1px solid rgba(36,112,255,.45); color:var(--blue-3); border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.3px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
ul.clean{margin:0; padding-left:18px}

/* Form & Wizard */
label{font-weight:700}
input,select,textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(28, 25, 235, 0.14);
  background:#0e1730; color:#eef3fb;
}
select option{color:#0a0c12; background:#eef3fb}
textarea{min-height:110px}

.btn{display:inline-flex; gap:8px; align-items:center; padding:12px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.14); font-weight:800}
.btn.primary{background:linear-gradient(135deg,var(--blue),var(--blue-2)); color:#090808; border-color:rgb(246, 244, 244)}
.btn.ghost{color:#0f1114}

.notice{padding:10px 12px; border:1px dashed rgba(36,112,255,.5); border-radius:12px; background:rgba(36,112,255,.08); color:#cfe1ff}
.resumen{display:none; margin-top:14px}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; font-weight:800}
.ok{background:rgba(21,179,106,.12); border:1px solid rgba(21,179,106,.5); color:#9ef5c9}
.med{background:rgba(224,160,21,.12); border:1px solid rgba(224,160,21,.5); color:#ffe2a8}
.high{background:rgba(226,77,77,.12); border:1px solid rgba(226,77,77,.5); color:#ffb1b1}

/* Wizard steps */
.wizard-step{display:none}
.wizard-step.active{display:block}
.wizard-controls{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}

/* Footer */
footer{border-top:1px solid rgba(255,255,255,.08); color:#b7c0cc; padding:28px 0; margin-top:24px}
.footer-grid{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* Responsive */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .menu{display:none}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .title{font-size:30px}
}