/* ==========================================================================
   Páginas centrais de assunto (a primeira é /juros-abusivos)

   Segue o layout aprovado: sobretítulo verde com traço, título grande
   centralizado, lide cinza e quatro cards em grade 2x2, cada um com ícone num
   círculo verde-claro e botão verde de largura total.

   Só estas páginas carregam este arquivo; o style.css do resto do site não muda.

   17/09/2026: tudo (fontes, cards, ícones, espaços) reduzido 15% a pedido do
   Bruno, que achou a página grande perto da home.
   ========================================================================== */

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

.hub {
	--hub-verde: #247a59;
	--hub-verde-escuro: #1b6247;
	--hub-verde-claro: #e7f4ee;
	--hub-marinho: #101a3c;
	--hub-texto: #5c6677;
	--hub-fundo: #f6f8fb;

	font-family: "Plus Jakarta Sans", var(--fonte-texto);
	/* O espaço da Plus Jakarta é estreito; o layout aprovado respira mais. */
	word-spacing: .08em;
	background: var(--hub-fundo);
	padding: clamp(2.337rem, 5.1vw, 3.612rem) 0 clamp(2.55rem, 5.95vw, 4.25rem);
}

.hub-topo {
	text-align: center;
	max-width: 56.1rem;
	margin: 0 auto clamp(1.7rem, 3.4vw, 2.21rem);
}

.hub-sobretitulo {
	display: inline-flex;
	align-items: center;
	gap: 0.935rem;
	margin: 0 0 1.147rem;
	font-size: 0.744rem;
	font-weight: 700;
	letter-spacing: .045em;
	text-transform: uppercase;
	color: var(--hub-verde);
}

.hub-sobretitulo::before {
	content: "";
	width: 2.975rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.hub h1 {
	font-family: inherit;
	font-size: clamp(1.785rem, 0.935rem + 3.4vw, 3.357rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -.03em;
	color: var(--hub-marinho);
	max-width: 15em;
	margin: 0 auto 1.275rem;
}

.hub-lide {
	font-size: clamp(0.892rem, 0.807rem + 0.425vw, 1.122rem);
	line-height: 1.55;
	color: var(--hub-texto);
	max-width: 49em;
	margin: 0 auto;
}

.hub-cards {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 54.188rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.935rem 1.275rem;
}

.hub-card {
	display: flex;
	flex-direction: column;
	gap: 0.935rem;
	background: #fff;
	border: 1px solid #edf0f5;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(16, 26, 60, .06);
	padding: 1.36rem 1.488rem 0.935rem;
}

.hub-card-corpo {
	display: flex;
	align-items: flex-start;
	gap: 1.488rem;
	flex: 1;
}

.hub-icone {
	flex: none;
	display: grid;
	place-items: center;
	width: 5.015rem;
	height: 5.015rem;
	border-radius: 50%;
	background: var(--hub-verde-claro);
	color: var(--hub-verde);
	margin-top: -.3rem;
}

.hub-icone svg { width: 2.337rem; height: 2.337rem; }

.hub-card h2 {
	font-family: inherit;
	font-size: clamp(1.02rem, 0.892rem + 0.425vw, 1.19rem);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -.015em;
	color: var(--hub-marinho);
	margin: 0.212rem 0 0.468rem;
}

.hub-card h2 a { color: inherit; text-decoration: none; }
.hub-card h2 a:hover { color: var(--hub-verde); }

.hub-card p {
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--hub-texto);
	margin: 0;
}

.hub-botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.595rem;
	min-height: 2.465rem;
	border-radius: 5px;
	background: var(--hub-verde);
	box-shadow: 0 2px 6px rgba(27, 98, 71, .22);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .15s ease;
}

.hub-botao svg { width: 0.977rem; height: 0.977rem; }
.hub-botao:hover, .hub-botao:focus-visible { background: var(--hub-verde-escuro); color: #fff; }

/* Abaixo disso, dois cards lado a lado espremem o texto contra o ícone. */
@media (max-width: 900px) {
	.hub-cards { grid-template-columns: 1fr; max-width: 34rem; }
}

@media (max-width: 760px) {
	.hub-card { padding: 1.147rem 1.062rem 0.85rem; }
	.hub-card-corpo { gap: 0.935rem; }
	.hub-icone { width: 3.612rem; height: 3.612rem; margin-top: 0; }
	.hub-icone svg { width: 1.7rem; height: 1.7rem; }
	/* Em tela estreita o sobretítulo quebra em duas linhas: o traço sobe pra cima dele. */
	.hub-sobretitulo { flex-direction: column; gap: 0.51rem; font-size: 0.663rem; }
	.hub-sobretitulo::before { width: 2.125rem; }
}

/* ==========================================================================
   Calculadora da taxa de juros (/juros-abusivos/como-descobrir-a-taxa-de-juros-do-contrato)

   Mesmo padrão reduzido do hub: sobretítulo, título e lide usam as classes de
   cima, alinhados à esquerda; à direita, o cartão do formulário.
   ========================================================================== */

.hub-pagina { font-family: "Plus Jakarta Sans", var(--fonte-texto); }

/* O layout aprovado usa quase a largura toda da tela, mais que o container do site. */
.calc-grade {
	width: min(100% - 2.5rem, 76rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 31.875rem;
	gap: 3rem;
	align-items: start;
}

.calc-intro { padding-top: 2.4rem; }
.calc .hub-topo, .calc h1, .calc .hub-lide { text-align: left; margin-left: 0; }
.calc h1 { max-width: 12em; margin-bottom: 1.1rem; }
.calc .hub-lide { max-width: 30em; }

.calc-itens {
	list-style: none;
	margin: 2.2rem 0 0;
	padding: 0;
	display: grid;
	gap: 1.55rem;
}

.calc-itens li { display: flex; align-items: center; gap: 1.4rem; }

.calc-item-icone {
	flex: none;
	display: grid;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 50%;
	background: var(--hub-verde-claro);
	color: var(--hub-verde);
}

.calc-item-icone svg { width: 1.6rem; height: 1.6rem; }

.calc-itens .calc-item-titulo {
	font-family: inherit;
	font-size: 1.06rem;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--hub-marinho);
	margin: 0 0 .2rem;
}

.calc-itens p:not(.calc-item-titulo) { font-size: .85rem; line-height: 1.5; color: var(--hub-texto); margin: 0; max-width: 34em; }

/* Cartão do formulário */

.calc-cartao {
	background: #fff;
	border: 1px solid #edf0f5;
	border-radius: 14px;
	box-shadow: 0 10px 34px rgba(16, 26, 60, .07);
	padding: 2.2rem 2.55rem 1.9rem;
}

.calc-cartao-titulo {
	font-family: inherit;
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -.025em;
	color: var(--hub-marinho);
	margin: 0 0 .35rem;
}

.calc-cartao-texto { font-size: .95rem; line-height: 1.5; color: var(--hub-texto); margin: 0 0 1.35rem; max-width: 26em; }

.calc-campo { margin-bottom: 1.1rem; }

.calc-campo label {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	color: var(--hub-marinho);
	margin-bottom: .45rem;
}

.calc-campo input, .calc-campo select {
	width: 100%;
	height: 2.6rem;
	padding: 0 .95rem;
	font: inherit;
	font-size: .9rem;
	color: var(--hub-marinho);
	background: #fff;
	border: 1px solid #d8dee7;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(16, 26, 60, .04);
	appearance: none;
	-webkit-appearance: none;
	/* Campos de formulário zeram o word-spacing; o espaço da fonte é estreito. */
	word-spacing: .08em;
}

.calc-campo input::placeholder { color: #8a93a3; }
.calc-campo select:invalid, .calc-campo select option[value=""] { color: #8a93a3; }
.calc-campo select option { color: var(--hub-marinho); }

.calc-campo select {
	padding-right: 2.5rem;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101a3c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .9rem center / 1rem;
}

/* O calendário do campo de data é o do próprio navegador. */
.calc-campo input[type="date"] { padding-right: .8rem; }
.calc-campo input[type="date"]:invalid, .calc-campo input[type="date"][data-vazio] { color: #8a93a3; }

.calc-campo input:focus, .calc-campo select:focus {
	outline: none;
	border-color: var(--hub-verde);
	box-shadow: 0 0 0 3px rgba(36, 122, 89, .16);
}

.calc-campo [aria-invalid="true"] { border-color: #c2410c; }

.calc-erro {
	font-size: .85rem;
	color: #b3390b;
	background: #fff4ed;
	border-radius: 6px;
	padding: .6rem .8rem;
	margin: 0 0 1rem;
}

.calc-botao { width: 100%; min-height: 2.9rem; font-family: inherit; font-size: 1rem; word-spacing: inherit; border: 0; cursor: pointer; margin-top: 1.5rem; }
.calc-botao svg { width: 1.25rem; height: 1.25rem; }

.calc-nota {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	font-size: .75rem;
	color: #7a8494;
	margin: .9rem 0 0;
	text-align: center;
}

.calc-nota svg { width: .9rem; height: .9rem; flex: none; }

/* Resultado */

/* scroll-margin: o cabeçalho do site é fixo e cobria o título ao rolar até aqui. */
.calc-resultado { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid #edf0f5; scroll-margin-top: 6rem; }
.calc-resultado:focus { outline: none; }

.calc-resultado-titulo {
	font-family: inherit;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--hub-marinho);
	margin: 0 0 .3rem;
}

.calc-resultado-contexto { font-size: .85rem; color: var(--hub-texto); margin: 0 0 .9rem; }

.calc-taxas { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: .8rem 0 1rem; }

.calc-taxas div {
	background: var(--hub-verde-claro);
	border-radius: 10px;
	padding: .85rem 1rem;
}

.calc-taxas span { display: block; font-size: .8rem; font-weight: 600; color: var(--hub-verde-escuro); }
.calc-taxas strong { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--hub-marinho); line-height: 1.2; }

.calc-totais { margin: 0 0 .9rem; }
.calc-totais div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; padding: .45rem 0; border-bottom: 1px dashed #e3e8ef; }
.calc-totais dt { color: var(--hub-texto); }
.calc-totais dd { margin: 0; font-weight: 700; color: var(--hub-marinho); }

.calc-resultado-aviso { font-size: .8rem; color: #7a8494; margin: 0 0 1.1rem; }

.calc-link {
	display: block;
	text-align: center;
	font-size: .9rem;
	font-weight: 700;
	color: var(--hub-verde);
	margin-top: .85rem;
}

.calc-link:hover { color: var(--hub-verde-escuro); }

/* Texto explicativo abaixo da dobra */

.calc-conteudo { background: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.calc-conteudo .container { width: min(100% - 2.5rem, 76rem); } /* alinha com a calculadora */
.calc-conteudo .container > * { max-width: 46rem; }
.calc-conteudo h2 {
	font-family: inherit;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--hub-marinho);
	margin: 2.2rem 0 .6rem;
}
.calc-conteudo h2:first-child { margin-top: 0; }
.calc-conteudo h3 { font-family: inherit; font-size: 1.02rem; font-weight: 700; color: var(--hub-marinho); margin: 1.3rem 0 .35rem; }
.calc-conteudo p, .calc-conteudo li { font-size: 1rem; line-height: 1.7; color: #3d4656; }
.calc-conteudo ul { padding-left: 1.2rem; }
.calc-conteudo a { color: var(--hub-verde); }
.calc-voltar { margin-top: 2rem; }

@media (max-width: 900px) {
	.calc-grade { grid-template-columns: 1fr; gap: 2rem; }
	.calc-intro { padding-top: 0; }
	.calc h1 { max-width: none; }
}

@media (max-width: 760px) {
	.calc .hub-sobretitulo { align-items: flex-start; }
	.calc-cartao { padding: 1.5rem 1.2rem 1.4rem; }
	.calc-cartao-titulo { font-size: 1.4rem; }
	.calc-itens li { gap: 1rem; }
	/* Abaixo de 16px o iPhone dá zoom ao tocar no campo. */
	.calc-campo input, .calc-campo select { font-size: 16px; height: 2.9rem; }
	.calc-taxas strong { font-size: 1.4rem; }
}

/* ==========================================================================
   Verificação de taxa abusiva (/juros-abusivos/como-saber-se-a-taxa-de-juros-e-abusiva)

   Mesmo cartão da calculadora, com os campos em duas colunas. Campos com
   texto de ajuda ficam mais altos; align-items: end mantém as caixas alinhadas.
   ========================================================================== */

.calc-form-grade {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.1rem;
	align-items: end;
}

.calc-linha-inteira { grid-column: 1 / -1; }

/* Duas colunas pedem um cartão um pouco mais largo que o da calculadora. Fica
   dentro da media query: o :has() pesa mais que a regra de celular lá embaixo. */
@media (min-width: 901px) {
	.calc-grade:has(.calc-form-grade) { grid-template-columns: minmax(0, 1fr) 34.5rem; }
}
.calc-form-grade .calc-botao { margin-top: .6rem; }

.calc-ajuda {
	display: block;
	white-space: nowrap;
	font-size: .66rem;
	line-height: 1.3;
	color: #7a8494;
	margin: -.3rem 0 .4rem;
}

.calc-ajuda a { color: var(--hub-verde); font-weight: 600; }

.calc-form-grade .calc-nota { display: block; }
.calc-form-grade .calc-nota svg { display: inline-block; vertical-align: -.1em; margin-right: .3rem; }

.calc-taxas small { display: block; font-size: .75rem; color: var(--hub-texto); margin-top: .15rem; }
.calc-taxas .calc-taxa-referencia { background: #eef2f7; }
.calc-taxas .calc-taxa-referencia span { color: #4a5568; }

.calc-veredito {
	border-radius: 10px;
	padding: .9rem 1rem;
	margin: 0 0 .9rem;
	border-left: 4px solid;
}

.calc-veredito strong { display: block; font-size: .98rem; color: var(--hub-marinho); margin-bottom: .25rem; }
.calc-veredito p { font-size: .85rem; line-height: 1.5; color: #3d4656; margin: 0; }
.calc-veredito[data-faixa="dentro"] { background: #ecf7f1; border-color: #2e8b5e; }
.calc-veredito[data-faixa="acima"] { background: #fff7e8; border-color: #d98a0b; }
.calc-veredito[data-faixa="abusiva"] { background: #fdeeec; border-color: #c2361f; }

.calc-conteudo ol { padding-left: 1.3rem; }

@media (max-width: 760px) {
	.calc-form-grade { grid-template-columns: 1fr; }
	.calc-ajuda { font-size: .78rem; white-space: normal; }
}

/* ==========================================================================
   Pré-análise do CET (/juros-abusivos/custo-efetivo-total-cet)

   Mesmo cartão de duas colunas da verificação, com a faixa "Seus dados" e os
   três campos de contato numa linha só.
   ========================================================================== */

.cet .calc-intro { padding-top: 1.6rem; }

/* O formulário do CET tem perguntas longas: o cartão é o mais largo das páginas. */
@media (min-width: 901px) {
	.cet .calc-grade:has(.calc-form-grade) { grid-template-columns: minmax(0, 1fr) 37.5rem; gap: 2.5rem; }
}
.cet h1 { max-width: 11em; margin-bottom: .9rem; }

.cet-subtitulo {
	font-size: clamp(1.05rem, .95rem + .5vw, 1.32rem);
	line-height: 1.4;
	color: #4f5a6d;
	margin: 0 0 1.2rem;
	max-width: 32em;
}

.cet-texto { font-size: .95rem; line-height: 1.6; color: var(--hub-texto); margin: 0 0 1rem; max-width: 36em; }
.cet .calc-itens { margin-top: 1.9rem; }

.cet .calc-cartao-titulo { font-size: 1.5rem; }
.cet .calc-campo label { font-size: .8rem; line-height: 1.3; }
.cet .calc-campo input, .cet .calc-campo select { height: 2.4rem; font-size: .85rem; padding-left: .75rem; }
.cet .calc-campo { margin-bottom: .95rem; }

.cet-seus-dados {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: .5rem 0 .9rem;
	font-size: .9rem;
	font-weight: 700;
	color: var(--hub-verde);
}

.cet-seus-dados::after { content: ""; flex: 1; height: 1px; background: #dfe6ee; }

.cet-contato { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.1rem; }

.cet-botao {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .9rem;
	margin-top: .3rem;
}

.cet-nota { font-size: .66rem; line-height: 1.45; text-align: left; }

.cet-pontos-titulo { font-size: .92rem; font-weight: 700; color: var(--hub-marinho); margin: .3rem 0 .45rem; }
.cet-pontos { margin: 0 0 1rem; padding-left: 1.1rem; }
.cet-pontos li { font-size: .85rem; line-height: 1.5; color: #3d4656; margin-bottom: .4rem; }

.cet-whats svg { width: 1.2rem; height: 1.2rem; }
.cet-aviso-envio { text-align: center; margin: .7rem 0 0; }

@media (max-width: 760px) {
	.cet-contato { grid-template-columns: 1fr; }
	.cet .calc-campo input, .cet .calc-campo select { font-size: 16px; height: 2.9rem; }
	.cet .calc-campo label { font-size: .88rem; }
	.cet-nota { font-size: .78rem; }
}

/* ==========================================================================
   Como resolver (/juros-abusivos/como-resolver-juros-abusivos)

   Mesma grade de cards do hub, com botão em caixa alta e descrições mais
   longas; no texto explicativo, a tabela comparativa dos caminhos.
   ========================================================================== */

.hub-botao-caixa {
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .8rem;
	gap: .8rem;
}

.resolver .hub-card-corpo { align-items: flex-start; }
.resolver .hub-card p { line-height: 1.5; }

.resolver-tabela { overflow-x: auto; margin: 0 0 1.5rem; max-width: 100% !important; }
.resolver-tabela table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .9rem; }
.resolver-tabela th, .resolver-tabela td { text-align: left; vertical-align: top; padding: .7rem .8rem; border-bottom: 1px solid #e6ebf1; line-height: 1.45; color: #3d4656; }
.resolver-tabela thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--hub-verde-escuro); background: var(--hub-verde-claro); }
.resolver-tabela tbody th { font-weight: 700; color: var(--hub-marinho); white-space: nowrap; }
.calc-conteudo .container > .resolver-tabela { max-width: 64rem; }