/* ========== RESET ========== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:system-ui,'Segoe UI',sans-serif;
    background:#f0f2f5;
}

/* ========== NAVBAR ========== */
.navbar{
    position:sticky;
    top:0;
    width:100%;
    z-index:1000;

    background:#000;

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

    padding:18px 25px;

    min-height:70px;

    box-shadow:0 2px 10px rgba(0,0,0,0.15);
}

/* ========== LOGO ========== */
.logo{
    color:#fff;
    text-decoration:none;

    font-size:1.5rem;
    font-weight:700;

    z-index:1200;
}

/* ========== BOTON HAMBURGUESA ========== */
.hamburger{
    display:none;

    position:absolute;
    top:22px;
    right:25px;

    width:32px;
    height:24px;

    background:transparent;
    border:none;

    cursor:pointer;

    flex-direction:column;
    justify-content:space-between;

    z-index:1200;
}

.hamburger span{
    width:100%;
    height:3px;

    background:#fff;

    border-radius:10px;

    transition:0.3s;
}

/* ========== MENU DESKTOP ========== */
.nav-menu{
    display:flex;
    align-items:center;
    gap:30px;
}

.nav-menu a{
    color:#fff;
    text-decoration:none;

    font-size:1rem;
    font-weight:500;

    transition:0.3s;
}

.nav-menu a:hover{
    color:#ff7b2c;
}

/* BOTON X */
.close-menu{
    display:none;
}

/* OVERLAY */
.menu-overlay{
    display:none;
}

/* ================================================= */
/* ================== MOBILE ======================= */
/* ================================================= */

@media(max-width:768px){

    .navbar{
        padding:18px 20px;
    }

    /* MOSTRAR HAMBURGUESA */
    .hamburger{
        display:flex;
    }

    /* MENU LATERAL */
    .nav-menu{
        position:fixed;

        top:0;
        right:-100%;

        width:80%;
        max-width:320px;
        height:100vh;

        background:#111;

        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;

        padding:90px 30px;

        gap:25px;

        transition:0.35s ease;

        z-index:1100;
    }

    .nav-menu.active{
        right:0;
    }

    /* LINKS MOBILE */
    .nav-menu a{
        width:100%;

        font-size:1.2rem;

        padding-bottom:12px;

        border-bottom:1px solid rgba(255,255,255,0.1);
    }

    /* BOTON CERRAR */
    .close-menu{
        display:block;

        position:absolute;
        top:18px;
        right:20px;

        background:none;
        border:none;

        color:#fff;

        font-size:2rem;

        cursor:pointer;
    }

    /* OVERLAY */
    .menu-overlay{
        display:block;

        position:fixed;
        top:0;
        left:0;

        width:100%;
        height:100vh;

        background:rgba(0,0,0,0.5);

        opacity:0;
        visibility:hidden;

        transition:0.3s;

        z-index:1050;
    }

    .menu-overlay.active{
        opacity:1;
        visibility:visible;
    }
}
/* OCULTAR HAMBURGUESA CUANDO EL MENU ESTA ABIERTO */
.nav-menu.active ~ .hamburger{
    opacity:0;
    pointer-events:none;
}
/* HAMBURGUESA OCULTA */
.hamburger.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}