/* =========================================================
   DIAGNÓSTICO
   Usa os tokens e botões do base.css; aqui fica só o que é
   próprio do funil: abertura, uma pergunta por tela, cartões
   grandes para tocar no celular e a barra de progresso.
   ========================================================= */

.diag{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100svh;
}
.diag .header__inner{height:68px}

.diag-main{
  flex:1;
  display:flex;
  padding:calc(68px + clamp(20px,5vw,56px)) 0 clamp(40px,6vw,72px);
}
.diag-palco{
  width:100%;
  max-width:calc(720px + 2 * var(--pad));
  margin:auto;
  padding-inline:var(--pad);
}

/* Troca de tela: entra de leve, sem biblioteca */
.is-entrando{animation:diag-entra .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes diag-entra{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* ---------- Abertura (quem vem de campanha) ---------- */
.diag-intro{text-align:center}
.diag-intro .eyebrow{justify-content:center}
.diag-intro .eyebrow::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.diag-intro__titulo{
  font-size:clamp(31px,6.2vw,52px);
  line-height:1.08;
  letter-spacing:-.03em;
  margin:0 auto 20px;
  max-width:16ch;
}
.diag-intro__titulo em{
  font-style:normal;
  background:linear-gradient(120deg,#5FD8F5 0%,var(--accent) 45%,#6AA8FF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.diag-intro__texto{max-width:56ch;margin:0 auto;font-size:clamp(16px,1.9vw,18px);line-height:1.62;color:var(--text-2)}
.diag-intro__cta{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:12px}
.diag-intro__botao{min-height:58px;padding-inline:36px;font-size:16px}
.diag-intro__nota{font-size:14px;color:var(--text-3)}
.diag-intro__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin:28px 0 0;padding:0;list-style:none}
.diag-intro__chips li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:99px;
  border:1px solid var(--line-2);
  background:rgba(7,13,24,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:13.5px;
  color:var(--text-2);
}
.diag-intro__chips svg{width:16px;height:16px;color:var(--accent)}
.diag-intro__passos{
  counter-reset:passo;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:clamp(36px,6vw,56px) 0 0;
  padding:0;
  list-style:none;
  text-align:left;
}
.diag-intro__passos li{
  counter-increment:passo;
  position:relative;
  padding:18px 18px 18px 58px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:rgba(7,13,24,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.diag-intro__passos li::before{
  content:counter(passo);
  position:absolute;
  left:16px;
  top:17px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  color:var(--accent);
}
.diag-intro__passos b{display:block;font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:3px}
.diag-intro__passos span{display:block;font-size:13.5px;line-height:1.5;color:var(--text-3)}
@media (max-width:760px){
  .diag-intro__passos{grid-template-columns:minmax(0,1fr);gap:8px}
  .diag-intro__passos li{padding:14px 16px 14px 56px}
  .diag-intro__passos li::before{top:13px}
}
@media (max-width:640px){
  .diag-intro__botao{width:100%}
}

/* ---------- Topo (só na primeira pergunta, para quem veio do site) ---------- */
.diag-topo{margin:0 0 clamp(16px,3vw,22px);text-align:center}
.diag-topo__titulo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 6px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--accent);
}
.diag-topo__titulo::before,
.diag-topo__titulo::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.diag-topo__titulo::after{background:linear-gradient(90deg,var(--accent),transparent)}
.diag-topo__texto{font-size:14.5px;color:var(--text-2)}

/* ---------- Cartão das perguntas ---------- */
.diag-cartao{
  position:relative;
  padding:clamp(22px,4.4vw,44px);
  border-radius:var(--r-xl);
  border:1px solid var(--accent-line);
  background:linear-gradient(165deg,rgba(4,178,217,.09),rgba(7,13,24,.93) 50%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02) inset;
}

.diag-progresso{margin:0 0 clamp(22px,3.6vw,32px)}
.diag-progresso__texto{
  display:block;
  margin-bottom:10px;
  font-family:var(--font-display);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.diag-progresso__barra{
  height:5px;
  border-radius:99px;
  background:rgba(150,172,205,.14);
  overflow:hidden;
}
.diag-progresso__barra i{
  display:block;
  height:100%;
  width:20%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--accent-2),var(--accent),#6AA8FF);
  box-shadow:0 0 14px rgba(4,178,217,.6);
  transition:width .45s cubic-bezier(.2,.7,.3,1);
}

.diag-tela{margin:0}
.diag-grupo{margin:0;padding:0;border:0;min-width:0}

.diag-q{
  font-size:clamp(23px,4.2vw,32px);
  line-height:1.2;
  letter-spacing:-.025em;
  margin:0 0 12px;
  max-width:26ch;
}
.diag-q:focus{outline:none}
.diag-q label{cursor:inherit}
.diag-apoio{margin:0 0 20px;font-size:15.5px;line-height:1.6;color:var(--text-2);max-width:58ch}
.diag-q + .diag-input,
.diag-q + .diag-opcoes,
.diag-q + .diag-sr + .diag-input{margin-top:20px}

.diag-sr{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Campos grandes: 18px no celular e sem zoom automático do iPhone */
.diag-input{
  display:block;
  width:100%;
  min-height:58px;
  padding:15px 18px;
  border-radius:14px;
  border:1px solid var(--line-2);
  background:rgba(4,8,15,.72);
  font:inherit;
  font-size:18px;
  color:var(--text);
  transition:border-color .2s,box-shadow .2s;
}
.diag-input::placeholder{color:#5C6E88}
.diag-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(4,178,217,.18)}
.diag-input[aria-invalid="true"]{border-color:rgba(251,113,133,.7)}
.diag-input--menor{min-height:52px;font-size:16.5px}
.diag-input--fone{font-family:var(--font-display);letter-spacing:.02em;max-width:360px}

.diag-texto{
  min-height:170px;
  max-height:60vh;
  resize:none;
  overflow-y:auto;
  line-height:1.6;
  font-size:16.5px;
}
.diag-texto__pe{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.diag-conta{font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.diag-dica{font-size:12.5px;color:var(--text-3)}
.diag-dica--fone{margin-top:8px}
@media (hover:none){.diag-texto__pe .diag-dica{visibility:hidden}}

.diag-rotulo{display:block;margin:0 0 8px;font-size:14px;font-weight:600;color:var(--text)}

/* ---------- Opções (planilhas e áreas) ---------- */
.diag-opcoes{display:grid;gap:10px}
.diag-opcao{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:62px;
  padding:14px 18px;
  border-radius:16px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.028);
  cursor:pointer;
  transition:border-color .2s,background-color .2s,transform .2s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.diag-opcao:hover{border-color:var(--line-3);background:rgba(255,255,255,.05)}
.diag-opcao input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.diag-opcao__marca{
  flex:none;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1.5px solid var(--line-3);
  color:transparent;
  transition:background-color .2s,border-color .2s,color .2s,transform .2s;
}
.diag-opcao__marca svg{width:14px;height:14px}
.diag-opcao__texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.diag-opcao__texto b{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--text);line-height:1.3}
.diag-opcao__texto small{font-size:14px;line-height:1.45;color:var(--text-2)}

/* Escolhida: borda, fundo e o sinal de check (não depende só da cor) */
.diag-opcao:has(input:checked){
  border-color:var(--accent);
  background:linear-gradient(135deg,rgba(4,178,217,.16),rgba(4,178,217,.05));
  box-shadow:0 10px 30px -18px rgba(4,178,217,.8);
}
.diag-opcao input:checked + .diag-opcao__marca{
  border-color:var(--accent);
  background:var(--accent);
  color:#04121A;
  transform:scale(1.06);
}
.diag-opcao:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.diag-opcao:has(input:disabled){opacity:.42;cursor:not-allowed}
.diag-opcao:has(input:disabled):hover{border-color:var(--line-2);background:rgba(255,255,255,.028)}

/* Áreas: quadradinhos (várias escolhas), em grade */
.diag-opcoes--areas{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.diag-opcoes--areas .diag-opcao{min-height:54px;padding:12px 14px;gap:11px;border-radius:14px}
.diag-opcoes--areas .diag-opcao__marca{width:21px;height:21px;border-radius:6px}
.diag-opcoes--areas .diag-opcao__marca svg{width:13px;height:13px}
.diag-opcoes--areas .diag-opcao__texto b{font-family:var(--font-body);font-size:14.5px;font-weight:500;line-height:1.3}
.diag-conta--cheia{color:#FCD38D}

.diag-outra{margin-top:16px}

/* ---------- Erros ---------- */
.diag-erro{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:12px 0 0;
  font-size:14.5px;
  line-height:1.45;
  color:#FDA4AF;
}
.diag-erro::before{
  content:"!";
  flex:none;
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  margin-top:1px;
  border-radius:50%;
  background:rgba(251,113,133,.18);
  font-size:12px;
  font-weight:700;
}
.diag-erro:empty{display:none}

/* ---------- Ações (Voltar / Continuar) ---------- */
.diag-acoes{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:clamp(24px,4vw,34px);
}
.diag-seguir{min-height:54px;min-width:190px}
.diag-acoes > :only-child{margin-left:auto}   /* primeira pergunta: só o Continuar */
.diag-seguir[disabled]{opacity:.7;cursor:progress;transform:none}
.diag-voltar{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:0 16px 0 10px;
  border:0;
  border-radius:99px;
  background:transparent;
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:600;
  color:var(--text-2);
  cursor:pointer;
  transition:color .2s,background-color .2s;
}
.diag-voltar:hover{color:var(--text);background:rgba(255,255,255,.05)}
.diag-voltar svg{width:18px;height:18px}

/* ---------- Envio ---------- */
.diag-aviso{
  margin-top:24px;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(4,8,15,.5);
}
.diag-aviso p{font-size:13.5px;line-height:1.6;color:var(--text-3)}
.diag-aviso a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.diag-aviso a:hover{color:var(--accent)}
.diag-marcar{display:flex;align-items:flex-start;gap:11px;margin-top:12px;cursor:pointer}
.diag-marcar input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}
.diag-marcar span{font-size:14px;line-height:1.5;color:var(--text-2)}

.diag-robo{margin-top:16px}
.diag-robo:empty{display:none}

.diag-falha{
  margin-top:20px;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid rgba(251,113,133,.4);
  background:rgba(251,113,133,.07);
}
.diag-falha p{font-size:14.5px;line-height:1.55;color:var(--text-2)}
.diag-falha__titulo{font-weight:600;color:#FDA4AF!important;margin-bottom:4px!important}
.diag-falha__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.diag-falha__wa{font-size:14px;color:#7CEBAA;text-decoration:underline;text-underline-offset:2px}

/* ---------- Obrigado ---------- */
.diag-obrigado{text-align:center}
.diag-obrigado:focus{outline:none}
.diag-obrigado .diag-q{margin:18px auto 10px;max-width:none;font-size:clamp(26px,4.6vw,36px)}
.diag-obrigado p{max-width:52ch;margin:0 auto 10px;font-size:15.5px;line-height:1.65;color:var(--text-2)}
.diag-obrigado__forte{font-family:var(--font-display);font-size:18px!important;color:var(--text)!important;font-weight:600}
.diag-obrigado__selo{
  display:inline-grid;
  place-items:center;
  width:66px;
  height:66px;
  border-radius:50%;
  border:1px solid rgba(43,196,104,.5);
  background:radial-gradient(circle,rgba(43,196,104,.28),rgba(43,196,104,.06));
  color:#7CEBAA;
  box-shadow:0 0 40px -6px rgba(43,196,104,.55);
}
.diag-obrigado__selo svg{width:30px;height:30px}
.diag-obrigado__acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}

.diag-noscript{padding:18px;border-radius:16px;border:1px solid var(--line-2);text-align:center}

/* Rodapé enxuto: sem a faixa de fundo das páginas longas */
.diag-rodape{position:relative;padding:22px 0 26px;border-top:1px solid var(--line);background:rgba(7,13,24,.7)}
.diag-rodape::before{display:none}
.diag-rodape .footer__bottom{margin:0;padding:0;border:0}

/* ---------- Celular ---------- */
@media (max-width:640px){
  .diag-palco{margin:0 auto}          /* no celular a pergunta começa no alto, não no meio da tela */
  .diag-main{padding-top:calc(68px + 14px)}
  .diag-topo__titulo{letter-spacing:.12em;font-size:12px}
  .diag-topo__titulo::before,.diag-topo__titulo::after{display:none}
  .diag-opcoes--areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diag-cartao{border-radius:var(--r-lg)}
  .diag-acoes{gap:8px}
  .diag-seguir{flex:1;min-width:0;padding-inline:20px}
  .diag-obrigado__acoes .btn{width:100%}
  .diag-input--fone{max-width:none}
}
@media (max-width:380px){
  .diag-opcoes--areas .diag-opcao{padding:11px 10px;gap:9px}
  .diag-opcoes--areas .diag-opcao__texto b{font-size:13.8px}
}

@media (prefers-reduced-motion:reduce){
  .is-entrando{animation:none}
  .diag-progresso__barra i,
  .diag-opcao,
  .diag-opcao__marca{transition:none}
}

/* ---------- Prioridade e investimento ---------- */
.diag-opcoes--duas{grid-template-columns:repeat(2,minmax(0,1fr))}
.diag-opcoes--duas .diag-opcao{min-height:72px;justify-content:center}
.diag-opcoes--duas .diag-opcao__texto b{font-size:17.5px}
.diag-preco{
  display:inline-block;
  margin:0 0 14px;
  padding:9px 14px;
  border-radius:12px;
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  font-size:14.5px;
  line-height:1.5;
  color:var(--text-2);
}
.diag-preco b{color:var(--text);font-family:var(--font-display);font-weight:600;white-space:nowrap}

/* ---------- Já tem sistema: motivos (lista longa) e faixas de valor ---------- */
.diag-opcoes--compactas{gap:8px}
.diag-opcoes--compactas .diag-opcao{min-height:52px;padding:11px 16px}
.diag-opcoes--compactas .diag-opcao__texto b{font-family:var(--font-body);font-size:15px;font-weight:500}
.diag-opcoes--faixas{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.diag-opcoes--faixas .diag-opcao{min-height:56px;padding:12px 14px}
.diag-opcoes--faixas .diag-opcao__texto b{font-size:15px;font-variant-numeric:tabular-nums}
@media (max-width:420px){
  .diag-opcoes--faixas{grid-template-columns:minmax(0,1fr)}
}