.carousel {
    overflow: hidden;
    width: 100%;
    max-height: 300px;
    position: relative;
    margin-bottom: 20px;
}

.slides {
    display: flex;
    width: calc(100% * 20); /* Ajustado para loop de 10 imágenes duplicadas */
    animation: slide 100s linear infinite; /* velocidad más lenta */
}

.slides img {
    width: 10%;
    height: 300px;
    object-fit: cover;
}

/* Animación en loop para 10 imágenes */
@keyframes slide {
    0%   { transform: translateX(0); }
    5%   { transform: translateX(-10%); }
    10%  { transform: translateX(-20%); }
    15%  { transform: translateX(-30%); }
    20%  { transform: translateX(-40%); }
    25%  { transform: translateX(-50%); }
    30%  { transform: translateX(-60%); }
    35%  { transform: translateX(-70%); }
    40%  { transform: translateX(-80%); }
    45%  { transform: translateX(-90%); }
    50%  { transform: translateX(-100%); }
    55%  { transform: translateX(-110%); }
    60%  { transform: translateX(-120%); }
    65%  { transform: translateX(-130%); }
    70%  { transform: translateX(-140%); }
    75%  { transform: translateX(-150%); }
    80%  { transform: translateX(-160%); }
    85%  { transform: translateX(-170%); }
    90%  { transform: translateX(-180%); }
    95%  { transform: translateX(-190%); }
    100% { transform: translateX(0); }
}