/* =====================================================================
   PREMIUM (23/09/2026): a camada de ambiente do painel, por cima de tudo.

   O dono: "a estética não mudou quase nada, não tem efeito nem animação".
   Duas causas. A primeira era o Windows dele em "sem animações": o painel
   obedecia à preferência do sistema e desligava TUDO (cascata, contagem,
   neon). Agora o movimento é do painel, com um interruptor próprio em
   Preferências (html.menos-movimento). A segunda era esta folha não existir:
   o fundo era preto chapado e os cartões, caixas com borda.

   Esta folha entra DEPOIS do scouter.css e só faz ambiente: fundo com grade e
   brilho que deriva, luz na borda de cima dos números, cartão que acende ao
   passar o mouse, linha da tabela com traço, ponto do título respirando.
   Nada aqui muda medida nem posição de nada. ===================================================================== */

/* ---- o fundo: grade fina + brilho vermelho que deriva devagar ---- */
body.v3 { isolation: isolate; }
body.v3::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 25%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 55% at 50% 0%, #000 25%, transparent 100%);
}
body.v3::after {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 26% at 22% 8%, rgba(224, 32, 63, .16), transparent 70%),
    radial-gradient(ellipse 30% 22% at 82% 92%, rgba(224, 32, 63, .08), transparent 70%);
  animation: deriva-do-fundo 26s ease-in-out infinite alternate;
}
@keyframes deriva-do-fundo { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(3%, 4%, 0); } }
html.menos-movimento body.v3::after { animation: none; }

/* ---- os números: uma luz na borda de cima e o valor com brilho ---- */
.kpi, .numeros .numero { overflow: hidden; }
.kpi::before, .numeros .numero::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(224, 32, 63, .7), transparent);
  box-shadow: 0 0 14px rgba(224, 32, 63, .45);
}
.kpi strong, .numeros .numero strong { text-shadow: 0 0 22px rgba(255, 255, 255, .14); }

/* ---- o cartão acende ao passar o mouse (sem sair do lugar) ---- */
.cartao, .kpi, .numeros .numero, .servico { transition: border-color .25s var(--curva), box-shadow .3s var(--curva); }
.cartao:hover, .kpi:hover, .numeros .numero:hover, .servico:hover {
  border-color: rgba(224, 32, 63, .32);
  box-shadow: 0 0 0 1px rgba(224, 32, 63, .12), 0 0 46px rgba(224, 32, 63, .12), 0 18px 50px rgba(0, 0, 0, .4);
}

/* ---- o ponto do título de cada cartão respira, depois que a tela assentou ---- */
body.vida-pronta .cartao-cabeca h2::before, body.vida-pronta .cartao-cabeca > strong::before { animation: respira-o-ponto 2.6s ease-in-out infinite; }
@keyframes respira-o-ponto { 50% { opacity: .45; box-shadow: 0 0 0 0 rgba(224, 32, 63, 0); } }
html.menos-movimento .cartao-cabeca h2::before { animation: none !important; }

/* ---- a linha da tabela: traço vermelho e fundo ao passar o mouse ---- */
.tabela tbody tr { transition: background-color .18s var(--curva); }
.tabela tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.tabela tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--vermelho); }

/* ---- o botão principal: luz interna, como no site ---- */
.acao.principal, .acao-ligar { box-shadow: 0 6px 20px rgba(224, 32, 63, .28), inset 0 1px 0 rgba(255, 255, 255, .25); }
.acao.principal:hover, .acao-ligar:hover { box-shadow: 0 10px 28px rgba(224, 32, 63, .4), inset 0 1px 0 rgba(255, 255, 255, .3); }

/* ---- o trilho: o ícone acende ao passar, a seção tem um fio ---- */
.trilho-nav a:hover .icone { filter: drop-shadow(0 0 6px rgba(224, 32, 63, .5)); }

/* ---- no celular o fundo fica parado e sem grade (bateria e leitura) ---- */
@media (max-width: 920px) {
  body.v3::before { display: none; }
  body.v3::after { animation: none; }
}