.elementor-46377 .elementor-element.elementor-element-1973413{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-46377 .elementor-element.elementor-element-faffda6{width:100%;max-width:100%;}/* Start custom CSS for html, class: .elementor-element-faffda6 */#rn-site-wrapper .rn-contato__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.4rem, 5vw, 4rem);
  align-items: start;
}

/* O formulário ganha um pouco mais de largura que o texto: ele tem campos
   de entrada, e campo estreito é campo desconfortável de preencher. */
@media (min-width: 960px) {
  #rn-site-wrapper .rn-contato__grid {
    grid-template-columns: 1fr 1.15fr;
  }
}

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

/* >>> ESTA REGRA ESTÁ SEM USO NO HTML, E É DE PROPÓSITO. <<<
   Ela vestia o aviso de pendência do número do WhatsApp, que saiu quando o
   número real entrou. Fica aqui porque é o par de .rn-todo nesta coluna: a
   .rn-todo pinta o texto de azul e o botão primário já tem fundo azul, então
   todo aviso de pendência daqui tem de morar num parágrafo AO LADO do botão,
   nunca dentro dele — e este parágrafo é o formato desse aviso.

   São 5 linhas. Se um dia outra pendência aparecer nesta coluna, é só
   escrever <p class="rn-aviso rn-todo"> e ela já nasce certa. */
#rn-site-wrapper .rn-aviso {
  margin-top: 1.2rem;
  font-size: .82rem;
  line-height: 1.55;
  max-width: 46ch;
}


/* ==========================================================================
   2. A CAIXA DO FORMULÁRIO
   ========================================================================== */

#rn-site-wrapper .rn-formbox {
  background: var(--rn-bg-card);
  border: 1px solid var(--rn-line);
  border-radius: var(--rn-radius);
  padding: clamp(1.4rem, 2.6vw, 2rem);

  /* O header é sticky. Sem esta linha, uma âncora que aponte para
     #formulario levaria o topo da caixa para exatamente debaixo do
     cabeçalho, e o título ficaria escondido. O `calc` desconta a altura do
     header mais um respiro.

     Ela está aqui mesmo sem nenhuma âncora apontar para cá hoje: é barata,
     e o dia em que alguém puser um botão "ir para o formulário" numa outra
     seção, funciona sozinha. */
  scroll-margin-top: calc(var(--rn-header-h) + 1.5rem);
}

#rn-site-wrapper .rn-formbox__head {
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rn-line);
}

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

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

/* --- A MOLDURA DO IFRAME -------------------------------------------------

   >>> NÃO PONHA height NEM min-height AQUI. <<<

   Esta é a armadilha do embed do GoHighLevel, e ela é silenciosa: o
   form_embed.js mede o formulário por dentro e escreve a altura em pixels
   NO ATRIBUTO style DO IFRAME. Um `min-height` no CSS vence essa conta
   (porque min-height ganha de height) e o formulário fica travado numa
   altura que não é a dele — normalmente com o botão de enviar cortado,
   que é o pior lugar possível para cortar.

   A altura de partida (680px) está no atributo style do iframe, no HTML, e
   é lá que ela deve ficar: assim o script pode sobrescrevê-la.

   O `overflow: hidden` existe só para o border-radius recortar o canto do
   iframe. Ele não interfere na medição.
   ----------------------------------------------------------------------- */
/* >>> ESTA MOLDURA NÃO TEM COR DE FUNDO, E ISSO É UMA CORREÇÃO. <<<

   Havia aqui um `background: #FFFFFF`, com o comentário "o formulário do
   GHL é claro: evita um flash preto ao carregar". Estava errado por dois
   motivos, e o segundo é o que importa:

     1. A premissa era um PALPITE. Ninguém tinha olhado o formulário — eu
        supus que ele viria claro.

     2. E, mesmo que viesse, a decisão não era daqui. O fundo do formulário
        se configura no GoHighLevel, e neste ele está TRANSPARENTE. Um
        iframe transparente deixa ver o que está atrás dele — então o meu
        branco virava o fundo do formulário, por cima da configuração feita
        no CRM.

   >>> A REGRA GERAL: o CSS daqui não atravessa a borda do iframe, mas o
   que fica ATRÁS dele atravessa de volta. <<< Pintar o container é uma
   forma indireta de decidir a aparência de um conteúdo que não é nosso —
   e que alguém já decidiu, noutro lugar. Se o formulário precisar de outra
   cor, o lugar é o painel do GoHighLevel.

   O QUE SOBROU AQUI, e cada coisa tem função:

     `overflow: hidden`  é o que faz o border-radius recortar o canto do
                         iframe. Não interfere na medição da altura.

     `line-height: 0`    mata o espaço fantasma embaixo do iframe. Iframe é
                         inline por natureza, e todo elemento inline reserva
                         a descida da linha de base — uns 4px de faixa que
                         aparecem como um risco da cor do card no pé da
                         moldura. O `display: block` no iframe (logo abaixo)
                         já resolve; este é o cinto além do suspensório, e é
                         como está no projeto da Débora, onde o formulário
                         sempre saiu certo.

   SEM COR AQUI, durante o carregamento aparece o fundo do .rn-formbox — o
   --rn-bg-card, que é a cor do próprio card. Ou seja: nada pisca, porque
   não há troca de cor nenhuma. */
#rn-site-wrapper .rn-formbox__frame {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}

/* Trava de segurança: garante que o iframe ocupe a largura da caixa mesmo
   se algum tema declarar largura em iframes. A ALTURA continua sendo do
   atributo style — repare que ela NÃO aparece aqui. */
#rn-site-wrapper .rn-formbox__frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* >>> SEM USO NO HTML HOJE, E FICA PELO MESMO MOTIVO DA .rn-aviso. <<<
   Ela vestia o aviso de que o ID do formulário ainda era um marcador, e o
   aviso saiu quando o ID real entrou (JTtPX3QgopxWai7M31c9).

   Sobrevive porque é o formato do aviso DESTA coluna: qualquer pendência
   que apareça aqui — um formulário fora do ar, uma troca em andamento —
   escreve-se como <p class="rn-formbox__aviso rn-todo"> e já nasce certa,
   logo abaixo do quadro e no corpo menor que ele pede. */
#rn-site-wrapper .rn-formbox__aviso {
  margin-top: 1rem;
  font-size: .8rem;
  line-height: 1.55;
}


/* ==========================================================================
   3. CANAIS

   >>> ESTAS REGRAS SÃO UMA CÓPIA DAS DO MIDIA-CSS.html. <<<

   As duas páginas usam o mesmo card de canal, mas cada CSS de página só
   carrega na sua própria página — o de MÍDIA não vale aqui. Então ou o
   .rn-canal vai para o BLOCO 1 (que TODA página baixa, inclusive as que
   não têm canal nenhum), ou ele é escrito duas vezes.

   Com DOIS lugares, a cópia ainda é mais barata: são ~60 linhas que não
   pesam no arquivo global. SE UM TERCEIRO LUGAR PRECISAR DELA, mova para o
   global e apague as duas cópias — a partir de três, manter cópias em
   sincronia passa a custar mais do que o peso.

   >>> SE VOCÊ MEXER NO CARD DE CANAL, MEXA NOS DOIS ARQUIVOS. <<<
   ========================================================================== */

#rn-site-wrapper .rn-canais__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);
}

/* O card é um <a> inteiro, e não uma div com link dentro: assim a área
   clicável é o card todo e o leitor de tela anuncia UM link.

   Coluna flex para o texto de apoio poder colar no pé (margin-top: auto),
   que é o que mantém os três cards fechando na mesma altura mesmo com
   textos de comprimentos diferentes. */
#rn-site-wrapper .rn-canal {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--rn-bg-card);
  border: 1px solid var(--rn-line);
  border-radius: var(--rn-radius);
  transition: border-color .4s ease, background-color .4s ease,
              transform .4s ease, box-shadow .4s ease;
}

#rn-site-wrapper .rn-canal:hover {
  border-color: var(--rn-accent-line);
  transform: translateY(-6px);
  box-shadow: 0 22px 50px -22px rgba(0,0,0,.9);
}

#rn-site-wrapper .rn-canal__label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rn-muted);
  margin-bottom: .45rem;
}

/* O `word-break: break-word` existe por causa do @ do YouTube:
   "@Renan.Nicolini" não tem espaço, e num card estreito ele vazaria para
   fora da caixa em vez de quebrar. */
#rn-site-wrapper .rn-canal__handle {
  font-family: var(--rn-font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--rn-text);
  word-break: break-word;
  margin-bottom: .8rem;
  transition: color .3s ease;
}

#rn-site-wrapper .rn-canal:hover .rn-canal__handle { color: var(--rn-accent); }

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

/* A chamada do pé. O `margin-top: auto` a empurra para o fundo do card, e é
   isso que faz os quatro terminarem na mesma linha mesmo com descrições de
   tamanhos diferentes. Ela também diz o que vai acontecer ao clicar —
   "seguir", "assistir" e "conhecer" são três coisas diferentes, e uma seta
   sozinha diria só "vai para algum lugar". */
#rn-site-wrapper .rn-canal__go {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rn-accent);
  transition: transform .3s ease;
}

#rn-site-wrapper .rn-canal:hover .rn-canal__go { transform: translateX(3px); }/* End custom CSS */