/**
 * Biblioteca Virtual — BCA
 *
 * Sem etapa de build: CSS puro, custom properties e media queries. O plugin nao
 * tem package.json e isso e decisao registrada — o site e mantido por quem nao e
 * desenvolvedor, e um arquivo que so precisa ser copiado por FTP e o que se pode
 * manter.
 *
 * Media query e nao @container: a pagina tem <noscript> porque biblioteca
 * comunitaria atende gente com aparelho velho, e container query nao existe em
 * WebView antigo. O layout aqui e de pagina, entao media query resolve igual.
 *
 * As cores sao as da casa (#ffd936, #dab200, #536942), lidas do Astra quando ele
 * as publica. O CSS anterior usava #19119f e #f9c508, que vieram do gerador de
 * capas e nunca foram as cores do site.
 *
 * Os breakpoints 976px e 767px SAO os do Spectra, para o catalogo refluir na
 * mesma largura que o resto da pagina.
 */

/* ── Fontes ─────────────────────────────────────────────────────────────── */

/* Servidas do plugin, subconjunto latino, variaveis: 67 KB nos dois arquivos.
   O portugues cabe inteiro em latin, entao latin-ext nao vem. Isto NAO remove o
   Google Fonts da pagina — DM Sans e Forum sao configuracao do Astra e continuam
   vindo de la; o que se evita e acrescentar mais duas familias remotas. */
@font-face {
	font-family: 'BCA Fredoka';
	src: url( '../fontes/fredoka-var.woff2' ) format( 'woff2-variations' ),
		url( '../fontes/fredoka-var.woff2' ) format( 'woff2' );
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'BCA Nunito';
	src: url( '../fontes/nunito-var.woff2' ) format( 'woff2-variations' ),
		url( '../fontes/nunito-var.woff2' ) format( 'woff2' );
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */

/*
 * A paleta fica no :root, e nao no wrapper, porque o modal de cadastro e
 * anexado ao <body> — fora de .bca-biblio — e precisa das mesmas cores. Os
 * nomes sao todos prefixados, entao nada colide com o tema.
 */
:root {
	--bca-fundo: #faf8f2;
	--bca-superficie: #ffffff;
	--bca-tinta: #1f2417;
	--bca-tinta-suave: #5a6350;
	--bca-realce: var( --ast-global-color-0, #ffd936 );
	--bca-acento: #dab200;

	/* #dab200 mede 2,03:1 sobre branco e reprova como texto. Como texto vale
	   este tom mais escuro, que mede 4,83:1; o #dab200 fica para preenchimento,
	   borda e brilho, onde contraste de texto nao se aplica. */
	--bca-acento-txt: #8a6f00;

	--bca-estrutura: #536942;
	--bca-borda: rgba( 83, 105, 66, 0.18 );
	--bca-borda-forte: rgba( 83, 105, 66, 0.34 );

	--bca-sombra: 0 1px 2px rgba( 31, 36, 23, 0.04 ), 0 8px 24px rgba( 31, 36, 23, 0.06 );
	--bca-sombra-alta: 0 2px 4px rgba( 31, 36, 23, 0.06 ), 0 18px 40px rgba( 31, 36, 23, 0.12 );

	--bca-display: 'BCA Fredoka', 'Trebuchet MS', system-ui, sans-serif;
	--bca-texto-fonte: 'BCA Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Tokens de layout, que so a pagina do catalogo usa. */
.bca-biblio {
	--bca-raio: 14px;
	--bca-raio-p: 10px;
	--bca-gap: 24px;
	--bca-card-pad: 20px;
	--bca-passo: 300ms;
	--bca-suave: cubic-bezier( 0.16, 1, 0.3, 1 );
	--bca-atraso: 0ms;

	font-family: var( --bca-texto-fonte );
	font-size: 16px;
	line-height: 1.6;
	color: var( --bca-tinta );
}

/* ── A moldura do tema ─────────────────────────────────────────────────── */

/*
 * O Astra pinta o <article> de #f6f8f5 e lhe da 85px de recuo em cima e em
 * baixo. Como o container do Spectra que envolve o bloco e branco e comeca
 * depois desse recuo, sobrava uma faixa pastel atravessada acima do heroi — e
 * outra igual antes do rodape.
 *
 * Nao da para resolver de dentro do bloco: o <article> e ANCESTRAL dele. Por
 * isso `Ativos::marcar_body()` marca o <body> desta pagina, e a regra so vale
 * aqui — o resto do site continua com a moldura do tema intacta.
 */
body.bca-com-biblioteca .site-content .ast-article-single {
	padding-top: 0;
	padding-bottom: 0;
	background: transparent;
	box-shadow: none;
}

/* O alvo das ancoras do heroi nao pode ficar embaixo do cabecalho fixo do Astra
   (.ast-header-sticked). 120px cobre o cabecalho fixo com folga. */
.bca-biblio [id] {
	scroll-margin-top: 120px;
}

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

/* Anima so opacity e transform. O estado inicial fica no CSS, que e bloqueante,
   entao nao ha piscada de conteudo aparecendo antes de esconder.

   Tres saidas para o conteudo aparecer sem o observador:
   1. <noscript> no HTML do bloco, para quem nao tem JavaScript;
   2. prefers-reduced-motion, abaixo;
   3. `bca-resgate`, que revela em 3s caso o arquivo JS nao carregue. Conteudo
      invisivel e pior falha que animacao perdida. O JS desliga esse resgate na
      partida (classe `is-vivo`), senao ele apagaria a entrada de tudo que a
      pessoa so alcanca rolando depois dos 3s. */
.bca-anima {
	opacity: 0;
	transform: translateY( 18px );
	transition:
		opacity var( --bca-passo ) var( --bca-suave ) var( --bca-atraso ),
		transform 420ms var( --bca-suave ) var( --bca-atraso );
	animation: bca-resgate 1ms linear 3s forwards;
}

.bca-anima.is-dentro {
	opacity: 1;
	transform: none;
	animation: none;
}

.bca-biblio.is-vivo .bca-anima {
	animation: none;
}

@keyframes bca-resgate {
	to {
		opacity: 1;
		transform: none;
	}
}

/* Na impressao nada foi rolado, entao nada teria sido revelado: a folha sairia
   com o heroi e mais nada. */
@media print {
	.bca-anima {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.bca-biblio *,
	.bca-biblio *::before,
	.bca-biblio *::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	.bca-anima {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* ── Foco ───────────────────────────────────────────────────────────────── */

/* Um anel unico para tudo que recebe foco. Nunca `outline: none`. */
.bca-biblio a:focus-visible,
.bca-biblio button:focus-visible,
.bca-biblio input:focus-visible,
.bca-biblio [tabindex]:focus-visible {
	outline: 3px solid var( --bca-acento );
	outline-offset: 2px;
	border-radius: var( --bca-raio-p );
}

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

.bca-heroi {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1.35fr ) minmax( 0, 1fr );
	gap: 48px;
	align-items: center;
	padding: 56px 44px;
	margin-bottom: 88px;
	overflow: hidden;
	background:
		radial-gradient( 120% 140% at 8% 0%, rgba( 255, 217, 54, 0.28 ) 0%, rgba( 255, 217, 54, 0 ) 55% ),
		radial-gradient( 90% 120% at 100% 100%, rgba( 83, 105, 66, 0.16 ) 0%, rgba( 83, 105, 66, 0 ) 60% ),
		var( --bca-fundo );
	border: 1px solid var( --bca-borda );
	border-radius: 28px;
	box-shadow: var( --bca-sombra );
}

/* Brilho fixo, fora do fluxo de rolagem: nada de backdrop-filter em elemento que
   rola, que e o que trava scroll em celular. */
.bca-heroi__brilho {
	position: absolute;
	top: -40%;
	right: -12%;
	width: 460px;
	height: 460px;
	pointer-events: none;
	background: radial-gradient( circle, rgba( 218, 178, 0, 0.22 ) 0%, rgba( 218, 178, 0, 0 ) 70% );
	border-radius: 50%;
}

.bca-heroi__texto,
.bca-numeros {
	position: relative;
}

.bca-heroi__selo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --bca-acento-txt );
	background: rgba( 255, 255, 255, 0.72 );
	border: 1px solid var( --bca-borda-forte );
	border-radius: 999px;
}

.bca-heroi__ponto {
	width: 8px;
	height: 8px;
	background: var( --bca-acento );
	border-radius: 50%;
}

.bca-heroi__titulo {
	margin: 0 0 20px;
	font-family: var( --bca-display );
	font-size: clamp( 38px, 6vw, 62px );
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: normal;
	color: var( --bca-tinta );
}

/* O realce e um traco atras da palavra, nao a cor do texto: #ffd936 como cor de
   letra sobre fundo claro seria ilegivel.

   Feito com background-image no proprio span, e nao com um ::after em
   `z-index: -1`: o pai nao cria contexto de empilhamento, entao o pseudo-
   elemento negativo iria parar atras do fundo do heroi e sumiria. */
.bca-heroi__realce {
	display: inline-block;
	white-space: nowrap;
	background-image: linear-gradient( var( --bca-realce ), var( --bca-realce ) );
	background-repeat: no-repeat;
	background-size: 100% 0.32em;
	background-position: 0 86%;
}

.bca-heroi__linha {
	max-width: 60ch;
	margin: 0 0 32px;
	font-size: 17px;
	color: var( --bca-tinta-suave );
}

.bca-heroi__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ── Números ────────────────────────────────────────────────────────────── */

.bca-numeros {
	display: grid;
	gap: 16px;
}

.bca-numero {
	padding: 26px 28px;
	background: rgba( 255, 255, 255, 0.78 );
	border: 1px solid var( --bca-borda-forte );
	border-radius: var( --bca-raio );
	box-shadow: var( --bca-sombra );
}

.bca-numero__valor {
	display: block;
	font-family: var( --bca-display );
	font-size: 48px;
	font-weight: 600;
	line-height: 1;
	color: var( --bca-acento-txt );
	/* Digitos de largura fixa: durante a contagem o numero troca de valor umas
	   sessenta vezes, e com largura proporcional cada troca mexeria no traco. */
	font-variant-numeric: tabular-nums;
}

.bca-numero__rotulo {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --bca-tinta );
}

.bca-numero__ajuda {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: var( --bca-tinta-suave );
}

/* ── Seções ─────────────────────────────────────────────────────────────── */

.bca-secao {
	margin-bottom: 88px;
}

.bca-secao:last-child {
	margin-bottom: 0;
}

.bca-secao__cabeca {
	max-width: 62ch;
	margin-bottom: 28px;
}

.bca-secao__titulo {
	margin: 0 0 8px;
	font-family: var( --bca-display );
	font-size: clamp( 26px, 3.4vw, 34px );
	font-weight: 600;
	line-height: 1.15;
	/* O Astra aplica letter-spacing -2px nos h2 do tema, o que cola as palavras
	   numa fonte de display arredondada. */
	letter-spacing: normal;
	color: var( --bca-tinta );
}

.bca-secao__texto {
	margin: 0;
	font-size: 16px;
	color: var( --bca-tinta-suave );
}

/* ── Como funciona ──────────────────────────────────────────────────────── */

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

.bca-passo {
	padding: 28px;
	background: var( --bca-superficie );
	border: 1px solid var( --bca-borda );
	border-radius: var( --bca-raio );
	box-shadow: var( --bca-sombra );
}

.bca-passo__n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 16px;
	font-family: var( --bca-display );
	font-size: 20px;
	font-weight: 600;
	color: var( --bca-tinta );
	background: var( --bca-realce );
	border-radius: 12px;
}

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

.bca-passo__texto {
	margin: 0;
	font-size: 15px;
	color: var( --bca-tinta-suave );
}

/* ── Cartões de categoria ───────────────────────────────────────────────── */

.bca-cats {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --bca-gap );
}

.bca-cat {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	background: var( --bca-superficie );
	border: 1px solid var( --bca-borda );
	border-radius: var( --bca-raio );
	box-shadow: var( --bca-sombra );
	overflow: hidden;
	transition:
		transform 180ms var( --bca-suave ),
		box-shadow 180ms var( --bca-suave ),
		border-color 180ms var( --bca-suave );
}

.bca-cat:hover {
	transform: translateY( -2px );
	border-color: var( --bca-borda-forte );
	box-shadow: var( --bca-sombra-alta );
}

.bca-cat:active {
	transform: scale( 0.985 );
}

.bca-cat.is-ativo {
	border-color: var( --bca-acento );
	box-shadow: var( --bca-sombra-alta ), inset 0 0 0 1px var( --bca-acento );
}

/* Mosaico: tres miniaturas em leque, com um veu quente por cima para o nome ler
   bem por cima de qualquer capa. */
.bca-cat__mosaico {
	position: relative;
	display: flex;
	gap: 6px;
	height: 132px;
	padding: 16px 16px 0;
	overflow: hidden;
	background: linear-gradient( 160deg, rgba( 255, 217, 54, 0.24 ), rgba( 83, 105, 66, 0.12 ) );
}

/* Largura calculada, e nao 33%: com o gap de 6px tres capas somavam mais que a
   largura do mosaico e a terceira saia cortada pelo overflow. O tamanho fixo
   tambem segura o desenho quando o genero tem so uma ou duas capas. */
.bca-cat__capa {
	flex: 0 0 auto;
	width: calc( ( 100% - 12px ) / 3 );
	height: 100%;
	object-fit: cover;
	border-radius: 8px 8px 0 0;
	box-shadow: 0 6px 16px rgba( 31, 36, 23, 0.18 );
	transition: transform 260ms var( --bca-suave );
}

.bca-cat:hover .bca-cat__capa {
	transform: translateY( -4px );
}

.bca-cat:hover .bca-cat__capa:nth-child( 2 ) {
	transition-delay: 40ms;
}

.bca-cat:hover .bca-cat__capa:nth-child( 3 ) {
	transition-delay: 80ms;
}

.bca-cat__veu {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 56px;
	background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), var( --bca-superficie ) );
}

.bca-cat__corpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 4px 20px 20px;
}

.bca-cat__nome {
	font-family: var( --bca-display );
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	color: var( --bca-tinta );
}

.bca-cat__numeros {
	font-size: 14px;
	color: var( --bca-tinta-suave );
}

.bca-cat__numeros strong {
	color: var( --bca-acento-txt );
}

.bca-cat__sep {
	opacity: 0.5;
}

.bca-cat__texto {
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 1.5;
	color: var( --bca-tinta-suave );
}

.bca-cat__acao {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var( --bca-acento-txt );
}

.bca-cat__seta {
	transition: transform 180ms var( --bca-suave );
}

.bca-cat:hover .bca-cat__seta {
	transform: translateX( 4px );
}

/* ── Controles ──────────────────────────────────────────────────────────── */

.bca-biblio__controles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.bca-biblio__busca {
	position: relative;
	flex: 1 1 280px;
	max-width: 420px;
}

.bca-biblio__lupa {
	position: absolute;
	top: 50%;
	left: 16px;
	color: var( --bca-tinta-suave );
	pointer-events: none;
	transform: translateY( -50% );
}

/* Seletor com o tipo do input de proposito: o Astra estiliza `input[type=search]`
   e vencia o `.bca-biblio__campo` sozinho — o campo saia com raio de 2px, fundo
   cinza e padding de 12px, e o texto ficava por baixo do icone da lupa. */
.bca-biblio input[type="search"].bca-biblio__campo {
	width: 100%;
	min-height: 48px;
	padding: 12px 44px;
	font: inherit;
	color: var( --bca-tinta );
	background: var( --bca-superficie );
	border: 1px solid var( --bca-borda-forte );
	border-radius: 999px;
	box-shadow: var( --bca-sombra );
	transition: border-color 150ms ease, box-shadow 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.bca-biblio input[type="search"].bca-biblio__campo::placeholder {
	color: var( --bca-tinta-suave );
	opacity: 0.85;
}

.bca-biblio input[type="search"].bca-biblio__campo:hover {
	border-color: var( --bca-acento );
}

/* Alvo de toque de 44x44 mesmo com o icone de 16px dentro. */
.bca-biblio__limpar {
	position: absolute;
	top: 50%;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var( --bca-tinta-suave );
	cursor: pointer;
	background: transparent;
	border: none;
	border-radius: 50%;
	transform: translateY( -50% );
}

.bca-biblio__limpar:hover {
	color: var( --bca-tinta );
	background: rgba( 83, 105, 66, 0.1 );
}

.bca-biblio__limpar[hidden] {
	display: none;
}

.bca-biblio__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bca-biblio__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* 44px e o alvo de toque minimo. Com 40px o dedo pega a borda do chip de
	   baixo, e a lista de generos tem sete deles em duas linhas no celular. */
	min-height: 44px;
	padding: 10px 16px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var( --bca-tinta );
	cursor: pointer;
	background: var( --bca-superficie );
	border: 1px solid var( --bca-borda-forte );
	border-radius: 999px;
	transition:
		background-color 150ms ease,
		border-color 150ms ease,
		transform 150ms var( --bca-suave );
}

.bca-biblio__chip:hover {
	border-color: var( --bca-acento );
	transform: translateY( -1px );
}

.bca-biblio__chip:active {
	transform: scale( 0.97 );
}

.bca-biblio__chip.is-ativo {
	color: var( --bca-tinta );
	background: var( --bca-realce );
	border-color: var( --bca-acento );
}

.bca-biblio__chip-n {
	padding: 2px 7px;
	font-size: 12px;
	font-weight: 700;
	color: var( --bca-tinta-suave );
	background: rgba( 83, 105, 66, 0.12 );
	border-radius: 999px;
}

.bca-biblio__chip.is-ativo .bca-biblio__chip-n {
	color: var( --bca-tinta );
	background: rgba( 255, 255, 255, 0.6 );
}

.bca-biblio__contagem {
	margin: 0 0 20px;
	font-size: 15px;
	color: var( --bca-tinta-suave );
}

.bca-biblio__contagem strong {
	color: var( --bca-tinta );
}

/* ── Grade ──────────────────────────────────────────────────────────────── */

.bca-biblio__grade {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: var( --bca-gap );
	align-items: stretch;
}

@media ( max-width: 1200px ) {
	.bca-biblio__grade {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 976px ) {
	.bca-heroi {
		grid-template-columns: minmax( 0, 1fr );
		gap: 36px;
		padding: 44px 32px;
	}

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

	.bca-passos,
	.bca-cats {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

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

@media ( max-width: 767px ) {
	.bca-biblio {
		--bca-card-pad: 16px;
		--bca-gap: 16px;
	}

	.bca-heroi {
		padding: 36px 22px;
		margin-bottom: 64px;
		border-radius: 20px;
	}

	.bca-secao {
		margin-bottom: 64px;
	}

	.bca-numeros,
	.bca-passos,
	.bca-cats {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* Duas colunas no celular, nao uma: com uma so, rolar 41 livros vira
	   maratona. As capas continuam legiveis a 45vw. */
	.bca-biblio__grade {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.bca-biblio__busca {
		max-width: none;
	}


	.bca-numero__valor {
		font-size: 40px;
	}
}

/* ── Card do livro ──────────────────────────────────────────────────────── */

.bca-biblio__cartao {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: var( --bca-card-pad );
	background: var( --bca-superficie );
	border: 1px solid var( --bca-borda );
	border-radius: var( --bca-raio );
	box-shadow: var( --bca-sombra );
	transition:
		transform 180ms var( --bca-suave ),
		box-shadow 180ms var( --bca-suave ),
		border-color 180ms var( --bca-suave );
}

/* O hover soma ao translateY(0) que a entrada deixou. Por isso a elevacao so
   vale depois de `is-dentro`: antes disso o transform pertence a animacao. */
.bca-biblio__cartao.is-dentro:hover {
	transform: translateY( -2px );
	border-color: var( --bca-borda-forte );
	box-shadow: var( --bca-sombra-alta );
}

.bca-biblio__cartao[hidden] {
	display: none;
}

.bca-biblio__capa {
	display: block;
	overflow: hidden;
	background: rgba( 83, 105, 66, 0.06 );
	border-radius: var( --bca-raio-p );
	/* Reserva o espaco antes da imagem chegar: e o que segura o CLS abaixo de
	   0,1 tanto nos 12 do servidor quanto nos clones da busca. */
	aspect-ratio: 2 / 3;
}

.bca-biblio__capa-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 280ms var( --bca-suave );
}

.bca-biblio__cartao.is-dentro:hover .bca-biblio__capa-img {
	transform: scale( 1.03 );
}

.bca-biblio__capa-img[hidden],
.bca-biblio__capa-css[hidden] {
	display: none;
}

.bca-biblio__corpo {
	flex: 1 1 auto;
}

.bca-biblio__titulo {
	margin: 0 0 4px;
	font-family: var( --bca-display );
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	color: var( --bca-tinta );
}

.bca-biblio__titulo a {
	color: inherit;
	text-decoration: none;
}

.bca-biblio__titulo a:hover,
.bca-biblio__titulo a:focus {
	text-decoration: underline;
	text-decoration-color: var( --bca-acento );
	text-underline-offset: 3px;
}

.bca-biblio__autor {
	margin: 0 0 4px;
	font-size: 14px;
	color: var( --bca-tinta-suave );
}

.bca-biblio__meta {
	margin: 0;
	font-size: 12px;
	color: var( --bca-tinta-suave );
	opacity: 0.85;
}

.bca-biblio__autor[hidden],
.bca-biblio__meta[hidden] {
	display: none;
}

/* ── Links de título ────────────────────────────────────────────────────── */

/*
 * Medidos com 19px de altura — abaixo do minimo de 24px de alvo, e nao vale a
 * excecao de "link dentro de um paragrafo": eles sao o titulo de um cartao.
 *
 * Nao viram 44px de proposito: a capa logo acima e um link para o MESMO
 * destino, com o cartao inteiro de largura, e esticar o titulo so afastaria o
 * autor e o botao. O recuo leva o alvo acima do minimo sem inchar o cartao.
 *
 * Fora de media query: mouse tambem erra alvo de 19px, e o custo sao 8px por
 * cartao.
 */
.bca-biblio__titulo a,
.bca-rec__titulo a {
	display: inline-block;
	padding-block: 4px;
}

/* ── Botões ─────────────────────────────────────────────────────────────── */

.bca-biblio__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 12px 20px;
	font-family: var( --bca-texto-fonte );
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var( --bca-tinta );
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-color: var( --bca-realce );
	border: 1px solid var( --bca-acento );
	border-radius: 999px;
	transition:
		transform 150ms var( --bca-suave ),
		box-shadow 150ms var( --bca-suave ),
		filter 150ms ease;
}

.bca-biblio__btn:hover,
.bca-biblio__btn:focus {
	color: var( --bca-tinta );
	box-shadow: 0 6px 18px rgba( 218, 178, 0, 0.35 );
	transform: translateY( -1px );
}

.bca-biblio__btn:active {
	transform: scale( 0.97 );
	box-shadow: none;
}

.bca-biblio__btn[disabled] {
	cursor: progress;
	filter: grayscale( 0.4 );
	opacity: 0.7;
	transform: none;
	box-shadow: none;
}

/* No heroi os botoes sao lado a lado e nao ocupam a linha inteira. */
.bca-biblio__btn--grande {
	width: auto;
	min-height: 52px;
	padding: 15px 30px;
	font-size: 16px;
}

.bca-biblio__btn--fantasma {
	color: var( --bca-tinta );
	background-color: transparent;
	border-color: var( --bca-borda-forte );
}

.bca-biblio__btn--fantasma:hover {
	background-color: rgba( 255, 255, 255, 0.7 );
	border-color: var( --bca-acento );
	box-shadow: var( --bca-sombra );
}

.bca-biblio__btn--secundario {
	width: auto;
	color: var( --bca-tinta );
	background: var( --bca-superficie );
	border-color: var( --bca-borda-forte );
}

.bca-biblio__btn--secundario:hover {
	border-color: var( --bca-acento );
	box-shadow: var( --bca-sombra );
}

.bca-biblio__mais {
	margin-top: 32px;
	text-align: center;
}

.bca-biblio__mais [hidden] {
	display: none;
}

/* Sem isto o bloco continuava ocupando os 32px de margem depois que a busca
   escondia o botao. Quem marca e o JavaScript, e nao um `:has()`: o seletor nao
   existe em WebView antigo, que e publico real desta pagina. */
.bca-biblio__mais.esta-vazio {
	margin-top: 0;
}

.bca-biblio__aviso {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: var( --bca-tinta-suave );
}

/* ── Estado vazio ───────────────────────────────────────────────────────── */

.bca-biblio__vazio,
.bca-biblio__sem-resultado {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 48px 32px;
	text-align: center;
	background: var( --bca-superficie );
	border: 1px dashed var( --bca-borda-forte );
	border-radius: var( --bca-raio );
}

.bca-biblio__sem-resultado[hidden] {
	display: none;
}

.bca-biblio__sem-icone {
	color: var( --bca-acento );
}

.bca-biblio__sem-titulo {
	margin: 0;
	font-family: var( --bca-display );
	font-size: 19px;
	font-weight: 600;
	color: var( --bca-tinta );
}

.bca-biblio__sem-texto {
	margin: 0;
	font-size: 15px;
	color: var( --bca-tinta-suave );
}

.bca-biblio__sem-texto[hidden] {
	display: none;
}

.bca-biblio__sem-resultado .bca-biblio__btn {
	margin-top: 8px;
}

/* ── Capa em CSS puro ───────────────────────────────────────────────────── */

/* Usada quando nao ha imagem — seja porque o livro ainda nao tem capa, seja
   porque o servidor nao tem GD com FreeType. Mesmas cores da capa gerada, para
   a grade nunca aparecer com buraco. */
.bca-biblio__capa-css {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	padding: 22px 18px;
	color: #ffffff;
	text-align: left;
	background: var( --bca-estrutura );
	border: 2px solid var( --bca-realce );
	border-radius: var( --bca-raio-p );
	box-sizing: border-box;
}

.bca-biblio__capa-css[data-semente="1"] { background: #3d4a30; }
.bca-biblio__capa-css[data-semente="3"] { background: #2b2b2b; }

/* No fundo amarelo o texto vira tinta escura: branco sobre #ffd936 da ~1,5:1 e
   reprova em acessibilidade. */
.bca-biblio__capa-css[data-semente="2"] {
	color: var( --bca-tinta );
	background: var( --bca-realce );
	border-color: var( --bca-estrutura );
}

.bca-biblio__capa-css[data-semente="2"] .bca-biblio__capa-css-rodape {
	color: var( --bca-tinta );
}

.bca-biblio__capa-css-titulo {
	display: -webkit-box;
	overflow: hidden;
	font-family: var( --bca-display );
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
}

.bca-biblio__capa-css-autor {
	font-size: 14px;
	opacity: 0.9;
}

.bca-biblio__capa-css-autor[hidden] {
	display: none;
}

.bca-biblio__capa-css-rodape {
	margin-top: auto;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --bca-realce );
}

/* ── Título digitado ────────────────────────────────────────────────────── */

/* As duas palavras do titulo sao digitadas, uma depois da outra. */
.bca-heroi__palavra {
	display: inline-block;
}

/* Sem isto a linha do titulo encolheria enquanto as palavras estao vazias. */
.bca-heroi__palavra.esta-digitando,
.bca-heroi__realce.esta-digitando {
	min-height: 1em;
}

/* O cursor so existe durante a digitacao, e so na palavra da vez: cursor
   piscando para sempre num titulo e animacao infinita decorativa, que a base
   marca como coisa a evitar. */
.bca-heroi__palavra.esta-digitando::after,
.bca-heroi__realce.esta-digitando::after {
	content: '';
	display: inline-block;
	width: 3px;
	height: 0.82em;
	margin-left: 3px;
	vertical-align: -0.06em;
	background: var( --bca-tinta );
	animation: bca-cursor 900ms steps( 1 ) infinite;
}

@keyframes bca-cursor {
	50% { opacity: 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.bca-heroi__palavra.esta-digitando::after,
	.bca-heroi__realce.esta-digitando::after {
		display: none;
	}
}

/* ── Carrossel de recomendações ─────────────────────────────────────────── */

.bca-secao__cabeca--linha {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	max-width: none;
}

.bca-recs {
	position: relative;
	overflow: hidden;
	/* Mascara nas pontas: os cartoes entram e saem desvanecendo em vez de serem
	   cortados por uma linha reta. Onde `mask` nao existe, so nao ha o efeito. */
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 6%, #000 94%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 6%, #000 94%, transparent );
}

.bca-recs__trilho {
	display: flex;
	/* Espacamento por margem, e nao por `gap`, de proposito. A animacao anda
	   exatos -50% do trilho duplicado, e com `gap` o trilho tem 11 espacos para
	   12 cartoes: metade dele nao coincide com o bloco original e o laco fechava
	   12px fora do lugar, com um tranco visivel a cada volta. Com margem em cada
	   item, cada um mede 340+24 e a metade cai exatamente na emenda. */
	margin: 0;
	padding: 4px 0 18px;
	list-style: none;
	/* Enquanto o JavaScript nao duplicou a lista, ela e um carrossel de rolagem
	   normal — que e tambem o que sobra com movimento reduzido e sem script. */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.bca-recs.esta-rolando .bca-recs__trilho {
	overflow-x: visible;
	animation: bca-recs-anda var( --bca-duracao, 42s ) linear infinite;
	width: max-content;
}

.bca-recs.esta-rolando:hover .bca-recs__trilho,
.bca-recs.esta-rolando:focus-within .bca-recs__trilho,
.bca-recs.esta-parado .bca-recs__trilho {
	animation-play-state: paused;
}

@keyframes bca-recs-anda {
	to { transform: translateX( -50% ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.bca-recs.esta-rolando .bca-recs__trilho {
		animation: none;
	}
}

.bca-recs__item {
	flex: 0 0 auto;
	width: 340px;
	margin-right: var( --bca-gap );
	scroll-snap-align: start;
}

/* ── Cartão da vitrine ──────────────────────────────────────────────────── */

.bca-rec {
	display: flex;
	gap: 16px;
	height: 100%;
	padding: 14px;
	background: var( --bca-superficie );
	border: 1px solid var( --bca-borda );
	border-radius: 18px;
	box-shadow: var( --bca-sombra );
	transition: box-shadow 180ms var( --bca-suave ), border-color 180ms var( --bca-suave );
}

.bca-rec:hover {
	border-color: var( --bca-borda-forte );
	box-shadow: var( --bca-sombra-alta );
}

.bca-rec__capa {
	position: relative;
	flex: 0 0 auto;
	width: 108px;
	overflow: hidden;
	background: rgba( 83, 105, 66, 0.06 );
	border-radius: 12px;
	aspect-ratio: 2 / 3;
}

.bca-rec__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Degrade no pe da capa, como no modelo — mas quente e fraco, para nao brigar
   com o fundo claro do resto da pagina. */
.bca-rec__sombra {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 42%;
	background: linear-gradient( to bottom, rgba( 31, 36, 23, 0 ), rgba( 31, 36, 23, 0.42 ) );
}

.bca-rec__ficha {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 6px 4px 4px 0;
}

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

.bca-rec__titulo a {
	color: inherit;
	text-decoration: none;
}

.bca-rec__titulo a:hover,
.bca-rec__titulo a:focus {
	text-decoration: underline;
	text-decoration-color: var( --bca-acento );
	text-underline-offset: 3px;
}

.bca-rec__autor {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --bca-tinta-suave );
}

.bca-rec__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	margin-top: auto;
	padding: 10px 16px;
	font-family: var( --bca-texto-fonte );
	font-size: 14px;
	font-weight: 700;
	color: var( --bca-tinta );
	text-decoration: none;
	cursor: pointer;
	background: var( --bca-realce );
	border: 1px solid var( --bca-acento );
	border-radius: 999px;
	transition: box-shadow 150ms ease, transform 150ms var( --bca-suave );
}

.bca-rec__btn:hover,
.bca-rec__btn:focus {
	color: var( --bca-tinta );
	box-shadow: 0 6px 16px rgba( 218, 178, 0, 0.35 );
	transform: translateY( -1px );
}

.bca-rec__btn:active {
	transform: scale( 0.97 );
	box-shadow: none;
}

.bca-rec__seta {
	transition: transform 180ms var( --bca-suave );
}

.bca-rec__btn:hover .bca-rec__seta {
	transform: translateX( 3px );
}

/* ── Botão de pausa ─────────────────────────────────────────────────────── */

.bca-recs__pausa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 10px 18px;
	font-family: var( --bca-texto-fonte );
	font-size: 14px;
	font-weight: 600;
	color: var( --bca-tinta );
	cursor: pointer;
	background: var( --bca-superficie );
	border: 1px solid var( --bca-borda-forte );
	border-radius: 999px;
	transition: border-color 150ms ease;
}

.bca-recs__pausa:hover {
	border-color: var( --bca-acento );
}

.bca-recs__pausa[hidden] {
	display: none;
}

/* Duas barras: o simbolo de pausa, desenhado com borda em vez de emoji. */
.bca-recs__pausa-icone {
	width: 10px;
	height: 12px;
	border-right: 3px solid var( --bca-acento-txt );
	border-left: 3px solid var( --bca-acento-txt );
}

/* Pausado, o mesmo espaco vira um triangulo de "retomar". */
.bca-recs__pausa[aria-pressed="true"] .bca-recs__pausa-icone {
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-right: 0;
	border-bottom: 6px solid transparent;
	border-left: 10px solid var( --bca-acento-txt );
}

/* ── Por que a nossa biblioteca ─────────────────────────────────────────── */

.bca-porque {
	display: grid;
	grid-template-columns: minmax( 0, 0.95fr ) minmax( 0, 1.05fr );
	gap: 48px;
	align-items: center;
	padding: 48px 44px;
	background:
		radial-gradient( 90% 120% at 100% 0%, rgba( 255, 217, 54, 0.22 ) 0%, rgba( 255, 217, 54, 0 ) 60% ),
		var( --bca-fundo );
	border: 1px solid var( --bca-borda );
	border-radius: 28px;
}

.bca-porque__cabeca .bca-secao__titulo {
	margin-bottom: 12px;
}

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

.bca-porque__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.45;
	color: var( --bca-tinta );
}

.bca-porque__icone {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var( --bca-acento-txt );
	background: var( --bca-superficie );
	border: 1px solid var( --bca-borda-forte );
	border-radius: 12px;
	box-shadow: var( --bca-sombra );
}

.bca-porque__texto {
	padding-top: 8px;
}

/* ── Responsivo das seções novas ────────────────────────────────────────── */

/* Estas regras precisam vir DEPOIS das regras-base acima. Estavam junto com o
   resto do responsivo, mais acima no arquivo, e como a especificidade e a mesma
   quem vencia era a base, que vem depois: no celular o cartao da vitrine
   continuava com 340px e a lista de "por que" continuava em duas colunas. */

@media ( max-width: 976px ) {
	.bca-porque {
		grid-template-columns: minmax( 0, 1fr );
		gap: 32px;
		padding: 40px 32px;
	}
}

@media ( max-width: 767px ) {
	.bca-secao__cabeca--linha {
		flex-direction: column;
		align-items: flex-start;
	}

	/* O cartao precisa caber na largura util do celular (360px de tela menos os
	   22px de recuo de cada lado), senao a vitrine empurra a pagina para o lado. */
	.bca-recs__item {
		width: min( 280px, 100% );
		margin-right: 12px;
	}

	.bca-rec__capa {
		width: 88px;
	}

	.bca-rec__titulo {
		font-size: 17px;
	}

	.bca-porque {
		padding: 28px 20px;
		border-radius: 20px;
	}

	.bca-porque__lista {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ── Ficha do livro ─────────────────────────────────────────────────────── */

/*
 * Redesenhada em 09/09/2026. Antes ela herdava os tokens da pagina do acervo mas
 * nunca tinha sido desenhada: comecava direto na migalha e na capa, a capa
 * flutuava solta numa coluna de 300px contra `1fr`, a nota legal caia como texto
 * corrido colado no botao, e a pagina era um beco sem saida.
 *
 * A base de UI/UX indica Swiss Modernism + Minimalism para produto do tipo
 * biblioteca. Nao troco o sistema visual da casa por esse — consistencia com o
 * acervo vale mais —, pego dele a disciplina editorial: hierarquia forte, medida
 * de leitura curta, pouco ornamento.
 */

.bca-biblio--ficha {
	padding-top: 32px;
	padding-bottom: 80px;
}

/* ── Migalhas ───────────────────────────────────────────────────────────── */

.bca-ficha__migalhas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 14px;
	color: var( --bca-tinta-suave );
}

.bca-ficha__migalhas a {
	color: var( --bca-acento-txt );
	text-decoration: none;
	/* 24px de alvo: um link de 14px tem 19px de altura e fica abaixo do minimo. */
	padding-block: 3px;
}

.bca-ficha__migalhas a:hover,
.bca-ficha__migalhas a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bca-ficha__sep {
	opacity: 0.5;
}

.bca-ficha__atual {
	color: var( --bca-tinta );
}

/* ── O bloco de cima ────────────────────────────────────────────────────── */

.bca-ficha__topo {
	position: relative;
	display: grid;
	grid-template-columns: 320px minmax( 0, 1fr );
	gap: 48px;
	align-items: start;
	padding: 44px;
	margin-bottom: 64px;
	overflow: hidden;
	background:
		radial-gradient( 110% 130% at 100% 0%, rgba( 255, 217, 54, 0.24 ) 0%, rgba( 255, 217, 54, 0 ) 58% ),
		var( --bca-fundo );
	border: 1px solid var( --bca-borda );
	border-radius: 28px;
	box-shadow: var( --bca-sombra );
}

.bca-ficha__brilho {
	position: absolute;
	top: -35%;
	left: -10%;
	width: 420px;
	height: 420px;
	pointer-events: none;
	background: radial-gradient( circle, rgba( 83, 105, 66, 0.14 ) 0%, rgba( 83, 105, 66, 0 ) 70% );
	border-radius: 50%;
}

/* A capa acompanha a rolagem: e o padrao de pagina de produto, e aqui serve para
   a pessoa nao perder de vista o que esta prestes a levar enquanto desce pela
   ficha tecnica. 120px e a altura do cabecalho fixo do Astra com folga. */
.bca-ficha__capa-col {
	position: sticky;
	top: 120px;
	z-index: 1;
}

.bca-ficha__capa {
	margin: 0;
	overflow: hidden;
	background: rgba( 83, 105, 66, 0.06 );
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba( 31, 36, 23, 0.22 );
	aspect-ratio: 2 / 3;
	transform: rotate( -1.2deg );
	transition: transform 320ms var( --bca-suave );
}

/* A inclinacao some no hover: da a sensacao de pegar o livro da estante. */
.bca-ficha__capa:hover {
	transform: rotate( 0deg );
}

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

.bca-ficha__corpo {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.bca-ficha__selo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 7px 14px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --bca-acento-txt );
	background: rgba( 255, 255, 255, 0.72 );
	border: 1px solid var( --bca-borda-forte );
	border-radius: 999px;
}

.bca-ficha__titulo {
	margin: 0 0 8px;
	font-family: var( --bca-display );
	font-size: clamp( 30px, 4.2vw, 46px );
	font-weight: 600;
	line-height: 1.1;
	/* O Astra aplica letter-spacing negativo nos titulos do tema. */
	letter-spacing: normal;
	color: var( --bca-tinta );
}

.bca-ficha__autor {
	margin: 0 0 18px;
	font-size: 17px;
	color: var( --bca-tinta-suave );
}

/* ── Gêneros ────────────────────────────────────────────────────────────── */

.bca-ficha__generos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}

.bca-ficha__genero {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var( --bca-tinta );
	text-decoration: none;
	background: var( --bca-superficie );
	border: 1px solid var( --bca-borda-forte );
	border-radius: 999px;
	transition: border-color 150ms ease, transform 150ms var( --bca-suave );
}

.bca-ficha__genero:hover,
.bca-ficha__genero:focus-visible {
	color: var( --bca-tinta );
	border-color: var( --bca-acento );
	transform: translateY( -1px );
}

/* ── Descrição ──────────────────────────────────────────────────────────── */

/* Medida de leitura curta: linha longa demais faz o olho perder a volta. */
.bca-ficha__descricao {
	max-width: 62ch;
	margin-bottom: 28px;
	font-size: 17px;
	line-height: 1.65;
	color: var( --bca-tinta );
}

.bca-ficha__descricao p {
	margin: 0 0 14px;
}

.bca-ficha__descricao p:last-child {
	margin-bottom: 0;
}

/* ── Ação e nota ────────────────────────────────────────────────────────── */

.bca-ficha__acao {
	margin-bottom: 16px;
}

.bca-ficha__acao .bca-biblio__btn {
	width: auto;
}

/* Bloco de aviso, e nao texto solto: colada no botao como paragrafo corrido, a
   nota parecia mensagem de erro — e ela e o contrario disso. */
.bca-ficha__nota {
	display: flex;
	gap: 10px;
	max-width: 62ch;
	margin: 0;
	padding: 14px 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --bca-tinta-suave );
	background: rgba( 255, 255, 255, 0.6 );
	border: 1px solid var( --bca-borda );
	border-radius: 14px;
}

.bca-ficha__nota svg {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var( --bca-acento-txt );
}

/* ── Seções de baixo ────────────────────────────────────────────────────── */

.bca-ficha__secao {
	margin-bottom: 56px;
}

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

.bca-ficha__secao-texto {
	margin: 0 0 20px;
	font-size: 15px;
	color: var( --bca-tinta-suave );
}

.bca-ficha__subtitulo + .bca-biblio__dados,
.bca-ficha__subtitulo + .bca-ficha__alternativos {
	margin-top: 18px;
}

.bca-biblio__dados {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 18px 32px;
	margin: 0;
	padding: 28px;
	background: var( --bca-superficie );
	border: 1px solid var( --bca-borda );
	border-radius: var( --bca-raio );
	box-shadow: var( --bca-sombra );
}

.bca-biblio__dado dt {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --bca-tinta-suave );
}

.bca-biblio__dado dd {
	margin: 4px 0 0;
	font-size: 16px;
	color: var( --bca-tinta );
}

/* ── Alternativas de download ───────────────────────────────────────────── */

.bca-ficha__alternativos {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bca-ficha__alternativos li {
	padding: 16px 20px;
	background: var( --bca-superficie );
	border: 1px solid var( --bca-borda );
	border-radius: var( --bca-raio-p );
}

.bca-ficha__alternativos a {
	display: inline-block;
	padding-block: 3px;
	font-weight: 600;
	color: var( --bca-acento-txt );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bca-ficha__alternativos a:hover,
.bca-ficha__alternativos a:focus-visible {
	color: var( --bca-acento-txt );
	text-decoration: none;
}

.bca-biblio__nota {
	display: block;
	margin-top: 2px;
	font-size: 13.5px;
	color: var( --bca-tinta-suave );
}

.bca-ficha__voltar {
	margin: 0;
	text-align: center;
}

/* Na ficha "Continue lendo" reusa a grade do acervo, mas com quatro cartoes. */
.bca-ficha__secao .bca-biblio__grade {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

@media ( max-width: 1200px ) {
	.bca-ficha__secao .bca-biblio__grade {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* ── Ficha no tablet e no celular ───────────────────────────────────────── */

@media ( max-width: 976px ) {
	.bca-ficha__topo {
		grid-template-columns: 240px minmax( 0, 1fr );
		gap: 32px;
		padding: 32px;
	}

	/* Sem `sticky` aqui: com o bloco mais estreito a capa gruda e o texto ao lado
	   acaba antes dela, deixando um vao. */
	.bca-ficha__capa-col {
		position: static;
	}

	.bca-ficha__secao .bca-biblio__grade {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {
	.bca-biblio--ficha {
		padding-top: 20px;
		padding-bottom: 48px;
	}

	.bca-ficha__topo {
		grid-template-columns: minmax( 0, 1fr );
		gap: 24px;
		padding: 24px 20px;
		margin-bottom: 44px;
		border-radius: 20px;
	}

	/* A capa deixa de ocupar a tela inteira: em 360px uma capa 2:3 de largura
	   total mede 480px de altura e empurra titulo, autor e botao para fora. */
	.bca-ficha__capa-col {
		max-width: 190px;
	}

	.bca-ficha__capa {
		transform: none;
	}

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

	.bca-ficha__acao .bca-biblio__btn {
		width: 100%;
	}

	.bca-ficha__secao {
		margin-bottom: 40px;
	}

	.bca-biblio__dados {
		grid-template-columns: minmax( 0, 1fr );
		gap: 14px;
		padding: 20px;
	}

	.bca-ficha__voltar .bca-biblio__btn {
		width: 100%;
	}
}

/* ═══ O cabeçalho e o rodapé do tema ════════════════════════════════════════
 *
 * Tudo aqui e escopado em `body.bca-com-biblioteca`, a classe que
 * `Ativos::marcar_body()` poe so nesta pagina e na ficha do livro. O Astra e
 * stock, sem child theme, e o resto do site continua exatamente como esta — o
 * que muda e a moldura em volta do redesenho, para o cabecalho e o rodape nao
 * parecerem de outro site quando a pessoa desce a pagina.
 */

/* ── Cabeçalho ──────────────────────────────────────────────────────────── */

/*
 * Removido em 15/09/2026: esta página tinha cabeçalho próprio (fundo creme
 * translúcido, linha embaixo, menu em 15px/600 e sublinhado diferente), de antes
 * de o cabeçalho da casa existir em `site.css`. Agora vale o mesmo cabeçalho de
 * todas as outras páginas, no mesmo tamanho.
 */

/* ── Rodapé ─────────────────────────────────────────────────────────────── */

body.bca-com-biblioteca .site-primary-footer-wrap {
	position: relative;
	padding: 56px 0 48px;
	background-color: var( --bca-estrutura );
	border-radius: 28px 28px 0 0;
}

/* A mesma linha quente do topo do modal, fechando a pagina. */
body.bca-com-biblioteca .site-primary-footer-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 4px;
	background: linear-gradient( 90deg, var( --bca-realce ), var( --bca-acento ) 60%, rgba( 255, 217, 54, 0.25 ) );
	border-radius: 28px 28px 0 0;
}

body.bca-com-biblioteca .site-footer,
body.bca-com-biblioteca .site-footer .ast-builder-html-element,
body.bca-com-biblioteca .site-footer p {
	font-family: var( --bca-texto-fonte );
	color: var( --bca-fundo );
}

/* #faf8f2 sobre #536942 mede 5,55:1. O amarelo da marca mede 4,34:1 e nao
   passaria como cor de texto, entao ele fica so no sublinhado. */
body.bca-com-biblioteca .site-footer a,
body.bca-com-biblioteca .footer-nav-wrap .menu-link {
	font-size: 15px;
	font-weight: 600;
	color: var( --bca-fundo );
	text-decoration: none;
	transition: color 150ms ease;
}

body.bca-com-biblioteca .site-footer a:hover,
body.bca-com-biblioteca .footer-nav-wrap .menu-link:hover,
body.bca-com-biblioteca .site-footer a:focus-visible,
body.bca-com-biblioteca .footer-nav-wrap .menu-link:focus-visible {
	color: #ffffff;
	text-decoration: underline;
	text-decoration-color: var( --bca-realce );
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

body.bca-com-biblioteca .site-footer a:focus-visible {
	outline: 3px solid var( --bca-realce );
	outline-offset: 3px;
	border-radius: 6px;
}

/* O seletor precisa carregar o ID: o Astra pinta o menu do rodape com
   `#astra-footer-menu .menu-item > a`, que e (1,1,1) e vencia a regra acima —
   os links saiam pretos sobre o verde, com contraste de 1,9:1. */
body.bca-com-biblioteca #astra-footer-menu .menu-item > a,
body.bca-com-biblioteca #astra-footer-menu .menu-item > a .menu-text {
	color: var( --bca-fundo );
}

body.bca-com-biblioteca #astra-footer-menu .menu-item > a:hover,
body.bca-com-biblioteca #astra-footer-menu .menu-item > a:focus-visible {
	color: #ffffff;
}

body.bca-com-biblioteca .footer-nav-wrap .ast-nav-menu {
	gap: 6px 28px;
	justify-content: center;
}

body.bca-com-biblioteca .footer-nav-wrap .menu-item {
	margin: 0;
}

/* O rodape do tema e uma grade de tres colunas iguais e so a primeira tem
   conteudo, entao o menu ficava encolhido num terco da largura com dois tercos
   de verde vazio ao lado. */
body.bca-com-biblioteca .site-primary-footer-inner-wrap {
	grid-template-columns: minmax( 0, 1fr );
}

/* O container do Spectra reserva 112px em cima e embaixo. Isso fazia sentido
   quando havia um cabecalho de bloco ali; com o heroi, que ja tem 56px de
   recuo proprio e fundo proprio, sobrava um vazio grande entre o menu e o
   titulo — e outro entre o fim da grade e o rodape. */
body.bca-com-biblioteca .entry-content > .uagb-is-root-container {
	padding-top: 40px;
	padding-bottom: 64px;
}

@media ( max-width: 767px ) {
	body.bca-com-biblioteca .entry-content > .uagb-is-root-container {
		padding-top: 24px;
		padding-bottom: 48px;
	}
}

@media ( max-width: 767px ) {
	body.bca-com-biblioteca .site-primary-footer-wrap {
		padding: 40px 0 36px;
		border-radius: 20px 20px 0 0;
	}
}

@media print {
	body.bca-com-biblioteca .site-primary-footer-wrap {
		background: none;
	}

	body.bca-com-biblioteca .site-footer a,
	body.bca-com-biblioteca .footer-nav-wrap .menu-link {
		color: #000000;
	}
}

/* ═══ Celular ══════════════════════════════════════════════════════════════
 *
 * Este bloco fica no fim do arquivo de proposito: as regras-base das secoes
 * novas foram escritas depois do responsivo antigo, e com a mesma
 * especificidade quem vence e quem vem por ultimo. Ja custou um bug — o cartao
 * da vitrine ficou com 340px numa tela de 360 e empurrava a pagina para o lado.
 *
 * O problema real medido no celular nao era largura, era ALTURA: 9149px, doze
 * telas de rolagem, sendo 2124px so nos cartoes de genero. Quem abre a pagina
 * quer chegar aos livros, e chegava depois de rolar oito vezes. Quase tudo aqui
 * e sobre encurtar esse caminho sem esconder conteudo.
 */

@media ( max-width: 767px ) {

	/* ── Respiro geral ──────────────────────────────────────────────────── */

	.bca-secao {
		margin-bottom: 48px;
	}

	.bca-secao__cabeca {
		margin-bottom: 20px;
	}

	/* O cabecalho do Astra no celular mede 85px; 120px deixava um vao acima do
	   alvo da ancora. */
	.bca-biblio [id] {
		scroll-margin-top: 96px;
	}

	/* Sem o realce cinza do toque em cima do nosso proprio estado de :active. */
	.bca-biblio a,
	.bca-biblio button,
	.bca-cat {
		-webkit-tap-highlight-color: rgba( 218, 178, 0, 0.15 );
		touch-action: manipulation;
	}

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

	.bca-heroi {
		gap: 24px;
		padding: 32px 20px;
	}

	.bca-heroi__linha {
		margin-bottom: 24px;
		font-size: 16px;
	}

	/* Empilhados e da largura toda: lado a lado eles ja quebravam em duas linhas
	   de qualquer jeito, entao nao custa altura nenhuma e o alvo dobra. */
	.bca-heroi__acoes {
		flex-direction: column;
		gap: 10px;
	}

	.bca-heroi__acoes .bca-biblio__btn {
		width: 100%;
	}

	/* Os dois numeros lado a lado. Empilhados ocupavam 355px — meia tela para
	   dizer "41" e "6". */
	.bca-numeros {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 12px;
	}

	.bca-numero {
		padding: 16px 14px;
	}

	.bca-numero__valor {
		font-size: 34px;
	}

	/* "CATEGORIAS" quebrava no meio da palavra: 13px com 0.1em de espacamento
	   nao cabia na coluna estreita, e uma palavra partida ao meio le pior que
	   uma palavra menor. */
	.bca-numero__rotulo {
		font-size: 12px;
		letter-spacing: 0.05em;
		overflow-wrap: normal;
		word-break: keep-all;
		hyphens: none;
	}

	.bca-numero__ajuda {
		display: none; /* A frase de apoio repete o que o rotulo ja diz. */
	}

	/* ── Como funciona ──────────────────────────────────────────────────── */

	/* Vira lista: o numero na esquerda, o texto na direita. Como tres cartoes
	   empilhados a secao media 818px. */
	.bca-passos {
		gap: 10px;
	}

	.bca-passo {
		display: grid;
		grid-template-columns: 40px minmax( 0, 1fr );
		gap: 4px 14px;
		padding: 16px;
	}

	.bca-passo__n {
		grid-row: span 2;
		margin-bottom: 0;
	}

	.bca-passo__titulo {
		align-self: center;
		font-size: 17px;
	}

	/* ── Cartões de gênero ──────────────────────────────────────────────── */

	/* De pe, cada cartao media 317px e os seis somavam 2124px. Deitado, o mosaico
	   fica na esquerda e o texto na direita, e o mesmo conteudo cabe em ~130px.
	   Nada foi escondido: o nome, a contagem e a descricao continuam la. */
	.bca-cat {
		flex-direction: row;
		align-items: stretch;
	}

	.bca-cat__mosaico {
		flex: 0 0 auto;
		width: 108px;
		height: auto;
		padding: 12px 10px 0;
	}

	.bca-cat__capa {
		width: calc( ( 100% - 8px ) / 3 );
	}

	/* Deitado, o veu tem de descer pela direita e nao pela base. */
	.bca-cat__veu {
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: 40px;
		height: auto;
		background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), var( --bca-superficie ) );
	}

	.bca-cat__corpo {
		gap: 4px;
		padding: 14px 16px 14px 8px;
	}

	.bca-cat__nome {
		font-size: 18px;
	}

	.bca-cat__texto {
		display: -webkit-box;
		overflow: hidden;
		font-size: 13px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.bca-cat__acao {
		margin-top: 4px;
		font-size: 13px;
	}

	/* ── Controles do acervo ────────────────────────────────────────────── */

	/* Sete generos em linhas quebradas ocupavam tres fileiras. Em faixa rolavel
	   ocupam uma, e o corte a direita e o proprio aviso de que ha mais. */
	.bca-biblio__filtros {
		flex-wrap: nowrap;
		gap: 8px;
		margin: 0 -20px;
		padding: 2px 20px 6px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-left: 20px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.bca-biblio__filtros::-webkit-scrollbar {
		display: none;
	}

	.bca-biblio__chip {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* ── Cartão do livro ────────────────────────────────────────────────── */

	.bca-biblio__cartao {
		gap: 10px;
		padding: 12px;
	}

	.bca-biblio__titulo {
		font-size: 15px;
	}

	.bca-biblio__autor {
		font-size: 13px;
	}

	.bca-biblio__btn {
		padding: 11px 14px;
		font-size: 14px;
	}

	/* 11px reprovava o piso de 12px para texto de corpo. */
	.bca-biblio__capa-css-rodape {
		font-size: 12px;
	}

	.bca-biblio__capa-css-titulo {
		font-size: 17px;
		-webkit-line-clamp: 4;
	}

	/* ── Vitrine ────────────────────────────────────────────────────────── */

	/* Sem laco automatico em tela de toque: quem arrasta e o dedo. O recuo
	   negativo faz o primeiro cartao comecar alinhado com o texto e o ultimo
	   poder passar da borda, que e como um carrossel de celular se comporta. */
	.bca-recs {
		margin: 0 -20px;
	}

	.bca-recs__trilho {
		padding: 4px 20px 14px;
		scroll-padding-left: 20px;
	}
}

/* ── Telas bem estreitas ────────────────────────────────────────────────── */

@media ( max-width: 400px ) {
	.bca-heroi__titulo {
		font-size: 34px;
	}

	.bca-numero__valor {
		font-size: 30px;
	}

	.bca-cat__mosaico {
		width: 92px;
	}
}

/* ── Celular deitado ────────────────────────────────────────────────────── */

/* Em paisagem sobra largura e falta altura: o heroi de uma coluna ocupava 685px
   numa tela de 360 de altura, quase duas telas. Aqui ele volta a duas colunas. */
@media ( orientation: landscape ) and ( max-height: 520px ) {
	.bca-heroi {
		grid-template-columns: minmax( 0, 1.3fr ) minmax( 0, 1fr );
		gap: 28px;
		padding: 28px 24px;
	}

	.bca-heroi__titulo {
		font-size: 34px;
	}

	.bca-heroi__acoes {
		flex-direction: row;
	}

	.bca-heroi__acoes .bca-biblio__btn {
		width: auto;
	}

	.bca-numeros {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ── Alvos de toque do tema ─────────────────────────────────────────────── */

/*
 * Medido no celular: o botao do menu tinha 38x38, o logo 50x19 e os links do
 * rodape 35px de altura. Todos abaixo dos 44x44 que um polegar acerta sem
 * errar. Continua tudo escopado nesta pagina.
 */



body.bca-com-biblioteca .custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

body.bca-com-biblioteca #astra-footer-menu .menu-item > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
}

/* Um item de menu que ocupa a largura toda e um alvo muito mais facil que um
   rotulo de 60px no meio da linha. */
@media ( max-width: 767px ) {
	body.bca-com-biblioteca #ast-hf-mobile-menu .menu-item > .menu-link,
	body.bca-com-biblioteca .ast-mobile-popup-drawer .menu-item > .menu-link {
		min-height: 48px;
		display: flex;
		align-items: center;
	}

	body.bca-com-biblioteca .footer-nav-wrap .ast-nav-menu {
		gap: 2px 20px;
	}

	body.bca-com-biblioteca .site-primary-footer-wrap {
		padding: 32px 0 28px;
	}
}

@media ( max-width: 767px ) {

	/* ── "Por que" mais compacto ────────────────────────────────────────── */

	.bca-porque {
		gap: 24px;
	}

	.bca-porque__cabeca .bca-secao__texto {
		font-size: 15px;
	}

	.bca-porque__lista {
		gap: 10px;
	}

	.bca-porque__item {
		gap: 10px;
		font-size: 14px;
	}

	.bca-porque__icone {
		width: 34px;
		height: 34px;
		border-radius: 10px;
	}

	.bca-porque__icone svg {
		width: 18px;
		height: 18px;
	}

	.bca-porque__texto {
		padding-top: 6px;
	}
}

/* ═══ Correções do cabeçalho e da vitrine no celular ═══════════════════════
 *
 * Tudo escopado em `body.bca-com-biblioteca`, como o resto da moldura.
 */

/* ── O sublinhado é do cabeçalho de desktop ─────────────────────────────── */

/*
 * O traço amarelo que cresce do centro foi escrito para a barra horizontal do
 * desktop, onde ele fica ABAIXO do texto. No menu de celular o mesmo item vira
 * um bloco de 46px de altura, e `bottom: 22px` cai bem no meio da palavra: dava
 * um risco amarelo atravessando "Biblioteca Virtual".
 *
 * Por isso a regra passa a viver dentro do cabeçalho de desktop, que é o único
 * lugar onde ela faz sentido.
 */




/* ── O menu de celular flutua, não empurra ──────────────────────────────── */

/*
 * O construtor de cabeçalho do Astra abre o menu como `dropdown`: ele entra no
 * fluxo e empurra a página inteira para baixo. Aqui ele passa a flutuar sobre o
 * conteúdo, que é o que se espera de um menu de celular — e o que evita a
 * página inteira dar um salto ao abrir.
 */




/* ── Instagram e Facebook na barra do celular ───────────────────────────── */

/*
 * Só os ícones, ao lado do botão do menu. Quem move os links para cá é o
 * `biblioteca.js`: o construtor de cabeçalho do Astra não oferece gancho de PHP
 * nesse ponto. Sem JavaScript eles continuam dentro do menu, como antes.
 */




/* Na barra o nome não cabe: o alvo é o ícone. Ele fica para leitor de tela,
   junto com o `aria-label` que o link já carrega. */






/* ── A vitrine no celular ───────────────────────────────────────────────── */

@media ( max-width: 767px ) {
	/*
	 * A vitrine volta a andar sozinha. Parada, ela não parecia uma escolha de
	 * respeito ao gesto — parecia quebrada.
	 *
	 * O trilho deixa de ser rolável quando o laço está ligado: as duas coisas
	 * disputam o mesmo eixo, e o resultado é um empurra-empurra. Quem cede é o
	 * laço, que pausa enquanto o dedo está na tela (classe `esta-tocado`).
	 */
	.bca-recs.esta-rolando .bca-recs__trilho {
		overflow-x: visible;
	}

	/* Um cartão inteiro e o começo do próximo: sinal de que há mais ao lado. */
	.bca-recs__item {
		width: min( 260px, 78vw );
	}
}

.bca-recs.esta-tocado .bca-recs__trilho {
	animation-play-state: paused;
}

/* ── O mosaico do gênero no celular ─────────────────────────────────────── */

@media ( max-width: 767px ) {
	/*
	 * Três capas dentro de 92px davam 21px de largura cada — tiras verticais em
	 * que não dá para ver nada, que foi o relato. Deitado, o cartão não tem
	 * largura para três; tem para UMA, e uma capa legível vale mais que três
	 * ilegíveis.
	 *
	 * As outras duas continuam no HTML e continuam `aria-hidden`: quem chega no
	 * desktop vê o mosaico completo, sem marcação diferente por tamanho de tela.
	 */
	/* 112px de largura com 10px de recuo de cada lado dão 92px úteis; com os
	   138px de altura do cartão isso é exatamente 2:3, a proporção da capa. Ela
	   entra inteira, sem corte e sem tarja. */
	.bca-cat__mosaico {
		width: 112px;
		padding: 10px;
	}

	.bca-cat__capa {
		width: 100%;
		height: 100%;
		border-radius: 6px;
		/* `cover` cortava a capa no meio: "A VOLTA AO MUNDO EM 80 DIAS" aparecia
		   sem o título e sem o autor, que é o contrário do que o mosaico serve
		   para mostrar. */
		object-fit: contain;
	}

	.bca-cat__capa:nth-child( n + 2 ) {
		display: none;
	}

	/* Com uma capa só e ela inteira, o véu não tem o que suavizar. */
	.bca-cat__veu {
		display: none;
	}
}

@media ( max-width: 400px ) {
	.bca-cat__mosaico {
		width: 96px;
	}
}

/* ═══ A Casa Amarela na página ═════════════════════════════════════════════
 *
 * O azul do logo, a foto da casa, e o movimento que faltava.
 *
 * A paleta era amarelo + um verde que veio do tema Astra e nunca foi cor da
 * casa. Amostrando a placa da foto da biblioteca inflável, o azul da Casa
 * Amarela é #1e3780 — e ele mede 10,9:1 sobre branco e 7,9:1 sobre o amarelo da
 * marca, ou seja, é cor de texto de verdade, não só enfeite.
 *
 * O sistema visual segue a base de UI/UX para produto de biblioteca infantil:
 * **Claymorphism** — cantos de 16-24px, bordas grossas, sombra dupla (interna e
 * externa) e "aperto macio" no clique, com a curva de balanço
 * cubic-bezier(0.34, 1.56, 0.64, 1). É o que dá o ar de brinquedo sem virar
 * bagunça.
 */

:root {
	/* O azul da placa da Casa Amarela, medido na foto. */
	--bca-azul: #1e3780;
	--bca-azul-fundo: #eef1f9;
	--bca-azul-borda: rgba( 30, 55, 128, 0.22 );

	/* Sombra dupla do claymorphism: uma externa que apoia, uma interna que
	   infla. Sem linha dura em canto nenhum. */
	--bca-clay: 0 10px 24px rgba( 31, 36, 23, 0.10 ), inset 0 -3px 0 rgba( 31, 36, 23, 0.06 );
	--bca-clay-alta: 0 18px 38px rgba( 31, 36, 23, 0.16 ), inset 0 -3px 0 rgba( 31, 36, 23, 0.06 );

	/* Balanço com leve ultrapassagem — é o que faz parecer objeto, não caixa. */
	--bca-balanco: cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

/* ── Herói: a foto e os números ─────────────────────────────────────────── */

.bca-heroi__lado {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 14px;
}

.bca-heroi__foto {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var( --bca-superficie );
	/* Borda grossa e cantos largos: a receita do claymorphism. */
	border: 4px solid var( --bca-superficie );
	border-radius: 22px;
	box-shadow: var( --bca-clay-alta );
	/* A mesma inclinação da capa na ficha, para o gesto ser um só no site. */
	transform: rotate( -1.5deg );
	transition: transform 340ms var( --bca-balanco ), box-shadow 340ms ease;
}

.bca-heroi__foto:hover {
	transform: rotate( 0deg ) translateY( -3px );
}

.bca-heroi__foto-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
}

.bca-heroi__legenda {
	position: absolute;
	right: 10px;
	bottom: 10px;
	left: 10px;
	padding: 8px 12px;
	font-size: 12.5px;
	font-weight: 700;
	color: #ffffff;
	/* Branco sobre o azul do logo mede 10,9:1. */
	background: rgba( 30, 55, 128, 0.88 );
	border-radius: 12px;
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
}

/* Lado a lado embaixo da foto: dois números pequenos valem mais que dois
   cartões grandes disputando espaço com ela. */
.bca-numeros {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 12px;
}

.bca-numero {
	border: 3px solid var( --bca-superficie );
	border-radius: 20px;
	box-shadow: var( --bca-clay );
	transition: transform 240ms var( --bca-balanco );
}

.bca-numero:hover {
	transform: translateY( -3px );
}

/* Um pulso curto quando a contagem termina — a chegada do número, não um laço. */
.bca-numero__valor.esta-completo {
	animation: bca-pulso 320ms var( --bca-balanco );
}

@keyframes bca-pulso {
	50% { transform: scale( 1.12 ); }
}

.bca-numero__valor {
	display: block;
	color: var( --bca-azul );
}

/* ── Poeira de biblioteca ───────────────────────────────────────────────── */

/*
 * Doze pontos subindo devagar. Cada um leva o próprio `--i`, e daí saem posição,
 * atraso e duração — sem doze regras escritas à mão.
 *
 * `pointer-events: none` porque a camada cobre o herói inteiro e não pode
 * roubar um clique do botão que está embaixo.
 */
.bca-heroi__poeira {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	border-radius: 28px;
}

.bca-poeira {
	position: absolute;
	bottom: -12px;
	left: calc( var( --i ) * 8.1% );
	width: 7px;
	height: 7px;
	background: var( --bca-realce );
	border-radius: 50%;
	opacity: 0;
	animation: bca-subir calc( 9s + var( --i ) * 1.1s ) linear infinite;
	animation-delay: calc( var( --i ) * -1.4s );
}

/* Um em cada três é azul: a poeira também carrega a marca. */
.bca-poeira:nth-child( 3n ) {
	width: 5px;
	height: 5px;
	background: var( --bca-azul );
}

.bca-poeira:nth-child( 4n ) {
	width: 9px;
	height: 9px;
	background: var( --bca-acento );
}

@keyframes bca-subir {
	0%   { opacity: 0; transform: translateY( 0 ) translateX( 0 ) scale( 0.6 ); }
	12%  { opacity: 0.55; }
	80%  { opacity: 0.35; }
	100% { opacity: 0; transform: translateY( -320px ) translateX( 26px ) scale( 1 ); }
}

/* ── Brilho que segue o cursor ──────────────────────────────────────────── */

/*
 * `--bca-x` e `--bca-y` são atualizados pelo JavaScript no `pointermove`. Sem
 * ponteiro fino a camada nem existe — em celular não há cursor a seguir.
 */
@media ( hover: hover ) and ( pointer: fine ) {
	.bca-heroi__brilho {
		top: auto;
		right: auto;
		left: auto;
		width: 340px;
		height: 340px;
		transform: translate( calc( var( --bca-x, 50% ) - 170px ), calc( var( --bca-y, 50% ) - 170px ) );
		background: radial-gradient( circle, rgba( 255, 217, 54, 0.30 ) 0%, rgba( 255, 217, 54, 0 ) 70% );
		transition: opacity 300ms ease;
		will-change: transform;
	}
}

/* ── Claymorphism nos elementos que se toca ─────────────────────────────── */

.bca-biblio__btn,
.bca-rec__btn,
.bca-retirada__enviar {
	border-width: 2px;
	box-shadow: 0 4px 0 rgba( 154, 125, 0, 0.55 );
	transition:
		transform 160ms var( --bca-balanco ),
		box-shadow 160ms ease;
}

/* Aperto macio: o botão afunda os 4px da própria sombra. */
.bca-biblio__btn:active,
.bca-rec__btn:active,
.bca-retirada__enviar:active {
	transform: translateY( 4px );
	box-shadow: 0 0 0 rgba( 154, 125, 0, 0.55 );
}

.bca-biblio__btn:hover,
.bca-rec__btn:hover {
	box-shadow: 0 6px 0 rgba( 154, 125, 0, 0.55 ), 0 10px 22px rgba( 218, 178, 0, 0.32 );
	transform: translateY( -2px );
}

.bca-biblio__btn--fantasma,
.bca-biblio__btn--secundario {
	box-shadow: 0 4px 0 var( --bca-azul-borda );
}

.bca-biblio__btn--fantasma:active,
.bca-biblio__btn--secundario:active {
	box-shadow: 0 0 0 var( --bca-azul-borda );
}

.bca-biblio__btn--fantasma:hover,
.bca-biblio__btn--secundario:hover {
	box-shadow: 0 6px 0 var( --bca-azul-borda );
}

/* Varredura de brilho: 600ms, uma vez por hover, só transform. */
.bca-biblio__btn,
.bca-biblio__chip {
	position: relative;
	overflow: hidden;
}

.bca-biblio__btn::before,
.bca-biblio__chip::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	pointer-events: none;
	background: linear-gradient( 100deg, transparent, rgba( 255, 255, 255, 0.65 ), transparent );
	transform: skewX( -18deg );
	opacity: 0;
}

.bca-biblio__btn:hover::before,
.bca-biblio__chip:hover::before {
	animation: bca-varre 620ms ease-out;
}

@keyframes bca-varre {
	0%   { opacity: 0.9; transform: translateX( 0 ) skewX( -18deg ); }
	100% { opacity: 0;   transform: translateX( 340% ) skewX( -18deg ); }
}

/* ── O azul entra ───────────────────────────────────────────────────────── */

.bca-heroi__selo {
	color: #ffffff;
	background: var( --bca-azul );
	border-color: var( --bca-azul );
}

.bca-heroi__ponto {
	background: var( --bca-realce );
}

/* Numeral do passo: azul sobre amarelo mede 7,9:1. */
.bca-passo__n {
	color: var( --bca-azul );
	border: 3px solid var( --bca-azul );
}

.bca-porque__icone {
	color: var( --bca-azul );
	border-color: var( --bca-azul-borda );
	background: var( --bca-azul-fundo );
}

.bca-cat__acao,
.bca-cat__numeros strong {
	color: var( --bca-azul );
}

.bca-ficha__selo {
	color: #ffffff;
	background: var( --bca-azul );
	border-color: var( --bca-azul );
}

.bca-biblio__chip.is-ativo {
	border-color: var( --bca-azul );
	box-shadow: inset 0 -3px 0 var( --bca-azul-borda );
}

/* ── O mosaico do gênero, dentro da margem ──────────────────────────────── */

/*
 * As três capas estouravam o cartão em cima e eram cortadas embaixo pelo véu:
 * "CARTAS D'AMOR", "BARCA DO INFERNO" e "Amor de Perdição" apareciam pela
 * metade. A altura era fixa em 132px e a capa, que é 2:3, não cabia.
 *
 * Agora a faixa tem a altura que a capa pede: três capas numa coluna de ~355px
 * com 16px de recuo dão ~104px de largura cada, que a 2:3 são ~156px de altura.
 * Com recuo igual nos quatro lados, a capa aparece inteira.
 */
.bca-cat__mosaico {
	height: auto;
	padding: 14px;
	gap: 8px;
	/* Com `contain` sobra faixa em volta da capa; um fundo quieto faz dela
	   prateleira em vez de moldura sobrando. */
	background: linear-gradient( 170deg, rgba( 255, 217, 54, 0.16 ), rgba( 30, 55, 128, 0.07 ) );
	/* `flex-start`, e nunca `stretch`. Com `stretch` o item ganha a altura da
	   linha, e aí o navegador passa a derivar a LARGURA do `aspect-ratio` a
	   partir dessa altura — as três capas estouravam a caixa e a primeira e a
	   última apareciam cortadas pelo `overflow`. */
	align-items: flex-start;
}

.bca-cat__capa {
	flex: 0 0 auto;
	width: calc( ( 100% - 16px ) / 3 );
	height: auto;
	align-self: flex-start;
	aspect-ratio: 2 / 3;
	/* `contain`, e não `cover`. A caixa é 2:3, mas as capas reais não são todas:
	   com `cover` o navegador cortava as laterais e comia o título — "Do Contrato
	   Social", "CARTAS D'AMOR" e "MEMORIAL DE AIRES" apareciam pela metade. O
	   layout estava certo o tempo todo; quem cortava era o recorte da imagem. */
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 6px 14px rgba( 31, 36, 23, 0.20 );
	transition: transform 260ms var( --bca-balanco );
}

/* Sem faixa cortando o pé das capas: elas agora cabem inteiras. */
.bca-cat__veu {
	display: none;
}

/* As três sobem em tempos diferentes, como livros puxados da estante. */
.bca-cat:hover .bca-cat__capa:nth-child( 1 ) { transform: translateY( -6px ) rotate( -2deg ); }
.bca-cat:hover .bca-cat__capa:nth-child( 2 ) { transform: translateY( -9px ); }
.bca-cat:hover .bca-cat__capa:nth-child( 3 ) { transform: translateY( -6px ) rotate( 2deg ); }

.bca-cat {
	border-width: 2px;
	border-radius: 20px;
	box-shadow: var( --bca-clay );
}

.bca-cat:hover {
	box-shadow: var( --bca-clay-alta );
}

/* ── O cartão do livro flutua, e não inclina ────────────────────────────── */

/*
 * A inclinação 3D saiu daqui e a função `inclinar3D()` saiu do JavaScript: com
 * até 6 graus de `rotateX`/`rotateY` a capa entortava debaixo do cursor, o que
 * é distorção e não profundidade. O gesto certo é o livro subir.
 *
 * Sem JavaScript nenhum: `:hover` e `:focus-within` fazem o mesmo trabalho, e o
 * segundo é o que dá o mesmo gesto a quem chega pelo teclado — o foco cai no
 * link da capa ou no botão "Pegar livro", que são FILHOS do cartão, e por isso
 * `:focus` sozinho nunca pegaria.
 */
@media ( hover: hover ) and ( pointer: fine ) {
	.bca-biblio__cartao:hover,
	.bca-biblio__cartao:focus-within {
		transform: translateY( -10px );
		box-shadow: var( --bca-clay-alta );
	}

	/* A capa sobe um pouco mais que o cartão: é o que dá profundidade sem girar
	   nada. */
	.bca-biblio__cartao:hover .bca-biblio__capa-img,
	.bca-biblio__cartao:focus-within .bca-biblio__capa-img {
		transform: translateY( -4px ) scale( 1.015 );
	}
}

.bca-biblio__cartao {
	border-width: 2px;
	border-radius: 18px;
	box-shadow: var( --bca-clay );
}

/* ── Ícones: o símbolo centrado dentro de si ────────────────────────────── */

/*
 * Medido no botão do menu: `justify-content: normal`, e o SVG ficava a 11px da
 * esquerda e 17px da direita — visivelmente fora do centro. Os dois ícones
 * sociais ainda estavam 2px fora do eixo vertical do hambúrguer.
 */


/* O ícone do tema vem embrulhado em spans que reintroduzem alinhamento. */


/* Os três na mesma linha de base. */


/* ── Movimento reduzido desliga a magia inteira ─────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.bca-heroi__poeira,
	.bca-biblio__btn::before,
	.bca-biblio__chip::before {
		display: none;
	}

	.bca-heroi__foto,
	.bca-numero,
	.bca-cat:hover .bca-cat__capa {
		transform: none !important;
	}

	.bca-numero__valor.esta-completo {
		animation: none;
	}

	.bca-biblio__cartao,
	.bca-biblio__cartao .bca-biblio__capa-img {
		transform: none !important;
	}
}

/* ── A vitrine agora é transportada por JavaScript ──────────────────────── */

/*
 * A animação de CSS saiu. Quem move o trilho é o `requestAnimationFrame` do
 * `biblioteca.js`, escrevendo `translate3d` — porque animação de CSS e rolagem
 * disputam o mesmo eixo, e era isso que impedia arrastar com o dedo.
 */
.bca-recs.esta-rolando .bca-recs__trilho {
	width: max-content;
	overflow-x: visible;
	animation: none;
	will-change: transform;
	/* A chave do gesto: o navegador continua dono da rolagem VERTICAL, e só o
	   horizontal chega até nós. Sem isto o carrossel sequestraria a rolagem da
	   página no primeiro toque. */
	touch-action: pan-y;
	cursor: grab;
	/* Arrastar não pode virar seleção de texto no meio do caminho. */
	-webkit-user-select: none;
	user-select: none;
}

.bca-recs.esta-arrastando .bca-recs__trilho {
	cursor: grabbing;
}

/* O cartão inteiro é a alça: durante o arrasto o link não deve "pegar". */
.bca-recs.esta-arrastando .bca-rec__titulo a,
.bca-recs.esta-arrastando .bca-rec__btn {
	pointer-events: none;
}

@media ( prefers-reduced-motion: reduce ) {
	/* Sem transporte nenhum: volta a ser uma faixa que o navegador rola. */
	.bca-recs.esta-rolando .bca-recs__trilho {
		width: auto;
		overflow-x: auto;
		transform: none !important;
	}
}

/* ═══ Correções de cascata das regras acima ════════════════════════════════
 *
 * Estas precisam vir DEPOIS das regras novas do mosaico e dos ícones: com a
 * mesma especificidade quem vence é quem vem por último, e as regras de celular
 * escritas mais acima estavam sendo anuladas. Já custou um bug nesta página; o
 * bloco fica aqui, no fim, com o motivo escrito.
 */

/* ── O botão do menu é uma caixa de 44×44, e ponto ──────────────────────── */

/*
 * Medido: o botão saía 44×54 e o ícone ficava 11px do topo contra 27px da base.
 * O tema embrulha o SVG em dois spans que reintroduzem altura de linha; zerá-los
 * é o que faz o símbolo cair no centro da própria caixa.
 */






/* ── O mosaico no celular: uma capa, do tamanho da faixa ────────────────── */

@media ( max-width: 767px ) {
	/*
	 * A regra de três colunas escrita para o desktop vinha depois desta e
	 * vencia: a capa caía para 17px de largura. Aqui ela é reafirmada por
	 * último — uma capa só, ocupando a faixa inteira.
	 */
	.bca-cat__mosaico {
		width: 112px;
		padding: 10px;
		gap: 0;
	}

	.bca-cat__capa {
		width: 100%;
		aspect-ratio: 2 / 3;
		object-fit: contain;
	}

	.bca-cat__capa:nth-child( n + 2 ) {
		display: none;
	}

	.bca-cat:hover .bca-cat__capa:nth-child( 1 ) {
		transform: none;
	}
}

@media ( max-width: 400px ) {
	.bca-cat__mosaico {
		width: 98px;
	}
}

/* O SVG do tema tem largura própria e não obedece só ao `justify-content` da
   caixa: `margin: auto` dentro de um flex centra qualquer tamanho, e é isso que
   põe o símbolo no meio do próprio botão (medido: estava 6px à esquerda contra
   22px à direita). */


/* Os três ícones da barra no mesmo eixo: o social estava 2px acima. */


/* ── Por que o símbolo do menu parecia torto ────────────────────────────── */

/*
 * O botão do Astra carrega DOIS ícones: o de abrir e o de fechar, um ao lado do
 * outro dentro de `.mobile-menu-toggle-icon`. O invólucro dos dois estava
 * centrado — mas o glifo visível é o primeiro, e por isso aparecia deslocado
 * para a esquerda (medido: 6px de um lado, 22px do outro).
 *
 * A correção é empilhar os dois na MESMA célula de grade: qualquer um que o
 * tema resolva mostrar cai no centro do botão.
 */




/* O tema dá `margin: 5px 20px 0 0` no botão: os 5px do topo eram o que deixava
   o hambúrguer 2px acima dos ícones sociais, mas os 20px da direita são o
   respiro até a borda da tela. Zerar tudo colava o botão no canto. */




@media ( max-width: 767px ) {
	/* O selo tem duas linhas no celular, e `border-radius: 999px` num bloco de
	   três linhas vira um óvalo gordo em vez de uma pílula. Canto fixo resolve. */
	.bca-heroi__selo,
	.bca-ficha__selo {
		align-items: flex-start;
		padding: 8px 14px;
		font-size: 11.5px;
		line-height: 1.35;
		border-radius: 14px;
	}

	.bca-heroi__ponto {
		margin-top: 4px;
	}
}

/* ═══ Sétima leva: movimento contido, dois defeitos corrigidos, magia com cor ══
 *
 * Todo bloco daqui para baixo corrige regra escrita ACIMA e por isso mora no
 * fim do arquivo: com a mesma especificidade quem vence é quem vem por último.
 * Este arquivo já produziu dois bugs por regra nova escrita antes da antiga.
 */

/* ── 1. O cartão do livro flutua ─────────────────────────────────────────── */

/*
 * As regras antigas (`.bca-biblio__cartao.is-dentro:hover`, três classes) têm
 * especificidade maior que as do bloco novo lá em cima, e por isso a elevação
 * continuava em 2px. Aqui a mesma especificidade vem por último e vence.
 */
@media ( hover: hover ) and ( pointer: fine ) {
	.bca-biblio__cartao.is-dentro:hover,
	.bca-biblio__cartao.is-dentro:focus-within {
		transform: translateY( -10px );
		border-color: var( --bca-acento );
		box-shadow: var( --bca-clay-alta );
	}

	.bca-biblio__cartao.is-dentro:hover .bca-biblio__capa-img,
	.bca-biblio__cartao.is-dentro:focus-within .bca-biblio__capa-img {
		transform: translateY( -4px ) scale( 1.03 );
	}
}

.bca-biblio__cartao {
	transition:
		transform 240ms cubic-bezier( 0.34, 1.56, 0.64, 1 ),
		box-shadow 240ms ease,
		border-color 180ms ease;
}

/* ── 2. A aparição do livro ao rolar ─────────────────────────────────────── */

/*
 * Animação de quadros-chave, e não transição, por um motivo prático: a
 * transição de `.bca-anima` carrega o atraso do escalonamento
 * (`--bca-atraso`), e se ela também governasse o `transform` o hover herdaria
 * esse atraso e responderia com até 350ms de espera. Com `@keyframes` a
 * entrada é uma coisa e o hover é outra.
 *
 * `backwards`, e nunca `forwards`: com `forwards` o valor final da animação
 * ficaria grudado no elemento e ANULARIA o `transform` do hover. Com
 * `backwards` a animação só pinta antes e durante; depois o elemento volta a
 * obedecer o CSS normal.
 *
 * A especificidade (0,3,0) é de propósito: `.bca-biblio.is-vivo .bca-anima`
 * desliga animação em tudo que o JavaScript revela, e sem as três classes esta
 * regra nunca rodaria depois da partida do script.
 */
.bca-biblio__cartao.bca-anima {
	/* Sem transição de opacidade aqui: quem cuida da entrada é a animação. */
	transition:
		transform 240ms cubic-bezier( 0.34, 1.56, 0.64, 1 ),
		box-shadow 240ms ease,
		border-color 180ms ease;
	transform: none;
}

.bca-biblio__cartao.bca-anima.is-dentro {
	opacity: 1;
	transform: none;
	animation: bca-livro-surge 520ms cubic-bezier( 0.34, 1.56, 0.64, 1 )
		var( --bca-atraso, 0ms ) backwards;
}

@keyframes bca-livro-surge {
	from {
		opacity: 0;
		transform: translateY( 26px ) scale( 0.96 );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * A capa entra depois do cartão e crescendo a partir da base: a leitura é a de
 * um livro sendo puxado da estante, e não a de um retângulo aparecendo.
 */
.bca-biblio__cartao.bca-anima.is-dentro .bca-biblio__capa {
	animation: bca-capa-surge 460ms cubic-bezier( 0.34, 1.56, 0.64, 1 )
		calc( var( --bca-atraso, 0ms ) + 60ms ) backwards;
	transform-origin: 50% 100%;
}

@keyframes bca-capa-surge {
	from {
		opacity: 0.2;
		transform: scale( 0.94 ) translateY( 8px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ── 3. O X e os três tracinhos, um de cada vez ──────────────────────────── */

/*
 * O botão do Astra carrega DOIS SVGs — `.ast-mobile-svg` (abrir) e
 * `.ast-close-svg` (fechar) — e o tema alterna os dois por estado:
 *
 *   .menu-toggle .ast-close-svg { display: none }
 *   .ast-hfb-header .menu-toggle.toggled .ast-mobile-svg { display: none }
 *
 * A regra que eu escrevi acima (`body.bca-com-biblioteca .menu-toggle svg
 * { display: block }`) tem especificidade maior e ligava o X o tempo todo.
 * Enquanto os dois ficavam lado a lado isso aparecia como símbolo torto;
 * depois que passaram a ser empilhados na mesma célula de grade, viraram
 * sobreposição. A alternância volta aqui, com a minha especificidade.
 */




/* O icone de fechar do tema carrega AS DUAS classes (`ast-mobile-svg
   ast-close-svg`), entao a regra de cima o apagaria junto. Esta vem depois e o
   devolve. */


/* A outra marcação possível do tema, para o caso de alguma tela usá-la. */






/* ── 6. A luz do cursor, ancorada no canto do herói ──────────────────────── */

/*
 * Estava com `top/right/left: auto`: um elemento absoluto sem nenhum
 * deslocamento fica na POSIÇÃO ESTÁTICA dele, ou seja, onde cairia no fluxo —
 * dentro do padding de 56px/44px do herói. Só que `--bca-x` é medido a partir
 * da BORDA do herói (`getBoundingClientRect`). Eram duas origens diferentes, e
 * a diferença era o deslocamento visível.
 *
 * A porcentagem no `translate` se refere ao PRÓPRIO tamanho do elemento, então
 * ela centra em qualquer largura — melhor que o `-170px` de antes, que assumia
 * um tamanho fixo.
 */
@media ( hover: hover ) and ( pointer: fine ) {
	.bca-heroi__brilho {
		top: 0;
		right: auto;
		bottom: auto;
		left: 0;
		transform: translate3d(
			calc( var( --bca-x, 50% ) - 50% ),
			calc( var( --bca-y, 50% ) - 50% ),
			0
		);
	}
}

/* ── 7. Magia com cor ────────────────────────────────────────────────────── */

:root {
	/* Só decoração: fundo, traço e anel. Nunca cor de texto — o contraste
	   medido dos pares de texto continua valendo como está. */
	--bca-magia: linear-gradient( 120deg, #ffd936 0%, #ffb43a 45%, #1e3780 100% );
	--bca-magia-quente: linear-gradient( 120deg, #ffd936 0%, #ff8f3a 100% );
	--bca-mola: cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

/* a) "Ver os livros": traço em degradê que cresce da esquerda */

.bca-cat__acao-texto {
	position: relative;
	display: inline-block;
	padding-bottom: 2px;
}

.bca-cat__acao-texto::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: var( --bca-magia );
	border-radius: 3px;
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 220ms var( --bca-mola );
	pointer-events: none;
}

.bca-cat:hover .bca-cat__acao-texto::after,
.bca-cat:focus-visible .bca-cat__acao-texto::after {
	transform: scaleX( 1 );
}

.bca-cat:active .bca-cat__acao-texto {
	transform: scale( 0.97 );
}

/* b) Ícones do "Por que": anel em degradê e pop na entrada */

.bca-porque__icone {
	position: relative;
	transition: transform 240ms var( --bca-mola ), box-shadow 240ms ease;
}

/*
 * O anel em degradê pelo truque das duas camadas: a de dentro pinta a caixa até
 * o `padding-box`, a de fora pinta até o `border-box` e aparece exatamente na
 * espessura da borda, que fica transparente. Sem pseudo-elemento com `z-index`
 * negativo, que some quando um ancestral tem fundo próprio.
 */
.bca-porque__icone {
	background:
		linear-gradient( var( --bca-azul-fundo ), var( --bca-azul-fundo ) ) padding-box,
		var( --bca-magia ) border-box;
	border: 2px solid transparent;
}

/* O brilho por trás, que acende no hover. */
.bca-porque__icone::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	background: radial-gradient( circle, rgba( 255, 217, 54, 0.55 ) 0%, rgba( 255, 217, 54, 0 ) 70% );
	transform: translate( -50%, -50% ) scale( 1.6 );
	opacity: 0;
	transition: opacity 240ms ease;
	pointer-events: none;
}

.bca-porque__item:hover .bca-porque__icone,
.bca-porque__item:focus-within .bca-porque__icone {
	transform: scale( 1.08 ) rotate( -3deg );
	box-shadow: var( --bca-clay );
}

.bca-porque__item:hover .bca-porque__icone::before,
.bca-porque__item:focus-within .bca-porque__icone::before {
	opacity: 1;
}

.bca-porque__item.is-dentro .bca-porque__icone {
	animation: bca-icone-pop 300ms var( --bca-mola )
		calc( var( --bca-atraso, 0ms ) + 120ms ) backwards;
}

@keyframes bca-icone-pop {
	from {
		transform: scale( 0.6 ) rotate( -12deg );
		opacity: 0;
	}

	60% {
		transform: scale( 1.12 ) rotate( 4deg );
		opacity: 1;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

/* c) Cabeçalhos de seção: pincelada em degradê e faíscas */

/*
 * A pincelada e as faíscas são pseudo-elementos: não entram no texto que o
 * leitor de tela anuncia, não recebem toque, e aparecem na mesma revelação que
 * já existe (`is-dentro`) — sem observador novo e sem laço infinito.
 */
.bca-secao__cabeca .bca-secao__titulo,
.bca-porque__cabeca .bca-secao__titulo {
	position: relative;
	display: inline-block;
	/* Espaço para a pincelada morar ABAIXO das letras. Sem isto ela cruzaria a
	   base do texto — que é exatamente a queixa que o traço amarelo do menu já
	   rendeu uma vez nesta página. */
	padding-bottom: 10px;
}

.bca-secao__cabeca .bca-secao__titulo::after,
.bca-porque__cabeca .bca-secao__titulo::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 9px;
	/* Quente na maior parte e azul só na ponta: com o azul no meio o degradê
	   lavava para cinza e parecia sujeira, não pincelada. */
	background: linear-gradient( 90deg, #ffd936 0%, #ffb43a 62%, rgba( 30, 55, 128, 0.55 ) 100% );
	border-radius: 999px;
	opacity: 0.55;
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 520ms var( --bca-mola ) 120ms;
	pointer-events: none;
}

.bca-secao__cabeca.is-dentro .bca-secao__titulo::after,
.bca-porque__cabeca.is-dentro .bca-secao__titulo::after {
	transform: scaleX( 1 );
}

/* As faíscas: três pontos que surgem em sequência e param. */
.bca-secao__cabeca,
.bca-porque__cabeca {
	position: relative;
}

.bca-secao__cabeca::before,
.bca-secao__cabeca::after,
.bca-porque__cabeca::before,
.bca-porque__cabeca::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	background: var( --bca-realce );
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms ease, transform 300ms var( --bca-mola );
	transform: scale( 0.4 );
}

.bca-secao__cabeca::before,
.bca-porque__cabeca::before {
	top: -6px;
	left: -14px;
}

.bca-secao__cabeca::after,
.bca-porque__cabeca::after {
	top: 10px;
	left: -22px;
	width: 5px;
	height: 5px;
	background: var( --bca-azul );
	transition-delay: 90ms;
}

.bca-secao__cabeca.is-dentro::before,
.bca-secao__cabeca.is-dentro::after,
.bca-porque__cabeca.is-dentro::before,
.bca-porque__cabeca.is-dentro::after {
	opacity: 1;
	transform: none;
}

/* Na margem estreita do celular não há espaço à esquerda para as faíscas. */
@media ( max-width: 767px ) {
	.bca-secao__cabeca::before,
	.bca-secao__cabeca::after,
	.bca-porque__cabeca::before,
	.bca-porque__cabeca::after {
		display: none;
	}
}

/* O SVG por cima do brilho: o pseudo-elemento é posicionado e, sem isto,
   pintaria em cima do ícone e o lavaria de amarelo. */
.bca-porque__icone svg {
	position: relative;
	z-index: 1;
}

/* ── 5. Instagram e Facebook: maiores, alinhados e convidativos ──────────── */

/*
 * Cada rede ganha o seu fundo, e o fundo é o convite: um ícone de traço fino
 * dentro de um círculo cinza não diz "clique aqui". O ícone continua escuro
 * sobre fundo claro — o contraste é o do traço, não o da marca.
 */


/*
 * O alvo continua com 44px — regra de toque —, mas o que se VÊ é uma pastilha
 * de 34px. Cheios e com 48px eles ficavam maiores e mais chamativos que o logo
 * da Casa Amarela, que é quem manda no cabeçalho.
 */




/* A ordem vem do PHP (`Ativos::redes_no_menu`): Instagram e depois Facebook. */






/* Retorno tátil: em toque não há hover, e o afundar é o único sinal de que o
   dedo acertou o alvo. */




/* O botão do menu acompanha: 44px de alvo, como os outros dois. */


/* ── No desktop ──────────────────────────────────────────────────────────── */

/* Pastilhas sociais do desktop removidas em 15/09/2026: valem as de `site.css`, iguais
   às das outras páginas (44px). */

/* ── 8. O cartão de gênero no celular ────────────────────────────────────── */

/*
 * Deitado numa faixa de ~360px, a descrição do gênero sobrava: 13px cortados em
 * duas linhas ao lado da capa, sem espaço para respirar — texto que ninguém lê
 * e que rouba a atenção do que importa, que é o nome e a contagem. No celular
 * ela sai, e o que fica ganha tamanho e cor.
 */
@media ( max-width: 767px ) {
	.bca-cat__texto {
		display: none;
	}

	.bca-cat__corpo {
		gap: 8px;
		justify-content: center;
		padding: 16px 16px 16px 12px;
	}

	.bca-cat__nome {
		font-size: 20px;
		line-height: 1.15;
	}

	/* A contagem vira pastilha: número em azul sobre azul claro mede 10,9:1. */
	.bca-cat__numeros {
		display: inline-flex;
		align-self: flex-start;
		align-items: center;
		gap: 6px;
		padding: 4px 12px;
		font-size: 13px;
		color: var( --bca-azul );
		background: var( --bca-azul-fundo );
		border-radius: 999px;
	}

	.bca-cat__acao {
		margin-top: 2px;
		font-size: 14px;
	}

	/* O traço em degradê já nasce aberto no celular: não há hover para revelá-lo,
	   e é ele que dá a cor da ação. */
	.bca-cat__acao-texto::after {
		transform: scaleX( 1 );
	}

	.bca-cat {
		border-radius: 18px;
		box-shadow: var( --bca-clay );
	}

	.bca-cat.is-ativo {
		border-color: var( --bca-azul );
		box-shadow: var( --bca-clay ), inset 0 0 0 2px var( --bca-azul );
	}
}

/* ── Movimento reduzido desliga tudo que este bloco acrescentou ──────────── */

@media ( prefers-reduced-motion: reduce ) {
	.bca-biblio__cartao.bca-anima.is-dentro,
	.bca-biblio__cartao.bca-anima.is-dentro .bca-biblio__capa,
	.bca-porque__item.is-dentro .bca-porque__icone {
		animation: none;
	}

	.bca-biblio__cartao.is-dentro:hover,
	.bca-biblio__cartao.is-dentro:focus-within,
	.bca-biblio__cartao.is-dentro:hover .bca-biblio__capa-img,
	.bca-biblio__cartao.is-dentro:focus-within .bca-biblio__capa-img,
	.bca-porque__item:hover .bca-porque__icone,
	.bca-porque__item:focus-within .bca-porque__icone {
		transform: none;
	}

	/* A pincelada e as faíscas ficam VISÍVEIS, só não crescem nem surgem: sumir
	   com elas mudaria o desenho da página, e o pedido é sobre movimento. */
	.bca-secao__cabeca .bca-secao__titulo::after,
	.bca-porque__cabeca .bca-secao__titulo::after {
		transform: scaleX( 1 );
		transition: none;
	}

	.bca-secao__cabeca::before,
	.bca-secao__cabeca::after,
	.bca-porque__cabeca::before,
	.bca-porque__cabeca::after {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.bca-cat__acao-texto::after {
		transform: scaleX( 1 );
		transition: none;
	}
}

/* ── A barra de redes agora é do site, não da Biblioteca ────────────────── */

/*
 * Estas regras nasceram aqui, quando só esta página tinha identidade. Agora o
 * cabeçalho e as redes valem para o site inteiro e moram no `site.css` — mas
 * este arquivo carrega DEPOIS dele e, com a mesma especificidade, vencia com
 * valores antigos: caixa de 44px, ícone de 34px e 6px entre os dois alvos.
 *
 * Em vez de apagar regra por regra num arquivo de 4 mil linhas (e arriscar
 * levar junto o que ainda serve), o valor novo é reafirmado aqui no fim, com o
 * motivo escrito.
 */






/* ── Alvo de toque no celular ───────────────────────────────────────────── */

@media ( max-width: 767px ) {
	/*
	 * Medido a 360px: o título do livro no cartão era um alvo de 28px de altura,
	 * e o mesmo valia para o gênero na ficha e para a trilha de navegação. Com
	 * `display: block` e um pouco de respiro, o alvo cresce sem mudar o desenho.
	 */
	.bca-biblio__titulo a,
	.bca-ficha__genero,
	.bca-ficha__trilha a,
	.bca-relacionado__titulo a,
	.bca-rec__titulo a {
		display: inline-block;
		min-height: 40px;
		padding-top: 7px;
		padding-bottom: 7px;
	}

	/* A trilha de navegação da ficha ("Biblioteca Virtual / Romance") também é
	   alvo de dedo: media 28px. */
	.bca-ficha__migalhas a,
	.bca-ficha__aviso a,
	.bca-ficha__nota a,
	.bca-ficha__alternativos a,
	.bca-ficha__generos a {
		display: inline-block;
		min-height: 40px;
		padding: 8px 0;
	}
}

/* O ícone dentro do botão da vitrine encolhia para 14px a 320px de largura:
   ícone de 14px ao lado de texto de 14px vira sujeira, não símbolo. */
.bca-rec__btn svg {
	flex: none;
	width: 18px;
	height: 18px;
}

/* ══ A página do acervo de borda a borda ════════════════════════════════════
 *
 * Medido a 1600px antes: o conteúdo ia de 240 a 1360 — 240px de coluna vazia de
 * cada lado. Três limites empilhados produziam isso:
 *
 *   1. o tema, com `--wp--custom--ast-content-width-size` nos filhos de
 *      `.entry-content`;
 *   2. o contêiner do Spectra que envolve o bloco;
 *   3. o `inner-blocks-wrap` dele, com `min(100%, 1140px)`.
 *
 * Nenhum deles é nosso, e por isso a correção precisa de `!important` — mas ela
 * é escopada em `body.bca-com-biblioteca`, então vale só nesta página.
 *
 * O truque para centrar o conteúdo dentro de uma faixa que sangra é o
 * `padding-inline` calculado: `max(recuo mínimo, metade do que sobra)`. Assim a
 * faixa toca as bordas e o texto continua numa coluna legível, sem `wrapper`
 * novo no HTML.
 */

/*
 * Zerar as margens não bastava: o `.entry-content` desta página é MAIS ESTREITO
 * que o contêiner do Spectra (medido: 307→1293 contra 200→1400), e o contêiner
 * só ficava maior porque tinha margem negativa. Zerando a margem, ele encolhia
 * junto.
 *
 * A saída é a margem negativa calculada — `calc( 50% - 50vw )` de cada lado —,
 * que faz o bloco ocupar a largura da janela seja qual for o pai. O `body` deste
 * site já tem `overflow-x: hidden`, então a barra de rolagem não vira estouro.
 */
body.bca-com-biblioteca .entry-content > .wp-block-uagb-container,
body.bca-com-biblioteca .wp-block-uagb-container {
	max-width: none !important;
	width: auto;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.bca-com-biblioteca .uagb-container-inner-blocks-wrap {
	max-width: none !important;
	width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.bca-com-biblioteca .bca-biblio {
	--bca-recuo: max( 24px, calc( ( 100% - 1240px ) / 2 ) );

	max-width: none;
}

/* As faixas com fundo próprio sangram e centram o conteúdo por dentro. */
body.bca-com-biblioteca .bca-heroi,
body.bca-com-biblioteca .bca-porque {
	padding-left: var( --bca-recuo );
	padding-right: var( --bca-recuo );
	border-right: 0;
	border-left: 0;
	border-radius: 0;
}

/* As seções sem fundo próprio ganham o mesmo recuo, para tudo alinhar na mesma
   coluna invisível. */
body.bca-com-biblioteca .bca-secao,
body.bca-com-biblioteca .bca-recs {
	padding-left: var( --bca-recuo );
	padding-right: var( --bca-recuo );
}

/* A vitrine é a exceção: o trilho precisa sangrar INTEIRO para o corte na
   direita continuar sendo o aviso de que há mais. O recuo vale só no cabeçalho
   e no botão de pausa. */
body.bca-com-biblioteca .bca-recs {
	padding-left: 0;
	padding-right: 0;
}

body.bca-com-biblioteca .bca-recs > .bca-secao__cabeca,
body.bca-com-biblioteca .bca-recs__controles,
body.bca-com-biblioteca .bca-secao--recs > .bca-secao__cabeca {
	padding-left: var( --bca-recuo );
	padding-right: var( --bca-recuo );
}

@media ( max-width: 767px ) {
	body.bca-com-biblioteca .bca-biblio {
		--bca-recuo: 20px;
	}
}

/*
 * O vão branco entre o cabeçalho e o herói.
 *
 * Medido: cabeçalho termina em 99px, o conteúdo começa em 173 e o herói em 213
 * — 114px de branco antes da primeira faixa. Fazia sentido quando o herói era
 * um cartão arredondado no meio da página; agora que ele sangra de borda a
 * borda, o vão faz a faixa parecer solta.
 */
body.bca-acervo-ativo .site-content > .ast-container {
	padding-top: 0;
}

body.bca-acervo-ativo .entry-content > .wp-block-uagb-container {
	padding-top: 0 !important;
}

/* O Astra dá 64px de margem no `#primary` (20px no celular). Numa página comum
   é o ar entre o cabeçalho e o texto; aqui era uma tarja branca de 73px em cima
   de um herói que vai de borda a borda. */
body.bca-acervo-ativo #primary {
	margin-top: 0;
	/* No celular o Astra troca a margem por 1.5em de recuo interno — mesma tarja
	   branca, outra propriedade. */
	padding-top: 0;
}

body.bca-acervo-ativo .bca-heroi {
	margin-top: 0;
}

/*
 * O brilho decorativo do herói mede 460px fixos e fica pendurado 12% para fora
 * da direita. Acima de 320px o pai o esconde; abaixo disso ele passava a
 * empurrar a página (medido: 314px de borda direita numa tela de 280). Enfeite
 * não pode causar rolagem lateral.
 */
@media ( max-width: 340px ) {
	body.bca-com-biblioteca .bca-heroi {
		overflow: hidden;
	}

	body.bca-com-biblioteca .bca-heroi__brilho {
		width: 240px;
		height: 240px;
		right: -8%;
	}
}

/* ══ Borda a borda, de novo (15/09/2026) ═════════════════════════════════════
 *
 * Quando o vocabulário visual da home foi para `site.css` (quarto deploy), veio
 * junto uma regra genérica `.bca-secao { max-width: 1180px; margin: 0 auto;
 * padding: 88px 24px }` — e as seções do acervo usam a mesma classe. Resultado
 * medido a 1440px: cada seção presa em 1180px e centrada, conteúdo de 230 a
 * 1210 (a coluna das outras páginas vai de 100 a 1340), a faixa "Por que" sem
 * encostar nas bordas e 176px de vão a mais entre as seções.
 *
 * Aqui as seções do acervo voltam a ocupar a janela inteira; o recuo calculado
 * (`--bca-recuo`, lá em cima) põe o conteúdo na mesma coluna de 1240px das
 * outras páginas, e as faixas com fundo sangram até as bordas.
 */
body.bca-com-biblioteca .bca-biblio .bca-secao {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* A faixa "Por que" é quem tem fundo: a seção em volta não recua, a faixa sim. */
body.bca-com-biblioteca .bca-biblio .bca-secao--porque {
	padding-left: 0;
	padding-right: 0;
}

/* A vitrine sangra inteira (o corte na borda avisa que há mais); o cabeçalho dela
   já recebe o recuo pela regra de `.bca-secao--recs > .bca-secao__cabeca`. */
body.bca-com-biblioteca .bca-biblio .bca-secao--recs {
	padding-left: 0;
	padding-right: 0;
}

/* No celular a vitrine usava margem negativa para sangrar por cima do recuo da
   seção; sem recuo, a mesma margem estourava 20px para fora da tela. */
body.bca-com-biblioteca .bca-biblio .bca-secao--recs .bca-recs {
	margin-left: 0;
	margin-right: 0;
}

/* Os cartões de "Como funciona" começavam 20px depois do título: o Spectra dá
   `margin-left: 20px` a toda lista dentro do contêiner dele, com um seletor de
   seis níveis. `!important` escopado nesta página em vez de competir com ele. */
body.bca-com-biblioteca .bca-biblio .bca-passos {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0;
	padding-left: 0;
}

/* ══ Sem colunas brancas (15/09/2026, segunda passada) ═══════════════════════
 *
 * Medido a 1920px depois da correção acima: o conteúdo ia de 340 a 1580 e as
 * seções não tinham fundo — duas colunas brancas de 340px de cada lado. As outras
 * páginas não mostram isso por dois motivos, e os dois faltavam aqui:
 *
 *   1. a coluna delas cresce para 1440px acima de 1600px (paginas.css);
 *   2. cada seção é uma faixa com fundo próprio, de borda a borda — o olho lê a
 *      faixa inteira, não a coluna.
 *
 * Aqui o acervo passa a fazer as duas coisas: mesma coluna (1240 → 1440) e faixas
 * alternadas creme e branco, com o respiro vertical DENTRO da faixa (padding) em
 * vez de margem entre seções, para a cor não ter emenda.
 */
@media ( min-width: 1600px ) {
	body.bca-com-biblioteca .bca-biblio {
		--bca-recuo: max( 24px, calc( ( 100% - 1440px ) / 2 ) );
	}
}

body.bca-com-biblioteca .bca-biblio .bca-heroi {
	margin-bottom: 0;
	border-bottom: 1px solid var( --bca-borda );
}

body.bca-com-biblioteca .bca-biblio .bca-secao {
	margin-bottom: 0;
	padding-top: clamp( 56px, 6vw, 88px );
	padding-bottom: clamp( 56px, 6vw, 88px );
	background: #ffffff;
}

body.bca-com-biblioteca .bca-biblio .bca-secao--como,
body.bca-com-biblioteca .bca-biblio .bca-secao--cats {
	background: var( --bca-fundo );
	border-top: 1px solid var( --bca-borda );
	border-bottom: 1px solid var( --bca-borda );
}

/* "Por que" já é faixa: a seção não soma respiro, a faixa sim, sobre branco para
   alternar com as vizinhas creme. */
body.bca-com-biblioteca .bca-biblio .bca-secao--porque {
	padding-top: 0;
	padding-bottom: 0;
}

body.bca-com-biblioteca .bca-biblio .bca-porque {
	padding-top: clamp( 56px, 6vw, 88px );
	padding-bottom: clamp( 56px, 6vw, 88px );
	background:
		radial-gradient( 90% 120% at 100% 0%, rgba( 255, 217, 54, 0.18 ) 0%, rgba( 255, 217, 54, 0 ) 60% ),
		#ffffff;
	border-top: 0;
	border-bottom: 0;
}