/* Reset básico */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Scroll suave e transições só pra quem não pediu movimento reduzido no SO
   (prefers-reduced-motion) — requisito de acessibilidade (WCAG 2.3.3). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Compensa o header sticky ao rolar pra uma âncora do sumário do post */
.entry-content h2,
.entry-content h3 {
	scroll-margin-top: 96px;
}

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

/* Título estrutural pra leitor de tela sem alterar o visual — usado quando um
   agrupamento de conteúdo precisa de heading próprio (hierarquia correta),
   mas a seção já comunica visualmente do que se trata sem repetir o rótulo. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Cor de texto inline do Gutenberg (destaque de palavra em título/parágrafo) é
   serializada como <mark class="has-inline-color">. O <mark> nasce com fundo
   amarelo por padrão no navegador: zerar aqui pra não depender só do
   background-color:rgba(0,0,0,0) que o editor escreve inline. */
mark.has-inline-color {
	background-color: transparent;
}

/* Header sticky — o position:sticky precisa ficar no wrapper <header
   class="wp-block-template-part"> gerado pelo próprio wp:template-part, não
   no .site-header interno. O sticky só "flutua" dentro da altura do seu pai
   direto; como esse wrapper tem exatamente a mesma altura do header (é um
   wrapper 1:1, sem folga), aplicar sticky no filho não tem espaço pra
   funcionar e o header simplesmente rola com a página. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Borda fina + sombra suave separam o header do conteúdo quando a página rola
   por baixo dele (o header é sticky e o fundo é branco, igual ao do hero: sem
   isso os dois se fundem numa faixa só). A borda usa o mesmo token de linha
   clara do resto do tema e a sombra é o preset `sm`, o mais leve dos três. */
.site-header {
	background: var(--wp--preset--color--background);
	border-bottom: 1px solid var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--sm);
}

/* <main> e <footer> são o 2º e o 3º filho direto de .wp-site-blocks (depois
   do header) e herdam o blockGap padrão do WordPress (margin-block-start)
   como uma faixa vazia revelando a cor de fundo do body entre as seções —
   zerar nos dois. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-top: 0;
	margin-bottom: 0;
}

.site-header__inner {
	position: relative;
	flex-wrap: nowrap;
}

.site-header__logo,
.site-header__nav {
	flex-shrink: 0;
}

.site-header__nav {
	align-items: center;
}

.site-header__logo img {
	height: 55px;
	width: auto;
}

/* Alvo de toque dos itens do menu (WCAG 2.5.8 exige 24x24 no mínimo; o padrão
   Navival é 40-44px). O bloco de Navegação herda só o font-size `sm` do
   theme.json e não tem padding próprio: sem isso os links saem com ~23px de
   altura e reprovam o critério por 1px — fácil de não notar, porque o link
   continua clicável no mouse.
   Os dois seletores são necessários: .wp-block-navigation-item__content é o
   item de um menu de verdade, .wp-block-pages-list__item__link é o fallback
   que o bloco renderiza quando nenhum menu foi atribuído ainda (caso do tema
   recém-instalado). */
.site-header .wp-block-navigation-item__content,
.site-header .wp-block-pages-list__item__link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

/* O core/navigation injeta um <style> inline com seletor duplicado
   (.wp-block-navigation-item__content.wp-block-navigation-item__content)
   só pra inflar a especificidade e forçar "color: inherit" em cada item —
   isso vence tanto o global styles (gerado com :where(), especificidade
   zero) quanto uma regra normal de uma classe só. Precisa igualar/superar
   essa especificidade aqui, repetindo a classe do mesmo jeito. */
.site-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content,
.site-header .wp-block-pages-list__item__link.wp-block-pages-list__item__link {
	color: var(--wp--preset--color--secondary);
}

.site-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.site-header .wp-block-pages-list__item__link.wp-block-pages-list__item__link:hover {
	color: var(--wp--preset--color--primary);
}

/* Botão hambúrguer — escondido por padrão, só aparece quando o JS detecta
   que o menu não cabe mais numa linha (ou em telas mobile). Sem JS, o menu
   flat continua visível e funcional (progressive enhancement). */
.site-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.site-header__toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Estado aberto: as três linhas viram um X, dando confirmação visual
   imediata de que o menu está expandido (sem isso o ícone fica idêntico
   nos dois estados e só a aparição do painel avisa). */
.site-header.is-open .site-header__toggle span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header.is-open .site-header__toggle span:nth-child(2) {
	opacity: 0;
}

.site-header.is-open .site-header__toggle span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.site-header.is-compact .site-header__nav {
	display: none;
}

.site-header.is-compact .site-header__toggle {
	display: flex;
}

.site-header.is-compact.is-open .site-header__nav {
	display: flex;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--1);
	background: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.site-header.is-compact.is-open .site-header__nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

/* Fallback via media query pro breakpoint mobile "óbvio" (mesma largura que
   o JS usa) — sem isso, o menu completo aparece por uma fração de segundo
   antes do JS rodar (o script fica no footer, só executa depois do parse do
   HTML), causando flash visual e um possível salto de layout. O JS continua
   necessário pro caso de overflow em telas largas (menu grande demais mesmo
   acima de 600px), que este fallback sozinho não cobre. */
@media (max-width: 600px) {
	.site-header__nav {
		display: none;
	}

	.site-header__toggle {
		display: flex;
	}

	.site-header.is-open .site-header__nav {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--1);
		background: var(--wp--preset--color--background);
		padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	}

	.site-header.is-open .site-header__nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}
}

/* CTA global — usar sempre estas duas classes, nunca criar botão por seção.
   Contexto padrão: fundo escuro. Envolver seções de fundo claro com .on-light
   pra inverter as cores automaticamente.
   Estiliza só o elemento que é a superfície real do botão: o <button>/<a> cru
   (filtro de busca) ou o .wp-block-button__link dentro de um wp:button — o
   <div class="wp-block-button"> é apenas wrapper de layout, sem padding nem
   borda própria (evita o efeito "caixa dentro de caixa"). */
button.btn-primary,
button.btn-secondary,
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-secondary .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;
	padding: 0.75em 1.5em;
	border-radius: 12px;
	border: 1px solid transparent;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

/* Foco visível consistente com a paleta do projeto, no lugar do azul nativo
   do navegador — nunca remover outline sem substituto (WCAG 2.4.7). */
button.btn-primary:focus-visible,
button.btn-secondary:focus-visible,
button.btn-white:focus-visible,
.wp-block-button.btn-primary .wp-block-button__link:focus-visible,
.wp-block-button.btn-secondary .wp-block-button__link:focus-visible,
.wp-block-button.btn-white .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

button.btn-primary,
.wp-block-button.btn-primary .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--primary);
}

/* Escurece a própria cor primária no hover (em vez de trocar pra "secondary")
   pra não colidir com seções que já usam "secondary" como fundo — nesse caso
   o botão ficaria com a mesma cor do fundo ao redor e "sumiria" no hover. */
button.btn-primary:hover,
.wp-block-button.btn-primary .wp-block-button__link:hover {
	filter: brightness(0.87);
}

button.btn-secondary,
.wp-block-button.btn-secondary .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

button.btn-secondary:hover,
.wp-block-button.btn-secondary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

button.btn-secondary.is-ativo {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.on-light button.btn-primary,
.on-light .wp-block-button.btn-primary .wp-block-button__link {
	color: var(--wp--preset--color--white);
}

.on-light button.btn-secondary,
.on-light .wp-block-button.btn-secondary .wp-block-button__link {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.on-light button.btn-secondary:hover,
.on-light .wp-block-button.btn-secondary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Variante global de TAMANHO do CTA — combina com btn-primary/btn-secondary,
   não substitui. É o CTA de destaque de hero e de seções principais: pílula
   inteira, texto maior e em caixa normal. A referência do cliente mostra o CTA
   do hero assim, diferente do CTA compacto e em caixa alta do header. */
button.btn-grande,
.wp-block-button.btn-grande .wp-block-button__link {
	padding: 0.7em 0.7em 0.7em 1.7em;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	gap: 1em;
}

/* Em tela estreita o CTA de destaque cai pro tamanho base: em `lg` o rótulo
   quebra em duas linhas e o botão vira um bloco alto e desengonçado. O limite é
   1000px porque num layout de duas colunas o botão vive numa coluna estreita
   (38% no hero), não na largura da tela. */
@media (max-width: 1000px) {
	button.btn-grande,
	.wp-block-button.btn-grande .wp-block-button__link {
		font-size: var(--wp--preset--font-size--base);
	}
}

/* Terceira variante global de CTA — pílula branca com texto escuro, pra usar
   sobre cards com fundo colorido claro (onde primary/secondary competiriam
   com a cor do próprio card). Mesma estrutura de btn-primary/btn-secondary,
   mas texto normal (não caixa alta) — referência do cliente mostra essa
   variante mais leve/discreta, diferente do CTA principal do site. */
button.btn-white,
.wp-block-button.btn-white .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	padding: 0.7em 1.3em;
	/* Pílula inteira, como na referência. O inline-flex e o gap não vêm da regra
	   base de btn-primary/btn-secondary (essa variante não entra naquele
	   seletor), então precisam estar aqui — sem eles o ícone de seta do
	   btn-icon-seta-after desalinha do texto. */
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	min-height: 44px;
}

button.btn-white:hover,
.wp-block-button.btn-white .wp-block-button__link:hover {
	filter: brightness(0.95);
}

/* Ícone do CTA "Área do Escola" — pessoa/usuário, mesmo padrão ::before + mask
   dos demais ícones de botão (ver dev-navival: nunca SVG solto num wp:button).
   Aplicado no .wp-block-button__link (superfície real do botão), não no
   <div class="wp-block-button"> — esse é só wrapper de layout sem padding
   próprio, então o ::before nele ficaria fora da pílula e sem gap com o texto. */
button.btn-icon-usuario::before,
.wp-block-button.btn-icon-usuario .wp-block-button__link::before {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v1a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v1a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-1c0-2.76-3.58-5-8-5Z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Ícone de busca do header — wp:search em modo "button-only" com buttonUseIcon;
   zera o estilo global de botão (fundo/cor preenchidos) e troca o SVG fino
   nativo do WP por um ícone mais grosso (::before + mask), no mesmo padrão
   do ícone do CTA. Altura igual ao alvo de toque dos links do menu (44px)
   pra ficar alinhado com eles na mesma linha de base. */
.site-header__search .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	color: var(--wp--preset--color--secondary);
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.site-header__search .wp-block-search__button:hover {
	background: none;
	color: var(--wp--preset--color--primary);
}

.site-header__search .wp-block-search__button svg {
	display: none;
}

.site-header__search .wp-block-search__button::before {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Busca — total de resultados no banner */
.nv-busca-total {
	margin: var(--wp--preset--spacing--1) 0 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* Toolbar: filtro por tipo (à esquerda) + busca (à direita), na mesma linha */
.nv-busca-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--4);
	padding-bottom: var(--wp--preset--spacing--3);
	border-bottom: 1px solid var(--wp--preset--color--surface);
}

.nv-busca-toolbar--sem-filtro {
	justify-content: flex-end;
}

.nv-busca-filtro {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}

.nv-busca-filtro__item {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0.3em 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.nv-busca-filtro__item:hover {
	color: var(--wp--preset--color--ink);
}

.nv-busca-filtro__item.is-ativo {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}

/* get_search_form() sem tema de busca customizado gera o markup clássico
   (.search-form/.search-field/.search-submit), não o markup de bloco. */
.nv-busca-form .search-form {
	display: flex;
	align-items: stretch;
	min-height: 48px;
}

.nv-busca-form label {
	display: flex;
	margin: 0;
}

.nv-busca-form .search-field {
	min-width: 220px;
	padding: 0 1em;
	border: 1px solid var(--wp--preset--color--surface);
	border-right: none;
	border-radius: 6px 0 0 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
}

.nv-busca-form .search-field:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}

.nv-busca-form .search-submit {
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0 6px 6px 0;
	padding: 0 1.2em;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.nv-busca-form .search-submit:hover {
	filter: brightness(0.88);
}

/* Cards de resultado */
.nv-busca-lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--3);
}

.nv-busca-card {
	display: block;
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--3);
}

.nv-busca-card__tipo {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.nv-busca-card__titulo {
	margin: 0.4em 0;
}

.nv-busca-card__data {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-muted);
}

.nv-busca-resultados .is-oculto {
	display: none !important;
}

@media (max-width: 900px) {
	.nv-busca-lista {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.nv-busca-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.nv-busca-lista {
		grid-template-columns: 1fr;
	}
}

/* Banner escuro com o H1 (página interna e archive do blog) */
.page-header {
	text-align: center;
}

/* Grid de posts do blog (archive) */
.blog-grid {
	gap: var(--wp--preset--spacing--3) !important;
}

.post-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--background);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.post-card .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
}

.post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
	padding: var(--wp--preset--spacing--2);
}

/* O blockGap padrão do WordPress (margin-block-start) soma com o gap do flex
   acima, dobrando o espaço entre título/resumo/data — zerar e deixar só o
   gap controlando a distância. */
.post-card__body > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.post-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--text-muted);
}

.post-card .wp-block-post-date {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-muted);
}

/* Paginação — números em pill, atual destacado, anterior/próxima discretos */
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25em;
	height: 2.25em;
	padding: 0 0.5em;
	border-radius: 6px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}

.wp-block-query-pagination a.page-numbers:hover {
	background-color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	padding: 0 0.75em;
	height: 2.25em;
	display: inline-flex;
	align-items: center;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background-color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* Breadcrumb (fallback sem Rank Math — com o plugin ativo, o estilo dele prevalece) */
.nv-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--text-muted);
}

.nv-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-left: 0.4em;
	color: var(--wp--preset--color--surface);
}

.nv-breadcrumb a {
	color: var(--wp--preset--color--text-muted);
}

/* Single post — kicker, meta do autor */
.single-kicker {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--1);
}

.single-kicker a {
	color: inherit;
}

.single-meta {
	align-items: center;
	gap: var(--wp--preset--spacing--1) !important;
	margin-top: var(--wp--preset--spacing--2);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.single-meta .wp-block-avatar {
	margin: 0;
}

.single-meta .wp-block-avatar img {
	border-radius: 50%;
	display: block;
}

.single-meta__dot {
	margin: 0;
	color: var(--wp--preset--color--surface);
}

/* Imagem destacada do post — altura fixa em pixels (não aspect-ratio):
   aspect-ratio + max-height juntos fazem o navegador recalcular a LARGURA a
   partir da altura restringida, encolhendo a imagem também na horizontal.
   Controlando a altura direto na <img>, sem aspect-ratio no <figure>, evita
   esse conflito. */
.single-featured-image img {
	display: block;
	width: 100%;
	height: 340px;
	object-fit: cover;
}

/* Compartilhar — ícones monocromáticos, mesma linguagem visual do sumário */
.nv-compartilhar {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	margin-top: var(--wp--preset--spacing--2);
}

.nv-compartilhar__label {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted);
	margin-right: 0.2em;
}

.nv-compartilhar__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--surface);
	background: none;
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.nv-compartilhar__icone svg {
	width: 15px;
	height: 15px;
}

.nv-compartilhar__icone:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.nv-compartilhar__icone.is-copiado {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* Layout de duas colunas: sumário fixo + conteúdo */
.single-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--5);
	align-items: start;
}

.single-toc {
	position: sticky;
	top: calc(var(--wp--preset--spacing--3) + 88px);
	border-left: 2px solid var(--wp--preset--color--surface);
	padding-left: var(--wp--preset--spacing--2);
}

.single-toc__label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: var(--wp--preset--spacing--1);
}

.single-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.single-toc__list a {
	display: block;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.2s ease;
}

.single-toc__list a:hover {
	color: var(--wp--preset--color--ink);
}

.single-toc__list .is-active > a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.single-toc__list .single-toc__sub {
	padding-left: 1em;
}

.single-toc__toc.is-empty {
	display: none;
}

.single-toc .nv-compartilhar {
	margin-top: var(--wp--preset--spacing--3);
	padding-top: var(--wp--preset--spacing--2);
	border-top: 1px solid var(--wp--preset--color--surface);
}

.single-toc__toc.is-empty + .nv-compartilhar {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

@media (max-width: 900px) {
	.single-layout {
		grid-template-columns: 1fr;
	}

	.single-toc {
		position: static;
		border-left: none;
		border: 1px solid var(--wp--preset--color--surface);
		border-radius: 8px;
		padding: var(--wp--preset--spacing--2);
	}
}

/* Box do autor, ao final do conteúdo */
.author-box {
	align-items: flex-start !important;
	gap: var(--wp--preset--spacing--2) !important;
	margin-top: var(--wp--preset--spacing--6) !important;
	padding: var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}

.author-box .wp-block-avatar img {
	border-radius: 50%;
}

.author-box__label {
	margin: 0 !important;
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted);
}

.author-box .wp-block-post-author-name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	margin-top: 0.2em;
}

.author-box .wp-block-post-author-biography {
	margin-top: 0.4em;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--sm);
}

/* Posts relacionados */
.nv-relacionados__eyebrow {
	display: block;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nv-relacionados__titulo {
	margin: 0.2em 0 0;
}

.nv-relacionados .post-card h3 {
	margin: 0;
}

@media (max-width: 900px) {
	.nv-relacionados .blog-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.nv-relacionados .blog-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Blocos nativos de conteúdo (post-content, páginas) — sem isso ficam no
   estilo cru do navegador assim que um post usar citação, tabela ou lista. */
.entry-content blockquote,
.wp-block-post-content blockquote {
	margin: var(--wp--preset--spacing--3) 0;
	padding-left: var(--wp--preset--spacing--2);
	border-left: 3px solid var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-style: normal;
	color: var(--wp--preset--color--ink);
}

.entry-content blockquote cite,
.wp-block-post-content blockquote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--1);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-style: normal;
	color: var(--wp--preset--color--text-muted);
}

.entry-content table,
.wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--wp--preset--spacing--3) 0;
	font-size: var(--wp--preset--font-size--sm);
}

.entry-content th,
.entry-content td,
.wp-block-post-content th,
.wp-block-post-content td {
	padding: 0.6em 0.8em;
	border: 1px solid var(--wp--preset--color--surface);
	text-align: left;
}

.entry-content th,
.wp-block-post-content th {
	background: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
}

/* Recuo de lista EDITORIAL (a lista que o cliente escreve no corpo do texto).
   O :not([class*="wp-block-"]) é o que separa essas das listas que os blocos
   geram: Query Loop, navegação, lista de páginas e afins também são <ul> dentro
   do post-content, e herdavam esse padding-left de 1.4em. No carrossel de posts
   isso aparecia como um deslocamento de 22px que desalinhava o primeiro card e
   ainda estragava o ponto inicial do scroll-snap. */
.entry-content :is(ul, ol):not([class*="wp-block-"]),
.wp-block-post-content :is(ul, ol):not([class*="wp-block-"]) {
	padding-left: 1.4em;
	margin: var(--wp--preset--spacing--2) 0;
}

.entry-content :is(ul, ol):not([class*="wp-block-"]) li,
.wp-block-post-content :is(ul, ol):not([class*="wp-block-"]) li {
	margin-bottom: 0.4em;
}

.entry-content code,
.wp-block-post-content code {
	background: var(--wp--preset--color--surface);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.9em;
}

.entry-content pre,
.wp-block-post-content pre {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--2);
	border-radius: 8px;
	overflow-x: auto;
	margin: var(--wp--preset--spacing--3) 0;
}

.entry-content pre code,
.wp-block-post-content pre code {
	background: none;
	padding: 0;
	color: inherit;
}

/* Alvos de toque — pills de paginação e abas de filtro um pouco pequenos
   pra toque confortável em mobile (recomendação Google: ~44px mínimo). */
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	min-height: 40px;
}

.nv-busca-filtro__item {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
}

/* ============================================================
   Ícone de seta no CTA (sufixo, ::after) — mesmo padrão do
   btn-icon-usuario, mas depois do texto em vez de antes.
   ============================================================ */
button.btn-icon-seta-after::after,
.wp-block-button.btn-icon-seta-after .wp-block-button__link::after {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ============================================================
   Ícone de seta dentro de um círculo translúcido (sufixo) — o
   CTA do hero na referência do cliente. Círculo em rgba branco
   em vez de uma cor da paleta pra funcionar sobre qualquer cor
   de botão (primary, secondary, laranja) sem regra por variante.
   ============================================================ */
button.btn-icon-seta-circulo::after,
.wp-block-button.btn-icon-seta-circulo .wp-block-button__link::after {
	content: "";
	flex: 0 0 auto;
	width: 2.1em;
	height: 2.1em;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.22);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.1em 1.1em;
}

/* btn-white tem fundo branco: o círculo translúcido branco + seta branca
   da variante padrão ficam invisíveis nele. Reforça com a cor secondary
   (turquesa da marca) no lugar do branco translúcido. */
button.btn-white.btn-icon-seta-circulo::after,
.wp-block-button.btn-white.btn-icon-seta-circulo .wp-block-button__link::after {
	background-color: var(--wp--preset--color--secondary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* Ícone de coração no CTA da slide 2 (prefixo, mesmo padrão do btn-icon-usuario) */
button.btn-icon-coracao::before,
.wp-block-button.btn-icon-coracao .wp-block-button__link::before {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 21s-6.7-4.35-9.3-8.1C1.1 10.5 1.6 7 4.6 5.6c2.2-1 4.4-.3 5.6 1.4l1.8 2.5 1.8-2.5c1.2-1.7 3.4-2.4 5.6-1.4 3 1.4 3.5 4.9 1.9 7.3C18.7 16.65 12 21 12 21Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 21s-6.7-4.35-9.3-8.1C1.1 10.5 1.6 7 4.6 5.6c2.2-1 4.4-.3 5.6 1.4l1.8 2.5 1.8-2.5c1.2-1.7 3.4-2.4 5.6-1.4 3 1.4 3.5 4.9 1.9 7.3C18.7 16.65 12 21 12 21Z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wp-block-button.btn-icon-coracao .wp-block-button__link {
	line-height: 1.3;
	text-align: left;
}

/* ============================================================
   Hero slider — banner da homepage. Coluna de texto em 38% e
   mídia em 62% (wp:columns nativo, editável no editor): a
   referência do cliente dá mais respiro pra imagem do que pro
   texto. Setas nas bordas laterais, dots centralizados embaixo.
   Conteúdo 100% em blocos nativos: os botões de seta/dot usam o
   texto real (acessível) escondido via font-size:0 — o glifo
   visível vem de ::before em px fixo (não é afetado pelo
   font-size:0 do pai). Sem wp:html em lugar nenhum.
   ============================================================ */
.hero-slider {
	position: relative;
	overflow: hidden;
}

/* Grid de uma célula só: os dois slides ficam empilhados na mesma área, então
   a altura do viewport acompanha sempre o slide mais alto dos dois — sem
   isso, trocar de slide (1 tem só foto, 2 tem foto + linha de critérios)
   mudava a altura do container e "pulava" o rodapé da seção. visibility em
   vez de display:none: o slide inativo continua contando pro tamanho da
   grade, mas some da tela, do tab e do leitor de tela do mesmo jeito. */
.hero-slider__viewport {
	position: relative;
	z-index: 1;
	display: grid;
	align-items: start;
}

.hero-slider__viewport .nv-slider__slide {
	display: block;
	grid-area: 1 / 1;
	visibility: hidden;
	/* O espaçamento automático entre blocos do layout "constrained" (WP core)
	   só reseta margin-block-start no :first-child — o slide 2, sendo o
	   segundo filho, herdava 24px que o slide 1 não tinha, desalinhando os
	   dois no topo da célula da grade. Como aqui os slides se alternam (não
	   empilham), nenhum dos dois deve ter essa margem. */
	margin-block-start: 0 !important;
}

.hero-slider__viewport .nv-slider__slide.is-active {
	visibility: visible;
}

.nv-slider__slide {
	display: none;
}

.nv-slider__slide.is-active {
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	.nv-slider__slide.is-active {
		animation: nv-slider-fade 0.35s ease;
	}
}

@keyframes nv-slider-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.hero-slide__row {
	gap: var(--wp--preset--spacing--5) !important;
}

/* O H1 do hero usa o tamanho do token h2, não o h1: a coluna de texto ocupa só
   38% da largura, e no tamanho h1 uma palavra longa ("transformam.") quebra no
   meio. É decisão de layout, não de hierarquia — o bloco continua sendo <h1>. */
.hero-slide__text h1 {
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.08;
	margin: 0 0 var(--wp--preset--spacing--3);
}

.hero-slide__text p {
	margin: 0;
	max-width: 30em;
}

.hero-slide__text .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--5) !important;
}

.hero-slide__media {
	position: relative;
}

/* Círculo suave turquesa atrás da arte, encostado à direita — único fundo
   decorativo do hero (a forma verde escura que ficava aqui foi removida).
   Mora na COLUNA da imagem, não na seção: assim o diâmetro acompanha o tamanho
   da foto em qualquer breakpoint. Amarrado à altura do hero ele ficava enorme em
   relação à foto justamente onde a coluna de texto é a mais alta das duas. */
.hero-slide__media::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 80%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	z-index: 0;
	pointer-events: none;
}

.hero-slide__photo {
	position: relative;
	z-index: 1;
	margin: 0 !important;
}

/* aspect-ratio reserva a altura antes do download (zero CLS). O bloco
   core/image não aceita os atributos width/height crus no <img> — eles não têm
   "source" no block.json, então virariam conteúdo inesperado e quebrariam a
   validação no editor. Daí a proporção vir pelo CSS. */
.hero-slide__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 960 / 768;
}

/* Slide 2 usa uma arte com proporção diferente (composição dos dois livros) —
   sem essa própria aspect-ratio ela herdava a 960/768 do slide 1 e esticava
   verticalmente ~7%. Dois classes no mesmo elemento pra ganhar de
   .hero-slide__photo por especificidade, não por ordem no arquivo. */
.hero-slide__photo.hero-slide2__photo img {
	aspect-ratio: 1200 / 892;
}

/* Coluna da mídia do slide 2: encostada na base e sangrando até a borda
   direita do wide-size (mesmo limite onde o resto do site alinha — não até
   a borda física da janela, que quebraria o alinhamento com as outras
   seções). align-self sobrescreve o "centralizado" herdado do
   verticalAlignment:center da linha; a margem negativa cancela o padding
   direito do .hero-slider__viewport só pra esse elemento. */
.hero-slide2__media {
	align-self: flex-end !important;
}

.hero-slide2__photo {
	margin-right: calc(-1 * var(--wp--preset--spacing--4)) !important;
	margin-bottom: 0 !important;
}

/* --- Slide 2: título ilustrado (imagem, não texto) + critérios + CTA em
   duas linhas. Coluna de texto um pouco mais larga que o slide 1 (44% vs
   38%) pra caber a linha de 4 ícones sem apertar. --- */
.hero-slide2__titulo {
	margin: 0 0 var(--wp--preset--spacing--3) !important;
	max-width: 420px;
}

.hero-slide2__titulo img {
	display: block;
	width: 100%;
	height: auto;
}

.hero-slide2__text p {
	margin: 0;
	max-width: 32em;
}

/* Com a imagem maior e encostada na base (.hero-slide2__media), a coluna de
   texto passou a esticar até o fim da linha, e o botão (último elemento)
   ficava colado no rodapé sem nenhuma folga. padding-bottom cria esse
   respiro e empurra o conteúdo pra cima dentro da coluna. */
.hero-slide2__text {
	padding-bottom: var(--wp--preset--spacing--5);
}

.hero-slide2__criterios {
	gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2) !important;
	margin-top: var(--wp--preset--spacing--4) !important;
}

.hero-slide2__criterio {
	/* display:flex aqui (não só align-items): o bloco nasce "type":"default" no
	   editor, então sem isso align-items não tem container flex pra valer, e o
	   ícone (bloco, largura própria) ficava à esquerda enquanto o texto
	   (text-align:center) centralizava por conta própria — os dois liam
	   desalinhados um do outro. */
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	width: 100px;
	align-items: center !important;
	gap: var(--wp--preset--spacing--1) !important;
}

.hero-slide2__criterio-icone {
	margin: 0 !important;
	width: 36px;
}

.hero-slide2__criterio-icone img {
	display: block;
	width: 100%;
	height: auto;
}

.hero-slide2__criterio-texto {
	margin: 0 !important;
	text-align: center;
	line-height: 1.25;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--xs);
}

/* Botão de duas linhas com selo circular à esquerda — btn-primary de base
   (cor, fonte), só a estrutura interna (ícone + texto empilhado) é própria
   daqui. */
.wp-block-button.hero-slide2__cta {
	margin-top: var(--wp--preset--spacing--4) !important;
}

.wp-block-button.hero-slide2__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	background: var(--wp--preset--color--secondary);
	text-transform: none;
	letter-spacing: normal;
	font-weight: 600;
	padding: 0.6em 1.6em 0.6em 0.6em;
	border-radius: 999px;
}

.wp-block-button.hero-slide2__cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--verde-profundo);
}

.hero-slide2__cta-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

.hero-slide2__cta-texto {
	line-height: 1.3;
	text-align: left;
}

.hero-slide2__cta-texto strong {
	color: var(--wp--preset--color--amarelo);
}

@media (max-width: 900px) {
	.hero-slide2__criterio {
		width: 84px;
	}
}

@media (max-width: 781px) {
	/* Empilhado, a coluna de texto ganha a largura toda: 3+1 (sobra torta,
	   o quarto item cai sozinho e desalinhado) vira 2x2 de propósito, com o
	   grupo centralizado — cada item ganha metade da largura disponível, o
	   suficiente pra legenda parar em no máximo 2 linhas em vez de 3. */
	.hero-slide2__criterios {
		justify-content: center;
	}

	.hero-slide2__criterio {
		width: auto;
		flex: 0 1 calc(50% - var(--wp--preset--spacing--1));
	}
}

/* Navegação do slider — setas ancoradas nas bordas do hero e dots na base (o
   .hero-slider é o único ancestral com position:relative; .hero-slider__nav fica
   estático de propósito pra não virar o contêiner de referência dos dois).
   Com setas e dots os três em absolute, o grupo tem altura zero: é isso que
   permite o banner terminar exatamente no fim da imagem, sem respiro embaixo. */
.hero-slider__nav {
	gap: var(--wp--preset--spacing--3) !important;
	margin-top: 0 !important;
	padding: 0;
	position: static;
	z-index: 2;
}

/* O position:absolute mora no wrapper .wp-block-buttons, não no .wp-block-button
   de dentro: no canvas do editor o Gutenberg dá position:relative pro
   .wp-block-buttons, então uma seta absoluta lá dentro ancora nesse wrapper
   (que é pequeno e fica na linha dos dots) em vez de ancorar no .hero-slider —
   as setas apareciam empilhadas no meio do hero só no editor. */
.hero-slider__arrow-slot {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	margin: 0 !important;
}

.hero-slider__arrow-slot--prev {
	left: clamp(12px, 2vw, 48px);
}

.hero-slider__arrow-slot--next {
	right: clamp(12px, 2vw, 48px);
}

/* O espaçamento entre dots é do COMPONENTE, não do hero: sem esta regra
   genérica, um slider novo herda o blockGap de 24px do tema e os pontos ficam
   longe um do outro (foi o que aconteceu nos depoimentos).
   gap zero é o mais junto que dá pra chegar mantendo os alvos de 24x24 do WCAG
   2.5.8 — eles ficam encostados, sem se sobrepor. Aproximar mais exigiria
   encolher o alvo abaixo do mínimo. */
.nv-slider__dots {
	gap: 0 !important;
	margin: 0 !important;
}

.hero-slider__dots {
	position: absolute;
	bottom: var(--wp--preset--spacing--3);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}

/* O link vai a 24x24 (mínimo de alvo de toque do WCAG 2.5.8) e o ponto visível
   de 11px vem do ::before — dot pequeno no visual, alvo grande no dedo. */
.wp-block-button.nv-slider__dot .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 50%;
}

.wp-block-button.nv-slider__dot .wp-block-button__link::before {
	content: "";
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: rgba(113, 127, 128, 0.3);
	transition: background-color 0.2s ease;
}

.wp-block-button.nv-slider__dot.is-active .wp-block-button__link::before {
	background: var(--wp--preset--color--primary);
}

/* Abaixo de 1100px as setas saem das bordas e entram no fluxo, na linha dos
   dots: nessa largura a coluna de texto já chega perto da borda do viewport e a
   seta da esquerda passava por cima do parágrafo. Só o desktop largo tem folga
   pra manter as setas nas laterais como na referência. */
@media (max-width: 1100px) {
	.hero-slider__arrow-slot {
		position: static;
		transform: none;
	}

	/* Setas voltando pro fluxo, os dots voltam com elas — e é o padding do nav
	   que devolve o respiro na base do banner (o bloco não declara mais
	   padding-bottom). */
	.hero-slider__dots {
		position: static;
		transform: none;
		left: auto;
		bottom: auto;
	}

	.hero-slider__nav {
		padding-bottom: var(--wp--preset--spacing--5);
	}

	/* A divisão 38/62 é decisão de layout de desktop. Entre o empilhamento
	   (781px) e 1100px, 38% dá uma coluna de ~275px: o parágrafo vira uma
	   coluna estreita de 6 linhas e o CTA quebra em duas. O !important é porque
	   o flex-basis vem inline, do atributo width do wp:column. */
	.hero-slide__text {
		flex-basis: 46% !important;
	}

	.hero-slide__media {
		flex-basis: 54% !important;
	}
}

/* Ponto em que o wp:columns empilha. A ordem é a do markup — texto primeiro,
   imagem depois — que é como o core já empilha (flex-wrap + flex-basis 100%).
   Não declarar flex-direction aqui: um column-reverse inverteria isso e jogaria
   a arte pra cima do H1, empurrando o título e o CTA pra fora da primeira tela. */
@media (max-width: 781px) {
	.hero-slider::before {
		bottom: -30%;
		width: 120%;
	}

	/* Só os dots no mobile: as setas nessa largura já vivem no fluxo, na
	   mesma linha dos dots (regra de 1100px), e disputam espaço/atenção com
	   eles à toa — no toque, trocar de slide é o dedo no dot mesmo.
	   !important porque o "body .is-layout-flex" do WordPress core
	   (display:flex) tem mais especificidade que uma classe só. */
	.hero-slider__arrow-slot {
		display: none !important;
	}
}/* ============================================================
   Cards de CTA (3 colunas) — fundo suave por card (tokens
   verde-suave / azul-suave / coral-suave), texto à esquerda e
   arte à direita. Dois tratamentos de arte, os dois da
   referência: "sangra" (encostada no canto inferior direito,
   recortada pelo raio do card) e "circulo" (arte centrada num
   círculo branco).

   ÁREA DE PROTEÇÃO DO TEXTO
   A arte é posicionada em absolute, então ela não empurra o
   texto: sem reservar espaço, título e parágrafo passam por
   baixo dela. A reserva é calculada a partir das MESMAS
   variáveis que dimensionam a arte, não chutada em % — assim
   mudar o tamanho da arte reajusta a proteção sozinho, e o valor
   não muda quando o card fica mais largo (o que acontece quando
   os três empilham em coluna única).
   ============================================================ */
/* Utilitário de seção: contêiner arredondado com sombra INTERNA suave. Combinar
   com o token de fundo branco-suave (#FCFCFC) no atributo do bloco. Raio e
   sombra ficam aqui, e não em atributos, porque são o "chrome" da seção e não
   conteúdo que o cliente ajuste — e porque os presets de sombra do theme.json
   são todos externos, não inset.
   É a sombra, não a cor, que faz o canto arredondado ser percebido: #FCFCFC
   contra o branco do body é diferença de 1%, então sem ela a curva não
   apareceria. */
.secao-cartao {
	/* Só o topo é arredondado: a seção "sobe" por cima da anterior e desce reta
	   pra encostar na seguinte, sem costura no meio. */
	border-radius: 40px 40px 0 0;
	/* Spread negativo (-8px) confina a sombra à borda de cima, acompanhando a
	   curva dos cantos. Uma sombra inset comum contornaria os quatro lados e
	   desenharia uma linha na base, exatamente onde a próxima seção encosta. */
	box-shadow: inset 0 8px 14px -8px rgba(0, 0, 0, 0.06);
}

/* Seções são irmãs diretas dentro do post-content e herdam o blockGap do
   WordPress (margin-block-start) como uma faixa da cor do body entre uma e
   outra. Zerar aqui faz as seções encostarem de fato — é o mesmo bug do
   header/main, só num nível abaixo. */
.wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.cta-cards__row {
	gap: var(--wp--preset--spacing--4) !important;
	align-items: stretch;
}

.cta-card {
	/* --cta-arte:        teto de largura da arte
	   --cta-arte-offset: o `right` da arte (negativo = sangra pra fora do card)
	   --cta-folga:       respiro mínimo entre o texto e a arte
	   --cta-padding:     padding do card, declarado no bloco */
	--cta-arte: 0px;
	--cta-arte-offset: 0px;
	--cta-folga: 12px;
	--cta-padding: var(--wp--preset--spacing--4);

	position: relative;
	flex: 1 1 300px;
	overflow: hidden;
	border-radius: 24px;
	display: flex;
	flex-direction: column;
}

/* O texto ocupa a altura toda e empurra o botão pro rodapé do card: sem isso os
   três CTAs desalinham na horizontal quando um título ou parágrafo ocupa uma
   linha a mais que os outros. */
.cta-card__text {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* A conta: a arte começa (largura + offset) antes da borda direita do card, e o
   padding do card já garante parte desse afastamento — por isso ele entra
   subtraindo. O botão fica de fora porque tem largura própria e mora no rodapé,
   longe da arte. */
.cta-card__text h3,
.cta-card__text p {
	max-width: calc(100% - (var(--cta-arte) + var(--cta-arte-offset) + var(--cta-folga) - var(--cta-padding)));
}

.cta-card__text h3 {
	margin: 0;
	line-height: 1.2;
}

/* O parágrafo herda o `ink` do card em vez de usar `text-muted`: em cima dos
   fundos suaves o cinza dá 3.8:1 de contraste e reprova o WCAG AA (mínimo 4.5:1
   pra texto normal). */
.cta-card__text p {
	margin: 0.6em 0 0;
}

.cta-card__text .wp-block-buttons {
	margin-top: auto !important;
	padding-top: var(--wp--preset--spacing--4);
}

.cta-card__media {
	position: absolute;
	right: var(--cta-arte-offset);
	width: 42%;
	max-width: var(--cta-arte);
	pointer-events: none;
	margin: 0 !important;
}

.cta-card__media figure {
	margin: 0 !important;
}

.cta-card__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Arte encostada no canto inferior direito. O `overflow:hidden` do card corta o
   excedente pelo próprio raio — é isso que dá o efeito de sangria. */
.cta-card__media--sangra {
	bottom: var(--cta-arte-offset);
}

/* Ícone alinhado na base do card. Era um círculo branco atrás de um ícone
   plano pequeno (aperto de mãos, play do YouTube) — os ícones atuais (parceria,
   DNA Filminhos) já vêm com o próprio círculo desenhado na arte, então o
   círculo branco por trás virava um círculo dentro de outro círculo. Tirado o
   fundo, e a arte ocupa quase toda a caixa.
   bottom usa a mesma --cta-arte-offset do right, não 0: o card tem
   overflow:hidden pelo border-radius, e encostado sem folga o círculo
   parecia cortado pelo canto arredondado. */
.cta-card__media--circulo {
	top: auto;
	bottom: var(--cta-arte-offset);
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cta-card__media--circulo figure {
	width: 88%;
}

/* Tamanho de referência dos dois ícones circulares (parceiro e DNA
   Filminhos): 76% da caixa, não os 88% padrão — no tamanho cheio o círculo
   preenchido do logo "lê" maior que o contorno fino do ícone de parceria, e
   76% equilibra a sensação visual dos dois lado a lado. */
.cta-card--parceiro .cta-card__media--circulo figure,
.cta-card--youtube .cta-card__media--circulo figure {
	width: 76%;
}

/* O logo do canal (v2) vem num quadrado com fundo laranja até a borda, sem
   recorte circular — o border-radius:50% faz o recorte aqui, na imagem. */
.cta-card--youtube .cta-card__media img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* O aperto de mãos é ilustração com fundo transparente, não foto: sangrar de
   verdade cortaria as mãos no meio. Fica encostado no canto, inteiro. */
.cta-card--parceiro {
	/* Mesmo tamanho do ícone do DNA Filminhos (--cta-card--youtube). Não dá pra
	   ir muito além: --cta-arte reserva espaço do título/parágrafo (ver
	   .cta-card__text h3, p acima) — passar demais quebra "Vamos juntos
	   transformar / a educação!" numa linha a mais. */
	--cta-arte: 142px;
	--cta-arte-offset: 16px;
}

.cta-card--youtube {
	--cta-arte: 142px;
	--cta-arte-offset: 24px;
}

/* A capa é a arte mais alta das três e sobe até a altura do título. Entra
   levemente inclinada e sangrando pra fora, como na referência — a rotação vive
   aqui e não num atributo do bloco porque core/image não tem suporte a
   transform. */
.cta-card--conexao {
	--cta-arte: 148px;
	--cta-arte-offset: -24px;
}

.cta-card--conexao .cta-card__media {
	width: 34%;
	transform: rotate(-4deg);
}

@media (max-width: 900px) {
	.cta-card {
		flex: 1 1 100%;
	}
}

/* Em card estreito a arte encolhe — e a área de proteção acompanha sozinha, sem
   precisar redeclarar max-width nenhum aqui. */
@media (max-width: 480px) {
	.cta-card--parceiro {
		--cta-arte: 125px;
	}

	.cta-card--youtube {
		--cta-arte: 110px;
	}

	.cta-card--conexao {
		--cta-arte: 120px;
	}
}

/* ============================================================
   Institucional — apresentação em duas colunas + cartão de
   números com ícones animados.

   Os ícones são SVGs do tema com a animação em loop escrita
   DENTRO do arquivo (ver assets/images/icones/*.svg): um SVG
   carregado via <img> executa CSS declarativo, então o loop roda
   sem JS e o bloco continua sendo um core/image nativo.
   ============================================================ */
.institucional {
	position: relative;
	overflow: hidden;
}

/* Planta decorativa na borda esquerda, atrás do conteúdo. Fica em CSS e não
   num atributo de bloco porque é ornamento da seção, não conteúdo — mesma
   decisão do círculo do hero. É um placeholder até a arte do cliente chegar.

   O tamanho é declarado pela ALTURA (e a largura sai do aspect-ratio) porque é
   a altura que precisa ficar contida: a arte original é bem mais alta que larga.
   O left negativo empurra a folhagem pra fora o suficiente pra ela não passar
   por trás do título — texto verde escuro sobre folha turquesa perderia
   contraste. */
.institucional::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -60px;
	transform: translateY(-50%);
	height: 420px;
	aspect-ratio: 340 / 819;
	background: url("../images/institucional-planta.webp") no-repeat center / contain;
	z-index: 0;
	pointer-events: none;
}

/* O ::after é o canto direito; o texto e o cartão ficam por cima dele. */
.institucional > * {
	position: relative;
	z-index: 1;
}

.institucional__topo {
	gap: var(--wp--preset--spacing--6) !important;
}

.institucional__texto h2 {
	margin: 0;
	line-height: 1.15;
}

.institucional__texto p {
	margin: var(--wp--preset--spacing--3) 0 0;
	max-width: 34em;
}

.institucional__foto {
	margin: 0 !important;
}

.institucional__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1080 / 608;
	object-fit: cover;
	border-radius: 24px;
}

/* Cartão dos números — borda fina clara e sombra suave, como na referência. */
.institucional__numeros {
	/* Largura travada: com 2 números só (era 3), o bloco esticando pra largura
	   toda da seção (1280px) abria um vão enorme entre eles — cada .nv-numero é
	   flex:1 1 0 e cresce pra preencher o espaço disponível. Um teto mais
	   estreito, centralizado, aproxima os dois de novo. */
	max-width: 680px;
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--6) !important;
	border-radius: 24px;
	border: 1px solid var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--sm);
	gap: 0 !important;
	align-items: stretch !important;
	/* nowrap de propósito: com wrap existia uma faixa de largura em que os itens
	   caíam 2+1, e o divisor do terceiro aparecia solto na esquerda da linha
	   nova. Assim só existem dois estados — três em linha, ou um por linha
	   abaixo do breakpoint. */
	flex-wrap: nowrap !important;
}

.nv-numero {
	flex: 1 1 0;
	min-width: 0;
	align-items: center !important;
	justify-content: center;
	gap: var(--wp--preset--spacing--2) !important;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
}

/* Divisor entre itens resolvido com borda, não com um bloco vazio no meio do
   conteúdo — um a menos pro cliente apagar por engano no editor. */
.nv-numero + .nv-numero {
	border-left: 1px solid var(--wp--preset--color--surface);
}

.nv-numero__icone {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	/* O .has-background do WordPress traz padding próprio (1.25em 2.375em) e
	   deformaria o círculo. */
	padding: 0 !important;
	border-radius: 50%;
}

.nv-numero__icone figure {
	margin: 0 !important;
	width: 30px;
	line-height: 0;
}

.nv-numero__icone img {
	display: block;
	width: 100%;
	height: auto;
}

.nv-numero__valor {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 800;
	line-height: 1.05;
}

.nv-numero__rotulo {
	margin: 0.2em 0 0 !important;
}

.institucional__legenda {
	margin-top: var(--wp--preset--spacing--3) !important;
}

@media (max-width: 900px) {
	.institucional::after {
		height: 280px;
		left: -50px;
	}
}

/* Abaixo de 860px os três não caberiam sem apertar o número contra o rótulo:
   passa direto pra um por linha, e o divisor vira borda de cima. */
@media (max-width: 860px) {
	.institucional__numeros {
		flex-wrap: wrap !important;
	}

	.nv-numero {
		flex: 1 1 100%;
		justify-content: flex-start;
		/* Menos respiro nas laterais nessa largura: o padding do desktop
		   (spacing-3 dos dois lados) sobrava pouco espaço pro rótulo, que
		   quebrava em 2 linhas mesmo cabendo em 1 com um pouco mais de largura. */
		padding-left: var(--wp--preset--spacing--2);
		padding-right: var(--wp--preset--spacing--2);
	}

	.nv-numero + .nv-numero {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--surface);
	}
}


/* ============================================================
   Seta circular — componente global de navegação de carrossel,
   usado pelo hero e pelo Conexão DNA. O posicionamento NÃO mora
   aqui: cada seção resolve onde a seta fica no seu próprio
   .nv-seta-slot / .hero-slider__arrow-slot.
   O texto real do botão fica escondido via font-size:0 (segue
   acessível pra leitor de tela) e o glifo vem de ::before em px
   fixo, que o font-size:0 do pai não afeta.
   ============================================================ */
.wp-block-button.nv-seta .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	border: none;
	color: var(--wp--preset--color--secondary);
	box-shadow: var(--wp--preset--shadow--md);
}

.wp-block-button.nv-seta .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface);
}

.wp-block-button.nv-seta .wp-block-button__link::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wp-block-button.nv-seta--prev .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
}

.wp-block-button.nv-seta--next .wp-block-button__link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* ============================================================
   Conexão DNA — carrossel dos últimos posts.

   O carrossel é um container de scroll de verdade (overflow-x +
   scroll-snap), não um slider de translate: swipe no toque, roda
   do mouse e navegação por Tab entre os links dos cards
   funcionam sozinhos, sem estado nosso pra sincronizar. As setas
   só empurram o scroll.
   ============================================================ */
.nv-conexao__titulo {
	margin-bottom: var(--wp--preset--spacing--1) !important;
}

.nv-conexao__linha-fina {
	margin: 0 auto !important;
	max-width: 42em;
}

.nv-conexao__carrossel {
	position: relative;
	/* Goteira lateral onde as setas ficam, pra elas não cobrirem os cards nem
	   sair da área visível da seção (a seção já está no limite do wide-size). */
	padding: 0 var(--wp--preset--spacing--6);
}

.nv-conexao__trilha {
	--nv-visiveis: 3;

	display: flex;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: var(--wp--preset--spacing--4) !important;
	margin: var(--wp--preset--spacing--5) 0 0 !important;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	/* Barra de rolagem escondida: quem navega é a seta. O scroll continua todo
	   funcionando (swipe, roda do mouse, Tab entre os links dos cards), só o
	   indicador visual sai. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.nv-conexao__trilha::-webkit-scrollbar {
	display: none;
}

.nv-conexao__trilha > .wp-block-post {
	flex: 0 0 calc(
		(100% - (var(--nv-visiveis) - 1) * var(--wp--preset--spacing--4)) / var(--nv-visiveis)
	);
	scroll-snap-align: start;
	margin: 0 !important;
}

.nv-seta-slot {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	margin: 0 !important;
}

.nv-seta-slot--prev {
	left: 0;
}

.nv-seta-slot--next {
	right: 0;
}

/* --- Card: reaproveita .post-card do archive, só ajusta o que a home pede --- */
.nv-conexao .post-card {
	height: 100%;
	/* Contêiner de referência do link esticado (o ::after do título, mais abaixo). */
	position: relative;
	border-radius: 20px;
	padding: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nv-conexao .post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--md);
}

/* Card inteiro clicável, com um link só: o <a> do título ganha um ::after que
   cobre o card. O nome acessível do link continua sendo o título (leitor de tela
   anuncia a manchete, não "leia mais"), e o alvo de clique passa a ser a área
   toda. Padrão preferível a embrulhar o card num <a>, que exigiria wp:html e
   colocaria blocos interativos dentro de um link. */
.nv-conexao .post-card__body .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.nv-conexao .post-card__capa {
	position: relative;
}

.nv-conexao .post-card .wp-block-post-featured-image {
	margin: 0;
}

/* A proporção da capa vive no CSS e não no atributo aspectRatio do bloco: o
   bloco escreve style inline no <img>, que venceria esta regra e obrigaria a um
   !important. Assim uma foto 16:9 do cliente entra sem precisar ser recortada. */
/* Capa encostada nas bordas do card. Os cantos de cima repetem o raio do card
   (20px) pra não sobrar sombra de branco nas quinas; os de baixo ficam
   arredondados contra o corpo branco. */
.nv-conexao .post-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 20px 20px 14px 14px;
}

/* O padding horizontal do corpo é o único recuo do texto agora que o card não
   tem padding próprio. */
.nv-conexao .post-card__body {
	flex: 1;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
}

.nv-conexao .post-card__body .wp-block-post-title {
	margin: 0;
	line-height: 1.35;
}

.nv-conexao .post-card__body .wp-block-post-title,
.nv-conexao .post-card__body .wp-block-post-title a {
	color: var(--wp--preset--color--azul-escuro);
	text-decoration: none;
}

.nv-conexao .post-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--azul-profundo);
}

.nv-conexao .post-card .wp-block-post-excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}

.nv-conexao .post-card .wp-block-post-excerpt p {
	margin: 0;
}

/* --- Selo de categoria sobre a capa ---
   A cor sai de --nv-selo, definida por categoria nas regras abaixo. O gancho é
   a classe category-{slug} que o WordPress já coloca em cada <li> do Query Loop
   (get_post_class), então não precisa de campo extra nem de PHP: criar uma
   categoria nova e dar a cor dela aqui basta. Sem regra, cai no fallback. */
/* z-index acima do link esticado do card: o selo continua clicável e leva pro
   arquivo da categoria, em vez de ser coberto pela área de clique do card. */
/* bottom negativo: o selo desce e fica metade fora da capa, montado na borda
   entre a imagem e o corpo do card. */
.nv-conexao .wp-block-post-terms {
	position: absolute;
	left: var(--wp--preset--spacing--2);
	bottom: -14px;
	z-index: 2;
	margin: 0;
	line-height: 1;
}

.nv-conexao .wp-block-post-terms a {
	display: inline-block;
	padding: 0.7em 1.25em;
	border-radius: 999px;
	background: var( --nv-selo, var( --wp--preset--color--secondary ) );
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	text-decoration: none;
}

/* As três cores saem das cores de apoio da marca escurecidas com color-mix: nos
   tons originais (roxo #8A6CF7, verde-claro #7DDC5C) o texto branco do selo dá
   3.8:1 e 1.8:1, reprovando o WCAG AA — e selo é texto pequeno, não entra na
   régua de "texto grande". */
.nv-conexao .category-artigo {
	--nv-selo: color-mix(in srgb, var(--wp--preset--color--roxo) 62%, #000);
}

.nv-conexao .category-inovacao {
	--nv-selo: color-mix(in srgb, var(--wp--preset--color--verde-claro) 46%, #000);
}

.nv-conexao .category-gestao {
	--nv-selo: var(--wp--preset--color--azul-profundo);
}

.nv-conexao__cta {
	margin-top: var(--wp--preset--spacing--5) !important;
}

@media (max-width: 1100px) {
	.nv-conexao__trilha {
		--nv-visiveis: 2;
	}
}

/* As setas descem pra base da trilha, lado a lado: nesta largura a goteira
   lateral comeria largura demais dos cards. Continuam em absolute (só muda a
   âncora) pra não empurrar o CTA e pra ficarem centralizadas sem wrapper novo. */
@media (max-width: 900px) {
	.nv-conexao__carrossel {
		padding: 0 0 72px;
	}

	.nv-seta-slot {
		top: auto;
		bottom: 0;
		transform: none;
	}

	.nv-seta-slot--prev {
		left: calc(50% - 56px);
	}

	.nv-seta-slot--next {
		right: calc(50% - 56px);
	}
}

@media (max-width: 700px) {
	.nv-conexao__trilha {
		--nv-visiveis: 1;
	}
}

/* ============================================================
   Depoimentos — painel escuro com vídeo à esquerda e citação à
   direita, em slider (usa o componente .nv-slider).

   O fundo é verde-profundo e não o teal médio da referência: em
   teal médio (#11917F) o texto branco dá 3.90:1 e o título
   amarelo 2.76:1, reprovando o WCAG AA (4.5:1) e até a régua de
   texto grande (3:1). No verde-profundo os dois passam com
   folga. Ver medições no comentário do commit/entrega.
   ============================================================ */
.nv-depoimentos__painel {
	position: relative;
	border-radius: 32px;
	overflow: hidden;
}

/* Textura discreta nos cantos, no lugar do padrão de pontos da referência:
   dois pontilhados em radial-gradient, sem asset de imagem. */
.nv-depoimentos__painel::before,
.nv-depoimentos__painel::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 190px;
	background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
	background-size: 14px 14px;
	opacity: 0.14;
	pointer-events: none;
}

.nv-depoimentos__painel::before {
	left: 0;
	-webkit-mask-image: linear-gradient(to right, #000, transparent);
	mask-image: linear-gradient(to right, #000, transparent);
}

.nv-depoimentos__painel::after {
	right: 0;
	-webkit-mask-image: linear-gradient(to left, #000, transparent);
	mask-image: linear-gradient(to left, #000, transparent);
}

.nv-depoimentos__painel > * {
	position: relative;
	z-index: 1;
}

.nv-depoimentos__linha {
	gap: var(--wp--preset--spacing--5) !important;
	margin: 0 !important;
}

/* As duas colunas esticam juntas (padrão do wp:columns, sem verticalAlignment),
   então a coluna de texto tem exatamente a altura do vídeo. O vídeo é quem
   define essa altura: 16:9 sobre 45% da largura do painel. */
.nv-depoimentos__conteudo {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.nv-depoimentos__conteudo > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.nv-depoimentos__cabecalho {
	flex: 0 0 auto;
}

.nv-depoimentos__titulo {
	margin: 0;
}

.nv-depoimentos__apoio {
	margin: 0.4em 0 0;
	opacity: 0.85;
}

.nv-depoimentos__midia .wp-block-embed,
.nv-depoimentos__midia figure {
	margin: 0;
}

.nv-depoimentos__midia iframe {
	display: block;
	width: 100%;
	border-radius: 16px;
}

/* Aspas decorativas em pseudo-elemento: como conteúdo de verdade elas seriam
   lidas em voz alta pelo leitor de tela como "aspas duplas de abertura". */
.nv-depoimento__citacao::before {
	content: "\201C";
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 0.6;
	color: var(--wp--preset--color--amarelo);
	margin-bottom: 0.25em;
}

.nv-depoimento__citacao {
	margin: 0;
	max-width: 34em;
}

.nv-depoimento__nome {
	margin: var(--wp--preset--spacing--3) 0 0;
}

.nv-depoimento__cargo {
	margin: 0.15em 0 0;
	opacity: 0.85;
}

/* Dots claros: o painel é escuro, então o ponto inativo é branco rebaixado em
   vez do cinza usado no hero. */
.nv-depoimentos__dots {
	margin-top: var(--wp--preset--spacing--3) !important;
}

.nv-depoimentos__dots .wp-block-button.nv-slider__dot .wp-block-button__link::before {
	background: rgba(255, 255, 255, 0.4);
}

.nv-depoimentos__dots .wp-block-button.nv-slider__dot.is-active .wp-block-button__link::before {
	background: var(--wp--preset--color--white);
}

@media (max-width: 781px) {
	.nv-depoimentos__painel {
		border-radius: 24px;
	}

	/* Empilhado, o cabeçalho volta pra largura toda. */
	.nv-depoimentos__cabecalho {
		margin-left: 0;
	}

	.nv-depoimentos__painel::before,
	.nv-depoimentos__painel::after {
		width: 90px;
	}
}

/* ============================================================
   Nossas soluções — carrossel de coleções + faixa de parceria.

   COR DO TEXTO: a referência põe título BRANCO sobre os sete
   fundos coloridos. Branco reprova o WCAG AA em seis deles
   (amarelo dá 1.6:1, verde-claro 1.8:1, coral 2.8:1, roxo
   3.8:1...). Invertido — título escuro (azul-escuro) sobre a cor
   — os sete passam. Duas cores da referência foram trocadas pelo
   vizinho mais claro da mesma família pra fechar a conta:
   secondary → primary e azul-profundo → azul-claro.

   CARROSSEL: mesmo componente do "Conexão DNA" — scroll de
   verdade (overflow-x + scroll-snap na trilha), não slider de
   translate. As setas só empurram o scroll um card por vez (ver
   assets/js/carrossel-posts.js). --nv-visiveis controla quantos
   cards aparecem por linha em cada breakpoint.
   ============================================================ */
.nv-solucoes__titulo {
	margin-bottom: var(--wp--preset--spacing--1) !important;
}

.nv-solucoes__linha-fina {
	margin: 0 auto !important;
	max-width: 42em;
}

/* Largura alinhada ao conteúdo do header (logo até o CTA): o wrapper .nv-solucoes
   só chega a 1280px de conteúdo (contentSize do tema), enquanto o header usa
   1440px de contentSize menos o padding lateral do site-header__inner
   (spacing|3). Repete a MESMA conta aqui pra as setas caírem exatamente sob a
   logo e o CTA — não é um valor solto. */
.nv-solucoes__carrossel {
	position: relative;
	max-width: calc(1440px - 2 * var(--wp--preset--spacing--3));
	margin-inline: auto;
	/* Goteira lateral onde as setas ficam, pra elas não cobrirem os cards. */
	padding: 0 var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--5) !important;
}

.nv-solucoes__trilha {
	--nv-visiveis: 5;

	display: flex;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: var(--wp--preset--spacing--2) !important;
	margin: 0 !important;
	padding: 0 0 var(--wp--preset--spacing--1);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	/* Barra de rolagem escondida: quem navega é a seta, mas o scroll continua
	   todo funcionando (swipe, roda do mouse, Tab entre os cards). */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.nv-solucoes__trilha::-webkit-scrollbar {
	display: none;
}

.nv-solucao {
	flex: 0 0 calc(
		(100% - (var(--nv-visiveis) - 1) * var(--wp--preset--spacing--2)) / var(--nv-visiveis)
	);
	/* Sem isso, o título em white-space:nowrap usa seu min-content pra forçar o
	   card a crescer além do flex-basis quando o texto é mais longo — e os cards
	   da linha saem de larguras diferentes entre si. */
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	border-radius: 16px;
}

/* O roxo puro (#8A6CF7) é o único dos sete escuro demais pro título escuro:
   medido, dá 4.05:1 e o mínimo é 4.5:1. Como o texto é escuro, quem resolve é
   CLAREAR o fundo — o contrário do que se faz com texto branco. */
.nv-solucao.has-roxo-background-color {
	background-color: color-mix(in srgb, var(--wp--preset--color--roxo) 84%, #fff) !important;
}

.nv-solucao > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* A capa é mockup com fundo transparente, então o card colorido funciona como
   fundo dela. A sombra dá o descolamento que a arte sozinha não tem.
   Largura total: junto com o padding mínimo do card, é o que dá o destaque. */
.nv-solucao__capa {
	margin: 0 !important;
	width: 100%;
}

.nv-solucao__capa img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.22));
}

/* Título e CTA acompanham a largura do card: em três colunas o card passa de
   200px pra ~416px, e nos tamanhos antigos (sm/xs) os dois sumiam embaixo de uma
   capa quatro vezes maior que eles.
   Fonte em --sm (não --base): com 5 capas por linha o card não tem largura pra
   títulos longos ("Alfabetização - Grafomotor") em --base sem quebrar linha. */
.nv-solucao__titulo {
	margin: 0 !important;
	line-height: 1.25;
	font-size: var(--wp--preset--font-size--sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Empurra o botão pro rodapé do card: com os cards de altura igual, isso alinha
   os "Saiba mais" da linha na horizontal, independente do título ter uma ou duas
   linhas. */
.nv-solucao__cta {
	margin-top: auto !important;
	width: 100%;
}

.nv-solucao__cta .wp-block-button__link {
	padding: 0.7em 1.4em;
	font-size: var(--wp--preset--font-size--sm);
}

/* --- Faixa de parceria --- */
.nv-parceria {
	margin-top: var(--wp--preset--spacing--5) !important;
	border-radius: 999px;
	align-items: center !important;
	gap: var(--wp--preset--spacing--3) !important;
}

.nv-parceria__chamada {
	align-items: center !important;
	gap: var(--wp--preset--spacing--3) !important;
}

.nv-parceria__icone {
	margin: 0 !important;
	flex: 0 0 auto;
	width: 64px;
}

.nv-parceria__icone img {
	display: block;
	width: 100%;
	height: auto;
}

.nv-parceria__titulo {
	margin: 0;
}

.nv-parceria__apoio {
	margin: 0.2em 0 0;
}

@media (max-width: 820px) {
	/* Pílula vira retângulo arredondado quando a faixa quebra em duas linhas: o
	   border-radius de 999px num bloco alto vira uma cápsula deformada. */
	.nv-parceria {
		border-radius: 24px;
	}
}

@media (max-width: 1100px) {
	.nv-solucoes__trilha {
		--nv-visiveis: 4;
	}
}

@media (max-width: 900px) {
	.nv-solucoes__trilha {
		--nv-visiveis: 3;
	}
}

/* As setas descem pra base do carrossel, lado a lado (mesmo ajuste do
   "Conexão DNA"): nesta largura a goteira lateral comeria largura demais dos
   cards. */
@media (max-width: 700px) {
	.nv-solucoes__carrossel {
		padding: 0 0 72px;
	}

	.nv-seta-slot {
		top: auto;
		bottom: 0;
		transform: none;
	}

	.nv-seta-slot--prev {
		left: calc(50% - 56px);
	}

	.nv-seta-slot--next {
		right: calc(50% - 56px);
	}
}

@media (max-width: 620px) {
	.nv-solucoes__trilha {
		--nv-visiveis: 2;
	}
}

/* ============================================================
   Resultados que inspiram — carrossel automático de logos (prova
   social) + cartão de indicadores.
   ============================================================ */
.nv-resultados__titulo {
	margin-bottom: var(--wp--preset--spacing--1) !important;
}

.nv-resultados__linha-fina {
	margin: 0 auto !important;
	max-width: 42em;
}

/* Sem seta (rola sozinho, ver JS): sem a goteira lateral que as outras
   seções reservam pro botão, o carrossel usa a largura toda. */
.nv-resultados__carrossel {
	max-width: calc(1440px - 2 * var(--wp--preset--spacing--3));
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--5) !important;
}

/* Sangra pra fora do padding da seção só no mobile: a margem negativa é o
   mesmo valor do padding inline do bloco (style="padding-...:spacing|4"), então
   o carrossel encosta nas duas bordas da tela igual uma seção full-bleed,
   sem precisar tocar no padding do resto da seção (título, linha fina,
   indicadores continuam com o respiro padrão). */
@media (max-width: 781px) {
	.nv-resultados__carrossel {
		max-width: none;
		/* !important porque o layout "constrained" do WordPress core força
		   margin-left/right:auto !important nos filhos diretos da seção. */
		margin-inline: calc(-1 * var(--wp--preset--spacing--4)) !important;
	}
}

.nv-resultados__trilha {
	display: flex;
	flex-wrap: nowrap !important;
	align-items: stretch;
	/* Centraliza quando os 6 cards cabem sem estourar a largura (a maioria das
	   telas); acima disso deixa de fazer diferença, porque o conteúdo já
	   preenche e transborda pro scroll. */
	justify-content: center;
	gap: var(--wp--preset--spacing--3) !important;
	margin: 0 !important;
	padding: 0 0 var(--wp--preset--spacing--1);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.nv-resultados__trilha::-webkit-scrollbar {
	display: none;
}

/* Cartão 16:9 — mesma proporção do arquivo placeholder, pra quando o
   cliente mandar o logo real só trocar a imagem sem mexer no CSS. */
.nv-resultado-logo {
	flex: 0 0 auto;
	width: 200px;
	scroll-snap-align: start;
	margin: 0 !important;
}

.nv-resultado-logo__imagem {
	margin: 0 !important;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--surface);
}

.nv-resultado-logo__imagem img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Cartão de indicadores: mesmo recurso visual do bloco de números
   (institucional__numeros) — fundo branco, cantos arredondados, sombra,
   divisor entre itens. Mais largo que o de 2 itens pra caber 4 sem quebrar
   título em duas linhas. --- */
.nv-resultados__indicadores {
	max-width: calc(1440px - 2 * var(--wp--preset--spacing--3));
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--6) !important;
	border-radius: 24px;
	border: 1px solid var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--sm);
	gap: 0 !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
}

.nv-indicador {
	flex: 1 1 0;
	min-width: 0;
	align-items: center !important;
	/* Centralizado (mesma regra do .nv-numero original): sem isso o
	   ícone+texto gruda no início de cada coluna e sobra vão do lado direito
	   de cada item — o "95%" curto fica com bem menos respiro que o
	   "Acompanhamento próximo" longo, e a distribuição lê torta. */
	justify-content: center;
	gap: var(--wp--preset--spacing--2) !important;
	margin: 0 !important;
	padding: var(--wp--preset--spacing--3);
}

.nv-indicador + .nv-indicador {
	border-left: 1px solid var(--wp--preset--color--surface);
}

/* Padding horizontal só entre itens (a divisória já dá o respiro): nas
   pontas ele só empurrava o primeiro ícone pra dentro à toa e apertava o
   último item, que tem o título mais longo ("Acompanhamento próximo") e
   estava estourando o padding direito. */
.nv-indicador:first-child {
	padding-left: 0;
}

.nv-indicador:last-child {
	padding-right: 0;
}

.nv-indicador__icone {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 0 !important;
}

.nv-indicador__icone figure {
	margin: 0 !important;
	width: 30px;
	line-height: 0;
}

.nv-indicador__icone img {
	display: block;
	width: 100%;
	height: auto;
}

.nv-indicador__texto {
	min-width: 0;
}

.nv-indicador__texto > * {
	margin: 0 !important;
}

.nv-indicador__titulo {
	line-height: 1.2;
	font-size: var(--wp--preset--font-size--lg);
	white-space: nowrap;
}

.nv-indicador__descricao {
	margin-top: 0.25em !important;
	line-height: 1.15;
	font-size: var(--wp--preset--font-size--base);
}

@media (max-width: 900px) {
	.nv-resultados__indicadores {
		flex-wrap: wrap !important;
	}

	.nv-indicador {
		flex: 1 1 100%;
		/* Empilhado, cada item ocupa a linha toda: a regra de :first-child /
		   :last-child (pensada pra divisor vertical entre colunas) deixava os
		   itens do meio com padding dos dois lados e só o primeiro alinhado à
		   esquerda de verdade. Zerar pros quatro copia o tratamento do item 1. */
		padding-left: 0;
		padding-right: 0;
	}

	.nv-indicador + .nv-indicador {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--surface);
	}

	.nv-indicador__titulo {
		white-space: normal;
	}
}

/* ============================================================
   Rodapé — grade de 4 colunas de links + marca + cartão de
   contato, sobre fundo verde-noturno.
   ============================================================ */
.site-footer {
	--nv-rodape-gap: var(--wp--preset--spacing--4);
}

.nv-rodape__grade {
	gap: var(--nv-rodape-gap) !important;
	align-items: flex-start !important;
}

.nv-rodape__marca {
	flex: 1 1 220px;
	max-width: 260px;
}

/* Logo original é colorida (teal + cinza): filtro converte pra silhueta
   branca, o jeito padrão de usar uma logo colorida sobre fundo escuro sem
   precisar de um segundo arquivo de logo. */
.nv-rodape__logo img {
	filter: brightness(0) invert(1);
	opacity: 0.95;
}

.nv-rodape__tagline {
	margin: var(--wp--preset--spacing--2) 0 0 !important;
	opacity: 0.8;
	line-height: 1.4;
}

.nv-rodape__social {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--3);
}

.nv-rodape__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	transition: background-color 0.15s ease;
}

.nv-rodape__social-link:hover {
	background: rgba(255, 255, 255, 0.2);
}

.nv-rodape__coluna {
	flex: 0 1 150px;
}

.nv-rodape__titulo {
	margin: 0 0 var(--wp--preset--spacing--2) !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.nv-rodape__lista {
	margin: calc(-1 * var(--wp--preset--spacing--1)) 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex;
	flex-direction: column;
}

/* Padding em vez de gap na lista: aumenta a área de toque real do link (~17px
   pra ~36px) sem esticar visualmente a distância entre as linhas de texto —
   as margens negativas acima/abaixo da lista cancelam o padding extra nas
   pontas. */
.nv-rodape__lista a {
	display: block;
	padding: var(--wp--preset--spacing--1) 0;
	color: var(--wp--preset--color--white);
	opacity: 0.85;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
}

.nv-rodape__lista a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* --- Cartão de contato: claro sobre o rodapé escuro, mesmo recurso do
   "Seja parceiro" (faixa clara sobre fundo colorido). --- */
.nv-rodape__contato {
	flex: 0 1 280px;
	align-items: center !important;
	gap: var(--wp--preset--spacing--3) !important;
	border-radius: 20px;
	padding: var(--wp--preset--spacing--3) !important;
}

.nv-rodape__contato-texto {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.nv-rodape__contato-linha {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--1);
	margin: 0 !important;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.3;
}

.nv-rodape__contato-linha svg {
	flex: 0 0 auto;
	margin-top: 0.15em;
}

.nv-rodape__contato-linha a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.nv-rodape__contato-linha a:hover {
	text-decoration: underline;
}

.nv-rodape__contato-linha small {
	display: block;
	opacity: 0.6;
}

.nv-rodape__whatsapp-slot {
	margin: 0 !important;
}

.wp-block-button.nv-rodape__whatsapp .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border-radius: 50%;
	background: #25D366;
}

.wp-block-button.nv-rodape__whatsapp .wp-block-button__link:hover {
	background: #1EBE5A;
}

.nv-rodape__divisor {
	margin: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--3) !important;
	border-top-color: var(--wp--preset--color--verde-noturno-linha) !important;
}

.nv-rodape__base {
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4) !important;
	opacity: 0.7;
}

.nv-rodape__base a {
	color: var(--wp--preset--color--white);
}

@media (max-width: 900px) {
	.nv-rodape__marca {
		flex: 1 1 100%;
		max-width: none;
	}

	.nv-rodape__contato {
		flex: 1 1 100%;
	}
}

/* ============================================================
   Pilares — Educação Infantil (faixa full-width com 5 ícones)
   ============================================================ */
.pilares-ei__row {
	flex-wrap: nowrap;
	align-items: stretch;
}

.pilares-ei__item {
	flex: 1 1 0;
	text-align: center;
	position: relative;
	padding: 0 var(--wp--preset--spacing--3);
}

/* Divisor vertical entre itens — não no primeiro */
.pilares-ei__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background-color: var(--wp--preset--color--surface);
}

.pilares-ei__item:first-child::before {
	display: none;
}

.pilares-ei__icone {
	width: 48px;
	height: 48px;
	margin-bottom: var(--wp--preset--spacing--1);
}

.pilares-ei__icone::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.pilares-ei__icone--coracao::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.35-9.5-8.5C.8 8.2 2 4.5 5.5 3.6 8 3 10.3 4 12 6c1.7-2 4-3 6.5-2.4 3.5.9 4.7 4.6 3 7.9C19 15.65 12 20 12 20Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.35-9.5-8.5C.8 8.2 2 4.5 5.5 3.6 8 3 10.3 4 12 6c1.7-2 4-3 6.5-2.4 3.5.9 4.7 4.6 3 7.9C19 15.65 12 20 12 20Z'/%3E%3C/svg%3E");
}

.pilares-ei__icone--quebra-cabeca::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h5.5v1.6a1.9 1.9 0 1 1 0 3.6V11H4V6a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M9.5 4H14a2 2 0 0 1 2 2v3.4a1.9 1.9 0 1 0 0 3.8V17a2 2 0 0 1-2 2H9.5v-1.6a1.9 1.9 0 1 0 0-3.6V4Z'/%3E%3Cpath d='M4 11h5.5v3.8a1.9 1.9 0 1 0 0 3.6V20H6a2 2 0 0 1-2-2v-7Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h5.5v1.6a1.9 1.9 0 1 1 0 3.6V11H4V6a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M9.5 4H14a2 2 0 0 1 2 2v3.4a1.9 1.9 0 1 0 0 3.8V17a2 2 0 0 1-2 2H9.5v-1.6a1.9 1.9 0 1 0 0-3.6V4Z'/%3E%3Cpath d='M4 11h5.5v3.8a1.9 1.9 0 1 0 0 3.6V20H6a2 2 0 0 1-2-2v-7Z'/%3E%3C/svg%3E");
}

.pilares-ei__icone--globo::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='12' r='8.5'/%3E%3Cpath d='M11 3.5c-2 2.3-3 5.2-3 8.5s1 6.2 3 8.5c2-2.3 3-5.2 3-8.5s-1-6.2-3-8.5ZM2.8 12h16.4'/%3E%3Cpath d='m20.2 15.8-.8 2.5 2.6.4-1.7 2-2.6-.5.4 2.6-2-1.7-1.5 2.2-.9-2.5-2.4.9.4-2.6-2.6.3 1.5-2.2-2.2-1.4 2.5-.9-1.5-2.1 2.6.3-.4-2.6 2 1.7.9-2.4 1.5 2.1 2.4-.8.4 2.5 2.2-1.4-1.5 2.1Z' stroke-width='1.1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='12' r='8.5'/%3E%3Cpath d='M11 3.5c-2 2.3-3 5.2-3 8.5s1 6.2 3 8.5c2-2.3 3-5.2 3-8.5s-1-6.2-3-8.5ZM2.8 12h16.4'/%3E%3Cpath d='m20.2 15.8-.8 2.5 2.6.4-1.7 2-2.6-.5.4 2.6-2-1.7-1.5 2.2-.9-2.5-2.4.9.4-2.6-2.6.3 1.5-2.2-2.2-1.4 2.5-.9-1.5-2.1 2.6.3-.4-2.6 2 1.7.9-2.4 1.5 2.1 2.4-.8.4 2.5 2.2-1.4-1.5 2.1Z' stroke-width='1.1'/%3E%3C/svg%3E");
}

.pilares-ei__icone--parceria::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='6' r='2.6'/%3E%3Ccircle cx='16' cy='6' r='2.6'/%3E%3Cpath d='M3.5 13.5c0-1.9 2-3.3 4.5-3.3s4.5 1.4 4.5 3.3M11.5 13.5c0-1.9 2-3.3 4.5-3.3s4.5 1.4 4.5 3.3'/%3E%3Cpath d='M6 18.5h5l1.5-1.8c.5-.6 1.4-.6 1.9 0l.1.1c.4.5.4 1.2-.1 1.6L12 20.5H6.5c-.8 0-1.5-.5-1.9-1.2L3.5 17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='6' r='2.6'/%3E%3Ccircle cx='16' cy='6' r='2.6'/%3E%3Cpath d='M3.5 13.5c0-1.9 2-3.3 4.5-3.3s4.5 1.4 4.5 3.3M11.5 13.5c0-1.9 2-3.3 4.5-3.3s4.5 1.4 4.5 3.3'/%3E%3Cpath d='M6 18.5h5l1.5-1.8c.5-.6 1.4-.6 1.9 0l.1.1c.4.5.4 1.2-.1 1.6L12 20.5H6.5c-.8 0-1.5-.5-1.9-1.2L3.5 17'/%3E%3C/svg%3E");
}

.pilares-ei__icone--escudo::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.3 19 6v5.5c0 4.6-3 7.9-7 9.2-4-1.3-7-4.6-7-9.2V6l7-2.7Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.3 19 6v5.5c0 4.6-3 7.9-7 9.2-4-1.3-7-4.6-7-9.2V6l7-2.7Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

.pilares-ei__label {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.35;
	margin: 0;
}

@media (max-width: 900px) {
	.pilares-ei__row {
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--4);
	}

	.pilares-ei__item {
		flex: 1 1 40%;
	}

	.pilares-ei__item::before {
		display: none;
	}
}

/* ============================================================
   Diferenciais — Educação Infantil (grid de 4 cards)
   ============================================================ */
.diferenciais-ei__grid {
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--wp--preset--spacing--3);
}

.diferenciais-ei__card {
	flex: 1 1 calc(25% - var(--wp--preset--spacing--3) * 3 / 4);
	max-width: 330px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.diferenciais-ei__imagem {
	margin: 0 0 var(--wp--preset--spacing--2);
	border-radius: 12px;
	overflow: hidden;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 140px;
}

.diferenciais-ei__imagem img {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

.diferenciais-ei__texto-link {
	text-decoration: underline;
}

.diferenciais-ei__avatares {
	flex-wrap: nowrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--1);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--2);
	width: 100%;
}

.diferenciais-ei__avatar {
	margin: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
}

.diferenciais-ei__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.diferenciais-ei__icones {
	flex-wrap: nowrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--2);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--2);
	width: 100%;
}

.diferenciais-ei__icone {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.diferenciais-ei__icone::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.diferenciais-ei__icone--musica::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E");
}

.diferenciais-ei__icone--play::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.3'/%3E%3Cpath d='M10 8.5v7l6-3.5-6-3.5Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.3'/%3E%3Cpath d='M10 8.5v7l6-3.5-6-3.5Z'/%3E%3C/svg%3E");
}

.diferenciais-ei__icone--imagem::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.7'/%3E%3Cpath d='m4.5 17 4.5-4.5 3 3 4-4.5L21 16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.7'/%3E%3Cpath d='m4.5 17 4.5-4.5 3 3 4-4.5L21 16'/%3E%3C/svg%3E");
}

.diferenciais-ei__icone--joystick::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9h2.2M8.1 7.9v2.2'/%3E%3Ccircle cx='15.5' cy='8.7' r='.9' fill='%23000' stroke='none'/%3E%3Ccircle cx='17.7' cy='10.9' r='.9' fill='%23000' stroke='none'/%3E%3Cpath d='M6.5 6h11A4.5 4.5 0 0 1 22 10.5v4A3.5 3.5 0 0 1 18.5 18c-1 0-1.9-.5-2.5-1.3L15 15H9l-1 1.7A3.1 3.1 0 0 1 5.5 18 3.5 3.5 0 0 1 2 14.5v-4A4.5 4.5 0 0 1 6.5 6Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9h2.2M8.1 7.9v2.2'/%3E%3Ccircle cx='15.5' cy='8.7' r='.9' fill='%23000' stroke='none'/%3E%3Ccircle cx='17.7' cy='10.9' r='.9' fill='%23000' stroke='none'/%3E%3Cpath d='M6.5 6h11A4.5 4.5 0 0 1 22 10.5v4A3.5 3.5 0 0 1 18.5 18c-1 0-1.9-.5-2.5-1.3L15 15H9l-1 1.7A3.1 3.1 0 0 1 5.5 18 3.5 3.5 0 0 1 2 14.5v-4A4.5 4.5 0 0 1 6.5 6Z'/%3E%3C/svg%3E");
}

.diferenciais-ei__icone--qrcode::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h3v3M20 14h1M14 20h1M17 20h4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h3v3M20 14h1M14 20h1M17 20h4'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
	.diferenciais-ei__card {
		flex: 1 1 40%;
	}
}

@media (max-width: 600px) {
	.diferenciais-ei__card {
		flex: 1 1 100%;
		max-width: 320px;
	}
}

/* ============================================================
   Coleções — Educação Infantil (card por coleção)
   ============================================================ */
.colecoes-ei__card {
	overflow: hidden;
	border-top: none;
	border-right: none;
	border-bottom: none;
}

.colecoes-ei__label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 4px;
	opacity: 0.7;
}

.colecoes-ei__badges {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--1);
	margin: 0 0 var(--wp--preset--spacing--2);
}

.colecoes-ei__faixa {
	display: inline-block;
	width: fit-content;
	margin: 0;
}

.colecoes-ei__imagem {
	margin: 0;
	display: flex;
	justify-content: center;
}

.colecoes-ei__imagem img {
	width: auto;
	max-width: 100%;
	height: 220px;
	object-fit: contain;
	display: block;
}

@media (max-width: 782px) {
	.colecoes-ei__card.wp-block-columns {
		flex-wrap: wrap;
	}

	.colecoes-ei__texto,
	.colecoes-ei__media {
		flex-basis: 100% !important;
	}

	.colecoes-ei__imagem img {
		height: 160px;
	}
}

/* ============================================================
   CTA Final — Educação Infantil (faixa teal com foto + texto)
   ============================================================ */
.cta-final-ei__inner {
	position: relative;
	/* Sem overflow:hidden aqui de propósito: a foto da família precisa vazar
	   por cima da borda superior do cartão. border-radius corta o próprio
	   background do elemento sem precisar de overflow:hidden — só recorta
	   filhos quadrados, que não é o caso aqui (a imagem é o elemento que
	   deve escapar). O avião decorativo (::before) fica num wrapper à parte,
	   abaixo, que aí sim recorta só a si mesmo. */
}

.cta-final-ei__media {
	overflow: visible;
	align-self: flex-end;
}

.wp-block-image.cta-final-ei__foto {
	margin: -140px 0 0 !important;
	width: 112%;
	max-width: 112%;
}

.cta-final-ei__foto img {
	width: 100%;
	height: auto;
	display: block;
}

.cta-final-ei__descricao {
	max-width: 46ch;
}

/* Avião de papel decorativo, mesmo estilo de linha do hero — puramente
   visual, por isso via ::before em vez de um bloco de imagem sem conteúdo.
   Wrapper próprio (não o card inteiro) porque só ele precisa recortar. */
.cta-final-ei__inner {
	overflow: visible;
}

.cta-final-ei__inner::before {
	content: "";
	position: absolute;
	top: 40px;
	right: 96px;
	width: 48px;
	height: 48px;
	background-color: rgba(255, 255, 255, 0.55);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 3-9 9m9-9-6.5 17-3.5-7-7-3.5L21 3Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 3-9 9m9-9-6.5 17-3.5-7-7-3.5L21 3Z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
	z-index: 0;
}

.cta-final-ei__row,
.cta-final-ei__texto {
	position: relative;
	z-index: 1;
}

@media (max-width: 782px) {
	.cta-final-ei__row.wp-block-columns {
		flex-wrap: wrap;
	}

	.cta-final-ei__media,
	.cta-final-ei__texto {
		flex-basis: 100% !important;
	}

	.cta-final-ei__media {
		align-self: center;
	}

	.cta-final-ei__foto {
		max-width: 200px;
		margin: 0 auto var(--wp--preset--spacing--3);
	}

	.cta-final-ei__inner::before {
		display: none;
	}
}