.slider-container {
    max-width: 100vw; /* Ancho visible del slider (ej: 3 imágenes de 200px) */
    overflow: hidden; /* Oculta las imágenes que están fuera del contenedor */
    border: none;
    position: relative; /* Necesario para el posicionamiento de los clones */
}

.slider {
    display: flex;
    width: fit-content; /* Se ajustará al ancho total de todas las imágenes */
    animation: slide 40s linear infinite; /* Animación principal */
}

.slider:hover {
    animation-play-state: paused; /* Pausa la animación al pasar el mouse */
}

.slider img {
    width: 200px; /* Ancho de cada imagen */
    height: 200px; /* Alto de cada imagen */
    flex-shrink: 0; /* Evita que las imágenes se encojan */
    display: block; /* Elimina espacios en blanco debajo de las imágenes */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin distorsionarse */
}

/* Animación del slider */
@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Mueve el slider la mitad de su ancho */
    }
}