/*
Theme Name: Alves Portes Advocacia
Theme URI: https://alvesportes.com.br
Author: Alves Portes Advocacia
Description: Tema classico customizado do site institucional do escritorio Alves Portes Advocacia. Codigo proprio, sem base em tema de terceiros.
Version: 0.21.4
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alvesportes
*/

/* ==========================================================================
   1. TIPOGRAFIA HOSPEDADA NO PROPRIO SITE
   --------------------------------------------------------------------------
   Montserrat (Julieta Ulanovsky e outros), licenca SIL OFL 1.1, texto completo
   em assets/fonts/OFL.txt.

   Servida daqui, e nao do Google Fonts, de proposito: puxar a fonte do Google
   entregaria a ele o IP de cada visitante, o que seria incoerente num site de
   advocacia que publica politica de privacidade e fala de LGPD.

   FONTE VARIAVEL, um arquivo so por faixa de caracteres (corrigido em
   25/09/2026). Os oito arquivos que existiam aqui (quatro pesos x duas
   faixas) eram, na pratica, dois arquivos repetidos quatro vezes cada: cada
   .woff2 e a MESMA fonte variavel inteira, com eixo de peso (wght) de 100 a
   900, e o navegador baixava o mesmo arquivo ate quatro vezes porque cada
   @font-face apontava para um nome de arquivo diferente. `font-weight: 100
   900` declara a faixa completa de uma vez; o navegador escolhe o peso exato
   dentro do arquivo, sem baixar nada a mais. Ganho de desempenho, nao
   correcao de defeito visual -- o site ja renderizava os pesos certos antes
   disso, a fonte sempre foi variavel.
   ========================================================================== */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/montserrat-variavel-latin.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/montserrat-variavel-latin-ext.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. TOKENS DE DESIGN
   --------------------------------------------------------------------------
   ESTE E O UNICO LUGAR A MEXER quando a identidade visual definitiva chegar.
   Todas as cores e medidas do site saem daqui. Trocar os valores abaixo
   re-tematiza o site inteiro, sem tocar em nenhum template.

   Paleta OFICIAL da marca, entregue pelo designer em 25/09/2026 (arquivo
   "PALETA DE CORES.svg"), em tres cores: cinza gelo #F4F4F4, grafite azulado
   #2F2F3D e vermelho #C8102E. Registro completo, com RGB e CMYK, em
   docs/04-identidade-visual.md. Os valores fora dessas tres (hover, tom
   suave, linha, tinta clara) sao derivados delas, e o porque de cada um esta
   anotado na propria linha.

   NAO substituir a paleta de creme e vinho que existia aqui antes: ela era
   provisoria, foi escolhida em 04/09/2026 so para o site nao ficar sem cor
   enquanto a identidade nao chegava, e esta agora sepultada.
   ========================================================================== */

:root {
	/* Marca: o VERMELHO da paleta, usado como acento (botao, link, bloco do
	   logotipo, filete). Nao e cor de fundo de area grande, de proposito: em
	   bloco largo o vermelho grita, e num site de advocacia a cor dominante
	   escura precisa ser o grafite. */
	--ap-marca: #c8102e;
	--ap-marca-escura: #a50c25; /* derivado: mesmo vermelho escurecido, para hover */
	--ap-marca-contraste: #ffffff;

	/* Texto e superficies. O texto e o proprio grafite azulado da paleta, que
	   da 13,2:1 sobre branco, bem acima do minimo de 4,5:1 da WCAG AA. */
	--ap-texto: #2f2f3d;
	--ap-texto-suave: #5c5c6b; /* derivado: grafite clareado, 7,0:1 sobre branco */
	--ap-fundo: #ffffff;
	--ap-fundo-alt: #f4f4f4;   /* cinza gelo da paleta */
	--ap-linha: #dcdce2;       /* derivado: cinza gelo puxado para o frio do grafite */
	--ap-escuro: #2f2f3d;      /* grafite azulado da paleta */

	/* Derivados do grafite, para o que nao aceita variavel de cor pronta:
	   --ap-escuro-forte e o fundo que aparece atras da foto de abertura
	   enquanto ela carrega; --ap-escuro-rgb entra nos gradientes translucidos
	   (rgba precisa dos canais soltos, nao do hexadecimal). */
	--ap-escuro-forte: #22222c;
	--ap-escuro-rgb: 47, 47, 61;

	/* Tinta clara sobre fundo escuro: e o cinza gelo da paleta, e nao branco
	   puro, para o texto da faixa escura nao vibrar. */
	--ap-claro: #f4f4f4;
	--ap-claro-rgb: 244, 244, 244;

	/* Tipografia */
	--ap-fonte-titulo: "Montserrat", "Segoe UI", system-ui, sans-serif;
	--ap-fonte-texto: "Montserrat", "Segoe UI", system-ui, sans-serif;

	/* Medidas */
	/* Fluida desde 25/09/2026: era 1120px fixo, e em tela Quad HD sobravam
	   ~700px vazios de cada lado. Em notebook (ate ~1400px) continua 1120;
	   cresce ate 1600 em monitor grande. Todas as grades do site usam
	   repeat(auto-fit, minmax(...)), entao so esticam; texto corrido segue
	   limitado por --ap-largura-texto. */
	--ap-largura-max: clamp( 1120px, 80vw, 1600px );
	--ap-largura-texto: 68ch;
	--ap-espaco: 1.5rem;
	--ap-espaco-secao: 5.5rem;
	--ap-raio: 2px;
}

/* ==========================================================================
   3. BASE
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--ap-fundo);
	color: var(--ap-texto);
	font-family: var(--ap-fonte-texto);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--ap-fonte-titulo);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ap-texto);
	margin: 0 0 0.6em;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.15em; }

a {
	color: var(--ap-marca);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

a:hover,
a:focus-visible {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 2px solid var(--ap-marca);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: .5rem;
	background: var(--ap-fundo);
	z-index: 100000;
}

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

ul, ol { padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

/* Acessibilidade: link de pular para o conteudo e textos so para leitor de tela. */
.ap-pular {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ap-marca);
	color: var(--ap-marca-contraste);
	padding: 0.75rem 1.25rem;
	z-index: 100;
}

.ap-pular:focus {
	left: 0;
}

.ap-so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   4. ESTRUTURA
   ========================================================================== */

.ap-container {
	width: 100%;
	max-width: var(--ap-largura-max);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.ap-secao {
	padding: var(--ap-espaco-secao) 0;
}

.ap-secao--alt {
	background: var(--ap-fundo-alt);
}

.ap-prosa {
	max-width: var(--ap-largura-texto);
}

/* ==========================================================================
   5. MARCA (logotipo definitivo)
   --------------------------------------------------------------------------
   Desde 25/09/2026 o cabecalho traz o LOGOTIPO DEFINITIVO do designer, na
   assinatura de uma linha ("ALVES PORTES ADVOCACIA"), servida como SVG. Antes
   havia aqui um monograma "AP" desenhado em CSS, que era um provisorio para o
   site nao ficar sem marca; ele foi removido, e nao deve voltar.

   Os arquivos sao gerados por SITE/scripts/gerar-logos-svg.py a partir dos SVGs
   oficiais, que vem em moldura quadrada com fundo solido. Nao editar os .svg
   gerados a mao.

   A altura do logotipo se define aqui, por --ap-marca-altura, e a largura sai
   sozinha da proporcao do SVG (12,7:1 na assinatura de uma linha). Mexer na
   altura, nunca na largura, ou a marca distorce.

   A logo enviada pelo painel (Personalizar > Identidade do site) continua
   vencendo esta, e cai na regra .ap-marca__custom.
   ========================================================================== */

.ap-marca {
	--ap-marca-altura: 1.15rem;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 1;
}

.ap-marca:hover,
.ap-marca:focus-visible {
	text-decoration: none;
}

.ap-marca__logo {
	display: block;
	height: var(--ap-marca-altura);
	width: auto;
}

.ap-marca__custom img {
	display: block;
	max-height: 64px;
	width: auto;
}

/* ==========================================================================
   6. CABECALHO
   --------------------------------------------------------------------------
   Base do cabecalho comum. A composicao atual em todas as larguras fica em
   assets/css/site-redesign.css: grafite com filete vermelho.
   ========================================================================== */

.ap-cabecalho {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--ap-escuro);
}

.ap-cabecalho__interno {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	gap: 2rem;
	max-width: none;
	margin: 0;
	padding: 0 1.75rem 0 0;
}

/* Aba da marca: retangulo vermelho ancorado no canto, em altura cheia, com a
   assinatura em cinza gelo por cima. Vermelho com tracado claro e uma das
   quatro combinacoes que o designer entregou, nao uma invencao do tema. */
.ap-cabecalho .ap-marca {
	background: var(--ap-marca);
	align-self: stretch;
	align-items: center;
	padding: 0 1.6rem;
	min-height: 4.5rem;
}

.ap-cabecalho .ap-marca:hover,
.ap-cabecalho .ap-marca:focus-visible {
	background: var(--ap-marca-escura);
	text-decoration: none;
}

.ap-cabecalho .ap-marca__custom {
	display: flex;
	align-items: center;
	padding-left: 1.75rem;
}

/* Menu centralizado no espaco que sobra ao lado da aba. */
.ap-menu {
	flex: 1;
	padding: 1.35rem 0;
}

.ap-menu ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ap-menu li { margin: 0; }

.ap-menu a {
	color: rgba( 255, 255, 255, 0.94 );
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.72rem;
	font-weight: 500;
}

.ap-menu a:hover,
.ap-menu a:focus-visible,
.ap-menu .current-menu-item > a,
.ap-menu .current-page-ancestor > a,
.ap-menu .current-menu-ancestor > a {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

.ap-menu--vazio {
	font-size: 0.85rem;
	color: rgba( 255, 255, 255, 0.8 );
}

.ap-menu-botao { display: none; }

/* Deslocamento da barra administrativa no desktop; os demais tamanhos sao
   tratados no arquivo do redesenho, carregado depois desta folha. */
@media screen and (min-width: 961px) {
	body.admin-bar .ap-cabecalho {
		top: 32px;
	}
}

/* ==========================================================================
   7. ABERTURA DA HOME (redesenho em camadas, 25/09/2026)
   --------------------------------------------------------------------------
   Ate aqui a abertura era uma foto unica de fundo (background-image), no
   estilo "hero photo" classico. Trocada por TRES camadas independentes, para
   crescer com a tela sem alterar os arquivos das imagens:

     __cenario   fundo geometrico gerado so com CSS (listras diagonais nos
                 dois tons do grafite + bloco da marca em vermelho, via
                 ::after). Referencia: referencias/1-whitecase.png, que o
                 proprio cliente trouxe para o projeto.
     __figuras   os dois socios recortados (fundo transparente), como duas
                 <picture> absolutas. Ver a nota grande em front-page.php
                 para a origem das imagens e como regera-las.
     __interno   olho, titulo, texto, botao -- sem alteracao de conteudo.

   Desde a revisão responsiva de 29/09/2026, texto e retratos ficam em uma
   grade. As fotos escalam pela largura reservada, e a seção cresce com o
   conteúdo. Abaixo de 960px, as duas partes são empilhadas.
   ========================================================================== */

/* Texto e retratos ocupam colunas independentes. A altura nunca define a
   largura das fotos: a composi??o acompanha o espa?o dispon?vel. */
.ap-abertura {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	column-gap: clamp(1.5rem, 3vw, 4rem);
	align-items: center;
	overflow: hidden;
	min-height: min(88svh, clamp(36rem, 52vw, 68rem));
	padding: clamp(7rem, 9vw, 10rem) max(1.5rem, calc((100% - var(--ap-largura-max)) / 2 + 1.5rem)) 0;
	background-color: var(--ap-escuro-forte);
}

/* Transicao para a faixa de destaques logo abaixo (mesma cor, --ap-escuro).
   Sem ela, as duas figuras eram cortadas secas pela borda da secao, com uma
   linha reta atravessando o terno e o vestido. Fica acima das figuras e
   abaixo do texto. */
.ap-abertura::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 24%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient( 180deg, rgba( var(--ap-escuro-rgb), 0 ) 0%, var(--ap-escuro) 100% );
}

/* --- Camada 1: fundo geometrico, so CSS ------------------------------- */

.ap-abertura__cenario {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-color: var(--ap-escuro-forte);
	background-image:
		/* escurece a esquerda, onde fica o texto -- o mesmo papel do antigo
		   .ap-abertura::before, agora como camada do proprio cenario. */
		linear-gradient( 90deg, rgba( var(--ap-escuro-rgb), 0.55 ) 0%, rgba( var(--ap-escuro-rgb), 0.08 ) 46%, rgba( var(--ap-escuro-rgb), 0 ) 64% ),
		/* listras finas de acento, na cor da marca, bem discretas */
		repeating-linear-gradient( 115deg, transparent 0 54px, rgba( 200, 16, 46, 0.16 ) 54px 58px, transparent 58px 152px ),
		/* listras largas, nos dois tons do grafite -- a textura principal */
		repeating-linear-gradient( 115deg, var(--ap-escuro) 0 64px, var(--ap-escuro-forte) 64px 70px );
	/* o padrao some perto do texto e so aparece de verdade do meio para a
	   direita, atras das figuras. Antes ficava a 35% atras do titulo e
	   competia com a leitura (ajuste de 25/09/2026, a partir do print do
	   cliente em tela Quad HD). */
	mask-image: linear-gradient( 90deg, transparent 0%, rgba( 0, 0, 0, 0.18 ) 38%, black 72% );
	-webkit-mask-image: linear-gradient( 90deg, transparent 0%, rgba( 0, 0, 0, 0.18 ) 38%, black 72% );
}

/* Bloco da marca: o retangulo vermelho que da "chao" aos dois socios --
   sem ele, as figuras recortadas ficam soltas sobre o padrao, com cara de
   recorte colado (foi exatamente a critica do cliente na versao anterior,
   que usava um contorno de luz em volta de cada silhueta para o mesmo fim
   e ainda assim parecia montagem). */
.ap-abertura__cenario::after {
	content: "";
	position: absolute;
	/* Altura inteira e largo, de proposito. Uma versao mais estreita e
	   baixa foi testada em 25/09/2026 e rejeitada pelo cliente: o bloco
	   grande e o que da forca ao desenho. */
	right: clamp( 1rem, 6vw, 6rem );
	bottom: -8%;
	width: clamp( 20rem, 34vw, 34rem );
	height: 130%;
	background: linear-gradient( 152deg, var(--ap-marca) 0%, var(--ap-marca-escura) 100% );
	border-radius: 3px;
	transform: rotate( -5deg );
	box-shadow: 0 2rem 4rem rgba( 0, 0, 0, 0.35 );
}

/* --- Camada 2: retratos com propor??o est?vel dentro da pr?pria coluna.
   A dupla mant?m a rela??o de tamanho e posi??o dos recortes aprovados.
   Sua caixa reserva espa?o real no layout, inclusive em celular. */
.ap-abertura__figuras {
	position: relative;
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	width: calc(100% + max(0px, (100vw - var(--ap-largura-max)) / 2));
	aspect-ratio: 1.56;
	z-index: 1;
	/* A sombra precisa ultrapassar o topo desta caixa para contornar as cabecas.
	   A secao .ap-abertura continua recortando qualquer excesso externo. */
	overflow: visible;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.ap-abertura__figura {
	position: absolute;
	bottom: 0;
	display: block;
	line-height: 0;
	/* A primeira sombra marca todo o contorno; a segunda, ligeiramente deslocada,
	   acrescenta profundidade sem concentrar o escuro em um so lado. */
	filter:
		drop-shadow(
			0 0
			clamp(.35rem, .7vw, 1rem)
			rgba(0, 0, 0, .98)
		)
		drop-shadow(
			clamp(.1rem, .25vw, .35rem)
			clamp(.1rem, .4vw, .55rem)
			clamp(.7rem, 1.4vw, 1.9rem)
			rgba(0, 0, 0, .88)
		);
}

.ap-abertura__figura img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: contain;
	-webkit-user-drag: none;
	/* Um pouco mais escuras e menos saturadas, para as fotos nao disputarem com o titulo. */
	filter: brightness(.9) saturate(.85);
}

/* A foto dele (07/10/2026) ja chega mais apagada que a dela, que e de estudio:
   com o mesmo filtro o rosto ficava acinzentado. Aqui o filtro e mais leve. */
.ap-abertura__figura--jefferson img {
	filter: brightness(.96) saturate(.97);
}

.ap-abertura__figura--jefferson {
	right: 39.7%;
	/* 64,5% desde a foto de 07/10/2026 (terno cinza, bracos cruzados, 1200 x 1193):
	   a largura acompanha a proporcao do recorte (largura / altura / 1.56). O recorte
	   deixa a cabeca dele do tamanho da da Cintia; o ombro esquerdo entra inteiro. */
	width: 64.5%;
	height: 100%;
	z-index: 1;
}

.ap-abertura__figura--cintia {
	right: 0;
	width: 80.1%;
	height: 123%;
	bottom: -26.5%;
	z-index: 2;
}

.ap-abertura__interno {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	z-index: 3;
	min-width: 0;
	padding: 0 0 clamp(3rem, 5vw, 5rem);
}

/* --- Movimento (assets/js/abertura.js) ---------------------------------
   O JS liga a classe --visivel um quadro depois de marcar .ap-entrada, para
   o navegador registrar o estado inicial antes da transicao comecar. Sem
   JavaScript, nenhum elemento recebe .ap-entrada, entao tudo fica visivel
   direto (este bloco nunca esconde conteudo por conta propria). Tambem usada
   em .ap-destaques, para a secao seguinte revelar ao entrar na tela. */
.ap-entrada {
	opacity: 0;
	transform: translateY( 18px );
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.ap-entrada--visivel {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ap-entrada {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.ap-abertura__olho,
.ap-abertura__titulo,
.ap-abertura__texto,
.ap-abertura .ap-acoes {
	max-width: 36rem;
}

.ap-abertura__olho {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	/* Olho da abertura: vermelho clareado, para o acento da marca aparecer
	   sobre a foto escura sem perder legibilidade (6,7:1). */
	color: #efa6b0;
	margin: 0 0 0.9rem;
}

.ap-abertura__titulo {
	color: #ffffff;
	font-size: clamp( 1.9rem, 4.2vw, 3.6rem );
	line-height: 1.14;
	letter-spacing: -0.025em;
	margin: 0 0 0.85rem;
	text-wrap: balance;
}

.ap-abertura__texto {
	font-size: 1.02rem;
	line-height: 1.65;
	color: rgba( 255, 255, 255, 0.82 );
	margin: 0 0 1.75rem;
}

.ap-abertura .ap-acoes { margin-top: 0; }

.ap-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 2rem;
}

.ap-botao {
	display: inline-block;
	background: var(--ap-marca);
	color: var(--ap-marca-contraste);
	padding: 0.9rem 1.7rem;
	text-decoration: none;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	border: 1px solid var(--ap-marca);
	border-radius: 0.4rem;
}

.ap-botao:hover,
.ap-botao:focus-visible {
	background: var(--ap-marca-escura);
	border-color: var(--ap-marca-escura);
	color: var(--ap-marca-contraste);
}

.ap-botao--vazado {
	background: transparent;
	color: var(--ap-marca);
}

.ap-botao--vazado:hover,
.ap-botao--vazado:focus-visible {
	background: var(--ap-marca);
	color: var(--ap-marca-contraste);
}

/* ==========================================================================
   7.1 GEOMETRIA E DESTAQUES
   ========================================================================== */

/* Planos decorativos fixos, sem resposta de posicao ao mouse. */
.ap-geometria {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.ap-geometria__plano,
.ap-geometria__linha {
	position: absolute;
	display: block;
	transform: rotate( -5deg );
}

.ap-geometria__plano {
	inset: 0 20% 0 0;
	background: linear-gradient( 152deg, var(--ap-marca), var(--ap-marca-escura) );
}

.ap-geometria__linha {
	inset: 12% 0 12% 25%;
	border: 1px solid rgba( var(--ap-claro-rgb), 0.55 );
	transform: rotate( -5deg );
}

.ap-destaques {
	position: relative;
	background: var(--ap-fundo-alt);
	color: var(--ap-texto);
	padding: clamp( 3.5rem, 5vw, 5.5rem ) 0;
}

.ap-destaques::after {
	content: none;
}

.ap-destaques__grade {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	grid-template-rows: auto auto;
	column-gap: clamp( 1.5rem, 3vw, 3.25rem );
}

.ap-destaque {
	grid-row: span 2;
	display: grid;
	grid-template-rows: subgrid;
	gap: 0.8rem;
	min-width: 0;
	padding: 1.3rem 0 0;
	border-top: 3px solid var(--ap-linha);
}

.ap-destaque:first-child {
	border-top: 3px solid var(--ap-marca);
}

.ap-destaque h2 {
	margin: 0;
	color: var(--ap-texto);
	font-size: clamp( 1.12rem, 1.45vw, 1.4rem );
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.3;
	text-wrap: pretty;
}

.ap-destaque p {
	margin: 0;
	max-width: 55ch;
	color: var(--ap-texto-suave);
	font-size: 0.96rem;
	line-height: 1.7;
}

/* ==========================================================================
   8. AREAS — os assuntos sao o elemento principal de navegacao
   ========================================================================== */

.ap-areas {
	background: var(--ap-fundo);
	padding: clamp( 4rem, 6.5vw, 7rem ) 0;
	scroll-margin-top: 6rem;
}

.ap-areas__intro {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: clamp( 12rem, 17vw, 16rem );
	margin-bottom: 1.5rem;
	padding: clamp( 2rem, 4vw, 4rem );
	background:
		linear-gradient( 90deg, var(--ap-escuro) 18%, transparent 80% ),
		repeating-linear-gradient( 115deg, var(--ap-escuro) 0 64px, var(--ap-escuro-forte) 64px 70px );
}

.ap-areas__intro h2 {
	position: relative;
	z-index: 1;
	max-width: 62%;
	margin: 0;
	color: var(--ap-claro);
	font-size: clamp( 2.35rem, 3.6vw, 4rem );
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.055em;
}

.ap-geometria--areas {
	top: -22%;
	right: 4%;
	width: 32%;
	height: 150%;
}

.ap-geometria--areas .ap-geometria__plano,
.ap-geometria--contato .ap-geometria__plano {
	box-shadow: 1rem 1.5rem 2rem rgba( var(--ap-escuro-rgb), 0.3 );
}

.ap-area {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax( 8.5rem, 0.6fr ) minmax( 0, 2.1fr ) minmax( 9rem, 0.65fr );
	gap: clamp( 1.5rem, 3vw, 3.5rem );
	align-items: center;
	padding: clamp( 1.8rem, 2.8vw, 3rem ) 0;
	border-top: 1px solid var(--ap-linha);
}

.ap-area::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient( 100deg, transparent 0%, rgba( 200, 16, 46, 0.05 ) 18%, rgba( 200, 16, 46, 0.035 ) 45%, rgba( var(--ap-escuro-rgb), 0.015 ) 72%, transparent 100% );
	opacity: 0;
	transition: opacity 220ms ease;
}

.ap-area--link:hover::before,
.ap-area:focus-within::before {
	opacity: 1;
}

.ap-area:last-child {
	border-bottom: 1px solid var(--ap-linha);
}

.ap-area__rotulo {
	align-self: start;
	padding-top: 0.35rem;
	color: var(--ap-marca);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.5;
}

.ap-area h3 {
	margin: 0 0 0.6rem;
	max-width: 29ch;
	font-size: clamp( 1.65rem, 2.3vw, 2.65rem );
	font-weight: 550;
	letter-spacing: -0.045em;
	line-height: 1.17;
	text-wrap: pretty;
	transition: color 180ms ease;
}

.ap-area p {
	max-width: 58ch;
	margin: 0;
	color: var(--ap-texto-suave);
	font-size: 0.95rem;
	line-height: 1.65;
}

.ap-area__chamada {
	justify-self: end;
	max-width: 18ch;
	color: var(--ap-texto);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.65;
	text-underline-offset: 0.3em;
}

/* O link tem um destino especifico; a superficie da linha amplia o alvo. */
.ap-area__chamada::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ap-area--link:hover h3,
.ap-area:focus-within h3 {
	color: var(--ap-marca);
}

.ap-area:focus-within {
	outline: 2px solid var(--ap-marca);
	outline-offset: 6px;
}

.ap-area__chamada:focus-visible {
	outline: none;
}

/* ==========================================================================
   8.1 CONDUCAO — quatro passos, sem caixas ou colunas laterais de titulo
   ========================================================================== */

.ap-conducao {
	overflow: hidden;
	padding: clamp( 4rem, 6vw, 6.5rem ) 0;
}

.ap-conducao__intro {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 10rem;
	padding-right: 32%;
}

.ap-conducao__intro h2 {
	position: relative;
	z-index: 1;
	max-width: 25ch;
	margin: 0;
	font-size: clamp( 2rem, 3vw, 3.2rem );
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1.15;
	text-wrap: pretty;
}

.ap-geometria--conducao {
	top: -2rem;
	right: 1.5rem;
	width: 17rem;
	height: 14rem;
}

.ap-geometria--conducao .ap-geometria__plano {
	inset: 0 12% 0 5%;
	border: 1px solid rgba( var(--ap-escuro-rgb), 0.18 );
	background: repeating-linear-gradient( 115deg, transparent 0 40px, rgba( var(--ap-escuro-rgb), 0.05 ) 40px 42px );
	transform: skewX( -25deg );
}

.ap-geometria--conducao .ap-geometria__linha {
	inset: 18% 28% 14% 24%;
	border-color: var(--ap-marca);
	transform: skewX( -25deg );
}

.ap-conducao__etapas {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: clamp( 2.5rem, 4vw, 4rem ) clamp( 3rem, 7vw, 8rem );
	list-style: none;
	margin: clamp( 2.75rem, 4.5vw, 4.5rem ) 0 0;
	padding: 0;
}

.ap-conducao__etapa {
	display: grid;
	grid-template-columns: 3.3rem minmax( 0, 1fr );
	gap: clamp( 1rem, 1.8vw, 2rem );
	margin: 0;
}

.ap-conducao__numero {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.3rem;
	height: 3.3rem;
	color: var(--ap-claro);
	background: var(--ap-escuro);
	clip-path: polygon( 14% 0, 100% 0, 86% 100%, 0 100% );
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ap-conducao__numero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--ap-marca);
}

.ap-conducao__etapa h3 {
	margin: 0 0 0.7rem;
	font-size: clamp( 1.15rem, 1.5vw, 1.5rem );
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.3;
	text-wrap: pretty;
}

.ap-conducao__etapa p {
	max-width: 52ch;
	margin: 0;
	color: var(--ap-texto-suave);
	font-size: 0.96rem;
	line-height: 1.75;
}

/* ==========================================================================
   8.2 CONTATO NA HOME — um unico painel para conversa e formulario
   ========================================================================== */

.ap-home-contato {
	background: var(--ap-fundo);
	scroll-margin-top: 4.5rem;
	padding: clamp( 4rem, 6.5vw, 7rem ) 0;
}

.ap-home-contato__grade {
	display: grid;
	grid-template-columns: minmax( 0, 0.8fr ) minmax( 0, 1.2fr );
	gap: 0;
	align-items: stretch;
	width: calc( 100% - 3rem );
	max-width: calc( var(--ap-largura-max) - 3rem );
	padding: 0;
	background: var(--ap-fundo-alt);
	border: 1px solid var(--ap-linha);
	border-radius: 3px;
}

.ap-home-contato__intro {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp( 2rem, 3.5vw, 4rem );
	padding-bottom: 17rem;
	background:
		linear-gradient( 180deg, var(--ap-escuro) 15%, transparent 85% ),
		repeating-linear-gradient( 115deg, var(--ap-escuro) 0 64px, var(--ap-escuro-forte) 64px 70px );
}

.ap-home-contato__intro > :not(.ap-geometria) {
	position: relative;
	z-index: 1;
}

.ap-geometria--contato {
	bottom: -5rem;
	right: -2rem;
	width: 85%;
	height: 19rem;
}

.ap-geometria--contato .ap-geometria__plano {
	inset: 12% 26% 0 0;
}

.ap-geometria--contato .ap-geometria__linha {
	inset: 0 8% 16% 35%;
}

.ap-home-contato__rotulo {
	margin: 0 0 1.2rem;
	color: #efa6b0;
	font-size: 0.9rem;
	font-weight: 600;
}

.ap-home-contato__intro h2 {
	color: var(--ap-claro);
	max-width: 17ch;
	margin: 0 0 1.5rem;
	font-size: clamp( 2.2rem, 2.7vw, 3.1rem );
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 1.1;
	text-wrap: pretty;
}

.ap-home-contato__intro > p:not(.ap-home-contato__rotulo) {
	max-width: 33ch;
	color: rgba( var(--ap-claro-rgb), 0.85 );
	font-size: 1rem;
	line-height: 1.75;
	margin: 0;
}

.ap-home-contato__outros {
	display: inline-block;
	color: var(--ap-claro);
	font-size: 0.9rem;
	font-weight: 600;
	margin-top: 2rem;
	text-underline-offset: 0.35em;
}

.ap-home-contato .ap-contato__formulario {
	background: transparent;
	padding: clamp( 2rem, 3.5vw, 4rem );
}

/* ==========================================================================
   9. PAGINAS INTERNAS E ARTIGOS — uma medida de leitura consistente
   ========================================================================== */

.ap-pagina {
	padding: clamp( 3rem, 6vw, 6rem ) 0 clamp( 4rem, 7vw, 7rem );
}

.ap-pagina > .ap-container {
	max-width: 72rem;
}

.ap-pagina__titulo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-bottom: 3rem;
	padding-right: clamp( 4rem, 20%, 15rem );
	padding-bottom: clamp( 2rem, 4vw, 3.5rem );
	border-bottom: 1px solid var(--ap-linha);
}

.ap-pagina__titulo > :not(.ap-geometria) {
	position: relative;
	z-index: 1;
}

.ap-geometria--interna {
	top: 8%;
	right: -2rem;
	width: 13rem;
	height: 88%;
}

.ap-geometria--interna .ap-geometria__plano {
	background: repeating-linear-gradient( 115deg, var(--ap-fundo-alt) 0 45px, var(--ap-linha) 45px 47px );
	transform: skewX( -25deg );
}

.ap-geometria--interna .ap-geometria__linha {
	border-color: var(--ap-marca);
	inset: 20% 18% 0 45%;
	transform: skewX( -25deg );
}

.ap-pagina__titulo h1 {
	max-width: 22ch;
	margin: 0;
	font-size: clamp( 2.5rem, 5vw, 4.8rem );
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 1.1;
	text-wrap: pretty;
}

.ap-pagina__caminho {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 2rem;
	color: var(--ap-texto-suave);
	font-size: 0.85rem;
}

.ap-pagina__caminho a {
	color: inherit;
	text-underline-offset: 0.25em;
}

.ap-conteudo.ap-prosa {
	max-width: 52rem;
	font-size: clamp( 1rem, 1.2vw, 1.15rem );
	line-height: 1.85;
}

.ap-conteudo h2 {
	margin-top: 2.25em;
	font-size: clamp( 1.6rem, 2.6vw, 2.2rem );
	font-weight: 600;
	letter-spacing: -0.035em;
}

.ap-conteudo h3 { margin-top: 1.75em; }
.ap-conteudo > *:first-child { margin-top: 0; }
.ap-conteudo li { margin-bottom: 0.7rem; }
.ap-conteudo li::marker { color: var(--ap-marca); }

.ap-lista-areas { margin: 2.5rem 0 0; }
.ap-lista-areas dt {
	border-top: 1px solid var(--ap-linha);
	padding-top: 1.5rem;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}
.ap-lista-areas dd {
	margin: 0.5rem 0 1.75rem;
	color: var(--ap-texto-suave);
}

.ap-lista-posts {
	margin-top: 0;
}
.ap-post-resumo {
	display: flex;
	align-items: flex-start;
	gap: clamp(2rem, 5vw, 5rem);
	padding: clamp(2rem, 4vw, 3.5rem) 0;
	border-bottom: 1px solid var(--ap-linha);
}
.ap-post-resumo:first-child { padding-top: 0; }
.ap-post-resumo__texto { flex: 1 1 auto; min-width: 0; }
.ap-post-resumo__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.5rem;
	margin-bottom: 1rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--ap-texto-suave);
}
.ap-post-resumo__meta a { color: var(--ap-marca); text-decoration: none; }
.ap-post-resumo__meta a:hover { text-decoration: underline; }
.ap-post-resumo h2 {
	max-width: 27ch;
	margin-bottom: .75rem;
	font-size: clamp(1.65rem, 2.8vw, 2.55rem);
	line-height: 1.25;
	letter-spacing: -.04em;
}
.ap-post-resumo h2 a { color: var(--ap-texto); text-decoration: none; }
.ap-post-resumo h2 a:hover,
.ap-post-resumo h2 a:focus-visible { color: var(--ap-marca); }
.ap-post-resumo__resumo { color: var(--ap-texto-suave); font-size: 1rem; }
.ap-post-resumo__resumo p:last-child { margin-bottom: 0; }
.ap-post-resumo__imagem { flex: 0 0 30%; min-width: 0; }
.ap-post-resumo__imagem img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ap-meta { font-size: 0.85rem; color: var(--ap-texto-suave); margin: 1rem 0; }
.ap-paginacao { margin-top: 3rem; display: flex; gap: 1rem; flex-wrap: wrap; }
/* Blog em cartoes (09/10/2026). Antes, lista com a imagem a direita; o usuario
   pediu cartoes e que a foto tambem abrisse o artigo. O cartao inteiro e
   clicavel pelo ::after do link do titulo; a categoria fica por cima dessa
   camada (z-index 2) e continua levando a sua propria lista. A home ainda usa
   .ap-lista-posts/.ap-post-resumo, acima, e nao foi alterada. */
.ap-cartoes {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 1.5rem, 2.5vw, 2.25rem );
}
.ap-cartao {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--ap-fundo);
	border: 1px solid var(--ap-linha);
	border-radius: 3px;
	overflow: hidden;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.ap-cartao:hover {
	transform: translateY( -4px );
	border-color: transparent;
	box-shadow: 0 1.25rem 2.5rem rgba( var(--ap-escuro-rgb), 0.14 );
}
.ap-cartao__imagem {
	position: relative;
	aspect-ratio: 1.91 / 1; /* 0.21.2: capa inteira, na proporção em que é gerada */
	overflow: hidden;
	background: var(--ap-fundo-alt);
}
.ap-cartao__imagem img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}
.ap-cartao:hover .ap-cartao__imagem img { transform: scale( 1.04 ); }
/* Filete vermelho que cresce sob a foto no hover: o mesmo acento de marca dos
   botoes e da caixa do autor. */
.ap-cartao__imagem::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--ap-marca);
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 300ms ease;
}
.ap-cartao:hover .ap-cartao__imagem::after,
.ap-cartao:focus-within .ap-cartao__imagem::after { transform: scaleX( 1 ); }
/* Artigo sem capa: as listras da geometria das paginas internas, para o
   cartao nao ficar com um buraco branco. */
.ap-cartao__sem-imagem {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient( 115deg, var(--ap-fundo-alt) 0 45px, var(--ap-linha) 45px 47px );
}
.ap-cartao__corpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.5rem 1.5rem 1.6rem;
}
.ap-cartao__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	margin-bottom: .85rem;
	font-size: .78rem;
	font-weight: 600;
	color: var(--ap-texto-suave);
}
.ap-cartao__categoria {
	position: relative;
	z-index: 2;
}
.ap-cartao__titulo {
	margin: 0 0 .75rem;
	font-size: clamp( 1.2rem, 1.5vw, 1.4rem );
	line-height: 1.3;
	letter-spacing: -.03em;
}
.ap-cartao__link {
	color: var(--ap-texto);
	text-decoration: none;
	transition: color 180ms ease;
}
.ap-cartao__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.ap-cartao:hover .ap-cartao__link { color: var(--ap-marca); }
.ap-cartao__link:focus-visible { outline: none; }
.ap-cartao:has( .ap-cartao__link:focus-visible ) { outline: 2px solid var(--ap-marca); outline-offset: 3px; }
.ap-cartao__resumo {
	display: -webkit-box;
	margin: 0 0 1.25rem;
	overflow: hidden;
	color: var(--ap-texto-suave);
	font-size: .95rem;
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}
.ap-cartao__ler {
	margin-top: auto;
	color: var(--ap-marca);
	font-size: .85rem;
	font-weight: 600;
}
.ap-cartao__ler::after {
	content: "\2192";
	display: inline-block;
	margin-left: .4rem;
	transition: transform 220ms ease;
}
.ap-cartao:hover .ap-cartao__ler::after { transform: translateX( 4px ); }
@media (max-width: 960px) {
	.ap-cartoes { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}
@media (max-width: 600px) {
	.ap-cartoes { grid-template-columns: minmax( 0, 1fr ); gap: 1.5rem; }
	.ap-cartao__corpo { padding: 1.25rem 1.25rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-cartao,
	.ap-cartao__imagem img,
	.ap-cartao__imagem::after,
	.ap-cartao__ler::after { transition: none; }
	.ap-cartao:hover { transform: none; }
	.ap-cartao:hover .ap-cartao__imagem img { transform: none; }
}

.ap-pagina--conteudos .navigation.pagination { display: flex; justify-content: center; margin-top: clamp( 3rem, 5vw, 4.5rem ); }
.ap-pagina--conteudos .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.ap-pagina--conteudos .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: .4rem .8rem;
	border: 1px solid var(--ap-linha);
	border-radius: 3px;
	color: var(--ap-texto);
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 180ms ease, color 180ms ease;
}
.ap-pagina--conteudos .page-numbers.current { border-color: var(--ap-escuro); background: var(--ap-escuro); color: var(--ap-claro); }
.ap-pagina--conteudos .page-numbers.dots { border-color: transparent; min-width: 1.5rem; padding-inline: 0; }
.ap-pagina--conteudos a.page-numbers:hover,
.ap-pagina--conteudos a.page-numbers:focus-visible { border-color: var(--ap-marca); color: var(--ap-marca); }
@media (max-width: 600px) {
	/* No celular ficam so Anterior, a pagina atual e Proxima, para a linha nao
	   quebrar em duas. */
	.ap-pagina--conteudos .page-numbers:not(.current):not(.prev):not(.next) { display: none; }
}

/* Busca e filtro por assunto (09/10/2026): acima da grade do blog e na
   lateral do artigo. Os assuntos sao as categorias com artigo publicado. */
.ap-blog-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin: 0 0 clamp( 2rem, 3.5vw, 3rem );
}
.ap-blog-filtros .ap-assuntos { flex: 1 1 30rem; }
.ap-blog-filtros .ap-busca { flex: 0 1 20rem; }
.ap-blog-contagem { margin: -.75rem 0 2rem; color: var(--ap-texto-suave); font-size: .9rem; }
.ap-blog-vazio a { font-weight: 600; }
.ap-assuntos ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ap-assuntos li { margin: 0; }

/* Etiquetas de assunto (09/10/2026): uma cor por area de atuacao, a mesma no
   filtro do blog, na lateral do artigo e no cartao. Fundo claro com texto na
   cor forte (contraste acima de 4,5:1 em todas); no hover e na etiqueta
   aberta, o inverso. A cor sai do slug da categoria, em
   alvesportes_cores_assuntos() (inc/blog.php); categoria fora das areas fica
   no cinza de --outro. */
.ap-etiqueta {
	--etq-fundo: #ececf1;
	--etq-forte: #4f4f5e;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .3rem .75rem;
	border-radius: 999px;
	background: var(--etq-fundo);
	color: var(--etq-forte);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 180ms ease, color 180ms ease;
}
a.ap-etiqueta:hover,
a.ap-etiqueta:focus-visible,
.ap-etiqueta.is-atual { background: var(--etq-forte); color: #fff; }
.ap-etiqueta--familia    { --etq-fundo: #fbe8eb; --etq-forte: #a50c25; }
.ap-etiqueta--civil      { --etq-fundo: #e5ecf6; --etq-forte: #2b4c7e; }
.ap-etiqueta--contratual { --etq-fundo: #e2f1ed; --etq-forte: #1d5e4f; }
.ap-etiqueta--consumidor { --etq-fundo: #fbefd9; --etq-forte: #865600; }
.ap-etiqueta--todos      { --etq-fundo: var(--ap-fundo-alt); --etq-forte: var(--ap-escuro); }
.ap-etiqueta__total { font-variant-numeric: tabular-nums; opacity: .7; }
.ap-assuntos--linha .ap-etiqueta { padding: .45rem .95rem; font-size: .8rem; }
/* Na lateral, uma por linha e todas da mesma largura, com o numero de artigos. */
.ap-assuntos--lista ul { flex-direction: column; gap: .4rem; }
.ap-assuntos--lista .ap-etiqueta { display: flex; width: 100%; padding: .55rem .9rem; border-radius: .4rem; font-size: .82rem; }
.ap-busca { position: relative; display: flex; width: 100%; }
.ap-busca__campo {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.75rem;
	padding: .6rem 3rem .6rem 1rem;
	border: 1px solid var(--ap-linha);
	border-radius: .4rem;
	background: var(--ap-fundo);
	color: var(--ap-texto);
	font: inherit;
	font-size: .92rem;
	-webkit-appearance: none;
	appearance: none;
}
.ap-busca__campo::placeholder { color: var(--ap-texto-suave); opacity: 1; }
.ap-busca__campo:focus { outline: none; border-color: var(--ap-escuro); box-shadow: 0 0 0 3px rgba( var(--ap-escuro-rgb), .12 ); }
.ap-busca__botao {
	position: absolute;
	top: 50%;
	right: .3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: .3rem;
	background: transparent;
	color: var(--ap-texto-suave);
	cursor: pointer;
	transform: translateY( -50% );
}
.ap-busca__botao:hover,
.ap-busca__botao:focus-visible { color: var(--ap-marca); }
@media (max-width: 600px) {
	.ap-blog-filtros .ap-busca { order: -1; flex-basis: 100%; }
	.ap-blog-filtros .ap-assuntos { flex-basis: 100%; }
}

/* Artigo com lateral (09/10/2026). A lateral tem busca e assuntos no topo e,
   fixos enquanto se rola o texto, o indice "Neste artigo" e a chamada de
   contato. Abaixo de 1024 px vira uma coluna so: o indice aparece recolhivel
   antes do texto e a lateral desce para depois dele, com a chamada primeiro. */
.ap-artigo__grade {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 17.5rem;
	gap: clamp( 2.5rem, 4vw, 4.5rem );
	align-items: start;
}
.ap-artigo__principal { min-width: 0; }
.ap-artigo__lateral { display: flex; flex-direction: column; gap: 2rem; align-self: stretch; min-width: 0; }
.ap-lateral__rotulo {
	margin: 0 0 .75rem;
	color: var(--ap-texto-suave);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
/* Artigos recentes (12/10/2026): os cinco ultimos, com miniatura da capa,
   titulo e data, separados por filete. Ultimo bloco da lateral. */
.ap-recentes__lista { margin: 0; padding: 0; list-style: none; }
.ap-recentes__lista li { padding: .7rem 0; border-top: 1px solid var(--ap-linha); }
.ap-recentes__lista li:first-child { padding-top: 0; border-top: 0; }
.ap-recentes__lista a {
	display: flex;
	align-items: center;
	gap: .75rem;
	color: var(--ap-texto);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: color 180ms ease;
}
.ap-recentes__lista a:hover,
.ap-recentes__lista a:focus-visible { color: var(--ap-marca); }
.ap-recentes__lista time { display: block; margin-top: .2rem; color: var(--ap-texto-suave); font-size: .75rem; }
/* Miniatura da capa: retangulo baixo, da altura de um titulo de duas linhas,
   (12/10/2026). */
.ap-recentes__capa {
	flex: 0 0 3.5rem;
	width: 3.5rem;
	height: 1.83rem; /* 0.21.2: 1.91:1, como a capa */
	border-radius: 3px;
	object-fit: cover;
	background: var(--ap-fundo-alt);
}
.ap-recentes__texto { min-width: 0; }
.ap-recentes__titulo { display: block; }
/* Nada na lateral fica fixo: ela rola inteira com a pagina (pedido do
   usuario, 12/10/2026; antes o indice e a chamada acompanhavam a leitura). */
.ap-indice__lista { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--ap-linha); }
.ap-indice__lista li { margin: 0; }
.ap-indice__lista a {
	display: block;
	margin-left: -1px;
	padding: .4rem 0 .4rem 1rem;
	border-left: 2px solid transparent;
	color: var(--ap-texto-suave);
	font-size: .88rem;
	line-height: 1.45;
	text-decoration: none;
	transition: color 180ms ease, border-color 180ms ease;
}
.ap-indice__lista a:hover { color: var(--ap-texto); }
.ap-indice--celular { display: none; }
.ap-chamada {
	padding: 1.5rem;
	border-top: 3px solid var(--ap-marca);
	border-radius: 3px;
	background: var(--ap-escuro);
	color: var(--ap-claro);
}
.ap-chamada__titulo { margin: 0 0 .5rem; color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; }
.ap-chamada__texto { margin: 0 0 1.25rem; color: rgba( var(--ap-claro-rgb), .82 ); font-size: .88rem; line-height: 1.6; }
.ap-chamada__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: .6rem 1rem;
	border-radius: .4rem;
	background: var(--ap-marca);
	color: #fff;
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 180ms ease;
}
.ap-chamada__botao:hover,
.ap-chamada__botao:focus-visible { background: var(--ap-marca-escura); color: #fff; }
.ap-chamada__whatsapp {
	display: block;
	margin-top: .85rem;
	color: var(--ap-claro);
	font-size: .85rem;
	font-weight: 600;
	text-align: center;
	text-underline-offset: .25em;
}
.ap-chamada__whatsapp:hover,
.ap-chamada__whatsapp:focus-visible { color: #fff; }
.ap-relacionados {
	margin-top: clamp( 3.5rem, 6vw, 5.5rem );
	padding-top: clamp( 2.5rem, 4vw, 3.5rem );
	border-top: 1px solid var(--ap-linha);
}
.ap-relacionados h2 {
	margin: 0 0 2rem;
	font-size: clamp( 1.6rem, 2.6vw, 2.2rem );
	font-weight: 600;
	letter-spacing: -.035em;
}
.ap-relacionados + .ap-artigo__voltar { border-top: 0; padding-top: 0; }
@media (max-width: 1024px) {
	.ap-artigo__grade { grid-template-columns: minmax( 0, 1fr ); gap: 0; }
	.ap-artigo__lateral { margin-top: 3rem; }
	.ap-indice--lateral { display: none; }
	.ap-chamada { order: -1; }
	.ap-indice--celular {
		display: block;
		max-width: 52rem;
		margin: 0 0 2.5rem;
		border: 1px solid var(--ap-linha);
		border-radius: 3px;
		background: var(--ap-fundo-alt);
	}
	.ap-indice--celular summary { padding: .9rem 1.1rem; font-size: .9rem; font-weight: 600; cursor: pointer; }
	.ap-indice--celular .ap-indice__lista { margin: 0 1.1rem 1.1rem; }
}

.ap-pagina--artigo .ap-pagina__titulo { max-width: 72rem; }
.ap-pagina--artigo .ap-pagina__titulo h1 { max-width: 28ch; }
.ap-artigo__imagem { max-width: 52rem; margin: 0 0 clamp(2rem, 4vw, 3.5rem); }
.ap-artigo__imagem img { display: block; width: 100%; height: auto; max-height: 36rem; object-fit: contain; object-position: left center; }
.ap-pagina--artigo .ap-conteudo :is(.wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-table) { margin-block: 2rem; }
.ap-pagina--artigo .ap-conteudo figure { max-width: 100%; }
.ap-pagina--artigo .ap-conteudo figcaption { margin-top: .5rem; color: var(--ap-texto-suave); font-size: .82rem; line-height: 1.5; }
.ap-pagina--artigo .ap-conteudo .wp-block-quote { margin: 2.5rem 0; padding: .25rem 0 .25rem 1.5rem; border-left: 3px solid var(--ap-marca); }
.ap-pagina--artigo .ap-conteudo .wp-block-quote p { font-size: 1.15em; line-height: 1.6; }
.ap-pagina--artigo .ap-conteudo .wp-block-separator { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--ap-linha); }
.ap-pagina--artigo .ap-conteudo .wp-block-table { overflow-x: auto; }
.ap-pagina--artigo .ap-conteudo .wp-block-table table { width: 100%; border-collapse: collapse; }
.ap-pagina--artigo .ap-conteudo .wp-block-table :is(th, td) { padding: .7rem; border: 1px solid var(--ap-linha); text-align: left; }
.ap-pagina--artigo .ap-conteudo .wp-block-columns > * { min-width: 0; }
.ap-autor { display: flex; gap: 1.25rem; align-items: center; max-width: 46rem; margin-top: 3rem; padding: 1.5rem; background: var(--ap-fundo-alt); border-left: 3px solid var(--ap-marca); }
/* Sem pointer-events, o clique direito na foto abre o menu da pagina, e nao o de "Salvar imagem"
   (pedido do usuario, 07/10/2026). As fotos da abertura da home ja herdam o mesmo bloqueio. */
.ap-autor__foto { flex: 0 0 auto; pointer-events: none; -webkit-user-select: none; user-select: none; }
.ap-autor__foto img { display: block; width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; -webkit-user-drag: none; }
.ap-autor__texto p { margin: 0; }
.ap-autor__rotulo { color: var(--ap-texto-suave); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ap-autor__nome { margin-top: .25rem !important; color: var(--ap-escuro); font-size: 1.1rem; font-weight: 700; }
.ap-autor__oab { color: var(--ap-texto-suave); font-size: .9rem; }
@media (max-width: 520px) {
	.ap-autor { flex-direction: column; gap: 1rem; }
}
.ap-artigo__voltar { display: inline-block; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--ap-linha); font-size: .9rem; font-weight: 600; }

@media (max-width: 720px) {
	.ap-post-resumo { display: block; }
	.ap-post-resumo__imagem { margin-top: 1.5rem; }
	.ap-post-resumo__imagem img { max-height: 18rem; }
}

.ap-pagina .ap-botao,
.ap-contato__enviar {
	font-family: var(--ap-fonte-texto);
	font-size: 0.92rem;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 600;
	min-height: 3.25rem;
	transition: background-color 180ms ease, border-color 180ms ease;
}

/* ==========================================================================
   9.1 CANAIS E FORMULARIO COMPARTILHADO
   ========================================================================== */

.ap-contato__abertura {
	padding: clamp( 3.5rem, 6vw, 6rem ) 0 clamp( 3rem, 5vw, 5rem );
	max-width: 60rem;
}

.ap-contato__secao {
	color: var(--ap-marca);
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
}

.ap-contato__abertura h1 {
	max-width: 20ch;
	font-size: clamp( 2.75rem, 4.8vw, 4.8rem );
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 1.1;
	margin-bottom: 1.5rem;
	text-wrap: pretty;
}

.ap-contato__abertura > p:last-child {
	max-width: 58ch;
	color: var(--ap-texto-suave);
	font-size: clamp( 1rem, 1.25vw, 1.15rem );
	line-height: 1.8;
	margin-bottom: 0;
}

.ap-contato__area { padding: 0 0 clamp( 4rem, 7vw, 7rem ); }

.ap-contato__grade {
	display: grid;
	grid-template-columns: minmax( 0, 0.8fr ) minmax( 0, 1.2fr );
	gap: clamp( 2rem, 5vw, 5rem );
	align-items: start;
}

.ap-contato__canais {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp( 2rem, 3.5vw, 4rem );
	padding-bottom: 5rem;
	background: repeating-linear-gradient( 115deg, var(--ap-escuro) 0 64px, var(--ap-escuro-forte) 64px 70px );
	border-radius: 3px;
	color: var(--ap-claro);
}

.ap-contato__canais > :not(.ap-geometria) {
	position: relative;
	z-index: 1;
}

.ap-geometria--canais {
	right: -4rem;
	bottom: -9rem;
	width: 13rem;
	height: 12rem;
}

.ap-contato__canais h2 {
	color: var(--ap-claro);
	font-size: clamp( 1.65rem, 2.3vw, 2.5rem );
	font-weight: 550;
	letter-spacing: -0.035em;
	max-width: 18ch;
}

.ap-contato__canais > p:not(.ap-contato__horario) {
	color: rgba( var(--ap-claro-rgb), 0.8 );
	max-width: 30ch;
	font-size: 0.96rem;
}

.ap-contato__lista { margin: 2.5rem 0 0; }
.ap-contato__lista > div { border-top: 1px solid rgba( var(--ap-claro-rgb), 0.22 ); padding: 1.25rem 0; }
.ap-contato__lista dt { font-size: 0.82rem; font-weight: 500; color: rgba( var(--ap-claro-rgb), 0.78 ); }
.ap-contato__lista dd { margin: 0.35rem 0 0; font-size: clamp( 1rem, 1.2vw, 1.15rem ); font-weight: 500; overflow-wrap: anywhere; }
.ap-contato__lista a { color: var(--ap-claro); text-underline-offset: 0.3em; }
.ap-contato__horario { border-top: 1px solid rgba( var(--ap-claro-rgb), 0.22 ); padding-top: 1.5rem; font-size: 0.85rem; margin: 1rem 0 0; }

.ap-contato__formulario { padding: 0.5rem 0 0; }
.ap-contato__formulario-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.75rem; }
.ap-contato__formulario-cabecalho h2 { font-size: clamp( 1.45rem, 2vw, 2rem ); font-weight: 600; letter-spacing: -0.035em; margin-bottom: 0.4rem; }
.ap-contato__formulario-cabecalho p { color: var(--ap-texto-suave); margin: 0; font-size: 0.95rem; }
.ap-contato__estado { flex: none; font-size: 0.72rem; font-weight: 600; color: var(--ap-marca); border: 1px solid currentColor; border-radius: 0.25rem; padding: 0.35rem 0.6rem; }

.ap-contato__aviso,
.ap-contato__retorno {
	background: var(--ap-fundo-alt);
	border-left: 3px solid var(--ap-marca);
	padding: 0.9rem 1rem;
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 1.5rem 0;
}
.ap-contato__retorno { font-weight: 600; }
.ap-contato__retorno[hidden] { display: none; }
/* Retorno do envio: verde no sucesso, vermelho no erro (13/10/2026). */
.ap-contato__retorno--sucesso { background: #e7f4ec; border-left-color: #1e7b45; color: #145a32; }
.ap-contato__retorno--erro { background: #fdecee; border-left-color: var(--ap-marca); color: #8f0b22; }
.ap-contato__antispam { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ap-contato__campos { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 1.4rem 1.25rem; }
.ap-contato__campo--inteiro { grid-column: 1 / -1; }
.ap-contato__campo label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.5rem; }

.ap-contato__campo input,
.ap-contato__campo select,
.ap-contato__campo textarea {
	width: 100%;
	min-height: 3.4rem;
	background: var(--ap-fundo);
	border: 1px solid var(--ap-linha);
	border-radius: 0.4rem;
	color: var(--ap-texto);
	font: inherit;
	font-size: 1rem;
	padding: 0.85rem 1rem;
	opacity: 1;
	transition: border-color 160ms ease;
}
.ap-contato__campo textarea { min-height: 10rem; resize: vertical; }
.ap-contato__campo input:hover,
.ap-contato__campo select:hover,
.ap-contato__campo textarea:hover { border-color: var(--ap-texto-suave); }
.ap-contato__campo input:focus,
.ap-contato__campo select:focus,
.ap-contato__campo textarea:focus { border-color: var(--ap-marca); outline: 2px solid var(--ap-marca); outline-offset: 2px; }
.ap-contato__campo input::placeholder,
.ap-contato__campo textarea::placeholder { color: var(--ap-texto-suave); opacity: 0.85; }
.ap-contato__privacidade { font-size: 0.8rem; color: var(--ap-texto-suave); line-height: 1.7; margin: 1.2rem 0 1.5rem; }
.ap-contato__enviar { cursor: pointer; }
.ap-contato__enviar:active { transform: translateY( 1px ); }
.ap-contato__enviar:disabled { opacity: 0.55; cursor: not-allowed; }
.ap-contato__alternativa { font-size: 0.82rem; color: var(--ap-texto-suave); margin: 1.25rem 0 0; overflow-wrap: anywhere; }

/* ==========================================================================
   10. RODAPE — assinatura da marca acima das informacoes de navegacao
   ========================================================================== */

.ap-rodape {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		linear-gradient( 90deg, var(--ap-escuro) 50%, transparent ),
		repeating-linear-gradient( 115deg, var(--ap-escuro) 0 80px, var(--ap-escuro-forte) 80px 84px );
	color: var(--ap-claro);
	padding: clamp( 3rem, 5vw, 5rem ) 0 2rem;
	font-size: 0.9rem;
}

.ap-rodape > .ap-container { position: relative; z-index: 1; }
.ap-geometria--rodape { top: -5rem; right: -10rem; width: 16rem; height: 24rem; }
.ap-geometria--rodape .ap-geometria__plano { transform: skewX( -25deg ); }
.ap-geometria--rodape .ap-geometria__linha { inset: 12% 30% 0 0; transform: skewX( -25deg ); }
.ap-rodape a { color: var(--ap-claro); text-decoration: none; text-underline-offset: 0.3em; }
.ap-rodape a:hover,
.ap-rodape a:focus-visible { text-decoration: underline; }
.ap-rodape a:focus-visible { outline-color: var(--ap-claro); }
.ap-rodape h2 { color: var(--ap-claro); font-size: 0.95rem; font-weight: 600; margin-bottom: 1.25rem; }
.ap-rodape__grade { display: grid; grid-template-columns: 1.25fr 1fr 0.75fr; gap: 2.5rem 4rem; }
.ap-rodape__identidade { grid-column: 1 / -1; display: flex; align-items: center; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba( var(--ap-claro-rgb), 0.2 ); }
.ap-rodape__identidade .ap-rodape__marca { margin: 0; }
.ap-rodape__identidade .ap-rodape__marca img { display: block; height: clamp( 1.25rem, 2vw, 1.8rem ); width: auto; }
.ap-rodape__endereco { font-style: normal; line-height: 1.7; }
.ap-rodape__grade ul { list-style: none; margin: 0; padding: 0; }
.ap-rodape__grade li { margin-bottom: 0.7rem; }
.ap-rodape__grade a { overflow-wrap: anywhere; }
.ap-rodape__contatos .ap-rodape__contato-item {
	display: grid;
	grid-template-columns: 1.35rem minmax(0, 1fr);
	align-items: start;
	gap: .8rem;
	margin-bottom: .8rem;
}
.ap-rodape__icone { width: 1.35rem; height: 1.35rem; margin-top: .1rem; color: var(--ap-claro); }
.ap-rodape__whatsapp {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1.35rem minmax(0, 1fr);
	align-items: center;
	gap: .8rem;
	width: fit-content;
	max-width: 100%;
}
.ap-rodape__base { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba( var(--ap-claro-rgb), 0.2 ); display: flex; gap: 1rem 3rem; justify-content: space-between; font-size: 0.75rem; line-height: 1.7; color: rgba( var(--ap-claro-rgb), 0.8 ); }
.ap-rodape__base p { margin: 0; }
.ap-rodape__base p:last-child { max-width: 68ch; }

/* Ajustes das secoes de conteudo. A abertura possui regras proprias abaixo. */
@media (max-width: 1000px) {
	.ap-area { grid-template-columns: minmax( 8rem, 0.55fr ) minmax( 0, 1.8fr ); gap: 1rem 2rem; }
	.ap-area__chamada { grid-column: 2; justify-self: start; max-width: none; }
	.ap-conducao__intro { min-height: 9rem; }
	.ap-geometria--conducao { width: 12rem; height: 10rem; right: 0.5rem; top: -0.5rem; }
	.ap-conducao__etapas { column-gap: 2.5rem; }
	.ap-conducao__etapa { grid-template-columns: 2.6rem minmax( 0, 1fr ); gap: 1rem; }
	.ap-conducao__numero { width: 2.6rem; height: 2.6rem; font-size: 1rem; }
	.ap-home-contato__grade { grid-template-columns: 1fr; }
	.ap-contato__grade { grid-template-columns: 1fr; gap: 3rem; }
	.ap-home-contato__intro { min-height: 22rem; padding-right: 42%; padding-bottom: 3rem; }
	.ap-geometria--contato { bottom: -4rem; right: -1rem; width: 40%; height: 26rem; }
	.ap-home-contato__intro h2 { max-width: 20ch; }
	.ap-home-contato__intro > p:not(.ap-home-contato__rotulo) { max-width: 52ch; }
	.ap-contato__canais h2 { max-width: 25ch; }
	.ap-contato__canais > p:not(.ap-contato__horario) { max-width: none; }
	.ap-rodape__grade { gap: 2.5rem; }
}

@media (max-width: 700px) {
	.ap-areas__intro { min-height: 10rem; padding: 2rem 1.5rem; margin-bottom: 1rem; }
	.ap-areas__intro h2 { max-width: 68%; font-size: clamp( 2rem, 7.6vw, 2.7rem ); }
	.ap-geometria--areas { width: 30%; right: 0; }
	.ap-area { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding: 1.75rem 0; }
	.ap-area__rotulo, .ap-area__conteudo, .ap-area__chamada { min-width: 0; overflow-wrap: anywhere; }
	.ap-area__rotulo { padding-top: 0; font-size: 0.85rem; }
	.ap-area__chamada { grid-column: auto; margin-top: 0.35rem; }
	.ap-conducao__intro { min-height: 0; padding: 4rem 0 0; }
	.ap-geometria--conducao { top: -1.5rem; right: -0.5rem; width: 7rem; height: 5rem; }
	.ap-conducao__etapas { grid-template-columns: 1fr; gap: 2.5rem; }
	.ap-conducao__etapa p { max-width: none; }
	.ap-home-contato__grade { width: calc( 100% - 2rem ); }
	.ap-home-contato__intro { padding: 2rem 1.5rem 12rem; }
	.ap-home-contato .ap-contato__formulario { padding: 2rem 1.5rem; }
	.ap-geometria--contato { bottom: -4rem; right: -1rem; width: 76%; height: 14rem; }
	.ap-pagina__titulo { padding-right: 1rem; }
	.ap-geometria--interna { right: -4rem; width: 6rem; }
	.ap-contato__campos { grid-template-columns: 1fr; }
	.ap-contato__formulario-cabecalho { flex-direction: column; gap: 0.8rem; }
	.ap-contato__formulario-cabecalho > div { min-width: 0; overflow-wrap: anywhere; }
	.ap-rodape__grade { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
	.ap-rodape__identidade { flex-direction: column; align-items: flex-start; }
	.ap-rodape__grade > div:nth-child(2) { grid-column: 1 / -1; }
	.ap-rodape__base { flex-direction: column; gap: 1rem; }
	.ap-geometria--rodape { right: -19rem; opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
	.ap-area::before,
	.ap-area h3,
	.ap-pagina .ap-botao,
	.ap-contato__enviar,
	.ap-contato__campo input,
	.ap-contato__campo select,
	.ap-contato__campo textarea { transition: none; }
}

/* Marcador de dado ainda nao fornecido pelo cliente. Some do site publicado
   assim que o texto real substituir o marcador; enquanto existir, fica
   visivelmente destacado para nao passar batido. */
.ap-preencher {
	background: #ffe9a8;
	color: #4a3b00;
	padding: 0.1em 0.45em;
	border-radius: var(--ap-raio);
	font-family: var(--ap-fonte-texto);
	font-size: 0.85em;
	font-weight: 600;
	/* Sem 'nowrap': marcador em titulo grande estourava a largura no celular. */
	overflow-wrap: anywhere;
}

.ap-rodape .ap-preencher {
	background: rgba(255, 233, 168, 0.9);
}

/* ==========================================================================
   11. RESPONSIVO
   ========================================================================== */

/* Reflow comum a todas as p?ginas. N?o esconder overflow da p?gina:
   campos, textos e grades precisam caber de verdade no espa?o dispon?vel. */
:root { --ap-margem-ancora: 6rem; }
html { scroll-padding-top: var(--ap-margem-ancora); }
body { overflow-wrap: break-word; }
.ap-container > *,
.ap-rodape__grade > *,
.ap-contato__campos > *,
.ap-home-contato__grade > * { min-width: 0; }
.ap-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-height: 2.75rem;
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
}
.ap-menu a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ap-menu { padding-block: .875rem; }
.ap-contato__campo input,
.ap-contato__campo select,
.ap-contato__campo textarea { min-width: 0; max-width: 100%; font-size: 1rem; }
.ap-contato__campo input,
.ap-contato__campo select { min-height: 3rem; }
.ap-contato__enviar:active { transform: none; }
.ap-rodape__identidade .ap-rodape__marca { max-width: 100%; }
.ap-rodape__identidade .ap-rodape__marca img { width: clamp(15rem, 25vw, 22.86rem); max-width: 100%; height: auto; }
.ap-conteudo { overflow-wrap: anywhere; }
.ap-conteudo :is(img, video, iframe) { max-width: 100%; }
.ap-conteudo pre { max-width: 100%; overflow-x: auto; }
.ap-abertura__titulo { font-size: clamp(2rem, 3.2vw, 3.6rem); }

@media (max-width: 1100px) {
	.ap-cabecalho__interno { gap: 1rem; padding-right: 1rem; }
	.ap-menu ul { gap: .75rem 1.25rem; }
	.ap-cabecalho .ap-marca { --ap-marca-altura: 1rem; padding-inline: 1.25rem; }
}

/* Abaixo de 960px o cabe?alho entra no fluxo e o hero vira duas linhas.
   N?o h? reserva baseada em vh acima dos retratos ou do texto. */
@media (max-width: 960px) {
	:root { --ap-margem-ancora: 1rem; }
	.ap-cabecalho { position: relative; inset: auto; background: var(--ap-escuro); }
	.ap-menu a { font-size: .8125rem; letter-spacing: .07em; }
	.ap-destaques__grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; }
	.ap-destaque { grid-row: auto; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: auto; gap: 1.5rem; padding: 1.5rem 0; }
	.ap-abertura {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
		min-height: 0;
		padding: 2.5rem 1.5rem 0;
	}
	.ap-abertura__interno { grid-column: 1; grid-row: 1; padding: 0; width: 100%; max-width: 42rem; margin-inline: auto; }
	.ap-abertura__titulo { font-size: clamp(1.9rem, 4.2vw, 2.75rem); }
	.ap-abertura__figuras { grid-column: 1; grid-row: 2; width: 100%; max-width: 36rem; justify-self: center; }
	.ap-abertura::after { height: 5rem; }
	.ap-abertura__cenario { mask-image: none; -webkit-mask-image: none; background-image: linear-gradient(180deg, var(--ap-escuro) 0%, transparent 65%), repeating-linear-gradient(115deg, var(--ap-escuro) 0 64px, var(--ap-escuro-forte) 64px 70px); }
	.ap-abertura__cenario::after { right: 12%; bottom: -8%; height: 53%; width: 32%; min-width: 8rem; box-shadow: none; }
	.ap-areas,
	.ap-home-contato { scroll-margin-top: 1rem; }
}

/* Entre 601px e 782px a barra do WordPress e fixa e tem 46px. Abaixo de 601px
   ela rola com a pagina, e deslocar o cabecalho abriria uma faixa vazia no
   topo. Ver a explicacao completa na secao do cabecalho, acima. */
@media screen and (min-width: 601px) and (max-width: 720px) {
	body.admin-bar .ap-cabecalho--menu-pronto { top: 46px; }
}

@media (max-width: 720px) {
	:root { --ap-espaco-secao: 3.5rem; --ap-margem-ancora: 3.75rem; }
	.ap-cabecalho { background: var(--ap-marca); box-shadow: none; }
	.ap-cabecalho--menu-pronto { position: sticky; top: 0; transition: transform .22s ease; }
	.ap-cabecalho--menu-pronto.ap-cabecalho--oculto { transform: translateY(-100%); pointer-events: none; }
	.ap-cabecalho--menu-pronto.ap-cabecalho--oculto:focus-within { transform: none; pointer-events: auto; }
	.ap-cabecalho__interno { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0; width: 100%; padding: 0; background: var(--ap-marca); }
	.ap-cabecalho .ap-marca,
	.ap-cabecalho .ap-marca__custom { min-width: 0; min-height: 3.75rem; --ap-marca-altura: .98rem; padding-inline: 1.25rem; }
	.ap-cabecalho .ap-marca__logo { max-width: 100%; }
	.ap-menu-botao:not([hidden]) { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin-right: .5rem; padding: 0; border: 0; border-radius: .25rem; background: transparent; color: #fff; cursor: pointer; }
	.ap-menu-botao:hover,
	.ap-menu-botao:focus-visible { background: rgba(255, 255, 255, .14); }
	.ap-menu-botao:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
	.ap-menu-botao__tracos { display: grid; gap: 5px; }
	.ap-menu-botao__tracos span { display: block; width: 23px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
	.ap-cabecalho--menu-aberto .ap-menu-botao__tracos span:first-child { transform: translateY(7px) rotate(45deg); }
	.ap-cabecalho--menu-aberto .ap-menu-botao__tracos span:nth-child(2) { opacity: 0; }
	.ap-cabecalho--menu-aberto .ap-menu-botao__tracos span:last-child { transform: translateY(-7px) rotate(-45deg); }
	.ap-menu { grid-column: 1 / -1; width: 100%; padding: .5rem 1.25rem .75rem; background: var(--ap-escuro); }
	.ap-cabecalho--menu-pronto .ap-menu { display: none; }
	.ap-cabecalho--menu-aberto .ap-menu { display: block; }
	.ap-menu ul { display: block; }
	.ap-menu li + li { border-top: 1px solid rgba(var(--ap-claro-rgb), .16); }
	.ap-menu a { display: flex; width: 100%; min-height: 3.25rem; font-size: .84rem; letter-spacing: .055em; }
	.ap-menu .sub-menu { padding-left: 1rem; }
	.ap-abertura { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 2.25rem 0 0; }
	.ap-abertura__interno { order: 1; width: 100%; max-width: 38rem; margin-inline: auto; padding: 0 1.25rem; }
	.ap-abertura__titulo { max-width: 24ch; font-size: clamp(2rem, 5.5vw, 2.6rem); line-height: 1.12; }
	.ap-abertura__texto { max-width: 42ch; margin-bottom: 1.35rem; }
	.ap-abertura__figuras { order: 2; align-self: center; width: min(100%, 32rem); max-width: none; margin-top: 1.7rem; aspect-ratio: 1.52; }
	.ap-abertura__figuras::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		background-image:
			repeating-linear-gradient(115deg, transparent 0 55px, rgba(200, 16, 46, .08) 55px 57px, transparent 57px 140px),
			repeating-linear-gradient(115deg, transparent 0 64px, rgba(0, 0, 0, .2) 64px 70px, transparent 70px 140px);
		mask-image: linear-gradient(180deg, transparent, #000 24%);
		-webkit-mask-image: linear-gradient(180deg, transparent, #000 24%);
	}
	.ap-abertura__cenario { background: linear-gradient(180deg, var(--ap-escuro) 0%, var(--ap-escuro-forte) 100%); }
	.ap-abertura__cenario::after { display: none; }
	.ap-abertura::after { height: 3.5rem; }
	.ap-destaques { padding-block: 2.5rem 2.75rem; }
	.ap-destaque { display: block; padding: 1.35rem 0 1.5rem; }
	.ap-destaque h2 { margin-bottom: .75rem; font-size: 1.2rem; }
	.ap-destaque:first-child h2 { max-width: 22ch; font-size: clamp(1.55rem, 5vw, 2rem); }
	.ap-destaque p { font-size: .94rem; }
	.ap-areas, .ap-conducao, .ap-home-contato { padding-block: 3.25rem; }
	.ap-home-contato__intro { min-height: 0; padding-bottom: 6rem; }
	.ap-geometria--contato { height: 8rem; }
	.ap-rodape__grade { gap: 2rem 1.5rem; }
}

@media (max-width: 480px) {
	.ap-container { padding-inline: 1rem; }
	.ap-abertura { padding: 2rem 0 0; }
	.ap-abertura__interno { padding-inline: 1.25rem; }
	.ap-abertura__olho { letter-spacing: .12em; margin-bottom: .6rem; }
	.ap-abertura__titulo { font-size: clamp(1.9rem, 7.3vw, 2.2rem); line-height: 1.12; margin-bottom: .7rem; }
	.ap-abertura__texto { font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; }
	.ap-abertura .ap-acoes, .ap-abertura .ap-botao { width: 100%; }
	.ap-abertura__figuras { margin-top: 1.4rem; }
	.ap-botao { padding-inline: 1.15rem; }
	.ap-home-contato .ap-contato__formulario,
	.ap-home-contato__intro { padding-inline: 1.25rem; }
	.ap-home-contato__intro { padding-bottom: 5rem; }
	.ap-areas__intro { padding-inline: 1.25rem; }
	.ap-areas__intro h2 { max-width: 75%; font-size: clamp(1.8rem, 8vw, 2.35rem); }
	.ap-geometria--areas { right: -10%; }
	.ap-pagina { padding-block: 2.5rem 3.5rem; }
	.ap-pagina__titulo { margin-bottom: 2rem; }
	.ap-rodape__grade { grid-template-columns: minmax(0, 1fr); }
	.ap-rodape__identidade,
	.ap-rodape__grade > div:nth-child(2) { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ap-cabecalho--menu-pronto { transition: none; }
}

@media print {
	.ap-cabecalho,
	.ap-rodape,
	.ap-acoes {
		display: none;
	}

	.ap-abertura {
		display: block;
		min-height: 0;
		padding: 0 0 2rem;
	}

	.ap-abertura__cenario,
	.ap-abertura__figuras {
		display: none;
	}

	.ap-abertura__titulo,
	.ap-abertura__texto {
		color: #000000;
	}
}