:root{
  --bg1:#061c52;
  --bg2:#03123a;
  --card:#ffffff;
  --muted:#6b7280;
  --ink:#0b1220;
  --line:rgba(15,23,42,.12);
  --primary:#ff7a18;
  --primary2:#ce4605;
  --ring:rgba(255,122,24,.35);
  --shadow:0 20px 60px rgba(0,0,0,.25);
  --radius:18px;
  --radius2:14px;
  --font:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:radial-gradient(1200px 800px at 10% 10%, #0b2e86 0%, var(--bg1) 45%, var(--bg2) 100%);
  overflow-x:hidden;
}

.bg{position:fixed;inset:0;pointer-events:none;z-index:-1}
.stars{
  position:absolute;inset:-40px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.12) 0 2px, transparent 3px) 0 0/180px 180px,
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.09) 0 1px, transparent 2px) 0 0/220px 220px,
    radial-gradient(circle at 40% 85%, rgba(255,255,255,.07) 0 1px, transparent 2px) 0 0/260px 260px;
  filter:blur(.2px);
  opacity:.7;
  animation:float 10s ease-in-out infinite;
}
.grid{
  position:absolute;inset:0;
  background:
    radial-gradient(800px 800px at 65% 40%, rgba(255,122,24,.12) 0%, transparent 60%),
    radial-gradient(900px 900px at 85% 20%, rgba(255,61,127,.10) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(255,255,255,.05), transparent 40%, rgba(0,0,0,.15));
}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}

.topbar{
  width:100%;
  padding:26px 18px 10px;
}
.brand{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#fff;
}
.brandMark{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary2) 100%);
  box-shadow:0 12px 30px rgba(255,122,24,.22);
}
.brandText{display:flex;flex-direction:column;line-height:1.1}
.brandName{font-weight:800;letter-spacing:.3px}
.brandTag{opacity:.8;font-size:12px}

.wrap{max-width:1180px;margin:0 auto;padding:14px 18px 120px}
.layout{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:22px;
  align-items:stretch;
}
.layoutOne{grid-template-columns:1fr}

.card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.cardHeader{padding:26px 26px 0}
.cardTitle{font-size:26px;font-weight:800;letter-spacing:-.3px}
.cardSub{margin-top:6px;color:var(--muted);font-size:14px}

.wizard{padding:20px 26px 26px; position:relative}
.steps{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0 18px;
}
.step{display:flex;align-items:center;gap:8px;color:rgba(15,23,42,.55);font-size:13px;font-weight:600}
.step .dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(15,23,42,.25);
  box-shadow:0 0 0 0 rgba(255,122,24,.0);
}
.step.isActive{color:rgba(15,23,42,.9)}
.step.isActive .dot{background:linear-gradient(135deg,var(--primary),var(--primary2)); box-shadow:0 0 0 6px var(--ring)}
.step.isDone{color:rgba(15,23,42,.75)}
.step.isDone .dot{background:linear-gradient(135deg,var(--primary),var(--primary2))}
.line{flex:1;height:2px;background:rgba(15,23,42,.1);border-radius:99px}
.line.isOn{background:linear-gradient(90deg, rgba(255,122,24,.85), rgba(255,61,127,.65))}

.dniForm{display:flex;flex-direction:column;gap:10px}
.fieldRow{display:flex;align-items:center;gap:10px}
.seg{
  display:flex;
  background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  padding:4px;
}
.segItem{
  padding:10px 12px;
  font-weight:800;
  font-size:12px;
  border-radius:10px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
}
.input{
  flex:1;
  height:46px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  padding:0 14px;
  font-size:14px;
  outline:none;
  transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;
  background:#fff;
}
.input:focus{
  border-color:rgba(255,122,24,.55);
  box-shadow:0 0 0 6px var(--ring);
}
.btn{
  height:46px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  padding:0 16px;
  font-weight:800;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  user-select:none;
  text-decoration:none;
  color:var(--ink);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.10)}
.btn:active{transform:translateY(0)}
.btnGlow{
  position:absolute;inset:-2px;
  background:radial-gradient(180px 60px at 20% 20%, rgba(255,255,255,.65) 0%, transparent 60%);
  opacity:.7;
  transform:translateX(-30px);
  animation:glow 2.2s ease-in-out infinite;
}
@keyframes glow{0%,100%{opacity:.55;transform:translateX(-34px)}50%{opacity:.9;transform:translateX(20px)}}
.btnText{position:relative;z-index:1}

.btnPrimary{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary2) 100%);
  color:#fff;
  border-color:rgba(255,255,255,.18);
  box-shadow:0 18px 45px rgba(255,122,24,.22);
}
.btnPrimary:hover{box-shadow:0 22px 55px rgba(255,122,24,.28)}
.btnGhost{
  background:rgba(15,23,42,.03);
  border-color:rgba(15,23,42,.10);
}
.hint{font-size:12px;color:rgba(15,23,42,.62)}
.error{
  font-size:13px;
  color:#b91c1c;
  min-height:18px;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity .12s ease, transform .12s ease;
}
.error.isVisible{opacity:1;transform:translateY(0)}

.result{margin-top:10px; display:flex; flex-direction:column; gap:14px; animation:pop .25s ease-out}
@keyframes pop{from{opacity:.2;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.hello{display:flex;flex-direction:column;gap:6px}
.badge{
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(34,197,94,.12);
  color:#166534;
  font-weight:800;
  font-size:12px;
}
.helloTitle{font-size:20px;font-weight:900;letter-spacing:-.2px}
.helloSub{color:rgba(15,23,42,.72);font-size:14px}

.offer{
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--radius2);
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(15,23,42,.02) 100%);
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  overflow:hidden;
}
.offer::before{
  content:"";
  position:absolute;inset:-2px;
  background:radial-gradient(420px 140px at 20% 0%, rgba(255,122,24,.22), transparent 60%);
  opacity:.9;
}
.offerMain{display:flex;flex-direction:column;gap:4px; position:relative}
.offerAmount{font-weight:950;font-size:34px;letter-spacing:-.6px}
.offerMeta{color:rgba(15,23,42,.70);font-size:14px}
.offerPills{display:flex;flex-wrap:wrap;gap:8px; position:relative}
.pill{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.85);
  font-weight:700;
}
.actions{display:flex;gap:10px;flex-wrap:wrap}

.loader{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  border-radius:var(--radius);
  animation:fade .16s ease-out;
}
@keyframes fade{from{opacity:.2}to{opacity:1}}
.spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(15,23,42,.12);
  border-top-color:rgba(255,122,24,.9);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loaderText{font-weight:700;color:rgba(15,23,42,.8)}

.side{
  color:#fff;
  padding:18px;
}
.hero{height:100%;display:flex;flex-direction:column;gap:12px;justify-content:center}
.heroTitle{font-size:34px;font-weight:950;letter-spacing:-.8px}
.heroSub{opacity:.9;max-width:42ch;line-height:1.5}
.heroCard{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.heroStat{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  padding:14px 12px;
  backdrop-filter: blur(10px);
}
.heroStatN{font-size:20px;font-weight:900}
.heroStatT{font-size:12px;opacity:.85;margin-top:2px}
.heroFoot{margin-top:auto;opacity:.75;font-size:12px}

.summary{
  padding:18px 26px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sumRow{
  display:flex;
  justify-content:space-between;
  gap:14px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.9);
  border-radius:14px;
  padding:12px 14px;
}
.sumK{color:rgba(15,23,42,.62);font-weight:700}
.sumV{font-weight:900}

.confetti{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:999;
  opacity:0;
  transition:opacity .2s ease;
}
.confetti.isOn{opacity:1}

.devNotice{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1200;
  background:rgba(0,0,0,.82);
  color:#fff;
  text-align:center;
  padding:14px 18px;
  font-weight:950;
  letter-spacing:.2px;
  border-top:1px solid rgba(255,255,255,.14);
}
.devNotice strong{font-weight:950}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .side{padding:0}
  .hero{padding:10px 0 0}
  .heroTitle{font-size:30px}
}