/* Ferramenta "Credit score simulator" (nicho Finanças, igual nos 6 kits). O quadro do UpCards fica no ferramentas-base.css. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&family=Schibsted+Grotesk:wght@700;800&display=swap');

.nx-sc-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: start;
	gap: 32px 64px;
}

/* Controle do score. */
.nx-sc-controle {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border: 1px solid var(--uc-line);
	border-radius: 20px;
	background: var(--uc-soft);
}

.nx-sc-valor {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.nx-sc-valor label,
.nx-sc-lista__head {
	font-family: var(--uc-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--uc-muted);
}

.nx-sc-valor strong {
	font-family: var(--uc-head);
	font-size: 64px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
}

.nx-sc-range {
	width: 100%;
	height: 28px;
	accent-color: var(--uc-teal);
	cursor: pointer;
}

.nx-sc-escala {
	display: flex;
	justify-content: space-between;
	font-family: var(--uc-mono);
	font-size: 12px;
	color: var(--uc-muted);
}

.nx-sc-faixa {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--uc-sub);
}

.nx-sc-legal {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--uc-line-2);
	font-size: 14px;
	line-height: 1.5;
	color: var(--uc-muted);
}

/* Lista de cartões com a chance. */
.nx-sc-lista {
	display: flex;
	flex-direction: column;
}

.nx-sc-lista__head {
	display: flex;
	justify-content: space-between;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--uc-line);
	font-size: 11px;
}

.nx-sc-item {
	--ch: #B4432F;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--uc-line-2);
}

.nx-sc-item--1 {
	--ch: #8A6510;
}

.nx-sc-item--2 {
	--ch: var(--uc-ok);
}

.nx-sc-item__info {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 8px;
	min-width: 0;
}

.nx-sc-item__nome {
	color: var(--uc-ink) !important;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.nx-sc-item__trilho {
	height: 4px;
	border-radius: 2px;
	background: var(--uc-line-2);
}

.nx-sc-item__barra {
	height: 100%;
	border-radius: 2px;
	background: var(--ch);
	transition: width .15s;
}

.nx-sc-item__chance {
	flex: none;
	padding: 5px 10px;
	border: 1px solid var(--ch);
	border-radius: 5px;
	color: var(--ch);
	font: 600 11px/1 var(--uc-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nx-sc-comissao {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--uc-muted);
}

@media (max-width: 860px) {
	.nx-sc-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	.nx-sc-controle {
		padding: 20px;
	}

	.nx-sc-valor strong {
		font-size: 48px;
	}
}