/* ---------------------------------------------------------------------------
   Tipografia padrao da pagina publica — 28/07/2026

   Os textos de mesmo nivel na home vinham em QUATRO tamanhos diferentes, o que
   dava a impressao de desalinho entre os cartoes:

       descricao do plano ....... 0,66rem
       titulo do recurso ........ 0,72rem   (menor que o proprio paragrafo!)
       descricao do recurso ..... 0,76rem
       item do plano ............ 0,78rem

   O tamanho de referencia passa a ser o do ITEM DO PLANO (0,78rem), que ja era
   o mais legivel dos quatro. Titulo de cartao continua se distinguindo pelo
   peso e pela cor, nao pelo corpo — e nao pode ser menor que o texto que ele
   encabeca.

   Esta folha e carregada por ULTIMO de proposito: os tamanhos originais vem de
   clamp() com !important espalhados por
   system-palette-audit-final-20260721.css e outras, e so o fim da cascata
   vence sem precisar caçar cada origem.
   --------------------------------------------------------------------------- */

:root {
  --rl-corpo-publico: .78rem;   /* 12,5px — texto corrido, cards, rodape */
  --rl-botao-publico: 13px;     /* TODOS os botoes e a navegacao.
                                   Em px, nao em rem: o CMS grava os rotulos em
                                   px, e .81rem dava 12,96 — um fio de
                                   diferenca contra os 13px dos botoes de
                                   plano, o bastante para nao baterem. */
}

/* ---------------------------------------------------------------------------
   Escala unica da pagina publica (29/07/2026)

   A home tinha QUINZE tamanhos de fonte e DUAS familias. O que se unificou:

     botoes ...... Entrar 13,8 / Assinar agora 13 / Receber 12  -> 13px
     navegacao ... 13,8px                                       -> 13px
     rodape ...... 11,2px, menor que o texto dos cards          -> 12,5px
     familia ..... "R$" e "/mês" saiam em system-ui             -> Inter

   Os titulos de secao foram igualados no index.php, onde o CMS guarda o
   tamanho de cada um; nao da para faze-lo daqui porque o estilo vem embutido
   no elemento com !important.

   Continuam distintos de proposito, por serem outro nivel de hierarquia:
   o titulo do herói, o preco e o nome do plano.
   --------------------------------------------------------------------------- */

/* Titulos de secao no mesmo corpo.
   "Recursos" (40px), "Planos e Assinaturas" (43,2px) e "Organize sua escrita
   criativa!" (57,6px) sao o mesmo nivel de hierarquia e apareciam em tres
   tamanhos. Eles nao passam pelo sistema de estilos do CMS — nao tem
   data-style-key —, entao quem decide e esta folha. */
html body.rl-public .rl-benefits h2,
html body.rl-public .rl-plans h2,
html body.rl-public .rl-cta h2,
html body.rl-public .rl-cta-showcase h3 {
  font-size: 2.5rem !important;
  line-height: 1.14 !important;
}

/* Uma familia so. O system-ui aparecia apenas no "R$" e no "/mês" do preco,
   destoando dos algarismos ao lado. */
html body.rl-public .rl-price sup,
html body.rl-public .rl-price small {
  font-family: inherit !important;
}

/* Todos os botoes com o mesmo corpo. */
/* Inclui os filhos: varios botoes trazem o rotulo dentro de um <span> ligado
   ao CMS, e so o botao mudava de tamanho. */
html body.rl-public .rl-btn,
html body.rl-public .rl-btn *,
html body.rl-public .rl-plan .rl-btn,
html body.rl-public .rl-newsletter button,
html body.rl-public .rl-newsletter button *,
html body.rl-public .rl-header-actions .rl-btn {
  font-size: var(--rl-botao-publico) !important;
}

html body.rl-public .rl-nav {
  font-size: var(--rl-botao-publico) !important;
}

/* O rodape usava 11,2px — menor que o texto dos cards, sem motivo. */
html body.rl-public .rl-footer-column a,
html body.rl-public .rl-footer-brand p,
html body.rl-public .rl-newsletter p,
html body.rl-public .rl-footer-bottom,
html body.rl-public .rl-footer-bottom a {
  font-size: var(--rl-corpo-publico) !important;
}

/* Titulos de coluna do rodape: mesma familia de rotulo curto usada nas
   secoes, um degrau abaixo do corpo por serem etiqueta, nao leitura. */
html body.rl-public .rl-footer-column h4 {
  font-size: var(--rl-corpo-publico) !important;
}

/* BUG pre-existente (afeta index.php e faq.php igualmente): uma regra de
   system-palette-audit-final-20260721.css pinta TODO h1/h2/h3/h4 da area
   publica com a tinta escura dos titulos sobre fundo claro — inclusive o
   titulo do rodape, que fica sobre fundo verde escuro. Resultado: "PLATAFORMA",
   "REDES SOCIAIS" e "NEWSLETTER" ficavam quase invisiveis (cor #26332d sobre
   fundo #223729). Aqui devolve a cor clara que os links do rodape ja usam. */
html body.rl-public .rl-footer-column h4 {
  color: var(--system-sidebar-text, #f7fbf9) !important;
}

/* Cartoes de recursos ----------------------------------------------------- */
html body.rl-public .rl-benefit h3 {
  font-size: var(--rl-corpo-publico) !important;
  line-height: 1.35 !important;
}

html body.rl-public .rl-benefit p {
  font-size: var(--rl-corpo-publico) !important;
  line-height: 1.6 !important;
}

/* Cartoes de planos ------------------------------------------------------- */
html body.rl-public .rl-plan-subtitle {
  font-size: var(--rl-corpo-publico) !important;
  line-height: 1.45 !important;
}

html body.rl-public .rl-plan li {
  font-size: var(--rl-corpo-publico) !important;
  line-height: 1.45 !important;
}

/* A altura minima do subtitulo foi calculada para 0,66rem; com o corpo maior,
   duas linhas passavam a encostar no preco. */
html body.rl-public .rl-plan-subtitle {
  min-height: 54px;
}

/* O subtitulo do plano estava com white-space:nowrap. Sendo uma FRASE, ele nao
   podia quebrar linha e obrigava a coluna a ter a largura da frase inteira: por
   isso as quatro colunas nasciam desiguais (319/319/283/288px) mesmo antes
   desta padronizacao. Com o corpo maior a frase cresceu e o quarto plano passou
   48px para fora da tela, criando rolagem horizontal na home.
   Deixar a frase quebrar — e permitir que a coluna encolha — resolve as duas
   coisas: sem rolagem lateral e com os quatro cartoes do mesmo tamanho. */
html body.rl-public .rl-plan-subtitle {
  white-space: normal !important;
}

/* min-width:0 e o que autoriza uma coluna "1fr" a ficar menor que o conteudo;
   sem isso a grade estoura o container em vez de encolher. */
html body.rl-public .rl-plan,
html body.rl-public .rl-benefit {
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   Ritmo vertical entre as secoes (29/07/2026)

   As secoes se encostam e o respiro vem do padding de cada uma. Medindo de
   CONTEUDO a CONTEUDO — que e o que o olho le, nao a caixa da secao — o
   intervalo variava muito:

       herói    -> Recursos ....  74px
       Recursos -> Planos ......  121px
       Planos   -> imagem/CTA ..  111px
       imagem   -> rodapé ......  91px

   O primeiro vao era quase a metade do segundo, e o rodape ficava colado na
   imagem do painel. Os valores abaixo levam os quatro para perto de 100px.
   Nao sao todos iguais no padding porque as margens internas de cada secao
   somam quantidades diferentes: o que se igualou foi o espaco VISIVEL.

   O !important nao e enfeite: brand-layout-v2-20260712.css fixa
   "padding: 34px 0 !important" no herói, e sem ele nada aqui vale.
   --------------------------------------------------------------------------- */
html body.rl-public .rl-hero    { padding-bottom: 58px !important; }
html body.rl-public .rl-benefits{ padding-top: 42px !important; padding-bottom: 32px !important; }
html body.rl-public .rl-plans   { padding-top: 32px !important; padding-bottom: 36px !important; }
html body.rl-public .rl-cta     { padding-top: 38px !important; padding-bottom: 42px !important; }
html body.rl-public .rl-footer  { padding-top: 58px !important; }

/* Os cartoes de plano tinham min-height:610px enquanto o mais cheio (Brochura,
   6 itens) precisava de 422px — sobravam 250px de vazio entre a lista e o
   botao no cartao mais enxuto.

   Nao se troca por outra altura fixa: vai entrar mais texto nos planos, e
   qualquer numero cravado hoje ou corta amanha ou volta a sobrar. Sem
   min-height, a grade estica os quatro ate a altura do mais cheio (e o que o
   grid faz por padrao) e o conjunto cresce junto quando o texto crescer.
   O botao segue colado no rodape do cartao pelo margin-top:auto que ja havia. */
html body.rl-public .rl-plan {
  min-height: 0;
}

/* ---------------------------------------------------------------------------
   Rodape (29/07/2026)
   --------------------------------------------------------------------------- */

/* O botao flutuante do WhatsApp fica a 37px da borda e ocupa 54px — ou seja,
   dos 91px finais da tela. "Termos de Uso" e "Politica de Privacidade"
   terminavam a 51px da borda, e o botao passava por cima. Aqui se reserva a
   faixa dele. So a partir de 760px: abaixo disso o rodape empilha e nao ha
   colisao. */
@media (min-width: 761px) {
  html body.rl-public .rl-footer-bottom .rl-legal {
    padding-right: 78px;
  }
}

/* A coluna de redes sociais herda o titulo das outras colunas. Os icones
   vinham centralizados (do tempo em que ficavam sob o logotipo) enquanto o
   titulo "Redes sociais" alinha a esquerda — um saia da linha do outro.
   Agora comecam no mesmo ponto do titulo. */
html body.rl-public .rl-footer-socials-column .rl-footer-socials {
  margin-top: 0 !important;
  justify-content: flex-start !important;
}

/* O logotipo do rodape alinhava pelo topo da coluna, acima da linha dos
   titulos das outras colunas. Centralizado na coluna e descido um pouco,
   ele fica na mesma faixa visual do resto do rodape. */
html body.rl-public .rl-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 14px;
}

/* O titulo do bloco "Organize sua escrita criativa!" quebrava depois de
   "escrita" quando estava em 57,6px. Ao igualar os titulos de secao em 40px
   coube mais texto na primeira linha e a quebra mudou de lugar. A largura
   maxima devolve a quebra ao ponto de antes. */
html body.rl-public .rl-cta-showcase h3 {
  max-width: 12ch;
}

/* O bloco "Organize sua escrita criativa!" era uma caixa branca com sombra
   sobre uma secao de fundo #fbfdfc — quase da mesma cor. O resultado era um
   retangulo claro visivel atras do texto, sem separar nada de fato. Sem fundo
   e sem sombra, a imagem do painel e a chamada ficam sobre a propria pagina. */
html body.rl-public .rl-cta-showcase {
  background: transparent !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   Assinatura da marca no cabecalho e no rodape (28/07/2026)
   --------------------------------------------------------------------------- */

/* O logo do rodape era um PNG QUADRADO de 1024x1024 (925 KB) exibido a 110px.
   A assinatura nova e horizontal (4:1): mantida a largura de 110px ela ficaria
   com 27px de altura, ilegivel. A largura passa a acompanhar a coluna da marca. */
html body.rl-public .rl-footer .rl-footer-logo-new {
  width: min(230px, 100%) !important;
  height: auto !important;
}

/* A assinatura JA e branca. O filtro de inversao existe para escurecer logos
   claros sobre fundo claro (ou o contrario) e, aplicado aqui, comia o
   contorno das letras. */
html body.rl-public .rl-header .rl-logo-wordmark,
html body.rl-public .rl-footer .rl-logo-wordmark,
html body.rl-public .rl-footer .rl-footer-logo-new {
  filter: none !important;
}