/* Formulario de contacto. No venía en el diseño original: se integra al
   mismo lenguaje —crema, hairlines, Inter, acento terracota— para que no
   parezca un injerto de otra página. */

.form {
  max-width: 640px; margin: clamp(2.5rem, 6vh, 3.5rem) auto 0;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo-label {
  font-size: var(--t-kicker); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--texto);
}
.campo-label em { font-style: normal; text-transform: none; letter-spacing: 0; }

.campo input, .campo textarea {
  font-family: var(--ui); font-size: var(--t-cuerpo); color: var(--tinta);
  background: transparent; border: 0; border-bottom: 1px solid var(--hairline);
  padding: .6rem 0; border-radius: 0; transition: border-color .3s ease;
}
/* :focus-visible en vez de :focus: los inputs de texto igual lo activan con
   clic de mouse (es parte de la heurística del selector para campos
   editables), así que no se pierde nada ahí. El anillo nativo queda, con
   outline-offset para que no se pegue al campo -- así quien navega con Tab
   tiene dos señales (el anillo Y el borde), no dos grises casi iguales. */
.campo input:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 4px;
  border-bottom-color: var(--acento);
}
.campo textarea { resize: vertical; line-height: 1.6; }
.campo.error input, .campo.error textarea { border-bottom-color: var(--acento); }
.campo-error { font-size: var(--t-pie); color: var(--acento); }

.form-boton {
  align-self: flex-start; font-family: var(--ui); font-size: var(--t-nav);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--crema); background: var(--acento);
  border: 1px solid var(--acento); border-radius: 0;
  padding: .9rem 2rem; cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.form-boton:hover { background: transparent; color: var(--acento); }
.form-boton:focus-visible { background: transparent; color: var(--acento); }
.form-boton[disabled] { opacity: .5; cursor: default; }

.form-aviso  { font-size: var(--t-pie); color: var(--texto); }
.form-estado { font-size: var(--t-cuerpo); }
.form-estado.ok    { color: var(--exito); }
.form-estado.falla { color: var(--acento); }

/* La trampa: invisible para personas, visible para robots que leen el HTML.
   No se usa display:none — algunos robots lo detectan y saltan el campo. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 767px) {
  .form-fila { grid-template-columns: 1fr; }
  .form-boton { align-self: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .campo input, .campo textarea, .form-boton { transition: none; }
}