/* ==========================================================================
   EDMO JUNIOR — folha principal
   Depende de assets/css/tokens.css, que deve ser enfileirado ANTES.
   Convenção: ej-bloco__elemento--modificador.
   Mobile-first de verdade: o público deste site chega por celular.
   Regra de cor herdada de MASTER.md §11.2 e repetida aqui:
   NENHUM TEXTO SOBRE --ej-coral. Superfície com texto usa --ej-acao-fundo.
   ========================================================================== */

/* 1. RESET ENXUTO ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul { margin: 0; }

ol[class], ul[class] { padding: 0; list-style: none; }

h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }

img, picture, svg, video { display: block; max-width: 100%; }

img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

textarea { resize: vertical; }

table { border-collapse: collapse; width: 100%; }

:target { scroll-margin-block-start: var(--ej-sp-9); }

html:focus-within { scroll-behavior: smooth; }

/* 2. BASE ================================================================= */

body {
	margin: 0;
	background-color: var(--ej-fundo);
	color: var(--ej-texto);
	font-family: var(--ej-fonte-ui);
	font-size: var(--ej-fs-base);
	font-weight: var(--ej-peso-medio);
	line-height: var(--ej-lh-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

a { color: var(--ej-link); text-decoration-color: var(--ej-link-sublinhado); text-underline-offset: 0.18em; text-decoration-thickness: 0.09em; }
a:hover { text-decoration-thickness: 0.16em; }

strong, b { font-weight: var(--ej-peso-forte); }

/* Foco visível obrigatório. Nunca remover outline sem substituir por outra
   marcação igualmente visível. */
:focus-visible {
	outline: var(--ej-foco-largura) solid var(--ej-foco-cor);
	outline-offset: var(--ej-foco-deslocamento);
	border-radius: var(--ej-raio-xs);
}

.ej-skip-link {
	position: absolute;
	inset-block-start: var(--ej-sp-2);
	inset-inline-start: var(--ej-sp-2);
	z-index: var(--ej-z-skip);
	transform: translateY(-200%);
	padding: var(--ej-sp-3) var(--ej-sp-4);
	border-radius: var(--ej-raio-sm);
	background: var(--ej-acao-fundo);
	color: var(--ej-acao-texto);
	font-weight: var(--ej-peso-forte);
	text-decoration: none;
	transition: transform var(--ej-transicao);
}
.ej-skip-link:focus { transform: translateY(0); }

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

/* 3. LAYOUT =============================================================== */

.ej-container {
	width: 100%;
	max-width: var(--ej-largura-container);
	margin-inline: auto;
	padding-inline: var(--ej-gutter);
}
.ej-container--estreito { max-width: var(--ej-largura-estreita); }

.ej-secao { padding-block: var(--ej-sp-secao); }
.ej-secao--bloco { background: var(--ej-fundo-bloco); }
/*
 * Dentro de qualquer superfície forte, os tokens de texto são REDEFINIDOS em vez
 * de cada componente ganhar uma exceção. Custom property cascateia: assim
 * `.ej-steps__texto`, `.ej-cta__texto` e o que vier depois herdam a cor certa
 * sem que ninguém precise lembrar de escrever uma regra nova.
 *
 * Foi a falta disto que deixou o texto dos 4 passos em 1,79:1 no tema claro —
 * e o `php -l` e a leitura do CSS não pegam, porque a regra do componente
 * declara `color` e nunca o fundo em que ele cai. Só a página renderizada pega.
 */
.ej-secao--forte,
.ej-cta,
.ej-footer {
	--ej-texto-apoio: var(--ej-forte-texto-apoio);
	--ej-texto: var(--ej-forte-texto);
}
.ej-secao--forte { background: var(--ej-superficie-forte); color: var(--ej-forte-texto); }

.ej-secao__rotulo {
	display: inline-flex;
	align-items: center;
	gap: var(--ej-sp-2);
	margin-block-end: var(--ej-sp-3);
	font-size: var(--ej-fs-xs);
	font-weight: var(--ej-peso-maximo);
	letter-spacing: var(--ej-tracking-rotulo);
	text-transform: uppercase;
	color: var(--ej-texto-apoio);
}
/* Filete: grafismo puro, sem texto em cima. Uso legítimo de --ej-grafismo. */
.ej-secao__rotulo::before {
	content: "";
	inline-size: 1.5rem;
	block-size: var(--ej-traco-icone);
	border-radius: var(--ej-raio-pill);
	background: var(--ej-grafismo);
}

.ej-secao__titulo {
	font-size: var(--ej-fs-2xl);
	font-weight: var(--ej-peso-maximo);
	line-height: var(--ej-lh-titulo);
	letter-spacing: var(--ej-tracking-titulo);
	max-width: 22ch;
}
.ej-secao__intro {
	margin-block-start: var(--ej-sp-4);
	max-width: 58ch;
	color: var(--ej-texto-apoio);
	font-family: var(--ej-fonte-texto);
	font-size: var(--ej-fs-md);
	line-height: var(--ej-lh-leitura);
}

.ej-grade { display: grid; gap: var(--ej-sp-5); }
@media (min-width: 40em) { .ej-grade--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48em) { .ej-grade--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .ej-grade--3 { grid-template-columns: repeat(3, 1fr); } }

/* 4. PROSA (texto longo — IBM Plex Sans) ================================== */

.ej-prose {
	max-width: var(--ej-medida-leitura);
	font-family: var(--ej-fonte-texto);
	font-size: var(--ej-fs-md);
	line-height: var(--ej-lh-leitura);
}
.ej-prose > * + * { margin-block-start: var(--ej-sp-4); }
.ej-prose h2 { font-family: var(--ej-fonte-ui); font-size: var(--ej-fs-xl); font-weight: var(--ej-peso-maximo); line-height: var(--ej-lh-titulo); margin-block-start: var(--ej-sp-7); }
.ej-prose h3 { font-family: var(--ej-fonte-ui); font-size: var(--ej-fs-lg); font-weight: var(--ej-peso-forte); margin-block-start: var(--ej-sp-6); }
.ej-prose ul, .ej-prose ol { padding-inline-start: var(--ej-sp-5); }
.ej-prose li + li { margin-block-start: var(--ej-sp-2); }
.ej-prose img { border-radius: var(--ej-raio-md); }
.ej-prose blockquote {
	padding-inline-start: var(--ej-sp-4);
	border-inline-start: var(--ej-traco-icone) solid var(--ej-grafismo);
	color: var(--ej-texto-apoio);
}

/* 5. BOTÃO ================================================================ */

.ej-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ej-sp-2);
	/* Alvo de toque mínimo — vale para todas as variantes. O número mora em
	   --ej-toque-min; repetir aqui é o jeito de o comentário envelhecer sozinho. */
	min-block-size: var(--ej-toque-min);
	min-inline-size: var(--ej-toque-min);
	padding: var(--ej-sp-3) var(--ej-sp-5);
	border: 2px solid transparent;
	border-radius: var(--ej-raio-pill);
	font-family: var(--ej-fonte-ui);
	font-size: var(--ej-fs-base);
	font-weight: var(--ej-peso-maximo);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ej-transicao), border-color var(--ej-transicao), transform var(--ej-duracao-rapida) var(--ej-curva);
}
.ej-btn:hover { transform: translateY(-1px); }
.ej-btn:active { transform: translateY(0); }
.ej-btn[aria-disabled="true"], .ej-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.ej-btn__icone { flex: none; inline-size: 1.25em; block-size: 1.25em; }

/* Superfície com texto — SEMPRE token de ação, nunca --ej-coral. */
.ej-btn--primary { background: var(--ej-acao-fundo); color: var(--ej-acao-texto); }
.ej-btn--primary:hover { background: var(--ej-acao-fundo-hover); }

.ej-btn--whats { background: var(--ej-ok-fundo); color: var(--ej-ok-texto); }
.ej-btn--whats:hover { filter: brightness(0.94); }

.ej-btn--ghost {
	background: transparent;
	color: var(--ej-acao-secundaria-texto);
	border-color: var(--ej-acao-secundaria-borda);
}
.ej-btn--ghost:hover { background: color-mix(in srgb, var(--ej-texto) 8%, transparent); }

.ej-btn--bloco { inline-size: 100%; }

/* 6. CABEÇALHO E NAVEGAÇÃO =============================================== */

.ej-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--ej-z-header);
	background: var(--ej-fundo);
	border-block-end: 1px solid var(--ej-borda);
}
.ej-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ej-sp-4);
	min-block-size: 4rem;
}
.ej-header__marca {
	display: inline-flex;
	align-items: center;
	gap: var(--ej-sp-2);
	font-weight: var(--ej-peso-maximo);
	font-size: var(--ej-fs-lg);
	letter-spacing: var(--ej-tracking-titulo);
	color: var(--ej-texto);
	text-decoration: none;
}
.ej-header__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--ej-sp-2);
	min-block-size: var(--ej-toque-min);
	min-inline-size: var(--ej-toque-min);
	padding-inline: var(--ej-sp-3);
	background: transparent;
	border: 2px solid var(--ej-borda-controle);
	border-radius: var(--ej-raio-pill);
	font-size: var(--ej-fs-sm);
	font-weight: var(--ej-peso-forte);
	cursor: pointer;
}

/* Esconder a navegação é responsabilidade do JavaScript, não do CSS sozinho.
   Sem a classe `ej-js` no <html> — navegador sem JS, script bloqueado, erro
   antes desta linha — o menu fica visível empilhado abaixo da marca, que é a
   única forma de ele continuar alcançável: o <button> nasce com o atributo
   `hidden` e só o JS o remove. Esconder os dois ao mesmo tempo deixava o site
   sem navegação nenhuma no celular. */
.ej-js .ej-nav { display: none; }
.ej-js .ej-nav[data-ej-aberto="true"] {
	display: block;
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: var(--ej-z-nav);
	padding: var(--ej-sp-4) var(--ej-gutter) var(--ej-sp-6);
	background: var(--ej-fundo);
	border-block-end: 1px solid var(--ej-borda);
	box-shadow: var(--ej-sombra-2);
}
.ej-nav__lista { display: flex; flex-direction: column; gap: var(--ej-sp-1); }
.ej-nav__link {
	display: flex;
	align-items: center;
	min-block-size: var(--ej-toque-min);
	padding-inline: var(--ej-sp-2);
	border-radius: var(--ej-raio-sm);
	color: var(--ej-texto);
	font-weight: var(--ej-peso-forte);
	text-decoration: none;
}
.ej-nav__link:hover { background: var(--ej-fundo-bloco); }
.ej-nav__link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--ej-link-sublinhado); text-decoration-thickness: 0.16em; }
.ej-nav__acao { margin-block-start: var(--ej-sp-4); }

@media (min-width: 64em) {
	.ej-header__toggle { display: none; }
	/* `display: flex`, não `block`. Com block, a lista de links e o bloco do
	   botão de WhatsApp são dois filhos de nível de bloco e EMPILHAM: medido no
	   ar em 12/09, a navegação ficou com 90,4px de altura dentro de um cabeçalho
	   de 64px, os links colados no topo, o botão numa segunda linha e o conjunto
	   transbordando por cima do hero. Só o mobile tinha sido conferido. */
	.ej-nav,
	.ej-js .ej-nav,
	.ej-js .ej-nav[data-ej-aberto="true"] {
		display: flex;
		align-items: center;
		gap: var(--ej-sp-4);
		position: static;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
	}
	.ej-nav__lista { flex-direction: row; align-items: center; gap: var(--ej-sp-4); }
	.ej-nav__acao { margin-block-start: 0; margin-inline-start: var(--ej-sp-2); }
}

/* 7. HERO ================================================================= */

.ej-hero { padding-block: var(--ej-sp-secao); }
.ej-hero__inner { display: grid; gap: var(--ej-sp-7); align-items: center; }
.ej-hero__titulo {
	font-size: var(--ej-fs-4xl);
	font-weight: var(--ej-peso-maximo);
	line-height: var(--ej-lh-apertada);
	letter-spacing: var(--ej-tracking-titulo);
	text-wrap: balance;
}
/* Realce do título: sublinhado de grafismo, texto continua em --ej-texto. */
/* Filete de realce sob a frase do H1. É grafismo, não superfície de texto.
   Estava em `0 88%`: numa linha de 66px o filete ocupava de 46,5px a 59,7px e a
   linha de base fica em ~51px, ou seja, os últimos 4,5px do corpo das letras
   ficavam sobre coral — creme sobre coral dá 2,67:1 e a lei do tokens.css diz
   que coral nunca fica atrás de texto. `100%` empurra o filete para o fim da
   caixa de linha, abaixo da linha de base; ele passa por baixo dos descendentes
   (o "ç" de "você", o "g" de "negócio") como qualquer sublinhado passa, e o
   corpo da letra fica inteiro sobre o fundo. */
.ej-hero__realce {
	background-image: linear-gradient(var(--ej-grafismo), var(--ej-grafismo));
	background-repeat: no-repeat;
	background-size: 100% 0.22em;
	background-position: 0 100%;
}
.ej-hero__subtitulo {
	margin-block-start: var(--ej-sp-5);
	max-width: 52ch;
	color: var(--ej-texto-apoio);
	font-family: var(--ej-fonte-texto);
	font-size: var(--ej-fs-lg);
	line-height: var(--ej-lh-leitura);
}
.ej-hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ej-sp-3);
	margin-block-start: var(--ej-sp-6);
}
.ej-hero__acoes .ej-btn { flex: 1 1 15rem; }
.ej-hero__nota {
	margin-block-start: var(--ej-sp-4);
	font-size: var(--ej-fs-sm);
	color: var(--ej-texto-apoio);
}
.ej-hero__media { position: relative; }
/* aspect-ratio declarado para não gerar layout shift antes da imagem carregar. */
.ej-hero__img,
.ej-hero__media--vazio {
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--ej-raio-xl);
	box-shadow: var(--ej-sombra-2);
	background: var(--ej-fundo-bloco);
}
@media (min-width: 64em) {
	.ej-hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--ej-sp-9); }
	.ej-hero__img, .ej-hero__media--vazio { aspect-ratio: 1 / 1; }
}

/* 8. CARD E SERVIÇO ====================================================== */

.ej-card {
	display: flex;
	flex-direction: column;
	gap: var(--ej-sp-3);
	padding: var(--ej-sp-5);
	background: var(--ej-superficie);
	border: 1px solid var(--ej-borda);
	border-radius: var(--ej-raio-lg);
	box-shadow: var(--ej-sombra-1);
	transition: box-shadow var(--ej-transicao), transform var(--ej-transicao);
}
.ej-card:hover { box-shadow: var(--ej-sombra-2); }
.ej-card__titulo { font-size: var(--ej-fs-lg); font-weight: var(--ej-peso-maximo); line-height: var(--ej-lh-titulo); }
.ej-card__texto { color: var(--ej-texto-apoio); font-family: var(--ej-fonte-texto); }
.ej-card__img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ej-raio-md); }

.ej-service { block-size: 100%; }
/* Ícone nunca aparece sozinho: a palavra vem sempre junto (MASTER §11.2). */
.ej-service__topo { display: flex; align-items: center; gap: var(--ej-sp-3); }
.ej-service__icone {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--ej-raio-md);
	background: var(--ej-fundo-bloco);
	color: var(--ej-texto);
}
.ej-service__icone svg {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: var(--ej-traco-icone);
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ej-service__lista { margin-block-start: var(--ej-sp-2); display: grid; gap: var(--ej-sp-2); font-size: var(--ej-fs-sm); }
.ej-service__item { display: flex; gap: var(--ej-sp-2); align-items: flex-start; }
.ej-service__item::before {
	content: "";
	flex: none;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	margin-block-start: 0.5em;
	border-radius: var(--ej-raio-pill);
	background: var(--ej-grafismo);
}

/* 9. ETAPAS ============================================================== */

.ej-steps { display: grid; gap: var(--ej-sp-5); counter-reset: ej-step; }
.ej-steps__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--ej-sp-4);
	align-items: start;
}
.ej-steps__num {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--ej-raio-pill);
	background: var(--ej-acao-fundo);
	color: var(--ej-acao-texto);
	font-weight: var(--ej-peso-maximo);
	font-variant-numeric: tabular-nums;
}
.ej-steps__titulo { font-size: var(--ej-fs-lg); font-weight: var(--ej-peso-forte); line-height: var(--ej-lh-titulo); }
.ej-steps__texto { margin-block-start: var(--ej-sp-2); color: var(--ej-texto-apoio); font-family: var(--ej-fonte-texto); }
@media (min-width: 64em) {
	.ej-steps { grid-template-columns: repeat(4, 1fr); gap: var(--ej-sp-6); }
	.ej-steps__item { grid-template-columns: 1fr; gap: var(--ej-sp-3); }
}

/* 10. PLANOS ============================================================= */

.ej-plans { display: grid; gap: var(--ej-sp-5); align-items: start; }
@media (min-width: 64em) { .ej-plans { grid-template-columns: repeat(3, 1fr); gap: var(--ej-sp-4); } }

.ej-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ej-sp-4);
	block-size: 100%;
	padding: var(--ej-sp-5);
	background: var(--ej-superficie);
	border: 1px solid var(--ej-borda);
	border-radius: var(--ej-raio-lg);
	box-shadow: var(--ej-sombra-1);
}
.ej-plan__nome { font-size: var(--ej-fs-lg); font-weight: var(--ej-peso-maximo); }
.ej-plan__resumo { color: var(--ej-texto-apoio); font-family: var(--ej-fonte-texto); font-size: var(--ej-fs-sm); }
.ej-plan__preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ej-sp-2); }
.ej-plan__valor { font-size: var(--ej-fs-2xl); font-weight: var(--ej-peso-maximo); line-height: 1; font-variant-numeric: tabular-nums; }
.ej-plan__periodo { font-size: var(--ej-fs-sm); color: var(--ej-texto-apoio); }
/* Marcador de valor ainda não definido. Nunca substituir por número inventado. */
.ej-plan__valor--placeholder {
	font-size: var(--ej-fs-lg);
	padding: var(--ej-sp-1) var(--ej-sp-3);
	border: 2px dashed var(--ej-borda-controle);
	border-radius: var(--ej-raio-sm);
	color: var(--ej-texto-apoio);
	letter-spacing: var(--ej-tracking-rotulo);
}
.ej-plan__lista { display: grid; gap: var(--ej-sp-2); font-size: var(--ej-fs-sm); }
.ej-plan__item { display: flex; gap: var(--ej-sp-2); align-items: flex-start; }
.ej-plan__item svg { flex: none; inline-size: 1.125rem; block-size: 1.125rem; margin-block-start: 0.15em; fill: none; stroke: var(--ej-verde-ok); stroke-width: var(--ej-traco-icone); stroke-linecap: round; stroke-linejoin: round; }
.ej-plan__acao { margin-block-start: auto; padding-block-start: var(--ej-sp-3); }

.ej-plan--featured { border: 2px solid var(--ej-acao-fundo); box-shadow: var(--ej-sombra-3); }

/* Badge do plano em destaque.
   No celular ele fica no fluxo normal do card: nunca sobrepõe, nunca estoura,
   nunca quebra em duas linhas em cima do título. Só a partir de 64em ele sobe
   para a borda do card, com espaço reservado no grid. */
.ej-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ej-sp-2);
	align-self: flex-start;
	max-inline-size: 100%;
	padding: var(--ej-sp-1) var(--ej-sp-3);
	border-radius: var(--ej-raio-pill);
	background: var(--ej-acao-fundo);
	color: var(--ej-acao-texto);
	font-size: var(--ej-fs-xs);
	font-weight: var(--ej-peso-maximo);
	letter-spacing: var(--ej-tracking-rotulo);
	text-transform: uppercase;
	line-height: 1.3;
}
.ej-badge--neutro { background: var(--ej-fundo-bloco); color: var(--ej-texto); }
.ej-badge--ok { background: var(--ej-ok-fundo); color: var(--ej-ok-texto); }

@media (min-width: 64em) {
	.ej-plans { padding-block-start: var(--ej-sp-4); }
	.ej-plan--featured { margin-block-start: calc(var(--ej-sp-4) * -1); }
	.ej-plan--featured .ej-plan__badge {
		position: absolute;
		inset-block-start: calc(var(--ej-sp-3) * -1);
		inset-inline-start: var(--ej-sp-5);
		white-space: nowrap;
	}
	.ej-plan--featured { padding-block-start: var(--ej-sp-6); }
}

/* 11. FAQ — details/summary nativo, sem JS =============================== */

.ej-faq { display: grid; gap: var(--ej-sp-3); max-width: var(--ej-largura-estreita); }
.ej-faq__item {
	background: var(--ej-superficie);
	border: 1px solid var(--ej-borda);
	border-radius: var(--ej-raio-md);
	overflow: hidden;
}
.ej-faq__item[open] { border-color: var(--ej-borda-controle); }
.ej-faq__pergunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ej-sp-4);
	min-block-size: var(--ej-toque-min);
	padding: var(--ej-sp-4);
	font-weight: var(--ej-peso-forte);
	cursor: pointer;
	list-style: none;
}
.ej-faq__pergunta::-webkit-details-marker { display: none; }
.ej-faq__pergunta:hover { background: var(--ej-fundo-bloco); }
.ej-faq__pergunta:focus-visible { outline-offset: -3px; }
/* Sinal de abrir/fechar: grafismo, sem texto em cima. */
.ej-faq__pergunta::after {
	content: "";
	flex: none;
	inline-size: 0.875rem;
	block-size: 0.875rem;
	border-inline-end: var(--ej-traco-icone) solid var(--ej-grafismo);
	border-block-end: var(--ej-traco-icone) solid var(--ej-grafismo);
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	transition: transform var(--ej-transicao);
}
.ej-faq__item[open] .ej-faq__pergunta::after { transform: rotate(225deg) translate(-0.1em, -0.1em); }
.ej-faq__resposta {
	padding: 0 var(--ej-sp-4) var(--ej-sp-4);
	color: var(--ej-texto-apoio);
	font-family: var(--ej-fonte-texto);
	line-height: var(--ej-lh-leitura);
}

/* 12. PROVA ============================================================== */

.ej-proof { display: grid; gap: var(--ej-sp-5); }
.ej-proof__item {
	display: flex;
	flex-direction: column;
	gap: var(--ej-sp-3);
	padding: var(--ej-sp-5);
	background: var(--ej-superficie);
	border: 1px solid var(--ej-borda);
	border-inline-start: 4px solid var(--ej-grafismo);
	border-radius: var(--ej-raio-md);
}
.ej-proof__citacao { font-family: var(--ej-fonte-texto); font-size: var(--ej-fs-md); line-height: var(--ej-lh-leitura); }
.ej-proof__autor { font-size: var(--ej-fs-sm); font-weight: var(--ej-peso-forte); }
.ej-proof__origem { font-size: var(--ej-fs-xs); color: var(--ej-texto-apoio); }
@media (min-width: 48em) { .ej-proof { grid-template-columns: repeat(2, 1fr); } }

/* 13. CTA ================================================================ */

.ej-cta {
	display: grid;
	gap: var(--ej-sp-5);
	padding: var(--ej-sp-7) var(--ej-sp-5);
	background: var(--ej-superficie-forte);
	color: var(--ej-forte-texto);
	border-radius: var(--ej-raio-xl);
}
.ej-cta__titulo { font-size: var(--ej-fs-2xl); font-weight: var(--ej-peso-maximo); line-height: var(--ej-lh-titulo); text-wrap: balance; }
.ej-cta__texto { font-family: var(--ej-fonte-texto); max-width: 52ch; }
.ej-cta__acoes { display: flex; flex-wrap: wrap; gap: var(--ej-sp-3); }
/* Dentro do bloco invertido, o botão fantasma inverte borda e texto. */
.ej-cta .ej-btn--ghost { color: var(--ej-creme); border-color: var(--ej-creme); }
.ej-cta .ej-btn--ghost:hover { background: rgba(255, 246, 238, 0.12); }
.ej-cta :focus-visible { outline-color: var(--ej-creme); }
@media (min-width: 64em) {
	.ej-cta { grid-template-columns: 1.2fr auto; align-items: center; padding: var(--ej-sp-8); }
}

/* 14. FORMULÁRIO ========================================================= */

.ej-form { display: grid; gap: var(--ej-sp-5); max-width: 40rem; }
.ej-form__grupo { display: grid; gap: var(--ej-sp-4); }
@media (min-width: 48em) { .ej-form__grupo--2 { grid-template-columns: repeat(2, 1fr); } }

.ej-field { display: grid; gap: var(--ej-sp-2); }
/* Rótulo sempre visível. Placeholder não substitui rótulo. */
.ej-field__label { font-size: var(--ej-fs-sm); font-weight: var(--ej-peso-forte); }
.ej-field__opcional { font-weight: var(--ej-peso-medio); color: var(--ej-texto-apoio); }
.ej-field__dica { font-size: var(--ej-fs-xs); color: var(--ej-texto-apoio); }
.ej-field__input,
.ej-field__select,
.ej-field__textarea {
	inline-size: 100%;
	min-block-size: var(--ej-toque-min);
	padding: var(--ej-sp-3) var(--ej-sp-4);
	background: var(--ej-superficie);
	color: var(--ej-texto);
	border: 2px solid var(--ej-borda-controle);
	border-radius: var(--ej-raio-md);
	font-family: var(--ej-fonte-texto);
	font-size: var(--ej-fs-base); /* 16px evita zoom automático no iOS */
	transition: border-color var(--ej-transicao), box-shadow var(--ej-transicao);
}
.ej-field__textarea { min-block-size: 8rem; line-height: var(--ej-lh-base); }
.ej-field__input:hover,
.ej-field__textarea:hover { border-color: var(--ej-texto); }
.ej-field__input:focus-visible,
.ej-field__select:focus-visible,
.ej-field__textarea:focus-visible {
	outline: var(--ej-foco-largura) solid var(--ej-foco-cor);
	outline-offset: 1px;
	border-color: var(--ej-texto);
}
.ej-field__input::placeholder,
.ej-field__textarea::placeholder { color: var(--ej-texto-apoio); opacity: 1; }

/* Erro: a cor é reforço, não é o recado. O recado é o texto de .ej-field__erro,
   somado a aria-invalid e à borda mais grossa. Nunca comunicar erro só por cor. */
.ej-field--erro .ej-field__input,
.ej-field--erro .ej-field__select,
.ej-field--erro .ej-field__textarea {
	border-color: var(--ej-erro-borda);
	border-width: 3px;
}
.ej-field__erro {
	display: flex;
	gap: var(--ej-sp-2);
	font-size: var(--ej-fs-sm);
	font-weight: var(--ej-peso-forte);
	color: var(--ej-erro-texto);
}
.ej-field__erro:empty { display: none; }
.ej-field__erro::before { content: "!"; flex: none; display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; border-radius: var(--ej-raio-pill); background: var(--ej-erro-pastilha-fundo); color: var(--ej-erro-pastilha-texto); font-size: var(--ej-fs-xs); }

.ej-field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--ej-sp-3); }
.ej-field--check input[type="checkbox"] { inline-size: 1.5rem; block-size: 1.5rem; margin: 0.25rem 0 0; accent-color: var(--ej-acao-fundo); }
.ej-field--check .ej-field__label { font-weight: var(--ej-peso-medio); font-size: var(--ej-fs-sm); }

.ej-form__aviso {
	padding: var(--ej-sp-4);
	border-radius: var(--ej-raio-md);
	border: 2px solid var(--ej-borda-controle);
	font-size: var(--ej-fs-sm);
}
.ej-form__aviso--erro { border-color: var(--ej-erro-borda); color: var(--ej-erro-texto); }
.ej-form__aviso--ok { border-color: var(--ej-verde-ok); }
.ej-form__nota { font-size: var(--ej-fs-xs); color: var(--ej-texto-apoio); }
/* Armadilha de robô: fora da tela, fora da ordem de foco, invisível para leitor
   de tela (aria-hidden no wrapper). Nunca usar display:none com campo focável. */
.ej-form__trap { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* 15. RODAPÉ ============================================================= */

.ej-footer {
	padding-block: var(--ej-sp-8) var(--ej-sp-6);
	background: var(--ej-superficie-forte);
	color: var(--ej-forte-texto);
}
.ej-footer__grade { display: grid; gap: var(--ej-sp-6); }
.ej-footer__titulo { font-size: var(--ej-fs-sm); font-weight: var(--ej-peso-maximo); letter-spacing: var(--ej-tracking-rotulo); text-transform: uppercase; margin-block-end: var(--ej-sp-3); }
.ej-footer__lista { display: grid; gap: var(--ej-sp-1); }
.ej-footer__link { display: inline-flex; align-items: center; min-block-size: var(--ej-toque-min); color: var(--ej-creme); text-decoration-color: var(--ej-link-sublinhado); }
.ej-footer__base { margin-block-start: var(--ej-sp-6); padding-block-start: var(--ej-sp-4); border-block-start: 1px solid rgba(255, 246, 238, 0.2); font-size: var(--ej-fs-xs); }
.ej-footer :focus-visible { outline-color: var(--ej-creme); }
@media (min-width: 48em) { .ej-footer__grade { grid-template-columns: 1.5fr 1fr 1fr; } }

/* 16. MOVIMENTO REDUZIDO ================================================= */

@media (prefers-reduced-motion: reduce) {
	html:focus-within { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.ej-btn:hover { transform: none; }
}

/* 17. IMPRESSÃO ========================================================== */

@media print {
	.ej-header, .ej-nav, .ej-cta, .ej-skip-link { display: none !important; }
	body { background: #FFFFFF; color: #000000; font-family: var(--ej-fonte-texto); }
	.ej-faq__resposta { display: block !important; }
}

/* 18. BLOCO DE CTA — coluna de texto ===================================== */

.ej-cta__conteudo { display: grid; gap: var(--ej-sp-3); }

/* 19. PAGINAÇÃO ========================================================== */

/* Alvo de toque de 44px também aqui: paginação é onde mais se erra o dedo. */
.ej-paginacao { margin-block-start: var(--ej-sp-7); }
.ej-paginacao .nav-links { display: flex; flex-wrap: wrap; gap: var(--ej-sp-2); align-items: center; }
.ej-paginacao .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--ej-toque-min);
	min-block-size: var(--ej-toque-min);
	padding-inline: var(--ej-sp-3);
	border: 1px solid var(--ej-borda);
	border-radius: var(--ej-raio-md);
	color: var(--ej-texto);
	font-weight: var(--ej-peso-forte);
	text-decoration: none;
}
.ej-paginacao .page-numbers:hover { background: var(--ej-fundo-bloco); }
.ej-paginacao .page-numbers.current { background: var(--ej-acao-fundo); border-color: var(--ej-acao-fundo); color: var(--ej-acao-texto); }
.ej-paginacao .page-numbers.dots { border-color: transparent; }
/* Link do card de serviço: sempre no rodapé do card, alinhado à esquerda. */
.ej-service__link { align-self: flex-start; margin-block-start: auto; }
/* 20. TRILHA DE NAVEGAÇÃO ================================================= */

.ej-trilha {
	padding-block: var(--ej-sp-3);
	border-block-end: 1px solid var(--ej-borda);
	font-size: var(--ej-fs-sm);
}
.ej-trilha__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ej-sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ej-texto-apoio);
}
/* O separador é decorativo e sai do CSS de propósito: no HTML ele viraria texto
   que o leitor de tela anuncia entre cada item ("barra Início barra Contato"). */
.ej-trilha__item + .ej-trilha__item::before {
	content: "/";
	margin-inline-end: var(--ej-sp-2);
	color: var(--ej-borda-controle);
}
.ej-trilha__link { color: var(--ej-texto-apoio); }
.ej-trilha__link:hover { color: var(--ej-texto); }
.ej-trilha__item [aria-current="page"] { color: var(--ej-texto); font-weight: var(--ej-peso-forte); }

/* 21. BARRA DE AÇÃO FIXA NO CELULAR ======================================= */

/* Escondida por padrão e ligada só abaixo de 64em: no desktop o botão do
   cabeçalho já está sempre à vista, e uma barra fixa ali só rouba altura. */
.ej-cta-fixo { display: none; }

@media (max-width: 63.999em) {
	.ej-cta-fixo {
		display: block;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: var(--ej-z-cta-fixo);
		padding: var(--ej-sp-3) var(--ej-gutter);
		/* Fundo sólido: sobre conteúdo rolando, translúcido derruba o contraste
		   do rótulo para um valor que muda a cada pixel de rolagem — número que
		   nenhuma medição de contraste consegue afirmar. */
		background: var(--ej-fundo);
		border-block-start: 1px solid var(--ej-borda);
		/* Respeita a faixa do gesto de voltar do iOS e do Android. */
		padding-block-end: calc(var(--ej-sp-3) + env(safe-area-inset-bottom, 0px));
	}
	.ej-cta-fixo__botao {
		display: flex;
		justify-content: center;
		inline-size: 100%;
		min-block-size: var(--ej-toque-min);
	}
	/* Respiro do tamanho da barra, senão ela cobre a última linha do rodapé —
	   que é justamente onde está o link da política de privacidade. */
	.ej-tem-cta-fixo .ej-footer { padding-block-end: calc(var(--ej-sp-6) + 5rem); }
}

/* A barra não existe no papel. */
@media print {
	.ej-cta-fixo { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Aviso de cookies — só aparece quando há Google tag configurada
   ══════════════════════════════════════════════════════════════════════════
   Contraste medido sobre o branco da superfície:
     petróleo #0E3A4A ............ 12,19:1  (texto)
     coral-ação #B33A14 ..........  5,95:1  (texto e borda do Recusar)
     creme sobre coral-ação ......  5,57:1  (rótulo do Aceitar)

   O filete `--ej-linha` dá 1,35:1 e NÃO separa nada sozinho: quem separa o
   aviso da página é a sombra. O filete é acabamento.

   O coral puro (#FF6A3D) não aparece aqui. Ele é grafismo pelo §11.2 e dá
   2,66:1 sobre creme — atrás de texto seria reprovação.

   Os dois botões têm o mesmo padding e a mesma fonte de propósito. Recusar
   mais discreto que aceitar é padrão escuro.

   O anel de foco é o `:focus-visible` global, desenhado para fora. Aqui ele é
   desenhado de verdade: `.ej-cookies` é `position: fixed` e nenhum ancestral
   recorta a faixa — que foi o defeito do `.accordion-button` no contratipos. */
.ej-cookies {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 950;
	background: var(--ej-superficie);
	border-block-start: 1px solid var(--ej-linha);
	box-shadow: 0 -6px 22px rgba(14, 58, 74, .12);
	transform: translateY(100%);
	transition: transform .35s ease;
}

.ej-cookies--visivel { transform: translateY(0); }

.ej-cookies__interno {
	max-inline-size: 72rem;
	margin-inline: auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.ej-cookies__texto { flex: 1 1 18rem; color: var(--ej-texto); }
.ej-cookies__texto p { margin: 0; font-size: .875rem; line-height: 1.55; }
.ej-cookies__titulo { font-weight: 700; margin-block-end: 2px !important; }
.ej-cookies__texto a { color: var(--ej-acao-fundo); }

.ej-cookies__acoes { flex: none; display: flex; gap: 10px; align-items: center; }

.ej-btn--contorno {
	background: transparent;
	color: var(--ej-acao-fundo);
	border: 2px solid var(--ej-acao-fundo);
}

.ej-btn--contorno:hover {
	background: var(--ej-acao-fundo);
	color: var(--ej-acao-texto);
}

/* Botão que se comporta como link no rodapé (reabrir o aviso). */
.ej-footer__link--botao {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

@media (max-width: 40em) {
	.ej-cookies__interno { flex-direction: column; align-items: stretch; gap: 12px; }
	.ej-cookies__acoes { width: 100%; }
	.ej-cookies__acoes .ej-btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.ej-cookies { transition: none; }
}