/*********************************************
** Chamada Final
*********************************************/

/* A última faixa de toda página do site: o convite para se cadastrar.

   Esta folha é do componente, e não de uma página: quem usa é a home, o
   blog, a categoria, a matéria, a busca e a página de autor, pelo
   get_template_part('content', 'chamada'). Por isso ela mora aqui e não no
   home.css - as telas do blog não carregam aquele arquivo.

   A faixa é clara, como as Perguntas da home: o escuro fica só no bloco do
   meio, que é para onde o olho tem de ir na hora de decidir. */

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

/* Fundo em paralaxe (a mesma mecânica das seções da home: as camadas ficam
   atrás do conteúdo e o scripts.js desloca cada uma em uma velocidade,
   conforme o data-paralax escrito no content-chamada.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. */

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

.boxChamada .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 ANÉIS saindo do meio, a única redonda do site: na home
   é cruz no "Como funciona", pontos nos "Resultados", uma diagonal só nos
   "Conteúdos", colunas nos "Planos", linhas deitadas nas "Perguntas" e
   xadrez diagonal no "Blog". Os anéis nascem por trás do bloco escuro e
   abrem para fora, então o fundo aponta para o botão. */

.boxChamada .fundoParalax .grade {
	position: absolute;
	top: -45%;
	right: 0;
	bottom: -45%;
	left: 0;
	background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0px, transparent 43px, rgba(63, 34, 114, 0.07) 43px, rgba(63, 34, 114, 0.07) 44px);
	/* 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 76%);
	mask-image: radial-gradient(ellipse at 50% 50%, #000 8%, 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 */

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

.boxChamada .fundoParalax .bolhaEsquerda {
	top: -60px;
	left: -170px;
	width: 470px;
	height: 370px;
	background: rgba(63, 34, 114, 0.14);
}

.boxChamada .fundoParalax .bolhaDireita {
	right: -170px;
	bottom: -80px;
	width: 490px;
	height: 390px;
	background: rgba(237, 51, 69, 0.11);
}

/* Bloco escuro */

.boxChamada .boxBg {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	overflow: hidden;
	border-radius: 32px;
	padding: 56px 32px;
	text-align: center;
	box-shadow: 0 34px 70px -42px rgba(37, 11, 76, 0.95);
	will-change: transform;
}

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

	.boxChamada .fundoParalax .grade,
	.boxChamada .fundoParalax .bolha,
	.boxChamada .boxBg {
		will-change: auto;
	}

}

/* Fio de luz na borda de cima: o mesmo fio que abre no hover dos cards,
   aqui fixo - é a última peça da página e não tem hover nenhum */

.boxChamada .boxBg .fioTopo {
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% 0;
	width: 70%;
	max-width: 460px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #FF6C58, #FE2A67, transparent);
	pointer-events: none;
}

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

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

/* A primeira nasce em cima do título, no meio: é ela que acende o centro do
   bloco, onde estão o texto e o botão */

.boxChamada .boxBg .brilhoUm {
	top: -150px;
	left: 50%;
	translate: -50% 0;
	width: 460px;
	height: 300px;
	background: rgba(254, 42, 103, 0.28);
}

.boxChamada .boxBg .brilhoDois {
	right: -110px;
	bottom: -160px;
	width: 360px;
	height: 300px;
	background: rgba(116, 6, 92, 0.55);
}

/* O conteúdo sobe acima das manchas de luz */

.boxChamada .boxBg .seloPilula,
.boxChamada .boxBg h2,
.boxChamada .boxBg p,
.boxChamada .boxBg .boxBotoes,
.boxChamada .boxBg .listaGarantias {
	position: relative;
	z-index: 1;
}

.boxChamada .boxBg h2 {
	max-width: 672px;
	font-size: 30px;
	line-height: 38px;
	font-weight: 700;
	color: var(--primary-foreground);
	margin: 0;
}

.boxChamada .boxBg p {
	max-width: 560px;
	font-size: 15px;
	line-height: 26px;
	color: rgba(250, 249, 253, 0.75);
	margin: 0;
}

/* Botões: o accent é a ação do site inteiro e o vazado leva aos planos, na
   home, para quem chegou até aqui ainda escolhendo */

.boxChamada .boxBg .boxBotoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 4px 0 0 0;
}

.boxChamada .boxBg .boxBotoes .botao {
	padding: 16px 32px;
}

/* As três tranquilidades, na linha de baixo e separadas por um fio: é o
   último freio que a pessoa tem antes de clicar */

.boxChamada .boxBg .listaGarantias {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 24px;
	width: 100%;
	max-width: 620px;
	border-top: solid 1px rgba(250, 249, 253, 0.15);
	padding: 22px 0 0 0;
	margin: 6px 0 0 0;
}

.boxChamada .boxBg .listaGarantias li {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	font-size: 13px;
	line-height: 20px;
	color: rgba(250, 249, 253, 0.8);
}

.boxChamada .boxBg .listaGarantias li i {
	font-size: 11px;
	color: #FF6C58;
}

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

	/* A faixa ganha o mesmo respiro das seções da home */

	.boxChamada {
		padding: 112px 0;
	}

	.boxChamada .boxBg {
		gap: 22px;
		padding: 72px 48px;
	}

	.boxChamada .boxBg h2 {
		font-size: 36px;
		line-height: 44px;
	}

	.boxChamada .boxBg p {
		font-size: 16px;
		line-height: 28px;
	}

}

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

	/* E no fundo da Chamada Final: os anéis fecham e as manchas encolhem,
	   senão elas tomam a tela inteira */

	.boxChamada .fundoParalax .grade {
		background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0px, transparent 29px, rgba(63, 34, 114, 0.07) 29px, rgba(63, 34, 114, 0.07) 30px);
	}

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

	/* Bloco escuro com menos folga, e as garantias mais juntas para caberem
	   em duas linhas em vez de três */

	.boxChamada .boxBg {
		padding: 40px 20px;
	}

	.boxChamada .boxBg .listaGarantias {
		gap: 10px 18px;
	}

}

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

	/* Na Chamada Final os dois botões também ocupam a linha inteira: empilhados
	   e com larguras diferentes eles ficariam desalinhados no meio do bloco */

	.boxChamada .boxBg .boxBotoes {
		width: 100%;
		flex-direction: column;
	}

	.boxChamada .boxBg .boxBotoes .botao {
		width: 100%;
	}

	/* E as garantias viram uma coluna centrada: em duas linhas elas quebram
	   uma em cima e duas embaixo, e a sobra de um lado só desalinha o bloco */

	.boxChamada .boxBg .listaGarantias {
		flex-direction: column;
		gap: 10px;
	}

}