/* COLABORADORES */
.partners {
    /* Un degradado rojo corporativo para darle profundidad, no solo un color plano */
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); 
    padding: 1.5rem 0;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(200, 0, 0, 0.2); /* Sombra rojiza sutil */
}

.partners .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.partners .section-header {
    margin-bottom: 0;
    text-align: left;
    flex: 0 0 250px;
}

/* Textos en blanco puro para contrastar con el fondo rojo */
.partners .section-label {
    font-size: 0.75rem;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.7); /* Blanco un poco transparente */
}

.partners .section-title {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 0;
    color: #ffffff; /* Título fuertemente blanco */
}

.partners-carousel {
    flex: 1;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.partners-track {
    display: flex;
    align-items: center;
    gap: 4rem; 
    animation: scrollLogos 35s linear infinite;
    width: max-content;
}

.partners-track:hover {
    animation-play-state: paused;
}

/* === LA MAGIA: LOGOS BLANCOS === */
.partners-track img {
    height: 40px; 
    width: auto;
    object-fit: contain;
    /* Este filtro convierte cualquier logo a color en BLANCO PURO */
    filter: brightness(0) invert(1);
    opacity: 0.6; /* Un poco transparentes para que no brillen demasiado */
    transition: all 0.4s ease;
    cursor: pointer;
}

.partners-track img:hover {
    opacity: 1; /* Se iluminan al 100% al pasar el mouse */
    transform: scale(1.1);
}

@media (max-width: 900px) {
    .partners .container {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    .partners .section-header {
        flex: none;
        text-align: center;
        width: 100%;
    }
    .partners-track img {
        height: 35px;
    }
}

/* =========================================
   ANIMACIÓN DEL CARRUSEL (Añadir antes del responsive)
========================================= */
@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Se desplaza hacia la izquierda. 
           Nota: Para que el scroll sea infinito y perfecto sin saltos, 
           recuerda duplicar tus logos en el HTML dentro del .partners-track */
        transform: translateX(-50%);
    }
}

/* =========================================
   RESPONSIVE PROFESIONAL (COLABORADORES)
========================================= */

/* Pantallas medianas y Tablets (hasta 900px) */
@media (max-width: 900px) {
    .partners {
        padding: 2rem 0; /* Damos un poco más de aire al apilar los elementos */
    }

    .partners .container {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .partners .section-header {
        flex: none;
        text-align: center;
        width: 100%;
    }

    .partners-track {
        gap: 3rem; /* Reducimos la separación entre logos para pantallas medianas */
    }

    .partners-track img {
        height: 35px;
    }
}

/* Teléfonos pequeños (hasta 480px) */
@media (max-width: 480px) {
    .partners {
        padding: 1.5rem 0;
    }

    .partners .section-title {
        font-size: 1.1rem; /* Título un poco más compacto */
    }

    .partners-track {
        gap: 2rem; /* Menos espacio para que se vean varios logos a la vez en la pantalla estrecha */
        /* Ajustamos ligeramente la velocidad para pantallas chicas si es necesario */
        animation: scrollLogos 25s linear infinite; 
    }

    .partners-track img {
        height: 28px; /* Logos más proporcionales a un celular */
    }

    .partners-carousel {
        -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    }
}