.brands-section {
                padding-button: 30px;
                text-align: center;
                background: #fff;
                font-family: inherit;
              }

              .brands-title {
                font-size: 15px;
                color: #888;
                font-weight: 400;
                margin: 0 0 2.5rem;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 16px;
              }

              .brands-title::before,
              .brands-title::after {
                content: '';
                display: block;
                height: 1px;
                width: 80px;
                background: #ddd;
              }

              .brands-title strong {
                font-weight: 600;
                color: #444;
              }

              .brands-grid {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
              }

              .logo-slot {
                width: 160px;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
              }

              .logo-inner {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: opacity 0.6s ease, transform 0.6s ease;
              }

              .logo-inner.fade-out {
                opacity: 0;
                transform: scale(0.92);
              }

              .logo-inner.fade-in {
                opacity: 0;
                transform: scale(1.06);
              }

              .logo-inner.visible {
                opacity: 1;
                transform: scale(1);
              }

              .logo-inner img {
                /* Los PNG de /assets/img/marcas comparten lienzo 600x180 y ya
                   vienen equilibrados ópticamente, así que un ancho único
                   preserva ese equilibrio sin depender del recuadro. */
                width: 150px;
                max-width: 88%;
                height: auto;
                object-fit: contain;
              }
              @media (max-width: 767px) {
                .logo-slot { width: 132px; height: 68px; }
                .logo-inner img { width: 118px; }
              }