/* =============================================================================
   Viplink Brasil — Design System v2 — camada MARCA (cor, forma, espaco, motor)

   Vem DEPOIS de site.css e de tipografia.css, nesta ordem:
       site.css        estrutura e layout herdados do v1
       tipografia.css  familia, escala, peso, entrelinha        (v2)
       marca.css       cor, forma, espaco, movimento, ajustes   (v2)  <- este

   Por que nao substituir o site.css de uma vez: ele carrega a estrutura de
   TODAS as paginas publicas (blog, artigo, paginas soltas, obrigado), e reescrever
   tudo isso para publicar a home seria trocar o predio para pintar a fachada. O
   site.css e movido a token, entao REDEFINIR o token recolore o site inteiro —
   secao 2. O laranja nao sobrevive em lugar nenhum.

   Regra de ouro do v2: o acento quase nunca pinta area. Ele existe em traco, em
   texto e em estado, e o botao primario continua sendo TINTA, nunca acento.
   A unica excecao, decidida pelo dono em 18/09: `.secao-acento`, um bloco de
   superficie cheia por pagina, so onde o destaque justifica ou o bloco e
   pequeno. Duas dessas numa pagina ja e uma a mais.

   O que nao existe neste sistema e nao deve ser acrescentado: gradiente,
   backdrop-filter fora de barra fixa, sombra colorida, brilho, scale() no hover,
   raio diferente de --r e --r-full.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. TOKENS v2

   Contraste medido em WCAG 2.1 contra --cal-1, que e o fundo da pagina.
   A tipografia NAO entra aqui: quem manda em familia, escala e peso e o
   tipografia.css. Duas fontes de verdade para tipo e como ter dois relogios.
   -------------------------------------------------------------------------- */
:root {
  /* ---- cal: o neutro quente ---- */
  --cal-0: #FBFAF8;   /* superficie elevada: cartao, painel, cabecalho fixo */
  --cal-1: #F4F2ED;   /* fundo da pagina. E o default */
  --cal-2: #E9E6DF;   /* fundo rebaixado: bloco alternado */
  --cal-3: #D6D2C8;   /* linha divisoria, borda em repouso        1.35:1 */
  --cal-4: #8A8474;   /* borda que precisa ser vista, icone       3.33:1 */

  /* ---- tinta: o texto e o unico botao solido ---- */
  --tinta:   #17150F; /* texto principal, titulo, botao primario 16.31:1 */
  --tinta-2: #55514A; /* texto secundario, legenda, label         7.05:1 */
  --tinta-3: #746E62; /* terciario, placeholder  4.52:1 — nunca sobre --cal-2 */

  /* ---- acento: a unica cor cromatica. Paleta MATA desde 18/09/2026 ----
     O verde da bandeira, #009C3B, tem 3,23:1 sobre cal: ilegivel como texto.
     Escurecido ate 7,76:1 ele deixa de ser bandeira de estadio e vira mata.
     O nome do token e o PAPEL, nao a cor, entao a proxima troca de paleta e
     uma edicao destas cinco linhas e nada mais. */
  --acento:        #0A5730; /* link, foco, borda de campo ativo  7.76:1 */
  --acento-forte:  #064E2B; /* hover e active do link            8.80:1 */
  --acento-lavado: #E2EAE4; /* selecao de texto. Nada alem disso */
  --acento-fundo:  #0A3A22; /* superficie cheia. UM bloco por pagina, no maximo */
  --acento-sobre:  #F4F2ED; /* texto principal sobre o bloco    11.44:1 */
  --acento-sobre-2:#AEC6B8; /* secundario sobre o bloco. Tingido, nunca cinza 7.05:1 */

  /* ---- aliases semanticos: use estes nos componentes ---- */
  --line:         var(--cal-3);
  --line-strong:  var(--cal-4);
  --link:         var(--acento);
  --solido:       var(--tinta);   /* fundo do botao primario */
  --sobre-solido: var(--cal-1);

  /* ---- forma: raio zero em tudo ---- */
  --r: 0;
  --r-full: 999px;  /* excecao unica: avatar e pill de status */
  --bd: 1px;

  /* ---- elevacao: linha e superficie, quase nunca sombra ---- */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(23, 21, 15, .05);  /* so menu suspenso, popover, modal */

  /* ---- espaco: modulo de 8, herdado do azulejo ---- */
  --m: 8px;
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 144px;
  --gutter: 24px;      /* margem externa no telefone */
  --gutter-md: 40px;
  --gutter-lg: 64px;

  /* ---- movimento: opacidade e translate, sem overshoot ---- */
  --dur-1: 160ms; --dur-2: 240ms; --dur-3: 320ms;
  --ease: cubic-bezier(.2, 0, .2, 1);
  --shift: 8px;   /* deslocamento maximo de qualquer transicao */

  color-scheme: light dark;
}

/* O escuro inverte o papel dos MESMOS tokens. Nao e uma segunda paleta e nao
   introduz matiz novo. Contraste medido contra --cal-1, que no escuro e #121110. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cal-0: #1A1816;  --cal-1: #121110;  --cal-2: #0C0B0A;
    --cal-3: #2E2B27;  --cal-4: #726D62;
    --tinta: #F2F0EA;  --tinta-2: #A8A399; --tinta-3: #8E887B;
    --acento: #5FC08A; --acento-forte: #7ACFA0; --acento-lavado: #14251C;
  --acento-fundo: #124F31; --acento-sobre: #F4F2ED; --acento-sobre-2: #AEC6B8;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .40);
  }
}
:root[data-theme="dark"] {
  --cal-0: #1A1816;  --cal-1: #121110;  --cal-2: #0C0B0A;
  --cal-3: #2E2B27;  --cal-4: #726D62;
  --tinta: #F2F0EA;  --tinta-2: #A8A399; --tinta-3: #8E887B;
  --acento: #5FC08A; --acento-forte: #7ACFA0; --acento-lavado: #14251C;
  --acento-fundo: #124F31; --acento-sobre: #F4F2ED; --acento-sobre-2: #AEC6B8;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .40);
}

/* -----------------------------------------------------------------------------
   2. A PONTE — os nomes do v1 recebem os valores do v2

   O site.css pinta tudo por token. Redefinir os quinze nomes abaixo recolore o
   site publico inteiro, blog incluido, sem tocar numa linha dele. O laranja, o
   navy e o dourado deixam de existir como valor mesmo continuando a existir como
   nome, e nome ninguem ve.

   Nao apague isto achando que e duplicacao: enquanto houver um seletor do v1 no
   site.css pedindo --vl-orange, e esta secao que responde.
   -------------------------------------------------------------------------- */
:root {
  --vl-orange:     var(--acento);
  --vl-orange-600: var(--acento-forte);
  --vl-orange-300: var(--cal-4);
  --vl-orange-100: var(--acento-lavado);
  --vl-gold:       var(--tinta-2);
  --vl-black:      var(--tinta);
  --vl-navy:       var(--tinta);
  --vl-navy-2:     var(--cal-0);

  --bg:            var(--cal-1);
  --bg-sunken:     var(--cal-2);
  --surface:       var(--cal-0);
  --border:        var(--cal-3);
  --border-strong: var(--cal-4);
  --text:          var(--tinta);
  --text-2:        var(--tinta-2);
  --text-3:        var(--tinta-3);

  --danger: #A32017; --danger-bg: #F6E9E7;
  --ok:     #1C6B45; --ok-bg:     #E6EFE9;

  /* forma: o v1 tinha raio 6/8/12 e sombra laranja. O v2 nao tem raio nem
     sombra colorida. */
  --r-md: 0;
  --r-lg: 0;
  --sh-orange: none;
  --focus: 0 0 0 2px var(--cal-1), 0 0 0 4px var(--acento);

  --largura: 1280px;   /* o v2 pede conteiner de 1280 */
  --estreita: 720px;
}

/* -----------------------------------------------------------------------------
   3. BASE — o que o site.css fixou em valor literal e o v2 nao aceita

   Especificidade de elemento so, para nao competir com as classes.
   -------------------------------------------------------------------------- */
/* A FONTE DO CORPO. O tipografia.css tenta isto em `:where(body)`, e `:where()`
   zera a especificidade, entao `body` do site.css (0,0,1) ganhava sempre e a
   pagina inteira saia em Inter 17px com `antialiased`. Aqui vale porque esta
   folha vem depois com a mesma especificidade. Achado do audit de 19/09/2026:
   ate esta data so titulo e botao usavam a Archivo; todo paragrafo, item de
   lista e link de menu era Inter. */
body {
  background: var(--cal-1); color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: auto;
}
::selection { background: var(--acento-lavado); color: var(--tinta); }

/* O tipografia.css entrega os degraus como CLASSES (.t-display, .t-titulo,
   .t-subtitulo). Sem isto, h1/h2/h3 ficariam com o tipo do v1 — peso 800,
   tracking -.02em e a escala da Inter. Cada elemento recebe aqui o quarteto
   completo do seu degrau: tamanho, peso, entrelinha e tracking. Trocar por
   `letter-spacing: normal` jogaria fora justamente o que foi medido.

   Peso 600 e nao 800: identidade institucional nao se resolve com peso, se
   resolve com espaco — e a Archivo em 800 vira grito. */
h1 {
  font-family: var(--fonte-titulo); font-size: var(--t-titulo);
  font-weight: var(--peso-forte); line-height: 1.1; letter-spacing: -0.022em;
  max-width: var(--medida-titulo); text-wrap: balance;
}
h2 {
  font-family: var(--fonte-titulo); font-size: var(--t-titulo);
  font-weight: var(--peso-forte); line-height: 1.1; letter-spacing: -0.022em;
  max-width: var(--medida-titulo); text-wrap: balance;
}
h3 {
  font-family: var(--fonte-titulo); font-size: var(--t-subtitulo);
  font-weight: var(--peso-medio); line-height: 1.35; letter-spacing: -0.015em;
  max-width: var(--medida); text-wrap: balance;
}
p { max-width: var(--medida); }

/* Manchete em dois tons. Estavam escopadas em `.diagnostico` e o markup as usava
   em mais duas secoes, onde nao faziam nada: a manchete do historico saia num
   tom so. O italico continua escopado, porque so a virada do diagnostico o pede. */
.sutil  { color: var(--tinta-3); }
.acento { color: var(--acento); }

a { color: var(--acento); text-decoration-thickness: 1px; }
a:hover { color: var(--acento-forte); text-decoration-thickness: 2px; }

.pular { background: var(--tinta); color: var(--cal-1); border-radius: 0; }
:focus-visible { box-shadow: var(--focus); border-radius: 0; }

.conteiner { width: min(100% - (var(--gutter) * 2), var(--largura)); }
@media (min-width: 700px)  { .conteiner { width: min(100% - (var(--gutter-md) * 2), var(--largura)); } }
@media (min-width: 1100px) { .conteiner { width: min(100% - (var(--gutter-lg) * 2), var(--largura)); } }

.eyebrow, .eyebrow-dourado {
  font-family: var(--fonte-dado);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin: 0 0 var(--s-3);
}

/* -----------------------------------------------------------------------------
   4. BOTAO — o primario e TINTA, nunca acento

   Acento chapado num botao quebra a regra de ouro: 44x14px de area cromatica
   por botao, multiplicados pelo hero e pelo formulario, passam de 1% da tela.
   -------------------------------------------------------------------------- */
.botao {
  border-radius: 0;
  font-family: var(--fonte-texto);
  font-weight: var(--peso-medio);
  font-size: var(--t-apoio);
  padding: 14px var(--s-4);
  border-width: 1px;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.botao:active { transform: none; }   /* o v2 nao tem scale() em interacao */
.botao-grande { padding: 17px var(--s-5); font-size: var(--t-corpo); }

.botao-primario {
  background: var(--tinta); border-color: var(--tinta); color: var(--cal-1);
  box-shadow: none;
}
.botao-primario:hover {
  background: var(--cal-1); border-color: var(--tinta); color: var(--tinta);
  box-shadow: none;
}
.botao-secundario {
  background: transparent; border-color: var(--cal-4); color: var(--tinta);
}
.botao-secundario:hover { background: var(--cal-2); color: var(--tinta); }

/* -----------------------------------------------------------------------------
   5. TOPO E RODAPE — cal, nao navy

   O cabecalho e superficie elevada (--cal-0) com uma linha embaixo. Nenhuma
   faixa escura: no v2 o que separa uma area da outra e o vazio, e depois disso
   uma linha de 1px.
   -------------------------------------------------------------------------- */
/* A marca virou SVG inline em 18/09 e o `filter: invert(1)` que servia o PNG
   preto saiu junto: o desenho herda `currentColor`, entao quem define a cor da
   marca e a cor do texto do bloco onde ela esta. Um arquivo, os dois temas,
   zero regra de tema.

   O dimensionamento e por ALTURA, nao por largura: o que o olho compara entre
   o wordmark e o texto ao lado e a altura da capitular. A largura sai do
   viewBox. */
.marca-wordmark { display: block; height: 26px; width: auto; }
.marca-vertical { display: block; height: 76px; width: auto; }

.topo { background: var(--cal-0); color: var(--tinta); border-bottom: 1px solid var(--cal-3); }
.topo.rolado { box-shadow: none; border-bottom-color: var(--cal-4); }
.marca { color: var(--tinta); }
.marca-descritor { color: var(--tinta-2); }
/* `:not(.botao)` nao e enfeite: sem ele, `.menu a` (0,1,1) vence
   `.botao-primario` (0,1,0) e pinta o rotulo do CTA com a cor do proprio fundo
   do botao. Com o escopo, o botao volta a ser governado so por
   `.botao-primario` e `.botao-primario:hover`, que ja invertem certo, e nenhum
   valor de cor precisa ser repetido aqui. */
.menu a:not(.botao) { color: var(--tinta); }
.menu a:not(.botao):hover { color: var(--acento); }

/* --- correcoes de especificidade -------------------------------------------
   O site.css foi escrito para faixas navy, entao ele tem `#fff` cravado em
   varias regras — e cor literal nao atende a ponte de token da secao 2. Onde o
   seletor dele e MAIS especifico que o meu, o branco vence e o texto some sobre
   cal. Cada linha abaixo existe porque o seletor precisa empatar ou passar o
   dele, nao por gosto.

   Regra pratica para quem mexer aqui depois: procure `#fff` no site.css antes
   de assumir que a ponte resolveu. O que e token, a ponte resolve; o que e
   literal, so um seletor resolve.
   -------------------------------------------------------------------------- */
.menu-botao span:not(.oculto) { background: var(--tinta); }/* as barras do menu */
.marcas { color: var(--tinta); }                            /* era #fff */

.rodape { background: var(--cal-2); color: var(--tinta); border-top: 1px solid var(--cal-3); }
.rodape a { color: var(--tinta-2); }
.rodape a:hover { color: var(--acento); }
.rodape-titulo { font-family: var(--fonte-dado); font-size: var(--t-etiqueta); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); font-weight: var(--peso-medio); }
.rodape-legal { color: var(--tinta-2); font-size: var(--t-apoio); border-top: 1px solid var(--cal-3); }
/* Sem isto a linha juridica herda a medida de 54ch e o CNPJ quebra no meio do
   numero: "48.834.417/0001-" numa linha e "86" na outra. E o fato mais
   checavel da pagina; nao pode sair partido. */
.rodape-legal p { max-width: none; }

/* -----------------------------------------------------------------------------
   6. SECAO — o vazio e que separa

   96px a 144px entre blocos no desktop. Nenhuma secao tem moldura.
   -------------------------------------------------------------------------- */
.secao { padding-block: var(--s-7); }
@media (min-width: 900px) { .secao { padding-block: var(--s-8); } }

.secao-cinza { background: var(--cal-2); }
/* A faixa navy do v1 vira superficie elevada. Continua sendo o bloco que pede
   peso; o peso agora vem de contraste de superficie, nao de cor chapada. */
.secao-navy { background: var(--cal-0); color: var(--tinta); border-block: 1px solid var(--cal-3); }
.secao-navy h2, .secao-navy p { color: var(--tinta); }
.secao-navy .botao-secundario { color: var(--tinta); border-color: var(--cal-4); }
.secao-navy .botao-secundario:hover { background: var(--cal-2); }
.secao-estreita { max-width: var(--estreita); }

/* -----------------------------------------------------------------------------
   7. HERO — sem imagem, sem mascote, sem faixa escura

   O hero do v2 e uma coluna. A grade de duas colunas do v1 existia para
   acomodar o mascote, que saiu com o viplink.ai.
   -------------------------------------------------------------------------- */
.hero { background: var(--cal-1); color: var(--tinta); padding-block: var(--s-8) var(--s-7); }
@media (min-width: 900px) { .hero { padding-block: var(--s-9) var(--s-8); } }
.hero-grade { display: block; }
.hero-texto { max-width: none; }

/* A manchete vai no degrau TITULO (30->46px), nao no display (46->116px).
   O display foi dimensionado para --medida-display, 12ch, ou seja 15
   caracteres: uma linha que o olho pega numa fixacao so. Esta manchete tem 74
   caracteres, e 74 caracteres a 116px nao sao uma manchete, sao um cartaz — com
   o agravante de que o leitor e VP de uma das maiores empresas do pais e a copy
   nao e copy de cartaz.

   O corte da escala continua visivel na pagina: o vao de 22 para 46 e o que
   separa a manchete do corpo. O degrau de display fica disponivel para onde ele
   foi feito — pagina de campanha, capa de deck, uma linha curta. */
.hero h1 {
  font-size: var(--t-titulo);
  line-height: 1.08;
  max-width: 26ch;
  color: var(--tinta);
  margin-bottom: var(--s-5);
}
.hero-sub {
  font-size: var(--t-subtitulo);
  line-height: 1.45;
  color: var(--tinta-2);
  max-width: 46ch;
  margin-bottom: var(--s-6);
}
.hero-acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero .botao-secundario { color: var(--tinta); border-color: var(--cal-4); }
.hero .botao-secundario:hover { background: var(--cal-2); }

/* -----------------------------------------------------------------------------
   8. MARCAS — a prova, em tinta

   Logo de cliente entra monocromatico. Onze marcas com onze paletas brigando
   entre si roubam a pagina do texto, e o trabalho aqui e do cliente, nao da
   casa. `grayscale` + opacidade da o cinza; `contrast` devolve a forma que o
   grayscale achata em logo de cor clara.
   -------------------------------------------------------------------------- */
.marcas { background: var(--cal-1); border-block: 1px solid var(--cal-3); padding-block: var(--s-6); }
.marcas-titulo {
  font-family: var(--fonte-dado);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-medio);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  max-width: none;
  margin-bottom: var(--s-5);
}
.marcas-lista { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-6); list-style: none; padding: 0; margin: 0; }
.marcas-lista img {
  height: 28px; width: auto;
  filter: grayscale(1) contrast(.35) brightness(.35);
  opacity: .85;
  transition: filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.marcas-lista img:hover { filter: grayscale(1) contrast(.6) brightness(.15); opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marcas-lista img { filter: grayscale(1) brightness(3) contrast(.4); }
}
.marcas-nota { color: var(--tinta-3); font-size: var(--t-apoio); margin-top: var(--s-5); }

/* --- a faixa em tres trilhos deslizantes (19/09/2026) ----------------------
   O laco fecha porque cada trilho tem a lista TRES vezes e a animacao anda
   exatamente -33,3333%, a largura de uma copia. Com duas copias ja fechava; a
   terceira existe para telas largas, onde duas copias podiam nao cobrir a
   faixa inteira durante o deslocamento e deixar vazio entrando pela direita.
   Mexer no numero de copias obriga a mexer no passo do keyframe: o passo e
   sempre 100/copias por cento. O espacamento mora no `li` de
   proposito: com `gap` no trilho os -50% parariam de bater com a copia e a
   faixa iria derivando a cada volta.
   A duracao e longa (55s e 70s) porque o pedido foi deslizar "levemente": o
   olho tem que registrar movimento sem que a leitura do logo seja perturbada.
   -------------------------------------------------------------------------- */
.marcas-faixas { display: grid; gap: var(--s-5); }
.marcas-faixa { overflow: hidden; }
/* As pontas somem em vez de cortar no seco. */
.marcas-faixa {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marcas-trilho {
  display: flex; width: max-content;
  animation: marcas-anda 32s linear infinite;
}
.marcas-faixa-direita .marcas-trilho { animation-duration: 40s; animation-direction: reverse; }
.marcas-trilho .marcas-lista { flex-wrap: nowrap; gap: 0; }
.marcas-trilho li { padding-inline: var(--s-6); display: flex; align-items: center; }
@keyframes marcas-anda { to { translate: calc(-100% / 3) 0; } }

/* Sem movimento o trilho fica parado e o overflow esconde o resto da fila.
   A primeira tentativa foi mandar a lista quebrar linha, e deu errado: o `gap`
   do trilho e zero (o espacamento mora no `li`), entao as linhas quebradas se
   sobrepunham. A saida e manter o trilho como esta e deixar a faixa rolar na
   horizontal, com uma copia so. */
@media (prefers-reduced-motion: reduce) {
  /* Parar a animacao aqui, e nao so confiar no `animation: none !important`
     geral do site.css: este bloco esconde duas das tres copias do trilho, e um
     trilho de uma copia so em movimento desliza deixando vazio entrando pela
     direita. Se aquela regra geral for afrouxada um dia, esta faixa nao pode
     ser a que quebra. */
  .marcas-trilho {
    animation: none; translate: 0 0;
    /* `max-content` e o que impedia a quebra de linha: com largura de conteudo
       maximo nao existe o que quebrar. A tentativa anterior culpou o `gap` e
       manteve o `max-content`, e o resultado eram 15 dos 26 logos, tres deles
       cortados no meio da palavra. */
    width: auto; flex-wrap: wrap; justify-content: center;
  }
  /* O espacamento mora no `li` porque o trilho tem `gap: 0` (ver acima). Sem
     padding vertical as linhas quebradas se encostariam. */
  .marcas-trilho li { padding: var(--s-3) var(--s-5); }
  .marcas-trilho .marcas-lista { flex-wrap: wrap; justify-content: center; }
  .marcas-faixa { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .marcas-trilho .marcas-lista[aria-hidden] { display: none; }
}

/* -----------------------------------------------------------------------------
   9. CLAUSULA — as quatro secoes do contrato

   Numero em mono, do tamanho do subtitulo. Nao existe degrau proprio para
   numero: ele assume o degrau do bloco onde esta.
   -------------------------------------------------------------------------- */
.clausulas { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 900px) { .clausulas { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-6); } }
.clausula { border-top: 1px solid var(--cal-3); padding-top: var(--s-4); }
.clausula-num { font-family: var(--fonte-dado); font-size: var(--t-etiqueta); color: var(--tinta-3); display: block; margin-bottom: var(--s-3); font-variant-numeric: tabular-nums; }
.clausula h3 { margin-bottom: var(--s-3); max-width: 24ch; }
.clausula p { color: var(--tinta-2); margin: 0; }

/* Lista de fatos secos, sem marcador. O bloco 3 e uma sequencia de frases
   independentes: bullet ali sugeriria hierarquia que nao existe. */
.fatos { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-4); }
.fatos li { border-left: 2px solid var(--cal-3); padding-left: var(--s-4); max-width: var(--medida); color: var(--tinta-2); }

/* -----------------------------------------------------------------------------
   10. FAQ, FORMULARIO E CARTOES
   -------------------------------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--cal-3); border-radius: 0; background: transparent; padding-block: var(--s-3); }
.faq-item summary { cursor: pointer; }
.faq-item h3 { font-weight: var(--peso-medio); }
.faq-item p { color: var(--tinta-2); }

/* `background:#fff` no site.css e o caso mais caro da lista: no tema escuro da
   campo branco com texto claro por cima, ou seja, formulario ilegivel. O
   seletor precisa empatar com `.campo input:not([type="checkbox"])`. */
.campo input:not([type="checkbox"]), .campo select, .campo textarea {
  border-radius: 0;
  border: 1px solid var(--cal-3);
  background: var(--cal-0);
  color: var(--tinta);
  font-family: var(--fonte-texto);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-3); }
.filtros a { background: var(--cal-0); color: var(--tinta-2); border-color: var(--cal-3); }
.filtros a.ativa { background: var(--tinta); border-color: var(--tinta); color: var(--cal-1); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acento); }
.campo label { color: var(--tinta-2); font-size: var(--t-apoio); font-weight: var(--peso-medio); }
.campo-erro { color: var(--danger); font-size: var(--t-apoio); }
.formulario { background: var(--cal-0); border: 1px solid var(--cal-3); border-radius: 0; padding: var(--s-5); box-shadow: none; }
.formulario-nota { color: var(--tinta-3); font-size: var(--t-apoio); }

.cartao, .cartao-post { border-radius: 0; border: 1px solid var(--cal-3); background: var(--cal-0); box-shadow: none; }
/* O :hover do v1 vence a regra de base acima por especificidade, nao por ordem.
   Sem este reset o cartao ainda sobe 2px com sombra no hover, que e o lift que
   o v2 recusa: o movimento vive em opacidade e translate de secao, nao em cartao. */
.cartao:hover, .cartao-post:hover { box-shadow: none; transform: none; }
.link-seta { color: var(--acento); }

/* Os dois blocos que invertem: fundo tinta com texto cal. O site.css escreve
   `color:#fff`, que funciona no claro por coincidencia — tinta e quase preta —
   e desaparece no escuro, onde a tinta e quase branca. --cal-1 acompanha a
   troca; #fff nao acompanha nada. */
/* Este e o bloco de acento do artigo: pequeno, no fim da leitura, um por
   pagina. Era tinta; virou verde em 18/09 pela mesma regra do `.secao-acento`. */
.cta-artigo { background: var(--acento-fundo); color: var(--acento-sobre); border-radius: 0; }
.cta-artigo h2, .cta-artigo strong { color: var(--acento-sobre); }
.cta-artigo p { color: var(--acento-sobre-2); }
.cta-artigo .eyebrow { color: var(--acento-sobre-2); }
.cta-artigo .botao-primario { background: var(--acento-sobre); border-color: var(--acento-sobre); color: var(--acento-fundo); }
.cta-artigo .botao-primario:hover { background: transparent; color: var(--acento-sobre); border-color: var(--acento-sobre); }
.espera { background: var(--cal-1); color: var(--tinta); }

.prazo { background: var(--cal-0); border-block: 1px solid var(--cal-3); padding-block: var(--s-6); }
.prazo p { font-size: var(--t-subtitulo); color: var(--tinta); max-width: none; }
.prazo strong { font-weight: var(--peso-medio); }

/* -----------------------------------------------------------------------------
   13. DIAGNOSTICO — o bloco das tres causas (17/09/2026)

   Estrutura pedida pelo dono, espelhando a secao equivalente do viplink.ai:
   olho em caixa alta, manchete em dois tons, tres cartoes numerados, linha de
   fecho. A COR nao veio de la: o laranja do viplink.ai e justamente o que o
   Design System v2 revogou, entao o acento aqui e o acento da casa.

   Tres colunas, nao duas como .clausulas: sao causas irmas, de mesmo peso, e
   duas colunas criariam uma orfa na segunda linha.
   -------------------------------------------------------------------------- */
.diagnostico { text-align: left; }
.diagnostico .eyebrow { color: var(--tinta-2); }
.diagnostico h2 { max-width: 26ch; text-wrap: balance; }
.diagnostico h2 .sutil { color: var(--tinta-3); }
.diagnostico h2 .acento { color: var(--acento); font-style: italic; }

.causas {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
}
@media (min-width: 900px) { .causas { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

.causa {
  border: 1px solid var(--cal-3);
  padding: var(--s-5);
  background: var(--cal-0);
}
.causa-num {
  font-family: var(--fonte-dado);
  font-size: var(--t-subtitulo);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);  /* era --cal-4, que e token de borda: dava 3,57:1 */
  display: block;
  margin-bottom: var(--s-4);
}
.causa h3 { font-size: var(--t-subtitulo); margin: 0 0 var(--s-3); max-width: 18ch; }
.causa p { color: var(--tinta-2); margin: 0; }

.diagnostico-fecho {
  margin: var(--s-7) 0 0;
  max-width: 44ch;
  font-size: var(--t-subtitulo);
  line-height: 1.4;
  text-wrap: balance;
}
.diagnostico-fecho .sutil { color: var(--tinta-2); }  /* --tinta-3 da 4,06:1 sobre --cal-2 */

/* No escuro os cartoes assentam no fundo rebaixado, nao no elevado. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .causa { background: var(--cal-1); }
}
:root[data-theme="dark"] .causa { background: var(--cal-1); }

/* -----------------------------------------------------------------------------
   14. FASES — como a casa trabalha (17/09/2026)

   Estrutura espelhada da secao "How we work" do viplink.ai: numero grande com
   filete, etiqueta de etapa em caixa alta, titulo, corpo. Quatro fases, nao
   tres: a quarta (garantia) e o que separa a casa e nao cabia dentro da
   execucao. Acento em acento, nao no laranja de la.
   -------------------------------------------------------------------------- */
.fases { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 700px)  { .fases { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
@media (min-width: 1100px) { .fases { grid-template-columns: repeat(4, 1fr); } }

.fase { border: 1px solid var(--cal-3); background: var(--cal-0); padding: var(--s-5); }
.fase-topo { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.fase-num {
  font-family: var(--fonte-dado);
  font-size: var(--t-titulo);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}
.fase-linha { flex: 1; height: 1px; background: var(--acento); opacity: .35; }
.fase-etiqueta {
  font-family: var(--fonte-dado);
  font-size: var(--t-etiqueta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  display: block;
  margin-bottom: var(--s-2);
}
.fase h3 { font-size: var(--t-subtitulo); margin: 0 0 var(--s-3); }
.fase p { color: var(--tinta-2); margin: 0; }

.fases-cabeca { text-align: left; }
.fases-cabeca h2 { max-width: 22ch; text-wrap: balance; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fase { background: var(--cal-1); }
}
:root[data-theme="dark"] .fase { background: var(--cal-1); }

/* -----------------------------------------------------------------------------
   15. SOBRE — a pagina institucional (17/09/2026)
   -------------------------------------------------------------------------- */
.sobre-hero h1 { max-width: 20ch; }
.sobre-hero .hero-sub { max-width: 58ch; }

/* Video em 16:9 sem depender de aspect-ratio em navegador velho. */
.video-quadro { position: relative; padding-top: 56.25%; background: var(--cal-2); border: 1px solid var(--cal-3); }
.video-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Linha do tempo. O filete vertical e a regua; o ano em mono ancora a leitura. */
.linha-tempo { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .linha-tempo { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-5); } }
.linha-tempo li { border-left: 2px solid var(--acento); padding-left: var(--s-4); }
.linha-tempo-ano {
  font-family: var(--fonte-dado);
  font-size: var(--t-etiqueta);
  letter-spacing: .12em;
  color: var(--acento);
  display: block;
  margin-bottom: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.linha-tempo h3 { font-size: var(--t-subtitulo); margin: 0 0 var(--s-3); }
.linha-tempo p { color: var(--tinta-2); margin: 0; }

/* O time. */
.time { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 800px) { .time { grid-template-columns: repeat(3, 1fr); } }
.pessoa { border-top: 1px solid var(--cal-3); padding-top: var(--s-4); }
.pessoa h3 { font-size: var(--t-subtitulo); margin: 0 0 var(--s-1); }
.pessoa-cargo {
  font-family: var(--fonte-dado);
  font-size: var(--t-etiqueta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 var(--s-3);
}
.pessoa p { color: var(--tinta-2); margin: 0; }

/* "Tudo o que nao somos": a recusa em lista, com o tracado por cima. O risco
   e decorativo, entao o item continua legivel para leitor de tela. */
.nao-somos { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); }
.nao-somos li {
  display: flex; align-items: baseline; gap: var(--s-3);
  color: var(--tinta-3);
  text-decoration: line-through;
  text-decoration-color: var(--cal-4);
}
.nao-somos li::before { content: "×"; text-decoration: none; color: var(--cal-4); font-size: var(--t-subtitulo); line-height: 1; }
.nao-somos-fecho { margin-top: var(--s-5); font-size: var(--t-subtitulo); line-height: 1.45; max-width: 48ch; }

.sobre-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-5); }

/* Credenciais da pagina /sobre: fato seco em quatro colunas, sem cartao. */
.credenciais-secao { padding-block: var(--s-6); border-bottom: 1px solid var(--cal-3); }
.credenciais { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .credenciais { grid-template-columns: repeat(4, 1fr); } }
.credenciais li { display: flex; flex-direction: column; gap: var(--s-1); }
.credenciais strong {
  font-family: var(--fonte-dado);
  font-size: var(--t-subtitulo);
  font-weight: var(--peso-medio);
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.credenciais span { font-size: var(--t-apoio); color: var(--tinta-3); }

/* -----------------------------------------------------------------------------
   16. AS SECOES ESPELHADAS DO VIPLINK.AI (17/09/2026)
   -------------------------------------------------------------------------- */

/* Antes da campanha: tres leituras, cada uma com o que entra nela. */
.leituras { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 900px) { .leituras { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.leitura { border: 1px solid var(--cal-3); background: var(--cal-0); padding: var(--s-5); }
.leitura-topo { display: flex; align-items: baseline; gap: var(--s-3); font-size: var(--t-subtitulo); font-weight: var(--peso-forte, 700); margin: 0 0 var(--s-3); }
.leitura-num { font-family: var(--fonte-dado); color: var(--acento); font-variant-numeric: tabular-nums; }
.leitura > p:not(.leitura-topo) { color: var(--tinta-2); margin: 0; }  /* sem o :not() o titulo do cartao encostava no corpo */
.leitura-inclui {
  font-family: var(--fonte-dado); font-size: var(--t-etiqueta); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-3);
  margin: var(--s-4) 0 var(--s-3) !important; padding-top: var(--s-4); border-top: 1px solid var(--cal-3);
}
.leitura ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.leitura li { display: flex; gap: var(--s-3); color: var(--tinta-2); font-size: var(--t-apoio); }
.leitura li::before { content: "•"; color: var(--acento); }

/* Por subtracao: a recusa de um lado, a afirmacao do outro. */
.subtracao { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 900px) { .subtracao { grid-template-columns: 1fr 1.15fr; gap: var(--s-5); } }
.subtracao-nao, .subtracao-sim { border: 1px solid var(--cal-3); padding: var(--s-5); }
.subtracao-nao { background: var(--cal-1); }
.subtracao-sim { background: var(--cal-0); border-color: var(--acento); }
.subtracao-nao .leitura-inclui, .subtracao-sim .leitura-inclui { margin-top: 0 !important; padding-top: 0; border-top: 0; }
.subtracao-sim .leitura-inclui { color: var(--acento); }
.subtracao-frase { font-size: var(--t-subtitulo); line-height: 1.35; margin: 0 0 var(--s-4); }
.subtracao-sim > p:last-child { color: var(--tinta-2); margin: 0; }
.nao-somos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.nao-somos li {
  display: flex; align-items: baseline; gap: var(--s-3);
  color: var(--tinta-3); text-decoration: line-through; text-decoration-color: var(--cal-4);
}
.nao-somos li::before { content: "×"; text-decoration: none; color: var(--cal-4); font-size: var(--t-subtitulo); line-height: 1; }

/* Historico: dois numeros grandes, lado a lado. */
.numeros-par { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 700px) { .numeros-par { grid-template-columns: repeat(2, 1fr); gap: 0; } }
.numeros-par > div { border: 1px solid var(--cal-3); background: var(--cal-0); padding: var(--s-5); }
@media (min-width: 700px) { .numeros-par > div + div { border-left: 0; } }
.numeros-par strong {
  display: block; font-family: var(--fonte-dado); font-size: var(--t-display);
  line-height: 1; color: var(--acento); font-variant-numeric: tabular-nums; margin-bottom: var(--s-3);
}
.numeros-titulo { font-size: var(--t-subtitulo); margin: 0 0 var(--s-2); }
.numeros-par p:last-child { color: var(--tinta-2); font-size: var(--t-apoio); margin: 0; }

@media (prefers-color-scheme: dark) {
  /* Cartao de conteudo: fundo, nunca filtro. Em 19/09 estes tres seletores
     ficaram pendurados na regra de filtro abaixo por um corte errado meu, e
     `brightness(3)` lavou o cartao inteiro no tema escuro. Quem mexer: filtro
     aqui e so para LOGO, que precisa virar monocromatico. */
  :root:not([data-theme="light"]) .leitura,
  :root:not([data-theme="light"]) .subtracao-sim,
  :root:not([data-theme="light"]) .numeros-par > div { background: var(--cal-1); }
}

/* -----------------------------------------------------------------------------
   17. CONTATO E RODAPE (17/09/2026)
   -------------------------------------------------------------------------- */
.contato-pagina .contato-grade { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .contato-pagina .contato-grade { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
.contato-pagina h1 { max-width: 18ch; }
.contato-pagina .destaque { color: var(--tinta-2); max-width: 44ch; }

.contato-entrega { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: var(--s-4); }
.contato-entrega li { border-top: 1px solid var(--cal-3); padding-top: var(--s-3); }
.contato-entrega strong { display: block; margin-bottom: var(--s-2); }
.contato-entrega span { color: var(--tinta-2); font-size: var(--t-apoio); }
.contato-pagina .contato-alternativa { margin-top: var(--s-6); color: var(--tinta-3); font-size: var(--t-apoio); }

.campo-ajuda { color: var(--tinta-3); font-size: var(--t-apoio); margin: var(--s-2) 0 0; }
/* Linha de atrito sob o CTA final: prazo, compromisso e criterio de entrada.
   Menor que o corpo e em --acento-sobre-2 porque mora dentro do bloco verde. */
.chamada-atrito { font-size: var(--t-apoio); color: var(--acento-sobre-2); margin-top: var(--s-4); max-width: 52ch; }

.chamada-final h2 { max-width: 22ch; }

/* Faixa de imprensa no rodape. Mesmo tratamento da faixa de marcas: PNG branco
   escurecido por filtro, porque o rodape e claro no tema padrao. */
.rodape-imprensa { padding-bottom: var(--s-6); border-bottom: 1px solid var(--cal-3); margin-bottom: var(--s-6); }
.imprensa-lista {
  list-style: none; padding: 0; margin: var(--s-4) 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6);
}
.imprensa-lista img {
  height: 20px; width: auto;
  filter: grayscale(1) contrast(.35) brightness(.5);
  opacity: .75;
  transition: opacity var(--dur-2) var(--ease);
}
.imprensa-lista img:hover { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .imprensa-lista img { filter: grayscale(1) brightness(3) contrast(.4); }
}
.rodape-praca { color: var(--tinta-3); font-size: var(--t-apoio); margin-top: var(--s-3); }

/* -----------------------------------------------------------------------------
   18. ACABAMENTO (17/09/2026)

   Tres frentes, nesta ordem de retorno:
   1. As superficies que o navegador desenha e que nenhum design system encosta:
      selecao de texto, cursor, barra de rolagem, anel de foco, sublinhado,
      numeral tabular. E o sinal mais barato de pagina construida, e o mais
      esquecido.
   2. Profundidade de verdade: sombra com deslocamento E desfoque. Halo colorido
      sem deslocamento e decoracao.
   3. UM momento de movimento, na dobra, e nada mais. Entrada identica em toda
      secao e ruido, e conteudo que comeca invisivel e um risco de acessibilidade.
   -------------------------------------------------------------------------- */

/* --- 1. superficies do navegador --- */
::selection { background: var(--acento); color: var(--cal-0); }
:root { accent-color: var(--acento); caret-color: var(--acento); scrollbar-color: var(--cal-4) var(--cal-1); }
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--cal-1); }
  ::-webkit-scrollbar-thumb { background: var(--cal-4); border: 3px solid var(--cal-1); }
  ::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); }
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}
.prosa a, .rodape-lista a, .contato-alternativa a, .campo-consentimento a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--acento) 45%, transparent);
  transition: text-decoration-color var(--dur-1) var(--ease);
}
.prosa a:hover, .rodape-lista a:hover, .contato-alternativa a:hover { text-decoration-color: var(--acento); }
.numeros-par strong, .credenciais strong, .fase-num, .causa-num, .leitura-num, .linha-tempo-ano {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* --- 2. o CORTE no hero --- */
.hero { position: relative; overflow: hidden; }
.hero > .conteiner { position: relative; z-index: 1; }
.corte {
  position: absolute;
  right: -3%;
  top: 50%;
  translate: 0 -50%;
  width: min(32vw, 26rem);
  height: auto;
  pointer-events: none;
  z-index: 0;
}
/* Tinta, nao acento. A regra do v2 e que o acento nao pinta area, e uma
   marca d'agua de 34rem nao e traco nem estado. Tinta a 5% sobre cal da um
   cinza quente que pertence a paleta; o acento a 7% dava um azul acinzentado
   que nao pertence a lugar nenhum. */
.corte path   { fill: var(--tinta); }
.corte-plano  { opacity: .055; }
.corte-peca   { opacity: .085; }
/* No mobile o V cresce ate encostar na faixa dos botoes (pedido do dono, 19/09).
   A conta saiu da captura de tela dele: a 56vw o simbolo parava a meio caminho
   entre a linha de apoio e os botoes. Centralizado como esta, 88vw poe a borda
   de baixo dentro da faixa do botao primario. Mexer nos dois valores juntos: a
   largura define a altura, porque o viewBox e quadrado. */
@media (max-width: 900px) { .corte { right: -16%; width: 88vw; } }

/* --- 3. o unico momento de movimento: a peca da direita entra deslizando pelo
       corte, partindo de uma posicao ja visivel. Nada aqui comeca em opacidade 0.
       As unidades sao do viewBox (100 de lado), nao pixels de tela. --- */
@keyframes corte-abre {
  from { translate: 9px -9px; }
  to   { translate: 0 0; }
}
.corte-peca { animation: corte-abre 1100ms cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .corte-peca { animation: none; } }

/* --- 3b. o botao do menu perdia o texto -------------------------------------
   Corrigido na secao 5, escopando `.menu a` com `:not(.botao)`. A primeira
   tentativa foi cravar `color` aqui, o que consertava o repouso e deixava o
   hover invisivel: `.botao-primario:hover` INVERTE o botao (fundo cal, texto
   tinta), entao forcar cal no hover devolvia cal sobre cal. Fixar valor de cor
   fora do componente repete a decisao em dois lugares e um deles envelhece. */

/* --- 4. profundidade e estados nos cartoes --- */
.causa, .fase, .leitura, .numeros-par > div, .subtracao-sim {
  box-shadow: 0 1px 2px rgba(23, 21, 15, .04), 0 8px 24px -12px rgba(23, 21, 15, .10);
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), translate var(--dur-2) var(--ease);
}
.causa:hover, .fase:hover, .leitura:hover {
  border-color: var(--cal-4);
  box-shadow: 0 2px 4px rgba(23, 21, 15, .05), 0 16px 40px -16px rgba(23, 21, 15, .16);
  translate: 0 -2px;
}
@media (prefers-reduced-motion: reduce) {
  .causa, .fase, .leitura { transition: none; }
  .causa:hover, .fase:hover, .leitura:hover { translate: none; }
}

/* --- 5. o vao como divisor de secao: um corte, nao uma linha inteira --- */
.secao-cinza + .secao, .secao + .secao-cinza { position: relative; }
.secao-cinza + .secao::before, .secao + .secao-cinza::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: clamp(4rem, 12vw, 11rem); height: 2px; background: var(--acento);
}

/* --- 6. ritmo: mais espaco acima do titulo do que abaixo --- */
.fases-cabeca h2, .diagnostico h2 { margin-top: var(--s-3); }
.secao-estreita > p { max-width: 68ch; }


/* =============================================================================
   19. A MARCA — simbolo, wordmark e lockup                        (18/09/2026)

   O v1 usava o poodle Elvis como icone e um PNG preto como wordmark. Os dois
   sairam da marca em 10/09, mas o poodle continuou na aba do navegador, no
   icone de celular e em todo link compartilhado ate 18/09.

   O SIMBOLO e um V de dois planos cortados com o apice aberto. A geometria
   repete a mecanica da garantia — o vao existe porque a casa tirou material de
   si — e vem do repertorio de corte e dobra do Amilcar de Castro, que e
   brasilidade por repertorio de design e nunca por folclore.

   O traco horizontal do braco e 26% da largura, que e exatamente a haste do V
   da Archivo no peso 760. Simbolo e wordmark sao irmaos tipograficos, nao
   vizinhos.

   ONDE CADA UM VIVE. O simbolo e um V; ao lado da palavra "Viplink" ele
   gagueja. Por isso: topo = so wordmark, rodape = lockup vertical (empilhado
   lem como duas linhas), icone e compartilhamento = so simbolo.

   Geometria, para quem for redesenhar: viewBox 0 0 100 100, braco esquerdo
   M0 0 L26 0 L47 100 L21 100 Z, direito M74 0 L100 0 L79 100 L53 100 Z.
   O gerador esta em ferramentas/gerar-marca.py.
   ========================================================================== */
.marca-wordmark, .marca-vertical, .autor-selo svg,
.lateral-simbolo, .entrada-simbolo, .espera-marca { fill: currentColor; }

/* O selo do autor no blog: o simbolo vazado num quadrado de tinta, do mesmo
   jeito que o favicon. Substitui o mascote que fazia as vezes de retrato. */
.autor-selo {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; background: var(--tinta); color: var(--cal-1);
}
.autor-selo svg { width: 54%; height: 54%; display: block; }
.autor-caixa img { display: none; }   /* rede, caso algum post antigo traga um */

/* A pagina de espera nao tem topo nem rodape: a marca e tudo o que ela mostra. */
.espera-marca { width: clamp(9rem, 26vw, 13rem); height: auto; margin: 0 auto 28px; }

/* =============================================================================
   20. BLOCO DE ACENTO — a unica area que o verde pinta        (18/09/2026)

   Um por pagina, e so onde o destaque justifica ou o bloco e pequeno. O texto
   secundario aqui e TINGIDO do proprio verde, nunca cinza: cinza sobre cor
   parece erro de contraste mesmo quando passa na medicao.

   O botao primario inverte. Tinta sobre verde escuro some; cal sobre verde
   escuro e o mesmo par que o resto do bloco ja usa.
   ========================================================================== */
.secao-acento { background: var(--acento-fundo); color: var(--acento-sobre); }
.secao-acento h1, .secao-acento h2, .secao-acento h3, .secao-acento strong { color: var(--acento-sobre); }
.secao-acento p, .secao-acento li { color: var(--acento-sobre-2); }
.secao-acento .eyebrow { color: var(--acento-sobre-2); }
.secao-acento a:not(.botao) { color: var(--acento-sobre); text-decoration-thickness: 1px; }
.secao-acento a:not(.botao):hover { color: var(--acento-sobre); text-decoration-thickness: 2px; }
.secao-acento .botao-primario {
  background: var(--acento-sobre); border-color: var(--acento-sobre); color: var(--acento-fundo);
}
.secao-acento .botao-primario:hover {
  background: transparent; border-color: var(--acento-sobre); color: var(--acento-sobre);
}
.secao-acento .botao-secundario { color: var(--acento-sobre); border-color: var(--acento-sobre-2); }
.secao-acento .botao-secundario:hover { background: rgba(244, 242, 237, .10); color: var(--acento-sobre); }
.secao-acento :where(a, button):focus-visible { outline-color: var(--acento-sobre); }
/* O divisor de secao e um corte de acento; dentro do proprio acento ele some. */
.secao-acento + .secao::before, .secao-acento::before { display: none; }

/* =============================================================================
   21. PAGINA DE CONTATO: PROVA                                 (18/09/2026)

   Esta e a pagina onde o visitante decide se a empresa existe de verdade. O
   texto encurtou e entrou prova: numeros, identidade juridica, marcas e
   imprensa. A ordem nao e estetica — CNPJ conferivel e o sinal anti-fraude mais
   barato que um comprador brasileiro tem, e por isso ele sobe para o corpo da
   pagina em vez de ficar so no rodape.
   ========================================================================== */
.contato-cabeca { max-width: 46ch; margin-bottom: var(--s-7); }
/* O `.contato-pagina h1 { max-width: 18ch }` era do tempo em que a manchete
   dividia a coluna com a lista. Agora ela tem a largura da pagina. */
.contato-pagina .contato-cabeca h1 { max-width: 24ch; }

.prova { margin-top: var(--s-6); padding: var(--s-5); }
.prova-numeros {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3);
}
.prova-numeros li { display: flex; flex-direction: column; gap: 2px; }
.prova-numeros strong {
  font-family: var(--fonte-dado); font-size: var(--t-subtitulo); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--acento-sobre);
}
.prova-numeros span { font-size: var(--t-etiqueta); line-height: 1.35; color: var(--acento-sobre-2); }
.prova-paises {
  margin: var(--s-4) 0 0; padding-top: var(--s-3);
  border-top: 1px solid rgba(244, 242, 237, .18);
  font-size: var(--t-etiqueta); color: var(--acento-sobre-2);
}

.contato-garantias { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: var(--s-4); }
.contato-garantias li { border-top: 1px solid var(--cal-3); padding-top: var(--s-3); }
.contato-garantias strong { display: block; margin-bottom: var(--s-2); }
.contato-garantias span { color: var(--tinta-2); font-size: var(--t-apoio); }

.contato-prova-final { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--cal-3); }
.prova-titulo {
  font-family: var(--fonte-dado); font-size: var(--t-etiqueta); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-3); margin: 0 0 var(--s-4);
}
.contato-imprensa { margin-top: var(--s-6); }

/* =============================================================================
   22. BARRA DE PROGRESSO E AVISO DE MEIO DE PAGINA             (18/09/2026)

   Mora dentro de `.topo`, que ja e sticky. O preenchimento anda por `scaleX`
   sobre um trilho de largura fixa: animar `width` recalcula layout a cada
   quadro de rolagem, `transform` nao.
   ========================================================================== */
.progresso { position: relative; }
.progresso-trilho { height: 3px; background: var(--cal-2); overflow: hidden; }
.progresso-preenche {
  display: block; height: 100%; background: var(--acento);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}
/* O aviso PENDURA embaixo do cabecalho em vez de morar dentro dele.
   Motivo: `.topo` e sticky, ou seja continua no fluxo, entao um aviso que
   ocupa altura la dentro cresce o cabecalho e EMPURRA a pagina inteira para
   baixo no instante em que aparece. Absoluto contra o proprio `.topo`, ele
   entra e sai sem mover uma linha do conteudo. */
.progresso-aviso {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
  /* A mesma goteira do `.conteiner`: o aviso vive fora dele, entao sem isto o
     texto encosta na borda da tela e desalinha do menu logo acima. */
  padding: var(--s-3) var(--gutter);
  background: var(--acento-fundo); color: var(--acento-sobre);
  translate: 0 -100%; opacity: 0; visibility: hidden;
  transition: translate var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
/* `.chamando` e ligado e desligado pela rolagem: o aviso so existe na metade
   de baixo da pagina e recolhe sozinho quando a pessoa volta para o topo. */
/* Com a barra aberta existiam dois botoes "Fale com nosso time" identicos no
   mesmo campo visual, a ~60px um do outro. Dois CTAs iguais nao somam, dividem.
   `visibility` e nao `display` para o cabecalho nao mudar de altura. */
.topo:has(.progresso.chamando) .menu .botao-primario { visibility: hidden; }

.progresso.chamando .progresso-aviso {
  translate: 0 0; opacity: 1; visibility: visible;
  transition-delay: 0s;
}
/* O fundo sangra de ponta a ponta e o CONTEUDO fica na largura do conteiner.
   Com `max-width` + `margin: auto` o verde pararia junto com o texto e sobraria
   cal nas beiradas; com goteira calculada, a caixa continua inteira e so o
   recheio se alinha ao resto da pagina. */
.progresso-aviso { padding-inline: max(var(--gutter), calc((100% - var(--largura)) / 2)); }
@media (min-width: 700px)  { .progresso-aviso { padding-inline: max(var(--gutter-md), calc((100% - var(--largura)) / 2)); } }
@media (min-width: 1100px) { .progresso-aviso { padding-inline: max(var(--gutter-lg), calc((100% - var(--largura)) / 2)); } }
.progresso-aviso p { margin: 0; flex: 1 1 18rem; font-size: var(--t-apoio); color: var(--acento-sobre-2); }
.progresso-aviso .botao-primario {
  background: var(--acento-sobre); border-color: var(--acento-sobre); color: var(--acento-fundo);
  padding: 10px var(--s-4); font-size: var(--t-apoio);
}
.progresso-aviso .botao-primario:hover { background: transparent; color: var(--acento-sobre); }
/* --- As faiscas do aviso -----------------------------------------------------
   Cada faisca NASCE do nada, cintila duas vezes e DERIVA para fora antes de
   apagar. O caminho da deriva nao esta no keyframe: ele vem de `--dx`/`--dy`
   por faisca, entao um keyframe so serve as cinco e mudar a direcao de uma e
   editar duas linhas.

   Duracoes propositalmente desencontradas (2,9 a 4,1s) e atrasos escalonados:
   com tempos iguais as cinco piscariam em bloco depois de um ciclo, que e o
   jeito mais rapido de um efeito discreto virar pisca-pisca.

   `pointer-events: none` e obrigatorio — sem ele a faisca que passa por cima
   do canto do botao rouba o clique. */
.aviso-destaque { position: relative; display: inline-flex; flex: none; }
.faisca {
  position: absolute; pointer-events: none;
  fill: var(--acento-sobre); opacity: 0;
  animation-name: cintila;
  animation-timing-function: var(--ease);
  animation-iteration-count: infinite;
}
@keyframes cintila {
  0%   { opacity: 0;   scale: .15; rotate: -50deg; translate: 0 0; }
  14%  { opacity: 1;   scale: 1;   rotate: -10deg; }
  32%  { opacity: .35; scale: .62; rotate: 6deg; }
  50%  { opacity: .95; scale: .92; rotate: 18deg; }
  72%  { opacity: .5;  scale: .7;  rotate: 30deg; }
  100% { opacity: 0;   scale: .2;  rotate: 48deg; translate: var(--dx) var(--dy); }
}
/* O envelope da deriva nao e gosto, e a folga que existe.
   VERTICAL: a faixa tem 16px de recheio e o botao ~42px de altura, entao numa
   linha de texto sobram ~16px acima e abaixo do botao. Partida de -7px mais
   deriva de -8px da 15px: cabe. Com os -20px que estavam aqui antes, a faisca
   saia da faixa e passava por cima do menu.
   HORIZONTAL: o vao entre o botao e os vizinhos (o paragrafo a esquerda, o X a
   direita) e de 24px, entao nada pode passar de ~22px para nenhum lado. */
.faisca-1 { width: 16px; height: 16px; top: -7px;    left: -10px;  --dx: -12px; --dy: -7px; animation-duration: 3.2s; animation-delay: 0s; }
.faisca-2 { width: 11px; height: 11px; top: -5px;    right: -9px;  --dx: 12px;  --dy: -8px; animation-duration: 3.8s; animation-delay: .7s; }
.faisca-3 { width: 9px;  height: 9px;  bottom: -7px; right: 20px;  --dx: 7px;   --dy: 8px;  animation-duration: 2.9s; animation-delay: 1.4s; }
.faisca-4 { width: 13px; height: 13px; bottom: -5px; left: -8px;   --dx: -11px; --dy: 8px;  animation-duration: 3.5s; animation-delay: 2.1s; }
.faisca-5 { width: 7px;  height: 7px;  top: 38%;     right: -12px; --dx: 10px;  --dy: 2px;  animation-duration: 4.1s; animation-delay: 2.8s; }

/* Movimento infinito e a primeira coisa que incomoda quem pediu menos
   movimento: aqui ele some por inteiro, e as faiscas ficam paradas e discretas
   no lugar de origem, sem deriva. */
@media (prefers-reduced-motion: reduce) {
  .faisca { animation: none; opacity: .55; scale: 1; rotate: 0deg; translate: 0 0; }
}

.progresso-fechar {
  background: transparent; border: 0; color: var(--acento-sobre-2);
  width: 44px; height: 44px; cursor: pointer; display: grid; place-items: center;
}
.progresso-fechar:hover { color: var(--acento-sobre); }
@media (prefers-reduced-motion: reduce) {
  .progresso-aviso { transition: opacity 1ms linear, visibility 0s linear 1ms; translate: 0 0; }
}

/* =============================================================================
   23. ANTI-FUGA                                                (18/09/2026)

   Pedido do dono. Registrado aqui o que ele custa: o evento so existe com
   mouse, entao em celular a coisa nao roda, e o padrao e o mesmo do comercio
   agressivo, o que empurra contra o posicionamento premium da pagina. O
   desenho compensa o que da para compensar: uma vez por visita, calmo, sem
   contagem regressiva, sem segunda oferta e com o fechar sempre visivel.
   ========================================================================== */
.fuga {
  border: 1px solid var(--cal-3); background: var(--cal-0); color: var(--tinta);
  padding: 0; max-width: min(40rem, calc(100vw - 2 * var(--s-4)));
  box-shadow: 0 4px 12px rgba(23, 21, 15, .08), 0 32px 64px -24px rgba(23, 21, 15, .30);
}
.fuga::backdrop { background: rgba(23, 21, 15, .55); }
.fuga[open] { animation: fuga-entra 260ms var(--ease) both; }
@keyframes fuga-entra { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .fuga[open] { animation: none; } }

.fuga-fechar-forma { position: absolute; top: 0; right: 0; margin: 0; }
.fuga-fechar {
  background: var(--cal-0); border: 1px solid var(--cal-3); color: var(--tinta);
  width: 40px; height: 40px; margin: var(--s-3); cursor: pointer;
  display: grid; place-items: center;
}
.fuga-fechar:hover { border-color: var(--acento); color: var(--acento); }
.fuga-figura { margin: 0; max-width: none; }  /* idem: a imagem parava em 54ch e sobrava faixa branca */
.fuga-figura img { width: 100%; height: auto; display: block; }
.fuga-figura span {
  display: block; padding: var(--s-2) var(--s-5) 0;
  font-size: var(--t-etiqueta); color: var(--tinta-3);
}
.fuga-texto { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.fuga-texto h2 { margin: 0; font-size: var(--t-subtitulo); letter-spacing: -.02em; max-width: 24ch; }
.fuga-texto p { margin: 0; color: var(--tinta-2); font-size: var(--t-apoio); }
.fuga-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-2); }

@media (max-width: 560px) {
  .prova-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}