/* =====================  PALABRAS EN MOVIMIENTO  ===================== */

.wordsmovegray-wrapper {
    overflow: hidden;
    background-color: #f5f5f5;
    padding-top: 10px;
    position: relative;
}

.wordsmovegray-carousel {
    display: flex;
    align-items: center;
    animation: wordsmovegray-scroll-left 35s linear infinite;
    gap: 60px;
}

.wordsmovegray-item-1,
.wordsmovegray-item-2 {
    display: flex;
    color: #b3b3b3;
    font-size: 100px;
    font-weight: bold;
    flex-wrap: nowrap;
}

.wordsmovecolor-wrapper {
    overflow: hidden;
    background-color: #f5f5f5;
    padding-bottom: 10px;
    position: relative;
}

.wordsmovecolor-carousel {
    display: flex;
    align-items: center;
    animation: wordsmovecolor-scroll-right 35s linear infinite;
    gap: 60px;
}

.wordsmovecolor-item-1 {
    display: flex;
    color: #1e1e1e;
    font-size: 100px;
    font-weight: bold;
    flex-wrap: nowrap;
}

.wordsmovecolor-item-2 {
    display: flex;
    color: #e3ad09;
    font-size: 100px;
    flex-wrap: nowrap;
}

/* =====================  ANIMACIONES DESKTOP  ===================== */
/* Recorrido de media longitud (0 → −50 %  y  −50 % → 0) */
@keyframes wordsmovegray-scroll-left {
    0%   { transform: translateX(0); }      /* contenido visible desde el inicio */
    100% { transform: translateX(-50%); }   /* al llegar aquí, la 2.ª copia ocupa el lugar */
}

@keyframes wordsmovecolor-scroll-right {
    0%   { transform: translateX(-50%); }   /* empezamos con la 2.ª copia */
    100% { transform: translateX(0); }      /* vuelve la 1.ª copia sin huecos */
}

/* =====================  VISTA MÓVIL  ===================== */
@media (max-width: 800px) {
    .wordsmovegray-wrapper { margin-top: -40px; }

    .wordsmovegray-carousel {
        animation: wordsmovegray-scroll-left 65s linear infinite;
        gap: 20px;
    }

    .wordsmovegray-item-1,
    .wordsmovegray-item-2 {
        font-size: 50px;
    }

    .wordsmovecolor-carousel {
        animation: wordsmovecolor-scroll-right 65s linear infinite;
        gap: 20px;
    }

    .wordsmovecolor-item-1,
    .wordsmovecolor-item-2 {
        font-size: 50px;
    }

    /* Keyframes móvil: mismo principio, sin huecos */
    @keyframes wordsmovegray-scroll-left {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    @keyframes wordsmovecolor-scroll-right {
        0%   { transform: translateX(-50%); }
        100% { transform: translateX(0); }
    }
}