/* ==========================================
   MI TIENDA - PROMOCIÓN ANIMADA
   Efecto tornasol letra por letra
========================================== */

/* TÍTULO MI REGALO */

#promociones #promotionTitle {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 15px 0;
    line-height: 1.5;
    font-weight: 800;

    /* Evita que otras animaciones anteriores interfieran */
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: initial;
}

/* LETRAS DEL TÍTULO */

#promociones #promotionTitle .letra-regalo {
    display: inline-block;
    position: relative;

    background: linear-gradient(
        120deg,
        #b7791f,
        #ffd700,
        #fff3a0,
        #f59e0b,
        #ff1493,
        #a855f7,
        #ffd700
    );

    background-size: 300% 100%;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    transform-origin: center bottom;

    animation:
        regaloTornasol 3s linear infinite,
        regaloSalto 3s ease-in-out infinite;

    animation-delay:
        calc(var(--i) * -0.09s),
        calc(var(--i) * 0.09s);
}

/* DESCRIPCIÓN */

#promociones #promotionDescription {
    display: block;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: normal;

    white-space: pre-line;
    overflow-wrap: break-word;

    margin-bottom: 25px;

    /* Evita la animación anterior del párrafo */
    animation: none !important;
}

/* PALABRAS: EVITAR CORTES ENTRE LÍNEAS */

#promociones .palabra-regalo {
    display: inline-block;
    white-space: nowrap;
}

/* LETRAS DE LA DESCRIPCIÓN */

#promociones #promotionDescription .letra-regalo {
    display: inline-block;
    position: relative;

    color: inherit;

    transform-origin: center bottom;

    animation: descripcionOla 3.5s ease-in-out infinite;

    animation-delay: calc(var(--i) * 0.07s);
}

/* EFECTO TORNASOL DEL TÍTULO */

@keyframes regaloTornasol {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 100% center;
    }
}

/* SALTO SECUENCIAL DEL TÍTULO */

@keyframes regaloSalto {
    0%, 15%, 45%, 100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-9px);
    }

    35% {
        transform: translateY(0);
    }
}

/* OLA DE COLOR DE LA DESCRIPCIÓN */

@keyframes descripcionOla {
    0%, 12%, 45%, 100% {
        transform: translateY(0);
        color: inherit;
        text-shadow: none;
    }

    20% {
        transform: translateY(-4px);
        color: #ff1493;
        text-shadow: 0 0 5px rgba(255, 20, 147, 0.2);
    }

    28% {
        transform: translateY(-2px);
        color: #a855f7;
    }

    36% {
        transform: translateY(0);
        color: #2563eb;
        text-shadow: none;
    }
}

/* CELULARES */

@media (max-width: 600px) {
    #promociones #promotionTitle {
        font-size: 30px;
    }

    #promociones #promotionDescription {
        font-size: 14px;
        line-height: 1.8;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
    #promociones #promotionTitle .letra-regalo,
    #promociones #promotionDescription .letra-regalo {
        animation: none !important;
        transform: none !important;
    }
}