/* =============================================================
   SEM ROTA DE FUGA — estilo
   Mobile-first. Alvos de toque >=48px. CTA na zona do polegar.
   ============================================================= */

:root{
  --preto:#161618;
  --carvao:#212127;
  --carvao-2:#26262a;
  --borda:rgba(237,237,232,.12);
  --borda-2:rgba(237,237,232,.24);
  --texto:#EDEDE8;
  --texto-2:rgba(237,237,232,.62);
  --texto-3:rgba(237,237,232,.36);
  --ambar:#C6612B;
  --ambar-esc:#B5471F;
  --vermelho:#C4463A;
  --verde:#5A8F63;
  --sans:'Libre Franklin',system-ui,-apple-system,sans-serif;
  --display:'Oswald','Libre Franklin',sans-serif;
}

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

html,body{background:var(--preto);color:var(--texto);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  min-height:100%;overflow-x:hidden}

.brilho{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(0,0,0,.5) 100%)}
.brilho::before{content:"";position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.container{position:relative;z-index:1;width:min(660px,100% - 2rem);
  margin-inline:auto;min-height:100dvh;display:flex;flex-direction:column}

/* ---------------- CABEÇALHO ---------------- */
.cabecalho{display:none;align-items:center;gap:.85rem;padding:1.1rem 0 .5rem;
  position:sticky;top:0;background:linear-gradient(var(--preto) 70%,transparent);z-index:20}
.cabecalho.visivel{display:flex}

.btn-voltar{background:none;border:0;color:var(--texto-3);cursor:pointer;
  padding:.5rem;margin-left:-.5rem;display:grid;place-items:center;border-radius:2px}
.btn-voltar:hover{color:var(--texto)}
.btn-voltar:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}

.progresso{flex:1;display:flex;gap:4px}
.seg{flex:1;height:4px;border-radius:99px;background:var(--borda);transition:background .35s}
.seg.cheio{background:var(--ambar)}

.contador{font-size:.72rem;color:var(--texto-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------- TELAS ---------------- */
.conteudo{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:1.5rem 0 8rem}

.tela{display:none;flex-direction:column;gap:1.15rem;animation:entra .35s ease}
.tela.ativa{display:flex}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------------- TIPOGRAFIA ---------------- */
.selo{display:inline-block;align-self:flex-start;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--ambar);
  border:1px solid var(--borda-2);border-radius:99px;padding:.4rem .8rem}

.titulo-grande{font-family:var(--display);font-size:clamp(1.7rem,6.4vw,2.5rem);
  line-height:1.06;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
.titulo-medio{font-family:var(--display);font-size:clamp(1.35rem,4.5vw,1.75rem);
  line-height:1.2;letter-spacing:-.015em;text-wrap:balance}

.subtitulo{color:var(--texto-2);font-size:1rem;max-width:52ch}
.subtitulo strong{color:var(--texto);font-weight:600}
.subtitulo.destaque{color:var(--texto);font-weight:500}

/* ---------------- GARANTIAS (abertura) ---------------- */
.garantias{display:flex;flex-direction:column;gap:.6rem;
  background:var(--carvao);border:1px solid var(--borda);border-radius:3px;padding:1rem 1.1rem}
.garantia{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--texto-2)}
.garantia strong{color:var(--texto)}
.ico{flex-shrink:0;font-size:.95rem;line-height:1.5}

/* ---------------- BOTÕES ---------------- */
.btn-principal{display:flex;align-items:center;justify-content:center;gap:.6rem;
  width:100%;min-height:56px;padding:1rem 1.3rem;border:0;border-radius:2px;cursor:pointer;
  background:var(--ambar);color:#0e0b09;
  font-family:var(--display);font-size:1.1rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;transition:transform .12s,background .15s;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.28)}
.btn-principal:hover{background:#d76e33}
.btn-principal:active{transform:translateY(1px)}
.btn-principal:focus-visible{outline:2px solid var(--texto);outline-offset:3px}

.btn-secundario{background:transparent;border:1px solid var(--borda-2);color:var(--texto);
  box-shadow:none;font-weight:600}
.btn-secundario:hover{background:var(--carvao-2);filter:none}

.btn-texto{background:none;border:0;color:var(--texto-3);cursor:pointer;
  font-family:var(--sans);font-size:.88rem;text-decoration:underline;
  text-underline-offset:3px;padding:.6rem;align-self:center}
.btn-texto:hover{color:var(--texto-2)}

/* ---------------- PERGUNTA ---------------- */
.pergunta-titulo{font-family:var(--display);font-size:clamp(1.3rem,4.8vw,1.7rem);
  line-height:1.25;letter-spacing:-.015em;text-wrap:balance}
.pergunta-sub{color:var(--texto-3);font-size:.92rem;margin-top:-.5rem}

.opcoes{display:flex;flex-direction:column;gap:.7rem}

.opcao{display:flex;align-items:center;gap:.85rem;width:100%;min-height:60px;
  padding:1rem 1.1rem;text-align:left;cursor:pointer;
  background:var(--carvao);border:1px solid var(--borda);border-radius:3px;
  color:var(--texto);font-family:var(--sans);font-size:.97rem;line-height:1.4;
  transition:border-color .18s,background .18s,transform .12s}
.opcao:hover{border-color:var(--borda-2);background:var(--carvao-2)}
.opcao:active{transform:scale(.995)}
.opcao:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}

.marcador{flex-shrink:0;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--borda-2);transition:all .18s;position:relative}
.opcao.sel{border-color:var(--ambar);background:rgba(224,163,60,.09)}
.opcao.sel .marcador{border-color:var(--ambar);background:var(--ambar)}
.opcao.sel .marcador::after{content:"";position:absolute;inset:5px 4px;
  border-left:2px solid #140F04;border-bottom:2px solid #140F04;
  transform:rotate(-45deg) translate(1px,-2px)}

.opcao.travada{pointer-events:none;opacity:.5}
.opcao.travada.sel{opacity:1}

/* ---------------- FORM LEAD ---------------- */
.form-lead{display:flex;flex-direction:column;gap:.7rem}
.form-lead label{font-size:.88rem;color:var(--texto-2);font-weight:500}
.form-lead input{width:100%;min-height:56px;padding:1rem 1.1rem;
  background:var(--carvao);border:1px solid var(--borda);border-radius:3px;
  color:var(--texto);font-family:var(--sans);font-size:1rem}
.form-lead input::placeholder{color:var(--texto-3)}
.form-lead input:focus{outline:none;border-color:var(--ambar)}
.form-lead input.erro-input{border-color:var(--vermelho) !important;background:rgba(196,70,58,0.08)}
.erro-msg{font-size:.84rem;color:var(--vermelho);font-weight:500;margin-top:-0.2rem;line-height:1.35}

.rodape-mini{font-size:.78rem;color:var(--texto-3);text-align:center}

/* ---------------- ANÁLISE ---------------- */
.analise{display:flex;flex-direction:column;align-items:center;gap:1.2rem;
  text-align:center;padding:3rem 0}
.spinner{width:44px;height:44px;border-radius:50%;
  border:3px solid var(--borda);border-top-color:var(--ambar);
  animation:gira .9s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

.analise-progresso-wrap{width:100%;max-width:320px;display:flex;flex-direction:column;gap:0.4rem;margin:0.2rem auto}
.analise-barra-fundo{width:100%;height:10px;background:var(--carvao-2);border:1px solid var(--borda);border-radius:99px;overflow:hidden}
.analise-barra-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--ambar-esc),var(--ambar));border-radius:99px;transition:width .12s ease}
.analise-pct{font-family:var(--display);font-size:1.15rem;font-weight:700;color:var(--ambar)}
.analise-aviso{font-size:0.86rem;color:var(--texto-2);background:rgba(224,163,60,0.08);border:1px solid rgba(224,163,60,0.25);border-radius:2px;padding:0.7rem 1rem;max-width:360px;margin:0.2rem auto;line-height:1.45}
.analise-aviso strong{color:var(--ambar)}

.passos{display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem}
.passo{font-size:.9rem;color:var(--texto-3);opacity:.4;transition:opacity .4s,color .4s}
.passo.ok{opacity:1;color:var(--verde)}
.passo.ok::before{content:"✓ "}

/* ---------------- RESULTADO ---------------- */
.cartao-res{background:linear-gradient(160deg,var(--carvao-2),var(--carvao));
  border:1px solid var(--borda-2);border-radius:4px;padding:1.5rem 1.4rem;
  display:flex;flex-direction:column;gap:.7rem}
.res-nome{font-family:var(--display);font-size:clamp(1.6rem,6vw,2.2rem);
  line-height:1.06;letter-spacing:.02em;text-transform:uppercase;color:var(--ambar)}
.res-linha{font-size:1.05rem;font-weight:600;color:var(--texto)}
.res-texto{color:var(--texto-2);font-size:.95rem}

.cartao{background:var(--carvao);border:1px solid var(--borda);border-radius:3px;
  padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.6rem}
.cartao h3{font-family:var(--display);font-size:1.02rem;letter-spacing:-.01em}
.cartao p{color:var(--texto-2);font-size:.93rem}
.cartao strong{color:var(--texto)}
.destaque-cartao{border-left:3px solid var(--ambar)}

.estudo{font-size:.86rem !important;color:var(--texto-3) !important;
  border-top:1px solid var(--borda);padding-top:.75rem;margin-top:.2rem}
.estudo strong{color:var(--texto-2)}

.cta-final{display:flex;flex-direction:column;gap:.9rem;margin-top:.5rem}
.cta-aviso{font-size:.93rem;color:var(--texto-2);text-align:center}
.cta-aviso strong{color:var(--texto)}

/* ---------------- PAINEL DE FEEDBACK ---------------- */
.painel{position:fixed;left:0;right:0;bottom:0;z-index:50;
  transform:translateY(105%);transition:transform .34s cubic-bezier(.22,1,.36,1);
  background:var(--carvao);border-top:1px solid var(--borda-2);
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.8);
  max-height:82dvh;overflow-y:auto}
.painel.visivel{transform:translateY(0)}

.painel-caixa{width:min(660px,100% - 2rem);margin-inline:auto;
  padding:1.4rem 0 1.6rem;display:flex;flex-direction:column;gap:.8rem}

.painel-titulo{font-family:var(--display);font-size:1.15rem;color:var(--ambar);
  letter-spacing:-.01em}
.painel-texto{display:flex;flex-direction:column;gap:.7rem}
.painel-texto p{color:var(--texto-2);font-size:.95rem;line-height:1.6}
.painel-texto strong{color:var(--texto)}

.painel-estudo{font-size:.85rem;color:var(--texto-3);
  background:var(--preto);border:1px solid var(--borda);border-radius:2px;
  padding:.85rem 1rem;line-height:1.55}

/* ---------------- ACESSIBILIDADE ---------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}