/* Site publico. Estrutura de marketplace: barra com busca e menu de jogos,
   topo com proposta e banner, catalogo, passos, e paginas de jogo com filtros.
   A cor de cada jogo vem do painel; aqui ficam so os tons da base. */
:root{
  --fundo:#070b14; --fundo-2:#0b1220; --cartao:#101a2e; --cartao-2:#16233c;
  --borda:#1d2c49; --borda-viva:#2a4372;
  --azul:#1e7bff; --azul-claro:#59a0ff; --azul-fundo:rgba(30,123,255,.13);
  --verde:#25d07d; --verde-fundo:rgba(37,208,125,.13);
  --vermelho:#f2556a; --vermelho-fundo:rgba(242,85,106,.14);
  --ambar:#f3b13c; --ambar-fundo:rgba(243,177,60,.14);
  /* Cores de apoio: o azul continua sendo a marca, mas cada assunto ganha a
     sua faixa. Sem isso, pagamento, entrega e conversa ficam iguais na tela e
     o cliente nao sabe onde olhar. */
  --roxo:#a78bfa; --roxo-fundo:rgba(167,139,250,.14);
  --ciano:#38d6e0; --ciano-fundo:rgba(56,214,224,.13);
  --txt:#eaf0fb; --txt-2:#9fb0cc; --txt-3:#6b7d9c;
  --raio:14px;
}
*{box-sizing:border-box}
/* Elemento com display proprio ignora o atributo hidden do HTML. Sem esta
   linha o botao de fechar o chat nao fechava nada: a janela tem display:flex
   e continuava na tela. */
[hidden]{display:none !important}
body{margin:0;background:var(--fundo);color:var(--txt);line-height:1.55;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{margin:0 0 10px;text-wrap:balance}
:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.env-largo{max-width:1280px;margin:0 auto;padding-inline:16px}
.bloco{padding-block:clamp(30px,4vw,52px)}
.sub{color:var(--txt-2)}
.vazio{color:var(--txt-3)}

/* ---------- faixa e barra ---------- */
.faixa-topo{background:var(--cartao-2);border-bottom:1px solid var(--borda);font-size:12.5px;
  color:var(--txt-2)}
.faixa-topo .env-largo{display:flex;justify-content:space-between;gap:12px;padding-block:6px}
.faixa-direita{color:var(--verde)}

.barra{position:sticky;top:var(--topo-fixo,0px);z-index:30;background:rgba(7,11,20,.95);
  border-bottom:1px solid var(--borda);backdrop-filter:blur(10px)}
/* Quebra quando nao couber: com o logo maior, a barra estourava para fora
   da tela entre 860px e 1100px e a pagina ganhava rolagem lateral. */
.barra-in{display:flex;align-items:center;gap:14px;padding-block:11px;flex-wrap:wrap}
/* O logo e a primeira coisa da pagina e nunca sai do canto esquerdo: e o
   botao de voltar para casa que todo mundo procura no mesmo lugar. Maior
   porque ele tambem e a marca -- 36px o deixava parecendo um icone. */
.marca{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;
  flex-shrink:0;margin-right:auto}
.marca img{height:clamp(44px,3.4vw,54px);width:auto;display:block}

.menu-jogos-caixa{position:relative;flex-shrink:0}
.btn-jogos{display:inline-flex;align-items:center;gap:6px;background:var(--cartao);
  border:1px solid var(--borda);color:var(--txt);
  border-radius:10px;padding:9px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.btn-jogos:hover{border-color:var(--azul)}
.btn-jogos .seta{color:var(--txt-3);margin-left:4px}
/* Icone (hamburguer) so aparece no lugar do texto em tela estreita -- ver
   media query mais abaixo. No computador sobra espaco pro texto de sempre. */
.btn-jogos .icone-menu{display:none}
.painel-jogos{position:absolute;top:calc(100% + 8px);left:0;z-index:40;background:var(--fundo-2);
  border:1px solid var(--borda-viva);border-radius:14px;padding:12px;width:min(620px,88vw);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95)}
.painel-jogos-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.jogo-menu{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;
  font-size:14px;color:var(--txt-2)}
.jogo-menu:hover{background:var(--cartao-2);color:var(--txt)}
.jogo-menu img{width:30px;height:30px;border-radius:6px;object-fit:cover;object-position:center;background:var(--fundo-2)}

.busca{flex:1;display:flex;min-width:120px;background:var(--cartao);border:1px solid var(--borda);
  border-radius:10px;overflow:hidden}
.busca input{flex:1;min-width:0;background:transparent;border:0;color:var(--txt);font:inherit;
  padding:10px 13px}
.busca input:focus{outline:none}
.busca input::placeholder{color:var(--txt-3)}
.busca button{background:var(--cartao-2);border:0;color:var(--txt-2);font:inherit;font-size:13.5px;
  padding:0 15px;cursor:pointer}
.busca button:hover{background:var(--azul);color:#fff}

.barra-acoes{display:flex;align-items:center;gap:9px;flex-shrink:0}
.carrinho-topo{background:var(--cartao);border:1px solid var(--borda);border-radius:10px;
  padding:9px 13px;font-size:14px;font-weight:600}
.carrinho-topo:hover{border-color:var(--azul)}
.contador{background:var(--azul);color:#fff;border-radius:99px;padding:1px 7px;font-size:12px;
  margin-left:5px}

.btn{display:inline-block;background:var(--azul);color:#fff;border:0;border-radius:10px;
  padding:10px 17px;font-weight:600;font-size:14.5px;cursor:pointer;font-family:inherit;
  text-align:center}
.btn:hover{background:#3a8cff}
.btn-vazio{background:transparent;border:1px solid var(--borda-viva);color:var(--txt)}
.btn-vazio:hover{background:var(--azul-fundo);border-color:var(--azul)}
.mini{background:var(--cartao-2);border:1px solid var(--borda);color:var(--txt-2);border-radius:8px;
  padding:6px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.mini:hover{border-color:var(--azul);color:var(--txt)}

/* ---------- topo da loja ---------- */
/* A arte da loja e o fundo do topo, escurecida, trocando sozinha. O texto
   fica por cima: quem chega le a mensagem primeiro e a imagem so ajuda. */
/* `isolation:isolate` fecha um contexto de empilhamento aqui, entao o
   z-index das sugestoes da busca so vale DENTRO desta secao: sem o z-index
   abaixo, a lista de sugestoes aparecia atras dos cartoes de jogo, que vem
   depois no documento. O 5 fica bem abaixo do 30 da barra do topo, que
   continua passando por cima de tudo ao rolar. */
.topo-loja{position:relative;isolation:isolate;z-index:5;
  border-bottom:1px solid var(--borda);
  background:radial-gradient(760px 340px at 18% 10%,rgba(30,123,255,.20),transparent 62%),
    linear-gradient(180deg,rgba(8,17,32,.55),rgba(7,11,20,.30))}
.topo-fundo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.lamina{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.lamina.visivel{opacity:1}
/* Aproximar a arte: `--zoom` cresce a imagem a partir de `--foco`, que e o
   mesmo ponto do enquadramento. Sem isto, arte na medida exata da moldura
   cobre tudo sem sobrar nada, e mover o enquadramento nao muda um pixel --
   o dono mexia nos controles e concluia, com razao, que estavam quebrados.
   Crescer e o unico jeito de criar a sobra que o enquadramento escolhe. */
.lamina img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(var(--zoom,1));transform-origin:var(--foco,50% 50%)}
/* Capa de jogo e larga e baixa. Num topo alto, "preencher" amplia a arte ate
   cobrir tudo -- e ai ela estoura. "Inteira" mostra a arte toda e preenche o
   resto com a cor de fundo. Quem escolhe e o dono, olhando a arte dele. */
.banner-inteiro .lamina img{object-fit:contain;background:#070b14}
/* O verniz garante contraste do texto em qualquer arte que o dono subir. */
/* Quanto a arte e escurecida vem do painel (`home.escuro_banner`, 0 a 100):
   arte clara precisa de mais sombra para o texto continuar legivel, arte
   escura precisa de menos para nao virar um borrao preto. */
.topo-verniz{position:absolute;inset:0;--escuro:var(--escuro-banner,.72);
  background:linear-gradient(90deg,
      rgb(6 10 18 / calc(var(--escuro) * 1.3)) 0%,
      rgb(6 10 18 / calc(var(--escuro) * 1.1)) 46%,
      rgb(6 10 18 / calc(var(--escuro) * 0.58)) 100%),
    linear-gradient(180deg,
      rgb(6 10 18 / calc(var(--escuro) * 0.76)),
      rgb(6 10 18 / calc(var(--escuro) * 0.42)) 40%,
      rgb(7 11 20 / calc(var(--escuro) * 1.28)))}
.topo-grade{display:grid;grid-template-columns:1.35fr .65fr;gap:30px;align-items:end;
  padding-block:var(--altura-topo,clamp(40px,6vw,86px))}
.topo-baixo{--altura-topo:clamp(24px,3.2vw,44px)}
.topo-medio{--altura-topo:clamp(40px,6vw,86px)}
.topo-alto{--altura-topo:clamp(60px,9vw,130px)}
.topo-texto{max-width:640px}
.rotulo{color:var(--azul-claro);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;margin:0 0 8px}
.topo-texto h1{font-size:clamp(28px,4.4vw,46px);line-height:1.08;
  text-shadow:0 2px 20px rgba(0,0,0,.6)}
.topo-texto .sub{max-width:52ch;margin:0 0 20px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.busca-grande{display:flex;gap:8px;max-width:520px}
.busca-grande input{flex:1;background:rgba(15,21,34,.92);border:1px solid var(--borda-viva);
  border-radius:11px;color:var(--txt);font:inherit;padding:13px 15px}
.busca-grande input:focus{outline:none;border-color:var(--azul)}
.provas{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0}
.provas li{background:rgba(15,21,34,.82);border:1px solid var(--borda-viva);border-radius:11px;
  padding:9px 14px;font-size:13px;backdrop-filter:blur(3px)}
.provas b{display:block;font-size:13.5px}
.provas span{color:var(--txt-2);font-size:12.5px}
/* Chamada da arte: leva para o que o banner esta anunciando. */
/* O botao da arte fica na mesma linha de base dos selos, na direita: e a
   altura em que o olho ja esta quando termina de ler a chamada. Os pontinhos
   saem do fluxo para nao empurrarem o botao para cima. */
.topo-acao{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.topo-acao .pontos{position:absolute;top:calc(100% + 12px);right:0;margin:0}
.btn-arte{font-size:15px;padding:13px 22px;box-shadow:0 18px 40px -22px rgba(0,0,0,.95)}

/* ---------- banners ---------- */
.faixa-rodizio{padding-block:0 clamp(10px,2vw,20px);background:var(--fundo)}
.rodizio{position:relative}
.banner{display:none;position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--borda);background:var(--cartao);
  aspect-ratio:1280/420;min-height:230px}
.banner.visivel{display:block}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center}
.banner-texto{position:absolute;inset:auto 0 0 0;padding:clamp(20px,3vw,38px);
  background:linear-gradient(180deg,transparent,rgba(7,11,20,.55) 45%,rgba(7,11,20,.95))}
.banner:not(:has(img)){background:
  radial-gradient(700px 320px at 20% 20%,rgba(30,123,255,.35),transparent 60%),var(--cartao-2)}
.banner:not(:has(img)) .banner-texto{position:absolute;background:none}
.banner-texto h2{font-size:clamp(22px,3.2vw,38px);margin:0 0 8px;max-width:22ch;
  text-shadow:0 2px 16px rgba(0,0,0,.65)}
.banner-texto p{color:var(--txt-2);margin:0 0 16px;max-width:56ch;font-size:clamp(13.5px,1.4vw,16px);
  text-shadow:0 2px 12px rgba(0,0,0,.7)}
.pontos{display:flex;gap:7px;justify-content:center;margin-top:14px}
.ponto-rodizio{width:9px;height:9px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:var(--borda)}
.ponto-rodizio.ativo{background:var(--azul);width:24px}

/* ---------- blocos e catalogo ---------- */
.cabeca-bloco{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-bottom:18px}
.cabeca-bloco h2{font-size:clamp(21px,2.6vw,27px);margin:0}
.cabeca-bloco p{color:var(--txt-3);margin:0;font-size:13.5px}
.cabeca-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.grade-jogos{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
/* Cartao do jogo: a arte e o fundo e o nome fica por cima, no canto de baixo.
   O verniz escuro existe para o nome ficar legivel em arte clara. */
.cartao-jogo{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--raio);
  overflow:hidden;border:1px solid var(--borda);
  background:var(--fundo-cartao, var(--cartao));padding:0;transition:.18s}
.cartao-jogo:hover{border-color:var(--cor,var(--azul));transform:translateY(-3px)}
.fundo-jogo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;transition:transform .35s;
  transform:scale(calc(var(--zoom-arte,1) * var(--zoom,1)));
  transform-origin:var(--foco,50% 50%)}
/* "Inteira": a capa do jogo aparece sem corte, com sobra nas laterais.
   No modo automatico cada quadro segue o que ja funcionava: capa de jogo
   preenche, arte de produto aparece inteira. */
.arte-inteira .fundo-jogo{object-fit:contain;background:var(--fundo-cartao, var(--cartao))}
.cartao-jogo:hover .fundo-jogo{
  transform:scale(calc(var(--zoom-arte,1) * var(--zoom,1) * 1.05))}
.cartao-jogo:not(:has(.fundo-jogo)){background:
  linear-gradient(160deg,var(--cor,var(--azul)) -40%,var(--cartao) 58%)}
.selo-breve{position:absolute;top:10px;right:10px;background:rgba(7,11,20,.78);
  border:1px solid var(--borda-viva);color:var(--txt-2);border-radius:99px;
  padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.06em}
.verniz{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,11,20,.12) 38%,rgba(7,11,20,.55) 68%,rgba(7,11,20,.93))}
.nome-jogo{position:absolute;left:16px;right:16px;bottom:13px}
.nome-jogo strong{display:block;font-size:18px;line-height:1.2;
  text-shadow:0 2px 12px rgba(0,0,0,.75)}
.nome-jogo span{display:block;font-size:12.5px;color:var(--txt-2);margin-top:3px;
  text-shadow:0 2px 10px rgba(0,0,0,.8)}
.cartao-jogo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--cor,var(--azul));opacity:0;transition:.18s}
.cartao-jogo:hover::after{opacity:1}

.grade-produtos{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}

/* Cartao de produto: a arte manda, grande e centralizada, como numa prateleira.
   O nome vem embaixo e a quantidade ja aparece com o preco pronto, para o
   cliente clicar e cair na pagina do produto sem digitar nada. */
.cartao-produto{display:flex;flex-direction:column;overflow:hidden;background:var(--cartao);
  border:1px solid var(--borda);border-radius:16px;transition:.15s}
.cartao-produto:hover{transform:translateY(-3px);border-color:var(--cor,var(--azul));
  box-shadow:0 14px 32px rgba(0,0,0,.35)}

/* O fundo do quadro e o encaixe da arte vem do painel: cada loja recebe a
   arte do jeito do fornecedor -- umas recortadas, outras com fundo proprio --
   e so o dono sabe qual das duas fica melhor na dele. */
.arte-produto{display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;padding:18px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--cor,#1e7bff) 42%, transparent) 0%,
                    transparent 70%),
    var(--fundo-cartao, var(--fundo-2));
  border-bottom:1px solid var(--borda);overflow:hidden}
.arte-produto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transform:scale(var(--zoom-arte,1));
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));transition:transform .25s}
/* "Preenchendo": a arte cobre o quadro inteiro, cortando o que sobra. */
.arte-preenchendo .arte-produto{padding:0}
.arte-preenchendo .arte-produto img{width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;filter:none}
.cartao-produto:hover .arte-produto img{transform:scale(calc(var(--zoom-arte,1) * 1.06))}
.arte-produto .sem-arte{font-size:44px;font-weight:800;color:var(--cor,var(--azul));opacity:.65}

.corpo-produto{display:flex;flex-direction:column;gap:8px;padding:14px 15px 15px;flex:1}
.jogo-nome{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);
  font-weight:700}
/* O nome e o que a pessoa procura: e a maior letra do cartao depois do preco.
   Duas linhas fixas deixam todos os cartoes da fileira na mesma altura. */
.cartao-produto h3{font-size:18px;font-weight:800;margin:4px 0 0;line-height:1.25;
  min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.cartao-produto a:hover h3{color:var(--azul-claro)}
.desde{margin:0;font-size:12.5px;color:var(--txt-3)}
.desde b{color:var(--txt-2);font-variant-numeric:tabular-nums}
.preco-cheio{margin:2px 0 0;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.preco-cheio s{font-size:14px;font-weight:500;color:var(--txt-3);margin-right:6px}

/* Cada degrau de quantidade e um degrau de desconto: mostrar os dois juntos
   e o que faz o cliente subir de faixa sozinho. */
.atalhos-qtd{display:flex;flex-direction:column;gap:6px}
.atalhos-qtd a{display:flex;align-items:center;gap:8px;background:var(--fundo-2);
  border:1px solid var(--borda);border-radius:10px;padding:7px 10px;font-size:13.5px;
  transition:.12s}
.atalhos-qtd a:hover{border-color:var(--cor,var(--azul));background:var(--cartao-2)}
.atalhos-qtd .qtd{flex:1;color:var(--txt-2);font-variant-numeric:tabular-nums}
.atalhos-qtd .valor{font-weight:700;font-variant-numeric:tabular-nums}
.atalhos-qtd .off{background:var(--verde-fundo);color:var(--verde);font-size:11px;
  font-weight:700;border-radius:99px;padding:1px 7px}
.prazo{color:var(--txt-3);font-size:12.5px;margin:0}
.ver-produto{display:block;text-align:center;margin-top:auto;padding:10px 14px;
  border-radius:10px;background:var(--azul);color:#fff;font-size:14px;font-weight:700;
  transition:.15s}
.cartao-produto:hover .ver-produto{background:#3a8cff}

@media (max-width:560px){
  .grade-produtos{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .arte-produto{padding:14px}
  .cartao-produto h3{font-size:16px}
}

/* ---------- como funciona ---------- */
.faixa-passos{background:var(--fundo-2);border-block:1px solid var(--borda);
  padding-block:clamp(30px,4vw,52px)}
.passos-loja{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:passo}
.passos-loja li{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio);
  padding:18px}
.passos-loja .numero{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:var(--azul-fundo);color:var(--azul-claro);font-weight:800;margin-bottom:10px}
.passos-loja h3{font-size:16px;margin:0 0 6px}
.passos-loja p{color:var(--txt-2);font-size:13.5px;margin:0}

.garantias-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.garantias-grade article{background:var(--cartao);border:1px solid var(--borda);
  border-radius:var(--raio);padding:20px;border-left:3px solid var(--verde)}
.garantias-grade h3{font-size:16px}
.garantias-grade p{color:var(--txt-2);font-size:13.5px;margin:0}

/* ---------- pagina do jogo ---------- */
.capa-jogo{position:relative;border-bottom:1px solid var(--borda);overflow:hidden;
  background:linear-gradient(180deg,#0a1425,var(--fundo))}
.capa-fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;
  transform:scale(var(--zoom,1));transform-origin:var(--foco,50% 50%)}
/* Como a arte se encaixa na tira. **Ampliar e o que estoura**: uma arte de
   600px numa faixa de 1585px cresce duas vezes e meia, e nenhum
   enquadramento salva isso. Por isso o padrao (`sem_esticar`) reduz quando
   precisa e nunca amplia -- se sobrar espaco, aparece o fundo do jogo, que e
   melhor do que a imagem borrada. */
.faixa-sem_esticar .capa-fundo{object-fit:scale-down}
.faixa-cobrir .capa-fundo{object-fit:cover}
/* Sem arte na faixa -- por escolha ou porque o jogo ainda nao tem imagem --
   a cor do jogo vira o fundo, com o logo por cima. E um lugar proposital,
   nao um buraco esperando imagem. */
.capa-jogo.sem-arte{background:
  radial-gradient(900px 260px at 12% 0%,color-mix(in srgb,var(--cor) 26%,transparent),transparent 70%),
  linear-gradient(180deg,#0a1425,var(--fundo))}
/* Tudo no meio: logo, nome, frase e selos. Encostado a esquerda, o topo da
   pagina do jogo ficava com um vazio enorme do lado direito -- e a faixa
   sem arte, que e o normal aqui, so aumentava esse vazio. */
.capa-conteudo{position:relative;display:flex;align-items:center;
  justify-content:center;gap:clamp(16px,2.2vw,28px);
  padding-block:clamp(24px,3.4vw,40px);text-align:center}
/* O logo acompanha a altura do bloco de texto ao lado: o topo dele na linha
   do nome do jogo, o pe na linha dos selos. Logo pequeno ao lado de titulo
   grande parecia sobra, nao peca.

   `--escala-logo` vem do painel, jogo a jogo: logo quadrado e logo que e uma
   palavra deitada nunca ficam bem no mesmo tamanho. */
.logo-cabeca{height:calc(clamp(92px,9.5vw,132px) * var(--escala-logo,1));
  width:auto;max-width:min(38vw,320px);object-fit:contain;flex-shrink:0;
  transition:height .12s ease}
.capa-conteudo h1{font-size:clamp(24px,3.4vw,36px);margin:0 0 4px}
.capa-provas{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;justify-content:center}
.capa-provas span{background:var(--cartao);border:1px solid var(--borda);border-radius:99px;
  padding:5px 12px;font-size:12.5px;color:var(--txt-2)}

.com-lateral{display:grid;grid-template-columns:250px 1fr;gap:20px;align-items:start}
/* A lista sozinha, agora que os filtros moraram para a lateral da pagina. */
.so-ofertas{display:block}
.lateral-filtros{display:grid;gap:12px;position:sticky;
  top:calc(76px + var(--topo-fixo,0px))}
.caixa-filtro{background:var(--cartao);border:1px solid var(--borda);border-radius:12px;padding:14px}
.caixa-filtro h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);
  margin:0 0 8px}
.marcar{display:flex;align-items:center;gap:9px;color:var(--txt-2);font-size:14px;
  padding:4px 0;cursor:pointer}
.marcar input{accent-color:var(--azul);width:16px;height:16px}
.ajuda-lateral p{color:var(--txt-3);font-size:13px;margin:0 0 10px}
.ajuda-lateral .btn{display:block;width:100%}

.cabeca-lista{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}
.cabeca-lista h2{margin:0;font-size:20px}
/* Afastado do titulo: colado, "9 itens" lia como parte do nome ("Produtos de
   Diablo 49 itens"). */
.contagem{color:var(--txt-3);font-size:13px;margin-right:auto;padding-left:6px}
/* Pesquisa de dentro do jogo. Cresce ate um limite e quebra de linha antes de
   apertar o titulo. */
.busca-jogo{flex:1 1 220px;max-width:340px;min-width:0;margin:0}
/* O site nao tem estilo geral para campos: sem `border` e `appearance`, o
   navegador desenhava a borda cinza dele (2px inset). Aqui o campo usa a
   mesma borda e o mesmo foco dos outros campos da loja. */
.busca-jogo input{width:100%;font:inherit;font-size:13px;color:var(--txt);
  padding:8px 12px 8px 34px;border-radius:10px;border:1px solid var(--borda);
  -webkit-appearance:none;appearance:none;outline:none;
  background-color:var(--cartao-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:11px 50%}
.busca-jogo input:focus{border-color:var(--azul)}
.busca-jogo input::placeholder{color:var(--txt-3)}
.vazio .limpar-pesquisa{color:var(--azul-claro)}
.oferta-marcas{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.oferta-marcas span{font-size:11.5px;font-weight:700;border-radius:99px;padding:3px 9px}
.marca-azul{background:var(--azul-fundo);color:var(--azul-claro)}
.marca-verde{background:var(--verde-fundo);color:var(--verde)}
.marca-vermelha{background:rgba(242,85,106,.13);color:var(--vermelho)}
.oferta-preco{text-align:right}
.oferta-preco b{display:block;font-size:19px;font-variant-numeric:tabular-nums}
.oferta-preco .ver-produto{display:block;margin-top:4px}
.nada-filtro{color:var(--txt-3);font-size:14px}

.conteudo-jogo{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.prosa{color:var(--txt-2);max-width:70ch}
.video{position:relative;padding-top:56.25%;border-radius:var(--raio);overflow:hidden;
  border:1px solid var(--borda)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.faq details{background:var(--cartao);border:1px solid var(--borda);border-radius:11px;
  padding:13px 15px;margin-bottom:8px}
.faq summary{cursor:pointer;font-weight:600}

.vazio-busca{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio);
  padding:34px;text-align:center}
.vazio-busca p{color:var(--txt-2)}

/* ---------- pagina do produto ---------- */
.produto-pagina .voltar-link{color:var(--txt-3);font-size:13.5px}
.produto-pagina .voltar-link:hover{color:var(--azul-claro)}
.produto-grade{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;margin-top:16px;
  align-items:start}
.produto-arte{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio);
  padding:20px;display:grid;place-items:center;min-height:260px}
.produto-arte img{max-height:320px;object-fit:contain}
.arte-vazia{font-size:64px;font-weight:800;color:var(--cor,var(--azul));opacity:.55}
.produto-compra{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--raio);
  padding:24px;border-top:3px solid var(--cor,var(--azul))}
.produto-compra h1{font-size:clamp(23px,3.2vw,32px);margin-bottom:8px}
.campo-variacao{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-3);font-weight:700;margin:18px 0 0}
.campo-variacao select{display:block;width:100%;margin-top:6px;background:var(--fundo-2);
  color:var(--txt);border:1px solid var(--borda);border-radius:10px;padding:11px 12px;
  font:inherit;font-size:15px}
.seletor{display:flex;margin:18px 0 10px;max-width:260px;border:1px solid var(--borda);
  border-radius:12px;overflow:hidden;background:var(--fundo-2)}
.seletor input{flex:1;min-width:0;background:transparent;border:0;color:var(--txt);
  text-align:center;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:12px 4px;font-family:inherit}
.seletor input:focus{outline:none}
.passo-btn{background:var(--cartao-2);color:var(--txt);border:0;width:46px;font-size:20px;
  cursor:pointer;line-height:1}
.passo-btn:hover{background:var(--azul);color:#fff}
.unitario{margin:0;color:var(--azul-claro);font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums}
.riscado{color:var(--txt-3);text-decoration:line-through;font-weight:400;margin-left:6px}
.aviso-minimo{color:var(--txt-3);font-size:12.5px;margin:4px 0 0}
.total-linha{display:flex;align-items:baseline;gap:10px;margin:18px 0 6px;padding-top:16px;
  border-top:1px solid var(--borda)}
.total-linha span{color:var(--txt-2);font-size:14px}
.total-linha b{font-size:30px;margin-left:auto;font-variant-numeric:tabular-nums}
.total-linha .riscado{margin-left:0;font-size:15px}
.empurra{background:var(--verde-fundo);color:var(--verde);border-radius:10px;padding:9px 12px;
  font-size:13.5px;margin:10px 0 0}
.tabela-faixas{margin-top:16px;border:1px solid var(--borda);border-radius:12px;overflow:hidden}
.titulo-faixas{margin:0;padding:10px 14px;background:var(--cartao-2);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);font-weight:700}
.tabela-faixas table{width:100%;border-collapse:collapse;font-size:13.5px;
  font-variant-numeric:tabular-nums}
.tabela-faixas th{text-align:left;padding:8px 14px;color:var(--txt-3);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--borda)}
.tabela-faixas td{padding:8px 14px;color:var(--txt-2);border-bottom:1px solid var(--borda)}
.tabela-faixas tr:last-child td{border-bottom:0}
.tabela-faixas tr.faixa-ativa td{background:var(--azul-fundo);color:var(--txt);font-weight:700}
.btn-comprar{display:block;width:100%;margin-top:18px;padding:13px;font-size:16px}
.carrinho-aviso{background:rgba(243,177,60,.12);color:var(--ambar);border-radius:10px;
  padding:9px 12px;font-size:13px;margin:10px 0 0}
.garantias{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--borda);
  color:var(--txt-2);font-size:13.5px;display:grid;gap:7px}
.garantias li{padding-left:18px;position:relative}
.garantias li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:99px;background:var(--verde)}

/* ---------- rodape ---------- */
.rodape{border-top:1px solid var(--borda);background:rgba(11,18,32,.80);margin-top:20px}
.rodape-grade{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px;
  padding-block:32px}
.rodape-marca img{height:44px;width:auto;margin-bottom:10px}
.rodape-marca p{color:var(--txt-3);font-size:13.5px;max-width:42ch;margin:0 0 12px}
.pagamentos{display:flex;flex-wrap:wrap;gap:7px}
.selo-pgto{border:1px solid var(--borda);border-radius:7px;padding:4px 10px;font-size:11.5px;
  font-weight:700;color:var(--txt-2)}
.rodape-coluna h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);
  margin:0 0 10px}
.rodape-coluna a{display:block;color:var(--txt-2);font-size:13.5px;padding:3px 0}
.rodape-coluna a:hover{color:var(--txt)}
.rodape-fim{border-top:1px solid var(--borda);padding-block:16px}
.rodape-fim p{color:var(--txt-3);font-size:12px;margin:0;max-width:90ch}

/* ---------- telas menores ---------- */
@media (max-width:1040px){
  .topo-grade{grid-template-columns:1fr}
  .topo-acao{align-items:flex-start}
  .topo-verniz{background:linear-gradient(180deg,
    rgb(6 10 18 / calc(var(--escuro) * 1.22)),
    rgb(7 11 20 / calc(var(--escuro) * 1.3)))}
  .passos-loja{grid-template-columns:repeat(2,1fr)}
  .garantias-grade{grid-template-columns:1fr}
  .com-lateral{grid-template-columns:1fr}
  .lateral-filtros{position:static;grid-template-columns:repeat(2,1fr);display:grid}
  .conteudo-jogo{grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .produto-grade{grid-template-columns:1fr}
  .painel-jogos-grade{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .barra-in{flex-wrap:wrap}
  .busca{order:3;width:100%;flex:1 0 100%}
  /* `flex-wrap` e o que garante que Entrar/Carrinho/Venda seus itens nunca
     vazem pra fora da tela -- antes essa fileira era rigida (flex-shrink:0
     em tudo) e ficava cortada em celular estreito. Os botoes tambem encolhem
     (proxima linha) pra caber numa fileira so na maioria dos aparelhos. */
  .barra-acoes{margin-left:auto;flex-wrap:wrap;justify-content:flex-end;width:100%}
  .barra-acoes .btn,.barra-acoes .carrinho-topo{padding:7px 11px;font-size:13px}
  .texto-carrinho{display:none}
  .texto-btn-jogos,.btn-jogos .seta{display:none}
  .btn-jogos .icone-menu{display:inline-flex}
  .btn-jogos{padding:9px 11px}
  /* O botao fica perto da borda direita (o logo empurra o resto pra la com
     margin-right:auto). "left:0" abria o painel pra fora da tela; "right:0"
     abre pra dentro. */
  .painel-jogos{left:auto;right:0;width:92vw}
  .passos-loja{grid-template-columns:1fr}
  .lateral-filtros{grid-template-columns:1fr}
  /* No celular o logo vai para cima do nome: lado a lado, sobra menos de
     metade da largura para o titulo e ele quebra em tres linhas. */
  .capa-conteudo{flex-direction:column;gap:12px}
  .logo-cabeca{height:calc(clamp(64px,18vw,86px) * var(--escala-logo,1));
    max-width:70vw}
  .rodape-grade{grid-template-columns:1fr}
}

/* ---------- acesso ao painel, fixo no rodape ---------- */
.rodape-fim{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap}
.link-painel{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--borda);
  border-radius:99px;padding:6px 14px;font-size:12.5px;color:var(--txt-3);white-space:nowrap}
.link-painel:hover{border-color:var(--azul);color:var(--txt)}
.link-painel .cadeado{font-size:11px;filter:grayscale(1)}

/* ---------- conta do cliente ---------- */
.caixa-conta{background:var(--cartao);border:1px solid var(--borda);border-radius:16px;
  padding:26px;max-width:440px;margin:0 auto;border-top:3px solid var(--azul)}
.caixa-conta.larga{max-width:none;margin:0}
/* A faixa de cima diz do que a caixa trata, antes de a pessoa ler o titulo. */
.caixa-conta.assunto-pagamento{border-top-color:var(--ambar)}
.caixa-conta.assunto-entrega{border-top-color:var(--verde)}
.caixa-conta.assunto-conversa{border-top-color:var(--roxo)}
.caixa-conta.assunto-avaliacao{border-top-color:var(--ambar)}
.caixa-conta.assunto-problema{border-top-color:var(--vermelho)}
.caixa-conta.assunto-dados{border-top-color:var(--ciano)}
.caixa-conta h1{font-size:26px;margin:0 0 6px}
.caixa-conta h2{font-size:18px;margin:0 0 12px}
.caixa-conta .sub{font-size:14px;margin:0 0 18px}
.caixa-conta label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-3);font-weight:700;margin:12px 0 5px}
/* A regra cobria so `input`, e textarea e select ficavam com a aparencia
   crua do navegador -- fundo branco, fonte de maquina de escrever e do
   tamanho que o navegador quisesse, no meio de um formulario escuro. */
.caixa-conta input,
.caixa-conta textarea,
.caixa-conta select{width:100%;background:var(--fundo-2);border:1px solid var(--borda);
  border-radius:10px;color:var(--txt);font:inherit;padding:11px 13px}
.caixa-conta textarea{display:block;resize:vertical;min-height:110px;line-height:1.5}
.caixa-conta input:focus,
.caixa-conta textarea:focus,
.caixa-conta select:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px var(--azul-fundo)}
.caixa-conta input:disabled,
.caixa-conta textarea:disabled{color:var(--txt-3);cursor:not-allowed}
.caixa-conta input::placeholder,
.caixa-conta textarea::placeholder{color:var(--txt-3)}
.caixa-conta .btn{width:100%;margin-top:18px}
.caixa-conta .btn-vazio{margin-top:12px}
.ajuda-conta{display:block;font-size:12px;color:var(--txt-3);margin-top:5px}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.conta-rodape{display:flex;justify-content:space-between;gap:12px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--borda);font-size:13.5px;color:var(--txt-3)}
.conta-rodape a:hover{color:var(--azul-claro)}
.conta-grade{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.aviso{border-radius:10px;padding:10px 13px;font-size:13.5px;margin:0 0 14px}
.aviso.erro{background:rgba(242,85,106,.12);color:var(--vermelho)}
.aviso.ok{background:var(--verde-fundo);color:var(--verde)}

@media (max-width:820px){
  .conta-grade{grid-template-columns:1fr}
  .dupla{grid-template-columns:1fr}
}

/* ---------- carrinho ---------- */
.carrinho-grade{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.carrinho-itens{display:grid;gap:12px}
.item-carrinho{display:grid;grid-template-columns:86px 1fr auto;gap:16px;align-items:center;
  background:var(--cartao);border:1px solid var(--borda);border-radius:14px;padding:14px}
.item-carrinho.com-problema{border-color:var(--vermelho)}
.item-arte{width:86px;height:86px;border-radius:10px;overflow:hidden;background:var(--fundo-2);
  display:grid;place-items:center}
.item-arte img{width:100%;height:100%;object-fit:contain;padding:6px}
.item-info h3{font-size:17px;margin:0 0 4px}
.item-detalhe{color:var(--txt-3);font-size:12.5px;margin:0 0 3px}
.item-info .marca-verde,.item-info .marca-azul{display:inline-block;font-size:11.5px;
  font-weight:700;border-radius:99px;padding:3px 9px;margin-top:5px}
.item-alerta{color:var(--vermelho);font-size:12.5px;margin:7px 0 0}
.item-acoes{display:grid;gap:8px;justify-items:end;text-align:right}
.item-qtd{display:flex;gap:6px}
.item-qtd input{width:96px;background:var(--fundo-2);border:1px solid var(--borda);
  border-radius:9px;color:var(--txt);font:inherit;padding:7px 9px;text-align:center;
  font-variant-numeric:tabular-nums}
.item-preco{margin:0;font-variant-numeric:tabular-nums}
.item-preco b{display:block;font-size:19px}
.item-preco span{color:var(--txt-3);font-size:12px}

.resumo-pedido{background:var(--cartao);border:1px solid var(--borda-viva);border-radius:16px;
  padding:20px;position:sticky;top:calc(76px + var(--topo-fixo,0px))}
.resumo-pedido h2{font-size:18px;margin:0 0 14px}
.resumo-linha{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:14px;color:var(--txt-2);padding:6px 0}
.resumo-linha b{color:var(--txt);font-variant-numeric:tabular-nums}
.resumo-linha.economia b{color:var(--verde)}
.resumo-linha.total{border-top:1px solid var(--borda);margin-top:8px;padding-top:12px}
.resumo-linha.total b{font-size:25px;color:var(--azul-claro)}
.resumo-pedido .btn{width:100%;margin-top:14px}
.resumo-pedido .btn[disabled]{opacity:.5;cursor:not-allowed}
.voltar-loja{display:block;text-align:center;margin-top:10px;background:none;border:0;
  color:var(--txt-3)}
.voltar-loja:hover{color:var(--azul-claro)}
.vazio-carrinho{text-align:center;max-width:520px;margin:0 auto}
.vazio-carrinho .btn{max-width:260px;margin:0 auto}

@media (max-width:920px){
  .carrinho-grade{grid-template-columns:1fr}
  .resumo-pedido{position:static}
}
@media (max-width:620px){
  .item-carrinho{grid-template-columns:64px 1fr}
  .item-arte{width:64px;height:64px}
  .item-acoes{grid-column:1 / -1;justify-items:stretch;text-align:left}
  .item-qtd input{flex:1;width:auto}
}

/* ---------- cupom no carrinho ---------- */
.cupom-forma{display:flex;gap:7px;margin:12px 0 4px}
.cupom-forma input{flex:1;min-width:0;background:var(--fundo-2);border:1px solid var(--borda);
  border-radius:9px;color:var(--txt);font:inherit;padding:8px 11px;text-transform:uppercase}
.cupom-forma input:focus{outline:none;border-color:var(--azul)}
.cupom-aviso{color:var(--ambar);font-size:12.5px;margin:6px 0 0}
.cupom-ativo{display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin:6px 0 2px;color:var(--txt-3);font-size:12px}

/* ---------- pedidos (lado do cliente) ---------- */
.selo-status{display:inline-block;font-size:12px;font-weight:700;border-radius:99px;
  padding:5px 12px;white-space:nowrap;background:var(--cartao-2);color:var(--txt-2)}
.selo-status.aguardando_pagamento{background:var(--ambar-fundo);color:var(--ambar)}
.selo-status.pago{background:var(--ciano-fundo);color:var(--ciano)}
.selo-status.em_entrega{background:var(--roxo-fundo);color:var(--roxo)}
.selo-status.entregue{background:var(--verde-fundo);color:var(--verde)}
.selo-status.cancelado,.selo-status.reembolsado,.selo-status.expirado{
  background:rgba(242,85,106,.13);color:var(--vermelho)}

.linha-conferencia{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--borda);font-size:14px;color:var(--txt-2)}
.linha-conferencia:last-child{border-bottom:0}
.linha-conferencia b{color:var(--txt);font-variant-numeric:tabular-nums}
.detalhe-item{display:block;color:var(--txt-3);font-size:12px}
.aviso-conta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px}
.aviso-conta span{color:var(--txt-3);font-size:13.5px;flex:1}
.destaque-pagamento{border-top-color:var(--ambar)}

.lista-pedidos{display:grid;gap:8px}
.pedido-linha{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  background:var(--cartao);border:1px solid var(--borda);border-radius:12px;padding:13px 16px}
.pedido-linha:hover{border-color:var(--azul)}
.pedido-linha b{font-variant-numeric:tabular-nums}
.pedido-total{font-size:17px}

.linha-tempo{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.linha-tempo li{display:flex;gap:12px;align-items:flex-start}
.ponto-tempo{width:10px;height:10px;border-radius:99px;background:var(--azul);flex-shrink:0;
  margin-top:5px;box-shadow:0 0 0 4px var(--azul-fundo)}
.linha-tempo b{display:block;font-size:14.5px}
.linha-tempo .detalhe{display:block;color:var(--txt-3);font-size:12.5px}
.dados-pedido{margin-top:14px;padding-top:14px;border-top:1px solid var(--borda);
  display:grid;gap:7px;font-size:13.5px}
.dados-pedido p{margin:0;color:var(--txt-2)}
.dados-pedido span{display:block;color:var(--txt-3);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700}

@media (max-width:620px){
  .pedido-linha{grid-template-columns:1fr auto}
  .pedido-total{grid-column:2}
}

/* ---------- loja em manutencao ---------- */
.tela-manutencao{min-height:100vh;display:grid;place-items:center;padding:24px 16px;
  background:radial-gradient(820px 420px at 50% 0%,rgba(30,123,255,.20),transparent 62%),
    var(--fundo)}
.caixa-manutencao{background:var(--cartao);border:1px solid var(--borda-viva);border-radius:20px;
  padding:clamp(26px,5vw,44px);max-width:560px;text-align:center;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95)}
.marca-manutencao{height:70px;width:auto;margin:0 auto 18px;display:block}
.marca-texto{font-size:24px;margin:0 0 16px}
.pulso{display:inline-flex;align-items:center;gap:8px;background:var(--ambar-fundo,rgba(243,177,60,.13));
  color:var(--ambar);border-radius:99px;padding:6px 14px;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.pulso i{width:8px;height:8px;border-radius:99px;background:var(--ambar);
  animation:bate 1.6s ease-in-out infinite}
@keyframes bate{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.caixa-manutencao h1{font-size:clamp(24px,4vw,34px);margin:16px 0 10px}
.caixa-manutencao p{color:var(--txt-2);margin:0 auto;max-width:44ch;font-size:15px}
.botoes-manutencao{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.btn-whats{background:#25d366;color:#04210f;display:inline-flex;align-items:center;gap:9px}
.btn-whats svg{width:21px;height:21px;flex:0 0 auto}
.btn-whats:hover{background:#3ae07a}
.rodape-manutencao{margin-top:22px !important;font-size:12.5px;color:var(--txt-3)}
.link-painel.canto{position:fixed;right:14px;bottom:14px}
@media (prefers-reduced-motion:reduce){.pulso i{animation:none}}

/* ---------- entrega automatica na pagina do pedido ---------- */
.entrega-pronta{border-top-color:var(--verde)}
.codigo-entregue{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--fundo-2);border:1px solid var(--borda);border-radius:12px;
  padding:12px 14px;margin-bottom:10px}
.codigo-entregue:last-child{margin-bottom:0}
.codigo-entregue .detalhe{flex:1 1 140px;min-width:140px}
.codigo-entregue code{flex:2 1 220px;font-size:15px;letter-spacing:.04em;color:var(--verde);
  word-break:break-all;font-family:"Consolas",ui-monospace,monospace}
.codigo-entregue .copiar{flex:0 0 auto;background:var(--cartao-2);border:1px solid var(--borda-viva);
  border-radius:9px;color:var(--txt);font:inherit;font-size:13px;padding:7px 14px;cursor:pointer}
.codigo-entregue .copiar:hover{border-color:var(--azul)}

/* ---------- Pix na pagina do pedido ---------- */
.destaque-pagamento{border-top-color:var(--verde)}
.pix-area{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.pix-qr{width:200px;height:200px;background:#fff;border-radius:12px;padding:6px;flex:0 0 auto}
.pix-codigo{flex:1 1 260px;min-width:240px;display:flex;flex-direction:column;gap:10px}
.pix-codigo .rotulo{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-3);font-weight:700}
.pix-codigo code{display:block;background:var(--fundo-2);border:1px solid var(--borda);
  border-radius:10px;padding:12px 13px;font-size:12px;line-height:1.5;word-break:break-all;
  max-height:120px;overflow:auto;font-family:"Consolas",ui-monospace,monospace;color:var(--txt-2)}
.pix-codigo .mini{align-self:flex-start;background:none;border:0;color:var(--txt-3);
  font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:0}
.pix-codigo .mini:hover{color:var(--txt)}
@media (max-width:560px){.pix-qr{width:170px;height:170px;margin:0 auto}}

/* ---------- conversa do pedido (lado do cliente) ---------- */
/* Chat de verdade: altura que cabe conversa, balao grande e lado marcado pela
   cor. Antes o texto do cliente sumia num balao minusculo no canto. */
.conversa{display:flex;flex-direction:column;gap:12px;min-height:200px;max-height:460px;
  overflow:auto;padding:14px;margin-bottom:14px;background:var(--fundo-2);
  border:1px solid var(--borda);border-radius:14px}
/* Logo de fundo do chat. `background` nao aceita opacidade, entao um veu da cor
   do fundo vai por cima da logo: quanto mais forte a marca, mais fino o veu. O
   fundo dentro de uma caixa com rolagem fica parado enquanto as falas andam. */
.conversa{background:
  linear-gradient(rgba(11,18,32,calc(1 - var(--marca-forca, 0) * 1.7)),
                  rgba(11,18,32,calc(1 - var(--marca-forca, 0) * 1.7))),
  var(--marca-dagua-url, none) center / 62% auto no-repeat,
  var(--fundo-2)}
.fala{border:1px solid var(--borda);border-radius:16px;padding:12px 15px;max-width:82%;
  font-size:15px;line-height:1.5}
.fala .quem{display:block;font-size:12.5px;font-weight:700;margin-bottom:5px;
  color:var(--txt-2)}
.avatar-chat{width:18px;height:18px;border-radius:99px;object-fit:cover;
  vertical-align:middle;margin-right:5px;margin-top:-2px}
.fala .quando{font-weight:400;margin-left:8px;color:var(--txt-3);font-size:11.5px}
.fala p{margin:0;white-space:pre-wrap;word-break:break-word}
.fala.equipe{align-self:flex-start;background:var(--roxo-fundo);
  border-color:color-mix(in srgb, var(--roxo) 45%, transparent);
  border-bottom-left-radius:5px}
.fala.equipe .quem{color:var(--roxo)}
.fala.cliente{align-self:flex-end;background:var(--azul-fundo);
  border-color:var(--borda-viva);border-bottom-right-radius:5px}
.fala.cliente .quem{color:var(--azul-claro)}
.fala.sistema{align-self:center;max-width:92%;background:none;border-style:dashed;
  color:var(--txt-2);font-size:13.5px;text-align:center}
.conversa .detalhe{margin:auto;text-align:center;max-width:36ch}
.envio-mensagem textarea{width:100%;background:var(--fundo-2);border:1px solid var(--borda);
  border-radius:12px;color:var(--txt);font:inherit;font-size:15px;padding:13px 15px;
  resize:vertical;min-height:92px}
.envio-mensagem textarea:focus{outline:none;border-color:var(--roxo);
  box-shadow:0 0 0 3px var(--roxo-fundo)}
.envio-mensagem .btn{margin-top:10px}

/* ---------- avaliacoes e reclamacoes ---------- */
.estrelas{display:inline-flex;gap:2px;color:var(--txt-3);font-style:normal}
.estrelas i{font-style:normal}
.estrelas i.cheia{color:var(--ambar)}
.estrelas.grande{font-size:22px}
.nota-dada{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.resposta-loja{margin-top:12px;border-left:3px solid var(--azul);padding-left:12px}
.resposta-loja b{font-size:13px;color:var(--azul-claro)}
.resposta-loja p{margin:4px 0 0;color:var(--txt-2);white-space:pre-wrap}
.form-avaliacao textarea{width:100%;background:var(--fundo-2);border:1px solid var(--borda);
  border-radius:12px;color:var(--txt);font:inherit;padding:11px 13px;resize:vertical;
  margin-top:10px}
.form-avaliacao .btn{margin-top:10px}
/* as estrelas vem invertidas no HTML para o hover pintar da esquerda ate o alvo */
.escolher-nota{display:inline-flex;flex-direction:row-reverse;gap:4px;font-size:30px}
.escolher-nota input{position:absolute;opacity:0;width:0;height:0}
.escolher-nota label{color:var(--txt-3);cursor:pointer;line-height:1}
.escolher-nota input:checked ~ label,
.escolher-nota label:hover,
.escolher-nota label:hover ~ label{color:var(--ambar)}
.escolher-nota input:focus-visible + label{outline:2px solid var(--azul);border-radius:4px}
/* convite para avaliar, no topo do pedido entregue: uma estrela ja basta */
.avaliar-rapido{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:14px 0;padding:16px 18px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--ambar) 45%,transparent);
  background:color-mix(in srgb,var(--ambar) 9%,var(--fundo-2))}
.avaliar-rapido .texto-avaliar{display:grid;gap:2px;min-width:200px}
.avaliar-rapido .texto-avaliar span{color:var(--txt-2);font-size:14px}
.estrelas-rapidas{display:inline-flex;flex-direction:row-reverse;gap:2px}
.estrelas-rapidas button{background:none;border:0;padding:2px 3px;font-size:34px;
  line-height:1;color:var(--txt-3);cursor:pointer}
.estrelas-rapidas button:hover,
.estrelas-rapidas button:hover ~ button,
.estrelas-rapidas button:focus-visible,
.estrelas-rapidas button:focus-visible ~ button{color:var(--ambar)}
.cupom-obrigado{display:grid;gap:4px;margin-top:14px;padding:12px 14px;border-radius:12px;
  border:1px dashed var(--ambar);background:color-mix(in srgb,var(--ambar) 8%,transparent)}
.cupom-obrigado code{font-size:20px;letter-spacing:2px;font-weight:700;color:var(--ambar)}
/* lembrete no topo de qualquer pagina: tem compra entregue sem nota */
.lembrete-avaliar{display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;padding:9px 16px;font-size:14px;
  background:color-mix(in srgb,var(--ambar) 12%,var(--fundo-2));
  border-bottom:1px solid color-mix(in srgb,var(--ambar) 40%,transparent)}
.lembrete-avaliar a{font-weight:600;color:var(--ambar)}
.lembrete-avaliar button{background:none;border:0;color:var(--txt-3);font-size:18px;
  cursor:pointer;line-height:1}
.reportar{margin-top:16px;border-top:1px solid var(--borda);padding-top:14px}
.reportar summary{cursor:pointer;color:var(--txt-2);font-size:14px}
.reportar summary:hover{color:var(--txt)}
.reportar select,.reportar textarea{width:100%;background:var(--fundo-2);
  border:1px solid var(--borda);border-radius:10px;color:var(--txt);font:inherit;
  padding:10px 12px;margin-top:6px}
.reportar .btn{margin-top:10px}
.linha-reclamacao{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--borda)}
.linha-reclamacao:last-child{border-bottom:0}
.linha-reclamacao .detalhe{display:block}
.selo-status.aberta,.selo-status.em_analise{background:var(--ambar-fundo);color:var(--ambar)}
.selo-status.resolvida{background:var(--verde-fundo);color:var(--verde)}
.selo-status.recusada{background:rgba(242,85,106,.13);color:var(--vermelho)}
.avaliacoes-vitrine{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px}
.cartao-avaliacao{background:var(--cartao);border:1px solid var(--borda);border-radius:14px;
  padding:16px}
.cartao-avaliacao p{margin:8px 0 0;color:var(--txt-2);font-size:14px}
.cartao-avaliacao .quem{font-size:13px;color:var(--txt-3);font-weight:700}
.nota-resumo{display:inline-flex;align-items:center;gap:10px}
.nota-resumo b{font-size:20px}
.marca-pedido{display:inline-block;margin-top:6px;margin-right:6px;font-size:12px;
  font-weight:700;padding:3px 9px;border-radius:99px}
.marca-pedido.nova{background:var(--azul-fundo);color:var(--azul-claro)}
.marca-pedido.problema{background:rgba(242,85,106,.13);color:var(--vermelho)}
.marca-pedido.avaliar{background:var(--verde-fundo);color:var(--verde)}
.atalhos-cliente{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 14px}
.atalhos-cliente .detalhe{width:100%;margin-bottom:2px}
.atalho{background:var(--cartao-2);border:1px solid var(--borda-viva);border-radius:99px;
  color:var(--txt);font:inherit;font-size:13px;padding:7px 14px;cursor:pointer}
.atalho:hover{border-color:var(--azul);background:var(--azul-fundo)}

/* ---------- destaques do andamento ---------- */
.destaques{margin:26px 0 34px}
.destaques h2{font-size:19px;margin:0 0 14px}
.grade-destaques{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.grade-destaques article{background:var(--cartao);border:1px solid var(--borda);
  border-radius:14px;padding:16px;border-left:3px solid var(--verde)}
.grade-destaques b{display:block;margin-bottom:6px}
.grade-destaques p{margin:0;color:var(--txt-2);font-size:14px;line-height:1.5}
.aviso-loja{margin-top:16px;background:var(--azul-fundo);border:1px solid var(--borda-viva);
  border-radius:12px;padding:13px 15px;color:var(--txt-2);font-size:14px}
.credito{margin:6px 0 0;font-size:12px;color:var(--txt-3)}
.credito a{text-decoration:underline}
.credito a:hover{color:var(--txt-2)}

/* ---------- chat flutuante do cliente ---------- */
.chat-flutuante{position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.chat-bolha{display:inline-flex;align-items:center;gap:11px;background:var(--azul);color:#fff;
  border:0;border-radius:99px;padding:11px 20px 11px 12px;font:inherit;font-size:15.5px;
  font-weight:800;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.45);transition:.15s}
.chat-bolha:hover{background:#3a8cff;transform:translateY(-2px)}
.chat-bolha .icone{font-size:17px}
.chat-bolha.tem-novidade{background:var(--roxo);color:#10121f}
.chat-conta{background:var(--vermelho);color:#fff;border-radius:99px;font-size:11.5px;
  font-weight:800;padding:1px 7px}
.chat-janela{width:620px;max-width:calc(100vw - 32px);height:460px;max-height:72vh;
  display:flex;flex-direction:column;background:var(--cartao);
  border:1px solid var(--borda-viva);border-radius:16px;overflow:hidden;
  box-shadow:0 22px 50px rgba(0,0,0,.55)}
.chat-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--borda);background:var(--fundo-2)}
.chat-topo .detalhe{display:block}
.chat-fechar{background:none;border:0;color:var(--txt-3);font-size:22px;line-height:1;
  cursor:pointer;padding:0 4px}
.chat-fechar:hover{color:var(--txt)}
.chat-corpo{display:grid;grid-template-columns:190px minmax(0,1fr);flex:1;min-height:0}
.chat-pedidos{border-right:1px solid var(--borda);overflow:auto;padding:8px;
  display:flex;flex-direction:column;gap:6px;background:var(--fundo-2)}
.chat-pedido-linha{position:relative}
.chat-pedido{display:flex;flex-direction:column;gap:2px;position:relative;text-align:left;
  width:100%;height:100%;background:var(--cartao);border:1px solid var(--borda);border-radius:10px;
  padding:9px 26px 9px 10px;color:var(--txt-2);font:inherit;font-size:13px;cursor:pointer}
.chat-pedido:hover{border-color:var(--borda-viva)}
.chat-pedido.ativo{border-color:var(--azul);background:var(--azul-fundo);color:var(--txt)}
.chat-pedido .situacao{font-size:11.5px;color:var(--txt-3)}
.chat-pedido .bolinha{position:absolute;top:8px;right:8px;background:var(--vermelho);color:#fff;
  border-radius:99px;font-size:10.5px;font-weight:800;padding:0 6px}
.chat-pedido-fechar{position:absolute;top:6px;right:6px;background:none;border:0;
  color:var(--txt-3);font-size:16px;line-height:1;width:20px;height:20px;border-radius:6px;
  cursor:pointer;padding:0}
.chat-pedido-fechar:hover{background:var(--cartao-2);color:var(--txt)}
.chat-conversa{display:flex;flex-direction:column;min-height:0;padding:10px}
.chat-conversa .conversa{flex:1;min-height:0;max-height:none;margin-bottom:10px}
.chat-envio{display:flex;flex-direction:column;gap:0}
.chat-envio .envio-acoes{margin-top:8px}
.chat-envio #chat-nome-anexo{margin-top:4px}
.chat-envio textarea{flex:1;min-height:44px;max-height:110px;background:var(--fundo-2);
  border:1px solid var(--borda);border-radius:11px;color:var(--txt);font:inherit;
  font-size:14px;padding:10px 12px;resize:none}
.chat-envio textarea:focus{outline:none;border-color:var(--roxo);
  box-shadow:0 0 0 3px var(--roxo-fundo)}
.chat-envio .btn{padding:11px 16px}
@media (max-width:660px){
  .chat-flutuante{right:12px;bottom:12px;left:12px;align-items:stretch}
  .chat-bolha{align-self:flex-end}
  .chat-janela{width:100%;height:76vh}
  .chat-corpo{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .chat-pedidos{flex-direction:row;border-right:0;border-bottom:1px solid var(--borda);
    max-height:92px}
  .chat-pedido-linha{min-width:130px}
}

/* Minimizado: fica so a barra do topo, encostada embaixo, sem tapar o site. */
.chat-janela.encolhida{height:auto;max-height:none}
.chat-janela.encolhida .chat-corpo{display:none}
.chat-janela.encolhida .chat-topo{cursor:pointer}

/* Logo da loja no chat: identidade em vez de um emoji generico. */
.marca-chat{width:26px;height:26px;object-fit:contain;border-radius:7px;flex:0 0 auto}
.chat-identidade{display:flex;align-items:center;gap:10px;min-width:0}
.chat-identidade b{display:block;line-height:1.2}
/* Minimizado vira uma pastilha pequena, encostada no canto, sem tapar a tela. */
.chat-janela.encolhida{width:auto;min-width:240px;height:auto;max-height:none;
  border-radius:14px}
.chat-janela.encolhida .chat-corpo{display:none}
.chat-janela.encolhida .chat-topo{cursor:pointer;padding:10px 12px}
.chat-janela.encolhida .detalhe{display:none}

/* ---------- chat: leitura antes de enfeite ---------- */
/* O logo escuro sumia no fundo colorido e o rotulo ficava pequeno. Agora o
   logo vai numa placa clara, que funciona com qualquer arte, e o texto tem
   tamanho de botao de verdade. */
.marca-chat{width:34px;height:34px;padding:4px;background:#fff;border-radius:9px;
  object-fit:contain;flex:0 0 auto;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.chat-bolha{padding:11px 20px 11px 12px;font-size:15.5px;font-weight:800;gap:11px}
.chat-bolha .rotulo{letter-spacing:.01em}
.chat-identidade .marca-chat{width:30px;height:30px}
.chat-identidade b{font-size:15px}
.chat-topo{padding:13px 15px}
.chat-janela.encolhida .chat-topo{padding:11px 14px}
.chat-janela.encolhida .chat-identidade b{font-size:14.5px}

/* Logo claro e transparente nao precisa de placa: fica maior e limpo. */
.marca-chat{width:40px;height:40px;padding:0;background:none;border-radius:0;
  box-shadow:none}
.chat-identidade .marca-chat{width:34px;height:34px}
.chat-bolha{padding:10px 20px 10px 14px}

/* Cartão de produto com o texto centralizado: o olho desce pelo meio, da arte
   até o botão, sem zigue-zague. Os degraus de quantidade continuam com o
   número de um lado e o valor do outro, que é como se lê tabela. */
.corpo-produto{text-align:center;align-items:center}
.corpo-produto > a{display:block;width:100%}
.corpo-produto .desde,.corpo-produto .preco-cheio,.corpo-produto .prazo{width:100%}
.atalhos-qtd{width:100%}
.cartao-produto .ver-produto{width:100%;margin-top:auto}
/* A linha "R$ x por unidade · quanto mais, mais barato" quebrava em duas e
   encostava na esquerda; centralizada, o olho desce pelo meio do cartao. */
.corpo-produto .desde{text-align:center;line-height:1.4}
.corpo-produto .prazo{text-align:center}
.corpo-produto .preco-cheio{text-align:center;font-size:22px}

/* Quantidade no carrinho: mais e menos ao lado do campo, sem botao de salvar. */
.item-qtd{display:flex;align-items:center;gap:6px}
.item-qtd input{width:96px;text-align:center}
.passo-qtd{background:var(--cartao-2);border:1px solid var(--borda-viva);border-radius:9px;
  color:var(--txt);font:inherit;font-size:17px;line-height:1;width:34px;height:34px;
  cursor:pointer}
.passo-qtd:hover{border-color:var(--azul);background:var(--azul-fundo)}
.item-qtd .sem-js{display:none}

/* ---------- escolha de como receber o codigo ---------- */
.escolha-canal{border:0;padding:0;margin:14px 0 4px}
.escolha-canal legend{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-3);font-weight:700;padding:0;margin-bottom:8px}
.opcao-canal{display:flex;gap:10px;align-items:flex-start;background:var(--fundo-2);
  border:1px solid var(--borda);border-radius:11px;padding:11px 13px;margin-bottom:8px;
  cursor:pointer}
.opcao-canal:hover{border-color:var(--azul)}
.opcao-canal:has(input:checked){border-color:var(--azul);background:var(--azul-fundo)}
.opcao-canal input{margin-top:3px;accent-color:var(--azul)}
.opcao-canal b{display:block;font-size:14px}
.opcao-canal small{color:var(--txt-3);font-size:12.5px;line-height:1.45}
/* Codigo de 6 numeros: fonte larga e espacada, para conferir digito a digito. */
.campo-codigo{font-size:26px;letter-spacing:.4em;text-align:center;font-weight:700;
  font-variant-numeric:tabular-nums}

/* ---------- busca com arte ---------- */
/* A caixa flutua sobre o resto da pagina, entao a barra precisa criar o
   contexto de posicao -- senao a lista aparece atras dos cartoes. O
   `overflow:hidden` da barra, que arredonda o campo, cortava a lista fora:
   aqui ele sai e quem arredonda sao as pontas do campo e do botao. */
.busca-viva{position:relative;overflow:visible}
.busca-viva input{border-radius:10px 0 0 10px}
.busca-viva button{border-radius:0 10px 10px 0}
.busca-grande.busca-viva input,.busca-grande.busca-viva button{border-radius:11px}
.sugestoes{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  background:var(--cartao);border:1px solid var(--borda-viva);border-radius:14px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.9);padding:6px;
  max-height:min(70vh,520px);overflow:auto}
.sugestoes[hidden]{display:none !important}
.sugestao-grupo + .sugestao-grupo{border-top:1px solid var(--borda);margin-top:6px;padding-top:6px}
.sugestao-jogo{margin:6px 8px 8px;font-size:13px;color:var(--txt-3)}
.sugestao-jogo b{color:var(--txt);font-size:14.5px}
/* A linha tem duas partes: o link do produto e os botoes do canto. Os botoes
   ficam fora do link para o clique neles nao levar a pessoa embora. */
.sugestao-linha{display:flex;align-items:center;gap:6px;border-radius:11px}
.sugestao-linha:hover{background:var(--cartao-2)}
.sugestao{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:11px;
  color:var(--txt);flex:1;min-width:0}
.sugestao.marcado{background:var(--cartao-2)}
.sugestao-acoes{display:flex;gap:6px;padding-right:8px;flex-shrink:0}
.acao-sugestao{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--borda);background:var(--fundo-2);color:var(--txt-3);
  font-size:14px;cursor:pointer;font-family:inherit;transition:.15s}
.acao-sugestao:hover{border-color:var(--azul);color:var(--azul-claro)}
.acao-sugestao:disabled{opacity:.4;cursor:not-allowed}
.acao-sugestao.favoritar.marcado{border-color:var(--vermelho);color:var(--vermelho);
  background:var(--vermelho-fundo)}
.acao-sugestao.guardado{border-color:var(--verde);color:var(--verde);
  background:var(--verde-fundo)}
.acao-sugestao.recusado{border-color:var(--vermelho);color:var(--vermelho)}
.sugestao img,.sugestao-sem-arte{width:58px;height:58px;border-radius:9px;object-fit:cover;
  flex-shrink:0;background:var(--fundo-2)}
.sugestao-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.sugestao-de{font-size:11.5px;color:var(--txt-3)}
/* O nome do item costuma ser comprido ("Divine Orb - Curse of the Allflame"):
   duas linhas mostram o bastante sem esticar a lista inteira. */
/* O nome e o que a pessoa esta procurando: e a maior letra da linha. */
.sugestao-nome{font-size:15px;font-weight:600;line-height:1.3;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sugestao-preco{font-size:14px;font-weight:700;color:var(--azul-claro);margin-top:2px}
.sugestao-fora{align-self:flex-start;margin-top:3px;font-size:11.5px;font-weight:700;
  color:var(--vermelho);background:var(--vermelho-fundo);border-radius:99px;padding:3px 9px;
  white-space:nowrap}
.sugestao-vazia{margin:14px 10px;color:var(--txt-3);font-size:13.5px}
.sugestao-todos{display:block;text-align:center;padding:11px;margin-top:4px;
  border-top:1px solid var(--borda);color:var(--azul-claro);font-size:13.5px;font-weight:600}
.sugestao-todos:hover{background:var(--cartao-2)}
/* No topo da entrada a busca e maior, entao a lista acompanha a largura dela. */
.busca-grande .sugestoes{left:0;right:0}
@media (max-width:620px){
  .sugestao img,.sugestao-sem-arte{width:46px;height:46px}
  .acao-sugestao{width:30px;height:30px}
  .sugestoes{max-height:60vh}
}

/* ---------- pagamento fora do site ---------- */
.pagar-fora{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 0}
.btn-pagar{font-size:16px;padding:14px 26px}
.aviso-pagamento{color:var(--txt-3);font-size:12.5px;margin:12px 0 0}

/* Convite para trabalhar ou vender: fica ao lado do carrinho, mas sem
   competir com ele -- quem esta comprando nao pode se confundir. */
.btn-trabalhe{background:transparent;border:1px solid var(--verde);color:var(--verde);
  font-size:13px;padding:9px 14px;white-space:nowrap}
.btn-trabalhe:hover{background:var(--verde-fundo);color:var(--verde)}
/* Em tela estreita o texto encolhe, mas o botao nao some: e por ele que
   chega quem tem moeda para vender. */
@media (max-width:900px){.btn-trabalhe{font-size:12px;padding:8px 10px}}

/* Convite para vender: faixa larga, cor propria, longe dos precos de compra
   -- e a unica coisa na entrada que nao pede dinheiro do visitante. */
.faixa-vender{display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;background:linear-gradient(100deg,var(--verde-fundo),var(--cartao) 62%);
  border:1px solid var(--borda-viva);border-left:3px solid var(--verde);
  border-radius:16px;padding:22px 26px}
.faixa-vender h2{margin:0 0 6px;font-size:20px}
.faixa-vender p{margin:0;color:var(--txt-2);max-width:62ch}

/* ---------- quadros de categoria ---------- */
/* Fila de quadrados com a arte, o nome e quantos itens tem. E o segundo passo
   da escolha dentro do jogo: moedas, itens, boost, contas. Categoria vazia
   aparece apagada em vez de sumir -- o dono precisa ver que ela existe para
   saber que ainda nao ligou produto nela. */
.faixa-categorias{padding-block:clamp(14px,2vw,20px) 0}
.quadros-categoria{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.quadro-categoria{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:6px;width:104px;padding:10px 8px 9px;border-radius:13px;
  border:1px solid var(--borda);background:var(--fundo-cartao, var(--cartao));
  color:var(--txt-2);transition:.16s}
.quadro-categoria:hover{border-color:var(--cor,var(--azul));color:var(--txt);
  transform:translateY(-2px)}
.quadro-categoria.ativo{border-color:var(--azul);background:var(--azul-fundo);
  color:var(--txt)}
.quadro-categoria.vazia{opacity:.55}
.quadro-arte{width:46px;height:46px;border-radius:10px;object-fit:cover;
  background:var(--fundo-2);flex-shrink:0}
.quadro-arte.sem-arte{display:grid;place-items:center;font-size:20px;font-weight:800}
.quadro-nome{font-size:12.5px;font-weight:600;text-align:center;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* A contagem fica na quina, como aviso: diz de relance onde tem mercadoria. */
.quadro-conta{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;
  display:grid;place-items:center;padding:0 6px;border-radius:99px;
  background:var(--azul);color:#fff;font-size:11px;font-weight:800;
  font-variant-numeric:tabular-nums;border:2px solid var(--fundo)}
.quadro-categoria.vazia .quadro-conta{background:var(--cartao-2);color:var(--txt-3)}
@media (max-width:560px){
  .quadro-categoria{width:86px;padding:9px 6px 8px}
  .quadro-arte{width:38px;height:38px}
}

/* ---------- grade de ofertas do jogo ---------- */
/* O cartao carrega a decisao inteira: arte, preco, quantidade e compra. A
   ordem segue a cabeca de quem compra -- ve o item, ve quanto custa, escolhe
   quanto quer, compra. O selo "em estoque" saiu do topo: dizer que ha estoque
   em todo cartao nao informa nada; o que informa e quando NAO ha. */
.grade-ofertas{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));
  gap:16px}
.oferta-cartao{display:flex;flex-direction:column;gap:9px;padding:12px;
  background:var(--fundo-cartao, var(--cartao));border:1px solid var(--borda);
  border-radius:16px;transition:.16s}
.oferta-cartao:hover{border-color:var(--cor,var(--azul));transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.36)}
.oferta-cartao[hidden]{display:none !important}
.oferta-cartao[data-estoque="nao"]{opacity:.72}

/* Quadro QUADRADO: arte de item de jogo e quadrada, o painel pede 600 x 600
   e a previa de la mostra um quadrado. So a caixa do site era deitada, e a
   arte quadrada ficava com tarja dos dois lados -- ou cortada, no modo
   "preenchendo". Quem estava fora de esquadro era a caixa. */
.oferta-arte{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1/1;border-radius:11px;background:var(--fundo-2);
  overflow:hidden}
.oferta-arte img{max-width:92%;max-height:92%;object-fit:contain;
  transform:scale(var(--zoom-arte,1));filter:drop-shadow(0 8px 16px rgba(0,0,0,.45));
  transition:transform .25s}
.arte-preenchendo .oferta-arte img,
.oferta-cartao.arte-preencher .oferta-arte img{max-width:none;max-height:none;
  width:100%;height:100%;object-fit:cover;filter:none}
/* O produto manda no proprio quadro: `arte-preencher` cobre e corta,
   `arte-inteira` mostra tudo -- as duas valem mesmo contra o ajuste geral da
   loja. Arte de fornecedor vem deitada; arte de item vem quadrada; obrigar
   as duas ao mesmo encaixe estraga uma delas. */
.oferta-cartao.arte-inteira .oferta-arte img{max-width:92%;max-height:92%;
  width:auto;height:auto;object-fit:contain}
.oferta-cartao:hover .oferta-arte img{transform:scale(calc(var(--zoom-arte,1) * 1.05))}
.oferta-arte .sem-arte{font-size:30px;font-weight:800;opacity:.65}
.selo-esgotado{position:absolute;top:9px;left:9px;background:rgba(7,11,20,.88);
  color:var(--vermelho);border:1px solid var(--vermelho);border-radius:7px;
  padding:3px 9px;font-size:11px;font-weight:800}

/* Nome de item de jogo e comprido ("Curse of the Allflame Standard"): duas
   linhas mostram o bastante e todos os cartoes ficam da mesma altura. */
/* O jogo em cima, discreto mas legivel; o item embaixo, grande. Na entrada
   "Divine Orb" sem "Path of Exile 2" do lado nao diz de onde e. */
.oferta-jogo{display:block;text-align:center;font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--azul-claro)}
.oferta-jogo:hover{color:var(--txt)}
.oferta-nome{margin:0;font-size:17px;font-weight:800;line-height:1.3;min-height:2.6em;
  text-align:center}
.oferta-nome a{color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.oferta-nome a:hover{color:var(--azul-claro)}

/* Um numero grande, e o resto pequeno numa linha so. A pilha de rotulos
   ("PRECO UNITARIO", "TOTAL") empilhava quatro linhas para dizer dois numeros. */
.oferta-total{margin:0;text-align:center}
.oferta-total .total{font-size:26px;font-weight:800;color:var(--verde);line-height:1.1;
  font-variant-numeric:tabular-nums}
/* Altura fixa de duas linhas: um cartao com "desconto por volume" e outro sem
   empurravam a barra de quantidade para alturas diferentes na mesma fileira. */
.oferta-detalhes{margin:0;height:1.6em;overflow:hidden;text-align:center;font-size:12px;
  color:var(--txt-3);display:flex;align-items:center;justify-content:center;
  gap:5px;flex-wrap:wrap}
.oferta-detalhes .unitario{color:var(--txt-2);font-variant-numeric:tabular-nums}
.oferta-detalhes .por{color:var(--txt-3)}
.com-desconto .oferta-detalhes .unitario{color:var(--verde)}

/* "Você recebe": sem isso, o preço grande em cima parecia ser por unidade
   (achado real do cliente: cliente achando que cada Divine custava R$ 12,00,
   quando esse é o total de 100). Margem negativa pra furar o espaçamento
   padrão do cartão e ficar realmente colado na barra de quantidade, que é o
   número que essa frase está explicando -- e cor em destaque (badge azul,
   não um cinza discreto), pra ninguém deixar de notar o que está lendo. */
.oferta-recebe{margin:0 0 -6px;text-align:center}
.oferta-recebe span{display:inline-block;font-size:11px;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;color:var(--azul-claro);
  background:var(--azul-fundo);border:1px solid rgba(89,160,255,.35);
  border-radius:99px;padding:2px 9px}

/* Barra de quantidade embaixo do preco: compra rapida, sem abrir o produto. */
.contador-oferta{display:flex;align-items:center;background:var(--fundo-2);
  border:1px solid var(--borda);border-radius:11px;overflow:hidden}
.contador-oferta button{background:none;border:0;color:var(--txt-2);width:40px;height:40px;
  font-size:18px;line-height:1;cursor:pointer;font-family:inherit;flex-shrink:0}
.contador-oferta button:hover{background:var(--azul);color:#fff}
.contador-oferta .qtd{flex:1;min-width:0;background:transparent;border:0;color:var(--txt);
  text-align:center;font:inherit;font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums;padding:0}
.contador-oferta .qtd:focus{outline:none}

/* O prazo e o argumento de venda de uma loja de moeda: quem compra quer
   saber quando recebe. Todo prazo e verde, inclusive o de duas horas: o que
   o cliente precisa ler ali e "tem prazo e ele esta escrito", nao "este e
   pior que o outro". Cinza ao lado de verde lia como aviso de problema e
   derrubava justamente os produtos de entrega manual. */
.oferta-prazo{margin:0;display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:12.5px;font-weight:600;color:var(--verde);background:var(--verde-fundo);
  border:1px solid color-mix(in srgb,var(--verde) 35%,transparent);
  border-radius:9px;padding:6px 8px;min-height:32px;
  text-align:center;line-height:1.2}
.oferta-prazo svg{flex-shrink:0}
/* "Compre mais 800 e leve 1%": aparece so quando existe faixa a alcancar. */
.oferta-proximo{margin:0;font-size:11.5px;font-weight:600;text-align:center;
  color:var(--ambar);background:var(--ambar-fundo);border-radius:8px;padding:5px 8px}
.oferta-proximo[hidden]{display:none !important}

.oferta-botoes{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:auto}
.oferta-botoes .btn{padding:8px 10px;font-size:13px;text-align:center}
.so-icone{width:42px;padding:8px 0;font-size:15px}
.so-icone.guardado{border-color:var(--verde);color:var(--verde);background:var(--verde-fundo)}
.so-icone.recusado{border-color:var(--vermelho);color:var(--vermelho);
  background:var(--vermelho-fundo)}
.oferta-comprar .btn{display:block;width:100%;padding:11px;font-size:13.5px;
  letter-spacing:.02em}
.oferta-comprar .btn:disabled,.so-icone:disabled{opacity:.45;cursor:not-allowed}

@media (max-width:560px){
  .grade-ofertas{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}

  .oferta-total .total{font-size:22px}
  .contador-oferta button{width:34px;height:36px}
}

/* ---------- pagina do pedido ---------- */
/* O chat e a coisa principal desta tela: depois de pagar, o que o cliente
   quer e falar com alguem. Antes ele vinha depois de itens, dados e
   avaliacao, no fim de uma pilha de caixas. Agora ocupa a coluna larga, e o
   resumo, a situacao, os itens e os dados vao para a lateral. */
.pedido-grade{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;
  align-items:start}
.pedido-principal{display:grid;gap:14px;min-width:0}
.pedido-lado{display:grid;gap:14px;align-content:start;position:sticky;
  top:calc(76px + var(--topo-fixo,0px))}
.pedido-lado .caixa-conta{padding:18px}
.pedido-lado h2{font-size:16px;margin:0 0 12px}

/* O chat ocupa a altura da tela: conversa curta nao parece abandonada e
   conversa longa nao vira rolagem dentro de rolagem. */
.assunto-conversa .conversa{min-height:min(52vh,520px);max-height:min(64vh,680px)}
.assunto-conversa{border-top-width:3px}

.bloco-situacao .selo-status.grande{display:inline-block;font-size:13px;padding:6px 13px;
  margin-bottom:14px}
.linha-tempo.compacta{gap:10px}
.linha-tempo.compacta b{font-size:13.5px}
.pedido-lado .linha-conferencia{font-size:13.5px}

@media (max-width:1040px){
  .pedido-grade{grid-template-columns:1fr}
  .pedido-lado{position:static}
  .assunto-conversa .conversa{min-height:340px;max-height:60vh}
}

/* ---------- minha conta ---------- */
/* Cliente antigo merece ser tratado como antigo: a faixa de cima diz desde
   quando ele compra aqui, antes de qualquer formulario. */
.placar-conta{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(120px,1fr));
  gap:14px;align-items:center;background:var(--cartao);border:1px solid var(--borda-viva);
  border-radius:16px;padding:16px 18px;margin-bottom:16px}
.marca-conta{display:flex;align-items:center;gap:13px;min-width:0}
.marca-conta .inicial{width:48px;height:48px;border-radius:99px;display:grid;place-items:center;
  background:var(--azul-fundo);color:var(--azul-claro);font-size:21px;font-weight:800;
  flex-shrink:0}
.marca-conta b{display:block;font-size:15.5px}
.marca-conta .detalhe{display:block;color:var(--txt-3);font-size:12.5px;word-break:break-all}
.numero-conta span{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--txt-3);font-weight:700}
.numero-conta b{display:block;font-size:19px;margin-top:2px;font-variant-numeric:tabular-nums}

.pilha-conta{display:grid;gap:16px;align-content:start}
.lista-pedidos{display:grid;gap:8px}
.pedido-linha{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  background:var(--fundo-2);border:1px solid var(--borda);border-radius:11px;padding:11px 13px}
.pedido-linha:hover{border-color:var(--azul)}
.pedido-linha b{color:var(--txt)}
.pedido-linha .detalhe{display:block;color:var(--txt-3);font-size:12px}
.pedido-total{font-variant-numeric:tabular-nums;white-space:nowrap}

.atalhos-conta{display:grid;gap:8px}
.atalhos-conta a{display:block;background:var(--fundo-2);border:1px solid var(--borda);
  border-radius:11px;padding:11px 13px;color:var(--txt)}
.atalhos-conta a:hover{border-color:var(--azul)}
.atalhos-conta .detalhe{display:block;color:var(--txt-3);font-size:12.5px;margin-top:2px}

@media (max-width:820px){
  .placar-conta{grid-template-columns:1fr 1fr}
  .marca-conta{grid-column:1/-1}
}

/* ---------- pagina do pedido: faixa, ficha e tabela ---------- */
/* A situacao vem antes de tudo: e a primeira pergunta de quem abre a pagina. */
.faixa-situacao{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--cartao);border:1px solid var(--borda-viva);border-left:3px solid var(--azul);
  border-radius:14px;padding:13px 18px;margin-bottom:16px}
.faixa-situacao.entregue{border-left-color:var(--verde)}
.faixa-situacao.cancelado,.faixa-situacao.expirado{border-left-color:var(--vermelho)}
.faixa-situacao.aguardando_pagamento{border-left-color:var(--ambar)}
.faixa-situacao .mini{margin-left:auto}

.ficha-pedido{background:var(--cartao);border:1px solid var(--borda-viva);border-radius:16px;
  padding:18px}
.ficha-pedido h2{margin:0;font-size:19px}
.codigo-pedido{display:block;color:var(--txt-3);font-size:12px;margin-bottom:14px;
  letter-spacing:.04em}
.ficha-linhas{margin:0;display:grid;gap:11px}
.ficha-linhas > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ficha-linhas dt{font-size:12.5px;color:var(--txt-3);flex-shrink:0}
.ficha-linhas dd{margin:0;font-size:13.5px;font-weight:600;text-align:right}
.ficha-linhas dd.quebra{word-break:break-all;font-weight:400;font-size:12.5px}
.selo-pgto-status{font-size:11.5px;font-weight:800;border-radius:7px;padding:3px 9px}
.selo-pgto-status.pago{background:var(--verde-fundo);color:var(--verde)}
.selo-pgto-status.aguardando{background:var(--ambar-fundo);color:var(--ambar)}

/* Tabela de conferencia embaixo, na largura toda: e onde o cliente confere o
   que pagou, linha a linha, com a arte para reconhecer o item. */
.tabela-itens{background:var(--cartao);border:1px solid var(--borda);border-radius:16px;
  overflow:hidden;margin-top:16px}
.tabela-itens table{width:100%;border-collapse:collapse;font-size:14px}
.tabela-itens th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-3);padding:12px 14px;border-bottom:1px solid var(--borda);
  background:var(--fundo-2)}
.tabela-itens td{padding:12px 14px;border-bottom:1px solid var(--borda);color:var(--txt-2);
  vertical-align:middle}
.tabela-itens tr:last-child td{border-bottom:0}
.tabela-itens .direita{text-align:right}
.item-pedido{display:flex;align-items:center;gap:11px}
.item-pedido .miniatura{width:40px;height:40px;object-fit:contain;border-radius:8px;
  background:var(--fundo-2);padding:3px;flex-shrink:0}
.item-pedido b{display:block;color:var(--txt);font-size:14px}
.item-pedido .detalhe{display:block;color:var(--txt-3);font-size:12px}
.totais-pedido{display:grid;gap:2px;padding:14px 18px;background:var(--fundo-2);
  border-top:1px solid var(--borda);margin-left:auto;max-width:360px}

@media (max-width:760px){
  .tabela-itens{overflow-x:auto}
  .tabela-itens table{min-width:640px}
  .totais-pedido{max-width:none}
}

/* Quem chega para vender moeda quer resolver agora, nao preencher ficha: o
   atalho do WhatsApp vem antes do formulario, com cor propria. */
.atalho-whatsapp{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;background:linear-gradient(100deg,var(--verde-fundo),var(--fundo-2) 62%);
  border:1px solid var(--verde);border-radius:14px;padding:16px 18px;margin:4px 0 20px}
.atalho-whatsapp b{display:block;font-size:15px}
.atalho-whatsapp span{color:var(--txt-2);font-size:13.5px}
.btn-zap{background:var(--verde);color:#06240f;font-weight:800;white-space:nowrap}
.btn-zap:hover{filter:brightness(1.08)}
.titulo-forma{font-size:15px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.08em;
  margin:0 0 4px;padding-top:6px;border-top:1px solid var(--borda)}

/* Imagem dentro da fala: miniatura na conversa, tamanho real ao clicar. */
.fala-imagem{display:block;margin-top:8px;border-radius:10px;overflow:hidden;
  border:1px solid var(--borda);max-width:260px}
.fala-imagem img{display:block;width:100%;height:auto}
.fala-imagem:hover{border-color:var(--azul)}
.envio-acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.envio-acoes .btn{margin-left:auto}
.anexar{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;
  color:var(--txt-3);border:1px solid var(--borda);border-radius:9px;padding:8px 12px;
  margin:0;font-weight:400;text-transform:none;letter-spacing:0}
.anexar:hover{border-color:var(--azul);color:var(--txt)}
.preview-anexo{display:none;position:relative;align-items:center}
.preview-anexo.tem-imagem{display:inline-flex}
.preview-anexo img{width:56px;height:56px;object-fit:cover;border-radius:7px;
  border:1px solid var(--borda);display:block;cursor:zoom-in}
.preview-anexo img:hover{border-color:var(--azul)}
.preview-anexo .tirar-anexo{position:absolute;top:-6px;right:-6px;width:16px;height:16px;
  border-radius:50%;background:var(--vermelho);color:#fff;border:none;font-size:11px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}

/* ---------- rascunho ---------- */
/* A equipe vê a loja com o que ainda não foi publicado. A faixa e os selos
   existem para ninguém confundir "só eu vejo" com "o cliente já está vendo". */
/* A faixa acompanha a rolagem: quem corrige um texto no fim da pagina nao
   pode ter de voltar ao topo so para clicar em Salvar. Ela fica ACIMA do
   cabecalho (z-index maior) e o cabecalho gruda logo abaixo dela --
   `--topo-fixo` e a altura dela, medida no navegador. */
.faixa-rascunho{background:var(--ambar-fundo);color:var(--ambar);
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:8px 16px;font-size:13px;font-weight:600;
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid color-mix(in srgb,var(--ambar) 40%,transparent)}
.faixa-rascunho a{color:var(--ambar);text-decoration:underline;margin-left:6px}
.faixa-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.botao-faixa{font:inherit;cursor:pointer;padding:5px 12px;border-radius:99px;
  border:1px solid color-mix(in srgb,var(--ambar) 45%,transparent);
  background:transparent;color:var(--ambar)}
.botao-faixa:hover{background:color-mix(in srgb,var(--ambar) 16%,transparent)}
.botao-faixa.salvar{background:var(--ambar);color:#1a1206;border-color:var(--ambar)}
.botao-faixa:disabled{opacity:.45;cursor:default}
.estado-edicao{font-weight:600;font-size:12.5px;opacity:.9}
.estado-edicao.bom{color:var(--verde)}
.estado-edicao.ruim{color:var(--vermelho)}

/* Em modo de edicao os textos editaveis ficam visiveis como tal: sem isso a
   pessoa clica em tudo procurando o que da para mudar. O contorno some
   quando ela sai do modo -- a loja nao pode parecer um formulario. */
.faixa-rascunho.editando ~ * [data-editavel]{cursor:text}
.editavel-aberto{outline:1px dashed color-mix(in srgb,var(--ambar) 70%,transparent);
  outline-offset:3px;border-radius:4px;min-width:2ch;display:inline-block}
.editavel-aberto:focus{outline:2px solid var(--ambar);background:rgba(255,255,255,.04)}
.selo-rascunho{position:absolute;top:9px;left:9px;z-index:2;background:var(--ambar);
  color:#1a1206;border-radius:7px;padding:3px 9px;font-size:11px;font-weight:800}
.cartao-produto{position:relative}
.em-rascunho{outline:1px dashed var(--ambar);outline-offset:-1px}
.cartao-jogo.em-rascunho::before{content:"Rascunho";position:absolute;top:9px;left:9px;
  z-index:2;background:var(--ambar);color:#1a1206;border-radius:7px;padding:3px 9px;
  font-size:11px;font-weight:800}

/* ---------- listas de escolha ---------- */
/* `select` sem estilo herda a aparencia do sistema: caixa branca, fonte de
   outro tamanho, no meio de um site escuro. Isto vale para o site inteiro,
   para nao reaparecer no proximo campo que alguem criar.

   `appearance:none` tira a setinha do navegador, entao ela e redesenhada com
   um SVG de fundo -- por isso o espaco extra a direita. */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  width:100%;background-color:var(--fundo-2);color:var(--txt);font:inherit;font-size:14px;
  border:1px solid var(--borda);border-radius:10px;padding:10px 34px 10px 12px;
  cursor:pointer;line-height:1.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
}
select:hover{border-color:var(--borda-viva)}
select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-fundo)}
select:disabled{opacity:.55;cursor:not-allowed}
/* A lista aberta e desenhada pelo sistema: so da para pedir o tema escuro e
   acertar as cores das opcoes, que e o que evita texto preto em fundo preto. */
select option{background:var(--cartao);color:var(--txt)}

/* ---------- ordenar a lista ---------- */
.cabeca-lista .ordenar{display:flex;align-items:center;gap:8px}
.cabeca-lista .ordenar label{font-size:12.5px;color:var(--txt-3);white-space:nowrap}
/* So o tamanho muda: `background` no atalho apagava a setinha desenhada na
   regra geral de `select`, e o campo virava uma caixa sem seta, diferente de
   todos os outros selects da loja. Por isso aqui e `background-color`. */
.cabeca-lista .ordenar select{width:auto;min-width:168px;font-size:13px;
  padding:8px 32px 8px 12px;border-radius:10px;background-color:var(--cartao-2)}
/* A lista some por um instante enquanto a nova chega. Sem isto a troca
   acontece tao rapido que parece que nada aconteceu. */
.lista-ofertas.trocando .grade-ofertas{opacity:.42;transition:opacity .15s ease}
@media (max-width:640px){
  .cabeca-lista .ordenar{width:100%}
  .cabeca-lista .ordenar select{flex:1}
  .busca-jogo{flex-basis:100%;max-width:none;order:3}
  .cabeca-lista .ordenar{order:4}
}

/* ---------- arrastar dentro da loja ---------- */
/* Em modo de edicao os cartoes viram pecas que se movem. O contorno so
   aparece nesse modo: a loja do cliente nao pode parecer um quebra-cabeca. */
.loja-editando .pode-arrastar{cursor:grab;position:relative;
  outline:1px dashed color-mix(in srgb,var(--ambar) 55%,transparent);
  outline-offset:4px;border-radius:12px}
.loja-editando .pode-arrastar:focus-visible{outline:2px solid var(--ambar)}
.loja-editando .pode-arrastar.arrastando{opacity:.45;cursor:grabbing}
/* O cartao inteiro e um link: no modo de edicao ele para de navegar, senao
   o primeiro arrasto vira um clique e troca de pagina. */
.loja-editando a.pode-arrastar{pointer-events:auto}
.loja-editando .pode-arrastar::after{content:"⠿";position:absolute;top:6px;right:8px;
  z-index:3;font-size:14px;line-height:1;color:var(--ambar);
  background:rgba(6,10,18,.72);border-radius:6px;padding:2px 5px;pointer-events:none}

/* A arte que se enquadra arrastando. O cursor e a dica: nada de instrucao
   escrita por cima da imagem, que e justamente o que se quer ver. */
.loja-editando .pode-enquadrar{cursor:grab;touch-action:none;
  outline:2px dashed color-mix(in srgb,var(--ambar) 60%,transparent);
  outline-offset:-4px}
.loja-editando .pode-enquadrar:active{cursor:grabbing}
/* A faixa do topo do jogo e do rodizio fica meio apagada de proposito, para
   o texto ler. Em modo de edicao ela clareia: nao da para enquadrar o que
   mal se enxerga. */
.loja-editando .capa-fundo{opacity:.55}
.loja-editando .topo-verniz{opacity:.45}

/* Redimensionar o logo com o dedo, em modo de edicao: arrastar para cima
   aumenta, para baixo diminui, e o numero aparece enquanto se arrasta. */
.loja-editando .pode-escalar{cursor:ns-resize;touch-action:none;
  outline:2px dashed color-mix(in srgb,var(--ambar) 60%,transparent);
  outline-offset:6px;border-radius:8px}
.selo-escala{position:absolute;z-index:4;transform:translate(-50%,-50%);
  background:var(--ambar);color:#1a1206;font-weight:800;font-size:12px;
  padding:3px 9px;border-radius:99px;pointer-events:none;white-space:nowrap}

/* ---------- arte de fundo do topo da pagina do jogo ---------- */
/* O banner dentro de uma faixa nunca funcionou: arte pequena estourava, arte
   grande virava um selinho no meio. Aqui a arte deixa de ser retrato
   emoldurado e vira **pano de fundo** -- bem apagada, cobrindo o alto da
   pagina inteira, por tras do nome do jogo, das categorias e da primeira
   fileira de produtos.

   `object-fit:none` e o ponto: a arte aparece no TAMANHO NATURAL, nunca
   esticada. Janela maior mostra mais dos lados; janela menor corta. O que
   some na borda nao faz falta, porque a arte esta a 20% e existe para dar
   clima, nao para ser lida. */
.arte-de-fundo{position:absolute;left:0;right:0;top:0;height:clamp(420px,52vh,660px);
  z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--cor,#1e7bff) 16%,transparent),transparent 62%)}
/* A largura do elemento e a largura NATURAL da arte (`max-content`), nunca
   mais do que a tela. Assim a imagem nunca e ampliada, e -- o que importa
   aqui -- a borda dela coincide com a borda do elemento: da para dissolver
   exatamente no ponto onde a arte acaba.
   Sem isso sobrava uma **linha de corte** vertical no meio da tela, onde a
   foto virava fundo liso de uma vez. */
.arte-de-fundo img{width:max-content;max-width:100%;height:100%;
  object-fit:cover;object-position:top center;
  margin-inline:auto;opacity:.2;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,
    #000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
/* O pe da arte se dissolve no fundo do site: corte reto ali vira uma linha
   atravessando a pagina, e a linha chama mais atencao do que a arte. */
.arte-de-fundo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,var(--fundo) 96%)}
/* Com arte de fundo, a faixa do topo nao tem fundo proprio: ela e so o lugar
   onde o nome do jogo mora, por cima da arte. */
.capa-jogo.faixa-fundo{background:none;border-bottom-color:transparent}
/* **Tudo** o que esta na coluna sobe acima da arte. Listar as secoes uma a
   uma parecia bastar, mas a lista envelheceu: o dia em que o container da
   lista de ofertas mudou de nome, os cartoes voltaram a ficar por baixo --
   e como eles nao sao posicionados, a sombra da arte pintava por cima dos
   nomes dos produtos. So aparecia em monitor alto, onde a arte desce o
   bastante para alcancar a primeira fileira. */
.coluna-jogo > *:not(.arte-de-fundo){position:relative;z-index:1}
.capa-jogo,.faixa-categorias,.com-lateral,.so-ofertas{position:relative;z-index:1}
/* Em modo de edicao da para enquadrar a arte de fundo tambem, e ai ela
   precisa receber o ponteiro e ficar visivel o bastante para se enxergar. */
.loja-editando .arte-de-fundo{pointer-events:auto}
.loja-editando .arte-de-fundo img{opacity:.5}
.loja-editando .arte-de-fundo::after{opacity:.35}
@media (max-width:760px){
  /* Na vertical a arte ocupa quase a tela toda se deixar. */
  .arte-de-fundo{height:clamp(300px,38vh,420px)}
}

/* ---------- a pagina do jogo em duas colunas ---------- */
/* A lateral de filtros era um cartao solto no meio da pagina, e quem chegava
   nao percebia que dava para filtrar. Agora ela e uma coluna de verdade:
   encostada na borda, com fundo proprio, descendo ate o fim da pagina. E o
   desenho que toda loja do ramo usa, e pela mesma razao -- o filtro precisa
   estar sempre no canto do olho, nao a meio caminho da rolagem. */
.pagina-jogo{display:grid;grid-template-columns:var(--lateral,268px) minmax(0,1fr);
  align-items:stretch}
/* `stretch` no grid ja faz a coluna ter a altura da pagina inteira: e por
   isso que o fundo desce sozinho, sem altura fixa nem truque de sombra. */
.lateral-jogo{background:var(--cartao);border-right:1px solid var(--borda);
  padding:18px 16px 32px;z-index:2}
/* Gruda ao rolar: a lista de produtos e longa, e filtro que fica la em cima
   nao serve para nada da terceira fileira em diante. */
.lateral-presa{display:grid;gap:12px;position:sticky;
  top:calc(20px + var(--topo-fixo,0px))}
/* Dentro da coluna os quadros perdem a moldura: a coluna ja e a moldura. */
.lateral-jogo .caixa-filtro{background:none;border:0;padding:0 0 14px;
  border-bottom:1px solid var(--borda)}
.lateral-jogo .caixa-filtro:last-of-type{border-bottom:0}
.lateral-jogo .ajuda-lateral{background:var(--cartao-2);border:1px solid var(--borda);
  border-radius:12px;padding:14px;margin-top:6px}
/* A arte de fundo e o topo vivem na coluna da direita, nao na pagina toda. */
.coluna-jogo{position:relative;min-width:0}

@media (max-width:1000px){
  /* Em tela estreita a coluna vira uma **barra de filtros** no alto: duas
     colunas nao cabem sem espremer os cartoes, e jogar os filtros para
     depois da lista seria o mesmo que nao ter filtro -- ninguem rola a
     lista inteira para descobrir que dava para encurta-la. */
  .pagina-jogo{grid-template-columns:1fr}
  .lateral-jogo{border-right:0;border-bottom:1px solid var(--borda);
    padding:12px 16px}
  .lateral-presa{position:static;display:flex;flex-wrap:wrap;gap:10px 18px;
    align-items:center}
  .lateral-jogo .caixa-filtro{border-bottom:0;padding:0;display:flex;
    align-items:center;gap:10px;flex-wrap:wrap}
  .lateral-jogo .caixa-filtro h3{margin:0}
  .lateral-jogo .caixa-filtro select{width:auto;min-width:160px}
  /* A caixa de ajuda e conversa, nao filtro: no celular ela vai para o fim
     da pagina em vez de brigar por espaco no alto. */
  .lateral-jogo .ajuda-lateral{display:none}
}

/* ---------- ajustar a arte na propria loja ---------- */
/* Arrastar so funciona para quem ja sabe que da. O botao torna o ajuste
   descobrivel, e a caixa de reguas e o que permite repetir o mesmo
   enquadramento em varios jogos -- no olho ninguem acerta 30% duas vezes. */
/* Ancora do botao Ajustar, posta so em peca que ainda nao tem posicao
   propria (ver edicao-viva.js). A garantia dupla fica aqui: a arte do topo
   continua no lugar mesmo que alguem torne a marca-la um dia. */
.tem-ajuste{position:relative}
.lamina.tem-ajuste{position:absolute;inset:0}
.abrir-ajuste{position:absolute;top:10px;right:10px;z-index:6;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;padding:5px 11px;border-radius:99px;
  background:var(--ambar);color:#1a1206;border:0;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.abrir-ajuste:hover{filter:brightness(1.08)}
/* So a lamina visivel do rodizio recebe clique: as outras estao ali, com
   opacidade zero, e roubariam o botao da que esta a mostra. */
.loja-editando .lamina:not(.visivel){pointer-events:none}
.loja-editando .lamina:not(.visivel) .abrir-ajuste{display:none}

.ajuste-enquadro{position:absolute;z-index:80;width:262px;display:grid;gap:10px;
  padding:14px;border-radius:14px;background:var(--cartao);
  border:1px solid color-mix(in srgb,var(--ambar) 45%,transparent);
  box-shadow:0 18px 44px rgba(0,0,0,.55)}
.ajuste-enquadro[hidden]{display:none}
.ajuste-enquadro b{font-size:13px;color:var(--ambar)}
.ajuste-enquadro label{display:grid;gap:5px;font-size:12.5px;color:var(--txt-2)}
/* `display:grid` acima venceria o atributo hidden: a linha da aproximacao so
   aparece na arte que tem onde guardar o numero. */
.ajuste-enquadro label[hidden]{display:none}
.ajuste-enquadro output{font-weight:700;font-size:12px;color:var(--txt)}
/* Eixo sem sobra fica apagado, mas continua funcionando. Desligar de
   verdade dependia de uma medida tirada num instante so, e medida errada
   virava controle morto -- pior do que um controle que nao muda nada. */
.ajuste-enquadro label.parado{opacity:.55}
.ajuste-recado{margin:0;font-size:11.5px;line-height:1.45;color:var(--txt-3)}
.ajuste-enquadro.sem-folga .ajuste-recado{color:var(--ambar)}
.ajuste-botoes{display:flex;gap:8px}
.ajuste-botoes .mini{flex:1}

/* ---------- arte do celular e imagem extra (o logo por cima da arte) ---------- */
/* `.so-pc` e `.so-celular` so existem quando a arte tem uma versao propria para
   o celular; sem ela a mesma imagem serve aos dois e nada aqui entra em jogo.
   `!important` de proposito: `.lamina img` e `.capa-fundo` declaram `display`
   com a mesma forca e, sem isto, as duas versoes apareciam juntas. */
.so-celular{display:none!important}
/* A imagem extra: a posicao e o CENTRO dela, o tamanho e a LARGURA, os dois em
   por cento do quadro. Assim acompanha o quadro em qualquer tela, e o que a
   equipe ve arrastando e o que o cliente ve. */
/* Sem `max-height`: a largura pedida e a largura que a imagem tem. Com a trava,
   uma arte larga a 100% ficava com 60% da largura e nunca cobria o quadro; o que
   passa do quadro e cortado pelo `overflow:hidden` de quem a segura. */
.extra-arte{position:absolute;left:var(--ex,50%);top:var(--ey,50%);width:var(--ee,24%);
  max-width:none;height:auto;transform:translate(-50%,-50%);
  pointer-events:none;z-index:3;user-select:none;-webkit-user-drag:none}
.capa-jogo .extra-arte{z-index:2}
.cartao-jogo .extra-arte{z-index:1}
/* Camada do banner: fora do fundo escurecido, senao o logo perde a cor. */
.topo-extras{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.extra-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.extra-slide.visivel{opacity:1}
@media (max-width:680px){
  .so-pc{display:none!important}
  .so-celular{display:block!important}
  .extra-arte{left:var(--ex-m,var(--ex,50%));top:var(--ey-m,var(--ey,50%));
    width:var(--ee-m,var(--ee,24%))}
}
/* Modo rascunho: a imagem extra vira uma peca que se move. */
.loja-editando .extra-arte[data-camada]{pointer-events:auto;cursor:grab;touch-action:none;
  outline:2px dashed rgba(30,123,255,.85);outline-offset:3px;z-index:6}
.loja-editando .extra-arte[data-camada]:active{cursor:grabbing}
.loja-editando .extra-slide:not(.visivel) .extra-arte{pointer-events:none}

/* ---------- arte do topo em tamanho fixo, com brilho nas laterais ---------- */
/* O problema: `cover` escala a arte pela LARGURA da tela, entao em cada monitor
   ela aparece de um tamanho -- estica no grande, encolhe e corta no pequeno.
   Aqui a arte e escalada pela ALTURA do topo, que quase nao muda de monitor
   para monitor: fica sempre do mesmo tamanho, no meio. O que sobra dos lados,
   em tela grande, e preenchido por uma copia desfocada da propria arte (a luz
   da mesma cor), e as pontas da arte dissolvem nela. Em tela menor que a arte,
   `max-width:100%` a corta e o enquadramento escolhe o pedaco, como sempre. */
.lamina img.ambiente{display:none}
@media (min-width:681px){
  .banner-fixa .lamina img.ambiente{display:block;position:absolute;inset:-8%;
    width:116%;height:116%;max-width:none;object-fit:cover;transform:none;
    filter:blur(46px) saturate(1.3) brightness(.85);opacity:.9;pointer-events:none}
  /* `--px` e onde a arte fica: 0% encosta na esquerda, 50% no meio, 100% na
     direita (so quando o topo e mais largo que ela; sendo mais estreito, ela e
     cortada e `object-position` escolhe o pedaco). `left` e o deslocamento
     inverso somam o "espaco livre vezes X". */
  .banner-fixa .lamina img:not(.ambiente){position:absolute;top:0;bottom:0;
    left:var(--px,50%);right:auto;margin:0;height:100%;width:auto;max-width:100%;
    transform:translateX(calc(var(--px,50%) * -1)) scale(var(--zoom,1));
    transform-origin:var(--foco,50% 50%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
}

/* O texto fica POR CIMA da imagem extra: titulo, busca e selos precisam
   continuar legiveis mesmo com a imagem grande. Em modo de edicao a camada sobe
   (regras `.loja-editando`), senao nao daria para pegar o logo com o mouse. */
.topo-loja .topo-grade{position:relative;z-index:4}
.capa-jogo .capa-conteudo{z-index:3}
.cartao-jogo .nome-jogo{z-index:2}
.loja-editando .topo-extras{z-index:6}

/* ---------- escurecer a arte (uma escolha por imagem, e uma por tela) ---------- */
/* `--esc` (computador) e `--esc-m` (celular) vem do elemento que segura a arte;
   `--eesc` vem da propria imagem extra. Escurecer e baixar o brilho: a arte
   continua a mesma, so mais escura -- ao contrario do verniz do topo, que e um
   degrade por cima e existe para o TEXTO ficar legivel. */
.lamina img:not(.ambiente),.capa-fundo,.arte-de-fundo img,.cartao-jogo .fundo-jogo{
  filter:brightness(calc(1 - var(--esc,0)))}
/* O brilho de tras escurece junto, senao a luz das laterais continuaria clara. */
.banner-fixa .lamina img.ambiente{
  filter:blur(46px) saturate(1.3) brightness(calc(.85 * (1 - var(--esc,0))))}
.extra-arte{filter:brightness(calc(1 - var(--eesc,0)))}
/* Mesmo seletor da regra de cima (`:not(.ambiente)` incluido): com menos
   especificidade, a regra do celular perdia para a do computador e o celular
   nunca escurecia do seu proprio jeito. */
@media (max-width:680px){
  .lamina img:not(.ambiente),.capa-fundo,.arte-de-fundo img,.cartao-jogo .fundo-jogo{
    filter:brightness(calc(1 - var(--esc-m,var(--esc,0))))}
}

/* ---------- lateral do jogo: os outros jogos ---------- */
/* A lista e limitada em altura: a lateral gruda ao rolar, e uma coluna mais alta
   que a tela deixaria os filtros de baixo inalcancaveis. */
.caixa-jogos .filtro-jogos-campo{width:100%;font:inherit;font-size:13px;color:var(--txt);
  padding:8px 12px;border-radius:10px;border:1px solid var(--borda);
  -webkit-appearance:none;appearance:none;outline:none;background-color:var(--cartao-2);
  margin-bottom:8px}
.caixa-jogos .filtro-jogos-campo:focus{border-color:var(--azul)}
.caixa-jogos .filtro-jogos-campo::placeholder{color:var(--txt-3)}
.jogos-lista{display:grid;gap:2px;max-height:250px;overflow-y:auto;
  scrollbar-width:thin;margin-right:-6px;padding-right:6px}
.jogo-lateral{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;
  color:var(--txt-2);font-size:13.5px;font-weight:600;line-height:1.2;
  border:1px solid transparent;transition:background .12s,color .12s}
.jogo-lateral[hidden]{display:none}
.jogo-lateral:hover{background:var(--cartao-2);color:var(--txt)}
.jogo-lateral.atual{background:var(--azul-fundo);color:var(--txt);
  border-color:rgba(30,123,255,.45)}
.jogo-lateral img,.jogo-lateral-inicial{width:26px;height:26px;border-radius:6px;flex:none;
  object-fit:cover;background:var(--fundo-2)}
.jogo-lateral-inicial{display:grid;place-items:center;font-size:12px;font-weight:800;
  color:var(--txt-3)}
.jogo-lateral-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nada-jogo{margin:6px 2px;font-size:12.5px;color:var(--txt-3)}
.jogos-select{display:none}
@media (max-width:1000px){
  /* Na barra de filtros do alto a lista cheia nao cabe: vira uma caixa de selecao,
     como a de liga, e o campo de busca some (o proprio select ja e a busca). */
  .caixa-jogos .filtro-jogos-campo,.jogos-lista{display:none}
  .jogos-select{display:block}
}

/* ---------- "Precisa de ajuda?": os botoes de falar com a loja ---------- */
.ajuda-lateral .btn{display:flex;align-items:center;justify-content:center;width:100%;
  margin-top:10px}
@media (max-width:1000px){
  /* Em tela estreita a explicacao some, mas o botao NAO: quem esta no celular e
     quem mais precisa de um atalho para falar com a loja. Ele vira uma linha de
     botoes pequenos na propria barra de filtros. */
  .lateral-jogo .ajuda-lateral{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
    background:none;border:0;padding:0;margin:0}
  .lateral-jogo .ajuda-lateral h3,.lateral-jogo .ajuda-lateral p{display:none}
  .lateral-jogo .ajuda-lateral .btn{width:auto;margin:0;padding:8px 14px;font-size:13.5px}
}

/* A explicacao de quando nao ha chat (quem ainda nao tem pedido). */
.ajuda-nota{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--txt-2);
  background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:10px 12px}
.ajuda-nota[hidden]{display:none}
.ajuda-nota a{color:var(--azul-claro);text-decoration:underline}
@media (max-width:1000px){
  .lateral-jogo .ajuda-lateral .ajuda-nota{flex-basis:100%;margin:0}
}

/* ---------- chat: o formulario do suporte (nome, telefone e e-mail) ---------- */
.chat-contato{display:grid;gap:8px;padding:14px;overflow-y:auto;min-height:0;align-content:start}
.chat-contato[hidden]{display:none}
.chat-contato b{font-size:15px}
.chat-contato .detalhe{margin:0;font-size:12px;color:var(--txt-3);line-height:1.45}
/* O site nao tem estilo geral para campos: sem `border` e `appearance` o navegador
   desenha a borda cinza dele. Por isso o campo declara tudo. */
.chat-contato input:not(.oculto),.chat-contato textarea{width:100%;font:inherit;font-size:13.5px;
  color:var(--txt);padding:9px 12px;border-radius:10px;border:1px solid var(--borda);
  background-color:var(--cartao-2);outline:none;resize:vertical;
  -webkit-appearance:none;appearance:none}
.chat-contato input:focus,.chat-contato textarea:focus{border-color:var(--azul)}
.chat-contato input::placeholder,.chat-contato textarea::placeholder{color:var(--txt-3)}
.chat-contato .btn:disabled{opacity:.6;cursor:wait}
.chat-erro{margin:0;font-size:12.5px;color:var(--vermelho);background:rgba(242,85,106,.1);
  border-radius:8px;padding:8px 10px}
.chat-erro[hidden]{display:none}

/* O WhatsApp e o ultimo recurso: um aviso discreto, nao um botao. */
.ajuda-whats{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--txt-3)}
.ajuda-whats a{color:var(--azul-claro);font-weight:700;text-decoration:underline;white-space:nowrap}
.chat-whats{margin:0;padding:8px 12px;font-size:12px;color:var(--txt-3);
  border-top:1px solid var(--borda);text-align:center}
.chat-whats[hidden]{display:none}
.chat-whats a{color:var(--azul-claro);font-weight:700;text-decoration:underline}
@media (max-width:1000px){
  .lateral-jogo .ajuda-lateral .ajuda-whats{display:block;margin:0;flex-basis:100%}
}

/* ---------- chat: conversa nova com os dados da conta ---------- */
.campos-contato{display:grid;gap:8px}
.chat-contato.com-conta .campos-contato{display:none}
.chat-conta-info{margin:0;font-size:12.5px;line-height:1.5;color:var(--txt-2);
  background:var(--cartao-2);border:1px solid var(--borda);border-radius:10px;padding:8px 10px}
.chat-conta-info[hidden]{display:none}
.chat-conta-info a{color:var(--azul-claro);text-decoration:underline}

/* ---------- lateral do jogo em tela baixa ---------- */
/* O `top` era 20px, mas o cabecalho fixo tem ~76px: o alto da lateral ficava por
   baixo dele. E numa tela pequena a coluna (filtros + lista de jogos + ajuda) e
   mais alta que a janela, e o que passava do fim ficava inalcancavel. Agora a
   lateral comeca abaixo do cabecalho e, se nao couber, rola por dentro. */
.lateral-presa{top:calc(88px + var(--topo-fixo,0px));
  max-height:calc(100vh - 104px - var(--topo-fixo,0px));overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;padding-right:6px;margin-right:-6px}
/* Poucos jogos a vista em tela baixa, com barra de rolagem para os outros. */
.jogos-lista{max-height:clamp(112px,20vh,250px)}
@media (max-width:1000px){
  .lateral-presa{max-height:none;overflow:visible;padding-right:0;margin-right:0}
}

/* ---------- chat: o formulario do suporte com espaco de sobra ---------- */
/* Aberto o formulario, a janela cresce (ate onde a tela deixa) e a area da conversa,
   que fica vazia nessa hora, sai da frente: era ela que espremia o campo da mensagem. */
.chat-janela.com-formulario{height:600px;max-height:calc(100vh - 110px)}
.chat-janela.com-formulario .chat-conversa .conversa{display:none}
.chat-janela.com-formulario .chat-conversa{padding:0}
.chat-janela.com-formulario .chat-contato{flex:1;padding:12px 16px;gap:8px}
.chat-contato > *{flex-shrink:0}
.chat-contato textarea{min-height:80px;resize:vertical}
.chat-contato input:not(.oculto){min-height:38px}
@media (max-width:660px){
  .chat-janela.com-formulario{height:calc(100vh - 90px);max-height:none}
  .chat-janela.com-formulario .chat-pedidos{max-height:64px}
}

/* ---------- avaliacoes: filtro, carrossel e nome mascarado ---------- */
.filtro-avaliacoes{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.filtro-avaliacoes .chip{background:var(--cartao);border:1px solid var(--borda);
  color:var(--txt-2);border-radius:99px;padding:6px 14px;font:inherit;font-size:13px;
  font-weight:600;cursor:pointer}
.filtro-avaliacoes .chip:hover{border-color:var(--borda-viva)}
.filtro-avaliacoes .chip.ativo{background:var(--azul-fundo);border-color:var(--azul);
  color:var(--azul-claro)}
.avaliacoes-vitrine{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x proximity}
.avaliacoes-vitrine .cartao-avaliacao{flex:0 0 260px;scroll-snap-align:start}
.cabeca-avaliacao{display:flex;align-items:center;justify-content:space-between;gap:8px}
.selo-verificado{font-style:normal;display:inline-grid;place-items:center;width:15px;
  height:15px;border-radius:99px;background:var(--verde-fundo);color:var(--verde);
  font-size:10px;margin-left:4px}
.comprado-avaliacao{display:block;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--borda);font-size:12.5px;color:var(--txt-3);
  text-decoration:none}
a.comprado-avaliacao:hover{color:var(--txt-2)}
.comprado-avaliacao span{color:var(--azul-claro);font-weight:700;white-space:nowrap}
@media (max-width:700px){
  .avaliacoes-vitrine .cartao-avaliacao{flex-basis:82vw}
}

/* ---------- conta: reenviar codigo, botao que parece link ---------- */
.link-simples{background:none;border:0;padding:0;font:inherit;font-size:13.5px;
  color:var(--txt-3);text-decoration:underline;cursor:pointer}
.link-simples:hover{color:var(--azul-claro)}
.conta-reenviar{margin-top:14px;text-align:center}

/* ---------- criar conta: termos de uso, ler ate o fim para aceitar ---------- */
.termos-caixa{max-height:220px;overflow-y:auto;border:1px solid var(--borda);
  border-radius:10px;padding:12px 14px;background-color:var(--cartao-2);
  color:var(--txt-2);font-size:13.5px;line-height:1.6;margin-top:6px}
.termos-marcar{margin-top:12px}
.termos-marcar input:disabled{cursor:not-allowed}
.termos-prosa{color:var(--txt-2);line-height:1.7}

/* ---------- guias (blog) ---------- */
.grade-guias{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;
  margin-top:18px}
.cartao-guia{display:flex;flex-direction:column;overflow:hidden;background:var(--cartao);
  border:1px solid var(--borda);border-radius:var(--raio);color:inherit;
  transition:transform .15s,border-color .15s}
.cartao-guia:hover{transform:translateY(-3px);border-color:var(--azul)}
.cartao-guia img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.corpo-guia{display:grid;gap:6px;padding:14px 16px}
.corpo-guia b{font-size:16px;line-height:1.3}
.selo-guia{justify-self:start;font-size:11.5px;font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;color:var(--azul-claro)}
.guia{max-width:800px}
.capa-guia{width:100%;border-radius:var(--raio);margin:18px 0;display:block}
.texto-guia{max-width:none;font-size:17px;line-height:1.75;color:var(--txt)}
.texto-guia h2{font-size:24px;margin:34px 0 10px}
.texto-guia h3{font-size:19px;margin:24px 0 8px}
.texto-guia p{margin:0 0 16px}
.texto-guia ul{margin:0 0 18px;padding-left:22px}
.texto-guia li{margin-bottom:6px}
.texto-guia a{color:var(--azul-claro);text-decoration:underline}
.convite-guia{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:34px 0;padding:18px 20px;border-radius:14px;
  border:1px solid var(--borda);background:var(--cartao)}
.convite-guia div{display:grid;gap:3px}
.convite-guia span{color:var(--txt-2);font-size:14px}
.guias-do-jogo{margin-top:8px}

/* popup de avaliacao antes de sair */
.modal-avaliar{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;
  background:rgba(4,8,16,.72)}
.modal-avaliar[hidden]{display:none}
.modal-avaliar-caixa{position:relative;width:min(440px,100%);text-align:center;display:grid;
  gap:12px;justify-items:center;padding:28px 24px 22px;border-radius:16px;
  background:var(--cartao);border:1px solid var(--borda);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-avaliar-caixa h2{margin:0;font-size:21px}
.modal-avaliar-caixa p{margin:0;color:var(--txt-2)}
.modal-avaliar-fechar{position:absolute;top:8px;right:12px;background:none;border:0;
  color:var(--txt-3);font-size:26px;line-height:1;cursor:pointer}
.estrelas-rapidas.grande button{font-size:46px;padding:2px 5px}
body.modal-aberto{overflow:hidden}
.modal-avaliar-selo{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--verde,#25d07d)}
.modal-avaliar .mini:disabled{opacity:.55;cursor:not-allowed}

/* ---------- logo de fundo do site: grande, bem clarinha, parada ao rolar ----------
   Fica ATRAS de tudo (z-index -1), como se fosse o fundo do proprio site: os
   cartoes, textos e botoes passam por cima. Para ela aparecer entre eles, o
   fundo da faixa do topo e do rodape e translucido; quadros e cartoes seguem
   opacos, de proposito. Nao pega clique. */
.marca-dagua{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--marca-dagua-url) center / min(80vw,860px) auto no-repeat;
  opacity:var(--marca-forca,.06)}