/* ==========================================================================
   IgrejaPrime — site de vendas
   Um arquivo só, escrito à mão, sem build.

   O protótipo do agente de design era 100% estilo em linha (~500 atributos `style=`). Nenhum deles
   sobrevive aqui: a CSP do site não tem `'unsafe-inline'` em `style-src`, então um `style=`
   esquecido é ignorado PELO NAVEGADOR EM SILÊNCIO — sem erro no console. Se algo parecer sem
   estilo, procure um `style=` remanescente antes de procurar erro no CSS.

   Ordem: fontes · variáveis · reset · layout · cabeçalho · componentes · utilitários · responsivo ·
   movimento reduzido.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. fontes */
/*
   Plus Jakarta Sans é uma fonte VARIÁVEL: um único arquivo por subset cobre os pesos 200 a 800.
   São 49 KB no total, contra ~240 KB se fossem cinco arquivos estáticos por subset.

   Auto-hospedada em vez do CDN do Google porque o LCP é critério de ranqueamento: o CDN custa
   resolução de DNS + handshake TLS com um terceiro antes que a primeira letra apareça.

   `latin-ext` fica declarado mas raramente é baixado — o `unicode-range` faz o navegador só buscá-lo
   se um caractere daquela faixa aparecer na página. Os acentos do português (á ã ç ê õ) estão todos
   em `latin`.
*/
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fontes/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fontes/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- 2. variáveis */
:root {
  /* A paleta é a MESMA do sistema (app.igrejaprime.com.br), para site e produto parecerem um só. */
  --roxo: #403e69;
  --roxo-escuro: #38355d;
  --roxo-claro: #4c4a86;
  --dourado: #c79a3f;
  --dourado-claro: #d8ab52;
  --dourado-escuro: #bd8f36;

  --fundo: #f4f3ef;
  --branco: #fff;
  --borda: #eceae3;
  --texto: #211f33;
  --texto-fraco: #87859a;
  /* Bege quase branco, um passo acima do fundo da página. Separa um bloco de dentro do cartão sem
     acrescentar borda nem sombra — é o fundo dos destaques de módulo e do `<th>` das tabelas. */
  --tinta-suave: #faf9f6;

  /*
     Hierarquia de botão: ROXO age, DOURADO converte.
     O dourado leva texto escuro, nunca branco — branco sobre #bd8f36 dá 3,1:1 de contraste e
     reprova no WCAG AA para texto normal. Com #211f33 sobe para 5,1:1.
  */
  --grad-roxo: linear-gradient(140deg, var(--roxo-claro), var(--roxo-escuro));
  --grad-roxo-hover: linear-gradient(140deg, var(--roxo), #302d50);
  --grad-dourado: linear-gradient(140deg, var(--dourado-claro), var(--dourado-escuro));
  --grad-dourado-hover: linear-gradient(140deg, var(--dourado), #a87d2c);

  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  --sombra-1: 0 1px 2px rgba(33, 31, 51, .04);
  --sombra-2: 0 12px 30px rgba(33, 31, 51, .07);
  --sombra-3: 0 24px 48px rgba(33, 31, 51, .12);
  --sombra-roxa: 0 12px 28px rgba(64, 62, 105, .28);
  --sombra-dourada: 0 12px 28px rgba(189, 143, 54, .3);

  --transicao: .2s cubic-bezier(.4, 0, .2, 1);

  /* O check branco das listas. Vira token porque duas listas o usam (`.lista-check` e o
     `--rica` da home) e um SVG embutido copiado em dois lugares diverge no primeiro ajuste. */
  --check-branco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- 3. reset */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* A página não rola — quem rola é o painel central. Desmontado abaixo de 1024px. */
  overflow: hidden;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/*
   ⚠️⚠️ O `hidden` DO HTML SÓ FUNCIONA ENQUANTO NINGUÉM DECLARAR UM `display` PARA O ELEMENTO.

   Quem esconde o `[hidden]` é a folha do NAVEGADOR, e qualquer regra de autor a vence — inclusive
   um `display: flex` escrito para outra coisa. O elemento continua na tela com o atributo posto,
   sem erro, sem aviso, e o JavaScript que o pôs ali parece não ter rodado.

   Isto já mordeu TRÊS VEZES neste arquivo. O filtro do blog (`.bl-artigo` é `flex`, `.bl-destaque`
   e o `.cta-modulos` do meio são `grid`) marcava o botão e trocava o contador **sem esconder um
   cartão sequer** — filtrava tudo, menos o que importa. Antes dele, o menu de compartilhar do
   artigo (`.partilha-menu`, `flex`) nascia ABERTO ao carregar a página. As duas tinham ganhado
   remendo próprio — `.subir[hidden]` e `.partilha-menu[hidden]` —, e os dois saíram: um remendo por
   componente trata o sintoma e deixa o próximo `display` novo cair no mesmo buraco.

   Esta regra resolve a família inteira, e o `!important` é obrigatório: `[hidden]` tem a mesma
   especificidade de uma classe, então sem ele perderia para todo `.classe { display: … }` que
   viesse depois — que é justamente o caso de todos os que quebraram.
*/
[hidden] { display: none !important; }

a { color: var(--roxo-claro); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--roxo-escuro); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

button { font: inherit; color: inherit; }

::selection { background: rgba(64, 62, 105, .16); color: var(--texto); }

:focus-visible {
  outline: 2px solid var(--roxo-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

/*
   Barra de rolagem fina, não invisível.
   O protótipo escondia a barra (`::-webkit-scrollbar{width:0}`). Some o ruído visual e some também
   a única pista de que há mais conteúdo abaixo — num painel que rola por dentro, isso faz o
   visitante achar que a seção acabou.
*/
.painel { scrollbar-width: thin; scrollbar-color: #d8d5cc transparent; }
.painel::-webkit-scrollbar { width: 10px; }
.painel::-webkit-scrollbar-track { background: transparent; }
.painel::-webkit-scrollbar-thumb { background: #d8d5cc; border: 3px solid var(--fundo); border-radius: var(--r-pill); }
.painel::-webkit-scrollbar-thumb:hover { background: #c2bfb4; }

/* ---------------------------------------------------------------- 4. layout */
.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fundo);
  isolation: isolate;
}

/*
   Camada decorativa: dois halos radiais e a marca d'água.
   Fica ATRÁS de tudo (z-index 0) e é `pointer-events:none` — senão os halos, que são divs de tela
   inteira, engoliriam os cliques do menu.

   Trocados os `backdrop-filter: blur()` do protótipo por gradientes chapados: `backdrop-filter` é
   o efeito mais caro de composição que existe e é o principal culpado por rolagem travada em
   celular — o INP verde que o briefing exige não sobrevive a ele.
*/
.decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.decor::before,
.decor::after { content: ''; position: absolute; border-radius: var(--r-pill); }
.decor::before {
  top: -18%; right: -6%; width: 46vw; height: 46vw;
  background: radial-gradient(circle at 40% 40%, rgba(76, 74, 134, .13), rgba(76, 74, 134, 0) 70%);
}
.decor::after {
  bottom: -22%; left: -8%; width: 42vw; height: 42vw;
  background: radial-gradient(circle at 50% 50%, rgba(199, 154, 63, .14), rgba(199, 154, 63, 0) 70%);
}
.decor-marca {
  position: absolute; left: 4%; bottom: 4%;
  width: min(40vw, 460px); aspect-ratio: 1;
  opacity: .07; transform: rotate(-8deg);
  background: url('img/marca-watermark.png') center / contain no-repeat;
}

/*
   ⚠️ O padding horizontal daqui TEM de ser o mesmo `clamp` do `.painel`, e a `.topo-barra` o mesmo
   `max-width` da `.secao`. São dois elementos irmãos que não se conhecem — o cabeçalho vive fora do
   painel —, então nada os alinha sozinho: cada um encosta no seu próprio limite. Enquanto os
   valores divergiram (40px contra 44px, e barra sem `max-width`), a logo caía à esquerda do texto
   da página e os botões saíam pela direita, cada vez mais fora de esquadro quanto mais larga a tela.
   O padding VERTICAL é simétrico de propósito: com `0` embaixo, o conteúdo da barra encostava no
   fundo dela em vez de ficar centrado.

   ⚠️ E o `--rolagem` na direita: quem rola no desktop é o `#painel`, e a BARRA DE ROLAGEM dele come
   uns 10px da largura útil DELE — não da do cabeçalho, que é irmão e não rola. Sem compensar, a
   ponta direita dos botões passava 10px além da borda direita do texto. Quem mede é o `site.js`
   (não há como perguntar isso ao CSS); sem JavaScript o valor é `0px` e volta a divergência de
   antes, que é cosmética.
*/
.app-topo {
  position: relative; z-index: 5; flex-shrink: 0;
  padding: clamp(12px, 1.7vw, 20px) calc(clamp(16px, 3vw, 44px) + var(--rolagem, 0px)) clamp(12px, 1.7vw, 20px) clamp(16px, 3vw, 44px);
}

.painel {
  position: relative;
  z-index: 5;
  flex: 1;
  /*
     `min-height:0` é o que permite o filho de um flex encolher abaixo do próprio conteúdo. Sem ele
     o painel cresce até caber tudo, empurra a altura do `.app` e quem rola passa a ser a PÁGINA —
     exatamente o que este layout existe para impedir.
  */
  min-height: 0;
  /*
     Coluna flex por causa do RODAPÉ: é o que dá sentido ao `margin-top: auto` dele, que o joga
     para a base quando a página é curta e o deixa rolar junto quando é longa. Ver `.rodape`.
  */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: clamp(18px, 3vh, 44px) clamp(16px, 3vw, 44px) clamp(20px, 3vh, 40px);
}

/*
   ⚠️ Obrigatório. Filho de flex ENCOLHE por padrão (`flex-shrink: 1`): sem isto, numa página longa
   as seções seriam espremidas para caber na altura em vez de o painel rolar — o texto se amontoa e
   não há barra de rolagem nem erro que explique.
*/
.painel > * { flex-shrink: 0; }

/*
   ⚠️ `width: 100%` nas seções é OBRIGATÓRIO desde que o `.painel` virou coluna flex.

   `.secao` centraliza com `margin: 0 auto` — e, em flexbox, margem `auto` no eixo cruzado CANCELA
   o stretch do item. Sem esta linha a seção encolhe até a largura do próprio conteúdo e as margens
   auto comem o resto: a página de contato ficou com 331px de 1440, com o formulário no meio de dois
   vazios de 511px. Não dá erro, não gera rolagem, e nas telas de cartões quase não se nota — só na
   que tem um bloco estreito.
*/
.painel > .secao { width: 100%; }

/* Respiro mínimo antes do rodapé quando a página é longa (aí o `margin-top: auto` dele vale 0). */
.painel > .secao:last-of-type { margin-bottom: clamp(24px, 4vh, 48px); }

/* O <h1> recebe foco por JS ao trocar de seção; o contorno padrão poluiria. */
.painel h1:focus { outline: none; }

.secao { max-width: 1440px; margin: 0 auto; }

/*
   ⚠️ O TETO do `min-height` é o que impede o hero de esticar junto com o monitor.

   Até 01/08/2026 aqui estava `min-height: 100%`, que obriga a seção a ocupar a altura inteira do
   `.painel` — e, com `align-items: center`, reparte toda a sobra em cima e embaixo. Medido a 1050px
   de janela: painel 964px, conteúdo 558px, 343px de vazio, 289 deles ACIMA do primeiro texto. A
   720px o conteúdo já enchia a tela sozinho e nada aparecia: é por isso que o defeito só se
   manifesta em monitor alto, e passa despercebido em quem desenvolve num monitor comum.

   Com `min(100%, 620px)` a seção continua preenchendo a tela onde ela é curta (lá o conteúdo passa
   de 620 e manda sozinho) e para de crescer onde ela é alta. O `align-items: center` fica: ele é o
   que alinha o mockup, mais baixo, ao meio da coluna de texto.
*/
.secao--centrada { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 4vw, 64px); min-height: min(100%, 620px); }

/*
   Contato: texto e formulário centralizados na área que sobra, um sob o outro.

   `flex: 1 0 auto` em vez de `min-height`: a seção CRESCE para ocupar o que sobra do `.painel`
   (que é coluna flex) e o `justify-content` centra o conjunto dentro dela. Com `min-height` fixo o
   número teria de ser adivinhado e voltaria a errar em monitor alto, que é o defeito que o hero já
   teve. `shrink: 0` mantém a rolagem quando o formulário não cabe.
*/
.secao--formulario {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vh, 28px);
}
.secao--formulario .secao-cabecalho { margin-bottom: 0; text-align: center; }
/* 720px, e não os 560 de 01/08/2026: o card sozinho no centro da tela ficava com cara de tira
   estreita. É perto da largura que ele tinha quando dividia a seção com a coluna de texto. */
.contato-cartao { width: 100%; max-width: 720px; }

/* ---------------------------------------------------------------- 5. cabeçalho */
.topo-barra { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 1440px; margin: 0 auto; }

.marca { display: flex; align-items: center; flex-shrink: 0; margin-left: -3px; padding: 3px; border: 0; border-radius: var(--r-md); background: transparent; }
.marca:hover { background: rgba(64, 62, 105, .05); }
.marca img { height: clamp(34px, 3.4vw, 46px); width: auto; }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.nav-pill {
  position: relative;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  color: var(--texto-fraco);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
.nav-pill:hover { background: rgba(64, 62, 105, .06); color: var(--texto); }
.nav-pill.is-ativo {
  background: rgba(64, 62, 105, .1);
  box-shadow: inset 0 0 0 1px rgba(64, 62, 105, .16);
  color: var(--texto);
}
/* O traço dourado é o que diz "você está aqui" sem depender só do tom de fundo. */
.nav-pill.is-ativo::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 2px;
  width: 16px; height: 2px;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: var(--dourado);
}

.topo-acoes { display: flex; align-items: center; gap: 10px; margin-left: 18px; flex-shrink: 0; }

.botao-gaveta {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--branco);
  cursor: pointer;
}
.botao-gaveta:hover { border-color: #ddd9cd; }

/* ---------------------------------------------------------------- 5b. o banner do topo (home) */
/*
   28/08/2026. O topo da home deixou de ser bege e virou uma FAIXA ESCURA — decisão do cliente, que
   escolheu o "roxo da marca" entre três tintas apresentadas. É a mesma cor da sidebar do sistema:
   quem sai do site e entra no painel não sente troca de produto.

   ⚠️⚠️ SÃO DOIS ELEMENTOS FINGINDO SER UM SÓ, e é aqui que tudo pode dar errado.

   O cabeçalho (`.app-topo`) mora FORA do `#painel` — ele não rola no desktop, é a barra fixa. O
   hero (`.banner-topo`) mora DENTRO e rola. Não há como pintar os dois com um degradê contínuo:
   eles não compartilham nenhum ancestral que role junto com um e fique parado com o outro.

   A saída é a barra ser CHAPADA e o degradê do hero COMEÇAR exatamente naquela cor. É por isso que
   `--banner-topo` existe como token e aparece nos dois lugares. Trocar um tom sem trocar o outro
   desenha uma emenda horizontal no meio do topo — que quase não se vê no monitor e salta no
   celular, onde a barra fica grudada por cima do banner enquanto ele rola.

   ⚠️ E é degradê VERTICAL (180deg), não diagonal. Num diagonal a cor varia também da esquerda para
   a direita, então não existe "a cor da primeira linha" — a emenda com a barra chapada apareceria
   de um dos lados por definição.
*/
.app--banner {
  --banner-topo: #4c4a86;
  --banner-tinta: #f3f2fa;
  --banner-tinta-fraca: #b8b5d0;
}

/*
   ⚠️⚠️ `topo-no-banner` = "a barra está NESTE momento por cima do banner". `app--banner` só diz que
   a página TEM banner. A separação existe porque o cliente pediu que a barra acompanhe o fundo: roxa
   enquanto o banner aparece, bege — a cor de todas as outras telas — assim que ele sai. Toda regra
   de tinta clara do CABEÇALHO pende da segunda classe; as de dentro do banner (título, mockup)
   ficam na primeira, porque aquilo é sempre escuro, role o quanto rolar.

   Quem acende e apaga é o `site.js`, comparando a base do banner com a base da barra — e não uma
   distância fixa em pixels, que dependeria de saber quem rola (o `#painel` no desktop, a janela no
   celular) e da altura do banner, que é `clamp` e muda com a tela.
*/
/* O destino da transição. Sem ele a barra desbota do roxo para TRANSPARENTE — o bege que aparece é
   o do `.app` atrás, e no meio do caminho passa um roxo lavado. */
.app--banner .app-topo { background: var(--fundo); }
.app--banner.topo-no-banner .app-topo { background: var(--banner-topo); }

/*
   ⚠️ FULL-BLEED de dentro de um contêiner com padding, a mesma técnica do `.rodape` — e os mesmos
   `clamp` do `.painel`, que TÊM de continuar iguais aos de lá. O padding próprio devolve o respiro
   ao conteúdo; o `margin-top` negativo cola o banner na barra, sem a faixa bege que o
   `padding-top` do painel deixaria entre os dois.
*/
.banner-topo {
  margin: calc(-1 * clamp(18px, 3vh, 44px)) calc(-1 * clamp(16px, 3vw, 44px)) clamp(44px, 7vh, 88px);
  padding: clamp(18px, 3vh, 44px) clamp(16px, 3vw, 44px) clamp(44px, 7vh, 84px);
  background: linear-gradient(180deg, var(--banner-topo) 0%, #403e69 46%, #322f56 100%);
  color: var(--banner-tinta);
  overflow: hidden;   /* segura os halos de dentro; ver `.banner-topo::before` */
  position: relative;
}

/* Os halos do `.decor` não servem aqui: eles são claros e sobre fundo escuro somem. Estes são os
   mesmos dois gestos — dourado em cima à direita, luz fria embaixo à esquerda — reacertados. */
.banner-topo::before,
.banner-topo::after {
  content: '';
  position: absolute;
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  pointer-events: none;
}
.banner-topo::before {
  top: -26%; right: -8%; width: 52%;
  background: radial-gradient(circle at 50% 50%, rgba(216, 171, 82, .26), rgba(216, 171, 82, 0) 68%);
}
.banner-topo::after {
  bottom: -30%; left: -10%; width: 46%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 68%);
}
/* O conteúdo sobe acima dos halos — eles são irmãos, não fundo. */
.banner-topo > .secao { position: relative; z-index: 1; }

/* --- a tinta de dentro do banner --- */
.app--banner .titulo-hero { color: var(--branco); }
.banner-topo .lead { color: var(--banner-tinta-fraca); }

/*
   O menu, dentro da barra escura. ⚠️ ESTAS REGRAS SÃO DE DESKTOP: abaixo de 1024px o `.nav` vira
   gaveta de fundo BRANCO, e um item claro ali fica invisível. A faixa responsiva devolve as cores
   originais — ver a § 8.
*/
.app--banner.topo-no-banner .nav-pill { color: var(--banner-tinta-fraca); }
.app--banner.topo-no-banner .nav-pill:hover { background: rgba(255, 255, 255, .09); color: var(--branco); }
.app--banner.topo-no-banner .nav-pill.is-ativo { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: var(--branco); }
.app--banner.topo-no-banner .nav-pill.is-ativo::after { background: var(--dourado-claro); }

.app--banner.topo-no-banner .marca:hover { background: rgba(255, 255, 255, .1); }

/*
   ⚠️ Os DOIS botões do cabeçalho mudam, e por motivos diferentes:

   `--primario` é um degradê ROXO — sobre um banner roxo ele desaparece. Vira branco chapado, que é
   o único tom que se destaca do fundo sem roubar o dourado do hero.
   `--fantasma` é branco — sobre escuro ele pesa igual ao branco de cima e os dois viram o mesmo
   botão. Vira vidro.
*/
.app--banner.topo-no-banner .app-topo .botao--primario { background: var(--branco); color: var(--texto); box-shadow: 0 10px 24px rgba(0, 0, 0, .24); }
.app--banner.topo-no-banner .app-topo .botao--primario:hover { background: #f1efe9; color: var(--texto); }
.app--banner.topo-no-banner .app-topo .botao--fantasma,
.app--banner.topo-no-banner .botao-gaveta {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .24);
  color: var(--branco);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.app--banner.topo-no-banner .app-topo .botao--fantasma:hover,
.app--banner.topo-no-banner .botao-gaveta:hover { background: rgba(255, 255, 255, .18); color: var(--branco); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }

/* O botão de vidro do hero. Existe só dentro do banner, mas é `.botao--vidro` e não
   `.app--banner .botao--fantasma`: o modificador diz o que ele É, e a próxima faixa escura da
   página pode reusá-lo sem herdar nada da home. */
.botao--vidro { background: rgba(255, 255, 255, .11); color: var(--branco); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.botao--vidro:hover { background: rgba(255, 255, 255, .18); color: var(--branco); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }

/* A moldura do mockup, que era clara sobre bege, passa a ser vidro sobre roxo. */
.app--banner .moldura-notebook { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); box-shadow: 0 40px 80px rgba(0, 0, 0, .42); }
.app--banner .cartao-flutuante { box-shadow: 0 18px 36px rgba(0, 0, 0, .3); }

/*
   ⚠️ O `.decor` (halos e marca d'água) NÃO precisa ser escondido na home, e chegou a ser — foi
   desfeito. Ele é `z-index: 0` e o `#painel` é 5, então o banner, que é opaco, já o cobre por
   inteiro enquanto está na tela. Escondê-lo tirava a marca d'água do RESTO da página, que continua
   clara e continua precisando dela.
*/

/*
   A SOMBRA da barra grudada. O `site.js` acende `topo-solto` assim que a rolagem passa de 8px.

   ⚠️ No topo ela NÃO pode existir: ali a barra é a continuação do banner, e uma sombra desenharia
   exatamente a emenda que todo o resto desta seção existe para esconder.
*/
.app-topo { transition: background var(--transicao), box-shadow var(--transicao); }
.app.topo-solto .app-topo { box-shadow: 0 10px 24px rgba(33, 31, 51, .1); }
/* Só enquanto a barra é roxa: depois que ela vira bege, a sombra clara da regra acima é a certa. */
.app--banner.topo-no-banner.topo-solto .app-topo { box-shadow: 0 12px 28px rgba(24, 22, 46, .34); }

/* ---------------------------------------------------------------- 6. componentes */

/* --- botões --- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 0;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.botao:active { transform: translateY(1px); }

.botao--primario { background: var(--grad-roxo); color: var(--branco); box-shadow: var(--sombra-roxa); }
.botao--primario:hover { background: var(--grad-roxo-hover); color: var(--branco); }

.botao--dourado { background: var(--grad-dourado); color: var(--texto); box-shadow: var(--sombra-dourada); }
.botao--dourado:hover { background: var(--grad-dourado-hover); color: var(--texto); }

.botao--fantasma { background: var(--branco); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borda), var(--sombra-1); }
.botao--fantasma:hover { background: var(--branco); color: var(--texto); box-shadow: inset 0 0 0 1px #ddd9cd, var(--sombra-2); }
/*
   ⚠️ O botão do CARTÃO DE PLANO tem hover próprio: enche de lilás escuro em vez de só escurecer a
   borda (pedido do cliente, 28/08/2026). É o único `--fantasma` do site que é a AÇÃO PRINCIPAL do
   bloco em que vive — nos outros lugares ele é o botão secundário ao lado de um dourado, e pintá-lo
   ali faria dois botões disputarem a mesma ênfase.

   ⚠️ `color` explícito no hover: sem ele o texto continua `--texto` (quase preto) sobre o roxo, e
   o contraste cai para um valor ilegível. O `box-shadow` some para a borda não desenhar um contorno
   claro em volta do preenchimento.
*/
.plano .botao--fantasma {
  /* ⚠️ `color` PRECISA entrar na transição aqui. O `.botao` só anima `background`, e nos outros
     botões isso basta porque a tinta do texto não muda no hover. Neste ela muda: sem esta linha o
     texto vira branco NA HORA e o fundo leva 200ms para chegar — o botão pisca em branco no branco
     e o rótulo some por um quinto de segundo. Pego numa captura de tela, não olhando. */
  transition: background var(--transicao), color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.plano .botao--fantasma:hover {
  background: var(--roxo-claro);
  color: var(--branco);
  box-shadow: var(--sombra-roxa);
}

.botao--grande { padding: 16px 32px; border-radius: var(--r-lg); font-size: 15.5px; }
.botao--bloco { width: 100%; }

.botoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- voltar ao topo --- */
/*
   ⚠️ O `z-index: 40` é escolhido contra os VIZINHOS de contexto, não contra a página: o botão mora
   dentro do `.app`, que tem `isolation: isolate`. Acima do `.painel` (5) e abaixo do fundo da
   gaveta (55) e da gaveta (60) — senão ele flutuaria por cima do menu aberto no celular. É a mesma
   armadilha que já cobrou o menu do celular em 01/08/2026.

   Nasce com o atributo `hidden` no HTML e é o JavaScript que o tira: sem JS o botão não existe.

   ⚠️ `visibility` além de `opacity`: só com `opacity: 0` o Tab pararia num botão invisível, e quem
   navega por teclado perderia o foco no nada. Ela entra na `transition` para que o botão continue
   visível durante o desaparecimento, em vez de sumir de uma vez no primeiro quadro.
*/
.subir {
  position: fixed;
  right: clamp(14px, 3vw, 40px);
  bottom: clamp(14px, 3vh, 34px);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--grad-roxo);
  color: var(--branco);
  box-shadow: var(--sombra-roxa);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao), background var(--transicao);
}
.subir svg { width: 20px; height: 20px; }
.subir.is-visivel { opacity: 1; visibility: visible; transform: none; }
.subir:hover { background: var(--grad-roxo-hover); }
.subir:active { transform: translateY(1px); }

/* Com a gaveta aberta ele sobraria por cima do fundo escurecido, do lado de fora do menu. */
body.nav-aberta .subir { opacity: 0; visibility: hidden; }

/* --- aviso de cookies --- */
/*
   A barra do consentimento (30/08/2026, com a entrada do Google Analytics).

   ⚠️ Barra na BASE, e não caixa central com fundo escurecido. O modal bloqueia a leitura e força
   uma resposta antes de a pessoa ver do que o site trata — que é justamente o que faz todo mundo
   clicar em "aceitar" sem ler, tornando o consentimento uma formalidade vazia. A barra informa,
   deixa a página utilizável, e a escolha continua real.

   ⚠️ `z-index: 45` — ACIMA do botão de subir (40) e ABAIXO do fundo da gaveta (55). Os três
   convivem no contexto do `.app` (`isolation: isolate`), então os números só competem entre si:
   o banner cobre o botãozinho, e o menu aberto do celular cobre o banner.

   ⚠️ Nasce com `hidden` e quem o revela é o `site.js`, depois de conferir que a escolha ainda não
   foi feita. O caminho inverso faria o banner PISCAR em toda visita de quem já respondeu, porque a
   página pinta antes de o script rodar.
*/
.consentimento {
  position: fixed;
  left: clamp(10px, 2vw, 20px);
  right: clamp(10px, 2vw, 20px);
  bottom: clamp(10px, 2vh, 20px);
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 22px;
  max-width: 860px;
  margin-inline: auto;
  padding: 14px clamp(16px, 2vw, 20px);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--branco);
  box-shadow: var(--sombra-3);
}
.consentimento[hidden] { display: none; }   /* ⚠️ o `display: flex` acima vence o `hidden` da UA */

.consentimento-texto { flex: 1 1 320px; min-width: 0; }
.consentimento-titulo { font-size: 13.5px; font-weight: 800; color: var(--texto); }
.consentimento-corpo { margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--texto-fraco); }
.consentimento-corpo a { color: var(--roxo); text-decoration: underline; text-underline-offset: 2px; }

/* ⚠️ Os dois botões com o MESMO tamanho e o mesmo peso. Um "recusar" menor, cinza ou escondido é o
   padrão que a LGPD trata como consentimento não-livre — e o que faz um site tomar multa apesar de
   "ter banner". A diferença entre eles é só de cor, que é hierarquia visual, não de acesso. */
.consentimento-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.consentimento-acoes .botao { padding: 9px 18px; font-size: 13px; }

@media (max-width: 559.98px) {
  /* No celular a barra vira coluna e os botões dividem a largura — lado a lado com o texto, cada
     um teria 60px e o rótulo quebraria em duas linhas. */
  .consentimento { flex-direction: column; align-items: stretch; }
  .consentimento-acoes .botao { flex: 1; justify-content: center; }
}

/* --- cartão --- */
/*
   Branco sólido, `rounded-2xl`, borda #eceae3 — o cartão do produto.
   O protótipo usava "vidro" (`rgba(255,255,255,.74)` + `backdrop-filter: blur(20px)`). Além de
   destoar do sistema, o desfoque de fundo obriga o navegador a recompor a região a cada pixel de
   rolagem.
*/
.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-2xl);
  box-shadow: var(--sombra-1);
  padding: clamp(18px, 2vw, 26px);
  transition: box-shadow var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.cartao--link:hover { border-color: #ddd9cd; box-shadow: var(--sombra-2); transform: translateY(-2px); }

.cartao-icone {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  background: var(--grad-dourado);
  color: var(--branco);
  box-shadow: var(--sombra-1);
}
.cartao-icone svg { width: 20px; height: 20px; }

.cartao h3 { margin-bottom: 7px; font-size: 16.5px; font-weight: 700; }
.cartao p { color: var(--texto-fraco); font-size: 14px; line-height: 1.6; }

/* --- selo --- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pill);
  background: var(--branco);
  box-shadow: var(--sombra-1);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--texto-fraco);
}
.selo::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--dourado);
  box-shadow: 0 0 0 4px rgba(199, 154, 63, .18);
}
.selo--liso::before { display: none; }

/* --- etiqueta de estado (No ar / Em construção) --- */
.tag {
  display: inline-block;
  margin-bottom: 9px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tag--ok    { background: #f6efdf; color: #8a651d; }
.tag--breve { background: #efeee9; color: var(--texto-fraco); }

/* --- cabeçalho de seção --- */
.secao-cabecalho { max-width: 62ch; margin-bottom: clamp(22px, 3vh, 36px); }
.kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--dourado-escuro);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.titulo-hero {
  margin-bottom: clamp(14px, 2vh, 22px);
  font-size: clamp(34px, 5.1vw, 68px);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
  max-width: 15ch;
}
.titulo-secao {
  margin-bottom: 12px;
  font-size: clamp(26px, 3.2vw, 42px);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.lead {
  color: var(--texto-fraco);
  font-size: clamp(15.5px, 1.35vw, 19px);
  line-height: 1.6;
  max-width: 58ch;
  text-wrap: pretty;
}
.titulo-hero + .lead { margin-bottom: clamp(22px, 3vh, 34px); }

/* --- números de destaque do hero --- */
.destaques { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 40px); margin-top: clamp(26px, 4vh, 44px); }
.destaques dt { font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -.03em; }
.destaques dd { margin: 0; font-size: 13px; font-weight: 500; color: var(--texto-fraco); }

/* --- grades --- */
.grade { display: grid; gap: clamp(12px, 1.4vw, 18px); }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- lista com check --- */
.lista-check { list-style: none; display: grid; gap: 9px; }
.lista-check li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.5; color: var(--texto-fraco); }
.lista-check li::before {
  content: '';
  position: absolute;
  left: 0; top: .35em;
  width: 16px; height: 16px;
  border-radius: var(--r-pill);
  background: var(--dourado) var(--check-branco) center / 11px no-repeat;
}

/* --- planos --- */
.plano { display: flex; flex-direction: column; }
.plano--destaque { border-color: var(--dourado); box-shadow: var(--sombra-2), 0 0 0 1px var(--dourado); }
.plano-nome { margin: 12px 0 4px; font-size: 19px; font-weight: 700; }
.plano-preco { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.plano-preco strong { font-size: clamp(30px, 3vw, 40px); font-weight: 800; letter-spacing: -.04em; }
.plano-preco span { color: var(--texto-fraco); font-size: 14px; font-weight: 500; }
.plano-resumo { margin-bottom: 16px; color: var(--texto-fraco); font-size: 14px; line-height: 1.6; }
.plano .lista-check { margin-bottom: 20px; }
.plano .botao { margin-top: auto; }

/*
   A nota ao lado do único plano: o card ocupa uma coluna e ela ocupa as outras duas.

   ⚠️ O `span 2` PRECISA voltar a `auto` na faixa de uma coluna só. Num grid de coluna única, um
   item que pede duas cria uma COLUNA IMPLÍCITA fora da grade — a página passa a rolar de lado, sem
   erro nenhum no console e sem nada aparecer torto até alguém abrir no celular.
*/
.plano-nota { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 4px clamp(0px, 1.5vw, 22px); }
.plano-nota h2 { font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; letter-spacing: -.03em; line-height: 1.22; }
.plano-nota p { max-width: 58ch; color: var(--texto-fraco); font-size: 15px; line-height: 1.65; }

/* --- molduras de mockup --- */
.mockup { flex: 1.05; min-width: min(100%, 400px); display: flex; justify-content: center; perspective: 1600px; }
.mockup-palco { position: relative; width: 100%; max-width: 720px; transform: rotateY(-12deg) rotateX(6deg) rotate(.6deg); transform-style: preserve-3d; }

.moldura-notebook {
  padding: 10px 10px 0;
  border: 1px solid var(--borda);
  border-radius: var(--r-xl) var(--r-xl) 4px 4px;
  background: var(--branco);
  box-shadow: var(--sombra-3);
}
.moldura-notebook img { border-radius: var(--r-md) var(--r-md) 0 0; }
.moldura-notebook::after {
  content: '';
  display: block;
  height: 12px;
  margin: 0 -10px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: linear-gradient(180deg, #e9e6dd, #d8d5cc);
}

.moldura-celular {
  padding: 7px;
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  background: var(--branco);
  box-shadow: var(--sombra-3);
}
.moldura-celular img { border-radius: var(--r-md); }

.cartao-flutuante {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--branco);
  box-shadow: var(--sombra-2);
}
/* ⚠️ `color` EXPLÍCITO: o cartão é branco, mas vive dentro do `.banner-topo`, que pinta a tinta de
   clara. Sem isto o texto herdava o quase-branco do banner e sumia dentro do próprio cartão. */
.cartao-flutuante { color: var(--texto); }
.cartao-flutuante strong { display: block; font-size: 14px; }
.cartao-flutuante span { font-size: 12px; color: var(--texto-fraco); }
.cartao-flutuante--tl { top: 6%; left: -6%; }
.cartao-flutuante--br { bottom: 8%; right: -5%; }

/* --- formulário --- */
.campos { display: grid; gap: 13px; }
.campo { display: block; }
.campo > span { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--texto-fraco); }
.campo input,
.campo textarea,
.campo select {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--branco);
  color: var(--texto);
  font: inherit;
  font-size: 14.5px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input:hover, .campo textarea:hover { border-color: #ddd9cd; }
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--roxo-claro);
  box-shadow: 0 0 0 3px rgba(76, 74, 134, .12);
}
.campo textarea { min-height: 104px; resize: vertical; }
.campo--erro input, .campo--erro textarea { border-color: #b3261e; }
.campo-erro { display: block; margin-top: 4px; font-size: 12.5px; color: #b3261e; }

/*
   Honeypot. Fora da tela pelo CSS e não por `type="hidden"` — muitos robôs ignoram campos hidden de
   propósito, justamente porque sabem que são armadilha, mas preenchem qualquer `type="text"` que
   encontrem no formulário.
*/
.campo-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/*
   O campo invisível que o `copiarNaMarra()` do `site.js` cria para o `execCommand('copy')`.

   ⚠️ É uma CLASSE, e não um `element.style` no JavaScript, porque a CSP deste site tem
   `style-src 'self'` SEM `'unsafe-inline'` — e a regra não vale só para o `style="…"` do HTML:
   escrever no `.style` de um elemento pelo script é a mesma coisa aos olhos do navegador, e ele
   BLOQUEIA a aplicação registrando "Applying inline style violates…" no console. Sem estilo o
   `<textarea>` entra no fluxo com 100% de largura e a página salta no instante da cópia.

   ⚠️ `fixed` e não `absolute` (a diferença para o `.campo-armadilha` acima): o campo precisa
   receber FOCO para ser copiado, e dar foco em algo fora da tela rola a página até lá. Preso ao
   viewport, não há para onde rolar. O `opacity: 0` no lugar de `visibility`/`display` porque
   elemento realmente invisível não é selecionável, e sem seleção não há o que copiar.
*/
.fora-da-tela {
  position: fixed; top: 0; left: 0;
  width: 1px; height: 1px;
  padding: 0; border: 0;
  opacity: 0;
}

/*
   O que existe SÓ NO PAPEL. Quem acende é a § 10 (impressão), lá no fim do arquivo.

   ⚠️ A regra de esconder mora AQUI, no fluxo normal, e não como um `display: none` dentro do
   `@media screen`: assim ela vale por padrão em qualquer mídia que não seja `print` — inclusive nas
   que ninguém previu (leitor de e-book, `speech`). Um `@media screen` deixaria o bloco visível em
   todas as outras.
*/
.so-impressao { display: none; }

.aviso { padding: 13px 16px; border-radius: var(--r-md); font-size: 14px; line-height: 1.55; }
.aviso--ok { background: #eef6ef; border: 1px solid #cfe4d2; color: #1d5129; }
.aviso--erro { background: #fdeeed; border: 1px solid #f2cfcc; color: #8c1d18; }

/* --- trilha (breadcrumb visível) --- */
/*
   Existia só no JSON-LD até 26/08/2026, o que ajudava o buscador e não ajudava o visitante — que
   chega de uma busca direto numa página interna e não tem como saber onde está. O `BreadcrumbList`
   do controller descreve exatamente esta trilha; os dois andam juntos.

   Vive FORA de `.secao` para grudar no topo do painel, e por isso repete o `max-width` das seções.
*/
.trilha {
  max-width: 1440px;
  margin: 0 auto clamp(10px, 1.4vh, 16px);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--texto-fraco);
}
.trilha a { color: var(--texto-fraco); }
.trilha a:hover { color: var(--texto); }
.trilha [aria-current='page'] { color: var(--texto); font-weight: 600; }

/* --- passos numerados (home: "como começa") --- */

/* --- índice dos módulos (/recursos) --- */
/*
   Chips de âncora acima dos blocos. Nove blocos longos sem índice obrigam a rolar a página inteira
   só para descobrir se o módulo que interessa existe — e é dessa dúvida que o visitante desiste.

   `auto-fit` e não um número fixo de colunas: a quantidade de módulos muda, e a grade fixa deixaria
   um chip órfão numa linha só (era o que acontecia na home com quatro colunas e nove itens).
*/
.mapa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: clamp(24px, 4vh, 40px);
}
.mapa-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--branco);
  box-shadow: var(--sombra-1);
  color: var(--texto);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.mapa-item:hover { color: var(--texto); border-color: #ddd9cd; box-shadow: var(--sombra-2); transform: translateY(-2px); }
.mapa-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--roxo-claro); }

/* --- blocos de módulo (/recursos) --- */
.modulos { display: grid; gap: clamp(14px, 1.8vw, 22px); }

/*
   ⚠️ `scroll-margin-top` não é enfeite: a home linka para `/recursos#financeiro`, e sem ele o
   bloco encosta na borda superior da área de rolagem — o título fica colado no topo e parece que a
   página pulou para o lugar errado. A margem dá o respiro que o olho espera depois de um salto.

   O bloco NÃO usa `.cartao`: ele repete o cartão (fundo, borda, raio, sombra) porque precisa de
   `overflow: hidden` para conter a lavagem do `::before`, e de padding próprio. Herdar `.cartao` e
   sobrescrever metade dele deixaria duas fontes da verdade para o mesmo desenho.
*/
.modulo {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--borda);
  border-radius: var(--r-2xl);
  background: var(--branco);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  scroll-margin-top: 24px;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}
.modulo:hover { border-color: #ddd9cd; box-shadow: var(--sombra-2); }

/*
   Lavagem roxa no canto superior esquerdo — dá peso ao cabeçalho do módulo sem tingir o cartão
   inteiro. É gradiente e não cor chapada de propósito: com nove blocos empilhados, um fundo
   colorido em cada um deixaria a página listrada.
*/
.modulo::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 340px; height: 240px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(76, 74, 134, .085), rgba(76, 74, 134, 0) 70%);
  pointer-events: none;
}

/* Os dois filhos ficam ACIMA da lavagem — sem `position`, o `::before` os cobriria. */
.modulo-id, .modulo-corpo { position: relative; }

.modulo-icone {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 16px;
  border-radius: var(--r-lg);
  background: var(--grad-roxo);
  color: var(--branco);
  box-shadow: var(--sombra-roxa);
}
.modulo-icone svg { width: 25px; height: 25px; }

.modulo-id h3 { font-size: clamp(20px, 1.7vw, 24px); letter-spacing: -.035em; }
/*
   A chamada é ROXA e semibold, não cinza: ela é a promessa do módulo em uma linha, e no cinza dos
   parágrafos logo abaixo ela desaparecia no meio do texto.
*/
.modulo-chamada { margin-top: 8px; color: var(--roxo-claro); font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.modulo-texto { display: grid; gap: 10px; margin-top: 14px; }
.modulo-texto p { color: var(--texto-fraco); font-size: 14px; line-height: 1.65; }

.modulo-corpo { display: grid; gap: 18px; align-content: start; }

.rotulo-bloco { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dourado-escuro); }

/*
   Dois níveis de leitura, dois desenhos.

   `.destaque` é o que decide a venda (o que o cliente chamou de "principais funcionalidades");
   `.pilulas` é o complemento. Antes tudo era a mesma lista de check e a página lia como inventário:
   trinta itens com o mesmo peso equivalem a nenhum item em destaque.

   ⚠️ A classe é `.destaques-modulo`, e não `.destaques` — esta última já é a lista de números do
   hero da home (`dl` com `dt`/`dd`). Reusar o nome faria os dois blocos se sobrescreverem em
   silêncio, e o sintoma apareceria na home, não aqui.
*/
.destaques-modulo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 9px;
}
.destaque {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--tinta-suave);
}
.destaque-marca {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--grad-dourado);
  color: var(--branco);
  box-shadow: var(--sombra-1);
}
.destaque-marca svg { width: 14px; height: 14px; }
.destaque span { font-size: 13.5px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }

/*
   Pílulas, e não `.lista-check`: são cinco a oito itens curtos por módulo, e empilhados em coluna
   eles ocupavam meia tela cada um. Em linha, o bloco inteiro cabe em três ou quatro fileiras.
*/
.pilulas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; list-style: none; }
.pilulas li {
  position: relative;
  padding: 6px 13px 6px 24px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pill);
  background: var(--branco);
  color: var(--texto-fraco);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.pilulas li::before {
  content: '';
  position: absolute;
  left: 9px; top: 50%;
  transform: translateY(-50%);
  width: 9px; height: 9px;
  border-radius: var(--r-pill);
  background: var(--dourado);
  box-shadow: 0 0 0 3px rgba(199, 154, 63, .16);
}

/* --- o CTA escuro no meio dos módulos (/recursos) --- */
/*
   28/08/2026. Entra DENTRO da lista, depois do quarto bloco: nove cartões brancos seguidos são uma
   descida longa, e no meio dela não havia nenhuma saída para quem já se convenceu — o único botão
   da página estava lá embaixo, depois do nono.

   ⚠️ É FILHO DA `.modulos`, e é o que faz ele respeitar o `gap` da lista sem margem própria. Movê-lo
   para fora da grade exige devolver o espaçamento à mão nos dois lados.

   O fundo é o MESMO da faixa das carteirinhas na home (`.credenciais`), de propósito: são os dois
   momentos em que o site troca de tom para pedir alguma coisa, e duas receitas de escuro diferentes
   no mesmo produto leem como duas mãos diferentes.
*/
.cta-modulos {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  padding: clamp(30px, 4vw, 52px) clamp(24px, 3.6vw, 54px);
  border-radius: var(--r-2xl);
  background: linear-gradient(150deg, #4c4a86, #2b2a4d 62%, #232240);
  color: var(--branco);
}
/* Os dois halos do banner da home, reacertados: dourado em cima à direita, luz fria embaixo à
   esquerda. Sem eles o retângulo escuro fica chapado ao lado de nove cartões com relevo. */
.cta-modulos::before,
.cta-modulos::after {
  content: '';
  position: absolute;
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  pointer-events: none;
}
.cta-modulos::before {
  top: -58%; right: -6%; width: 42%;
  background: radial-gradient(circle at 50% 50%, rgba(216, 171, 82, .3), rgba(216, 171, 82, 0) 68%);
}
.cta-modulos::after {
  bottom: -46%; left: -8%; width: 36%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 68%);
}
/* As duas colunas sobem acima dos halos — eles são irmãos, não fundo. */
.cta-modulos > * { position: relative; }

.cta-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--dourado-claro); }
.cta-kicker::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .6; }

.cta-modulos h2 { margin-top: 14px; font-size: clamp(23px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.18; max-width: 17ch; }
/*
   ⚠️ `.cta-texto p` e NÃO `.cta-modulos p`. A segunda forma vale 0-1-1 (classe + elemento) e vence
   por especificidade as classes de 0-1-0 do cartão de preço, que também são `<p>`: o "R$ 49" caía
   para 15,5px e o rótulo "A PARTIR DE" subia para o mesmo corpo do parágrafo. O cartão continuava
   lá, só que sem hierarquia nenhuma — e nada no CSS parecia errado.

   ⚠️ `#b8b5d0` literal, e não `var(--banner-tinta-fraca)`: aquele token só existe dentro de
   `.app--banner`, que é a home — aqui ele cairia sempre no fallback, fingindo uma ligação que não
   existe.
*/
.cta-texto p { margin-top: 12px; color: #b8b5d0; font-size: 15.5px; line-height: 1.65; max-width: 46ch; }

/* ⚠️ Lista de check PRÓPRIA, e não a `.lista-check` da home: aquela desenha o selo dourado sobre
   fundo claro e some aqui. */
.cta-itens { margin-top: 20px; display: grid; gap: 9px; list-style: none; }
.cta-itens li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #e6e4f2; }
.cta-itens svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; color: var(--dourado-claro); }

/* O cartão de vidro do preço. `text-align: center` no bloco inteiro: são quatro linhas curtas em
   torno de um número, e alinhadas à esquerda elas ficam boiando dentro da caixa. */
.cta-preco {
  padding: 24px 26px;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17);
  text-align: center;
}
.cta-preco-rotulo { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #b8b5d0; }
.cta-preco-valor { margin-top: 8px; font-size: clamp(36px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.cta-preco-valor small { font-size: 17px; font-weight: 700; letter-spacing: 0; color: #b8b5d0; }
.cta-preco-nota { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: #b8b5d0; }
.cta-preco .botao { margin-top: 18px; width: 100%; justify-content: center; }

/* --- seção de confiança (/recursos) --- */
/*
   Fecha a página e faz as vezes do CTA — o botão mora dentro dela. Um `.chamada` separado logo
   abaixo repetiria o mesmo botão a dois blocos de distância.
*/
.confianca {
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3.5vw, 52px);
  border: 1px solid var(--borda);
  border-radius: clamp(24px, 3vw, 32px);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(76, 74, 134, .07), rgba(76, 74, 134, 0) 62%),
    linear-gradient(180deg, #fbfaf7, var(--branco));
  box-shadow: var(--sombra-1);
}
.confianca .titulo-secao em { font-style: normal; color: var(--roxo-claro); }

.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(26px, 4vh, 40px);
}
.pilar {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  background: var(--branco);
  box-shadow: var(--sombra-1);
  text-align: center;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.pilar:hover { border-color: #ddd9cd; box-shadow: var(--sombra-2); transform: translateY(-3px); }
.pilar-icone {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  border-radius: var(--r-md);
  background: var(--grad-roxo);
  color: var(--branco);
  box-shadow: var(--sombra-roxa);
}
.pilar-icone svg { width: 23px; height: 23px; }
.pilar h3 { margin-bottom: 8px; font-size: 16.5px; }
.pilar p { color: var(--texto-fraco); font-size: 13.5px; line-height: 1.6; }

/* `tabular-nums` porque os quatro valores ficam em colunas e alinham pela largura do dígito. */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(26px, 4vh, 42px);
  padding-top: clamp(24px, 4vh, 38px);
  border-top: 1px solid var(--borda);
  text-align: center;
}
.numeros dt {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--roxo);
  font-variant-numeric: tabular-nums;
}
.numeros dd { margin: 4px 0 0; color: var(--texto-fraco); font-size: 13px; font-weight: 500; }

.confianca-acao { margin-top: clamp(26px, 4vh, 40px); text-align: center; }
.nota-acao { margin-top: 12px; color: var(--texto-fraco); font-size: 13px; }

/* --- cartão que é link inteiro --- */
/*
   O `.cartao--link` já existia (hover), mas nunca tinha sido usado envolvendo texto: como é um
   `<a>`, o `color` do reset pintava o título de roxo e o card parecia um link quebrado.
*/
.cartao--link { color: inherit; }
.cartao--link:hover { color: inherit; }
.cartao--link h3 { color: var(--texto); }

/* --- preço anual, abaixo da mensalidade --- */
/*
   Os dois valores ficam visíveis ao mesmo tempo, sem alternador. Um botão que troca os preços
   precisaria de JavaScript (a regra do site é funcionar sem ele), e a alternativa em CSS puro
   esconderia metade dos preços do HTML — o oposto do que se quer numa página feita para ser lida
   pelo buscador.
*/
.plano-anual { margin: -6px 0 12px; font-size: 13px; font-weight: 500; color: var(--texto-fraco); }

/* --- o topo da /planos (28/08/2026) --- */
/*
   ⚠️ O destaque colorido é do `<strong>` DENTRO do `<h1>`, e ele carrega o preço de entrada. É a
   segunda metade da frase que muda de cor — não uma palavra no meio: o olho lê o título inteiro e
   para no número, que é a informação pela qual a página existe.
*/
.planos-topo h1 strong { color: var(--roxo-claro); font-weight: inherit; }
.planos-topo .lead { max-width: 64ch; }
/* Sem `.kicker` e sem trilha, o título é a primeira coisa da página e encostava no cabeçalho. */
.planos-topo { padding-top: clamp(6px, 1.6vh, 18px); }

/* --- um plano à vista, os outros no acordeão (28/08/2026) --- */
/*
   A `/planos` mostra UM cartão, centralizado, e guarda os demais dentro de um `<details>`. Pedido
   do cliente: três cartões lado a lado obrigam a comparar antes de entender.

   ⚠️ A largura é do CONTÊINER, não do `.cartao`: o cartão continua sendo o mesmo componente das
   outras páginas, e os dois de dentro do acordeão são desenhados por ele sem nenhuma exceção.
*/
.plano-solo { max-width: 440px; margin-inline: auto; }

/*
   A faixa do teste grátis, no TOPO do cartão de plano (28/08/2026, pedido do cliente: o destaque
   dos dias grátis mora dentro do card, não numa faixa própria acima dele).

   ⚠️ Fundo dourado suave e não o dourado chapado dos botões: ela precisa ser a primeira coisa lida
   do cartão SEM competir com o botão de ação, que é o único elemento dourado sólido ali dentro.
   Dois dourados cheios no mesmo cartão fazem os dois perderem a vez.
*/
.plano-teste {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
  padding: 9px 12px;
  border: 1px solid rgba(199, 154, 63, .28);
  border-radius: var(--r-md);
  background: rgba(199, 154, 63, .1);
  color: var(--dourado-escuro);
  font-size: 12.5px;
  line-height: 1.4;
}
.plano-teste strong { font-weight: 800; }
.plano-teste svg { flex-shrink: 0; width: 15px; height: 15px; }

/* O limite de pessoas, entre o resumo e a lista de módulos. Fora da lista de propósito — ver o
   comentário na view: dentro dela ganharia o check dourado e leria como se fosse mais um módulo. */
.plano-limite { margin-bottom: 14px; color: var(--texto-fraco); font-size: 14px; }
.plano-limite strong { color: var(--texto); font-weight: 700; }

/* O rótulo acima da lista de módulos. */
.plano-rotulo {
  margin-bottom: 9px;
  color: var(--texto-fraco);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/*
   As quatro garantias abaixo dos planos (28/08/2026), no lugar da faixa de pílulas.

   ⚠️ SEM CARTÃO — ícone, título e texto soltos sobre o bege. É a mesma decisão da home, onde 21
   cards foram desfeitos a pedido do cliente: quatro caixas brancas seguidas logo abaixo de um
   cartão branco de plano fariam a página inteira parecer uma pilha de caixas.
*/
/*
   ⚠️ A faixa tem a LARGURA DA PÁGINA, não de ponta a ponta — chegou a ser full-bleed e foi desfeito
   a pedido do cliente no mesmo dia. Sendo assim, ela é um elemento só (a própria `.secao`) e não
   precisa de margem negativa nenhuma; o raio de canto é o que a separa do bege, no lugar das linhas
   de cima e de baixo que a versão anterior precisava ter.

   O creme é o mesmo do `.alcance` da home (o bloco do mapa-múndi), de propósito: são dois momentos
   em que a página troca de fundo para separar um assunto do outro, e duas receitas de creme no
   mesmo produto leem como duas mãos.
*/
.faixa-garantias {
  padding: clamp(28px, 3.6vw, 46px) clamp(20px, 3vw, 44px);
  border: 1px solid var(--borda);
  border-radius: clamp(22px, 3vw, 32px);
  background: linear-gradient(150deg, #faf8f2, #f1eee3 62%, #ece7d9);
  box-shadow: var(--sombra-1);
}

.garantias {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 38px);
}
.garantias li { display: grid; justify-items: center; gap: 10px; text-align: center; }
.garantia-icone {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: var(--r-pill);
  background: var(--grad-roxo);
  color: var(--branco);
  box-shadow: var(--sombra-roxa);
}
.garantia-icone svg { width: 24px; height: 24px; }
.garantias h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.garantias p { max-width: 34ch; color: var(--texto-fraco); font-size: 13.5px; line-height: 1.6; }

.mais-planos { margin-top: clamp(14px, 2vh, 20px); }
/*
   ⚠️ `> summary`, e não `summary`: o acordeão da FAQ (`.faq-item`) também é `<details>`, e sem o
   filho direto esta regra alcançaria qualquer `<summary>` que um dia caísse aqui dentro.
*/
.mais-planos > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  /* 44px é o alvo de toque recomendado por Apple e Google. */
  min-height: 44px;
  margin-inline: auto;
  padding: 8px 20px;
  border-radius: var(--r-pill);
  color: var(--texto-fraco);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: var(--transicao);
}
/* O triângulo padrão do WebKit/Safari não some com `list-style: none` — precisa deste pseudo. */
.mais-planos > summary::-webkit-details-marker { display: none; }
.mais-planos > summary:hover { color: var(--texto); background: var(--tinta-suave); }
/* O "+" vira "×" ao abrir — o mesmo gesto do acordeão da FAQ, que gira a seta. */
.mais-planos-mais { font-size: 18px; font-weight: 700; line-height: 1; transition: transform var(--transicao); }
.mais-planos[open] .mais-planos-mais { transform: rotate(45deg); }

.mais-planos-corpo { margin-top: clamp(16px, 2.4vh, 26px); }
/* Dois cartões numa página que acabou de mostrar um de 440px: sem teto, eles esticariam para os
   1440px da seção e ficariam maiores que o plano em destaque. */
.mais-planos-corpo > .grade { max-width: 920px; margin-inline: auto; }
.mais-planos-acao { margin-top: clamp(16px, 2.4vh, 22px); text-align: center; }

/*
   ⚠️ O que só existe COM JavaScript. A classe `tem-dialogo` é posta no `<html>` pelo `site.js`, e
   só depois de confirmar que o navegador tem `showModal` — ver o bloco "modal da tabela de planos"
   naquele arquivo. Sem ela: o botão não aparece e a tabela comparativa fica visível na página, que
   é o estado correto de quem não tem como abrir o modal.
*/
.so-com-js { display: none; }
html.tem-dialogo .so-com-js { display: block; }
html.tem-dialogo .tabela-modal { display: none; }

/* Nota abaixo da tabela — vai junto com ela para dentro do modal. */
.tabela-nota { margin-top: 12px; color: var(--texto-fraco); font-size: 13px; line-height: 1.6; }

/* --- tabela comparativa --- */
/*
   ⚠️ A tabela rola DENTRO do próprio contêiner, nunca a página. Sem este `overflow-x`, seis colunas
   num celular estouram o `<body>` e a página inteira ganha rolagem horizontal — o defeito que faz
   todo o layout deslizar de lado ao arrastar.

   O `tabindex="0"` está no HTML e é obrigatório: região com rolagem que não recebe foco é
   inalcançável por teclado.
*/
.tabela-rolagem {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--branco);
  -webkit-overflow-scrolling: touch;
}
.comparativo { width: 100%; border-collapse: collapse; font-size: 14px; }
.comparativo th, .comparativo td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--borda); }
.comparativo thead th {
  position: sticky;
  top: 0;
  background: var(--branco);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.comparativo tbody th { font-weight: 600; color: var(--texto); }
.comparativo td { color: var(--texto-fraco); white-space: nowrap; }
.comparativo tbody tr:last-child th, .comparativo tbody tr:last-child td { border-bottom: 0; }
.comparativo tbody tr:hover th, .comparativo tbody tr:hover td { background: rgba(64, 62, 105, .03); }
.sim { color: var(--dourado-escuro); font-weight: 800; }
/* O traço do que NÃO está no plano. Um "×" vermelho leria como erro; o traço diz "não tem" sem
   acusar o plano mais barato de estar quebrado. */
.nao { color: #c3c0b7; font-weight: 700; }

/* A coluna do plano é CENTRALIZADA; só o nome do recurso, à esquerda, fica alinhado ao texto. */
.comparativo thead th:not(:first-child), .comparativo tbody td { text-align: center; }
.comparativo thead th small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--texto-fraco); }
.comparativo thead th.col-destaque { color: var(--dourado-escuro); }
.comparativo td.num { color: var(--texto); font-weight: 600; }

/*
   A linha de TÍTULO DE GRUPO ("Módulos do sistema", "Em todos os planos"). Sem ela a tabela é uma
   pilha de vinte linhas iguais, e a fronteira entre o plano de entrada e os outros dois — que é a
   informação pela qual o visitante abriu a tabela — se perde no meio.

   ⚠️ O `:hover` do corpo precisa ser neutralizado aqui: a linha de grupo não é um recurso e não
   deve responder ao mouse como se fosse.
*/
.comparativo tbody tr.grupo th {
  background: var(--tinta-suave);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.comparativo tbody tr.grupo:hover th { background: var(--tinta-suave); }

/* --- FAQ --- */
/*
   `<details>`/`<summary>` e não acordeão em JavaScript: abre e fecha sem uma linha de script,
   funciona com o JS desligado, é navegável por teclado de graça — e o texto da resposta está no
   HTML mesmo fechado, que é a condição para o Google contar como conteúdo e para o `FAQPage` do
   JSON-LD ser legítimo.
*/
/* ⚠️ Centralizado nas LATERAIS, não no texto: o `margin-inline: auto` põe a coluna no meio da
   página e o conteúdo de cada item continua alinhado à esquerda. Centralizar o texto de um acordeão
   faz o olho procurar o começo de cada pergunta num lugar diferente. */
.faq-secao .secao-cabecalho { max-width: none; text-align: center; }
.faq-secao .faq { margin-inline: auto; }
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq-item {
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--branco);
  box-shadow: var(--sombra-1);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  /* 44px é o alvo de toque recomendado por Apple e Google; o padding acima já passa disso, o
     `min-height` garante que continue passando se o texto couber numa linha curta. */
  min-height: 44px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
}
/* O triângulo padrão do WebKit/Safari não some com `list-style: none` — precisa deste pseudo. */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2387859a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transicao);
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item summary:hover { color: var(--roxo-claro); }
.faq-item > p { padding: 0 18px 16px; color: var(--texto-fraco); font-size: 14.5px; line-height: 1.65; max-width: 72ch; }

/* --- chamada final (o CTA repetido no fim de cada página) --- */
.chamada { display: grid; gap: 14px; justify-items: center; text-align: center; padding: clamp(26px, 4vw, 48px); }
.chamada .lead { margin-inline: auto; }
.chamada .botoes { justify-content: center; }

/* --- página de contato --- */
/*
   Duas colunas: TELEFONE à esquerda, formulário à direita (28/08/2026, pedido do cliente).
   `.secao--formulario` (a versão de uma coluna centralizada) continua existindo para quem precisar
   dela — a 404 e o agradecimento usam o mesmo vocabulário.

   ⚠️ A esquerda é a coluna ESTREITA (.82 contra 1.18) e não meio a meio como era até 28/08/2026.
   Com 1fr 1fr o cartão do telefone — que tem quatro linhas — ficava do tamanho do formulário e
   sobrava um vazio de meia tela embaixo dele.
*/
.contato-topo { margin-bottom: clamp(20px, 3vw, 32px); }
.contato-grade { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.contato-lado { display: grid; gap: 16px; align-content: start; }

/* O mesmo bege dourado da faixa de garantias da /planos: é o que faz o telefone ser lido ANTES do
   formulário, que é branco como todo cartão do site. */
.tel-cartao { background: linear-gradient(150deg, #faf8f2, #f1eee3 62%, #ece7d9); }
.tel-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); }
.tel-linha { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.tel-linha svg { width: 20px; height: 20px; color: var(--dourado-escuro); flex: none; }
/*
   ⚠️ `a.tel-num`, com o seletor de elemento: `.cartao p` pinta os parágrafos de `--texto-fraco` e
   `a` tem cor própria do reset — uma classe sozinha perderia para as duas em contextos diferentes.
*/
a.tel-num { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--texto); line-height: 1.15; }
a.tel-num:hover { color: var(--roxo-claro); }
.tel-local { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--texto-fraco); }
.tel-local svg { width: 15px; height: 15px; flex: none; }
.tel-horario { font-size: 13.5px; line-height: 1.6; color: var(--texto-fraco); }

.cliente-cartao { display: grid; gap: 6px; }
.cliente-icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-md); background: var(--grad-roxo); color: var(--branco); margin-bottom: 4px; }
.cliente-icone svg { width: 20px; height: 20px; }
.cliente-titulo { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.cliente-linha { font-size: 14px; font-weight: 600; color: var(--texto); }
.cliente-nota { font-size: 13.5px; color: var(--texto-fraco); }

.form-titulo { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.form-sub { font-size: 13.5px; color: var(--texto-fraco); margin: 4px 0 14px; }

/*
   O respiro em volta da chamada final, pedido do cliente em 28/08/2026: mais espaço acima (do
   formulário) e abaixo (da faixa escura do rodapé).

   ⚠️ A margem de BAIXO precisa das DUAS classes no seletor. Quem ela disputa é
   `.painel > .secao:last-of-type` (lá em cima, no bloco de layout), que vale 0,2,1 — o mesmo que
   `.painel > section.cta-contato`, e EMPATE em especificidade é decidido pela ordem no arquivo:
   aquela regra vem depois desta e venceria. Medido antes do conserto: 36px em vez de 56px, sem
   erro nenhum e sem nada no inspetor dizendo por quê. Com `.secao.cta-contato` são 0,3,1 e a
   disputa deixa de existir.
*/
.cta-contato { margin-top: clamp(52px, 8vh, 100px); }
.painel > section.secao.cta-contato { margin-bottom: clamp(56px, 8vh, 104px); }

/* --- rodapé --- */
/*
   Rodapé "grudento", não fixo: ele ROLA junto com o conteúdo e só desce até a base quando a página
   é curta demais para empurrá-lo até lá. Quem faz isso é o `margin-top: auto` dentro do `.painel`,
   que é uma coluna flex — a sobra vertical, quando existe, vira margem.

   ⚠️ NÃO transformar em barra presa à janela (tirando-o do `<main>` ou com `position: fixed`). Foi
   tentado em 01/08/2026 e desfeito: preso, ele fica sempre visível, mas o painel passa a terminar
   acima dele e os últimos cartões aparecem CORTADOS na borda ao rolar. O pedido é "posicionado na
   parte inferior", não "sempre à vista".

   Vale nas duas faixas sem regra extra: no desktop a sobra é do `.painel` (`flex: 1` dentro do
   `.app` fixo); em ≤1023px, onde o `.app` volta a ser estático com `min-height: 100dvh` e o painel
   passa a `flex: none`, a sobra é da própria coluna. O mesmo `auto` resolve as duas.
*/
/*
   ⚠️ FULL-BLEED de dentro de um contêiner com padding. O rodapé mora dentro do `<main id="painel">`,
   que tem `padding: … clamp(16px, 3vw, 44px)`: as margens negativas desfazem exatamente esse padding
   (e o de baixo) para o FUNDO escuro encostar nas bordas, enquanto o padding próprio devolve o
   respiro ao CONTEÚDO. Os dois `clamp` têm de continuar iguais aos do `.painel` — mudar um sem o
   outro deixa uma faixa clara de alguns pixels na lateral, que não dá erro e é fácil de não ver.

   ⚠️ Isto só é seguro porque o `.painel` tem `overflow-x: hidden`. Sem ele, a margem negativa
   geraria rolagem horizontal na página inteira.

   `margin-top: auto` é o que empurra o rodapé para a base quando a página é curta (o `.painel` é
   coluna flex). Em página longa ele vale 0 e o rodapé rola junto, como qualquer conteúdo.
*/
.rodape {
  margin: auto calc(-1 * clamp(16px, 3vw, 44px)) calc(-1 * clamp(20px, 3vh, 40px));
  padding: clamp(30px, 4vw, 48px) clamp(16px, 3vw, 44px) clamp(20px, 3vw, 26px);
  background: linear-gradient(160deg, #403e69, #2b2a4d 60%, #232240);
  color: #efeef7;
}

.rodape-grade {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.05fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

.rodape-marca img { height: 38px; width: auto; }
.rodape-marca p { margin-top: 16px; max-width: 34ch; color: #b6b3cd; font-size: 13.5px; line-height: 1.65; }

/*
   ⚠️ As quatro colunas — os três menus e a de segurança — são O MESMO componente. A de segurança
   chegou a ter cartão roxo e fundo próprio, e foi desfeito: com o rodapé inteiro escuro, aquilo
   virava uma caixa dentro de outra da mesma cor. O que a distingue é o ícone de cada linha, não a
   tinta atrás dela.
*/
.rodape-col h3 { margin-bottom: 13px; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: #ddb96b; }
.rodape-col ul { display: grid; gap: 9px; list-style: none; }
/* 24px é o alvo de toque mínimo do WCAG 2.5.8 — a mesma regra da linha de baixo. */
.rodape-col a { display: inline-flex; align-items: center; min-height: 24px; color: #b6b3cd; font-size: 13.5px; }
.rodape-col a:hover { color: var(--branco); }

.rodape-menus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }

/* ⚠️ `center` e não `flex-start`: a linha de detalhe saiu (28/08/2026) e sobrou só o título — com
   o alinhamento pelo topo, o ícone ficava um fio acima da palavra. */
.rodape-seguranca li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.45; }
/* ⚠️ MESMA tinta e MESMO corpo dos links das outras três colunas (28/08/2026, pedido do cliente).
   Em branco e em negrito, os quatro selos pesavam mais que os menus ao lado e o rodapé parecia ter
   dois níveis de importância — quando a coluna é só mais uma das quatro. */
/* ⚠️ Classe própria, e não `li span`: o ícone também é um `<span>` (`.rs-marca`), e um seletor por
   elemento venceria a cor dourada dele por especificidade — os quatro ícones ficariam cinza. */
.rs-nome { color: #b6b3cd; font-size: 13.5px; }
.rs-marca { flex-shrink: 0; color: #ddb96b; }
.rs-marca svg { width: 15px; height: 15px; }

.rodape-linha {
  max-width: 1440px;
  margin: clamp(26px, 3.5vw, 40px) auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  font-size: 12.5px; color: #a9a6c2;
}
.rodape-linha a { color: #a9a6c2; }
.rodape-linha a:hover { color: var(--branco); }
.rodape-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-left: auto; }

/* ---------------------------------------------------------------- 6b. home reestruturada */
/*
   28/08/2026. A home tinha 21 cards abaixo do hero (3 + 9 + 3 passos + 6) e o cliente resumiu bem:
   "muitos cards, fica estranho e feio". O que entrou no lugar são BLOCOS — texto de um lado, tela do
   sistema do outro, alternando o lado —, uma faixa clara para os perfis de acesso, uma faixa escura
   para as credenciais e a linha do tempo dos três passos.

   Cada bloco é uma seção com H2 próprio e assunto único, que é como o buscador lê a página. Os H2
   deixaram de ser slogans e viraram consultas de busca ("Controle financeiro da igreja: dízimos,
   ofertas e prestação de contas").
*/

/* --- bloco alternado: texto + tela --- */
.bloco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(28px, 4.5vw, 76px);
  align-items: center;
}
/* A arte sobe para a primeira coluna. `order` e não uma segunda marcação: a ORDEM DO HTML continua
   sendo texto→imagem em todo bloco, que é a ordem que o leitor de tela e o buscador percorrem. */
.bloco--inverso .bloco-arte { order: -1; }
/*
   ⚠️ E as PISTAS trocam junto. `order` reordena os itens, não as colunas: sem esta linha a arte do
   bloco invertido cai na pista de `1fr` e a captura sai 64px mais estreita que a dos vizinhos — o
   bloco do meio ficava visivelmente menor que os de cima e de baixo, sem nada quebrar.
*/
.bloco--inverso { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }

.bloco-texto { display: grid; gap: 0; align-content: start; }
.bloco-texto h2 { margin-bottom: 14px; font-size: clamp(25px, 2.7vw, 35px); letter-spacing: -.04em; text-wrap: balance; }
.bloco-texto > p { color: var(--texto-fraco); font-size: 15.5px; line-height: 1.68; max-width: 52ch; }

/*
   ⚠️ MODIFICADOR, não alteração do `.lista-check`. Aquele é usado em /planos e /contato, onde a
   linha é um item curto e cinza; aqui cada linha tem título em preto e explicação embaixo. Mexer no
   componente base mudaria as duas outras páginas sem que nada avisasse.
*/
.lista-check--rica { gap: 11px; margin-top: 22px; }
.lista-check--rica li { padding-left: 28px; font-size: 14.5px; color: var(--texto); }
.lista-check--rica li strong { font-weight: 700; }
.lista-check--rica li span { display: block; margin-top: 2px; color: var(--texto-fraco); font-size: 13.5px; }
.lista-check--rica li::before { top: .28em; width: 18px; height: 18px; background-image: var(--check-branco); background-size: 12px; }

.link-modulo { display: inline-flex; align-items: center; gap: 7px; margin-top: 24px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.link-modulo svg { width: 15px; height: 15px; transition: transform var(--transicao); }
.link-modulo:hover svg { transform: translateX(3px); }

/* --- a tela do sistema, emoldurada, com etiquetas flutuantes --- */
.bloco-arte { position: relative; }
/* Halo atrás da moldura: separa a tela do fundo bege sem precisar de mais uma borda. */
.bloco-arte::before {
  content: '';
  position: absolute;
  inset: -12% -8%;
  border-radius: 40%;
  background: radial-gradient(circle at 50% 50%, rgba(76, 74, 134, .13), rgba(76, 74, 134, 0) 68%);
  pointer-events: none;
}
.bloco--dourado .bloco-arte::before { background: radial-gradient(circle at 50% 50%, rgba(199, 154, 63, .16), rgba(199, 154, 63, 0) 68%); }

.moldura { position: relative; padding: 7px; border: 1px solid var(--borda); border-radius: var(--r-lg); background: var(--branco); box-shadow: var(--sombra-3); }
/*
   ⚠️ `21 / 10` É A PROPORÇÃO DAS CAPTURAS (1400×~667), e não um enquadramento escolhido.

   Enquanto as três telas eram o mesmo mockup recortado, o `16 / 10` com `object-position` por bloco
   fazia sentido. Com capturas reais, recortar passou a CUSTAR CONTEÚDO: na tela de membros o corte
   lateral come a coluna de ações; na de visitantes, que é o assunto do bloco, come a TERCEIRA
   coluna — e o texto ao lado promete justamente as três. Casando a proporção, o `cover` não tem o
   que recortar e nada se perde.

   ⚠️ Ao trocar uma captura por outra de proporção diferente, este número muda junto. Deixá-lo
   defasado não dá erro: recorta em silêncio a borda que a nova imagem tem a mais.

   O `width`/`height` no `<img>` continua sendo o do arquivo — é o que reserva o espaço antes de a
   imagem chegar e impede a página de pular (CLS).
*/
.moldura img { width: 100%; aspect-ratio: 21 / 10; object-fit: cover; border-radius: 9px; border: 1px solid var(--borda); }

.etiqueta {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--branco);
  box-shadow: var(--sombra-2);
}
.etiqueta-marca { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: var(--grad-roxo); color: var(--branco); }
.etiqueta-marca svg { width: 16px; height: 16px; }
.etiqueta strong { display: block; font-size: 13.5px; letter-spacing: -.02em; }
.etiqueta span { display: block; font-size: 11.5px; color: var(--texto-fraco); }
.etiqueta--tl { top: -18px; left: -20px; }
.etiqueta--br { bottom: -18px; right: -20px; }
.etiqueta--bl { bottom: -18px; left: -20px; }

/* --- faixa clara: a caixa das seções que não são bloco --- */
.faixa {
  padding: clamp(26px, 3.5vw, 44px);
  border: 1px solid var(--borda);
  border-radius: clamp(22px, 3vw, 30px);
  background: linear-gradient(180deg, #fbfaf7, var(--branco));
  box-shadow: var(--sombra-1);
}

/* --- perfis de acesso --- */
/* Lista, não grade de cards: ícone à esquerda, nome e uma linha. O que separa um item do outro é o
   espaço; a caixa é só a faixa em volta. */
.perfis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px) clamp(26px, 4vw, 60px); margin-top: clamp(24px, 3.5vh, 38px); }
.perfil { display: flex; align-items: flex-start; gap: 14px; }
.perfil-icone { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-md); background: var(--grad-roxo); color: var(--branco); box-shadow: var(--sombra-roxa); }
.perfil-icone svg { width: 19px; height: 19px; }
.perfil h3 { margin-bottom: 5px; font-size: 16px; }
.perfil p { color: var(--texto-fraco); font-size: 14px; line-height: 1.6; }

/* A linha que recolhe os módulos sem bloco próprio na home: mantém as palavras e os links internos
   sem trazer de volta uma grade de nove cards. */
.tambem { margin-top: clamp(26px, 4vh, 38px); padding-top: clamp(20px, 3vh, 28px); border-top: 1px solid var(--borda); color: var(--texto-fraco); font-size: 14.5px; line-height: 1.7; }
.tambem a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* --- credenciais: a ÚNICA faixa escura da página --- */
/*
   É de propósito: a carteirinha é o recurso que se MOSTRA, não se explica. Espalhar faixas escuras
   pela página tiraria o destaque justamente deste bloco — foi por isso que o de suporte, que também
   era roxo, voltou a ser faixa clara.
*/
/*
   ⚠️ ENCOLHIDA em 28/08/2026 a pedido do cliente: era a seção mais alta da página (~780px no
   desktop) e o botão do fim saiu junto. Os três números que a governam mudaram juntos — o padding
   da faixa, a altura do palco e a largura do cartão. Mexer só num deles reabre o vão: o palco tem
   ALTURA FIXA porque os cartões são `position: absolute` (é o que permite o leque), então ele não
   encolhe sozinho quando o cartão diminui, e sobra ar embaixo sem nada denunciar.
*/
/*
   ⚠️ FAIXA DE PONTA A PONTA, como o `.rodape` e o `.banner-topo` — e com a mesma técnica: margem
   horizontal negativa igual ao padding do `.painel`, e o padding próprio devolvendo o respiro. Os
   dois `clamp` TÊM de continuar iguais aos de lá; se um mudar sozinho, sobra uma tira bege na
   lateral que nada denuncia. Só é seguro porque o `.painel` tem `overflow-x: hidden`.

   ⚠️ Sem `border-radius`: canto arredondado numa faixa que vai de ponta a ponta desenha uma falha
   bege nos quatro cantos, contra a borda da janela.

   ⚠️ E as margens verticais são GRANDES de propósito (pedido do cliente, 28/08/2026): a faixa
   escura precisa de ar dos dois lados, senão encosta no bloco de cima e no mapa de baixo e a página
   vira uma emenda de blocos. São ~3x a `.mt-lg` das outras seções.

   ⚠️ O clamp é em `vw`, não em `vh` como o resto do arquivo: a ALTURA da janela não diz nada sobre
   o quanto uma faixa precisa respirar, e num notebook baixo o espaço encolhia justamente onde o
   pedido era o contrário.
*/
.credenciais {
  position: relative;
  margin: clamp(54px, 5.5vw, 96px) calc(-1 * clamp(16px, 3vw, 44px));
  padding: clamp(40px, 5vw, 68px) clamp(16px, 3vw, 44px);
  background: linear-gradient(150deg, #4c4a86, #2b2a4d 62%, #232240);
  color: var(--branco);
  overflow: hidden;
}
.credenciais::before {
  content: '';
  position: absolute;
  top: -46%; left: 50%;
  width: 44%; aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: radial-gradient(circle at 50% 50%, rgba(216, 171, 82, .22), rgba(216, 171, 82, 0) 66%);
  pointer-events: none;
}
/*
   ⚠️ DUAS COLUNAS no topo da faixa: texto à esquerda, carteirinhas à direita. Eram empilhados, e
   sobrava um vazio grande à direita do parágrafo enquanto os cartões flutuavam centrados embaixo —
   foi o que o cliente apontou. Os quatro argumentos (`.cred-itens`) continuam ocupando a largura
   inteira, embaixo.
*/
.credenciais > .secao {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.credenciais .secao-cabecalho { margin-bottom: 0; }
.cred-itens { grid-column: 1 / -1; }
.credenciais .secao-cabecalho, .cartoes-palco, .cred-itens { position: relative; }
.credenciais .titulo-secao { color: var(--branco); }
.credenciais .lead { color: #d2d0e3; }

/*
   As duas carteirinhas são desenhadas em HTML e CSS, não são imagem: é o mesmo cartão que o editor
   do sistema produz, e assim ele acompanha a marca sem alguém ter de regerar um PNG. Ao mudar o
   layout do cartão no produto, este bloco é o que precisa acompanhar.
*/
/* ⚠️ `justify-self: end` + largura do próprio grupo: sem isso o palco ocupa a coluna inteira e os
   cartões, ancorados no centro DELE, param no meio do vazio em vez de encostar na borda direita do
   conteúdo — que é onde o texto ao lado termina. */
.cartoes-palco { height: clamp(224px, 23vw, 268px); justify-self: end; width: min(100%, 530px); }
.cartao-membro {
  position: absolute;
  /*
     ⚠️ Ancorado à DIREITA (`right: 0`), não no centro do palco. Ancorado no centro, a borda direita
     do grupo parava a uma distância que dependia da largura do palco MENOS a do cartão — 46px em
     1440, 63px em 1200 — e nunca encostava na coluna do texto, que é onde o cliente pediu que
     encostasse. Com `right: 0` a distância é fixa e sai da conta abaixo.
  */
  top: 50%; right: 0;
  width: clamp(258px, 23vw, 300px);
  aspect-ratio: 1.586;                 /* a proporção do cartão físico (ISO 7810 ID-1) */
  padding: 15px 17px;
  border-radius: 14px;
  box-shadow: 0 26px 50px rgba(12, 11, 26, .45);
  font-size: 11px;
  line-height: 1.35;
}
/*
   ⚠️ Os dois `translateX` são em % da LARGURA DO CARTÃO, e é isso que faz a composição sobreviver
   ao `clamp` da largura: giram e deslocam juntos, em qualquer tela.

   O -3% do verso cancela o quanto o giro de 6° o faz transbordar da própria caixa
   (cos6/2 + sen6/(2·1,586) − 1/2 ≈ 0,0303 da largura) — é o que põe a ponta do grupo exatamente na
   borda direita do palco. O -39% da frente é esse mesmo -3% mais os 36% que sempre separaram os
   dois cartões.
*/
.cartao-membro--frente { z-index: 2; transform: translateY(-50%) rotate(-6deg) translateX(-39%); background: linear-gradient(150deg, #fff, #f2f0ea); color: var(--texto); border: 1px solid rgba(255, 255, 255, .7); }
.cartao-membro--verso  { z-index: 1; transform: translateY(-50%) rotate(6deg) translateX(-3%);  background: linear-gradient(150deg, #403e69, #2f2d52); color: #efeef7; border: 1px solid rgba(255, 255, 255, .12); }

.cm-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid rgba(33, 31, 51, .12); }
.cartao-membro--verso .cm-topo { border-bottom-color: rgba(255, 255, 255, .14); }
.cm-igreja { font-size: 11.5px; font-weight: 800; letter-spacing: -.02em; }
.cm-tipo { font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dourado-escuro); }
.cartao-membro--verso .cm-tipo { color: #ddb96b; }

.cm-corpo { display: flex; gap: 12px; margin-top: 11px; }
/* ⚠️ A foto é QUADRADA, de canto leve — a regra de imagem do produto. Nada de círculo. */
.cm-foto { display: grid; place-items: center; width: 62px; height: 62px; flex-shrink: 0; border-radius: 6px; background: var(--grad-roxo); color: var(--branco); font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.cm-nome { font-size: 14px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.cm-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin-top: 9px; }
.cm-campo dt { font-size: 7.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fraco); }
.cm-campo dd { margin: 0; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }

.cm-verso-corpo { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.cm-qr { width: 74px; height: 74px; flex-shrink: 0; padding: 4px; border-radius: 6px; background: var(--branco); }
.cm-qr img { width: 100%; height: 100%; }
.cm-verso-texto { font-size: 9.5px; color: #c9c7dd; line-height: 1.5; }
.cm-verso-texto strong { display: block; margin-bottom: 3px; font-size: 10.5px; color: var(--branco); }
.cm-validade { display: inline-block; margin-top: 7px; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); font-size: 9px; font-weight: 700; letter-spacing: .06em; }

.cred-itens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(20px, 3vh, 28px); }
.cred-item { padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--r-md); background: rgba(255, 255, 255, .07); }
.cred-item svg { width: 18px; height: 18px; margin-bottom: 8px; color: #ddb96b; }
.cred-item strong { display: block; font-size: 13.5px; letter-spacing: -.02em; }
.cred-item span { display: block; margin-top: 3px; font-size: 12px; color: #c2bfd8; line-height: 1.45; }

/* ------------------------------------------------------- alcance (onde atendemos) */
/* ⚠️ A margem de baixo é maior que a `.mt-lg` das outras seções: acima dela vem a faixa escura de
   ponta a ponta, e o pedido do cliente foi justamente por mais ar entre as duas. */
.alcance {
  margin-bottom: clamp(30px, 4.5vh, 60px);
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
  padding: clamp(26px, 3.4vw, 46px) clamp(22px, 3.4vw, 48px);
  border: 1px solid var(--borda);
  border-radius: clamp(22px, 3vw, 32px);
  background: linear-gradient(150deg, #faf8f2, #f1eee3 62%, #ece7d9);
  box-shadow: var(--sombra-1);
}

/* O palco do mapa. `position: relative` porque TODO pin é posicionado em % sobre ele — e a % só
   funciona se a caixa tiver exatamente a proporção do `viewBox` do SVG, garantida pelo `img`. */
.mapa-palco { position: relative; }
.mapa-palco > img { width: 100%; height: auto; }

/*
   ⚠️ A PROJEÇÃO É EQUIRRETANGULAR e o recorte do arquivo é lon -180..180, lat 79..-57. Todo `left`
   e `top` desta seção sai de duas contas, e mudar o recorte do SVG obriga a refazer as duas:
       left% = (lon + 180) / 3.6          top% = (79 - lat) / 1.36
*/
.pin, .ponto { position: absolute; transform: translate(-50%, -100%); }

/*
   A gota: quadrado com três cantos redondos e um reto, girado 45° — a ponta fica embaixo, no ponto
   exato da coordenada. É a forma de marcador que todo mundo reconhece.

   ⚠️⚠️ O TAMANHO É EM % DO MAPA, nunca em px. As distâncias entre marcadores são percentuais e
   encolhem junto com o mapa; um pin de 30px fixos, num mapa que cai de 667px para 293px no celular,
   dobra de tamanho RELATIVO — e o trio europeu, que no desktop é um grupinho legível, virava um
   borrão roxo de 45px. Em %, a composição é idêntica em qualquer largura. O `min-width` é só o
   piso onde a gota deixaria de ser uma forma.
*/
.pin { width: 4.4%; min-width: 12px; }
.pin-gota {
  display: grid;
  place-items: center;
  width: 100%; aspect-ratio: 1;
  border-radius: 50% 50% 0 50%;
  transform: rotate(45deg);
  background: linear-gradient(140deg, var(--roxo-claro), var(--roxo));
  /* ⚠️ O anel branco não é enfeite: Portugal, Espanha e Inglaterra se tocam mesmo depois do
     afastamento manual, e sem uma borda clara as três gotas viram um borrão roxo só. */
  box-shadow: 0 0 0 2.5px #f4f1e7, 0 6px 14px rgba(43, 42, 77, .3);
}
/* A marca volta ao prumo: o giro do pai levaria o "P" junto. */
.pin-gota img { width: 57%; height: auto; transform: rotate(-45deg); border-radius: 22%; background: var(--branco); }

/*
   ⚠️ SÓ QUATRO RÓTULOS, e cada um em cima de água. A primeira versão rotulava os seis pins e três
   deles — Canadá, Inglaterra e Portugal — apontavam para o MESMO pedaço de Atlântico Norte, onde as
   etiquetas se sobrepunham em qualquer largura de tela. Portugal, Espanha e Inglaterra passaram a
   dividir um rótulo só, ancorado à direita do trio: no mapa-múndi os três cabem em 4° de longitude
   e nenhuma etiqueta individual caberia entre eles.
*/
.pin-rotulo, .mapa-grupo {
  padding: 3px 9px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .93);
  color: var(--texto);
  font-size: 11.5px; font-weight: 700; letter-spacing: -.005em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(43, 42, 77, .08);
}
.pin-rotulo { position: absolute; bottom: 3px; left: calc(100% + 8px); }
.pin--esq   .pin-rotulo { left: auto; right: calc(100% + 8px); }
/* Abaixo e centrado: para o pin que tem oceano embaixo e nenhum dos lados livre. */
.pin--baixo .pin-rotulo { bottom: auto; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); }

/* O rótulo do trio europeu, com um tracinho ligando ao grupo — sem ele a etiqueta parece solta
   sobre a Ásia, que é justamente onde não atendemos. */
.mapa-grupo { position: absolute; left: 54.5%; top: 24.5%; transform: translateY(-50%); }
.mapa-grupo::before {
  content: '';
  position: absolute;
  top: 50%; right: 100%;
  width: 22px; height: 1px;
  background: repeating-linear-gradient(90deg, #b9b3a2 0 3px, transparent 3px 6px);
}

/* Os pontos dourados: as REGIÕES dentro de um mesmo país. Não levam gota — nove gotas na costa
   leste dos Estados Unidos, que cabem em 3° de longitude, viram uma mancha só. */
.ponto {
  width: 1.2%; min-width: 5px; aspect-ratio: 1; height: auto;
  border-radius: var(--r-pill);
  background: var(--dourado);
  box-shadow: 0 0 0 2px rgba(250, 249, 246, .9), 0 2px 5px rgba(43, 42, 77, .28);
  transform: translate(-50%, -50%);
}

/*
   ⚠️⚠️ AS COORDENADAS VIVEM AQUI, e não num `style=` no HTML, porque a CSP do site é
   `style-src 'self'` SEM `unsafe-inline`: um atributo `style` é ignorado em SILÊNCIO, sem erro na
   tela e sem nada no console. Foi exatamente o que aconteceu na primeira tentativa — os quinze
   marcadores empilharam num ponto só, e o modelo estático (que não recebe cabeçalho de segurança)
   tinha mostrado tudo no lugar certo.

   As duas contas, sobre a projeção equirretangular do `mapa-mundi.svg` (lon -180..180, lat 79..-57):

       left(%) = (lon + 180) / 3.6            top(%) = (79 - lat) / 1.36

   ⚠️ "afastado" = deslocado à mão das coordenadas reais. O Canadá é o centroide do país e os
   Estados Unidos estão 5° a oeste do deles: no centroide real a gota tapava os pontos de Boston e
   Nova Jersey, e a do Canadá encostava na dos Estados Unidos. Portugal, Espanha e Inglaterra
   cabem em 4° de longitude no mapa-múndi e as gotas viravam uma mancha só; Maryland e Delaware
   ficam a 1° um do outro. É licença cartográfica — a precisão está na lista do texto ao lado.
*/
.pin--brasil           { left:  35.58%; top:  68.53%; }
.pin--portugal         { left:  45.90%; top:  31.40%; }   /* afastado */
.pin--espanha          { left:  50.00%; top:  27.60%; }   /* afastado */
.pin--estados-unidos   { left:  22.22%; top:  25.00%; }   /* afastado */   /* afastado */
.pin--canada           { left:  26.94%; top:  15.44%; }   /* afastado */   /* afastado */
.pin--inglaterra       { left:  48.90%; top:  17.80%; }   /* afastado */
.ponto--california     { left:  16.83%; top:  31.03%; }
.ponto--tennessee      { left:  26.00%; top:  31.76%; }
.ponto--georgia        { left:  26.83%; top:  34.04%; }
.ponto--carolina-do-sul { left:  27.53%; top:  33.24%; }
.ponto--florida        { left:  27.28%; top:  37.50%; }
.ponto--maryland       { left:  28.60%; top:  29.41%; }   /* afastado */
.ponto--delaware       { left:  29.40%; top:  29.41%; }   /* afastado */
.ponto--nova-jersey    { left:  29.25%; top:  28.53%; }
.ponto--boston         { left:  30.25%; top:  26.91%; }

.alcance-texto > p { color: var(--texto-fraco); font-size: 15.5px; line-height: 1.68; max-width: 52ch; }
.alcance-texto > p + p { margin-top: 12px; }
.alcance .lista-check { margin-top: clamp(16px, 2.4vh, 22px); }

.alcance-lista {
  margin-top: clamp(18px, 2.6vh, 24px);
  padding-top: clamp(14px, 2vh, 18px);
  border-top: 1px solid #e2ddcd;
  color: var(--texto-fraco);
  font-size: 13.5px; line-height: 1.7;
}
.alcance-lista strong { color: var(--texto); font-weight: 700; }

/* --- suporte --- */
.suporte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.suporte h2 { margin-bottom: 12px; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.04em; text-wrap: balance; }
.suporte p { color: var(--texto-fraco); font-size: 15.5px; line-height: 1.65; max-width: 46ch; }
.suporte .botao { margin-top: 24px; }

/* A conversa é HTML e CSS, não ilustração de banco de imagens: mostra o produto respondendo uma
   pergunta que o sistema realmente resolve. */
.conversa { display: grid; gap: 12px; }
.balao { max-width: 88%; padding: 14px 17px; border-radius: var(--r-lg); font-size: 13.5px; line-height: 1.55; }
.balao--deles { border: 1px solid var(--borda); background: var(--branco); box-shadow: var(--sombra-1); color: var(--texto); }
.balao--nossa { justify-self: end; background: var(--grad-roxo); color: #f1f0f8; box-shadow: var(--sombra-roxa); }
.balao-quem { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-fraco); }
.balao--nossa .balao-quem { color: #ddb96b; }
.conversa-nota { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--texto-fraco); font-size: 12px; }
.conversa-nota::before { content: ''; width: 7px; height: 7px; border-radius: var(--r-pill); background: #7ad19a; box-shadow: 0 0 0 4px rgba(122, 209, 154, .22); }

/* ---------------------------------------------------------------- 6c. prosa (blog) */
/*
   O corpo do artigo vem de um arquivo HTML sem classe nenhuma — quem escreve põe `<p>` e `<h2>` e
   pronto. Toda a tipografia é por descendência.

   Voltou em 26/08/2026 junto com o blog; tinha saído em 01/08 com ele. É o mesmo bloco, sem
   invenção: o que funcionava continua funcionando, e reescrever daria um segundo estilo de artigo
   sem nenhum ganho.
*/
.prosa { max-width: 68ch; color: var(--texto); font-size: 17px; line-height: 1.72; }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { margin-top: 1.9em; font-size: 26px; letter-spacing: -.03em; }
.prosa h3 { margin-top: 1.6em; font-size: 20px; }
.prosa a { text-decoration: underline; text-underline-offset: 3px; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li + li { margin-top: .4em; }
.prosa blockquote {
  margin-left: 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--dourado);
  color: var(--texto-fraco);
  font-style: italic;
}
.prosa figure { margin: 1.8em 0; }
.prosa img { border-radius: var(--r-lg); border: 1px solid var(--borda); }
.prosa figcaption { margin-top: 8px; font-size: 13px; color: var(--texto-fraco); }
.prosa code {
  padding: 2px 6px;
  border-radius: 6px;
  background: #efeee9;
  font-size: .88em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* ⚠️ A tabela do artigo rola dentro do próprio contêiner pelo mesmo motivo da comparativa de
   planos: sem isso, uma tabela larga estoura o `<body>` e a página inteira desliza de lado. */
.prosa .tabela-rolagem { margin: 1.6em 0; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prosa th, .prosa td { padding: 9px 12px; border: 1px solid var(--borda); text-align: left; }
.prosa th { background: #faf9f6; font-weight: 700; }

/* --- a linha de contexto do ARTIGO (não da listagem; ver § 6c-2) --- */
/*
   ⚠️ NÃO tem mais `<time>` desde 29/08/2026: o blog não exibe data de postagem em lugar nenhum
   (decisão do cliente). Sobraram a categoria e o autor. A data continua existindo — ela sai do NOME
   DO ARQUIVO, ordena a listagem e agenda a publicação —, só não aparece.
*/
.artigo-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 9px; font-size: 12px; font-weight: 600; color: var(--texto-fraco); }
.artigo-meta .categoria { color: var(--dourado-escuro); text-transform: uppercase; letter-spacing: .06em; }

/* ------------------------------------------- 6c-1. a PÁGINA de um artigo (`/blog/{slug}`) */
/*
   Reformulada em 29/08/2026, a pedido do cliente. Três mudanças, e o motivo de cada uma:

   1. O ARTIGO GANHOU A FAIXA ROXA da listagem, com o título centralizado dentro dela. Quem liga a
      faixa é `rota_com_banner()` (PHP) + `rotaComBanner()` (JS) — as duas, sempre.

   2. A CAPA ATRAVESSA A BORDA da faixa: 30% da altura dela pousa sobre o roxo e o resto desce para
      o corpo. A conta está em `.artigo-capa`, e é ela que obriga a faixa a abrir espaço embaixo.

   3. A COLUNA DE TEXTO ENCOLHEU E FOI CENTRALIZADA. Antes a `.prosa` (68ch) vivia solta numa
      `.secao` de 1440px: o texto ficava colado à esquerda e sobrava, à direita, um vazio do mesmo
      tamanho do artigo. Não era alinhamento — era o resto da seção aparecendo.

   ⚠️ O corpo do texto foi comparado em DOIS modelos — direto no fundo da página e dentro de um
   cartão branco com sombra suave. Ficou o primeiro (cliente, 30/08/2026), e o segundo saiu daqui
   junto com o `blog.artigo_modelo` do config e o seletor da view. Não há chave para ligá-lo de
   volta: era um teste, não uma opção do produto.
*/

/* ⚠️ Em `:root`, e não dentro de `.artigo`: a FAIXA precisa desta medida para calcular o próprio
   recuo de baixo (é ela que abre espaço para os 30% da imagem), e a faixa é IRMÃ do artigo — não
   descendente. Declarada no `.artigo`, chegaria à faixa como valor inválido e o `calc` inteiro
   morreria, deixando a imagem por cima do texto do título. */
/*
   ⚠️ `--artigo-largura` é a ÚNICA medida a mexer para alargar ou estreitar o TEXTO. Nasceu 720px,
   foi para 820 e daí para 900 em 30/08/2026 (duas vezes "ficou estreito", no mesmo dia).

   ⚠️⚠️ E a CAPA tem largura PRÓPRIA, menor. Ela acompanhava a coluna, e a 820px virava um painel
   que tomava a tela inteira antes da primeira linha do texto — o cliente resumiu como "enorme".
   São duas medidas porque servem a duas coisas: a do texto é medida de LEITURA (quantos caracteres
   cabem numa linha antes de o olho se perder na volta), a da capa é peso VISUAL. Amarrar as duas
   faz uma piorar sempre que a outra melhora.

   ⚠️ E é a da CAPA que entra no recuo de baixo da faixa (`.banner-topo--capa`), porque é a imagem
   que precisa caber lá — trocar uma pela outra ali desalinha o transbordo sem erro nenhum.
*/
:root {
  --artigo-largura: 900px;
  --artigo-capa-largura: 600px;
}

/* --- o cabeçalho, dentro da faixa --- */
.artigo-cabecalho { max-width: 64ch; margin-inline: auto; text-align: center; }
.artigo-voltar { margin-bottom: 16px; font-size: 13px; font-weight: 600; }
.banner-topo--artigo .artigo-voltar a { color: var(--banner-tinta-fraca); }
.banner-topo--artigo .artigo-voltar a:hover { color: var(--branco); }

/*
   O PÉ DA FAIXA: a linha de contexto à esquerda, o botão de compartilhar à direita.

   ⚠️ `text-align: left` desfaz o centro do `.artigo-cabecalho`. Sem isso o rótulo do botão sairia
   centrado dentro dele — visível só quando o texto quebra em duas linhas, que é o caso do celular.

   ⚠️ E o `justify-content: space-between` só empurra o botão para a direita enquanto os dois cabem
   na linha; com o `flex-wrap`, no celular a meta fica em cima e o botão embaixo, à esquerda. É o
   comportamento certo: um botão sozinho e centralizado no fim da faixa pareceria o CTA da página.
*/
.artigo-faixa-pe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  margin-top: clamp(26px, 4vh, 42px);
  text-align: left;
}
/*
   ⚠️ SEM linha divisória aqui (decisão do cliente, 30/08/2026). Chegou a existir um
   `border-top: 1px solid rgba(255,255,255,.14)` separando esta linha do lead — e ele cortava a
   faixa ao meio, competindo com a própria borda de baixo do roxo, que já é o fim visual do bloco.
   Quem separa é o espaço.

   A margem de baixo era do tempo em que a linha ficava ACIMA do título; aqui ela é a última coisa
   da faixa e a margem só somaria ao recuo que já segura a capa.

   ⚠️ E o corpo é MENOR que o dos 12px da listagem: aqui a linha é contexto secundário embaixo de um
   título de 50px, e não a única informação de um cartão.
*/
.artigo-meta--banner { margin-bottom: 0; font-size: 11px; color: var(--banner-tinta-fraca); }
/* O dourado escuro da listagem é ilegível sobre o roxo; aqui vale o claro. */
.banner-topo--artigo .artigo-meta .categoria { color: var(--dourado-claro); }

/* ⚠️ Reusa `.botao--vidro` (§ 5b), que já é o botão claro sobre faixa escura — era exatamente para
   isto que ele nasceu modificador em vez de `.app--banner .botao--fantasma`. Aqui só entram o
   tamanho menor e o ícone. */
.botao--compartilhar { gap: 8px; padding: 8px 15px; font-size: 13px; }
.botao--compartilhar svg { width: 15px; height: 15px; flex-shrink: 0; }
.partilha[data-aberto] .botao--compartilhar { background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .36); }

/*
   A LISTA DE DESTINOS.

   ⚠️⚠️ ABRE PARA CIMA, e isso não é gosto: o `.banner-topo` tem `overflow: hidden` (ele segura os
   próprios halos), então tudo que passar da borda de BAIXO da faixa é cortado — e sem capa aquela
   borda fica a poucos pixels do botão. Para cima há sempre o título e o lead, ou seja, espaço de
   sobra. Tirar o `overflow` da faixa para "resolver" soltaria os halos por cima da página inteira.

   ⚠️ E é o `.partilha` que tem `position: relative`, não o `.artigo-faixa-pe`: ancorado no pai
   maior, o menu se alinharia à borda da COLUNA e não à do botão.
*/
.partilha { position: relative; }
.partilha-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 3;
  display: flex; flex-wrap: wrap; gap: 2px;
  width: max-content; max-width: min(500px, calc(100vw - 40px));
  padding: 6px;
  border-radius: var(--r-lg);
  background: var(--branco);
  box-shadow: var(--sombra-3);
  text-align: center;
}
/* ⚠️ Este menu é `flex`, então o `hidden` do HTML não o esconderia sozinho — ele nascia ABERTO na
   tela, sem ninguém ter clicado. Quem resolve é o `[hidden]` do reset (§ 3), não uma regra aqui. */
/*
   Cada destino é uma coluna: ícone em cima, nome embaixo. ⚠️ `flex-wrap` no menu e largura fixa no
   item: a 1440px os oito cabem numa linha só (que é a lista horizontal pedida) e no celular eles
   quebram em duas — melhor que uma tira que rola de lado, onde os últimos ficam invisíveis sem
   nada dizendo que existem.
*/
.partilha-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 56px;
  padding: 7px 3px 6px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--texto);
  font: inherit; font-size: 10px; font-weight: 600; line-height: 1.2;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.partilha-item:hover { background: var(--tinta-suave); color: var(--roxo-claro); }
.partilha-item svg { width: 17px; height: 17px; }
/* O estado "copiei o link" — dourado, o mesmo sinal de confirmação do resto do site. */
.partilha-item.is-copiado { background: rgba(199, 154, 63, .16); color: var(--dourado-escuro); }

/* ⚠️ Menor que o `.titulo-hero` da home, e sem o `max-width: 15ch` dele: aquele é uma frase de
   quatro palavras, este é um título de artigo inteiro. A 68px e 15ch, "Tesouraria da igreja:
   funções, controles e prestação de contas" vira cinco linhas e toma a dobra sozinho. */
.titulo-hero--artigo { max-width: none; font-size: clamp(29px, 3.9vw, 50px); }
.banner-topo--artigo .lead { margin-inline: auto; }
/* O respiro de baixo quem dá é o padding da faixa (que ainda precisa caber a imagem); a margem do
   `.titulo-hero + .lead` somaria a ele e afastaria a capa do texto. */
.banner-topo--artigo .titulo-hero + .lead { margin-bottom: 0; }

/*
   ⚠️ CLASSE DOBRADA (`.banner-topo.banner-topo--capa`) de propósito. A faixa tem `padding` e
   `margin` REDEFINIDOS dentro do `@media (max-width: 1023.98px)`, que neste arquivo vem DEPOIS
   deste bloco. Com um seletor de mesmo peso, o de baixo venceria e no tablet/celular a faixa
   voltaria ao recuo curto — a imagem subiria por cima do texto do título.
*/
.banner-topo.banner-topo--capa {
  /* Espaço para os 30% da imagem que pousam no roxo, mais o respiro abaixo do texto. O `min()`
     repete a largura real da imagem: ela é a coluna, ou a tela, o que for menor. */
  padding-bottom: calc(min(var(--artigo-capa-largura), 100vw - 40px) * .16875 + clamp(26px, 4vh, 48px));
  /* ⚠️ ZERO. Qualquer margem aqui empurraria a imagem para baixo exatamente o quanto ela sobe, e o
     transbordo simplesmente não aconteceria — sem nada na tela explicando por quê. */
  margin-bottom: 0;
}

/* --- a capa que atravessa a borda da faixa --- */
/*
   ⚠️ A imagem NÃO pode morar dentro do `.banner-topo`: ele tem `overflow: hidden` para segurar os
   halos, e cortaria fora os 70% que descem. Ela é irmã da faixa e sobe por margem negativa.
*/
.artigo-capa-area {
  position: relative;
  z-index: 1;              /* acima da faixa, que é `position: relative` sem z-index */
  /* ⚠️ OBRIGATÓRIO: o `.painel` é coluna flex e margem `auto` no eixo cruzado CANCELA o stretch —
     sem isto o bloco encolhe até a largura do conteúdo. É a mesma nota de `.painel > .secao`. */
  width: 100%;
  max-width: var(--artigo-capa-largura);
  margin: 0 auto clamp(30px, 5vh, 56px);
}
.artigo-capa {
  /*
     A CONTA DOS 30%: a imagem é 16:9, então a altura é .5625 × a largura; 30% disso é .16875 × a
     largura. E margem em porcentagem se resolve pela LARGURA DO CONTÊINER — que aqui é exatamente
     a largura da imagem. Daí `-16.875%` subir 30% da PRÓPRIA ALTURA em qualquer tela, sem uma
     única media query. Mudar a proporção da imagem obriga a refazer este número.
  */
  margin: -16.875% 0 0;
}
.artigo-capa img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: 0 26px 60px rgba(24, 22, 46, .3);
}

/* --- a coluna de leitura --- */
.artigo-coluna { max-width: var(--artigo-largura); margin-inline: auto; }
/* ⚠️ Quem manda na medida agora é a COLUNA, não a `.prosa`. Com os 68ch dela de pé (~578px a 17px),
   o texto pararia antes da borda da coluna e o vazio à direita reapareceria — só que menor, e por
   isso mais difícil de notar. */
.artigo .prosa { max-width: none; }

/*
   O CTA DA LEITURA — o painel escuro que manda para a `/planos`.

   ⚠️ Classe PRÓPRIA, e não o `.cta-modulos` da /recursos: aquele é um painel de página inteira, com
   lista de check e respiro de seção. O pedido aqui foi "não muito alto", dentro de uma coluna de
   leitura. O que se reusa é o vocabulário — os dois halos, o `.cta-kicker`, o cartão de vidro do
   preço —, não a caixa.

   ⚠️ 80% da coluna (pedido do cliente, 30/08/2026). É o que o faz ler como um bloco DESTACADO do
   texto em vez de mais um parágrafo largo: a ponta dele fica visivelmente aquém da margem em que
   toda linha do artigo termina.
*/
.cta-artigo {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  width: 80%;
  margin-inline: auto;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 36px);
  border-radius: clamp(20px, 2.4vw, 26px);
  background: var(--grad-roxo);
  color: #f1f0f8;
  box-shadow: var(--sombra-roxa);
  transition: box-shadow var(--transicao), transform var(--transicao);
}
/* A interação do bloco inteiro: ele sobe um fio e a sombra abre. ⚠️ `translateY` e não `scale` —
   escalar um painel com texto dentro borra a fonte enquanto a transição roda. */
.cta-artigo:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(64, 62, 105, .34); }

/* Os mesmos dois gestos do `.cta-modulos`: dourado em cima à direita, luz fria embaixo à esquerda. */
.cta-artigo::before,
.cta-artigo::after {
  content: '';
  position: absolute;
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  pointer-events: none;
  transition: transform var(--transicao), opacity var(--transicao);
}
.cta-artigo::before {
  top: -66%; right: -4%; width: 40%;
  background: radial-gradient(circle at 50% 50%, rgba(216, 171, 82, .32), rgba(216, 171, 82, 0) 68%);
}
.cta-artigo::after {
  bottom: -54%; left: -6%; width: 34%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 68%);
}
/* O halo dourado cresce um pouco no hover — é o que dá vida ao painel sem mexer no texto. */
.cta-artigo:hover::before { transform: scale(1.18); opacity: .9; }
/* ⚠️ As colunas sobem acima dos halos: eles são irmãos, não fundo. */
.cta-artigo > * { position: relative; }

.cta-artigo-texto h2 {
  margin-top: 12px;
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
}
/* ⚠️ `.cta-artigo-texto p` e NÃO `.cta-artigo p` — a mesma pegadinha anotada no `.cta-modulos`: a
   segunda forma vence por especificidade as classes do cartão de preço ao lado, que também são
   `<p>`, e o "R$ 49" cairia para o corpo de parágrafo sem nada parecer errado no CSS. */
.cta-artigo-texto p { margin-top: 9px; font-size: 14px; line-height: 1.6; color: #c8c5dc; }

/* As pílulas com o nome dos planos. ⚠️ `<li>` e não links: três destinos para a mesma página
   competiriam com o botão ao lado, que é a ação que este bloco existe para provocar. */
.cta-artigo-planos { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.cta-artigo-planos li {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  transition: background var(--transicao), box-shadow var(--transicao);
}
.cta-artigo:hover .cta-artigo-planos li { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }

/*
   A COLUNA DA AÇÃO — hoje só o botão.

   ⚠️ O CARTÃO DE VIDRO SAIU JUNTO COM O PREÇO (30/08/2026). Ele existia para agrupar quatro coisas
   (rótulo, valor, botão e nota) num objeto só; em volta de um botão sozinho vira uma moldura sem
   conteúdo — duas bordas concêntricas, a do painel e a dela, com um vazio entre as duas. O que
   sustenta a coluna agora é o próprio botão dourado.

   ⚠️ E o botão continua a `width: 100%` da coluna. Sem isso ele encolheria até o texto ("Assine
   agora" é curto) e o painel ficaria com uma metade cheia e um selo perdido na outra — o equilíbrio
   das duas colunas vinha do cartão, e passou a ser dele.
*/
.cta-artigo-acao .botao { width: 100%; justify-content: center; }

/*
   ⚠️⚠️ O CTA MORA DENTRO DA `.prosa` (30/08/2026) — ele é injetado no corpo do artigo, na quebra de
   seção do meio, e por isso HERDA as regras de texto corrido que a § anterior aplica a todo filho
   dela. Três delas o desfiguravam em silêncio, e nenhuma dá erro nem aparece no console:

   - `.prosa a { text-decoration: underline }` sublinhava o BOTÃO dourado;
   - `.prosa ul { padding-left: 1.3em }` + `.prosa li + li { margin-top: .4em }` empurravam as
     pílulas dos planos para a direita e as desalinhavam entre si;
   - `.prosa h2 { margin-top: 1.9em; font-size: 26px }` inchava o título do CTA e abria um vão
     dentro do painel.

   ⚠️ E a margem: `.prosa > * + *` daria ao CTA o mesmo `1.1em` de um parágrafo qualquer — ele
   ficaria colado no texto, lido como continuação em vez de interrupção. O respiro próprio é o que o
   destaca; ele é maior EMBAIXO porque logo abaixo vem um `<h2>`, que já traz o seu.
*/
.prosa > .cta-artigo { margin-top: clamp(34px, 5vh, 52px); margin-bottom: clamp(12px, 2vh, 20px); }
.prosa > .cta-artigo a { text-decoration: none; }
.prosa > .cta-artigo ul { padding-left: 0; }
.prosa > .cta-artigo li + li { margin-top: 0; }
.prosa > .cta-artigo h2 { margin-top: 0; }

/* ------------------------------------------------------- 6c-2. a LISTAGEM do blog (`/blog`) */
/*
   Reescrita em 29/08/2026. A listagem era `.cartao` + `.grade--3` com data e resumo, e o cliente
   resumiu bem: "muito feia". O que mudou, e por quê:

   ⚠️⚠️ TODAS as classes daqui levam o prefixo `bl-`, e isso NÃO é enfeite. As duas primeiras
   escolhas óbvias — `.destaque` e `.etiqueta` — JÁ EXISTEM neste arquivo, e são outra coisa: a
   linha de destaque do cartão de módulo (§ 6b) e o rótulo flutuante sobre os mockups (§ 7). Sem o
   prefixo, o cartão do blog herdaria `position: absolute` do segundo e a listagem inteira
   desmontaria — sem erro nenhum, porque CSS não avisa colisão de nome.

   ⚠️ NÃO HÁ FOTO em artigo nenhum, e a capa é GERADA DO ASSUNTO: gradiente + ícone + a própria
   palavra em corpo grande e translúcido. Não é economia de trabalho — é o que dá peso visual ao
   cartão sem custar um byte de imagem, e o LCP é critério de ranqueamento. Um artigo COM o campo
   `imagem` preenchido continua funcionando: a `<img>` entra dentro da mesma `.bl-capa` e cobre o
   gradiente.
*/

/* --- o filtro por assunto --- */
/*
   ⚠️ Discreto e à DIREITA, de propósito (pedido do cliente): é um atalho para quem já sabe o que
   procura, não a entrada da página — a entrada é o artigo em destaque, logo abaixo. Uma pílula
   colorida aqui rouba dele a primeira olhada. Por isso não há caixa, nem sombra, nem contagem.

   ⚠️ E ele NÃO cria URL nova. Uma página por categoria, com dois textos cada, é conteúdo raso que
   ainda compete com a própria listagem no índice do Google.
*/
.bl-filtros { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; padding: clamp(14px, 2vh, 22px) 0 clamp(10px, 1.4vh, 16px); }
.bl-filtro {
  display: inline-flex; align-items: center;
  min-height: 26px; padding: 0 8px;
  border: 0; border-radius: 6px; background: none;
  font-size: 12px; font-weight: 600; letter-spacing: -.005em;
  color: var(--texto-fraco); opacity: .8; cursor: pointer;
  transition: color var(--transicao), opacity var(--transicao);
}
.bl-filtro:hover { color: var(--texto); opacity: 1; }
/* ⚠️ O filete é `text-decoration`, e não `border-bottom`: numa palavra que quebre em duas linhas a
   borda desenharia um traço no vão entre elas. */
.bl-filtro[aria-pressed="true"] {
  color: var(--texto); opacity: 1;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 5px; text-decoration-color: var(--dourado);
}

/* --- a capa gerada do assunto --- */
.bl-capa { position: relative; overflow: hidden; background: var(--bl-grad); color: var(--branco); }
.bl-capa::after { content: ''; position: absolute; inset: 0; background: var(--bl-trama); opacity: .5; }
.bl-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.bl-capa .bl-icone { position: absolute; top: 16px; left: 18px; z-index: 2; width: 26px; height: 26px; stroke: var(--branco); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
/* ⚠️ `bottom` NEGATIVO e `overflow: hidden` no pai: a palavra é cortada na base de propósito — é o
   que a faz ler como textura e não como legenda. */
.bl-capa .bl-glifo { position: absolute; left: 18px; bottom: -.26em; z-index: 2; margin: 0; font-size: clamp(46px, 6.4vw, 86px); font-weight: 800; letter-spacing: -.06em; text-transform: uppercase; color: var(--branco); opacity: .15; line-height: 1; white-space: nowrap; }
.bl-capa .bl-leitura { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(17, 15, 32, .34); font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; color: var(--branco); }

/*
   Um par de tokens por assunto. ⚠️ Os tons são TODOS vizinhos do roxo da marca ou do dourado — o
   verde e o terracota são dessaturados a ponto de conviverem com o bege da página. Assunto novo
   entra aqui; sem a classe, o cartão cai no `.bl-a-padrao` e continua de pé.
*/
.bl-a-padrao        { --bl-grad: linear-gradient(142deg, #5b5896, #38355d); --bl-trama: none; }
.bl-a-secretaria    { --bl-grad: linear-gradient(142deg, #5b5896, #38355d); --bl-trama: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 13px); }
.bl-a-financeiro    { --bl-grad: linear-gradient(142deg, #c79a3f, #8a651d); --bl-trama: repeating-linear-gradient(45deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 11px); }
.bl-a-celulas       { --bl-grad: linear-gradient(142deg, #4a6f8c, #2c4459); --bl-trama: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .2) 1px, transparent 1.6px) 0 0 / 14px 14px; }
.bl-a-administracao { --bl-grad: linear-gradient(142deg, #3c3a63, #211f33); --bl-trama: repeating-linear-gradient(0deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 12px); }
.bl-a-ebd           { --bl-grad: linear-gradient(142deg, #5c7a5f, #33473a); --bl-trama: repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 12px); }
.bl-a-eventos       { --bl-grad: linear-gradient(142deg, #a1704e, #6f4a33); --bl-trama: radial-gradient(circle at 8px 8px, rgba(255, 255, 255, .16) 2px, transparent 2.6px) 0 0 / 18px 18px; }

/* --- o rótulo do assunto, dentro do cartão --- */
/* ⚠️ `.bl-assunto`, e nunca `.etiqueta`: aquela já existe neste arquivo e é `position: absolute`. */
.bl-assunto { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--dourado-escuro); }
.bl-assunto::before { content: ''; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--dourado); box-shadow: 0 0 0 4px rgba(199, 154, 63, .18); }

/* --- o artigo em destaque --- */
.bl-destaque {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  overflow: hidden;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-2xl);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.bl-destaque:hover { border-color: #ddd9cd; box-shadow: var(--sombra-2); transform: translateY(-2px); }
.bl-destaque .bl-capa { min-height: 290px; }
.bl-destaque-corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(24px, 2.6vw, 40px); }
.bl-destaque-corpo h2 { font-size: clamp(23px, 2.3vw, 33px); letter-spacing: -.04em; line-height: 1.14; text-wrap: balance; }
.bl-destaque-corpo h2 a { color: inherit; }
.bl-destaque-corpo h2 a:hover { color: var(--roxo-claro); }
.bl-destaque-corpo p { color: var(--texto-fraco); font-size: 15px; line-height: 1.65; max-width: 52ch; }

/* --- a grade e o cartão --- */
/*
   ⚠️ Grade PRÓPRIA, e não `.grade--3`: a do site cai para UMA coluna abaixo de 640px, e aqui o
   cliente pediu DUAS no celular. Herdar `.grade--3` e sobrescrever depois deixaria o valor certo
   dependendo da ordem das media queries — que é o tipo de acerto que a próxima edição desfaz.
*/
.bl-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 20px); }
.bl-artigo {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-2xl);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.bl-artigo:hover { border-color: #ddd9cd; box-shadow: var(--sombra-2); transform: translateY(-3px); }
.bl-artigo .bl-capa { aspect-ratio: 16 / 9; }
.bl-artigo-corpo { display: flex; flex-direction: column; flex: 1; gap: 9px; padding: clamp(18px, 1.7vw, 24px); }
.bl-artigo-corpo h3 { font-size: 18px; line-height: 1.28; letter-spacing: -.032em; text-wrap: balance; }
.bl-artigo-corpo h3 a { color: inherit; }
.bl-artigo-corpo h3 a:hover { color: var(--roxo-claro); }
.bl-artigo-corpo p { flex: 1; color: var(--texto-fraco); font-size: 14px; line-height: 1.62; }
.bl-ler { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--roxo-claro); }
.bl-ler svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transicao); }
.bl-artigo:hover .bl-ler svg { transform: translateX(3px); }

/* O aviso do filtro sem resultado. Ocupa a linha inteira para não virar um cartão fantasma. */
.bl-vazio { grid-column: 1 / -1; padding: 44px 24px; border: 1px dashed #ddd9cd; border-radius: var(--r-2xl); text-align: center; color: var(--texto-fraco); font-size: 14.5px; }

.bl-faixa-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: clamp(16px, 2.2vh, 24px); }
.bl-faixa-titulo h2 { font-size: clamp(21px, 2vw, 28px); letter-spacing: -.04em; }
.bl-faixa-titulo .bl-conta { font-size: 13px; font-weight: 600; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }

/* --- a coluna de ação do CTA do meio --- */
/*
   O CTA entre a 3ª e a 4ª linha REUSA o `.cta-modulos` da /recursos (§ 6b) — mesmo painel, mesmos
   halos, mesma lista de check. O que muda é a coluna da direita: lá é o cartão de preço, aqui é só
   o botão. ⚠️ Preço no meio de uma leitura antecipa uma decisão que o leitor ainda não está tomando.
*/
.cta-acao { display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
.cta-acao .botao { width: 100%; justify-content: center; }
.cta-acao .cta-acao-nota { font-size: 12.5px; line-height: 1.5; color: #b8b5d0; }
/* ⚠️ O `margin-top` do `.cta-modulos h2` existe por causa do kicker da /recursos. Aqui não há
   kicker, e sem esta linha o título nasce com 14px de vazio acima dele. */
.cta-modulos--sem-kicker h2 { margin-top: 0; }

.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: clamp(22px, 3vh, 34px); }
.paginacao a, .paginacao span {
  min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--branco);
  font-size: 14px; font-weight: 600;
  color: var(--texto-fraco);
}
.paginacao a:hover { border-color: #ddd9cd; color: var(--texto); }
.paginacao .is-ativo { background: var(--grad-roxo); border-color: transparent; color: var(--branco); }

/* ------------------------------------------- 6d. documentos legais (página) e o modal do rodapé */
/*
   Termos de uso e Política de privacidade. O mesmo conteúdo é servido de dois jeitos: a página
   inteira, aberta pela URL, e o recorte que o modal do rodapé injeta (ver `paginas/legal.php` e o
   bloco "modal" do `site.js`).

   O texto vem do SISTEMA, buscado pelo servidor — não há cópia dele neste repositório.
*/
.legal { max-width: 860px; margin-inline: auto; }
.legal-cabecalho { text-align: center; margin-bottom: clamp(18px, 3vh, 28px); }
.legal-versao { margin-top: 8px; font-size: 12.5px; color: var(--texto-fraco); }
.legal-folha { padding: clamp(22px, 3.4vw, 44px); }
.legal-corpo { max-width: none; font-size: 15.5px; line-height: 1.75; }
/* ⚠️ `pre-wrap` é o que faz o formato "texto" ter parágrafos: o conteúdo chega com quebras de
   linha de verdade e nenhum `<p>`. Sem isto, o documento inteiro vira um bloco só. */
.legal-corpo--texto { white-space: pre-wrap; }
.legal-vazio { color: var(--texto-fraco); font-size: 15px; line-height: 1.7; }
.legal-vazio a { color: var(--roxo-claro); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/*
   ⚠️ `display` só com `[open]`. O navegador esconde um `<dialog>` fechado com `display: none` na
   folha de estilo DELE — uma regra de autor em `.modal { display: flex }` vence aquela e a caixa
   fica visível na página o tempo todo, empilhada sobre o conteúdo.
*/
.modal {
  width: min(760px, calc(100vw - 28px));
  max-height: min(84vh, 820px);
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--r-2xl);
  background: var(--branco);
  color: var(--texto);
  box-shadow: var(--sombra-3);
  overflow: hidden;
}
.modal[open] { display: flex; flex-direction: column; }
/* A tabela de planos precisa de mais largura que um documento legal: são quatro colunas, e a 760px
   elas nascem com barra de rolagem numa tela que tinha espaço de sobra. */
.modal--largo { width: min(1040px, calc(100vw - 28px)); }
.modal::backdrop { background: rgba(24, 22, 46, .52); }

.modal-topo {
  display: flex; align-items: flex-start; gap: 16px;
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px) 14px;
  border-bottom: 1px solid var(--borda);
}
.modal-titulo { flex: 1; font-size: clamp(19px, 2.2vw, 23px); font-weight: 800; letter-spacing: -.02em; }
.modal-x {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--borda); border-radius: var(--r-md);
  background: var(--tinta-suave); color: var(--texto-fraco);
  cursor: pointer; transition: var(--transicao);
}
.modal-x:hover { background: var(--fundo); color: var(--texto); }
.modal-x svg { width: 16px; height: 16px; }

/* Quem rola é o CORPO, não a caixa: o título e os botões ficam parados, que é o que permite fechar
   sem antes rolar um documento de vinte parágrafos até o fim. */
.modal-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: clamp(18px, 2.6vw, 28px) clamp(18px, 2.6vw, 30px); }
.modal-corpo .legal-corpo { font-size: 14.5px; }
.modal-corpo [data-legal-versao] { margin-bottom: 14px; font-size: 12px; color: var(--texto-fraco); }
.modal-carregando { color: var(--texto-fraco); font-size: 14px; }

.modal-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px clamp(18px, 2.6vw, 30px) clamp(16px, 2.2vw, 22px);
  border-top: 1px solid var(--borda);
  background: var(--tinta-suave);
}
.modal-permalink { font-size: 13px; font-weight: 700; color: var(--texto-fraco); text-decoration: underline; text-underline-offset: 3px; }
.modal-permalink:hover { color: var(--roxo-claro); }
/* Rodapé de UM botão só: sem o `flex-end` o `space-between` o deixaria encostado na esquerda, longe
   de onde a mão procura o "Fechar". */
.modal-rodape--fim { justify-content: flex-end; }

/* ---------------------------------------------------------------- 7. utilitários */
.sr-apenas {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.coluna-texto { flex: 1; min-width: min(100%, 420px); }
.centro { max-width: 780px; margin-inline: auto; text-align: center; }
.centro .lead, .centro .secao-cabecalho { margin-inline: auto; }
.pilha { display: flex; flex-direction: column; }
.gap-sm { gap: 10px; } .gap-md { gap: 18px; } .gap-lg { gap: clamp(22px, 3vh, 36px); }
.mt-lg { margin-top: clamp(22px, 3vh, 36px); }

/*
   ⚠️ `mt-xl` é ~2x a `mt-lg`, e existe para o FIM da página. O ritmo de 27px separa bem seções que
   são texto sobre o bege; entre CARTÕES e FAIXAS grandes (o suporte, o FAQ, a chamada final) ele
   cola uma caixa na outra e a leitura vira uma escada de blocos. Pedido do cliente em 28/08/2026,
   nas três emendas do rodapé da home.
*/
.mt-xl { margin-top: clamp(40px, 6vh, 72px); }

/*
   O respiro entre a ÚLTIMA seção e a faixa escura do rodapé.
   ⚠️ Vai na seção, e não como `margin-top` do `.rodape`: lá a margem de cima é `auto` — é ela que
   empurra o rodapé para a base quando a página é curta —, e trocá-la por um valor fixo deixaria uma
   tira bege abaixo do rodapé em toda página curta (a 404, o contato enviado).
   Todas as páginas do site terminam em `<section>` filha direta do painel; o rodapé é `<footer>`,
   então `:last-of-type` continua sendo a última seção de conteúdo.
*/
.painel > section:last-of-type { margin-bottom: clamp(34px, 5vh, 64px); }

/* Estado de carregamento durante o fetch de navegação. */
[aria-busy='true'] { opacity: .55; transition: opacity .12s linear; }

/*
   O fundo da gaveta só existe abaixo de 1024px (onde a regra vira `display:block`). A regra base
   precisa estar AQUI, fora da media query: sem ela o elemento não teria `display` declarado e
   apareceria como um botão sólido cobrindo a tela inteira no desktop.
*/
.fundo-gaveta { display: none; }

/* ---------------------------------------------------------------- 8. responsivo */
/*
   Abaixo de 1024px o formato de aplicativo é DESMONTADO por inteiro: a página volta a rolar, o
   menu vira gaveta.

   Não é preferência estética. Tela travada em celular quebra o zoom: quem amplia para 200% (e é
   requisito de acessibilidade poder ampliar) fica sem alcançar o conteúdo que saiu da área visível,
   porque não há como rolar até ele.
*/
@media (max-width: 1023.98px) {
  .alcance { grid-template-columns: minmax(0, 1fr); }
  /* ⚠️ Os rótulos SOMEM antes de ficarem ilegíveis. Abaixo desta largura o mapa encolhe a ponto de
     as etiquetas se tocarem, e quem nomeia os lugares passa a ser a lista do texto — que existe
     sempre, e é a única versão que o leitor de tela enxerga de qualquer jeito. */
  .pin-rotulo, .mapa-grupo { display: none; }

  /*
     ⚠️ `visible`, e NÃO `auto` (como era até 28/08/2026). É o desfazer de verdade do
     `overflow: hidden` da regra base — e a segunda metade do conserto do cabeçalho grudado.

     Com `auto` no `<body>`, o corpo vira um CONTAINER DE ROLAGEM próprio (o `overflow` do `<html>`
     é que propaga para a viewport, então o body fica com o dele). O `position: sticky` do
     cabeçalho passava a medir contra esse container — que tem exatamente a altura do conteúdo e
     portanto NUNCA rola. O cabeçalho subia junto com a página, com `position: sticky` aplicado e
     nada errado à vista.

     A trava de rolagem da gaveta (`body.nav-aberta { overflow: hidden }`) continua funcionando:
     ela não depende de o body ser o scroller.
  */
  html, body { overflow: visible; height: auto; }

  .app {
    position: static;
    min-height: 100vh;
    min-height: 100dvh; /* `dvh` desconta a barra do navegador, que o `vh` ignora. */

    /*
       ⚠️ `overflow-x: clip` NO LUGAR do `hidden` da regra base, e é o que faz a barra grudar.

       `overflow: hidden` transforma o elemento em CONTAINER DE ROLAGEM. Um `position: sticky` mede
       a distância contra o scrollport mais próximo — e passa a ser este `.app`, que nunca rola
       (o conteúdo cabe nele por definição, já que ele cresce com o conteúdo). Resultado: o
       cabeçalho ia embora com a página, sem nenhum erro e com o `position: sticky` aplicado
       direitinho no inspetor. Levou uma medição para achar.

       `clip` recorta igual e NÃO cria scrollport, então o sticky volta a medir contra a janela.
       Fica só no eixo X porque é o único que precisa de recorte: o vertical é a própria página.
    */
    overflow-x: clip;
    overflow-y: visible;
  }

  /*
     ⚠️ A BARRA GRUDA AO ROLAR — e isto é uma correção de COMPORTAMENTO, não de estilo. No desktop
     ela já ficava parada por construção: mora fora do `#painel`, que é quem rola. Aqui embaixo quem
     rola é a JANELA, e o cabeçalho ia embora com o resto da página — o menu do celular só voltava
     depois de rolar tudo de volta.

     `sticky` e não `fixed`: fixed tira o elemento do fluxo e o conteúdo abaixo sobe por baixo dele,
     o que exigiria compensar a altura da barra à mão em toda página. Sticky mantém o espaço.

     ⚠️ E ela PRECISA de fundo opaco. Sem isso o conteúdo passa por baixo e se lê através da barra.
     Na home o fundo vem do `.app--banner.topo-no-banner .app-topo` (roxo chapado) enquanto o banner
     estiver por baixo; aqui é o bege da página.
  */
  .app-topo { position: sticky; top: 0; background: var(--fundo); }

  /* ⚠️ O padding horizontal segue o do `.painel`, que nesta faixa é 18px — o mesmo motivo da § 5:
     são dois irmãos que não se alinham sozinhos, e um `clamp` diferente joga a logo para fora da
     coluna do texto. */
  .app-topo { padding-left: 18px; padding-right: 18px; }

  /* ⚠️ Quem empurrava as ações para a direita era o `margin-left: auto` do `.nav` — e aqui o `.nav`
     é GAVETA, `position: fixed`, fora do fluxo. Sem isto os botões e o hambúrguer se amontoavam ao
     lado da logo com meia tela vazia à direita, de 640px a 1023px. */
  .topo-acoes { margin-left: auto; }

  /*
     ⚠️ AS CORES DO MENU VOLTAM AO NORMAL. Abaixo de 1024px o `.nav` é uma GAVETA de fundo branco —
     os tons claros que a § 5b dá aos itens dentro do banner escuro ficariam invisíveis ali. A barra
     continua escura; o que muda é só o painel que desliza por cima dela.
  */
  .app--banner.topo-no-banner .nav-pill { color: var(--texto-fraco); }
  .app--banner.topo-no-banner .nav-pill:hover { background: rgba(64, 62, 105, .06); color: var(--texto); }
  .app--banner.topo-no-banner .nav-pill.is-ativo { background: rgba(64, 62, 105, .1); box-shadow: inset 0 0 0 1px rgba(64, 62, 105, .16); color: var(--texto); }
  .app--banner.topo-no-banner .nav-pill.is-ativo::after { background: var(--dourado); }

  /* O full-bleed é refeito com os números DESTA faixa — o `.painel` passa a `20px 18px 40px`. */
  .banner-topo {
    margin: -20px -18px clamp(34px, 5vh, 56px);
    padding: 20px 18px clamp(34px, 5vh, 52px);
  }

  /* ⚠️ A MESMA correção para a faixa de credenciais, e pelo mesmo motivo: com o `clamp` do desktop
     ela ultrapassava a lateral do painel em 4px de cada lado — pouco para gritar, o bastante para
     a faixa "escapar" da página numa largura e não em outra. */
  .credenciais {
    margin: clamp(40px, 8vw, 66px) -18px;
    padding: clamp(30px, 5vw, 48px) 18px;
  }

  /*
     ⚠️ AS DUAS COLUNAS COLAPSAM. Sem isto o texto e as carteirinhas dividiam ~157px cada num
     celular, e o cartão — que tem largura mínima de 258px e fica ancorado à direita — saía 70px
     para fora da faixa. Não aparecia como rolagem horizontal porque o `.painel` tem
     `overflow-x: hidden`: ele era simplesmente CORTADO, em silêncio.
  */
  .credenciais > .secao { grid-template-columns: minmax(0, 1fr); }
  .credenciais .secao-cabecalho { margin-bottom: clamp(18px, 3vh, 26px); }
  .cartoes-palco { justify-self: stretch; width: 100%; }

  /*
     ⚠️ E os cartões voltam ao CENTRO. O `right: 0` do desktop existe para encostar na coluna do
     texto que fica AO LADO; empilhado, o texto fica ACIMA e um par de cartões grudado na direita
     lê como erro de alinhamento.

     Os 68% e 32% saem da mesma conta do desktop: com `right: 50%`, um `translateX(50%)` põe o
     CENTRO do cartão no centro do palco — e o centro do GRUPO fica 18% da largura à esquerda do
     cartão de trás, porque é ele que define a ponta direita. Daí 50+18 para o verso e 68−36 para a
     frente, que sempre esteve 36% atrás.
  */
  .cartao-membro { right: 50%; }
  .cartao-membro--frente { transform: translateY(-50%) rotate(-6deg) translateX(32%); }
  .cartao-membro--verso  { transform: translateY(-50%) rotate(6deg) translateX(68%); }

  /*
     ⚠️ `flex: 1 0 auto`, e NUNCA `flex: none` (como era até 01/08/2026).

     Aqui o `.app` volta a ser estático com `min-height: 100dvh`, então a sobra vertical da tela é
     DELE. Com `flex: none` o painel encolhe até o conteúdo, não recebe essa sobra, e o
     `margin-top: auto` do rodapé fica sem nada para consumir — numa página curta ele para no meio
     da tela. Foi o que aconteceu na 404 a 375×812: rodapé em 592px de 812.

     `grow: 1` faz o painel esticar até o fim da tela quando sobra; `shrink: 0` com `basis: auto`
     impede que ele seja comprimido quando o conteúdo é maior que a janela.
  */
  .painel { overflow: visible; flex: 1 0 auto; min-height: 0; padding: 20px 18px 40px; }
  .secao--centrada { min-height: 0; }

  .decor::before, .decor::after { width: 90vw; height: 90vw; }
  .decor-marca { display: none; }

  .botao-gaveta { display: inline-flex; }

  /*
     ⚠️ O CABEÇALHO sobe acima do fundo escurecido — é o que faz a gaveta aparecer.

     `.app-topo` é `position: relative; z-index: 5`, ou seja, cria o PRÓPRIO contexto de
     empilhamento. O `.nav` mora dentro dele, então o `z-index: 60` da gaveta vale só ali dentro:
     no nível do `.app`, ela herda o 5 do cabeçalho e perde para o fundo (55). O resultado era o
     overlay por cima da gaveta — ela saía lavada e NENHUM item do menu recebia clique, porque
     todos caíam no fundo, que fecha.

     Subindo o cabeçalho para 60 a gaveta vem junto, e o fundo continua cobrindo o conteúdo. Efeito
     colateral aceito: a marca e os botões do topo não escurecem com o menu aberto — e seguem
     clicáveis, o que é o comportamento de qualquer cabeçalho fixo.
  */
  .app-topo { z-index: 60; }

  /* A gaveta: fora da tela por padrão, revelada por `body.nav-aberta` (posto pelo JS). */
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    width: min(78vw, 300px);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 76px 16px 24px;
    background: var(--branco);
    border-left: 1px solid var(--borda);
    box-shadow: -20px 0 50px rgba(33, 31, 51, .12);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
  }
  body.nav-aberta .nav { transform: none; }

  .nav-pill { padding: 12px 14px; border-radius: var(--r-md); font-size: 15px; text-align: left; }
  .nav-pill.is-ativo::after { left: 14px; bottom: 8px; transform: none; }

  /* Fundo escurecido — só existe com a gaveta aberta, e fechá-la é clicar nele. */
  .fundo-gaveta {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    border: 0;
    padding: 0;
    background: rgba(33, 31, 51, .42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s ease, visibility .26s;
  }
  body.nav-aberta .fundo-gaveta { opacity: 1; visibility: visible; }
  body.nav-aberta { overflow: hidden; }

  /*
     ⚠️ 16px é o MÍNIMO nos campos, e não é escolha tipográfica.

     O Safari do iOS dá ZOOM sozinho ao focar um campo cuja fonte seja menor que 16px: a página
     salta, o layout sai do lugar e o visitante tem de pinçar de volta a cada campo. Os campos aqui
     estavam em 14,5px. É o defeito de formulário em celular mais comum que existe, e não aparece
     em nenhum emulador de navegador — só no aparelho.

     Só na faixa de toque: no desktop 14,5px é o tamanho certo e não há zoom nenhum.
  */
  .campo input, .campo textarea, .campo select { font-size: 16px; }

  /*
     Alvo de toque dos links do rodapé: tinham 19px de altura. O mínimo do WCAG 2.5.8 é 24px, e a
     recomendação de Apple e Google fica entre 44 e 48. O padding vertical resolve sem mexer no
     tamanho da letra nem na aparência da linha.
  */
  .rodape-linha a { display: inline-flex; align-items: center; min-height: 32px; }
  /* Centralizado no celular: a linha quebra em duas (a frase, depois os links) e alinhada à
     esquerda ela fica com um degrau à direita. */
  .rodape-linha { justify-content: center; text-align: center; gap: 4px 16px; }
  /*
     ⚠️ Espaço para o botão de voltar ao topo, que é FIXO no canto inferior direito. Sem ele, com a
     página rolada até o fim, o botão pousa em cima do link "Contato" do rodapé e come parte da área
     de toque — medido a 375×812: o link vai de 289 a 338px, o botão começa em 315.

     Só abaixo de 1024px: no desktop a linha do rodapé é alinhada à esquerda e sobra tela de sobra
     à direita; centralizada, ela cresce para os dois lados até alcançar o botão.
  */
  /*
     ⚠️ O full-bleed é refeito com os números DESTA faixa. Ali em cima as margens negativas desfazem
     o `clamp(16px, 3vw, 44px)` do painel; aqui o painel passa a `20px 18px 40px`, então as margens
     têm de virar 18/40 — senão sobra (ou falta) faixa clara na lateral, sem nada quebrar na tela.
  */
  .rodape {
    margin: auto -18px -40px;
    padding: 34px 18px 68px;
  }
  .rodape-grade { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .rodape-menus { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* A tela desce para baixo do texto em TODO bloco — inclusive no invertido, cujo `order: -1` a
     poria acima do próprio título. */
  .bloco { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .bloco--inverso .bloco-arte { order: 0; }
  /* As etiquetas voltam para dentro da moldura: penduradas para fora, com o bloco ocupando a
     largura toda, elas encostam na borda da tela. */
  .etiqueta--tl { top: 10px; left: 10px; }
  .etiqueta--br { bottom: 10px; right: 10px; }
  .etiqueta--bl { bottom: 10px; left: 10px; }
  .perfis { gap: 22px 30px; }
  .cred-itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .suporte { grid-template-columns: minmax(0, 1fr); }

  .grade--3, .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /*
     ⚠️ O CTA do artigo perde os 80% e vira UMA coluna. Abaixo de 1024px a coluna de leitura já é a
     largura da tela menos o padding: manter os 80% ali não destacaria mais nada — só espremeria o
     painel entre duas faixas de vazio. O recuo, aqui, é o do próprio `.painel`.
  */
  .cta-artigo { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .bl-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-destaque { grid-template-columns: minmax(0, 1fr); }
  .bl-destaque .bl-capa { min-height: 0; aspect-ratio: 16 / 7; }
  .garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Com duas colunas a nota fica AO LADO do card. Mantendo o `span 2` ela não caberia na primeira
     linha, cairia para a segunda e deixaria um buraco à direita do card. */
  .plano-nota { grid-column: auto; padding: 0; }

  /*
     A identidade do módulo passa a ficar ACIMA do conteúdo. Lado a lado num tablet, a coluna fixa
     de 300px deixa os parágrafos com ~30 caracteres por linha e o texto vira uma escada.
     A lavagem do `::before` acompanha a largura nova; presa em 340px, ela cobriria só um pedaço do
     topo e apareceria como uma mancha torta no canto.
  */
  .modulo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .modulo::before { width: 100%; }
  .modulo-corpo { grid-template-columns: minmax(0, 1fr); }
  /* Telefone acima, formulário abaixo: no celular, ligar é o caminho mais curto — e o cartão do
     telefone tem quatro linhas, então ele não empurra o formulário para longe. */
  .contato-grade { grid-template-columns: minmax(0, 1fr); }
  /*
     ⚠️ O cabeçalho da tabela deixa de ser `sticky` no toque. `position: sticky` dentro de um
     contêiner com `overflow-x` gruda a linha no topo do CONTÊINER, não da tela — e ao rolar a
     página o cabeçalho some junto com ela, deixando as colunas sem rótulo no meio da leitura. Numa
     tabela curta como esta, o custo de não ter é zero.
  */
  .comparativo thead th { position: static; }
  .mockup { perspective: none; }
  .mockup-palco { transform: none; }
  .cartao-flutuante { display: none; }
  .titulo-hero { max-width: none; }
}

@media (max-width: 639.98px) {
  .grade--2, .grade--3, .grade--4 { grid-template-columns: minmax(0, 1fr); }

  /*
     O "LEIA TAMBÉM" NO CELULAR: duas colunas, UMA linha, e o cartão sem o resumo (pedido do
     cliente, 30/08/2026). No desktop são duas linhas de três; aqui, dois cartões lado a lado.

     ⚠️ A linha acima acabou de derrubar TODA `.grade--3` para uma coluna, então esta precisa vir
     depois — e vem, por estar no mesmo bloco e mais abaixo. Invertidas, o seletor genérico venceria
     por ordem e a regra desapareceria sem erro nenhum.

     ⚠️ Esconder os quatro extras é CSS, não PHP: eles continuam no HTML e o Google os lê como
     ligação interna entre artigos, que é metade do porquê deste bloco existir. Cortá-los no
     servidor por causa da largura da tela entregaria uma página diferente ao celular.
  */
  .artigo-relacionados .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .artigo-relacionados .cartao:nth-child(n+3) { display: none; }
  .artigo-relacionados .cartao-resumo { display: none; }
  .artigo-relacionados .cartao { padding: 14px; }
  .artigo-relacionados .cartao h3 { font-size: 14.5px; line-height: 1.3; letter-spacing: -.028em; }
  .artigo-relacionados .artigo-meta { gap: 7px; font-size: 10.5px; }
  /*
     ⚠️ A grade de ARTIGOS mantém DUAS colunas no celular (pedido do cliente), ao contrário de todas
     as outras do site. Os cartões cabem porque a tipografia encolhe JUNTO — sem estas linhas o
     título de um artigo longo vira seis linhas de duas palavras.
  */
  .bl-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bl-artigo-corpo { gap: 7px; padding: 13px; }
  .bl-artigo-corpo h3 { font-size: 14.5px; letter-spacing: -.028em; }
  .bl-artigo-corpo p { font-size: 12.5px; line-height: 1.5; }
  .bl-assunto { font-size: 10px; letter-spacing: .05em; }
  .bl-assunto::before { width: 5px; height: 5px; box-shadow: 0 0 0 3px rgba(199, 154, 63, .18); }
  .bl-ler { font-size: 12px; }
  .bl-capa .bl-icone { top: 11px; left: 12px; width: 20px; height: 20px; }
  .bl-capa .bl-leitura { top: 9px; right: 9px; padding: 3px 8px; font-size: 10.5px; }
  .bl-capa .bl-glifo { left: 12px; font-size: 34px; }
  /* O filtro, que é curto, cabe centralizado quando a linha quebra em duas. */
  .bl-filtros { justify-content: center; }
  /* ⚠️ As garantias ficam em DUAS colunas mesmo aqui: são quatro blocos curtos, e em coluna única
     viram uma torre de 4 ícones que empurra o FAQ para fora de qualquer tela. */
  .garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .garantias p { font-size: 13px; }
  .plano-nota { grid-column: auto; }
  .destaques { gap: 14px 26px; }

  .perfis { grid-template-columns: minmax(0, 1fr); }
  .cred-itens { grid-template-columns: minmax(0, 1fr); }

  /*
     ⚠️ O CTA dos módulos EMPILHA. Mantidas as duas colunas, a `.75fr` dá 99px de cartão de preço a
     375px de tela — o "R$ 49" quebra em duas linhas e o botão vira um retângulo de três letras. É a
     mesma armadilha das carteirinhas logo abaixo: proporção que funciona em 1280 não sobrevive à
     divisão de 340px por dois.
     O `max-width` impede que o cartão de vidro vire uma faixa larga e vazia quando sozinho.
  */
  .cta-modulos { grid-template-columns: minmax(0, 1fr); }
  .cta-preco { max-width: 360px; margin-inline: auto; width: 100%; }
  /*
     ⚠️ No celular sobra UMA carteirinha. As duas em leque medem 340px cada com 36% de deslocamento
     lateral: a 375px de tela, a da frente sai pela esquerda. A do verso é a que sai, porque o QR
     desenhado a 74px não se lê nesse tamanho de qualquer forma.
  */
  .cartoes-palco { height: 196px; }
  .cartao-membro--verso { display: none; }
  /* ⚠️ Sozinho na tela, o cartão volta ao CENTRO: o `right: 0` existe para encostar na coluna do
     texto ao lado, e aqui não há texto ao lado — há texto ACIMA. */
  .cartao-membro--frente { right: 50%; transform: translate(50%, -50%) rotate(-3deg); width: min(288px, 84vw); }
  .balao { max-width: 100%; }
  .rodape-menus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  /*
     ⚠️ A barra do topo tem QUATRO itens desde que o "Registrar" entrou (01/08/2026): marca, dois
     botões e a gaveta. Quando a soma estoura, quem sai da tela é sempre o ÚLTIMO — o botão da
     gaveta —, e sem ele não há como abrir o menu no celular. Pior: o estouro NÃO gera barra de
     rolagem horizontal, então nada na tela denuncia; só medir a posição da gaveta denuncia.

     Cabe hoje porque o segundo botão diz "Entrar", e não "Entrar no Sistema". Ao alongar qualquer
     rótulo daqui, medir a 320 e a 360.
  */
  /* `min-height` e não mais padding vertical: ganha altura de toque (34 → 40px) sem acrescentar um
     pixel de LARGURA, que é o que está no limite nesta barra. */
  .topo-acoes .botao { padding: 9px 12px; font-size: 12.5px; min-height: 40px; }

  /*
     ⚠️ `margin-left: auto` para encostar as ações à DIREITA.

     No desktop quem as empurra é o `.nav`, que fica entre a marca e elas. Aqui o `.nav` vira gaveta
     `position: fixed` e SAI DO FLUXO — sem nada empurrando, os botões ficavam grudados na marca,
     com a sobra toda à direita.
  */
  .topo-acoes { gap: 6px; margin-left: auto; }

  /*
     Os dois botões do hero dividem a linha em vez de empilhar. Com o padding de 32px do
     `.botao--grande` eles somam 364px e não cabem nos 339 de um celular de 375 — então quebravam,
     e o segundo ficava sozinho numa linha com metade da largura.

     `flex: 1 1 0` + `min-width: 0` faz os dois valerem a mesma fração e encolherem juntos; o padding
     lateral menor evita que o rótulo aperte contra a borda.
  */
  .botoes .botao { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; }
  .botoes .botao--grande { padding-left: 12px; padding-right: 12px; font-size: 15px; }
}

/*
   Abaixo de 380px (iPhone SE de 1ª geração e afins) os quatro itens da barra do topo não cabem nem
   com os rótulos curtos: a marca e os botões descem mais um degrau. Sem isto o botão da gaveta fica
   32px FORA da tela a 320px — e com ele vai embora a única forma de abrir o menu.
*/
@media (max-width: 379.98px) {
  .marca img { height: 26px; }
  .topo-acoes .botao { padding: 8px 10px; font-size: 12px; }
  .topo-barra { gap: 8px; }
}

/*
   ⚠️ Abaixo de 360px os dois botões do hero VOLTAM a empilhar, e não é desistência: não há espaço
   físico. "Criar conta grátis" mede 121px e a metade da linha oferece 112 — o `white-space: nowrap`
   faria o texto VAZAR para fora do botão sem gerar rolagem nem cortar nada, ou seja, sem nenhum
   sinal de que quebrou. De 360 para cima (todo celular em uso hoje) eles ficam lado a lado.

   Ao mexer no texto de um desses botões, refazer a conta: metade da linha, menos 24px de padding.
*/
@media (max-width: 359.98px) {
  .botoes .botao { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- 9. movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .mockup-palco { transform: none; }
}

/* ---------------------------------------------------------------- 10. impressão */
/*
   Nasceu com o "Imprimir" da lista de compartilhamento do artigo (30/08/2026). Antes dele o site
   nunca tinha sido impresso — e a folha saía com UMA TELA SÓ.

   ⚠️⚠️ A CAUSA é a arquitetura do layout, não um descuido de estilo: `html, body` têm
   `overflow: hidden` e o `.app` é `position: fixed; inset: 0`, porque quem rola neste site é o
   `#painel`. Para o navegador, então, o documento inteiro tem exatamente a altura da janela: ele
   pagina o que cabe nela e joga fora o resto, sem aviso. Desfazer as três coisas é o que faz a
   segunda página existir.

   ⚠️ E é `!important` em toda linha por necessidade, não por preguiça: são regras de baixa
   especificidade (`.app`, `.painel`) tendo de vencer as originais, que estão no mesmo arquivo e
   valem o mesmo peso. Sem o `!important`, a ordem no arquivo decidiria — e este bloco é o último
   justamente para não depender disso duas vezes.
*/
@media print {
  html, body { overflow: visible !important; height: auto !important; }
  .app       { position: static !important; display: block !important; overflow: visible !important; }
  .painel    { display: block !important; overflow: visible !important; padding: 0 !important; }

  /* Fora da folha: navegação, enfeite e tudo que só serve ao clique. */
  .app-topo, .rodape, .subir, .decor, .fundo-gaveta,
  .partilha, .artigo-voltar, .artigo-relacionados, .consentimento,
  .artigo-coluna > .cartao,
  .cta-artigo { display: none !important; }
  /* ⚠️ O `.cta-artigo` faltava nesta lista desde que substituiu o cartão do fim: a regra vizinha
     nomeia `.cartao`, e ninguém percebeu que o bloco novo tinha outra classe — a folha saía com um
     painel roxo chapado. Corrigido em 30/08/2026, quando ele foi para o meio do texto e o defeito
     ficou impossível de ignorar: meia página de tinta no miolo, num bloco cuja única serventia é
     ser clicado. */

  /*
     A AUTORIA NA FOLHA. Sem isto o papel saía sem uma linha dizendo de onde o texto veio: a barra
     do topo, que é onde a marca mora na tela, é a primeira coisa que a impressão joga fora.

     ⚠️ `display: flex` no topo e `block` no pé — o `.so-impressao` genérico é `display: none` e
     precisa ser desfeito COM O VALOR CERTO de cada um. Um `display: block` para os dois poria a
     marca e o endereço em duas linhas empilhadas no cabeçalho.

     ⚠️ E `print-color-adjust`: o navegador ECONOMIZA TINTA por padrão e pode clarear ou remover
     fundos e bordas finas — a linha de separação some e o cabeçalho fica solto no ar.
  */
  .so-impressao { display: block; }
  .so-impressao--topo {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 16px; padding-bottom: 9px;
    border-bottom: 1px solid #bbb;
    font-size: 8.5pt; color: #444;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .so-impressao--topo img { width: 132px; height: auto; }
  .so-impressao--pe {
    margin-top: 20px; padding-top: 9px;
    border-top: 1px solid #bbb;
    font-size: 8.5pt; line-height: 1.5; color: #444;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }

  /* A faixa roxa vira cabeçalho de papel: sem fundo (custa tinta e some no preto e branco), com o
     texto em tinta escura e alinhado à esquerda, como o resto do documento. */
  .banner-topo {
    margin: 0 !important;
    padding: 0 0 14px !important;
    background: none !important;
    overflow: visible !important;
  }
  .banner-topo::before, .banner-topo::after { display: none !important; }
  .artigo-cabecalho { max-width: none !important; text-align: left !important; }
  .app--banner .titulo-hero,
  .banner-topo .lead,
  .artigo-meta--banner,
  .banner-topo--artigo .artigo-meta .categoria { color: #000 !important; }

  /* A capa deixa de transbordar: no papel não há faixa para ela atravessar. ⚠️ E ela NÃO entra na
     linha de baixo que solta os `max-width`: solta, a imagem tomaria a folha inteira de margem a
     margem — em papel isso não é "capa", é pôster, e empurra o começo do texto para a página 2. */
  .artigo-capa { margin-top: 0 !important; }
  .artigo-capa img { box-shadow: none !important; }
  .artigo-capa-area { max-width: 62% !important; margin-inline: 0 !important; }
  .secao, .artigo-coluna, .prosa { max-width: none !important; }

  .prosa { font-size: 11.5pt; }
  /* ⚠️ Nem todo `<h2>` do artigo pode ficar órfão no pé da página, e `break-after: avoid` sozinho
     não basta em navegador nenhum — os dois nomes convivem porque o antigo ainda é o que funciona
     em parte deles. */
  .prosa h2, .prosa h3 { page-break-after: avoid; break-after: avoid; }
  .prosa img, .prosa table { page-break-inside: avoid; break-inside: avoid; }

  /* O endereço de cada link, já que no papel não há o que clicar. ⚠️ Só os externos: os internos
     virariam uma linha de `/planos` no meio do texto, sem servir a ninguém. */
  .prosa a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .82em; word-break: break-all; }
}