/* ==============================================================================
   PÁGINA DE DOCUMENTO — termos de uso, política de privacidade e o que vier

   Uma folha para as páginas que são só texto longo. Ela existe porque documento
   legal tem um problema de leitura que vitrine não tem: ninguém quer ler, e todo
   mundo precisa achar um parágrafo específico. Então o desenho aqui serve a
   VARREDURA, não à permanência — títulos que saltam, linha curta, e âncora em
   cada seção para o link poder apontar para a cláusula.

   NÃO CARREGA `componentes_compartilhados.css`: não há gaveta de acesso, nem
   carrossel, nem janela flutuante numa página de texto.
   ============================================================================== */

.folha_de_documento {
	max-width: 760px;
	margin: 0 auto;
	padding: 20px 22px 80px;
}

/* A LINHA NÃO PASSA DE ~75 CARACTERES por decisão de leitura, e é por isso que a
   folha tem largura máxima em vez de ocupar a tela. Linha longa faz o olho perder
   o começo da seguinte, e em documento que ninguém quer ler isso é fatal. */
.folha_de_documento p,
.folha_de_documento li {
	color: var(--cor_de_texto_principal);
	line-height: 1.7;
	margin: 0 0 14px;
}

.titulo_de_documento {
	font-size: 1.7rem;
	color: var(--cor_de_texto_principal);
	margin: 10px 0 6px;
}

/* A data de vigência fica no topo, e não no rodapé, porque é a primeira coisa que
   alguém conferindo o documento procura — inclusive plataforma de anúncio. */
.data_de_vigencia_de_documento {
	color: var(--cor_de_texto_suave);
	font-size: 0.9rem;
	margin: 0 0 28px;
}

.resumo_de_documento {
	background-color: var(--cor_de_conversao_clara);
	border-left: 4px solid var(--cor_de_conversao);
	border-radius: var(--raio_de_canto_de_campo);
	padding: 16px 18px;
	margin: 0 0 32px;
}

.resumo_de_documento p:last-child {
	margin-bottom: 0;
}

.titulo_de_secao_de_documento {
	font-size: 1.15rem;
	color: var(--cor_de_texto_principal);
	margin: 34px 0 10px;
	padding-top: 10px;
	border-top: 1px solid var(--cor_de_divisor);
}

/* `scroll-margin-top` é o que faz o link com âncora não esconder o título embaixo
   de barra nenhuma. Sem isso, apontar para uma cláusula leva o leitor a um ponto
   em que o título dela está fora da tela, e ele acha que o link está quebrado. */
.titulo_de_secao_de_documento[id] {
	scroll-margin-top: 20px;
}

.folha_de_documento ul {
	padding-left: 22px;
	margin: 0 0 14px;
}

.termo_em_destaque {
	font-weight: 600;
}

/* Campo que o Felipe ainda precisa preencher. Fica AMARELO E VISÍVEL de propósito:
   um documento no ar com "[CNPJ]" escrito em cinza discreto passa despercebido, e
   passar despercebido aqui é publicar documento pela metade. */
.campo_a_preencher {
	background-color: #fff3cd;
	border-bottom: 2px dotted var(--cor_de_atencao);
	padding: 1px 4px;
	font-weight: 600;
}

.bloco_de_contato_de_documento {
	background-color: var(--cor_de_superficie);
	border: 1px solid var(--cor_de_borda_suave);
	border-radius: var(--raio_de_canto_de_cartao);
	box-shadow: var(--sombra_de_cartao);
	padding: 18px 20px;
	margin-top: 34px;
}

.navegacao_entre_documentos {
	margin-top: 40px;
	padding-top: 18px;
	border-top: 1px solid var(--cor_de_divisor);
	font-size: 0.92rem;
}

.navegacao_entre_documentos a {
	color: var(--cor_de_conversao_escura);
	margin-right: 18px;
}

@media (min-width: 768px) {
	.folha_de_documento {
		padding: 30px 20px 100px;
	}

	.titulo_de_documento {
		font-size: 2.1rem;
	}
}