/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 11 2026 | 07:14:48 */
/* --- SECCIÓN DE MARCAS SIN FONDO (Modo Oscuro) --- */
.brands-overlap-dark {
    position: relative;
    z-index: 10;
    margin-top: -150px; 
    padding-bottom: 60px;
}

.brands-strip {
    text-align: center;
    width: 100%;
    margin-top: 0; 
    padding-top: 0; 
}

.brands-title {
    color: #c5a059; /* Texto en Dorado VIP para que resalte en lo oscuro */
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    letter-spacing: 3px;
    margin-bottom: 30px;
    font-weight: 800;
}

.brands-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; 
    gap: 40px;
}

/* --- NUEVO: Animación Keyframes para flotar --- */
@keyframes flotarSutil {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); } /* Sube 8 píxeles. Ajusta este número si quieres que flote más o menos */
    100% { transform: translateY(0px); }
}

.brands-logos img {
    height: 50px; 
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
    cursor: pointer;
    /* Aplicamos la animación infinita de 3 segundos */
    animation: flotarSutil 3s ease-in-out infinite; 
}

.brands-logos img:hover {
    /* Quitamos la animación al hacer hover para que funcione el escalado */
    animation: none; 
    transform: scale(1.15); 
}

/* --- Retraso escalonado para un flote orgánico --- */
.brands-logos img:nth-child(1) { animation-delay: 0s; }
.brands-logos img:nth-child(2) { animation-delay: 0.2s; }
.brands-logos img:nth-child(3) { animation-delay: 0.4s; }
.brands-logos img:nth-child(4) { animation-delay: 0.6s; }
.brands-logos img:nth-child(5) { animation-delay: 0.8s; }
.brands-logos img:nth-child(6) { animation-delay: 1s; }
.brands-logos img:nth-child(7) { animation-delay: 1.4s; }
.brands-logos img:nth-child(8) { animation-delay: 1.6s; }
/* Si tienes más marcas, puedes seguir el mismo patrón sumando 0.2s */

/* --- Ajuste Móvil --- */
@media (max-width: 768px) {
    .brands-overlap-dark {
        margin-top: -20px;
    }
    .brands-logos {
        gap: 25px;
    }
    .brands-logos img {
        height: 40px; /* Logos un poco más pequeños en celular */
    }
}