.banner {
  position: relative;
  width: 100%;
  height: 45vh; /* Establece la altura del banner al 100% del viewport height */
  overflow: hidden; /* Oculta cualquier desbordamiento de la imagen */
}

.banner img {
  width: 100%; /* La imagen ocupa todo el ancho del banner */
  height: 100%; /* La imagen ocupa todo el alto del banner */
  object-fit: cover; /* Escala y recorta la imagen para cubrir todo el banner */
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-family: var(--fuente-base);
  font-weight: var(--peso-fuerte);
  padding: 20px;
  border-radius: 10px;
}

.banner-text h1,
.banner-text h2 {
  /* Era 36pt/42.5pt: pt es una unidad de imprenta y no encaja con el resto
     de la escala. 42.5/36 = 1.18, o sea el interlineado de titulo. */
  font-size: var(--titulo-1);
  line-height: var(--interlineado-titulo);
  margin-bottom: 20px; /* Ajusta este valor segun tu preferencia */
}

.banner-text p {
  margin-top: 20px; /* Ajusta este valor segun tu preferencia */
}

@media screen and (max-width: 1254px) {
  .content-center,
  .banner-text,
  .title-icons {
    width: 100%;
    padding: 20px;
  }

  /* Ya no hace falta bajar el tamaño a mano: --titulo-1 es un clamp() que se
     ajusta solo al ancho de la ventana. */

  @media screen and (max-width: 530px) {
    .title-icons {
      font-size: var(--titulo-3);
    }

    .select-title {
      font-size: var(--titulo-2);
    }

    .select-text {
      font-size: var(--texto-lg);
    }
  }
}