:root{--wa:#00A884;--wa-escuro:#017561;
  --rosa:#E8568C;--rosa-escuro:#C13A72;--rosa-claro:#FBE4EE;
  --creme:#FFF7FA;--carvao:#3A2B33;--cinza:#7A6E74;--verde:#2FA36B;
  --branco:#FFFFFF;--sombra:0 6px 24px rgba(193,58,114,.12);
  --sombra-forte:0 12px 44px rgba(193,58,114,.24);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:'Nunito Sans',system-ui,sans-serif;background:var(--creme);color:var(--carvao);line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
h1,h2{font-family:'Fraunces',Georgia,serif;line-height:1.12;font-weight:600}

.topo{background:var(--branco);padding:13px 20px;display:flex;align-items:center;justify-content:center;gap:8px;border-bottom:1px solid var(--rosa-claro);position:sticky;top:0;z-index:50}
.logo{display:flex;align-items:center;gap:8px;font-family:'Fraunces',serif;font-weight:700;font-size:20px;color:var(--rosa-escuro)}

.hero{background:linear-gradient(165deg,var(--rosa-claro) 0%, var(--creme) 60%);padding:30px 20px 40px;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center}
.eyebrow{display:inline-block;background:var(--branco);color:var(--rosa-escuro);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin:0 auto 16px;box-shadow:var(--sombra)}
.hero h1{font-size:29px;color:var(--carvao);margin-bottom:11px;letter-spacing:-.01em}
.hero h1 .destaque{color:var(--rosa-escuro);font-style:italic}
.hero .sub{font-size:15.5px;color:var(--cinza);max-width:400px;margin:0 auto 22px;font-weight:600}

.card{background:var(--branco);border-radius:22px;box-shadow:var(--sombra-forte);max-width:430px;margin:0 auto;padding:24px 20px 22px;text-align:left;border:1px solid var(--rosa-claro);width:100%}
.passo{display:none;animation:aparece .32s ease both}
.passo.ativo{display:block}
@keyframes aparece{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.progresso{display:flex;gap:6px;margin-bottom:18px}
.progresso .barra{flex:1;height:5px;border-radius:100px;background:var(--rosa-claro);transition:.3s}
.progresso .barra.ok{background:var(--wa)}

.feedback{background:var(--rosa-claro);color:var(--rosa-escuro);font-weight:800;font-size:13.5px;padding:10px 13px;border-radius:11px;margin-bottom:15px;display:flex;align-items:center;gap:6px;animation:aparece .35s ease both}
.contexto{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--rosa);margin-bottom:8px}
.pergunta{font-family:'Fraunces',serif;font-size:21px;font-weight:600;color:var(--carvao);margin-bottom:6px;line-height:1.2}
.pergunta b{color:var(--rosa-escuro)}
.ajuda{font-size:14px;color:var(--cinza);margin-bottom:18px;font-weight:600}
.ajuda b{color:var(--carvao);font-weight:800}

.opcoes{display:flex;flex-direction:column;gap:10px}
.opcao{display:flex;align-items:center;gap:12px;background:var(--creme);border:2px solid var(--rosa-claro);border-radius:14px;padding:15px 16px;font-size:16px;font-weight:700;color:var(--carvao);cursor:pointer;transition:.16s;font-family:'Nunito Sans',sans-serif;width:100%;text-align:left}
.opcao b{font-weight:800}
.opcao:active{transform:scale(.98)}
.opcao:hover{border-color:var(--rosa);background:var(--rosa-claro)}
.opcao .ic{font-size:21px;flex-shrink:0}

.campo-cpf{width:100%;font-size:22px;font-weight:800;letter-spacing:.02em;text-align:center;padding:16px 14px;border:2px solid var(--rosa-claro);border-radius:14px;color:var(--carvao);background:var(--creme);font-family:'Nunito Sans',sans-serif;margin-bottom:4px}
.campo-cpf:focus{outline:none;border-color:var(--wa);background:var(--branco)}
.campo-cpf::placeholder{color:#C9BEC4;font-weight:700;letter-spacing:.06em}
.erro-cpf{color:var(--rosa-escuro);font-size:13px;font-weight:700;min-height:17px;margin-bottom:9px;text-align:center}

.btn{width:100%;background:var(--wa);color:var(--branco);border:none;border-radius:14px;padding:16px;font-size:17px;font-weight:800;cursor:pointer;transition:.16s;font-family:'Nunito Sans',sans-serif;box-shadow:0 5px 16px rgba(0,168,132,.32);display:flex;align-items:center;justify-content:center;gap:7px}
.btn:active{transform:scale(.98)}
.btn:hover{background:var(--wa-escuro)}

.abertura-emoji{font-size:42px;text-align:center;margin-bottom:5px}
#passo0{text-align:center}
#passo0 .pergunta,#passo0 .ajuda{text-align:center}

.seguranca{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:13px;font-size:12px;color:var(--cinza);font-weight:600;text-align:center}

.carregando{text-align:center;padding:20px 0}
.spinner{width:50px;height:50px;margin:4px auto 18px;border:4px solid var(--rosa-claro);border-top-color:var(--rosa);border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.carregando .txt{font-family:'Fraunces',serif;font-size:19px;color:var(--carvao);font-weight:600;padding:0 8px}
.carregando .txt2{font-size:13.5px;color:var(--cinza);font-weight:600;margin-top:7px}

.ponte{text-align:center;padding:8px 0}
.ponte .emoji{font-size:50px;margin-bottom:12px;animation:pulsa 1s ease infinite}
@keyframes pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.ponte h2{font-size:24px;margin-bottom:10px;color:var(--carvao);padding:0 4px}
.ponte p{font-size:15px;color:var(--cinza);font-weight:600;margin-bottom:8px;padding:0 6px}
.ponte .mini{font-size:12.5px;color:var(--rosa);font-weight:700;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:7px}
.ponte .mini .dot{width:14px;height:14px;border:2px solid var(--rosa-claro);border-top-color:var(--rosa);border-radius:50%;animation:gira .7s linear infinite;display:inline-block}

.aviso-legal{padding:16px 22px 22px;text-align:center;max-width:520px;margin:0 auto}
.aviso-legal p{font-size:10.5px;color:#B4A8AE;line-height:1.55;font-weight:600}

/* ─── FOCO NO FORMULÁRIO ─── */
/* feedback de toque: a opção acende antes de avançar */
.opcao.sel{border-color:var(--rosa);background:var(--rosa-claro);box-shadow:0 0 0 3px rgba(232,86,140,.20);transform:scale(.99)}
.opcao.sel .ic{transform:scale(1.18)}
/* depois da 1ª resposta, recolhe o topo grande e joga a atenção pro card */
body.foco .eyebrow,body.foco .hero .sub{display:none}
body.foco .hero{padding:14px 20px 26px}
body.foco .hero h1{font-size:21px;margin-bottom:14px}
body.foco .topo{padding:10px 20px}
/* card um pouco maior e mais destacado no modo foco */
body.foco .card{box-shadow:var(--sombra-forte);transform:translateY(-2px)}
.card{transition:transform .3s ease}