/*********************************************
** Variáveis do Tema (design tokens do layout)
*********************************************/

:root {
	--background: #FAF9FD;
	--foreground: #1E0F3B;
	--card: #FFFFFF;
	--primary: #3F2272;
	--primary-foreground: #FAF9FD;
	--secondary: #F0ECFA;
	--muted: #F1EEF7;
	--muted-foreground: #6D6881;
	--accent: #ED3345;
	--accent-foreground: #FFF9F9;
	--border: #E2E8F0;

	/* O vermelho da marca em duas versões que passam no contraste AA (4.5:1).

	   O --accent puro tem 3,9:1 contra o fundo claro e 4,2:1 contra o escuro,
	   então ele reprova nos dois quando carrega TEXTO - e ele carrega texto em
	   bastante lugar: a etiqueta acima dos títulos, o rótulo dos botões, os
	   links dentro do formulário. De olho o tom não muda: são 9% de luz para
	   baixo na versão do fundo claro e 9% para cima na do escuro.

	   Onde usar cada um:

	     --accent       -> só decoração (brilho, ponto, borda, sombra)
	     --accentTexto  -> texto vermelho sobre fundo CLARO, e fundo vermelho
	                       embaixo de texto claro (o .botao.accent)
	     --accentClaro  -> texto vermelho sobre fundo ESCURO */

	--accentTexto: #CC2C3B;
	--accentClaro: #FF9A8D;
	--radius: 16px;
	--radius2xl: 24px;

	/* Gradiente da marca (o mesmo do .textoGradiente) */
	--gradienteAccent: linear-gradient(100deg, #FF6C58, #FE2A67);

	/* O mesmo gradiente em versão que aguenta TEXTO CLARO em cima.

	   O de cima só serve para texto grande sobre fundo escuro (é o caso do
	   .textoGradiente, sempre dentro de bloco escuro). Como FUNDO de botão ele
	   reprova: a ponta laranja dá 2,7:1 contra o texto claro, e o mínimo é 4,5.

	   Este aqui é o mesmo matiz e a mesma saturação, com a luz baixada até os
	   dois extremos passarem (4,6:1 e 4,6:1). Ele é o fundo do botão de ação
	   do header - o único lugar do tema em que o gradiente carregava texto. */

	--gradienteAccentAA: linear-gradient(100deg, #E21B00, #E50143);

	/* Altura do header.

	   Ele é fixo e fica por cima do conteúdo, então quem abre espaço para
	   ele é o primeiro bloco de cada página - por isso a medida mora aqui,
	   e não dentro do header.css. */

	--alturaHeader: 80px;
	--alturaHeaderCompacto: 64px;

	/* Espaço que o header pede em cima do bloco que abre cada página.

	   Ele é fixo e flutua por cima desse bloco, então quem reserva a altura
	   dele é o padding de cima do próprio bloco: o home.css, o blog.css e o
	   padrao.css somam esta medida ao respiro deles.

	   Aqui é só a altura da barra, sem folga nenhuma somada - a distância
	   entre a linha do header e o conteúdo é o respiro de cada bloco, e é lá
	   que ela se ajusta. */

	--topoBlocoInicial: var(--alturaHeader);
}

* {
	font-family: "Poppins", sans-serif;
	box-sizing: border-box;
}

/* Rolagem macia (o "voltar ao topo" do rodapé e as âncoras do menu contam com
   ela). Fica no html, e não no *, porque no * ela valia para toda caixa que
   rola por dentro - e nenhuma delas pediu isso. */

html {
	scroll-behavior: smooth;
}

/* A folha começava com um outline: none !important no * e repetia o mesmo no
   a:focus. Isso apagava o anel de foco do site inteiro: quem navega pelo
   teclado ficava sem saber onde está (WCAG 2.4.7, e é uma reprovação certa no
   PageSpeed).

   O anel volta aqui, mas só no :focus-visible - o navegador liga esse estado
   no teclado e o desliga no clique de mouse, que era justamente o que o
   outline: none tentava esconder.

   Ele é desenhado com box-shadow, e não com outline, porque quase tudo no tema
   é pílula (border-radius: 9999px): o box-shadow acompanha a curva, o outline
   antigo não acompanhava. */

:focus-visible {
	outline: none;
	border-radius: 6px;
	box-shadow:
		0 0 0 2px var(--background),
		0 0 0 4px var(--accentTexto);
}

/* Dentro dos blocos escuros o anel inverte: o fio de dentro fica escuro (para
   separar do que está atrás) e o de fora, claro. */

.surfaceInk :focus-visible,
.bannerAnimado :focus-visible,
.boxPlanos :focus-visible,
.boxBlog :focus-visible,
#footer :focus-visible,
.avisoCookies :focus-visible {
	box-shadow:
		0 0 0 2px rgba(37, 11, 76, 0.9),
		0 0 0 4px #FFFFFF;
}

/* Peça em pílula recebe o anel em pílula */

.botao:focus-visible,
.botaoPlano:focus-visible,
.seloPilula:focus-visible,
.pulaConteudo:focus-visible,
.botaoCompartilhar:focus-visible,
.setaCarrossel:focus-visible,
.voltarTopo:focus-visible,
.botaoPlay:focus-visible,
.botaoSom:focus-visible,
.listaRedes a:focus-visible {
	border-radius: 9999px;
}

/* Quem pediu menos animação no sistema não quer a rolagem correndo sozinha */

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

	html {
		scroll-behavior: auto;
	}

}

/*********************************************
** Atalho para o conteúdo (teclado)
*********************************************/

/* O primeiro link de toda página: some da tela e só aparece quando recebe
   foco, para quem navega pelo teclado não ter de tabular o menu inteiro antes
   de chegar ao conteúdo.
**
** Ele mora aqui, e não no header.css, porque é o primeiro link de toda
** página: o desenho dele fica junto do que vale para o site inteiro. */

.pulaConteudo {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 200;
	border-radius: 9999px;
	background: var(--primary);
	color: var(--primary-foreground);
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	transform: translateY(-250%);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.pulaConteudo:focus {
	transform: translateY(0);
}

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

	.pulaConteudo {
		transition-duration: 0.01ms;
	}

}

/*********************************************
** Texto só para leitor de tela
*********************************************/

/* Some da tela e continua sendo lido em voz alta. Serve para o título que
   organiza uma seção sem aparecer no desenho (os destaques do blog) e para o
   nome de um controle que na tela é só ícone (as setas da paginação).

   O .screen-reader-text é a mesma receita com o nome que o WordPress usa: o
   css de bloco que trazia essa classe não entra mais nas telas que não
   imprimem conteúdo do editor (ver includes/suportes.php), e sem ela o texto
   escondido que o WordPress põe na paginação apareceria escrito na página. */

.apenasLeitor,
.screen-reader-text {
	position: absolute!important;
	width: 1px!important;
	height: 1px!important;
	margin: -1px!important;
	padding: 0!important;
	border: 0!important;
	overflow: hidden!important;
	clip: rect(0 0 0 0)!important;
	clip-path: inset(50%)!important;
	white-space: nowrap!important;
}

/* Container = max-w-6xl + px-5 do layout */

.container {
	width: 1152px!important;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	float: none!important;
}

.container.estreito {
	width: 768px!important;
}

/* Medida de leitura da matéria (ver single.php).
   Mais larga que o .estreito - a matéria tem imagem, citação e vídeo no meio
   do texto, e em 768px cada um deles fica apertado -, mas ainda longe da
   largura cheia do container: em 1152px a linha passaria de 100 caracteres e
   o olho perderia o começo da linha seguinte. */

.container.leitura {
	width: 928px!important;
}

a:active,
a:checked,
a:focus,
a:hover {
	text-decoration: none;
}

body {
	font-family: "Poppins", sans-serif;
	margin: 0;
	padding: 0;
	font-weight: 400;
	overflow-x: hidden;
	background-color: var(--background)!important;
	color: var(--foreground);
	-webkit-font-smoothing: antialiased;
}

.clear {
	clear: both;
}

.none {
	display: none!important;
}

img {
	max-width: 100%!important;
	height: auto;
}

a {
	text-decoration: none!important;
}

p, span, li {
	color: var(--foreground);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
}

/* Span dentro de título herda o tamanho do título (não os 14px acima) */

h1 span, h2 span, h3 span,
h4 span, h5 span, h6 span {
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Alinhamentos de Conteúdo */

.aligncenter,
.alignleft,
.alignright {
	display: block;
	padding: 0;
}

.aligncenter {
	float: none;
	margin: .5em auto 1em;
}

.alignright {
	float: right;
	margin: .5em 0 1em 1em;
}

.alignleft {
	float: left;
	margin: .5em 1em 1em 0;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	text-align: center;
	font-size: 12px;
	margin: 10px 0 0 0;
}

/*********************************************
** Superfície Escura (.surface-ink do layout)
*********************************************/

.surfaceInk {
	background: linear-gradient(150deg, #250B4C 0%, #40166D 55%, #74065C 100%);
}

/*********************************************
** Texto com Gradiente (.text-gradient-accent)
*********************************************/

.textoGradiente {
	color: transparent;
	background: linear-gradient(100deg, #FF6C58, #FE2A67);
	-webkit-background-clip: text;
	background-clip: text;
}

/*********************************************
** Card Claro (.card-soft do layout)
*********************************************/

/* Sombra bem discreta de propósito: assim ela não é cortada pelo
   overflow do slick e o card continua definido pela borda */

.cardSoft {
	background: var(--card);
	border-radius: var(--radius2xl);
	border: solid 1px rgba(63, 34, 114, 0.1);
	transition: transform 0.3s, box-shadow 0.3s;
	box-shadow: 0 1px 3px rgba(63, 34, 114, 0.06);
}

/*********************************************
** Item Post (card do layout)
*********************************************/

/* Este card aparece no blog, nas listagens de categoria e de autor, na busca
   e também no carrossel da home - por isso ele mora aqui, e não no blog.css:
   a home carrega só o home.css.

   São duas caixas: o .itemPost é a célula (a coluna da grade no blog, o slide
   do slick na home) e a .caixaPost é o card em si. É essa separação que deixa
   o carrossel abrir o espaço entre os cards por dentro do slide - o slick
   calcula a largura do slide, então uma margem por fora dele sairia de passo
   com o deslocamento do carrossel.

   O flex nas duas é o que iguala a altura dos cards de uma mesma linha: a
   célula estica, e o card estica dentro dela.

   Os efeitos são todos de baixa amplitude e de curva lenta: o card aparece
   quatro vezes lado a lado no carrossel, e movimento forte em quatro peças ao
   mesmo tempo cansa a leitura. */

.itemPost {
	list-style: none;
	display: flex;
	padding: 0;
}

/* O overflow hidden é o que faz a capa respeitar o canto arredondado. Ele não
   corta a sombra do hover: overflow recorta os filhos, não a sombra da
   própria caixa. */

.caixaPost {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	/* Curva de saída suave (a mesma dos dois lados: subir e voltar). O card
	   anda pouco, então o que dá a sensação de macio é o tempo, e não a
	   distância - com curva rápida demais ele "pula" e parece seco. */
	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;
}

/* Fio de luz no topo do card: nasce do meio e abre no hover, o mesmo dos
   cards da home */

.caixaPost::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #FF6C58, #FE2A67, transparent);
	transform: scaleX(0);
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
	z-index: 3;
	pointer-events: none;
}

/* Brilho que acende atrás da capa no hover */

.caixaPost .brilhoCard {
	position: absolute;
	top: -80px;
	left: -60px;
	width: 220px;
	height: 220px;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(254, 42, 103, 0.12) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.5s;
	z-index: 2;
	pointer-events: none;
}

.caixaPost:hover {
	transform: translateY(-4px);
	border-color: rgba(63, 34, 114, 0.16);
	box-shadow: 0 16px 32px -20px rgba(63, 34, 114, 0.4);
}

.caixaPost:hover::before {
	transform: scaleX(1);
}

.caixaPost:hover .brilhoCard {
	opacity: 1;
}

/* Capa */

.caixaPost .capaPost {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--secondary);
}

.caixaPost .capaPost .linkCapa {
	display: block;
}

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

.caixaPost .capaPost img {
	display: block;
	width: 100%!important;
	max-width: none!important;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.caixaPost:hover .capaPost img {
	transform: scale(1.03);
}

/* Post sem imagem destacada */

.caixaPost .capaPost .capaVazia {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: linear-gradient(150deg, #250B4C 0%, #40166D 55%, #74065C 100%);
}

.caixaPost .capaPost .capaVazia i {
	font-size: 24px;
	color: rgba(250, 249, 253, 0.45);
}

/* Categoria em cima da capa, no canto de baixo: é onde a imagem costuma ser
   mais escura, e o véu embaixo dela garante a leitura no resto dos casos */

.caixaPost .capaPost .categoria {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2;
	pointer-events: none;
}

.caixaPost .capaPost .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);
}

/* Véu que escurece o pé da capa, só para a categoria não sumir em cima de
   uma foto clara */

.caixaPost .capaPost::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	background: linear-gradient(to top, rgba(30, 15, 59, 0.55), transparent);
	pointer-events: none;
}

/* Corpo */

/* O corpo é flex em coluna e o resumo cresce dentro dele: é isso que deixa o
   rodapé dos cards alinhado quando os títulos têm alturas diferentes */

.caixaPost .corpoPost {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 22px 22px 22px;
}

.caixaPost .dataPost {
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.02em;
	color: var(--muted-foreground);
}

/* Título */

.caixaPost .tituloPost {
	font-size: 16px;
	line-height: 23px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 6px 0 0 0;
}

.caixaPost .tituloPost a {
	color: var(--primary);
	transition: color 0.3s linear;
}

.caixaPost .tituloPost a:hover,
.caixaPost:hover .tituloPost a {
	color: var(--accentTexto);
}

/* Resumo */

.caixaPost .resumo {
	flex: 1;
	font-size: 12px;
	line-height: 19px;
	color: var(--muted-foreground);
	margin: 10px 0 0 0;
}

/* Informações */

.caixaPost .boxInfo {
	display: flex;
	align-items: center;
	gap: 14px;
	border-top: solid 1px rgba(63, 34, 114, 0.1);
	padding: 14px 0 0 0;
	margin: 18px 0 0 0;
}

.caixaPost .boxInfo .item,
.caixaPost .boxInfo .item a,
.caixaPost .boxInfo .item span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	line-height: 16px;
	color: var(--muted-foreground);
}

.caixaPost .boxInfo .item i {
	font-size: 10px;
	color: var(--muted-foreground);
}

.caixaPost .boxInfo .item a:hover {
	color: var(--accentTexto);
}

/* O tempo de leitura vai para a direita */

.caixaPost .boxInfo .leitura {
	margin-left: auto;
}

/* Quem pediu menos animação recebe o card parado */

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

	.caixaPost,
	.caixaPost::before,
	.caixaPost .brilhoCard,
	.caixaPost .capaPost img {
		transition-duration: 0.01ms;
	}

	.caixaPost:hover {
		transform: none;
	}

	.caixaPost:hover .capaPost img {
		transform: none;
	}

}


/*********************************************
** Etiqueta acima dos títulos (eyebrow)
*********************************************/

.etiquetaSecao {
	display: block;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--accentTexto);
	text-transform: uppercase;
	margin: 0;
}

/* A mesma etiqueta dentro de seção escura (Planos e Blog, na home) pede o
   vermelho claro: o tom de fundo claro reprovaria no contraste ali. É o mesmo
   modificador .claro que o .tituloSecao e o .textoSecao já usam. */

.etiquetaSecao.claro {
	color: var(--accentClaro);
}

/*********************************************
** Selo Pílula (sobre fundo escuro)
*********************************************/

.seloPilula {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: solid 1px rgba(250, 249, 253, 0.2);
	background: rgba(250, 249, 253, 0.1);
	border-radius: 9999px;
	padding: 6px 16px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: var(--primary-foreground);
}

.seloPilula i {
	font-size: 13px;
	color: var(--primary-foreground);
}

.seloPilula svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--primary-foreground);
}

/* Selo que também é link (a categoria dentro da matéria, ver single.php): o
   mesmo desenho, só que ele acende no hover para se anunciar como link */

a.seloPilula {
	transition: background-color 0.25s linear, border-color 0.25s linear;
}

a.seloPilula:hover {
	background: rgba(250, 249, 253, 0.18);
	border-color: rgba(250, 249, 253, 0.36);
}

a.seloPilula:hover i {
	color: #FF6C58;
}

/*********************************************
** Títulos de Seção
*********************************************/

.tituloSecao {
	font-size: 30px;
	line-height: 36px;
	font-weight: 700;
	color: var(--primary);
	margin: 12px 0 0 0;
}

.tituloSecao.claro {
	color: var(--primary-foreground);
}

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

.textoSecao.claro {
	color: rgba(250, 249, 253, 0.75);
}

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

.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 9999px;
	border: 0;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	padding: 14px 28px;
	cursor: pointer;
	transition: transform 0.2s linear, background-color 0.2s linear, color 0.2s linear;
}

.botao:hover {
	transform: scale(1.03);
}

.botao i {
	font-size: 15px;
}

/* Accent (ação principal) */

.botao.accent {
	background: var(--accentTexto);
	color: var(--accent-foreground);
	box-shadow: 0 10px 25px -12px var(--accent);
}

.botao.accent i {
	color: var(--accent-foreground);
}

/* Primary (roxo) */

.botao.primary {
	background: var(--primary);
	color: var(--primary-foreground);
}

.botao.primary i {
	color: var(--primary-foreground);
}

/* Vazado claro (sobre fundo escuro) */

.botao.vazadoClaro {
	background: none;
	border: solid 1px rgba(250, 249, 253, 0.3);
	color: var(--primary-foreground);
}

.botao.vazadoClaro:hover {
	background: rgba(250, 249, 253, 0.1);
	transform: none;
}

/* Largura total */

.botao.full {
	width: 100%;
}

/* Botão alto (formulários) */

.botao.alto {
	height: 48px;
	padding: 0 24px;
}

.botao.alto:hover {
	transform: scale(1.02);
}

/*********************************************
** Lista de Números (stats)
*********************************************/

.listaNumeros {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	border-top: solid 1px rgba(250, 249, 253, 0.15);
	padding: 32px 0 0 0;
	margin: 48px 0 0 0;
	list-style: none;
}

.listaNumeros li {
	list-style: none;
}

.listaNumeros .numero {
	display: block;
	font-size: 24px;
	line-height: 32px;
	font-weight: 800;
	color: var(--primary-foreground);
}

.listaNumeros .descricao {
	display: block;
	font-size: 11px;
	line-height: 16px;
	color: rgba(250, 249, 253, 0.72);
	margin-top: 4px;
}

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

.pagination {
	width: 100%;
	text-align: center;
	margin: 48px 0 0 0!important;
}

.pagination h2 {
	display: none;
}

.pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	color: var(--muted-foreground);
	background: var(--secondary);
	border-radius: 9999px;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.2s linear;
}

.pagination span.current,
.pagination a:hover {
	background: var(--primary);
	color: var(--primary-foreground);
}

/*********************************************
** Breadcrumb
*********************************************/

.bread-crumbs-pagina p,
.bread-crumbs-pagina span,
.bread-crumbs-pagina a {
	color: var(--muted-foreground)!important;
	font-size: 12px;
}

.bread-crumbs-pagina a:hover {
	color: var(--accentTexto)!important;
}

/*********************************************
** Entrada dos Elementos (revelação no scroll)
*********************************************/

/* Tudo que tem data-revela começa apagado e um pouco mais embaixo, e sobe
   para o lugar quando entra na tela (o scripts.js põe a classe .revelado).

   Mora aqui, e não no home.css, porque não é só da home: a chamada final
   (content-chamada.php) entra no fim de toda página do site e revela as
   peças dela da mesma maneira.

   O atraso de cada peça vem do --atrasoRevela escrito no HTML: é isso que
   faz os cards entrarem em escada, um pouquinho depois do outro.

   A subida usa a propriedade translate, e não transform, de propósito: o
   hover dos cards e o paralaxe do scripts.js já escrevem transform, e as duas
   propriedades se somam em vez de uma apagar a outra - então data-revela e
   data-paralax podem conviver na mesma tag. Em navegador antigo, que não
   conhece translate, a peça só aparece sem deslizar: o conteúdo continua
   inteiro, é só o movimento que não acontece. */

[data-revela] {
	opacity: 0;
	translate: 0 26px;
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--atrasoRevela, 0s);
	will-change: opacity, translate;
}

[data-revela].revelado {
	opacity: 1;
	translate: none;
	will-change: auto;
}

/* Quem pediu menos animação recebe tudo no lugar, sem movimento */

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

	[data-revela] {
		opacity: 1;
		translate: none;
		transition: none;
		will-change: auto;
	}

}

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

	/* Títulos crescem no desktop (md: do layout) */

	.tituloSecao {
		font-size: 36px;
		line-height: 40px;
	}

}

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

	/* Números */

	.listaNumeros {
		gap: 16px;
	}

	.listaNumeros .numero {
		font-size: 20px;
		line-height: 28px;
	}

	/* Header mais baixo no celular (as aberturas das páginas acompanham
	   sozinhas, porque usam a variável no padding de cima) */

	:root {
		--alturaHeader: 68px;
		--alturaHeaderCompacto: 58px;
	}

}