/* NAVBAR SUPERIOR */
/* Es el que debe sobreponerse sobre los otros estilos*/
.navbar {
  position: relative;
  z-index: 5;
}
.form{
  z-index:10;
}
/* NAVBAR INFERIOR (sticky) */
/*Poner el fondo transparente de los slider junto con el menu*/
.navbar-overlay {
  position: sticky !important;
  top: 0;
  left: 0;
  right: 0;
  background-color: traansparent !important;  /* Fondo transparente por defecto */
  color: white !important;/*Texto blanco del Slider*/
  /*box-shadow: none;
  padding: 10px 0;
  backdrop-filter: blur(5px);
  transition: background-color 0.3s, backdrop-filter 0.3s;*/
  z-index: 3;
}

/* Cuando se hace scroll cambia el fondo de la navbar inferior a azul oscuro */
.navbar-overlay.scroll {
  background-color: #032154 !important;  /* Fondo azul cuando hace scroll */
  backdrop-filter: blur(15px);/*poner un filtro azul*/
}

/* Navbar superior */
/* Estilo para los enlaces dentro de la barra de navegación */
.navbar-nav .nav-link {
  color: white !important;
  font-size: 1.1rem;
  padding: 12px 16px;
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0 25px;
}
/* Efecto al pasar el cursor por los enlaces */
.navbar-nav .nav-link:hover {
  color: #F5B50A !important;
}
/* Asegura que los elementos de la lista de navegación tengan altura completa */
.navbar-nav .nav-item {
  height: 100%;
}

/*#carouselCursos .carousel-item {
  position: relative;
  z-index: 1; /* Asegura que esté detrás del contenido superpuesto */
/*}*/

#carouselCursos .carousel-item img {
  height: 600px; /* Ajuste de altura de la imagen */
  object-fit: cover;
  width: 100%;
  position: relative;
  z-index: 0;
}

/* BOTONES DINÁMICOS DE CURSOS */
/* Contenedor de los botones dinámicos dentro del carrusel */
#carouselCursos .botones-cursos {
  position: absolute;
  z-index: 4; /*posicionar encima de las imagenes del carrousel*/
  bottom: 20px; /* Asegura que los botones estén al final */
  left: 0;
  width: 100%;
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
}

/* BOTONES DINÁMICOS (Pestañas de cursos) */
.btn-dinamico {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 40px;
  padding: 0 15px;
  text-align: center;
  border-radius: 8px 8px 0 0; /* Forma de pestaña (recto abajo) */
  text-decoration: none;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3); /* Sombra suave hacia arriba para resaltar sobre el video */
  
  /* Permite que cualquier cambio (movimiento, color, sombra) sea fluido */
  transition: all 0.3s ease-in-out !important; 
}

/* Efecto al pasar el mouse */
.btn-dinamico:hover {
  transform: translateY(-8px); /* Desplaza el botón 8 píxeles hacia arriba */
  filter: brightness(1.15); /* Aumenta el brillo del color original un 15% */
  box-shadow: 0 -8px 15px rgba(0, 0, 0, 0.5); /* Sombra más pronunciada al flotar */
  color: white !important; /* Mantiene el texto blanco */
  cursor: pointer;
}

/* Efecto al hacer clic (simula presión) */
.btn-dinamico:active {
  transform: translateY(0); /* Vuelve a su posición base */
  filter: brightness(0.9); /* Se oscurece ligeramente */
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .btn-dinamico {
    font-size: 0.9rem;
    padding: 8px 16px;
    min-width: 100px; /* Evita que los botones colapsen en móviles */
  }
}

/* Ajustes para la responsividad */
@media (max-width: 768px) {
  /* Navbar superior */
  .navbar-nav .nav-link {
    font-size: 0.9rem; /* Reducir el tamaño de la fuente en pantallas pequeñas */
  }

  .navbar-overlay {
    background-color: #032154 !important;  /* Fondo azul en pantallas pequeñas */
    padding: 10px 0; /* Reducir padding en pantallas pequeñas */
  }

  /* Ajustes en el carrusel */
  #carouselCursos .carousel-item img {
    height: 600px; /* Ajustar la altura de las imágenes en pantallas pequeñas */
  }

  /* Botones dinámicos */
  .botones-cursos {
    bottom: 10px; /* Ajustar la posición de los botones */
    padding: 0 10px;
    width: 100% !important;
  }

  .btn-dinamico {
    font-size: 0.9rem;
    padding: 8px 16px;
    width: 100%;
  }

  /* Asegurarse de que el texto del carrusel no se oculte */
  .carousel-item .position-absolute {
    bottom: 30px; /* Asegurarse de que el texto se mantenga visible */
    transform: translateX(-50%);
  }
}