/*
 * Estilos propios de /contacto/ (2026-09-29). El formulario reutiliza las clases de
 * contratar.css (campo, error, casilla, trampa, confirmacion, aviso): contacto.njk carga las dos
 * hojas. Aqui solo va lo que alli no hay, el area de texto del mensaje, con la misma caja, la misma
 * tipografia y el mismo foco que el <input> de contratar.css. Ningun color escrito a mano: todo
 * sale de tokens.css.
 */

.contratar-campo textarea {
  font: inherit;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 11px 14px;
  width: 100%;
  min-height: 150px;
  resize: vertical;
}

.contratar-campo textarea:focus-visible {
  outline: 2px solid var(--rojo-texto);
  outline-offset: 1px;
}

.contratar-campo textarea[aria-invalid="true"] {
  border-color: var(--rojo-texto);
}

/* Lo opcional se dice en la etiqueta, en el mismo tono que las casillas. */
.contacto-opcional {
  font-weight: 400;
  color: var(--tinta-2);
}