/* =========================================================================
   A PERNA RENTABILIZA.AI
   Carrega DEPOIS de pulsarh.css e só vale dentro de `.perna-rentabiliza`.
   A casa continua sendo a casa: Inter em tudo, o mesmo grid, os mesmos
   espaços. O que muda é o volume do metal.

   🔑 POR QUE O AMBAR NAO E UMA COR NOVA. O Branding Book, cap. 10:
   "O ouro da PulsarH e o ambar do Rentabiliza ja sao a mesma cor. O que muda
   e a saturacao: a casa e o ouro contido; o Rentabiliza e o mesmo ouro no
   volume alto." Entao aqui o token `--ouro` sobe de #C9A84A para #F4B93E —
   nao e outra paleta, e a mesma no alto.
   ⚠️ O ambar e razao CONTRATUAL (co-marca com a TradeUp), nao escolha
   estetica. Nao mexer sem falar com o Rodrigo.
   ========================================================================= */
.perna-rentabiliza {
  /* ESCALA TIPOGRAFICA DA PERNA — uma so.
     Auditoria de 22/08 achou 28 tamanhos distintos nesta pagina (40,3 · 33 ·
     32 · 30 · 27,3 · 23 · 22 · 21 · 20,5 · 20 · 19,5 · 18 · 17...), todos
     clamps escritos na mao, um a um. Escala nao e capricho: e o que faz a
     pagina parecer feita por UMA pessoa. */
  /* 23/08: os --rt-* passaram a APONTAR pra escala da casa (pulsarh.css).
     O h1 da dobra era 42 enquanto o da home era 76 [MEDIDO] — cada pagina
     parecia feita por uma pessoa. Agora e um numero so. */
  --rt-hero:     var(--t-hero);      /* a headline da dobra          */
  --rt-display:  var(--t-frase);     /* virada, lista forte, tese    */
  --rt-titulo:   var(--t-h3);        /* h3 de card, valor de degrau  */
  --rt-frase:    var(--t-lede);      /* frase de marco, tripe        */
  --rt-corpo:    var(--t-corpo);
  --rt-sub:      var(--t-min);
  --rt-nota:     13px;
  --rt-etiqueta: var(--t-selo);
  /* os dois unicos que ficam fora da escala, e cada um tem motivo:      */
  --rt-marca:  clamp(26px, 3.1vw, 42px);   /* o wordmark na dobra        */
  --rt-marca-g:clamp(30px, 4.6vw, 62px);   /* o wordmark no fecho        */
  --rt-zero:   clamp(76px, 15vw, 200px);   /* o R$ 0 — o numero da tese  */

  --ouro:      #F4B93E;
  --ouro-alto: #FFD98A;
  --ouro-fundo:#A6761A;
  --metal-ouro: linear-gradient(145deg, #FFE7B0 0%, #F4B93E 44%, #A6761A 100%);
}

/* ---------- A DOBRA ---------- */
.r-hero {
  position: relative; overflow: hidden;
  padding: calc(clamp(30px, 3.6vh, 48px) + 58px) 0 clamp(48px, 6vw, 80px);
  background: var(--noite);
}
.r-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 90% at 78% 8%, rgba(244,185,62,.14), transparent 62%),
    radial-gradient(ellipse 50% 70% at 8% 96%, rgba(92,66,128,.34), transparent 64%);
}
.r-hero > * { position: relative; z-index: 1; }

/* ---------- O LOCKUP DO MOVIMENTO ----------
   Simbolo + wordmark, do jeito que a marca ja se assinava no material do
   Rentabiliza. Duas coisas que eu errei antes e ficam registradas:
   1. O simbolo e o **Impossible Chevron** — a seta dourada de perspectiva
      impossivel. Nao e uma seta generica, e o simbolo da marca.
   2. O wordmark e TEXTO, nao SVG. Em SVG eu tinha fixado a posicao do `.ai`
      em coordenada absoluta e o kerning saiu errado. Em texto, a fonte faz
      o encaixe: `.ai` a 0.65em do nome, que e a proporcao oficial.
   Fraunces aqui e legitimo: a lei "Fraunces so no grito" manda no texto
   corrido da PulsarH, nao num lockup de marca de terceiro. */
.r-lockup { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 26px); }
.r-chevron {
  width: clamp(56px, 6.2vw, 84px); height: auto; flex: none;
  filter: drop-shadow(0 10px 26px rgba(244,185,62,.3));
}
.r-lockup-texto { min-width: 0; }
.r-wordmark {
  margin: 0; display: inline-flex; align-items: baseline;
  font-family: Fraunces, Georgia, serif;
  font-size: var(--rt-marca); line-height: 1; letter-spacing: -.02em;
}
.r-nome  { font-style: italic; font-weight: 600; color: #F4F1E8; }
.r-ponto { font-weight: 600; color: var(--ouro); }
.r-ai    { font-weight: 300; font-size: .65em; color: var(--ouro); margin-left: .02em; }
.r-segmento {
  margin: 9px 0 0; font-size: var(--t-selo); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-leve);
}
.r-lockup + .r-promessa { margin-top: clamp(30px, 3.6vw, 48px); }

.r-promessa {
  margin: clamp(24px, 3vw, 36px) 0 0; max-width: 21ch;
  font-size: var(--t-hero); font-weight: 200;
  line-height: 1.04; letter-spacing: -.042em; color: var(--tinta);
  text-wrap: balance;
}
.r-promessa b {
  font-weight: 500;
  background: var(--metal-ouro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.r-apoio {
  margin: var(--e4) 0 0; max-width: 46ch;
  font-size: var(--rt-corpo); font-weight: 300;
  line-height: 1.56; color: var(--tinta-meia);
}
.r-apoio b { color: var(--tinta); font-weight: 500; }

/* ---------- O CUSTO ZERO — a estrela da pagina ----------
   CICATRIZ 22/08: isto era uma CAIXA — raio de 26px, fundo azul-noite e anel
   de ouro — pousada sobre o chao ambar-preto da secao. Parecia um widget
   colado na pagina, nao parte do comodo. E a regra da casa ao contrario:
   elemento escuro pede secao clara.

   Agora o numero mora no proprio chao da secao, entre dois fios de ouro —
   as duas paredes do comodo. E DEITA: numero de um lado, argumento do
   outro. Deitar mata um nivel de empilhamento e ancora o numero, que antes
   flutuava no meio de uma caixa grande demais pra ele. */
.r-zero {
  position: relative; text-align: left;
  border-radius: 0; background: none; box-shadow: none; overflow: visible;
  padding: clamp(30px, 3.6vw, 52px) 0;
  border-top: 1px solid rgba(244,185,62,.22);
  border-bottom: 1px solid rgba(244,185,62,.22);
  display: grid; gap: clamp(26px, 3.4vw, 56px); align-items: center;
}
@media (min-width: 900px) { .r-zero { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); } }
.r-zero-col { min-width: 0; }
.r-zero > * { position: relative; z-index: 1; }
/* CICATRIZ 22/08: o numero era UMA linha — "R$ 15.000,00" — e na largada
   estourava a coluna, saindo cortado pela borda. Empilhar resolve com o
   espaco que sobra (o vertical) em vez do que acabou (o horizontal):
   a cifra vira uma etiqueta pequena em cima e o numero manda embaixo.
   Os centavos sairam junto: numa regressiva eles nao informam nada e
   custavam tres caracteres de largura. */
.r-zero-numero {
  display: flex; flex-direction: column; align-items: flex-start;
  margin: 0; line-height: .84;
  font-size: var(--rt-zero); font-weight: 150; letter-spacing: -.06em;
  background: var(--metal-ouro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.r-zero-cifra {
  font-size: .23em; font-weight: 300; letter-spacing: .04em;
  line-height: 1; margin-bottom: .1em; align-self: flex-start;
}
.r-zero-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-zero-linha {
  margin: 0; max-width: 34ch;
  font-size: var(--rt-display); font-weight: 250;
  line-height: 1.22; letter-spacing: -.03em; color: var(--tinta);
}
.r-zero-linha b { font-weight: 500; }
.r-zero-nota { margin: var(--e3) 0 0; max-width: 52ch; font-size: var(--rt-corpo); line-height: 1.55; color: var(--tinta-meia); }

/* ---------- O FILTRO: o funil e a escada, UM objeto ----------
   CICATRIZ 22/08: eram dois blocos dizendo a mesma coisa — os mesmos quatro
   estagios, em duas linguagens visuais, a 300px um do outro. Redundancia cara
   numa secao que ja tinha tres pontos de foco brigando.

   Agora o funil e a faixa de abertura e os quatro degraus sao as pernas dele,
   dentro da mesma moldura. So deu pra fundir porque a imagem nova NAO tem
   texto queimado: os rotulos sairam do JPEG e viraram HTML.

   No celular a imagem some. Ja tentei deixa-la rolando de lado e ficou
   pessimo — o leitor via um pedaco de funil e tinha que arrastar pra
   entender. Arrastar pra entender e pior do que nao ter, e aqui nao se perde
   nada: os quatro degraus logo abaixo contam a mesma historia em texto. */
.r-filtro {
  margin: var(--e6) 0 0;
  border: 1px solid var(--fio); border-radius: 20px;
  background: rgba(11,12,31,.5); overflow: hidden;
  padding-bottom: clamp(16px, 1.8vw, 22px);
}
.r-funil { display: block; position: relative; margin: 0; padding: 0; border: 0; background: none; }
.r-funil img { display: none; width: 100%; height: auto; }
@media (min-width: 900px) { .r-funil img { display: block; } }

/* 24/08 (Rodrigo): a frase saiu do topo-esquerda da caixa e foi pra CIMA da
   imagem do funil, no canto inferior direito, em vidro escuro. No celular a
   imagem some e a frase volta a ser um paragrafo normal. */
.r-filtro-frase { padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.2vw, 28px) 0; margin: 0; }
@media (min-width: 900px) {
  .r-filtro-frase {
    position: absolute; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px);
    max-width: 44ch; padding: 16px 20px;
    background: rgba(11,12,31,.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--fio-alto); border-radius: 14px;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,.8);
  }
}
.r-filtro-frase p {
  margin: 0; max-width: 68ch;
  font-size: var(--rt-corpo); line-height: 1.6; color: var(--tinta-meia);
}
.r-filtro-frase b { color: var(--tinta); font-weight: 500; }

/* ---------- A ESCADA ----------
   Era uma tabela: quatro celulas iguais coladas por um fio de 1px, numa secao
   cuja palavra e ESCALADA. Cards separados, com um fio de ouro no topo que
   acende a cada etapa.

   CICATRIZ 2: tentei fazer os degraus SUBIREM (translateY 0/16/32/48) pra
   escada subir de verdade. Funcionou solto, mas dentro da moldura do filtro
   ficou briga: o degrau flutuando descolava do quadro. E com o funil logo
   acima mostrando a passagem estreitando, a subida virou enfeite repetindo o
   que a imagem ja diz. Saiu. */
.r-escada {
  list-style: none; margin: clamp(16px, 1.8vw, 22px) 0 0;
  padding: 0 clamp(14px, 1.6vw, 20px);
  display: grid; gap: 10px;
}
@media (min-width: 900px) { .r-escada { grid-template-columns: repeat(4, 1fr); } }
.r-degrau {
  position: relative;
  background: var(--noite-2); padding: clamp(20px, 2.2vw, 27px);
  border: 1px solid var(--fio); border-radius: 13px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background var(--base) var(--curva), border-color var(--base) var(--curva);
}
/* o fio de ouro no topo de cada degrau acende mais a cada etapa */
.r-degrau::before {
  content: ""; position: absolute; left: 13px; right: 13px; top: -1px; height: 2px;
  border-radius: 2px; background: var(--ouro); opacity: .18;
}
.r-degrau:nth-child(2)::before { opacity: .34; }
.r-degrau:nth-child(3)::before { opacity: .5; }
.r-degrau:nth-child(4)::before { opacity: .68; }
.r-degrau:hover { background: var(--noite-3); border-color: rgba(244,185,62,.26); }
.r-degrau .r-etapa { font-size: var(--t-selo); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-leve); }
.r-degrau h3 { font-size: var(--rt-titulo); font-weight: 500; letter-spacing: -.03em; }
.r-degrau .r-prazo { font-size: var(--rt-nota); color: var(--tinta-leve); }
/* o degrau da largada: e o unico que custa zero, e a pagina inteira gira nele */
.r-degrau--zero { background: linear-gradient(168deg, rgba(244,185,62,.13), rgba(244,185,62,.03)); border-color: rgba(244,185,62,.30); }
.r-degrau--zero::before { opacity: .85; }
.r-degrau--zero:hover { background: linear-gradient(168deg, rgba(244,185,62,.19), rgba(244,185,62,.05)); }
.r-degrau--zero .r-invest b {
  font-weight: 500;
  background: var(--metal-ouro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- OS PILARES ---------- */
.r-pilares { list-style: none; padding: 0; margin: var(--e6) 0 0; display: grid; gap: clamp(1px, .2vw, 2px); }
@media (min-width: 760px)  { .r-pilares { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .r-pilares { grid-template-columns: repeat(3, 1fr); } }
.r-pilar { position: relative; padding: clamp(26px, 2.8vw, 36px) clamp(20px, 2.2vw, 28px); }
.r-pilar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--fio);
}
.r-pilar .r-num {
  display: block; font-size: var(--rt-nota); font-weight: 600;
  letter-spacing: .14em; color: var(--ouro); font-variant-numeric: tabular-nums;
}
.r-pilar p { margin: 14px 0 0; }
.r-pilar .r-frase {
  font-size: var(--rt-frase); font-weight: 300;
  line-height: 1.28; letter-spacing: -.028em; color: var(--tinta);
}
.r-pilar .r-frase em { font-style: normal; font-weight: 500; color: var(--ouro); }
.r-pilar .r-sub { font-size: var(--rt-sub); line-height: 1.55; color: var(--tinta-meia); }

/* ---------- O CTA PRA LP ---------- */
/* 24/08 (Rodrigo): a caixa branca tinha texto de 52ch no meio de 1240px —
   muito vazio nas laterais e altura demais. O texto alargou (h2 30ch, lede
   70ch), o padding vertical encolheu e o respiro entre o fecho e a caixa
   caiu de --e6 pra --e3 (a secao de cima ja traz o padding dela). */
.r-porta {
  margin-top: var(--e3); padding: clamp(26px, 3vw, 40px) clamp(28px, 4vw, 56px);
  border-radius: 24px; text-align: center;
  background: var(--prata-chapa); color: #0B0C1F;
  --tinta: #0B0C1F; --tinta-meia: #4C5064; --fio: rgba(11,12,31,.14);
}
.r-porta h2 { max-width: 30ch; margin: 0 auto; }
.r-porta .lede { margin: var(--e2) auto 0; max-width: 70ch; }
#conversar.secao { padding-top: 0; }
.r-porta .hero-acoes { justify-content: center; margin-top: var(--e5); }
/* a seta de 45 graus do Rentabiliza, no botao que leva pra LP */
.r-seta { width: 17px; height: 17px; flex: none; }

@media (max-width: 620px) {
  .r-zero-numero { --rt-zero: clamp(58px, 17vw, 98px); }
}

/* =========================================================================
   BLOCOS DA COPY (v2 · 22/08) — a copy do Rodrigo pediu sete blocos, nao
   cinco. Cada classe abaixo serve UMA figura de argumento dele.
   ========================================================================= */

/* a dobra: corpo, tese e o carimbo do custo zero */
.r-hero-corpo { margin: var(--e4) 0 0; max-width: 54ch; display: grid; gap: var(--e2); }
.r-hero-corpo p { margin: 0; font-size: var(--rt-corpo); line-height: 1.58; color: var(--tinta-meia); }
.r-hero-corpo .r-firme { color: var(--tinta); font-weight: 500; }
.r-tese {
  margin: var(--e5) 0 0; max-width: 34ch;
  font-size: var(--rt-display); font-weight: 300;
  line-height: 1.3; letter-spacing: -.028em; color: var(--tinta);
}
.r-tese b { font-weight: 500; }
/* o carimbo: e a frase que vende a pagina, entao ela nao e paragrafo */
.r-carimbo {
  display: inline-block; margin: var(--e3) 0 0;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid rgba(244,185,62,.42);
  background: rgba(244,185,62,.09);
  font-size: var(--rt-sub); font-weight: 500;
  letter-spacing: -.012em; color: var(--ouro-alto);
}

/* as tres frases da ponta */
.r-tripe { list-style: none; padding: 0; margin: var(--e6) 0 0; display: grid; gap: 0; max-width: 60ch; }
.r-tripe li {
  position: relative; padding: 18px 0 18px 28px;
  border-top: 1px solid var(--fio);
  font-size: var(--rt-frase); font-weight: 300;
  line-height: 1.45; letter-spacing: -.018em; color: var(--tinta-meia);
}
.r-tripe li:last-child { border-bottom: 1px solid var(--fio); }
.r-tripe li b { color: var(--tinta); font-weight: 600; }
.r-tripe li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 13px; height: 1px; background: var(--ouro);
}

/* a virada — a frase que gira o argumento */
.r-virada {
  margin: var(--e5) 0 0; max-width: 30ch;
  font-size: var(--rt-display); font-weight: 250;
  line-height: 1.2; letter-spacing: -.032em; color: var(--tinta);
  text-wrap: balance;
}
.r-virada b { font-weight: 500; }
.r-virada--centro { margin-left: auto; margin-right: auto; text-align: center; max-width: 26ch; }
/* 24/08 (Rodrigo): virada centrada E larga, pra encurtar a secao na vertical */
.r-virada--larga { max-width: 58ch; }
/* secao sem CTA no fim (o-que-e): respira menos embaixo */
.secao--curta { padding-bottom: calc(var(--ar) * .55); }
.r-entra { margin: var(--e3) 0 0; font-size: var(--rt-frase); color: var(--ouro); font-weight: 500; }

/* a logica em tres passos */
.r-logica { list-style: none; padding: 0; margin: var(--e6) 0 0; display: grid; gap: clamp(14px, 1.8vw, 22px); }
@media (min-width: 860px) { .r-logica { grid-template-columns: repeat(3, 1fr); } }
.r-logica li {
  position: relative; padding: clamp(24px, 2.6vw, 32px);
  border-radius: 16px; border: 1px solid var(--fio);
  background: linear-gradient(162deg, rgba(168,170,194,.07), rgba(168,170,194,.02));
}
.r-logica .r-passo {
  display: block; font-size: var(--rt-etiqueta); font-weight: 600;
  letter-spacing: .16em; color: var(--ouro); font-variant-numeric: tabular-nums;
}
.r-logica p {
  margin: 14px 0 0; font-size: var(--rt-frase); font-weight: 300;
  line-height: 1.34; letter-spacing: -.022em; color: var(--tinta-meia);
}
.r-logica p b { color: var(--tinta); font-weight: 500; }

/* o "por que?" dentro do bloco do zero */
.r-zero-porque {
  margin: var(--e4) 0 0; font-size: var(--rt-frase);
  font-weight: 500; color: var(--ouro); letter-spacing: -.02em;
}
.r-zero-nota b { color: var(--tinta); font-weight: 500; }

/* a descricao de cada degrau */
.r-degrau .r-desc { margin: 4px 0 0; font-size: var(--rt-sub); line-height: 1.5; color: var(--tinta-meia); }

/* a cadencia: as quatro linhas que explicam a escalada */
/* 24/08 (Rodrigo): sem paragrafos — uma linha so, ocupando a largura. */
.r-cadencia-linha { margin: var(--e5) 0 0; max-width: none; font-size: var(--rt-frase); line-height: 1.55; color: var(--tinta-meia); }
.r-cadencia-linha b { color: var(--tinta); font-weight: 500; }
.r-cadencia {
  list-style: none; padding: 0; margin: var(--e5) auto 0; max-width: 44ch;
  display: grid; gap: 12px; text-align: center;
}
.r-cadencia li { font-size: var(--rt-sub); line-height: 1.4; color: var(--tinta-meia); }
.r-cadencia li:last-child { color: var(--tinta); font-weight: 500; }

/* ---------- os seis blocos do retorno ----------
   [DISCORDO da roleta aqui, e o motivo esta no CSS pra nao se perder]:
   na home a roleta resolveu paredes de texto. Estes blocos tem titulo e duas
   linhas — ja se leem de relance. E esta e a lista de POR QUE COMPRAR: o
   diretor de canal vai conferindo motivos. Roleta de 6 mostra 1 e esconde 5,
   e esconder razao de comprador e o contrario da funcao da secao.
   O que faltava nao era formato, era tratamento — e hierarquia. */
.r-mudancas { list-style: none; padding: 0; margin: var(--e6) 0 0; display: grid; gap: clamp(12px, 1.4vw, 18px); }
@media (min-width: 780px)  { .r-mudancas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .r-mudancas { grid-template-columns: repeat(3, 1fr); } }
.r-mudanca {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 11px;
  padding: clamp(28px, 3vw, 38px) clamp(22px, 2.4vw, 30px);
  border-radius: 18px;
  background: linear-gradient(166deg, rgba(255,255,255,.72), rgba(255,255,255,.3));
  border: 1px solid rgba(11,12,31,.08);
  box-shadow: 0 14px 30px -24px rgba(11,12,31,.45);
  transition: transform var(--base) var(--curva), box-shadow var(--base) var(--curva),
              border-color var(--base) var(--curva);
}
/* o fio de ouro no topo do card — cresce da esquerda no hover */
.r-mudanca::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--metal-ouro);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--lento) var(--curva);
}
.r-mudanca:hover {
  transform: translateY(-4px);
  border-color: rgba(244,185,62,.4);
  box-shadow: 0 26px 46px -26px rgba(11,12,31,.5), 0 0 44px -26px rgba(244,185,62,.6);
}
.r-mudanca:hover::before { transform: scaleX(1); }
.r-mudanca .r-num {
  font-size: var(--rt-titulo); font-weight: 200;
  letter-spacing: -.04em; line-height: 1;
  color: var(--ouro-fundo); font-variant-numeric: tabular-nums;
}
.r-mudanca h3 { font-size: var(--rt-titulo); font-weight: 500; line-height: 1.2; letter-spacing: -.028em; }
.r-mudanca p { margin: 0; font-size: var(--rt-sub); line-height: 1.58; color: var(--tinta-meia); }
.r-mudanca p b { color: var(--tinta); font-weight: 500; }

/* 🔑 O BLOCO 05 E A TESE DA PAGINA INTEIRA — "voce comeca sem investimento".
   Ele estava visualmente igual aos outros cinco, o que e um erro de
   hierarquia: a razao principal nao pode ter o mesmo peso das secundarias. */
.r-mudanca--tese {
  background: linear-gradient(166deg, rgba(255,247,228,.95), rgba(255,241,209,.5));
  border-color: rgba(244,185,62,.45);
  box-shadow: 0 18px 38px -24px rgba(166,118,26,.42), 0 0 44px -28px rgba(244,185,62,.6);
}
.r-mudanca--tese::before { transform: scaleX(1); }
.r-mudanca--tese .r-num {
  background: var(--metal-ouro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 400;
}
.r-mudanca--tese:hover { border-color: var(--ouro); }

/* o fecho da marca */
.r-fecho-marca { text-align: center; }
.r-wordmark--fecho { justify-content: center; font-size: var(--rt-marca-g); margin-bottom: var(--e4); }
.r-fecho-marca h2 { max-width: 24ch; margin: 0 auto; }
.r-fecho-marca .lede { margin: var(--e3) auto 0; max-width: 46ch; }
.r-lista-forte { list-style: none; padding: 0; margin: var(--e4) auto 0; display: grid; gap: 8px; }
.r-lista-forte li {
  font-size: var(--rt-display); font-weight: 250;
  line-height: 1.18; letter-spacing: -.032em; color: var(--tinta);
}
.r-lista-forte li:last-child {
  background: var(--metal-ouro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 400;
}

/* o que a proposta abre */
.r-aberto {
  list-style: none; padding: 0; margin: var(--e4) auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
}
.r-aberto li {
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--fio-alto);
  font-size: var(--rt-nota); font-weight: 500; color: var(--tinta-meia);
}
.r-tudo-aberto {
  margin: var(--e3) 0 0; font-size: var(--rt-frase);
  font-weight: 500; letter-spacing: -.022em; color: var(--tinta);
}

/* =========================================================================
   A DOBRA v3 (22/08) — texto a esquerda, VSL a direita.
   O textao que morava aqui em paragrafos virou o roteiro da VSL. A dobra
   passou a ter quatro coisas e nada mais: lockup, headline, o carimbo do
   custo zero e os CTAs. Quem quiser o argumento inteiro, aperta o play.
   ========================================================================= */
.r-dobra { display: grid; gap: clamp(36px, 4.4vw, 64px); align-items: center; }
@media (min-width: 1000px) {
  /* DUAS colunas de verdade (22/08): a VSL saiu de dentro da coluna do texto
     e virou a segunda coluna. Antes ela empilhava embaixo do carimbo e a
     metade direita da dobra ficava so com a foto. Agora headline e video
     dividem a linha, centrados um pelo outro pelo align-items: center. */
  .r-dobra { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); } /* 23/08: a promessa e longa; a coluna dela manda */
}
.r-dobra-texto { min-width: 0; }
/* Numa dobra de DUAS colunas a headline vive numa coluna de ~560px: em 62px
   ela quebrava em 6 linhas e empurrava o CTA pro limite da tela [MEDIDO:
   fundo do texto em 899 num viewport de 900]. A escala aqui e menor de
   proposito — quem carrega o tamanho e o video ao lado. */
.r-dobra .r-promessa {
  margin-top: clamp(24px, 2.8vw, 36px); max-width: 28ch;
  font-size: var(--t-hero-dobra); line-height: 1.08;
}
.r-dobra .r-carimbo { margin-top: var(--e3); }
.r-dobra .hero-acoes { margin-top: var(--e5); }
/* A VSL agora e a COLUNA DA DIREITA, nao um bloco embaixo do carimbo. */
.r-mock { max-width: 470px; margin: var(--e4) 0 0; }
@media (min-width: 1000px) { .r-mock { margin: 0; justify-self: center; max-width: 430px; } }
.r-dobra .hero-acoes { margin-top: var(--e3); }

/* ---------- A PLACA DE FUNDO DA DOBRA ----------
   Mesmo mecanismo da home: a imagem sangra a secao inteira e um veu escurece
   a esquerda. Duas licoes ja pagas la que valem aqui:
   1. `inset: -6% 0` e nao `-6%`: a sobra do parallax e VERTICAL. Sobra
      lateral so aumenta o corte, e o assunto vive na direita.
   2. `background-position: 100%`: o que sobra de largura sai da ESQUERDA,
      que e area vazia de proposito. Chegamos a espelhar a foto em 22/08 e
      voltamos atras — espelhada, a cena ia parar embaixo da headline e o
      lado do video ficava vazio. A orientacao original ja estava certa: o
      escuro na esquerda pro texto, a cena na direita, atras do video.

   3. O VEU FOI RECALIBRADO CONTRA A FOTO, nao no olho [MEDIDO 22/08]:
        sob a headline (esquerda)  luminancia media  2.7
        atras do video (direita)   luminancia media 48.2 · p95 174.8
      Ou seja: a esquerda JA e preta na propria foto. O veu de .97 ali nao
      protegia legibilidade nenhuma — mesmo sem veu o contraste do texto
      branco da 14.7 — so enterrava a unica parte bonita da imagem quando ela
      chegava perto. Sobrou o suficiente pra assentar o texto, e nada mais. */
.r-hero-fundo {
  position: absolute; inset: -6% 0; z-index: 0;
  background: var(--noite) 100% center/cover no-repeat;
  background-image: url("../img/rentabiliza-hero.jpg");
  filter: saturate(1.02) contrast(1.06) brightness(1.02);
}
.r-hero-veu {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,12,31,.84) 0%, rgba(11,12,31,.4) 8%, rgba(11,12,31,0) 18%),
    linear-gradient(96deg, rgba(11,12,31,.72) 0%, rgba(11,12,31,.5) 30%, rgba(11,12,31,.2) 54%, rgba(11,12,31,.04) 76%, rgba(11,12,31,0) 100%),
    linear-gradient(0deg, rgba(11,12,31,.5) 0%, transparent 30%);
}
.r-hero .wrap { position: relative; z-index: 2; }
@media (max-width: 1180px) {
  .r-hero-veu {
    background:
      linear-gradient(180deg, rgba(11,12,31,.86) 0%, rgba(11,12,31,.46) 9%, rgba(11,12,31,0) 19%),
      linear-gradient(96deg, rgba(11,12,31,.97) 0%, rgba(11,12,31,.95) 48%, rgba(11,12,31,.76) 70%, rgba(11,12,31,.34) 92%, rgba(11,12,31,.2) 100%);
  }
}
@media (max-width: 760px) {
  .r-hero-veu {
    background:
      linear-gradient(0deg, rgba(11,12,31,.92) 0%, rgba(11,12,31,.84) 46%, rgba(11,12,31,.7) 100%),
      linear-gradient(180deg, rgba(11,12,31,.86) 0%, rgba(11,12,31,0) 20%);
  }
}

/* ---------- SECAO 2 · o canal, com o Pulse ----------
   🔑 UMA ordem de DOM serve as duas telas, sem duplicar markup:
      celular  → cabeça · Pulse · bullets e encerramento
      desktop  → o grid manda o Pulse pra coluna 1 e o texto pra coluna 2
   Nao usei `order:` de proposito: `order` muda o desenho e NAO muda a ordem
   do teclado nem a do leitor de tela — quem navega por Tab leria fora de
   sequencia. Grid explicito por linha e coluna nao tem esse defeito. */
.r-canal { display: grid; gap: clamp(28px, 3.4vw, 48px); }
@media (min-width: 1000px) {
  .r-canal {
    grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
    column-gap: clamp(30px, 4vw, 64px);
    align-items: center;
  }
  .r-pulse         { grid-column: 1; grid-row: 1 / span 2; align-self: end; }
  .r-canal-cabeca  { grid-column: 2; grid-row: 1; }
  .r-canal-fecho   { grid-column: 2; grid-row: 2; }
}
.r-canal-cabeca { max-width: 58ch; }
.r-canal-fecho .r-tripe { margin-top: 0; }
.r-pulse { margin: 0; justify-self: center; }
.r-pulse img {
  display: block; width: 100%; max-width: 330px; height: auto;
  filter: drop-shadow(0 30px 44px rgba(11,12,31,.26));
}
@media (max-width: 999px) { .r-pulse img { max-width: 210px; margin: 0 auto; } }
/* sem a arte, o texto ocupa a largura toda — nunca meia tela vazia */
@media (min-width: 1000px) {
  .r-canal:has(.sem-arte) { grid-template-columns: minmax(0, 1fr); }
  .r-canal:has(.sem-arte) .r-canal-cabeca,
  .r-canal:has(.sem-arte) .r-canal-fecho { grid-column: 1; }
}

/* =========================================================================
   A LINHA DO TEMPO DA ESCALADA
   Eram tres cartoes soltos. Viraram tres marcos numa linha que se desenha da
   esquerda pra direita — porque a copy fala de uma SEQUENCIA, e cartao lado
   a lado nao diz sequencia, diz opcao.
   🔑 O icone e o argumento: 9 pontos acesos, depois 4, depois 1 com anel.
   O afunilamento se ve antes de a frase ser lida.
   ========================================================================= */
.r-linha-tempo {
  list-style: none; padding: 0; margin: var(--e6) 0 0;
  position: relative; display: grid; gap: clamp(26px, 3vw, 44px);
}
@media (min-width: 880px) { .r-linha-tempo { grid-template-columns: repeat(3, 1fr); } }

/* o fio que liga os marcos — nasce do centro do primeiro no ate o do ultimo */
@media (min-width: 880px) {
  .r-linha-tempo::before {
    content: ""; position: absolute; z-index: 0;
    left: 16.66%; right: 16.66%; top: 33px; height: 1px;
    background: linear-gradient(90deg,
      rgba(244,185,62,.15), rgba(244,185,62,.7) 50%, rgba(244,185,62,.15));
    transform: scaleX(0); transform-origin: left center;
    transition: transform 1.5s var(--curva) .1s;
  }
  .r-linha-tempo:has(.dentro)::before { transform: scaleX(1); }
}

.r-marco { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.r-marco-no {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 50%; flex: none;
  color: var(--ouro);
  background: radial-gradient(circle at 34% 26%, var(--noite-3), var(--noite) 76%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(244,185,62,.34),
    0 0 34px -8px rgba(244,185,62,.32);
  transition: box-shadow var(--lento) var(--curva), transform var(--lento) var(--curva);
}
.r-marco-no svg { width: 32px; height: 32px; }
/* o GLOW cresce a cada degrau: o terceiro marco brilha mais que o primeiro,
   porque e onde a escalada chega */
.r-marco:nth-child(2) .r-marco-no { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(244,185,62,.5), 0 0 44px -8px rgba(244,185,62,.46); }
.r-marco:nth-child(3) .r-marco-no { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(244,185,62,.72), 0 0 58px -6px rgba(244,185,62,.62); }
.r-marco:hover .r-marco-no {
  transform: translateY(-4px) scale(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px var(--ouro), 0 0 70px -6px rgba(244,185,62,.8);
}

.r-marco-num {
  font-size: var(--rt-etiqueta); font-weight: 600; letter-spacing: .18em;
  color: var(--ouro-fundo); font-variant-numeric: tabular-nums;
}
.r-marco p {
  margin: 0; font-size: var(--rt-frase); font-weight: 300;
  line-height: 1.32; letter-spacing: -.024em; color: var(--tinta-meia);
  max-width: 26ch;
}
.r-marco p b { color: var(--tinta); font-weight: 500; }
.r-marco-nota {
  font-size: var(--rt-etiqueta); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-leve);
}
/* o marco cresce ao entrar — um a um, da esquerda pra direita */
.js .r-marco.rv { opacity: 0; transform: translateY(20px) scale(.94); }
.js .r-marco.rv.dentro {
  opacity: 1; transform: none;
  transition: opacity .8s var(--curva), transform .8s var(--curva);
}
.r-marco:nth-child(2).rv.dentro { transition-delay: .16s !important; }
.r-marco:nth-child(3).rv.dentro { transition-delay: .32s !important; }
@media (prefers-reduced-motion: reduce) {
  .js .r-marco.rv, .js .r-marco.rv.dentro { opacity: 1; transform: none; transition: none; }
  .r-linha-tempo::before { transform: scaleX(1); transition: none; }
}

/* =========================================================================
   O CORACAO DA PAGINA · a largada
   Esta secao ganhou superficie PROPRIA — nem prata nem aura. E o unico lugar
   da casa onde o preto puxa pro ambar, e isso e de proposito: quem rola a
   pagina sente que entrou noutro comodo antes de ler qualquer palavra.
   ========================================================================= */
.r-coracao {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, #17100A 0%, #120E14 38%, #0B0C1F 100%);
}
.r-coracao::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 62% at 82% 6%, rgba(244,185,62,.20), transparent 64%),
    radial-gradient(ellipse 46% 54% at 6% 96%, rgba(122,91,160,.26), transparent 62%);
}
/* os dois fios de ouro que marcam a entrada e a saida do comodo */
.r-coracao::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244,185,62,.6) 50%, transparent);
}
.r-coracao > * { position: relative; z-index: 1; }

/* ---------- o painel do zero, versao premium ---------- */
/* centralizacao antiga do zero: agora ele deita e alinha a esquerda */
.r-zero-rotulo {
  margin: 0 0 var(--e3); font-size: var(--t-selo); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-leve);
}
.r-zero-numero {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: filter 1.1s var(--curva), letter-spacing 1.1s var(--curva);
}
/* quando a regressiva chega no zero, o numero ACENDE — o unico brilho da pagina */
.r-zero-numero.r-chegou {
  filter: drop-shadow(0 0 46px rgba(244,185,62,.5));
  letter-spacing: -.055em;
}
.r-zero-linha, .r-zero-nota { margin-left: 0; margin-right: 0; }
.r-zero-porque { margin-top: var(--e4); }

/* os dois selos de personalizacao */
.r-selos {
  list-style: none; padding: 0; margin: var(--e4) 0 0;
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px;
}
.r-selos li {
  padding: 9px 17px; border-radius: 999px;
  border: 1px solid rgba(244,185,62,.34);
  background: rgba(244,185,62,.07);
  font-size: var(--rt-nota); font-weight: 500; letter-spacing: -.008em;
  color: var(--ouro-alto);
}


/* ---------- os dois valores de cada degrau ----------
   Duas linhas, e a leitura e a COMPARACAO: o valor percebido sobe de 1.000 a
   20.000 enquanto o investimento da marca comeca em zero. O contraste entre
   as duas linhas e o argumento — por isso moram juntas e alinhadas. */
.r-valores {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--fio);
  display: grid; gap: 12px;
}
.r-valores p { margin: 0; display: flex; flex-direction: column; gap: 3px; }
 /* CICATRIZ 22/08: eram duas etiquetas em CAIXA-ALTA repetidas nos quatro
    degraus — oito blocos gritando a mesma coisa. A partir do segundo card o
    leitor ja sabe o que e cada linha; dali pra frente aquilo deixou de ser
    informacao e virou ruido. Ficaram curtas e em voz baixa. */
.r-valores span {
  font-size: var(--rt-nota); font-weight: 400; letter-spacing: -.005em;
  text-transform: none; color: var(--tinta-leve);
}
.r-valores b {
  font-size: var(--rt-titulo); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.r-valor b  { font-weight: 300; font-size: var(--rt-frase); color: var(--tinta-leve); }
.r-invest b { font-weight: 500; color: var(--tinta); }
/* so o R$ 0 do Start leva o ouro: e o unico numero fechado da escada */
.r-degrau--zero .r-invest b {
  font-weight: 500;
  background: var(--metal-ouro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* O intervalo selo -> titulo era 22px dentro de `.cabeca` e 18px fora dela
   [MEDIDO 22/08]. Aqui varios selos vivem em blocos proprios (`.r-porta`,
   `.r-canal-cabeca`), entao a regra tem que valer na perna inteira. */
.perna-rentabiliza .selo { margin-bottom: var(--e3); }