:root {
    --c1: #0b3b6f;
    --c2: #176fb3;
    --c3: #30b4e6;
    --height: 38px;
}

/* Línea pequeña tipo "mensaje de servidor" */
.ticker {
    width: 100%;
    height: var(--height);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    letter-spacing: .4px;
    font-size: 0.95rem;
    overflow: hidden;
    background: linear-gradient(270deg, var(--c1), var(--c2), var(--c3), var(--c2), var(--c1));
    background-size: 400% 400%;
    animation: moveGradient 9s ease infinite;
    box-shadow: 0 0 12px rgba(12, 22, 42, 0.25);
}


.ticker span {
    white-space: nowrap;
}


/* Animación del gradiente desplazándose horizontalmente */
@keyframes moveGradient {
    0% {
        background-position: 0% 50%;
    }

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

    100% {
        background-position: 0% 50%;
    }
}