/* =============================================================================
   PIXEL — site
   ---------------------------------------------------------------------------
   Uma página só. O logo é um "P" que se desfaz em quadrados; a página inteira
   é feita desses quadrados — um tecido em WebGL atrás de tudo, denso na
   abertura e discreto no meio do texto.

   Tema claro e assumido: o produto que a pagina vende e uma ferramenta de
   trabalho, e ferramenta de trabalho se usa de dia. O tecido de quadrados
   atras do texto continua colorido, mas com muito menos peso — sobre branco,
   a mesma opacidade que era discreta no escuro vira ruido em cima da leitura.
   Tudo aqui e pintado a mao, sem herdar nada do navegador.
   ============================================================================= */

:root {
  /* No escuro, um cartao se separava do fundo so por ser mais claro. Sobre
     branco isso nao existe: e a sombra que diz "isto esta por cima". */
  --sombra:      0 1px 2px rgba(20, 22, 48, 0.04),
                 0 10px 30px -14px rgba(20, 22, 48, 0.14);
  --sombra-alta: 0 2px 6px rgba(20, 22, 48, 0.06),
                 0 22px 50px -18px rgba(20, 22, 48, 0.20);

  --fundo:       #FFFFFF;
  --fundo-2:     #F6F7FB;
  --superficie:  #FFFFFF;
  --linha:       #E6E8F0;
  --linha-forte: #C9CEDE;

  /* O quase-preto tem um pingo de azul: preto puro sobre branco vibra, e a
     marca inteira caminha para o azul. */
  --tinta:       #14141C;
  --tinta-2:     #5A5E70;
  --tinta-3:     #656A7E;

  /* O ciano da marca some sobre branco; para texto e traco entra a versao
     puxada para baixo, e o ciano original fica so no degrade e no tecido, onde
     ele aparece em area cheia. */
  --ciano:       #0E9BC4;
  /* O mesmo ciano so que legivel: sobre branco o da marca da 3,2:1, e etiqueta
     miuda precisa de 4,5. O de cima segue no traco e no degrade, onde ele
     aparece em area cheia e nao precisa ser lido letra a letra. */
  --ciano-texto: #087DAC;
  --ciano-vivo:  #22C9F5;
  --azul:        #4B57F0;
  --violeta:     #9B3DF0;
  --degrade:     linear-gradient(120deg, #22C9F5 0%, #4B57F0 52%, #9B3DF0 100%);

  --ui: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
        "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --coluna: 1180px;
  --margem: clamp(20px, 4vw, 46px);
  --tom-ramo: var(--azul);
  --entrada: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; }

/* O tecido vive atrás da página toda; a intensidade é o scroll que decide. */
#tecido {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}
header, main, footer, .fecho { position: relative; z-index: 1; }

/* Cursor próprio: um quadradinho, porque a marca é um pixel. */
.cursor {
  position: fixed; z-index: 90; top: 0; left: 0;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border: 1px solid var(--azul);
  pointer-events: none; opacity: 0;
  transition: opacity 300ms ease, width 240ms var(--entrada),
              height 240ms var(--entrada), margin 240ms var(--entrada),
              background 240ms ease;
}
.cursor.vivo { opacity: 1; }
.cursor.grande {
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  background: rgba(75, 87, 240, 0.12);
}
@media (hover: none) { .cursor { display: none; } }

/* =============================================================================
   Tipografia
   ============================================================================= */
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.042em; }

h1 {
  font-size: clamp(42px, 8vw, 116px);
  line-height: 0.95; font-weight: 700; letter-spacing: -0.052em;
}
/* A mascara que segura a linha ate ela subir corta tudo o que sai da caixa, e
   com `line-height: 0.95` o que sai e o rabo das letras descendentes: o "g" de
   "lugar" perdia a perna e virava um "q" na tela. O respiro entra na mascara
   pelo `padding` e sai do layout pelo `margin` negativo do mesmo tamanho, entao
   o descendente aparece inteiro sem abrir espaco entre as linhas do titulo. */
h1 .linha {
  display: block; overflow: hidden;
  padding-bottom: .32em; margin-bottom: -.32em;
}
h1 .linha i {
  display: block; font-style: normal;
  transform: translateY(105%);
  transition: transform 1s var(--entrada);
}
h1.visivel .linha i { transform: translateY(0); }
h1 .linha:nth-child(2) i { transition-delay: 90ms; }
h1 .linha:nth-child(3) i { transition-delay: 180ms; }

h2 { font-size: clamp(30px, 4.6vw, 58px); line-height: 1.04; font-weight: 690; }
h3 { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.12; font-weight: 670; }

.destaque i, h2 em {
  font-style: normal;
  background: var(--degrade);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* O degrade e visto ATRAVES da letra: onde o fundo nao chega, a letra nao
     aparece. Com `line-height: 0.95` a caixa acaba acima do rabo do "g", e o
     rabo sumia — "lugar" lia-se "luqar", e nao adiantou abrir a mascara da
     linha porque a falta era de fundo, nao de espaco. O padding estica o fundo
     ate o descendente e o margin negativo devolve o espaco ao layout. */
  padding-bottom: .32em; margin-bottom: -.32em;
}

.fio {
  color: var(--tinta-2); max-width: 56ch;
  font-size: clamp(15.5px, 1.35vw, 18.5px); line-height: 1.62;
}
.miudo { color: var(--tinta-3); font-size: 13px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.etiqueta {
  display: inline-block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3);
}
.etiqueta.acesa { color: var(--ciano-texto); }

/* =============================================================================
   Botões
   ============================================================================= */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border: 1px solid var(--linha-forte);
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: border-color 200ms ease, color 200ms ease, filter 200ms ease;
}
.botao:hover { border-color: var(--ciano-texto); color: var(--ciano-texto); }
.botao.principal {
  background: var(--degrade); border-color: transparent; color: #FFFFFF;
  font-weight: 680;
}
.botao.principal:hover { color: #FFFFFF; filter: brightness(1.06) saturate(1.1); }

/* =============================================================================
   Cabeçalho — logo no alto à direita
   ============================================================================= */
.cabeca {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px var(--margem);
  transition: background 400ms ease, backdrop-filter 400ms ease,
              border-color 400ms ease, padding 400ms var(--entrada);
  border-bottom: 1px solid transparent;
}
/* Pousado, o cabecalho encolhe: no alto da pagina o logo e o assunto, mas
   depois que a leitura comeca ele nao pode roubar meia tela. */
.cabeca.pousada { padding-top: 10px; padding-bottom: 10px; }
.cabeca.pousada .cabeca-logo img { height: 54px; }
/* só ganha fundo depois que a página rola: sobre o herói ele atrapalharia */
.cabeca.pousada {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linha);
}

/* O menu do topo.
   
   Era 11px em monoespacada de caixa alta, com .14em entre as letras e na cor
   apagada — quatro coisas que atrapalham a leitura somadas no mesmo lugar. A
   caixa alta ja tira o contorno da palavra (nao ha mais "perna" de p nem "haste"
   de l para o olho reconhecer), a monoespacada afasta as letras estreitas, e o
   espacamento largo separa ainda mais. Junto, o menu virava um borrao cinza.
   
   O que mudou: dois pontos maiores, o espacamento reduzido, mais peso, e a cor
   forte. A monoespacada de caixa alta fica — e a voz do site, aparece na
   etiqueta de cada secao e no botao de entrar. */
.cabeca-links { display: flex; gap: 26px; margin-left: 18px; }
.cabeca-links a {
  position: relative;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta); opacity: .72;
  transition: opacity 200ms ease, color 200ms ease;
}
.cabeca-links a:hover, .cabeca-links a.ativo { opacity: 1; color: var(--tinta); }

/* O tracinho diz onde a pessoa esta sem precisar comparar tons de cinza. */
.cabeca-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--ciano); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--entrada, cubic-bezier(0.16, 1, 0.3, 1));
}
.cabeca-links a:hover::after, .cabeca-links a.ativo::after { transform: scaleX(1); }
.cabeca-links a:focus-visible { outline: 2px solid var(--ciano); outline-offset: 4px; }

/* `margin-left: auto` empurra o "Entrar" para a direita mesmo quando os links
   do meio somem no celular. */
.cabeca-direita { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.entrar {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta);
  border: 1px solid var(--linha-forte); padding: 10px 18px;
  transition: border-color 200ms ease, color 200ms ease;
}
.entrar:hover { border-color: var(--ciano-texto); color: var(--ciano-texto); }

.cabeca-logo {
  display: block; line-height: 0;
  transition: transform 400ms var(--entrada), filter 400ms ease;
}
.cabeca-logo:hover { transform: scale(1.04); filter: saturate(1.15); }
/* Grande e sem moldura: sobre branco o logo ja tem fundo proprio, e o quadro
   que existia no tema escuro so servia para separa-lo do preto. */
.cabeca-logo img {
  width: auto; height: 96px; object-fit: contain; display: block;
}

/* =============================================================================
   Estrutura
   ============================================================================= */
main { max-width: var(--coluna); margin: 0 auto; padding: 0 var(--margem); }

.secao { padding: clamp(80px, 12vh, 130px) 0; border-top: 1px solid var(--linha); }
.secao-cabeca { display: grid; gap: 16px; margin-bottom: 52px; justify-items: start; }

/* faixa que sangra de ponta a ponta sem estourar a largura da página */
.sangra { position: relative; border-top: 0; }
.sangra::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw;
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(75, 87, 240, 0.10), transparent 70%),
    var(--fundo-2);
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
}

.revela {
  opacity: 0; transform: translateY(24px);
  transition: opacity 850ms var(--entrada), transform 850ms var(--entrada);
}
.revela.visivel { opacity: 1; transform: none; }

/* =============================================================================
   Herói
   ============================================================================= */
.heroi {
  min-height: 100svh; border-top: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 130px 0 40px; position: relative;
}
.heroi-texto { display: grid; gap: 26px; justify-items: start; }
.heroi-acoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* -----------------------------------------------------------------------------
   O video atras da abertura

   Ele e o FUNDO da abertura: cobre a secao inteira por igual, inclusive atras
   do titulo. A presenca dele e um numero so, a `opacity` do video: 30%. Foi
   descendo de 40% porque o video passa por trechos claros e por trechos com
   quadrados fortes, e nos fortes ele subia demais atras do paragrafo.

   Nao ha mais veu branco por cima. Ele existia para o video poder ser forte e
   o texto continuar limpo, mas nesta faixa ele so subtrairia o que se quer
   ver — para chegar a 30% depois de um veu de 40%, o video teria de ir a 50%,
   e o resultado e o mesmo com mais contas pelo caminho. Quem protege a leitura
   agora e a tinta do texto, nao um veu.

   O que sobrou dos degrades e so a borda: sem ela a secao terminaria num corte
   reto e apareceria uma linha atravessando a pagina no fim da abertura.

   Antes o veu era um degrade horizontal, branco quase cheio a esquerda para
   proteger o texto e fraco a direita. Protegia bem, mas ai o video nao era
   fundo de coisa nenhuma: era uma imagem no canto direito.

   O degrade que sobrou e o vertical, e ele nao existe por leitura — existe por
   BORDA. Sem ele a secao terminaria num corte reto e apareceria uma linha
   atravessando a pagina no fim do heroi; assim o video dissolve no branco
   antes de acabar. No topo o mesmo, para o cabecalho pousar em branco limpo.

   Quem pediu menos movimento no sistema nao ve video nenhum: e a preferencia
   do sistema operacional, e ela vale aqui como vale em qualquer animacao.
   ----------------------------------------------------------------------------- */
.heroi-video {
  position: absolute; z-index: 0;
  overflow: hidden; pointer-events: none;

  /* Sangra a largura toda, e nao a da coluna.
     O `main` e limitado a var(--coluna) e centrado, entao um `inset: 0` aqui
     dava ao video exatamente a largura do texto — e o video terminava em duas
     bordas verticais duras no meio da tela, com o branco da pagina de cada
     lado. Fundo com moldura nao e fundo. */
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100vw;
}
.heroi-video video {
  width: 100%; height: 100%; object-fit: cover;
  /* a dessaturacao tira o video da briga com o degrade da marca, que e quem
     deve puxar a cor da pagina */
  opacity: .30;
  filter: saturate(.85);
}
.heroi-video::after {
  content: ""; position: absolute; inset: 0;
  background:
    /* so as bordas dissolvendo no branco da pagina */
    linear-gradient(180deg,
      var(--fundo) 0%,
      rgba(255, 255, 255, 0) 14%,
      rgba(255, 255, 255, 0) 74%,
      var(--fundo) 100%);
}

/* o texto e o rodape do heroi por cima do video */
.heroi-texto, .heroi-rodape { position: relative; z-index: 1; }

/* O paragrafo da abertura e o unico texto corrido da pagina que cai sobre
   imagem, e nao sobre branco. No resto do site o cinza de `.fio` le bem porque
   o fundo e liso; aqui ele disputava com os quadrados claros do video e ficava
   lavado. Preto puro, e nao a `--tinta` (#14141C) do resto da pagina: sobre o
   video ate esse azulado de menos de 10% ja aparecia como desbotado. O cinza
   continua valendo em todos os outros paragrafos. */
.heroi-texto .fio { color: #000; }

/* Na tela estreita o texto ocupa a largura toda: nao sobra canto sem leitura
   para o video aparecer, e o veu horizontal teria de cobrir tudo. Entao ele
   sai — junto com os 3,6 MB, que no celular sao dados de alguem. */
@media (max-width: 760px) { .heroi-video { display: none; } }

@media (prefers-reduced-motion: reduce) { .heroi-video { display: none; } }

.heroi-rodape {
  position: absolute; left: 0; right: 0; bottom: 30px;
  display: flex; align-items: center; justify-content: space-between;
}
.descer {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2);
  transition: color 240ms ease;
}
.descer:hover { color: var(--tinta); }
.descer i {
  width: 40px; height: 1px; background: var(--tinta-3); display: block;
  transition: width 300ms var(--entrada), background 240ms ease;
}
.descer:hover i { width: 62px; background: var(--ciano); }
@media (hover: none) { .heroi-rodape .miudo { display: none; } }

/* =============================================================================
   Antes e depois
   ============================================================================= */
.dor {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 70px);
}
.dor-lado { display: grid; gap: 20px; align-content: start; }
.lista-dor { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.lista-dor li {
  font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.5;
  color: var(--tinta-3);
  padding-left: 24px; position: relative;
}
.lista-dor li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 9px; height: 2px; background: var(--linha-forte);
}
.dor-lado.bom .lista-dor li { color: var(--tinta); }
.dor-lado.bom .lista-dor li::before {
  top: 8px; width: 9px; height: 9px; background: var(--degrade);
}

/* =============================================================================
   Explorador de módulos
   ============================================================================= */
.explorador {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 1px; background: var(--linha);
  border: 1px solid var(--linha);
}

.modulos-lista {
  margin: 0; padding: 0; list-style: none;
  background: var(--fundo-2); display: grid; align-content: start;
}
.modulos-lista button {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 18px; border: 0; background: transparent;
  font-family: var(--ui); font-size: 15px; font-weight: 560;
  color: var(--tinta-3);
  transition: color 220ms ease, background 220ms ease, padding-left 300ms var(--entrada);
}
.modulos-lista button:hover { color: var(--tinta-2); }
.modulos-lista button[aria-selected="true"] {
  color: var(--tinta); background: var(--superficie);
  padding-left: 26px; font-weight: 640;
  box-shadow: inset 3px 0 0 var(--ciano);
}
.mn { font-family: var(--mono); font-size: 10.5px; color: var(--tinta-3); }

.modulo-palco {
  background: var(--fundo-2); padding: clamp(24px, 3.4vw, 42px);
  display: grid; gap: 26px; align-content: center; min-height: 380px;
}
.modulo-ficha { display: grid; gap: 12px; }
.modulo-indice { font-size: 11px; letter-spacing: .18em; color: var(--tinta-3); }
.modulo-ficha p { color: var(--tinta-2); font-size: clamp(15px, 1.3vw, 17px); max-width: 52ch; }

/* A tela de verdade do módulo.
 *
 * Aqui morava um ícone desenhado em pixels, que se montava quadrado a quadrado
 * a cada troca de aba. Era bonito e não dizia nada: quem chega quer ver o
 * sistema, não um desenho dele. As nove imagens são capturas do Pixel rodando,
 * com dados dentro.
 *
 * O `aspect-ratio` é o mesmo em que elas foram tiradas (1200x700). Fixá-lo
 * segura o espaço antes de a imagem chegar — sem ele o painel pula de altura
 * na primeira troca, e a lista de módulos ao lado pula junto.
 *
 * A borda de cima guarda a cor do módulo, que era do mosaico: é o que ainda
 * separa Atendimento de Financeiro num relance, agora que o desenho saiu.
 */
.modulo-tela {
  aspect-ratio: 1200 / 700;
  overflow: hidden;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--tom, var(--azul));
  box-shadow: var(--sombra);
  transition: border-top-color 380ms ease;
}
.modulo-tela img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity 300ms ease;
}
.modulo-tela img.pronta { opacity: 1; }

/* =============================================================================
   Corrente de automações
   ============================================================================= */
.corrente { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.elo {
  background: var(--fundo); padding: 20px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.elo-quando { font-size: clamp(15px, 1.4vw, 17px); flex: 1; min-width: 250px; }
.elo-quando b {
  font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3);
  margin-right: 8px;
}

/* a faísca que corre do gatilho para as ações */
.elo-linha { flex: none; width: 62px; height: 1px; background: var(--linha-forte); position: relative; }
.elo-linha i {
  position: absolute; top: -2px; left: 0;
  width: 5px; height: 5px; background: var(--ciano);
  animation: correr-faisca 2.6s var(--entrada) infinite;
}
.elo:nth-child(2) .elo-linha i { animation-delay: .35s; }
.elo:nth-child(3) .elo-linha i { animation-delay: .7s; }
.elo:nth-child(4) .elo-linha i { animation-delay: 1.05s; }
@keyframes correr-faisca {
  0%   { left: 0; opacity: 0; }
  15%  { opacity: 1; }
  70%  { left: calc(100% - 5px); opacity: 1; }
  85%, 100% { left: calc(100% - 5px); opacity: 0; }
}

.elo-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.pastilha {
  font-size: 13px; padding: 7px 13px;
  border: 1px solid var(--linha-forte); position: relative;
}
.pastilha::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px;
  width: 2px; background: var(--degrade);
}

.destaque-robo {
  margin-top: 44px;
  display: grid; grid-template-columns: 1fr minmax(0, 400px);
  gap: clamp(28px, 5vw, 56px); align-items: center;
  border: 1px solid var(--linha); background: var(--fundo); padding: clamp(24px, 3.4vw, 40px);
}
.destaque-robo > div:first-child { display: grid; gap: 14px; }
.conversa-exemplo { display: grid; gap: 8px; }
.bolha {
  font-size: 14px; line-height: 1.5; padding: 10px 14px; max-width: 90%;
  border: 1px solid var(--linha-forte);
}
.bolha.deles { justify-self: start; background: var(--superficie); }
.bolha.nossa {
  justify-self: end; border-color: transparent;
  background: var(--degrade); color: #FFFFFF; font-weight: 600;
}

/* =============================================================================
   Decisões e números
   ============================================================================= */
.decisoes {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--linha); border: 1px solid var(--linha);
}
.decisoes li {
  background: var(--fundo); padding: 26px 24px;
  display: grid; gap: 8px; align-content: start;
}
.dn { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: var(--ciano-texto); }
.decisoes b { font-size: 16.5px; font-weight: 650; letter-spacing: -0.02em; }
.decisoes p { color: var(--tinta-2); font-size: 14.5px; line-height: 1.55; }

.numeros {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--linha); border: 1px solid var(--linha);
}
.numeros > div { background: var(--fundo); padding: 24px 20px; display: grid; gap: 6px; }
.numeros b {
  font-size: clamp(34px, 4vw, 50px); font-weight: 700;
  letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums;
}
.numeros span {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-3);
}

/* =============================================================================
   A marca é do cliente
   ============================================================================= */
.marca-secao { --tom: #4B57F0; }

.paleta { display: flex; gap: 10px; margin-top: 6px; }
.tom {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  background: var(--tom); border: 1px solid var(--linha-forte);
  transition: transform 240ms var(--entrada), box-shadow 240ms ease;
}
.tom:hover { transform: translateY(-3px); }
.tom.ativo { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 3px var(--tinta); }

/* Uma maquete do produto, para a promessa do white-label ser vista e não lida. */
.simulacao { border: 1px solid var(--linha); background: #FAFAFC; color: #16141B; }
.sim-topo {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid #E3E0E8; background: #FFF;
}
.sim-logo {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  background: var(--tom); color: #fff; font-size: 12px; font-weight: 700;
  transition: background 400ms ease;
}
.sim-nome { display: grid; gap: 2px; margin-right: auto; }
.sim-nome b { font-size: 15px; font-weight: 660; }
.sim-nome span { font-size: 11px; color: #6C6675; font-family: var(--mono); }
.sim-botao {
  font-size: 11px; font-family: var(--mono); letter-spacing: .1em;
  text-transform: uppercase; padding: 7px 12px;
  background: var(--tom); color: #fff; transition: background 400ms ease;
}

.sim-corpo { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 14px; }
.sim-lado {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: #FFF; border: 1px solid #E3E0E8; padding: 10px; align-content: start;
}
.sim-app {
  aspect-ratio: 1; background: var(--tom); opacity: .22;
  transition: background 400ms ease;
}
.sim-app:nth-child(3n+1) { opacity: .5; }
.sim-app:nth-child(3n+2) { opacity: .34; }

.sim-painel {
  background: #FFF; border: 1px solid #E3E0E8; padding: 16px;
  display: grid; gap: 12px; align-content: start;
}
.sim-linha { height: 10px; background: #E9E7EE; width: 60%; }
.sim-linha.longa { height: 16px; width: 42%; background: var(--tom); transition: background 400ms ease; }
.sim-linha.curta { width: 30%; }
.sim-cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sim-cartoes span {
  height: 54px; background: #F1F0F4;
  border-left: 3px solid var(--tom); transition: border-color 400ms ease;
}

/* =============================================================================
   Planos
   ============================================================================= */
.planos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px; align-items: start;
}
.plano {
  border: 1px solid var(--linha); background: var(--superficie);
  padding: 30px 26px; display: grid; gap: 16px; position: relative;
  box-shadow: var(--sombra);
  transition: box-shadow 300ms ease, transform 300ms var(--entrada);
}
.plano:hover { box-shadow: var(--sombra-alta); transform: translateY(-3px); }
/* O escolhido flutua um pouco mais alto que os vizinhos mesmo parado: e assim
   que a tabela de precos diz qual e o do meio sem escrever nada. */
.plano.destaque {
  background:
    linear-gradient(var(--superficie), var(--superficie)) padding-box,
    var(--degrade) border-box;
  border: 1px solid transparent;
  box-shadow: var(--sombra-alta);
}
.fita {
  position: absolute; top: -1px; right: 20px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: #FFFFFF;
  background: var(--degrade); padding: 4px 10px;
}
.preco {
  font-size: 46px; font-weight: 700; letter-spacing: -0.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.preco span { font-size: 19px; font-weight: 600; color: var(--tinta-2); margin-right: 4px; }
.preco small { font-size: 13.5px; font-weight: 500; color: var(--tinta-3); letter-spacing: 0; }
.para { color: var(--tinta-2); font-size: 14.5px; }
.plano ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.plano li {
  font-size: 14.5px; color: var(--tinta-2);
  padding-left: 20px; position: relative;
}
.plano li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; background: var(--azul);
}
.plano.destaque li::before { background: var(--degrade); }
.plano .botao { justify-self: stretch; }

/* =============================================================================
   Fecho e rodapé
   ============================================================================= */

.fecho {
  max-width: var(--coluna); margin: 0 auto;
  padding: clamp(90px, 14vh, 150px) var(--margem);
  border-top: 1px solid var(--linha);
  display: grid; gap: 24px; justify-items: start;
}
.fecho h2 { font-size: clamp(36px, 6.4vw, 84px); line-height: 1; letter-spacing: -0.05em; }

footer {
  max-width: var(--coluna); margin: 0 auto;
  padding: 28px var(--margem) 56px;
  border-top: 1px solid var(--linha);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--tinta-3);
}
footer a { margin-left: auto; }
footer a:hover { color: var(--tinta); }

.marca-grade {
  display: grid; grid-template-columns: repeat(2, 7px);
  grid-auto-rows: 7px; gap: 2px; flex: none;
}
.marca-grade i { display: block; }
.marca-grade i:nth-child(1) { background: var(--ciano); }
.marca-grade i:nth-child(2) { background: var(--azul); }
.marca-grade i:nth-child(3) { background: var(--azul); }
.marca-grade i:nth-child(4) { background: var(--violeta); }

/* =============================================================================
   Telas estreitas
   ============================================================================= */
@media (max-width: 1000px) {
  .explorador { grid-template-columns: 1fr; }
  .modulos-lista {
    display: flex; overflow-x: auto; gap: 0; scrollbar-width: none;
  }
  .modulos-lista::-webkit-scrollbar { display: none; }
  .modulos-lista li { flex: none; }
  .modulos-lista button { white-space: nowrap; padding: 12px 16px; }
  .modulos-lista button[aria-selected="true"] {
    padding-left: 16px; box-shadow: inset 0 -3px 0 var(--ciano);
  }
  .modulo-palco { min-height: 0; }
  .destaque-robo { grid-template-columns: 1fr; }
  .dor { grid-template-columns: 1fr; }
  .sim-corpo { grid-template-columns: 110px 1fr; }
  .cabeca-links { display: none; }
  .cabeca-logo img { width: auto; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela { opacity: 1; transform: none; transition: none; }
  h1 .linha i { transform: none; transition: none; }
  .elo-linha i { animation: none; }
  .elo-linha i { opacity: 1; left: calc(100% - 5px); }
  .cursor { display: none; }
  .cabeca-links a::after { transition: none; }
  /* sem o fade, a troca de tela e instantanea */
  .modulo-tela img { transition: none; }
}

/* =============================================================================
   Para quem é — os ramos atendidos
   ============================================================================= */
.ramos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--linha); border: 1px solid var(--linha);
}
.ramo {
  background: var(--fundo-2); padding: 26px 24px;
  display: grid; gap: 10px; align-content: start;
  transition: background 240ms ease;
}
.ramo:hover { background: var(--superficie); }
.ramo b { font-size: 17px; font-weight: 660; letter-spacing: -0.02em; }
.ramo p { color: var(--tinta-2); font-size: 14.5px; line-height: 1.55; }

/* a marca de cada ramo é o mesmo motivo de pixels do logo, em outra cor */
.ramo-marca {
  width: 26px; height: 26px; display: block;
  background:
    linear-gradient(var(--tom), var(--tom)) 0 0 / 11px 11px no-repeat,
    linear-gradient(var(--tom), var(--tom)) 15px 0 / 8px 8px no-repeat,
    linear-gradient(var(--tom), var(--tom)) 0 15px / 8px 8px no-repeat;
}
.ramo-quem {
  font-family: var(--mono); font-size: 11px; color: var(--tinta-3);
  line-height: 1.6;
}

.ramo-nota {
  margin-top: 22px; border: 1px solid var(--linha); background: var(--fundo);
  padding: 24px; display: grid; gap: 10px;
}
.ramo-nota b { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }

/* =============================================================================
   Rodapé com o logo
   ============================================================================= */
.rodape-logo {
  display: block; line-height: 0; flex: none;
  transition: filter 260ms ease;
}
.rodape-logo:hover { filter: saturate(1.15); }
.rodape-logo img { width: auto; height: 54px; object-fit: contain; display: block; }

.rodape-texto { display: grid; gap: 3px; }
.rodape-texto b { font-size: 14px; font-weight: 620; color: var(--tinta-2); }
.rodape-texto span { font-size: 12.5px; }
.rodape-contato { margin-left: auto; }

/* =============================================================================
   Cor fraca
   ---------------------------------------------------------------------------
   Ate aqui a pagina era branca com o tecido de quadrados atras; a cor so
   aparecia nos botoes e nas marcas dos ramos. Branco de ponta a ponta faz as
   secoes se confundirem: a pessoa rola e nao sente que mudou de assunto.

   A cor entra fraca de proposito — de 4% a 8% de tinta sobre o branco. Nesse
   nivel ela nao briga com o texto (o contraste da letra nao muda em nada) e
   nao vira "site colorido"; ela so marca onde uma secao acaba e outra comeca,
   e desce pelo arco da marca — ciano no topo, violeta no fim — de modo que a
   pagina inteira leia como um degrade so, lento demais para ser percebido de
   relance.

   Tudo em rgba translucido, nunca em cor cheia: o tecido de quadrados precisa
   continuar aparecendo por baixo. Cor cheia apagaria o fundo da pagina.
   ============================================================================= */

/* A lavagem sangra de ponta a ponta como a faixa do meio ja fazia, e fica
   atras do conteudo. Absoluta de proposito: `.dor` e `.fecho` sao grid, e um
   ::before em fluxo viraria mais uma celula e quebraria as colunas. */
.secao:not(.sangra), .fecho { position: relative; }

.secao:not(.sangra)::before, .fecho::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw;
  background: var(--lavagem, transparent);
}

#dor      { --lavagem: rgba(34, 201, 245, 0.055); }
#modulos  { --lavagem: rgba(59, 141, 245, 0.050); }
#metodo   { --lavagem: rgba(75,  87, 240, 0.045); }
#planos   { --lavagem: rgba(155, 61, 240, 0.045); }
.marca-secao { --lavagem: rgba(106, 75, 240, 0.042); }
.fecho    { --lavagem: rgba(34, 201, 245, 0.050); }

/* `#ramos` fica sem lavagem: os cartoes dentro dele e que carregam a cor, e um
   fundo colorido atras de cartoes coloridos anularia os dois. */

/* A faixa do meio ja tinha o seu proprio fundo; aqui ela so entra no mesmo tom
   fraco dos vizinhos, para nao ser a unica pesada da pagina. */
.sangra::before {
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(75, 87, 240, 0.07), transparent 70%),
    rgba(34, 201, 245, 0.030),
    var(--fundo-2);
}

/* ---------------------------------------------------------------------------
   Os cartoes
   Cada ramo ja tinha o seu tom no quadradinho da marca; agora o cartao inteiro
   vem dele. A cor deixa de ser enfeite e passa a dizer "este e outro ramo".
   --------------------------------------------------------------------------- */
.ramo { background: var(--fundo-2); }
.ramo { background: color-mix(in srgb, var(--tom, #4B57F0) 7%, var(--fundo-2)); }
.ramo:hover { background: var(--superficie); }
.ramo:hover { background: color-mix(in srgb, var(--tom, #4B57F0) 13%, #FFFFFF); }

.ramo-nota { background: var(--fundo); }
.ramo-nota { background: color-mix(in srgb, var(--ciano-vivo) 5%, #FFFFFF); }

/* A corrente e uma sequencia: um gatilho puxa o proximo. A cor anda junto com
   ela, um passo do arco por elo, para a ordem se ver antes de se ler. */
.elo:nth-child(1) { background: color-mix(in srgb, #22C9F5 6%, #FFFFFF); }
.elo:nth-child(2) { background: color-mix(in srgb, #3B8DF5 6%, #FFFFFF); }
.elo:nth-child(3) { background: color-mix(in srgb, #4B57F0 6%, #FFFFFF); }
.elo:nth-child(4) { background: color-mix(in srgb, #7B49F0 6%, #FFFFFF); }
.elo:nth-child(5) { background: color-mix(in srgb, #9B3DF0 6%, #FFFFFF); }

/* Os planos sobem de tom junto com o preco. O do meio mantem a borda em
   degrade que ja o destacava — a lavagem nao substitui aquilo, so acompanha. */
.plano:nth-child(1) { background: color-mix(in srgb, #22C9F5 5%, #FFFFFF); }
.plano:nth-child(3) { background: color-mix(in srgb, #9B3DF0 5%, #FFFFFF); }
.plano.destaque {
  background:
    linear-gradient(color-mix(in srgb, #4B57F0 5%, #FFFFFF),
                    color-mix(in srgb, #4B57F0 5%, #FFFFFF)) padding-box,
    var(--degrade) border-box;
}

/* A lista de modulos e o palco ao lado dela sao a mesma peca; o palco fica um
   tom mais claro que a lista para a atencao cair nele, e nao na navegacao. */
.modulos-lista { background: color-mix(in srgb, #4B57F0 6%, var(--fundo-2)); }
.modulo-palco  { background: color-mix(in srgb, #22C9F5 5%, #FFFFFF); }

/* A linha embaixo da tabela de precos: espaco a mais nao e um plano novo, e
   dizer isso ali evita a pergunta "preciso subir de plano so por causa de
   arquivo?" — que e a pergunta que faz a pessoa nao assinar. */
.nota-espaco {
  margin-top: 22px; max-width: 60ch;
  font-size: 14.5px; line-height: 1.6; color: var(--tinta-2);
}

/* =============================================================================
   Páginas de Sistema

   Cada um dos nove tem a sua página, e todas usam as peças que já existem aqui
   — a lista de dor, a grade de cartões, a corrente de eventos. O que muda é a
   abertura: sem o vídeo e sem a altura de tela inteira, porque quem chega numa
   página dessas já sabe o que quer ver e não precisa de cortina.
   ============================================================================= */
.sistema-heroi {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(150px, 20vh, 210px) 0 clamp(60px, 9vh, 100px);
}
.sistema-heroi.so-texto { grid-template-columns: 1fr; }
.sistema-heroi-texto { display: grid; gap: 22px; justify-items: start; }

/* O título das páginas de sistema é menor que o da abertura do site: ali ele é
   a marca, aqui é um assunto entre nove. */
.sistema-heroi h1 { font-size: clamp(34px, 5.2vw, 62px); }

/* A volta para a lista fica acima do título, e não num botão perdido no rodapé:
   quem entrou por busca precisa descobrir que existem outros oito. */
.volta {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 200ms ease, gap 200ms var(--entrada);
}
.volta::before { content: "\2039"; font-size: 17px; line-height: 1; }
.volta:hover { color: var(--ciano-texto); gap: 12px; }

/* A tela de verdade, emoldurada como se estivesse numa janela. A borda clara e
   a sombra baixa a separam do fundo sem transformá-la num cartão. */
.sistema-tela {
  margin: 0; border: 1px solid var(--linha); background: var(--fundo-2);
  box-shadow: 0 30px 70px -40px rgba(23, 26, 33, 0.45);
  overflow: hidden;
}
.sistema-tela img { display: block; width: 100%; height: auto; }

/* -----------------------------------------------------------------------------
   A lista dos nove

   Cartão com a tela em cima e o texto embaixo. A imagem é o argumento: nome de
   módulo em lista de texto não diz nada a quem nunca viu o produto.
   ----------------------------------------------------------------------------- */
.sistemas-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px; background: var(--linha); border: 1px solid var(--linha);
}
.sistema-cartao {
  display: grid; gap: 0; background: var(--fundo-2);
  transition: background 240ms ease;
}
.sistema-cartao:hover { background: var(--fundo); }

.sistema-cartao-tela {
  display: block; overflow: hidden; border-bottom: 1px solid var(--linha);
  aspect-ratio: 16 / 10; background: var(--fundo);
}
.sistema-cartao-tela img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: top left;
  transition: transform 600ms var(--entrada), filter 400ms ease;
  filter: saturate(.9);
}
.sistema-cartao:hover .sistema-cartao-tela img {
  transform: scale(1.03); filter: saturate(1.05);
}

.sistema-cartao-texto { display: grid; gap: 8px; padding: 24px; align-content: start; }
.sistema-cartao-texto .mn { font-size: 11px; color: var(--tinta-3); letter-spacing: .16em; }
.sistema-cartao-texto b { font-size: 19px; font-weight: 680; }
.sistema-cartao-linha { color: var(--tinta-2); font-size: 14.5px; line-height: 1.55; }
.sistema-cartao-ir {
  margin-top: 6px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ciano-texto);
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap 200ms var(--entrada);
}
.sistema-cartao-ir::after { content: "\203A"; font-size: 16px; line-height: 1; }
.sistema-cartao:hover .sistema-cartao-ir { gap: 12px; }

/* -----------------------------------------------------------------------------
   O anterior e o próximo

   Quem terminou de ler uma página está a um clique de ler a segunda, e é essa a
   página em que a decisão costuma acontecer.
   ----------------------------------------------------------------------------- */
.vizinhos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--linha); border: 1px solid var(--linha);
  margin-top: 8px;
}
.vizinho {
  background: var(--fundo-2); padding: 24px;
  display: grid; gap: 6px; align-content: start;
  transition: background 240ms ease;
}
.vizinho:hover { background: var(--fundo); }
.vizinho b { font-size: 18px; font-weight: 680; }
.vizinho > span:last-child { color: var(--tinta-2); font-size: 14px; line-height: 1.5; }

/* O link que leva do explorador da home para a página inteira do módulo. */
.modulo-ir {
  margin-top: 14px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ciano-texto);
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap 200ms var(--entrada);
}
.modulo-ir::after { content: "\203A"; font-size: 16px; line-height: 1; }
.modulo-ir:hover { gap: 12px; }

/* Link dentro de um parágrafo de leitura: sublinhado fino, sem virar botão. */
.fio-link {
  color: var(--tinta); text-decoration: underline;
  text-decoration-color: var(--ciano); text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: color 200ms ease;
}
.fio-link:hover { color: var(--ciano-texto); }

@media (max-width: 860px) {
  .sistema-heroi { grid-template-columns: 1fr; padding-top: clamp(120px, 16vh, 160px); }
}

footer{flex-wrap:wrap}.canais-contato{display:flex;flex-wrap:wrap;gap:16px;width:100%;justify-content:flex-end}.canais-contato a{color:var(--ciano);font-size:14px}@media(max-width:700px){.canais-contato{justify-content:flex-start}}