/* ============================================================
   Apassa — Contact form (contact.css)
   Estilos específicos de la página de contacto.
   ============================================================ */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: .85rem; font-weight: 600;
  color: var(--steel); margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; color: var(--white);
  font-family: 'Inter', sans-serif; font-size: 1rem; transition: .25s; box-sizing: border-box;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(18,85,255,.18);
}
.field textarea { resize: vertical; min-height: 150px; }

.form-status { display: none; margin-top: 16px; padding: 16px 20px; border-radius: 12px; font-size: .95rem; font-weight: 500; }
.form-status.ok { display: block; background: rgba(0,230,118,.12); border: 1px solid rgba(0,230,118,.35); color: #7ef0b3; }
.form-status.err { display: block; background: rgba(255,80,80,.12); border: 1px solid rgba(255,80,80,.35); color: #ff9b9b; }

@media (max-width: 900px) {
  .container[style*="grid-template-columns:1.3fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }