/* =========================================================
   VÉRTICE — MOBILE MENU
   ========================================================= */


/* =========================================================
   OVERLAY
   ========================================================= */

.mobile-overlay {

    position: fixed;
    inset: 0;

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

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.35s ease;

    z-index: 998;

}

.mobile-overlay.active {

    opacity: 1;
    visibility: visible;

}


/* =========================================================
   HAMBURGER BUTTON
   ========================================================= */

.menu-toggle {

    display: none;

    width: 40px;
    height: 28px;

    position: relative;

    border: none;
    background: none;

    cursor: pointer;

    color: #C6A86B;

}


/* =========================================================
   HAMBURGER LINES
   ========================================================= */

.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {

    content: "";

    position: absolute;

    left: 0;

    width: 100%;
    height: 2px;

    background: #C6A86B;

    transition: all 0.35s ease;

}

.menu-toggle span {

    top: 50%;
    transform: translateY(-50%);

}

.menu-toggle::before {

    top: 0;

}

.menu-toggle::after {

    bottom: 0;

}


/* =========================================================
   ANIMAÇÃO X
   ========================================================= */

.menu-toggle.active span {

    opacity: 0;

}

.menu-toggle.active::before {

    transform: rotate(45deg);
    top: 50%;

}

.menu-toggle.active::after {

    transform: rotate(-45deg);
    bottom: 50%;

}


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

@media (max-width:1024px) {

    .container-header {

        flex-direction: column;
        align-items: center;

    }

    .menu-toggle {

        display: block;

        margin-top: 8px;
        margin-bottom: 8px;

    }

}


/* =========================================================
   MOBILE NAV PANEL
   ========================================================= */

@media (max-width:1024px) {

    .main-nav {

        position: fixed;

        top: 0;
        right: 0;

        width: 78%;
        max-width: 320px;

        height: 100vh;

        /* COR AZUL DO SITE */
        background: linear-gradient(
            180deg,
            #031f2c 0%,
            #052c3d 100%
        );

        transform: translateX(100%);

        transition: transform 0.4s cubic-bezier(.77,0,.18,1);

        z-index: 999;

        padding-top: 120px;

        /* SOMBRA ELEGANTE */
        box-shadow:
            -15px 0 40px rgba(0,0,0,0.35),
            inset 1px 0 0 rgba(255,255,255,0.05);

    }

    .main-nav.mobile-open {

        transform: translateX(0);

    }

    .nav-list {

        flex-direction: column;

        gap: 24px;

        padding-left: 32px;

    }

}


/* =========================================================
   LINKS DO MENU MOBILE — DOURADO INSTITUCIONAL
   ========================================================= */

.main-nav .nav-link{

    color:#C6A86B;

    font-size:18px;

    letter-spacing:1px;

    transition:all 0.25s ease;

}

.main-nav .nav-link:hover{

    color:#E5C98B;

    transform:translateX(4px);

}


/* =========================================================
   BODY LOCK
   ========================================================= */

body.menu-open {

    overflow: hidden;

}


/* =========================================================
   CORREÇÃO FINAL DO MENU HAMBURGUER — VÉRTICE
   ========================================================= */

.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after{
    background:#C6A86B !important;
}


/* =========================================================
   CENTRALIZA APENAS NO MOBILE
   ========================================================= */

@media (max-width:1024px){

    .menu-toggle{

        display:block;

        margin-left:auto;
        margin-right:auto;

    }

}