/* bloques/logos — frase entre filetes y logos de clientes */

.bl-logos { padding-block: clamp(28px, 3.5vw, 48px); }

.bl-logos-frase { display: flex; align-items: center; gap: 20px; margin: 0 0 clamp(22px, 3vw, 34px); font-size: 14px; color: var(--vk-texto-2, #5f5c58); text-align: center; }
.bl-logos-frase::before, .bl-logos-frase::after { content: ""; flex: 1 1 40px; height: 1px; background: var(--vk-linea, rgba(38,37,36,.14)); }
.bl-logos-frase span { flex: 0 1 auto; max-width: 64em; }
.bl-tema-oscuro .bl-logos-frase { color: rgba(255, 255, 255, .7); }
.bl-tema-oscuro .bl-logos-frase::before, .bl-tema-oscuro .bl-logos-frase::after { background: rgba(255, 255, 255, .16); }

.bl-logos-lista { list-style: none; margin: 0; padding: 0; }
.bl-logos--fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 36px; }
.bl-logos--rejilla { display: grid; grid-template-columns: repeat(var(--bl-logos-cols, 6), minmax(0, 1fr)); gap: 28px 24px; align-items: center; justify-items: center; }

.bl-logo { display: flex; align-items: center; justify-content: center; min-height: 40px; }
.bl-logo a { display: flex; align-items: center; text-decoration: none; color: inherit; }
.bl-logo img { max-height: 38px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.bl-logo-nombre { font-weight: 600; font-size: clamp(16px, 1.4vw, 19px); letter-spacing: .01em; white-space: nowrap; color: var(--vk-oscuro, #262524); }
.bl-tema-oscuro .bl-logo-nombre { color: #fff; }

.bl-logos--gris .bl-logo img { filter: grayscale(1); opacity: .78; transition: filter .25s, opacity .25s; }
.bl-logos--gris .bl-logo-nombre { opacity: .78; }
.bl-logos--gris .bl-logo:hover img { filter: none; opacity: 1; }

/* Desplazamiento continuo. Antes de que arranque Swiper (o sin JS, o con
   movimiento reducido) es una fila centrada; script.js añade las clases
   swiper-* y la mueve. Todos los huecos miden lo mismo para que la
   velocidad sea constante. */
.bl-logos--desplazamiento { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 48px; }
.bl-logos-marquesina.swiper { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.bl-logos-marquesina.swiper .bl-logos-lista { flex-wrap: nowrap; justify-content: flex-start; gap: 0; transition-timing-function: linear !important; }
.bl-logos-marquesina.swiper .bl-logo { width: 200px; flex-shrink: 0; padding-inline: 16px; }
.bl-logos-marquesina.swiper .bl-logo-nombre { white-space: normal; text-align: center; }

@media (max-width: 760px) {
    .bl-logos-marquesina.swiper .bl-logo { width: 150px; }
    .bl-logos--fila { justify-content: center; gap: 22px 32px; }
    .bl-logos--rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bl-logo img { max-height: 30px; max-width: 120px; }
}