/* ============================================= */
/* --- ESTILOS SECCIÓN ALIADOS (RTL) --- */
/* ============================================= */

.aliados-section {
    position: relative;
    width: 100%;
    padding: 60px 0;
    background-color: #050505;
    background-image: url('../media/images/backgrounds/background_aliados.png');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* El contenedor principal con máscara de fundido avanzada */
.aliados-marquee {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
    
    /* MÁSCARA: Los logos entran por la derecha (Fade In) y salen por la izquierda (Fade Out) */
    -webkit-mask-image: linear-gradient(to right, 
        transparent 0%, 
        black 15%, 
        black 85%, 
        transparent 100%
    );
    mask-image: linear-gradient(to right, 
        transparent 0%, 
        black 15%, 
        black 85%, 
        transparent 100%
    );
}

/* La pista infinita */
.aliados-track {
    display: flex;
    align-items: center;
    width: max-content;
    
    /* Animación hacia la IZQUIERDA */
    animation: scrollRightToLeft 15s linear infinite;
}

/* Pausa al pasar el ratón para facilitar la lectura */
.aliados-track:hover {
    animation-play-state: paused;
}

/* Grupos de logos con espaciado controlado */
.aliados-group {
    display: flex;
    align-items: center;
    gap: 50px; /* Espacio entre logos del mismo grupo */
    padding-right: 150px; /* Gran espacio de separación entre categorías */
}

/* Estética de los logos */
.aliado-img-grupo-titulo {
    height: 80px;
    width: auto;
    object-fit: contain;
    filter: grayscale(0%) brightness(2);
    /*transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);*/
}

.aliado-img {
    height: 45px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(1.6); /* Look limpio y corporativo */
    opacity: 0.75;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.aliado-img:hover {
    filter: grayscale(0%) brightness(1); /* Recupera color al interactuar */
    opacity: 1;
    transform: scale(1.05); /* Efecto sutil de relieve */
}

/* ANIMACIÓN: DE DERECHA A IZQUIERDA */
@keyframes scrollRightToLeft {
    /* Empezamos en la posición base */
    from {
        transform: translateX(0%);
    }
    /* Nos movemos hacia la izquierda hasta que la segunda copia ocupa el lugar de la primera */
    to {
        transform: translateX(-50%);
    }
}

/* ============================================= */
/* --- AJUSTES RESPONSIVOS --- */
/* ============================================= */
@media (max-width: 768px) {
    .aliados-section { 
        padding: 40px 0; 
    }
    
    .aliados-group {
        gap: 30px;
        padding-right: 60px;
    }
    
    .aliado-img {
        height: 32px;
    }
    
    /* En móvil ajustamos los puntos de la máscara para evitar cortes bruscos */
    .aliados-marquee {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    }
}