.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-item {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1200 / 600;
  object-fit: fill;
  object-position: center;
}


/* === Pantallas Grandes (PCs y laptops) === */
@media screen and (min-width: 1200px) {
  .carousel-item {
    height: 80vh;
    min-height: 600px;
  }
}

/* === Tablets y Dispositivos Medianos === */
@media screen and (min-width: 800px) and (max-width: 1199px) {
  .carousel-item {
    height: 70vh;
  }
}

/* === Smartphones Grandes === */
@media screen and (min-width: 500px) and (max-width: 799px) {
  .carousel-item {
    height: 60vh;
  }
}

/* === Smartphones Pequeños === */
@media screen and (max-width: 499px) {
  .carousel-item {
    height: 50vh;
  }
}

/* === Mejoras Visuales === */
.carousel::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}


.carousel-container {
  min-height: 400px;
}

.carousel-item.active {
  display: block;
  opacity: 1;
  transition: none;
}