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

.header{

    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    color:#fff;

}

/*====================================
            TOP BAR
====================================*/

.top-bar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:25px 60px;

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

}

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

.menu-btn{

    display:flex;
    align-items:center;
    gap:12px;

    font-family:'Inter',sans-serif;
    font-size:15px;
    font-weight:500;

    cursor:pointer;

}

.menu-btn span{

    letter-spacing:.5px;

}

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

.logo-area{

    display:flex;
    align-items:center;
    gap:35px;

}

.year{

    font-family:'Inter',sans-serif;
    letter-spacing:10px;
    font-size:15px;
    font-weight:500;

}

.logo{

    width:85px;
    height:85px;

    border:2px solid #fff;
    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#fff;
    text-decoration:none;

    font-family:'Playfair Display',serif;
    font-size:30px;
    font-weight:700;

    transition:.35s;

}

.logo:hover{

    background:#fff;
    color:#111;

}

/*====================================
            ESTRELLAS
====================================*/

.stars{

    font-size:18px;
    letter-spacing:6px;
    color:#fff;

}

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

.booking{

    color:#fff;
    text-decoration:none;

    font-family:'Inter',sans-serif;
    font-size:16px;
    font-weight:600;

    transition:.35s;

}

.booking:hover{

    opacity:.7;

}

/*====================================
            NAVBAR
====================================*/

.navbar{

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

}

.menu{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:55px;

    list-style:none;

    padding:22px 0;

}

.menu li{

    list-style:none;

}

.menu li a{

    color:#fff;
    text-decoration:none;

    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:600;

    letter-spacing:2px;
    text-transform:uppercase;

    position:relative;

    transition:.35s;

}

/* Línea inferior */

.menu li a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-12px;

    width:0;
    height:2px;

    background:#fff;

    transition:.35s;

}

.menu li a:hover::after{

    width:100%;

}

.menu li a:hover{

    opacity:.8;

}


/*====================================
        BOTÓN FIGMA
====================================*/

.btn-figma{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border:1.8px solid #B58B45;

    border-radius:50px;

    background:transparent;

    color:#FFFFFF;

    text-decoration:none;

    font-family:'Inter',sans-serif;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

    transition:.35s ease;

}

.btn-figma:hover{

    background:#B58B45;

    color:#FFFFFF;

    box-shadow:0 8px 18px rgba(181,139,69,.35);

    transform:translateY(-2px);

}

.btn-figma:active{

    transform:scale(.96);

}

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


.menu-btn{

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:15px;

}



.side-menu{

    position:fixed;

    top:0;

    left:-350px;

    width:320px;

    height:100vh;

    background:#111;

    padding:40px;

    z-index:2000;

    transition:.4s ease;

}



.side-menu.active{

    left:0;

}



.side-menu h2{

    color:#d4af37;

    font-family:"Playfair Display",serif;

    font-size:35px;

    text-align:center;

    margin-bottom:50px;

}



.side-menu ul{

    list-style:none;

    padding:0;

}



.side-menu ul li{

    margin:25px 0;

}



.side-menu ul li a{

    color:#fff;

    text-decoration:none;

    font-size:16px;

    letter-spacing:2px;

    transition:.3s;

}



.side-menu ul li a:hover{

    color:#d4af37;

    padding-left:10px;

}



/* BOTON CERRAR */


.close-menu{

    position:absolute;

    top:20px;

    right:25px;

    color:#fff;

    font-size:25px;

    cursor:pointer;

}



/* FONDO OSCURO */


.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    z-index:1500;

    opacity:0;

    visibility:hidden;

    transition:.3s;

}



.menu-overlay.active{

    opacity:1;

    visibility:visible;

}