/* Nuestras Alianzas: cintas de logos (Clientes y Socios).
   - Las dos cintas corren a la misma velocidad. Esa velocidad se cambia en index.js (VELOCIDAD_CINTA).
   - Sin JavaScript la cinta queda quieta y se puede deslizar con el dedo o el mouse.
   - Reemplaza al slider anterior (.logos-slider / .slider-track), que duplicaba los logos dos veces y corria a unos 620 px/s. */

.nuestras-alianzas h2,
.alianza-etiqueta h3 {
    scroll-margin-top: 110px;
}

.alianza-fila {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 10px 20px;
    text-align: left;
}

.alianza-etiqueta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alianza-etiqueta img {
    width: 50px;
    height: auto;
    flex: none;
}

.alianza-etiqueta h3 {
    font-size: 1.8rem;
    margin: 0;
}

/* La cinta */
.cinta {
    --cinta-gap: 56px;
    --cinta-alto: 160px;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.cinta::-webkit-scrollbar {
    display: none;
}

.cinta__pista {
    display: flex;
    width: max-content;
}

.cinta__grupo {
    display: flex;
    align-items: center;
    gap: var(--cinta-gap);
    padding-right: var(--cinta-gap);
    flex: none;
}

.cinta img {
    height: var(--cinta-alto);
    width: auto;
    max-width: none;
    object-fit: contain;
    flex: none;
    transition: transform 0.3s ease;
}

.cinta img:hover {
    transform: scale(1.05);
}

/* Con JavaScript la cinta corre sola, sin saltos: la pista tiene dos grupos iguales y avanza justo la mitad. */
.cinta--lista {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.cinta--lista .cinta__pista {
    animation: cinta-mover var(--cinta-dur, 60s) linear infinite;
}

@keyframes cinta-mover {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Se detiene al pasar el mouse o al tocarla con el dedo, para poder ver cada logo */
@media (hover: hover) {
    .cinta--lista:hover .cinta__pista {
        animation-play-state: paused;
    }
}

.cinta--lista:focus-within .cinta__pista,
.cinta--lista.cinta--pausa .cinta__pista {
    animation-play-state: paused;
}

@media (max-width: 900px) {
    .alianza-fila {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 6px 12px;
    }

    .alianza-etiqueta {
        justify-content: center;
    }

    .cinta {
        --cinta-gap: 36px;
        --cinta-alto: 92px;
    }
}

@media (max-width: 520px) {
    .cinta {
        --cinta-gap: 28px;
        --cinta-alto: 76px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cinta--lista {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .cinta--lista .cinta__pista {
        animation: none;
    }
}