:root{
  --bg:#0E5CFF; --bg2:#f6f7fb; --text:#131528; --muted:#6b7280; --white:#fff;
  --primary:#5B6DFF; --primary-dark:#4355ff; --secondary:#EFF0FF;
  --shadow:0 10px 28px rgba(13,17,69,.12); --radius:16px; --font:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
*{box-sizing:border-box}
body{font-family:var(--font); color:var(--text); background:#fff}
a{color:var(--primary); text-decoration:none}
.container-mobile{max-width:520px; margin:0 auto; padding:16px}

/* Header/brand */
.brand-top{display:flex; align-items:center; gap:8px; justify-content:center; margin-bottom:16px}
.brand-mark{width:32px; height:32px; border-radius:10px}
.brand-word{font-weight:300; font-size:22px; color:black}

/* Badges */
.badges{display:flex; gap:12px; justify-content:center; margin:10px 0 16px; width: 100%; line-height: 12px; }
.badge{display:flex; align-items:center; gap:10px; padding:.5rem; border: 1px solid #5653fe;; border-radius:12px; width: 100%; background:#fff}
.badge-icon{font-size:18px}
.badge-text strong{display:block; font-size:11px; color:#2457FF; letter-spacing:.3px}

.badge-text span {
    font-size: 10px;
    line-height: 150%;
    color: #24234c;
    font-weight: 700;
}

.style-badges {
    padding: 0;
    margin: 0;
    color: #24234c;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: -.032px;
}

/* Hero */
.hero-card{background:#eef2ff; border-radius:20px; box-shadow:var(--shadow); overflow:hidden}
.hero-img{width:100%; height:auto; display:block}

.title-home {
    font-size: 28px;
    line-height: 36px;
    text-align: center;
    margin: 22px 0 8px;
    /* font-weight: 800; */
    color: #24234c;
}


.subtitle{font-size:14px; text-align:center; color:#4b5168; margin-bottom:16px; letter-spacing:.2px}

/* Buttons */
.cta-choices{display:flex; grid-template-columns:1fr; gap:12px; margin-top:8px}
.btn-primary,.btn-secondary{
  appearance:none; border:0; border-radius:14px; padding:16px 18px; font-weight:600; width: 100%;
  font-size:16px; box-shadow:var(--shadow); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px
}
.btn-primary{background:#5653fe; color:#e4e7ff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-secondary{background:#5653fe; color:#e4e7ff}
.btn-secondary:hover{background:#e4e7ff}
.btn-primary.big{padding:18px 22px; font-size:18px}

.chev{font-size:20px; line-height:1}

/* Legal */
.legal{margin:14px 0; text-align:center; color:#73799b; font-size:12px}
.legal.small{font-size:11px}
.legal a{color:#4453ff; font-weight:600}

/* Step header + progress */
.quiz-header{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px}
.back{font-size:22px; color:#293057; padding:6px 8px}
.brand-word-img{height:20px}
.counter{font-size:13px; color:#6a6f85; font-weight:700}
.progress-wrap{height:6px; background:#ebeefc; border-radius:999px; overflow:hidden; margin:8px 0 16px}
.progress-bar{height:100%; background:linear-gradient(90deg,#5B6DFF,#8aa0ff)}

/* Step 2 */
.question-title{font-size:26px; font-weight:900; text-align:center; margin-top:10px}
.question-sub{font-size:14px; color:#636a85; text-align:center; margin-bottom:16px}
.options-list{display:grid; gap:14px}
.option{background:#f5f7ff; border:1px solid #e6e9fb; padding:18px; border-radius:14px; font-weight:800; font-size:18px; color:#1f2559; text-align:left; box-shadow:var(--shadow)}
.option:active{transform:scale(0.995)}
.decor-man{display:block; width:58%; max-width:260px; margin:8px 0 0 auto}

/* Step 3 */
.promo-card{background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:12px; margin-top:6px}
.promo-img{width:100%; height: 100%; border-radius:12px; display:block}
.promo-title{font-size:22px; font-weight:900; margin:12px 0}

.promo-text {
    font-size: 16px;
    color: black;
    line-height: 25px;
}

.lead-form{margin-top:10px}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.input{width:100%; border:1px solid #d9def3; border-radius:12px; padding:14px 14px; font-size:16px; background:#fcfdff}
.input:focus{outline:2px solid #bfc8ff; border-color:#4355ff}

/* Thanks */
.thanks{text-align:center; margin-top:24px}
.big-mark{width:64px; height:64px; margin:10px auto 18px; display:block}

@media (min-width:768px){
  .title-home{font-size:36px}
  .question-title{font-size:32px}
  .promo-title{font-size:26px}
}


.progress-wrap{height:6px; background:#ebeefc; border-radius:999px; overflow:hidden; margin:8px 0 16px}
.progress-bar{
  height:100%;
  width: calc(var(--p, 0) * 1%); /* usa o valor que veio do template */
  background:linear-gradient(90deg,#5B6DFF,#8aa0ff);
}
/* Botão WhatsApp (cores oficiais) */
.btn-whatsapp{
  display: inline-flex; /* Flexbox para alinhamento */
  align-items: center;  /* Alinha ícone e texto verticalmente */
  justify-content: center;  /* Alinha conteúdo horizontalmente */
  width: 100%;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #50CD5E; /* WhatsApp green */
  border-radius: 14px;
  padding: 16px 18px;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .2px;
}

.btn-whatsapp.big{ 
  padding: 18px 22px;
  font-size: 18px;
  gap: 10px;
}

.btn-whatsapp:hover{ 
  background: #1ebe57; 
  box-shadow: 0 10px 22px rgba(30, 190, 87, .4);
}

.btn-whatsapp:active{ 
  transform: translateY(1px);
}

.btn-whatsapp:focus{ 
  outline: 3px solid #b8f5cf; 
  outline-offset: 2px;
}

/* Ícone alinhado ao texto */
.wa-icon{
  display: inline-flex;
  align-items: center;  /* Centraliza verticalmente */
  justify-content: center;
  margin-right: 8px;  /* Espaço entre o ícone e o texto */
  vertical-align: middle;
  color: #fff;
}

/* Bloco de confiança abaixo do botão */
.wa-cta{ margin-top: 16px }
.wa-trust{
  margin: 8px 4px 0;
  font-size: 12.5px;
  color: #5f657a;
  text-align: center;
}
.wa-trust .lock{ margin-right: 4px }
.wa-trust .sep{ margin: 0 6px; color: #9aa1b5 }