/* ==========================================================================
   Formulário de contato
   ========================================================================== */

.formulario-contato {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-5);
}

.formulario-contato[hidden] {
  display: none;
}

.formulario-contato__rotulo {
  font-size: var(--texto-rotulo);
  letter-spacing: var(--tracking-sobrelinha);
  text-transform: uppercase;
  color: var(--nc-mostarda);
}

/* Campo ------------------------------------------------------------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.campo__rotulo {
  font-size: var(--texto-fino);
  color: var(--texto-corpo);
}

.campo__entrada {
  padding: 11px var(--espaco-3);
  background: var(--superficie-campo);
  border: var(--traco-fino) solid var(--borda-suave);
  border-radius: var(--raio-md);
  color: var(--texto-titulo);
  transition: var(--transicao-cor);
}

.campo__entrada:hover {
  border-color: var(--borda-forte);
}

.campo__entrada:focus {
  border-color: var(--nc-mostarda);
}

.campo__entrada--area {
  resize: vertical;
  line-height: var(--entrelinha-compacta);
}

/* Marca campos com erro de validação nativa após tentativa de envio */
.formulario-contato--validado .campo__entrada:invalid {
  border-color: var(--nc-terracota);
}

/* Consentimento ----------------------------------------------------- */
.campo-consentimento {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  font-size: var(--texto-fino);
  line-height: var(--entrelinha-compacta);
  color: var(--texto-corpo);
}

.campo-consentimento input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--nc-mostarda);
  flex: none;
}

/* Armadilha anti-spam: fora da tela, nunca focável ----------------- */
.campo-armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Verificação e mensagens ----------------------------------------- */
.formulario-contato__verificacao:not(:empty) {
  min-height: 78px;
}

.formulario-contato__aviso {
  padding: var(--espaco-4);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-lg);
  font-size: var(--texto-miudo);
  line-height: var(--entrelinha-compacta);
  color: var(--texto-discreto);
}

.formulario-contato__aviso[hidden],
.formulario-contato__erro[hidden] {
  display: none;
}

.formulario-contato__erro {
  font-size: var(--texto-fino);
  line-height: var(--entrelinha-compacta);
  color: var(--nc-terracota);
}

.formulario-contato__nota {
  font-size: var(--texto-miudo);
  line-height: var(--entrelinha-compacta);
  color: var(--texto-discreto);
}