.elementor-357 .elementor-element.elementor-element-2c81951d{--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;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--z-index:100;}.elementor-357 .elementor-element.elementor-element-2c81951d:not(.elementor-motion-effects-element-type-background), .elementor-357 .elementor-element.elementor-element-2c81951d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0B493B;}.elementor-357 .elementor-element.elementor-element-2c81951d.e-con{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-357 .elementor-element.elementor-element-41a274ec{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;}.elementor-357 .elementor-element.elementor-element-41a274ec.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-357 .elementor-element.elementor-element-2778aca2{width:auto;max-width:auto;}.elementor-357 .elementor-element.elementor-element-2778aca2.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-menu-toggle{margin-left:auto;background-color:#83314000;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu .elementor-item{font-family:"Roboto", Sans-serif;font-size:25px;font-weight:600;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--main .elementor-item{color:#FFFFFF;fill:#FFFFFF;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--main .elementor-item:hover, .elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--main .elementor-item:focus{color:#FFFFFF;fill:#FFFFFF;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#EBC100;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--dropdown a, .elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-menu-toggle{color:#FFFFFF;fill:#FFFFFF;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--dropdown{background-color:#0B3B2D;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--dropdown a:hover, .elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--dropdown a:focus, .elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--dropdown a.highlighted, .elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-menu-toggle:hover, .elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-menu-toggle:focus{color:#0B3B2D;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--dropdown a:hover, .elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--dropdown a:focus, .elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--dropdown a.highlighted{background-color:#FFFFFF;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--dropdown a.elementor-item-active{color:#E5BD02;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--dropdown li:not(:last-child){border-style:solid;border-color:#8F8B7E;border-bottom-width:1px;}.elementor-357 .elementor-element.elementor-element-2778aca2 div.elementor-menu-toggle{color:#FFFFFF;}.elementor-357 .elementor-element.elementor-element-2778aca2 div.elementor-menu-toggle svg{fill:#FFFFFF;}.elementor-357 .elementor-element.elementor-element-2778aca2 div.elementor-menu-toggle:hover, .elementor-357 .elementor-element.elementor-element-2778aca2 div.elementor-menu-toggle:focus{color:#FFFFFF;}.elementor-357 .elementor-element.elementor-element-2778aca2 div.elementor-menu-toggle:hover svg, .elementor-357 .elementor-element.elementor-element-2778aca2 div.elementor-menu-toggle:focus svg{fill:#FFFFFF;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-357 .elementor-element.elementor-element-41390143 .elementor-button{background-color:#FFFFFF;font-family:"Inter", Sans-serif;font-size:16px;font-weight:500;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:-0.2px;word-spacing:0px;fill:#0B493B;color:#0B493B;border-style:solid;border-width:2px 2px 2px 2px;border-color:#000000;border-radius:60px 60px 60px 60px;}.elementor-357 .elementor-element.elementor-element-41390143 .elementor-button:hover, .elementor-357 .elementor-element.elementor-element-41390143 .elementor-button:focus{background-color:#72FF00;color:#000000;border-color:#000000;}.elementor-357 .elementor-element.elementor-element-41390143.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-357 .elementor-element.elementor-element-41390143 .elementor-button-content-wrapper{flex-direction:row;}.elementor-357 .elementor-element.elementor-element-41390143 .elementor-button .elementor-button-content-wrapper{gap:3px;}.elementor-357 .elementor-element.elementor-element-41390143 .elementor-button:hover svg, .elementor-357 .elementor-element.elementor-element-41390143 .elementor-button:focus svg{fill:#000000;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-357 .elementor-element.elementor-element-2c81951d{--justify-content:space-between;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:13px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-357 .elementor-element.elementor-element-2c81951d.e-con{--align-self:center;--flex-grow:0;--flex-shrink:1;}.elementor-357 .elementor-element.elementor-element-41a274ec{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-357 .elementor-element.elementor-element-2778aca2{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-357 .elementor-element.elementor-element-41390143 .elementor-button{font-size:14px;}}@media(max-width:767px){.elementor-357 .elementor-element.elementor-element-2c81951d{--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;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:8px;--padding-bottom:8px;--padding-left:14px;--padding-right:14px;}.elementor-357 .elementor-element.elementor-element-2c81951d.e-con{--align-self:center;}.elementor-357 .elementor-element.elementor-element-41a274ec{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;}.elementor-357 .elementor-element.elementor-element-41a274ec.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-357 .elementor-element.elementor-element-2778aca2{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--e-nav-menu-horizontal-menu-item-margin:calc( 76px / 2 );--nav-menu-icon-size:28px;}.elementor-357 .elementor-element.elementor-element-2778aca2.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu .elementor-item{font-size:20px;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:76px;}.elementor-357 .elementor-element.elementor-element-2778aca2 .elementor-menu-toggle{border-width:1px;}.elementor-357 .elementor-element.elementor-element-41390143{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0% 0% 0% 0%;}.elementor-357 .elementor-element.elementor-element-41390143.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-357 .elementor-element.elementor-element-41390143 .elementor-button{font-size:13px;border-width:0px 0px 0px 0px;padding:8px 13px 8px 13px;}}/* Start custom CSS for container, class: .elementor-element-2c81951d *//* ========================================================== CABEÇALHO STICKY — HOTEL BOUTIQUE ========================================================== ESTE CSS CONTROLA: 1. Fundo do cabeçalho depois do scroll 2. Troca da logo depois do scroll 3. Tamanho da logo 4. Botão "Reservar" 5. Botão hambúrguer 6. Menu DESKTOP depois do scroll 7. Transições IMPORTANTE: - Mobile e tablet continuam com as cores configuradas diretamente no Elementor. - A mudança de cor dos textos do menu pelo CSS ocorre SOMENTE NO DESKTOP e SOMENTE DEPOIS DO SCROLL. ========================================================== */ /* ========================================================== 1. CABEÇALHO — DEPOIS DO SCROLL ========================================================== ALTERE AQUI: background-color = cor do fundo depois do scroll ========================================================== */ #header.elementor-sticky--effects { background-color: #F4EEE4; box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); transition: background-color .5s ease, box-shadow .5s ease; } /* ========================================================== 2. LOGO — DEPOIS DO SCROLL ========================================================== ALTERE AQUI: Troque apenas a URL para usar outra logo depois do scroll. ========================================================== */ #header.elementor-sticky--effects .logo img { content: url('https://site.naestadia.com/wp-content/uploads/2026/09/ChatGPT-Image-18-de-set.-de-2026-18_57_57-1-1.png'); } /* ========================================================== 3. TAMANHO DA LOGO — ANTES DO SCROLL ========================================================== ALTERE AQUI: 200px = tamanho normal da logo. ========================================================== */ .logo img { max-width: 200px; width: 100%; height: auto; transition: max-width .5s ease, opacity .5s ease; } /* ========================================================== 4. TAMANHO DA LOGO — DEPOIS DO SCROLL ========================================================== OPCIONAL: 200px = mantém o mesmo tamanho 180px = diminui um pouco 160px = diminui mais Para diminuir a logo durante o scroll, altere somente o valor abaixo. ========================================================== */ #header.elementor-sticky--effects .logo img { max-width: 200px; height: auto; } /* ========================================================== 5. BOTÃO "RESERVAR" — DEPOIS DO SCROLL ========================================================== ALTERE AQUI: background-color = fundo do botão color = cor do texto border-color = cor da borda ========================================================== */ #header.elementor-sticky--effects .elementor-button { background-color: #0B493B !important; color: #FFFFFF !important; border-color: #0B493B !important; transition: background-color .3s ease, color .3s ease, border-color .3s ease; } /* ========================================================== 6. BOTÃO "RESERVAR" — HOVER ========================================================== ALTERE AQUI: Cor exibida quando o mouse passa sobre o botão depois do scroll. ========================================================== */ #header.elementor-sticky--effects .elementor-button:hover { background-color: #08372D !important; color: #FFFFFF !important; border-color: #08372D !important; } /* ========================================================== 7. BOTÃO HAMBÚRGUER — DEPOIS DO SCROLL ========================================================== ALTERE AQUI: #0B493B = cor do botão/ícone depois do scroll. Esta configuração NÃO altera os textos do menu mobile. ========================================================== */ #header.elementor-sticky--effects .elementor-menu-toggle { color: #0B493B !important; border-color: #0B493B !important; transition: color .4s ease, border-color .4s ease; } /* ========================================================== 8. ÍCONE SVG DO HAMBÚRGUER ========================================================== */ #header.elementor-sticky--effects .elementor-menu-toggle svg { fill: #0B493B !important; color: #0B493B !important; transition: fill .4s ease, color .4s ease; } /* ========================================================== 9. OUTRAS VERSÕES DO BOTÃO HAMBÚRGUER ========================================================== Algumas versões do Elementor utilizam ou em vez de SVG. ========================================================== */ #header.elementor-sticky--effects .elementor-menu-toggle i, #header.elementor-sticky--effects .elementor-menu-toggle span { color: #0B493B !important; } /* ========================================================== 10. MENU DESKTOP — DEPOIS DO SCROLL ========================================================== ATENÇÃO: Esta seção funciona SOMENTE em telas de 1025px ou maiores. Portanto: - NÃO interfere no celular - NÃO interfere no tablet - NÃO interfere no menu hambúrguer ========================================================== */ @media (min-width: 1025px) { /* ------------------------------------------------------ COR DOS ITENS NORMAIS DO MENU ALTERE AQUI: #0B493B = cor dos textos depois do scroll ------------------------------------------------------ */ #header.elementor-sticky--effects .roblox li a { color: #0B493B !important; transition: color .3s ease; } /* ------------------------------------------------------ ITEM ATIVO DO MENU Exemplo: Se estiver na página "Quartos", Quartos permanece preto. ALTERE AQUI: #000000 = cor do item ativo ------------------------------------------------------ */ #header.elementor-sticky--effects .roblox li.current-menu-item > a, #header.elementor-sticky--effects .roblox li.current_page_item > a, #header.elementor-sticky--effects .roblox a.elementor-item-active { color: #0B493B !important; } /* ------------------------------------------------------ HOVER DO MENU DEPOIS DO SCROLL Quando passar o mouse sobre um item. Atualmente está preto. ALTERE #000000 se quiser outra cor. ------------------------------------------------------ */ #header.elementor-sticky--effects .roblox li a:hover { color: #000000 !important; } } /* ========================================================== 11. TRANSIÇÃO GERAL DO CABEÇALHO ========================================================== */ #header { transition: background-color .5s ease, box-shadow .5s ease; } /* ========================================================== RESUMO DAS CORES ========================================================== FUNDO STICKY: #F4EEE4 VERDE PRINCIPAL: #0B493B VERDE HOVER BOTÃO: #08372D BRANCO: #FFFFFF PRETO / ITEM ATIVO: #000000 MENU MOBILE/TABLET: As cores dos textos continuam sendo controladas diretamente pelo Elementor. MENU DESKTOP ANTES DO SCROLL: Controlado pelo Elementor. MENU DESKTOP DEPOIS DO SCROLL: Normal = #0B493B Ativo = #000000 Hover = #000000 ========================================================== */ /* ========================================================== ORGANIZAÇÃO DO CABEÇALHO — SOMENTE MOBILE Desktop NÃO é alterado. Mobile: LOGO | RESERVAR | MENU ========================================================== */ @media (max-width: 767px) { #header { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 5px !important; padding: 8px 10px !important; } /* Ordem explícita pelas classes/tipos dos widgets */ #header > .logo { order: 1 !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } #header > .elementor-widget-button { order: 2 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; } #header > .elementor-widget-nav-menu { order: 3 !important; flex: 0 0 44px !important; width: 44px !important; margin: 0 !important; } /* Logo maior */ #header .logo img { display: block !important; width: 100% !important; max-width: 190px !important; height: auto !important; } /* Reservar menor e elegante */ #header .elementor-widget-button .elementor-button { font-size: 13px !important; line-height: 1 !important; padding: 8px 13px !important; white-space: nowrap !important; } /* Hambúrguer menor */ #header .elementor-menu-toggle { width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 6px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } #header .elementor-menu-toggle svg { width: 28px !important; height: 28px !important; } } /* Celulares muito estreitos */ @media (max-width: 360px) { #header .logo img { max-width: 165px !important; } #header .elementor-widget-button .elementor-button { font-size: 12px !important; padding: 7px 10px !important; } #header > .elementor-widget-nav-menu, #header .elementor-menu-toggle { width: 40px !important; min-width: 40px !important; flex-basis: 40px !important; height: 40px !important; } #header .elementor-menu-toggle svg { width: 25px !important; height: 25px !important; } } /* AJUSTE FINAL MOBILE - ESPAÇAMENTO E ALINHAMENTO */ @media (max-width: 767px) { #header { justify-content: space-between !important; align-items: center !important; gap: 10px !important; padding-left: 14px !important; padding-right: 14px !important; } /* Logo aproveita melhor o espaço */ #header > .logo { flex: 1 1 auto !important; max-width: 55% !important; } #header .logo img { max-width: 205px !important; width: 100% !important; } /* Botão mais próximo da logo */ #header > .elementor-widget-button { margin-left: auto !important; margin-right: 4px !important; transform: translateX(-4px); } #header .elementor-widget-button .elementor-button { padding: 8px 14px !important; font-size: 13px !important; } /* Menu mantém alinhado no canto */ #header > .elementor-widget-nav-menu { width: 42px !important; flex-basis: 42px !important; } #header .elementor-menu-toggle { width: 42px !important; height: 42px !important; } #header .elementor-menu-toggle svg { width: 26px !important; height: 26px !important; } }/* End custom CSS */