.brands-section {
            background-color: #000;
            padding: -20px 0 50px 0; 
        }

        /* --- TÍTULO --- */
        .section-title {
            text-align: center;
            font-family: 'Arial', sans-serif;
            font-weight: 300; 
            font-size: 2.2rem; 
            letter-spacing: 8px; 
            color: #ff3333; 
            margin-bottom: 60px;
            text-shadow: 0 0 15px rgba(255, 51, 51, 0.6); 
            text-transform: uppercase;
        }

        /* --- EL CONTENEDOR MÁGICO (WRAPPER) --- */
        /* Este div es el que realmente cambia de color de fondo para simular el borde */
        .brand-card-wrapper {
            position: relative;
            background: rgba(255, 255, 255, 0.08); /* Un borde gris muy sutil al inicio */
            padding: 2px; /* ESTO DEFINE EL GROSOR DEL BORDE (2px) */
            border-radius: 20px;
            transition: all 0.4s ease;
            cursor: pointer;
        }

        /* --- EL CUADRO INTERNO --- */
        .brand-card-v3 {
            background-color: #080808; /* Negro profundo */
            border-radius: 18px; /* Un poco menos que el wrapper para encajar perfecto */
            height: 260px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30px;
            position: relative;
            overflow: hidden;
        }

        /* --- IMAGEN DEL LOGO --- */
        .brand-card-v3 img {
            max-width: 85%;
            max-height: 130px;
            object-fit: contain;
            /* Transición fluida con un ligero rebote al final */
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease;
            
            /* EFECTO APAGADO: Le quitamos un 50% de color y lo hacemos medio transparente */
            filter: grayscale(50%) opacity(0.6); 
        }

        /* ================================================= */
        /* --- LA MAGIA DEL HOVER (AL PASAR EL MOUSE) ---    */
        /* ================================================= */
        
        /* 1. El wrapper se eleva y su fondo se vuelve un degradado de tu marca */
        .brand-card-wrapper:hover {
            transform: translateY(-12px);
            background: linear-gradient(135deg, #ff3366, #ff9900);
            box-shadow: 0 15px 35px rgba(255, 51, 102, 0.25);
        }

        /* 2. El cuadro interno negro se ilumina muuuuy sutilmente por dentro */
        .brand-card-wrapper:hover .brand-card-v3 {
            background-color: #0c0c0c; 
        }

        /* 3. El logo "despierta": recupera su color, se hace 100% opaco, hace zoom y parece saltar hacia ti */
        .brand-card-wrapper:hover .brand-card-v3 img {
            transform: scale(1.15) translateY(-5px);
            filter: grayscale(0%) opacity(1) drop-shadow(0 15px 20px rgba(0,0,0,0.8));
        }

        /* --- RESPONSIVE --- */
        @media (max-width: 767px) {
            .brands-section { padding: -20px 0 60px 0; }
            .section-title { font-size: 1.5rem; letter-spacing: 4px; }
            .brand-card-v3 { height: 200px; }
            .brand-card-v3 img { max-height: 100px; }
            /* En móviles quitamos el efecto apagado para que siempre se vea bien */
            .brand-card-v3 img { filter: grayscale(0%) opacity(1); }
        }