/* ============================================================
   FORJA — BLOCO DE CAPTURA INLINE
   ------------------------------------------------------------
   Estilo do formulário que vive dentro das páginas comerciais.

   Usa só as variáveis já declaradas em forja-theme.css. Nenhuma
   cor solta: se a marca mudar de tom, este arquivo acompanha
   sozinho.

   REGRAS QUE ESTE ARQUIVO PRECISA RESPEITAR
   - Nenhuma altura é imposta por JavaScript, e nada aparece
     depois da pintura. O bloco ocupa o mesmo espaço do primeiro
     ao último quadro: CLS zero.
   - O foco de teclado é sempre visível. Sem isso, o formulário
     é inutilizável para quem não usa mouse — e a regra de
     acessibilidade não é decorativa, é quem consegue comprar.
   - Área de toque de 44px no mobile, onde a maior parte das
     conversões acontece.
   ============================================================ */

.captura {
  background: var(--forja-bg-alt);
}

.captura__caixa {
  max-width: 720px;
}

.captura__titulo {
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
  color: var(--forja-ink);
  margin: 0 0 12px;
}

.captura__apoio {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--forja-ink-soft);
  margin: 0 0 28px;
  max-width: 60ch;
}

.captura__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Duas colunas no desktop, uma no mobile. `minmax(0, 1fr)` e não
   `1fr`: sem o minmax, um valor longo dentro do campo estica a
   coluna e estoura o container. */
.captura__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

@media (max-width: 640px) {
  .captura__linha { grid-template-columns: minmax(0, 1fr); }
}

.captura__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.captura__rotulo {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--forja-ink);
}

.captura__entrada {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  color: var(--forja-ink);
  background: var(--forja-surface);
  border: 1px solid var(--forja-border);
  border-radius: 8px;
  padding: 12px 14px;
  /* 44px de alvo de toque, contando padding e borda. */
  min-height: 44px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.captura__entrada--area {
  resize: vertical;
  min-height: 88px;
  line-height: 1.5;
}

.captura__entrada:focus-visible {
  outline: none;
  border-color: var(--forja-focus);
  box-shadow: 0 0 0 3px rgba(138, 84, 38, 0.22);
}

.captura__entrada[aria-invalid="true"] {
  border-color: var(--forja-error);
}

.captura__dica {
  font-size: var(--fs-small);
  color: var(--forja-ink-soft);
  line-height: 1.45;
}

/* A armadilha de robô sai do fluxo sem usar `display:none`:
   alguns preenchedores automáticos ignoram campo escondido
   assim, e a armadilha deixaria de funcionar justamente contra
   quem ela existe para pegar. */
.captura__armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.captura__consentimento {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--forja-ink-soft);
  cursor: pointer;
}

.captura__consentimento input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--forja-copper-strong);
}

.captura__consentimento a {
  color: var(--forja-copper-deep);
  text-decoration: underline;
}

.captura__enviar {
  align-self: flex-start;
  min-height: 48px;
}

.captura__enviar[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* O espaço da mensagem de estado é reservado desde o início. Se
   ele aparecesse só ao enviar, o botão desceria no momento exato
   do clique — e o clique seguinte cairia no lugar errado. */
.captura__estado {
  margin: 0;
  min-height: 1.5em;
  font-size: var(--fs-small);
  line-height: 1.5;
}

.captura__estado--erro { color: var(--forja-error); }
.captura__estado--sucesso { color: var(--forja-success); font-weight: 600; }

/* Depois do envio bem-sucedido o formulário sai e fica só a
   confirmação: reenviar não ajuda ninguém e gera duplicata. */
.captura__form--enviado .captura__linha,
.captura__form--enviado .captura__campo,
.captura__form--enviado .captura__consentimento,
.captura__form--enviado .captura__enviar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .captura__entrada { transition: none; }
}