/* ==========================================================================
   BLACK VERSIONS — pages/contacto.css
   Solo lo especifico de /contacto/. El hero centrado, el formulario, los
   bloques de contacto y las tarjetas son componentes compartidos.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */

.contact-hero .starburst {
  top: 12%;
  right: var(--burst-right);
}

/* Sin botones en el hero: el subtitulo cierra el bloque */
.contact-hero .hero-sub {
  max-width: 560px;
  margin-bottom: 0;
}

/* ==========================================================================
   2. FORMULARIO + CONTACTO DIRECTO
   El formulario pesa mas que la columna de datos: 60 / 40 aproximado.
   ========================================================================== */

.contact-layout {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 901px) {
  .contact-layout {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--gap-xl);
  }
}

.contact-form-col h2 {
  max-width: 16ch;
  margin-bottom: var(--gap-md);
}

.contact-form {
  max-width: 720px;
}

/* La columna de datos se separa del formulario con un filete en escritorio */
@media (min-width: 901px) {
  .contact-info-col {
    padding-left: var(--gap-lg);
    border-left: 1px solid var(--b-08);
  }
}

.contact-info-col .eyebrow {
  margin-bottom: 28px;
}

/* ==========================================================================
   3. PREGUNTAS RAPIDAS
   ========================================================================== */

.quick-qa .qa-card h3 {
  margin-bottom: 12px;
}

.quick-qa .qa-card p {
  font-size: var(--fs-small);
  color: var(--text-dim);
}