/* La cajita que esconde lo que se sale de la pantalla */
.carrusel-cat-contenedor {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 15px 0;
}

/* La pista donde corren las imágenes de derecha a izquierda */
.carrusel-cat-pista {
    display: flex;
    /* 🌸 EL SECRETO ESTÁ AQUÍ: Dejamos que la pista mida exactamente lo que miden las fotos 🌸 */
    width: max-content; 
    animation: mover-carrusel 20s linear infinite;
}

/* El espacio de cada imagen (Para que se vean de 3 en 3 en celulares) */
.carrusel-cat-item {
    width: 33.33vw; /* Esto significa: un tercio de la pantalla */
    min-width: 110px;
    max-width: 180px;
    padding: 0 8px;
    flex-shrink: 0;
}

/* La magia del movimiento continuo sin pausas */
@keyframes mover-carrusel {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Se mueve exactamente a la mitad (donde empiezan las fotos repetidas) */
        transform: translateX(-50%); 
    }
}

/* 🌸 Magia para detener la pista cuando la tocan con el dedo o le pasan el ratón por encima 🌸 */
.carrusel-cat-contenedor:hover .carrusel-cat-pista,
.carrusel-cat-contenedor:active .carrusel-cat-pista {
    animation-play-state: paused;
}