/* ==========================================================================
   HOME · no desenho da insany.com.br (v2, 10/11/2026)
   Camada separada do brilho.css: e intervencao de layout na home, nao
   paleta. Tudo aqui vale so com body.pagina-home.

   Medido la, com a janela em 1530x880, e trazido para ca:
     - pagina clara #f5f5f5; o escuro vira ilha, nao faixa
     - caixas escuras #0d0d0d, raio 25px, a 6px da borda da janela
     - cards brancos #fff sobre o claro, cinzas de apoio #ececec e #dedede
     - header chapado no claro, acima da caixa do hero, fixo ao rolar
     - uma familia so, Inter, com tracking de -0,04em no texto e -0,06em
       no display
   O que fica nosso: o menu aberto (la e hamburguer no topo), a paleta neon
   dentro das caixas escuras e o conteudo de cada dobra.

   O X da v1 saiu a pedido do Claudio. A divisoria lima entre dobras escuras
   tambem: com as dobras virando caixas soltas, nao existe mais a linha.
   ========================================================================== */

body.pagina-home {
  /* altura do header chapado: a insany usa 70px */
  --home-topo: 72px;
  /* respiro entre a caixa e a borda da janela, e entre caixas */
  --home-vao: 6px;
  --home-raio: 25px;
  --insany-claro: #f5f5f5;
  --insany-escuro: #0d0d0d;
  /* No fim da pagina o globais.js liga html.fim-verde, que pinta o body com
     var(--sage-claro) para a cena 3D do X ficar sobre o salvia. Trocado aqui,
     o fim da home fica no mesmo claro da referencia. */
  --sage-claro: #f5f5f5;

  /* a fonte da referencia, carregada pelo mu-plugin so na home. Todos os
     tokens de fonte apontam para ela, entao titulo, corpo, rotulo e botao
     trocam juntos, sem caçar regra por regra. */
  --f-txt: "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-disp: "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-shield: "Inter", ui-sans-serif, system-ui, sans-serif;

  background: var(--insany-claro);
  background-image: none;
  /* o header e fixo e agora opaco: a pagina comeca abaixo dele */
  padding-top: var(--home-topo);
  letter-spacing: -.02em;
}

/* ==========================================================================
   1. Header chapado, acima da caixa
   ========================================================================== */
body.pagina-home .topo {
  height: var(--home-topo);
  background: var(--insany-claro);
  pointer-events: auto;
}
body.pagina-home .topo-in,
body.pagina-home .topo--min .topo-in,
body.pagina-home .topo--aberto .topo-in {
  margin: 0 auto;
  height: var(--home-topo);
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
/* sem vidro: o header nao flutua mais sobre nada */
body.pagina-home .topo-in::before { display: none; }

/* o logo e branco no arquivo; no claro vira tinta, como no rodape */
body.pagina-home .topo-logo img { filter: brightness(0); }

/* menu aberto, como sempre foi aqui; o desenho do texto e o da referencia:
   Inter 600, tinta #090909 */
body.pagina-home .menu a,
body.pagina-home .menu-gatilho {
  color: #090909; opacity: 1;
  font-weight: 600; font-size: .95rem; letter-spacing: -.04em;
}
/* "Suporte · Contato" tem o mesmo desenho do menu: estava em 13px, peso
   500, caixa alta e cinza, e parecia outra fonte ao lado dos links */
body.pagina-home .topo-util,
body.pagina-home .topo-util a {
  color: #090909;
  font-weight: 600; font-size: .95rem; letter-spacing: -.04em;
  text-transform: none;
}
body.pagina-home .topo-util a:hover,
body.pagina-home .topo-util a:focus-visible { color: #090909; text-decoration: underline; text-underline-offset: 4px; }

/* o CTA do header vira a pilula preta da referencia: a lima sobre #f5f5f5
   da 1,1:1 e some. A lima fica para dentro das caixas escuras. */
body.pagina-home .topo-cta.btn--pri {
  background: #090909; color: #ffffff; box-shadow: none;
}
body.pagina-home .topo-cta.btn--pri:hover,
body.pagina-home .topo-cta.btn--pri:focus-visible {
  background: #262626; color: #ffffff; box-shadow: none;
}
body.pagina-home .topo-cta .cta-circ { background: #ffffff; color: #090909; }

/* celular: o botao do menu era fio branco sobre o escuro */
body.pagina-home .hicon { color: #090909; border-color: rgba(9, 9, 9, .18); }

/* ==========================================================================
   2. Hero dentro da caixa
   O palco do hero ja e o retangulo que fica preso na tela durante a
   sequencia. Ele vira a caixa: recua 6px das bordas, ganha o raio e comeca
   abaixo do header. A cena WebGL e absoluta dentro dele, entao acompanha.
   ========================================================================== */
/* a secao do hero pintava #080808 por tras do palco e escondia o vao claro
   e os cantos arredondados: ela fica transparente e quem pinta e a caixa */
body.pagina-home .hero-c { background: transparent; }
html body.pagina-home .hc-palco {
  margin: 0 var(--home-vao);
  border-radius: var(--home-raio);
  background: var(--insany-escuro);
  overflow: hidden;
}
@media (min-width: 1024px) {
  html:not(.movimento-reduzido) body.pagina-home .hc-palco {
    top: var(--home-topo);
    height: calc(100vh - var(--home-topo) - var(--home-vao));
    min-height: 560px;
  }
  /* o titulo pulava o header que flutuava por cima; agora o header esta fora */
  html:not(.movimento-reduzido) body.pagina-home .hc-topo { padding-top: clamp(40px, 7vh, 72px); }
  /* as chamadas ficam no centro vertical da TELA, nao no do palco, e o mesmo
     eixo vale para as nove (todas moram na mesma celula de grade). Duas
     correcoes somadas: o tema reservava --topo-min (84px) de respiro no alto
     do .hc-caps, por causa do header que antes flutuava por cima, e o palco
     agora comeca em --home-topo e sobra --home-vao embaixo, entao o centro
     dele cai (72 - 6) / 2 = 33px abaixo do centro da janela. Deslocamento por
     transform, e nao por padding, para o quadro nao perder altura util em
     janela baixa (a chamada 08 tem 567px). */
  html:not(.movimento-reduzido) body.pagina-home .hc-caps {
    padding-top: 0;
    transform: translateY(calc((var(--home-vao) - var(--home-topo)) / 2));
  }
}
@media (max-width: 1023px) {
  body.pagina-home .hc-topo { padding-top: 36px; }
}

/* ==========================================================================
   2b. Os logos da chamada 07 (quem faz)
   A grade era fechada: moldura por fora, fio entre todas as celulas e um
   fundo mais claro em cada quadro, 12 linhas ao todo. Num ponto em que o
   assunto e confianca, o bloco lia como tabela de planilha e prendia cada
   marca na sua caixinha. Fica so a cruz no encontro de quatro logos, com
   fio de meio pixel nas telas de alta densidade, que e o mais fino que o
   navegador desenha. O olho fecha a grade sozinho.
   ATENCAO: a posicao das cruzes depende da quantidade de logos (hoje 8).
   Mudou a quantidade ou o numero de colunas, revisar os nth-child.
   ========================================================================== */
body.pagina-home .hc-clientes { border: 0; --cz-tam: 12px; --cz-fio: 1px; }
@media (min-resolution: 2dppx) { body.pagina-home .hc-clientes { --cz-fio: .5px; } }
body.pagina-home .hc-clientes li { position: relative; border: 0; background: none; }
body.pagina-home .hc-clientes li::after {
  content: ""; position: absolute; right: 0; bottom: 0; z-index: 1;
  width: var(--cz-tam); height: var(--cz-tam); transform: translate(50%, 50%);
  color: rgba(236, 238, 241, .3); pointer-events: none;
  background:
    linear-gradient(currentColor, currentColor) center / var(--cz-fio) 100% no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% var(--cz-fio) no-repeat;
}
/* 4 colunas: os encontros de dentro ficam depois do 1o, do 2o e do 3o logo */
@media (min-width: 1024px) {
  body.pagina-home .hc-clientes li:nth-child(n+4)::after { content: none; }
}
/* 2 colunas: os encontros sao os da coluna do meio, fora da ultima fileira */
@media (max-width: 1023px) {
  body.pagina-home .hc-clientes li:nth-child(even)::after,
  body.pagina-home .hc-clientes li:nth-last-child(-n+2)::after { content: none; }
}

/* ==========================================================================
   3. O claro distribuido pela home
   As dobras em salvia passam ao cinza claro da referencia, com os tokens de
   texto trocados por neutros (o verde-musgo do texto saiu junto com o
   salvia). Contraste sobre #f5f5f5: titulo 18,4:1, corpo 15,1:1, apoio
   9,4:1, terciario 5,1:1.
   ========================================================================== */
/* Sites e software (HOME-09) e cases (HOME-10) eram escuras e vinham logo
   depois da jornada (HOME-08), tambem escura: tres caixas pretas seguidas,
   o oposto do ritmo da referencia. As duas passam ao claro, com os mesmos
   tokens das dobras que eram salvia; os cards dos cases viram os cards
   brancos da insany. */
body.pagina-home #home-09,
body.pagina-home #home-10,
body.pagina-home .tom-claro,
body.pagina-home .rodape {
  --sage-claro: var(--insany-claro);
  --musgo: #090909;
  --txt-tit: #090909;
  --txt: #1f1f1f;
  --txt-2: #404040;
  --txt-3: #686868;
  --linha: rgba(9, 9, 9, .10);
  --linha-2: rgba(9, 9, 9, .16);
  --linha-3: rgba(9, 9, 9, .28);
  /* superficies dentro do claro: os cards brancos da referencia */
  --ink-1: #ffffff;
  --ink-2: #ececec;
  --ink-3: #dedede;
  --papel: #ffffff;
  --papel-txt: #090909;
  --papel-txt-2: #4a4a4a;
  --papel-faixa: #ececec;
  background: var(--insany-claro);
}

/* ==========================================================================
   4. O escuro vira ilha
   Cada dobra escura sai da largura cheia e vira uma caixa #0d0d0d com o
   mesmo raio e o mesmo recuo do hero. Entre duas caixas seguidas fica o vao
   claro de 6px, como la.
   ========================================================================== */
body.pagina-home .secao:not(.tom-claro):not(.rodape):not(#home-09):not(#home-10) {
  margin: 0 var(--home-vao);
  border-radius: var(--home-raio);
  background: var(--insany-escuro);
}
body.pagina-home .secao:not(.tom-claro):not(.rodape):not(#home-09):not(#home-10) + .secao:not(.tom-claro):not(.rodape):not(#home-09):not(#home-10) {
  margin-top: var(--home-vao);
}
/* as duas que clarearam: o texto e o realce sobre o claro */
body.pagina-home :is(#home-09, #home-10) {
  color: var(--txt);
  --azul: #4a14b8;
  --azul-claro: #4a14b8;
  --acao: #090909;
  --acao-hi: #262626;
  --acao-ink: var(--neon-lima);
}
/* a divisoria de 1px entre dobras nao existe mais: as caixas tem borda */
body.pagina-home .secao + .secao { border-top: 0; }

/* ==========================================================================
   5. Tipografia da referencia
   Display em 600 com -0,06em; texto com -0,02em (a referencia usa -0,04em
   ate no paragrafo; aqui o texto corrido e mais longo, e -0,02em segura a
   leitura sem perder o desenho). Os titulos herdam a fonte pelos tokens.
   ========================================================================== */
:root :where(main) body.pagina-home :is(h1, h2, .h2),
body.pagina-home :is(h1, h2, .h2) {
  font-weight: 600;
  letter-spacing: -.06em;
}
:root :where(main) .hero-c .hc-h1 { font-weight: 600; }
.hero-c .hc-h1 { color: #ffffff; }

/* ==========================================================================
   6. Ilhas escuras dentro do claro (11/11/2026)
   Painel, card ou tela que nasceu escuro e mora numa dobra clara recebe de
   volta os tokens do escuro. Sem isto ele herda o texto #1f1f1f das dobras
   claras e some: foi o que aconteceu com a planta da HOME-09 (1,2:1).
   Os valores sao os neutros originais do tema (.tom-escuro), Regra 1.
   ========================================================================== */
body.pagina-home :is(.planta, .tela-escura, #home-03 .frente) {
  --txt-tit: #ffffff;
  --txt: #eceef1;
  --txt-2: #aab1bd;
  --txt-3: #858d9b;
  --linha: rgba(236, 238, 241, .08);
  --linha-2: rgba(236, 238, 241, .14);
  --linha-3: rgba(236, 238, 241, .26);
  --ink-1: #141414;
  --ink-2: #1c1c1c;
  --ink-3: #242424;
  --acao: var(--neon-lima);
  --acao-hi: var(--neon-lima-hi);
  --acao-ink: var(--void);
  color: var(--txt);
}
/* a sombra das telas escuras era musgo (24, 33, 19): vira preto neutro */
body.pagina-home .tela-escura { box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .35); }

/* ==========================================================================
   7. A planta da HOME-09 em lima (pedido do Claudio, 11/11/2026)
   Era roxo sobre #070b10: as cotas de 10,5px davam 6,1:1, abaixo do piso de
   7:1 que a casa pede para roxo pequeno no escuro. Em lima vao a 16:1. O
   fundo azulado #070b10 vira o preto das caixas da referencia.
   ========================================================================== */
body.pagina-home .planta {
  --azul: var(--neon-lima);
  --azul-claro: var(--neon-lima-hi);
  background:
    linear-gradient(rgba(170, 255, 0, .045) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(170, 255, 0, .045) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--insany-escuro);
  border-color: rgba(236, 238, 241, .10);
}
body.pagina-home .pl-grade { stroke: rgba(170, 255, 0, .16); }
body.pagina-home .pl-cota { stroke: rgba(170, 255, 0, .5); }
body.pagina-home .pl-cota-txt { fill: var(--neon-lima); }
body.pagina-home .pl-contorno { stroke: var(--neon-lima); }
body.pagina-home .pl-cruz { stroke: var(--neon-lima-hi); }
body.pagina-home .pc ul,
body.pagina-home .pc a { border-color: rgba(170, 255, 0, .22); }
body.pagina-home .pc a { color: var(--txt); }
body.pagina-home .pc a::after,
body.pagina-home .pc a:hover,
body.pagina-home .pc a:focus-visible { color: var(--neon-lima); }

/* ==========================================================================
   8. Sem o cinza esverdeado
   As transparencias e sombras que ainda carregavam o salvia (239, 241, 232)
   e o musgo (24, 33, 19) passam ao cinza novo e ao preto neutro.
   ========================================================================== */
body.pagina-home .tom-claro .final-col {
  background: #ffffff;
  border-color: rgba(9, 9, 9, .08);
}

/* ==========================================================================
   9. Um vao so entre as dobras
   Medido antes: 245px na maioria das passagens, 261, 251 e 288px nas outras,
   e a HOME-08 com 69,6px em cima em vez de 122. Todas as dobras passam ao
   mesmo respiro, e o primeiro e o ultimo filho de cada uma perdem a margem
   que somava por fora dele.
   ========================================================================== */
body.pagina-home { --home-dobra: clamp(64px, 7vw, 112px); }
body.pagina-home .secao { padding-block: var(--home-dobra); }
body.pagina-home .secao > .wrap > :first-child { margin-top: 0; }
body.pagina-home .secao > .wrap > :last-child { margin-bottom: 0; }

/* ==========================================================================
   10. FAQ no desenho da insany
   Titulo grande e pesado a esquerda; a direita, cada pergunta num card
   branco proprio, 6px entre eles, e o "+" num circulo preto. O painel de
   vidro esverdeado saiu inteiro. O texto continua o nosso: a referencia tem
   um paragrafo sob o titulo, aqui nao tem, e nao foi inventado.
   ========================================================================== */
body.pagina-home #home-12 .faq-in {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 112px);
}
:root :where(main) body.pagina-home #home-12 .h2,
body.pagina-home #home-12 .h2 {
  font-size: clamp(48px, 5.4vw, 88px);
  line-height: .92;
  letter-spacing: -.06em;
  font-weight: 600;
  color: #090909;
}
body.pagina-home #home-12 .faq-lista {
  display: grid; gap: 6px;
  padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.pagina-home #home-12 .faq-lista details {
  background: #ffffff;
  border: 0; border-radius: 14px;
  padding: 0 clamp(20px, 1.8vw, 28px);
}
body.pagina-home #home-12 .faq-lista summary {
  align-items: center;
  padding: clamp(20px, 1.7vw, 26px) 0;
  font-weight: 500; font-size: clamp(1.02rem, .9rem + .3vw, 1.2rem);
  letter-spacing: -.03em; color: #090909;
}
body.pagina-home #home-12 .faq-lista summary:hover { color: #090909; }
body.pagina-home #home-12 .faq-lista summary::after {
  width: 22px; height: 22px; margin-top: 0; border-radius: 50%;
  background:
    linear-gradient(#ffffff, #ffffff) center / 10px 1.8px no-repeat,
    linear-gradient(#ffffff, #ffffff) center / 1.8px 10px no-repeat,
    #090909;
}
body.pagina-home #home-12 .faq-r { color: #5c5c5c; }
body.pagina-home #home-12 .faq-r > :last-child { padding-bottom: clamp(18px, 1.6vw, 24px); }

/* ==========================================================================
   11. HOME-03 no layout "Como trabalhamos" da insany
   Um container branco de raio 25px dentro do claro. A esquerda o titulo em
   dois tons (preto e cinza, como "Metodo claro, / adaptado ao seu
   contexto"); a direita as duas frentes viram cards pretos. O titulo ja vem
   quebrado em palavras pelo titulos-desfoque.js, entao o corte dos tons e a
   quebra de linha saem do proprio CSS, sem mexer no texto.
   ========================================================================== */
body.pagina-home #home-03 > .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
  background: #ffffff;
  border-radius: var(--home-raio);
  padding: clamp(28px, 4.2vw, 72px);
}
:root :where(main) body.pagina-home #home-03 h2,
body.pagina-home #home-03 h2 {
  display: flex; flex-wrap: wrap; align-content: flex-start;
  column-gap: .24em;
  font-size: clamp(38px, 3.9vw, 62px);
  line-height: .98;
  letter-spacing: -.06em;
  color: #090909;
}
/* "Duas formas de trabalhar" em preto, quebra, "com a Digital Pixel" em cinza */
body.pagina-home #home-03 h2::before { content: ""; order: 2; flex-basis: 100%; height: 0; }
body.pagina-home #home-03 h2 > .td-palavra:nth-child(-n+4) { order: 1; }
body.pagina-home #home-03 h2 > .td-palavra:nth-child(n+5) { order: 3; color: #8a8a8a; }

/* os dois "+" soltos no meio da coluna da esquerda, como la */
body.pagina-home #home-03 > .wrap::before,
body.pagina-home #home-03 > .wrap::after {
  content: ""; position: absolute; top: 58%;
  width: 18px; height: 18px; pointer-events: none;
  background:
    linear-gradient(#bdbdbd, #bdbdbd) center / 100% 1.4px no-repeat,
    linear-gradient(#bdbdbd, #bdbdbd) center / 1.4px 100% no-repeat;
}
body.pagina-home #home-03 > .wrap::before { left: clamp(28px, 4.2vw, 72px); }
body.pagina-home #home-03 > .wrap::after { left: calc(clamp(28px, 4.2vw, 72px) + 30%); }

body.pagina-home #home-03 .frentes-grade {
  margin-top: 0;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
body.pagina-home #home-03 .frente {
  display: flex; flex-direction: column;
  min-height: clamp(460px, 38vw, 580px);
  background: var(--insany-escuro);
  border: 0; border-radius: 18px;
  padding: clamp(20px, 1.8vw, 28px);
}
/* o desenho fica no alto; o texto desce para o pe do card, como nos cards
   pretos da referencia */
body.pagina-home #home-03 .frente-desenho { margin: 0 0 0 auto; width: min(100%, 200px); height: auto; }
body.pagina-home #home-03 .frente-rot { margin-top: auto; color: var(--txt-2); }
body.pagina-home #home-03 .frente-txt { color: #ffffff; font-size: clamp(1.05rem, .9rem + .45vw, 1.3rem); }
body.pagina-home #home-03 .frente-links { border-top-color: var(--linha-2); }
body.pagina-home #home-03 .frente-links a { color: var(--txt); border-color: var(--linha-2); }
body.pagina-home #home-03 .frente-links a::after,
body.pagina-home #home-03 .frente-links a:hover { color: var(--neon-lima); }
body.pagina-home #home-03 .frente .btn--sec { color: #ffffff; border-color: rgba(255, 255, 255, .28); background: transparent; }

@media (max-width: 1023px) {
  body.pagina-home #home-03 > .wrap { grid-template-columns: 1fr; }
  body.pagina-home #home-03 > .wrap::before,
  body.pagina-home #home-03 > .wrap::after { display: none; }
  body.pagina-home #home-12 .faq-in { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  body.pagina-home #home-03 .frentes-grade { grid-template-columns: 1fr; }
  body.pagina-home #home-03 .frente { min-height: 0; }
}

/* Duas dobras claras seguidas somavam os dois respiros (214px de claro
   vazio), enquanto entre o claro e uma caixa escura ficava um so (107px):
   era essa a diferenca de vao que se via. Quando uma dobra clara vem logo
   depois de outra, ela perde o respiro de cima, e todo vao entre blocos
   vira um --home-dobra. O reel nao entra na regra: e um palco de tela
   cheia com o respiro dele. Entre duas caixas escuras o vao e o de 6px da
   referencia, que ja vem do bloco 4. */
body.pagina-home :is(.secao.tom-claro, #home-09, #home-10) + :is(.secao.tom-claro, #home-09, #home-10) {
  padding-top: 0;
}
/* o rodape vem depois do FAQ, claro sobre claro: mesmo caso */
body.pagina-home .rodape { padding-top: 0; }

/* Dentro de uma ilha escura que mora numa dobra clara, o botao principal
   herdava a pilula quase preta das dobras claras (brilho.css) e sumia sobre
   o card #0d0d0d, sobrando so o rotulo lima. Volta a ser a pilula lima com
   o halo, como em todas as caixas escuras. */
body.pagina-home :is(.planta, .tela-escura, #home-03 .frente) .btn--pri {
  background: var(--neon-lima); color: var(--void);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9), 0 0 0 1px rgba(170, 255, 0, .50),
              0 0 20px rgba(170, 255, 0, .30), 0 0 56px rgba(155, 92, 255, .40);
}
body.pagina-home :is(.planta, .tela-escura, #home-03 .frente) .btn--pri:hover,
body.pagina-home :is(.planta, .tela-escura, #home-03 .frente) .btn--pri:focus-visible {
  background: var(--neon-lima-hi); color: var(--void);
}

/* Os cards pretos da HOME-03 sao ilhas escuras criadas aqui (nao tem a
   classe .tela-escura): mesmo roxo do escuro. Regra separada da do bloco 6
   porque ali o :is() com #home-03 pesa (1,2,1) e passaria por cima da lima
   da planta. */
body.pagina-home #home-03 .frente {
  --azul: var(--neon-roxo);
  --azul-claro: var(--neon-roxo-hi);
}
/* as linhas do desenho de "Sites e software" tinham opacidade de traco .7:
   no card preto davam 2,97:1, logo abaixo do piso de 3:1 de elemento
   grafico. Cheias, vao a 5,1:1. */
body.pagina-home #home-03 .frente-desenho--grade .fd-linha { stroke-opacity: 1; }

/* ==========================================================================
   "pessoas" e "IA" no titulo do hero (10/11/2026)
   "pessoas" saia em lilas quase branco (#e6e2ff) na homologacao e nao se
   distinguia do resto do titulo: "esse lilas e nada e a mesma coisa". O
   Claudio pediu roxo e verde. No titulo, "pessoas" vai ao roxo eletrico
   (#9b5cff, 5,0:1 em corpo de 75px ou mais) e "IA" a lima (#aaff00,
   16:1). Na legenda pequena da cena o roxo e o claro (#bfa0ff, 8,9:1),
   pelo piso de 7:1 para roxo pequeno no escuro. Vale igual na producao,
   onde "pessoas" usava o roxo claro e "IA" o ciano.
   ========================================================================== */
body.pagina-home .hc-pessoas.on { color: var(--neon-roxo); }
body.pagina-home .hc-ia.on { color: var(--neon-lima); }
body.pagina-home .hc-cap-frase .cor-pessoa { color: var(--neon-roxo-hi); }
body.pagina-home .hc-cap-frase .cor-ia { color: var(--neon-lima); }

/* ==========================================================================
   Frases da cena do hero no peso dos titulos (10/11/2026)
   "Os processos de hoje foram desenhados..." e as outras oito frases da
   cena (.hc-cap-frase) tinham corpo de titulo (36 a 65px) e peso 400, e ao
   lado dos H1 e H2 em 600 pareciam outra fonte. O Claudio pediu o padrao:
   600 e -0,06em, como todo titulo do site.
   ========================================================================== */
body.pagina-home .hc-cap-frase { font-weight: 600; letter-spacing: -.06em; }

/* ==========================================================================
   Titulo do hero: "sua empresa" na linha de baixo e corpo maior (10/11/2026)
   Na producao a segunda linha e "a operacao da sua empresa" (11,8em). Ela
   invadia o card VENDEDOR da cena em cinco de seis tamanhos de janela
   medidos (210px de sobreposicao em 1920x1080). O Claudio pediu para descer
   o "sua empresa" e aumentar a fonte.

   A quebra e por largura: 7em fica entre "a operacao da" (6,06em) e
   "a operacao da sua" (7,81em), entao a linha parte sempre depois do "da",
   em qualquer corpo, sem tocar no HTML. Com cinco linhas a mais larga passa
   a ser "trabalharem juntas" (7,98em) e o limite vira o card PLANILHA,
   embaixo. Com min(6,6vw, 10vh) o corpo sobe 16% (76 -> 88px em 1530x880)
   e sobra pelo menos 16px ate o card em 1280x720, 1366x768, 1440x900,
   1530x880, 1904x880 e 1920x1080. Com 10,4vh a sobra caia para 4px.
   No celular o corpo nao muda; a quebra la ja era a mesma.
   ========================================================================== */
body.pagina-home .hc-h1 .h1-a > .hc-linha:nth-child(2) { max-width: 7em; }
@media (min-width: 1024px) {
  /* O titulo fica preso no alto do palco e o paragrafo, no pe (.hc-base e
     absoluto). Quem decide se os dois se encostam e a ALTURA da janela: com
     10vh o titulo de 5 linhas invadia o paragrafo em 49px a 1530x880
     (10/11/2026, em producao). A conta, medida na pagina publicada: a folga
     entre os dois vale 0,88 x altura - 419px - 4,62 x fonte. Pedindo 30px
     de folga sai fonte = 19vh - 98px. Conferido de 1280x640 a 2560x1300:
     folga entre 27 e 44px. Mexeu no numero de linhas, no paragrafo ou nos
     botoes do pe, a conta muda: medir de novo. */
  body.pagina-home .hero-c .hc-h1 { font-size: clamp(28px, min(6.6vw, calc(19vh - 98px)), 104px); }
}

/* ==========================================================================
   Rodape preto com corte (teste pedido pelo Claudio, 12/11/2026, a partir da
   referencia de banking que ele mandou). O rodape era a ultima superficie
   clara da pagina; agora e a caixa preta que fecha o site, com o degrau
   invertido no alto: as pontas sobem, o meio desce, e o claro da dobra
   anterior entra pelo vao. Tudo no clip-path, sem marcacao nova, com os
   quatro numeros do corte em variaveis para calibrar depois.
   O recorte deixa passar o que esta atras do rodape, que no fim da home e a
   marca X em 3D (z-index -1, fixa): ela continua aparecendo pelo vao.
   ========================================================================== */
body.pagina-home .rodape {
  --corte-alt: 46px;
  --corte-lado: 230px;
  --rodape-fundo: #090909;
  --sage-claro: #0d0d0d;
  --musgo: #eceef1;
  --txt-tit: #ffffff;
  --txt: #eceef1;
  --txt-2: #aab1bd;
  --txt-3: #858d9b;
  --linha: rgba(236, 238, 241, .08);
  --linha-2: rgba(236, 238, 241, .14);
  --linha-3: rgba(236, 238, 241, .26);
  --ink-1: #141414;
  --ink-2: #1c1c1c;
  --ink-3: #242424;
  --papel: #141414;
  --papel-txt: #ffffff;
  --papel-txt-2: #aab1bd;
  --papel-faixa: #1c1c1c;
  --azul: var(--neon-roxo);
  --azul-claro: var(--neon-roxo-hi);
  --acao: var(--neon-lima);
  --acao-hi: var(--neon-lima-hi);
  --acao-ink: var(--void);
  color: var(--txt);
  background: var(--rodape-fundo);
  /* O degrau nao e um chanfro reto: cada ombro e uma curva em S que sai
     horizontal no alto e chega horizontal embaixo, entao as duas emendas sao
     tangentes e a borda corre lisa, como na referencia. Mascara em tres
     camadas (faixa de baixo + os dois ombros) em vez de clip-path: assim a
     curva mantem a geometria em pixels em qualquer largura de tela, sem
     esticar. */
  --corte-esq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0H132C170 0 190 46 230 46H0Z' fill='%23000'/%3E%3C/svg%3E");
  --corte-dir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 46' preserveAspectRatio='none'%3E%3Cpath d='M230 0H98C60 0 40 46 0 46H230Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask:
    linear-gradient(#000 0 0) 0 calc(var(--corte-alt) - 1px) / 100% calc(100% - var(--corte-alt) + 2px) no-repeat,
    var(--corte-esq) left top / var(--corte-lado) var(--corte-alt) no-repeat,
    var(--corte-dir) right top / var(--corte-lado) var(--corte-alt) no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 calc(var(--corte-alt) - 1px) / 100% calc(100% - var(--corte-alt) + 2px) no-repeat,
    var(--corte-esq) left top / var(--corte-lado) var(--corte-alt) no-repeat,
    var(--corte-dir) right top / var(--corte-lado) var(--corte-alt) no-repeat;
  padding-top: calc(var(--corte-alt) + 44px);
}
body.pagina-home .rodape .rodape-logo { filter: none; }
/* no fim da home o X em 3D fica atras do rodape: o preto deixa 8% dele
   passar, entao a marca continua se montando por tras do texto em vez de
   sumir atras de um bloco chapado. Sobre o claro da pagina o resultado e
   #1c1c1c, que mantem o texto branco em 14:1. */
/* o tema deixa o rodape transparente no fim da home para a marca X aparecer
   (secoes.css, html.marca-x-ativa.fim-verde .pagina-home .rodape). Aquela
   regra tem a mesma forca da daqui, entao o fundo preto precisa de um
   seletor mais forte, senao o rodape fica claro com o texto do escuro. */

@media (max-width: 767px) {
  body.pagina-home .rodape { --corte-alt: 26px; --corte-lado: 132px; }
}

/* Rodape mais baixo (12/11/2026): com 869px ele cobria quase a tela inteira
   e o header fixo encostava no corte, parecendo que cortava o topo do
   rodape. Agora fica perto de 740px e sobra uma faixa da dobra anterior
   acima dos ombros. O respiro de dentro continua acima do piso da casa. */
body.pagina-home .rodape { padding-top: calc(var(--corte-alt) + 78px); padding-bottom: 88px; }
body.pagina-home .rodape .rodape-apresenta { padding-block: 24px; }
body.pagina-home .rodape .rodape-grade { padding-block: 30px; }
body.pagina-home .rodape .rodape-base { padding-top: 20px; }

/* ==========================================================================
   Chao do rodape no fim da home (12/11/2026)
   O rodape e preto, mas preto chapado na frente esconde a marca X: ela e
   fundo de pagina, mora atras de tudo. Entao, enquanto o X esta no ar, o
   preto do rodape sai dele e vem para este chao, que o js/marca-x.js cria e
   mantem colado no alto do rodape. Ele fica UMA CAMADA ATRAS da tela:

     chao (z -2)  >  tela do X (z -1)  >  rodape sem fundo  >  texto

   Resultado: o rodape continua preto e o X aparece SOBRE ele, com o texto
   por cima dos dois. Sem o X (sem WebGL, movimento reduzido, outras
   paginas), nada disso entra e o rodape pinta o proprio preto.
   O corte e o mesmo do rodape, com os mesmos numeros.
   ========================================================================== */
html.marca-x-ativa .marca-x-chao {
  /* absoluto, em coordenadas do documento: rola junto com a pagina. Fixo e
     perseguindo o rodape a cada quadro, ele tremia na emenda no celular,
     onde a barra do navegador muda a altura da janela no meio da rolagem. */
  position: absolute; left: 0; right: 0; top: 0; z-index: -2;
  background: #090909; pointer-events: none;
  --corte-alt: 46px;
  --corte-lado: 230px;
  --corte-esq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0H132C170 0 190 46 230 46H0Z' fill='%23000'/%3E%3C/svg%3E");
  --corte-dir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 46' preserveAspectRatio='none'%3E%3Cpath d='M230 0H98C60 0 40 46 0 46H230Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask:
    linear-gradient(#000 0 0) 0 calc(var(--corte-alt) - 1px) / 100% calc(100% - var(--corte-alt) + 2px) no-repeat,
    var(--corte-esq) left top / var(--corte-lado) var(--corte-alt) no-repeat,
    var(--corte-dir) right top / var(--corte-lado) var(--corte-alt) no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 calc(var(--corte-alt) - 1px) / 100% calc(100% - var(--corte-alt) + 2px) no-repeat,
    var(--corte-esq) left top / var(--corte-lado) var(--corte-alt) no-repeat,
    var(--corte-dir) right top / var(--corte-lado) var(--corte-alt) no-repeat;
}
@media (max-width: 767px) {
  html.marca-x-ativa .marca-x-chao { --corte-alt: 26px; --corte-lado: 132px; }
}

/* ==========================================================================
   Celular: o card do hero inteiro na primeira tela (12/11/2026)
   O botao caia abaixo da barra do navegador: com a interface do Chrome e a
   barra de gestos, sobram perto de 640px de altura util, e o card pedia
   cerca de 700. O corte veio do titulo (45px em 375 era mais largo do que a
   coluna aguenta, e quebrava em cinco linhas) e do respiro entre as pecas,
   nao do texto: nenhuma frase saiu.
   ========================================================================== */
@media (max-width: 767px) {
  body.pagina-home .hc-h1 { font-size: clamp(1.9rem, 9.8vw, 2.5rem); }
  body.pagina-home .hc-topo { padding-top: 20px; }
  body.pagina-home .hc-base { padding-top: 16px; }
  body.pagina-home .hc-base .hero-ctas { margin-top: 20px; }
  body.pagina-home .hc-base .hero-micro { margin-top: 12px; }
}

/* O rodape so abre mao do proprio preto quando existe o chao atras da tela
   (o js poe .tem-chao no html). Sem ele, no celular e em janela estreita,
   quem pinta o preto e o rodape, e a regra do tema que o deixa transparente
   para o X tem de perder. */
html.marca-x-ativa.fim-verde:not(.tem-chao) body.pagina-home .rodape {
  background: var(--rodape-fundo);
}