/* Contenedor principal ajustado */
.carousel-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  margin-top: 70px !important;
}
.custom-controls {
  position: absolute;
  bottom: 20px;
  left: 37%; /* Centrado horizontal */
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 15px;
  width: auto;
  z-index: 10;
}

.custom-controls .control-btn {
  width: 55px !important;
  height: 15px !important;
  border-radius: 22px !important;
  border: none !important;
  background-color: #000000 !important; /* Negro sólido */
  opacity: 1 !important; /* Nada de transparencia */
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

.custom-controls .control-btn:hover {
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

.custom-controls .control-btn.active {
  background-color: #4caf50 !important;
  opacity: 1 !important;
}

/* Contenedor de imágenes con altura fija */
.carousel-inner {
  height: 800px; /* altura fija igual para todas las imágenes */
}

/* Cada slide ocupa toda la altura */
.carousel-item {
  height: 100%;
}

/* Las imágenes se ajustan sin deformarse */
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* recorta para mantener proporción */
  object-position: center;
}

/* Responsividad para controles */
@media (max-width: 992px) {
  .control-btn {
    width: 45px;
    height: 12px;
  }

  .carousel-inner {
    height: 60vh;
  }
}

@media (max-width: 768px) {
  .control-btn {
    width: 35px;
    height: 10px;
  }

  .carousel-inner {
    height: 50vh;
  }
}

@media (max-width: 576px) {
  .control-btn {
    width: 25px;
    height: 8px;
    border-radius: 15px;
  }

  .custom-controls {
    bottom: 20px;
  }

  .carousel-inner {
    height: 40vh;
    min-height: 300px;
  }
}