/*
 * Páginas internas — institucionais, jurídicas, busca e 404.
 *
 * Carrega só nessas telas (inc/paginas.php). Nada aqui é cor, fonte ou
 * espaçamento novo: tudo sai dos tokens do contrato.
 *
 * DIVERGÊNCIA DELIBERADA — corpo a 16px, não a 14px.
 * O contrato fixa "Body / footer · 14px / 1.6", escala pensada para
 * interface: rótulo, preço, link de rodapé. Estas páginas são leitura
 * corrida de dois a nove mil caracteres, e 14px numa medida de 66ch cansa
 * antes do fim da política. O piso do contrato ("never below 13px") é piso,
 * não teto; 16px/1.7 respeita a regra e é o tamanho de leitura longa.
 * A interface das mesmas páginas — índice, olho, legenda — continua em 14px
 * e menos, como o contrato pede.
 *
 * A altura do cabeçalho fixo (72 + 1 + 48 + 1) entra como variável porque
 * duas coisas dependem dela: o `top` do índice grudado e o `scroll-margin`
 * dos títulos. Sem o segundo, clicar no índice esconde o título embaixo do
 * cabeçalho e a pessoa cai no meio do parágrafo anterior.
 */

:root {
	--coe-header-h: 122px;
}

@media (max-width: 1023px) {
	:root {
		--coe-header-h: 112px;
	}
}

/* ==========================================================================
   0. Desliga o container que o style.css dá a #primary

   `body:not(.home) #primary` reserva 1280px com 16px de padding para toda
   página interna. Nas institucionais isso soma com o `.coe-container` que o
   próprio template já emite: 16 + 16 de padding, coluna de 1216px contra os
   1248px de qualquer seção da home, e a faixa do cabeçalho travada em 1280
   em vez de sangrar até a borda.

   `body:not(.home) #primary` é (1,1,1). Empatar e contar com a ordem de
   carregamento funcionaria — paginas.css desce depois —, mas empate resolvido
   por ordem quebra no dia em que alguém concatenar os arquivos. Daí o
   `.content-area` junto, que leva esta regra a (1,2,1).
   ========================================================================== */

body.coe-pagina-institucional #primary.content-area {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* ==========================================================================
   1. Cabeçalho da página
   ========================================================================== */

.coe-pagina-head {
	background-color: var(--paper);
	border-bottom: 1px solid var(--line);
}

.coe-pagina-head__inner {
	padding-block: var(--sp-16) var(--sp-12);
}

.coe-pagina-head__olho {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--navy);
}

.coe-pagina-head__titulo {
	margin: 0;
	font-family: var(--font-display);
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.5px;
	color: var(--ink);
	/* A Gloriche é estreita: sem limite o H1 de "Trocas e devoluções" corre
	   até 1280px e o olho perde o começo da linha seguinte. */
	max-width: 20ch;
}

.coe-pagina-head__apoio {
	margin: var(--sp-4) 0 0;
	max-width: 58ch;
	font-family: var(--font-ui);
	font-size: 18px;
	line-height: 1.55;
	color: var(--ink-muted);
}

.coe-pagina-head__data {
	margin: var(--sp-6) 0 0;
	font-family: var(--font-ui);
	font-size: 13px;
	line-height: 1;
	color: var(--ink-muted);
}

/* ==========================================================================
   2. Grade: índice grudado + corpo
   ========================================================================== */

.coe-pagina {
	padding-block: var(--sp-12) var(--sp-20);
}

.coe-pagina--com-indice {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--sp-16);
	align-items: start;
}

.coe-pagina__indice {
	position: sticky;
	top: calc(var(--coe-header-h) + var(--sp-6));
	padding: 0;
	border-left: 2px solid var(--line);
}

.coe-pagina__indice-titulo {
	margin: 0 0 var(--sp-3);
	padding-left: var(--sp-4);
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-muted);
	list-style: none;
	cursor: default;
}

/* O marcador do <details> some no desktop: ali a lista está sempre aberta e
   a seta sugeriria um controle que não faz nada. */
.coe-pagina__indice-titulo::-webkit-details-marker {
	display: none;
}

.coe-pagina__indice-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: coe-indice;
}

.coe-pagina__indice-lista li {
	margin: 0;
}

.coe-pagina__indice-lista a {
	display: block;
	padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 1.4;
	color: var(--ink-muted);
}

.coe-pagina__indice-lista a:hover {
	color: var(--navy);
	border-left-color: var(--navy);
}

/* ==========================================================================
   3. Tipografia do corpo
   ========================================================================== */

/*
 * A medida de leitura mora nos filhos, não no container.
 *
 * Com o `max-width` aqui, tudo herdava a medida de texto — inclusive o que não
 * é texto. Os cartões de canal ficavam com 228px dentro de uma coluna de
 * 964px, e a descrição quebrava em cinco linhas de três palavras. Agora o
 * corpo ocupa a coluna inteira, cada filho carrega os 66ch, e quem é grade
 * declara que escapa.
 */
.coe-pagina__corpo {
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink);
}

.coe-pagina__corpo > * {
	max-width: 72ch;
}

/*
 * A grade de canais é mais larga que a medida de texto, mas não vai até o fim
 * da coluna: esticada nos 960px, o cartão vira uma faixa e a descrição, uma
 * linha só perdida na largura. 46rem deixa os dois cartões da primeira fila
 * com ~350px, perto da proporção do desenho original.
 */
.coe-pagina__corpo > .coe-canais {
	max-width: 46rem;
}

.coe-pagina__corpo > *:first-child {
	margin-top: 0;
}

.coe-pagina__corpo h2 {
	margin: var(--sp-12) 0 var(--sp-4);
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1.2;
	color: var(--ink);
	scroll-margin-top: calc(var(--coe-header-h) + var(--sp-6));
}

.coe-pagina__corpo h3 {
	margin: var(--sp-8) 0 var(--sp-3);
	font-family: var(--font-ui);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	scroll-margin-top: calc(var(--coe-header-h) + var(--sp-6));
}

.coe-pagina__corpo p {
	margin: 0 0 var(--sp-4);
}

.coe-pagina__corpo a {
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.coe-pagina__corpo a:hover {
	color: var(--navy-hover);
}

.coe-pagina__corpo strong {
	font-weight: 600;
}

.coe-pagina__corpo ul,
.coe-pagina__corpo ol {
	margin: 0 0 var(--sp-4);
	padding-left: var(--sp-6);
}

.coe-pagina__corpo li {
	margin-bottom: var(--sp-2);
}

.coe-pagina__corpo li::marker {
	color: var(--ink-muted);
}

.coe-pagina__corpo hr {
	height: 1px;
	margin: var(--sp-12) 0;
	border: 0;
	background-color: var(--line);
}

/* Tabela de dados legais e de prazos. Rola sozinha na horizontal em vez de
   empurrar a página inteira: o contrato não tem scroll lateral de corpo. */
.coe-tabela-wrap {
	margin: 0 0 var(--sp-6);
	overflow-x: auto;
}

.coe-pagina__corpo table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.coe-pagina__corpo th,
.coe-pagina__corpo td {
	padding: var(--sp-3) var(--sp-4);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}

.coe-pagina__corpo th {
	font-weight: 600;
	color: var(--ink);
	background-color: var(--paper-2);
}

/* ==========================================================================
   POR QUE DAQUI PARA BAIXO QUASE TUDO É PREFIXADO COM .coe-pagina__corpo

   A seção 3 estiliza os elementos crus — h2, h3, p, ul, li, a — com
   `.coe-pagina__corpo h2`, que é (0,1,1). Uma classe de componente solta,
   como `.coe-faixa__titulo`, é (0,1,0) e PERDE. Medido, não suposto: sem o
   prefixo, o h2 da faixa navy saía em --ink sobre --navy, 1,6:1, e os
   títulos dos pilares e dos cartões vinham com a margem do h3 de texto
   corrido.

   Os componentes abaixo moram dentro da coluna de leitura, então cada um que
   colide com a seção 3 leva o prefixo. Quem não colide fica sem.
   ========================================================================== */

/* ==========================================================================
   4. Nota em destaque
   Fundo --paper-2 com fio navy. O fio não é âmbar de propósito: âmbar sobre
   --paper-2 separa a 1,7:1 e o contrato exige 3:1 em borda de interface.
   ========================================================================== */

.coe-nota {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-4) var(--sp-6);
	background-color: var(--paper-2);
	border-left: 3px solid var(--navy);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 15px;
	line-height: 1.6;
}

.coe-nota p:last-child,
.coe-nota ul:last-child,
.coe-nota ol:last-child {
	margin-bottom: 0;
}

.coe-pagina__corpo .coe-nota__titulo {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--navy);
}

/* ==========================================================================
   5. Passos numerados
   O marcador é o arco da marca — mesma silhueta do tile de gênero e do
   retrato do autor, na escala do número.
   ========================================================================== */

.coe-pagina__corpo .coe-passos {
	margin: 0 0 var(--sp-8);
	padding: 0;
	list-style: none;
	counter-reset: coe-passo;
}

.coe-pagina__corpo .coe-passos > li {
	position: relative;
	margin: 0 0 var(--sp-6);
	padding-left: 56px;
	min-height: 36px;
}

.coe-passos > li::before {
	counter-increment: coe-passo;
	content: counter(coe-passo);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: var(--navy);
	color: var(--paper);
	border-radius: var(--radius-arch);
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}

.coe-pagina__corpo .coe-passos__titulo {
	margin: 0 0 var(--sp-1);
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.coe-pagina__corpo .coe-passos p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   6. Acordeão de perguntas
   ========================================================================== */

.coe-faq {
	margin: 0 0 var(--sp-8);
	border-top: 1px solid var(--line);
}

.coe-faq__item {
	border-bottom: 1px solid var(--line);
}

.coe-faq__pergunta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-4);
	/* 44px de alvo de toque vêm do padding, não de height: a pergunta pode
	   ter duas linhas no mobile e altura fixa cortaria a segunda. */
	padding: var(--sp-4) 0;
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
}

.coe-faq__pergunta::-webkit-details-marker {
	display: none;
}

.coe-faq__pergunta::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--font-ui);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--navy);
}

.coe-faq__item[open] .coe-faq__pergunta::after {
	content: "\2212"; /* menos — o traço do sinal, não hífen de texto */
}

.coe-faq__item[open] .coe-faq__pergunta {
	color: var(--navy);
}

.coe-faq__resposta {
	padding: 0 0 var(--sp-4);
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink);
}

.coe-faq__resposta > *:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   7. Dados da empresa e canais de atendimento
   ========================================================================== */

.coe-dados {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-6);
	background-color: var(--paper-2);
	border-radius: var(--radius);
	font-size: 15px;
	line-height: 1.6;
}

.coe-dados__linha {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-3);
	padding: var(--sp-2) 0;
	border-bottom: 1px solid var(--line);
}

.coe-dados__linha:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.coe-pagina__corpo .coe-dados__rotulo {
	flex: 0 0 150px;
	margin: 0;
	color: var(--ink-muted);
}

.coe-pagina__corpo .coe-dados__valor {
	flex: 1 1 240px;
	margin: 0;
	color: var(--ink);
}

.coe-pagina__corpo .coe-canais {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
	margin: 0 0 var(--sp-8);
	padding: 0;
	list-style: none;
}

.coe-pagina__corpo .coe-canais > li {
	margin: 0;
}

/*
 * Três canais numa grade de duas colunas deixavam o terceiro sozinho, com
 * metade da linha vazia ao lado. Sobrando um, ele ocupa a linha inteira.
 * Quando entrar o cartão de e-mail e forem quatro, a regra se desliga sozinha.
 */
.coe-pagina__corpo .coe-canais > .coe-canal:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/*
 * Cartões de canal.
 *
 * O arco da marca vira grafismo do cartão: traço de 11px, canto superior
 * esquerdo arredondado, aberto à direita e embaixo — a mesma silhueta dos
 * tiles de gênero, aqui abraçando o ícone. Cada canal carrega a própria cor em
 * `--coe-canal-cor`, e a barra de ação no pé em `--coe-canal-acao`.
 *
 * A tinta de dentro do círculo e da barra não é branca: sobre âmbar e laranja
 * o branco dá 1,9:1 e 2,3:1, e o sistema exige --ink nesses dois
 * preenchimentos (6,6:1 e 5,2:1). Sobre navy é --paper, 14,5:1.
 */
.coe-canal {
	--coe-canal-cor: var(--navy);
	--coe-canal-acao: var(--navy);
	--coe-canal-acao-hover: var(--navy-hover);
	--coe-canal-tinta: var(--paper);
	--coe-canal-pad: var(--sp-8);

	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--sp-6) var(--coe-canal-pad) 0;
	background-color: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	/* A barra sangra até a borda do cartão; sem isto ela cobriria o raio. */
	overflow: hidden;
}

.coe-canal--ambar {
	--coe-canal-cor: var(--amber);
	--coe-canal-acao: var(--orange);
	--coe-canal-acao-hover: var(--orange-hover);
	--coe-canal-tinta: var(--ink);
}

.coe-canal--laranja {
	--coe-canal-cor: var(--orange);
	--coe-canal-acao: var(--orange);
	--coe-canal-acao-hover: var(--orange-hover);
	--coe-canal-tinta: var(--ink);
}

/*
 * `bottom: 0` leva o traço até o pé do cartão. Quem o corta na altura certa é
 * a barra de ação: ela vem depois no DOM, é opaca e pinta por cima.
 */
.coe-canal__arco {
	position: absolute;
	left: var(--coe-canal-pad);
	top: var(--sp-4);
	bottom: 0;
	width: 66px;
	border: 11px solid var(--coe-canal-cor);
	border-right: 0;
	border-bottom: 0;
	border-top-left-radius: 999px;
}

.coe-canal__topo {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	column-gap: var(--sp-4);
	padding-bottom: var(--sp-6);
}

/* No cartão que ocupa a linha inteira, o texto continua com medida de leitura
   em vez de atravessar 900px. */
.coe-canal__corpo {
	max-width: 52ch;
}

.coe-canal__icone {
	position: relative;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin: var(--sp-4) 0 0 22px;
	border-radius: 999px;
	background-color: var(--coe-canal-cor);
	color: var(--coe-canal-tinta);
	line-height: 0;
}

.coe-pagina__corpo .coe-canal__titulo {
	margin: var(--sp-4) 0 0;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--ink);
}

.coe-pagina__corpo .coe-canal__texto {
	margin: var(--sp-2) 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
}

.coe-pagina__corpo .coe-canal__extra {
	margin: var(--sp-3) 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
}

/*
 * `margin: auto ... 0` no topo empurra a barra para o pé: com textos de
 * alturas diferentes, os cartões da linha terminam na mesma altura. As margens
 * laterais negativas cancelam o padding do cartão e a barra vai de borda a
 * borda.
 */
.coe-pagina__corpo .coe-canal__acao {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	/*
	 * `position: relative` não é para deslocar nada: é para a barra entrar na
	 * mesma camada de pintura do arco. O arco é `absolute`, e elemento
	 * posicionado pinta por cima de irmão sem posição — o traço atravessava a
	 * barra. Com os dois posicionados, quem vem depois no DOM vence, que é ela.
	 */
	position: relative;
	margin: auto calc(var(--coe-canal-pad) * -1) 0;
	padding: var(--sp-3) var(--coe-canal-pad);
	background-color: var(--coe-canal-acao);
	color: var(--coe-canal-tinta);
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	/* Quebra número e arroba longos em vez de estourar o cartão. */
	overflow-wrap: anywhere;
}

.coe-pagina__corpo a.coe-canal__acao {
	text-decoration: none;
}

.coe-pagina__corpo a.coe-canal__acao:hover {
	background-color: var(--coe-canal-acao-hover);
}

/* Sem `flex: 0 0 auto` o ícone e a seta encolhem antes do texto e saem
   cortados — foi o que aconteceu com a arroba do Instagram. */
.coe-canal__acao-icone,
.coe-canal__acao-seta {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.coe-canal__acao-rotulo {
	flex: 1 1 auto;
	min-width: 0;
}

.coe-canal__acao-seta {
	margin-left: auto;
	padding-left: var(--sp-2);
}

/* No celular o cartão tem a largura da tela: 32px de cada lado comem a
   descrição. Volta para 24px. */
@media (max-width: 767px) {
	.coe-canal {
		--coe-canal-pad: var(--sp-6);
	}
}

/* ==========================================================================
   8. Faixa de chamada dentro da página
   Navy sólido. Âmbar fica reservado à faixa "Publique seu livro" da home —
   repetir a faixa âmbar aqui gastaria o único momento âmbar do site.
   ========================================================================== */

.coe-faixa {
	margin: var(--sp-12) 0 0;
	padding: var(--sp-8);
	background-color: var(--navy);
	border-radius: var(--radius);
	color: var(--paper);
}

/*
 * O prefixo aqui não é estilo, é contraste: sem ele `.coe-pagina__corpo h2`
 * pinta este título em --ink sobre --navy, que separa a 1,6:1 e reprova em
 * qualquer critério. Com o prefixo é --paper sobre --navy, 14,5:1.
 */
.coe-pagina__corpo .coe-faixa__titulo {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.2;
	color: var(--paper);
}

.coe-pagina__corpo .coe-faixa__texto {
	margin: 0 0 var(--sp-6);
	font-size: 15px;
	line-height: 1.6;
	color: var(--paper);
	/*
	 * 85% de --paper sobre --navy dá 11,8:1 — o contrato pede 4,5:1 e o
	 * mockup usa este mesmo esmaecido no subtítulo do hero.
	 */
	opacity: 0.85;
}

.coe-faixa .coe-btn--on-navy {
	text-decoration: none;
}

/* ==========================================================================
   9. Pilares — usado na página Publique seu livro
   ========================================================================== */

.coe-pagina__corpo .coe-pilares {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-6);
	margin: 0 0 var(--sp-8);
	padding: 0;
	list-style: none;
}

.coe-pagina__corpo .coe-pilar {
	margin: 0;
	padding-top: var(--sp-4);
	border-top: 2px solid var(--navy);
}

.coe-pagina__corpo .coe-pilar__titulo {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.coe-pagina__corpo .coe-pilar p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-muted);
}

/* ==========================================================================
   10. Grade de autores
   ========================================================================== */

.coe-pagina__corpo .coe-autores-grade {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-8) var(--sp-6);
	margin: 0 0 var(--sp-8);
	padding: 0;
	list-style: none;
}

.coe-pagina__corpo .coe-autores-grade__item {
	margin: 0;
	text-align: center;
}

.coe-autores-grade__foto,
.coe-autores-grade__vazio {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: var(--sp-3);
	object-fit: cover;
	border-radius: var(--radius-arch);
	background-color: var(--paper-2);
}

.coe-pagina__corpo .coe-autores-grade__nome {
	display: block;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--navy);
	/* Sem o prefixo, `.coe-pagina__corpo a` sublinha os 73 nomes da grade. */
	text-decoration: none;
}

.coe-pagina__corpo .coe-autores-grade__nome:hover {
	text-decoration: underline;
}

.coe-autores-grade__contagem {
	display: block;
	margin-top: var(--sp-1);
	font-size: 13px;
	line-height: 1.3;
	color: var(--ink-muted);
}

/* Página de autores ocupa a largura toda: é grade, não texto corrido. */
.coe-pagina__corpo--largo,
.coe-pagina__corpo--largo > * {
	max-width: none;
}

/* ==========================================================================
   11. Painel de pendências — só para a equipe logada
   Tracejado de propósito: sinaliza "não é parte da página" à distância, sem
   precisar ler o rótulo.
   ========================================================================== */

.coe-pendencia {
	margin: var(--sp-12) 0 0;
	padding: var(--sp-4) var(--sp-6);
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	background-color: var(--paper-2);
}

.coe-pendencia__titulo {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink-muted);
}

.coe-pendencia__lista {
	margin: 0;
	padding-left: var(--sp-6);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-muted);
}

/* ==========================================================================
   12. Erro 404 e busca sem resultado
   ========================================================================== */

.coe-vazio {
	padding-block: var(--sp-20);
	text-align: center;
}

.coe-vazio__titulo {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	font-size: 40px;
	line-height: 1.1;
	color: var(--ink);
}

.coe-vazio__texto {
	max-width: 46ch;
	margin: 0 auto var(--sp-8);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink-muted);
}

.coe-vazio__busca {
	max-width: 480px;
	margin: 0 auto var(--sp-8);
}

.coe-vazio__atalhos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   13. Mobile
   ========================================================================== */

@media (max-width: 1023px) {
	.coe-pagina--com-indice {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-8);
	}

	/*
	 * No mobile o índice deixa de ser coluna e vira um bloco recolhível no
	 * topo. O `open` continua no HTML — é ele que garante o índice legível
	 * sem JS —, então quem fecha é esta regra.
	 */
	.coe-pagina__indice {
		position: static;
		padding: var(--sp-3) var(--sp-4);
		border: 1px solid var(--line);
		border-radius: var(--radius);
	}

	.coe-pagina__indice-titulo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding-left: 0;
		cursor: pointer;
	}

	.coe-pagina__indice-titulo::after {
		content: "+";
		font-size: 18px;
		font-weight: 400;
		letter-spacing: 0;
		color: var(--navy);
	}

	.coe-pagina__indice[open] .coe-pagina__indice-titulo::after {
		content: "\2212";
	}

	.coe-pagina__indice[open] .coe-pagina__indice-titulo {
		margin-bottom: var(--sp-2);
	}

	.coe-pagina__indice-lista a {
		padding-inline: 0;
		margin-left: 0;
		border-left: 0;
	}

	.coe-pagina__indice-lista a:hover {
		border-left-color: transparent;
	}
}

@media (max-width: 767px) {
	.coe-pagina-head__inner {
		padding-block: var(--sp-8) var(--sp-6);
	}

	.coe-pagina-head__titulo {
		font-size: 30px;
		max-width: none;
	}

	.coe-pagina-head__apoio {
		font-size: 16px;
	}

	.coe-pagina {
		padding-block: var(--sp-8) var(--sp-12);
	}

	.coe-pagina__corpo {
		font-size: 16px;
	}

	.coe-pagina__corpo h2 {
		margin-top: var(--sp-8);
		font-size: 24px;
	}

	/*
	 * Os prefixos seguem aqui dentro. Media query não muda especificidade:
	 * `.coe-canais` solto continua perdendo para o
	 * `.coe-pagina__corpo .coe-canais` da seção acima, e a grade ficaria em
	 * duas colunas de 170px no celular.
	 */
	.coe-pagina__corpo .coe-canais,
	.coe-pagina__corpo .coe-pilares {
		grid-template-columns: minmax(0, 1fr);
	}

	.coe-pagina__corpo .coe-autores-grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-6) var(--sp-4);
	}

	.coe-pagina__corpo .coe-passos > li {
		padding-left: 48px;
	}

	.coe-passos > li::before {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}

	.coe-pagina__corpo .coe-dados__rotulo {
		flex: 1 1 100%;
		font-size: 13px;
	}

	.coe-faixa {
		padding: var(--sp-6);
	}

	.coe-pagina__corpo .coe-faixa__titulo {
		font-size: 20px;
	}

	.coe-vazio {
		padding-block: var(--sp-12);
	}

	.coe-vazio__titulo {
		font-size: 28px;
	}

	.coe-vazio__texto {
		font-size: 16px;
	}
}