/*
Theme Name: Aluysio Fonseca
Theme URI: https://aluysiofonseca.com.br
Description: Tema-filho do Astra. Todo o visual do site vive neste arquivo — nada de CSS adicional no Personalizar. Paleta monocromatica, tipografia Archivo + Source Serif 4, motivo de linhas derivado do simbolo da marca.
Author: Aluysio Fonseca
Template: astra
Version: 2.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aluysio-fonseca
*/

/* ══════════════════════════════════════════════════════════════════
   REGRA DE OURO DESTE ARQUIVO
   Nunca pintar fundo em classe de contêiner compartilhada
   (.ast-container, .site-content, .ast-row). O Astra reusa essas
   classes dentro do cabecalho e do rodape, e pintar uma delas racha
   o layout. Fundo se pinta em body e nos wrappers especificos.
   ══════════════════════════════════════════════════════════════════ */


/* ─── 1. TOKENS ────────────────────────────────────────────────── */

:root {
	--c-preto:     #000000;
	--c-tinta:     #111111;
	--c-grafite:   #454545;
	--c-cinza:     #767676;  /* piso do contraste AA sobre branco */
	--c-linha:     #e0e0e0;
	--c-alt:       #f5f5f5;
	--c-branco:    #ffffff;
	--c-sobre-preto:      #ffffff;
	--c-sobre-preto-fraco:#b8b8b8;

	--f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--f-body: "Source Serif 4", Georgia, "Times New Roman", serif;

	--t-xs: 0.75rem;
	--t-sm: 0.875rem;
	--t-base: 1.0625rem;
	--t-lg: 1.1875rem;
	--t-xl: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	--t-2xl: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem);
	--t-3xl: clamp(2.2rem, 1.4rem + 3.4vw, 3.8rem);

	--s-1: .5rem;  --s-2: 1rem;  --s-3: 1.5rem;
	--s-4: 2.5rem; --s-5: 4rem;  --s-6: 6rem;

	--w-prosa: 68ch;
	--r-sm: 2px;  --r-md: 4px;
	--transicao: 180ms cubic-bezier(.4,0,.2,1);

	/* Assinatura: linhas na inclinacao de 12 graus da logo */
	--penas: repeating-linear-gradient(102deg,
		currentColor 0 1px, transparent 1px 8px);
}

/* Paleta global do Astra, para o tema nao reintroduzir cor */
html:root {
	--ast-global-color-0: #000000;
	--ast-global-color-1: #454545;
	--ast-global-color-2: #000000;
	--ast-global-color-3: #111111;
	--ast-global-color-4: #ffffff;
	--ast-global-color-5: #f5f5f5;
	--ast-global-color-6: #e0e0e0;
	--ast-global-color-7: #000000;
	--ast-global-color-8: #767676;
	--uagb-primary-color: #000000;
	--uagb-secondary-color: #454545;
}


/* ─── 2. BASE ──────────────────────────────────────────────────── */

body {
	font-family: var(--f-body);
	font-size: var(--t-base);
	line-height: 1.7;
	color: var(--c-tinta);
	background-color: var(--c-branco);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-display);
	color: var(--c-preto);
	font-weight: 700;
	font-style: normal;
	letter-spacing: -.025em;
	line-height: 1.1;
	text-wrap: balance;
}

/* Italico pesado so no h1: o eco da logo, uma vez por pagina */
h1, .entry-title {
	font-size: var(--t-3xl);
	font-weight: 800;
	font-style: italic;
	letter-spacing: -.035em;
}

h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }

p { text-wrap: pretty; }

a { color: var(--c-preto); text-underline-offset: .18em; transition: color var(--transicao); }
a:hover { color: var(--c-grafite); }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
	outline: 2px solid var(--c-preto);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

blockquote {
	border-left: 3px solid var(--c-preto);
	padding-left: var(--s-3);
	margin-left: 0;
	font-size: var(--t-lg);
	font-style: italic;
	color: var(--c-preto);
}

code, pre, kbd { font-family: ui-monospace, Menlo, "Courier New", monospace; font-size: .9em; }
pre { background: var(--c-preto); color: var(--c-branco); padding: var(--s-3); border-radius: var(--r-md); overflow-x: auto; }
:not(pre) > code { background: var(--c-alt); padding: .15em .4em; border-radius: var(--r-sm); border: 1px solid var(--c-linha); }

figcaption, .wp-caption-text {
	font-family: var(--f-display);
	font-size: var(--t-xs);
	color: var(--c-cinza);
}


/* ─── 3. CABECALHO ─────────────────────────────────────────────────
   Preto em toda pagina. Anula o modo transparente do Astra: uma logo
   so, uma cor de menu so, zero configuracao por pagina.            */

.site-header,
.ast-main-header-wrap,
.main-header-bar,
.ast-above-header,
.ast-below-header,
.site-header.ast-theme-transparent-header,
.ast-theme-transparent-header .main-header-bar,
.ast-mobile-header-wrap {
	background-color: var(--c-preto);
	background-image: none;
	border-bottom: 0;
	box-shadow: none;
}

.custom-logo-link img,
.site-logo-img img {
	width: 240px;
	height: auto;
	max-height: none;
}


/* ─── 4. MENU ───────────────────────────────────────────────────────
   Sem cor de destaque na paleta, a pagina atual e marcada por
   sublinhado — nao por cor.                                        */

.main-header-menu > .menu-item > a,
.main-header-menu > .menu-item > a:visited,
.site-header .ast-builder-menu a {
	color: var(--c-sobre-preto);
	font-family: var(--f-display);
	font-size: var(--t-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .1em;
	opacity: 1;
}

.main-header-menu > .menu-item > a:hover,
.main-header-menu > .menu-item > a:focus {
	color: var(--c-sobre-preto-fraco);
}

.main-header-menu > .current-menu-item > a,
.main-header-menu > .current_page_item > a {
	color: var(--c-sobre-preto);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 7px;
}

.main-header-menu .sub-menu {
	background-color: var(--c-preto);
	border: 1px solid var(--c-grafite);
}

.main-header-menu .sub-menu a { color: var(--c-sobre-preto); }
.main-header-menu .sub-menu a:hover { background-color: var(--c-branco); color: var(--c-preto); }

.site-header a:focus-visible { outline-color: var(--c-branco); }

/* Celular */
.ast-mobile-menu-trigger-minimal,
.ast-button-wrap .menu-toggle {
	background-color: transparent;
	color: var(--c-sobre-preto);
	border-color: var(--c-sobre-preto);
}

.ast-mobile-popup-drawer .ast-mobile-popup-inner,
#ast-mobile-popup,
.ast-mobile-header-content {
	background-color: var(--c-preto);
}

.ast-mobile-popup-drawer a,
.ast-mobile-header-content a,
#ast-mobile-popup .menu-item > a {
	color: var(--c-sobre-preto);
}


/* ─── 5. RODAPE ────────────────────────────────────────────────── */

.site-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap,
.ast-small-footer,
.ast-footer-copyright {
	position: relative;
	background-color: var(--c-preto);
	color: var(--c-sobre-preto-fraco);
	overflow: hidden;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	color: var(--c-branco);
	background-image: var(--penas);
	opacity: .07;
	pointer-events: none;
}

.site-footer > * { position: relative; }

.site-footer :is(p, li, span) { color: var(--c-sobre-preto-fraco); }
.site-footer :is(a, h1, h2, h3, h4) { color: var(--c-sobre-preto); }
.site-footer a:hover { color: var(--c-sobre-preto-fraco); }
.site-footer a:focus-visible { outline-color: var(--c-branco); }


/* ─── 6. BOTOES ─────────────────────────────────────────────────────
   Fundo preto, texto branco, borda BRANCA. Sobre branco a borda se
   dissolve e le-se caixa preta; sobre preto o fundo se dissolve e
   le-se caixa vazada. Legivel nos dois fundos sem classe extra.    */

.wp-block-button__link,
.wp-element-button,
.ast-custom-button,
.uagb-buttons-repeater,
input[type="submit"],
button[type="submit"] {
	display: inline-block;
	background-color: var(--c-preto);
	background-image: none;
	border: 2px solid var(--c-branco);
	border-radius: var(--r-md);
	color: var(--c-branco);
	padding: .75em 1.6em;
	font-family: var(--f-display);
	font-size: var(--t-sm);
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao);
}

.wp-block-button__link:hover,
.wp-element-button:hover,
.ast-custom-button:hover,
.uagb-buttons-repeater:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background-color: var(--c-branco);
	border-color: var(--c-preto);
	color: var(--c-preto);
}


/* ─── 7. LARGURA TOTAL ──────────────────────────────────────────────
   Escopo restrito a .alignfull. E a classe que o proprio editor
   gera quando o bloco esta em "Largura total" — nada de aplicar
   isto em classe de secao, que foi o erro anterior.                */

.alignfull {
	width: auto;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.alignwide {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}


/* ─── 8. SECOES ────────────────────────────────────────────────── */

.secao-negativa {
	position: relative;
	background-color: var(--c-preto);
	background-image: none;
	overflow: hidden;
}

.secao-negativa::before {
	content: "";
	position: absolute;
	inset: 0;
	color: var(--c-branco);
	background-image: var(--penas);
	opacity: .07;
	pointer-events: none;
}

.secao-negativa > * { position: relative; z-index: 1; }

.secao-negativa :is(h1, h2, h3, h4, h5, h6) { color: var(--c-branco); }
.secao-negativa :is(p, li) { color: var(--c-sobre-preto-fraco); }
.secao-negativa a:not(.wp-block-button__link) { color: var(--c-branco); }
.secao-negativa a:focus-visible { outline-color: var(--c-branco); }
.secao-negativa .sobrancelha { color: var(--c-branco); }

.secao-alt { background-color: var(--c-alt); }

/* Sobrancelha de secao */
.sobrancelha {
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--c-preto);
	margin-bottom: var(--s-1);
}

/* Divisor de linhas gravadas */
.penas {
	height: 34px;
	color: var(--c-preto);
	background-image: var(--penas);
	opacity: .22;
	margin-block: var(--s-4);
}

hr, .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--c-linha);
	margin-block: var(--s-4);
}


/* ─── 9. TITULO DE PAGINA ───────────────────────────────────────────
   Na home o hero E a abertura: imprimir o titulo da pagina cria um
   segundo h1 e confunde buscador e leitor de tela.                 */

.home .entry-title,
.home .ast-archive-title,
.home .page-title {
	display: none;
}


/* ─── 10. PROJETOS (shortcode do plugin) ───────────────────────── */

.pf-grade {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: var(--s-4) var(--s-3);
	margin: var(--s-4) 0;
	padding: 0;
	list-style: none;
}

.pf-item { position: relative; display: flex; flex-direction: column; }

.pf-item__midia {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--c-alt);
	aspect-ratio: 4/3;
	margin-bottom: var(--s-2);
}

.pf-item__midia--vazia {
	color: var(--c-preto);
	background-image: var(--penas);
	border: 1px solid var(--c-linha);
}

.pf-item__midia img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(100%) contrast(1.04);
	transition: transform 450ms cubic-bezier(.2,0,.2,1), filter 300ms ease;
}

.pf-item:hover .pf-item__midia img,
.pf-item:focus-within .pf-item__midia img {
	transform: scale(1.04);
	filter: grayscale(0%) contrast(1);
}

.pf-item__ficha {
	display: flex; align-items: baseline; gap: var(--s-1);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--c-cinza);
	margin-bottom: .35rem;
}

.pf-item__indice { color: var(--c-preto); font-weight: 700; font-style: italic; }
.pf-item__ficha span + span::before { content: "/"; margin-right: var(--s-1); color: var(--c-linha); }

.pf-item__titulo {
	font-family: var(--f-display);
	font-size: var(--t-lg);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
	margin: 0 0 .4rem;
}

.pf-item__titulo a {
	color: var(--c-preto);
	text-decoration: none;
	background-image: linear-gradient(var(--c-preto), var(--c-preto));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 260ms cubic-bezier(.4,0,.2,1);
}

.pf-item:hover .pf-item__titulo a { background-size: 100% 2px; }

.pf-item__resumo { font-size: var(--t-sm); color: var(--c-grafite); margin: 0; }

.pf-vazio {
	font-family: var(--f-display);
	font-size: var(--t-sm);
	color: var(--c-cinza);
	padding: var(--s-3);
	border: 1px dashed var(--c-linha);
	border-radius: var(--r-md);
}

.secao-negativa .pf-item__titulo a { color: var(--c-branco); background-image: linear-gradient(var(--c-branco), var(--c-branco)); }
.secao-negativa .pf-item__resumo { color: var(--c-sobre-preto-fraco); }
.secao-negativa .pf-item__indice { color: var(--c-branco); }


/* ─── 11. LEITURA LONGA ────────────────────────────────────────── */

.single-post .entry-content > *:not(.alignwide):not(.alignfull) { max-width: var(--w-prosa); }
.single-post .entry-content > p:first-of-type { font-size: var(--t-lg); color: var(--c-preto); }

.entry-meta, .post-meta, .ast-blog-meta-container {
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--c-cinza);
}


/* ─── 12. FORMULARIOS ──────────────────────────────────────────── */

input[type="text"], input[type="email"], input[type="url"],
input[type="tel"], input[type="search"], textarea, select {
	font-family: var(--f-body);
	font-size: var(--t-base);
	color: var(--c-tinta);
	background: var(--c-branco);
	border: 1px solid var(--c-linha);
	border-radius: var(--r-md);
	padding: .7em .9em;
	width: 100%;
}

input:focus, textarea:focus, select:focus { border-color: var(--c-preto); }

label {
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--c-grafite);
	display: block;
	margin-bottom: .35rem;
}

.secao-negativa label { color: var(--c-sobre-preto-fraco); }


/* ─── 13. RESPONSIVO, MOVIMENTO, IMPRESSAO ─────────────────────── */

@media (max-width: 921px) {
	.custom-logo-link img, .site-logo-img img { width: 170px; }
}

@media (max-width: 600px) {
	:root { --s-5: 2.5rem; --s-6: 3.5rem; }
	.pf-grade { gap: var(--s-3); }
	.penas { height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.pf-item:hover .pf-item__midia img { transform: none; }
}

@media print {
	.site-header, .site-footer, nav, .penas,
	.wp-block-button, .wp-block-buttons { display: none !important; }
	body { color: #000; background: #fff; font-size: 11pt; }
	.secao-negativa { background: #fff !important; color: #000 !important; }
	.secao-negativa::before { display: none; }
	.secao-negativa :is(h1,h2,h3,p,li) { color: #000 !important; }
}
/**
 * Página inicial institucional.
 *
 * Uso no editor da página:
 * [af_inicio]
 *
 * @return string
 */
function af_renderizar_inicio() {

	$status_contato = isset( $_GET['af_contato'] )
		? sanitize_key( wp_unslash( $_GET['af_contato'] ) )
		: '';

	$publicacoes = new WP_Query(
		array(
			'post_type'           => 'post',
			'post_status'         => 'publish',
			'posts_per_page'      => 3,
			'ignore_sticky_posts' => true,
			'no_found_rows'       => true,
		)
	);

	ob_start();
	?>

	<main id="conteudo-principal" class="af-home">

		<section class="af-hero alignfull secao-negativa" aria-labelledby="af-titulo-principal">
			<div class="af-shell af-hero__grade">

				<div class="af-hero__conteudo">
					<p class="sobrancelha">Estratégia, inovação e desenvolvimento urbano</p>

					<h1 id="af-titulo-principal">
						Cidades mais inteligentes começam com decisões mais humanas.
					</h1>

					<p class="af-hero__introducao">
						Consultoria e assessoria para transformar dados, tecnologia,
						planejamento e participação social em políticas públicas capazes
						de produzir resultados concretos para as pessoas e para os territórios.
					</p>

					<div class="af-acoes" aria-label="Ações principais">
						<a class="af-botao af-botao--claro" href="#servicos">
							Conheça os serviços
						</a>

						<a class="af-botao af-botao--contorno" href="#sobre">
							Conheça a atuação
						</a>
					</div>
				</div>

				<aside class="af-manifesto" aria-label="Princípios de atuação">
					<p class="af-manifesto__titulo">Princípios de atuação</p>

					<ol class="af-manifesto__lista">
						<li>
							<span>01</span>
							<strong>Pessoas no centro</strong>
							<small>Tecnologia aplicada às necessidades reais da população.</small>
						</li>

						<li>
							<span>02</span>
							<strong>Decisão baseada em evidências</strong>
							<small>Dados transformados em diagnóstico, prioridade e ação.</small>
						</li>

						<li>
							<span>03</span>
							<strong>Desenvolvimento sustentável</strong>
							<small>Resultados econômicos, sociais, territoriais e ambientais.</small>
						</li>
					</ol>
				</aside>

			</div>
		</section>


		<section id="sobre" class="af-secao alignfull" aria-labelledby="af-titulo-sobre">
			<div class="af-shell">

				<div class="af-cabecalho-secao">
					<div>
						<p class="sobrancelha">Sobre</p>
						<h2 id="af-titulo-sobre">Conhecimento aplicado à transformação das cidades.</h2>
					</div>

					<div class="af-texto-destaque">
						<p>
							Aluysio Fonseca atua na formulação de estratégias, projetos,
							políticas públicas e soluções tecnológicas voltadas ao
							desenvolvimento de cidades mais inteligentes, humanas,
							sustentáveis e preparadas para o futuro.
						</p>

						<p>
							O trabalho integra planejamento territorial, gestão pública,
							inovação, governança, mobilidade, segurança viária,
							transformação digital e análise de dados, considerando as
							necessidades específicas de cada município, instituição ou projeto.
						</p>
					</div>
				</div>

				<div class="penas" aria-hidden="true"></div>

				<div class="af-pilares">
					<article>
						<span>Diagnóstico</span>
						<h3>Compreender antes de propor</h3>
						<p>
							Levantamento de problemas, capacidades, riscos, oportunidades
							e desigualdades territoriais para orientar decisões realistas.
						</p>
					</article>

					<article>
						<span>Estratégia</span>
						<h3>Planejar com direção</h3>
						<p>
							Construção de objetivos, prioridades, programas, indicadores
							e responsabilidades compatíveis com a realidade institucional.
						</p>
					</article>

					<article>
						<span>Implementação</span>
						<h3>Transformar planejamento em resultado</h3>
						<p>
							Organização de projetos executáveis, mecanismos de governança,
							monitoramento e avaliação permanente das entregas.
						</p>
					</article>
				</div>

			</div>
		</section>


		<section id="servicos" class="af-secao alignfull secao-alt" aria-labelledby="af-titulo-servicos">
			<div class="af-shell">

				<div class="af-cabecalho-secao">
					<div>
						<p class="sobrancelha">Serviços</p>
						<h2 id="af-titulo-servicos">Soluções construídas para desafios reais.</h2>
					</div>

					<div class="af-texto-destaque">
						<p>
							Cada trabalho é estruturado de acordo com o problema,
							o território, a capacidade institucional e os resultados
							esperados pelo cliente.
						</p>
					</div>
				</div>

				<div class="af-servicos">

					<article class="af-servico">
						<span class="af-servico__numero">01</span>
						<h3>Cidades inteligentes</h3>
						<p>
							Planos, programas, projetos e estratégias para modernização
							da gestão urbana e melhoria dos serviços públicos.
						</p>
						<ul>
							<li>Planos municipais de cidades inteligentes</li>
							<li>Diagnósticos de maturidade</li>
							<li>Carteiras de projetos prioritários</li>
						</ul>
					</article>

					<article class="af-servico">
						<span class="af-servico__numero">02</span>
						<h3>Planejamento governamental</h3>
						<p>
							Formulação de políticas públicas, programas de governo,
							indicadores e estruturas de acompanhamento.
						</p>
						<ul>
							<li>Planos de governo</li>
							<li>Programas e políticas públicas</li>
							<li>Metas e indicadores de desempenho</li>
						</ul>
					</article>

					<article class="af-servico">
						<span class="af-servico__numero">03</span>
						<h3>Dados e inteligência territorial</h3>
						<p>
							Organização, análise e interpretação de informações para
							apoiar decisões estratégicas e territorialmente orientadas.
						</p>
						<ul>
							<li>Diagnósticos municipais e regionais</li>
							<li>Painéis e indicadores</li>
							<li>Estudos territoriais</li>
						</ul>
					</article>

					<article class="af-servico">
						<span class="af-servico__numero">04</span>
						<h3>Transformação digital</h3>
						<p>
							Estruturação de soluções digitais, plataformas e processos
							voltados à eficiência, integração e transparência.
						</p>
						<ul>
							<li>Governo digital</li>
							<li>Automação de processos</li>
							<li>Arquitetura de serviços digitais</li>
						</ul>
					</article>

					<article class="af-servico">
						<span class="af-servico__numero">05</span>
						<h3>Mobilidade e segurança viária</h3>
						<p>
							Diagnósticos, indicadores e políticas orientadas à redução
							de riscos e à proteção das pessoas no sistema de mobilidade.
						</p>
						<ul>
							<li>Diagnósticos de sinistros</li>
							<li>Indicadores territoriais</li>
							<li>Planos de ação e prevenção</li>
						</ul>
					</article>

					<article class="af-servico">
						<span class="af-servico__numero">06</span>
						<h3>Consultoria estratégica</h3>
						<p>
							Apoio técnico para decisões institucionais, concepção de
							projetos e organização de iniciativas complexas.
						</p>
						<ul>
							<li>Estudos técnicos</li>
							<li>Modelagem de projetos</li>
							<li>Assessoramento executivo</li>
						</ul>
					</article>

				</div>
			</div>
		</section>


		<section class="af-chamada alignfull secao-negativa" aria-labelledby="af-titulo-chamada">
			<div class="af-shell af-chamada__grade">

				<div>
					<p class="sobrancelha">Do problema à execução</p>
					<h2 id="af-titulo-chamada">
						Uma cidade não se torna inteligente pela quantidade de tecnologia que compra.
					</h2>
				</div>

				<div>
					<p>
						Ela se torna mais inteligente quando consegue compreender seus
						problemas, integrar instituições, utilizar dados com responsabilidade
						e melhorar concretamente a vida das pessoas.
					</p>

					<a class="af-botao af-botao--claro" href="#contato">
						Apresente o seu desafio
					</a>
				</div>

			</div>
		</section>


		<section id="opiniao" class="af-secao alignfull" aria-labelledby="af-titulo-opiniao">
			<div class="af-shell">

				<div class="af-cabecalho-secao">
					<div>
						<p class="sobrancelha">Opinião</p>
						<h2 id="af-titulo-opiniao">Análises, ideias e posicionamentos.</h2>
					</div>

					<div class="af-texto-destaque">
						<p>
							Conteúdos sobre cidades inteligentes, gestão pública,
							desenvolvimento territorial, inovação e políticas públicas.
						</p>
					</div>
				</div>

				<?php if ( $publicacoes->have_posts() ) : ?>

					<div class="af-publicacoes">

						<?php
						while ( $publicacoes->have_posts() ) :
							$publicacoes->the_post();

							$categorias = get_the_category();
							$categoria  = ! empty( $categorias )
								? $categorias[0]->name
								: 'Opinião';
							?>

							<article class="af-publicacao">

								<div class="af-publicacao__meta">
									<span><?php echo esc_html( $categoria ); ?></span>
									<time datetime="<?php echo esc_attr( get_the_date( 'c' ) ); ?>">
										<?php echo esc_html( get_the_date( 'd.m.Y' ) ); ?>
									</time>
								</div>

								<h3>
									<a href="<?php the_permalink(); ?>">
										<?php the_title(); ?>
									</a>
								</h3>

								<p>
									<?php
									echo esc_html(
										wp_trim_words(
											get_the_excerpt(),
											25,
											'…'
										)
									);
									?>
								</p>

								<a class="af-link-seta" href="<?php the_permalink(); ?>">
									Ler publicação
									<span aria-hidden="true">→</span>
								</a>

							</article>

						<?php endwhile; ?>

					</div>

					<div class="af-centralizar">
						<a class="af-botao af-botao--escuro" href="<?php echo esc_url( get_permalink( get_option( 'page_for_posts' ) ) ?: home_url( '/blog/' ) ); ?>">
							Ver todas as publicações
						</a>
					</div>

					<?php wp_reset_postdata(); ?>

				<?php else : ?>

					<div class="af-sem-publicacoes">
						<p>
							As primeiras análises serão publicadas em breve.
						</p>
					</div>

				<?php endif; ?>

			</div>
		</section>


		<section id="contato" class="af-secao af-contato alignfull secao-alt" aria-labelledby="af-titulo-contato">
			<div class="af-shell af-contato__grade">

				<div class="af-contato__apresentacao">
					<p class="sobrancelha">Contato</p>

					<h2 id="af-titulo-contato">
						Vamos conversar sobre o seu projeto.
					</h2>

					<p>
						Apresente o problema, a instituição envolvida e o resultado
						que pretende alcançar. A mensagem será encaminhada diretamente
						para o responsável pelo site.
					</p>

					<div class="penas" aria-hidden="true"></div>

					<p class="af-contato__nota">
						As informações enviadas serão utilizadas exclusivamente
						para responder à solicitação.
					</p>
				</div>

				<div class="af-formulario-wrap">

					<?php if ( 'sucesso' === $status_contato ) : ?>
						<div class="af-alerta af-alerta--sucesso" role="status">
							Mensagem enviada com sucesso. O contato será respondido assim que possível.
						</div>
					<?php elseif ( 'erro' === $status_contato ) : ?>
						<div class="af-alerta af-alerta--erro" role="alert">
							Não foi possível enviar a mensagem. Verifique os campos e tente novamente.
						</div>
					<?php elseif ( 'aguarde' === $status_contato ) : ?>
						<div class="af-alerta af-alerta--erro" role="alert">
							Aguarde alguns instantes antes de realizar um novo envio.
						</div>
					<?php endif; ?>

					<form
						class="af-formulario"
						method="post"
						action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>"
					>
						<input type="hidden" name="action" value="af_enviar_contato">

						<?php wp_nonce_field( 'af_contato_site', 'af_contato_nonce' ); ?>

						<div class="af-campo">
							<label for="af-nome">Nome</label>
							<input
								id="af-nome"
								name="nome"
								type="text"
								maxlength="120"
								autocomplete="name"
								required
							>
						</div>

						<div class="af-campo">
							<label for="af-email">E-mail</label>
							<input
								id="af-email"
								name="email"
								type="email"
								maxlength="160"
								autocomplete="email"
								required
							>
						</div>

						<div class="af-campo af-campo--inteiro">
							<label for="af-organizacao">Instituição ou organização</label>
							<input
								id="af-organizacao"
								name="organizacao"
								type="text"
								maxlength="160"
								autocomplete="organization"
							>
						</div>

						<div class="af-campo af-campo--inteiro">
							<label for="af-mensagem">Mensagem</label>
							<textarea
								id="af-mensagem"
								name="mensagem"
								rows="7"
								maxlength="5000"
								required
							></textarea>
						</div>

						<div class="af-campo-oculto" aria-hidden="true">
							<label for="af-website">Não preencher este campo</label>
							<input
								id="af-website"
								name="website"
								type="text"
								tabindex="-1"
								autocomplete="off"
							>
						</div>

						<div class="af-consentimento af-campo--inteiro">
							<input
								id="af-consentimento"
								name="consentimento"
								type="checkbox"
								value="1"
								required
							>

							<label for="af-consentimento">
								Autorizo o uso dos dados informados para resposta a esta solicitação.
							</label>
						</div>

						<div class="af-campo--inteiro">
							<button type="submit">
								Enviar mensagem
							</button>
						</div>

					</form>
				</div>

			</div>
		</section>

	</main>

	<?php
	return ob_get_clean();
}
add_shortcode( 'af_inicio', 'af_renderizar_inicio' );


/**
 * Processa o formulário de contato da página inicial.
 *
 * @return void
 */
function af_processar_contato() {

	$url_retorno = home_url( '/' );

	if (
		! isset( $_POST['af_contato_nonce'] ) ||
		! wp_verify_nonce(
			sanitize_text_field(
				wp_unslash( $_POST['af_contato_nonce'] )
			),
			'af_contato_site'
		)
	) {
		wp_safe_redirect(
			add_query_arg( 'af_contato', 'erro', $url_retorno ) . '#contato'
		);
		exit;
	}

	$campo_oculto = isset( $_POST['website'] )
		? sanitize_text_field( wp_unslash( $_POST['website'] ) )
		: '';

	if ( ! empty( $campo_oculto ) ) {
		wp_safe_redirect(
			add_query_arg( 'af_contato', 'sucesso', $url_retorno ) . '#contato'
		);
		exit;
	}

	$nome = isset( $_POST['nome'] )
		? sanitize_text_field( wp_unslash( $_POST['nome'] ) )
		: '';

	$email = isset( $_POST['email'] )
		? sanitize_email( wp_unslash( $_POST['email'] ) )
		: '';

	$organizacao = isset( $_POST['organizacao'] )
		? sanitize_text_field( wp_unslash( $_POST['organizacao'] ) )
		: '';

	$mensagem = isset( $_POST['mensagem'] )
		? sanitize_textarea_field( wp_unslash( $_POST['mensagem'] ) )
		: '';

	$consentimento = ! empty( $_POST['consentimento'] );

	if (
		empty( $nome ) ||
		! is_email( $email ) ||
		strlen( $mensagem ) < 10 ||
		! $consentimento
	) {
		wp_safe_redirect(
			add_query_arg( 'af_contato', 'erro', $url_retorno ) . '#contato'
		);
		exit;
	}

	$ip = isset( $_SERVER['REMOTE_ADDR'] )
		? sanitize_text_field( wp_unslash( $_SERVER['REMOTE_ADDR'] ) )
		: 'desconhecido';

	$chave_limite = 'af_contato_' . hash( 'sha256', $ip );

	if ( get_transient( $chave_limite ) ) {
		wp_safe_redirect(
			add_query_arg( 'af_contato', 'aguarde', $url_retorno ) . '#contato'
		);
		exit;
	}

	set_transient( $chave_limite, 1, MINUTE_IN_SECONDS );

	$destinatario = sanitize_email( get_option( 'admin_email' ) );

	$assunto = sprintf(
		'Novo contato pelo site — %s',
		$nome
	);

	$corpo  = "Novo contato recebido pelo site.\n\n";
	$corpo .= "Nome: {$nome}\n";
	$corpo .= "E-mail: {$email}\n";
	$corpo .= "Instituição: " . ( $organizacao ?: 'Não informada' ) . "\n\n";
	$corpo .= "Mensagem:\n{$mensagem}\n\n";
	$corpo .= 'Origem: ' . home_url( '/' );

	$cabecalhos = array(
		'Content-Type: text/plain; charset=UTF-8',
		'Reply-To: ' . $nome . ' <' . $email . '>',
	);

	$enviado = wp_mail(
		$destinatario,
		$assunto,
		$corpo,
		$cabecalhos
	);

	wp_safe_redirect(
		add_query_arg(
			'af_contato',
			$enviado ? 'sucesso' : 'erro',
			$url_retorno
		) . '#contato'
	);

	exit;
}
add_action( 'admin_post_af_enviar_contato', 'af_processar_contato' );
add_action( 'admin_post_nopriv_af_enviar_contato', 'af_processar_contato' );
/* ══════════════════════════════════════════════════════════════════
   14. PÁGINA INICIAL INSTITUCIONAL
   Shortcode: [af_inicio]
   ══════════════════════════════════════════════════════════════════ */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

.home .site-content {
	padding-top: 0;
	padding-bottom: 0;
}

.home .site-main,
.home #primary,
.home .entry-content {
	width: 100%;
	margin: 0;
}

.home .entry-content > .af-home {
	max-width: none;
	margin: 0;
}

.home .page .entry-header {
	display: none;
}

.af-home {
	width: 100%;
	overflow: hidden;
}

.af-shell {
	width: min(1200px, calc(100% - 3rem));
	margin-inline: auto;
}

.af-secao {
	padding: clamp(4.5rem, 8vw, 7.5rem) 0;
	scroll-margin-top: 90px;
}


/* ─── HERO ─────────────────────────────────────────────────────── */

.af-hero {
	min-height: calc(100svh - 90px);
	display: grid;
	align-items: center;
	padding: clamp(5rem, 9vw, 9rem) 0;
}

.af-hero__grade {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(290px, .65fr);
	gap: clamp(3rem, 7vw, 7rem);
	align-items: center;
}

.af-hero h1 {
	max-width: 13ch;
	margin: 0 0 var(--s-3);
	font-size: clamp(3rem, 6.6vw, 6.8rem);
	line-height: .96;
}

.af-hero__introducao {
	max-width: 65ch;
	margin: 0;
	font-size: clamp(1.1rem, 1rem + .35vw, 1.35rem);
	line-height: 1.65;
}

.af-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: var(--s-4);
}

.af-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .85rem 1.4rem;
	border: 2px solid var(--c-preto);
	border-radius: var(--r-md);
	font-family: var(--f-display);
	font-size: var(--t-sm);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color var(--transicao),
		color var(--transicao),
		border-color var(--transicao),
		transform var(--transicao);
}

.af-botao:hover {
	transform: translateY(-2px);
}

.af-botao--claro {
	color: var(--c-preto) !important;
	background: var(--c-branco);
	border-color: var(--c-branco);
}

.af-botao--claro:hover {
	color: var(--c-branco) !important;
	background: var(--c-preto);
	border-color: var(--c-branco);
}

.af-botao--contorno {
	color: var(--c-branco) !important;
	background: transparent;
	border-color: var(--c-branco);
}

.af-botao--contorno:hover {
	color: var(--c-preto) !important;
	background: var(--c-branco);
}

.af-botao--escuro {
	color: var(--c-branco) !important;
	background: var(--c-preto);
	border-color: var(--c-preto);
}

.af-botao--escuro:hover {
	color: var(--c-preto) !important;
	background: var(--c-branco);
}

.af-manifesto {
	padding-left: var(--s-3);
	border-left: 1px solid rgba(255, 255, 255, .28);
}

.af-manifesto__titulo {
	margin: 0 0 var(--s-3);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--c-branco) !important;
}

.af-manifesto__lista {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: item;
}

.af-manifesto__lista li {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: .15rem var(--s-2);
	padding: var(--s-3) 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.af-manifesto__lista li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.af-manifesto__lista span {
	grid-row: 1 / 3;
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 700;
	font-style: italic;
	color: var(--c-branco);
}

.af-manifesto__lista strong {
	font-family: var(--f-display);
	font-size: var(--t-sm);
	color: var(--c-branco);
}

.af-manifesto__lista small {
	display: block;
	font-family: var(--f-body);
	font-size: .92rem;
	line-height: 1.5;
	color: var(--c-sobre-preto-fraco);
}


/* ─── CABEÇALHOS DE SEÇÃO ─────────────────────────────────────── */

.af-cabecalho-secao {
	display: grid;
	grid-template-columns: minmax(280px, .9fr) minmax(300px, 1.1fr);
	gap: clamp(2rem, 8vw, 8rem);
	align-items: start;
}

.af-cabecalho-secao h2 {
	max-width: 15ch;
	margin: 0;
}

.af-texto-destaque {
	max-width: 65ch;
}

.af-texto-destaque p {
	margin-top: 0;
	font-size: var(--t-lg);
	color: var(--c-grafite);
}

.af-texto-destaque p:last-child {
	margin-bottom: 0;
}


/* ─── SOBRE ────────────────────────────────────────────────────── */

.af-pilares {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--c-linha);
	border: 1px solid var(--c-linha);
}

.af-pilares article {
	min-height: 280px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--c-branco);
}

.af-pilares span {
	display: block;
	margin-bottom: var(--s-4);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--c-cinza);
}

.af-pilares h3 {
	margin: 0 0 var(--s-2);
}

.af-pilares p {
	margin: 0;
	color: var(--c-grafite);
}


/* ─── SERVIÇOS ─────────────────────────────────────────────────── */

.af-servicos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: var(--s-5);
	background: var(--c-linha);
	border: 1px solid var(--c-linha);
}

.af-servico {
	position: relative;
	min-height: 390px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--c-branco);
	transition:
		background-color var(--transicao),
		color var(--transicao);
}

.af-servico:hover {
	background: var(--c-preto);
}

.af-servico__numero {
	display: block;
	margin-bottom: var(--s-5);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 700;
	font-style: italic;
	letter-spacing: .14em;
	color: var(--c-cinza);
}

.af-servico h3 {
	margin: 0 0 var(--s-2);
}

.af-servico p {
	margin: 0 0 var(--s-3);
	color: var(--c-grafite);
}

.af-servico ul {
	margin: 0;
	padding-left: 1.1rem;
	font-size: var(--t-sm);
	color: var(--c-grafite);
}

.af-servico li + li {
	margin-top: .45rem;
}

.af-servico:hover h3,
.af-servico:hover p,
.af-servico:hover li,
.af-servico:hover .af-servico__numero {
	color: var(--c-branco);
}


/* ─── CHAMADA ESTRATÉGICA ─────────────────────────────────────── */

.af-chamada {
	padding: clamp(4.5rem, 9vw, 8rem) 0;
}

.af-chamada__grade {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
	gap: clamp(3rem, 8vw, 8rem);
	align-items: end;
}

.af-chamada h2 {
	max-width: 17ch;
	margin: 0;
	font-size: clamp(2.2rem, 4.5vw, 4.8rem);
}

.af-chamada__grade > div:last-child {
	max-width: 55ch;
}

.af-chamada__grade > div:last-child p {
	margin-top: 0;
	font-size: var(--t-lg);
}

.af-chamada .af-botao {
	margin-top: var(--s-2);
}


/* ─── PUBLICAÇÕES ──────────────────────────────────────────────── */

.af-publicacoes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: var(--s-5);
	background: var(--c-linha);
	border: 1px solid var(--c-linha);
}

.af-publicacao {
	display: flex;
	flex-direction: column;
	min-height: 350px;
	padding: clamp(1.5rem, 3vw, 2.4rem);
	background: var(--c-branco);
}

.af-publicacao__meta {
	display: flex;
	justify-content: space-between;
	gap: var(--s-2);
	margin-bottom: var(--s-5);
	font-family: var(--f-display);
	font-size: var(--t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--c-cinza);
}

.af-publicacao h3 {
	margin: 0 0 var(--s-2);
}

.af-publicacao h3 a {
	color: var(--c-preto);
	text-decoration: none;
}

.af-publicacao h3 a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

.af-publicacao p {
	margin: 0 0 var(--s-3);
	color: var(--c-grafite);
}

.af-link-seta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: auto;
	font-family: var(--f-display);
	font-size: var(--t-sm);
	font-weight: 700;
	text-decoration: none;
}

.af-link-seta span {
	transition: transform var(--transicao);
}

.af-link-seta:hover span {
	transform: translateX(.3rem);
}

.af-centralizar {
	display: flex;
	justify-content: center;
	margin-top: var(--s-4);
}

.af-sem-publicacoes {
	margin-top: var(--s-4);
	padding: var(--s-3);
	border: 1px dashed var(--c-linha);
}


/* ─── CONTATO ──────────────────────────────────────────────────── */

.af-contato__grade {
	display: grid;
	grid-template-columns: minmax(280px, .75fr) minmax(400px, 1.25fr);
	gap: clamp(3rem, 8vw, 8rem);
	align-items: start;
}

.af-contato__apresentacao {
	position: sticky;
	top: 130px;
}

.af-contato__apresentacao h2 {
	max-width: 14ch;
	margin-bottom: var(--s-3);
}

.af-contato__apresentacao > p:not(.sobrancelha) {
	max-width: 48ch;
	color: var(--c-grafite);
}

.af-contato__nota {
	font-size: var(--t-sm);
}

.af-formulario-wrap {
	padding: clamp(1.5rem, 4vw, 3.5rem);
	background: var(--c-branco);
	border: 1px solid var(--c-linha);
}

.af-formulario {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-3);
}

.af-campo {
	min-width: 0;
}

.af-campo--inteiro {
	grid-column: 1 / -1;
}

.af-formulario textarea {
	resize: vertical;
	min-height: 170px;
}

.af-consentimento {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .7rem;
	align-items: start;
}

.af-consentimento input {
	width: 1.1rem;
	height: 1.1rem;
	margin-top: .2rem;
	accent-color: var(--c-preto);
}

.af-consentimento label {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--t-sm);
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
}

.af-campo-oculto {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.af-alerta {
	margin-bottom: var(--s-3);
	padding: var(--s-2) var(--s-3);
	border: 1px solid var(--c-preto);
	font-family: var(--f-display);
	font-size: var(--t-sm);
	font-weight: 700;
}

.af-alerta--sucesso {
	background: var(--c-preto);
	color: var(--c-branco);
}

.af-alerta--erro {
	background: var(--c-branco);
	color: var(--c-preto);
	border-style: dashed;
}


/* ─── RESPONSIVIDADE DA HOME ───────────────────────────────────── */

@media (max-width: 980px) {

	.af-hero {
		min-height: auto;
	}

	.af-hero__grade,
	.af-chamada__grade,
	.af-contato__grade {
		grid-template-columns: 1fr;
	}

	.af-hero h1 {
		max-width: 15ch;
	}

	.af-manifesto {
		padding-left: 0;
		border-left: 0;
	}

	.af-cabecalho-secao {
		grid-template-columns: 1fr;
		gap: var(--s-3);
	}

	.af-cabecalho-secao h2 {
		max-width: 18ch;
	}

	.af-pilares,
	.af-servicos,
	.af-publicacoes {
		grid-template-columns: repeat(2, 1fr);
	}

	.af-contato__apresentacao {
		position: static;
	}

}

@media (max-width: 680px) {

	html {
		scroll-padding-top: 70px;
	}

	.af-shell {
		width: min(100% - 2rem, 1200px);
	}

	.af-hero {
		padding: 4.5rem 0;
	}

	.af-hero h1 {
		font-size: clamp(2.8rem, 14vw, 4.4rem);
	}

	.af-acoes {
		flex-direction: column;
		align-items: stretch;
	}

	.af-botao {
		width: 100%;
	}

	.af-pilares,
	.af-servicos,
	.af-publicacoes {
		grid-template-columns: 1fr;
	}

	.af-pilares article,
	.af-servico,
	.af-publicacao {
		min-height: auto;
	}

	.af-formulario {
		grid-template-columns: 1fr;
	}

	.af-campo,
	.af-campo--inteiro {
		grid-column: 1;
	}

	.af-formulario-wrap {
		padding: var(--s-3);
	}

}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	.af-botao:hover {
		transform: none;
	}

}