.elementor-46353 .elementor-element.elementor-element-b9e4bb6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-172b29d */#rn-site-wrapper .rn-hero {
  position: relative;
  background: var(--rn-bg);
}

/* O "palco": é ele que carrega a foto, o véu e o conteúdo.

   A altura mínima desconta o header (--rn-header-h) do 100vh, para o hero
   preencher a primeira tela SEM criar uma faixa de rolagem de 80px que
   ninguém pediu. O clamp segura o mínimo em 560px: em celular deitado,
   100vh dá ~350px e o texto não caberia.

   O `isolation: isolate` cria contexto de empilhamento próprio, e é o que
   permite usar z-index negativo na foto sem ela escapar para trás do
   fundo da página. */
#rn-site-wrapper .rn-hero__stage {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, calc(100vh - var(--rn-header-h)), 900px);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

/* A ARTE DE FUNDO.

   `object-fit: cover` continua, e aqui ele corta na HORIZONTAL — o oposto
   do que acontece nos heros das páginas internas. O motivo é a conta:

     a arte é 1920x930, uma faixa de 2,07:1 · o palco é quase 100vh, o que
     numa tela de 1440x900 dá 1,76:1

   Como o palco é mais "alto" que a arte, o `cover` escala pela ALTURA e
   sobra largura, que é cortada nas duas pontas — cerca de 7% de cada lado
   numa tela de 1440px, 4% numa de 1920px. O corte é simétrico, então quem
   fica sempre inteira é a figura CENTRAL, que é a principal. A figura que
   grita, na ponta direita, perde a borda em telas mais estreitas.

   >>> `center top`, E NÃO A PORCENTAGEM QUE ESTAVA AQUI. <<<
   Era "center 35%", pensado para foto de banco onde o assunto fica acima
   do centro. A metade vertical do valor só entra em ação em tela larga e
   baixa, quando o `cover` passa a escalar pela largura e sobra ALTURA para
   cortar. Nessa hora, 35% comeria o topo — e o topo, nesta arte, são as
   três cabeças, que começam a 6% da altura do arquivo. `top` ancora no
   alto e joga o corte para a base, onde há torso e chão.

   É a mesma decisão tomada nos heros das páginas internas e no fecho de
   Soluções. Ver o BLOCO 1 para a conta por extenso. */
#rn-site-wrapper .rn-hero__bg,
#rn-site-wrapper .rn-hero__bg img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* O VÉU. Dois degradês somados:

     1º (horizontal) protege a COLUNA DO TEXTO, à esquerda, e SOLTA a
        metade direita, onde estão as figuras.
     2º (vertical) costura o pé do hero com o preto da seção seguinte, para
        a divisa não ser uma linha reta.

   HAVIA UM 3º: um radial que punha um brilho azul no canto inferior
   direito, para ligar a foto genérica à paleta do site. Ele saiu quando
   todos os véus azuis do site saíram — sobre foto, o azul deste site é
   véu, e véu de cor tinge o assunto.

   ==========================================================================
   >>> O VÉU HORIZONTAL FOI ZERADO. SOBROU SÓ A COSTURA DO PÉ. <<<

   Esta regra já teve três versões, e o histórico é a explicação:

     1ª  .96 / .90 aos 40% / .60 aos 78% / .48 no fim
         Calibrada para uma foto de BANCO, clara e chapada, em que o único
         problema era o texto branco por cima.

     2ª  .94 / .88 aos 38% / .38 aos 56% / .08 aos 76% / 0 no fim
         A arte oficial chegou e a 1ª virou defeito na hora: ela escurecia
         a metade direita a 60%, e é lá que estão as três figuras. A arte
         aparecia como sombra. Esta versão abria a direita e segurava a
         esquerda.

     3ª  nenhuma. É a de hoje.

   >>> POR QUE ZERO E NÃO "MAIS LEVE": A ARTE JÁ É O VÉU. <<<
   Ela não é uma foto crua — é uma composição, e o lado esquerdo dela foi
   escurecido no próprio arquivo justamente para receber texto. Somar um
   degradê do CSS por cima era escurecer duas vezes a mesma coisa: o texto
   não ganhava contraste que já não tivesse, e as figuras perdiam luz.

   Quando o fundo já é um degradê feito à mão, o CSS não tem o que
   melhorar — só o que estragar.

   O QUE FICOU: só o degradê VERTICAL do pé, e ele não é véu. É a costura
   com a seção seguinte: sem ele a divisa entre a arte e o preto da faixa
   de números vira uma linha reta atravessando a tela.

   >>> SE O TEXTO PERDER LEGIBILIDADE, o ponto a conferir é o painel do
   palco ("DO CAOS AO LUCRO"), que na arte fica por volta dos 28% a 42% da
   largura — dentro da coluna de texto. Ele é a área mais clara do lado
   esquerdo. O remédio, se precisar, é um degradê horizontal LEVE (algo
   como .45 no início caindo a zero aos 45%), e não a volta de qualquer uma
   das duas versões acima. <<<
   ========================================================================== */
#rn-site-wrapper .rn-hero__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top, var(--rn-bg) 0%, rgba(8,7,7,0) 30%);
}

/* ==========================================================================
   O CELULAR TEM OUTRO DESENHO DE HERO. NÃO É O DESKTOP ESTREITADO.

   >>> A ARTE NÃO COBRE O PALCO AQUI: ELA ANCORA NO PÉ. <<<
   Esta é a diferença que resolve o problema inteiro, e ela merece o
   histórico, porque a solução óbvia foi tentada duas vezes e falhou as
   duas.

   O PROBLEMA: a arte de celular (banner-renan-nicolini-1.webp) põe o
   cenário em cima e as três figuras embaixo. Com `object-fit: cover`
   cobrindo o palco inteiro, as figuras ficam presas aos 44% inferiores em
   QUALQUER tela — e o conteúdo do hero (título, pílula, frase, parágrafo,
   dois botões e as quatro palavras) mede uns 620px, ou 81% do palco.
   Sobram 19% de espaço livre, partidos entre o topo e o pé, contra uma
   faixa de rostos que ocupa 26%. Não cabe.

   O QUE FOI TENTADO E NÃO RESOLVE:
     . aliviar o véu embaixo, para as figuras aparecerem — dá o botão
       primário em cima do rosto
     . endurecer o véu embaixo, para o botão ficar limpo — apaga as figuras
     . mexer em object-position, altura do palco ou alinhamento — não muda
       nada, porque o `cover` amarra as figuras aos 44% inferiores

   O QUE RESOLVE: tirar do `cover` a obrigação de cobrir o topo.

     a arte ancora no PÉ e ocupa 78% da altura
     o topo, que na arte é só cenário vazio, passa a ser PINTADO de
     #05090F pelo degradê — não se perde nada, porque não havia nada ali
     o palco ganha uma RESERVA no pé (o padding-bottom), que empurra o
     conteúdo para cima da linha dos rostos

   A CONTA, num celular de 390px de largura: a arte renderiza com 697px de
   altura, e ancorada no pé isso põe os rostos a uma distância FIXA da
   base — de 125px a 230px. É por isso que a reserva do pé funciona: ela é
   a única medida que precisa ser maior que 230px para o conteúdo passar
   por cima da faixa dos rostos.

   >>> SE OS BOTÕES VOLTAREM PARA O ROSTO, é o padding-bottom que sobe. <<<
   Não mexa no véu nem no object-position: eles não controlam isso.
   ========================================================================== */
@media (max-width: 767px) {

  /* 1 · A RESERVA NO PÉ.
     É ela que empurra o conteúdo para cima da linha dos rostos.

     >>> O VALOR DO MEIO É `62vw`, E ELE NÃO É CHUTE. <<<
     Ele sai da conta acima, e o ponto é que a medida TEM de acompanhar a
     largura da tela. A arte é vertical e o `cover` a escala pela largura,
     então uma tela mais larga renderiza uma arte mais alta e empurra os
     rostos para MAIS LONGE do pé:

       largura 360px ..... rostos começam a 212px do pé
       largura 390px ..... rostos começam a 230px do pé
       largura 430px ..... rostos começam a 253px do pé

     A conta fechada é `(1 - 0,67) x 1340 / 750 = 0,59` da largura. Os 62vw
     são esses 0,59 com uma folga de uns 12px, que é o que separa o pé do
     conteúdo do alto da testa.

     UMA MEDIDA FIXA AQUI NÃO SERVE: a primeira versão usava 42vw com piso
     de 14rem, e o piso vencia em toda tela de celular — dava 224px onde
     eram precisos 230px. Seis pixels, e o botão voltava para a testa.

     O piso de 15rem só entra em telas muito estreitas; o teto de 30rem
     segura o hero em tablet retrato, onde a arte vertical fica enorme. */
  #rn-site-wrapper .rn-hero__stage {
    padding-top: clamp(2.5rem, 6vw, 3.5rem);
    padding-bottom: clamp(15rem, 62vw, 30rem);

    /* O conteúdo encosta no TOPO. Com a reserva no pé, centralizar deixaria
       de fazer sentido: o conteúdo flutuaria no meio da altura e voltaria a
       descer para cima das figuras — que é o defeito que esta regra inteira
       existe para consertar. */
    align-items: flex-start;
  }

  /* 2 · A ARTE ANCORA NO PÉ.
     O `top: auto` é obrigatório: sem ele o `inset: 0` herdado continua
     valendo e o `height` não tem efeito nenhum — a imagem seguiria colada
     no topo e na base ao mesmo tempo.

     `center bottom` mostra o pé da arte, que é onde as figuras estão. O
     que sai fora é o cenário do topo, e ele não faz falta: o degradê o
     substitui por preto chapado. */
  #rn-site-wrapper .rn-hero__bg,
  #rn-site-wrapper .rn-hero__bg img {
    top: auto;
    bottom: 0;
    height: 78%;
    object-position: center bottom;
  }

  /* 3 · O FUNDO DO TOPO, NO TOM PEDIDO: #05090F.

     >>> AQUI ELE NÃO É VÉU — É FUNDO. E É POR ISSO QUE ELE NÃO FOI
     ZERADO JUNTO COM O DO DESKTOP. <<<

     A arte ocupa 78% da altura, ancorada no pé. Os 22% de cima não têm
     imagem nenhuma: se este degradê sumisse, aquela faixa mostraria o
     --rn-bg do .rn-hero (#080707) e apareceria uma emenda de temperatura
     onde o preto quente do site encontra o preto frio da arte.

     O QUE FOI ZERADO AQUI: a parte que era véu de verdade. A versão
     anterior continuava escurecendo a arte até a base (.94 aos 46%, .74
     aos 60%, .42 aos 76%, .18 no fim) — ou seja, pintava por cima das
     figuras. Agora ele é sólido só onde não há imagem e some por completo
     aos 44%, bem antes das cabeças, que começam por volta dos 65% do
     palco. Da queda para baixo a arte aparece crua.

     >>> O TOM É #05090F E NÃO O --rn-bg (#080707). <<< É um preto mais
     frio, e a diferença importa: é ele que faz a faixa pintada encostar na
     parte escura da própria arte sem deixar linha visível.

     A COSTURA COM A SEÇÃO SEGUINTE ficou leve (.45 nos últimos 8%). Ela
     existe só para a divisa não ser um corte seco — a base da arte já é
     escura por si. */
  #rn-site-wrapper .rn-hero__stage::before {
    background:
      linear-gradient(180deg,
        #05090F 0%,             #05090F 20%,
        rgba(5,9,15,.70) 30%,   rgba(5,9,15,.24) 38%,
        rgba(5,9,15,0)   44%),
      linear-gradient(to top, rgba(5,9,15,.45) 0%, rgba(5,9,15,0) 8%);
  }
}

/* --- A COLUNA DE TEXTO ---------------------------------------------------

   >>> ELA FICA À ESQUERDA, E É AQUI QUE ISSO ACONTECE. <<<

   O `.rn-container` (que envolve este bloco no HTML) já centraliza a
   coluna de 1220px na tela. O `max-width: 46%` faz o texto ocupar menos da
   metade DESSA coluna — ou seja, ele encosta na margem esquerda do
   conteúdo e deixa a metade direita livre.

   >>> ERAM 46%. VIRARAM 42% QUANDO A ARTE OFICIAL CHEGOU. <<<

   Os 46% vinham do site da Débora, onde a arte é UMA figura com o ombro
   por volta dos 51% da largura — o número foi calibrado contra ela. O que
   chegou aqui foi outra coisa: uma composição de TRÊS figuras, e a mais à
   esquerda (a de óculos) começa aos 36% do arquivo.

   O comentário que estava escrito aqui dizia, com todas as letras: "se a
   arte que chegar tiver a figura mais à esquerda, ESTE é o número a
   baixar". Foi o que aconteceu.

   A CONTA: o container tem 1220px centralizados. Com 42%, a coluna de
   texto vai de 7% a 44% da largura de uma tela de 1440px. O rosto da
   figura de óculos cai por volta dos 43% — os dois quase se encostam, e
   por isso o véu do CSS ainda faz o resto do trabalho ali (ver
   .rn-hero__stage::before).

   >>> SE VOCÊ QUISER O ROSTO DA FIGURA DE ÓCULOS COMPLETAMENTE LIVRE,
   é este número que desce mais — para 38%, por exemplo. O preço é o texto:
   a frase da copy tem 58 caracteres e ganha uma linha a cada corte desses.
   Aliviar o véu em vez disso NÃO resolve, só tira o fundo do texto. <<<
   ----------------------------------------------------------------------- */
#rn-site-wrapper .rn-hero__body {
  max-width: 100%;
}

/* Abaixo de 900px a arte troca de composição (as figuras vão para baixo,
   não para o lado) e o texto ocupa a largura toda — por isso o limite só
   vale no desktop. */
@media (min-width: 900px) {
  #rn-site-wrapper .rn-hero__body { max-width: 42%; }
}

/* Entre 900 e 1200px a coluna ganha folga até 54%: nessa largura os 42%
   ficam apertados demais para a frase da copy, que quebraria em cinco
   linhas.

   AQUI O TEXTO REALMENTE PASSA POR CIMA DA FIGURA DE ÓCULOS, e não há como
   evitar — a tela é estreita, o `cover` corta quase 20% de cada lado da
   arte (o que empurra as figuras para o centro) e o texto precisa do
   espaço. É a faixa de tablet, a menos usada das três, e quem manda ali é
   a legibilidade: o véu do CSS cobre a diferença.

   Se um dia isso incomodar, o caminho é uma terceira composição de arte
   para essa faixa, e não mais um ajuste de porcentagem. */
@media (min-width: 900px) and (max-width: 1200px) {
  #rn-site-wrapper .rn-hero__body { max-width: 54%; }
}

/* O NOME. É o maior texto do site inteiro, e vai em CAIXA ALTA — mesmo
   tratamento do nome no hero do site da Débora.

   O <span> do HTML quebra "Renan / Nicolini" em duas linhas SEMPRE, e não
   só quando falta largura. Empilhado, o nome ocupa metade da largura do
   bloco e sobra espaço para ele crescer; numa linha só, este corpo
   estouraria os 46% da coluna.

   O line-height .98 é apertado de propósito: em duas linhas de caps, o
   padrão de 1.14 abriria um vão que faz as duas palavras parecerem coisas
   separadas em vez de um nome.

   O letter-spacing negativo é da Sora em corpo grande — ela é desenhada
   com espaço confortável para texto de leitura, e em 5rem isso vira sopa
   de letras. */
#rn-site-wrapper .rn-hero__title {
  font-family: var(--rn-font-display);
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

/* O span aqui SÓ quebra a linha. A cor vem da .rn-bluetext, que está no H1
   inteiro — por isso ele não leva `color`, ao contrário do span dos
   títulos de seção, onde só a segunda linha é azul. */
#rn-site-wrapper .rn-hero__title > span:not(.rn-char):not(.rn-caret) {
  display: block;
}

/* Os cargos, numa pílula. A borda usa o azul de TEXTO (--rn-accent) e não
   o da logo: é um traço de 1px sobre preto, exatamente o caso em que o
   azul escuro desaparece. */
#rn-site-wrapper .rn-hero__tag {
  display: inline-block;
  padding: .5rem 1.1rem;
  border: 1px solid var(--rn-accent-line);
  border-radius: 999px;
  background: var(--rn-accent-dim);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rn-accent);
  margin-bottom: 2rem;
}

/* A FRASE PRINCIPAL. É um H2, e é o texto que a página realmente quer que
   se leia — o nome, acima, é assinatura.

   >>> ELA NÃO É CAIXA ALTA, E NÃO USA A FONTE DE TÍTULO. <<<

   São 58 caracteres. Em caps a frase ganharia ~15% de largura e, pior,
   perderia a FORMA DAS PALAVRAS — o desenho de altura variável (o "q" que
   desce, o "l" que sobe) é justamente o que permite ler uma frase comprida
   de relance, sem soletrar. Caixa alta transforma toda palavra num
   retângulo do mesmo tamanho.

   Pelo mesmo motivo ela fica na Manrope (a fonte de corpo, herdada) e não
   na Sora: a Sora é para blocos curtos de caps.

   O corpo é bem menor que o do nome — 1.9rem contra 5rem no desktop. A
   hierarquia do banner é: o nome domina, a frase explica. Igualar os dois
   faria os dois competirem e nenhum vencer.

   O DESTAQUE É INLINE (`color` num span, sem display:block): a frase é uma
   sentença só, e a quebra fica por conta da largura disponível. Marcá-la
   em duas linhas fixas separaria "quem decide consegue enxergar além" do
   "empresas crescem quando" que lhe dá sentido. */
#rn-site-wrapper .rn-hero__lead {
  font-size: clamp(1.15rem, 1.9vw, 1.9rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.012em;
  text-transform: none;
  max-width: 26ch;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

#rn-site-wrapper .rn-hero__lead > span {
  color: var(--rn-accent);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #rn-site-wrapper .rn-hero__lead > span {
    background-image: var(--rn-blue-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* O texto de apoio. Mais claro que o --rn-muted padrão: aqui o fundo é
   foto com véu, não preto chapado, e o cinza de leitura some. */
#rn-site-wrapper .rn-hero__desc {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.7;
  color: #C3C9D1;
  max-width: 52ch;
}

/* AS QUATRO PALAVRAS: Visão · Estratégia · Decisão · Crescimento.

   O separador é um ::before em cada item MENOS o primeiro, e não um
   caractere digitado entre eles. Assim, quando a lista quebra em duas
   linhas no celular, nenhum item começa com um ponto órfão pendurado. */
#rn-site-wrapper .rn-hero__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.1rem;
  margin-top: 2.6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rn-muted);
}

#rn-site-wrapper .rn-hero__pills li {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
}

#rn-site-wrapper .rn-hero__pills li + li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rn-accent);
  flex: none;
}


/* ==========================================================================
   2. BIG NUMBERS

   A faixa foi REFEITA. A primeira versão eram três colunas magras
   separadas por um fio, sob uma etiqueta solta — e lia como um rodapé do
   hero, não como uma seção. O problema não era o dado; era a ausência de
   moldura e de cabeçalho.

   O que mudou:
     . cabeçalho de verdade (título + texto de apoio), em duas colunas
     . cada número virou CARD, com etiqueta própria ("Faturamento")
     . o valor NÃO QUEBRA MAIS EM DUAS LINHAS (ver .rn-num__value)
   ========================================================================== */

/* --- O cabeçalho ---------------------------------------------------------
   Título à esquerda, texto de apoio à direita. Empilhado, ele ocuparia
   altura demais antes dos números, que são o assunto da seção.
   ----------------------------------------------------------------------- */
#rn-site-wrapper .rn-nums__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: end;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}

@media (min-width: 900px) {
  #rn-site-wrapper .rn-nums__head { grid-template-columns: 1.1fr .9fr; }
}

/* --- A grade -------------------------------------------------------------
   `auto-fit`: ela decide sozinha quantas colunas cabem, então acrescentar
   um quarto dado não exige mexer em CSS.

   O mínimo é 260px — a largura em que "+R$ 20 milhões" ainda cabe numa
   linha só no menor corpo da escala. Abaixo disso a grade desce para uma
   coluna, que é o comportamento certo no celular.
   ----------------------------------------------------------------------- */
#rn-site-wrapper .rn-nums__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Cada número agora é um CARD, e não uma coluna com um fio à esquerda.

   O fio funcionava quando a seção era um respiro entre o hero e a
   história; com cabeçalho próprio, ela virou uma seção de verdade e
   precisava de peso equivalente. O card é o mesmo desenho do resto do site
   (fundo de card, borda fina, raio) — o que também amarra esta faixa às
   outras, em vez de deixá-la como um bloco à parte.

   A barra azul do topo é um ::before, e não um `border-top`: assim ela
   pode receber o degradê da logo e ser mais grossa que a borda do card sem
   empurrar o conteúdo. */
#rn-site-wrapper .rn-num {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--rn-bg-card);
  border: 1px solid var(--rn-line);
  border-radius: var(--rn-radius);
  overflow: hidden;
  transition: border-color .35s ease, transform .35s ease;
}

#rn-site-wrapper .rn-num::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--rn-blue);
}

#rn-site-wrapper .rn-num:hover {
  border-color: var(--rn-accent-line);
  transform: translateY(-4px);
}

/* A etiqueta do card. Ela é o que permitiu ENCURTAR a descrição de baixo:
   antes era "em faturamento nos últimos dois anos" numa linha só de texto
   corrido, que quebrava feio; agora "Faturamento" está aqui em cima e
   embaixo sobra "nos últimos dois anos". */
#rn-site-wrapper .rn-num__kicker {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rn-muted);
  margin-bottom: 1rem;
}

/* O VALOR. Recebe o azul escovado pela classe .rn-bluetext no HTML.

   >>> O `white-space: nowrap` É O QUE IMPEDE A QUEBRA. <<<
   "+R$ 20 milhões" tem 14 caracteres e, no corpo antigo (2.7rem), pedia
   ~360px numa coluna de ~350px — ou seja, quebrava por um fio, e só
   DEPOIS que o contador chegava ao valor final. Durante a animação, com
   "+R$ 9", cabia. Por isso o defeito só aparecia no fim da contagem, que é
   o pior jeito de um defeito aparecer.

   Duas coisas resolvem juntas: o nowrap proíbe a quebra e o teto de 2.2rem
   garante que ele caiba sem precisar quebrar. Mexer só no nowrap faria o
   texto vazar para fora do card.

   SE UM DADO NOVO FOR MAIS LONGO que "+R$ 20 milhões", é o teto de 2.2rem
   que se baixa — não o nowrap que se tira. */
#rn-site-wrapper .rn-num__value {
  font-family: var(--rn-font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  white-space: nowrap;
  margin-bottom: .6rem;
}

/* A descrição cola no PÉ do card (margin-top: auto). É o que mantém os
   três cards fechando na mesma altura mesmo com descrições de tamanhos
   diferentes — "nos últimos dois anos" cabe em uma linha, "negócios e
   operações em dois mercados" quebra em duas.

   Sem o max-width, para o texto poder usar a largura inteira do card e
   quebrar o menos possível. */
#rn-site-wrapper .rn-num__label {
  margin-top: auto;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--rn-muted);
}


/* ==========================================================================
   3. HISTÓRIA & ORIGEM
   ========================================================================== */

#rn-site-wrapper .rn-historia__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 5vw, 4rem);
  align-items: start;
}

/* A foto entra como segunda coluna só a partir de 900px. Abaixo disso as
   duas viram uma coluna só. */
@media (min-width: 900px) {
  #rn-site-wrapper .rn-historia__top {
    grid-template-columns: 1.35fr .85fr;
  }
}

/* NO CELULAR A FOTO VAI PARA BAIXO DO TEXTO.

   Esta é uma seção de LEITURA: quem chega aqui está lendo a trajetória.
   Uma foto de ambiente antes do texto empurraria a primeira frase para
   fora da tela, e a pessoa teria de rolar para começar a ler o que veio
   ver.

   Feito com `order`, e não com duas cópias do HTML: duas cópias
   significariam manter o mesmo texto em dois lugares, e um dia um deles
   ficaria para trás. */
@media (max-width: 899px) {
  #rn-site-wrapper .rn-historia__texto { order: 1; }
  #rn-site-wrapper .rn-historia__foto  { order: 2; }
}

#rn-site-wrapper .rn-historia__texto .rn-title { margin-bottom: 1.6rem; }

/* A MOLDURA DA FOTO.

   >>> O aspect-ratio E O ARQUIVO ANDAM JUNTOS. <<< É 4/5 porque a foto
   definitiva (renan-sobre-foto-att.webp) é 800x1000 — que é 4/5 exato. O
   valor não precisou mudar quando a foto de banco (900x1125, também 4/5)
   saiu, mas isso foi coincidência de proporção, e não uma regra.

   Ao trocar por uma foto de outra proporção, mude ESTE VALOR também —
   senão a `object-fit: cover` corta a foto nova para caber num 4/5 que já
   não é o dela.

   E aqui isso custa caro: a foto é um RETRATO do Renan, não um ambiente.
   Numa foto de sala de reunião o corte tira uma cadeira; nesta, tira a
   cabeça. É a armadilha número um deste projeto — trocar o src, achar que
   acabou, e descobrir semanas depois que a testa está fora do quadro. */
#rn-site-wrapper .rn-historia__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--rn-radius);
  overflow: hidden;
  border: 1px solid var(--rn-line);
  background: var(--rn-bg-card);
}

#rn-site-wrapper .rn-historia__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* >>> AQUI HAVIA UM VÉU AZUL POR CIMA DA FOTO, E ELE FOI REMOVIDO. <<<

   Ele existia para harmonizar a imagem de banco com a paleta fria do site.
   Com a foto definitiva do Renan, ele deixou de fazer sentido: tingir de
   azul o rosto de quem o site apresenta é o oposto do que a seção quer.
   A foto entra crua.

   NÃO O RECOLOQUE "para amarrar com a paleta". Se uma foto futura destoar
   de cor, o lugar de resolver é o tratamento do arquivo, e não uma camada
   por cima — uma camada de cor não corrige uma foto, só a suja por igual.
   O mesmo vale para a foto da autoridade, mais abaixo, e para as seis da
   galeria da Mídia: os três véus saíram juntos, pelo mesmo motivo.

   O que segurou o desenho no lugar do véu foi a borda + o raio da moldura,
   que continuam logo acima. */

/* --- A LINHA DO TEMPO ----------------------------------------------------
   Quatro passos: "começou do zero" até "passou a investir e direcionar
   novos negócios".

   ELA FOI REFEITA. A primeira versão era um fio cinza fininho com quatro
   discos pequenos por cima, e tinha três defeitos:

     1. O FIO PASSAVA DIREITO PELO ÚLTIMO DISCO e ia morrer na borda
        direita da seção. Ele era um ::before do <ol> inteiro, com
        `left: 0; right: 0` — ou seja, ia de ponta a ponta do container,
        e não de disco a disco. Sobrava um traço de ~30% da largura depois
        do "04", apontando para nada.
     2. Os textos não alinhavam: o 4º quebra em duas linhas e os outros
        não, então cada um terminava numa altura.
     3. Não tinha peso nenhum. Era um rodapé da seção, não uma trajetória.

   O QUE MUDOU, e o porquê de cada coisa:

     . O TRAÇO AGORA É DE CADA ITEM, não do <ol>. Cada passo desenha o
       pedaço que vai do PRÓPRIO disco até o disco SEGUINTE, atravessando o
       gap. O último não desenha nada — é o `:not(:last-child)`. Assim é
       impossível sobrar traço no fim: não existe traço que não ligue dois
       discos.

     . OS DISCOS PROGRIDEM. Os três primeiros são vazados; o ÚLTIMO é
       preenchido com o degradê da logo e tem brilho. Isso não é enfeite: a
       copy é uma trajetória que sai do zero e chega ao hoje ("passou a
       investir e direcionar novos negócios"). O disco cheio é o AGORA. Sem
       isso, quatro discos iguais leem como quatro etapas de um processo,
       não como uma história com um destino.

     . O TRAÇO TAMBÉM PROGRIDE, de fraco para forte da esquerda para a
       direita, pelo mesmo motivo.

     . NO CELULAR ELA VIRA VERTICAL de verdade — disco à esquerda, texto à
       direita, traço descendo de um disco ao outro. Antes os itens só
       empilhavam soltos, sem nada ligando um ao outro, e a "linha do
       tempo" deixava de ser linha.
   ----------------------------------------------------------------------- */

/* O BLOCO INTEIRO (etiqueta + lista). A divisa em relação ao texto acima
   fica AQUI, e não na <ol>, para a etiqueta ficar do lado de dentro dela —
   se o traço estivesse na lista, a etiqueta ficaria pendurada acima da
   divisória, parecendo pertencer ao parágrafo anterior. */
#rn-site-wrapper .rn-linha-bloco {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.2rem, 4vw, 3rem);
  border-top: 1px solid var(--rn-line);
}

/* A etiqueta. Ela existe para o bloco não parecer um apêndice do texto que
   vem acima: a linha do tempo é outra coisa, e precisa de um rótulo que
   diga isso. */
#rn-site-wrapper .rn-linha__kicker {
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rn-muted);
}

#rn-site-wrapper .rn-linha {
  /* As duas medidas vivem em variáveis porque cada uma é usada em três
     contas diferentes (tamanho do disco, posição do traço, travessia do
     vão). Mudar o tamanho do disco num lugar só desalinharia o traço. */
  --rn-disco: 3rem;
  --rn-vao:   clamp(1.2rem, 2.6vw, 2.2rem);

  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;   /* no celular o espaço vem do padding do item, para o traço vertical não ter buraco */
}

/* --- CELULAR: vertical, disco à esquerda e texto à direita --------------- */

#rn-site-wrapper .rn-linha__passo {
  position: relative;
  display: grid;
  grid-template-columns: var(--rn-disco) 1fr;
  align-items: center;
  gap: 1.1rem;
  padding-bottom: 1.9rem;
}

#rn-site-wrapper .rn-linha__passo:last-child { padding-bottom: 0; }

/* --- O AZUL PROGRIDE DO 01 AO 04, E PARA NO 04 ---------------------------

   >>> ESTE É O PONTO DO DESENHO INTEIRO, E ELE DEPENDE DE UMA COISA SÓ:
   O FIM DE UM TRECHO SER O COMEÇO DO SEGUINTE. <<<

   A versão anterior dava a CADA trecho o mesmo degradê (forte → fraco).
   Cada um recomeçava do zero, então os três liam como traços soltos entre
   discos, não como um percurso. O olho via três coisas, não uma.

   Agora cada trecho tem duas paradas próprias, e elas se encadeiam:

       trecho 01→02 ...... .18  →  .42
       trecho 02→03 ...... .42  →  .70      (começa onde o anterior parou)
       trecho 03→04 ...... .70  → 1.00      (chega cheio no disco 04)

   Repare que o "até" de um é o "de" do próximo. Emendados, os três viram
   UMA rampa contínua que sai quase apagada no "começou do zero" e chega
   sólida no "passou a investir" — que é exatamente o que a copy conta.

   E ELA PARA NO 04: o `:not(:last-child)` faz o último passo não desenhar
   trecho nenhum. O azul chega no disco cheio e acaba ali, em vez de
   continuar para uma borda que não significa nada.

   >>> PARA MEXER NA INTENSIDADE: mude só estes seis números. <<< E mantenha
   o encadeamento — se o "até" de um deixar de bater com o "de" do
   seguinte, aparece um degrau visível na emenda, bem no meio do disco.

   SE ENTRAR UM QUINTO PASSO: acrescente uma linha nth-child(4) com
   `--rn-de: <o ate do 3>` e `--rn-ate: 1`, e baixe os valores dos
   anteriores para a rampa continuar repartida por igual.
   ----------------------------------------------------------------------- */

/* O --rn-aro é o aro do disco DAQUELE passo, e ele acompanha a mesma
   rampa: o disco fica tão forte quanto o azul que chega nele. Sem isso, o
   traço progrediria e os discos ficariam todos iguais — a progressão
   pareceria um defeito de renderização em vez de uma intenção. */
#rn-site-wrapper .rn-linha__passo:nth-child(1) { --rn-de: .18; --rn-ate: .42; --rn-aro: .28; }
#rn-site-wrapper .rn-linha__passo:nth-child(2) { --rn-de: .42; --rn-ate: .70; --rn-aro: .50; }
#rn-site-wrapper .rn-linha__passo:nth-child(3) { --rn-de: .70; --rn-ate: 1;   --rn-aro: .74; }

/* O traço vertical (celular): sai da base do disco e desce até o próximo.
   O `bottom: 0` casa exatamente com o topo do disco seguinte porque o
   padding-bottom do item é o vão entre eles. */
#rn-site-wrapper .rn-linha__passo:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(var(--rn-disco) / 2 - 1.5px);
  top: var(--rn-disco);
  bottom: 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg,
              rgba(99, 162, 219, var(--rn-de)),
              rgba(99, 162, 219, var(--rn-ate)));
}

/* --- DESKTOP: fileira de quatro, traço horizontal ------------------------ */

@media (min-width: 760px) {

  #rn-site-wrapper .rn-linha {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--rn-vao);
  }

  #rn-site-wrapper .rn-linha__passo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    padding-bottom: 0;
  }

  /* O traço horizontal. Ele começa logo depois do disco DESTE item e
     termina logo antes do disco do PRÓXIMO — por isso o `right` é o vão
     negativo: o item precisa "furar" a própria caixa para atravessar o gap
     da grade.

     Só a DIREÇÃO muda aqui (90deg no lugar de 180deg). As duas paradas
     continuam vindo das variáveis --rn-de / --rn-ate declaradas lá em
     cima, então a rampa encadeada vale nos dois layouts e existe num
     lugar só.

     O `:not(:last-child)` é o que faz o azul PARAR NO 04. Era exatamente
     esse o defeito da primeira versão: o traço era um ::before do <ol>
     inteiro e ia morrer na borda direita da seção, muito depois do último
     disco. */
  #rn-site-wrapper .rn-linha__passo:not(:last-child)::before {
    left: calc(var(--rn-disco) + .7rem);
    right: calc((var(--rn-vao) + .7rem) * -1);
    top: calc(var(--rn-disco) / 2 - 1.5px);
    bottom: auto;
    width: auto;
    height: 3px;
    background: linear-gradient(90deg,
                rgba(99, 162, 219, var(--rn-de)),
                rgba(99, 162, 219, var(--rn-ate)));
  }
}

/* --- O disco do número ---------------------------------------------------
   O `background` sólido é o que faz o traço "sumir por baixo" dele em vez
   de atravessá-lo.

   >>> POR ISSO ESTA SEÇÃO NÃO PODE VIRAR --soft SEM MEXER AQUI. <<< O
   fundo do disco é o --rn-bg (o preto da seção); numa faixa clara ele
   apareceria como um círculo escuro recortado. Se um dia a seção de
   história mudar de fundo, troque este valor junto.
   ----------------------------------------------------------------------- */
#rn-site-wrapper .rn-linha__num {
  position: relative;
  z-index: 1;                 /* acima do traço */
  flex: none;
  width: var(--rn-disco);
  height: var(--rn-disco);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--rn-bg);

  /* O aro acompanha a rampa (ver --rn-aro, acima). O `1.5px` em vez de 1px
     é para o aro do primeiro disco, que é o mais fraco, ainda se ver. */
  border: 1.5px solid rgba(99, 162, 219, var(--rn-aro, .3));

  font-family: var(--rn-font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;

  /* >>> O NÚMERO NÃO PROGRIDE JUNTO. <<< Ele fica no --rn-accent cheio nos
     três discos vazados, e só o ARO é que enfraquece.

     A tentação é apagar o "01" para reforçar o "começou do zero" — e é
     exatamente o erro que a etiqueta "em breve" do menu já custou uma vez
     neste projeto: apagar TEXTO por opacidade derruba o contraste e o
     torna ilegível. Progressão se faz com o que é decoração (o aro, o
     traço), nunca com o que é informação. */
  color: var(--rn-accent);
}

/* O ÚLTIMO DISCO É CHEIO — o "agora".

   A copy é uma trajetória com destino: "começou do zero" → "passou a
   investir e direcionar novos negócios". O quarto passo é o presente, e é
   ele que sustenta tudo que a página diz depois. Quatro discos iguais
   leriam como quatro etapas de um processo qualquer.

   O texto vira BRANCO aqui porque o fundo virou o degradê azul: o
   --rn-accent (azul claro) sobre azul escuro cairia para ~1,9:1. É a mesma
   inversão do botão primário. */
#rn-site-wrapper .rn-linha__passo:last-child .rn-linha__num {
  background: var(--rn-blue);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 6px 22px -6px rgba(47, 111, 178, .85);
}

#rn-site-wrapper .rn-linha__txt {
  font-family: var(--rn-font-display);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rn-text);
}

@media (min-width: 760px) {
  /* Reserva DUAS linhas de texto. "Passou a investir e direcionar novos
     negócios" quebra em duas; os outros três cabem em uma. Sem esta
     reserva, cada passo fecharia numa altura diferente e a fileira
     desmontaria — é a mesma armadilha dos cards, e o culpado é sempre o
     texto, nunca o alinhamento dos discos. */
  #rn-site-wrapper .rn-linha__txt {
    min-height: 2.7em;
    max-width: 20ch;
  }
}


/* ==========================================================================
   4. OS 4 PILARES
   ========================================================================== */

#rn-site-wrapper .rn-pilares .rn-title { margin-bottom: 1.2rem; }

#rn-site-wrapper .rn-pilares__sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 600;
  color: var(--rn-text);
  max-width: 46ch;
}

/* Quatro colunas no desktop, duas no tablet, uma no celular.

   Aqui a grade é EXPLÍCITA (repeat(4,1fr)) e não `auto-fit`, ao contrário
   da dos números. O motivo: são quatro pilares e sempre serão quatro — é
   uma estrutura fechada, não uma lista que cresce. Com `auto-fit`, uma
   tela de largura intermediária poderia dar 3 colunas + 1 sozinha
   embaixo, que é a pior forma possível de mostrar quatro itens de mesmo
   peso. */
#rn-site-wrapper .rn-pilares__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.4rem, 4.5vw, 3.5rem);
}

@media (min-width: 620px) {
  #rn-site-wrapper .rn-pilares__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  #rn-site-wrapper .rn-pilares__grid { grid-template-columns: repeat(4, 1fr); }
}

/* A frase de fecho da seção. */
#rn-site-wrapper .rn-frase {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  text-align: center;
  font-family: var(--rn-font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* O destaque fica inline (não `display: block`): a frase é uma sentença
   só, e quebrá-la em duas linhas fixas separaria "multiplica o caos" do
   "crescimento sem estrutura" que lhe dá sentido. */
#rn-site-wrapper .rn-frase > span { color: var(--rn-accent); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #rn-site-wrapper .rn-frase > span {
    background-image: var(--rn-blue-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}


/* ==========================================================================
   5. AUTORIDADE & RESULTADOS
   ========================================================================== */

/* As duas etiquetas soltas da copy. São marcadores, não cards: elas não
   têm texto próprio embaixo. */
#rn-site-wrapper .rn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.6rem;
}

#rn-site-wrapper .rn-tags li {
  padding: .45rem 1rem;
  border: 1px solid var(--rn-accent-line);
  border-radius: 999px;
  background: var(--rn-accent-dim);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rn-accent);
}

#rn-site-wrapper .rn-autoridade__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 4.5vw, 3.5rem);
  align-items: center;
  margin-top: clamp(2.2rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  #rn-site-wrapper .rn-autoridade__top {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mesmo critério da seção de história: no celular a foto vai para BAIXO do
   texto, porque o texto é o que a pessoa veio ler. */
@media (max-width: 899px) {
  #rn-site-wrapper .rn-autoridade__texto  { order: 1; }
  #rn-site-wrapper .rn-autoridade__banner { order: 2; }
}

/* O BANNER. É `position: relative` porque as fotos dentro dele são
   `position: absolute` (classe .rn-slide, no BLOCO 1) — é assim que a
   moldura manda na medida em vez de a foto mandar.

   >>> O aspect-ratio ACOMPANHA O ARQUIVO, E O ARQUIVO MUDOU. <<<
   Era 16/9, da foto de banco de imagem (1200x675). A foto definitiva
   (foto-autoridade-resultado-home.webp) é 960x465 — bem mais deitada, uma
   faixa de 2,06:1. Escrito como 960/465, e não como um "16/7,75"
   arredondado, o número diz de onde veio: é a medida do arquivo. Ao trocar
   a foto, ponha aqui a medida da nova.

   Com a proporção certa, nada é cortado — a faixa mostra a foto inteira.
   Um 16/9 aqui comeria as duas pontas do painel de indicadores. */
#rn-site-wrapper .rn-autoridade__banner {
  position: relative;
  aspect-ratio: 960 / 465;
  border-radius: var(--rn-radius);
  overflow: hidden;
  border: 1px solid var(--rn-line);
  background: var(--rn-bg-card);
}

/* >>> O VÉU AZUL DESTE BANNER TAMBÉM SAIU. <<< Mesmo motivo do véu da
   foto da história — ver o comentário lá em cima.

   ELE LEVAVA UM `z-index: 2`, e é bom saber por quê antes de escrever
   qualquer camada nova aqui: as fotos deste banner são `position:
   absolute` (a classe .rn-slide, do BLOCO 1, que existe para o dia em que
   isto virar carrossel). Uma camada sem z-index nasceria ATRÁS delas e não
   apareceria — o que parece "o CSS não pegou", mas é só ordem de pilha. */

/* Três cards em fileira. `auto-fit` aqui é seguro (ao contrário dos 4
   pilares) porque a lista pode crescer: se um quarto diferencial entrar,
   a grade se ajusta sozinha. */
#rn-site-wrapper .rn-autoridade__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.4rem, 4.5vw, 3.5rem);
}/* End custom CSS */