.logo-carousel{
    width:100%;
    overflow:hidden;
    position:relative;
}

.logo-track{
    display:flex;
    width:max-content;
    animation:scroll 20s linear infinite;
    will-change: transform;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 80px;
    padding-right: 80px; 
}

.logo-item{
    width:200px;
    height:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.logo-caritas{
    max-width:190px;
    transform:scale(1.9);
}

.logo-caritas img{
    max-width:140px;
}

.logo-item img{
    max-width:160px;
    max-height:60px;
    object-fit:contain;

    filter:grayscale(100%);
    opacity:0.6;
    transition:0.35s;
}

.logo-item img:hover{
    filter:grayscale(0%);
    opacity:1;
    transform:scale(1.15);
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* Como ahora hay 3 grupos, nos movemos exactamente 1/3 del total */
        transform: translateX(calc(-100% / 3));
    }
}

@media (max-width: 768px) {
    .logo-item {
        width: 120px; /* Logos más pequeños en celular */
        height: 50px;
    }
    .logo-group {
        gap: 40px;
        padding-right: 40px;
    }
    .logo-caritas {
        transform: scale(1.2); /* Menos escala en móvil para no romper el layout */
    }
}

.logo-carousel::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:120px;
    z-index:2;

    background:linear-gradient(
        to right,
        #f8f9fa,
        transparent
    );
}


.logo-carousel::after{
    content:"";
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:120px;
    z-index:2;

    background:linear-gradient(
        to left,
        #f8f9fa,
        transparent
    );
}