/* =====================================================================
   TEMA OVERPOWER, v2 (22/09/2026): o painel HUD do Scouter.

   v1 foi "só mudou de cor" (o dono, no mesmo dia): "ainda está muito simples
   para um bot que custa 320 reais", "a logo, os três pontinhos e o 'tudo no
   ar' não ficaram organizados", "tem um espaço sobrando lá em cima", "várias
   partes têm espaços que ficam faltando". Esta versão reorganiza e preenche:

   - a MARCA: SCOUTER em ouro com a etiqueta OVERPOWER; o estado dos servicos
     saiu de baixo do nome e virou um painel proprio, com medidor de segmentos
     (o anel atras do logo foi tirado a pedido do dono);
   - a BARRA DE CIMA: o vão entre o título e a busca vira a leitura do Scouter
     (potência = serviços no ar, e o relógio), e a busca fica mais larga;
   - o CONTEÚDO usa a largura da tela (era 1320 px no meio de 1680);
   - EFEITOS: brasas subindo (overpower.js), grão de filme, brilho que passa,
     cartoes que acendem no hover, varredura nos numeros, o sinal de
     vida nos cartoes dos servicos.

   Tudo preso a html.tema-overpower (o servidor marca quem tem direito; o
   cedo.js liga antes da primeira pintura). O vermelho continua sendo o da
   marca e dos erros: aqui ele é a brasa ao lado do ouro.
   ===================================================================== */

@property --op-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

html.tema-overpower {
  --op-ouro: #f5b83d;
  --op-ouro-vivo: #f7c948;
  --op-ouro-claro: #fff0b3;
  --op-ouro-escuro: #d98a1e;
  --op-tinta-no-ouro: #2a1a00;
  --op-brasa: #e0203f;
  --op-texto-ouro: #f3dfae;

  --fundo: #080604;
  --fundo-2: #0d0a06;
  --painel: #14100a;
  --painel-2: #1b160e;
  --painel-3: #231c11;
  --linha: #2b2315;
  --linha-viva: #4a3a1c;
  --prata: #e3c98f;
  scrollbar-color: #7a5818 #0b0805;
}
html.tema-overpower ::selection { background: rgba(245, 184, 61, .35); color: #fff; }
html.tema-overpower ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a5761c, #6b4a12); border-radius: 8px; }

/* ================================================================ AMBIENTE */
/* as brasas (overpower.js) ficam atrás de tudo */
.brasas-do-fundo { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* grade dourada + o brilho que atravessa a tela */
html.tema-overpower body.v3::before {
  background:
    linear-gradient(rgba(245, 184, 61, .04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(245, 184, 61, .04) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 30%, transparent 100%);
}
/* O BRILHO QUE PASSA (otimizado 22/09/2026): era a posicao do fundo do
   body::before animada - a tela INTEIRA redesenhada a cada quadro. Agora e
   uma faixa propria (overpower.js cria) que so desliza: a placa de video faz. */
.brilho-que-passa {
  position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none;
  width: 46vw; height: 70vh;
  background: linear-gradient(112deg, transparent 20%, rgba(255, 224, 138, .07) 42%, rgba(255, 240, 179, .12) 50%, rgba(255, 224, 138, .07) 58%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
  transform: translate3d(-60vw, 0, 0); will-change: transform;
  animation: op-brilho-passa 11s ease-in-out infinite;
}
@keyframes op-brilho-passa { 0% { transform: translate3d(160vw, 0, 0); } 55%, 100% { transform: translate3d(-60vw, 0, 0); } }
/* as luzes que derivam: ouro em cima, brasa nos cantos, e o grão de filme */
html.tema-overpower body.v3::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .85  0 0 0 0 .5  0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px,
    radial-gradient(ellipse 38% 30% at 14% 4%, rgba(245, 184, 61, .20), transparent 70%),
    radial-gradient(ellipse 28% 22% at 90% 6%, rgba(224, 32, 63, .15), transparent 70%),
    radial-gradient(ellipse 36% 28% at 70% 98%, rgba(217, 138, 30, .12), transparent 70%),
    radial-gradient(ellipse 24% 20% at 4% 90%, rgba(224, 32, 63, .08), transparent 70%);
}

/* ================================================================ LARGURA */
/* o conteúdo usa a tela (era 1320 px no meio) */
html.tema-overpower .conteudo { max-width: 1680px; }

/* ================================================================ TRILHO */
html.tema-overpower .trilho-lateral {
  background:
    radial-gradient(140% 36% at 0% 0%, rgba(245, 184, 61, .12), transparent 62%),
    radial-gradient(120% 30% at 100% 100%, rgba(224, 32, 63, .08), transparent 60%),
    linear-gradient(180deg, #120d06 0%, #0a0704 50%, #0d0806 100%);
  border-right-color: rgba(245, 184, 61, .2);
  box-shadow: 16px 0 50px -30px rgba(245, 184, 61, .45);
}
html.tema-overpower .grupo-do-trilho span { color: #b99553; }

/* ---- a marca (22/09/2026, noite): o dono NAO gostou do anel atras do logo
   nem do OVERPOWER como assinatura. Voltou o logo como era, SCOUTER em ouro
   com o brilho de espelho (esse ele quis manter) e a etiqueta amarela
   OVERPOWER ao lado, com um reflexo que cruza. O estado dos servicos segue
   num painel proprio, embaixo. ---- */
html.tema-overpower .marca-do-trilho {
  grid-template-rows: var(--comando) auto;
  height: auto; border-bottom: 0;
  background: linear-gradient(180deg,
    transparent calc(var(--comando) - 1px), rgba(245, 184, 61, .18) calc(var(--comando) - 1px),
    rgba(245, 184, 61, .18) var(--comando), transparent var(--comando));
}
/* o brilho de espelho que passa pela marca */
html.tema-overpower .marca-do-trilho::after { background: linear-gradient(110deg, transparent 40%, rgba(255, 224, 138, .14) 50%, transparent 60%); }
html.tema-overpower .marca-do-trilho .mira {
  grid-row: 1; grid-column: 1;
  border-color: rgba(245, 184, 61, .45);
  box-shadow: 0 0 16px rgba(245, 184, 61, .22);
}
html.tema-overpower body.vida-pronta .marca-do-trilho .mira { animation: none; }
html.tema-overpower body.vida-pronta .marca-do-trilho .logo-do-trilho,
html.tema-overpower .marca-do-trilho:hover .logo-do-trilho { filter: drop-shadow(0 0 9px rgba(245, 184, 61, .55)); }
html.tema-overpower .mira-trava i { border-color: var(--op-ouro-vivo); }

html.tema-overpower .nome-da-marca { display: contents; }
html.tema-overpower .linha-da-marca {
  grid-row: 1; grid-column: 2;
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  padding-right: 12px;
}
html.tema-overpower .marca-do-trilho .linha-da-marca b {
  letter-spacing: .08em;
  background: linear-gradient(90deg, var(--op-ouro-vivo), var(--op-ouro-claro) 30%, #e0a020 55%, var(--op-ouro-vivo) 80%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: op-ouro-corre 3.6s linear infinite;
}
@keyframes op-ouro-corre { to { background-position: 300% 0; } }
/* a etiqueta amarela OVERPOWER, com o reflexo que cruza de tempos em tempos */
html.tema-overpower .marca-do-trilho .linha-da-marca em[data-op] {
  position: relative; overflow: hidden; font-size: 0; padding: 0 6px;
  background: linear-gradient(135deg, #ffd66b, var(--op-ouro) 45%, var(--op-ouro-escuro));
  box-shadow: 0 0 14px rgba(245, 184, 61, .6), 0 0 26px rgba(224, 32, 63, .2);
}
html.tema-overpower .marca-do-trilho .linha-da-marca em[data-op]::after {
  content: attr(data-op); font: 700 7.5px/1 var(--fonte-titulo); letter-spacing: .12em; color: var(--op-tinta-no-ouro);
}
html.tema-overpower .marca-do-trilho .linha-da-marca em[data-op]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%);
  transform: translateX(-130%); will-change: transform;
  animation: op-selo-brilha 4.2s ease-in-out infinite;
}
@keyframes op-selo-brilha { 0%, 60% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }

/* o estado dos serviços: um painel próprio, com medidor de segmentos */
html.tema-overpower .estado-da-marca {
  grid-row: 2; grid-column: 1 / -1;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px;
  margin: 12px 12px 10px; padding: 9px 12px;
  border: 1px solid rgba(245, 184, 61, .16); border-radius: 11px;
  background: linear-gradient(180deg, rgba(245, 184, 61, .07), rgba(0, 0, 0, .25));
  font: 700 9.5px/1 var(--fonte-titulo); letter-spacing: .2em; text-transform: uppercase;
}
html.tema-overpower .blips-da-marca { gap: 3px; }
html.tema-overpower .estado-da-marca .blip { width: 13px; height: 6px; border-radius: 2px; transform: skewX(-14deg); }
html.tema-overpower .estado-da-marca .resumo-servicos { justify-self: end; font-weight: 700; }
html.tema-overpower body.trilho-recolhido :is(.linha-da-marca, .estado-da-marca) { display: none; }

/* ---- o menu: brilho que passa no hover, anel que corre no item atual ---- */
html.tema-overpower .trilho-nav a::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 224, 138, .16) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .6s var(--curva);
}
html.tema-overpower .trilho-nav a:hover::before { transform: translateX(120%); }
html.tema-overpower .trilho-nav a:hover { color: #fff4d6; }
html.tema-overpower .trilho-nav a:hover .icone { color: var(--op-ouro); filter: drop-shadow(0 0 7px rgba(245, 184, 61, .6)); }
html.tema-overpower .trilho-nav a.atual {
  color: #fff4d6;
  background: linear-gradient(90deg, rgba(245, 184, 61, .16), rgba(224, 32, 63, .08) 72%, rgba(224, 32, 63, .02));
  box-shadow: 0 0 26px -8px rgba(245, 184, 61, .5);
}
html.tema-overpower .trilho-nav a.atual::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from 200deg, rgba(245, 184, 61, .25), rgba(247, 201, 72, .95) 18%, rgba(224, 32, 63, .7) 30%, rgba(245, 184, 61, .25) 45%, rgba(245, 184, 61, .25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
html.tema-overpower .trilho-nav a.atual .icone { color: var(--op-ouro-vivo); filter: drop-shadow(0 0 8px rgba(247, 201, 72, .8)); }
html.tema-overpower .conta-do-trilho .avatar {
  color: var(--op-tinta-no-ouro); background: linear-gradient(135deg, #ffd66b, var(--op-ouro-escuro));
  box-shadow: 0 0 16px rgba(245, 184, 61, .45);
}
html.tema-overpower [data-op-texto] { font-size: 0; }
html.tema-overpower [data-op-texto]::after { content: attr(data-op-texto); font-size: 11px; color: var(--op-ouro); letter-spacing: .02em; }

/* ================================================================ BARRA DE CIMA */
/* sem o vidro fosco: com as brasas e o brilho passando atras, o desfoque era
   refeito a cada quadro. Quase opaca, fica igual ao olho. */
html.tema-overpower .comando { background: rgba(10, 8, 5, .95); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: rgba(245, 184, 61, .14); }
html.tema-overpower .comando::before {
  height: 2px; bottom: -1px;
  background:
    linear-gradient(90deg, transparent 0 40%, rgba(255, 240, 179, .95) 50%, transparent 60% 100%) 0 0 / 300% 100% no-repeat,
    linear-gradient(90deg, var(--op-ouro-vivo), var(--op-brasa) 34%, rgba(245, 184, 61, .5) 62%, rgba(245, 184, 61, .12) 100%);
  box-shadow: 0 0 14px rgba(245, 184, 61, .45);
  animation: op-fio-corre 6s ease-in-out infinite;
}
@keyframes op-fio-corre { 0% { background-position: 110% 0, 0 0; } 60%, 100% { background-position: -40% 0, 0 0; } }

/* o título: o ouro passa pelas letras */
/* o titulo se ajusta; o HUD tem largura FIXA (antes ele ficava com a sobra, e a
   cada tela - titulo de largura diferente - mostrava pedacos diferentes) */
html.tema-overpower .titulo-da-barra { flex: 1 1 auto; min-width: 0; }
html.tema-overpower .titulo-da-barra h1 {
  background: linear-gradient(100deg, #fff 0 38%, #fff3c9 46%, var(--op-ouro-vivo) 50%, #fff3c9 54%, #fff 62% 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: op-titulo-brilho 7s ease-in-out infinite;
}
html.tema-overpower .titulo-da-barra.trocou h1 { animation: titulo-entra .3s var(--curva) both, op-titulo-brilho 7s ease-in-out infinite; }
@keyframes op-titulo-brilho { 0%, 30% { background-position: 110% 0; } 75%, 100% { background-position: -10% 0; } }
html.tema-overpower .tarja { color: #e9c678; }
html.tema-overpower .tarja::before { background: var(--op-ouro-vivo); box-shadow: 0 0 10px var(--op-ouro), 0 0 18px rgba(224, 32, 63, .45); }
html.tema-overpower .titulo-da-barra .sub { color: #a8987c; }

/* o HUD: a leitura do Scouter no meio da barra */
.hud-da-barra { display: none; }
html.tema-overpower .hud-da-barra {
  position: relative; overflow: hidden;
  /* so a SOBRA da barra: o titulo vem antes (base 0, ele nunca rouba) */
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 46px; margin: 0 4px; padding: 0 14px;
  border: 1px solid rgba(245, 184, 61, .18); border-radius: 12px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(245, 184, 61, .07), rgba(0, 0, 0, .3));
  box-shadow: inset 0 0 24px rgba(245, 184, 61, .06);
}
html.tema-overpower .hud-da-barra::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 224, 138, .10), transparent);
  will-change: transform;
  animation: op-hud-varre 4.2s ease-in-out infinite;
}
@keyframes op-hud-varre { from { transform: translateX(-110%); } to { transform: translateX(290%); } }
html.tema-overpower .hud-rotulo { font: 700 9px/1 var(--fonte-titulo); letter-spacing: .24em; text-transform: uppercase; color: #b99553; }
html.tema-overpower .hud-medidor { display: flex; gap: 2px; }
html.tema-overpower .hud-medidor i {
  display: block; width: 7px; height: 18px; border-radius: 2px; transform: skewX(-14deg);
  background: color-mix(in srgb, var(--op-brasa) calc(100% - var(--i) * 9%), var(--op-ouro-vivo));
  opacity: clamp(.14, calc((var(--carga) * .12 - var(--i)) * 4), 1);
  box-shadow: 0 0 8px color-mix(in srgb, var(--op-brasa) calc(100% - var(--i) * 9%), var(--op-ouro-vivo));
}
html.tema-overpower .hud-valor {
  min-width: 46px; text-align: right;
  font: 700 19px/1 var(--fonte-titulo); color: var(--op-ouro-claro); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(247, 201, 72, .6);
}
html.tema-overpower .hud-da-barra.baixa .hud-valor { color: #ff8a98; text-shadow: 0 0 14px rgba(224, 32, 63, .6); }
html.tema-overpower .hud-separador { width: 1px; height: 22px; background: linear-gradient(180deg, transparent, rgba(245, 184, 61, .5), transparent); }
html.tema-overpower .hud-relogio { font: 600 14px/1 var(--fonte-mono); letter-spacing: .08em; color: #e9d3a0; font-variant-numeric: tabular-nums; }
/* abaixo de 1680 px as pilulas e a busca ja ocupam a barra: o HUD sai inteiro
   (nunca pela metade) - e igual em todas as telas */
@media (max-width: 1680px) { html.tema-overpower .hud-da-barra { display: none; } }
/* e abaixo de 1500 px a pilula fica so com o ponto e o nome (o estado segue na cor e no title) */
@media (min-width: 921px) and (max-width: 1500px) { html.tema-overpower .pilula em { display: none; } }

html.tema-overpower .busca { border-color: rgba(245, 184, 61, .18); background: rgba(245, 184, 61, .04); }
/* mais larga so no computador: no celular a busca e so o icone */

html.tema-overpower .busca:hover { border-color: rgba(245, 184, 61, .5); box-shadow: 0 0 18px rgba(245, 184, 61, .18); }
html.tema-overpower .sino { border-color: rgba(245, 184, 61, .18); }
html.tema-overpower .pilula { border-color: rgba(245, 184, 61, .2); background: rgba(245, 184, 61, .04); }
html.tema-overpower .pilula:hover { border-color: rgba(245, 184, 61, .55); box-shadow: 0 0 18px rgba(245, 184, 61, .25); }

/* ================================================================ CARTÕES */
html.tema-overpower .cartao {
  background: linear-gradient(180deg, #17120b, #100c07);
  border-color: #2e2516;
  box-shadow: inset 0 1px 0 rgba(247, 201, 72, .07), 0 1px 2px rgba(0, 0, 0, .35);
}
html.tema-overpower .cartao::before { background: linear-gradient(90deg, transparent, rgba(247, 201, 72, .5), rgba(224, 32, 63, .28), transparent); }
/* SEM A MIRA NO HOVER (24/09/2026). Aqui morava a "mira do Scouter": quatro
   cantos de ouro que fechavam em volta do cartao com o mouse em cima. O dono:
   "quando passo o mouse ficam esses bloquinhos em volta do quadrado, nao
   encaixa - deixa so o efeito do balao acendendo". Fica so a borda e o
   brilho acendendo (logo abaixo). A mira da caixa de login nao e hover e
   continua. */
html.tema-overpower .cartao:hover {
  border-color: rgba(245, 184, 61, .42);
  box-shadow: 0 0 0 1px rgba(245, 184, 61, .14), 0 0 54px rgba(245, 184, 61, .14), 0 18px 50px rgba(0, 0, 0, .5);
}
html.tema-overpower .cartao-cabeca { border-bottom-color: rgba(245, 184, 61, .12); }
html.tema-overpower .cartao-cabeca h2, html.tema-overpower .cartao-cabeca > strong { color: var(--op-texto-ouro); }
html.tema-overpower .cartao-cabeca h2::before,
html.tema-overpower .cartao-cabeca > strong::before {
  background: var(--op-ouro-vivo); box-shadow: 0 0 10px var(--op-ouro), 0 0 20px rgba(224, 32, 63, .35);
}
html.tema-overpower body.vida-pronta .cartao-cabeca h2::before,
html.tema-overpower body.vida-pronta .cartao-cabeca > strong::before { animation: op-respira 2.6s ease-in-out infinite; }
@keyframes op-respira { 50% { opacity: .45; } }

/* ================================================================ NÚMEROS */
html.tema-overpower :is(.kpi, .numeros .numero) {
  border-color: rgba(245, 184, 61, .22);
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 224, 138, .08) 48%, rgba(255, 240, 179, .13) 50%, rgba(255, 224, 138, .08) 52%, transparent 70%) 0 0 / 300% 100% no-repeat,
    radial-gradient(120% 90% at 50% 0%, rgba(245, 184, 61, .11), transparent 62%),
    linear-gradient(180deg, #18130b, #0d0a06);
  background-position: 120% 0, 0 0, 0 0;
}
/* a luz passa UMA vez quando o mouse chega (antes: 4 numeros varrendo sem parar) */
html.tema-overpower :is(.kpi, .numeros .numero):hover { animation: op-varre-numero .9s ease-out; }
@keyframes op-varre-numero { from { background-position: 120% 0, 0 0, 0 0; } to { background-position: -20% 0, 0 0, 0 0; } }
html.tema-overpower :is(.kpi, .numeros .numero)::before {
  left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--op-ouro-vivo), var(--op-brasa), transparent);
  box-shadow: 0 0 16px rgba(245, 184, 61, .55);
}
html.tema-overpower :is(.kpi, .numeros .numero)::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--op-ang), transparent 0 64%, rgba(245, 184, 61, .95) 82%, rgba(224, 32, 63, .6) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s var(--curva);
}
/* a borda que gira so no numero com o mouse em cima: 1 animacao, nao 4 eternas */
html.tema-overpower .kpi:hover::after,
html.tema-overpower .numeros .numero:hover::after { opacity: .9; animation: op-gira-borda 2.6s linear infinite; }
@keyframes op-gira-borda { to { --op-ang: 360deg; } }
html.tema-overpower :is(.kpi, .numeros .numero) strong {
  color: #fff6dc;
  text-shadow: 0 0 18px rgba(247, 201, 72, .45), 0 0 40px rgba(224, 32, 63, .18);
}
html.tema-overpower :is(.kpi, .numeros .numero) .rotulo { color: #cdb27a; }
html.tema-overpower :is(.kpi, .numeros .numero):hover {
  border-color: rgba(245, 184, 61, .6);
  box-shadow: 0 0 0 1px rgba(245, 184, 61, .25), 0 0 44px rgba(245, 184, 61, .22), 0 18px 44px rgba(0, 0, 0, .5);
}

/* ================================================================ SERVIÇOS */
/* o sinal de vida: um eletro que corre no canto do cartão de cada serviço */
html.tema-overpower .servico { position: relative; overflow: hidden; }
html.tema-overpower .servico::after {
  content: ""; position: absolute; right: 16px; bottom: 14px; width: 150px; height: 30px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='30'%3E%3Cpath d='M0 15h26l4-9 5 20 5-17 3 6h32' fill='none' stroke='%23f7c948' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 75px 30px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent);
  filter: drop-shadow(0 0 4px rgba(247, 201, 72, .8));
  opacity: .55;
  animation: op-eletro 1.6s steps(24) infinite;
}
html.tema-overpower .servico:not(.no-ar)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='30'%3E%3Cpath d='M0 15h75' fill='none' stroke='%23e0203f' stroke-width='1.6'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 4px rgba(224, 32, 63, .8)); opacity: .45; animation: none;
}
@keyframes op-eletro { to { background-position: -75px 0; } }

/* ================================================================ BOTÕES E ESCOLHAS */
html.tema-overpower :is(.acao.principal, .botao-cheio, .acao-ligar) {
  color: var(--op-tinta-no-ouro); border-color: transparent;
  background-color: var(--op-ouro);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .38), transparent 48%), linear-gradient(135deg, #ffd66b, var(--op-ouro) 45%, #c7790f);
  box-shadow: 0 6px 22px rgba(245, 184, 61, .38), inset 0 1px 0 rgba(255, 255, 255, .45);
  text-shadow: none;
}
html.tema-overpower :is(.acao.principal, .botao-cheio, .acao-ligar):hover {
  box-shadow: 0 10px 30px rgba(245, 184, 61, .55), 0 0 44px rgba(224, 32, 63, .22), inset 0 1px 0 rgba(255, 255, 255, .5);
}
html.tema-overpower :is(.chip.atual, .chip.ativa, .barra-de-periodo a.atual) {
  color: var(--op-tinta-no-ouro);
  background: linear-gradient(145deg, #ffd66b, var(--op-ouro) 55%, var(--op-ouro-escuro));
  box-shadow: 0 4px 16px rgba(245, 184, 61, .4);
}
html.tema-overpower .chave-liga input:checked + span {
  background: linear-gradient(135deg, var(--op-ouro-vivo), var(--op-ouro-escuro));
  box-shadow: 0 0 14px rgba(245, 184, 61, .5);
}

/* ================================================================ TABELAS */
html.tema-overpower .tabela tbody tr:hover td { background: rgba(245, 184, 61, .04); }
html.tema-overpower .tabela tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--op-ouro); }

/* ================================================================ CELULAR */
@media (max-width: 920px) {
  html.tema-overpower .barra-de-baixo { background: rgba(10, 8, 5, .94); border-top-color: rgba(245, 184, 61, .2); }
  html.tema-overpower .barra-de-baixo .atual { color: var(--op-ouro-vivo); }
  html.tema-overpower .barra-de-baixo .atual svg { filter: drop-shadow(0 0 8px rgba(245, 184, 61, .7)); }
  html.tema-overpower .barra-de-baixo .central {
    color: var(--op-tinta-no-ouro);
    background: linear-gradient(145deg, #ffd66b, var(--op-ouro) 45%, #c7790f);
    box-shadow: 0 10px 28px rgba(245, 184, 61, .5), inset 0 1px 0 rgba(255, 255, 255, .45);
  }
  html.tema-overpower body.v3::before { display: none; }
  html.tema-overpower .servico::after { width: 100px; }
}

/* ================================================================ ENTRADA */
/* a tela de login (e as outras de entrada): o mesmo ouro do painel */
html.tema-overpower body.tela-de-login {
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(245, 184, 61, .17), transparent 60%),
    radial-gradient(700px 500px at 100% 110%, rgba(224, 32, 63, .11), transparent 60%),
    var(--fundo);
}
html.tema-overpower .entrada.dividida {
  border-color: rgba(245, 184, 61, .12);
  background: linear-gradient(180deg, #110d07, #080604);
  box-shadow: 0 0 0 1px rgba(245, 184, 61, .07), 0 0 120px rgba(245, 184, 61, .13), 0 50px 120px rgba(0, 0, 0, .7);
}
html.tema-overpower .entrada.dividida::before {
  background: conic-gradient(from var(--angulo-da-borda),
    transparent 0deg, transparent 225deg, rgba(224, 32, 63, .55) 265deg, rgba(245, 184, 61, .8) 292deg, #fff0b3 310deg, rgba(245, 184, 61, .6) 334deg, transparent 360deg);
}
html.tema-overpower.menos-movimento .entrada.dividida::before { background: rgba(245, 184, 61, .3); }
html.tema-overpower .vitrine-da-entrada {
  border-right-color: rgba(245, 184, 61, .1);
  background:
    radial-gradient(520px 420px at 30% 55%, rgba(245, 184, 61, .15), transparent 62%),
    radial-gradient(300px 260px at 18% 62%, rgba(224, 32, 63, .16), transparent 70%);
}
html.tema-overpower .logo-da-entrada { filter: drop-shadow(0 0 16px rgba(245, 184, 61, .75)); }
html.tema-overpower .vitrine-da-entrada .linha-da-marca b {
  background: linear-gradient(110deg, var(--op-ouro-vivo) 0%, var(--op-ouro-vivo) 36%, var(--op-ouro-claro) 50%, var(--op-ouro-vivo) 64%, var(--op-ouro-vivo) 100%);
  background-size: 240% 100%; background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(245, 184, 61, .45));
}
html.tema-overpower .vitrine-da-entrada .linha-da-marca em[data-op] {
  font-size: 0;
  background: linear-gradient(135deg, #ffd66b, var(--op-ouro) 45%, var(--op-ouro-escuro));
  box-shadow: 0 0 18px rgba(245, 184, 61, .6), 0 0 32px rgba(224, 32, 63, .22);
}
html.tema-overpower .vitrine-da-entrada .linha-da-marca em[data-op]::after {
  content: attr(data-op); font: 700 9.5px/1 var(--fonte-titulo); letter-spacing: .16em; color: var(--op-tinta-no-ouro);
}
/* a arte puxada para o ouro: o vermelho vira ouro, o roxo vira brasa */
html.tema-overpower .arte-da-vitrine {
  filter: hue-rotate(38deg) saturate(1.2) brightness(1.05) drop-shadow(0 30px 60px rgba(245, 184, 61, .35));
}
html.tema-overpower .selo-da-vitrine {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(245, 184, 61, .35); background: rgba(245, 184, 61, .08);
  font: 700 10px/1 var(--fonte-titulo); letter-spacing: .24em; text-transform: uppercase; color: var(--op-ouro);
  box-shadow: 0 0 22px rgba(245, 184, 61, .15);
}
html.tema-overpower .selo-da-vitrine::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--op-ouro-vivo); box-shadow: 0 0 10px var(--op-ouro);
}
html.tema-overpower .frase-da-vitrine em { background: linear-gradient(100deg, var(--op-ouro-vivo), var(--op-ouro-claro) 50%, #e0a020); -webkit-background-clip: text; background-clip: text; }
html.tema-overpower .provas-da-vitrine li::before { background: var(--op-ouro); box-shadow: 0 0 8px var(--op-ouro); }
html.tema-overpower .pe-da-vitrine { color: #8a7650; }
html.tema-overpower .lado-da-caixa { background: radial-gradient(420px 320px at 50% 50%, rgba(245, 184, 61, .09), transparent 70%); }
html.tema-overpower .caixa-de-login {
  position: relative;
  border-color: rgba(245, 184, 61, .22);
  background: linear-gradient(180deg, #17120b, #0f0b07);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .65), 0 0 70px rgba(245, 184, 61, .09);
}
/* a mira do Scouter nos cantos da caixa, respirando */
html.tema-overpower .caixa-de-login::after {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  background:
    linear-gradient(var(--op-ouro-vivo), var(--op-ouro-vivo)) left top / 18px 2px no-repeat,
    linear-gradient(var(--op-ouro-vivo), var(--op-ouro-vivo)) left top / 2px 18px no-repeat,
    linear-gradient(var(--op-ouro-vivo), var(--op-ouro-vivo)) right top / 18px 2px no-repeat,
    linear-gradient(var(--op-ouro-vivo), var(--op-ouro-vivo)) right top / 2px 18px no-repeat,
    linear-gradient(var(--op-ouro-vivo), var(--op-ouro-vivo)) left bottom / 18px 2px no-repeat,
    linear-gradient(var(--op-ouro-vivo), var(--op-ouro-vivo)) left bottom / 2px 18px no-repeat,
    linear-gradient(var(--op-ouro-vivo), var(--op-ouro-vivo)) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--op-ouro-vivo), var(--op-ouro-vivo)) right bottom / 2px 18px no-repeat;
  filter: drop-shadow(0 0 6px rgba(245, 184, 61, .9));
  animation: op-mira-respira 3.2s ease-in-out infinite;
}
@keyframes op-mira-respira { 0%, 100% { opacity: .45; inset: 9px; } 50% { opacity: 1; inset: 5px; } }
html.tema-overpower .caixa-de-login .assinatura { color: #e9c678; }
html.tema-overpower .caixa-de-login .assinatura::before { background: var(--op-ouro-vivo); box-shadow: 0 0 10px var(--op-ouro), 0 0 18px rgba(224, 32, 63, .4); }
html.tema-overpower .caixa-de-login :is(input, textarea) { border-color: rgba(245, 184, 61, .16); background: rgba(0, 0, 0, .28); }
html.tema-overpower .caixa-de-login :is(input, textarea):focus {
  border-color: var(--op-ouro); outline: none;
  box-shadow: 0 0 0 3px rgba(245, 184, 61, .2), 0 0 26px rgba(245, 184, 61, .25);
}
html.tema-overpower .caixa-de-login form > button {
  color: var(--op-tinta-no-ouro); border-color: transparent;
  background-color: var(--op-ouro);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .38), transparent 48%), linear-gradient(135deg, #ffd66b, var(--op-ouro) 45%, #c7790f);
  box-shadow: 0 8px 26px rgba(245, 184, 61, .4), inset 0 1px 0 rgba(255, 255, 255, .45);
}
html.tema-overpower .caixa-de-login form > button:hover { box-shadow: 0 12px 34px rgba(245, 184, 61, .6), 0 0 44px rgba(224, 32, 63, .22), inset 0 1px 0 rgba(255, 255, 255, .5); }
html.tema-overpower .rodape-login a { color: var(--op-ouro); }

/* ================================================================ LEVE NO CELULAR */
/* 22/09/2026, o dono: "abri no celular e nao ficou fluido". No celular e em
   tela de toque o tema fica com o mesmo ouro, PARADO: sem brasas (overpower.js
   nem cria), sem brilho passando, sem giro, sem texto correndo. */
@media (max-width: 920px), (hover: none) {
  html.tema-overpower .brilho-que-passa,
  html.tema-overpower .brasas-do-fundo { display: none; }
  html.tema-overpower .marca-do-trilho .linha-da-marca em[data-op]::before,
  html.tema-overpower .marca-do-trilho .linha-da-marca b,
  html.tema-overpower .marca-do-trilho::after,
  html.tema-overpower .comando::before,
  html.tema-overpower .titulo-da-barra h1,
  html.tema-overpower .cartao-cabeca h2::before,
  html.tema-overpower .cartao-cabeca > strong::before,
  html.tema-overpower .servico::after,
  html.tema-overpower .caixa-de-login::after,
  html.tema-overpower .entrada.dividida::before { animation: none !important; }
  html.tema-overpower .titulo-da-barra.trocou h1 { animation: titulo-entra .3s var(--curva) both !important; }
  html.tema-overpower body.v3::after { animation: none; }
}

/* ================================================================ MOVIMENTO */
/* "Reduzir movimento" (Preferências) desliga tudo o que anda */
html.tema-overpower.menos-movimento .brilho-que-passa,
html.tema-overpower.menos-movimento .marca-do-trilho .linha-da-marca em[data-op]::before,
html.tema-overpower.menos-movimento body.v3::before,
html.tema-overpower.menos-movimento .marca-do-trilho .mira,
html.tema-overpower.menos-movimento .marca-do-trilho .linha-da-marca b,
html.tema-overpower.menos-movimento .trilho-nav a.atual::after,
html.tema-overpower.menos-movimento .comando::before,
html.tema-overpower.menos-movimento .titulo-da-barra h1,
html.tema-overpower.menos-movimento .hud-da-barra::before,
html.tema-overpower.menos-movimento .cartao-cabeca h2::before,
html.tema-overpower.menos-movimento .cartao-cabeca > strong::before,
html.tema-overpower.menos-movimento .kpi,
html.tema-overpower.menos-movimento .numeros .numero,
html.tema-overpower.menos-movimento .kpi::after,
html.tema-overpower.menos-movimento .numeros .numero::after,
html.tema-overpower.menos-movimento .servico::after,
html.tema-overpower.menos-movimento .caixa-de-login::after { animation: none !important; }