/* =========================================================================
   pagina-contacto — página de contacto (/contacto/)
   Azahar Data Insights · sistema de diseño ADI

   Hero de tres bandas gruesas a la izquierda y bloque de texto a la
   derecha. Comparte lenguaje visual con la página de gracias (mismos
   acentos, mismos degradados a blanco) pero cambia la disposición: si
   fuesen idénticas, al enviar el formulario se aterrizaría en una página
   que se ve igual que la que se acaba de dejar.

   El formulario NO se estila aquí: lo hace azh-form.css, anclado en
   `.jet-form-builder`, que se encola antes que esta hoja.

   Notas de implementación:
   - Todos los selectores van prefijados con `.contacto-page`. Sin prefijo,
     Bricks convierte los selectores de clase desnuda en clases globales
     no persistidas (bug B9).
   - Longhand en padding y margin, nunca shorthand con var() (bug B1).
   - overflow-x: clip, no hidden, para no romper el header sticky (B11).
   - Border-radius 0 en todo, sin grises: translucideces de Oxford Blue.
   ========================================================================= */

div.contacto-page { overflow-x: clip; }

.contacto-page * { box-sizing: border-box; }

/* === HERO === */

.contacto-page .contacto-hero {
  display: grid;
  grid-template-columns: 44% 1fr;
  align-items: center;
  column-gap: 72px;
  width: 100%;
  padding-top: 96px;
  padding-bottom: 96px;
  background: var(--azahar-white, #ffffff);
}

/* --- Bandas decorativas (columna izquierda) ---
   Salen del borde izquierdo del viewport: sin padding a la izquierda y con
   el degradado muriendo en blanco por la derecha. Tres bandas gruesas, con
   aire entre ellas. */
.contacto-page .contacto-hero__strip {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  width: 100%;
}

.contacto-page .contacto-hero__band {
  width: 100%;
  height: 132px;
}

.contacto-page .contacto-hero__band--rosa {
  background: linear-gradient(90deg, var(--color-rosa-accent, #ff61c4) 0%, var(--azahar-white, #ffffff) 100%);
}

.contacto-page .contacto-hero__band--morado {
  background: linear-gradient(90deg, var(--color-morado-accent, #a25aff) 0%, var(--azahar-white, #ffffff) 100%);
}

.contacto-page .contacto-hero__band--lima {
  background: linear-gradient(90deg, var(--color-lima-accent, #68b800) 0%, var(--azahar-white, #ffffff) 100%);
}

/* --- Bloque de texto (columna derecha) --- */
.contacto-page .contacto-hero__body {
  padding-right: 64px;
  max-width: 640px;
}

.contacto-page .contacto-hero__title {
  margin-top: 0;
  margin-bottom: 24px;
  color: var(--azahar-oxford, #05254c);
  line-height: 1.1;
}

.contacto-page .contacto-hero__lead {
  margin-top: 0;
  margin-bottom: 20px;
  color: var(--azahar-oxford-90, rgba(5, 37, 76, 0.9));
}

.contacto-page .contacto-hero__note {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 17px;
  color: var(--azahar-oxford-70, rgba(5, 37, 76, 0.7));
}

.contacto-page .contacto-hero__plazo {
  font-weight: 600;
  color: var(--azahar-oxford, #05254c);
}

/* === SECCIÓN DEL FORMULARIO === */

.contacto-page .contacto-form {
  width: 100%;
  padding-top: 24px;
  padding-bottom: 112px;
  background: var(--azahar-white, #ffffff);
}

.contacto-page .contacto-form__inner {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* === RESPONSIVE === */

@media (max-width: 991px) {
  .contacto-page .contacto-hero {
    grid-template-columns: 1fr;
    row-gap: 48px;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* Apiladas: las bandas pasan a ser una franja superior más fina, para no
     comerse la pantalla antes de llegar al titular. */
  .contacto-page .contacto-hero__strip { row-gap: 16px; }
  .contacto-page .contacto-hero__band { height: 80px; }

  .contacto-page .contacto-hero__body {
    padding-left: 40px;
    padding-right: 40px;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .contacto-page .contacto-hero {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .contacto-page .contacto-hero__band { height: 56px; }

  .contacto-page .contacto-hero__body {
    padding-left: 24px;
    padding-right: 24px;
  }

  .contacto-page .contacto-form__inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .contacto-page .contacto-form { padding-bottom: 80px; }
}