*{
font-family: "Poppins", sans-serif;
}

body{
min-height:100vh;
overflow-x:hidden;
}

/*=========================
BOTÓN HAMBURGUESA
=========================*/

.menu-btn{
    position: fixed;
    top: 25px;
    right: 25px;

    width: 58px;
    height: 58px;

    border: none;
    border-radius: 10px;

    background: #171b35;
    color: white;
    font-size: 24px;

    cursor: pointer;

    z-index: 1001;

    transition: opacity .3s ease,
                transform .3s ease,
                visibility .3s ease,
                background .3s ease;
}

.menu-btn:hover{
/*background:#26294b;*/
}
.menu-btn img {
    width: 20px;
}

.menu-btn.hidden{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(.8);
    transition: all .3s ease;
}
/*=========================
OVERLAY
=========================*/

.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
opacity:0;
visibility:hidden;
transition:.35s;
z-index:998;
}

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

.menu{
position:fixed;
top:0;
right:0;
width:300px;
max-width:100%;
height:100vh;
background:#171b35;
padding:25px 20px;
display:flex;
flex-direction:column;
transform:translateX(100%);
transition:.45s ease;
z-index:999;
}
.close-btn img {
    width: 15px;
    margin-top: 0;
}

/* abierto */

.menu.active{
transform:translateX(0);
}

.overlay.active{
opacity:1;
visibility:visible;
}

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

.menu-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:35px;
}

.close-btn{
width:58px;
height:58px;
border:none;
border-radius:15px;
background:#171b35;
color:white;
font-size:28px;
cursor:pointer;

}

.logo{
height:60px;
}

/*=========================
MENU ITEMS
=========================*/

nav{
display:flex;
flex-direction:column;
gap:5px;
}

nav a{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
color:white;
background:#1a1e3c;
padding:12px;
border-radius:10px;
font-size:0.9rem;
transition:.25s;
}

nav a:hover{

background:#2f3360;

/*transform:translateX(-1px);*/

}

nav i{
width:25px;
text-align:center;
}

.menu nav a img {
    width: 17px;
    margin-left: 15px;
}

.menu-cta {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: 14px;
    padding: 0 18px;
    border-radius: 11px;
    background: #b2cb15;
    color: #171b35;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 12px 24px rgba(178, 203, 21, 0.18);
    transition: transform .25s ease, background .25s ease;
}

.menu-cta:hover {
    background: #c3dc22;
    transform: translateY(-1px);
}

.menu-cta span {
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 800;
    color: #171b35;
}

.menu-cta img {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
}
 
/*=========================
SOCIALES
=========================*/

.social {
margin-top:auto;
display:flex;
justify-content:center;
align-items:center;
width:100%;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.16);
gap:34px;
}

.social a{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
color:white;
transition:.25s;
}

.social img {
    width:28px;
    height:28px;
    margin:0;
    object-fit:contain;
}

.social a:hover{
transform:scale(1.05);
opacity:.85;
}

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

@media(max-width:768px){

.menu{
width:70%;
}

nav a{
font-size:18px;
padding:18px;
}

.logo{
height:50px;
}

}

@media(max-width:480px){

.menu{
width:70%;
padding:20px;
}

.menu-btn{
top:18px;
right:18px;
width:52px;
height:52px;
}

.close-btn{
width:52px;
height:52px;
}

nav a{
font-size:17px;
}

.social a{
width:46px;
height:46px;
}

.social img{
width:23px;
height:23px;
}

}