:root{
  --azul:#1B2F50;
  --azul-fundo:#132540;
  --azul-profundo:#0E1B30;
  --teal:#00A896;
  --teal-claro:#3FC9B8;
  --claro:#F5F7FA;
  --borda:#E3E9F1;
  --texto:#1B2F50;
  --texto-suave:#5D6E88;
  --branco:#FFFFFF;
  --raio:14px;
  --sombra:0 18px 44px rgba(14,27,48,.13);
}

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

html{scroll-behavior:smooth}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--texto);
  background:var(--azul-fundo);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

/* ---------- topo ---------- */
.topo{
  display:flex;justify-content:center;align-items:center;
  padding:22px 20px 6px;background:var(--azul-fundo);
}
.topo__logo{height:46px;width:auto;display:block}

/* ---------- telas ---------- */
.tela{display:none}
.tela--ativa{display:block;animation:entra .32s ease both}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- hero ---------- */
.hero{
  max-width:1120px;margin:0 auto;padding:40px 22px 54px;
  color:var(--branco);
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
}
.hero__coluna{text-align:left}

.eyebrow{
  font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
  margin-bottom:16px;
}
.eyebrow--claro{color:var(--teal-claro)}

.hero__titulo{
  font-family:'Poppins',sans-serif;font-weight:700;
  font-size:clamp(30px,3.6vw,42px);line-height:1.2;letter-spacing:-.02em;
}
.hero__titulo .destaque{display:block;color:var(--teal-claro);margin-top:4px}

.hero__texto{
  margin:22px 0 28px;max-width:480px;
  font-size:16px;color:#C7D3E4;
}

.btn--hero{width:auto;padding:17px 38px;display:inline-block}
.hero__nota{margin-top:14px;font-size:13px;color:#8FA3BF}

.hero__lateral-rotulo{
  font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;
  color:#8FA3BF;margin-bottom:14px;
}
.sinais{list-style:none;text-align:left}
.sinais__item{
  position:relative;padding:15px 18px 15px 46px;margin-bottom:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:11px;font-size:14.5px;color:#D6E0ED;line-height:1.5;
}
.sinais__item::before{
  content:'';position:absolute;left:19px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--teal);
}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:34px;text-align:center;padding:34px 22px 40px}
  .hero__coluna{text-align:center}
  .hero__texto{margin-left:auto;margin-right:auto}
  .hero__titulo .destaque{display:inline}
  .btn--hero{width:100%}
  .hero__lateral-rotulo{text-align:left;max-width:480px;margin:0 auto 14px}
  .sinais{max-width:480px;margin:0 auto}
}

/* ---------- autoridade ---------- */
.autoridade{
  background:var(--azul-profundo);
  display:flex;gap:32px;align-items:center;
  max-width:1120px;margin:0 auto;padding:38px 22px 46px;
}
.autoridade__foto{
  width:132px;height:132px;object-fit:cover;object-position:center 18%;
  border-radius:50%;border:3px solid var(--teal);flex-shrink:0;
}
.autoridade__texto{flex:1;min-width:230px}
.autoridade__nome{
  font-family:'Poppins',sans-serif;font-size:22px;font-weight:600;
  color:var(--branco);margin-bottom:10px;
}
.autoridade__bio{font-size:14px;color:#A9BAD1;margin-bottom:9px}

/* ---------- quiz ---------- */
.quiz{
  max-width:600px;margin:26px auto 60px;padding:30px 26px 26px;
  background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);
}

.progresso{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.progresso__barra{flex:1;height:5px;background:var(--borda);border-radius:99px;overflow:hidden}
.progresso__preenchido{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--teal),var(--teal-claro));
  transition:width .34s cubic-bezier(.4,0,.2,1);
}
.progresso__contador{
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;
  color:var(--texto-suave);white-space:nowrap;
}

.pergunta__titulo{
  font-family:'Poppins',sans-serif;font-size:clamp(19px,4.4vw,23px);
  font-weight:600;line-height:1.34;letter-spacing:-.01em;margin-bottom:8px;
}
.pergunta__ajuda{font-size:13.5px;color:var(--texto-suave);margin-bottom:20px}

.opcoes{list-style:none;display:flex;flex-direction:column;gap:9px}
.opcao{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:15px 17px;border:1.5px solid var(--borda);border-radius:11px;
  background:var(--branco);font:inherit;font-size:15px;color:var(--texto);
  cursor:pointer;transition:border-color .16s,background .16s,transform .1s;
}
.opcao:hover{border-color:var(--teal);background:#F3FBFA}
.opcao:active{transform:scale(.995)}
.opcao:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.opcao__marca{
  width:19px;height:19px;flex-shrink:0;border:2px solid #C4D0E0;border-radius:50%;
  transition:border-color .16s,background .16s;
}
.opcao--multi .opcao__marca{border-radius:5px}
.opcao--marcada{border-color:var(--teal);background:#EAF8F6}
.opcao--marcada .opcao__marca{border-color:var(--teal);background:var(--teal);box-shadow:inset 0 0 0 3px var(--branco)}
.opcao--multi.opcao--marcada .opcao__marca{box-shadow:inset 0 0 0 2.5px var(--branco)}

.quiz__rodape{display:flex;gap:12px;align-items:center;margin-top:24px}

/* ---------- campos ---------- */
.campos{display:flex;flex-direction:column;gap:14px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo__rotulo{
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--texto-suave);
}
.campo input{
  font:inherit;font-size:15.5px;padding:13px 15px;
  border:1.5px solid var(--borda);border-radius:10px;color:var(--texto);
  background:var(--branco);transition:border-color .16s;
}
.campo input:focus{outline:none;border-color:var(--teal)}
.campo input::placeholder{color:#A9B6C8}

.consentimento{
  display:flex;gap:11px;align-items:flex-start;margin-top:18px;
  font-size:13px;color:var(--texto-suave);line-height:1.5;cursor:pointer;
}
.consentimento input{width:17px;height:17px;margin-top:2px;accent-color:var(--teal);flex-shrink:0}

.erro{color:#C0392B;font-size:13.5px;margin-top:14px;min-height:1px}

/* ---------- botões ---------- */
.btn{
  font-family:'Poppins',sans-serif;font-size:16px;font-weight:600;
  border:none;border-radius:11px;cursor:pointer;transition:filter .16s,transform .1s,opacity .16s;
}
.btn:focus-visible{outline:2px solid var(--teal-claro);outline-offset:3px}
.btn--primario{
  background:var(--teal);color:var(--branco);
  padding:17px 34px;width:100%;box-shadow:0 8px 22px rgba(0,168,150,.32);
}
.btn--primario:hover{filter:brightness(1.07)}
.btn--primario:active{transform:translateY(1px)}
.btn--primario[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn--compacto{flex:1;padding:15px 24px;font-size:15px;width:auto}
.btn--fantasma{
  background:transparent;color:var(--texto-suave);
  padding:15px 18px;font-size:14px;font-weight:500;
}
.btn--fantasma:hover{color:var(--texto)}
.btn--fantasma[hidden]{display:none}

.btn--whats{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--teal);color:var(--branco);text-decoration:none;
  padding:19px 28px;border-radius:12px;font-family:'Poppins',sans-serif;
  font-size:16.5px;font-weight:600;box-shadow:0 10px 28px rgba(0,168,150,.36);
  transition:filter .16s;
}
.btn--whats:hover{filter:brightness(1.07)}

/* ---------- resultado ---------- */
.resultado{
  max-width:640px;margin:26px auto 60px;padding:32px 26px 28px;
  background:var(--branco);border-radius:var(--raio);box-shadow:var(--sombra);
}
.resultado__titulo{
  font-family:'Poppins',sans-serif;font-size:clamp(21px,4.8vw,27px);
  font-weight:600;line-height:1.3;letter-spacing:-.015em;margin-bottom:26px;
}

/* assinatura: calendário */
.calendario{
  background:var(--azul);border-radius:12px;padding:22px 20px 18px;margin-bottom:24px;
}
.calendario__legenda{
  font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#8FA3BF;margin-bottom:16px;
}
.calendario__grade{
  display:grid;grid-template-columns:repeat(7,1fr);gap:7px;
}
.dia{
  aspect-ratio:1;border-radius:5px;background:rgba(255,255,255,.11);
  opacity:0;transform:scale(.5);
  animation:surge .3s ease forwards;
}
.dia--perdido{background:var(--teal)}
@keyframes surge{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .dia{animation:none;opacity:1;transform:none}
  .tela--ativa{animation:none}
}
.calendario__nota{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;
  margin-top:16px;font-size:11.5px;color:#8FA3BF;
}
.calendario__nota li{display:flex;align-items:center;gap:7px}
.chip{width:11px;height:11px;border-radius:3px;display:inline-block;flex-shrink:0}
.chip--perdido{background:var(--teal)}
.chip--livre{background:rgba(255,255,255,.14)}

.numeros{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.numero{background:var(--claro);border-radius:11px;padding:16px 15px}
.numero__valor{
  font-family:'Poppins',sans-serif;font-size:clamp(21px,5vw,27px);
  font-weight:700;color:var(--azul);line-height:1.15;letter-spacing:-.02em;
}
.numero__valor em{font-style:normal;color:var(--teal)}
.numero__rotulo{font-size:12.5px;color:var(--texto-suave);margin-top:5px;line-height:1.4}

.resultado__texto{font-size:15.5px;color:#405473;margin-bottom:24px}
.resultado__texto strong{color:var(--azul)}

.resultado__rodape{
  margin-top:18px;font-size:11.5px;color:#93A2B8;line-height:1.5;text-align:center;
}

.material{
  display:block;text-align:center;background:var(--claro);border:1.5px solid var(--borda);
  border-radius:12px;padding:18px;color:var(--azul);text-decoration:none;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;
}
.material--ok{background:#EAF8F6;border-color:var(--teal)}

/* ---------- rodapé ---------- */
.rodape{text-align:center;padding:30px 22px 40px;background:var(--azul-profundo)}
.rodape__logo{height:34px;opacity:.75;margin-bottom:12px}
.rodape__frase{font-family:'Poppins',sans-serif;font-size:14px;color:#8FA3BF;margin-bottom:6px}
.rodape__contato{font-size:12px;color:#5F7290}

@media (max-width:560px){
  .quiz,.resultado{margin:16px 12px 40px;padding:24px 18px 22px;border-radius:12px}
  .autoridade{flex-direction:column;text-align:center;gap:18px}
  .numeros{grid-template-columns:1fr}
}