/* NICHO Finanças · todos os kits: peças comuns do índice Tools e das páginas de ferramenta.
   Usa só as variáveis que os 6 kits têm (--nx-*, --fx-ink, --fx-radius, --fx-display) e as peças do base.css do kit (.nx-wrap, .nx-btn, .nx-crumbs). */

.nx-tools-page,
.nx-tool-page,
.nx-tool-embed {
	--ft-ink: var(--fx-ink, color-mix(in oklab, var(--nx-accent) 70%, #000));
	--ft-tint: color-mix(in oklab, var(--nx-accent) 10%, #fff);
	--ft-field: #999999;
	--ft-heading: var(--fx-display, var(--nx-font));
	--ft-heading-weight: var(--fx-display-weight, 800);
	--ft-heading-ls: var(--fx-display-tracking, -.02em);
}

/* Topo (índice e ferramentas): trilha, título e texto em fundo branco ------ */
.nx-tool-head {
	padding: 44px 0 36px;
	background: var(--nx-white, #fff);
}

.nx-tool-head__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.nx-tool-head .nx-crumbs {
	font-size: 14px;
}

.nx-tool-head__title {
	font-family: var(--ft-heading);
	font-size: 52px;
	font-weight: var(--ft-heading-weight);
	line-height: 1.05;
	letter-spacing: var(--ft-heading-ls);
	color: var(--nx-ink);
}

.nx-tool-head__text {
	max-width: 780px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--nx-muted);
}

/* Cartão de ferramenta (índice, "Other tools") ------------------------- */
.nx-tools-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
	scroll-margin-top: 24px;
}

.nx-tools-group[hidden],
.nx-tools-group .nx-tool[hidden] {
	display: none;
}

.nx-tools-group__title {
	font-family: var(--ft-heading);
	font-size: 28px;
	font-weight: var(--ft-heading-weight);
	letter-spacing: var(--ft-heading-ls);
	line-height: 1.2;
	color: var(--nx-ink);
}

.nx-tools-group__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.nx-tool {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 220px;
	padding: 28px;
	border: 1px solid var(--nx-line);
	border-radius: var(--fx-radius, 18px);
	background: var(--nx-white, #fff);
	color: var(--nx-ink) !important;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}

.nx-tool:hover {
	border-color: var(--nx-accent);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .06);
}

.nx-tool__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--ft-tint);
	color: var(--ft-ink);
}

.nx-tool__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.nx-tool__text {
	font-size: 15px;
	line-height: 1.55;
	color: var(--nx-muted);
}

.nx-tool__cta {
	margin-top: auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--ft-ink);
}

/* Página de ferramenta: formulário à esquerda, resultado à direita ------- */
.nx-tool-body {
	padding-bottom: 48px;
	background: var(--nx-white, #fff);
}

.nx-tool-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 32px;
	align-items: start;
}

.nx-tool-form {
	grid-column: span 5;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	border: 1px solid var(--nx-line);
	border-radius: 20px;
	background: var(--nx-soft, #FAFAFA);
	scroll-margin-top: 24px;
}

.nx-tool-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.nx-tool-field[hidden] {
	display: none;
}

.nx-tool-field label,
.nx-tool-field__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--nx-ink);
}

/* Campo de número e lista de opções (mesma aparência). */
.nx-tool-input {
	width: 100%;
	height: 56px;
	padding: 0 16px;
	border: 1.5px solid var(--ft-field);
	border-radius: 12px;
	background: #fff;
	color: var(--nx-ink);
	font: 17px var(--nx-font);
}

select.nx-tool-input {
	cursor: pointer;
}

.nx-tool-input:focus {
	outline: none;
	border-color: var(--nx-accent);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--nx-accent) 14%, #fff);
}

/* Dois campos lado a lado. */
.nx-tool-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* Botões de escolha em pílula (ex.: método, tipo de cálculo). */
.nx-tool-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nx-tool-pill {
	height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--nx-ink);
	border-radius: 999px;
	background: #fff;
	color: var(--nx-ink);
	font: 700 15px var(--nx-font);
	cursor: pointer;
}

.nx-tool-pill[aria-pressed="true"] {
	background: var(--nx-ink);
	color: #fff;
}

.nx-tool-tip {
	font-size: 14px;
	line-height: 1.5;
	color: var(--nx-muted);
}

.nx-tool-submit {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 4px;
}

.nx-tool-submit .nx-btn {
	width: 100%;
	height: 56px;
	font-size: 17px;
	font-weight: 800;
}

.nx-tool-submit__note,
.nx-premio-aviso {
	font-size: 13px;
	line-height: 1.5;
	color: var(--nx-muted);
}

/* Aviso do anúncio logo embaixo do botão, em destaque. */
.nx-premio-aviso {
	font-weight: 600;
	color: var(--nx-ink);
}

/* Botão em link (modelo do ArtQuiz): texto centralizado como no <button>. */
a.nx-btn[role="button"] {
	text-align: center;
	text-decoration: none;
}

.nx-premio-hint,
.nx-tool-submit .nx-premio-hint {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ft-ink);
}

.nx-tool-result {
	grid-column: span 7;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding: 32px;
	border: 1px solid var(--nx-line);
	border-radius: 20px;
	background: #fff;
	scroll-margin-top: 24px;
}

/* Antes do clique: caixa tracejada "Your result shows up here". */
.nx-tool-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 300px;
	padding: 40px 32px;
	border: 1.5px dashed #D9D9D9;
	border-radius: 16px;
	text-align: center;
	font-size: 15px;
	line-height: 1.5;
	color: var(--nx-muted);
}

.nx-tool-empty[hidden],
.nx-tool-out[hidden],
.nx-tool-ad[hidden] {
	display: none;
}

.nx-tool-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--nx-line);
	border-radius: 50%;
	background: var(--nx-soft, #FAFAFA);
	color: var(--ft-ink);
}

.nx-tool-empty strong {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--nx-ink);
}

.nx-tool-empty span {
	max-width: 360px;
}

.nx-tool-empty b {
	color: var(--nx-ink);
}

/* Depois do clique. */
.nx-tool-out {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Número principal ("Monthly payment"). */
.nx-tool-main {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.nx-tool-main__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--nx-muted);
}

.nx-tool-main__value {
	font-size: 56px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.03em;
	color: var(--ft-ink);
	overflow-wrap: anywhere;
}

/* Números menores em caixas cinza. */
.nx-tool-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.nx-tool-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 20px;
	border-radius: 14px;
	background: var(--nx-soft, #FAFAFA);
}

.nx-tool-stat__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--nx-muted);
}

.nx-tool-stat__value {
	font-size: 22px;
	font-weight: 800;
	color: var(--nx-ink);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* Barra dividida em duas cores + legenda. */
.nx-tool-bar {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nx-tool-bar__track {
	display: flex;
	height: 16px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--nx-line);
}

.nx-tool-bar__a {
	background: var(--nx-ink);
}

.nx-tool-bar__b {
	flex-grow: 1;
	background: color-mix(in oklab, var(--nx-accent) 45%, #fff);
}

.nx-tool-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 13px;
	color: var(--nx-muted);
}

.nx-tool-legend span {
	display: flex;
	align-items: center;
	gap: 6px;
}

.nx-tool-legend i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--nx-ink);
}

.nx-tool-legend i.is-b {
	background: var(--nx-accent);
}

/* Tabela do resultado (linhas em grade, rola para o lado no celular). */
.nx-tool-table {
	display: flex;
	flex-direction: column;
	overflow-x: auto;
}

.nx-tool-table__row {
	display: grid;
	grid-template-columns: 70px repeat(4, minmax(90px, 1fr));
	gap: 8px;
	min-width: 480px;
	padding: 10px 0;
	border-bottom: 1px solid var(--nx-line);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.nx-tool-table__row--head {
	padding: 12px 0;
	border-bottom: 2px solid var(--nx-ink);
	font-size: 13px;
	font-weight: 700;
}

.nx-tool-table__note {
	padding-top: 10px;
	font-size: 13px;
	color: var(--nx-muted);
}

/* Aviso no fim do resultado. */
.nx-tool-disclaimer {
	padding-top: 12px;
	border-top: 1px solid var(--nx-line);
	font-size: 13px;
	line-height: 1.5;
	color: var(--nx-muted);
}

.nx-tool-alert {
	padding: 14px 16px;
	border-radius: 12px;
	background: #FFF4E5;
	color: #7A4B00;
	font-size: 14px;
	line-height: 1.5;
}

.nx-tool-alert[hidden] {
	display: none;
}

/* Anúncio que aparece depois do clique. */
.nx-tool-ad {
	display: flex;
	justify-content: center;
	padding: 40px 0;
	background: var(--nx-white, #fff);
}

/* Como calculamos + perguntas frequentes ------------------------------- */
.nx-tool-info {
	padding: 64px 0;
	border-top: 1px solid var(--nx-line);
}

.nx-tool-info__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 48px;
	align-items: start;
}

.nx-tool-info__main {
	grid-column: span 7;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--nx-muted);
}

.nx-tool-info__main strong {
	color: var(--nx-ink);
}

.nx-tool-info__title {
	font-family: var(--ft-heading);
	font-size: 32px;
	font-weight: var(--ft-heading-weight);
	letter-spacing: var(--ft-heading-ls);
	line-height: 1.2;
	color: var(--nx-ink);
}

/* Fórmula em caixa escura. */
.nx-tool-formula {
	padding: 20px 24px;
	border-radius: 14px;
	background: #1B1B1B;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.nx-tool-faq {
	grid-column: 9 / span 4;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--nx-line);
}

.nx-tool-faq__title {
	margin-top: 20px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nx-ink);
}

.nx-tool-faq details {
	padding: 20px 0;
	border-bottom: 1px solid var(--nx-line);
}

.nx-tool-faq summary {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}

.nx-tool-faq p {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--nx-muted);
}

.nx-tool-page > .nx-ad {
	padding-bottom: 48px;
}

/* Outras ferramentas. */
.nx-tool-more {
	padding-bottom: 72px;
}

.nx-tool-more .nx-tools-group__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Responsivo ------------------------------------------------------------ */
@media (max-width: 1180px) {
	.nx-tools-group__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.nx-tool-grid,
	.nx-tool-info__grid {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}
}

@media (max-width: 860px) {
	.nx-tool-head__title {
		font-size: 38px;
	}

	.nx-tool-head__text {
		font-size: 17px;
	}

	.nx-tools-group__title {
		font-size: 24px;
	}

	.nx-tools-group__grid,
	.nx-tool-more .nx-tools-group__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nx-tool {
		min-height: 0;
		padding: 22px;
	}

	.nx-tool-form,
	.nx-tool-result {
		padding: 22px;
	}

	.nx-tool-main__value {
		font-size: 42px;
	}

	.nx-tool-info {
		padding: 48px 0;
	}

	.nx-tool-info__title {
		font-size: 26px;
	}
}

@media (max-width: 560px) {
	.nx-tool-head {
		padding: 32px 0 28px;
	}

	.nx-tool-head__title {
		font-size: 32px;
	}

	.nx-tools-group__grid,
	.nx-tool-more .nx-tools-group__grid,
	.nx-tool-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.nx-tool-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.nx-tool-main__value {
		font-size: 36px;
	}
}

/* Ferramentas do UpCards (comparador e simulador de score) ------------- */
/* Quadro com as cores do app UpCards (azul-marinho e verde-água), igual em todos os kits. */
.nx-uc {
	--uc-ink: #0C2033;
	--uc-muted: #44607C;
	--uc-sub: #35506B;
	--uc-line: #D3DDE8;
	--uc-line-2: #E4EAF1;
	--uc-soft: #F5F8FB;
	--uc-teal: #2FB3A8;
	--uc-link: #336F96;
	--uc-ok: #357550;
	--uc-bad: #B4432F;
	--uc-sans: 'Instrument Sans', var(--nx-font, Inter), Arial, sans-serif;
	--uc-head: 'Schibsted Grotesk', var(--nx-font, Inter), Arial, sans-serif;
	--uc-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
	display: flex;
	flex-direction: column;
	padding: 36px;
	border: 1px solid var(--uc-line);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(12, 32, 51, .04);
	color: var(--uc-ink);
	font-family: var(--uc-sans);
}

.nx-uc-passo {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.nx-uc-passo[hidden] {
	display: none;
}

.nx-uc-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.nx-uc-head__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.nx-uc-selo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 8px;
	border-radius: 999px;
	background: #E7EDF4;
	font-family: var(--uc-head);
	font-size: 13px;
	font-weight: 700;
}

.nx-uc-kicker,
.nx-uc-melhor__label,
.nx-uc-link,
.nx-uc-linha__k {
	font-family: var(--uc-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.nx-uc-kicker {
	color: var(--uc-link);
}

.nx-uc-title {
	margin: 0;
	font-family: var(--uc-head);
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.02;
}

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

/* País do catálogo. */
.nx-uc-pais {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 240px;
	flex-shrink: 0;
}

.nx-uc-pais label {
	font-size: 14px;
	font-weight: 600;
	color: var(--uc-muted);
}

.nx-uc-pais select {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #C2D0DE;
	border-radius: 12px;
	background: #fff;
	color: var(--uc-ink);
	font: 15px var(--uc-sans);
}

/* Botão verde-água e o cinza de espera. */
.nx-uc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56px;
	padding: 0 24px;
	border: 0;
	border-radius: 12px;
	background: var(--uc-teal);
	color: #06243A !important;
	font: 700 16px var(--uc-sans);
	text-decoration: none;
	cursor: pointer;
}

.nx-uc-btn[hidden] {
	display: none;
}

.nx-uc-btn.is-off {
	background: var(--uc-line-2);
	color: #5C6A77 !important;
	cursor: default;
}

.nx-uc-nota,
.nx-uc-aviso {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--uc-muted);
}

.nx-uc-aviso {
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--uc-soft);
	color: var(--uc-ink);
}

/* Desenho do cartão: degradê da API, sombra, bandeira no canto e nome embaixo. */
.nx-uc-placa {
	position: relative;
	display: block;
	flex: none;
	border-radius: 10px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, .5) 100%), linear-gradient(145deg, var(--g1, #3A4654) 0%, var(--g2, #121A23) 100%);
	box-shadow: 0 9px 20px rgba(12, 32, 51, .2), 0 2px 5px rgba(12, 32, 51, .1);
}

.nx-uc-placa__bandeira {
	position: absolute;
	top: 8px;
	left: 9px;
	font-family: var(--uc-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, .88);
}

.nx-uc-placa__nome {
	position: absolute;
	left: 9px;
	right: 9px;
	bottom: 8px;
	overflow: hidden;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (max-width: 860px) {
	.nx-uc {
		padding: 24px;
	}

	.nx-uc-head {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
	}

	.nx-uc-pais {
		width: 100%;
	}

	.nx-uc-title {
		font-size: 34px;
	}
}

@media (max-width: 560px) {
	.nx-uc {
		padding: 20px 16px;
		border-radius: 20px;
	}

	.nx-uc-title {
		font-size: 28px;
	}

	.nx-uc-sub {
		font-size: 15px;
	}
}