/* 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; }

/* Esta regra existe e se paga: as respostas do FAQ, a lista de custos e os
   cards de caso usam parágrafo em cinza, e é ela que devolve a tinta cheia ao
   trecho enfatizado. Medido: sem ela, 18 ênfases legítimas desbotam.

   Mas ela é cega ao fundo. Em bloco de fundo escuro o mesmo tinta pinta o
   texto da cor do próprio fundo — contraste 1,0, texto presente, selecionável
   e invisível. Já aconteceu duas vezes: o nome do assessor no rodapé, e a
   frase "mando a estratégia no seu WhatsApp" no fechamento, que nasceu
   invisível e só apareceu quando o CEO viu o buraco no meio do parágrafo.

   A regra seguinte devolve a cor herdada em toda superfície escura. Ela vem
   AQUI, antes das exceções (.banner-linha, .passo-detalhe, .aviso-grade),
   para que elas continuem vencendo por ordem de origem. O portão deriva a
   lista de superfícies escuras da própria folha e reprova se alguma ficar de
   fora — enumerar à mão foi exatamente o que falhou as duas vezes. */
strong { color: var(--tinta); font-weight: var(--p-medio); }
.pular strong,
.botao-primario strong,
.opcao[aria-checked="true"] strong,
.taxa-selo.melhor strong,
.secao-fechamento strong,
.faixa-citacao strong,
.credito-realce strong,
.credito-diferenca strong,
.coluna-realce strong,
.rodape strong { color: inherit; }

: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; }

/* O irmão do .ouro para quando o destaque é uma NEGAÇÃO. Mesmo itálico, mesma
   função de grifo, cor oposta: o ouro promete, o vermelho recusa. Existe num
   lugar só hoje — o "não" de "Quem não deve fazer consórcio" — e é de propósito
   que seja raro. Vermelho usado em tudo deixa de significar alguma coisa. */
.negacao { color: var(--alerta); font-style: italic; }

/* O convite ao atendimento, em azul. Medido: var(--azul) sobre var(--osso) dá
   4,81:1, acima dos 4,5:1 que o texto normal exige — folga pequena, então
   este azul não serve para texto menor que o do corpo. */
.convite { color: var(--azul); font-weight: var(--p-medio); }

/* 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; }
/* A mesma luz do rodapé, recalibrada para o fundo CLARO do cabeçalho: aqui
   branco sobre osso quase não aparece, então a luz é só o suficiente para
   destacar o leão do bege, e quem dá o relevo é a sombra. Copiar os valores
   do rodapé deixaria a marca do topo chapada.

   O cabeçalho é fixo e rola junto: três drop-shadow num elemento de 40px são
   baratos, mas é por isso que são três e não cinco. */
.marca-simbolo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.95))
    drop-shadow(0 1px 1px rgba(17, 28, 53, 0.24))
    drop-shadow(0 3px 6px rgba(17, 28, 53, 0.15));
}
.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.
   O relevo aqui não é enfeite: a pílula não escolhida fica SALIENTE e a
   escolhida fica AFUNDADA, então o estado de seleção se lê pelo volume antes
   de se ler pela cor — que é o que salva quem enxerga mal ou está no sol. */
.opcao {
  padding: 9px 16px;
  background: linear-gradient(180deg, #ffffff 0%, var(--osso) 100%);
  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;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(17, 28, 53, 0.08),
    0 1px 1px rgba(17, 28, 53, 0.06),
    0 3px 7px rgba(17, 28, 53, 0.07);
  transition: background var(--transicao), border-color var(--transicao),
    color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}

.opcao:hover {
  border-color: var(--fio-forte);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(17, 28, 53, 0.08),
    0 2px 3px rgba(17, 28, 53, 0.08),
    0 7px 16px rgba(17, 28, 53, 0.11);
}

.opcao:active { transform: translateY(1px); }

.opcao[aria-checked="true"] {
  background: linear-gradient(180deg, #0c1529 0%, var(--tinta) 55%, #27385f 100%);
  border-color: var(--tinta);
  color: var(--osso);
  transform: none;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.42),
    inset 0 -1px 0 rgba(246, 244, 236, 0.12),
    0 1px 1px rgba(17, 28, 53, 0.18);
}

.opcao[aria-checked="true"]:hover { transform: none; }

.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;
}

/* Único controle do simulador que continuava plano. Recebe o mesmo relevo das
   pílulas: solto sai da página, marcado afunda. A marca de conferido é desenhada
   em CSS porque a nativa não sobrevive ao fundo escuro do estado marcado.

   A navegação do banner NÃO entra nesse vocabulário de propósito: ela é
   navegação da fotografia, não escolha de produto, e a distinção entre as duas
   foi pedida explicitamente. Relevo lá faria a foto parecer um seletor. */
.alternador input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--osso) 100%);
  border: 1px solid var(--fio-forte);
  border-radius: 6px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(17, 28, 53, 0.08),
    0 1px 1px rgba(17, 28, 53, 0.06),
    0 3px 7px rgba(17, 28, 53, 0.07);
  transition: background var(--transicao), border-color var(--transicao),
    box-shadow var(--transicao), transform var(--transicao);
}

.alternador input:hover { border-color: var(--tinta-mudo); }

.alternador input:checked {
  background: linear-gradient(180deg, #0c1529 0%, var(--tinta) 55%, #27385f 100%);
  border-color: var(--tinta);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.42),
    inset 0 -1px 0 rgba(246, 244, 236, 0.12),
    0 1px 1px rgba(17, 28, 53, 0.18);
}

/* O tique: duas bordas de um retângulo girado 45°, o truque clássico, porque
   um glifo de fonte mudaria de forma conforme a fonte que carregar. */
.alternador input:checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  margin: 2px auto 0;
  border: solid var(--osso-sobre-escuro);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.alternador input:active { transform: translateY(1px); }

/* ---------- 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);
}

/* Relevo claro: a mesma gramática do botão primário, invertida para uma
   superfície clara — luz no topo, sombra interna na base, contato curto e
   projeção longa. Em pílula pequena o volume tem que ser sutil, senão vira
   adesivo. */
.resultado-selo {
  padding: 5px 12px;
  background: linear-gradient(180deg, #ffffff 0%, var(--osso) 62%, #eae6d9 100%);
  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);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(17, 28, 53, 0.07),
    0 1px 1px rgba(17, 28, 53, 0.06),
    0 3px 8px rgba(17, 28, 53, 0.08);
}

.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; }

/* Vaga contada nos dedos é a única escassez que esta página tem direito de
   mostrar, e ela vem da coluna do portal. Ganha peso e a cor de alerta; acima
   do limite a mesma linha fica em cinza, como informação. */
.vagas-poucas { font-weight: var(--p-forte); color: var(--alerta); }

/* Painel de dados: seis fichas com volume próprio em vez de um bloco fatiado
   por fios. O vão de 8px existe para a sombra caber — com 1px de gap as
   projeções se somavam e o painel ficava sujo. */
.resultado-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.resultado-grade > div {
  padding: 12px 14px;
  background: linear-gradient(180deg, #ffffff 0%, var(--osso) 100%);
  border: 1px solid var(--fio);
  border-radius: var(--raio-campo);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(17, 28, 53, 0.05),
    0 1px 1px rgba(17, 28, 53, 0.05),
    0 4px 10px rgba(17, 28, 53, 0.06);
}

.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); }

/* Com sete fichas na grade, a última ocuparia meia linha. Ocupa a linha toda —
   e é a da assembleia, que é a que se quer lida. */
.dado-largo { grid-column: 1 / -1; }

/* ---------- a calculadora ----------

   O dono pediu uma calculadora de smartphone desenhada na tela. Os quatro
   especialistas recusaram o desenho pelo mesmo motivo: esta página não tem UMA
   ilustração, UM ícone decorativo, UM skeumorfismo — o relevo que ela usa
   codifica ESTADO (pílula solta = não escolhida, afundada = escolhida), nunca
   imita objeto. E desenhar um celular dentro de um celular é a única moldura
   que se anula sozinha: a maior parte do tráfego já chega pelo aparelho que
   estaria sendo retratado.

   O que ficou no lugar entrega a mesma coisa sem desenhar nada: FITA. Algarismo
   tabular, coluna alinhada à direita, operador na margem, fio antes do total.
   É o único bloco da página alinhado à direita — a variação de ritmo vem do
   conteúdo, e não de enfeite.

   PROIBIDO acrescentar aqui moldura, teclado numérico, notch ou botão
   desenhado. Se alguém quiser o aparelho, que reabra a discussão no
   VISUAL_BLUEPRINT antes de tocar neste bloco. */

.calculadora { margin: 14px 0 18px; }

/* Abre por clique, Enter e Espaço — nunca por hover. Painel que abre ao passar
   o mouse dispara sem intenção na rolagem, não existe no toque e cai na WCAG
   1.4.13. O relevo aqui é o mesmo do botão primário, herdado, não reinventado. */
.calc-abrir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 11px 16px;
  background: linear-gradient(180deg, #ffffff 0%, var(--osso) 100%);
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio-campo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-corpo-2);
  font-weight: var(--p-medio);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(17, 28, 53, 0.08),
    0 1px 1px rgba(17, 28, 53, 0.06),
    0 3px 7px rgba(17, 28, 53, 0.07);
  transition: transform var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}

.calc-abrir:hover {
  border-color: var(--tinta-mudo);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(17, 28, 53, 0.08),
    0 3px 5px rgba(17, 28, 53, 0.1),
    0 9px 20px rgba(17, 28, 53, 0.13);
}

.calc-abrir:active { transform: translateY(1px); }

/* Aberto, o botão AFUNDA — mesma gramática da pílula escolhida. O estado se lê
   pelo volume antes de se ler pela seta. */
.calc-abrir[aria-expanded="true"] {
  transform: none;
  box-shadow:
    inset 0 2px 5px rgba(17, 28, 53, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.6);
}

.calc-seta {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--tinta-mudo);
  transition: transform var(--transicao);
}

.calc-abrir[aria-expanded="true"] .calc-seta { transform: rotate(180deg); }

/* O painel fica AFUNDADO no papel, como um recorte — não é tela colada por
   cima. Mesma sombra interna do checkbox marcado. */
.calc-painel {
  margin-top: 10px;
  padding: 16px 18px;
  background: var(--osso-2);
  border: 1px solid var(--fio);
  border-radius: var(--raio-campo);
  box-shadow: inset 0 2px 6px rgba(17, 28, 53, 0.08);
}

.calc-fita { list-style: none; margin: 0; padding: 0; }

/* O seguro é produto à parte — cobertura de morte e invalidez, não custo do
   crédito. A separação é explícita, não herdada de um seletor de irmão: fita
   própria, recuada, com o fio grosso marcando que ali começa outra conta. Se
   alguém um dia juntar as duas, a diferença visual some antes do número. */
.calc-fita-seguro {
  margin-top: 18px;
  padding-top: 16px;
  padding-left: 12px;
  border-top: 1px solid var(--fio-forte);
  border-left: 2px solid var(--fio);
}

.calc-linha {
  display: grid;
  grid-template-columns: 1.4em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
}

.calc-op {
  font-size: var(--t-corpo-2);
  color: var(--tinta-mudo);
  font-variant-numeric: tabular-nums;
}

/* A ordem visual é invertida em relação ao DOM: o valor vai para a direita e a
   legenda fica no meio. No DOM a legenda vem depois do número porque é isso que
   o leitor de tela precisa ouvir — o valor, e então o que ele é. */
.calc-num {
  order: 3;
  justify-self: end;
  font-size: var(--t-corpo);
  font-weight: var(--p-medio);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-leg {
  order: 2;
  min-width: 0;
  font-size: var(--t-micro);
  line-height: 1.35;
  color: var(--tinta-mudo);
}

/* O fio antes do resultado é o que faz isso ser lido como conta. */
.calc-soma { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--fio-forte); }

/* O número que a peça existe para produzir: o custo do crédito virando
   mensalidade. É maior que as linhas de cima e MENOR que a parcela lá em cima —
   a parcela continua sendo o número primário do cartão. */
.calc-destaque .calc-num { font-size: 22px; font-weight: var(--p-forte); color: var(--ouro); }
.calc-destaque .calc-leg { color: var(--tinta); }

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

/* A animação é ENTRADA, nunca existência: o repouso é visível. Declarar
   opacity:0 na regra base deixaria a conta invisível para sempre para quem pede
   menos movimento, porque a folha já anula toda animação mais abaixo. Por isso
   o opacity:0 mora só dentro do @keyframes. */
@keyframes calcEntra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.calc-painel[data-anima="1"] .calc-linha {
  animation: calcEntra 320ms cubic-bezier(0.32, 0.72, 0.35, 1) backwards;
}

.calc-painel[data-anima="1"] .calc-linha:nth-child(1) { animation-delay: 0ms; }
.calc-painel[data-anima="1"] .calc-linha:nth-child(2) { animation-delay: 110ms; }
.calc-painel[data-anima="1"] .calc-linha:nth-child(3) { animation-delay: 260ms; }
.calc-painel[data-anima="1"] .calc-linha:nth-child(4) { animation-delay: 420ms; }
.calc-painel[data-anima="1"] .calc-linha:nth-child(5) { animation-delay: 560ms; }
.calc-painel[data-anima="1"] .calc-linha:nth-child(6) { animation-delay: 680ms; }
.calc-painel[data-anima="1"] .calc-linha:nth-child(7) { animation-delay: 800ms; }

/* A conta refeita. Não é aviso legal nem rodapé: é a prova de que o número de
   cima é conferível, e fica no corpo do texto para ser lida. */
.conta-fecha {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--osso-2);
  border-left: 2px solid var(--ouro);
  border-radius: var(--raio-campo);
  font-size: var(--t-corpo-2);
  line-height: 1.5;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.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); }

/* A linha acende em tinta ao passar o mouse, igual aos cartões de modalidade e
   à coluna do consórcio: é o mesmo gesto em toda a página. A elevação é sutil
   porque linha de tabela que salta desalinha a grade inteira — o relevo aqui
   vem da sombra e do contraste, não do deslocamento.

   O destaque é só visual: a tabela não abre nada, não esconde nada e continua
   legível sem mouse nenhum. Quem navega por teclado recebe o mesmo estado pelo
   :focus-within. */
.quadro tbody tr {
  transition:
    background var(--transicao),
    box-shadow var(--transicao);
}
.quadro tbody tr:hover,
.quadro tbody tr:focus-within {
  background: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta);
}
.quadro tbody tr:hover .quadro-num,
.quadro tbody tr:focus-within .quadro-num,
.quadro tbody tr:hover th,
.quadro tbody tr:focus-within th { color: var(--osso-sobre-escuro); }
.quadro tbody tr:hover .quadro-nota,
.quadro tbody tr:focus-within .quadro-nota { color: var(--mudo-sobre-escuro); }
/* A linha aberta já é ouro; sobre tinta ela precisa do ouro claro, que é o
   emprego declarado do token. */
.quadro-aberto:hover th,
.quadro-aberto:focus-within th { color: var(--ouro-luz); }

/* Quem pediu menos movimento no sistema não recebe transição nenhuma aqui —
   o estado de destaque continua existindo, só não anima. */
@media (prefers-reduced-motion: reduce) {
  .quadro tbody tr { transition: none; }
}

/* ---------- o mesmo gesto em toda a página ----------

   Cartão sobe ao mouse, linha acende. Estava só nos cartões de modalidade e foi
   sendo pedido seção por seção; juntar aqui evita que cada bloco ganhe uma
   variação ligeiramente diferente e a página vire quatro sotaques.

   Nada disso abre, esconde ou move conteúdo: é resposta visual. O que abre é
   botão, e abre por clique. */
.colunas-duplas .coluna,
.colunas-triplas .coluna,
.colunas-quadruplas .coluna {
  transition:
    transform var(--transicao),
    box-shadow var(--transicao),
    border-color var(--transicao);
}
.colunas-duplas .coluna:hover,
.colunas-triplas .coluna:hover,
.colunas-quadruplas .coluna:hover,
.colunas-duplas .coluna:focus-within,
.colunas-triplas .coluna:focus-within,
.colunas-quadruplas .coluna:focus-within {
  transform: translateY(-2px);
  border-color: var(--tinta-mudo);
  box-shadow: 0 10px 22px -14px rgba(17, 28, 53, 0.45);
}
/* A coluna de realce já é tinta: sobre ela a borda escura não aparece, e quem
   marca o estado é a sombra. */
.coluna-realce:hover,
.coluna-realce:focus-within { border-color: var(--tinta); }
.colunas-duplas .coluna:active,
.colunas-triplas .coluna:active,
.colunas-quadruplas .coluna:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .colunas-duplas .coluna,
  .colunas-triplas .coluna,
  .colunas-quadruplas .coluna { transition: none; }
  .colunas-duplas .coluna:hover,
  .colunas-triplas .coluna:hover,
  .colunas-quadruplas .coluna:hover { transform: none; }
}

/* O aviso de pagamento perdeu a frase "se alguém pedir, é golpe" — a anterior já
   dizia o mesmo, e repetir enfraquecia as duas. Sem a repetição, o peso tem de
   vir da tipografia: negrito na tinta da marca, que é o máximo que o corpo de
   texto desta página usa. */
.aviso-forte { font-weight: var(--p-forte); color: var(--tinta); }

/* ---------- equipe e modalidades no rodapé ---------- */

.rodape-equipe, .rodape-modalidades { list-style: none; margin: 0; padding: 0; }
.rodape-equipe li + li { margin-top: 16px; }
.rodape-modalidades li + li { margin-top: 6px; }

/* O símbolo fica na linha do NOME, não ao lado do bloco inteiro. Com ele como
   irmão do bloco, os 28px que ele ocupa saíam da largura das três linhas, e
   "WhatsApp (66) 99672-9098" quebrava entre o "99672-" e o "9098" — um
   telefone partido ao meio na coluna do rodapé. Assim as linhas de baixo
   usam a coluna toda. */
.rodape-whats {
  display: block;
  text-decoration: none;
  /* 24px de alvo mínimo, WCAG 2.5.8 — no rodapé o dedo erra fácil. */
  min-height: 24px;
}
.rodape-nome { display: flex; align-items: center; gap: 8px; }
/* color: inherit não é enfeite. A folha tem um `strong { color: var(--tinta) }`
   global, feito para o corpo da página, que é claro. Aqui dentro o fundo é
   marinho — e o nome do assessor saía a 1,23:1 contra ele, ou seja, o nome da
   pessoa que o visitante precisa procurar era invisível. Herdando a cor do
   rodapé, vai a 12,5:1. */
.rodape-whats strong { color: inherit; font-weight: var(--p-medio); }
.rodape-fone { display: block; font-size: var(--t-corpo-2); }
/* A praça do assessor. Fica ao lado do nome, em caixa alta miúda: quem abre a
   página de Madri precisa achar em um passe de olho quem atende a Europa. */
.rodape-whats em {
  display: block;
  font-style: normal;
  font-size: var(--t-micro);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  opacity: 0.7;
}

/* O glifo do WhatsApp entra como máscara vetorial embutida no CSS: não é um
   arquivo a mais no pacote, e como máscara ele assume a cor de quem o usa —
   verde de marca no rodapé escuro, branco dentro do botão flutuante. */
.whats-icone {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-color: var(--zap-luz);
  -webkit-mask: var(--glifo-whats) center / contain no-repeat;
  mask: var(--glifo-whats) center / contain no-repeat;
}

.rodape-praca { margin-top: 14px; }

/* ---------- botão flutuante de WhatsApp ----------
   Segue a rolagem em toda a página. Três decisões que não são de gosto:

   1. Abre no CLIQUE, não no passar do mouse. Um painel que só existe enquanto
      o cursor está em cima reprova em WCAG 1.4.13 e simplesmente não existe
      no dedo — e é no telefone que este lead chega.
   2. z-index 60: acima do topo fixo (50), abaixo do link de pular (100). O
      atalho de teclado não pode ficar atrás de um botão decorativo.
   3. O rodapé ganha folga embaixo para o botão nunca cobrir a linha do CNPJ. */

.zap {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.zap-botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: var(--raio-pilula);
  background: var(--zap);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--t-corpo-2);
  font-weight: var(--p-medio);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(17, 28, 53, 0.18), 0 12px 32px rgba(17, 28, 53, 0.14);
  transition: transform var(--transicao), background-color var(--transicao);
}
.zap-botao:hover { background: var(--zap-fundo); transform: translateY(-2px); }
.zap-botao:active { transform: translateY(0); }
.zap-botao .whats-icone { width: 22px; height: 22px; margin-top: 0; background-color: #fff; }

/* A seta gira quando o painel abre — é o único sinal de que o botão é um
   menu e não um link direto. */
.zap-seta {
  width: 0;
  height: 0;
  margin-left: 2px;
  border: 5px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  transition: transform var(--transicao);
}
.zap-botao[aria-expanded="true"] .zap-seta { transform: rotate(180deg); }

/* O seletor dos CTAs usa a mesma casca do painel flutuante, mas posicionado
   por coordenada (o app escreve top/left). z-index 70: acima do próprio botão
   flutuante, porque os dois podem estar na tela ao mesmo tempo. */
.zap-escolha {
  position: fixed;
  z-index: 70;
  width: min(300px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid var(--fio);
  border-radius: var(--raio-g);
  background: #fff;
  box-shadow: var(--sombra-alta);
  animation: zap-entra 0.18s ease-out;
}
.zap-escolha[hidden] { display: none; }

.zap-painel {
  width: min(280px, calc(100vw - var(--gutter) * 2));
  padding: 14px;
  border: 1px solid var(--fio);
  border-radius: var(--raio-g);
  background: #fff;
  box-shadow: var(--sombra-alta);
  animation: zap-entra 0.18s ease-out;
}
.zap-painel[hidden] { display: none; }

@keyframes zap-entra {
  from { opacity: 0; transform: translateY(8px); }
}

.zap-titulo {
  margin: 0 0 4px;
  font-family: var(--titulo);
  font-size: var(--t-corpo-2);
  font-weight: var(--p-medio);
}
.zap-linha { margin: 0 0 10px; font-size: var(--t-micro); color: var(--tinta-mudo); }

.zap-lista { list-style: none; margin: 0; padding: 0; }
.zap-lista li + li { margin-top: 4px; }

.zap-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: var(--raio-campo);
  text-decoration: none;
  color: var(--tinta);
  transition: background-color var(--transicao);
}
.zap-item:hover { background: var(--osso); }
.zap-item .whats-icone { width: 20px; height: 20px; margin-top: 0; background-color: var(--zap); }
.zap-item strong { display: block; font-weight: var(--p-medio); font-size: var(--t-corpo-2); }
.zap-item span span { display: block; font-size: var(--t-micro); color: var(--tinta-mudo); }

/* Fecha o painel se alguém insistir em reduzir animação: o keyframe é o único
   lugar onde o opacity: 0 pode viver, senão o painel some para sempre. */
@media (prefers-reduced-motion: reduce) {
  .zap-botao, .zap-seta, .zap-item { transition: none; }
  .zap-painel, .zap-escolha { animation: none; }
  .zap-botao:hover { transform: none; }
}

/* No telefone o rótulo sai e fica o símbolo: um botão com texto ocupa um
   terço da largura da tela e atravessa a leitura. */
@media (max-width: 600px) {
  .zap-botao { padding: 0; width: 56px; height: 56px; justify-content: center; }
  .zap-rotulo, .zap-seta { display: none; }
  .zap-botao .whats-icone { width: 28px; height: 28px; }
}

/* A ressalva dos casos continua na tela, mas um degrau abaixo da frase que
   interessa ao leitor. Ela existe por obrigação — são nomes de pessoas reais —
   e não precisa competir com o argumento. */
.caso-nota { display: block; margin-top: 6px; font-size: var(--t-micro); opacity: 0.8; }

/* ---------- a equipe em três camadas ----------

   Cada pessoa é um <button> com a própria foto. O empilhamento vem da ordem no
   DOM mais z-index: Geisy e Jorge atrás, Valdir à frente.

   O MOVIMENTO É DE PROPÓSITO PEQUENO. O pedido foi "sutil": 2% de escala e 6px
   de subida. Parece pouco escrito assim, e é exatamente o ponto — numa foto de
   600px de altura, 2% são 12px, o bastante para o olho registrar profundidade
   sem a pessoa "pular". Quem dá a leitura de frente-e-fundo não é o tamanho, é
   o contraste: as outras duas perdem saturação e ganham um véu escuro. O olho
   lê "aquela veio para frente" porque as outras recuaram, não porque uma
   cresceu.

   transform e opacity são as duas únicas propriedades animadas aqui, e isso
   não é detalhe: são as que o navegador resolve na GPU sem refazer o layout.
   Animar width ou top nesta faixa causaria recálculo a cada quadro. */
.equipe {
  /* A luz atrás do grupo. Estava presa ao container da foto única e sumiu
     quando ela virou três camadas — regressão que só apareceu porque os checks
     do portão ficaram órfãos e reprovaram. Fica no container, nunca nas
     imagens: as três têm alfa, e gradiente aplicado nelas seria recortado pela
     própria silhueta em vez de brilhar por trás. */
  background: radial-gradient(
    30% 30% at 50% 40%,
    rgba(246, 244, 236, 0.16) 0%,
    rgba(246, 244, 236, 0.07) 48%,
    rgba(246, 244, 236, 0) 78%
  );
  position: absolute;
  top: 18px;
  right: var(--gutter);
  left: calc(max(var(--gutter), (100% - var(--largura)) / 2) + 620px);
  bottom: 0;
}
.equipe[hidden] { display: none; }

.equipe-pessoa {
  position: absolute;
  bottom: 0;
  top: 0;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
  /* A foto vira link para o WhatsApp da pessoa. O cursor é o único sinal que
     o visitante tem antes de clicar, junto com o "Falar no WhatsApp" do
     rótulo — sem ele a foto parece decoração. */
  cursor: pointer;
  transition: transform var(--transicao), filter var(--transicao), opacity var(--transicao);
}
.equipe-pessoa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  /* drop-shadow e não box-shadow: segue o canal alfa, então a sombra tem a
     forma da pessoa. box-shadow sombrearia o retângulo da imagem e apareceria
     como um quadrado sobre o fundo escuro. Fio de luz no alto, sombra de
     contato curta, projeção longa. */
  filter:
    drop-shadow(0 -1px 0 rgba(246, 244, 236, 0.14))
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.34))
    drop-shadow(0 16px 30px rgba(0, 0, 0, 0.38));
}

/* As três posições. A largura de cada uma é maior que a fatia visível porque a
   foto tem margem transparente em volta da pessoa — medido: 22% de sobra de
   cada lado na Geisy, 21% no Jorge. Sem essa folga elas ficariam espremidas. */
.equipe-pessoa[data-pos="esq"]    { left: 0;    width: 44%; z-index: 1; }
.equipe-pessoa[data-pos="dir"]    { right: 0;   width: 46%; z-index: 1; }
.equipe-pessoa[data-pos="centro"] { left: 22%;  width: 52%; z-index: 2; }

/* O destaque. z-index 3 tira a pessoa de trás das outras duas — sem isso a
   Geisy cresceria por baixo do Valdir e o efeito não se veria. */
.equipe:hover .equipe-pessoa,
.equipe:focus-within .equipe-pessoa {
  filter: saturate(0.55) brightness(0.72);
  opacity: 0.85;
}
/* Os seletores repetem o `.equipe:hover` de propósito. A versão anterior era
   só `.equipe-pessoa:hover` — dois seletores — e perdia para
   `.equipe:hover .equipe-pessoa`, que tem três. O resultado: a pessoa apontada
   subia e continuava escurecida, com o retângulo da própria camada aparecendo
   como uma película sobre a foto. Especificidade igual, ordem decide, e esta
   vem depois. */
.equipe:hover .equipe-pessoa:hover,
.equipe:focus-within .equipe-pessoa:focus-visible,
.equipe-pessoa:hover,
.equipe-pessoa:focus-visible {
  z-index: 3;
  transform: translateY(-6px) scale(1.02);
  filter: none;
  opacity: 1;
}

/* ---------- o cargo ---------- */
.equipe-cargo {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, 6px);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 14px;
  border-radius: var(--raio);
  /* Fundo escuro com véu: o rótulo cai sobre a calça escura de dois dos três,
     e texto claro sem fundo sumiria ali. */
  background: rgba(17, 28, 53, 0.86);
  color: var(--osso-sobre-escuro);
  font-size: var(--t-micro);
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicao), transform var(--transicao);
}
.equipe-cargo strong {
  color: var(--osso);
  font-weight: var(--p-medio);
  font-size: var(--t-corpo-2);
}
/* O cargo era um nó de texto solto dentro do rótulo — sem elemento, não havia
   como mostrá-lo aqui e escondê-lo no telefone. <small> dá o gancho.

   O font-size explícito NÃO é redundante: o padrão do <small> é 0.8em, o que
   daria 11,2px aqui, abaixo do piso de 12,5px da página. E o portão não pegaria
   — ele varre valores em px escritos na folha, e um tamanho que nasce do
   navegador não está escrito em lugar nenhum. É o tipo de miudeza que entra por
   baixo da trava, então o tamanho fica declarado. */
.equipe-cargo small { font-size: var(--t-micro); }
/* "Falar no WhatsApp" dentro do rótulo. Foto clicável não tem affordance
   nenhuma — sem esta linha, quem passa o mouse descobre o cargo e não descobre
   que pode clicar. Em verde de marca porque é a mesma promessa dos outros
   caminhos da página, e a regra da casa é que todo link para o WhatsApp diga
   isso antes do clique. */
.equipe-cargo em {
  margin-top: 4px;
  font-style: normal;
  /* 11,5px e não --t-micro (14px): este é o terceiro nível de informação do
     rótulo, abaixo do nome e do cargo. No tamanho anterior ele competia com o
     cargo e o olho lia o verde primeiro, que é a ordem errada — quem a pessoa
     é vem antes do que ela faz por você.

     12,5px é o PISO da página, não uma escolha: o portão reprova texto menor,
     e reprovou a primeira tentativa com 11,5px. A discrição que faltou no
     tamanho veio da cor e do peso. */
  font-size: 12.5px;
  letter-spacing: 0.04em;
  /* Ouro e não verde, por decisão do CEO — e ele tem razão de sistema: o ouro
     já é a cor de destaque desta página sobre fundo escuro, e o verde estava
     metendo uma quarta cor num rótulo que já tem três linhas.

     A troca custa um sinal: o verde identificava o CANAL (WhatsApp) sem
     precisar ler. O ouro identifica o SISTEMA. Quem carrega o canal agora é a
     palavra "WhatsApp", que está escrita ali e que o portão exige.

     --ouro-luz é o ouro para fundo escuro; o --ouro comum reprovaria aqui. */
  color: var(--ouro-luz);
  font-weight: var(--p-leve);
}
.equipe-pessoa:hover .equipe-cargo,
.equipe-pessoa:focus-visible .equipe-cargo {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* O anel de foco vai no rótulo, não no botão: o botão tem a altura inteira da
   faixa, e um anel desse tamanho sobre a foto não ajuda ninguém a entender o
   que está selecionado. */
.equipe-pessoa:focus-visible { outline: none; }
.equipe-pessoa:focus-visible .equipe-cargo { outline: var(--foco); outline-offset: var(--foco-recuo); }

@media (prefers-reduced-motion: reduce) {
  .equipe-pessoa, .equipe-cargo { transition: none; }
  .equipe-pessoa:hover, .equipe-pessoa:focus-visible { transform: none; }
  .equipe-cargo { transform: translate(-50%, 0); }
}

/* Sem hover — telefone e tablet — ninguém escurece ninguém, e o NOME fica
   visível o tempo todo: um efeito que só existe no mouse deixaria a maior parte
   dos visitantes sem saber quem é quem, e nome de quem atende não é enfeite.

   O que mudou: antes o rótulo INTEIRO ficava aceso nas três fotos ao mesmo
   tempo — nome, cargo e "Falar no WhatsApp", nos três, o tempo todo. Três
   blocos de texto competindo embaixo de três fotos pequenas: vira legenda de
   álbum, não interface. Agora em repouso fica só o nome; cargo e botão esperam
   o toque naquela pessoa.

   O rótulo aqui é `position: absolute` (é a composição sobreposta do desktop
   num tablet de toque), então crescer para cima na hora do toque não empurra
   nada da página. No telefone, onde ele está no fluxo, a regra de 1200px trata
   isso de outro jeito. */
@media (hover: none) {
  .equipe:hover .equipe-pessoa { filter: none; opacity: 1; }
  .equipe-cargo {
    opacity: 1;
    transform: translate(-50%, 0);
    padding: 4px 8px;
    background: rgba(17, 28, 53, 0.86);
  }
  .equipe-cargo strong { font-size: var(--t-micro); }

  /* display e não opacity: no toque não existe estado intermediário, e um
     elemento com opacity:0 continua ocupando o lugar e recebendo o dedo — o
     visitante abriria conversa tocando no vazio embaixo do nome. */
  .equipe-cargo small,
  .equipe-cargo em { display: none; }
  .equipe-pessoa.aberto .equipe-cargo small { display: block; }
  .equipe-pessoa.aberto .equipe-cargo em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 32px de alvo. O mínimo da WCAG 2.5.8 é 24px; aqui é dedo sobre foto de
       128px de largura, onde errar o alvo não erra "o botão" — abre a conversa
       da pessoa errada. */
    min-height: 32px;
    padding: 0 12px;
    /* Fio de ouro e fundo nenhum novo: a cor do texto não muda, então o
       contraste já medido continua valendo. O contorno é o que diz "isto é
       botão"; a discrição vem de ser 1px e de só existir depois do toque. */
    border: 1px solid var(--ouro-luz);
    border-radius: 999px;
    animation: equipe-botao 0.18s ease-out;
  }
}

/* O opacity:0 mora dentro do @keyframes, nunca na regra base — a folha anula
   animação em prefers-reduced-motion, e na regra base o botão ficaria invisível
   para sempre para quem pediu menos movimento. Aqui o repouso é visível e a
   animação só atrasa a chegada. */
@keyframes equipe-botao {
  from { opacity: 0; transform: translateY(4px); }
}
/* ---------- selos de credencial ----------
   Tipográficos de propósito. Um retângulo com texto cita um fato; uma imagem
   imitando o selo oficial da ISO ou um troféu desenhado fabrica credencial, e
   é o tipo de coisa que a revisão de anúncio de serviço financeiro procura.

   Fundo translúcido e não cor sólida: o bloco é escuro e os selos precisam se
   destacar sem virar botão — eles não são clicáveis, e nada aqui deve sugerir
   que sejam. */
.selos {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.selo {
  padding: 5px 11px;
  border: 1px solid var(--fio-sobre-escuro);
  border-radius: var(--raio-pilula);
  background: rgba(246, 244, 236, 0.06);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* O selo da conquista é o único que fala da Marques Investimentos e não da
   administradora, e por isso leva o ouro da marca. */
.selo-conquista {
  border-color: rgba(198, 160, 92, 0.45);
  background: rgba(198, 160, 92, 0.12);
  color: var(--ouro-luz);
  font-weight: var(--p-medio);
}

/* ---------- 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; }

/* Cada motivo se destaca dos outros ao passar o mouse. Estas três ressalvas são
   o lugar onde a página diz para NÃO comprar — destacar uma de cada vez faz o
   leitor parar e se reconhecer numa, que é exatamente o trabalho da seção.
   O recuo do texto já existe (76px); o realce entra como faixa, sem mover nada. */
.ressalvas li {
  border-radius: var(--raio);
  transition: background var(--transicao), box-shadow var(--transicao);
}
/* Esta é a seção onde a página diz para NÃO comprar, e o realce agora carrega
   vermelho porque a cor diz isso sem precisar de palavra.

   O fundo é quase branco de propósito, e a razão é medida. O fundo DESTA seção
   é bege (rgb(241,236,222)), não branco. Um rosado a 8% do --alerta dá 1,05:1
   contra esse bege — menos distinção que o branco puro, que dava 1,18:1. Ou
   seja: pintar o cartão de rosa comunicava "negativo" e destruía o realce, que
   é a função do hover. Com 3% o cartão fica em 1,12:1, guarda a temperatura
   quente e continua saltando do bege.

   Quem carrega o vermelho de verdade são o fio e o numeral, ambos em --alerta
   cheio. O fio entra como box-shadow inset e não como border-left porque
   border empurraria os 76px de recuo do texto e o número dançaria no hover.

   Nada disso é o único canal do sinal — WCAG 1.4.1. O que diz "não faça" é o
   texto do item; a cor só reforça. */
.ressalvas li:hover,
.ressalvas li:focus-within {
  background: #fdf8f7;
  box-shadow:
    inset 3px 0 0 var(--alerta),
    0 10px 22px -16px rgba(17, 28, 53, 0.5);
}
.ressalvas li:hover h3,
.ressalvas li:focus-within h3 { color: var(--tinta); }
.ressalvas li:hover::before,
.ressalvas li:focus-within::before { color: var(--alerta); }

@media (prefers-reduced-motion: reduce) {
  .ressalvas li { transition: 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;
  /* 540px e não 460px por causa da foto: ela é a equipe inteira, e com
     `contain` a altura da faixa é que define a largura de render. Em 460px
     cada pessoa ficava com 140px e o rosto com uns 35px — miniatura. Medido:
     a imagem não tem margem transparente para recortar (0-2%), então o
     espaço tinha mesmo que vir daqui. */
  /* Fluida, não fixa. Com `contain` é a ALTURA que decide a largura de render,
     então altura travada em 540px dava uma foto de 493px que, num monitor de
     1570px, deixava 382px de vazio à direita — a foto perto do texto, como o
     CEO pediu, mas pequena demais para ocupar a faixa. Crescendo com a tela,
     a foto acompanha: 540px é o piso (onde ela ainda cabe ao lado do texto) e
     680px o teto (acima disso a faixa vira uma parede). */
  min-height: clamp(540px, 42vw, 680px);
  padding: var(--e-6) 0;
  background: var(--tinta);
  overflow: hidden;
}

.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)); }

/* O cartão de modalidade era estático e um deles vivia escuro por decisão de
   layout — o visitante lia destaque comercial onde só havia contraste. Agora
   os cinco nascem iguais e o escuro é a RESPOSTA ao ponteiro ou ao teclado:
   quem passa o mouse acende o cartão, e o cartão leva ao simulador já na
   modalidade certa. */
.pilar {
  display: flex;
  flex-direction: column;
  padding: var(--e-3);
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf5 100%);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(17, 28, 53, 0.05),
    0 6px 16px rgba(17, 28, 53, 0.06);
  transition: background var(--transicao), border-color var(--transicao),
    box-shadow var(--transicao), transform var(--transicao), color var(--transicao);
}

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

/* Linha de números: vem do dataset pelo app.js, nunca digitada à mão. */
.pilar-dados {
  display: block;
  margin-top: 14px;
  font-size: var(--t-micro);
  font-weight: var(--p-medio);
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  transition: color var(--transicao);
}

.pilar-dados b { font-weight: var(--p-forte); }
.pilar-dados em { font-style: normal; color: var(--tinta-mudo); transition: color var(--transicao); }

/* O rótulo de seleção abre a linha de dados. Em versalete curto e ouro, para
   ler como carimbo de curadoria e não competir com o número de cartas, que é a
   informação que o visitante veio buscar. O ouro rebaixado (--ouro) é o que
   tem contraste sobre o osso do cartão; no hover o cartão vira tinta e o
   rótulo troca para --ouro-luz junto com o CTA. */
.pilar-selecao {
  font-size: 0.82em;
  font-weight: var(--p-forte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ouro);
  transition: color var(--transicao);
}
.pilar:hover .pilar-selecao,
.pilar:focus-visible .pilar-selecao { color: var(--ouro-luz); }

/* O CTA fica colado no rodapé do cartão para os cinco alinharem, mesmo com
   textos de alturas diferentes. */
.pilar-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  font-size: var(--t-corpo-2);
  font-weight: var(--p-forte);
  color: var(--tinta);
  transition: color var(--transicao);
}

.pilar-seta { transition: transform var(--transicao); }

.pilar:hover,
.pilar:focus-visible {
  background: linear-gradient(180deg, var(--tinta-2) 0%, var(--tinta) 100%);
  border-color: var(--tinta);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(246, 244, 236, 0.16),
    0 3px 6px rgba(17, 28, 53, 0.18),
    0 20px 40px rgba(17, 28, 53, 0.26);
}

.pilar:hover h3,
.pilar:focus-visible h3,
.pilar:hover .pilar-dados,
.pilar:focus-visible .pilar-dados { color: var(--osso-sobre-escuro); }

.pilar:hover p,
.pilar:focus-visible p,
.pilar:hover .pilar-dados em,
.pilar:focus-visible .pilar-dados em { color: var(--mudo-sobre-escuro); }

.pilar:hover .pilar-cta,
.pilar:focus-visible .pilar-cta { color: var(--ouro-luz); }

.pilar:hover .pilar-seta,
.pilar:focus-visible .pilar-seta { transform: translateX(4px); }

.pilar:active { transform: translateY(0); }

/* O foco do sistema é tinta sobre osso. Como o cartão focado FICA tinta, o
   contorno padrão sumiria dentro do próprio fundo — quem navega por teclado
   perderia a posição justo no elemento que acabou de acender. */
.pilar:focus-visible {
  outline: 2px solid var(--osso-sobre-escuro);
  outline-offset: var(--foco-recuo);
}

/* Sem ponteiro não existe hover: no toque o cartão acende ao ser tocado. */
@media (hover: none) {
  .pilar:active {
    background: linear-gradient(180deg, var(--tinta-2) 0%, var(--tinta) 100%);
    border-color: var(--tinta);
  }
  .pilar:active h3, .pilar:active .pilar-dados { color: var(--osso-sobre-escuro); }
  .pilar:active p, .pilar:active .pilar-dados em { color: var(--mudo-sobre-escuro); }
  .pilar:active .pilar-cta,
  .pilar:active .pilar-selecao { color: var(--ouro-luz); }
}

/* ---------- 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; }
/* O rótulo que faltava nos dois números de 40px: o simulador diz "Primeira
   parcela" acima do dele, e aqui o visitante tinha de deduzir o que o valor era. */
.taxa-rotulo {
  display: block;
  font-size: var(--t-etiqueta);
  font-weight: var(--p-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-mudo);
  margin-bottom: 4px;
}

/* A conclusão atravessa a grade inteira e vem depois dos dois cartões. Dentro
   do cartão barato ela quebrava no celular: a grade vira coluna única e o
   cartão barato é o primeiro, então "a menos" aparecia antes do valor com que
   se compara. */
.taxa-fecho {
  grid-column: 1 / -1;
  margin-top: var(--e-2);
}
.taxa-diferenca { font-size: var(--t-corpo-2); color: var(--ouro); font-style: italic; margin: 0; }
.taxa-decomposicao {
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--tinta-mudo);
  margin-top: 8px;
  max-width: 62ch;
}

/* ---------- a conta dos dois créditos ---------- */

/* Espelha a grade das duas colunas logo acima: os quatro cartões da seção têm
   de ler como um conjunto. Com auto-fit a grade criava QUATRO faixas numa tela
   larga e os dois cartões ficavam espremidos no canto esquerdo. */
.conta-credito {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
  margin-top: var(--e-3);
}
.credito-lado {
  padding: var(--e-3);
  background: var(--papel);
  border: 1px solid var(--fio);
  border-radius: var(--raio-cartao);
}
.credito-rotulo {
  display: block;
  font-size: var(--t-etiqueta);
  font-weight: var(--p-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-mudo);
}
.credito-valor {
  display: block;
  margin-top: 6px;
  font-family: var(--titulo);
  font-size: 34px;
  font-weight: var(--p-medio);
  letter-spacing: -0.03em;
  color: var(--tinta);
}
.credito-detalhe {
  display: block;
  margin-top: 8px;
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--tinta-mudo);
}
.credito-soma {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--fio);
  font-size: var(--t-corpo-2);
  color: var(--tinta);
}
.credito-soma em { font-style: normal; color: var(--tinta-mudo); }
.credito-soma b { font-weight: var(--p-forte); font-variant-numeric: tabular-nums; }

/* O cartão do consórcio repete o realce das duas colunas acima: tinta sobre
   osso vira osso sobre tinta, para os quatro cartões da seção lerem como um
   conjunto só e não como dois pares que não se conhecem. */
.credito-realce {
  background: var(--tinta);
  border-color: var(--tinta);
}
.credito-realce .credito-rotulo { color: var(--mudo-sobre-escuro); }
.credito-realce .credito-valor { color: var(--osso-sobre-escuro); }
.credito-realce .credito-detalhe { color: var(--mudo-sobre-escuro); }
.credito-realce .credito-soma { border-top-color: rgba(255, 255, 255, 0.18); color: var(--osso-sobre-escuro); }
.credito-realce .credito-soma em { color: var(--mudo-sobre-escuro); }

/* O número MAIOR de cada par, em vermelho. Mesma família do .negacao — o
   vermelho desta página marca o que ela recusa — mas quem recebe não é um
   LADO, é um número: a classe cai onde a comparação cai, e o portão roda a
   conta na base inteira para conferir que caiu no maior.

   Mora AQUI, depois de .credito-valor e de .credito-realce .credito-valor, e
   não lá em cima com o .negacao. As três regras têm a mesma especificidade, e
   lá em cima esta perdia para a cor do próprio número por ordem de arquivo: a
   classe entrava no HTML e a parcela continuava preta. O vermelho existia no
   código, no CSS e no portão, e não existia na tela.

   A consequência é assumida: nas oito cartas em que a parcela do financiamento
   sai menor que a do consórcio (moto de R$ 18 mil a R$ 35 mil, automóvel de
   R$ 30 mil), o vermelho da PARCELA cai no cartão escuro, do nosso lado. A
   soma continua vermelha do lado do banco nessas mesmas telas, que é a
   comparação que a seção faz.

   Por isso são dois tons, e a razão é medida: --alerta dá 6,05:1 sobre o papel
   branco do cartão do financiamento e só 2,80:1 sobre a tinta do cartão em
   realce, onde reprovaria até como texto grande. --alerta-luz dá 6,60:1 ali,
   na mesma prateleira do --ouro-luz.

   A cor não carrega informação sozinha: os dois números estão impressos lado a
   lado, e quem não distingue matiz lê qual é o maior do mesmo jeito.

   Sem itálico, ao contrário do .negacao: aqui é valor monetário, e itálico em
   número dificulta a leitura de dígito. */
.credito-caro { color: var(--alerta); }
.credito-realce .credito-caro { color: var(--alerta-luz); }

/* A faixa que fecha a seção. Era uma legenda de 16px em itálico, embaixo de
   tudo, mais fraca que a soma do banco impressa acima dela — o número que vende
   estava vestido de rodapé.

   A ênfase é de tamanho e de superfície, não de matiz — e aqui isso continua
   valendo mesmo depois de o vermelho entrar na seção. O vermelho marca o maior
   de um PAR, e esta faixa não é um par: é a subtração dos dois, e não tem
   contra quem ser maior. Pintá-la de --alerta seria a cor dizendo uma segunda
   coisa. O fundo tinta faz o recorte e o ouro-luz carrega o número, que é o
   emprego declarado desse token, 6,2:1 sobre tinta. */
.credito-diferenca {
  grid-column: 1 / -1;
  margin: var(--e-1) 0 0;
  padding: var(--e-3);
  background: var(--tinta);
  border-radius: var(--raio);
}
.credito-diferenca-rotulo {
  display: block;
  font-size: var(--t-etiqueta);
  font-weight: var(--p-medio);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mudo-sobre-escuro);
}
.credito-diferenca strong {
  display: block;
  margin-top: 6px;
  font-family: var(--titulo);
  font-size: clamp(28px, 3vw, 34px);
  font-weight: var(--p-forte);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ouro-luz);
}
/* A nota e a fonte atravessam a grade: são sobre a conta inteira, não sobre um
   dos lados, e ficar dentro de um cartão daria a entender o contrário. */
.credito-nota,
.credito-fonte {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--tinta-mudo);
  max-width: 68ch;
}
.credito-nota { margin-top: 4px; }
.credito-fonte { margin-top: 10px; opacity: 0.85; }

/* ---------- 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 {
  display: flex;
  flex-direction: column;
  padding: var(--e-3);
  background: var(--papel);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  /* O mesmo relevo dos cartões de modalidade: o cartão sobe ao mouse e afunda
     ao clique. É resposta visual, não gatilho — quem abre a caixa é o botão. */
  transition:
    transform var(--transicao),
    box-shadow var(--transicao),
    border-color var(--transicao);
}
.passos li:hover,
.passos li:focus-within {
  transform: translateY(-2px);
  border-color: var(--tinta-mudo);
  box-shadow: 0 10px 22px -14px rgba(17, 28, 53, 0.45);
}
.passos li:active { transform: translateY(0); }

/* Era no-op: o li já tem borda completa na regra acima. Alguém tentou desenhar
   a ligação entre os passos por aqui e parou no meio.
   .passos li + li { border-left: 1px solid var(--fio); } */

/* ---------- a caixa de cada passo ---------- */

.passo-abrir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding: 12px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--fio);
  font-family: inherit;
  font-size: var(--t-micro);
  font-weight: var(--p-medio);
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
  /* 24px de alvo mínimo, WCAG 2.5.8 — o padding-top mais a linha entregam isso. */
  min-height: 24px;
}
.passo-abrir:hover { color: var(--ouro); }
.passo-abrir:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }

.passo-seta {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transicao);
}
.passo-abrir[aria-expanded="true"] .passo-seta {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.passo-detalhe { margin-top: 12px; }
.passo-detalhe p {
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--tinta-mudo);
}
.passo-detalhe p + p { margin-top: 10px; }
.passo-detalhe strong { color: var(--tinta); font-weight: var(--p-forte); }

/* A entrada fica dentro do @keyframes, nunca na regra base: a folha zera
   animação em prefers-reduced-motion com `animation: none`, e opacity: 0 escrito
   aqui fora sobreviveria ao zeramento — a caixa abriria invisível. */
@keyframes passoEntra {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.passo-detalhe:not([hidden]) { animation: passoEntra 220ms ease-out both; }

.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;
}

/* Foi pedido que a ficha "fosse aparecendo" ao passar o mouse, como uma roda.
   Não escondi dado nenhum para isso: esta é a ficha de credibilidade — quem é a
   administradora, qual grupo, qual taxa, qual fundo, em que dia a condição foi
   consultada. Numa página cuja tese é "nada aqui é estimativa", pôr o dado
   atrás de uma interação é o contrário do que a seção existe para fazer, e
   quem lê no celular não tem mouse para revelar coisa nenhuma.

   O que dá para fazer sem perder isso: cada campo acende quando o mouse passa,
   um de cada vez, com o mesmo gesto do resto da página. O olho percorre a ficha
   em vez de bater nela de uma vez — que é o efeito que o pedido queria. */
.ficha-item {
  padding: 20px 22px;
  background: var(--papel);
  transition: background var(--transicao), box-shadow var(--transicao);
}
.ficha-item:hover,
.ficha-item:focus-within {
  background: var(--tinta);
  box-shadow: 0 0 0 1px var(--tinta);
  position: relative;
  z-index: 1;
}
.ficha-item:hover dt,
.ficha-item:focus-within dt { color: var(--mudo-sobre-escuro); }
.ficha-item:hover dd,
.ficha-item:focus-within dd { color: var(--osso-sobre-escuro); }
.ficha-item + .ficha-item { border-left: none; }

@media (prefers-reduced-motion: reduce) {
  .ficha-item { transition: 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;
}

/* ---------- casos ----------

   A grade se ajusta ao número de casos em vez de exigir quatro. Com um caso ele
   ocupa a largura de leitura e não fica um cartão órfão ao lado de três vazios;
   com dois ou mais a régua volta a ser de colunas. `auto-fit` com `minmax` faz
   isso sem media query e sem o CSS precisar saber quantos são. */
/* A grade nasceu para UM caso: teto de 400px por cartão e max-width de coluna
   de texto, para o cartão único não virar uma faixa de 780px com duas linhas
   dentro. Com quatro clientes isso virou o defeito oposto — os cartões
   empilhavam numa coluna estreita e a seção ocupava um quarto da tela.
   Agora ela usa a largura inteira, como as demais grades da página. */
.casos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-2);
  margin-top: var(--e-5);
}

.caso {
  background: var(--osso-2);
  transition:
    transform var(--transicao),
    box-shadow var(--transicao),
    border-color var(--transicao);
}
.caso:hover,
.caso:focus-within {
  transform: translateY(-2px);
  border-color: var(--tinta-mudo);
  box-shadow: 0 10px 22px -14px rgba(17, 28, 53, 0.45);
}
.caso:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .caso { transition: none; }
  .caso:hover { transform: none; }
}

/* Sem aspas e sem itálico: isto é um fato sobre uma compra, não uma citação.
   O itálico do bloco antigo sinalizava "alguém disse" — e era justamente o que
   não se podia garantir. */
.caso-o-que {
  font-size: var(--t-corpo);
  line-height: 1.5;
  color: var(--tinta);
}

.caso-quem { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--fio); }

.caso-nome {
  display: block;
  font-size: var(--t-corpo-2);
  font-weight: var(--p-medio);
  color: var(--tinta);
}

/* Era .caso-onde, com a cidade. Virou perfil e finalidade quando os titulares
   autorizaram nome sem cidade — mesma função tipográfica, outro conteúdo. */
.caso-perfil {
  display: block;
  margin-top: 2px;
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--tinta-mudo);
}

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

/* ---------- 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é ---------- */

/* A folga extra embaixo é do botão flutuante de WhatsApp: sem ela, o botão
   pousa exatamente sobre a linha do CNPJ, que é justamente a que a lei exige
   em lugar visível. */
.rodape {
  background: var(--tinta-2);
  color: var(--osso-sobre-escuro);
  padding: var(--e-6) 0 calc(var(--e-5) + 72px);
}

.rodape-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
/* Luz branca atrás do leão, e volume.

   Feita com drop-shadow de deslocamento zero, não com um halo em `background`:
   o background de uma <img> é pintado dentro da caixa de 38px, então o halo
   sairia cortado em quadrado nas bordas. drop-shadow segue o canal alpha do
   PNG e transborda a caixa — o brilho tem a forma da juba, que é o que faz
   parecer luz por trás e não um adesivo redondo.

   Três camadas, nesta ordem: a luz difusa, o fio de luz no alto da cabeça, e
   a sombra de projeção que descola o leão do fundo. Sem a terceira o brilho
   sozinho achata a figura em vez de levantá-la. */
.rodape-simbolo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  margin-bottom: 12px;
  filter:
    drop-shadow(0 0 9px rgba(246, 244, 236, 0.34))
    drop-shadow(0 -1px 0 rgba(246, 244, 236, 0.40))
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55));
}

.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); }
  /* O rodapé cai para duas colunas AQUI, e não nos 900px de antes, por causa
     de um número: "WhatsApp (66) 99672-9098" mede 214px. Em quatro colunas
     abaixo de ~1030px a coluna fica com 178px e o telefone quebra entre o
     "99672-" e o "9098" — um telefone partido ao meio, que o visitante lê
     errado ou nem tenta. Duas colunas resolvem com folga de sobra. */
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
}
@media (max-width: 1160px) {
  .ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  }

/* A faixa empilha em 1200px, e não nos 900px de antes, por causa da foto da
   equipe. Ela renderiza a 493px de largura — 73px a mais que a foto de uma
   pessoa só. Medido em 1100px: a silhueta já encostava na borda direita da
   coluna E ainda invadia o texto em 18px. Não era questão de deslocar mais;
   não havia para onde. Abaixo de ~1200px o lado a lado simplesmente não
   comporta três pessoas mais a frase.

   Empilhado, a foto recebe 420px de altura e não os 280px que bastavam para
   uma pessoa: com `contain`, é a altura que define a largura de render, e em
   280px o grupo saía com 255px — 85px por pessoa, rosto de miniatura. */
@media (max-width: 1200px) {
  /* flex em coluna, e não block. Duas razões:

     1. É o que faz `order` valer — sem pai flex (ou grid), `order` é declaração
        morta e as fotos voltam para o alto da faixa sem ninguém perceber.
     2. Block estava aqui por causa do <picture>, que é INLINE por padrão e não
        aceita `height`: o container computava a altura pedida e media 24px. Esse
        elemento não existe mais — a faixa é um <div> desde que virou três
        camadas — mas o motivo ficou escrito na folha depois de deixar de valer,
        que é como uma regra sobrevive à razão dela. Flex resolve os dois casos:
        filho de flex é block-level de qualquer jeito. */
  .faixa-citacao {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* O topo era ZERO — medido em 393px: a primeira linha da frase começava a
       0px da borda da faixa azul, encostada no corte. No desktop isso não
       aparece porque lá a faixa tem altura mínima e o conteúdo é centrado
       verticalmente; empilhado, o `align-items: center` deixa de sobrar espaço
       e o padding de cima, que nunca existiu, passa a ser a única folga.

       Embaixo é ZERO de propósito. Com 32px sobrava uma tira de azul debaixo
       dos pés e as três ficavam boiando: a perna terminava no ar, não na
       borda. Zerado, o corte da foto cai exatamente na linha onde o azul
       acaba — que é o que faz parecerem plantadas, e é o efeito que o
       computador já tinha de graça. */
    padding: var(--e-5) 0 0;
  }
  /* O bloco da equipe volta ao fluxo. Sem isto ele continuava `position:
     absolute` com `left: calc(... + 620px)` — conta feita para a coluna de
     texto do desktop — e em 390px de largura ficava inteiro fora da tela.
     O telefone mostrava a faixa sem ninguém nela.

     O defeito nasceu na troca da foto única pelas três camadas: as regras de
     telefone continuaram apontando para .citacao-foto e .citacao-recorte, que
     deixaram de existir no HTML naquele momento. Regra órfã não dá erro em
     CSS — ela simplesmente não casa com nada, e o elemento novo fica sem
     tratamento. Por isso as órfãs foram removidas junto: código morto aqui é
     o que faz o próximo leitor acreditar que o caso está coberto. */
  /* O telefone usa A MESMA COMPOSIÇÃO do computador: as três sobrepostas.

     A primeira tentativa foi três colunas separadas, e o motivo era um só —
     três rótulos acesos ao mesmo tempo se atropelam. Só que colunas custam
     caro em tela estreita: em 393px cada pessoa ficava com 130px, e nessa
     largura a figura sai com 162px de altura e a cabeça com uns 20px. Pior:
     como a caixa tinha 230px, sobravam 68px de ar morto acima de cada uma, e
     elas pareciam flutuar em vez de estar plantadas na faixa.

     Sobreposto, cada uma passa a ocupar 44%, 52% e 46% da largura — 173, 204
     e 181px — e a figura vai a 216, 255 e 226px de altura. Entre 33% e 57%
     maior, com o corte da perna caindo na borda de baixo do azul, que é o que
     dá o aspecto que o CEO aprovou no computador.

     O que destravou isso foi o toque: o rótulo deixou de precisar estar aceso
     o tempo todo, então o motivo que obrigava as colunas deixou de existir. */
  /* A ORDEM. No HTML o bloco da equipe vem ANTES da citação, porque no desktop
     ele é `absolute` e a posição no fluxo não importa. No telefone, que lê o
     fluxo, isso punha as três fotos no alto da faixa azul e a frase embaixo —
     o visitante batia nas fotos antes de saber por que elas estão ali.

     `order` inverte só na tela estreita. Mexer no HTML resolveria aqui e
     quebraria lá em cima: a ordem do DOM é o que empilha o Valdir na frente
     das outras duas camadas. */
  .equipe { order: 2; }
  .citacao-grade { order: 1; }

  .equipe {
    position: relative;
    inset: auto;
    width: 100%;
    /* 300px é o que a camada do meio pede depois do alargamento: ela recebe
       61% de 393px = 240px de largura, e com `contain` a proporção 0,8 da foto
       devolve 300px de altura. Acima disso vira ar morto no topo; abaixo, a
       figura encolhe — que é exatamente o defeito de onde viemos.

       O `background` NÃO é anulado aqui, e isso é intencional: a luz atrás do
       grupo é a mesma do computador e volta a ter função agora que as três se
       sobrepõem. Na versão em colunas ela tinha sido desligada. */
    height: 300px;
    margin: var(--e-3) 0 0;
  }

  /* ALARGAR as camadas, e só isso. Com `contain` quem manda no tamanho da
     figura é a LARGURA da camada — aumentar a altura da faixa só acrescenta ar
     em cima. As três crescem pelo mesmo fator (×1,18) para a composição não se
     desequilibrar, e o `left` do meio acompanha: 61% de largura centrado pede
     19,5%, não os 22% que valiam para 52%.

     `position` não aparece aqui de propósito. Foi ao redeclarar `position` que
     o `left: 22%` do computador caiu sobre um `relative` e empilhou duas
     pessoas; largura e deslocamento são seguros porque as camadas continuam
     absolutas, que é o mecanismo do computador. O portão trava isso. */
  .equipe .equipe-pessoa[data-pos="esq"]    { width: 52%; }
  .equipe .equipe-pessoa[data-pos="centro"] { left: 19.5%; width: 61%; }
  .equipe .equipe-pessoa[data-pos="dir"]    { width: 54%; }

  /* Tudo o mais — posições, sobreposição, empilhamento, rótulo — vem das
     regras do computador, sem override. Não há aqui nenhuma regra de
     `position`, `left` ou `flex` para as camadas, e essa AUSÊNCIA é a decisão:
     a versão anterior reescrevia as três posições para virar colunas, e foi
     ao reescrevê-las que o `left: 22%` do computador voltou a valer e o Valdir
     saiu 82px por cima do Jorge. Menos regra aqui é menos lugar para divergir.

     Só o rótulo precisa de uma diferença, e é de ESTADO, não de posição: sem
     mouse a folha acende os três, e três rótulos sobre um grupo sobreposto se
     atropelam — foi esse atropelo que empurrou a primeira versão para as
     colunas. Aqui em repouso não há rótulo nenhum e aparece só o de quem for
     tocado. A identificação dos três continua inteira no rodapé, com nome,
     praça e WhatsApp de cada um. */
  .equipe-cargo { opacity: 0; }
  .equipe-pessoa.aberto .equipe-cargo {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  /* Quem foi tocado vem para a frente, como no hover do computador. Declarado
     em `.aberto` e não confiado ao `:hover` grudado do Android: o mesmo estado
     visual tem que sair do mesmo gatilho nos dois lugares. */
  .equipe-pessoa.aberto {
    z-index: 3;
    transform: translateY(-6px) scale(1.02);
    filter: none;
    opacity: 1;
  }
  .citacao-grade { grid-template-columns: minmax(0, 1fr); }
  .citacao { max-width: none; }
}
@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, .conta-credito {
    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; }


  .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; }

  .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); }

  /* No celular o painel inteiro precisa caber sem afastar demais o único
     caminho para o WhatsApp. Aperta o respiro, não o tamanho da letra. */
  .calc-painel { padding: 12px 14px; }
  .calc-linha { padding: 1px 0; gap: 6px; }
  .calc-leg { line-height: 1.3; }
  .calc-fita + .calc-fita { margin-top: 14px; padding-top: 12px; }

  .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; }
}