/*
Theme Name:  Ethereal Precision Portal
Theme URI:   https://login.livese.com.br/
Description: O Ethereal Precision 3.4.0 para a área do cliente: o mesmo cabeçalho (com o botão Sair no lugar do ícone da área do cliente) e a mesma paleta do modo claro e do escuro, com o verde de ação do portal. O conteúdo, o rodapé e os modelos de página ficam com o construtor (Elementor). Não carrega fontes de terceiros.
Version:     1.1.0
Author:      Livese Seguros e Consultoria
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Update URI:  false
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ethereal-precision
Tags: custom-menu, custom-logo
*/

/* =====================================================================
   ÍNDICE
   ---------------------------------------------------------------------
   1. Tokens (claro e escuro)    6. Menu no computador
   2. Fonte                      7. Menu no celular
   3. Base                       8. Conteúdo: seção escura e imagens
   4. Acessibilidade             9. Impressão
   5. Cabeçalho

   Todo seletor do cabeçalho começa por .ep-header. Além de organizar, é
   o que protege a barra do "Estilo do Tema" do Elementor, cujas regras
   de botão e de link (.elementor-kit-N button, .elementor-kit-N a) têm
   mais peso que uma classe sozinha e carregam depois deste arquivo. As
   exceções são as duas peças do mega menu que não são links nem botões:
   o fundo (.ep-mega-fundo) e o véu (.ep-mega-veu, fora do cabeçalho).

   O tema é só o cabeçalho: fora dele, nada aqui vale para o site
   inteiro. O que toca o conteúdo fica restrito a .ep-main (entre o
   cabeçalho e o rodapé) e a .ep-conteudo (página de reserva do
   index.php); os documentos do Elementor (.elementor, inclusive rodapé e
   pop-ups) entram pelo assets/css/compat-elementor.css, carregado só com
   ele. Banners de cookies, botões de WhatsApp e outros plugins que entram
   direto no <body> ficam de fora.

   "Update URI: false" no cabeçalho acima: impede que o WordPress ofereça
   como atualização um tema homônimo do wordpress.org.
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ---------------------------------------------------------------------
   Toda cor e medida do tema sai daqui. O modo escuro redefine os
   valores logo abaixo.

   As cores são os PADRÕES da paleta: Aparência → Personalizar → Cores do
   tema troca cada uma, nos dois modos, e o PHP imprime só o que mudou
   logo depois deste arquivo (inc/tema/paleta.php, que tem a mesma tabela —
   mudou um padrão aqui, mude lá). Com o Elementor ativo, as cores do
   conteúdo aparecem no seletor dele como "Tema · …", apontando para estas
   variáveis: é o que faz o conteúdo do construtor trocar de modo junto.
   ===================================================================== */
:root {

	/* Superfícies e texto: cinzas neutros. --ep-primaria é a cor dos
	   títulos no conteúdo ("Primária" no Personalizar); --ep-primary, a dos
	   links. */
	--ep-surface: #f5f5f7;
	--ep-surface-container-lowest: #fff;
	--ep-on-surface: #1d1d1f; /* 15,5:1 sobre a superfície */
	--ep-on-surface-variant: #56565a; /* 6,7:1 */
	--ep-outline-variant: #d2d2d7;
	--ep-primary: #000;
	--ep-primaria: #1d1d1f;
	--ep-secondary-container: #e8e8ed;

	/* Verde de ação do portal: botão, marca de verificação. Texto sobre
	   ele é branco (5,5:1); como texto sobre o fundo claro, 5,0:1. */
	--ep-accent: #0b7a31;
	--ep-on-accent: #fff;

	/* Anel de foco: o mesmo verde, que passa do mínimo de 3:1 da WCAG
	   sobre todos os fundos (5,5 no branco, 5,0 no fundo, 4,5 no cartão
	   cinza, 3,8 no preto, 3,1 no #1d1d1f). Se ele ou os fundos mudarem no
	   Personalizar, confira o contraste. */
	--ep-focus: #0b7a31;

	/* Conteúdo: cartões e seção escura. No escuro eles NÃO seguem as
	   superfícies do cabeçalho: cartão preto sobre página preta não se
	   separa, então sobe para #1d1d1f. */
	--ep-card: #fff;
	--ep-card-2: #e8e8ed;
	--ep-escuro: #000;
	--ep-on-escuro: #f5f5f7; /* 19,3:1 no claro, 15,5:1 no escuro */

	/* A seção escura usa a Secundária e a Borda do MODO ESCURO nos dois
	   modos (ver .ep-escuro, seção 8). */
	--ep-secundaria-escuro: #a1a1a6; /* 8,2:1 no claro, 6,5:1 no escuro */
	--ep-borda-escuro: #333336;

	/* O Texto do MODO CLARO, que fica fora do conteúdo também no escuro
	   (ver a seção 3). */
	--ep-texto-claro: #1d1d1f;

	/* Véu sobre a página quando o mega menu abre (soma-se a um desfoque). */
	--ep-veu: rgba(0, 0, 0, 0.14);

	/* Tipografia. */
	--ep-font: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif;
	--ep-headline-md-size: 28px;
	--ep-headline-md-lh: 36px;
	--ep-body-lg-size: 16px;
	--ep-body-lg-lh: 24px;
	--ep-body-md-size: 14px;
	--ep-body-md-lh: 20px;
	--ep-label-size: 13px;
	--ep-label-lh: 18px;
	--ep-weight-headline: 600;
	--ep-weight-medium: 500;
	--ep-weight-body: 400;

	/* Espaçamento e trilho. */
	--ep-container-padding: 24px;
	--ep-container-max: 1200px; /* casar com Elementor → Layout → Largura do conteúdo */
	--ep-section-gap: 80px;
	--ep-element-gap: 16px;
	--ep-gap-sm: 8px;
	--ep-gap-lg: 32px;
	--ep-round-full: 9999px;
	--ep-round-small: 8px;

	/* Cabeçalho. O logo manda pela LARGURA; a altura sai da proporção do
	   arquivo, que o PHP grava em --ep-logo-ratio (6 é só a reserva). As
	   larguras e o respiro são ajustáveis em Personalizar → Identidade do
	   site (inc/tema/marca.php). A barra é o logo mais o respiro dos dois lados, com piso de
	   56px. No celular, a lista do menu aberto começa logo abaixo dela. */
	--ep-logo-ratio: 6;
	--ep-logo-w-desktop: 182px;
	--ep-logo-w-mobile: 160px;
	--ep-logo-w: var(--ep-logo-w-desktop);
	--ep-logo-h: calc(var(--ep-logo-w) / var(--ep-logo-ratio));
	--ep-header-pad-y: 16px;
	--ep-header-h: max(56px, calc(var(--ep-logo-h) + 2 * var(--ep-header-pad-y)));
	--ep-nav-size: 14px;
}

/* No celular e no tablet (o mesmo ponto em que o menu recolhe), a largura
   do celular — nunca mais que 45% da tela. Declarada no :root, onde vivem
   as contas acima, para que altura e barra acompanhem. */
@media (max-width: 1024.98px) {

	:root {
		--ep-logo-w: min(var(--ep-logo-w-mobile), 45vw);
	}
}

/* Modo escuro: automático, pelo aparelho do visitante. Fundo preto
   absoluto; o verde de ação não muda (texto branco sobre ele). Cada
   texto passa de 4,5:1. */
@media (prefers-color-scheme: dark) {

	:root {

		/* Campo, barra de rolagem e <select> nativos também escuros. */
		color-scheme: dark;

		--ep-surface: #000;
		--ep-surface-container-lowest: #000;
		--ep-on-surface: #f5f5f7; /* 19,3:1 */
		--ep-on-surface-variant: #a1a1a6; /* 8,2:1 */
		--ep-outline-variant: #333336;
		--ep-primary: #f5f5f7; /* inverte: preto sobre preto sumiria */
		--ep-primaria: #f5f5f7;
		--ep-secondary-container: #242426;
		--ep-card: #1d1d1f;
		--ep-card-2: #2a2a2c;
		--ep-escuro: #1d1d1f;
		--ep-veu: rgba(0, 0, 0, 0.5);
	}
}

/* =====================================================================
   2. FONTE — Inter 4.1 variável, subset latin, no próprio site
   ---------------------------------------------------------------------
   Não vem do Google Fonts: buscar de lá entrega o IP do visitante a um
   terceiro. A licença em assets/fonts/LICENSE-Inter.txt é obrigatória.
   ===================================================================== */
@font-face {
	font-family: InterVariable;
	src: url(assets/fonts/inter-variable-latin.woff2) format("woff2");
	font-weight: 400 700; /* faixa: é fonte variável */
	font-style: normal;
	font-display: swap;
}

/* =====================================================================
   3. BASE
   ---------------------------------------------------------------------
   Só o esqueleto da página. Tipografia de conteúdo, botões, formulários
   e seções são do Elementor.
   ===================================================================== */

/* Só nas partes do tema. O Elementor já aplica border-box em tudo dentro
   de .elementor; um * solto mudaria a medida de caixas de plugins. */
.ep-header,
.ep-header *,
.ep-header *::before,
.ep-header *::after,
.ep-conteudo,
.ep-conteudo *,
.ep-conteudo *::before,
.ep-conteudo *::after,
.ep-skip-link,
.ep-mega-veu {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--ep-surface);
	color: var(--ep-on-surface);
	font-family: var(--ep-font);
	font-size: var(--ep-body-lg-size);
	line-height: var(--ep-body-lg-lh);
	font-weight: var(--ep-weight-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;

	/* clip, e não hidden: hidden cria contexto de rolagem e desliga o
	   position: sticky do cabeçalho. */
	overflow-x: clip;
}

/* Trava a rolagem do fundo com o menu do celular aberto (classe posta
   pelo nav.js). */
body.ep-nav-aberto {
	overflow: hidden;
}

/* Modo escuro FORA do conteúdo: o texto fica na cor do modo claro.
   Banner de cookies, botão de WhatsApp e outros plugins que entram direto
   no <body> costumam ter fundo branco próprio e herdar a cor do texto;
   com o texto claro do modo escuro, ficariam ilegíveis. O conteúdo
   (.ep-main) continua trocando de modo. Os documentos do Elementor e a
   cor de corpo do kit dele são tratados no compat-elementor.css.

   color-scheme segue a mesma divisão: escuro no <html> (barra de rolagem
   e fundo da janela), claro no <body> e escuro de novo no conteúdo e no
   cabeçalho. Sem isto, o link sem cor de um banner de plugin ganharia o
   azul-claro do modo escuro do navegador — ilegível no fundo branco dele —
   e os campos nativos dentro do banner ficariam escuros. */
@media (prefers-color-scheme: dark) {

	body {
		color: var(--ep-texto-claro);
		color-scheme: light;
	}

	.ep-main,
	.ep-header {
		color: var(--ep-on-surface);
		color-scheme: dark;
	}
}

/* Links e negrito só no conteúdo, e com peso zero (:where): o que o
   construtor ou o widget definirem continua valendo. Fora do conteúdo,
   links de plugins ficam com a cor que o plugin der. */
:where(.ep-main) a {
	color: var(--ep-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

:where(.ep-main) a:hover {
	text-decoration-thickness: 2px;
}

:where(.ep-main) :is(strong, b) {
	font-weight: var(--ep-weight-headline);
}

/* Mídia só na página de reserva: no Elementor, o próprio Elementor cuida.
   iframe sem height: auto — com ele, o atributo height="450" de um mapa
   ou de um vídeo incorporado seria ignorado e o iframe cairia para 150px. */
.ep-conteudo img,
.ep-conteudo video {
	max-width: 100%;
	height: auto;
}

.ep-conteudo iframe {
	max-width: 100%;
}

.ep-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh; /* desconta a barra do navegador no celular */
}

.ep-main {
	flex: 1 0 auto;
}

.ep-container {
	width: 100%;
	max-width: var(--ep-container-max);
	margin-inline: auto;
	padding-inline: var(--ep-container-padding);
}

/* Saída de reserva do index.php (página fora do Elementor, listagem,
   busca, 404): só o respiro. */
.ep-conteudo {
	padding-block: var(--ep-gap-lg) var(--ep-section-gap);
}

/* =====================================================================
   4. ACESSIBILIDADE
   ===================================================================== */

/* Anel de foco em todo o site, com peso zero: qualquer foco que um plugin
   ou o Elementor definam vence. O cantinho arredondado fica só no
   cabeçalho — fora dele, mudaria o canto de campos de plugin no foco. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ep-focus);
	outline-offset: 2px;
}

.ep-header :where(a, button):where(:focus-visible) {
	border-radius: var(--ep-round-small);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* position com !important: vence o position: absolute !important do
   .screen-reader-text acima. Sem ele, com a página rolada, o link
   aparecia no topo do DOCUMENTO, fora da tela. */
.ep-skip-link:focus {
	position: fixed !important;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ep-element-gap));
	z-index: 1001; /* acima do cabeçalho (1000) */
	width: auto;
	height: auto;
	padding: var(--ep-gap-sm) var(--ep-element-gap);
	clip-path: none;
	background: var(--ep-accent);
	color: var(--ep-on-accent);
	border-radius: var(--ep-round-full);
	text-decoration: none;
}

/* Movimento reduzido: só no que o tema anima (cabeçalho, menus e o véu
   do mega menu). O conteúdo e os plugins seguem as próprias regras. */
@media (prefers-reduced-motion: reduce) {

	.ep-header,
	.ep-header *,
	.ep-header *::before,
	.ep-header *::after,
	.ep-mega-veu {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =====================================================================
   5. CABEÇALHO — barra, marca e ações
   ===================================================================== */

/* z-index 1000: acima do conteúdo do Elementor (seção fixa usa 99,
   sliders e caixas com camada própria costumam ficar abaixo de 1000) e
   abaixo de pop-ups, banners de cookies e chat (9999 ou mais). */
.ep-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: color-mix(in srgb, var(--ep-surface) 88%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--ep-outline-variant);

	/* Explícitas: sem isto, a tipografia e a cor do corpo definidas no
	   Elementor (Estilo do Tema) chegariam à barra por herança. */
	color: var(--ep-on-surface);
	font-family: var(--ep-font);
}

/* Logado: a barra de administração é fixa no topo (32px no computador,
   46px até 782px). Sem isto, o cabeçalho grudaria atrás dela. A variável
   é do próprio WordPress. Até 600px a barra de administração rola junto
   com a página, e o cabeçalho volta a grudar no topo. */
.admin-bar .ep-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {

	.admin-bar .ep-header {
		top: 0;
	}
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {

	.ep-header {
		background: var(--ep-surface);
	}
}

.ep-header .ep-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ep-element-gap);
	min-height: var(--ep-header-h);
}

/* --- Marca ------------------------------------------------------------ */
.ep-header .ep-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--ep-gap-sm);
	min-width: 0; /* a marca cede espaço; as ações nunca */
	overflow: hidden;
	font-size: var(--ep-body-lg-size);
	line-height: 1.2;
	font-weight: var(--ep-weight-headline);
	letter-spacing: -0.01em;
	color: var(--ep-on-surface);
	text-decoration: none;
}

/* O kit do Elementor define a cor de link no hover (.elementor-kit-N
   a:hover), e o nome do site em texto mudaria de cor. */
.ep-header .ep-brand:hover,
.ep-header .ep-brand:focus {
	color: var(--ep-on-surface);
}

/* Nome do site em texto (sem logo): corta com reticências abaixo de
   ~360px em vez de empurrar o ícone e o botão para fora da tela. */
.ep-header .ep-brand > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ep-header .ep-brand__tagline {
	display: block;
	white-space: normal;
	font-size: var(--ep-label-size);
	line-height: var(--ep-label-lh);
	font-weight: var(--ep-weight-body);
	color: var(--ep-on-surface-variant);
}

/* Quem não encolhe é a IMAGEM, não o link: o logo mantém a proporção. */
.ep-header .ep-logo {
	flex: none;
	width: var(--ep-logo-w);
	max-width: none;
	height: auto;
	border-radius: 0;
}

/* Plugins de WebP (EWWW, ShortPixel, WebP Express…) põem o logo dentro de
   um <picture>. Sem isto, o <picture> do logo escondido continuaria na
   marca e somaria o espaço entre os filhos antes do logo visível. */
.ep-header .ep-brand picture {
	display: contents;
}

/* Logo escuro: só aparece no modo escuro, e só quando há os dois
   arquivos (.ep-brand--dois). A troca é por CSS, já na primeira pintura. */
.ep-header .ep-logo--escuro {
	display: none;
}

@media (prefers-color-scheme: dark) {

	.ep-header .ep-brand--dois .ep-logo--claro {
		display: none;
	}

	.ep-header .ep-brand--dois .ep-logo--escuro {
		display: block;
	}
}

/* --- Ações: botão Sair e botão do menu ---------------------------------- */
.ep-header .ep-header__acoes {
	display: flex;
	flex: none;
	align-items: center;
	gap: 4px;
}

/* Botão Sair (seta saindo da porta, só para quem está logado): ícone de
   20px numa caixa de 32px no computador (alvo de ponteiro) e de 44px no
   celular (alvo de dedo; ver seção 7). Mesma cor e mesmo traço (1,5px na
   tela) do botão do menu. */
.ep-header .ep-header__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--ep-round-full);
	color: var(--ep-on-surface);
	text-decoration: none;
}

.ep-header .ep-header__icone:hover {
	background: var(--ep-secondary-container);
	color: var(--ep-on-surface);
}

/* Os quatro botões do cabeçalho (o do menu e os três que o nav.js cria)
   zeram o que a tipografia de botão do "Estilo do Tema" do Elementor
   mudaria e que as regras de cada um não declaram: caixa alta,
   espaçamento, sombra. Cada botão define depois a própria fonte. */
.ep-header .ep-nav-toggle,
.ep-header .ep-nav__abrir,
.ep-header .ep-nav__drill,
.ep-header .ep-nav__back {
	font-style: normal;
	letter-spacing: normal;
	word-spacing: normal;
	text-decoration: none;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
}

/* O botão do menu só aparece no celular (seção 7). Os estados vêm juntos
   para que nenhuma regra genérica de botão — de plugin ou do Estilo do
   Tema do Elementor — pinte o X; no celular o hover gruda após o toque. */
.ep-header .ep-nav-toggle {
	display: none;
	align-items: center;
	margin-left: var(--ep-gap-sm);
	background: transparent;
	border-radius: var(--ep-round-full);
	color: var(--ep-on-surface);
	font: inherit;
	font-size: var(--ep-body-md-size);
	cursor: pointer;
}

.ep-header .ep-nav-toggle:hover,
.ep-header .ep-nav-toggle:focus,
.ep-header .ep-nav-toggle:active {
	background: transparent;
	color: var(--ep-on-surface);
	box-shadow: none;
	transform: none;
}

/* --- Menu: o que vale nos dois tamanhos ---------------------------------- */
.ep-header .ep-nav ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ep-header .ep-nav li {
	max-width: none;
}

.ep-header .ep-nav a {
	display: block;
	font-size: var(--ep-nav-size);
	line-height: 1.4;
	font-weight: var(--ep-weight-body);
	letter-spacing: -0.01em;
	color: var(--ep-on-surface-variant);
	text-decoration: none;
}

/* A página atual NÃO é destacada, como na Apple; o leitor de tela sabe
   onde está pelo aria-current="page" que o WordPress põe. */
.ep-header .ep-nav a:hover {
	color: var(--ep-on-surface);
}

/* Peças criadas pelo nav.js: cada uma ganha corpo só no seu tamanho. */
.ep-header .ep-nav__abrir,
.ep-header .ep-nav__back,
.ep-header .ep-nav__drill,
.ep-mega-veu,
.ep-mega-fundo {
	display: none;
}

/* =====================================================================
   6. MENU NO COMPUTADOR (a partir de 1025px)
   ---------------------------------------------------------------------
   Passar o mouse num item com filhos abre, depois de 0,2s, um painel de
   largura total com os filhos numa LISTA ÚNICA, grande e em seminegrito,
   alinhada ao logo; a página ao fundo fica desfocada. O comportamento é
   do nav.js (classe .has-mega); sem JavaScript, as regras de reserva no
   fim desta seção abrem o painel direto no :hover.
   ===================================================================== */
@media (min-width: 1025px) {

	/* Os itens se distribuem de ponta a ponta entre a marca e as ações. */
	.ep-header .ep-nav {
		flex: 1;
		align-self: stretch;
	}

	.ep-header .ep-nav > ul {
		height: 100%;
		justify-content: space-evenly;
		gap: var(--ep-element-gap);
	}

	/* A li ocupa a altura inteira da barra: sem vão entre o item e o
	   painel, o ponteiro não "sai" do item a caminho da lista. */
	.ep-header .ep-nav > ul > li {
		display: flex;
		align-items: stretch;
	}

	.ep-header .ep-nav > ul > li > a {
		display: flex;
		align-items: center;
	}

	.ep-header .ep-nav .is-mega-aberto > a {
		color: var(--ep-on-surface);
	}

	/* static na li: o painel se mede pelo CABEÇALHO (sticky, portanto
	   posicionado), e não pelo item — daí a largura total. */
	.ep-header .ep-nav .menu-item-has-children {
		position: static;
	}

	/* --- A lista ----------------------------------------------------------
	   O padding lateral repete a conta do trilho, com 100% (a largura da
	   barra, sem a barra de rolagem) no lugar de 100vw: é o que põe o
	   primeiro item exatamente abaixo do logo. visibility, e não display,
	   mantém a lista medível (o nav.js lê a altura) e fora do Tab. */
	.ep-header .ep-nav .sub-menu {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 2;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		padding: 36px max(var(--ep-container-padding), calc((100% - var(--ep-container-max)) / 2 + var(--ep-container-padding))) 56px;
		background: var(--ep-surface-container-lowest);
		border-bottom: 1px solid var(--ep-outline-variant);
		visibility: hidden;
		pointer-events: none;
	}

	.ep-header .ep-nav .sub-menu li {
		display: block;
	}

	/* O corte da primeira coluna do menu da Apple, na Inter. */
	.ep-header .ep-nav .sub-menu a {
		padding: 5px 0;
		font-size: 24px;
		line-height: 30px;
		font-weight: var(--ep-weight-headline);
		letter-spacing: -0.015em;
		color: var(--ep-on-surface);
		white-space: nowrap;
	}

	.ep-header .ep-nav .sub-menu a:hover {
		color: var(--ep-on-surface-variant);
	}

	/* Atalhos "Ver tudo em…" (classe ep-so-mobile no menu do WordPress):
	   no computador o próprio item do topo é o link, e o atalho seria
	   repetição. */
	.ep-header .ep-nav li.ep-so-mobile,
	.ep-header .ep-nav .sub-menu li.ep-so-mobile {
		display: none;
	}

	/* --- Com JavaScript ---------------------------------------------------
	   A lista não tem fundo próprio: quem pinta é o .ep-mega-fundo, um só
	   para todas, que muda de altura ao trocar de uma para outra. */
	.ep-header .ep-nav.has-mega .sub-menu {
		background: transparent;
		border-bottom: 0;
		transition: visibility 0s linear 200ms; /* some depois dos itens */
	}

	.ep-header .ep-nav.has-mega .is-mega-aberto > .sub-menu {
		visibility: visible;
		pointer-events: auto;
		transition: visibility 0s;
	}

	/* Cascata: cada item desce um pouco e aparece 30ms depois do anterior
	   (--j numerado pelo nav.js). Na saída, todos juntos e mais rápido. */
	.ep-header .ep-nav.has-mega .sub-menu > li {
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 160ms ease, transform 160ms ease;
	}

	.ep-header .ep-nav.has-mega .is-mega-aberto > .sub-menu > li {
		opacity: 1;
		transform: none;
		transition: opacity 320ms ease, transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
		transition-delay: calc(var(--j, 0) * 30ms + 90ms);
	}

	.ep-mega-fundo {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 1;
		display: block;
		height: 0;
		overflow: hidden;
		background: var(--ep-surface-container-lowest);
		border-bottom: 1px solid transparent;
		pointer-events: none;
		transition: height 320ms cubic-bezier(0.4, 0, 0.6, 1), border-color 0s linear 320ms;
	}

	/* O véu fica FORA do cabeçalho (o backdrop-filter da barra prenderia
	   um filho fixo dentro dela) e logo abaixo dele: z-index 999 contra
	   1000 — acima de todo o conteúdo, que ele desfoca. */
	.ep-mega-veu {
		position: fixed;
		inset: 0;
		z-index: 999;
		display: block;
		background: var(--ep-veu);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 240ms ease, visibility 0s linear 240ms;
	}

	.ep-mega-veu.is-visivel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 240ms ease, visibility 0s;
	}

	/* Com o painel aberto, a barra translúcida fica sólida: os dois viram
	   uma superfície só, sem degrau de cor na emenda. */
	.ep-header.is-mega {
		background: var(--ep-surface-container-lowest);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-bottom-color: transparent;
	}

	.ep-header.is-mega .ep-mega-fundo {
		border-bottom-color: var(--ep-outline-variant);
		transition: height 320ms cubic-bezier(0.4, 0, 0.6, 1), border-color 0s;
	}

	/* --- A seta: botão que abre o painel por clique e teclado -------------
	   O item continua sendo link para a página dele. Alvo de 24px, o
	   mínimo da WCAG 2.2 para ponteiro. */
	.ep-header .ep-nav__abrir {
		display: inline-flex;
		align-self: center;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		margin-left: 2px;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: var(--ep-round-small);
		color: var(--ep-on-surface-variant);
		cursor: pointer;
	}

	/* Estados juntos, como no botão do menu: o "Estilo do Tema" do
	   Elementor pinta button:hover E button:focus (.elementor-kit-N
	   button:focus, que pesa mais que a regra base acima). Sem o :focus
	   aqui, a seta virava um quadrado colorido depois do clique. */
	.ep-header .ep-nav__abrir:hover,
	.ep-header .ep-nav__abrir:focus,
	.ep-header .ep-nav__abrir:active {
		background: transparent;
		border-color: transparent;
		color: var(--ep-on-surface-variant);
		box-shadow: none;
		transform: none;
	}

	.ep-header .ep-nav__abrir:hover,
	.ep-header .is-mega-aberto > .ep-nav__abrir,
	.ep-header .is-mega-aberto > .ep-nav__abrir:focus {
		color: var(--ep-on-surface);
	}

	.ep-header .ep-nav__abrir::before {
		content: "";
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentcolor;
		border-bottom: 1.5px solid currentcolor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 200ms ease;
	}

	.ep-header .is-mega-aberto > .ep-nav__abrir::before {
		transform: translateY(1px) rotate(-135deg);
	}

	/* --- Sem JavaScript: reserva -------------------------------------------
	   Abre direto no :hover e no foco, com a seta desenhada no link. */
	.ep-header .ep-nav:not(.has-mega) .menu-item-has-children > a::after {
		content: "";
		width: 6px;
		height: 6px;
		margin-left: 6px;
		border-right: 1.5px solid currentcolor;
		border-bottom: 1.5px solid currentcolor;
		transform: translateY(-2px) rotate(45deg);
	}

	.ep-header .ep-nav:not(.has-mega) .menu-item-has-children:hover > .sub-menu,
	.ep-header .ep-nav:not(.has-mega) .menu-item-has-children:focus-within > .sub-menu {
		visibility: visible;
		pointer-events: auto;
	}

	.ep-header:has(.ep-nav:not(.has-mega) .menu-item-has-children:hover),
	.ep-header:has(.ep-nav:not(.has-mega) .menu-item-has-children:focus-within) {
		background: var(--ep-surface-container-lowest);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-bottom-color: transparent;
	}
}

/* =====================================================================
   7. MENU NO CELULAR (até 1024px)
   ---------------------------------------------------------------------
   Painel em tela cheia abaixo da barra. Tocar num item com filhos troca
   a lista pela dos filhos (camada), com um botão de voltar. As regras de
   camada dependem de .has-drill, que só o nav.js põe.

   Sem JavaScript o painel não teria como abrir: quem cuida desse caso é
   o <noscript> que o PHP imprime no <head> (inc/tema/recursos.php), que
   mostra o menu como lista abaixo da barra. Com o JavaScript só atrasado
   (plugins de cache), o <noscript> não vale e a barra fica como sempre.
   ===================================================================== */
@media (max-width: 1024.98px) {

	/* backdrop-filter cria bloco de contenção para position: fixed: com
	   ele na barra, o painel abaixo seria medido pela barra, e não pela
	   janela, e abriria com altura zero. O desfoque fica fora daqui. */
	.ep-header {
		background: var(--ep-surface);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.ep-header .ep-header__inner {
		position: relative;
	}

	/* Alvo de toque: 44px, o mínimo recomendado para o dedo. */
	.ep-header .ep-header__icone {
		width: 44px;
		height: 44px;
	}

	/* --- Botão: 44x44, duas barras que giram em X. Fica ACIMA do painel,
	   no mesmo lugar: fechar é o mesmo gesto que abrir. --- */
	.ep-header .ep-nav-toggle {
		position: relative;
		z-index: 110;
		display: inline-flex;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
	}

	.ep-header .ep-nav-toggle__icon {
		position: relative;
		width: 18px;
		height: 12px;
	}

	.ep-header .ep-nav-toggle__icon span {
		position: absolute;
		left: 0;
		width: 18px;
		height: 1.5px;
		background: var(--ep-on-surface);
		border-radius: 2px;
		transition:
			transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
			top 160ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.ep-header .ep-nav-toggle__icon span:first-child {
		top: 0;
	}

	.ep-header .ep-nav-toggle__icon span:last-child {
		top: 10px;
	}

	.ep-header [aria-expanded="true"] .ep-nav-toggle__icon span:first-child {
		top: 5px;
		transform: rotate(45deg);
	}

	.ep-header [aria-expanded="true"] .ep-nav-toggle__icon span:last-child {
		top: 5px;
		transform: rotate(-45deg);
	}

	/* --- Painel ------------------------------------------------------------
	   Como na Apple: o painel COBRE a barra, e dela só fica o X (o botão
	   do menu, com z-index 110, acima do painel, no mesmo lugar). A marca
	   e o ícone da área do cliente ficam por baixo — e fora do Tab: o
	   nav.js os deixa inert enquanto o painel está aberto.

	   --ep-painel-top: onde a barra COMEÇA na tela, medido pelo nav.js ao
	   abrir (desce com a barra de administração ou com um aviso de plugin
	   acima do cabeçalho). --ep-painel-barra: a altura da barra, também
	   medida. A lista começa logo abaixo da linha do X: a altura da barra
	   menos 16px, e o respiro de cima do primeiro item completa a
	   distância. As contas pelo logo ficam como reserva.

	   visibility, e não display, para a opacidade ter o que animar e o
	   painel fechado ficar fora do Tab. */
	.ep-header .ep-nav {
		position: fixed;
		top: var(--ep-painel-top, 0);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 90;
		padding: calc(var(--ep-painel-barra, var(--ep-header-h)) - var(--ep-element-gap)) var(--ep-container-padding) var(--ep-section-gap);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--ep-surface-container-lowest);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 200ms ease, visibility 0s linear 200ms;
	}

	.ep-header .ep-nav.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 200ms ease, visibility 0s;
	}

	.ep-header .ep-nav ul {
		flex-direction: column;
		align-items: stretch;
		max-width: var(--ep-container-max);
	}

	/* Entrada escalonada (--i numerado pelo nav.js), só na abertura:
	   fechar escalonado parece travamento. Sem filete entre os itens: quem
	   separa é o espaço, como no menu da Apple. */
	.ep-header .ep-nav > ul > li {
		opacity: 0;
		transform: translateY(12px);
		transition:
			opacity 300ms ease,
			transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
	}

	.ep-header .ep-nav.is-open > ul > li {
		opacity: 1;
		transform: none;
		transition-delay: calc(var(--i, 0) * 40ms + 60ms);
	}

	/* Item de primeiro nível: grande e encorpado; o tracking negativo
	   segura o bloco. */
	.ep-header .ep-nav > ul > li > a {
		padding-block: var(--ep-element-gap);
		font-size: var(--ep-headline-md-size);
		line-height: var(--ep-headline-md-lh);
		font-weight: var(--ep-weight-headline);
		letter-spacing: -0.02em;
		color: var(--ep-on-surface);
	}

	.ep-header .ep-nav .sub-menu a {
		font-weight: var(--ep-weight-medium);
		color: var(--ep-on-surface-variant);
	}

	/* --- Camadas (com JavaScript) ------------------------------------------
	   O link do pai dá lugar ao botão que abre a camada. Se o pai aponta
	   para uma página, ponha um atalho para ela como PRIMEIRO filho no
	   menu do WordPress (classe ep-so-mobile), senão ela fica
	   inalcançável pelo celular. */
	.ep-header .ep-nav.has-drill .menu-item-has-children > a {
		display: none;
	}

	.ep-header .ep-nav.has-drill .sub-menu {
		display: none;
	}

	.ep-header .ep-nav__drill {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ep-element-gap);
		width: 100%;
		min-height: 0;
		padding: var(--ep-element-gap) 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		color: var(--ep-on-surface);
		font-family: inherit;
		font-size: var(--ep-headline-md-size);
		line-height: var(--ep-headline-md-lh);
		font-weight: var(--ep-weight-headline);
		letter-spacing: -0.02em;
		text-align: left;
		cursor: pointer;
	}

	/* :focus junto: ao voltar de uma camada (Esc ou "voltar") o foco
	   retorna a este botão, e o button:focus do "Estilo do Tema" do
	   Elementor o pintaria como um bloco colorido. */
	.ep-header .ep-nav__drill:hover,
	.ep-header .ep-nav__drill:focus,
	.ep-header .ep-nav__drill:active {
		background: transparent;
		color: var(--ep-on-surface);
		box-shadow: none;
		transform: none;
	}

	/* Setas: um quadrado sem dois lados, girado. Sem ícone externo. */
	.ep-header .ep-nav__drill::after,
	.ep-header .ep-nav__back::before {
		content: "";
		flex: none;
		width: 9px;
		height: 9px;
		border-right: 2px solid currentcolor;
		border-bottom: 2px solid currentcolor;
	}

	.ep-header .ep-nav__drill::after {
		transform: rotate(-45deg);
	}

	.ep-header .ep-nav__back::before {
		transform: rotate(135deg);
	}

	.ep-header .ep-nav.is-drilled > ul > li:not(.is-active) {
		display: none;
	}

	.ep-header .ep-nav.is-drilled > ul > li.is-active > .ep-nav__drill {
		display: none;
	}

	.ep-header .ep-nav.is-drilled > ul > li.is-active > .sub-menu {
		display: flex;
		animation: ep-camada 260ms cubic-bezier(0.32, 0.72, 0, 1) both;
	}

	/* Dentro da camada os filhos têm o MESMO tratamento do nível de cima:
	   quem entrou ali está num nível novo, não num apêndice. */
	.ep-header .ep-nav.has-drill .sub-menu a {
		padding: var(--ep-element-gap) 0;
		font-size: var(--ep-headline-md-size);
		line-height: var(--ep-headline-md-lh);
		font-weight: var(--ep-weight-headline);
		letter-spacing: -0.02em;
		color: var(--ep-on-surface);
	}

	/* Voltar: na linha do X, do lado esquerdo, como na Apple — no lugar
	   da marca, que o painel cobre. Nomeia de onde se está saindo. A lista
	   da camada começa na mesma altura da lista principal. */
	.ep-header .ep-nav.is-drilled .ep-nav__back {
		position: absolute;
		top: calc((var(--ep-painel-barra, var(--ep-header-h)) - 44px) / 2);
		display: inline-flex;
		align-items: center;
		gap: var(--ep-gap-sm);
		min-height: 44px;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		color: var(--ep-on-surface-variant);
		font-family: inherit;
		font-size: var(--ep-body-md-size);
		line-height: var(--ep-body-md-lh);
		font-weight: var(--ep-weight-medium);
		cursor: pointer;
	}

	/* A regra acima já pesa mais que o button:focus do Elementor; o
	   :focus aqui só mantém a sombra zerada em qualquer caso. */
	.ep-header .ep-nav.is-drilled .ep-nav__back:focus {
		box-shadow: none;
	}

	.ep-header .ep-nav.is-drilled .ep-nav__back:hover {
		color: var(--ep-on-surface);
		box-shadow: none;
		transform: none;
	}
}

@keyframes ep-camada {

	from {
		opacity: 0;
		transform: translateX(20px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* =====================================================================
   8. CONTEÚDO — seção escura e imagens por modo
   ---------------------------------------------------------------------
   Classes utilitárias para o conteúdo, de qualquer construtor ou do
   editor de blocos. As cores do conteúdo que trocam de modo vêm das
   variáveis da seção 1 — no Elementor, pelas cores "Tema · …" do seletor
   (inc/compat/elementor.php).
   ===================================================================== */

/*
 * Seção escura: classe ep-escuro no contêiner (Avançado → Classes CSS).
 * Fundo escuro nos dois modos e tudo dentro vira texto claro sozinho: o
 * texto, a Secundária, a Borda, os links e a Primária passam aos valores
 * do modo escuro. As cores "Tema · …" do Elementor são redeclaradas aqui
 * pelo PHP (uma variável que aponta para outra é resolvida onde é
 * declarada).
 */
.ep-escuro {
	--ep-on-surface: var(--ep-on-escuro);
	--ep-on-surface-variant: var(--ep-secundaria-escuro);
	--ep-outline-variant: var(--ep-borda-escuro);
	--ep-primary: var(--ep-on-escuro);
	--ep-primaria: var(--ep-on-escuro);

	background-color: var(--ep-escuro);
	color: var(--ep-on-surface);
}

/* Imagem por modo: ep-so-claro / ep-so-escuro no widget ou contêiner.
   !important porque os construtores põem display próprio nos dois. */
@media (prefers-color-scheme: dark) {

	.ep-so-claro {
		display: none !important;
	}
}

@media not (prefers-color-scheme: dark) {

	.ep-so-escuro {
		display: none !important;
	}
}

/* =====================================================================
   9. IMPRESSÃO
   ===================================================================== */
@media print {

	.ep-header {
		display: none !important;
	}

	body {
		background: #fff;
	}
}