/* Nobira · blog (#727, refeito no #738)
   Usa os tokens, o topo, os botões e a cena da landing (estilo.css); aqui ficam a
   abertura do artigo com a fatura de exemplo, o sumário lateral, a leitura longa,
   as demonstrações, o índice editorial e a capa (a mesma página vira a imagem OG).
   Nada de cor fixa fora dos tokens: os dois temas vêm do estilo.css. */

.blog {
	padding-bottom: clamp(48px, 7vw, 96px);
}
/* A landing reordena as seções no celular (main > section); no blog vale a ordem do texto. */
.blog > section {
	order: 0;
}

/* ── Trilha e títulos ──────────────────────────────── */
.trilha {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--suave);
}
.trilha a {
	color: var(--marca-tinta);
	text-decoration: none;
}
.trilha a:hover {
	text-decoration: underline;
}

/* ── Abertura do artigo: texto à esquerda, a fatura no Nobira à direita ── */
.artigo-abertura {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	padding-top: clamp(32px, 5vw, 72px);
	padding-bottom: clamp(40px, 6vw, 88px);
}
.artigo__titulo {
	margin-top: 22px;
	font-size: clamp(36px, 4.6vw, 62px);
	line-height: 1;
	letter-spacing: -0.045em;
	font-weight: 600;
	text-wrap: balance;
}
.artigo__titulo .tom-suave {
	display: block;
}
.artigo__linha-fina {
	margin-top: 24px;
	max-width: 50ch;
	font-size: clamp(17.5px, 1.6vw, 19px);
	line-height: 1.55;
	color: var(--tinta-2);
	text-wrap: pretty;
}
.assinatura {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--regra);
	max-width: 50ch;
}
.assinatura__marca svg {
	width: 36px;
	height: 36px;
}
.assinatura b {
	display: block;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.assinatura small {
	display: block;
	font-size: 13.5px;
	color: var(--suave);
}
.artigo-abertura__cta {
	margin-top: 22px;
	color: var(--marca-tinta);
	font-weight: 540;
}

/* ── Demonstrações (a cena da landing, parada e com dados de exemplo) ── */
.mock {
	contain: none;
	color: var(--tinta);
}
.mock figcaption {
	padding: 0 4px 2px;
	font-size: 12.5px;
	color: var(--suave);
}
.fatura {
	display: grid;
	gap: 14px;
	background: var(--cartao);
	border: 1px solid var(--regra);
	border-radius: 14px;
	padding: 16px;
	box-shadow:
		0 1px 0 rgba(15, 31, 27, 0.04),
		0 18px 36px -18px rgba(15, 31, 27, 0.28);
}
.fatura__cabeca {
	display: flex;
	align-items: center;
	gap: 12px;
}
.fatura__cartao {
	flex: 1;
	min-width: 0;
}
.fatura__cartao b {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.fatura__cartao small {
	display: block;
	font-size: 12.5px;
	color: var(--suave);
}
.fatura__abas {
	display: inline-flex;
	padding: 3px;
	border-radius: 999px;
	background: var(--papel-2);
	font-size: 12.5px;
	flex: none;
}
.fatura__abas span {
	padding: 4px 10px;
	border-radius: 999px;
	color: var(--suave);
}
.fatura__abas .ativa {
	background: var(--cartao);
	color: var(--tinta);
	font-weight: 560;
	box-shadow: 0 1px 2px rgba(15, 31, 27, 0.14);
}
.fatura__total {
	display: grid;
	gap: 4px;
	justify-items: start;
}
.fatura__total b {
	font-size: clamp(30px, 3.2vw, 38px);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1.1;
}
.selo-ok {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--marca) 12%, transparent);
	color: var(--marca-tinta);
	font-size: 12.5px;
	font-weight: 560;
}
.selo-ok svg {
	width: 14px;
	height: 14px;
}
.fatura__datas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.fatura__datas div {
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--papel-2);
	min-width: 0;
}
.fatura__datas dt {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--suave);
}
.fatura__datas dd {
	margin-top: 2px;
	font-size: 14.5px;
	font-weight: 560;
	white-space: nowrap;
}
.fatura__pago {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	font-size: 13.5px;
	color: var(--tinta-2);
}
.fatura__pago .tag {
	background: var(--atencao-fundo);
	color: var(--atencao);
}
.fatura__pago .tag::before {
	content: none;
}
.fatura__pago b {
	color: var(--tinta);
	font-weight: 600;
}
.fatura__compras {
	border: 0;
	padding: 0;
	background: none;
}
.fatura__compras li {
	padding: 7px 2px;
	border-top: 1px solid var(--regra);
	border-radius: 0;
}
.parcela {
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--papel-2);
	font: 500 11.5px / 1.4 var(--mono);
	font-style: normal;
	color: var(--tinta-2);
}

/* Ícones das compras: um traço só, no tom de cada categoria. */
.ic {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--ic-fundo);
	position: relative;
	flex: none;
}
.ic::after {
	content: "";
	position: absolute;
	inset: 6px;
	background: var(--ic-tinta);
	mask: var(--ic) center / contain no-repeat;
}
.ic--mercado {
	--ic-fundo: #e5f3ec;
	--ic-tinta: #1d7a4f;
	--ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2h2l1.6 8h7.4l1.5-5.5H4.3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='6' cy='13.2' r='1.3'/%3E%3Ccircle cx='11.6' cy='13.2' r='1.3'/%3E%3C/svg%3E");
}
.ic--casa {
	--ic-fundo: #e8ecf8;
	--ic-tinta: #34489a;
	--ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 7.5 8 2.5l6 5M3.8 6.2V14h8.4V6.2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ic--saude {
	--ic-fundo: #f8e8e6;
	--ic-tinta: #a8372b;
	--ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ic--volta {
	--ic-fundo: color-mix(in srgb, var(--marca) 14%, transparent);
	--ic-tinta: var(--marca-tinta);
	--ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 2.5 7 6 10.5M2.8 7H10a3.5 3.5 0 0 1 0 7H8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ic--restaurante {
	--ic-fundo: #f6ecdf;
	--ic-tinta: #8a4f05;
	--ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2v5a2 2 0 0 0 2 2v5M6 2v4M8 2v5a2 2 0 0 1-2 2M12 14V2c-1.5 1-2 3-2 6h2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ic--loja {
	--ic-fundo: #efe7f6;
	--ic-tinta: #6a3d99;
	--ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5h10l-.8 9H3.8zM6 5V4a2 2 0 0 1 4 0v1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ic--transporte {
	--ic-fundo: #e4eef6;
	--ic-tinta: #215f8f;
	--ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 10.5V8l1.5-4h8l1.5 4v2.5zM2.5 10.5V13M13.5 10.5V13M5 8h6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ic--assinatura {
	--ic-fundo: #f3e6ee;
	--ic-tinta: #93306a;
	--ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 4.5h11v7h-11zM6.5 6.5l3 1.5-3 1.5z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ic--viagem {
	--ic-fundo: #e3f1f3;
	--ic-tinta: #1f6f78;
	--ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 9.5 14 5l-3.5 8L8 9.5zM8 9.5 14 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Parcelas dos próximos meses. */
.parcelas {
	display: grid;
	gap: 16px;
	background: var(--cartao);
	border: 1px solid var(--regra);
	border-radius: 14px;
	padding: 16px 16px 12px;
}
.parcelas__topo {
	display: grid;
	gap: 2px;
}
.parcelas__topo b {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.035em;
}
.parcelas__topo small {
	font-size: 13px;
	color: var(--suave);
}
.parcelas__barras {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	align-items: end;
	height: 150px;
}
.parcelas__barras li {
	display: grid;
	grid-template-rows: auto 1fr auto;
	justify-items: center;
	gap: 6px;
	height: 100%;
}
.parcelas__barras .num {
	font-size: 10.5px;
	color: var(--suave);
	white-space: nowrap;
}
.parcelas__barras i {
	align-self: end;
	width: 100%;
	max-width: 44px;
	height: var(--h);
	border-radius: 6px 6px 2px 2px;
	background: color-mix(in srgb, var(--marca) 30%, var(--papel-2));
}
.parcelas__barras li:first-child i {
	background: var(--marca);
}
.parcelas__barras b {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--tinta-2);
}
.parcelas__lista li {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 10px;
	padding: 8px 2px;
	border-top: 1px solid var(--regra);
	font-size: 14px;
}
.parcelas__lista .num {
	min-width: 7ch;
	text-align: right;
	color: var(--tinta-2);
}

/* ── Corpo: sumário lateral + uma coluna de leitura ─── */
.artigo-grade {
	display: grid;
	grid-template-columns: 240px minmax(0, 720px);
	justify-content: center;
	gap: clamp(40px, 6vw, 88px);
	padding-top: clamp(8px, 2vw, 24px);
	border-top: 1px solid var(--regra);
}
.sumario {
	position: sticky;
	top: 96px;
	align-self: start;
	padding-top: 36px;
}
.sumario summary {
	list-style: none;
	pointer-events: none;
	margin-bottom: 14px;
}
.sumario summary::-webkit-details-marker {
	display: none;
}
.sumario ol {
	display: grid;
	gap: 2px;
	border-left: 1px solid var(--regra);
}
.sumario a {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 6px;
	padding: 7px 0 7px 14px;
	margin-left: -1px;
	border-left: 2px solid transparent;
	font-size: 14px;
	line-height: 1.35;
	color: var(--tinta-2);
	text-decoration: none;
}
.sumario a:hover,
.sumario a[aria-current] {
	color: var(--tinta);
	border-left-color: var(--marca);
}
.sumario a[aria-current] .num {
	color: var(--marca-tinta);
}
.sumario .num {
	font-size: 11.5px;
	color: var(--suave);
	padding-top: 1px;
}

.artigo__corpo {
	padding-top: 36px;
	min-width: 0;
}
.artigo__corpo > * + * {
	margin-top: 1.05em;
}
.artigo__corpo h2 {
	margin-top: 2.4em;
	font-size: clamp(25px, 2.8vw, 32px);
	line-height: 1.12;
	letter-spacing: -0.03em;
	font-weight: 600;
	text-wrap: balance;
	scroll-margin-top: 96px;
}
.artigo__corpo > h2:first-of-type {
	margin-top: 1.4em;
}
.artigo__corpo h3 {
	margin-top: 1.7em;
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	font-weight: 600;
}
.artigo__corpo p,
.artigo__corpo li {
	text-wrap: pretty;
}
.artigo__corpo a {
	color: var(--marca-tinta);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.artigo__corpo ul,
.artigo__corpo ol {
	padding-left: 1.3em;
}
.artigo__corpo ul {
	list-style: none;
	padding-left: 0;
}
.artigo__corpo > ul > li {
	position: relative;
	padding-left: 32px;
}
.artigo__corpo > ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background:
		color-mix(in srgb, var(--marca) 14%, transparent)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.6 2.6L12 5.6' fill='none' stroke='%230e7c66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 14px no-repeat;
}
.artigo__corpo > ol:not(.passos) {
	counter-reset: item;
	list-style: none;
	padding-left: 0;
}
.artigo__corpo > ol:not(.passos) > li {
	counter-increment: item;
	position: relative;
	padding: 14px 0 14px 48px;
	margin: 0;
	border-top: 1px solid var(--regra);
}
.artigo__corpo > ol:not(.passos) > li:last-child {
	border-bottom: 1px solid var(--regra);
}
.artigo__corpo > ol:not(.passos) > li::before {
	content: counter(item);
	position: absolute;
	left: 0;
	top: 14px;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--regra-forte);
	font: 500 13px / 1 var(--mono);
	color: var(--tinta-2);
}
.artigo__corpo li + li {
	margin-top: 0.55em;
}
.artigo__corpo li::marker {
	color: var(--suave);
}
.artigo__corpo strong {
	font-weight: 600;
}
.artigo__corpo .mock {
	margin-block: 2em;
}

/* Passo a passo no app do banco: números grandes, um cartão como o app. */
.passos-app {
	border: 1px solid var(--regra);
	border-radius: 16px;
	background: var(--cartao);
	box-shadow: var(--sombra);
	overflow: hidden;
}
.passos-app__cabeca {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	background: var(--papel-2);
	border-bottom: 1px solid var(--regra);
	font-size: 14px;
	font-weight: 560;
}
.passos-app__cabeca .rotulo {
	margin-left: auto;
}
.artigo__corpo .passos {
	counter-reset: passo;
	list-style: none;
	padding: 6px 18px;
	margin: 0;
}
.artigo__corpo .passos li {
	counter-increment: passo;
	position: relative;
	min-height: 68px;
	padding: 22px 0 14px 56px;
	margin: 0;
}
.artigo__corpo .passos li + li {
	border-top: 1px dashed var(--regra);
}
.artigo__corpo .passos li::before {
	content: counter(passo, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 14px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--marca) 12%, transparent);
	color: var(--marca-tinta);
	font: 600 15px / 1 var(--mono);
}
.artigo__corpo .passos strong {
	color: var(--tinta);
}

.fonte {
	font-size: 14px;
	color: var(--suave);
}
.fonte a {
	overflow-wrap: anywhere;
}

/* A frase do banco, em destaque, com a página de onde veio. */
.citacao {
	margin-block: 2em;
	padding: 26px 28px;
	border-radius: 16px;
	background: var(--fundo-escuro);
	color: var(--tinta-clara);
}
.citacao .rotulo {
	color: var(--menta);
}
.citacao p {
	margin-top: 12px;
	font-size: clamp(22px, 2.6vw, 28px);
	line-height: 1.22;
	letter-spacing: -0.025em;
	font-weight: 560;
	text-wrap: balance;
}
.citacao footer {
	margin-top: 16px;
	font-size: 14px;
}
.citacao footer a {
	color: var(--suave-clara);
}
.citacao footer a::before {
	content: "Fonte: ";
}

/* O que a página do banco não confirma fica dito. */
.nota {
	border-left: 3px solid var(--atencao);
	border-radius: 0 10px 10px 0;
	background: var(--atencao-fundo);
	padding: 14px 18px;
	font-size: 15.5px;
	color: var(--tinta);
}

/* Chamada do meio: o produto à vista, não só um botão. */
.chamada {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	margin-block: 2.4em;
	padding: 24px;
	border: 1px solid color-mix(in srgb, var(--marca) 30%, var(--regra));
	border-radius: 18px;
	background: color-mix(in srgb, var(--marca) 6%, var(--cartao));
}
.chamada__texto > * + * {
	margin-top: 8px;
}
.chamada__titulo {
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 600;
	color: var(--tinta);
	text-wrap: balance;
}
.chamada__texto p:not(.rotulo, .chamada__titulo) {
	font-size: 15px;
	color: var(--tinta-2);
}
.chamada__texto .botao {
	margin-top: 14px;
	text-decoration: none;
	color: var(--marca-contraste);
}
.chamada__painel {
	grid-template-columns: 1fr;
	gap: 8px;
}

/* FAQ: o mesmo das perguntas da landing. */
.artigo__corpo .perguntas {
	margin-top: 18px;
}
.artigo__corpo .perguntas details p {
	padding-bottom: 20px;
}
.aviso-marca {
	margin-top: 32px;
	font-size: 13.5px;
	color: var(--suave);
}

/* Fecho do artigo: o bloco escuro da landing, com a fatura ao lado. */
.fecho-artigo {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	margin-top: clamp(56px, 8vw, 96px);
	padding: clamp(28px, 5vw, 64px);
	border-radius: 24px;
	background: var(--fundo-escuro);
	color: var(--tinta-clara);
}
.fecho-artigo h2 {
	font-size: clamp(30px, 3.8vw, 46px);
	line-height: 1.04;
	letter-spacing: -0.04em;
	font-weight: 600;
	text-wrap: balance;
}
.fecho-artigo h2 span {
	color: var(--suave-clara);
	font-weight: 520;
}
.fecho-artigo .abertura__acoes {
	margin-top: 28px;
}
.fecho-artigo p {
	margin-top: 16px;
	font-size: 14.5px;
	color: var(--suave-clara);
}
.fecho-artigo .botao {
	text-decoration: none;
}
/* A fatura dentro do bloco escuro usa sempre os tons escuros do app. */
.mock--escuro {
	--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;
	--positivo: #3ddbb3;
	color: var(--tinta);
	border-color: rgba(233, 241, 238, 0.12);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}

/* Hub "Fatura por banco" no fim do artigo. */
.hub {
	margin-top: clamp(48px, 6vw, 72px);
}
.hub h2 {
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	font-weight: 400;
	color: var(--marca-tinta);
}
.hub ul {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}
.hub a {
	display: block;
	border: 1px solid var(--regra);
	border-radius: 12px;
	background: var(--cartao);
	padding: 14px 16px;
	text-decoration: none;
	min-height: 48px;
	transition: border-color 0.15s;
}
.hub a:hover {
	border-color: var(--marca);
}
.hub a b {
	display: block;
	font-weight: 600;
}
.hub a small {
	display: block;
	margin-top: 2px;
	font-size: 13.5px;
	color: var(--suave);
}
.hub [aria-current="page"] {
	border-color: var(--marca);
	background: color-mix(in srgb, var(--marca) 7%, var(--cartao));
}

/* ── Índice do blog ─────────────────────────────────── */
.indice-abertura {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	padding-top: clamp(40px, 6vw, 88px);
	padding-bottom: clamp(40px, 6vw, 80px);
}
.indice-abertura .titulo-mor {
	margin-top: 24px;
	font-size: clamp(40px, 5.4vw, 72px);
}
.indice-abertura .titulo-mor .tom-suave {
	display: block;
}
.indice-abertura .abertura__sub {
	max-width: 52ch;
}
.escolha ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 2px;
	padding: 6px;
	border: 1px solid var(--regra);
	border-radius: 12px;
	background: var(--cartao);
}
.escolha a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 15px;
}
.escolha a:hover {
	background: var(--papel-2);
}
.escolha b {
	margin-right: auto;
	font-weight: 560;
}
.escolha a::after {
	content: "→";
	color: var(--suave);
}

.cartao-blog a {
	display: grid;
	gap: 16px;
	text-decoration: none;
	color: inherit;
	height: 100%;
}
.cartao-blog__capa {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--regra);
	background: var(--fundo-escuro);
	aspect-ratio: 1200 / 630;
}
.cartao-blog__capa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cartao-blog a:hover .cartao-blog__capa img {
	transform: scale(1.025);
}
.cartao-blog__texto {
	display: grid;
	gap: 8px;
	align-content: start;
}
.cartao-blog__tema {
	color: var(--marca-tinta);
}
.cartao-blog h2,
.cartao-blog h3 {
	font-size: 21px;
	line-height: 1.18;
	letter-spacing: -0.025em;
	font-weight: 600;
	text-wrap: balance;
}
.cartao-blog a:hover h2,
.cartao-blog a:hover h3 {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.cartao-blog__resumo {
	color: var(--tinta-2);
	font-size: 17px;
	line-height: 1.55;
}
.cartao-blog__meta {
	font-size: 13.5px;
	color: var(--suave);
}
.cartao-blog--destaque a {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}
.cartao-blog--destaque .cartao-blog__capa {
	border-radius: 20px;
	box-shadow: var(--sombra);
}
.cartao-blog--destaque h2 {
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.04;
	letter-spacing: -0.04em;
}
.cartao-blog--destaque .link-seta {
	margin-top: 8px;
	color: var(--marca-tinta);
	font-weight: 540;
}
.indice-secao {
	margin-top: clamp(64px, 9vw, 120px);
}
.indice-secao__cabeca {
	max-width: 760px;
}
.grade-blog {
	margin-top: 36px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
}

.so-escuro {
	display: none;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .so-claro {
		display: none;
	}
	:root:not([data-theme="light"]) .so-escuro {
		display: block;
	}
}
:root[data-theme="dark"] .so-claro {
	display: none;
}
:root[data-theme="dark"] .so-escuro {
	display: block;
}

/* ── Capa (1200×630): a página que o blog-og.mjs fotografa ── */
.capa {
	width: 1200px;
	height: 630px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 540px 1fr;
	gap: 44px;
	align-items: center;
	padding: 0 0 0 72px;
	background: radial-gradient(700px 420px at 85% 30%, rgba(61, 219, 179, 0.16), transparent 70%), #0a2a24;
	color: #e9f1ee;
}
.capa__texto {
	display: grid;
	gap: 28px;
}
.capa__marca {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.02em;
}
.capa__marca svg {
	width: 44px;
	height: 44px;
	--marca: #3ddbb3;
	--marca-contraste: #062019;
}
.capa__blog {
	margin-left: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid rgba(233, 241, 238, 0.25);
	font: 400 15px / 1.4 var(--mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9fb5ae;
}
.capa__titulo {
	font-size: 64px;
	line-height: 0.98;
	letter-spacing: -0.05em;
	font-weight: 600;
	text-wrap: balance;
}
.capa__titulo span {
	display: block;
	margin-top: 8px;
	color: #3ddbb3;
	font-size: 44px;
	letter-spacing: -0.04em;
	font-weight: 520;
}
.capa__pe {
	font: 400 17px / 1.4 var(--mono);
	letter-spacing: 0.04em;
	color: #9fb5ae;
}
.mock--capa {
	width: 500px;
	transform: translateY(70px) rotate(-1.5deg);
	transform-origin: left top;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}
.mock--capa figcaption {
	display: none;
}

/* ── Telas menores ──────────────────────────────────── */
@media (max-width: 1020px) {
	.artigo-abertura,
	.indice-abertura,
	.fecho-artigo,
	.cartao-blog--destaque a {
		grid-template-columns: minmax(0, 1fr);
	}
	.artigo-abertura .mock {
		max-width: 560px;
	}
	.artigo-grade {
		grid-template-columns: minmax(0, 720px);
		gap: 0;
	}
	.sumario {
		position: static;
		padding-top: 24px;
	}
	.sumario details {
		border: 1px solid var(--regra);
		border-radius: 14px;
		background: var(--cartao);
		padding: 14px 16px 8px;
	}
	.sumario summary {
		pointer-events: auto;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
	}
	.sumario summary::after {
		content: "+";
		font-size: 16px;
	}
	.sumario details[open] summary::after {
		content: "−";
	}
	.grade-blog {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	body {
		font-size: 16.5px;
	}
	.artigo__titulo .tom-suave {
		display: inline;
	}
	.chamada {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px;
	}
	.chamada__painel {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.chamada__texto .botao {
		width: 100%;
	}
	.fatura__abas {
		display: none;
	}
	.fatura__datas dd {
		font-size: 13px;
	}
	.citacao {
		padding: 22px 20px;
	}
	.artigo__corpo .passos {
		padding: 4px 14px;
	}
	.artigo__corpo .passos li {
		padding: 20px 0 12px 48px;
		min-height: 60px;
	}
	.artigo__corpo .passos li::before {
		width: 34px;
		height: 34px;
		border-radius: 10px;
		font-size: 13.5px;
	}
	.fecho-artigo {
		border-radius: 18px;
		margin-inline: calc(-1 * var(--gutter) / 2);
	}
	.fecho-artigo .botao {
		width: 100%;
	}
	.fecho-artigo .mock {
		display: none;
	}
	.grade-blog {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
	.grade-blog .cartao-blog a {
		grid-template-columns: 128px minmax(0, 1fr);
		gap: 14px;
		align-items: center;
	}
	.grade-blog .cartao-blog__capa {
		border-radius: 10px;
	}
	.grade-blog .cartao-blog__texto {
		gap: 4px;
	}
	.grade-blog .cartao-blog h3 {
		font-size: 17px;
	}
	.grade-blog .cartao-blog__meta {
		font-size: 12.5px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cartao-blog__capa img {
		transition: none;
	}
}

/* Guias (#729, #737): a chamada do meio sem o painel de métricas ocupa a largura toda. */
.chamada--sem-painel {
	grid-template-columns: minmax(0, 1fr);
}

/* Mockup do guia de segurança (#729): o que se autoriza ao conectar um banco. */
.autorizacao__lista {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.autorizacao__lista li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 2px;
	border-top: 1px solid var(--regra);
	font-size: 15px;
}
.autorizacao__certo {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--marca) 14%, transparent);
	color: var(--marca-tinta);
}
.autorizacao__certo svg {
	width: 13px;
	height: 13px;
}
.autorizacao__nunca {
	display: grid;
	gap: 4px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--papel-2);
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--tinta-2);
}

/* Mockup do guia de escolha (#732) e a tabela do que muda. */
.dois-caminhos__bloco {
	display: grid;
	gap: 6px;
}
.dois-caminhos__bloco .rotulo {
	color: var(--marca-tinta);
}
.autorizacao__falta {
	background: var(--papel-2);
	color: var(--suave);
}
.tabela-escolha {
	overflow-x: auto;
	border: 1px solid var(--regra);
	border-radius: 14px;
	background: var(--cartao);
}
.tabela-escolha table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15.5px;
}
.tabela-escolha th,
.tabela-escolha td {
	text-align: left;
	vertical-align: top;
	padding: 16px 18px;
	border-bottom: 1px solid var(--regra);
}
.tabela-escolha thead th {
	background: var(--papel-2);
	font-size: 15px;
	font-weight: 620;
	color: var(--tinta);
	border-bottom: 2px solid var(--regra-forte);
}
.tabela-escolha tbody th {
	font-weight: 560;
	color: var(--tinta);
	width: 22%;
}
.tabela-escolha td {
	color: var(--tinta-2);
}
.tabela-escolha tbody tr:last-child th,
.tabela-escolha tbody tr:last-child td {
	border-bottom: 0;
}
@media (max-width: 640px) {
	.tabela-escolha thead {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.tabela-escolha tr,
	.tabela-escolha th,
	.tabela-escolha td {
		display: block;
		width: auto;
	}
	.tabela-escolha tbody tr {
		padding: 14px 16px;
		border-bottom: 1px solid var(--regra);
	}
	.tabela-escolha tbody tr:last-child {
		border-bottom: 0;
	}
	.tabela-escolha th,
	.tabela-escolha td {
		padding: 0;
		border: 0;
	}
	.tabela-escolha tbody th {
		width: auto;
		margin-bottom: 8px;
		font-size: 16px;
	}
	.tabela-escolha td + td {
		margin-top: 10px;
	}
	.tabela-escolha td::before {
		content: attr(data-rotulo);
		display: block;
		font-family: var(--mono);
		font-size: 11.5px;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--suave);
		margin-bottom: 2px;
	}
}