/* Blog Zelotes — plugin zelotes-blog.
   Capa de jornal de consulta: manchete sobre a foto, editorias com bandeira,
   listas densas com miniatura. Design aprovado no protótipo "Modelo A Jornal"
   (zelotes-OS/projetos/site-zelotes/prototipo-blog/modelos/a-jornal/), agora
   servindo dados reais do WordPress via includes/render.php.

   Tokens --zlb-* (escala de 9 degraus da marca: 52 44 36 26 20 17 16 14 11).
   Os valores abaixo são DEFAULT/RESERVA: includes/enqueue no arquivo principal
   do plugin sobrescreve --zlb-c1..c9, --zlb-fonte-*, --zlb-largura com o que
   estiver salvo em Configurações → Blog Zelotes (zelotes_blog_settings()).
   Paleta e nada de hex fora dela: os fios claros usam rgba do próprio c2. */

/* ---------- Tokens (defaults — sobrescritos por PHP a partir da config) ---------- */
.zlb {
	--zlb-c1: #C8F25A;
	--zlb-c2: #111215;
	--zlb-c3: #1D1F24;
	--zlb-c4: #F3EEE4;
	--zlb-c5: #5F636B;
	--zlb-c7: #9A9EA6;
	--zlb-c8: #2A2D34;
	--zlb-c9: #FFFFFF;

	--zlb-fio: rgba(17, 18, 21, .16);
	--zlb-fonte-titulo: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--zlb-fonte-corpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--zlb-t-nome: 52px;
	--zlb-t-manchete: 36px;
	--zlb-t-chamada: 26px;
	--zlb-t-cartao: 20px;
	--zlb-t-corpo: 17px;
	--zlb-t-botao: 16px;
	--zlb-t-micro: 14px;
	--zlb-t-rotulo: 11px;

	--zlb-raio-card: 12px;
	--zlb-raio-botao: 8px;
	--zlb-raio-badge: 6px;
	--zlb-largura: 71.25rem; /* 1140px, a largura real do zelotes.com.br — outro site sobrescreve pela config */
	--zlb-gap: 24px;
	--zlb-respiro: 48px;
	--zlb-espaco-topo: 0px; /* altura do header fixo do site, se houver — 0 não muda nada em site sem header fixo */
}

@media (max-width: 900px) {
	.zlb { --zlb-t-nome: 44px; --zlb-t-manchete: 36px; }
}
@media (max-width: 767px) {
	.zlb {
		--zlb-t-nome: 36px;
		--zlb-t-manchete: 26px;
		--zlb-t-chamada: 26px;
		--zlb-gap: 20px;
		--zlb-respiro: 40px;
	}
}

/* ---------- Base (escopo .zlb, reset com especificidade zero) ---------- */
.zlb {
	background: var(--zlb-c4);
	color: var(--zlb-c2);
	font-family: var(--zlb-fonte-corpo);
	font-size: var(--zlb-t-corpo);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	padding-top: var(--zlb-espaco-topo);
}
.zlb *, .zlb *::before, .zlb *::after { box-sizing: border-box; }
:where(.zlb) :is(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
:where(.zlb) :is(ul, ol) { list-style: none; }
:where(.zlb) a { color: inherit; text-decoration: none; }
:where(.zlb) img { display: block; max-width: 100%; }
:where(.zlb) time { white-space: nowrap; }

/* --zlb-largura é a borda do CONTEÚDO (a mesma do header do site), não da caixa:
   o recuo lateral fica por fora, senão o conteúdo sai 24px mais estreito de cada
   lado que o resto do site (achado do Rafael, 2026-09-22, medido: 1092px x 1140px). */
.zlb-container {
	--zlb-recuo: 24px;
	box-sizing: border-box;
	max-width: calc(var(--zlb-largura) + 2 * var(--zlb-recuo));
	margin-inline: auto;
	padding-inline: var(--zlb-recuo);
}
@media (max-width: 767px) { .zlb-container { --zlb-recuo: 16px; } }

/* Hello Elementor dá a .alignfull width:100vw + margem negativa. Dentro do
   Elementor o container já é de largura total, então os 100vw só somam a barra de
   rolagem do Windows e geram rolagem horizontal (~8px). Em tema de blocos o
   alignfull continua valendo (é o que solta o blog da largura de leitura). */
.elementor .zlb.alignfull {
	width: auto;
	max-width: none;
	margin-inline: 0;
}

/* ---------- Foto: contêiner com posição e proporção, imagem absoluta por dentro ---------- */
.zlb-foto { position: relative; overflow: hidden; background: var(--zlb-c3); }
.zlb-foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.zlb-foto--retrato img { object-position: 50% 30%; }

/* ---------- Peças pequenas ---------- */
.zlb-tag {
	display: inline-block;
	align-self: flex-start;
	padding: 4px 8px;
	border-radius: var(--zlb-raio-badge);
	background: var(--zlb-c1);
	color: var(--zlb-c2);
	font: 700 var(--zlb-t-rotulo)/1.2 var(--zlb-fonte-corpo);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.zlb-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font: 400 var(--zlb-t-micro)/1.4 var(--zlb-fonte-corpo);
	color: var(--zlb-c5);
}
.zlb-exemplo {
	padding: 1px 6px;
	border: 1px solid currentColor;
	border-radius: var(--zlb-raio-badge);
	font: 700 var(--zlb-t-rotulo)/1.4 var(--zlb-fonte-corpo);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.zlb-resumo {
	color: var(--zlb-c5);
	font-size: var(--zlb-t-corpo);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Títulos: Sora. O link do título cobre o cartão inteiro. */
.zlb-tit { font-family: var(--zlb-fonte-titulo); font-weight: 700; letter-spacing: -.005em; }
.zlb-tit--manchete { font-size: var(--zlb-t-manchete); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; }
.zlb-tit--destaque { font-size: var(--zlb-t-manchete); font-weight: 800; line-height: 1.16; letter-spacing: -.015em; }
.zlb-tit--chamada { font-size: var(--zlb-t-chamada); font-weight: 800; line-height: 1.22; letter-spacing: -.01em; }
.zlb-tit--cartao { font-size: var(--zlb-t-cartao); font-weight: 800; line-height: 1.28; }
.zlb-tit--linha { font-size: var(--zlb-t-corpo); font-weight: 700; line-height: 1.32; }

.zlb-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
/* Sublinhado suave no hover: 1px, cor do texto a 35%, mais afastado da letra.
   O de 2px na cor cheia pesava demais no título (Rafael, 2026-09-22). */
.zlb-link:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.zlb-link:focus-visible { outline: none; }
.zlb-link:focus-visible::after { outline: 3px solid var(--zlb-c2); outline-offset: 3px; border-radius: var(--zlb-raio-botao); }
@media (hover: hover) {
	.zlb-manchete:hover .zlb-foto img,
	.zlb-cartao:hover .zlb-foto img,
	.zlb-solto:hover .zlb-foto img,
	.zlb-destaque:hover .zlb-foto img,
	.zlb-horizontal:hover .zlb-foto img,
	.zlb-linha:hover .zlb-foto img { transform: scale(1.03); }
}

/* ---------- Cabeçalho de seção: fio grosso com bandeira pendurada ---------- */
.zlb-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 16px;
	margin-bottom: 24px;
	border-top: 3px solid var(--zlb-c2);
}
.zlb-bandeira {
	display: inline-block;
	padding: 7px 10px 6px;
	border-radius: 0 0 var(--zlb-raio-badge) var(--zlb-raio-badge);
	background: var(--zlb-c2);
	color: var(--zlb-c1);
	font: 700 var(--zlb-t-rotulo)/1.2 var(--zlb-fonte-corpo);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.zlb-topo__titulo {
	flex: 1 1 18ch;
	min-width: 0;
	padding-top: 5px;
	font: 800 var(--zlb-t-cartao)/1.3 var(--zlb-fonte-titulo);
	letter-spacing: -.005em;
}
.zlb-ver {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font: 600 var(--zlb-t-micro)/1 var(--zlb-fonte-corpo);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	text-decoration-color: var(--zlb-c2);
}
.zlb .zlb-ver { color: var(--zlb-c2); }
.zlb-ver:hover { text-decoration-color: var(--zlb-c5); }
.zlb a:focus-visible:not(.zlb-link) { outline: 3px solid var(--zlb-c2); outline-offset: 3px; border-radius: var(--zlb-raio-botao); }

/* cabeçalho centralizado: fio, bandeira, fio */
.zlb-topo--centro { display: block; border-top: 0; text-align: center; }
.zlb-regua { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.zlb-regua::before, .zlb-regua::after { content: ''; flex: 1; height: 3px; background: var(--zlb-c2); }
.zlb-topo--centro .zlb-bandeira { border-radius: var(--zlb-raio-badge); }
.zlb-topo--centro .zlb-topo__titulo {
	max-width: 40ch;
	text-wrap: balance;
	margin-inline: auto;
	padding-top: 0;
	font-size: var(--zlb-t-chamada);
	line-height: 1.2;
	letter-spacing: -.01em;
}
.zlb-topo--centro .zlb-ver { margin-top: 4px; }

@media (max-width: 767px) {
	.zlb-topo__titulo { flex-basis: 100%; order: 3; padding-top: 12px; }
	.zlb-ver { order: 2; margin-left: auto; }
}

/* ---------- Seções ---------- */
.zlb-secao { padding-top: var(--zlb-respiro); }
.zlb-fim { padding-bottom: var(--zlb-respiro); }

/* ---------- Faixa de edição (nome do blog, dados e perguntas) ---------- */
.zlb-edicao { padding-top: 20px; }
.zlb-edicao__topo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 32px;
	padding-bottom: 14px;
	border-bottom: 3px solid var(--zlb-c2);
}
.zlb-edicao__nome {
	font: 800 var(--zlb-t-nome)/1 var(--zlb-fonte-titulo);
	letter-spacing: -.03em;
}
.zlb-edicao__dados {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: right;
	font: 400 var(--zlb-t-micro)/1.4 var(--zlb-fonte-corpo);
	color: var(--zlb-c5);
}
.zlb-edicao__lema {
	font: 700 var(--zlb-t-rotulo)/1.2 var(--zlb-fonte-corpo);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--zlb-c2);
}
/* margem: sem ela as cápsulas encostavam no fio de 3px do topo (Rafael, 2026-09-22) */
/* Etiquetas numa faixa escura, lidas como menu do blog: variação D escolhida pelo Rafael (04/10). */
.zlb-editorias { margin-top: 16px; padding: 12px; border-radius: var(--zlb-raio-card, 12px); background: var(--zlb-c2); }
.zlb-editorias ul { display: flex; flex-wrap: wrap; gap: 8px; }
.zlb-editorias a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid rgba(243, 238, 228, .35);
	border: 1px solid color-mix(in srgb, var(--zlb-c4) 35%, transparent);
	border-radius: 999px;
	background: transparent;
	font: 600 var(--zlb-t-micro)/1 var(--zlb-fonte-corpo);
	color: var(--zlb-c4);
	white-space: nowrap;
	transition: background-color .15s, color .15s, border-color .15s;
}
.zlb .zlb-editorias a:hover,
.zlb .zlb-editorias a:focus-visible,
.zlb .zlb-editorias a[aria-current] { background: var(--zlb-c1); border-color: var(--zlb-c1); color: var(--zlb-c2); }
.zlb .zlb-editorias a:focus-visible { outline: 2px solid var(--zlb-c4); outline-offset: 2px; }
.zlb-editorias .zlb-n { color: var(--zlb-c7); font-weight: 400; }
.zlb-editorias a:hover .zlb-n, .zlb-editorias a[aria-current] .zlb-n { color: var(--zlb-c2); }
@media (max-width: 767px) {
	.zlb-edicao__topo { align-items: flex-start; flex-direction: column; }
	.zlb-edicao__dados { text-align: left; }
	/* no celular a faixa vira uma linha que rola para o lado (antes ficava escondida) */
	.zlb-editorias { padding: 10px; margin-inline: 0; }
	.zlb-editorias ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.zlb-editorias ul::-webkit-scrollbar { display: none; }
	.zlb-editorias li { flex: 0 0 auto; }
}

/* ---------- Capa: manchete sobre a foto + coluna lateral ---------- */
.zlb-capa { padding-top: 24px; }
.zlb-capa__grade {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: 32px;
	align-items: stretch;
}
.zlb-capa__grade--so { grid-template-columns: minmax(0, 1fr); }

/* Exceção ao design system a decidir pelo Rafael: título sobre a foto.
   O texto fica sobre bloco de cor sólida (c2): o degradê nasce transparente e
   chega a c2 sólido antes de o texto começar. Texto c9/c7 sobre c2. */
.zlb-manchete {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--zlb-raio-card);
	background: var(--zlb-c2);
	color: var(--zlb-c9);
}
.zlb-manchete__foto { flex: 1 1 auto; min-height: 440px; }
.zlb-manchete__texto {
	z-index: 2; /* item flex: z-index vale sem position, e o link do título continua esticando pelo artigo inteiro */
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: -104px;
	padding: 112px 32px 32px;
	background: linear-gradient(to bottom, rgba(17, 18, 21, 0) 0, var(--zlb-c2) 88px);
}
.zlb-manchete .zlb-tit {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 30ch;
}
.zlb-manchete .zlb-meta { color: var(--zlb-c7); }
.zlb-manchete .zlb-link:focus-visible::after { outline: 3px solid var(--zlb-c1); outline-offset: -6px; border-radius: var(--zlb-raio-card); }
.zlb-capa__grade--so .zlb-manchete .zlb-tit { max-width: 40ch; }
.zlb-capa__grade--so .zlb-manchete__foto { min-height: 500px; }

.zlb-lateral { display: flex; flex-direction: column; min-width: 0; }
.zlb-lateral .zlb-topo { margin-bottom: 0; }

@media (max-width: 900px) {
	.zlb-capa__grade { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.zlb-manchete__foto { min-height: 0; flex: none; aspect-ratio: 16 / 10; }
	.zlb-capa__grade--so .zlb-manchete__foto { min-height: 0; }
	.zlb-manchete .zlb-tit { max-width: 34ch; }
}
@media (max-width: 767px) {
	.zlb-capa { padding-top: 16px; }
	.zlb-manchete__foto { aspect-ratio: 5 / 4; }
	.zlb-manchete__texto { gap: 10px; padding: 104px 20px 24px; }
}

/* ---------- Listas com miniatura ---------- */
.zlb-linhas { display: flex; flex: 1; flex-direction: column; }
.zlb-linha {
	position: relative;
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding-block: 16px;
	border-top: 1px solid var(--zlb-fio);
}
.zlb-linhas > .zlb-linha:first-child { border-top: 0; }
.zlb-linha__foto { aspect-ratio: 4 / 3; border-radius: var(--zlb-raio-botao); }
.zlb-linha__texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zlb-linha--dir { grid-template-columns: minmax(0, 1fr) 112px; }
.zlb-linha--dir .zlb-linha__foto { order: 2; }
.zlb-lateral .zlb-linha { padding-block: 18px; }
/* "Também em destaque": a foto tem a altura do texto, do topo da etiqueta até a linha da data
   (recorte, sem distorcer), e o conjunto fica centrado na linha (Rafael, 04/10). */
.zlb-lateral .zlb-linha { align-items: stretch; align-content: center; }
.zlb-lateral .zlb-linha__foto { aspect-ratio: auto; min-height: 84px; }

/* ---------- Banner da casa: faixa de c1 (espaço próprio, não anúncio de terceiro) ---------- */
.zlb-quiz {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	padding: 28px 36px;
	border-radius: var(--zlb-raio-card);
	background: var(--zlb-c1);
	color: var(--zlb-c2);
}
.zlb-quiz__kicker {
	display: block;
	margin-bottom: 8px;
	font: 700 var(--zlb-t-rotulo)/1.2 var(--zlb-fonte-corpo);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.zlb-quiz__titulo { max-width: 26ch; font: 800 var(--zlb-t-chamada)/1.2 var(--zlb-fonte-titulo); letter-spacing: -.01em; }
.zlb-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border-radius: var(--zlb-raio-botao);
	background: var(--zlb-c2);
	color: var(--zlb-c1);
	font: 700 var(--zlb-t-botao)/1 var(--zlb-fonte-corpo);
	transition: background-color .15s ease;
}
.zlb-botao:hover { background: var(--zlb-c3); }
.zlb .zlb-quiz a:focus-visible { outline: 3px solid var(--zlb-c2); outline-offset: 3px; }
@media (max-width: 900px) {
	.zlb-quiz__titulo { max-width: 22ch; }
}
@media (max-width: 767px) {
	.zlb-quiz { padding: 24px 20px; gap: 16px; }
	.zlb-botao { width: 100%; }
}

/* ---------- Cartão com moldura (fileira) ---------- */
.zlb-fileira { display: grid; gap: var(--zlb-gap); }
.zlb-fileira--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zlb-fileira--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zlb-cartao {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--zlb-fio);
	border-radius: var(--zlb-raio-card);
	background: var(--zlb-c9);
}
.zlb-cartao__foto { aspect-ratio: 3 / 2; }
.zlb-cartao__corpo { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 24px; }
.zlb-cartao__corpo .zlb-meta { margin-top: auto; padding-top: 4px; }
.zlb-fileira--2 .zlb-tit--cartao { font-size: var(--zlb-t-chamada); line-height: 1.22; }
@media (max-width: 900px) {
	.zlb-fileira--3 .zlb-longo { display: none; }
	.zlb-fileira--3 .zlb-tit--cartao { font-size: var(--zlb-t-corpo); }
	.zlb-fileira--2 .zlb-tit--cartao { font-size: var(--zlb-t-cartao); line-height: 1.3; }
}
@media (max-width: 767px) {
	.zlb-fileira--3 .zlb-longo { display: inline; }
	.zlb-fileira--2, .zlb-fileira--3 { grid-template-columns: minmax(0, 1fr); }
	.zlb-fileira--3 .zlb-tit--cartao { font-size: var(--zlb-t-cartao); }
	.zlb-fileira--2 .zlb-tit--cartao { font-size: var(--zlb-t-cartao); }
	.zlb-cartao__corpo { padding: 18px 18px 22px; }
}

/* ---------- Grade sem moldura (cabeçalho centralizado) ---------- */
.zlb-grade { display: grid; gap: 28px var(--zlb-gap); }
.zlb-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zlb-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zlb-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zlb-solto { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.zlb-solto__foto { aspect-ratio: 4 / 3; border-radius: var(--zlb-raio-card); }
.zlb-solto__corpo { display: flex; flex: 1; flex-direction: column; gap: 8px; }
.zlb-solto__corpo .zlb-meta { margin-top: auto; padding-top: 2px; }
.zlb-grade--2 .zlb-solto__foto { aspect-ratio: 16 / 10; }
.zlb-grade--2 .zlb-tit--cartao { font-size: var(--zlb-t-chamada); line-height: 1.22; }
.zlb-grade--3 .zlb-tit--cartao, .zlb-grade--4 .zlb-tit--cartao { font-size: var(--zlb-t-corpo); line-height: 1.32; }
@media (max-width: 900px) {
	.zlb-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Página de categoria (modo categoria, v0.1.6): a grade de 3 colunas
	   ganha um degrau de 2 no tablet — a seção "Atrair pacientes" da home
	   não precisava disso porque é uma seção entre outras, mais curta; aqui
	   é a página inteira. */
	.zlb-cat-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zlb-grade--2 .zlb-tit--cartao { font-size: var(--zlb-t-cartao); line-height: 1.3; }
}
@media (max-width: 767px) {
	.zlb-grade--2, .zlb-grade--3, .zlb-grade--4 { grid-template-columns: minmax(0, 1fr); gap: 0; }
	/* no celular a grade vira lista com miniatura: mais artigos por tela */
	.zlb-solto {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 16px;
		align-items: center;
		padding-block: 16px;
		border-top: 1px solid var(--zlb-fio);
	}
	.zlb-grade > .zlb-solto:first-child { border-top: 0; padding-top: 0; }
	.zlb-solto__foto, .zlb-grade--2 .zlb-solto__foto { aspect-ratio: 4 / 3; border-radius: var(--zlb-raio-botao); }
	.zlb-grade--2 .zlb-tit--cartao { font-size: var(--zlb-t-corpo); line-height: 1.32; }
}

/* ---------- Faixa escura de largura total (c2 com textura de pontos) ---------- */
.zlb-escura, .zlb-final {
	position: relative;
	overflow: hidden;
	margin-top: var(--zlb-respiro);
	padding-block: var(--zlb-respiro);
	background: var(--zlb-c2);
	color: var(--zlb-c4);
}
.zlb-escura::before, .zlb-final::before {
	content: '';
	position: absolute;
	z-index: 0;
	inset: 0;
	background-image: radial-gradient(rgba(243, 238, 228, .16) 1px, transparent 1px);
	background-size: 22px 22px;
	pointer-events: none;
}
.zlb-escura::after, .zlb-final::after {
	content: '';
	position: absolute;
	z-index: 0;
	inset: 0;
	background: radial-gradient(ellipse 94% 84% at 50% 50%, transparent 40%, var(--zlb-c2) 100%);
	pointer-events: none;
}
.zlb-escura > .zlb-container, .zlb-final > .zlb-container { position: relative; z-index: 1; }
@media (max-width: 767px) {
	.zlb-escura::before, .zlb-final::before { background-size: 18px 18px; }
}
.zlb-escura + .zlb-secao { padding-top: var(--zlb-respiro); }

.zlb-escura .zlb-topo { border-top-color: var(--zlb-c1); }
.zlb-escura .zlb-bandeira { background: var(--zlb-c1); color: var(--zlb-c2); }
.zlb-escura .zlb-ver { text-decoration-color: var(--zlb-c1); }
.zlb .zlb-escura .zlb-ver { color: var(--zlb-c4); }
.zlb-escura .zlb-ver:hover { text-decoration-color: var(--zlb-c4); }
.zlb-escura .zlb-meta { color: var(--zlb-c7); }
.zlb-escura .zlb-resumo { color: var(--zlb-c7); }
.zlb-escura .zlb-linha { border-top-color: var(--zlb-c8); }
.zlb-escura .zlb-link:focus-visible::after,
.zlb-final .zlb-link:focus-visible::after { outline-color: var(--zlb-c1); }
.zlb .zlb-escura a:focus-visible:not(.zlb-link),
.zlb .zlb-final a:focus-visible:not(.zlb-link) { outline-color: var(--zlb-c1); }

.zlb-faixa { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: stretch; }
.zlb-destaque { position: relative; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.zlb-destaque__foto { aspect-ratio: 16 / 10; border-radius: var(--zlb-raio-card); }
.zlb-destaque__corpo { display: flex; flex-direction: column; gap: 12px; }
.zlb-faixa .zlb-linhas { min-width: 0; }
.zlb-faixa .zlb-linha { grid-template-columns: 140px minmax(0, 1fr); }
@media (max-width: 900px) {
	.zlb-faixa { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 767px) {
	.zlb-faixa .zlb-linha { grid-template-columns: 112px minmax(0, 1fr); }
}

/* cartões escuros (faixa com 2 ou 3 artigos) */
.zlb-escura .zlb-cartao { border-color: var(--zlb-c8); background: var(--zlb-c3); }
.zlb-escura .zlb-fileira--3 .zlb-tit--cartao { font-size: var(--zlb-t-cartao); }

/* ---------- Duas colunas: seção principal + Mais lidos ---------- */
.zlb-colunas { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0 48px; align-items: stretch; }
.zlb-colunas__principal { display: flex; flex-direction: column; min-width: 0; }
.zlb-colunas__lateral { display: flex; flex-direction: column; min-width: 0; padding-left: 32px; border-left: 1px solid var(--zlb-fio); }
.zlb-colunas__lateral .zlb-topo { margin-bottom: 4px; }

.zlb-horizontal {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 28px;
	align-items: center;
	min-width: 0;
}
.zlb-colunas__principal--so .zlb-horizontal { flex: 1 1 auto; }
.zlb-horizontal__foto { align-self: stretch; min-height: 240px; border-radius: var(--zlb-raio-card); }
.zlb-horizontal__corpo { display: flex; flex-direction: column; gap: 12px; padding-block: 4px; }
.zlb-horizontal .zlb-resumo { -webkit-line-clamp: 3; }

.zlb-pares {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px;
	margin-top: 24px;
	padding-top: 8px;
	border-top: 1px solid var(--zlb-fio);
}
.zlb-pares .zlb-linha { border-top: 1px solid var(--zlb-fio); }
.zlb-pares .zlb-linha:nth-child(-n + 2) { border-top: 0; }
.zlb-pares .zlb-linha { grid-template-columns: 104px minmax(0, 1fr); }

/* Mais lidos: ranking numerado, ordem de verdade */
.zlb-rank { display: flex; flex: 1; flex-direction: column; }
.zlb-rank__item {
	position: relative;
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 8px;
	align-items: center;
	padding-block: 14px;
	border-top: 1px solid var(--zlb-fio);
}
.zlb-rank__item:first-child { border-top: 0; }
.zlb-rank__n { font: 800 var(--zlb-t-manchete)/1 var(--zlb-fonte-titulo); letter-spacing: -.03em; color: var(--zlb-c2); }
.zlb-rank__texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zlb-rank .zlb-tit {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.zlb-rank .zlb-meta { gap: 0 6px; }

@media (max-width: 900px) {
	.zlb-colunas { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.zlb-colunas__lateral { padding-left: 0; border-left: 0; }
}
@media (max-width: 767px) {
	.zlb-horizontal { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.zlb-horizontal__foto { align-self: auto; min-height: 0; aspect-ratio: 16 / 10; }
	.zlb-pares { grid-template-columns: minmax(0, 1fr); }
	.zlb-pares .zlb-linha:nth-child(2) { border-top: 1px solid var(--zlb-fio); }
	.zlb-rank__item { grid-template-columns: 40px minmax(0, 1fr); }
}

/* ---------- Duplo: 2 cartões grandes + lista em pares ---------- */
.zlb-duplo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zlb-gap) 32px; }
.zlb-grande { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.zlb-grande__foto { aspect-ratio: 16 / 10; border-radius: var(--zlb-raio-card); }
.zlb-grande__corpo { display: flex; flex-direction: column; gap: 10px; }
.zlb-duplo + .zlb-pares { margin-top: 28px; padding-top: 8px; }
@media (max-width: 767px) {
	.zlb-duplo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---------- Mais para ler (sobras): destaque horizontal + fileira ---------- */
.zlb-mais .zlb-horizontal { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--zlb-fio); }
.zlb-mais .zlb-horizontal:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* ---------- Faixa final: listas curtas ---------- */
.zlb-final { padding-block: 56px; }
.zlb-final__colunas { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 40px; }
.zlb-final__titulo {
	margin-bottom: 8px;
	padding-top: 12px;
	border-top: 3px solid var(--zlb-c1);
	font: 800 var(--zlb-t-cartao)/1.3 var(--zlb-fonte-titulo);
	color: var(--zlb-c4);
}
.zlb-final__colunas > div { display: flex; flex-direction: column; min-width: 0; }
.zlb-final__lista { display: flex; flex: 1; flex-direction: column; }
.zlb-final .zlb-linha { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-content: start; align-items: start; padding-block: 14px; border-top: 1px solid var(--zlb-c8); }
.zlb-final .zlb-linha:first-child { border-top: 0; }
.zlb-final .zlb-meta { color: var(--zlb-c7); }
.zlb-final .zlb-tit--linha { font-size: var(--zlb-t-botao); }
.zlb-final .zlb-rank__n { color: var(--zlb-c1); font-size: var(--zlb-t-chamada); }
.zlb-final .zlb-rank__item { border-top-color: var(--zlb-c8); }
.zlb-final .zlb-rank__item:first-child { border-top: 0; }

/* atalhos: lista de links com nome + descrição; as linhas esticam até a altura da coluna mais alta */
.zlb-final__lista--atalhos > li { display: flex; flex: 1 1 auto; flex-direction: column; }
.zlb-final__lista--atalhos > li + li > .zlb-atalho { border-top: 1px solid var(--zlb-c8); }
.zlb-atalho {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	min-height: 56px;
	padding-block: 12px;
}
.zlb-atalho__nome { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; font: 700 var(--zlb-t-corpo)/1.3 var(--zlb-fonte-titulo); color: var(--zlb-c4); }
.zlb-atalho__nome .zlb-n { font: 600 var(--zlb-t-micro)/1.3 var(--zlb-fonte-corpo); color: var(--zlb-c1); }
.zlb-atalho__desc { font: 400 var(--zlb-t-micro)/1.45 var(--zlb-fonte-corpo); color: var(--zlb-c7); }
a.zlb-atalho:hover .zlb-atalho__nome > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.zlb-atalho--vazio .zlb-atalho__nome, .zlb-atalho--vazio .zlb-n { color: var(--zlb-c7); }

@media (max-width: 900px) {
	.zlb-final__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
	.zlb-final__colunas > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.zlb-final { padding-block: 48px; }
	.zlb-final__colunas { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
	.zlb *, .zlb *::before, .zlb *::after { transition: none !important; }
	.zlb .zlb-foto img { transform: none !important; }
}

/* ---------- Foto ausente: mantém o contêiner (proporção/fundo), sem <img> ---------- */
.zlb-foto--vazia { background: var(--zlb-c3); }

/* ---------- Página de categoria (modo categoria, v0.1.6) ----------
   Modelo 1 "Grade", aprovado pelo Rafael em 2026-09-22. Reaproveita os
   primitivos já existentes acima (.zlb-grade, .zlb-solto, .zlb-tag,
   .zlb-meta, .zlb-tit, .zlb-link, .zlb-botao) — o que segue é só o que é
   específico da página de categoria: trilha, cabeçalho, rodapé de outras
   categorias, paginação e estado vazio. Ver o protótipo em
   zelotes-OS/projetos/site-zelotes/prototipo-blog/paginas-categoria/
   modelo-1-grade/ pra a ideia completa e a escolha de risco (cartão sem
   resumo, pra caber mais por tela). */

.zlb-migalha ol { display: flex; flex-wrap: wrap; gap: 6px; font: 400 var(--zlb-t-micro)/1.4 var(--zlb-fonte-corpo); color: var(--zlb-c5); }
.zlb-migalha li { display: flex; align-items: center; gap: 6px; }
.zlb-migalha li:not(:last-child)::after { content: '/'; color: var(--zlb-c5); }
.zlb-migalha a { display: inline-flex; align-items: center; min-height: 24px; color: var(--zlb-c5); text-decoration: underline; text-decoration-color: transparent; }
.zlb-migalha a:hover { text-decoration-color: currentColor; }
.zlb-migalha li[aria-current] { color: var(--zlb-c2); font-weight: 600; }

.zlb-cat-cabecalho { padding-top: var(--zlb-respiro); padding-bottom: 32px; }
.zlb-cat-titulo {
	margin-top: 12px;
	font: 800 var(--zlb-t-nome)/1.08 var(--zlb-fonte-titulo);
	letter-spacing: -.02em;
}
.zlb-cat-intro { margin-top: 16px; max-width: 62ch; font-size: var(--zlb-t-corpo); color: var(--zlb-c5); }

.zlb-cat-outras { padding-top: 24px; padding-bottom: 32px; border-top: 1px solid var(--zlb-fio); }
.zlb-cat-outras__titulo { display: block; margin-bottom: 12px; font: 700 var(--zlb-t-micro)/1.2 var(--zlb-fonte-corpo); letter-spacing: .08em; text-transform: uppercase; color: var(--zlb-c5); }
.zlb-cat-outras ul { display: flex; flex-wrap: wrap; gap: 10px; }
.zlb-cat-outras a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 16px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--zlb-c1) 22%, var(--zlb-c4));
	font: 600 var(--zlb-t-micro)/1 var(--zlb-fonte-corpo);
	color: var(--zlb-c2);
	transition: background-color .15s;
}
.zlb-cat-outras a:hover { background: color-mix(in srgb, var(--zlb-c1) 38%, var(--zlb-c4)); }
.zlb-cat-outras a[aria-current] { background: var(--zlb-c2); color: var(--zlb-c4); }

.zlb-cat-paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: var(--zlb-respiro); }
.zlb-cat-paginacao__resumo { font: 400 var(--zlb-t-micro)/1.4 var(--zlb-fonte-corpo); color: var(--zlb-c5); }
.zlb-cat-paginacao ol { display: flex; align-items: center; gap: 8px; }
.zlb-cat-paginacao a, .zlb-cat-paginacao span[aria-current] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 10px;
	border-radius: var(--zlb-raio-botao);
	font: 600 var(--zlb-t-botao)/1 var(--zlb-fonte-corpo);
}
.zlb-cat-paginacao a { color: var(--zlb-c2); border: 1px solid var(--zlb-fio); }
.zlb-cat-paginacao a:hover { background: var(--zlb-c1); border-color: var(--zlb-c1); }
.zlb-cat-paginacao span[aria-current] { background: var(--zlb-c2); color: var(--zlb-c4); }
.zlb-cat-paginacao a:focus-visible { outline: 3px solid var(--zlb-c2); outline-offset: 2px; }

.zlb-cat-vazio {
	margin-bottom: var(--zlb-respiro);
	padding: 40px 32px;
	border: 1px solid var(--zlb-fio);
	border-radius: var(--zlb-raio-card);
	text-align: center;
}
.zlb-cat-vazio__eyebrow { display: block; margin-bottom: 12px; font: 700 var(--zlb-t-rotulo)/1.2 var(--zlb-fonte-corpo); letter-spacing: .12em; text-transform: uppercase; color: var(--zlb-c5); }
.zlb-cat-vazio p { max-width: 52ch; margin-inline: auto; color: var(--zlb-c5); }
.zlb-cat-vazio__acoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 24px; margin-top: 24px; }
.zlb-cat-vazio__voltar { display: inline-flex; align-items: center; min-height: 40px; font: 600 var(--zlb-t-botao)/1 var(--zlb-fonte-corpo); color: var(--zlb-c2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

@media (max-width: 767px) {
	.zlb-cat-paginacao { justify-content: center; text-align: center; }
	.zlb-cat-vazio { padding: 32px 24px; }
}

/* CSS do player "Ouvir este artigo" mudou pra assets/leitor.css (v0.1.10),
   carregado só na página de post — não faz sentido baixar essas regras em
   home/categoria, que nunca têm o player. */

/* ---------- Aviso de configuração (só visível pra quem pode editar) ---------- */
.zlb-aviso {
	max-width: var(--zlb-largura);
	margin: 24px auto;
	padding: 16px 20px;
	border: 1px solid var(--zlb-c8);
	border-radius: var(--zlb-raio-card);
	background: var(--zlb-c4);
	color: var(--zlb-c2);
	font: 400 var(--zlb-t-corpo)/1.5 var(--zlb-fonte-corpo);
}
.zlb-aviso a { color: var(--zlb-c2); text-decoration: underline; }

/* ---------- Defesa contra CSS de tema/page-builder que estiliza h1-h6 e "a" soltos ----------
   Achado real, testado (ver com-header-footer/LEIA.md do protótipo): o Kit CSS do
   Elementor tem `.elementor-kit-7 h1{...}` até `h6{...}` — estilo padrão pra texto
   solto de post. Essa regra tem 2 níveis de especificidade (1 classe + 1 tag) e
   VENCE qualquer heading estilizado por 1 classe só, tipo `.zlb-tit--cartao{...}`
   (1 nível) — não importa o que essa regra diga, ela perde. Mesmo risco existe em
   qualquer tema/page-builder que estilize h1-h6 direto.
   Mesmo problema achado depois (2026-09-22) em `.elementor-kit-7 a{color:...}`:
   deixava TODO título (o link dentro do h2/h3) na cor de link global do Kit,
   ignorando o "color: inherit" de `:where(.zlb) a` (especificidade zero de propósito).
   Blindagem: repete cada seletor de heading e o link com o prefixo `.zlb ` (2
   classes = 2 níveis), batendo qualquer combinação "1 classe + 1 tag" sem
   precisar de !important. Só as propriedades de tipografia/cor — o resto já
   está seguro (nenhum tema estiliza h1-h6 com display/posição). */
.zlb .zlb-link { color: inherit; }
/* Mesma blindagem, pro :hover: achado pelo Rafael na página de categoria
   (2026-09-22) — `.elementor-kit-7 a:hover{color:var(--e-global-color-c4)}`
   pinta o título com a cor quase branca do fundo (c4) no hover, o título
   "some" visualmente. A defesa de cima só cobre o estado normal do link;
   :hover do Kit tem 1 classe + 1 pseudo-classe + 1 tag, então precisa do
   mesmo "2 classes" pra vencer. */
.zlb .zlb-link:hover { color: inherit; }
.zlb .zlb-tit { font-family: var(--zlb-fonte-titulo); font-weight: 700; letter-spacing: -.005em; }
.zlb .zlb-tit--manchete { font-size: var(--zlb-t-manchete); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; }
.zlb .zlb-tit--destaque { font-size: var(--zlb-t-manchete); font-weight: 800; line-height: 1.16; letter-spacing: -.015em; }
.zlb .zlb-tit--chamada { font-size: var(--zlb-t-chamada); font-weight: 800; line-height: 1.22; letter-spacing: -.01em; }
.zlb .zlb-tit--cartao { font-size: var(--zlb-t-cartao); font-weight: 800; line-height: 1.28; }
.zlb .zlb-tit--linha { font-size: var(--zlb-t-corpo); font-weight: 700; line-height: 1.32; }
.zlb .zlb-topo__titulo { font: 800 var(--zlb-t-cartao)/1.3 var(--zlb-fonte-titulo); letter-spacing: -.005em; }
.zlb .zlb-topo--centro .zlb-topo__titulo { font-size: var(--zlb-t-chamada); line-height: 1.2; letter-spacing: -.01em; }
.zlb .zlb-topo h2.zlb-bandeira, .zlb .zlb-lateral h2.zlb-bandeira { padding: 0; border-radius: 0; background: none; color: var(--zlb-c2); font: 700 var(--zlb-t-rotulo)/1.2 var(--zlb-fonte-corpo); letter-spacing: .1em; text-transform: uppercase; }
.zlb .zlb-edicao__nome { font: 800 var(--zlb-t-nome)/1 var(--zlb-fonte-titulo); letter-spacing: -.03em; }
.zlb .zlb-final__titulo { font: 800 var(--zlb-t-cartao)/1.3 var(--zlb-fonte-titulo); }
/* .zlb-fileira--2/.zlb-grade--2 reescalam .zlb-tit--cartao por contexto — repete aqui pelo mesmo motivo. */
.zlb .zlb-fileira--2 .zlb-tit--cartao { font-size: var(--zlb-t-chamada); line-height: 1.22; }
.zlb .zlb-grade--2 .zlb-tit--cartao { font-size: var(--zlb-t-chamada); line-height: 1.22; }
.zlb .zlb-grade--3 .zlb-tit--cartao, .zlb .zlb-grade--4 .zlb-tit--cartao { font-size: var(--zlb-t-corpo); line-height: 1.32; }
.zlb .zlb-final .zlb-tit--linha { font-size: var(--zlb-t-botao); }

/* v0.1.18 (08/10/2026): contraste. Links no corpo do post em texto escuro com sublinhado na cor da marca
   (verde-limão sobre branco dava ~1,3:1; o mínimo é 4,5:1). Vale para o texto do post, não para botões. */
#zlb-leitor-texto a:not([class]) { color: #111215; text-decoration: underline; text-decoration-color: #C8F25A; text-decoration-thickness: 2px; text-underline-offset: 3px; }
#zlb-leitor-texto a:not([class]):hover { text-decoration-color: #111215; }
/* Primeira linha da caixa escura "Quer ajuda profissional?" (cinza #5F636B sobre preto, ~2,9:1) */
body .elementor-element.elementor-element-b33be1d .elementor-heading-title { color: #9A9EA6 !important; }