.responsive-bg {
  background-size: contain; /* Asegura que la imagen se ajuste dentro del contenedor sin cortarse */
  background-position: center center; /* Centra la imagen en X y en Y */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  width: 100%; /* El ancho se adapta al contenedor */
  max-width: 90%; /* Ancho máximo de 1080px */
  height: auto; /* Ajusta automáticamente la altura según el ancho de la imagen */
  aspect-ratio: 16 / 9; /* Mantiene una proporción fija de 16:9 */
  margin: 0 auto; /* Centra el contenedor horizontalmente */
}

@media (max-width: 768px) {
  .responsive-bg {
    max-width: 100%; /* En móviles, ocupa todo el ancho disponible */
    aspect-ratio: auto; /* Ajusta la proporción automáticamente si es necesario */
  }
}



.bg-video {
  position: absolute; /* Asegura que se coloque detrás del contenido */
  top: 50%; /* Centra el video verticalmente */
  left: 50%; /* Centra el video horizontalmente */
  width: 100%; /* El ancho siempre ocupará el contenedor */
  height: 100%; /* La altura siempre ocupará el contenedor */
  object-fit: cover; /* Asegura que el video cubra todo el área del contenedor */
  transform: translate(-50%, -50%); /* Centra el video */
  z-index: -1; /* Coloca el video detrás del contenido */
}

body .hero.fs {
  height: 95vh; /* Altura dinámica basada en la altura de la ventana */
  min-height: 600px; /* Asegura un mínimo en pantallas pequeñas */
  padding: 0; /* Elimina cualquier espacio adicional */
}

@media screen and (max-width: 1024px) {
  body .hero.fs {
    height: 75vh; /* Ajusta la altura para tabletas */
    min-height: 500px; /* Reduce la altura mínima */
    padding-top: 50px; /* Agrega un espacio superior */
  }
}

@media screen and (max-width: 768px) {
  body .hero.fs {
    height: 50vh; /* Permite que la altura dependa del contenido */
    min-height: 450px; /* Altura mínima específica para móviles */
    padding-top: 60px; /* Ajusta el espacio superior */
    padding-bottom: 30px; /* Agrega un espacio inferior */
  }
}

@media screen and (max-width: 480px) {
  body .hero.fs {
    height: 50vh; /* La altura se ajusta automáticamente */
    min-height: 400px; /* Altura mínima más pequeña */
    padding-top: 40px; /* Reduce el espacio superior */
    padding-bottom: 20px; /* Reduce el espacio inferior */
  }
}


.hero .row {
  display: flex;
  flex-direction: column; /* Por defecto, disposición vertical */
}

@media (min-width: 768px) {
  .hero .row {
    flex-direction: row; /* En pantallas más grandes, disposición horizontal */
  }
}

.hero img {
  /*max-width: 100%;*/
  height: auto;
}