/* Slide clásico más notorio */
.slide-on-scroll {
	opacity: 0;
	transform: translateY(120px) scale(0.92);
	transition: opacity 1.1s cubic-bezier(.4,0,.2,1), transform 1.1s cubic-bezier(.4,0,.2,1);
}
.slide-on-scroll.slide-in {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Slide desde la izquierda para los planes */
.slide-from-left {
	opacity: 0;
	transform: translateX(-180px) scale(0.92);
	transition: opacity 1.2s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.4,0,.2,1);
}
.slide-from-left.slide-in {
	opacity: 1;
	transform: translateX(0) scale(1);
}

/* Fade suave del banner hacia el fondo blanco */
#mainCarousel { 
  overflow: hidden;            /* por si la imagen sobresale */
}

#mainCarousel .carousel-item {
  position: relative;          /* permite los pseudo-elementos */
}

/* Degradado inferior (gris/imagen → blanco de la página) */
#mainCarousel .carousel-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;               /* ajustá la longitud del fade */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%);
  pointer-events: none;        /* no bloquea clics del carrusel */
}

/* (Opcional) Degradado superior para mejorar legibilidad del texto del banner */
#mainCarousel .carousel-item::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 40%;                 /* cuánto oscurecer arriba */
  background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}

/* Asegura que la imagen se comporte bien */
#mainCarousel .carousel-item img {
  display: block;
  width: 100%;
  height: auto;                /* o fija una altura y usa object-fit: cover */
}