/* ═══════════════════════════════════════════════════════════════════════
   Virtus Jogos — página de entrada
   ───────────────────────────────────────────────────────────────────────
   Folha separada, carregada só por entrar.php e cadastro.php. Não entra
   no vj.css porque o vj.css é baixado em TODA página da loja, e este
   bloco de 8 KB serviria a duas telas apenas.

   Prefixo vjl- em tudo. Nada aqui pode vazar para o resto do site.

   As medidas vieram da especificação e estão anotadas onde saem dela,
   para quem for mexer saber o que é escolha e o que é requisito.
   ═══════════════════════════════════════════════════════════════════════ */

body.vjl{
  min-height:100vh; min-height:100dvh;
  display:grid; place-items:center;
  padding:32px 20px;
  overflow-x:hidden;
  background:#050A18;
}

/* ── Fundo cósmico ──────────────────────────────────────────────────────
   Camada fixa em vez de background-attachment:fixed, que o Safari do iOS
   ignora e desenha errado ao rolar a página. */
.vjl-fundo{
  position:fixed; inset:0; z-index:0;
  /* ═══════════════════════════════════════════════════════════════
     CORREÇÃO — 21/08/2026 — O TOPO ESTAVA SENDO CORTADO
     ───────────────────────────────────────────────────────────────
     A arte vinha em 1536x1024, proporção 1,50. Numa janela de
     1920x950 — proporção 2,02 — o cover escala pela largura e sobram
     330px de altura, cortados metade em cima. Com o logotipo a 43px
     do topo da arte, ele perdia a estrela.

     Duas correções juntas:

     1. A tela da imagem foi estendida para 2048x1024, proporção 2,00,
        com as laterais esmaecendo para a cor de fundo do site. As
        bordas da arte já eram quase pretas, então a emenda tem
        diferença média de 0,00 em 255. Agora, em janela larga, o que
        o cover descarta é o preenchimento lateral, e não a arte.

     2. O ancoramento é "center top", e não "center". Assim o topo
        NUNCA é cortado, em nenhuma proporção de janela. O que se
        perde em janela muito larga é a base do livro e do troféu, que
        já ficam atrás do véu escuro.
     ═══════════════════════════════════════════════════════════════ */
  background:url('../img/marca/fundo-login.webp') center top/cover no-repeat;
}
/* Vinheta: o fundo tem estrelas claras em algumas faixas, e texto branco
   sobre estrela some. Escurece as bordas sem apagar a arte. */
.vjl-fundo::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(5,10,24,.55) 100%);
}

/* ── Partículas ─────────────────────────────────────────────────────────
   Ficam FORA do painel de propósito: partícula sobre campo de formulário
   atrapalha a leitura do que se está digitando. */
.vjl-poeira{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.vjl-poeira i{
  position:absolute; bottom:-12px;
  width:3px; height:3px; border-radius:50%;
  opacity:0;
  animation:vjl-subir linear infinite;
}
@keyframes vjl-subir{
  0%   { transform:translateY(0)      scale(.7); opacity:0; }
  12%  { opacity:.55; }
  80%  { opacity:.35; }
  100% { transform:translateY(-92vh)  scale(1);  opacity:0; }
}

/* ── Palco ──────────────────────────────────────────────────────────── */
.vjl-palco{ position:relative; z-index:2; width:100%; display:grid; place-items:center; gap:22px; }
/* Folga para o selo, que sobe 25px acima do painel e sem isto encosta
   no logotipo no celular. */
.vjl-caixa{ margin-top:14px; }

/* ── Painel ─────────────────────────────────────────────────────────────
   Dois elementos encaixados, e não um: o de fora faz a entrada
   (opacity + translateY) e o de dentro flutua em laço. Num elemento só,
   a segunda animação sobrescreveria o transform da primeira e o painel
   saltaria ao terminar de entrar. */
.vjl-caixa{
  width:min(92vw, 500px);          /* especificação: 35–40% da largura */
  animation:vjl-entrada .82s cubic-bezier(.22,1,.36,1) both;
}
/* ═══════════════════════════════════════════════════════════════════
   POR QUE EXISTE UMA TERCEIRA CAMADA
   ───────────────────────────────────────────────────────────────────
   O painel precisa de overflow:hidden para o reflexo diagonal não
   escapar pelos cantos arredondados. Mas o selo do cadeado precisa
   vazar 25px POR CIMA da borda de cima — e overflow:hidden corta os
   dois sem distinguir.

   Medido: com o selo dentro do painel, aparecia só a metade de baixo
   do hexágono, encostada na borda.

   Então o selo saiu para esta camada, que flutua junto com o painel
   mas não recorta nada.
   ═══════════════════════════════════════════════════════════════════ */
.vjl-flutua{
  position:relative;
  animation:vjl-flutuar 7s ease-in-out 1s infinite;
}
@keyframes vjl-entrada{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:none; }
}

.vjl-painel{
  position:relative; overflow:hidden;
  padding:44px 34px 32px;
  border-radius:26px;
  background:rgba(8,10,35,.78);
  -webkit-backdrop-filter:blur(24px) saturate(130%);
          backdrop-filter:blur(24px) saturate(130%);
  border:1px solid rgba(120,90,255,.30);
  box-shadow:
    0 0 80px rgba(98,40,255,.12),
    0 20px 80px rgba(0,0,0,.45);
}
@keyframes vjl-flutuar{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-4px); }
}

/* Anel holográfico: gradiente roxo → azul → ciano recortado em moldura
   de 1px pela máscara. Fica POR CIMA da borda sólida, com opacidade
   baixa, para dar cor sem virar néon. */
.vjl-painel::after{
  content:''; position:absolute; inset:0; border-radius:26px;
  padding:1px; pointer-events:none; opacity:.55;
  background:linear-gradient(135deg,#7C00FF,#3B6BFF 46%,#00C8FF);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

/* Reflexo diagonal que atravessa o painel de tempos em tempos. */
.vjl-painel::before{
  content:''; position:absolute; top:-60%; left:-70%;
  width:55%; height:220%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(140,120,255,.10) 40%, rgba(0,200,255,.07) 60%, transparent);
  transform:rotate(14deg);
  animation:vjl-reflexo 11s ease-in-out 3s infinite;
}
@keyframes vjl-reflexo{
  0%,72%,100%{ left:-70%; opacity:0; }
  76%        { opacity:1; }
  96%        { left:130%; opacity:0; }
}

/* ── Selo de cadeado ────────────────────────────────────────────────────
   Metade para fora da borda de cima, como pede a especificação. */
.vjl-selo{
  position:absolute; z-index:3; top:-25px; left:50%; margin-left:-25px;
  width:50px; height:50px; display:grid; place-items:center;
  color:#D7C4FF; font-size:21px;
  background:linear-gradient(160deg, rgba(30,20,74,.96), rgba(11,12,38,.96));
  border:1px solid rgba(140,110,255,.42);
  /* Hexágono, e não círculo: o círculo já é a forma de todo avatar e
     todo ícone do site. */
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  animation:vjl-respirar 4.5s ease-in-out infinite;
}
@keyframes vjl-respirar{
  0%,100%{ filter:drop-shadow(0 0 8px rgba(124,0,255,.45)); transform:translateY(0); }
  50%    { filter:drop-shadow(0 0 18px rgba(0,200,255,.42)); transform:translateY(-3px); }
}

/* ── Texto ──────────────────────────────────────────────────────────── */
.vjl-painel h1{
  font-size:clamp(27px,3.1vw,34px); font-weight:800; letter-spacing:-.025em;
  color:#F7F7FF; line-height:1.15; margin-bottom:9px;
}
.vjl-sub{ font-size:14.5px; line-height:1.6; color:rgba(190,198,230,.75); margin-bottom:26px; }
/* display:inline-block e a folga lateral em em existem porque
   background-clip:text corta acento e descida da letra na caixa justa.
   Sem isso o "Ó" e o "g" saem picotados. */
.vjl-grad{
  display:inline-block; padding:0 .06em; margin:0 -.06em; font-weight:700;
  background:linear-gradient(96deg,#A855F7,#4F8CFF);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ── Campos ─────────────────────────────────────────────────────────── */
.vjl-painel label{
  display:block; font-size:12.5px; font-weight:600; letter-spacing:.01em;
  color:rgba(190,198,230,.9); margin:0 0 8px;
}
.vjl-campo{ position:relative; margin-bottom:18px; }
/* Ancorado no <i>, e nunca em ".vjl-campo i" solto dentro de outro
   bloco: seletor frouxo aqui pegaria o ícone do botão do olho também. */
.vjl-campo > i{
  position:absolute; left:17px; top:50%; transform:translateY(-50%);
  font-size:18px; color:rgba(150,165,205,.7); pointer-events:none;
  transition:color .25s var(--ease);
}
.vjl-campo input{
  width:100%; height:58px;
  padding:0 17px 0 48px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(120,135,190,.24);
  color:#F3F7FD; font-size:15px;
  transition:border-color .25s var(--ease), background .25s var(--ease),
             box-shadow .25s var(--ease), transform .25s var(--ease);
}
.vjl-campo input::placeholder{ color:rgba(150,165,205,.5); }
.vjl-campo input:hover{
  background:rgba(255,255,255,.055);
  border-color:rgba(0,200,255,.38);
  transform:translateY(-1px);
  box-shadow:0 6px 18px -10px rgba(0,200,255,.5);
}
.vjl-campo input:focus{
  outline:none;
  border-color:rgba(0,200,255,.55);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(0,200,255,.35), 0 0 25px rgba(80,80,255,.12);
}
.vjl-campo input:focus ~ i,
.vjl-campo input:hover ~ i{ color:rgba(0,200,255,.85); }
/* O campo de senha abre espaço à direita para o botão do olho. */
.vjl-campo.tem-olho input{ padding-right:52px; }

.vjl-olho{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; display:grid; place-items:center;
  background:none; border:0; border-radius:10px; cursor:pointer;
  color:rgba(150,165,205,.75); font-size:18px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.vjl-olho:hover{ color:#F3F7FD; background:rgba(255,255,255,.06); }
.vjl-olho:focus-visible{ outline:2px solid rgba(0,200,255,.6); outline-offset:1px; }

/* ── Botão ──────────────────────────────────────────────────────────── */
.vjl-entrar{
  position:relative; overflow:hidden;
  width:100%; height:60px; margin-top:8px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  border:0; border-radius:15px; cursor:pointer;
  font-size:17px; font-weight:700; color:#fff; letter-spacing:.01em;
  background:linear-gradient(90deg,#7C00FF,#5B3CFF 50%,#00C8FF);
  box-shadow:0 10px 35px rgba(105,40,255,.30);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);
}
.vjl-entrar:hover{
  transform:translateY(-2px); filter:saturate(1.18) brightness(1.06);
  box-shadow:0 16px 44px rgba(105,40,255,.42);
}
.vjl-entrar:active{ transform:scale(.98); }
.vjl-entrar:focus-visible{ outline:2px solid #9BE8FF; outline-offset:3px; }
/* Faixa de luz atravessando. Serve para dizer que o botão é o destino
   da tela; se fosse decoração em tudo, não diria nada em lugar nenhum. */
.vjl-entrar::after{
  content:''; position:absolute; top:0; left:-140%;
  width:55%; height:100%; pointer-events:none;
  background:linear-gradient(114deg, transparent, rgba(255,255,255,.34), transparent);
  transform:skewX(-18deg);
  animation:vjl-brilho 3.6s ease-in-out 1.4s infinite;
}
@keyframes vjl-brilho{
  0%,58%,100%{ left:-140%; }
  92%        { left:190%; }
}

/* ── Rodapé do painel ───────────────────────────────────────────────── */
.vjl-pe{
  margin-top:24px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.075);
  text-align:center; font-size:13.5px; color:rgba(150,165,205,.8);
}
.vjl-pe a{
  display:inline-block; font-weight:700;
  background:linear-gradient(96deg,#38BDF8,#22E3C4);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  padding:0 .06em; margin:0 -.06em;
  transition:transform .22s var(--ease), filter .22s var(--ease);
}
.vjl-pe a:hover{ transform:translateX(2px); filter:brightness(1.3); }
.vjl-pe a:focus-visible{ outline:2px solid rgba(0,200,255,.6); outline-offset:2px; border-radius:4px; }

/* ── Aviso de erro ──────────────────────────────────────────────────── */
.vjl-erro{
  display:flex; gap:10px; align-items:flex-start;
  margin-bottom:20px; padding:13px 15px; border-radius:12px;
  background:rgba(255,92,131,.1); border:1px solid rgba(255,92,131,.32);
  color:#FFC9D6; font-size:13.5px; line-height:1.5;
}
.vjl-erro i{ font-size:18px; flex-shrink:0; color:#FF5C83; }

/* ── Botão de voltar ────────────────────────────────────────────────────
   Era um link de texto pálido embaixo do painel, e ninguém achava.
   Virou botão, fixo no alto à direita: o canto oposto ao logotipo, que
   é o único canto livre da composição, e o lugar onde a própria loja
   já põe os botões de ação. */
.vjl-voltar{
  position:fixed; z-index:4; top:20px; right:20px;
  display:inline-flex; align-items:center; gap:9px;
  height:44px; padding:0 18px; border-radius:12px;
  font-size:14px; font-weight:600; color:#E6EDFA;
  background:rgba(10,14,38,.62);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(140,120,255,.30);
  box-shadow:0 8px 26px -12px rgba(0,0,0,.8);
  transition:transform .22s var(--ease), background .22s var(--ease),
             border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.vjl-voltar i{ font-size:18px; color:#8FB6FF; transition:transform .22s var(--ease); }
.vjl-voltar:hover{
  transform:translateY(-2px);
  background:rgba(16,22,56,.78);
  border-color:rgba(0,200,255,.45);
  box-shadow:0 14px 34px -14px rgba(0,180,255,.55);
}
.vjl-voltar:hover i{ transform:translateX(-3px); }
.vjl-voltar:active{ transform:scale(.97); }
.vjl-voltar:focus-visible{ outline:2px solid rgba(0,200,255,.7); outline-offset:3px; }

/* ── Marca no celular ───────────────────────────────────────────────────
   Em retrato, o cover corta as laterais e o logotipo desenhado no fundo
   sai da tela. Medido: numa viewport de 390x844 aparece só a faixa
   central da arte, entre 34% e 65% da largura — e o logotipo está em 7%.
   Por isso ele volta como elemento de verdade, só aqui. */
.vjl-marca-mob{ display:none; width:170px; }
.vjl-marca-mob img{
  width:100%; height:auto;
  /* Mesmo teto do logotipo da barra lateral, pela mesma razão. */
  max-height:120px; object-fit:contain; aspect-ratio:480/334;
}

@media (max-width:720px){
  body.vjl{ padding:76px 16px 26px; align-content:center; }
  /* O botão deixa de ser fixo: em tela de celular, elemento fixo no
     alto brigaria com a barra do navegador ao rolar. */
  .vjl-voltar{ position:absolute; top:16px; right:16px; height:40px; padding:0 14px; font-size:13px; }
  .vjl-fundo{ background-image:url('../img/marca/fundo-login-celular.webp'); }
  .vjl-marca-mob{ display:block; }
  .vjl-caixa{ width:90vw; }        /* especificação: 90% no celular */
  .vjl-painel{ padding:40px 22px 26px; border-radius:22px; }
  .vjl-poeira{ display:none; }     /* poupa bateria e não é vista */
}

/* ── Movimento reduzido ─────────────────────────────────────────────────
   Quem pede menos movimento no sistema recebe a tela parada, sem perder
   nada: as animações aqui são acabamento, não informação. */
@media (prefers-reduced-motion: reduce){
  .vjl-caixa, .vjl-flutua, .vjl-painel::before, .vjl-selo,
  .vjl-entrar::after, .vjl-poeira i{ animation:none !important; }
  .vjl-caixa{ opacity:1; transform:none; }
  .vjl-campo input, .vjl-entrar, .vjl-pe a, .vjl-voltar, .vjl-voltar i{ transition:none; }
  .vjl-poeira{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CADASTRO — acréscimos de 21/08/2026
   ───────────────────────────────────────────────────────────────────────
   A mesma folha serve às duas telas: o painel, os campos, o botão e as
   partículas são idênticos, e duplicar isso num segundo arquivo criaria
   dois lugares para corrigir a mesma coisa.

   O que vem abaixo é só o que o cadastro tem a mais: a marca no alto, o
   selo de criação de conta, a entrada escalonada, a medida de força da
   senha e o retorno campo a campo.
   ═══════════════════════════════════════════════════════════════════ */

body.vjc .vjl-fundo{ background-image:url('../img/marca/fundo-cadastro.webp'); }
body.vjc .vjl-caixa{ width:min(92vw, 540px); }

/* ── Marca no alto à esquerda ───────────────────────────────────────────
   Este fundo não traz o logotipo desenhado, ao contrário do da tela de
   entrada. Então ele entra como elemento de verdade — que é melhor:
   escala sem perder nitidez, é clicável e nunca é cortado pelo cover. */
.vjc-marca{ position:fixed; z-index:4; top:18px; left:22px; width:168px; }
.vjc-marca img{
  width:100%; height:auto;
  max-height:120px; object-fit:contain; aspect-ratio:480/334;
  filter:drop-shadow(0 10px 26px rgba(80,40,220,.36));
  transition:transform .3s var(--ease);
}
.vjc-marca:hover img{ transform:translateY(-2px); }
.vjc-marca:focus-visible{ outline:2px solid rgba(0,200,255,.7); outline-offset:4px; border-radius:10px; }

/* ── Borda holográfica em movimento ─────────────────────────────────────
   O anel da tela de entrada é fixo. Aqui ele gira, porque o cadastro é a
   tela mais longa das duas e o movimento lento dá o que olhar enquanto a
   pessoa digita quatro campos.

   Animo background-position, e não um ângulo cônico: @property ainda não
   é confiável no Safari, e gradiente cônico animado sem ele salta. */
body.vjc .vjl-painel::after{
  background:linear-gradient(90deg,#7C00FF,#3B6BFF,#00C8FF,#7C00FF);
  background-size:300% 100%;
  animation:vjc-anel 14s linear infinite;
}
@keyframes vjc-anel{ from{ background-position:0% 0; } to{ background-position:300% 0; } }

/* ── Selo de criação ────────────────────────────────────────────────── */
.vjc-selo{
  position:absolute; z-index:3; top:-26px; left:50%; margin-left:-26px;
  width:52px; height:52px; display:grid; place-items:center;
  color:#E9DBFF; font-size:22px; border-radius:50%;
  background:linear-gradient(160deg, rgba(34,22,80,.96), rgba(11,12,38,.96));
  border:1px solid rgba(150,120,255,.45);
  animation:vjc-selo 5s ease-in-out infinite;
}
@keyframes vjc-selo{
  0%,100%{ transform:translateY(0) rotate(-3deg); filter:drop-shadow(0 0 9px rgba(124,0,255,.5)); }
  50%    { transform:translateY(-3px) rotate(3deg); filter:drop-shadow(0 0 20px rgba(0,200,255,.45)); }
}

/* ── Entrada escalonada ─────────────────────────────────────────────────
   Cada elemento herda o próprio atraso de --i. O escalonamento é de
   70ms: abaixo de 50 o olho lê tudo junto, acima de 100 a tela demora a
   ficar utilizável. */
body.vjc [style*="--i"]{ animation:vjc-sobe .55s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--i) * 70ms + 260ms); }
@keyframes vjc-sobe{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

body.vjc .vjl-caixa{ animation:vjc-entrada .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes vjc-entrada{
  from{ opacity:0; transform:translateY(30px) scale(.97); filter:blur(6px); }
  to  { opacity:1; transform:none; filter:none; }
}

/* ── Aviso da primeira conta ────────────────────────────────────────── */
.vjc-coroa{
  display:flex; gap:11px; align-items:flex-start;
  margin-bottom:22px; padding:14px 16px; border-radius:14px;
  background:linear-gradient(150deg, rgba(251,191,36,.11), rgba(124,0,255,.07));
  border:1px solid rgba(251,191,36,.3);
  font-size:13px; line-height:1.55; color:#F0E4C8;
}
.vjc-coroa > i{ font-size:20px; color:#FBBF24; flex-shrink:0; margin-top:1px; }

/* ── Retorno campo a campo ──────────────────────────────────────────────
   O anel de acerto é discreto de propósito. Campo que comemora a cada
   letra certa vira ruído: o que importa é o que ainda falta. */
.vjl-campo .vjc-certo{
  /* left:auto é obrigatório. O .vjc-certo também é filho direto de
     .vjl-campo, então ele herda o left:17px da regra dos ícones de
     campo. Com left E right definidos, a caixa estica de ponta a ponta
     e o ícone acaba desenhado à ESQUERDA, em cima do ícone do campo —
     foi o que aconteceu na primeira renderização. */
  position:absolute; left:auto; right:15px; top:50%; transform:translateY(-50%) scale(.6);
  font-size:19px; color:#2DD4BF; opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.vjl-campo.tem-olho .vjc-certo{ right:50px; }
.vjl-campo.ok .vjc-certo{ opacity:1; transform:translateY(-50%) scale(1); }
.vjl-campo.ok input{ border-color:rgba(45,212,191,.45); }
.vjl-campo.ok input:focus{ box-shadow:0 0 0 1px rgba(45,212,191,.4), 0 0 25px rgba(45,212,191,.12); }

.vjl-campo.ruim input{ border-color:rgba(255,92,131,.5); animation:vjc-nega .34s ease; }
@keyframes vjc-nega{
  0%{transform:translateX(0)} 25%{transform:translateX(-3px)}
  55%{transform:translateX(3px)} 80%{transform:translateX(-2px)} 100%{transform:translateX(0)}
}
.vjc-recado{
  display:block; margin:-12px 0 16px; font-size:12px; line-height:1.45;
  color:rgba(255,150,175,.92); min-height:0;
}
.vjc-recado:empty{ margin:0; }
.vjc-dica{ display:block; margin:-12px 0 16px; font-size:11.5px; color:rgba(150,165,205,.6); }

/* ── Força da senha ─────────────────────────────────────────────────── */
.vjc-forca{ margin:-8px 0 18px; }
.vjc-forca-topo{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(150,165,205,.62); margin-bottom:7px;
}
.vjc-forca-rot{ font-weight:700; letter-spacing:.06em; text-transform:none; font-size:12px; }
.vjc-segs{ display:flex; gap:6px; }
.vjc-segs i{
  flex:1; height:4px; border-radius:3px;
  background:rgba(255,255,255,.09);
  transition:background .45s var(--ease), box-shadow .45s var(--ease);
}
.vjc-forca[data-n="1"] .vjc-segs i:nth-child(-n+1),
.vjc-forca[data-n="2"] .vjc-segs i:nth-child(-n+2),
.vjc-forca[data-n="3"] .vjc-segs i:nth-child(-n+3),
.vjc-forca[data-n="4"] .vjc-segs i{ background:var(--fc); box-shadow:0 0 10px var(--fc); }
.vjc-forca[data-n="1"]{ --fc:#A855F7; }
.vjc-forca[data-n="2"]{ --fc:#7C6BFF; }
.vjc-forca[data-n="3"]{ --fc:#38BDF8; }
.vjc-forca[data-n="4"]{ --fc:#2DD4BF; }

@media (max-width:720px){
  body.vjc .vjl-fundo{ background-image:url('../img/marca/fundo-cadastro-celular.webp'); }
  body.vjc{ padding:96px 16px 26px; }
  .vjc-marca{ position:static; margin:0 auto 4px; width:150px; }
  body.vjc .vjl-caixa{ width:92vw; }
}

@media (prefers-reduced-motion: reduce){
  .vjc-selo, body.vjc .vjl-painel::after, body.vjc [style*="--i"],
  body.vjc .vjl-caixa{ animation:none !important; }
  body.vjc [style*="--i"]{ opacity:1; transform:none; }
  .vjl-campo.ruim input{ animation:none; }
  .vjc-marca img{ transition:none; }
}