/* 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: -0.035em;
}
.contact-banner h1 span {
  color: #00c5ef;
}
.contact-banner h2 {
  margin-top: 0.35rem;
  font-size: clamp(1.15rem, 2vw, 1.85rem);
  line-height: 1.25;
  font-weight: 700;
}
.contact-banner__description {
  max-width: 36ch;
  margin-top: 0.85rem;
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  line-height: 1.4;
}
.contact-banner__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.1rem;
  list-style: none;
  margin-top: 1.3rem;
}
.contact-banner__benefits li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: clamp(0.65rem, 0.8vw, 0.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: 0.0625rem solid #70caff66;
  border-radius: 50%;
  background: #03559566;
  box-shadow: 0 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;
  }
}