/*********************************************
** Blog
*********************************************/

#paginaBlog {
	display: block;
	width: 100%;
}

/* Título dos blocos */

#paginaBlog .tituloBloco {
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	color: var(--primary);
	margin: 0;
}

/*********************************************
** Bloco Inicial + Destaques
*********************************************/

/* Este mesmo bloco abre quatro telas do blog: a listagem geral, a de categoria
   (e a de tag, que cai no mesmo arquivo), a de autor e a de busca (ver
   templates/blog.php, archive.php, author.php e search.php).

   As quatro ganham a classe .bannerAnimado e viram o banner da home, com o
   fundo animado por trás: o blog com a matéria em destaque do lado e as outras
   três em uma coluna só (.colunaUnica). O que muda nesses casos está logo
   depois, e sempre pela classe dupla - as regras daqui de cima são a base que
   todas compartilham.

   O header é fixo e flutua por cima do bloco escuro, então o respiro de cima
   soma a altura dele. */

#paginaBlog .blocoInicial {
	width: 100%;
	padding: calc(40px + var(--topoBlocoInicial)) 0 64px 0;
}

#paginaBlog .blocoInicial h1 {
	max-width: 768px;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--primary-foreground);
	margin: 12px 0 0 0;
}

#paginaBlog .blocoInicial .texto {
	max-width: 672px;
	font-size: 16px;
	line-height: 26px;
	color: rgba(250, 249, 253, 0.75);
	margin: 20px 0 0 0;
}

/*********************************************
** Bloco Inicial do Blog (o banner da home)
*********************************************/

/* Mesmo respiro, mesma grade de duas colunas e a mesma tipografia do banner
   da home. O fundo animado por trás vem do banner.css, pela classe
   .bannerAnimado que a seção também recebe.

   A diferença é o que entra na coluna da direita: onde a home mostra a foto,
   aqui fica a matéria em destaque - mesmo canto arredondado e o mesmo brilho
   vermelho por trás. Na categoria essa coluna traz a matéria mais recente
   dela (ver archive.php). */

#paginaBlog .blocoInicial.bannerAnimado {
	padding: calc(48px + var(--topoBlocoInicial)) 0 80px 0;
}

#paginaBlog .blocoInicial.bannerAnimado .boxGrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	gap: 48px;
}

/* Textos */

#paginaBlog .blocoInicial.bannerAnimado h1 {
	max-width: none;
	font-size: 36px;
	line-height: 1.08;
	margin: 24px 0 0 0;
}

#paginaBlog .blocoInicial.bannerAnimado .texto {
	max-width: 512px;
	font-size: 15px;
	line-height: 24px;
	color: var(--primary-foreground);
	margin: 24px 0 0 0;
}

/* A categoria, o autor e a busca são a mesma peça em uma coluna só: nenhuma
   delas tem matéria ao lado dos textos, então quem segura a medida de leitura
   é a própria caixa de texto - em largura inteira o título de 60px ficaria
   esticado de ponta a ponta do container. */

#paginaBlog .blocoInicial.bannerAnimado.colunaUnica .boxTextos {
	max-width: 760px;
}

#paginaBlog .blocoInicial.bannerAnimado.colunaUnica .texto {
	max-width: 640px;
}

/* Quantas matérias a listagem tem (as da categoria, as que a busca achou, as
   que o autor assina). Fica abaixo do texto, mais discreta que ele: é
   informação de apoio, não parte da chamada. */

#paginaBlog .blocoInicial.bannerAnimado .infoCategoria {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 24px 0 0 0;
	font-size: 13px;
	line-height: 20px;
	font-weight: 500;
	color: rgba(250, 249, 253, 0.72);
}

#paginaBlog .blocoInicial.bannerAnimado .infoCategoria i {
	font-size: 14px;
	color: var(--accent);
}

/* O subtítulo é o mesmo em toda categoria, em toda busca e em todo autor (ver
   archive.php, search.php e author.php), então ele fecha o bloco em vez de
   disputar atenção com o título: entra depois de um fio, mais apagado que a
   descrição logo acima. */

#paginaBlog .blocoInicial.bannerAnimado .subtituloCategoria {
	display: block;
	max-width: 620px;
	border-top: solid 1px rgba(250, 249, 253, 0.14);
	padding: 18px 0 0 0;
	margin: 26px 0 0 0;
	font-size: 15px;
	line-height: 24px;
	color: rgba(250, 249, 253, 0.68);
}

/*********************************************
** Destaques
*********************************************/

/* Os três cards da abertura. O grande e os dois pequenos dividem a mesma
   classe .cartaoDestaque: o que muda é a direção (o grande empilha a capa e o
   texto, os pequenos põem a capa do lado) e o tamanho da tipografia.

   O card inteiro é clicável sem virar um link só: o link do título estica um
   ::after por cima de tudo. Assim quem usa leitor de tela ouve o título uma
   vez, e não a capa, o título e o "leia a matéria" como três links iguais. */

#paginaBlog .cartaoDestaque {
	position: relative;
	overflow: hidden;
	/* Curva de saída lenta, a mesma dos cards das listagens: o card anda
	   pouco, quem dá a sensação de macio é o tempo */
	transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.45s, background-color 0.45s;
}

#paginaBlog .cartaoDestaque .tituloDestaque a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
}

#paginaBlog .cartaoDestaque .capa {
	position: relative;
	display: block;
	overflow: hidden;
	background: rgba(250, 249, 253, 0.06);
}

#paginaBlog .cartaoDestaque .capa img {
	display: block;
	width: 100%!important;
	max-width: none!important;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#paginaBlog .cartaoDestaque:hover .capa img {
	transform: scale(1.04);
}

/* Matéria sem imagem destacada: fica o roxo do tema com o ícone no meio */

#paginaBlog .cartaoDestaque .capaVazia {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(150deg, #250B4C 0%, #40166D 55%, #74065C 100%);
}

#paginaBlog .cartaoDestaque .capaVazia i {
	color: rgba(250, 249, 253, 0.45);
}

/* Título */

#paginaBlog .cartaoDestaque .tituloDestaque {
	font-weight: 700;
	color: var(--primary-foreground);
	margin: 10px 0 0 0;
}

#paginaBlog .cartaoDestaque .tituloDestaque a {
	color: var(--primary-foreground);
	transition: color 0.3s linear;
}

/* O vermelho do tema fica escuro demais em cima do roxo, então em fundo
   escuro quem responde ao hover é o coral que abre o gradiente da marca */

#paginaBlog .cartaoDestaque:hover .tituloDestaque a {
	color: var(--accentClaro);
}

/* Informações (data e tempo de leitura) */

#paginaBlog .cartaoDestaque .boxInfo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 12px 0 0 0;
}

#paginaBlog .cartaoDestaque .boxInfo .item,
#paginaBlog .cartaoDestaque .boxInfo .item span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	line-height: 16px;
	color: rgba(250, 249, 253, 0.72);
}

#paginaBlog .cartaoDestaque .boxInfo .item i {
	font-size: 10px;
	color: #FF6C58;
}

/*********************************************
** Destaque Principal
*********************************************/

#paginaBlog .boxDestaquePrincipal {
	position: relative;
}

/* Brilho atrás do card, o mesmo que a home põe atrás da foto do banner: ele
   já nasce na cor forte e só a opacidade anima, então o navegador não é
   obrigado a refazer o desfoque a cada quadro */

#paginaBlog .boxDestaquePrincipal .brilho {
	position: absolute;
	top: -24px;
	right: -24px;
	bottom: -24px;
	left: -24px;
	border-radius: 40px;
	background: rgba(237, 51, 69, 0.4);
	filter: blur(64px);
	opacity: 0.62;
	transition: opacity 0.5s;
	pointer-events: none;
	will-change: opacity;
}

#paginaBlog .boxDestaquePrincipal:hover .brilho {
	opacity: 1;
}

#paginaBlog .cartaoDestaque.principal {
	display: block;
	border: solid 1px rgba(250, 249, 253, 0.14);
	border-radius: 32px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

#paginaBlog .cartaoDestaque.principal:hover {
	transform: translateY(-4px);
	border-color: rgba(250, 249, 253, 0.24);
	box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.45);
}

/* A proporção fica na caixa, e não na imagem: assim o card tem a mesma altura
   com qualquer tamanho de arquivo que subirem no admin */

#paginaBlog .cartaoDestaque.principal .capa,
#paginaBlog .cartaoDestaque.principal .capa img,
#paginaBlog .cartaoDestaque.principal .capaVazia {
	aspect-ratio: 3 / 2;
}

#paginaBlog .cartaoDestaque.principal .capaVazia i {
	font-size: 32px;
}

/* Os textos ficam por cima da capa, encostados no pé dela. O degradê é o
   próprio fundo deles: ele escurece só a parte de baixo da imagem, então a
   foto continua aparecendo em cima e a leitura fica garantida embaixo com
   qualquer capa.

   A camada cobre a capa inteira, e não só a faixa dos textos: é ela que dá o
   tamanho ao ::after do link do título, e é assim que o card todo fica
   clicável, e não só o pé dele. */

#paginaBlog .cartaoDestaque.principal .conteudo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px;
	background: linear-gradient(to top, rgba(20, 6, 42, 0.94) 0%, rgba(20, 6, 42, 0.75) 22%, rgba(20, 6, 42, 0.28) 46%, rgba(20, 6, 42, 0) 64%);
}

/* Categoria: aqui ela fica em cima da foto, então vira pílula de vidro - a
   mesma dos cards das listagens */

#paginaBlog .cartaoDestaque.principal .categoria span {
	display: inline-block;
	border-radius: 9999px;
	border: solid 1px rgba(250, 249, 253, 0.2);
	background: rgba(37, 11, 76, 0.6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	padding: 3px 10px;
	font-size: 10px;
	line-height: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--primary-foreground);
}

#paginaBlog .cartaoDestaque.principal .tituloDestaque {
	font-size: 22px;
	line-height: 30px;
	margin: 12px 0 0 0;
}

#paginaBlog .cartaoDestaque.principal .linkMateria {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--accentClaro);
	margin: 18px 0 0 0;
}

#paginaBlog .cartaoDestaque.principal .linkMateria i {
	font-size: 11px;
	color: #FF6C58;
	transition: transform 0.2s linear;
}

#paginaBlog .cartaoDestaque.principal:hover .linkMateria i {
	transform: translateX(4px);
}

/*********************************************
** Destaques Menores
*********************************************/

/* Os dois que sobram entram na linha de baixo, deitados: capa estreita de um
   lado e o texto do outro. Deitados eles não competem com o card grande e a
   abertura não fica alta demais. */

#paginaBlog .listaDestaques {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	padding: 0;
	margin: 40px 0 0 0;
}

#paginaBlog .listaDestaques li {
	list-style: none;
	display: flex;
	padding: 0;
}

#paginaBlog .listaDestaques .cartaoDestaque {
	display: flex;
	flex: 1;
	border: solid 1px rgba(250, 249, 253, 0.15);
	background: rgba(250, 249, 253, 0.05);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 24px;
}

#paginaBlog .listaDestaques .cartaoDestaque:hover {
	transform: translateY(-3px);
	border-color: rgba(250, 249, 253, 0.28);
	background: rgba(250, 249, 253, 0.09);
}

/* A capa acompanha a altura do texto ao lado: a imagem sai do fluxo e
   preenche a coluna, então dois cards de alturas diferentes continuam com a
   foto inteira, sem faixa vazia embaixo */

#paginaBlog .listaDestaques .capa {
	flex: 0 0 150px;
}

#paginaBlog .listaDestaques .capa img,
#paginaBlog .listaDestaques .capaVazia {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%!important;
	height: 100%;
}

#paginaBlog .listaDestaques .capaVazia i {
	font-size: 20px;
}

#paginaBlog .listaDestaques .conteudo {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: 20px 22px;
}

/* Aqui a categoria fica sobre o vidro do card, e não sobre a foto: pílula
   demais na mesma peça pesa, então ela volta a ser só a etiqueta de cima */

#paginaBlog .listaDestaques .categoria span {
	font-size: 10px;
	line-height: 15px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accentClaro);
}

#paginaBlog .listaDestaques h2 {
	font-size: 16px;
	line-height: 23px;
	letter-spacing: -0.01em;
	margin: 8px 0 0 0;
}

/* O resumo cresce e empurra as informações para o pé do card: é isso que
   deixa a data dos dois cards alinhada quando os títulos têm alturas
   diferentes */

#paginaBlog .listaDestaques .resumo {
	flex: 1;
	font-size: 12px;
	line-height: 19px;
	color: rgba(250, 249, 253, 0.65);
	margin: 8px 0 0 0;
}

/* Quem pediu menos animação no sistema recebe os cards parados */

@media (prefers-reduced-motion: reduce) {

	#paginaBlog .cartaoDestaque,
	#paginaBlog .cartaoDestaque .capa img,
	#paginaBlog .boxDestaquePrincipal .brilho {
		transition-duration: 0.01ms;
	}

	#paginaBlog .cartaoDestaque:hover {
		transform: none;
	}

	#paginaBlog .cartaoDestaque:hover .capa img {
		transform: none;
	}

}


/*********************************************
** Barra de Filtros (categoria + busca)
**
** A mesma barra abre o blog, a categoria, a tag, o autor e a busca (ver
** content-filtros.php). São dois campos lado a lado - o seletor de categoria e
** a busca - em um cartão estreito e centralizado, montado na borda de baixo da
** abertura escura. Como ela nasce em cima do bloco escuro, não custa uma faixa
** nova na página.
**
** O seletor abre uma lista desenhada aqui, e não a lista do sistema: por isso
** ele é um botão com um <ul> escondido embaixo, e não um <select> (ver
** content-filtros.php e scripts.js).
*********************************************/

#paginaBlog .boxFiltros {
	position: relative;
	z-index: 3;
	width: 100%;
	margin: -32px 0 0 0;
}

#paginaBlog .barraFiltros {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 680px;
	max-width: 100%;
	margin: 0 auto;
	background: var(--card);
	border: solid 1px var(--border);
	border-radius: 9999px;
	padding: 8px;
	box-shadow: 0 20px 40px -26px rgba(63, 34, 114, 0.5);
}

/* O que os dois campos têm em comum: o fundo lilás para se separarem do branco
   do cartão sem mais uma borda, e a borda que só aparece no foco - que é
   quando ela tem o que dizer */

#paginaBlog .campoCategoria .gatilho,
#paginaBlog .buscaBlog {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 42px;
	border: solid 1px transparent;
	border-radius: 9999px;
	background: var(--secondary);
	padding: 0 14px;
	margin: 0;
	transition: background-color 0.2s linear, border-color 0.2s linear, box-shadow 0.2s linear;
}

#paginaBlog .campoCategoria .gatilho:hover {
	background: rgba(63, 34, 114, 0.09);
}

#paginaBlog .campoCategoria .gatilho:focus-visible,
#paginaBlog .buscaBlog:focus-within {
	background: var(--card);
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(237, 51, 69, 0.12);
	outline: none;
}

#paginaBlog .campoCategoria .gatilho i,
#paginaBlog .buscaBlog label i {
	flex: none;
	font-size: 13px;
	color: var(--muted-foreground);
}

/*********************************************
** Seletor de categoria
*********************************************/

#paginaBlog .campoCategoria {
	position: relative;
	flex: 0 0 238px;
	max-width: 100%;
}

#paginaBlog .campoCategoria .gatilho {
	cursor: pointer;
	font-family: inherit;
	text-align: left;
}

#paginaBlog .campoCategoria .rotulo {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#paginaBlog .campoCategoria .seta {
	font-size: 11px;
	transition: transform 0.2s linear;
}

#paginaBlog .campoCategoria.aberto .seta {
	transform: rotate(180deg);
}

/* A lista que o botão abre */

#paginaBlog .opcoesCategoria {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 5;
	width: max-content;
	min-width: 100%;
	max-width: 340px;
	max-height: 380px;
	overflow-y: auto;
	background: var(--card);
	border: solid 1px var(--border);
	border-radius: var(--radius);
	padding: 6px;
	margin: 0;
	box-shadow: 0 18px 40px -18px rgba(63, 34, 114, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s linear, transform 0.18s linear, visibility 0.18s linear;
}

#paginaBlog .campoCategoria.aberto .opcoesCategoria {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#paginaBlog .opcoesCategoria li {
	list-style: none;
}

#paginaBlog .opcoesCategoria li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--muted-foreground);
	white-space: nowrap;
	transition: background-color 0.15s linear, color 0.15s linear;
}

#paginaBlog .opcoesCategoria li a:hover,
#paginaBlog .opcoesCategoria li a:focus-visible {
	background: var(--secondary);
	color: var(--primary);
	outline: none;
}

#paginaBlog .opcoesCategoria li a.ativo {
	background: var(--primary);
	color: var(--primary-foreground);
	font-weight: 600;
}

/* Quantas matérias a categoria tem, na ponta direita da linha */

#paginaBlog .opcoesCategoria .quantos {
	flex: none;
	min-width: 22px;
	border-radius: 9999px;
	background: var(--secondary);
	padding: 2px 7px;
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
	color: var(--muted-foreground);
	text-align: center;
}

#paginaBlog .opcoesCategoria li a:hover .quantos {
	background: var(--card);
}

#paginaBlog .opcoesCategoria li a.ativo .quantos {
	background: rgba(250, 249, 253, 0.2);
	color: var(--primary-foreground);
}

/*********************************************
** Busca
*********************************************/

#paginaBlog .buscaBlog {
	flex: 1;
	min-width: 0;
	gap: 6px;
	padding: 0 4px 0 14px;
}

#paginaBlog .buscaBlog label {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	margin: 0;
	cursor: text;
}

#paginaBlog .buscaBlog input[type="search"] {
	width: 100%;
	min-width: 0;
	height: 38px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	color: var(--foreground);
	-webkit-appearance: none;
	appearance: none;
}

#paginaBlog .buscaBlog input[type="search"]:focus {
	outline: none;
}

#paginaBlog .buscaBlog input[type="search"]::placeholder {
	color: var(--muted-foreground);
}

/* O "x" que o Chrome desenha dentro do campo de busca não combina com o resto
   e ainda briga por espaço com o botão */

#paginaBlog .buscaBlog input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

#paginaBlog .buscaBlog button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--primary);
	cursor: pointer;
	transition: background-color 0.2s linear, transform 0.2s linear;
}

#paginaBlog .buscaBlog button i {
	font-size: 12px;
	color: var(--primary-foreground);
}

#paginaBlog .buscaBlog button:hover {
	background: var(--accent);
	transform: scale(1.06);
}

/*********************************************
** Listagens (Populares e Recentes)
*********************************************/

#paginaBlog .boxPopulares {
	width: 100%;
	padding: 56px 0;
}

#paginaBlog .boxRecentes {
	width: 100%;
	padding: 56px 0;
	background: rgba(240, 236, 250, 0.6);
}

#paginaBlog .listaNoticias {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 0;
	margin: 32px 0 0 0;
}

/*********************************************
** Autores
**
** Grade de cards, um por autor (ver content-autores.php, que o blog e a
** listagem de categoria dividem).
**
** As colunas não são um número fixo: o auto-fit com minmax deixa o próprio
** container decidir quantas cabem, então a mesma regra dá três no desktop,
** duas no tablet e uma no celular sem uma media query para cada corte.
**
** O card é um link só, e o miolo dele é uma coluna flex para o "ver matérias"
** poder ir para o fim com margin-top:auto - assim ele fica na mesma altura em
** todos os cards da linha, mesmo com bios de tamanhos diferentes.
*********************************************/

#paginaBlog .boxAutores {
	width: 100%;
	padding: 64px 0;
}

#paginaBlog .boxAutores .textoBloco {
	font-size: 15px;
	line-height: 24px;
	color: var(--muted-foreground);
	margin: 8px 0 0 0;
}

#paginaBlog .listaAutores {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	padding: 0;
	margin: 32px 0 0 0;
}

#paginaBlog .listaAutores li {
	list-style: none;
	display: flex;
}

#paginaBlog .listaAutores .cardAutor {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 24px;
}

/* O card sobe de leve e a borda esquenta - o mesmo gesto dos cards de post */

#paginaBlog .listaAutores .cardAutor:hover {
	transform: translateY(-4px);
	border-color: rgba(237, 51, 69, 0.35);
	box-shadow: 0 18px 40px -26px rgba(63, 34, 114, 0.55);
}

/* Topo: iniciais + nome */

#paginaBlog .listaAutores .topoAutor {
	display: flex;
	align-items: center;
	gap: 14px;
}

#paginaBlog .listaAutores .sigla {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 9999px;
	background: var(--gradienteAccent);
	box-shadow: 0 10px 22px -14px rgba(254, 42, 103, 0.9);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--primary-foreground);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

#paginaBlog .listaAutores .cardAutor:hover .sigla {
	transform: scale(1.06);
}

#paginaBlog .listaAutores .boxNome {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

#paginaBlog .listaAutores .nome {
	font-size: 17px;
	line-height: 24px;
	font-weight: 700;
	color: var(--primary);
}

#paginaBlog .listaAutores .quantidade {
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	color: var(--muted-foreground);
}

/* Bio cortada em três linhas: com bios de tamanhos diferentes os cards da
   linha ficariam desencontrados, e o "ver matérias" de cada um em uma altura */

#paginaBlog .listaAutores .bio {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 21px;
	color: var(--muted-foreground);
	/* O respiro de baixo é margem daqui, e não do .verMaterias: lá o
	   margin-top vira auto para empurrar a linha até o pé do card, e uma
	   medida escrita nele seria descartada */
	margin: 16px 0 22px 0;
}

/* O margin-top:auto empurra esta linha para o pé do card */

#paginaBlog .listaAutores .verMaterias {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: auto 0 0 0;
	padding: 14px 0 0 0;
	border-top: solid 1px var(--border);
	font-size: 13px;
	line-height: 20px;
	font-weight: 600;
	color: var(--accentTexto);
}

#paginaBlog .listaAutores .verMaterias i {
	font-size: 11px;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

#paginaBlog .listaAutores .cardAutor:hover .verMaterias i {
	transform: translateX(4px);
}

/*********************************************
** Post Interno - Abertura
**
** A abertura da matéria é a mesma peça da categoria e do autor (ver
** single.php, archive.php e author.php): a seção leva as mesmas classes
** .blocoInicial.bannerAnimado.colunaUnica, então o fundo animado, o respiro e
** o selo já vêm de lá. Aqui embaixo fica só o que é da matéria - o título um
** pouco menor que o nome de uma categoria (ele é uma frase inteira, e não uma
** palavra) e a linha de informações.
*********************************************/

/* O título da matéria não é digitado letra a letra como o da categoria: quem
   abriu a página veio ler justamente ele, e ver o título aparecendo aos poucos
   só atrasaria a leitura. */

#paginaBlog .blocoInicial.bannerAnimado.blocoInicialPost h1 {
	max-width: 900px;
	font-size: 30px;
	line-height: 1.16;
	font-weight: 800;
	color: var(--primary-foreground);
	margin: 20px 0 0 0;
}

/* Resumo da matéria, quando existe */

#paginaBlog .blocoInicial.bannerAnimado.blocoInicialPost .texto {
	max-width: 680px;
	margin: 20px 0 0 0;
}

/* Informações (autor, data, tempo de leitura e visualizações) */

#paginaBlog .blocoInicialPost .boxInfo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	border-top: solid 1px rgba(250, 249, 253, 0.14);
	padding: 20px 0 0 0;
	margin: 26px 0 0 0;
}

#paginaBlog .blocoInicialPost .boxInfo .item,
#paginaBlog .blocoInicialPost .boxInfo .item a,
#paginaBlog .blocoInicialPost .boxInfo .item span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 16px;
	color: rgba(250, 249, 253, 0.7);
}

#paginaBlog .blocoInicialPost .boxInfo .item i {
	font-size: 11px;
	color: var(--accent);
}

#paginaBlog .blocoInicialPost .boxInfo .item a {
	transition: color 0.3s linear;
}

#paginaBlog .blocoInicialPost .boxInfo .item a:hover {
	color: var(--accentClaro);
}

/*********************************************
** Post Interno - Conteúdo
*********************************************/

#paginaBlog .conteudoPost {
	width: 100%;
	padding: 56px 0;
}

#paginaBlog .conteudoPost .bread-crumbs-pagina {
	margin: 0 0 24px 0;
}

#paginaBlog .conteudoPost .bannerPost {
	margin: 0 0 40px 0;
	border-radius: 28px;
	overflow: hidden;
}

#paginaBlog .conteudoPost .bannerPost img {
	display: block;
	width: 100%;
	height: auto;
}

/*********************************************
** Compartilhar
**
** O mesmo bloco abre e fecha a leitura da matéria (ver
** content-compartilhar.php), em duas roupas:
**
**   .topo -> uma linha entre dois fios, com os botões só de ícone
**   .fim  -> um cartão com a chamada de um lado e os botões, já com o nome
**            das redes, do outro
**
** Os botões nascem lilás e só ganham a cor da rede no hover: seis cores
** fortes lado a lado brigariam com o texto da matéria, que é quem manda na
** página. O "copiar link" é o único que não é link - ele é um <button>,
** porque quem faz o trabalho ali é o JavaScript (ver scripts.js).
*********************************************/

#paginaBlog .boxCompartilhar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

/* Abrindo a leitura */

#paginaBlog .boxCompartilhar.topo {
	justify-content: space-between;
	border-top: solid 1px var(--border);
	border-bottom: solid 1px var(--border);
	padding: 14px 0;
	margin: 0 0 40px 0;
}

#paginaBlog .boxCompartilhar.topo .rotulo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-foreground);
}

#paginaBlog .boxCompartilhar.topo .rotulo i {
	font-size: 13px;
	color: var(--accent);
	letter-spacing: 0;
}

/* Fechando a leitura */

#paginaBlog .boxCompartilhar.fim {
	justify-content: space-between;
	gap: 24px;
	background: var(--secondary);
	border: solid 1px var(--border);
	border-radius: var(--radius2xl);
	padding: 28px 32px;
	margin: 48px 0 0 0;
}

#paginaBlog .boxCompartilhar.fim .textosCompartilhar {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

#paginaBlog .boxCompartilhar.fim .titulo {
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
	color: var(--primary);
}

#paginaBlog .boxCompartilhar.fim .apoio {
	font-size: 14px;
	line-height: 22px;
	color: var(--muted-foreground);
}

/* Lista de botões */

#paginaBlog .listaCompartilhar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 0;
}

#paginaBlog .listaCompartilhar li {
	list-style: none;
	display: flex;
}

#paginaBlog .botaoCompartilhar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 40px;
	height: 40px;
	border: solid 1px var(--border);
	border-radius: 9999px;
	background: var(--card);
	padding: 0;
	margin: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	color: var(--primary);
	text-decoration: none!important;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s linear, border-color 0.25s linear, color 0.25s linear;
}

/* Com o nome escrito o botão deixa de ser um círculo e vira pílula */

#paginaBlog .botaoCompartilhar .nome {
	font-size: 13px;
	line-height: 20px;
	font-weight: 600;
	white-space: nowrap;
}

#paginaBlog .botaoCompartilhar.comNome {
	width: auto;
	padding: 0 16px;
}

#paginaBlog .botaoCompartilhar:hover {
	transform: translateY(-2px);
}

/* A cor de cada rede só entra no hover e no foco pelo teclado */

#paginaBlog .botaoCompartilhar.facebook:hover,
#paginaBlog .botaoCompartilhar.facebook:focus-visible {
	background: #1877F2;
	border-color: #1877F2;
	color: #FFFFFF;
}

#paginaBlog .botaoCompartilhar.x:hover,
#paginaBlog .botaoCompartilhar.x:focus-visible {
	background: #0F0F0F;
	border-color: #0F0F0F;
	color: #FFFFFF;
}

#paginaBlog .botaoCompartilhar.linkedin:hover,
#paginaBlog .botaoCompartilhar.linkedin:focus-visible {
	background: #0A66C2;
	border-color: #0A66C2;
	color: #FFFFFF;
}

#paginaBlog .botaoCompartilhar.whatsapp:hover,
#paginaBlog .botaoCompartilhar.whatsapp:focus-visible {
	background: #25D366;
	border-color: #25D366;
	color: #FFFFFF;
}

#paginaBlog .botaoCompartilhar.telegram:hover,
#paginaBlog .botaoCompartilhar.telegram:focus-visible {
	background: #229ED9;
	border-color: #229ED9;
	color: #FFFFFF;
}

#paginaBlog .botaoCompartilhar.email:hover,
#paginaBlog .botaoCompartilhar.email:focus-visible {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-foreground);
}

#paginaBlog .botaoCompartilhar.copiar:hover,
#paginaBlog .botaoCompartilhar.copiar:focus-visible {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-foreground);
}

/* Copiado: o botão fica verde e a bolha aparece por cima dele */

#paginaBlog .botaoCompartilhar.copiar.copiado {
	background: #16A34A;
	border-color: #16A34A;
	color: #FFFFFF;
}

#paginaBlog .avisoCopia {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	background: var(--primary);
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: var(--primary-foreground);
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 12px 24px -14px rgba(30, 15, 59, 0.7);
}

/* Vazio ele não existe na tela - é o texto escrito pelo scripts.js que faz a
   bolha aparecer */

#paginaBlog .avisoCopia:empty {
	display: none;
}

#paginaBlog .avisoCopia::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 8px;
	height: 8px;
	background: var(--primary);
	transform: translate(-50%, -50%) rotate(45deg);
}

/*********************************************
** Post Interno - Elementos do editor
**
** Daqui para baixo é tudo o que pode sair do editor dentro do texto da
** matéria: títulos, listas, citação, imagem com legenda, galeria, tabela,
** vídeo, código, botões, colunas e separador.
**
** O WordPress só manda o CSS dos blocos que a matéria usa, e sem cor nenhuma
** da marca, então cada peça é desenhada aqui - e sempre pelas duas marcações:
** a do editor de blocos (.wp-block-*) e a do editor clássico (.wp-caption,
** .alignleft, [gallery]), que é o que está ligado neste site hoje.
*********************************************/

/* Base do texto */

#paginaBlog .conteudoPost .conteudo {
	font-size: 16px;
	line-height: 28px;
	color: var(--foreground);
}

#paginaBlog .conteudoPost .conteudo > *:first-child {
	margin-top: 0;
}

/* Imagem alinhada à esquerda ou à direita com pouco texto ao lado: sem isto
   o float escaparia do fim da matéria e passaria por cima do que vem depois */

#paginaBlog .conteudoPost .conteudo::after {
	content: "";
	display: block;
	clear: both;
}

#paginaBlog .conteudoPost .conteudo p,
#paginaBlog .conteudoPost .conteudo li {
	font-size: 16px;
	line-height: 28px;
	color: var(--foreground);
}

#paginaBlog .conteudoPost .conteudo p {
	margin: 0 0 22px 0;
}

#paginaBlog .conteudoPost .conteudo strong,
#paginaBlog .conteudoPost .conteudo b {
	font-weight: 700;
	color: var(--primary);
}

#paginaBlog .conteudoPost .conteudo a {
	color: var(--accentTexto);
	text-decoration: underline!important;
	text-underline-offset: 3px;
	transition: color 0.2s linear;
}

#paginaBlog .conteudoPost .conteudo a:hover {
	color: #FE2A67;
}

/* Texto marcado com o marca-texto do editor */

#paginaBlog .conteudoPost .conteudo mark {
	background: rgba(237, 51, 69, 0.14);
	border-radius: 4px;
	padding: 2px 6px;
	color: var(--primary);
}

/* Títulos */

/* O clear é por causa da imagem alinhada ao lado do texto: um título nunca
   começa ao lado de uma foto, ele espera o float acabar */

#paginaBlog .conteudoPost .conteudo h2,
#paginaBlog .conteudoPost .conteudo h3,
#paginaBlog .conteudoPost .conteudo h4,
#paginaBlog .conteudoPost .conteudo h5,
#paginaBlog .conteudoPost .conteudo h6 {
	clear: both;
	color: var(--primary);
	font-weight: 700;
	margin: 40px 0 16px 0;
	scroll-margin-top: calc(var(--alturaHeaderCompacto) + 20px);
}

/* O H2 abre um assunto novo dentro da matéria, então ele ganha um fio curto
   em cima - o mesmo gesto das seções da home, em tamanho de texto */

#paginaBlog .conteudoPost .conteudo h2 {
	position: relative;
	font-size: 26px;
	line-height: 34px;
	padding: 20px 0 0 0;
}

#paginaBlog .conteudoPost .conteudo h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 4px;
	border-radius: 9999px;
	background: var(--gradienteAccent);
}

#paginaBlog .conteudoPost .conteudo h3 {
	font-size: 21px;
	line-height: 30px;
}

#paginaBlog .conteudoPost .conteudo h4 {
	font-size: 18px;
	line-height: 28px;
}

#paginaBlog .conteudoPost .conteudo h5,
#paginaBlog .conteudoPost .conteudo h6 {
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted-foreground);
}

/*********************************************
** Listas
**
** Os marcadores são desenhados aqui: o ponto da lista comum vira uma bolinha
** no gradiente da marca e o número da lista ordenada vira uma pílula lilás.
** Nos dois casos o list-style sai de cena e quem marca é um ::before - que é
** o que dá para colorir e alinhar com a primeira linha do item.
*********************************************/

#paginaBlog .conteudoPost .conteudo ul,
#paginaBlog .conteudoPost .conteudo ol {
	list-style: none;
	padding: 0;
	margin: 0 0 22px 0;
}

#paginaBlog .conteudoPost .conteudo ol {
	counter-reset: itemLista;
}

#paginaBlog .conteudoPost .conteudo li {
	position: relative;
	padding: 0 0 0 32px;
	margin: 0 0 10px 0;
}

#paginaBlog .conteudoPost .conteudo ul > li::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 8px;
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	background: var(--gradienteAccent);
}

#paginaBlog .conteudoPost .conteudo ol > li {
	counter-increment: itemLista;
}

#paginaBlog .conteudoPost .conteudo ol > li::before {
	content: counter(itemLista);
	position: absolute;
	top: 5px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 9999px;
	background: var(--secondary);
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	color: var(--primary);
}

/* Lista dentro de lista: o recuo já vem do padding do item de fora, então
   aqui sobra só o respiro e um marcador mais apagado */

#paginaBlog .conteudoPost .conteudo li > ul,
#paginaBlog .conteudoPost .conteudo li > ol {
	margin: 10px 0 0 0;
}

#paginaBlog .conteudoPost .conteudo li > ul > li::before {
	background: rgba(63, 34, 114, 0.35);
}

/*********************************************
** Citações
**
** Vale para as três marcações: o blockquote solto do editor clássico, o
** .wp-block-quote do editor de blocos e o .wp-block-pullquote (a citação em
** destaque). O aspas grande é um ::before - assim ele não entra na leitura de
** quem usa leitor de tela.
*********************************************/

#paginaBlog .conteudoPost .conteudo blockquote {
	position: relative;
	background: var(--secondary);
	border: solid 1px var(--border);
	border-left: solid 4px var(--accent);
	border-radius: var(--radius);
	padding: 28px 32px 24px 32px;
	margin: 32px 0;
}

#paginaBlog .conteudoPost .conteudo blockquote::before {
	content: "\201C";
	position: absolute;
	top: 10px;
	right: 24px;
	font-size: 72px;
	line-height: 1;
	font-weight: 700;
	color: rgba(63, 34, 114, 0.12);
	pointer-events: none;
}

#paginaBlog .conteudoPost .conteudo blockquote p {
	position: relative;
	z-index: 1;
	font-size: 17px;
	line-height: 29px;
	font-style: italic;
	color: var(--primary);
	margin: 0 0 12px 0;
}

#paginaBlog .conteudoPost .conteudo blockquote p:last-child {
	margin: 0;
}

#paginaBlog .conteudoPost .conteudo blockquote cite,
#paginaBlog .conteudoPost .conteudo blockquote .wp-block-quote__citation {
	display: block;
	font-size: 13px;
	line-height: 20px;
	font-weight: 600;
	font-style: normal;
	color: var(--muted-foreground);
}

#paginaBlog .conteudoPost .conteudo blockquote cite::before,
#paginaBlog .conteudoPost .conteudo blockquote .wp-block-quote__citation::before {
	content: "— ";
}

/* Citação em destaque: sem caixa, centralizada e entre dois fios */

#paginaBlog .conteudoPost .conteudo .wp-block-pullquote {
	border-top: solid 1px var(--border);
	border-bottom: solid 1px var(--border);
	padding: 32px 0;
	margin: 40px 0;
	text-align: center;
}

#paginaBlog .conteudoPost .conteudo .wp-block-pullquote blockquote {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

#paginaBlog .conteudoPost .conteudo .wp-block-pullquote blockquote::before {
	display: none;
}

#paginaBlog .conteudoPost .conteudo .wp-block-pullquote p {
	font-size: 22px;
	line-height: 34px;
	font-weight: 600;
	font-style: normal;
	color: var(--primary);
}

#paginaBlog .conteudoPost .conteudo .wp-block-pullquote cite {
	color: var(--accentTexto);
}

/*********************************************
** Imagens, legendas e galeria
*********************************************/

#paginaBlog .conteudoPost .conteudo img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius2xl);
}

#paginaBlog .conteudoPost .conteudo figure {
	margin: 32px 0;
}

/* A legenda serve para as duas marcações: o .wp-caption do editor clássico e
   o <figcaption> do bloco de imagem */

#paginaBlog .conteudoPost .conteudo figcaption,
#paginaBlog .conteudoPost .conteudo .wp-caption-text {
	display: block;
	padding: 12px 0 0 0;
	margin: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--muted-foreground);
	text-align: center;
}

#paginaBlog .conteudoPost .conteudo .wp-caption {
	max-width: 100%;
	margin: 32px 0;
}

/* Alinhamentos do editor */

#paginaBlog .conteudoPost .conteudo .aligncenter,
#paginaBlog .conteudoPost .conteudo .wp-block-image.aligncenter {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#paginaBlog .conteudoPost .conteudo .alignleft {
	float: left;
	max-width: 50%;
	margin: 8px 32px 24px 0;
}

#paginaBlog .conteudoPost .conteudo .alignright {
	float: right;
	max-width: 50%;
	margin: 8px 0 24px 32px;
}

/* Largura "larga" e "tela inteira" (ver o add_theme_support('align-wide') em
   includes/suportes.php).
**
** A coluna de leitura tem 928px, então as duas precisam sair dela: a larga
** vai até a medida do container do resto da página e a de tela inteira vai de
** ponta a ponta. As duas ficam presas ao meio da coluna com o translate, e o
** body já corta o que passar da janela (overflow-x: hidden no geral.css). */

#paginaBlog .conteudoPost .conteudo .alignwide {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(1112px, calc(100vw - 40px));
	max-width: none;
}

#paginaBlog .conteudoPost .conteudo .alignfull {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: none;
}

#paginaBlog .conteudoPost .conteudo .alignfull img,
#paginaBlog .conteudoPost .conteudo .alignfull video {
	border-radius: 0;
}

/* Galeria: a do bloco e a do shortcode [gallery] do editor clássico. As duas
   viram a mesma grade que se ajusta sozinha à largura que sobrar. */

#paginaBlog .conteudoPost .conteudo .wp-block-gallery,
#paginaBlog .conteudoPost .conteudo .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin: 32px 0;
}

/* Quantas colunas o editor pediu. Sem uma dessas classes vale o auto-fit da
   regra acima, que decide pela largura que sobrar. */

#paginaBlog .conteudoPost .conteudo .wp-block-gallery.columns-1,
#paginaBlog .conteudoPost .conteudo .gallery.gallery-columns-1 {
	grid-template-columns: repeat(1, 1fr);
}

#paginaBlog .conteudoPost .conteudo .wp-block-gallery.columns-2,
#paginaBlog .conteudoPost .conteudo .gallery.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

#paginaBlog .conteudoPost .conteudo .wp-block-gallery.columns-3,
#paginaBlog .conteudoPost .conteudo .gallery.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

#paginaBlog .conteudoPost .conteudo .wp-block-gallery.columns-4,
#paginaBlog .conteudoPost .conteudo .gallery.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Quem manda na largura de cada figura é a grade daqui, e não o cálculo de
   porcentagem que o CSS da galeria do WordPress traz. Ele marca aquela regra
   com um truque de especificidade (o :not(#individual-image), que vale como
   um id), então a regra do tema repete o mesmo truque para poder vencer - sem
   isso a figura sairia com uma fração da largura da célula. */

#paginaBlog .conteudoPost .conteudo .wp-block-gallery figure.wp-block-image:not(#individual-image),
#paginaBlog .conteudoPost .conteudo .gallery .gallery-item {
	width: 100%;
	max-width: 100%;
	margin: 0;
	float: none;
}

/* A legenda da galeria (a do bloco todo, não a de cada imagem) ocupa a linha
   inteira embaixo das fotos, e não uma coluna ao lado delas */

#paginaBlog .conteudoPost .conteudo .wp-block-gallery > figcaption {
	grid-column: 1 / -1;
}

#paginaBlog .conteudoPost .conteudo .wp-block-gallery img,
#paginaBlog .conteudoPost .conteudo .gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0;
}

/*********************************************
** Vídeo, áudio e incorporados
**
** O vídeo do editor (<video>) e o de fora (o YouTube, que entra como iframe
** dentro de .wp-block-embed) ficam com a mesma caixa: 16/9, cantos
** arredondados e o vídeo preenchendo tudo.
*********************************************/

#paginaBlog .conteudoPost .conteudo video,
#paginaBlog .conteudoPost .conteudo .wp-block-video video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius2xl);
	background: #12061F;
}

#paginaBlog .conteudoPost .conteudo .wp-block-video,
#paginaBlog .conteudoPost .conteudo .wp-block-embed,
#paginaBlog .conteudoPost .conteudo .wp-video {
	margin: 32px 0;
}

#paginaBlog .conteudoPost .conteudo .wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius2xl);
	background: #12061F;
}

#paginaBlog .conteudoPost .conteudo .wp-block-embed iframe,
#paginaBlog .conteudoPost .conteudo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

#paginaBlog .conteudoPost .conteudo audio {
	width: 100%;
	margin: 32px 0;
}

/*********************************************
** Tabela
**
** A tabela é a única peça do texto que pode ser mais larga que a coluna de
** leitura, então quem rola é a caixa dela - a página nunca rola de lado.
*********************************************/

#paginaBlog .conteudoPost .conteudo .wp-block-table {
	overflow-x: auto;
	margin: 32px 0;
}

#paginaBlog .conteudoPost .conteudo table {
	width: 100%;
	border-collapse: collapse;
	background: var(--card);
	border: solid 1px var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	margin: 32px 0;
	font-size: 15px;
	line-height: 24px;
}

#paginaBlog .conteudoPost .conteudo .wp-block-table table {
	margin: 0;
}

#paginaBlog .conteudoPost .conteudo thead {
	background: var(--primary);
}

#paginaBlog .conteudoPost .conteudo th {
	padding: 14px 18px;
	text-align: left;
	font-weight: 600;
	color: var(--primary-foreground);
	border: 0;
}

#paginaBlog .conteudoPost .conteudo td {
	padding: 14px 18px;
	border: 0;
	border-top: solid 1px var(--border);
	color: var(--foreground);
}

#paginaBlog .conteudoPost .conteudo tbody tr:nth-child(even) {
	background: rgba(240, 236, 250, 0.55);
}

#paginaBlog .conteudoPost .conteudo table caption,
#paginaBlog .conteudoPost .conteudo .wp-block-table figcaption {
	caption-side: bottom;
	padding: 12px 0 0 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--muted-foreground);
	text-align: center;
}

/*********************************************
** Código
*********************************************/

#paginaBlog .conteudoPost .conteudo code,
#paginaBlog .conteudoPost .conteudo kbd {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 14px;
	background: var(--secondary);
	border: solid 1px var(--border);
	border-radius: 6px;
	padding: 2px 6px;
	color: var(--primary);
}

#paginaBlog .conteudoPost .conteudo pre {
	overflow-x: auto;
	background: #1E0F3B;
	border-radius: var(--radius);
	padding: 22px 24px;
	margin: 32px 0;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 14px;
	line-height: 24px;
	color: rgba(250, 249, 253, 0.92);
	white-space: pre;
	tab-size: 4;
}

#paginaBlog .conteudoPost .conteudo pre code {
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit;
	color: inherit;
}

/*********************************************
** Separador, botões e colunas
*********************************************/

#paginaBlog .conteudoPost .conteudo hr {
	height: 2px;
	width: 120px;
	border: 0;
	border-radius: 9999px;
	background: var(--gradienteAccent);
	margin: 40px auto;
	opacity: 0.7;
}

/* Botão do editor: o mesmo desenho do .botao do tema (ver geral.css) */

#paginaBlog .conteudoPost .conteudo .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 32px 0;
}

#paginaBlog .conteudoPost .conteudo .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--gradienteAccent);
	border: 0;
	border-radius: 9999px;
	padding: 14px 28px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--accent-foreground)!important;
	text-decoration: none!important;
	box-shadow: 0 18px 30px -18px rgba(237, 51, 69, 0.8);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s linear;
}

#paginaBlog .conteudoPost .conteudo .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 36px -18px rgba(237, 51, 69, 0.9);
}

/* O botão vazado do editor ("outline") vira o secundário do tema */

#paginaBlog .conteudoPost .conteudo .is-style-outline .wp-block-button__link {
	background: none;
	border: solid 1px var(--accent);
	color: var(--accentTexto)!important;
	box-shadow: none;
}

#paginaBlog .conteudoPost .conteudo .is-style-outline .wp-block-button__link:hover {
	background: rgba(237, 51, 69, 0.08);
}

#paginaBlog .conteudoPost .conteudo .wp-block-columns {
	display: flex;
	gap: 24px;
	margin: 32px 0;
}

#paginaBlog .conteudoPost .conteudo .wp-block-column {
	flex: 1;
	min-width: 0;
}

#paginaBlog .conteudoPost .conteudo .wp-block-column > *:last-child {
	margin-bottom: 0;
}

/* Bloco de grupo com fundo (o "destaque" dentro do texto) */

#paginaBlog .conteudoPost .conteudo .wp-block-group.has-background {
	border-radius: var(--radius2xl);
	padding: 28px 32px;
	margin: 32px 0;
}

#paginaBlog .conteudoPost .conteudo .wp-block-group.has-background > *:last-child {
	margin-bottom: 0;
}

/* Posts Relacionados */

#paginaBlog .postsRelacionados {
	width: 100%;
	padding: 56px 0;
	background: rgba(240, 236, 250, 0.6);
}

/*********************************************
** Desktop
*********************************************/

@media only screen and (min-width: 768px) {

	#paginaBlog .blocoInicial {
		padding: calc(56px + var(--topoBlocoInicial)) 0 80px 0;
	}

	#paginaBlog .blocoInicial h1 {
		font-size: 48px;
	}

	/* A abertura do blog acompanha o respiro do banner da home */

	#paginaBlog .blocoInicial.bannerAnimado {
		padding: calc(72px + var(--topoBlocoInicial)) 0 112px 0;
	}

	#paginaBlog .blocoInicial.bannerAnimado h1 {
		font-size: 48px;
	}

	#paginaBlog .blocoInicial.bannerAnimado .texto {
		font-size: 16px;
		line-height: 26px;
	}

	/* O título da matéria fica um degrau abaixo do nome da categoria: ele é
	   uma frase inteira, e em 60px uma manchete de duas linhas tomaria a tela
	   toda antes do primeiro parágrafo */

	#paginaBlog .blocoInicial.bannerAnimado.blocoInicialPost h1 {
		font-size: 40px;
	}

	/* Conteúdo da matéria: com a coluna mais larga o texto também cresce */

	#paginaBlog .conteudoPost {
		padding: 72px 0;
	}

	#paginaBlog .conteudoPost .conteudo,
	#paginaBlog .conteudoPost .conteudo p,
	#paginaBlog .conteudoPost .conteudo li {
		font-size: 17px;
		line-height: 30px;
	}

	#paginaBlog .conteudoPost .conteudo h2 {
		font-size: 30px;
		line-height: 40px;
	}

	#paginaBlog .conteudoPost .conteudo h3 {
		font-size: 23px;
		line-height: 32px;
	}

	#paginaBlog .postsRelacionados {
		padding: 80px 0;
	}

	#paginaBlog .tituloBloco {
		font-size: 30px;
		line-height: 38px;
	}

	#paginaBlog .boxRecentes {
		padding: 80px 0;
	}

}

/* Só a partir daqui o título grande cabe em meia largura sem apertar - é o
   mesmo tamanho do título do banner da home */

@media only screen and (min-width: 1024px) {

	#paginaBlog .blocoInicial.bannerAnimado h1 {
		font-size: 60px;
	}

	#paginaBlog .blocoInicial.bannerAnimado.blocoInicialPost h1 {
		font-size: 46px;
	}

}

/*********************************************
** Mobile
*********************************************/

@media only screen and (max-width: 1023px) {

	/* Abertura em uma coluna: o destaque grande passa a ficar embaixo dos
	   textos, e não ao lado deles */

	#paginaBlog .blocoInicial.bannerAnimado .boxGrid {
		grid-template-columns: repeat(1, 1fr);
		gap: 40px;
	}

	/* Em largura inteira o card grande fica alto demais em 3/2 */

	#paginaBlog .cartaoDestaque.principal .capa,
	#paginaBlog .cartaoDestaque.principal .capa img,
	#paginaBlog .cartaoDestaque.principal .capaVazia {
		aspect-ratio: 16 / 10;
	}

	/* Os dois menores também passam a ocupar a linha inteira: lado a lado
	   aqui, sobra pouca largura para o texto ao lado da capa */

	#paginaBlog .listaDestaques {
		grid-template-columns: repeat(1, 1fr);
	}

	#paginaBlog .listaNoticias {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media only screen and (max-width: 767px) {

	/* Os dois campos deixam de dividir a linha: lado a lado aqui, cada um
	   ficaria estreito demais para ler a categoria escolhida */

	#paginaBlog .boxFiltros {
		margin: -24px 0 0 0;
	}

	#paginaBlog .barraFiltros {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		border-radius: var(--radius2xl);
		padding: 12px;
	}

	#paginaBlog .campoCategoria {
		flex: none;
		width: 100%;
	}

	/* Aqui a lista não pode passar da largura da tela */

	#paginaBlog .opcoesCategoria {
		max-width: 100%;
	}

	#paginaBlog .opcoesCategoria li a {
		white-space: normal;
	}

	/* Na tela estreita a capa volta a ser mais alta: os textos ocupam o pé do
	   card, e em 16/10 sobraria pouca foto por cima deles */

	#paginaBlog .cartaoDestaque.principal .capa,
	#paginaBlog .cartaoDestaque.principal .capa img,
	#paginaBlog .cartaoDestaque.principal .capaVazia {
		aspect-ratio: 4 / 3;
	}

	#paginaBlog .cartaoDestaque.principal .conteudo {
		padding: 20px;
	}

	#paginaBlog .cartaoDestaque.principal .tituloDestaque {
		font-size: 19px;
		line-height: 26px;
	}

	/* Capa mais estreita: aqui sobra pouca largura para o texto ao lado */

	#paginaBlog .listaDestaques .capa {
		flex: 0 0 118px;
	}

	#paginaBlog .listaDestaques .conteudo {
		padding: 16px 18px;
	}

	#paginaBlog .listaNoticias {
		grid-template-columns: repeat(1, 1fr);
	}

	/* Elementos do editor na tela estreita
	**
	** Aqui a coluna de leitura já é a largura da tela, então imagem ao lado do
	** texto e colunas lado a lado não cabem: as duas passam a ocupar a linha
	** inteira, uma peça embaixo da outra. */

	#paginaBlog .conteudoPost .conteudo .alignleft,
	#paginaBlog .conteudoPost .conteudo .alignright {
		float: none;
		max-width: 100%;
		margin: 32px 0;
	}

	#paginaBlog .conteudoPost .conteudo .wp-block-columns {
		flex-direction: column;
	}

	/* Galeria: aqui não cabem três ou quatro fotos na linha, qualquer que
	   seja o número pedido no editor. As classes de coluna aparecem uma a uma
	   porque a regra do desktop também tem duas classes - com menos que isso
	   ela ganharia mesmo estando aqui embaixo. */

	#paginaBlog .conteudoPost .conteudo .wp-block-gallery,
	#paginaBlog .conteudoPost .conteudo .wp-block-gallery.columns-3,
	#paginaBlog .conteudoPost .conteudo .wp-block-gallery.columns-4,
	#paginaBlog .conteudoPost .conteudo .gallery,
	#paginaBlog .conteudoPost .conteudo .gallery.gallery-columns-3,
	#paginaBlog .conteudoPost .conteudo .gallery.gallery-columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	#paginaBlog .conteudoPost .conteudo blockquote {
		padding: 24px 22px 20px 22px;
	}

	#paginaBlog .conteudoPost .conteudo blockquote::before {
		font-size: 56px;
		right: 16px;
	}

	#paginaBlog .conteudoPost .conteudo blockquote p {
		font-size: 16px;
		line-height: 28px;
	}

	#paginaBlog .conteudoPost .conteudo .wp-block-pullquote p {
		font-size: 19px;
		line-height: 29px;
	}

	/* Compartilhar: aqui a chamada e os botões param de dividir a linha, e o
	   cartão do fim fica mais estreito */

	#paginaBlog .boxCompartilhar.topo,
	#paginaBlog .boxCompartilhar.fim {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	#paginaBlog .boxCompartilhar.fim {
		padding: 24px 22px;
	}

	/* Com sete botões, o nome de cada rede escrito faria o cartão virar uma
	   coluna de pílulas - no celular fica só o ícone, como no bloco de cima */

	#paginaBlog .boxCompartilhar.fim .botaoCompartilhar .nome {
		display: none;
	}

	/* Os sete botões viram uma grade de quatro colunas, e não uma fila que
	   quebra: em fila, o sétimo cairia sozinho na segunda linha - e a conta
	   muda a cada largura de celular. Na grade eles ficam 4 + 3, sempre do
	   mesmo tamanho e sempre alinhados. */

	#paginaBlog .listaCompartilhar {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		width: 100%;
		gap: 8px;
	}

	#paginaBlog .botaoCompartilhar,
	#paginaBlog .botaoCompartilhar.comNome {
		width: 100%;
		padding: 0;
	}

	/* A tabela não encolhe: quem rola é a caixa dela */

	#paginaBlog .conteudoPost .conteudo table {
		min-width: 520px;
	}

	#paginaBlog .conteudoPost .conteudo .wp-block-table {
		border-radius: var(--radius);
	}

	#paginaBlog .conteudoPost .bannerPost {
		border-radius: var(--radius2xl);
		margin: 0 0 28px 0;
	}

}

/*********************************************
** Listagem vazia
*********************************************/

/* Categoria sem nenhuma matéria: sem isto o título da seção ficava sozinho
   na tela, sem nada embaixo */

#paginaBlog .listaVazia {
	margin: 24px 0 0 0;
	font-size: 16px;
	line-height: 26px;
	color: var(--muted-foreground);
}