/* Formulario de contacto: layout de una columna + estados. */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 480px;
}

.formulario__campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.formulario__campo label {
  font-weight: var(--font-weight-heading);
  color: var(--color-navy);
}

.formulario__campo input,
.formulario__campo textarea {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  font: inherit;
  color: var(--color-text);
}

.formulario__campo input:focus,
.formulario__campo textarea:focus {
  border-color: var(--color-navy);
}

.formulario__campo textarea {
  min-height: 8rem;
  resize: vertical;
}

.formulario__honeypot {
  display: none;
}

.formulario__aviso {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.formulario__estado {
  padding: var(--space-3);
  border-radius: var(--radius-card);
  font-weight: var(--font-weight-heading);
}

.formulario__estado:empty {
  display: none;
}

.formulario__estado--exito {
  background-color: var(--color-bg);
  color: var(--color-success);
}

.formulario__estado--error {
  background-color: var(--color-bg);
  color: var(--color-error);
}