/* ══════════════════════════════════════════════════════════════════════════
   tokens.css — a paleta, a escala e os raios do site. UM lugar.

   Concatenado por scripts/gerar-css.sh entre o SCSS legado e o extra.css.

   ⭐ A REGRA: nenhum hex literal fora deste arquivo. Se a cor nao esta aqui,
   ou ela entra com nome e justificativa, ou nao e' usada.

   Medido no CSS de producao em 15/08/2026, antes de existir: 123 cores hex
   distintas para uma marca de 2 cores, 52 tamanhos de fonte, 12 raios (com
   `9999px` e `999px` convivendo), 8 breakpoints, 439 media queries.

   ⛔ Declarar token nao muda pixel nenhum. O CSS legado nao le var(). As cores
   antigas so morrem quando cada secao for reescrita para consumir daqui — e a
   prova de que foi reescrita e' o KB do site.css cair, nao subir.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── MARCA — nao muda. Fundo, borda, preenchimento de icone, gradiente. ── */
  --fs-primaria:    #E8445A;
  --fs-secundaria:  #F7941D;
  --fs-gradiente:   linear-gradient(135deg, #E8445A 0%, #F7941D 100%);

  /* ── A MARCA COMO TEXTO ─────────────────────────────────────────────────
     ⛔ As duas cores da marca REPROVAM como cor de texto. Medido, nao achado:

         #E8445A sobre branco    3,88   (minimo 4,5)
         #F7941D sobre branco    2,28   (falha ate como texto grande)
         #E8445A sobre #1c1c1c   4,39   (por pouco)
         #F7941D sobre #1c1c1c   7,47   passa folgado

     Note que o laranja falha no CLARO e passa no ESCURO — o contrario do que
     a intuicao diz, e o contrario do que a skill do projeto afirmava. Por isso
     nao existe `--fs-secundaria-texto-escuro`: seria um token para um problema
     que nao existe. O #F7941D original ja serve em faixa escura.

     Contraste e' simetrico, entao cada token abaixo vale nos DOIS papeis:
     como cor de texto sobre fundo claro, e como cor de FUNDO com texto branco
     em cima. Um token, dois usos. Alvo 5,0 e nao 4,5 de proposito: o fundo
     claro do site nem sempre e' branco puro (tem #F8F9FA), e no limite exato
     o cinza reprovaria.                                                    */
  --fs-primaria-forte:    #C53A4D;  /* 5,14 sobre #fff · 4,88 sobre #F8F9FA  */
  --fs-secundaria-forte:  #9E5F13;  /* 5,12 sobre #fff · 4,86 sobre #F8F9FA  */
  --fs-primaria-clara:    #EB5A6D;  /* 5,04 sobre #1c1c1c · 5,41 sobre #151515 */
  /* laranja em faixa escura: use --fs-secundaria mesmo (7,47). */

  /* ── ICONE NAO E' TEXTO ─────────────────────────────────────────────────
     Componente grafico pede 3:1, nao 4,5. Usar o token de texto num icone
     funciona mas apaga a marca sem necessidade. Em fundo claro:

       #F7941D  2,28  reprova ate como icone
       #D07D18  3,01 sobre #F8F9FA · 3,07 sobre #fff  <- este
       #9E5F13  5,12  passa, mas e' marrom: e' token de TEXTO

     A primaria nao precisa de versao propria: #E8445A da 3,88 sobre branco,
     ja passa como icone. So como TEXTO e' que ela reprova.                */
  --fs-secundaria-icone:  #D07D18;

  /* ── GRADIENTE DE BOTAO ─────────────────────────────────────────────────
     ⛔ O gradiente da marca com rotulo branco em cima e' a pior falha
     estrutural do site: 3,88 na ponta rosa e 2,28 na ponta laranja, e esta em
     TODO CTA principal. O rotulo tem 1rem/600 — texto normal, exige 4,5.

     Este gradiente e' o mesmo desenho, com as duas pontas no tom mais claro
     que ainda deixa o branco passar: 4,64 e 4,61. De longe ninguem nota a
     diferenca; de perto o rotulo passa a ser legivel.

     ⭐ O `--fs-gradiente` original continua intocado onde nao ha texto branco
     em cima: fundo de secao, borda, preenchimento de icone, barra decorativa. */
  --fs-gradiente-botao: linear-gradient(135deg, #D23D51 0%, #A96514 100%);
  --fs-botao-primaria:  #D23D51;   /* a ponta rosa, solida — branco: 4,64 */

  /* ── GRADIENTE PARA TEXTO RECORTADO ────────────────────────────────────
     O de botao foi calibrado para o BRANCO EM CIMA dele passar. Quando o
     gradiente vira o proprio TEXTO, quem precisa passar e' ele contra o
     fundo — e 4,6 nao sobra o bastante em fundo que nao seja branco puro.
     Este usa as duas pontas ja medidas como cor de texto: 5,14 e 5,12. */
  --fs-gradiente-texto: linear-gradient(135deg, #C53A4D 0%, #9E5F13 100%);

  /* ── FUNDOS ── */
  --fs-escuro:    #1c1c1c;
  --fs-escuro-2:  #151515;
  --fs-branco:    #ffffff;
  --fs-cinza:     #F8F9FA;   /* absorve #fafbfc #fafafa #f5f5f7 #f8f8f8 #f9f9fb */

  /* ── BORDAS ── */
  --fs-borda:        #E5E7EB;               /* absorve #e0e0e0 #eeeeee */
  --fs-borda-suave:  #F0F0F0;
  --fs-borda-clara:  rgba(255,255,255,.12); /* sobre fundo escuro */

  /* ── TEXTO ──────────────────────────────────────────────────────────────
     ⛔ #999999 (2,85) e #888888 (3,54) estao no CSS antigo como cor de texto
     e reprovam os dois. --fs-texto-3 e' o substituto que passa ate no cinza. */
  --fs-texto:         #333333;  /* 12,63 sobre #fff */
  --fs-texto-2:       #555555;  /*  7,46 — absorve #444 */
  --fs-texto-3:       #6B6B6B;  /*  5,13 sobre #fff · 4,87 sobre #F8F9FA */
  --fs-texto-claro:   #ffffff;
  --fs-texto-claro-2: #C4C4CC;  /*  9,83 sobre #1c1c1c — absorve #b8b8bd */
  --fs-texto-claro-3: #A1A1AA;  /*  6,65 — substitui rgba(255,255,255,.5 e .6) */

  /* ── SEMANTICAS ── */
  --fs-ok:            #22C55E;   /* fundo/icone */
  --fs-ok-forte:      #15803D;   /* 5,02 sobre #fff — o #22C55E da 2,28 */
  --fs-ok-claro:      #4ADE80;   /* 9,78 sobre #1c1c1c */
  --fs-erro:          #EF4444;
  --fs-erro-forte:    #B91C1C;   /* 6,47 sobre #fff */
  --fs-erro-claro:    #FCA5A5;   /* 8,98 sobre #1c1c1c */
  --fs-roxo:          #A855F7;   /* so o --device-color da home; fundo/borda */

  /* ── WHATSAPP ───────────────────────────────────────────────────────────
     ⛔ Branco sobre #25D366 da 1,98 — a PIOR combinacao do site, e esta no
     botao que recebe o clique. O verde e' marca do WhatsApp, nao nossa, entao
     escurecer descaracteriza. A saida que preserva o verde e' texto ESCURO
     em cima dele: 6,23. --fs-zap-forte fica para quando o rotulo tiver mesmo
     que ser branco.                                                        */
  --fs-zap:        #25D366;
  --fs-zap-texto:  #0B3D1E;   /* 6,23 sobre #25D366 */
  --fs-zap-forte:  #178641;   /* 4,64 com branco em cima */

  /* ── TIPOGRAFIA — uma progressao, 12 valores (hoje sao 52) ──────────────
     Os numeros sao EXATAMENTE os $font-size-* do _variables.scss legado. De
     proposito: durante a transicao o CSS velho e o novo dao o mesmo pixel,
     entao nenhuma secao "pula" enquanto as outras esperam a vez.           */
  --fs-fonte-titulo: 'Outfit', 'Outfit Fallback', sans-serif;
  --fs-fonte-texto:  'Inter',  'Inter Fallback',  sans-serif;

  --fs-t-xs:   .75rem;   --fs-t-sm:   .875rem;  --fs-t-base: 1rem;
  --fs-t-md:  1.125rem;  --fs-t-lg:  1.25rem;   --fs-t-xl:   1.5rem;
  --fs-t-2xl: 1.875rem;  --fs-t-3xl: 2.25rem;   --fs-t-4xl:  3rem;

  /* Titulos em clamp() — cada um destes apaga um punhado de media queries. */
  --fs-t-d1: clamp(2.25rem, 5vw, 3.75rem);
  --fs-t-d2: clamp(1.875rem, 4vw, 3rem);
  --fs-t-d3: clamp(1.5rem, 3vw, 2.25rem);

  --fs-p-normal: 400; --fs-p-medio: 500; --fs-p-semi: 600;
  --fs-p-forte:  700; --fs-p-extra: 800;

  /* ── RAIO — 3 + pilula (hoje 12+, com 9999px e 999px na mesma folha) ── */
  --fs-r-sm:  .5rem;    /* absorve .375rem 6px 8px 9px 10px 12px */
  --fs-r-md:  1rem;     /* absorve .75rem 14px 16px 20px         */
  --fs-r-lg:  1.5rem;   /* absorve 25px 30px                     */
  --fs-r-pil: 9999px;   /* mata 999px e 100px                    */
  /* `border-radius: 50%` fica: e' forma (avatar, icone redondo), nao escala. */

  /* ── ESPACAMENTO — base 4px, 9 degraus ── */
  --fs-e-1: .25rem;  --fs-e-2: .5rem;   --fs-e-3: .75rem;  --fs-e-4: 1rem;
  --fs-e-6: 1.5rem;  --fs-e-8: 2rem;    --fs-e-12: 3rem;
  --fs-e-16: 4rem;   --fs-e-24: 6rem;

  /* ── SOMBRA / TRANSICAO / LARGURA ── */
  --fs-sombra:       0 4px 6px -1px rgba(0,0,0,.1);
  --fs-sombra-alta:  0 10px 15px -3px rgba(0,0,0,.1);
  --fs-sombra-marca: 0 4px 14px rgba(232,68,90,.3);
  --fs-transicao:    250ms ease;
  --fs-largura:      1200px;
}

/* ── BREAKPOINTS — 3, nao 8 ─────────────────────────────────────────────────
   Custom property NAO funciona dentro de @media, entao estes numeros sao
   contrato de leitura e vao escritos a mao nas media queries:

     48rem  (768px)  — absorve os 195 usos de 768 e os 79 de 640
     64rem  (1024px) — os 91 usos existentes
     80rem  (1280px) — so onde a largura maxima precisa respirar

   Somem: 600, 640, 720, 760, 900 e o 1280-max.

   ⭐ Antes de escrever media query, tentar sem: `repeat(auto-fit, minmax(16rem,
   1fr))` numa grade e `clamp()` num titulo apagam a maioria das 439 que
   existem hoje, sem substituto. Essa e' a diferenca entre sistema de tokens e
   camada de tokens por cima.                                                */

/* ===== secoes/00-base.css ===== */
/* ══════════════════════════════════════════════════════════════════════════
   00-base.css — o esqueleto que TODA seção reescrita usa.

   O `00-` no nome não é enfeite: scripts/gerar-css.sh concatena
   estilos/secoes/*.css em ordem alfabética, e este arquivo precisa vir antes
   dos outros para que uma seção possa sobrescrever um detalhe seu.

   ⭐ Por que existe: a segunda seção reescrita ia repetir ~100 linhas da
   primeira (cabeçalho, grade, cartão). São 14 seções na home — repetir 14×
   seria reconstruir o problema que estamos desmontando, só que com nomes
   novos. Aqui a seção específica fica com 20 linhas em vez de 130.

   ⛔ Nenhuma classe daqui herda nada do SCSS do Next. `.card`, `.card-grid`,
   `.section-title` e `.section-label` são do legado e não aparecem neste
   arquivo — são justamente o que estamos substituindo.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── a seção ───────────────────────────────────────────────────────────── */
.fs-secao {
  padding: var(--fs-e-24) var(--fs-e-4);
  background: var(--fs-branco);
}
.fs-secao--cinza { background: var(--fs-cinza); }
.fs-secao--escura { background: var(--fs-escuro); }
.fs-secao__inner {
  max-width: var(--fs-largura);
  margin-inline: auto;
}
/* ── cabeçalho ─────────────────────────────────────────────────────────── */
.fs-secao__cabeca {
  text-align: center;
  margin-bottom: var(--fs-e-12);
}
.fs-secao__rotulo {
  display: block;
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  font-weight: var(--fs-p-forte);
  letter-spacing: .08em;
  text-transform: uppercase;
  /* ⛔ no legado isto era o gradiente da marca recortado em texto
     (-webkit-text-fill-color: transparent). A ponta laranja do gradiente dá
     2,28 sobre fundo claro — reprova até como texto grande. Cor sólida. */
  color: var(--fs-secundaria-forte);
  margin-bottom: var(--fs-e-3);
}
.fs-secao__titulo {
  font-family: var(--fs-fonte-titulo);
  font-size: var(--fs-t-d2);
  font-weight: var(--fs-p-extra);
  line-height: 1.15;
  color: var(--fs-texto);
  margin-bottom: var(--fs-e-3);
}
/* o destaque do título: <em> em vez de <span class="...">, porque é ênfase
   de conteúdo e não decoração — o leitor de tela ganha com isso. */
.fs-secao__titulo em {
  font-style: normal;
  color: var(--fs-primaria-forte);
}
.fs-secao__sub {
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-md);
  line-height: 1.6;
  color: var(--fs-texto-2);
  max-width: 46rem;
  margin-inline: auto;
}
/* ── a seção em faixa escura ────────────────────────────────────────────
   ⛔ A cor vai no CONTAINER e os filhos herdam. Enumerar
   `.pai--escura .filho { color }
` sempre esquece um — foi uma das duas
   regressões já corrigidas neste projeto, e não volta. */
.fs-secao--escura { color: var(--fs-texto-claro); }
.fs-secao--escura .fs-secao__titulo { color: inherit; }
.fs-secao--escura .fs-secao__sub { color: var(--fs-texto-claro-2); }
.fs-secao--escura .fs-secao__rotulo { color: var(--fs-secundaria); }
/* 7,47 no escuro */
.fs-secao--escura .fs-secao__titulo em { color: var(--fs-primaria-clara); }
/* ── a grade ────────────────────────────────────────────────────────────
   `auto-fit` + `minmax` decidem as colunas sozinhos: 4 num monitor, 2 num
   tablet, 1 no celular. Zero media query — o CSS antigo gastava três por
   grade, e havia 439 media queries no bundle. */
.fs-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: var(--fs-e-4);
}
/* ── o cartão ──────────────────────────────────────────────────────────── */
.fs-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--fs-e-2);
  padding: var(--fs-e-6);
  background: var(--fs-branco);
  border: 1px solid var(--fs-borda);
  border-radius: var(--fs-r-md);
  text-decoration: none;
  transition: border-color var(--fs-transicao),
              box-shadow  var(--fs-transicao),
              transform   var(--fs-transicao);
}
a.fs-cartao:hover, a.fs-cartao:focus-visible {
  border-color: var(--fs-primaria);
  box-shadow: var(--fs-sombra-alta);
  transform: translateY(-2px);
}
/* o cartão inteiro é o link: o anel de foco precisa aparecer nele */
a.fs-cartao:focus-visible {
  outline: 2px solid var(--fs-primaria-forte);
  outline-offset: 3px;
}
.fs-secao--cinza .fs-cartao { background: var(--fs-branco); }
.fs-secao--escura .fs-cartao {
  background: var(--fs-escuro-2);
  border-color: var(--fs-borda-clara);
}
.fs-cartao__icone {
  width: 2.5rem;
  height: 2.5rem;
  /* ⛔ ícone é componente gráfico: 3:1, não 4,5. Usar o token de TEXTO aqui
     deixaria a marca marrom sem necessidade. */
  color: var(--fs-secundaria-icone);
}
.fs-cartao__icone svg { width: 100%; height: 100%; display: block; }
.fs-secao--escura .fs-cartao__icone { color: var(--fs-secundaria); }
.fs-cartao__nome {
  font-family: var(--fs-fonte-titulo);
  font-size: var(--fs-t-lg);
  font-weight: var(--fs-p-forte);
  color: var(--fs-texto);
  margin: 0;
}
.fs-secao--escura .fs-cartao__nome { color: var(--fs-texto-claro); }
.fs-cartao__texto {
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  line-height: 1.55;
  color: var(--fs-texto-2);
  flex: 1;
  margin: 0;
}
.fs-secao--escura .fs-cartao__texto { color: var(--fs-texto-claro-2); }
/* lista de capacidades dentro do cartão */
.fs-cartao__itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fs-e-1);
  flex: 1;
}
.fs-cartao__item {
  position: relative;
  padding-left: var(--fs-e-4);
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  line-height: 1.5;
  color: var(--fs-texto-2);
}
.fs-secao--escura .fs-cartao__item { color: var(--fs-texto-claro-2); }
/* marcador desenhado em CSS — não é emoji e não pede SVG */
.fs-cartao__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: var(--fs-secundaria);
}
.fs-cartao__link {
  margin-top: var(--fs-e-2);
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  font-weight: var(--fs-p-semi);
  color: var(--fs-primaria-forte);
}
.fs-secao--escura .fs-cartao__link { color: var(--fs-primaria-clara); }
.fs-cartao__link::after {
  content: " \2192";                 /* → como caractere, não emoji */
  display: inline-block;
  transition: transform var(--fs-transicao);
}
a.fs-cartao:hover .fs-cartao__link::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.fs-cartao, .fs-cartao__link::after { transition: none; }
a.fs-cartao:hover { transform: none; }
}

/* ===== secoes/00-reset.css ===== */
/* ══════════════════════════════════════════════════════════════════════════
   00-reset.css — reset e base do documento.

   Última coisa que vivia no `globals.scss` do Next. Com ela aqui, o
   `estilos/legado.scss` fica vazio e o Sass sai do caminho de vez.

   As quatro variáveis SCSS que este bloco usava (`$font-primary`,
   `$font-size-base`, `$color-text`, `$color-bg`) viraram token.
   ══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* barra de rolagem sempre presente: sem isso a página "pula" na horizontal
     ao navegar de uma página curta para uma longa */
  overflow-y: scroll;
}
/* ⛔ `scroll-behavior: smooth` no html vale para todo mundo, inclusive para
   quem pediu menos movimento no sistema. O respeito a essa preferência não
   estava no legado. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-base);
  color: var(--fs-texto);
  background: var(--fs-branco);
  line-height: 1.6;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}
button {
  font-family: inherit;
}
::selection {
  background: var(--fs-primaria);
  color: var(--fs-branco);
}
/* ⛔ ISTO CENTRALIZAVA TODO TÍTULO DO SITE, globalmente:

       h1, h2, h3, h4 { text-align: center; }
Uma regra de estilo decidindo alinhamento de conteúdo em toda página, e a
   razão de cada seção nova ter que desfazer o alinhamento na mão — o hero
   novo precisa de `text-align: left` explícito só por causa dela.

   Não veio. Quem quer centralizado pede centralizado: `.fs-secao__cabeca` já
   centraliza o próprio cabeçalho, que é onde isso de fato se aplica.        */

/* O título herda a fonte de display sem precisar repetir em cada componente. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fs-fonte-titulo);
}

/* ===== secoes/01-botoes.css ===== */
/* ══════════════════════════════════════════════════════════════════════════
   01-botoes.css — `.btn` e seus modificadores.
   Substitui `components/_button.scss` do Next.

   O `01-` garante que venha depois de 00-base.css e antes das seções.

   ⭐ Por que este arquivo vale mais que uma seção inteira: os dois piores
   contrastes da home estavam aqui, e `.btn` aparece em várias páginas —
   consertar uma vez conserta o CTA de todas.

       branco sobre o gradiente da marca   1,98   ← "Solicitar Demonstração"
       branco sobre o verde do WhatsApp    1,58   ← "Falar no WhatsApp"

   ⛔ Os nomes `.btn`, `.btn--primary` etc. ficam. Não são vestígio do Next —
   são nomes genéricos de CSS, e renomeá-los mexeria em 6 arquivos PHP sem
   mudar um pixel. O vestígio era o SCSS compilado, e esse morreu.
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-e-2);
  padding: var(--fs-e-3) var(--fs-e-6);
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-base);
  font-weight: var(--fs-p-semi);
  line-height: 1.5;
  border: none;
  border-radius: var(--fs-r-md);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform var(--fs-transicao), box-shadow var(--fs-transicao),
              background-color var(--fs-transicao), border-color var(--fs-transicao);
}
.btn:focus-visible {
  outline: 2px solid var(--fs-primaria-forte);
  outline-offset: 3px;
}
/* ── primário ───────────────────────────────────────────────────────────
   O gradiente é `--fs-gradiente-botao`, não `--fs-gradiente`: as duas pontas
   escurecidas até o branco passar em 4, 6. Ver a nota em tokens.css. */
.btn--primary {
  background: var(--fs-gradiente-botao);
  color: var(--fs-branco);
  box-shadow: var(--fs-sombra-marca);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232, 68, 90, .4);
}
/* ── WhatsApp ───────────────────────────────────────────────────────────
   ⛔ Era `background:#25D366; color:white` = 1,58. O verde é marca do
   WhatsApp, então escurecê-lo descaracteriza o botão que as pessoas
   reconhecem. A saída que preserva o verde é o rótulo ESCURO: 6,23. */
.btn--whatsapp {
  background: var(--fs-zap);
  color: var(--fs-zap-texto);
  font-weight: var(--fs-p-forte);
}
.btn--whatsapp:hover {
  background: #1FBE5B;
  transform: translateY(-1px);
}
/* ── secundário / fantasma ──────────────────────────────────────────────
   `.btn--ghost` era usado no HTML e NÃO existia em components/_button.scss —
   o botão herdava só a base e saía sem borda nem cor. Agora existe. */
.btn--secondary, .btn--ghost {
  background: transparent;
  color: var(--fs-texto);
  border: 2px solid var(--fs-borda);
}
.btn--secondary:hover, .btn--ghost:hover {
  border-color: var(--fs-primaria);
  color: var(--fs-primaria-forte);
}
/* em faixa escura o fantasma inverte */
.btn--ghost-light {
  background: transparent;
  color: var(--fs-texto-claro);
  border: 2px solid var(--fs-borda-clara);
}
.btn--ghost-light:hover {
  border-color: var(--fs-secundaria);
  color: var(--fs-secundaria);
}
.btn--white {
  background: var(--fs-branco);
  color: var(--fs-texto);
}
.btn--white:hover { background: var(--fs-cinza); transform: translateY(-1px); }
/* ── tamanhos ── */
.btn--lg {
  padding: var(--fs-e-4) var(--fs-e-8);
  font-size: var(--fs-t-md);
}
.btn--sm {
  padding: var(--fs-e-2) var(--fs-e-4);
  font-size: var(--fs-t-sm);
}
.btn--full { width: 100%; }
@media (prefers-reduced-motion: reduce) {
.btn { transition: none; }
.btn:hover { transform: none; }
}

/* ===== secoes/03-rpt.css ===== */
/* ══════════════════════════════════════════════════════════════════════════
   03-rpt.css — o vocabulário `rpt-*`: hero, cartões, comparativos, CTAs e
   grades das 31 PÁGINAS COMERCIAIS (18 segmentos + 13 funcionalidades), mais
   as páginas de cidade quando forem migradas.

   Substitui `sections/_relatorios.scss` (1.454 linhas / 31,7 KB de SCSS).

   ⭐ POR QUE OS NOMES `rpt-*` FICARAM: eles estão em 16 arquivos PHP. Renomear
   mexeria em todos sem mudar um pixel — os nomes nunca foram o vestígio do
   Next, o SCSS compilado é que era, e esse morreu aqui.

   ⭐ COMO ESTE ARQUIVO NASCEU: as 266 regras foram extraídas do bundle já
   compilado e tiveram as 19 cores literais trocadas por token (79
   substituições). Isso preserva o visual exato das 31 páginas, que é o que
   se quer numa troca de motor — o que MUDA de propósito está no bloco de
   correções no fim, cada uma com o número medido.

   ⛔ Zero media query aqui dentro, e não é por descuido: o `_relatorios.scss`
   também não tinha nenhuma. As grades já eram `auto-fit`.
   ══════════════════════════════════════════════════════════════════════════ */
.rpt-gradient-text { background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.rpt-gradient-text::selection { -webkit-text-fill-color: var(--fs-branco); background: rgba(232, 68, 90, 0.4); }
.rpt-section-header { text-align: center; margin-bottom: 3rem; }
.rpt-section-header__label { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.rpt-section-header__label::selection { -webkit-text-fill-color: var(--fs-branco); background: rgba(232, 68, 90, 0.4); }
.rpt-section-header__label { margin-bottom: 0.75rem; }
.rpt-section-header__title { font-family: "Outfit", "Inter", sans-serif; font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; color: #333333; line-height: 1.15; letter-spacing: -0.03em; }
.rpt-section-header__sub { font-size: 1.125rem; color: #666666; max-width: 750px; margin: 1rem auto 0; line-height: 1.65; }
.rpt-section-header--dark .rpt-section-header__title { color: var(--fs-branco); }
.rpt-section-header--dark .rpt-section-header__sub { color: rgba(255, 255, 255, 0.5); }
.rpt-btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; border-radius: 1rem; padding: 1rem 2rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; border: none; }
.rpt-btn--primary { color: var(--fs-branco); background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); box-shadow: 0 4px 20px rgba(232, 68, 90, 0.25); }
.rpt-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(232, 68, 90, 0.35); }
.rpt-btn--ghost { color: #333333; background: transparent; border: 1.5px solid var(--fs-borda); }
.rpt-btn--ghost:hover { border-color: var(--fs-primaria); color: var(--fs-primaria-forte); transform: translateY(-2px); }
.rpt-btn--ghost-light { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.15); }
.rpt-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
.rpt-btn--sm { padding: 0.75rem 1.5rem; font-size: 0.875rem; }
.rpt-btn--lg { padding: 1.25rem 2.5rem; font-size: 1.125rem; }
.rpt-hero { position: relative; padding: 140px 0 80px; background: #0a0a0a; overflow: hidden; }
@media (max-width: 640px) {
.rpt-hero { padding: 120px 0 60px; }
}
.rpt-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.rpt-hero__glow { position: absolute; border-radius: 50%; }
.rpt-hero__glow--1 { top: -30%; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse at center, rgba(232, 68, 90, 0.18) 0%, rgba(247, 148, 29, 0.06) 50%, transparent 70%); filter: blur(60px); }
.rpt-hero__glow--2 { bottom: -40%; left: 50%; transform: translateX(-50%); width: 900px; height: 500px; background: radial-gradient(ellipse at center, rgba(247, 148, 29, 0.1) 0%, rgba(232, 68, 90, 0.04) 50%, transparent 70%); filter: blur(80px); }
.rpt-hero__grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, transparent 80%); }
.rpt-hero__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.rpt-hero__inner { padding: 0 2rem; }
}
.rpt-hero__inner { position: relative; z-index: 1; text-align: center; }
.rpt-hero__badge { display: inline-block; font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.5rem 1.25rem; border-radius: 9999px; margin-bottom: 1.5rem; backdrop-filter: blur(8px); }
.rpt-hero__title { font-family: "Outfit", "Inter", sans-serif; font-size: clamp(1.875rem, 6vw, 3.75rem); font-weight: 800; color: var(--fs-branco); line-height: 1.08; letter-spacing: -0.04em; margin-bottom: 1.25rem; max-width: 900px; margin-left: auto; margin-right: auto; }
.rpt-hero__gradient { background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.rpt-hero__gradient::selection { -webkit-text-fill-color: var(--fs-branco); background: rgba(232, 68, 90, 0.4); }
.rpt-hero__subtitle { font-size: 1.125rem; color: rgba(255, 255, 255, 0.6); max-width: 780px; margin: 0 auto 2rem; line-height: 1.7; }
@media (min-width: 768px) {
.rpt-hero__subtitle { font-size: 1.25rem; }
}
.rpt-hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }
.rpt-hero__actions .rpt-btn--ghost { color: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.2); }
.rpt-hero__actions .rpt-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); }
.rpt-hero__kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 700px; margin: 0 auto; }
@media (min-width: 640px) {
.rpt-hero__kpis { grid-template-columns: repeat(4, 1fr); }
}
.rpt-hero::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 68, 90, 0.4), rgba(247, 148, 29, 0.3), transparent); }
.rpt-hero .breadcrumb .breadcrumb__link { color: rgba(255, 255, 255, 0.4); }
.rpt-hero .breadcrumb .breadcrumb__link:hover { color: rgba(255, 255, 255, 0.7); }
.rpt-hero .breadcrumb .breadcrumb__current { color: rgba(255, 255, 255, 0.6); }
.rpt-hero .breadcrumb .breadcrumb__separator { color: rgba(255, 255, 255, 0.25); }

/* ⛔⛔ TÍTULO DE POST: `.rpt-hero__title` FORA DO HERO ESCURO.
   `paginas/blog.php:189` reaproveita a classe do hero para o h1 do post, mas o
   post vive dentro de `.rpt-features`, que tem fundo `--fs-cinza`. Resultado
   medido em 20/08/2026, no celular: branco sobre claro — o h1 dos 56 posts era
   INVISÍVEL, inclusive o do NCM, que é 43% da impressão de IA do site.

   A regra fica AQUI, escopada pelo fundo, e não numa classe nova em blog.php:
   qualquer h1 que caia num `.rpt-features` no futuro já nasce legível. */
.rpt-features .rpt-hero__title { color: var(--fs-escuro); }
.rpt-features .rpt-hero__subtitle { color: var(--fs-texto); }
.rpt-features .rpt-hero__badge { color: var(--fs-texto); background: rgba(0, 0, 0, 0.05); }
.rpt-kpi { text-align: center; padding: 1.25rem 1rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1rem; backdrop-filter: blur(8px); }
.rpt-kpi__icon { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }
.rpt-kpi__value { display: block; font-family: "Outfit", "Inter", sans-serif; font-size: 1.5rem; font-weight: 800; background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.rpt-kpi__value::selection { -webkit-text-fill-color: var(--fs-branco); background: rgba(232, 68, 90, 0.4); }
.rpt-kpi__value { line-height: 1.2; }
.rpt-kpi__label { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); font-weight: 500; margin-top: 0.25rem; }
.rpt-dash { padding: 80px 0 100px; background: var(--fs-cinza); }
.rpt-dash__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.rpt-dash__inner { padding: 0 2rem; }
}
.rpt-dash__inner { max-width: 1100px; }
.rpt-dashboard { background: #0f0f14; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05); }
.rpt-dashboard__header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rpt-dashboard__dots { display: flex; gap: 6px; }
.rpt-dashboard__dots span { width: 10px; height: 10px; border-radius: 50%; }
.rpt-dashboard__dots span:nth-child(1) { background: #ff5f57; }
.rpt-dashboard__dots span:nth-child(2) { background: #ffbd2e; }
.rpt-dashboard__dots span:nth-child(3) { background: #28ca41; }
.rpt-dashboard__title-bar { font-size: 0.75rem; color: var(--fs-texto-claro-3); font-weight: 500; }
.rpt-dashboard__body { padding: 1.25rem; }
@media (min-width: 768px) {
.rpt-dashboard__body { padding: 2rem; }
}
.rpt-dashboard__metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) {
.rpt-dashboard__metrics { grid-template-columns: repeat(4, 1fr); }
}
.rpt-dashboard__content { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) {
.rpt-dashboard__content { grid-template-columns: 1.4fr 1fr; }
}
.rpt-dashboard__chart { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.75rem; padding: 1.25rem; }
.rpt-dashboard__chart-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--fs-texto-claro-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; text-align: left; }
.rpt-dashboard__table { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.75rem; padding: 1.25rem; }
.rpt-metric { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.75rem; padding: 1rem; }
.rpt-metric__label { display: block; font-size: 0.75rem; color: var(--fs-texto-claro-3); font-weight: 500; margin-bottom: 0.25rem; text-align: left; }
.rpt-metric__value { display: block; font-family: "Outfit", "Inter", sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--fs-branco); text-align: left; }
@media (min-width: 768px) {
.rpt-metric__value { font-size: 1.5rem; }
}
.rpt-metric__change { display: inline-block; font-size: 0.75rem; font-weight: 600; margin-top: 0.25rem; }
.rpt-metric__change--up { color: var(--fs-ok-claro); }
.rpt-chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
@media (min-width: 768px) {
.rpt-chart-bars { height: 160px; }
}
.rpt-chart-bar { flex: 1; background: linear-gradient(180deg, var(--fs-primaria) 0%, rgba(232, 68, 90, 0.3) 100%); border-radius: 3px 3px 0 0; min-width: 0; transition: height 0.6s ease; }
.rpt-chart-labels { display: flex; justify-content: space-between; margin-top: 0.5rem; }
.rpt-chart-labels span { font-size: 0.65rem; color: var(--fs-texto-claro-3); }
.rpt-mini-table { display: flex; flex-direction: column; gap: 2px; }
.rpt-mini-row { display: grid; grid-template-columns: 28px 1fr 40px 80px; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.rpt-mini-row:last-child { border-bottom: none; }
.rpt-mini-row__rank { font-size: 0.75rem; color: var(--fs-texto-claro-3); font-weight: 700; }
.rpt-mini-row__name { font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.rpt-mini-row__qty { font-size: 0.75rem; color: var(--fs-texto-claro-3); text-align: right; }
.rpt-mini-row__rev { font-size: 0.875rem; color: var(--fs-ok-claro); font-weight: 600; text-align: right; }
.rpt-mini-row__bar { display: none; }
@media (min-width: 1024px) {
.rpt-mini-row__bar { display: block; grid-column: 1/-1; height: 3px; background: rgba(255, 255, 255, 0.04); border-radius: 2px; }
}
.rpt-mini-row__fill { height: 100%; background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); border-radius: 2px; }
.rpt-mid-cta { padding: 3rem 0; background: linear-gradient(135deg, rgba(232, 68, 90, 0.04) 0%, rgba(247, 148, 29, 0.04) 100%); border-top: 1px solid rgba(232, 68, 90, 0.08); border-bottom: 1px solid rgba(247, 148, 29, 0.08); }
.rpt-mid-cta__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.rpt-mid-cta__inner { padding: 0 2rem; }
}
.rpt-mid-cta__inner { text-align: center; }
.rpt-mid-cta__text { font-family: "Outfit", "Inter", sans-serif; font-size: 1.25rem; color: #333333; margin-bottom: 1.25rem; line-height: 1.5; }
.rpt-mid-cta__text strong { background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.rpt-mid-cta__text strong::selection { -webkit-text-fill-color: var(--fs-branco); background: rgba(232, 68, 90, 0.4); }
@media (min-width: 768px) {
.rpt-mid-cta__text { font-size: 1.5rem; }
}
.rpt-cats { padding: 100px 0; background: var(--fs-branco); }
.rpt-cats__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.rpt-cats__inner { padding: 0 2rem; }
}
.rpt-cats__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) {
.rpt-cats__grid { grid-template-columns: repeat(2, 1fr); }
}
.rpt-cat-card { padding: 1.5rem; background: var(--fs-branco); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1.5rem; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; }
.rpt-cat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cat-accent, var(--fs-primaria)); opacity: 0; transition: opacity 0.3s ease; }
.rpt-cat-card:hover { border-color: transparent; transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); }
.rpt-cat-card:hover::before { opacity: 1; }
.rpt-cat-card__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.rpt-cat-card__icon { font-size: 2.2rem; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.03); border-radius: 1rem; flex-shrink: 0; }
.rpt-cat-card__title { font-family: "Outfit", "Inter", sans-serif; font-size: 1.25rem; font-weight: 700; color: #333333; text-align: left; }
.rpt-cat-card__tag { font-size: 0.75rem; color: #999999; font-weight: 500; }
.rpt-cat-card__list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.rpt-cat-card__list li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: #666666; line-height: 1.5; text-align: left; }
.rpt-cat-card__check { color: var(--cat-accent, var(--fs-primaria)); font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.rpt-contab { position: relative; padding: 100px 0; background: linear-gradient(180deg, #08070d 0%, #0d0b15 50%, #0a0812 100%); color: var(--fs-branco); overflow: hidden; }
.rpt-contab__bg { position: absolute; inset: 0; pointer-events: none; }
.rpt-contab__glow { position: absolute; border-radius: 50%; filter: blur(100px); }
.rpt-contab__glow--1 { top: -150px; left: -100px; width: 500px; height: 500px; background: rgba(232, 68, 90, 0.08); }
.rpt-contab__glow--2 { bottom: -150px; right: -100px; width: 500px; height: 500px; background: rgba(247, 148, 29, 0.06); }
.rpt-contab__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.rpt-contab__inner { padding: 0 2rem; }
}
.rpt-contab__inner { position: relative; z-index: 1; }
.rpt-contab__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 3rem; }
.rpt-contab__tab { display: inline-block; font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); padding: 0.5rem 1rem; border-radius: 9999px; transition: all 0.3s ease; white-space: nowrap; }
.rpt-contab__tab:hover { color: var(--fs-branco); background: rgba(255, 255, 255, 0.08); border-color: rgba(232, 68, 90, 0.3); }
.rpt-contab__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) {
.rpt-contab__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.rpt-contab__grid { grid-template-columns: repeat(3, 1fr); }
}
.rpt-contab__reform { text-align: center; margin-top: 3rem; padding: 2rem 1.5rem; background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(139, 92, 246, 0.06) 100%); border: 1px solid rgba(59, 130, 246, 0.15); border-radius: 1.5rem; }
.rpt-contab__reform-badge { display: inline-block; font-size: 0.875rem; font-weight: 700; color: #93c5fd; margin-bottom: 0.75rem; }
.rpt-contab__reform-text { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); line-height: 1.7; max-width: 600px; margin: 0 auto; }
.rpt-contab__reform-text strong { color: rgba(255, 255, 255, 0.8); }
.rpt-contab__cta { text-align: center; margin-top: 3rem; }
.rpt-contab__cta p { font-family: "Outfit", "Inter", sans-serif; font-size: 1.5rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); margin-bottom: 1.25rem; }
@media (min-width: 768px) {
.rpt-contab__cta p { font-size: 1.875rem; }
}
.rpt-contab-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 1rem; padding: 1.25rem; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; }
.rpt-contab-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); opacity: 0; transition: opacity 0.3s ease; }
.rpt-contab-card:hover { border-color: rgba(232, 68, 90, 0.2); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); }
.rpt-contab-card:hover::before { opacity: 1; }
.rpt-contab-card__icon { font-size: 1.8rem; display: block; margin-bottom: 0.75rem; }
.rpt-contab-card__title { font-family: "Outfit", "Inter", sans-serif; font-size: 1rem; font-weight: 700; color: var(--fs-branco); margin-bottom: 1rem; text-align: left; }
.rpt-contab-card__list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.rpt-contab-card__list li { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); line-height: 1.5; padding-left: 1rem; position: relative; text-align: left; }
.rpt-contab-card__list li::before { content: "→"; position: absolute; left: 0; color: rgba(232, 68, 90, 0.5); font-size: 0.75rem; }
.rpt-features { padding: 80px 0; background: var(--fs-cinza); }
.rpt-features__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.rpt-features__inner { padding: 0 2rem; }
}
.rpt-features__grid { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; max-width: 900px; margin: 0 auto; }
.rpt-faq { padding: 80px 0 100px; background: var(--fs-branco); }
.rpt-faq__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.rpt-faq__inner { padding: 0 2rem; }
}
.rpt-faq__inner { max-width: 760px; }
.rpt-faq__list .faq-accordion__item { border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1rem !important; margin-bottom: 0.75rem; overflow: hidden; transition: all 0.3s ease; }
.rpt-faq__list .faq-accordion__item:hover { border-color: rgba(232, 68, 90, 0.15); }
.rpt-faq__list .faq-accordion__item--open { border-color: rgba(232, 68, 90, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); }
.rpt-final-cta { position: relative; padding: 100px 0; background: linear-gradient(180deg, #08070d 0%, #0d0b15 100%); color: var(--fs-branco); overflow: hidden; }
.rpt-final-cta__bg { position: absolute; inset: 0; pointer-events: none; }
.rpt-final-cta__glow { position: absolute; border-radius: 50%; filter: blur(100px); }
.rpt-final-cta__glow--1 { top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: rgba(232, 68, 90, 0.1); }
.rpt-final-cta__glow--2 { bottom: -100px; right: -100px; width: 400px; height: 400px; background: rgba(247, 148, 29, 0.08); }
.rpt-final-cta__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.rpt-final-cta__inner { padding: 0 2rem; }
}
.rpt-final-cta__inner { position: relative; z-index: 1; text-align: center; }
.rpt-final-cta__badge { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fs-ok-claro); background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.2); padding: 0.5rem 1.25rem; border-radius: 9999px; margin-bottom: 1.5rem; }
.rpt-final-cta__title { font-family: "Outfit", "Inter", sans-serif; font-size: clamp(1.5rem, 5vw, 3rem); font-weight: 800; line-height: 1.12; margin-bottom: 1.25rem; letter-spacing: -0.03em; }
.rpt-final-cta__sub { font-size: 1.125rem; color: rgba(255, 255, 255, 0.5); max-width: 540px; margin: 0 auto 2.5rem; line-height: 1.65; }
.rpt-final-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.rpt-vs-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) {
.rpt-vs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.rpt-vs-grid { grid-template-columns: repeat(3, 1fr); }
}
.rpt-vs-card { border-radius: 1.5rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.rpt-vs-card:hover { border-color: rgba(232, 68, 90, 0.2); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); }
.rpt-vs-card__bad { padding: 1rem 1.25rem; background: rgba(239, 68, 68, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.04); display: flex; align-items: flex-start; gap: 0.75rem; }
.rpt-vs-card__bad-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.rpt-vs-card__bad-text { font-size: 0.875rem; color: rgba(255, 255, 255, 0.45); line-height: 1.5; text-align: left; text-decoration: line-through; text-decoration-color: rgba(239, 68, 68, 0.4); }
.rpt-vs-card__good { padding: 1.25rem; background: rgba(34, 197, 94, 0.04); display: flex; align-items: flex-start; gap: 0.75rem; }
.rpt-vs-card__good-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.rpt-vs-card__good-text { font-size: 1rem; color: #86efac; font-weight: 600; line-height: 1.5; text-align: left; }
.rpt-vs-card__good-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--fs-ok-claro); background: rgba(34, 197, 94, 0.1); padding: 2px 0.5rem; border-radius: 0.375rem; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.06em; }
.rpt-content-section { max-width: 900px; margin: 0 auto; }
.rpt-content-card { background: var(--fs-branco); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1.5rem; padding: 2rem; position: relative; overflow: hidden; }
.rpt-content-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); opacity: 0.6; }
.rpt-features .rpt-content-card { background: var(--fs-branco); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04); }
.rpt-cats .rpt-content-card { background: var(--fs-branco); }
.rpt-content-card__body { font-size: 1rem; line-height: 1.85; color: #666666; }
.rpt-content-card__body p { margin-bottom: 1rem; }
.rpt-content-card__body p:last-child { margin-bottom: 0; }
.rpt-content-card__body strong { color: #333333; font-weight: 600; }
.rpt-content-card__body ul, .rpt-content-card__body ol { margin: 1rem 0; padding-left: 1.25rem; }
.rpt-content-card__body ul li, .rpt-content-card__body ol li { margin-bottom: 0.5rem; line-height: 1.7; }
.rpt-content-card__body h3, .rpt-content-card__body h4 { font-family: "Outfit", "Inter", sans-serif; color: #333333; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.rpt-content-card__body h3:first-child, .rpt-content-card__body h4:first-child { margin-top: 0; }
.rpt-content-card__body h3 { font-size: 1.125rem; }
.rpt-content-card__body h4 { font-size: 1rem; }
.rpt-related { padding: 80px 0 100px; background: var(--fs-cinza); }
.rpt-related__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.rpt-related__inner { padding: 0 2rem; }
}
.rpt-related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) {
.rpt-related__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.rpt-related__grid { grid-template-columns: repeat(4, 1fr); }
}
.rpt-rel-card { text-align: center; padding: 1.25rem 1rem; background: var(--fs-branco); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1rem; transition: all 0.3s ease; text-decoration: none; display: block; }
.rpt-rel-card:hover { border-color: transparent; transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); }
.rpt-rel-card__icon { font-size: 2rem; display: block; margin-bottom: 0.75rem; }
.rpt-rel-card__name { font-family: "Outfit", "Inter", sans-serif; font-size: 0.875rem; font-weight: 700; color: #333333; margin-bottom: 0.25rem; }
.rpt-rel-card__desc { font-size: 0.75rem; color: #999999; line-height: 1.5; }
.rpt-modules { position: relative; padding: 100px 0; background: linear-gradient(180deg, #08070d 0%, #0d0b15 50%, #0a0812 100%); color: var(--fs-branco); overflow: hidden; }
.rpt-modules::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 500px; background: radial-gradient(ellipse, rgba(232, 68, 90, 0.08) 0%, transparent 60%); pointer-events: none; }
.rpt-modules::after { content: ""; position: absolute; bottom: 0; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(247, 148, 29, 0.06) 0%, transparent 60%); pointer-events: none; }
.rpt-modules .rpt-section-header__title { color: var(--fs-branco); }
.rpt-modules .rpt-section-header__sub { color: rgba(255, 255, 255, 0.5); }
.rpt-modules__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.rpt-modules__inner { padding: 0 2rem; }
}
.rpt-modules__inner { position: relative; z-index: 1; }
.rpt-modules__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) {
.rpt-modules__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.rpt-modules__grid { grid-template-columns: repeat(3, 1fr); }
}
.rpt-module-card { position: relative; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 1.5rem; padding: 2rem 1.5rem; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.rpt-module-card:hover { border-color: rgba(232, 68, 90, 0.25); transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(232, 68, 90, 0.05); }
.rpt-module-card__accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); }
.rpt-module-card__icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; font-size: 2rem; background: linear-gradient(135deg, rgba(232, 68, 90, 0.12) 0%, rgba(247, 148, 29, 0.12) 100%); border: 1px solid rgba(232, 68, 90, 0.15); border-radius: 1rem; margin-bottom: 1rem; }
.rpt-module-card__badge { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.75rem; }
.rpt-module-card__title { font-family: "Outfit", "Inter", sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--fs-branco); line-height: 1.3; margin-bottom: 1rem; text-align: left; }
.rpt-module-card__body { font-size: 0.875rem; line-height: 1.75; color: rgba(255, 255, 255, 0.5); text-align: left; }
.rpt-module-card__body p { margin-bottom: 0.75rem; }
.rpt-module-card__body p:last-child { margin-bottom: 0; }
.rpt-module-card__body strong { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
@media (min-width: 1024px) {
.rpt-module-card:first-child { grid-column: 1/-1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 1.5rem; }
.rpt-module-card:first-child .rpt-module-card__accent { grid-column: 1/-1; }
.rpt-module-card:first-child .rpt-module-card__icon { grid-row: 1; grid-column: 1; align-self: start; }
.rpt-module-card:first-child .rpt-module-card__badge { grid-row: 1; grid-column: 2; align-self: center; }
.rpt-module-card:first-child .rpt-module-card__title { grid-row: 2; grid-column: 1/-1; }
.rpt-module-card:first-child .rpt-module-card__body { grid-row: 3; grid-column: 1/-1; }
}
/* ══════════════════════════════════════════════════════════════════════════
   CORREÇÕES DE CONTRASTE — o que muda de propósito em relação ao original.

   Medido nas 31 páginas comerciais: 40 falhas, concentradas em 6 causas.
   Cada bloco abaixo mata uma delas em todas as páginas de uma vez.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. O gradiente da marca recortado em texto — 2,28 na ponta laranja sobre
      fundo claro, e aparece 60 vezes nos PHP. Mesmo desenho, pontas
      escurecidas até o texto passar (4, 6). */
.rpt-gradient-text {
  background-image: var(--fs-gradiente-botao);
}
/* 2. O mesmo gradiente num rótulo de 12px (texto normal, exige 4, 5): não
      passa em gradiente nenhum. Vira cor sólida. */
.rpt-section-header__label {
  background: none;
  -webkit-text-fill-color: var(--fs-secundaria-forte);
  color: var(--fs-secundaria-forte);
}
/* 3. O botão primário das 31 páginas: rótulo branco sobre o gradiente da
      marca = 2,28. Mesma correção do `.btn--primary` da home. */
.rpt-btn--primary {
  background-image: var(--fs-gradiente-botao);
}
/* 4. O botão fantasma em faixa clara herdava cor de faixa escura. */
.rpt-btn--ghost { color: var(--fs-texto); border: 2px solid var(--fs-borda); }
.rpt-btn--ghost:hover { border-color: var(--fs-primaria); color: var(--fs-primaria-forte); }
/* 5. Subtítulo de cabeçalho escuro em `hsla(0, 0%, 100%, .5)` = 4, 4 sobre o
      fundo daquelas seções. O token equivalente dá 6,65. */
.rpt-section-header--dark .rpt-section-header__sub { color: var(--fs-texto-claro-3); }
/* 6. ⛔ AQUI EU ERREI, E REVERTI — vale ficar escrito para ninguém repetir.

      Troquei o verde `#4ade80` destas seções pelo tom de fundo claro, porque
      o auditor acusava 1,31. O AUDITOR é que estava errado: ele empilhava
      camadas translúcidas perdendo o canal alfa e concluía que o fundo era
      verde sólido, quando na verdade é quase preto
      (`linear-gradient(#08070d, #0d0b15)` com dois véus de verde a 10% e 4%).

      Medido de novo, com o auditor consertado, sobre o fundo real [12, 33, 24]:

          #4ADE80  (o original)   9,29   passa folgado
          #15803D  (minha troca)  3,23   reprova

      A cor original estava certa e a "correção" é que quebrava. Revertido: as
      10 ocorrências voltaram a `--fs-ok-claro`, que é o mesmo #4ADE80 com
      nome. O conserto do medidor está em scripts/contraste.js, em fundosDe().

      ⭐ A lição: contraste medido sobre fundo translúcido empilhado é fácil de
      errar, e errar para MAIS grave — "conserta" o que estava bom. Quando o
      número surpreender, conferir o fundo resolvido antes de mexer na cor. */

/* 7. O selo do CTA final: mesmo verde, mas neste a faixa é CLARA — medido
      3,54. Aqui sim o tom de fundo claro é o certo (5,02). Dois selos quase
      iguais, fundos opostos, tokens opostos: é por isso que a paleta tem os
      dois e não um "verde". */
.rpt-final-cta__badge { color: var(--fs-ok-claro); }
/* 8. O rótulo de cabeçalho em faixa ESCURA: a cor sólida da correção 2 é o
      tom de fundo claro e some no preto. Cada fundo, seu token. */
.rpt-section-header--dark .rpt-section-header__label {
  -webkit-text-fill-color: var(--fs-secundaria);
  color: var(--fs-secundaria);
}
/* 9. O breadcrumb dentro do hero escuro: `hsla(0, 0%, 100%, .4)` = 3,77 num
      link de 14px. Precisa desta especificidade porque a regra original
      também é `.rpt-hero .breadcrumb .breadcrumb__link`. */
.rpt-hero .breadcrumb .breadcrumb__link { color: var(--fs-texto-claro-3); }
.rpt-hero .breadcrumb .breadcrumb__separator { color: var(--fs-texto-claro-3); }
/* 10. ⛔ O BLOCO DE RESPOSTA DIRETA ESTAVA ILEGÍVEL NO HERO.
       `.resposta-direta` não declara cor nenhuma — herda o #333 do body, e o
       hero das 31 páginas é escuro: 1,52. Ou seja, o parágrafo que existe
       justamente para ser lido primeiro (e é o formato que vira citação em
       mecanismo de IA, ver includes/blocos.php) chegava invisível.

       A cor vai no CONTAINER e os filhos herdam — enumerar filho por filho é
       a regressão que este projeto já teve uma vez. */
.rpt-hero .resposta-direta { color: var(--fs-texto-claro-2); }
/* 11. O rótulo de cabeçalho na seção de módulos: fundo escuro sem o
       modificador `--dark` na classe, então a correção 8 não alcança. */
.rpt-modules .rpt-section-header__label, .rpt-contab .rpt-section-header__label {
  -webkit-text-fill-color: var(--fs-secundaria);
  color: var(--fs-secundaria);
}
/* 12. O CTA do meio tem o gradiente da marca como FUNDO e texto por cima.
       `#333` dá 3,25 na ponta laranja. Quase-preto passa nas duas pontas
       (4,70 no rosa · 8,01 no laranja) e mantém o contraste quente. */
.rpt-mid-cta__text { color: var(--fs-escuro-2); }
/* O <strong> dentro dele era o gradiente da marca recortado — gradiente
   sobre gradiente, ilegível por definição. Vira peso, não cor. */
.rpt-mid-cta__text strong {
  background: none;
  -webkit-text-fill-color: var(--fs-escuro-2);
  color: var(--fs-escuro-2);
  font-weight: var(--fs-p-extra);
}
/* 13. `.rpt-module-card__badge`: gradiente recortado num rótulo de 12px, que
       nunca passa. Cor sólida — e o fundo daquele cartão é ESCURO ([15, 14, 20], medido), então o token certo é o laranja da marca (8,11) e não o tom de
       fundo claro, que daria 3,61. */
.rpt-module-card__badge {
  background: none;
  -webkit-text-fill-color: var(--fs-secundaria);
  color: var(--fs-secundaria);
}
/* ══════════════════════════════════════════════════════════════════════════
   BLOG — o layout que estava quebrado no celular
   ══════════════════════════════════════════════════════════════════════════
   Dois problemas, um meu e um herdado:

   1. (meu) A primeira extração achatou os `@media` e deixou 4 colunas valendo
      em qualquer largura. Corrigido na origem — o arquivo voltou a ser
      recompilado do SCSS com as 56 media queries preservadas.

   2. (herdado) Mesmo com os breakpoints certos, o original dava DUAS colunas
      num celular de 360px: cards de 149px, com o título quebrando palavra por
      palavra e a data sozinha na última linha.

   `auto-fit` + `minmax` resolve os dois e ainda apaga as duas media queries:
   1 coluna no celular, 2 no tablet, 3 no laptop, 4 no monitor — decidido pelo
   espaço que o cartão precisa, não por um número de pixel escolhido a dedo. */
.rpt-related__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--fs-e-4);
}
/* O cartão de artigo: texto à esquerda. Título de blog é longo, e centralizado
   ele vira um losango de palavras — foi o que apareceu no print do celular. */
.rpt-rel-card {
  text-align: left;
  padding: var(--fs-e-4);
  display: flex;
  flex-direction: column;
  gap: var(--fs-e-2);
}
/* A capa precisa de proporção fixa: sem isto cada imagem entra com uma altura
   e a grade fica com os cartões desalinhados. */
.rpt-rel-card .blog-capa {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--fs-r-sm);
  margin-bottom: var(--fs-e-2);
  background: var(--fs-cinza);
}
.rpt-rel-card__name {
  font-family: var(--fs-fonte-titulo);
  font-size: var(--fs-t-md);
  font-weight: var(--fs-p-forte);
  line-height: 1.25;
  color: var(--fs-texto);
  margin: 0;
}
.rpt-rel-card__desc {
  font-size: var(--fs-t-sm);
  line-height: 1.55;
  color: var(--fs-texto-2);
  margin: 0;
  flex: 1;
}
/* a data e o tempo de leitura ficavam colados no fim do resumo */
.rpt-rel-card__meta {
  font-size: var(--fs-t-xs);
  color: var(--fs-texto-3);
  margin-top: var(--fs-e-2);
}
.rpt-rel-card__cta {
  font-size: var(--fs-t-sm);
  font-weight: var(--fs-p-semi);
  color: var(--fs-primaria-forte);
}
/* o destaque ocupa a linha inteira e mostra a capa grande */
.rpt-rel-card--destaque {
  grid-column: 1 / -1;
  padding: var(--fs-e-6);
}
.rpt-rel-card--destaque .blog-capa { aspect-ratio: 21 / 9; }
.rpt-rel-card--destaque .rpt-rel-card__name { font-size: var(--fs-t-xl); }
/* 14. `.rpt-cat-card__tag` voltou a 2,85 na remontagem — é o `#999` que a
       troca de token não alcançou naquela regra. `--fs-texto-3` dá 5,13. */
.rpt-cat-card .rpt-cat-card__tag { color: var(--fs-texto-3); }

/* ===== secoes/04-pm.css ===== */
/* ══════════════════════════════════════════════════════════════════════════
   04-pm.css — o vocabulário `pm-*`: hero, cartões, passos, comparativo, FAQ e
   CTAs das PÁGINAS FIXAS (/precos/, /sobre/, /contato/, /comparativo/,
   /seguranca/, /demonstracao/, /revenda-de-software/, /termos/ e as outras).

   Substitui `sections/_premium.scss` (32 KB de SCSS).

   ⭐ Mesmo método do 03-rpt.css: 224 regras extraídas do bundle compilado, 88
   cores literais trocadas por token.

   ⛔ DIFERENÇA DELIBERADA em relação ao 03-rpt: aqui a extração só trocou
   cores de MESMO VALOR — o hex e o token são a mesma cor, só ganha nome.
   No arquivo anterior eu troquei alguns por valores diferentes "para melhorar
   o contraste" sem saber se o fundo daquele ponto era claro ou escuro, e
   quebrei dois que estavam certos (ver a correção 6 do 03-rpt.css).

   As mudanças de cor de verdade estão no bloco de correções no fim, cada uma
   com o fundo medido antes.
   ══════════════════════════════════════════════════════════════════════════ */
.pm-gradient-text { background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pm-gradient-text::selection { -webkit-text-fill-color: var(--fs-branco); background: rgba(232, 68, 90, 0.4); }
.pm-section { padding: 80px 0; background: var(--fs-branco); }
.pm-section--light { background: var(--fs-cinza); }
.pm-section--dark { background: linear-gradient(180deg, #08070d 0%, #0d0b15 100%); color: var(--fs-branco); }
.pm-section__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.pm-section__inner { padding: 0 2rem; }
}
.pm-section-header { text-align: center; margin-bottom: 3rem; }
.pm-section-header__label { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pm-section-header__label::selection { -webkit-text-fill-color: var(--fs-branco); background: rgba(232, 68, 90, 0.4); }
.pm-section-header__label { margin-bottom: 0.75rem; }
.pm-section-header__title { font-family: "Outfit", "Inter", sans-serif; font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; color: #333333; line-height: 1.15; letter-spacing: -0.03em; }
.pm-section-header__sub { font-size: 1.125rem; color: #666666; max-width: 540px; margin: 1rem auto 0; line-height: 1.65; }
.pm-section-header--dark .pm-section-header__title { color: var(--fs-branco); }
.pm-section-header--dark .pm-section-header__sub { color: rgba(255, 255, 255, 0.5); }
.pm-btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; border-radius: 1rem; padding: 1rem 2rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; border: none; }
.pm-btn--primary { color: var(--fs-branco); background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); box-shadow: 0 4px 20px rgba(232, 68, 90, 0.25); }
.pm-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(232, 68, 90, 0.35); }
.pm-btn--ghost { color: #333333; background: transparent; border: 1.5px solid var(--fs-borda); }
.pm-btn--ghost:hover { border-color: var(--fs-primaria); color: var(--fs-primaria-forte); transform: translateY(-2px); }
.pm-btn--ghost-light { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.15); }
.pm-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
.pm-btn--sm { padding: 0.75rem 1.5rem; font-size: 0.875rem; }
.pm-btn--lg { padding: 1.25rem 2.5rem; font-size: 1.125rem; }
.pm-hero { position: relative; padding: 140px 0 80px; background: #0a0a0a; overflow: hidden; }
@media (max-width: 640px) {
.pm-hero { padding: 120px 0 60px; }
}
.pm-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.pm-hero__glow { position: absolute; border-radius: 50%; }
.pm-hero__glow--1 { top: -30%; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse at center, rgba(232, 68, 90, 0.18) 0%, rgba(247, 148, 29, 0.06) 50%, transparent 70%); filter: blur(60px); }
.pm-hero__glow--2 { bottom: -40%; left: 50%; transform: translateX(-50%); width: 900px; height: 500px; background: radial-gradient(ellipse at center, rgba(247, 148, 29, 0.1) 0%, rgba(232, 68, 90, 0.04) 50%, transparent 70%); filter: blur(80px); }
.pm-hero__grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, transparent 80%); }
.pm-hero__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.pm-hero__inner { padding: 0 2rem; }
}
.pm-hero__inner { position: relative; z-index: 1; text-align: center; }
.pm-hero__badge { display: inline-block; font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.5rem 1.25rem; border-radius: 9999px; margin-bottom: 1.5rem; backdrop-filter: blur(8px); letter-spacing: 0.02em; }
.pm-hero__title { font-family: "Outfit", "Inter", sans-serif; font-size: clamp(1.875rem, 6vw, 3rem); font-weight: 800; color: var(--fs-branco); line-height: 1.1; letter-spacing: -0.04em; margin-bottom: 1.25rem; }
.pm-hero__subtitle { font-size: 1.125rem; color: rgba(255, 255, 255, 0.6); max-width: 780px; margin: 0 auto 2rem; line-height: 1.7; }
@media (min-width: 768px) {
.pm-hero__subtitle { font-size: 1.25rem; }
}
.pm-hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; }
.pm-hero__actions .pm-btn--ghost { color: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.2); }
.pm-hero__actions .pm-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.05); }
.pm-hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 650px; margin: 0 auto; }
@media (min-width: 640px) {
.pm-hero__stats { grid-template-columns: repeat(4, 1fr); }
}
.pm-hero::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 68, 90, 0.4), rgba(247, 148, 29, 0.3), transparent); }
.pm-hero .breadcrumb .breadcrumb__link { color: rgba(255, 255, 255, 0.4); }
.pm-hero .breadcrumb .breadcrumb__link:hover { color: rgba(255, 255, 255, 0.7); }
.pm-hero .breadcrumb .breadcrumb__current { color: rgba(255, 255, 255, 0.6); }
.pm-hero .breadcrumb .breadcrumb__separator { color: rgba(255, 255, 255, 0.25); }
.pm-stat { text-align: center; padding: 1rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1rem; backdrop-filter: blur(8px); }
.pm-stat strong { display: block; font-family: "Outfit", "Inter", sans-serif; font-size: 1.25rem; font-weight: 800; background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pm-stat strong::selection { -webkit-text-fill-color: var(--fs-branco); background: rgba(232, 68, 90, 0.4); }
.pm-stat span { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); font-weight: 500; margin-top: 2px; }
.pm-card-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) {
.pm-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 640px) {
.pm-card-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.pm-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 640px) {
.pm-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.pm-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) {
.pm-card-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
.pm-card-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.pm-card-grid--5 { grid-template-columns: repeat(5, 1fr); }
}
.pm-card { display: flex; flex-direction: column; padding: 1.5rem; background: var(--fs-branco); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1.5rem; text-decoration: none; color: inherit; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; }
.pm-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); opacity: 0; transition: opacity 0.3s ease; }
.pm-card:hover { border-color: transparent; transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); }
.pm-card:hover::before { opacity: 1; }
.pm-card__icon { font-size: 2.2rem; display: block; text-align: center; margin-bottom: 1rem; }
.pm-card__title { font-family: "Outfit", "Inter", sans-serif; font-size: 1.125rem; font-weight: 700; color: #333333; margin-bottom: 0.5rem; text-align: center; }
.pm-card__desc { font-size: 0.875rem; color: #666666; line-height: 1.65; text-align: center; flex: 1; }
.pm-card__link { display: block; margin-top: 1rem; color: var(--fs-primaria-forte); font-size: 0.875rem; font-weight: 600; text-align: center; }
.pm-steps { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) {
.pm-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.pm-steps { grid-template-columns: repeat(4, 1fr); }
}
.pm-step { text-align: center; padding: 1.5rem; background: var(--fs-branco); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1.5rem; transition: all 0.3s ease; position: relative; }
.pm-step:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); }
.pm-step__num { font-family: "Outfit", "Inter", sans-serif; font-size: 1.875rem; font-weight: 800; background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pm-step__num::selection { -webkit-text-fill-color: var(--fs-branco); background: rgba(232, 68, 90, 0.4); }
.pm-step__num { line-height: 1; margin-bottom: 0.5rem; }
.pm-step__icon { font-size: 1.5rem; display: block; margin-bottom: 0.75rem; }
.pm-step__title { font-family: "Outfit", "Inter", sans-serif; font-size: 1rem; font-weight: 700; color: #333333; margin-bottom: 0.5rem; }
.pm-step__desc { font-size: 0.875rem; color: #666666; line-height: 1.6; }
.pm-features { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; max-width: 900px; margin: 0 auto; }
.pm-feature-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--fs-branco); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 9999px; font-size: 0.875rem; font-weight: 500; color: #333333; transition: all 0.3s ease; white-space: nowrap; }
.pm-feature-pill:hover { border-color: rgba(232, 68, 90, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); transform: translateY(-2px); }
.pm-feature-pill__check { color: var(--fs-primaria-forte); font-weight: 700; }
.pm-faq { padding: 80px 0; background: var(--fs-branco); }
.pm-faq__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.pm-faq__inner { padding: 0 2rem; }
}
.pm-faq__inner { max-width: 760px; }
.pm-faq__list .faq-accordion__item { border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1rem !important; margin-bottom: 0.75rem; overflow: hidden; transition: all 0.3s ease; }
.pm-faq__list .faq-accordion__item:hover { border-color: rgba(232, 68, 90, 0.15); }
.pm-faq__list .faq-accordion__item--open { border-color: rgba(232, 68, 90, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); }
.pm-dark-cta { position: relative; padding: 100px 0; background: linear-gradient(180deg, #08070d 0%, #0d0b15 100%); color: var(--fs-branco); overflow: hidden; }
.pm-dark-cta__bg { position: absolute; inset: 0; pointer-events: none; }
.pm-dark-cta__glow { position: absolute; border-radius: 50%; filter: blur(100px); }
.pm-dark-cta__glow--1 { top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: rgba(232, 68, 90, 0.1); }
.pm-dark-cta__glow--2 { bottom: -100px; right: -100px; width: 400px; height: 400px; background: rgba(247, 148, 29, 0.08); }
.pm-dark-cta__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.pm-dark-cta__inner { padding: 0 2rem; }
}
.pm-dark-cta__inner { position: relative; z-index: 1; text-align: center; }
.pm-dark-cta__badge { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fs-ok-claro); background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.2); padding: 0.5rem 1.25rem; border-radius: 9999px; margin-bottom: 1.5rem; }
.pm-dark-cta__title { font-family: "Outfit", "Inter", sans-serif; font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 800; line-height: 1.15; margin-bottom: 1.25rem; letter-spacing: -0.03em; }
.pm-dark-cta__sub { font-size: 1.125rem; color: rgba(255, 255, 255, 0.5); max-width: 540px; margin: 0 auto 2.5rem; line-height: 1.65; }
.pm-dark-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.pm-mid-cta { padding: 3rem 0; background: linear-gradient(135deg, rgba(232, 68, 90, 0.04) 0%, rgba(247, 148, 29, 0.04) 100%); border-top: 1px solid rgba(232, 68, 90, 0.08); border-bottom: 1px solid rgba(247, 148, 29, 0.08); }
.pm-mid-cta__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.pm-mid-cta__inner { padding: 0 2rem; }
}
.pm-mid-cta__inner { text-align: center; }
.pm-mid-cta__text { font-family: "Outfit", "Inter", sans-serif; font-size: 1.25rem; color: #333333; margin-bottom: 1.25rem; line-height: 1.5; }
.pm-mid-cta__text strong { background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pm-mid-cta__text strong::selection { -webkit-text-fill-color: var(--fs-branco); background: rgba(232, 68, 90, 0.4); }
@media (min-width: 768px) {
.pm-mid-cta__text { font-size: 1.5rem; }
}
.pm-compare-wrap { border-radius: 1.5rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(4px); }
.pm-compare { width: 100%; }
.pm-compare__header { display: grid; grid-template-columns: 1.4fr 1.2fr 1.2fr; }
.pm-compare__header .pm-compare__col--others { background: rgba(255, 255, 255, 0.04); padding: 1rem 1.25rem; }
.pm-compare__header .pm-compare__col--feature { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); }
.pm-compare__header .pm-compare__col--others { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; color: rgba(239, 68, 68, 0.8); justify-content: center; }
.pm-compare__header .pm-compare__col--food { background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); color: var(--fs-branco); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; gap: 0.5rem; justify-content: center; padding: 1rem 1.25rem; border-radius: 1rem 1rem 0 0; position: relative; }
.pm-compare__header .pm-compare__col--food::after { content: ""; position: absolute; bottom: -8px; left: 10%; right: 10%; height: 16px; background: linear-gradient(135deg, rgba(232, 68, 90, 0.4), rgba(247, 148, 29, 0.3)); filter: blur(12px); border-radius: 50%; }
@media (max-width: 640px) {
.pm-compare__header { display: none; }
}
.pm-compare__row { display: grid; grid-template-columns: 1.4fr 1.2fr 1.2fr; border-top: 1px solid rgba(255, 255, 255, 0.05); transition: background 0.2s ease; }
.pm-compare__row:hover .pm-compare__col--others { background: rgba(255, 255, 255, 0.02); }
.pm-compare__row .pm-compare__col--food { background: linear-gradient(135deg, rgba(232, 68, 90, 0.1) 0%, rgba(247, 148, 29, 0.1) 100%); border-left: 1px solid rgba(232, 68, 90, 0.15); }
.pm-compare__row:last-child .pm-compare__col--food { border-radius: 0 0 1rem 0; }
.pm-compare__row-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 0.5rem; background: rgba(232, 68, 90, 0.12); color: var(--fs-primaria); flex-shrink: 0; margin-right: 0.75rem; }
.pm-compare__col { padding: 1rem 1.25rem; font-size: 0.875rem; display: flex; align-items: center; }
.pm-compare__col--feature { font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.pm-compare__col--others { color: rgba(255, 255, 255, 0.5); gap: 0.6rem; }
.pm-compare__col--food { color: var(--fs-branco); font-weight: 600; gap: 0.6rem; }
.pm-compare__cta { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); border-radius: 0 0 1.5rem 1.5rem; gap: 1rem; }
.pm-compare__cta-text { display: flex; align-items: center; gap: 1rem; color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; line-height: 1.5; }
.pm-compare__cta-text strong { color: var(--fs-branco); }
.pm-compare__cta-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(232, 68, 90, 0.1); border: 1px solid rgba(232, 68, 90, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--fs-secundaria); }
.pm-compare__cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); color: var(--fs-branco); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 0.75rem; text-decoration: none; white-space: nowrap; transition: opacity 0.2s, transform 0.2s; flex-shrink: 0; }
.pm-compare__cta-btn:hover { opacity: 0.9; transform: translateY(-1px); }
@media (max-width: 640px) {
.pm-compare__row { display: flex; flex-direction: column; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.pm-compare__row .pm-compare__col { padding: 0.75rem 1rem; }
.pm-compare__row .pm-compare__col--feature { font-size: 0.95rem; padding-bottom: 0; }
.pm-compare__row .pm-compare__col--others { padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.75rem; }
.pm-compare__row .pm-compare__col--others svg { flex-shrink: 0; }
.pm-compare__row .pm-compare__col--food { background: linear-gradient(135deg, rgba(232, 68, 90, 0.12) 0%, rgba(247, 148, 29, 0.12) 100%); border-left: none; border-radius: 0.5rem; margin: 0 0.75rem 0.75rem; padding: 0.75rem 1rem; font-size: 0.75rem; }
.pm-compare__row .pm-compare__col--food svg { flex-shrink: 0; }
.pm-compare__cta { flex-direction: column; text-align: center; padding: 1.25rem 1rem; gap: 0.75rem; }
.pm-compare__cta-text { flex-direction: column; gap: 0.5rem; font-size: 0.75rem; }
.pm-compare__cta-icon { width: 40px; height: 40px; }
.pm-compare__cta-btn { width: 100%; justify-content: center; padding: 1rem; }
}
.pm-pill-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.pm-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--fs-branco); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 9999px; font-size: 0.875rem; font-weight: 500; color: #333333; text-decoration: none; transition: all 0.3s ease; white-space: nowrap; }
.pm-pill:hover { border-color: rgba(232, 68, 90, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); transform: translateY(-2px); }
.pm-section--dark .pm-pill { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); }
.pm-section--dark .pm-pill:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(232, 68, 90, 0.3); color: var(--fs-branco); }
.pm-rich-content { max-width: 900px; margin: 0 auto 2.5rem; background: var(--fs-branco); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1.5rem; padding: 2rem; position: relative; overflow: hidden; }
.pm-rich-content::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); opacity: 0.6; }
.pm-rich-content__title { font-family: "Outfit", "Inter", sans-serif; font-size: clamp(1.3rem, 2.5vw, 1.75rem); font-weight: 800; color: var(--fs-escuro); margin-bottom: 1.25rem; text-align: left; line-height: 1.3; }
.pm-rich-content__body { color: #444; font-size: 0.95rem; line-height: 1.8; text-align: left; }
.pm-rich-content__body h2, .pm-rich-content__body h3, .pm-rich-content__body h4 { text-align: left; color: var(--fs-escuro); font-weight: 700; margin: 2rem 0 0.75rem; }
.pm-rich-content__body h2 { font-size: 1.3rem; }
.pm-rich-content__body h3 { font-size: 1.15rem; }
.pm-rich-content__body p { margin-bottom: 1rem; }
.pm-rich-content__body strong { color: var(--fs-escuro); font-weight: 700; }
.pm-rich-content__body ul, .pm-rich-content__body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.pm-rich-content__body ul li, .pm-rich-content__body ol li { margin-bottom: 0.5rem; line-height: 1.7; }
.pm-rich-content__body a { color: var(--fs-primaria-forte); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(232, 68, 90, 0.3); text-underline-offset: 3px; }
.pm-rich-content__body a:hover { text-decoration-color: var(--fs-primaria-forte); }
.pm-rich-content__body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; }
.pm-rich-content__body table th { background: #f5f5f5; font-weight: 700; text-align: left; padding: 0.75rem 1rem; border-bottom: 2px solid #ddd; }
.pm-rich-content__body table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--fs-borda-suave); }
/* Print real dentro do corpo do post — CLAUDE.md: print antes de ilustração.
   Sem isto o webp de 1440px estoura a coluna no celular. As imagens trazem
   width/height, então o espaço já é reservado e não há salto de layout. */
.pm-rich-content__body figure { margin: 1.75rem 0; }
.pm-rich-content__body img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--fs-borda-suave); }
.pm-rich-content__body figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: #666; line-height: 1.6; }
.pm-section--dark .pm-rich-content { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.06); }
.pm-section--dark .pm-rich-content__body figcaption { color: rgba(255, 255, 255, 0.6); }
.pm-section--dark .pm-rich-content__title { color: var(--fs-branco); }
.pm-section--dark .pm-rich-content__body { color: rgba(255, 255, 255, 0.75); }
.pm-section--dark .pm-rich-content__body strong { color: var(--fs-branco); }
.pm-section--dark .pm-rich-content__body h2, .pm-section--dark .pm-rich-content__body h3, .pm-section--dark .pm-rich-content__body h4 { color: var(--fs-branco); }
.pm-pill__icon svg { vertical-align: middle; overflow: visible; }
.pm-card__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--fs-secundaria); }
.pm-card__icon .ficon { width: 58px; height: 58px; padding: 15px; border-radius: 50%; background: rgba(247, 148, 29, 0.12); box-shadow: inset 0 0 0 1px rgba(247, 148, 29, 0.3); box-sizing: border-box; }
.pm-step__icon { color: var(--fs-secundaria); }
.pm-step__icon svg { width: 1.7rem; height: 1.7rem; }
.pm-pill__icon { display: inline-flex; color: var(--fs-primaria); }
.pm-pill__icon svg { width: 1.15rem; height: 1.15rem; }
/* ══════════════════════════════════════════════════════════════════════════
   CORREÇÕES DE CONTRASTE — cada uma com o fundo medido antes.

   Medido em /precos/: 44 falhas, e quase todas a MESMA: o gradiente da marca
   como fundo com texto branco em cima (2,28 na ponta laranja), ou o gradiente
   recortado em texto sobre fundo claro. É o mesmo problema já resolvido nos
   botões da home — aqui ele só aparece com outro prefixo.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Botão primário: fundo gradiente + rótulo branco = 2,28.
      Mesmo desenho com as pontas escurecidas até o branco passar (4, 6). */
.pm-btn--primary { background: var(--fs-gradiente-botao); }
/* 2. O cartão de preço tem o gradiente da marca como FUNDO, e tudo dentro
      dele é branco: topo, nota, resposta e os 6 itens da lista. Eram 11 das
      44 falhas, todas a mesma. A cor vai no CONTAINER — trocar o fundo do
      card corrige os onze de uma vez, sem enumerar filho por filho.
      (A primeira versão desta regra mirava `.pm-preco-card--destaque`, que
      não existe no HTML; por isso não pegou nada.) */
.pm-preco-card { background: var(--fs-gradiente-botao); }
/* O botão dentro desse card usa branco a 80%% sobre o gradiente = 1,87.
   Dentro do cartão colorido ele precisa de branco pleno e borda visível. */
.pm-preco-card .pm-btn--ghost-light {
  color: var(--fs-branco);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.45);
}
/* 3. Gradiente recortado em texto sobre fundo claro. O rótulo de 12px e o
      número de 30px reprovavam os dois. */
.pm-gradient-text, .pm-section-header__label, .pm-step__num { background-image: var(--fs-gradiente-botao); }
/* 4. `#E8445A` como cor de link num texto de 14px: 3,88 sobre branco. */
.pm-card__link { color: var(--fs-primaria-forte); }
/* 5. Rótulo de 12px com gradiente recortado: 4,21 sobre o fundo claro — em
      texto pequeno nenhum gradiente da marca passa. Cor sólida, como no rpt. */
.pm-section-header__label {
  background: none;
  -webkit-text-fill-color: var(--fs-secundaria-forte);
  color: var(--fs-secundaria-forte);
}
/* 6. O <strong> do CTA do meio era gradiente recortado SOBRE um fundo que já
      é o gradiente da marca — gradiente sobre gradiente é ilegível por
      definição (deu 1,00). Vira peso e cor escura, que passa nas duas pontas. */
.pm-mid-cta__text, .pm-mid-cta__text strong {
  background: none;
  -webkit-text-fill-color: var(--fs-escuro-2);
  color: var(--fs-escuro-2);
}
.pm-mid-cta__text strong { font-weight: var(--fs-p-extra); }
/* 7. O botão dentro do cartão de preço: com fundo a 16% o branco dava 3,48 e
      o rótulo tem 18px sem bold (exige 4, 5). Fundo branco sólido com o texto
      na cor da marca resolve e ainda destaca o CTA principal da página. */
.pm-preco-card .pm-btn--ghost-light {
  background: var(--fs-branco);
  color: var(--fs-primaria-forte);
  border-color: var(--fs-branco);
}
.pm-preco-card .pm-btn--ghost-light:hover {
  background: var(--fs-cinza);
  border-color: var(--fs-cinza);
}
/* 8. O breadcrumb fora do hero escuro (páginas `pm-`): `rgba(255, 255, 255, .4)`
      = 3,77. A regra da ponte só alcançava `.rpt-hero .breadcrumb`. */
.pm-hero .breadcrumb__link, .pm-section--dark .breadcrumb__link { color: var(--fs-texto-claro-3); }
/* 9. Especificidade: as regras originais são `.pm-hero .breadcrumb
      .breadcrumb__link` (três classes). A correção 8 usava duas e perdia a
      disputa em silêncio — o número não mexia e parecia que a cor estava
      certa. Igualando o peso. */
.pm-hero .breadcrumb .breadcrumb__link, .pm-hero .breadcrumb .breadcrumb__separator { color: var(--fs-texto-claro-3); }
.pm-hero .breadcrumb .breadcrumb__current { color: var(--fs-texto-claro-2); }
/* 10. O rótulo em faixa ESCURA: a cor sólida da correção 5 é o tom de fundo
       claro (marrom) e some no preto — 3,81. Em fundo escuro o laranja da
       marca serve como está: 7,47. Cada fundo, seu token. */
.pm-section--dark .pm-section-header__label {
  -webkit-text-fill-color: var(--fs-secundaria);
  color: var(--fs-secundaria);
}
/* 11. ⛔ TEXTO INVISÍVEL — o bug que fez aparecer "barra laranja sem texto".
       `-webkit-text-fill-color` É HERDADO; `background-clip: text` NÃO É.
       Então um `<small>` dentro de um título com gradiente recortado herda o
       preenchimento transparente, não herda o recorte que o tornaria visível, e some — sobrando só a barra de gradiente do pai.

       Vale para qualquer filho inline de texto-gradiente. Devolver o
       preenchimento resolve, e de quebra o "/mês" fica legível em vez de
       colorido. */
.pm-ganho__valor small, .pm-ganho__valor span, .pm-stat strong small, .pm-gradient-text small, .pm-section-header__label small {
  -webkit-text-fill-color: var(--fs-texto-2);
  color: var(--fs-texto-2);
}
/* 12+13. ⛔ REVERTIDAS. Eu "corrigi" a coluna Food do comparativo e os
       valores de comissão da revenda porque o auditor acusava 2,28 — e o
       auditor estava errado pela TERCEIRA vez, agora por não compor gradiente
       TRANSLÚCIDO: lia `linear-gradient(rgba(232, 68, 90, .12)…)` como rosa
       sólido e parava ali.

       O fundo real daquela coluna é [41, 21, 29], quase preto, e o branco em
       cima dá 15, 36 — passava folgado. As duas correções mudavam a cor sem
       necessidade. Fora.

       Sobrou só o que é falha de verdade (medida com o compositor corrigido):
       o <small> herdando fill transparente, tratado na correção 11. */

/* 12. Verificado com o medidor já corrigido (ele errava três coisas antes:
       alfa empilhado, gradiente translúcido e gradiente de `clip:text` contado
       como fundo). Estas cinco são as que sobraram, e são reais:

       .pm-ganho__valor          gradiente da marca recortado sobre fundo
                                 claro = 2,28 — são os valores de comissão, o conteúdo central de /revenda-de-software/
       .pm-compare__col--food    no CABEÇALHO o gradiente é opaco e o rótulo
                                 branco dá 2,28 (nas células ele é um véu de
                                 12% sobre preto e passa folgado — por isso a
                                 regra mira só o cabeçalho)
       .pm-compare__col--others  vermelho a 80% sobre faixa escura = 3,29    */
.pm-ganho__valor { background-image: var(--fs-gradiente-botao); }
.pm-compare__header .pm-compare__col--food { background-image: var(--fs-gradiente-botao); }
.pm-compare__col--others { color: var(--fs-erro-claro); }
/* 13. Os que ficaram a um passo do limite, medidos com o auditor já corrigido:
       `.pm-compare__col--others` em 3,29 (vermelho a 80% sobre faixa escura). */
.pm-compare__col--others { color: var(--fs-erro-claro); }
/* 14. Os dois últimos, com a especificidade das regras originais:
       `.pm-compare__col--others` (vermelho a 80% em faixa escura, 3,29) e o
       botão dentro do cartão de preço (branco a 80% sobre o gradiente, 3,48). */
.pm-compare .pm-compare__col--others { color: var(--fs-erro-claro); }
.pm-preco-card .pm-btn.pm-btn--ghost-light, .pm-preco-card .pm-preco-card__btn {
  background: var(--fs-branco);
  color: var(--fs-primaria-forte);
  border-color: var(--fs-branco);
}

/* ===== secoes/05-estrutura.css ===== */
/* ══════════════════════════════════════════════════════════════════════════
   05-estrutura.css — a última peça vinda do Next.

   Cobre: tipografia, animações (@keyframes), ícones, container, breadcrumb,
   acordeão de FAQ, cabeçalho, rodapé, faixa de vídeos, galeria de sistema e o
   comparativo cinematográfico.

   ⭐ COM ESTE ARQUIVO O `estilos/legado.scss` CHEGA A ZERO `@use`, e o
   `scripts/gerar-css.sh` deixa de precisar do compilador Sass e do repositório
   do Next. O site passa a ser CSS escrito aqui, servido como arquivo — que é
   literalmente a razão de o projeto existir (ver CLAUDE.md).

   ⛔ Os 11 `@keyframes` vêm preservados byte a byte. `pulse` e `float` são
   usados pelo hero; mexer nas paradas de porcentagem quebra a animação sem
   erro nenhum no console.

   ⛔ Os 48 `@media` também vieram inteiros. A primeira tentativa de conversão
   os achatou e deixou a versão desktop valendo no celular — foi o que quebrou
   o layout do blog. Por isso o conversor final usa chaves balanceadas
   (scratchpad/converter-resto.php) em vez de heurística de linha.

   Hex que sobraram de propósito, por serem valor único e decorativo:
   os dourados da galeria (#f5d57a #e6b54a #c8922e #b8924a #3a2a08) e alguns
   fundos escuros pontuais (#111 #202024 #222 #f1f1f3).
   ══════════════════════════════════════════════════════════════════════════ */
.section-label { display: block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-label::selection { -webkit-text-fill-color: var(--fs-branco); background: rgba(232, 68, 90, 0.4); }
.section-label { margin-bottom: 0.75rem; text-align: center; }
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
/* ============================================================
   ÍCONES SVG (componente Icon.tsx → <svg class="ficon">)
   Herdam tamanho do container (1em) e cor via currentColor.
   Aqui damos alinhamento base e uma cor de marca nos containers
   mais visíveis (home), no lugar dos antigos emojis coloridos.
   ============================================================ */
.ficon { vertical-align: -0.125em; flex-shrink: 0; }
.device-card__icon .ficon { width: 3rem; height: 3rem; }
.device-feature__icon .ficon { width: 1.6rem; height: 1.6rem; }
/* ---- Home: Comparativo cinematográfico ---- */
.cc-card__icon { color: var(--fs-secundaria); }
.cc-card__icon .ficon { width: 1.7rem; height: 1.7rem; }
.cinematic-comparison__trust-icon { color: var(--fs-ok-claro); display: inline-flex; }
.cinematic-comparison__trust-icon .ficon { width: 1.2rem; height: 1.2rem; }
.cinematic-comparison__rocket { color: var(--fs-secundaria); }
.cinematic-comparison__rocket .ficon { width: 2.2rem; height: 2.2rem; }
.security-section__shield .ficon { width: 2.6rem; height: 2.6rem; }
.security-section__stat-icon .ficon { width: 1.8rem; height: 1.8rem; }
.how-it-works__badge-icon .ficon { width: 1.05rem; height: 1.05rem; }
.integrations__pill-emoji .ficon { width: 1.25rem; height: 1.25rem; }
/* Fallback geral: qualquer container __icon com svg herda cor do texto, garantindo contraste (line icon monocromático limpo). */
[class$=__icon] > .ficon, [class*="__icon "] > .ficon { color: inherit; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.container { padding: 0 2rem; }
}
.breadcrumb { font-size: 0.875rem; color: var(--fs-texto-3); margin-bottom: 1.5rem; }
.breadcrumb__link { color: var(--fs-texto-3); text-decoration: none; }
.breadcrumb__link:hover { color: var(--fs-primaria-forte); }
.breadcrumb__separator { margin: 0 0.25rem; }
.breadcrumb__current { color: var(--fs-texto-2); }
.faq-accordion { max-width: 800px; margin: 0 auto; }
.faq-accordion__item { border-bottom: 1px solid var(--fs-borda-suave); }
.faq-accordion__item--open .faq-accordion__question { color: var(--fs-primaria-forte); }
.faq-accordion__question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 0; background: none; border: none; cursor: pointer; font-family: "Outfit", "Inter", sans-serif; font-size: 1.125rem; font-weight: 600; color: var(--fs-texto); text-align: left; gap: 1rem; transition: color 150ms ease; }
.faq-accordion__question:hover { color: var(--fs-primaria-forte); }
.faq-accordion__icon { flex-shrink: 0; font-size: 1.25rem; font-weight: 700; color: var(--fs-primaria); }
.faq-accordion__answer { padding: 0 0 1.25rem; color: var(--fs-texto-2); line-height: 1.7; font-size: 1rem; }
.header { position: fixed; top: 0; left: 0; right: 0; height: 72px; background: rgb(10, 10, 10); backdrop-filter: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); z-index: 200; }
.header__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.header__inner { padding: 0 2rem; }
}
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 12px; }
@media (min-width: 768px) {
.header__inner { padding: 0 2rem; }
}
.header__logo { text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; height: 100%; padding: 0.5rem 0; gap: 0; }
.header__logo img { filter: brightness(0) invert(1); }
.header__logo-text { font-family: Arial, Helvetica, sans-serif; font-size: 0.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.05em; margin-top: 0; }
.header__actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
@media (min-width: 768px) {
.header__actions { gap: 12px; }
}
.header__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, #f5d57a 0%, #e6b54a 45%, #c8922e 100%); color: #3a2a08; text-decoration: none; border: 1px solid rgba(255, 230, 160, 0.55); border-radius: 9px; padding: 7px 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 10px rgba(200, 146, 46, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45); transition: all 0.25s ease; }
@media (min-width: 768px) {
.header__cta { border-radius: 10px; padding: 9px 22px; font-size: 0.88rem; letter-spacing: 0.06em; }
}
.header__cta::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%); transform: skewX(-20deg); animation: ctaShine 4.5s ease-in-out infinite; }
.header__cta:hover { filter: brightness(1.05); box-shadow: 0 4px 18px rgba(200, 146, 46, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5); transform: translateY(-1px); }
@keyframes ctaShine {
  0%, 100% {
    left: -75%;
  }
  18%, 82% {
    left: 130%;
  }
}
.header__menu-btn { display: flex; align-items: center; gap: 7px; flex-shrink: 0; background: transparent; color: var(--fs-branco); border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 10px; cursor: pointer; padding: 8px 12px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; transition: all 0.2s ease; }
@media (min-width: 768px) {
.header__menu-btn { gap: 8px; padding: 8px 18px; font-size: 0.9rem; }
}
.header__menu-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--fs-branco); }
.header__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 201; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.header__overlay--visible { opacity: 1; visibility: visible; }
.header__sidebar { position: fixed; inset: 0; background: var(--fs-cinza); z-index: 202; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; overflow-y: auto; }
.header__sidebar::before { content: ""; position: fixed; inset: 0; background: url("/pattern-background.svg") center center/cover no-repeat; opacity: 0.02; pointer-events: none; z-index: 0; }
.header__sidebar > * { position: relative; z-index: 1; }
.header__sidebar--open { opacity: 1; visibility: visible; }
.header__sidebar-top { display: flex; justify-content: flex-end; padding: 16px 20px; flex-shrink: 0; width: 100%; max-width: 960px; margin: 0 auto; }
@media (min-width: 768px) {
.header__sidebar-top { padding: 24px 32px; }
}
.header__sidebar-close { background: var(--fs-branco); border: 1px solid var(--fs-borda); cursor: pointer; color: var(--fs-texto-3); padding: 10px; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
@media (min-width: 768px) {
.header__sidebar-close { padding: 12px; border-radius: 14px; }
}
.header__sidebar-close:hover { background: var(--fs-borda-suave); color: var(--fs-texto); }
.header__sidebar-logo { display: flex; flex-direction: column; align-items: center; padding: 0 0 12px; margin-top: -16px; flex-shrink: 0; }
@media (min-width: 768px) {
.header__sidebar-logo { margin-top: -20px; padding: 0 0 16px; }
}
.header__sidebar-logo-circle { width: 140px; height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
@media (min-width: 768px) {
.header__sidebar-logo-circle { width: 180px; height: 70px; }
}
.header__sidebar-logo-svg { width: 100%; height: 100%; }
.header__sidebar-logo-svg path { fill: none; stroke: var(--fs-primaria); stroke-width: 4; stroke-dasharray: 3000; stroke-dashoffset: 3000; }
.header__sidebar-logo-svg--animate path { animation: logoStrokeDraw 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.header__sidebar-logo-svg--animate .logo-path-1 { animation-delay: 0s; }
.header__sidebar-logo-svg--animate .logo-path-2 { animation-delay: 0.35s; }
.header__sidebar-logo-svg--animate .logo-path-3 { animation-delay: 0.55s; }
.header__sidebar-logo-svg--animate .logo-path-4 { animation-delay: 0.75s; }
@keyframes logoStrokeDraw {
  0% {
    stroke-dashoffset: 3000;
    fill: transparent;
  }
  60% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #E8445A;
  }
}
.header__sidebar-logo-name { font-family: "Outfit", "Inter", sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--fs-branco); letter-spacing: 0.02em; }
.header__mega { display: flex; flex-direction: column; gap: 24px; padding: 0 20px 16px; width: 100%; max-width: 1100px; margin: 0 auto; flex: 1; }
@media (min-width: 768px) {
.header__mega { flex-direction: row; gap: 32px; padding: 0 32px 24px; }
}
.header__mega-col { flex: 1; min-width: 0; }
.header__mega-title { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fs-texto-3); padding: 0 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--fs-borda); }
@media (min-width: 768px) {
.header__mega-title { font-size: 0.72rem; padding: 0 0 12px; }
}
.header__mega-list { display: flex; flex-direction: column; gap: 0; }
.header__mega-item { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 10px; text-decoration: none; color: var(--fs-texto); font-size: 1rem; font-weight: 500; transition: all 0.15s ease; }
.header__mega-item:hover { background: rgba(0, 0, 0, 0.04); color: #111; }
.header__mega-item--active { background: linear-gradient(135deg, rgba(232, 68, 90, 0.08) 0%, rgba(247, 148, 29, 0.06) 100%); color: var(--fs-primaria); font-weight: 600; }
.header__mega-item--active .header__mega-icon { color: var(--fs-primaria); }
.header__mega-item--active .header__mega-icon--gold { color: var(--fs-primaria); }
.header__mega-item--active .header__mega-icon--red { color: var(--fs-primaria); }
.header__mega-item--highlight { background: linear-gradient(135deg, rgba(232, 68, 90, 0.1) 0%, rgba(247, 148, 29, 0.08) 100%); color: var(--fs-secundaria); font-weight: 600; border: 1px solid rgba(247, 148, 29, 0.2); }
.header__mega-item--highlight .header__mega-icon { color: var(--fs-secundaria); }
.header__mega-item--highlight:hover { background: linear-gradient(135deg, rgba(232, 68, 90, 0.15) 0%, rgba(247, 148, 29, 0.12) 100%); border-color: rgba(247, 148, 29, 0.4); }
.header__mega-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #555; }
.header__mega-icon--gold { color: #b8924a; }
.header__mega-icon--red { color: var(--fs-primaria); }
.header__sidebar-footer { padding: 16px 20px 32px; flex-shrink: 0; width: 100%; max-width: 960px; margin: 0 auto; }
@media (min-width: 768px) {
.header__sidebar-footer { padding: 20px 24px 40px; }
}
.header__sidebar-whatsapp { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: linear-gradient(135deg, rgba(232, 68, 90, 0.08) 0%, rgba(247, 148, 29, 0.06) 100%); border: 1px solid rgba(232, 68, 90, 0.15); border-radius: 16px; text-decoration: none; transition: all 0.2s ease; }
.header__sidebar-whatsapp:active { transform: scale(0.98); }
.header__sidebar-whatsapp-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--fs-zap); color: var(--fs-branco); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3); }
.header__sidebar-whatsapp-text { display: flex; flex-direction: column; gap: 2px; }
.header__sidebar-whatsapp-text span { font-size: 0.75rem; color: var(--fs-texto-3); }
.header__sidebar-whatsapp-text strong { font-size: 1rem; font-weight: 700; color: #222; }
.footer { background: #000000; color: rgba(255, 255, 255, 0.7); padding: 4rem 0 2rem; }
.footer__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.footer__inner { padding: 0 2rem; }
}
.footer__grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 2rem; }
@media (min-width: 640px) {
.footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
}
.footer__grid { margin-bottom: 3rem; }
.footer__brand { text-align: left; }
.footer__brand p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.7; }
.footer__heading { font-family: "Outfit", "Inter", sans-serif; font-size: 1rem; font-weight: 600; color: var(--fs-secundaria); margin-bottom: 1rem; text-align: left; }
.footer__links { list-style: none; padding: 0; text-align: left; }
.footer__links li { margin-bottom: 0.5rem; }
.footer__links a { color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 0.875rem; transition: color 150ms ease; }
.footer__links a:hover { color: var(--fs-branco); }
.footer__contact { text-align: left; }
.footer__contact p { font-size: 0.875rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.footer__contact a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.footer__contact a:hover { color: var(--fs-branco); }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 2rem; text-align: left; font-size: 0.875rem; color: var(--fs-texto-claro-3); }
/* ============================================================
   VIDEOAULAS — grid (VideoGrid), faixa (VideoStrip) e hub (/videos/)
   ============================================================ */
.vgrid { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, 1fr); }
.vgrid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
.vgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.vgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.vgrid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.vgrid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.vgrid--3 { grid-template-columns: 1fr; }
}
.vgrid__card { min-width: 0; }
.vgrid__frame { position: relative; aspect-ratio: 16/9; border-radius: 0.75rem; overflow: hidden; background: #111; border: 1px solid var(--fs-borda); }
.vgrid__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vgrid__thumb { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #111; cursor: pointer; display: block; }
.vgrid__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 250ms ease, opacity 250ms ease; }
.vgrid__thumb:hover img, .vgrid__thumb:focus-visible img { transform: scale(1.04); opacity: 0.85; }
.vgrid__thumb:hover .vgrid__play, .vgrid__thumb:focus-visible .vgrid__play { transform: translate(-50%, -50%) scale(1.1); }
.vgrid__thumb:focus-visible { outline: 2px solid var(--fs-primaria); outline-offset: 2px; }
.vgrid__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 9999px; background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); color: var(--fs-branco); display: grid; place-items: center; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); transition: transform 250ms ease; pointer-events: none; }
.vgrid__dur { position: absolute; right: 0.55rem; bottom: 0.55rem; padding: 0.15rem 0.45rem; border-radius: 0.375rem; background: rgba(0, 0, 0, 0.8); color: var(--fs-branco); font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; pointer-events: none; }
.vgrid__title { margin: 0.75rem 0 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.95rem; font-weight: 600; line-height: 1.4; color: var(--fs-texto); }
.vgrid__title a { color: inherit; text-decoration: none; }
.vgrid__title a:hover { color: #d63a4f; }
/* ── Faixa de vídeos distribuída pelas páginas ── */
.vstrip { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--fs-branco); }
.vstrip--dark { background: radial-gradient(120% 120% at 50% 0%, #202024 0%, var(--fs-escuro) 50%, var(--fs-escuro-2) 100%); }
.vstrip--dark .vstrip__title { color: var(--fs-branco); }
.vstrip--dark .vstrip__sub { color: rgba(255, 255, 255, 0.7); }
.vstrip--dark .vgrid__title { color: var(--fs-branco); }
.vstrip--dark .vgrid__title a:hover { color: var(--fs-secundaria); }
.vstrip--dark .vgrid__frame { border-color: rgba(255, 255, 255, 0.1); }
.vstrip__head { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
.vstrip__eyebrow { display: inline-block; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fs-primaria-forte); margin-bottom: 0.9rem; }
.vstrip__title { font-family: "Outfit", "Inter", sans-serif; font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--fs-texto); }
.vstrip__title span { background: var(--fs-gradiente-texto); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vstrip__sub { margin-top: 0.85rem; font-size: 1.02rem; line-height: 1.6; color: var(--fs-texto-2); }
.vstrip__more { margin-top: 2rem; text-align: center; }
.vstrip__more a { font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600; color: #d63a4f; text-decoration: none; }
.vstrip__more a:hover { text-decoration: underline; }
/* ── Hub /videos/ ── */
.vhub { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); background: var(--fs-branco); }
.vhub__filters { margin-bottom: 2rem; }
.vhub__search { width: 100%; max-width: 560px; display: block; margin: 0 auto 1.5rem; padding: 0.85rem 1.1rem; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1rem; color: var(--fs-texto); background: var(--fs-branco); border: 1px solid var(--fs-borda); border-radius: 9999px; }
.vhub__search:focus { outline: none; border-color: var(--fs-primaria); box-shadow: 0 0 0 3px rgba(232, 68, 90, 0.12); }
.vhub__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.vhub__tab { padding: 0.5rem 0.95rem; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--fs-texto-2); background: var(--fs-branco); border: 1px solid var(--fs-borda); border-radius: 9999px; cursor: pointer; transition: all 150ms ease; }
.vhub__tab:hover { border-color: var(--fs-primaria); color: var(--fs-primaria-forte); }
.vhub__tab.is-active { background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); border-color: transparent; color: var(--fs-branco); }
.vhub__empty { text-align: center; padding: 3rem 0; color: var(--fs-texto-3); }
@keyframes sgFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ============================================================
   HOME — "VEJA POR DENTRO" (bento premium { background: radial-gradient(120% 120% at 50% 0%, #202024 0%, var(--fs-escuro) 45%, var(--fs-escuro-2) 100%); color: var(--fs-branco); padding: clamp(4rem, 8vw, 7rem) 0; overflow: hidden; }
/* Micro-animação: cada tela do tour surge suavemente ao entrar na viewport.
   Usa scroll-driven animations (Chromium) com degradação graciosa via @supports. */
@supports (animation-timeline: view()) { .tour-section .sg__card { animation: sgReveal linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; } @keyframes sgReveal { from { opacity: 0; transform: translateY(28px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } }
.pm-section--dark .sg__card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); }
.pm-section--dark .sg__card:hover, .pm-section--dark .sg__card:focus-visible { border-color: rgba(247, 148, 29, 0.5); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.pm-section--dark .sg__img-wrap { background: #111; border-color: rgba(255, 255, 255, 0.08); }
.pm-section--dark .sg__title { color: var(--fs-branco); }
.pm-section--dark .sg__desc { color: rgba(255, 255, 255, 0.65); }
/* ============================================================
   FAIXA CURTA DE TELAS (SystemStrip) — distribuída pelas páginas
   ============================================================ */
.sysstrip { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--fs-branco); }
.sysstrip--dark { background: radial-gradient(120% 120% at 50% 0%, #202024 0%, var(--fs-escuro) 50%, var(--fs-escuro-2) 100%); }
.sysstrip--dark .sysstrip__title { color: var(--fs-branco); }
.sysstrip--dark .sysstrip__sub { color: rgba(255, 255, 255, 0.7); }
.sysstrip--dark .sg__card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); }
.sysstrip--dark .sg__title { color: var(--fs-branco); }
.sysstrip--dark .sg__desc { color: rgba(255, 255, 255, 0.65); }
.sysstrip--dark .sg__img-wrap { background: #111; border-color: rgba(255, 255, 255, 0.08); }
.sysstrip__head { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; }
.sysstrip__eyebrow { display: inline-block; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fs-primaria-forte); margin-bottom: 0.9rem; }
.sysstrip__title { font-family: "Outfit", "Inter", sans-serif; font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--fs-texto); }
.sysstrip__title span { background: var(--fs-gradiente-texto); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sysstrip__sub { margin-top: 0.85rem; font-size: 1.02rem; line-height: 1.6; color: var(--fs-texto-2); }
/* ============================================================
   LINHAS EM DESTAQUE (SystemRows) — imagem GRANDE + texto, alternando lado a lado. Usada em toda a distribuição.
   ============================================================ */
.sysrows { display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 5.5rem); max-width: 1150px; margin: 0 auto; }
.sysrow { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center; }
@media (min-width: 1024px) {
.sysrow { grid-template-columns: 1.22fr 1fr; gap: clamp(2rem, 4vw, 3.75rem); }
.sysrow--reverse .sysrow__media { order: 2; }
.sysrow--reverse .sysrow__text { order: 1; }
}
.sysrow__media { position: relative; margin: 0; cursor: pointer; display: block; transition: transform 0.35s ease; }
.sysrow__media:hover, .sysrow__media:focus-visible { outline: none; transform: translateY(-4px); }
.sysrow__frame { border-radius: 14px; overflow: hidden; background: var(--fs-branco); border: 1px solid var(--fs-borda); box-shadow: 0 22px 55px rgba(0, 0, 0, 0.14); transition: box-shadow 0.35s ease, border-color 0.35s ease; }
.sysrow__media:hover .sysrow__frame, .sysrow__media:focus-visible .sysrow__frame { box-shadow: 0 30px 70px rgba(232, 68, 90, 0.22); border-color: rgba(232, 68, 90, 0.4); }
.sysrow__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.85rem; background: #f1f1f3; border-bottom: 1px solid var(--fs-borda); }
.sysrow__bar span { width: 11px; height: 11px; border-radius: 50%; background: #cfcfd4; }
.sysrow__bar span:nth-child(1) { background: #ff5f57; }
.sysrow__bar span:nth-child(2) { background: #febc2e; }
.sysrow__bar span:nth-child(3) { background: #28c840; }
.sysrow__img-wrap { display: flex; justify-content: center; align-items: flex-start; background: var(--fs-cinza); max-height: 600px; overflow: hidden; }
.sysrow__img { width: 100%; height: auto; max-height: 600px; object-fit: contain; object-position: top center; display: block; }
.sysrow__zoom { position: absolute; bottom: 0.9rem; right: 0.9rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: rgba(28, 28, 28, 0.82); color: var(--fs-branco); font-size: 0.78rem; font-weight: 600; opacity: 0; transform: translateY(6px); transition: all 0.25s ease; pointer-events: none; }
.sysrow__media:hover .sysrow__zoom, .sysrow__media:focus-visible .sysrow__zoom { opacity: 1; transform: translateY(0); }
@media (min-width: 1024px) {
.sysrow__text { padding: 0 0.5rem; }
}
.sysrow__eyebrow { display: inline-block; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fs-primaria-forte); background: rgba(232, 68, 90, 0.08); border: 1px solid rgba(232, 68, 90, 0.2); padding: 0.3rem 0.75rem; border-radius: 999px; margin-bottom: 1rem; }
.sysrow__title { font-family: "Outfit", "Inter", sans-serif; font-size: clamp(1.5rem, 2.6vw, 2.05rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.015em; color: var(--fs-texto); margin-bottom: 0.9rem; }
.sysrow__desc { font-size: 1.08rem; line-height: 1.65; color: var(--fs-texto-2); }
/* Contextos escuros (SystemStrip dark + home "Veja por dentro") */
.sysstrip--dark .sysrow__frame, .system-tour .sysrow__frame { border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.sysstrip--dark .sysrow__bar, .system-tour .sysrow__bar { background: #26262b; border-bottom-color: rgba(255, 255, 255, 0.08); }
.sysstrip--dark .sysrow__img-wrap, .system-tour .sysrow__img-wrap { background: #0f0f11; }
.sysstrip--dark .sysrow__title, .system-tour .sysrow__title { color: var(--fs-branco); }
.sysstrip--dark .sysrow__desc, .system-tour .sysrow__desc { color: rgba(255, 255, 255, 0.7); }
.sysstrip--dark .sysrow__eyebrow, .system-tour .sysrow__eyebrow { color: var(--fs-secundaria); background: rgba(247, 148, 29, 0.12); border-color: rgba(247, 148, 29, 0.3); }
.cinematic-comparison { position: relative; padding: 100px 0 80px; background: linear-gradient(180deg, #07060b 0%, #0d0a14 40%, #0a0812 100%); color: var(--fs-branco); overflow: hidden; }
.cinematic-comparison__glow { position: absolute; pointer-events: none; border-radius: 50%; }
.cinematic-comparison__glow--1 { top: -200px; right: -150px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(232, 68, 90, 0.1) 0%, transparent 65%); }
.cinematic-comparison__glow--2 { bottom: -200px; left: -150px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(247, 148, 29, 0.08) 0%, transparent 65%); }
.cinematic-comparison__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) {
.cinematic-comparison__inner { padding: 0 2rem; }
}
.cinematic-comparison__inner { max-width: 1200px; position: relative; z-index: 1; }
.cinematic-comparison__header { text-align: center; margin-bottom: 3rem; }
.cinematic-comparison__label { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1rem; }
.cinematic-comparison__title { font-family: "Outfit", "Inter", sans-serif; font-size: clamp(1.875rem, 5vw, 3rem); font-weight: 800; line-height: 1.12; margin-bottom: 1rem; letter-spacing: -0.03em; }
.cinematic-comparison__highlight { background: var(--fs-gradiente-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.cinematic-comparison__subtitle { font-size: 1rem; color: var(--fs-texto-claro-3); line-height: 1.7; max-width: 580px; margin: 0 auto; }
.cinematic-comparison__bottom { margin-top: 3rem; display: flex; align-items: center; gap: 1.5rem; padding: 2rem; border-radius: 1.5rem; border: 1px solid rgba(247, 148, 29, 0.3); background: linear-gradient(135deg, rgba(247, 148, 29, 0.06) 0%, rgba(232, 68, 90, 0.04) 100%); position: relative; overflow: hidden; }
.cinematic-comparison__bottom::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); }
@media (max-width: 768px) {
.cinematic-comparison__bottom { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
}
.cinematic-comparison__bottom-left { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
@media (max-width: 768px) {
.cinematic-comparison__bottom-left { flex-direction: column; }
}
.cinematic-comparison__rocket { width: 64px; height: 64px; border-radius: 50%; background: rgba(247, 148, 29, 0.12); border: 1px solid rgba(247, 148, 29, 0.25); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; }
.cinematic-comparison__bottom-sub { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 2px; }
.cinematic-comparison__bottom-title { font-family: "Outfit", "Inter", sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--fs-branco); line-height: 1.3; }
.cinematic-comparison__trust { display: flex; gap: 1.25rem; flex: 1; justify-content: center; }
@media (max-width: 1024px) {
.cinematic-comparison__trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}
@media (max-width: 640px) {
.cinematic-comparison__trust { grid-template-columns: repeat(2, 1fr); }
}
.cinematic-comparison__trust-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; }
.cinematic-comparison__trust-icon { width: 36px; height: 36px; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--fs-secundaria); }
.cinematic-comparison__trust-text { font-size: 0.7rem; color: rgba(255, 255, 255, 0.75); line-height: 1.3; max-width: 100px; }
.cinematic-comparison__bottom-right { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.cinematic-comparison__cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; border-radius: 0.75rem; font-size: 1rem; font-weight: 700; color: var(--fs-branco); background: linear-gradient(135deg, var(--fs-primaria) 0%, var(--fs-secundaria) 100%); text-decoration: none; transition: all 250ms ease; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 20px rgba(232, 68, 90, 0.2); }
.cinematic-comparison__cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(232, 68, 90, 0.3); }
.cinematic-comparison__cta-note { font-size: 0.75rem; color: rgba(255, 255, 255, 0.3); display: flex; align-items: center; gap: 0.25rem; }
.cinematic-comparison__cta-note::before { content: "✓"; color: var(--fs-ok-claro); font-size: 0.7rem; }
.cc-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) {
.cc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.cc-grid { grid-template-columns: repeat(3, 1fr); }
}
.cc-card { background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 1.5rem; padding: 1.5rem 1.5rem 1.25rem; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; display: flex; flex-direction: column; height: 100%; }
.cc-card:hover { border-color: rgba(232, 68, 90, 0.2); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); }
.cc-card__top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.cc-card__icon { width: 50px; height: 50px; border-radius: 50%; background: rgba(247, 148, 29, 0.12); border: 1px solid rgba(247, 148, 29, 0.25); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.cc-card__label { font-family: "Outfit", "Inter", sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--fs-branco); letter-spacing: -0.02em; }
.cc-card__versus { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.cc-card__side { padding: 1rem; border-radius: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.cc-card__side p { font-size: 1rem; line-height: 1.5; margin: 0; }
.cc-card__side--food { background: rgba(34, 197, 94, 0.06); border: 1px solid rgba(34, 197, 94, 0.15); }
.cc-card__side--food p { color: rgba(255, 255, 255, 0.8); }
.cc-card__side--generic { background: rgba(232, 68, 90, 0.08); border: 1px solid rgba(232, 68, 90, 0.18); }
.cc-card__side--generic p { color: rgba(255, 255, 255, 0.7); }
.cc-card__side-badge { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.cc-card__side--food .cc-card__side-badge { color: var(--fs-ok-claro); }
.cc-card__side--generic .cc-card__side-badge { color: rgba(255, 255, 255, 0.75); }
.cc-card__side-content { display: flex; gap: 0.5rem; align-items: flex-start; }
.cc-card__x { color: var(--fs-erro); font-size: 0.75rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.cc-card__check { color: var(--fs-ok-claro); font-size: 0.75rem; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.cc-card__vs-circle { display: flex; align-items: center; justify-content: center; align-self: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(232, 68, 90, 0.15); border: 1px solid rgba(232, 68, 90, 0.3); font-size: 0.6rem; font-weight: 800; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.04em; flex-shrink: 0; }

/* ⛔ Estes dois estão em faixa ESCURA, e a poda os deixou com o gradiente de
   TEXTO (pontas escurecidas para fundo claro): 3,82 sobre o preto. Em fundo
   escuro quem serve é o gradiente da marca sem alterar — a ponta rosa dá 4,39
   e a laranja 7,47, e ambos são texto grande aqui.

   É o mesmo par de erros que já apareceu três vezes neste projeto: escolher o
   token pela cor, não pelo fundo. Cada fundo, seu token. */
.cinematic-comparison__label,
.cinematic-comparison__highlight { background-image: var(--fs-gradiente); }

/* ===== secoes/avaliacoes.css ===== */
/* avaliacoes.css — a prova social da home (4,9 · 529 avaliacoes no Google).
   Substitui `sections/_reviews.scss` (3,4 KB) inteiro.

   ⛔ Esta secao e' o que sustenta o `aggregateRating` do JSON-LD. A regra do
   Google e' que a nota agregada so vale se as avaliacoes estiverem VISIVEIS
   na pagina — se a secao sair da home, o schema vira violacao. Ver o
   comentario em includes/seo.php.

   Os numeros vem de dados/reviews-stats.php, que o cron reescreve pela
   Places API. Nada aqui e' escrito a mao. */
/* ── o selo da nota ──────────────────────────────────────────────────────── */
.fs-aval__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-e-4);
  margin-top: var(--fs-e-6);
  padding: var(--fs-e-4) var(--fs-e-8);
  background: var(--fs-branco);
  border: 1px solid var(--fs-borda);
  border-radius: var(--fs-r-pil);
  box-shadow: var(--fs-sombra);
}
.fs-aval__nota {
  font-family: var(--fs-fonte-titulo);
  font-size: var(--fs-t-3xl);
  font-weight: var(--fs-p-extra);
  line-height: 1;
  /* nota grande e' o unico numero da secao: usa a cor da marca legivel */
  color: var(--fs-primaria-forte);
}
.fs-aval__lado { text-align: left; }
.fs-aval__total {
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  color: var(--fs-texto-3);          /* 5,13 sobre branco */
  margin-top: 2px;
}
/* ── a grade de depoimentos ──────────────────────────────────────────────
   minmax maior que o das outras grades: texto de review e' longo, e cartao
   estreito viraria coluna de 3 palavras. */
.fs-aval__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--fs-e-4);
}
.fs-aval__card {
  display: flex;
  flex-direction: column;
  gap: var(--fs-e-3);
  padding: var(--fs-e-6);
  background: var(--fs-branco);
  border: 1px solid var(--fs-borda);
  border-radius: var(--fs-r-md);
}
.fs-aval__topo {
  display: flex;
  align-items: center;
  gap: var(--fs-e-3);
}
/* a inicial do nome, num circulo da cor da marca.
   ⛔ Era o gradiente da marca. A letra e' decorativa (aria-hidden, o nome vem
   escrito ao lado), entao daria para argumentar que o contraste nao se aplica
   — mas ela continua sendo VISTA, e branco sobre a ponta laranja do gradiente
   da 2,28. Fundo solido derivado resolve sem discussao: 5,14. O gradiente da
   marca segue inteiro no hero e nos botoes, que e' onde ele brilha. */
.fs-aval__inicial {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fs-primaria-forte);
  color: var(--fs-branco);
  font-family: var(--fs-fonte-titulo);
  font-weight: var(--fs-p-forte);
}
.fs-aval__nome {
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-base);
  font-weight: var(--fs-p-semi);
  color: var(--fs-texto);
}
.fs-aval__texto {
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  line-height: 1.6;
  color: var(--fs-texto-2);
  margin: 0;
}
/* ── estrelas ────────────────────────────────────────────────────────────
   O laranja da marca como PREENCHIMENTO de icone, nao como texto — e' onde
   ele brilha. Sobre branco da 2,28 como texto, mas estrela cheia e' forma
   solida grande; o rotulo acessivel vem do aria-label de fs_estrelas(). */
.estrelas { display: inline-flex; gap: 2px; color: var(--fs-secundaria); line-height: 1; }
/* a ultima estrela cortada na fracao (4, 9 mostra 9/10 da quinta) */
.estrela-vazia { opacity: .28; }
.estrela-parcial { position: relative; display: inline-block; width: 1em; height: 1em; }
.estrela-parcial__vazia, .estrela-parcial__cheia { position: absolute; inset: 0; display: block; }
.estrela-parcial__vazia { opacity: .28; }
.estrela-parcial__cheia { clip-path: inset(0 calc(100% - var(--parte, 100%)) 0 0); }
/* ── link para o perfil ──────────────────────────────────────────────────
   `reviewStats.googleMapsUrl` existia nos dados e nao aparecia em lugar
   nenhum. Prova social verificavel so vale se der para verificar. */
.fs-aval__rodape { text-align: center; margin: 0; }
.fs-aval__link {
  display: inline-block;
  margin-top: var(--fs-e-8);
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  font-weight: var(--fs-p-semi);
  color: var(--fs-primaria-forte);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== secoes/hero.css ===== */
/* ══════════════════════════════════════════════════════════════════════════
   hero.css — a primeira tela.
   Substitui `sections/_cinematic-hero.scss` (9,8 KB / 403 linhas).

   ⭐ A mudanca que importa nao e' de estilo: o hero passou a MOSTRAR o
   produto. Antes eram 16 pilulas de texto afirmando o que o sistema tem;
   agora tem a tela real do PDV com mapa de mesas ao lado. O site tem 190
   prints reais e 201 imagens de sistema, e a primeira tela nao usava
   nenhuma — era a definicao de "parece pobre".

   ⛔ CUIDADO COM O LCP: a imagem do hero vira o maior elemento pintado. Ela
   tem `fetchpriority=high` e `preload` no <head> (ver paginas/home.php), mais
   width/height fixos para nao causar salto de layout. Sem essas tres coisas
   trocar texto por imagem PIORA a pagina em vez de melhorar.
   ══════════════════════════════════════════════════════════════════════════ */
.fs-hero {
  position: relative;
  overflow: hidden;
  background: var(--fs-escuro);
  color: var(--fs-texto-claro);
  padding: var(--fs-e-24) var(--fs-e-4) var(--fs-e-16);
}
/* ── o brilho de fundo ──────────────────────────────────────────────────
   Eram tres divs com blur animado. Viraram DOIS gradientes radiais no
   pseudo-elemento: mesmo efeito, sem nó extra no DOM e sem animação
   permanente comendo bateria. */
.fs-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 120%;
  background:
    radial-gradient(42rem 28rem at 22% 18%, rgba(232, 68, 90, .22), transparent 70%),
    radial-gradient(38rem 26rem at 82% 12%, rgba(247, 148, 29, .16), transparent 70%);
  pointer-events: none;
}
.fs-hero__inner {
  position: relative;
  max-width: var(--fs-largura);
  margin-inline: auto;
  display: grid;
  /* duas colunas quando couber, uma quando não — sem media query.
     `minmax(0,…)` impede que o texto longo estoure a coluna. */
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--fs-e-12);
  align-items: center;
}
/* ── o texto ────────────────────────────────────────────────────────────── */
.fs-hero__titulo {
  font-family: var(--fs-fonte-titulo);
  font-size: var(--fs-t-d1);
  font-weight: var(--fs-p-extra);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--fs-texto-claro);
  text-align: left;            /* ⛔ o legado centralizava todo h1 globalmente */
  margin-bottom: var(--fs-e-4);
}
/* ⭐ Aqui o gradiente da marca PODE ficar: sobre #1c1c1c a ponta rosa dá 4,39
   e a laranja 7,47, e o título tem 36px+ — texto grande exige 3:1. É o único
   lugar do site onde o gradiente recortado passa, e é o que dá a assinatura
   visual da marca. Em fundo claro ele reprovaria (2,28). */
.fs-hero__titulo em {
  font-style: normal;
  background: var(--fs-gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--fs-secundaria);   /* fallback se background-clip falhar */
}
.fs-hero__sub {
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-md);
  line-height: 1.6;
  color: var(--fs-texto-claro-2);   /* 9,83 sobre #1c1c1c */
  max-width: 34rem;
  margin-bottom: var(--fs-e-8);
}
.fs-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-e-3);
  margin-bottom: var(--fs-e-8);
}
/* ── a tela do sistema ──────────────────────────────────────────────────── */
.fs-hero__figura { margin: 0; }
.fs-hero__figura img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--fs-r-md);
  border: 1px solid var(--fs-borda-clara);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .6);
}
.fs-hero__legenda {
  margin-top: var(--fs-e-3);
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  color: var(--fs-texto-claro-3);   /* 6,65 sobre #1c1c1c */
  text-align: center;
}
/* ── as capacidades ─────────────────────────────────────────────────────
   ⛔ Eram `<span>` soltos com 12px e `rgba(255, 255, 255, .6)` = reprovava.
   Viraram lista de verdade (é uma lista) com token que passa. */
.fs-hero__caps {
  position: relative;
  max-width: var(--fs-largura);
  margin: var(--fs-e-16) auto 0;
}
.fs-hero__caps-rotulo {
  display: block;
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-xs);
  font-weight: var(--fs-p-forte);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fs-secundaria);      /* 7,47 sobre o escuro */
  text-align: center;
  margin-bottom: var(--fs-e-4);
}
.fs-hero__caps ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fs-e-2);
}
.fs-hero__caps li {
  padding: var(--fs-e-2) var(--fs-e-4);
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  color: var(--fs-texto-claro-2);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--fs-borda-clara);
  border-radius: var(--fs-r-pil);
}
/* ── os números do produto ──────────────────────────────────────────────
   ⛔ Nenhum contador de loja, venda ou NF-e aqui — decisão do André. Só fato
   do produto: quantos módulos, em quanto tempo, quem atende. */
.fs-hero__stats {
  position: relative;
  max-width: 56rem;
  margin: var(--fs-e-16) auto 0;
  padding: var(--fs-e-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--fs-e-6);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--fs-borda-clara);
  border-radius: var(--fs-r-md);
  text-align: center;
}
.fs-hero__stat-valor {
  display: block;
  font-family: var(--fs-fonte-titulo);
  font-size: var(--fs-t-xl);
  font-weight: var(--fs-p-extra);
  color: var(--fs-texto-claro);
  line-height: 1.2;
}
.fs-hero__stat-rotulo {
  display: block;
  margin-top: var(--fs-e-1);
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fs-texto-claro-3);
}

/* ===== secoes/integracoes.css ===== */
/* integracoes.css — a faixa de logos de integracao na home.
   Substitui `sections/_integrations.scss` (3,3 KB) inteiro.

   O esqueleto (secao, cabecalho) vem de 00-base.css; aqui fica so a esteira
   de logos, que e' o unico elemento proprio desta secao.

   ⭐ Faixa ESCURA. E' onde a regra "a cor vai no container, os filhos herdam"
   paga: `.fs-secao--escura` ja resolve titulo, subtitulo e rotulo — este
   arquivo nao repete nenhuma cor de texto. */
/* ── a esteira ───────────────────────────────────────────────────────────
   `auto-fit` de novo, sem media query: 7 logos numa linha no monitor, 3 no
   tablet, 2 no celular. O legado gastava tres media queries aqui. */
.fs-integra__logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--fs-e-6) var(--fs-e-4);
  align-items: start;
  margin-top: var(--fs-e-12);
}
.fs-integra__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fs-e-2);
  padding: var(--fs-e-4) var(--fs-e-2);
  border: 1px solid var(--fs-borda-clara);
  border-radius: var(--fs-r-md);
  background: var(--fs-escuro-2);
  transition: border-color var(--fs-transicao), transform var(--fs-transicao);
}
.fs-integra__logo:hover {
  border-color: var(--fs-secundaria);
  transform: translateY(-2px);
}
/* ⛔ altura fixa e `object-fit`: os 7 SVGs tem proporcoes diferentes (o do
   SEFAZ e' quadrado, o do iFood e' largo). Sem isto cada um escala de um
   jeito e a linha fica desalinhada — era assim no legado. */
.fs-integra__logo img {
  width: 100%;
  max-width: 5rem;
  height: 2rem;
  object-fit: contain;
}
.fs-integra__logo span {
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-xs);
  color: var(--fs-texto-claro-2);   /* 9,83 sobre o fundo escuro */
  text-align: center;
}
/* o "+100" que dá o número */
.fs-integra__numero {
  color: var(--fs-secundaria);      /* 7,47 sobre #1c1c1c */
  font-weight: var(--fs-p-extra);
}
@media (prefers-reduced-motion: reduce) {
.fs-integra__logo { transition: none; }
.fs-integra__logo:hover { transform: none; }
}

/* ===== secoes/nichos.css ===== */
/* nichos.css — a grade dos 18 segmentos na home.
   Substitui: `.niches-section` + `.card--niche` + `.card-grid--4` do Next.

   ⭐ Foi a 1a secao reescrita sem heranca do legado, e a que mais precisava:
   das 14 da home era a unica sem UMA LINHA de CSS proprio — `.niches-section`,
   `__inner` e `__header` nao existiam em folha nenhuma, a secao renderizava na
   grade generica. E' a que alimenta /segmentos/, alvo do backlink comprado.

   O esqueleto (secao, cabecalho, grade, cartao) vem de 00-base.css. Aqui fica
   so o que e' proprio dos nichos — que e' pouco, e e' esse o objetivo. */
/* 18 cartoes e' muita coisa numa linha de 4: um respiro a mais entre eles. */
.fs-nichos .fs-grade { gap: var(--fs-e-4) var(--fs-e-4); }
/* O nome do segmento e' curto ("Bar", "Acai") e o cartao e' clicavel inteiro;
   sem isso o titulo cola no icone. */
.fs-nichos .fs-cartao__nome { margin-bottom: var(--fs-e-1); }

/* ===== secoes/passos-cta.css ===== */
/* ══════════════════════════════════════════════════════════════════════════
   passos-cta.css — as QUATRO seções que moravam em `sections/_cta.scss`:
   "Como funciona" (passos), "Multi-dispositivo", o CTA final e "Segurança".

   ⭐ Por que num arquivo só: `_cta.scss` tinha 1.356 linhas com as quatro
   dentro, mais 12,6 KB já morto (`.pricing-*`, `.ncm-*`, `.faq-section`). O
   `@use` dele era um LOTE — só sai quando as quatro estiverem prontas. Este
   arquivo é o lote, e ao entrar derruba 27,9 KB de SCSS de uma vez.

   As quatro concentravam 16 das falhas de contraste da home. Todas tinham a
   mesma raiz: rótulo em gradiente recortado e número em laranja da marca,
   ambos sobre fundo claro (2,17 e 2,28).
   ══════════════════════════════════════════════════════════════════════════ */
/* ══ 1. COMO FUNCIONA — os 4 passos ════════════════════════════════════ */

.fs-passos__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--fs-e-6);
}
.fs-passo {
  position: relative;
  padding: var(--fs-e-8) var(--fs-e-6);
  background: var(--fs-branco);
  border: 1px solid var(--fs-borda);
  border-radius: var(--fs-r-md);
}
/* o número do passo, grande e apagado atrás do conteúdo.
   ⛔ Era `color: #F7941D` sólido = 2,28 sobre branco. Como aqui ele é
   decoração (a ordem já está no DOM e no texto), a saída não é escurecer e
   sim baixar a opacidade: deixa de competir e deixa de reprovar, porque
   passa a ser forma e não texto. Leva aria-hidden no HTML. */
.fs-passo__numero {
  position: absolute;
  top: var(--fs-e-3);
  right: var(--fs-e-4);
  font-family: var(--fs-fonte-titulo);
  font-size: var(--fs-t-4xl);
  font-weight: var(--fs-p-extra);
  line-height: 1;
  color: var(--fs-secundaria);
  opacity: .16;
  pointer-events: none;
}
/* ⛔ Eram quatro clipart `/icons/icons/iconN.webp`. Viraram SVG de traço com
   `currentColor`, que é a regra do projeto — e são 4 requisições a menos. */
.fs-passo__icone {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--fs-secundaria-icone);
  margin-bottom: var(--fs-e-4);
}
.fs-passo__icone svg { width: 100%; height: 100%; display: block; }
.fs-passo__titulo {
  font-family: var(--fs-fonte-titulo);
  font-size: var(--fs-t-lg);
  font-weight: var(--fs-p-forte);
  color: var(--fs-texto);
  margin-bottom: var(--fs-e-3);
}
.fs-passo__texto {
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  line-height: 1.6;
  color: var(--fs-texto-2);
  margin: 0;
}
.fs-passos__acao { text-align: center; margin-top: var(--fs-e-12); }
.fs-passos__selos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fs-e-4) var(--fs-e-8);
  margin-top: var(--fs-e-8);
  list-style: none;
  padding: 0;
}
.fs-passos__selo {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-e-2);
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  color: var(--fs-texto-2);
}
.fs-passos__selo svg { width: 1.125rem; height: 1.125rem; color: var(--fs-ok-forte); }
/* ══ 2. MULTI-DISPOSITIVO ══════════════════════════════════════════════ */

.fs-disp__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--fs-e-6);
}
.fs-disp__card {
  padding: var(--fs-e-8);
  background: var(--fs-escuro-2);
  border: 1px solid var(--fs-borda-clara);
  border-radius: var(--fs-r-md);
  text-align: center;
}
/* a barra colorida do topo usava `--device-color` inline com hex literal
   (#E8445A / #F7941D / #a855f7). O hex saiu do PHP; a variável agora recebe
   token, e o valor padrão cobre quem não passar nada. */
.fs-disp__card::before {
  content: "";
  display: block;
  height: 3px;
  margin: calc(var(--fs-e-8) * -1) calc(var(--fs-e-8) * -1) var(--fs-e-6);
  border-radius: var(--fs-r-md) var(--fs-r-md) 0 0;
  background: var(--cor-disp, var(--fs-primaria));
}
.fs-disp__icone {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--cor-disp, var(--fs-primaria));
  margin-bottom: var(--fs-e-3);
}
.fs-disp__icone svg { width: 100%; height: 100%; display: block; }
.fs-disp__nome {
  font-family: var(--fs-fonte-titulo);
  font-size: var(--fs-t-lg);
  font-weight: var(--fs-p-forte);
  color: var(--fs-texto-claro);
  margin-bottom: var(--fs-e-2);
}
.fs-disp__texto {
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  line-height: 1.6;
  color: var(--fs-texto-claro-2);
  margin: 0;
}
.fs-disp__extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--fs-e-6);
  margin-top: var(--fs-e-12);
  list-style: none;
  padding: 0;
}
.fs-disp__extra {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-e-3);
}
.fs-disp__extra svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--fs-secundaria);      /* 7,47 sobre o escuro */
  margin-top: 2px;
}
.fs-disp__extra strong {
  display: block;
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-base);
  font-weight: var(--fs-p-semi);
  color: var(--fs-texto-claro);
}
.fs-disp__extra span {
  display: block;
  margin-top: 2px;
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  line-height: 1.5;
  color: var(--fs-texto-claro-2);
}
/* ══ 3. CTA FINAL ══════════════════════════════════════════════════════ */

.fs-cta { text-align: center; }
.fs-cta__preco {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fs-e-1);
  margin: var(--fs-e-8) 0;
}
.fs-cta__preco-de {
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fs-texto-claro-3);
}
.fs-cta__preco-valor {
  font-family: var(--fs-fonte-titulo);
  font-size: var(--fs-t-4xl);
  font-weight: var(--fs-p-extra);
  line-height: 1;
  color: var(--fs-secundaria);      /* 7,47 sobre o escuro */
}
.fs-cta__preco-valor small {
  font-size: var(--fs-t-lg);
  font-weight: var(--fs-p-medio);
  color: var(--fs-texto-claro-2);
}
.fs-cta__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fs-e-3);
}
.fs-cta__garantia {
  margin-top: var(--fs-e-8);
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  color: var(--fs-texto-claro-3);
}
/* ══ 4. SEGURANÇA ══════════════════════════════════════════════════════ */

.fs-seg { text-align: center; }
.fs-seg__escudo {
  display: inline-block;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--fs-ok-claro);
  margin-bottom: var(--fs-e-4);
}
.fs-seg__escudo svg { width: 100%; height: 100%; display: block; }
.fs-seg__texto {
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-md);
  line-height: 1.7;
  color: var(--fs-texto-claro-2);
  max-width: 46rem;
  margin: 0 auto var(--fs-e-12);
}
.fs-seg__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--fs-e-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
.fs-seg__stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-e-3);
  padding: var(--fs-e-4);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--fs-borda-clara);
  border-radius: var(--fs-r-md);
}
.fs-seg__stat svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--fs-ok-claro);
}
.fs-seg__stat-valor {
  display: block;
  font-family: var(--fs-fonte-titulo);
  font-size: var(--fs-t-lg);
  font-weight: var(--fs-p-extra);
  color: var(--fs-texto-claro);
  line-height: 1.2;
}
.fs-seg__stat-rotulo {
  display: block;
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-xs);
  color: var(--fs-texto-claro-3);
}

/* ===== secoes/versus.css ===== */
/* ══════════════════════════════════════════════════════════════════════════
   versus.css — "Pare de pagar por 5 sistemas separados".
   Substitui `sections/_dramatic.scss` (8,7 KB / 409 linhas).

   Duas colunas comparadas lado a lado: o jeito de hoje × o sistema. É a única
   seção da home onde print seria ruído — o argumento é a comparação, e uma
   tela no meio dela só disputaria atenção.

   ⛔ Das 8 falhas de contraste que esta seção tinha, quase todas eram a mesma
   causa: verde e vermelho semânticos usados como TEXTO sobre fundo escuro,
   nos tons de fundo (#22C55E dá 2,28 sobre branco; aqui o fundo é escuro e o
   problema era o inverso). Agora cada papel usa o token do seu fundo.
   ══════════════════════════════════════════════════════════════════════════ */
/* A seção carrega `fs-secao fs-secao--escura` no HTML, que já dá padding, container e as cores de faixa escura ao cabeçalho. Aqui só o que muda:
   um preto um pouco mais fundo, para separar da seção clara anterior. */
.fs-versus {
  position: relative;
  overflow: hidden;
  background: var(--fs-escuro-2);
}
/* dois brilhos de fundo, um por lado — o vermelho no problema, o verde na
   solução. Pseudo-elemento em vez de duas divs vazias no HTML. */
.fs-versus::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(36rem 24rem at 15% 40%, rgba(239, 68, 68, .10), transparent 70%),
    radial-gradient(36rem 24rem at 85% 60%, rgba(34, 197, 94, .10), transparent 70%);
  pointer-events: none;
}
.fs-versus__inner {
  position: relative;
  max-width: var(--fs-largura);
  margin-inline: auto;
}
/* ── as duas colunas ────────────────────────────────────────────────────
   ⛔ Flex, não grid, por causa do selo "VS": numa grade `auto-fit` ele viraria
   uma terceira coluna do mesmo tamanho das outras duas. Aqui as colunas
   crescem (`flex:1 1 22rem`) e o selo não (`flex:0 0 auto`) — e quando não
   couberem lado a lado tudo empilha na ordem problema → VS → solução, sem
   media query e sem posicionamento absoluto. */
.fs-versus__cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-e-6);
  align-items: stretch;
  justify-content: center;
}
.fs-versus__col {
  flex: 1 1 22rem;
  min-width: 0;
  padding: var(--fs-e-8);
  border-radius: var(--fs-r-md);
  border: 1px solid var(--fs-borda-clara);
  background: rgba(255, 255, 255, .03);
}
.fs-versus__col--problema { border-color: rgba(239, 68, 68, .28); }
.fs-versus__col--solucao { border-color: rgba(34, 197, 94, .32); }
.fs-versus__col-cabeca {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-e-3);
  padding-bottom: var(--fs-e-4);
  margin-bottom: var(--fs-e-4);
  border-bottom: 1px solid var(--fs-borda-clara);
}
.fs-versus__col-icone {
  flex: none;
  width: 2rem;
  height: 2rem;
}
.fs-versus__col-icone svg { width: 100%; height: 100%; display: block; }
/* ⭐ tons CLAROS do semântico, porque o fundo é escuro: 8,98 e 9,78.
   Os tons de fundo (#EF4444 / #22C55E) ficariam ilegíveis aqui. */
.fs-versus__col--problema .fs-versus__col-icone { color: var(--fs-erro-claro); }
.fs-versus__col--solucao  .fs-versus__col-icone { color: var(--fs-ok-claro); }
.fs-versus__col-titulo {
  display: block;
  font-family: var(--fs-fonte-titulo);
  font-size: var(--fs-t-lg);
  font-weight: var(--fs-p-forte);
  color: var(--fs-texto-claro);
}
.fs-versus__col--solucao .fs-versus__col-titulo { color: var(--fs-ok-claro); }
.fs-versus__col-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  color: var(--fs-texto-claro-3);
}
/* ── os itens ── */
.fs-versus__itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fs-e-4);
}
.fs-versus__item {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-e-3);
}
.fs-versus__item-icone {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 2px;
}
.fs-versus__item-icone svg { width: 100%; height: 100%; display: block; }
.fs-versus__col--problema .fs-versus__item-icone { color: var(--fs-erro-claro); }
.fs-versus__col--solucao  .fs-versus__item-icone { color: var(--fs-ok-claro); }
.fs-versus__item strong {
  display: block;
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-base);
  font-weight: var(--fs-p-semi);
  color: var(--fs-texto-claro);
}
.fs-versus__item span {
  display: block;
  margin-top: 2px;
  font-family: var(--fs-fonte-texto);
  font-size: var(--fs-t-sm);
  line-height: 1.5;
  color: var(--fs-texto-claro-2);
}
/* ── o selo "VS" ────────────────────────────────────────────────────────
   No legado era posicionado em absoluto no meio e desalinhava quando as
   colunas empilhavam. Aqui é um item do flex que não cresce. */
.fs-versus__vs {
  flex: 0 0 auto;
  align-self: center;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--fs-gradiente-botao);  /* rótulo "VS" é branco em cima: 3,88 -> 4,64 */
  color: var(--fs-branco);
  font-family: var(--fs-fonte-titulo);
  font-size: var(--fs-t-sm);
  font-weight: var(--fs-p-extra);
  letter-spacing: .06em;
  box-shadow: var(--fs-sombra-marca);
}

/* ===== secoes/videoaula.css ===== */
/* ============================================================
   VIDEOAULA — a página de exibição de um vídeo, /videos/{slug}/
   ============================================================
   ⭐ `.vaula__titulo`, `.vaula__meta` e `.vaula__todas` também são usadas por
   /ncm/{grupo}/ (paginas/ncm.php) — mesmo desenho de h1 + linha de meta. Não
   duplicar isto com outro prefixo: seria CSS novo sem nada novo.

   ⛔ Prefixo `.vaula__` de propósito: `.vcard__player` era célula de grade de
   4 colunas e arrastava regras conflitantes. Aqui é UM player, largo, na
   primeira dobra. A grade de miniaturas usa `.vgrid__*` de 05-estrutura.css.
   ============================================================ */

.vaula__titulo {
  font-family: var(--fs-fonte-titulo);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0.75rem 0 1.25rem;
  max-width: min(100%, 26ch);
}

/* O player. `aspect-ratio` em vez de padding-top: não reserva menos espaço do
   que vai ocupar, então não gera deslocamento de layout quando o iframe entra. */
.vaula__player {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 960px;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #151515;
  border: 1px solid var(--fs-borda);
}
.vaula__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.vaula__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0.9rem 0 0;
  font-family: var(--fs-fonte-texto);
  font-size: 0.85rem;
  color: var(--fs-texto-2);
}
.vaula__meta a { color: var(--fs-primaria-forte); text-decoration: none; font-weight: 600; }
.vaula__meta a:hover { text-decoration: underline; }
.vaula__meta span[aria-hidden] { opacity: 0.4; }

/* ── O passo a passo ─────────────────────────────────────────────────────── */
.vaula__passos { max-width: 820px; margin: 0 auto; }

.vaula__passo {
  /* o header é fixo; sem isto o #passo-N do HowTo abre debaixo dele */
  scroll-margin-top: 88px;
  padding: 1.75rem 0;
  border-top: 1px solid var(--fs-borda);
}
.vaula__passo:first-child { border-top: 0; padding-top: 0.5rem; }

.vaula__passo-titulo {
  display: flex; align-items: baseline; gap: 0.65rem;
  font-family: var(--fs-fonte-titulo);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.75rem;
}
.vaula__passo-num {
  flex: none;
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 9999px;
  /* ⛔ --fs-primaria com branco em cima dá 3,88. --fs-botao-primaria é a
     mesma cor calibrada pro branco passar: 4,64. */
  background: var(--fs-botao-primaria);
  color: var(--fs-branco);
  font-size: 0.85rem; font-weight: 700;
  transform: translateY(0.15rem);
}

.vaula__passo-texto { font-size: 1rem; line-height: 1.7; }
.vaula__passo-texto b, .vaula__passo-texto strong { font-weight: 700; }

.vaula__botoes {
  margin: 0.9rem 0 0;
  font-family: var(--fs-fonte-texto);
  font-size: 0.85rem;
  color: var(--fs-texto-2);
}
.vaula__botoes b {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 0.375rem;
  background: var(--fs-cinza);
  border: 1px solid var(--fs-borda);
  font-weight: 600;
  color: var(--fs-texto);
}

/* Print do passo. `width`/`height` vêm no atributo: sem eles a imagem de
   1440px reserva zero altura e empurra o texto quando carrega. */
.vaula__print { margin: 1.25rem 0 0; }
.vaula__print img {
  width: 100%; height: auto; display: block;
  border-radius: 0.75rem;
  border: 1px solid var(--fs-borda);
}
.vaula__print figcaption {
  margin-top: 0.5rem;
  font-family: var(--fs-fonte-texto);
  font-size: 0.8rem;
  color: var(--fs-texto-2);
}

.vaula__todas { margin-top: 1.6rem; text-align: center; }
.vaula__todas a { color: var(--fs-primaria-forte); font-weight: 600; text-decoration: none; }
.vaula__todas a:hover { text-decoration: underline; }

/* ===== extra.css ===== */
/* extra.css — o que o SCSS do Next nao cobre porque la era JavaScript.
   Concatenado no fim de publico/css/site.css por scripts/gerar-css.sh. */

/* ── Menu sem JS ─────────────────────────────────────────────────────────
   No Next o menu abria por useState num componente 'use client'. Aqui e um
   checkbox: `:checked ~` liga o overlay e o sidebar, que ja tem no SCSS a
   transicao de opacity/visibility pronta.

   O checkbox fica FOCAVEL — so escondido de vista. `display:none` ou o
   atributo `hidden` tirariam ele da ordem de tabulacao e o menu deixaria de
   abrir pelo teclado. */
.menu-abrir {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
#menu-abrir:checked ~ .header__overlay,
#menu-abrir:checked ~ .header__sidebar {
  opacity: 1;
  visibility: visible;
}
/* enquanto o menu esta aberto, o fundo nao rola junto */
#menu-abrir:checked ~ .header__sidebar { overscroll-behavior: contain; }

.header__menu-btn,
.header__sidebar-close,
.header__overlay { cursor: pointer; }

/* o anel de foco tem que aparecer no botao, nao no checkbox invisivel */
#menu-abrir:focus-visible ~ .header .header__menu-btn {
  outline: 2px solid #E8445A;
  outline-offset: 3px;
}

/* ── Pular para o conteudo ─────────────────────────────────────────────── */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  /* ⛔ era `background:#E8445A` com texto branco = 3,88, e o rotulo tem 16px
     (texto normal, exige 4,5). Justo o link que existe para quem navega por
     teclado. O token derivado da mesma cor da a mesma aparencia com 5,14. */
  background: var(--fs-primaria-forte, #C53A4D);
  color: #fff;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}
.pular-para-conteudo:focus { left: 0; }

/* ── WhatsApp flutuante ────────────────────────────────────────────────── */
.zap-flutuante {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, .4);
  z-index: 400;
  transition: transform .25s ease, box-shadow .25s ease;
}
.zap-flutuante:hover { transform: scale(1.1); }
.zap-flutuante svg { width: 28px; height: 28px; fill: #fff; }

@media (prefers-reduced-motion: reduce) {
  .zap-flutuante,
  .header__overlay,
  .header__sidebar { transition: none; }
  .zap-flutuante:hover { transform: none; }
}

/* ── FAQ nativo com <details> ───────────────────────────────────────────
   O SCSS do Next estiliza .faq-accordion__item--open, que era classe posta
   por JavaScript. Aqui o estado e o proprio atributo [open] do elemento. */
.faq-accordion__question { cursor: pointer; list-style: none; }
.faq-accordion__question::-webkit-details-marker { display: none; }
.faq-accordion__icon::after { content: '+'; }
details[open] > .faq-accordion__question .faq-accordion__icon::after { content: '\2212'; }

/* ── Ampliar print: <a> pra imagem, sem lightbox de JS ─────────────────── */
.sysrow__frame { display: block; }
.sysrow__zoom::before { content: '\2921\00a0'; }

/* ── Blog ──────────────────────────────────────────────────────────────── */

/* Bloco de resposta direta: a resposta em ate 50 palavras logo abaixo do H2.
   E o formato que AI Overview, ChatGPT e Perplexity citam. */
.resposta-direta {
  border-left: 3px solid #E8445A;
  background: rgba(232, 68, 90, .05);
  padding: 16px 20px;
  margin: 0 0 28px;
  border-radius: 0 8px 8px 0;
  font-size: 1.05rem;
  line-height: 1.65;
}
.resposta-direta p:last-child { margin-bottom: 0; }

.post-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  align-items: center;
  font-size: .9rem; opacity: .75;
  margin-bottom: 24px;
}
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; }
.post-tag {
  font-size: .8rem; padding: 5px 12px; border-radius: 999px;
  /* O fundo rosa a 10% derrubava o texto pra 4,29. Branco sólido com borda
     mantém o mesmo desenho e leva a 5,14. */
  background: var(--fs-branco); border: 1px solid rgba(232, 68, 90, .25);
  color: var(--fs-primaria-forte); font-weight: 600;
}

/* Toda tabela larga rola dentro dela mesma — a pagina nunca rola de lado. */
.tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; }
.tabela-rolavel table { min-width: 520px; }

/* Código NCM na coluna do meio de /ncm/. Duas linhas em vez de um prefixo novo:
   o `<code>` do corpo do post não tinha regra nenhuma e caía no monospace do
   navegador, menor que o texto ao lado. `nowrap` porque 2106.90.90 quebrando
   no meio no celular é o único jeito de errar ao copiar. */
.pm-rich-content__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em; white-space: nowrap; background: #f5f5f5; padding: 2px 6px;
  border-radius: 5px; border: 1px solid var(--fs-borda-suave); }
.pm-rich-content__body td small { display: inline-block; margin-top: 4px; color: #666; line-height: 1.5; }

/* ⛔ As regras .vcard* saíram em 20/08/2026, com os dois blocos que existiam
   aqui (este e o de baixo, que se contradiziam — o segundo vencia por ordem de
   concatenação). Nenhum PHP emite mais essa classe: a grade passou a usar a
   família .vgrid__* de secoes/05-estrutura.css, que já existia e estava morta.
   Quem incorpora vídeo agora é só /videos/{slug}/ — ver o ⛔ em
   fs_grade_videos(), includes/blocos.php. */

/* ── Tour de prints por area (home) ────────────────────────────────────── */
.systour__area { margin: 40px 0; }
.systour__area-title {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; opacity: .7; margin-bottom: 18px;
}
.systour__grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.systour__item { margin: 0; }
.systour__item img {
  width: 100%; height: auto; display: block;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.08);
}
.systour__item figcaption { margin-top: 10px; font-size: .9rem; line-height: 1.5; }
.systour__item figcaption strong { display: block; margin-bottom: 2px; }
.systour__item figcaption span { opacity: .7; }

/* ── Kit Premium: o que o SCSS do Next nao tem ─────────────────────────────
   O SCSS ja traz pm-hero, pm-card-grid, pm-steps, pm-features, pm-pill-grid,
   pm-compare, pm-dark-cta, pm-mid-cta e pm-faq. O que falta e o que estava
   escrito em `style={{...}}` inline dentro do JSX das paginas. */

/* /precos/ — lista + cartao de preco lado a lado */
.pm-preco-grid {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;
}
@media (max-width: 760px) { .pm-preco-grid { grid-template-columns: 1fr; } }

.pm-preco-card {
  /* ⛔ era o gradiente da marca cru, com TUDO branco por cima: o rotulo, o
     R$690, os 6 itens da lista e a nota — 11 falhas de contraste num cartao
     so, todas a 2,28 na ponta laranja. E' o cartao que mostra o preco, ou
     seja, o conteudo mais importante de /precos/ chegava ilegivel.
     `--fs-gradiente-botao` e' o mesmo desenho com as pontas escurecidas ate
     o branco passar (4,6). A cor vai no container; os filhos herdam. */
  background: var(--fs-gradiente-botao);
  border-radius: 1.25rem; padding: 2.5rem 2rem; text-align: center; color: #fff;
}
/* o botao dentro do cartao colorido: branco a 80% sobre o gradiente dava
   1,87. Dentro dele precisa de branco pleno e borda visivel. */
.pm-preco-card .pm-btn--ghost-light {
  color: #fff;
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.45);
}
.pm-preco-card__topo {
  font-size: .85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; margin-bottom: 1rem;
}
.pm-preco-card__valor {
  display: flex; align-items: baseline; justify-content: center;
  gap: .25rem; margin-bottom: .5rem;
}
.pm-preco-card__valor span:first-child { font-size: 1.5rem; font-weight: 700; }
.pm-preco-card__valor strong { font-size: 3.5rem; font-weight: 800; line-height: 1; }
.pm-preco-card__valor span:last-child { font-size: 1.25rem; font-weight: 600; }
/* ⛔ SEM `opacity` NESTE CARTÃO. O fundo é --fs-botao-primaria (#D23D51), o
   tom calibrado pra branco puro passar em cima: 4,64. Cada ponto de opacidade
   come dessa margem — .8 caía pra 3,49 e .7 pra 3,00, no cartão que fecha
   venda. A hierarquia aqui é tamanho e peso, não transparência. */
.pm-preco-card__nota { font-size: .85rem; margin-bottom: 2rem; }
.pm-preco-card__lista {
  list-style: none; padding: 1.5rem 0 0; margin: 0 0 1.5rem;
  border-top: 1px solid rgba(255,255,255,.3); font-size: .9rem; line-height: 2;
}
.pm-preco-card__lista li::before { content: '\2713\00a0'; }
.pm-preco-card__btn { width: 100%; justify-content: center; }
.pm-preco-card__resposta { font-size: .75rem; margin-top: .75rem; }

/* /contato/ — cartoes com botao no rodape */
.pm-card--centro { align-items: center; text-align: center; }
.pm-card__acao { margin-top: 1.25rem; width: 100%; justify-content: center; }
.pm-card__valor { font-size: .95rem; font-weight: 600; margin: .25rem 0; }
/* `opacity: .6` sobre #333 dava 3,71. --fs-texto-3 é o cinza que já passa
   (5,13 sobre branco) sem depender de transparência. */
.pm-card__sub { font-size: .8rem; color: var(--fs-texto-3); }

/* /revenda-de-software/ — cartoes de comissao */
.pm-ganho { text-align: center; }
.pm-ganho--destaque {
  border: 2px solid #E8445A;
  background: linear-gradient(135deg, rgba(232,68,90,.05), rgba(247,148,29,.05));
}
.pm-ganho__clientes { font-size: .85rem; color: var(--fs-texto-3); font-weight: 600; margin: .5rem 0; }
.pm-ganho__valor {
  font-size: 2rem; font-weight: 800; margin: .25rem 0;
  /* ⛔ era o gradiente da marca cru recortado em texto: 2,28 na ponta laranja
     sobre o fundo claro. Sao os valores de comissao — o conteudo central
     desta pagina. `--fs-gradiente-texto` e' o mesmo desenho com as pontas no
     tom que passa como TEXTO (5,1). */
  background: var(--fs-gradiente-texto);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ⛔ `-webkit-text-fill-color` e' herdado, `background-clip` NAO. Sem isto o
   <small> herda o preenchimento transparente do pai, nao herda o recorte, e
   some — sobrando so a barra colorida. Foi o bug do "/mes" invisivel. */
.pm-ganho__valor small {
  font-size: 1rem;
  -webkit-text-fill-color: var(--fs-texto-2);
  color: var(--fs-texto-2);
}
/* `opacity: .5` sobre #333 dava 2,85 — a legenda que explica que a comissao
   e recorrente, no cartao que vende a revenda. */
.pm-ganho__rec { font-size: .75rem; color: var(--fs-texto-3); }

/* /demonstracao/ — lista de beneficios do hero */
.demo-hero-benefits {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  justify-content: center; margin: 22px 0;
  font-size: .92rem;
  /* ⛔ Esta lista vive no hero ESCURO e não declarava cor: herdava o #333 do
     corpo e dava 1,57 sobre #0a0a0a — praticamente invisível, logo abaixo do
     h1 da página que existe pra marcar demonstração. */
  color: var(--fs-texto-claro-2);
}
.demo-hero-benefits__item { display: inline-flex; align-items: center; gap: 6px; }
.demo-hero-benefits__check { color: #4ade80; font-weight: 700; }

/* /videos/ e faixas de video */
/* ⭐ Este `auto-fill` fica: ele responde sozinho e vence, por ordem de
   concatenacao, as media queries de secoes/05-estrutura.css. O resto da
   familia (.vgrid__frame, __thumb, __play, __dur, __title) vem de la. */
.vgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.vstrip__more { margin-top: 26px; text-align: center; }
.vhub__serie { margin: 36px 0; }
.vhub__serie-titulo { font-size: 1.15rem; font-weight: 700; margin-bottom: 14px; }

/* /termos/ — texto corrido legal */
.pm-legal { max-width: 760px; margin: 0 auto; line-height: 1.8; }
.pm-legal h2 { margin: 2.2rem 0 .8rem; font-size: 1.25rem; }
.pm-legal ul { margin: .6rem 0 .6rem 1.2rem; }
.pm-legal li { margin-bottom: .35rem; }

/* ── /funcionalidades-completas/ e indices de ancora ───────────────────── */
.vhub__indice { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0 4px; }
.pm-card__detalhes { list-style: none; padding: 0; margin: 12px 0 0; font-size: .86rem; opacity: .8; }
.pm-card__detalhes li { padding-left: 16px; position: relative; margin-bottom: 4px; }
.pm-card__detalhes li::before { content: '\2013'; position: absolute; left: 0; opacity: .5; }
.pm-badge {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: .62rem; font-weight: 800; letter-spacing: .06em;
  padding: 3px 7px; border-radius: 4px; text-transform: uppercase;
}
/* ⛔ Selo com rotulo BRANCO: o fundo tem que ser o tom escurecido, nao o tom
   de marca. Com as cores originais dava 3,88 (rosa), 2,28 (laranja), 2,54
   (verde) e 4,47 (roxo) — nenhuma passa. Rosa e laranja usam as pontas ja
   calibradas de --fs-gradiente-botao; verde e roxo seguem a mesma regra. */
.pm-badge--essencial { background: var(--fs-botao-primaria); color: #fff; }  /* 4,64 */
.pm-badge--popular   { background: #A96514; color: #fff; }                   /* 4,61 */
.pm-badge--novo      { background: #0B7A55; color: #fff; }                   /* 5,34 */
.pm-badge--pro       { background: #4F46E5; color: #fff; }                   /* 6,29 */

/* ⛔ As estrelas de avaliacao mudaram de casa em 16/08/2026: estao em
   estilos/secoes/avaliacoes.css, com a cor vindo de token em vez do #F7941D
   literal que estava aqui. Nao redeclarar — duas versoes na mesma folha e' o
   comeco de uma voltar a divergir. */

/* ── Logo: o que estava em `style={{...}}` inline no JSX ────────────────────
   O Next tinha `objectFit: 'contain', maxHeight: '44px'` inline no <img>.
   Sem isso o SVG (261x150) escala pela largura de 140px e vira 140x81 num
   header de 72px — estoura e corta o topo. `height="44"` no atributo nao
   resolve: o CSS de largura ganha e a altura volta a ser automatica. */
.header__logo-img { width: 140px; height: 44px; object-fit: contain; }
.footer__brand img  { width: 120px; height: 38px; object-fit: contain; }

/* ⛔ Os DOIS lados fixos, e o object-fit encaixando — igual ao Next.
   `width:auto` com `max-height` colapsa pra 0x0: o logo é SVG sem dimensão
   intrínseca neste contexto, então sem largura declarada não sobra nada. */

/* ── Contraste dentro da faixa escura ───────────────────────────────────────
   ⛔ BUG que so aparece no navegador: os blocos de print sao os mesmos no fundo
   claro e no escuro, mas o tema claro define `color:#333` em h2/h3/p globais.
   Dentro de .sysstrip--dark isso vira #333 sobre #1c1c1c — contraste 1.28,
   texto invisivel. Nenhum teste de HTML/schema pega; so olho ou medicao.

   ⭐ A PRIMEIRA correcao listou os filhos um por um (figcaption, sysstrip__title,
   sysrow__title...) e por isso deixou `systour__area-title` de fora — h3 sem
   regra propria, herdando o #333 global. Enumerar filho e' o bug, nao a cura.

   Agora e' o CONTAINER que declara a cor e os titulos ZERAM a cor global pra
   voltar a herdar. Elemento novo dentro da faixa ja nasce legivel. */
.sysstrip--dark               { color: #b8b8bd; }
.sysstrip--dark :is(h2,h3,h4,strong,.sysstrip__title,.sysrow__title,
                    .systour__area-title) { color: #fff; }
.sysstrip--dark :is(p,span,figcaption,.sysstrip__sub,.sysrow__desc) {
    color: #b8b8bd;
    opacity: 1;
}

/* tema claro: mesma faixa, cores do tema — tambem no container, nao por filho */
.system-strip:not(.sysstrip--dark) :is(h2,h3,h4,.systour__area-title) { color: #1c1c1c; }
.system-strip:not(.sysstrip--dark) :is(figcaption,.sysrow__desc)      { color: #555; opacity: 1; }

/* ── FONTES DA MARCA ────────────────────────────────────────────────────────
   ⛔ REGRESSAO DA MIGRACAO, achada em 15/08/2026 medindo no navegador: o CSS
   pede `font-family:"Outfit","Inter",sans-serif` em toda parte, mas NADA
   carregava as duas. O site inteiro renderizava em Arial.

   Medicao: um <span> de 48px/700 com a cadeia do site deu 589,6px — identico
   ao `sans-serif` generico. "Outfit" sozinho deu 530,6px, o mesmo que uma
   familia inexistente. Prova de ausencia, nao suposicao.

   No Next isso vinha do `next/font/google`, que auto-hospedava e gerava os
   @font-face no build. Sem build, ninguem gerou. Aqui os .woff2 sao servidos
   direto de publico/css/fontes/ — que ja tem `location ^~ /css/` no nginx, entao
   nao precisa de linha nova em config de producao.

   ⭐ VARIAVEIS: um arquivo cobre 100..900. Outfit latin sao 32 KB para TODOS os
   pesos de titulo. O latin-ext so baixa se aparecer glifo fora do latin — em
   portugues (ã ç õ é) nunca aparece, porque tudo isso e' u+00??.

   ⭐ Os `*-override` do fallback vieram prontos do build do Next: ajustam a
   metrica do Arial para casar com a da fonte real, entao o texto NAO pula
   quando o woff2 termina de chegar (CLS zero durante o `font-display:swap`). */

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/css/fontes/outfit-variavel-latin.woff2') format('woff2');
    unicode-range: u+00??, 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: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/css/fontes/outfit-variavel-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;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/css/fontes/inter-variavel-latin.woff2') format('woff2');
    unicode-range: u+00??, 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: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/css/fontes/inter-variavel-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;
}

/* fallback com metrica corrigida — evita o pulo do texto durante o swap */
@font-face {
    font-family: 'Outfit Fallback';
    src: local('Arial');
    ascent-override: 100.18%; descent-override: 26.05%;
    line-gap-override: 0%;    size-adjust: 99.82%;
}
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    ascent-override: 90.49%; descent-override: 22.56%;
    line-gap-override: 0%;   size-adjust: 107.06%;
}

/* entra na frente do `sans-serif` de todas as declaracoes que ja existem */
:root { font-family: 'Inter', 'Inter Fallback', sans-serif; }
body  { font-family: 'Inter', 'Inter Fallback', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', 'Outfit Fallback', sans-serif; }