/* cinta.css — La cinta que gira debajo del banner.
   Ver partes/cinta.html: la pista lleva el grupo dos veces. */

.ta-cinta {
    background: var(--ta-carbon);
    color: var(--ta-crema);
    border-block: 1px solid rgba(255, 251, 245, .10);
    overflow: hidden;
    /* Delgada a propósito: es un remate del banner, no una sección. */
    padding-block: var(--esp-2);
}

.ta-cinta__pista {
    display: flex;
    width: max-content;
    /* Sin esto, el navegador reparte los ítems al llegar al borde y la cinta
       se ve dar tirones en vez de correr parejo. */
    will-change: transform;
    animation: ta-cinta-correr 42s linear infinite;
}

.ta-cinta:hover .ta-cinta__pista,
.ta-cinta:focus-within .ta-cinta__pista {
    animation-play-state: paused;
}

.ta-cinta__grupo {
    display: flex;
    align-items: center;
    gap: var(--esp-5);
    margin: 0;
    padding: 0 calc(var(--esp-5) / 2);
    list-style: none;
    flex-shrink: 0;
}

.ta-cinta__item {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    white-space: nowrap;
    font-family: var(--ta-fuente-texto);
    font-size: var(--txt-sm);
    font-weight: var(--peso-medio);
    letter-spacing: .01em;
}

/* Las formas de pago y el reparto se distinguen del platillo sin gritar. */
.ta-cinta__item--pago {
    color: var(--ta-amarillo);
}

/* Media pista: en ese punto la segunda copia quedó donde arrancó la primera,
   así que volver a cero no se nota. */
@keyframes ta-cinta-correr {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Quien pidió menos movimiento no lo recibe. La cinta se queda quieta y se
   puede recorrer a mano, que es lo que hace que siga siendo legible. */
@media (prefers-reduced-motion: reduce) {
    .ta-cinta {
        overflow-x: auto;
    }
    .ta-cinta__pista {
        animation: none;
        width: auto;
    }
    /* Sin animación, la segunda copia solo repetiría lo mismo al desplazar. */
    .ta-cinta__grupo[aria-hidden="true"] {
        display: none;
    }
}