/* =========================================
   CARRUSEL DE CLIENTES (INFINITE SCROLL)
   ========================================= */
.clients-section {
    padding: 80px 5%;
    background-color: var(--bg-darker);
    text-align: center;
    overflow: hidden;
}

.clients-section h2 {
    font-family: var(--font-headers);
    font-size: 2.2rem;
    margin-bottom: 50px;
    color: var(--silver-accent);
}

/* Contenedor principal con efecto de desvanecimiento en los bordes */
.clients-slider {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    /* Máscara para difuminar los bordes izquierdo y derecho */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* La pista que se mueve (debe tener el doble de ancho) */
.clients-track {
    display: flex;
    width: max-content;
    /* La animación dura 35s, si quieres que vaya más rápido, baja este número */
    animation: scroll-clients 35s linear infinite;
}

/* Opcional: Pausar el movimiento si el usuario pasa el ratón por encima */
.clients-track:hover {
    animation-play-state: paused;
}

/* Diseño de la tarjeta blanca del logo */
.client-logo {
    width: 240px; /* Cajas ligeramente más anchas */
    height: 120px; /* Cajas ligeramente más altas */
    background-color: #ffffff;
    border-radius: 8px; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px; /* Reducimos el margen interno para que el logo crezca */
    margin-right: 30px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

.client-logo:hover {
    transform: scale(1.05);
}

/* La imagen dentro de la caja */
.client-logo img {
    width: 110%; /* Forzamos a que ocupe el 100% de la caja */
    height: 110%;
    object-fit: contain; /* Asegura que no se deformen ni se estiren feo */
}
/* Animación de desplazamiento infinito */
@keyframes scroll-clients {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
    /* Se desplaza el 50% porque tendremos los logos duplicados exactamente 2 veces */
}

@media (max-width: 768px) {
    .client-logo {
        width: 160px;
        height: 80px;
        padding: 15px;
        margin-right: 20px;
    }
}