/* Brasec — ajustes de APARÊNCIA (sem alterar textos, menu ou janelas).
   Desfazer: remover a linha <link ... brasec-ajustes.css> do index.html. */

:root {
  --bx-neon: 41, 121, 255;      /* azul neon (rgb) */
  --bx-neon-claro: 96, 165, 255;
}

/* ---------- 1) Cartões: levantam, sombra por baixo e brilho neon azul ---------- */
.hairline-card:not(header .hairline-card):not(.h-16),
a.rounded-lg.font-display.font-semibold:not(header *) {
  transition: translate .28s cubic-bezier(.2, .8, .2, 1),
              box-shadow .28s ease, border-color .28s ease,
              background-color .28s ease, color .2s ease,
              opacity .6s, transform .6s;   /* mantém a entrada (.reveal) do site */
  will-change: translate;
}

.hairline-card:not(header .hairline-card):not(.h-16):hover,
.hairline-card:not(header .hairline-card):not(.h-16):focus-within {
  translate: 0 -6px;
  border-color: rgba(var(--bx-neon-claro), .65);
  background-color: #1a2744;
  box-shadow:
    0 18px 32px -10px rgba(0, 0, 0, .65),            /* sombra embaixo */
    0 0 0 1px rgba(var(--bx-neon), .35),               /* aro neon */
    0 0 22px rgba(var(--bx-neon), .38),                /* luz em volta */
    0 0 60px rgba(var(--bx-neon), .18);
}

/* ---------- 2) Botões ---------- */
a.rounded-lg.font-display.font-semibold:not(header *):hover,
a.rounded-lg.font-display.font-semibold:not(header *):focus-visible {
  translate: 0 -3px;
  box-shadow:
    0 14px 24px -8px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(var(--bx-neon-claro), .55),
    0 0 20px rgba(var(--bx-neon), .6),
    0 0 46px rgba(var(--bx-neon), .35);
}
a.rounded-lg.font-display.font-semibold:not(header *):active {
  translate: 0 -1px;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6), 0 0 14px rgba(var(--bx-neon), .5);
}

/* ---------- 3) Fundo: aurora azul e grade mais sofisticada ---------- */
.hero-surface {
  background:
    radial-gradient(760px 420px at 84% -8%, rgba(var(--bx-neon), .34), transparent 62%),
    radial-gradient(620px 380px at 6% 104%, rgba(0, 70, 200, .34), transparent 60%),
    radial-gradient(420px 260px at 52% 40%, rgba(96, 165, 255, .08), transparent 70%),
    repeating-linear-gradient(90deg, rgba(184, 201, 230, .05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(184, 201, 230, .04) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, #0a1128 0%, #0b1533 100%);
}

main section.border-t:not(.hero-surface) {
  background-image:
    radial-gradient(520px 260px at 100% 0%, rgba(var(--bx-neon), .10), transparent 70%),
    radial-gradient(420px 220px at 0% 100%, rgba(0, 70, 200, .12), transparent 70%);
}

/* Linha de luz sutil entre as seções */
main section.border-t {
  border-top-color: rgba(var(--bx-neon-claro), .16);
}

/* ---------- Acessibilidade: sem movimento para quem pede ---------- */
@media (prefers-reduced-motion: reduce) {
  .hairline-card,
  a.rounded-lg.font-display.font-semibold { transition: none !important; }
  .hairline-card:hover, a.rounded-lg.font-display.font-semibold:hover { translate: 0 0 !important; }
}

/* ================= FUNDO DISCRETO (2026-11-03) ================= */
/* Hero: camadas de efeito atrás do conteúdo */
.hero-surface { position: relative; isolation: isolate; }
.hero-surface > .container { position: relative; z-index: 2; }

/* Rede de pontos (canvas criado pelo JS) */
.bx-rede {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse 100% 95% at 55% 45%, #000 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 95% at 55% 45%, #000 50%, transparent 100%);
}

/* Brilho que "respira" */
.hero-surface::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(520px 320px at 78% 30%, rgba(var(--bx-neon), .16), transparent 70%),
    radial-gradient(460px 300px at 12% 80%, rgba(0, 90, 230, .14), transparent 70%);
  animation: bx-respira 9s ease-in-out infinite alternate;
}

/* Varredura: feixe de luz que cruza o hero de tempos em tempos */
.hero-surface::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 1;
  pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(var(--bx-neon-claro), .07) 55%, rgba(var(--bx-neon-claro), .22) 99%, transparent 100%);
  animation: bx-varre 14s linear infinite;
}

@keyframes bx-respira { from { opacity: .55; transform: scale(1); } to { opacity: 1; transform: scale(1.04); } }
@keyframes bx-varre {
  0%   { transform: translateY(-160px); opacity: 0; }
  6%   { opacity: 1; }
  38%  { opacity: 1; }
  44%  { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* Divisórias das seções: linha de luz em vez de reta lisa */
main section.border-t:not(.hero-surface) { position: relative; border-top-color: transparent; }
main section.border-t:not(.hero-surface)::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--bx-neon-claro), .5) 50%, transparent 100%);
  box-shadow: 0 0 14px rgba(var(--bx-neon), .35);
}

@media (prefers-reduced-motion: reduce) {
  .hero-surface::before, .hero-surface::after { animation: none; }
  .hero-surface::after { display: none; }
  .bx-rede { display: none; }
}

/* ================= SEÇÕES ABAIXO DO HERO (2026-11-03) ================= */
main section.border-t:not(.hero-surface) {
  isolation: isolate; overflow: clip;
  background-image:
    repeating-linear-gradient(90deg, rgba(184, 201, 230, .045) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(184, 201, 230, .035) 0 1px, transparent 1px 72px),
    radial-gradient(520px 260px at 100% 0%, rgba(var(--bx-neon), .12), transparent 70%),
    radial-gradient(420px 220px at 0% 100%, rgba(0, 70, 200, .14), transparent 70%);
}
main section.border-t:not(.hero-surface) > .container { position: relative; z-index: 2; }

.bx-rede-secao {
  opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse 100% 95% at 50% 50%, #000 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 100% 95% at 50% 50%, #000 45%, transparent 100%);
}

/* Luzes azuis que derivam devagar atrás das seções */
main section.border-t:not(.hero-surface)::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 600px; height: 600px; border-radius: 50%; top: -160px; right: -140px;
  background: radial-gradient(circle, rgba(var(--bx-neon), .20), transparent 68%);
  filter: blur(20px);
  animation: bx-deriva 16s ease-in-out infinite alternate;
}
main section.border-t:not(.hero-surface):nth-of-type(even)::after {
  top: auto; right: auto; bottom: -180px; left: -160px;
  background: radial-gradient(circle, rgba(0, 110, 255, .18), transparent 68%);
  animation-duration: 20s;
}
@keyframes bx-deriva {
  from { transform: translate(0, 0) scale(1); opacity: .6; }
  to   { transform: translate(-70px, 50px) scale(1.12); opacity: 1; }
}
/* seções com fundo mais claro: brilho ainda mais discreto */
main section.border-t.bg-navy-800\/40:not(.hero-surface):nth-of-type(n)::after {
  background: radial-gradient(circle, rgba(var(--bx-neon), .10), transparent 68%);
}

@media (prefers-reduced-motion: reduce) {
  main section.border-t:not(.hero-surface)::after { animation: none; }
}

/* ================= LINHAS-BOTÃO (lista de camadas da página Plataforma) ================= */
main button.group.rounded-xl.border:not(header *) {
  transition: translate .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease,
              border-color .28s ease, background-color .28s ease, opacity .6s, transform .6s;
}
main button.group.rounded-xl.border:not(header *):hover,
main button.group.rounded-xl.border:not(header *):focus-visible {
  translate: 0 -4px;
  border-color: rgba(var(--bx-neon-claro), .65);
  box-shadow:
    0 14px 26px -10px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(var(--bx-neon), .3),
    0 0 20px rgba(var(--bx-neon), .34),
    0 0 48px rgba(var(--bx-neon), .16);
}
/* linha do Kernel (verde): brilho verde, mantendo a identidade dela */
main button.group.rounded-xl.border[class*="border-ok"]:not(header *):hover,
main button.group.rounded-xl.border[class*="border-ok"]:not(header *):focus-visible {
  border-color: rgba(52, 211, 153, .75);
  box-shadow:
    0 14px 26px -10px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(52, 211, 153, .35),
    0 0 20px rgba(52, 211, 153, .32),
    0 0 48px rgba(52, 211, 153, .15);
}
@media (prefers-reduced-motion: reduce) {
  main button.group.rounded-xl.border:hover { translate: 0 0 !important; }
}

/* ================= CELULAR / TOQUE: versão leve (2026-11-03) ================= */
@media (max-width: 767px), (pointer: coarse) {
  main section.border-t:not(.hero-surface)::after { display: none; }   /* luzes desfocadas em movimento pesam */
  .hero-surface::before, .hero-surface::after { animation: none; }
  .hero-surface::after { display: none; }
  .bx-rede-secao { display: none; }
  .hairline-card, a.rounded-lg.font-display.font-semibold, main button.group.rounded-xl.border { will-change: auto; }
}

/* ================= CAIXINHAS DE CATEGORIA E CHIPS DE MÓDULO (card de família) ================= */
main a.group.rounded-lg.border.border-line:not(header *),
main a.chip:not(header *) {
  transition: translate .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease,
              border-color .28s ease, background-color .28s ease, color .2s ease;
}
main a.group.rounded-lg.border.border-line:not(header *):hover,
main a.group.rounded-lg.border.border-line:not(header *):focus-visible {
  translate: 0 -3px;
  border-color: rgba(var(--bx-neon-claro), .7);
  background-color: #12204a;
  box-shadow:
    0 10px 20px -8px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(var(--bx-neon), .3),
    0 0 16px rgba(var(--bx-neon), .4),
    0 0 36px rgba(var(--bx-neon), .16);
}
main a.chip:not(header *):hover,
main a.chip:not(header *):focus-visible {
  translate: 0 -2px;
  border-color: rgba(var(--bx-neon-claro), .75);
  box-shadow:
    0 8px 16px -6px rgba(0, 0, 0, .6),
    0 0 14px rgba(var(--bx-neon), .5),
    0 0 30px rgba(var(--bx-neon), .2);
}
@media (prefers-reduced-motion: reduce) {
  main a.group.rounded-lg.border.border-line:hover, main a.chip:hover { translate: 0 0 !important; }
}

/* ================= ABAS DE FAMÍLIA (lista à esquerda em /plataforma) ================= */
main button[role="tab"].rounded-lg.border:not(header *) {
  transition: translate .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease,
              border-color .28s ease, background-color .28s ease, color .2s ease;
}
main button[role="tab"].rounded-lg.border:not(header *):hover,
main button[role="tab"].rounded-lg.border:not(header *):focus-visible {
  translate: 0 -3px;
  border-color: rgba(var(--bx-neon-claro), .7);
  box-shadow:
    0 10px 20px -8px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(var(--bx-neon), .3),
    0 0 16px rgba(var(--bx-neon), .4),
    0 0 36px rgba(var(--bx-neon), .16);
}
/* aba selecionada: brilho fixo discreto */
main button[role="tab"][aria-selected="true"].rounded-lg.border:not(header *) {
  box-shadow: 0 0 14px rgba(var(--bx-neon), .28);
}
@media (prefers-reduced-motion: reduce) {
  main button[role="tab"]:hover { translate: 0 0 !important; }
}

/* ================= OUTRAS CAIXAS (varredura geral) ================= */
main a.rounded-lg.border.border-line:not(header *),
main .rounded-lg.border.border-line[class*="bg-navy-800"]:not(header *):not(dialog *),
main .rounded-xl.border.border-line[class*="bg-navy-800"]:not(header *):not(dialog *) {
  transition: translate .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease,
              border-color .28s ease, background-color .28s ease, opacity .6s, transform .6s;
}
main a.rounded-lg.border.border-line:not(header *):hover,
main .rounded-lg.border.border-line[class*="bg-navy-800"]:not(header *):not(dialog *):hover,
main .rounded-xl.border.border-line[class*="bg-navy-800"]:not(header *):not(dialog *):hover {
  translate: 0 -3px;
  border-color: rgba(var(--bx-neon-claro), .65);
  box-shadow:
    0 10px 20px -8px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(var(--bx-neon), .28),
    0 0 16px rgba(var(--bx-neon), .36),
    0 0 36px rgba(var(--bx-neon), .14);
}
@media (prefers-reduced-motion: reduce) {
  main a.rounded-lg.border:hover, main .rounded-lg.border[class*="bg-navy-800"]:hover,
  main .rounded-xl.border[class*="bg-navy-800"]:hover { translate: 0 0 !important; }
}

/* ================= FILTROS EM PÍLULA (Todos / Brasil / Nuvem ...) ================= */
main button[aria-pressed].rounded-lg:not(header *),
main button[aria-pressed].rounded-full:not(header *) {
  transition: translate .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease,
              border-color .25s ease, background-color .25s ease, color .2s ease;
}
main button[aria-pressed].rounded-lg:not(header *):hover,
main button[aria-pressed].rounded-lg:not(header *):focus-visible,
main button[aria-pressed].rounded-full:not(header *):hover,
main button[aria-pressed].rounded-full:not(header *):focus-visible {
  translate: 0 -2px;
  border-color: rgba(var(--bx-neon-claro), .75);
  box-shadow:
    0 8px 16px -6px rgba(0, 0, 0, .6),
    0 0 14px rgba(var(--bx-neon), .5),
    0 0 30px rgba(var(--bx-neon), .2);
}
/* filtro ativo (azul cheio): brilho fixo */
main button[aria-pressed="true"].bg-accu-500:not(header *) {
  box-shadow: 0 0 16px rgba(var(--bx-neon), .45);
}
@media (prefers-reduced-motion: reduce) {
  main button[aria-pressed]:hover { translate: 0 0 !important; }
}

/* ================= LINKS DO RODAPÉ: linha azul cresce da esquerda (mesma animação do menu) ================= */
footer a {
  position: relative;
  display: inline-block;
}
footer a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px; border-radius: 1px;
  background: #4d8dff;
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s ease !important;
  pointer-events: none;
}
footer a:hover::after,
footer a:focus-visible::after { transform: scaleX(1); }
footer a:hover, footer a:focus-visible { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  footer a::after { transition: none !important; }
}

/* ================= LEGENDAS NUMERADAS DAS TELAS (páginas de categoria) ================= */
main ol > li.rounded-lg.border {
  transition: translate .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease,
              opacity .5s, border-color .28s ease, background-color .28s ease;
}
main ol > li.rounded-lg.border:hover {
  translate: 0 -3px;
  opacity: 1 !important;
  border-color: rgba(var(--bx-neon-claro), .7);
  box-shadow:
    0 10px 20px -8px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(var(--bx-neon), .3),
    0 0 16px rgba(var(--bx-neon), .4),
    0 0 36px rgba(var(--bx-neon), .16);
}
@media (prefers-reduced-motion: reduce) {
  main ol > li.rounded-lg.border:hover { translate: 0 0 !important; }
}

/* ================= TELAS ILUSTRATIVAS (tabelas) E PERGUNTAS FREQUENTES ================= */
main table tbody tr {
  transition: background-color .25s ease, box-shadow .25s ease;
}
main table tbody tr:hover {
  background-color: rgba(var(--bx-neon), .14);
  box-shadow: inset 3px 0 0 rgba(var(--bx-neon-claro), .9), inset 0 0 22px rgba(var(--bx-neon), .22);
}
main details {
  transition: box-shadow .25s ease, background-color .25s ease;
}
main details:hover {
  background-color: #0e1a3d;
  box-shadow: inset 3px 0 0 rgba(var(--bx-neon-claro), .9), inset 0 0 22px rgba(var(--bx-neon), .16);
}

/* ================= JANELA DA TELA ILUSTRATIVA (moldura com 3 pontinhos) ================= */
main div.relative.overflow-hidden.rounded-2xl.border.border-line-strong.bg-navy-800 {
  transition: translate .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease,
              border-color .35s ease, opacity .6s, transform .6s;
}
main div.relative.overflow-hidden.rounded-2xl.border.border-line-strong.bg-navy-800:hover {
  translate: 0 -5px;
  border-color: rgba(var(--bx-neon-claro), .7);
  box-shadow:
    0 30px 60px -12px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(var(--bx-neon), .35),
    0 0 28px rgba(var(--bx-neon), .4),
    0 0 80px rgba(var(--bx-neon), .2);
}
@media (prefers-reduced-motion: reduce) {
  main div.relative.overflow-hidden.rounded-2xl.border.border-line-strong.bg-navy-800:hover { translate: 0 0 !important; }
}

/* ================= LINHAS E SELOS DA TABELA ILUSTRATIVA (ul > li em grid) ================= */
main ul > li.grid.border-b {
  transition: opacity .5s, transform .5s, background-color .25s ease, box-shadow .25s ease;
}
main ul > li.grid.border-b:hover {
  background-color: rgba(var(--bx-neon), .16);
  box-shadow: inset 3px 0 0 rgba(var(--bx-neon-claro), .95), inset 0 0 24px rgba(var(--bx-neon), .24);
}
/* selos de severidade (Crítica / Alta / Média / Baixa) */
main span.rounded-md.ring-1,
main li.grid span.rounded.ring-1 {
  transition: box-shadow .25s ease, translate .25s ease;
}
main span.rounded-md.ring-1:hover,
main li.grid:hover span.rounded.ring-1 {
  translate: 0 -1px;
  box-shadow: 0 0 0 1px rgba(var(--bx-neon-claro), .5), 0 0 12px rgba(var(--bx-neon), .55);
}

/* ================= EM NÚMEROS (caixa de estatísticas) ================= */
main div.grid.gap-px.overflow-hidden.rounded-xl.border.border-line {
  transition: translate .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease,
              border-color .3s ease, opacity .6s, transform .6s;
}
main div.grid.gap-px.overflow-hidden.rounded-xl.border.border-line:hover {
  translate: 0 -4px;
  border-color: rgba(var(--bx-neon-claro), .7);
  box-shadow:
    0 18px 32px -10px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(var(--bx-neon), .3),
    0 0 22px rgba(var(--bx-neon), .38),
    0 0 60px rgba(var(--bx-neon), .18);
}
main div.bg-navy-900.px-6.py-7 {
  transition: background-color .3s ease, box-shadow .3s ease;
}
main div.bg-navy-900.px-6.py-7:hover {
  background-color: #0e1a3d;
  box-shadow: inset 0 0 30px rgba(var(--bx-neon), .22);
}
@media (prefers-reduced-motion: reduce) {
  main div.grid.gap-px.overflow-hidden.rounded-xl.border:hover { translate: 0 0 !important; }
}

/* ===== Abas dentro de faixa com rolagem: não sobem (o topo era cortado) e o brilho fica curto ===== */
div:has(> button[role="tab"]) { padding: 8px 10px; margin: -8px -10px; }
main button[role="tab"]:hover,
main button[role="tab"]:focus-visible {
  translate: 0 0;
  box-shadow: 0 0 0 1px rgba(var(--bx-neon), .35), 0 0 8px rgba(var(--bx-neon), .55);
}
main button[role="tab"][aria-selected="true"] {
  box-shadow: 0 0 8px rgba(var(--bx-neon), .35);
}

/* ================= CHIPS (normas, frameworks, módulos — também os que não são link) ================= */
main .chip:not(header *) {
  transition: translate .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease,
              border-color .25s ease, color .2s ease;
}
main .chip:not(header *):hover {
  translate: 0 -2px;
  color: #fff;
  border-color: rgba(var(--bx-neon-claro), .75);
  box-shadow:
    0 8px 16px -6px rgba(0, 0, 0, .6),
    0 0 14px rgba(var(--bx-neon), .5),
    0 0 30px rgba(var(--bx-neon), .2);
}
@media (prefers-reduced-motion: reduce) {
  main .chip:hover { translate: 0 0 !important; }
}

/* ================= ETAPAS NUMERADAS: mesmo visual da página "Como funciona" (JS liga .bx-aceso / .bx-linha-acesa) ================= */
div.bx-num {
  background-color: #12204a; color: #b8c9e6; border-color: rgba(184, 201, 230, .28);
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
div.bx-num.bx-aceso {
  background-color: #1060ff; color: #fff; border-color: #4d8dff;
  box-shadow: 0 0 0 4px rgba(var(--bx-neon), .22), 0 0 16px rgba(var(--bx-neon), .55);
}
/* linha vertical entre as etapas: enche de cima para baixo */
div.bx-num + div.w-px {
  background-image: linear-gradient(to bottom, #4d8dff, #1060ff);
  background-repeat: no-repeat; background-position: top; background-size: 100% 0%;
  transition: background-size .7s ease-out;
}
div.bx-num + div.w-px.bx-linha-acesa { background-size: 100% 100%; }

/* ================= MENU: traço azul embaixo também em Soluções, Sobre, Blog, Contato (a pedido) ================= */
header nav.hidden > a {
  position: relative;
}
header nav.hidden > a::after {
  content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; border-radius: 1px;
  background: #4d8dff;
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s ease;
  pointer-events: none;
}
header nav.hidden > a:hover::after,
header nav.hidden > a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  header nav.hidden > a::after { transition: none; }
}