/*
Theme Name:  Ethereal Precision
Theme URI:   https://livese.com.br/
Description: Tema clássico para site institucional, construído sobre o sistema de design Ethereal Precision. Compatível com Elementor e com o plugin Portal do Cliente (estilos das telas de acesso inclusos). Não carrega fontes de terceiros.
Version:     2.2.0
Author:      Livese Seguros e Consultoria
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
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, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* =====================================================================
   ÍNDICE
   ---------------------------------------------------------------------
   1.  Tokens               6.  Rodapé
   2.  Base e tipografia    7.  Conteúdo e cartões
   3.  Layout               8.  Formulários e botões
   4.  Acessibilidade       9.  Portal do Cliente
   5.  Cabeçalho           10.  Responsivo
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ---------------------------------------------------------------------
   Valores vindos do design.md. As linhas marcadas com DERIVADO não
   estavam no arquivo — foram calculadas a partir do que estava, e são
   os únicos pontos onde houve escolha minha. Altere à vontade.
   ===================================================================== */
:root {
	/* --- Superfícies ---
	   Cinzas NEUTROS. A escala anterior vinha do Material e tinha um
	   fundo lilás (#faf8fe) que brigava com o preto profundo e com o
	   verde. Neutro é o que deixa as duas cores de decisão — o preto
	   dos contêineres e o verde das ações — serem as únicas cores da
	   página. */
	--ep-surface:                    #f5f5f7;
	--ep-surface-dim:                #d2d2d7;
	--ep-surface-bright:             #ffffff;
	--ep-surface-container-lowest:   #ffffff;
	--ep-surface-container-low:      #f0f0f2;
	--ep-surface-container:          #e8e8ed;
	--ep-surface-container-high:     #e0e0e5;
	--ep-surface-container-highest:  #d8d8de;

	/* --- Texto e traços --- */
	--ep-on-surface:                 #1d1d1f;  /* 15,5:1 sobre a superfície */
	--ep-on-surface-variant:         #56565a;  /*  6,7:1 */
	--ep-outline:                    #86868b;
	--ep-outline-variant:            #d2d2d7;

	/* --- Preto profundo e verde de ação -------------------------------
	   As duas cores da marca dentro do sistema.

	   O PRETO é #000 mesmo, não um cinza muito escuro: é ele que dá o
	   corte seco dos contêineres invertidos no modo claro, e é ele que
	   vira a superfície inteira no modo escuro.

	   O VERDE é o #13B449 da Livese, e é a ÚNICA cor do site. Aparece
	   só onde há ação: botão, foco de teclado, marca de verificação.
	   Texto sobre ele é PRETO, não branco — preto sobre este verde dá
	   7,7:1, branco daria 2,7:1 e reprovaria em qualquer medição.

	   O verde NÃO serve para link no meio do texto: sobre fundo claro
	   ele fica em 2,7:1. Link continua no preto, sublinhado. */
	--ep-black:                      #000000;
	--ep-black-soft:                 #1d1d1f;
	--ep-on-black:                   #f5f5f7;  /* 19,3:1 sobre o preto */
	--ep-on-black-variant:           #a1a1a6;  /*  8,2:1 */

	--ep-accent:                     #13b449;
	--ep-on-accent:                  #000000;  /*  7,7:1 */
	--ep-accent-hover:               #0f9a3e;

	/* --- O contêiner de cobertura -------------------------------------
	   Tokens próprios, e não as superfícies genéricas, porque a
	   alternância inverte de significado entre os modos. No claro é
	   branco e PRETO, um corte seco. No escuro seriam preto e preto:
	   vira dois cinzas vizinhos, o suficiente para dar ritmo sem piscar
	   branco no meio de uma página escura. */
	--ep-card-bg:                    #ffffff;
	--ep-card-fg:                    #1d1d1f;
	--ep-card-fg-variant:            #56565a;
	--ep-card-bg-alt:                #000000;
	--ep-card-fg-alt:                #f5f5f7;
	--ep-card-fg-alt-variant:        #a1a1a6;

	/* --- Cores de papel --- */
	--ep-primary:                    #000000;
	--ep-on-primary:                 #ffffff;
	--ep-primary-container:          #1d1d1f;
	--ep-on-primary-container:       #f5f5f7;
	--ep-secondary:                  #56565a;
	--ep-on-secondary:               #ffffff;
	--ep-secondary-container:        #e8e8ed;
	--ep-on-secondary-container:     #1d1d1f;
	--ep-tertiary:                   #56565a;
	--ep-on-tertiary:                #ffffff;
	--ep-tertiary-container:         #e0e0e5;
	--ep-on-tertiary-container:      #1d1d1f;
	--ep-error:                      #ba1a1a;
	--ep-on-error:                   #ffffff;
	--ep-error-container:            #ffdad6;
	--ep-on-error-container:         #410002;

	/* DERIVADO — o design.md não define cores de sucesso e aviso, e o
	   portal precisa das três (sucesso, aviso, erro). Construídas no
	   mesmo padrão do par error/error-container. */
	--ep-success:                    #1c6b3f;
	--ep-success-container:          #c3f0d3;
	--ep-on-success-container:       #002110;
	--ep-warning:                    #7a5900;
	--ep-warning-container:          #ffdf9a;
	--ep-on-warning-container:       #261a00;

	/* --- Tipografia --- */
	--ep-font: "InterVariable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--ep-display-lg-size: 57px;  --ep-display-lg-lh: 64px;  --ep-display-lg-ls: -0.02em;
	--ep-display-md-size: 45px;  --ep-display-md-lh: 52px;  --ep-display-md-ls: -0.01em;
	--ep-headline-lg-size: 32px; --ep-headline-lg-lh: 40px;
	--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;

	/* DERIVADO — degraus que faltavam entre headline-md (28px) e
	   body-lg (16px). Sem eles não há como titular um cartão ou um
	   campo de formulário sem repetir um tamanho de outro papel. */
	--ep-title-size: 22px;       --ep-title-lh: 28px;
	--ep-label-size: 13px;       --ep-label-lh: 18px;

	--ep-weight-display: 700;
	--ep-weight-headline: 600;
	--ep-weight-body: 400;
	--ep-weight-medium: 500;

	/* --- Espaçamento --- */
	--ep-container-padding: 24px;
	--ep-section-gap: 80px;

	/* Respiro das seções de PRODUTO. A Apple trabalha entre 100 e 140px
	   entre blocos; 80 era o valor do resto do site e fazia a página de
	   produto parecer uma lista comprimida. Escala com a tela para não
	   virar rolagem vazia no celular. */
	--ep-secao-gap: clamp(72px, 10vw, 140px);
	--ep-element-gap: 16px;
	/* DERIVADO — meio passo e passo duplo do element-gap. */
	--ep-gap-sm: 8px;
	--ep-gap-lg: 32px;

	/* DERIVADO — largura máxima do conteúdo. O design.md define o
	   respiro lateral (24px) mas não o trilho central. 1200px mantém
	   o texto corrido abaixo de 80 caracteres nos tamanhos acima. */
	--ep-container-max: 1200px;
	--ep-measure: 68ch;

	/* --- Elevação --- */
	--ep-elevation-subtle:  0 2px 4px rgba(0, 0, 0, 0.05);
	--ep-elevation-refined: 0 4px 12px rgba(0, 0, 0, 0.08);

	/* --- Arredondamento --- */
	--ep-round-full: 9999px;
	--ep-round-large: 24px;
	--ep-round-medium: 12px;
	/* DERIVADO — degrau para elementos pequenos (tags, avisos inline). */
	--ep-round-small: 8px;

	/* DERIVADO — barra de navegação nas proporções do site da Apple:
	   48px de altura, texto de 12px, logo de 20px. É bem menor que o
	   padrão de tema WordPress, e é o que dá a sensação de barra
	   discreta: a navegação não disputa atenção com o conteúdo.

	   O painel do menu em tela cheia começa exatamente abaixo da barra
	   — mudar --ep-header-h reposiciona os dois.

	   A ALTURA DA BARRA SEGUE O LOGO. Era fixa em 48px, calibrada para
	   uma marca de 24px; com um logotipo misto (símbolo + palavra numa
	   peça só) a marca ficava pequena demais para o olho e não havia
	   como crescer sem estourar a barra. Agora a barra é o logo mais
	   24px de respiro, com 56px de piso: aumentar --ep-logo-h aumenta a
	   barra junto, e o menu em tela cheia acompanha sozinho. */
	--ep-header-h: max(56px, calc(var(--ep-logo-h) + 24px));
	--ep-nav-size: 12px;

	/*
	 * Altura do logo. 24px é calibrado para a marca HORIZONTAL
	 * (símbolo + "Livese") e é AJUSTÁVEL NO PAINEL, em Personalizar →
	 * Identidade do site → "Altura do logo". O valor escolhido lá
	 * sobrescreve este, e vai de 20 a 96px.
	 *
	 * 24px, o valor antigo, foi calibrado para uma marca horizontal
	 * pura, de proporção 6:1. Logotipo misto — símbolo e palavra na
	 * mesma peça, empilhados ou com folga interna no PNG — tem a
	 * palavra ocupando metade da altura do arquivo, então 24px de caixa
	 * viram uns 12px de letra: some. Daí o padrão ter subido para 48px.
	 *
	 * Se um dia trocar para a marca só com o símbolo (quadrada), baixe
	 * para 32px: quadrado pesa mais que retangular na mesma altura,
	 * porque a área é o que o olho mede.
	 *
	 * PNG com margem transparente sobrando em volta engana esta conta.
	 * Se mesmo a 64px a marca parecer pequena, o problema é o arquivo:
	 * recorte a margem e o logo cresce sem tocar em nada aqui.
	 */
	--ep-logo-h: 48px;
}

/* =====================================================================
   FONTE — Inter 4.1, hospedada no próprio site
   ---------------------------------------------------------------------
   NÃO vem do Google Fonts, e a razão não é de gosto: buscar a fonte de
   lá faz o navegador do visitante entregar o IP dele a um terceiro, sem
   base legal declarada. Num site que já trata dado pessoal na área do
   cliente, é um vazamento evitável — e é o tipo de coisa que aparece
   num RIPD.

   É a fonte VARIÁVEL, com subset para latin. Um arquivo de 118 KB
   cobre os pesos 400 a 700 (o original de 344 KB traz 100 a 900 e
   todos os alfabetos). O eixo opsz vem junto: a Inter 4 traz os
   desenhos "Display" como tamanho óptico, então os títulos de 45px do
   design.md ganham o corte certo sem um segundo arquivo.

   Licença SIL Open Font em assets/fonts/LICENSE-Inter.txt. Ela exige
   que o arquivo de licença acompanhe a fonte — não apague.

   PARA ATUALIZAR: pegue a fonte variável em
   github.com/rsms/inter/releases e refaça o subset. Sem o subset o
   arquivo triplica.
   ===================================================================== */
@font-face {
	font-family: "InterVariable";
	src: url("assets/fonts/inter-variable-latin.woff2") format("woff2");
	font-weight: 400 700;  /* faixa, não valor: é fonte variável */
	font-style: normal;
	font-display: swap;    /* mostra o texto na fonte de reserva enquanto carrega, em vez de esconder */
}

/* =====================================================================
   2. BASE E TIPOGRAFIA
   ===================================================================== */
*,
*::before,
*::after { 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;

	/* Usa o eixo opsz da fonte variável: corte de texto nos tamanhos
	   pequenos, corte Display nos títulos grandes, automaticamente. */
	font-optical-sizing: auto;
}

/*
 * GUARDAS DE TRANSBORDO — o que de fato quebra um layout em tela
 * estreita não é a estrutura, é o conteúdo comprido demais para caber:
 * URL sem espaço, palavra longa, tabela de coberturas, imagem colada
 * pelo editor.
 *
 * overflow-x: clip no lugar de hidden porque hidden cria um contexto de
 * rolagem e desliga o position: sticky do cabeçalho — o clip corta sem
 * esse efeito colateral.
 */
body { overflow-x: clip; }

body,
.ep-entry-content,
.ep-prosa { overflow-wrap: break-word; }

/*
 * Item de grid e de flex tem min-width: auto por padrão, ou seja, se
 * recusa a encolher abaixo do próprio conteúdo. Um título longo numa
 * coluna estende a coluna, que estende a grade, que estoura a tela. É a
 * causa mais comum de rolagem horizontal indesejada.
 */
.ep-grid > *,
.ep-duo > *,
.ep-split > *,
.ep-grade > *,
.ep-painel > *,
.ep-footer__widgets > * { min-width: 0; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--ep-element-gap);
	color: var(--ep-on-surface);
	font-weight: var(--ep-weight-headline);
	text-wrap: balance;
}

h1 {
	font-size: var(--ep-display-md-size);
	line-height: var(--ep-display-md-lh);
	letter-spacing: var(--ep-display-md-ls);
	font-weight: var(--ep-weight-display);
}

h2 {
	font-size: var(--ep-headline-lg-size);
	line-height: var(--ep-headline-lg-lh);
}

h3 {
	font-size: var(--ep-headline-md-size);
	line-height: var(--ep-headline-md-lh);
}

h4 {
	font-size: var(--ep-title-size);
	line-height: var(--ep-title-lh);
}

h5, h6 {
	font-size: var(--ep-body-lg-size);
	line-height: var(--ep-body-lg-lh);
	font-weight: var(--ep-weight-medium);
}

p, ul, ol, dl, blockquote, pre, table, figure {
	margin: 0 0 var(--ep-element-gap);
}

p, li { max-width: var(--ep-measure); }

small,
.ep-label {
	font-size: var(--ep-label-size);
	line-height: var(--ep-label-lh);
	color: var(--ep-on-surface-variant);
}

a {
	color: var(--ep-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 2px; }

strong, b { font-weight: var(--ep-weight-headline); }

img, video, iframe, svg { max-width: 100%; height: auto; }

figure img { border-radius: var(--ep-round-medium); }

hr {
	height: 1px;
	margin: var(--ep-gap-lg) 0;
	border: 0;
	background: var(--ep-outline-variant);
}

blockquote {
	padding-left: var(--ep-element-gap);
	border-left: 2px solid var(--ep-primary);
	color: var(--ep-on-surface-variant);
}

code, pre, kbd {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: var(--ep-body-md-size);
}

pre {
	padding: var(--ep-element-gap);
	overflow-x: auto;
	background: var(--ep-surface-container);
	border-radius: var(--ep-round-medium);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ep-body-md-size);
}

/* Tabela de coberturas com cinco colunas não cabe num telefone. Em vez
   de esmagar as colunas até virar ilegível, a tabela rola dentro da
   própria caixa. O tabindex no PHP torna a caixa alcançável pelo
   teclado — caixa rolável sem foco é conteúdo inacessível. */
.ep-tabela {
	overflow-x: auto;
	margin-bottom: var(--ep-element-gap);
	-webkit-overflow-scrolling: touch;
}

.ep-tabela table { margin-bottom: 0; }

.ep-tabela th,
.ep-tabela td { white-space: nowrap; }

th, td {
	padding: var(--ep-gap-sm) var(--ep-element-gap);
	border-bottom: 1px solid var(--ep-outline-variant);
	text-align: left;
}

th { font-weight: var(--ep-weight-headline); }

/* =====================================================================
   3. LAYOUT
   ===================================================================== */
.ep-container {
	width: 100%;
	max-width: var(--ep-container-max);
	margin-inline: auto;
	padding-inline: var(--ep-container-padding);
}

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

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

/* O respiro entre seções vem do section-gap; o topo é menor porque o
   cabeçalho já ocupa altura. */
.ep-main > .ep-container {
	padding-block: var(--ep-gap-lg) var(--ep-section-gap);
}

.ep-stack > * + * { margin-top: var(--ep-element-gap); }

/* Respiro acima de um bloco solto. Existe para que nenhum template
   precise de style="" inline — inline não responde a token nem a
   media query. */
.ep-espaco-acima { margin-top: var(--ep-gap-lg); }

.ep-grid {
	display: grid;
	gap: var(--ep-gap-lg);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Alinhamentos do editor de blocos. */
.alignwide  { max-width: min(100%, 1080px); margin-inline: auto; }
.alignfull  { max-width: none; margin-inline: calc(var(--ep-container-padding) * -1); }
.alignleft  { float: left; margin: 0 var(--ep-element-gap) var(--ep-element-gap) 0; }
.alignright { float: right; margin: 0 0 var(--ep-element-gap) var(--ep-element-gap); }
.aligncenter { margin-inline: auto; text-align: center; }

/* =====================================================================
   4. ACESSIBILIDADE
   ===================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	/* Foco no verde, e não no preto: sobre um contêiner preto o anel
	   preto some, e é justamente no contêiner invertido que o teclado
	   mais precisa dele. */
	outline: 2px solid var(--ep-accent);
	outline-offset: 2px;
	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;
}

/* O link de pular precisa ficar visível ao receber foco — senão ele não
   serve para nada. */
.ep-skip-link:focus {
	position: fixed;
	top: var(--ep-element-gap);
	left: var(--ep-element-gap);
	z-index: 999;
	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;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =====================================================================
   5. CABEÇALHO
   ===================================================================== */
.ep-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--ep-surface) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--ep-outline-variant);
}

/* Sem color-mix (navegadores antigos), o fundo cai para o sólido. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.ep-header { background: var(--ep-surface); }
}

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

/* Abaixo de ~360px o nome do site corta em vez de empurrar o ícone e o
   hambúrguer para fora da tela. */
.ep-brand > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ep-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--ep-gap-sm);
	min-width: 0;   /* deixa encolher em vez de empurrar as ações */
	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;
}

.ep-brand img { max-height: var(--ep-logo-h); width: auto; }

/* Exceção ao corte com reticências acima: a descrição pode quebrar. */
.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);
}

.ep-nav ul {
	display: flex;
	align-items: center;
	gap: var(--ep-gap-lg);
	/* Espaçamento largo com texto pequeno: é a proporção que faz a
	   barra parecer arejada em vez de apertada. */
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.ep-nav a {
	display: block;
	padding-block: var(--ep-gap-sm);
	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;
}

.ep-nav a:hover,
.ep-nav .current-menu-item > a,
.ep-nav .current_page_item > a {
	color: var(--ep-on-surface);
}

/* =====================================================================
   MEGA MENU (só no desktop)
   ---------------------------------------------------------------------
   O painel ocupa a largura toda da janela e desce logo abaixo do
   cabeçalho, que continua no lugar. Os itens do submenu ficam em
   colunas, alinhados ao mesmo trilho do resto do site.

   Tudo isto vive dentro de um min-width: sem ele as regras vazariam
   para o celular e brigariam com a navegação em camadas.
   ===================================================================== */
@media (min-width: 1025px) {

	/*
	 * A LI PRECISA OCUPAR A ALTURA INTEIRA DO CABEÇALHO.
	 *
	 * Sem isto sobra uma faixa entre a base do item e a base da barra:
	 * o ponteiro descendo até o painel atravessa essa faixa, sai do
	 * item, o :hover cai e o painel fecha. Esticar a li até a base
	 * elimina o vão em vez de remendá-lo com um pseudo-elemento — e o
	 * painel, sendo filho da li no HTML, mantém o :hover enquanto o
	 * ponteiro estiver sobre ele.
	 */
	/*
	 * O menu ocupa o espaço entre a marca e as ações, e os itens se
	 * distribuem por ele. Agrupados à esquerda, como estavam, a barra
	 * fica pesada de um lado e vazia do outro — é a diferença de
	 * composição mais visível entre a nossa barra e a da Apple.
	 */
	.ep-nav {
		align-self: stretch;
		flex: 1;
	}

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

	.ep-nav > ul > li { display: flex; align-items: stretch; }

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

	/*
	 * position: static na li é o que faz o painel se medir pelo
	 * cabeçalho — que é sticky, portanto posicionado — e não pelo item.
	 * É daí que sai a largura total.
	 */
	.ep-nav .menu-item-has-children { position: static; }

	.ep-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--ep-gap-sm) var(--ep-gap-lg);
		margin: 0;
		padding: var(--ep-gap-lg) max(var(--ep-container-padding), calc((100vw - var(--ep-container-max)) / 2 + var(--ep-container-padding)));
		/* Branco sólido, sem desfoque: o painel é uma superfície própria,
		   não um véu sobre a página. Sólido também elimina o custo de
		   composição do backdrop-filter, que pesa em máquina modesta. */
		background: var(--ep-surface-container-lowest);
		border: 0;
		border-bottom: 1px solid var(--ep-outline-variant);
		border-radius: 0;
		box-shadow: var(--ep-elevation-refined);

		/* visibility em vez de display: none — só assim a opacidade tem
		   o que animar, e o painel fechado continua fora da ordem de
		   tabulação. */
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-6px);
		transition: opacity 180ms ease, transform 180ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 180ms;
	}

	.ep-nav .menu-item-has-children:hover > .sub-menu,
	.ep-nav .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition: opacity 180ms ease, transform 180ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
	}

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

	.ep-nav .sub-menu a {
		display: block;
		padding: var(--ep-gap-sm) 0;
		font-size: var(--ep-title-size);
		line-height: var(--ep-title-lh);
		font-weight: var(--ep-weight-headline);
		letter-spacing: -0.01em;
		color: var(--ep-primary);
		white-space: normal;
	}

	/* Sobre branco, o cinza de apoio já dá a resposta de interação sem
	   precisar de fundo nem sublinhado. */
	.ep-nav .sub-menu a:hover { color: var(--ep-on-surface-variant); }

	/* Seta do item pai: indica que há lista, e vira para cima quando o
	   painel está aberto. */
	.ep-nav .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-left: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 180ms ease;
	}

	.ep-nav .menu-item-has-children:hover > a::after,
	.ep-nav .menu-item-has-children:focus-within > a::after {
		transform: translateY(1px) rotate(-135deg);
	}

	/*
	 * A BARRA ACOMPANHA O PAINEL. O cabeçalho é translúcido; o painel
	 * é branco sólido. Encostados um no outro, aparece um degrau de cor
	 * na emenda. Com o painel aberto a barra vira branca também, e os
	 * dois viram uma superfície só.
	 */
	.ep-header:has(.menu-item-has-children:hover) ,
	.ep-header:has(.menu-item-has-children:focus-within) {
		background: var(--ep-surface-container-lowest);
		backdrop-filter: none;
		border-bottom-color: transparent;
	}

	/* Menu fechado à força pelo Esc (ver nav.js): sobrepõe o :hover até
	   o ponteiro sair e voltar. */
	.ep-nav.is-fechado .sub-menu {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.ep-header:has(.ep-nav.is-fechado) {
		background: color-mix(in srgb, var(--ep-surface) 88%, transparent);
		backdrop-filter: saturate(180%) blur(12px);
		border-bottom-color: var(--ep-outline-variant);
	}

	/* Painel estreito demais para quatro colunas num monitor menor. */
	@media (max-width: 1240px) {
		.ep-nav .sub-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}
}

/*
 * O BOTÃO DO MENU NÃO É UM BOTÃO DE AÇÃO.
 *
 * A regra genérica button:hover pinta o fundo de verde e tem mais peso
 * que uma classe sozinha — por isso o X ficava verde. Pior no celular:
 * o estado de hover GRUDA depois do toque, até você tocar em outro
 * lugar, então o verde continuava lá com o menu já fechado.
 *
 * Os três estados vêm declarados juntos, e é de propósito: qualquer um
 * que faltasse voltaria a cair na regra genérica.
 */
.ep-nav-toggle,
.ep-nav-toggle:hover,
.ep-nav-toggle:focus,
.ep-nav-toggle:active {
	background: transparent;
	border-color: var(--ep-outline);
	color: var(--ep-on-surface);
	transform: none;
}

.ep-nav-toggle {
	display: none;
	align-items: center;
	gap: var(--ep-gap-sm);
	padding: var(--ep-gap-sm) var(--ep-element-gap);
	background: transparent;
	border: 1px solid var(--ep-outline);
	border-radius: var(--ep-round-full);
	color: var(--ep-on-surface);
	font: inherit;
	font-size: var(--ep-body-md-size);
	cursor: pointer;
}

/* =====================================================================
   6. RODAPÉ
   ===================================================================== */
.ep-footer {
	margin-top: auto;
	padding-block: var(--ep-section-gap) var(--ep-gap-lg);
	background: var(--ep-surface-container-low);
	border-top: 1px solid var(--ep-outline-variant);
	font-size: var(--ep-body-md-size);
	line-height: var(--ep-body-md-lh);
	color: var(--ep-on-surface-variant);
}

.ep-footer__widgets {
	display: grid;
	gap: var(--ep-gap-lg);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-bottom: var(--ep-gap-lg);
}

.ep-footer .widget-title,
.ep-footer h2,
.ep-footer h3 {
	margin-bottom: var(--ep-gap-sm);
	font-size: var(--ep-label-size);
	line-height: var(--ep-label-lh);
	font-weight: var(--ep-weight-headline);
	color: var(--ep-on-surface);
}

.ep-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ep-footer li + li { margin-top: var(--ep-gap-sm); }

.ep-footer a { color: var(--ep-on-surface-variant); }

.ep-footer a:hover { color: var(--ep-on-surface); }

.ep-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ep-element-gap);
	padding-top: var(--ep-element-gap);
	border-top: 1px solid var(--ep-outline-variant);
}

.ep-footer__base p { margin: 0; max-width: none; }

/*
 * BOTÃO NO RODAPÉ.
 *
 * O rodapé é coluna estreita, e a pílula de 48px de altura desenhada
 * para a chamada principal estoura o alinhamento de tudo em volta. Aqui
 * ela vira um botão discreto — o mesmo verde, em escala de rodapé — e
 * nunca ocupa a largura inteira.
 */
.ep-footer .ep-button,
.ep-footer .wp-block-button__link,
.ep-footer button,
.ep-footer input[type="submit"] {
	width: auto;
	max-width: 100%;
	min-height: 40px;
	padding: 8px var(--ep-element-gap);
	font-size: var(--ep-label-size);
	line-height: var(--ep-label-lh);
}

/* Link de contato no rodapé não é botão: é link, como todos os outros
   da coluna. */
.ep-footer .ep-link-seta { padding-block: 4px; }

/* =====================================================================
   7. CONTEÚDO E CARTÕES
   ===================================================================== */
.ep-page-header { margin-bottom: var(--ep-gap-lg); }

.ep-page-header h1 { margin-bottom: var(--ep-gap-sm); }

.ep-entry-meta {
	font-size: var(--ep-body-md-size);
	line-height: var(--ep-body-md-lh);
	color: var(--ep-on-surface-variant);
}

.ep-card {
	display: flex;
	flex-direction: column;
	gap: var(--ep-gap-sm);
	padding: var(--ep-gap-lg);
	background: var(--ep-surface-container-lowest);
	border: 1px solid var(--ep-outline-variant);
	border-radius: var(--ep-round-large);
	box-shadow: var(--ep-elevation-subtle);
}

.ep-card h2,
.ep-card h3 {
	margin: 0;
	font-size: var(--ep-title-size);
	line-height: var(--ep-title-lh);
}

.ep-card h2 a,
.ep-card h3 a { text-decoration: none; }

.ep-card h2 a:hover,
.ep-card h3 a:hover { text-decoration: underline; }

.ep-card__thumb {
	display: block;
	margin: calc(var(--ep-gap-lg) * -1) calc(var(--ep-gap-lg) * -1) 0;
	overflow: hidden;
	border-radius: var(--ep-round-large) var(--ep-round-large) 0 0;
}

.ep-card__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
}

.ep-card p { margin: 0; }

.ep-entry-content > * + * { margin-top: var(--ep-element-gap); }

/*
 * DA ABERTURA ATÉ A CHAMADA FINAL, NENHUMA DIVISÓRIA.
 *
 * Vitrine e carrossel encostam no que vem antes e no que vem depois: o
 * espaçamento normal de conteúdo, entre eles, vira um fio do fundo da
 * página — e um fio entre duas peças lê como borda de tabela.
 *
 * Também vale para o painel escuro e para o empilhado, que sangram até
 * a borda pelo mesmo motivo.
 */
.ep-entry-content > .ep-vitrine,
.ep-entry-content > .ep-carrossel,
.ep-entry-content > .ep-vitrine + *,
.ep-entry-content > .ep-carrossel + * { margin-top: 0; }

.ep-entry-content h2,
.ep-entry-content h3 { margin-top: var(--ep-gap-lg); }

.ep-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ep-gap-sm);
	margin-top: var(--ep-gap-lg);
}

.ep-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--ep-gap-sm);
	border: 1px solid var(--ep-outline-variant);
	border-radius: var(--ep-round-full);
	color: var(--ep-on-surface-variant);
	text-decoration: none;
}

.ep-pagination .page-numbers.current {
	background: var(--ep-primary);
	border-color: var(--ep-primary);
	color: var(--ep-on-primary);
}

/* Comentários */
.ep-comments { margin-top: var(--ep-section-gap); }

.ep-comments .comment-list {
	margin: 0 0 var(--ep-gap-lg);
	padding: 0;
	list-style: none;
}

.ep-comments .comment-list li { max-width: none; }

.ep-comments article {
	padding: var(--ep-element-gap) 0;
	border-bottom: 1px solid var(--ep-outline-variant);
}

.ep-comments .children {
	margin-left: var(--ep-gap-lg);
	padding: 0;
	list-style: none;
}

/* =====================================================================
   8. FORMULÁRIOS E BOTÕES
   ---------------------------------------------------------------------
   Os seletores cobrem tanto o markup do tema quanto o dos formulários
   nativos do WordPress (busca, comentários) e o do Portal do Cliente,
   que imprime a mesma marcação do wp_login_form().
   ===================================================================== */
label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--ep-label-size);
	line-height: var(--ep-label-lh);
	font-weight: var(--ep-weight-medium);
	color: var(--ep-on-surface-variant);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: 12px var(--ep-element-gap);
	background: var(--ep-surface-container-lowest);
	border: 1px solid var(--ep-outline-variant);
	border-radius: var(--ep-round-medium);
	color: var(--ep-on-surface);
	font-family: inherit;
	font-size: var(--ep-body-lg-size);
	line-height: var(--ep-body-lg-lh);
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

input:hover:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select:hover,
textarea:hover { border-color: var(--ep-outline); }

input:focus:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select:focus,
textarea:focus {
	border-color: var(--ep-primary);
	box-shadow: 0 0 0 3px var(--ep-secondary-container);
	outline: none;
}

input::placeholder,
textarea::placeholder { color: var(--ep-outline); }

textarea { min-height: 140px; resize: vertical; }

input[type="checkbox"],
input[type="radio"] {
	width: 18px;
	height: 18px;
	margin-right: var(--ep-gap-sm);
	accent-color: var(--ep-accent);
	vertical-align: -3px;
}

/* Rótulo de checkbox volta a ser inline — do contrário a caixa e o
   texto quebram em linhas separadas. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
	display: flex;
	align-items: center;
	font-size: var(--ep-body-md-size);
	font-weight: var(--ep-weight-body);
	cursor: pointer;
}

button,
input[type="submit"],
input[type="button"],
.ep-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ep-gap-sm);
	min-height: 48px;
	padding: 12px var(--ep-gap-lg);
	/* A cor de AÇÃO é o verde da marca, com texto preto em cima. É a
	   única cor da página, e por isso ela sozinha já diz onde clicar. */
	background: var(--ep-accent);
	border: 1px solid var(--ep-accent);
	border-radius: var(--ep-round-full);
	color: var(--ep-on-accent);
	font-family: inherit;
	font-size: var(--ep-body-md-size);
	line-height: var(--ep-body-md-lh);
	font-weight: var(--ep-weight-medium);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease, transform 120ms ease;
}

button:hover,
input[type="submit"]:hover,
.ep-button:hover,
.wp-block-button__link:hover {
	background: var(--ep-accent-hover);
	border-color: var(--ep-accent-hover);
	color: var(--ep-on-accent);
}

button:active,
input[type="submit"]:active,
.ep-button:active { transform: translateY(1px); }

/*
 * LINK COM SETA — a ação secundária como texto, não como pílula.
 *
 * Dois botões preenchidos lado a lado competem entre si e nenhum vence;
 * o olho não sabe qual é o principal. Texto com chevron resolve a
 * hierarquia sem tirar o alcance do clique.
 *
 * O padding vertical não é estético: é o que dá ao link um alvo de
 * toque de 44px no celular. Link de texto puro tem a altura da linha, e
 * dedo não acerta 20px.
 */
.ep-link-seta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding-block: 12px;
	color: var(--ep-primary);
	font-size: var(--ep-body-md-size);
	line-height: var(--ep-body-md-lh);
	font-weight: var(--ep-weight-medium);
	text-decoration: none;
}

.ep-link-seta::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 160ms ease;
}

.ep-link-seta:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.ep-link-seta:hover::after { transform: translateX(2px) rotate(-45deg); }

/* Sobre foto, no bloco sobreposto do celular. */
.ep-bloco--sobreposto .ep-link-seta { color: #fff; }

/* Variante secundária: mesma forma, peso visual menor. */
.ep-button--ghost,
.ep-button--secondary {
	background: transparent;
	border-color: var(--ep-outline);
	color: var(--ep-on-surface);
}

.ep-button--ghost:hover,
.ep-button--secondary:hover {
	background: var(--ep-secondary-container);
	border-color: var(--ep-outline);
	color: var(--ep-on-secondary-container);
}

.ep-search-form {
	display: flex;
	gap: var(--ep-gap-sm);
	align-items: stretch;
}

.ep-search-form label { margin: 0; flex: 1; }

/* =====================================================================
   9. PORTAL DO CLIENTE
   ---------------------------------------------------------------------
   O plugin Portal do Cliente não carrega CSS nenhum, de propósito: ele
   devolve HTML semântico com os nomes de classe e os ids do próprio
   WordPress. Tudo o que o cliente vê nas telas de acesso é definido
   aqui.
   ===================================================================== */
.portal-cliente {
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
	padding: var(--ep-gap-lg);
	background: var(--ep-surface-container-lowest);
	border: 1px solid var(--ep-outline-variant);
	border-radius: var(--ep-round-large);
	box-shadow: var(--ep-elevation-refined);
}

/* O cadastro rápido do administrador tem mais campo e mais texto. */
.portal-cliente--cadastro-admin { max-width: 520px; }

.portal-cliente form { margin: 0; }

.portal-cliente p { max-width: none; }

.portal-cliente p + p { margin-top: var(--ep-element-gap); }

.portal-cliente .description {
	display: block;
	margin-top: 4px;
	font-size: var(--ep-label-size);
	line-height: var(--ep-label-lh);
	font-weight: var(--ep-weight-body);
	color: var(--ep-on-surface-variant);
}

/* O rótulo carrega o <span class="description"> com a regra da senha;
   sem isto os dois ficam colados. */
.portal-cliente label .description { margin-top: 2px; }

.portal-cliente .login-remember label {
	font-size: var(--ep-body-md-size);
	font-weight: var(--ep-weight-body);
	color: var(--ep-on-surface);
}

.portal-cliente .login-submit,
.portal-cliente .submit {
	margin-top: var(--ep-gap-lg);
	margin-bottom: 0;
}

.portal-cliente .login-submit input,
.portal-cliente .submit input[type="submit"] { width: 100%; }

/* A saída tem dois botões lado a lado: confirmar e cancelar. */
.portal-cliente--logout .submit {
	display: flex;
	gap: var(--ep-gap-sm);
}

.portal-cliente--logout .submit input[type="submit"] { width: auto; flex: 1; }

.portal-cliente--logout .submit .button:not([type="submit"]) {
	flex: 1;
	background: transparent;
	border-color: var(--ep-outline);
	color: var(--ep-on-surface);
}

.portal-seguranca {
	display: flex;
	justify-content: center;
	margin-top: var(--ep-element-gap);
}

/* O captcha de um plugin de segurança entra aqui com largura própria e
   costuma estourar o cartão em telas estreitas. */
.portal-seguranca > * { max-width: 100%; }

.portal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ep-gap-sm);
	justify-content: center;
	margin: var(--ep-element-gap) 0 0;
	font-size: var(--ep-body-md-size);
	line-height: var(--ep-body-md-lh);
	color: var(--ep-on-surface-variant);
}

.portal-links a { color: var(--ep-on-surface-variant); }

.portal-links a:hover { color: var(--ep-on-surface); }

/* --- Mensagens ------------------------------------------------------
   Três estados: sucesso, aviso e erro. A borda esquerda espessa é o
   que diferencia à distância, e a cor não é o único sinal — o texto do
   plugin já diz o que aconteceu.
   ------------------------------------------------------------------- */
.portal-msg {
	margin-bottom: var(--ep-element-gap);
	padding: 12px var(--ep-element-gap);
	border-radius: var(--ep-round-medium);
	border-left: 3px solid transparent;
	font-size: var(--ep-body-md-size);
	line-height: var(--ep-body-md-lh);
}

.portal-msg--sucesso {
	background: var(--ep-success-container);
	border-left-color: var(--ep-success);
	color: var(--ep-on-success-container);
}

.portal-msg--aviso {
	background: var(--ep-warning-container);
	border-left-color: var(--ep-warning);
	color: var(--ep-on-warning-container);
}

.portal-msg--erro {
	background: var(--ep-error-container);
	border-left-color: var(--ep-error);
	color: var(--ep-on-error-container);
}

.portal-msg a { color: inherit; }

/* --- Tela enxuta das páginas de acesso ------------------------------
   Usada pelo template templates/portal.php: sem menu, sem rodapé
   completo. A página existe para uma tarefa só.
   ------------------------------------------------------------------- */
.ep-portal-screen {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--ep-surface-container-low);
}

/* Barra fina, mesma altura do cabeçalho do site. Só a marca: é a única
   saída da tela, e leva para casa. */
.ep-portal-screen__topo {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--ep-container-max);
	min-height: var(--ep-header-h);
	margin-inline: auto;
	padding-inline: var(--ep-container-padding);
}

.ep-portal-screen__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--ep-gap-sm);
	font-size: var(--ep-body-lg-size);
	font-weight: var(--ep-weight-headline);
	letter-spacing: -0.01em;
	color: var(--ep-on-surface);
	text-decoration: none;
}

/* O corpo ocupa a altura que sobrou e centraliza o formulário nela —
   não na tela inteira. Centralizar na tela com a barra presente empurra
   o formulário para baixo do centro óptico. */
.ep-portal-screen__corpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--ep-gap-lg) var(--ep-container-padding);
}

.ep-portal-screen__bloco {
	width: 100%;
	max-width: 420px;
}

.ep-portal-screen__title {
	margin: 0 0 var(--ep-gap-sm);
	font-size: var(--ep-headline-md-size);
	line-height: var(--ep-headline-md-lh);
	text-align: center;
}

.ep-portal-screen__intro {
	margin: 0 auto;
	max-width: 420px;
	text-align: center;
	color: var(--ep-on-surface-variant);
	font-size: var(--ep-body-md-size);
	line-height: var(--ep-body-md-lh);
}

.ep-portal-screen__foot {
	margin: 0;
	padding: 0 var(--ep-container-padding) var(--ep-gap-lg);
	font-size: var(--ep-label-size);
	line-height: var(--ep-label-lh);
	color: var(--ep-on-surface-variant);
	text-align: center;
}

.ep-portal-screen__foot a { color: var(--ep-on-surface-variant); }

/* --- Área do cliente e listagem de documentos -----------------------
   Estilos genéricos para o conteúdo interno. Ajuste quando a listagem
   de documentos tiver layout definido.
   ------------------------------------------------------------------- */
.ep-area-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ep-element-gap);
	margin-bottom: var(--ep-gap-lg);
	padding-bottom: var(--ep-element-gap);
	border-bottom: 1px solid var(--ep-outline-variant);
}

.ep-area-header h1 {
	margin: 0;
	font-size: var(--ep-headline-lg-size);
	line-height: var(--ep-headline-lg-lh);
	font-weight: var(--ep-weight-headline);
	letter-spacing: 0;
}

.ep-doc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ep-doc-list li { max-width: none; }

.ep-doc-list li + li { margin-top: var(--ep-gap-sm); }

.ep-doc-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ep-element-gap);
	padding: var(--ep-element-gap);
	background: var(--ep-surface-container-lowest);
	border: 1px solid var(--ep-outline-variant);
	border-radius: var(--ep-round-medium);
	color: var(--ep-on-surface);
	text-decoration: none;
}

.ep-doc-list a:hover {
	border-color: var(--ep-outline);
	box-shadow: var(--ep-elevation-subtle);
}

/* =====================================================================
   10. RESPONSIVO
   ---------------------------------------------------------------------
   DERIVADO — o design.md não define breakpoints. 1024px separa o menu
   horizontal do menu recolhido, e 640px é onde a escala tipográfica
   grande precisa encolher para caber num telefone.
   ===================================================================== */
/* =====================================================================
   MENU EM CAMADAS — elementos criados pelo nav.js
   ---------------------------------------------------------------------
   No desktop nenhum deles aparece: lá o submenu abre por hover e o
   item pai continua sendo um link normal. Todos ganham corpo dentro da
   media query de 1024px.
   ===================================================================== */
.ep-nav__back,
.ep-nav__drill,
.ep-nav__all { display: none; }

@media (max-width: 1024px) {

	/*
	 * ALVO DE TOQUE. No desktop o ícone da área do cliente tem 32px,
	 * porque ponteiro de mouse acerta isso sem esforço. No celular ele
	 * volta a 44px: é o mínimo recomendado para o dedo, e o único lugar
	 * onde a estética da barra pequena cede à usabilidade.
	 */
	.ep-header__icone { width: 44px; height: 44px; }

	/* IMPORTANTE — backdrop-filter cria BLOCO DE CONTENÇÃO para
	   descendentes com position: fixed. Com o filtro no cabeçalho, o
	   painel abaixo seria posicionado em relação à barra do topo, e não
	   à janela: top e bottom passariam a medir dentro de 72px de
	   altura, e o menu abriria com altura zero. O desfoque sai daqui e
	   fica só no painel, que é onde ele aparece. */
	.ep-header {
		background: var(--ep-surface);
		backdrop-filter: none;
	}

	/* --- Botão: 44x44 (alvo de toque mínimo), duas barras que giram
	   em X. Fica ACIMA do painel, no mesmo lugar, para que fechar seja
	   o mesmo gesto que abrir. --- */
	.ep-nav-toggle {
		display: inline-flex;
		position: relative;
		z-index: 110;
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
		background: transparent;
		border: 0;
	}

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

	.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-nav-toggle__icon span:first-child { top: 0; }
	.ep-nav-toggle__icon span:last-child  { top: 10px; }

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

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

	/* --- Painel em tela cheia ---------------------------------------
	   Começa ABAIXO do cabeçalho: a barra do topo continua visível, com
	   a marca e o botão no lugar. É o que evita a sensação de ter saído
	   do site ao abrir o menu.

	   visibility + pointer-events em vez de display: none — só assim a
	   opacidade tem o que animar, e o painel fechado continua fora da
	   ordem de tabulação. --- */
	.ep-nav {
		display: block;
		position: fixed;
		top: var(--ep-header-h);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		padding: var(--ep-gap-lg) var(--ep-container-padding) var(--ep-section-gap);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--ep-surface-container-lowest);
		border: 0;
		box-shadow: none;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 200ms ease, visibility 0s linear 200ms;
	}

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

	.ep-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-width: var(--ep-container-max);
		margin-inline: auto;
	}

	/* Entrada escalonada. O --i de cada item é numerado pelo nav.js.
	   Só na ABERTURA: fechar escalonado dá impressão de travamento. */
	.ep-nav > ul > li {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 300ms ease,
		            transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
	}

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

	/* SEM traço entre os itens. O que separa é o espaço — no menu da
	   Apple não há uma linha sequer, e cada filete a mais aqui empurra
	   o menu de volta para a cara de painel administrativo. */

	/* Item de primeiro nível: grande e encorpado. O tracking negativo
	   é o que segura o conjunto — texto grande com espaçamento normal
	   fica solto e perde o bloco. */
	.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);
	}

	/* A página atual NÃO é destacada aqui, de propósito: todos os itens
	   têm o mesmo peso. Quem usa leitor de tela continua sabendo onde
	   está — o wp_nav_menu() já marca o item com aria-current="page". */

	/* --- Submenu em CAMADA -------------------------------------------
	   Tocar no item pai troca a lista: os irmãos somem e os filhos
	   ocupam a tela, no mesmo tamanho e peso do nível anterior. Um
	   botão "voltar" desfaz.

	   Sem JavaScript nada disso existe e o submenu volta a ficar no
	   fluxo, aberto abaixo do pai — o menu continua navegável. É por
	   isso que as regras abaixo dependem de .has-drill, classe que o
	   nav.js só põe depois de montar os botões.
	   ----------------------------------------------------------------- */
	.ep-nav .sub-menu {
		display: flex;
		position: static;
		margin: 0 0 var(--ep-element-gap);
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.ep-nav .sub-menu a {
		padding: var(--ep-gap-sm) 0;
		font-size: var(--ep-body-lg-size);
		font-weight: var(--ep-weight-medium);
		letter-spacing: -0.01em;
		color: var(--ep-on-surface-variant);
	}

	/* Com JS: o link do pai dá lugar ao botão que abre a camada. O link
	   não se perde — vira o primeiro item da camada ("Ver tudo em X"). */
	.ep-nav.has-drill .menu-item-has-children > a { display: none; }

	/* A seta do desktop sai daqui: no celular quem abre a camada é o
	   botão .ep-nav__drill, que já desenha a sua. */
	.ep-nav .menu-item-has-children > a::after { content: none; }

	.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;
	}

	.ep-nav__drill:hover,
	.ep-nav__drill:active {
		background: transparent;
		border: 0;
		color: var(--ep-on-surface);
		transform: none;
	}

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

	.ep-nav__drill::after { transform: rotate(-45deg); }
	.ep-nav__back::before { transform: rotate(135deg); }

	/* Fechado: os filhos ficam escondidos até a camada abrir. */
	.ep-nav.has-drill .sub-menu { display: none; }

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

	.ep-nav.is-drilled > ul > li.is-active {
		border-top: 0;
		opacity: 1;
		transform: none;
	}

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

	.ep-nav.is-drilled > ul > li.is-active > .sub-menu {
		display: flex;
		flex-direction: column;
		margin: 0;
		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-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);
	}

	/* Idem no submenu: espaço, não filete. */

	.ep-nav__all { display: block; }

	/* Botão voltar: fica acima da lista e nomeia de onde se está
	   saindo, em vez de um "voltar" solto. */
	.ep-nav.is-drilled .ep-nav__back {
		display: inline-flex;
		align-items: center;
		gap: var(--ep-gap-sm);
		min-height: 0;
		margin-bottom: var(--ep-element-gap);
		padding: var(--ep-gap-sm) 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;
	}

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

	@keyframes ep-camada {
		from { opacity: 0; transform: translateX(20px); }
		to   { opacity: 1; transform: none; }
	}

	.ep-header__inner { position: relative; }
}

/* Trava o rolamento do fundo com o menu aberto. Fora da media query
   porque a classe só é posta pelo JS, que já respeita o breakpoint. */
body.ep-nav-aberto { overflow: hidden; }

@media (max-width: 640px) {
	:root {
		--ep-section-gap: 56px;
		--ep-gap-lg: 24px;
	}

	h1 {
		font-size: var(--ep-headline-lg-size);
		line-height: var(--ep-headline-lg-lh);
		letter-spacing: -0.01em;
	}

	h2 {
		font-size: var(--ep-headline-md-size);
		line-height: var(--ep-headline-md-lh);
	}

	h3 {
		font-size: var(--ep-title-size);
		line-height: var(--ep-title-lh);
	}

	.portal-cliente { padding: var(--ep-element-gap); box-shadow: none; }

	.ep-portal-screen__corpo { padding-block: var(--ep-gap-lg) var(--ep-section-gap); }

	.ep-footer__base { flex-direction: column; align-items: flex-start; }
}

/* Impressão: sem cabeçalho fixo, sem menu, sem sombra. */
@media print {
	.ep-header,
	.ep-footer,
	.ep-nav-toggle,
	.ep-pagination { display: none !important; }

	body { background: #fff; }

	.portal-cliente,
	.ep-card { box-shadow: none; border-color: #999; }
}

/* =====================================================================
   11. BLOCOS DE PRODUTO
   ---------------------------------------------------------------------
   Duas formas do mesmo bloco:

     .ep-bloco--largo  ocupa a largura toda, texto centralizado
     .ep-duo           dois blocos lado a lado, texto alinhado à esquerda

   Em ambos a ordem é a mesma: título, subtítulo, botões, imagem. No
   celular o .ep-duo vira coluna única e os dois formatos ficam iguais.
   ===================================================================== */
.ep-blocos {
	display: flex;
	flex-direction: column;
	gap: var(--ep-section-gap);
}

.ep-bloco__texto {
	display: flex;
	flex-direction: column;
	gap: var(--ep-element-gap);
	margin-bottom: var(--ep-gap-lg);
}

.ep-bloco__titulo {
	margin: 0;
	font-size: var(--ep-display-md-size);
	line-height: var(--ep-display-md-lh);
	letter-spacing: var(--ep-display-md-ls);
	font-weight: var(--ep-weight-display);
}

.ep-bloco__sub {
	margin: 0;
	font-size: var(--ep-body-lg-size);
	line-height: var(--ep-body-lg-lh);
	color: var(--ep-on-surface-variant);
}

.ep-bloco__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ep-element-gap);
	margin: 0;
}

/* A imagem é o elemento mais pesado da página. O aspect-ratio fixo
   reserva o espaço antes de ela carregar — sem isso o texto abaixo
   pula quando cada foto chega, e isso conta contra o site no Core Web
   Vitals (CLS). */
/*
 * PLACA BRANCA. As fotos são objetos isolados sobre branco puro, e isso
 * muda duas decisões em relação a foto de cena:
 *
 *  1. FUNDO #fff FIXO, e não um token. A superfície do tema é #faf8fe,
 *     levemente arroxeada: branco puro encostado nela deixa uma emenda
 *     visível na borda da foto. Com a placa branca, foto e caixa são a
 *     mesma cor e a emenda some. No modo escuro a placa continua
 *     branca de propósito — é como um objeto sobre uma bandeja, que é
 *     o que a foto já mostra. Escurecer a caixa recortaria um retângulo
 *     branco no meio dela.
 *
 *  2. object-fit: contain, NÃO cover. Cover preenche a caixa cortando
 *     as bordas — num objeto isolado, corta justamente o objeto. Contain
 *     cabe a imagem inteira e sobra branco em volta, que aqui é o
 *     próprio fundo. De quebra, a proporção da foto deixa de importar:
 *     nada é cortado em nenhuma tela, e some a necessidade de uma
 *     variante retrato para o celular.
 */
.ep-bloco__midia {
	position: relative;
	overflow: hidden;
	padding: var(--ep-gap-lg);
	background: #fff;
	border: 1px solid var(--ep-outline-variant);
	border-radius: var(--ep-round-large);
}

.ep-bloco__midia img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}

/* --- Bloco largo --------------------------------------------------- */
.ep-bloco--largo .ep-bloco__texto {
	align-items: center;
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.ep-bloco--largo .ep-bloco__sub { max-width: 52ch; }

.ep-bloco--largo .ep-bloco__midia { aspect-ratio: 16 / 9; }

/* --- Par lado a lado ------------------------------------------------ */
.ep-duo {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ep-gap-lg);
}

.ep-duo .ep-bloco {
	display: flex;
	flex-direction: column;
}

/* Centralizado como nos largos: com objeto isolado e simétrico na
   foto, texto alinhado à esquerda desalinha do eixo da imagem. */
.ep-duo .ep-bloco__texto {
	align-items: center;
	text-align: center;
}

.ep-duo .ep-bloco__acoes { justify-content: center; }

/* Empurra a imagem para a base: com textos de alturas diferentes, as
   duas fotos da fileira continuam alinhadas entre si. */
.ep-duo .ep-bloco__midia {
	margin-top: auto;
	aspect-ratio: 4 / 3;
}

.ep-duo .ep-bloco__titulo {
	font-size: var(--ep-headline-lg-size);
	line-height: var(--ep-headline-lg-lh);
	letter-spacing: -0.01em;
	font-weight: var(--ep-weight-headline);
}

.ep-duo .ep-bloco__sub {
	font-size: var(--ep-body-md-size);
	line-height: var(--ep-body-md-lh);
}

/* --- Variante: texto SOBRE a foto ------------------------------------
   Modificador opcional. Aplique .ep-bloco--sobreposto para que, NO
   CELULAR, o texto entre por cima da imagem em vez de acima dela.

   O véu cobre só a faixa de baixo, não a foto inteira: escurecer tudo
   apaga a imagem e devolve um cinza. Na cor da marca, não em preto
   puro, para não brigar com a paleta.

   CONFIRA O CONTRASTE de cada foto. Texto branco precisa de 4,5:1
   sobre o ponto mais claro que ele cobre, e foto engana o olho — o
   véu abaixo foi calibrado para foto de tom médio, não para céu
   estourado.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
	.ep-bloco--sobreposto { position: relative; }

	.ep-bloco--sobreposto .ep-bloco__midia {
		aspect-ratio: 3 / 4;
		margin: 0;
	}

	.ep-bloco--sobreposto .ep-bloco__midia::after {
		content: "";
		position: absolute;
		inset: auto 0 0 0;
		height: 60%;
		background: linear-gradient(
			to top,
			rgba(10, 23, 31, 0.88) 0%,
			rgba(10, 23, 31, 0.45) 55%,
			rgba(10, 23, 31, 0) 100%
		);
	}

	.ep-bloco--sobreposto .ep-bloco__texto {
		position: absolute;
		z-index: 1;
		inset: auto 0 0 0;
		margin: 0;
		padding: var(--ep-gap-lg) var(--ep-element-gap);
		text-align: left;
		align-items: flex-start;
	}

	.ep-bloco--sobreposto .ep-bloco__titulo,
	.ep-bloco--sobreposto .ep-bloco__sub { color: #fff; }

	.ep-bloco--sobreposto .ep-bloco__sub { opacity: 0.85; }

	/* Fundo transparente some sobre foto: o botão secundário ganha
	   contorno branco. */
	.ep-bloco--sobreposto .ep-button--ghost {
		border-color: rgba(255, 255, 255, 0.7);
		color: #fff;
	}
}

@media (max-width: 900px) {
	/* Duas colunas num tablet dão blocos estreitos demais para título e
	   dois botões. Vira coluna única antes disso. */
	.ep-duo { grid-template-columns: 1fr; gap: var(--ep-section-gap); }

	.ep-duo .ep-bloco__midia { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
	.ep-bloco__titulo {
		font-size: var(--ep-headline-lg-size);
		line-height: var(--ep-headline-lg-lh);
		letter-spacing: -0.01em;
	}

	/* Continua centralizado no celular: o eixo do objeto na foto é o
	   centro, e o texto acompanha. */

	.ep-bloco--largo .ep-bloco__midia,
	.ep-duo .ep-bloco__midia { aspect-ratio: 4 / 3; }

	/* No telefone o botão ocupa a linha; o link com seta continua
	   inline, alinhado à esquerda embaixo dele. */
	.ep-bloco__acoes { flex-direction: column; align-items: center; }

	.ep-bloco__acoes .ep-button { width: 100%; }
}

/* =====================================================================
   12. PÁGINA DE PRODUTO
   ---------------------------------------------------------------------
   Ao contrário da home, esta página VARIA de produto para produto. Por
   isso aqui não há estrutura fixa: são peças soltas, aplicáveis pelo
   campo "Classes CSS" de qualquer container do Elementor ou pela
   opção "Classe(s) CSS adicional(is)" de um bloco do editor.

   O que se repete entre todos os produtos (topo e chamada final) está
   em templates/produto.php.
   ===================================================================== */

/* --- Topo da página de produto -------------------------------------- */
/* =====================================================================
   HERÓI DA PÁGINA DE PRODUTO
   ---------------------------------------------------------------------
   Foto de ponta a ponta com a chamada por cima, e mais nada. Era um
   título à esquerda com uma foto de catálogo à direita; virou o que a
   Apple faz em toda página de produto — imagem inteira, texto
   centralizado em cima dela, um botão.

   A foto é a IMAGEM DESTACADA da página. Sem ela o herói fica preto, e
   continua funcionando: nunca há um buraco na página.

   O véu em degradê não é enfeite. Foto de cena tem áreas claras
   imprevisíveis, e texto branco sobre céu claro simplesmente some. O
   degradê garante o contraste sem escurecer a imagem inteira.
   ===================================================================== */
/*
 * O texto NUNCA no meio da foto — ali ele cai sobre o assunto da imagem
 * e os dois se atrapalham. São duas posições, e a escolha é por
 * produto:
 *
 *   --rodape       nome e frase no canto inferior esquerdo, botão no
 *                  canto inferior direito, na mesma linha. Padrão dos
 *                  seguros.
 *   --topo-centro  nome, frase e botão centralizados no alto. O do DPO.
 */
.ep-hero {
	position: relative;
	display: grid;
	min-height: clamp(420px, 62vh, 700px);
	padding: var(--ep-gap-lg) max(var(--ep-container-padding), calc(50vw - var(--ep-container-max) / 2)) var(--ep-section-gap);
	overflow: hidden;
	background: var(--ep-black);
	color: var(--ep-on-black);
}

/* Rodapé: duas colunas na base — texto à esquerda, ação à direita, com
   a linha de base alinhada. */
.ep-hero--rodape {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: var(--ep-gap-lg);
	text-align: left;
}

.ep-hero--topo-centro {
	align-items: start;
	justify-items: center;
	text-align: center;
}

.ep-hero__midia {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ep-hero__midia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/*
 * O véu segue o texto: escuro onde ele está, quase transparente onde a
 * foto precisa aparecer. Escurecer a imagem inteira por igual seria
 * desperdiçar a foto que o cliente pagou para fazer — e é por isso que
 * cada variante tem o seu degradê, em vez de um só para as duas.
 */
.ep-hero::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ep-hero--rodape::after {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.25) 0%,
		rgba(0, 0, 0, 0.1) 35%,
		rgba(0, 0, 0, 0.55) 78%,
		rgba(0, 0, 0, 0.82) 100%
	);
}

.ep-hero--topo-centro::after {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.75) 0%,
		rgba(0, 0, 0, 0.45) 40%,
		rgba(0, 0, 0, 0.12) 70%,
		rgba(0, 0, 0, 0.3) 100%
	);
}

.ep-hero__conteudo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--ep-gap-sm);
	min-width: 0;
}

.ep-hero--topo-centro .ep-hero__conteudo {
	align-items: center;
	padding-top: var(--ep-gap-lg);
	/* Em pixels: ch aqui se mede na fonte do contêiner (16px), não na
	   do título de 88px — e um limite de 34ch quebrava "Para Você" em
	   duas linhas. */
	max-width: min(100%, 760px);
}

.ep-hero--topo-centro .ep-hero__sub { margin-inline: auto; }

/* O título é a mudança que mais aproxima da referência: 45px eram de
   página institucional, a Apple abre entre 56 e 96. O tracking negativo
   é o que segura o bloco — texto desse tamanho com espaçamento normal
   fica solto. */
.ep-hero h1 {
	margin: 0;
	max-width: 14ch;
	font-size: clamp(40px, 7vw, 88px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--ep-on-black);
}

.ep-hero--topo-centro h1 { max-width: none; }

.ep-hero__sub {
	margin: 0;
	max-width: 34ch;
	font-size: clamp(18px, 2vw, 26px);
	line-height: 1.35;
	/* Branco a 88%, e não o cinza do sistema: sobre foto o cinza médio
	   perde para qualquer área clara que o véu não cobrir. */
	color: rgba(255, 255, 255, 0.88);
}

.ep-hero__acoes {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--ep-element-gap);
	margin: 0;
}

/* No rodapé, a ação fica na MESMA linha do nome, no canto oposto: é o
   que fecha a base da foto sem empilhar nada em cima dela. */
.ep-hero--rodape .ep-hero__acoes { justify-content: flex-end; }

/* No topo centralizado, ela desce para baixo do texto. */
.ep-hero--topo-centro .ep-hero__acoes {
	grid-column: 1;
	flex-direction: column;
	justify-self: center;
	margin-top: var(--ep-element-gap);
}

/* Sobre foto, o link secundário precisa ser claro — o preto do tema
   sumiria no véu. */
.ep-hero .ep-link-seta { color: var(--ep-on-black); }


/* --- Seção dividida: texto de um lado, foto do outro -----------------
   Com texto explicativo de verdade, sobrepor à foto sai de questão:
   parágrafo sobre imagem não sustenta contraste nem leitura. Lado a
   lado resolve, e alternar o lado a cada seção dá ritmo à rolagem sem
   precisar de nenhum truque.
   --------------------------------------------------------------------- */
.ep-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--ep-gap-lg);
	margin-block: var(--ep-section-gap);
}

/* Inverte a ordem visual sem mexer no HTML — a ordem de leitura para
   teclado e leitor de tela continua a mesma. */
.ep-split--invertido .ep-split__midia { order: -1; }

.ep-split__midia {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	padding: var(--ep-gap-lg);
	background: #fff;
	border: 1px solid var(--ep-outline-variant);
	border-radius: var(--ep-round-large);
}

.ep-split__midia img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}

/* --- Texto corrido explicativo --------------------------------------- */
.ep-prosa > * + * { margin-top: var(--ep-element-gap); }

.ep-prosa h2 {
	font-size: var(--ep-headline-lg-size);
	line-height: var(--ep-headline-lg-lh);
	letter-spacing: -0.01em;
}

.ep-prosa h3 {
	font-size: var(--ep-title-size);
	line-height: var(--ep-title-lh);
}

.ep-prosa p {
	max-width: var(--ep-measure);
	color: var(--ep-on-surface-variant);
}

.ep-prosa > h2 + p,
.ep-prosa > h3 + p { margin-top: var(--ep-gap-sm); }

/* --- Coberturas: lista com marca de verificação ----------------------
   Cada item é uma cobertura, com nome e uma linha de explicação. O
   sinal é desenhado em CSS: sem fonte de ícone, sem SVG externo, sem
   requisição a mais.
   --------------------------------------------------------------------- */
.ep-coberturas {
	margin: var(--ep-gap-lg) 0 0;
	padding: 0;
	list-style: none;
}

.ep-coberturas li {
	position: relative;
	max-width: none;
	padding: var(--ep-element-gap) 0 var(--ep-element-gap) var(--ep-gap-lg);
	border-bottom: 1px solid var(--ep-outline-variant);
}

.ep-coberturas li::before {
	content: "";
	position: absolute;
	top: calc(var(--ep-element-gap) + 6px);
	left: 2px;
	width: 7px;
	height: 12px;
	border-right: 2px solid var(--ep-accent);
	border-bottom: 2px solid var(--ep-accent);
	transform: rotate(45deg);
}

.ep-coberturas strong {
	display: block;
	font-size: var(--ep-body-lg-size);
	font-weight: var(--ep-weight-headline);
	color: var(--ep-on-surface);
}

.ep-coberturas span {
	display: block;
	margin-top: 2px;
	font-size: var(--ep-body-md-size);
	line-height: var(--ep-body-md-lh);
	color: var(--ep-on-surface-variant);
}

/* --- Benefícios adicionais: grade ------------------------------------
   Cartões pequenos, sem foto. É o contraponto de ritmo depois de várias
   seções grandes com imagem — e benefício adicional não sustenta uma
   foto de tela cheia cada.
   --------------------------------------------------------------------- */
.ep-grade {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--ep-element-gap);
	margin-block: var(--ep-gap-lg);
}

.ep-grade > * {
	padding: var(--ep-gap-lg);
	background: var(--ep-surface-container-lowest);
	border: 1px solid var(--ep-outline-variant);
	border-radius: var(--ep-round-medium);
}

.ep-grade h3 {
	margin: 0 0 var(--ep-gap-sm);
	font-size: var(--ep-body-lg-size);
	line-height: var(--ep-body-lg-lh);
	font-weight: var(--ep-weight-headline);
}

.ep-grade p {
	margin: 0;
	max-width: none;
	font-size: var(--ep-body-md-size);
	line-height: var(--ep-body-md-lh);
	color: var(--ep-on-surface-variant);
}

/* --- Chamada final ---------------------------------------------------- */
.ep-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ep-element-gap);
	margin-block: var(--ep-section-gap);
	padding: var(--ep-section-gap) var(--ep-gap-lg);
	background: var(--ep-surface-container-low);
	border-radius: 0;
	text-align: center;
}

.ep-cta h2 {
	margin: 0;
	max-width: 20ch;
	font-size: var(--ep-headline-lg-size);
	line-height: var(--ep-headline-lg-lh);
}

.ep-cta p { margin: 0; max-width: 46ch; color: var(--ep-on-surface-variant); }

.ep-cta__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ep-gap-sm);
	justify-content: center;
	margin-top: var(--ep-gap-sm);
}

/* --- Aviso legal ------------------------------------------------------
   Texto de condições, referência à SUSEP, "consulte as condições
   gerais". Menor e mais claro, mas NÃO escondido: aviso legal
   ilegível é aviso legal que não cumpriu função.
   --------------------------------------------------------------------- */
.ep-nota {
	margin-block: var(--ep-gap-lg);
	padding: var(--ep-element-gap);
	border-left: 2px solid var(--ep-outline-variant);
	font-size: var(--ep-body-md-size);
	line-height: var(--ep-body-md-lh);
	color: var(--ep-on-surface-variant);
}

.ep-nota p { max-width: none; }

.ep-nota :last-child { margin-bottom: 0; }

/* --- Texto de abertura do miolo ---------------------------------------
   Duas linhas, logo abaixo do topo. Maior que o corpo e menor que o
   subtítulo: é a ponte entre a frase que vende e a grade que explica.
   --------------------------------------------------------------------- */
p.ep-lead {
	max-width: 46ch;
	margin: 0 auto var(--ep-secao-gap);
	font-size: clamp(19px, 2vw, 24px);
	line-height: 1.4;
	color: var(--ep-on-surface);
	text-align: center;
}

/* --- Seção de grade ---------------------------------------------------- */
.ep-secao { margin-block: var(--ep-secao-gap); }

/* Título de seção CENTRALIZADO e grande. Alinhado à esquerda e em 32px
   ele lia como subtítulo de relatório; centralizado e em 40-56px ele
   abre a seção, que é a função dele. */
/*
 * O TÍTULO DE SEÇÃO NÃO É SEMPRE CENTRALIZADO.
 *
 * Centralizar tudo foi um exagero meu. Na referência o centro é o
 * lugar do que ABRE — a primeira seção, a chamada final — e o resto
 * vem alinhado à esquerda, junto com o texto que o segue. Página
 * inteira centralizada perde o eixo de leitura.
 *
 * O padrão aqui é a ESQUERDA; o centro é o modificador, e quem escolhe
 * é ep_produto_secoes().
 */
h2.ep-secao__titulo {
	margin: 0 0 var(--ep-gap-lg);
	max-width: 20ch;
	font-size: clamp(30px, 4vw, 56px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-align: left;
}

h2.ep-secao__titulo--centro {
	margin-inline: auto;
	text-align: center;
}

/* --- IMAGEM DE ABERTURA, DE PONTA A PONTA ------------------------------
   Primeiro elemento de toda página de produto, no ritmo da Apple: uma
   imagem larga sangrando de borda a borda, antes de qualquer texto.

   O truque das margens negativas é o que a tira do trilho de 1200px sem
   precisar de um template diferente. Ele depende do overflow-x: clip
   que já está no body — sem ele, a imagem criaria rolagem lateral no
   site inteiro.
   --------------------------------------------------------------------- */
/* Os seletores levam a tag junto (figure.ep-...) de propósito: o bloco
   de imagem do WordPress traz margem e height: auto nas próprias
   classes, e sem o degrau de especificidade quem ganha depende da ordem
   em que os CSS forem enfileirados — que muda com plugin de cache. */
.ep-entry-content .alignfull,
figure.ep-hero-largo {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

figure.ep-hero-largo {
	margin-top: 0;
	margin-bottom: var(--ep-section-gap);
}

figure.ep-hero-largo img {
	display: block;
	width: 100%;
	/* Altura por clamp, e não por proporção fixa: a mesma foto precisa
	   virar faixa no desktop e não pode virar cartaz no celular. */
	height: clamp(220px, 42vw, 560px);
	object-fit: cover;
	border-radius: 0;
}

/* --- CONTÊINERES DE COBERTURA ------------------------------------------
   Um contêiner por cobertura, por assistência, por serviço. A diferença
   para a grade de ícones anterior não é decorativa: cartão dá presença
   própria a cada item — e dá o lugar da imagem. Ícone solto numa grade
   lê como legenda; contêiner com imagem lê como produto.

   Cada cartão traz, nesta ordem: a imagem, o nome, a linha de apoio. A
   imagem é um bloco de imagem de verdade no editor — clicar e trocar,
   sem tocar em código.
   --------------------------------------------------------------------- */
.ep-cards {
	display: grid;
	grid-template-columns: repeat(var(--ep-cards-cols, 2), minmax(0, 1fr));
	gap: var(--ep-element-gap);
	margin: var(--ep-gap-lg) 0 0;
	padding: 0;
	list-style: none;
}

/* O editor de blocos põe margem entre irmãos por conta própria. Dentro
   de uma grade isso vira um degrau vertical que ninguém pediu. */
.ep-cards > * { margin-block: 0; }

/* DOIS por linha, que é o que a referência faz. As outras contagens
   continuam disponíveis para quem montar uma grade à mão no builder,
   mas o tema não gera nenhuma delas. */
.ep-cards--col1 { --ep-cards-cols: 1; }
.ep-cards--col2 { --ep-cards-cols: 2; }
.ep-cards--col3 { --ep-cards-cols: 3; }
.ep-cards--col4 { --ep-cards-cols: 4; }

/* Contagem ímpar: o último ocupa a linha inteira em vez de ficar
   sozinho com um buraco ao lado. */
.ep-cards--impar > .ep-card:last-child { grid-column: 1 / -1; }

.ep-card {
	display: flex;
	flex-direction: column;
	gap: var(--ep-gap-sm);
	padding: var(--ep-gap-lg);
	background: var(--ep-card-bg);
	color: var(--ep-card-fg);
	/* CANTO RETO. Vale para contêiner, painel e imagem: o arredondado
	   era herança do sistema anterior, e é o detalhe que mais denuncia
	   um layout de template. Pílula só nos botões. */
	border-radius: 0;
	overflow: hidden;
}

/*
 * A GRADE NÃO ALTERNA.
 *
 * Tinha um xadrez de branco e preto aqui, e estava errado: a referência
 * nunca intercala contêiner a contêiner. O preto entra em SEÇÃO
 * INTEIRA, de tempos em tempos, como pausa — é o ritmo que está nos
 * painéis (ver ep-painel--escuro), não dentro da grade.
 *
 * A classe ep-cards--alternado continua existindo para quem quiser o
 * xadrez numa grade montada à mão, mas o tema não a aplica em lugar
 * nenhum.
 */
.ep-cards--alternado > .ep-card:nth-child(4n + 2),
.ep-cards--alternado > .ep-card:nth-child(4n + 3) {
	background: var(--ep-card-bg-alt);
	color: var(--ep-card-fg-alt);
}

.ep-cards--alternado > .ep-card:nth-child(4n + 2) .ep-card__titulo,
.ep-cards--alternado > .ep-card:nth-child(4n + 3) .ep-card__titulo { color: var(--ep-card-fg-alt); }

.ep-cards--alternado > .ep-card:nth-child(4n + 2) .ep-card__apoio,
.ep-cards--alternado > .ep-card:nth-child(4n + 3) .ep-card__apoio { color: var(--ep-card-fg-alt-variant); }

/* Item sem imagem ocupa a linha inteira, como fecho da grade. É o caso
   de "Morte", no Seguro de Vida: um buraco no meio da grade seria lido
   como falha de carregamento; uma linha inteira embaixo se lê como
   decisão. */
.ep-card--largo {
	grid-column: 1 / -1;
	flex-direction: column;
	align-items: flex-start;
}

/* --- O lugar da imagem dentro do cartão -------------------------------
   Proporção fixa e object-fit: contain. Contain, e não cover, porque a
   grade nasce com objetos renderizados sobre fundo transparente, e
   cover cortaria justamente o objeto. Para foto sangrando até a borda
   do cartão, acrescente ep-card__midia--sangra à imagem.
   --------------------------------------------------------------------- */
figure.ep-card__midia {
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 var(--ep-gap-sm);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

figure.ep-card__midia img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}

figure.ep-card__midia--sangra {
	margin: calc(var(--ep-gap-lg) * -1) calc(var(--ep-gap-lg) * -1) var(--ep-element-gap);
	border-radius: 0;
}

figure.ep-card__midia--sangra img { object-fit: cover; }

h3.ep-card__titulo {
	margin: 0;
	font-size: var(--ep-body-lg-size);
	line-height: var(--ep-body-lg-lh);
	font-weight: var(--ep-weight-headline);
	color: var(--ep-card-fg);
}

p.ep-card__apoio {
	margin: 0;
	max-width: none;
	font-size: var(--ep-body-md-size);
	line-height: var(--ep-body-md-lh);
	color: var(--ep-card-fg-variant);
}

/* --- Grade secundária: assistências e bônus ----------------------------
   Mesma estrutura, peso menor, e SEM alternância: duas grades de igual
   peso empilhadas fazem o visitante ler as duas sem saber qual importa
   — e a que importa é sempre a de cima.
   --------------------------------------------------------------------- */
.ep-cards--secundaria .ep-card {
	padding: var(--ep-element-gap);
	background: var(--ep-surface-container);
}

.ep-cards--secundaria figure.ep-card__midia {
	width: 56px;
	aspect-ratio: 1 / 1;
	margin-bottom: 4px;
}

.ep-cards--secundaria h3.ep-card__titulo {
	font-size: var(--ep-body-md-size);
	line-height: var(--ep-body-md-lh);
}

/* --- PAINEL DE COBERTURA ------------------------------------------------
   A cobertura que precisa de explicação não vira linha de acordeão no
   fim da página: vira uma seção própria, com a imagem de um lado e o
   texto do outro, e o lado alterna a cada painel.

   São três arranjos, e a página usa os três em rodízio — imagem à
   direita, imagem à esquerda, imagem inteira com o texto por cima. É o
   que evita a página inteira com a mesma composição repetida dez vezes.
   ----------------------------------------------------------------------- */
.ep-painel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
	margin-block: var(--ep-secao-gap);
}

.ep-painel--invertido > .ep-painel__midia { order: 2; }

figure.ep-painel__midia {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0;
	background: var(--ep-surface-container);
}

figure.ep-painel__midia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.ep-painel__texto { max-width: 46ch; }

/* Painel sem imagem: uma coluna, centralizado. Meia seção vazia ao lado
   do texto seria lida como imagem que não carregou. */
/*
 * O RITMO DO PRETO.
 *
 * A cada quatro painéis, um vem sobre fundo preto, de ponta a ponta. É
 * pausa, não decoração: uma sequência longa de seções claras cansa, e o
 * preto marca onde a leitura respira. Um a cada quatro dá duas pausas
 * numa página de dez coberturas.
 *
 * A sangria usa padding calculado em vez de um invólucro extra: o fundo
 * vai até a borda da tela e o conteúdo continua parado no trilho de
 * 1200px, alinhado com as seções claras de cima e de baixo.
 */
.ep-painel--escuro {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--ep-secao-gap) max(var(--ep-container-padding), calc(50vw - var(--ep-container-max) / 2));
	background: var(--ep-card-bg-alt);
	color: var(--ep-card-fg-alt);
}

.ep-painel--escuro h3.ep-painel__titulo,
.ep-painel--escuro p.ep-painel__apoio { color: var(--ep-card-fg-alt); }

.ep-painel--escuro .ep-painel__acao { margin: var(--ep-element-gap) 0 0; }

p.ep-painel__texto-longo { color: var(--ep-card-fg-alt-variant); }

/* Texto à esquerda sobre a foto, em vez de centralizado. O outro lugar
   que a referência usa — e alternar entre os dois é o que impede a
   página de ter um único eixo do começo ao fim. */
.ep-painel--sobreposto.ep-painel--texto-esquerda {
	justify-items: start;
	text-align: left;
	padding-inline: max(var(--ep-container-padding), calc(50vw - var(--ep-container-max) / 2));
}

.ep-painel--sobreposto.ep-painel--texto-esquerda .ep-painel__texto { margin-inline: 0; }

/* Sobreposto sem imagem é só uma faixa preta com o texto. Sem foto para
   sustentar, a altura de 620px vira um vazio: aqui ela passa a ser o
   próprio conteúdo mais o respiro da seção. */
.ep-painel--sobreposto.ep-painel--sem-imagem {
	min-height: 0;
	padding-block: var(--ep-secao-gap);
}

.ep-painel--sem-imagem {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}

.ep-painel--sem-imagem .ep-painel__texto { max-width: 42ch; }

h3.ep-painel__titulo {
	margin: 0 0 var(--ep-element-gap);
	font-size: clamp(26px, 3.2vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

p.ep-painel__apoio {
	margin: 0 0 var(--ep-element-gap);
	max-width: none;
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.4;
	color: var(--ep-on-surface);
}

p.ep-painel__texto-longo {
	margin: 0;
	max-width: none;
	color: var(--ep-on-surface-variant);
}

/* --- Painel EMPILHADO: imagem larga, texto embaixo ----------------------
   O quinto arranjo do ciclo. Aqui o texto NÃO vai sobre a imagem: fica
   abaixo dela, centralizado, no mesmo contêiner.

   Texto sobre foto só funciona quando a foto foi composta para isso,
   com área livre reservada. Numa grade de dez coberturas, em que cada
   imagem chega depois e de fonte diferente, ele acaba caindo em cima do
   assunto — some, ou some com a foto. Embaixo, os dois se leem.
   ----------------------------------------------------------------------- */
.ep-painel--empilhado {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	gap: var(--ep-gap-lg);
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-inline: max(var(--ep-container-padding), calc(50vw - var(--ep-container-max) / 2));
}

.ep-painel--empilhado > figure.ep-painel__midia {
	width: 100%;
	aspect-ratio: 21 / 9;
}

.ep-painel--empilhado .ep-painel__texto {
	max-width: 52ch;
	margin-inline: auto;
}

/* --- Painel com o texto SOBRE a imagem ---------------------------------
   Continua disponível para quem montar à mão no builder, com uma foto
   escolhida para isso. O tema não usa mais no rodízio.
   ----------------------------------------------------------------------- */
.ep-painel--sobreposto {
	position: relative;
	display: grid;
	place-items: center;
	grid-template-columns: 1fr;
	min-height: clamp(360px, 52vh, 620px);
	padding: var(--ep-section-gap) var(--ep-container-padding);
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	background: var(--ep-black);
	color: var(--ep-on-black);
	text-align: center;
}

.ep-painel--sobreposto > figure.ep-painel__midia {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	background: none;
}

.ep-painel--sobreposto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.7) 100%);
}

.ep-painel--sobreposto .ep-painel__texto {
	position: relative;
	z-index: 1;
	max-width: 40ch;
	margin-inline: auto;
}

.ep-painel--sobreposto h3.ep-painel__titulo,
.ep-painel--sobreposto p.ep-painel__apoio { color: var(--ep-on-black); }

.ep-painel--sobreposto p.ep-painel__texto-longo { color: rgba(255, 255, 255, 0.82); }

/* =====================================================================
   PEÇAS DAS PÁGINAS INSTITUCIONAIS
   ===================================================================== */

/* --- VITRINE ------------------------------------------------------------
   A peça da home e do topo das páginas-porta: foto de ponta a ponta, o
   NOME DO PRODUTO no alto e ao centro, a frase logo abaixo e as ações
   em seguida.

   Alto e centralizado é a posição da referência em toda vitrine de
   produto, e a que deixa a foto inteira visível embaixo do texto.

   AS PEÇAS SE TOCAM. Houve aqui um vão de 12px entre elas, e estava
   errado: a referência empilha as peças sem divisória nenhuma, e é a
   própria foto de cada uma que marca onde uma acaba e a outra começa.
   O fio de fundo lia como borda de tabela.
   ----------------------------------------------------------------------- */
/*
 * AS PEÇAS ALTERNAM CLARO E ESCURO.
 *
 * Sem divisória entre elas, duas peças seguidas do mesmo tom viram um
 * bloco só. A alternância resolve isso sem desenhar nada — e é o que a
 * referência faz numa pilha de vitrines. Quem escolhe o tom é o PHP,
 * pela ordem.
 */
.ep-vitrine {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	align-content: start;
	justify-items: center;
	gap: var(--ep-gap-sm);
	min-height: clamp(460px, 68vh, 760px);
	padding: var(--ep-section-gap) var(--ep-container-padding);
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-block: 0;
	overflow: hidden;
	background: var(--ep-card-bg-alt);
	color: var(--ep-card-fg-alt);
	text-align: center;
}

/*
 * AS PEÇAS ALTERNAM CLARO E ESCURO.
 *
 * Sem divisória entre elas, duas peças seguidas do mesmo tom viram um
 * bloco só. A alternância separa sem desenhar nada — e é o que a
 * referência faz numa pilha de vitrines. Quem escolhe o tom é o PHP,
 * pela ordem na pilha.
 */
.ep-vitrine--claro {
	background: var(--ep-card-bg);
	color: var(--ep-card-fg);
}

.ep-vitrine--claro p.ep-vitrine__sub { color: var(--ep-card-fg-variant); }

/* Uma peça só, do mesmo tamanho, para todo produto e todo serviço. A
   variante pela metade que existia aqui dava duas peças diferentes para
   a mesma coisa, e o visitante lia hierarquia onde não há. */

/* --- A IMAGEM DA VITRINE -----------------------------------------------
   PNG do produto sobre fundo sólido, e não fotografia de cena atrás do
   texto. É outra peça: aqui a imagem tem fundo transparente e precisa
   aparecer INTEIRA, encostada na base, com o nome respirando acima
   dela. Recortar um PNG de produto é cortar o produto.

   Para quem quiser o outro caminho — foto de cena preenchendo a peça,
   texto por cima — existe ep-vitrine--foto, logo abaixo.
   ----------------------------------------------------------------------- */
figure.ep-vitrine__midia {
	position: relative;
	z-index: 1;
	align-self: end;
	justify-self: center;
	width: 100%;
	max-width: 720px;
	margin: 0;
	min-height: 0;
}

figure.ep-vitrine__midia img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: clamp(200px, 32vh, 380px);
	object-fit: contain;
	object-position: center bottom;
	border-radius: 0;
}

/* --- Vitrine de FOTO ----------------------------------------------------
   A variante para fotografia de cena: a imagem preenche a peça, o texto
   vai por cima e o véu garante o contraste. Não é o padrão porque foto
   de cena com texto em cima só funciona quando a foto foi composta para
   isso.
   ----------------------------------------------------------------------- */
.ep-vitrine--foto > figure.ep-vitrine__midia {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none;
}

.ep-vitrine--foto > figure.ep-vitrine__midia img {
	max-height: none;
	object-fit: cover;
	object-position: center;
}

.ep-vitrine--foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.7) 0%,
		rgba(0, 0, 0, 0.4) 38%,
		rgba(0, 0, 0, 0.1) 68%,
		rgba(0, 0, 0, 0.25) 100%
	);
}

.ep-vitrine__texto {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ep-gap-sm);
	/* Em pixels, e não em ch: a unidade ch se mede na fonte do
	   contêiner, não na do título, e um limite de 30ch quebrava
	   "Consultoria em DPO" em duas linhas sem necessidade. */
	max-width: min(100%, 760px);
}

h2.ep-vitrine__titulo {
	margin: 0;
	max-width: none;
	font-size: clamp(34px, 5vw, 64px);
	line-height: 1.06;
	letter-spacing: -0.025em;
	text-align: center;
	color: inherit;
}

p.ep-vitrine__sub {
	margin: 0;
	max-width: 32ch;
	font-size: clamp(17px, 1.8vw, 23px);
	line-height: 1.35;
	color: var(--ep-card-fg-alt-variant);
}

.ep-vitrine .ep-link-seta { color: inherit; }
.ep-vitrine h2.ep-vitrine__titulo { color: inherit; }

.ep-vitrine--foto h2.ep-vitrine__titulo,
.ep-vitrine--foto .ep-link-seta { color: var(--ep-on-black); }

.ep-vitrine--foto p.ep-vitrine__sub { color: rgba(255, 255, 255, 0.88); }

/* --- CARROSSEL ----------------------------------------------------------
   Rolagem horizontal com encaixe, sem JavaScript nenhum: funciona no
   toque, no trackpad e na roda do mouse, e cada vitrine continua
   alcançável pelo teclado porque os links dentro dela recebem foco.

   Uma biblioteca de carrossel custaria 30 KB e um bug de acessibilidade
   para fazer o que quatro linhas de CSS fazem.
   ----------------------------------------------------------------------- */
.ep-carrossel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.ep-carrossel::-webkit-scrollbar { display: none; }

/* Cada vitrine ocupa 92% da largura, e não 100%: a fatia da próxima
   que aparece na borda é o que avisa que há mais para o lado. Carrossel
   que preenche a tela inteira parece imagem parada — o visitante não
   arrasta o que não sabe que existe. */
.ep-carrossel > .ep-vitrine {
	flex: 0 0 92%;
	width: 92%;
	max-width: none;
	margin: 0;
	scroll-snap-align: center;
}

.ep-carrossel > .ep-vitrine + .ep-vitrine { margin-left: 0; }

/* --- AÇÕES --------------------------------------------------------------
   Link discreto e pílula, nessa ordem. O link vem antes porque é a
   opção de quem ainda está decidindo; a pílula fecha a linha.

   Na vitrine as duas são PEQUENAS e ficam lado a lado. A peça grande
   ali é o nome do produto — botão de 48px sobre a foto rouba a cena de
   quem deveria estar vendendo.
   ----------------------------------------------------------------------- */
.ep-button--pequeno {
	min-height: 36px;
	padding: 7px var(--ep-element-gap);
	font-size: var(--ep-label-size);
	line-height: var(--ep-label-lh);
}

.ep-acoes--compacto {
	gap: var(--ep-gap-sm);
	margin-top: var(--ep-gap-sm);
}

.ep-acoes--compacto .ep-link-seta {
	font-size: var(--ep-label-size);
	line-height: var(--ep-label-lh);
}

.ep-acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ep-element-gap);
	margin: var(--ep-element-gap) 0 0;
}

.ep-vitrine .ep-acoes { justify-content: center; }

.ep-acoes--centro { justify-content: center; }

/* --- PILARES ------------------------------------------------------------ */
.ep-pilares {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ep-gap-lg);
	margin: var(--ep-secao-gap) 0;
	padding: 0;
	list-style: none;
}

.ep-pilares__item { min-width: 0; }

h3.ep-pilares__titulo {
	margin: 0 0 var(--ep-gap-sm);
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

p.ep-pilares__texto {
	margin: 0;
	max-width: 34ch;
	color: var(--ep-on-surface-variant);
}

/* Sobretítulo em versalete: a etiqueta pequena acima do título de
   seção. Vai no verde só quando a seção é clara — sobre preto ele
   passa a competir com o botão. */
p.ep-sobretitulo {
	margin: 0 0 var(--ep-gap-sm);
	max-width: none;
	font-size: var(--ep-label-size);
	line-height: var(--ep-label-lh);
	font-weight: var(--ep-weight-headline);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ep-on-surface-variant);
}

/* --- AS DUAS PORTAS -----------------------------------------------------
   "Para Você" e "Para a sua Empresa", lado a lado no computador e uma
   embaixo da outra no celular. O cartão inteiro é o link — não só o
   botão —, que é o que evita o alvo de toque pequeno no celular.
   ----------------------------------------------------------------------- */
.ep-portas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ep-element-gap);
	margin: var(--ep-gap-lg) 0 var(--ep-secao-gap);
}

.ep-porta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ep-gap-sm);
	padding: var(--ep-section-gap) var(--ep-gap-lg);
	background: var(--ep-card-bg);
	color: var(--ep-card-fg);
	text-decoration: none;
}

/* A segunda porta é a escura: as duas juntas repetem, em pequeno, o
   preto e branco que organiza o resto da página. */
.ep-portas > .ep-porta:nth-child(2) {
	background: var(--ep-card-bg-alt);
	color: var(--ep-card-fg-alt);
}

.ep-porta__titulo {
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.15;
	font-weight: var(--ep-weight-headline);
	letter-spacing: -0.02em;
}

.ep-porta__sub {
	max-width: 28ch;
	color: inherit;
	opacity: 0.75;
}

.ep-porta__acao { margin-top: var(--ep-element-gap); }

/* --- PASSOS -------------------------------------------------------------
   Os três passos do agilizador. O número é grande e fica em cima do
   título: é ele que diz "isto é uma sequência", antes de qualquer
   palavra ser lida.
   ----------------------------------------------------------------------- */
.ep-passos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ep-gap-lg);
	margin: var(--ep-secao-gap) 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ep-passos__item { min-width: 0; }

.ep-passos__numero {
	display: block;
	margin-bottom: var(--ep-gap-sm);
	font-size: clamp(40px, 5vw, 64px);
	line-height: 1;
	font-weight: var(--ep-weight-headline);
	letter-spacing: -0.03em;
	color: var(--ep-accent);
}

h3.ep-passos__titulo {
	margin: 0 0 var(--ep-gap-sm);
	font-size: clamp(19px, 2vw, 24px);
	line-height: 1.2;
}

p.ep-passos__texto {
	margin: 0;
	max-width: 34ch;
	color: var(--ep-on-surface-variant);
}

/* --- CONTATO ------------------------------------------------------------ */
.ep-contato {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ep-gap-lg);
	margin: var(--ep-secao-gap) 0;
	padding: 0;
	list-style: none;
}

.ep-contato__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: var(--ep-element-gap);
	border-top: 1px solid var(--ep-outline-variant);
}

.ep-contato__rotulo {
	font-size: var(--ep-label-size);
	line-height: var(--ep-label-lh);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ep-on-surface-variant);
}

.ep-contato__valor {
	font-size: clamp(18px, 2vw, 22px);
	line-height: 1.3;
	font-weight: var(--ep-weight-headline);
}

/* --- Textos expandidos: acordeão ---------------------------------------
   <details> nativo. Abre sem JavaScript, é indexado fechado pelos
   buscadores e o Ctrl+F do navegador acha o texto lá dentro — três
   coisas que um acordeão feito à mão perde.
   --------------------------------------------------------------------- */
.ep-detalhes__item {
	border-bottom: 1px solid var(--ep-outline-variant);
}

.ep-detalhes .ep-secao__titulo + .ep-detalhes__item {
	margin-top: var(--ep-gap-lg);
	border-top: 1px solid var(--ep-outline-variant);
}

.ep-detalhes summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ep-element-gap);
	padding: var(--ep-element-gap) 0;
	cursor: pointer;
	font-size: var(--ep-body-lg-size);
	line-height: var(--ep-body-lg-lh);
	font-weight: var(--ep-weight-headline);
	list-style: none;
}

/* Os dois seletores fazem a mesma coisa em motores diferentes: sem eles
   o triângulo nativo aparece ao lado do sinal desenhado abaixo. */
.ep-detalhes summary::-webkit-details-marker { display: none; }
.ep-detalhes summary::marker { content: ""; }

.ep-detalhes summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border-right: 2px solid var(--ep-on-surface-variant);
	border-bottom: 2px solid var(--ep-on-surface-variant);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
}

.ep-detalhes__item[open] summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.ep-detalhes__corpo {
	padding-bottom: var(--ep-element-gap);
}

.ep-detalhes__corpo p {
	margin: 0;
	max-width: var(--ep-measure);
	color: var(--ep-on-surface-variant);
}

@media (prefers-reduced-motion: reduce) {
	.ep-detalhes summary::after { transition: none; }
}

@media (max-width: 900px) {
	.ep-painel,
	.ep-split {
		grid-template-columns: 1fr;
		gap: var(--ep-gap-lg);
	}

	/* No empilhamento a foto vem SEMPRE antes do texto, inclusive nos
	   painéis invertidos: alternar lado só faz sentido lado a lado, e
	   imagem primeiro é o que a Apple faz na coluna única. */
	.ep-split--invertido .ep-split__midia { order: 0; }
	.ep-painel--invertido > .ep-painel__midia { order: 0; }

	/* Qualquer que seja a contagem, no tablet a grade cabe em duas
	   colunas: cinco contêineres em 768px ficariam com a largura de uma
	   coluna de jornal. */
	.ep-cards { --ep-cards-cols: 2; }

	.ep-pilares,
	.ep-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	figure.ep-hero-largo { margin-bottom: var(--ep-gap-lg); }
}

@media (max-width: 640px) {
	/*
	 * TUDO EM UMA COLUNA no celular, inclusive as duas portas: lado a
	 * lado numa tela de 390px elas viram dois cartões estreitos com o
	 * botão espremido, e o botão é o motivo de a porta existir.
	 */
	.ep-portas,
	.ep-pilares,
	.ep-passos,
	.ep-contato { grid-template-columns: 1fr; }

	.ep-porta { padding: var(--ep-gap-lg); }

	.ep-porta .ep-button { width: 100%; text-align: center; }

	/* O herói de rodapé empilha: o botão desce para baixo do nome. Em
	   390px não há largura para nome e pílula na mesma linha. */
	.ep-hero--rodape {
		grid-template-columns: 1fr;
		gap: var(--ep-element-gap);
	}

	.ep-hero--rodape .ep-hero__acoes { justify-content: flex-start; }

	.ep-hero__acoes .ep-button,
	.ep-vitrine .ep-button { width: 100%; text-align: center; }

	.ep-vitrine { padding-inline: var(--ep-container-padding); }

	/* No celular a vitrine não ocupa a tela inteira: dez peças de tela
	   cheia seguidas viram rolagem sem fim, e o visitante desiste antes
	   do último produto. */
	.ep-vitrine { min-height: clamp(400px, 62vh, 520px); }

	.ep-vitrine .ep-acoes { flex-direction: column; width: 100%; }

	/* TELA CHEIA no celular. svh, e não vh: no celular o vh conta a
	   barra do navegador que some ao rolar, e a foto ficaria cortada na
	   primeira pintura. O desconto da barra do topo é o que faz a
	   imagem ocupar exatamente o que se vê, sem sobra e sem rolagem. */
	.ep-hero { min-height: calc(100svh - var(--ep-header-h)); }

	@supports not (height: 100svh) {
		.ep-hero { min-height: calc(100vh - var(--ep-header-h)); }
	}

	.ep-painel--sobreposto { min-height: clamp(340px, 60vh, 480px); }

	.ep-hero__acoes .ep-button,
	.ep-cta__acoes .ep-button { width: 100%; }

	.ep-cta { padding: var(--ep-gap-lg) var(--ep-element-gap); }

	/* UMA coluna no celular. Eu tinha posto duas para encurtar a
	   rolagem de uma grade de dez; a referência empilha, e empilhado o
	   contêiner tem largura para a imagem respirar em vez de virar
	   miniatura. */
	.ep-cards { --ep-cards-cols: 1; gap: var(--ep-element-gap); }

	/* 12px, e não 16: em duas colunas de 390px a diferença é o que
	   decide se "Responsabilidade" cabe na linha ou é partida no meio
	   pelo navegador. Medido: 141px de espaço útil contra 139px de
	   palavra. */
	.ep-card { padding: 12px; }

	figure.ep-card__midia--sangra {
		margin: -12px -12px var(--ep-gap-sm);
	}

	.ep-cards--secundaria figure.ep-card__midia { width: 40px; }

	/* Em duas colunas de celular a coluna tem uns 140px. "Responsabilidade"
	   em 16px não cabe e o navegador parte a palavra no meio, sem hífen.
	   14px cabe; a hifenização fica de rede de segurança para o dia em que
	   alguém escrever um rótulo ainda mais longo. */
	h3.ep-card__titulo {
		font-size: var(--ep-body-md-size);
		line-height: var(--ep-body-md-lh);
		/* Rede de segurança para um rótulo mais longo que os de hoje:
		   com dicionário de hifenização (celular real), a palavra sai
		   com hífen; sem ele, o navegador parte como partia antes. */
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	p.ep-card__apoio {
		font-size: var(--ep-label-size);
		line-height: var(--ep-label-lh);
	}

	p.ep-lead {
		font-size: var(--ep-body-lg-size);
		line-height: var(--ep-body-lg-lh);
	}
}

/* =====================================================================
   13. AÇÕES DO CABEÇALHO E RODAPÉ COMPLETO
   ===================================================================== */

/* --- Ações do cabeçalho ---------------------------------------------- */
.ep-header__acoes {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: none;   /* nunca encolhe: é a marca que cede espaço */
}

.ep-nav-toggle { margin-left: var(--ep-gap-sm); }

/* Ícone do cabeçalho.
 *
 * O desenho tem 16px para casar OPTICAMENTE com o texto de 12px do
 * menu: ícone e letra do mesmo tamanho em pixels não parecem do mesmo
 * tamanho, porque a letra ocupa só parte da altura da linha. A caixa de
 * 32px é o alvo do ponteiro, não o tamanho aparente.
 *
 * Classe genérica de propósito: se um dia entrar um segundo ícone ao
 * lado, ele nasce igual sem regra nova. */
.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-variant);
	text-decoration: none;
}

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


/* --- Rodapé: colunas -------------------------------------------------- */
.ep-footer__col ul { margin: 0; padding: 0; list-style: none; }

/* Redes: em linha, com alvo de toque de 40px. Ícone de 20px sozinho é
   pequeno demais para o dedo. */
.ep-redes {
	display: flex;
	gap: var(--ep-gap-sm);
}

.ep-redes li + li { margin-top: 0; }

.ep-redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: -10px;   /* alinha o ícone com o texto das outras colunas */
	border-radius: var(--ep-round-full);
	color: var(--ep-on-surface-variant);
}

.ep-redes a:hover {
	background: var(--ep-surface-container);
	color: var(--ep-on-surface);
}

.ep-redes li:first-child a { margin-left: -10px; }

.ep-footer__legais {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ep-element-gap);
	margin: 0;
	max-width: none;
}

/* Registro SUSEP e o aviso que o acompanha: menores, mas legíveis.
   Informação obrigatória ilegível não cumpriu a obrigação. */
.ep-footer__registro {
	margin: var(--ep-element-gap) 0 0;
	max-width: 90ch;
	font-size: var(--ep-label-size);
	line-height: var(--ep-label-lh);
	color: var(--ep-on-surface-variant);
}

@media (max-width: 1024px) {
}

@media (max-width: 640px) {
	.ep-footer__base { flex-direction: column; align-items: flex-start; }

	.ep-footer__legais { flex-direction: column; gap: var(--ep-gap-sm); }
}

/* =====================================================================
   14. LOGO CLARO E LOGO ESCURO
   ---------------------------------------------------------------------
   A troca é por CSS, não por JavaScript: assim o logo certo já vem na
   primeira pintura, sem o piscar de um logo que aparece e é trocado.

   .ep-brand--dois só existe quando HÁ os dois arquivos. Com um logo só
   nada abaixo se aplica, e o site continua correto.
   ===================================================================== */
.ep-logo {
	display: block;
	flex: none;
	width: auto;
	max-height: var(--ep-logo-h);
	border-radius: 0;
}

.ep-logo--escuro { display: none; }


/* No portal e no rodapé a marca respira um pouco mais. */
.ep-portal-screen__brand .ep-logo { max-height: calc(var(--ep-logo-h) + 8px); }

/* No rodapé a marca respira mais: não disputa espaço com menu nenhum. */
.ep-footer .ep-logo { max-height: calc(var(--ep-logo-h) + 8px); }

/*
 * CONFLITO RESOLVIDO. Havia aqui um .ep-brand { flex: none }, que
 * anulava o min-width: 0 e o corte com reticências definidos na seção
 * 5: flex: none é flex: 0 0 auto, ou seja, "não encolha nunca" — e o
 * nome do site voltava a empurrar o ícone para fora da tela estreita.
 *
 * Quem não deve encolher é a IMAGEM, não o link. Assim o logo mantém a
 * proporção e o texto ao lado, se houver, continua podendo cortar.
 */
.ep-brand img { flex: none; }

/* =====================================================================
   15. REVELAÇÃO NA ROLAGEM
   ---------------------------------------------------------------------
   O elemento sobe alguns pixels e aparece ao entrar na tela.

   NADA aqui se aplica sozinho: a classe .ep-com-revelacao é posta no
   <html> pelo revelar.js. Se o script não carregar, ou o navegador não
   tiver IntersectionObserver, nenhuma regra abaixo casa e a página
   aparece inteira — conteúdo escondido por CSS que espera JavaScript é
   como um site some por completo quando o script falha.

   O prefers-reduced-motion da seção 4 zera a transição, e o
   .is-visivel continua sendo aplicado: quem desligou animação vê o
   conteúdo, só não vê o movimento.
   ===================================================================== */
.ep-com-revelacao .ep-revelar {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 500ms ease, transform 500ms cubic-bezier(0.32, 0.72, 0, 1);
	will-change: opacity, transform;
}

.ep-com-revelacao .ep-revelar.is-visivel {
	opacity: 1;
	transform: none;
}

/* Já revelado: solta a dica de composição, que custa memória de vídeo
   se ficar em dezenas de elementos. */
.ep-com-revelacao .ep-revelar.is-visivel { will-change: auto; }

/* =====================================================================
   16. MODO ESCURO
   ---------------------------------------------------------------------
   O design.md define APENAS a paleta clara. Tudo abaixo é DERIVADO, e
   a régua foi contraste medido, não olho: cada cor de texto passa de
   4,5:1 sobre a superfície em que aparece.

   O fundo é PRETO ABSOLUTO, #000. Não é o azul quase-preto da marca,
   que ocupava este lugar antes: o azul, por mais escuro que fosse,
   colocava uma terceira cor numa página que só deveria ter duas — o
   preto e o verde. Em tela OLED, que é a maioria dos celulares, o #000
   também é o único valor que apaga o pixel de verdade.

   Quem carrega a marca no escuro passa a ser o verde: ele é a cor das
   ações nos dois modos, e sobre preto ganha a saturação que sobre
   branco precisaria conter.

   Segue o sistema do visitante, sem botão e sem JavaScript. Botão faz
   sentido em ferramenta que a pessoa usa por horas; num site
   institucional visitado por três minutos, é um controle a mais para
   manter sem ganho real.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
	:root {
		/*
		 * color-scheme é o que faz campo de formulário, barra de
		 * rolagem e <select> nativo virem escuros. Sem esta linha o
		 * menu suspenso do navegador abre branco no meio do site
		 * escuro — o defeito mais visível de um modo escuro só de CSS.
		 */
		color-scheme: dark;

		/* --- Superfícies: o preto vira o fundo ---
		   Escala de cinzas neutros subindo do #000. Os contêineres
		   ficam no #1d1d1f: preto sobre preto não se separaria, e a
		   sombra, que resolveria isso no claro, é invisível aqui. */
		--ep-surface:                   #000000;
		--ep-surface-dim:               #000000;
		--ep-surface-bright:            #2a2a2c;
		--ep-surface-container-lowest:  #000000;
		--ep-surface-container-low:     #141416;
		--ep-surface-container:         #1d1d1f;
		--ep-surface-container-high:    #242426;
		--ep-surface-container-highest: #2a2a2c;

		/* --- Texto e traços --- */
		--ep-on-surface:                #f5f5f7;  /* 19,3:1 */
		--ep-on-surface-variant:        #a1a1a6;  /*  8,2:1 */
		--ep-outline:                   #86868b;  /*  5,8:1 */
		--ep-outline-variant:           #333336;

		/* O verde não muda entre os modos. Sobre o preto ele dá 7,7:1,
		   e o texto em cima dele continua preto — inverter para branco
		   aqui derrubaria a legibilidade do botão para 2,7:1. */
		--ep-black:                     #000000;
		--ep-black-soft:                #1d1d1f;
		--ep-on-black:                  #f5f5f7;
		--ep-on-black-variant:          #a1a1a6;

		/* Os contêineres NÃO podem ficar no #000 aqui: preto sobre
		   preto não se vê, e a sombra que resolveria isso no claro é
		   invisível no escuro. Sobem para o #1d1d1f, e a alternância
		   vira o degrau seguinte da escala. */
		--ep-card-bg:                   #1d1d1f;
		--ep-card-fg:                   #f5f5f7;
		--ep-card-fg-variant:           #a1a1a6;
		--ep-card-bg-alt:               #2a2a2c;
		--ep-card-fg-alt:               #f5f5f7;
		--ep-card-fg-alt-variant:       #a1a1a6;

		/*
		 * A PRIMÁRIA INVERTE. No claro ela é preta com texto branco em
		 * cima; mantida assim, um botão preto sobre fundo quase preto
		 * desapareceria. No escuro ela vira clara, e quem escurece é o
		 * texto por cima dela.
		 */
		--ep-primary:                   #f5f5f7;  /* 19,3:1 */
		--ep-on-primary:                #000000;
		--ep-primary-container:         #d8d8de;
		--ep-on-primary-container:      #000000;

		--ep-secondary:                 #a1a1a6;
		--ep-on-secondary:              #000000;
		--ep-secondary-container:       #242426;
		--ep-on-secondary-container:    #f5f5f7;
		--ep-tertiary:                  #a1a1a6;
		--ep-on-tertiary:               #000000;
		--ep-tertiary-container:        #242426;
		--ep-on-tertiary-container:     #f5f5f7;

		/* --- Estados: claros sobre fundo escuro, o inverso do claro --- */
		--ep-error:                     #ffb4ab;  /* 10,7:1 */
		--ep-on-error:                  #690005;
		--ep-error-container:           #93000a;
		--ep-on-error-container:        #ffdad6;
		--ep-success:                   #6fdc9b;  /* 10,7:1 */
		--ep-success-container:         #0a3b22;
		--ep-on-success-container:      #c3f0d3;
		--ep-warning:                   #ffcf5c;  /* 12,4:1 */
		--ep-warning-container:         #4a3800;
		--ep-on-warning-container:      #ffdf9a;

		/*
		 * Sombra preta sobre fundo escuro é invisível: a elevação
		 * precisa ser mais funda para continuar separando as camadas.
		 */
		--ep-elevation-subtle:  0 2px 6px rgba(0, 0, 0, 0.4);
		--ep-elevation-refined: 0 6px 20px rgba(0, 0, 0, 0.5);
	}

	/* A troca do logo. Só age quando existem os DOIS arquivos — ver a
	   seção 14. */
	.ep-brand--dois .ep-logo--claro { display: none; }
	.ep-brand--dois .ep-logo--escuro { display: block; }

	/*
	 * Imagem em tela cheia num fundo escuro salta e cansa a vista. Uma
	 * redução leve de brilho e saturação assenta a foto na página sem
	 * que ela pareça desbotada.
	 */
	/*
	 * SEM redução de brilho aqui. Ela existia para foto de cena, que
	 * salta num fundo escuro. Numa placa branca com objeto isolado,
	 * escurecer a imagem e não a placa deixaria um retângulo cinza
	 * dentro de uma moldura branca.
	 */
}