/* =====================================================================
   O TEMA DA BLACK DE CADA PLANO (lote 597 cont., 27/10/2026)
   O dono: "esse tema de Black Friday... basicamente todos estao iguais. E nao tem nada de especial". As fichas de cor
   continuam em temas.css (o bloco "A BLACK FRIDAY"); aqui o que cada plano ganha por cima, so no mes do evento:
     - os tres: o po de ouro subindo no fundo do painel, a fita "BLACK FRIDAY" no canto do centro de comando e os
       numeros do dia em metal (o metal de cada plano);
     - PRO, "Vermelho Black": a linha do scanner passando no centro de comando, de tempos em tempos;
     - Overpower, "Tempestade": os raios roxos e dourados estalando no centro de comando e a aura roxa;
     - Ultra, "Cartao Black": as bordas em folha de ouro e o brilho de metal varrendo o painel inteiro.
   A regra da casa: so transform e opacity se mexem, e tudo para com "menos movimento" (no fim da folha).
   ===================================================================== */

/* ------------------------------------------------------------------ o po de ouro no fundo (os tres) */
.poeira-da-black { display: none; }
html.evento-black-friday .poeira-da-black,
html.cor-black-friday-overpower .poeira-da-black,
html.cor-black-friday-ultra .poeira-da-black {
  display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.poeira-da-black i {
  position: absolute; left: 0; right: 0; top: 0; height: 200%; opacity: .5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255, 214, 110, .9), transparent),
    radial-gradient(1.2px 1.2px at 64% 42%, rgba(255, 240, 200, .8), transparent),
    radial-gradient(1.8px 1.8px at 38% 76%, rgba(245, 196, 81, .85), transparent),
    radial-gradient(1px 1px at 86% 8%, rgba(255, 214, 110, .7), transparent),
    radial-gradient(1.4px 1.4px at 22% 58%, rgba(255, 170, 60, .7), transparent);
  background-size: 260px 260px;
  animation: poeira-sobe 60s linear infinite;
}
.poeira-da-black i + i { opacity: .3; background-size: 380px 380px; animation-duration: 95s; }
html.evento-black-friday .poeira-da-black i { opacity: .32; }
@keyframes poeira-sobe { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* ------------------------------------------------------------------ a fita no canto do centro de comando (os tres) */
/* ".conteudo .vg-heroi >" e nao so a classe: o v2.css poe todo filho do bloco em position: relative
   (.vg-luz > :not(.vg-brilho)) e a fita caia no meio do bloco */
.conteudo .vg-heroi > .vg-fita-da-black {
  position: absolute; top: 0; right: 0; z-index: 3; width: 150px; height: 150px; overflow: hidden; pointer-events: none;
  border-top-right-radius: inherit;
}
.vg-fita-da-black b {
  position: absolute; top: 30px; right: -46px; width: 200px; padding: 6px 0; text-align: center; transform: rotate(45deg);
  font: 800 10.5px/1 var(--fonte-titulo); letter-spacing: .26em; color: #1a1203;
  background: linear-gradient(90deg, #a8700f, #ffd36b 30%, #fff6d9 50%, #ffd36b 70%, #a8700f);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), 0 0 18px rgba(245, 196, 81, .35);
}
html.evento-black-friday .vg-fita-da-black b {
  color: #fff; background: linear-gradient(90deg, #7a0f1f, #e0203f 30%, #ff5c75 50%, #e0203f 70%, #7a0f1f);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), 0 0 18px rgba(224, 32, 63, .45);
}
html.tema-claro .vg-fita-da-black { display: none; }

/* ------------------------------------------------------------------ os numeros do dia em metal (o metal de cada plano) */
html.evento-black-friday body.v3 .conteudo .vg-numeros .numero strong,
html.tema-overpower.cor-black-friday-overpower body.v3 .conteudo .vg-numeros .numero strong,
html.tema-overpower.cor-black-friday-ultra body.v3 .conteudo .vg-numeros .numero strong {
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;
}
html.evento-black-friday body.v3 .conteudo .vg-numeros .numero strong {
  background-image: linear-gradient(180deg, #ffffff 0%, #ffd0d6 42%, #ff3d5a 100%);
}
html.tema-overpower.cor-black-friday-overpower body.v3 .conteudo .vg-numeros .numero strong {
  background-image: linear-gradient(180deg, #fff1c7 0%, #ffd36b 45%, #b48bff 100%);
}
html.tema-overpower.cor-black-friday-ultra body.v3 .conteudo .vg-numeros .numero strong {
  background-image: linear-gradient(180deg, #fff6d9 0%, #ffd36b 40%, #b8860b 62%, #ffe7a3 82%, #c8901c 100%);
}

/* ------------------------------------------------------------------ PRO, "Vermelho Black": o scanner passando */
.vg-varredura-da-black, .vg-raios-da-black { display: none; }
/* a camada tem a altura do bloco e a linha no meio dela: andar de -50% a +50% da propria altura leva a linha de cima a
   baixo do bloco (so transform) */
html.evento-black-friday .conteudo .vg-heroi > .vg-varredura-da-black {
  display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; pointer-events: none; opacity: 0;
  background:
    linear-gradient(180deg, transparent calc(50% - 1px), rgba(255, 120, 135, .95) calc(50% - 1px), rgba(255, 120, 135, .95) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, transparent calc(50% - 26px), rgba(255, 64, 90, .14) 50%, transparent calc(50% + 2px));
  animation: varredura-da-black 7s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes varredura-da-black {
  0%, 58% { transform: translateY(-50%); opacity: 0; }
  62% { opacity: 1; }
  94% { opacity: 1; }
  100% { transform: translateY(50%); opacity: 0; }
}
html.evento-black-friday .conteudo .vg-heroi { box-shadow: 0 0 0 1px rgba(224, 32, 63, .35), 0 30px 70px -40px rgba(224, 32, 63, .55); }

/* ------------------------------------------------------------------ Overpower, "Tempestade": os raios no centro de comando */
html.tema-overpower.cor-black-friday-overpower .conteudo .vg-heroi > .vg-raios-da-black {
  display: block; position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none;
}
.vg-raios-da-black svg { position: absolute; width: 90px; height: 140px; opacity: 0; overflow: visible; }
.vg-raios-da-black svg path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vg-raios-da-black svg:nth-child(1) { left: 4%; top: -6px; animation: raio-da-black 5.5s steps(1) infinite; }
.vg-raios-da-black svg:nth-child(2) { right: 26%; top: -10px; transform: scaleX(-1); animation: raio-da-black 7s steps(1) 1.8s infinite; }
.vg-raios-da-black svg:nth-child(3) { right: 6%; bottom: -12px; transform: rotate(180deg); animation: raio-da-black 6.2s steps(1) 3.4s infinite; }
.vg-raios-da-black svg path:first-child { stroke: rgba(180, 139, 255, .95); }
.vg-raios-da-black svg path + path { stroke: #fff1c7; stroke-width: 1; }
@keyframes raio-da-black { 0%, 88%, 92%, 100% { opacity: 0; } 89% { opacity: 1; } 90% { opacity: .2; } 91% { opacity: .9; } }
html.tema-overpower.cor-black-friday-overpower .conteudo .vg-heroi {
  box-shadow: inset 0 0 140px -40px rgba(165, 108, 255, .55), 0 0 0 1px rgba(180, 139, 255, .45),
    0 30px 80px -40px rgba(165, 108, 255, .8), 0 0 60px -30px rgba(245, 196, 81, .5);
}
/* o roxo da tempestade nos cartoes e na faixa (o Ultra fica so no ouro: os dois nao se confundem) */
html.tema-overpower.cor-black-friday-overpower body.v3 .conteudo :is(.cartao, .vg-numeros .numero) {
  border-color: rgba(180, 139, 255, .3);
  box-shadow: inset 0 1px 0 rgba(200, 170, 255, .1), 0 20px 50px -34px rgba(165, 108, 255, .6);
}
html.tema-overpower.cor-black-friday-overpower .faixa-da-black {
  border-color: rgba(180, 139, 255, .55); background: linear-gradient(90deg, rgba(165, 108, 255, .16), rgba(0, 0, 0, .55) 45%, rgba(245, 196, 81, .1));
}
html.evento-black-friday .faixa-da-black {
  border-color: rgba(224, 32, 63, .55); background: linear-gradient(90deg, rgba(224, 32, 63, .16), rgba(0, 0, 0, .55) 45%, rgba(245, 196, 81, .08));
}

/* ------------------------------------------------------------------ Ultra, "Cartao Black": folha de ouro e o brilho de metal */
html.tema-overpower.cor-black-friday-ultra body.v3 .conteudo :is(.cartao, .vg-numeros .numero) {
  border-color: rgba(255, 211, 107, .32);
  box-shadow: inset 0 1px 0 rgba(255, 246, 217, .12), 0 18px 40px -30px rgba(0, 0, 0, .9);
}
.brilho-da-black { display: none; }
html.tema-overpower.cor-black-friday-ultra .brilho-da-black {
  display: block; position: fixed; top: -20vh; bottom: -20vh; left: 0; z-index: 40; width: 26vw; pointer-events: none;
  mix-blend-mode: overlay; opacity: .9;
  background: linear-gradient(100deg, transparent, rgba(255, 246, 217, .55) 45%, rgba(255, 255, 255, .8) 50%, rgba(255, 246, 217, .55) 55%, transparent);
  transform: translateX(-40vw) skewX(-16deg);
  animation: brilho-da-black 9s cubic-bezier(.5, 0, .3, 1) 2s infinite;
}
@keyframes brilho-da-black {
  0%, 70% { transform: translateX(-40vw) skewX(-16deg); }
  100% { transform: translateX(140vw) skewX(-16deg); }
}

/* ------------------------------------------------------------------ lote 597 cont. 5: o muro de "BLACK FRIDAY" escondido no fundo (os tres) */
/* o dono: "varios Black Friday pela tela toda, bem escondido, de plano de fundo, em todos" - seis fileiras vazadas na
   cor do plano, andando devagar, atras de tudo (como o po de ouro) */
.muro-da-black { display: none; }
html.evento-black-friday .muro-da-black,
html.cor-black-friday-overpower .muro-da-black,
html.cor-black-friday-ultra .muro-da-black {
  display: flex; position: fixed; inset: -4vh -10vw; z-index: -1; flex-direction: column; justify-content: space-between;
  overflow: hidden; pointer-events: none; transform: skewY(-5deg);
}
.muro-da-black span {
  display: block; white-space: nowrap; font: 800 clamp(40px, 7vw, 96px)/1 var(--fonte-titulo); letter-spacing: .06em;
  color: transparent; -webkit-text-stroke: 1px rgba(245, 196, 81, .07); animation: muro-anda 70s linear infinite;
}
.muro-da-black span:nth-child(even) { -webkit-text-stroke-color: rgba(245, 196, 81, .04); animation-direction: reverse; animation-duration: 95s; }
@keyframes muro-anda { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
html.evento-black-friday .muro-da-black span { -webkit-text-stroke-color: rgba(255, 64, 90, .085); }
html.evento-black-friday .muro-da-black span:nth-child(even) { -webkit-text-stroke-color: rgba(255, 64, 90, .045); }
html.cor-black-friday-overpower .muro-da-black span { -webkit-text-stroke-color: rgba(180, 139, 255, .09); }
html.cor-black-friday-overpower .muro-da-black span:nth-child(even) { -webkit-text-stroke-color: rgba(180, 139, 255, .045); }
html.tema-claro .muro-da-black { display: none; }

/* ------------------------------------------------------------------ lote 597 cont. 5: o que cada plano ganha a mais no centro de comando */
.vg-cantos-da-black, .vg-nuvens-da-black, .vg-clarao-da-black, .vg-faiscas-da-black { display: none; }
/* PRO: os cantos da mira do Scouter (a mesma da abertura), o ponto vermelho piscando e a grade fina do visor */
html.evento-black-friday .conteudo .vg-heroi > .vg-cantos-da-black {
  display: block; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(rgba(255, 90, 110, .85), rgba(255, 90, 110, .85)) 0 0 / 22px 2px no-repeat,
    linear-gradient(rgba(255, 90, 110, .85), rgba(255, 90, 110, .85)) 0 0 / 2px 22px no-repeat,
    linear-gradient(rgba(255, 90, 110, .85), rgba(255, 90, 110, .85)) 100% 0 / 22px 2px no-repeat,
    linear-gradient(rgba(255, 90, 110, .85), rgba(255, 90, 110, .85)) 100% 0 / 2px 22px no-repeat,
    linear-gradient(rgba(255, 90, 110, .85), rgba(255, 90, 110, .85)) 0 100% / 22px 2px no-repeat,
    linear-gradient(rgba(255, 90, 110, .85), rgba(255, 90, 110, .85)) 0 100% / 2px 22px no-repeat,
    linear-gradient(rgba(255, 90, 110, .85), rgba(255, 90, 110, .85)) 100% 100% / 22px 2px no-repeat,
    linear-gradient(rgba(255, 90, 110, .85), rgba(255, 90, 110, .85)) 100% 100% / 2px 22px no-repeat,
    repeating-linear-gradient(0deg, rgba(255, 64, 90, .035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255, 64, 90, .035) 0 1px, transparent 1px 28px);
}
html.evento-black-friday .conteudo .vg-heroi > .vg-cantos-da-black::after {
  content: ""; position: absolute; top: 6px; right: 30px; width: 6px; height: 6px; border-radius: 50%; background: #ff405a;
  box-shadow: 0 0 10px #ff405a; animation: ponto-da-black 1.4s steps(1) infinite;
}
@keyframes ponto-da-black { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
/* Overpower: as nuvens da tempestade andando no alto do centro de comando e o clarao que acompanha o primeiro raio */
html.tema-overpower.cor-black-friday-overpower .conteudo .vg-heroi > .vg-nuvens-da-black {
  display: block; position: absolute; left: -10%; right: -10%; top: -30%; height: 70%; z-index: 1; pointer-events: none; opacity: .75;
  background:
    radial-gradient(40% 55% at 20% 50%, rgba(120, 70, 220, .35), transparent 70%),
    radial-gradient(35% 60% at 55% 40%, rgba(80, 40, 160, .4), transparent 70%),
    radial-gradient(45% 50% at 85% 55%, rgba(140, 90, 255, .28), transparent 70%);
  animation: nuvens-da-black 26s ease-in-out infinite alternate;
}
@keyframes nuvens-da-black { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
html.tema-overpower.cor-black-friday-overpower .conteudo .vg-heroi > .vg-clarao-da-black {
  display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; border-radius: inherit;
  background: radial-gradient(60% 70% at 50% 0%, rgba(230, 215, 255, .5), rgba(165, 108, 255, .15) 60%, transparent);
  animation: clarao-da-black 5.5s steps(1) infinite;
}
@keyframes clarao-da-black { 0%, 88%, 92%, 100% { opacity: 0; } 89% { opacity: 1; } 90% { opacity: .25; } 91% { opacity: .8; } }
/* Ultra: os veios de ouro no marmore preto do centro de comando e as faiscas de diamante piscando */
html.tema-overpower.cor-black-friday-ultra .conteudo .vg-heroi > .vg-faiscas-da-black {
  display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; overflow: hidden;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255, 214, 110, .07) 41%, transparent 43%),
    linear-gradient(100deg, transparent 62%, rgba(255, 214, 110, .05) 64%, transparent 67%);
}
.vg-faiscas-da-black i {
  position: absolute; width: 14px; height: 14px; opacity: 0;
  background:
    radial-gradient(circle, #fff 0 1.5px, transparent 2px),
    linear-gradient(#fff6d9, #fff6d9) 50% 0 / 1.5px 100% no-repeat,
    linear-gradient(#fff6d9, #fff6d9) 0 50% / 100% 1.5px no-repeat;
  animation: faisca-da-black 4.2s ease-in-out infinite;
}
.vg-faiscas-da-black i:nth-child(1) { left: 12%; top: 22%; }
.vg-faiscas-da-black i:nth-child(2) { left: 28%; top: 70%; animation-delay: 1.1s; }
.vg-faiscas-da-black i:nth-child(3) { left: 58%; top: 18%; animation-delay: 2.3s; }
.vg-faiscas-da-black i:nth-child(4) { left: 76%; top: 64%; animation-delay: .6s; }
.vg-faiscas-da-black i:nth-child(5) { left: 90%; top: 30%; animation-delay: 3.1s; }
@keyframes faisca-da-black {
  0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  80% { opacity: 1; transform: scale(1) rotate(45deg); }
  90% { opacity: 0; transform: scale(.3) rotate(90deg); }
}

/* ------------------------------------------------------------------ lote 597 cont. 7: o tema de cada plano no painel INTEIRO */
/* O dono: "agora tem que fazer os temas". Ate aqui a cara de cada plano morava no centro de comando; agora ela vai ao
   ceu da pagina (a camada fixa .ceu-da-black), ao trilho, a barra de comando, aos cartoes e ao botao do convite:
     - PRO, "Vermelho Black": as linhas de tela do visor, a luz vermelha no alto, a linha de leitura passando na pagina
       inteira, o item atual do menu com a barra vermelha, os cartoes com o fio vermelho;
     - Overpower, "Tempestade": as nuvens roxas no alto da pagina andando, o clarao do raio na pagina toda (no mesmo
       ciclo do primeiro raio do centro de comando), o roxo no trilho e na barra, o ouro com aura roxa no botao;
     - Ultra, "Cartao Black": os veios de ouro no marmore da pagina, a luz quente no canto, o fio de ouro escovado
       embaixo da barra, o brilho de cartao no canto de cada bloco, o trilho com o fio de ouro. */
.ceu-da-black, .clarao-da-black-pagina { display: none; }
html.evento-black-friday .ceu-da-black,
html.cor-black-friday-overpower .ceu-da-black,
html.cor-black-friday-ultra .ceu-da-black { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
html.tema-claro .ceu-da-black, html.tema-claro .clarao-da-black-pagina { display: none; }
/* PRO: as linhas de tela, a luz vermelha no alto e a linha de leitura descendo pela pagina de tempos em tempos */
html.evento-black-friday .ceu-da-black {
  background:
    radial-gradient(60% 40% at 50% -8%, rgba(224, 32, 63, .16), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 64, 90, .028) 0 1px, transparent 1px 3px);
}
html.evento-black-friday .ceu-da-black::after {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 120, 135, .35) 30%, rgba(255, 120, 135, .35) 70%, transparent);
  box-shadow: 0 0 18px 4px rgba(224, 32, 63, .18); animation: leitura-da-black 9s linear infinite;
}
@keyframes leitura-da-black { 0%, 62% { transform: translateY(0); opacity: 0; } 64% { opacity: 1; } 96% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } }
html.evento-black-friday .trilho-lateral a.atual {
  color: #ffd0d6; background: linear-gradient(90deg, rgba(224, 32, 63, .22), rgba(224, 32, 63, .05));
  box-shadow: inset 3px 0 0 #ff405a, 0 0 24px -8px rgba(224, 32, 63, .6);
}
html.evento-black-friday .comando { border-bottom-color: rgba(255, 64, 90, .35); box-shadow: 0 1px 0 rgba(224, 32, 63, .12), 0 14px 40px -30px rgba(224, 32, 63, .7); }
html.evento-black-friday body.v3 .conteudo .cartao {
  border-color: rgba(255, 64, 90, .2);
  box-shadow: inset 0 1px 0 rgba(255, 120, 135, .12), 0 1px 1px rgba(0, 0, 0, .3), 0 22px 50px -36px rgba(224, 32, 63, .55);
}
html.evento-black-friday .convite-da-black .acao.principal {
  color: #fff; background: linear-gradient(135deg, #ff6a80, #e0203f 45%, #8f0e26); border-color: rgba(255, 150, 165, .5);
  box-shadow: 0 0 0 1px rgba(255, 120, 135, .25), 0 12px 36px -10px rgba(224, 32, 63, .8);
}
/* Overpower: as nuvens roxas no alto da pagina andando e o clarao do raio na pagina toda */
html.cor-black-friday-overpower .ceu-da-black {
  background: radial-gradient(70% 50% at 50% -12%, rgba(120, 70, 220, .22), transparent 70%);
}
html.cor-black-friday-overpower .ceu-da-black::before {
  content: ""; position: absolute; left: -12%; right: -12%; top: -12vh; height: 48vh; opacity: .7;
  background:
    radial-gradient(38% 60% at 14% 50%, rgba(110, 60, 210, .32), transparent 70%),
    radial-gradient(30% 55% at 46% 38%, rgba(70, 30, 150, .4), transparent 70%),
    radial-gradient(42% 58% at 82% 52%, rgba(140, 90, 255, .26), transparent 70%);
  animation: nuvens-da-pagina 34s ease-in-out infinite alternate;
}
@keyframes nuvens-da-pagina { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
html.cor-black-friday-overpower .clarao-da-black-pagina {
  display: block; position: fixed; inset: 0; z-index: 35; pointer-events: none; opacity: 0;
  background: radial-gradient(55% 60% at 50% 0%, rgba(235, 222, 255, .55), rgba(165, 108, 255, .14) 55%, transparent 80%);
  animation: clarao-da-pagina 5.5s steps(1) infinite;
}
@keyframes clarao-da-pagina { 0%, 88%, 92%, 100% { opacity: 0; } 89% { opacity: .32; } 90% { opacity: .08; } 91% { opacity: .26; } }
html.cor-black-friday-overpower .trilho-lateral a.atual {
  color: #ffe9b0; background: linear-gradient(90deg, rgba(165, 108, 255, .22), rgba(165, 108, 255, .05));
  box-shadow: inset 3px 0 0 #b48bff, 0 0 24px -8px rgba(165, 108, 255, .7);
}
html.cor-black-friday-overpower .comando { border-bottom-color: rgba(180, 139, 255, .35); box-shadow: 0 1px 0 rgba(165, 108, 255, .12), 0 14px 40px -30px rgba(165, 108, 255, .8); }
html.cor-black-friday-overpower .convite-da-black .acao.principal {
  box-shadow: 0 0 0 1px rgba(255, 241, 199, .35), 0 12px 36px -10px rgba(245, 196, 81, .7), 0 0 50px -14px rgba(165, 108, 255, .9);
}
/* Ultra: os veios de ouro no marmore da pagina, a luz quente no canto, o fio de ouro escovado embaixo da barra e o
   brilho de cartao no canto de cada bloco */
html.cor-black-friday-ultra .ceu-da-black {
  background:
    radial-gradient(50% 40% at 100% 0%, rgba(255, 211, 107, .13), transparent 70%),
    linear-gradient(118deg, transparent 31%, rgba(255, 214, 110, .045) 33%, transparent 35%),
    linear-gradient(104deg, transparent 58%, rgba(255, 214, 110, .035) 60%, transparent 63%),
    linear-gradient(128deg, transparent 76%, rgba(255, 231, 163, .03) 77%, transparent 79%);
}
html.cor-black-friday-ultra .trilho-lateral { border-right-color: rgba(255, 211, 107, .24); }
html.cor-black-friday-ultra .trilho-lateral a.atual {
  color: #fff6d9; background: linear-gradient(90deg, rgba(255, 211, 107, .18), rgba(255, 211, 107, .04));
  box-shadow: inset 3px 0 0 #ffd36b, 0 0 24px -8px rgba(255, 211, 107, .6);
}
html.cor-black-friday-ultra .comando { border-bottom-color: rgba(255, 211, 107, .3); }
html.cor-black-friday-ultra .comando::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, #a8700f, #ffd36b 25%, #fff6d9 50%, #ffd36b 75%, #a8700f);
  opacity: .55;
}
html.cor-black-friday-ultra body.v3 .conteudo .cartao {
  background-image: linear-gradient(135deg, rgba(255, 214, 110, .07), transparent 38%);
  box-shadow: inset 0 1px 0 rgba(255, 246, 217, .14), 0 1px 1px rgba(0, 0, 0, .3), 0 22px 50px -36px rgba(0, 0, 0, .9), 0 0 40px -28px rgba(255, 211, 107, .5);
}
html.cor-black-friday-ultra .convite-da-black .acao.principal {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(255, 246, 217, .4), 0 12px 36px -10px rgba(255, 211, 107, .8);
}

/* ------------------------------------------------------------------ menos movimento: tudo parado */
html.menos-movimento.evento-black-friday .ceu-da-black::after,
html.menos-movimento.cor-black-friday-overpower .ceu-da-black::before,
html.menos-movimento.cor-black-friday-overpower .clarao-da-black-pagina { animation: none; }
html.menos-movimento .poeira-da-black i,
html.menos-movimento .muro-da-black span,
html.menos-movimento .conteudo .vg-heroi .vg-varredura-da-black,
html.menos-movimento .vg-raios-da-black svg,
html.menos-movimento .vg-faiscas-da-black i,
html.menos-movimento .brilho-da-black { animation: none; }
html.menos-movimento.evento-black-friday .conteudo .vg-heroi > .vg-cantos-da-black::after { animation: none; }
html.menos-movimento.tema-overpower.cor-black-friday-overpower .conteudo .vg-heroi > .vg-nuvens-da-black,
html.menos-movimento.tema-overpower.cor-black-friday-overpower .conteudo .vg-heroi > .vg-clarao-da-black { animation: none; }
html.menos-movimento .brilho-da-black, html.menos-movimento .conteudo .vg-heroi .vg-varredura-da-black { display: none; }
/* a regra do brilho no Ultra tem tres classes no html: a de parar precisa de tantas quanto ela */
html.menos-movimento.tema-overpower.cor-black-friday-ultra .brilho-da-black { animation: none; display: none; }

@media (max-width: 720px) {
  .conteudo .vg-heroi > .vg-fita-da-black { width: 120px; height: 120px; }
  .vg-fita-da-black b { top: 24px; right: -52px; font-size: 9.5px; }
  html.tema-overpower.cor-black-friday-ultra .brilho-da-black { width: 50vw; }
}

/* ------------------------------------------------------------------ lote 597 cont. 12: os temas com presenca */
/* O dono: "precisa ser melhor que isso". Cada plano ganha, no centro de comando, a AURA respirando na cor dele, a
   CORRENTE de luz correndo nas bordas de cima e de baixo, o LUSTRE (a luz de cartao passando de tempos em tempos) e o
   ANEL em volta do orbe de estado (a mira tracejada do PRO; o arco eletrico roxo e ouro do Overpower). O Ultra ganha os
   ELETRONS de ouro em orbita da arte e os RAIOS girando atras dela - os mesmos da abertura. Na pagina: o ceu do PRO
   com o horizonte vermelho e a vinheta, a AURORA roxa e dourada andando no Overpower, os raios de ouro do canto no
   Ultra; o muro de BLACK FRIDAY um pouco mais visivel; a faixa da contagem e o convite com a luz passando. Tudo so
   com transform e opacity; tudo para com "menos movimento"; nada no tema claro. */
html.evento-black-friday { --black-rgb: 255, 64, 90; --black2-rgb: 255, 120, 135; }
html.cor-black-friday-overpower { --black-rgb: 180, 139, 255; --black2-rgb: 245, 196, 81; }
html.cor-black-friday-ultra { --black-rgb: 255, 211, 107; --black2-rgb: 255, 246, 217; }
.vg-aura-da-black, .vg-corrente-da-black, .vg-lustre-da-black, .vg-anel-da-black, .vg-orbitas-da-black { display: none; }

/* a aura: a luz da cor do plano respirando dentro do centro de comando */
html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) .conteudo .vg-heroi > .vg-aura-da-black {
  display: block; position: absolute; left: -10%; right: -10%; top: -30%; bottom: -30%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 50% at 28% 55%, rgba(var(--black-rgb), .24), transparent 70%),
    radial-gradient(36% 46% at 82% 38%, rgba(var(--black-rgb), .15), transparent 70%);
  animation: aura-da-black 6s ease-in-out infinite alternate;
}
@keyframes aura-da-black { from { transform: scale(1); opacity: .7; } to { transform: scale(1.08); opacity: 1; } }

/* a corrente: a luz correndo na borda de cima (da esquerda para a direita) e na de baixo (ao contrario) */
html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) .conteudo .vg-heroi > .vg-corrente-da-black {
  display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit;
}
.vg-corrente-da-black i {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent 38%, rgba(var(--black-rgb), .9) 46%, #fff 50%, rgba(var(--black-rgb), .9) 54%, transparent 62%);
  box-shadow: 0 0 14px 1px rgba(var(--black-rgb), .55);
  transform: translateX(-100%);
  animation: corrente-da-black 5.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
.vg-corrente-da-black i + i { top: auto; bottom: 0; animation-delay: 2.75s; animation-direction: reverse; }
@keyframes corrente-da-black {
  0% { transform: translateX(-100%); opacity: 0; }
  6% { opacity: 1; }
  54% { opacity: 1; }
  60%, 100% { transform: translateX(100%); opacity: 0; }
}

/* o lustre: a luz de cartao passando pelo centro de comando de tempos em tempos */
html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) .conteudo .vg-heroi > .vg-lustre-da-black {
  display: block; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(var(--black2-rgb), .05) 35%, rgba(255, 255, 255, .13) 50%, rgba(var(--black2-rgb), .05) 65%, transparent);
  transform: translateX(-120%) skewX(-16deg);
  animation: lustre-da-black 9s cubic-bezier(.5, 0, .3, 1) 1.5s infinite;
}
@keyframes lustre-da-black { 0%, 64% { transform: translateX(-120%) skewX(-16deg); } 100% { transform: translateX(420%) skewX(-16deg); } }

/* o anel do orbe de estado: a mira tracejada do PRO (com as quatro marcas) e o arco eletrico do Overpower (o orbe do
   Ultra nao aparece: o estado dele mora no anel da arte) */
html:is(.evento-black-friday, .cor-black-friday-overpower) .vg-orbe > .vg-anel-da-black {
  display: block; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
  border: 1.5px dashed rgba(var(--black-rgb), .7);
  animation: anel-da-black 14s linear infinite;
}
html:is(.evento-black-friday, .cor-black-friday-overpower) .vg-orbe > .vg-anel-da-black::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background:
    linear-gradient(rgba(var(--black-rgb), .9), rgba(var(--black-rgb), .9)) 50% 0 / 2px 7px no-repeat,
    linear-gradient(rgba(var(--black-rgb), .9), rgba(var(--black-rgb), .9)) 50% 100% / 2px 7px no-repeat,
    linear-gradient(rgba(var(--black-rgb), .9), rgba(var(--black-rgb), .9)) 0 50% / 7px 2px no-repeat,
    linear-gradient(rgba(var(--black-rgb), .9), rgba(var(--black-rgb), .9)) 100% 50% / 7px 2px no-repeat;
}
html.cor-black-friday-overpower .vg-orbe > .vg-anel-da-black {
  border-style: solid; border-color: transparent; border-top-color: rgba(180, 139, 255, .95); border-right-color: rgba(245, 196, 81, .6);
  box-shadow: 0 0 12px -2px rgba(180, 139, 255, .6); animation-duration: 3.2s;
}
html.cor-black-friday-overpower .vg-orbe > .vg-anel-da-black::before { background: none; }
@keyframes anel-da-black { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* o Ultra: os eletrons de ouro em orbita da arte (duas orbitas inclinadas, como na abertura) e os raios girando atras */
html.cor-black-friday-ultra .vg-arte > .vg-orbitas-da-black { display: block; position: absolute; inset: 0; pointer-events: none; perspective: 700px; }
.vg-orbitas-da-black i {
  position: absolute; left: 50%; top: 50%; width: 270px; height: 270px; margin: -135px 0 0 -135px; border-radius: 50%;
  border: 1px solid rgba(255, 214, 110, .34); box-shadow: 0 0 10px -4px rgba(255, 214, 110, .5);
  transform: rotateX(72deg) rotateZ(0deg); animation: orbita-da-black 11s linear infinite;
}
.vg-orbitas-da-black i + i { transform: rotateZ(60deg) rotateX(68deg) rotateZ(0deg); animation: orbita-da-black-2 15s linear infinite; }
.vg-orbitas-da-black i::after {
  content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff6d9;
  box-shadow: 0 0 10px 3px rgba(255, 214, 110, .9), 0 0 24px 6px rgba(255, 214, 110, .4);
}
@keyframes orbita-da-black { from { transform: rotateX(72deg) rotateZ(0deg); } to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes orbita-da-black-2 { from { transform: rotateZ(60deg) rotateX(68deg) rotateZ(0deg); } to { transform: rotateZ(60deg) rotateX(68deg) rotateZ(-360deg); } }
html.tema-overpower.cor-black-friday-ultra .conteudo .vg-heroi > .vg-faiscas-da-black::before {
  content: ""; position: absolute; left: 175px; top: 50%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 110, .075) 0deg 2deg, transparent 2deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .9) 18%, transparent 46%);
  mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .9) 18%, transparent 46%);
  animation: raios-da-black-giram 80s linear infinite;
}
@keyframes raios-da-black-giram { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* o ceu com mais presenca: o PRO com o horizonte vermelho embaixo e a vinheta; a aurora do Overpower; os raios do Ultra */
html.evento-black-friday .ceu-da-black {
  background:
    radial-gradient(60% 40% at 50% -8%, rgba(224, 32, 63, .22), transparent 70%),
    radial-gradient(70% 30% at 50% 108%, rgba(224, 32, 63, .14), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(120, 0, 20, .22) 100%),
    repeating-linear-gradient(0deg, rgba(255, 64, 90, .028) 0 1px, transparent 1px 3px);
}
html.cor-black-friday-overpower .ceu-da-black::after {
  content: ""; position: absolute; left: -30%; right: -30%; top: 6vh; height: 34vh; opacity: .55; pointer-events: none;
  background: linear-gradient(100deg, transparent 10%, rgba(165, 108, 255, .22) 35%, rgba(245, 196, 81, .16) 52%, rgba(120, 70, 220, .2) 68%, transparent 90%);
  transform: skewY(-6deg) translateX(-8%);
  animation: aurora-da-black 40s ease-in-out infinite alternate;
}
@keyframes aurora-da-black { from { transform: skewY(-6deg) translateX(-8%); } to { transform: skewY(-6deg) translateX(8%); } }
html.cor-black-friday-ultra .ceu-da-black::before {
  content: ""; position: absolute; right: -20vw; top: -40vh; width: 120vw; height: 120vh; opacity: .5; pointer-events: none;
  background: repeating-conic-gradient(from 150deg at 100% 0%, rgba(255, 214, 110, .06) 0deg 1.5deg, transparent 1.5deg 9deg);
  -webkit-mask: radial-gradient(60% 60% at 100% 0%, #000, transparent 70%);
  mask: radial-gradient(60% 60% at 100% 0%, #000, transparent 70%);
}
/* o muro de BLACK FRIDAY um pouco mais presente */
.muro-da-black span { -webkit-text-stroke-color: rgba(245, 196, 81, .1); }
.muro-da-black span:nth-child(even) { -webkit-text-stroke-color: rgba(245, 196, 81, .055); }
html.evento-black-friday .muro-da-black span { -webkit-text-stroke-color: rgba(255, 64, 90, .11); }
html.evento-black-friday .muro-da-black span:nth-child(even) { -webkit-text-stroke-color: rgba(255, 64, 90, .06); }
html.cor-black-friday-overpower .muro-da-black span { -webkit-text-stroke-color: rgba(180, 139, 255, .12); }
html.cor-black-friday-overpower .muro-da-black span:nth-child(even) { -webkit-text-stroke-color: rgba(180, 139, 255, .06); }
/* a faixa da contagem e o convite com a luz passando */
html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) :is(.faixa-da-black, .convite-da-black) { position: relative; overflow: hidden; }
html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) :is(.faixa-da-black, .convite-da-black)::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(var(--black2-rgb), .07) 40%, rgba(255, 255, 255, .1) 50%, rgba(var(--black2-rgb), .07) 60%, transparent);
  transform: translateX(-120%) skewX(-16deg);
  animation: lustre-da-black 11s cubic-bezier(.5, 0, .3, 1) 4s infinite;
}
html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) .faixa-da-black::after { animation-duration: 13s; animation-delay: 7s; }

/* menos movimento: tudo parado; tema claro: nada disso */
html.menos-movimento .conteudo .vg-heroi > .vg-aura-da-black,
html.menos-movimento .vg-corrente-da-black i,
html.menos-movimento .conteudo .vg-heroi > .vg-lustre-da-black,
html.menos-movimento .vg-orbe > .vg-anel-da-black,
html.menos-movimento .vg-orbitas-da-black i,
html.menos-movimento.tema-overpower.cor-black-friday-ultra .conteudo .vg-heroi > .vg-faiscas-da-black::before,
html.menos-movimento.cor-black-friday-overpower .ceu-da-black::after,
html.menos-movimento .faixa-da-black::after,
html.menos-movimento .convite-da-black::after { animation: none; }
html.menos-movimento .conteudo .vg-heroi > .vg-lustre-da-black,
html.menos-movimento .vg-corrente-da-black,
html.menos-movimento .faixa-da-black::after,
html.menos-movimento .convite-da-black::after { display: none; }
html.tema-claro :is(.vg-aura-da-black, .vg-corrente-da-black, .vg-lustre-da-black, .vg-anel-da-black, .vg-orbitas-da-black),
html.tema-claro .faixa-da-black::after,
html.tema-claro .convite-da-black::after { display: none; }

@media (max-width: 720px) {
  .vg-orbitas-da-black i { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  html.tema-overpower.cor-black-friday-ultra .conteudo .vg-heroi > .vg-faiscas-da-black::before { left: 50%; top: 150px; }
  .vg-orbe > .vg-anel-da-black { inset: -7px; }
}

/* ------------------------------------------------------------------ lote 597 cont. 12 (2): o chao, a chuva, o vazamento, o titulo e a fita */
/* PRO: o chao de grade em perspectiva (o visor do Scouter) correndo no pe da pagina - o padrao repete a cada 80 px e a
   camada anda exatamente 80 px por volta, entao o laco e continuo */
html.evento-black-friday .ceu-da-black::before {
  content: ""; position: absolute; left: -40%; right: -40%; bottom: -10vh; height: 70vh; opacity: .55; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 64, 90, .16) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(255, 64, 90, .16) 0 1px, transparent 1px 80px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 45%, #000);
  mask: linear-gradient(180deg, transparent, #000 45%, #000);
  transform-origin: 50% 100%;
  transform: perspective(700px) rotateX(62deg) translateY(0);
  animation: chao-da-black 4s linear infinite;
}
@keyframes chao-da-black { from { transform: perspective(700px) rotateX(62deg) translateY(0); } to { transform: perspective(700px) rotateX(62deg) translateY(80px); } }
/* Overpower: a chuva fina da tempestade (a segunda camada do po vira riscos caindo) */
html.cor-black-friday-overpower .poeira-da-black i + i {
  opacity: .5; background-size: 160px 260px;
  background-image: repeating-linear-gradient(104deg, transparent 0 148px, rgba(200, 170, 255, .22) 148px 149px, transparent 149px 160px);
  animation: poeira-sobe 4.5s linear infinite reverse;
}
/* Ultra: o vazamento de luz quente andando devagar pela pagina */
html.cor-black-friday-ultra .ceu-da-black::after {
  content: ""; position: absolute; left: -20%; top: 30%; width: 70%; height: 60%; opacity: .6; pointer-events: none;
  background: radial-gradient(40% 50% at 50% 50%, rgba(255, 211, 107, .14), transparent 70%);
  animation: vazamento-da-black 28s ease-in-out infinite alternate;
}
@keyframes vazamento-da-black { from { transform: translate(0, 0) scale(1); } to { transform: translate(40%, -18%) scale(1.15); } }
/* o titulo da tela em metal, no metal de cada plano */
html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) .comando .titulo-da-barra h1 {
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  background-image: linear-gradient(180deg, #fff6d9 0%, #ffd36b 45%, #c8901c 100%);
}
html.evento-black-friday .comando .titulo-da-barra h1 { background-image: linear-gradient(180deg, #ffffff 0%, #ffd0d6 48%, #ff3d5a 100%); }
html.cor-black-friday-overpower .comando .titulo-da-barra h1 { background-image: linear-gradient(180deg, #fff1c7 0%, #ffd36b 48%, #b48bff 100%); }
html.tema-claro:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) .comando .titulo-da-barra h1 {
  background-image: none; -webkit-text-fill-color: inherit; color: inherit;
}
/* a fita BLACK FRIDAY com o brilho passando (a fita ja e position: absolute e girada; so o overflow entra aqui -
   com position: relative ela perdia o lugar e virava um rotulo reto no canto) */
.vg-fita-da-black b { overflow: hidden; }
.vg-fita-da-black b::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55) 50%, transparent);
  transform: translateX(-150%) skewX(-18deg); animation: lustre-da-black 6s cubic-bezier(.5, 0, .3, 1) 2s infinite;
}
/* menos movimento: tudo parado */
html.menos-movimento.evento-black-friday .ceu-da-black::before,
html.menos-movimento.cor-black-friday-overpower .poeira-da-black i + i,
html.menos-movimento.cor-black-friday-ultra .ceu-da-black::after,
html.menos-movimento .vg-fita-da-black b::after { animation: none; }

/* ------------------------------------------------------------------ lote 597 cont. 17: o tema que parece atualizacao */
/* O dono (29/10, com o evento antecipado no painel dele): "o tema de Black Friday ficou legal, mas muito simples, nao
   parece uma atualizacao de verdade, so tem uma faixinha; precisa melhorar os temas em todos os planos". Medido nas
   fotos (1536x730): fora da Visao geral o tema mudava so a cor - no Ultra ficava igual ao tema normal (os dois sao
   preto e ouro). Agora muda a FORMA, em toda tela e nos tres planos:
     - as FITAS de BLACK FRIDAY cruzando o fundo da pagina (atras de tudo: aparecem nos vaos, nunca em cima de texto);
     - os CARTOES com o fio de metal no alto (o .cartao::before, que ja era a linha de luz);
     - o TRILHO com a luz do plano no alto e o fio de metal embaixo da marca;
   Cont. 17b (29/10): o dono reprovou as CANTONEIRAS dos cartoes e a LISTRA DE PERIGO amarela e preta (a da ponta da
   faixa; as fitas e o trilho usavam a mesma). Sairam todas: no lugar, fio de metal e fita de cetim preto. Nada de
   cantoneira/mira nem listra de obra no tema da Black;
     - a ETIQUETA "Black Friday" ao lado do nome da secao, no alto de toda tela;
     - o Ultra, "Cartao Black": o cartao em fibra de carbono com o fio de ouro e cromo (o Ultra normal e vidro liso).
   A faixa virou o painel do evento (telas/evento_do_painel.css). Movimento: so o letreiro da fita anda (transform), e
   para com "menos movimento"; nada disso no tema claro. */
.fitas-da-black { display: none; }
html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) .fitas-da-black {
  display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
/* cont. 17b: as fitas eram amarelas com bordas listradas (fita de obra) - o dono reprovou a listra de perigo. Viraram
   FAIXAS DE CETIM PRETO: o preto acetinado com o reflexo no meio, o fio de metal em cima e embaixo e o letreiro em
   metal (a cor do plano). Escuras, nao brigam com o texto que passa na frente. */
.fitas-da-black > span {
  position: absolute; left: -25vw; width: 150vw; height: 38px; overflow: hidden; display: flex; align-items: center;
  background: linear-gradient(180deg, #16161b 0%, #07070a 38%, #020203 52%, #0e0e12 100%);
  border-top: 1px solid rgba(var(--black-rgb), .75); border-bottom: 1px solid rgba(var(--black-rgb), .75);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .9), 0 0 60px -26px rgba(var(--black-rgb), .8);
  opacity: .6;
}
/* o reflexo do cetim, uma linha de luz no terco de cima */
.fitas-da-black > span::before {
  content: ""; position: absolute; left: 0; right: 0; top: 30%; height: 1px; background: rgba(255, 255, 255, .08);
}
.fitas-da-black b {
  display: block; white-space: nowrap; font: 800 14px/1 var(--fonte-titulo); letter-spacing: .42em;
  color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, rgba(var(--black2-rgb), 1) 0%, rgb(var(--black-rgb)) 60%, rgba(var(--black-rgb), .7) 100%);
  animation: fita-da-black-anda 90s linear infinite;
}
.fitas-da-black > span:nth-child(1) { top: 62%; transform: rotate(-8deg); }
.fitas-da-black > span:nth-child(2) { top: 80%; transform: rotate(5deg); opacity: .45; }
.fitas-da-black > span:nth-child(2) b { animation-direction: reverse; animation-duration: 120s; }
@keyframes fita-da-black-anda { from { transform: translateX(0); } to { transform: translateX(-30%); } }

/* os cartoes: o fio de metal no alto (a borda de cartao de luxo) e a luz do plano descendo dele. SEM cantoneira
   (cont. 17b - o dono reprovou os quatro cantos marcados; ja tinha reprovado a moldura de cantos no lote 610) */
html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra):not(.tema-claro) body.v3 .conteudo :is(.cartao, .kpi, .numero):not(.vg-numeros .numero)::before {
  left: 0; right: 0; top: 0; bottom: 0; height: auto; border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(var(--black-rgb), 0), rgba(var(--black-rgb), .85) 16%, rgba(var(--black2-rgb), .95) 50%, rgba(var(--black-rgb), .85) 84%, rgba(var(--black-rgb), 0)) 0 0 / 100% 2px no-repeat,
    radial-gradient(60% 46px at 50% 0, rgba(var(--black-rgb), .12), transparent) 0 0 / 100% 60px no-repeat;
}
html.evento-black-friday:not(.tema-claro) body.v3 .conteudo .cartao { border-color: rgba(255, 64, 90, .32); }
html.cor-black-friday-overpower body.v3 .conteudo .cartao { border-color: rgba(180, 139, 255, .36); }

/* o trilho: a luz do plano no alto, as listras finas e a fita listrada embaixo da marca */
html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra):not(.tema-claro) .trilho-lateral {
  background-image:
    radial-gradient(140% 36% at 0% 0%, rgba(var(--black-rgb), .2), transparent 70%),
    radial-gradient(140% 30% at 0% 100%, rgba(var(--black-rgb), .1), transparent 70%),
    /* o fundo do trilho fica OPACO: o tema do Ultra pinta o trilho com um degrade (background-image), que estas camadas
       substituem - sem esta, as fitas e o muro do fundo apareciam atras do menu */
    linear-gradient(180deg, #0d0c0f, #07070a);
  border-right-color: rgba(var(--black-rgb), .3);
}
html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra):not(.tema-claro) .marca-do-trilho { position: relative; }
html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra):not(.tema-claro) .marca-do-trilho::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--black-rgb), 0), rgb(var(--black-rgb)) 25%, rgba(var(--black2-rgb), 1) 50%, rgb(var(--black-rgb)) 75%, rgba(var(--black-rgb), 0));
  box-shadow: 0 0 12px rgba(var(--black-rgb), .5);
}

/* a etiqueta "Black Friday" ao lado do nome da secao, no alto de toda tela */
html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra):not(.tema-claro) .comando .titulo-da-barra .tarja::after {
  content: "Black Friday"; display: inline-block; margin-left: 10px; padding: 2px 8px 2px 10px; vertical-align: 1px;
  font: 800 9.5px/1.3 var(--fonte-titulo); letter-spacing: .22em; text-transform: uppercase; color: #08080a;
  background: linear-gradient(180deg, rgba(var(--black2-rgb), 1), rgb(var(--black-rgb)));
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%);
}
html.evento-black-friday:not(.tema-claro) .comando .titulo-da-barra .tarja::after { color: #fff; background: linear-gradient(180deg, #ff6a80, #c4122e); }

/* o Ultra, "Cartao Black": fibra de carbono no cartao, fio de ouro e cromo */
html.tema-overpower.cor-black-friday-ultra body.v3 .conteudo :is(.cartao, .numeros .numero, .kpi) {
  background-color: #0b0b0d;
  background-image:
    linear-gradient(135deg, rgba(255, 214, 110, .08), transparent 34%),
    linear-gradient(180deg, rgba(20, 20, 24, .55), rgba(5, 5, 7, .85)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, rgba(0, 0, 0, .25) 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 2px, rgba(0, 0, 0, .2) 2px 4px);
  border-color: rgba(220, 220, 228, .2);
}
html.cor-black-friday-ultra { --black2-rgb: 235, 235, 242; }

/* o muro de BLACK FRIDAY do fundo mais presente */
html.cor-black-friday-ultra .muro-da-black span { -webkit-text-stroke-color: rgba(245, 196, 81, .14); }
html.evento-black-friday .muro-da-black span { -webkit-text-stroke-color: rgba(255, 64, 90, .15); }
html.cor-black-friday-overpower .muro-da-black span { -webkit-text-stroke-color: rgba(180, 139, 255, .16); }

html.menos-movimento .fitas-da-black b { animation: none; }
html.tema-claro .fitas-da-black { display: none; }
@media (max-width: 720px) {
  .fitas-da-black > span { height: 28px; }
  .fitas-da-black b { font-size: 11px; letter-spacing: .26em; }
  .fitas-da-black > span:nth-child(1) { top: 70%; }
  html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra):not(.tema-claro) .comando .titulo-da-barra .tarja::after { display: none; }
}

/* ------------------------------------------------------------------ o celular: o fundo parado (lote 597 cont. 18 e lote 623) */
/* O dono, no celular: "muito bugado e travando" e "o painel para celular precisa ser mais otimizado". O painel sozinho
   pedia ~170 MB de video, e o fundo da Black ANDAVA na tela inteira: o vazamento de luz do ceu, a poeira subindo, o
   chao do PRO, a aurora do Overpower, as fitas e o muro. Com uma animacao do tamanho da tela o celular redesenha a tela
   TODA a cada quadro, misturando as seis ou sete camadas fixas uma por cima da outra - e a placa de video do celular
   nao da conta (o computador da). No celular e na tela de toque o fundo fica PARADO (tudo continua aparecendo), a poeira
   numa camada so, o brilho de cartao sai (a mistura "overlay" copia a pagina inteira a cada quadro) e a aura e os raios
   grandes atras da arte param; ficam as animacoes pequenas (as orbitas, as faiscas, a arte flutuando, a luz nos
   cartoes). Este bloco mora no FIM do arquivo: com o mesmo peso, ganha a regra que vem depois. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .poeira-da-black i + i { display: none; }
  .poeira-da-black i, .muro-da-black span, .fitas-da-black b, .clarao-da-black-pagina,
  .ceu-da-black, .ceu-da-black::before, .ceu-da-black::after { animation: none !important; }
  html.tema-overpower.cor-black-friday-ultra .brilho-da-black { display: none; }
  .conteudo .vg-heroi > .vg-aura-da-black, .conteudo .vg-heroi > .vg-faiscas-da-black::before { animation: none !important; }
  /* lote 597 cont. 22 (02/11, o dono com print do celular: a arte do Ultra sumida do heroi, "faz direito"). Parado, sem
     abertura nenhuma, o painel no celular dele (360x800, DPR 3) pedia mais memoria de video do que havia: o fundo da
     Black sao seis camadas fixas do tamanho da tela (o ambiente, a poeira, o ceu, o muro, as fitas e o brilho do body,
     ~10 MB cada) por baixo dos cartoes, e o celular deixava de desenhar pecas inteiras (no dele, a arte; no emulado com
     64 MB, o texto do heroi, a faixa e o cartao da contagem). No celular o fundo da Black sai - os cartoes cobrem quase a
     tela toda, e o heroi segue com a faixa, as orbitas e o ouro do tema. (So com as fitas, ou com o muro e as fitas,
     ainda quebrava com 64 MB.) */
  html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) :is(.ambiente-do-tema, .poeira-da-black,
    .muro-da-black, .ceu-da-black, .fitas-da-black) { display: none; }
  html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) body.v3::after { display: none; }
  /* e o heroi ANDA no celular, sem passar da memoria de video (lote 597 cont. 25, 02/11 - o dono, depois do cont. 22,
     que tinha parado tudo: "as animacoes do painel aqui na visao do celular ta tudo estatico... nao ta funcionando").
     O que gastava a memoria nao era cada peca que anda: era o que ficava POR CIMA dela. Uma peca que anda pode estar em
     qualquer ponto do recorte dela, e tudo o que e desenhado depois e cruza esse recorte vira camada propria: as brasas
     (embaixo de tudo) e as faiscas (piscando no meio do texto) faziam o texto, os servicos e a caixa da arte virarem
     camadas inteiras, e o recorte da arte encostava 1 px no texto. Agora a arte, o anel e as orbitas (com o eletron)
     andam presos na altura da caixa da arte (8 px de folga, ate o texto); as brasas sobem POR CIMA do conteudo; o lustre
     passa so na altura do heroi; a corrente corre nas bordas. Ficam paradas ou fora: as faiscas que piscam, a segunda
     luz do anel (desenho SVG, repintado a cada quadro), a aura e os raios grandes atras da arte (bloco de cima).
     Medido no celular emulado (360x800, DPR 3, animacoes andando, 3 rodadas, no alto e a 700 e 1.400 px): 0% da tela
     sem desenhar com 64 MB - so religar o heroi como era dava 6-15% (antes do cont. 22, 7-25%). */
  html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) .conteudo .vg-heroi .vg-arte {
    overflow-y: clip; overflow-clip-margin: 8px; }
  html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) body.painel-ultra .conteudo .vg-heroi.vg-comando-3d .vg-arte-anel .luz2 { animation: none; }
  html:is(.cor-black-friday-overpower, .cor-black-friday-ultra) .conteudo .vg-heroi .vg-brasas-da-black { z-index: 2; }
  html:is(.evento-black-friday, .cor-black-friday-overpower, .cor-black-friday-ultra) .conteudo .vg-heroi > .vg-lustre-da-black { top: 0; bottom: 0; }
  .vg-faiscas-da-black i { display: none; }
}