/* ══════════════════════════════════════════════════════════════════════════
   PALETA DO SITE
   Carrega por último de propósito: é ela que decide a cor de tudo. Os tokens
   ficam no `body`, e não no `:root`, porque propriedade herdada resolve pelo
   ancestral mais próximo — declarada no body, esta folha vence a de
   identidade.css sem depender de ordem nem de peso de seletor. Os seletores
   de teste alcançam o mesmo `body` pelo mesmo motivo.

   Qualquer página aceita ?paleta=<nome> no endereço e troca ao vivo, o que
   serve para comparar lado a lado:

     (sem nada)        a padrão — dois escuros frios sobre preto
     ?paleta=grafite   a mesma escada em cinza puro, sem matiz nenhum
     ?paleta=marinho   o azul da logo puxado para cima, em vez de dessaturado
     ?paleta=pale      a alternativa azul e roxo, com acento vivo
     ?paleta=marca     as cores antigas do site, para comparação
   ══════════════════════════════════════════════════════════════════════════ */

/* ── padrão: dois escuros frios, um preto neutro, cinza claro e branco ──
   #121b24  #2d273d  #111111  #dadada  #ffffff

   (Os valores acima foram lidos da imagem a olho; se tiver os hex exatos, é
   só trocar aqui — todo o resto sai destes cinco.)

   O oposto da pale: não tem cor de acento nenhuma. É tonal, e isso muda o
   desenho, não só as cores. Sem um tom vivo para destacar, quem separa uma
   coisa da outra passa a ser o contraste entre claro e escuro — botão escuro
   sobre branco, texto claro sobre preto, e o azul e o roxo aparecendo como
   fundo, não como grito.

   Combina com o site por um motivo concreto: o marinho da logo já é um azul
   escuro dessaturado, e #121b24 é ele com menos saturação ainda. */

body {
  /* ── as superfícies ──────────────────────────────────────────────────────
     Os fundos escuros do site inteiro saem destes cinco. Foram separados dos
     tokens de acento porque fundo e texto mudam por motivos diferentes: uma
     paleta nova é, quase sempre, só uma escada de escuros nova. Com eles
     declarados aqui, testar outra é escrever cinco linhas — é o que fazem os
     blocos ?paleta= no fim do arquivo. */
  --s0: #111111;   /* o mais fundo: base de todas as seções escuras */
  --s1: #121b24;   /* o escuro frio, primeiro degrau */
  --s2: #2d273d;   /* o escuro roxo, segundo degrau */
  --s3: #2d273d;   /* o mais claro dos escuros: entra como luz, não como fundo */
  --claro: #dadada;

  /* BREVES_PALETTE_EXACT_V1 — tokens globais da referência aprovada. */
  --ink: var(--s0);
  --ink-soft: var(--s1);
  --ink-muted: var(--s2);
  --paper: var(--claro);
  --paper-bright: #ffffff;
  --paper-deep: var(--claro);
  --black: var(--s0);
  --white: #ffffff;
  --grey: var(--claro);
  --grey-dim: var(--s2);

  --blue: var(--s1);
  --blue-bright: var(--s2);
  --violet: var(--s2);
  --violet-soft: var(--s3);
  --magenta: var(--s2);
  --magenta-bright: var(--s3);
  --amber: var(--s2);
  --amber-bright: var(--s1);
  --amber-dark: var(--s2);

  --grad-brand: linear-gradient(100deg, var(--s0), var(--s1) 48%, var(--s2));
  --grad-glow: linear-gradient(100deg, var(--s1), var(--s2) 55%, var(--s3));

  /* ── as tintas ───────────────────────────────────────────────────────────
     Sombra, borda e fundo translúcido do site inteiro eram rgba() com o
     violeta e o azul da marca antiga escritos à mão — 233 valores espalhados
     por cinco folhas. Token nenhum os alcançava, então o roxo continuava
     vazando por baixo de uma paleta que não tem roxo: um halo aqui, uma borda
     ali, sempre translúcido e sempre fora de tom.

     Como rgba() precisa dos canais separados, o token guarda a tripla e não a
     cor. Trocar estas cinco linhas repinta cada sombra e cada borda do site.

     Aqui elas apontam para as superfícies da própria paleta, então o brilho
     de um botão passa a ser o mesmo escuro do fundo — o que numa paleta tonal
     significa profundidade, e não cor. */
  --tinta:   45, 39, 61;    /* era o violeta  #6738ff */
  --tinta-2: 45, 39, 61;    /* era o lilás    #9146ff */
  --tinta-3: 18, 27, 36;    /* era o azul     #065bff */
  --tinta-4: 18, 27, 36;    /* era o ciano    #169bff */
  --tinta-5: 45, 39, 61;    /* era o magenta  #f725c7 */
}

/* Sobre fundo escuro o acento inverte: sem cor viva na paleta, quem destaca
   é o claro. */
.pd-hero,
.pd-section.is-escuro,
.mz-hero,
#contato,
.calculator {
  --violet: #dadada;
  --violet-soft: #dadada;
  --amber: #dadada;
  --amber-bright: #fff;
  --amber-dark: #dadada;
  --magenta-bright: #dadada;
}

/* ── o fundo do hero da home ─────────────────────────────────────────────
   Era um preto quase chapado com um clarão no canto. Agora é uma descida: o
   topo abre no escuro frio, o roxo entra como luz nos dois lados e o fundo
   fecha no preto — que é justamente onde a costura de matriz.css puxa para o
   branco dos produtos. O degradê e a emenda passam a ser o mesmo movimento,
   em vez de um corte no meio.

   O `background-color` fica depois do atalho de propósito: `background`
   zera a cor de fundo, e é ela a rede de segurança se algum navegador
   descartar a lista (o color-mix, por exemplo). */
.mz-hero.is-limpo {
  /* A cor dos feixes (assets/js/feixes.js) mora aqui, e nao no script: e
     paleta, e paleta se troca neste arquivo. Numeros sem unidade — o JS monta
     o hsla(). --feixe-h e a matiz inicial, --feixe-h-faixa o quanto o leque
     abre a partir dela, --feixe-forca um multiplicador geral de opacidade.

     214 → 266 e exatamente a escada da paleta: o azul frio de --s1 (216) de
     um lado, o roxo de --s2/--s3 (258) do outro. */
  --feixe-h: 214;
  --feixe-h-faixa: 52;
  --feixe-s: 38;
  --feixe-l: 70;

  /* Poucos e fortes, não muitos e fracos. Com 30 feixes — o número do
     componente de origem, pensado para uma tela em pé — eles se sobrepõem por
     toda a largura do hero e o `screen` soma tudo: o resultado é neblina
     clara, e o escuro da paleta se perde. Com 12 dá para ver cada faixa
     atravessar, e o fundo continua fundo.

     --feixe-forca: 0 desliga o efeito sem tirar o script do ar. */
  --feixe-n: 12;
  --feixe-forca: 1.5;

  background:
    /* A trama diagonal saiu: quem quebra o chapado agora sao os feixes, que
       se movem. Duas texturas paradas por baixo de uma em movimento viravam
       ruido — e a trama aparecia como listra, que era o oposto do pedido. */

    /* Uma luz so, larga e macia, no meio-alto. Antes eram dois radiais
       competindo em cantos opostos, e o encontro deles deixava mancha; um
       clarao unico e amplo da profundidade sem virar borrao. */
    radial-gradient(1500px 1000px at 58% 14%, rgba(var(--tinta-2), .3), transparent 74%),

    /* O sweep: uma diagonal contínua que atravessa a escada inteira, do azul
       frio ao roxo e do roxo ao preto. Com os degraus intermediarios em
       color-mix, a passagem de uma cor para a outra nao tem emenda — e e isso
       que faz o fundo ler como um campo so, e nao como faixas empilhadas.

       Termina no preto porque e ali que a costura de matriz.css puxa para o
       branco dos produtos. */
    linear-gradient(152deg,
      var(--s1) 0%,
      color-mix(in srgb, var(--s1) 58%, var(--s2)) 20%,
      var(--s2) 42%,
      color-mix(in srgb, var(--s2) 62%, var(--s0)) 66%,
      color-mix(in srgb, var(--s2) 22%, var(--s0)) 86%,
      var(--s0) 100%);
  background-color: var(--s0);
}
/* ── o fecho do hero ──────────────────────────────────────────────────────
   O matriz.css usa esta faixa para dissolver o hero no branco dos produtos, e
   era ela o borrão claro subindo pelo canto de baixo: 195px de branco por cima
   de um fundo que é escuro e diagonal, o que deixava o pé do hero mais claro
   de um lado que do outro.

   Aqui ela deixa de puxar para o branco e passa a assentar no próprio preto da
   paleta. Duas coisas saem de graça: o pé do hero fica de uma cor só, apesar
   de o degradê ser diagonal e chegar embaixo em tons diferentes de cada lado;
   e os feixes, que passam por baixo desta camada, somem antes da borda em vez
   de serem cortados no meio.

   O encontro com a seção branca vira uma linha limpa — que é o que ela já é em
   toda seção escura do site.

   E ela precisa do `opacity: 1`. O identidade.css deixa esta faixa a meia
   opacidade (`.mz-hero::after { opacity: .5 }`), o que era metade do problema:
   um branco a 50% sobre um fundo escuro e diagonal não vira degradê, vira
   mancha cinza — mais clara de um lado que do outro, porque o que aparece por
   baixo muda ao longo da largura. Opaca, a faixa fecha na cor que se pede. */
.mz-hero.is-limpo::after {
  background: linear-gradient(to bottom, transparent, var(--s0) 82%);
  opacity: 1;
}

/* A camada dos feixes. O canvas é criado pelo JS e entra como primeiro filho
   do hero; sem script ele não existe e sobra o degradê, que já se sustenta.

   `screen` faz os feixes só clarearem o que está embaixo: eles somam luz ao
   degradê em vez de tapá-lo, que é o que separa "luz passando" de "mancha por
   cima".

   O `blur` daqui é o efeito inteiro, não um acabamento. A versão de origem
   borrava dentro do canvas, com `ctx.filter`, que roda na CPU e é reaplicado a
   cada retângulo desenhado; aqui ele sai uma vez por quadro, na composição,
   que é o caminho que a GPU acelera — e o canvas volta a desenhar só retângulo
   com degradê.

   Ressalva honesta sobre a medição: o navegador com que testei roda sem GPU,
   compondo por software, e ali os dois caminhos custaram parecido. O que dá
   para afirmar do que foi medido é o custo de main thread, que independe de
   GPU: os feixes gastam cerca de 1,5 ms de script por segundo de relógio, e
   não mexem
   em layout nem em recálculo de estilo. O resto é rasterização, e é
   exatamente a parte que placa de vídeo faz.

   z-index 0 basta: .mz-hero-inner já é relative/z-index 2. */
.mz-hero.is-limpo .mz-feixes {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(30px);
}

/* ── a seção de produtos ──────────────────────────────────────────────────
   O lado claro do site ainda falava a cor antiga: --ink era o marinho #02182c,
   o fio dos cartões era #d9e2f0 (azulado) e toda sombra saía de rgba(2,24,44).
   Ao lado de uma paleta que virou ardósia e roxo, isso lê como duas paletas na
   mesma página — e a faixa escura no pé da seção era pior ainda, com o
   #0a3a7d cravado à mão.

   Em vez de trocar --ink no site inteiro (são 25 lugares, e cada um é uma
   chance de quebrar contraste em página que eu não estou olhando), os tokens
   são redeclarados aqui, na própria seção. Propriedade personalizada é
   herdada: declarada em .mz-products, ela alcança cartão, título, texto,
   sombra e fio de uma vez, e para na borda da seção.

   Os neutros abaixo são os mesmos da paleta puxados para o claro — mantêm o
   toque de violeta de --s2/--s3 em vez do azul do marinho. */
.mz-products {
  --ink: #111111;         /* era #02182c, o marinho */
  --ink-muted: #2d273d;   /* era #55657a, cinza-azul */
  --hairline: #e4e2ea;    /* era #d9e2f0, fio azulado */
  --paper: #dadada;
  --sombra-card: 0 1px 2px rgba(19, 19, 19, .04), 0 8px 24px rgba(var(--tinta), .07);
  --sombra-alta: 0 2px 6px rgba(19, 19, 19, .06), 0 18px 44px rgba(var(--tinta), .14);

  /* A seção era branca e os cartões também: sem diferença de superfície, o
     cartão só existia pelo fio de 1px. Agora o fundo recua um degrau e o
     cartão continua branco — é a diferença entre os dois que desenha o
     cartão, não a borda. */
  background:
    radial-gradient(900px 520px at 88% 12%, rgba(var(--tinta), .07), transparent 62%),
    var(--paper);
}

/* O rótulo de cada cartão vinha em --blue, quase preto, brigando com o título
   logo abaixo. --s3 é o degrau que a paleta reserva para luz: sobre branco ele
   vira um violeta acinzentado que se lê bem e não disputa. */
.mz-products-list li small { color: var(--s3); }

/* A faixa "a gente cria": o marinho cravado sai e entra a mesma varredura
   diagonal do hero, com as mesmas três superfícies. É o que costura o pé desta
   seção com o topo da página. */
.mz-products-custom {
  border-color: rgba(var(--tinta), .3);
  background:
    radial-gradient(680px 320px at 86% 18%, rgba(var(--tinta-2), .45), transparent 62%),
    linear-gradient(120deg, var(--s1), var(--s2) 58%, var(--s0));
  background-color: var(--s0);
}

/* Sobre a faixa escura o acento inverte, como em toda seção escura do site.
   Sem isto o rótulo "SOB MEDIDA" fica em --s3 (#2d273d) sobre um fundo quase
   preto — ilegível. */
.mz-products-custom {
  --magenta-bright: var(--claro);
  --violet: var(--claro);
}

/* O ponto do rótulo é um span pintado com --grad-brand, que nesta paleta é
   escuro: sobre o hero ele sumia e sobrava só o roxo antigo vazando por
   baixo. Sobre escuro ele inverte, como todo o resto. */
.mz-hero.is-limpo .hero-kicker { color: var(--claro); }
.mz-hero.is-limpo .hero-kicker span { background: var(--claro); }
/* Sem acento, o que destaca a palavra é o peso e o branco puro contra o
   cinza do resto da frase.

   Precisa trocar color E -webkit-text-fill-color: a regra do hero limpo fixa
   o segundo, e ele manda no primeiro na hora de pintar a letra. */
.mz-hero.is-limpo h1 { color: #aeb6c1; }
.mz-hero.is-limpo h1 em {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.mz-hero.is-limpo .mz-hero-lead { color: rgba(255, 255, 255, .7); }

/* O cartão do formulário no hero: com o fundo agora degradê, a moldura de
   antes se dissolvia na parte clara do topo. Um pouco mais de contorno e um
   fundo próprio devolvem a borda do cartão sem clarear a seção. */
.mz-hero.is-limpo .mz-fale {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(10, 10, 14, .34);
  backdrop-filter: blur(2px);
}

.pd-hero {
  background:
    radial-gradient(1180px 720px at 84% 6%, color-mix(in srgb, var(--s2) 90%, transparent), transparent 66%),
    radial-gradient(920px 640px at 6% 92%, color-mix(in srgb, var(--s1) 95%, transparent), transparent 64%),
    linear-gradient(152deg, var(--s0) 0%, var(--s1) 55%, var(--s2) 100%);
  background-color: var(--s0);
}
.pd-section.is-escuro {
  background:
    radial-gradient(900px 520px at 14% 12%, color-mix(in srgb, var(--s2) 80%, transparent), transparent 64%),
    linear-gradient(162deg, var(--s0) 0%, var(--s1) 60%, var(--s2) 100%);
  background-color: var(--s0);
}

.pd-hero h1 em,
.pd-section.is-escuro .pd-flow-head h2 em {
  background: linear-gradient(100deg, #dadada, #fff 60%, #dadada);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.pd-section.is-escuro .section-label,
.pd-crumbs b { color: #dadada; }

.pd-linha-trilho i { background: linear-gradient(180deg, #121b24, #2d273d 60%, #2d273d); }
.pd-passo-n { color: rgba(45, 39, 61, .12); }
.pd-passo.is-on::before { box-shadow: 0 0 0 5px rgba(45, 39, 61, .16); }

/* No painel, a escala vem só da opacidade de um tom — que é o que uma paleta
   sem acento permite fazer, e continua legível. */
.pd-pn-kpi { border-left-color: #121b24; }
.pd-pn-kpi:nth-child(2) { border-left-color: #2d273d; }
.pd-pn-kpi:nth-child(3) { border-left-color: #2d273d; }
.pd-pn-meta u::before { background: #121b24; }
.pd-pn-barras u { background: #2d273d; }
.pd-pn-barras li:nth-child(2) u { background: #2d273d; }
.pd-pn-barras li:nth-child(3) u { background: #524c68; }
.pd-pn-barras li:nth-child(4) u { background: #6b657f; }
.pd-pn-barras li:nth-child(5) u { background: #8b8799; }
.pd-pn-barras li:nth-child(6) u { background: #adaab6; }
.pd-pn-serie i { background: #c9c7d0; }
.pd-pn-serie i:last-child { background: #2d273d; }
.pd-pn-tag { background: rgba(45, 39, 61, .1); color: #2d273d; }

/* O cinza da paleta nas seções claras alternadas. */
.pd-section.is-alt,
.faq { background: var(--claro); }

/* ── a costura das dúvidas com os relacionados ────────────────────────────
   Nas páginas de produto, .pd-section.is-alt e .faq caíam com exatamente o
   mesmo cinza, uma embaixo da outra: viravam um bloco só de 1.360px, sem
   nada dizendo onde uma acabava. Logo abaixo, os relacionados entravam em
   branco puro, de corte seco.

   O degradê resolve os dois de uma vez. As dúvidas começam no cinza que vem
   de cima, então a fronteira com a seção anterior deixa de ser um corte, e
   terminam no branco em que os relacionados começam, então a passagem para
   eles é contínua.

   O seletor de irmão adjacente escopa isto sozinho: só existe onde o cinza
   duplicado existe. Na home o FAQ fica entre dois quase-brancos e continua
   sendo uma faixa cinza de propósito. */
.pd-section.is-alt + .faq {
  background: linear-gradient(to bottom,
    var(--claro) 0%,
    var(--claro) 38%,
    var(--paper-bright) 94%);
}
.pd-cartao { background: #dadada; }

/* ── o botao primario sobre fundo escuro ─────────────────────────────────
   O gradiente da marca era claro o bastante para aparecer sobre marinho. O
   desta paleta e escuro — sobre preto, o botao vira um retangulo invisivel.
   Numa paleta sem cor viva, quem destaca e o claro: sobre escuro o botao
   inverte, e o texto vai junto.

   Vale para todas as superficies escuras do site, e nao so para o hero: a
   chamada de fechamento e a secao de contato tem o mesmo problema. */
.pd-hero .button-primary,
.pd-section.is-escuro .button-primary,
.pd-final-card .button-primary,
#contato .button-primary,
.calculator .button-primary {
  background: linear-gradient(100deg, #fff, #dadada);
  color: #111111;
  box-shadow: 0 10px 40px rgba(217, 217, 217, .16);
}
.pd-hero .button-primary:hover,
.pd-section.is-escuro .button-primary:hover,
.pd-final-card .button-primary:hover,
#contato .button-primary:hover,
.calculator .button-primary:hover {
  background: linear-gradient(100deg, #fff, #efefef);
  box-shadow: 0 14px 52px rgba(255, 255, 255, .24);
}
.pd-hero .button-primary span,
.pd-section.is-escuro .button-primary span,
.pd-final-card .button-primary span,
#contato .button-primary span,
.calculator .button-primary span { color: #111111; }

/* ── os fundos com hex escrito à mão ─────────────────────────────────────
   Trocar token não alcança gradiente com a cor digitada dentro. Estes três
   são os que aparecem: o card de fechamento das páginas de produto, a faixa
   de contato e o brilho do botão do menu. O resto do violeta que sobrou no
   identidade.css está em sombra, borda e halo de baixa opacidade — some no
   escuro e quase não se vê no claro. O conserto de verdade seria tokenizar
   aquilo, e é um trabalho à parte. */
.pd-final-card {
  background:
    radial-gradient(700px 420px at 82% 10%, color-mix(in srgb, var(--s3) 70%, transparent), transparent 64%),
    linear-gradient(122deg, var(--s0), var(--s1) 52%, var(--s2));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

#contato, .calculator {
  background:
    linear-gradient(to bottom,
      rgba(247, 249, 252, 1) 0,
      color-mix(in srgb, var(--claro) 96%, transparent) calc(var(--costura) * .28),
      color-mix(in srgb, var(--s3) 72%, transparent) calc(var(--costura) * .56),
      color-mix(in srgb, var(--s2) 40%, transparent) calc(var(--costura) * .8),
      transparent var(--costura)),
    radial-gradient(900px 520px at 84% 30%, color-mix(in srgb, var(--s2) 80%, transparent), transparent 62%),
    linear-gradient(168deg, var(--s0) 0%, var(--s1) 60%, var(--s2) 100%);
  background-color: var(--s0);
}

.nav-cta { box-shadow: 0 6px 18px rgba(19, 19, 19, .3); }
.nav-cta:hover { box-shadow: 0 10px 26px rgba(19, 19, 19, .42); }

/* ── o chat ──────────────────────────────────────────────────────────────
   O widget vinha do marinho da identidade — a única superfície escura do
   site que não tinha entrado na paleta. Ele expõe onze variáveis próprias
   (chat.css), e é aqui que elas se ligam às superfícies: assim o painel
   acompanha qualquer ?paleta= junto com o resto, sem regra duplicada. */
.bv-chat,
.bv-chat-launcher,
.bv-invite {
  --bv-surface: var(--s0);
  --bv-surface-2: var(--s1);
  --bv-realce: var(--claro);
  --bv-realce-grad: linear-gradient(100deg, #fff, var(--claro));
  --bv-realce-ink: var(--s0);
}

/* ── pale: azul e roxo dessaturados, cinza quase branco e dois pretos ─────
   #6fa8dc  #8e7cc3  #eeeeee  #252525  #000000

   A paleta tem cinco cores e nenhuma delas serve de texto sobre fundo claro:
   #6fa8dc dá 2.3:1 e #8e7cc3 dá 3.0:1 sobre branco, e o site usa o acento em
   rótulo de 9px em caixa alta. Numa paleta de UI as duas claras são
   preenchimento — botão, barra, gráfico — e o texto fica no #252525.

   Como o site usa o acento nas duas funções, derivei um tom escuro de cada
   uma, mantendo o matiz: é a única forma de aplicar a paleta sem rebaixar a
   legibilidade. Os tons derivados estão marcados abaixo. */

html[data-paleta="pale"] body {
  /* as superfícies: a paleta pede preto onde o site tinha marinho */
  --s0: #000;
  --s1: #131320;
  --s2: #252535;
  --s3: #8e7cc3;
  --claro: #eee;

  /* as duas da paleta, para preenchimento */
  --blue: #6fa8dc;
  --blue-bright: #8fbde6;
  --violet-soft: #8e7cc3;
  --magenta-bright: #a493d1;

  /* derivados: mesmo matiz, escurecidos para servirem de texto sobre claro */
  --violet: #55458a;   /* de #8e7cc3 */
  --magenta: #55458a;
  --amber: #55458a;
  --amber-bright: #6fa8dc;
  --amber-dark: #55458a;

  --grad-brand: linear-gradient(100deg, #4a86bd, #6fa8dc 46%, #8e7cc3);
  --grad-glow: linear-gradient(100deg, #6fa8dc, #8e7cc3 55%, #a493d1);

  --tinta:   142, 124, 195;  /* #8e7cc3 */
  --tinta-2: 164, 147, 209;  /* #a493d1 */
  --tinta-3: 111, 168, 220;  /* #6fa8dc */
  --tinta-4: 143, 189, 230;  /* #8fbde6 */
  --tinta-5: 142, 124, 195;
}

/* Sobre fundo escuro o acento volta a ser o da paleta: lá as duas claras
   funcionam como texto, e é onde elas ficam bonitas. */
html[data-paleta="pale"] .pd-hero,
html[data-paleta="pale"] .pd-section.is-escuro,
html[data-paleta="pale"] .mz-hero,
html[data-paleta="pale"] #contato,
html[data-paleta="pale"] .calculator {
  --violet: #a9c6e6;
  --amber: #a9c6e6;
  --amber-bright: #a9c6e6;
  --amber-dark: #a9c6e6;
}

/* Os fundos escuros do site são marinho; a paleta pede preto. */
html[data-paleta="pale"] .mz-hero.is-limpo {
  background:
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(255, 255, 255, .016) 26px 27px),
    radial-gradient(1000px 700px at 18% 12%, rgba(142, 124, 195, .16), transparent 68%),
    #000;
  background-color: #000;
}
html[data-paleta="pale"] .mz-hero.is-limpo .hero-kicker { color: #8fbde6; }
html[data-paleta="pale"] .mz-hero.is-limpo h1 em {
  color: #8fbde6;
  -webkit-text-fill-color: #8fbde6;
}

html[data-paleta="pale"] .pd-hero {
  background:
    radial-gradient(1180px 720px at 84% 6%, rgba(142, 124, 195, .3), transparent 64%),
    radial-gradient(920px 640px at 6% 92%, rgba(111, 168, 220, .2), transparent 62%),
    linear-gradient(152deg, #000 0%, #131320 45%, #252535 100%);
  background-color: #000;
}
html[data-paleta="pale"] .pd-section.is-escuro {
  background:
    radial-gradient(900px 520px at 14% 12%, rgba(142, 124, 195, .22), transparent 62%),
    radial-gradient(780px 500px at 88% 88%, rgba(111, 168, 220, .16), transparent 60%),
    linear-gradient(162deg, #000 0%, #1a1a26 55%, #252525 100%);
  background-color: #000;
}

/* O <em> do título sobre fundo escuro precisa das duas claras, não do
   derivado escuro. */
html[data-paleta="pale"] .pd-hero h1 em,
html[data-paleta="pale"] .pd-section.is-escuro .pd-flow-head h2 em {
  background: linear-gradient(100deg, #6fa8dc, #a493d1 60%, #cfe0ef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[data-paleta="pale"] .pd-section.is-escuro .section-label,
html[data-paleta="pale"] .pd-crumbs b { color: #a9c6e6; }

/* O trilho da linha do tempo e as barras do painel. */
html[data-paleta="pale"] .pd-linha-trilho i { background: linear-gradient(180deg, #4a86bd, #6fa8dc 60%, #8e7cc3); }
html[data-paleta="pale"] .pd-passo-n { color: rgba(85, 69, 138, .12); }
html[data-paleta="pale"] .pd-passo.is-on::before { box-shadow: 0 0 0 5px rgba(85, 69, 138, .16); }

html[data-paleta="pale"] .pd-pn-kpi { border-left-color: #4a86bd; }
html[data-paleta="pale"] .pd-pn-kpi:nth-child(2) { border-left-color: #6fa8dc; }
html[data-paleta="pale"] .pd-pn-kpi:nth-child(3) { border-left-color: #8e7cc3; }
html[data-paleta="pale"] .pd-pn-meta u::before { background: #4a86bd; }
html[data-paleta="pale"] .pd-pn-barras u { background: #6fa8dc; }
html[data-paleta="pale"] .pd-pn-barras li:nth-child(2) u { background: #7bb0e0; }
html[data-paleta="pale"] .pd-pn-barras li:nth-child(3) u { background: #88b8e4; }
html[data-paleta="pale"] .pd-pn-barras li:nth-child(4) u { background: #9ac2e9; }
html[data-paleta="pale"] .pd-pn-barras li:nth-child(5) u { background: #accbed; }
html[data-paleta="pale"] .pd-pn-barras li:nth-child(6) u { background: #c0d8f1; }
html[data-paleta="pale"] .pd-pn-serie i { background: #c8dcf0; }
html[data-paleta="pale"] .pd-pn-serie i:last-child { background: #4a86bd; }
html[data-paleta="pale"] .pd-pn-tag { background: rgba(85, 69, 138, .1); color: #55458a; }

/* O cinza da paleta no lugar do papel do site, nas seções claras. */
html[data-paleta="pale"] .pd-section.is-alt,
html[data-paleta="pale"] .faq { background: #eee; }
html[data-paleta="pale"] .pd-cartao { background: #eee; }

/* ── restos de violeta que não passam por token ─────────────────────────────
   O brilho do botão é uma sombra com rgba escrito à mão, então nenhuma troca
   de token o alcança. Sem esta regra, o botão fica preto com um halo roxo. */
html[data-paleta="pale"] .button-primary { box-shadow: 0 8px 22px rgba(74, 134, 189, .3); }
html[data-paleta="pale"] .button-primary:hover { box-shadow: 0 12px 30px rgba(74, 134, 189, .4); }
html[data-paleta="pale"] .mz-hero.is-limpo .button-primary { box-shadow: 0 10px 40px rgba(111, 168, 220, .34); }
html[data-paleta="pale"] .mz-hero.is-limpo .button-primary:hover { box-shadow: 0 14px 52px rgba(111, 168, 220, .46); }

.button-primary { box-shadow: 0 8px 22px rgba(19, 19, 19, .35); }
.button-primary:hover { box-shadow: 0 12px 30px rgba(19, 19, 19, .48); }
.mz-hero.is-limpo .button-primary { box-shadow: 0 10px 40px rgba(45, 39, 61, .8); }
.mz-hero.is-limpo .button-primary:hover { box-shadow: 0 14px 52px rgba(45, 39, 61, .95); }

/* ══════════════════════════════════════════════════════════════════════════
   OUTRAS ESCADAS DE ESCURO PARA COMPARAR
   As duas abaixo são variações da mesma ideia da paleta padrão — tonal, sem
   cor de acento — e por isso não precisam de mais nada: todas as regras de
   fundo, botão e título já leem as superfícies. Trocar os cinco valores
   troca o site inteiro.

   ?paleta=grafite  ?paleta=marinho
   ══════════════════════════════════════════════════════════════════════════ */

/* ── grafite: o mesmo desenho sem nenhum matiz ───────────────────────────
   #0e0e0e  #1b1b1b  #2a2a2a  #3d3d3d  #e2e2e2
   Serve para responder uma pergunta concreta: o azul e o roxo da padrão
   estão fazendo trabalho, ou o site funcionaria em cinza puro? Se as duas
   ficarem iguais na tela, o matiz da padrão está baixo demais para valer. */
html[data-paleta="grafite"] body {
  --s0: #0e0e0e;
  --s1: #1b1b1b;
  --s2: #2a2a2a;
  --s3: #3d3d3d;
  --claro: #e2e2e2;

  --tinta: 42, 42, 42;   --tinta-2: 61, 61, 61;   --tinta-3: 27, 27, 27;
  --tinta-4: 42, 42, 42; --tinta-5: 61, 61, 61;
}

/* ── marinho: o azul da logo puxado para cima ────────────────────────────
   #0a1120  #101c31  #1d2d4a  #2f4467  #d5dee9
   O contrário da grafite. A padrão dessatura o marinho da marca até quase
   sumir; esta o mantém visível, e o site fica azul-escuro em vez de preto.
   É a que mais se parece com a identidade antiga sem voltar ao violeta. */
html[data-paleta="marinho"] body {
  --s0: #0a1120;
  --s1: #101c31;
  --s2: #1d2d4a;
  --s3: #2f4467;
  --claro: #d5dee9;

  --tinta: 29, 45, 74;   --tinta-2: 47, 68, 103;  --tinta-3: 16, 28, 49;
  --tinta-4: 29, 45, 74; --tinta-5: 47, 68, 103;
}

/* ── marca: as cores originais do site, para comparação ────────────────── */
html[data-paleta="marca"] body {
  --blue: #065bff;
  --blue-bright: #169bff;
  --violet: #6738ff;
  --violet-soft: #9146ff;
  --magenta: #f725c7;
  --magenta-bright: #ff4fd8;
  --amber: #6738ff;
  --amber-bright: #9146ff;
  --amber-dark: #6738ff;
  --grad-brand: linear-gradient(100deg, #065bff, #6738ff 52%, #f725c7);
  --grad-glow: linear-gradient(100deg, #169bff, #9146ff 52%, #ff4fd8);

  /* As tintas originais, para a comparação continuar sendo comparação. */
  --tinta:   103, 56, 255;
  --tinta-2: 145, 70, 255;
  --tinta-3: 6, 91, 255;
  --tinta-4: 22, 155, 255;
  --tinta-5: 247, 37, 199;
}


/* BREVES_VISUAL_BALANCE_V3
   Branco sustenta a leitura; marinho organiza; roxo cria contraste; cinza
   separa superfícies. A paleta continua limitada à referência aprovada. */
body {
  --ink: #121b24;
  --ink-soft: #2d273d;
  --ink-muted: #2d273d;
  --paper: #ffffff;
  --paper-bright: #ffffff;
  --paper-deep: #dadada;
  --black: #111111;
  --white: #ffffff;
  --grey: #dadada;
  --grey-dim: #2d273d;
  --blue: #121b24;
  --blue-bright: #2d273d;
  --violet: #2d273d;
  --violet-soft: #121b24;
  --magenta: #2d273d;
  --magenta-bright: #2d273d;
  --amber: #2d273d;
  --amber-bright: #121b24;
  --amber-dark: #2d273d;
  --hairline: #dadada;
  --grad-brand: linear-gradient(100deg, #121b24, #2d273d);
  --grad-glow: linear-gradient(100deg, #2d273d, #121b24);
  --sombra-card: 0 10px 28px rgba(18, 27, 36, .06);
  --sombra-alta: 0 18px 48px rgba(18, 27, 36, .1);
  background: #ffffff;
  color: #121b24;
}

.site-header {
  width: 100%;
  border-bottom-color: #dadada;
  background: rgba(255, 255, 255, .98);
}

.site-header .nav-shell {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
  border-color: #dadada;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 8px 24px rgba(18, 27, 36, .05);
}

.site-header #main-nav {
  margin-left: auto;
  align-items: center;
}

.site-header nav a { color: #2d273d; }

.site-header nav a:hover,
.site-header nav a.active { color: #121b24; }

.site-header nav a::after { background: #2d273d; }

.site-header .nav-drop-menu {
  border-color: #dadada;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(18, 27, 36, .1);
}

.site-header .nav-drop-menu a:hover,
.site-header .nav-drop-menu a.is-here {
  background: rgba(218, 218, 218, .34);
  color: #121b24;
}

@media (min-width: 901px) {
  .site-header .nav-drop-menu {
    left: 0;
    right: auto;
    width: 280px;
    min-width: 280px;
    transform: translateY(-6px);
  }

  .site-header .nav-drop:hover .nav-drop-menu,
  .site-header .nav-drop:focus-within .nav-drop-menu {
    transform: translateY(0);
  }
}

.nav-cta,
.button-primary {
  background: #121b24;
  color: #ffffff;
  box-shadow: none;
}

.nav-cta:hover,
.button-primary:hover {
  background: #2d273d;
  color: #ffffff;
  box-shadow: none;
}

.pd-hero {
  background:
    radial-gradient(900px 620px at 88% 8%, rgba(45, 39, 61, .72), transparent 64%),
    linear-gradient(145deg, #121b24 0%, #2d273d 72%, #111111 100%);
  background-color: #121b24;
}

.pd-section,
.pd-flow,
.faq { background: #ffffff; }

.pd-section.is-alt { background: rgba(218, 218, 218, .24); }

.pd-section.is-alt + .faq { background: #ffffff; }

.pd-cartao,
.pd-arte {
  border-color: #dadada;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(18, 27, 36, .05);
}

.faq-grid { align-items: start; }

.faq details {
  border-color: #dadada;
  background: #ffffff;
  box-shadow: none;
}

.faq summary {
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 18px;
}

.faq summary > span,
.mz-audience-number,
.mz-metodo-lista li > small,
.pd-passo-n { display: none !important; }

.faq details > p {
  padding-right: 74px;
  padding-left: 22px;
}

@media (max-width: 900px) {
  .site-header .nav-shell { width: calc(100% - 32px); }
  .site-header #main-nav { margin-left: 0; }
  .site-header .nav-drop-menu { width: auto; min-width: 0; }
}

@media (max-width: 620px) {
  .site-header .nav-shell { width: calc(100% - 24px); }

  .faq summary {
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 12px;
  }

  .faq details > p {
    padding-right: 22px;
    padding-left: 18px;
  }
}