/* Marques Investimentos — Consórcio
   Linguagem visual BLUEPRINT (ver docs/VISUAL_BLUEPRINT.md).
   Base clara, tinta navy, títulos sem serifa em peso leve, separação por
   painel em vez de fio, botões pílula. O escuro é faixa de destaque, não base.

   Os valores vivem em tokens.css (cópia local de shared/tokens.css).
   Sem dependência externa: nenhuma fonte de CDN, nenhum ícone de biblioteca. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--osso);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-corpo);
  font-weight: var(--p-leve);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: var(--p-medio);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }
strong { color: var(--tinta); font-weight: var(--p-medio); }

:focus-visible { outline: var(--foco); outline-offset: var(--foco-recuo); border-radius: 4px; }

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 24px;
  background: var(--tinta);
  color: var(--osso);
  border-radius: var(--raio-pilula);
  font-weight: var(--p-medio);
  text-decoration: none;
}
.pular:focus { left: 12px; top: 12px; }

.limite { width: min(var(--largura), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.limite-estreito { width: min(var(--largura-texto), calc(100% - var(--gutter) * 2)); }

/* A ênfase deixa de ser cor e passa a ser itálico, como na referência.
   O ouro continua existindo, mas rebaixado e raro. */
.ouro { color: var(--ouro); font-style: italic; }

/* Etiqueta miúda em caixa alta: o único uso de maiúscula na página. */
.sobrancelha {
  display: inline-block;
  font-size: var(--t-etiqueta);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-mudo);
  margin-bottom: var(--e-2);
}

/* ---------- topo ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 244, 236, 0.88);
  backdrop-filter: saturate(1.1) blur(14px);
  border-bottom: 1px solid var(--fio);
}

.faixa {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: 72px;
  width: min(var(--largura), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.marca-simbolo { width: 40px; height: 40px; object-fit: contain; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.2; }

.marca-texto strong {
  font-family: var(--titulo);
  font-size: 13.5px;
  font-weight: var(--p-medio);
  letter-spacing: 0.09em;
  color: var(--tinta);
}

.marca-texto small {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--tinta-mudo);
}

.menu { display: flex; gap: var(--e-4); margin-left: auto; }

.menu a {
  font-size: 15.5px;
  font-weight: var(--p-medio);
  letter-spacing: 0.01em;
  color: var(--tinta);
  text-decoration: none;
  transition: opacity var(--transicao);
}

.menu a:hover { opacity: 0.6; }

/* ---------- botões: pílula, como na referência ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: var(--p-forte);
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao),
    border-color var(--transicao), transform var(--transicao),
    box-shadow var(--transicao);
}

/* Relevo, não desenho de relevo: uma luz fina no topo, uma sombra interna na
   base e duas sombras externas — uma de contato, curta, e uma de projeção,
   longa. É o que dá volume sem virar botão de plástico. */
.botao-primario {
  background: linear-gradient(180deg, #27385f 0%, var(--tinta) 55%, #0c1529 100%);
  color: var(--osso);
  box-shadow:
    inset 0 1px 0 rgba(246, 244, 236, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.32),
    0 2px 3px rgba(17, 28, 53, 0.2),
    0 9px 22px rgba(17, 28, 53, 0.26);
}

.botao-primario:hover {
  background: linear-gradient(180deg, #2f4271 0%, var(--tinta-2) 55%, #101c37 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(246, 244, 236, 0.26),
    inset 0 -2px 0 rgba(0, 0, 0, 0.32),
    0 4px 6px rgba(17, 28, 53, 0.22),
    0 16px 32px rgba(17, 28, 53, 0.3);
}

/* Afunda ao ser pressionado: a luz de cima vira sombra de dentro. */
.botao-primario:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.42),
    0 1px 2px rgba(17, 28, 53, 0.28);
}

.botao-compacto { padding: 11px 22px; font-size: 15.5px; }

.botao-largo {
  display: flex;
  width: 100%;
  padding: 18px 28px;
  font-size: 18px;
  letter-spacing: 0.012em;
}

/* ---------- banner: a foto é um painel arredondado, não a página ---------- */

.banner {
  /* Vão entre as colunas. Usado também para calcular a largura do bloco de
     texto, que precisa bater exatamente com a coluna da esquerda. */
  --banner-vao-h: clamp(28px, 3vw, 56px);
  position: relative;
  isolation: isolate;
  padding: 32px 0 var(--e-6);
  background: var(--osso);
}

/* A foto virou a coluna direita e o título saiu de cima dela: na referência o
   texto vive sobre o fundo claro e a imagem é um objeto ao lado, não um palco
   onde se escreve. O recorte arredondado mudou do palco para a própria imagem,
   porque o texto de cada cena precisa escapar do palco para a esquerda. */
/* O palco atravessa as duas colunas e cada cena divide o espaço por dentro:
   texto à esquerda, imagem à direita. Antes o texto escapava do palco com uma
   largura calculada em vw — que inclui a barra de rolagem e jogava o título
   9px para fora do eixo. Aqui as frações são porcentagem do próprio palco, que
   já tem a largura exata do container. */
.banner-palco {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  /* Grade de uma célula só: as quatro cenas se sobrepõem sem posicionamento
     absoluto, e a altura passa a ser a da cena mais alta. O minmax(0,1fr) é
     obrigatório: com a coluna em `auto` as porcentagens do flex lá dentro
     resolvem contra a largura intrínseca da foto (1500px) e o herói estoura
     para fora do container. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  z-index: 0;
}

/* Texto e imagem são a mesma peça horizontal: o slide é a linha, o texto
   ocupa 5 de 12 e a imagem 7 de 12. A imagem é maior porque é ela que mostra
   a modalidade — não é fundo. */
.banner-slide {
  grid-area: 1 / 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--banner-vao-h);
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease, visibility 900ms;
  /* Obrigatório. A foto e o véu usam z-index negativo para ficar atrás do texto
     mas na frente do fundo de reserva abaixo. Sem contexto de empilhamento
     próprio, esse z-index passa a valer contra o .banner e o fundo de reserva
     do slide cobre a foto — que só aparecia no meio da transição, quando a
     opacidade fracionária criava o contexto por acidente. */
  isolation: isolate;
}

.banner-slide.ativo { opacity: 1; visibility: visible; }

/* Altura vem da proporção da própria foto, não de um valor fixo: assim o
   recorte é zero e a cena aprovada aparece inteira. O min-width: 0 é
   obrigatório — sem ele o mínimo automático do flex usa a largura implicada
   pelos atributos width/height da imagem e ela vaza do container. */
.banner-slide img {
  order: 2;
  flex: 0 0 calc((100% - var(--banner-vao-h)) * 7 / 12);
  min-width: 0;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: var(--raio-g);
  /* Fundo de reserva enquanto a foto carrega — claro, para não piscar escuro
     numa página clara. */
  background: var(--pedra);
}

/* Com a imagem ocupando 7 de 12, o recorte de uma foto 16:9 é mínimo e o
   enquadramento aprovado aparece quase inteiro. Ancorado à esquerda porque nas
   quatro cenas é ali que está a pessoa. */
.banner-slide img { object-position: 36% center; }

/* Sem véu. O texto não fica mais sobre a foto em nenhuma largura, então não há
   o que compensar — a imagem aparece como foi aprovada, em luz natural. */
.banner-slide::before { content: none; }

/* O texto da cena escapa do palco para a coluna da esquerda, sobre o osso.
   Fica dentro do slide de propósito: assim ele troca junto com a foto, sem
   precisar de uma linha de JavaScript. */
/* Mesma conta da imagem, do outro lado: o título nasce exatamente no eixo da
   marca e do simulador. */
.banner-texto {
  order: 1;
  flex: 0 0 calc((100% - var(--banner-vao-h)) * 5 / 12);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms ease, transform 320ms ease;
}

/* As fotos podem se cruzar; os títulos não. O texto que sai termina em 320ms
   e o que entra só começa em 420ms — nunca se lê um por cima do outro. */
.banner-slide.ativo .banner-texto {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease 420ms, transform 520ms ease 420ms;
}

/* Sobre osso a etiqueta volta a ser etiqueta: nada de chip com desfoque. */
.banner-texto .sobrancelha {
  padding: 0;
  border: none;
  background: none;
  backdrop-filter: none;
  color: var(--tinta-mudo);
  margin-bottom: 14px;
}

.banner h1 {
  font-family: var(--titulo);
  font-size: var(--t-titulo-1);
  font-weight: var(--p-leve);
  line-height: 1.08;
  letter-spacing: var(--ls-titulo);
  color: var(--tinta);
  margin-bottom: 16px;
  max-width: 17ch;
  text-wrap: balance;
}

/* Ênfase por itálico, sem dourado: o trecho destacado deixa de competir em
   peso com o resto do título. */
.banner h1 .ouro { display: block; color: inherit; font-style: italic; }

.banner-linha {
  font-size: var(--t-corpo);
  line-height: 1.5;
  color: var(--tinta-mudo);
  max-width: 46ch;
}

.banner-linha strong { color: var(--tinta); font-weight: var(--p-medio); }

/* A ação fica junto da mensagem. É a única no herói — a do cabeçalho tem o
   mesmo destino e não disputa espaço aqui. */
.banner-cta { margin-top: var(--e-3); }

/* Com a foto contida em painel, não há mais borda para dissolver. */
.banner-veu { display: none; }

/* 7fr de conteúdo contra 5fr de imagem. A célula da esquerda na primeira linha
   fica vazia de propósito: o bloco de texto é posicionado por cima dela a
   partir do palco. Os seletores de cena desceram para debaixo da foto, que é o
   que eles controlam — na coluna da esquerda pareciam um segundo controle de
   modalidade competindo com o do simulador. */
.banner-grade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto auto;
  gap: 14px var(--banner-vao-h);
  align-items: start;
}

/* Colocação explícita: nomear áreas aqui seria redundante, já que o palco
   atravessa as duas colunas e divide o espaço por dentro.
   Os seletores atravessam a grade e são recuados pela mesma conta da imagem,
   para nascerem exatamente na borda esquerda dela — na coluna de 5/12 ficavam
   217px fora do eixo da foto que controlam. */
.banner-vao {
  grid-column: 1 / -1;
  grid-row: 2;
  padding-left: calc((100% - var(--banner-vao-h)) * 5 / 12 + var(--banner-vao-h));
}
.simulador { grid-column: 1 / -1; grid-row: 3; margin-top: 18px; }

.banner-pontos { display: flex; flex-wrap: wrap; gap: 6px; }

/* Navegação da fotografia, não escolha de produto: texto simples com
   sublinhado no ativo. As pílulas cheias ficam reservadas ao simulador, que é
   onde a escolha de fato acontece. */
.banner-ponto {
  padding: 6px 2px;
  background: none;
  border: none;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  color: var(--tinta-mudo);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: var(--p-medio);
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao);
}

.banner-ponto + .banner-ponto { margin-left: 18px; }
.banner-ponto:hover { color: var(--tinta); }

.banner-ponto.ativo {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

/* ---------- simulador: cartão de papel sobre a foto ---------- */

/* Sem borda: papel sobre osso já separa. Somar contorno e sombra forte era
   acabamento a mais para o que a superfície resolve sozinha. */
.simulador {
  position: relative;
  background: var(--papel);
  border: none;
  border-radius: var(--raio-g);
  padding: 28px;
  box-shadow: var(--sombra);
}

/* O fio de brilho da versão escura não faz sentido em papel. */
.simulador::before { content: none; }

.simulador-topo { margin-bottom: var(--e-3); }

.simulador-titulo {
  font-family: var(--titulo);
  font-size: 24px;
  font-weight: var(--p-medio);
  letter-spacing: -0.012em;
}

.simulador-nota {
  font-size: var(--t-etiqueta);
  letter-spacing: 0.06em;
  color: var(--tinta-mudo);
  margin-top: 6px;
}

/* Escolhas à esquerda, resultado à direita. Empilhado o card tinha 1145px e
   sobrava quase 500px pendurados abaixo da foto; em duas colunas ele encosta
   na altura da imagem. */
.simulador-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e-3);
  align-items: start;
}

.simulador-campos > .campo:last-child { margin-bottom: 0; }
.simulador-resumo .resultado { padding-top: 0; border-top: none; }

.campo { margin-bottom: 19px; }
.campo-linha { display: flex; align-items: center; }

.rotulo {
  display: block;
  font-size: var(--t-etiqueta);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-mudo);
  margin-bottom: 10px;
}

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Escolha em pílula, igual aos seletores do banner: um só vocabulário. */
.opcao {
  padding: 9px 16px;
  background: var(--osso);
  border: 1px solid var(--fio);
  border-radius: var(--raio-pilula);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: var(--p-medio);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao),
    color var(--transicao);
}

.opcao:hover { border-color: var(--fio-forte); background: var(--pedra); }

.opcao[aria-checked="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--osso);
}

.ajuda {
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--tinta-mudo);
  margin-top: 10px;
}

/* O rótulo inteiro é alvo de clique, e tem 24px de altura mínima para
   atender o tamanho de alvo da WCAG 2.5.8. */
.alternador {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  font-size: 15.5px;
  color: var(--tinta);
  cursor: pointer;
}

.alternador input { width: 20px; height: 20px; accent-color: var(--tinta); cursor: pointer; }

/* ---------- resultado ---------- */

.resultado {
  padding: 20px 0 2px;
  margin-bottom: 20px;
  border-top: 1px solid var(--fio);
}

/* Identifica a oferta antes do número, e diz que é simulação. */
.resultado-contexto {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--t-corpo-2);
  font-weight: var(--p-medio);
  color: var(--tinta);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fio);
}

.resultado-selo {
  padding: 4px 11px;
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio-pilula);
  font-size: var(--t-etiqueta);
  font-weight: var(--p-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-mudo);
}

.resultado-topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }

.resultado-rotulo {
  font-size: var(--t-etiqueta);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-mudo);
}

.resultado-rotulo + .resultado-rotulo { color: var(--ouro); }

.resultado-valor {
  font-family: var(--titulo);
  font-size: clamp(34px, 2.9vw, 42px);
  font-weight: var(--p-medio);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  transition: color var(--transicao);
}

.resultado-sub { font-size: var(--t-micro); color: var(--tinta-mudo); margin-top: 8px; }

/* Painel de dados: fundo próprio em vez de fios cruzados. */
.resultado-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  background: var(--fio);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  overflow: hidden;
}

.resultado-grade > div { padding: 12px 14px; background: var(--osso); }
.resultado-grade > div:nth-child(odd) { padding-right: 14px; }
.resultado-grade > div:nth-child(even) { padding-left: 14px; border-left: none; }

.dado-rotulo {
  display: block;
  font-size: 12.5px;
  font-weight: var(--p-medio);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-mudo);
}

.dado-valor {
  display: block;
  font-size: 16.5px;
  font-weight: var(--p-medio);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

.dado-valor.destaque { color: var(--ouro); }

.rodape-simulador {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tinta-mudo);
  margin-top: 12px;
}

.resultado .rodape-simulador { margin-top: 12px; }

/* ---------- seções ---------- */

/* 72px é o padding vertical de seção medido na referência. Estava em 96px. */
.secao { padding: var(--e-6) 0; }
.secao-alternada { background: var(--osso-2); }

.secao h2 {
  font-size: var(--t-titulo-2);
  max-width: 20ch;
  text-wrap: balance;
}

.texto-largo {
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  color: var(--tinta-mudo);
  max-width: var(--largura-texto);
  margin-top: var(--e-3);
}

.texto-menor { font-size: var(--t-corpo-2); margin-top: var(--e-4); }

.titulo-editorial { font-size: var(--t-titulo-2); max-width: 22ch; }

/* Cabeçalho de duas colunas: título à esquerda, contexto à direita. */
.cabecalho-duplo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: end;
}

.cabecalho-duplo h2 { max-width: 18ch; }
.cabecalho-duplo .texto-largo { margin-top: 0; padding-bottom: 4px; }

/* ---------- quadro de contemplação ---------- */

.quadro {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: var(--e-5);
  background: var(--papel);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  overflow: hidden;
}

.quadro-legenda {
  text-align: left;
  font-size: var(--t-etiqueta);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-mudo);
  padding-bottom: 14px;
}

.quadro tr { border-bottom: 1px solid var(--fio); }
.quadro tr:last-child { border-bottom: none; }
.quadro td, .quadro th { padding: 18px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--fio); }
.quadro tr:last-child td, .quadro tr:last-child th { border-bottom: none; }

.quadro-num {
  font-family: var(--titulo);
  font-size: 30px;
  font-weight: var(--p-medio);
  color: var(--tinta);
  width: 84px;
  font-variant-numeric: tabular-nums;
}

.quadro th {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: var(--p-medio);
  color: var(--tinta);
  width: 300px;
}

.quadro-nota { font-size: var(--t-corpo-2); color: var(--tinta-mudo); }
.quadro-aberto th { color: var(--ouro); }

/* ---------- ressalvas numeradas ---------- */

.ressalvas {
  counter-reset: ressalva;
  list-style: none;
  margin: var(--e-5) 0 0;
  padding: 0;
}

.ressalvas li {
  counter-increment: ressalva;
  position: relative;
  padding: var(--e-3) 0 var(--e-3) 76px;
  border-bottom: 1px solid var(--fio);
}

.ressalvas li:last-child { border-bottom: none; }

.ressalvas li::before {
  content: counter(ressalva, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--e-3);
  font-family: var(--titulo);
  font-size: 24px;
  font-weight: var(--p-medio);
  color: var(--tinta-mudo);
  font-variant-numeric: tabular-nums;
}

.ressalvas h3 { font-size: var(--t-titulo-3); margin-bottom: 8px; }
.ressalvas p { font-size: var(--t-corpo-2); color: var(--tinta-mudo); max-width: 70ch; }

/* ---------- faixa de citação: a faixa escura da página ---------- */

.faixa-citacao {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 460px;
  padding: var(--e-6) 0;
  background: var(--tinta);
  overflow: hidden;
}

.citacao-foto { position: absolute; inset: 0 0 0 auto; width: 46%; z-index: -1; }

.citacao-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 42%, #000 100%);
}

.citacao-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }

/* Largura em px de propósito: ch aqui calcularia sobre o tamanho herdado
   do bloco, não sobre o corpo grande do parágrafo filho. */
.citacao { max-width: 640px; margin: 0; }

.citacao p {
  font-family: var(--titulo);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: var(--p-leve);
  line-height: 1.22;
  letter-spacing: var(--ls-titulo);
  color: var(--osso-sobre-escuro);
  text-wrap: balance;
}

.citacao p .ouro { color: var(--ouro-luz); font-style: italic; }

.citacao footer { margin-top: var(--e-3); display: flex; flex-direction: column; gap: 3px; }

.citacao-nome {
  font-size: var(--t-corpo-2);
  font-weight: var(--p-medio);
  color: var(--osso-sobre-escuro);
}

.citacao-cargo {
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--mudo-sobre-escuro);
}

/* ---------- pilares e colunas: painel, não fio ---------- */

.secao-metodo { background: var(--osso-2); }

.pilares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-2);
  margin-top: var(--e-5);
}

.pilares-cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.pilar {
  padding: var(--e-3);
  background: var(--papel);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  transition: box-shadow var(--transicao), transform var(--transicao);
}

.pilar:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.pilar + .pilar { border-left: 1px solid var(--fio); }

.pilar h3 { font-size: var(--t-titulo-3); margin-bottom: 8px; }
.pilar p { font-size: 16px; line-height: 1.5; color: var(--tinta-mudo); }

.pilar-realce { background: var(--tinta); border-color: var(--tinta); }
.pilar-realce h3 { color: var(--osso-sobre-escuro); }
.pilar-realce p { color: var(--mudo-sobre-escuro); }

/* ---------- comparativo de taxas ---------- */

.comparativo-taxas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
  margin-top: var(--e-5);
}

.taxa-cartao {
  padding: var(--e-3);
  background: var(--papel);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
}

.taxa-cartao + .taxa-cartao { border-left: 1px solid var(--fio); }

.taxa-selo {
  display: inline-block;
  padding: 5px 13px;
  border-radius: var(--raio-pilula);
  font-size: var(--t-etiqueta);
  font-weight: var(--p-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.taxa-selo.melhor { background: var(--tinta); color: var(--osso); }
.taxa-selo.neutro { background: var(--pedra); color: var(--tinta-mudo); }

.taxa-valor {
  font-family: var(--titulo);
  font-size: 40px;
  font-weight: var(--p-medio);
  letter-spacing: -0.03em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.taxa-cartao:not(.melhor) .taxa-valor { color: var(--tinta-mudo); }

.taxa-info { font-size: 16px; line-height: 1.5; color: var(--tinta-mudo); margin-top: 10px; }
.taxa-diferenca { font-size: var(--t-corpo-2); color: var(--ouro); margin-top: var(--e-3); font-style: italic; }

/* ---------- colunas ---------- */

.colunas-duplas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); margin-top: var(--e-5); }
.colunas-triplas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); margin-top: var(--e-5); }
.colunas-quadruplas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); margin-top: var(--e-5); }

.coluna {
  padding: var(--e-3);
  background: var(--papel);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
}

.coluna + .coluna { border-left: 1px solid var(--fio); }
.coluna h3 { font-size: var(--t-titulo-3); margin-bottom: 10px; }
.coluna p { font-size: 16px; line-height: 1.55; color: var(--tinta-mudo); }

.coluna-realce { background: var(--tinta); border-color: var(--tinta); }
.coluna-realce h3 { color: var(--osso-sobre-escuro); }
.coluna-realce p { color: var(--mudo-sobre-escuro); }

.lista-marcada { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: 9px; }

.lista-marcada li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta-mudo);
}

.lista-marcada li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--p-medio);
}

.lista-pro li::before { content: "+"; color: var(--positivo); }
.lista-contra li::before { content: "–"; color: var(--alerta); }

.coluna-realce .lista-marcada li { color: var(--mudo-sobre-escuro); }
.coluna-realce .lista-pro li::before { color: #7fc2a4; }

.colunas-quadruplas + .texto-largo { margin-top: var(--e-4); }

/* ---------- passos ---------- */

.passos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-2);
  margin: var(--e-5) 0 0;
  padding: 0;
}

.passos li {
  padding: var(--e-3);
  background: var(--papel);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
}

.passos li + li { border-left: 1px solid var(--fio); }

.passo-num {
  display: block;
  font-family: var(--titulo);
  font-size: 14.5px;
  font-weight: var(--p-medio);
  letter-spacing: 0.14em;
  color: var(--tinta-mudo);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

.passos h3 { font-size: var(--t-titulo-3); margin-bottom: 8px; }
.passos p { font-size: 16px; line-height: 1.5; color: var(--tinta-mudo); }

/* ---------- credibilidade ---------- */

.secao-credibilidade { background: var(--osso-2); }

.ficha {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: var(--e-5) 0 0;
  background: var(--fio);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  overflow: hidden;
}

.ficha-item { padding: 20px 22px; background: var(--papel); }
.ficha-item + .ficha-item { border-left: none; }

.ficha dt {
  font-size: 12.5px;
  font-weight: var(--p-medio);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-mudo);
}

.ficha dd {
  margin: 5px 0 0;
  font-size: var(--t-corpo-2);
  font-weight: var(--p-medio);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.indicadores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-5);
  margin: var(--e-6) 0 var(--e-4);
}

.indicador { position: relative; padding-top: var(--e-3); }
.indicador::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--ouro); }

.indicador-valor {
  display: block;
  font-family: var(--titulo);
  font-size: clamp(38px, 3.6vw, 52px);
  font-weight: var(--p-medio);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.indicador-mais { color: var(--ouro); }

.indicador-rotulo {
  display: block;
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--tinta-mudo);
  max-width: 28ch;
}

/* ---------- depoimentos ---------- */

.depoimento { background: var(--osso-2); }
.depoimento p { font-size: 16px; line-height: 1.6; color: var(--tinta); font-style: italic; }

.depoimento-quem {
  margin-top: 14px;
  font-size: var(--t-micro);
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--tinta-mudo);
}

/* ---------- FAQ ---------- */

.faq {
  margin-top: var(--e-5);
  background: var(--papel);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  overflow: hidden;
}

.faq details { border-bottom: 1px solid var(--fio); }
.faq details:last-child { border-bottom: none; }

.faq summary {
  position: relative;
  padding: 20px 56px 20px 22px;
  font-size: 18.5px;
  font-weight: var(--p-medio);
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  transition: background var(--transicao);
}

.faq summary:hover { background: var(--osso); }
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--tinta-mudo);
  border-bottom: 1.5px solid var(--tinta-mudo);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--transicao);
}

.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.faq details p {
  padding: 0 56px 20px 22px;
  font-size: var(--t-corpo-2);
  line-height: 1.6;
  color: var(--tinta-mudo);
}

.faq details p + p { padding-top: 12px; }

/* ---------- fechamento: segunda faixa escura ---------- */

.secao-fechamento { padding: var(--e-7) 0; background: var(--tinta); color: var(--osso-sobre-escuro); }

.titulo-fechamento {
  font-size: var(--t-titulo-2);
  font-weight: var(--p-leve);
  color: var(--osso-sobre-escuro);
  max-width: 20ch;
  text-wrap: balance;
}

.titulo-fechamento .ouro { display: block; color: var(--ouro-luz); font-style: italic; }
.secao-fechamento .texto-largo { color: var(--mudo-sobre-escuro); }

/* ---------- formulário ---------- */

.formulario {
  margin-top: var(--e-5);
  padding: var(--e-4);
  background: var(--papel);
  border-radius: var(--raio-g);
  color: var(--tinta);
}

.linha-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); margin-bottom: var(--e-2); }
.campo-form { display: flex; flex-direction: column; }

.campo-form label {
  font-size: var(--t-etiqueta);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  color: var(--tinta-mudo);
  margin-bottom: 8px;
}

.obrigatorio { color: var(--alerta); }

.campo-form input, .campo-form select {
  padding: 13px 15px;
  background: var(--osso);
  border: 1px solid var(--fio);
  border-radius: var(--raio-campo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  transition: border-color var(--transicao), background var(--transicao);
}

.campo-form input:focus, .campo-form select:focus { background: var(--papel); border-color: var(--tinta); outline: none; }
.campo-form select { cursor: pointer; appearance: none; background-image: none; }
.campo-form select option { background: var(--papel); color: var(--tinta); }
.campo-uf { max-width: 140px; }

.detalhes-opcionais { margin-bottom: var(--e-2); }
.detalhes-opcionais summary { font-size: var(--t-corpo-2); color: var(--tinta-mudo); cursor: pointer; }
.detalhes-opcionais summary:hover { color: var(--tinta); }

.erro-form { font-size: var(--t-corpo-2); color: var(--alerta); margin-bottom: 14px; }

.rodape-form { font-size: var(--t-micro); line-height: 1.5; color: var(--tinta-mudo); margin-top: 16px; }
.rodape-form a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.rodape-form a:hover { color: var(--ouro); }

/* ---------- rodapé ---------- */

.rodape { background: var(--tinta-2); color: var(--osso-sobre-escuro); padding: var(--e-6) 0 var(--e-5); }

.rodape-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
.rodape-simbolo { width: 38px; height: 38px; object-fit: contain; margin-bottom: 12px; }

.rodape-marca {
  font-family: var(--titulo);
  font-size: 13.5px;
  font-weight: var(--p-medio);
  letter-spacing: 0.09em;
  color: var(--osso-sobre-escuro);
}

.rodape-doc { font-size: var(--t-micro); color: var(--mudo-sobre-escuro); margin-top: 6px; }

.rodape-bloco h3 {
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  color: var(--mudo-sobre-escuro);
  margin-bottom: 14px;
}

.rodape-bloco p { font-size: 16px; color: var(--osso-sobre-escuro); margin-bottom: 6px; }
.rodape-bloco a { color: var(--osso-sobre-escuro); text-decoration: none; border-bottom: 1px solid var(--fio-sobre-escuro); }
.rodape-bloco a:hover { border-bottom-color: var(--ouro-luz); color: var(--ouro-luz); }

/* ---------- divulgação obrigatória ---------- */

.rodape-aviso { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--fio-sobre-escuro); }

.aviso-titulo {
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--p-medio);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  color: var(--mudo-sobre-escuro);
  margin-bottom: var(--e-3);
}

.aviso-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-5); margin: 0; }

.aviso-grade dt {
  font-size: var(--t-micro);
  font-weight: var(--p-medio);
  letter-spacing: 0.06em;
  color: var(--osso-sobre-escuro);
  margin-bottom: 6px;
}

.aviso-grade dd { margin: 0; font-size: var(--t-micro); line-height: 1.6; color: var(--mudo-sobre-escuro); }
.aviso-grade dd strong { color: var(--osso-sobre-escuro); font-weight: var(--p-medio); }

.aviso-logo { display: block; width: 104px; height: auto; margin-bottom: 10px; opacity: 0.8; }
.aviso-grade div:hover .aviso-logo { opacity: 1; }

.rodape-aviso p { margin-top: var(--e-4); font-size: 13.5px; line-height: 1.6; color: var(--mudo-sobre-escuro); }

/* ---------- página de documento ---------- */

.documento { padding: var(--e-7) 0; }
.documento h1 { font-size: var(--t-titulo-2); font-weight: var(--p-medio); margin-bottom: 10px; }
.documento .atualizado { font-size: var(--t-micro); color: var(--tinta-mudo); margin-bottom: var(--e-5); }
.documento h2 { font-size: var(--t-titulo-3); margin: var(--e-5) 0 12px; }
.documento p, .documento li { font-size: var(--t-corpo-2); line-height: 1.68; color: var(--tinta-mudo); }
.documento p + p { margin-top: 12px; }
.documento ul { padding-left: 20px; display: grid; gap: 8px; margin: 12px 0 0; }
.documento a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

/* ============ responsivo ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 1180px) {
  .banner-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 412px); }
  .menu { gap: var(--e-3); }
}

@media (max-width: 1160px) {
  .ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1020px) {
  .menu { display: none; }
  .faixa { gap: var(--e-2); }
  .botao-compacto { margin-left: auto; }
  .colunas-quadruplas, .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilares-cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Abaixo de 900px toda grade editorial vira lista vertical. */
@media (max-width: 900px) {
  .pilares, .pilares-cinco, .comparativo-taxas, .colunas-duplas, .colunas-triplas,
  .colunas-quadruplas, .passos, .ficha, .indicadores {
    grid-template-columns: minmax(0, 1fr);
  }

  .pilar + .pilar, .coluna + .coluna, .taxa-cartao + .taxa-cartao,
  .passos li + li, .ficha-item + .ficha-item { border-left: 1px solid var(--fio); }

  .pilar p, .indicador-rotulo, .coluna p { max-width: none; }
  .indicadores { gap: var(--e-4); margin: var(--e-5) 0 var(--e-4); }

  .cabecalho-duplo { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
  .cabecalho-duplo .texto-largo { padding-bottom: 0; }
  .secao h2, .cabecalho-duplo h2, .titulo-editorial { max-width: none; }

  /* O retrato vira faixa superior e a citação desce. */
  .faixa-citacao { display: block; min-height: 0; padding: 0 0 var(--e-6); }
  .citacao-foto { position: relative; inset: auto; width: 100%; height: 280px; margin-bottom: var(--e-3); }
  .citacao-foto img {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
  }
  .citacao-grade { grid-template-columns: minmax(0, 1fr); }
  .citacao { max-width: none; }

  .quadro-num { font-size: 24px; width: 58px; }
  .quadro th { font-size: 16.5px; width: auto; }
  .quadro td, .quadro th { padding: 14px 14px; }
  .quadro-nota { display: block; font-size: 14.5px; }

  .ressalvas li { padding-left: 0; padding-top: 44px; }
  .ressalvas li::before { top: 20px; }

  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
  .aviso-grade { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
  .linha-campos { grid-template-columns: minmax(0, 1fr); }
  .campo-uf { max-width: none; }
}

/* Mobile é produto próprio: a cena vira faixa no topo, o texto desce por cima
   dela e o simulador fica logo abaixo — não é o desktop espremido. */
@media (max-width: 900px) {
  .banner { padding: 16px 0 var(--e-6); }

  /* Empilhado não há coluna para a foto: ela volta a ser faixa no topo e o
     texto volta a se deitar sobre ela, com o véu de legibilidade de volta. */
  .banner-grade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 16px;
  }

  .banner-palco { grid-column: 1; grid-row: 1; }
  .banner-vao { grid-column: 1; grid-row: 2; padding-left: 0; }
  .simulador { grid-column: 1; grid-row: 3; margin-top: 0; }
  .banner-cta { display: flex; width: 100%; margin-top: 18px; }

  /* Empilhado, o texto desce PARA BAIXO da foto, sobre o osso — não por cima
     dela. É o que elimina de vez a necessidade de escurecer a imagem. */
  .banner-slide { flex-direction: column; align-items: stretch; gap: 18px; }

  .banner-slide img {
    order: 1;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1500 / 844;
  }

  .banner-texto { order: 2; flex: none; width: 100%; padding: 0; }
  .banner h1 { max-width: none; margin-bottom: 10px; }
  .banner-linha { max-width: none; font-size: var(--t-corpo-2); }

  .simulador-corpo { grid-template-columns: minmax(0, 1fr); }
  .simulador-resumo .resultado { padding-top: 20px; border-top: 1px solid var(--fio); }

  .banner-vao { padding-top: 0; }

  /* Os seletores rolam na horizontal em vez de quebrar em linhas apertadas. */
  .banner-pontos {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .banner-pontos::-webkit-scrollbar { display: none; }
  .banner-ponto { flex: none; }
  .banner-ponto + .banner-ponto { margin-left: 16px; }
}

@media (max-width: 760px) {
  /* Com o texto maior, marca e botão passaram a disputar a mesma linha. Em vez
     de encolher a letra abaixo do piso, o nome cede espaço com reticências e o
     botão aperta o respiro lateral. */
  .faixa { min-height: 60px; gap: 10px; }
  .marca { flex: 1 1 auto; min-width: 0; gap: 9px; }
  .marca-simbolo { flex: none; width: 32px; height: 32px; }
  .marca-texto { min-width: 0; }

  .marca-texto strong {
    font-size: 12.5px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .marca-texto small { display: none; }
  .botao-compacto { flex: none; padding: 10px 15px; font-size: 14.5px; white-space: nowrap; }

  /* O rótulo do botão encurta para "Simular": cortar o nome da marca com
     reticências seria pior do que cortar a palavra do botão. */
  .so-largo { display: none; }

  .banner-texto .sobrancelha { font-size: 12.5px; letter-spacing: 0.11em; margin-bottom: 12px; }

  .simulador { padding: 22px 18px; }
  .simulador-titulo { font-size: 23px; }
  .formulario { padding: var(--e-3) 20px; }

  .resultado-grade { grid-template-columns: minmax(0, 1fr); }
  .resultado-grade > div,
  .resultado-grade > div:nth-child(odd),
  .resultado-grade > div:nth-child(even) { padding: 12px 14px; }

  .pilares, .comparativo-taxas, .colunas-duplas, .colunas-triplas,
  .colunas-quadruplas, .passos, .ficha { margin-top: var(--e-4); }
  .quadro { margin-top: var(--e-4); }
}

@media (max-width: 560px) {
  .rodape-grade { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
}

@media (max-width: 420px) {
  .opcao { font-size: 14.5px; padding: 8px 14px; }
  .resultado-valor { font-size: 34px; }
}