/*================================================================*/
/*=========================INDEX=========================*/
/*================================================================*/

/* Estilos personalizados para transiciones del slider Index*/
.slide {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.slide.active {
    opacity: 1;
    z-index: 10;
}

/* Overlay para asegurar legibilidad sobre las fotos */
.hero-overlay {
    background: linear-gradient(135deg, rgba(26, 64, 59, 0.9) 0%, rgba(16, 85, 119, 0.6) 100%);
}

/* Efecto de puntos decorativos (inspirado en la imagen) */
.dots-pattern {
    background-image: radial-gradient(#D91AB9 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
}


/* Animación para el Scroll Infinito del Módulo de Slider logos*/
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* Mueve la mitad porque duplicamos los logos */
}


/* Animación para el carrusel de texto 
Muestra un elemento, espera y luego lo desvanece para dar paso al siguiente.
  */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateX(20px);
        z-index: 0;
    }

    5%,
    33% {
        opacity: 1;
        transform: translateX(0);
        z-index: 10;
    }

    /* Visible */
    38%,
    100% {
        opacity: 0;
        transform: translateX(-20px);
        z-index: 0;
    }

    /* Oculto */
}