/**
 * Listas curadas · Amanda Noronha
 *
 * As cores vêm do design system da marca por variável, com valor de reserva
 * embutido. Assim a lista funciona mesmo se o tema filho não estiver ativo.
 */

.an-lista {
	--an-f: var(--an-fucsia, #EC1180);
	--an-ff: var(--an-fucsia-forte, #C40E6B);
	--an-n: var(--an-noturno, #0C1438);
	--an-e: var(--an-elevado, #142155);
	--an-c: var(--an-ciano, #22E8F0);
	--an-g: var(--an-gelo, #F4F7FF);
	--an-cz: var(--an-cinza-suave, #E3E6EF);
	--an-bic: var(--an-bic-profundo, #003A8C);
	--an-roxo: var(--an-roxo-estrutural, #5A0099);
	--an-s: var(--an-fg-claro-soft, #313A5E);
	--an-m: var(--an-fg-claro-muted, #5C6787);
	font-family: Inter, system-ui, sans-serif;
	color: var(--an-n);
}

/* Filtros ---------------------------------------------------------------- */

/* Barra de busca e tema -------------------------------------------------- */

.an-lista__barra {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
	align-items: flex-end;
}

.an-lista__campo {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 260px;
	min-width: 0;
}

.an-lista__campo--tema {
	flex: 0 1 240px;
}

.an-lista__rotulo {
	font: 600 11px/1 Chivo, sans-serif;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--an-m);
}

.an-lista__busca,
.an-lista__select {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--an-cz);
	border-radius: 10px;
	background: #fff;
	color: var(--an-n);
	font: 400 15px/1.3 Inter, sans-serif;
}

.an-lista__busca:focus,
.an-lista__select:focus {
	outline: 2px solid var(--an-f);
	outline-offset: 1px;
	border-color: var(--an-f);
}

[data-an-escuro] .an-lista__busca,
[data-an-escuro] .an-lista__select {
	background: transparent;
	border-color: rgba(244, 247, 255, .24);
	color: var(--an-g);
}

/* Paginação -------------------------------------------------------------- */

.an-lista__paginas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 28px;
}

.an-lista__pagina {
	cursor: pointer;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--an-cz);
	border-radius: 10px;
	background: #fff;
	color: var(--an-s);
	font: 600 14px/1 Chivo, sans-serif;
	transition: background .2s, color .2s, border-color .2s;
}

.an-lista__pagina:hover:not(:disabled) {
	border-color: var(--an-f);
	color: var(--an-ff);
}

.an-lista__pagina.is-atual {
	background: var(--an-f);
	border-color: var(--an-f);
	color: #fff;
}

.an-lista__pagina:disabled {
	opacity: .4;
	cursor: default;
}

.an-lista__reticencia {
	padding: 0 4px;
	color: var(--an-m);
}

.an-lista__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.an-lista__chip {
	cursor: pointer;
	border: 1px solid var(--an-cz);
	background: #fff;
	color: var(--an-s);
	border-radius: 100px;
	padding: 9px 16px;
	font: 600 13px/1 Chivo, sans-serif;
	letter-spacing: .3px;
	transition: background .2s, color .2s, border-color .2s;
}

.an-lista__chip:hover {
	border-color: var(--an-f);
	color: var(--an-ff);
}

.an-lista__chip.is-ativo {
	background: var(--an-f);
	border-color: var(--an-f);
	color: #fff;
}

.an-lista__chip:focus-visible {
	outline: 3px solid rgba(34, 232, 240, .55);
	outline-offset: 2px;
}

.an-lista__n {
	margin-left: 7px;
	opacity: .75;
	font-weight: 400;
}

.an-lista__contagem {
	font-size: 13px;
	color: var(--an-m);
	margin: 0 0 22px;
}

/* Grade ------------------------------------------------------------------ */

.an-lista__grade {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

/* No acervo de livros a capa manda, então a coluna encolhe e cabem quatro ou
   cinco por linha em tela grande, em vez de duas. */
.an-lista--livros .an-lista__grade {
	gap: 26px 22px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Quatro por linha só em tela larga. Acima de 1400 px, três colunas passam de
   500 px cada e o cartão fica maior que o conteúdo que ele carrega. */
@media (min-width: 1400px) {
	.an-lista--livros .an-lista__grade {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.an-lista__item[hidden] {
	display: none;
}

/* O Salient devolve um marcador nos li dentro do conteúdo, por ::before ou
   por ::marker conforme o contexto, e ele reaparecia como um ponto ciano no
   canto de cada cartão. O list-style: none da grade não alcança o ::before,
   então os três caminhos são desligados aqui, no item.

   O display: block é a parte que faltava, e era ela que quebrava o celular.
   O Salient não usa só o ::before para o marcador: ele transforma o li em
   grid de duas colunas, a primeira com 22 px reservados para o ponto. Com o
   ponto desligado, a coluna de 22 px continuava lá, e o cartão era colocado
   dentro dela. Em tela larga isso passava sem aparecer, porque o cartão
   estourava a coluna e o olho não percebia. No celular, com a coluna da
   grade em torno de 110 px, o cartão ficava com 26 px de largura e o título
   descia uma letra por linha. */
body .an-lista .an-lista__grade > .an-lista__item {
	display: block;
	list-style: none;
	padding-left: 0;
	background: none;
}

/* Precisa da mesma especificidade da regra acima, senão o filtro de busca e
   o de tema deixam de esconder os cartões. */
body .an-lista .an-lista__grade > .an-lista__item[hidden] {
	display: none;
}

body .an-lista .an-lista__grade > .an-lista__item::before,
body .an-lista .an-lista__grade > .an-lista__item::after {
	content: none;
	display: none;
}

body .an-lista .an-lista__grade > .an-lista__item::marker {
	content: '';
}

.an-ficha {
	height: 100%;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--an-cz);
	border-radius: 15px;
	padding: 22px;
	transition: border-color .2s, transform .2s;
}

.an-ficha:hover {
	border-color: var(--an-f);
	transform: translateY(-2px);
}

.an-lista--links .an-ficha {
	display: block;
}

.an-ficha__capa {
	flex: 0 0 92px;
	width: 92px;
	height: auto;
	align-self: flex-start;
	border-radius: 6px;
	background: var(--an-cz);
	object-fit: cover;
}

/* Cartão de livro: coluna, com a capa ocupando a largura inteira no topo. */
.an-lista--livros .an-ficha {
	flex-direction: column;
	gap: 14px;
	padding: 16px;
}

.an-lista--livros .an-ficha__capa {
	flex: 0 0 auto;
	width: 100%;
	max-width: 190px;
	margin: 0 auto;
	aspect-ratio: 2 / 3;
	align-self: center;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(12, 20, 56, .12);
}

/* Marcador de lugar enquanto a capa não foi enviada. */
.an-ficha__capa--vazia {
	display: flex;
	align-items: center;
	justify-content: center;
	font: 800 46px/1 Chivo, sans-serif;
	color: rgba(244, 247, 255, .5);
	background: linear-gradient(150deg, var(--an-e, #142155), var(--an-n, #0C1438));
	box-shadow: none;
	user-select: none;
}

.an-ficha__corpo {
	min-width: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.an-ficha__rot {
	margin: 0;
	font: 600 11px/1 Chivo, sans-serif;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--an-ff);
}

.an-ficha__titulo {
	margin: 0;
	font: 700 19px/1.25 Chivo, sans-serif;
	color: var(--an-n);
	overflow-wrap: break-word;
}

.an-ficha__linha {
	margin: 0;
	font-size: 13px;
	color: var(--an-m);
}

.an-ficha__frase {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--an-s);
}

.an-ficha__para {
	margin: 0;
	font-size: 13px;
	color: var(--an-m);
	border-top: 1px solid var(--an-cz);
	padding-top: 10px;
}

.an-ficha__pe {
	margin-top: auto;
	padding-top: 12px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.an-ficha__link {
	font: 600 14px/1 Chivo, sans-serif;
	color: var(--an-ff);
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* No cartão de livro os dois destinos viram botão, empilhados. Lado a lado
   em 196 px eles quebram em duas linhas de qualquer jeito, e link sublinhado
   some no meio da grade. O de fora é cheio, o de dentro é contorno, mesma
   hierarquia dos botões do resto do site. Aqui o contorno usa o Fúcsia Forte
   em vez do Ciano, porque o cartão é claro e Ciano sobre branco não tem
   contraste. */
.an-lista--livros .an-ficha__pe {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding-top: 4px;
}

.an-lista--livros .an-ficha__link {
	justify-content: center;
	text-decoration: none;
	border-radius: 100px;
	padding: 10px 14px;
	font-size: 13px;
	line-height: 1.2;
	text-align: center;
	min-height: 40px;
	box-sizing: border-box;
	transition: background-color .2s, border-color .2s, color .2s;
}

.an-lista--livros .an-ficha__link:not(.an-ficha__link--interno) {
	background: var(--an-f);
	border: 1.5px solid var(--an-f);
	color: #fff;
}

.an-lista--livros .an-ficha__link:not(.an-ficha__link--interno):hover,
.an-lista--livros .an-ficha__link:not(.an-ficha__link--interno):focus-visible {
	background: var(--an-ff);
	border-color: var(--an-ff);
}

.an-lista--livros .an-ficha__link--interno {
	background: transparent;
	border: 1.5px solid var(--an-ff);
	color: var(--an-ff);
}

.an-lista--livros .an-ficha__link--interno:hover,
.an-lista--livros .an-ficha__link--interno:focus-visible {
	background: var(--an-ff);
	color: #fff;
}

/* O selo de afiliado dentro do botão cheio precisa virar clarinho, porque a
   versão padrão foi desenhada para fundo branco. */
.an-lista--livros .an-ficha__link:not(.an-ficha__link--interno) .an-ficha__selo {
	background: rgba(255, 255, 255, .22);
	color: #fff;
	border-color: transparent;
}

.an-ficha__selo {
	font: 600 10px/1 Chivo, sans-serif;
	letter-spacing: .8px;
	text-transform: uppercase;
	background: var(--an-cz);
	color: var(--an-m);
	border-radius: 100px;
	padding: 4px 8px;
	text-decoration: none;
}

.an-ficha__citar {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	font: 600 13px/1 Chivo, sans-serif;
	color: var(--an-m);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.an-ficha__citar:hover {
	color: var(--an-ff);
}

.an-ficha__citar.is-copiado {
	color: var(--an-ff);
	text-decoration: none;
}

/* Rodapé ----------------------------------------------------------------- */

.an-lista__vazio {
	margin: 26px 0;
	font-size: 15px;
	color: var(--an-m);
}

.an-lista__aviso {
	margin: 30px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--an-cz);
	font-size: 13px;
	line-height: 1.6;
	color: var(--an-m);
}

/* Em faixa escura, a lista se inverte sozinha ---------------------------- */

.an-fundo-escuro .an-lista,
[data-an-escuro] .an-lista {
	color: var(--an-g);
}

.an-fundo-escuro .an-ficha,
[data-an-escuro] .an-ficha {
	background: rgba(20, 33, 85, .55);
	border-color: rgba(244, 247, 255, .14);
}

.an-fundo-escuro .an-ficha__titulo,
[data-an-escuro] .an-ficha__titulo {
	color: var(--an-g);
}

.an-fundo-escuro .an-ficha__frase,
[data-an-escuro] .an-ficha__frase {
	color: var(--an-fg-soft, #C4CBE4);
}

.an-fundo-escuro .an-lista__chip,
[data-an-escuro] .an-lista__chip {
	background: transparent;
	border-color: rgba(244, 247, 255, .24);
	color: var(--an-fg-soft, #C4CBE4);
}

.an-fundo-escuro .an-lista__chip.is-ativo,
[data-an-escuro] .an-lista__chip.is-ativo {
	background: var(--an-f);
	border-color: var(--an-f);
	color: #fff;
}

@media (max-width: 620px) {
	.an-lista__grade {
		grid-template-columns: 1fr;
	}
	.an-ficha {
		padding: 18px;
		gap: 14px;
	}
	.an-ficha__capa {
		flex-basis: 68px;
		width: 68px;
	}
	.an-lista--livros .an-lista__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 14px;
	}
	.an-lista--livros .an-ficha {
		padding: 10px;
		gap: 8px;
	}
	.an-lista--livros .an-ficha__capa {
		flex-basis: auto;
		width: 100%;
	}

	/* Dois cartões por linha num celular de 375 px dão uma coluna de cerca de
	   132 px. O corpo de 19 px do título, que serve no desktop, quebra em duas
	   palavras por linha nessa largura e o cartão vira uma torre. A escala
	   abaixo é para essa coluna, e não para o celular em geral. */
	.an-lista--livros .an-ficha__rot {
		font-size: 10px;
		letter-spacing: .8px;
	}
	.an-lista--livros .an-ficha__titulo {
		font-size: 15px;
		line-height: 1.25;
	}

	/* O corte em quatro linhas é escolha de leitura, não de espaço. Sem ele a
	   altura das linhas da grade varia de 494 px a 754 px conforme o título
	   mais longo de cada par, e a página fica com buracos brancos entre um
	   cartão e outro. O título inteiro está a um toque de distância, na ficha. */
	.an-lista--livros .an-ficha__titulo,
	.an-lista--livros .an-ficha__linha {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.an-lista--livros .an-ficha__titulo {
		-webkit-line-clamp: 4;
	}
	.an-lista--livros .an-ficha__linha {
		font-size: 11.5px;
		line-height: 1.35;
		-webkit-line-clamp: 3;
	}
	.an-lista--livros .an-ficha__pe {
		gap: 6px;
	}
	.an-lista--livros .an-ficha__link {
		font-size: 12.5px;
		padding: 9px 10px;
	}

	/* O Salient soma o respiro da linha ao da coluna, e no celular isso tirava
	   49 px de cada lado além dos 22 px de margem da página. Só a coluna que
	   carrega a grade sai dessa soma; o resto da página continua com o respiro
	   do tema. O important é necessário porque a regra do Salient também usa
	   um, e sem ele a especificidade maior daqui não basta. O :has não tem
	   reserva: onde ele não existir, a lista volta a ficar com a coluna de
	   antes, que é estreita mas está correta. */
	.wpb_column:has(.an-lista--livros),
	.wpb_column:has(.an-lista--livros) > .vc_column-inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.an-lista__campo--tema {
		flex: 1 1 100%;
	}
	.an-lista__paginas {
		gap: 4px;
		margin-top: 22px;
	}
	.an-lista__pagina {
		padding: 0 9px;
		font-size: 13px;
	}
	.an-ficha__capa--vazia {
		font-size: 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.an-ficha,
	.an-lista__chip {
		transition: none;
	}
	.an-ficha:hover {
		transform: none;
	}
}

/* Ficha completa ---------------------------------------------------------- */

.an-fc {
	--an-f: var(--an-fucsia, #EC1180);
	--an-ff: var(--an-fucsia-forte, #C40E6B);
	--an-n: var(--an-noturno, #0C1438);
	--an-cz: var(--an-cinza-suave, #E3E6EF);
	--an-s: var(--an-fg-claro-soft, #313A5E);
	--an-m: var(--an-fg-claro-muted, #5C6787);
	max-width: 1080px;
	margin: 0 auto;
	padding: 10px 0 60px;
	font-family: Inter, system-ui, sans-serif;
	color: var(--an-n);
}

.an-fc__volta a {
	font: 600 13px/1 Chivo, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--an-ff);
	text-decoration: none;
}

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

/* Trilha do Rank Math. Ele traz a própria marcação e nenhum estilo, então a
   tipografia da marca é aplicada aqui. O item atual fica sem link e em cinza,
   para o olho encontrar rápido onde parou. */
.an-fc__volta .rank-math-breadcrumb p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font: 600 13px/1.4 Chivo, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--an-m);
}

.an-fc__volta .rank-math-breadcrumb .separator {
	color: var(--an-cz);
	font-weight: 400;
}

@media (max-width: 620px) {
	.an-fc__volta .rank-math-breadcrumb p {
		font-size: 11px;
		gap: 6px;
	}
}

.an-fc__topo {
	padding: 22px 0 34px;
	border-bottom: 1px solid var(--an-cz);
	margin-bottom: 34px;
}

.an-fc__rot {
	margin: 0 0 12px;
	font: 600 12px/1 Chivo, sans-serif;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--an-ff);
}

.an-fc__titulo {
	margin: 0 0 12px;
	font: 800 clamp(28px, 4vw, 44px)/1.14 Chivo, sans-serif;
	letter-spacing: -.6px;
	color: var(--an-n);
}

.an-fc__linha {
	margin: 0;
	font-size: 16px;
	color: var(--an-m);
}

.an-fc__temas {
	margin: 16px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.an-fc__tema {
	display: inline-block;
	font: 600 12px/1 Chivo, sans-serif;
	letter-spacing: .4px;
	background: var(--an-cz);
	color: var(--an-s);
	border-radius: 100px;
	padding: 7px 13px;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

a.an-fc__tema:hover,
a.an-fc__tema:focus-visible {
	background: var(--an-ff);
	color: #fff;
}

.an-fc__grade {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 46px;
	align-items: start;
}

.an-fc__lado {
	position: sticky;
	top: 110px;
	display: grid;
	gap: 18px;
}

.an-fc__capa {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

.an-fc__caixa {
	background: var(--an-gelo, #F4F7FF);
	border: 1px solid var(--an-cz);
	border-radius: 12px;
	padding: 18px;
}

.an-fc__caixa-rot {
	margin: 0 0 8px;
	font: 600 11px/1 Chivo, sans-serif;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--an-ff);
}

.an-fc__caixa-txt {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--an-s);
}

.an-fc__bt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--an-f);
	color: #fff;
	border-radius: 100px;
	padding: .85em 1.5em;
	font: 700 14px/1 Chivo, sans-serif;
	text-decoration: none;
	text-align: center;
}

/* Secundário: contorno em Fúcsia Forte, preenchido só no hover. Mesma
   hierarquia dos botões do cartão, e o Ciano fica de fora porque a ficha é
   clara e Ciano sobre branco não tem contraste. */
.an-fc__bt--linha {
	background: transparent;
	border: 1.5px solid var(--an-ff);
	color: var(--an-ff);
	cursor: pointer;
	font-family: Chivo, sans-serif;
	transition: background-color .2s, color .2s;
}

.an-fc__bt--linha:hover,
.an-fc__bt--linha:focus-visible {
	background: var(--an-ff);
	color: #fff;
	filter: none;
}

.an-fc__bt--linha.is-copiado {
	background: var(--an-ff);
	color: #fff;
}

.an-fc__bt:hover {
	filter: brightness(1.1);
	color: #fff;
}

.an-fc__citar {
	justify-self: start;
}

.an-fc__texto {
	font-size: 17px;
	line-height: 1.75;
	color: var(--an-s);
}

.an-fc__texto p {
	margin: 0 0 20px;
}

.an-fc__secao {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid var(--an-cz);
}

.an-fc__secao h2 {
	margin: 0 0 18px;
	font: 700 24px/1.25 Chivo, sans-serif;
	color: var(--an-n);
}

/* O Salient devolve list-style: disc nas listas dentro do conteúdo, com
   especificidade maior que a regra abaixo tinha. O resultado era o marcador
   do tema em cinza somado ao ponto em Fúcsia desta folha, dois por item. Aqui
   o do tema é desligado pelos dois caminhos e fica só o Fúcsia. */
body .an-fc .an-fc__ideias {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .an-fc .an-fc__ideias > li {
	list-style: none;
}

body .an-fc .an-fc__ideias > li::marker {
	content: '';
}

.an-fc__ideias li {
	position: relative;
	padding: 12px 0 12px 26px;
	border-top: 1px solid var(--an-cz);
	font-size: 16px;
	line-height: 1.55;
	color: var(--an-s);
}

.an-fc__ideias li:first-child {
	border-top: 0;
}

.an-fc__ideias li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 20px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--an-f);
}

.an-fc__autor p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--an-s);
}

.an-fc__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.an-fc__redes a {
	font: 600 13px/1 Chivo, sans-serif;
	border: 1px solid var(--an-cz);
	border-radius: 100px;
	padding: 9px 15px;
	color: var(--an-s);
	text-decoration: none;
}

.an-fc__redes a:hover {
	border-color: var(--an-f);
	color: var(--an-ff);
}

.an-fc__pe {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--an-cz);
}

.an-fc__pe a {
	font: 600 15px/1 Chivo, sans-serif;
	color: var(--an-ff);
}

@media (max-width: 860px) {
	.an-fc__grade {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.an-fc__lado {
		position: static;
		max-width: 340px;
	}
}

.an-ficha__frase-rot {
	display: block;
	font: 600 11px/1 Chivo, sans-serif;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--an-m);
	margin-bottom: 6px;
}

/* =========================================================================
   Bloco de referências e etiqueta de dado
   ========================================================================= */

/* Lista de referências --------------------------------------------------- */

.an-refs {
	margin: 48px 0 0;
	padding: 30px 0 0;
	border-top: 2px solid var(--an-cz);
}

.an-refs__titulo {
	margin: 0 0 6px;
	font: 700 22px/1.2 Chivo, sans-serif;
	color: var(--an-n);
}

.an-refs__nota {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--an-m);
}

.an-refs__lista {
	margin: 0;
	padding: 0 0 0 1.6em;
	list-style: decimal;
	counter-reset: none;
}

.an-refs__item {
	margin: 0 0 20px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--an-cz);
}

.an-refs__item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.an-refs__item::marker {
	font: 700 14px Chivo, sans-serif;
	color: var(--an-m);
}

.an-refs__rot {
	margin: 0 0 5px;
	font: 700 11px/1 Chivo, sans-serif;
	letter-spacing: .9px;
	text-transform: uppercase;
	color: var(--an-ff);
}

.an-refs__nome {
	margin: 0 0 5px;
	font: 600 17px/1.4 Chivo, sans-serif;
	color: var(--an-n);
}

.an-refs__nome a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--an-cz);
}

.an-refs__nome a:hover {
	color: var(--an-ff);
	text-decoration-color: currentColor;
}

.an-refs__linha {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--an-m);
}

.an-refs__porque {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--an-s);
}

.an-refs__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.an-refs__selo {
	font: 600 10px/1 Chivo, sans-serif;
	letter-spacing: .8px;
	text-transform: uppercase;
	background: var(--an-cz);
	color: var(--an-m);
	border-radius: 100px;
	padding: 4px 9px;
}

/* Etiqueta de dado ------------------------------------------------------- */

.an-dado {
	--an-et: var(--an-f);
	margin: 28px 0;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--an-cz);
	border-left: 4px solid var(--an-et);
	border-radius: 4px 12px 12px 4px;
}

.an-dado--fato       { --an-et: var(--an-ciano-escuro, #0E8E96); }
.an-dado--estimativa { --an-et: var(--an-roxo, #5A0099); }
.an-dado--hipotese   { --an-et: var(--an-fucsia-medio, #DA31A5); }
.an-dado--autoral    { --an-et: var(--an-fucsia, #EC1180); }

.an-dado__rot {
	margin: 0 0 8px;
	font: 700 11px/1 Chivo, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--an-et);
}

.an-dado__txt {
	margin: 0;
	font: 400 17px/1.6 Inter, system-ui, sans-serif;
	color: var(--an-n);
}

.an-dado__fonte {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--an-m);
}

.an-dado__fonte a {
	color: var(--an-m);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.an-dado__fonte a:hover {
	color: var(--an-et);
}

/* Sobre faixa escura ----------------------------------------------------- */

.an-fundo-escuro .an-dado,
.an-dado.is-escuro {
	background: var(--an-e);
	border-color: rgba(255, 255, 255, .14);
}

.an-fundo-escuro .an-dado .an-dado__txt,
.an-dado.is-escuro .an-dado__txt {
	color: var(--an-g);
}

.an-fundo-escuro .an-dado .an-dado__fonte,
.an-dado.is-escuro .an-dado__fonte {
	color: #C4CBE4;
}

@media (max-width: 690px) {
	.an-refs__nome { font-size: 16px; }
	.an-dado { padding: 17px 18px; }
	.an-dado__txt { font-size: 16px; }
}


/* ==========================================================================
   Cor por nível

   A escala vai de fria para quente conforme a profundidade sobe, que é a
   leitura que a pessoa faz sem legenda. As quatro cores saem da paleta da
   marca, em vez de azul, laranja e vermelho genéricos: sobre o Gelo e o
   branco todas passam de 6 para 1 de contraste, e o material continua
   fechado no sistema de cor da marca.
   ========================================================================== */

.an-nivel--introdutorio  { color: var(--an-bic, #003A8C); }
.an-nivel--intermediario { color: var(--an-roxo, #5A0099); }
.an-nivel--avancado      { color: var(--an-ff, #C40E6B); }
.an-nivel--referencia    { color: var(--an-n, #0C1438); }