/* Contacto: hereda fuente, reset y colores globales. La imagen no contiene texto.
   Su ruta parte de css/pages; Flexbox mantiene la composición adaptable. */
.contact-banner { color: var(--color-white); background-color: #043675; background-image: url('../../assets/images/banners/contacto-banner.png'); background-size: cover; background-position: center; }
.contact-banner__container { width: min(90%, var(--container-width)); margin-inline: auto; min-height: clamp(21rem, 34.2vw, 42rem); display: flex; align-items: center; padding-block: clamp(2rem, 4vw, 4.5rem); }
.contact-banner__content { flex: 0 1 48%; min-width: 0; }
.contact-banner h1 { font-size: clamp(2.8rem, 5vw, 4.8rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.contact-banner h1 span { color: #00c5ef; }
.contact-banner h2 { margin-top: .35rem; font-size: clamp(1.15rem, 2vw, 1.85rem); line-height: 1.25; font-weight: 700; }
.contact-banner__description { max-width: 36ch; margin-top: .85rem; font-size: clamp(.85rem, 1.2vw, 1.05rem); line-height: 1.4; }
.contact-banner__benefits { display: flex; flex-wrap: wrap; gap: .8rem 1.1rem; list-style: none; margin-top: 1.3rem; }
.contact-banner__benefits li { display: flex; align-items: center; gap: .55rem; font-size: clamp(.65rem, .8vw, .8rem); line-height: 1.35; }
.contact-banner__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 2.8rem; height: 2.8rem; border: .0625rem solid #70caff66; border-radius: 50%; background: #03559566; box-shadow: 0 0 .7rem #0ab9ff30; }
.contact-banner__icon svg { width: 58%; height: 65%; }
/* En móvil, separar foto y contenido evita cubrir el rostro o comprimir las letras. */
@media (max-width: 45rem) {
  .contact-banner { display: flex; flex-direction: column; background-image: none; }
  .contact-banner::before { content: ''; display: block; width: 100%; aspect-ratio: 2 / 1; background: url('../../assets/images/banners/contacto-banner.png') 75% center / cover no-repeat; }
  .contact-banner__container { min-height: 0; padding-block: 2rem; }
  .contact-banner__content { flex-basis: 100%; }
  .contact-banner h1 { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .contact-banner__benefits { gap: 1rem; }
}