/*********************************************
** Newsletter
*********************************************/

/* A faixa de cadastro na newsletter: o último bloco de conteúdo de toda
   página do site, logo antes do rodapé.

   Esta folha é do componente, e não de uma página: quem usa é a home, o blog,
   a categoria, a matéria, a busca, a página de autor, as páginas legais, o 404
   e a tela padrão - todas pelo get_template_part('content', 'newsletter').
   Por isso ela é pedida no includes/newsletter.php, junto com o resto do tema,
   e não de dentro do home.css ou do blog.css: nenhuma tela carrega os dois.

   O desenho é o inverso da Chamada Final, que vem logo acima: lá a faixa é
   clara e o bloco do meio é escuro; aqui a faixa puxa para o lilás e o cartão
   é branco. São duas peças de cadastro em sequência, e é essa troca que evita
   a impressão de bloco repetido - o olho percebe que a segunda pede outra
   coisa (o e-mail, e não a conta).

   O fundo daqui não tem paralaxe, ao contrário das seções da home e da
   Chamada Final: este é o último degrau antes do rodapé, que é o chão da
   página, e a partir dele nada mais precisa se mover. */

.boxNewsletter {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-top: solid 1px rgba(63, 34, 114, 0.08);
	background: linear-gradient(180deg, #F6F3FC 0%, #EFEAF9 100%);
	padding: 56px 0 64px 0;
	/* Depois do envio a pessoa volta na âncora #newsletter, e o header é fixo:
	   sem esta folga o topo do bloco pararia embaixo da barra */
	scroll-margin-top: calc(var(--alturaHeaderCompacto) + 20px);
}

/* O respiro de baixo da Chamada Final era pensado para ela encostar no
   rodapé. Com a newsletter no meio, os dois respiros somavam quase 200px de
   vazio entre um cartão e o outro - aqui ele é encurtado.

   Navegador sem :has() ignora a regra e a página fica só mais arejada: o
   conteúdo continua inteiro, é só o espaçamento que não aperta. */

.boxChamada:has(+ .boxNewsletter) {
	padding-bottom: 40px;
}

/*********************************************
** Fundo da faixa
*********************************************/

/* Mesma ideia das seções escuras (uma trama atrás e manchas de luz por cima
   dela), só que parada. As camadas ficam atrás do conteúdo e não recebem
   clique nenhum. */

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

/* A trama aqui é de FIOS DIAGONAIS finos, como o papel de um envelope: na
   home é cruz no "Como funciona", pontos nos "Resultados", uma diagonal só
   nos "Conteúdos", colunas nos "Planos", linhas deitadas nas "Perguntas",
   xadrez diagonal no "Blog" e anéis na Chamada Final. */

.boxNewsletter .fundoNewsletter .grade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: repeating-linear-gradient(-45deg, transparent 0px, transparent 25px, rgba(63, 34, 114, 0.05) 25px, rgba(63, 34, 114, 0.05) 26px);
	/* A trama se dissolve nas bordas para não marcar onde a faixa 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%);
}

/* Manchas de luz: o roxo entra de um lado e o vermelho da marca do outro, os
   mesmos dois tons das outras faixas claras */

.boxNewsletter .fundoNewsletter .bolha {
	position: absolute;
	border-radius: 9999px;
	filter: blur(100px);
}

.boxNewsletter .fundoNewsletter .bolhaEsquerda {
	top: -120px;
	left: -160px;
	width: 440px;
	height: 340px;
	background: rgba(63, 34, 114, 0.13);
}

.boxNewsletter .fundoNewsletter .bolhaDireita {
	right: -150px;
	bottom: -140px;
	width: 460px;
	height: 360px;
	background: rgba(237, 51, 69, 0.1);
}

/* O conteúdo sobe acima do fundo */

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

/*********************************************
** Cartão
*********************************************/

/* Duas colunas no desktop (o convite de um lado, o formulário do outro) e uma
   coluna no celular. No celular o texto vem primeiro de propósito: é ele que
   explica por que valeria a pena entregar o e-mail. */

.boxNewsletter .cartaoNewsletter {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: 32px;
	border-radius: 28px;
	border: solid 1px rgba(63, 34, 114, 0.1);
	background: linear-gradient(140deg, #FFFFFF 0%, #FCFAFF 100%);
	box-shadow: 0 30px 60px -42px rgba(37, 11, 76, 0.55);
	padding: 32px 20px;
}

/* Fio de luz na borda de cima: o mesmo fio da Chamada Final e do rodapé, aqui
   fixo - o cartão não tem hover nenhum */

.boxNewsletter .cartaoNewsletter .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 cartão: dão o volume que o degradê branco sozinho
   não dá, sem escurecer o fundo onde o texto e os campos ficam */

.boxNewsletter .cartaoNewsletter .brilhoCartao {
	position: absolute;
	border-radius: 9999px;
	filter: blur(70px);
	pointer-events: none;
}

.boxNewsletter .cartaoNewsletter .brilhoUm {
	top: -130px;
	right: -90px;
	width: 300px;
	height: 240px;
	background: rgba(254, 42, 103, 0.12);
}

.boxNewsletter .cartaoNewsletter .brilhoDois {
	bottom: -140px;
	left: -100px;
	width: 320px;
	height: 250px;
	background: rgba(63, 34, 114, 0.1);
}

/* As duas colunas sobem acima das manchas de luz */

.boxNewsletter .cartaoNewsletter .colunaTexto,
.boxNewsletter .cartaoNewsletter .colunaFormulario {
	position: relative;
	z-index: 1;
	min-width: 0;
}

/*********************************************
** Coluna do convite
*********************************************/

/* O quadradinho com o envelope: é o único lugar do bloco em que o gradiente
   da marca aparece cheio, e ele fica em cima do título para dizer de que
   assunto se trata antes de a pessoa ler qualquer palavra.

   O gradiente é o --gradienteAccentAA (e não o --gradienteAccent) porque ele
   carrega o ícone claro por cima: é o par de tons que passa no contraste. */

.boxNewsletter .colunaTexto .iconeNewsletter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--gradienteAccentAA);
	color: var(--accent-foreground);
	font-size: 20px;
	box-shadow: 0 16px 30px -18px var(--accent);
	margin: 0 0 18px 0;
}

/* A palavra em destaque do título.

   O .textoGradiente do tema é desenhado para bloco ESCURO (é o que o geral.css
   avisa: naquele par de tons a ponta laranja não passa no contraste sobre
   claro), e aqui o cartão é branco. O destaque continua sendo o gradiente da
   marca, só na versão --gradienteAccentAA, que é o mesmo matiz com a luz
   baixada até os dois extremos passarem. */

/* Vai em background-IMAGE, e não no atalho background: o atalho zera o
   background-clip: text que o .textoGradiente usa para o degradê valer só
   dentro das letras - e a palavra virava um retângulo vermelho. */

.boxNewsletter .colunaTexto .tituloSecao .textoGradiente {
	background-image: var(--gradienteAccentAA);
}

/* O que a pessoa recebe, em três linhas curtas. É o último freio antes de
   digitar o e-mail, do mesmo jeito que as garantias da Chamada Final. */

.boxNewsletter .colunaTexto .listaVantagens {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	margin: 26px 0 0 0;
}

/* O marcador acompanha a PRIMEIRA linha (e não o meio do item): no celular a
   linha quebra em duas, e centrado ele descia para o meio do parágrafo */

.boxNewsletter .colunaTexto .listaVantagens li {
	list-style: none;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 20px;
	color: var(--muted-foreground);
}

.boxNewsletter .colunaTexto .listaVantagens li .marcador {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 9999px;
	background: rgba(63, 34, 114, 0.08);
	color: var(--accentTexto);
	font-size: 9px;
}

/*********************************************
** Coluna do formulário
*********************************************/

/* Os campos ficam dentro de uma caixa levemente lilás, e não soltos no branco
   do cartão: assim a área de digitar se separa do texto do convite sem
   precisar de mais um fio dividindo o cartão. */

.boxNewsletter .colunaFormulario {
	border-radius: 22px;
	border: solid 1px rgba(63, 34, 114, 0.08);
	background: rgba(240, 236, 250, 0.55);
	padding: 24px 20px;
}

.boxNewsletter .formNewsletter .campo + .campo {
	margin-top: 16px;
}

.boxNewsletter .formNewsletter .campo label {
	display: block;
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
	color: var(--foreground);
	margin: 0 0 6px 0;
}

/* Campo com ícone dentro: o ícone é decoração, então ele não recebe clique -
   quem clica em qualquer ponto do campo cai no input. */

.boxNewsletter .formNewsletter .boxInput {
	position: relative;
}

.boxNewsletter .formNewsletter .boxInput > i {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	font-size: 14px;
	color: var(--muted-foreground);
	pointer-events: none;
	transition: color 0.2s linear;
}

.boxNewsletter .formNewsletter .boxInput input {
	width: 100%;
	height: 52px;
	border: solid 1px var(--border);
	border-radius: 14px;
	background: var(--card);
	padding: 0 16px 0 44px;
	font-size: 14px;
	color: var(--foreground);
	transition: border-color 0.2s linear, box-shadow 0.2s linear;
}

.boxNewsletter .formNewsletter .boxInput input::placeholder {
	color: var(--muted-foreground);
}

/* O campo em foco ganha a borda roxa e um anel macio em volta. É o mesmo
   desenho do formulário de cadastro, e ele vale tanto no clique quanto no
   teclado - por isso ele fica no :focus, e não no :focus-visible. */

.boxNewsletter .formNewsletter .boxInput input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(63, 34, 114, 0.15);
}

/* O ícone acende junto com o campo */

.boxNewsletter .formNewsletter .boxInput:focus-within > i {
	color: var(--primary);
}

.boxNewsletter .formNewsletter .botao {
	margin: 20px 0 0 0;
}

/* O anel de foco do teclado, de volta no botão.

   O anel do tema (o :focus-visible do geral.css) é desenhado com box-shadow, e
   o .botao.accent também escreve box-shadow - com mais peso de seletor. O
   resultado é que a sombra vermelha do botão apagava o anel, e quem navega
   pelo teclado não via onde estava.

   Aqui as duas coisas entram juntas na mesma propriedade: a sombra do botão
   primeiro e as duas voltas do anel em cima dela. O mesmo esbarrão vale para
   todo .botao.accent do tema (o da Chamada Final, o do header, o do rodapé) -
   esta regra resolve só o deste bloco. */

.boxNewsletter .formNewsletter .botao.accent:focus-visible {
	box-shadow:
		0 10px 25px -12px var(--accent),
		0 0 0 2px var(--background),
		0 0 0 4px var(--accentTexto);
}

/* Isca de robô: um campo que gente nenhuma vê nem alcança pelo teclado (ver o
   includes/newsletter.php). Ele sai da tela em vez de usar display: none
   porque robô costuma pular justamente o que está escondido assim. */

.boxNewsletter .formNewsletter .campoIsca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* A linha de tranquilidade embaixo do botão: quem entrega o e-mail quer saber
   o que vai receber e como sair */

.boxNewsletter .formNewsletter .avisoPrivacidade {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	line-height: 18px;
	color: var(--muted-foreground);
	margin: 16px 0 0 0;
}

.boxNewsletter .formNewsletter .avisoPrivacidade i {
	flex-shrink: 0;
	font-size: 11px;
	margin: 3px 0 0 0;
	color: var(--muted-foreground);
}

.boxNewsletter .formNewsletter .avisoPrivacidade a {
	font-weight: 500;
	color: var(--accentTexto);
}

.boxNewsletter .formNewsletter .avisoPrivacidade a:hover {
	text-decoration: underline!important;
}

/*********************************************
** Recado de erro e de sucesso
*********************************************/

/* O recado tem nome próprio (.recadoNewsletter) porque ele é o único deste
   tipo no site: é o desenho da resposta do formulário depois do envio. */

.boxNewsletter .recadoNewsletter {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border-radius: 14px;
	padding: 14px 16px;
	margin: 0 0 18px 0;
}

.boxNewsletter .recadoNewsletter i {
	flex-shrink: 0;
	font-size: 15px;
	margin: 2px 0 0 0;
}

.boxNewsletter .recadoNewsletter span {
	font-size: 13px;
	line-height: 20px;
}

/* Erro */

.boxNewsletter .recadoNewsletter.erro {
	border: solid 1px var(--accent);
	background: rgba(237, 51, 69, 0.08);
}

.boxNewsletter .recadoNewsletter.erro i,
.boxNewsletter .recadoNewsletter.erro span {
	color: #C4262B;
}

/* Sucesso */

.boxNewsletter .recadoNewsletter.sucesso {
	border: solid 1px rgba(63, 34, 114, 0.25);
	background: rgba(63, 34, 114, 0.07);
}

.boxNewsletter .recadoNewsletter.sucesso i,
.boxNewsletter .recadoNewsletter.sucesso span {
	color: var(--primary);
}

/* Depois do cadastro o formulário sai e o recado fica sozinho na coluna.

   Aí ele deixa de ser um aviso em cima dos campos e passa a ser a confirmação
   inteira: centrado, com o ícone grande e sem a borda de caixa dentro de
   caixa. Do contrário sobrava uma tarjinha no meio de um vazio do tamanho do
   formulário que saiu. */

.boxNewsletter .colunaFormulario > .recadoNewsletter:only-child {
	flex-direction: column;
	align-items: center;
	gap: 14px;
	border: 0;
	background: none;
	padding: 24px 6px;
	margin: 0;
	text-align: center;
}

.boxNewsletter .colunaFormulario > .recadoNewsletter:only-child i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 9999px;
	background: rgba(63, 34, 114, 0.1);
	font-size: 22px;
	margin: 0;
}

.boxNewsletter .colunaFormulario > .recadoNewsletter:only-child span {
	max-width: 320px;
	font-size: 15px;
	line-height: 24px;
	font-weight: 500;
}

/*********************************************
** Tablet e desktop
*********************************************/

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

	.boxNewsletter {
		padding: 72px 0 88px 0;
	}

	.boxChamada:has(+ .boxNewsletter) {
		padding-bottom: 56px;
	}

	.boxNewsletter .cartaoNewsletter {
		gap: 40px;
		border-radius: 32px;
		padding: 48px 40px;
	}

	.boxNewsletter .colunaFormulario {
		padding: 28px 24px;
	}

}

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

	/* Daqui para cima as duas colunas ficam lado a lado, com o formulário
	   travado em 420px: mais largo que isso e os campos ficariam com uma linha
	   de digitação bem maior que o texto que eles pedem. */

	.boxNewsletter .cartaoNewsletter {
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
		align-items: center;
		gap: 56px;
		padding: 56px;
	}

}

/*********************************************
** Celular
*********************************************/

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

	/* A trama fecha e as manchas encolhem, senão elas tomam a tela inteira - é
	   o mesmo ajuste que as outras faixas fazem */

	.boxNewsletter .fundoNewsletter .grade {
		background-image: repeating-linear-gradient(-45deg, transparent 0px, transparent 17px, rgba(63, 34, 114, 0.05) 17px, rgba(63, 34, 114, 0.05) 18px);
	}

	.boxNewsletter .fundoNewsletter .bolhaEsquerda,
	.boxNewsletter .fundoNewsletter .bolhaDireita {
		width: 300px;
		height: 250px;
	}

	/* O título do cartão em faixa estreita: o .tituloSecao é desenhado para a
	   largura cheia da seção, e dentro do cartão ele fica grande demais para a
	   linha curta que sobra */

	.boxNewsletter .colunaTexto .tituloSecao {
		font-size: 24px;
		line-height: 32px;
	}

}

/*********************************************
** Menos animação
*********************************************/

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

	.boxNewsletter .formNewsletter .boxInput > i,
	.boxNewsletter .formNewsletter .boxInput input {
		transition-duration: 0.01ms;
	}

}