/** * OX — Correções de layout * * Sucede o ox-mobile-fixes-v2.css, renomeado quando passou a ter regras que * valem em todas as larguras (o bloco do header fixo, no fim do arquivo). * * v9 — 2026-08-19 — fundo transparente no seletor de idioma */ /* ------------------------------------------------------------------ * * Mobile — até 767px, onde o header troca para a versão empilhada * (hambúrguer visível, seletor de idioma fora da linha do logo). * ------------------------------------------------------------------ */ @media (max-width: 767px) { /* * 1. Botão de acessibilidade (Readabler) * * O plugin fixa o botão em top:0/right:0 com margin:35px, o que o coloca * exatamente sobre o hambúrguer (x 312–340 contra x 320–357 no iPhone 14). * Como ele carrega z-index 99998 e o hambúrguer não tem z-index, o toque * no menu era capturado pelo botão de acessibilidade. * * Passa para o canto inferior direito, acima do WhatsApp. */ .mdp-readabler-trigger-button-box.top-right { top: auto !important; left: auto !important; right: 16px !important; bottom: calc( 72px + env( safe-area-inset-bottom, 0px ) ) !important; margin: 0 !important; } /* * 2. Botão flutuante do WhatsApp * * Estava encostado na borda inferior da viewport (bottom = 844 numa tela de * 844), onde a barra do navegador e a safe area do iPhone cortam o ícone. * * O seletor é estrutural de propósito. Cada página tem seu próprio widget * com ID diferente — `40313baa` na home, `1ed0d16` em Eventos Corporativos * e assim por diante —, porque o botão foi duplicado em vez de virar um * elemento global. Casar por "widget de imagem, fixo, com uma imagem de * WhatsApp dentro" alcança todas as páginas, inclusive as que vierem. * * Depende de `:has()`. Se o navegador não suportar, a regra inteira é * ignorada e o botão volta à posição original — degrada sem quebrar. * * `width:auto` faz o container fixo encolher até o ícone, para que o * afastamento de 16px valha para o que se vê e não para uma caixa mais * larga que ele. `transform:none` remove o deslocamento que o Elementor * aplica junto com o posicionamento fixo. */ .elementor-widget-image.elementor-fixed:has( img[ src*="whatsapp" ] ) { top: auto !important; left: auto !important; right: 16px !important; bottom: calc( 16px + env( safe-area-inset-bottom, 0px ) ) !important; width: auto !important; transform: none !important; z-index: 99997 !important; } /* * O ícone é dimensionado por porcentagem do container (max-width:60%). Com o * container encolhido isso viraria uma referência circular, então a medida * passa a ser absoluta: 44px, o alvo de toque mínimo da WCAG 2.5.8. */ .elementor-widget-image.elementor-fixed:has( img[ src*="whatsapp" ] ) img { width: 44px !important; max-width: none !important; height: auto !important; } /* * 3. Seletor de idioma (shortcode GTranslate) * * As bandeiras ficavam centralizadas e abaixo do logo. Sobem para o canto * superior esquerdo, acima dele. * * O container do header (`.e-con-inner`) é flex com `wrap`, e o Elementor * já entrega este widget com `order:99999` — é isso que o empurrava para a * segunda linha. Com `order:-1` ele passa a ser o primeiro item; como * 160px (bandeiras) + 302px (logo) não cabem nos 355px da linha, o logo e * o hambúrguer descem juntos para a linha de baixo. * * `margin-right:auto` vence o `justify-content:center` do container sem * precisar mexer nele, que também abriga o botão "Falar com especialista" * no desktop. * * Sem margem inferior de propósito: a altura do header é dirigida pelo * conteúdo, então os 8px de respiro no topo saem de graça — o header fica * em 118px, 4px menor do que era antes desta correção. */ /* * São dois IDs porque o header foi duplicado em vez de virar template do * Theme Builder: `9ed8bdd` na home e em Eventos Corporativos, `2c73d02` * nas outras 9 páginas. Mesmo widget, mesmo lugar, IDs diferentes. */ .elementor-element-9ed8bdd, .elementor-element-2c73d02 { order: -1 !important; align-self: flex-start !important; margin: 8px auto 0 0 !important; } /* * 4. Respiro do rodapé * * O rodapé e todos os seus containers vêm com `padding: 0`, então os 27 * textos das colunas encostavam em x=0 — o olho bate na borda da tela * antes de bater no texto. * * O padding vai no próprio rodapé, e não nos containers internos, porque * ele fica dentro do fundo: o teal continua sangrando de ponta a ponta e * só o conteúdo recua. * * O recuo é nos dois lados de propósito, embora só a esquerda estivesse * colada: os links ocupam a linha inteira, então sem o lado direito o * texto que quebrasse em duas linhas passaria a encostar do outro lado. */ .elementor-element-9e51414 { padding: 40px 24px 0 !important; } /* * 5. Espaçamento das colunas do rodapé * * O Elementor distribui o "Space Between" da lista em duas metades — 6,5px * de `padding-bottom` no item mais 6,5px de `margin-top` no seguinte, 13px * ao todo. Reduzir só o padding deixaria o espaçamento assimétrico, então * as duas metades caem juntas: 13px entre itens viram 6,5px. * * Isso aperta um alvo de toque que já era pequeno — os links têm 20px de * altura, abaixo dos 24px mínimos da WCAG 2.5.8, e agora ficam a 7px um do * outro. Foi uma escolha deliberada de composição, registrada aqui para * quem for mexer depois. */ .elementor-element-9e51414 .elementor-icon-list-item { padding-bottom: 3.25px !important; margin-top: 3.25px !important; } /* * 6. Ícones sociais afastados da borda * * Alinhados à direita, terminavam nos mesmos 24px do recuo do conteúdo — * e caíam bem na coluna dos botões flutuantes (acessibilidade e WhatsApp, * ambos em `right:16px`). Os 24px extras tiram os ícones dessa faixa. * * A regra é só no widget, não no wrapper interno: aplicar nos dois soma * 48px e joga os ícones para o meio da tela. */ .elementor-element-9e51414 .elementor-widget-social-icons { padding-right: 24px !important; } /* * 7. Alinhamento do rodapé à esquerda * * Os containers do rodapé são flex row com `wrap`. No mobile cada bloco * cai numa linha própria, e aí o alinhamento herdado do desktop passa a * centralizar cada um sozinho na sua linha: `space-around` nas colunas e * `center` no bloco do logo. O resultado era conteúdo começando em x=73 * em vez de acompanhar a margem de 24px. * * Trocar por `flex-start` resolve o alinhamento; a largura em 100% faz o * bloco ocupar a linha inteira em vez dos 229px herdados da coluna de * desktop — sem isso o e-mail de contato (251px) transbordaria da própria * caixa, e o parágrafo de abertura quebraria em 4 linhas onde cabem 3. * * Efeito colateral aceito: o logo do rodapé deixa de ser centralizado e * passa a nascer na mesma vertical do resto. */ .elementor-element-120b59d6 > .e-con-inner, .elementor-element-5a41d961 > .e-con-inner { justify-content: flex-start !important; } .elementor-element-120b59d6 > .e-con-inner > .e-con, .elementor-element-1dfacd9 { width: 100% !important; } } /* ------------------------------------------------------------------ * * Seletor de idioma — todas as larguras * ------------------------------------------------------------------ */ /* * Fundo transparente no widget do GTranslate * * O widget carrega `background-color: #FFFFFF` gravado no Elementor em 12 * lugares (as 11 páginas e o template global). Sobre um header branco isso * passava despercebido; em páginas de header escuro, como a Curadoria, as * bandeiras aparecem dentro de uma faixa branca de 160px. * * O branco está no `.elementor-widget-container`, não no `gtranslate_wrapper` * — que já é transparente. Por isso a regra que existe no CSS do tema não * resolvia: ela mira o wrapper e, ainda por cima, cita a classe * `gt_container-pbzcmy`, que é o hash de uma instância só (o GTranslate gera * um hash diferente por página: `-41kyxy`, `-kj4wk2`, `--840nml`…). * * Seletor estrutural pelo mesmo motivo do botão do WhatsApp: o widget tem ID * próprio em cada página (`9ed8bdd`, `2c73d02`, e o que vier). As três linhas * cobrem os três níveis onde um fundo pode aparecer. */ .elementor-widget-shortcode:has( .gtranslate_wrapper ) > .elementor-widget-container, .elementor-widget-shortcode:has( .gtranslate_wrapper ) .gtranslate_wrapper, .elementor-widget-shortcode:has( .gtranslate_wrapper ) [ class*="gt_container-" ] { background-color: transparent !important; background-image: none !important; } /* ------------------------------------------------------------------ * * Header fixo — todas as larguras * ------------------------------------------------------------------ */ /* * 4. Largura do header fixo * * O sticky do Elementor escreve a largura inline em pixels * (`style="position:fixed; width:375px"`), calculada em JS. O valor depende * de um recálculo disparar a cada mudança de viewport; `width:100%` resolve * contra a viewport a cada frame e não depende de JS nenhum. */ .elementor-element-26c9e413 { width: 100% !important; max-width: 100% !important; left: 0 !important; right: auto !important; transition: box-shadow .28s cubic-bezier( .16, 1, .3, 1 ) !important; } /* * 5. Profundidade do header fixo * * Três camadas: um contato de 1px que faz as vezes de fio separador, uma * média que dá o descolamento e uma ambiente larga e rasa. Todas com * deslocamento vertical — sombra sem offset é halo, não profundidade. * * O tom não é preto: rgba(2,43,54) é o teal da marca levado ao escuro, que * sobre o branco do header lê como sombra e não como sujeira cinza. * * A classe vem do ox-header-sticky.js. O Elementor mantém * `elementor-sticky--effects` no header desde o topo da página, então não há * classe nativa que diga "o usuário rolou" — sem o JS a sombra apareceria já * no topo, flutuando sobre o hero. */ .elementor-element-26c9e413.ox-header-rolado { box-shadow: 0 1px 2px rgba( 2, 43, 54, .07 ), 0 4px 10px -2px rgba( 2, 43, 54, .10 ), 0 14px 28px -10px rgba( 2, 43, 54, .12 ) !important; } @media ( prefers-reduced-motion: reduce ) { .elementor-element-26c9e413 { transition: none !important; } } /* ------------------------------------------------------------------ * * Botão do menu (hambúrguer) — estados * ------------------------------------------------------------------ */ /* * 6. O roxo no hover e no foco * * O Elementor pinta o toggle com `color: var(--e-global-color-332724a)` em * `:hover` e `:focus`. Essa variável é a global "Button Hover" do kit * Trexplore (#7000F7), definida no `body` pelo elementor-kit-55900 e usada em * 16 posts publicados para hover de botão — trocá-la no kit repintaria o site * inteiro. * * Redefinir a variável no próprio botão alcança só o hambúrguer: não mexe em * especificidade, não duplica a regra do Elementor e deixa a global intacta * para todo o resto. */ .elementor-menu-toggle { --e-global-color-332724a: #0097b2; } /* * 7. O foco que fica preso no toque * * Em touch o `:focus` permanece no botão depois do tap, e como a regra do * Elementor é `:hover, :focus`, o recolor valia durante todo o tempo com o * menu aberto — inclusive no X de fechar. * * `:focus:not(:focus-visible)` isola exatamente esse caso: devolve a cor * normal no toque e preserva o destaque para mouse (`:hover`) e teclado * (`:focus-visible`). * * Os valores abaixo são as duas cores normais em uso: o teal dos headers do * Theme Builder e da home, e o azul das 10 páginas que trazem o header * dentro da própria página. Se alguma delas mudar de cor no Elementor, este * bloco precisa acompanhar. */ .elementor-menu-toggle:focus:not( :focus-visible ) { --e-global-color-332724a: #64c4c4; } .elementor-element-d0cc57f .elementor-menu-toggle:focus:not( :focus-visible ), .elementor-57193 .elementor-menu-toggle:focus:not( :focus-visible ) { --e-global-color-332724a: #365ff9; } /* ------------------------------------------------------------------ * * Formulário "Falar com o time" (home) — todas as larguras * ------------------------------------------------------------------ */ /* * 8. Largura do botão de envio * * O grupo do submit já é `elementor-col-100` e ocupa a linha inteira do * formulário (1190px em 1440). Quem não acompanhava era o `