/* Nobira · site
   Papel claro e quente, tinta verde-escura, verde-petróleo da marca como única cor de ação.
   Números sempre em Geist Mono tabular: o site é, no fundo, um extrato bem lido. */

@font-face {
	font-family: "Geist";
	src: url("/site/fontes/geist.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: "Geist Mono";
	src: url("/site/fontes/geist-mono.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--papel: #f2f5f3;
	--papel-2: #e8eeeb;
	--cartao: #fcfdfc;
	--tinta: #0f1f1b;
	--tinta-2: #364743;
	--suave: #56655f;
	--regra: #d5dedb;
	--regra-forte: #b4c2bd;
	--marca: #0e7c66;
	--marca-contraste: #ffffff;
	--marca-tinta: #0b6352;
	--menta: #3ddbb3;
	--fundo-escuro: #0a2a24;
	--fundo-escuro-2: #0e342d;
	--tinta-clara: #e9f1ee;
	--suave-clara: #9fb5ae;
	--regra-clara: rgba(233, 241, 238, 0.14);
	--positivo: #0e7c66;
	--atencao: #8a4f05;
	--atencao-fundo: #f6e7cf;
	--negativo: #a8372b;

	--sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--largura: 1200px;
	--gutter: clamp(16px, 4vw, 40px);
	--raio: 10px;
	--sombra: 0 1px 0 rgba(15, 31, 27, 0.04), 0 12px 32px -12px rgba(15, 31, 27, 0.18);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--papel: #0c1715;
		--papel-2: #10201c;
		--cartao: #12221e;
		--tinta: #e6eeeb;
		--tinta-2: #b9c7c2;
		--suave: #8a9b95;
		--regra: #22342f;
		--regra-forte: #33483f;
		--marca: #3ddbb3;
		--marca-contraste: #062019;
		--marca-tinta: #3ddbb3;
		--fundo-escuro: #061512;
		--fundo-escuro-2: #0a1d19;
		--positivo: #3ddbb3;
		--atencao: #f0b45a;
		--atencao-fundo: rgba(240, 180, 90, 0.12);
		--negativo: #f08a7c;
		--sombra: 0 1px 0 rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
	}
}
:root[data-theme="dark"] {
	--papel: #0c1715;
	--papel-2: #10201c;
	--cartao: #12221e;
	--tinta: #e6eeeb;
	--tinta-2: #b9c7c2;
	--suave: #8a9b95;
	--regra: #22342f;
	--regra-forte: #33483f;
	--marca: #3ddbb3;
	--marca-contraste: #062019;
	--marca-tinta: #3ddbb3;
	--fundo-escuro: #061512;
	--fundo-escuro-2: #0a1d19;
	--positivo: #3ddbb3;
	--atencao: #f0b45a;
	--atencao-fundo: rgba(240, 180, 90, 0.12);
	--negativo: #f08a7c;
	--sombra: 0 1px 0 rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}
body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.55;
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img,
svg {
	display: block;
	max-width: 100%;
}
a {
	color: inherit;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
	margin: 0;
}
ul,
ol {
	padding: 0;
	list-style: none;
}
::selection {
	background: var(--menta);
	color: #062019;
}
:focus-visible {
	outline: 2px solid var(--marca);
	outline-offset: 3px;
	border-radius: 4px;
}

.moldura {
	width: 100%;
	max-width: calc(var(--largura) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.num {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
.rotulo {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--suave);
}
.visualmente-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.pular {
	position: absolute;
	left: 16px;
	top: -48px;
	background: var(--tinta);
	color: var(--papel);
	padding: 8px 14px;
	border-radius: 6px;
	z-index: 50;
	text-decoration: none;
}
.pular:focus {
	top: 12px;
}

/* ── Topo ───────────────────────────────────────────── */
.topo {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 20;
	background: color-mix(in srgb, var(--papel) 86%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
.topo[data-rolou] {
	border-bottom-color: var(--regra);
}
.topo__linha {
	display: flex;
	align-items: center;
	gap: 32px;
	height: 68px;
}
.marca {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.marca__simbolo {
	width: 28px;
	height: 28px;
}
.marca__nome {
	font-weight: 620;
	font-size: 19px;
	letter-spacing: -0.025em;
}
.topo__nav {
	display: flex;
	gap: 28px;
	margin-left: 12px;
	font-size: 15px;
}
.topo__nav a {
	text-decoration: none;
	color: var(--tinta-2);
}
.topo__nav a:hover {
	color: var(--tinta);
}
.topo__acoes {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 15px;
}
/* Botão de tema (#739): no escuro mostra o sol, no claro a lua, como o do app. A escolha vem de tema.js. */
.tema-botao {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--regra);
	border-radius: 999px;
	background: transparent;
	color: var(--tinta-2);
	cursor: pointer;
}
.tema-botao:hover {
	color: var(--tinta);
	border-color: var(--regra-forte);
}
.tema-botao .i-sol {
	display: none;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .tema-botao .i-sol {
		display: block;
	}
	:root:not([data-theme="light"]) .tema-botao .i-lua {
		display: none;
	}
}
:root[data-theme="dark"] .tema-botao .i-sol {
	display: block;
}
:root[data-theme="dark"] .tema-botao .i-lua {
	display: none;
}
.link-discreto {
	text-decoration: none;
	color: var(--tinta-2);
}
.link-discreto:hover {
	color: var(--tinta);
}

/* ── Botões ─────────────────────────────────────────── */
.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	padding: 0 22px;
	background: var(--marca);
	color: var(--marca-contraste);
	border: 1px solid var(--marca);
	border-radius: 8px;
	font: 560 16px / 1 var(--sans);
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color 0.15s,
		transform 0.15s,
		box-shadow 0.15s;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 1px 2px rgba(15, 31, 27, 0.2);
}
.botao:hover {
	background: var(--marca-tinta);
}
.botao:active {
	transform: translateY(1px);
}
.botao .seta {
	width: 16px;
	height: 16px;
	transition: transform 0.2s;
}
.botao:hover .seta {
	transform: translateX(3px);
}
.botao--pequeno {
	height: 38px;
	padding: 0 16px;
	font-size: 14.5px;
}
.botao--contorno {
	background: transparent;
	color: var(--tinta);
	border-color: var(--regra-forte);
	box-shadow: none;
}
.botao--contorno:hover {
	background: var(--papel-2);
}
.botao--largo {
	width: 100%;
}
.botao--claro {
	background: var(--tinta-clara);
	color: #08241e;
	border-color: var(--tinta-clara);
}
.botao--claro:hover {
	background: #fff;
}
.botao--contorno-claro {
	background: transparent;
	color: var(--tinta-clara);
	border-color: rgba(233, 241, 238, 0.3);
	box-shadow: none;
}
.botao--contorno-claro:hover {
	background: rgba(233, 241, 238, 0.08);
}
.link-seta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	text-underline-offset: 4px;
}
.link-seta::after {
	content: "→";
	transition: transform 0.2s;
}
.link-seta:hover::after {
	transform: translateX(3px);
}

/* ── Tipografia de títulos ──────────────────────────── */
.sobretitulo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tinta-2);
}
.ponto {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--marca);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 18%, transparent);
}
.titulo-mor {
	font-size: clamp(40px, 6.4vw, 80px);
	line-height: 0.98;
	letter-spacing: -0.045em;
	font-weight: 600;
	text-wrap: balance;
}
.tom-suave {
	color: var(--suave);
	font-weight: 520;
}
.titulo-secao {
	font-size: clamp(30px, 4vw, 50px);
	line-height: 1.04;
	letter-spacing: -0.035em;
	font-weight: 600;
	text-wrap: balance;
}
.indice {
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: var(--marca-tinta);
	margin-bottom: 20px;
}
.secao__intro {
	margin-top: 20px;
	max-width: 58ch;
	color: var(--tinta-2);
	font-size: 18.5px;
	line-height: 1.55;
	text-wrap: pretty;
}

/* ── Abertura ───────────────────────────────────────── */
.abertura {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	gap: clamp(32px, 4.5vw, 64px);
	align-items: center;
	padding-top: clamp(40px, 6vw, 80px);
	padding-bottom: clamp(56px, 8vw, 112px);
}
.abertura__texto .titulo-mor {
	margin-top: 24px;
	font-size: clamp(40px, 5.2vw, 68px);
}
.abertura__texto .titulo-mor .tom-suave {
	display: block;
}
.abertura__sub {
	margin-top: 28px;
	max-width: 46ch;
	font-size: 19px;
	line-height: 1.55;
	color: var(--tinta-2);
	text-wrap: pretty;
}
.abertura__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 36px;
}
.abertura__acoes .link-seta {
	align-self: center;
	padding-inline: 6px;
}
.abertura__acoes--centro {
	justify-content: center;
}
.abertura__nota {
	margin-top: 16px;
	font-size: 14px;
	color: var(--suave);
}

/* Cena ao vivo: a transação chega do banco, o Nobira entende, o mês da casa se mexe */
.cena {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	background: var(--papel-2);
	border: 1px solid var(--regra);
	border-radius: 20px;
	box-shadow: var(--sombra);
	min-width: 0;
	contain: layout paint;
}
.cena__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 4px 0;
	font-size: 13px;
	color: var(--suave);
}
.cena__casa {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ao-vivo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--marca-tinta);
	flex: none;
}
.ao-vivo__ponto {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--marca);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--marca) 50%, transparent);
	animation: pulsar 2s ease-out infinite;
}
@keyframes pulsar {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--marca) 45%, transparent);
	}
	70%,
	100% {
		box-shadow: 0 0 0 9px transparent;
	}
}

.tx {
	position: relative;
	background: var(--cartao);
	border: 1px solid var(--regra);
	border-radius: 14px;
	padding: 16px 18px 18px;
	box-shadow:
		0 1px 0 rgba(15, 31, 27, 0.04),
		0 18px 36px -18px rgba(15, 31, 27, 0.28);
	height: 212px;
	overflow: hidden;
	transition:
		transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.45s ease;
}
.tx__cabeca {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--tinta-2);
}
.tx__origem {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.tx__origem span:last-child {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.banco {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--b);
	flex: none;
}
.tx__estado {
	flex: none;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--marca) 14%, transparent);
	color: var(--marca-tinta);
	transition:
		background-color 0.3s,
		color 0.3s;
}
.tx[data-estado="chegando"] .tx__estado,
.tx[data-estado="lendo"] .tx__estado {
	background: var(--papel-2);
	color: var(--tinta-2);
}

.tx__cru {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px dashed var(--regra-forte);
	border-radius: 8px;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--tinta-2);
	transition:
		margin 0.45s ease,
		padding 0.45s ease,
		font-size 0.45s ease,
		opacity 0.45s ease,
		border-color 0.45s;
}
.tx__cru-texto {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}
.tx__cru-texto.digitando::after {
	content: "▍";
	color: var(--marca);
	animation: piscar 0.8s steps(1) infinite;
}
@keyframes piscar {
	50% {
		opacity: 0;
	}
}
.tx__varredura {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--menta) 38%, transparent) 50%,
		transparent
	);
	transform: translateX(-100%);
	pointer-events: none;
}
.tx[data-estado="lendo"] .tx__varredura {
	animation: varrer 0.9s ease-in-out 2;
}
@keyframes varrer {
	to {
		transform: translateX(100%);
	}
}
.tx[data-estado="entendido"] .tx__cru {
	margin-top: 8px;
	padding: 0 0 2px;
	border-color: transparent;
	font-size: 11px;
	opacity: 0.75;
}

.tx__lido {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	transition:
		opacity 0.4s ease,
		transform 0.4s ease;
}
.tx[data-estado="chegando"] .tx__lido,
.tx[data-estado="lendo"] .tx__lido {
	opacity: 0;
	transform: translateY(6px);
	height: 0;
	margin-top: 0;
	overflow: hidden;
}
.logo {
	--t: 40px;
	width: var(--t);
	height: var(--t);
	flex: none;
	display: inline-grid;
	place-items: center;
	border-radius: calc(var(--t) * 0.26);
	background: var(--lb, var(--marca));
	color: var(--lf, #fff);
	font-weight: 680;
	font-size: calc(var(--t) * 0.42);
	letter-spacing: -0.02em;
	line-height: 1;
	box-shadow: 0 0 0 0.5px rgba(15, 31, 27, 0.12);
	isolation: isolate;
}
.logo svg {
	width: 58%;
	height: 58%;
	fill: currentColor;
}
.logo--cheio {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
.logo--cheio svg {
	width: 100%;
	height: 100%;
}
.logo[style*="--lb:#fff"] {
	box-shadow: 0 0 0 1px var(--regra);
}
/* Bancos (#406): o logo oficial tratado sobre o branco, igual ao app. */
.logo--banco {
	background: #fff;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(15, 31, 27, 0.12);
}
.logo--banco.logo--escuro {
	background: #13201c;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.logo--banco img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.logo--texto {
	font-size: calc(var(--t) * 0.3);
	letter-spacing: -0.04em;
	font-weight: 750;
}
.bancos {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}
.bancos .logo + * {
	margin-left: 0;
}
.bancos .logo:not(:first-child) {
	margin-left: 6px;
}
.pilha {
	display: inline-flex;
	margin-top: 4px;
}
.pilha .logo {
	box-shadow: 0 0 0 2px var(--fundo-escuro);
}
.pilha .logo + .logo {
	margin-left: -4px;
}
.selo {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: var(--m);
	color: #fff;
	font-weight: 650;
	font-size: 17px;
	letter-spacing: -0.02em;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.selo--p {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	font-size: 12px;
}
.tx__nome {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.tx__nome b {
	font-weight: 600;
	font-size: 16.5px;
	letter-spacing: -0.015em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tx__nome small {
	color: var(--suave);
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tx__valor {
	font-size: 16px;
	font-weight: 560;
}
.tx__valor.positivo {
	color: var(--positivo);
}
.tx__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
	min-height: 26px;
}
.tag {
	font-family: var(--mono);
	font-size: 11.5px;
	padding: 4px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--marca) 11%, transparent);
	color: var(--marca-tinta);
	animation: brotar 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
.tag::before {
	content: "+ ";
	opacity: 0.6;
}
.tag--atencao {
	background: var(--atencao-fundo);
	color: var(--atencao);
}
@keyframes brotar {
	from {
		opacity: 0;
		transform: translateY(4px) scale(0.92);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.tx.saindo {
	transform: translateY(14px) scale(0.98);
	opacity: 0;
}
.tx.entrando {
	transform: translateY(-14px);
	opacity: 0;
	transition: none;
}

.painel {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.metrica {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	background: var(--cartao);
	border: 1px solid var(--regra);
	border-radius: 12px;
	min-width: 0;
}
.metrica .rotulo {
	font-size: 10.5px;
}
.metrica b {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
	transition: color 0.4s;
}
.metrica small {
	font-size: 11.5px;
	color: var(--suave);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.metrica.mudou b {
	color: var(--marca-tinta);
}
.metrica__barra {
	height: 4px;
	border-radius: 2px;
	background: var(--regra);
	overflow: hidden;
	margin-top: 6px;
}
.metrica__barra span {
	display: block;
	height: 100%;
	width: var(--p);
	background: var(--marca);
	transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.feed {
	display: grid;
	gap: 2px;
	background: var(--cartao);
	border: 1px solid var(--regra);
	border-radius: 12px;
	padding: 6px;
}
.feed li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 8px;
	font-size: 14px;
}
.feed li span:nth-child(2) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.feed li .num {
	font-size: 13px;
	color: var(--tinta-2);
}
.feed li .num.positivo {
	color: var(--positivo);
}
.feed li.novo {
	animation:
		cair 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both,
		realce 2.2s ease 0.2s both;
}
@keyframes cair {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes realce {
	from {
		background: color-mix(in srgb, var(--menta) 26%, transparent);
	}
	to {
		background: transparent;
	}
}

/* ── Fatos ──────────────────────────────────────────── */
.fatos {
	border-block: 1px solid var(--regra);
	background: var(--papel-2);
}
.fatos__lista {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.fatos__lista li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 28px 28px 30px 0;
	font-size: 14.5px;
	color: var(--tinta-2);
	line-height: 1.45;
}
.fatos__lista li + li {
	padding-left: 28px;
	border-left: 1px solid var(--regra);
}
.fatos__num {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tinta);
	font-weight: 560;
}

/* ── Seções ─────────────────────────────────────────── */
.secao {
	padding-block: clamp(80px, 11vw, 144px);
}
.secao__cabeca {
	max-width: 780px;
	margin-bottom: clamp(48px, 6vw, 80px);
}
.secao__cabeca--estreita {
	margin-bottom: 40px;
}

/* Roteiro: texto rola, a tela fica */
/* Roteiro: quatro perguntas à esquerda, a tela da pergunta escolhida à direita.
   Avança sozinho com a barra de progresso; clicar escolhe e para o avanço. */
.roteiro {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}
.roteiro.com-palco .roteiro__passos {
	min-height: 464px;
}
.roteiro__passos {
	border-top: 1px solid var(--regra);
}
.passo {
	position: relative;
	padding: 22px 0 24px 52px;
	border-bottom: 1px solid var(--regra);
}
.passo__num {
	position: absolute;
	left: 0;
	top: 25px;
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--suave);
}
.passo__titulo {
	font-size: clamp(19px, 1.8vw, 23px);
	letter-spacing: -0.022em;
	line-height: 1.2;
	font-weight: 600;
}
.passo p {
	margin-top: 10px;
	max-width: 46ch;
	color: var(--tinta-2);
	text-wrap: pretty;
}
.passo__visual {
	margin-top: 24px;
}
.passo__progresso {
	display: none;
}
.roteiro__palco {
	display: none;
}

.roteiro.com-palco .passo__visual {
	display: none;
}
.roteiro.com-palco .passo {
	cursor: pointer;
	transition: background-color 0.2s;
}
.roteiro.com-palco .passo:focus-visible {
	outline-offset: -2px;
}
.roteiro.com-palco .passo__titulo {
	color: var(--suave);
	transition: color 0.25s;
}
.roteiro.com-palco .passo:hover .passo__titulo {
	color: var(--tinta-2);
}
.roteiro.com-palco .passo p {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 0;
	opacity: 0;
	transition:
		grid-template-rows 0.4s ease,
		margin 0.4s ease,
		opacity 0.3s ease;
}
.roteiro.com-palco .passo p > span {
	overflow: hidden;
}
.roteiro.com-palco .passo.ativo .passo__titulo {
	color: var(--tinta);
}
.roteiro.com-palco .passo.ativo .passo__num {
	color: var(--marca-tinta);
}
.roteiro.com-palco .passo.ativo p {
	grid-template-rows: 1fr;
	margin-top: 10px;
	opacity: 1;
}
.roteiro.com-palco .passo__progresso {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--marca);
	transform: scaleX(0);
	transform-origin: left;
}
.roteiro.com-palco .passo.ativo .passo__progresso {
	transform: scaleX(var(--progresso, 0));
}
.roteiro.com-palco .roteiro__palco {
	display: grid;
	position: relative;
}
.roteiro__palco > .tela {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 0.4s ease,
		transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
	pointer-events: none;
	visibility: hidden;
}
.roteiro__palco > .tela.visivel {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	visibility: visible;
}

/* Renda: as duas partes do salário e a linha do tempo dos pagamentos */
.partes {
	display: flex;
	gap: 4px;
	height: 52px;
	margin-bottom: 22px;
}
.partes > span {
	width: var(--w);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 12px;
	border-radius: 6px;
	min-width: 0;
}
.partes__a {
	background: color-mix(in srgb, var(--marca) 38%, var(--cartao));
	color: var(--tinta);
}
.partes__b {
	background: var(--marca);
	color: var(--marca-contraste);
}
.partes b {
	font-size: 14px;
	font-weight: 600;
}
.partes small {
	font-size: 11.5px;
}
.linha-tempo {
	position: relative;
	display: grid;
	gap: 0;
}
.linha-tempo::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 10px;
	bottom: 10px;
	width: 1px;
	background: var(--regra-forte);
}
.linha-tempo li {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 12px;
	align-items: baseline;
	padding: 8px 0 8px 24px;
	font-size: 14.5px;
}
.linha-tempo li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 13px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--cartao);
	border: 1.5px solid var(--regra-forte);
}
.linha-tempo li.feito::before {
	background: var(--marca);
	border-color: var(--marca);
}
.linha-tempo li.proximo::before {
	border-color: var(--marca);
	border-style: dashed;
}
.linha-tempo li > span {
	font-size: 12.5px;
	color: var(--suave);
}
.linha-tempo li b {
	font-weight: 540;
}
.linha-tempo li small {
	color: var(--tinta-2);
	font-size: 13px;
}
.linha-tempo li.proximo b,
.linha-tempo li.extra b {
	color: var(--tinta-2);
	font-weight: 500;
}
.linha-tempo li.proximo small,
.linha-tempo li.extra small {
	color: var(--suave);
}

/* Contas fixas: quanto do total já foi pago */
.medidor {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: var(--regra);
	overflow: hidden;
	margin: -4px 0 12px;
}
.medidor span {
	display: block;
	height: 100%;
	width: var(--p);
	background: var(--marca);
	border-radius: 3px;
}

/* Gráficos em SVG, desenhados na escala dos valores */
.grafico {
	width: 100%;
	height: auto;
	overflow: visible;
}
.eixo__grade {
	stroke: var(--regra);
	stroke-width: 1;
}
.eixo__zero {
	stroke: var(--negativo);
	stroke-width: 1;
	stroke-dasharray: 3 4;
	opacity: 0.8;
}
.eixo__rotulo {
	font-family: var(--mono);
	font-size: 11px;
	fill: var(--suave);
	text-transform: uppercase;
}
.barra {
	fill: color-mix(in srgb, var(--marca) 24%, var(--cartao));
}
.barra--atual {
	fill: var(--marca);
}
.valor-barra {
	font-family: var(--mono);
	font-size: 11.5px;
	fill: var(--tinta-2);
}
.valor-barra--atual {
	fill: var(--tinta);
	font-weight: 600;
}
.leque__faixa {
	fill: color-mix(in srgb, var(--marca) 30%, transparent);
}
.leque__faixa--larga {
	fill: color-mix(in srgb, var(--marca) 12%, transparent);
}
.leque__linha {
	fill: none;
	stroke: var(--marca);
	stroke-width: 2.25;
	stroke-linecap: round;
}
.leque__ponto {
	fill: var(--marca);
	stroke: var(--cartao);
	stroke-width: 2;
}
.leque__fim {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 600;
	fill: var(--tinta);
}
.leque__marca {
	stroke: var(--atencao);
	stroke-width: 1;
	stroke-dasharray: 2 3;
}
.legenda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin-top: 14px;
	font-size: 12.5px;
	color: var(--suave);
}
.legenda__cor {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--marca) 24%, var(--cartao));
	margin-left: 6px;
}
.legenda__cor:first-child {
	margin-left: 0;
}
.legenda__cor--forte {
	background: var(--marca);
}
.legenda__traco {
	width: 14px;
	border-top: 1.5px dashed var(--atencao);
	margin-left: 6px;
}

/* Animações ao entrar no palco */
.roteiro__palco .partes > span {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.roteiro__palco .tela.visivel .partes > span {
	transform: none;
}
.roteiro__palco .tela.visivel .partes__b {
	transition-delay: 0.35s;
}
.roteiro__palco .linha-tempo li {
	opacity: 0;
	transform: translateX(-6px);
	transition:
		opacity 0.35s,
		transform 0.35s;
}
.roteiro__palco .tela.visivel .linha-tempo li {
	opacity: 1;
	transform: none;
}
.roteiro__palco .tela.visivel .linha-tempo li:nth-child(2) {
	transition-delay: 0.45s;
}
.roteiro__palco .tela.visivel .linha-tempo li:nth-child(3) {
	transition-delay: 0.7s;
}
.roteiro__palco .tela.visivel .linha-tempo li:nth-child(4) {
	transition-delay: 0.95s;
}
.roteiro__palco .medidor span {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}
.roteiro__palco .tela.visivel .medidor span {
	transform: none;
}
.roteiro__palco .estado {
	opacity: 0;
	transform: scale(0.85);
	transition:
		opacity 0.3s,
		transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.roteiro__palco .tela.visivel .estado {
	opacity: 1;
	transform: none;
}
.roteiro__palco .tela.visivel .fixas li:nth-child(2) .estado {
	transition-delay: 0.2s;
}
.roteiro__palco .tela.visivel .fixas li:nth-child(3) .estado {
	transition-delay: 0.4s;
}
.roteiro__palco .tela.visivel .fixas li:nth-child(4) .estado {
	transition-delay: 0.6s;
}
.roteiro__palco .tela.visivel .fixas li:nth-child(5) .estado {
	transition-delay: 0.8s;
}
.roteiro__palco .tela.visivel .fixas li:nth-child(6) .estado {
	transition-delay: 1s;
}
.roteiro__palco .barra {
	transform-box: fill-box;
	transform-origin: bottom;
	transform: scaleY(0.02);
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
	transition-delay: calc(var(--i) * 0.07s);
}
.roteiro__palco .tela.visivel .barra {
	transform: none;
}
.roteiro__palco .valor-barra {
	opacity: 0;
	transition: opacity 0.4s 0.6s;
}
.roteiro__palco .tela.visivel .valor-barra {
	opacity: 1;
}

.tela {
	background: var(--cartao);
	border: 1px solid var(--regra);
	border-radius: 14px;
	box-shadow: var(--sombra);
	padding: 24px 26px 26px;
}
.tela__topo {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--regra);
	margin-bottom: 18px;
}
.tela__total {
	font-size: 15px;
	color: var(--tinta-2);
}
.tela__topo {
	flex-wrap: wrap;
	row-gap: 6px;
}
.tela__total {
	white-space: nowrap;
}
.tela__total.num {
	font-size: 22px;
	color: var(--tinta);
	font-weight: 560;
}
.tela__total b {
	color: var(--tinta);
	font-weight: 600;
	font-family: var(--mono);
}
.tela__nota {
	margin-top: 18px;
	font-size: 14px;
	color: var(--suave);
}
.tela__nota b {
	color: var(--tinta);
	font-family: var(--mono);
	font-weight: 560;
}

.fixas li {
	display: grid;
	grid-template-columns: 1fr auto 104px;
	align-items: center;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px dashed var(--regra);
	font-size: 15px;
}
.fixas li:last-child {
	border-bottom: 0;
}
.fixas .num {
	color: var(--tinta-2);
	font-size: 14px;
}
.estado {
	justify-self: end;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--suave);
	padding: 3px 7px;
	border-radius: 4px;
	border: 1px solid var(--regra);
}
.estado--ok {
	color: var(--positivo);
	border-color: color-mix(in srgb, var(--positivo) 35%, transparent);
}
.estado--atencao {
	color: var(--atencao);
	background: var(--atencao-fundo);
	border-color: transparent;
}

.tambem {
	margin-top: clamp(56px, 8vw, 96px);
	padding-top: 28px;
	border-top: 1px solid var(--regra);
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
}
.tambem ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	font-size: 16px;
	color: var(--tinta-2);
}
.tambem li::before {
	content: "+";
	font-family: var(--mono);
	color: var(--marca-tinta);
	margin-right: 8px;
}

/* ── Casa ───────────────────────────────────────────── */
.casa {
	background: var(--papel-2);
	border-block: 1px solid var(--regra);
	padding-block: clamp(80px, 10vw, 128px);
}
.casa__grade {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 7vw, 112px);
	align-items: start;
}
.pontos {
	margin-top: 32px;
	display: grid;
	gap: 14px;
}
.pontos li {
	padding-left: 22px;
	position: relative;
	color: var(--tinta-2);
}
.pontos li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 10px;
	height: 1px;
	background: var(--marca);
}
.pontos b {
	color: var(--tinta);
	font-weight: 580;
}
.moradores {
	background: var(--cartao);
	border: 1px solid var(--regra);
	border-radius: 14px;
	box-shadow: var(--sombra);
	padding: 8px 0 0;
}
.morador {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--regra);
}
.morador b {
	display: block;
	font-weight: 580;
}
.morador small {
	color: var(--suave);
	font-size: 13.5px;
}
.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--c) 16%, var(--cartao));
	color: var(--c);
	font-weight: 620;
	border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.papel {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tinta-2);
}
.papel--leitura {
	color: var(--suave);
}
.moradores__soma {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 24px 20px;
	background: var(--papel-2);
	border-radius: 0 0 14px 14px;
}
.moradores__soma .num {
	font-size: 22px;
	font-weight: 560;
}
.moradores__soma small {
	font-size: 13px;
	color: var(--suave);
	margin-left: 2px;
}

/* ── Segurança (escuro) ─────────────────────────────── */
.seguranca {
	background: var(--fundo-escuro);
	color: var(--tinta-clara);
	padding-block: clamp(88px, 11vw, 144px);
	position: relative;
	overflow: hidden;
}
.seguranca::before {
	/* pauta discreta, como papel de livro-caixa */
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(to bottom, transparent 0 47px, rgba(233, 241, 238, 0.035) 47px 48px);
	mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
.seguranca .moldura {
	position: relative;
}
.seguranca .indice {
	color: var(--menta);
}
.seguranca .secao__intro {
	color: var(--suave-clara);
}
.contrato {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--regra-clara);
	border-radius: 14px;
	overflow: hidden;
}
.contrato__col {
	padding: 32px 36px 36px;
}
.contrato__col + .contrato__col {
	border-left: 1px solid var(--regra-clara);
	background: rgba(0, 0, 0, 0.14);
}
.contrato__titulo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 19px;
	font-weight: 580;
	letter-spacing: -0.015em;
	margin-bottom: 20px;
}
.contrato ul {
	display: grid;
	gap: 0;
}
.contrato li {
	padding: 13px 0;
	border-top: 1px solid var(--regra-clara);
	color: #cddbd6;
	font-size: 16px;
}
.sinal {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
	flex: none;
}
.sinal--sim {
	background: var(--menta);
}
.sinal--sim::after {
	content: "";
	width: 9px;
	height: 5px;
	border: solid #062019;
	border-width: 0 0 2px 2px;
	transform: translateY(-1px) rotate(-45deg);
}
.sinal--nao {
	border: 1.5px solid #e08b7e;
}
.sinal--nao::after {
	content: "";
	width: 10px;
	height: 1.5px;
	background: #e08b7e;
}

.consentimento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: clamp(48px, 6vw, 72px);
	counter-reset: c;
}
.consentimento li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 24px 0 0;
	font-size: 15px;
	color: var(--suave-clara);
}
.consentimento li::before {
	content: "";
	position: absolute;
	left: 34px;
	right: 0;
	top: 14px;
	height: 1px;
	background: var(--regra-clara);
}
.consentimento li:last-child::before {
	display: none;
}
.consentimento__n {
	width: 29px;
	height: 29px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var(--mono);
	font-size: 12px;
	border: 1px solid rgba(61, 219, 179, 0.5);
	color: var(--menta);
	margin-bottom: 14px;
	background: var(--fundo-escuro);
	position: relative;
}
.consentimento b {
	color: var(--tinta-clara);
	font-weight: 560;
	font-size: 16px;
}

.ficha {
	margin-top: clamp(56px, 7vw, 88px);
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 8px 24px;
}
.ficha .rotulo {
	color: var(--suave-clara);
	padding-top: 14px;
}
.ficha dl {
	border-top: 1px solid var(--regra-clara);
}
.ficha dl > div {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--regra-clara);
	font-size: 15.5px;
}
.ficha dt {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--menta);
	padding-top: 2px;
}
.ficha dd {
	color: #cddbd6;
}
.ficha .link-seta {
	grid-column: 2;
	margin-top: 18px;
	color: var(--tinta-clara);
}

/* ── Preço ──────────────────────────────────────────── */
.preco {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: start;
}
.calculadora {
	background: var(--cartao);
	border: 1px solid var(--regra);
	border-radius: 14px;
	box-shadow: var(--sombra);
	padding: 28px 30px 30px;
}
/* "Quais bancos você usa?" (#401): nada vem marcado; a quantidade acompanha. */
.bancos-usa {
	border: 0;
	margin: 0 0 18px;
	padding: 0;
	min-width: 0;
}
.bancos-usa__titulo {
	font-weight: 600;
	margin-bottom: 10px;
	padding: 0;
}
.bancos-usa__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bancos-usa__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 6px 12px 6px 6px;
	border: 1px solid var(--regra);
	border-radius: 999px;
	background: var(--cartao);
	cursor: pointer;
	user-select: none;
	font-size: 14px;
}
.bancos-usa__chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.bancos-usa__chip:has(input:checked) {
	border-color: var(--marca);
	box-shadow: inset 0 0 0 1px var(--marca);
	font-weight: 600;
}
.bancos-usa__chip:has(input:checked)::after {
	content: "✓";
	color: var(--marca-tinta);
}
.bancos-usa__chip:has(input:focus-visible) {
	outline: 2px solid var(--marca);
	outline-offset: 2px;
}
.bancos-usa__mais {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--papel-2);
	font-weight: 700;
}
.bancos-usa__dica {
	margin: 10px 0 0;
	color: var(--tinta-2);
	font-size: 14px;
}
.bancos-usa__divide {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-weight: 600;
	cursor: pointer;
}
.bancos-usa__divide input {
	width: 18px;
	height: 18px;
	accent-color: var(--marca);
}
.bancos-usa__por-pessoa {
	margin: 0 0 18px;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--papel-2);
	font-size: 14px;
}
.calculadora__linha {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--regra);
}
.contador {
	display: flex;
	align-items: center;
	border: 1px solid var(--regra-forte);
	border-radius: 8px;
	overflow: hidden;
}
.contador__botao {
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: var(--tinta);
	font: 400 20px / 1 var(--sans);
	cursor: pointer;
}
.contador__botao:hover:not(:disabled) {
	background: var(--papel-2);
}
.contador__botao:disabled {
	color: var(--regra-forte);
	cursor: default;
}
.contador__valor {
	min-width: 44px;
	text-align: center;
	font-size: 17px;
	font-weight: 560;
	border-inline: 1px solid var(--regra);
	line-height: 40px;
}
.alternar {
	display: inline-flex;
	margin-top: 20px;
	padding: 3px;
	background: var(--papel-2);
	border-radius: 8px;
	border: 1px solid var(--regra);
}
.alternar button {
	border: 0;
	background: transparent;
	padding: 7px 14px;
	border-radius: 6px;
	font: 500 14px / 1 var(--sans);
	color: var(--suave);
	cursor: pointer;
}
.alternar button[aria-pressed="true"] {
	background: var(--cartao);
	color: var(--tinta);
	box-shadow: 0 1px 2px rgba(15, 31, 27, 0.12);
}
.calculadora__acoes {
	display: grid;
	gap: 10px;
}
.calculadora__explica {
	margin: 22px 0 24px;
	padding-top: 18px;
	border-top: 1px dashed var(--regra);
	font-size: 14px;
	color: var(--suave);
}
.inclui {
	display: grid;
	border-top: 1px solid var(--regra);
}
.inclui li {
	display: flex;
	gap: 14px;
	align-items: baseline;
	padding: 15px 0;
	border-bottom: 1px solid var(--regra);
	font-size: 16.5px;
}
.inclui li::before {
	content: "";
	flex: none;
	width: 10px;
	height: 6px;
	border: solid var(--marca);
	border-width: 0 0 2px 2px;
	transform: translateY(-3px) rotate(-45deg);
}
/* Grátis, Mensal e Anual (#736): três cartões, lado a lado no largo. */
.planos {
	display: grid;
	gap: 16px;
	margin-bottom: 40px;
}
@media (min-width: 760px) {
	.planos {
		grid-template-columns: repeat(3, 1fr);
	}
}
.planos[hidden] {
	display: none;
}
.planos__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px;
	border: 1px solid var(--regra);
	border-radius: var(--raio);
	background: var(--cartao);
}
.planos__nome {
	font-size: 17px;
	font-weight: 600;
	color: var(--tinta);
}
.planos__preco {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	font-size: 22px;
	font-weight: 600;
	color: var(--tinta);
}
.planos__preco small {
	font-size: 14px;
	font-weight: 400;
	color: var(--suave);
}
.planos__economia {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--marca-tinta);
}
.planos__lista {
	display: grid;
	gap: 6px;
	font-size: 15px;
	color: var(--tinta-2);
}
.porque[hidden] {
	display: none;
}
.porque {
	margin-top: 32px;
	padding: 22px 24px;
	border-left: 2px solid var(--marca);
	background: var(--papel-2);
	border-radius: 0 10px 10px 0;
	color: var(--tinta-2);
	font-size: 15.5px;
}
.porque b {
	color: var(--tinta);
	font-weight: 600;
}
.comparativo {
	margin-top: 22px;
	font-size: 14.5px;
	color: var(--suave);
}
.comparativo .num {
	color: var(--tinta-2);
}
sup a {
	text-decoration: none;
	color: var(--marca-tinta);
	font-family: var(--mono);
	font-size: 11px;
	padding-left: 2px;
}

/* Recibo: o preço como um cupom, item por item */
.recibo {
	position: relative;
	margin-top: 22px;
	padding: 22px 22px 30px;
	background: var(--papel);
	border: 1px solid var(--regra);
	border-bottom: 0;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--tinta-2);
	--dente: 9px;
	-webkit-mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - var(--dente)) no-repeat,
		conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--dente))
		var(--dente) repeat-x;
	mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - var(--dente)) no-repeat,
		conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--dente))
		var(--dente) repeat-x;
}
.recibo__cabeca {
	display: flex;
	justify-content: space-between;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 11px;
	color: var(--suave);
	padding-bottom: 12px;
	border-bottom: 1px dashed var(--regra-forte);
}
.recibo__cabeca span:first-child {
	color: var(--tinta);
	font-weight: 600;
}
.recibo__itens {
	padding: 8px 0;
	border-bottom: 1px dashed var(--regra-forte);
}
.recibo__itens li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 5px 0;
}
.recibo__itens li span:first-child {
	flex: none;
	max-width: 75%;
}
.recibo__itens li::after {
	content: "";
	order: 1;
	flex: 1;
	border-bottom: 1px dotted var(--regra-forte);
	transform: translateY(-3px);
}
.recibo__itens li .num {
	order: 2;
	color: var(--tinta);
}
.recibo__zero,
.recibo__zero .num {
	color: var(--marca-tinta) !important;
}
.recibo__total {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-top: 14px;
}
.recibo__valor {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--sans);
	color: var(--tinta);
}
.recibo__valor small {
	font-size: 20px;
	color: var(--suave);
	font-weight: 500;
}
.recibo__valor .num {
	font-family: var(--sans);
	font-variant-numeric: tabular-nums;
	font-size: clamp(52px, 6vw, 72px);
	font-weight: 620;
	letter-spacing: -0.05em;
	line-height: 0.9;
}
.recibo__detalhe {
	margin-top: 12px;
	font-size: 12px;
	color: var(--suave);
}
/* O compromisso de privacidade fica fora da lista de preços: dado não tem preço. */
.recibo__compromisso {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--regra, currentColor);
	font-family: var(--sans);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--marca-tinta);
}
.recibo__compromisso svg {
	flex: none;
	margin-top: 1px;
}
.recibo.mudou .recibo__valor .num {
	animation: pulso 0.35s ease;
}
@keyframes pulso {
	from {
		opacity: 0.35;
		transform: translateY(3px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Trilho do consentimento: os dados passam; revogar corta na hora */
.trilho {
	margin-top: clamp(40px, 5vw, 64px);
	padding: 28px 32px 26px;
	border: 1px solid var(--regra-clara);
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.16);
}
.trilho__titulo {
	color: var(--suave-clara);
	margin-bottom: 26px;
}
.trilho__caminho {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
	align-items: center;
}
.trilho__no {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2px;
	width: 132px;
}
.trilho__no b {
	font-size: 15px;
	font-weight: 580;
	margin-top: 10px;
}
.trilho__no small {
	font-size: 12.5px;
	color: var(--suave-clara);
}
.trilho__icone {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	border: 1px solid var(--regra-clara);
	background: var(--fundo-escuro);
	color: var(--tinta-clara);
}
.trilho__icone svg {
	width: 24px;
	height: 24px;
}
.trilho__no--nobira .trilho__icone {
	background: var(--menta);
	color: #062019;
	border-color: var(--menta);
}
.trilho__fio {
	position: relative;
	height: 34px;
	margin: 0 4px 34px;
	overflow: hidden;
}
.trilho__fio::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 1.5px solid rgba(61, 219, 179, 0.45);
	transition: border-color 0.3s;
}
.pacote {
	position: absolute;
	top: 50%;
	left: 0;
	translate: -100% -50%;
	font-family: var(--mono);
	font-size: 11px;
	white-space: nowrap;
	padding: 3px 8px;
	border-radius: 999px;
	background: #12443a;
	color: var(--menta);
	border: 1px solid rgba(61, 219, 179, 0.35);
	animation: correr 3.3s linear infinite;
	animation-delay: var(--d);
}
@keyframes correr {
	from {
		left: 0%;
		translate: -100% -50%;
	}
	to {
		left: 100%;
		translate: 0 -50%;
	}
}
.trilho__corte {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 26px;
	height: 26px;
	translate: -50% -50%;
	border-radius: 50%;
	background: var(--fundo-escuro);
	border: 1.5px solid #e08b7e;
	opacity: 0;
	transform: scale(0.6);
	transition:
		opacity 0.3s,
		transform 0.3s;
}
.trilho__corte::before,
.trilho__corte::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 1.5px;
	background: #e08b7e;
	translate: -50% -50%;
	rotate: 45deg;
}
.trilho__corte::after {
	rotate: -45deg;
}
.trilho.revogado .pacote {
	animation-play-state: paused;
	opacity: 0;
	transition: opacity 0.25s;
}
.trilho.revogado .trilho__fio::before {
	border-top-style: dashed;
	border-color: rgba(224, 139, 126, 0.5);
}
.trilho.revogado .trilho__corte {
	opacity: 1;
	transform: none;
}
.trilho.revogado .trilho__no--nobira .trilho__icone {
	background: transparent;
	color: var(--suave-clara);
	border-color: var(--regra-clara);
}
.trilho__controle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 8px;
	padding-top: 18px;
	border-top: 1px solid var(--regra-clara);
}
.trilho__status {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: #cddbd6;
}
.trilho__luz {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--menta);
	flex: none;
	box-shadow: 0 0 0 4px rgba(61, 219, 179, 0.15);
	transition:
		background-color 0.3s,
		box-shadow 0.3s;
}
.trilho.revogado .trilho__luz {
	background: #e08b7e;
	box-shadow: 0 0 0 4px rgba(224, 139, 126, 0.15);
}

/* Vocabulário */
.vocabulario {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.vocabulario ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.vocabulario li {
	font-family: var(--mono);
	font-size: 13px;
	padding: 5px 10px;
	border: 1px solid var(--regra-forte);
	border-radius: 999px;
	color: var(--tinta-2);
	background: var(--cartao);
}

/* Comparado */
.tabela-rolagem {
	overflow-x: auto;
	border: 1px solid var(--regra);
	border-radius: 14px;
	background: var(--cartao);
}
.comparar {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 15.5px;
}
.comparar th,
.comparar td {
	text-align: left;
	padding: 18px 22px;
	border-bottom: 1px solid var(--regra);
	vertical-align: top;
}
.comparar tbody tr:last-child th,
.comparar tbody tr:last-child td {
	border-bottom: 0;
}
.comparar thead th {
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 620;
	letter-spacing: -0.01em;
	color: var(--tinta);
	background: var(--papel-2);
	border-bottom: 2px solid var(--regra-forte);
	padding-block: 20px;
}
.comparar thead th.comparar__nos {
	background: var(--marca);
	color: var(--marca-contraste);
	border-bottom-color: var(--marca);
}
.comparar thead th.comparar__nos .logo {
	margin-right: 8px;
	vertical-align: -4px;
	box-shadow: none;
}
.comparar tbody th {
	font-weight: 540;
	color: var(--tinta);
	width: 26%;
}
.comparar td {
	color: var(--tinta-2);
}
.comparar td small {
	display: block;
	color: var(--suave);
	font-size: 13px;
}
.comparar .comparar__nos {
	background: color-mix(in srgb, var(--marca) 8%, transparent);
	color: var(--tinta);
	font-weight: 540;
}

.comparar tbody tr:first-child .num {
	font-size: 20px;
	font-weight: 600;
}

/* Começar */
.etapas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid var(--regra-forte);
}
.etapas li {
	padding: 28px 28px 0 0;
}
.etapas li + li {
	padding-left: 28px;
	border-left: 1px solid var(--regra);
}
.etapas__n {
	display: block;
	font-size: 44px;
	font-weight: 300;
	color: var(--marca-tinta);
	line-height: 1;
	margin-bottom: 22px;
	letter-spacing: -0.04em;
}
.etapas h3 {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}
.etapas p {
	color: var(--tinta-2);
	font-size: 15.5px;
}

/* Barra fixa (celular) */
.barra-cta {
	display: none;
}

/* ── Carta ──────────────────────────────────────────── */
.carta {
	border-top: 1px solid var(--regra);
	padding-block: clamp(80px, 10vw, 128px);
}
.carta__corpo {
	display: grid;
	grid-template-columns: 200px minmax(0, 680px);
	gap: 24px;
}
.carta__texto p {
	font-size: clamp(19px, 1.9vw, 23px);
	line-height: 1.5;
	letter-spacing: -0.012em;
	color: var(--tinta);
	text-wrap: pretty;
}
.carta__texto p + p {
	margin-top: 1.1em;
}
.carta__assina {
	font-size: 17px !important;
	color: var(--tinta) !important;
	padding-top: 12px;
}
.carta__assina small {
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--suave);
	letter-spacing: 0.01em;
}
.carta__assina a {
	color: var(--suave);
}

/* ── Perguntas ──────────────────────────────────────── */
.perguntas {
	border-top: 1px solid var(--regra);
	max-width: 860px;
}
.perguntas details {
	border-bottom: 1px solid var(--regra);
}
.perguntas summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 22px 0;
	font-size: 18.5px;
	font-weight: 540;
	letter-spacing: -0.015em;
}
.perguntas summary::-webkit-details-marker {
	display: none;
}
.perguntas summary::after {
	content: "+";
	font-family: var(--mono);
	font-weight: 400;
	font-size: 20px;
	color: var(--suave);
	transition: transform 0.25s;
	flex: none;
}
.perguntas details[open] summary::after {
	transform: rotate(45deg);
	color: var(--marca-tinta);
}
.perguntas details p {
	padding: 0 0 24px;
	max-width: 64ch;
	color: var(--tinta-2);
}

/* ── Fecho ──────────────────────────────────────────── */
.fecho {
	background: var(--fundo-escuro);
	color: var(--tinta-clara);
	padding-block: clamp(96px, 12vw, 160px);
	text-align: center;
}
.fecho__corpo {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.fecho__traco {
	width: 76px;
	height: 76px;
	color: var(--menta);
	margin-bottom: 40px;
	overflow: visible;
}
.fecho__traco path {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}
.js-anima .fecho__traco path {
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.6s cubic-bezier(0.6, 0, 0.2, 1);
}
.js-anima .fecho__traco.desenhado path {
	stroke-dashoffset: 0;
}
.titulo-mor--fecho {
	font-size: clamp(36px, 5.4vw, 68px);
}
.fecho .tom-suave {
	color: var(--suave-clara);
}
.fecho .abertura__acoes {
	margin-top: 44px;
}

/* ── Rodapé ─────────────────────────────────────────── */
.rodape {
	background: var(--fundo-escuro-2);
	color: var(--suave-clara);
	border-top: 1px solid var(--regra-clara);
	padding: 64px 0 40px;
	font-size: 14.5px;
}
.rodape .marca__nome {
	color: var(--tinta-clara);
}
.rodape .marca {
	--marca: #3ddbb3;
	--marca-contraste: #062019;
}
.rodape__grade {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--regra-clara);
}
.rodape__marca p {
	margin-top: 14px;
}
.rodape__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rodape__col .rotulo {
	color: #8aa29b;
	margin-bottom: 4px;
}
.rodape__col a {
	text-decoration: none;
	color: #c3d2cd;
	overflow-wrap: anywhere;
}
.rodape__col a:hover {
	color: #fff;
}
.rodape__legal {
	padding-top: 28px;
	display: grid;
	gap: 10px;
	font-size: 13px;
	color: #98ada6;
}
.rodape__legal p {
	max-width: 92ch;
}
.rodape__legal a {
	color: inherit;
}

/* ── Telas médias e pequenas ────────────────────────── */
@media (max-width: 1020px) {
	.topo__nav {
		display: none;
	}
	.abertura {
		grid-template-columns: 1fr;
	}
	.abertura__sub {
		max-width: 60ch;
	}
	.fatos__lista {
		grid-template-columns: 1fr 1fr;
	}
	.fatos__lista li:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}
	.fatos__lista li:nth-child(n + 3) {
		border-top: 1px solid var(--regra);
	}
	.roteiro {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.casa__grade,
	.preco {
		grid-template-columns: 1fr;
	}
	.contrato {
		grid-template-columns: 1fr;
	}
	.contrato__col + .contrato__col {
		border-left: 0;
		border-top: 1px solid var(--regra-clara);
	}
	.consentimento {
		grid-template-columns: 1fr 1fr;
		row-gap: 32px;
	}
	.consentimento li:nth-child(2)::before {
		display: none;
	}
	.ficha,
	.carta__corpo,
	.tambem {
		grid-template-columns: 1fr;
	}
	.ficha .link-seta {
		grid-column: 1;
	}
	.rodape__grade {
		grid-template-columns: 1fr 1fr;
	}
	.rodape__marca {
		grid-column: 1 / -1;
	}
	.etapas {
		grid-template-columns: 1fr 1fr;
		row-gap: 36px;
	}
	.etapas li:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 640px) {
	body {
		font-size: 16px;
	}
	.topo__linha {
		height: 60px;
		gap: 12px;
	}
	.topo__acoes {
		gap: 14px;
	}
	.botao--pequeno {
		padding: 0 12px;
		font-size: 14px;
	}
	.abertura__sub {
		font-size: 17.5px;
	}
	.abertura__acoes .botao {
		flex: 1 1 auto;
	}
	.cena {
		padding: 12px;
		border-radius: 16px;
	}
	.painel {
		grid-template-columns: 1fr 1fr;
	}
	.painel .metrica:first-child {
		grid-column: 1 / -1;
	}
	.tx {
		padding: 14px 14px 16px;
		height: 248px;
	}
	.fatos__lista {
		grid-template-columns: 1fr;
	}
	.fatos__lista li,
	.fatos__lista li + li {
		padding: 20px 0;
		border-left: 0;
	}
	.fatos__lista li + li {
		border-top: 1px solid var(--regra);
	}
	.passo {
		padding-left: 40px;
	}
	.roteiro.com-palco .roteiro__passos {
		min-height: 444px;
	}
	.linha-tempo li {
		grid-template-columns: 48px 1fr;
	}
	.linha-tempo li small {
		grid-column: 2;
	}
	.eixo__rotulo {
		font-size: 15px;
	}
	.valor-barra {
		font-size: 15px;
	}
	.leque__fim {
		font-size: 16px;
	}
	.legenda {
		font-size: 12px;
	}
	.tela {
		padding: 20px 18px 22px;
	}
	.fixas li {
		grid-template-columns: 1fr auto;
		row-gap: 4px;
	}
	.fixas .estado {
		grid-column: 2;
		grid-row: 1;
	}
	.fixas .num {
		grid-column: 1;
		grid-row: 2;
	}
	.contrato__col {
		padding: 26px 22px 28px;
	}
	.consentimento {
		grid-template-columns: 1fr;
	}
	.consentimento li::before {
		display: none;
	}
	.ficha dl > div {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.calculadora {
		padding: 22px 20px 24px;
	}
	.morador {
		padding: 14px 18px;
	}
	.moradores__soma {
		padding: 16px 18px 18px;
	}
	.rodape__grade {
		grid-template-columns: 1fr;
	}
	.etapas {
		grid-template-columns: 1fr;
		row-gap: 0;
	}
	.etapas li,
	.etapas li + li {
		padding: 22px 0;
		border-left: 0;
		border-bottom: 1px solid var(--regra);
		display: grid;
		grid-template-columns: 48px 1fr;
		column-gap: 8px;
	}
	.etapas__n {
		grid-row: span 2;
		font-size: 32px;
		margin: 0;
	}
	.comparar th,
	.comparar td {
		padding: 14px 14px;
		font-size: 14px;
	}
	.recibo {
		padding: 18px 16px 28px;
		font-size: 12.5px;
	}
	.trilho {
		padding: 22px 16px 20px;
	}
	.trilho__no {
		width: 74px;
	}
	.trilho__no small {
		display: none;
	}
	.trilho__no b {
		font-size: 12.5px;
	}
	.trilho__icone {
		width: 44px;
		height: 44px;
		border-radius: 12px;
	}
	.trilho__fio {
		margin-bottom: 26px;
	}
	.pacote {
		font-size: 0;
		padding: 0;
		width: 9px;
		height: 9px;
	}
	.barra-cta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 30;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: color-mix(in srgb, var(--cartao) 92%, transparent);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-top: 1px solid var(--regra);
		font-size: 13.5px;
		color: var(--tinta-2);
		transform: translateY(110%);
		transition: transform 0.3s ease;
	}
	.barra-cta b {
		color: var(--tinta);
		font-weight: 600;
	}
	.barra-cta.visivel {
		transform: none;
	}
	.rodape {
		padding-bottom: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
	.pacote {
		display: none;
	}
	.ao-vivo__ponto {
		animation: none;
	}
}

/* ── 404 ────────────────────────────────────────────── */
.erro-404 {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding-block: 64px;
}
.erro-404 .marca {
	margin-bottom: 40px;
}
.erro-404 .abertura__acoes {
	margin-top: 12px;
}

/* ── Casa interativa ────────────────────────────────── */
.casa__dica {
	padding: 14px 24px 6px;
	font-size: 13px;
	color: var(--suave);
}
.morador__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.morador .bancos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 6px 0 5px;
	border-radius: 8px;
	border: 1px solid var(--regra);
	background: var(--papel);
	font-size: 13px;
	color: var(--tinta-2);
}
.chip__tirar {
	border: 0;
	background: transparent;
	color: var(--suave);
	width: 18px;
	height: 18px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 0;
}
.chip__tirar:hover {
	background: var(--papel-2);
	color: var(--negativo);
}
.chip--novo {
	animation:
		brotar 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both,
		realce 2s ease 0.2s both;
}
.chip--conectando {
	padding: 0 8px;
	white-space: nowrap;
	color: var(--marca-tinta);
	border-style: dashed;
	border-color: color-mix(in srgb, var(--marca) 45%, transparent);
}
.giro {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--marca) 25%, transparent);
	border-top-color: var(--marca);
	animation: girar 0.7s linear infinite;
}
@keyframes girar {
	to {
		transform: rotate(360deg);
	}
}
.chip--mais {
	cursor: pointer;
	padding: 0 10px;
	border-style: dashed;
	color: var(--marca-tinta);
	background: transparent;
	font: 500 13px / 1 var(--sans);
}
.chip--mais:hover,
.chip--mais[aria-expanded="true"] {
	background: color-mix(in srgb, var(--marca) 8%, transparent);
	border-color: var(--marca);
}
.morador__vazio {
	font-size: 13px;
	color: var(--suave);
}
.escolher {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px;
	border: 1px solid var(--regra);
	border-radius: 10px;
	background: var(--papel);
	animation: cair 0.3s ease both;
}
.escolher button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid transparent;
	background: var(--cartao);
	border-radius: 8px;
	padding: 4px 8px 4px 4px;
	font: 500 13px / 1 var(--sans);
	color: var(--tinta);
	cursor: pointer;
}
.escolher button:hover {
	border-color: var(--marca);
}
button.papel {
	border: 1px solid var(--regra);
	background: transparent;
	border-radius: 6px;
	padding: 5px 8px;
	cursor: pointer;
	align-self: start;
	margin-top: 2px;
}
button.papel:hover {
	border-color: var(--marca);
	color: var(--marca-tinta);
}
.morador--novo {
	animation:
		cair 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both,
		realce 2.2s ease 0.3s both;
}
.convidar {
	display: block;
	width: 100%;
	text-align: left;
	padding: 14px 24px;
	border: 0;
	border-bottom: 1px solid var(--regra);
	background: transparent;
	color: var(--marca-tinta);
	font: 560 14.5px / 1.2 var(--sans);
	cursor: pointer;
}
.convidar:hover {
	background: color-mix(in srgb, var(--marca) 6%, transparent);
}
.convidar--fim {
	color: var(--suave);
	font-weight: 400;
	cursor: default;
}
.moradores__preco {
	display: flex;
	align-items: baseline;
	gap: 2px;
}
.moradores__preco .num {
	font-size: 22px;
	font-weight: 600;
}
.moradores__soma.mudou .num {
	color: var(--marca-tinta);
}
.morador {
	align-items: start;
}
.morador .avatar {
	margin-top: 2px;
}
@media (max-width: 640px) {
	.casa__dica {
		padding: 12px 18px 4px;
	}
	.convidar {
		padding: 14px 18px;
	}
}

/* ── Ganho: o que escapa, encontrado ───────────────── */
.ganho {
	padding-block: clamp(80px, 10vw, 136px);
	border-top: 1px solid var(--regra);
}
.ganho__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "texto radar" "motores radar";
	column-gap: clamp(40px, 6vw, 96px);
	align-items: start;
}
.ganho__texto {
	grid-area: texto;
}
.motores {
	grid-area: motores;
}
.radar {
	grid-area: radar;
}
.motores {
	margin-top: 36px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 28px;
	border-top: 1px solid var(--regra);
}
.motores > div {
	padding: 16px 0;
	border-bottom: 1px solid var(--regra);
}
.motores dt {
	font-weight: 600;
	font-size: 15.5px;
	letter-spacing: -0.01em;
}
.motores dt::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--marca);
	margin-right: 9px;
	transform: translateY(-2px);
}
.motores dd {
	margin-top: 4px;
	font-size: 13.5px;
	color: var(--suave);
	line-height: 1.45;
}
.radar {
	position: sticky;
	top: 96px;
	background: var(--fundo-escuro);
	color: var(--tinta-clara);
	border-radius: 20px;
	padding: 26px 22px 22px;
	box-shadow: var(--sombra);
	min-width: 0;
	contain: layout paint;
}
.radar .ao-vivo {
	color: var(--menta);
}
.radar .ao-vivo__ponto {
	background: var(--menta);
}
.radar__topo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 4px 20px;
	border-bottom: 1px solid var(--regra-clara);
}
.radar__total {
	font-family: var(--sans) !important;
	font-size: clamp(40px, 4.6vw, 58px);
	font-weight: 620;
	letter-spacing: -0.045em;
	line-height: 1;
	transition: color 0.3s;
}
.radar.somou .radar__total {
	color: var(--menta);
}
.radar__topo small {
	font-size: 12.5px;
	color: var(--suave-clara);
}
.radar__lista {
	display: grid;
	gap: 10px;
	margin-top: 18px;
	height: 528px;
	overflow: hidden;
	align-content: start;
}
.alerta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	align-items: start;
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba(233, 241, 238, 0.06);
	border: 1px solid var(--regra-clara);
}
.alerta .logo {
	grid-row: span 2;
}
.alerta b {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.alerta p {
	font-size: 13.5px;
	color: #b9cbc5;
	line-height: 1.4;
	margin-top: 2px;
}
.alerta__ganho {
	grid-column: 2;
	justify-self: start;
	margin-top: 6px;
	font-family: var(--mono);
	font-size: 12px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(61, 219, 179, 0.14);
	color: var(--menta);
}
.alerta--novo {
	animation: chegar 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.alerta--novo::after {
	content: none;
}
@keyframes chegar {
	from {
		opacity: 0;
		transform: translateY(-14px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.alerta--novo {
	box-shadow: 0 0 0 1px rgba(61, 219, 179, 0.5);
	transition: box-shadow 1.6s ease 0.8s;
}

/* Símbolo vivo no trilho: o "n" se desenha num traço só e pulsa a cada dado que chega */
.trilho__icone--vivo {
	position: relative;
	overflow: visible;
}
.trilho__icone--vivo svg {
	width: 28px;
	height: 28px;
	overflow: visible;
}
.trilho__icone--vivo .n-traco {
	fill: none;
	stroke: #062019;
	stroke-width: 1.1;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: n-desenhar 4.4s cubic-bezier(0.6, 0, 0.2, 1) infinite;
}
.trilho__icone--vivo .n-cheio {
	fill: #062019;
	opacity: 0;
	animation: n-encher 4.4s ease infinite;
}
.trilho__icone--vivo::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	border: 1.5px solid var(--menta);
	opacity: 0;
	animation: n-pulso 1.1s ease-out infinite;
	animation-delay: 0.2s;
}
@keyframes n-desenhar {
	0% {
		stroke-dashoffset: 1;
		opacity: 1;
	}
	38% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
	55% {
		opacity: 0;
		stroke-dashoffset: 0;
	}
	100% {
		opacity: 0;
		stroke-dashoffset: 0;
	}
}
@keyframes n-encher {
	0%,
	30% {
		opacity: 0;
		transform: scale(0.96);
	}
	48%,
	86% {
		opacity: 1;
		transform: none;
	}
	100% {
		opacity: 0;
	}
}
.trilho__icone--vivo .n-cheio {
	transform-origin: center;
	transform-box: fill-box;
}
@keyframes n-pulso {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.45);
	}
}
.trilho.revogado .trilho__icone--vivo .n-traco,
.trilho.revogado .trilho__icone--vivo .n-cheio,
.trilho.revogado .trilho__icone--vivo::after {
	animation-play-state: paused;
}
.trilho.revogado .trilho__icone--vivo::after {
	opacity: 0;
}
.trilho.revogado .trilho__icone--vivo .n-cheio {
	fill: var(--suave-clara);
}
.trilho.revogado .trilho__icone--vivo .n-traco {
	stroke: var(--suave-clara);
}

@media (max-width: 1020px) {
	.ganho__grade {
		grid-template-columns: 1fr;
		grid-template-areas: "texto" "radar" "motores";
		row-gap: 32px;
	}
	.radar {
		position: relative;
		top: 0;
	}
}
@media (max-width: 640px) {
	.motores {
		grid-template-columns: 1fr;
	}
	.radar {
		padding: 22px 14px 16px;
		border-radius: 16px;
	}
	.radar__lista {
		height: 548px;
	}
	.alerta {
		padding: 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.trilho__icone--vivo .n-cheio {
		opacity: 1;
		animation: none;
	}
	.trilho__icone--vivo .n-traco,
	.trilho__icone--vivo::after {
		animation: none;
		display: none;
	}
}

.morador .bancos {
	min-height: 28px;
}
.morador__vazio {
	line-height: 28px;
	white-space: nowrap;
}

/* Previsão desenhada mês a mês: o ponto corre na frente, o valor acompanha, dezembro acende o risco */
.leque__risco,
.leque__fim-grupo {
	transition: opacity 0.4s ease;
}
.grafico--leque.animando:not(.risco) .leque__risco {
	opacity: 0;
}
.grafico--leque.animando:not(.fim) .leque__fim-grupo {
	opacity: 0;
}
.grafico--leque.risco .leque__balao,
.grafico--leque.risco .leque__balao-texto {
	animation: brotar 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
	transform-box: fill-box;
	transform-origin: center;
}
.leque__balao {
	fill: var(--atencao-fundo);
	stroke: color-mix(in srgb, var(--atencao) 35%, transparent);
}
.leque__balao-texto {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 600;
	fill: var(--atencao);
}
.leque__mes {
	transition:
		opacity 0.3s,
		fill 0.3s;
}
.grafico--leque.animando .leque__mes {
	opacity: 0.4;
}
.grafico--leque.animando .leque__mes.passou {
	opacity: 1;
	fill: var(--tinta);
}
.leque__frente {
	transition: opacity 0.35s ease;
}
.leque__frente-linha {
	stroke: var(--marca);
	stroke-width: 1;
	stroke-dasharray: 2 3;
	opacity: 0.6;
}
.leque__frente-ponto {
	fill: var(--marca);
	stroke: var(--cartao);
	stroke-width: 2.5;
}
.leque__frente-caixa {
	fill: var(--tinta);
}
.leque__frente-valor {
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 600;
	fill: var(--papel);
}
@media (max-width: 640px) {
	.leque__frente-valor {
		font-size: 15px;
	}
	.leque__balao-texto {
		font-size: 13px;
	}
}

/* Logos largos (palavra) em fundo branco e ícones da casa */
.logo--largo svg {
	width: 84%;
	height: 84%;
}
.logo--icone svg {
	width: 56%;
	height: 56%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.logo--icone {
	box-shadow: none;
}
.fixa__nome {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

/* ── Celular: a ordem e o tamanho de quem vende ─────── */
.tela__pergunta {
	display: none;
}
@media (max-width: 640px) {
	main {
		display: flex;
		flex-direction: column;
	}
	main > section {
		order: var(--ordem, 50);
	}
	.so-desktop {
		display: none;
	}

	/* Abertura: título, uma frase, os botões e a cena logo em seguida */
	.abertura {
		padding-top: 28px;
		padding-bottom: 40px;
		gap: 28px;
	}
	.abertura__texto .titulo-mor {
		font-size: 38px;
		margin-top: 16px;
	}
	.abertura__sub {
		margin-top: 16px;
		font-size: 17px;
	}
	.abertura__acoes {
		margin-top: 22px;
		gap: 10px;
	}
	.abertura__nota {
		display: none;
	}
	.cena .painel {
		grid-template-columns: 1fr 1fr;
	}
	.cena .painel .metrica:first-child {
		grid-column: auto;
	}
	.cena .painel .metrica:nth-child(3) {
		display: none;
	}
	.cena .metrica b {
		font-size: 15px;
	}
	.feed li:nth-child(3) {
		display: none;
	}
	.cena__casa {
		font-size: 12px;
	}

	/* Compromissos em 2 × 2 */
	.fatos__lista {
		grid-template-columns: 1fr 1fr;
	}
	.fatos__lista li,
	.fatos__lista li + li {
		padding: 16px 12px 18px 0;
		border-top: 0;
		font-size: 13px;
	}
	.fatos__lista li:nth-child(even) {
		padding-left: 14px;
		border-left: 1px solid var(--regra);
	}
	.fatos__lista li:nth-child(n + 3) {
		border-top: 1px solid var(--regra);
	}
	.fatos__num {
		font-size: 12px;
	}

	.secao {
		padding-block: 64px;
	}
	.secao__cabeca {
		margin-bottom: 32px;
	}
	.titulo-secao {
		font-size: 30px;
	}
	.secao__intro {
		font-size: 16.5px;
		margin-top: 14px;
	}

	/* Chips numa linha que desliza */
	.vocabulario ul,
	.tambem ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		-webkit-mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
		mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
	}
	.vocabulario ul::-webkit-scrollbar,
	.tambem ul::-webkit-scrollbar {
		display: none;
	}
	.vocabulario li {
		white-space: nowrap;
	}
	.tambem {
		margin-top: 40px;
		gap: 12px;
	}
	.tambem ul {
		gap: 8px;
	}
	.tambem li {
		white-space: nowrap;
		font-size: 13.5px;
		padding: 6px 12px;
		border: 1px solid var(--regra);
		border-radius: 999px;
		background: var(--cartao);
	}
	.tambem li::before {
		content: none;
	}

	/* As 4 perguntas viram abas em pílula, com a tela logo abaixo */
	.roteiro.com-palco {
		gap: 16px;
	}
	.roteiro.com-palco .roteiro__passos {
		min-height: 0;
		display: flex;
		gap: 8px;
		border: 0;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--gutter));
		padding: 2px var(--gutter);
	}
	.roteiro.com-palco .roteiro__passos::-webkit-scrollbar {
		display: none;
	}
	.roteiro.com-palco .passo {
		flex: none;
		padding: 9px 14px;
		border: 1px solid var(--regra-forte);
		border-radius: 999px;
		background: var(--cartao);
	}
	.roteiro.com-palco .passo::after {
		content: attr(data-curto);
		font-size: 14px;
		font-weight: 560;
		color: var(--tinta-2);
		white-space: nowrap;
	}
	.roteiro.com-palco .passo > * {
		display: none !important;
	}
	.roteiro.com-palco .passo.ativo {
		background: var(--marca);
		border-color: var(--marca);
	}
	.roteiro.com-palco .passo.ativo::after {
		color: var(--marca-contraste);
	}
	.tela__pergunta {
		display: block;
		font-size: 18px;
		font-weight: 600;
		letter-spacing: -0.02em;
		margin-bottom: 14px;
		color: var(--tinta);
	}

	/* Vale dinheiro: o radar primeiro, os detectores só pelo nome */
	.ganho {
		padding-block: 64px;
	}
	.motores {
		grid-template-columns: 1fr 1fr;
		gap: 0 14px;
		margin-top: 0;
	}
	.motores dd {
		display: none;
	}
	.motores > div {
		padding: 12px 0;
	}
	.motores dt {
		font-size: 14px;
	}

	/* Comparado: tabela de verdade, Apps × Nobira */
	.comparar {
		min-width: 0;
		font-size: 13.5px;
	}
	.comparar th,
	.comparar td {
		padding: 12px 10px;
		font-size: 13.5px;
	}
	.comparar thead th {
		font-size: 13.5px;
		padding-block: 14px;
	}
	.comparar tr > :nth-child(2) {
		display: none;
	}
	.comparar tbody th {
		width: 34%;
	}
	.comparar tbody tr:first-child .num {
		font-size: 16px;
	}
	.comparar thead th.comparar__nos .logo {
		display: none;
	}

	/* Casa: o simulador já mostra o que a lista dizia */
	.casa {
		padding-block: 64px;
	}
	.casa .pontos {
		display: none;
	}
	.casa__grade {
		gap: 28px;
	}

	/* Segurança: o trilho mostra o que os 4 passos diziam */
	.seguranca {
		padding-block: 64px;
	}
	.consentimento {
		display: none;
	}
	.contrato li {
		padding: 10px 0;
		font-size: 15px;
	}
	.contrato__titulo {
		font-size: 17px;
		margin-bottom: 12px;
	}
	.ficha {
		margin-top: 40px;
	}
	.ficha dl > div {
		padding: 10px 0;
		font-size: 14px;
	}

	/* Preço: sem repetir o comparativo */
	.comparativo {
		display: none;
	}
	.porque {
		margin-top: 20px;
		font-size: 14.5px;
		padding: 16px 18px;
	}
	.inclui li {
		padding: 12px 0;
		font-size: 15.5px;
	}

	.carta {
		padding-block: 56px;
	}
	.carta__texto p {
		font-size: 18px;
	}
	.comecar .secao__cabeca {
		margin-bottom: 20px;
	}
	.etapas li,
	.etapas li + li {
		padding: 16px 0;
	}
	.etapas p {
		font-size: 14.5px;
	}
	.fecho {
		padding-block: 72px;
	}
	.moradores__soma {
		gap: 12px;
	}
	.moradores__soma .rotulo {
		flex: 1;
		min-width: 0;
	}
	.moradores__preco {
		white-space: nowrap;
	}
	.rodape {
		padding-top: 44px;
	}
	.rodape__grade {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		padding-bottom: 32px;
	}
	.rodape__grade > .rodape__col:nth-child(2) {
		display: none;
	}
	.rodape__marca {
		grid-column: 1 / -1;
	}
}

fieldset.contador,
fieldset.alternar {
	margin: 0;
	min-inline-size: 0;
}
/* Mensal/Anual com respiro em relação à linha de cima, como no resto da calculadora. */
fieldset.alternar {
	margin-top: 20px;
}
fieldset.contador {
	padding: 0;
}

/* ── Celular: respiro, alvos de toque e letra mínima ──
   Só abaixo de 640px; o desktop fica como está. */
@media (max-width: 640px) {
	/* Botões empilhados: largura total e 12px entre eles */
	.abertura__acoes,
	.fecho .abertura__acoes {
		gap: 12px;
	}
	.abertura__acoes .botao {
		flex: 1 1 100%;
	}
	.calculadora__acoes {
		gap: 12px;
	}
	/* O link de preço é um texto só: sem flex, o sublinhado não se parte */
	.abertura__acoes .link-seta {
		display: block;
		width: 100%;
		min-height: 44px;
		padding: 12px 6px 0;
		text-align: center;
		line-height: 1.4;
	}
	.abertura__acoes .link-seta::after {
		display: inline-block;
		margin-left: 8px;
	}

	/* Topo e barra fixa: alvos de 44px */
	.topo__acoes .link-discreto {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-inline: 4px;
	}
	.topo .marca,
	.rodape .marca,
	.pular {
		min-height: 44px;
	}
	.botao--pequeno {
		height: 44px;
	}

	/* Calculadora: o contador e o período com respiro entre as linhas */
	.bancos-usa__chip {
		min-height: 44px;
	}
	.bancos-usa__divide {
		min-height: 44px;
		margin-top: 4px;
	}
	.calculadora__linha {
		gap: 12px;
		padding-top: 4px;
	}
	.contador {
		flex: none;
	}
	.contador__botao {
		flex: none;
		width: 44px;
		height: 44px;
	}
	.contador__valor {
		line-height: 44px;
	}
	fieldset.alternar {
		margin-top: 20px;
	}
	.alternar button {
		min-height: 44px;
		padding-inline: 18px;
	}

	/* Recibo: o “incluso” não sai da folha e o total não encosta no rótulo */
	.recibo__itens li span:first-child {
		flex: 0 1 auto;
		max-width: none;
		min-width: 0;
	}
	.recibo__itens li .num {
		flex: none;
		white-space: nowrap;
	}
	.recibo__total {
		gap: 12px;
	}
	.recibo__total .rotulo {
		flex: 1 1 auto;
		min-width: 0;
	}
	.recibo__valor {
		flex: none;
	}

	/* A casa: chips numa linha só e toque maior sem mudar o desenho */
	.chip,
	.chip--mais {
		white-space: nowrap;
	}
	.chip__tirar,
	.chip--mais,
	button.papel {
		position: relative;
	}
	.chip__tirar::before,
	.chip--mais::before,
	button.papel::before {
		content: "";
		position: absolute;
		inset: -8px -6px;
	}
	.chip__tirar::before {
		inset: -13px -10px;
	}
	.chip--mais {
		height: 32px;
	}
	.morador .bancos {
		gap: 10px 8px;
	}

	/* Segurança */
	.trilho .botao--pequeno {
		height: 44px;
	}
	.ficha .link-seta {
		min-height: 44px;
	}

	/* Rodapé: e-mail inteiro numa linha e links com 44px */
	.rodape__grade {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	}
	.rodape__col {
		gap: 0;
	}
	.rodape__col a {
		display: flex;
		align-items: center;
		min-height: 44px;
		overflow-wrap: normal;
	}
	.rodape__legal a {
		display: inline-block;
		padding-block: 4px;
	}
	sup a {
		display: inline-block;
		min-width: 24px;
		min-height: 24px;
		text-align: center;
	}
	.metrica .rotulo {
		letter-spacing: 0.02em;
	}
	.carta a[href^="mailto"] {
		display: inline-block;
		padding-block: 13px;
	}

	/* Letra mínima de 12px */
	.rotulo,
	.ao-vivo,
	.tx__estado,
	.metrica .rotulo,
	.metrica small,
	.partes small,
	.tag,
	.estado,
	.papel,
	.recibo__cabeca,
	sup a {
		font-size: 12px;
	}
}

/* Novidades (#731): a página /novidades, gerada do CHANGELOG no build. */
.novidades {
	padding-block: clamp(40px, 8vw, 88px);
	max-width: 52rem;
}
.novidades .titulo-secao {
	margin-block: 0.4rem 0.8rem;
}
.novidades__intro {
	color: var(--suave);
	font-size: 1.0625rem;
	margin-block-end: 2.5rem;
}
.novidades__semana {
	border-block-start: 1px solid var(--regra);
	padding-block: 1.75rem 0.5rem;
}
.novidades__titulo-semana {
	font-size: 1.25rem;
	margin: 0;
}
.novidades__resumo {
	color: var(--suave);
	font-family: var(--mono);
	font-size: 0.8125rem;
	margin-block: 0.25rem 1rem;
}
.novidades__lista {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.novidades__lista li {
	align-items: baseline;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 5.5rem 1fr;
	line-height: 1.5;
}
.novidades__tipo {
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	justify-self: start;
	padding: 0.1rem 0.6rem;
	background: var(--papel-2);
	color: var(--tinta-2);
}
.novidades__tipo--adicionado {
	background: var(--marca);
	color: var(--marca-contraste);
}
.novidades__tipo--alterado {
	background: var(--papel-2);
	color: var(--marca-tinta);
}
.novidades__correcoes {
	margin-block-end: 1rem;
}
.novidades__correcoes summary {
	color: var(--marca-tinta);
	cursor: pointer;
	font-weight: 600;
	margin-block-end: 0.75rem;
	min-height: 44px;
	padding-block: 0.6rem;
}
.novidades__vazio {
	color: var(--suave);
}
@media (max-width: 560px) {
	.novidades__lista li {
		gap: 0.25rem;
		grid-template-columns: 1fr;
	}
}
.novidades__destaques {
	display: grid;
	gap: 0.9rem;
	list-style: none;
	margin: 0.75rem 0 0.5rem;
	padding: 0;
}
.novidades__destaques li {
	line-height: 1.55;
}
.novidades__destaques strong {
	color: var(--tinta);
	font-weight: 650;
}

/* ── Conferência da fatura (#742): o "Sua fatura bate?" do app (#730) ── */
.conferencia {
	/* As tintas do app (web/src/index.css): o mockup tem as cores da tela real. */
	--app-ok: oklch(0.44 0.12 145);
	--app-atencao: oklch(0.46 0.11 65);
	background: var(--fundo-escuro);
	color: var(--tinta-clara);
	padding-block: clamp(80px, 10vw, 136px);
	position: relative;
	overflow: hidden;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .conferencia {
		--app-ok: oklch(0.8 0.15 145);
		--app-atencao: oklch(0.83 0.13 78);
	}
}
:root[data-theme="dark"] .conferencia {
	--app-ok: oklch(0.8 0.15 145);
	--app-atencao: oklch(0.83 0.13 78);
}
.conferencia::before {
	/* um brilho de menta atrás das faturas */
	content: "";
	position: absolute;
	right: -10%;
	top: 10%;
	width: 60%;
	height: 80%;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(61, 219, 179, 0.12), transparent);
}
.conferencia__grade {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}
.conferencia .indice {
	color: var(--menta);
}
.conferencia .tom-suave,
.conferencia .secao__intro {
	color: var(--suave-clara);
}
.conferencia .pontos li {
	color: var(--suave-clara);
}
.conferencia .pontos li::before {
	background: var(--menta);
}
.conferencia .pontos b {
	color: var(--tinta-clara);
}
.conferencia__acoes {
	margin-top: 36px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
}
.conferencia .link-seta {
	color: var(--tinta-clara);
}
.conferencia__app {
	display: grid;
	gap: 16px;
	min-width: 0;
}
.conferencia__app figcaption {
	font-size: 12.5px;
	color: var(--suave-clara);
	padding-left: 4px;
}
.fatura-app {
	background: var(--cartao);
	color: var(--tinta);
	border: 1px solid var(--regra);
	border-radius: 14px;
	padding: 20px 22px;
	box-shadow: var(--sombra);
	display: grid;
	gap: 10px;
	min-width: 0;
	font-size: 15px;
}
.fatura-app--bate {
	width: 86%;
}
.fatura-app--diferenca {
	margin-left: 7%;
	padding-block: 22px 24px;
}
.fatura-app__nome {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.015em;
}
.fatura-app__fechada,
.fatura-app__nota {
	color: var(--suave);
	font-size: 13.5px;
}
.fatura-app__resultado {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 560;
	line-height: 1.35;
}
.fatura-app__resultado svg {
	flex-shrink: 0;
	margin-top: 1px;
}
.fatura-app__resultado--ok {
	color: var(--app-ok);
}
.fatura-app__resultado--atencao {
	color: var(--app-atencao);
}
.fatura-app__lado {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--regra);
	border-radius: 10px;
	overflow: hidden;
}
.fatura-app__lado div {
	display: grid;
	gap: 4px;
	padding: 12px 14px;
}
.fatura-app__lado div + div {
	border-left: 1px solid var(--regra);
}
.fatura-app__lado small {
	font-size: 12px;
	color: var(--suave);
}
.fatura-app__lado b {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
}
.fatura-app__lista {
	display: grid;
	gap: 10px;
	font-size: 13.5px;
}
.fatura-app__linha {
	display: flex;
	gap: 8px;
	align-items: baseline;
}
.fatura-app__desc {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fatura-app__guia {
	flex: 1 1 1rem;
	min-width: 1rem;
	border-bottom: 1px dotted color-mix(in oklch, var(--suave) 45%, transparent);
}
.fatura-app__porque {
	display: block;
	color: var(--suave);
}
.fatura-app__porque strong {
	color: var(--tinta);
	font-weight: 560;
}
@media (max-width: 1020px) {
	.conferencia__grade {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 640px) {
	.fatura-app--bate {
		width: auto;
	}
	.fatura-app--diferenca {
		margin-left: 0;
	}
	.fatura-app {
		padding: 16px;
	}
}