/*==================================
        NAVBAR CSS GENERAL
==================================*/


/*==================================
            GENERAL
==================================*/
nav{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 8%;

    background:rgba(255,255,255,.80);

    backdrop-filter:blur(16px);

    border-bottom:2px solid rgba(0,102,255,.12);

    box-shadow:0 8px 30px rgba(0,0,0,.06);

    z-index:1000;

}

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

.logo{

    display:flex;

    align-items:center;

}

.logo a{

    display:flex;

    align-items:center;

}

.logo img{

    height:200px;

    width:auto;

    display:block;

    transition:.3s;

}

.logo img:hover{

    transform:scale(1.03);

}

/*==================================
         PARTE DERECHA
==================================*/

.nav-derecha{

    display:flex;

    align-items:center;

}

/*==================================
             MENÚ
==================================*/

.nav-derecha ul{

    display:flex;

    align-items:center;

    gap:40px;

    list-style:none;

    margin:0;

    padding:0;

}

.nav-derecha ul li{

    margin:0;

    padding:0;

}

.nav-derecha ul li a{

    display:block;

    text-decoration:none;

    font-family:"Poppins",sans-serif;

    font-size:17px;

    font-weight:500;

    color:var(--texto);

    transition:.25s;

}

.nav-derecha ul li a:hover{

    color:var(--principal);

}

.nav-derecha ul li a.activo{

    color:var(--principal);

    font-weight:700;

}