#hero {
  position: relative;
  background-image: url("../img/hero/fondo.webp");
  background-size: cover;
  background-position: center;
}

#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.875); /* Oscurece el fondo */
  z-index: 1; /* Detrás del texto */
}

#hero > .container {
  position: relative;
  z-index: 2; /* Encima del overlay */
}
.btn-blue {
  background-color: #a2e0df;
  color: rgb(28, 27, 27);
  border: 1px solid white;
}
.btn-blue:hover {
  background-color: #5bc0be;
  color: white;
}
#hero .btn-outline-light:hover {
  background-color: #126a6a !important;
  color: white;
  border-color: #5bc0be;
}
.hero-carousel {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.66);
}

/* Estilo para mantener proporciones del carrusel */

#hero .row {
  padding: 5rem 0;
}
.subtitle {
  color: #a2e0df;
}
.hero-carousel {
  height: 40.75rem;
}
@media (max-width: 1600px) {
  .hero-carousel {
    height: 30rem;
  }
}
@media (max-width: 1200px) {
  .hero-carousel {
    height: 25rem;
  }
}
@media (max-width: 991.98px) {
  .hero-carousel {
    height: 22rem;
  }
}
@media (max-width: 576px) {
  #hero {
    padding-top: 2rem;
  }
  #hero .row {
    padding: 2rem 0;
  }
  .hero-carousel {
    height: 18rem;
  }

  #hero h1 {
    font-size: 2rem;
  }

  #hero p.lead {
    font-size: 1rem;
  }

  .botones {
    justify-content: center;
  }
}