/* ==========================================================================
   PÁGINA DE FATOS INSTITUCIONAIS — Fase 3
   ==========================================================================

   Página de leitura, não de venda. A hierarquia trabalha para quem varre
   procurando um dado: número em destaque, rótulo do lado, lastro embaixo
   em tom menor.

   A distinção visual entre o que é conferível e o que é declarado é a
   informação mais importante da página, então ela aparece na forma e não
   só no título: a lista declarada perde a barra de destaque.

   Vive sobre o navy do site, então os tokens de texto são os de superfície
   escura, como no bloco de cases.
   ========================================================================== */

.bfd-fatos {
	max-width: 68ch;
	color: var( --bf-white );
}

.bfd-fatos-intro {
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0 0 var( --bf-space-lg );
	color: var( --bf-white );
}

.bfd-fatos-titulo {
	margin: var( --bf-space-lg ) 0 var( --bf-space-sm );
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	color: var( --bf-blue-200 );
	padding-bottom: var( --bf-space-2xs );
	border-bottom: 1px solid var( --bf-navy-500 );
}

/* --- ficha de identificação --------------------------------------------- */

.bfd-fatos-ficha {
	display: grid;
	grid-template-columns: minmax( 8rem, 12rem ) 1fr;
	gap: var( --bf-space-2xs ) var( --bf-space-sm );
	margin: 0;
}

.bfd-fatos-ficha dt {
	font-size: 0.875rem;
	color: var( --bf-blue-200 );
}

.bfd-fatos-ficha dd {
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
	color: var( --bf-white );
}

.bfd-fatos a {
	color: var( --bf-white );
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var( --bf-blue-400 );
}

.bfd-fatos a:hover,
.bfd-fatos a:focus {
	text-decoration-color: currentColor;
}

/* --- listas de números --------------------------------------------------- */

.bfd-fatos-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --bf-space-sm );
}

.bfd-fatos-lista li {
	display: grid;
	grid-template-columns: minmax( 5.5rem, auto ) 1fr;
	gap: 2px var( --bf-space-xs );
	align-items: baseline;
	padding-left: var( --bf-space-xs );
	border-left: 2px solid var( --bf-blue-400 );
}

/* O que é declarado não ganha a barra: a diferença é o conteúdo da página. */
.bfd-fatos-lista--declarada li {
	border-left-color: var( --bf-navy-500 );
}

.bfd-fatos-numero {
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
	color: var( --bf-white );
	font-variant-numeric: tabular-nums;
}

.bfd-fatos-rotulo {
	font-size: 1rem;
	line-height: 1.35;
	color: var( --bf-white );
}

.bfd-fatos-lastro {
	grid-column: 1 / -1;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var( --bf-blue-200 );
}

/* --- blocos de texto ----------------------------------------------------- */

.bfd-fatos-clientes {
	font-size: 1rem;
	line-height: 1.6;
	color: var( --bf-white );
	margin: 0;
}

.bfd-fatos-aviso {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var( --bf-blue-200 );
	margin: 0 0 var( --bf-space-sm );
}

.bfd-fatos-rodape {
	margin: var( --bf-space-lg ) 0 0;
	padding-top: var( --bf-space-sm );
	border-top: 1px solid var( --bf-navy-500 );
	font-size: 0.875rem;
	color: var( --bf-blue-200 );
}

@media ( max-width: 600px ) {
	.bfd-fatos-ficha {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.bfd-fatos-ficha dd {
		margin-bottom: var( --bf-space-2xs );
	}

	.bfd-fatos-lista li {
		grid-template-columns: 1fr;
	}
}