/* 1. Contenedor principal */
    .logo-slider {
        width: 100%;
        max-width: 1450px;
        margin: 20px auto;
        padding: 20px 0;
        background: #1e293b;
        border-radius: 15px;
        border: 2px solid rgb(255, 255, 255);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        overflow: hidden; 
        position: relative;
        display: flex;
    }

    /* 2. El carril que se mueve (Track) */
    .logo-track {
        display: flex;
        /* Ancho: (Ancho de cada logo * Total de logos incluyendo duplicados) */
        /* 250px * 20 logos = 5000px */
        width: calc(250px * 40); 
        animation: scroll 30s linear infinite;
    }

    /* 3. Cada bloque de logo */
    .logo-item {
        width: 250px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .logo-item a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
    }

    /* 4. Estilo de la imagen (A todo color) */
    .logo-item img {
        /* MODIFICA ESTO PARA EL TAMAÑO DE LA IMAGEN */
        max-width: 100px; 
        max-height: 100px; 
        
        object-fit: contain;
        opacity: 1; /* Asegura que se vea al 100% de color */
        transition: transform 0.3s ease;
    }

    /* Efecto al pasar el mouse */
    .logo-item a:hover img {
        transform: scale(1.15); /* Crece un poco al pasar el mouse */
    }

    /* 5. Animación infinita sin saltos */
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            /* Se mueve exactamente la mitad (el ancho de los 10 logos originales) */
            transform: translateX(calc(-250px * 10));
        }
    }

    /* Pausa cuando el usuario pone el mouse encima */
    .logo-slider:hover .logo-track {
        animation-play-state: paused;
    }