/* ============================================================
   SPARKLE TRACKER — landing VSL

   Tokens em PARIDADE EXATA com o sistema: copiados do bloco `.dark`
   de Sistemas Sparkle/Sparkle-Tracker/public/sparkle-design-tokens.css
   e do liquid glass de public/index.css (.spk-liquid-stage / .spk-glass).

   Regras de marca herdadas do sistema:
   1. O gradiente da marca é #f7d600 → #ff7100 (135deg). É o mesmo em
      botão, badge e indicador — nunca uma rampa alternativa.
   2. O laranja é ACENTO (#ff7100; em texto sobe para #ffb347 para
      ganhar leitura sobre o navy), nunca tema.
   3. O fundo é o navy chapado #01040f; a luz vem dos três orbes AZUIS
      do app. Azul é cor estrutural da marca, não enfeite.
   ============================================================ */
:root{
  /* --- fundo e superfícies (--spk-bg / surface / surface2 / surface3) --- */
  --bg:            #01040F;
  --surface:       #060B16;
  --surface-2:     #0A1220;
  --surface-3:     #121A2E;
  /* vidro dos cards: --spk-glass-bg → --spk-glass-bg-soft */
  --navy-1:        rgba(4,10,22,.78);
  --navy-2:        rgba(5,12,24,.68);
  --card-grad:     linear-gradient(160deg,var(--navy-1),var(--navy-2));
  --card-strong:   rgba(6,14,28,.78);     /* --spk-glass-bg-strong          */
  --tile-grad:     linear-gradient(160deg,rgba(18,26,46,.92),rgba(10,18,32,.92));

  /* --- texto (--spk-text / text-sub / text-muted) --- */
  --white:         #FFFFFF;
  --text:          #F1F5F9;
  --text-sub:      #CBD5E1;
  --muted:         #94A3B8;

  /* --- marca --- */
  --accent:        #FF7100;               /* --spk-accent                   */
  --accent-text:   #FFB347;               /* laranja de TEXTO no escuro     */
  --brand-yellow:  #F7D600;
  --grad:          linear-gradient(135deg,#F7D600 0%,#FF7100 100%);
  --grad-h:        linear-gradient(90deg,#F7D600 0%,#FF7100 100%);
  --grad-hover:    linear-gradient(135deg,#F5D400 0%,#FF6500 100%);
  --accent-soft:   rgba(255,113,0,.16);
  --accent-ring:   rgba(255,113,0,.40);
  --glow:          rgba(255,113,0,.28);   /* --spk-accent-glow              */

  /* --- azul estrutural (orbes do stage) --- */
  --orb-1:         rgba(70,130,210,.68);
  --orb-2:         rgba(80,145,220,.58);
  --orb-3:         rgba(90,155,230,.5);

  --wa-green:      #25D366;
  --wa-grad:       linear-gradient(135deg,#25D366,#128C7E);

  /* --- bordas e preenchimentos (--spk-border / border2) --- */
  --glass-05:      rgba(148,163,184,.06);
  --glass-10:      rgba(148,163,184,.10);
  --glass-15:      rgba(148,163,184,.14);
  --stroke:        rgba(148,163,184,.12);
  --stroke-hover:  rgba(148,163,184,.28);  /* hover neutro, não laranja     */
  --glass-border:  rgba(100,140,190,.14);  /* --spk-glass-border-edge       */

  /* liquid glass: blur + saturação e fio de luz na borda superior */
  --blur:          blur(22px) saturate(1.5);
  --glass-hl:      inset 0 1px 0 rgba(160,200,255,.05);
  --glass-shadow:  0 16px 48px rgba(0,4,16,.55),
                   inset 0 1px 0 rgba(160,200,255,.05),
                   inset 0 -1px 0 rgba(0,0,0,.4);
  --brand-edge:    rgba(255,255,255,.28);  /* --spk-brand-glass-edge        */
  --brand-shadow:  0 10px 28px rgba(255,113,0,.28),
                   inset 0 1px 0 rgba(255,255,255,.22);
  --header-bg:     rgba(1,4,15,.72);

  --r-lg:          24px;                  /* cantos mais suaves = leitura moderna */
  --r-pill:        999px;
  --sans:          "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --body:          "Switzer", "Archivo", ui-sans-serif, system-ui, sans-serif;
  /* Cresce junto com o monitor em vez de ficar preso numa faixa central.
     Abaixo de 1280 o clamp devolve 1280 e nada muda (é max-width, não width).
     Acima disso: 1397 em 1500, 1620 em 1920, teto de 1760.
     Só as GRADES acompanham — os blocos de leitura têm max-width próprio. */
  --container:     clamp(1280px, calc(600px + 53.1vw), 1760px);
  --pad-x:         40px;
  --header-h:      110px;                 /* altura do cabeçalho fixo */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}   /* a rolagem dos links âncora é animada pelo JS, com duração fixa */
body{
  /* navy chapado do app — a luz vem dos orbes do .stage, não de washes */
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  font-weight:400;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* grão sutil sobre a página inteira: tira o "liso digital" dos fundos
   escuros e evita banding nos gradientes — acabamento premium */
body::after{
  content:"";
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}

/* barra de rolagem âmbar do app (index.css do sistema) */
html{scrollbar-width:thin;scrollbar-color:rgba(255,180,80,.28) transparent}   /* Firefox */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,180,80,.2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,180,80,.38)}

/* ============================================================
   STAGE — o fundo do Sparkle Tracker (.spk-liquid-stage)
   Navy chapado + três orbes AZUIS com a geometria, o blur e as
   durações exatas do app (700/600/480px · 26s/34s/30s). Fica fixo
   atrás de tudo, então a luz acompanha a rolagem como no dashboard.
   ============================================================ */
.stage{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:var(--bg);
}
.stage::before,.stage::after,.stage .orb{
  content:"";position:fixed;border-radius:50%;
  will-change:transform,opacity;
}
.stage::before{
  width:min(68vw,700px);height:min(68vw,700px);top:-18%;left:4%;
  background:radial-gradient(circle,var(--orb-1) 0%,transparent 70%);
  filter:blur(90px);
  animation:orb-a 26s ease-in-out infinite;
}
.stage::after{
  width:min(60vw,600px);height:min(60vw,600px);bottom:-18%;right:-4%;
  background:radial-gradient(circle,var(--orb-2) 0%,transparent 70%);
  filter:blur(90px);
  animation:orb-b 34s ease-in-out infinite;
}
.stage .orb{
  width:min(48vw,480px);height:min(48vw,480px);top:38%;left:52%;
  background:radial-gradient(circle,var(--orb-3) 0%,transparent 70%);
  filter:blur(85px);
  animation:orb-c 30s ease-in-out infinite;
}
@keyframes orb-a{
  0%{transform:translate3d(-12%,-8%,0) scale(.92);opacity:.48}
  35%{transform:translate3d(18%,22%,0) scale(1.22);opacity:1}
  70%{transform:translate3d(28%,6%,0) scale(1.08);opacity:.72}
  100%{transform:translate3d(-12%,-8%,0) scale(.92);opacity:.48}
}
@keyframes orb-b{
  0%{transform:translate3d(10%,8%,0) scale(1);opacity:.42}
  40%{transform:translate3d(-22%,-18%,0) scale(1.2);opacity:.98}
  75%{transform:translate3d(-8%,12%,0) scale(1.05);opacity:.68}
  100%{transform:translate3d(10%,8%,0) scale(1);opacity:.42}
}
@keyframes orb-c{
  0%{transform:translate3d(0,10%,0) scale(.95);opacity:.4}
  45%{transform:translate3d(-24%,-12%,0) scale(1.25);opacity:.95}
  100%{transform:translate3d(0,10%,0) scale(.95);opacity:.4}
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
.display{
  font-family:var(--sans);
  font-weight:800;
  line-height:1.06;          /* mais compacto = mais impacto */
  letter-spacing:-.035em;    /* tracking negativo: assinatura de tipografia moderna */
  text-wrap:balance;         /* evita linha órfã solta no fim do título */
}
/* Destaque em cor sólida âmbar — nunca gradiente.
   No site real o H1 é branco puro e o gradiente aparece só em
   superfícies pequenas (botão de 48px, badge "Recomendado").
   Gradiente em texto grande é o que deixava a página infantil. */
/* Sem texto colorido em título. Nem o dashboard nem o site real têm
   uma única palavra laranja — o destaque vem do peso, não da cor. */
.display em{
  font-style:normal;
  color:inherit;
}
.h-hero{font-size:clamp(40px,5.4vw,68px)}
.h-section{font-size:clamp(31px,4vw,50px);text-align:center}
.h-card{font-size:clamp(25px,3vw,38px)}
.sub{
  color:var(--muted);
  font-size:clamp(16.5px,1.4vw,19px);
  line-height:1.65;
  max-width:640px;
  margin:0 auto;
  text-align:center;
  text-wrap:pretty;
}

/* ============================================================
   ANIMAÇÕES DE ENTRADA
   ============================================================ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0s);
}
.reveal.in{opacity:1;transform:translateY(0)}
.hero-anim{opacity:0;animation:fadeUp .9s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;
  font-family:var(--sans);
  font-size:16px;font-weight:700;color:var(--white);
  /* botão de marca do app: gradiente chapado + aro claro + relevo interno */
  background:var(--grad);
  border:1px solid var(--brand-edge);
  border-radius:var(--r-pill);
  box-shadow:var(--brand-shadow);
  text-shadow:0 1px 2px rgba(0,0,0,.42);
  cursor:pointer;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,background .35s,filter .35s;
}
.btn:hover{
  transform:translateY(-3px);
  background:var(--grad-hover);
  filter:brightness(1.03);
  box-shadow:0 14px 34px rgba(255,113,0,.32),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn svg{transition:transform .35s}
.btn:hover svg{transform:translateX(4px)}

.btn-dark{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 26px;
  font-family:var(--sans);
  font-size:16px;font-weight:600;color:var(--white);
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-pill);
  box-shadow:var(--glass-hl);
  cursor:pointer;
  transition:border-color .3s,transform .35s cubic-bezier(.22,1,.36,1);
}
.btn-dark:hover{border-color:var(--stroke-hover);transform:translateY(-2px)}

/* ============================================================
   HEADER (logo oficial + nav + ações)
   ============================================================ */
/* Cabeçalho FIXO — igual ao sparkletracker.com: ele não muda de tamanho
   nem some ao rolar; fica sempre no topo enquanto o conteúdo passa por
   baixo da faixa de blur (.blur-topo). */
header{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  height:var(--header-h);
}
/* faixa de blur progressivo atrás do cabeçalho: nítida em cima,
   dissolvendo para baixo — é o que dá o efeito ao rolar a página */
.blur-topo{
  position:fixed;top:0;left:0;right:0;
  height:calc(var(--header-h) + 18px);
  z-index:90;
  pointer-events:none;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(#000 0%,#000 42%,transparent 100%);
  mask-image:linear-gradient(#000 0%,#000 42%,transparent 100%);
}
/* o cabeçalho saiu do fluxo: reserva o espaço que ele ocupava */
body{padding-top:var(--header-h)}
/* âncoras (#precos, #faq…) param abaixo do cabeçalho, não atrás dele */
section[id],div[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
.header-inner{
  height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  /* no topo é invisível; ao rolar vira a pílula de vidro (.compacto) */
  border:1px solid transparent;
  border-radius:0;
  transition:max-width .5s cubic-bezier(.22,1,.36,1),
             padding .5s cubic-bezier(.22,1,.36,1),
             border-radius .5s cubic-bezier(.22,1,.36,1),
             background .45s ease,border-color .45s ease,box-shadow .45s ease;
}

/* ---- estado compacto: passou da primeira seção ---- */
header{transition:height .5s cubic-bezier(.22,1,.36,1)}
header.compacto{height:calc(var(--header-h) - 26px)}
header.compacto .header-inner{
  max-width:calc(var(--container) - 96px);   /* um pouco mais estreito */
  padding:0 14px 0 22px;
  /* recuo vertical: a pílula flutua em vez de encostar no topo da tela */
  height:calc(100% - 18px);
  margin-top:9px;
  border-radius:var(--r-pill);
  background:var(--header-bg);
  border-color:var(--glass-border);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--glass-hl),0 18px 50px rgba(0,4,16,.55);
}
/* dentro da pílula tudo encolhe de leve, para o conjunto ficar proporcional */
header.compacto .logo img{height:40px;transition:height .5s cubic-bezier(.22,1,.36,1)}
header.compacto nav{gap:26px}
header.compacto .header-actions > .btn{padding:11px 22px}
header.compacto .header-actions > .btn-dark{padding:10px 20px}
.logo img,nav,.header-actions > .btn,.header-actions > .btn-dark{
  transition:height .5s cubic-bezier(.22,1,.36,1),gap .5s ease,padding .5s ease;
}
.logo img{height:48px;width:auto}
footer .logo img{height:40px}
nav{display:flex;gap:34px}
nav a{
  font-family:var(--sans);font-size:16px;font-weight:500;color:var(--white);
  transition:color .3s;
}
nav a:hover,nav a.ativo{color:var(--accent-text)}
.menu-card > a.ativo{color:var(--accent-text)}
.header-actions{display:flex;align-items:center;gap:12px}

/* ---- botão hambúrguer (só no mobile) ---- */
.menu-btn{
  display:none;
  width:46px;height:46px;flex:0 0 auto;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:14px;
  box-shadow:var(--glass-hl);
  cursor:pointer;
  transition:border-color .3s;
}
.menu-btn:hover{border-color:var(--stroke-hover)}
.menu-btn span{
  display:block;width:19px;height:2px;border-radius:2px;background:var(--white);
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .2s;
}
/* vira um X quando aberto */
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- painel de navegação do mobile ---- */
.menu-mobile{
  position:absolute;top:calc(100% - 12px);left:0;right:0;z-index:60;
  padding:0 var(--pad-x);
  opacity:0;transform:translateY(-10px);
  pointer-events:none;
  transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.menu-mobile.aberto{opacity:1;transform:none;pointer-events:auto}
.menu-card{
  display:grid;gap:2px;
  padding:14px;
  /* quase opaco: o menu cobre o conteúdo da página, então precisa
     de contraste real — vidro translúcido aqui deixaria o texto do
     hero atravessar e o menu ilegível */
  background:linear-gradient(160deg,rgba(10,18,32,.985),rgba(6,11,22,.985));
  border:1px solid var(--stroke-hover);
  border-radius:var(--r-lg);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--glass-hl),0 26px 60px rgba(0,4,16,.65);
}
.menu-card > a{
  padding:14px 16px;border-radius:14px;
  font-family:var(--sans);font-size:16px;font-weight:600;
  transition:background .25s,color .25s;
}
.menu-card > a:hover{background:rgba(255,255,255,.06);color:var(--accent-text)}
.menu-acoes{
  display:grid;gap:10px;
  margin-top:10px;padding-top:14px;
  border-top:1px solid var(--stroke);
}
.menu-acoes .btn,.menu-acoes .btn-dark{justify-content:center;width:100%}

/* ============================================================
   HERO — VSL VERTICAL (9:16)
   Desktop: copy à esquerda + vídeo em pé à direita, com cartões
   flutuantes que mostram o produto em volta do vídeo.
   Mobile: tudo empilhado e centralizado, vídeo em largura de celular.
   O brilho vem do .stage (orbes azuis do app), fixo atrás da página.
   ============================================================ */
.hero{position:relative;padding:36px 0 64px}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:56px;align-items:center;
}
.hero-copy{text-align:left}
.hero-copy .h-hero{font-size:clamp(36px,3.9vw,56px)}
.hero-copy .sub{margin:24px 0 0;max-width:560px;text-align:left}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:36px}
.hero .social-proof{justify-content:flex-start;margin-top:30px;text-align:left}
/* garantias curtas sob o CTA: sem fidelidade, 30s, sem código */
.hero-checks{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;
  color:var(--muted);font-size:14.5px;
}
.hero-checks span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hero-checks svg{color:var(--accent-text);flex:0 0 auto}

/* pill "Novo | ..." (disponível para uso acima do título) */
.pill{
  display:inline-flex;align-items:center;gap:12px;
  margin-bottom:28px;
  padding:7px 18px 7px 7px;
  font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--white);
  background:var(--card-grad);
  border:1px solid var(--glass-15);
  border-radius:var(--r-pill);
  box-shadow:var(--glass-hl);
  transition:border-color .3s;
}
.pill:hover{border-color:var(--stroke-hover)}
.pill .chip{
  padding:4px 12px;border-radius:var(--r-pill);
  background:var(--grad);color:#fff;
  border:1px solid var(--brand-edge);
  text-shadow:0 1px 2px rgba(0,0,0,.42);
  font-size:12.5px;font-weight:700;
  white-space:nowrap;
}
.pill svg{color:var(--muted)}

/* ---- coluna do vídeo ---- */
.hero-media{position:relative;display:flex;justify-content:center;padding:24px 0}
/* palco do vídeo: é a referência de posição dos cartões flutuantes */
.hero-stage{position:relative;width:min(100%,372px)}
.video-shell{
  position:relative;z-index:1;
  padding:8px;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:34px;
  box-shadow:var(--glass-hl),0 40px 90px rgba(0,4,16,.55);
}
.video-frame{
  position:relative;overflow:hidden;
  aspect-ratio:9/16;
  border-radius:27px;
  /* superfícies do app: surface3 → surface2 → surface sobre o navy */
  background:
    radial-gradient(90% 60% at 60% 22%,#121A2E 0%,transparent 62%),
    radial-gradient(70% 50% at 30% 78%,#0A1220 0%,transparent 60%),
    linear-gradient(170deg,#060B16,#01040F);
}
/* o VSL real (vídeo ou embed) preenche a moldura inteira */
.video-frame video,.video-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0;display:block;
}
.video-frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(180px 300px at 20% 40%,rgba(255,255,255,.05),transparent 70%),
    radial-gradient(220px 360px at 80% 70%,rgba(255,113,0,.06),transparent 70%);
}
.play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;
  background:rgba(255,255,255,.12);
  border:1px solid var(--glass-15);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:grid;place-items:center;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.22,1,.36,1),background .35s;
}
.play-btn:hover{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.22)}
.play-btn::after{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(.8);opacity:0}
  40%{opacity:1}
  100%{transform:scale(1.25);opacity:0}
}
/* legenda no rodapé do vídeo (placeholder até o VSL entrar) */
.video-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:40px 18px 20px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--text-sub);
  background:linear-gradient(transparent,rgba(1,4,15,.78));
  pointer-events:none;
}
.video-caption svg{color:var(--accent-text)}
/* etiqueta no topo do vídeo */
.video-tag{
  position:absolute;top:16px;left:16px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(1,4,15,.6);border:1px solid var(--glass-15);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-family:var(--sans);font-size:12px;font-weight:700;color:var(--white);
  letter-spacing:.02em;
  pointer-events:none;   /* fica sobre o player: não pode roubar o clique */
}
.video-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(255,113,0,.22)}

/* ---- cartões flutuantes: prova de produto em volta do vídeo (desktop largo) ---- */
.float-card{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:12px;
  padding:12px 18px 12px 12px;
  background:rgba(6,14,28,.84);
  border:1px solid var(--glass-border);
  border-radius:18px;
  box-shadow:var(--glass-hl),0 18px 44px rgba(0,4,16,.5);
  white-space:nowrap;
  animation:floaty 7s ease-in-out infinite;
}
.float-card .tile{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  background:var(--tile-grad);border:1px solid var(--stroke);
  box-shadow:var(--glass-hl);
  display:grid;place-items:center;color:var(--accent-text);
}
.float-card small{display:block;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.float-card strong{display:block;font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--white);margin-top:2px}
.float-card .dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--wa-green);box-shadow:0 0 0 4px rgba(37,211,102,.18);
}
/* Modo "assistindo": ao dar play, tudo que é enfeite sai da frente do vídeo.
   A classe é colocada pelo JS no .hero-stage.

   Por que translate/scale e não transform: os cartões já rodam a animação
   de flutuação, que usa transform. Animação vence transição, então mexer
   no transform faria a posição pular (era o que acontecia no Safari).
   translate e scale são propriedades separadas: elas transicionam suave
   enquanto a flutuação continua rodando por baixo.                        */
.float-card,.video-tag,.video-caption{
  transition:opacity .55s ease,
             translate .75s cubic-bezier(.22,1,.36,1),
             scale .75s cubic-bezier(.22,1,.36,1),
             filter .55s ease,
             visibility 0s;
  transition-delay:.14s;   /* na volta, todos reaparecem juntos */
}
.play-btn{
  transition:opacity .5s ease,
             visibility 0s,
             transform .35s cubic-bezier(.22,1,.36,1),
             background .35s;
}

.hero-stage.assistindo .float-card,
.hero-stage.assistindo .video-tag,
.hero-stage.assistindo .video-caption{
  opacity:0;visibility:hidden;pointer-events:none;
  filter:blur(3px);
}
/* o play some no lugar: sem deslocamento, só opacidade */
.hero-stage.assistindo .play-btn{opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,.5s}

/* cada elemento sai para o lado onde está, em cascata
   (ordem dos atrasos: opacidade, translate, scale, filtro, visibilidade) */
.hero-stage.assistindo .float-card.a{translate:-30px -16px;scale:.92;transition-delay:0s,0s,0s,0s,.75s}
.hero-stage.assistindo .float-card.c{translate:-30px 16px;scale:.92;transition-delay:.09s,.09s,.09s,.09s,.84s}
.hero-stage.assistindo .float-card.b{translate:32px 0;scale:.92;transition-delay:.18s,.18s,.18s,.18s,.93s}
.hero-stage.assistindo .video-tag{translate:0 -16px;scale:.96;transition-delay:0s,0s,0s,0s,.75s}
.hero-stage.assistindo .video-caption{translate:0 18px;transition-delay:0s,0s,0s,0s,.75s}

.float-card.a{top:92px;left:-132px;animation-delay:0s}
.float-card.b{top:60%;right:-108px;animation-delay:-2.4s}
.float-card.c{bottom:60px;left:-96px;animation-delay:-4.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.social-proof{
  display:flex;align-items:center;justify-content:center;gap:14px;
  color:var(--muted);font-size:16px;
}
.avatars{display:flex;flex:0 0 auto}
.avatar{
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--bg);
  display:grid;place-items:center;
  font-family:var(--sans);font-size:12px;font-weight:700;color:#01040F;
}
.avatar+.avatar{margin-left:-10px}
/* rampa da marca (#f7d600 → #ff7100) em três recortes, para os círculos
   não ficarem idênticos sem sair da paleta do sistema */
.avatar:nth-child(1){background:linear-gradient(145deg,#F7D600,#FF9A3E)}
.avatar:nth-child(2){background:linear-gradient(145deg,#FFC46B,#FF7100)}
.avatar:nth-child(3){background:linear-gradient(145deg,#F7D600,#FF7100)}

/* ============================================================
   PAGE HERO — topo das páginas internas (planos, ajuda, integrações)
   ============================================================ */
.page-hero{position:relative;padding:44px 0 8px;text-align:center}
.page-hero .kicker{justify-content:center}
.page-hero .h-hero{font-size:clamp(36px,4.6vw,58px);max-width:880px;margin:0 auto}
.page-hero .sub{margin-top:22px}
.page-hero .hero-checks{justify-content:center;margin-top:26px}
.page-hero + section{padding-top:44px}
/* trechos que trocam entre celular e telas maiores (ver o bloco de 640px) */
.so-tela-pequena{display:none}

/* ============================================================
   MARQUEES
   ============================================================ */
.logos-strip{padding:34px 0 68px;text-align:center}
.logos-strip .strip-label{
  font-family:var(--sans);color:var(--muted);font-size:16px;font-weight:500;
  margin-bottom:34px;
}
.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{
  display:flex;align-items:center;gap:var(--gap,70px);
  width:max-content;
  animation:marquee var(--speed,28s) linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* chips de integração: vidro + monograma colorido (hue por marca via --h) */
.logos-strip .marquee + .marquee{margin-top:14px}
.logos-strip .marquee-track{--gap:14px;--speed:70s}
.marquee.reverse .marquee-track{animation-direction:reverse;--speed:62s}
.strip-count{
  display:inline-flex;align-items:center;
  margin-bottom:16px;
  padding:6px 16px;border-radius:var(--r-pill);
  background:var(--card-grad);
  border:1px solid var(--stroke);
  box-shadow:var(--glass-hl);
  font-family:var(--sans);font-size:13px;font-weight:700;
}
.strip-count span{color:var(--accent-text)}
.int-chip{
  display:flex;align-items:center;gap:11px;
  padding:8px 20px 8px 8px;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-pill);
  box-shadow:var(--glass-hl);
  font-family:var(--sans);
  color:rgba(255,255,255,.8);
  font-weight:600;font-size:15.5px;letter-spacing:.01em;
  white-space:nowrap;
  transition:border-color .3s,transform .3s,color .3s;
}
.int-chip:hover{border-color:var(--stroke-hover);transform:translateY(-2px);color:#fff}
.int-chip .mono{
  position:relative;overflow:hidden;
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(145deg,hsl(var(--h) 75% 58%),hsl(calc(var(--h) + 28) 85% 42%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
/* logo real carregada via JS cobre o monograma (que vira fallback) */
.int-chip .mono img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  padding:4px;
  background:#fff;
  border-radius:inherit;
}
/* logos desenhadas para fundo escuro dispensam o quadro branco */
.int-chip[data-logo-dark] .mono img{background:#060B16;padding:3px}

/* ============================================================
   SEÇÕES
   ============================================================ */
section{padding:74px 0}
.section-head{max-width:980px;margin:0 auto 46px;text-align:center}
/* o subtítulo é corpo de texto e fica estreito mesmo com o bloco largo */
.section-head .sub{max-width:680px;margin-left:auto;margin-right:auto}
.section-head .sub{margin-top:18px}
/* link discreto abaixo de uma seção ("ver todas as integrações", etc.) */
.section-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--text-sub);
  transition:color .3s,gap .3s;
}
.section-link:hover{color:var(--accent-text);gap:12px}
.section-link svg{flex:0 0 auto}
.section-foot{display:flex;justify-content:center;margin-top:36px}
.kicker{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--sans);font-size:13.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);           /* rótulo em cinza, como os do dashboard */
  margin-bottom:18px;
}
/* único toque de âmbar aqui: o traço de acento */
.kicker::before{
  content:"";width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent));
}

/* ---------- comparação problema × solução ---------- */
.compare{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:20px;
  box-shadow:var(--glass-hl),0 24px 60px rgba(0,4,16,.35);
}
.compare-col{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  border-radius:calc(var(--r-lg) - 6px);
  padding:36px;
  box-shadow:var(--glass-hl);
}
.compare-col::before{
  content:"";position:absolute;top:-80px;right:-80px;width:240px;height:240px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.05),transparent 70%);
}
.compare-col.bad::before{background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%)}
.compare-col h3{font-family:var(--sans);font-size:22px;font-weight:700;margin-bottom:26px;line-height:1.35}
.check-list{list-style:none;display:grid;gap:18px}
.check-list li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:16px}
.check-list li strong{display:block;color:var(--white);font-family:var(--sans);font-weight:700;font-size:16.5px;margin-bottom:3px}
.check-list .ico{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;margin-top:2px;
}
.bad .ico{background:rgba(255,255,255,.08);color:rgba(255,255,255,.55)}
.good .ico{background:rgba(255,113,0,.15);color:var(--accent-text)}
/* nota + tags ancoradas na base: as duas colunas terminam alinhadas */
.compare-note{margin-top:auto;padding-top:24px;color:var(--white);font-size:16.5px}
.tags{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.tag{
  font-family:var(--sans);
  padding:8px 16px;border-radius:var(--r-pill);font-size:14px;font-weight:500;
  background:var(--glass-05);border:1px solid var(--stroke);color:var(--muted);
}
.good .tag{border-color:rgba(255,255,255,.18);color:var(--white)}

/* ---------- benefícios (marquee em card de vidro) ---------- */
.benefits-wrap{
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:58px 0;
  overflow:hidden;
  box-shadow:var(--glass-hl),0 24px 60px rgba(0,4,16,.35);
}
.benefits-wrap .section-head{margin-bottom:36px}
.benefits-wrap .marquee-track{--gap:20px;--speed:32s;padding:6px 0}
/* cards do marquee sem backdrop-filter (animação contínua fica leve) */
.benefit-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  width:340px;min-height:272px;flex:0 0 auto;
  background:rgba(255,255,255,.045);
  border:1px solid var(--stroke);
  border-radius:calc(var(--r-lg) - 6px);
  padding:30px;
  box-shadow:var(--glass-hl);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s;
}
.benefit-card:hover{transform:translateY(-6px);border-color:var(--stroke-hover)}
.benefit-card::before{
  content:"";position:absolute;bottom:-60px;left:-40px;width:200px;height:160px;
  background:radial-gradient(ellipse,rgba(255,255,255,.04),transparent 70%);
  pointer-events:none;
}
/* tile de ícone no estilo do dashboard: navy com ícone laranja */
.benefit-ico{
  width:48px;height:48px;border-radius:14px;
  background:var(--tile-grad);
  border:1px solid var(--stroke);
  box-shadow:var(--glass-hl);
  display:grid;place-items:center;color:var(--accent-text);
  margin-bottom:22px;
}
.benefit-card h4{font-family:var(--sans);font-size:19px;font-weight:700;margin-bottom:8px}
.benefit-card p{color:var(--muted);font-size:15.5px}

/* ---------- depoimentos ---------- */
.testimonials .marquee-track{--gap:20px;--speed:44s;padding:6px 0}
.testi-card{
  /* altura FIXA: garante alinhamento perfeito em qualquer largura/fonte */
  width:400px;height:318px;flex:0 0 auto;
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:32px;
  box-shadow:var(--glass-hl);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s;
}
.testi-card:hover{transform:translateY(-6px);border-color:var(--stroke-hover)}
.testi-card blockquote{
  color:var(--muted);font-size:16px;line-height:1.6;
  /* limita o texto para nenhum card estourar a altura fixa */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;
  overflow:hidden;
}
.testi-stars{display:flex;gap:3px;color:var(--accent-text)}
.testi-person{display:flex;align-items:center;gap:14px}
.testi-avatar{
  width:46px;height:46px;border-radius:50%;
  flex:0 0 auto;overflow:hidden;
  display:grid;place-items:center;
  font-family:var(--sans);font-weight:700;font-size:15px;color:#01040F;
  border:1px solid var(--stroke-hover);
}
.testi-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.testi-person strong{display:block;font-family:var(--sans);font-size:16px;font-weight:700}
.testi-person span{display:block;color:var(--muted);font-size:14px}

/* ---------- o que você recebe ---------- */
.get-wrap{
  position:relative;overflow:hidden;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:64px 60px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  box-shadow:var(--glass-hl),0 24px 60px rgba(0,4,16,.35);
}
.get-wrap::before{
  content:"";position:absolute;top:-120px;right:-120px;width:380px;height:380px;
  background:radial-gradient(circle,rgba(255,255,255,.04),transparent 70%);
  pointer-events:none;
}
.get-wrap .h-card{text-align:left}
.get-wrap .lead{color:var(--muted);margin-top:16px;font-size:16.5px}
.get-list{list-style:none;display:grid;gap:18px}
.get-list li{
  display:flex;gap:14px;align-items:center;
  background:rgba(255,255,255,.045);
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:18px 22px;
  font-size:16px;
  box-shadow:var(--glass-hl);
  transition:transform .3s,border-color .3s;
}
.get-list li:hover{transform:translateX(6px);border-color:var(--stroke-hover)}
.get-list .ico{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:rgba(255,113,0,.14);color:var(--accent-text);
  display:grid;place-items:center;
}

/* ---------- planos ---------- */

/* seletor de ciclo de cobrança (segmented control com indicador deslizante) */
.billing-wrap{display:flex;justify-content:center;margin:-16px 0 48px}
.billing-toggle{
  position:relative;
  display:inline-flex;
  padding:6px;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-pill);
  box-shadow:var(--glass-hl),0 10px 30px rgba(0,4,16,.35);
}
.billing-toggle .slider{
  position:absolute;top:6px;bottom:6px;left:0;
  border-radius:var(--r-pill);
  background:var(--grad);
  box-shadow:0 4px 22px var(--glow);
  transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.billing-toggle button{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:8px;
  padding:11px 24px;
  background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:700;
  color:var(--muted);
  border-radius:var(--r-pill);
  white-space:nowrap;
  transition:color .3s;
}
.billing-toggle button:hover{color:var(--white)}
.billing-toggle button.ativo{color:#fff}
.billing-toggle .economia{
  padding:3px 9px;border-radius:var(--r-pill);
  background:rgba(255,113,0,.16);
  border:1px solid rgba(255,113,0,.35);
  color:var(--accent-text);
  font-size:11.5px;font-weight:800;letter-spacing:.02em;
  transition:background .3s,border-color .3s,color .3s;
}
.billing-toggle button.ativo .economia{
  background:rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.35);
  color:#fff;
}

.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.price-card{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:34px 26px;
  box-shadow:var(--glass-hl);
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s;
}
.price-card:hover{
  transform:translateY(-8px);
  border-color:var(--stroke-hover);
  box-shadow:var(--glass-hl),0 20px 60px rgba(0,4,16,.5);
}
.price-card.popular{
  border-color:rgba(255,113,0,.55);
  box-shadow:var(--glass-hl),0 0 60px rgba(255,113,0,.08);
  transform:scale(1.035);
  z-index:2;
}
.price-card.popular:hover{transform:scale(1.035) translateY(-8px)}
/* fio de gradiente no topo do card recomendado */
.price-card.popular::before{
  content:"";position:absolute;top:-1px;left:16%;right:16%;height:2px;
  background:var(--grad);
  border-radius:2px;
  box-shadow:0 0 14px rgba(255,113,0,.35);
}
.popular-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#fff;
  font-family:var(--sans);font-size:13px;font-weight:700;
  padding:6px 16px;border-radius:var(--r-pill);
  white-space:nowrap;
}
.price-card h3{
  font-family:var(--sans);font-size:18px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
}
/* Reserva altura para a descrição, para a linha de preço começar no mesmo
   ponto nos 4 cards. O valor acompanha o breakpoint porque o texto quebra
   em mais linhas quanto mais estreito o card fica. */
.price-card .desc{color:var(--muted);font-size:14px;margin-top:10px;min-height:92px}
/* preço antigo riscado + oferta de teste grátis em destaque
   (min-height mantém a linha de preço alinhada nos 4 cards)   */
.price-line{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;margin:24px 0;min-height:96px}
.price-old{
  font-family:var(--sans);color:var(--muted);font-size:16px;font-weight:600;
  text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.45);
  text-decoration-thickness:2px;
}
/* selo de destaque do teste grátis — é a oferta principal do card,
   então ganha fundo âmbar, contorno e brilho próprios */
.price-free{
  display:inline-flex;align-items:center;gap:9px;
  align-self:flex-start;
  padding:10px 16px;
  border-radius:14px;
  font-family:var(--sans);font-size:21px;font-weight:800;
  letter-spacing:-.01em;line-height:1.1;white-space:nowrap;
  color:var(--white);
  background:linear-gradient(135deg,rgba(255,113,0,.16),rgba(255,113,0,.07));
  border:1px solid rgba(255,113,0,.5);
  box-shadow:0 8px 22px rgba(255,113,0,.10),inset 0 1px 0 rgba(255,255,255,.10);
}
.price-free svg{color:var(--accent-text);flex:0 0 auto}
/* no card recomendado o selo pulsa de leve para puxar o olho */
.price-card.popular .price-free{border-color:rgba(255,113,0,.6)}
.price-value{font-family:var(--sans);font-size:42px;font-weight:800;letter-spacing:-.02em;line-height:1}
.price-cycle{color:var(--muted);font-size:12.5px;line-height:1.4}

/* preço cheio — usado nos ciclos semestral/anual (sem teste grátis) */
.price-main{
  display:flex;align-items:baseline;gap:3px;
  font-family:var(--sans);font-size:42px;font-weight:800;
  letter-spacing:-.03em;line-height:1;color:var(--white);
}
.price-main i{font-style:normal;font-size:18px;font-weight:700;color:var(--muted)}
.price-main small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
/* selo de desconto do ciclo, ao lado do preço de cada plano */
.price-save{
  align-self:center;
  margin-left:9px;
  padding:4px 10px;
  border-radius:var(--r-pill);
  background:rgba(255,113,0,.15);
  border:1px solid rgba(255,113,0,.42);
  color:var(--accent-text);
  font-size:12px;font-weight:800;letter-spacing:.02em;
}
.price-card.popular .price-save{
  background:rgba(255,113,0,.22);
  border-color:rgba(255,113,0,.6);
}

/* No MENSAL: preço riscado + "7 dias grátis".
   Nos demais ciclos não há teste grátis — mostra o preço cheio. */
.pricing-grid[data-ciclo="mensal"] .price-main{display:none}
.pricing-grid:not([data-ciclo="mensal"]) .price-old,
.pricing-grid:not([data-ciclo="mensal"]) .price-free{display:none}
/* faixa de limites do plano (grupos / leads) em destaque */
.price-limits{
  display:flex;align-items:stretch;
  margin-bottom:26px;
  border:1px solid var(--stroke);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  box-shadow:var(--glass-hl);
  overflow:hidden;
}
.price-limits div{flex:1;padding:11px 8px;text-align:center}
.price-limits div + div{border-left:1px solid var(--stroke)}
.price-limits b{
  display:block;font-family:var(--sans);font-size:17px;font-weight:800;color:var(--white);
  line-height:1.2;
}
.price-limits span{
  display:block;margin-top:3px;
  font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
}
.price-feats{list-style:none;display:grid;gap:13px;margin-bottom:32px}
.price-feats li{display:flex;gap:11px;align-items:center;color:var(--muted);font-size:14.5px}
.price-feats .ico{
  flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  background:rgba(255,113,0,.14);color:var(--accent-text);
  display:grid;place-items:center;
}
.price-card .btn,.price-card .btn-dark{margin-top:auto;justify-content:center;width:100%;padding-left:16px;padding-right:16px}
.price-note{
  margin-top:12px;text-align:center;
  color:var(--muted);font-size:12.5px;
}

/* selos de confiança abaixo dos planos */
.trust-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-top:44px;
}
.trust-item{
  display:flex;align-items:center;gap:11px;
  padding:13px 22px;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-pill);
  box-shadow:var(--glass-hl);
  font-family:var(--sans);font-size:14.5px;font-weight:600;
  transition:border-color .3s,transform .3s;
}
.trust-item:hover{border-color:var(--stroke-hover);transform:translateY(-2px)}
.trust-item svg{color:var(--accent-text);flex:0 0 auto}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px;margin:0 auto;display:grid;gap:14px}
.faq-item{
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--glass-hl);
  transition:border-color .3s;
}
.faq-item.open{border-color:var(--stroke-hover)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:none;border:none;cursor:pointer;
  color:var(--white);font-family:var(--sans);
  font-size:17px;font-weight:700;text-align:left;
  padding:22px 26px;
}
.faq-icon{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--glass-10);
  display:grid;place-items:center;
  transition:transform .4s cubic-bezier(.22,1,.36,1),background .3s,color .3s;
}
.faq-item.open .faq-icon{transform:rotate(45deg);background:rgba(255,113,0,.22);color:var(--accent-text)}
.faq-a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1);
}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a p{padding:0 26px 24px;color:var(--muted);font-size:16px}

/* ---------- CTA final ---------- */
.final-cta{position:relative;text-align:center;padding:104px 0 116px;overflow:hidden}
.final-cta svg.curves{
  position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);
  width:1400px;max-width:none;opacity:.5;pointer-events:none;
}
.final-cta .sub{margin-top:20px}
.final-cta .btn{margin-top:44px}
/* quarto orbe, ancorado no CTA: mesma luz azul do stage — no sistema o
   brilho de fundo nunca é laranja (o laranja fica só no que é clicável) */
.final-glow{
  position:absolute;left:50%;bottom:-260px;transform:translateX(-50%);
  width:900px;height:500px;border-radius:50%;
  background:radial-gradient(ellipse,var(--orb-3),transparent 65%);
  filter:blur(110px);opacity:.55;
  pointer-events:none;
}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--stroke);
  padding:64px 0 0;
  color:var(--muted);font-size:15px;
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px;
  padding-bottom:48px;
}
.footer-grid h5{
  font-family:var(--sans);color:var(--white);
  font-size:15px;font-weight:700;margin-bottom:18px;
}
.footer-grid ul{list-style:none;display:grid;gap:11px}
.footer-grid a{transition:color .3s}
.footer-grid a:hover{color:var(--accent-text)}
.footer-about p{margin:18px 0 20px;max-width:320px}
.footer-contact{display:grid;gap:8px}
.footer-bottom{
  border-top:1px solid var(--stroke);
  padding:26px 0;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:14px;
}
.footer-bottom .links{display:flex;gap:24px}
.footer-bottom a:hover{color:var(--accent-text)}

/* ---------- widget flutuante do WhatsApp ---------- */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:50;
  display:flex;align-items:center;gap:14px;
  padding:10px 20px 10px 10px;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-pill);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--glass-hl),0 10px 40px rgba(0,4,16,.5);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s;
}
.wa-float:hover{transform:translateY(-3px);border-color:var(--stroke-hover)}
.wa-float .wa-ico{
  width:44px;height:44px;border-radius:50%;
  background:var(--wa-grad);
  display:grid;place-items:center;color:#fff;
  position:relative;
}
.wa-float .wa-ico::after{
  content:"";position:absolute;top:1px;right:1px;
  width:10px;height:10px;border-radius:50%;
  background:var(--wa-green);
  border:2px solid #060B16;
}
.wa-float small{display:block;color:var(--muted);font-size:12.5px}
.wa-float strong{display:block;font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--white)}


/* ============================================================
   COMO FUNCIONA — 3 passos (LP, planos e integrações)
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.step{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:34px 30px 32px;
  box-shadow:var(--glass-hl);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s;
}
.step:hover{transform:translateY(-6px);border-color:var(--stroke-hover)}
.step::before{
  content:"";position:absolute;top:-70px;right:-70px;width:220px;height:220px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.05),transparent 70%);
}
.step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
/* número do passo: superfície pequena, então pode usar o gradiente da marca */
.step-num{
  width:40px;height:40px;border-radius:12px;
  background:var(--grad);color:#fff;
  border:1px solid var(--brand-edge);
  text-shadow:0 1px 2px rgba(0,0,0,.42);
  display:grid;place-items:center;
  font-family:var(--sans);font-size:15px;font-weight:800;
  box-shadow:0 6px 18px rgba(255,113,0,.22);
}
.step-ico{
  width:48px;height:48px;border-radius:14px;
  background:var(--tile-grad);border:1px solid var(--stroke);
  box-shadow:var(--glass-hl);
  display:grid;place-items:center;color:var(--accent-text);
}
.step h4,.step h3{font-family:var(--sans);font-size:19px;font-weight:700;margin-bottom:8px}
.step p{color:var(--muted);font-size:15.5px}
.step .step-time{
  margin-top:auto;padding-top:20px;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text-sub);
  display:flex;align-items:center;gap:8px;
}
.step .step-time svg{color:var(--accent-text)}

/* ============================================================
   MODOS DE RASTREAMENTO — grupo (destaque), conversa 1x1 e venda direta
   Sem backdrop-filter de propósito: ver a nota de desempenho no LEIA-ME.
   ============================================================ */
.modos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.modo{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:32px 30px;
  box-shadow:var(--glass-hl);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s;
}
.modo:hover{transform:translateY(-6px);border-color:var(--stroke-hover)}
.modo::before{
  content:"";position:absolute;top:-70px;right:-70px;width:220px;height:220px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.05),transparent 70%);
}
/* o modo de grupo é o carro-chefe: aro âmbar e fio de gradiente no topo */
.modo.destaque{border-color:rgba(255,113,0,.55);box-shadow:var(--glass-hl),0 0 60px rgba(255,113,0,.08)}
.modo.destaque::after{
  content:"";position:absolute;top:-1px;left:14%;right:14%;height:2px;
  background:var(--grad);border-radius:2px;box-shadow:0 0 14px rgba(255,113,0,.35);
}
.modo-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.modo-ico{
  width:48px;height:48px;border-radius:14px;
  background:var(--tile-grad);border:1px solid var(--stroke);
  box-shadow:var(--glass-hl);
  display:grid;place-items:center;color:var(--accent-text);
}
.modo-selo{
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--grad);color:#fff;border:1px solid var(--brand-edge);
  text-shadow:0 1px 2px rgba(0,0,0,.42);
  font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;
}
.modo h3{font-family:var(--sans);font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.modo > p{color:var(--muted);font-size:15.5px;margin-bottom:20px}
.modo ul{list-style:none;display:grid;gap:11px;margin-bottom:22px}
.modo li{display:flex;gap:10px;align-items:flex-start;color:var(--text-sub);font-size:14.5px}
.modo li svg{flex:0 0 auto;margin-top:4px;color:var(--accent-text)}
/* linha "vira lead quando…": a regra de contagem de cada modo */
.modo-lead{
  margin-top:auto;
  display:flex;align-items:flex-start;gap:10px;
  padding:14px 16px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--stroke);
  border-radius:14px;
  font-size:14px;color:var(--text-sub);
}
.modo-lead b{display:block;font-family:var(--sans);font-size:11.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.modo-lead svg{flex:0 0 auto;margin-top:3px;color:var(--accent-text)}

/* faixa larga: formulários, CRM e automações entram pela API e pelos webhooks */
.modo-extra{
  display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
  margin-top:20px;padding:28px 32px;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-hl);
}
.modo-extra .modo-ico{width:52px;height:52px}
.modo-extra h3{font-family:var(--sans);font-size:19px;font-weight:700;margin-bottom:6px}
.modo-extra p{color:var(--muted);font-size:15.5px;max-width:760px}
.modo-extra .acoes{display:flex;gap:10px;flex-wrap:wrap}

/* diagrama do caminho do lead (só no desktop: no celular os cards bastam) */
.fluxo{margin:0 auto 48px;max-width:1240px}   /* é desenho, não texto: acompanha a tela */
.fluxo svg{width:100%;height:auto;display:block}
.fluxo .cx{fill:rgba(255,255,255,.04);stroke:rgba(148,163,184,.22)}
.fluxo .cx-ac{fill:rgba(255,113,0,.10);stroke:rgba(255,113,0,.5)}
.fluxo .tx{fill:#F1F5F9;font-family:var(--sans);font-size:13px;font-weight:600;text-anchor:middle}
.fluxo .tx-sm{fill:#94A3B8;font-family:var(--sans);font-size:11px;font-weight:600;text-anchor:middle;letter-spacing:.06em;text-transform:uppercase}
.fluxo .ln{fill:none;stroke:rgba(148,163,184,.35);stroke-width:1.6}
.fluxo .ln-ac{fill:none;stroke:rgba(255,113,0,.55);stroke-width:1.8}

/* ============================================================
   PLANOS — tabela comparativa completa
   ============================================================ */
.cmp-wrap{
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-hl),0 24px 60px rgba(0,4,16,.35);
}
.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:860px}
.cmp th,.cmp td{
  padding:15px 18px;text-align:center;vertical-align:middle;
  border-bottom:1px solid var(--stroke);
  font-size:15px;color:var(--text-sub);
}
.cmp th:first-child,.cmp td:first-child{text-align:left;width:34%;color:var(--text)}
.cmp tbody tr:last-child td{border-bottom:0}
/* cabeçalho gruda logo abaixo do header fixo ao rolar */
.cmp thead th{
  position:sticky;top:calc(var(--header-h) - 18px);z-index:3;
  padding:20px 18px 18px;
  background:rgba(6,11,22,.94);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--stroke-hover);
}
.cmp thead th:first-child{border-top-left-radius:var(--r-lg)}
.cmp thead th:last-child{border-top-right-radius:var(--r-lg)}
.cmp .plan-name{
  display:block;font-family:var(--sans);font-size:14px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--white);
}
.cmp .plan-price{display:block;margin-top:4px;font-size:13px;font-weight:500;color:var(--muted)}
.cmp .plan-price b{color:var(--white);font-family:var(--sans);font-weight:700}
.cmp .plan-cta{margin-top:12px}
.cmp .plan-cta .btn,.cmp .plan-cta .btn-dark{padding:9px 16px;font-size:13.5px;width:100%;justify-content:center}
/* coluna recomendada com leve realce */
.cmp .rec{background:rgba(255,113,0,.045)}
.cmp thead th.rec{background:rgba(20,16,20,.96)}
.cmp thead th.rec .plan-name{color:var(--accent-text)}
/* linha de grupo (Limites / Rastreamento / Integrações / Suporte) */
.cmp tr.grp td{
  padding:14px 18px 10px;
  background:rgba(255,255,255,.03);
  font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  text-align:left;
}
.cmp tr.grp td svg{display:inline-block;vertical-align:-3px;margin-right:8px;color:var(--accent-text)}
.cmp td .hint{display:block;margin-top:3px;font-size:13px;color:var(--muted);font-weight:400}
.cmp td:first-child{font-family:var(--sans);font-weight:600;font-size:15px}
.cmp .yes,.cmp .no{
  display:inline-grid;place-items:center;
  width:24px;height:24px;border-radius:50%;
}
.cmp .yes{background:rgba(255,113,0,.15);color:var(--accent-text)}
.cmp .no{background:rgba(255,255,255,.06);color:rgba(255,255,255,.35)}
.cmp .val{font-family:var(--sans);font-weight:700;color:var(--white)}
.cmp-note{margin-top:16px;text-align:center;color:var(--muted);font-size:13.5px}

/* ---------- "qual plano é o meu?" ---------- */
.persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.persona{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:30px 28px;
  box-shadow:var(--glass-hl);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s;
}
.persona:hover{transform:translateY(-6px);border-color:var(--stroke-hover)}
.persona .plan-tag{
  align-self:flex-start;
  padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(255,113,0,.14);border:1px solid rgba(255,113,0,.4);
  color:var(--accent-text);
  font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:18px;
}
.persona h4,.persona h3{font-family:var(--sans);font-size:19px;font-weight:700;margin-bottom:8px;line-height:1.3}
.persona > p{color:var(--muted);font-size:15px;margin-bottom:18px}
.persona ul{list-style:none;display:grid;gap:9px;margin-bottom:24px}
.persona li{display:flex;gap:9px;align-items:flex-start;color:var(--text-sub);font-size:14.5px}
.persona li svg{flex:0 0 auto;margin-top:5px;color:var(--accent-text)}
.persona .section-link{margin-top:auto}

/* ============================================================
   CENTRAL DE AJUDA
   ============================================================ */
/* busca do topo */
.help-search{position:relative;max-width:660px;margin:34px auto 0}
.help-search input{
  width:100%;
  padding:19px 56px 19px 58px;
  font-family:var(--body);font-size:17px;color:var(--white);
  background:var(--card-grad);
  border:1px solid var(--stroke-hover);
  border-radius:var(--r-pill);
  box-shadow:var(--glass-hl),0 18px 50px rgba(0,4,16,.45);
  outline:none;
  transition:border-color .3s,box-shadow .3s;
}
.help-search input::placeholder{color:var(--muted)}
.help-search input:focus{border-color:var(--accent-ring);box-shadow:0 0 0 4px rgba(255,113,0,.12),0 18px 50px rgba(0,4,16,.45)}
.help-search > svg{position:absolute;left:24px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.help-search .kbd{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  padding:4px 9px;border-radius:8px;
  border:1px solid var(--stroke);background:var(--glass-05);
  font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);
}
.help-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.help-chips span{color:var(--muted);font-size:14px;align-self:center;margin-right:4px}
.help-chips button{
  padding:8px 14px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--glass-05);border:1px solid var(--stroke);
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--text-sub);
  transition:border-color .3s,color .3s,transform .3s;
}
.help-docs{margin-top:22px;color:var(--muted);font-size:14.5px}
.help-docs a{display:inline-flex;align-items:center;gap:6px;color:var(--accent-text);font-weight:600}
.help-docs a:hover{text-decoration:underline}
.help-chips button:hover{border-color:var(--stroke-hover);color:var(--white);transform:translateY(-2px)}

/* grade de categorias */
.help-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.help-cat{
  display:flex;flex-direction:column;gap:10px;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:20px;
  padding:26px 24px;
  box-shadow:var(--glass-hl);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s;
}
.help-cat:hover{transform:translateY(-6px);border-color:var(--stroke-hover)}
.help-cat .tile{
  width:46px;height:46px;border-radius:14px;
  background:var(--tile-grad);border:1px solid var(--stroke);
  box-shadow:var(--glass-hl);
  display:grid;place-items:center;color:var(--accent-text);
  margin-bottom:6px;
}
.help-cat h3{font-family:var(--sans);font-size:17px;font-weight:700}
.help-cat p{color:var(--muted);font-size:14.5px;flex:1}
.help-cat .count{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text-sub);display:flex;align-items:center;gap:6px}
.help-cat .count svg{color:var(--accent-text)}

/* layout com índice lateral fixo (desktop) */
.help-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:60px;align-items:start}
.help-nav{position:sticky;top:calc(var(--header-h) + 12px)}
.help-nav h5{
  font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  margin-bottom:12px;padding-left:14px;
}
.help-nav a{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:12px;
  font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--muted);
  border:1px solid transparent;
  transition:color .25s,background .25s,border-color .25s;
}
.help-nav a:hover{color:var(--white);background:var(--glass-05)}
.help-nav a.ativo{color:var(--white);background:var(--card-grad);border-color:var(--stroke)}
.help-nav a svg{flex:0 0 auto;color:var(--accent-text);opacity:.85}
.help-nav .help-contact-mini{
  margin-top:22px;padding:18px;
  background:var(--card-grad);border:1px solid var(--stroke);border-radius:16px;
  box-shadow:var(--glass-hl);
}
.help-nav .help-contact-mini p{color:var(--muted);font-size:13.5px;margin-bottom:12px}
.help-nav .help-contact-mini .btn-dark{width:100%;justify-content:center;padding:10px 14px;font-size:14px}
.help-nav .help-contact-mini .section-link{margin-top:12px;font-size:13.5px}

.help-group{margin-bottom:64px;scroll-margin-top:calc(var(--header-h) + 16px)}
.help-group:last-child{margin-bottom:0}
.help-group-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.help-group-head .tile{
  width:44px;height:44px;border-radius:13px;flex:0 0 auto;
  background:var(--tile-grad);border:1px solid var(--stroke);
  box-shadow:var(--glass-hl);
  display:grid;place-items:center;color:var(--accent-text);
}
.help-group-head h2{font-family:var(--sans);font-size:24px;font-weight:800;letter-spacing:-.02em}
.help-group-head p{color:var(--muted);font-size:14.5px;margin-top:2px}
.help-group .faq-list{max-width:none}
/* destaque do termo buscado */
.faq-item mark{background:rgba(255,113,0,.28);color:inherit;border-radius:3px;padding:0 2px}
.help-empty{
  display:none;text-align:center;padding:60px 24px;
  background:var(--card-grad);border:1px dashed var(--stroke-hover);border-radius:var(--r-lg);
  color:var(--muted);
}
.help-empty strong{display:block;font-family:var(--sans);font-size:19px;color:var(--white);margin-bottom:8px}
.help-empty .btn-dark{margin-top:20px}
.help-layout.sem-resultado .help-empty{display:block}
.help-layout.sem-resultado .help-group{display:none}
.help-results{display:none;margin-bottom:22px;color:var(--muted);font-size:14.5px}
.help-results b{color:var(--white)}
.help-layout.buscando .help-results{display:block}

/* ---------- contato ("ainda precisa de ajuda?") ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.contact-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:32px 30px;
  box-shadow:var(--glass-hl);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s;
}
.contact-card:hover{transform:translateY(-6px);border-color:var(--stroke-hover)}
.contact-card .tile{
  width:48px;height:48px;border-radius:14px;
  background:var(--tile-grad);border:1px solid var(--stroke);
  box-shadow:var(--glass-hl);
  display:grid;place-items:center;color:var(--accent-text);
}
.contact-card .tile.wa{background:var(--wa-grad);border-color:transparent;color:#fff}
.contact-card h4{font-family:var(--sans);font-size:19px;font-weight:700;margin-top:6px}
.contact-card p{color:var(--muted);font-size:15px;flex:1}
.contact-card .meta{font-family:var(--sans);font-size:13.5px;color:var(--text-sub);display:flex;align-items:center;gap:8px}
.contact-card .meta .dot{width:8px;height:8px;border-radius:50%;background:var(--wa-green);box-shadow:0 0 0 3px rgba(37,211,102,.18)}
.contact-card .btn,.contact-card .btn-dark{margin-top:8px}

/* ============================================================
   INTEGRAÇÕES — filtros + grade de cards
   ============================================================ */
.int-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:28px;
}
.int-filters{display:flex;flex-wrap:wrap;gap:8px}
.int-filters button{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--glass-05);border:1px solid var(--stroke);
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text-sub);
  transition:border-color .3s,color .3s,background .3s;
}
.int-filters button:hover{border-color:var(--stroke-hover);color:var(--white)}
.int-filters button.ativo{
  background:var(--grad);color:#fff;border-color:var(--brand-edge);
  text-shadow:0 1px 2px rgba(0,0,0,.42);
  box-shadow:0 6px 18px rgba(255,113,0,.22);
}
.int-filters button .n{
  padding:1px 7px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);font-size:11.5px;font-weight:700;
}
.int-search{position:relative;flex:1 1 200px;max-width:300px;min-width:200px}
.int-search input{
  width:100%;padding:12px 16px 12px 44px;
  font-family:var(--body);font-size:15px;color:var(--white);
  background:var(--card-grad);border:1px solid var(--stroke);border-radius:var(--r-pill);
  outline:none;transition:border-color .3s,box-shadow .3s;
}
.int-search input::placeholder{color:var(--muted)}
.int-search input:focus{border-color:var(--accent-ring);box-shadow:0 0 0 4px rgba(255,113,0,.12)}
.int-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}

.int-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.int-card{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow:var(--glass-hl);
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s;
}
.int-card:hover{transform:translateY(-4px);border-color:var(--stroke-hover)}
.int-card.oculto{display:none}
.int-card .mono{
  position:relative;overflow:hidden;flex:0 0 auto;
  width:48px;height:48px;border-radius:13px;
  display:grid;place-items:center;
  font-family:var(--sans);font-weight:800;font-size:15px;color:#fff;
  background:linear-gradient(145deg,hsl(var(--h) 75% 58%),hsl(calc(var(--h) + 28) 85% 42%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.int-card .mono img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:6px;background:#fff;border-radius:inherit;
}
.int-card[data-logo-dark] .mono img{background:#060B16;padding:4px}
.int-card .info{min-width:0;flex:1}
.int-card h4{font-family:var(--sans);font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.int-card p{color:var(--muted);font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* "Ver guia": cada card abre o passo a passo na documentação */
.int-card .badge{
  flex:0 0 auto;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--glass-05);border:1px solid var(--stroke);
  color:var(--muted);
  transition:border-color .3s,color .3s;
}
.int-card:hover .badge{border-color:rgba(255,113,0,.45);color:var(--accent-text)}
.int-card .badge.soon{background:var(--glass-05);border-color:var(--stroke);color:var(--muted)}
.int-empty{
  display:none;text-align:center;padding:48px 24px;
  background:var(--card-grad);border:1px dashed var(--stroke-hover);border-radius:var(--r-lg);
  color:var(--muted);
}
.int-empty strong{display:block;font-family:var(--sans);font-size:18px;color:var(--white);margin-bottom:6px}
.int-grid.vazia + .int-empty{display:block}

/* bloco "não achou a sua?" */
.int-request{
  display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:56px 60px;
  box-shadow:var(--glass-hl),0 24px 60px rgba(0,4,16,.35);
  position:relative;overflow:hidden;
}
.int-request::before{
  content:"";position:absolute;top:-120px;right:-120px;width:380px;height:380px;
  background:radial-gradient(circle,rgba(255,255,255,.04),transparent 70%);
  pointer-events:none;
}
.int-request .h-card{text-align:left}
.int-request .lead{color:var(--muted);margin-top:14px;font-size:16.5px}
.int-request .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.int-request .get-list{gap:12px}

/* linha de "resumo" em números (integrações / planos) */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.stat{
  text-align:center;padding:22px 16px;
  background:var(--card-grad);border:1px solid var(--stroke);border-radius:18px;
  box-shadow:var(--glass-hl);
}
.stat b{display:block;font-family:var(--sans);font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--white);line-height:1.1}
.stat span{display:block;margin-top:6px;color:var(--muted);font-size:13.5px;font-weight:500}

/* ---------- aviso de conteúdo em revisão (integrações) ---------- */
.notice{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 22px;
  background:rgba(255,113,0,.07);
  border:1px solid rgba(255,113,0,.32);
  border-radius:16px;
  color:var(--text-sub);font-size:14.5px;
}
.notice svg{flex:0 0 auto;color:var(--accent-text);margin-top:2px}
.notice strong{color:var(--white);font-family:var(--sans)}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (min-width:981px) and (max-height:830px){
  /* telas baixas de notebook: encolhe o hero para o VSL caber sem rolar */
  .hero{padding:20px 0 44px}
  .hero-stage{width:min(100%,318px)}
  .hero-copy .h-hero{font-size:clamp(34px,3.4vw,46px)}
  .hero-copy .sub{margin-top:18px}
  .hero-ctas{margin-top:26px}
}
@media (max-width:1380px){
  /* notebook: os cartões flutuantes se recolhem para não tocar a borda */
  .float-card.a{left:-108px}
  .float-card.b{right:-56px}
  .float-card.c{left:-80px}
}
@media (max-width:1180px){
  /* no desktop estreito os cartões flutuantes invadiriam a copy */
  .float-card{display:none}
  .hero-grid{gap:40px}
}
@media (max-width:1100px){
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .modo{padding:28px 24px}
  .price-card .desc{min-height:66px}   /* card mais largo: texto ocupa menos linhas */
  .persona-grid{grid-template-columns:repeat(2,1fr)}
  .help-cats{grid-template-columns:repeat(2,1fr)}
  .int-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  :root{--pad-x:24px}
  nav{display:none}
  /* nav vira menu hambúrguer; "Entrar" migra para dentro do painel */
  .menu-btn{display:flex}
  .header-actions > .btn-dark{display:none}
  .compare{grid-template-columns:1fr}
  .get-wrap{grid-template-columns:1fr;padding:50px 30px}
  /* hero empilhado, na ordem de uma página de VSL:
     título → subtítulo → VÍDEO → CTA → garantias → prova social.
     display:contents solta os filhos da coluna de copy para que o
     vídeo possa entrar no meio deles sem duplicar HTML. */
  .hero{padding:20px 0 48px}
  .hero-grid{display:flex;flex-direction:column;align-items:center;gap:0}
  .hero-copy{display:contents;text-align:center}
  .hero .pill{order:1}
  .hero .h-hero{order:2;text-align:center}
  .hero-copy .sub{order:3;margin:20px auto 0;text-align:center}
  .hero-media{order:4;width:100%;padding:0;margin-top:30px}
  .hero-ctas{order:5;width:100%;justify-content:center;margin-top:30px}
  .hero-checks{order:6;justify-content:center}
  .hero .social-proof{order:7;justify-content:center}
  .hero-stage{width:min(100%,340px)}
  .steps{grid-template-columns:1fr}
  .modos{grid-template-columns:1fr}
  .modo-extra{grid-template-columns:1fr;gap:18px;padding:26px 24px}
  .fluxo{display:none}   /* o diagrama some no celular; os cards contam a mesma história */
  .contact-grid{grid-template-columns:1fr}
  .int-request{grid-template-columns:1fr;padding:44px 30px}
  .int-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* central de ajuda: índice lateral vira lista horizontal no topo */
  .help-layout{grid-template-columns:1fr;gap:28px}
  .help-nav{position:static;display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .help-nav h5,.help-nav .help-contact-mini{display:none}
  .help-nav a{white-space:nowrap;background:var(--glass-05);border-color:var(--stroke)}
  /* tabela comparativa rola na horizontal e perde o cabeçalho fixo */
  .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp thead th{position:static}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer-about{grid-column:1/-1}   /* marca em cima, 4 colunas de links em 2×2 */
  :root{--header-h:92px}
  .logo img{height:42px}
  /* no mobile a pílula usa toda a largura disponível */
  header.compacto{height:calc(var(--header-h) - 10px)}
  header.compacto .header-inner{
    max-width:100%;padding:0 10px 0 16px;
    height:calc(100% - 14px);margin-top:7px;
  }
  header.compacto .logo img{height:36px}
}
@media (max-width:640px){
  /* planos empilhados: mais respiro entre os cards e sem escala
     (o scale do card popular encostava nos vizinhos no mobile) */
  .pricing-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto;gap:34px}
  .price-card{padding:34px 24px}
  .price-card .desc{min-height:0}      /* empilhados: não precisam alinhar entre si */
  .price-card.popular{transform:none}
  .price-card.popular:hover{transform:translateY(-8px)}
  .popular-badge{top:-13px}
  .trust-row{margin-top:36px;gap:10px}
  .trust-item{padding:12px 18px;font-size:13.5px}
  .billing-wrap{margin-bottom:40px}
  .billing-toggle{width:100%;max-width:440px}
  .billing-toggle button{flex:1;justify-content:center;padding:11px 8px;font-size:13.5px;gap:5px}
  .billing-toggle .economia{padding:2px 6px;font-size:10px}
  /* no celular as seções ficam mais juntas: a rolagem é mais longa */
  section{padding:54px 0}
  .section-head{margin-bottom:34px}
  .final-cta{padding:84px 0 92px}
  .logos-strip{padding:26px 0 50px}
  .testi-card{width:320px;height:352px}
  .benefit-card{width:290px}
  .video-shell{padding:6px;border-radius:30px}
  .video-frame{border-radius:25px}
  .play-btn{width:64px;height:64px}
  .hero-ctas .btn,.hero-ctas .btn-dark{width:100%;justify-content:center}
  /* no celular o selo do topo empurraria o vídeo para baixo */
  .hero .pill{display:none}
  .so-tela-grande{display:none}
  .so-tela-pequena{display:inline}
  /* título maior e texto curto: o VSL inteiro continua cabendo na primeira tela */
  .hero-copy .h-hero{font-size:clamp(34px,9.05vw,44px)}   /* 34px em 375: maior tamanho que ainda cabe em 5 linhas (em 35 vira 6 e o text-wrap:balance para de valer) */
  .hero-copy .sub{font-size:16px;margin-top:16px}
  .hero-media{margin-top:24px}
  .hero-ctas{margin-top:24px}
  .hero-stage{width:min(100%,294px)}
  .hero .social-proof{font-size:14.5px;text-align:left}
  /* WhatsApp flutuante vira só o ícone: não cobre botões do conteúdo */
  .wa-float{right:16px;bottom:16px;padding:7px}
  .wa-float > span:last-child{display:none}
  .wa-float .wa-ico{width:48px;height:48px}
  .persona-grid,.help-cats,.int-grid,.stat-row{grid-template-columns:1fr}
  .help-search input{padding:16px 18px 16px 50px;font-size:15.5px}
  .help-search > svg{left:18px}
  .help-search .kbd{display:none}
  .int-toolbar{flex-direction:column;align-items:stretch}
  .int-search{flex:1 1 auto;max-width:none}
  .cmp-note{font-size:13px}
  /* CTA do topo mais compacto para caber ao lado do hambúrguer */
  .header-actions > .btn{padding:11px 18px;font-size:14.5px}
  .footer-grid{grid-template-columns:1fr}
}
/* usuários que preferem menos movimento */
@media (prefers-reduced-motion:reduce){
  .marquee-track,.play-btn::after,.price-card.popular .price-free,.float-card{animation:none}
  /* modo assistindo sem deslocamento: só o esmaecer */
  .hero-stage.assistindo .float-card,
  .hero-stage.assistindo .video-tag,
  .hero-stage.assistindo .video-caption{translate:none;scale:none;filter:none;transition:opacity .3s ease,visibility 0s .3s}
  /* como no app: orbes param e ficam discretos */
  .stage::before,.stage::after,.stage .orb{animation:none !important;opacity:.3}
  .reveal,.hero-anim{opacity:1;transform:none;animation:none}
}


/* =========================================================================
   MENU SUSPENSO "RASTREAMENTO" (desktop)
   Abre no hover e no foco pelo teclado (:focus-within). Sem backdrop-filter:
   é um painel que cobre o conteúdo, então usa fundo quase opaco — a mesma
   escolha do .menu-card do celular.
   ========================================================================= */
.nav-drop{position:relative;display:flex;align-items:center}
/* ponte invisível: o mouse atravessa o vão entre o item e o painel */
.nav-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:18px}
/* é um <button>, porque só abre o menu — não leva a página nenhuma */
.nav-drop-t{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:0;
  font-family:var(--sans);font-size:16px;font-weight:500;color:var(--white);
  line-height:inherit;
  transition:color .3s;cursor:pointer;
}
.nav-drop-t svg{transition:transform .3s;opacity:.7}
.nav-drop:hover > .nav-drop-t,
.nav-drop:focus-within > .nav-drop-t,
.nav-drop.aberto > .nav-drop-t,
.nav-drop-t.ativo{color:var(--accent-text)}
.nav-drop:hover > .nav-drop-t svg,
.nav-drop:focus-within > .nav-drop-t svg,
.nav-drop.aberto > .nav-drop-t svg{transform:rotate(180deg)}
.nav-menu{
  position:absolute;top:100%;left:-14px;z-index:70;
  width:320px;margin-top:18px;padding:10px;
  display:grid;gap:2px;
  background:linear-gradient(160deg,rgba(10,18,32,.985),rgba(6,11,22,.985));
  border:1px solid var(--stroke-hover);
  border-radius:20px;
  box-shadow:var(--glass-hl),0 26px 60px rgba(0,4,16,.65);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.nav-drop:hover .nav-menu,
.nav-drop:focus-within .nav-menu,
.nav-drop.aberto .nav-menu{opacity:1;transform:none;pointer-events:auto}
.nav-menu a{display:block;padding:11px 14px;border-radius:14px;transition:background .25s}
.nav-menu a:hover,.nav-menu a:focus-visible{background:var(--glass-10)}
.nav-menu a b{display:block;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--white);transition:color .25s}
.nav-menu a:hover b,.nav-menu a.ativo b{color:var(--accent-text)}
.nav-menu a span{display:block;font-size:13.5px;color:var(--muted);line-height:1.4}

/* legenda de grupo dentro do menu do celular */
.menu-card .menu-label{
  padding:12px 16px 4px;
  font-family:var(--sans);font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* =========================================================================
   TRILHA DE NAVEGAÇÃO (breadcrumb) — acompanha o JSON-LD BreadcrumbList
   ========================================================================= */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-bottom:22px;
  font-size:14px;color:var(--muted);
}
.breadcrumb a{color:var(--muted);transition:color .3s}
.breadcrumb a:hover{color:var(--accent-text)}
.breadcrumb span[aria-current]{color:var(--text-sub)}
.breadcrumb svg{opacity:.5;flex:0 0 auto}

/* =========================================================================
   CARDS GENÉRICOS DAS PÁGINAS DE RASTREAMENTO
   Grade que se adapta sozinha: 3 colunas no desktop, 2 no tablet, 1 no celular.
   ========================================================================= */
.seo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.seo-grid.dois{grid-template-columns:repeat(2,minmax(0,1fr))}
.seo-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  padding:30px 28px;
  box-shadow:var(--glass-hl);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s;
}
.seo-card:hover{transform:translateY(-6px);border-color:var(--stroke-hover)}
.seo-card .seo-ico{
  width:46px;height:46px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:14px;
  background:rgba(255,113,0,.12);
  border:1px solid rgba(255,113,0,.28);
  color:var(--accent-text);
  margin-bottom:18px;
}
.seo-card h3{font-family:var(--sans);font-size:19px;font-weight:700;line-height:1.3;margin-bottom:10px}
.seo-card p{font-size:15.5px;color:var(--text-sub);line-height:1.6}
.seo-card p + p{margin-top:10px}
.seo-card .seo-foot{
  margin-top:auto;padding-top:18px;
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--accent-text);
  display:inline-flex;align-items:center;gap:7px;
}

/* bloco de texto corrido — é onde mora o conteúdo que o Google lê */
.seo-prose{max-width:860px}
.seo-prose p{font-size:17px;color:var(--text-sub);line-height:1.7}
.seo-prose p + p{margin-top:16px}
.seo-prose h3{font-family:var(--sans);font-size:22px;font-weight:700;margin:32px 0 12px}
.seo-prose strong{color:var(--white);font-weight:600}
.seo-prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

/* =========================================================================
   AJUSTES DE TELA
   ========================================================================= */
/* Nenhum item do cabeçalho pode quebrar em duas linhas: são cinco itens do
   menu mais dois botões, e o flex aperta tudo antes de deixar transbordar. */
nav > a,.nav-drop-t,.header-actions > .btn,.header-actions > .btn-dark{white-space:nowrap}

@media (max-width:1180px){
  /* notebook estreito (1024 e 1152 de largura): aperta menu e botões */
  nav{gap:20px}
  nav > a,.nav-drop-t{font-size:15px}
  header.compacto nav{gap:18px}
  .header-actions{gap:9px}
  .header-actions > .btn{padding:12px 20px;font-size:14.5px}
  .header-actions > .btn-dark{padding:11px 17px;font-size:14.5px}
  header.compacto .header-actions > .btn{padding:10px 18px}
  header.compacto .header-actions > .btn-dark{padding:9px 16px}
}
@media (max-width:1040px){
  nav{gap:15px}
  nav > a,.nav-drop-t{font-size:14.5px}
  header.compacto nav{gap:14px}
  .logo img{height:40px}
}
@media (max-width:1180px){
  .seo-grid,.seo-grid.dois{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .seo-grid,.seo-grid.dois{grid-template-columns:1fr}
  .seo-card{padding:26px 22px}
  .seo-prose p{font-size:16px}
}

/* link de aprofundamento dentro dos cards de modo (leva às páginas
   de rastreamento 1x1 e de venda direta) */
.modo .section-link{margin-top:14px;font-size:14.5px}


/* =========================================================================
   PÁGINAS DE RASTREAMENTO — peças de estrutura
   ========================================================================= */

/* ---- "Nesta página": atalhos para as seções, logo abaixo do hero ----
   Página longa sem índice obriga a rolar às cegas. Os chips usam as mesmas
   âncoras das seções, então também ajudam o Google a montar sitelinks. */
.indice{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  padding:22px 0 4px;
}
.indice > span{
  font-family:var(--sans);font-size:11.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-right:4px;
}
.indice a{
  padding:9px 16px;border-radius:var(--r-pill);
  background:var(--glass-05);
  border:1px solid var(--stroke);
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text-sub);
  transition:color .3s,border-color .3s,background .3s;
}
.indice a:hover{color:var(--accent-text);border-color:var(--accent-ring);background:var(--accent-soft)}

/* ---- frase de respiro no meio do texto corrido ----
   Quebra a parede de parágrafos e dá um ponto de parada para quem só passa
   o olho. É <p>, não <blockquote>: não estamos citando ninguém. */
.frase-destaque{
  margin:26px 0;padding:4px 0 4px 22px;
  border-left:3px solid var(--accent);
  font-family:var(--sans);font-size:21px;font-weight:600;line-height:1.4;
  color:var(--white);
}
.seo-prose .frase-destaque{font-size:21px}

/* ---- legenda abaixo do diagrama ---- */
.fluxo-nota{
  max-width:760px;margin:-26px auto 0;
  text-align:center;font-size:14.5px;color:var(--muted);
}
.fluxo-nota b{color:var(--text-sub);font-weight:600}

/* ---- versão do diagrama para o celular ----
   O `.fluxo` some abaixo de 980px. Em vez de deixar o buraco, a mesma
   sequência aparece como lista numerada. */
.fluxo-mini{display:none;list-style:none;counter-reset:passo}
.fluxo-mini li{
  counter-increment:passo;
  position:relative;
  display:flex;flex-direction:column;gap:2px;
  padding:14px 16px 14px 52px;
  background:var(--glass-05);
  border:1px solid var(--stroke);
  border-radius:14px;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--text);
}
.fluxo-mini li + li{margin-top:8px}
.fluxo-mini li::before{
  content:counter(passo);
  position:absolute;left:14px;top:13px;
  width:24px;height:24px;border-radius:8px;
  display:grid;place-items:center;
  background:var(--glass-10);
  font-size:12px;font-weight:800;color:var(--muted);
}
.fluxo-mini li.ac{background:rgba(255,113,0,.08);border-color:var(--accent-ring)}
.fluxo-mini li.ac::before{background:var(--accent-soft);color:var(--accent-text)}
.fluxo-mini li span{font-size:13.5px;font-weight:400;color:var(--muted)}

@media (max-width:980px){
  .fluxo-mini{display:block;margin-bottom:36px}
  .fluxo-nota{display:none}
  .indice{gap:8px;padding-top:18px}
  .indice a{padding:8px 13px;font-size:13px}
  .frase-destaque,.seo-prose .frase-destaque{font-size:18px;padding-left:16px}
}


/* =========================================================================
   AEO/GEO — blocos pensados para as buscas com IA
   O que o ChatGPT, o Perplexity e a visão geral do Google citam é trecho
   curto, autossuficiente e fácil de recortar. Estes dois blocos existem
   para isso; o resto da página continua sendo para gente.
   ========================================================================= */

/* ---- resposta direta: a pergunta-título respondida em três frases ---- */
.resposta-direta{
  max-width:860px;margin:0 auto;
  padding:30px 34px;
  background:var(--card-grad);
  border:1px solid var(--stroke);
  border-left:3px solid var(--accent);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-hl);
}
.resposta-direta .kicker{margin-bottom:12px}
.resposta-direta h2{
  font-family:var(--sans);font-size:22px;font-weight:700;line-height:1.35;
  color:var(--white);margin-bottom:12px;
}
.resposta-direta p{font-size:17px;line-height:1.65;color:var(--text-sub)}
.resposta-direta p + p{margin-top:12px}
.resposta-direta strong{color:var(--white);font-weight:600}

/* ---- tabela dos três modos ---- */
.tabela-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  background:var(--card-grad);
  box-shadow:var(--glass-hl);
}
.tabela-modos{width:100%;border-collapse:collapse;min-width:720px;font-size:15px}
.tabela-modos th,.tabela-modos td{
  padding:16px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--stroke);
}
.tabela-modos thead th{
  font-family:var(--sans);font-size:15px;font-weight:700;color:var(--white);
  background:var(--glass-05);
  white-space:nowrap;
}
.tabela-modos thead th:first-child{color:var(--muted);font-weight:600}
.tabela-modos tbody th{
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted);
  white-space:nowrap;
}
.tabela-modos td{color:var(--text-sub)}
.tabela-modos tr:last-child th,.tabela-modos tr:last-child td{border-bottom:0}
.tabela-modos .aqui{color:var(--accent-text)}
.tabela-modos .aqui-col{background:rgba(255,113,0,.06)}

@media (max-width:760px){
  .resposta-direta{padding:24px 22px}
  .resposta-direta h2{font-size:19px}
  .resposta-direta p{font-size:16px}
}

/* legenda da tabela: existe para leitor de tela e para as buscas com IA,
   mas não precisa aparecer na página */
.sr-apenas{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/* =========================================================================
   MONITOR GRANDE — ajustes que o container fluido não resolve sozinho
   (o container em si é o clamp lá em cima, no :root)
   ========================================================================= */
@media (min-width:1500px){
  :root{--pad-x:48px}
  /* o título acompanha um pouco, senão fica pequeno na coluna mais larga */
  .hero-copy .h-hero{font-size:clamp(56px,3.6vw,62px)}
  .hero-copy .sub{max-width:660px}
}
@media (min-width:1800px){
  /* o palco do vídeo cresce junto para o hero não desequilibrar */
  .hero-stage{width:min(100%,440px)}
}
@media (min-width:2200px){
  :root{--pad-x:56px}
  .hero-stage{width:min(100%,460px)}
}