/* --- 9. SECCIÓN CLIENTES --- */
.clientes-section {
    background-color: var(--white);
    padding: 80px 8%;
}

/* GRID DE CLIENTES (Configuración 5-5-3) */
.clientes-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra las tarjetas de la última fila */
    gap: 25px;
    margin-top: 50px;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

/* TARJETA */
.cliente-card {
    background: var(--light);
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Cálculo para forzar 5 por fila (restando el gap) */
    flex: 0 1 calc(20% - 25px); 
    min-width: 200px;
    height: 140px;
}

/* EFECTO HOVER */
.cliente-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: var(--shadow);
    border-color: var(--primary);
    background: var(--white);
}

/* CONTENEDOR DEL LOGO */
.cliente-logo-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* IMAGEN LOGO (A color por defecto) */
.cliente-logo-container img {
    max-width: 85%;
    max-height: 75%;
    object-fit: contain;
    /* Eliminado el grayscale para recuperar colores */
    filter: none; 
    opacity: 1;
    transition: var(--transition);
}

.cliente-card:hover img {
    transform: scale(1.1);
}

/* --- RESPONSIVE --- */

/* Tablets (3 por fila) */
@media (max-width: 1024px) {
    .cliente-card {
        flex: 0 1 calc(33.33% - 25px);
    }
}

/* Móviles grandes (2 por fila) */
@media (max-width: 768px) {
    .cliente-card {
        flex: 0 1 calc(50% - 25px);
        height: 120px;
    }
}

/* Móviles pequeños (1 por fila) */
@media (max-width: 480px) {
    .cliente-card {
        flex: 0 1 100%;
    }
}