/* CONTENEDOR PRINCIPAL */
.pasarela{
    width:100%;
    overflow:hidden;
    position:relative;
    padding:20px 0;
}

/* CARRIL */
.pasarela-track{
    display:flex;
    align-items:center;
    gap:40px;
    width:max-content;
    animation:mover 15s linear infinite;
}

/* TARJETA */
.item{
    position:relative;
    width:90px;
    height:90px;
    flex-shrink:0;
    cursor:pointer;
}

/* IMAGEN */
.item img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:all .3s ease;
}

/* EFECTO HOVER */
.item:hover img{
    transform:scale(1.15);
}

/* CAPA OSCURA */
.nombre{
    position:absolute;
    left:50%;
    bottom:-35px; /* debajo de la imagen */
    transform:translateX(-50%);

    background:rgba(33, 177, 170, 0.85);
    color:#fff;

    padding:6px 12px;
    border-radius:20px;

    font-size:13px;
    font-weight:600;
    white-space:nowrap;

    opacity:0;
    visibility:hidden;
    transition:.3s;

    z-index:1000;
}

.item:hover .nombre{
    opacity:1;
    visibility:visible;
}

/* ANIMACIÓN */
@keyframes mover{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

/* TABLET */
@media (max-width:768px){

    .pasarela-track{
        gap:25px;
        animation-duration:12s;
    }

    .item{
        width:70px;
        height:70px;
    }

    .nombre{
        font-size:12px;
    }
}

/* MÓVIL */
@media (max-width:480px){

    .pasarela-track{
        gap:15px;
        animation-duration:10s;
    }

    .item{
        width:55px;
        height:55px;
    }

    .nombre{
        font-size:11px;
    }
}