/* ============================================================
   FORMULÁRIO DE QUALIFICAÇÃO EM 2 ETAPAS — variante B

   Carregar DEPOIS de plano-de-marketing.css, que traz os tokens do :root,
   os @font-face e a página inteira.

   Este arquivo estiliza APENAS o formulário. Nav, hero, seções e footer da
   variante B são idênticos aos da variante A e vêm do CSS original — é o que
   faz o teste A/B medir a qualificação, e não um design novo.

   O card imita o ._form_10 da variante A (mesmo laranja, mesmo raio, mesma
   largura) para que as duas versões pareçam a mesma página até o momento em
   que a segunda etapa aparece.
   ============================================================ */

/* ── CARD ───────────────────────────────────────────────────── */

.lead-form {
  background: var(--orange);
  border-radius: 8px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  font-family: 'Neulis Sans', Arial, sans-serif;
}

@media (min-width: 768px) { .lead-form { padding: 32px; } }

/* ── BARRA DE PROGRESSO ─────────────────────────────────────── */

.form-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}

.form-progress-bar {
  display: block;
  height: 100%;
  width: 50%;
  border-radius: 999px;
  background: #fff;
  transition: width 0.3s ease;
}

.form-progress-label {
  margin: 8px 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

/* ── CABEÇALHO DA ETAPA ─────────────────────────────────────── */

.lead-form .form-title {
  margin: 0 0 2px;
  color: #fff;
  font-family: 'Telegraf', Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  /* Recebe foco a cada troca de etapa para o leitor de tela anunciar a nova
     etapa. tabindex="-1" torna focável sem entrar na ordem de Tab. */
  outline: none;
}

.form-step-subtitle {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

/* ── ETAPAS E CAMPOS ────────────────────────────────────────── */

.form-step[hidden] { display: none; }

.form-row { margin-bottom: 12px; }

.form-label {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* Mesma aparência dos inputs da variante A. */
.form-input {
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'Neulis Sans', Arial, sans-serif;
  font-size: 14px;
  color: var(--dark);
}

.form-input:focus { outline: 2px solid var(--orange-dark); }

.form-input[aria-invalid="true"] { outline: 2px solid #fef08a; }

/* ── PERGUNTAS DE QUALIFICAÇÃO ──────────────────────────────── */

.qual-fieldset {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.qual-legend {
  padding: 0;
  margin-bottom: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.qual-hint {
  margin: -4px 0 8px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.85);
}

.qual-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Faixas de tamanho de equipe são curtas: cabem mais por linha. */
.qual-options--compact {
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
}

/*
  Botão em vez de <input type="radio">: dá controle total do visual e mantém a
  acessibilidade via aria-pressed, que é o que o leitor de tela anuncia. O CSS
  pinta A PARTIR do aria-pressed, então estado visual e semântico não têm como
  divergir.

  Sobre as cores: o instinto era usar branco com texto laranja no selecionado,
  para casar com o botão de envio. Mas laranja da marca sobre branco dá 2,8:1
  de contraste, bem abaixo do mínimo de 4,5:1 — e estas opções são o miolo do
  formulário, não um detalhe decorativo. Por isso:

    não selecionado  véu ESCURO sobre o laranja + texto branco  (~5:1)
    selecionado      branco sólido + texto escuro               (~17:1)

  A inversão de fundo é o que comunica "selecionado"; a cor do texto só precisa
  ser legível. Escurecer em vez de clarear também faz os chips lerem como
  botões, e não como manchas no card.
*/
.qual-option {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-family: 'Neulis Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.qual-option:hover {
  background: rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 255, 255, 0.7);
}

.qual-option[aria-pressed="true"] {
  background: #fff;
  border-color: #fff;
  color: var(--dark);
  font-weight: 700;
}

.qual-option:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 2px;
}

/* ── NAVEGAÇÃO ──────────────────────────────────────────────── */

/*
  column-reverse: no mobile o botão principal fica ACIMA do "Voltar", e no
  desktop à direita. Quem está no celular alcança o botão que importa com o
  polegar sem esbarrar no Voltar.
*/
.form-nav {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  margin-top: 14px;
}

/*
  Inativo em vez de disabled: o botão continua visível e legível, então o
  usuário entende que existe um próximo passo e que falta preencher algo. Um
  botão que some deixa a pessoa sem saber o que fazer.
*/
._submit.is-inactive {
  opacity: 0.55;
  cursor: not-allowed;
}

._submit.is-inactive:hover { background: #fff; }

._submit.is-loading { position: relative; color: transparent; }

._submit.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(249, 115, 22, 0.35);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: lead-form-spin 700ms linear infinite;
}

@keyframes lead-form-spin { to { transform: rotate(360deg); } }

.btn-back {
  width: 100%;
  padding: 11px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-family: 'Neulis Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-back:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.75);
}

.btn-back[hidden] { display: none; }

/* ── ERROS E RODAPÉ DO CARD ─────────────────────────────────── */

.form-field-error {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #fef08a; /* mesmo amarelo do .field-required da variante A */
}

.form-field-error[hidden] { display: none; }

.form-error {
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.form-error[hidden] { display: none; }

.form-legal {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

/* ── HONEYPOT ───────────────────────────────────────────────── */

/*
  Fora da tela em vez de display:none. Bot moderno ignora campo com
  display:none justamente por saber que é armadilha; fora da tela ele preenche.
  aria-hidden + tabindex -1 mantêm o campo invisível para leitor de tela e para
  navegação por teclado.
*/
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ── RESPONSIVO ─────────────────────────────────────────────── */

@media (min-width: 601px) {
  .form-nav { flex-direction: row-reverse; align-items: center; }
  .lead-form ._submit { flex: 1; }
  .btn-back { width: auto; padding: 11px 22px; }
}

@media (max-width: 520px) {
  .qual-options { grid-template-columns: 1fr; }
  .qual-options--compact { grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .form-progress-bar,
  .qual-option,
  ._submit,
  .btn-back { transition-duration: 0.01ms !important; }
  ._submit.is-loading::after { animation-duration: 3s; }
}