/* ============================================
   SLIDESHOW - Animación Fade
   ============================================ */

/* Contenedor del slideshow */
#slideshow-container {
    position: relative;
}

/* Todos los slides ocupan el mismo espacio */
.slide {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* El slide activo es visible */
.slide.active {
    opacity: 1;
    position: relative;
}

/* Asegurar que el contenedor tenga altura */
#slideshow-container {
    min-height: 415px; /* Altura de las imágenes */
}
/* Invertir posición de imagen y texto en slides alternos */
.slide-reverse {
    flex-direction: row-reverse !important;
}
/* ============================================
   SLIDESHOW - Responsive para móviles
   ============================================ */

@media (max-width: 768px) {
    /* Cambiar a layout vertical */
    .slide,
    .slide-reverse {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* Centrar imagen */
    .slide img {
        margin-right: 0 !important;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Ajustar ancho del contenedor */
    #slideshow-container {
        max-width: 95% !important;
    }
    
    /* Centrar texto en móvil */
    .slide div {
        text-align: center !important;
    }
}