/*=========================================================
PROYECTO : CAMPUS VIRTUAL ESCUELA DE OFICIOS

ARCHIVO : menu.css

VERSIÓN : 0.1
=========================================================*/


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

#menu-principal{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#FFFFFF;

    box-shadow:0 3px 18px rgba(0,0,0,.06);

    z-index:9999;

}


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

.menu-contenedor{

    width:92%;

    max-width:1450px;

    margin:auto;

    height:85px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


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

.logo img{

    height:62px;

    transition:.35s;

}

.logo img:hover{

    transform:scale(1.05);

}


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

.menu{

    display:flex;

    align-items:center;

    gap:35px;

}

.menu li{

    list-style:none;

}

.menu a{

    color:#0A4F9E;

    font-size:17px;

    font-weight:600;

    transition:.30s;

}

.menu a:hover{

    color:#6DBE45;

}

Continua 

/*=========================================================
BOTÓN INGRESAR
=========================================================*/

.btn-campus{

    background:#0A4F9E;

    color:white;

    padding:15px 32px;

    border-radius:40px;

    font-weight:bold;

    transition:.35s;

}

.btn-campus:hover{

    background:#6DBE45;

    transform:translateY(-3px);

}


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

.menu-mobile{

    display:none;

}

#btn-menu{

    background:none;

    border:none;

    font-size:34px;

    color:#0A4F9E;

    cursor:pointer;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1100px){

.menu{

    gap:22px;

}

.menu a{

    font-size:15px;

}

.logo img{

    height:55px;

}

}


@media(max-width:900px){

.menu{

    display:none;

}

.menu-mobile{

    display:block;

}

.menu-boton{

    display:none;

}

.menu-contenedor{

    height:75px;

}

}


@media(max-width:600px){

.logo img{

    height:48px;

}

#btn-menu{

    font-size:30px;

}

}


/*=========================================================
EFECTO SCROLL
=========================================================*/

.menu-scroll{

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

    backdrop-filter:blur(10px);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}


/*=========================================================
LINK ACTIVO
=========================================================*/

.menu a.activo{

    color:#6DBE45;

    position:relative;

}

.menu a.activo::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    background:#6DBE45;

    border-radius:20px;

}


/*=========================================================
ANIMACIÓN DEL MENÚ
=========================================================*/

#menu-principal{

    transition:.35s ease;

}