/* =====================================================================
   loja.css — peças só do SITE DA LOJA (herói, números, selos, filtros).
   Complementa o bt.css (identidade Fable 5 compartilhada com o BragaTube).
   ===================================================================== */

/* ------------------------------- herói ------------------------------- */
.heroi{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;padding:42px 0 10px}
.heroi .selo-topo{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:.06em;
  padding:8px 15px;border-radius:999px;color:var(--verde);background:rgba(57,255,106,.08);border:1px solid rgba(57,255,106,.35)}
.heroi h1{margin-top:16px;font-size:clamp(30px,5vw,50px);line-height:1.05;font-weight:900;letter-spacing:-.02em}
.heroi h1 .linha2{display:block;background:linear-gradient(90deg,var(--neon2),var(--ouro));-webkit-background-clip:text;
  background-clip:text;color:transparent;filter:drop-shadow(0 4px 22px rgba(255,23,68,.35))}
.heroi p.sub{margin-top:14px;color:var(--texto2);font-size:15px;line-height:1.65;max-width:560px}
.heroi p.sub b{color:var(--texto)}
.heroi .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.heroi .acoes .btn{padding:14px 20px;border-radius:16px}
.heroi .acoes .btn small{display:block;font-weight:600;font-size:11px;opacity:.85;letter-spacing:.02em}
.contador{margin-top:20px;display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--borda);font-size:13px;color:var(--texto2)}
.contador .bolinha{width:9px;height:9px;border-radius:50%;background:var(--verde);box-shadow:0 0 12px var(--verde);animation:pisca 2.4s infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.35}}

/* celular mostrado ao lado (igual o site de hoje) */
.telinha{justify-self:center;width:290px;max-width:100%;border-radius:32px;padding:10px;background:linear-gradient(160deg,#241019,#0d0206);
  border:1px solid var(--borda-neon);box-shadow:0 30px 70px rgba(0,0,0,.65),0 0 46px rgba(255,23,68,.14)}
.telinha .tela{border-radius:24px;overflow:hidden;background:#0a0206;border:1px solid rgba(255,255,255,.07)}
.telinha .barra{display:flex;align-items:center;gap:8px;padding:12px 14px;background:linear-gradient(180deg,#2A0A16,#170611)}
.telinha .barra b{font-size:12.5px}
.telinha .barra .bt{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:900;
  background:linear-gradient(145deg,var(--neon2),#8E0B26);color:#fff}
.telinha .linha{display:flex;gap:9px;padding:10px 12px;align-items:center;border-top:1px solid rgba(255,255,255,.05)}
.telinha .linha img{width:42px;height:42px;border-radius:11px;object-fit:cover;background:#000}
.telinha .linha .t{font-size:12px;font-weight:800;line-height:1.25}
.telinha .linha .s{font-size:10.5px;color:var(--texto3)}
.telinha .linha .tag{margin-left:auto;font-size:9.5px;font-weight:900;padding:3px 7px;border-radius:6px;
  background:rgba(255,210,61,.14);color:var(--ouro);border:1px solid rgba(255,210,61,.3)}

/* ------------------------------ números ------------------------------ */
/* minmax(0,1fr) em vez de 1fr cru: sem isso, rótulo sem espaço ("DOWNLOADS", "MODDERS"...) força a
   coluna a abrir além da tela no celular (o grid não encolhe uma track menor que o min-content do
   conteúdo) — foi isso que cortava os números no mobile (Braga 24/09). */
.numeros{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:26px;padding:18px;border-radius:22px;
  background:rgba(255,255,255,.035);border:1px solid var(--borda)}
.numeros .n{text-align:center;min-width:0}
.numeros .n .v{font-size:26px;font-weight:900;color:var(--azul);text-shadow:0 0 18px rgba(79,227,255,.25)}
.numeros .n .l{font-size:10.5px;letter-spacing:.14em;color:var(--texto3);margin-top:3px;font-weight:700;
  overflow-wrap:break-word}

/* ------------------------------- filtros ------------------------------ */
.filtros{display:flex;gap:9px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtros a{flex:none}

/* ---------------- ícone de gênero (mesmo símbolo do app), cromo dourado ---------------- */
.gen-ic{flex:none;vertical-align:-3px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.chip .gen-ic{margin-right:1px}
.cat-cab .ic .gen-ic{width:30px;height:30px}

/* chips de GÊNERO: moldura levemente cromada + brilho dourado deslizando sem parar (Braga 24/09:
   "ícones do app + animado/cromo reluzente"). Continua com o padrão premium só-CSS do resto do site
   (transform/opacity, sem pintar de novo o background a cada frame). */
.filtros-genero .chip{position:relative;overflow:hidden;border-color:rgba(255,210,61,.18);
  background:linear-gradient(180deg,rgba(255,210,61,.07),rgba(255,255,255,.04))}
.filtros-genero .chip::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  transform:translateX(-160%) skewX(-18deg);
  background:linear-gradient(100deg,transparent 30%,rgba(255,241,199,.5) 48%,rgba(255,210,61,.65) 52%,transparent 70%);
  animation:chip-cromo 5.6s ease-in-out infinite}
.filtros-genero .chip>*{position:relative;z-index:2}
.filtros-genero .chip:nth-child(5n+1)::before{animation-delay:0s}
.filtros-genero .chip:nth-child(5n+2)::before{animation-delay:1.1s}
.filtros-genero .chip:nth-child(5n+3)::before{animation-delay:2.2s}
.filtros-genero .chip:nth-child(5n+4)::before{animation-delay:3.3s}
.filtros-genero .chip:nth-child(5n)::before{animation-delay:4.4s}
@keyframes chip-cromo{0%,22%{transform:translateX(-160%) skewX(-18deg)}45%,100%{transform:translateX(160%) skewX(-18deg)}}
.filtros-genero .chip.on{border-color:rgba(255,210,61,.6);box-shadow:0 8px 20px rgba(213,14,54,.35),inset 0 0 0 1px rgba(255,210,61,.22)}
.filtros-genero .chip.on::before{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.85) 52%,transparent 70%)}
.filtros-genero .chip:hover::before{animation-duration:1.1s}

/* ====================== CARTÃO DE MOD — PREMIUM (Fable 5 de estúdio) ======================
   Moldura dourada no hover, selos em vidro com brilho deslizante, anel neon/ouro giratório
   no ícone, nome cromado, categoria em placa de ouro e números destacados. Só CSS. */
.item.mod{position:relative;isolation:isolate;
  background:
    radial-gradient(120% 80% at 50% -12%,rgba(255,23,68,.10),transparent 60%),
    linear-gradient(180deg,var(--card2),var(--fundo2));
  transition:transform .24s cubic-bezier(.2,.7,.2,1),border-color .24s ease,box-shadow .24s ease}
.item.mod:hover{transform:translateY(-6px);border-color:var(--borda-neon);
  box-shadow:0 24px 54px rgba(0,0,0,.66),0 0 36px rgba(255,23,68,.30),0 0 22px rgba(255,210,61,.15)}
/* moldura dourada que acende no hover (custo zero em repouso) */
.item.mod::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;z-index:6;
  border:1px solid transparent;transition:border-color .24s ease,box-shadow .24s ease}
.item.mod:hover::after{border-color:var(--borda-ouro);
  box-shadow:inset 0 0 0 1px rgba(255,210,61,.30),inset 0 0 26px rgba(255,23,68,.14)}

.item.mod .capa img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.item.mod:hover .capa img{transform:scale(1.09)}
.item.mod .capa .semcapa{width:100%;height:100%;display:grid;place-items:center;font-size:46px;
  background:radial-gradient(120% 120% at 50% 0,#2A0A16,#0a0206)}
.item.mod .capa .fade{position:absolute;inset:auto 0 0 0;height:62%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(6,2,4,.9))}
/* fio cromado (vermelho→ouro) no topo da capa — acende no hover */
.item.mod .capa::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--neon) 28%,var(--ouro) 55%,var(--neon2) 80%,transparent);
  opacity:.5;transition:opacity .24s ease}
.item.mod:hover .capa::after{opacity:1}

/* selos VIP / GRÁTIS — vidro, moldura e brilho deslizante */
.item.mod .capa .selo{position:absolute;left:9px;top:9px;font-size:10px;font-weight:900;letter-spacing:.05em;z-index:4;
  padding:5px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.35);display:inline-flex;align-items:center;gap:4px;
  overflow:hidden;text-shadow:0 1px 1px rgba(0,0,0,.18);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.item.mod .capa .selo::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-140%);
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.85) 48%,transparent 60%)}
.item.mod .capa .selo.vip{background:linear-gradient(135deg,#FFE98A,#F0B000 52%,#FFD24D);color:#2A1600;
  border-color:rgba(255,233,150,.9);box-shadow:0 4px 16px rgba(233,161,0,.5),inset 0 0 0 1px rgba(255,255,255,.3);
  animation:selo-pulso 2.8s ease-in-out infinite}
.item.mod .capa .selo.vip::after{animation:selo-shine 3.4s ease-in-out infinite}
.item.mod .capa .selo.gratis{background:linear-gradient(135deg,#6DF39D,#10A03D);color:#04230f;
  border-color:rgba(130,255,175,.75);box-shadow:0 4px 14px rgba(57,255,106,.35),inset 0 0 0 1px rgba(255,255,255,.25)}
.item.mod:hover .capa .selo.gratis::after{animation:selo-shine 1.1s ease}
@keyframes selo-shine{0%{transform:translateX(-140%)}55%,100%{transform:translateX(170%)}}
@keyframes selo-pulso{0%,100%{box-shadow:0 4px 16px rgba(233,161,0,.45),inset 0 0 0 1px rgba(255,255,255,.3)}
  50%{box-shadow:0 4px 22px rgba(255,210,61,.8),inset 0 0 0 1px rgba(255,255,255,.45)}}

/* nota (estrela dourada) — pílula de vidro com brilho de ouro */
.item.mod .capa .nota{position:absolute;right:9px;top:9px;font-size:10.5px;font-weight:900;padding:4px 9px;border-radius:10px;z-index:4;
  background:linear-gradient(180deg,rgba(34,14,0,.85),rgba(0,0,0,.72));color:var(--ouro);border:1px solid var(--borda-ouro);
  backdrop-filter:blur(3px);box-shadow:0 3px 12px rgba(0,0,0,.5),inset 0 0 12px rgba(255,210,61,.18);
  text-shadow:0 0 9px rgba(255,210,61,.55)}
/* curtidas (coração) na capa — pílula neon */
.item.mod .capa .tempo{z-index:4;background:rgba(10,2,6,.7);color:#FF9DB0;border:1px solid var(--borda-neon);
  backdrop-filter:blur(3px);box-shadow:0 3px 12px rgba(0,0,0,.45),inset 0 0 10px rgba(255,23,68,.15);
  text-shadow:0 0 8px rgba(255,23,68,.5)}

/* ícone redondo do jogo — moldura com anel neon/ouro giratório */
.item.mod .capa .ico-moldura{position:absolute;left:10px;bottom:10px;width:48px;height:48px;z-index:4;border-radius:15px}
.item.mod .capa .ico-moldura::before{content:"";position:absolute;inset:-2px;border-radius:17px;z-index:-1;
  background:conic-gradient(from 0deg,var(--neon),var(--ouro),var(--neon2),var(--ouro2),var(--neon));
  box-shadow:0 0 16px rgba(255,23,68,.5);animation:anel-gira 7s linear infinite}
.item.mod .capa .ico{position:static;width:100%;height:100%;border-radius:13px;object-fit:cover;background:#000;
  border:2px solid rgba(8,2,4,.92);box-shadow:0 6px 16px rgba(0,0,0,.6)}
.item.mod:hover .capa .ico-moldura::before{animation-duration:2.4s;
  box-shadow:0 0 24px rgba(255,23,68,.7),0 0 14px rgba(255,210,61,.5)}
@keyframes anel-gira{to{transform:rotate(360deg)}}

/* cards TODOS DO MESMO TAMANHO na linha (Braga 24/09: "nada de ficar torto"); rodapé colado no fundo */
.grade{align-items:stretch}
.item.mod{display:flex;flex-direction:column}
.item.mod .corpo{display:flex;flex-direction:column;flex:1 1 auto}
.item.mod .rodape-card{margin-top:auto;padding-top:12px}   /* empurra autor/downloads pro fundo -> caixas iguais mesmo com nº de tags diferente */

/* produtora/desenvolvedora do jogo — linha discreta sob o nome */
.item.mod .empresa{margin-top:2px;font-size:11px;font-weight:700;color:var(--texto3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* numerinho de posição (#1, #2, #3…) nas fileiras ranqueadas — medalha ao lado do nome
 * (dentro do corpo do cartão, sem cortar no overflow:hidden do .item) */
.item.mod .nome-linha{display:flex;align-items:center;gap:7px;min-width:0}
.item.mod .nome-linha .nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item.mod .rank{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-size:10px;font-weight:900;color:#fff;letter-spacing:-.03em;
  border:1px solid rgba(255,255,255,.25);box-shadow:0 3px 10px rgba(0,0,0,.45)}
.item.mod .rank.r1{background:linear-gradient(150deg,#FFE98A,#F0B000 55%,#FFD24D);color:#2A1600;
  box-shadow:0 3px 12px rgba(233,161,0,.55),0 0 14px rgba(255,210,61,.4)}
.item.mod .rank.r2{background:linear-gradient(150deg,#E7ECF2,#A9B4C2 55%,#CBD3DC);color:#1a2230}
.item.mod .rank.r3{background:linear-gradient(150deg,#E8B085,#B0672E 55%,#CE8A54);color:#2a1400}
.item.mod .rank.r4{background:linear-gradient(150deg,#3a2430,#1c0e16);color:var(--texto2);border-color:rgba(255,23,68,.3)}

/* x64/x32 + Mod APK/Zygisk + versão — chips pequenos, mesma linguagem premium dos selos */
.item.mod .specs{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.item.mod .spec{font-size:9.5px;font-weight:900;letter-spacing:.03em;padding:3px 8px;border-radius:7px;
  color:#fff;line-height:1.4;border:1px solid rgba(255,255,255,.18);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.item.mod .spec-x64{background:linear-gradient(135deg,#10B981,#059669)}
.item.mod .spec-x32{background:linear-gradient(135deg,#F97316,#C2410C)}
.item.mod .spec-tipo.zygisk{background:linear-gradient(135deg,#8B5CF6,#5B21B6)}
.item.mod .spec-tipo.apk{background:linear-gradient(135deg,#64748B,#334155)}
.item.mod .spec-ver{background:rgba(255,255,255,.06);color:var(--texto2);border-color:var(--borda);
  box-shadow:none;font-weight:800}

/* nome do mod — letreiro cromado com brilho de ouro */
.item.mod .nome{font-weight:900;letter-spacing:.005em;
  background:linear-gradient(180deg,#fff 14%,#FFEAD0 52%,#FFD79A 76%,#fff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 5px rgba(255,210,61,.20))}

/* tags: categoria em PLACA DE OURO/CROMO, função em vidro azul */
.item.mod .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.item.mod .tag{position:relative;font-size:10.5px;font-weight:800;line-height:1;padding:5px 9px;border-radius:999px;
  white-space:nowrap;border:1px solid var(--borda);color:var(--texto2);background:rgba(255,255,255,.05);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;transition:transform .14s ease,box-shadow .14s ease}
.item.mod .tag.genero{color:#2A1B00;font-weight:900;border-color:rgba(255,241,199,.95);
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,#FFF6DC 0%,#FFEAA6 20%,#EBB43A 52%,#D89A2A 70%,#FFD24D 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.28);
  box-shadow:0 2px 9px rgba(233,161,0,.3),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(160,95,0,.28)}
.item.mod .tag.genero .gen-ic{filter:drop-shadow(0 1px 1px rgba(255,255,255,.45))}
.item.mod .tag.genero::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-140%);
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.85) 50%,transparent 66%);
  animation:selo-shine 4.8s ease-in-out infinite}
.grade .item:nth-child(4n+1) .tag.genero::after{animation-delay:0s}
.grade .item:nth-child(4n+2) .tag.genero::after{animation-delay:1.2s}
.grade .item:nth-child(4n+3) .tag.genero::after{animation-delay:2.4s}
.grade .item:nth-child(4n) .tag.genero::after{animation-delay:3.6s}
.item.mod:hover .tag.genero{box-shadow:0 4px 14px rgba(233,161,0,.5),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 6px rgba(160,95,0,.28)}
.item.mod:hover .tag.genero::after{animation:selo-shine 1.2s ease-in-out infinite;animation-delay:0s}
.item.mod .tag.func{color:var(--azul);border-color:rgba(79,227,255,.34);
  background:linear-gradient(180deg,rgba(79,227,255,.13),rgba(79,227,255,.05));box-shadow:inset 0 0 10px rgba(79,227,255,.09)}

/* rodapé do card: modder + downloads (separador dourado sutil) */
.item.mod .rodape-card{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:10px;
  border-top:1px solid rgba(255,210,61,.12)}
.item .meta.modder{display:flex;align-items:center;gap:6px;color:var(--texto2);font-weight:800;font-size:12px;min-width:0}
.item .meta.modder img{width:20px;height:20px;border-radius:50%;object-fit:cover;border:1px solid var(--borda-ouro);flex:none;
  box-shadow:0 0 10px rgba(255,210,61,.3)}
.item.mod .rodape-card .dls{margin-left:auto;font-size:11px;font-weight:800;color:var(--texto2);white-space:nowrap;flex:none;
  padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--borda)}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion:reduce){
  .item.mod .capa .selo.vip,.item.mod .capa .selo::after,.item.mod .capa .ico-moldura::before,
  .item.mod .tag.genero::after,.filtros-genero .chip::before{animation:none}
}

.secao h2 .vermais{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--neon3)}
.secao h2{display:flex}

/* ---------------- chips de categoria (home + /mods) ---------------- */
.filtros .chip{font-weight:800;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.filtros .chip:hover{transform:translateY(-2px);border-color:var(--borda-neon);color:var(--texto)}
.filtros .chip.on{box-shadow:0 8px 20px rgba(213,14,54,.35)}
.filtros .chip .qt{font-size:10.5px;font-weight:900;padding:1px 7px;margin-left:3px;border-radius:999px;
  background:rgba(255,255,255,.12);color:var(--texto2)}
.filtros .chip:hover .qt{color:var(--texto)}
.filtros .chip.on .qt{background:rgba(0,0,0,.28);color:#fff}

/* ---------------- cabeçalho de categoria (/mods) ---------------- */
.cat-cab{display:flex;align-items:center;gap:16px;margin:8px 0 4px}
.cat-cab .ic{width:60px;height:60px;flex:none;border-radius:18px;display:grid;place-items:center;font-size:30px;
  background:radial-gradient(120% 120% at 50% 0,#33091a,#12040a);border:1px solid var(--borda-neon);
  box-shadow:0 0 26px rgba(255,23,68,.25)}
.cat-cab .tt{min-width:0}
.cat-cab .tt h2{display:block;font-size:24px;font-weight:900;color:var(--texto);letter-spacing:-.01em}
.cat-cab .tt .n{margin-top:3px;font-size:13px;color:var(--texto3);font-weight:700}
.cat-cab .tt .n b{color:var(--neon3)}
@media (max-width:560px){ .cat-cab .ic{width:50px;height:50px;font-size:26px;border-radius:15px} .cat-cab .tt h2{font-size:20px} }

/* --------------------------- cartão do tube --------------------------- */
.tube-cta{margin-top:34px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  background:linear-gradient(120deg,rgba(255,23,68,.14),rgba(255,210,61,.06) 60%,transparent);
  border:1px solid var(--borda-neon);border-radius:var(--r2);padding:24px}
.tube-cta .play{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:27px;
  background:linear-gradient(145deg,var(--neon2),#8E0B26);box-shadow:0 0 30px rgba(255,23,68,.4)}
.tube-cta h3{font-size:20px;font-weight:900}
.tube-cta p{color:var(--texto2);font-size:13.5px;margin-top:5px;line-height:1.55}

/* ----------------------------- página baixar -------------------------- */
.baixar{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.passo{display:flex;gap:13px;margin-top:16px}
.passo .n{width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center;font-weight:900;
  background:linear-gradient(180deg,var(--neon2),#C30D33);color:#fff;font-size:13px}
.passo .t b{display:block;margin-bottom:3px}
.passo .t{font-size:13.5px;color:var(--texto2);line-height:1.5}
.versao{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.mudancas{margin-top:16px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);
  border:1px solid var(--borda);border-left:3px solid var(--ouro);font-size:13.5px;color:var(--texto2);line-height:1.6}

/* ------------------------------ vazio -------------------------------- */
.vazio{text-align:center;padding:60px 20px;color:var(--texto3)}
.vazio .emoji{font-size:44px;margin-bottom:12px}
.vazio b{display:block;color:var(--texto);font-size:16px;margin-bottom:6px}

/* ------------------------------ celular ------------------------------- */
@media (max-width:980px){
  .heroi{grid-template-columns:1fr;gap:26px;padding-top:26px}
  .telinha{display:none}
  .numeros{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tube-cta{grid-template-columns:auto 1fr;gap:14px;padding:18px}
  .tube-cta .btn{grid-column:1/-1}
  .baixar{grid-template-columns:1fr}
}
/* CELULAR: nada pode estourar pro lado (Braga: top no PC, celular e tablet) */
@media (max-width:560px){
  .heroi{padding-top:18px}
  .heroi h1{font-size:clamp(26px,8vw,34px)}
  .heroi p.sub{font-size:14px}
  .heroi .acoes{flex-direction:column;align-items:stretch}
  .heroi .acoes .btn{width:100%;justify-content:center}
  .numeros{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}
  .numeros .n .v{font-size:22px}
  .numeros .n .l{font-size:9.5px}
  /* chips de gênero: um pouco mais compactos, mas o alvo de toque continua bom (padding vertical mantido) */
  .filtros{gap:7px}
  .filtros-genero .chip{font-size:11.5px;padding:7px 11px}
  .filtros-genero .chip .gen-ic{width:14px;height:14px}
  .cat-cab{gap:12px}
  /* cards em 2 colunas caprichadas no celular (sem estourar pro lado) */
  .item.mod .nome{font-size:13.5px}
  .item.mod .tag{font-size:9.5px;padding:4px 8px}
  .item.mod .tags{gap:5px;margin-top:8px}
  .item.mod .capa .ico-moldura{width:40px;height:40px;border-radius:13px;left:8px;bottom:8px}
  .item.mod .capa .ico{border-radius:11px}
  .item.mod .capa .selo{font-size:9px;padding:4px 8px;left:8px;top:8px;letter-spacing:.03em}
  .item.mod .capa .nota{font-size:9.5px;padding:3px 8px;right:8px;top:8px}
  .item.mod .rodape-card{padding-top:8px;margin-top:9px}
  .item .meta.modder{font-size:11px}
  .item .meta.modder img{width:17px;height:17px}
  .item.mod .rodape-card .dls{font-size:10px;padding:3px 7px}
  .item.mod .empresa{font-size:10px}
  .item.mod .specs{gap:4px;margin-top:6px}
  .item.mod .spec{font-size:8.5px;padding:2px 6px}
  .item.mod .rank{width:19px;height:19px;font-size:8.5px}
}
@media (max-width:360px){ .numeros{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px} }