/* Estilos exclusivos de /contacto/: la retícula de dos columnas (formulario +
   tarjeta de datos) y el formulario mismo. Vivían en un <style> dentro del
   <head> de la página; salieron a archivo externo por la misma razón que la
   analítica: la política de contenido no admite 'unsafe-inline' en
   style-src, así que un <style> en línea la rompe igual que un atributo
   style="" suelto. Radio 0 en toda tarjeta y campo (antes 3, 4 y 6px);
   tipografía de campos pasada de Work Sans a Archivo VF, la familia sans
   del sistema v2. */
.contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.4rem; align-items: start; }
.contact-grid > div { min-width: 0; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.form-card { background: var(--white); border: 1px solid var(--line); padding: 2.4rem; min-width: 0; }
.form-card h3 { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin: 0 0 0.4rem; }
.form-note { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 1.8rem; }
.form-card button[type="submit"] { width: 100%; border: none; cursor: pointer; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.2rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.2rem; }
/* El atributo HTML "hidden" solo pesa como la hoja de estilos del navegador
   (baja prioridad); en cuanto un elemento oculto también trae display:flex
   por su propia clase (como .form-field arriba), ese display gana y el
   elemento se ve aunque tenga "hidden" puesto — exactamente lo que pasaba
   con #f-otro-wrap y #ctx-otro apareciendo junto con la ruta COMPASS. Esta
   regla reafirma "hidden" con la misma clase que se lo está ganando. */
.form-field[hidden] { display: none; }
.form-field label { font-size: 0.83rem; font-weight: 600; color: var(--ink); }
.form-field label .req { color: var(--gold-ink); font-weight: 700; }
.form-field label .opt { color: var(--ink-soft); font-weight: 400; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; max-width: 100%; border: 1px solid var(--line); padding: 0.8rem 1rem;
  font-family: "Archivo VF", sans-serif;
  font-size: 1rem; color: var(--ink); background: var(--paper);
}
.form-field textarea { resize: vertical; min-height: 110px; }

/* ── Paso 1, 2, 3 ───────────────────────────────────────────────────────────
   El formulario dejó de ser un solo bloque con un select de ocho líneas de
   interés: ahora son tres pasos visibles a la vez (no un wizard oculto),
   igual que el que ya está en producción — el visitante elige su ruta en el
   Paso 1 y eso decide qué pide el Paso 3, sin que tenga que repetir en texto
   libre lo que ya dijo con un clic. */
.paso { padding-bottom: 1.8rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--line); }
.paso:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.paso-num { font-family: "JetBrains Mono VF", monospace; font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.3rem; }
.paso-titulo { font-size: 1.08rem; font-weight: 700; color: var(--ink); margin-bottom: 1.1rem; }

.ruta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 560px) { .ruta-grid { grid-template-columns: 1fr; } }
.ruta { display: flex; align-items: flex-start; gap: 0.8rem; text-align: left; width: 100%;
  border: 1px solid var(--line); background: var(--paper); padding: 1rem 1.1rem; cursor: pointer;
  font-family: "Archivo VF", sans-serif; }
.ruta-marca { width: 16px; height: 16px; border: 2px solid var(--line); flex-shrink: 0; margin-top: 0.15rem; }
.ruta.elegida { border-color: var(--gold-ink); background: var(--white); }
.ruta.elegida .ruta-marca { border-color: var(--gold-ink); background: var(--gold-ink); }
.ruta-txt { display: flex; flex-direction: column; gap: 0.3rem; }
.ruta-txt b { font-size: 0.95rem; color: var(--ink); }
.ruta-txt small { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.4; }
.ruta-otro { margin-top: 1rem; }
.ruta-nota { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.2rem; }
.ruta-nota a { color: var(--gold-ink); text-decoration: underline; }

.form-consent { font-size: 0.93rem; color: var(--ink); display: flex; gap: 0.7rem; align-items: center;
  margin-bottom: 1.4rem; padding: 0.9rem 1.1rem; border: 1px solid var(--line); background: #FAFAF8; }
.form-consent input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--navy); cursor: pointer; }
.form-consent label { cursor: pointer; }
.form-consent a { color: var(--navy); text-decoration: underline; }
.cf-turnstile { margin-bottom: 1.2rem; }

/* Aviso de resultado del envío: oculto hasta que el script le agrega
   "visible", y con el color de éxito o de error según corresponda. */
#form-feedback { display: none; margin-bottom: 1rem; padding: 0.9rem 1.1rem; font-size: 0.89rem; }
#form-feedback.visible { display: block; }
#form-feedback.ok { background: #E8F5E9; color: #1B5E20; border: 1px solid #A5D6A7; }
#form-feedback.error { background: #FDECEC; color: #8A1F11; border: 1px solid #F3B4AC; }
.field-error { color: #B3261E; font-size: 0.8rem; margin-top: 0.3rem; }

.info-card { background: var(--navy-deep); color: #fff; padding: 2rem 2.1rem; display: flex; flex-direction: column; gap: 1.4rem; }
/* Sin este color explícito, el h4 hereda el color oscuro por defecto de
   todo encabezado del sistema (ink-900, pensado para fondo claro) en vez
   del blanco que .info-card declara: un encabezado casi invisible sobre
   el mismo tono oscuro de fondo. Encontrado al verificar la migración,
   no estaba señalado por Dirección General; es el mismo tipo de defecto
   de contraste que el manual ya documentó en otras superficies oscuras. */
.info-card h4 { font-size: 1.08rem; font-weight: 700; margin: 0; color: #fff; }
.info-row { display: flex; flex-direction: column; gap: 0.25rem; }
.info-row .lbl { font-size: 0.75rem; color: var(--on-navy-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.info-row .val { font-size: 0.97rem; }
.info-card .btn { margin-top: 0.5rem; }

/* Hero de una sola columna: esta página no lleva fotografía, así que el
   patrón .hero-grid de dos columnas (foto + texto) se limita a una sola
   columna de ancho de lectura cómodo, en vez de estirar el texto al ancho
   completo del hero. */
.hero-grid.una-columna { grid-template-columns: 1fr; max-width: 66ch; }