:root{
  --bg:#0a0e1c;
  --card:#121a30;
  --card-2:#182242;
  --line:#2a3660;
  --txt:#eef1f8;
  --muted:#9aa6c8;
  --accent:#37d6f6;
  --accent-2:#8f6bff;
  --ok:#39d98a;
  --warn:#ffb054;
  --radius:16px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(143,107,255,.22), transparent 60%),
    radial-gradient(800px 460px at -10% 10%, rgba(55,214,246,.16), transparent 55%),
    var(--bg);
  color:var(--txt);
  line-height:1.45;
  min-height:100vh;
  padding:24px 16px 48px;
}

.page{max-width:760px; margin:0 auto;}

/* ---------- hero ---------- */
.hero{text-align:center; padding:12px 4px 8px;}

.hero-badge{
  display:inline-block;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 14px;
  margin-bottom:18px;
}

.hero h1{
  font-size:clamp(26px, 5.5vw, 40px);
  line-height:1.1;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.hook{margin-top:14px; font-size:clamp(15px, 3.4vw, 18px); color:var(--txt);}
.hook-sec{margin-top:6px; font-size:14px; color:var(--muted);}
.hook-sec strong{color:var(--accent);}

.badges{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px;
}
.badges li{
  font-size:12.5px; color:var(--txt);
  background:var(--card-2); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px;
}

.intro{
  margin:22px auto 18px; max-width:640px;
  background:linear-gradient(90deg, rgba(55,214,246,.10), rgba(143,107,255,.10));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 18px; font-size:14.5px; color:var(--txt);
}

/* ---------- cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 16px 20px;
  margin-bottom:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}

.card h2{
  font-size:16.5px; line-height:1.3; margin-bottom:14px; display:flex; gap:10px; align-items:flex-start;
}
.card h2 small{display:block; font-size:12.5px; color:var(--muted); font-weight:400; margin-top:3px;}

.num{
  flex:none; width:26px; height:26px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:700;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#08101f;
  margin-top:1px;
}

/* ---------- options ---------- */
.opts{display:grid; grid-template-columns:1fr; gap:8px;}
@media(min-width:560px){
  .opts.g2{grid-template-columns:1fr 1fr;}
}

.opt{
  position:relative; display:flex; align-items:flex-start; gap:10px;
  background:var(--card-2); border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; cursor:pointer;
  transition:border-color .15s, transform .05s, background .15s;
  user-select:none;
}
.opt:hover{border-color:var(--accent-2);}
.opt:active{transform:scale(.995);}

.opt input{position:absolute; opacity:0; width:1px; height:1px;}

.box{
  flex:none; width:20px; height:20px; margin-top:1px;
  border:2px solid #55618f; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; transition:all .15s;
}
.box-radio{border-radius:50%;}

.opt input:checked + .box{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color:transparent;
}
.opt input:checked + .box::after{
  content:"";
  width:10px; height:10px;
}
.box-radio input:checked + .box::after{border-radius:50%;}
.opt input:checked + .box:not(.box-radio)::after{
  width:10px; height:5px;
  border-left:2.5px solid #08101f; border-bottom:2.5px solid #08101f;
  transform:rotate(-45deg) translate(1px,-1px);
}
.opt input:checked + .box.box-radio::after{
  width:10px; height:10px; border-radius:50%;
  background:#08101f;
}

.opt .txt{font-size:14.5px; color:var(--txt);}
.opt .txt small{display:block; font-size:12px; color:var(--muted); margin-top:2px;}
.opt input:focus-visible ~ .txt{color:var(--accent);}

/* ---------- text inputs ---------- */
.card input[type="text"], .card input[type="email"]{
  width:100%; margin-top:14px;
  background:#0d1428; border:1px solid var(--line); border-radius:12px;
  color:var(--txt); font-size:14.5px; padding:11px 14px;
  transition:border-color .15s, box-shadow .15s;
}
.card input[type="text"]:focus, .card input[type="email"]:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(55,214,246,.15);
}
.card input[type="text"][hidden], .card input[type="email"][hidden]{display:none;}

.hint{font-size:13.5px; color:var(--muted); margin-bottom:4px;}
.priv{font-size:12.5px; color:var(--muted); margin-top:10px;}

/* ---------- submit ---------- */
.submit{
  display:block; width:100%;
  margin:8px 0 4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#08101f; font-size:16.5px; font-weight:700;
  border:none; border-radius:14px; padding:15px;
  cursor:pointer;
  transition:filter .15s, transform .05s;
}
.submit:hover{filter:brightness(1.08);}
.submit:active{transform:scale(.995);}
.submit:disabled{opacity:.5; cursor:not-allowed;}

.status{margin-top:12px; text-align:center; font-size:14px; min-height:20px; color:var(--txt);}
.status.err{color:var(--warn);}

.footer-note{text-align:center; font-size:12px; color:var(--muted); margin-top:22px;}

/* ---------- paso a paso ---------- */
.steps{position:relative; overflow:hidden; transition:height .5s ease;}
.step{
  position:absolute; top:0; left:0; right:0;
  opacity:0; transform:translateX(calc(100% + 48px));
  visibility:hidden; pointer-events:none;
  transition:opacity .5s ease, transform .5s ease, visibility .5s ease;
}
.step.on{opacity:1; transform:translateX(0); visibility:visible; pointer-events:auto;}
.step.exit-l{transform:translateX(calc(-100% - 48px)); opacity:0;}
.step.exit-r{transform:translateX(calc(100% + 48px)); opacity:0;}
.step.in-r{animation:entra-r .5s ease both;}
.step.in-l{animation:entra-l .5s ease both;}
@keyframes entra-r{
  from{transform:translateX(calc(100% + 48px)); opacity:0;}
  to{transform:translateX(0); opacity:1;}
}
@keyframes entra-l{
  from{transform:translateX(calc(-100% - 48px)); opacity:0;}
  to{transform:translateX(0); opacity:1;}
}

/* ---------- progreso ---------- */
.wizard{margin-bottom:18px;}
.progress{display:flex; gap:6px;}
.p-cell{
  flex:1 1 0; height:6px; border-radius:999px;
  background:var(--card-2); border:1px solid var(--line);
  transition:background .2s, border-color .2s;
}
.p-cell.on{background:linear-gradient(90deg, var(--accent), var(--accent-2)); border-color:transparent;}
.p-count{margin-top:8px; font-size:12px; color:var(--muted); text-align:right;}

/* ---------- navegación ---------- */
.nav{display:flex; gap:10px; margin-top:16px; align-items:stretch;}
.btn-nav{
  flex:1;
  background:var(--card-2); border:1px solid var(--line); border-radius:14px;
  color:var(--txt); font-size:15px; font-weight:600; padding:14px 16px;
  cursor:pointer; transition:border-color .15s, filter .15s, transform .05s;
}
.btn-nav:hover:not(:disabled){border-color:var(--accent); filter:brightness(1.05);}
.btn-nav:active:not(:disabled){transform:scale(.995);}
.btn-nav:disabled{opacity:.45; cursor:default;}
.btn-nav[hidden], .nav .submit[hidden]{display:none;}
.btn-prev{flex:.85;}
.btn-next{flex:1.6; background:linear-gradient(90deg, var(--accent), var(--accent-2)); border:none; color:#08101f; font-weight:700;}
.nav .submit{margin:0; flex:1;}
.opt-note{margin-top:10px;}

/* honeypot hidden off-screen */
.honey{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0;}