/* CONFIGURACIÓN EXPERTA CSS
    -------------------------
    Para lograr el efecto infinito sin saltos:
    1. Usamos @keyframes para mover el track.
    2. Usamos 'width: max-content' para que los elementos fluyan horizontalmente.
    3. El HTML contiene las imágenes duplicadas (Set 1 + Set 2).
*/

#carrusel {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background: #3f3e3e; */
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    overflow: hidden; /* Vital para que no aparezca scroll horizontal en la página */
    width: 90%; /* Asegura que ocupe todo el ancho */
}

#carrusel .contact-title h2 {
    text-align: center;
    color: #ffffff;
    padding: 10px;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* VENTANA VISIBLE (Viewport del carrusel) 
*/
#carrusel .carousel-container {
    width: 100%; 
    max-width: 1200px; /* Ancho máximo del contenedor */
    position: relative;
    overflow: hidden; /* Oculta lo que sale de los bordes */
    border-radius: 10px;
    padding: 20px 0; /* Espacio arriba y abajo para la sombra/hover */
    
    /* Máscara de degradado para suavizar los bordes (Efecto profesional) */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* PISTA DE DESPLAZAMIENTO (Track)
    Aquí ocurre la magia del movimiento.
*/
#carrusel .carousel-slide {
    display: flex;
    width: max-content; /* Se ajusta al ancho total de todas las imágenes */
    gap: 40px; /* Espacio constante entre imágenes */
    
    /* Animación */
    animation: scroll-left 25s linear infinite;
}

/* Pausar la animación cuando el usuario pasa el mouse por encima */
#carrusel .carousel-container:hover .carousel-slide {
    animation-play-state: paused;
}

/* ESTILOS DE LAS IMÁGENES 
*/
#carrusel .carousel-slide img {
    height: 150px; /* Altura fija para uniformidad */
    width: auto;   /* El ancho se ajusta a la imagen */
    /*display: block; /* Evita espacios fantasma debajo de la imagen */
    object-fit: contain; /* O cover, según prefieras recortar o ajustar */
    border-radius: 8px;
    transition: transform 0.3s ease;
    /*transition: transform 0.3s ease, filter 0.3s ease;*/
    filter: grayscale(30%); /* Estilo opcional: un poco desaturado */
    cursor: pointer;
}

/* Efecto al pasar el mouse sobre una imagen individual */
#carrusel .carousel-slide img:hover {
    transform: scale(1.1); /* Zoom suave */
    filter: grayscale(0%); /* Color completo */
    z-index: 10;
}

/* KEYFRAMES (La lógica del infinito)
    Movemos el track desde 0 hasta -50%.
    ¿Por qué -50%? Porque tenemos 2 sets de imágenes.
    Al llegar a la mitad (final del set 1), salta instantáneamente a 0.
*/
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Si tienes el doble de imágenes exactas, desplazas el 50% del ancho total */
        transform: translateX(-50%);
    }
}

/* --- RESPONSIVE DESIGN --- */

/* Tablets y pantallas medianas */
@media (max-width: 992px) {   /* El container hereda width: 100% */
    #carrusel .carousel-slide {
        gap: 30px;
    }
    #carrusel .carousel-slide img {
        height: 120px;
    }
}

/* Móviles (Landscape y Portrait) */
@media (max-width: 768px) {  /* El container hereda width: 100% */
    #carrusel .carousel-slide img {
        height: 80px;  /* Imágenes más pequeñas en móvil */
    }
    
    #carrusel .carousel-slide {
        gap: 20px; /* Menos espacio en móvil */
        animation-duration: 15s; /* Un poco más rápido en pantallas pequeñas para dinamismo */
    }

    /* Ajustamos la máscara para que no coma tanto espacio en pantallas chicas */
    #carrusel .carousel-container {
        -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }
}

/* Móviles muy pequeños */
@media (max-width: 400px) {
    #carrusel .carousel-slide img {
        height: 60px;
    }
}