:root{
  --navy:#0b2239;
  --navy-2:#12355f;
  --accent:#1eb5ab;          /* sobrescrito por cada funil via JS */
  --accent-dark:#0f8f86;
  --accent-soft:rgba(30,181,171,.12);
  --whats:#25D366;
  --whats-dark:#1da851;
  --bg:#f4fbfb;
  --card:#ffffff;
  --text:#15324a;
  --muted:#64748b;
  --line:#e3edf3;
  --danger:#b42318;
  --shadow:0 24px 70px rgba(11,34,57,.16);
  --radius:26px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% -10%, var(--accent-soft), transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(11,34,57,.08), transparent 38%),
    linear-gradient(160deg,#f8ffff 0%,var(--bg) 55%,#eef7ff 100%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.page{
  width:100%;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px 16px;
}

.hero{width:min(720px,100%)}

/* ---------- Marca (logo oficial, discreto no topo) ---------- */
.brand{
  display:inline-flex;
  align-items:center;
  margin:0 0 14px;
  text-decoration:none;
}
.brand img{
  height:38px;
  width:auto;
  max-width:220px;
  display:block;
}

/* ---------- Badges de confiança ---------- */
.trust{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 auto 16px;
}
.trust .badge{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 12px;
  font-size:.78rem;font-weight:700;color:var(--navy);
  box-shadow:0 4px 14px rgba(11,34,57,.04);
}
.trust .badge b{color:var(--accent)}

/* ---------- Card ---------- */
.card{
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:30px;
  backdrop-filter:blur(8px);
}

/* ---------- Progresso ---------- */
.progress-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.progress-head .step-label{
  font-size:.78rem;font-weight:800;color:var(--accent);
  text-transform:uppercase;letter-spacing:.04em;
}
.progress-head .step-help{font-size:.74rem;color:var(--muted)}
.progress-wrap{
  height:9px;background:#e9eff4;border-radius:999px;overflow:hidden;
  margin-bottom:26px;
}
.progress-bar{
  height:100%;width:8%;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  border-radius:999px;
  transition:width .35s cubic-bezier(.4,0,.2,1);
}

/* ---------- Texto ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent-dark);background:var(--accent-soft);
  border-radius:999px;padding:7px 13px;
  font-weight:800;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;
  margin:0 0 14px;
}
h1{
  font-size:clamp(1.45rem,3.6vw,2.2rem);
  line-height:1.12;margin:0 0 10px;color:var(--navy);
  outline:none;
}
.lead{font-size:1rem;line-height:1.55;color:var(--muted);margin:0 0 6px}

/* ---------- Opções ---------- */
.options{display:grid;gap:12px;margin-top:22px}
.option{
  display:flex;align-items:center;gap:14px;
  width:100%;text-align:left;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;
  border-radius:18px;padding:15px 16px;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.option:hover,.option:focus-visible{
  outline:none;border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(11,34,57,.10);
}
.option.selected{
  border-color:var(--accent);background:var(--accent-soft);
  transform:scale(.99);
}
.option-icon{
  flex:0 0 auto;width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;font-size:1.3rem;
  background:linear-gradient(135deg,var(--accent-soft),#fff);
  border:1px solid var(--line);
}
.option-text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto}
.option-label{font-weight:800;color:var(--navy);font-size:1rem;line-height:1.25}
.option-desc{font-size:.82rem;color:var(--muted);font-weight:500}
.option-arrow{
  flex:0 0 auto;color:var(--muted);font-weight:900;font-size:1.1rem;
  transition:transform .15s ease,color .15s ease;
}
.option:hover .option-arrow{color:var(--accent);transform:translateX(3px)}

/* ---------- Formulário ---------- */
.form{display:grid;gap:14px;margin-top:22px}
label{display:grid;gap:7px;font-weight:800;color:var(--navy);font-size:.92rem}
label .req{color:var(--accent)}
input,select,textarea{
  width:100%;border:1.5px solid var(--line);border-radius:14px;
  padding:13px 14px;font:inherit;color:var(--text);background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
textarea{resize:vertical;min-height:82px}

/* ---------- Botões ---------- */
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{
  border:none;border-radius:999px;padding:14px 20px;
  font-weight:800;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  font-size:.98rem;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;box-shadow:0 14px 30px rgba(30,181,171,.28);
}
.btn-whats{
  background:linear-gradient(135deg,var(--whats),var(--whats-dark));
  color:#fff;box-shadow:0 14px 30px rgba(37,211,102,.30);
  flex:1 1 auto;
}
.btn-ghost{background:#eef3f7;color:var(--navy)}
.wa-icon{font-size:.7rem;transform:translateY(-1px)}

/* ---------- Resumo / final ---------- */
.final-check{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;margin:6px 0 2px;
  font-size:1.9rem;color:#fff;font-weight:900;
  background:linear-gradient(135deg,var(--whats),var(--whats-dark));
  box-shadow:0 14px 30px rgba(37,211,102,.30);
  animation:pop .4s cubic-bezier(.2,1.4,.4,1) both;
}
.summary{
  display:grid;gap:2px;margin:18px 0 0;
  background:#f6fbfd;border:1px solid var(--line);border-radius:18px;
  padding:6px 16px;
}
.sum-row{
  display:flex;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px dashed var(--line);font-size:.92rem;
}
.sum-row:last-child{border-bottom:none}
.sum-row span{color:var(--muted)}
.sum-row strong{color:var(--navy);text-align:right}

/* ---------- Mensagens ---------- */
.error{color:var(--danger);font-weight:800;margin:4px 0 0;font-size:.9rem}
.privacy{margin:22px 0 0;color:var(--muted);font-size:.76rem;line-height:1.45}
.footer-note{text-align:center;color:var(--muted);margin:18px 0 0;font-size:.92rem}
.footer-note a{color:var(--accent-dark);font-weight:800;text-decoration:none}
.footer-links{text-align:center;margin:8px 0 0;font-size:.82rem}
.footer-links a{color:var(--muted);text-decoration:none;margin:0 8px}
.footer-links a:hover{color:var(--accent-dark)}

/* ---------- Animação de troca de etapa ---------- */
.quiz{opacity:1}
.quiz.enter{animation:slideIn .35s cubic-bezier(.2,.7,.3,1) both}
@keyframes slideIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes pop{
  from{opacity:0;transform:scale(.4)}
  to{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- Mobile ---------- */
@media (max-width:560px){
  .page{padding:20px 12px}
  .card{padding:22px 18px;border-radius:22px}
  .brand img{height:32px}
  .actions{flex-direction:column}
  .btn{width:100%}
  .option{padding:13px 14px;gap:12px}
  .option-icon{width:38px;height:38px;font-size:1.15rem}
}