@charset "utf-8";

/*==================================================
NEWS BAR
MCTIRE PREMIUM
MOVIMIENTO CONTROLADO POR JAVASCRIPT
==================================================*/


/*==================================================
CONTENEDOR
==================================================*/

.news-bar
{
    position:relative;

    width:100%;
    height:52px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at top,
            rgba(255,255,255,.08),
            transparent 45%
        ),

        linear-gradient(
            135deg,
            #505050 0%,
            #3d3d3d 25%,
            #2d2d2d 55%,
            #1e1e1e 100%
        );

    color:#fff;

    border-top:
        1px solid
        rgba(255,255,255,.15);

    border-bottom:
        2px solid
        var(--primary);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.10),

        inset 0 -1px 0
        rgba(255,255,255,.05),

        0 12px 30px
        rgba(0,0,0,.22);

    box-sizing:border-box;
}


/*==================================================
LÍNEA ROJA INFERIOR
==================================================*/

.news-bar::before
{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:3px;

    z-index:5;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary),
            #ff4d4d,
            var(--primary),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(215,25,32,.55);

    pointer-events:none;
}


/*==================================================
BRILLO SUPERIOR
==================================================*/

.news-bar::after
{
    content:"";

    position:absolute;

    top:0;
    left:-35%;

    width:25%;
    height:100%;

    z-index:4;

    pointer-events:none;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,.12) 50%,
            transparent 100%
        );

    transform:skewX(-20deg);

    animation:
        newsGlow
        9s
        linear
        infinite;
}


/*==================================================
BRILLO GENERAL
==================================================*/

@keyframes newsGlow
{
    0%
    {
        left:-35%;
    }

    100%
    {
        left:135%;
    }
}


/*==================================================
TRACK
IMPORTANTE:
NO TIENE ANIMATION
EL MOVIMIENTO LO CONTROLA JS
==================================================*/

.news-track
{
    display:flex;

    align-items:center;

    position:absolute;

    top:0;
    left:0;

    width:max-content;
    min-width:max-content;

    height:52px;

    z-index:2;

    transform:
        translate3d(0,0,0);

    -webkit-transform:
        translate3d(0,0,0);

    will-change:transform;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

    box-sizing:border-box;
}


/*==================================================
GRUPO
==================================================*/

.news-group
{
    display:flex;

    align-items:center;

    flex-shrink:0;

    height:52px;

    box-sizing:border-box;
}


/*==================================================
ITEM
==================================================*/

.news-group span
{
    position:relative;

    display:flex;

    align-items:center;

    flex-shrink:0;

    height:52px;

    gap:.85rem;

    padding:
        0
        2.8rem;

    white-space:nowrap;

    color:
        rgba(255,255,255,.96);

    font-size:.95rem;

    font-weight:600;

    line-height:1;

    letter-spacing:.2px;

    box-sizing:border-box;
}


/*==================================================
SEPARADOR
==================================================*/

.news-group span::after
{
    content:"";

    position:absolute;

    top:50%;
    right:0;

    width:1px;
    height:22px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.40),
            transparent
        );
}


/*==================================================
ÚLTIMO SEPARADOR
==================================================*/

.news-group span:last-child::after
{
    display:none;
}


/*==================================================
ICONO
==================================================*/

.news-group i
{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:34px;
    height:34px;

    border-radius:50%;

    font-style:normal;

    font-size:1rem;

    line-height:1;

    color:#fff;

    background:
        linear-gradient(
            180deg,
            #ff5757 0%,
            var(--primary) 55%,
            var(--primary-hover) 100%
        );

    border:
        1px solid
        rgba(255,255,255,.18);

    box-shadow:
        inset 0 1px 2px
        rgba(255,255,255,.30),

        0 6px 15px
        rgba(215,25,32,.25);

    overflow:hidden;

    box-sizing:border-box;
}


/*==================================================
BRILLO DEL ICONO
==================================================*/

.news-group i::before
{
    content:"";

    position:absolute;

    top:-50%;
    left:-120%;

    width:50%;
    height:200%;

    pointer-events:none;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transform:
        rotate(22deg);

    animation:
        newsIconShine
        6s
        ease-in-out
        infinite;
}


/*==================================================
ANIMACIÓN BRILLO ICONO
==================================================*/

@keyframes newsIconShine
{
    0%,
    70%
    {
        left:-120%;
    }

    100%
    {
        left:160%;
    }
}


/*==================================================
HOVER
SOLO DISPOSITIVOS CON MOUSE
==================================================*/

@media (hover:hover) and (pointer:fine)
{
    .news-group span
    {
        cursor:default;
    }


    .news-group span:hover
    {
        color:#fff;
    }


    .news-group span:hover i
    {
        transform:
            scale(1.08)
            rotate(-5deg);

        box-shadow:
            inset 0 1px 2px
            rgba(255,255,255,.35),

            0 10px 22px
            rgba(215,25,32,.38);
    }
}


/*==================================================
TABLET
==================================================*/

@media (max-width:768px)
{
    .news-bar
    {
        height:48px;
    }


    .news-track
    {
        height:48px;
    }


    .news-group
    {
        height:48px;
    }


    .news-group span
    {
        height:48px;

        padding:
            0
            1.8rem;

        gap:.7rem;

        font-size:.87rem;
    }


    .news-group i
    {
        width:30px;
        height:30px;

        font-size:.90rem;
    }
}


/*==================================================
MÓVIL
==================================================*/

@media (max-width:576px)
{
    .news-bar
    {
        height:44px;
    }


    .news-track
    {
        height:44px;
    }


    .news-group
    {
        height:44px;
    }


    .news-group span
    {
        height:44px;

        padding:
            0
            1.2rem;

        gap:.6rem;

        font-size:.80rem;
    }


    .news-group i
    {
        width:26px;
        height:26px;

        font-size:.80rem;
    }


    .news-bar::after
    {
        display:none;
    }
}



/*==================================================
MÓVIL MUY PEQUEÑO
==================================================*/

@media (max-width:400px)
{
    .news-group span
    {
        padding:
            0
            1rem;

        font-size:.76rem;
    }


    .news-group i
    {
        width:24px;
        height:24px;

        font-size:.74rem;
    }
}