/**
 * 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
 * v10 — 2026-08-20 — sombra do header fixo mais presente
 * v11 — 2026-08-20 — sombra estendida aos outros dois ids de header sticky
 * v12 — 2026-08-21 — botões escurecem no hover em vez de subir 8px
 * v13 — 2026-08-21 — mãozinha nos controles que a normalize do tema não alcança
 * v14 — 2026-08-21 — a mãozinha alcança também os interruptores do Readabler
 * v15 — 2026-08-21 — uma seta só no item "Soluções", em vez de duas
 * v16 — 2026-08-21 — dropdown com largura pelo conteúdo e 35px nos itens
 */

/* ------------------------------------------------------------------ *
 * 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;
}

/*
 * 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.
 *
 * São três ids porque o header é um bloco colado dentro de cada página, não
 * um template do Theme Builder: `26c9e413` na home e em /eventos-corporativos/,
 * `85050b0` em sete páginas e `750aeb7` em /nossa-historia/ e /contato/. Os
 * três são sticky. A regra 4 (largura) continua só no 26c9e413 de propósito —
 * os outros dois têm enquadramento próprio e forçar largura mudaria o layout.
 */
.elementor-element-26c9e413,
.elementor-element-85050b0,
.elementor-element-750aeb7 {
	transition: box-shadow .28s cubic-bezier( .16, 1, .3, 1 ) !important;
}

.elementor-element-26c9e413.ox-header-rolado,
.elementor-element-85050b0.ox-header-rolado,
.elementor-element-750aeb7.ox-header-rolado {
	box-shadow:
		0 1px 2px rgba( 2, 43, 54, .10 ),
		0 6px 14px -2px rgba( 2, 43, 54, .16 ),
		0 18px 36px -12px rgba( 2, 43, 54, .20 ) !important;
}

@media ( prefers-reduced-motion: reduce ) {

	.elementor-element-26c9e413,
	.elementor-element-85050b0,
	.elementor-element-750aeb7 {
		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ários — botão de envio
 * ------------------------------------------------------------------ */

/*
 * 8. O botão de envio acompanha a largura do grupo
 *
 * O grupo do submit já é `elementor-col-100` e ocupa a linha inteira do
 * formulário (1190px numa viewport de 1440). Quem não acompanhava era o
 * `<button>`: como item de um flex com `justify-content: center` e
 * `flex: 0 1 auto`, ele encolhia até o texto — 233px perdidos no meio de uma
 * linha de 1190.
 *
 * Valia para todos os formulários do site, não só o da home: as 9 páginas
 * internas repetem o mesmo widget (`667c1c9`), a home tem o `5f1d0f8` e
 * /eventos-corporativos/ o `0275a33`. Por isso a regra é estrutural — pega
 * `.elementor-form` e alcança o formulário que for criado depois, em vez de
 * listar ids que teriam de ser mantidos um a um.
 *
 * Sucede a regra que existia só para o `5f1d0f8`, agora coberta por esta.
 *
 * O corte em 768px é a fronteira do mobile no Elementor, e existe porque o
 * problema não existe lá embaixo: em 390px o grupo tem 285px e o conteúdo do
 * botão já preenche 273 — medido com e sem a regra, dá o mesmo número. Do
 * tablet para cima a sobra é gritante (233px de botão em 911px de grupo a
 * 1024, em 1190 a 1440), e é onde o botão passa a acompanhar a grade dos
 * campos.
 */
@media (min-width: 768px) {

	.elementor-form .elementor-field-type-submit .elementor-button {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * Botões — resposta ao ponteiro, em todas as larguras
 * ------------------------------------------------------------------ */

/*
 * 9. O deslocamento de 8px sai de cena
 *
 * Todo botão do site carrega a animação `float` do Elementor, que aplica
 * `transform: translateY(-8px)` em `:hover`, `:focus` e `:active`. Foi
 * conferido nas 7 páginas principais: as únicas classes
 * `elementor-animation-*` do HTML renderizado estão em `.elementor-button`,
 * e todas são `float` — nenhuma imagem ou card usa animação.
 *
 * O deslocamento é caro em dois sentidos. Ele mexe no layout percebido: o
 * botão sai do lugar onde o olho o fixou e, em botões colados no rodapé de
 * um card, entra na linha do texto de cima. E é um sinal ambíguo — subir
 * pode ler como "flutuou" ou como "vai abrir algo", enquanto escurecer é o
 * vocabulário universal de "estou sob o cursor".
 *
 * A neutralização vale só para `.elementor-button`: se algum dia um widget
 * de imagem receber `float` no painel, ele continua funcionando. E não
 * precisa de `!important` — `.elementor-button.elementor-animation-float`
 * tem especificidade 0,3,0 contra os 0,2,0 da regra do Elementor, então
 * vence independentemente da ordem em que o LiteSpeed empilhar os arquivos.
 */
.elementor-button.elementor-animation-float:hover,
.elementor-button.elementor-animation-float:focus,
.elementor-button.elementor-animation-float:active {
	transform: none;
}

/*
 * 10. O escurecimento entra no lugar
 *
 * O escuro é uma camada preta transparente sobre o fundo do botão, não uma
 * cor nova. Isso é deliberado: os botões daqui não têm um fundo só. Há
 * sólidos (`#0097B2`, `#25D366`, `#B8935A`), um degradê
 * (`linear-gradient(120deg, #0097B2, #272B69)`), botões de vidro
 * (`--e-global-color-accent`, que é `#FFFFFF2B` — branco a 17%) e botões
 * fantasma, só com borda. Uma lista de cores escuras equivalentes seria
 * uma tabela de 8 entradas para manter à mão a cada botão novo; a camada
 * escurece o que estiver lá embaixo, inclusive o que ainda não existe.
 *
 * Por que um pseudo-elemento e não `filter: brightness()`:
 *
 * - `filter` escurece o botão inteiro, texto e ícone junto. O branco do
 *   rótulo viraria cinza no hover — perda de contraste justo no momento em
 *   que o usuário está lendo o botão.
 * - `filter` não faz nada em fundo transparente. Os botões fantasma dos
 *   heros ficariam sem resposta nenhuma.
 * - `box-shadow: inset` resolveria os dois, mas sete botões do site já têm
 *   `box-shadow` próprio (o halo de `0 0 10px` em branco ou na cor da
 *   marca). Escrever a camada em `box-shadow` apagaria esse halo.
 *
 * A camada fica presa ao padding box, então a borda do botão não é
 * escurecida — é ela que mantém a silhueta legível nos botões fantasma.
 * `border-radius: inherit` acompanha as pílulas de 38px e os cantos de
 * 10px do kit sem precisar saber qual é qual.
 */
.elementor-button {
	position: relative;
}

.elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease-out;
}

/*
 * O conteúdo sobe para cima da camada.
 *
 * Sem isto o `::after` cobriria o rótulo: pseudo-elemento posicionado pinta
 * na camada dos posicionados, acima do texto inline, e o resultado seria o
 * mesmo escurecimento de letra que o `filter` traria.
 *
 * O seletor é `> *` porque a marcação do botão varia conforme a origem: o
 * widget de botão entrega `.elementor-button-content-wrapper`, o botão de
 * formulário entrega um `<span>` sem classe, e versões antigas entregam
 * `.elementor-button-text` solto.
 */
.elementor-button > * {
	position: relative;
	z-index: 1;
}

/*
 * 11. Quando a camada aparece
 *
 * `@media (hover: hover)` isola o hover para quem tem ponteiro. Em touch o
 * `:hover` gruda no elemento depois do tap e só sai no toque seguinte — o
 * botão ficaria escuro até o usuário tocar em outro lugar. É a mesma
 * armadilha que o bloco 7 trata no hambúrguer.
 *
 * No toque quem responde é `:active`, que dura só o tempo do dedo na tela e
 * por isso vem mais forte: 20% contra os 12% do hover. Isso também dá ao
 * mouse a diferença entre "sob o cursor" e "clicando".
 *
 * `:focus-visible` cobre o teclado sem reagir ao clique do mouse, que é o
 * que o `:focus` puro faria.
 */
@media (hover: hover) {

	.elementor-button:hover::after {
		opacity: .12;
	}
}

.elementor-button:focus-visible::after {
	opacity: .12;
}

.elementor-button:active::after {
	opacity: .2;
}

@media (prefers-reduced-motion: reduce) {

	.elementor-button::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * Cursor — o que é clicável se comporta como clicável
 * ------------------------------------------------------------------ */

/*
 * 12. A mãozinha que o site nunca teve
 *
 * `<a href>` ganha `cursor: pointer` do navegador, mas `<button>` e `<select>`
 * não — a folha de estilo padrão dá `default` aos dois. Quem conserta isso na
 * maioria dos sites é a normalize do tema, e o OceanWP tem a regra:
 * `button, input[type=button], input[type=reset], input[type=submit]
 * { cursor: pointer }`, mais `select { cursor: pointer }`.
 *
 * Só que ela nunca chega aqui. O `oceanwp/assets/css/style.min.css` **não é
 * enfileirado em nenhuma página do site** — as 11 páginas são canvas do
 * Elementor, que dispensam header, footer e a folha principal do tema. O que
 * carrega do OceanWP é só `a11y.min.css`, os ícones e o `style.css` do child.
 * Foi conferido no DOM: nenhuma regra de autor declara `cursor` para o botão
 * de envio, para o `<select>` ou para o item de menu — o valor vem inteiro da
 * folha padrão do navegador.
 *
 * Na prática, o que ficava sem mãozinha:
 *
 * | elemento                              | cursor |
 * |---------------------------------------|--------|
 * | `<button>` de envio dos formulários   | default |
 * | `<select>` dos formulários            | default |
 * | botão de acessibilidade (Readabler)   | default |
 * | item de menu "Soluções" (abre submenu)| auto    |
 * | seta do submenu (`.sub-arrow`)        | auto    |
 *
 * A correção é a normalize que faltava, não uma lista de botões: assim vale
 * para o botão que for criado amanhã, e para os `<button>` que plugins
 * injetam sem passar pelo Elementor — as setas do carrossel de depoimentos e
 * os controles do painel do Readabler entram por aqui.
 *
 * Sem `!important` de propósito: como nada declara `cursor` hoje, uma regra
 * de autor já vence a folha padrão. `!important` aqui só atrapalharia quem
 * precisasse de `wait` ou `progress` durante um envio.
 */
.elementor-button,
button,
select,
summary,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"] {
	cursor: pointer;
}

/*
 * O menu principal, que é o caso que não se resolve por tag.
 *
 * O item "Soluções" abre um submenu em vez de navegar, então o Elementor o
 * entrega como `<a>` **sem `href`** — e `<a>` sem `href` não é link para o
 * navegador, é texto. A seta ao lado é um `<span>` que o SmartMenus injeta e
 * que responde ao clique no mobile.
 *
 * A regra pega o menu inteiro em vez de só o `.has-submenu`: dentro de uma
 * lista de navegação, tudo que tem rótulo é para ser clicado.
 */
.elementor-nav-menu a,
.elementor-nav-menu .sub-arrow {
	cursor: pointer;
}

/*
 * O `<label>` que embrulha um interruptor.
 *
 * O painel do Readabler tem 6 chaves ligadas por `<label class="mdp-switch">`
 * com o `<input type="checkbox">` dentro — sem `for`, então não há como pegar
 * por atributo. Clicar no rótulo alterna a opção, mas o cursor dizia que ali
 * não havia nada. Justamente no painel de acessibilidade, onde a clareza do
 * alvo importa mais.
 *
 * O `:has()` é limitado a caixas de marcação de propósito. `label:has(input)`
 * alcançaria também o rótulo de um campo de texto, onde a mãozinha estaria
 * errada — ali o certo é o cursor de texto. Se o navegador não suportar
 * `:has()`, a regra é ignorada e volta ao que era: degrada sem quebrar, como
 * no bloco 2 (WhatsApp) e no do fundo do seletor de idioma.
 */
label:has( > input[type="checkbox"] ),
label:has( > input[type="radio"] ) {
	cursor: pointer;
}

/*
 * 13. Desabilitado não recebe mãozinha
 *
 * A regra acima é por tag, então alcançaria também um controle desabilitado —
 * e aí o cursor prometeria um clique que não vai acontecer. `default` devolve
 * o comportamento da folha padrão sem inventar sinal novo.
 *
 * Hoje não há nenhum controle desabilitado no site; isto é rede para quando
 * um formulário travar o botão durante o envio.
 */
[disabled],
[aria-disabled="true"] {
	cursor: default;
}

/* ------------------------------------------------------------------ *
 * Menu principal — todas as larguras
 * ------------------------------------------------------------------ */

/*
 * 14. A seta duplicada do item "Soluções"
 *
 * O HTML que o servidor entrega traz **uma** seta por item de menu — o
 * `<span class="sub-arrow">` com o SVG do caret que o Elementor renderiza a
 * partir do indicador de submenu configurado no widget. Conferido no HTML
 * cru: dois `sub-arrow` na página inteira, um para cada um dos dois headers.
 *
 * A segunda aparece só depois que o JS roda. O SmartMenus, que é a biblioteca
 * de menu do Elementor, está com `subIndicators` ligado e anexa a **sua
 * própria** seta ao item que tem submenu. Como o Elementor já tinha posto a
 * dele no HTML, o que se vê no navegador é `Soluções ▾ ▾`.
 *
 * Por isso a correção é CSS e não uma configuração do painel: o duplicado
 * nasce em runtime, depois de qualquer coisa que o Elementor renderize.
 *
 * Some a que vier depois da primeira, e não uma classe específica, porque as
 * duas nascem com a mesma classe — o que as distingue é a ordem: a do HTML
 * vem primeiro, a do JS é anexada no fim. O `~` também cobre o caso de uma
 * terceira aparecer.
 *
 * Sem custo de acessibilidade: as duas são `aria-hidden="true"`, decoração
 * pura. E sem perda de função — quem abre o submenu é o próprio `<a>`, que
 * não tem `href` e é o que o SmartMenus escuta; a seta nunca foi o alvo.
 */
.elementor-nav-menu .sub-arrow ~ .sub-arrow {
	display: none;
}

/*
 * 15. A caixa do submenu passa a ter a largura do conteúdo
 *
 * O Elementor fixa `width: 12em` em `.elementor-nav-menu--main
 * .elementor-nav-menu ul`. Como `em` resolve contra a fonte do próprio `ul`
 * (13px), isso dava uma caixa de 156px — mais estreita que os rótulos, que
 * têm `white-space: nowrap` e por isso vazavam para fora do fundo branco.
 *
 * O `ul` é `position: absolute`, então `width: auto` faz a caixa encolher
 * até o conteúdo: o item mais largo passa a definir a largura, e o fundo
 * acompanha o texto em vez de cortá-lo.
 *
 * Sem `!important`: a regra do Elementor tem especificidade 0,3,0 e esta,
 * com a classe do `ul` no fim, tem 0,4,0 — vence sem depender da ordem em
 * que o LiteSpeed empilhar os arquivos, que é o mesmo cuidado do bloco 9.
 *
 * O escopo `--main` é o que separa desktop de mobile. No Elementor o menu do
 * hambúrguer é um `nav.elementor-nav-menu--dropdown` inteiro, fora de
 * `--main`, e deve continuar ocupando a largura da tela. Encolher aquele
 * seria transformar o menu mobile numa coluna estreita.
 */
.elementor-nav-menu--main .elementor-nav-menu ul.elementor-nav-menu--dropdown {
	width: auto;
}

/*
 * 16. Os 35px de respiro lateral nos itens
 *
 * O padding horizontal do item de dropdown é um controle do widget, hoje em
 * 2px, e o Elementor o escreve com quatro classes de especificidade
 * (`.elementor-55906 .elementor-element.elementor-element-11669bad
 * .elementor-nav-menu--dropdown .elementor-item`, 0,4,0). Uma regra estrutural
 * como esta não tem como alcançar isso por especificidade sem repetir o id de
 * cada página — e são 16 widgets, um por página e por template de header.
 * Daí o `!important`, pelo mesmo motivo dos blocos de posicionamento.
 *
 * Vale para `.elementor-item` e `.elementor-sub-item`: a classe muda conforme
 * o nível do item, e o dropdown usa a segunda.
 *
 * Com o bloco 15 os dois andam juntos — a caixa mede o conteúdo, e o conteúdo
 * agora inclui os 35px de cada lado.
 */
.elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-item,
.elementor-nav-menu--main .elementor-nav-menu--dropdown .elementor-sub-item {
	padding-left: 35px !important;
	padding-right: 35px !important;
}