/* ==========================================================================
   Marquesina de titulares (.infinite-loop)

   Dos capas: el contenedor .infinite-loop queda fijo, recorta y lleva el
   fondo; el contenedor hijo es la cinta que se desplaza. js/gd-marquesina.js
   repite el contenido hasta llenar el ancho y luego lo duplica, de modo que
   al llegar a -50% la segunda copia cae justo donde empezó la primera y el
   bucle no salta.

   La duración la calcula el JS con la velocidad de --gd-marquesina-velocidad
   (px por segundo), para que el texto avance igual en móvil y en escritorio.
   ========================================================================== */

.infinite-loop {
    --gd-marquesina-velocidad: 80;
    --gd-marquesina-hueco: 50px;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100%;
    overflow: hidden;
    position: relative;
    /* La animación va en la cinta, nunca aquí. */
    animation: none !important;
    transform: none !important;
}

.infinite-loop > * {
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    animation: gd-marquesina 22s linear infinite;
    will-change: transform;
}

.infinite-loop .elementor-widget-heading {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 var(--gd-marquesina-hueco) 0 0 !important;
}

.infinite-loop .elementor-heading-title {
    white-space: nowrap;
}

/* Al pasar el ratón se detiene, para poder leer. */
.infinite-loop:hover > * {
    animation-play-state: paused;
}

/* El avance lo fija el JS en píxeles exactos (la distancia entre una copia y
   la siguiente). Con -50% el redondeo de los anchos deja un salto de unos
   pocos píxeles en cada vuelta. */
@keyframes gd-marquesina {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--gd-marquesina-avance, 50%)));
    }
}

/* Quien pidió menos movimiento en su sistema ve la cinta quieta. */
@media (prefers-reduced-motion: reduce) {
    .infinite-loop > * {
        animation: none !important;
        transform: none !important;
    }
}

@media (max-width: 767px) {
    .infinite-loop {
        --gd-marquesina-hueco: 30px;
    }
}