/**
 * Componentes compartilhados pelos DOIS sites.
 *
 * FONTE DA VERDADE: shared/css/componentes.css
 * As copias em wp-content/themes/<tema>/assets/css/ sao geradas por `npm run sync`.
 * Nao editar as copias — elas sao sobrescritas.
 *
 * O que e especifico de um site vai para shared/css/tema-<slug>.css.
 *
 * Carrosseis usam scroll-snap nativo — sem biblioteca. As setas sao
 * progressive enhancement: sem JS a pessoa arrasta ou navega por teclado,
 * porque o trilho tem tabindex e overflow.
 */

/* =============================================================== *
 * Hero com slider
 * =============================================================== */

.al-hero {
	position: relative;
	display: flex;
	/* Conteudo centralizado na vertical, nao ancorado embaixo. */
	align-items: center;
	/*
	 * Altura de tela cheia.
	 *
	 * As duas declaracoes sao de proposito: quem nao conhece `svh` fica com
	 * `vh` e quem conhece usa a segunda. E `svh` (small viewport height) e nao
	 * `vh` porque no celular `100vh` mede a tela COM as barras do navegador
	 * escondidas — a barra de endereco visivel come uns 60-90px e o hero passa a
	 * ser mais alto que a area util, empurrando o CTA para fora da tela.
	 *
	 * `min-height`, nao `height`: se o texto de um dos sites crescer (ou a fonte
	 * do sistema for maior), o hero cresce em vez de cortar o conteudo.
	 */
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	isolation: isolate;
	color: var( --al-white );
}

/* --------------------------------------------------------------- *
 * Slider de fundo
 * --------------------------------------------------------------- */

.al-hero__slider {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.al-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}

.al-hero__slide.is-ativa {
	opacity: 1;
}

/*
 * Sem JS, a primeira foto fica visivel e as outras nunca aparecem — o hero
 * continua correto, so nao gira. Por isso a primeira ja nasce com `is-ativa`
 * no HTML, e nao por script.
 */

@media ( prefers-reduced-motion: reduce ) {
	.al-hero__slide {
		transition: none;
	}
}

/*
 * Aproximacao lenta na foto ativa.
 *
 * So para cima (1 -> 1.06): escala menor que 1 encolheria a imagem e mostraria
 * a borda do contêiner. A animacao reinicia sozinha a cada troca, porque quem
 * dispara e a classe `is-ativa` entrando no elemento — nao precisa saber quanto
 * dura o intervalo do slider (que e configuravel por atributo do bloco).
 *
 * `forwards` e obrigatorio: sem ele a foto volta ao tamanho original de um
 * quadro para o outro no fim da animacao, e o corte salta na tela.
 */
@media ( prefers-reduced-motion: no-preference ) {
	.al-hero__slide.is-ativa {
		animation: al-hero-aproxima 9s ease-out forwards;
	}

	@keyframes al-hero-aproxima {
		from { transform: scale( 1 ); }
		to   { transform: scale( 1.06 ); }
	}
}

/* --------------------------------------------------------------- *
 * Sobreposicao
 *
 * Duas camadas, cada uma com uma funcao — e nao um veu chapado por cima da
 * foto, que e o que transforma mar em mancha cinza:
 *
 *   1. Veu de base: e onde vive o texto. Vai de quase opaco embaixo a
 *      transparente na altura do meio, entao a onda no centro da foto continua
 *      visivel com a cor que tem.
 *
 *   2. Vinheta da esquerda: reforco de contraste atras da coluna de texto, bem
 *      mais suave que o gradiente horizontal anterior (0,9 de escuro na borda
 *      esquerda apagava metade da foto).
 *
 * Nao existe veu de topo aqui. Ele existia, para o menu branco sobreviver a um
 * ceu claro, mas essa funcao passou para um gradiente no proprio cabecalho (ver
 * base.css) — que protege o menu em qualquer pagina, e nao so onde alguem
 * lembrou de por a camada. Manter os dois somava escuro no topo sem motivo.
 * --------------------------------------------------------------- */

.al-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			0deg,
			rgba( 6, 42, 46, 0.94 ) 0%,
			rgba( 6, 42, 46, 0.72 ) 22%,
			rgba( 6, 42, 46, 0.3 ) 48%,
			rgba( 6, 42, 46, 0 ) 72%
		),
		linear-gradient(
			90deg,
			rgba( 6, 42, 46, 0.6 ) 0%,
			rgba( 6, 42, 46, 0.18 ) 45%,
			rgba( 6, 42, 46, 0 ) 70%
		);
}

/*
 * No celular nao existe "metade esquerda": o texto ocupa a largura toda e
 * a vinheta lateral nao ajuda em nada. Fica so o vertical, mais fechado.
 */
@media ( max-width: 47.99em ) {
	.al-hero__overlay {
		background: linear-gradient(
			180deg,
			rgba( 6, 42, 46, 0.6 ) 0%,
			rgba( 6, 42, 46, 0.32 ) 30%,
			rgba( 6, 42, 46, 0.72 ) 66%,
			rgba( 6, 42, 46, 0.95 ) 100%
		);
	}
}

/* --------------------------------------------------------------- *
 * Conteudo
 * --------------------------------------------------------------- */

/*
 * Com o conteudo centralizado, o padding vertical aqui e so respiro — quem
 * reserva o espaco do cabecalho (em cima) e o da fileira de pontos (embaixo) e
 * o proprio `.al-hero`, em base.css. Se este padding voltasse aos 9rem de
 * antes, a caixa centralizada ficaria alta demais e o texto desceria junto.
 */
.al-hero__interno {
	width: 100%;
	max-width: var( --al-wide );
	margin-inline: auto;
	padding: var( --al-space-50 ) var( --al-pad-x );
}

/*
 * Coluna de texto. Todo o conteudo compartilha a mesma borda esquerda —
 * kicker, titulo, texto e botoes.
 *
 * Mais larga que os 50% anteriores: com o titulo na escala de display, meia
 * tela quebrava "Vida e carreira unidas pelo mar" em cinco linhas. O paragrafo
 * nao acompanha essa largura — ele tem medida propria em `ch` mais abaixo,
 * senao viraria uma linha longa e cansativa de ler.
 */
.al-hero__conteudo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	width: 100%;
}

@media ( min-width: 48em ) {
	.al-hero__conteudo {
		width: 68%;
	}
}

@media ( min-width: 75em ) {
	.al-hero__conteudo {
		width: 60%;
	}
}

/*
 * Rotulo editorial, nao pilula.
 *
 * A pilula com borda, fundo translucido e blur era o elemento mais "template"
 * da primeira dobra. Aqui o kicker passa a usar o mesmo idioma do `.al-rotulo`
 * do resto do site — filete + caixa alta espacada — o que tambem faz o hero
 * conversar com as secoes de baixo em vez de parecer outro projeto.
 */
.al-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0 0 var( --al-space-50 );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var( --al-ls-caixa-alta );
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.92 );
}

/*
 * Mesma onda do filete do rotulo (token `--al-onda-mask`, definido em base.css),
 * aqui em laranja. O kicker do hero e o primeiro texto que a pessoa le no site,
 * entao e onde a assinatura tem mais razao de aparecer.
 *
 * A cor vem de `background-color` e nao de `currentColor`: o texto do kicker e
 * branco e o filete sempre foi laranja — sao cores diferentes de proposito, e o
 * contraste entre as duas e o que faz a marca ser notada.
 */
.al-hero__kicker::before {
	content: "";
	width: 2.6rem;
	height: 1.7rem;
	flex: none;
	background-color: var( --al-orange-500 );
	-webkit-mask-image: var( --al-onda-mask );
	mask-image: var( --al-onda-mask );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * Titulo na escala de display.
 *
 * O minimo e 2.25rem, e nao 2.5rem, por causa do titulo mais longo dos dois
 * sites ("Seguranca. Qualidade. Diversao."): a 2.5rem ele encosta na margem em
 * telas de 360-390px.
 *
 * A entrelinha acompanha a global (--al-lh-titulo: 1.08).
 *
 * 🔴 1.08 e PISO MEDIDO, nao preferencia. O titulo e caixa alta em portugues, e
 * caixa alta acentuada ocupa mais que a altura de maiuscula: o til de "DIVERSÃO."
 * sobe acima do topo das letras e a cedilha de "SEGURANÇA." desce abaixo da
 * linha de base. Quando as duas linhas colocam um Ç em cima de um Ã, os dois
 * sinais disputam o mesmo espaco.
 *
 * Comparacao feita no hero da escola, ampliado em 3x: em 1 o til encosta na
 * cedilha; em 1.04 ainda raspa; em 1.08 abre folga visivel. Abaixo disso e
 * colisao, nao aperto.
 *
 * 🔴 A documentacao antiga dizia que o piso era 0.94. Estava errado, e o erro
 * era de amostra: naquele momento o titulo da escola quebrava em TRES linhas e
 * o Ç nunca caia em cima do Ã. Ao reduzir o corpo do titulo em 18/08 (para o da
 * Andrea caber em tres linhas), o da escola passou a caber em duas e a colisao
 * apareceu. Teste de entrelinha com texto acentuado tem que forcar o pior
 * empilhamento, nao so contar linhas.
 *
 * 🔴 E nao voltar a fechar: a cliente reprovou o aperto na revisao de 18/08 —
 * "podia ter mais um dedinho de espaco em tudo que ta escrito de letra grande".
 */
.al-hero__titulo {
	margin: 0 0 var( --al-space-50 );
	/*
	 * 5vw com teto de 4.5rem, e nao os 6.6vw/6rem de antes.
	 *
	 * O titulo passou a ser "Do pioneirismo nas ondas / ao palco corporativo" na
	 * revisao de 18/08, que e bem mais longo que o anterior, e em 6.6vw quebrava
	 * em QUATRO linhas no desktop. Pedido do cliente: reduzir ate caber em tres.
	 *
	 * Os numeros foram medidos, nao estimados: a coluna do hero tem 677px em
	 * 1440 e em 1366 (o container e limitado, nao proporcional), e a Anton com o
	 * espacamento atual gasta ~0,45em por caractere. "AO PALCO CORPORATIVO" tem
	 * 20 caracteres, logo precisa de corpo <= 75px para caber numa linha. Em 5vw
	 * da 72px em 1440 e 68px em 1366, com folga; a segunda linha do titulo passa
	 * a ocupar uma linha so e o total fecha em tres.
	 *
	 * 🔴 Mexer no texto do titulo pede medir de novo. `node medir-hero.mjs`
	 * reporta linhas, corpo aplicado e largura da linha mais larga por viewport.
	 */
	font-size: clamp( 2.25rem, 5vw, 4.5rem );
	line-height: 1.08;
	color: var( --al-white );
	text-wrap: balance;
}

/*
 * A segunda linha do titulo em turquesa, em linha propria.
 *
 * `display: block` em vez de deixar o span fluir no meio da frase: os dois
 * sites tem titulo escrito para quebrar em duas ("Vida e carreira" / "unidas
 * pelo mar", "Seguranca. Qualidade." / "Diversao."), e deixar a quebra por
 * conta da largura disponivel dava resultados diferentes em cada tela — as
 * vezes com uma orfa de duas silabas na segunda linha.
 */
.al-hero__destaque {
	display: block;
	color: var( --al-teal-300 );
}

/*
 * Medida de leitura propria, bem menor que a coluna.
 *
 * A coluna existe para o titulo respirar; o paragrafo herdar 60% da viewport
 * daria linhas de 90 caracteres. 46ch mantem a leitura confortavel e cria uma
 * segunda borda direita, que e o que da ritmo ao bloco.
 */
.al-hero__texto {
	max-width: 46ch;
	margin: 0 0 var( --al-space-60 );
	/*
	 * Corpo normal, nao `corpo-grande`.
	 *
	 * Com o titulo em 6rem, o paragrafo em 1.4375rem passou a disputar atencao
	 * com ele e o bloco de texto cresceu tanto que cobriu o sujeito da foto.
	 * Manchete grande + lide pequeno e o contraste que faz a primeira dobra
	 * funcionar; dois tamanhos grandes brigam.
	 */
	font-size: var( --al-fs-corpo );
	line-height: 1.65;
	color: rgba( 255, 255, 255, 0.86 );
}

.al-hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* O secundario e contorno branco; o primario herda o estilo global. */
.al-hero__cta-2 {
	background: transparent !important;
	border: 2px solid rgba( 255, 255, 255, 0.75 );
	color: var( --al-white ) !important;
}

.al-hero__cta-2:hover {
	background: var( --al-white ) !important;
	color: var( --al-deep-900 ) !important;
}

/* --------------------------------------------------------------- *
 * Pontos e seta
 * --------------------------------------------------------------- */

.al-hero__pontos {
	position: absolute;
	left: max( var( --al-pad-x ), calc( 50% - var( --al-wide ) / 2 + var( --al-pad-x ) ) );
	bottom: 2rem;
	z-index: 2;
	display: flex;
	gap: 0.5rem;
}

.al-hero__ponto {
	width: 2rem;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: rgba( 255, 255, 255, 0.35 );
	cursor: pointer;
	transition: background-color 0.2s ease, width 0.2s ease;
}

.al-hero__ponto.is-ativa {
	width: 3rem;
	background: var( --al-white );
}

.al-hero__ponto:hover {
	background: rgba( 255, 255, 255, 0.7 );
}

/*
 * Canto inferior direito, nao centralizado: o conteudo do hero e alinhado
 * embaixo e uma seta no centro cairia em cima dos botoes de CTA.
 */
.al-hero__scroll {
	position: absolute;
	right: var( --al-pad-x );
	bottom: 1.75rem;
	z-index: 2;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1px solid rgba( 255, 255, 255, 0.32 );
	background: rgba( 255, 255, 255, 0.06 );
	backdrop-filter: blur( 6px );
	color: var( --al-white );
	text-decoration: none;
	font-size: 0.875rem;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.al-hero__scroll:hover {
	background: rgba( 255, 255, 255, 0.16 );
	border-color: rgba( 255, 255, 255, 0.6 );
}

@media ( prefers-reduced-motion: no-preference ) {
	.al-hero__scroll { animation: al-flutua 2.4s ease-in-out infinite; }
	@keyframes al-flutua {
		0%, 100% { transform: translateY( 0 ); }
		50%      { transform: translateY( 7px ); }
	}
}

@media ( max-width: 47.99em ) {
	.al-hero__scroll { display: none; }
	.al-hero__pontos { left: var( --al-pad-x ); bottom: 1.25rem; }
}

/* =============================================================== *
 * Faixa fotografica full-bleed
 *
 * Respiro visual entre secoes de texto nas paginas internas. Recorte deitado
 * (21:8) de proposito: e uma pausa, nao uma segunda capa — a essa altura da
 * pagina, uma foto alta empurraria o conteudo para baixo da dobra sem
 * acrescentar informacao.
 *
 * No celular vira 4:3: um 21:8 numa tela de 390px daria 148px de altura e a foto
 * viraria uma tarja.
 * =============================================================== */

.al-foto-faixa {
	margin-block: 0;
}

.al-foto-faixa img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 8;
	object-fit: cover;
}

@media ( max-width: 47.99em ) {
	.al-foto-faixa img {
		aspect-ratio: 4 / 3;
	}
}

/* =============================================================== *
 * Galeria
 *
 * O bloco de galeria do core ja monta a grade; aqui entra so o que ele nao
 * resolve: recorte uniforme (sem isso, uma foto retrato no meio de paisagens
 * desmancha a fileira) e o raio dos cantos, para conversar com os cards do resto
 * do site.
 * =============================================================== */

.al-galeria.wp-block-gallery {
	gap: var( --al-space-40 );
}

/*
 * A ultima fileira incompleta nao estica.
 *
 * O bloco do core da `flex-grow: 1` a cada figura para a fileira sempre fechar a
 * largura toda. Com 5 fotos em 3 colunas, as duas de baixo viram 612px contra os
 * 403px das de cima — a grade some e a galeria parece dois blocos diferentes
 * colados. Foi o que apareceu na galeria do Surf Treino para Mulheres, que tem 5
 * fotos.
 *
 * Com `flex-grow: 0` a largura calculada pelo core vale sozinha, a fileira
 * incompleta alinha a esquerda e a grade se mantem com qualquer quantidade de
 * foto. Fileira cheia nao muda: a soma das larguras ja e' 100%.
 *
 * O seletor repete `.has-nested-images` so' para passar da regra do core
 * (`.wp-block-gallery.has-nested-images figure.wp-block-image`), que tem tres
 * classes e um elemento. Sem isso a declaracao perde e nada muda.
 *
 * So' do tablet para cima. No celular o core cai para duas colunas, e uma foto
 * sozinha na ultima fileira ocupando meia tela parece defeito, nao grade — ali o
 * `flex-grow` do core, que a estica de borda a borda, e' o comportamento certo.
 */
@media ( min-width: 48em ) {

	.al-galeria.wp-block-gallery.has-nested-images > figure.wp-block-image {
		flex-grow: 0;
	}
}

.al-galeria .wp-block-image img {
	border-radius: var( --al-radius-md );
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

/*
 * Onde o recorte uniforme encosta no assunto da foto.
 *
 * 🔴 Reclamacao da cliente em 25/08/2026 — "essa foto ficou cortada", com a
 * terceira foto da galeria da Palestra M.A.R. circulada no print.
 *
 * O `object-fit: cover` acima recorta pelo CENTRO. Numa foto 2:3 de pessoa em
 * pe, o centro e' a barriga: a cabeca fica de fora. Cortar e' o certo — sem
 * isso, um retrato no meio de paisagens desmancha a fileira —, o que estava
 * errado era ONDE.
 *
 * Duas classes, aplicadas foto a foto pelo `al_galeria()` dos seeds, cobrem os
 * dois casos que aparecem no acervo: pessoa em pe (assunto em cima) e mesa,
 * praia ou grupo agachado (assunto embaixo). Sem classe, segue no centro, que e'
 * o certo para a maioria.
 */
.al-galeria .wp-block-image.is-foco-topo img {
	object-position: 50% 12%;
}

.al-galeria .wp-block-image.is-foco-base img {
	object-position: 50% 78%;
}

/* =============================================================== *
 * Grade de midia da pagina de experiencia — as fotos e, quando existe, o video
 *
 * Entrou em 25/08/2026 e substituiu o bloco de galeria do core nas paginas da
 * escola. Motivo: os dois videos que a cliente mandou sao RETRATO de celular
 * (480x848), e um 9:16 nao cabe numa grade 4:3 sem virar tira cortada.
 *
 * Os arquivos vao MUDOS — ela pediu ("Se usar video, tirar audio"), e a
 * transcricao confirmou que nao se perde conteudo (ver
 * .materiais/Ajustes 25-08/videos/TRANSCRICAO.txt).
 *
 * A `.al-galeria` acima continua existindo: e' o que a Palestra M.A.R. usa, no
 * site pessoal, onde nao ha video e o bloco do core da conta.
 * =============================================================== */

/*
 * 🔴 Por que o video vive na MESMA grade das fotos, e nao numa coluna ao lado do
 * texto.
 *
 * A primeira versao poe o video numa coluna a direita dos paragrafos. Funcionou
 * na pagina do Surf Treino para Mulheres, que tem quatro paragrafos — e falhou na
 * de Eventos Corporativos, que tem dois: um retrato 9:16 e' mais alto que dois
 * paragrafos, e sobravam 600px de nada a esquerda.
 *
 * Consertar aquilo pediria saber o tamanho do texto, que o CSS nao sabe. Aqui o
 * video deixa de disputar altura com o texto: os paragrafos voltam aos 720px das
 * outras sete paginas de produto, e o video vira mais uma celula da grade de
 * midia, ocupando DUAS linhas — que e' mais ou menos o que um 9:16 pede quando a
 * foto ao lado e' 4:3.
 */
.al-midia {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --al-space-40 );
}

.al-midia figure {
	margin: 0;
	min-width: 0;
}

.al-midia img,
.al-midia video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var( --al-radius-md );
}

.al-midia__foto {
	aspect-ratio: 4 / 3;
}

/*
 * 🔴 O video e' POSICIONADO, e nao um filho comum — senao ele dita a altura da
 * grade em vez de caber nela.
 *
 * Um `<video>` tem proporcao intrinseca (aqui 9:16). Como filho normal de um
 * item que ocupa duas linhas, e' ele quem passa a mandar: numa coluna de 403px
 * pede 711px de altura, enquanto duas fileiras de foto 4:3 somam 620px. O grid
 * atende o video, estica as duas fileiras, e sobra uma folga de 45px em cada
 * uma — as fotos da segunda fileira descolam das da primeira e a grade deixa de
 * parecer uma grade. Foi o que apareceu na pagina de Eventos Corporativos.
 *
 * Em `absolute` o video sai do calculo de altura: as FOTOS definem as fileiras,
 * o item do video recebe a altura das duas, e o `object-fit: cover` acomoda o
 * 9:16 no espaco que sobrou. O corte fica em torno de 13% da altura do quadro,
 * nas bordas, e o assunto dos dois videos esta no centro.
 */
.al-midia__video {
	grid-row: span 2;
	position: relative;

	/*
	 * Sem `min-height: 0` o item de grid nao encolhe abaixo do tamanho do
	 * conteudo. Com ele, quem manda e' a grade.
	 */
	min-height: 0;
}

.al-midia__video video {
	position: absolute;
	inset: 0;

	/*
	 * Fundo escuro porque o poster e' `contain` por padrao em alguns navegadores e
	 * qualquer sobra aparece; escuro some, branco vira moldura.
	 */
	background: var( --al-deep-900 );
	box-shadow: var( --al-shadow-card );
}

/*
 * Onde os focos de recorte da galeria tambem valem — a grade de midia usa as
 * mesmas classes por foto que a `.al-galeria`.
 */
.al-midia .is-foco-topo img {
	object-position: 50% 12%;
}

.al-midia .is-foco-base img {
	object-position: 50% 78%;
}

@media ( max-width: 47.99em ) {

	.al-midia {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 29.99em ) {

	.al-midia {
		grid-template-columns: 1fr;
	}

	/*
	 * Em coluna unica nao existe "duas linhas" para ocupar: o video volta a ser
	 * uma celula, agora no proprio 9:16, que e' como ele foi filmado e como o
	 * celular o mostra melhor. Com o video em `absolute`, e' o `aspect-ratio`
	 * daqui que da altura a celula — sem ele, ela seria zero.
	 */
	.al-midia__video {
		grid-row: auto;
		aspect-ratio: 9 / 16;
	}
}

/* =============================================================== *
 * Lista de definicoes — titulo a esquerda, texto a direita
 *
 * Existe para tirar as paginas internas do formato "documento do Word": h2,
 * paragrafo, h2, paragrafo, tudo empilhado na mesma coluna e no mesmo eixo, sem
 * nada indicando onde um item termina e o outro comeca.
 *
 * Aqui cada item e uma linha com filete em cima e duas colunas: o nome do item
 * na esquerda, o texto na direita. O filete faz o trabalho que o espaco em branco
 * sozinho nao fazia — separar itens — e a segunda coluna cria um eixo interno,
 * que e o que diferencia pagina desenhada de texto corrido.
 * =============================================================== */

.al-definicoes {
	display: grid;
	gap: 0;
}

.al-definicoes__item {
	display: grid;
	gap: var( --al-space-40 );
	padding-block: var( --al-space-70 );
	border-top: 1px solid color-mix( in srgb, var( --al-ink-300 ) 70%, transparent );
}

/* Ultimo item fecha a lista, senao ela termina "aberta". */
.al-definicoes__item:last-child {
	border-bottom: 1px solid color-mix( in srgb, var( --al-ink-300 ) 70%, transparent );
}

@media ( min-width: 52em ) {
	.al-definicoes__item {
		grid-template-columns: 1fr 1.7fr;
		gap: var( --al-space-70 );
		align-items: start;
	}
}

.al-definicoes__titulo {
	margin: 0;
	font-size: var( --al-fs-titulo-3 );
	line-height: 1.05;
}

/* --------------------------------------------------------------- *
 * Variante com capa fotográfica
 *
 * O titulo passa a viver dentro de um card com foto de fundo e veu por cima.
 * O veu nao e enfeite: e o que garante que o titulo branco continue legivel
 * sobre QUALQUER foto que entre ali depois — ceu claro, espuma, areia. Sem ele,
 * a legibilidade passaria a depender de quem escolhe a imagem.
 *
 * A foto entra por custom property (`--al-def-foto`) e nao por `<img>`: assim
 * quem monta a secao no editor nao precisa lidar com um bloco de imagem
 * decorativa, e o alt vazio nao aparece na arvore de acessibilidade — a
 * informacao esta no titulo e no texto ao lado.
 *
 * `isolation: isolate` + `z-index: -1` no veu: dentro do contexto de
 * empilhamento que o card cria, o veu pinta ACIMA do proprio background-image e
 * ABAIXO do titulo. Sem o `isolation`, o -1 jogaria o veu para tras do card e
 * ele desapareceria.
 * --------------------------------------------------------------- */

.al-definicoes__capa {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 14rem;
	padding: var( --al-space-60 );
	border-radius: var( --al-radius-lg );
	overflow: hidden;
	isolation: isolate;
	/* Cor de base para o caso de a foto nao carregar. */
	background-color: var( --al-deep-900 );
	background-image: var( --al-def-foto );
	background-size: cover;
	background-position: center;
}

.al-definicoes__capa::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/*
	 * Veu leve: abre no topo e fecha na base, que e onde o titulo senta. Assim a
	 * foto aparece de verdade e o titulo continua legivel sem depender da imagem.
	 * Fechar tudo em 0,8 deixaria a foto irreconhecivel — o veu esta aqui para
	 * garantir contraste, nao para esconder o que ele cobre.
	 */
	background: linear-gradient(
		to top,
		rgba( 6, 42, 46, 0.82 ) 0%,
		rgba( 6, 42, 46, 0.48 ) 45%,
		rgba( 6, 42, 46, 0.2 ) 100%
	);
}

.al-definicoes__capa .al-definicoes__titulo {
	color: var( --al-white );
}

@media ( max-width: 51.99em ) {
	.al-definicoes__capa {
		min-height: 9rem;
	}
}

/* Sem o filete laranja do `.al-titulo-secao`: aqui quem separa e o fio da linha,
   e dois separadores no mesmo lugar viram ruido. */
.al-definicoes__titulo::after {
	content: none;
}

.al-definicoes__corpo > :is( p, ul, ol ) {
	margin-block: 0 var( --al-space-40 );
	max-width: 58ch;
}

.al-definicoes__corpo > :last-child {
	margin-bottom: 0;
}

/* Em faixa escura o fio inverte. */
.has-deep-900-background-color .al-definicoes__item {
	border-color: rgba( 255, 255, 255, 0.16 );
}

/* =============================================================== *
 * Carrossel: arrastar com o mouse preso
 *
 * 🔴 `scroll-snap-type: none` durante o arraste nao e detalhe: com o snap ligado,
 * o navegador puxa o trilho de volta ao ponto de encaixe a cada quadro enquanto o
 * JS mexe no `scrollLeft`, e o cartao "gruda" — parece que arrastar nao funciona.
 * `scroll-behavior: auto` pelo mesmo motivo: com `smooth` herdado do <html>, cada
 * quadro do arraste vira uma animacao propria e o movimento fica borrachudo.
 *
 * `user-select: none` porque arrastar sobre um cartao, sem isso, seleciona o
 * texto dele em vez de rolar.
 * =============================================================== */

:is( .al-timeline__trilho, .al-depos__trilho ) {
	cursor: grab;
}

:is( .al-timeline__trilho, .al-depos__trilho ).is-arrastando {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

/* Cursor de arraste nao faz sentido quando tudo ja cabe na tela. */
@media ( hover: none ) {
	:is( .al-timeline__trilho, .al-depos__trilho ) {
		cursor: auto;
	}
}

/* =============================================================== *
 * KPIs — a faixa de conquistas
 *
 * Substitui a versao anterior, que era so numero + rotulo separados por um fio
 * de 1px. Numero de 80px ao lado de rotulo de 15px, sem nada em volta, lia como
 * decoracao: o olho passava pelo numero e nao levava o dado.
 *
 * Agora cada conquista e um bloco fechado, com icone, numero e rotulo — o icone
 * da entrada, o numero da o peso, o rotulo entrega a informacao. Bloco tambem
 * resolve o espacamento: a folga passa a ser padding de cada card, e nao um
 * `gap` tentando separar quatro colunas de altura diferente.
 *
 * Os icones sao do Font Awesome, que ja e a stack de icones do projeto — nao
 * emoji. Emoji desenha diferente em cada sistema operacional (e no Windows sai
 * chapado), o que numa faixa de credenciais tira exatamente a autoridade que ela
 * existe para construir. Trocar para emoji, se for a preferencia, e mexer no
 * `<i>` do seed.
 * =============================================================== */

.al-kpis {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --al-space-50 );
}

@media ( min-width: 34em ) {
	.al-kpis { grid-template-columns: repeat( 2, 1fr ); }

	/* Duas colunas ou mais: os cards precisam nascer da mesma altura. */
	.al-kpi { min-height: 15rem; }
}

@media ( min-width: 66em ) {
	.al-kpis { grid-template-columns: repeat( 4, 1fr ); }
}

/*
 * Cada card recebe uma foto de fundo com veu, e o conteudo passa a ser
 * centralizado. Antes eram quatro caixas de cor solida com o conteudo alinhado
 * a esquerda; a faixa cumpria a funcao mas nao competia com o resto da home,
 * que e toda fotografica.
 *
 * A foto entra por CUSTOM PROPERTY (`--al-kpi-foto`), nao por `<img>` — mesmo
 * idioma do `al-definicoes__capa`. Duas razoes: e imagem decorativa, e um
 * `<img>` decorativo obriga a um `alt` vazio na arvore de acessibilidade; e o
 * seed consegue trocar a foto sem tocar na marcacao do bloco.
 *
 * `isolation: isolate` com o veu em `z-index: -1`: sem o contexto de
 * empilhamento proprio, o `-1` mandaria o veu para tras do fundo do card e ele
 * simplesmente nao apareceria.
 */
.al-kpi {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*
	 * A altura minima existe para as quatro colunas do desktop nascerem iguais
	 * mesmo com rotulos de tamanhos diferentes. Em coluna unica ela nao serve
	 * para nada e ainda estica cada card: no celular a faixa virava quatro
	 * blocos de 240px com vazio em cima e embaixo do conteudo. O piso menor sai
	 * do proprio conteudo, e o `min-height` cheio volta junto com o grid.
	 */
	min-height: 10.5rem;
	padding: var( --al-space-60 );
	border-radius: var( --al-radius-md );
	overflow: hidden;
	/*
	 * 🔴 Anel INTERNO por box-shadow, e nao `border`.
	 *
	 * Com `border: 1px`, o card ficava com uma franja clara e colorida nas
	 * laterais — reprovada pelo cliente. A causa: `background-clip` vale
	 * `border-box` por padrao, entao a FOTO pinta por baixo da borda; e o veu do
	 * `::before` com `inset: 0` se posiciona pela caixa de PADDING, ou seja, nao
	 * alcanca o anel da borda. Resultado: um contorno de 1px exibindo a foto sem
	 * veu nenhum, puxando o pixel mais claro da imagem.
	 *
	 * `inset` no box-shadow pinta por dentro, sobre o fundo ja composto, e
	 * acompanha o `border-radius` sem emenda nos cantos.
	 */
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.1 );
	isolation: isolate;
	text-align: center;
	/* Cor de base para o caso de a foto nao carregar ou nao ser definida. */
	background-color: rgba( 255, 255, 255, 0.04 );
	background-image: var( --al-kpi-foto );
	background-size: cover;
	background-position: center;
	transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier( 0.16, 1, 0.3, 1 );
}

/*
 * Veu bem mais fechado que o do `al-definicoes__capa`.
 *
 * La o veu protege um titulo branco de corpo grande; aqui protege um numero
 * AMARELO sobre foto de mar, que e clara e cheia de espuma — e amarelo sobre
 * espuma branca nao tem contraste nenhum. O numero e a informacao principal do
 * card, entao o veu aqui e bem mais fechado: 0,80 no topo contra os 0,2 de la.
 *
 * 🔴 Os valores foram MEDIDOS em A/B no screenshot, amostrando o fundo do card
 * em faixas SEM texto (topo, base e as margens laterais na altura do numero) —
 * amostrar a area inteira nao serve, porque o percentil alto passa a pegar o
 * proprio glifo amarelo e branco em vez do fundo.
 *
 * Percentil 95 do fundo contra o amarelo #F8C300, nos quatro cards:
 *
 *   veu 0,72 no topo -> 4,25 · 4,37 · 5,55 · 6,21 : 1
 *   veu 0,80 no topo -> 5,30 · 5,47 · 6,44 · 6,86 : 1
 *
 * O numero e texto grande, e a WCAG pede 3:1 para texto grande — os dois
 * passavam. Mas 4,25:1 fica abaixo da regra de texto NORMAL (4,5:1) e nao deixa
 * margem para trocar a foto depois. Em 0,80 o piso vai para 5,30:1.
 *
 * 🔴 Ao trocar qualquer foto de card, medir de novo. Foto de ceu aberto ou de
 * espuma derruba esse piso rapido.
 *
 * O gradiente ainda existe (nao e cor chapada) porque com opacidade uniforme a
 * foto vira mancha e o assunto deixa de ser reconhecivel — e o assunto e o que
 * da sentido ao card.
 */
.al-kpi::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba( 6, 42, 46, 0.93 ) 0%,
		rgba( 6, 42, 46, 0.87 ) 50%,
		rgba( 6, 42, 46, 0.8 ) 100%
	);
	transition: background 0.3s ease;
}

@media ( prefers-reduced-motion: no-preference ) {
	.al-kpi:hover {
		transform: translateY( -4px );
		box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.26 );
	}

	/*
	 * No hover o veu abre um pouco e a foto aparece mais — mas so um pouco.
	 * Abrir ate 0,6 devolvia a foto e tirava o contraste do numero justamente
	 * no momento em que a pessoa esta olhando o card.
	 */
	.al-kpi:hover::before {
		background: linear-gradient(
			to top,
			rgba( 6, 42, 46, 0.89 ) 0%,
			rgba( 6, 42, 46, 0.82 ) 50%,
			rgba( 6, 42, 46, 0.73 ) 100%
		);
	}
}

.al-kpi__ico {
	margin-bottom: var( --al-space-40 );
	font-size: 1.5rem;
	color: var( --al-teal-300 );
}

.al-kpi__numero {
	margin: 0 0 var( --al-space-30 );
	font-family: var( --al-font-display );
	/*
	 * Teto de 4rem, e nao os 5rem de antes: dentro de um card de ~290px, um
	 * numero de 80px encostava nas duas bordas e nao sobrava respiro para o
	 * rotulo. O peso vem do card, nao do tamanho bruto.
	 */
	font-size: clamp( 3rem, 3.8vw, 4rem );
	line-height: 0.9;
	color: var( --al-yellow-500 );
	/*
	 * Sombra suave: rede de seguranca sobre a parte clara da foto. Nao substitui
	 * o veu — o contraste tem que fechar sem ela — mas garante a borda do glifo
	 * quando o pixel atras e o mais claro da imagem.
	 */
	text-shadow: 0 1px 12px rgba( 6, 42, 46, 0.55 );
}

/*
 * O "×" e o "ª" sao sufixos: em corpo cheio competiam com o numero.
 *
 * `vertical-align: baseline`, e nao um deslocamento para cima: elevado, o "×"
 * lia como chamada de nota de rodape em vez de "cinco vezes". O "ª" ja nasce
 * elevado no proprio glifo, entao nao precisa de ajuda.
 */
.al-kpi__sufixo {
	font-size: 0.5em;
	margin-left: 0.08em;
	vertical-align: baseline;
}

.al-kpi__rotulo {
	/*
	 * `max-width` em centralizado: sem teto, um rotulo de duas linhas encosta
	 * nos dois lados do card e perde o eixo visual do numero acima dele.
	 */
	max-width: 22ch;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.92 );
	text-shadow: 0 1px 10px rgba( 6, 42, 46, 0.5 );
}

/* =============================================================== *
 * Linha do tempo
 * =============================================================== */

/*
 * Cards mais largos que os 15-19rem anteriores.
 *
 * Naquela largura cabiam quase quatro cards na tela, mas o texto de cada um
 * ficava numa coluna de ~14rem — e um resumo de tres linhas virava seis, em
 * 0.875rem, sobre foto escura. Menos cards visiveis e mais legibilidade em cada
 * um; quem quiser ver os outros arrasta, que e o proposito do carrossel.
 */
.al-timeline__trilho {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax( 17.5rem, 23rem );
	gap: var( --al-space-50 );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var( --al-pad-x );
	padding: 0 var( --al-pad-x ) var( --al-space-50 );
	margin-inline: calc( var( --al-pad-x ) * -1 );
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var( --al-ink-300 ) transparent;
}

.al-timeline__item {
	scroll-snap-align: start;
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var( --al-radius-lg );
	overflow: hidden;
	background: var( --al-deep-900 );
	color: var( --al-white );
	isolation: isolate;
	transition: transform 0.4s cubic-bezier( 0.16, 1, 0.3, 1 ), box-shadow 0.4s ease;
}

@media ( prefers-reduced-motion: no-preference ) {
	.al-timeline__item:hover {
		transform: translateY( -6px );
		box-shadow: var( --al-shadow-lift );
	}
}

/* A foto e o fundo do card inteiro, com o texto por cima — em vez da foto
   em cima e o texto embaixo, que e o arranjo de todo template pronto. */
.al-timeline__foto {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.al-timeline__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale( 0.35 );
	transition: transform 0.6s cubic-bezier( 0.16, 1, 0.3, 1 ), filter 0.4s ease;
}

/*
 * Veu do card.
 *
 * Fecha bem mais embaixo que antes (0,97 contra 0,94) e comeca a fechar mais
 * cedo (a 40% em vez de 48%): o texto de baixo passa a sentar em petroleo
 * praticamente solido, entao a legibilidade nao depende de qual foto entrou
 * naquele card — e sao fotos de 1988 a 2024, com exposicao muito diferente
 * entre elas. Em troca, o topo abre mais (0,02) e a foto aparece de verdade.
 */
.al-timeline__item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba( 6, 42, 46, 0.02 ) 0%,
		rgba( 6, 42, 46, 0.34 ) 40%,
		rgba( 6, 42, 46, 0.88 ) 74%,
		rgba( 6, 42, 46, 0.97 ) 100%
	);
}

.al-timeline__item:hover .al-timeline__foto img {
	transform: scale( 1.06 );
	filter: grayscale( 0 );
}

.al-timeline__corpo {
	margin-top: auto;
	padding: var( --al-space-80 ) var( --al-space-60 ) var( --al-space-60 );
	display: grid;
	gap: 0.55rem;
	min-height: 26rem;
	align-content: end;
}

/*
 * O ano e a entrada do card: e por ele que a pessoa se localiza na linha do
 * tempo, entao vem em corpo de display, com um filete acima para separa-lo da
 * foto sem precisar de mais um elemento.
 */
.al-timeline__ano {
	position: relative;
	padding-top: var( --al-space-40 );
	font-family: var( --al-font-display );
	font-size: 3rem;
	line-height: 1;
	color: var( --al-yellow-500 );
}

.al-timeline__ano::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.25rem;
	height: 2px;
	background: var( --al-yellow-500 );
}

.al-timeline__titulo {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.15;
	color: var( --al-white );
}

/*
 * Altura minima de quatro linhas.
 *
 * O corpo do card e alinhado embaixo, entao um resumo de tres linhas empurrava
 * o ano seis pixels mais para baixo que o do card vizinho de quatro linhas — e
 * a fileira de anos, que e o eixo de leitura da linha do tempo, saia
 * desalinhada. Reservando quatro linhas, os resumos curtos ganham a folga
 * embaixo e todos os anos nascem na mesma altura, sem cortar texto de ninguem.
 *
 * 1.5rem por linha = 0.9375rem de corpo x 1.6 de entrelinha.
 */
.al-timeline__texto {
	min-height: 6rem;
}

.al-timeline__texto p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.86 );
}

/* Card sem foto: fundo petroleo com um traco de cor, para nao virar
   um retangulo morto no meio do carrossel. */
.al-timeline__item:not( :has( .al-timeline__foto ) ) {
	background: linear-gradient( 155deg, var( --al-deep-700 ), var( --al-deep-900 ) );
	border: 1px solid rgba( 255, 255, 255, 0.09 );
}

.al-timeline__controles,
.al-depos__controles {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	margin-top: var( --al-space-40 );
}

.al-timeline__nav,
.al-depos__nav {
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	border: 1px solid var( --al-ink-300 );
	border-radius: 999px;
	background: transparent;
	color: var( --al-deep-900 );
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.al-timeline__nav:hover:not( [disabled] ),
.al-depos__nav:hover:not( [disabled] ) {
	background: var( --al-deep-900 );
	color: var( --al-white );
	border-color: var( --al-deep-900 );
}

.al-timeline__nav[disabled],
.al-depos__nav[disabled] {
	opacity: 0.3;
	cursor: default;
}

/* =============================================================== *
 * Depoimentos
 * =============================================================== */

.al-depos__trilho {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax( 17rem, 25rem );
	gap: var( --al-space-50 );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var( --al-pad-x );
	padding: 0 var( --al-pad-x ) var( --al-space-50 );
	margin-inline: calc( var( --al-pad-x ) * -1 );
	overscroll-behavior-x: contain;
	align-items: stretch;
	scrollbar-width: thin;
	scrollbar-color: var( --al-ink-300 ) transparent;
}

.al-depos__item {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: var( --al-space-50 );
	margin: 0;
	padding: var( --al-space-70 ) var( --al-space-60 ) var( --al-space-60 );
	background: var( --al-white );
	border-radius: var( --al-radius-lg );
	box-shadow: var( --al-shadow-card );
	/*
	 * Cria contexto de empilhamento para a aspa decorativa poder usar
	 * `z-index: -1` e ficar atras do texto sem afundar atras do fundo branco do
	 * card. Sem isto, o -1 a joga para tras do card e a aspa desaparece.
	 */
	isolation: isolate;
}

/*
 * Card sem borda, so sombra.
 *
 * Antes tinha os dois: um fio de 1px de ink-300 e a sombra. Sobre o fundo areia
 * o fio ficava a um passo de invisivel e so servia para dar um contorno duro que
 * denunciava a caixa. Sombra sozinha resolve o mesmo problema (separar o card do
 * fundo) sem desenhar o retangulo.
 */

.al-depos__texto {
	position: relative;
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
}

/*
 * Aspa de abertura como elemento estrutural, nao como enfeite.
 *
 * A versao anterior era um glifo de 4,5rem em bloco, no fluxo, empurrando o
 * texto para baixo — lia como um pingo turquesa solto num canto. Agora a aspa e
 * grande, em marca d'agua, e o texto comeca no topo do card e passa por cima
 * dela.
 *
 * Agora o desenho e o SVG de aspas em CONTORNO que o cliente enviou, no lugar do
 * glifo da Poiret One. Ganha duas coisas: o par de aspas em traco aberto
 * conversa melhor com o fio fino da logomarca do que a bolota cheia do glifo, e
 * o desenho para de depender de a fonte ter carregado — marca d'agua que cai no
 * fallback do sistema muda de forma e de peso sem avisar.
 *
 * 🔴 `mask` com `background-color`, nao `background-image`: mesmo motivo do
 * filete do rotulo em base.css — a cor continua vindo do design system
 * (`--al-teal-500`) em vez de ficar congelada dentro do data-URI.
 *
 * O `viewBox` esta apertado no bounding box real do traco (0 63.2 512 385.8,
 * medido). O arquivo original trazia folga em cima e embaixo, que em marca
 * d'agua desalinharia a aspa do topo do texto.
 *
 * A Poiret One segue no projeto: o theme.json a aplica em `core/quote` e
 * `core/pullquote`, entao nao virou fonte carregada sem uso.
 */
.al-depos__texto::before {
	content: "";
	position: absolute;
	top: -1.35rem;
	left: -0.6rem;
	z-index: -1;
	/* 5.5rem x 4.15rem mantem a proporcao medida do traco (1.327). */
	width: 5.5rem;
	height: 4.15rem;
	background-color: var( --al-teal-500 );
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 63.2 512 385.8'%3E%3Cpath d='M125.887,235.044c4.497-34.094,34.635-64.954,89.763-91.846l9.927-4.843l-40.699-75.14l-9.188,4.657C59.111,126.967,0,210.482,0,316.1c0,36.442,11.568,67.916,34.385,93.55c23.137,25.991,51.215,39.17,83.46,39.17c28.973,0,53.541-10.317,73.021-30.668c19.353-20.22,29.166-45.335,29.166-74.649c0-27.7-9.912-52.386-29.461-73.372C173.329,251.62,151.603,239.845,125.887,235.044z M175.57,403.511c-15.546,16.241-34.428,24.135-57.725,24.135c-26.305,0-48.431-10.492-67.642-32.075c-19.534-21.944-29.03-47.939-29.03-79.472c0-48.407,13.631-92.11,40.512-129.893c25.649-36.049,64.119-67.876,114.44-94.7l20.389,37.642c-61.32,32.134-92.389,70.762-92.389,114.924v9.456l9.395,1.064c25.308,2.865,45.441,12.668,61.558,29.97c16.001,17.178,23.78,36.459,23.78,58.94C198.859,367.51,191.24,387.138,175.57,403.511z'/%3E%3Cpath d='M413.206,235.075c4.443-34.122,34.333-64.998,89.019-91.893l9.775-4.807l-39.688-75.194l-9.279,4.682C345.921,126.955,286.541,210.474,286.541,316.1c0,36.465,11.716,67.956,34.821,93.597c23.393,25.959,51.587,39.122,83.806,39.122c29.009,0,53.464-10.337,72.685-30.725c19.056-20.212,28.719-45.308,28.719-74.592c0-27.701-9.912-52.387-29.459-73.372C459.906,251.659,438.442,239.894,413.206,235.075z M462.449,403.569c-15.277,16.202-34.012,24.078-57.281,24.078c-26.331,0-48.599-10.507-68.077-32.123c-19.769-21.938-29.378-47.917-29.378-79.424c0-48.399,13.693-92.095,40.693-129.874c25.763-36.041,64.399-67.863,114.934-94.684l19.836,37.584c-60.878,32.145-91.725,70.781-91.725,114.947v9.435l9.371,1.082c24.788,2.861,44.674,12.665,60.799,29.973c16.001,17.177,23.778,36.456,23.778,58.94C485.4,367.541,477.892,387.19,462.449,403.569z'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 63.2 512 385.8'%3E%3Cpath d='M125.887,235.044c4.497-34.094,34.635-64.954,89.763-91.846l9.927-4.843l-40.699-75.14l-9.188,4.657C59.111,126.967,0,210.482,0,316.1c0,36.442,11.568,67.916,34.385,93.55c23.137,25.991,51.215,39.17,83.46,39.17c28.973,0,53.541-10.317,73.021-30.668c19.353-20.22,29.166-45.335,29.166-74.649c0-27.7-9.912-52.386-29.461-73.372C173.329,251.62,151.603,239.845,125.887,235.044z M175.57,403.511c-15.546,16.241-34.428,24.135-57.725,24.135c-26.305,0-48.431-10.492-67.642-32.075c-19.534-21.944-29.03-47.939-29.03-79.472c0-48.407,13.631-92.11,40.512-129.893c25.649-36.049,64.119-67.876,114.44-94.7l20.389,37.642c-61.32,32.134-92.389,70.762-92.389,114.924v9.456l9.395,1.064c25.308,2.865,45.441,12.668,61.558,29.97c16.001,17.178,23.78,36.459,23.78,58.94C198.859,367.51,191.24,387.138,175.57,403.511z'/%3E%3Cpath d='M413.206,235.075c4.443-34.122,34.333-64.998,89.019-91.893l9.775-4.807l-39.688-75.194l-9.279,4.682C345.921,126.955,286.541,210.474,286.541,316.1c0,36.465,11.716,67.956,34.821,93.597c23.393,25.959,51.587,39.122,83.806,39.122c29.009,0,53.464-10.337,72.685-30.725c19.056-20.212,28.719-45.308,28.719-74.592c0-27.701-9.912-52.387-29.459-73.372C459.906,251.659,438.442,239.894,413.206,235.075z M462.449,403.569c-15.277,16.202-34.012,24.078-57.281,24.078c-26.331,0-48.599-10.507-68.077-32.123c-19.769-21.938-29.378-47.917-29.378-79.424c0-48.399,13.693-92.095,40.693-129.874c25.763-36.041,64.399-67.863,114.934-94.684l19.836,37.584c-60.878,32.145-91.725,70.781-91.725,114.947v9.435l9.371,1.082c24.788,2.861,44.674,12.665,60.799,29.973c16.001,17.177,23.778,36.456,23.778,58.94C485.4,367.541,477.892,387.19,462.449,403.569z'/%3E%3C/svg%3E" );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: 0.2;
	pointer-events: none;
}

.al-depos__texto p {
	margin: 0 0 0.85rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var( --al-ink-900 );
}

.al-depos__autor {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-top: var( --al-space-40 );
	border-top: 1px solid color-mix( in srgb, var( --al-ink-300 ) 55%, transparent );
}

.al-depos__foto,
.al-depos__monograma {
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	flex: none;
}

.al-depos__foto {
	object-fit: cover;
}

/* Iniciais de quem ainda nao tem foto. Ver o comentario no render do bloco. */
.al-depos__monograma {
	display: grid;
	place-items: center;
	background: var( --al-teal-500 );
	color: var( --al-deep-900 );
	font-family: var( --al-font-display );
	font-size: 1rem;
	letter-spacing: 0.04em;
}

.al-depos__autor strong {
	display: block;
	font-size: 1rem;
	line-height: 1.3;
}

.al-depos__autor em {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.8125rem;
	font-style: normal;
	letter-spacing: 0.02em;
	color: var( --al-ink-600 );
}

/* Em faixa escura o card inverte. */
.has-deep-900-background-color .al-depos__item,
.has-teal-700-background-color .al-depos__item {
	background: rgba( 255, 255, 255, 0.06 );
	border-color: rgba( 255, 255, 255, 0.14 );
	box-shadow: none;
}

.has-deep-900-background-color .al-depos__texto p,
.has-deep-900-background-color .al-depos__autor strong,
.has-teal-700-background-color .al-depos__texto p,
.has-teal-700-background-color .al-depos__autor strong {
	color: var( --al-white );
}

.has-deep-900-background-color .al-depos__autor em,
.has-teal-700-background-color .al-depos__autor em {
	color: rgba( 255, 255, 255, 0.7 );
}

.has-deep-900-background-color .al-depos__nav,
.has-teal-700-background-color .al-depos__nav {
	color: var( --al-white );
	border-color: rgba( 255, 255, 255, 0.35 );
}

.has-deep-900-background-color .al-depos__nav:hover:not( [disabled] ),
.has-teal-700-background-color .al-depos__nav:hover:not( [disabled] ) {
	background: var( --al-white );
	color: var( --al-deep-900 );
}

/* =============================================================== *
 * Parceiros
 * =============================================================== */

.al-parceiros__grupo + .al-parceiros__grupo {
	margin-top: var( --al-space-70 );
}

.al-parceiros__rotulo {
	margin: 0 0 var( --al-space-50 );
	font-family: var( --al-font-corpo ) !important;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var( --al-ls-caixa-alta );
	text-transform: uppercase;
	text-align: center;
	color: var( --al-ink-600 );
}

.al-parceiros__grade {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 7rem, 1fr ) );
	gap: var( --al-space-60 );
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.al-parceiros__grade--patrocinador {
	grid-template-columns: repeat( auto-fit, minmax( 11rem, 13rem ) );
	justify-content: center;
}

.al-parceiros__grade img {
	display: block;
	width: 100%;
	max-height: 4.5rem;
	object-fit: contain;
	/* Logos de marcas diferentes brigam entre si. Cinza no repouso, cor no
	   hover: a faixa fica coesa e a marca ainda aparece. */
	filter: grayscale( 1 );
	opacity: 0.55;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.al-parceiros__grade a:hover img,
.al-parceiros__grade a:focus-visible img {
	filter: grayscale( 0 );
	opacity: 1;
}

/* =============================================================== *
 * Bloco editorial: texto + imagem assimetrico
 * =============================================================== */

.al-editorial {
	display: grid;
	gap: var( --al-space-60 );
	align-items: center;
}

@media ( min-width: 52em ) {
	.al-editorial {
		grid-template-columns: 1fr 1fr;
		gap: var( --al-space-80 );
	}

	/* Proporcao desigual em vez de 1:1 — mais editorial, menos "duas colunas". */
	.al-editorial--foto-menor { grid-template-columns: 6fr 7fr; }
	.al-editorial--foto-maior { grid-template-columns: 7fr 6fr; }

	/* Inverte a ordem visual mantendo a ordem do DOM (e da leitura por
	   teclado e leitor de tela) intacta. */
	.al-editorial--invertido > :first-child { order: 2; }
}

.al-editorial__foto {
	position: relative;
	border-radius: var( --al-radius-lg );
	aspect-ratio: 4 / 5;
}

.al-editorial__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/*
 * Filete laranja que assina o bloco.
 *
 * Reescrito de tres jeitos mais simples que a versao anterior, que era um
 * `::before` com `z-index: -1` dentro de um `isolation: isolate` — escondido
 * atras da propria foto e aparecendo so pela faixa que sobrava embaixo. Aquilo
 * dependia de contexto de empilhamento para ficar de pe e era impossivel prever
 * onde a barra ia aparecer olhando o CSS.
 *
 * Agora: `::after` (pinta por cima por ordem natural, sem z-index), ancorado na
 * borda ESQUERDA da foto (o mesmo eixo do rotulo e do titulo da secao, em vez de
 * um recuo simetrico que nao conversava com nada) e inteiramente fora da caixa
 * da foto, entao nao depende de recorte nem de sobreposicao.
 *
 * O contorno branco de 1px que existia por cima da foto saiu: sobre foto clara
 * em pagina branca ele nao separava nada e so desenhava a borda do retangulo.
 */
/*
 * 🔴 O filete de acento da foto so existe a partir de 52em, que e onde o
 * editorial vira duas colunas.
 *
 * Empilhado, a foto fica em cima do texto e esse filete cai a poucos pixels do
 * rotulo e do filete do proprio titulo de secao — tres marcas decorativas em
 * menos de 80px de altura, duas delas barras laranja de larguras diferentes
 * (38% da foto e 3.5rem). Lia como divisor solto, nao como acento.
 *
 * Em duas colunas o problema nao existe: o filete fica na coluna da foto e o do
 * titulo na coluna do texto, cada um ancorando o seu lado. E por isso que so
 * apareceu quando fomos olhar o mobile de verdade.
 */
@media ( min-width: 52em ) {
	.al-editorial__foto::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -0.875rem;
		width: 38%;
		height: 4px;
		border-radius: 2px;
		background: var( --al-orange-500 );
	}
}

/* =============================================================== *
 * Faixa com imagem de fundo (ponte para a escola, palestra)
 * =============================================================== */

.wp-block-cover.al-faixa {
	min-height: 34rem;
	padding-block: var( --al-space-90 );
}

/* Escuro onde o texto fica, transparente onde a foto conta a historia.
   Overlay uniforme e o que transforma foto em mancha cinza. */
.wp-block-cover.al-faixa .wp-block-cover__background {
	background: linear-gradient(
		100deg,
		rgba( 6, 42, 46, 0.95 ) 0%,
		rgba( 6, 42, 46, 0.88 ) 38%,
		rgba( 6, 42, 46, 0.45 ) 72%,
		rgba( 6, 42, 46, 0.2 ) 100%
	) !important;
	opacity: 1 !important;
}

.wp-block-cover.al-faixa img.wp-block-cover__image-background {
	object-position: 72% center;
}

/* =============================================================== *
 * Formulario de lead dentro do tema
 * =============================================================== */

.al-lead-wrap {
	margin-block: var( --al-space-50 );
}

.al-lead {
	max-width: 32rem;
}

.has-deep-900-background-color :is( .al-lead__titulo, .al-lead__campo label ),
.has-teal-700-background-color :is( .al-lead__titulo, .al-lead__campo label ) {
	color: var( --al-white );
}

.has-deep-900-background-color :is( .al-lead__texto, .al-lead__consent label ),
.has-teal-700-background-color :is( .al-lead__texto, .al-lead__consent label ) {
	color: rgba( 255, 255, 255, 0.82 );
}

.has-deep-900-background-color .al-lead__consent a,
.has-teal-700-background-color .al-lead__consent a {
	color: var( --al-teal-300 );
}

.has-deep-900-background-color .al-lead input,
.has-teal-700-background-color .al-lead input {
	background: rgba( 255, 255, 255, 0.07 );
	border-color: rgba( 255, 255, 255, 0.25 );
	color: var( --al-white );
}

.has-deep-900-background-color .al-lead input::placeholder,
.has-teal-700-background-color .al-lead input::placeholder {
	color: rgba( 255, 255, 255, 0.5 );
}

.has-deep-900-background-color .al-lead__status,
.has-teal-700-background-color .al-lead__status {
	color: var( --al-teal-300 );
}

/* =============================================================== *
 * Icones (Font Awesome, servido localmente)
 *
 * Regra de uso: icone acompanha texto, nunca substitui. Tamanho preso ao
 * `em` do contexto, cor herdada, e `aria-hidden` no HTML — quem usa leitor
 * de tela ouve o rotulo, nao o nome do glifo.
 *
 * Se o Font Awesome sumir (plugin desativado), nada quebra: os elementos
 * abaixo tem largura zero e o layout se fecha.
 * =============================================================== */

.al-ico {
	/* `em` e nao `rem`: o icone acompanha o texto ao lado dele. */
	font-size: 0.9em;
	line-height: 1;
	flex: none;
	/* Alinhamento optico: a caixa do glifo tem folga embaixo. */
	transform: translateY( -0.03em );
}

/* Icone de apoio, ao lado de texto secundario. */
.al-ico--suave {
	opacity: 0.62;
}

/* Icone que carrega a cor da marca (WhatsApp, destaque). */
.al-ico--acao { color: var( --al-acao ); }
.al-ico--marca { color: var( --al-primaria ); }

/* --------------------------------------------------------------- *
 * Botoes com icone
 * --------------------------------------------------------------- */

/* A seta anda um pouco no hover — sinaliza direcao sem animar o botao todo. */
.wp-block-button__link .al-ico--seta {
	transition: transform 0.18s ease;
}

.wp-block-button__link:hover .al-ico--seta {
	transform: translateX( 3px );
}

/* --------------------------------------------------------------- *
 * Blocos de contato (rodape, pagina de contato)
 * --------------------------------------------------------------- */

.al-contato-lista {
	display: grid;
	gap: 0.875rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.al-contato-lista li {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	gap: 0.75rem;
	align-items: start;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.al-contato-lista .al-ico {
	margin-top: 0.25em;
	opacity: 0.55;
}

.al-contato-lista a {
	text-decoration: none;
}

.al-contato-lista a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* No rodape a lista vem logo abaixo de um rotulo; na secao de contato da home
   ela vem depois de um paragrafo e precisa do respiro. */
.al-contato-lista--contato {
	margin-top: var( --al-space-60 );
}

/*
 * Variante em faixa ESCURA (a faixa de formulario com foto em duotone).
 *
 * Sem isto o texto e o link herdam o grafite do corpo da pagina e desaparecem
 * sobre a foto. O icone tambem sobe de 55% para 80% de opacidade e ganha a cor
 * de acento: a 55% sobre foto escura ele simplesmente nao existe.
 */
.al-contato-lista--claro,
.al-contato-lista--claro a {
	color: var( --al-white );
}

.al-contato-lista--claro .al-ico {
	opacity: 0.85;
	color: var( --al-teal-300 );
}

/* --------------------------------------------------------------- *
 * Redes sociais
 * --------------------------------------------------------------- */

.al-social {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: var( --al-space-40 ) 0 0;
	padding: 0;
}

.al-social a {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.al-social a:hover {
	background: var( --al-white );
	border-color: var( --al-white );
	color: var( --al-deep-900 );
}

.al-social .al-ico {
	font-size: 1rem;
	opacity: 1;
}

/* --------------------------------------------------------------- *
 * Botao flutuante e CTA de WhatsApp
 * --------------------------------------------------------------- */

.al-btn-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

/* --------------------------------------------------------------- *
 * Icone dentro do rotulo de secao
 * --------------------------------------------------------------- */

.al-rotulo .al-ico {
	font-size: 0.85em;
	opacity: 0.9;
}

/* =============================================================== *
 * Paginas internas — sistema de layout
 *
 * O problema que estes componentes resolvem: toda interna era uma coluna de
 * leitura de 64ch alinhada a esquerda dentro de um container de 1240px. Como a
 * medida de leitura tem que ficar em 64ch (linha mais longa que isso cansa),
 * sobravam cerca de 40% da largura VAZIOS em toda a altura da pagina. Em
 * /andrea/ isso somava 5422px de pagina com um corredor branco do lado direito,
 * do inicio ao fim.
 *
 * Nao se resolve alargando a medida. Resolve-se dando FUNCAO aquela faixa e
 * trocando as listas longas por grades — e o que a cliente descreveu na revisao
 * anterior como "arquivo do Word mal feito", agora em outra escala.
 *
 * Os quatro sintomas e o componente de cada um:
 *
 *   corredor vazio ao lado da prosa    ->  al-artigo (prosa + aparte fixo)
 *   pagina que comeca sem entrada      ->  al-lede
 *   fato curto ocupando faixa inteira  ->  al-fatos
 *   frase curta em linha de definicao  ->  al-destaques
 *
 * E al-citacao, que enche o aparte com material que JA EXISTE: uma frase da
 * propria copy promovida a tipografia de destaque. Nao e conteudo novo — e
 * hierarquia sobre o mesmo texto, que e o que o projeto permite.
 * =============================================================== */

/* --------------------------------------------------------------- *
 * 🔴 Escape da medida de leitura, para os componentes que sao GRADE.
 *
 * base.css limita todo `p`, `ul` e `ol` filho direto de `.al-prosa` a 64ch, que
 * e o certo para texto corrido. Mas `al-fatos`, `al-destaques` e `al-lista-dupla`
 * sao `ul` e nao sao texto corrido: presas em 64ch, param em 660px dentro de um
 * container de 1240px — nasceriam com o mesmo defeito que existem para corrigir.
 *
 * 🔴 Tem que ser seletor com PAI. `max-width: none` declarado so na classe nao
 * funciona: a regra de base e `:is( ... ) > :is( p, ul, ol )`, que pontua
 * (0,1,1) porque o `:is()` assume a especificidade do seu argumento mais alto —
 * enquanto `.al-fatos` sozinho pontua (0,1,0) e perde. Levei um render inteiro
 * para entender por que a grade continuava em 660px.
 * --------------------------------------------------------------- */

:is( .wp-block-post-content, .entry-content, .al-prosa )
	> :is( .al-fatos, .al-destaques, .al-lista-dupla, .al-trilha, .al-cartoes, .al-checks ) {
	max-width: none;
}

/* --------------------------------------------------------------- *
 * al-lede — paragrafo de entrada
 *
 * A primeira frase da pagina em corpo maior e medida mais curta. Da a pagina um
 * ponto de entrada, em vez de ela comecar com o mesmo peso do quinto paragrafo.
 *
 * Medida menor de proposito: 48ch em corpo grande ocupa quase a mesma largura
 * otica que 64ch em corpo normal, entao os dois blocos terminam alinhados.
 * --------------------------------------------------------------- */

/*
 * 🔴 Sem `max-width` proprio quando esta dentro do `al-artigo`: quem define a
 * medida e a coluna da grade, e a lede tem que terminar no MESMO eixo direito
 * dos paragrafos abaixo dela.
 *
 * Na primeira versao ela vivia fora do `al-artigo`, e a largura vinha da regra
 * global de 64ch — 929px contra os 832px da coluna de prosa. A lede passava 97px
 * alem do bloco de texto, e o desalinhamento do lado direito era visivel de
 * longe. Mover a lede para dentro da coluna resolve por estrutura, sem precisar
 * de numero calculado a mao que quebraria se a grade mudasse.
 */
.al-lede {
	max-width: 48ch;
	margin: 0 0 var( --al-space-60 );
	font-size: var( --al-fs-corpo-grande );
	line-height: 1.45;
	color: var( --al-ink-900 );
	text-wrap: pretty;
}

/* --------------------------------------------------------------- *
 * al-lede--centro — a linha de abertura como frase de passagem
 *
 * Variante centralizada, para quando o lede NAO abre a pagina: na /carreira/ ele
 * fica ENTRE a faixa dos quatro numeros e a linha do tempo, fazendo a ponte
 * entre o que ela conquistou e a cronologia. Alinhado a esquerda naquele lugar,
 * ele lia como legenda solta da faixa de cima.
 *
 * O filete laranja acima e o mesmo elemento que marca os titulos de secao
 * (`al-titulo-secao`), so centralizado: e o que diz "isto e uma frase de
 * abertura", e nao um paragrafo que sobrou.
 *
 * 🔴 O seletor e' longo de proposito, e cada parte dele esta pagando uma conta
 * de especificidade. A regra do base.css que da `margin-bottom: 104px` a
 * conteudo comum seguido de faixa sangrada pontua (0,3,0):
 * `:is( ... ) > :not( ... ):has( + :is( ... ) )` — as tres pseudo-classes
 * assumem a especificidade do argumento mais alto, que e uma classe. Para vencer
 * sem `!important` sao necessarios o pai, a tag e as DUAS classes: (0,3,1).
 *
 * Medido: com `.al-lede--centro` sozinho a folga de baixo continuava 104px.
 *
 * `text-wrap: balance` e nao `pretty`: em bloco centralizado de duas ou tres
 * linhas, o que incomoda e uma linha muito mais curta que a outra, nao a viuva.
 * --------------------------------------------------------------- */

:is( .wp-block-post-content, .entry-content ) > p.al-lede.al-lede--centro {
	max-width: 46ch;
	/*
	 * 🔴 `margin-inline` com `!important` porque a medida de leitura do base.css
	 * tambem usa `!important`: ela alinha todo `p` filho do post-content no eixo
	 * de 1240px (`margin-inline: max(0px, calc((100% - wide)/2)) auto !important`),
	 * e sem vencer isso o bloco centralizado nascia encostado a esquerda — texto
	 * centrado dentro de uma caixa fora do centro. Medido: margem esquerda 44px,
	 * direita 616px.
	 */
	margin-block: var( --al-space-80 ) var( --al-space-70 );
	margin-inline: auto !important;
	text-align: center;
	text-wrap: balance;
}

.al-lede--centro::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin: 0 auto var( --al-space-40 );
	background: var( --al-acao );
}

/* --------------------------------------------------------------- *
 * 🔴 Respiro entre o carrossel da linha do tempo e a faixa sangrada seguinte.
 *
 * A regra do base.css que zera o vao entre blocos `align` existe para faixas com
 * FUNDO: duas faixas coloridas encostadas leem como uma sequencia, e 24px de
 * branco entre elas leem como erro. Mas a linha do tempo e `alignwide` SEM
 * fundo — conteudo, nao faixa. Sem esta regra, o ultimo card do carrossel
 * encosta na borda de cima da foto sangrada.
 *
 * Antes disso existia um `wp:spacer` de |100 no conteudo da /carreira/, que
 * somava a propria altura aos 104px da regra de respiro e virava 272px de vazio.
 * O espacador saiu; o respiro certo e este, e ele sabe quando aplicar.
 * --------------------------------------------------------------- */

:is( .wp-block-post-content, .entry-content ) > .al-timeline:has( + .alignfull ) {
	margin-bottom: var( --al-space-80 );
}

/* Dentro de faixa escura o corpo grande pede um branco menos duro. */
.has-deep-900-background-color .al-lede,
.has-teal-700-background-color .al-lede {
	color: rgba( 255, 255, 255, 0.94 );
}

/* --------------------------------------------------------------- *
 * al-artigo — prosa com aparte
 *
 * Grade assimetrica: leitura na coluna larga, aparte na estreita. O aparte e
 * `sticky` porque acompanha a leitura, em vez de ficar orfao no topo de um bloco
 * de 900px de texto — e o que faz a faixa parecer intencional e nao sobra.
 *
 * 🔴 `minmax( 0, ... )` nas duas colunas: sem isso, uma palavra longa, uma
 * tabela ou um `pre` na coluna de prosa estica a coluna alem da fracao e a grade
 * inteira estoura para a direita. Grade com `fr` e conteudo de largura livre
 * precisa do minimo zerado.
 *
 * O breakpoint e 62em, e nao os 52em do resto: entre 52 e 62 a coluna de prosa
 * cairia abaixo de 45ch, apertado demais para leitura corrida.
 * --------------------------------------------------------------- */

.al-artigo {
	display: grid;
	gap: var( --al-space-60 );
}

@media ( min-width: 62em ) {
	.al-artigo {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 21rem );
		gap: var( --al-space-80 );
		align-items: start;
	}

	.al-artigo__aparte {
		position: sticky;
		top: calc( var( --al-header-h ) + var( --al-space-50 ) );
	}
}

/* --------------------------------------------------------------- *
 * al-artigo--cartoes — variante de aparte LARGA
 *
 * Pedido do cliente para a /a-escola/ em 22/08: proposito, missao e valores em
 * "uma coluna 40% a direita", com o texto principal a esquerda.
 *
 * 1.5fr / 1fr da exatamente 60/40 do espaco util (o `gap` sai da conta antes da
 * divisao das fracoes), e continua sendo grade — nao ha largura fixa para
 * recalcular quando o container muda.
 *
 * O `sticky` do aparte e' DESLIGADO aqui: ele existe para uma citacao curta
 * acompanhar a leitura. Uma pilha de tres cartoes e' conteudo com peso proprio,
 * e grudada no topo ela desliza sobre a prosa ate' sobrar espaco vazio embaixo.
 * --------------------------------------------------------------- */

@media ( min-width: 62em ) {
	.al-artigo--cartoes {
		grid-template-columns: minmax( 0, 1.5fr ) minmax( 0, 1fr );
	}

	.al-artigo--cartoes .al-artigo__aparte {
		position: static;
	}
}

/*
 * Os titulos de secao dentro da prosa do al-artigo precisam de respiro proprio:
 * a regra `> * + *` do componente da um espaco uniforme, que entre paragrafo e
 * titulo novo e' pouco. O titulo tem que anunciar que uma secao comecou.
 */
.al-artigo__prosa > h2 + * {
	margin-top: var( --al-space-40 );
}

.al-artigo__prosa > * + h2 {
	margin-top: var( --al-space-70 );
}

/*
 * A prosa dentro do al-artigo NAO usa mais a medida global de 64ch: quem limita
 * a linha passa a ser a propria coluna da grade. Deixar as duas limitando ao
 * mesmo tempo criaria um segundo vazio dentro da coluna larga — o mesmo defeito,
 * so um nivel mais fundo.
 */
.al-artigo__prosa > :is( p, ul, ol ) {
	max-width: none;
}

.al-artigo__prosa > * + * {
	margin-top: var( --al-space-50 );
}

/* --------------------------------------------------------------- *
 * al-citacao — frase promovida
 *
 * Enche o aparte. Tipografia de display em caixa alta, filete laranja no topo:
 * o mesmo vocabulario dos titulos de secao, em escala menor.
 * --------------------------------------------------------------- */

.al-citacao {
	margin: 0;
	padding-top: var( --al-space-60 );
	border-top: 3px solid var( --al-orange-500 );
}

.al-citacao__texto {
	margin: 0;
	font-family: var( --al-font-display );
	font-size: clamp( 1.375rem, 1.9vw, 1.75rem );
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var( --al-teal-900 );
}

.al-citacao__fonte {
	margin: var( --al-space-40 ) 0 0;
	font-size: var( --al-fs-pequeno );
	line-height: 1.5;
	color: var( --al-ink-600 );
}

.has-deep-900-background-color .al-citacao__texto,
.has-teal-700-background-color .al-citacao__texto {
	color: var( --al-white );
}

.has-deep-900-background-color .al-citacao__fonte,
.has-teal-700-background-color .al-citacao__fonte {
	color: rgba( 255, 255, 255, 0.7 );
}

/* --------------------------------------------------------------- *
 * al-fatos — grade de fatos datados
 *
 * Substitui a lista de definicoes onde o item e um ano mais uma linha. Em
 * /andrea/, "Formacao e certificacoes" tinha sete itens em faixas de largura
 * cheia: 630px de altura para sete fatos curtos, com o lado direito quase vazio
 * em todos. Em grade de tres colunas a mesma informacao ocupa um terco da altura
 * e fica comparavel de bater o olho, que e o que se espera de um curriculo.
 *
 * `auto-fit` com `minmax` em vez de numero fixo de colunas: a grade se resolve
 * sozinha em qualquer largura, e um item a mais no futuro nao pede CSS novo.
 * --------------------------------------------------------------- */

/*
 * 🔴 `max-width: none` e obrigatorio, nao ajuste fino. A regra global de medida
 * de leitura (base.css) alcanca todo `p`, `ul` e `ol` filho direto de
 * `.al-prosa` — e a grade E um `ul`. Sem isto ela para em 64ch, ou seja 660px
 * dentro de um container de 1240px: a grade nasceu com o mesmo defeito que
 * existe para corrigir. Vale igual para `al-destaques` e `al-lista-dupla`.
 *
 * 🔴 Os filetes sao `box-shadow` inset-like em cada item, e nao o fundo do
 * container aparecendo pelo `gap`. Com fundo no container, a celula VAZIA que
 * sobra na ultima linha (sete itens em quatro colunas deixam tres vazias) pinta
 * um retangulo cinza solto do lado do ultimo card. Com anel de 1px por item, os
 * aneis de vizinhos se sobrepoem dentro do gap e desenham uma linha unica, e
 * onde nao ha item nao ha nada.
 */
.al-fatos {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
	gap: 1px;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.al-fatos__item {
	padding: var( --al-space-50 ) var( --al-space-50 ) var( --al-space-60 );
	background: var( --al-white );
	box-shadow: 0 0 0 1px color-mix( in srgb, var( --al-ink-300 ) 70%, transparent );
}

.has-sand-50-background-color .al-fatos__item {
	background: var( --al-sand-50 );
}

.al-fatos__marca {
	display: block;
	margin-bottom: var( --al-space-30 );
	font-family: var( --al-font-display );
	font-size: 1.625rem;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var( --al-teal-700 );
}

.al-fatos__texto {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var( --al-ink-900 );
}

/* --------------------------------------------------------------- *
 * al-lista-dupla — lista de frases curtas em duas colunas
 *
 * Para lista cujos itens sao uma frase de uma linha. Em coluna unica, seis itens
 * desses ocupam a altura de um paragrafo longo e deixam dois tercos da largura
 * vazios; em duas colunas a lista vira um bloco compacto, que e como se le lista
 * de qualificacoes.
 *
 * 🔴 `break-inside: avoid` no `li`: sem isso o navegador corta um item no meio,
 * deixando a primeira linha no pe de uma coluna e a segunda no topo da outra.
 * Acontece exatamente com o item mais longo, que e o que mais chama atencao.
 *
 * Uma coluna abaixo de 52em: em celular, duas colunas de frase curta dao linhas
 * de tres ou quatro palavras.
 * --------------------------------------------------------------- */

.al-lista-dupla {
	max-width: none;
}

@media ( min-width: 52em ) {
	.al-lista-dupla {
		columns: 2;
		column-gap: var( --al-space-80 );
	}

	.al-lista-dupla li {
		break-inside: avoid;
	}
}

/* --------------------------------------------------------------- *
 * al-trilha — linha do tempo de formacao
 *
 * Substitui a grade `al-fatos` em "Formacao e certificacoes". A grade resolveu o
 * desperdicio de altura, mas o cliente reprovou a forma: "esses quadrados feios".
 * E tinha razao em outra coisa tambem — formacao e cronologia, e cronologia pede
 * linha, nao caixa. A grade nao dizia que 2022 vem depois de 2017.
 *
 * O desenho: uma linha vertical continua com um marcador por item, o ano em
 * tipografia de display a esquerda da linha e o texto a direita. Le-se de cima
 * para baixo como uma trajetoria.
 *
 * 🔴 Nao confundir com `al-timeline`, o carrossel de marcos da carreira. Sao
 * dois componentes de proposito: aquele e horizontal, com card e foto, e conta
 * nove marcos com narrativa; este e vertical, sem foto, e lista formacao. Se os
 * dois ficassem parecidos, a pagina teria duas linhas do tempo competindo.
 * --------------------------------------------------------------- */

.al-trilha {
	/*
	 * 8.5rem, e nao 6.5: o ultimo item nao tem ano ("Surf Salva", que o documento
	 * da cliente traz sem data) e em 6.5rem ele quebrava em duas linhas dentro da
	 * coluna. Alargar o eixo custa 2rem da coluna de texto, que tem sobra; a
	 * alternativa era inventar uma marca curta para aquele item.
	 */
	--al-trilha-eixo: 8.5rem;

	position: relative;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 🔴 A linha e um SEGMENTO por item, de um marcador ao proximo — nao uma linha
 * unica desenhada no `ol`.
 *
 * Com uma linha unica, as pontas dela sao ancoradas nas bordas do bloco, e a
 * altura dos itens nao e uniforme: o ultimo item ocupa duas linhas de texto,
 * entao a linha passava bem abaixo do ultimo ponto e ficava com um rabo solto —
 * o que le como corte de conteudo, nao como fim de trajetoria.
 *
 * Por segmento, quem nao tem proximo nao desenha nada, e o fim da linha e sempre
 * o ultimo marcador, qualquer que seja a altura dos itens.
 *
 * `top`/`bottom` em 1.4rem saem do centro do ponto (1.05rem de topo + 5,5px de
 * raio); o `bottom` negativo faz o segmento atravessar o espaco entre os itens e
 * chegar ao centro do ponto seguinte.
 */
.al-trilha__item:not( :last-child )::after {
	content: "";
	position: absolute;
	top: 1.4rem;
	bottom: -1.4rem;
	left: var( --al-trilha-eixo );
	width: 2px;
	background: color-mix( in srgb, var( --al-teal-500 ) 35%, transparent );
}

.al-trilha__item {
	position: relative;
	display: grid;
	grid-template-columns: var( --al-trilha-eixo ) 1fr;
	column-gap: var( --al-space-60 );
	align-items: baseline;
	padding-block: var( --al-space-40 );
}

/*
 * O marcador fica no `li` e nao no `ol`, porque precisa acompanhar a linha de
 * base do ano. O anel branco separa o ponto da linha que passa atras dele.
 */
.al-trilha__item::before {
	content: "";
	position: absolute;
	top: 1.05rem;
	left: var( --al-trilha-eixo );
	width: 11px;
	height: 11px;
	margin-left: -4.5px;
	border-radius: 50%;
	background: var( --al-teal-500 );
	box-shadow: 0 0 0 4px var( --al-white );
}

/* Em faixa areia o anel do marcador acompanha o fundo, senao vira um furo branco. */
.has-sand-50-background-color .al-trilha__item::before {
	box-shadow: 0 0 0 4px var( --al-sand-50 );
}

/*
 * 🔴 O `padding-right` nao e respiro estetico: e o que impede o ano de bater no
 * marcador. A coluna do ano tem a largura do eixo, e o ano alinha a direita —
 * ou seja termina EXATAMENTE onde o ponto e desenhado. Sem este afastamento, o
 * marcador fica sobre o ultimo digito ("2022" com a bolinha em cima do 2).
 *
 * 1.5rem cobre o raio do ponto (5,5px) mais o anel de 4px com folga.
 */
.al-trilha__ano {
	padding-right: var( --al-space-50 );
	font-family: var( --al-font-display );
	font-size: 1.5rem;
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: var( --al-teal-700 );
	text-align: right;
}

.al-trilha__texto {
	margin: 0;
	max-width: 52ch;
	font-size: var( --al-fs-corpo );
	line-height: 1.55;
	color: var( --al-ink-900 );
}

/*
 * No celular o ano sobe para cima do texto e a linha sai de cena: com 320px de
 * largura, uma coluna de 6.5rem para o ano deixa o texto em 20 caracteres por
 * linha. A cronologia continua legivel pela ordem e pelo ano em destaque.
 */
@media ( max-width: 40em ) {
	.al-trilha__item::before,
	.al-trilha__item::after {
		display: none;
	}

	.al-trilha__item {
		grid-template-columns: 1fr;
		row-gap: var( --al-space-30 );
		padding-block: var( --al-space-50 );
		border-top: 1px solid color-mix( in srgb, var( --al-ink-300 ) 70%, transparent );
	}

	.al-trilha__ano {
		text-align: left;
	}
}

/* --------------------------------------------------------------- *
 * al-cartoes — cartoes com lista marcada
 *
 * Para bloco institucional: um cartao por instituicao, com as atuacoes em lista
 * de itens marcados. Substitui a lista de definicoes em "Atuacao profissional
 * atual", onde as duas instituicoes eram linhas empilhadas de largura cheia e o
 * nome, em display, quebrava em tres linhas dentro de uma coluna estreita.
 *
 * Duas colunas: as duas instituicoes passam a ser comparaveis lado a lado, que e
 * a relacao real entre elas — nao uma depois da outra.
 * --------------------------------------------------------------- */

.al-cartoes {
	display: grid;
	gap: var( --al-space-60 );
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media ( min-width: 52em ) {
	.al-cartoes {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var( --al-space-70 );
	}
}

/*
 * Sombra difusa e quase sem cor, em duas camadas: uma curta que assenta o cartao
 * e uma longa e muito clara que da a profundidade. Uma sombra unica forte
 * desenha a borda da caixa, que e o oposto do que se quer aqui — o cartao tem
 * que parecer apoiado no fundo, nao recortado dele.
 */
.al-cartoes__item {
	display: flex;
	flex-direction: column;
	gap: var( --al-space-50 );
	padding: var( --al-space-60 );
	border-radius: var( --al-radius-md );
	background: var( --al-white );
	box-shadow:
		0 1px 2px rgba( 6, 42, 46, 0.04 ),
		0 12px 32px -12px rgba( 6, 42, 46, 0.14 );
}

.al-cartoes__titulo {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.15;
}

/* --------------------------------------------------------------- *
 * al-checks — lista com marca de confirmado
 *
 * O icone vem do Font Awesome, que ja e a stack do projeto. Fica em `::before`
 * de um `<i>` proprio e nao em `list-style-image`: assim alinha na primeira
 * linha do item e nao no meio do bloco quando o texto ocupa duas ou tres linhas.
 * --------------------------------------------------------------- */

.al-checks {
	display: grid;
	gap: var( --al-space-40 );
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.al-checks li {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	column-gap: var( --al-space-40 );
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var( --al-ink-900 );
}

.al-checks__ico {
	margin-top: 0.28em;
	font-size: 0.8125rem;
	color: var( --al-teal-500 );
}

/* --------------------------------------------------------------- *
 * al-destaques — reescrito como CARTAO
 *
 * Antes era titulo sobre um filete turquesa, solto no fundo da faixa. Duas
 * reprovacoes do cliente numa so passada: os itens nao pareciam cartoes, e o
 * filete de cada um encostava no paragrafo de introducao logo acima — texto
 * colado, sem espacamento.
 *
 * Agora: cartao com fundo branco, sombra difusa e ICONE medio no topo. Mesma
 * receita de `al-cartoes`, em escala menor — a sombra em duas camadas (uma curta
 * que assenta, uma longa e clarissima que da profundidade) e o que faz o cartao
 * parecer apoiado no fundo em vez de recortado dele.
 * --------------------------------------------------------------- */

.al-destaques {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
	gap: var( --al-space-60 );
	/* Ver a nota de `al-fatos`: a medida de leitura global alcanca este `ul`. */
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.al-destaques__item {
	display: flex;
	flex-direction: column;
	gap: var( --al-space-40 );
	padding: var( --al-space-60 );
	border-radius: var( --al-radius-md );
	background: var( --al-white );
	box-shadow:
		0 1px 2px rgba( 6, 42, 46, 0.04 ),
		0 12px 32px -12px rgba( 6, 42, 46, 0.14 );
}

/*
 * O icone e o unico elemento colorido do cartao, e por isso ele carrega a
 * hierarquia: 1.75rem e "medio" de proposito — em 1.25rem some dentro do
 * espaco branco, em 2.5rem passa a competir com o titulo.
 */
.al-destaques__ico {
	font-size: 1.75rem;
	line-height: 1;
	color: var( --al-teal-500 );
}

.al-destaques__titulo {
	margin: 0;
	font-family: var( --al-font-display );
	font-size: 1.25rem;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --al-ink-900 );
}

.al-destaques__texto {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --al-ink-600 );
}

/*
 * Em faixa escura o cartao branco viraria um bloco chapado no meio do petroleo.
 * Ali ele fica translucido, com borda de luz em vez de sombra — sombra sobre
 * fundo escuro nao aparece, so suja.
 */
.has-deep-900-background-color .al-destaques__item,
.has-teal-700-background-color .al-destaques__item {
	background: rgba( 255, 255, 255, 0.06 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.12 );
}

.has-deep-900-background-color .al-destaques__ico,
.has-teal-700-background-color .al-destaques__ico {
	color: var( --al-teal-300 );
}

.has-deep-900-background-color .al-destaques__titulo,
.has-teal-700-background-color .al-destaques__titulo {
	color: var( --al-white );
}

.has-deep-900-background-color .al-destaques__texto,
.has-teal-700-background-color .al-destaques__texto {
	color: rgba( 255, 255, 255, 0.82 );
}

/* --------------------------------------------------------------- *
 * 🔴 Respiro antes de bloco de grade dentro de `.al-prosa`
 *
 * `base.css` da margem de topo a `h2`, `h3` e `h4` dentro de `.al-prosa`, mas
 * nao a um `ul` que vem depois de um `p`: entre dois paragrafos o espaco vem da
 * margem padrao do navegador, e um `ul` de grade nao tem essa margem.
 *
 * Resultado visto pelo cliente: a segunda linha do paragrafo de introducao
 * encostava no filete do topo dos cartoes do metodo M.A.R. — os dois ocupando a
 * mesma faixa de pixels.
 * --------------------------------------------------------------- */

:is( .wp-block-post-content, .entry-content, .al-prosa )
	> :is( .al-destaques, .al-fatos, .al-trilha, .al-cartoes ) {
	margin-top: var( --al-space-70 );
}

/* --------------------------------------------------------------- *
 * al-faixa-form — a faixa de contato com foto em duotone
 *
 * Pedido do cliente em 22/08: "melhore esse form, coloque uma imagem de fundo
 * com opacidade e fundo azul, talvez um duotone".
 *
 * O bloco e um `wp:cover` com foto. Tres camadas, nesta ordem:
 *
 *   1. a foto, com o filtro de duotone do al-core (`#al-duotone-mar`), que
 *      mapeia a imagem entre deep-900 e teal-300 — as cores da marca;
 *   2. um veu em gradiente de deep-900, que garante o contraste do texto branco
 *      independentemente do trecho da foto que aparecer;
 *   3. o conteudo: chamada e contato a esquerda, formulario a direita.
 *
 * O filtro vive num <svg> impresso pelo al-core no rodape de toda pagina dos
 * DOIS sites (inc/duotone.php), com as cores lidas da paleta do tema. E o mesmo
 * duotone da /bio.
 * --------------------------------------------------------------- */

.al-faixa-form .wp-block-cover__image-background {
	filter: url( "#al-duotone-mar" );
}

/*
 * O veu do cover vem do proprio WordPress (`has-background-dim-NN`), mas em cor
 * chapada. Aqui ele vira gradiente: mais fechado embaixo, onde fica o botao, e
 * mais aberto em cima, onde a foto ainda precisa aparecer.
 *
 * `!important` porque o core escreve a cor e a opacidade em regra propria de
 * mesma especificidade — e o gradiente tem que substituir as duas.
 */
.al-faixa-form .wp-block-cover__background {
	background:
		linear-gradient(
			180deg,
			rgba( 6, 42, 46, 0.72 ) 0%,
			rgba( 6, 42, 46, 0.82 ) 55%,
			rgba( 6, 42, 46, 0.9 ) 100%
		) !important;
	opacity: 1 !important;
}

/*
 * Navegador sem suporte a filtro SVG em CSS (ou com o SVG bloqueado) mostra a
 * foto original sob o veu — perde o duotone, nao perde a legibilidade. Por isso
 * o veu nao depende do filtro.
 */
@supports not ( filter: url( "#x" ) ) {
	.al-faixa-form .wp-block-cover__image-background {
		filter: grayscale( 1 ) contrast( 1.05 );
	}
}

/* --------------------------------------------------------------- *
 * Bio — a pagina /bio, o "link da bio" do Instagram
 *
 * A cliente pediu um "Linktree" e a decisao foi construir no proprio site.
 * O formato e o que o publico dela ja reconhece: uma coluna estreita, centrada
 * na tela, com a foto no topo e os links empilhados em botoes grandes.
 *
 * Em 22/08/2026 ela pediu duas mudancas: separar os links em duas abas
 * ("Surfschool" e "Andrea Lopes", "pode ser um switch estilizado em cima") e
 * uma foto de surf no fundo, "com duotone azul cor do site".
 *
 * `100svh` e nao `100vh`: no Safari do iPhone a barra de endereco entra e sai
 * da conta do `vh`, e o ultimo botao ficava escondido atras dela. A unidade
 * `svh` (small viewport height) mede a tela COM a barra visivel, que e o pior
 * caso — o layout nasce certo e sobra espaco quando a barra recolhe.
 *
 * `justify-content: center` com `margin: auto` no filho, para a coluna ficar
 * centrada quando cabe e poder rolar quando nao cabe (o `center` puro corta o
 * topo do conteudo em tela baixa, que e o defeito classico deste layout).
 * --------------------------------------------------------------- */

.al-bio {
	display: flex;
	min-height: 100svh;
	padding: var( --al-space-70 ) var( --al-pad-x );
}

/*
 * 🔴 Cancela a subida do <main> que o base.css aplica a toda `.page`.
 *
 * Lá a regra existe porque o cabeçalho flutua por cima da imagem de abertura, e
 * o `<main>` sobe exatamente a altura dele para a foto começar no topo da tela.
 * Esta página não tem cabeçalho nenhum — então a compensação não tinha o que
 * compensar e apenas puxava a foto de perfil 76px para fora da tela, cortada.
 *
 * O seletor repete o `body:is( .page )` da regra original de propósito: com
 * `.al-bio` a mais, a especificidade fica acima dela sem depender da ordem em
 * que os arquivos de CSS são enfileirados.
 */
body:is( .page ) .wp-site-blocks > main.al-bio {
	margin-top: 0;
}

/*
 * O `post-content` e o filho que carrega a coluna.
 *
 * `position: relative; z-index: 0` nao e' decoracao: e' o que cria o contexto de
 * empilhamento onde a foto de fundo (`z-index: -1`) fica ATRAS dos links e ainda
 * assim na FRENTE do fundo escuro do <main>. Sem ele, o `-1` sai do contexto e a
 * foto desaparece atras da cor de fundo da pagina.
 */
.al-bio > .wp-block-post-content {
	position: relative;
	z-index: 0;
	width: 100%;
	max-width: 26rem;
	margin: auto;
	text-align: center;
}

/* --------------------------------------------------------------- *
 * A foto de fundo com duotone azul
 *
 * O filtro em si vive num <svg> inline no conteudo da pagina (montado pelo
 * `seed-bio-andrea.php` a partir dos tokens deep-900 e teal-300) — `tableValues`
 * e' atributo de SVG e nao aceita `var()`, entao a cor nao pode vir do CSS.
 *
 * `position: fixed` de proposito: a foto fica parada quando a lista rola, e
 * cobre a tela inteira sem depender da altura do conteudo.
 * --------------------------------------------------------------- */

/* O <svg> do filtro nao desenha nada — so' nao pode ocupar espaco no fluxo. */
.al-bio__filtro {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.al-bio__fundo {
	position: fixed;
	inset: 0;
	/*
	 * 🔴 `margin: 0` e' obrigatorio, nao higiene.
	 *
	 * O WordPress escreve `:where(.is-layout-flow) > * { margin-block-start: 24px }`
	 * para o blockGap, e essa margem tambem se aplica a um elemento `fixed` com
	 * os quatro `inset` definidos: ela ENCOLHE a caixa. Sem esta linha a foto
	 * comecava 24px abaixo do topo da tela e sobrava uma faixa do fundo escuro do
	 * <main> atravessada em cima da pagina.
	 */
	margin: 0;
	/*
	 * 🔴 E `max-width: none` pelo mesmo motivo.
	 *
	 * O `post-content` e' `is-layout-constrained`, e o WordPress escreve
	 * `:where(.is-layout-constrained) > * { max-width: <content-size>; margin-inline: auto }`
	 * para TODO filho direto. No celular isso nao aparece (a tela e' mais estreita
	 * que o content-size), mas no desktop a foto virava uma faixa de 720px
	 * centralizada, com o fundo escuro sobrando dos dois lados.
	 *
	 * As duas regras do WordPress vem com `:where()`, ou seja especificidade zero:
	 * uma classe basta para vencer as duas, sem `!important`.
	 */
	max-width: none;
	z-index: -1;
	overflow: hidden;
}

.al-bio__fundo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: url( #al-bio-duotone );
}

/*
 * Vela sobre a foto, em deep-900 (o mesmo `--al-deep-900`, em rgba porque
 * gradiente pede canal alfa).
 *
 * Sem ela o texto branco cai sobre as luzes do duotone — a espuma da onda vira
 * teal-300 claro, e branco sobre teal-300 da 2:1 de contraste. Com 55% em cima e
 * 72% embaixo, o pior ponto da tela fica em ~5,7:1, acima do 4,5:1 do WCAG AA,
 * e a foto continua visivel.
 */
.al-bio__fundo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba( 6, 42, 46, 0.55 ) 0%,
		rgba( 6, 42, 46, 0.72 ) 100%
	);
}

.al-bio__foto {
	width: 7.5rem;
	height: 7.5rem;
	margin: 0 auto var( --al-space-50 );
	border-radius: var( --al-radius-pill );
	overflow: hidden;
	border: 3px solid var( --al-teal-300 );
}

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

.al-bio__nome {
	font-family: var( --al-font-display );
	font-weight: var( --al-display-peso );
	font-size: var( --al-fs-titulo-3 );
	line-height: var( --al-lh-titulo );
	letter-spacing: var( --al-ls-titulo );
	text-transform: var( --al-display-transform );
	color: var( --al-white );
	margin: 0 0 var( --al-space-20 );
}

/*
 * A frase era teal-300 e passou a ser branca translucida.
 *
 * Turquesa claro funcionava sobre o fundo chapado de antes; sobre a foto com
 * duotone azul, e' turquesa sobre turquesa — o texto some justamente onde a onda
 * clareia. Branco a 85% mantem a hierarquia (nao compete com o nome) e nao
 * depende do que estiver atras.
 */
.al-bio__frase {
	font-size: var( --al-fs-pequeno );
	line-height: var( --al-lh-compacto );
	text-transform: uppercase;
	letter-spacing: var( --al-ls-caixa-alta );
	color: rgba( 255, 255, 255, 0.85 );
	margin: 0 0 var( --al-space-50 );
}

/* --------------------------------------------------------------- *
 * O switch das duas abas — sem uma linha de JavaScript
 *
 * Dois `input[type=radio]` escondidos, irmaos das duas listas: `:checked ~ #id`
 * mostra a lista da aba escolhida. O que a pessoa ve e toca sao os <label>.
 *
 * Por que nao JS: quem chega aqui vem do app do Instagram, em webview de
 * celular, com a rede que der. Trocar de aba nao pode depender de um arquivo ter
 * carregado. E o radio ja vem com o que um switch feito a mao costuma perder —
 * navegacao por setas do teclado e o anuncio de "1 de 2" no leitor de tela.
 * --------------------------------------------------------------- */

/*
 * Escondido, mas ainda focavel: `display: none` ou `visibility: hidden` tirariam
 * o radio da ordem de tabulacao e o switch deixaria de funcionar por teclado.
 */
.al-bio__radio {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.al-bio__abas {
	display: flex;
	gap: 0.25rem;
	margin: 0 auto var( --al-space-50 );
	padding: 0.25rem;
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	border-radius: var( --al-radius-pill );
	background: rgba( 6, 42, 46, 0.55 );
	backdrop-filter: blur( 8px );
}

.al-bio__aba {
	/* 2.75rem = 44px, o alvo de toque minimo do WCAG. */
	flex: 1 1 0;
	min-height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.75rem;
	border-radius: var( --al-radius-pill );
	color: var( --al-white );
	font-size: var( --al-fs-pequeno );
	font-weight: 600;
	line-height: var( --al-lh-compacto );
	letter-spacing: var( --al-ls-caixa-alta );
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.al-bio__aba:hover {
	background: rgba( 255, 255, 255, 0.14 );
}

/* A aba ativa. Duas regras porque o seletor casa rotulo com radio pelo `for`. */
#al-bio-aba-escola:checked ~ .al-bio__abas .al-bio__aba[ for="al-bio-aba-escola" ],
#al-bio-aba-andrea:checked ~ .al-bio__abas .al-bio__aba[ for="al-bio-aba-andrea" ] {
	background: var( --al-white );
	color: var( --al-deep-900 );
}

/*
 * O foco do teclado precisa aparecer no ROTULO: o radio esta escondido, e sem
 * isto navegar por teclado seria navegar as cegas.
 */
#al-bio-aba-escola:focus-visible ~ .al-bio__abas .al-bio__aba[ for="al-bio-aba-escola" ],
#al-bio-aba-andrea:focus-visible ~ .al-bio__abas .al-bio__aba[ for="al-bio-aba-andrea" ] {
	outline: 2px solid var( --al-yellow-500 );
	outline-offset: 2px;
}

/* Os links. Lista sem marcador, um botao por linha. */
.al-bio__links {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-direction: column;
	gap: var( --al-space-30 );
}

#al-bio-aba-escola:checked ~ #al-bio-lista-escola,
#al-bio-aba-andrea:checked ~ #al-bio-lista-andrea {
	display: flex;
}

.al-bio__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --al-space-30 );
	/* 3.25rem = 52px de alvo de toque, acima do minimo de 44px do WCAG. */
	min-height: 3.25rem;
	padding: var( --al-space-30 ) var( --al-space-50 );
	border: 2px solid rgba( 255, 255, 255, 0.28 );
	border-radius: var( --al-radius-pill );
	/*
	 * Vidro ESCURO, e nao o branco a 6% de antes.
	 *
	 * Sobre fundo chapado, um veu branco claareava o botao o suficiente. Sobre a
	 * foto, ele deixava o contraste do texto a merce do pixel que estivesse
	 * atras: legivel na sombra, ilegivel na crista da onda. Em deep-900 a 55% o
	 * botao carrega o proprio contraste, seja qual for o trecho da foto.
	 */
	background: rgba( 6, 42, 46, 0.55 );
	backdrop-filter: blur( 6px );
	color: var( --al-white );
	font-size: var( --al-fs-corpo );
	font-weight: 600;
	line-height: var( --al-lh-compacto );
	text-decoration: none;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.al-bio__link:hover,
.al-bio__link:focus-visible {
	background: rgba( 6, 42, 46, 0.75 );
	border-color: var( --al-teal-300 );
	transform: translateY( -2px );
}

/* A conversa principal da aba, na cor da marca do WhatsApp. */
.al-bio__link--whatsapp {
	background: var( --al-whatsapp );
	border-color: var( --al-whatsapp );
	color: var( --al-deep-900 );
	backdrop-filter: none;
}

.al-bio__link--whatsapp:hover,
.al-bio__link--whatsapp:focus-visible {
	background: var( --al-whatsapp );
	border-color: var( --al-white );
	color: var( --al-deep-900 );
}

/*
 * A segunda conversa da aba: contorno verde, sem preencher.
 *
 * Duas pilulas verdes chapadas empilhadas competem entre si e nenhuma parece a
 * acao principal. O contorno diz "isto tambem abre o WhatsApp" sem disputar o
 * toque com "Agendar sua aula".
 *
 * O texto fica BRANCO, nao verde: verde WhatsApp sobre a foto escura da 3:1, e
 * texto de botao precisa de 4,5:1. O verde aparece na borda e no icone, que sao
 * elementos graficos e passam com 3:1.
 */
.al-bio__link--whatsapp-vazado {
	border-color: var( --al-whatsapp );
}

.al-bio__link--whatsapp-vazado .al-bio__ico {
	color: var( --al-whatsapp );
}

.al-bio__link--whatsapp-vazado:hover,
.al-bio__link--whatsapp-vazado:focus-visible {
	border-color: var( --al-white );
}

/* "Ir para o site", nos dois casos: laranja de acao da marca. */
.al-bio__link--destaque {
	background: var( --al-acao );
	border-color: var( --al-acao );
	backdrop-filter: none;
}

.al-bio__link--destaque:hover,
.al-bio__link--destaque:focus-visible {
	background: var( --al-orange-700 );
	border-color: var( --al-white );
}

.al-bio__ico {
	font-size: 1.125em;
	flex: 0 0 auto;
}

.al-bio__rodape {
	margin: var( --al-space-60 ) 0 0;
	font-size: var( --al-fs-pequeno );
	color: rgba( 255, 255, 255, 0.55 );
}

.al-bio__rodape a {
	color: inherit;
}

@media ( prefers-reduced-motion: reduce ) {
	.al-bio__link,
	.al-bio__aba {
		transition: none;
	}

	.al-bio__link:hover,
	.al-bio__link:focus-visible {
		transform: none;
	}
}