.elementor-3387 .elementor-element.elementor-element-2f7e7fb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-3387 .elementor-element.elementor-element-2f7e7fb{--content-width:1700px;}}/* Start custom CSS for html, class: .elementor-element-852ef1a *//* =========================================================
   =========================================================
               HEADER MARÚ — CSS COMPLETO
   =========================================================

   ✓ DESKTOP RESPONSIVO AO ZOOM
   ✓ NÃO VAZA EM TELAS MUITO LARGAS
   ✓ LOGO CENTRALIZADA
   ✓ BURGER ACOMPANHA O CONTAINER
   ✓ TABLET PRESERVADO
   ✓ MOBILE PRESERVADO

========================================================= */


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

.maru-header {

    position: fixed !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    z-index: 9998;

    background: transparent !important;
    background-color: transparent !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

    transition:
        background-color .35s ease,
        box-shadow .35s ease !important;
}


/* =========================================================
   CONTAINER INTERNO
========================================================= */

.maru-header-inner {

    /*
       =====================================================
       >>> RESPONSIVIDADE DO DESKTOP <<<

       width: 92%
       cria margem proporcional.

       max-width: 1500px
       impede o conteúdo de continuar abrindo
       indefinidamente quando diminuir o zoom.

       Assim temos:

       TELA NORMAL → 92%
       TELA GRANDE → cresce
       ZOOM REDUZIDO → trava em 1500px
       =====================================================
    */

    width: 92% !important;

    max-width: 1500px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;


    /* >>> ALTURA HEADER <<< */

    min-height: 130px;


    /* =====================================================
       IMPORTANTE

       Não usamos padding lateral aqui porque
       a própria largura de 92% controla a margem.
    ====================================================== */

    padding: 14px 0 6px !important;

    box-sizing: border-box;

    transition:
        min-height .35s ease,
        padding .35s ease !important;
}


/* =========================================================
   HEADER AO ROLAR
========================================================= */

.maru-header.is-scrolled {

    background: #5f4b40 !important;
    background-color: #5f4b40 !important;

    box-shadow:
        0 4px 18px rgba(0,0,0,.10) !important;
}


/* =========================================================
   HEADER INTERNO AO ROLAR
========================================================= */

.maru-header.is-scrolled
.maru-header-inner {

    min-height: 90px;

    padding: 10px 0 !important;
}


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

.maru-header-logo-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none !important;

    /* >>> POSIÇÃO VERTICAL <<< */

    transform: translateY(12px);

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;

    outline: none !important;

    box-shadow: none !important;
}


/* =========================================================
   LOGO AO ROLAR
========================================================= */

.maru-header.is-scrolled
.maru-header-logo-link {

    transform: translateY(2px);
}


/* =========================================================
   REMOVE HOVER DA LOGO
========================================================= */

.maru-header-logo-link:hover,
.maru-header-logo-link:focus,
.maru-header-logo-link:active {

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;

    outline: none !important;

    box-shadow: none !important;
}


/* =========================================================
   TAMANHO LOGO DESKTOP
========================================================= */

.maru-header-logo {

    display: block;

    width: 125px;

    max-width: 100%;

    height: auto;

    margin: 0 !important;

    padding: 0 !important;

    transition:
        width .35s ease !important;
}


/* =========================================================
   LOGO AO ROLAR
========================================================= */

.maru-header.is-scrolled
.maru-header-logo {

    width: 110px;
}


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

.maru-menu-toggle {

    position: absolute !important;


    /* =====================================================
       >>> POSIÇÃO HORIZONTAL <<<

       IMPORTANTE:

       Agora ele está dentro do container de 92%.

       Por isso usamos left: 0.

       Ele acompanha a borda do container e NÃO
       continua se afastando quando o zoom diminui.
    ====================================================== */

    left: 0 !important;


    top: 50% !important;


    /* >>> POSIÇÃO VERTICAL <<< */

    transform:
        translateY(calc(-50% + 12px)) !important;


    width: 42px !important;
    height: 42px !important;

    min-width: 42px !important;
    min-height: 42px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;
    border-radius: 0 !important;

    outline: none !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    /* >>> DISTÂNCIA ENTRE LINHAS <<< */

    gap: 5px !important;

    cursor: pointer;

    z-index: 20;

    -webkit-tap-highlight-color:
        transparent !important;
}


/* =========================================================
   LINHAS DO BURGER
========================================================= */

.maru-burger-line {

    display: block !important;

    /* >>> LARGURA <<< */

    width: 26px !important;

    /* >>> ESPESSURA <<< */

    height: 2px !important;

    /* >>> COR <<< */

    background: #faf8eb !important;
    background-color: #faf8eb !important;

    border-radius: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    flex-shrink: 0 !important;
}


/* =========================================================
   BURGER AO ROLAR
========================================================= */

.maru-header.is-scrolled
.maru-menu-toggle {

    transform:
        translateY(calc(-50% + 2px)) !important;
}


/* =========================================================
   REMOVE HOVER ROXO / LILÁS
========================================================= */

.maru-menu-toggle:hover,
.maru-menu-toggle:focus,
.maru-menu-toggle:active,
.maru-menu-toggle:focus-visible {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: none !important;

    outline: none !important;

    box-shadow: none !important;

    transform:
        translateY(calc(-50% + 12px)) !important;
}


/* =========================================================
   LINHAS NO HOVER
========================================================= */

.maru-menu-toggle:hover
.maru-burger-line,

.maru-menu-toggle:focus
.maru-burger-line,

.maru-menu-toggle:active
.maru-burger-line {

    background: #faf8eb !important;
    background-color: #faf8eb !important;
}


/* =========================================================
   HOVER AO ROLAR
========================================================= */

.maru-header.is-scrolled
.maru-menu-toggle:hover,

.maru-header.is-scrolled
.maru-menu-toggle:focus,

.maru-header.is-scrolled
.maru-menu-toggle:active {

    transform:
        translateY(calc(-50% + 2px)) !important;
}


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

.maru-menu-overlay {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

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

    z-index: 9999;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


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

.maru-menu-overlay.is-active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


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

.maru-side-menu {

    position: fixed;

    top: 0;
    left: 0;

    /* >>> LARGURA DESKTOP <<< */

    width: 340px;

    max-width: 90vw;

    height: 100vh;

    background: #faf8eb !important;
    background-color: #faf8eb !important;

    z-index: 10000;

    transform:
        translateX(-100%);

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

    box-sizing: border-box;

    /* >>> ESPAÇAMENTO INTERNO <<< */

    padding:
        60px
        24px
        40px;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
}


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

.maru-side-menu.is-open {

    transform:
        translateX(0);
}


/* =========================================================
   =========================================================
                       BOTÃO X
   =========================================================
========================================================= */

.maru-menu-close {

    position: absolute;

    top: 8px;
    right: 12px;

    width: 35px !important;
    height: 35px !important;

    min-width: 35px !important;
    min-height: 35px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: none !important;

    outline: none !important;

    background: transparent !important;
    background-color: transparent !important;

    box-shadow: none !important;

    color: #5f4b40 !important;

    font-family:
        Arial,
        sans-serif !important;

    /* >>> TAMANHO DO X <<< */

    font-size: 32px !important;

    font-weight: 300 !important;

    line-height: 1 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent !important;
}


/* =========================================================
   HOVER DO X
========================================================= */

.maru-menu-close:hover,
.maru-menu-close:focus,
.maru-menu-close:active {

    background: transparent !important;
    background-color: transparent !important;

    color: #5f4b40 !important;

    border: none !important;

    outline: none !important;

    box-shadow: none !important;
}


/* =========================================================
   =========================================================
                     LINKS DO MENU
   =========================================================
========================================================= */

.maru-side-menu-nav {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    /* >>> DISTÂNCIA ENTRE LINKS <<< */

    gap: 25px;

    margin: 0;

    padding: 0;
}


/* =========================================================
   LINKS
========================================================= */

.maru-side-menu-nav a,
.maru-side-menu-nav a:visited {

    font-family:
        "MEKONA",
        serif !important;

    /* >>> TAMANHO DESKTOP <<< */

    font-size: 19px !important;

    line-height: 1.08 !important;

    font-weight: 400 !important;

    color: #5f4b40 !important;

    text-decoration: none !important;

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;

    box-shadow: none !important;

    padding: 0 !important;

    margin: 0 !important;

    transition:
        opacity .25s ease,
        transform .25s ease;
}


/* =========================================================
   HOVER LINKS
========================================================= */

.maru-side-menu-nav a:hover,
.maru-side-menu-nav a:focus,
.maru-side-menu-nav a:active {

    font-family:
        "MEKONA",
        serif !important;

    color: #5f4b40 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: none !important;

    outline: none !important;

    box-shadow: none !important;

    opacity: .60;

    transform:
        translateX(4px);
}


/* =========================================================
   BLOQUEIA SCROLL
========================================================= */

body.maru-menu-open {

    overflow: hidden !important;
}


/* =========================================================
   =========================================================
                    DESKTOP GRANDE
                       1440+
   =========================================================

   IMPORTANTE:

   O CONTAINER CONTINUA FLUIDO,
   MAS PARA EM 1500PX.

========================================================= */

@media (min-width: 1440px) {

    .maru-header-inner {

        width: 92% !important;

        max-width: 1500px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* >>> LOGO DESKTOP GRANDE <<< */

    .maru-header-logo {

        width: 130px;
    }


    /* >>> LOGO AO ROLAR <<< */

    .maru-header.is-scrolled
    .maru-header-logo {

        width: 115px;
    }


    /* =====================================================
       BURGER

       FICA PRESO NA BORDA DO CONTAINER.
       NÃO USA MAIS 4% DA VIEWPORT.
    ====================================================== */

    .maru-menu-toggle {

        left: 0 !important;
    }


    .maru-burger-line {

        width: 26px !important;
    }

}


/* =========================================================
   =========================================================
                        TABLET
                   768PX — 1024PX

   >>> PRESERVADO <<<

========================================================= */

@media (max-width: 1024px) and (min-width: 768px) {

    .maru-header-inner {

        /*
           Volta para 100% porque este era
           o comportamento original do tablet.
        */

        width: 100% !important;

        max-width: 1200px !important;

        min-height: 115px;

        padding:
            12px
            25px
            6px !important;
    }


    .maru-header.is-scrolled
    .maru-header-inner {

        min-height: 82px;

        padding:
            9px
            25px
            9px !important;
    }


    .maru-header-logo {

        width: 115px;
    }


    .maru-header.is-scrolled
    .maru-header-logo {

        width: 100px;
    }


    .maru-header-logo-link {

        transform:
            translateY(10px);
    }


    .maru-header.is-scrolled
    .maru-header-logo-link {

        transform:
            translateY(2px);
    }


    .maru-menu-toggle {

        left: 24px !important;

        transform:
            translateY(calc(-50% + 10px)) !important;
    }


    .maru-header.is-scrolled
    .maru-menu-toggle {

        transform:
            translateY(calc(-50% + 2px)) !important;
    }


    .maru-menu-toggle:hover,
    .maru-menu-toggle:focus,
    .maru-menu-toggle:active {

        transform:
            translateY(calc(-50% + 10px)) !important;
    }


    .maru-header.is-scrolled
    .maru-menu-toggle:hover,

    .maru-header.is-scrolled
    .maru-menu-toggle:focus,

    .maru-header.is-scrolled
    .maru-menu-toggle:active {

        transform:
            translateY(calc(-50% + 2px)) !important;
    }


    .maru-burger-line {

        width: 26px !important;

        height: 2px !important;
    }


    .maru-side-menu {

        width: 330px;
    }


    .maru-side-menu-nav a {

        font-size: 18px !important;
    }

}


/* =========================================================
   =========================================================
                        MOBILE
                      ATÉ 767PX

   >>> PRESERVADO <<<
   >>> NÃO MEXI <<<
========================================================= */

@media (max-width: 767px) {

    .maru-header-inner {

        width: 100% !important;

        max-width: none !important;

        min-height: 100px;

        padding:
            14px
            20px
            6px !important;
    }


    .maru-header.is-scrolled
    .maru-header-inner {

        min-height: 76px;

        padding:
            10px
            20px
            10px !important;
    }


    /* >>> LOGO MOBILE <<< */

    .maru-header-logo {

        width: 109px;
    }


    /* >>> LOGO AO ROLAR <<< */

    .maru-header.is-scrolled
    .maru-header-logo {

        width: 99px;
    }


    /* >>> POSIÇÃO LOGO <<< */

    .maru-header-logo-link {

        transform:
            translateY(12px);
    }


    .maru-header.is-scrolled
    .maru-header-logo-link {

        transform:
            translateY(4px);
    }


    /* >>> BURGER MOBILE <<< */

    .maru-menu-toggle {

        left: 21px !important;

        transform:
            translateY(calc(-50% + 12px)) !important;
    }


    .maru-header.is-scrolled
    .maru-menu-toggle {

        transform:
            translateY(calc(-50% + 4px)) !important;
    }


    .maru-menu-toggle:hover,
    .maru-menu-toggle:focus,
    .maru-menu-toggle:active {

        transform:
            translateY(calc(-50% + 12px)) !important;
    }


    .maru-header.is-scrolled
    .maru-menu-toggle:hover,

    .maru-header.is-scrolled
    .maru-menu-toggle:focus,

    .maru-header.is-scrolled
    .maru-menu-toggle:active {

        transform:
            translateY(calc(-50% + 4px)) !important;
    }


    .maru-burger-line {

        width: 26px !important;

        height: 2px !important;
    }


    /* >>> MENU LATERAL MOBILE <<< */

    .maru-side-menu {

        width: 82vw;

        max-width: 340px;

        padding:
            60px
            24px
            40px;
    }


    .maru-side-menu-nav {

        gap: 25px;
    }


    .maru-side-menu-nav a {

        font-family:
            "MEKONA",
            serif !important;

        font-size: 18px !important;
    }

}


/* =========================================================
   CELULAR PEQUENO — ATÉ 420PX
========================================================= */

@media (max-width: 420px) {

    .maru-header-logo {

        width: 109px;
    }


    .maru-header.is-scrolled
    .maru-header-logo {

        width: 99px;
    }


    .maru-menu-toggle {

        left: 21px !important;
    }


    .maru-burger-line {

        width: 26px !important;

        height: 2px !important;
    }


    .maru-side-menu {

        width: 86vw;

        max-width: 320px;
    }


    .maru-side-menu-nav a {

        font-size: 17px !important;
    }

}


/* =========================================================
   CELULAR MUITO PEQUENO — ATÉ 360PX
========================================================= */

@media (max-width: 360px) {

    .maru-header-inner {

        min-height: 96px;
    }


    .maru-header-logo {

        width: 109px;
    }


    .maru-header.is-scrolled
    .maru-header-logo {

        width: 99px;
    }


    .maru-menu-toggle {

        left: 18px !important;
    }


    .maru-burger-line {

        width: 26px !important;

        height: 2px !important;
    }


    .maru-side-menu {

        width: 88vw;

        padding-left: 20px;

        padding-right: 20px;
    }


    .maru-side-menu-nav a {

        font-size: 16px !important;
    }

}/* End custom CSS */