/* =============================================================================
   Section Value Bar — Infinite Marquee de Lujo
   Prefijo: .vb-motion-
   Selectores basados en CLASE (.vb-motion-bar) para permitir múltiples
   instancias en la misma página sin IDs duplicados.
   Fondo: Azul Maestro #002FD9 — Texto: Blanco puro.
   ============================================================================= */

/* ── Variables locales ────────────────────────────────────────────────────── */
.vb-motion-bar {
    --vb-blue:         #002FD9;
    --vb-white:        #FFFFFF;
    --vb-white-40:     rgba(255, 255, 255, 0.40);
    --vb-white-20:     rgba(255, 255, 255, 0.20);
    --vb-font:         -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    --vb-speed:        38s;
    --vb-item-gap:     3rem;
    --vb-height:       52px;
}

/* =============================================================================
   CONTENEDOR PRINCIPAL
   ============================================================================= */
.vb-motion-bar {
    position: relative;
    width: 100%;
    height: var(--vb-height);
    overflow: hidden;

    /* Fondo azul cobalto sólido */
    background: var(--vb-blue) !important;

    /* Bordes ultra-finos en blanco translúcido */
    border-top:    1px solid var(--vb-white-20) !important;
    border-bottom: 1px solid var(--vb-white-20) !important;

    /* Máscaras de fundido — sobre fondo azul */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
    );

    /* Reset Astra */
    margin:  0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* =============================================================================
   TRACK WRAPPER
   ============================================================================= */
.vb-motion-bar .vb-motion-bar__track-wrap {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    animation: vb-scroll var(--vb-speed) linear infinite;
    will-change: transform;
}

.vb-motion-bar .vb-motion-bar__track-wrap:hover {
    animation-play-state: paused;
}

/* =============================================================================
   TRACK
   ============================================================================= */
.vb-motion-bar .vb-motion-bar__track {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    white-space: nowrap;
    flex-shrink: 0;
}

/* =============================================================================
   ÍTEM
   ============================================================================= */
.vb-motion-bar .vb-motion-bar__item {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--vb-item-gap) !important;
    padding: 0 var(--vb-item-gap) !important;
    margin: 0 !important;
    height: 100%;
}

/* =============================================================================
   FRASE — Blanco puro sobre azul
   ============================================================================= */
.vb-motion-bar .vb-motion-bar__phrase {
    display: inline-block;
    font-family:    var(--vb-font) !important;
    font-size:      clamp(0.75rem, 1.4vw, 0.95rem) !important;
    font-weight:    500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color:          var(--vb-white) !important;
    line-height:    1 !important;
    white-space:    nowrap !important;
    transition:     opacity 0.25s ease;
}

.vb-motion-bar .vb-motion-bar__track-wrap:hover .vb-motion-bar__phrase {
    opacity: 0.75;
}

/* =============================================================================
   SEPARADOR — DIAMANTE en blanco translúcido
   ============================================================================= */
.vb-motion-bar .vb-motion-bar__sep,
.vb-motion-bar .vb-motion__sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vb-white-40);
    flex-shrink: 0;
    transition: color 0.25s ease;
}

.vb-motion-bar .vb-motion-bar__track-wrap:hover .vb-motion-bar__sep,
.vb-motion-bar .vb-motion-bar__track-wrap:hover .vb-motion__sep {
    color: var(--vb-white-20);
}

/* =============================================================================
   KEYFRAME
   ============================================================================= */
@keyframes vb-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1024px) {
    .vb-motion-bar {
        --vb-speed:    30s;
        --vb-item-gap: 2rem;
    }
}

@media (max-width: 640px) {
    .vb-motion-bar {
        --vb-speed:    22s;
        --vb-item-gap: 1.5rem;
        --vb-height:   44px;
    }

    .vb-motion-bar .vb-motion-bar__phrase {
        letter-spacing: 0.10em !important;
    }

    .vb-motion-bar {
        -webkit-mask-image: linear-gradient(
            to right, transparent 0%, black 5%, black 95%, transparent 100%
        );
        mask-image: linear-gradient(
            to right, transparent 0%, black 5%, black 95%, transparent 100%
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .vb-motion-bar .vb-motion-bar__track-wrap {
        animation: none !important;
        transform: none !important;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        height: auto;
        gap: 1rem;
        padding: 0.75rem 2rem;
    }

    .vb-motion-bar .vb-motion-bar__track:last-child {
        display: none !important;
    }

    .vb-motion-bar {
        height: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
}