#contenedor-escudos {
    position: relative;
    overflow: hidden; /* Oculta cualquier contenido fuera de los límites */
}


.flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    color:#bababa;
    display: none; /* Oculto por defecto */
}

#flecha-izquierda {
    left: 10px;
}

#flecha-derecha {
    right: 10px;
}
.fila-escudos {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 auto;
    max-width: 990px;
    transform: translate3d(0, 0, 0);
}

.fila-escudos::-webkit-scrollbar {
    display: none; /* Oculta el scrollbar en Chrome, Safari y Opera */
}

.escudo {
    flex: 0 0 auto; /* No crece ni se reduce automáticamente */
   
    scroll-snap-align: start;
}


/* Ajustes responsivos */
/* Mobile - se mostrarán 7 escudos */
@media (max-width: 520px) {
    .escudo {
        width: calc(100% / 8); /* 7 escudos visibles */
    }
}

/* Tablets pequeñas - se mostrarán 10 escudos */
@media (min-width: 521px) and (max-width: 767px) {
    .escudo {
        width: calc(100% / 10); /* 10 escudos visibles */
    }
}

/* Tablets grandes - se mostrarán 15 escudos */
@media (min-width: 768px) and (max-width: 990px) {
    .escudo {
        width: calc(100% / 15); /* 15 escudos visibles */
    }
}

/* Escritorio - se mostrarán 20 escudos */
@media (min-width: 990px) {
    .escudo {
        width: calc(100% / 20); /* 20 escudos visibles */
    }
}

#fila-escudos::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
    pointer-events: none; /* Evita que la sombra interfiera con el clic */
}

#fila-escudos.puede-desplazar::after {
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

#fila-escudos:not(.puede-desplazar)::after {
    display: none;
}