/*********************************************
** Páginas Legais (privacidade, termos)
*********************************************/

/* Folha das páginas de documento: a Política de Privacidade hoje e os Termos
   de Uso quando eles forem escritos - as duas usam o mesmo desenho, então ele
   mora aqui e não em uma folha por página.

   A abertura é a mesma peça da categoria e da matéria (ver blog.css): o fundo
   animado por trás, o selo, o título sendo digitado e, embaixo, a linha de
   apoio. Em uma coluna, porque aqui não entra nada ao lado dos textos. Quem
   pinta o fundo e desenha o cursor da digitação é o banner.css, que o template
   carrega junto com esta folha.

   O miolo é texto e nada mais, então ele vai no container estreito: na largura
   cheia a linha passaria de 100 caracteres e o olho perderia o começo da linha
   seguinte. */

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

/*********************************************
** Bloco Inicial
*********************************************/

/* O header é fixo e flutua por cima deste bloco escuro: o respiro de cima
   soma a altura dele */

#paginaLegal .blocoInicial {
	width: 100%;
	padding: calc(48px + var(--topoBlocoInicial)) 0 80px 0;
}

/* Aqui não há matéria ao lado dos textos, então quem segura a medida de
   leitura é a própria caixa: em largura inteira o título ficaria esticado de
   ponta a ponta do container */

#paginaLegal .blocoInicial .boxTextos {
	max-width: 760px;
}

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

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

/* Quando o documento mudou pela última vez. Fica abaixo do texto, mais
   discreta que ele: é informação de apoio, não parte da chamada. */

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

#paginaLegal .blocoInicial .infoLegal i {
	font-size: 14px;
	color: var(--accent);
}

/* Fecha o bloco depois de um fio, mais apagado que o texto acima - é um
   lembrete, e não parte da chamada */

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

/*********************************************
** Conteúdo
*********************************************/

#paginaLegal .boxConteudo {
	width: 100%;
	padding: 56px 0;
}

#paginaLegal .conteudo {
	margin-top: 24px;
}

#paginaLegal .conteudo h2,
#paginaLegal .conteudo h3,
#paginaLegal .conteudo h4 {
	color: var(--primary);
	font-weight: 700;
	margin: 40px 0 16px 0;
}

/* O primeiro título do documento não precisa do respiro de cima: acima dele
   está o breadcrumb, e não outra seção */

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

#paginaLegal .conteudo h2 {
	font-size: 22px;
	line-height: 30px;
}

#paginaLegal .conteudo h3 {
	font-size: 18px;
	line-height: 26px;
}

#paginaLegal .conteudo h4 {
	font-size: 16px;
	line-height: 24px;
}

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

#paginaLegal .conteudo p {
	margin: 0 0 20px 0;
}

#paginaLegal .conteudo ul,
#paginaLegal .conteudo ol {
	margin: 0 0 20px 0;
	padding: 0 0 0 22px;
}

#paginaLegal .conteudo li {
	margin: 0 0 10px 0;
}

/* Lista dentro de lista (o "uso adequado da plataforma", nos termos): ela não
   fecha o item que a segura, então o respiro dela é por cima, e não por baixo */

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

/* O marcador em vermelho é a única cor da lista: o texto continua no roxo do
   corpo, senão a lista brigaria com os títulos */

#paginaLegal .conteudo ul li::marker {
	color: var(--accent);
}

#paginaLegal .conteudo ol li::marker {
	color: var(--accent);
	font-weight: 600;
}

#paginaLegal .conteudo strong {
	font-weight: 600;
	color: var(--primary);
}

#paginaLegal .conteudo a {
	color: var(--accentTexto);
	font-weight: 500;
	text-decoration: underline !important;
}

/* Fio entre os assuntos do documento */

#paginaLegal .conteudo hr {
	border: 0;
	border-top: solid 1px var(--border);
	margin: 40px 0;
}

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

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

	#paginaLegal .blocoInicial {
		padding: calc(72px + var(--topoBlocoInicial)) 0 96px 0;
	}

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

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

	#paginaLegal .boxConteudo {
		padding: 72px 0;
	}

	#paginaLegal .conteudo h2 {
		font-size: 26px;
		line-height: 34px;
	}

	#paginaLegal .conteudo h3 {
		font-size: 20px;
		line-height: 28px;
	}

}