/* =============================================================================
   Silver Tecnologia — design system do site institucional
   -----------------------------------------------------------------------------
   Um arquivo só, dividido em blocos numerados. Tudo é token: cor, raio, sombra e
   espaçamento saem das custom properties do :root, e o tema claro só REDEFINE
   esses tokens (bloco 1.2). Nenhuma cor literal fora do bloco 1 — foi assim que
   o painel do Gabinete 360 conseguiu manter dois temas sem divergir, e o mesmo
   vale aqui.

   Ordem dos blocos:
     1. Tokens (escuro = padrão, claro = override)   9. Produtos
     2. Reset e base                                10. Segmentos
     3. Utilitários (container, botões, cards)      11. Processo
     4. Cabeçalho e menu                            12. Stack
     5. Hero                                        13. FAQ
     6. Faixa de números                            14. Contato
     7. Serviços                                    15. Rodapé
     8. (livre)                                     16. Página de produto
                                                    17. Animação de entrada
                                                    18. Responsivo
   ============================================================================ */

/* 1.1 — TOKENS: tema escuro (padrão) ======================================== */
:root {
  /* Superfícies, do fundo da página para o topo da pilha. Grafite NEUTRO: sem
     viés de azul, para o metal do logotipo não puxar para o frio. */
  --bg: #0b0d10;
  --bg-2: #0f1216;
  --surface: #14181d;
  --surface-2: #1a1f26;
  --surface-3: #222831;

  /* Linhas. --line desenha borda visível; --line-soft é o fio de vidro que
     separa sem pesar (usado nas bordas superiores de card). */
  --line: #262d36;
  --line-soft: rgba(255, 255, 255, 0.07);

  /* Texto, do mais forte ao mais apagado. --txt-3 nunca carrega informação
     essencial: no escuro ele fica perto do mínimo de contraste. */
  --txt: #eef1f4;
  --txt-2: #a8b2bd;
  --txt-3: #7c8894;

  /* Marca — PRATA E GRAFITE, monocromática (decisão de 28/08/2026, tomada a
     partir do logotipo metálico). NÃO existe cor de acento: a ação é feita por
     CONTRASTE, não por matiz. No escuro o botão é platina com texto grafite; no
     claro é o inverso. --brand-ink é o que se escreve EM CIMA do --brand, e
     --brand-hover a variação do hover (no escuro clareia, no claro escurece).
     O único ponto de cor do site é o laranja do Gabinete 360, e só onde o
     produto aparece — que é justamente o que o faz saltar aos olhos. */
  --brand: #e6ebf1;
  --brand-hover: #ffffff;
  --brand-2: #b9c4d0;
  --brand-3: #8794a3;
  --brand-ink: #0b0d10;
  --brand-soft: rgba(230, 235, 241, 0.10);
  --brand-line: rgba(230, 235, 241, 0.26);

  /* Estado */
  --ok: #35d39b;
  --ok-soft: rgba(53, 211, 155, 0.14);
  --warn: #f5b64a;
  --err: #f2637a;

  /* Gabinete 360 — paleta do produto, extraída do painel
     (apps/web/gabinete/assets/style.css). Aparece só onde o produto aparece. */
  --gab: #ed5b1e;
  --gab-2: #f2713a;
  --gab-navy: #0e2a4d;
  --gab-soft: rgba(237, 91, 30, 0.14);
  --gab-line: rgba(237, 91, 30, 0.34);
  --gab-btn-txt: #081a33;

  /* Prata: o gradiente que dá nome à empresa e reproduz o metal do logotipo.
     Usado nos títulos grandes. */
  --silver-grad: linear-gradient(180deg, #ffffff 0%, #c3ccd6 52%, #93a0ad 100%);

  /* Sombras. No escuro elas somem contra o fundo, então o relevo vem também de
     um halo interno claro (inset) — sem ele, card escuro sobre fundo escuro
     desaparece. */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --sh-2: 0 24px 60px -24px rgba(0, 0, 0, 0.75);
  /* Sem cor de marca, o botão principal não tem "brilho colorido" para projetar
     — a sombra dele é neutra, só profundidade. */
  --sh-brand: 0 16px 40px -20px rgba(0, 0, 0, 0.9);
  --ring: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* Geometria */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --largura: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --secao-y: clamp(72px, 9vw, 132px);

  /* Tipografia */
  --f-display: 'Sora', 'Inter', system-ui, sans-serif;
  --f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --transicao: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: dark;
}

/* 1.2 — TOKENS: tema claro (override) ======================================= */
[data-theme='claro'] {
  --bg: #f4f6f8;
  --bg-2: #eaedf1;
  --surface: #ffffff;
  --surface-2: #f5f7f9;
  --surface-3: #eceff3;

  --line: #dde2e8;
  --line-soft: rgba(20, 24, 29, 0.08);

  --txt: #14181d;
  --txt-2: #4a545f;
  --txt-3: #5d6771;

  /* A platina do tema escuro sobre branco seria invisível. No claro os papéis
     se invertem: a ação vira o grafite, escrito em branco (15,8:1). O eixo
     continua o mesmo — prata e grafite, sem matiz. */
  --brand: #1c232b;
  --brand-hover: #333e4a;
  --brand-2: #4a545f;
  --brand-3: #7c8894;
  --brand-ink: #ffffff;
  --brand-soft: rgba(28, 35, 43, 0.06);
  --brand-line: rgba(28, 35, 43, 0.18);

  --ok: #0b7350;
  --ok-soft: rgba(15, 157, 107, 0.12);
  --warn: #8a5600;
  --err: #c62740;

  /* Idem para o laranja do produto: #ed5b1e sobre branco dá 3,4:1. */
  --gab: #a83a0c;
  --gab-2: #c8470f;
  --gab-soft: rgba(237, 91, 30, 0.10);
  --gab-line: rgba(237, 91, 30, 0.30);
  --gab-btn-txt: #ffffff;

  --silver-grad: linear-gradient(180deg, #14181d 0%, #384350 60%, #4a545f 100%);

  --sh-1: 0 1px 2px rgba(20, 24, 29, 0.06), 0 10px 28px -18px rgba(20, 24, 29, 0.35);
  --sh-2: 0 28px 64px -30px rgba(20, 24, 29, 0.35);
  --sh-brand: 0 16px 36px -20px rgba(20, 24, 29, 0.55);
  --ring: inset 0 1px 0 rgba(255, 255, 255, 0.8);

  color-scheme: light;
}

/* 2 — RESET E BASE ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Compensa o cabeçalho fixo quando o link de âncora rola até a seção. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--txt-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* A cor do tema entra com transição para o toggle não "piscar". */
  transition: background-color var(--transicao), color var(--transicao);
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  color: var(--txt);
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.15rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
}

h3 {
  font-size: clamp(1.12rem, 1.7vw, 1.32rem);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--transicao);
}

a:hover {
  color: var(--txt);
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul {
  list-style: none;
}

::selection {
  background: var(--brand);
  color: var(--brand-ink);
}

/* Foco visível em tudo que é operável. `:focus-visible` (e não `:focus`) deixa o
   anel só para teclado — clique de mouse não acende. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Pular para o conteúdo — primeiro Tab da página. */
.pular {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  background: var(--brand);
  color: var(--brand-ink);
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--transicao);
}

.pular:focus {
  top: 16px;
  color: var(--brand-ink);
}

/* 3 — UTILITÁRIOS =========================================================== */
.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao {
  padding-block: var(--secao-y);
  position: relative;
}

.secao--alt {
  background: var(--bg-2);
}

/* Cabeçalho de seção: etiqueta, título, linha de apoio. */
.secao-topo {
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 68px);
}

.secao-topo.centro {
  margin-inline: auto;
  text-align: center;
}

.secao-topo p {
  margin-top: 16px;
  font-size: 1.06rem;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.etiqueta::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

/* Texto com o gradiente prata da marca. O fallback (color) fica visível se o
   navegador não suportar background-clip:text. */
.prata {
  color: var(--txt);
  background: var(--silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brilho {
  color: var(--brand);
}

/* Botões ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-texto);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 13px 24px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--transicao), background-color var(--transicao),
    border-color var(--transicao), box-shadow var(--transicao), color var(--transicao);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primario {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: var(--sh-brand);
}

.btn--primario:hover {
  background: var(--brand-hover);
  color: var(--brand-ink);
}

.btn--fantasma {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--txt);
  border-color: var(--line);
  backdrop-filter: blur(8px);
}

.btn--fantasma:hover {
  border-color: var(--brand-line);
  color: var(--txt);
  background: var(--surface-2);
}

.btn--gab {
  background: var(--gab);
  color: var(--gab-btn-txt);
  box-shadow: 0 18px 44px -22px var(--gab);
}

.btn--gab:hover {
  background: var(--gab-2);
  color: var(--gab-btn-txt);
}

.btn--pequeno {
  padding: 9px 17px;
  font-size: 0.88rem;
}

.btn--largo {
  width: 100%;
}

/* Link com seta que anda no hover. */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.93rem;
}

.link-seta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transicao);
}

.link-seta:hover svg {
  transform: translateX(4px);
}

/* Card padrão ------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--sh-1), var(--ring);
  transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}

.card--hover:hover {
  transform: translateY(-4px);
  border-color: var(--brand-line);
  box-shadow: var(--sh-2), var(--ring);
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  font-size: 0.97rem;
}

/* Ícone quadrado dos cards. */
.icone-caixa {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand);
  margin-bottom: 20px;
}

.icone-caixa svg {
  width: 22px;
  height: 22px;
}

/* Lista com marcador de "check". */
.lista-check {
  display: grid;
  gap: 11px;
  margin-top: 20px;
}

.lista-check li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.94rem;
  color: var(--txt-2);
}

.lista-check li svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 4px;
  color: var(--brand-2);
}

/* Selo pequeno (status de produto, tag de stack). */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--txt-2);
  background: var(--surface-2);
}

.selo--ativo {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 32%, transparent);
}

.selo--breve {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}

/* Item de grade/flex NÃO encolhe abaixo do conteúdo dele por padrão: o
   `min-width` implícito é `auto`, e basta um filho que não quebra linha para a
   coluna inteira ficar mais larga que a tela. Foi o que aconteceu na página do
   produto no celular: a URL do mock (`.mock-url`, com `white-space: nowrap`)
   esticou a coluna, e o TEXTO AO LADO saiu cortado pela direita.

   O `overflow-x: hidden` do body escondia o estrago, o que fez a varredura
   automática passar limpa — o defeito só apareceu no print de 390px. Mais um
   caso de "a imagem ganha da medição".

   `min-width: 0` devolve a permissão de encolher, e aí o `text-overflow` do
   .mock-url volta a funcionar como foi escrito. */
.grade>*,
.hero-grade>*,
.produto-destaque>*,
.contato-grade>*,
.mock-tela {
  min-width: 0;
}

/* Grades reutilizadas. */
.grade {
  display: grid;
  gap: clamp(18px, 2vw, 24px);
}

.grade--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grade--3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grade--4 {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

/* Fundo decorativo: dois halos de cor. `pointer-events:none` porque ele cobre a
   seção inteira e engoliria os cliques. */
.halo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.halo::before,
.halo::after {
  content: '';
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0.5;
}

.halo::before {
  background: var(--brand);
  top: -320px;
  left: -180px;
}

.halo::after {
  background: var(--brand-3);
  bottom: -380px;
  right: -220px;
  opacity: 0.32;
}

[data-theme='claro'] .halo::before {
  opacity: 0.16;
}

[data-theme='claro'] .halo::after {
  opacity: 0.12;
}

.secao>.container {
  position: relative;
  z-index: 1;
}

/* 4 — CABEÇALHO ============================================================= */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color var(--transicao), border-color var(--transicao), backdrop-filter var(--transicao);
  border-bottom: 1px solid transparent;
}

/* Estado ganho no scroll (via JS): o cabeçalho "materializa". */
.topo.rolou {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  height: 74px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--txt);
}

.marca:hover {
  color: var(--txt);
}

.marca svg {
  width: 34px;
  height: 34px;
}

/* Dois arquivos de símbolo, um por tema — o metálico foi desenhado para fundo
   escuro e some contra o branco; o mono (#393d40) é o oposto. A troca usa o
   mesmo par data-icone-escuro / data-icone-claro do botão de tema, logo abaixo.
   Os dois vêm recortados dos vetores originais por infra/extrair-simbolo.js. */
.marca img {
  width: auto;
}

.marca-texto {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  /* Sem isto o "Tecnologia" desce para uma segunda linha no celular, o que
     empurra o botao do menu para fora da tela. */
  white-space: nowrap;
}

.marca-texto span {
  color: var(--txt-3);
  font-weight: 400;
  letter-spacing: 0.14em;
}

.menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.menu a {
  white-space: nowrap;
  color: var(--txt-2);
  font-size: 0.94rem;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--r-xs);
  transition: color var(--transicao), background-color var(--transicao);
}

.menu a:hover {
  color: var(--txt);
  background: var(--surface-2);
}

.menu a[aria-current='page'] {
  color: var(--txt);
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Botão do tema e do menu mobile compartilham a cápsula. */
.icone-botao {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--txt-2);
  transition: color var(--transicao), border-color var(--transicao), background-color var(--transicao);
}

.icone-botao:hover {
  color: var(--txt);
  border-color: var(--brand-line);
}

.icone-botao svg {
  width: 19px;
  height: 19px;
}

/* O par sol/lua: mostra um por tema. */
[data-icone-claro] {
  display: none;
}

[data-theme='claro'] [data-icone-claro] {
  display: block;
}

[data-theme='claro'] [data-icone-escuro] {
  display: none;
}

.abrir-menu {
  display: none;
}

/* Gaveta mobile ------------------------------------------------------------ */
.gaveta {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(10px);
  padding: 96px var(--gutter) 40px;
  display: grid;
  align-content: start;
  gap: 6px;
  /* Fica fora da tela e sem receber clique enquanto fechada. */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), visibility 280ms;
}

.gaveta.aberta {
  transform: translateX(0);
  visibility: visible;
}

.gaveta a {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--txt);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.gaveta .btn {
  margin-top: 26px;
  font-size: 1rem;
  padding: 15px 24px;
}

/* 5 — HERO ================================================================== */
.hero {
  position: relative;
  padding-top: clamp(120px, 16vw, 172px);
  padding-bottom: var(--secao-y);
  overflow: hidden;
}

/* Fundo Global com pontos e partículas */
.fundo-global {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

.fundo-global-malha {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
  background-size: 34px 34px;
  /* Opacidade reduzida para não brigar com a leitura no site inteiro */
  opacity: 0.6;
}

#fundo-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.4;
}

[data-theme='claro'] #fundo-canvas {
  opacity: 0.25;
}

.hero-grade {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

.hero h1 {
  margin-bottom: 22px;
}

.hero-sub {
  font-size: clamp(1.03rem, 1.5vw, 1.17rem);
  max-width: 33em;
  margin-bottom: 34px;
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-bottom: 30px;
}

.hero-nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 0.87rem;
  color: var(--txt-3);
}

.hero-nota span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-nota svg {
  width: 15px;
  height: 15px;
  color: var(--brand-2);
}

/* Terminal do hero — herdado do esboço original, que é a assinatura da marca.
   Foi mantido, mas encolhido: agora divide espaço com a mensagem comercial em
   vez de ocupar a tela inteira. */
.terminal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2), var(--ring);
  overflow: hidden;
}

.terminal-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.terminal-bolas {
  display: flex;
  gap: 7px;
}

.terminal-bolas i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: block;
}

.terminal-bolas i:nth-child(1) {
  background: #ff5f56;
}

.terminal-bolas i:nth-child(2) {
  background: #ffbd2e;
}

.terminal-bolas i:nth-child(3) {
  background: #27c93f;
}

.terminal-titulo {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  color: var(--txt-3);
  margin-inline: auto;
  /* Compensa a largura das bolinhas para o título ficar no centro ótico. */
  padding-right: 47px;
}

.terminal-corpo {
  padding: 22px;
  font-family: var(--f-mono);
  font-size: 0.87rem;
  line-height: 1.85;
  color: var(--txt-2);
  /* Altura fixa: sem isso o card cresce linha a linha durante a digitação e
     empurra a página inteira para baixo enquanto a pessoa lê. */
  min-height: 232px;
}

.terminal-corpo .cmd {
  color: var(--txt);
}

.terminal-corpo .ok {
  color: var(--ok);
}

.terminal-corpo .dim {
  color: var(--txt-3);
}

.prompt {
  color: var(--brand-2);
}

.cursor {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--brand);
  animation: piscar 1.05s step-end infinite;
}

@keyframes piscar {
  50% {
    opacity: 0;
  }
}

/* Cartões que "flutuam" ao lado do terminal. */
.hero-flutuante {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 14px;
  grid-template-columns: 1fr 1fr;
}

.mini-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
}

.mini-card svg {
  width: 20px;
  height: 20px;
  color: var(--brand);
  flex: none;
  margin-top: 3px;
}

.mini-card b {
  display: block;
  color: var(--txt);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.mini-card small {
  font-size: 0.78rem;
  color: var(--txt-3);
}

/* 6 — FAIXA DE NÚMEROS ====================================================== */
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.numero {
  background: var(--surface);
  padding: clamp(24px, 3vw, 34px);
  text-align: center;
}

.numero b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 700;
  color: var(--txt);
  letter-spacing: -0.03em;
  line-height: 1;
}

.numero>span {
  display: block;
  margin-top: 9px;
  font-size: 0.88rem;
  color: var(--txt-3);
}

/* 7 — SERVIÇOS ============================================================== */
.servico {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.servico p {
  flex: 1;
}

.servico .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.servico .tags span {
  font-family: var(--f-mono);
  font-size: 0.71rem;
  color: var(--txt-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}

/* 9 — PRODUTOS ============================================================== */
/* O card de destaque ocupa a linha inteira e usa a cor do produto. */
.produto-destaque {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-xl);
  border: 1px solid var(--gab-line);
  background:
    radial-gradient(120% 130% at 100% 0%, var(--gab-soft) 0%, transparent 55%),
    var(--surface);
  box-shadow: var(--sh-2), var(--ring);
  margin-bottom: clamp(20px, 2.6vw, 30px);
}

.produto-destaque .selo--ativo {
  margin-bottom: 18px;
}

.produto-destaque h3 {
  font-size: clamp(1.6rem, 2.7vw, 2.15rem);
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}

.produto-destaque h3 svg {
  width: 38px;
  height: 38px;
  flex: none;
}

.produto-destaque .acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Mock de interface: uma janela de navegador desenhada em CSS. Não é screenshot
   — enquanto o produto não tem imagem final, um mock honesto e abstrato é mais
   verdadeiro que um print de tela de exemplo. */
.mock {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
  box-shadow: var(--sh-2);
}

.mock-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
}

.mock-barra i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  display: block;
}

.mock-url {
  flex: 1;
  margin-left: 6px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--txt-3);
  background: var(--surface);
  border-radius: 5px;
  padding: 4px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-corpo {
  display: flex;
  min-height: 250px;
}

.mock-menu {
  width: 78px;
  border-right: 1px solid var(--line);
  padding: 13px 10px;
  display: grid;
  gap: 9px;
  align-content: start;
  background: var(--surface);
}

.mock-menu i {
  height: 9px;
  border-radius: 3px;
  background: var(--line);
  display: block;
}

.mock-menu i.on {
  background: var(--gab);
  opacity: 0.85;
}

.mock-tela {
  flex: 1;
  padding: 15px;
  display: grid;
  gap: 11px;
  align-content: start;
}

.mock-linha {
  height: 11px;
  border-radius: 4px;
  background: var(--line);
}

.mock-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.mock-tile {
  height: 52px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 9px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.mock-tile i {
  display: block;
  height: 7px;
  border-radius: 3px;
  background: var(--line);
}

.mock-tile i:first-child {
  width: 55%;
  background: var(--gab);
  opacity: 0.75;
}

.mock-tabela {
  display: grid;
  gap: 7px;
  margin-top: 3px;
}

.mock-tabela i {
  display: block;
  height: 15px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* Cards de produtos futuros. */
.produto-breve {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.produto-breve .selo {
  align-self: flex-start;
}

.produto-breve h3 {
  font-size: 1.12rem;
  margin: 0;
}

.produto-breve p {
  font-size: 0.93rem;
  flex: 1;
}

/* Tracejado = ainda não existe. A borda diz isso antes do texto. */
.card--rascunho {
  border-style: dashed;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.card--rascunho:hover {
  border-color: var(--line);
  transform: none;
}

/* 10 — SEGMENTOS ============================================================ */
.segmento {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding: 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color var(--transicao), transform var(--transicao);
}

.segmento:hover {
  border-color: var(--brand-line);
  transform: translateY(-3px);
}

.segmento svg {
  width: 24px;
  height: 24px;
  color: var(--brand);
  flex: none;
  margin-top: 3px;
}

.segmento b {
  display: block;
  color: var(--txt);
  font-family: var(--f-display);
  font-size: 1.02rem;
  margin-bottom: 5px;
}

.segmento p {
  font-size: 0.92rem;
}

/* 11 — PROCESSO ============================================================= */
.passos {
  display: grid;
  gap: 0;
  counter-reset: passo;
}

.passo {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 24px;
  padding-bottom: 40px;
  position: relative;
}

/* A linha vertical que liga os passos — some no último. */
.passo::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 56px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--line), transparent);
}

.passo:last-child {
  padding-bottom: 0;
}

.passo:last-child::before {
  display: none;
}

.passo-num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--brand-line);
  box-shadow: var(--ring);
}

.passo-num::before {
  content: '0' counter(passo);
}

.passo h3 {
  margin-bottom: 8px;
  padding-top: 13px;
}

.passo p {
  font-size: 0.97rem;
  max-width: 62ch;
}

/* 12 — STACK (CAROUSEL) ===================================================== */
.tech-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 20px 0;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.tech-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: tech-scroll 30s linear infinite;
}

.tech-track:hover {
  animation-play-state: paused;
}

@keyframes tech-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 10px));
  }
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform var(--transicao), border-color var(--transicao);
}

.tech-item:hover {
  transform: translateY(-3px);
  border-color: var(--brand-line);
}

.tech-item i {
  font-size: 52px;
  color: var(--brand);
}

.tech-item span {
  font-family: var(--f-mono);
  font-size: 0.95rem;
  color: var(--txt-2);
}

/* 13 — FAQ ================================================================== */
.faq {
  display: grid;
  gap: 12px;
  max-width: 840px;
  margin-inline: auto;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--transicao);
}

.faq-item.aberto {
  border-color: var(--brand-line);
}

.faq-botao {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  padding: 20px 24px;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--txt);
}

.faq-botao svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--txt-3);
  transition: transform var(--transicao), color var(--transicao);
}

.faq-item.aberto .faq-botao svg {
  transform: rotate(45deg);
  color: var(--brand);
}

/* A resposta anima por grid-template-rows: 0fr -> 1fr, que é o jeito de animar
   "altura automática" sem medir nada no JS. */
.faq-resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.aberto .faq-resposta {
  grid-template-rows: 1fr;
}

.faq-resposta>div {
  overflow: hidden;
}

.faq-resposta p {
  padding: 0 24px 22px;
  font-size: 0.96rem;
}

.text-center {
  text-align: center;
}

/* 14 — CONTATO ============================================================== */
.contato-grade {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(30px, 4vw, 56px);
  align-items: start;
}

.contato-canais {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}

.contato-canal {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--txt-2);
  transition: border-color var(--transicao), transform var(--transicao);
}

.contato-canal:hover {
  border-color: var(--brand-line);
  transform: translateX(3px);
  color: var(--txt-2);
}

.contato-canal svg {
  width: 21px;
  height: 21px;
  color: var(--brand);
  flex: none;
}

.contato-canal b {
  display: block;
  color: var(--txt);
  font-size: 0.95rem;
}

.contato-canal small {
  font-size: 0.83rem;
  color: var(--txt-3);
}

.form {
  display: grid;
  gap: 17px;
}

.campo {
  display: grid;
  gap: 7px;
}

.campo label {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--txt);
}

.campo input,
.campo select,
.campo textarea {
  font-family: var(--f-texto);
  font-size: 0.96rem;
  color: var(--txt);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  width: 100%;
  transition: border-color var(--transicao), background-color var(--transicao);
}

.campo textarea {
  resize: vertical;
  min-height: 118px;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--txt-3);
}

.campo select {
  appearance: none;
  cursor: pointer;
}

.campo.erro input,
.campo.erro select,
.campo.erro textarea {
  border-color: var(--err);
}

.campo .msg-erro {
  font-size: 0.81rem;
  color: var(--err);
}

.form-nota {
  font-size: 0.83rem;
  color: var(--txt-3);
}

/* Aviso de envio. Nasce escondido e o JS liga. */
.form-aviso {
  display: none;
  gap: 11px;
  align-items: flex-start;
  padding: 15px 17px;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  background: var(--ok-soft);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  color: var(--txt);
}

.form-aviso.visivel {
  display: flex;
}

.form-aviso svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--ok);
  margin-top: 2px;
}

/* Campo isca contra robô: fora da tela, mas não `display:none` (alguns robôs
   ignoram campos ocultos assim). Se vier preenchido, o envio é descartado. */
.isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 15 — RODAPÉ ============================================================== */
.rodape {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding-top: clamp(52px, 6vw, 76px);
}

.rodape-grade {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: 46px;
}

.rodape-sobre p {
  font-size: 0.92rem;
  margin-top: 16px;
  max-width: 34ch;
}

.rodape h5 {
  font-family: var(--f-mono);
  font-size: 0.73rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-bottom: 15px;
  font-weight: 500;
}

.rodape-lista {
  display: grid;
  gap: 10px;
}

.rodape-lista a {
  color: var(--txt-2);
  font-size: 0.93rem;
}

.rodape-lista a:hover {
  color: var(--brand);
}

.rodape-baixo {
  border-top: 1px solid var(--line);
  padding-block: 22px 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--txt-3);
}

.rodape-baixo .obra {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  color: var(--warn);
}

.rodape-baixo .obra::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulsar 2.2s ease-in-out infinite;
}

@keyframes pulsar {
  50% {
    opacity: 0.25;
  }
}

/* 16 — PÁGINA DE PRODUTO =================================================== */
/* O tema do produto: `data-produto="gabinete-360"` troca o azul da marca pelo
   laranja do Gabinete 360 dentro da página inteira, sem duplicar regra nenhuma.
   Foi por isso que tudo virou token no bloco 1. */
[data-produto='gabinete-360'] {
  --brand: var(--gab);
  --brand-2: var(--gab-2);
  --brand-ink: var(--gab-btn-txt);
  --brand-soft: var(--gab-soft);
  --brand-line: var(--gab-line);
  --sh-brand: 0 18px 44px -22px var(--gab);
}

.produto-hero {
  padding-top: clamp(118px, 15vw, 158px);
  padding-bottom: clamp(52px, 6vw, 76px);
  position: relative;
  overflow: hidden;
}

.migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 0.85rem;
  color: var(--txt-3);
  margin-bottom: 26px;
}

.migalhas a {
  color: var(--txt-3);
}

.migalhas a:hover {
  color: var(--brand);
}

.migalhas svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

.produto-titulo {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.produto-titulo svg {
  width: clamp(48px, 6vw, 66px);
  height: clamp(48px, 6vw, 66px);
  flex: none;
}

.produto-titulo h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  margin: 0;
}

.recurso {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.recurso svg {
  width: 22px;
  height: 22px;
  color: var(--brand);
  flex: none;
  margin-top: 4px;
}

.recurso b {
  display: block;
  color: var(--txt);
  font-family: var(--f-display);
  font-size: 1.02rem;
  margin-bottom: 5px;
}

.recurso p {
  font-size: 0.93rem;
}

/* Faixa de acesso ao sistema, no fim da página de produto. */
.faixa-acesso {
  text-align: center;
  padding: clamp(36px, 5vw, 60px);
  border-radius: var(--r-xl);
  border: 1px solid var(--brand-line);
  background:
    radial-gradient(100% 140% at 50% 0%, var(--brand-soft) 0%, transparent 60%),
    var(--surface);
  box-shadow: var(--sh-2), var(--ring);
}

.faixa-acesso h2 {
  margin-bottom: 14px;
}

.faixa-acesso p {
  max-width: 56ch;
  margin: 0 auto 28px;
}

.faixa-acesso .acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  justify-content: center;
}

/* Aviso de obra — a fase do projeto é informação, não constrangimento. */
.aviso-obra {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 19px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  font-size: 0.92rem;
  color: var(--txt-2);
}

.aviso-obra svg {
  width: 20px;
  height: 20px;
  color: var(--warn);
  flex: none;
  margin-top: 2px;
}

.aviso-obra b {
  color: var(--txt);
}

/* 17 — ANIMAÇÃO DE ENTRADA ================================================= */
/* O elemento nasce deslocado; o IntersectionObserver põe .visivel quando ele
   entra na tela. Sem JS, o `no-js` do <html> mantém tudo visível. */
.revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.revelar.visivel {
  opacity: 1;
  transform: none;
}

.no-js .revelar {
  opacity: 1;
  transform: none;
}

.text-muted-logos {
  color: var(--txt-3) !important;
  font-size: 0.5em;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.text-muted-logos i::before {
  color: var(--txt-3) !important;
}

/* Quem pediu menos movimento recebe menos movimento: sem transição, sem canvas,
   sem pulsos. Não é opcional — é requisito de acessibilidade (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .revelar {
    opacity: 1;
    transform: none;
  }
}

/* 18 — RESPONSIVO ========================================================== */
@media (max-width: 1000px) {
  .hero-grade {
    grid-template-columns: 1fr;
  }

  .produto-destaque {
    grid-template-columns: 1fr;
  }

  .contato-grade {
    grid-template-columns: 1fr;
  }

  .rodape-grade {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 780px) {
  body {
    font-size: 16px;
  }

  .menu {
    display: none;
  }

  /* Os dois CTAs saem do topo no celular: nao cabem ao lado do logotipo, e a
     gaveta ja tem os dois. Sobram o tema e o botao do menu. */
  .topo-acoes .btn {
    display: none;
  }

  .abrir-menu {
    display: grid;
  }

  .marca {
    margin-right: auto;
  }

  .passo {
    grid-template-columns: 46px 1fr;
    gap: 16px;
  }

  .passo-num {
    width: 46px;
    height: 46px;
    font-size: 1rem;
  }

  .passo::before {
    left: 22px;
    top: 44px;
  }

  .passo h3 {
    padding-top: 8px;
  }

  .hero-flutuante {
    grid-template-columns: 1fr;
  }

  .produto-titulo {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 520px) {
  .rodape-grade {
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
  }

  .hero-acoes,
  .produto-destaque .acoes,
  .faixa-acesso .acoes {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Impressão: some tudo que é decoração e o texto fica preto no branco. */
@media print {

  .topo,
  .gaveta,
  #fundo-canvas,
  .halo,
  .hero-malha,
  .pular {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}