/**
 * A página inicial.
 *
 * Carrega só onde o bloco `bca/home` existe. Os tokens e o que é global (botões,
 * cabeçalho, rodapé, WhatsApp) vivem em `site.css`, que é dependência deste.
 *
 * Duas regras de composição valem para o arquivo inteiro:
 *
 *   - Texto sobre foto SEMPRE tem camada escura por baixo. Contraste de texto
 *     sobre imagem não se resolve escolhendo bem a foto: depende do pixel que
 *     ficar atrás da letra, e isso muda com o recorte de cada tela.
 *   - Nada anima em laço infinito. Entrada, hover e um pulso — só.
 */

.bca-home {
	font-family: var( --bca-texto-fonte );
	font-size: 17px;
	line-height: 1.6;
	color: var( --bca-tinta );
	background: var( --bca-fundo );
}

/* O Astra dá 85px de recuo no <article> e uma faixa clara antes do rodapé; a
   home é desenhada sangrando, então o recuo sai. */
body.bca-home-ativa .ast-container,
body.bca-home-ativa .site-content .ast-container {
	max-width: 100%;
	padding: 0;
}

body.bca-home-ativa .entry-content > .bca-home {
	margin: 0;
}

body.bca-home-ativa .site-content article {
	padding: 0;
	background: transparent;
	border: 0;
}

/* ── Peças compartilhadas ───────────────────────────────────────────────── */

/* ── Herói ──────────────────────────────────────────────────────────────── */

/*
 * Sangrar de verdade.
 *
 * Medido: a seção parava em 1200px de largura (200→1400 numa tela de 1600),
 * deixando duas colunas brancas nas laterais da foto. O limite vem do layout de
 * conteúdo que o tema aplica aos filhos de `.entry-content` — e como o herói é
 * uma faixa de foto, ele precisa da tela inteira.
 */
/*
 * O seletor é feio porque o adversário é grande. O Astra limita a largura assim:
 *
 *   .ast-page-builder-template .entry-content[data-ast-blocks-layout]
 *     > :not(.wp-block-group):where(...) > *
 *
 * — quatro classes de especificidade, escritas num <style> do próprio tema. Um
 * seletor curto perde e o herói continua com 1200px no meio de uma tela de
 * 1600, com duas colunas brancas nas laterais (medido: 200→1400).
 *
 * `!important` no `max-width` é cinto e suspensório: o valor do tema vem de uma
 * variável que ele regenera sozinho quando alguém mexe no Customizer.
 */
body.bca-home-ativa.ast-page-builder-template .entry-content[data-ast-blocks-layout] .bca-home > section,
body.bca-home-ativa .bca-home > section {
	max-width: none !important;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* O bloco inteiro também: se ele for limitado, o filho não tem onde crescer. */
body.bca-home-ativa .entry-content > .bca-home {
	max-width: none !important;
	width: 100%;
}

.bca-heroi-home {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min( 88vh, 760px );
	padding: 120px 24px 72px;
	overflow: hidden;
	isolation: isolate;
}

.bca-heroi-home__fundo {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.bca-heroi-home__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
}

/*
 * A camada escura é o que garante o contraste do texto. Medido no ponto mais
 * claro da foto: sem ela o branco cai para 2,1:1; com ela fica acima de 7:1.
 */
.bca-heroi-home::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/*
	 * O véu escurece onde o texto passa e SOLTA a foto onde não passa.
	 *
	 * A versão anterior ia de 0,92 a 0,35 numa diagonal larga e apagava a foto
	 * inteira — o rosto das crianças, que é o argumento da página, virava um
	 * cinza uniforme. Agora a parte forte acompanha a coluna de texto (até uns
	 * 55% da largura) e o resto quase não é tocado.
	 *
	 * Contraste medido no ponto mais claro sob o texto: branco a 9,3:1.
	 */
	background:
		linear-gradient( 96deg,
			rgba( 16, 19, 11, 0.90 ) 0%,
			rgba( 16, 19, 11, 0.80 ) 34%,
			rgba( 16, 19, 11, 0.42 ) 58%,
			rgba( 16, 19, 11, 0.14 ) 82%,
			rgba( 16, 19, 11, 0.06 ) 100% ),
		/*
		 * A faixa de cima é o cabeçalho, não enfeite.
		 *
		 * O cabeçalho nasce transparente com o texto BRANCO, e a foto do herói tem
		 * um muro amarelo claro justamente onde caem "Nossas Unidades", "Contato" e
		 * "Como Ajudar". Branco sobre aquele amarelo dá ~1,6:1 — ilegível. Com 0,52
		 * de preto por cima, o mesmo ponto vai a 5,4:1, acima do mínimo de 4,5:1
		 * para texto. A escuridão morre em 30% da altura, então a foto continua
		 * solta onde ninguém precisa ler.
		 */
		linear-gradient( 180deg,
			rgba( 16, 19, 11, 0.58 ) 0%,
			rgba( 16, 19, 11, 0.52 ) 13%,
			rgba( 16, 19, 11, 0.18 ) 23%,
			rgba( 16, 19, 11, 0 ) 32% );
}

.bca-heroi-home__conteudo {
	width: 100%;
	max-width: var( --bca-largura );
	margin: 0 auto;
}

/*
 * O nome da casa ocupa o herói.
 *
 * Duas linhas com pesos diferentes: "Biblioteca" menor e clara, "A Casa
 * Amarela" no amarelo da marca e no maior tamanho que a tela aguentar. Em
 * `clamp` para não exigir media query a cada 200px de largura.
 */
.bca-heroi-home__titulo {
	margin: 0 0 14px;
	font-family: var( --bca-display );
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: normal;
	color: #ffffff;
}

.bca-heroi-home__titulo-a {
	display: block;
	font-size: clamp( 26px, 3.6vw, 46px );
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba( 255, 255, 255, 0.94 );
}

.bca-heroi-home__titulo-b {
	display: block;
	font-size: clamp( 44px, 9.2vw, 116px );
	font-weight: 700;
	color: var( --bca-realce );
	text-shadow: 0 6px 30px rgba( 0, 0, 0, 0.35 );
}

.bca-heroi-home__frase {
	margin: 0 0 12px;
	font-family: var( --bca-display );
	font-size: clamp( 19px, 2.4vw, 26px );
	font-weight: 500;
	line-height: 1.25;
	color: #ffffff;
}

.bca-heroi-home__linha {
	max-width: 52ch;
	margin: 0 0 30px;
	font-size: clamp( 16px, 1.8vw, 19px );
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.88 );
}

.bca-heroi-home__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 44px;
}

.bca-heroi-home__desce {
	position: absolute;
	bottom: 22px;
	left: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #ffffff;
	background: rgba( 255, 255, 255, 0.14 );
	border: 1px solid rgba( 255, 255, 255, 0.28 );
	border-radius: 50%;
	transform: translateX( -50% );
	animation: bca-desce 1.6s ease-in-out 1.2s 2;
}

.bca-heroi-home__desce:hover,
.bca-heroi-home__desce:focus-visible {
	color: var( --bca-tinta );
	background: var( --bca-realce );
}

@keyframes bca-desce {
	0%, 100% { transform: translate( -50%, 0 ); }
	50%      { transform: translate( -50%, 6px ); }
}

/* ── Quem somos ─────────────────────────────────────────────────────────── */

.bca-sobre {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 56px;
	align-items: center;
}

.bca-sobre__foto {
	margin: 0;
	transform: rotate( -1.5deg );
	transition: transform 320ms var( --bca-balanco );
}

.bca-sobre__foto:hover {
	transform: rotate( 0deg ) scale( 1.01 );
}

.bca-sobre__img {
	display: block;
	width: 100%;
	height: auto;
	border: 8px solid #ffffff;
	border-radius: 24px;
	box-shadow: var( --bca-clay-alta );
}

/* ── Projetos ───────────────────────────────────────────────────────────── */

.bca-projetos__grade {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * `[hidden]` do navegador é uma regra de user-agent e perde para qualquer
 * `display` do autor: sem esta linha os seis projetos guardados apareceriam
 * mesmo com o atributo `hidden` no HTML.
 */
.bca-projeto[hidden] {
	display: none;
}

.bca-projeto {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var( --bca-superficie );
	border: 2px solid var( --bca-borda );
	border-radius: 22px;
	box-shadow: var( --bca-clay );
	transition:
		transform 240ms var( --bca-balanco ),
		box-shadow 240ms ease,
		border-color 200ms ease;
}

.bca-projeto__moldura {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var( --bca-azul-fundo );
}

.bca-projeto__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms var( --bca-suave );
}

.bca-projeto__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var( --bca-azul );
	background:
		radial-gradient( 60% 60% at 50% 40%, rgba( 255, 217, 54, 0.35 ) 0%, rgba( 255, 217, 54, 0 ) 70% ),
		var( --bca-azul-fundo );
}

.bca-projeto__icone svg {
	width: 44px;
	height: 44px;
}

.bca-projeto__nome {
	margin: 18px 20px 6px;
	font-family: var( --bca-display );
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	color: var( --bca-tinta );
}

.bca-projeto__resumo {
	margin: 0 20px 22px;
	font-size: 15px;
	line-height: 1.5;
	color: var( --bca-tinta-suave );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.bca-projeto:hover {
		transform: translateY( -8px );
		border-color: var( --bca-acento );
		box-shadow: var( --bca-clay-alta );
	}

	/* Zoom contido: 1.06 lê como "chegou perto"; 1.2 lê como defeito. */
	.bca-projeto:hover .bca-projeto__img {
		transform: scale( 1.06 );
	}
}

.bca-projetos__rodape {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 40px;
}

/* ── Faixa da Biblioteca Virtual ────────────────────────────────────────── */

.bca-biblio-faixa {
	background:
		radial-gradient( 120% 140% at 100% 0%, rgba( 255, 217, 54, 0.22 ) 0%, rgba( 255, 217, 54, 0 ) 55% ),
		var( --bca-azul );
}

.bca-biblio-faixa__interno {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	max-width: var( --bca-largura );
	margin: 0 auto;
	padding: 84px 24px;
}

.bca-biblio-faixa__texto .bca-titulo {
	color: #ffffff;
}

.bca-biblio-faixa__texto .bca-paragrafo {
	color: rgba( 255, 255, 255, 0.88 );
}

.bca-biblio-faixa__numeros {
	margin: 0 0 24px;
	font-size: 16px;
	color: rgba( 255, 255, 255, 0.92 );
}

.bca-biblio-faixa__numeros strong {
	color: var( --bca-realce );
}

.bca-biblio-faixa__capas {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bca-biblio-faixa__capa {
	transform: rotate( calc( ( var( --bca-i, 0 ) - 1.5 ) * 1.2deg ) );
	transition: transform 300ms var( --bca-balanco );
}

.bca-biblio-faixa__capa-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 12px 26px rgba( 0, 0, 0, 0.32 );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.bca-biblio-faixa__capa:hover {
		transform: rotate( 0deg ) translateY( -8px ) scale( 1.04 );
		z-index: 2;
	}
}

/* ── Unidades ───────────────────────────────────────────────────────────── */

.bca-unidades__grade {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bca-unidade {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var( --bca-superficie );
	border: 2px solid var( --bca-borda );
	border-radius: 20px;
	box-shadow: var( --bca-clay );
	transition: transform 240ms var( --bca-balanco ), box-shadow 240ms ease;
}

.bca-unidade__mapa {
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var( --bca-azul-fundo );
}

.bca-unidade__mapa-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate( 0.9 );
	transition: transform 420ms var( --bca-suave ), filter 300ms ease;
}

.bca-unidade__corpo {
	padding: 18px 20px 22px;
}

.bca-unidade__nome {
	margin: 0 0 6px;
	font-family: var( --bca-display );
	font-size: 18px;
	font-weight: 600;
	letter-spacing: normal;
	color: var( --bca-tinta );
}

.bca-unidade__endereco {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.45;
	color: var( --bca-tinta-suave );
}

.bca-unidade__mapa-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 700;
	color: var( --bca-azul );
	text-decoration: none;
}

.bca-unidade__mapa-link svg {
	transition: transform 200ms var( --bca-balanco );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.bca-unidade:hover {
		transform: translateY( -6px );
		box-shadow: var( --bca-clay-alta );
	}

	.bca-unidade:hover .bca-unidade__mapa-img {
		transform: scale( 1.05 );
		filter: saturate( 1.05 );
	}

	.bca-unidade__mapa-link:hover svg {
		transform: translateX( 4px );
	}
}

/* ── Como ajudar ────────────────────────────────────────────────────────── */

.bca-ajudar__caixa {
	max-width: 780px;
	margin: 0 auto;
	padding: 48px 40px;
	text-align: center;
	background:
		radial-gradient( 90% 120% at 0% 0%, rgba( 255, 217, 54, 0.35 ) 0%, rgba( 255, 217, 54, 0 ) 60% ),
		var( --bca-superficie );
	border: 3px solid var( --bca-realce );
	border-radius: 28px;
	box-shadow: var( --bca-clay-alta );
}

.bca-ajudar__caixa .bca-paragrafo {
	margin-left: auto;
	margin-right: auto;
}

.bca-pix {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 24px 0;
	padding: 18px;
	background: var( --bca-azul-fundo );
	border-radius: 18px;
}

.bca-pix__rotulo {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --bca-azul );
}

.bca-pix__chave {
	font-family: var( --bca-texto-fonte );
	font-size: 16px;
	font-weight: 700;
	color: var( --bca-tinta );
	word-break: break-all;
}

.bca-ajudar__acoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.bca-btn--zap {
	/* Mesmo motivo do botão flutuante: branco sobre o verde da marca mede
	   1,98:1. Este par mede 5,4:1. */
	color: #ffffff;
	background: #147a3e;
	border-color: #0d6b36;
}

.bca-btn--zap:hover,
.bca-btn--zap:focus-visible {
	color: #ffffff;
}

/* ── Galeria ────────────────────────────────────────────────────────────── */

.bca-galeria__grade {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bca-galeria__item {
	overflow: hidden;
	border-radius: 20px;
	box-shadow: var( --bca-clay );
}

.bca-galeria__img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 460ms var( --bca-suave ), filter 300ms ease;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.bca-galeria__item:hover .bca-galeria__img {
		transform: scale( 1.07 );
		filter: saturate( 1.1 ) brightness( 1.03 );
	}
}

/* ── Chamada final ──────────────────────────────────────────────────────── */

.bca-final {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
	padding: 90px 24px;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

.bca-final__fundo {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.bca-final__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

.bca-final::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient( 180deg, rgba( 20, 24, 15, 0.78 ), rgba( 20, 24, 15, 0.86 ) );
}

/*
 * Coluna com `gap`, e não margem em cada filho.
 *
 * Antes, o respiro vinha da margem de baixo do título e dos 26px do parágrafo —
 * três medidas diferentes empilhadas, e o botão colado na frase. Com `gap` a
 * distância é uma só e vale entre todos os itens; `align-items: center` porque
 * numa coluna flex o botão, que é `inline-flex`, esticaria de ponta a ponta.
 */
.bca-final__conteudo {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 60ch;
	/* Era 14px do título para a frase e 26px da frase para o botão — respiro
	   desigual, com o botão quase colado. 32px valem para os dois vãos. */
	gap: 32px;
}

.bca-final__conteudo > .bca-titulo {
	margin-bottom: 0;
}

.bca-final__linha {
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.9 );
}

/* ── Responsivo ─────────────────────────────────────────────────────────── */

@media ( max-width: 980px ) {
	.bca-sobre {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.bca-projetos__grade,
	.bca-unidades__grade,
	.bca-galeria__grade {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.bca-biblio-faixa__interno {
		grid-template-columns: 1fr;
		gap: 36px;
		padding: 64px 24px;
	}
}

@media ( max-width: 900px ) {
	/*
	 * Camada escura mais forte e na vertical.
	 *
	 * O degradê da esquerda para a direita funciona no desktop, onde o texto
	 * ocupa a metade escura. Numa tela de 360px o texto atravessa a largura
	 * inteira e a ponta direita do degradê tem só 35% de cobertura — ali o
	 * branco cai para 2,2:1. Com o véu chapado a 88% ele fica acima de 12:1 em
	 * qualquer ponto.
	 */
	.bca-heroi-home::before {
		background: linear-gradient( 180deg, rgba( 16, 19, 11, 0.72 ) 0%, rgba( 16, 19, 11, 0.88 ) 100% );
	}
}

@media ( max-width: 640px ) {
	.bca-home {
		font-size: 16px;
	}

	/* Numa tela estreita o título da chamada final ocupa três linhas; 28px de
	   vão entre os itens começam a empurrar o botão para fora da dobra. */
	.bca-final__conteudo {
		gap: 24px;
	}

	.bca-secao {
		padding: 60px 20px;
	}

	.bca-heroi-home {
		min-height: 0;
		padding: 108px 20px 56px;
	}

	.bca-heroi-home__acoes .bca-btn {
		flex: 1 1 100%;
	}

	.bca-selos {
		gap: 10px;
	}

	.bca-selo-num {
		flex: 1 1 calc( 50% - 10px );
		min-width: 0;
		padding: 12px 14px;
	}

	.bca-selo-num__valor {
		font-size: 28px;
	}

	.bca-projetos__grade,
	.bca-unidades__grade {
		grid-template-columns: 1fr;
	}

	.bca-galeria__grade {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 10px;
	}

	.bca-biblio-faixa__capas {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
		gap: 8px;
	}

	.bca-ajudar__caixa {
		padding: 32px 20px;
	}

	.bca-paragrafo {
		font-size: 16px;
	}

	.bca-heroi-home__desce {
		display: none;
	}
}

/* ── Movimento reduzido ─────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.bca-home *,
	.bca-home *::before,
	.bca-home *::after {
		animation: none !important;
		transition: none !important;
	}

	.bca-revela {
		opacity: 1 !important;
		transform: none !important;
	}

	.bca-realce::after {
		transform: scaleX( 1 ) !important;
	}

	.bca-sobre__foto {
		transform: none;
	}

	.bca-biblio-faixa__capa {
		transform: none;
	}
}

/* ── Impressão ──────────────────────────────────────────────────────────── */

@media print {
	.bca-heroi-home,
	.bca-final {
		min-height: 0;
		padding: 24px 0;
		color: #000000;
	}

	.bca-heroi-home__fundo,
	.bca-final__fundo,
	.bca-heroi-home__desce {
		display: none;
	}

	.bca-heroi-home__titulo,
	.bca-heroi-home__linha,
	.bca-titulo--claro,
	.bca-final__linha {
		color: #000000;
	}
}

/* ── Impacto: os números ────────────────────────────────────────────────── */

/*
 * Faixa amarela, e não mais um bloco branco: é o momento da página em que o
 * projeto mostra tamanho, e a cor da casa faz o olho parar aqui.
 *
 * A hierarquia é deliberada — os três primeiros números ocupam o dobro do
 * espaço dos outros cinco. Quem passa o olho lê "150 mil livros" e "340 mil
 * refeições" antes de qualquer recorte de unidade.
 */
.bca-impacto {
	background:
		radial-gradient( 80% 120% at 0% 0%, rgba( 255, 255, 255, 0.5 ) 0%, rgba( 255, 255, 255, 0 ) 55% ),
		var( --bca-realce );
}

.bca-impacto__interno {
	max-width: var( --bca-largura );
	margin: 0 auto;
	padding: 84px 24px;
}

.bca-impacto .bca-titulo,
.bca-impacto .bca-paragrafo {
	color: var( --bca-tinta );
}

/* Sobre o amarelo, a pincelada amarela sumiria: aqui ela é escura. */
.bca-realce--tinta {
	color: var( --bca-tinta );
}

.bca-impacto .bca-realce::after {
	background: linear-gradient( 90deg, var( --bca-azul ) 0%, rgba( 30, 55, 128, 0.35 ) 100% );
	opacity: 0.9;
}

.bca-impacto__grade {
	display: grid;
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bca-impacto__item {
	display: flex;
	flex-direction: column;
	grid-column: span 2;
	padding: 22px 22px 24px;
	background: rgba( 255, 255, 255, 0.72 );
	border: 2px solid rgba( 31, 36, 23, 0.10 );
	border-radius: 22px;
	box-shadow: var( --bca-clay );
	transition: transform 240ms var( --bca-balanco ), box-shadow 240ms ease;
}

/* Os três primeiros ocupam metade da fileira cada um: dois na primeira linha,
   um esticado — o desenho puxa o olho para eles antes dos outros cinco. */
.bca-impacto__item--forte {
	grid-column: span 3;
	background: var( --bca-superficie );
	border-color: var( --bca-azul-borda );
}

.bca-impacto__item--forte:nth-child( 3 ) {
	grid-column: span 6;
}

/*
 * São oito números: 3+3, 6, 2+2+2 e sobram dois. Sem isto a última fileira fica
 * com um buraco de dois terços do lado direito.
 *
 * **Dentro da media query de propósito.** Escrita solta, esta regra pedia
 * `span 3` também no celular, onde a grade tem 2 colunas: o navegador criava
 * uma terceira coluna implícita, as faixas encolhiam e o cartão virava uma
 * tira de uma letra de largura, com "livros distribuídos" quebrado
 * verticalmente. Regra de grade sem media query é uma armadilha esperando o
 * celular.
 */
@media ( min-width: 981px ) {
	.bca-impacto__item:nth-last-child( -n + 2 ) {
		grid-column: span 3;
	}
}

.bca-impacto__valor {
	font-family: var( --bca-display );
	font-size: clamp( 34px, 4.4vw, 54px );
	font-weight: 700;
	line-height: 1;
	letter-spacing: normal;
	color: var( --bca-azul );
}

.bca-impacto__item--forte .bca-impacto__valor {
	font-size: clamp( 44px, 6.4vw, 76px );
}

.bca-impacto__rotulo {
	margin-top: 6px;
	font-family: var( --bca-display );
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	color: var( --bca-tinta );
}

.bca-impacto__item--forte .bca-impacto__rotulo {
	font-size: 21px;
}

/*
 * O contexto não é letra miúda de contrato: é o que separa número de
 * propaganda. Fica menor, mas com contraste medido (5,9:1 sobre o cartão).
 */
.bca-impacto__contexto {
	margin-top: 10px;
	font-size: 14.5px;
	line-height: 1.45;
	color: var( --bca-tinta-suave );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.bca-impacto__item:hover {
		transform: translateY( -6px );
		box-shadow: var( --bca-clay-alta );
	}
}

@media ( max-width: 980px ) {
	.bca-impacto__grade {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	.bca-impacto__item {
		grid-column: span 2;
	}

	.bca-impacto__item--forte,
	.bca-impacto__item--forte:nth-child( 3 ) {
		grid-column: span 4;
	}
}

@media ( max-width: 640px ) {
	.bca-impacto__interno {
		padding: 60px 20px;
	}

	.bca-impacto__grade {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 12px;
	}

	.bca-impacto__item {
		grid-column: span 1;
		padding: 16px 16px 18px;
	}

	.bca-impacto__item--forte,
	.bca-impacto__item--forte:nth-child( 3 ) {
		grid-column: span 2;
	}

	.bca-impacto__rotulo {
		font-size: 16px;
	}

	.bca-impacto__item--forte .bca-impacto__rotulo {
		font-size: 19px;
	}

	.bca-impacto__contexto {
		font-size: 13.5px;
	}
}

/* ══ Passada de celular ═════════════════════════════════════════════════════ */

@media ( max-width: 700px ) {
	/*
	 * As capas da faixa da Biblioteca são levemente giradas para parecerem
	 * empilhadas. Medido a 360px: as caixas de toque se sobrepõem — o dedo mira
	 * "A Escrava Isaura" e abre "Os Sertões". No celular elas ficam retas, com
	 * folga de verdade.
	 */
	.bca-biblio-faixa__capa {
		transform: none;
	}

	.bca-biblio-faixa__capas {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: 12px;
	}

	/* Oito capas em três colunas deixariam duas sobrando na última fileira. */
	.bca-biblio-faixa__capa:nth-child( n + 7 ) {
		display: none;
	}

	/*
	 * Número e unidade nunca em linhas diferentes: "+150" numa linha e "mil" na
	 * outra transforma o número em enigma.
	 */
	.bca-selo-num__valor,
	.bca-impacto__valor {
		white-space: nowrap;
	}

	/* O selo do herói tem duas linhas de rótulo em telas estreitas; sem isto a
	   caixa fica com altura diferente da vizinha e a fileira desalinha. */
	.bca-selos {
		align-items: stretch;
	}

	.bca-selo-num {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* Alvo de toque nos links de "como chegar" e nos botões da página. */
	.bca-unidade__mapa-link,
	.bca-projetos__rodape .bca-btn,
	.bca-ajudar__acoes .bca-btn {
		min-height: 48px;
	}

	.bca-projetos__rodape,
	.bca-ajudar__acoes {
		gap: 12px;
	}

	.bca-projetos__rodape .bca-btn,
	.bca-ajudar__acoes .bca-btn {
		flex: 1 1 100%;
	}

	/* O PIX é uma palavra de 31 caracteres. */
	.bca-pix__chave {
		overflow-wrap: anywhere;
	}

	.bca-pix {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.bca-pix__copiar {
		width: 100%;
	}
}

/* ── Efeitos que não podem ficar presos no toque ────────────────────────── */

/*
 * `:hover` em tela de toque gruda: o dedo encosta, o efeito liga e só desliga
 * no próximo toque em outro lugar. Por isso todo hover desta página vive dentro
 * de `(hover: hover) and (pointer: fine)` — aqui ficam só os equivalentes de
 * toque, que respondem e voltam sozinhos.
 */
@media ( hover: none ) {
	.bca-projeto__img,
	.bca-galeria__img,
	.bca-unidade__mapa-img {
		transform: none !important;
	}

	.bca-sobre__foto {
		transform: rotate( -1deg );
	}
}

/* ── O ritmo vertical que o tema estava anulando ─────────────────────────── */

/*
 * Medido na página servida: **todo `<p>` da home estava com
 * `margin-bottom: 0`**. A causa é uma regra do tema, `.entry-content p { margin:
 * 0em }` — dois seletores de especificidade (0,1,1) contra o nosso um só
 * (`.bca-heroi-home__linha`, 0,1,0). Cada margem escrita aqui em cima era letra
 * morta.
 *
 * O efeito na tela: o selo colado no título ("Biblioteca comunitária no Rio de
 * Janeiro" encostando em "Biblioteca"), a frase colada no parágrafo, o endereço
 * da unidade colado no "Como chegar" — 0px de respiro em todos eles.
 *
 * A correção é subir a especificidade (corpo + bloco + elemento = 0,3,0) e, já
 * que o ritmo vai ser reescrito de qualquer forma, escrevê-lo em `clamp` para
 * que o celular respire sem que o desktop fique frouxo.
 */

body.bca-home-ativa .bca-home .bca-selo {
	margin-bottom: clamp( 12px, 1.4vw, 16px );
}

/* ── Herói ──────────────────────────────────────────────────────────────── */

body.bca-home-ativa .bca-home .bca-heroi-home__conteudo .bca-selo {
	margin-bottom: clamp( 16px, 2.2vw, 22px );
}

/* "Biblioteca" e "A Casa Amarela" nascem de um `line-height: 0.95`, que junta as
   duas linhas até quase se tocarem: medido, zero pixel entre elas. */
body.bca-home-ativa .bca-home .bca-heroi-home__titulo-a {
	margin-bottom: clamp( 2px, 0.6vw, 8px );
}

body.bca-home-ativa .bca-home .bca-heroi-home__titulo {
	margin-bottom: clamp( 16px, 2vw, 24px );
}

/* A frase e o parágrafo são um bloco só de leitura: o vão entre eles é o menor
   de todos, de propósito. */
body.bca-home-ativa .bca-home .bca-heroi-home__frase {
	margin-bottom: clamp( 8px, 1.1vw, 12px );
}

body.bca-home-ativa .bca-home .bca-heroi-home__linha {
	/* 46ch em vez de 52ch: a linha ideal de leitura tem entre 45 e 75
	   caracteres, e aqui o texto é curto — cortar antes deixa o herói mais
	   arrumado no desktop sem mudar nada no celular, onde a largura manda. */
	max-width: 46ch;
	margin-bottom: clamp( 26px, 3vw, 36px );
	line-height: 1.6;
}

body.bca-home-ativa .bca-home .bca-heroi-home__acoes {
	gap: clamp( 12px, 1.4vw, 16px );
	margin-bottom: clamp( 30px, 3.6vw, 48px );
}

body.bca-home-ativa .bca-home .bca-selos {
	gap: clamp( 12px, 1.2vw, 16px );
}

/* ── Cartões e listas ───────────────────────────────────────────────────── */

body.bca-home-ativa .bca-home .bca-unidade__endereco {
	margin-bottom: clamp( 10px, 1.2vw, 14px );
}

body.bca-home-ativa .bca-home .bca-projeto__nome {
	margin-bottom: clamp( 6px, 0.8vw, 10px );
}

body.bca-home-ativa .bca-home .bca-biblio-faixa__numeros {
	margin-bottom: clamp( 18px, 2vw, 24px );
}

body.bca-home-ativa .bca-home .bca-cabeca .bca-paragrafo,
body.bca-home-ativa .bca-home .bca-sobre__texto .bca-paragrafo {
	margin-bottom: clamp( 14px, 1.6vw, 18px );
}

/* O último parágrafo de um bloco não empurra nada — margem ali só aumenta o
   buraco antes da grade. */
body.bca-home-ativa .bca-home .bca-paragrafo:last-child,
body.bca-home-ativa .bca-home .bca-cabeca .bca-paragrafo:last-child {
	margin-bottom: 0;
}

/* O selo do herói cabia em duas linhas no celular ("…NO RIO DE / JANEIRO"), o
   que engorda a pastilha e desalinha o começo do título. Um ponto menor e menos
   espaço entre letras devolvem a linha única a partir de 360px; abaixo disso ele
   quebra, e aí a entrelinha mais curta evita a pastilha alta demais. */
@media ( max-width: 480px ) {
	body.bca-home-ativa .bca-home .bca-heroi-home__conteudo .bca-selo {
		padding: 7px 13px;
		font-size: 11px;
		line-height: 1.35;
		letter-spacing: 0.04em;
	}
}

/* A saída da faixa de impacto para a página de impacto. Fica sobre o amarelo,
   então o botão fantasma ganha borda mais firme para não sumir. */
.bca-impacto__saida {
	margin-top: clamp( 24px, 3vw, 36px );
	text-align: center;
}

body.bca-home-ativa .bca-impacto__saida .bca-btn {
	color: var( --bca-tinta );
	background: rgba( 255, 255, 255, 0.94 );
	border-color: rgba( 31, 36, 23, 0.28 );
}

/* Número e unidade não se separam: "61" no fim de uma linha e "livros" no começo
   da outra transforma o dado em charada. */
.bca-nobr {
	white-space: nowrap;
}