/*==================================================
        HEADER DESKTOP
        LA TÓXICA RADIO
==================================================*/


/*==================================================
        HEADER PRINCIPAL
==================================================*/

.desktop-header{

    width:100%;

    height:80px;

    background:
    linear-gradient(
        180deg,
        #0B3D91 0%,
        #020611 100%
    );

    border-bottom:
    1px solid rgba(255,255,255,.10);

    display:flex;

    align-items:center;

    position:relative;

    z-index:1000;

}



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

.desktop-header-container{

    width:100%;

    height:100%;

    padding:0 20px;

    display:flex;

    align-items:center;

}



/*==================================================
        LOGO
==================================================*/

.desktop-logo{

    width:110px;

    display:flex;

    align-items:center;

    flex-shrink:0;

}



.desktop-logo img{

    width:85px;

    height:auto;

}



/*==================================================
        MENU PRINCIPAL
==================================================*/

.desktop-menu{

    flex:1;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-evenly;

}



.desktop-menu a{

    position:relative;

    color:white;

    font-size:13px;

    font-weight:700;

    letter-spacing:.4px;

    padding:30px 5px;

    white-space:nowrap;

    transition:.35s ease;

}



/*==================================================
        LINEA ANIMADA MENU
==================================================*/

.desktop-menu a::after{

    content:"";

    position:absolute;

    bottom:18px;

    left:50%;

    width:0;

    height:3px;

    transform:translateX(-50%);

    border-radius:20px;

    background:

    linear-gradient(
        90deg,
        #0B3D91,
        #4DA3FF,
        #0B3D91
    );

    transition:.35s ease;

}



.desktop-menu a:hover{

    color:#4DA3FF;

    transform:translateY(-2px);

}



.desktop-menu a:hover::after{

    width:100%;

}



/*==================================================
        ZONA DERECHA
==================================================*/

.desktop-actions{

    display:flex;

    align-items:center;

    gap:45px;

    margin-left:auto;

    padding-right:10px;

    flex-shrink:0;

}



/*==================================================
        ICONOS REDES
==================================================*/

.desktop-social{

    display:flex;

    align-items:center;

    gap:18px;

}



.desktop-social a{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

    rgba(255,255,255,.10);

    color:white;

    font-size:15px;

    font-weight:700;

    transition:.35s ease;

}



.desktop-social a:hover{

    background:#0B3D91;

    color:#4DA3FF;

    transform:translateY(-3px);

}



/*==================================================
        BOTON LIVE
==================================================*/

.desktop-live{

    margin-left:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    background:#FF3131;

    color:white;

    padding:7px 13px;

    border-radius:20px;

    font-size:12px;

    font-weight:800;

    white-space:nowrap;

    box-shadow:

    0 0 12px rgba(255,49,49,.35);

}



/*==================================================
        PUNTO LIVE
==================================================*/

.live-dot{

    width:8px;

    height:8px;

    background:white;

    border-radius:50%;

    animation:pulse-live 1.2s infinite;

}



@keyframes pulse-live{


    0%{

        transform:scale(1);

        opacity:1;

    }


    50%{

        transform:scale(1.35);

        opacity:.5;

    }


    100%{

        transform:scale(1);

        opacity:1;

    }

}



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

@media(max-width:1200px){


.desktop-logo{

    width:85px;

}



.desktop-logo img{

    width:70px;

}



.desktop-menu a{

    font-size:11px;

}



.desktop-actions{

    gap:30px;

}



.desktop-social{

    gap:10px;

}



.desktop-social a{

    width:27px;

    height:27px;

    font-size:13px;

}



.desktop-live{

    margin-left:15px;

    padding:6px 11px;

    font-size:11px;

}


}



/*==================================================
        PANTALLAS GRANDES
==================================================*/

@media(min-width:1600px){


.desktop-header-container{

    padding:0 35px;

}



.desktop-menu a{

    font-size:14px;

}



.desktop-actions{

    gap:55px;

}


}