/* ============================================================================
   O QUE A PÁGINA DE INVESTIMENTO GANHOU NA REVISÃO DE 02/09/2026.

   Fica em arquivo, e não num <style> no meio do HTML, porque a página já tem
   seis blocos de estilo embutidos e achar qual deles manda em quê custa mais
   caro do que uma requisição. As cores são as mesmas da casa, pelas variáveis
   que o site já define.
   ========================================================================= */

/* ---------- 1 · a tese: o número na cara, num cartão CLARO ----------
   A primeira versão era um quadro escuro. Ele abriu no computador e disse
   "está escuro, está difícil de leitura". Agora é o fundo do cartão, a borda
   vermelha à esquerda e o número em vermelho — o mesmo vocabulário dos
   cartões de venda logo abaixo, em vez de um bloco de outra família. */
.tese {
  margin: 12px 0 16px;
  padding: 16px 20px;
  border: 1px solid var(--line, #e6e0da);
  border-left: 5px solid var(--red, #6E1423);
  border-radius: 12px;
  background: var(--card, #fff);
}
/* `.tese .tese__k` e não `.tese__k`: as três linhas são <p>, e a página tem
   `.sec p { font-size: 15px }` (0,1,1), que vence uma classe sozinha (0,1,0).
   Foi o que aconteceu na primeira foto — o selo saiu grande e o número saiu
   do tamanho do texto corrido. Dois nomes (0,2,0) resolvem sem !important. */
.tese .tese__k {
  margin: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gray, #6D6763);
}
.tese .tese__v {
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.3px;
  color: var(--ink, #2B2523);
  font-variant-numeric: tabular-nums;
}
.tese .tese__v b { color: var(--red, #6E1423); }
.tese__seta { color: var(--mut, #8D857F); font-weight: 400; padding: 0 2px; }
.tese .tese__l {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gray, #6D6763);
  max-width: 72ch;
}

/* ---------- os benefícios, que subiram para o bloco 1 ---------- */
.ben {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  /* 220 e não 250: com 250 cabiam três por linha em 1004px e o quarto —
     Acompanhamento, o que ele escolheu — ficava órfão numa linha só */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ben li {
  background: var(--card, #fff);
  border: 1px solid var(--line, #e6e0da);
  border-radius: 10px;
  padding: 12px 15px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink, #2B2523);
}
.ben li b { color: var(--red, #6E1423); }

/* ---------- 2 · a comparação com a renda fixa, dentro do cartão de venda ----
   Ela mora ABAIXO do lucro e acima da tarja, porque a ordem de leitura é a
   ordem do argumento: o que ele ganhou, com o que o mesmo dinheiro teria
   rendido, e o que esse ganho passa a render daqui pra frente. */
.vc-cmp {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--line, #e6e0da);
}
.vc-cmp p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--gray, #6D6763);
}
.vc-cmp p:last-child { margin-bottom: 0; }
.vc-cmp span { flex: 1 1 auto; }
.vc-cmp b {
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink, #2B2523);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vc-cmp p:last-child b { color: var(--red, #6E1423); }

/* as quatro peças de rentabilidade rodam no MESMO carrossel dos cartões de
   venda — "onde o cliente vai passando pelos casos" (ele, 02/09/2026). O
   carrossel limita a 660px; a peça ocupa a largura toda do slide. */
.pv-carousel.ras { margin-top: 12px; }
.pv-carousel.ras .ra { margin: 0; }
/* AS PEÇAS NÃO ESTICAM. Esticar deixava a peça curta com ~300px de cartão
   branco vazio embaixo (achado das lentes); a altura do carrossel é a da peça
   mais alta, e o que iguala as quatro é a tabela da correção com altura fixa
   (site-artes.css, .ra__rol--cor), não o cartão esticado. */
.pv-carousel.ras .pv-track { align-items: flex-start; }

/* A SEÇÃO DE CONTINUAÇÃO. "Seu dinheiro trabalhando dobrado" é a segunda
   metade do bloco 2 — vender × deixar rendendo. Sem selo e com título menor,
   a sequência 1, 2, 3 volta a fechar em vez de ler 1, 2, –, 3. */
.sec--cont { margin-top: 22px; }
.sec .sec__sub {
  font-weight: 800;
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 6px;
  padding-left: 11px;
  border-left: 4px solid var(--red, #6E1423);
  color: var(--ink, #2B2523);
}

/* AS SETAS DO CARROSSEL eram brancas com sombra — desenhadas para foto — e
   sumiam sobre os cartões brancos, além de cobrir a lateral inteira do slide
   e roubar o toque do extrato. Ficam vermelhas, pequenas e no meio. */
.wrap .pv-arrow {
  top: 50%;
  height: 44px;
  width: 34px;
  transform: translateY(-50%);
  color: var(--red, #6E1423);
  text-shadow: none;
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--line, #e6e0da);
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
}
.wrap .pv-arrow:hover { background: #fff; }
.wrap .pv-arrow:focus-visible { outline: 2px solid var(--red, #6E1423); outline-offset: 2px; }

/* os links internos param debaixo do menu fixo sem isto */
.sec, .cta, .lead-crm, #simulador { scroll-margin-top: 72px; }

/* NA IMPRESSÃO o carrossel vira lista: no papel não há seta, e só o caso da
   vez saía. Todos os casos, um embaixo do outro. */
@media print {
  .wrap .pv-viewport { overflow: visible; }
  .wrap .pv-track { display: block; transform: none !important; }
  .wrap .pv-slide { margin-bottom: 16px; break-inside: avoid; }
  .wrap .pv-arrow, .wrap .pv-dots { display: none; }
}

/* ---------- 4 · a faixa de começo → fim, no lugar do quadro escuro ---------- */
.faixa4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 12px 0 0;
}
.faixa4 > div {
  border: 1px solid var(--line, #e6e0da);
  border-radius: 10px;
  padding: 11px 13px;
  background: var(--card, #fff);
}
.faixa4 dt {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--gray, #6D6763);
}
.faixa4 dd {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink, #2B2523);
  font-variant-numeric: tabular-nums;
}
.faixa4 .faixa4--ganho { border-color: #BFDFCD; background: #EAF6EF; }
.faixa4 .faixa4--ganho dd { color: #1D7A4B; }
html[data-theme="dark"] .faixa4 .faixa4--ganho { background: #123528; border-color: #2fbf71; }
html[data-theme="dark"] .faixa4 .faixa4--ganho dd { color: #5fd79b; }

/* ---------- 7 · os cartões do quadro grande ----------
   ESTAS REGRAS MORAVAM NO <style> DA SIMULAÇÃO RÁPIDA. Quando ela saiu ("sai
   a simulação rápida", 02/09/2026), o CSS foi junto — e o quadro grande, que
   pegava as classes emprestadas, ficou sem borda, sem fundo e sem grade: as
   quatro caixas viraram texto empilhado. Foi o que ele viu ("tirou os quadros,
   não está claro as divisões"). Voltam aqui, iguais às que eram, com a mesma
   especificidade — o site-simuladores.js ajusta a grade no celular por cima
   delas, e uma regra mais forte aqui quebraria esse ajuste. */
.sx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.sx-card { border: 1px solid var(--line, #e6e0da); border-radius: 10px; padding: 14px; background: var(--paper, #F6F3EF); }
.sx-num { font-size: 19px; font-weight: 800; color: var(--red, #6E1423); margin: 4px 0 2px; }
.sx-card.melhor { border-color: #2FA968; background: #EAF6EF; }
.sx-card.melhor .sx-num { color: #1D7A4B; }
/* o negrito DENTRO da nota fica na linha: a regra `.sx-card b{display:block}`
   é do título do cartão e quebrava "Imóvel de / R$ 80.000 / . Cobre" em
   três linhas — já quebrava na versão publicada, e ninguém tinha visto */
.sx-card small b { display: inline; }
/* mais duas do mesmo bloco perdido: o título e a nota de cada cartão */
.sx-card b{display:block;font-size:13px;color:var(--ink,#2B2523)}
.sx-card small{color:var(--gray,#6D6763);font-size:12px;line-height:1.45;display:block}
.sx-card .sx-num{font-size:19px;font-weight:800;color:var(--red);margin:4px 0 2px}
html[data-theme="dark"] .sx-card { border-color: #3a3634; background: #2a2725; }
html[data-theme="dark"] .sx-card.melhor { background: #123528; border-color: #2fbf71; }
html[data-theme="dark"] .sx-card.melhor .sx-num { color: #5fd79b; }

/* ---------- 9 · as três etapas do acompanhamento ---------- */
.etapas {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 14px;
}
.etapa {
  border: 1px solid var(--line, #e6e0da);
  border-radius: 12px;
  padding: 16px 17px;
  background: var(--card, #fff);
}
.etapa__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red, #6E1423);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
}
.etapa h3 {
  margin: 9px 0 5px;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--ink, #2B2523);
}
.etapa p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gray, #6D6763);
}

/* ---------- o par de CTAs, igual em todos os pontos ---------- */
.par {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 4px;
}
.par a {
  flex: 1 1 240px;
  display: block;
  padding: 14px 16px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
}
.par__zap { background: var(--green, #2FA968); color: #fff; }
.par__form {
  background: transparent;
  color: var(--red, #6E1423);
  border: 2px solid var(--red, #6E1423);
}
.par__zap:hover { background: #268a55; }
.par__form:hover { background: var(--red-s, #F2E8E4); }

/* DENTRO DO CTA VERMELHO o botão vermelho-sobre-vermelho sumia — era a
   "visualização que não está legal" depois do "quanto o seu dinheiro pode
   render". Ali ele é branco. */
/* NO CTA VERMELHO os dois botões deixam de esticar de borda a borda (480px
   cada, verde vibrando sobre o bordô — achado da análise) e ganham o mesmo
   desenho dos dois botões do cabeçalho, que ele não reprovou: pílula branca e
   contorno branco, na largura do conteúdo, centralizados. A ORDEM continua a
   dele — WhatsApp primeiro, formulário depois. */
.cta .par { justify-content: center; }
.cta .par a { flex: 0 1 auto; min-width: 250px; padding: 13px 24px; }
.cta .par__zap { background: #fff; color: var(--red, #6E1423); }
.cta .par__zap:hover { background: var(--red-s, #F2E8E4); }
.cta .par__form { color: #fff; border-color: rgba(255, 255, 255, .7); }
.cta .par__form:hover { background: rgba(255, 255, 255, .14); }

@media (max-width: 560px) {
  .tese { padding: 14px 15px; }
  .tese .tese__v { font-size: 19px; }
  /* no celular a linha única espremeria o rótulo em quatro palavras por linha
     e ainda assim quebraria o número; melhor empilhar */
  .vc-cmp p { display: block; }
  .vc-cmp b { display: block; margin-top: 2px; }
  .faixa4 { grid-template-columns: 1fr 1fr; }
}

/* no papel, o cartão não se parte no meio e o botão não existe */
@media print {
  .vc-cmp, .faixa4, .sx-card { break-inside: avoid; }
  .par { display: none; }
}

/* ---------- OS BOTÕES DO CABEÇALHO ----------
   Moravam no MESMO <style> da simulação rápida — a página tinha seis blocos de
   estilo embutidos e este guardava coisa de três seções diferentes. Quando a
   simulação rápida saiu, os dois botões do topo viraram links azuis sublinhados.
   Voltam iguais aos que estavam no ar. */
.hero-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.hero-cta a{text-decoration:none;font-weight:800;font-size:15px;padding:13px 22px;border-radius:10px;white-space:nowrap}
.hero-cta .b1{background:#fff;color:var(--red)}
.hero-cta .b1:hover{background:#f2e8e4}
.hero-cta .b2{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.hero-cta .b2:hover{background:rgba(255,255,255,.12)}

/* ---------- 1 · o caso, em três números (02/09, fim da tarde) ----------
   "O cliente pagou uma parcela de 1.600 e recebeu uma proposta de 206 mil —
   esse é o melhor case." Três números lado a lado, o lucro em destaque, e
   nada de parágrafo dentro do cartão. */
.tese--caso .tese__n { display: grid; grid-template-columns: 1fr auto 1fr 1.25fr; gap: 12px 16px; align-items: center; margin-top: 8px; }
.tese__c span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--gray, #6D6763); }
.tese__c b { display: block; font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--ink, #2B2523); font-variant-numeric: tabular-nums; margin-top: 2px; }
.tese__c small { display: block; font-size: 11.5px; color: var(--mut, #8D857F); margin-top: 2px; }
.tese__c--lucro { padding: 10px 14px; border-radius: 10px; background: var(--red-s, #F2E8E4); }
.tese__c--lucro span { color: var(--red, #6E1423); }
.tese__c--lucro b { color: var(--red-d, #58101C); font-size: 26px; }
.tese--caso .tese__seta { font-size: 22px; color: var(--mut, #8D857F); }
/* os benefícios em quatro palavras: "muito texto nos quadros" */
.ben--curto li { padding: 10px 13px; }
.ben--curto li b { display: block; font-size: 13px; letter-spacing: .2px; }
.ben--curto li span { display: block; font-size: 13px; color: var(--gray, #6D6763); margin-top: 1px; }
/* o texto do antigo bloco 6, agora embaixo dos formatos */
.estrategia { margin-top: 14px; }
@media (max-width: 560px) {
  .tese--caso .tese__n { grid-template-columns: 1fr; gap: 8px; }
  .tese--caso .tese__seta { display: none; }
  .tese__c b { font-size: 20px; }
  .tese__c--lucro b { font-size: 24px; }
}

/* ---------- 6 · o quadro grande no celular ----------
   "No celular acho complicado ficar tão extenso." Com as notas fora, o que
   sobra em cada caixa é nome, número, a linha do percentual e o selo — e eles
   sobem do piso de 9 px do site-simuladores.js para tamanho de gente. */
@media (max-width: 560px) {
  .ops-grupo .sx-card b { font-size: 13.5px !important; }
  .ops-grupo .sx-card .sx-num { font-size: 19px !important; }
  .ops-grupo .ops-rot { font-size: 10.5px !important; }
  .ops-grupo .ops-2 { font-size: 12px !important; margin-bottom: 6px !important; }
  .ops-grupo .sx-card small { font-size: 11.5px !important; }
  .ops-grupo .ops-selo { font-size: 10px !important; padding: 4px 8px !important; }
}

/* ---------- o CTA final com a pergunta e as três respostas (02/09, noite) ----
   "Quanto investir no seu futuro é importante para você hoje?" — a ordem das
   três é a que ele ditou. A primeira é a saída honesta, discreta; as duas
   "muito importante" são as pílulas brancas do cabeçalho. */
.cta--tres .tres { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 16px; }
.cta--tres .tres > * { display: block; padding: 13px 16px; border-radius: 10px; font: inherit; font-weight: 800; font-size: 14.5px; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; }
.cta--tres .tres__nao { background: transparent; color: #F6D8DC; border: 1.5px solid rgba(255, 255, 255, .35); font-weight: 600; }
.cta--tres .tres__nao:hover { border-color: rgba(255, 255, 255, .7); }
.cta--tres .tres__sim { background: #fff; color: var(--red, #6E1423); border: 1.5px solid #fff; }
.cta--tres .tres__sim:hover { background: var(--red-s, #F2E8E4); }
.cta--tres .tres__zap { background: transparent; color: #fff; }
.cta--tres .tres__zap:hover { background: rgba(255, 255, 255, .14); }
.cta--tres .tres > *:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cta--tres .tres__resp { margin-top: 14px; color: #F6D8DC; font-size: 14.5px; }
.cta--tres .tres__resp[hidden] { display: none; }