/* ============================================================
   Formulário padrão do site — porte do Figma
   Arquivo: BNC - NTC (vBDTCVQ2HIzfcDe3febQmY), nó 1868:1925,
   instância do componente "Form Wizard Slots".

   Medidas literais do Figma, não do design-system.css: card de
   606px com borda de 1.5px #d9d9d9 e raio 16, respiro de 24 entre
   título, campos e botão; campo com borda de 1px #d9d9d9, raio 8 e
   padding 16/12; rótulo em #5a5a5a e placeholder em #b3b3b3.

   Carregado depois do index.css para vencer as regras antigas de
   `.form-group`, que pintavam o campo de #f6f8fc com raio maior.
   ============================================================ */

.lead-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 606px;
  padding: 24px;
  background: #fff;
  border: 1.5px solid #d9d9d9;
  border-radius: 16px;
}

.lead-card__titulo {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 36px;
  letter-spacing: 0;
  color: var(--blue-800, #002e7f);
}

/* o formulário é só a pilha campos + botão; o respiro de 24 é o mesmo
   do card, então ele não introduz um segundo ritmo */
.lead-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lead-form__campos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lead-card .form-group {
  gap: 8px;
}

.lead-card .form-group label {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #5a5a5a;
}

.lead-card .form-group input,
.lead-card .form-group textarea {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-900, #0b1b3b);
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 12px 16px;
}

.lead-card .form-group input {
  letter-spacing: -0.16px;
}

.lead-card .form-group input::placeholder,
.lead-card .form-group textarea::placeholder {
  color: #b3b3b3;
}

.lead-card .form-group textarea {
  min-height: 80px;
  resize: vertical;
}

/* Foco sem anel: o dono não quis a "segunda borda azul" que o anel de
   box-shadow do index.css desenhava em volta do campo. Sobra a própria
   borda mudando de cor, que é o que o Figma mostra. */
.lead-card .form-group input:hover,
.lead-card .form-group textarea:hover {
  border-color: rgba(0, 91, 255, 0.35);
}

.lead-card .form-group input:focus,
.lead-card .form-group textarea:focus {
  outline: none;
  border-color: var(--blue-500, #005bff);
  box-shadow: none;
}

/* enquanto o envio processa, antes da tela de sucesso entrar */
.lead-form .afb[disabled] {
  opacity: .7;
  cursor: progress;
}

/* ------------------------------------------------------------
   Tela de sucesso — componente "Form Sucesso" do Figma (1874:2816)
   Entra no lugar do formulário, dentro do mesmo card. A variante
   daquele nó vem sem a régua de etapas e sem o aviso: sobram
   ilustração, textos e um botão.
   ------------------------------------------------------------ */

/* no sucesso o card usa o título da própria tela */
.lead-card.is-sucesso .lead-card__titulo {
  display: none;
}

.form-sucesso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.form-sucesso__ilustracao {
  display: block;
  width: 140px;
  height: auto;
}

.form-sucesso__textos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: center;
  color: #757575;
}

.form-sucesso__titulo {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.form-sucesso__descricao {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
}

@media (max-width: 768px) {
  .lead-card {
    padding: 20px;
    gap: 20px;
  }
  .lead-card__titulo {
    font-size: 26px;
    line-height: 30px;
  }
}