/*********************************************
** Home
*********************************************/

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

/* Cabeçalho das seções */

.cabecalhoSecao {
	max-width: 672px;
}

.cabecalhoSecao.center {
	max-width: 672px;
	margin: 0 auto;
	text-align: center;
}

/*********************************************
** Banner Principal
*********************************************/

/* O header é fixo e flutua por cima deste banner (ele nasce transparente
   ali em cima), então é o respiro de cima daqui que abre espaço para ele */

.bannerPrincipal {
	width: 100%;
	position: relative;
	overflow: hidden;
	padding: calc(48px + var(--topoBlocoInicial)) 0 80px 0;
}

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

/* Textos */

.bannerPrincipal .boxTextos h1 {
	font-size: 36px;
	line-height: 1.08;
	font-weight: 800;
	color: var(--primary-foreground);
	margin: 24px 0 0 0;
}

/* O efeito máquina de escrever (a classe .tituloMaquina e o cursor dela)
   virou componente e mudou de casa junto com o fundo animado: ele agora mora
   no css/banner.css, porque a abertura do blog usa o mesmo efeito. */

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

/* Botões */

.bannerPrincipal .boxTextos .boxBotoes {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 36px 0 0 0;
}

/* Imagem */

.bannerPrincipal .boxImagem {
	position: relative;
	perspective: 1000px;
}

/* O brilho já nasce na cor forte e fica mais fraco pela opacidade: animar
   opacidade não obriga o navegador a refazer o blur, então não engasga */

.bannerPrincipal .boxImagem .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;
	will-change: opacity;
}

.bannerPrincipal .boxImagem:hover .brilho {
	opacity: 1;
}

/* O transform da imagem é controlado pelo scripts.js quadro a quadro, por
   isso ele NÃO entra no transition daqui (senão o movimento fica travado) */

.bannerPrincipal .boxImagem img {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 32px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	transition: box-shadow 0.5s;
	will-change: transform;
}

.bannerPrincipal .boxImagem:hover img {
	box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.45);
}

/*********************************************
** Banner Principal: Fundo Animado
*********************************************/

/* O fundo animado (malha, brilho de fundo, riscos de luz e ícones das redes)
   virou componente e mudou de casa: ele agora mora no css/banner.css, porque
   a abertura do blog usa o mesmo efeito e não carrega este arquivo.

   A marcação dele também saiu daqui: ver o content-fundo-banner.php. */

/*********************************************
** Como Funciona
*********************************************/

.boxComoFunciona {
	width: 100%;
	position: relative;
	overflow: hidden;
	padding: 80px 0;
}

/* Fundo em paralaxe.

   As camadas ficam atrás do conteúdo e o scripts.js desloca cada uma em uma
   velocidade diferente conforme a página rola (ver data-paralax no home.php).
   Aqui só entram a posição de partida e o desenho de cada peça - o transform
   é escrito quadro a quadro, então nada de transition nelas: a transição
   brigaria com o movimento e deixaria tudo arrastado.

   Sem paralaxe (ou com menos animação no sistema) as peças ficam paradas na
   posição de partida, que já é a do meio do percurso - a seção continua
   inteira, só sem o movimento. */

.boxComoFunciona .fundoParalax {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}

.boxComoFunciona .container {
	position: relative;
	z-index: 1;
}

/* As camadas sobram para fora da seção em cima e embaixo: assim elas podem
   subir e descer sem que a borda apareça dentro da área visível */

.boxComoFunciona .fundoParalax .grade {
	position: absolute;
	top: -45%;
	right: 0;
	bottom: -45%;
	left: 0;
	background-image:
		linear-gradient(to right, rgba(63, 34, 114, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(63, 34, 114, 0.07) 1px, transparent 1px);
	background-size: 64px 64px;
	/* A malha se dissolve nas bordas para não marcar onde a seção termina */
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 5%, transparent 68%);
	mask-image: radial-gradient(ellipse at 50% 50%, #000 5%, transparent 68%);
	will-change: transform;
}

/* Manchas de luz. Mesma ideia dos brilhos do banner: o blur é pintado uma
   vez e depois só o transform muda, então o navegador não refaz o desfoque */

.boxComoFunciona .fundoParalax .bolha {
	position: absolute;
	border-radius: 9999px;
	filter: blur(90px);
	will-change: transform;
}

.boxComoFunciona .fundoParalax .bolhaEsquerda {
	top: -40px;
	left: -120px;
	width: 460px;
	height: 360px;
	background: rgba(63, 34, 114, 0.17);
}

.boxComoFunciona .fundoParalax .bolhaDireita {
	right: -140px;
	bottom: -60px;
	width: 520px;
	height: 400px;
	background: rgba(237, 51, 69, 0.13);
}

.boxComoFunciona .fundoParalax .bolhaCanto {
	top: 120px;
	right: 12%;
	width: 300px;
	height: 260px;
	background: rgba(254, 42, 103, 0.1);
}

/* Título e carrossel também se deslocam, um pouco menos que a página, e é
   essa diferença que separa o conteúdo do fundo */

.boxComoFunciona .cabecalhoSecao,
.boxComoFunciona .boxCarrossel {
	will-change: transform;
}

/* Quem pediu menos animação no sistema não recebe o paralaxe (o scripts.js
   nem liga o efeito), então a camada extra de composição só pesaria */

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

	.boxComoFunciona .fundoParalax .grade,
	.boxComoFunciona .fundoParalax .bolha,
	.boxComoFunciona .cabecalhoSecao,
	.boxComoFunciona .boxCarrossel {
		will-change: auto;
	}

}

/* Carrossel (Slick Slider) */

/* O .slick-list é overflow: hidden, então tudo que o card faz para fora do
   próprio lugar é cortado. As duas sobras abrem essa folga por dentro:
   em cima para o card poder subir no hover (translateY de -6px) sem perder o
   fio de luz do topo, e embaixo para a sombra do hover caber inteira. */

.boxComoFunciona .boxCarrossel {
	--sobraTopo: 12px;
	--sobraSombra: 26px;
	position: relative;
	margin-top: 36px;
}

.boxComoFunciona .listaPassos {
	padding: 0;
	margin: 0;
}

/* Espaço entre os cards (o slick não trabalha com gap).
   Nada de margem negativa vertical aqui: ela escaparia por colapso
   de margens e desalinharia a altura do carrossel. */

.boxComoFunciona .listaPassos .slick-list {
	margin: 0 -12px;
	padding: var(--sobraTopo) 0 var(--sobraSombra) 0;
}

/* Track em flex para os cards ficarem com a mesma altura */

.boxComoFunciona .listaPassos .slick-track {
	display: flex;
	align-items: stretch;
}

.boxComoFunciona .listaPassos li {
	list-style: none;
	height: auto;
	min-width: 0;
	padding: 0 10px;
}

/* Enquanto o slick não inicia (evita a lista empilhada piscando) */

.boxComoFunciona .listaPassos:not(.slick-initialized) {
	display: flex;
	overflow: hidden;
}

.boxComoFunciona .listaPassos:not(.slick-initialized) li {
	flex: 0 0 33.333%;
}

/* O card é coluna flex para o rodapé dos passos ficar alinhado entre eles.

   A lista de transições traz duas coisas juntas porque esta regra sobrescreve
   a do [data-revela]: opacity e translate são a entrada do card (com o atraso
   em escada) e o resto é o hover, que tem de responder na hora - por isso o
   transition-delay zera só para essas. Mesma solução dos cards de Resultados. */

.boxComoFunciona .listaPassos li .cardSoft {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	padding: 28px;
	/* Degradê bem de leve para o card não ficar branco chapado */
	background: linear-gradient(170deg, #FFFFFF 0%, #FCFBFE 60%, #F7F4FD 100%);
	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),
		transform 0.35s,
		box-shadow 0.35s,
		border-color 0.35s;
	transition-delay: var(--atrasoRevela, 0s), var(--atrasoRevela, 0s), 0s, 0s, 0s;
}

/* Fio de luz no topo do card: nasce do meio e abre no hover */

.boxComoFunciona .listaPassos li .cardSoft::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.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Brilho que acende atrás do ícone no hover */

.boxComoFunciona .listaPassos li .cardSoft .brilhoCard {
	position: absolute;
	top: -90px;
	left: -70px;
	width: 240px;
	height: 240px;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(254, 42, 103, 0.18) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
}

.boxComoFunciona .listaPassos li .cardSoft:hover {
	transform: translateY(-6px);
	border-color: rgba(63, 34, 114, 0.16);
	box-shadow: 0 22px 45px -25px rgba(63, 34, 114, 0.45);
}

.boxComoFunciona .listaPassos li .cardSoft:hover::before {
	transform: scaleX(1);
}

.boxComoFunciona .listaPassos li .cardSoft:hover .brilhoCard {
	opacity: 1;
}

/* Topo do card (ícone + número) */

.boxComoFunciona .listaPassos .topoCard {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.boxComoFunciona .listaPassos .topoCard .icone {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius2xl);
	background: linear-gradient(150deg, var(--secondary) 0%, #E6DEF8 100%);
	color: var(--primary);
	box-shadow: inset 0 0 0 1px rgba(63, 34, 114, 0.06);
	transition: background 0.35s, color 0.35s, transform 0.35s, box-shadow 0.35s;
}

/* Ícone traçado (Lucide) - herda a cor do .icone pelo currentColor */

.boxComoFunciona .listaPassos .topoCard .icone svg {
	display: block;
	width: 22px;
	height: 22px;
}

.boxComoFunciona .listaPassos li .cardSoft:hover .topoCard .icone {
	background: linear-gradient(150deg, #FF6C58 0%, #FE2A67 100%);
	color: var(--accent-foreground);
	transform: rotate(-6deg) scale(1.06);
	box-shadow: 0 12px 22px -12px rgba(254, 42, 103, 0.8);
}

.boxComoFunciona .listaPassos .topoCard .numeroPasso {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(63, 34, 114, 0.22);
	transition: color 0.35s;
}

.boxComoFunciona .listaPassos li .cardSoft:hover .topoCard .numeroPasso {
	color: rgba(63, 34, 114, 0.4);
}

/* O corpo absorve a sobra de altura e é isso que alinha o rodapé dos passos */

.boxComoFunciona .listaPassos .corpoCard {
	flex: 1 1 auto;
}

.boxComoFunciona .listaPassos li h3 {
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
	color: var(--primary);
	margin: 20px 0 0 0;
}

.boxComoFunciona .listaPassos li p {
	font-size: 14px;
	line-height: 22px;
	color: var(--muted-foreground);
	margin: 8px 0 0 0;
}

/* Rodapé do card (de quem é o trabalho neste passo) */

.boxComoFunciona .listaPassos .rodapeCard {
	display: flex;
	align-items: center;
	border-top: solid 1px rgba(63, 34, 114, 0.08);
	padding: 16px 0 0 0;
	margin: 20px 0 0 0;
}

.boxComoFunciona .listaPassos .rodapeCard .tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 9999px;
	background: var(--secondary);
	padding: 5px 12px;
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--primary);
	transition: background 0.35s;
}

.boxComoFunciona .listaPassos li .cardSoft:hover .rodapeCard .tag {
	background: #E6DEF8;
}

.boxComoFunciona .listaPassos .rodapeCard .tag .ponto {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 9999px;
	background: var(--accent);
}

/* Setas nas laterais do slider (aparecem só no desktop - no mobile é arrastando) */

.boxComoFunciona .setaCarrossel {
	position: absolute;
	/* Centraliza pela altura dos cards, e não do slider: as duas sobras que
	   abrem a folga do hover entram na conta com sinais opostos, senão a seta
	   desce um pouco em relação ao meio do card */
	top: calc((100% + var(--sobraTopo) - var(--sobraSombra)) / 2);
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 9999px;
	background: var(--card);
	color: var(--primary);
	box-shadow: 0 0 0 1px rgba(63, 34, 114, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	transition: all 0.2s linear;
	cursor: pointer;
	z-index: 2;
}

.boxComoFunciona .setaCarrossel i {
	font-size: 15px;
	color: var(--primary);
}

.boxComoFunciona .setaCarrossel:hover {
	transform: translateY(-50%) scale(1.1);
	background: var(--accent);
}

.boxComoFunciona .setaCarrossel:hover i {
	color: var(--accent-foreground);
}

/* Ficam fora dos cards, na folga que sobra ao lado do container */

.boxComoFunciona .setaCarrossel.prev {
	left: -58px;
}

.boxComoFunciona .setaCarrossel.next {
	right: -58px;
}

/* Estados controlados pelo slick */

.boxComoFunciona .setaCarrossel.slick-disabled {
	opacity: 0;
	cursor: not-allowed;
	pointer-events: none;
}

.boxComoFunciona .setaCarrossel.slick-hidden {
	display: none;
}

/*********************************************
** Resultados
*********************************************/

/* Esta seção é uma FAIXA, e é de propósito: as vizinhas são todas no fundo
   claro da página, então aqui o lilás precisa começar e terminar com borda
   nítida (nada de degradê morrendo nas pontas, que era o que fazia a emenda
   com o "Como funciona" desaparecer). O contorno tem três partes:

   - o lilás mais fechado, escurecendo um pouco no meio da faixa;
   - o fio fino em accent na borda de cima (o ::before), que marca onde a
     faixa começa;
   - o fio discreto em roxo nas duas bordas, que fecha o retângulo. */

.boxResultados {
	width: 100%;
	position: relative;
	overflow: hidden;
	padding: 80px 0;
	border-top: solid 1px rgba(63, 34, 114, 0.1);
	border-bottom: solid 1px rgba(63, 34, 114, 0.1);
	background:
		radial-gradient(110% 70% at 50% 0%, rgba(254, 42, 103, 0.07) 0%, transparent 62%),
		linear-gradient(180deg, #F0EBFA 0%, #E6DFF7 55%, #EFEAFA 100%);
}

/* Fio em accent na emenda de cima, esmaecendo nas laterais para não virar
   uma régua atravessada na tela */

.boxResultados::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, transparent, rgba(255, 108, 88, 0.5) 22%, rgba(254, 42, 103, 0.75) 50%, rgba(255, 108, 88, 0.5) 78%, transparent);
	z-index: 2;
	pointer-events: none;
}

/* Fundo em paralaxe (mesma mecânica da seção Como Funciona: as camadas
   ficam atrás do conteúdo e o scripts.js desloca cada uma em uma
   velocidade, conforme o data-paralax escrito no home.php).

   Nada de transition nas peças: o transform é reescrito quadro a quadro e
   a transição brigaria com o movimento. */

.boxResultados .fundoParalax {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}

.boxResultados .container {
	position: relative;
	z-index: 1;
}

/* As camadas sobram para fora da seção em cima e embaixo para poderem subir
   e descer sem que a borda entre na área visível */

/* Aqui a trama é de PONTOS, e não de linhas como no "Como funciona": as duas
   seções ficam vizinhas e é essa diferença de textura que ajuda a separar
   uma da outra de longe */

.boxResultados .fundoParalax .grade {
	position: absolute;
	top: -45%;
	right: 0;
	bottom: -45%;
	left: 0;
	background-image: radial-gradient(rgba(63, 34, 114, 0.16) 1.5px, transparent 1.5px);
	background-size: 26px 26px;
	/* A trama se dissolve nas bordas para os pontos não encostarem no fio */
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 12%, transparent 76%);
	mask-image: radial-gradient(ellipse at 50% 50%, #000 12%, transparent 76%);
	will-change: transform;
}

/* Manchas de luz. O blur é pintado uma vez e depois só o transform muda,
   então o navegador não refaz o desfoque a cada quadro */

.boxResultados .fundoParalax .bolha {
	position: absolute;
	border-radius: 9999px;
	filter: blur(100px);
	will-change: transform;
}

.boxResultados .fundoParalax .bolhaEsquerda {
	top: 40px;
	left: -160px;
	width: 480px;
	height: 380px;
	background: rgba(63, 34, 114, 0.14);
}

.boxResultados .fundoParalax .bolhaDireita {
	right: -180px;
	bottom: -40px;
	width: 540px;
	height: 420px;
	background: rgba(237, 51, 69, 0.11);
}

.boxResultados .fundoParalax .bolhaTopo {
	top: -80px;
	left: 42%;
	width: 360px;
	height: 300px;
	background: rgba(254, 42, 103, 0.09);
}

/* Anéis finos: dão profundidade sem pesar como as manchas, já que são só
   borda e não custam desfoque nenhum */

.boxResultados .fundoParalax .anel {
	position: absolute;
	border-radius: 9999px;
	border: solid 1px rgba(63, 34, 114, 0.08);
	will-change: transform;
}

.boxResultados .fundoParalax .anelDireito {
	top: -120px;
	right: -140px;
	width: 420px;
	height: 420px;
}

.boxResultados .fundoParalax .anelEsquerdo {
	bottom: -180px;
	left: -100px;
	width: 340px;
	height: 340px;
	border-color: rgba(237, 51, 69, 0.09);
}

/* O título e os blocos também caminham, um pouco menos que a página, e é
   essa diferença que separa o conteúdo do fundo */

.boxResultados .cabecalhoSecao,
.boxResultados .listaResultados,
.boxResultados .boxCustoBeneficio {
	will-change: transform;
}

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

	.boxResultados .fundoParalax .grade,
	.boxResultados .fundoParalax .bolha,
	.boxResultados .fundoParalax .anel,
	.boxResultados .cabecalhoSecao,
	.boxResultados .listaResultados,
	.boxResultados .boxCustoBeneficio {
		will-change: auto;
	}

}

/* Cards */

.boxResultados .listaResultados {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 0;
	margin: 48px 0 0 0;
}

.boxResultados .listaResultados li {
	list-style: none;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 28px;
	/* Degradê bem de leve para o card não ficar branco chapado */
	background: linear-gradient(170deg, #FFFFFF 0%, #FCFBFE 60%, #F7F4FD 100%);
	/* A lista de transições traz as duas coisas juntas porque esta regra
	   sobrescreve a do [data-revela]: opacity e translate são a entrada do
	   card (com o atraso em escada) e o resto é o hover, que tem de responder
	   na hora - por isso o transition-delay zera só para essas */
	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),
		transform 0.35s,
		box-shadow 0.35s,
		border-color 0.35s;
	transition-delay: var(--atrasoRevela, 0s), var(--atrasoRevela, 0s), 0s, 0s, 0s;
}

/* Fio de luz no topo do card: nasce do meio e abre no hover */

.boxResultados .listaResultados li::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.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Brilho que acende atrás do ícone no hover */

.boxResultados .listaResultados li .brilhoCard {
	position: absolute;
	top: -90px;
	left: -70px;
	width: 240px;
	height: 240px;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(254, 42, 103, 0.18) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
}

.boxResultados .listaResultados li:hover {
	transform: translateY(-6px);
	border-color: rgba(63, 34, 114, 0.16);
	box-shadow: 0 22px 45px -25px rgba(63, 34, 114, 0.45);
}

.boxResultados .listaResultados li:hover::before {
	transform: scaleX(1);
}

.boxResultados .listaResultados li:hover .brilhoCard {
	opacity: 1;
}

/* Topo do card (ícone + número), no mesmo desenho dos passos */

.boxResultados .listaResultados .topoCard {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.boxResultados .listaResultados .topoCard .icone {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius2xl);
	background: linear-gradient(150deg, var(--secondary) 0%, #E6DEF8 100%);
	color: var(--primary);
	box-shadow: inset 0 0 0 1px rgba(63, 34, 114, 0.06);
	transition: background 0.35s, color 0.35s, transform 0.35s, box-shadow 0.35s;
}

/* Ícone traçado (Lucide) - herda a cor do .icone pelo currentColor */

.boxResultados .listaResultados .topoCard .icone svg {
	display: block;
	width: 24px;
	height: 24px;
}

.boxResultados .listaResultados li:hover .topoCard .icone {
	background: linear-gradient(150deg, #FF6C58 0%, #FE2A67 100%);
	color: var(--accent-foreground);
	transform: rotate(-6deg) scale(1.06);
	box-shadow: 0 12px 22px -12px rgba(254, 42, 103, 0.8);
}

.boxResultados .listaResultados .topoCard .numeroResultado {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(63, 34, 114, 0.22);
	transition: color 0.35s;
}

.boxResultados .listaResultados li:hover .topoCard .numeroResultado {
	color: rgba(63, 34, 114, 0.4);
}

.boxResultados .listaResultados li h3 {
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
	color: var(--primary);
	margin: 22px 0 0 0;
}

/* O corpo é que absorve a sobra de altura, e é isso que deixa o rodapé dos
   três cards na mesma linha mesmo com textos de tamanhos diferentes */

.boxResultados .listaResultados .corpoCard {
	flex: 1 1 auto;
}

.boxResultados .listaResultados li p {
	font-size: 14px;
	line-height: 22px;
	color: var(--muted-foreground);
	margin: 10px 0 0 0;
}

/* Fonte da pesquisa, logo embaixo do texto que a cita */

/* A linha da fonte da pesquisa é o menor texto do card (11px), então ela não
   tem folga para andar transparente: a 85% dava 3,64:1 contra o card claro.
   Em cor cheia dá 4,9:1 e continua sendo o texto mais discreto do bloco. */

.boxResultados .listaResultados .corpoCard .fonte {
	display: block;
	font-size: 11px;
	line-height: 16px;
	color: var(--muted-foreground);
	margin: 8px 0 0 0;
}

/* O número da pesquisa em destaque dentro do texto */

.boxResultados .listaResultados li p strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--accentTexto);
}

/* Rodapé do card (tag + fonte) */

.boxResultados .listaResultados .rodapeCard {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	border-top: solid 1px rgba(63, 34, 114, 0.08);
	padding: 16px 0 0 0;
	margin: 20px 0 0 0;
}

.boxResultados .listaResultados .rodapeCard .tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 9999px;
	background: var(--secondary);
	padding: 5px 12px;
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--primary);
	transition: background 0.35s;
}

.boxResultados .listaResultados li:hover .rodapeCard .tag {
	background: #E6DEF8;
}

.boxResultados .listaResultados .rodapeCard .tag .ponto {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 9999px;
	background: var(--accent);
}

/* Destaque Custo-Benefício */

.boxResultados .boxCustoBeneficio {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 32px;
	overflow: hidden;
	border-radius: 24px;
	padding: 36px;
	margin-top: 24px;
	box-shadow: 0 30px 60px -40px rgba(37, 11, 76, 0.9);
}

/* Manchas de luz dentro do bloco escuro: ficam nos cantos e dão o volume
   que o degradê sozinho não dá */

.boxResultados .boxCustoBeneficio .brilhoBloco {
	position: absolute;
	border-radius: 9999px;
	filter: blur(80px);
	pointer-events: none;
}

.boxResultados .boxCustoBeneficio .brilhoUm {
	top: -120px;
	left: 18%;
	width: 320px;
	height: 260px;
	background: rgba(254, 42, 103, 0.3);
}

.boxResultados .boxCustoBeneficio .brilhoDois {
	right: -80px;
	bottom: -140px;
	width: 340px;
	height: 280px;
	background: rgba(116, 6, 92, 0.55);
}

.boxResultados .boxCustoBeneficio .textos {
	position: relative;
	z-index: 1;
	max-width: 672px;
}

.boxResultados .boxCustoBeneficio h3 {
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	color: var(--primary-foreground);
	margin: 18px 0 0 0;
}

.boxResultados .boxCustoBeneficio p {
	font-size: 14px;
	line-height: 24px;
	color: rgba(250, 249, 253, 0.75);
	margin: 14px 0 0 0;
}

/* Painel da conta: o custo da permuta escrito como um recibo */

/* O max-width só vale quando o painel está embaixo do texto (abaixo de
   1024px): na coluna de 320px do desktop ele não muda nada, e sem ele as
   linhas do recibo ficariam esticadas de ponta a ponta do bloco */

.boxResultados .boxCustoBeneficio .painelConta {
	position: relative;
	z-index: 1;
	max-width: 420px;
	border: solid 1px rgba(250, 249, 253, 0.16);
	border-radius: var(--radius);
	background: rgba(250, 249, 253, 0.07);
	padding: 22px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.boxResultados .boxCustoBeneficio .painelConta .tituloConta {
	display: block;
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(250, 249, 253, 0.72);
}

.boxResultados .boxCustoBeneficio .painelConta ul {
	padding: 0;
	margin: 16px 0 0 0;
}

.boxResultados .boxCustoBeneficio .painelConta ul li {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
}

.boxResultados .boxCustoBeneficio .painelConta ul li .rotulo {
	font-size: 14px;
	line-height: 20px;
	color: var(--primary-foreground);
}

/* O sinal (+ e =) fica em uma bolinha, alinhado na coluna da direita */

.boxResultados .boxCustoBeneficio .painelConta ul li .sinal {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border-radius: 9999px;
	background: rgba(250, 249, 253, 0.12);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--primary-foreground);
}

.boxResultados .boxCustoBeneficio .painelConta .totalConta {
	border-top: solid 1px rgba(250, 249, 253, 0.16);
	padding: 16px 0 0 0;
	margin: 8px 0 0 0;
}

.boxResultados .boxCustoBeneficio .painelConta .totalConta .rotulo {
	display: block;
	font-size: 11px;
	line-height: 16px;
	color: rgba(250, 249, 253, 0.72);
}

.boxResultados .boxCustoBeneficio .painelConta .totalConta strong {
	display: block;
	font-size: 22px;
	line-height: 30px;
	font-weight: 800;
	margin: 4px 0 0 0;
}

/*********************************************
** Conteúdos (UGC)
*********************************************/

.boxConteudos {
	width: 100%;
	position: relative;
	overflow: hidden;
	padding: 80px 0;
}

/* Fundo em paralaxe (mesma mecânica das seções Como Funciona e Resultados:
   as camadas ficam atrás do conteúdo e o scripts.js desloca cada uma em uma
   velocidade, conforme o data-paralax escrito no home.php).

   Nada de transition nas peças: o transform é reescrito quadro a quadro e a
   transição brigaria com o movimento.

   Sem paralaxe (ou com menos animação no sistema) as peças ficam paradas na
   posição de partida, que já é a do meio do percurso - a seção continua
   inteira, só sem o movimento. */

.boxConteudos .fundoParalax {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}

.boxConteudos .container {
	position: relative;
	z-index: 1;
}

/* As camadas sobram para fora da seção em cima e embaixo para poderem subir
   e descer sem que a borda entre na área visível */

/* Aqui a trama é DIAGONAL: no "Como funciona" ela é de linhas retas e nos
   "Resultados" é de pontos. As três seções vêm uma atrás da outra e é essa
   diferença de textura que separa uma da outra de longe. */

.boxConteudos .fundoParalax .grade {
	position: absolute;
	top: -45%;
	right: 0;
	bottom: -45%;
	left: 0;
	background-image: repeating-linear-gradient(135deg, rgba(63, 34, 114, 0.07) 0px, rgba(63, 34, 114, 0.07) 1px, transparent 1px, transparent 15px);
	/* A trama se dissolve nas bordas para não marcar onde a seção termina */
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 8%, transparent 72%);
	mask-image: radial-gradient(ellipse at 50% 50%, #000 8%, transparent 72%);
	will-change: transform;
}

/* Manchas de luz. O blur é pintado uma vez e depois só o transform muda,
   então o navegador não refaz o desfoque a cada quadro */

.boxConteudos .fundoParalax .bolha {
	position: absolute;
	border-radius: 9999px;
	filter: blur(95px);
	will-change: transform;
}

.boxConteudos .fundoParalax .bolhaEsquerda {
	top: -20px;
	left: -140px;
	width: 470px;
	height: 380px;
	background: rgba(63, 34, 114, 0.15);
}

.boxConteudos .fundoParalax .bolhaDireita {
	right: -160px;
	bottom: -60px;
	width: 520px;
	height: 400px;
	background: rgba(237, 51, 69, 0.12);
}

/* Retângulos vazados na proporção 9/16, a mesma dos reels: é o formato do
   conteúdo da seção ecoando no fundo. São só borda, então não custam
   desfoque nenhum - o mesmo papel dos anéis lá dos Resultados.

   A inclinação vem da propriedade rotate, e não do transform, de propósito:
   o paralaxe escreve transform nesta mesma tag, e as duas propriedades se
   somam em vez de uma apagar a outra. */

.boxConteudos .fundoParalax .quadro {
	position: absolute;
	aspect-ratio: 9 / 16;
	border: solid 1px rgba(63, 34, 114, 0.08);
	border-radius: 28px;
	will-change: transform;
}

.boxConteudos .fundoParalax .quadroEsquerdo {
	top: -110px;
	left: 3%;
	width: 190px;
	rotate: -8deg;
}

.boxConteudos .fundoParalax .quadroDireito {
	right: 4%;
	bottom: -150px;
	width: 230px;
	rotate: 10deg;
	border-color: rgba(237, 51, 69, 0.1);
}

/* O título e a lista também caminham, um pouco menos que a página, e é essa
   diferença que separa o conteúdo do fundo */

.boxConteudos .cabecalhoSecao,
.boxConteudos .listaReels {
	will-change: transform;
}

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

	.boxConteudos .fundoParalax .grade,
	.boxConteudos .fundoParalax .bolha,
	.boxConteudos .fundoParalax .quadro,
	.boxConteudos .cabecalhoSecao,
	.boxConteudos .listaReels {
		will-change: auto;
	}

}

/* Cards */

.boxConteudos .listaReels {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 0;
	margin: 48px 0 0 0;
}

.boxConteudos .listaReels li {
	list-style: none;
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	background: rgba(63, 34, 114, 0.9);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	/* A lista de transições traz as duas coisas juntas porque esta regra
	   sobrescreve a do [data-revela]: opacity e translate são a entrada do
	   card (com o atraso em escada) e o resto é o hover, que tem de responder
	   na hora - por isso o transition-delay zera só para essas */
	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),
		transform 0.35s,
		box-shadow 0.35s;
	transition-delay: var(--atrasoRevela, 0s), var(--atrasoRevela, 0s), 0s, 0s;
}

/* Fio de luz no topo do card: nasce do meio e abre no hover, igual ao dos
   passos e dos resultados. Fica acima do vídeo, que ocupa o card inteiro. */

.boxConteudos .listaReels li::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.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	z-index: 3;
	pointer-events: none;
}

/* Contorno que acende no hover. Nos outros cards quem faz esse papel é o
   brilho atrás do ícone; aqui o vídeo cobre o card todo e um brilho por
   baixo não apareceria, então a luz vem pela borda. */

.boxConteudos .listaReels li::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: solid 1px rgba(254, 42, 103, 0.55);
	border-radius: 28px;
	opacity: 0;
	transition: opacity 0.4s;
	z-index: 3;
	pointer-events: none;
}

.boxConteudos .listaReels li:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 45px -22px rgba(63, 34, 114, 0.55);
}

.boxConteudos .listaReels li:hover::before {
	transform: scaleX(1);
}

.boxConteudos .listaReels li:hover::after {
	opacity: 1;
}

.boxConteudos .listaReels .videoReel {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	cursor: pointer;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* O quadro parado se aproxima de leve no hover (o overflow do card corta a
   sobra). Enquanto o vídeo toca fica quieto: aí quem manda na tela é o
   conteúdo, e uma imagem crescendo por baixo só atrapalharia. */

.boxConteudos .listaReels li:not(.tocando):hover .videoReel {
	transform: scale(1.04);
}

/* Botão de Play */

.boxConteudos .listaReels .botaoPlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
	transition: opacity 0.2s linear;
	z-index: 2;
}

.boxConteudos .listaReels .botaoPlay span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 9999px;
	background: rgba(237, 51, 69, 0.95);
	color: var(--accent-foreground);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	/* A curva passa um pouquinho do ponto e volta: é o "pop" do botão */
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s;
}

.boxConteudos .listaReels .botaoPlay span i {
	font-size: 22px;
	color: var(--accent-foreground);
	margin-left: 3px;
}

.boxConteudos .listaReels li:hover .botaoPlay span {
	transform: scale(1.1);
	box-shadow: 0 18px 30px -10px rgba(254, 42, 103, 0.65);
}

/* Esconde o play quando o vídeo está tocando */

.boxConteudos .listaReels li.tocando .botaoPlay {
	opacity: 0;
}

/* Botão de Som */

.boxConteudos .listaReels .botaoSom {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 9999px;
	background: rgba(63, 34, 114, 0.6);
	color: var(--primary-foreground);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background-color 0.2s linear, transform 0.2s linear;
	cursor: pointer;
	z-index: 4;
}

.boxConteudos .listaReels .botaoSom:hover {
	background: rgba(63, 34, 114, 0.8);
	transform: scale(1.08);
}

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

/* Legenda */

.boxConteudos .listaReels .legendaReel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 48px 20px 20px 20px;
	background: linear-gradient(to top, #3F2272, transparent);
	pointer-events: none;
	z-index: 3;
}

.boxConteudos .listaReels .legendaReel .perfil {
	display: inline-block;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--primary-foreground);
	filter: blur(4px);
	user-select: none;
}

/* O nicho é a tag do card, no mesmo desenho das tags dos passos e dos
   resultados - só que em vidro escuro, porque o fundo dela aqui é o vídeo */

.boxConteudos .listaReels .legendaReel .tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 10px 0 0 0;
	border: solid 1px rgba(250, 249, 253, 0.2);
	border-radius: 9999px;
	background: rgba(37, 11, 76, 0.45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	padding: 5px 12px;
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(250, 249, 253, 0.85);
	transition: background-color 0.35s, border-color 0.35s;
}

.boxConteudos .listaReels .legendaReel .tag .ponto {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 9999px;
	background: var(--accent);
}

.boxConteudos .listaReels li:hover .legendaReel .tag {
	background: rgba(37, 11, 76, 0.6);
	border-color: rgba(254, 42, 103, 0.45);
}

/*********************************************
** Planos
*********************************************/

/* Esta seção é uma FAIXA ESCURA, e é de propósito: as vizinhas são claras
   (os Conteúdos em cima, as Perguntas embaixo), então a página alterna claro
   e escuro e os planos caem no degrau mais forte da rolagem inteira.

   O roxo é o mesmo do .surfaceInk do banner, só que aqui ele fecha um pouco
   no fim da faixa e ganha um clarão em accent no topo - é o que dá a
   impressão de luz caindo de cima nos cards. */

.boxPlanos {
	width: 100%;
	position: relative;
	overflow: hidden;
	padding: 80px 0;
	background:
		radial-gradient(120% 75% at 50% 0%, rgba(254, 42, 103, 0.16) 0%, transparent 62%),
		linear-gradient(180deg, #2B0D53 0%, #3A1266 52%, #200A44 100%);
}

/* Fio em accent na emenda de cima, esmaecendo nas laterais, igual ao da
   faixa dos Resultados: é ele que marca onde a faixa começa */

.boxPlanos::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, transparent, rgba(255, 108, 88, 0.5) 22%, rgba(254, 42, 103, 0.75) 50%, rgba(255, 108, 88, 0.5) 78%, transparent);
	z-index: 2;
	pointer-events: none;
}

/* Fundo em paralaxe (mesma mecânica das outras seções: as camadas ficam
   atrás do conteúdo e o scripts.js desloca cada uma em uma velocidade,
   conforme o data-paralax escrito no home.php).

   A diferença aqui é que o fundo é escuro, então as camadas são de LUZ e não
   de sombra: a trama é clara e as manchas acendem em vez de escurecer.

   Nada de transition nas peças: o transform é reescrito quadro a quadro e a
   transição brigaria com o movimento.

   Sem paralaxe (ou com menos animação no sistema) as peças ficam paradas na
   posição de partida, que já é a do meio do percurso - a seção continua
   inteira, só sem o movimento. */

.boxPlanos .fundoParalax {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}

.boxPlanos .container {
	position: relative;
	z-index: 1;
}

/* As camadas sobram para fora da seção em cima e embaixo para poderem subir
   e descer sem que a borda entre na área visível */

/* Aqui a trama é de COLUNAS: linhas retas no "Como funciona", pontos nos
   "Resultados", hachura diagonal nos "Conteúdos" e, nesta, só os fios em pé -
   as mesmas quatro colunas dos planos ecoando no fundo. */

.boxPlanos .fundoParalax .grade {
	position: absolute;
	top: -45%;
	right: 0;
	bottom: -45%;
	left: 0;
	background-image: linear-gradient(to right, rgba(250, 249, 253, 0.07) 1px, transparent 1px);
	background-size: 72px 100%;
	/* A trama se dissolve nas bordas para não marcar onde a seção termina */
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 6%, transparent 74%);
	mask-image: radial-gradient(ellipse at 50% 50%, #000 6%, transparent 74%);
	will-change: transform;
}

/* O holofote: a luz desce do topo bem em cima do plano em destaque, que é o
   terceiro dos quatro. É um degradê e nada mais - sem desfoque para pesar */

.boxPlanos .fundoParalax .facho {
	position: absolute;
	top: -20%;
	left: 62%;
	width: 720px;
	height: 90%;
	translate: -50% 0;
	background: radial-gradient(60% 50% at 50% 0%, rgba(255, 108, 88, 0.2) 0%, rgba(254, 42, 103, 0.08) 45%, transparent 72%);
	will-change: transform;
}

/* Manchas de luz. O blur é pintado uma vez e depois só o transform muda,
   então o navegador não refaz o desfoque a cada quadro */

.boxPlanos .fundoParalax .bolha {
	position: absolute;
	border-radius: 9999px;
	filter: blur(100px);
	will-change: transform;
}

.boxPlanos .fundoParalax .bolhaEsquerda {
	top: 20px;
	left: -170px;
	width: 480px;
	height: 380px;
	background: rgba(116, 6, 92, 0.55);
}

.boxPlanos .fundoParalax .bolhaDireita {
	right: -170px;
	bottom: -70px;
	width: 500px;
	height: 400px;
	background: rgba(254, 42, 103, 0.18);
}

/* O título e a lista também caminham, um pouco menos que a página, e é essa
   diferença que separa o conteúdo do fundo */

.boxPlanos .cabecalhoSecao,
.boxPlanos .listaPlanos {
	will-change: transform;
}

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

	.boxPlanos .fundoParalax .grade,
	.boxPlanos .fundoParalax .facho,
	.boxPlanos .fundoParalax .bolha,
	.boxPlanos .cabecalhoSecao,
	.boxPlanos .listaPlanos {
		will-change: auto;
	}

}

/* A etiqueta abre em um accent mais claro: o vermelho de sempre, em cima do
   roxo fechado da faixa, quase some */

.boxPlanos .etiquetaSecao {
	color: #FF6C58;
}

/* Cards */

.boxPlanos .listaPlanos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 0;
	margin: 48px 0 0 0;
}

.boxPlanos .listaPlanos > li {
	list-style: none;
	position: relative;
	padding: 32px;
	display: flex;
	flex-direction: column;
	/* A lista de transições traz as duas coisas juntas porque esta regra
	   sobrescreve a do [data-revela]: opacity e translate são a entrada do
	   card (com o atraso em escada) e o resto é o hover, que tem de responder
	   na hora - por isso o transition-delay zera só para essas */
	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),
		transform 0.3s,
		box-shadow 0.3s,
		border-color 0.3s,
		background-color 0.3s;
	transition-delay: var(--atrasoRevela, 0s), var(--atrasoRevela, 0s), 0s, 0s, 0s, 0s;
}

/* Os três planos comuns são vidro sobre a faixa: translúcidos, para o roxo e
   as manchas do fundo passarem por dentro deles.

   Sem backdrop-filter de propósito: são quatro cards grandes e o fundo atrás
   deles se mexe com a rolagem, então o desfoque teria de ser refeito a cada
   quadro - a translucidez sozinha já dá o efeito e não custa nada. */

.boxPlanos .listaPlanos > li.planoVidro {
	border: solid 1px rgba(250, 249, 253, 0.14);
	border-radius: 24px;
	background: rgba(250, 249, 253, 0.06);
}

/* Fio de luz no topo do card, igual ao dos passos e dos resultados. Aqui ele
   entra pelas laterais, e não de canto a canto: o card não tem overflow
   hidden (o selo precisa passar por cima da borda), então um fio da largura
   inteira sairia dos cantos arredondados. */

.boxPlanos .listaPlanos > li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 32px;
	right: 32px;
	height: 2px;
	border-radius: 9999px;
	background: linear-gradient(90deg, transparent, #FF6C58, #FE2A67, transparent);
	transform: scaleX(0);
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
}

/* Brilho que acende no hover. Cobre o card inteiro e traz o próprio raio de
   canto, então o degradê não escapa pelas quinas arredondadas - é isso que
   dispensa o overflow hidden aqui. */

.boxPlanos .listaPlanos > li .brilhoCard {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
	background: radial-gradient(420px 260px at 50% 0%, rgba(255, 108, 88, 0.2) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
}

/* Elevação ao passar o mouse */

.boxPlanos .listaPlanos > li:hover {
	transform: translateY(-8px);
	box-shadow: 0 22px 40px -16px rgba(0, 0, 0, 0.45);
}

.boxPlanos .listaPlanos > li.planoVidro:hover {
	border-color: rgba(250, 249, 253, 0.3);
	background: rgba(250, 249, 253, 0.1);
}

.boxPlanos .listaPlanos > li:hover::before {
	transform: scaleX(1);
}

.boxPlanos .listaPlanos > li:hover .brilhoCard {
	opacity: 1;
}

/* Plano em destaque (Semestral) */

/* Aqui ele é o card CLARO em cima da faixa escura: é o que mais destoa do
   fundo, e por isso é o primeiro que o olho pega. O fio do topo já nasce
   aceso e o halo em accent fica sempre ligado - ele não depende do mouse
   passar por cima para se destacar. */

.boxPlanos .listaPlanos > li.planoDestaque {
	box-shadow: 0 24px 45px -18px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(254, 42, 103, 0.2);
}

.boxPlanos .listaPlanos > li.planoDestaque::before {
	transform: scaleX(1);
}

/* No card claro o brilho volta a ser o rosa do resto do tema: o alaranjado
   dos cards de vidro só funciona em cima do escuro */

.boxPlanos .listaPlanos > li.planoDestaque .brilhoCard {
	background: radial-gradient(420px 260px at 50% 0%, rgba(254, 42, 103, 0.13) 0%, transparent 70%);
}

.boxPlanos .listaPlanos > li.planoDestaque:hover {
	border-color: rgba(254, 42, 103, 0.45);
	box-shadow: 0 30px 55px -18px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(254, 42, 103, 0.3);
}

/* Selo */

.boxPlanos .listaPlanos .seloPlano {
	position: absolute;
	top: -12px;
	right: 32px;
	border-radius: 9999px;
	padding: 4px 12px;
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
	transition: box-shadow 0.3s;
}

/* O selo claro é o dos cards de vidro: o roxo do tema, em cima da faixa
   escura, não teria contraste nenhum */

.boxPlanos .listaPlanos .seloPlano.claro {
	background: rgba(250, 249, 253, 0.92);
	color: var(--primary);
}

.boxPlanos .listaPlanos .seloPlano.accent {
	background: var(--accentTexto);
	color: var(--accent-foreground);
}

.boxPlanos .listaPlanos > li:hover .seloPlano.accent {
	box-shadow: 0 10px 20px -8px rgba(254, 42, 103, 0.8);
}

/* Nome do plano */

.boxPlanos .listaPlanos li h3 {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: rgba(250, 249, 253, 0.7);
	margin: 0;
}

.boxPlanos .listaPlanos li.planoDestaque h3 {
	color: var(--muted-foreground);
}

/* Preço */

.boxPlanos .listaPlanos li .preco {
	font-size: 36px;
	line-height: 40px;
	font-weight: 800;
	color: var(--primary-foreground);
	margin: 12px 0 0 0;
}

.boxPlanos .listaPlanos li.planoDestaque .preco {
	color: var(--primary);
}

.boxPlanos .listaPlanos li .preco .periodo {
	font-size: 14px;
	font-weight: 500;
	color: rgba(250, 249, 253, 0.72);
}

.boxPlanos .listaPlanos li.planoDestaque .preco .periodo {
	color: var(--muted-foreground);
}

/* Comparação com o mensal, logo embaixo do preço.
   No mesmo desenho das tags dos passos e dos resultados, com o ponto em
   accent na frente - só que aqui ela vale como leitura do preço, e não como
   rodapé do card. O align-self trava a largura no texto: sem ele a tag
   esticaria na coluna inteira, porque o card é um flex vertical. */

.boxPlanos .listaPlanos li .economia {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 7px;
	border: solid 1px rgba(250, 249, 253, 0.2);
	border-radius: 9999px;
	background: rgba(37, 11, 76, 0.45);
	padding: 5px 12px;
	margin: 12px 0 0 0;
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(250, 249, 253, 0.85);
	transition: background-color 0.35s, border-color 0.35s;
}

.boxPlanos .listaPlanos li .economia .ponto {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 9999px;
	background: var(--accent);
}

.boxPlanos .listaPlanos > li:hover .economia {
	background: rgba(37, 11, 76, 0.6);
	border-color: rgba(254, 42, 103, 0.45);
}

/* No card claro a mesma tag vira lilás, como nos passos e nos resultados */

.boxPlanos .listaPlanos li.planoDestaque .economia {
	border-color: transparent;
	background: var(--secondary);
	color: var(--primary);
}

.boxPlanos .listaPlanos > li.planoDestaque:hover .economia {
	border-color: transparent;
	background: #E6DEF8;
}

/* Itens do plano */

.boxPlanos .listaPlanos .listaItens {
	padding: 0;
	margin: 28px 0 0 0;
	flex: 1;
}

.boxPlanos .listaPlanos .listaItens li {
	list-style: none;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 0;
	font-size: 14px;
	line-height: 22px;
	color: rgba(250, 249, 253, 0.85);
}

.boxPlanos .listaPlanos .listaItens li + li {
	margin-top: 12px;
}

.boxPlanos .listaPlanos li.planoDestaque .listaItens li {
	color: var(--muted-foreground);
}

/* O visto abre em accent claro nos cards de vidro e volta ao accent do tema
   no card claro: é a mesma marca, calibrada para cada fundo */

.boxPlanos .listaPlanos .listaItens li i {
	flex-shrink: 0;
	width: 16px;
	font-size: 13px;
	line-height: 22px;
	text-align: center;
	color: #FF6C58;
	transition: transform 0.3s;
}

.boxPlanos .listaPlanos li.planoDestaque .listaItens li i {
	color: var(--accent);
}

/* Os vistos avançam um passo quando o mouse entra no card */

.boxPlanos .listaPlanos > li:hover .listaItens li i {
	transform: translateX(2px);
}

/* Botão do plano */

.boxPlanos .listaPlanos .botaoPlano {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	padding: 12px 24px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	margin-top: 32px;
	transition: transform 0.2s linear, box-shadow 0.3s, background-color 0.2s linear;
}

.boxPlanos .listaPlanos .botaoPlano:hover {
	transform: scale(1.02);
}

/* O botão dos cards de vidro é vidro também: fica claro o suficiente para
   ser um botão de verdade, mas sem competir com o accent do destaque */

.boxPlanos .listaPlanos .botaoPlano.claro {
	border: solid 1px rgba(250, 249, 253, 0.28);
	background: rgba(250, 249, 253, 0.12);
	color: var(--primary-foreground);
}

.boxPlanos .listaPlanos > li:hover .botaoPlano.claro {
	background: rgba(250, 249, 253, 0.2);
}

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

/* A sombra do botão principal cresce junto com o card, não só quando o mouse
   chega no botão: assim o caminho até o clique já vem apontado */

.boxPlanos .listaPlanos > li:hover .botaoPlano.accent {
	box-shadow: 0 16px 30px -10px rgba(254, 42, 103, 0.75);
}

/*********************************************
** Perguntas Frequentes
*********************************************/

/* Faixa clara logo depois do escuro dos Planos: a alternância da página
   continua. O fio embaixo fecha a faixa contra a Chamada Final, que é do
   mesmo tom - em cima não precisa de nada, o corte do escuro já é nítido. */

.boxFaq {
	width: 100%;
	position: relative;
	overflow: hidden;
	padding: 80px 0;
	border-bottom: solid 1px rgba(63, 34, 114, 0.08);
	background: linear-gradient(180deg, #F1EDFA 0%, #EDE8F8 55%, #F4F1FB 100%);
}

/* Fundo em paralaxe (mesma mecânica das outras seções: as camadas ficam
   atrás do conteúdo e o scripts.js desloca cada uma em uma velocidade,
   conforme o data-paralax escrito no home.php).

   Nada de transition nas peças: o transform é reescrito quadro a quadro e a
   transição brigaria com o movimento.

   Sem paralaxe (ou com menos animação no sistema) as peças ficam paradas na
   posição de partida, que já é a do meio do percurso - a seção continua
   inteira, só sem o movimento. */

.boxFaq .fundoParalax {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}

.boxFaq .container {
	position: relative;
	z-index: 1;
}

/* As camadas sobram para fora da seção em cima e embaixo para poderem subir
   e descer sem que a borda entre na área visível */

/* Aqui a trama é de linhas DEITADAS: retas em pé nos "Planos", em cruz no
   "Como funciona", pontos nos "Resultados" e diagonal nos "Conteúdos". São as
   próprias linhas da lista de perguntas ecoando no fundo. */

.boxFaq .fundoParalax .grade {
	position: absolute;
	top: -45%;
	right: 0;
	bottom: -45%;
	left: 0;
	background-image: linear-gradient(to bottom, rgba(63, 34, 114, 0.06) 1px, transparent 1px);
	background-size: 100% 56px;
	/* A trama se dissolve nas bordas para não marcar onde a seção termina */
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 6%, transparent 74%);
	mask-image: radial-gradient(ellipse at 50% 50%, #000 6%, transparent 74%);
	will-change: transform;
}

/* Manchas de luz. O blur é pintado uma vez e depois só o transform muda,
   então o navegador não refaz o desfoque a cada quadro */

.boxFaq .fundoParalax .bolha {
	position: absolute;
	border-radius: 9999px;
	filter: blur(100px);
	will-change: transform;
}

.boxFaq .fundoParalax .bolhaEsquerda {
	top: -30px;
	left: -150px;
	width: 460px;
	height: 360px;
	background: rgba(63, 34, 114, 0.13);
}

.boxFaq .fundoParalax .bolhaDireita {
	right: -160px;
	bottom: -60px;
	width: 480px;
	height: 380px;
	background: rgba(237, 51, 69, 0.1);
}

/* Balões de fala, em contorno só - o mesmo papel dos anéis dos Resultados e
   dos quadros dos Conteúdos, aqui no assunto da seção.

   Três cantos redondos e um quase reto já entregam o desenho de um balão: a
   ponta de verdade, em CSS, só sairia com um remendo por cima da borda.

   A inclinação vem da propriedade rotate, e não do transform, de propósito:
   o paralaxe escreve transform nesta mesma tag, e as duas se somam em vez de
   uma apagar a outra. */

.boxFaq .fundoParalax .balao {
	position: absolute;
	border: solid 1px rgba(63, 34, 114, 0.09);
	will-change: transform;
}

.boxFaq .fundoParalax .balaoEsquerdo {
	top: 70px;
	left: 3%;
	width: 200px;
	height: 130px;
	border-radius: 26px 26px 26px 6px;
	rotate: -6deg;
}

/* Espelhado: a ponta deste vira para o outro lado */

.boxFaq .fundoParalax .balaoDireito {
	right: 4%;
	bottom: 90px;
	width: 240px;
	height: 150px;
	border-radius: 26px 26px 6px 26px;
	border-color: rgba(237, 51, 69, 0.11);
	rotate: 7deg;
}

/* O título e a lista também caminham, um pouco menos que a página, e é essa
   diferença que separa o conteúdo do fundo */

.boxFaq .cabecalhoSecao,
.boxFaq .listaFaq {
	will-change: transform;
}

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

	.boxFaq .fundoParalax .grade,
	.boxFaq .fundoParalax .bolha,
	.boxFaq .fundoParalax .balao,
	.boxFaq .cabecalhoSecao,
	.boxFaq .listaFaq {
		will-change: auto;
	}

}

/* Lista */

.boxFaq .listaFaq {
	padding: 0;
	margin: 40px 0 0 0;
}

.boxFaq .listaFaq li {
	list-style: none;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius2xl);
	border: solid 1px rgba(63, 34, 114, 0.08);
	background: var(--card);
	box-shadow: 0 1px 2px rgba(30, 15, 59, 0.04);
	/* A lista de transições traz as duas coisas juntas porque esta regra
	   sobrescreve a do [data-revela]: opacity e translate são a entrada do
	   item (com o atraso em escada) e o resto é o hover, que tem de responder
	   na hora - por isso o transition-delay zera só para essas */
	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),
		box-shadow 0.35s ease,
		border-color 0.35s ease,
		background 0.35s ease;
	transition-delay: var(--atrasoRevela, 0s), var(--atrasoRevela, 0s), 0s, 0s, 0s;
}

.boxFaq .listaFaq li:hover {
	border-color: rgba(63, 34, 114, 0.16);
	box-shadow: 0 6px 18px rgba(63, 34, 114, 0.08);
}

.boxFaq .listaFaq li.aberto {
	border-color: rgba(254, 42, 103, 0.25);
	box-shadow: 0 10px 28px rgba(63, 34, 114, 0.12);
}

.boxFaq .listaFaq li + li {
	margin-top: 12px;
}

/* Barra de luz na lateral. Nos cards das outras seções essa marca é um fio
   deitado no topo; aqui a linha é larga e baixa, então a luz sobe pela
   esquerda, que é a borda que sobra.

   Ela cresce a partir do meio: no hover aparece pela metade e, com o item
   aberto, toma a altura inteira e vira accent. */

.boxFaq .listaFaq .barraFaq {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: linear-gradient(180deg, #FF6C58, #FE2A67);
	transform: scaleY(0);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
	pointer-events: none;
}

.boxFaq .listaFaq li:hover .barraFaq {
	transform: scaleY(0.45);
	opacity: 0.5;
}

.boxFaq .listaFaq li.aberto .barraFaq {
	transform: scaleY(1);
	opacity: 1;
}

/* Pergunta */

/* A pergunta virou um h3 com o botão dentro (ver templates/home.php). O h3 é
   só o esqueleto do sumário: ele nasce zerado e quem desenha o texto continua
   sendo o span dentro do botão. */

.boxFaq .listaFaq .tituloFaq {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.boxFaq .listaFaq .perguntaFaq {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 24px;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
}

.boxFaq .listaFaq .perguntaFaq span {
	font-size: 15px;
	line-height: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--primary);
	transition: color 0.3s ease;
}

.boxFaq .listaFaq .perguntaFaq:hover span {
	color: var(--foreground);
}

/* A seta gira com uma leve "sobra" no final (efeito de mola) e ganha
   um fundo circular quando o item está aberto ou sob o mouse */

.boxFaq .listaFaq .perguntaFaq i {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 14px;
	color: var(--muted-foreground);
	background: transparent;
	transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.3s ease, color 0.3s ease;
}

.boxFaq .listaFaq .perguntaFaq:hover i {
	color: var(--primary);
	background: var(--muted);
}

/* Resposta (fechada por padrão) */

/* O grid com linha de 0fr -> 1fr permite animar a altura sem precisar
   saber o tamanho do texto; o overflow fica no conteúdo, item do grid */

/* A resposta fechada fica com altura zero e transparente - mas isso some da
   tela sem sumir do leitor de tela, que continuava lendo as seis respostas
   seguidas mesmo com as perguntas fechadas. O visibility resolve, e ele entra
   no transition com atraso igual ao da altura para não cortar o fechamento no
   meio. O texto continua no html, então a busca lê tudo. */

.boxFaq .listaFaq .respostaFaq {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	transition:
		grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.2s ease,
		visibility 0s linear 0.4s;
}

/* O padding vertical fica no parágrafo, nunca no item do grid: padding no
   item entra na altura mínima da linha e sobraria um vão com o item fechado */

.boxFaq .listaFaq .respostaFaq .conteudoFaq {
	overflow: hidden;
	min-height: 0;
	padding: 0 24px;
	transform: translateY(-8px);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.boxFaq .listaFaq .respostaFaq p {
	font-size: 14px;
	line-height: 22px;
	color: var(--muted-foreground);
	margin: 0 0 24px 0;
}

/* Item aberto */

.boxFaq .listaFaq li.aberto .respostaFaq {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition:
		grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.3s ease 0.08s,
		visibility 0s;
}

.boxFaq .listaFaq li.aberto .respostaFaq .conteudoFaq {
	transform: translateY(0);
}

.boxFaq .listaFaq li.aberto .perguntaFaq i {
	transform: rotate(180deg);
	color: var(--accent-foreground);
	background: var(--accentTexto);
}

/* Respeita quem prefere menos animação */

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

	.boxFaq .listaFaq li,
	.boxFaq .listaFaq .barraFaq,
	.boxFaq .listaFaq .perguntaFaq span,
	.boxFaq .listaFaq .perguntaFaq i,
	.boxFaq .listaFaq .respostaFaq,
	.boxFaq .listaFaq .respostaFaq .conteudoFaq {
		transition-duration: 0.01ms;
	}

}

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

/* Mais uma FAIXA ESCURA, pelo mesmo motivo da dos Planos: as Perguntas em
   cima e a Chamada Final embaixo são claras, e a página alterna. Aqui o
   escuro ainda ajuda de outro jeito - as capas dos posts saltam bem mais em
   cima dele do que em cima do lilás.

   O roxo é o mesmo dos Planos, só que virado ao contrário (o mais claro no
   fim, e não no começo): as duas faixas escuras da página não ficam com o
   mesmo desenho de luz. */

.boxBlog {
	width: 100%;
	position: relative;
	overflow: hidden;
	padding: 80px 0;
	background:
		radial-gradient(110% 70% at 50% 100%, rgba(254, 42, 103, 0.14) 0%, transparent 60%),
		linear-gradient(180deg, #200A44 0%, #33115C 55%, #2B0D53 100%);
}

/* Fio em accent na emenda de cima, esmaecendo nas laterais, igual ao das
   outras faixas: é ele que marca onde a faixa começa */

.boxBlog::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, transparent, rgba(255, 108, 88, 0.5) 22%, rgba(254, 42, 103, 0.75) 50%, rgba(255, 108, 88, 0.5) 78%, transparent);
	z-index: 2;
	pointer-events: none;
}

/* Fundo em paralaxe (mesma mecânica das outras seções: as camadas ficam
   atrás do conteúdo e o scripts.js desloca cada uma em uma velocidade,
   conforme o data-paralax escrito no home.php).

   Como o fundo é escuro, as camadas são de LUZ e não de sombra: a trama é
   clara e as manchas acendem em vez de escurecer.

   Nada de transition nas peças: o transform é reescrito quadro a quadro e a
   transição brigaria com o movimento.

   Sem paralaxe (ou com menos animação no sistema) as peças ficam paradas na
   posição de partida, que já é a do meio do percurso - a seção continua
   inteira, só sem o movimento. */

.boxBlog .fundoParalax {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}

.boxBlog .container {
	position: relative;
	z-index: 1;
}

/* As camadas sobram para fora da seção em cima e embaixo para poderem subir
   e descer sem que a borda entre na área visível */

/* Aqui a trama é um XADREZ DIAGONAL, e as vizinhas não repetem nenhuma: em
   cruz no "Como funciona", pontos nos "Resultados", uma diagonal só nos
   "Conteúdos", colunas nos "Planos" e linhas deitadas nas "Perguntas". */

.boxBlog .fundoParalax .grade {
	position: absolute;
	top: -45%;
	right: 0;
	bottom: -45%;
	left: 0;
	background-image:
		repeating-linear-gradient(45deg, rgba(250, 249, 253, 0.05) 0px, rgba(250, 249, 253, 0.05) 1px, transparent 1px, transparent 22px),
		repeating-linear-gradient(-45deg, rgba(250, 249, 253, 0.05) 0px, rgba(250, 249, 253, 0.05) 1px, transparent 1px, transparent 22px);
	/* A trama se dissolve nas bordas para não marcar onde a seção termina */
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 6%, transparent 74%);
	mask-image: radial-gradient(ellipse at 50% 50%, #000 6%, transparent 74%);
	will-change: transform;
}

/* Manchas de luz. O blur é pintado uma vez e depois só o transform muda,
   então o navegador não refaz o desfoque a cada quadro */

.boxBlog .fundoParalax .bolha {
	position: absolute;
	border-radius: 9999px;
	filter: blur(100px);
	will-change: transform;
}

.boxBlog .fundoParalax .bolhaEsquerda {
	top: -40px;
	left: -160px;
	width: 480px;
	height: 380px;
	background: rgba(254, 42, 103, 0.16);
}

.boxBlog .fundoParalax .bolhaDireita {
	right: -170px;
	bottom: -60px;
	width: 500px;
	height: 400px;
	background: rgba(116, 6, 92, 0.5);
}

/* Folhas: retângulos deitados em contorno, na proporção das capas dos posts -
   o assunto da seção ecoando no fundo, no papel que os anéis fazem nos
   Resultados e os balões nas Perguntas.

   A inclinação vem da propriedade rotate, e não do transform, de propósito:
   o paralaxe escreve transform nesta mesma tag, e as duas se somam em vez de
   uma apagar a outra. */

.boxBlog .fundoParalax .folha {
	position: absolute;
	aspect-ratio: 16 / 10;
	border: solid 1px rgba(250, 249, 253, 0.1);
	border-radius: 20px;
	will-change: transform;
}

.boxBlog .fundoParalax .folhaEsquerda {
	top: -70px;
	left: 3%;
	width: 240px;
	rotate: -7deg;
}

.boxBlog .fundoParalax .folhaDireita {
	right: 4%;
	bottom: -90px;
	width: 280px;
	rotate: 8deg;
	border-color: rgba(254, 42, 103, 0.16);
}

/* O título, o carrossel e o rodapé também caminham, um pouco menos que a
   página, e é essa diferença que separa o conteúdo do fundo */

.boxBlog .cabecalhoSecao,
.boxBlog .boxCarrosselPosts,
.boxBlog .rodapeBlog {
	will-change: transform;
}

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

	.boxBlog .fundoParalax .grade,
	.boxBlog .fundoParalax .bolha,
	.boxBlog .fundoParalax .folha,
	.boxBlog .cabecalhoSecao,
	.boxBlog .boxCarrosselPosts,
	.boxBlog .rodapeBlog {
		will-change: auto;
	}

}

/* A etiqueta abre em um accent mais claro: o vermelho de sempre, em cima do
   roxo fechado da faixa, quase some */

.boxBlog .etiquetaSecao {
	color: #FF6C58;
}

/* Carrossel (Slick Slider) */

/* O .slick-list é overflow: hidden, então tudo que o card faz para fora do
   próprio lugar é cortado. As duas sobras abrem essa folga por dentro: em
   cima para o card poder subir no hover (translateY de -6px) sem perder o fio
   de luz do topo, e embaixo para a sombra do hover caber inteira. */

.boxBlog .boxCarrosselPosts {
	--sobraTopo: 12px;
	--sobraSombra: 30px;
	position: relative;
	margin-top: 36px;
}

.boxBlog .listaPostsHome {
	padding: 0;
	margin: 0;
}

/* Espaço entre os cards (o slick não trabalha com gap).
   Nada de margem negativa vertical aqui: ela escaparia por colapso de
   margens e desalinharia a altura do carrossel. */

.boxBlog .listaPostsHome .slick-list {
	margin: 0 -12px;
	padding: var(--sobraTopo) 0 var(--sobraSombra) 0;
}

/* Track em flex para os cards ficarem com a mesma altura */

.boxBlog .listaPostsHome .slick-track {
	display: flex;
	align-items: stretch;
}

/* O slick escreve display: block no slide, e o li precisa continuar flex para
   o card esticar até a altura da linha */

.boxBlog .listaPostsHome .slick-slide {
	display: flex!important;
	height: auto;
}

/* O espaço entre os cards fica DENTRO do slide, no padding: o slick escreve a
   largura do slide e desloca o carrossel de largura em largura, então uma
   margem por fora somaria a cada passo e tiraria o carrossel de alinhamento.

   E o seletor é por descendência, e não por filho direto: ao iniciar, o slick
   move os li para dentro de um .slick-list > .slick-track, e um "> li" pararia
   de casar justamente depois que o carrossel monta - que foi o que deixava os
   cards colados. */

.boxBlog .listaPostsHome .itemPost {
	height: auto;
	min-width: 0;
	padding: 0 12px;
}

/* Enquanto o slick não inicia (evita a lista empilhada piscando) */

.boxBlog .listaPostsHome:not(.slick-initialized) {
	display: flex;
	overflow: hidden;
}

.boxBlog .listaPostsHome:not(.slick-initialized) > li {
	flex: 0 0 25%;
}

/* Setas do slider (aparecem só no desktop - no mobile é arrastando).

   Aqui elas ficam DENTRO do container, na faixa que o padding do carrossel
   abre de cada lado, e não penduradas na folga de fora como no "Como
   funciona": naquela seção a folga existe em qualquer tela grande, nesta o
   carrossel é mais largo e a seta acabava encostando no card.

   Em cima do escuro elas são de vidro, e não brancas: o branco chapado
   brigaria com as capas dos posts. */

.boxBlog .setaCarrossel {
	position: absolute;
	/* Centraliza pela altura dos cards, e não do slider: as duas sobras que
	   abrem a folga do hover entram na conta com sinais opostos, senão a seta
	   desce um pouco em relação ao meio do card */
	top: calc((100% + var(--sobraTopo) - var(--sobraSombra)) / 2);
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: solid 1px rgba(250, 249, 253, 0.25);
	border-radius: 9999px;
	background: rgba(250, 249, 253, 0.1);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--primary-foreground);
	transition: background-color 0.35s, border-color 0.35s, opacity 0.35s, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
	cursor: pointer;
	z-index: 2;
}

.boxBlog .setaCarrossel i {
	font-size: 14px;
	color: var(--primary-foreground);
}

.boxBlog .setaCarrossel:hover {
	transform: translateY(-50%) scale(1.06);
	border-color: transparent;
	background: var(--accent);
}

.boxBlog .setaCarrossel:hover i {
	color: var(--accent-foreground);
}

.boxBlog .setaCarrossel.prev {
	left: 0;
}

.boxBlog .setaCarrossel.next {
	right: 0;
}

/* Estados controlados pelo slick */

.boxBlog .setaCarrossel.slick-disabled {
	opacity: 0;
	cursor: not-allowed;
	pointer-events: none;
}

.boxBlog .setaCarrossel.slick-hidden {
	display: none;
}

/* Aqui o card também é [data-revela], e aquela regra tem a mesma força que a
   .caixaPost do geral.css - só que vem depois na página, então era ela que
   valia e a lista dela não traz transform. Resultado: a subida do hover
   acontecia sem transição nenhuma, seca.

   Esta regra junta as duas coisas: opacity e translate são a entrada do card
   (com o atraso em escada) e o resto é o hover, que tem de responder na hora -
   por isso o transition-delay zera só para essas. É o mesmo arranjo dos cards
   das outras seções. */

.boxBlog .listaPostsHome .caixaPost {
	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),
		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;
	transition-delay: var(--atrasoRevela, 0s), var(--atrasoRevela, 0s), 0s, 0s, 0s;
}

/* O card claro em cima da faixa escura ganha um contorno mais aceso no
   hover, no lugar do lilás que ele usa nas listagens do blog */

.boxBlog .listaPostsHome .caixaPost:hover {
	border-color: rgba(254, 42, 103, 0.32);
	box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.6);
}

/* Rodapé da seção */

.boxBlog .rodapeBlog {
	display: flex;
	justify-content: center;
	margin: 40px 0 0 0;
}

/*********************************************
** Âncoras das Seções (os pontos flutuantes na direita)
*********************************************/

/* Um ponto por seção, colados na direita da tela, no meio da altura. O ponto
   da seção em que você está fica aceso e o nome dela abre no hover.

   Só existe de 1440px para cima (ver o bloco de desktop no fim do arquivo):
   dali para baixo a folga ao lado do container é menor que o nome da seção,
   e a etiqueta abriria por cima do conteúdo.

   z-index abaixo do header (50): o trilho vive no meio da tela, mas se a
   página for curta ele não passa por cima do menu. */

.ancorasSecoes {
	display: none;
	position: fixed;
	top: 50%;
	right: 16px;
	z-index: 40;
	transform: translateY(-50%);
}

.ancorasSecoes ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ancorasSecoes ul li {
	display: block;
	line-height: 0;
}

/* A área clicável é bem maior que a bolinha: 8px é pouco para acertar com o
   mouse, então o link ocupa 24x26 e o ponto fica centralizado dentro dele */

.ancorasSecoes a {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 24px;
	height: 26px;
}

.ancorasSecoes .ponto {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background: rgba(63, 34, 114, 0.25);
	transition: height 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.ancorasSecoes a:hover .ponto,
.ancorasSecoes a:focus-visible .ponto {
	height: 14px;
	background: rgba(63, 34, 114, 0.55);
}

/* A seção aberta vira um risco em pé, não só um ponto de cor diferente: dá
   para ver onde você está sem precisar comparar a cor com a dos vizinhos */

.ancorasSecoes a.ativo .ponto {
	height: 20px;
	background: var(--accent);
	box-shadow: 0 0 0 4px rgba(237, 51, 69, 0.12);
}

/* O nome fica fora do trilho, à esquerda do ponto, e não recebe mouse: é uma
   etiqueta, quem responde ao clique é o link. Sem isso ela roubaria o hover
   de quem estiver embaixo dela enquanto está aberta */

.ancorasSecoes .nome {
	position: absolute;
	top: 50%;
	right: calc(100% + 2px);
	padding: 5px 12px;
	border: solid 1px rgba(63, 34, 114, 0.1);
	border-radius: 999px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--primary);
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 6px 20px rgba(30, 15, 59, 0.12);
	opacity: 0;
	pointer-events: none;
	transform: translate(6px, -50%);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.ancorasSecoes a:hover .nome,
.ancorasSecoes a:focus-visible .nome {
	opacity: 1;
	transform: translate(0, -50%);
}

/* Seções de fundo escuro (banner, planos e blog): o trilho ganha a classe
   .escuro pelo scripts.js e inverte, senão o roxo da bolinha desaparece
   dentro do roxo da seção */

.ancorasSecoes.escuro .ponto {
	background: rgba(255, 255, 255, 0.3);
}

.ancorasSecoes.escuro a:hover .ponto,
.ancorasSecoes.escuro a:focus-visible .ponto {
	background: rgba(255, 255, 255, 0.7);
}

.ancorasSecoes.escuro a.ativo .ponto {
	background: #FE2A67;
	box-shadow: 0 0 0 4px rgba(254, 42, 103, 0.2);
}

.ancorasSecoes.escuro .nome {
	color: var(--primary-foreground);
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(37, 11, 76, 0.82);
	box-shadow: 0 6px 20px rgba(12, 4, 26, 0.35);
}

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

	.ancorasSecoes .ponto,
	.ancorasSecoes .nome {
		transition: none;
	}

}

/*********************************************
** Desktop (md: e lg: do layout)
*********************************************/

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

	/* Banner: botões lado a lado */

	.bannerPrincipal .boxTextos .boxBotoes {
		flex-direction: row;
	}

}

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

	/* Seções ganham mais respiro */

	.boxComoFunciona,
	.boxResultados,
	.boxConteudos,
	.boxPlanos,
	.boxFaq,
	.boxBlog {
		padding: 112px 0;
	}

	/* O banner fica fora da lista acima porque o respiro de cima dele tem
	   que somar o espaço do header, que flutua por cima do banner */

	.bannerPrincipal {
		padding: calc(72px + var(--topoBlocoInicial)) 0 112px 0;
	}

	.bannerPrincipal .boxTextos h1 {
		font-size: 60px;
	}

	.bannerPrincipal .boxTextos .texto {
		font-size: 16px;
		line-height: 26px;
	}

	.boxResultados .boxCustoBeneficio {
		padding: 48px;
		gap: 40px;
	}

	.boxResultados .boxCustoBeneficio h3 {
		font-size: 30px;
		line-height: 38px;
	}

	.boxFaq .listaFaq .perguntaFaq span {
		font-size: 17px;
		line-height: 26px;
	}

	/* Setas do carrossel aparecem */

	.boxComoFunciona .setaCarrossel,
	.boxBlog .setaCarrossel {
		display: flex;
	}

	/* A faixa de cada lado onde as setas moram. São 44px de seta em 68px de
	   folga, então sobram 24px entre a seta e o primeiro card - o suficiente
	   para ela não parecer grudada nem no card nem na borda do container */

	.boxBlog .boxCarrosselPosts {
		padding: 0 68px;
	}

}

/* Custo-benefício em duas colunas: o texto de um lado e o recibo do outro.
   Só a partir de 1024px, porque abaixo disso a coluna de texto fica estreita
   demais e o título quebra em toda linha */

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

	.boxResultados .boxCustoBeneficio {
		grid-template-columns: minmax(0, 1fr) 320px;
	}

}

/* De 1440px para cima sobram 144px de cada lado do container, aí as setas
   saem para fora dele: os cards recuperam a folga que estavam cedendo e a
   distância até eles ainda dobra */

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

	/* Trilho de âncoras: daqui para cima sobram 144px de cada lado do
	   container, aí o nome da seção abre nessa folga sem passar por cima do
	   conteúdo. Abaixo disso o trilho nem existe */

	.ancorasSecoes {
		display: block;
	}

	.boxBlog .boxCarrosselPosts {
		padding: 0;
	}

	.boxBlog .setaCarrossel.prev {
		left: -68px;
	}

	.boxBlog .setaCarrossel.next {
		right: -68px;
	}

}

/* Abaixo de 1280px não sobra espaço fora do container: o slider recua
   para as setas continuarem fora dos cards, sem cobrir o texto */

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

	.boxComoFunciona .boxCarrossel {
		padding: 0 58px;
	}

	.boxComoFunciona .setaCarrossel.prev {
		left: 0;
	}

	.boxComoFunciona .setaCarrossel.next {
		right: 0;
	}

}

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

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

	/* Planos em 2 colunas */

	.boxPlanos .listaPlanos {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Com dois por linha o plano em destaque desce para a esquerda, então o
	   holofote vai para o meio da seção em vez de continuar mirando a coluna
	   de antes */

	.boxPlanos .fundoParalax .facho {
		left: 50%;
		width: 560px;
	}

	/* Passos: 2 por vez (mesmo breakpoint do slick) */

	.boxComoFunciona .listaPassos:not(.slick-initialized) li {
		flex: 0 0 50%;
	}

	/* Posts: 3 por vez (mesmo breakpoint do slick) */

	.boxBlog .listaPostsHome:not(.slick-initialized) > li {
		flex: 0 0 33.333%;
	}

}

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

	/* Banner em uma coluna, imagem primeiro */

	.bannerPrincipal .boxGrid {
		grid-template-columns: repeat(1, 1fr);
		gap: 40px;
	}

	/* Resultados e UGC em uma coluna */

	.boxResultados .listaResultados {
		grid-template-columns: repeat(1, 1fr);
	}

	.boxConteudos .listaReels {
		grid-template-columns: repeat(1, 1fr);
	}

	/* Passos: 1 por vez (mesmo breakpoint do slick) */

	.boxComoFunciona .listaPassos:not(.slick-initialized) li {
		flex: 0 0 100%;
	}

	/* O slick chama .show() nas setas e, quando quem as esconde é o CSS, o
	   jQuery escreve um display inline na tag - que passa por cima do
	   display: none lá de cima. Sem o !important a seta "next" reaparece no
	   mobile, metade dela fora da tela. No desktop nada muda: lá o CSS já
	   deixa a seta visível, então o jQuery só limpa o inline. */

	.boxComoFunciona .setaCarrossel,
	.boxBlog .setaCarrossel {
		display: none !important;
	}

	/* Fundo em paralaxe: malha mais fechada e manchas menores, senão elas
	   tomam a tela inteira */

	.boxComoFunciona .fundoParalax .grade {
		background-size: 44px 44px;
	}

	.boxComoFunciona .fundoParalax .bolhaEsquerda {
		width: 300px;
		height: 260px;
	}

	.boxComoFunciona .fundoParalax .bolhaDireita {
		width: 320px;
		height: 280px;
	}

	.boxComoFunciona .fundoParalax .bolhaCanto {
		display: none;
	}

	/* Mesmo tratamento no fundo dos Resultados: a trama de pontos fecha um
	   pouco para não parecer esticada na tela pequena */

	.boxResultados .fundoParalax .grade {
		background-size: 20px 20px;
	}

	.boxResultados .fundoParalax .bolhaEsquerda,
	.boxResultados .fundoParalax .bolhaDireita {
		width: 300px;
		height: 260px;
	}

	.boxResultados .fundoParalax .bolhaTopo,
	.boxResultados .fundoParalax .anel {
		display: none;
	}

	/* E o mesmo no fundo dos Conteúdos: a hachura fecha um pouco e os
	   quadros saem de cena, senão eles encostam nos vídeos */

	.boxConteudos .fundoParalax .grade {
		background-image: repeating-linear-gradient(135deg, rgba(63, 34, 114, 0.07) 0px, rgba(63, 34, 114, 0.07) 1px, transparent 1px, transparent 11px);
	}

	.boxConteudos .fundoParalax .bolhaEsquerda,
	.boxConteudos .fundoParalax .bolhaDireita {
		width: 300px;
		height: 260px;
	}

	.boxConteudos .fundoParalax .quadro {
		display: none;
	}

	/* E no fundo dos Planos: as colunas fecham e o holofote volta para o meio
	   da tela, porque em uma coluna só não existe mais "terceiro card" */

	.boxPlanos .fundoParalax .grade {
		background-size: 48px 100%;
	}

	.boxPlanos .fundoParalax .facho {
		left: 50%;
		width: 420px;
	}

	.boxPlanos .fundoParalax .bolhaEsquerda,
	.boxPlanos .fundoParalax .bolhaDireita {
		width: 300px;
		height: 260px;
	}

	/* Cards dos planos com menos folga na tela pequena */

	.boxPlanos .listaPlanos > li {
		padding: 28px;
	}

	.boxPlanos .listaPlanos > li::before {
		left: 28px;
		right: 28px;
	}

	.boxPlanos .listaPlanos .seloPlano {
		right: 28px;
	}

	/* E no fundo das Perguntas: as linhas deitadas fecham e os balões saem de
	   cena - sem a folga das laterais eles cairiam em cima da lista */

	.boxFaq .fundoParalax .grade {
		background-size: 100% 40px;
	}

	.boxFaq .fundoParalax .bolhaEsquerda,
	.boxFaq .fundoParalax .bolhaDireita {
		width: 300px;
		height: 260px;
	}

	.boxFaq .fundoParalax .balao {
		display: none;
	}

	/* Perguntas com menos folga na tela pequena */

	.boxFaq .listaFaq .perguntaFaq {
		padding: 18px 20px;
	}

	.boxFaq .listaFaq .respostaFaq .conteudoFaq {
		padding: 0 20px;
	}

	/* E no fundo do Blog: o xadrez fecha e as folhas saem de cena - sem a
	   folga das laterais elas encostariam nos cards */

	.boxBlog .fundoParalax .grade {
		background-image:
			repeating-linear-gradient(45deg, rgba(250, 249, 253, 0.05) 0px, rgba(250, 249, 253, 0.05) 1px, transparent 1px, transparent 16px),
			repeating-linear-gradient(-45deg, rgba(250, 249, 253, 0.05) 0px, rgba(250, 249, 253, 0.05) 1px, transparent 1px, transparent 16px);
	}

	.boxBlog .fundoParalax .bolhaEsquerda,
	.boxBlog .fundoParalax .bolhaDireita {
		width: 300px;
		height: 260px;
	}

	.boxBlog .fundoParalax .folha {
		display: none;
	}

	/* Posts: 1 por vez (mesmo breakpoint do slick) */

	.boxBlog .listaPostsHome:not(.slick-initialized) > li {
		flex: 0 0 100%;
	}

	/* Cards e recibo com menos folga na tela pequena */

	.boxResultados .listaResultados li {
		padding: 24px;
	}

	.boxResultados .boxCustoBeneficio {
		gap: 24px;
		padding: 28px;
	}

	.boxResultados .boxCustoBeneficio .painelConta {
		padding: 20px;
	}

}

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

	/* Planos em uma coluna */

	.boxPlanos .listaPlanos {
		grid-template-columns: repeat(1, 1fr);
	}

	.bannerPrincipal .boxTextos .boxBotoes .botao {
		width: 100%;
	}

}