.elementor-46361 .elementor-element.elementor-element-a855219{--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-27660bc */#rn-site-wrapper .rn-abertura { text-align: center; }

#rn-site-wrapper .rn-abertura__titulo {
  max-width: 22ch;
  margin-inline: auto;
}

/* O .rn-lead do global tem `max-width: 62ch` e alinhamento à esquerda
   herdado. Aqui ele precisa centralizar, e o `margin-inline: auto` só
   funciona porque a largura máxima continua valendo — sem ela, o
   parágrafo ocuparia o container inteiro e "centralizar" não mudaria
   nada. */
#rn-site-wrapper .rn-abertura__txt {
  margin-inline: auto;
  margin-top: 1.6rem;
  max-width: 60ch;
}


/* ==========================================================================
   2. AS QUATRO SOLUÇÕES

   Cada solução é um bloco de duas colunas: a "trilha" (número, nome, frase
   de dor) e o corpo (título, texto, botão).

   NO DESKTOP a trilha fica à esquerda, mais estreita, e é ela que dá o
   ritmo de leitura vertical da página — os quatro números 01..04 formam
   uma coluna que se lê de relance.

   NO CELULAR tudo empilha, com a trilha em cima. Aqui ela NÃO vai para
   baixo (ao contrário das fotos da home): a trilha é o rótulo do bloco,
   e rótulo depois do conteúdo não rotula nada.
   ========================================================================== */

#rn-site-wrapper .rn-sol {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 3vw, 2.5rem);
  padding-block: clamp(2.4rem, 5vw, 4rem);
  border-top: 1px solid var(--rn-line);
}

/* O primeiro bloco não leva a linha de cima: ela separaria a primeira
   solução do título da seção, e não uma solução da outra. */
#rn-site-wrapper .rn-sol:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 900px) {
  #rn-site-wrapper .rn-sol {
    grid-template-columns: minmax(220px, .8fr) 1.6fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* --- A trilha ----------------------------------------------------------- */

#rn-site-wrapper .rn-sol__trilha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* O número grande. Ele é referência de posição, não informação — por isso
   o aria-hidden no HTML: um leitor de tela já anuncia a ordem pelo próprio
   fluxo dos blocos, e "zero um" antes de cada nome seria ruído.

   A opacidade baixa é segura AQUI (e não seria num link ou num rótulo)
   porque o número não precisa ser lido, só percebido. Ele é textura. */
#rn-site-wrapper .rn-sol__num {
  font-family: var(--rn-font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--rn-accent);
  opacity: .28;
  margin-bottom: .6rem;
}

#rn-site-wrapper .rn-sol__nome {
  font-family: var(--rn-font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rn-text);
  margin-bottom: 1.1rem;
}

/* --- A frase de dor ------------------------------------------------------
   É um <blockquote>: a copy a escreveu entre aspas, na voz do empresário.

   AS ASPAS VÊM DO CSS (::before e ::after), e não digitadas no texto. Duas
   razões: o texto pode mudar sem alguém lembrar de repor as aspas, e as
   aspas tipográficas corretas em português são « » ou " " — digitá-las à
   mão vira o `"` reto na primeira vez que o texto passa por um editor
   descuidado.

   Aspas em ::before/::after também NÃO são lidas por leitor de tela, o que
   é o comportamento certo: a marcação <blockquote> já diz que é citação.
   ----------------------------------------------------------------------- */
#rn-site-wrapper .rn-sol__dor {
  position: relative;
  padding-left: 1rem;
  border-left: 2px solid var(--rn-accent-line);
  font-size: .92rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--rn-muted);
  max-width: 34ch;
}

#rn-site-wrapper .rn-sol__dor::before { content: '\201C'; }   /* “ */
#rn-site-wrapper .rn-sol__dor::after  { content: '\201D'; }   /* ” */

/* --- O corpo ------------------------------------------------------------ */

/* O <h4> do título da solução. É h4 e não h3 porque o h3 já é o NOME dela,
   na trilha — a hierarquia do documento tem de bater com a leitura, e o
   nome vem antes.

   Visualmente, porém, este é o título maior dos dois. Isso é normal e
   correto: nível de cabeçalho é estrutura, tamanho é desenho. */
#rn-site-wrapper .rn-sol__titulo {
  font-family: var(--rn-font-display);
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

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

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #rn-site-wrapper .rn-sol__titulo > 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 .rn-btn-row do global vem com `margin-top: 2.4rem`, pensado para o
   hero. Dentro de uma solução isso abre um vão grande demais entre o
   último parágrafo e o botão — o botão parece de outro bloco. */
#rn-site-wrapper .rn-sol .rn-btn-row { margin-top: 1.8rem; }


/* ==========================================================================
   3. A JORNADA DE EVOLUÇÃO

   Quatro etapas. No celular empilham na vertical com uma seta ↓ entre
   elas; a partir de 900px viram uma fileira e a seta gira para →.

   AS SETAS SÃO ::after DO ITEM, e não caracteres no HTML. Assim a mesma
   marcação serve aos dois layouts (é o CSS que troca ↓ por →) e um leitor
   de tela não lê "seta para baixo" quatro vezes no meio da lista — a
   ordem já está dita pelo <ol>.
   ========================================================================== */

#rn-site-wrapper .rn-jornada__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.6rem;
  margin-top: clamp(2.4rem, 4.5vw, 3.5rem);
}

@media (min-width: 900px) {
  #rn-site-wrapper .rn-jornada__lista {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.2rem, 2.6vw, 2.4rem);
  }
}

#rn-site-wrapper .rn-jornada__item {
  position: relative;
  padding-top: 1.6rem;
  border-top: 2px solid var(--rn-accent-line);
}

/* A SETA. Fica no último item também? Não: o `:not(:last-child)` a tira do
   quarto, porque depois do "Expandir" não há para onde apontar. Uma seta
   ali prometeria um quinto passo. */
#rn-site-wrapper .rn-jornada__item:not(:last-child)::after {
  content: '↓';
  position: absolute;
  left: 0;
  bottom: -2rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--rn-accent);
  opacity: .7;
}

@media (min-width: 900px) {
  /* No desktop a seta vai para o lado direito do item, na altura da linha
     do topo, e vira "→". O -1.4rem a coloca no meio do gap entre as duas
     colunas. */
  #rn-site-wrapper .rn-jornada__item:not(:last-child)::after {
    content: '→';
    left: auto;
    right: -1.4rem;
    bottom: auto;
    top: -.75rem;
  }
}

#rn-site-wrapper .rn-jornada__num {
  display: block;
  font-family: var(--rn-font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--rn-accent);
  margin-bottom: .7rem;
}

/* O VERBO é o que a etapa faz: Ampliar, Evoluir, Estruturar, Expandir.
   É o maior texto do item porque é o que se lê de relance ao percorrer a
   fileira. */
#rn-site-wrapper .rn-jornada__verbo {
  font-family: var(--rn-font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rn-text);
  margin-bottom: .5rem;
}

/* O NOME DA SOLUÇÃO correspondente. Em azul, para amarrar visualmente com
   os nomes da seção anterior.

   >>> O min-height RESERVA DUAS LINHAS. <<< "Advisory Executivo" cabe em
   uma linha na fileira de 4 colunas; "Expansão & Oportunidades" quebra em
   duas. Sem esta reserva, o texto de baixo começa em alturas diferentes em
   cada coluna e a fileira desmonta.

   Esta é a mesma armadilha dos cards: quando três ou quatro blocos em
   fileira ficam desalinhados, o culpado quase nunca é a imagem — é um
   texto que quebra em duas linhas num e em uma no vizinho. */
#rn-site-wrapper .rn-jornada__nome {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rn-accent);
  margin-bottom: .6rem;
}

@media (min-width: 900px) {
  #rn-site-wrapper .rn-jornada__nome { min-height: 2.8em; }
}

#rn-site-wrapper .rn-jornada__txt {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--rn-muted);
}


/* ==========================================================================
   4. FECHO

   Bloco de largura inteira com foto de fundo, véu e texto centralizado.
   Ele marca o fim da página do mesmo jeito que o hero marcou o começo.

   Não usa .rn-section: o padding vertical é maior e o fundo é foto, não
   cor. Herdar o .rn-section daria o padding certo mas exigiria desfazer o
   `background` — mais linha do que escrever as três daqui.
   ========================================================================== */

#rn-site-wrapper .rn-fecho {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 48vh, 520px);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--rn-line);
  text-align: center;
}

/* >>> `top`, E NÃO UMA PORCENTAGEM. <<<
   Era "center 40%", calibrado para uma foto de banco em que o assunto
   estava no meio do quadro. A foto definitiva é outra coisa: o Renan de
   perfil, com a cabeça a 2% do topo — a mais colada das fotos do lote.

   A CONTA, que é a mesma do hero das páginas internas (ver o BLOCO 1):
   a faixa é MAIS BAIXA que a foto, então sobra altura para cortar, e a
   porcentagem decide de onde. Qualquer valor acima de zero come o topo —
   e o topo, aqui, é a cabeça. `top` ancora no alto e joga todo o corte
   para baixo, onde só há o cenário do palco.

   Isso não atrapalha o celular: lá a tela é estreita e a foto passa a
   cobrir pela ALTURA, sobrando largura em vez de altura. Aí quem manda é
   a metade horizontal do valor — o `center`, que continua ali. */
#rn-site-wrapper .rn-fecho__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* O véu aqui é VERTICAL e parelho nos dois lados, ao contrário do véu do
   hero (que é horizontal, para proteger só a coluna do texto). O motivo é
   simples: aqui o texto é centralizado e ocupa a largura toda, então não
   existe um "lado do texto" a proteger.

   >>> HAVIA UM SEGUNDO DEGRADÊ AQUI: UM RADIAL AZUL NO MEIO. <<<
   Ele acendia um halo azul no centro do bloco para amarrar a foto de banco
   à paleta. Saiu junto com os outros véus azuis do site — sobre a foto do
   Renan ele lia como uma luz de palco que não existe.

   NÃO O SUBSTITUA POR UM RADIAL PRETO. O radial CLAREAVA o centro; um
   preto no mesmo lugar faria o contrário — escureceria justamente onde o
   texto está, que é o único ponto do bloco que já tem contraste
   suficiente. Ficou só o degradê vertical, que é o que protege o texto. */
#rn-site-wrapper .rn-fecho::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,10,16,.90) 0%, rgba(6,10,16,.82) 50%, rgba(6,10,16,.93) 100%);
}

#rn-site-wrapper .rn-fecho__body {
  max-width: 46rem;
  margin-inline: auto;
}

/* O .rn-lead do global alinha à esquerda e tem largura máxima. Aqui ele
   precisa centralizar — e, como no bloco de abertura, o `margin-inline:
   auto` só surte efeito porque a largura máxima continua valendo. */
#rn-site-wrapper .rn-fecho__body .rn-lead {
  margin-inline: auto;
  margin-top: 1.6rem;
  color: #C3C9D1;    /* mais claro que o --rn-muted: o fundo aqui é foto */
}

#rn-site-wrapper .rn-fecho__body .rn-btn-row { justify-content: center; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a855219 */#rn-site-wrapper .rn-abertura { text-align: center; }

#rn-site-wrapper .rn-abertura__titulo {
  max-width: 22ch;
  margin-inline: auto;
}

/* O .rn-lead do global tem `max-width: 62ch` e alinhamento à esquerda
   herdado. Aqui ele precisa centralizar, e o `margin-inline: auto` só
   funciona porque a largura máxima continua valendo — sem ela, o
   parágrafo ocuparia o container inteiro e "centralizar" não mudaria
   nada. */
#rn-site-wrapper .rn-abertura__txt {
  margin-inline: auto;
  margin-top: 1.6rem;
  max-width: 60ch;
}


/* ==========================================================================
   2. AS QUATRO SOLUÇÕES

   Cada solução é um bloco de duas colunas: a "trilha" (número, nome, frase
   de dor) e o corpo (título, texto, botão).

   NO DESKTOP a trilha fica à esquerda, mais estreita, e é ela que dá o
   ritmo de leitura vertical da página — os quatro números 01..04 formam
   uma coluna que se lê de relance.

   NO CELULAR tudo empilha, com a trilha em cima. Aqui ela NÃO vai para
   baixo (ao contrário das fotos da home): a trilha é o rótulo do bloco,
   e rótulo depois do conteúdo não rotula nada.
   ========================================================================== */

#rn-site-wrapper .rn-sol {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.4rem, 3vw, 2.5rem);
  padding-block: clamp(2.4rem, 5vw, 4rem);
  border-top: 1px solid var(--rn-line);
}

/* O primeiro bloco não leva a linha de cima: ela separaria a primeira
   solução do título da seção, e não uma solução da outra. */
#rn-site-wrapper .rn-sol:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 900px) {
  #rn-site-wrapper .rn-sol {
    grid-template-columns: minmax(220px, .8fr) 1.6fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* --- A trilha ----------------------------------------------------------- */

#rn-site-wrapper .rn-sol__trilha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* O número grande. Ele é referência de posição, não informação — por isso
   o aria-hidden no HTML: um leitor de tela já anuncia a ordem pelo próprio
   fluxo dos blocos, e "zero um" antes de cada nome seria ruído.

   A opacidade baixa é segura AQUI (e não seria num link ou num rótulo)
   porque o número não precisa ser lido, só percebido. Ele é textura. */
#rn-site-wrapper .rn-sol__num {
  font-family: var(--rn-font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--rn-accent);
  opacity: .28;
  margin-bottom: .6rem;
}

#rn-site-wrapper .rn-sol__nome {
  font-family: var(--rn-font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rn-text);
  margin-bottom: 1.1rem;
}

/* --- A frase de dor ------------------------------------------------------
   É um <blockquote>: a copy a escreveu entre aspas, na voz do empresário.

   AS ASPAS VÊM DO CSS (::before e ::after), e não digitadas no texto. Duas
   razões: o texto pode mudar sem alguém lembrar de repor as aspas, e as
   aspas tipográficas corretas em português são « » ou " " — digitá-las à
   mão vira o `"` reto na primeira vez que o texto passa por um editor
   descuidado.

   Aspas em ::before/::after também NÃO são lidas por leitor de tela, o que
   é o comportamento certo: a marcação <blockquote> já diz que é citação.
   ----------------------------------------------------------------------- */
#rn-site-wrapper .rn-sol__dor {
  position: relative;
  padding-left: 1rem;
  border-left: 2px solid var(--rn-accent-line);
  font-size: .92rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--rn-muted);
  max-width: 34ch;
}

#rn-site-wrapper .rn-sol__dor::before { content: '\201C'; }   /* “ */
#rn-site-wrapper .rn-sol__dor::after  { content: '\201D'; }   /* ” */

/* --- O corpo ------------------------------------------------------------ */

/* O <h4> do título da solução. É h4 e não h3 porque o h3 já é o NOME dela,
   na trilha — a hierarquia do documento tem de bater com a leitura, e o
   nome vem antes.

   Visualmente, porém, este é o título maior dos dois. Isso é normal e
   correto: nível de cabeçalho é estrutura, tamanho é desenho. */
#rn-site-wrapper .rn-sol__titulo {
  font-family: var(--rn-font-display);
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

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

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #rn-site-wrapper .rn-sol__titulo > 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 .rn-btn-row do global vem com `margin-top: 2.4rem`, pensado para o
   hero. Dentro de uma solução isso abre um vão grande demais entre o
   último parágrafo e o botão — o botão parece de outro bloco. */
#rn-site-wrapper .rn-sol .rn-btn-row { margin-top: 1.8rem; }


/* ==========================================================================
   3. A JORNADA DE EVOLUÇÃO

   Quatro etapas. No celular empilham na vertical com uma seta ↓ entre
   elas; a partir de 900px viram uma fileira e a seta gira para →.

   AS SETAS SÃO ::after DO ITEM, e não caracteres no HTML. Assim a mesma
   marcação serve aos dois layouts (é o CSS que troca ↓ por →) e um leitor
   de tela não lê "seta para baixo" quatro vezes no meio da lista — a
   ordem já está dita pelo <ol>.
   ========================================================================== */

#rn-site-wrapper .rn-jornada__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.6rem;
  margin-top: clamp(2.4rem, 4.5vw, 3.5rem);
}

@media (min-width: 900px) {
  #rn-site-wrapper .rn-jornada__lista {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.2rem, 2.6vw, 2.4rem);
  }
}

#rn-site-wrapper .rn-jornada__item {
  position: relative;
  padding-top: 1.6rem;
  border-top: 2px solid var(--rn-accent-line);
}

/* A SETA. Fica no último item também? Não: o `:not(:last-child)` a tira do
   quarto, porque depois do "Expandir" não há para onde apontar. Uma seta
   ali prometeria um quinto passo. */
#rn-site-wrapper .rn-jornada__item:not(:last-child)::after {
  content: '↓';
  position: absolute;
  left: 0;
  bottom: -2rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--rn-accent);
  opacity: .7;
}

@media (min-width: 900px) {
  /* No desktop a seta vai para o lado direito do item, na altura da linha
     do topo, e vira "→". O -1.4rem a coloca no meio do gap entre as duas
     colunas. */
  #rn-site-wrapper .rn-jornada__item:not(:last-child)::after {
    content: '→';
    left: auto;
    right: -1.4rem;
    bottom: auto;
    top: -.75rem;
  }
}

#rn-site-wrapper .rn-jornada__num {
  display: block;
  font-family: var(--rn-font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--rn-accent);
  margin-bottom: .7rem;
}

/* O VERBO é o que a etapa faz: Ampliar, Evoluir, Estruturar, Expandir.
   É o maior texto do item porque é o que se lê de relance ao percorrer a
   fileira. */
#rn-site-wrapper .rn-jornada__verbo {
  font-family: var(--rn-font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--rn-text);
  margin-bottom: .5rem;
}

/* O NOME DA SOLUÇÃO correspondente. Em azul, para amarrar visualmente com
   os nomes da seção anterior.

   >>> O min-height RESERVA DUAS LINHAS. <<< "Advisory Executivo" cabe em
   uma linha na fileira de 4 colunas; "Expansão & Oportunidades" quebra em
   duas. Sem esta reserva, o texto de baixo começa em alturas diferentes em
   cada coluna e a fileira desmonta.

   Esta é a mesma armadilha dos cards: quando três ou quatro blocos em
   fileira ficam desalinhados, o culpado quase nunca é a imagem — é um
   texto que quebra em duas linhas num e em uma no vizinho. */
#rn-site-wrapper .rn-jornada__nome {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rn-accent);
  margin-bottom: .6rem;
}

@media (min-width: 900px) {
  #rn-site-wrapper .rn-jornada__nome { min-height: 2.8em; }
}

#rn-site-wrapper .rn-jornada__txt {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--rn-muted);
}


/* ==========================================================================
   4. FECHO

   Bloco de largura inteira com foto de fundo, véu e texto centralizado.
   Ele marca o fim da página do mesmo jeito que o hero marcou o começo.

   Não usa .rn-section: o padding vertical é maior e o fundo é foto, não
   cor. Herdar o .rn-section daria o padding certo mas exigiria desfazer o
   `background` — mais linha do que escrever as três daqui.
   ========================================================================== */

#rn-site-wrapper .rn-fecho {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 48vh, 520px);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--rn-line);
  text-align: center;
}

/* >>> `top`, E NÃO UMA PORCENTAGEM. <<<
   Era "center 40%", calibrado para uma foto de banco em que o assunto
   estava no meio do quadro. A foto definitiva é outra coisa: o Renan de
   perfil, com a cabeça a 2% do topo — a mais colada das fotos do lote.

   A CONTA, que é a mesma do hero das páginas internas (ver o BLOCO 1):
   a faixa é MAIS BAIXA que a foto, então sobra altura para cortar, e a
   porcentagem decide de onde. Qualquer valor acima de zero come o topo —
   e o topo, aqui, é a cabeça. `top` ancora no alto e joga todo o corte
   para baixo, onde só há o cenário do palco.

   Isso não atrapalha o celular: lá a tela é estreita e a foto passa a
   cobrir pela ALTURA, sobrando largura em vez de altura. Aí quem manda é
   a metade horizontal do valor — o `center`, que continua ali. */
#rn-site-wrapper .rn-fecho__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* O véu aqui é VERTICAL e parelho nos dois lados, ao contrário do véu do
   hero (que é horizontal, para proteger só a coluna do texto). O motivo é
   simples: aqui o texto é centralizado e ocupa a largura toda, então não
   existe um "lado do texto" a proteger.

   O radial no meio dá o brilho azul que amarra a foto de banco à paleta. */
#rn-site-wrapper .rn-fecho::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,10,16,.90) 0%, rgba(6,10,16,.82) 50%, rgba(6,10,16,.93) 100%),
    radial-gradient(ellipse at 50% 50%, rgba(47,111,178,.28), transparent 62%);
}

#rn-site-wrapper .rn-fecho__body {
  max-width: 46rem;
  margin-inline: auto;
}

/* O .rn-lead do global alinha à esquerda e tem largura máxima. Aqui ele
   precisa centralizar — e, como no bloco de abertura, o `margin-inline:
   auto` só surte efeito porque a largura máxima continua valendo. */
#rn-site-wrapper .rn-fecho__body .rn-lead {
  margin-inline: auto;
  margin-top: 1.6rem;
  color: #C3C9D1;    /* mais claro que o --rn-muted: o fundo aqui é foto */
}

#rn-site-wrapper .rn-fecho__body .rn-btn-row { justify-content: center; }/* End custom CSS */