/* ==========================================================================
   LAYOUT DA INSANY NAS DEMAIS PAGINAS (11/11/2026)
   O desenho aprovado na home (home.css) levado ao resto do site. A home NAO
   passa por aqui (:not(.pagina-home)): ela continua com o home.css, que e a
   referencia e ja foi aprovada. O que muda numa, muda na outra.

   Sao as mesmas decisoes, medidas na insany.com.br em 1530x880:
     - pagina clara #f5f5f5; o escuro vira ilha #0d0d0d, raio 25px, a 6px
       da borda da janela
     - header chapado no claro, fixo, acima da caixa do hero
     - Inter de 400 a 700; display em 600 com -0,06em
     - cards brancos sobre o claro, FAQ em cards separados
     - um vao so entre as dobras

   O ritmo claro/escuro: as paginas internas eram quase todas escuras (ate
   seis dobras pretas seguidas). O mu-plugin clareia, no HTML, uma de cada
   duas dobras escuras seguidas, como na home, e marca essas com
   .neon-clara. A lista do que nunca clareia esta no dpxl-neon.php.
   ========================================================================== */

body.neon-teste:not(.pagina-home) {
  --lay-topo: 72px;
  --lay-vao: 6px;
  --lay-raio: 25px;
  --lay-dobra: clamp(64px, 7vw, 112px);
  --insany-claro: #f5f5f5;
  --insany-escuro: #0d0d0d;
  --sage-claro: #f5f5f5;

  --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;
  /* o header deixou de flutuar por cima do hero: quem calcula folga pelo
     header (ancoras, titulos presos) passa a contar so a barra */
  --topo-h: var(--lay-topo);
  --topo-min: var(--lay-topo);

  background: var(--insany-claro);
  background-image: none;
  padding-top: var(--lay-topo);
  letter-spacing: -.02em;
}

/* ==========================================================================
   1. Header chapado no claro (igual ao da home)
   ========================================================================== */
body.neon-teste:not(.pagina-home) .topo {
  height: var(--lay-topo);
  background: var(--insany-claro);
  pointer-events: auto;
}
body.neon-teste:not(.pagina-home) .topo-in,
body.neon-teste:not(.pagina-home) .topo--min .topo-in,
body.neon-teste:not(.pagina-home) .topo--aberto .topo-in {
  margin: 0 auto;
  height: var(--lay-topo);
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
body.neon-teste:not(.pagina-home) .topo-in::before { display: none; }
body.neon-teste:not(.pagina-home) .topo-logo img { filter: brightness(0); }

body.neon-teste:not(.pagina-home) .menu a,
body.neon-teste:not(.pagina-home) .menu-gatilho {
  color: #090909; opacity: 1;
  font-weight: 600; font-size: .95rem; letter-spacing: -.04em;
}
body.neon-teste:not(.pagina-home) .topo-util,
body.neon-teste:not(.pagina-home) .topo-util a {
  color: #090909; opacity: 1;
  font-weight: 600; font-size: .95rem; letter-spacing: -.04em;
  text-transform: none;
}
body.neon-teste:not(.pagina-home) .topo-util a:hover,
body.neon-teste:not(.pagina-home) .topo-util a:focus-visible {
  color: #090909; text-decoration: underline; text-underline-offset: 4px;
}
body.neon-teste:not(.pagina-home) .topo-cta.btn--pri {
  background: #090909; color: #ffffff; box-shadow: none;
}
body.neon-teste:not(.pagina-home) .topo-cta.btn--pri:hover,
body.neon-teste:not(.pagina-home) .topo-cta.btn--pri:focus-visible {
  background: #262626; color: #ffffff; box-shadow: none;
}
body.neon-teste:not(.pagina-home) .topo-cta .cta-circ { background: #ffffff; color: #090909; }
body.neon-teste:not(.pagina-home) .hicon { color: #090909; border-color: rgba(9, 9, 9, .18); }

/* ==========================================================================
   2. O claro: tokens neutros nas dobras claras e no rodape
   Mesmos valores da home. Contraste sobre #f5f5f5: titulo 18,4:1, corpo
   15,1:1, apoio 9,4:1, terciario 5,1:1.
   ========================================================================== */
body.neon-teste:not(.pagina-home) :is(.tom-claro, .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);
  --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);
  color: var(--txt);
}

/* ==========================================================================
   3. O escuro vira ilha
   O hero, toda dobra escura e o artigo do blog saem da largura cheia e
   viram caixas #0d0d0d. Duas caixas seguidas ficam a 6px.
   ========================================================================== */
body.neon-teste:not(.pagina-home) main > :is(section:not(.tom-claro), article.post) {
  margin-inline: var(--lay-vao);
  border-radius: var(--lay-raio);
  background-color: var(--insany-escuro);
  overflow: hidden;
}
body.neon-teste:not(.pagina-home) main > :is(section:not(.tom-claro), article.post)
  + :is(section:not(.tom-claro), article.post) {
  margin-top: var(--lay-vao);
}
body.neon-teste:not(.pagina-home) .secao + .secao { border-top: 0; }

/* o hero comecava sob o header flutuante e somava a altura dele no topo */
body.neon-teste:not(.pagina-home) main > :is(.ia-hero, .ini-topo) {
  padding-top: clamp(48px, 5.5vw, 88px);
}
body.neon-teste:not(.pagina-home) main > article.post { padding-top: clamp(48px, 5.5vw, 88px); }
/* o hero das subpaginas de cases (cases.css: .cs-hero--sub) tinha 8px no pe,
   porque no desenho antigo ele continuava na faixa de baixo. Virou caixa com
   raio e o titulo encostou na base (10/11/2026). Pe igual ao topo. */
body.neon-teste:not(.pagina-home) main > .cs-hero--sub {
  padding-bottom: clamp(48px, 5.5vw, 88px);
}

/* ==========================================================================
   4. Tipografia da referencia
   ========================================================================== */
:root :where(main) body.neon-teste:not(.pagina-home) :is(h1, h2, .h2),
body.neon-teste:not(.pagina-home) :is(h1, h2, .h2, .ia-h1) {
  font-weight: 600;
  letter-spacing: -.06em;
}
body.neon-teste:not(.pagina-home) main > :is(.ia-hero, .ini-topo) :is(h1, .ia-h1) { color: #ffffff; }

/* ==========================================================================
   5. Ilhas escuras dentro do claro
   Painel ou tela que nasceu escuro e mora numa dobra clara recebe de volta
   os tokens do escuro, com o roxo e a lima do escuro (Regra 3: roxo pequeno
   no escuro em #bfa0ff, 9,2:1).
   ========================================================================== */
body.neon-teste:not(.pagina-home) :is(.tom-claro, .rodape) :is(.planta, .tela-escura, .tom-escuro) {
  --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;
  --azul: var(--neon-roxo);
  --azul-claro: var(--neon-roxo-hi);
  --azul-ink: var(--void);
  --acao: var(--neon-lima);
  --acao-hi: var(--neon-lima-hi);
  --acao-ink: var(--void);
  color: var(--txt);
}
body.neon-teste:not(.pagina-home) :is(.tom-claro, .rodape) :is(.planta, .tela-escura, .tom-escuro) .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.neon-teste:not(.pagina-home) .tela-escura { box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .35); }
body.neon-teste:not(.pagina-home) .tom-claro .final-col {
  background: #ffffff;
  border-color: rgba(9, 9, 9, .08);
}

/* ==========================================================================
   6. Um vao so entre as dobras
   Todo bloco tem o mesmo respiro. Duas dobras claras seguidas nao somam os
   dois (a segunda perde o de cima), e o rodape, que e claro, perde o dele
   quando vem depois de uma dobra clara.
   ========================================================================== */
body.neon-teste:not(.pagina-home) main > .secao:not(.secao--montagem) { padding-block: var(--lay-dobra); }
/* so a borda de fora da dobra: numa dobra com dois .wrap (titulo num, peca
   no outro) o fim do primeiro e o respiro entre os dois e fica */
body.neon-teste:not(.pagina-home) main > .secao > .wrap:first-of-type > :first-child { margin-top: 0; }
body.neon-teste:not(.pagina-home) main > .secao > .wrap:last-of-type > :last-child { margin-bottom: 0; }
body.neon-teste:not(.pagina-home) main > .secao.tom-claro + .secao.tom-claro { padding-top: 0; }
body.neon-teste:not(.pagina-home) .rodape { padding-top: 0; }
body.neon-teste:not(.pagina-home) main:has(> :last-child:not(.tom-claro)) ~ .rodape { padding-top: var(--lay-dobra); }

/* ==========================================================================
   7. FAQ no desenho da insany (o mesmo da home)
   ========================================================================== */
body.neon-teste:not(.pagina-home) .secao.faq .faq-in {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 112px);
}
:root :where(main) body.neon-teste:not(.pagina-home) .secao.faq .h2,
body.neon-teste:not(.pagina-home) .secao.faq .h2 {
  font-size: clamp(48px, 5.4vw, 88px);
  line-height: .92;
  letter-spacing: -.06em;
  font-weight: 600;
  color: #090909;
}
body.neon-teste:not(.pagina-home) .secao.faq .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.neon-teste:not(.pagina-home) .secao.faq .faq-lista details {
  background: #ffffff;
  border: 0; border-radius: 14px;
  padding: 0 clamp(20px, 1.8vw, 28px);
}
body.neon-teste:not(.pagina-home) .secao.faq .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.neon-teste:not(.pagina-home) .secao.faq .faq-lista summary:hover { color: #090909; }
body.neon-teste:not(.pagina-home) .secao.faq .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.neon-teste:not(.pagina-home) .secao.faq .faq-r { color: #5c5c5c; }
body.neon-teste:not(.pagina-home) .secao.faq .faq-r > :last-child { padding-bottom: clamp(18px, 1.6vw, 24px); }

@media (max-width: 1023px) {
  body.neon-teste:not(.pagina-home) main > :is(.ia-hero, .ini-topo) { padding-top: 40px; }
  body.neon-teste:not(.pagina-home) .secao.faq .faq-in { grid-template-columns: 1fr; }
}

/* 8. Os selos de mecanismo (.mec) no claro saem do claro.css, que troca o
   --c-claro de cada variante e devolve o original dentro de ilha escura.
   A regra que ficava aqui pintava o selo de roxo escuro ate dentro das
   telas escuras (1,8:1). */

/* ==========================================================================
   9. Tokens de pagina no claro
   Algumas folhas declaram cores proprias no body da pagina (.pagina-srv,
   .pagina-ss): a "peca" escura dos diagramas, o aco e o ciano de texto. Numa
   dobra clara a peca vira o card branco e o texto, a versao escura da cor
   (as mesmas do claro.css). Dentro de ilha escura, os valores originais.
   ========================================================================== */
body.neon-teste:not(.pagina-home) .tom-claro {
  --peca: #ffffff;
  --aco-claro: #3a4250;
  --teal-claro: #00585c;
  --proto: #4a14b8;
}
body.neon-teste:not(.pagina-home) .tom-claro :is(.tom-escuro, .tela-escura, .planta) {
  --peca: #0b0e13;
  --aco-claro: #b9c2d0;
  --teal-claro: #5fd9cd;
  --proto: #b79cff;
}

/* o nome de cada trilha do blog pinta a palavra-chave com a cor cheia da
   familia (--f, ciano 1,2:1 no claro); no claro usa a versao de texto */
body.neon-teste:not(.pagina-home) .tom-claro .ins-frente .faixa-nome b { color: var(--f-claro, var(--txt-tit)); }

/* No celular o titulo do hero, em 600 e -0,06em, ficou mais largo que a
   caixa: "Desenvolvimento" passava da borda e a caixa (overflow hidden)
   cortava a ultima letra. Ate 560px ele acompanha a largura da tela. */
@media (max-width: 560px) {
  body.neon-teste:not(.pagina-home) main > :is(.ia-hero, .ini-topo) :is(h1, .ia-h1) {
    font-size: clamp(2rem, 10.6vw, 3.4rem);
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* ==========================================================================
   Menu principal em Montserrat (10/11/2026)
   Pedido do gestor, com o Claudio de acordo: so o menu principal volta para
   a fonte de antes, a do desenho original e a do site no ar. O resto segue
   em Inter. Volta o desenho original do texto (500, .92rem, .005em): o
   -0,04em era medido para a Inter e aperta a Montserrat. A cor fica #090909,
   que e o que le no header claro. "Suporte · Contato" acompanha o menu
   (pedido de 10/11), e o menu do celular tambem, que e o mesmo menu.
   A Montserrat ja vem carregada (400 a 800), nao custa fonte nova.
   ========================================================================== */
body.neon-teste:not(.pagina-home) :is(.menu a, .menu-gatilho, .topo-util, .topo-util a) {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500; font-size: .92rem; letter-spacing: .005em;
}
body.neon-teste:not(.pagina-home) :is(.mm-gatilho, .mm-links a, .mm-painel a) {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .005em;
}

/* ==========================================================================
   Controle de antes e depois dos cases (10/11/2026)
   O puxador mora sobre a imagem: circulo escuro com seta branca. Na dobra
   clara o claro.py embranquece o circulo (como faz com todo card escuro) e
   a seta, branca, sumia. No claro a seta vira tinta e o circulo ganha
   contorno, para aparecer tambem sobre imagem clara. Dentro de painel
   escuro o circulo volta a ser escuro e a seta volta a ser branca.
   ========================================================================== */
body.neon-teste:not(.pagina-home) .tom-claro .ad-pega {
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(9, 9, 9, .28), 0 6px 16px rgba(0, 0, 0, .35);
}
body.neon-teste:not(.pagina-home) .tom-claro .ad-pega svg { stroke: #090909; }
body.neon-teste:not(.pagina-home) .tom-claro :is(.tom-escuro, .tela-escura, .planta) .ad-pega svg { stroke: #ffffff; }

/* ==========================================================================
   Topo do blog (10/11/2026)
   O cabecalho do post (.post-topo) e a primeira secao da lista
   (.secao--primeira) guardavam a folga para passar por baixo do header
   flutuante: altura do header + 52px e + 56px. Com o header fora da caixa,
   essa folga somava com o respiro da propria caixa: 212px ate a trilha no
   post. Os dois ficam com o respiro padrao dos heroes, e so ele.
   ========================================================================== */
body.neon-teste:not(.pagina-home) main > article.post .post-topo { padding-top: 0; }
body.neon-teste:not(.pagina-home) main > .secao--primeira { padding-top: clamp(48px, 5.5vw, 88px); }

/* ==========================================================================
   Aviso "Nao mande senhas por e-mail" (/contato/ e /obrigado/projeto/)
   O cadeado e a borda eram lima (o ambar de atencao) e a dobra clareou:
   1,1:1, o icone sumia. No claro vao para o verde escuro da propria lima
   (#3a5500, 7,8:1). Pego pela checagem de icone invisivel, 10/11/2026.
   ========================================================================== */
body.neon-teste:not(.pagina-home) .tom-claro :is(.sup-aviso, .obr-aviso) {
  border-color: rgba(58, 85, 0, .45);
  background-color: rgba(58, 85, 0, .05);
}
body.neon-teste:not(.pagina-home) .tom-claro :is(.sup-aviso, .obr-aviso) svg { stroke: #3a5500; }

/* ==========================================================================
   Pagina do evento (/estande/) no celular
   O hero dela e compacto de proposito, para o formulario caber na primeira
   tela de quem chega pelo QR Code. So o pe da caixa sobe de 28px para 40px,
   o piso de respiro; o topo e a primeira tela nao mudam.
   ========================================================================== */
@media (max-width: 1023px) {
  body.neon-teste:not(.pagina-home) main > .est-topo { padding-bottom: 40px; }
}

/* ==========================================================================
   Hero da /estande/ sem a tela cheia (10/11/2026)
   A caixa tinha min-height de 100svh e centralizava o conteudo, do tempo em
   que o header flutuava por cima. Com o header fora, a caixa passava da
   janela e sobravam ~200px vagos acima do titulo e do formulario. Ela passa
   a abracar o conteudo, com o mesmo respiro em cima e embaixo dos outros
   heroes. O formulario continua inteiro na primeira tela.
   ========================================================================== */
@media (min-width: 1024px) {
  body.neon-teste:not(.pagina-home) main > .est-topo {
    min-height: 0;
    padding-bottom: clamp(48px, 5.5vw, 88px);
  }
}

/* ==========================================================================
   Secao da Fides na /estande/: roxo e verde (10/11/2026)
   O nome, os numeros dos cards e as linhas de ligacao usavam o ciano, que
   era a cor de IA. O Claudio apontou as cores como erradas: a pagina fica
   nas duas cores da marca, como o hero dela. O nome "Fides" vai a lima
   (16:1); linhas e pontos ao roxo (#9b5cff, 5,0:1, piso de traco 3:1); os
   numeros pequenos ao roxo claro (#bfa0ff, 8,9:1, piso de 7:1).
   ========================================================================== */
body.neon-teste:not(.pagina-home) .est-fides .est-fides-nome,
body.neon-teste:not(.pagina-home) .est-fides .est-fides-lat { color: var(--neon-lima); }
body.neon-teste:not(.pagina-home) .est-fides .est-ligacoes path { stroke: var(--neon-roxo); }
body.neon-teste:not(.pagina-home) .est-fides .est-ligacoes circle { fill: var(--neon-roxo); }
body.neon-teste:not(.pagina-home) .est-fides .est-card-n { color: var(--neon-roxo-hi); }