/* --- SECCIÓN PARTNERS (CONFIARON EN NOSOTROS) --- */
.partners-section {
    padding: 80px 0;
    background-color: #ffffff;
    text-align: center;
    overflow: hidden; /* Ocultar el scroll horizontal extra */
}

.partners-section h2 {
    font-size: 2.5rem;
    color: #0f2027; /* Azul/Negro corporativo */
    margin-bottom: 50px;
    font-weight: 800;
}

/* Contenedor principal que enmascara el slider */
.logos-slider {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    /* Sombras a los lados para dar efecto difuminado u oculto en los bordes */
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* La pista que se mueve, ancho suficiente para abarcar las dos copias de imágenes */
.logos-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: scrollLogos 120s linear infinite; /* Aumentar los segundos para hacerlo más lento */
}

/* Si pasas el ratón, el carrusel se pausa (opcional pero muy pro) */
.logos-slider:hover .logos-track {
    animation-play-state: paused;
}

/* Cada logo individual */
.logos-track img {
    height: 250px; /* Logos bastante más grandes */
    width: auto;
    max-width: 500px;
    object-fit: contain;
    margin: 0 40px; /* Separación reducida para que se vean más juntos */
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* Al poner el ratón encima */
.logos-track img:hover {
    transform: scale(1.15); /* Efecto zoom un poco mayor para destacar */
}

/* Animación de scroll continuo */
@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Se desplaza a la mitad exacta de su ancho (ya que está duplicado en HTML) */
        transform: translateX(-50%);
    }
}

/* --- OPTIMIZACIÓN RESPONSIVE --- */
@media screen and (max-width: 768px) {
    .partners-section {
        padding: 40px 0;
    }
    .partners-section h2 {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }
    .logos-track img {
        height: 120px; /* Logos bastante más pequeños para que entren varios */
        margin: 0 20px; /* Reducimos la separación entre ellos */
    }
}