/* ==========================================================================
   Módulo: Partners / Logos
   ========================================================================== */

.module-partners {
    /* Utiliza tu variable global de color oscuro, con un fallback por si acaso */
    background-color: var(--color-text-main); 
    padding: 60px 0;
    overflow: hidden; /* Vital para que el slider no genere scroll horizontal en la página */
}

.partners-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* =====================================================
   IMÁGENES DE LOS LOGOS
   ===================================================== */
.partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-item img {
    max-height: 45px; /* Altura controlada para que todos los logos se vean uniformes */
    width: auto;
    opacity: 0.6; /* Un poco transparentes por defecto */
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: block;
    /* Forzamos a que se vean blancos si es posible (Opcional, asumiendo que ya son blancos) */
}

.partner-item:hover img {
    opacity: 1; /* Brillan al pasar el mouse */
    transform: scale(1.05);
}

/* =====================================================
   MODO 1: ESTÁTICO (Flexbox Grid)
   ===================================================== */
.partners-track.is-static {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; /* Distribución perfecta */
    gap: 40px;
}

/* =====================================================
   MODO 2: SLIDER INFINITO (CSS Marquee)
   ===================================================== */
.partners-track.is-marquee {
    display: flex;
    align-items: center;
    gap: 60px; /* Espaciado entre el grupo 1 y el grupo 2 */
}

.marquee-group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-width: 100%; /* Cada grupo ocupa el 100% del contenedor */
    gap: 60px;
    animation: scroll-partners 25s linear infinite; /* Animación constante */
}

/* Pausar el slider si el usuario pone el cursor encima */
.partners-track.is-marquee:hover .marquee-group {
    animation-play-state: paused;
}

@keyframes scroll-partners {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Se desplaza hacia la izquierda exactamente su propio ancho más el gap */
        transform: translateX(calc(-100% - 60px)); 
    }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
    .partners-track.is-static {
        justify-content: center; /* En móvil, mejor centrarlos si son estáticos */
    }
    .partner-item img {
        max-height: 35px; /* Logos un poco más pequeños en móvil */
    }
    .marquee-group {
        animation-duration: 15s; /* Un poco más rápido en móvil por tener menos ancho */
    }
}

@media (max-width: 768px) {
    .partner-item img {
        max-height: 75px;
        height: 75px;
        width: 100%;
    }

    .partners-track.is-marquee {
        gap: 10px;
    }

    .marquee-group {
        gap: 10px;
    }
}