/* Efectos de transición para el carousel */
/* Let Bootstrap 5 handle the slide animation natively.
   We only add cosmetic enhancements here. */

/* Ensure images inside transitioning items are always visible */
.carousel-item {
    backface-visibility: hidden;
}

/* During slide transition both the outgoing and incoming item are
   rendered by Bootstrap (position:absolute + transform). We make sure
   images inside them are always fully opaque and visible, so the user
   sees the picture while it slides in/out instead of a blank area. */
.carousel-item img {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fade effect as alternative – only enable by adding .carousel-fade to the section */
.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
}