@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --cor-marca:#B54300;
  --cor-marca-escura:#933700;
  --cor-marca-suave:rgba(181,67,0,.08);
  --cor-texto:#1f1d1b;
  --cor-texto-suave:#5c5752;
  --cor-borda:#e3ded8;
  --cor-fundo:#f6f4f1;
  --cor-card:#fff;
  --cor-erro:#b3261e;
  --cor-ok:#1f7a4d;
  --raio:14px;
  --sombra:0 1px 2px rgba(31,29,27,.04),0 8px 28px rgba(31,29,27,.06);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--cor-texto);background:var(--cor-fundo);line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top,0) 16px env(safe-area-inset-bottom,0);
}
img{max-width:100%;height:auto;display:block}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none!important}

/* ---------- Topo ---------- */
.topo{
  width:100%;max-width:520px;margin:0 auto;
  display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
  padding:16px 0 12px;
}
.topo__logo{grid-column:2;grid-row:1;justify-self:center;height:34px;width:auto}
.topo__voltar{
  grid-column:1;grid-row:1;
  width:44px;height:44px;border:0;background:transparent;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--cor-texto-suave);
}
.topo__voltar:hover{background:rgba(0,0,0,.05)}
.topo__voltar:focus-visible{outline:2px solid var(--cor-marca);outline-offset:2px}

.progresso{width:100%;max-width:520px;margin:0 auto 20px}
.progresso__trilho{height:4px;border-radius:4px;background:var(--cor-borda);overflow:hidden}
.progresso__barra{height:100%;width:0;background:var(--cor-marca);border-radius:4px;transition:width .35s ease}
.progresso__texto{margin-top:8px;font-size:.75rem;color:var(--cor-texto-suave);text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Card ---------- */
.quiz{width:100%;max-width:520px;margin:0 auto;flex:1}
.card{background:var(--cor-card);border-radius:var(--raio);box-shadow:var(--sombra);padding:28px 22px}
@media (min-width:480px){.card{padding:36px 32px}}

/* Animação só nas trocas de etapa: a primeira tela pinta instantaneamente (LCP). */
.etapa--animada{animation:entrar .3s ease both}
@keyframes entrar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.etapa--animada{animation:none}.progresso__barra{transition:none}}

.selo{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cor-marca);background:var(--cor-marca-suave);padding:6px 12px;border-radius:40px;margin-bottom:14px;
}
.etapa__titulo{font-size:clamp(1.3rem,5vw,1.6rem);font-weight:800;line-height:1.25;letter-spacing:-.02em;margin-bottom:10px}
.etapa__titulo:focus{outline:none}
.etapa__subtitulo{font-size:.95rem;color:var(--cor-texto-suave);margin-bottom:24px}
.etapa__contexto{
  font-size:.92rem;color:var(--cor-texto-suave);line-height:1.6;
  border-left:3px solid var(--cor-marca);padding:2px 0 2px 14px;margin-bottom:18px;
}
.etapa__contexto strong{color:var(--cor-texto)}

/* ---------- Campos ---------- */
.campo{margin-bottom:16px}
.campo__rotulo{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.campo__entrada{
  width:100%;height:52px;padding:0 16px;border:1.5px solid var(--cor-borda);border-radius:10px;
  background:#fff;font-size:16px;transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none;
}
select.campo__entrada{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c5752' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;
}
.campo__entrada:focus{outline:none;border-color:var(--cor-marca);box-shadow:0 0 0 3px var(--cor-marca-suave)}
.campo__entrada[aria-invalid="true"]{border-color:var(--cor-erro)}
.campo__erro{display:block;font-size:.8rem;color:var(--cor-erro);margin-top:6px;min-height:0}
.campo__erro:empty{display:none}
.isca{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- Opções ---------- */
.opcoes{display:grid;gap:10px}
.opcao{
  display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:14px 16px;
  text-align:left;background:#fff;border:1.5px solid var(--cor-borda);border-radius:12px;cursor:pointer;
  font-size:1rem;font-weight:500;line-height:1.35;transition:border-color .15s,background .15s;
}
.opcao::before{
  content:'';flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #c9c2ba;transition:border .15s,box-shadow .15s;
}
.opcao:hover{border-color:#cdbfb2}
.opcao:focus-visible{outline:2px solid var(--cor-marca);outline-offset:2px}
.opcao[aria-checked="true"]{border-color:var(--cor-marca);background:var(--cor-marca-suave)}
.opcao[aria-checked="true"]::before{border:6px solid var(--cor-marca)}
.opcao__detalhe{display:block;font-size:.8rem;font-weight:400;color:var(--cor-texto-suave);margin-top:2px}

/* ---------- Botões ---------- */
.botao{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 24px;
  border:0;border-radius:60px;background:var(--cor-marca);color:#fff;font-size:1rem;font-weight:700;
  cursor:pointer;text-decoration:none;transition:background .15s,transform .1s;margin-top:8px;
}
.botao:hover{background:var(--cor-marca-escura)}
.botao:active{transform:scale(.99)}
.botao:focus-visible{outline:2px solid var(--cor-marca);outline-offset:3px}
.botao[disabled]{opacity:.6;cursor:wait}
.botao svg{flex:none}

.consentimento{font-size:.75rem;color:var(--cor-texto-suave);margin-top:14px;text-align:center;line-height:1.5}
.consentimento a{color:inherit}

/* ---------- Telas finais ---------- */
.final{text-align:center}
.final__icone{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px}
.final__icone--ok{background:rgba(31,122,77,.1);color:var(--cor-ok)}
.final__icone--neutro{background:var(--cor-marca-suave);color:var(--cor-marca)}
.final .etapa__subtitulo{margin-bottom:16px}
.beneficio{
  background:var(--cor-fundo);border-radius:12px;padding:16px 18px;margin:20px 0;
  font-size:.95rem;line-height:1.6;text-align:left;
}
.proximo-passo{font-size:.9rem;color:var(--cor-texto-suave);margin-bottom:8px;text-align:left}
.proximo-passo strong{color:var(--cor-texto)}
.contagem{font-size:.8rem;color:var(--cor-texto-suave);margin-top:12px;font-variant-numeric:tabular-nums}

/* ---------- Rodapé de confiança ---------- */
.confianca{
  width:100%;max-width:520px;margin:20px auto 0;padding-bottom:24px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;
  font-size:.75rem;color:var(--cor-texto-suave);
}
.confianca span{display:inline-flex;align-items:center;gap:6px}
.confianca svg{color:var(--cor-marca)}

/* ---------- Abertura da página /projeto/ (contato no fim): fica acima da 1ª pergunta ---------- */
#quiz-intro{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--cor-borda)}
#quiz-intro .etapa__subtitulo{margin-bottom:0}