/* ============================================================================
   MINDEX — sistema visual do site (mindex.ia.br)

   Direção: painel de instrumentos industrial. Fundo quase preto, ciano como
   sinal, grade de pixels (o mesmo princípio de construção da logo), régua fina
   como no desenho técnico, movimento contido.

   Padrão documentado em [[Padrão Visual Mindex]] (vault). Herda o deck
   `template_deck_mindex.html` da skill apresentacao-mindex — mesmas cores,
   mesma gramática, adaptado de slide fixo para documento que rola.

   DESVIO REGISTRADO — tipografia:
   O deck usa Bahnschrift + Cascadia Mono, ambas nativas do Windows. Num site
   público isso não serve: quem abre no iPhone, Mac ou Android não tem
   Bahnschrift e cai num substituto genérico. Aqui as duas fontes são
   hospedadas dentro do próprio site:
     · Archivo   no lugar da Bahnschrift — tem os mesmos dois eixos (peso e
                 largura), então a compressão industrial da DIN se mantém.
     · Cascadia Mono — a Microsoft liberou com licença aberta (OFL), então
                 pode ser hospedada. É literalmente a mesma fonte do deck.
   Nenhuma chamada a servidor de terceiro (sem Google Fonts): melhor para
   privacidade, para LGPD e para o site não depender de ninguém.
   ============================================================================ */

/* ---------------------------------------------------------------- fontes -- */
@font-face{
  font-family:'Archivo';
  src:url('fontes/Archivo-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cascadia Mono';
  src:url('fontes/CascadiaMono-var.woff2') format('woff2-variations');
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* cores — idênticas ao deck, não alterar sem atualizar o vault */
  --bg:#0a0d12;
  --bg-2:#111722;
  --surf:#151c29;
  --surf-2:#1b2433;
  --linha:#26303f;
  --ciano:#0abef9;
  --ciano-esc:#0891c4;
  --ciano-fraco:rgba(10,190,249,.13);
  --ciano-med:rgba(10,190,249,.35);
  --cant:rgba(10,190,249,.5);        /* cantoneiras dos cartões */
  --txt:#e9edf4;
  --txt-2:#9aa6b8;
  /* DESVIO REGISTRADO — no deck este token é #616d80. Aqui ele é clareado.
     Motivo: --txt-3 carrega TODO o rótulo em mono (legenda dos números, CNPJ
     do rodapé, chaves das tabelas) em corpo de 10 a 12,5px. A #616d80 rende
     3,43:1 sobre o rodapé — abaixo dos 4,5:1 que a norma de acessibilidade
     exige para texto pequeno. #7b8899 rende 4,98:1 e continua sendo
     visivelmente o tom "fraco" da escala. Num deck a 3 metros de distância a
     original serve; num site lido de perto, não. */
  --txt-3:#7b8899;
  --verde:#3ddc84;
  --ambar:#ffb020;
  --vermelho:#ff5c5c;

  /* tipografia — o fallback continua sendo a Bahnschrift, para quem estiver
     no Windows e a fonte hospedada ainda não tiver carregado */
  --display:'Archivo','Bahnschrift Condensed','Bahnschrift',
            'Franklin Gothic Demi Cond','Arial Narrow',sans-serif;
  --corpo:'Archivo','Bahnschrift','Segoe UI',system-ui,sans-serif;
  --mono:'Cascadia Mono','Consolas','SF Mono','Courier New',monospace;

  /* medidas */
  --max:1240px;
  --gut:clamp(20px,4.4vw,56px);
  --secao:clamp(64px,9vw,132px);
  --ease:cubic-bezier(.22,.68,.34,1);
  --cabecalho:64px;
}

/* ----------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--corpo);
  font-variation-settings:'wght' 380,'wdth' 100;
  font-size:clamp(15px,1.05vw,17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* foco visível — obrigatório para quem navega por teclado */
:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

/* pular para o conteúdo (leitor de tela / teclado) */
.pular{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ciano);color:#04222e;padding:12px 20px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}
.pular:focus{left:0}

/* ------------------------------------------------------- fundo / motivo -- */
/* A grade é o motivo gráfico da marca: a logo é um cérebro construído em
   pixels, e a grade estende esse princípio ao layout inteiro. Fica fixa
   enquanto o conteúdo rola — é o que dá a leitura de painel. */
.grade{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(38,48,63,.30) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(38,48,63,.30) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 130% 80% at 50% 22%,#000 25%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 130% 80% at 50% 22%,#000 25%,transparent 80%);
}
.brilho{
  position:fixed;z-index:0;pointer-events:none;
  width:92vw;height:92vw;max-width:1500px;max-height:1500px;
  left:50%;top:-34vw;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(10,190,249,.11) 0%,transparent 62%);
  animation:deriva 26s ease-in-out infinite alternate;
}
@keyframes deriva{
  from{transform:translateX(-56%) translateY(-2vw) scale(1)}
  to  {transform:translateX(-44%) translateY(3vw) scale(1.12)}
}

/* barra fina de progresso de leitura, no topo absoluto da tela */
.progresso{
  position:fixed;left:0;top:0;height:2px;width:0;z-index:60;
  background:var(--ciano);box-shadow:0 0 10px var(--ciano-med);
  transition:width .12s linear;
}

/* ---------------------------------------------------------------- layout -- */
.env{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
main{position:relative;z-index:1}
.secao{padding-block:var(--secao);position:relative}
.secao + .secao{border-top:1px solid var(--linha)}

/* ------------------------------------------------------------ cabeçalho -- */
.cabecalho{
  position:sticky;top:0;z-index:50;
  height:var(--cabecalho);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  background:rgba(10,13,18,0);
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.cabecalho.preso{
  background:rgba(10,13,18,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--linha);
}
.cabecalho .env{display:flex;align-items:center;gap:clamp(16px,3vw,44px)}

.marca-topo{flex:none;display:block}
.marca-topo img{width:clamp(112px,12vw,148px);height:auto}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)}
.nav a{
  font-family:var(--mono);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-2);
  padding:6px 0;position:relative;
  transition:color .22s ease;
}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ciano);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover{color:var(--txt)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ciano)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

.nav .cta{
  border:1px solid var(--ciano-med);color:var(--ciano);
  padding:8px 16px;
  transition:background .22s ease,border-color .22s ease;
}
.nav .cta::after{display:none}
.nav .cta:hover{background:var(--ciano-fraco);border-color:var(--ciano);color:var(--ciano)}

/* botão de menu no celular */
.menu-bt{
  display:none;margin-left:auto;
  width:40px;height:40px;border:1px solid var(--linha);
  align-items:center;justify-content:center;
}
.menu-bt span{display:block;width:17px;height:1.5px;background:var(--txt);position:relative;transition:background .2s}
.menu-bt span::before,.menu-bt span::after{
  content:'';position:absolute;left:0;width:17px;height:1.5px;background:var(--txt);
  transition:transform .28s var(--ease);
}
.menu-bt span::before{top:-5.5px}
.menu-bt span::after{top:5.5px}
.menu-bt[aria-expanded="true"] span{background:transparent}
.menu-bt[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.menu-bt[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

/* ------------------------------------------------------------ tipografia -- */
.rotulo{
  font-family:var(--mono);
  font-size:clamp(10px,.8vw,11.5px);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ciano);
  display:flex;align-items:flex-start;gap:11px;
  line-height:1.5;
  margin-bottom:clamp(16px,2vw,26px);
}
/* O marcador se alinha à PRIMEIRA linha, não ao centro do bloco: em tela
   estreita o rótulo quebra em duas linhas e, centralizado, o quadradinho
   ficava boiando no meio. Com a conta abaixo ele cai no centro óptico da
   primeira linha em qualquer tamanho de fonte, e o rótulo de uma linha
   (a maioria) fica idêntico ao que era. */
.rotulo::before{
  content:'';width:9px;height:9px;background:var(--ciano);flex:none;
  margin-top:calc((1.5em - 9px) / 2);
}

h1,h2,h3,h4{font-family:var(--display);text-transform:uppercase;text-wrap:balance}

h1{
  font-variation-settings:'wght' 640,'wdth' 78;
  font-size:clamp(37px,7.2vw,104px);
  line-height:.92;letter-spacing:-.02em;
}
h2{
  font-variation-settings:'wght' 620,'wdth' 78;
  font-size:clamp(27px,3.9vw,58px);
  line-height:1;letter-spacing:-.014em;
  margin-bottom:clamp(14px,1.8vw,24px);
}
h3{
  font-variation-settings:'wght' 620,'wdth' 84;
  font-size:clamp(17px,1.75vw,26px);
  line-height:1.14;letter-spacing:-.004em;
  margin-bottom:.5em;
}
/* Não existe <h4> solto no site: todo sub-heading vem logo depois de um <h2>
   de seção, sem <h3> no meio — então o nível certo é h3, não h4 (pular nível
   de heading é falha real de acessibilidade, não só estilo). Os três lugares
   que precisam desse tamanho menor pedem a marcação explicitamente, cada um
   com a classe do pai — não existe mais regra para a tag h4 sozinha. */
.area h3,.cartao h3,.rodape-col h2{
  font-variation-settings:'wght' 620,'wdth' 88;
  font-size:clamp(14.5px,1.3vw,19px);
  line-height:1.2;margin-bottom:.4em;
}
h1 em,h2 em,h3 em{font-style:normal;color:var(--ciano)}
h1 span.linha{display:block}

strong,b{font-variation-settings:'wght' 620,'wdth' 100;color:var(--txt)}

.chamada{
  font-size:clamp(16px,1.5vw,22px);
  line-height:1.55;color:var(--txt-2);
  max-width:60ch;
}
.texto{color:var(--txt-2);max-width:68ch}
.texto p + p{margin-top:1.05em}
.texto a:not(.bt){
  color:var(--ciano);
  border-bottom:1px solid var(--ciano-med);
  transition:border-color .2s;
}
.texto a:not(.bt):hover{border-bottom-color:var(--ciano)}

.nota{
  font-family:var(--mono);font-size:clamp(10.5px,.85vw,12.5px);
  color:var(--txt-3);letter-spacing:.06em;line-height:1.7;
}

/* ---------------------------------------------------------------- botões -- */
.bt{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;
  padding:14px 24px;border:1px solid var(--linha);
  color:var(--txt);position:relative;overflow:hidden;
  transition:border-color .25s ease,color .25s ease;
}
.bt::before{
  content:'';position:absolute;inset:0;background:var(--ciano);
  transform:scaleX(0);transform-origin:left;z-index:-1;
  transition:transform .34s var(--ease);
}
.bt > *{position:relative}
.bt .seta{transition:transform .3s var(--ease)}
.bt:hover{border-color:var(--ciano);color:var(--ciano)}
.bt:hover .seta{transform:translateX(4px)}

.bt.forte{background:var(--ciano);border-color:var(--ciano);color:#04222e;font-variation-settings:'wght' 600}
.bt.forte:hover{background:var(--ciano-esc);border-color:var(--ciano-esc);color:#04222e}
.bt.forte:hover .seta{transform:translateX(4px)}

.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,40px)}

/* --------------------------------------------------------------- cartões -- */
.cartao{
  background:var(--surf);border:1px solid var(--linha);
  padding:clamp(18px,2.1vw,32px);
  position:relative;
  transition:border-color .28s ease,transform .28s var(--ease),background .28s ease;
}
/* fio ciano na borda esquerda, que cresce quando o bloco entra na tela */
.cartao::after{
  content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;
  background:var(--ciano);transform:scaleY(0);transform-origin:top;
  transition:transform .55s var(--ease) .15s;
}
.visivel .cartao::after,.cartao.visivel::after{transform:scaleY(1)}

/* background-color, e não o atalho background: o atalho apagaria as
   cantoneiras de .cantos, que são desenhadas como background-image */
a.cartao:hover,.cartao.ativo{border-color:var(--ciano-med);transform:translateY(-3px);background-color:var(--surf-2)}

/* Cantoneiras — enquadramento de instrumento.
   Desenhadas com background-image, e não com ::before/::after, porque .cartao
   já usa o ::after para o fio ciano da borda esquerda. Duas regras disputando
   o mesmo pseudo-elemento fazem a última ganhar em silêncio: as cantoneiras
   apagavam o fio sem dar nenhum sinal de erro. */
.cantos{
  background-image:
    linear-gradient(var(--cant),var(--cant)), linear-gradient(var(--cant),var(--cant)),
    linear-gradient(var(--cant),var(--cant)), linear-gradient(var(--cant),var(--cant));
  background-repeat:no-repeat;
  background-position:
    10px 10px, 10px 10px,
    calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
  background-size:12px 1px, 1px 12px, 12px 1px, 1px 12px;
  transition:background-position .3s var(--ease),border-color .28s ease,
             transform .28s var(--ease),background-color .28s ease;
}
a.cantos:hover{background-position:14px 14px,14px 14px,calc(100% - 14px) calc(100% - 14px),calc(100% - 14px) calc(100% - 14px)}

/* ======================================================== CARTÃO DE PRODUTO ==
   O cartão tem duas partes: a capa (desenho) e o corpo (texto). A capa é SVG
   desenhado à mão, não imagem — pesa alguns KB, fica nítida em qualquer tela,
   anima, e continua editável. Cada produto tem um desenho próprio que diz o
   que ele faz antes de a pessoa ler qualquer palavra.
   ============================================================================ */
.prods{display:grid;gap:clamp(12px,1.5vw,22px);grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.prods{grid-template-columns:1fr}}

.prod{
  display:flex;flex-direction:column;
  background:var(--surf);border:1px solid var(--linha);
  position:relative;overflow:hidden;
  transition:border-color .3s ease,transform .3s var(--ease),background-color .3s ease;
}
.prod::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;z-index:3;
  background:var(--ciano);transform:scaleY(0);transform-origin:top;
  transition:transform .6s var(--ease) .2s;
}
.visivel .prod::after{transform:scaleY(1)}
.prod:hover{border-color:var(--ciano-med);transform:translateY(-4px);background-color:var(--surf-2)}

/* ---- a capa ---- */
.capa{
  position:relative;aspect-ratio:16/9;
  background:linear-gradient(160deg,var(--bg-2),#0c1017);
  border-bottom:1px solid var(--linha);overflow:hidden;
}
.capa svg{position:absolute;inset:0;width:100%;height:100%}
/* grade de pixels dentro da capa: o mesmo motivo da marca, em escala menor */
.capa::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(to right,rgba(38,48,63,.5) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(38,48,63,.5) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,#000 20%,transparent 75%);
}

/* traços comuns aos quatro desenhos */
.cx-b{fill:none;stroke:var(--cor,var(--linha));stroke-width:1.5}
.cx-l{fill:none;stroke:var(--cor,var(--txt-3));stroke-width:1.5;stroke-linecap:round;opacity:.75}
.cx-f{fill:var(--cor,var(--surf-2))}
.cx-c{fill:none;stroke:var(--ciano);stroke-width:1.5}

/* ---- o corpo ---- */
.prod-corpo{padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;flex:1}
.selo{
  /* inline-block para funcionar tanto dentro de um cartão em flex (home)
     quanto solto num bloco comum (abertura da página de produto) */
  display:inline-block;align-self:flex-start;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px;margin-bottom:clamp(12px,1.4vw,18px);
}
.selo.ativo{background:rgba(61,220,132,.13);color:var(--verde)}
.selo.andando{background:var(--ciano-fraco);color:var(--ciano)}
.selo.projeto{background:rgba(154,166,184,.1);color:var(--txt-3)}
/* h3 na home (vêm depois de um h2 de seção) e h2 no hub de produtos (onde
   cada produto é item de primeiro nível). Mesmo tamanho nos dois casos. */
.prod-corpo h3,.prod-corpo h2{font-size:clamp(19px,2.1vw,31px);line-height:1.14;letter-spacing:-.004em;margin-bottom:.42em}
.prod-corpo p{color:var(--txt-2);flex:1;font-size:clamp(14px,1.05vw,16.5px);line-height:1.55}
.prod-ver{
  margin-top:clamp(16px,1.8vw,24px);
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ciano);display:inline-flex;align-items:center;gap:9px;
}
.prod-ver .seta{transition:transform .3s var(--ease)}
.prod:hover .prod-ver .seta{transform:translateX(5px)}

/* ============================ movimento das capas ==========================
   Só roda quando o cartão entra na tela — animação em quatro desenhos ao
   mesmo tempo, o tempo todo, é ruído e gasta bateria à toa. */
.prod .capa [class*="an-"]{animation-play-state:paused}
.visivel .prod .capa [class*="an-"]{animation-play-state:running}

/* varredura: passa pelos documentos como um leitor conferindo a prateleira */
.an-varre{animation:varre 5s linear infinite}
@keyframes varre{0%{transform:translateX(-60px)}55%,100%{transform:translateX(340px)}}

/* pulso do documento que está vencendo */
.an-alerta{animation:alerta 2.6s ease-in-out infinite}
@keyframes alerta{0%,100%{opacity:.35}50%{opacity:1}}

/* anel de contagem — desenha e some, como prazo correndo */
/* 157 = circunferência do anel de raio 25, que é o que envolve um documento */
.an-anel{stroke-dasharray:157;stroke-dashoffset:157;animation:anel 2.6s ease-in-out infinite}
@keyframes anel{0%{stroke-dashoffset:157}55%,100%{stroke-dashoffset:24}}

/* pulso viajando por um fio */
.an-fio{stroke-dasharray:14 300;stroke-dashoffset:14;animation:fio 2.8s ease-in-out infinite}
@keyframes fio{to{stroke-dashoffset:-300}}
.an-fio.d1{animation-delay:.25s}
.an-fio.d2{animation-delay:.5s}
.an-fio.d3{animation-delay:.75s}

/* peças de saída acendendo em sequência */
.an-saida{animation:saida 2.8s ease-in-out infinite}
.an-saida.d1{animation-delay:.25s}
.an-saida.d2{animation-delay:.5s}
@keyframes saida{0%,42%{opacity:.3}60%,100%{opacity:1}}

/* foto em destaque respirando dentro da moldura */
.an-foco{transform-origin:center;animation:foco 6s ease-in-out infinite alternate}
@keyframes foco{from{transform:scale(1)}to{transform:scale(1.07)}}
.an-mira{animation:mira 3.4s ease-in-out infinite}
@keyframes mira{0%,100%{opacity:.45}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .capa [class*="an-"]{animation:none!important;opacity:1!important;stroke-dashoffset:16!important}
}

/* ==================================================== PÁGINA DE PRODUTO ==== */
/* abertura: texto de um lado, o mesmo desenho da home do outro */
.pp-topo{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4vw,64px);align-items:center;
}
.pp-topo h1{font-size:clamp(34px,5.6vw,80px);margin-bottom:clamp(14px,1.8vw,24px)}
.pp-topo .capa{border:1px solid var(--linha)}
@media (max-width:820px){
  .pp-topo{grid-template-columns:1fr;gap:clamp(24px,4vw,38px)}
  .pp-topo .capa{order:-1}
}

/* bloco de área: quem usa e para quê */
.areas{display:grid;gap:clamp(11px,1.3vw,18px);grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
.area{background:var(--surf);border:1px solid var(--linha);padding:clamp(15px,1.7vw,24px)}
.area h3{color:var(--ciano);margin-bottom:.45em}
.area p{color:var(--txt-2);font-size:clamp(13.5px,1vw,15.5px);line-height:1.5}

/* passos numerados */
.passos{counter-reset:p;display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px)}
.passo{
  display:flex;gap:clamp(14px,1.7vw,26px);align-items:flex-start;counter-increment:p;
  background:var(--surf);border:1px solid var(--linha);border-left:3px solid var(--ciano);
  padding:clamp(14px,1.6vw,24px) clamp(16px,1.9vw,30px);
}
.passo::before{
  content:counter(p,decimal-leading-zero);
  font-family:var(--mono);font-size:clamp(14px,1.4vw,21px);color:var(--ciano);flex:none;padding-top:.1em;
}
.passo p{color:var(--txt-2)}
.passo b{color:var(--txt);font-variation-settings:'wght' 620}

/* "o que ele não faz" — honestidade em bloco próprio, marcador neutro e um
   fio âmbar na borda, para não parecer que é mais uma lista de recurso */
.limites{background:var(--surf);border:1px solid var(--linha);border-left:3px solid var(--ambar);padding:clamp(18px,2.1vw,32px)}
.limites li{position:relative;padding-left:1.5em;margin-bottom:.85em;color:var(--txt-2);line-height:1.5}
.limites li:last-child{margin-bottom:0}
.limites li::before{content:'—';position:absolute;left:0;color:var(--ambar);font-family:var(--mono)}
.limites li b{color:var(--txt);font-variation-settings:'wght' 620}

/* fecho de página */
.fecho{text-align:center}
.fecho .rotulo{justify-content:center}
.fecho h2{max-width:22ch;margin-inline:auto}
.fecho .chamada{margin-inline:auto}
.fecho .acoes{justify-content:center}

/* ============================================================== FERRAMENTAS ==
   Cartão mais leve que o de produto, e de propósito: as capas desenhadas
   ficam reservadas ao que se contrata. Aqui a natureza é outra — é prova de
   repertório, com o código aberto para leitura. */
.ferrs{display:grid;gap:clamp(12px,1.5vw,22px);grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.ferrs{grid-template-columns:1fr}}

.ferr{
  background:var(--surf);border:1px solid var(--linha);
  padding:clamp(20px,2.3vw,34px);
  display:flex;flex-direction:column;position:relative;
  transition:border-color .28s ease,transform .28s var(--ease),background-color .28s ease;
}
.ferr::after{
  content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;
  background:var(--ciano);transform:scaleY(0);transform-origin:top;
  transition:transform .6s var(--ease) .18s;
}
.visivel .ferr::after{transform:scaleY(1)}
.ferr:hover{border-color:var(--ciano-med);transform:translateY(-3px);background-color:var(--surf-2)}

.ferr-topo{margin-bottom:clamp(12px,1.4vw,18px)}
/* h2 e não h3: cada ferramenta é uma seção de primeiro nível dentro da
   página, e pular de h1 direto para h3 é falha de acessibilidade. O tamanho
   volta ao de cartão aqui. */
.ferr-topo h2{font-size:clamp(18px,1.95vw,27px);line-height:1.14;letter-spacing:-.004em;margin-bottom:.5em}

.etiqs{display:flex;flex-wrap:wrap;gap:6px}
.etiq{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-3);border:1px solid var(--linha);padding:4px 8px;
}

.ferr-res{color:var(--txt-2);font-size:clamp(14px,1.05vw,16.5px);line-height:1.55}
.ferr-fatos{margin-top:clamp(14px,1.6vw,22px);flex:1}
.ferr-fatos li{font-size:clamp(13px,.98vw,15px);line-height:1.5}
.ferr-bt{margin-top:clamp(18px,2vw,26px);align-self:flex-start}

/* ============================================================== FORMULÁRIO ==
   Não existe backend no site — é HTML/CSS/JS puro, de propósito. O "envio"
   monta um e-mail pronto (assunto e corpo preenchidos) e abre o programa de
   e-mail da própria pessoa. Zero servidor para manter, zero serviço de
   terceiro, zero coisa a mais para dar suporte. */
.form{display:flex;flex-direction:column;gap:clamp(14px,1.7vw,22px);max-width:60ch}
.campo{display:flex;flex-direction:column;gap:8px}
.campo label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-3);
}
.campo input,.campo textarea{
  background:var(--surf);border:1px solid var(--linha);color:var(--txt);
  font-family:var(--corpo);font-size:15px;padding:13px 15px;
  transition:border-color .2s ease,background-color .2s ease;
}
.campo textarea{resize:vertical;min-height:130px;line-height:1.5}
.campo input::placeholder,.campo textarea::placeholder{color:var(--txt-3)}
.campo input:focus,.campo textarea:focus{border-color:var(--ciano);background:var(--surf-2);outline:none}
.form .bt{align-self:flex-start;border:none}
.form-aviso{
  font-family:var(--mono);font-size:11.5px;color:var(--verde);letter-spacing:.04em;
  opacity:0;transition:opacity .3s ease;
}
.form-aviso.mostra{opacity:1}

/* ---------------------------------------------------------------- grades -- */
.grid{display:grid;gap:clamp(12px,1.5vw,22px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}

/* --------------------------------------------------------------- números -- */
.stats{display:grid;gap:clamp(10px,1.2vw,18px);grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.stat{background:var(--surf);border:1px solid var(--linha);padding:clamp(15px,1.7vw,26px);position:relative;overflow:hidden}
.stat::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ciano);
  transform:scaleY(0);transform-origin:top;transition:transform .5s ease .2s;
}
.visivel .stat::after{transform:scaleY(1)}
.stat .n{
  font-family:var(--display);font-variation-settings:'wght' 640,'wdth' 76;
  font-size:clamp(32px,4.2vw,64px);line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat .n.ac{color:var(--ciano)}
.stat .n.al{color:var(--ambar)}
.stat .n.ok{color:var(--verde)}
.stat .r{
  font-family:var(--mono);font-size:clamp(9.5px,.76vw,11px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);
  margin-top:8px;line-height:1.45;
}

/* --------------------------------------------------------------- listas -- */
.marcada li{
  position:relative;padding-left:1.45em;margin-bottom:.6em;
  color:var(--txt-2);line-height:1.5;
}
.marcada li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--ciano)}
.marcada li:last-child{margin-bottom:0}
.marcada.neutra li::before{background:var(--txt-3)}

/* linhas de dado, estilo régua técnica */
.dados{border-top:1px solid var(--linha)}
.dados div{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--linha);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;
}
.dados dt,.dados .k{color:var(--txt-3);text-transform:uppercase;letter-spacing:.13em;font-size:10.5px}
.dados dd,.dados .v{color:var(--txt-2);text-align:right}

/* ---------------------------------------------------------------- rodapé -- */
.rodape{
  position:relative;z-index:1;
  border-top:1px solid var(--linha);
  padding-block:clamp(44px,5.5vw,76px) clamp(24px,3vw,38px);
  background:linear-gradient(to bottom,transparent,rgba(17,23,34,.7));
}
.rodape-topo{
  display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(220px,1.3fr) repeat(auto-fit,minmax(140px,1fr));
  padding-bottom:clamp(30px,4vw,52px);
}
.rodape .marca-pe img{width:clamp(128px,14vw,168px);opacity:.92}
.rodape-col h2{
  font-family:var(--mono);font-variation-settings:'wght' 400;
  font-size:10.5px;letter-spacing:.2em;color:var(--txt-3);
  text-transform:uppercase;margin-bottom:14px;line-height:1.2;
}
.rodape-col li{margin-bottom:9px}
.rodape-col a{color:var(--txt-2);font-size:14.5px;transition:color .2s}
.rodape-col a:hover{color:var(--ciano)}
.rodape-baixo{
  border-top:1px solid var(--linha);padding-top:clamp(18px,2vw,26px);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-3);
}

/* ============================================================== MOVIMENTO ==
   Regra da marca: "movimento tem de ler como competência, não como
   brinquedo". Entradas de 400–600 ms, nada de quicar, nada de girar.
   =========================================================================== */

/* Transição entre páginas. Onde o navegador suporta (Chrome, Edge, Safari),
   a troca de página vira um esmaecimento curto em vez de um piscar branco.
   Onde não suporta (Firefox hoje), navega normal — não quebra nada. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s}

/* revelação ao rolar — o JS troca [data-revela] por .visivel */
[data-revela]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-revela].visivel{opacity:1;transform:none}
[data-revela][data-atraso="1"]{transition-delay:.08s}
[data-revela][data-atraso="2"]{transition-delay:.16s}
[data-revela][data-atraso="3"]{transition-delay:.24s}
[data-revela][data-atraso="4"]{transition-delay:.32s}
[data-revela][data-atraso="5"]{transition-delay:.40s}

/* cascata automática nos filhos diretos de um bloco marcado */
[data-cascata]>*{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-cascata].visivel>*{opacity:1;transform:none}
[data-cascata].visivel>*:nth-child(1){transition-delay:.04s}
[data-cascata].visivel>*:nth-child(2){transition-delay:.11s}
[data-cascata].visivel>*:nth-child(3){transition-delay:.18s}
[data-cascata].visivel>*:nth-child(4){transition-delay:.25s}
[data-cascata].visivel>*:nth-child(5){transition-delay:.32s}
[data-cascata].visivel>*:nth-child(6){transition-delay:.39s}
[data-cascata].visivel>*:nth-child(7){transition-delay:.46s}
[data-cascata].visivel>*:nth-child(8){transition-delay:.53s}

/* ------------------------------------------------------ marca / cérebro -- */
/* O cérebro da logo é feito de 40 elementos — ele é literalmente construído
   em pixels. A abertura monta esses pixels em onda, o que amarra o movimento
   ao símbolo em vez de ser animação decorativa solta. */
/* Abertura. O cabeçalho já carrega a assinatura completa, então aqui entra só
   o cérebro — que é a parte memorável da marca — como elemento gráfico. */
.heroi{padding-block:clamp(56px,8.5vw,116px) clamp(60px,9vw,124px);overflow:hidden}
/* 1.35 / .65 e não meio a meio: a segunda linha do título ("a problema real")
   tem 15 caracteres e, numa coluna estreita, quebrava deixando "REAL" órfão
   numa terceira linha. Alargar a coluna resolve sem encolher o título. */
.heroi-env{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(28px,4.5vw,72px);align-items:center;
}
.heroi h1{margin-bottom:clamp(18px,2.2vw,30px)}
.heroi-marca{position:relative;justify-self:center;width:min(100%,420px)}
.heroi-marca svg{width:100%;height:auto;position:relative;z-index:1}
/* halo ciano atrás do cérebro — dá profundidade sem virar enfeite */
.heroi-marca::before{
  content:'';position:absolute;inset:-22% -18%;z-index:0;
  background:radial-gradient(circle,rgba(10,190,249,.16) 0%,transparent 66%);
}
@media (max-width:820px){
  .heroi-env{grid-template-columns:1fr;gap:clamp(26px,5vw,44px)}
  .heroi-marca{width:min(58vw,260px);justify-self:start;order:-1}
}

.anima-marca .m-cerebro>*{animation:pixel .52s var(--ease) backwards}
.anima-marca .m-cerebro>*:nth-child(-n+5)                       {animation-delay:.10s}
.anima-marca .m-cerebro>*:nth-child(n+6):nth-child(-n+10)       {animation-delay:.16s}
.anima-marca .m-cerebro>*:nth-child(n+11):nth-child(-n+15)      {animation-delay:.22s}
.anima-marca .m-cerebro>*:nth-child(n+16):nth-child(-n+20)      {animation-delay:.28s}
.anima-marca .m-cerebro>*:nth-child(n+21):nth-child(-n+25)      {animation-delay:.34s}
.anima-marca .m-cerebro>*:nth-child(n+26):nth-child(-n+30)      {animation-delay:.40s}
.anima-marca .m-cerebro>*:nth-child(n+31):nth-child(-n+35)      {animation-delay:.46s}
.anima-marca .m-cerebro>*:nth-child(n+36)                       {animation-delay:.52s}
@keyframes pixel{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ responsivo -- */
@media (max-width:900px){
  /* 4 itens em 2 colunas fecham certinho (2×2). Já 3 itens em 2 colunas deixam
     um órfão sozinho na segunda linha — por isso o bloco de 3 desce direto
     para 1 coluna, e só mais tarde. */
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .grid-3{grid-template-columns:1fr}
}
/* 900px e não 760px: com cinco itens o menu horizontal precisa de 846px
   (logo 148 + itens 548 + gaps + margens). Abaixo disso ele encavalava na
   logo — media, com o hambúrguer entrando só em 760, ficava quebrado entre
   761 e 845. Se um item novo entrar no menu, refazer essa conta. */
@media (max-width:900px){
  .menu-bt{display:flex}
  .nav{
    position:fixed;inset:var(--cabecalho) 0 auto 0;
    margin:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(10,13,18,.97);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--linha);
    padding:8px var(--gut) 22px;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .26s ease,transform .26s var(--ease),visibility .26s;
  }
  .nav.aberto{transform:none;opacity:1;visibility:visible}
  .nav a{padding:15px 0;border-bottom:1px solid var(--linha);font-size:13px}
  .nav a::after{display:none}
  .nav .cta{margin-top:16px;justify-content:center;display:flex;border-bottom:1px solid var(--ciano-med)}
}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .rodape-topo{grid-template-columns:1fr;gap:30px}
}

/* -------------------------------------------------------- acessibilidade -- */
/* Trava obrigatória: quem ligou "reduzir movimento" no sistema recebe o site
   inteiro parado e legível. Nada pode depender de animação para aparecer. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-revela],[data-cascata]>*{opacity:1!important;transform:none!important}
  .brilho{animation:none}
}

/* Sem JavaScript o conteúdo tem de aparecer do mesmo jeito. O <html> começa
   com a classe "js" aplicada pelo próprio script; sem ela, nada some. */
html:not(.js) [data-revela],
html:not(.js) [data-cascata]>*{opacity:1;transform:none}
html:not(.js) .nav{position:static;opacity:1;visibility:visible;transform:none}