/* ============================================
   BANNER PROMOCIONAL
   ============================================ */

.promo-banner {
    background: black;
    color: white;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    padding: 0.4rem 0;
}

.promo-banner-content {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.promo-banner-text {
    display: inline-block;
    padding-left: 100%;
    animation: slide-banner 20s linear infinite;
    font-weight: 200;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* Animación de deslizamiento continuo */
@keyframes slide-banner {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Pausa la animación al hacer hover */
.promo-banner:hover .promo-banner-text {
    animation-play-state: paused;
}

/* Responsive */
@media (max-width: 768px) {
    .promo-banner {
        padding: 0.6rem 0;
    }
    
    .promo-banner-text {
        font-size: 0.9rem;
        animation: slide-banner 15s linear infinite;
    }
}

@media (max-width: 480px) {
    .promo-banner-text {
        font-size: 0.85rem;
        animation: slide-banner 12s linear infinite;
    }
}

/* Variante con gradiente alternativo */
.promo-banner.promo-banner-gold {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.promo-banner.promo-banner-green {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.promo-banner.promo-banner-orange {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}