.elementor-1564 .elementor-element.elementor-element-2ddfcab{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--border-radius:20px 20px 20px 20px;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:-0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-1564 .elementor-element.elementor-element-2ddfcab.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-1564 .elementor-element.elementor-element-93d0833{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1564 .elementor-element.elementor-element-93d0833.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1564 .elementor-element.elementor-element-7abc65d{width:var( --container-widget-width, 48% );max-width:48%;--container-widget-width:48%;--container-widget-flex-grow:0;text-align:left;}.elementor-1564 .elementor-element.elementor-element-7abc65d.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}.elementor-1564 .elementor-element.elementor-element-53c38be{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;}.elementor-1564 .elementor-element.elementor-element-53c38be.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1564 .elementor-element.elementor-element-acc11d2{--display:flex;--min-height:0px;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-1564 .elementor-element.elementor-element-acc11d2.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1564 .elementor-element.elementor-element-a88c019{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:45px 45px;--row-gap:45px;--column-gap:45px;}.elementor-1564 .elementor-element.elementor-element-a88c019.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1564 .elementor-element.elementor-element-2f58913{column-gap:0px;text-align:center;font-size:16px;color:#000000;}.elementor-1564 .elementor-element.elementor-element-2f58913 p{margin-bottom:0px;}.elementor-1564 .elementor-element.elementor-element-2f58913 a{color:var( --e-global-color-primary );}.elementor-1564 .elementor-element.elementor-element-4a1d941.elementor-element{--align-self:center;}.elementor-1564 .elementor-element.elementor-element-4a1d941{text-align:center;font-size:16px;color:#000000;}.elementor-1564 .elementor-element.elementor-element-4a1d941 p{margin-bottom:0px;}.elementor-1564 .elementor-element.elementor-element-4a1d941 a{color:var( --e-global-color-primary );}.elementor-1564 .elementor-element.elementor-element-d80d03c.elementor-element{--align-self:center;}.elementor-1564 .elementor-element.elementor-element-d80d03c{text-align:center;font-size:16px;color:#000000;}.elementor-1564 .elementor-element.elementor-element-d80d03c p{margin-bottom:0px;}.elementor-1564 .elementor-element.elementor-element-d80d03c a{color:var( --e-global-color-primary );}.elementor-1564 .elementor-element.elementor-element-3b5c62a.elementor-element{--align-self:center;}.elementor-1564 .elementor-element.elementor-element-3b5c62a{font-size:16px;color:#000000;}.elementor-1564 .elementor-element.elementor-element-3b5c62a p{margin-bottom:0px;}.elementor-1564 .elementor-element.elementor-element-3b5c62a a{color:var( --e-global-color-primary );}.elementor-1564 .elementor-element.elementor-element-008bbb0{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--border-radius:23px 23px 23px 23px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:30px;--padding-top:05px;--padding-bottom:5px;--padding-left:22px;--padding-right:22px;}.elementor-1564 .elementor-element.elementor-element-008bbb0:not(.elementor-motion-effects-element-type-background), .elementor-1564 .elementor-element.elementor-element-008bbb0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ab63baa );}.elementor-1564 .elementor-element.elementor-element-008bbb0.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-1564 .elementor-element.elementor-element-fe3c932{width:var( --container-widget-width, 117.817% );max-width:117.817%;--container-widget-width:117.817%;--container-widget-flex-grow:0;text-align:center;font-size:16px;color:var( --e-global-color-accent );}.elementor-1564 .elementor-element.elementor-element-fe3c932 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1564 .elementor-element.elementor-element-fe3c932.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-1564 .elementor-element.elementor-element-fe3c932 p{margin-bottom:0px;}@media(min-width:768px){.elementor-1564 .elementor-element.elementor-element-93d0833{--width:41.428%;}.elementor-1564 .elementor-element.elementor-element-53c38be{--width:56.371%;}.elementor-1564 .elementor-element.elementor-element-acc11d2{--width:80.491%;}.elementor-1564 .elementor-element.elementor-element-a88c019{--width:101.381%;}.elementor-1564 .elementor-element.elementor-element-008bbb0{--width:19.064%;}}@media(max-width:767px){.elementor-1564 .elementor-element.elementor-element-2ddfcab{--width:500px;--min-height:0px;}.elementor-1564 .elementor-element.elementor-element-2ddfcab.e-con{--align-self:center;}.elementor-1564 .elementor-element.elementor-element-93d0833{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1564 .elementor-element.elementor-element-53c38be{--min-height:0px;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:10px 10px;--row-gap:10px;--column-gap:10px;}}/* Start custom CSS for container, class: .elementor-element-53c38be *//* =========================================================
   UNION - ESCONDER MENU DESKTOP NO MOBILE
========================================================= */

@media (max-width: 767px) {

    /* Esconde toda a navegação da versão desktop */
    .menu-union-desktop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Esconde o botão Atendimento da versão desktop */
    .btn-cabecalho {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Mantém o menu mobile disponível */
    .union-mobile-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-53c38be *//* =====================================
   MENU UNION DESKTOP
===================================== */

.menu-union-desktop {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 55px;
}


/* Todos os itens do menu */
.menu-union-desktop .elementor-widget-text-editor {
    margin: 0 !important;
    display: flex;
    align-items: center;
}


/* Corrigir alinhamento do Atendimento */
.menu-union-desktop .elementor-widget-text-editor:last-child {
    padding: 0 !important;
}


/* Texto dos links */
.menu-union-desktop a {
    display: flex;
    align-items: center;
    line-height: 1;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2ddfcab */<!-- =========================================================
     MENU MOBILE UNION
========================================================= -->

<div class="union-mobile-menu">

    <!-- BOTÃO HAMBÚRGUER -->
    <button
        class="union-menu-toggle"
        type="button"
        aria-label="Abrir menu"
        aria-expanded="false"
    >
        <span></span>
        <span></span>
        <span></span>
    </button>


    <!-- FUNDO ESCURO OVERLAY -->
    <div class="union-menu-overlay"></div>


    <!-- PAINEL DO MENU -->
    <nav class="union-menu-panel">

        <div class="union-menu-top">

            <span class="union-menu-title">
                Menu
            </span>

            <button
                class="union-menu-close"
                type="button"
                aria-label="Fechar menu"
            >
                ×
            </button>

        </div>


        <div class="union-menu-links">

            <!-- INÍCIO -->
            <a href="https://sistemasunion.com.br/homealk-pp/">
                <span>Início</span>
                <span class="union-arrow">→</span>
            </a>


            <!-- COMUNIDADE -->
            <a href="https://sistemasunion.com.br/comunidadealk/">
                <span>Comunidade</span>
                <span class="union-arrow">→</span>
            </a>


            <!-- PARCEIRO -->
            <a href="https://sistemasunion.com.br/seja-parceiro/">
                <span>Parceiro</span>
                <span class="union-arrow">→</span>
            </a>


            <!-- BLOG -->
            <a href="https://sistemasunion.com.br/pagina-de-blog/">
                <span>Blog</span>
                <span class="union-arrow">→</span>
            </a>

        </div>


        <div class="union-menu-footer">

            <a
                href="https://sistemasunion.com.br/homealk-pp/#solucoes"
                class="union-menu-cta"
            >
                Conheça nossas soluções
                <span>→</span>
            </a>

        </div>

    </nav>

</div>


<style>

/* =========================================================
   1. RESET E ESTILOS DESKTOP (PC)
========================================================= */

.union-mobile-menu,
.union-mobile-menu * {
    box-sizing: border-box;
}

/* Oculta no Desktop */
.union-mobile-menu {
    display: none !important;
}

/* =========================================================
   2. ESTILOS MOBILE (ATÉ 767px) - CORREÇÃO DE ALINHAMENTO
========================================================= */

@media (max-width: 767px) {

    /* Oculta menus nativos em lista do tema */
    .cabecalho-mobile-linha > ul,
    .cabecalho-mobile-linha .elementor-nav-menu,
    .elementor-widget-nav-menu {
        display: none !important;
    }

    /* Container Pai do Cabeçalho - Força Justificação Limpa */
    .cabecalho-vidro,
    .cabecalho-mobile-linha {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 65px !important;
        height: auto !important;
        padding: 0 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Ajuste da Logo (Cola na Esquerda) */
    .cabecalho-mobile-linha img,
    .cabecalho-mobile-linha svg,
    .cabecalho-mobile-linha .logo,
    .elementor-widget-image {
        display: block !important;
        height: 38px !important;
        max-height: 38px !important;
        width: auto !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    /* Widget e Container do Menu Mobile (Cola na Direita) */
    .union-mobile-menu,
    .elementor-widget-html {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        margin: 0 0 0 auto !important; /* Empurra o menu pra extrema direita */
        padding: 0 !important;
    }

    /* Botão Hambúrguer */
    .union-menu-toggle {
        appearance: none;
        -webkit-appearance: none;
        position: relative !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        border: 1px solid rgba(255,255,255,.16) !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,.07) !important;
        box-shadow: none !important;
        cursor: pointer !important;
        z-index: 10000002 !important;
    }

    .union-menu-toggle span {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        margin: 0 !important;
        border-radius: 20px !important;
        background: #ffffff !important;
        transition: transform .3s ease, opacity .2s ease !important;
    }

    /* Animação em X quando o menu está aberto */
    .union-mobile-menu.menu-open .union-menu-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .union-mobile-menu.menu-open .union-menu-toggle span:nth-child(2) {
        opacity: 0 !important;
    }

    .union-mobile-menu.menu-open .union-menu-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }

}


/* =========================================================
   3. ELEMENTOS INJETADOS NO BODY (PREVINE CORTE PELO TEMA)
========================================================= */

.union-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(1,13,33,.82) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 99999988 !important;
    transition: opacity .3s ease, visibility .3s ease !important;
}

.union-menu-overlay.menu-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.union-menu-panel {
    position: fixed !important;
    top: 70px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: calc(100vw - 24px) !important;
    max-width: 400px !important;
    max-height: calc(100vh - 85px) !important;
    padding: 18px !important;
    overflow-y: auto !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 20px !important;
    background: #04142e !important;
    background: linear-gradient(145deg, #04142e 0%, #061a3c 100%) !important;
    box-shadow: 0 25px 70px rgba(0,0,0,.6) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-12px) scale(.97) !important;
    transform-origin: top right !important;
    z-index: 99999999 !important;
    transition: opacity .28s ease, transform .28s ease, visibility .28s ease !important;
}

.union-menu-panel.menu-open {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

.union-menu-top {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 2px 2px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

.union-menu-title {
    color: rgba(255,255,255,.7) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
}

.union-menu-close {
    appearance: none !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.union-menu-links {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 0 !important;
}

.union-menu-links a {
    width: 100% !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    padding: 12px 4px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.union-arrow {
    color: #35d5e4 !important;
    font-size: 18px !important;
}

.union-menu-footer {
    width: 100% !important;
    padding-top: 13px !important;
}

.union-menu-cta {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 12px 15px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #20cddd, #2477ff) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

@media (max-width: 390px) {
    .union-menu-panel {
        top: 65px !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
        padding: 15px !important;
    }
}

</style>


<script>

(function() {

    function iniciarMenuUnion() {

        const menus = document.querySelectorAll(
            '.union-mobile-menu:not([data-menu-ready])'
        );

        menus.forEach(function(menu) {

            menu.setAttribute('data-menu-ready', 'true');

            const toggle = menu.querySelector('.union-menu-toggle');
            const close = menu.querySelector('.union-menu-close');
            const overlay = menu.querySelector('.union-menu-overlay');
            const panel = menu.querySelector('.union-menu-panel');

            /* Mover para o body evita que o container do header corte a gaveta */
            if (overlay && overlay.parentNode !== document.body) {
                document.body.appendChild(overlay);
            }
            if (panel && panel.parentNode !== document.body) {
                document.body.appendChild(panel);
            }

            const links = document.querySelectorAll('.union-menu-links a, .union-menu-cta');

            function abrirMenu() {
                menu.classList.add('menu-open');
                if (overlay) overlay.classList.add('menu-open');
                if (panel) panel.classList.add('menu-open');
                if (toggle) toggle.setAttribute('aria-expanded', 'true');
                document.documentElement.style.overflow = 'hidden';
                document.body.style.overflow = 'hidden';
            }

            function fecharMenu() {
                menu.classList.remove('menu-open');
                if (overlay) overlay.classList.remove('menu-open');
                if (panel) panel.classList.remove('menu-open');
                if (toggle) toggle.setAttribute('aria-expanded', 'false');
                document.documentElement.style.overflow = '';
                document.body.style.overflow = '';
            }

            if (toggle) {
                toggle.addEventListener('click', function(e) {
                    e.stopPropagation();
                    if (menu.classList.contains('menu-open')) {
                        fecharMenu();
                    } else {
                        abrirMenu();
                    }
                });
            }

            if (close) {
                close.addEventListener('click', function(e) {
                    e.stopPropagation();
                    fecharMenu();
                });
            }

            if (overlay) {
                overlay.addEventListener('click', function(e) {
                    e.stopPropagation();
                    fecharMenu();
                });
            }

            links.forEach(function(link) {
                link.addEventListener('click', fecharMenu);
            });

            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape') {
                    fecharMenu();
                }
            });

        });

    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', iniciarMenuUnion);
    } else {
        iniciarMenuUnion();
    }

    window.addEventListener('load', iniciarMenuUnion);
    setTimeout(iniciarMenuUnion, 500);

})();

</script>/* End custom CSS */