/* =============================================================================
 * privacidade.css — Política de Privacidade
 *
 * Documento de leitura corrida, não vitrine: coluna estreita, tipografia
 * confortável e nada que dispute atenção com o texto. Reaproveita o cabeçalho
 * (.pag) e os tokens --if-* que as outras páginas já usam.
 * ========================================================================== */

.doc {
	max-width: 68ch;
	margin: 0 auto;
	padding: 24px 20px 72px;

	display: flex;
	flex-direction: column;
	gap: 26px;

	color: var(--if-ink);
	font-family: var(--if-fonte);
	line-height: 1.65;
}

/* Abertura: um pouco maior que o corpo, para dar entrada no texto. */
.doc__resumo {
	margin: 0;
	font-size: 17px;
	color: var(--if-ink);
}

.doc__data {
	margin: 0;
	font-size: 13px;
	color: var(--if-muted);
}

/* ---------------------------------------------------------------------------
   Seções
   ------------------------------------------------------------------------ */

.doc__secao {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.doc__secao h2 {
	margin: 0;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--if-line);

	font-size: 20px;
	font-weight: 700;
	color: var(--if-ink);
	text-wrap: balance;
}

.doc__secao h3 {
	margin: 6px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--if-ink);
}

.doc__secao p {
	margin: 0;
	color: var(--if-ink);
}

/* ---------------------------------------------------------------------------
   Listas
   ------------------------------------------------------------------------ */

.doc__lista {
	margin: 0;
	padding-left: 20px;

	display: flex;
	flex-direction: column;
	gap: 7px;
}

.doc__lista li::marker {
	color: var(--if-red);
}

/* ---------------------------------------------------------------------------
   Tabelas — rolam sozinhas no celular, sem empurrar a página
   ------------------------------------------------------------------------ */

.doc__tabela-rolagem {
	overflow-x: auto;
	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-surface);
}

.doc__tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.doc__tabela th,
.doc__tabela td {
	padding: 10px 13px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--if-line);
}

.doc__tabela th {
	background: var(--if-bg);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--if-muted);
	white-space: nowrap;
}

.doc__tabela tbody tr:last-child td {
	border-bottom: 0;
}

.doc__tabela code {
	font-size: .88em;
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--if-bg);
	color: var(--if-ink);
	word-break: break-word;
}

/* ---------------------------------------------------------------------------
   Blocos de destaque
   ------------------------------------------------------------------------ */

/* Cada parceiro que recebe dados ganha seu próprio bloco: quem lê precisa
   conseguir responder "quem tem meus dados?" olhando a página de longe. */
.doc__parceiro {
	padding: 14px 16px;
	border: 1px solid var(--if-line);
	border-radius: var(--if-raio);
	background: var(--if-surface);

	display: flex;
	flex-direction: column;
	gap: 8px;
}

.doc__parceiro h3 {
	margin: 0;
	font-size: 15px;
}

/* Observação em voz mais baixa — contexto, não obrigação. */
.doc__nota {
	font-size: 14.5px;
	color: var(--if-muted);
}

.doc__nota b {
	color: var(--if-ink);
}

/* Pendência para quem publica, não para o cliente. Fica visível de propósito:
   uma política sem contato do responsável não cumpre a LGPD. */
.doc__aviso {
	padding: 13px 15px;
	border: 1px solid var(--if-red);
	border-radius: var(--if-raio);
	background: var(--if-red-soft);
	color: var(--if-ink);
	font-size: 14.5px;
}

.doc__vazio {
	padding: 1px 7px;
	border-radius: 4px;
	background: var(--if-red-soft);
	color: var(--if-red-dark, var(--if-red));
	font-size: 13px;
	font-style: italic;
}

/* ---------------------------------------------------------------------------
   Rodapé
   ------------------------------------------------------------------------ */

.doc__rodape {
	margin: 8px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--if-line);
	font-size: 15px;
}

.doc a {
	color: var(--if-red);
	text-underline-offset: 3px;
}

.doc a:focus-visible {
	outline: 2px solid var(--if-red);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   Celular
   ------------------------------------------------------------------------ */

@media (max-width: 480px) {
	.doc {
		padding: 18px 15px 56px;
		gap: 22px;
	}

	.doc__resumo { font-size: 16px; }
	.doc__secao h2 { font-size: 18px; }
}