/* ============================================
   TICKER ANIMADO - Scroll Horizontal Infinito
   ============================================ */

.ticker-container {
    width: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #fff9e6, #fff3cc);
    border-top: 1px solid #ffe4b3;
    border-bottom: 1px solid #ffe4b3;
    padding: 0.625rem 0;
    margin-bottom: 0;
}

.ticker-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: scroll-left 40s linear infinite;
    gap: 1rem;
}

/* Pausa al hover */
.ticker-container:hover .ticker-content {
    animation-play-state: paused;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #92400e;
}

    .ticker-item i {
        font-size: 0.75rem;
        color: #f59e0b;
    }

.ticker-divider {
    color: #fbbf24;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Animación scroll infinito */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ============================================
   VARIANTE: Fondo Degradado Sutil
   ============================================ */

/* Opción 2: Fondo blanco con borde */
.ticker-container.ticker-white {
    background: #fff;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

    .ticker-container.ticker-white .ticker-item {
        color: #4a5568;
    }

        .ticker-container.ticker-white .ticker-item i {
            color: #8B1D1D;
        }

    .ticker-container.ticker-white .ticker-divider {
        color: #d1d5db;
    }

/* Opción 3: Fondo rojo sutil */
.ticker-container.ticker-red {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-top: 1px solid #fecaca;
    border-bottom: 1px solid #fecaca;
}

    .ticker-container.ticker-red .ticker-item {
        color: #7f1d1d;
    }

        .ticker-container.ticker-red .ticker-item i {
            color: #8B1D1D;
        }

    .ticker-container.ticker-red .ticker-divider {
        color: #f87171;
    }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .ticker-container {
        padding: 0.5rem 0;
    }

    .ticker-item {
        font-size: 0.75rem;
        gap: 0.25rem;
    }

        .ticker-item i {
            font-size: 0.6875rem;
        }

    .ticker-divider {
        font-size: 0.75rem;
    }

    /* Velocidad más rápida en mobile */
    .ticker-content {
        animation-duration: 30s;
    }
}