/* CSS adicional para forzar la aparición de los dots de todos los carousels */

/* Estilos específicos para el carousel principal */
#carousel.owl-carousel .owl-dots {
  display: flex !important;
  position: absolute !important;
  bottom: 70px !important;
  right: 50px !important;
  z-index: 1000 !important;
  gap: 6px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#carousel.owl-carousel .owl-dot {
  display: inline-block !important;
  margin: 0 2px !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#carousel.owl-carousel .owl-dot span {
  width: 45px !important;
  height: 10px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 5px !important;
  display: block !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

#carousel.owl-carousel .owl-dot:hover span {
  background-color: rgba(46, 202, 106, 0.8) !important;
  border-color: #2eca6a !important;
  transform: scaleX(1.1) !important;
}

#carousel.owl-carousel .owl-dot.active span {
  background-color: #2eca6a !important;
  border-color: #ffffff !important;
  transform: scaleX(1.2) !important;
  box-shadow: 0 3px 12px rgba(46, 202, 106, 0.6) !important;
}

/* Estilos para carousel de libros, cursos y noticias */
#property-carousel.owl-carousel .owl-dots,
#courses-carousel.owl-carousel .owl-dots,
#news-carousel.owl-carousel .owl-dots {
  display: flex !important;
  justify-content: center !important;
  margin-top: 30px !important;
  gap: 6px !important;
  position: relative !important;
}

#property-carousel.owl-carousel .owl-dot,
#courses-carousel.owl-carousel .owl-dot,
#news-carousel.owl-carousel .owl-dot {
  display: inline-block !important;
  margin: 0 2px !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#property-carousel.owl-carousel .owl-dot span,
#courses-carousel.owl-carousel .owl-dot span,
#news-carousel.owl-carousel .owl-dot span {
  width: 45px !important;
  height: 10px !important;
  background: rgba(46, 202, 106, 0.3) !important;
  border: 1px solid rgba(46, 202, 106, 0.5) !important;
  border-radius: 5px !important;
  display: block !important;
  transition: all 0.3s ease !important;
}

#property-carousel.owl-carousel .owl-dot:hover span,
#courses-carousel.owl-carousel .owl-dot:hover span,
#news-carousel.owl-carousel .owl-dot:hover span {
  background-color: rgba(46, 202, 106, 0.7) !important;
  border-color: #2eca6a !important;
  transform: scaleX(1.1) !important;
}

#property-carousel.owl-carousel .owl-dot.active span,
#courses-carousel.owl-carousel .owl-dot.active span,
#news-carousel.owl-carousel .owl-dot.active span {
  background-color: #2eca6a !important;
  border-color: #2eca6a !important;
  transform: scaleX(1.2) !important;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  /* Carousel principal */
  #carousel.owl-carousel .owl-dots {
    bottom: 30px !important;
    right: 50% !important;
    transform: translateX(50%) !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  #carousel.owl-carousel .owl-dot span {
    width: 35px !important;
    height: 8px !important;
    border-radius: 4px !important;
  }

  /* Otros carousels */
  #property-carousel.owl-carousel .owl-dots,
  #courses-carousel.owl-carousel .owl-dots,
  #news-carousel.owl-carousel .owl-dots {
    margin-top: 20px !important;
    gap: 4px !important;
  }

  #property-carousel.owl-carousel .owl-dot span,
  #courses-carousel.owl-carousel .owl-dot span,
  #news-carousel.owl-carousel .owl-dot span {
    width: 35px !important;
    height: 8px !important;
    border-radius: 4px !important;
  }
}