/* FORCE CLIENTS BACKGROUND - Nuevo diseño con gradiente celeste y puntos animados */
/* Priority CSS para la sección de clients con nuevo background */

/* Background principal con gradiente celeste */
section#clients.clients-section.clients-bg-pattern,
.clients-section.clients-bg-pattern,
#clients.clients-bg-pattern,
section.clients-bg-pattern {
    background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 50%, #E0F6FF 100%) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Puntos animados flotantes (inspirados en template1) */
section#clients.clients-section.clients-bg-pattern::before,
.clients-section.clients-bg-pattern::before,
#clients.clients-bg-pattern::before,
section.clients-bg-pattern::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(70, 130, 180, 0.3) 2px, transparent 2px),
        radial-gradient(circle at 80% 70%, rgba(100, 149, 237, 0.25) 3px, transparent 3px),
        radial-gradient(circle at 40% 80%, rgba(135, 206, 235, 0.2) 1px, transparent 1px),
        radial-gradient(circle at 90% 20%, rgba(70, 130, 180, 0.35) 2px, transparent 2px);
    background-size: 100px 100px, 150px 150px, 80px 80px, 120px 120px !important;
    animation: float 20s ease-in-out infinite !important;
    z-index: 1 !important;
}

/* Animación para los puntos flotantes */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(1deg); }
    50% { transform: translateY(-5px) rotate(-1deg); }
    75% { transform: translateY(-15px) rotate(0.5deg); }
}

/* Force container content above background */
section#clients.clients-section.clients-bg-pattern .container,
.clients-section.clients-bg-pattern .container {
    position: relative !important;
    z-index: 10 !important;
}

section#clients.clients-section.clients-bg-pattern .container *,
.clients-section.clients-bg-pattern .container * {
    position: relative !important;
    z-index: 10 !important;
}

/* Responsive adjustments para los puntos animados */
@media (max-width: 768px) {
    section#clients.clients-section.clients-bg-pattern::before,
    .clients-section.clients-bg-pattern::before,
    #clients.clients-bg-pattern::before,
    section.clients-bg-pattern::before {
        background-size: 50px 50px, 75px 75px, 40px 40px, 60px 60px !important;
    }
}

@media (max-width: 576px) {
    section#clients.clients-section.clients-bg-pattern::before,
    .clients-section.clients-bg-pattern::before,
    #clients.clients-bg-pattern::before,
    section.clients-bg-pattern::before {
        background-size: 30px 30px, 50px 50px, 25px 25px, 40px 40px !important;
    }
}

/* Clients Background Actualizado: 20250803_202536 */
/* Nuevo diseño con gradiente celeste y puntos animados */