/* ═══════════════════════════════════════════════════════════════════════
   Virtus Jogos — folha única
   ───────────────────────────────────────────────────────────────────────
   Identidade própria dentro da família Virtus: mesma base azul-marinho e
   mesmo roxo, mas o CIANO é a cor de acento aqui, e não o roxo. É o que
   diferencia a marca-filha da marca-mãe sem romper com ela.
   ═══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

:root{
  --bg:      #050A18;
  --bg2:     #071326;
  --surface: #0C1730;
  --surface2:#111E3C;
  --line:    rgba(255,255,255,.075);
  --line2:   rgba(255,255,255,.14);

  --txt:  #F3F7FD;
  --txt2: #B7C7DE;
  --txt3: #7C90AF;
  --txt4: #4E6183;

  --violet:#7A00FF;
  --violet2:#A855F7;
  --violet3:#C9A9FF;
  --cyan:  #00B8FF;
  --cyan2: #38BDF8;
  --teal:  #2DD4BF;
  --green: #10B981;
  --amber: #FBBF24;
  --pink:  #FF5C83;

  --grad: linear-gradient(96deg, #7A00FF 0%, #4F46E5 48%, #00B8FF 100%);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html{ scroll-behavior:smooth; }
body{
  font-family:'Sora',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--txt);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; }

.vj-wrap{ width:100%; max-width:1280px; margin:0 auto; padding:0 20px; }

/* ── Cabeçalho ─────────────────────────────────────────────────────── */
.vj-topo{
  position:sticky; top:0; z-index:100;
  background:rgba(5,10,24,.78);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.vj-topo-in{ display:flex; align-items:center; gap:20px; height:66px; }
.vj-logo{ display:flex; align-items:center; gap:9px; font-size:16px; font-weight:800; letter-spacing:-.02em; flex-shrink:0; }
.vj-logo i{ font-size:24px; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vj-nav{ display:flex; gap:2px; margin-left:auto; }
.vj-nav a{
  padding:8px 14px; border-radius:9px; font-size:13.5px; font-weight:500; color:var(--txt3);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.vj-nav a:hover,.vj-nav a.on{ color:var(--txt); background:rgba(255,255,255,.05); }
.vj-acoes{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.vj-burger{ display:none; width:38px; height:38px; border:1px solid var(--line2); border-radius:9px;
  background:transparent; color:var(--txt2); cursor:pointer; }
.vj-mob{ display:none; border-top:1px solid var(--line); background:var(--bg2); padding:10px 0; }
.vj-mob.aberto{ display:block; }
.vj-mob a{ display:block; padding:12px 20px; font-size:14px; color:var(--txt2); }
.vj-mob a:hover{ background:rgba(255,255,255,.04); color:var(--txt); }

/* ── Botões ────────────────────────────────────────────────────────── */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 24px; border:0; border-radius:11px; cursor:pointer;
  font-size:13.5px; font-weight:650; white-space:nowrap;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             background .4s var(--ease), border-color .4s var(--ease);
}
.btn i{ font-size:16px; transition:transform .4s var(--ease); }
.btn-p{ background:var(--grad); background-size:200% 100%; background-position:0% 50%; color:#fff;
  box-shadow:0 14px 34px -14px rgba(80,40,220,.9), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-p:hover{ transform:translateY(-2px); background-position:100% 50%;
  box-shadow:0 20px 44px -14px rgba(80,40,220,1), inset 0 1px 0 rgba(255,255,255,.3); }
/* Brilho que atravessa o botão no hover. ::after e não elemento extra. */
.btn-p::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.26) 50%,transparent 66%);
  transform:translateX(-120%); transition:transform .85s var(--ease);
}
.btn-p:hover::after{ transform:translateX(120%); }
.btn-p:hover i{ transform:translateX(3px); }
.btn-g{ background:rgba(255,255,255,.04); border:1px solid var(--line2); color:var(--txt); }
.btn-g:hover{ transform:translateY(-2px); border-color:rgba(0,184,255,.5); background:rgba(0,184,255,.08); }
.btn-sm{ padding:9px 17px; font-size:12.5px; }
.btn-lg{ padding:15px 32px; font-size:14px; }
.btn-full{ width:100%; }

/* ── Selos ─────────────────────────────────────────────────────────── */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:50px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line2); background:rgba(255,255,255,.04); color:var(--txt3);
}
.tag-cyan{ border-color:rgba(0,184,255,.34); background:rgba(0,184,255,.1); color:#7DD3FC; }
.tag-violet{ border-color:rgba(168,85,247,.34); background:rgba(122,0,255,.12); color:var(--violet3); }
.tag-teal{ border-color:rgba(45,212,191,.32); background:rgba(20,184,166,.1); color:#5EEAD4; }
.tag-amber{ border-color:rgba(251,191,36,.3); background:rgba(251,191,36,.1); color:#FCD34D; }
.bncc{
  display:inline-block; padding:3px 9px; border-radius:6px;
  font-family:ui-monospace,'SF Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.02em;
  background:rgba(122,0,255,.16); color:var(--violet3); border:1px solid rgba(168,85,247,.24);
}

/* ── Fundo atmosférico ─────────────────────────────────────────────── */
.vj-fundo{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.vj-halo{ position:absolute; border-radius:50%; filter:blur(100px); }
.vj-halo-1{ width:680px; height:560px; top:-16%; left:8%;
  background:radial-gradient(circle,rgba(122,0,255,.24),transparent 70%);
  animation:vjResp 18s ease-in-out infinite alternate; }
.vj-halo-2{ width:600px; height:520px; top:14%; right:-6%;
  background:radial-gradient(circle,rgba(0,184,255,.16),transparent 72%);
  animation:vjResp 24s ease-in-out infinite alternate-reverse; }
@keyframes vjResp{ from{opacity:.72;transform:scale(.96)} to{opacity:1;transform:scale(1.05)} }
.vj-grade{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 76% 62% at 50% 40%,#000,transparent 80%);
          mask-image:radial-gradient(ellipse 76% 62% at 50% 40%,#000,transparent 80%);
}
.vj-pt{ position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s);
  border-radius:50%; background:var(--cyan); opacity:var(--a); filter:blur(.6px);
  animation:vjFlut var(--d) ease-in-out infinite alternate; }
@keyframes vjFlut{ from{transform:translate3d(0,0,0)} to{transform:translate3d(10px,-26px,0)} }

/* ── Títulos ───────────────────────────────────────────────────────── */
.sec{ position:relative; isolation:isolate; padding:clamp(60px,7vw,100px) 0; }
.sec-cab{ text-align:center; margin-bottom:clamp(34px,4vw,54px); position:relative; z-index:2; }
.sec-selo{ display:inline-flex; align-items:center; gap:12px; margin-bottom:15px;
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan2); }
.sec-selo i.risco{ width:24px; height:1.5px; background:currentColor; opacity:.5; border-radius:2px; }
h1,h2,h3{ letter-spacing:-.028em; line-height:1.1; }
.h-xl{ font-size:clamp(32px,4.6vw,58px); font-weight:800; }
.h-lg{ font-size:clamp(27px,3.4vw,42px); font-weight:800; }
.h-md{ font-size:clamp(20px,2.2vw,27px); font-weight:700; }
.grad{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 3px 24px rgba(80,40,220,.4));
  /* Folga: sem ela a caixa do background-clip corta a última letra em
     itálico e os acentos que descem. */
  display:inline-block; padding:.06em .1em .14em .02em; margin:-.06em -.1em -.14em -.02em;
}
.sec-sub{ max-width:620px; margin:14px auto 0; font-size:clamp(13.5px,1.3vw,15.5px);
  line-height:1.7; color:var(--txt3); }

/* ── Card de jogo ──────────────────────────────────────────────────── */
.grid-jogos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.jcard{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(168deg,rgba(14,23,50,.78),rgba(8,14,34,.9));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 46px -26px rgba(0,0,0,.84), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.jcard:hover{ transform:translateY(-6px); border-color:rgba(0,184,255,.32);
  box-shadow:0 32px 64px -26px rgba(0,0,0,.9), 0 6px 30px -14px rgba(0,184,255,.4), inset 0 1px 0 rgba(255,255,255,.09); }
.jcard-capa{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface2); }
.jcard-capa img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.jcard:hover .jcard-capa img{ transform:scale(1.06); }
.jcard-sem{ width:100%; height:100%; display:grid; place-items:center; color:var(--txt4); font-size:34px;
  background:linear-gradient(140deg,var(--surface2),var(--surface)); }
/* Véu na base da capa: garante contraste do selo mesmo em capa clara. */
.jcard-capa::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(6,11,26,.78) 100%); }
.jcard-flag{ position:absolute; z-index:2; top:11px; left:11px; }
.jcard-promo{ position:absolute; z-index:2; top:11px; right:11px;
  padding:4px 10px; border-radius:50px; background:var(--pink); color:#fff;
  font-size:10.5px; font-weight:800; letter-spacing:.04em; }
.jcard-corpo{ display:flex; flex-direction:column; flex:1; padding:17px 17px 16px; }
.jcard-corpo h3{ font-size:16px; font-weight:700; margin-bottom:5px; }
.jcard-meta{ font-size:12.2px; color:var(--txt3); margin-bottom:11px; }
.jcard-fatos{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:13px; }
.jcard-fato{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--txt3); }
.jcard-fato i{ font-size:14px; color:var(--cyan2); }
.jcard-pe{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:13px; border-top:1px solid var(--line); }
.jcard-preco b{ font-size:19px; font-weight:800; letter-spacing:-.02em; }
.jcard-preco s{ display:block; font-size:11.5px; color:var(--txt4); }

/* ── Categorias ────────────────────────────────────────────────────── */
.grid-cat{ display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:14px; }
.ccard{
  display:flex; align-items:center; gap:13px; padding:16px;
  border-radius:15px; border:1px solid var(--line);
  background:rgba(255,255,255,.022);
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.ccard:hover{ transform:translateY(-4px); border-color:var(--cc,rgba(0,184,255,.34)); background:rgba(255,255,255,.045); }
.ccard-ico{ flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center;
  border-radius:12px; font-size:20px; color:var(--cc,var(--cyan2));
  background:color-mix(in srgb, var(--cc,#00B8FF) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--cc,#00B8FF) 30%, transparent);
  transition:transform .4s var(--ease); }
.ccard:hover .ccard-ico{ transform:scale(1.07); }
.ccard b{ display:block; font-size:14px; font-weight:650; }
.ccard span{ display:block; font-size:11.5px; color:var(--txt3); margin-top:1px; }

/* ── Busca ─────────────────────────────────────────────────────────── */
.busca{ position:relative; z-index:2; max-width:860px; margin:0 auto; }
.busca-cx{ display:flex; align-items:center; gap:11px; padding:7px 7px 7px 18px;
  border-radius:15px; border:1px solid var(--line2);
  background:rgba(12,23,48,.8); backdrop-filter:blur(16px);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.86); }
.busca-cx > i{ font-size:20px; color:var(--txt3); }
.busca-cx input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--txt); padding:11px 0; font-size:14.5px; }
.busca-cx input::placeholder{ color:var(--txt4); }
.busca-filtros{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; justify-content:center; }
.busca-filtros select{ background:rgba(12,23,48,.8); border:1px solid var(--line2); border-radius:10px;
  padding:8px 13px; color:var(--txt2); font-size:12.5px; cursor:pointer; }
.busca-dica{ text-align:center; margin-top:12px; font-size:12.5px; color:var(--txt4); }
.busca-dica code{ font-family:ui-monospace,monospace; color:var(--violet3); background:rgba(122,0,255,.14);
  padding:2px 7px; border-radius:5px; }

/* ── Diferenciais ──────────────────────────────────────────────────── */
.grid-dif{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.dcard{ padding:24px 22px; border-radius:17px; border:1px solid var(--line);
  background:linear-gradient(168deg,rgba(14,23,50,.62),rgba(8,14,34,.8));
  transition:transform .45s var(--ease), border-color .45s var(--ease); }
.dcard:hover{ transform:translateY(-5px); border-color:rgba(0,184,255,.3); }
.dcard-ico{ width:46px; height:46px; display:grid; place-items:center; border-radius:13px; margin-bottom:15px;
  font-size:22px; color:var(--violet3); background:rgba(122,0,255,.14); border:1px solid rgba(168,85,247,.26); }
.dcard h3{ font-size:16px; font-weight:700; margin-bottom:7px; }
.dcard p{ font-size:13.2px; line-height:1.62; color:var(--txt3); }

/* ── Rodapé ────────────────────────────────────────────────────────── */
.vj-rodape{ position:relative; border-top:1px solid var(--line); background:var(--bg2);
  padding:clamp(44px,5vw,66px) 0 26px; margin-top:auto; }
.rod-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:34px; padding-bottom:30px; }
.rod-desc{ max-width:340px; font-size:13px; line-height:1.7; color:var(--txt3); margin-top:14px; }
.rod-col h4{ font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan2); margin-bottom:15px; }
.rod-col a{ display:block; padding:6px 0; font-size:13px; color:var(--txt3);
  transition:color .3s var(--ease), padding-left .3s var(--ease); }
.rod-col a:hover{ color:var(--txt); padding-left:6px; }
.rod-base{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--line); font-size:12.2px; color:var(--txt4); }

/* ── Estado vazio ──────────────────────────────────────────────────── */
.vazio{ text-align:center; padding:60px 20px; color:var(--txt3); }
.vazio i{ font-size:46px; color:var(--txt4); display:block; margin-bottom:14px; }
.vazio h3{ font-size:17px; margin-bottom:7px; color:var(--txt2); }
.vazio p{ font-size:13.5px; max-width:400px; margin:0 auto 20px; }

/* ── Aviso ─────────────────────────────────────────────────────────── */
.aviso{ display:flex; gap:11px; align-items:flex-start; padding:14px 17px; border-radius:12px;
  font-size:13.2px; line-height:1.6; margin-bottom:20px; }
.aviso i{ font-size:18px; flex-shrink:0; margin-top:1px; }
.aviso-ok{ background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.28); color:#6EE7B7; }
.aviso-err{ background:rgba(255,92,131,.1); border:1px solid rgba(255,92,131,.3); color:#FDA4AF; }

/* ── Entrada ───────────────────────────────────────────────────────── */
[data-rev]{ opacity:0; transform:translateY(20px); filter:blur(6px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
[data-rev].rev{ opacity:1; transform:none; filter:blur(0); }

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px; }

/* ── Responsivo ────────────────────────────────────────────────────── */
@media (max-width:900px){
  .vj-nav{ display:none; }
  .vj-burger{ display:grid; place-items:center; }
  .rod-grid{ grid-template-columns:1fr 1fr; }
  .rod-marca{ grid-column:1/-1; }
}
@media (max-width:620px){
  .rod-grid{ grid-template-columns:1fr; gap:26px; }
  .rod-base{ flex-direction:column; text-align:center; }
  .busca-cx{ padding-left:14px; }
  .vj-pt,.vj-grade{ display:none; }
  [data-rev]{ filter:none; transform:translateY(14px); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  [data-rev]{ opacity:1; transform:none; filter:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT DE LOJA — barra lateral fixa
   ───────────────────────────────────────────────────────────────────────
   A troca do cabeçalho horizontal por barra lateral não é cosmética: é
   o que faz o site ler como PLATAFORMA, e não como página de venda. Em
   loja de jogos, a lateral é onde mora a navegação permanente, e o
   espaço de cima fica livre para o banner.
   ═══════════════════════════════════════════════════════════════════ */

body.loja{ display:flex; min-height:100vh; }

/* ── Barra lateral ─────────────────────────────────────────────────── */
.lj-side{
  position:fixed; top:0; left:0; z-index:120;
  width:236px; height:100vh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#070C1E,#050816);
  border-right:1px solid var(--line);
  overflow-y:auto; overscroll-behavior:contain;
}
.lj-side::-webkit-scrollbar{ width:5px; }
.lj-side::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.09); border-radius:4px; }

.lj-marca{ display:flex; align-items:center; gap:11px; padding:22px 20px 20px; }
.lj-marca-ico{
  width:38px; height:38px; flex-shrink:0;
  display:grid; place-items:center; border-radius:11px;
  background:var(--grad); color:#fff; font-size:20px;
  box-shadow:0 8px 22px -8px rgba(80,40,220,.9);
}
.lj-marca b{ display:block; font-size:13.5px; font-weight:800; letter-spacing:.02em; line-height:1.15; }
.lj-marca span{ display:block; font-size:13.5px; font-weight:800; color:var(--violet3); line-height:1.15; }

.lj-nav{ padding:6px 12px; flex:1; }
.lj-nav a{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:11px 13px; margin-bottom:2px; border-radius:10px;
  font-size:13.5px; font-weight:500; color:var(--txt3);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.lj-nav a i{ font-size:19px; flex-shrink:0; }
.lj-nav a:hover{ color:var(--txt); background:rgba(255,255,255,.045); }
.lj-nav a.on{ color:var(--txt); background:rgba(122,0,255,.15); }
/* Filete à esquerda do item ativo: marca a posição sem depender só de
   cor de fundo, que some em tela de brilho baixo. */
.lj-nav a.on::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--violet2);
  box-shadow:0 0 10px var(--violet2);
}
.lj-nav a .bolha{
  margin-left:auto; min-width:19px; height:19px; padding:0 6px;
  display:grid; place-items:center; border-radius:50px;
  background:var(--violet); color:#fff; font-size:10.5px; font-weight:700;
}
.lj-sec{ padding:16px 13px 7px; font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--txt4); }

/* ── Cartão premium ────────────────────────────────────────────────── */
.lj-premium{
  position:relative; overflow:hidden;
  margin:14px 12px 18px; padding:18px 16px;
  border-radius:15px; border:1px solid rgba(245,158,11,.28);
  background:linear-gradient(168deg,rgba(120,70,10,.28),rgba(30,20,8,.6));
}
.lj-premium b{ display:block; font-size:13.5px; font-weight:800; margin-bottom:6px; }
.lj-premium b em{ font-style:normal; color:#FBBF24; }
.lj-premium p{ font-size:11.5px; line-height:1.55; color:var(--txt3); margin-bottom:14px; }
.lj-premium .btn{ width:100%; background:linear-gradient(96deg,#B45309,#F59E0B);
  color:#2A1A02; font-weight:750; box-shadow:0 10px 26px -12px rgba(245,158,11,.9); }
/* Brilho atravessando o botão a cada 7s, com pausa longa. Constante
   viraria ruído numa barra que fica sempre na tela. */
.lj-premium .btn::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 36%,rgba(255,255,255,.45) 50%,transparent 64%);
  transform:translateX(-130%); animation:ljBrilho 7s ease-in-out infinite;
}
@keyframes ljBrilho{ 0%{transform:translateX(-130%)} 26%{transform:translateX(130%)} 100%{transform:translateX(130%)} }

.lj-side-pe{ padding:0 20px 22px; }
.lj-redes{ display:flex; gap:9px; margin-bottom:12px; }
.lj-redes a{ width:30px; height:30px; display:grid; place-items:center; border-radius:8px;
  border:1px solid var(--line); color:var(--txt4); font-size:15px;
  transition:color .3s var(--ease), border-color .3s var(--ease); }
.lj-redes a:hover{ color:var(--cyan2); border-color:rgba(0,184,255,.4); }
.lj-side-pe p{ font-size:10.5px; line-height:1.6; color:var(--txt4); }

/* ── Área principal ────────────────────────────────────────────────── */
.lj-main{ flex:1; min-width:0; margin-left:236px; display:flex; flex-direction:column; }

.lj-topo{
  position:sticky; top:0; z-index:90;
  display:flex; align-items:center; gap:16px;
  padding:14px 26px;
  background:rgba(5,8,22,.82);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.lj-busca{ flex:1; max-width:460px; position:relative; }
.lj-busca input{
  width:100%; background:rgba(255,255,255,.045); border:1px solid var(--line2);
  border-radius:11px; padding:11px 42px 11px 16px; color:var(--txt); font-size:13.5px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.lj-busca input::placeholder{ color:var(--txt4); }
.lj-busca input:focus{ outline:0; border-color:rgba(0,184,255,.5); background:rgba(0,184,255,.06); }
.lj-busca button{ position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; border-radius:8px; background:transparent;
  color:var(--txt3); cursor:pointer; font-size:17px; }
.lj-busca button:hover{ color:var(--cyan2); }

.lj-topo-dir{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.lj-icone{
  position:relative; display:flex; align-items:center; gap:8px;
  padding:8px 13px; border-radius:10px; font-size:12.5px; color:var(--txt3);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.lj-icone i{ font-size:19px; }
.lj-icone:hover{ color:var(--txt); background:rgba(255,255,255,.05); }
.lj-icone .cont{ position:absolute; top:2px; right:2px; min-width:17px; height:17px;
  padding:0 5px; display:grid; place-items:center; border-radius:50px;
  background:var(--pink); color:#fff; font-size:10px; font-weight:700; }
.lj-user{ display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px;
  border-radius:50px; border:1px solid var(--line); }
.lj-user-av{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad); color:#fff; font-size:12px; font-weight:700; flex-shrink:0; }
/* ═══════════════════════════════════════════════════════════════════
   CORREÇÃO — 21/08/2026 — AS INICIAIS SAÍAM DE DENTRO DO CÍRCULO
   ───────────────────────────────────────────────────────────────────
   A regra aqui era `.lj-user span`, solta. E o avatar TAMBÉM é um
   <span>: `.lj-user-av`. Então ela trocava o display:grid dele por
   block, matava o place-items:center, e as iniciais escapavam para
   fora do círculo, em amarelo, com 9,5px.

   Medido no site no ar: "AD" desenhado no canto superior esquerdo do
   círculo, transbordando, e o nome "Adrian" em âmbar porque herdava a
   cor do <span> que embrulha o texto.

   Agora tudo está ancorado no .lj-user-txt, que é a caixa do texto e
   não pega o avatar. Mesma razão pela qual não se escreve `.bloco b`
   nem `.bloco span` em lugar nenhum deste projeto.
   ═══════════════════════════════════════════════════════════════════ */
.lj-user-txt{ display:block; min-width:0; }
.lj-user-txt b{ display:block; font-size:12.5px; font-weight:600;
  line-height:1.2; color:var(--txt); }
.lj-user-txt > span{ display:block; font-size:9.5px; font-weight:700;
  letter-spacing:.1em; color:#FBBF24; line-height:1.2; }

/* ── Entrada discreta para a administração ─────────────────────────────
   Fica na fileira de ícones do rodapé da barra, ao lado do globo e do
   envelope. Quem não procura não vê; para quem procura é um clique.
   Só é impressa no HTML para quem é admin. */
.lj-engrenagem{ color:var(--txt4); }
.lj-engrenagem:hover{ color:var(--violet3); }

.lj-conteudo{ flex:1; padding:22px 26px 40px; }

/* ── Hero da loja ──────────────────────────────────────────────────── */
.lj-hero{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:20px; border:1px solid var(--line2);
  min-height:420px; display:flex; align-items:center;
  background:linear-gradient(96deg,#0A0620 0%,#160A38 46%,#1E0B44 100%);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
}
.lj-hero-art{
  position:absolute; top:0; right:0; bottom:0; z-index:0;
  width:66%; object-fit:cover; object-position:center left;
  /* Máscara em gradiente: a arte dissolve rumo ao texto, sem borda. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 20%,#000 52%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 20%,#000 52%);
  animation:ljArte 30s ease-in-out infinite alternate;
}
@keyframes ljArte{ from{transform:scale(1.02)} to{transform:scale(1.06)} }
.lj-hero-veu{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(96deg,rgba(8,5,24,.96) 0%,rgba(8,5,24,.7) 34%,transparent 62%); }
.lj-hero-in{ position:relative; z-index:2; padding:clamp(28px,3.4vw,48px); max-width:560px; }
.lj-hero h1{ font-size:clamp(30px,3.8vw,50px); font-weight:800; line-height:1.02;
  letter-spacing:-.03em; margin-bottom:14px; text-transform:uppercase; }
.lj-hero p{ font-size:14.5px; line-height:1.65; color:var(--txt2); margin-bottom:24px; max-width:420px; }
.lj-hero-btns{ display:flex; gap:11px; flex-wrap:wrap; margin-bottom:24px; }
.lj-trailer{ display:inline-flex; align-items:center; gap:10px; font-size:13px;
  font-weight:600; color:var(--txt2); }
.lj-trailer i{ width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line2); font-size:17px;
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); }
.lj-trailer:hover i{ transform:scale(1.07); border-color:var(--violet2); background:rgba(122,0,255,.16); }
.lj-selos{ display:flex; gap:9px; flex-wrap:wrap; }
.lj-selo{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px;
  border-radius:10px; border:1px solid var(--line2); background:rgba(255,255,255,.04);
  font-size:11.5px; color:var(--txt2); }
.lj-selo b{ font-size:13.5px; font-weight:800; }
.lj-selo i{ color:#FBBF24; font-size:15px; }

/* ── Faixa de seção com setas ──────────────────────────────────────── */
.lj-faixa{ display:flex; align-items:center; gap:14px; margin:36px 0 16px; }
.lj-faixa h2{ font-size:19px; font-weight:750; letter-spacing:-.02em; }
.lj-faixa .setas{ display:flex; gap:7px; margin-left:auto; }
.lj-seta{ width:32px; height:32px; display:grid; place-items:center; border-radius:9px;
  border:1px solid var(--line2); background:rgba(255,255,255,.03); color:var(--txt3);
  cursor:pointer; font-size:16px; transition:color .3s var(--ease), border-color .3s var(--ease); }
.lj-seta:hover{ color:var(--txt); border-color:var(--violet2); background:rgba(122,0,255,.14); }
.lj-seta[disabled]{ opacity:.3; cursor:default; }
.lj-vertodos{ font-size:11.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
  color:var(--txt3); padding:7px 13px; border-radius:8px; border:1px solid var(--line2); }
.lj-vertodos:hover{ color:var(--txt); border-color:var(--cyan2); }

/* ── Carrossel ─────────────────────────────────────────────────────
   scroll-snap nativo. Um carrossel em JavaScript puro perde o toque,
   o teclado e a barra de rolagem; com scroll-snap, os três funcionam
   de graça e as setas só empurram o scroll. */
.lj-carrossel{
  display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding:4px 4px 14px; margin:0 -4px;
  scrollbar-width:none;
}
.lj-carrossel::-webkit-scrollbar{ display:none; }
.lj-carrossel > *{ scroll-snap-align:start; flex:0 0 auto; }

/* ── Card de área ──────────────────────────────────────────────────── */
.acard{
  position:relative; overflow:hidden;
  width:210px; min-height:172px; padding:18px;
  display:flex; flex-direction:column;
  border-radius:16px; border:1px solid var(--ac,rgba(0,184,255,.26));
  background:linear-gradient(158deg,
    color-mix(in srgb, var(--ac,#00B8FF) 20%, #0A1024) 0%,
    #080D1E 78%);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.acard:hover{ transform:translateY(-5px) scale(1.02);
  box-shadow:0 22px 46px -22px var(--ac,#00B8FF), 0 0 0 1px var(--ac,#00B8FF); }
.acard b{ font-size:13px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ac,#7DD3FC); margin-bottom:6px; line-height:1.2; }
.acard p{ font-size:11.5px; line-height:1.5; color:var(--txt3); margin-bottom:auto; }
.acard-ico{ position:absolute; right:-8px; bottom:34px; font-size:64px;
  color:var(--ac,#00B8FF); opacity:.18; transition:transform .5s var(--ease), opacity .5s var(--ease); }
.acard:hover .acard-ico{ transform:scale(1.12) rotate(-6deg); opacity:.3; }
.acard .btn{ margin-top:14px; align-self:flex-start; padding:7px 15px; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.07); border:1px solid var(--line2); color:var(--txt); }
.acard:hover .btn{ background:var(--ac,#00B8FF); color:#04101F; border-color:transparent; }

/* ── Card de jogo na loja ──────────────────────────────────────────── */
.gcard{ width:216px; position:relative; }
.gcard .jcard{ height:100%; }
.gcard-novo{ position:absolute; z-index:3; top:10px; left:10px; padding:3px 10px;
  border-radius:6px; background:var(--pink); color:#fff;
  font-size:9.5px; font-weight:800; letter-spacing:.08em; }
.gcard-fav{ position:absolute; z-index:3; top:8px; right:8px;
  width:30px; height:30px; display:grid; place-items:center; border-radius:9px;
  border:1px solid var(--line2); background:rgba(6,10,24,.72); color:var(--txt3);
  font-size:16px; cursor:pointer; backdrop-filter:blur(6px);
  transition:color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); }
.gcard-fav:hover{ color:var(--pink); border-color:rgba(255,92,131,.5); transform:scale(1.08); }
.gcard-fav.on{ color:var(--pink); border-color:rgba(255,92,131,.6); background:rgba(255,92,131,.16); }
.gcard-fav.on i{ animation:ljCoracao .5s var(--ease); }
@keyframes ljCoracao{ 0%{transform:scale(1)} 45%{transform:scale(1.4)} 100%{transform:scale(1)} }
.gcard-disp{ display:flex; gap:6px; color:var(--txt4); font-size:14px; }

/* ── Benefícios ────────────────────────────────────────────────────── */
.lj-benef{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0;
  margin-top:38px; border-radius:17px; border:1px solid var(--line); overflow:hidden;
  background:linear-gradient(96deg,rgba(14,23,50,.7),rgba(9,15,36,.86)); }
.lj-benef > div{ display:flex; align-items:flex-start; gap:13px; padding:22px 20px;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05); }
.lj-benef > div:last-child{ box-shadow:none; }
.lj-benef i{ font-size:26px; flex-shrink:0; }
.lj-benef b{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:5px; }
.lj-benef p{ font-size:12px; line-height:1.55; color:var(--txt3); }

/* ── Responsivo da loja ────────────────────────────────────────────── */
.lj-abrir{ display:none; }
@media (max-width:1080px){
  .lj-side{ transform:translateX(-100%); transition:transform .4s var(--ease); }
  body.loja.menu .lj-side{ transform:none; }
  .lj-main{ margin-left:0; }
  .lj-abrir{ display:grid; place-items:center; width:38px; height:38px; flex-shrink:0;
    border:1px solid var(--line2); border-radius:10px; background:transparent;
    color:var(--txt2); cursor:pointer; font-size:19px; }
  /* Véu que fecha o menu ao tocar fora. Sem ele, num telefone o menu
     aberto prende o visitante. */
  body.loja.menu::after{ content:''; position:fixed; inset:0; z-index:110;
    background:rgba(3,6,16,.7); backdrop-filter:blur(3px); }
}
@media (max-width:760px){
  .lj-conteudo{ padding:16px 16px 34px; }
  .lj-topo{ padding:12px 16px; gap:10px; }
  .lj-icone span{ display:none; }
  /* Esconde só o TEXTO. A regra antiga era `.lj-user span`, que
     escondia o avatar junto e deixava o chip vazio no celular. */
  .lj-user-txt{ display:none; }
  .lj-user{ padding:4px; border:0; }
  .lj-hero{ min-height:auto; }
  .lj-hero-art{ width:100%; opacity:.4;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 76%);
            mask-image:linear-gradient(180deg,#000 0%,transparent 76%); }
  .lj-hero-veu{ background:linear-gradient(180deg,rgba(8,5,24,.6) 0%,rgba(8,5,24,.9) 52%,#080518 100%); }
  .lj-hero-in{ padding:110px 20px 26px; }
  .lj-benef{ grid-template-columns:1fr; }
  .lj-benef > div{ box-shadow:inset 0 -1px 0 rgba(255,255,255,.05); }
}

/* ═══════════════════════════════════════════════════════════════════════
   CORREÇÕES MEDIDAS NO CARD DENTRO DO CARROSSEL — 20/08/2026
   ───────────────────────────────────────────────────────────────────────
   Renderizei a loja com seis jogos e três defeitos apareceram. Nenhum
   deles existia no card fora do carrossel: só surgem quando o selo
   NOVO e o botão de favorito se somam ao que o card já tinha.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. COLISÃO NO CANTO SUPERIOR ESQUERDO.
      O selo NOVO e a etiqueta de categoria ocupavam o mesmo ponto, e
      um imprimia por cima do outro ("NOVO" sobre "CIÊNCIAS DA NATUREZ").
      Dentro do carrossel a categoria desce para o rodapé da capa, onde
      o véu escuro já garante contraste. */
.gcard .jcard-flag{ top:auto; bottom:10px; left:10px; }

/* 2. COLISÃO NO CANTO SUPERIOR DIREITO.
      O selo de desconto e o coração disputavam o mesmo canto. O
      desconto passa para a direita da linha de baixo. */
.gcard .jcard-promo{ top:auto; bottom:10px; right:10px; }

/* 3. O PREÇO QUEBRAVA EM DUAS LINHAS.
      Em 216px de largura, "R$ 34,90" não cabia ao lado do botão e o
      "R$" ficava sozinho numa linha. Empilhando preço e botão, cada um
      recebe a largura inteira. */
.gcard .jcard-pe{ flex-direction:column; align-items:stretch; gap:10px; }
.gcard .jcard-preco{ display:flex; align-items:baseline; gap:8px; }
.gcard .jcard-preco s{ display:inline; }
.gcard .jcard-preco b{ white-space:nowrap; }
.gcard .jcard-pe .btn{ justify-content:center; }

/* O contêiner do card no carrossel precisa esticar: sem isto, cards de
   descrição curta ficam mais baixos e a fileira fica dentada. */
.gcard{ display:flex; }
.gcard > .jcard{ width:100%; }


/* 4. AINDA HAVIA SOBREPOSIÇÃO NA LINHA DE BAIXO DA CAPA.
      Com nome longo ("Ciências Humanas") e selo de desconto juntos, os
      dois se encostavam em 216px. A categoria passa a caber no espaço
      que sobra, e o texto corta com reticências em vez de invadir. */
.gcard .jcard-flag{
  max-width: calc(100% - 78px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}

/* 5. O CARROSSEL DE ÁREAS CORTAVA O ÚLTIMO CARTÃO NO MEIO.
      Um respiro no fim deixa claro que há mais conteúdo à direita —
      cartão cortado rente à borda parece defeito de layout. */
.lj-carrossel::after{ content:''; flex:0 0 8px; }


/* 6. AJUSTES FINAIS DO CARD DE LOJA, DEPOIS DE VER OS SEIS JUNTOS.

   A capa vazia ocupava metade da altura útil. Enquanto não houver
   imagem, ela encolhe: espaço vazio grande faz o catálogo parecer
   inacabado, e o nome do jogo é o que precisa aparecer primeiro. */
.gcard .jcard-capa{ aspect-ratio:16/8; }
.gcard .jcard-capa .jcard-sem{ font-size:26px; opacity:.5; }

/* A etiqueta de categoria cortava em "CIÊNCIAS DA N…". Fonte um ponto
   menor e recuo menor devolvem o nome inteiro na maioria dos casos. */
.gcard .jcard-flag{ font-size:9.5px; padding:3px 9px; letter-spacing:.04em;
                    max-width:calc(100% - 70px); }
.gcard .jcard-promo{ font-size:9.5px; padding:3px 8px; }

/* O card ficou mais largo: 216px apertava tudo, e a diferença entre
   236 e 216 é a diferença entre "Ciências Humanas" caber ou não. */
.gcard{ width:236px; }

/* ═══════════════════════════════════════════════════════════════════════
   MOTION — segunda rodada
   ───────────────────────────────────────────────────────────────────────
   Princípio que guiou tudo abaixo: movimento serve para dizer alguma
   coisa. Cascata diz ordem de leitura. Inclinação diz que o objeto tem
   volume. Névoa na borda diz que há mais conteúdo. O que não diz nada
   ficou de fora.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Entrada do hero ────────────────────────────────────────────────
   --i é o índice do elemento. O atraso sai dele: 90ms entre cada um.
   Um único valor no HTML controla toda a coreografia. */
.lj-linha, .lj-ent{
  opacity:0; transform:translateY(22px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms + 120ms);
}
.lj-linha{ display:block; }
.lj-hero.entrou .lj-linha,
.lj-hero.entrou .lj-ent{ opacity:1; transform:none; }

/* A arte entra depois do texto, com escala. O texto precisa ser lido
   primeiro; a imagem chega para confirmar, não para disputar. */
.lj-hero-art{ opacity:0; transform:scale(1.1);
  transition:opacity 1.1s var(--ease) .3s, transform 1.4s var(--ease) .3s; }
.lj-hero.entrou .lj-hero-art{ opacity:.98; transform:scale(1.02); }

/* ── Fagulhas ───────────────────────────────────────────────────────
   Sobem da base e se apagam no meio do caminho. A opacidade some antes
   do topo para não parecer que bateram num teto invisível. */
.lj-faisca{
  position:absolute; z-index:1; left:var(--x); bottom:-10px;
  width:var(--s); height:var(--s); border-radius:50%;
  background:#C4B5FD; box-shadow:0 0 8px rgba(196,181,253,.9);
  pointer-events:none; opacity:0;
  animation:ljSobe var(--d) linear infinite;
  animation-delay:var(--r);
}
@keyframes ljSobe{
  0%   { transform:translateY(0)      scale(.6); opacity:0; }
  12%  { opacity:.85; }
  70%  { opacity:.5; }
  100% { transform:translateY(-380px) scale(1.1); opacity:0; }
}

/* ── Card com volume ────────────────────────────────────────────────
   Inclinação de até 5° seguindo o cursor. É pouco de propósito: acima
   de uns 8° o texto começa a distorcer e o card vira brinquedo. */
.gcard > .jcard{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.gcard.inclina > .jcard{
  transform:perspective(900px)
            rotateX(calc(var(--ry,0) * -5deg))
            rotateY(calc(var(--rx,0) *  5deg))
            translateY(-6px) scale(1.015);
}
/* Reflexo especular que acompanha o cursor: é ele que faz a superfície
   parecer material, e não papel. */
.gcard > .jcard::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  border-radius:inherit; opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.12), transparent 46%);
  transition:opacity .45s var(--ease);
}
.gcard.inclina > .jcard::after{ opacity:1; }

/* Os cards da faixa entram em cascata, da esquerda para a direita. */
.lj-carrossel .gcard[data-rev]{ transform:translateY(18px) scale(.97); filter:none; }
.lj-carrossel .gcard[data-rev].rev{ transform:none; }

/* ── Névoa nas bordas do carrossel ─────────────────────────────────
   Só aparece do lado em que há conteúdo além. Névoa dos dois lados
   sempre visível seria decoração; assim, é informação. */
.lj-carrossel-cx{ position:relative; }
.lj-carrossel-cx::before,
.lj-carrossel-cx::after{
  content:''; position:absolute; top:0; bottom:14px; width:56px; z-index:3;
  pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
}
.lj-carrossel-cx::before{ left:-4px;
  background:linear-gradient(90deg,var(--bg) 10%,transparent); }
.lj-carrossel-cx::after{ right:-4px;
  background:linear-gradient(270deg,var(--bg) 10%,transparent); }
.lj-carrossel-cx.tem-esq::before{ opacity:1; }
.lj-carrossel-cx.tem-dir::after{ opacity:1; }

/* ── Item ativo da lateral ─────────────────────────────────────────
   O filete cresce em scaleY em vez de aparecer pronto: o olho percebe
   para onde a seleção foi. */
.lj-nav a.on::before{ transform:translateY(-50%) scaleY(0); animation:ljFilete .45s var(--ease) forwards; }
@keyframes ljFilete{ to{ transform:translateY(-50%) scaleY(1); } }

/* ── Coração ────────────────────────────────────────────────────────
   Ao marcar, um anel se expande e some. O pulso do ícone sozinho é
   fácil de perder num card cheio. */
.gcard-fav::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--pink); opacity:0; pointer-events:none;
}
.gcard-fav.acabou::after{ animation:ljAnel .6s var(--ease); }
@keyframes ljAnel{
  0%  { opacity:.9; transform:scale(1); }
  100%{ opacity:0;  transform:scale(1.85); }
}

/* ── Botão de área ─────────────────────────────────────────────────
   A seta desliza para dentro no hover, em vez de já estar lá ocupando
   espaço. */
.acard .btn::after{
  content:'→'; display:inline-block; width:0; overflow:hidden;
  margin-left:0; opacity:0;
  transition:width .35s var(--ease), margin-left .35s var(--ease), opacity .35s var(--ease);
}
.acard:hover .btn::after{ width:12px; margin-left:7px; opacity:1; }

@media (prefers-reduced-motion:reduce){
  .lj-linha, .lj-ent, .lj-hero-art{ opacity:1 !important; transform:none !important; }
  .lj-faisca{ display:none; }
  .gcard.inclina > .jcard{ transform:translateY(-4px); }
  .gcard > .jcard::after{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOTION — 20/08/2026
   ───────────────────────────────────────────────────────────────────────
   Princípio que orientou tudo abaixo: animação existe para explicar
   ORDEM e CAUSA. Se um movimento não diz ao visitante o que veio
   primeiro ou o que sua ação provocou, ele é enfeite e sai.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Entrada do hero, em sequência ─────────────────────────────────
   Antes o banner inteiro aparecia como um bloco. Agora entra na ordem
   em que se lê: título, texto, botões, selos. A arte entra por último,
   com escala — é o pano de fundo, não a mensagem. */
.lj-hero [data-cena]{
  opacity:0; transform:translateY(22px);
  animation:ljCena .9s var(--ease) forwards;
}
.lj-hero [data-cena="1"]{ animation-delay:.10s; }
.lj-hero [data-cena="2"]{ animation-delay:.24s; }
.lj-hero [data-cena="3"]{ animation-delay:.36s; }
.lj-hero [data-cena="4"]{ animation-delay:.48s; }
@keyframes ljCena{ to{ opacity:1; transform:none; } }

.lj-hero-art{
  opacity:0; animation:ljArteEntra 1.4s var(--ease) .15s forwards,
                       ljArte 30s ease-in-out 1.6s infinite alternate;
}
@keyframes ljArteEntra{ from{ opacity:0; transform:scale(1.1); } to{ opacity:1; transform:scale(1.02); } }

/* O título entra palavra a palavra. Três linhas curtas: o efeito é
   percebido como ritmo, não como lentidão. */
.lj-hero h1 span{ display:block; opacity:0; transform:translateY(26px);
  animation:ljCena .8s var(--ease) forwards; }
.lj-hero h1 span:nth-child(1){ animation-delay:.12s; }
.lj-hero h1 span:nth-child(2){ animation-delay:.22s; }
.lj-hero h1 span:nth-child(3){ animation-delay:.32s; }

/* ── Cascata dentro do carrossel ───────────────────────────────────
   O atraso é calculado por POSIÇÃO NA FAIXA, e não pela ordem global
   da página. Sem isso, o quinto card de uma faixa herdava o atraso do
   vigésimo elemento e entrava meio segundo depois dos vizinhos. */
.lj-carrossel > *{ --i:0; }
.lj-carrossel > [data-rev]{ transition-delay:calc(var(--i) * 70ms) !important; }

/* ── Inclinação 3D no card ─────────────────────────────────────────
   ±5 graus, seguindo o cursor. O limite é baixo de propósito: acima
   de uns 8 graus o texto do card começa a ficar desconfortável de ler
   e o efeito passa de "objeto" para "truque". */
.gcard{ perspective:900px; }
.gcard > .jcard{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.gcard.tilt > .jcard{ transition:transform .12s linear, border-color .5s var(--ease), box-shadow .5s var(--ease); }
/* Brilho que acompanha o cursor sobre a capa, como reflexo em vidro. */
.gcard .jcard-capa::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),
             rgba(255,255,255,.16), transparent 55%);
  transition:opacity .4s var(--ease);
}
.gcard:hover .jcard-capa::before{ opacity:1; }

/* ── Contagem dos números do banner ────────────────────────────────
   O valor sobe de zero até o número real. A leve variação de escala
   marca o fim da contagem, para o olho saber que o valor parou. */
.lj-selo b{ font-variant-numeric:tabular-nums; display:inline-block; }
.lj-selo b.pronto{ animation:ljPronto .45s var(--ease); }
@keyframes ljPronto{ 0%{transform:scale(1)} 45%{transform:scale(1.16)} 100%{transform:scale(1)} }

/* ── Barra de progresso da biblioteca ──────────────────────────────
   Cresce de zero até o valor quando o card entra na tela. Barra que
   já nasce cheia não comunica progresso — comunica um traço colorido. */
.prog-barra i{ width:0 !important; transition:width 1.3s var(--ease) .2s; }
.prog-barra i.cheia{ width:var(--pc) !important; }

/* ── Favorito ──────────────────────────────────────────────────────
   O coração pulsa e solta um anel que se dissolve. É o feedback que
   confirma "registrei" sem precisar de mensagem. */
.gcard-fav::after{
  content:''; position:absolute; inset:-2px; border-radius:11px;
  border:2px solid var(--pink); opacity:0; pointer-events:none;
}
.gcard-fav.pulsou::after{ animation:ljAnel .6s var(--ease); }
@keyframes ljAnel{
  0%{ opacity:.9; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.6); }
}

/* ── Confirmação de compra ─────────────────────────────────────────
   O escudo do sucesso se desenha, e não aparece pronto. Selo sendo
   carimbado comunica "confirmado" melhor que um ícone que surge. */
.ret-ico.ok svg{ width:38px; height:38px; }
.ret-ico.ok svg path{
  stroke-dasharray:80; stroke-dashoffset:80;
  animation:ljTraco 1.1s var(--ease) .3s forwards;
}
@keyframes ljTraco{ to{ stroke-dashoffset:0; } }

/* Partículas da confirmação: doze pontos que sobem e somem, uma vez
   só. Sem loop — celebração que se repete vira ansiedade. */
.confete{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.confete i{
  position:absolute; top:50%; left:50%;
  width:7px; height:7px; border-radius:2px;
  background:var(--cf,#A855F7); opacity:0;
  animation:ljConfete 1.5s var(--ease) forwards;
  animation-delay:var(--cd,0s);
}
@keyframes ljConfete{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.4); }
  18% { opacity:1; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--cx)), calc(-50% + var(--cy))) scale(.7) rotate(var(--cr)); }
}

/* ── Botão em ação ─────────────────────────────────────────────────
   Enquanto o formulário envia, o botão vira estado de espera. Sem
   isso, o visitante clica de novo — e no checkout isso é um segundo
   pedido. */
.btn.ocupado{ pointer-events:none; opacity:.72; }
.btn.ocupado i{ animation:ljGira .9s linear infinite; }
@keyframes ljGira{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  .lj-hero [data-cena], .lj-hero h1 span, .lj-hero-art{ opacity:1 !important; transform:none !important; animation:none !important; }
  .prog-barra i{ width:var(--pc) !important; transition:none !important; }
  .ret-ico.ok svg path{ stroke-dashoffset:0 !important; animation:none !important; }
  .confete{ display:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CARD DE ÁREA COM ILUSTRAÇÃO
   ───────────────────────────────────────────────────────────────────────
   As artes vêm com o título, a descrição e o botão já desenhados. Usei
   apenas a ILUSTRAÇÃO: o card escreve o texto por conta própria, com a
   fonte do site e o número de jogos vindo do banco.

   Se eu usasse a arte inteira, teríamos dois títulos e dois botões —
   o mesmo problema do fundo da seção de Planos, lá na Virtus.
   ═══════════════════════════════════════════════════════════════════ */

.acard-arte{
  /* Mais alto e mais largo que o card sem arte. Medido: em 250x210 as
     crianças ficavam cortadas na altura do queixo, porque o object-fit
     recorta pelo lado menor. */
  width:268px; min-height:246px;
  /* O fundo fica mais escuro que o do card sem arte: a ilustração já
     traz cor, e um gradiente forte por baixo brigaria com ela. */
  background:linear-gradient(158deg, color-mix(in srgb, var(--ac,#00B8FF) 12%, #070C1C) 0%, #060A18 74%);
}
.acard-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  /* 72% 26%: puxa o recorte para a direita, onde estão os personagens,
     e para cima, para o rosto não sair pelo corte de baixo. */
  object-position:68% 8%;
  /* Máscara dupla: dissolve à esquerda, onde o texto entra, e embaixo,
     onde fica o botão. A arte não termina em linha reta em lugar
     nenhum. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 20%, #000 62%),
    linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 20%, #000 62%),
    linear-gradient(180deg, #000 0%, #000 62%, transparent 96%);
          mask-composite: intersect;
  transform:scale(1.02);
  transition:transform .7s var(--ease);
}
.acard-arte:hover .acard-img{ transform:scale(1.09); }

.acard-veu{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(96deg, #060A18 0%, rgba(6,10,24,.9) 34%, rgba(6,10,24,.28) 62%, transparent 88%),
    linear-gradient(180deg, transparent 34%, rgba(6,10,24,.86) 100%);
}

/* O texto sobe para cima da arte. Sem isto, o z-index automático deixa
   a imagem por cima e o nome da área some. */
.acard-arte b, .acard-arte p, .acard-arte .btn{ position:relative; z-index:2; }
/* 54% de largura para o texto: o suficiente para duas palavras por
   linha, e o bastante para deixar a ilustração aparecer inteira à
   direita. Medido em 60%, o texto encostava nos personagens. */
.acard-arte p{ max-width:54%; }
.acard-arte b{ max-width:74%; text-shadow:0 2px 14px rgba(0,0,0,.9); }
/* Sombra sob o botão: ele fica sobre a parte mais clara da arte em
   algumas áreas, e sem isto o contorno some. */
.acard-arte .btn{ box-shadow:0 6px 20px -8px rgba(0,0,0,.9); }

@media (max-width:620px){
  .acard-arte{ width:242px; min-height:228px; }
  .acard-arte p{ max-width:66%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MARCA — 21/08/2026
   ───────────────────────────────────────────────────────────────────────
   Entrou o logo definitivo no lugar do par ícone-mais-texto provisório.

   O logo é uma composição EMPILHADA: emblema em cima, VIRTUS no meio,
   JOGOS embaixo. Isso decide onde ele pode e onde ele não pode aparecer.

   Cabe inteiro na barra lateral, que é vertical e larga o bastante.
   Não cabe numa faixa horizontal de 66px de altura: a palavra "VIRTUS"
   ficaria com cinco pixels de altura, ilegível. Por isso os lugares
   horizontais e densos — barras do administrativo — usam o SÍMBOLO
   quadrado ao lado do nome em texto, e não o logo reduzido.

   Um logo, um símbolo. Duas peças, nenhuma terceira.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Logo na barra lateral da loja ─────────────────────────────────────
   A regra antiga era display:flex com gap, para alinhar ícone e texto.
   Com um único filho <img>, flex passa a atrapalhar: o item flexível
   encolhe abaixo da largura natural. display:block resolve. */
.lj-marca{
  display:block;
  padding:20px 20px 14px;
  transition:opacity .3s var(--ease);
}
.lj-marca img{
  width:100%; height:auto;
  /* ═══════════════════════════════════════════════════════════════
     CORREÇÃO — 21/08/2026 — A CAIXA PRECISA DE TETO
     ───────────────────────────────────────────────────────────────
     A primeira versão limitava só a LARGURA. Funcionava enquanto o
     arquivo tivesse a proporção prevista, 480x334.

     Medido num print do site no ar: o logotipo renderizou 221x432,
     proporção 0,51. Ou seja, o arquivo na pasta não era o entregue —
     e como a altura não tinha limite nenhum, ele empurrou o menu
     inteiro para baixo da dobra.

     Regra que ficou: caixa de logotipo se trava nas DUAS dimensões.
     Com max-height mais object-fit:contain, qualquer arquivo que
     entre ali é encaixado sem deformar e sem estourar. O aspect-ratio
     reserva o espaço antes de a imagem baixar.
     ═══════════════════════════════════════════════════════════════ */
  max-height:150px;
  object-fit:contain; object-position:left center;
  aspect-ratio:480/334;
  /* O emblema já traz brilho próprio. A sombra abaixo apenas o descola
     do fundo quase preto da barra, sem competir com ele. */
  filter:drop-shadow(0 10px 26px rgba(80,40,220,.32));
}
.lj-marca:hover img{ opacity:.9; }
.lj-marca:focus-visible{ outline:2px solid var(--cyan2); outline-offset:4px; border-radius:12px; }

/* ── Símbolo quadrado, para faixas horizontais ─────────────────────────
   Usado no administrativo, onde a altura é curta e o nome vem em texto. */
.vj-simbolo{
  width:34px; height:34px; flex-shrink:0;
  border-radius:10px; display:block;
  box-shadow:0 6px 18px -6px rgba(80,40,220,.75);
}

@media (prefers-reduced-motion: reduce){
  .lj-marca{ transition:none; }
}