/* ==========================================================================
   Eletric neon · camada de brilho (v5, 09/11/2026)
   Entra depois de todas as folhas da pasta neon. A troca de cor e mecanica
   (neon.py + paleta.py); aqui ficam so as decisoes que o mapa nao faz.

   A regra que manda, e que vale para este arquivo inteiro:
   COR SUBSTITUI COR. Onde o site era preto, branco ou cinza, continua preto,
   branco ou cinza. Nenhum token neutro (--txt, --txt-2, --txt-3, --aco,
   --linha) e pintado aqui, e nenhum rotulo generico ganha cor por classe.
   O que esta escrito abaixo e sempre a troca de uma cor que ja existia.
   O sistema inteiro esta em SISTEMA-DE-COR.md.
   ========================================================================== */

:root {
  --neon-roxo: #9b5cff;       /* 5,1:1 no void: elemento grafico e fundo */
  --neon-roxo-hi: #bfa0ff;    /* 9,2:1: texto e rotulo pequeno */
  --neon-roxo-txt: #4a14b8;   /* 7,4:1 sobre o salvia */
  --neon-ciano: #00f5ff;      /* 14,8:1 */
  --neon-lima: #aaff00;       /* 16,2:1 */
  --neon-lima-hi: #c4ff4d;    /* 16,9:1 */
  --neon-magenta: #ff2bd6;    /* 6,3:1 */
  --void: #080808;

  /* Raios do hero da pagina de seguranca. Liam o --teal; agora leem um token
     proprio, para a cor deles nao arrastar a semantica de IA e agente junto.
     EM TESTE na lima: ela e a cor que o sistema reserva para o CTA, e o botao
     "Pedir auditoria de seguranca" fica do lado dos raios na mesma dobra. */
  /* O nome NAO pode ser --raio: esse e o token de arredondamento do tema
     (--raio: 14px, em base.css). Com o nome repetido, o meu passava por
     cima e todo border-radius: var(--raio) do site virava 0 (10/11/2026). */
  --cor-raio: #aaff00;

  /* O --papel e o --sage-claro tinham o mesmo hex (#dbdecd), e o mapa leva
     os dois ao cinza claro #f5f5f5. O papel (cards, fichas, o Mapa
     Operacional) fica branco, como os cards da insany sobre o cinza. */
  --papel: #ffffff;

  /* o CTA e o unico lugar onde a lima aparece cheia (era o laranja do botao) */
  --acao: var(--neon-lima);
  --acao-hi: var(--neon-lima-hi);
  --acao-ink: var(--void);
}

/* Fundo: o preto do cartaz, com o bloom roxo so no topo. Era preto liso,
   entao isto e a unica licenca do arquivo, e esta aqui porque a referencia
   e um fundo que acende. Alfa baixo, para nao mexer no contraste do texto. */
body {
  background-color: var(--void);
  background-image: radial-gradient(76% 46% at 50% -12%, rgba(155, 92, 255, .20), transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ---------- Botao principal (era laranja cheio) ----------
   Lima solida com tinta preta: 16,2:1. O halo do cartaz entra em duas
   camadas, lima por dentro e roxo por fora, e por cima de uma sombra de
   verdade, com deslocamento e desfoque, para o botao ter profundidade e
   nao so brilho. */
.btn--pri { background: var(--neon-lima); color: var(--void); }
.btn--pri:hover, .btn--pri:focus-visible { background: var(--neon-lima-hi); color: var(--void); }

.btn--pri:not(.topo-cta) {
  border-radius: 12px;
  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, .34),
    0 0 72px rgba(155, 92, 255, .50);
}
.btn--pri:not(.topo-cta):hover,
.btn--pri:not(.topo-cta):focus-visible {
  box-shadow:
    0 14px 30px -14px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(170, 255, 0, .90),
    0 0 30px rgba(170, 255, 0, .55),
    0 0 110px rgba(155, 92, 255, .78),
    inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* o CTA do header era creme solido; vira a pilula de lima */
.topo-cta.btn--pri {
  background: var(--neon-lima); color: var(--void);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .9), 0 0 16px rgba(170, 255, 0, .34), 0 0 48px rgba(155, 92, 255, .45);
}
.topo-cta.btn--pri:hover, .topo-cta.btn--pri:focus-visible {
  background: var(--neon-lima-hi); color: var(--void);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .95), 0 0 22px rgba(170, 255, 0, .55), 0 0 70px rgba(155, 92, 255, .65);
}

/* o secundario acendia em laranja; acende em roxo, nao em lima: a lima e
   so do botao principal */
.btn--sec:hover, .btn--sec:focus-visible {
  color: var(--neon-roxo-hi);
  box-shadow: 0 0 0 1px rgba(155, 92, 255, .50), 0 0 34px rgba(155, 92, 255, .40);
}

/* ---------- Estados que ja eram coloridos ---------- */
/* o sublinhado do menu seguia --acao, que agora e a lima do botao */
.menu a::after, .menu-gatilho::after { background: var(--neon-roxo); }
.menu a:hover::after, .menu a:focus-visible::after,
.menu-gatilho:hover::after, .menu-gatilho:focus-visible::after,
.menu-gatilho[aria-expanded="true"]::after { box-shadow: 0 0 10px rgba(155, 92, 255, .85); }

:focus-visible { outline-color: var(--neon-roxo); }

/* Superficies do navegador, que nao pertencem a design system nenhum:
   selecao e barra de rolagem saem do padrao do browser para a paleta. */
::selection { background: var(--neon-roxo); color: #ffffff; }
::-webkit-scrollbar { width: 10px; background: var(--void); }
::-webkit-scrollbar-thumb { background: rgba(155, 92, 255, .40); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(155, 92, 255, .60); }

/* ---------- Salvia palido ----------
   A lima sobre o claro da 1,1:1 e some; o roxo escuro da 9,5:1 sobre #f5f5f5. O realce da
   dobra clara, que era o laranja escuro, vira esse roxo. O botao inverte,
   porque nenhum tom da lima se sustenta sobre o salvia. */
.tom-claro, .rodape {
  --azul: var(--neon-roxo-txt);
  --azul-claro: var(--neon-roxo-txt);
  --azul-ink: #ffffff;
  --acao: #0b0b0d;
  --acao-hi: #1a1a22;
  --acao-ink: var(--neon-lima);
}
:is(.tom-claro, .rodape) .btn--pri { background: #0b0b0d; color: var(--neon-lima); }
:is(.tom-claro, .rodape) .btn--pri:hover,
:is(.tom-claro, .rodape) .btn--pri:focus-visible { background: #1a1a22; color: var(--neon-lima-hi); }
:is(.tom-claro, .rodape) .btn--pri:not(.topo-cta) {
  box-shadow: 0 12px 28px -16px rgba(11, 11, 13, .85), 0 0 0 1px rgba(74, 20, 184, .28);
}
:is(.tom-claro, .rodape) .btn--pri:not(.topo-cta):hover,
:is(.tom-claro, .rodape) .btn--pri:not(.topo-cta):focus-visible {
  box-shadow: 0 16px 34px -16px rgba(11, 11, 13, .95), 0 0 0 1px rgba(74, 20, 184, .50);
}

/* O halo na borda das dobras claras foi testado em 09/11/2026 e tirado a
   pedido do Claudio. A dobra clara em lima neon, idem: as duas coisas ficam
   fora de proposito, e o SISTEMA-DE-COR.md registra o porque. */

/* ---------- Escuro dentro do claro (11/11/2026) ----------
   Painel escuro que mora numa dobra clara (.tom-escuro, .tela-escura)
   herdava o roxo escuro #4a14b8, feito para texto sobre o salvia, e o
   desenhava sobre o preto: 1,9:1, quase invisivel. Dentro do escuro o
   roxo volta a ser o do escuro, com a mesma divisao de papel do resto:
   #9b5cff em traco e preenchimento (5,1:1, acima do piso de 3:1 de
   elemento grafico) e #bfa0ff em texto (9,2:1, acima do piso de 7:1 da
   casa para roxo pequeno no escuro). O botao principal tambem volta a
   ser a pilula lima: a pilula quase preta das dobras claras sumia ali. */
:is(.tom-claro, .rodape) :is(.tom-escuro, .tela-escura) {
  --azul: var(--neon-roxo);
  --azul-claro: var(--neon-roxo-hi);
  /* a tinta que escreve SOBRE o roxo volta junto com ele: a dobra clara a
     deixa branca (para o roxo escuro dela), e branco sobre #9b5cff da
     3,9:1. Com a tinta escura, 5,0:1 (10/11/2026) */
  --azul-ink: var(--void);
  --acao: var(--neon-lima);
  --acao-hi: var(--neon-lima-hi);
  --acao-ink: var(--void);
}
:is(.tom-claro, .rodape) :is(.tom-escuro, .tela-escura) .btn--pri {
  background: var(--neon-lima); color: var(--void);
}
:is(.tom-claro, .rodape) :is(.tom-escuro, .tela-escura) .btn--pri:hover,
:is(.tom-claro, .rodape) :is(.tom-escuro, .tela-escura) .btn--pri:focus-visible {
  background: var(--neon-lima-hi); color: var(--void);
}

/* ---------- "Suporte · Contato" no desenho do menu (11/11/2026) ----------
   Ao lado dos links do menu (Montserrat 500, .92rem, caixa normal), o par
   vinha em Funnel Display 13px, caixa alta e cinza: parecia outra fonte.
   Passa a ter exatamente o desenho do menu, com a mesma cor e o mesmo
   apagado de 82% que acende no hover. */
.topo-util {
  font-family: var(--f-txt); font-size: .92rem; font-weight: 500;
  letter-spacing: .005em; text-transform: none; color: var(--creme);
}
.topo-util a { color: var(--creme); opacity: .82; transition: opacity calc(.25s * var(--motion)); }
.topo-util a:hover, .topo-util a:focus-visible { color: var(--creme); opacity: 1; }

/* ==========================================================================
   Leitura: os avisos que sobravam nas ilustracoes (10/11/2026)
   A auditoria de leitura acusava texto de 8 a 12px e tracos finos abaixo dos
   pisos da casa em cinco paginas. Nenhum era da subida para a producao: sao
   valores cravados nas folhas das paginas, que o mapa de cores levou do
   laranja ao roxo mantendo a transparencia. Cada linha abaixo diz de quanto
   para quanto foi.
   ========================================================================== */
/* /desenvolvimento-de-software/: "SSO" e "API" em 8px, roxo claro a 85%.
   6,8:1 -> 8,9:1 (piso de roxo pequeno no escuro: 7:1) */
body.neon-teste .mods-rot { fill: #bfa0ff; }
/* os fios que ligam os modulos, e o fio do ERP na esteira de
   /automacao-de-processos/: roxo a 60%. 2,5:1 -> 3,8:1 (piso de traco: 3:1) */
body.neon-teste .mods-linha,
body.neon-teste .est-linha--erp { stroke: rgba(155, 92, 255, .85); }
/* o desenho de grade dos cards de frente fora da home (/obrigado/): o mesmo
   traco a 70% que a home ja corrigia so para ela. 2,9:1 -> 4,7:1 */
body.neon-teste .frente-desenho--grade .fd-linha { stroke-opacity: 1; }
/* /obrigado/diagnostico/: o selo "proximo passo" usa a cor do passo sobre o
   veu dela mesma. No roxo dava 5,0:1 em 9px; clareado com branco, 8,5:1.
   Vale para qualquer cor de passo: todas ficam mais claras, nenhuma muda. */
body.neon-teste .obr-traj .traj-agora { color: color-mix(in srgb, var(--c) 60%, #ffffff); }
/* /seo-para-empresas/: as telas de site de mentira sao claras por desenho
   (#f3f4f6) e o cinza dos rotulos dava 4,4:1; o aviso "montado com
   JavaScript" dava 2,6:1 sobre o branco. Os dois vao a 5,5:1 ou mais. */
body.neon-teste .robo-tela .robo-cab,
body.neon-teste .robo-tela .robo-conta,
body.neon-teste .robo-spec dt,
body.neon-teste .aud-spec-vazio .mono { color: #5c6370; }
/* o mesmo contador existe no painel escuro ao lado (o HTML que o robo le):
   la o cinza original dava 4,0:1. Mais claro, 7,5:1. */
body.neon-teste .robo-html .robo-conta { color: #9aa3b2; }

/* ==========================================================================
   Sem fonte serifada nem cursiva, em hipotese alguma (pedido do Claudio,
   10/11/2026). O tema definia --f-serif como Instrument Serif e a usava na
   frase de destaque das paginas de servico (.srv-frase). O token passa a
   valer Inter: qualquer uso dele, de hoje ou futuro, sai sem serifa. A
   frase de destaque ganha o desenho do display da casa (500, -0,03em),
   para nao parecer um paragrafo solto. A /estande/ fica fora da camada e
   recebe a mesma troca pelo mu-plugin (dpxl_neon_sem_serifa).
   ========================================================================== */
body.neon-teste { --f-serif: "Inter", ui-sans-serif, system-ui, sans-serif; }
body.neon-teste .srv-frase { font-family: var(--f-disp); font-weight: 500; letter-spacing: -.03em; font-style: normal; }
/* o termo em latim da /estande/ (.est-fides-lat) era serifado e em italico */
body.neon-teste .est-fides-lat { font-family: inherit; font-style: normal; }

/* ==========================================================================
   Fim do rodape no celular (10/11/2026)
   A barra fixa de baixo (.barra-mobile, 70px, com "Mapear minha operacao")
   aparece depois do hero e fica ate o fim da pagina, mas o rodape so tinha
   40px de respiro embaixo: os ultimos 70px, onde mora o "Voltar para o
   topo", ficavam atras da barra. E do tema, nao da camada; o Claudio viu no
   celular. O rodape ganha o respiro da barra, mais a area segura dos
   iPhones, e mais a altura do aviso de cookies enquanto ele esta aberto
   (a barra sobe para cima dele).
   ========================================================================== */
@media (max-width: 1023px) {
  body.neon-teste .rodape {
    padding-bottom: calc(40px + 70px + env(safe-area-inset-bottom, 0px));
  }
  html.ck-pendente body.neon-teste .rodape {
    padding-bottom: calc(40px + 70px + var(--dp-cookies-h, 0px) + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   Cursor de link: o mascote de pixel (10/11/2026)
   Sobre link e botao o ponteiro vira o bichinho antigo da Digital Pixel,
   pedido do Claudio. E o cursor nativo do navegador com uma imagem (26 x 26,
   e 52 x 52 para tela de alta densidade), desenhada em mascote.py: corpo no
   claro do site (#f5f5f5) com borda na tinta (#090909) e um braco
   curto em diagonal, na altura da cabeca, afinando ate a ponta. O ponto de clique e
   essa ponta (1, 5). So com mouse de verdade; se a imagem nao carregar, cai
   na maozinha de sempre.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  body.neon-teste :is(a[href], button:not(:disabled), summary, label[for], [role="button"], input[type="submit"]) {
    cursor: url("../img/mascote-cursor-v6.png") 1 5, pointer;
    cursor: -webkit-image-set(url("../img/mascote-cursor-v6.png") 1x, url("../img/mascote-cursor-v6-2x.png") 2x) 1 5, pointer;
    cursor: image-set(url("../img/mascote-cursor-v6.png") 1x, url("../img/mascote-cursor-v6-2x.png") 2x) 1 5, pointer;
  }
}