/* ═══════════════════════════════════════════════════════════════════
   HORAC — Diagnóstico inicial
   Superfície de tarefa, não de venda. Herda todos os tokens de
   styles.css; aqui só existe o que a landing não tinha.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base da página ──────────────────────────────────────────────── */
.pagina-diagnostico {
  --superficie: var(--off);
  --linha: var(--cinza-300);
  background: var(--off);
}

/* Header sem navegação: a marca à esquerda, a saída à direita. */
.header--simples .header__inner { justify-content: space-between; }

.voltar-lp {
  margin-left: auto;
  font-size: var(--t-pequeno);
  font-weight: 500;
  color: var(--tinta-2);
  text-decoration: none;
  transition: color 0.25s var(--curva);
}
.voltar-lp:hover { color: var(--tinta); }

/* ── Palco ───────────────────────────────────────────────────────
   O corpo ocupa exatamente uma tela: sem isso o rodapé empurra a
   página e cada pergunta nasce com barra de rolagem.
   svh e não dvh: com dvh a altura muda quando a barra do navegador
   móvel recolhe, e o bloco inteiro salta no meio de uma escolha. */
.pagina-diagnostico {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.palco {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: calc(4.5rem + var(--s-7)) var(--s-7);
}

.palco__inner { width: 100%; }

/* ── Progresso ───────────────────────────────────────────────────── */
.progresso { margin-bottom: var(--s-7); }

.progresso__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
  min-height: 1.75rem;
}

.voltar-etapa {
  padding: 0.25rem 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--t-rotulo);
  font-weight: 500;
  color: var(--tinta-3);
  cursor: pointer;
  transition: color 0.25s var(--curva), opacity 0.25s var(--curva);
}
.voltar-etapa:hover { color: var(--tinta); }
.voltar-etapa[hidden] { display: none; }

.progresso__contagem {
  margin-left: auto;
  font-size: var(--t-rotulo);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
}

.progresso__trilho {
  height: 2px;
  background: var(--cinza-300);
  border-radius: 1px;
  overflow: hidden;
}

/* scaleX e não width: o preenchimento não recalcula layout a cada
   pergunta, e a barra tem só 2px de altura. */
.progresso__fio {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--tinta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--curva);
}

/* ── Etapas ──────────────────────────────────────────────────────
   Sem JS a classe .js-diag nunca entra: as cinco perguntas ficam
   empilhadas e legíveis, e o <noscript> da abertura explica. */
.js-diag .etapa { display: none; }
.js-diag .etapa.ativa,
.js-diag .etapa.saindo { display: block; }

.etapa + .etapa { margin-top: var(--s-8); }
.js-diag .etapa + .etapa { margin-top: 0; }

.etapa:focus { outline: none; }
.etapa:focus-visible { outline: 2px solid var(--tinta); outline-offset: 6px; }

.etapa__pergunta {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 22ch;
}

.etapa--intro .lead { margin-top: var(--s-4); max-width: 40ch; }
.etapa--intro .btn { margin-top: var(--s-7); }

/* ── Opções ──────────────────────────────────────────────────────── */
.opcoes {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
  max-width: 36rem;
}
.opcoes--densa { gap: var(--s-2); }

.opcao {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: 1.0625rem 1.25rem;
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  font-family: inherit;
  font-size: var(--t-corpo);
  font-weight: 500;
  line-height: 1.35;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--curva), background 0.2s var(--curva),
              color 0.2s var(--curva), transform 0.2s var(--curva);
}

.opcao__rotulo { flex: 1; }

/* O dígito é o atalho de teclado, por isso só existe onde há teclado. */
.opcao__tecla {
  display: none;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
  transition: border-color 0.2s var(--curva), color 0.2s var(--curva);
}

@media (hover: hover) and (pointer: fine) {
  .opcao__tecla { display: inline-flex; }
  .opcao:hover {
    border-color: var(--tinta);
    transform: translateX(2px);
  }
  .opcao:hover .opcao__tecla { border-color: var(--metal-escuro); color: var(--tinta); }
}

.opcao[aria-checked="true"] {
  background: var(--preto);
  border-color: var(--preto);
  color: var(--branco);
  transform: none;
}
.opcao[aria-checked="true"] .opcao__tecla {
  border-color: var(--cinza-700);
  color: var(--cinza-300);
}

/* ── Fecho ───────────────────────────────────────────────────────── */
.etapa--fecho .texto { margin-top: var(--s-4); }

.resumo {
  margin-top: var(--s-7);
  border-top: 1px solid var(--linha);
  max-width: 36rem;
}

.resumo__linha {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--linha);
}

.resumo dt {
  font-size: var(--t-rotulo);
  font-weight: 600;
  color: var(--tinta-3);
}

.resumo dd {
  font-size: var(--t-pequeno);
  color: var(--tinta);
}

.fecho__acoes { margin-top: var(--s-6); }

/* ── Microcopy das etapas ────────────────────────────────────────── */
.etapa__micro {
  margin-top: var(--s-4);
  font-size: var(--t-rotulo);
  color: var(--tinta-3);
}
.etapa--intro .lead--apoio {
  margin-top: var(--s-4);
  font-size: var(--t-corpo);
  color: var(--tinta-2);
}
.recebido__link {
  color: var(--tinta-3);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--linha-forte);
}

/* ── Nome e WhatsApp ─────────────────────────────────────────────
   Mesmo material das opções: papel branco, fio de 1px, raio 2px. O
   campo é irmão do botão de escolha, não um widget de formulário
   vindo de outro sistema. */
.lead-form {
  margin-top: var(--s-6);
  max-width: 36rem;
}

.lead-form__campo + .lead-form__campo { margin-top: var(--s-4); }

.lead-form__rotulo {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tinta-3);
}

.lead-form__entrada {
  display: block;
  width: 100%;
  padding: 1.0625rem 1.25rem;
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  font-family: inherit;
  font-size: var(--t-corpo);   /* 17px: abaixo de 16 o iOS dá zoom no foco */
  font-weight: 500;
  line-height: 1.35;
  color: var(--tinta);
  transition: border-color 0.2s var(--curva);
}
.lead-form__entrada::placeholder { color: var(--cinza-500); font-weight: 400; }
.lead-form__entrada:focus {
  outline: none;
  border-color: var(--tinta);
}
.lead-form__entrada:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}
.lead-form__entrada[aria-invalid="true"] { border-color: var(--metal-escuro); }

.lead-form__erro {
  margin-top: var(--s-2);
  font-size: var(--t-rotulo);
  font-weight: 500;
  color: var(--tinta-2);
}
.lead-form__erro[hidden] { display: none; }

.lead-form .btn { width: 100%; margin-top: var(--s-6); }

.lead-form__micro {
  margin-top: var(--s-3);
  font-size: var(--t-rotulo);
  line-height: 1.5;
  color: var(--tinta-3);
}

.refazer {
  margin-top: var(--s-5);
  padding: 0.25rem 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--t-rotulo);
  font-weight: 500;
  color: var(--tinta-3);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--linha-forte);
  cursor: pointer;
  transition: color 0.25s var(--curva), text-decoration-color 0.25s var(--curva);
}
.refazer:hover { color: var(--tinta); text-decoration-color: var(--metal); }

/* ── Avisos ──────────────────────────────────────────────────────── */
.aviso {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  font-size: var(--t-pequeno);
  color: var(--tinta-2);
  max-width: 36rem;
}
.aviso[hidden] { display: none; }

.aviso--noscript { margin-top: var(--s-6); }

.copiar {
  margin-top: var(--s-3);
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ── Rodapé mínimo ───────────────────────────────────────────────── */
.rodape-min {
  padding-block: var(--s-5);
  border-top: 1px solid var(--linha);
  font-size: var(--t-rotulo);
  color: var(--tinta-3);
}

/* ── Movimento ───────────────────────────────────────────────────
   Um único gesto, com direção: a etapa entra de baixo quando se
   avança e de cima quando se volta. O borrão curto sustenta a
   sensação de troca sem custar layout. */
.js-diag .etapa.ativa { animation: etapa-entra 0.42s var(--curva) both; }
.js-diag .etapa.saindo { animation: etapa-sai 0.18s ease-in both; pointer-events: none; }

.palco[data-sentido="tras"] .etapa.ativa { animation-name: etapa-entra-tras; }
.palco[data-sentido="tras"] .etapa.saindo { animation-name: etapa-sai-tras; }

@keyframes etapa-entra {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes etapa-entra-tras {
  from { opacity: 0; transform: translateY(-16px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes etapa-sai {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-10px); }
}
@keyframes etapa-sai-tras {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .js-diag .etapa.ativa,
  .js-diag .etapa.saindo { animation: none; }
  .js-diag .etapa.saindo { display: none; }
  .progresso__fio { transition: none; }
  .opcao { transition: none; }
  @media (hover: hover) and (pointer: fine) {
    .opcao:hover { transform: none; }
  }
}

/* ── Telas menores ───────────────────────────────────────────────── */
@media (max-width: 48rem) { /* 768px */
  .palco { padding-block: calc(4.5rem + var(--s-6)) var(--s-6); }
  .progresso { margin-bottom: var(--s-6); }
  .voltar-lp { display: none; }          /* a marca já volta para a LP */
  .etapa__pergunta { max-width: 100%; }
  .opcoes { margin-top: var(--s-5); }
  .resumo__linha { grid-template-columns: 1fr; gap: var(--s-1); }
  /* A ação gruda no rodapé da tela enquanto o resumo rola. */
  .fecho__acoes {
    position: sticky;
    bottom: 0;
    margin-top: var(--s-6);
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--s-3) var(--gutter);
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--off) 94%, transparent);
    backdrop-filter: saturate(1.2) blur(10px);
    border-top: 1px solid var(--linha-forte);
  }
  .fecho__acoes .btn { width: 100%; }
}

@media (max-width: 30rem) { /* 480px */
  .opcao { padding: 0.9375rem 1rem; font-size: 1rem; }
  .resumo { margin-top: var(--s-6); }
  .fecho__acoes { margin-top: var(--s-6); }
}

/* Telas baixas (paisagem no celular): o palco deixa de centralizar
   para o topo da pergunta não sair da tela. */
@media (max-height: 34rem) {
  .palco { align-items: flex-start; }
}