/* Tecnifum — Formulario de contacto.
   Menú móvil, botón flotante y pie viven en navegacion.css. */

.formulario {
  display: grid;
  gap: var(--espacio-4);
}

.campo {
  display: grid;
  gap: var(--espacio-2);
}

.campo label {
  color: var(--texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}

.campo__opcional {
  color: var(--texto-tenue);
  font-weight: var(--peso-normal);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: var(--espacio-3) var(--espacio-4);
  background-color: var(--fondo);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-md);
  font-size: var(--texto-sm);
  transition: border-color var(--transicion-rapida);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--marca);
}

.campo textarea {
  resize: vertical;
}

/* Estado de error: el color va siempre acompañado del texto del mensaje */
.campo--error input,
.campo--error select,
.campo--error textarea {
  border-color: var(--critico);
}

.campo__error {
  color: var(--critico);
  font-size: var(--texto-xs);
}

/* Trampa antispam: fuera de la vista y del recorrido por teclado, pero no
   display:none, porque los robots ignoran los campos ocultos de ese modo. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__enviar {
  justify-self: start;
}

.formulario__aviso:empty {
  display: none;
}

.formulario__aviso {
  margin: 0;
  padding: var(--espacio-3) var(--espacio-4);
  border-radius: var(--radio-md);
  font-size: var(--texto-sm);
}

.formulario__aviso[data-estado="exito"] {
  background-color: var(--conforme-suave);
  color: var(--conforme);
}

.formulario__aviso[data-estado="error"] {
  background-color: var(--critico-suave);
  color: var(--critico);
}

.formulario__legal {
  margin: 0;
  color: var(--texto-tenue);
  font-size: var(--texto-xs);
}