/* ============================================================
   Rezult CRM — Site
   Tipografia Rezult Design System · Inter
   ============================================================ */

:root {
  /* ── Rampa neutra do Rezult Design System ──────────────────────────────────
     Os neutros do rezult-crm (src/index.css), sem um tom novo. A partir de
     05/10/2026 o site é preto, branco e cinza: nenhum verde, e os tokens de
     nome verde abaixo apontam para cá. Charcoal faz o trabalho do preto;
     #000 não aparece.

     Duas cores escapam, e por um motivo que não é de paleta: o #25D366 do
     WhatsApp e o #0668E1 da Meta. São identificação de outra empresa, como um
     logotipo, e em cinza o selo "WhatsApp Oficial" perde o reconhecimento
     imediato, que é o trabalho dele. Ficam onde estão, nomeadas aqui para que
     ninguém as "arrume" depois. */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFAFA;
  --neutral-50:  #F7F7F7;
  --neutral-100: #F2F2F2;
  --neutral-150: #EBEBEB;
  --neutral-200: #E7E7E7;
  --neutral-300: #D5D5D5;
  --neutral-400: #B4B4B7;
  --neutral-500: #8A8A8E;  /* o DS libera só a partir de 16px: 3,44:1 */
  --neutral-600: #6C6C6C;
  --neutral-700: #525154;
  --neutral-800: #3A3A3E;
  --neutral-900: #1D1D1D;  /* o "preto" do sistema; era #2D2F33 até 06/10/2026 */
  --neutral-950: #1B1B1B;  /* a 2 pontos do 900: o par perdeu o degrau visível */
  --marca-whatsapp: #25D366;
  --marca-meta:     #0668E1;

  /* ── Os acentos verdes da moldura da página ──
     A página é preta, branca e cinza. O verde entra em dois lugares, os dois
     pedidos pelo dono em 05/10/2026, e em nenhum outro:
       1. os três ícones de benefício da hero (teste, garantia e migração, que
          são as objeções do topo da página);
       2. o numeral "6" e o trecho marcado do título do diagnóstico.

     SUPERFÍCIE (--accent-100). É o preenchimento das caixas de ícone, e o nome
     segue o degrau da rampa do rezult-crm de onde veio (src/index.css), para
     quem comparar com o app achar o mesmo valor lá. A caixa NÃO tem borda, e
     isso anda junto com o tom: a borda existia enquanto o preenchimento era o
     --accent-50 (#ECFDF7), que fica a 1,02:1 do canvas e sumia sem contorno.
     Neste tom o matiz se sustenta, e o contorno perdeu a função. Mexer no
     preenchimento é rever essa relação, não só trocar o hex.

     TINTA (--verde-tinta). Um valor só para os dois acentos. O nome é de PAPEL
     e não de degrau porque #128C69 não é um degrau da rampa: é praticamente o
     --primary antigo do CRM (#128A68). Ele substituiu o --accent-700 (#008762)
     que estava aqui, e os dois ficavam a 0,017 de luminância um do outro: dois
     verdes a essa distância na mesma tela leem como inconsistência, não como
     variação, então viraram um.

     Contrastes medidos: 3,94:1 sobre o canvas #F7F7F7 e 3,72:1 sobre a menta.
     Os dois acima dos 3:1 que o AA pede para texto grande e para objeto
     gráfico, que são exatamente os dois usos. ABAIXO DE 24px ele não serve,
     porque aí o mínimo passa a 4,5:1. O #01D8A4 da marca não serve em nenhum
     dos dois, dá 1,63:1 sobre a menta: ele é superfície, não tinta. */
  --accent-100: #CFFAEB;
  --verde-tinta: #128C69;
  /* Par do acima, para texto abaixo de 24px, onde o AA sobe para 4,5:1 e o
     #128C69 reprova com 3,94:1. Ver o bloco "ACENTO VERDE" no fim do arquivo. */
  --verde-tinta-forte: #0F7A5B;
  --verde-neon: #B6FF4D;

  /* Brand — o verde neon saiu do site. Ele rendia 1.66:1 de contraste sobre
     branco e, com a virada para fundo claro, não sobrou lugar onde
     funcionasse. Ficou um verde só, o #8A8A8E, que era o antigo --green-text. */
  /* CTA EM EMERALD (06/10/2026). O par volta ao que o design system do CRM
     manda: superfície --accent-400 #01D8A4 com tinta CHARCOAL, 7,25:1. O doc
     do CRM é explícito, "primary-foreground: charcoal, NUNCA branco", porque
     branco sobre esse emerald dá 1,85:1 e some.

     Durante a passada de escala de cinza eu tinha invertido para charcoal com
     tinta branca. Funcionava, mas era o oposto da marca: o botão mais visto do
     site não dizia Rezult. */
  /* CTA EM CHARCOAL com tinta branca, 13,41:1. O design system do CRM manda
     emerald com tinta charcoal, e eu cheguei a aplicar isso em 06/10/2026; o
     dono reverteu no mesmo dia ("não era para aplicar verde menta nos botões").
     A divergência é deliberada: aqui o botão é a peça mais escura da página e
     o verde fica para os ACENTOS (pill de seção, ícone, check, borda de
     destaque), que é onde ele marca a identidade sem virar superfície. */
  --primary: var(--neutral-900);
  --primary-hi: var(--neutral-800);
  --primary-lo: var(--neutral-950);
  --on-primary: var(--neutral-0);
  /* Aponta para --primary: os dois são o mesmo verde desde a saída do neon, e
     um alias evita que saiam de sincronia numa troca futura. */
  /* VERDE DE VOLTA (06/10/2026). Este token é lido por 89 regras nas duas
     folhas: eyebrow de seção, pill de nível, número de passo, ícone de
     recurso, check de lista, seta, ponto do carrossel, anel de foco. Na
     passada de escala de cinza ele passou a apontar para charcoal, e foi isso,
     sozinho, que deixou o site com cara de jornal: toda peça que o design
     queria verde saía cinza.

     Aponta para o --verde-tinta-forte e não para o --verde-tinta porque a
     maioria desses 89 usos é texto PEQUENO (pill de 11px, eyebrow de 11px,
     numeral de 13px), e o #128C69 dá 3,94:1, que reprova abaixo de 24px. O
     #0F7A5B passa nos três fundos do site (4,96:1 no canvas, 5,31:1 no branco,
     4,68:1 na menta), então um token só serve a todos sem reabrir o problema
     de contraste. */
  --green-text: var(--verde-tinta-forte);
  /* ═══ Superfície dos CTAs (11/10/2026) ═══════════════════════════════════
     O dono pediu os botões cheios da home no MESMO verde dos h2, no lugar do
     charcoal. Não é o --primary que muda: aquele token é lido por quase 90
     regras que não são botão (bolinha da eyebrow, ponto do carrossel, preenchi-
     mento da linha do tempo, marca do checkbox), e virá-lo pintaria a página
     toda de verde. Daí um token próprio, lido só pelas regras de botão.

     Aponta para o --green-text, e não repete o hex, para que uma troca futura
     do verde de título leve o botão junto, que é o pedido.

     O hover é #0C6349, um degrau mais escuro: o caminho natural seria clarear
     para o --verde-tinta #128C69, mas branco sobre ele dá 4,22:1 e os 16px do
     texto do botão pedem 4,5:1. Escurecendo, vai a 7,15:1. */
  --cta-verde: var(--green-text);
  --cta-verde-hi: #0C6349;
  --glow: transparent;
  --glow-btn: transparent;
  /* Verde dos CTAs do hero e da navbar. */
  /* Preto esverdeado dos títulos, e agora também do fundo da pill do hero. */
  /* Vermelho dos preços riscados, o mesmo --red do app. Marca o que a
     pessoa NÃO vai pagar. */
  --red: var(--neutral-600);
  --ink: var(--neutral-900);
  /* Dourado das estrelas de avaliação dentro dos cards de depoimento, e só
     delas. Ali o dourado é a convenção universal de nota, reconhecida antes
     de o leitor chegar a qualquer número.

     As estrelas do selo acima do título "Nunca usou IA no seu negócio?"
     seguem em --green-text de propósito: aquilo é um selo da marca e não a
     nota de um cliente, então acompanha o verde e não a convenção. */
  --dourado: #F5A623;
  --green-cta: var(--neutral-900);
  --green-cta-hover: var(--neutral-800);
  --glow-soft: transparent;

  /* Surfaces
     Tema claro desde 2026-09-03, no padrão do gohighlevel.com (ver a skill
     gohighlevel-design-system): página branca, cards no cinza #F6F6F6 deles,
     título preto e corpo em #575757, que é o cinza de texto medido no site
     deles. O verde da marca não muda, ele ocupa o lugar que o azul ocupa lá.

     --bg-deep tem o mesmo valor de --bg de propósito: as seções alternadas
     deixaram de ser um tom diferente, o site inteiro é a mesma base e quem
     separa as seções agora é a borda de 1px e o branco dos cards. Segue como
     token separado porque três seções ainda o referenciam pelo nome. */
  --bg: var(--neutral-50);
  --bg-deep: var(--neutral-0);
  --surface: var(--neutral-0);
  --surface-2: var(--neutral-100);
  --surface-3: var(--neutral-150);
  --border: var(--neutral-200);
  --border-2: var(--neutral-200);
  /* Borda de acento: hover de cartão, cartão destacado do plano, último passo
     da trilha de autonomia. São 22 regras nas duas folhas. Volta ao verde pelo
     mesmo motivo do --green-text: é borda, não texto, então pode usar o
     --verde-tinta cheio (objeto gráfico pede 3:1, e ele dá 3,94:1). */
  --border-active: var(--verde-tinta);

  /* Text */
  --text: var(--neutral-900);
  --text-muted: var(--neutral-600);
  --text-subtle: var(--neutral-500);

  /* Ilha escura: valores usados pelas superfícies que continuam escuras
     (os mockups do produto), para redefinir os tokens acima localmente. */
  --dark-bg: #05080A;
  --dark-bg-deep: #02040A;
  --dark-surface: #0C1115;
  --dark-surface-2: #131A1E;
  --dark-border: rgba(255, 255, 255, 0.25);
  --dark-text: #F4F6F4;
  --dark-text-muted: #D1D1D1;
  --dark-text-subtle: rgba(244, 246, 244, 0.38);



  /* Semantic (data only) */
  --blue: var(--neutral-600);
  --amber: var(--neutral-700);
  --red: #8A8A8E;
  --purple: var(--neutral-600);

  /* Type */
  /* Fontes do Rezult Design System. A escala da landing mantém tamanhos
     próprios para preservar a hierarquia editorial e os layouts responsivos. */
  --sans: var(--font-sans);
  --display: var(--font-sans);
  --mono: var(--font-mono);

  /* Radius */
  --r-sm: 10px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 16px;
  --shadow-sm: 0 2px 8px rgba(7, 16, 13, .07);

  /* Layout */
  --maxw: 1200px;
  /* Altura real da navbar, e é isso que o nome promete. Vinha desencontrada da
     barra (84px na versão flutuante, 68px depois), o que embutia um erro fixo em
     todo calc() derivado. Com o valor verdadeiro, cada consumidor soma abaixo
     dele só o respiro que quer: hero, page-hero, scroll-padding das âncoras e o
     índice fixo das páginas legais.

     A parcela env() cobre o caso do site aberto como app na tela de início
     (existe site.webmanifest), onde a página recebe a tela inteira e precisa
     descontar o recorte. Aí ela vale ~47px e tudo que deriva daqui desce junto:
     hero, page-hero, âncoras e o índice das legais.

     No Safari em navegação normal ela vale ZERO, medido no aparelho pelo
     Inspetor Web (iPhone, tela de 926px, página recebendo 781px). Ali o Safari
     reserva a barra de status para si e entrega à página só o que sobra, então
     a faixa acima da navbar não pertence à página e nenhum CSS a alcança. Se
     alguém for mexer nisso de novo por causa daquela tira: já foi tentado com
     padding env(), fundo opaco e pseudo-elemento. Nenhum funciona, e não é
     defeito do site. */
  --nav-h: calc(60px + env(safe-area-inset-top, 0px));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 28px); }
body {
  font-family: var(--sans);
  font-size: var(--fs-16);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--lh-normal);
  overflow-x: hidden;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: rgba(138, 138, 142, 0.3); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-active); }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.section { padding: 120px 0; position: relative; }

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138, 138, 142,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(138, 138, 142,0); }
}
.online-indicator { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.online-indicator .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neutral-900); animation: pulse-dot 1.8s ease-in-out infinite; flex-shrink: 0; }
.online-indicator span { font-size: 13px; font-weight: 500; color: #fff; letter-spacing: 0.02em; }
.section-sm { padding: 80px 0; }

/* ---------- Section tints ---------- */
.tint-left::before,
.tint-right::before,
.tint-center::before,
.tint-top::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.tint-left::before   { background: radial-gradient(ellipse 55% 70% at 0% 50%,   rgba(138, 138, 142,0.055) 0%, transparent 70%); }
.tint-right::before  { background: radial-gradient(ellipse 55% 70% at 100% 40%,  rgba(138, 138, 142,0.055) 0%, transparent 70%); }
.tint-center::before { background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(138, 138, 142,0.05)  0%, transparent 70%); }
.tint-top::before    { background: radial-gradient(ellipse 60% 50% at 50% 0%,   rgba(138, 138, 142,0.04)  0%, transparent 65%); }

.eyebrow {
  font-size: var(--text-overline-size);
  color: var(--green-text);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
  background: none;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
/* Regra base = celular. O respiro do desktop vem no min-width abaixo, e não
   como override desfazendo este valor: assim cada largura tem uma linha só, e
   mexer numa não exige conferir a outra.
   Cuidado ao ajustar: a margem do .h2 (10px) colapsa com esta, porque o
   .section-head não tem padding-bottom nem borda. As duas não somam, vence a
   maior. Enquanto a do .h2 for menor que este número, mexer nela não faz nada. */
.section-head { max-width: 900px; margin-bottom: 40px; }
@media (min-width: 981px) {
  .section-head { margin-bottom: 50px; }
  /* Só o título de Depoimentos, e só no desktop: os 900px da regra base valem
     para as outras seções, e reduzir ali soltaria o título isolado num bloco
     de texto bem mais estreito que o .h2 sozinho preencheria mal.

     Era 700px, medido para o título curto anterior ("De 40 para 120 reuniões
     por mês"). O título novo tem 40,29em e não cabe: em 700px ele quebrava em
     três linhas, e a do meio ficava com 8,35em contra 19,25em da primeira,
     porque .grad-verde é inline-block e o trecho verde não parte. Como bloco
     indivisível de 12,28em, ele descia inteiro e deixava o buraco.
     Com a H2 em 48px, 900px acomoda "usado" na primeira linha e preserva
     o trecho verde inteiro na segunda. */
  #clientes .section-head { max-width: 900px; }
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
/* O .section-head de #recursos zerava a margem porque carregava SÓ a pill: os
   40px da regra base somariam com os 120px de padding-top do .feature-text e a
   pill ficaria órfã no meio do vazio.

   Desde 08/10/2026 ele tem h2, e a conta virou outra. Quem encosta no título
   agora não é o texto do recurso (que tem os 120px) e sim a IMAGEM, que é
   centrada na linha e por isso sobe quase até o topo dela. O primeiro recurso
   ficava colado no título enquanto o segundo em diante respirava.

   A margem resolve pelo lado certo: ela separa o cabeçalho da seção do que
   vem abaixo, valha o que valer dentro da linha. Os 120px do .feature-text
   seguem intactos, porque são eles que dão o ritmo ENTRE os recursos. */
#recursos .section-head { margin-bottom: 56px; }
.section-sub { font-size: 16px; color: var(--text-muted); line-height: 1.5; margin-top: 16px; font-weight: 400; letter-spacing: -0.3px; }
/* Preto esverdeado dos títulos, em vez do #000 puro do body. */
h1, h2, h3 { font-family: var(--display); letter-spacing: var(--ls-tight); line-height: 1; font-weight: var(--fw-semibold); color: var(--ink); }
/* O letter-spacing do .h2 é -0.8px em TODOS os breakpoints desde 06/10/2026,
   por pedido do dono. Era -1.2px aqui e na faixa de 560px, e -0.02em nas
   outras páginas. Virou um número só: se mudar, mudar nos cinco pontos (dois
   nesta folha, três na styles.css), senão o título aperta diferente conforme
   a largura da tela. */
/* O tamanho é FLUIDO, não dois degraus fixos. Antes a .h2 valia 40px e caía
   para 30px de uma vez em 560px: um salto de 10px num único pixel de
   largura, enquanto a h1 do hero já escalava contínuo por clamp. Entre 561 e
   900px de tela o título ficava grande demais para a coluna, e logo abaixo de
   560 pequeno demais.

   A parte do meio usa rem MAIS vw, e não vw sozinho: com vw puro o título para
   de responder ao tamanho de fonte que a pessoa configurou no navegador, e quem
   aumenta a fonte do sistema não vê diferença nenhuma. O rem carrega essa parte.

   A curva: 29px até 375px de tela, subindo até os 40px a partir de ~1150px.
   Mexer no mínimo ou no máximo pede refazer a conta do meio, senão a rampa
   deixa de encostar nas duas pontas. */
.h2 { font-size: 48px; font-family: var(--display); margin: 5px 0 10px; font-weight: 600; letter-spacing: -2px; line-height: 1.05; }
/* Zerado em 06/10/2026: a folga pill -> título passou a ser só o
   margin-bottom da pill, como já era no hero.

   As cinco classes repetem as do bloco das pills no fim do arquivo, e têm que
   continuar repetindo. A .h2 nasce com margin: 5px 0 10px, então toda pill que
   NÃO estiver nesta lista volta a somar 5px e sai dos 29px. Foi o que
   aconteceu com a pill "Próximo passo" do CTA final, que é .hero-badge e não
   .eyebrow: ela ficava em 34px enquanto o resto já estava em 29px. */
.eyebrow + .h2,
.hero-badge + .h2,
.hero-badge-ia + .h2,
.hero-badge-verde + .h2,
.ag-overview-pill + .h2 { margin-top: 0; }
#integ-heading { letter-spacing: -2px; }
#integ-heading + p { max-width: 640px; margin-left: auto; margin-right: auto; }
#demo-heading, #demo-planos-heading { font-size: 48px; }
@media (max-width: 768px) {
  .h2 { line-height: 1.05; }
}
/* Degradê no texto: o fundo é pintado atrás das letras e recortado por elas.
   Precisa das três declarações juntas — background-clip: text sozinho não apaga
   a cor do texto, e -webkit-text-fill-color vence qualquer color.

   display: inline-block é o que faz o degradê medir só a palavra. Como span
   inline, a caixa de fundo se estende pelo espaço da linha e o verde escuro
   ficaria espremido no comecinho.

   Dois verdes: o #047857 à esquerda, cheio, abrindo para o --green-text da
   marca a 90% de opacidade à direita. O alfa deixa o branco da página aparecer
   por trás das letras, clareando a ponta. Vai como rgba escrito à mão porque
   --green-text é um rgb() fechado e não aceita alfa por cima.

   A ponta escura era o #059669 do botão do hero. Passou para #047857, um degrau
   abaixo, para o começo do degradê abrir com mais contraste contra o claro do
   fim. Não é token do site de propósito: é cor de degradê, não cor de marca. */
.grad-verde {
  display: inline-block;
  background: linear-gradient(90deg, #6C6C6C 0%, rgba(138, 138, 142, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lede { font-size: 16px; color: var(--text-muted); line-height: 1.4; letter-spacing: -0.3px; }
/* 18px em vez dos 16px da regra acima, escopado à seção de agentes: a regra
   global serve as outras ledes da página e não deve mudar junto. */
#agentes .lede { font-size: 18px; }
.text-grad { color: var(--green-text); }

/* ---------- Buttons ---------- */
/* Sem font-family aqui: a fonte do site vem toda do --sans, e repetir a
   família no botão só criaria um segundo lugar para esquecer de atualizar.
   Os pesos ficam: 500 no botão comum, 600 no primário. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 500; font-size: 15px; letter-spacing: -0.01em;
  padding: 8px 22px; border-radius: var(--r-md);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
/* Botão original, recuperado de 5c12334^. Neon --primary com texto
   --on-primary (quase preto: branco sobre este verde dá 1,7:1 e some). A
   sombra tem duas camadas neon: um anel de 1px sem blur, que define a borda,
   e um halo de 30px em --glow. No hover o botão sobe 2px e o halo cresce. */
.btn-primary { background: var(--cta-verde); color: var(--on-primary); box-shadow: 0 0 0 1px var(--cta-verde), 0 8px 30px var(--glow-btn); font-weight: 600; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--cta-verde), 0 12px 40px var(--glow-btn); }
/* .btn-shine perdeu o efeito. Era um degradê animado percorrendo os verdes
   claros da marca; virou o mesmo verde chapado dos demais botões. A classe
   continua no HTML de index e planos (5 botões) e agora não faz nada além de
   garantir o fundo, então pode sair numa limpeza futura. */
.btn-shine {
  background: var(--cta-verde);
  animation: none;
}
.btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--border-2); background: var(--surface-3); transform: translateY(-1px); }
.btn-ghost { color: var(--text); }
.btn-ghost:hover { color: var(--green-text); }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-block { width: 100%; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  /* Com box-sizing border-box, a faixa útil é sempre 60px: o padding só empurra
     logo e botões para baixo do recorte quando ele existe. No Safari em
     navegação normal o env() vale 0 e isto vira height: 60px, padding: 0. */
  height: var(--nav-h);
  padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center;
  /* Sólida, por decisão de marca.

     No iPhone isso deixa uma emenda visível: acima da barra o Safari mostra o
     conteúdo rolando por trás da barra de status, e o corte entre os dois
     aparece. É inevitável com fundo opaco, e não tem correção por CSS (ver a
     medição no comentário de --nav-h).

     As alternativas foram testadas e descartadas: barra transparente, como
     fazem sites em Framer, elimina a emenda mas deixa o logo branco ilegível
     sobre o mockup claro do notebook; o degradê como meio termo também não
     agradou; e a barra branca com logo preto (2026-09-02) foi revertida no
     mesmo dia, porque destoava do resto do site, que é escuro de ponta a
     ponta. Ficou o fundo cheio, com a emenda como custo aceito.

     O backdrop-filter sai sempre que o fundo volta a ser opaco: sem
     transparência ele não tem o que desfocar e fica 100% coberto, custo de GPU
     invisível, sentido justamente em celular. */
  background: #fff;
  /* A navbar e a hero são superfícies brancas. Uma hairline cinza faz a
     separação sem criar profundidade artificial entre as duas áreas. */
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  transition: top .3s ease, height .3s ease, width .3s ease, padding-top .3s ease,
              border-radius .3s ease, background .3s, box-shadow .3s, transform .3s ease;
}
/* Rolou 12px: a barra descola do topo e vira um cartão recortado.

   Ela continua fixed e do mesmo tamanho útil (60px); o que muda é que ganha
   uma margem em volta, cantos e contorno. A largura sai de 100% para o mesmo
   --maxw do .wrap, então no estado flutuante a barra e o conteúdo da página
   passam a ter exatamente a mesma caixa — é isso que faz o cartão parecer
   alinhado ao site em vez de solto.

   margin-inline: auto centraliza mesmo com left/right: 0 herdados do .nav: com
   left, right e width todos definidos, a caixa fica sobre-restrita e o CSS
   resolve a sobra nas margens auto.

   O fundo segue opaco: transparência com blur foi tentada e descartada aqui
   porque o hero tem o mockup claro do notebook passando por trás. O destaque
   vem apenas do recorte e do contorno, sem sombra. */
.nav.scrolled {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  height: 60px;
  padding-top: 0;
  width: min(var(--maxw), calc(100% - 32px));
  margin-inline: auto;
  border-radius: var(--r-md);
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: none;
}
/* O .wrap já reserva 32px de respiro nas laterais para o conteúdo não grudar
   na borda da tela. Flutuando, quem dá esse respiro é a própria margem do
   cartão, e os 32px de dentro viram excesso: o logo ficaria a 64px da borda. */
.nav.scrolled .wrap { padding: 0 24px; }

/* Menu de celular aberto: a barra volta a colar no topo.

   O painel do menu ocupa a tela inteira (inset: 0) e fica abaixo da nav no
   z-index. Uma pílula recortada boiando sobre esse painel mostra o preto do
   menu contornando o preto da barra, com a sombra marcando a emenda. Colada,
   os dois viram uma superfície só.

   Precisa da classe no body porque o .mobile-menu vem depois do .nav no DOM, e
   não existe seletor de irmão anterior em CSS. */
body.menu-aberto .nav {
  top: 0;
  height: var(--nav-h);
  padding-top: env(safe-area-inset-top, 0px);
  width: 100%;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
body.menu-aberto .nav .wrap { padding: 0 32px; }
/* Sem override de max-width/padding: a barra vai de ponta a ponta, mas o
   conteúdo segue o --maxw do .wrap global, centralizado, senão logo e botões
   grudariam nas bordas da tela em monitor largo. */
.nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav-left { display: flex; align-items: center; flex-shrink: 0; }
.nav-links { flex: 1; display: flex; gap: 30px; justify-content: center; }
.nav-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

/* O letter-spacing saiu junto com o uppercase: os 0.04em existiam para abrir a
   caixa alta, que precisa de mais respiro entre letras para não fechar. Em
   caixa mista esse mesmo tracking deixa as palavras espaçadas demais. */
.nav-links a { font-size: 14px; color: var(--ink); transition: color .15s; font-weight: 500; text-transform: capitalize; letter-spacing: normal; }
.nav-links a:hover { color: #050A07; }
.nav-right { display: flex; align-items: center; gap: 16px; }
/* Sem font-weight aqui, de propósito. Este seletor já teve um 500 para devolver
   o Medium só ao botão da navbar; agora que ele é SemiBold como os outros, o
   override virou ruído: basta deixar o .btn-primary aplicar o 600 dele. */
/* O radius dos dois botões da navbar é o mesmo --r-sm (10px) do CTA do hero:
   desde que o botão do hero deixou de ser cápsula, um par de pílulas aqui em
   cima destoaria do único botão que a página realmente quer que se clique. */
/* font-weight precisa estar aqui: o .btn-primary pede 600 e, sozinho, venceria
   por vir depois no arquivo. Este seletor tem mais classes (maior
   especificidade), então o 500 abaixo vence independente da ordem. */
.nav-right .btn { border-radius: var(--r-sm); font-size: 13px; font-weight: 500; padding: 8px 16px; letter-spacing: 0; }
/* Mesmo verde do botão do hero, sem glow. box-shadow: none precisa estar
   escrito: sem ele viria o anel e o halo neon de .btn-primary. */
.nav-right .btn-primary { background: var(--green-cta); color: #fff; box-shadow: none; }
.nav-right .btn-primary:hover { background: var(--green-cta-hover); box-shadow: none; }
.nav-cta-ghost { font-size: 12px; color: #050A07; background: transparent; border: 1px solid rgba(5,10,7,0.22); border-radius: var(--r-sm); padding: 8px 16px; transition: border-color .15s, color .15s; font-weight: 500; }
.nav-cta-ghost:hover { border-color: rgba(5,10,7,0.55); color: #050A07; }
.nav-burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: none; background: none; color: #050A07; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; }
/* Logo é só a marca, em imagem, na navbar e no rodapé. A altura de 34px repete
   a do antigo quadradinho "RZ", para a barra não mudar de peso; o arquivo tem
   100px, ~3x a exibida, então segue nítida em tela retina.
   Saíram daqui .logo-mark, .logo-word e .footer .logo-word, que montavam a
   versão em texto e ficaram sem nenhum elemento para estilizar. */
.logo img { height: 34px; width: auto; display: block; }
/* O logo da navbar passou a ser o mesmo ladrilho do app (favicon.png do
   rezult-crm, copiado para logos/logo-rezult-app.png). Ele traz fundo escuro
   próprio, então vai quadrado e com canto arredondado, nos mesmos 30px e raio
   8 que a BarraSuperior usa. O logo-rodape.png, do rodapé, não muda: aquele é
   feito para fundo escuro e já funciona lá. */
.nav .logo img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
/* A marca escrita ao lado do logo, como na barra superior do app
   (rezult-crm, src/components/BarraSuperior.tsx). De lá vieram o
   tracking-tight e, principalmente, os DOIS pesos na mesma palavra composta:
   "Rezult" em 600 e "CRM" em 400, decisão do dono registrada lá. O tracking
   junta as duas o suficiente para lerem como um nome, não como duas palavras
   soltas.

   O corpo é 18px no desktop e 16px no celular desde 06/10/2026. Nasceu em 16px,
   "e não os 15px do app, porque a barra do site é mais larga e tem menos
   elementos", e subiu de novo pelo mesmo raciocínio: ao lado do ladrilho de
   30px o nome ainda lia como legenda e não como marca. Os dois valores são
   escolha do dono, afinados à mão, então não seguem papel do design system.

   Escopado em .nav porque a classe .logo também serve o rodapé, que já traz a
   marca de outro jeito. */
.nav .logo { gap: 10px; }
.nav .logo-nome {
  /* O tamanho aqui é o do "CRM": 18px no desktop e 16px no celular (bloco de
     560px), por pedido do dono em 06/10/2026. Passou por 16/15 e 20/18 antes.

     "Rezult" é maior, pelo <b> logo abaixo (dono, 08/10/2026). Quem cresce é
     só ele, e não o bloco, porque as duas palavras dividem o `line-height`
     herdado daqui -- mexer no tamanho do pai moveria a linha de base das
     duas. */
  font-size: 18px;
  letter-spacing: -0.025em;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 400;
}
.nav .logo-nome b { font-weight: 600; font-size: 20px; }


/* ---------- Hero ---------- */
/* padding-bottom em 90px reproduz o que estava inline no <header> do index.html.
   Aquele inline definia o padding inteiro e vencia esta regra, então mexer no
   respiro pelo CSS não surtia efeito nenhum. */
/* Sem fundo próprio: herda o --bg do body, que é o #FBFBFB do site inteiro. */
/* +35px depois da navbar, o MESMO respiro da /planos (dono, 08/10/2026).
   Eram +70px aqui contra +35px no `.page-hero` de planos, e a pill da home
   começava o dobro mais abaixo que a de lá. O resto da pilha já era idêntico
   nas duas folhas (`--nav-h` igual, `.hero-badge` igual, mesmo
   `margin-bottom: 25px`), então o padding era a diferença inteira. */
.hero { position: relative; padding-top: calc(var(--nav-h) + 45px); padding-bottom: 100px; overflow: hidden; background: #FBFBFB; }
/* Altura mínima igual à do hero do gohighlevel.com, medida ao vivo a 1440x900
   (886px, do fim do nav até o começo da seção seguinte deles). Só a partir de
   981px: abaixo disso o hero já empilha texto sobre a imagem do mockup, e uma
   altura mínima fixa nesse ponto sobraria como espaço vazio embaixo do
   conteúdo em vez de ajudar. */
/* Sem min-height. Aqui existiu um min-height: 886px, medido do hero do
   gohighlevel.com, com flex e justify-content: center para distribuir a sobra.
   O hero de lá é bem mais cheio que este: o conteúdo daqui mede 415px, então
   sobravam 281px que a centralização espalhava em volta, e mexer no padding não
   mudava nada na tela. Sem o min-height, a altura volta a ser conteúdo mais
   padding, e os valores de padding voltam a valer literalmente. */
.section-dotgrid { position: relative; }
.section-bg-fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 60%); mask-image: linear-gradient(to bottom, #000 0%, transparent 60%); }
.section-bg-fx .hero-glow { top: -30%; }
.section-bg-fx .mesh-blob-1 { top: 0%; }
.section-bg-fx .mesh-blob-2 { top: 0%; bottom: auto; }
.section-bg-fx .mesh-blob-3 { top: 5%; }
.section-dotgrid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.section-dotgrid > *:not(.section-bg-fx) { position: relative; z-index: 1; }
/* Sem fundo próprio. Aqui existiu o degrade verde escuro que descia até o
   branco, no formato do hero do gohighlevel.com. Saiu junto com os efeitos, e
   a regra ficou só com o posicionamento porque as páginas planos, política e
   termo também usam .hero-bg no cabeçalho delas: enquanto o degrade morava
   aqui, ele vazava para as três sem ninguém ter pedido.

   O degrade em si está guardado na skill gohighlevel-design-system, com as
   posições exatas das paradas, caso volte a ser usado. */
.hero-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 70%);
  opacity: 1;
}
.hero-glow {
  position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 700px;
  background: radial-gradient(ellipse at center, var(--glow) 0%, transparent 60%);
  opacity: 0.2; filter: blur(20px);
}

/* Hero side glows */
.hero-side-l {
  position: absolute;
  left: -80px;
  top: 52%;
  width: 420px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(138, 138, 142,0.32) 0%, transparent 65%);
  filter: blur(80px);
  pointer-events: none;
  animation: meshFloat2 28s ease-in-out infinite;
}
.hero-side-r {
  position: absolute;
  right: -80px;
  top: 52%;
  width: 420px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(138, 138, 142,0.32) 0%, transparent 65%);
  filter: blur(80px);
  pointer-events: none;
  animation: meshFloat2 28s ease-in-out infinite;
}

/* Mesh blobs */
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
  will-change: transform;
}
.mesh-blob-1 {
  width: 680px; height: 480px;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
  top: -15%; left: 25%;
  opacity: 0.18;
  animation: meshFloat1 20s ease-in-out infinite;
}
.mesh-blob-2 {
  width: 480px; height: 400px;
  background: radial-gradient(circle, #B4B4B7 0%, transparent 70%);
  bottom: 5%; left: -8%;
  opacity: 0.13;
  animation: meshFloat2 26s ease-in-out infinite;
}
.mesh-blob-3 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--primary-hi) 0%, transparent 70%);
  top: 15%; right: 2%;
  opacity: 0.1;
  animation: meshFloat3 22s ease-in-out infinite;
}

@keyframes meshFloat1 {
  0%,100% { transform: translate(0px,   0px)   scale(1);    }
  30%      { transform: translate(-50px, 40px)  scale(1.06); }
  65%      { transform: translate(35px,  -30px) scale(0.94); }
}
@keyframes meshFloat2 {
  0%,100% { transform: translate(0px,  0px)   scale(1);    }
  40%      { transform: translate(60px, -50px) scale(1.08); }
  72%      { transform: translate(-40px, 25px) scale(0.96); }
}
@keyframes meshFloat3 {
  0%,100% { transform: translate(0px,   0px)   scale(1);    }
  35%      { transform: translate(-25px, -55px) scale(1.05); }
  68%      { transform: translate(45px,  35px)  scale(0.95); }
}
/* Sem max-width próprio: o hero segue o --maxw do .wrap global, como o resto
   do site. Tinha 1220px, mais estreito que todas as outras seções — o z-index
   e o position seguem, são o que empilha o conteúdo acima
   do fundo animado do hero. */
.hero .wrap { position: relative; z-index: 1; }
/* O padding é simétrico desde que a etiqueta "GANHE" saiu daqui. Ela era uma
   cápsula verde com padding próprio, e por isso o lado esquerdo vinha menor
   (8px contra 14px); com um ícone solto no lugar, aquele recuo deixaria o raio
   grudado na borda. */
/* Ilha escura: o hero voltou a ser escuro enquanto o resto do site é claro,
   então aqui dentro os tokens seguem valendo os valores escuros. Sem isto a
   pill viria com o cinza claro de --surface-2 e a nota de rodapé com o
   --text-subtle preto, ambos ilegíveis sobre o fundo escuro. */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 100px;
  background: transparent; border: 1px solid #00B87340;
  font-size: 14px; font-weight: 500; color: var(--text-muted); margin-bottom: 25px;
}
/* O verde vem para o ícone: era a cápsula que dava o acento de cor da pill, e
   sem ele a peça inteira ficaria cinza sobre cinza. flex-shrink: 0 porque o
   raio não pode espremer quando o texto quebra em telas estreitas.

   12x18 mantém a razão do viewBox, que é 15x23 — quase o dobro de alto que de
   largo. Forçar caixa quadrada nele achataria o desenho. */
.hero-badge-ico { width: 12px; height: 18px; color: var(--green-text); flex-shrink: 0; }
/* Ícone oficial da Meta (logos/meta.svg). 15x10 mantém a razão do viewBox,
   287.56x191. */
.hero-badge-meta { width: 18px; height: 12px; flex-shrink: 0; display: block; }
/* Variante da home: fundo branco, texto na cor do título e borda discreta para atuar
   como um selo discreto de autoridade ao lado da marca Meta. */
.hero-badge-ia {
  max-width: 100%;
  box-sizing: border-box;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: #FFFFFF;
  border: 1px solid #C9C9C9;
  box-shadow: none;
  color: var(--ink);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.hero-badge-ia .hero-badge-meta { transform: translateY(-1px); }
/* Badge operacional da hero: superfície e borda neutras do design system.
   O ícone é o único acento verde e identifica o estado ativo sem transformar
   toda a peça em uma mancha de cor. */
.hero-badge-verde {
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
}
.hero-badge-agent-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--green-text);
}
.hero-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 auto 24px;
  color: var(--neutral-700);
  text-align: left;
}
.hero-social-avatars {
  display: flex;
  align-items: center;
  padding-left: 8px;
}
.hero-social-avatars img {
  width: 32px;
  height: 32px;
  margin-left: -8px;
  border: 2px solid var(--neutral-0);
  border-radius: 50%;
  object-fit: cover;
  background: var(--neutral-100);
}
.hero-social-copy {
  padding-left: 14px;
  border-left: 1px solid var(--neutral-300);
}
.hero-social-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--neutral-900);
  font-size: 13px;
  line-height: 1;
}
.hero-social-stars {
  color: #F6B51B;
  font-size: 17px;
  letter-spacing: 0;
  line-height: 1;
}
.hero-social-rating strong,
.hero-social-copy p strong { font-weight: 700; color: var(--neutral-900); }
.hero-social-copy p {
  margin: 4px 0 0;
  color: var(--neutral-700);
  font-size: 12px;
  line-height: 1.25;
}
.hero-badge .tag { background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 11px; padding: 3px 9px; border-radius: 100px; font-family: var(--mono); letter-spacing: 0.02em; }
/* No desktop a H1 usa 55px fixos. As regras responsivas abaixo reduzem o corpo
   no tablet e no celular para preservar as quebras e evitar transbordamento. */
/* Tracking fixo de -2.5px para manter a compactação visual em todas as larguras. */
.hero h1 { font-size: 55px; letter-spacing: -1.5px; line-height: 1.10; font-weight: 700; color: var(--neutral-900); }
@media (min-width: 981px) {
  .hero h1 { font-size: 50px; font-weight: 700; line-height: 1.05; letter-spacing: -2px; }
  /* A headline usa duas linhas longas. A hero pode ocupar uma faixa maior que
     as seções de conteúdo sem alterar a largura de nenhum outro bloco. */
  .hero.va > .wrap { max-width: 1320px; }
  .hero.va .hero-text { max-width: 1256px; }
}
/* Fora do hero o verde é chapado; dentro dele as palavras destacadas voltam a
   ter o degradê animado, que só funciona sobre fundo escuro. */
.em { color: var(--green-text); }
/* No h1 do hero as palavras destacadas NÃO saem em verde: o título inteiro fica
   na cor de texto padrão. Precisa desta regra explícita: o .em acima pinta de
   verde direto no span, e cor declarada no próprio elemento vence a herança do
   .hero h1, por mais específico que o pai seja. */
.hero h1 .em { color: inherit; }
.hero h1 .hero-h1-green { color: var(--ink); }
/* O efeito de brilho saiu: era um degradê animado que passava pelos verdes
   claros da marca, ilegível sobre branco. Virou verde chapado, o mesmo do .em. */
.em-shine-text {
  color: var(--green-text);
  -webkit-text-fill-color: var(--green-text);
}

@keyframes em-shine {
  to { background-position: -200% center; }
}
.hero-sub { font-size: 18px; color: var(--text-muted); line-height: 1.4; max-width: 600px; margin-top: 23px; letter-spacing: -0.3px; font-weight: 500; }
.hero-desc { font-size: clamp(15px, 1.6vw, 17px); color: var(--text-muted); line-height: 1.4; max-width: 560px; margin-top: 10px; letter-spacing: -0.01em; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; align-items: center; }
/* O font-size fica escopado em .hero: a classe .hero-actions é reaproveitada
   nas seções de implementação e entregáveis, que têm tamanhos próprios de
   botão (16px e 14px, mais abaixo). Sem o .hero na frente, este 15px passaria
   por cima delas. */
.hero-actions .btn { border-radius: 9999px !important; padding: 12px 30px; }
/* O !important repete o da linha acima porque !important só perde para outro
   !important: sem ele, os 9999px da regra anterior venceriam mesmo com este
   seletor sendo mais específico. O botão do hero deixou de ser cápsula e
   passou a ter canto de 10px; os demais .hero-actions seguem redondos. */
.hero .hero-actions .btn { font-size: 16px; border-radius: var(--r-sm) !important; }
/* O espaço vertical em volta dos botões da hero cresceu 15px em cada lado em
   06/10/2026, e cresceu por MARGEM, não por padding. Chegou a ser padding e
   foi revertido no mesmo dia: padding engorda o botão, e o que estava apertado
   era a distância entre a subheadline acima e os três benefícios abaixo.
   Os dois valores estão logo abaixo (.hero .hero-actions) e em
   .hero.va .hero-conversion. */
/* 30px -> 45px: a folga entre a .hero-sub e a fileira de botões. Escopado em
   .hero porque .hero-actions é reaproveitada em #implementacao e em
   #entregaveis, que têm o ritmo próprio deles e não devem andar junto. */
.hero .hero-actions { margin-top: 45px; }
/* Fundo e cor de texto vêm da regra base (.btn-primary): verde --green-text
   chapado com texto branco. Já foram testados e descartados aqui o degradê de
   verde para branco (com o texto preto que ele exigia). */
/* Só o botão do hero sai do neon: o "Teste Grátis" da navbar e os demais CTAs
   do site seguem em --primary com o glow. Este verde é bem mais fechado, então
   o texto vai a branco (4,2:1) e não ao --on-primary quase preto que o neon
   exige. box-shadow: none precisa estar escrito: sem ele o botão herdaria o
   anel e o halo verdes de .btn-primary. */
.hero .hero-actions .btn-primary {
  font-weight: 600;
  /* Sem o aperto de -0.01em que o .btn base aplica. */
  letter-spacing: 0;
  background: var(--green-cta);
  color: #fff;
  box-shadow: none;
}
/* Hover só do hero, um passo mais escuro que o da navbar (--green-cta-hover,
   #009A60). Se os dois tiverem que andar juntos, é trocar por aquele token. */
.hero .hero-actions .btn-primary:hover {
  background: #6C6C6C;
  box-shadow: none;
}
/* Sem regra própria para o botão do hero: ele segue o .btn-primary do site,
   igual ao "Teste Grátis" da navbar (verde --green-text chapado, texto branco,
   sem sombra). Já foram testados e descartados aqui o degradê animado com anel
   e glow, e o verde neon com texto preto. */
.hero-actions .btn-secondary { border: 1px solid var(--neutral-300); }
.hero-calendar-icon { flex-shrink: 0; }
.hero-note { font-size: 15px; color: var(--text-subtle); margin-top: 18px; display: flex; align-items: center; gap: 8px; }
.hero-note svg { width: 15px; height: 15px; color: var(--green-text); }

.hero.va { text-align: center; }
.hero.va .hero-text {
  width: 100%;
  /* A headline atual é mais longa e precisa aproveitar a largura útil da
     página também no intervalo de tablet horizontal. */
  max-width: 1136px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero.va .hero-sub { margin-left: auto; margin-right: auto; }
.hero.va .hero-desc { margin-left: auto; margin-right: auto; }
.hero.va .hero-actions { justify-content: center; }
.hero.va .hero-note { justify-content: center; }
.hero.va .hero-badge { margin-left: auto; margin-right: auto; }
.hero .hero-badge { margin-bottom: 24px; }
.recursos-title-mobile { display: none; }
/* A Home é a única exceção ao ritmo geral de 29px entre pill e título: usa
   24px para aproximar a nova pill da H1 sem afetar as demais seções. */
.hero.va .hero-mockup-wrap { max-width: 100%; margin-top: 56px; }
.hero.va .hero-conversion { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 47px; }  /* 32px -> 47px em 06/10/2026 (+15px) */
.hero.va .hero-conversion .hero-note { margin-top: 0; }
/* A lista saiu do fim do hero (depois do mockup) para logo abaixo dos botões,
   dentro do .hero-text, em 05/10/2026. A mudança de lugar obrigou a mudar o
   layout, e não é preferência: o .hero-text tem max-width de 900px, enquanto
   esta lista tinha 1060px e três colunas IGUAIS de 1fr. Em 900px cada coluna
   cairia para 277px, e o item mais longo ("Garantia incondicional de 30 dias",
   com o ícone de 48px e o gap de 18px na frente) pede mais do que isso. Com
   `white-space: nowrap` nos itens, o texto vazaria da coluna.

   Flex resolve porque dimensiona cada item pelo conteúdo em vez de dividir a
   largura em partes iguais: os três juntos somam menos que os 900px, mesmo o
   longo precisando mais do que um terço. O flex-wrap é o seguro: se um dia a
   copy crescer, a linha quebra em vez de estourar. */
.hero-benefits {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px;
}
.hero-benefit {
  min-width: 0;
  /* Sem isto o flex-wrap do pai nunca entraria em ação: com flex-shrink no
     padrão (1), os itens comprimem abaixo do conteúdo e o texto, que é
     `nowrap`, vaza da caixa em silêncio. Com 0 eles mantêm a largura do
     conteúdo e, se a soma passar do container, a linha quebra. */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  color: #626670;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
}
.hero-benefit-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-100);
  /* Sem borda, de propósito (05/10/2026): neste tom de preenchimento a caixa
     se sustenta sozinha, e o contorno só acrescentava uma linha. A regra base
     do site não declara borda em lugar nenhum aqui, então não há nada a
     anular; se precisar de volta, é `border: 1px solid #A5F3D9`. */
  color: var(--verde-tinta);
}
.hero-benefit-icon svg { width: 20px; height: 20px; }
.hero-mockup-wrap, .hero-glow, .hero-badge { will-change: transform; }


/* ---------- Faixa de provas · esteira de cases ---------- */
/* Fica fora do .wrap, como filha direta do <header class="hero">: assim os
   cards vão até a borda da tela em vez de parar no max-width do container. O
   .hero já tem overflow: hidden, então nada disso vaza para os lados. */
/* O movimento contínuo é feito em JS mexendo no scrollLeft, e não com uma
   animação de transform. Motivo: transform e rolagem nativa disputam o mesmo
   eixo, e com transform o dedo do usuário não teria o que arrastar. Movendo o
   scrollLeft, a esteira anda sozinha e o arrasto é o mesmo scroll — as duas
   coisas convivem na mesma propriedade. Ver main.js, bloco "Esteira de cases". */
.hero-cases {
  margin-top: 130px;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* Barra de rolagem escondida nos três motores. Os próprios cards cortados nas
     bordas mostram que há mais conteúdo; a máscara foi removida para a faixa
     ocupar visualmente toda a largura da tela. */
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.hero-cases::-webkit-scrollbar { display: none; }
.hero-cases.arrastando { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.cases-linha { display: flex; width: max-content; }
/* O respiro entre cards é margin-right no card, não gap na linha. Com gap, a
   largura total fica cardW*2N + gap*(2N-1) e o translate de -50% erra por meio
   gap a cada volta, o que aparece como um solavanco no ponto da emenda. Com
   margin cada card mede cardW+gap, a metade cai exatamente na emenda. */
.case-card {
  position: relative; flex-shrink: 0;
  width: 300px; height: 430px; margin-right: 20px;
  border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Fundo de reserva: aparece enquanto não houver foto no lugar. O onerror do
     <img> remove a imagem quebrada e deixa este degrade à mostra. */
  background: linear-gradient(160deg, #1F2C27 0%, #0A120F 100%);
}
.case-foto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
/* Véu para o texto sobreviver a qualquer foto: escuro embaixo, onde ficam o
   nome e os números, e um toque de escuro no topo por causa da pill. */
.case-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(4, 10, 8, 0.93) 0%,
    rgba(4, 10, 8, 0.60) 38%,
    rgba(4, 10, 8, 0.08) 62%,
    rgba(4, 10, 8, 0.38) 100%);
}
.case-tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 8px;
  background: rgba(8, 16, 13, 0.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px; font-weight: 500; color: #FFFFFF; letter-spacing: -0.01em;
}
.case-tag svg { width: 14px; height: 14px; flex-shrink: 0; }
.case-info { position: relative; z-index: 2; padding: 22px; }
.case-empresa { font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: #FFFFFF; }
.case-nums {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
}
/* tabular-nums trava a largura dos dígitos: sem isso as duas colunas dançam
   quando um número troca de 5 para 41. */
.case-nums b { display: block; font-family: var(--display); font-size: 25px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.case-nums span { display: block; margin-top: 7px; font-size: 12px; line-height: 1.25; color: rgba(255, 255, 255, 0.62); }
/* Bolinhas indicadoras. Ficam fora do .hero-cases: dentro dele elas entrariam
   na área de rolagem e sairiam de cena junto com os cards. */
.cases-pontos { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 26px; }
.cases-ponto {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 100px;
  background: rgba(0, 0, 0, 0.15); cursor: pointer;
  transition: width .28s cubic-bezier(0.2, 0.8, 0.2, 1), background .28s;
}
.cases-ponto:hover { background: rgba(0, 0, 0, 0.32); }
.cases-ponto.ativo { width: 26px; background: var(--green-text); }
.cases-ponto:focus-visible { outline: 2px solid var(--green-text); outline-offset: 3px; }
/* Alvo de toque de 44px sem engordar a bolinha: a área clicável cresce por um
   pseudo-elemento invisível em volta. */
.cases-ponto { position: relative; }
.cases-ponto::after { content: ''; position: absolute; inset: -18px -9px; }

/* Sem bloco de prefers-reduced-motion aqui: quem pede menos movimento não perde
   os cards, só o avanço automático. Esse desligamento é feito no main.js, e a
   esteira continua rolável pelo dedo, pelo trackpad e pelo arrasto. */

.hero.vb .hero-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: flex-start; }
.hero.vb .hero-mockup-wrap { margin-top: 0; max-width: 100%; align-self: center; }
.hero.vb .hero-text { display: flex; flex-direction: column; align-items: flex-start; }
.hero.vb .hero-sub { max-width: 100%; }
.hero.vb .hero-badge { margin-left: 0; margin-right: 0; }

.hero.vc { text-align: center; }
.hero.vc .hero-sub, .hero.vc .hero-badge { margin-left: auto; margin-right: auto; }
.hero.vc .hero-actions { justify-content: center; }
.hero.vc .hero-note { justify-content: center; }


.hero-inner { position: relative; }

/* ---------- App mockup ---------- */
/* Ilha escura. Os mockups são print da interface do produto, que é escura. O
   container redefine os tokens localmente, então o CSS e o mockups.js seguem
   pedindo var(--surface) e recebem o valor escuro. */
.mockup, .feature-visual {
  --bg: var(--dark-bg);
  --bg-deep: var(--dark-bg-deep);
  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
  --border: var(--dark-border);
  --text: var(--dark-text);
  --text-muted: var(--dark-text-muted);
  --text-subtle: var(--dark-text-subtle);
  color: var(--dark-text);
}
.mockup {
  position: relative; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border-2);
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  overflow: hidden;
}
.mockup-glow { position: absolute; top: -40%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, var(--glow) 0%, transparent 65%); opacity: 0.3; pointer-events: none; }
.mockup-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mockup-dot { width: 11px; height: 11px; border-radius: 50%; }
.mockup-bar .addr { margin-left: 14px; font-family: var(--mono); font-size: 11px; color: var(--text-subtle); background: var(--bg); padding: 5px 14px; border-radius: 7px; flex: 1; max-width: 280px; }
.mockup-body { display: flex; min-height: 360px; }
.mk-rail { width: 52px; background: var(--bg-deep); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 4px; flex-shrink: 0; }
.mk-rail .mk-logo { width: 30px; height: 30px; border-radius: 9px; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: var(--on-primary); letter-spacing: -0.04em; margin-bottom: 10px; }
.mk-rail .mk-nav { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--text-subtle); }
.mk-rail .mk-nav.on { background: rgba(138, 138, 142,0.14); color: var(--primary); }
.mk-rail .mk-nav svg { width: 17px; height: 17px; }
.mk-main { flex: 1; padding: 16px; min-width: 0; }
.mk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mk-title { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.mk-sub { font-size: 10px; color: var(--text-subtle); margin-top: 2px; font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.mk-btn { background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 600; padding: 7px 12px; border-radius: 8px; box-shadow: 0 0 14px var(--glow-soft); }
.mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.mk-kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.mk-kpi .l { font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); }
.mk-kpi .v { font-size: 17px; font-weight: 600; letter-spacing: -0.03em; margin-top: 3px; }
.mk-kpi .d { font-family: var(--mono); font-size: 9px; color: var(--primary); }
.mk-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.mk-col-h { display: flex; align-items: center; gap: 6px; padding: 2px 4px 8px; }
.mk-col-h .dot { width: 6px; height: 6px; border-radius: 50%; }
.mk-col-h .n { font-size: 10px; font-weight: 600; }
.mk-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 6px; }
.mk-card .row1 { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.mk-av { width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 700; color: #fff; }
.mk-card .nm { font-size: 9.5px; font-weight: 500; }
.mk-card .vl { font-size: 11px; font-weight: 600; color: var(--primary); letter-spacing: -0.02em; }

/* ---------- Metrics band ---------- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.metric { padding: 40px 32px; border-right: 1px solid var(--border); position: relative; }
.metric:last-child { border-right: none; }
.metric .v { font-size: 52px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--green-text); }
.metric .l { font-size: 14px; color: var(--text-muted); margin-top: 12px; letter-spacing: -0.01em; }

/* ---------- Features ---------- */
/* Cinza bem claro, mais leve que o --surface (#F6F6F6) dos demais cards. Com
   um tom tão perto do branco da seção, é a borda que garante o recorte do
   card; sem ela o bloco praticamente desapareceria no fundo.

   Sem padding e sem gap de propósito: o mockup precisa encostar nas bordas do
   card do lado dele, e um padding no card empurraria os dois lados. Quem dá o
   respiro agora é o padding do .feature-text, só do lado do texto. O overflow
   recorta o mockup nos cantos arredondados do card.

   align-items passou de center para stretch para a coluna do mockup ter a
   altura cheia do card; com center ela ficaria centralizada e sobraria faixa
   de fundo em cima e embaixo. */
/* Cada recurso volta a ser apresentado como um card único: texto e motion
   compartilham a mesma superfície branca, com uma moldura discreta para se
   destacar do fundo da seção. */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 50px;
  padding: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--neutral-0);
  box-shadow: 0 20px 45px -38px rgba(29, 29, 29, .32);
}
.feature-text { padding: 120px 40px; align-self: center; }
.feature-row:last-child { margin-bottom: 0; }
.feature-row.flip .feature-text { order: 2; }
/* Só o desenho, sem a caixa: saíram fundo, borda e radius. A largura fixa de
   40px saiu junto — sem moldura visível ela viraria 10px de vazio de cada lado
   do SVG de 20px, e o gap de 16px do .feature-heading pareceria maior do que é.
   Agora a caixa encolhe no ícone e o gap conta a partir do próprio desenho. */
.feature-icon { display: flex; align-items: center; justify-content: center; color: var(--green-text); margin-bottom: 24px; flex-shrink: 0; }
.feature-icon svg { width: 26px; height: 26px; }
.feature-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.feature-text .feature-heading h3 { margin-bottom: 0; align-self: center; }
.feature-heading .feature-icon { margin-bottom: 0; align-self: center; color: var(--hl-fg, var(--green-text)); }
.feature-text h3 { font-size: 30px; letter-spacing: -0.025em; margin-bottom: 16px; line-height: 1.2; font-weight: 600; }
/* Tema de cor do card: declarado no .feature-text para alcançar os três que o
   usam — o ícone, a palavra em destaque no título e a seta do rodapé. */
/* Uma cor por recurso, de volta em 06/10/2026. Cada linha de #recursos tem a
   sua, e a pastilha do .hl e o ícone do cabeçalho leem o par daqui. As cinco
   tinham virado o mesmo cinza na passagem para escala de cinza, e com elas a
   seção perdeu o único sinal que dizia "este é outro recurso" antes de a pessoa
   ler o título.

   DOIS TONS FORAM ESCURECIDOS em relação aos originais, e só em VALOR: o matiz
   é o mesmo. O laranja era #EA580C e dava 3,19:1 sobre a própria pastilha, e o
   azul era #0284C7 com 3,65:1. Os dois passavam nos 3:1 de texto grande e
   raspavam o mínimo, enquanto verde, roxo e rosa estavam entre 4,7 e 5,5. Agora
   os cinco ficam na mesma faixa:

     verde    #067A4B sobre #DFF6EC   4,76:1
     laranja  #C2410C sobre #FEF0E6   4,64:1   (era #EA580C, 3,19:1)
     azul     #0369A1 sobre #E6F4FE   5,29:1   (era #0284C7, 3,65:1)
     roxo     #7C3AED sobre #F3EDFE   4,98:1
     rosa     #BE185D sobre #FDF2F7   5,53:1

   A folga importa aqui: o h3 cai para 24px no celular, que é exatamente o piso
   de "texto grande". Um ponto abaixo disso e a régua vira 4,5:1, e nessa faixa
   os cinco continuam passando. */
.tema-verde   { --hl-fg: #067A4B; --hl-bg: #DFF6EC; }
.tema-laranja { --hl-fg: #C2410C; --hl-bg: #FEF0E6; }
.tema-azul    { --hl-fg: #0369A1; --hl-bg: #E6F4FE; }
.tema-roxo    { --hl-fg: #7C3AED; --hl-bg: #F3EDFE; }
.tema-rosa    { --hl-fg: #BE185D; --hl-bg: #FDF2F7; }
/* box-decoration-break: clone mantem o radius nas duas pontas se a palavra quebrar linha. */
.feature-text .hl { color: var(--hl-fg); background: var(--hl-bg); padding: 0.10em 0.25em; border-radius: 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.feature-text p { font-size: 16px; color: var(--text-muted); line-height: 1.4; margin-bottom: 24px; }
/* Seta circle-arrow-right (Lucide), desenhada inline como os demais ícones do
   site em vez de carregar a biblioteca.

   Parágrafo e seta na mesma linha, a seta empurrada para a direita pelo
   space-between e centralizada na altura do texto. flex-shrink evita que ela
   esprema quando o parágrafo é longo. O respiro de baixo sai do <p> e vai para
   o .feature-foot: com align-items: center o flex centraliza a caixa de margem,
   e a margem no parágrafo empurraria a seta uns 12px para baixo do centro
   óptico do texto. */
.feature-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.feature-foot p { margin-bottom: 0; }
.feature-arrow { display: flex; flex-shrink: 0; color: var(--hl-fg, var(--green-text)); }
/* Traço pelo CSS, não pelo atributo do SVG: fica num lugar só, em vez de
   repetido nos 4 cards. O valor é medido no sistema do viewBox (24x24) e o
   ícone renderiza a 40px, então cada unidade aparece ~1.67x maior na tela.
   O círculo externo leva um traço menor que a seta de dentro, por ser um
   elemento próprio dentro do SVG. */
.feature-arrow svg { width: 40px; height: 40px; stroke-width: 1; }
.feature-arrow svg circle { stroke-width: 0.6; }
.feature-list { display: flex; flex-direction: column; gap: 12px; }
.feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--text); list-style: none; }
.feature-list li svg { width: 20px; height: 20px; color: var(--green-text); flex-shrink: 0; margin-top: 1px; }
/* Mesmo tratamento que o painel de chat tinha na seção de agentes: moldura
   própria com canto arredondado, em vez de meia-face recortada pelo card que
   não existe mais. O overflow recorta o painel interno, que é absolute. */
.feature-visual {
  position: relative;
  align-self: stretch;
  display: flex;
  /* No desktop, preserva a altura da linha para o ritmo da seção, mas deixa
     cada motion 20px mais compacto (10px de respiro em cima e embaixo). Os
     painéis React preenchem o espaço restante e acompanham o novo tamanho. */
  margin-block: 10px;
  overflow: hidden;
  border: 1px solid #E7E7E7;
  border-radius: 20px;
  background: #FAFAFA;
  box-shadow: 0 24px 55px -34px rgba(29, 29, 29, .3);
}
/* O Dashboard ganhou uma linha interna de 1px, além da moldura do slot. Os
   demais motions repetem esse mesmo acabamento para a seção ler como um único
   conjunto de produtos. */
.feature-visual .painel-wpp,
.feature-visual .painel-automacao,
.feature-visual .painel-pipeline,
.feature-visual .painel-disparos {
  border: 1px solid #E4E4E4;
  border-radius: 16px;
}
.feature-visual > * { flex: 1; min-width: 0; }



/* Degradê no título da seção, recortado no texto. Mesma técnica do
   .em-shine-text: o degradê é pintado na caixa e o background-clip: text o
   recorta nos glifos, com o preenchimento transparente para deixá-lo aparecer.

   display: inline-block é o que faz o degradê valer a pena aqui. O h2 é bloco e
   ocupa os 900px do .section-head, mas o texto é centralizado e ocupa bem menos;
   como o degradê é pintado na caixa inteira, o texto só enxergaria a faixa do
   meio e o efeito quase sumiria. Com inline-block a caixa encolhe até o texto e
   o degradê percorre exatamente as palavras.

   O trecho em verde não é afetado: o .em-shine-text tem o próprio
   background-clip e o próprio -webkit-text-fill-color, que pintam por cima. */
/* O degradê recortado no texto saiu daqui. Com ele foram embora o
   background-clip e o -webkit-text-fill-color: transparent, que existiam só
   para deixá-lo aparecer; sem desligar os dois, o título ficaria invisível.
   O display: inline-block também perdeu a função (servia para a caixa
   encolher até o texto e o degradê percorrer as palavras), então voltou a ser
   bloco como qualquer outro título.

   A entrelinha fica em proporção, não em pixel fixo: estava em 52px, que dava
   a razão certa nos 40px do desktop mas não acompanhava a fonte, e no mobile
   o .h2 cai para 32px. */
/* Sem font-size aqui: a fórmula de corpo fluido que existia neste bloco servia
   para segurar as duas linhas fixas do <br>. Sem o <br> o título quebra sozinho
   onde couber, e a fórmula só encolheria o texto à toa nas telas médias. Abaixo
   de 560px ele passa a usar os 30px do .h2, como os títulos das outras seções. */
#recursos .h2 {
  font-weight: 600;
  line-height: 1.05;
}
@media (min-width: 981px) {
  #recursos .recursos-desktop-green { color: var(--green-text); }
}
@media (max-width: 980px) {
  #recursos .recursos-desktop-break { display: none; }
}
/* Sem degradê nos títulos dos cards: eles saem na cor de texto padrão. Junto
   com o background foram embora o background-clip e o
   -webkit-text-fill-color: transparent, que existiam só para o degradê
   aparecer e, deixados para trás, apagariam os títulos. */

/* As regras específicas de #recursos que existiam aqui saíram: elas escureciam
   o texto dessa seção quando ela era a única clara do site. Agora o site
   inteiro é claro, os tokens globais já entregam preto no título e #575757 no
   corpo, e manter os overrides seria uma segunda fonte de verdade dizendo a
   mesma coisa. */

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: border-color .2s, transform .2s; }
.step:hover { border-color: var(--border-active); transform: translateY(-3px); }
.step-num { font-family: var(--mono); font-size: 13px; color: var(--green-text); margin-bottom: 18px; letter-spacing: 0.1em; }
.step-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--green-text); margin-bottom: 18px; }
.step-icon svg { width: 22px; height: 22px; }
.step h3 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 8px; font-weight: 700; }
.step p { font-size: 16px; color: var(--text-muted); line-height: 1.55; }
.step-arrow { position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); z-index: 2; }
.step-arrow svg { width: 20px; height: 20px; }

/* ---------- Feature cards ---------- */
.fcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 80px; }
.fcard { padding: 32px 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: border-color .2s, transform .2s; position: relative; overflow: hidden; }
.fcard:hover { border-color: var(--border-active); transform: translateY(-3px); }
.fcard .fc-glow { position: absolute; top: -40%; right: -20%; width: 220px; height: 220px; background: radial-gradient(circle, var(--glow-soft), transparent 65%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.fcard:hover .fc-glow { opacity: 1; }
.fcard h3 { font-size: 21px; letter-spacing: -0.025em; margin-bottom: 10px; line-height: 1.1; font-weight: 700; }
.fcard p { font-size: 14.5px; color: var(--text-muted); line-height: 1.55; }

/* ---------- Marquee ---------- */
.marquee { position: relative; padding: 16px 32px; }
.marquee-track { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
/* A borda colorida era um truque de dois backgrounds: um em padding-box para
   o miolo e um degradê da cor da marca em border-box, aparecendo pela borda
   transparente. Saiu inteiro; agora é uma borda de 1px de verdade. */
.mq-item { display: flex; align-items: center; padding: 10px 20px; border-radius: 15px; white-space: nowrap; flex-shrink: 0; border: 1px solid var(--border); background: #fff; }
.mq-item .ico { padding: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.mq-item .ico svg { width: 30px; height: 30px; }
.mq-item .ico img { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; }

/* ---------- Benefits carousel ---------- */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; touch-action: pan-y; }
.carousel-track { display: flex; gap: 20px; transition: transform .5s cubic-bezier(0.2,0.8,0.2,1); cursor: grab; }
.carousel-track.dragging { transition: none; cursor: grabbing; }
.carousel-track.dragging .bcard { pointer-events: none; }
.carousel-arrow.carousel-arrow-edge { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: transparent; border: none; box-shadow: none; }
.carousel-arrow.carousel-arrow-edge:hover { border-color: transparent; color: var(--text); transform: translateY(-50%); }
.carousel-arrow-edge.carousel-arrow-left { left: 0; }
.carousel-arrow-edge.carousel-arrow-right { right: 0; }
@media (max-width: 560px) {
  #recursos .h2 { font-size: clamp(25px, 8vw, 35px); letter-spacing: -1.6px; }
  #recursos .recursos-mobile-green { color: var(--green-text); }
  /* A marca escrita VOLTA no celular (06/10/2026, pedido do dono). Ela estava
     escondida aqui porque disputaria espaço com o CTA, e a barra nessa faixa
     carrega logo + nome + "Começar 7 dias grátis" + o botão de menu: os links e
     o "Entrar" já saem antes, em 980px.

     Por isso ela vem um degrau menor, 17px em vez de 18px, e volta a sumir
     abaixo de 380px. Os 380px não são chute: é onde a soma do nome com o CTA
     passa a empurrar o botão de menu para fora em telas como o iPhone SE. Entre
     380 e 560 a marca aparece, que é a faixa da maioria dos aparelhos. */
  .nav .logo-nome { font-size: 17px; }
  /* O par acompanha com o mesmo degrau de 2px do desktop. */
  .nav .logo-nome b { font-size: 19px; }
  .carousel-arrow-edge { width: 38px; height: 38px; }
  .carousel-arrow-edge svg { width: 16px; height: 16px; }
}
.bcard { flex: 0 0 calc((100% - 40px) / 3); border-radius: var(--r-lg); background: var(--surface); padding: 32px; display: flex; flex-direction: column; gap: 18px; min-height: 412px; position: relative; overflow: hidden; }.bcard .b-num { font-family: var(--mono); font-size: 12px; color: #525154; letter-spacing: 0.1em; position: relative; }
.bcard .b-icon { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--green-text); position: relative; box-shadow: none; }
.bcard .b-icon svg { width: 24px; height: 24px; }
.bcard h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; position: relative; margin-top: auto; font-weight: 700; }
.carousel-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; transition: all .15s; }
.carousel-arrow:hover { border-color: var(--border-active); color: var(--green-text); transform: translateY(-2px); }
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-dots { display: flex; gap: 8px; align-items: center; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); transition: all .2s; cursor: pointer; }
.carousel-dot.active { background: var(--primary); width: 24px; border-radius: 100px; box-shadow: 0 0 10px var(--glow-soft); }
.carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }

/* ---------- Client segments grid ---------- */
/* Cartão de ícone + título + descrição, no lugar da foto de fundo com legenda
   em cápsula que era o design anterior. O tile do ícone repete de propósito os
   valores de .bcard .b-icon (mesmo tamanho, radius, superfície e glow interno)
   — é o mesmo vocabulário visual que a seção de Suporte já usa duas dobras
   abaixo, então as duas passam a ler como uma família em vez de dois sistemas
   soltos.

   7 segmentos + o card final = 8, por isso a grade é 4 colunas (2 linhas
   parelhas) e não mais 3. Os cards não têm mais aspect-ratio fixo: com título
   e descrição de tamanhos variados, uma caixa 4:3 rígida cortaria texto longo
   e sobraria vazio no texto curto — melhor deixar a altura nascer do
   conteúdo, e a própria grade estica cada linha para bater com o card mais
   alto dela. O card final acompanha, pelo mesmo motivo. */
.seg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* Altura igual nos 8 cards. Dentro de uma linha o grid já iguala pelo mais
   alto, mas são duas linhas de quatro, e nada faz a segunda bater com a
   primeira. O min-height, e não height, deixa o card crescer se uma descrição
   nova for maior, em vez de o texto vazar. */
.seg-card, .seg-cta { min-height: 230px; }
.seg-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border-2); background: #FFFFFF;
  transition: border-color .2s, transform .2s, background .2s;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px;
}
.seg-card:hover { border-color: var(--border-active); background: var(--surface-2); transform: translateY(-3px); }
/* Fundo verde bem claro derivado do próprio --green-text a 12%, em vez de um
   hex claro novo: acompanha a cor da marca numa troca futura. A borda cinza
   saiu — sobre o verde ela cortava a peça em duas cores sem necessidade. */
.seg-card .seg-icon { width: 48px; height: 48px; border-radius: var(--r-md); background: rgba(138, 138, 142, 0.12); border: none; display: flex; align-items: center; justify-content: center; color: var(--green-text); box-shadow: none; flex-shrink: 0; }
.seg-card .seg-icon svg { width: 24px; height: 24px; }
.seg-card h3 { margin-top: 18px; font-size: 20px; letter-spacing: -0.01em; line-height: 1.2; font-weight: 600; }
.seg-card p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--text-muted); }
.seg-cta { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-active); background: linear-gradient(150deg, rgba(138, 138, 142,0.16), var(--surface) 55%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; gap: 18px; }
.seg-cta .seg-cta-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 75%); mask-image: radial-gradient(ellipse at center, #000, transparent 75%); opacity: 0.5; }
.seg-cta > * { position: relative; z-index: 1; }
.seg-cta h3 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; font-weight: 600; }
.seg-cta p { font-size: 14px; color: var(--text-muted); max-width: 220px; }

/* Nenhum efeito verde de fundo no site: glows, blobs, tints e grades saem de
   cena e as seções ficam no branco chapado. As regras originais continuam
   abaixo para histórico, mas estas as desligam em um lugar só, sem precisar
   mexer no HTML de 4 páginas. */
/* O hero está fora desta lista: ele voltou a ser escuro e os efeitos dele
   fazem sentido de novo. Os seletores abaixo miram só o que sobrou em seção
   clara. A .page-hero das outras páginas segue sem efeito, porque o cabeçalho
   delas continua branco. */
.page-hero .hero-glow, .page-hero .hero-side-l, .page-hero .hero-side-r,
.page-hero .mesh-blob, .page-hero .hero-grid,
.impl-blob, .impl-bg-grid, .demo-side-l, .demo-side-r,
.cta-final-glow, .cta-final-grid, .mockup-glow, .fcard .fc-glow,
.tint-left::before, .tint-right::before, .tint-center::before,
.section-dotgrid::after { display: none !important; }


@media (max-width: 980px) {
  .fcards { grid-template-columns: 1fr; }
  .bcard { flex: 0 0 calc((100% - 20px) / 2); }
  .seg-grid { grid-template-columns: repeat(2, 1fr); }
  .seg-card, .seg-cta { min-height: 200px; }
}
@media (max-width: 560px) {
  /* No celular o trecho em degradê volta a ser inline: como inline-block ele
     não parte no meio e descia inteiro para a linha seguinte, deixando um
     buraco no fim da linha anterior. Inline, o texto flui contínuo. */
  .grad-verde { display: inline; }
  .bcard { flex: 0 0 100%; }
  .seg-grid { grid-template-columns: 1fr; }
  .seg-card, .seg-cta { min-height: 0; }
  .carousel-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Comparison ---------- */
.compare { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 18px 24px; text-align: left; border-bottom: 1px solid var(--border); }
.compare-table thead th { background: var(--surface-2); font-size: 13px; font-weight: 500; color: var(--text-muted); font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.compare-table thead th.us { color: var(--green-text); }
.compare-table tbody td { font-size: 15px; }
.compare-table tbody td:first-child { color: var(--text-muted); }
.compare-table .col-us { background: rgba(29, 29, 29, 0.0275); }
.compare-table td.center { text-align: center; }
.compare-table td svg { width: 20px; height: 20px; margin: 0 auto; }
.chk { color: var(--green-text); }
.no { color: var(--text-subtle); }

/* ---------- Testimonials ---------- */
/* Grade de 3 colunas — usada só em planos.html; na home os depoimentos
   viraram esteira (.dep-esteira). */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* ---------- Selo de avaliação do Google ---------- */
/* Uma linha só, acima do título da seção de depoimentos. `inline-flex` e não
   `flex`: assim a caixa encolhe até o conteúdo e o `center` do .section-head
   centraliza a linha inteira, em vez de esticá-la de ponta a ponta. */
.selo-google {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 16px;
  font-size: 15px; color: var(--text-subtle);
  /* Em tela estreita a linha quebra em vez de estourar a largura. */
  flex-wrap: wrap; justify-content: center;
}
/* O <img> vira bloco para não carregar a folga que o navegador reserva embaixo
   de imagem inline, que aqui desalinharia o G do resto da linha. */
.selo-google img { display: block; width: 20px; height: 20px; }
/* "Excelente" e "5.0" no preto dos títulos: são a informação, o resto é apoio. */
.selo-google strong { font-weight: 600; color: var(--ink); }

.selo-estrelas { display: inline-flex; align-items: center; gap: 2px; color: var(--green-text); }
/* As estrelas ficam um ponto acima do texto para o miolo delas alinhar com a
   altura-x das letras, e não com a linha de base. */
.selo-estrelas svg { width: 17px; height: 17px; display: block; }

.selo-sep { color: var(--border-2); }
.selo-qtd { color: var(--text-subtle); }

@media (max-width: 560px) {
  .selo-google { font-size: 14px; gap: 7px; }
  .selo-estrelas svg { width: 15px; height: 15px; }
}

.tcard { padding: 25px; border-radius: 12px; background: #FFFFFF; border: 1px solid #D1D5DB; display: flex; flex-direction: column; justify-content: center; gap: 20px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.tcard:hover { border-color: rgba(0,0,0,0.18); transform: translateY(-3px); }
.tcard .quote { font-size: 15px; line-height: 1.55; letter-spacing: -0.01em; color: #1a1a1a; }
.tcard .quote .hl { color: #111; font-weight: 700; }
.tcard .who { display: flex; align-items: center; gap: 12px; }
.tcard .who .av { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: #fff; flex-shrink: 0; object-fit: cover; }
.tcard .who .nm { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #111; }
.tcard .who .rl { font-size: 12px; color: #666; }
/* margin-left auto empurra o ícone para a direita e o mantém centrado nas duas
   linhas de nome e cargo, sem precisar de posicionamento absoluto. */
.tcard .who-google { display: block; width: 18px; height: 18px; margin-left: auto; flex-shrink: 0; }
.tcard .stars { display: flex; gap: 0; color: var(--dourado); }
.tcard .stars svg { width: 19px; height: 19px; margin-right: -2px; }

/* ---------- Pricing ---------- */
.price-toggle { display: flex; width: 300px; align-items: center; gap: 3px; padding: 4px; border-radius: 100px; background: var(--surface-2); border: 1px solid rgba(138, 138, 142, 0.20); margin: 0 auto 56px; }
.price-toggle button { font-size: 14px; font-weight: 500; padding: 9px 9px; border-radius: 100px; color: var(--text-muted); transition: all .15s; display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.price-toggle button.active { background: var(--primary); color: #FFFFFF; font-weight: 600; }
.price-toggle .save { font-size: 10px; padding: 2px 5px; border-radius: 100px; background: rgba(138, 138, 142,0.16); color: #525154; letter-spacing: 0.02em; }
.price-toggle button.active .save { background: rgba(255,255,255,0.22); color: #FFFFFF; }

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.pcard { padding: 32px; border-radius: var(--r-xl); background: #FFFFFF; border: 2px solid var(--border-2); display: flex; flex-direction: column; gap: 24px; position: relative; transition: border-color .2s, transform .2s; text-align: left; }
.pcard:hover { transform: translateY(-4px); border-color: var(--border-active); }
/* Sombra verde e discreta: é o único card com sombra, então ela é o que
   diferencia o plano em destaque. Em preto, marcava demais; no verde da marca e
   com opacidade baixa, vira um halo em vez de peso. */
.pcard.featured { border-color: var(--border-active); background: #FFFFFF; box-shadow: 0 2px 6px rgba(138, 138, 142, 0.10), 0 16px 40px rgba(138, 138, 142, 0.14); }
/* O selo sai de cima da borda e passa a acompanhar o nome do plano. Vira
   ::after do .pname para ficar na mesma linha do texto: como pseudo-elemento do
   próprio título, ele herda a linha em vez de precisar de posicionamento. Sem
   fundo, o verde do texto é o que o distingue. */
.pcard.featured .pname::after { content: "MAIS ESCOLHIDO"; display: inline-block; margin-left: 12px; padding: 5px 12px; border: 1px solid var(--primary); border-radius: 100px; color: var(--green-text); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; vertical-align: middle; }
.pcard .pname { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; }
.pcard .pdesc { font-size: 15px; color: var(--text-muted); margin-top: 4px; }
.pcard .price-block { display: flex; flex-direction: column; gap: 4px; }
.pcard .pprice { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.pcard .pprice .cur { font-size: 20px; font-weight: 500; color: var(--text-muted); }
.pcard .pprice .amt { font-size: 35px; font-weight: 600; letter-spacing: -0.04em; }
.pcard .pprice .per { font-size: 15px; color: var(--text-subtle); }
.pcard .pprice .pperiod { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 100px; background: rgba(138, 138, 142,0.16); color: #525154; letter-spacing: 0.02em; margin-left: auto; }
.pcard .pprice-savings { font-size: 14px; font-weight: 500; color: var(--green-text); display: flex; align-items: baseline; gap: 6px; }
.pcard .pprice-savings:empty { display: none; }
.pcard .pprice-savings s { color: var(--red); text-decoration-color: var(--red); font-weight: 600; font-size: 16px; }
.pcard .pprice-recurring { font-size: 13.5px; color: var(--text-subtle); min-height: 16px; }
/* O .btn-pontos é inline-flex e encolhe no texto; dentro do card ele precisa
   ocupar a linha inteira, papel que o .btn-block fazia no botão anterior. */
.pcard .btn-pontos { width: 100%; }
.pcard .pfeats { display: flex; flex-direction: column; gap: 13px; }
.pcard .pfeats li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; color: var(--text-muted); list-style: none; line-height: 1.45; }
.pcard .pfeats li svg { width: 18px; height: 18px; color: var(--green-text); flex-shrink: 0; margin-top: 1px; }
.pcard .pfeats li b { color: var(--text); font-weight: 600; }
/* O primeiro item é o limite que define o plano (membros): sai maior que os
   demais e o número recebe o degradê verde. Mesma regra do app. */
.pcard .pfeats li:first-child { font-size: 17px; }
.pcard .pfeats li:first-child b { font-weight: 700; }

/* Pricing: três planos simultâneos, com um único controle de período.
   Estilos locais para manter a página /planos e as demais seções intactas. */
.rz-pricing {
  --rz-ink: var(--text);
  --rz-muted: var(--text-muted);
  --rz-line: var(--border-2);
  --rz-green: var(--green-text);
  --rz-tint: color-mix(in srgb, var(--rz-green) 7%, #FFFFFF);
  padding: 96px 0;
  background: #FFFFFF;
  color: var(--rz-ink);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.rz-pricing-anchor { position: absolute; top: 0; scroll-margin-top: calc(var(--nav-h) + 20px); }
.rz-pricing [hidden] { display: none !important; }
.rz-pricing-sr, .rz-pricing-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.rz-pricing-heading { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-bottom: 40px; text-align: center; }
.rz-pricing-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--rz-green); font-size: 13px; font-weight: 600; }
.rz-pricing .rz-pricing-heading .h2 { margin: 0; color: var(--rz-ink); font-size: 48px; line-height: 1.08; font-weight: 600; letter-spacing: -2px; }
.rz-pricing-intro { max-width: 640px; padding-bottom: 3px; }
.rz-pricing-intro p { margin: 0 0 18px; color: var(--rz-muted); font-size: 15px; line-height: 1.6; }
.rz-pricing-intro > span { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--rz-green); font-size: 12px; font-weight: 500; }
.rz-pricing-intro svg { flex-shrink: 0; }
.rz-pricing-workspace { color: var(--rz-ink); }
.rz-pricing fieldset { min-width: 0; margin: 0; border: 0; }
.rz-pricing-toolbar { display: flex; align-items: center; justify-content: center; padding: 0 0 28px; }
.rz-pricing .rz-pricing-period { display: flex; flex-shrink: 0; gap: 4px; padding: 4px; border: 1px solid var(--rz-line); border-radius: 999px; background: #FFFFFF; }
.rz-pricing-period label { position: relative; cursor: pointer; border-radius: 999px; }
.rz-pricing-period label > span { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 14px; color: var(--rz-muted); font-size: 13px; font-weight: 500; border: 1px solid transparent; border-radius: inherit; transition: background .16s, color .16s; }
.rz-pricing-period small { padding: 2px 5px; border-radius: 4px; color: var(--rz-green); background: var(--rz-tint); font-size: 10px; font-weight: 600; }
.rz-pricing-period label:has(input:checked) > span { border-color: var(--neutral-900); background: var(--neutral-900); color: #FFFFFF; box-shadow: 0 2px 3px rgba(0, 0, 0, .04); }
.rz-pricing-period label:has(input:checked) small { background: #FFFFFF; }
.rz-pricing-period label:has(input:not(:checked)):hover > span { color: var(--rz-ink); }
.rz-pricing label:has(input:focus-visible), .rz-pricing a:focus-visible { outline: 2px solid var(--rz-green); outline-offset: 4px; border-radius: 5px; }
.rz-pricing .rz-pricing-period label:has(input:focus-visible), .rz-pricing .rz-pricing-cta:focus-visible { border-radius: 999px; }
.rz-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 18px; }
.rz-plan-card { min-width: 0; border: 1px solid var(--rz-line); border-radius: 12px; background: var(--neutral-50); color: var(--rz-ink); }
.rz-plan-card-featured { border-color: var(--rz-green); background: var(--neutral-50); box-shadow: inset 0 4px 0 var(--rz-green); }
.rz-plan-card-head { padding: 24px 22px 20px; }
.rz-plan-card-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.rz-plan-card-title h3 { margin: 0; color: var(--rz-ink); font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; }
.rz-pricing-recommended { padding: 5px 7px; border-radius: 5px; color: #FFFFFF; background: var(--rz-green); font-size: 10px; font-weight: 600; line-height: 1.3; }
.rz-plan-card-head p { min-height: 20px; margin: 9px 0 0; color: var(--rz-muted); font-size: 12px; line-height: 1.6; }
.rz-plan-investment {
  --rz-price-ink: var(--rz-ink);
  --rz-price-muted: var(--rz-muted);
  --rz-price-line: var(--rz-line);
  --rz-price-saving: var(--rz-green);
  margin: 0 16px;
  padding: 22px;
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--rz-price-ink);
}
.rz-pricing-discount { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; margin-bottom: 18px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--rz-green) 28%, #FFFFFF); border-radius: 8px; background: var(--rz-tint); color: var(--rz-ink); font-size: 10px; font-weight: 500; line-height: 1.3; }
.rz-pricing-discount > span { display: flex; align-items: center; gap: 7px; min-width: 0; text-transform: uppercase; }
.rz-pricing-discount svg { flex-shrink: 0; color: var(--rz-green); }
.rz-pricing-discount strong { flex-shrink: 0; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--rz-green) 28%, #FFFFFF); border-radius: 6px; color: var(--rz-green); font-size: 11px; font-weight: 600; white-space: nowrap; }
.rz-pricing-reference { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 10px; color: var(--rz-price-muted); font-size: 14px; line-height: 1.5; }
.rz-pricing-reference > span { white-space: nowrap; }
.rz-pricing-discount-amount { padding: 3px 7px; border-radius: 999px; background: var(--rz-tint); color: var(--rz-green); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.rz-pricing-price { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.rz-pricing-price strong { color: var(--rz-price-ink); font-size: 51px; font-weight: 600; line-height: 1; letter-spacing: -2.5px; font-variant-numeric: tabular-nums; }
.rz-pricing-currency { font-size: 20px; letter-spacing: -.6px; }
.rz-pricing-per { margin-left: 3px; color: var(--rz-price-muted); font-size: 12px; }
.rz-pricing-equivalent { min-height: 17px; margin: 7px 0 20px; color: var(--rz-price-muted); font-size: 11px; line-height: 1.5; }
.rz-pricing-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px; border: 1px solid var(--neutral-900); border-radius: 999px; background: var(--neutral-900); color: #FFFFFF; font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center; transition: background .16s, border-color .16s; }
.rz-pricing-cta svg { flex-shrink: 0; transition: transform .16s; }
.rz-pricing-cta:hover { border-color: var(--neutral-800); background: var(--neutral-800); }
.rz-pricing-cta:hover svg { transform: translateX(3px); }
.rz-pricing-trial { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 12px 0 0; color: var(--rz-price-muted); font-size: 10px; line-height: 1.5; }
.rz-pricing-trial svg { flex-shrink: 0; }
.rz-plan-included { padding: 24px 22px; }
.rz-plan-included h4 { margin: 0 0 20px; color: var(--rz-muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
.rz-plan-features { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rz-plan-features li { display: flex; align-items: flex-start; gap: 9px; min-height: 28px; color: var(--rz-muted); font-size: 14px; line-height: 1.55; }
.rz-plan-features li > span { min-width: 0; }
.rz-plan-features li > svg { flex-shrink: 0; margin-top: 2px; padding: 3px; border-radius: 50%; color: var(--rz-green); background: var(--rz-tint); }
.rz-plan-features strong { color: var(--rz-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rz-plan-features .rz-plan-user-limit, .rz-plan-bundle { align-items: center; min-height: 52px; margin-bottom: 4px; padding: 11px 12px; border: 1px solid var(--rz-green); border-radius: 8px; background: #FFFFFF; color: var(--rz-green); }
.rz-plan-bundle { display: flex; gap: 9px; margin-bottom: 20px; font-size: 14px; line-height: 1.55; }
.rz-plan-bundle > img { width: 18px; height: 12px; flex-shrink: 0; object-fit: contain; }
.rz-plan-bundle > span { color: var(--rz-ink); font-weight: 700; }
.rz-plan-features .rz-plan-user-limit > svg { margin-top: 0; color: var(--rz-green); background: var(--rz-tint); }
.rz-plan-user-limit strong { color: var(--rz-green); }
.rz-pricing-compare { margin-top: 16px; border: 1px solid var(--rz-line); border-radius: 12px; background: #FFFFFF; }
.rz-pricing-compare summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 18px 24px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 500; }
.rz-pricing-compare summary::-webkit-details-marker { display: none; }
.rz-pricing-compare summary > span { display: inline-flex; align-items: center; gap: 10px; }
.rz-pricing-compare summary > span:first-child > svg { color: var(--rz-green); }
.rz-pricing-compare-action { color: var(--rz-muted); font-size: 12px; }
.rz-pricing-compare-action svg { transition: transform .16s; }
.rz-pricing-compare[open] .rz-pricing-compare-action svg { transform: rotate(180deg); }
.rz-pricing-compare[open] summary { border-bottom: 1px solid var(--rz-line); }
.rz-pricing-compare summary:focus-visible, .rz-pricing-table-wrap:focus-visible { outline: 2px solid var(--rz-green); outline-offset: 4px; border-radius: 5px; }
.rz-pricing-compare-content { padding: 0 24px 16px; }
.rz-pricing-compare-hint { display: none; margin: 14px 0 0; color: var(--rz-muted); font-size: 11px; }
.rz-pricing-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.rz-pricing table { width: 100%; min-width: 620px; table-layout: fixed; border-spacing: 0; border-collapse: separate; text-align: left; font-size: 13px; }
.rz-pricing tr > th:first-child { position: sticky; left: 0; z-index: 1; width: 31%; background: #FFFFFF; box-shadow: 1px 0 0 var(--rz-line); }
.rz-pricing th, .rz-pricing td { padding: 18px 20px; border-bottom: 1px solid var(--rz-line); vertical-align: middle; }
.rz-pricing thead th { padding-top: 24px; padding-bottom: 22px; font-size: 15px; font-weight: 600; }
.rz-pricing thead th:first-child, .rz-pricing tbody th, .rz-pricing tfoot th { color: var(--rz-muted); font-size: 12px; font-weight: 400; }
.rz-pricing th small, .rz-pricing td small { display: block; margin-top: 4px; color: var(--rz-muted); font-size: 11px; font-weight: 400; line-height: 1.4; }
.rz-pricing td { width: 23%; font-weight: 500; font-variant-numeric: tabular-nums; }
.rz-pricing .is-recommended { background: var(--rz-tint); }
.rz-pricing thead .is-recommended { color: var(--rz-green); box-shadow: inset 0 3px 0 var(--rz-green); }
.rz-pricing tfoot th, .rz-pricing tfoot td { border-bottom: 0; }
.rz-pricing tfoot a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--rz-green); font-size: 12px; font-weight: 600; }
.rz-pricing-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; font-size: 12px; line-height: 1.5; }
.rz-pricing-footer p { margin: 0; color: var(--rz-muted); }
.rz-pricing-footer a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--rz-green); font-weight: 500; }
@media (min-width: 761px) and (max-width: 1100px) {
  .rz-pricing-grid { gap: 12px; }
  .rz-plan-card-head { min-height: 110px; padding: 20px 16px 16px; }
  .rz-plan-card-title { gap: 5px; }
  .rz-plan-card-title h3 { font-size: 23px; letter-spacing: -.7px; }
  .rz-pricing-recommended { padding: 4px 5px; font-size: 9px; }
  .rz-plan-card-head p { min-height: 36px; font-size: 11px; }
  .rz-plan-investment { margin-inline: 12px; padding: 18px 16px; }
  .rz-pricing-reference { min-height: 50px; align-content: center; }
  .rz-pricing-discount { gap: 4px; padding: 8px 7px; font-size: 9px; }
  .rz-pricing-discount > span { gap: 4px; }
  .rz-pricing-discount svg { width: 12px; height: 12px; }
  .rz-pricing-discount strong { padding: 3px 4px; font-size: 10px; }
  .rz-pricing-price strong { font-size: 41px; letter-spacing: -2px; }
  .rz-pricing-currency { font-size: 17px; }
  .rz-pricing-per { margin-left: 1px; font-size: 10px; }
  .rz-pricing-equivalent { font-size: 10px; }
  .rz-pricing-cta { gap: 5px; padding: 10px; font-size: 11px; }
  .rz-pricing-cta svg { width: 15px; }
  .rz-pricing-trial { gap: 4px; font-size: 9px; }
  .rz-pricing-trial svg { width: 12px; }
  .rz-plan-included { padding: 22px 16px; }
  .rz-plan-features { gap: 9px; }
  .rz-plan-features li { gap: 7px; min-height: 38px; font-size: 12px; }
  .rz-plan-features .rz-plan-user-limit, .rz-plan-bundle { min-height: 64px; padding: 10px 8px; }
  .rz-plan-bundle { gap: 7px; font-size: 12px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .rz-pricing-cta { justify-content: center; }
  .rz-pricing-cta svg { display: none; }
}
@media (max-width: 900px) {
  .rz-pricing .rz-pricing-heading .h2 { font-size: 42px; }
}
@media (max-width: 760px) {
  .rz-pricing-heading { flex-direction: column; gap: 20px; margin-bottom: 28px; }
  .rz-pricing-intro { max-width: 390px; }
  .rz-pricing-intro p { margin-bottom: 12px; font-size: 14px; }
  .rz-pricing-toolbar { flex-direction: column; align-items: stretch; }
  .rz-pricing .rz-pricing-period { width: 100%; }
  .rz-pricing-period label { flex: 1; min-width: 0; }
  .rz-pricing-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rz-plan-card-head { padding: 22px; }
  .rz-plan-card-head p { font-size: 12px; }
  .rz-plan-investment { padding: 22px; }
  .rz-pricing-cta { font-size: 14px; }
  .rz-pricing-footer { align-items: flex-start; flex-direction: column; gap: 0; }
}
@media (max-width: 560px) {
  .rz-pricing { padding: 64px 0; }
  .rz-pricing .rz-pricing-heading .h2 { font-size: clamp(34px, 9.75vw, 38px); letter-spacing: -1.5px; }
  .rz-pricing-kicker { margin-bottom: 14px; }
  .rz-pricing-period label > span { padding: 8px 6px; gap: 4px; font-size: 12px; }
  .rz-pricing-period small { padding: 2px 4px; font-size: 9px; }
  .rz-plan-card-head { padding: 22px 18px; }
  .rz-plan-investment { margin-inline: 12px; padding: 22px 18px; }
  .rz-plan-included { padding: 22px 18px; }
  .rz-pricing-compare summary { padding: 17px 18px; font-size: 12px; gap: 8px; }
  .rz-pricing-compare-action { font-size: 0; gap: 0 !important; }
  .rz-pricing-compare-content { padding: 0 12px 12px; }
  .rz-pricing-compare-hint { display: block; margin-left: 6px; }
  .rz-pricing table { min-width: 580px; }
  .rz-pricing th, .rz-pricing td { padding: 16px 14px; }
  .rz-pricing tr > th:first-child { width: 112px; }
  .rz-pricing td { width: 156px; }
}
@media (max-width: 360px) {
  .rz-pricing-period label > span { flex-wrap: wrap; gap: 2px 4px; }
  .rz-plan-card-head { padding: 20px 16px; }
  .rz-plan-card-title h3 { font-size: 26px; }
  .rz-plan-features li, .rz-plan-bundle { font-size: 13px; }
  .rz-pricing-cta { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .rz-pricing *, .rz-pricing *::before, .rz-pricing *::after { animation: none !important; transition: none !important; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 20px; padding: 24px 0; text-align: left; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.faq-q .ico { width: 24px; height: 24px; flex-shrink: 0; color: var(--green-text); transition: transform .25s; }
.faq-item.open .faq-q .ico { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a-inner { padding-bottom: 24px; font-size: 16px; color: var(--text-muted); line-height: 1.6; max-width: 680px; }

.faq-section { background: var(--bg); border-top: 1px solid var(--border-2); }

/* Título fixo à esquerda, perguntas à direita. Mesma receita de
   .impl-entregaveis-left (black.html, #entregaveis): sticky dentro da grade,
   então ele acompanha o scroll só enquanto a coluna da direita (mais alta)
   ainda tem conteúdo abaixo -- some sozinho quando a lista termina, sem JS. */
.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
/* O align-items: flex-start existe por causa da pill. Este container é flex em
   coluna, e sem ele vale o stretch padrão: a pill vira flex item e estica até
   a largura toda da coluna, com o fundo branco e o fio cinza abrindo de ponta a
   ponta. O inline-flex dela não segura isso, porque quem manda no tamanho de um
   flex item é o pai.

   Era a ÚNICA pill do site nessa situação: as outras moram em .section-head,
   que é block, e a de #agentes mora num flex que já declarava flex-start.

   O conserto foi aqui e não na pill porque a causa é o container. Pôr
   align-self na pill resolveria este caso e criaria risco no hero, onde ela é
   centralizada por margem automática. O h2 e o lede abaixo não mudam: texto
   longo em fit-content ocupa a largura disponível do mesmo jeito. */
.faq-head-sticky { position: sticky; top: 96px; display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 980px) {
  .faq-grid { grid-template-columns: 1fr; gap: 30px; }
  .faq-head-sticky { position: static; }
}

#faq .faq { max-width: 860px; margin: 0; }
#faq .faq-item:first-child { border-top: 1px solid var(--border); }
#faq .faq-q { color: var(--ink); line-height: 1.35; transition: color .18s ease; }
#faq .faq-q:hover { color: var(--green-text); }
#faq .faq-q:focus-visible { outline: 3px solid rgba(138, 138, 142, 0.35); outline-offset: 4px; border-radius: var(--r-sm); }
#faq .faq-a-inner { padding-left: 44px; padding-right: 24px; }
#faq .faq-a-inner p { margin: 0; }

/* ---------- CTA ---------- */
#demo, #demo-planos { background: #FBFCFA; }
.demo-side-l { position: absolute; left: -80px; top: 50%; transform: translateY(-50%); width: 420px; height: 500px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(29, 29, 29, 0.32) 0%, transparent 65%); filter: blur(80px); pointer-events: none; animation: meshFloat2 28s ease-in-out infinite; }
.demo-side-r { position: absolute; right: -80px; top: 50%; transform: translateY(-50%); width: 420px; height: 500px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(29, 29, 29, 0.32) 0%, transparent 65%); filter: blur(80px); pointer-events: none; animation: meshFloat2 28s ease-in-out infinite; }
.demo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.demo-trust { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; }
.demo-trust li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--neutral-700); font-weight: 500; }
.demo-trust li svg { flex-shrink: 0; color: var(--neutral-700); }
.demo-split .cta-final { max-width: 100%; margin: 0; }
.demo-split-left > p { font-weight: 400; line-height: 1.3; }
.demo-trust li { font-weight: 400; line-height: 1.3; }
.cta-final { position: relative; border-radius: var(--r-xl); overflow: hidden; padding: 48px 24px; text-align: left; background: #fff; border: 1px solid var(--neutral-200); max-width: 480px; margin: 0 auto; box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 20px 48px rgba(0,0,0,0.12); }
.cta-final-glow { position: absolute; bottom: -50%; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse at center, var(--glow) 0%, transparent 60%); opacity: 0.4; pointer-events: none; }
.cta-final-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 70%); mask-image: radial-gradient(ellipse at center, #000, transparent 70%); opacity: 0.4; }
.cta-final > *:not(.cta-final-glow):not(.cta-final-grid) { position: relative; z-index: 1; }
.cta-final h2 { font-size: 48px; font-weight: 600; letter-spacing: -2px; line-height: 1.05; }
#demo .btn-primary { box-shadow: none; }
#demo .btn-primary:hover { box-shadow: none; }
.cta-final p { font-size: clamp(18px, 2.2vw, 22px); color: #444; line-height: 1.3; letter-spacing: -0.3px; margin: 28px auto 36px; max-width: 600px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-actions .btn { border-radius: 9999px; flex: 1; text-align: center; justify-content: center; }

/* ---------- Contato final ---------- */
.ainda-duvidas {
  padding: 88px 0;
  background: #FFFFFF;
}
.ainda-duvidas-card {
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 40px;
  text-align: center;
  background: #F1FBF7;
  border: 1px solid rgba(138, 138, 142, 0.22);
  border-radius: var(--r-xl);
}
.ainda-duvidas h2 {
  margin: 0;
  color: var(--text);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -2px;
}
.ainda-duvidas p {
  margin: 16px auto 30px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.3px;
}
.ainda-duvidas-acoes {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ainda-duvidas-acoes .btn {
  min-width: 220px;
  border-radius: 9999px;
  justify-content: center;
}
.ainda-duvidas-acoes .btn-secondary {
  background: #FFFFFF;
  border-color: rgba(138, 138, 142, 0.42);
  color: var(--text);
}
.ainda-duvidas-acoes .btn-secondary:hover {
  background: rgba(138, 138, 142, 0.07);
  border-color: var(--green-text);
}

/* ---------- Demo form ---------- */
.demo-form { margin-top: 0; text-align: left; }
.demo-form-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.demo-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.demo-label { font-size: 13px; font-weight: 600; color: #111; letter-spacing: -0.01em; }
.demo-input { width: 100%; padding: 10px 14px; border: 1px solid var(--neutral-300); border-radius: 10px; font-size: 15px; font-family: inherit; color: #111; background: #fff; outline: none; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.demo-select { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.demo-input:focus { border-color: var(--neutral-900); box-shadow: 0 0 0 3px rgba(29, 29, 29, 0.0825); background: #fff; }
input.demo-input:not(:placeholder-shown) { background-color: var(--neutral-50); }
select.demo-select.has-value { background-color: var(--neutral-50); }
.demo-input::placeholder { color: var(--neutral-700); }
select.demo-select:invalid { color: var(--neutral-700); }
.demo-submit { width: 100%; margin-top: 20px; border-radius: 9999px !important; justify-content: center; }
.demo-success { display: none; flex-direction: column; align-items: center; gap: 8px; padding: 32px 0 8px; color: #111; }
.demo-success svg { width: 40px; height: 40px; color: var(--neutral-900); margin-bottom: 4px; }
.demo-success strong { font-size: 20px; font-weight: 600; }
.demo-success span { font-size: 15px; color: var(--neutral-600); }

/* ---------- Footer ---------- */
.footer { background: #0a0d0b; padding: 72px 0 40px; }
.footer .footer-brand p { color: rgba(255,255,255,0.55); }
.footer .footer-col h3 { color: rgba(255,255,255,0.4); }
.footer .footer-col a { color: rgba(255,255,255,0.65); }
.footer .footer-col a:hover { color: var(--primary); }
.footer .footer-bottom { border-top-color: rgba(255,255,255,0.08); }
.footer .footer-bottom .cp { color: rgba(255,255,255,0.35); }
.footer .footer-social a { border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.55); }
.footer .footer-social a:hover { border-color: var(--primary); color: var(--primary); }
.footer .btn-secondary { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.15); }
.footer .btn-secondary:hover { background: rgba(255,255,255,0.1); }
.footer .btn-primary { color: var(--on-primary); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.footer-brand .logo { margin-bottom: 18px; }
.footer-brand p { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 300px; }
.footer-brand-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.footer-brand-actions .btn { border-radius: 9999px; }
.footer-brand-actions .btn-secondary { border: 1px solid #8A8A8E; }
.footer-col h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 18px; }
.footer-col a { display: block; font-size: 14.5px; color: var(--text-muted); margin-bottom: 12px; transition: color .15s; }
.footer-col a:hover { color: var(--primary); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 16px; }
.footer-bottom .cp { font-size: 13px; color: var(--text-subtle); }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all .15s; }
.footer-social a:hover { border-color: var(--border-active); color: var(--primary); }
.footer-social svg { width: 17px; height: 17px; }

/* ---------- WhatsApp typing dots ---------- */
.wpp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); display: inline-block; animation: wppDot 1.2s infinite; }
@keyframes wppDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(0.2,0.8,0.2,1), transform .7s cubic-bezier(0.2,0.8,0.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }

/* ---------- Hero entrance animation ---------- */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-badge  { animation: heroIn .65s cubic-bezier(0.2,0.8,0.2,1) .05s both; }
.mobile-only-br { display: none; }
.desktop-only-br { display: inline; }
.hero-h1-mobile { display: none; }
.hero-l1 { display: block; animation: heroIn .7s cubic-bezier(0.2,0.8,0.2,1) .15s both; }
.hero-l2 { display: block; animation: heroIn .7s cubic-bezier(0.2,0.8,0.2,1) .28s both; }
.hero-l3 { display: block; animation: heroIn .7s cubic-bezier(0.2,0.8,0.2,1) .41s both; }
.hero-sub    { animation: heroIn .65s cubic-bezier(0.2,0.8,0.2,1) .38s both; }
.hero-actions { animation: heroIn .65s cubic-bezier(0.2,0.8,0.2,1) .48s both; }
.hero-note   { animation: heroIn .65s cubic-bezier(0.2,0.8,0.2,1) .55s both; }
.hero-mockup-wrap { animation: heroIn .8s cubic-bezier(0.2,0.8,0.2,1) .65s both; }

.hero-mockup-wrap {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.hero-mockup-img { width: 100%; height: auto; display: block; transform-origin: center bottom; will-change: transform;
  filter: drop-shadow(0 20px 32px rgba(29, 29, 29, 0.16)); }
.hero-cal-wrap {
  width: 100%;
  height: 700px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 20px 32px rgba(29, 29, 29, 0.16);
}
#my-cal-inline-demonstracao { width: 100%; height: 100%; overflow: auto; }
@media (max-width: 560px) {
  .hero-cal-wrap { height: 620px; border-radius: var(--r-md); }
}

/* ---------- Page hero (internal pages) ---------- */
/* Mesmo respiro do hero da home: as três internas (planos, política, termos)
   repetem a estrutura navbar → pill → h1, então o ritmo do topo é o mesmo. */
.page-hero { padding-top: calc(var(--nav-h) + 35px); padding-bottom: 40px; text-align: center; position: relative; overflow: hidden; }
.page-hero .hero-bg { inset: 0 0 auto 0; height: 1080px; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: 48px; letter-spacing: -0.02em; line-height: 1; }
.page-hero p { font-size: 16px; color: var(--text-muted); line-height: 1.3; letter-spacing: -0.3px; max-width: 600px; margin: 15px auto 0; }

/* ---------- Implementação Gratuita ---------- */
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(20px); } }

.impl-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.impl-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(138, 138, 142,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 138, 142,0.03) 1px, transparent 1px); background-size: 80px 80px; opacity: 0.6; -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 100%, #000 0%, transparent 60%); mask-image: radial-gradient(ellipse 85% 100% at 50% 100%, #000 0%, transparent 60%); }
.impl-blob { position: absolute; border-radius: 50%; filter: blur(100px); }
.impl-blob-1 { top: -200px; right: -150px; width: 800px; height: 800px; background: radial-gradient(circle, rgba(138, 138, 142,0.12) 0%, transparent 65%); animation: float 20s ease-in-out infinite; }
.impl-blob-2 { bottom: -250px; left: -100px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(138, 138, 142,0.08) 0%, transparent 70%); filter: blur(110px); animation: float 25s ease-in-out infinite reverse; }
.impl-blob-3 { top: 50%; left: 10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(138, 138, 142,0.05) 0%, transparent 75%); filter: blur(90px); animation: float 30s ease-in-out infinite; }

.impl-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start; }
.impl-section-text { display: flex; flex-direction: column; }
.impl-section-text .h2 { margin-bottom: 20px; }
.impl-section-sub { font-size: 16px; font-weight: 500; color: var(--green-text); line-height: 1.4; margin-bottom: 20px; letter-spacing: -0.3px; }
.impl-section-description { font-size: 17px; line-height: 1.4; color: var(--text-muted); margin-bottom: 24px; letter-spacing: -0.3px; }
.impl-section-footer { padding: 15px; border-radius: var(--r-lg); background: rgba(138, 138, 142, 0.06); border: 1px solid rgba(138, 138, 142, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.impl-section-footer p { font-size: 14px; font-weight: 500; color: #D1D5DB; margin: 0; }

.impl-cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
.impl-card { padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: border-color .2s, transform .2s; }
.impl-card:hover { border-color: var(--border-active); transform: translateY(-2px); }
.impl-card-content { display: flex; gap: 20px; align-items: center; }
.impl-card-icon { width: 52px; height: 52px; min-width: 52px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--green-text); box-shadow: none; flex-shrink: 0; }
.impl-card-icon svg { width: 20px; height: 20px; }
.impl-card-text { flex: 1; }
.impl-card-title { font-size: 22px; font-weight: 600; color: var(--text); margin: 0 0 8px 0; letter-spacing: -0.035em; line-height: 1.05; }
.impl-card-desc { font-size: 15px; line-height: 1.4; color: var(--text-muted); margin: 0; }

/* ---------- Seção Integrações (fundo claro) ---------- */

/* ---------- Seções "Escale seus resultados" (fundo branco) ---------- */
#implementacao::before { opacity: 0; }
#implementacao .impl-blob { display: none; }
#implementacao h3,
#entregaveis h3 { color: var(--ink); }
#implementacao .impl-section-description { color: #444; }
#implementacao .impl-section-footer { background: rgba(138, 138, 142,0.08); border-color: rgba(138, 138, 142,0.25); }
#implementacao .impl-section-footer p { color: #222; }
#entregaveis .impl-card { background: #fff; border-color: rgba(0,0,0,0.08); }
#entregaveis .impl-card-title { color: #000; }
#entregaveis .impl-card-desc { color: #444; }
#entregaveis .btn-secondary { background: #fff; color: #111; border: 1px solid #8A8A8E; }
#implementacao .btn-secondary { background: #fff; color: #111; border: 1px solid #8A8A8E; }
#implementacao .hero-actions,
#entregaveis .hero-actions,
.tl-cta-mobile.hero-actions { flex-wrap: nowrap; }
#entregaveis .hero-actions .btn,
.tl-cta-mobile.hero-actions .btn { padding: 12px 20px; font-size: 14px; }
#implementacao .hero-actions .btn { padding: 14px 30px; font-size: 16px; }
#entregaveis h3.tl-title { color: var(--ink); }
.impl-pill-desktop::before,
.impl-pill-mobile .eyebrow::before { background: #8A8A8E; }

/* ---------- Entregáveis — título sticky ---------- */
.impl-entregaveis-left {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
@media (max-width: 980px) {
  .impl-entregaveis-left {
    position: static;
  }
}

/* ---------- Timeline numerada ---------- */
.tl { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 72px 1fr; gap: 28px; }
.tl-left { display: flex; flex-direction: column; align-items: center; }
.tl-num {
  font-family: var(--mono);
  font-size: 55px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(82, 81, 84, 0.3);
  transform: scale(0.92);
  flex-shrink: 0;
  will-change: color, transform;
}
.tl-line {
  width: 2px;
  flex: 1;
  min-height: 32px;
  background: rgba(0, 0, 0, 0.08);
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}
.tl-line-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  background: var(--primary);
  will-change: height;
}
.tl-body { padding-top: 8px; padding-bottom: 80px; }
.tl-body-last { padding-bottom: 0; }
.tl-cta-mobile { display: none; }
.tl-title { font-size: 25px; font-weight: 600; color: var(--green-text); letter-spacing: -0.025em; margin-bottom: 8px; line-height: 1.2; }
.tl-desc { font-size: 15px; color: #555; line-height: 1.6; }

/* ---------- Impl right column ---------- */
.impl-right-head {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.impl-right-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.impl-card-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.impl-num {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--green-text);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  min-width: 28px;
  line-height: 1.6;
}

/* ---------- Mobile menu ---------- */
/* Ocupa a tela inteira (inset: 0), então com viewport-fit=cover ele passa a
   cobrir também o recorte de cima e a barra de gestos embaixo. O topo sai de
   --nav-h para ficar sempre 40px abaixo da navbar, e o rodapé ganha o inset de
   baixo para o último botão não encostar na barra de gestos. */
.mobile-menu { position: fixed; inset: 0; z-index: 98; background: var(--bg); padding: calc(var(--nav-h) + 40px) 32px calc(32px + env(safe-area-inset-bottom, 0px)); flex-direction: column; gap: 8px; display: none; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 20px; padding: 16px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.mobile-menu .btn { margin-top: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  #ben-grid { grid-template-columns: 1fr !important; }
  .demo-split { grid-template-columns: 1fr; gap: 40px; }
  #demo, #demo-planos { padding: 70px 0 !important; }
  .demo-split-left { text-align: center; }
  .demo-trust { display: none; }
  /* Teto alinhado com os 42px do desktop. Ficava em 46px, ou seja, o título
     ENCOLHIA conforme a tela crescia ao cruzar os 980px. Com a manchete curta
     antiga a diferença passava; com 86 caracteres ela vira quatro linhas
     infladas no tablet. O mínimo desce de 38px para 30px para encontrar o teto
     do bloco de 560px e a passagem entre as faixas ficar contínua. */
  .hero h1, .page-hero h1 { font-size: clamp(30px, 4vw, 42px); }
  .hero h1 { line-height: 1.2; }
  .h2, .cta-final h2, .ainda-duvidas h2 { font-size: clamp(38px, 4vw, 46px); }
  .section { padding: 88px 0; }
  .impl-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .nav-links, .nav-cta-ghost { display: none; }
  .nav-burger { display: flex; }
  .hero.vb .hero-inner { grid-template-columns: 1fr; gap: 60px; }
  .hero.vb .hero-text { align-items: center; text-align: center; }
  .hero.vb .hero-sub { margin-left: auto; margin-right: auto; }
  .hero.vb .hero-actions { justify-content: center; }
  /* O justify-content sozinho não centralizava: o texto quebra em duas linhas e
     o conjunto ícone + texto ocupa a largura toda, então não sobra folga para
     distribuir e o ícone encostava na margem esquerda com o texto centralizado
     ao lado. Como bloco de texto, o ícone volta a fluir junto da primeira
     palavra e o conjunto centraliza de verdade. */
  .hero.vb .hero-note { display: block; }
  .hero.vb .hero-note svg { display: inline-block; vertical-align: -2px; margin-right: 8px; }
  .hero-benefits { gap: 16px; }
  .hero-benefit { gap: 12px; font-size: 14px; }

  /* Só a .page-hero: o cabeçalho de planos e das legais continua branco, e
     glow verde sobre branco vira véu. O .hero da home voltou a ser escuro e
     mantém os efeitos. */
  .page-hero .hero-glow,
  .page-hero .mesh-blob { display: none; }
  .feature-row { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .feature-text { padding: 45px 24px; }
  /* Empilhado: texto em cima, mockup embaixo. O order: -1 que existia no
     .feature-visual puxava o mockup para o topo; sem ele os dois seguem a
     ordem do HTML, que já é texto e depois mockup. O reset do .flip continua
     necessário para desfazer o order: 2 do desktop, que troca os lados. */
  .feature-row.flip .feature-text { order: 0; }
  /* Tablet e celular continuam usando a altura total do painel: nessa faixa
     o conteúdo fica empilhado e o respiro vertical do desktop poderia cortar
     elementos das simulações. */
  .feature-visual { width: 100%; min-width: 0; margin-block: 0; overflow: hidden; }
  .feature-visual > div { max-width: 100%; }
  /* Ícone alinhado à primeira linha do título. Em tela estreita o h3 quebra em
     2 ou 3 linhas, e o align-items: center que vale no desktop deixava o ícone
     boiando no meio do bloco, deslocado da palavra que ele acompanha. O
     align-self do próprio ícone também precisa ceder: ele vence o align-items
     do pai. */
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-right: none; }
  .metric:nth-child(1), .metric:nth-child(2) { border-bottom: 1px solid var(--border); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step-arrow { display: none; }
  .tgrid, .pgrid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .compare-table { font-size: 13px; }
  .compare-table th, .compare-table td { padding: 14px 12px; }
  .tl-cta-mobile { display: flex; margin-top: 10px; justify-content: center; }
}
@media (max-width: 768px) {
  .impl-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  #entregaveis .impl-entregaveis-left .hero-actions { display: none; }
  #implementacao img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block; }
  #implementacao .impl-grid > div:first-child { width: 100%; overflow: hidden; }
}
@media (max-width: 560px) {
  .hero-social-proof { gap: 10px; margin-bottom: 24px; }
  .hero-social-avatars { padding-left: 7px; }
  .hero-social-avatars img { width: 28px; height: 28px; margin-left: -7px; border-width: 2px; }
  .hero-social-copy { padding-left: 12px; }
  .hero-social-rating { gap: 6px; font-size: 13px; }
  .hero-social-stars { font-size: 15px; }
  .hero-social-copy p { margin-top: 4px; font-size: 12px; }
  /* As listas de checks VOLTAM a aparecer no celular (pedido de 05/10/2026).
     Elas estavam escondidas por um motivo real, e o motivo continua valendo:
     em tela estreita os itens quebram em VÁRIAS linhas e alongam o card. O
     comentário anterior dizia "duas linhas"; medido a 390px, a maioria quebra
     em TRÊS. Então, além de destravar o display, a lista vai apertada:

       corpo de 15 para 14px, gap de 12 para 10px, ícone de 20 para 18px e a
       folga entre ícone e texto de 12 para 10px.

     Medido a 390px: 176,8px de lista com o aperto contra 198px sem ele, ou
     seja, 21,2px e 10,7% a menos por card. O aperto reduz, não anula: cada
     card de recurso ganha perto de 177px de altura no celular, e com cinco
     recursos isso é quase 900px de página. É consequência aceita do pedido,
     não efeito colateral esquecido. Se a altura incomodar, o caminho é cortar
     texto dos itens, não esconder a lista de novo. */
  .feature-list { display: flex; gap: 10px; }
  .feature-list li { font-size: 14px; gap: 10px; line-height: 1.4; }
  .feature-list li svg { width: 18px; height: 18px; }
  #faq .faq-q { gap: 14px; padding: 20px 0; font-size: 17px; }
  #faq .faq-a-inner { padding-left: 38px; padding-right: 0; padding-bottom: 20px; }
  .wrap { padding: 0 10px; }
  #beneficios .wrap { padding: 0 10px; }
  .section { padding-top: 70px !important; padding-bottom: 70px !important; }
  .section-sm { padding-top: 70px !important; padding-bottom: 70px !important; }
  #demo, #demo-planos { padding-top: 70px !important; padding-bottom: 70px !important; }
  #demo .wrap { padding: 0 10px; }
  #clientes { padding-bottom: 70px !important; }
  /* A manchete anterior tinha 58 caracteres e cabia em três linhas fixas, com
     um divisor medido no TTF para encostar nas margens. A atual tem 86, e o
     mesmo método a esmagaria para 18px num aparelho de 320px -- tamanho de
     texto corrido, não de manchete.

     Então aqui a quebra volta a ser natural e o tamanho passa a ser clamp. Dá
     de 24px a 30px conforme a tela, em 3 a 4 linhas, e sobrevive a uma troca de
     texto sem precisar de nova medição no arquivo da fonte. Menos exato,
     bem mais robusto: era brittle demais amarrar a folha de estilo às palavras
     exatas de um h1 que muda toda semana.

     A quebra em quatro linhas do h1 da home nao sai nem do wrap natural
     (que puxa "e" e "so" para a linha de cima) nem de text-wrap: balance
     (que iguala as quatro e tira o degrau do final). Ela e explicita, com
     <br class="mobile-only-br"> no markup, o mesmo padrao ja usado nos h2
     de #perdendo-vendas e #clientes. Por isso balance sai daqui: com as
     quebras fixadas ele nao tem o que distribuir e so atrapalharia se um
     segmento passasse de uma linha. */
  .hero h1, .page-hero h1 { font-size: clamp(24px, 7vw, 30px); letter-spacing: -0.02em; line-height: 1.15; }
  .hero h1 { font-size: 35px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.1; }
  /* As paginas internas nao tem quebra fixada no markup, entao elas
     seguem com balance para nao deixar a ultima linha orfa. */
  .page-hero h1 { text-wrap: balance; }
  .hero-sub { max-width: 95%; font-size: 16px; letter-spacing: -0.3px; }
  /* A folga ABAIXO dos botões, até os três benefícios. Era 26px, foi igualada
     aos 45px da folga de cima e parou em 35px, afinada à mão pelo dono. A de
     cima (.hero .hero-actions) não tem override de celular e segue nos 45px do
     desktop, então as duas são assimétricas de propósito: mais respiro antes da
     fileira de botões do que depois dela. */
  .hero.va .hero-conversion { margin-top: 35px; }
  .hero-benefits { max-width: 330px; flex-direction: column; gap: 12px; }
  .hero-benefit { width: 100%; gap: 14px; font-size: 15px; white-space: normal; }
  .hero-cases { margin-top: 100px; }
  .case-card { width: 255px; height: 370px; margin-right: 14px; border-radius: 16px; }
  .case-info { padding: 18px; }
  .case-empresa { font-size: 22px; }
  .case-nums { gap: 12px; margin-top: 13px; padding-top: 13px; }
  .case-nums b { font-size: 21px; }
  .case-nums span { font-size: 11px; margin-top: 5px; }
  .case-tag { top: 13px; left: 13px; padding: 6px 10px; font-size: 12px; }
  /* Sem font-size: ele agora vem do clamp da regra base e escala sozinho.
     Havia 30px aqui, que era justamente o degrau que criava o salto. */
  .h2, .cta-final h2, .ainda-duvidas h2 { font-size: 35px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.07; }
  #recursos .h2 { line-height: 1.07; }
  #integ-heading { font-size: 35px; }
  #demo-heading, #demo-planos-heading { font-size: 35px; }
  .feature-text h3 { font-size: 24px; }
  /* A margem aqui foi zerada enquanto a lista de checks ficava OCULTA nesta
     faixa: sem nada depois do parágrafo, ela só somava ao padding do card e
     virava vazio no rodapé. A lista voltou em 05/10/2026, e com ela a premissa
     caiu: zerada, o parágrafo encostava no primeiro check.

     Volta como 20px, e não os 24px do desktop, acompanhando o resto do ritmo
     do celular, que é mais apertado (o card tem 45px de padding contra 120px
     no desktop). 20 está na escala base 2 do design system; 18 não estaria.

     O `.feature-text p` segue zerado porque o parágrafo mora dentro do
     .feature-foot e é a margem DELE que faz a separação. Dois margin-bottom
     empilhados dariam 44px. */
  .feature-text p { margin-bottom: 0; }
  .feature-foot { margin-bottom: 20px; }
  #dashV0, #dashV1, #dashV2 { font-size: 12px !important; letter-spacing: -0.01em !important; }
  .metrics { grid-template-columns: 1fr; }
  .metric { border-right: none; border-bottom: 1px solid var(--border); padding: 20px 16px; }
  .metric .v { font-size: 38px; }
  .feature-text h3 { font-size: 24px; }
  .impl-card-title { font-size: 18px; }
  .steps { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: repeat(3, 1fr); gap: 50px 12px; text-align: center; }
  .footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; }
  .footer-brand p { text-align: center; }
  .footer-col a { font-size: 13px; }
  .footer-col h3 { margin-bottom: 12px; }
  .footer-bottom { justify-content: center; }
  .footer-social { justify-content: center; }
  .cta-final { padding: 48px 24px; }
  .ainda-duvidas { padding: 64px 0; }
  .ainda-duvidas-card { padding: 42px 22px; }
  .ainda-duvidas p { font-size: 16px; margin-bottom: 26px; }
  .ainda-duvidas-acoes { flex-direction: column; }
  .ainda-duvidas-acoes .btn { width: 100%; min-width: 0; }
  .demo-form-row { grid-template-columns: 1fr; }
  .price-toggle { gap: 3px; padding: 4px; width: 300px; }
  .price-toggle button { padding: 9px 9px; font-size: 14px; gap: 4px; flex: 1; justify-content: center; }
  .price-toggle .save { font-size: 10px; padding: 2px 5px; }
  .pcard .price-block { align-items: center; }
  .pcard .pprice { justify-content: center; }
  .pcard .pprice .pperiod { margin-left: 0; }
  .pcard .pprice-savings { justify-content: center; }
  .pcard .pname, .pcard .pdesc { text-align: center; }
  #implementacao h3.h2 { font-size: 35px !important; font-weight: 600 !important; line-height: 1.07 !important; letter-spacing: -0.03em !important; }
  #entregaveis h3.h2 { font-size: 35px !important; font-weight: 600 !important; line-height: 1.07 !important; letter-spacing: -0.03em !important; width: 90%; text-align: left !important; }
  #entregaveis .impl-entregaveis-left h3.h2 { text-align: center; }
  /* A largura daqui é o que define o tamanho do botão no celular: o .btn tem
     flex: 1 e estica para preencher este container, então padding e fonte não
     alteram a largura dele nesta faixa. */
  .hero-actions { flex-direction: row; flex-wrap: nowrap; justify-content: center; width: 80%; margin-left: auto; margin-right: auto; }
  .hero-actions .btn { flex: 1; text-align: center; justify-content: center; }
  .hero-actions .btn-secondary { font-size: 15px; }
  /* No celular os dois CTAs empilham, o link abaixo do botão.

     A regra logo acima trava flex-wrap em nowrap e a faixa em 80% da largura --
     foi escrita quando a hero tinha um botão só. Com dois lado a lado, e ambos
     em white-space: nowrap dentro de uma .hero que tem overflow: hidden, o
     segundo sairia cortado pela borda em vez de rolar. Empilhados, o problema
     deixa de existir e cada um fica com a linha inteira para si.

     align-items: center porque nesta faixa a hero É centralizada: a regra de
     980px aplica align-items: center e text-align: center no .hero.vb
     .hero-text. Uma versão anterior desta regra usava flex-start, e os botões
     ficavam à esquerda enquanto o h1 e o subtítulo estavam centrados. */
  .hero .hero-actions { flex-direction: column; flex-wrap: nowrap; align-items: center; width: 100%; gap: 15px; }
  .hero .hero-actions > a { width: min(100%, 320px); min-height: 48px; }
  #implementacao .hero-actions { display: flex; flex-direction: column; }
  #implementacao .hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
  #implementacao .hero-actions .btn-secondary { display: none; }
  .impl-pill-mobile { display: block !important; }
  .impl-pill-desktop { display: none !important; }
  #entregaveis .wrap { padding: 0 10px; }
  #entregaveis { padding-top: 50px !important; }
  #implementacao .wrap { padding: 0 10px; }
  #implementacao { padding-bottom: 70px !important; }
  .tl-num { font-size: 45px; }
  .tl-item { grid-template-columns: 56px 1fr; gap: 30px; }
  .tl-body { padding-bottom: 55px; }
  .tl-body-last { padding-bottom: 0; }
  .tl-title { font-size: 24px; }
  .tl-desc { font-size: 16px; padding-right: 10px; }
  .lede { font-size: 16px; }
  .tl-cta-mobile { display: none !important; }
  .mobile-only-br { display: block; }
  .desktop-only-br { display: none; }
  .hero-h1-desktop { display: none; }
  .hero-h1-mobile { display: inline; }
  .hero-l1, .hero-l3 { display: inline; }
  .nav.scrolled .wrap, body.menu-aberto .nav .wrap { padding: 0 10px; }
}


/* ============================================================
   Páginas legais (/politica e /termo)
   ============================================================ */
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: start; }

.legal-toc { position: sticky; top: calc(var(--nav-h) + 32px); }
.legal-toc h2 { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 16px; font-family: var(--mono); }
.legal-toc nav { display: flex; flex-direction: column; gap: 2px; }
.legal-toc nav a { font-size: 13.5px; color: var(--text-muted); padding: 7px 0 7px 14px; border-left: 2px solid var(--border); transition: color .15s, border-color .15s; text-decoration: none; line-height: 1.4; }
.legal-toc nav a:hover { color: var(--text); border-left-color: rgba(138, 138, 142,0.4); }
.legal-toc nav a.active { color: var(--green-text); border-left-color: var(--green-text); font-weight: 500; }

.legal-content { min-width: 0; }

.legal-section { margin-bottom: 56px; padding-bottom: 56px; border-bottom: 1px solid rgba(0,0,0,0.07); }
.legal-section:last-child { border-bottom: none; margin-bottom: 0; }
.legal-section h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 20px; line-height: 1.3; }
.legal-section p { font-size: 15.5px; line-height: 1.75; color: #444; margin-bottom: 14px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { margin: 18px 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.legal-section ul li { font-size: 15.5px; line-height: 1.7; color: #444; padding-left: 22px; position: relative; }
.legal-section ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.legal-section ul li strong { color: #111; }

.legal-note { background: rgba(138, 138, 142,0.05); border: 1px solid rgba(138, 138, 142,0.2); border-radius: var(--r-md); padding: 18px 22px; margin-top: 24px; }
.legal-note p { font-size: 14px; color: #555; margin-bottom: 0; }
.legal-note p strong { color: #111; }

@media (max-width: 980px) {
  .legal-layout { grid-template-columns: 1fr; gap: 0; }
  .legal-toc { position: static; background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--r-lg); padding: 24px; margin-bottom: 48px; }
  .legal-toc nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .legal-toc nav a { padding: 6px 12px; border-left: none; border: 1px solid rgba(0,0,0,0.08); border-radius: 999px; font-size: 13px; }
  .legal-toc nav a.active { background: rgba(138, 138, 142,0.1); border-color: var(--green-text); }
}

@media (max-width: 560px) {
  .legal-toc { display: none; }
  .legal-section h2 { font-size: 19px; }
  .legal-section p, .legal-section ul li { font-size: 15px; }
}

/* ═══ Botão de comparação: verde com pontinhos subindo ═════════════════════
   Versão do botão que o cliente mandou para comparar com o CTA atual do hero.
   As classes originais eram .button / .point / .inner / .icon — genéricas
   demais para uma folha compartilhada, então ganharam o prefixo btn-pontos.
   O <style> que vinha dentro do <button> foi trazido para cá: style no meio
   do body funciona nos navegadores, mas não é válido e o CSS some do alcance
   de quem for procurar depois. */
.btn-pontos {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.25s ease;
  background: var(--cta-verde);
  border-radius: 0.75rem;
  border: none;
  outline: none;
  padding: 10px 23px;
  min-height: 44px;
  min-width: 102px;
  font-family: inherit;
}
/* ═══ 06/10/2026: o efeito do .btn-pontos saiu do site inteiro ════════════
   O botão nasceu com quatro camadas de brilho e foi chapado primeiro só no
   hero e na navbar, por regra escopada. Em 06/10/2026 o dono pediu que TODOS
   ficassem iguais ao do hero, então a neutralização desceu para a BASE e as
   regras escopadas de hero e navbar viraram redundantes (ficam, porque elas
   também ajustam escala e raio, que continuam valendo).

   O que foi desligado, nesta ordem:
     . o brilho radial do fundo, que virou --primary chapado;
     . o ::before e o ::after, duas molduras internas de 1px e 2px em branco
       translúcido que davam o relevo de vidro;
     . o .btn-pontos-wrap, caixa dos dez pontinhos brancos que subiam em loop.
       Os <i> seguem no HTML das cinco páginas: o que os apaga é esta regra, e
       desligar pelo CSS mantém o markup igual em todas elas.

   Sobrevivem de propósito o :active com scale(0.95) e a seta que desliza no
   hover, que são resposta ao toque e não decoração. O hero tem os dois. */
.btn-pontos::before,
.btn-pontos::after { display: none; content: ""; position: absolute; transition: all 0.5s ease-in-out; z-index: 0; }
.btn-pontos::before {
  inset: 1px;
  background: linear-gradient(177.95deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: calc(0.75rem - 1px);
}
.btn-pontos::after {
  inset: 2px;
  background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%),
              linear-gradient(0deg, var(--primary), var(--primary));
  border-radius: calc(0.75rem - 2px);
}
.btn-pontos:active { transform: scale(0.95); }

.btn-pontos-wrap { display: none; overflow: hidden; width: 100%; height: 100%; pointer-events: none; position: absolute; z-index: 1; }
.btn-pontos-point {
  bottom: -10px; position: absolute;
  animation: floating-points infinite ease-in-out;
  pointer-events: none;
  width: 2px; height: 2px;
  background-color: #fff; border-radius: 9999px;
}
@keyframes floating-points {
  0%   { transform: translateY(0); }
  85%  { opacity: 0; }
  100% { transform: translateY(-55px); opacity: 0; }
}
.btn-pontos-point:nth-child(1)  { left: 10%; opacity: 1;   animation-duration: 2.35s; animation-delay: 0.2s; }
.btn-pontos-point:nth-child(2)  { left: 30%; opacity: 0.7; animation-duration: 2.5s;  animation-delay: 0.5s; }
.btn-pontos-point:nth-child(3)  { left: 25%; opacity: 0.8; animation-duration: 2.2s;  animation-delay: 0.1s; }
.btn-pontos-point:nth-child(4)  { left: 44%; opacity: 0.6; animation-duration: 2.05s; }
.btn-pontos-point:nth-child(5)  { left: 50%; opacity: 1;   animation-duration: 1.9s; }
.btn-pontos-point:nth-child(6)  { left: 75%; opacity: 0.5; animation-duration: 1.5s;  animation-delay: 1.5s; }
.btn-pontos-point:nth-child(7)  { left: 88%; opacity: 0.9; animation-duration: 2.2s;  animation-delay: 0.2s; }
.btn-pontos-point:nth-child(8)  { left: 58%; opacity: 0.8; animation-duration: 2.25s; animation-delay: 0.2s; }
.btn-pontos-point:nth-child(9)  { left: 98%; opacity: 0.6; animation-duration: 2.6s;  animation-delay: 0.1s; }
.btn-pontos-point:nth-child(10) { left: 65%; opacity: 1;   animation-duration: 2.5s;  animation-delay: 0.2s; }

.btn-pontos-inner {
  z-index: 2; gap: 6px; position: relative; width: 100%;
  color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 500; line-height: 1.5;
  transition: color 0.2s ease-in-out;
}
.hero .hero-btn-pontos { padding: 12px 30px; text-decoration: none; }
.hero .hero-btn-pontos .btn-pontos-inner { gap: 10px; font-size: 16px; font-weight: 600; }
/* O primário do hero, chapado pelo mesmo motivo e com a mesma mecânica da
   navbar acima. O secundário ao lado dele nunca teve essas camadas: é um
   .btn-secondary comum, com borda, e segue como está. */
/* VERDE NO CTA DO HERO (11/10/2026). Era o charcoal do --primary; passou ao
   --cta-verde, que aponta para o verde dos h2, para o botão principal falar a
   cor da marca. Branco sobre #0F7A5B dá 5,37:1, acima do 4,5:1 que o AA pede
   para o texto de 16px do botão, então a tinta segue --on-primary. A regra
   sobrevive ao token porque o padding e o texto do hero são próprios; o fundo
   em si já viria do base. */
.hero .hero-btn-pontos {
  background: var(--cta-verde);
}
.hero .hero-btn-pontos::before,
.hero .hero-btn-pontos::after { display: none; }
.hero .hero-btn-pontos .btn-pontos-wrap { display: none; }
.hero .hero-btn-pontos .btn-pontos-inner { color: var(--on-primary); }
.hero .hero-actions .btn-secondary { border-color: var(--neutral-300); }
/* O SVG já vem com stroke="currentColor", mas a regra .btn-pontos-icon o
   sobrescreve com #fff, e atributo de apresentação perde para CSS. Devolvendo
   o currentColor aqui, a seta passa a seguir a tinta do texto sozinha: hoje o
   branco sobre o verde, e o que vier depois. Só no botão do hero, porque os outros dois
   que têm seta seguem no verde escuro com texto branco. */
.hero .hero-btn-pontos .btn-pontos-icon { stroke: currentColor; }
.btn-pontos-icon { width: 20px; height: 20px; transition: transform 0.3s ease; stroke: currentColor; fill: none; }
.btn-pontos:hover .btn-pontos-icon { transform: translateX(2px); }
.btn-pontos:hover .btn-pontos-icon path { animation: dash 0.8s linear forwards; }
@keyframes dash {
  0%   { stroke-dasharray: 0, 20;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 10, 10; stroke-dashoffset: -5; }
  100% { stroke-dasharray: 20, 0;  stroke-dashoffset: -10; }
}
/* Os pontinhos sobem em loop infinito; quem pediu menos movimento no sistema
   não deve receber animação permanente na tela. */
@media (prefers-reduced-motion: reduce) {
  .btn-pontos-point { animation: none; }
  .btn-pontos:hover .btn-pontos-icon path { animation: none; }
}

/* ═══ Link com seta: o segundo CTA do hero ════════════════════════════════
   Ao lado do .btn-pontos, mas sem nenhuma moldura: só o texto em verde e a
   seta. Dois botões lado a lado disputam o clique e nenhum vence; sem fundo
   nem borda este não compete com o verde cheio, e a hierarquia se resolve
   sozinha -- o "Teste Grátis" continua sendo a ação, este é a alternativa.

   O min-height de 44px não pinta nada, é área de toque: um texto de 15px tem
   ~23px de altura, metade do alvo mínimo que o dedo precisa. Sem ele o link
   seria confortável no mouse e irritante no celular.

   Esse min-height também é o que alinha os dois: a .hero-actions centraliza
   pelo eixo transversal, e sem altura própria o link seria centrado pela
   caixa do texto, não pela do botão de 44px ao lado. */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: #6C6C6C;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  transition: color .2s ease;
}
/* Parado: verde fechado. Não é o --green-text da marca (#00B873) porque
   aquele, em texto de 15px sobre branco, dá 3,0:1 -- abaixo do mínimo de
   4,5:1 e visivelmente lavado num link sem fundo atrás. Este #047857, que já
   é o verde escuro do degradê da página, fica em 5,5:1.

   Sob o dedo ou o cursor: preto. A troca verde → preto é mais forte que
   qualquer clareamento de verde, e não depende de perceber matiz -- funciona
   também para quem não separa bem verde de verde. */
.link-seta:hover,
.link-seta:focus-visible,
.link-seta:active { color: var(--text); }
/* A seta desliza no hover como a do botão verde ao lado, para os dois
   responderem do mesmo jeito. currentColor faz ela escurecer junto com o
   texto sem precisar de uma segunda regra. */
.link-seta-icon {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  transition: transform 0.3s ease;
}
.link-seta:hover .link-seta-icon { transform: translateX(2px); }

/* O mesmo botão dos pontinhos na navbar, na escala dela: a barra tem 60px de
   altura útil, e os 44px de min-height mais o padding de 23px do hero deixariam
   o CTA dominando a linha. Fonte, padding e radius voltam aos valores que o
   .nav-right .btn já usava. */
.nav-right .btn-pontos { min-height: 34px; min-width: 0; padding: 6px 10px; border-radius: var(--r-sm); text-decoration: none; }
.nav-right .btn-pontos-inner { font-size: 14px; }
/* O CTA da navbar e os dois do hero ficam CHAPADOS: charcoal e nada mais
   (pedido de 05/10/2026). O .btn-pontos nasceu com quatro camadas de efeito
   empilhadas, e as decorativas saem nos dois escopos:

     . o brilho radial que vinha dentro do próprio `background`, substituído
       por uma cor sólida;
     . o ::before, um degradê de vidro branco a 19% sobre o botão;
     . o ::after, que repetia fundo e brilho num segundo plano a 2px de inset;
     . os dez .btn-pontos-point, pontinhos brancos de 2px subindo em loop.
       Eles vêm no HTML, dentro do .btn-pontos-wrap, então o que os desliga é
       esconder o wrapper, não mexer na marcação.

   `background` sólido em vez de `display: none` no ::after: o ::after pintava
   a cor do botão também, e só esconder as camadas deixaria o botão certo por
   acidente, dependendo de o fundo de baixo ter o mesmo valor.

   Escopado de propósito. O .btn-pontos com efeito segue vivo em dois lugares
   desta página (o CTA da dobra de diagnóstico e o do fim da FAQ) e em sete nos
   painéis de agentes. Nenhum deles estava em discussão. */
.nav-right .btn-pontos {
  background: var(--cta-verde);
}
.nav-right .btn-pontos::before,
.nav-right .btn-pontos::after { display: none; }
.nav-right .btn-pontos-wrap { display: none; }
.nav-right .btn-pontos .btn-pontos-inner { color: var(--on-primary); }



/* ═══ Seção "perdendo vendas" · diagnóstico marcável ══════════════════════
   Duas colunas: à esquerda a copy com o contador e o CTA, à direita as seis
   cenas marcáveis. A esquerda é sticky no desktop para o leitor ver o contador
   subir enquanto marca; no celular isso não existe (ver o bloco de 980px).

   Cada item é um <label> com <input type="checkbox"> real dentro. O card
   inteiro vira alvo de clique de graça, e teclado, foco e leitor de tela
   continuam funcionando sem depender do JavaScript. */
.diagnostico { background: #FBFBFB; padding: 90px 0; }
.diag-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.diag-copy { position: sticky; top: 100px; }
/* O numeral é âncora visual, não informação: vai grande e em verde para marcar
   a quantidade antes de o leitor contar. */
.diag-numeral {
  display: block;
  font-family: var(--display);
  font-size: clamp(72px, 9vw, 120px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  margin-bottom: 8px;
}

/* ---------- O verde do título do diagnóstico -----------------------------
   Segundo acento verde da moldura da página, pedido em 05/10/2026: o numeral
   "6" e o trecho marcado do título saem num degradê verde, e o resto do
   título volta ao charcoal.

   POR QUE NÃO É O DEGRADÊ ORIGINAL. Antes da escala de cinza o .grad-verde
   usava `linear-gradient(90deg, #047857, rgba(0,184,115,.9))`. Medido sobre o
   canvas #F7F7F7, esse degradê vai de 5,12:1 na ponta escura a 2,25:1 na
   clara, e o mínimo do AA para texto grande é 3:1. Ele já reprovava antes,
   num título de 40px. Repor aquele valor seria repor o defeito.

   O verde é CHAPADO, no --verde-tinta. Chegou a ser um degradê entre dois
   degraus da rampa, mas o dono fixou um valor único (#128C69), e com uma cor
   só não há degradê a fazer. Se ele voltar, precisa de um segundo ponto
   definido, não derivado por mim.

   As três linhas de `background` e `background-clip` não são enfeite: a regra
   base do .grad-verde pinta por gradiente clipado no texto, com
   `-webkit-text-fill-color: transparent`. Sem anular as três, o texto ficaria
   invisível, porque o text-fill-color vence qualquer `color`.

   Escopado em #perdendo-vendas porque o .grad-verde serve outros quatro
   lugares que seguem em charcoal (o h2 de #clientes nesta página e na planos,
   e o primeiro item dos cartões de plano). O ID vence o
   `body.ds-crm .grad-verde` e o `:has()` sem precisar de !important. */
/* Só o numeral: o trecho marcado do título já vem verde do padrão. E é pelo
   MESMO token do padrão, senão o numeral e o título ao lado dele ficam em
   verdes diferentes -- que foi o que aconteceu em 08/10/2026, quando a ênfase
   de título passou de --verde-tinta para --green-text e esta regra ficou para
   trás por um turno. */
#perdendo-vendas .diag-numeral {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--green-text);
  -webkit-text-fill-color: var(--green-text);
}
/* O título volta ao charcoal cheio. A regra `.h2:has(.grad-verde)` o recuava
   para --neutral-600 porque, em cinza, o trecho marcado ficava mais CLARO que
   a frase e a ênfase saía invertida. Com o trecho em verde esse recuo deixa de
   fazer sentido: quem destaca agora é a cor, não o valor. */
#perdendo-vendas .h2 { color: var(--text); }
.diag-copy .h2 { margin-bottom: 20px; }
/* Mesmo motivo do reset de .grad-verde no breakpoint de 560px: como
   inline-block o trecho em degradê é uma caixa atômica, não começa no meio da
   linha e desce inteiro, deixando órfã a palavra anterior. A coluna aqui é
   estreita já no desktop, então o reset precisa valer em todas as larguras. */
.diag-copy .grad-verde { display: inline; }
.diag-instrucao { font-size: 16px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.diag-instrucao strong { color: var(--text); font-weight: 600; }
/* O painel do contador fica separado da instrução por uma linha, porque ele
   muda e ela não: o leitor precisa saber onde olhar depois de marcar. */
.diag-painel {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border-2);
}
.diag-contador {
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 24px;
  min-height: 58px;
}
.diag-contador strong { color: var(--green-text); font-weight: 700; }

.diag-lista { display: flex; flex-direction: column; gap: 12px; }
.diag-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 20px 22px;
  border: 1px solid var(--border-2);
  border-radius: 16px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
/* O checkbox real some da tela mas continua no fluxo de foco e de leitura. */
.diag-check { position: absolute; opacity: 0; width: 0; height: 0; }
.diag-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid #E7E7E7;
  border-radius: 8px;
  background: #FFFFFF;
  color: #FFFFFF;
  transition: background .14s, border-color .14s;
}
.diag-marca svg { width: 15px; height: 15px; opacity: 0; transition: opacity .14s; }
.diag-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.diag-txt strong { font-size: 16px; line-height: 1.35; color: var(--text); font-weight: 650; letter-spacing: -0.01em; }
.diag-txt > span { font-size: 14.5px; line-height: 1.45; color: var(--text-muted); }

.diag-item:hover { border-color: #E7E7E7; }
/* O foco vem do checkbox escondido e precisa aparecer no card, senão quem
   navega por teclado não enxerga onde está. */
.diag-check:focus-visible ~ .diag-marca { border-color: var(--green-text); }
.diag-item:has(.diag-check:focus-visible) { outline: 3px solid rgba(138, 138, 142, .35); outline-offset: 2px; }

/* Marcado: o card ganha presença e a afirmação é riscada, como na referência.
   O risco comunica "isso aqui é meu", o item vira item cumprido de uma lista
   que o leitor montou. A frase de apoio continua em contraste cheio para a
   cena permanecer legível depois de marcada. */
.diag-item:has(.diag-check:checked) {
  border-color: var(--green-text);
  background: rgba(138, 138, 142, .055);
  box-shadow: 0 10px 28px -22px rgba(29, 29, 29, .45);
}
.diag-check:checked ~ .diag-txt strong {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(7, 16, 13, .45);
  color: var(--text-muted);
}
.diag-check:checked ~ .diag-marca { background: var(--primary); border-color: var(--green-text); }
.diag-check:checked ~ .diag-marca svg { opacity: 1; }

.diag-fecho {
  text-align: center;
  max-width: 680px;
  margin: 64px auto 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
}
.diag-fecho strong { color: var(--text); font-weight: 600; }

@media (max-width: 980px) {
  .diag-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Sticky morre aqui: em coluna única ele cobriria a lista. No celular o
     contador vira a barra fixa de rodapé, que só nasce no primeiro clique. */
  .diag-copy { position: static; }
  .diag-painel { display: none; }
}
@media (max-width: 560px) {
  .diagnostico { padding: 70px 0; }
  /* SEM text-align aqui desde 06/10/2026: o numeral "6", o título e a instrução
     ficam à ESQUERDA no celular, por pedido do dono. Até então o bloco era
     centralizado para acompanhar o hero, que centraliza nesta faixa.

     Uma regra só governava os três, porque nenhum deles tem alinhamento próprio:
     o .diag-numeral é display: block sem margem automática, e o título e a
     instrução são blocos que herdam. Tirando a regra, os três voltam à esquerda
     juntos e passam a casar com os cards da lista ao lado, que nunca foram
     centralizados (texto de lista centralizado perde o ponto de retorno da
     linha). */
  .diag-item { padding: 18px 16px; gap: 12px; }
  .diag-fecho { margin-top: 44px; }
  /* O clamp do numeral encosta no piso de 72px nesta faixa (9vw dá 50px num
     celular de 560px), então o ajuste pedido em 11/10/2026 é sobre o piso:
     77px aqui, e o desktop segue no clamp sem alteração. */
  .diag-numeral { font-size: 77px; }
}

/* Barra de rodapé do celular. Nasce escondida e só entra depois do primeiro
   clique: antes disso seria poluição sobre uma lista que ainda nem foi lida. */
.diag-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--border-2);
  box-shadow: 0 -8px 24px rgba(7, 16, 13, .08);
  transform: translateY(110%);
  transition: transform .22s ease;
}
.diag-barra.visivel { transform: translateY(0); }
/* Teto de 3 linhas: se a frase crescer, ela corta em vez de empurrar a barra
   para cima da lista. */
.diag-barra p {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.diag-barra strong { color: var(--green-text); font-weight: 700; }
.diag-barra .btn-pontos { flex-shrink: 0; padding: 10px 16px; min-height: 42px; min-width: 0; }
.diag-barra .btn-pontos-inner { font-size: 14px; gap: 6px; }
.diag-barra .btn-pontos-icon { width: 16px; height: 16px; }
@media (max-width: 980px) {
  .diag-barra { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .diag-item, .diag-marca, .diag-marca svg, .diag-barra { transition: none; }
}


/* ═══ Seção de implantação assistida ══════════════════════════════════════
   Duas colunas: o argumento à esquerda com o CTA, a lista do que o time faz à
   direita. A lista fica ao lado e não abaixo porque ela É a prova do argumento;
   empilhada, o leitor decide antes de ver o que está incluso. */
.implanta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.implanta-texto { max-width: 480px; }
.implanta-texto .lede { font-size: 18px; margin-top: 18px; }
.implanta-cta { margin-top: 30px; }

.implanta-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.implanta-itens li { display: flex; gap: 14px; align-items: flex-start; }
/* O check vem em cápsula verde clara em vez de solto: sem o fundo ele some
   contra o branco da seção quando a lista fica longa. */
.implanta-ico {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #F2F2F2;
  color: var(--green-text);
  display: inline-flex; align-items: center; justify-content: center;
}
.implanta-ico svg { width: 14px; height: 14px; }
.implanta-itens strong { display: block; font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.implanta-itens span { font-size: 15px; line-height: 1.5; color: var(--text-muted); }

@media (max-width: 980px) {
  /* Empilha, e o texto centraliza para acompanhar o resto da página nesta
     faixa. A lista NÃO centraliza: item de lista centrado perde a leitura em
     coluna, o olho não acha onde cada um começa. */
  .implanta { grid-template-columns: 1fr; gap: 44px; }
  .implanta-texto { max-width: 640px; margin: 0 auto; text-align: center; }
  .implanta-itens { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .implanta-texto .lede { font-size: 17px; }
  .implanta-cta { width: 100%; text-align: center; justify-content: center; }
}


/* ═══ Seção "para quem é" · os oito segmentos ═════════════════════════════
   Grid de 4 colunas que desce para 2 e depois 1. Cartões discretos, com borda
   e sem sombra: a função é o leitor achar o dele em três segundos e seguir,
   não admirar o cartão.

   O <em> é a amarra com a prova: nomeia um cliente real daquele segmento, dos
   depoimentos logo acima. Quatro dos oito têm. Os outros quatro ficam sem, de
   propósito -- inventar nome para fechar a simetria destruiria o valor dos
   quatro verdadeiros. */
.segmentos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.segmento {
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: #FBFBFB;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .2s ease, background .2s ease;
}
.segmento:hover { border-color: var(--border-active); background: #fff; }
.segmento strong { font-size: 16px; font-weight: 600; color: var(--text); }
.segmento span { font-size: 14px; line-height: 1.45; color: var(--text-muted); }
/* A referência ao cliente real fica no pé do cartão, menor e em verde: é
   assinatura de prova, não título. margin-top: auto alinha todas no rodapé da
   linha, mesmo quando a descrição acima tem alturas diferentes. */
.segmento em {
  margin-top: auto;
  padding-top: 10px;
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--green-text);
}

@media (max-width: 980px) { .segmentos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .segmentos { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
  .segmento { padding: 18px; }
}


/* ═══ Stack de valor · ancoragem antes do preço ═══════════════════════════
   Fica entre o título da seção e os planos porque é ela que estabelece a régua:
   quem lê R$ 237 depois de somar R$ 3.486 lê um número diferente de quem lê
   R$ 237 sozinho. Ancoragem só funciona antes, nunca depois.

   Desenho deliberadamente sóbrio: sem gradiente, sem selo, sem "economize
   93%". A conta é forte por si, e enfeite em cima de comparação de preço é o
   que faz o leitor desconfiar dela. */
.stack {
  max-width: 640px;
  margin: 44px auto 0;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
}
.stack-titulo {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-subtle);
  margin: 0 0 18px;
  text-align: center;
}
.stack-itens { list-style: none; margin: 0; padding: 0; }
.stack-itens li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-2);
}
.stack-item { font-size: 16px; color: var(--text); line-height: 1.4; }
/* A qualificação de escopo vem embaixo do item, menor: é ela que impede a
   comparação de virar enganosa, então não pode sumir, mas também não compete
   com o nome do item. */
.stack-item em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--text-subtle);
  margin-top: 2px;
}
/* tabular-nums alinha os dígitos na vertical: sem isso o R$ 989 e o R$ 2.000
   dançam na coluna e a soma perde a cara de conta. */
.stack-valor {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stack-valor i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--text-subtle); }

.stack-total { border-bottom: none; padding-top: 16px; margin-top: 4px; border-top: 2px solid var(--border); }
.stack-total .stack-item { font-weight: 600; }
.stack-total .stack-valor { color: var(--text); font-size: 18px; }

.stack-fecho {
  text-align: center;
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-muted);
}
.stack-fecho strong { color: var(--green-text); font-weight: 600; }

/* As fontes não são letra miúda escondida: são o que torna a comparação
   verificável, e comparação com concorrente nomeado só se sustenta se qualquer
   um puder conferir. Por isso ficam legíveis e com link que abre. */
.stack-fontes {
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-subtle);
  text-align: center;
}
.stack-fontes a { color: var(--text-muted); text-decoration: underline; }
.stack-fontes a:hover { color: var(--green-text); }

/* Garantia entre a ancoragem de valor e os planos. A faixa responde ao risco
   antes de o visitante escolher um preço, sem competir com os cartões. */
.risco-zero {
  max-width: 960px;
  margin: 44px auto 48px;
  padding: 34px 38px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  background: #F1FBF7;
  border: 1px solid rgba(138, 138, 142, 0.24);
  border-radius: var(--r-xl);
  text-align: left;
}
.risco-zero-icone {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(138, 138, 142, 0.13);
  color: var(--green-text);
}
.risco-zero-icone svg { width: 30px; height: 30px; }
.risco-zero-conteudo { text-align: center; }
.risco-zero-label {
  margin: 0 0 9px;
  color: var(--green-text);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.risco-zero h3 {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.risco-zero-texto {
  max-width: 750px;
  margin: 14px auto 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.55;
}
.risco-zero-beneficios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}
.risco-zero-beneficios li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
.risco-zero-beneficios svg {
  width: 18px;
  height: 18px;
  color: var(--green-text);
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .stack { padding: 22px 18px; margin-top: 34px; }
  .stack-itens li { flex-direction: column; gap: 4px; align-items: flex-start; }
  .stack-valor { font-size: 15px; }
  .stack-fecho { font-size: 17px; }
  .risco-zero {
    margin: 34px auto 40px;
    padding: 26px 22px;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .risco-zero-icone { width: 50px; height: 50px; border-radius: 14px; }
  .risco-zero-icone svg { width: 26px; height: 26px; }
  .risco-zero h3 { font-size: 26px; }
  .risco-zero-texto { font-size: 15px; }
  .risco-zero-beneficios { flex-direction: column; gap: 12px; }
}


/* ═══ Linha de prova da hero e rótulo da esteira ══════════════════════════
   A prova vivia na 5ª e na 8ª dobra. Subiu porque o cético não passa da
   primeira linha sem ela. Fica logo abaixo da reversão de risco, menor que
   ela: é confirmação, não argumento. */
.hero-prova {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-subtle);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.hero-prova strong { color: var(--text-muted); font-weight: 600; }
.hero-prova-estrelas { color: var(--dourado); letter-spacing: 1px; font-size: 13px; }
.hero-prova-sep { color: var(--border); }

/* A esteira era uma fileira de logos sem legenda, e logo sem legenda o leitor
   lê como decoração de rodapé. O rótulo diz o que ele está vendo. */
/* --text-muted e nao --text-subtle: o subtle e o --neutral-500 (#8A8A8E), que o
   proprio :root marca como "so a partir de 16px". Aqui o corpo e menor, e o par
   media 3,21:1 contra os 4,5:1 que o AA pede. Medido em 06/10/2026 com
   measure_render + axe-core. Com o muted (#6C6C6C) sobe para 4,90:1. */
.cases-rotulo {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 20px;
  padding: 0 32px;
}

/* O segundo parágrafo do mecanismo, menor que o primeiro: um define, o outro
   detalha. Mesmo tamanho os dois competiriam. */
.lede-2 { font-size: 16px; margin-top: 12px; letter-spacing: -0.3px; }

@media (max-width: 980px) {
  .hero-prova { justify-content: center; }
  .cases-rotulo { text-align: center; }
}
@media (max-width: 560px) {
  .hero-prova { font-size: 13px; gap: 4px; }
  .hero-prova-sep { display: none; }
  .cases-rotulo { padding: 0 10px; font-size: 12px; }
}


/* ═══ Faixa da Meta · o que sobrou da dobra 8 ═════════════════════════════
   Uma linha, fundo azul-claro, ancorada no pé das features. Não tem h2 nem CTA
   próprio de propósito: o CTA que morava ali competia com o dos preços a uma
   dobra de distância, e título de seção para uma garantia técnica é hierarquia
   desperdiçada.

   Fica fora do .wrap para o fundo sangrar de ponta a ponta, com o .wrap
   reaparecendo dentro para o conteúdo respeitar a mesma margem do resto. */
.faixa-meta { background: #F1F6FD; border-top: 1px solid #D9E4F3; padding: 22px 0; }
.faixa-meta .wrap { display: flex; align-items: center; gap: 20px; justify-content: center; }
/* O selo em altura pequena: aqui ele é assinatura, não peça de destaque --
   o lockup grande já vive na pill da hero. */
.faixa-meta-selo { height: 24px; width: auto; flex-shrink: 0; }
.faixa-meta p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); max-width: 720px; }
.faixa-meta strong { color: #0668E1; font-weight: 600; }

@media (max-width: 700px) {
  .faixa-meta { padding: 20px 0; }
  .faixa-meta .wrap { flex-direction: column; gap: 12px; text-align: center; }
  .faixa-meta p { font-size: 14px; }
}


/* ═══ "Em qualquer plano, sem custo extra" · a antiga #beneficios ═════════
   Fica entre os cards de plano e o link de comparação, que é o ponto em que o
   leitor já viu R$ 237 e está caçando a pegadinha. Grid de 2x2 no desktop para
   ocupar a largura dos três cards sem virar uma coluna longa. */
.inclusos {
  max-width: 860px;
  margin: 44px auto 0;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
}
.inclusos-titulo {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.inclusos-itens {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px;
}
.inclusos-itens li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}
.inclusos-itens li::before {
  content: "";
  position: absolute; left: 0; top: 4px;
  width: 15px; height: 15px;
  background: var(--green-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.inclusos-itens strong { color: var(--text); font-weight: 600; }

@media (max-width: 760px) {
  .inclusos { padding: 22px 18px; margin-top: 34px; }
  .inclusos-itens { grid-template-columns: 1fr; gap: 12px; }
}


/* ═══ "Você decide quanto o Rezult faz sozinho" · o controle de volume ═════
   Três degraus de adoção em linha, com a intensidade crescendo da esquerda
   para a direita. A ordem visual importa tanto quanto a textual: o leitor que
   se assustou com os cinco agentes entra pela esquerda e vê que existe um
   primeiro passo pequeno.

   Numeração NÃO é 01/02/03: não é sequência obrigatória, é escolha. Por isso
   "Começo · Meio · Tudo" e não números, que sugeririam que se percorre os três. */
.volume {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.volume-passo {
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  /* --neutral-50 e nao o #FBFBFB de antes: a secao roda sobre BRANCO, e o
     #FBFBFB fica a 1,01:1 dele, ou seja, o cartao nao existia. */
  background: var(--neutral-50);
  padding: 26px 24px;
}
/* Os TRÊS degraus são idênticos desde 06/10/2026. O terceiro tinha borda verde
   e fundo branco, destacado por ser o topo da escala, e o dono pediu que todos
   ficassem iguais.

   Faz sentido no argumento da seção: o título é "VOCÊ define o nível", e
   destacar um dos degraus contradiz isso em silêncio, porque sugere qual é a
   resposta certa antes de o leitor escolher. */
.volume-nivel {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-text);
  margin-bottom: 12px;
}
.volume-passo h3 { font-size: 18px; font-weight: 600; line-height: 1.25; margin: 0 0 10px; }
.volume-passo p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); }

/* A frase de controle: é ela que responde ao medo real do dono de PME, que não
   é ser substituído, é perder a mão. Centrada e isolada para ser lida. */
.volume-fecho {
  margin: 32px auto 0;
  max-width: 620px;
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  font-weight: 500;
}
.volume-cta { display: flex; justify-content: center; margin-top: 28px; }

@media (max-width: 860px) {
  .volume { grid-template-columns: 1fr; gap: 14px; max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
  .volume { margin-top: 34px; }
  .volume-passo { padding: 20px 18px; }
  .volume-passo p { font-size: 14px; }
  .volume-fecho { font-size: 16px; margin-top: 26px; }
  .volume-cta a { width: 100%; }
}

/* ---------- Segmentos atendidos ---------- */
#segmentos { background: var(--neutral-50); padding: 100px 0; }
#segmentos .section-head { max-width: 780px; }
#segmentos .lede { max-width: 620px; margin-inline: auto; }
.segmentos-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: 24px;
  background: var(--neutral-0);
}
.segmento-card {
  min-height: 236px;
  padding: 30px 28px;
  border-right: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.segmento-card:nth-child(4n) { border-right: 0; }
.segmento-card:nth-last-child(-n + 4) { border-bottom: 0; }
.segmento-icone {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border-radius: 13px;
  background: var(--accent-100);
  color: var(--verde-tinta-forte);
}
.segmento-icone svg { width: 21px; height: 21px; }
.segmento-card h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; }
.segmento-card p { margin: 12px 0 0; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.segmento-cta {
  justify-content: space-between;
  background: var(--verde-tinta);
}
.segmento-cta h3 { color: var(--neutral-0); }
.segmento-cta p { color: var(--neutral-300); }
.segmento-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  color: var(--accent-100);
  font-size: 14px;
  font-weight: 600;
}
.segmento-link span { font-size: 18px; line-height: 1; transition: transform .18s ease; }
.segmento-link:hover span { transform: translateX(3px); }
@media (max-width: 980px) {
  #segmentos { padding: 80px 0; }
  .segmentos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segmento-card { min-height: 210px; border-right: 0; border-bottom: 1px solid var(--border-2); }
  .segmento-card:nth-child(odd) { border-right: 1px solid var(--border-2); }
  .segmento-card:nth-last-child(-n + 4) { border-bottom: 1px solid var(--border-2); }
  .segmento-card:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  #segmentos { padding: 70px 0; }
  .segmentos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 20px; }
  .segmento-card { min-height: 216px; padding: 22px 16px; border-right: 0; }
  .segmento-card:nth-child(odd) { border-right: 1px solid var(--border-2); }
  .segmento-card:nth-last-child(-n + 2) { border-bottom: 0; }
  .segmento-card:last-child { min-height: 246px; }
  .segmento-icone { width: 38px; height: 38px; margin-bottom: 18px; border-radius: 12px; }
  .segmento-icone svg { width: 19px; height: 19px; }
  .segmento-card h3 { font-size: 18px; }
  .segmento-card p { margin-top: 8px; font-size: 14px; }
}


/* ---------- Agentes de IA ---------- */
/* A visão geral abre o quadro. Os cinco controles ficam abaixo do conteúdo
   e revelam a descrição detalhada de cada agente. */
.ag-shell {
  overflow: hidden;
  /* Vertical 20px e horizontal 40px desde 06/10/2026. Era 40px nos quatro lados,
     passou por 30px e 15px e parou em 20px, afinado à mão pelo dono. Os dois
     breakpoints abaixo têm padding próprio (28px e 24px no vertical) e NÃO
     acompanharam: a faixa estreita de cima e de baixo funciona na largura do
     desktop, onde o conteúdo respira pelos lados; no celular ela colaria o
     título na borda do cartão. */
  padding: 20px 40px;
  border: 1px solid #E7E7E7;
  border-radius: 24px;
  background: var(--green-text);
}
#agentes .ag-overview-copy :is(.h2, .grad-verde, p, strong) {
  color: var(--neutral-200);
  -webkit-text-fill-color: currentColor;
}
#agentes .ag-overview-copy .h2 { color: #FFFFFF; font-weight: 500; }
#agentes .ag-overview-copy .h2 .grad-verde { color: #FFFFFF; font-weight: 700; }
@media (min-width: 981px) {
  #agentes .ag-overview-copy .h2 { text-wrap: wrap; }
  #agentes .ag-overview-copy .h2 .grad-verde { display: inline; }
}
.ag-stage {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}
.ag-copy-stage { display: flex; align-items: center; min-width: 0; min-height: 500px; }
/* Os quatro agentes em resumo, na coluna onde antes ficava a ilha animada de
   WhatsApp. Desde a remoção da .ag-agent-nav este resumo é a única porta de
   entrada dos agentes na página: os .ag-painel detalhados seguem no HTML, mas
   sem botão que os abra. */
.ag-resumo { display: grid; grid-template-columns: 1fr; gap: 14px; min-width: 0; }
.ag-resumo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 22px 20px;
  border: 1px solid #E7E7E7;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px -32px rgba(29, 29, 29, .3);
}
/* O número marca a ordem do funil: o lead passa pelos quatro nessa sequência. */
.ag-resumo-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(138, 138, 142, .12);
  color: var(--green-text);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.ag-resumo-card h3 { margin: 0; font-size: 17px; line-height: 1.2; letter-spacing: -0.02em; }
.ag-resumo-card p { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.45; }
.ag-painel { display: block; width: 100%; }
.ag-painel-txt { min-width: 0; }
/* [hidden] perde para o display do .ag-painel, então precisa reafirmar. */
.ag-painel[hidden] { display: none; }

.ag-painel--overview {
  display: block;
  margin: 0;
  text-align: left;
}
.ag-overview-copy { display: flex; flex-direction: column; align-items: flex-start; }
.ag-overview-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #6C6C6C;
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ag-overview-copy .h2 {
  max-width: 560px;
  font-size: 35px;
  /* SEM margin-top aqui desde 06/10/2026. Havia 20px, e eles SOMAVAM aos 29px
     de margin-bottom da pill: esta era a única pill do site com 49px até o
     título, contra 29px em todas as outras.

     Some em vez de virar zero porque a regra .ag-overview-pill + .h2 (lá em
     cima) já zera o margin-top que a .h2 traz de nascença. Duas regras de
     mesma especificidade disputavam, e a que vencia era esta, por vir depois
     no arquivo. */
}
.ag-overview-muted { color: var(--text-muted); }
.ag-overview-copy > p {
  max-width: 560px;
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.55;
}
.ag-channel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 30px;
}
.ag-channel strong { color: var(--ink); font-size: 16px; font-weight: 600; }
.ag-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #E7E7E7;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}
.ag-channel-pill img { width: 18px; height: 18px; }

/* Ícone e nome do agente na mesma linha. */
.ag-painel-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
/* O h3 é o nome do agente e o h4 é a promessa. O h4 sai maior de propósito:
   a hierarquia de leitura não é a mesma da hierarquia de marcação, e quem
   vende é a promessa, não o cargo. */
/* O nome do agente vira etiqueta. Continua sendo h3 no HTML, porque a hierarquia
   de cabeçalhos da página depende dele; só a aparência mudou.
   Mesma receita da pílula "MAIS ESCOLHIDO" dos planos: mono, 12px, caixa alta e
   0.04em de tracking. Caixa alta sem tracking fecha as letras e vira bloco. */
.ag-painel-cab h3 {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 100px;
  background: #6C6C6C; color: #FFFFFF;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2;
}
.ag-painel h4 { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink); }
.ag-painel .ag-desc { font-size: 16px; font-weight: 500; color: var(--text-muted); line-height: 1.5; margin-top: 12px; }

/* A lista fica em uma coluna para preservar a leitura na metade textual do card. */
.ag-lista { columns: 1; margin-top: 26px; list-style: none; }
.ag-lista li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--text-muted); line-height: 1.4; margin-bottom: 11px; break-inside: avoid; }
.ag-lista li svg { width: 16px; height: 16px; color: var(--green-text); flex-shrink: 0; margin-top: 2px; }


@media (max-width: 980px) {
  .ag-shell { padding: 28px 24px; }
  .ag-stage { grid-template-columns: 1fr; gap: 20px; }
  .ag-copy-stage { min-height: 380px; }
  .ag-resumo { gap: 12px; }
  .ag-painel h4 { font-size: 23px; }
}
@media (max-width: 560px) {
  .ag-shell { padding: 24px 16px; border-radius: 20px; }
  /* O margin-top: 20px da .h2 saiu DAQUI TAMBÉM em 06/10/2026. Era a segunda
     cópia da mesma regra: a de cima foi removida na mesma data, e esta, por
     estar dentro de media query e vir depois no arquivo, continuava somando os
     20px aos 29px da pill e devolvendo os 49px só no celular. Duas cópias de uma
     regra com o mesmo seletor são sempre uma armadilha: quem corrige uma acha
     que corrigiu as duas. */
  .ag-overview-copy > p { margin-top: 14px; font-size: 16px; }
  .ag-channel { margin-top: 24px; }
  .ag-channel strong { max-width: 270px; font-size: 15px; }
  .ag-copy-stage { min-height: 410px; }
  .ag-resumo { grid-template-columns: 1fr; }
  .ag-resumo-card { padding: 18px 16px; }
}
/* ---------- Como funciona em 3 passos ---------- */
/* O apoio desta seção acompanha a mesma família dos títulos. */
#como-funciona .lede { font-family: var(--display); font-size: 18px; }
.como-funciona-pill { margin-bottom: 29px; }  /* era 14px; alinhado ao hero em 06/10/2026 */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.passo { text-align: center; }
/* A arte fica numa caixa de proporção fixa para as três alinharem, mesmo que os
   desenhos tenham alturas diferentes por dentro. */
.passo-arte { background: #F4F5F4; border-radius: var(--r-lg); padding: 26px; margin-bottom: 22px; }
.passo-arte svg { display: block; width: 100%; height: auto; }
.passo h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.passo p { font-size: 16px; color: var(--text-muted); line-height: 1.5; margin-top: 10px; max-width: 320px; margin-inline: auto; }
.como-funciona-cta { display: flex; justify-content: center; margin-top: 44px; }
.como-funciona-cta .btn-pontos-inner { gap: 10px; font-size: 16px; }

/* Animações dos três mockups. Todas em transform e opacity, que o navegador
   compõe na GPU sem recalcular layout. transform-box: fill-box é obrigatório em
   SVG: sem ele o transform-origin se mede pelo viewBox inteiro, não pelo
   elemento, e a barra cresceria a partir do lugar errado. */

/* 1 · a linha de leitura varre o QR Code de cima a baixo */
.qr-linha { animation: qr-varre 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes qr-varre {
  0%, 8%    { transform: translateY(0);    opacity: 0; }
  12%       { opacity: 1; }
  60%       { transform: translateY(69px); opacity: 1; }
  70%, 100% { transform: translateY(69px); opacity: 0; }
}

/* 2 · os agentes aparecem em sequência e o card vazio pulsa chamando o próximo */
.ag-card-1, .ag-card-2, .ag-card-3 { transform-box: fill-box; transform-origin: center; animation: ag-entra 2.5s ease-in-out infinite; }
.ag-card-2 { animation-delay: .22s; }
.ag-card-3 { animation-delay: .44s; }
@keyframes ag-entra {
  0%        { opacity: 0; transform: scale(.9); }
  12%, 82%  { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(.9); }
}
.ag-novo { animation: ag-pulsa 2.5s ease-in-out infinite; animation-delay: .66s; }
@keyframes ag-pulsa { 0%, 30% { opacity: .25; } 45%, 82% { opacity: 1; } 94%, 100% { opacity: .25; } }

/* 3 · a chamada de boas-vindas ganha vida: participantes entram e o indicador
   verde pulsa, reforçando que a configuração acontece junto com o time. */
.call-person { transform-box: fill-box; transform-origin: center; animation: call-entra 2.5s ease-in-out infinite; }
.call-person-2 { animation-delay: .18s; }
@keyframes call-entra {
  0%, 10% { opacity: 0; transform: scale(.88); }
  24%, 86% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.88); }
}
.call-status { transform-box: fill-box; transform-origin: center; animation: call-pulsa 1.25s ease-in-out infinite; }
@keyframes call-pulsa { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  /* Sem movimento, cada peça fica no estado final: QR lido, agentes visíveis
     e participantes da chamada já conectados. */
  .qr-linha { opacity: 0; animation: none; }
  .ag-card-1, .ag-card-2, .ag-card-3, .ag-novo { opacity: 1; transform: none; animation: none; }
  .call-person, .call-status { opacity: 1; transform: none; animation: none; }
}

@media (max-width: 980px) {
  .passos { grid-template-columns: 1fr; gap: 44px; }
  .passo-arte { max-width: 380px; margin-inline: auto; margin-bottom: 18px; }
}

/* ---------- Esteira de depoimentos ---------- */
/* Duas faixas rolando em sentidos opostos. A esteira sai do limite do .wrap e
   ocupa a viewport inteira; os cards cortados nas bordas comunicam a
   continuidade sem esconder parte útil da faixa com uma máscara. */
/* O padding vertical preserva a borda e a sombra dos cards dentro do overflow.
   A margem negativa devolve esse espaço para a seção não crescer por causa da
   área de proteção. */
.dep-esteira {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  padding: 8px 0;
  margin: -8px -50vw;
  -webkit-mask-image: none;
  mask-image: none;
}
.dep-linha { display: flex; width: max-content; will-change: transform; }
/* A lista está duplicada no HTML, então -50% chega exatamente onde a cópia
   começa e o reinício é invisível. */
.dep-linha.esq { animation: dep-esq 40s linear infinite; }
.dep-linha.dir { animation: dep-dir 47s linear infinite; }
@keyframes dep-esq { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes dep-dir { from { transform: translateX(-50%); }   to { transform: translateX(0); } }
/* Largura e altura fixas. A largura já era fixa; a altura precisa ser também
   porque as duas faixas são containers flex separados: dentro de cada uma o
   flex já iguala os cards pelo mais alto, mas nada faz a faixa de cima bater
   com a de baixo. Os 290px cabem a citação mais longa (5 linhas a 15px) mais
   estrelas, autor e padding. Se um depoimento novo for maior que isso, este
   número precisa subir junto. */
.dep-esteira .tcard { width: 370px; height: 220px; margin-right: 20px; padding: 22px; gap: 16px; flex-shrink: 0; }
/* Dentro da esteira o card não sobe no hover. O translateY de 3px tira a borda
   de baixo do card de debaixo do cursor: o hover cai, o card volta, o hover
   volta, e com transition no transform isso vira oscilação. Na grade de
   planos.html, onde nada se move, o efeito continua valendo. */
.dep-esteira .tcard:hover { transform: none; }

/* Sem bloco de prefers-reduced-motion: por decisão do produto a faixa roda
   sempre, inclusive para quem pede menos movimento no sistema. Era esta regra
   que deixava os depoimentos estáticos em máquinas com "Reduzir movimento"
   ligado no macOS. */
@media (max-width: 560px) {
  .dep-esteira .tcard { width: 320px; height: 235px; margin-right: 14px; }
  .dep-esteira { gap: 14px; }
}

/* ---------- Parceiro oficial da Meta ---------- */
#parceiro-meta { background: color-mix(in srgb, var(--green-text) 7%, #FFFFFF); }
/* Uma única dobra centralizada: o selo oficial abre a conversa e o texto faz
   todo o trabalho de prova, sem competir com uma imagem de produto. */
.meta-grade {
  display: flex;
  justify-content: center;
}

.meta-texto { max-width: 760px; margin: 0 auto; text-align: center; --meta-proof-gap: 20px; }

/* O título acompanha o verde dos demais títulos; o selo oficial permanece intacto. */
.meta-destaque { color: var(--green-text); }

/* Sem line-height aqui: a seção usa o 1.2 do .h2 global. A regra chegou a ter
   1.3 quando o global era 1.1 e o título de três linhas ficava colado; com o
   global já em 1.2, repetir o valor só criaria mais um número para manter em
   sincronia.

   A margem de baixo continua sobrescrita: os 10px do padrão faziam o subtítulo
   parecer a quarta linha do título em vez de um bloco separado. O .lede não tem
   margem de topo, então este número é o vão inteiro. */
.meta-texto .h2 { margin-top: 0; margin-bottom: 16px; }

/* 20px em vez dos 16px do .lede base, e escopado à seção: a regra global serve
   as outras quatro ledes da página, que continuam em 16 e 18px. */
.meta-texto .lede { font-size: 20px; }

/* O selo abre o bloco e usa um único intervalo até o título. */
.meta-partner-pill {
  display: flex;
  width: fit-content;
  margin: 0 0 var(--meta-proof-gap);
  color: var(--ink);
  white-space: nowrap;
}

.meta-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 var(--meta-proof-gap);
}

/* O CTA da seção, no azul da Meta e não no verde do site.

   É o único botão da página que sai da cor da marca, e sai de propósito: a
   seção inteira está emprestando credibilidade da Meta -- fundo azul-claro,
   selo, "parceiros oficiais" em azul -- e um botão verde no meio disso
   quebraria a conversa no exato ponto em que ela pede a ação.

   #0668E1 é o mesmo hex do .meta-azul do título, então os dois andam juntos.
   Texto branco fecha em 4,8:1 sobre ele.

   Herda geometria do .btn (padding, raio, transição); aqui vão só cor, peso e
   a altura de toque de 44px, que o .btn base não garante com seus 8px de
   padding vertical. */
.btn-meta {
  background: #0668E1;
  color: #fff;
  font-weight: 600;
  min-height: 44px;
  margin-top: 28px;
}
.btn-meta:hover { background: #0553B8; transform: translateY(-1px); }

/* O selo é o lockup oficial da Meta e é a única superfície da página onde o
   azul da marca deles aparece. Não recolorir nem recortar: um selo de parceria
   adulterado vale menos que selo nenhum, e o uso é regido pelas diretrizes de
   marca da Meta. */
/* A placa branca que segura o lockup. inline-flex para encolher até o conteúdo:
   em block ela esticaria por toda a coluna e deixaria de ler como placa.

   Borda #D9E4F3: um cinza puxado para o azul, e não o #E4E4E7 neutro. Sobre o
   fundo azul-claro da seção, um cinza sem viés lê como sujeira -- a borda tem
   que pertencer à mesma família de cor do que está atrás dela. É ela que
   desenha a placa: branco sobre #F1F6FD quase não se distingue sozinho. */
.meta-selo-caixa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Bem mais baixa que o desenho original de 86px: o padding caiu de 20 para
     13 de cada lado e o logo de 46 para 28. A altura fecha em 54px. */
  padding: 13px 20px;
  /* A placa abre o bloco, então a margem é de baixo. */
  margin: 0 0 22px;
  border-radius: 11px;
  background: #FFFFFF;
  border: 1px solid #D9E4F3;
  box-shadow: 0 1px 2px rgba(58, 58, 62, 0.05);
}

.meta-badges .meta-selo-caixa { margin: 0; }

.meta-selo { display: block; width: auto; height: 28px; }

@media (max-width: 900px) {
  .meta-texto { max-width: 560px; margin: 0 auto; text-align: center; }
  .meta-partner-pill { margin-left: auto; margin-right: auto; }
}

@media (max-width: 560px) {
  .meta-texto { --meta-proof-gap: 16px; }
  #parceiro-meta .h2 { font-size: 30px; }
  .meta-partner-pill { white-space: normal; justify-content: center; }
  .meta-selo-caixa { padding: 11px 16px; border-radius: 10px; }
  .meta-selo { height: 24px; }
  /* 18px no celular: os 20px do desktop, numa coluna de tela inteira, deixam a
     linha longa demais para leitura confortável. */
  .meta-texto .lede { font-size: 18px; }
}


/* ---------- Painel "WhatsApp Oficial" (ilha React) ---------- */
/* Réplica da coluna de conversa do Multiatendimento. Os valores vieram de
   rezult-crm/src/pages/MultiatendimentoPage.tsx, para quem virar cliente
   encontrar a mesma tela que viu aqui. Três desvios conscientes do original,
   todos por causa da largura: o card ocupa metade de uma .feature-row, não a
   tela inteira do app.
     1. Bolha em 13px e não 14px.
     2. maxWidth de 78% e não 65%: com o avatar comendo 36px, 65% deixava o
        texto numa fita estreita de duas palavras por linha.
     3. Padding simétrico no lugar de "10px 30px 10px 14px": os 30px da direita
        no CRM reservam espaço para o botão de ação no hover, que aqui não
        existe. */
/* Fora do fluxo, preenchendo o .feature-visual (que já é position: relative).
   Duas coisas de uma vez:

   1. Cobre a metade inteira. O .feature-visual é uma ilha escura (redefine
      --surface para --dark-surface lá em cima), então todo pixel descoberto
      apareceria como um bloco preto.
   2. Impede o card de crescer. Com o painel no fluxo, a altura da linha do
      grid passa a ser decidida pelo conteúdo do item mais alto, e cada
      mensagem nova empurrava o card para baixo. `overflow: hidden` não resolve
      isso: a altura intrínseca continua contando na hora de medir a linha.
      Fora do fluxo, a linha é medida só pela coluna de texto, e as mensagens
      antigas somem por cima sem mexer em nada. */
.painel-wpp {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #FAFAFA;
  font-family: var(--sans);
  /* Divisória entre o painel e a coluna de texto. Mesma #E5E5E5 da borda do
     cabeçalho logo abaixo: as duas se encontram num canto, e um segundo tom ali
     apareceria como emenda malfeita. O box-sizing global é border-box, então o
     1px sai de dentro e não estoura o inset. */
  border-left: 1px solid #E5E5E5;
}

/* Nas linhas invertidas o visual fica à ESQUERDA e o texto à direita, então a
   divisória troca de lado. Esta linha (WhatsApp Oficial) não é flip hoje, mas
   duas outras da página são: sem esta regra, flipar a linha jogaria a borda na
   margem externa do card, onde ela não divide nada. */
.feature-row.flip .painel-wpp {
  border-left: none;
  border-right: 1px solid #E5E5E5;
}

/* Classes postas pelo React no slot em que ele montou. No celular a
   .feature-row vira coluna única e o .feature-visual perde o irmão que lhe
   dava altura; com o painel fora do fluxo ele colapsaria para zero. A regra
   está numa classe, e não no #featWhatsapp, para o painel poder mudar de slot
   sem a altura do celular ficar para trás em silêncio. */
.tem-painel-wpp,
.tem-painel-disparos,
.tem-painel-automacao,
.tem-painel-pipeline,
.tem-painel-dashboards { position: relative; }

/* Cabeçalho: branco sobre o #FAFAFA das mensagens, como no app. */
.pw-topo {
  flex-shrink: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
}

.pw-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* O avatar do agente, com o logo da marca. Círculo BRANCO e não verde: o logo é
   preto com o corte verde, e sobre verde ele empastaria. Branco puro sobre o
   #FAFAFA do chat quase não se distingue, então a borda é o que desenha o
   círculo -- a mesma #E5E5E5 do cabeçalho, para não inventar um tom novo.
   O logo ocupa 72%, deixando a folga que um avatar de iniciais teria. */
.pw-avatar-agente {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  overflow: hidden;
}
.pw-avatar-agente img { width: 72%; height: 72%; object-fit: contain; }

.pw-topo-txt { flex: 1; min-width: 0; }
.pw-topo-nome {
  font-size: 14px;
  font-weight: 600;
  color: #111111;
  letter-spacing: -0.01em;
}

/* A pill da linha conectada. É ela que honra o "Oficial" do título do card:
   quem usa API não oficial não tem linha nomeada para mostrar. */
.pw-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 8px 3px 6px;
  background: #E1F5EE;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: #128A68;
  letter-spacing: -0.01em;
}
.pw-ico-wpp { flex-shrink: 0; }

.pw-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}
.pw-status-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #128A68;
  animation: pw-pulso 1.6s ease-in-out infinite;
}

@keyframes pw-pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.8); }
}

/* Coluna ancorada embaixo. Quando a conversa passa da altura do card, as
   mensagens antigas sobem e o overflow as corta, que é o comportamento de um
   chat de verdade. Sem medir altura e sem remover nó na mão, ao contrário do
   animateWpp que existia aqui antes. */
.pw-msgs {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
  background: #FAFAFA;
}

.pw-linha {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  /* `backwards` segura o estado inicial no frame em que o React insere a
     linha: sem ele a mensagem pisca no lugar final antes de a animação rodar. */
  animation: pw-entra .28s ease-out backwards;
}
.pw-linha-agente { justify-content: flex-end; }

@keyframes pw-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.pw-bloco { max-width: 78%; min-width: 0; }

.pw-quem {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.pw-linha-agente .pw-quem { text-align: right; }
.pw-hora { color: #AAAAAA; font-weight: 400; }

.pw-bolha {
  padding: 9px 12px;
  border-radius: 4px 16px 16px 16px;
  background: #FFFFFF;
  color: #111111;
  border: 1px solid #EEEEEE;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.pw-bolha-agente {
  border-radius: 16px 4px 16px 16px;
  background: #128A68;
  color: #FFFFFF;
  border: none;
  box-shadow: none;
}

.pw-digitando { display: flex; align-items: center; gap: 4px; padding: 11px 14px; }
/* Cinza por padrão, que é a bolha branca da lead; branco só dentro da bolha
   verde da agente. Ao contrário, os pontinhos da lead seriam brancos sobre
   branco e ela pareceria não estar digitando nada. */
.pw-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  animation: pw-ponto 1.2s infinite;
}
.pw-bolha-agente .pw-ponto { background: rgba(255, 255, 255, 0.75); }
.pw-ponto:nth-child(2) { animation-delay: .2s; }
.pw-ponto:nth-child(3) { animation-delay: .4s; }

@keyframes pw-ponto {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* A .feature-row vira coluna única aqui (não em 560px). O painel deixa de estar
   AO LADO do texto e passa a estar ABAIXO dele, então a divisória vira borda de
   topo: uma borda lateral ali correria rente à margem do card sem separar nada. */
@media (max-width: 980px) {
  .painel-wpp,
  .feature-row.flip .painel-wpp {
    border-left: none;
    border-right: none;
    border-top: 1px solid #E5E5E5;
  }
  /* A altura vai no slot, não no painel: o painel está fora do fluxo e não
     tem de onde herdar altura quando a linha vira coluna única. Precisa valer
     no MESMO breakpoint em que a coluna única começa (980px). Quando ficava só
     em 560px, entre 561px e 980px o slot colapsava para zero e os três painéis
     sumiam da página. */
  .tem-painel-wpp { height: 380px; }
  .tem-painel-disparos { height: 360px; }
  .tem-painel-dashboards { height: 360px; }
  .tem-painel-automacao { height: 300px; }
  .tem-painel-pipeline { height: 330px; }
}

@media (max-width: 560px) {
  .pw-bolha { font-size: 12.5px; }
  .pw-bloco { max-width: 82%; }
}

/* Menos movimento: o React já entrega a conversa inteira parada; aqui somem o
   pulso do status, os pontinhos e a entrada das linhas. */
@media (prefers-reduced-motion: reduce) {
  .pw-status-ponto, .pw-ponto, .pw-linha { animation: none; }
}

/* ---------- Painel "Automações Avançadas" (ilha React) ---------- */
/* Réplica do canvas de automações. Valores de
   rezult-crm/src/pages/AutomacoesPage.tsx: fundo pontilhado de 20px, nó branco
   com borda #D1D5DB e raio 12, chip do gatilho em #F0FDF4/var(--neutral-200), chips de
   ação em var(--neutral-50)/var(--neutral-300), operações de campos em #F0FDF4/var(--neutral-150), porta de
   saída var(--neutral-900) e linha ortogonal tracejada var(--neutral-300).

   Mesmas duas armadilhas do painel de WhatsApp, resolvidas do mesmo jeito: o
   .feature-visual é ilha escura (todo pixel descoberto vira bloco preto) e um
   filho no fluxo faria a altura da linha do grid crescer com o conteúdo. Daí o
   position: absolute; inset: 0. */
/* ---------- Painel de dashboards ----------
   Réplica do dashboard do CRM (rezult-crm, src/pages/DashboardPage.tsx): o
   título "Desempenho geral do seu negócio", o seletor de período, os KPIs do
   topo e o funil com a conversão por etapa. Os números contam do zero e as
   barras entram uma a uma quando o card chega à tela. */
.painel-dashboards {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #E4E4E4;
  border-radius: 16px;
  background: #FFFFFF;
  font-family: var(--sans);
}
.pdb-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pdb-titulo { font-size: 17px; font-weight: 600; color: #1D1D1D; line-height: 1.2; letter-spacing: -0.03em; }
.pdb-sub { font-size: 11px; color: #737373; }
.pdb-periodo { flex-shrink: 0; padding: 6px 9px; border: 1px solid #E4E4E4; border-radius: 7px; background: #FFFFFF; font-size: 10px; font-weight: 500; color: #525252; }

.pdb-filtros { display: flex; align-self: center; max-width: 100%; overflow: hidden; border: 1px solid #E4E4E4; border-radius: 8px; background: #FFFFFF; }
.pdb-filtros span { padding: 6px 8px; color: #737373; font-size: 9.5px; font-weight: 500; white-space: nowrap; }
.pdb-filtros .ativo { border-radius: 6px; background: #1D1D1D; color: #FFFFFF; }

.pdb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.pdb-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #E4E4E4;
  border-radius: 9px;
  background: #FFFFFF;
}
.pdb-kpi-rotulo { font-size: 9px; color: #737373; line-height: 1.2; }
.pdb-kpi-valor { overflow: hidden; font-size: 15px; font-weight: 650; color: #1D1D1D; line-height: 1.15; letter-spacing: -0.035em; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdb-kpi-var { display: inline-flex; align-self: flex-start; padding: 2px 4px; border-radius: 3px; background: #F2F2F2; color: #525252; font-size: 8px; font-weight: 600; }
.pdb-kpi small { overflow: hidden; color: #8A8A8E; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.pdb-resultados { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(118px, .85fr); gap: 9px; }
.pdb-grafico, .pdb-responsavel { min-width: 0; padding: 10px; border: 1px solid #E4E4E4; border-radius: 9px; background: #FFFFFF; }
.pdb-grafico { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pdb-bloco-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pdb-bloco-cab strong { display: block; color: #303030; font-size: 10px; font-weight: 600; line-height: 1.25; }
.pdb-bloco-cab span { display: block; margin-top: 2px; color: #8A8A8E; font-size: 8.5px; line-height: 1.25; }
.pdb-medida { flex-shrink: 0; margin-top: 0 !important; padding: 4px 6px; border: 1px solid #E8E8E8; border-radius: 6px; background: #FAFAFA; color: #525252 !important; font-size: 8px !important; font-weight: 600; }
.pdb-grafico svg { display: block; flex: 1; min-height: 0; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.pdb-grade { fill: none; stroke: #E9E9E9; stroke-dasharray: 3 4; stroke-width: 1; }
.pdb-linha { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.pdb-linha--escura { stroke: #1D1D1D; } .pdb-linha--coral { stroke: #FF655C; } .pdb-linha--verde { stroke: #00B873; }
.pdb-eixos text { fill: #8A8A8E; font-family: var(--sans); font-size: 8px; }
.pdb-animar .pdb-linha { stroke-dasharray: 500; stroke-dashoffset: 500; animation: pdb-desenha 1.25s cubic-bezier(.2,.8,.3,1) forwards; }
.pdb-animar .pdb-linha--coral { animation-delay: .12s; } .pdb-animar .pdb-linha--verde { animation-delay: .24s; }
@keyframes pdb-desenha { to { stroke-dashoffset: 0; } }

.pdb-responsavel { display: flex; flex-direction: column; }
.pdb-donut { display: grid; width: 74px; height: 74px; place-content: center; align-self: center; margin: 8px 0; border-radius: 50%; background: radial-gradient(circle at center, #FFFFFF 0 52%, transparent 53%), conic-gradient(#1D1D1D 0 88%, #C8C8CC 88% 100%); text-align: center; }
.pdb-donut b { color: #1D1D1D; font-size: 20px; line-height: 1; }.pdb-donut span { margin-top: 2px; color: #8A8A8E; font-size: 8px; }
.pdb-ranking { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 7px; border-top: 1px solid #EEEEEE; }
.pdb-ranking span { display: flex; align-items: center; gap: 5px; color: #525252; font-size: 8.5px; }.pdb-ranking i { width: 5px; height: 5px; border-radius: 50%; background: #1D1D1D; }.pdb-ranking span:nth-child(2) i { background: #B4B4B7; }.pdb-ranking b { margin-left: auto; color: #303030; }

@media (prefers-reduced-motion: reduce) {
  .pdb-linha { animation: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}
@media (max-width: 560px) {
  .painel-dashboards { padding: 13px; }.pdb-periodo { font-size: 8px; }.pdb-filtros { align-self: stretch; }.pdb-filtros span { flex: 1; padding-inline: 5px; font-size: 8px; text-align: center; }.pdb-kpi { padding: 7px; }.pdb-kpi-valor { font-size: 12px; }.pdb-kpi-rotulo, .pdb-kpi small { font-size: 7.5px; }.pdb-resultados { grid-template-columns: 1fr; }.pdb-responsavel { display: none; }
}

/* ---------- Painel de disparos em massa ----------
   Réplica da tela de disparos do CRM (rezult-crm, src/pages/DisparosPage.tsx e
   src/data/disparos.ts). Os quatro ritmos, as cadências e os pares de cor dos
   chips de status são os mesmos de lá; nada de tom inventado. */
.painel-disparos {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
  background: #FAFAFA;
  font-family: var(--sans);
}
.pd-topo { display: flex; align-items: flex-start; gap: 12px; }
.pd-topo-txt { flex: 1; min-width: 0; }
.pd-titulo { font-size: 14px; font-weight: 600; color: #111111; line-height: 1.3; }
/* O filtro é o ponto do recurso: o disparo nasce de quem já está no CRM, não
   de uma planilha importada. Por isso ele fica no cabeçalho, não escondido. */
.pd-filtro { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11.5px; color: #737373; }
.pd-filtro svg { width: 12px; height: 12px; }
.pd-status { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 4px 9px; border-radius: 100px; background: #E0F2FE; color: #0369A1; font-size: 10.5px; font-weight: 600; }
.pd-status-ponto { width: 6px; height: 6px; border-radius: 50%; background: #0EA5E9; }

.pd-ritmos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pd-ritmo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 4px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  color: #525252;
}
.pd-ritmo small { font-size: 9.5px; font-weight: 500; color: #9CA3AF; }
.pd-ritmo svg { width: 11px; height: 11px; }
/* "Humano" fica selecionado porque é o ritmo que separa o recurso de um
   disparador comum: espaça as mensagens como uma pessoa faria. */
.pd-ritmo.ativo { border-color: #128A68; background: #F0FDF4; color: #128A68; }
.pd-ritmo.ativo small { color: #15803D; }

.pd-progresso-txt { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: #737373; margin-bottom: 6px; }
.pd-progresso-txt strong { color: #111111; font-size: 13px; }
.pd-progresso-pct { font-family: var(--mono); font-size: 11px; color: #128A68; }
.pd-barra { height: 5px; border-radius: 100px; background: #E8E7E0; overflow: hidden; }
.pd-barra i { display: block; height: 100%; border-radius: 100px; background: #128A68; transition: width .5s ease; }

.pd-fila { display: flex; flex-direction: column; gap: 7px; list-style: none; margin: 0; padding: 0; min-height: 0; }
.pd-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid #E8E7E0;
  border-radius: 10px;
  background: #FFFFFF;
  transition: border-color .25s, box-shadow .25s;
}
/* O item que está saindo agora ganha a borda da marca, para o olho encontrar a
   frente da fila sem precisar ler os chips. */
.pd-item.ativo { border-color: #93C5FD; box-shadow: 0 0 0 3px rgba(59, 130, 246, .10); }
.pd-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; color: #FFFFFF; font-size: 10px; font-weight: 600; }
.pd-item-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pd-item-txt strong { font-size: 12.5px; font-weight: 600; color: #111111; line-height: 1.25; }
.pd-item-txt small { font-size: 10.5px; color: #9CA3AF; }
.pd-chip { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 3px 8px; border-radius: 100px; font-size: 10px; font-weight: 600; }
.pd-chip svg { width: 10px; height: 10px; }

@media (prefers-reduced-motion: reduce) {
  .pd-barra i, .pd-item { transition: none; }
}

.painel-automacao {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  background: #FBFBFB;
  background-image: radial-gradient(circle, #E8E8E8 1px, transparent 1px);
  background-size: 20px 20px;
  font-family: var(--sans);
  border-left: 1px solid #E5E5E5;
}
.feature-row.flip .painel-automacao { border-left: none; border-right: 1px solid #E5E5E5; }

/* O palco mede a largura disponível (é ele que o ResizeObserver observa) e
   centra o fluxo encolhido. O padding lateral é o que impede o nó da ponta de
   encostar na borda do card. */
.pa-palco {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

/* A câmera recorta o enquadramento de dois nós; o fluxo, mais largo que ela,
   desliza dentro para acompanhar a montagem. Sem o overflow aqui os nós que
   ainda não entraram em cena vazariam pelas bordas do card. */
.pa-camera {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  transform-origin: center center;
}

.pa-fluxo {
  position: absolute;
  left: 0;
  top: 0;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0.05, 0.25, 1);
}

.pa-linhas { position: absolute; inset: 0; overflow: visible; pointer-events: none; }

.pa-linha {
  fill: none;
  stroke: #CBD5E1;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 5;
}

/* O retângulo de corte que revela a linha. fill-box ancora o scaleX no canto
   esquerdo do próprio retângulo, que coincide com o início do traço. */
.pa-corte {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .75s cubic-bezier(0.4, 0, 0.2, 1);
}
.pa-corte-feito { transform: scaleX(1); }

.pa-no {
  position: absolute;
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  /* Entra crescendo de 96%, o suficiente para ler como "apareceu agora" sem
     virar um salto. `backwards` segura o estado inicial no frame em que o React
     insere o nó. */
  animation: pa-no-entra .38s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

@keyframes pa-no-entra {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

.pa-no-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px 8px;
  border-bottom: 1px solid #E5E5E5;
}
.pa-no-ico { display: flex; width: 13px; height: 13px; flex-shrink: 0; }
.pa-no-ico svg { width: 100%; height: 100%; }
.pa-no-titulo {
  font-size: 12px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-no-corpo { padding: 9px 11px 10px; }

.pa-chip {
  border-radius: 7px;
  padding: 6px 8px;
  animation: pa-chip-cai .3s ease-out backwards;
}
/* Cai de cima para dentro do nó, que é a direção de quem soltou o bloco ali. */
@keyframes pa-chip-cai {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.pa-chip-gatilho { background: #F0FDF4; border: 1px solid #86EFAC; }
.pa-chip-titulo { font-size: 10.5px; font-weight: 600; color: #15803D; line-height: 1.25; }
.pa-chip-desc { font-size: 9.5px; color: #4ADE80; margin-top: 2px; line-height: 1.25; }

.pa-chip-campos { background: #F0FDF4; border: 1px solid #BBF7D0; }
.pa-chip-acoes  { background: #FFF7ED; border: 1px solid #FED7AA; }
.pa-chip-campos, .pa-chip-acoes { display: flex; align-items: center; gap: 6px; }

.pa-chip-ico { display: flex; width: 11px; height: 11px; flex-shrink: 0; }
.pa-chip-ico svg { width: 100%; height: 100%; }
.pa-chip-txt {
  font-size: 10.5px;
  color: #374151;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reserva a altura do chip que ainda vai entrar. Sem isso o nó cresceria no
   instante em que o chip cai e sacudiria a linha já desenhada. */
.pa-chip-vazio { height: 25px; }
.pa-chip-vazio-alto { height: 41px; }

.pa-porta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
  padding-right: 6px;
  font-size: 9.5px;
  color: #6B7280;
  line-height: 1.2;
}
/* Nos nós que não são o gatilho a bolinha aparece sozinha, sem rótulo: a linha
   fica só com ela, encostada na direita. */
.pa-porta-nua { justify-content: flex-end; min-height: 12px; }

.pa-porta-ponto {
  position: absolute;
  right: -17px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #378ADD;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 3px rgba(55, 138, 221, 0.25);
}

/* A tela de seleção que abre quando a linha é solta. Versão compacta do diálogo
   do CRM (620x480): barra lateral de categorias à esquerda, cards de opção à
   direita. Fica acima dos nós no empilhamento, como um diálogo de verdade. */
.pa-picker {
  position: absolute;
  z-index: 6;
  width: 268px;
  display: flex;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  animation: pa-picker-abre .22s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

@keyframes pa-picker-abre {
  from { opacity: 0; transform: scale(.94) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.pa-picker-lado {
  width: 84px;
  flex-shrink: 0;
  border-right: 1px solid #E5E5E5;
  padding: 9px 0;
}
.pa-picker-titulo {
  padding: 0 9px 8px;
  font-size: 9.5px;
  font-weight: 600;
  color: #111111;
  line-height: 1.2;
}
.pa-picker-cat {
  padding: 5px 9px;
  font-size: 9px;
  color: #374151;
  border-left: 2px solid transparent;
  line-height: 1.2;
}
/* Categoria selecionada, no mesmo verde do CRM. */
.pa-picker-cat-ativa {
  background: #F0FDF4;
  border-left-color: var(--green-text);
  color: var(--green-text);
  font-weight: 600;
}

.pa-picker-lista { flex: 1; min-width: 0; padding: 9px; display: flex; flex-direction: column; gap: 5px; }

.pa-picker-op {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid #E5E5E5;
  border-radius: 7px;
  background: #FFFFFF;
  transition: border-color .12s, background .12s;
}
/* Opção sob o ponteiro: é o estado de hover do CRM. */
.pa-picker-op-acesa { border-color: var(--primary); background: #F0FDF4; }

.pa-picker-seta { display: flex; width: 10px; height: 10px; flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.pa-picker-seta svg { width: 100%; height: 100%; }
.pa-picker-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pa-picker-op-titulo { font-size: 9.5px; font-weight: 600; color: #111111; line-height: 1.25; }
.pa-picker-op-desc { font-size: 8.5px; color: #6B7280; line-height: 1.3; }

/* O ponteiro que monta a automação. Dentro do .pa-fluxo, então encolhe junto
   com o canvas: ele é parte do desenho, e não um cursor do sistema por cima.
   A duração da transição vem inline, da mesma constante que temporiza a etapa
   de arrasto, para a ponta da linha e o ponteiro chegarem juntos. */
.pa-cursor {
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 5;
  pointer-events: none;
  transition-property: left, top;
  transition-timing-function: cubic-bezier(0.4, 0.05, 0.25, 1);
  animation: pa-cursor-entra .25s ease-out backwards;
}

@keyframes pa-cursor-entra {
  from { opacity: 0; transform: translate(6px, -6px); }
  to   { opacity: 1; transform: none; }
}

.pa-cursor-seta { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
/* Encolhe no instante do clique, como um ponteiro real afunda ao pressionar. */
.pa-cursor-pressionado .pa-cursor-seta { transform: scale(.86); transform-origin: top left; }

/* Anel do clique, saindo da ponta da seta. */
.pa-cursor-anel {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid #378ADD;
  opacity: 0;
}
.pa-cursor-pressionado .pa-cursor-anel { animation: pa-clique .5s ease-out; }

@keyframes pa-clique {
  from { opacity: .7; transform: scale(.25); }
  to   { opacity: 0;  transform: scale(1.25); }
}

@media (max-width: 980px) {
  .painel-automacao,
  .feature-row.flip .painel-automacao {
    border-left: none;
    border-right: none;
    border-top: 1px solid #E5E5E5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pa-no, .pa-chip, .pa-cursor, .pa-cursor-anel, .pa-picker { animation: none; }
  .pa-corte, .pa-cursor, .pa-fluxo { transition: none; }
}

/* ---------- Painel "CRM Automatizado" (ilha React) ---------- */
/* Réplica do kanban do Pipeline. Valores de
   rezult-crm/src/pages/PipelinePage.tsx: card branco com borda e raio 12,
   avatar de 32px na cor da coluna, nome em 14px/500, empresa em 12px cinza,
   número do negócio em 10px mono, selo do agente #6D28D9 sobre #EDE9FE e tags
   em pílula branca sobre a cor cadastrada.

   Mesmas duas armadilhas dos outros painéis, resolvidas do mesmo jeito: o
   .feature-visual é ilha escura (todo pixel descoberto vira bloco preto) e um
   filho no fluxo faria a altura da linha do grid crescer com o conteúdo. */
.painel-pipeline {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  background: #FBFBFB;
  font-family: var(--sans);
  border-left: 1px solid #E5E5E5;
}
.feature-row.flip .painel-pipeline { border-left: none; border-right: 1px solid #E5E5E5; }

/* O padding é o respiro que impede as colunas de encostarem nas bordas do card.
   Como o palco é quem o ResizeObserver mede, o clientWidth/clientHeight que
   chega ao cálculo da escala já vem descontado dele.

   align-items: flex-start, e não center: com o quadro centrado na vertical, um
   padding-top de 5px não teria efeito nenhum num slot alto -- a sobra se
   dividiria igualmente em cima e embaixo. Ancorado no topo, os 5px valem. */
.pp-palco {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5px 16px 16px;
}

/* overflow: hidden recorta o que passa dos três lugares de cada coluna. Sem
   ele, os cards da fila que ainda não couberam apareceriam derramados sobre o
   rodapé do card da página. A máscara desfaz a linha de corte reta no pé,
   sinalizando que há mais coisa embaixo em vez de parecer conteúdo cortado. */
.pp-quadro {
  position: relative;
  flex-shrink: 0;
  transform-origin: top center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}

.pp-coluna {
  position: absolute;
  top: 0;
  background: #FFFFFF;
  border: 1px solid #ECECEE;
  border-radius: 10px;
  overflow: hidden;
}
/* Faixa colorida no topo da coluna, como no funil real. */
.pp-coluna-faixa { position: absolute; left: 0; right: 0; top: 0; height: 4px; }

.pp-coluna-topo { padding: 9px 9px 0; display: flex; flex-direction: column; gap: 2px; }
.pp-coluna-linha { display: flex; align-items: center; gap: 6px; }
.pp-coluna-ponto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pp-coluna-nome {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #111111;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-coluna-mais { display: flex; width: 12px; height: 12px; flex-shrink: 0; color: #A1A1AA; }
.pp-coluna-mais svg { width: 100%; height: 100%; }
/* O total por coluna e a peca mais persuasiva do painel: ele recalcula a cada
   movimento, entao o leitor ve o dinheiro migrar de 'Novo lead' para 'Reuniao
   agendada' sem ninguem arrastar nada. Estava em 9px cinza claro, com peso de
   metadado. Sobe para 10px, #3F3F46 e peso 600 -- ainda subordinado ao nome da
   etapa, mas legivel como informacao, nao como rodape.
   Origem: sessao de copy de 2026-09-12, depois do teardown do AuditIA, que
   mostra dinheiro em risco na landing deles como prova principal. */
.pp-coluna-resumo { font-size: 10px; color: #3F3F46; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Posição absoluta, e não empilhado dentro da coluna: mudar de etapa vira um par
   de coordenadas novo, que o CSS anima. Dentro da coluna seria remover de um pai
   e inserir em outro, e aí o card sumiria de um lado e apareceria no outro sem
   trajeto nenhum. */
.pp-card {
  position: absolute;
  box-sizing: border-box;
  padding: 8px 9px 7px;
  background: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: left .62s cubic-bezier(0.4, 0.05, 0.25, 1),
              top .62s cubic-bezier(0.4, 0.05, 0.25, 1);
}

.pp-card-topo { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pp-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  /* Acompanha a cor da coluna, então muda no meio do trajeto: é o sinal mais
     barato de que o card mudou de etapa. */
  transition: background .62s ease;
}
.pp-card-nome {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  color: #18181B;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-card-num { font-size: 8.5px; color: #A1A1AA; flex-shrink: 0; }

.pp-resp { display: flex; align-items: center; gap: 5px; margin-top: 6px; min-width: 0; }
.pp-resp-foto {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #E4E4E7;
  color: #71717A;
}
.pp-resp-foto svg { width: 9px; height: 9px; }
.pp-resp-foto img { width: 78%; height: 78%; object-fit: contain; }
/* Quando quem responde é o agente, o círculo fica branco com borda, que é como
   o logo da marca foi desenhado para ser visto. */
.pp-resp-agente .pp-resp-foto { background: #FFFFFF; border: 1px solid #E5E5E5; }
.pp-resp-nome {
  font-size: 9px;
  color: #71717A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-resp-agente .pp-resp-nome { color: #128A68; font-weight: 500; }

.pp-valor {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #128A68;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.pp-data { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 8.5px; color: #71717A; }
.pp-data-ico { display: flex; width: 9px; height: 9px; flex-shrink: 0; }
.pp-data-ico svg { width: 100%; height: 100%; }

/* Botão do WhatsApp, encostado na direita como no card real. O margin-top auto
   empurra ele e o rodapé para baixo, então cards com mais ou menos tags mantêm o
   rodapé alinhado entre si. */
/* Sem fundo nem raio: o círculo verde é desenhado dentro do próprio SVG, como
   no WhatsAppIcon.tsx do CRM. Este elemento só posiciona. */
.pp-wpp { align-self: flex-end; margin-top: auto; display: flex; }
.pp-wpp svg { width: 17px; height: 17px; display: block; }

/* Nada dentro do card encolhe. Sem isto, quando a soma das linhas passava da
   altura do card por um fio, o flex comprimia todas elas -- e o botão do
   WhatsApp, que é o único quadrado, virava um oval achatado. */
.pp-card > * { flex-shrink: 0; }

.pp-rodape {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #F1F1F3;
}
/* nowrap: o card tem altura fixa, então uma tag a mais NÃO pode empurrar a
   linha para baixo e vazar pelo pé. Se um dia entrar uma terceira, ela some
   pela direita em vez de quebrar o card -- falha menor e mais fácil de notar. */
.pp-tags { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 3px; overflow: hidden; }
.pp-tag {
  padding: 1px 5px;
  border-radius: 100px;
  color: #FFFFFF;
  font-size: 8px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  animation: pp-entra .34s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.pp-etiqueta { display: flex; width: 11px; height: 11px; flex-shrink: 0; color: #A1A1AA; }
.pp-etiqueta svg { width: 100%; height: 100%; }

@keyframes pp-entra {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .painel-pipeline,
  .feature-row.flip .painel-pipeline {
    border-left: none;
    border-right: none;
    border-top: 1px solid #E5E5E5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-tag { animation: none; }
  .pp-card, .pp-avatar { transition: none; }
}


/* ---------- CRM passivo x CRM ativo (antes e depois) ---------- */
/* Formato inspirado na comparação do sonartrack.pro: cartão | conector | cartão.
   O conector tem largura fixa para os dois cartões ficarem do mesmo tamanho. */
.vs { display: grid; grid-template-columns: 1fr 76px 1fr; align-items: stretch; max-width: 1100px; margin: 48px auto 0; }
.vs-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid; border-radius: 20px; padding: 28px 28px 24px; overflow: hidden; }
.vs-passivo { border-color: rgba(180, 180, 183, 0.28); background: linear-gradient(180deg, rgba(180, 180, 183, 0.07), #FFFFFF 55%); }
.vs-ativo { border-color: rgba(29, 29, 29, 0.34); background: linear-gradient(180deg, rgba(29, 29, 29, 0.0495), #FFFFFF 55%); box-shadow: 0 24px 60px -34px rgba(29, 29, 29, 0.45); }

.vs-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid; border-radius: 999px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.vs-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
.vs-passivo .vs-pill { color: var(--neutral-500); border-color: rgba(180, 180, 183, 0.3); background: rgba(180, 180, 183, 0.05); }
.vs-ativo .vs-pill { color: var(--neutral-900); border-color: rgba(29, 29, 29, 0.38); background: rgba(29, 29, 29, 0.0385); }

.vs-num { margin: 28px 0 0; font-family: var(--sans); font-size: clamp(52px, 6.4vw, 88px); font-weight: 700; line-height: 0.95; letter-spacing: -0.045em; }
.vs-passivo .vs-num { color: var(--neutral-400); }
.vs-ativo .vs-num { background: linear-gradient(90deg, var(--neutral-700), var(--neutral-800)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vs-rotulo { margin: 12px 0 0; font-family: var(--mono); font-size: 13px; color: var(--text-muted); }
/* Três linhas reservadas nos dois cartões: sem isso o texto mais longo empurra
   gráfico e lista para baixo e os dois lados deixam de ficar alinhados. */
.vs-frase { margin: 14px 0 0; max-width: 42ch; min-height: 4.5em; font-size: 16px; line-height: 1.5; }
.vs-passivo .vs-frase { color: var(--neutral-500); }
.vs-ativo .vs-frase { color: var(--text); }

/* Altura segue a largura (height: auto): assim o ponto final continua redondo. */
.vs-grafico { margin: 26px -28px 0; }
.vs-grafico svg { display: block; width: 100%; height: auto; }
.vs-grade { stroke: rgba(0, 0, 0, 0.06); stroke-dasharray: 4 6; }

.vs-lista { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.vs-lista li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; }
.vs-lista li svg { width: 16px; height: 16px; flex-shrink: 0; }
.vs-lista li span { flex: 1; min-width: 0; }
.vs-lista li b { font-weight: 500; text-align: right; }
.vs-passivo .vs-lista li { color: var(--neutral-500); }
.vs-passivo .vs-lista li svg { color: var(--neutral-400); }
.vs-passivo .vs-lista li b { color: var(--text); }
.vs-ativo .vs-lista li { color: var(--neutral-900); }
.vs-ativo .vs-lista li svg { color: var(--neutral-900); }
.vs-ativo .vs-lista li b { color: var(--text); }

.vs-meio { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.vs-meio::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; border-left: 1px dashed var(--border); }
.vs-seta { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--neutral-900), var(--neutral-800)); color: #FFFFFF; box-shadow: 0 12px 30px -12px rgba(29, 29, 29, 0.7); }
.vs-seta svg { width: 24px; height: 24px; }
.vs-meio-rotulo { position: relative; padding: 4px 2px; background: #FFFFFF; font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 1.6; letter-spacing: 0.16em; text-align: center; text-transform: uppercase; color: var(--neutral-900); }

@media (max-width: 980px) {
  .vs { grid-template-columns: 1fr; max-width: 580px; }
  .vs-meio { flex-direction: row; padding: 18px 0; }
  .vs-meio::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: none; border-top: 1px dashed var(--border); }
  .vs-seta { width: 50px; height: 50px; transform: rotate(90deg); }
  .vs-meio-rotulo br { display: none; }
}
@media (max-width: 560px) {
  .vs-card { padding: 22px 20px 20px; }
  .vs-grafico { margin: 22px -20px 0; }
  .vs-frase { min-height: 0; }
  /* Rótulo e valor na mesma linha não cabem em ~300px: o valor desce para baixo
     do rótulo, alinhado ao texto (16px do ícone + 12px de gap). */
  .vs-lista { gap: 12px; }
  .vs-lista li { flex-wrap: wrap; align-items: flex-start; row-gap: 2px; font-size: 14px; }
  .vs-lista li svg { margin-top: 2px; }
  .vs-lista li b { flex-basis: 100%; padding-left: 28px; text-align: left; }
  .vs-pill { font-size: 11px; letter-spacing: 0.14em; }
}


/* CRM passivo x CRM ativo em fundo escuro, como a referência (pedido do dono).
   Sobrescreve as cores do bloco acima só dentro de #passivo-ativo; a estrutura
   e os tamanhos continuam os mesmos. */
#passivo-ativo .h2 { color: var(--dark-text); }
#passivo-ativo .grad-verde { background: linear-gradient(90deg, var(--neutral-700) 0%, var(--neutral-0) 100%); -webkit-background-clip: text; background-clip: text; }

#passivo-ativo .vs { max-width: 1100px; column-gap: 24px; }
#passivo-ativo .vs-slot { display: flex; min-width: 0; }
#passivo-ativo .vs-slot[data-d="1"] { transition-delay: .12s; }
#passivo-ativo .vs-meio[data-d="2"] { transition-delay: .28s; }
#passivo-ativo .vs-slot[data-d="3"] { transition-delay: .44s; }
#passivo-ativo .vs-card {
  flex: 1;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1);
}
#passivo-ativo .vs-passivo { border-color: rgba(138, 138, 142, 0.27); background: linear-gradient(180deg, rgba(138, 138, 142, 0.08), transparent 58%), var(--vs-card); }
#passivo-ativo .vs-ativo { border-color: rgba(213, 213, 213, 0.32); background: linear-gradient(180deg, rgba(29, 29, 29, 0.0495), transparent 58%), var(--vs-card); box-shadow: 0 30px 70px -50px rgba(29, 29, 29, 0.38); }
#passivo-ativo .vs-card .vs-num { font-size: clamp(56px, 6.8vw, 92px); }
#passivo-ativo .vs-frase { font-size: 14px; line-height: 1.45; min-height: 4.35em; }
#passivo-ativo .vs-grafico { margin-top: 20px; }
#passivo-ativo .vs-lista { margin-top: 16px; gap: 10px; }
#passivo-ativo .vs-lista li { font-size: 13.5px; }
#passivo-ativo .vs-seta { background: var(--neutral-300); color: var(--neutral-950); box-shadow: 0 12px 28px -14px rgba(213, 213, 213, 0.72); }

#passivo-ativo .vs-passivo .vs-pill { color: var(--neutral-500); border-color: rgba(138, 138, 142, 0.35); background: rgba(138, 138, 142, 0.08); }
#passivo-ativo .vs-ativo .vs-pill { color: var(--neutral-300); border-color: rgba(29, 29, 29, 0.4); background: rgba(29, 29, 29, 0.044); }

#passivo-ativo .vs-passivo .vs-num { color: var(--neutral-500); }
#passivo-ativo .vs-ativo .vs-num { background: linear-gradient(90deg, var(--neutral-700), var(--neutral-0)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#passivo-ativo .vs-rotulo { color: rgba(244, 246, 244, 0.62); }
#passivo-ativo .vs-passivo .vs-frase { color: var(--neutral-400); }
#passivo-ativo .vs-ativo .vs-frase { color: var(--dark-text); }
#passivo-ativo .vs-grade { stroke: rgba(255, 255, 255, 0.07); }

#passivo-ativo .vs-passivo .vs-lista li { color: var(--neutral-400); }
#passivo-ativo .vs-passivo .vs-lista li svg { color: var(--neutral-500); }
#passivo-ativo .vs-ativo .vs-lista li { color: var(--neutral-300); }
#passivo-ativo .vs-ativo .vs-lista li svg { color: var(--neutral-0); }
#passivo-ativo .vs-lista li b { color: var(--dark-text); }

#passivo-ativo .vs-meio::before { border-color: rgba(255, 255, 255, 0.14); }
#passivo-ativo .vs-meio-rotulo { background: var(--vs-bg); color: var(--neutral-300); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #passivo-ativo .vs-card:hover {
    transform: perspective(1000px) translateY(-10px) rotateX(var(--vs-tilt-x, 0deg)) rotateY(var(--vs-tilt-y, 0deg));
    box-shadow: 0 28px 64px -34px rgba(0, 0, 0, .55), 0 18px 42px -35px rgba(213, 213, 213, .45);
  }
  #passivo-ativo .vs-passivo:hover {
    box-shadow: 0 32px 70px -24px rgba(0, 0, 0, .92), 0 18px 48px -22px rgba(0, 0, 0, .74);
  }
}

@keyframes vs-line-draw { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
@keyframes vs-area-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vs-card-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes vs-arrow-glow {
  0%, 100% { box-shadow: 0 12px 28px -14px rgba(213, 213, 213, .72), 0 0 0 0 rgba(213, 213, 213, .2); }
  50% { box-shadow: 0 16px 36px -10px rgba(213, 213, 213, .85), 0 0 0 12px rgba(213, 213, 213, 0); }
}
#passivo-ativo .vs-grafico polyline { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
#passivo-ativo .vs-grafico path { opacity: 0; }
#passivo-ativo .vs-slot.in .vs-grafico polyline { animation: vs-line-draw 1.25s cubic-bezier(.2, .8, .2, 1) .32s both; }
#passivo-ativo .vs-slot.in .vs-grafico path { animation: vs-area-in .8s ease .65s both; }
@media (prefers-reduced-motion: no-preference) {
  #passivo-ativo .vs-slot.in { animation: vs-card-float 5.2s ease-in-out 1.2s infinite; }
  #passivo-ativo .vs-slot[data-d="3"].in { animation-delay: 2.5s; }
  #passivo-ativo .vs-meio.in .vs-seta { animation: vs-arrow-glow 3s ease-in-out 1s infinite; }
}

/* Pontos pequenos e discretos, com grão e vinheta para não criar uma chapa
   preta. As cores ficam só nesta seção; os mockups escuros não mudam. */
#passivo-ativo { --vs-bg: #0C1012; --vs-card: rgba(16, 17, 19, .78); position: relative; overflow: hidden; isolation: isolate; background: var(--vs-bg); }
#passivo-ativo::before,
#passivo-ativo::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
#passivo-ativo::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.5px);
  background-size: 26px 26px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 52%, #000 25%, transparent 86%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 52%, #000 25%, transparent 86%);
}
#passivo-ativo::after {
  background: radial-gradient(100% 85% at 50% 50%, transparent 38%, rgba(0, 0, 0, 0.22) 100%);
}

@media (max-width: 560px) {
  #passivo-ativo .vs-frase { min-height: 0; }
  #passivo-ativo .vs-lista li { font-size: 13px; }
}

@media (max-width: 980px) {
  #passivo-ativo .vs { max-width: 580px; column-gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #passivo-ativo .vs-slot.reveal, #passivo-ativo .vs-meio.reveal { opacity: 1; transform: none; transition: none; }
  #passivo-ativo .vs-card { transition: none; }
  #passivo-ativo .vs-grafico polyline { stroke-dashoffset: 0; animation: none; }
  #passivo-ativo .vs-grafico path { opacity: 1; animation: none; }
}

/* ═══ Seção 2.5 · CRM passivo x CRM Ativo ════════════════════════════════
   A comparação é conteúdo HTML antes de ser animação: o JavaScript apenas
   coordena a entrada e pode ser removido sem ocultar nenhuma informação. */
.passive-compare {
  overflow: hidden;
  padding: 120px 0 84px;
  background: #FFFFFF;
  border-top: 1px solid var(--border-2);
}
.passive-compare-head {
  max-width: 860px;
  margin: 0 auto 54px;
  padding: 0 12px;
}
.passive-compare-head .eyebrow { margin-bottom: 29px; }  /* era 18px; alinhado ao hero em 06/10/2026 */
.passive-compare-head .h2 { max-width: 820px; margin-right: auto; margin-left: auto; }
.passive-compare-head .lede { max-width: 780px; margin: 20px auto 0; font-size: 18px; }

/* ═══ CRM passivo x CRM ativo · a conversa que roda ════════════════════════
   Reescrita em 06/10/2026. O que havia antes eram dois cartões simétricos com
   cinco bullets cada, uma tabela comparativa vestida de cartão: os dois lados
   ganhavam o mesmo peso visual e o mesmo tempo de leitura, então metade do
   espaço construía o caso do lado que perde com o mesmo capricho do lado que
   ganha. E a mensagem de WhatsApp, que é a premissa inteira ("o mesmo lead,
   duas jornadas"), ficava parada no topo dos dois sem nada acontecer com ela.

   Agora a prova é o produto funcionando. À direita o Rezult digita e responde
   em loop; à esquerda o mesmo lead chega e o cartão explica, parado, por que
   nada acontece. A assimetria é o argumento: um lado anda e o outro não.

   DUAS DECISÕES QUE NÃO PODEM SER AFROUXADAS:

   1. O lado passivo não tem animação nenhuma. Ele chegou a ter cronômetro e os
      três motivos entrando como balão, e os dois foram removidos: um balão
      entrando daquele lado diz que ALGUÉM RESPONDEU, que é o oposto do que a
      seção afirma.
   2. A altura do .cv-corpo é fixa e o overflow é hidden. Fixa porque com
      min-height os dois lados se desalinhavam a cada balão e a página pulava;
      hidden (e não auto) porque scrollTop continua funcionando por script, mas
      o visitante não arrasta nem vê barra. É uma demonstração que se refaz a
      cada doze segundos, não um histórico para vasculhar.

   O conteúdo é SIMULAÇÃO, e o cabeçalho do cartão ativo diz isso em texto. Nome,
   telefone mascarado e diálogo são ilustração. */

.cv-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.cv-item { display: flex; flex-direction: column; min-width: 0; }
.cv-item > .cv-hoje,
.cv-item > .cv-painel { flex: 1; }
.cv-diferenca-icone { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid;
  width: 42px; height: 42px; place-items: center; border: 1px solid var(--neutral-300);
  border-radius: 50%; background: var(--neutral-0); color: #168F6C;
  box-shadow: 0 4px 12px rgba(29, 29, 29, .12); transform: translate(-50%, -50%);
  pointer-events: none; }
.cv-diferenca-icone svg { width: 20px; height: 20px; }

/* ---------- O painel de conversa (lado ativo) ---------- */
.cv-painel { display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--neutral-50); }
.cv-painel.vivo { background: #fff; border-color: var(--neutral-900); box-shadow: 0 24px 60px -40px rgba(29, 29, 29, .55); }

/* A barra é COMPARTILHADA pelos dois cartões. Não é uma barra parecida de cada
   lado: é a mesma classe, então as duas nascem com a mesma altura, o mesmo
   padding e a mesma linha de base, e um ajuste futuro pega os dois de uma vez. */
.cv-barra { display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); background: #fff; }
.cv-painel.vivo .cv-barra { background: var(--verde-tinta); border-bottom-color: var(--verde-tinta); }
.cv-av { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%;
  background: var(--neutral-300); color: #fff; font-size: 12px; font-weight: 600; }
.cv-painel.vivo .cv-av { background: var(--accent-100); color: var(--verde-tinta); }
.cv-quem { flex: 1; min-width: 0; }
.cv-quem b { display: block; font-size: 14px; font-weight: 600; }
.cv-painel.vivo .cv-quem b { color: #fff; }
.cv-quem span { font-size: 12px; color: var(--text-muted); }
.cv-painel.vivo .cv-quem span { color: var(--accent-100); }
.cv-painel.vivo .cv-quem .pw-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 8px 3px 6px;
  background: #E1F5EE;
  border-radius: 100px;
  color: #128A68;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cv-painel.vivo .cv-quem .pw-pill .pw-ico-wpp { flex-shrink: 0; }
.cv-hoje .cv-quem .pw-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 8px 3px 6px;
  background: #FEE2E2;
  border-radius: 100px;
  color: #B91C1C;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cv-hoje .cv-quem .pw-pill svg { flex-shrink: 0; }
.cv-tag { padding: 4px 8px; border-radius: 999px; background: var(--neutral-150);
  color: var(--neutral-700); font-family: var(--sans); font-size: 12px;
  font-weight: 500; letter-spacing: 0; text-transform: none; }
.cv-tag--externa { display: inline-flex; align-items: center; align-self: center; gap: 5px; margin-bottom: 10px; }
.cv-tag--externa svg { width: 13px; height: 13px; flex-shrink: 0; }
.cv-tag--interna { display: inline-flex; align-items: center; flex-shrink: 0; gap: 5px; }
.cv-tag--interna svg { width: 13px; height: 13px; flex-shrink: 0; }
.cv-tag--sem { background: var(--neutral-0); border: 1px solid var(--neutral-200); }
.cv-tag--com { background: var(--neutral-0); color: var(--verde-tinta); }

/* Altura fixa e overflow hidden: ver as duas decisões no topo deste bloco. */
.cv-corpo { display: flex; flex-direction: column; gap: 10px; height: 392px; padding: 20px 18px;
  overflow: hidden; scroll-behavior: smooth; }

.cv-bolha { max-width: 86%; padding: 11px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.cv-painel.vivo .cv-bolha { font-size: 14px; }
.cv-bolha.deles { align-self: flex-start; background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.cv-painel.vivo .cv-bolha.deles { background: var(--neutral-100); border-color: var(--neutral-100); }
.cv-painel.vivo .cv-bolha.nossa { align-self: flex-end; background: #168F6C; color: #FFFFFF; border-bottom-right-radius: 4px; }
.cv-bolha time { display: block; margin-top: 5px; font-family: var(--mono); font-size: 10px; opacity: .55; }

.cv-oculta { opacity: 0; transform: translateY(10px) scale(.97); }
.cv-entra { animation: cvEntra .42s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes cvEntra { to { opacity: 1; transform: none; } }
.cv-digita { align-self: flex-end; display: inline-flex; gap: 4px; padding: 13px 15px;
  border-radius: 14px; background: var(--neutral-150); }
.cv-digita i { width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-600); animation: cvPulso 1.1s infinite; }
.cv-digita i:nth-child(2) { animation-delay: .15s; }
.cv-digita i:nth-child(3) { animation-delay: .3s; }
@keyframes cvPulso { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* O selo de fecho da conversa. Não é um balão: é um evento de sistema, por isso
   ocupa a largura inteira e não tem canto de bolha. Ele entra ~1s depois da
   última resposta, segura por 3,5s e só então o loop recomeça, para a conversa
   ter um DESFECHO em vez de sumir no meio do raciocínio de quem está lendo.

   As duas tintas são --verde-tinta-forte e não --verde-tinta: sobre a menta do
   --accent-100 a forte dá 4,68:1 e a outra 3,72:1, e este texto tem 14px e 13px,
   abaixo dos 24px que liberariam o tom mais claro. O ícone pode ficar na
   --verde-tinta porque é objeto gráfico, que pede 3:1.

   A COPY responde ao cartão da esquerda de propósito. Lá está escrito "O lead
   espera o expediente"; aqui o fecho diz que a reunião foi marcada fora dele.
   É o par que fecha o argumento da seção, então mexer num lado pede reler o
   outro. Os "três minutos" saem dos horários visíveis na tela (22:04 → 22:07),
   não de uma métrica de produto. */
.cv-fim { align-self: stretch; display: grid; grid-template-columns: 20px 1fr; gap: 11px;
  align-items: start; margin-top: 4px; padding: 13px 15px; border-radius: 12px;
  background: var(--accent-100); }
.cv-fim svg { width: 20px; height: 20px; margin-top: 1px; color: var(--verde-tinta); }
.cv-fim b { display: block; font-size: 14px; font-weight: 600; color: var(--verde-tinta-forte); }
.cv-fim span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--verde-tinta-forte); }

/* O rodapé é compartilhado pelos dois cartões, pelo mesmo motivo da barra: os
   dois fecham na mesma linha sem ninguém medir no olho.

   O conteúdo vai dentro de um <span>, e isso NÃO é decoração. Num flex container
   cada filho vira item, e o espaço em branco ENTRE itens não é renderizado: com
   o texto solto ao lado do <b>, "avança." e "Seu" colavam e a frase quebrava em
   duas. Com um filho único o flex centraliza a caixa e o texto lá dentro volta a
   ser fluxo inline normal. */
.cv-rodape { display: flex; align-items: center; min-height: 66px; padding: 14px 18px;
  border-top: 1px solid var(--border); background: #fff;
  font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.cv-painel.vivo .cv-rodape { color: var(--text); }
.cv-painel.vivo .cv-rodape b { color: var(--verde-tinta); font-weight: 600; }

/* ---------- O cartão parado (lado passivo) ---------- */
/* Ele reusa .cv-barra e .cv-rodape do painel ao lado, e por isso perdeu padding
   próprio e ganhou overflow: hidden: as duas faixas precisam ir de borda a
   borda, e sem o overflow elas escapariam pelos cantos arredondados. O respiro
   mora no .cv-hoje-corpo.

   DOIS TONS: topo e rodapé em --neutral-100, miolo em --neutral-25. As faixas
   emolduram, o miolo abre. */
.cv-hoje { display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--neutral-25); }
/* Duas classes no seletor do rodapé, e isso NÃO é excesso: a .cv-rodape, que
   este elemento também usa, declara background #fff e mora ACIMA no arquivo.
   Com uma classe só, o branco dela venceria por ordem e o rodapé ficaria branco
   enquanto o topo já é cinza. Especificidade resolve sem depender de ordem. */
.cv-hoje .cv-barra { background: var(--neutral-900); border-bottom-color: var(--neutral-900); }
.cv-hoje .cv-quem b { color: #fff; }
.cv-hoje .cv-quem span { color: var(--neutral-300); }
.cv-hoje .cv-hoje-fecho { background: var(--neutral-100); }

/* Avatar e etiqueta invertidos: preenchimento branco com tinta cinza. A borda
   de 1px não é enfeite, os dois moram na faixa --neutral-100 e branco sobre
   esse cinza dá 1,12:1; sem contorno eles sumiriam. É a mesma solução das pills
   do site, que se definem pelo contorno e não pelo preenchimento. A letra vai em
   --neutral-600 porque tem 12px, e abaixo de 16px o sistema só libera a partir
   desse degrau (5,25:1 sobre o branco). */
.cv-hoje .cv-av { background: var(--neutral-0); color: var(--neutral-600); border: 1px solid var(--neutral-200); }

/* Os 20px de topo repetem os da .cv-corpo: com a barra idêntica em cima, o balão
   de abertura dos dois cartões cai na MESMA linha. */
.cv-hoje-corpo { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 20px 18px 22px; }
/* O balão de abertura é o que segura a premissa: o MESMO lead chega nos dois.
   Sem ele este lado vira uma lista de defeitos genérica, sem ligação com a
   conversa ao lado. */
.cv-hoje .cv-bolha { margin-bottom: 24px; }
.cv-hoje .cv-bolha.deles { background: #FFFFFF; }
.cv-hoje .cv-bolha + .cv-motivo { margin-top: 47px; }

/* Troca visualmente as posições de Recursos e Para quem é o Rezult, mantendo
   a seção de clientes entre as duas. */
.content-order { display: flex; flex-direction: column; }
.content-order #recursos { order: 1; }
.content-order #segmentos { order: 2; }
.content-order #clientes { order: 3; }
.cv-hoje > b { display: block; width: 100%; margin-bottom: 14px; padding-top: 20px;
  border-top: 1px solid var(--neutral-300);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--neutral-600); }
.cv-motivo { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start;
  padding: 13px 0; border-bottom: 1px dashed var(--neutral-300);
  font-size: 16px; line-height: 1.45; color: var(--neutral-700); }
.cv-hoje .cv-motivo { width: 100%; }
.cv-motivo:last-of-type { border-bottom: 0; }
.cv-motivo svg { width: 16px; height: 16px; margin-top: 3px; color: var(--neutral-500); }
.cv-hoje-fecho { font-size: 15px; }
/* Mesma divisão de ênfase do lado ativo: a primeira frase constata, a segunda
   leva o peso. Lá o destaque é verde porque a frase é a promessa; aqui é tinta
   escura, porque a frase é o problema e o verde marca o que o produto RESOLVE. */
.cv-hoje-fecho b { color: var(--neutral-900); font-weight: 600; }

@media (max-width: 900px) {
  /* Uma coluna. O cartão parado vai PRIMEIRO no HTML e continua primeiro aqui:
     a ordem de leitura é problema e depois solução. */
  .cv-grid { grid-template-columns: 1fr; gap: 14px; }
  .cv-diferenca-icone { position: static; display: grid; justify-self: center; transform: none; }
}

@media (max-width: 780px) {
  .passive-compare { padding: 80px 0; }
  .passive-compare-head { margin-bottom: 38px; padding: 0; }
  .passive-compare-head .lede { font-size: 17px; }
}

@media (max-width: 380px) {
  /* Ver a nota em .nav .logo-nome, no breakpoint de 560px. */
  .nav .logo-nome { display: none; }
}

@media (max-width: 480px) {
  .passive-compare { padding: 70px 0; }
  /* O quadro encolhe junto com a tela, senão a conversa ocupa quase a altura
     toda do celular e o cartão de baixo nunca aparece na mesma dobra. */
  .cv-corpo { height: 330px; padding: 16px 14px; }
  .cv-hoje-corpo { padding: 16px 14px 18px; }
  .cv-barra { padding: 12px 14px; }
  .cv-rodape { padding: 12px 14px; min-height: 58px; }
  .cv-bolha { max-width: 92%; font-size: 14.5px; }
  .cv-motivo { font-size: 15px; padding: 11px 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Quem pede menos movimento NÃO perde a conversa: o script a monta inteira e
     parada. Estas duas regras garantem que os balões cheguem visíveis, já que
     eles nascem com .cv-oculta no markup gerado. */
  .cv-oculta { opacity: 1; transform: none; }
  .cv-entra, .cv-digita i { animation: none; }
  .cv-painel.vivo { box-shadow: none; }
}



/* ---------- Escala tipográfica dos subtítulos ---------- */
/* Regra canônica no fim do arquivo para neutralizar as variações por seção e
   por breakpoint. Eram 16, 17, 18 e 20px para o mesmo papel; viraram 16px em
   05/10/2026.

   Ela mora no FIM do arquivo de propósito: várias das variações que ela anula
   usam ID (#agentes .lede, #como-funciona .lede) ou duas classes
   (.meta-texto .lede), e a lista repete cada um desses seletores justamente
   para empatar em especificidade e ganhar por ordem. Editar só a regra base de
   .lede ou de .hero-sub não tem efeito: esta aqui vence depois.

   Se um subtítulo novo aparecer com corpo próprio, o lugar de resolver é esta
   lista, não um override na seção. */
.section-sub,
.hero-sub,
.lede,
.lede-2,
.page-hero p,
.impl-section-sub,
.impl-section-description,
.ainda-duvidas p,
.cta-final p,
.ag-overview-copy > p,
#agentes .lede,
.implanta-texto .lede,
#como-funciona .lede,
.meta-texto .lede,
.passive-compare-head .lede {
  font-size: 16px;
}

/* O subtítulo da hero é uma exceção intencional à escala de corpo das seções. */
#hero .hero-sub { font-size: 18px; }


/* ═══════════════════════════════════════════════════════════════════════════
   REZULT DESIGN SYSTEM · camada de estrutura da home
   ───────────────────────────────────────────────────────────────────────────
   A PALETA já está no :root desta folha: a rampa neutra e os papéis apontando
   para ela. Este bloco traz o resto do sistema (elevação, movimento, foco e os
   papéis tipográficos do miúdo), espelhando o que styles.css faz para as
   outras quatro páginas.

   O QUE NÃO ENTRA, de propósito: a escala de display da home. O .hero h1
   (48px / 700 / 1.10 / -2.5px) e o .h2 (40px / -1.2px) foram ajustados à mão,
   número por número, e o papel Display do DS pede 1,05 de entrelinha e -0,03em
   de tracking. Sobrescrever isso aqui desfaria o ajuste sem ninguém pedir. Os
   dois ficam como estão; o DS governa daí para baixo.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ds-crm {
  --border-strong: var(--neutral-300);
  --text-inverse:  var(--neutral-0);
  --radius-badge:  6px;
  --radius-menu:   12px;

  /* Elevação. Cartão tem borda de 1px E sombra, nunca só um. */
  --shadow-xs:      0 1px 2px rgba(27, 27, 27, .05);
  --shadow-card:    0 1px 2px rgba(27, 27, 27, .04), 0 4px 16px rgba(27, 27, 27, .05);
  --shadow-raised:  0 2px 4px rgba(27, 27, 27, .05), 0 10px 28px rgba(27, 27, 27, .08);
  --shadow-overlay: 0 12px 40px rgba(27, 27, 27, .14), 0 2px 8px rgba(27, 27, 27, .08);

  --dur-fast:   120ms;
  --dur-normal: 180ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ring-focus-color: rgba(29, 29, 29, .40);
}

/* Anel de foco do sistema: 3px, e a home não tinha nenhum. */
body.ds-crm a:focus-visible,
body.ds-crm button:focus-visible {
  outline: 3px solid var(--ring-focus-color);
  outline-offset: 2px;
}

/* Ênfase dentro de título. O .grad-verde marcava o trecho em destaque por COR,
   e em cinza ele virou um tom mais claro que o resto do título: a ênfase saía
   invertida, com a parte importante mais fraca que a frase em volta.

   A inversão se resolve pelo outro lado: o título que CONTÉM um destaque fica
   em --neutral-600, e o destaque fica no charcoal. Quem lê vê a mesma coisa
   que via, por valor em vez de matiz. O :has() escopa isso aos títulos que
   realmente têm um trecho marcado, então os outros seguem no charcoal cheio. */
/* O trecho marcado de título é VERDE, e isso virou o padrão em 06/10/2026.
   Antes era charcoal, resquício da fase em que a página inteira foi para escala
   de cinza, e o verde voltava seção por seção com override por ID. Quando o
   sexto e último título ganhou verde, a exceção tinha virado a regra: sobravam
   cinco blocos quase idênticos e nenhum título usando o padrão que eles
   contrariavam.

   Isso não era só verbosidade. Regra duplicada é armadilha: nesta mesma data uma
   segunda cópia de .ag-overview-copy .h2, escondida dentro de media query,
   manteve o bug de espaçamento vivo no celular depois de a primeira ter sido
   corrigida. Cinco cópias de uma decisão de cor teriam o mesmo destino.

   O --verde-tinta #128C69 rende 4,22:1 sobre branco e 3,94:1 sobre o canvas. Os
   dois passam nos 3:1 de texto grande, e a .h2 tem 40px no desktop e 30px no
   celular. Se esta classe algum dia servir texto abaixo de 24px, a tinta precisa
   virar --verde-tinta-forte. */
/* O verde da ênfase de título, UM só nas duas folhas (dono, 08/10/2026).
   Esta regra apontava para --verde-tinta (#128C69) enquanto a irmã em
   styles.css, que cobre a h1 de /planos, apontava para --green-text
   (#0F7A5B): um degrau de diferença, 1,26:1 entre eles, visível com as duas
   páginas lado a lado.

   Fica o mais fechado porque ele é o único dos dois que passa em texto
   NORMAL (5,31:1 contra 4,22:1 sobre branco). Os dois serviam para título,
   que é o uso de hoje; com o fechado, o verde continua válido se um dia
   descer para um texto menor. */
body.ds-crm .grad-verde {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--green-text);
  -webkit-text-fill-color: var(--green-text);
  animation: none;
}

/* ---------- Papéis tipográficos do miúdo ---------------------------------- */
/* Título de painel: a pergunta da FAQ. */
body.ds-crm .faq-q {
  font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
}
/* Corpo: resposta da FAQ e depoimento. */
body.ds-crm .faq-a-inner,
body.ds-crm .tcard .quote {
  font-size: 16px; font-weight: 400; line-height: 1.45; letter-spacing: 0;
}
body.ds-crm .faq-a-inner { color: var(--text-muted); }
body.ds-crm .tcard .quote { color: var(--neutral-800); }
/* Ênfase dentro de frase é 600, nunca 700: no DS o 700 é de logo e de valor
   de destaque. */
body.ds-crm .tcard .quote .hl { color: var(--text); font-weight: 600; }
body.ds-crm .tcard .who .nm {
  font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--text);
}
body.ds-crm .tcard .who .rl {
  font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--text-muted);
}
/* Overline: a etiqueta da pill do hero. Sai do mono, porque no DS a segunda
   família serve só a ID, token e código. */
body.ds-crm .hero-badge .tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--neutral-900);
  color: var(--neutral-0);
}
body.ds-crm .hero-badge-ico { color: var(--neutral-900); }

/* ---------- Cartões: borda de 1px E sombra, raio de painel ---------------- */
body.ds-crm .tcard,
body.ds-crm .ag-resumo-card,
body.ds-crm .feature-visual {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out),
              transform var(--dur-normal) var(--ease-out);
}
body.ds-crm .tcard { background: var(--surface); }
body.ds-crm .tcard:hover,
body.ds-crm .ag-resumo-card:hover {
  border-color: var(--neutral-300);
  box-shadow: var(--shadow-raised);
}

/* ---------- Controles ----------------------------------------------------- */
body.ds-crm .btn {
  font-size: 14px; font-weight: 500; letter-spacing: 0;
  min-height: 40px; border-radius: var(--r-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
body.ds-crm .btn-lg { font-size: 16px; min-height: 44px; padding: 12px 28px; }
body.ds-crm .btn-primary {
  background: var(--cta-verde); color: var(--on-primary);
  box-shadow: var(--shadow-xs); font-weight: 600;
}
body.ds-crm .btn-primary:hover {
  background: var(--cta-verde-hi); transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
body.ds-crm .btn-secondary {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow-xs);
}
body.ds-crm .btn-secondary:hover {
  background: var(--neutral-50); border-color: var(--border-strong);
  transform: translateY(-1px);
}
body.ds-crm .ainda-duvidas-acoes .btn { border-radius: var(--r-sm); }

/* ---------- Barra de navegação ------------------------------------------- */
body.ds-crm .nav { background: var(--neutral-0); }
body.ds-crm .nav-links a { color: var(--text); }
body.ds-crm .nav-links a:hover { color: var(--neutral-950); }
body.ds-crm .nav-burger { color: var(--text); }
body.ds-crm .nav.scrolled {
  border-radius: var(--r-lg); border-color: var(--border);
  box-shadow: var(--shadow-raised);
}
body.ds-crm .nav-cta-ghost {
  color: var(--text); border-color: var(--border-strong);
  border-radius: var(--r-sm); font-size: 12px; font-weight: 500;
}
body.ds-crm .nav-cta-ghost:hover { color: var(--neutral-950); border-color: var(--neutral-900); }

/* Seleção de texto: era o verde da marca a 30%. */
body.ds-crm ::selection { background: rgba(29, 29, 29, 0.18); }

/* ---------- Cartão de dúvidas -------------------------------------------- */
body.ds-crm .ainda-duvidas { background: var(--bg); }
body.ds-crm .ainda-duvidas-card {
  background: var(--neutral-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
body.ds-crm .ainda-duvidas p { color: var(--text-muted); }

/* ---------- Rodapé -------------------------------------------------------
   O preto vinha cravado em #0a0d0b e vai para o --neutral-950 do DS. As tintas
   sobre ele estavam lendo --text-muted e --text-subtle, que são tokens de
   superfície CLARA: davam 3,72:1 e reprovavam no AA. Sobre fundo invertido a
   escala inverte, e o --neutral-300 dá 11,7:1. */
body.ds-crm .footer { background: var(--neutral-950); }
body.ds-crm .footer .footer-brand p,
body.ds-crm .footer .footer-col a { color: var(--neutral-300); font-size: 14px; letter-spacing: 0; }
body.ds-crm .footer .footer-col h3,
body.ds-crm .footer .footer-bottom .cp { color: var(--neutral-400); }
body.ds-crm .footer .footer-col h3 {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
}
body.ds-crm .footer .footer-col a:hover { color: var(--neutral-0); }
body.ds-crm .footer .footer-bottom { border-top-color: rgba(255, 255, 255, 0.12); }
body.ds-crm .footer .footer-social a {
  border-color: rgba(255, 255, 255, 0.16); color: var(--neutral-300);
}
body.ds-crm .footer .btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--neutral-0);
  box-shadow: none;
}
body.ds-crm .footer .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); }
/* Botão cheio do rodapé segue o verde dos CTAs da Home e continua legível sobre
   o fundo escuro. */
body.ds-crm .footer .btn-primary {
  background: var(--cta-verde); color: var(--on-primary); box-shadow: none;
}
body.ds-crm .footer .btn-primary:hover { background: var(--cta-verde-hi); }

@media (prefers-reduced-motion: reduce) {
  body.ds-crm .tcard, body.ds-crm .ag-resumo-card,
  body.ds-crm .feature-visual, body.ds-crm .btn { transition: none; }
  body.ds-crm .tcard:hover, body.ds-crm .ag-resumo-card:hover,
  body.ds-crm .btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACENTO VERDE DO REZULT · dose mínima
   ───────────────────────────────────────────────────────────────────────────
   A página é preta, branca e cinza. O verde entra como ACENTO, pedido em
   05/10/2026 ("trazer de forma minimalista a cor verde do rezult"), e tem um
   significado só: marca AFIRMAÇÃO e AÇÃO DO PRODUTO. É isso que decide se uma
   peça recebe verde ou não.

   LEVA VERDE: a etiqueta de seção (.eyebrow), o trecho marcado dos títulos
   (.hl e .grad-verde), os ícones de confirmação (check de lista, marca do
   checklist, √ do CRM ativo), os ícones de recurso e os numerais pequenos que
   ordenam uma sequência.

   NÃO LEVA: corpo de texto, títulos inteiros, botões (a superfície de CTA é
   charcoal), bordas de cartão, rodapé. Se tudo virar verde o acento deixa de
   acentuar, e era justamente o que a paleta cinza veio resolver.

   DUAS TINTAS, E A ESCOLHA NÃO É ESTÉTICA. O #128C69 que o dono fixou dá
   3,94:1 sobre o canvas #F7F7F7: passa nos 3:1 que o AA pede para objeto
   gráfico e para texto de 24px ou mais, e REPROVA nos 4,5:1 de texto menor.
   Como metade destes usos é texto de 11 a 15px, existe um segundo valor, o
   #0F7A5B, que é o irmão mais escuro mais próximo que passa nos três fundos
   que o site tem (4,96:1 no canvas, 5,31:1 no branco, 4,68:1 na menta).

     --verde-tinta        -> ícone, gráfico e texto a partir de 24px
     --verde-tinta-forte  -> qualquer texto abaixo de 24px

   Trocar um dos dois sem refazer essa conta é o jeito de reintroduzir uma
   falha de contraste sem perceber.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Etiqueta de seção: texto de 11px, então tinta forte. A bolinha de 7px é
   objeto gráfico e fica na tinta normal. */
.eyebrow { color: var(--verde-tinta-forte); }
.eyebrow::before { background: var(--verde-tinta); }

/* Os cinco temas de recurso colapsam num só. Eles existiam para dar uma cor
   por linha (verde, laranja, azul, roxo, rosa); na escala de cinza viraram
   cinco cinzas iguais, e o destaque dos títulos desapareceu. Agora são um
   acento verde único: o trecho marcado do h3 (30px, texto grande) na tinta
   normal, sobre CINZA.

   O fundo passou por menta, branco e cinza em 05/10/2026, e o que decide o
   degrau é uma troca: a seção roda sobre o canvas --neutral-50, então quanto
   mais escura a pastilha, mais ela se distingue do fundo e MENOS contraste
   sobra para a tinta verde em cima dela. Medido: --neutral-100 dá 1,04:1 de
   pastilha e 3,77:1 de tinta; o --neutral-150 daqui dá 1,11:1 e 3,54:1; o
   --neutral-200 dá 1,15:1 e 3,41:1. O --neutral-300 está fora, derruba a
   tinta para 2,87:1 e reprova nos 3:1 de texto grande. Este é o degrau mais
   visível entre os que ainda passam com folga. O nome das classes fica como
   está, porque mudar
   obrigaria a mexer no HTML de duas páginas por um ganho só de vocabulário. */
/* As cinco classes de tema NÃO são redefinidas aqui. Elas tinham sido achatadas
   num cinza só neste ponto, e como esta regra mora DEPOIS da definição base, era
   ela que valia: mudar as cores lá em cima sem apagar esta não teria efeito
   nenhum. Foi removida em 06/10/2026, junto com a volta das cores. */

/* O ÍCONE e a SETA voltaram a ler o --hl-fg em 06/10/2026, ou seja, cada linha
   de recurso pinta os dois com a cor do seu tema.

   Havia aqui uma regra forçando os três em --verde-tinta. Ela foi escrita em
   05/10/2026, quando a palavra marcada do h3 virou charcoal e o ícone ficou
   sendo o único acento de cor da linha: naquele arranjo ícone e palavra liam o
   mesmo token, e pintar um sem o outro exigia separar os dois.

   Com as cinco cores de volta no h3 essa separação perdeu a razão, e mantê-la
   deixaria cinco ícones verdes ao lado de cinco palavras em cinco cores
   diferentes. Removida. */

/* Ícones de confirmação e de recurso: objeto gráfico, tinta normal. O
   .feature-icon e o .feature-arrow já leem --hl-fg, então vêm de cima. */
.feature-list li svg { color: var(--verde-tinta); }
.faq-q .ico { color: var(--verde-tinta); }

/* A marca do checklist quando marcada. O check interno é branco sobre o
   verde: 5,16:1 no #128C69, acima do mínimo de objeto gráfico. */
.diag-check:checked ~ .diag-marca {
  background: var(--verde-tinta);
  border-color: var(--verde-tinta);
}

/* Numeral de sequência e link de texto: ambos abaixo de 24px, tinta forte. */
.bcard .b-num { color: var(--verde-tinta-forte); }
.link-seta { color: var(--verde-tinta-forte); }

/* ---------- Seção Agentes de IA ------------------------------------------
   Os detalhes dela estavam todos em cinza: o numeral do card era charcoal
   sobre cinza, a pill "Em todos os planos" era cinza chapado com texto
   branco, e a pill do WhatsApp tinha borda cinza.

   O numeral e a pill são texto de 13px e 11px, então vão na tinta forte sobre
   a menta. A pill deixa de ser cinza preenchido: no sistema, superfície
   preenchida é CTA, e aquilo não é um botão, é uma etiqueta. */
#agentes .ag-resumo-num {
  background: var(--accent-100);
  color: var(--verde-tinta-forte);
}
/* A pill "Em todos os planos" NÃO tem override de cor aqui, desde 06/10/2026.
   Ela teve: fundo --accent-100 com tinta --verde-tinta-forte, escrito quando a
   pill ainda era cinza chapado com texto branco. Quando o site ganhou o
   tratamento único de pill (branco com fio cinza, verde só no ícone), este
   bloco continuou vencendo por ter ID, e esta era a ÚNICA pill do site com
   fundo menta. Por isso saiu: o lugar de mexer na aparência de pill é o bloco
   "PILL DE SEÇÃO" no fim deste arquivo, que serve as cinco classes de uma vez.
   O ícone dela segue verde pela regra .ag-overview-pill svg, lá embaixo. */
/* A pill do canal fica branca, com a borda tingida. O logo do WhatsApp dentro
   dela segue no #25D366 da marca dele, que é identificação de terceiro. */
#agentes .ag-channel-pill { border-color: var(--accent-100); }

/* Verde no trecho marcado do título ("atendem, qualificam e agendam"), pedido
   em 06/10/2026. O span já existia no HTML com .grad-verde; o que faltava era
   cor, porque `body.ds-crm .grad-verde` aponta para charcoal desde a fase em
   escala de cinza e nunca foi revertido em bloco.

   Mesmo padrão do #perdendo-vendas: escopo por ID, que vence o body.ds-crm sem
   !important, e --verde-tinta (#128C69) como tinta. São 4,22:1 sobre o branco
   da seção, abaixo dos 4,5:1 de texto normal mas acima dos 3:1 de texto grande,
   e o .h2 tem 40px no desktop e 30px no celular, grande nos dois.

   Escopado e não global de propósito: o .grad-verde serve outros quatro
   títulos nesta página que seguem em charcoal. */
/* "está ocupado?", no título do comparativo (06/10/2026). A seção roda sobre
   branco chapado, então a --verde-tinta rende 4,22:1 aqui, como no #agentes.

   O "?" entrou DENTRO do span, e não fora: os outros dois trechos verdes desta
   página levam a pontuação final junto, e um ponto de interrogação sozinho em
   charcoal depois de três palavras verdes lê como erro, não como ênfase.

   O display: inline-block que o .grad-verde traz de base não atrapalha: no
   desktop o <br> já põe o trecho sozinho na segunda linha, e abaixo de 560px,
   onde o <br> some e o texto volta a fluir, uma regra de breakpoint devolve o
   display: inline e o trecho passa a poder quebrar. */
/* As cinco regras de verde por ID que moravam aqui foram absorvidas pelo
   padrão (body.ds-crm .grad-verde, mais acima). Ver a nota de lá. */


/* ═══════════════════════════════════════════════════════════════════════════
   PILL DE SEÇÃO · um tratamento só
   ───────────────────────────────────────────────────────────────────────────
   Até 06/10/2026 existiam CINCO etiquetas de seção diferentes, cada uma com
   fundo, borda, corpo e raio próprios:

     .eyebrow            sem fundo, raio 5px, com bolinha
     .hero-badge         transparente, borda verde a 25%, raio 100px, 14px
     .hero-badge-ia      fundo branco, borda #C9C9C9, raio próprio
     .hero-badge-verde   fundo --surface, borda --border, raio --r-sm
     .volume-nivel       sem fundo, mono, 11px
     .ag-overview-pill   fundo cinza chapado, tinta branca

   Agora é uma: menta de fundo, tinta verde, 11px em caixa alta. É o mesmo par
   de superfície e tinta dos ícones de benefício da hero e dos √ do CRM ativo,
   então a página tem um jeito só de dizer "isto é um rótulo".

   A tinta é a --verde-tinta-forte porque 11px é texto pequeno e o AA sobe para
   4,5:1 ali: sobre a menta ela dá 4,68:1, enquanto a --verde-tinta daria 3,72.

   O fundo preenchido NÃO conflita com a regra de "preenchido é CTA": CTA é
   charcoal com tinta branca, a pill é menta com tinta verde. São dois pares
   distintos, e nenhum botão usa menta. */
.eyebrow,
.hero-badge,
.hero-badge-ia,
.hero-badge-verde,
.ag-overview-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  /* A FOLGA DA PILL PARA O TÍTULO mora aqui e em nenhum outro lugar, desde
     06/10/2026: 29px, o mesmo valor que o hero usa entre a pill e a h1. O
     pedido foi que todas as seções tivessem o espaçamento do hero, e para isso
     a conta precisou virar uma só.

     Antes eram CINCO folgas diferentes na home, porque outras regras somavam
     por cima desta. A .h2 nasce com margin-top: 5px, e .eyebrow + .h2 punha
     20px por cima dele (15px na styles.css), mas só nas pills que tinham a
     classe .eyebrow. Mais o .passive-compare-head .eyebrow, que subia a pill
     para 18px. A conta dava: 38px no comparativo, 34px nas seções com
     .eyebrow, 19px nas pills que eram só .hero-badge (CTA final e o painel de
     agentes, 14 + os 5px da .h2), 14px na pill solta de #recursos e 29px no
     hero. Nas outras páginas dava 29px com .eyebrow e 14px antes de h1.

     As três foram zeradas ou alinhadas em 29px. Quem for mudar essa folga de
     novo: mude ESTE valor, e confira se .eyebrow + .h2 continua em zero. A
     .volume-nivel (Nível 1/2/3) fica fora deste bloco de propósito, por
     decisão do dono. */
  margin-bottom: 29px;
  padding: 6px 13px 6px 11px;
  /* Fundo branco com fio CINZA CLARO (06/10/2026; o fio nasceu preto e foi
     clareado no mesmo dia). A pill se define pelo CONTORNO e não pelo
     preenchimento, e o verde fica só no ícone.

     --neutral-300 e não --neutral-200: a pill é branca e mora sobre o canvas
     #F7F7F7, que é quase branco também. O 300 dá 1,37:1 contra o canvas e o
     200 daria 1,15:1, perto demais para a borda segurar a forma sozinha. */
  border: 1px solid var(--neutral-300);
  border-radius: 999px;
  background: var(--neutral-0);
  color: var(--neutral-900);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  /* Caixa alta sai: o texto vale como está escrito no HTML, com só a primeira
     letra maiúscula. Com isso o tracking de caixa alta (+0,08em) também sai,
     porque ele existia para abrir as maiúsculas e em caixa baixa só esparrama. */
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}
/* O ícone é obrigatório em TODAS, à esquerda, e é a única peça verde da pill.
   14px para acompanhar o corpo de 12px sem dominar. */
.eyebrow > svg,
.hero-badge > svg,
.hero-badge-ia > svg,
.hero-badge-verde > svg,
.ag-overview-pill > svg,
.hero-badge-ico,
.hero-badge-agent-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--green-text);
  stroke: currentColor;
}
/* A bolinha do .eyebrow sai: o lugar dela agora é do ícone. */
.eyebrow::before { content: none; }
/* A bolinha do .eyebrow fica, mas em verde cheio: ela é objeto gráfico, não
   texto, então o --verde-tinta serve e dá o acento mais vivo da peça. */
.eyebrow::before { background: var(--verde-tinta); }
/* Os ícones que moram dentro das pills acompanham a tinta. */
.hero-badge-ico,
.hero-badge-agent-icon,
.hero-badge svg,
.ag-overview-pill svg { color: var(--verde-tinta-forte); }
/* A cápsula que vivia dentro da pill (o "PLANOS") deixa de ser uma pill dentro
   de outra: vira só a palavra em peso 600, separada do resto pelo espaço. Duas
   bordas arredondadas aninhadas competiam, e a de dentro não carregava
   informação que o texto já não desse. */
.hero-badge .tag {
  background: none;
  color: var(--neutral-900);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  border-radius: 0;
}
/* A pill de canal mantém o fundo branco: ela carrega o logo do WhatsApp, que
   é marca de terceiro e precisa de fundo neutro para ser reconhecida. Só a
   borda acompanha o sistema. */
.ag-channel-pill { border-color: var(--accent-100); }


/* ═══════════════════════════════════════════════════════════════════════════
   ENTRADA NO SCROLL · escalonada
   ───────────────────────────────────────────────────────────────────────────
   O .reveal já existia: o IntersectionObserver do home.js/main.js põe .in e o
   elemento sobe 24px com fade. O problema era onde ele estava aplicado. Em
   grupo (a trilha de 3 níveis, os 4 cards de agente, os 6 itens do
   diagnóstico) o .reveal ficava no CONTAINER, então os filhos apareciam todos
   no mesmo instante. Um bloco inteiro piscando de uma vez não lê como
   movimento, lê como troca de slide.

   `data-stagger` resolve: o container segue sendo quem o observer vigia, e os
   filhos entram em sequência, 70ms entre um e outro. Oito degraus cobrem o
   maior grupo da página (os 6 itens do diagnóstico); do nono em diante todos
   entram juntos no último degrau, que é melhor do que uma espera longa.

   70ms é o meio da faixa que o Material recomenda para stagger de lista
   (30 a 50ms por item em listas densas, mais folgado em cards grandes). Com
   seis itens o conjunto fecha em 420ms, abaixo do teto de 500ms a partir do
   qual a animação começa a atrasar a leitura em vez de guiá-la. */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform .55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > *:nth-child(1) { transition-delay: 0s; }
[data-stagger].in > *:nth-child(2) { transition-delay: .07s; }
[data-stagger].in > *:nth-child(3) { transition-delay: .14s; }
[data-stagger].in > *:nth-child(4) { transition-delay: .21s; }
[data-stagger].in > *:nth-child(5) { transition-delay: .28s; }
[data-stagger].in > *:nth-child(6) { transition-delay: .35s; }
[data-stagger].in > *:nth-child(7) { transition-delay: .42s; }
[data-stagger].in > *:nth-child(n+8) { transition-delay: .49s; }

/* Degraus de atraso além dos três que existiam, para a ordem de entrada de uma
   seção inteira (pill, título, apoio, grupo) poder ser escrita no HTML. */
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }
.reveal[data-d="6"] { transition-delay: .48s; }

/* ── Quem pede menos movimento não perde conteúdo ──
   O .reveal nasce com opacity: 0, e o observer é quem devolve. Se a animação
   for simplesmente desligada sem zerar o estado inicial, o conteúdo some para
   sempre. Por isso aqui o estado final é forçado, e não só a transição. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in,
  [data-stagger] > *,
  [data-stagger].in > * {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}

/* A pill de nível fica FORA do sistema branco de contorno, por decisão de
   06/10/2026 ("a pill de nivel 1, 2 e 3 pode ficar como está"). Ela mantém o
   menta de fundo com tinta verde e sem ícone.

   Não é inconsistência: as pills de contorno rotulam a SEÇÃO, e esta rotula um
   degrau dentro de um cartão. São hierarquias diferentes, e o menta preenchido
   a mantém subordinada ao título do cartão em vez de competir com ele. */
.volume-nivel {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-bottom: 12px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-100);
  color: var(--verde-tinta-forte);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}