/* ============================================================
   CONTACTO — secciones exclusivas de esta página
   Lo compartido está en global.css.
   ============================================================ */

/* --- CONTACTO FORM (contact-form) --- */
#contact_form_section {
  padding-block: var(--section-padding-y);
}
#contact_form_section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
}
#contact_form_section .contact-form__form-wrapper {
  background-color: var(--surface-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
#contact_form_section .contact-form__form-title {
  font-size: var(--h3-size);
  margin-bottom: var(--spacing-sm);
  font-family: var(--secondary-font);
}
#contact_form_section .contact-form__form-intro {
  color: var(--body-color);
  margin-bottom: var(--spacing-lg);
  line-height: var(--line-height-relaxed);
}
#contact_form_section .contact-form__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
#contact_form_section .contact-form__info-title {
  font-size: var(--h3-size);
  font-family: var(--secondary-font);
  margin-bottom: var(--spacing-sm);
}
#contact_form_section .contact-form__info-text {
  color: var(--body-color);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-md);
}
#contact_form_section .contact-form__info-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
@media (max-width: 900px) {
  #contact_form_section .container {
    grid-template-columns: 1fr;
  }
}

/* --- PIEZAS DEL FORMULARIO QUE EXIGE EL CONTRATO --- */

/* Los mensajes de error existen siempre en el marcado y se enseñan con
   `hidden`, para que el JS solo cambie su contenido y no cree nodos. */
#contact_form_section .form-error {
  color: var(--error-color);
  font-size: var(--small-font-size);
  margin-block-start: 0.375rem;
}

/* Aviso de protección de datos (RGPD art. 13). Va antes de la casilla de
   consentimiento y es un bloque informativo, no un campo. */
#contact_form_section .form-privacy {
  background-color: var(--surface-alt-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--small-font-size);
  padding: var(--spacing-md);
}
#contact_form_section .form-privacy__title {
  color: var(--title-color);
  font-family: var(--primary-font);
  font-size: var(--small-font-size);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}
#contact_form_section .form-privacy__intro,
#contact_form_section .form-privacy__more {
  color: var(--muted-color);
  line-height: var(--line-height-relaxed);
  margin: 0;
}
#contact_form_section .form-privacy__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}
#contact_form_section .form-privacy__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
#contact_form_section .form-privacy__term {
  color: var(--body-color);
  font-weight: var(--font-semibold);
}
#contact_form_section .form-privacy__value {
  color: var(--muted-color);
  margin: 0;
}
#contact_form_section .form-privacy__link {
  color: var(--secondary-color);
}

/* Casilla de consentimiento. Nunca marcada de fábrica y obligatoria. */
#contact_form_section .form-consent {
  align-items: flex-start;
  color: var(--muted-color);
  cursor: pointer;
  display: flex;
  font-size: var(--small-font-size);
  gap: 0.5rem;
  line-height: var(--line-height-relaxed);
}
#contact_form_section .form-consent__checkbox {
  accent-color: var(--primary-color);
  flex: 0 0 auto;
  height: 1.125rem;
  margin-block-start: 0.125rem;
  width: 1.125rem;
}

/* La trampa anti-spam: fuera de la pantalla y fuera del recorrido de foco.
   No se oculta con `display: none` porque algunos robots lo detectan. */
#contact_form_section .form-honeypot {
  height: 1px;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

/* El bloque de respuesta del envío, que el plugin rellena. */
#contact_form_section .form-message {
  border-radius: var(--radius-md);
  font-size: var(--small-font-size);
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md);
}