/* =====================================================================
   home.css — o CELULAR da home + recursos, QR, modders e selo final (Fable 5).
   Recriado 23/09 a partir do mock do site velho, na nossa cara (preto/vinho/neon/ouro).
   ===================================================================== */

/* ------------------------------ CELULAR ------------------------------ */
.fone{justify-self:center;position:relative;width:300px;max-width:100%}
.fone-borda{position:relative;z-index:2;width:300px;height:610px;border-radius:44px;padding:11px;
  background:linear-gradient(160deg,#2a1019,#0c0206);
  border:1px solid rgba(255,23,68,.28);
  box-shadow:0 28px 70px rgba(0,0,0,.6),0 0 60px rgba(255,23,68,.14),inset 0 0 0 2px rgba(255,255,255,.03);
  animation:fone-flutua 5s ease-in-out infinite}
@keyframes fone-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.fone-tela{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#08040a}
.fone-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:96px;height:20px;border-radius:0 0 14px 14px;background:#000;z-index:6}
.fone-brilho{position:absolute;inset:-40px;z-index:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,23,68,.22),transparent 70%);filter:blur(20px);pointer-events:none}

.mapp{position:absolute;inset:0;display:flex;flex-direction:column;background:#0a0206}
.mapp *{box-sizing:border-box}
/* cabeçalho: gradiente da MARCA (vermelho→vinho→ouro), não o roxo do site velho */
.mtopo{background:linear-gradient(135deg,#FF1744,#B00A24 55%,#E9A100);padding:34px 13px 14px;border-radius:0 0 18px 18px}
.mtopo-l{display:flex;align-items:center;gap:9px}
.mburger{display:flex;flex-direction:column;gap:3px;width:18px}
.mburger span{height:2px;border-radius:2px;background:rgba(255,255,255,.9)}
.mbem{font-size:8px;color:rgba(255,255,255,.8)}
.mmarca{font-size:13px;font-weight:900;color:#fff;letter-spacing:.02em}
.mbt{margin-left:auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:900;
  background:#fff;color:#C30D33}
.mbusca{margin-top:10px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.28);border-radius:12px;
  padding:7px 11px;color:rgba(255,255,255,.85);font-size:9px}
.mrolagem{flex:1;overflow:hidden;padding-bottom:8px}

/* --------------------- carrossel de destaque (auto-slide) --------------------- */
.mcarrossel{position:relative;margin:11px 12px 0;height:96px;border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.mcarrossel-pista{display:flex;height:100%;width:100%;transition:transform .65s cubic-bezier(.4,0,.2,1);
  will-change:transform}
.mbanner{position:relative;flex:0 0 100%;height:100%;overflow:hidden;background-size:cover;background-position:center;
  display:flex;align-items:flex-end;padding:9px 11px;text-decoration:none;color:inherit;cursor:pointer}
.mbanner::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.82))}
.mbanner-selo{position:absolute;top:7px;left:7px;z-index:2;background:var(--neon);color:#fff;font-size:7px;font-weight:900;
  padding:2px 6px;border-radius:5px;letter-spacing:.04em}
.mbanner-inf{position:relative;z-index:2;flex:1;min-width:0}
.mbanner-nome{font-size:11px;font-weight:900;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px #000}
.mbanner-dev{font-size:8px;color:rgba(255,255,255,.9);text-shadow:0 1px 3px #000}
.mbanner-play{position:relative;z-index:2;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--neon);color:#fff;font-size:11px;box-shadow:0 0 14px rgba(255,23,68,.6);
  animation:mplay-pulso 2.2s ease-in-out infinite}
@keyframes mplay-pulso{0%,100%{transform:scale(1);box-shadow:0 0 14px rgba(255,23,68,.6)}50%{transform:scale(1.1);box-shadow:0 0 22px rgba(255,23,68,.85)}}
.fone:hover .mbanner-play{animation-play-state:paused}
.mdots{display:flex;justify-content:center;gap:4px;margin-top:7px}
.mdots span{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.28);transition:width .25s ease,background .25s ease}
.mdots span.on{width:14px;border-radius:2px;background:var(--ouro)}

.mlabel{margin:13px 12px 5px;font-size:7.5px;font-weight:900;letter-spacing:.16em;color:var(--texto3)}
.mchips{display:flex;gap:5px;padding:0 12px;overflow:hidden}
.mchip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:3px 9px;border-radius:12px;
  font-size:8px;color:var(--texto2);white-space:nowrap}
.mchip.on{background:linear-gradient(180deg,var(--neon2),#C30D33);border-color:rgba(255,255,255,.28);color:#fff}
.mtit{margin:13px 12px 7px;font-size:12px;font-weight:900;color:#fff}

/* --------------------- lista de Top Mods (rola sozinha, loop suave) --------------------- */
.mlista-janela{position:relative;overflow:hidden;height:230px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%)}
.mlista-pista{display:flex;flex-direction:column;animation:mlista-rola 26s linear infinite}
.fone:hover .mlista-pista{animation-play-state:paused}
@keyframes mlista-rola{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}

.mmod{display:flex;align-items:center;gap:8px;background:#15070d;border:1px solid rgba(255,255,255,.06);
  border-radius:10px;padding:6px 9px;margin:0 12px 6px;text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease}
.mmod:hover{transform:translateX(3px);background:#1c0910;border-color:rgba(255,23,68,.35)}
.mmod:active{transform:translateX(3px) scale(.97)}
.mmod-ic{width:30px;height:30px;border-radius:8px;overflow:hidden;background:#000;flex:none;display:grid;place-items:center;font-size:14px}
.mmod-ic img{width:100%;height:100%;object-fit:cover}
.mmod-inf{flex:1;min-width:0}
.mmod-nome{font-size:9px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmod-meta{font-size:7.5px;color:var(--texto3);margin-top:1px}
.mmod-tags{display:flex;gap:3px;margin-top:3px}
.mmod-tags span{font-size:6px;font-weight:900;padding:1px 4px;border-radius:3px;color:#fff;letter-spacing:.04em}
.ma64{background:linear-gradient(135deg,#10B981,#059669)}
.ma32{background:linear-gradient(135deg,#F97316,#C2410C)}
.mmod-selo{margin-left:auto;font-size:7.5px;font-weight:900;padding:3px 7px;border-radius:6px;align-self:flex-start}
.mmod-selo.vip{background:linear-gradient(180deg,#FFD65A,#E9A100);color:#231400}
.mmod-selo.free{background:linear-gradient(180deg,#3AD36A,#1f9f47);color:#04210f}
.mhint{margin:8px 12px 0;font-size:7.5px;color:var(--texto3);text-align:center}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion:reduce){
  .mcarrossel-pista{transition:none}
  .mlista-pista{animation:none}
  .mbanner-play{animation:none}
  .tubao::before,.tubao-glow,.tubao-nome,.tubao-tagline{animation:none}
}

/* ícone de marca dentro de botão/link herda a cor certa via bt_icone(cor) */
.btn svg,.rede svg{vertical-align:middle}
.rede-discord{color:#fff}
.rede-discord svg{color:#5865F2}

/* ------------------------ CARD BRAGATUBE (destaque) ------------------------ */
.tubao{position:relative;display:grid;grid-template-columns:1fr minmax(0,44%);gap:26px;align-items:center;
  margin:36px 0;padding:26px 30px;border-radius:26px;overflow:hidden;color:var(--texto);
  background:radial-gradient(120% 130% at 88% 10%,rgba(255,0,40,.22),transparent 55%),linear-gradient(120deg,#1e0410 0%,#2a0510 45%,#12030a 100%);
  border:1px solid rgba(255,0,40,.5);transition:transform .16s ease,box-shadow .16s ease;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 20px 60px rgba(0,0,0,.55),0 0 46px rgba(255,0,40,.22)}
.tubao:hover{transform:translateY(-3px);box-shadow:0 26px 70px rgba(0,0,0,.6),0 0 60px rgba(255,0,40,.34)}
.tubao::before{content:"";position:absolute;inset:0;border-radius:26px;padding:1.5px;pointer-events:none;z-index:3;
  background:linear-gradient(120deg,#FF0028,#FF6584,#FFD23D,#FF0028);background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.95;animation:tubao-borda 6s linear infinite}
@keyframes tubao-borda{to{background-position:300% 0}}
.tubao-glow{position:absolute;left:-60px;top:-40px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,0,40,.4),transparent 70%);filter:blur(24px);animation:tubao-pulsa 3.5s ease-in-out infinite}
@keyframes tubao-pulsa{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
.tubao-esq{position:relative;z-index:2;display:flex;gap:18px;align-items:flex-start;min-width:0}
.tubao-yt{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;flex:none;
  background:radial-gradient(closest-side,rgba(255,0,40,.35),rgba(0,0,0,.4));border:1px solid rgba(255,0,40,.55);
  box-shadow:0 0 30px rgba(255,0,40,.4)}
.tubao-yt svg{color:#FF0000;filter:drop-shadow(0 3px 10px rgba(255,0,40,.6))}
.tubao-txt{min-width:0}
.tubao-tag{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--ouro);
  background:rgba(255,210,61,.1);border:1px solid var(--borda-ouro);padding:4px 11px;border-radius:999px}
/* nome NEON ELÉTRICO (Braga 24/09: "maior destaque da home depois do herói") — texto cromado
   (branco->rosa->vermelho) com o BRILHO em volta pulsando/piscando feito raio elétrico. O texto em si
   fica sempre legível (gradiente opaco); só o glow externo (filter:drop-shadow, várias camadas) anima. */
.tubao-nome{display:block;margin-top:9px;font-size:clamp(30px,5.6vw,54px);font-weight:900;line-height:1;letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff 14%,#FFD9E0 45%,#FF2E60 78%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:tubao-neon 2.6s ease-in-out infinite}
.tubao-nome b{color:transparent}
@keyframes tubao-neon{
  0%,17%,21%,100%{filter:drop-shadow(0 0 7px rgba(255,23,68,.55)) drop-shadow(0 0 18px rgba(255,23,68,.4)) drop-shadow(0 2px 14px rgba(255,0,40,.4))}
  19%{filter:drop-shadow(0 0 2px rgba(255,23,68,.2))}
  55%{filter:drop-shadow(0 0 16px rgba(255,46,96,1)) drop-shadow(0 0 38px rgba(255,23,68,.85)) drop-shadow(0 2px 20px rgba(255,0,40,.65))}
}
/* selo grande da tagline — "O YouTube dos Hacks", pulsando ouro/neon junto do nome */
.tubao-tagline{display:inline-flex;align-items:center;gap:7px;margin-top:11px;padding:7px 16px;border-radius:999px;
  font-size:clamp(13px,1.7vw,16.5px);font-weight:900;letter-spacing:.03em;color:#FFEAB0;white-space:nowrap;
  background:linear-gradient(90deg,rgba(255,23,68,.2),rgba(255,210,61,.16));
  border:1px solid rgba(255,210,61,.55);text-shadow:0 0 10px rgba(255,210,61,.5);
  box-shadow:0 0 16px rgba(255,210,61,.25),inset 0 0 10px rgba(255,23,68,.14);
  animation:tagline-pulso 2.4s ease-in-out infinite}
@keyframes tagline-pulso{
  0%,100%{box-shadow:0 0 16px rgba(255,210,61,.25),inset 0 0 10px rgba(255,23,68,.14);transform:scale(1)}
  50%{box-shadow:0 0 28px rgba(255,210,61,.55),inset 0 0 18px rgba(255,23,68,.26);transform:scale(1.02)}
}
.tubao-sub{display:block;margin-top:10px;color:var(--texto2);font-size:14px;line-height:1.55;max-width:560px}
.tubao-sub b{color:var(--texto)}
.tubao-acoes{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.tubao-btn{padding:14px 24px;border-radius:16px;font-weight:900;font-size:15px;color:#fff;
  background:linear-gradient(180deg,#FF3B63,#D50E36);border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 30px rgba(213,14,54,.4);white-space:nowrap;transition:transform .12s}
.tubao:hover .tubao-btn{transform:translateY(-2px)}
.tubao-stat{font-size:12.5px;font-weight:800;color:var(--texto2)}
.tubao-stat b{color:var(--ouro)}
/* montagem de miniaturas reais dos vídeos */
.tubao-montagem{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;
  transform:perspective(1100px) rotateY(-7deg);transition:transform .3s ease}
.tubao:hover .tubao-montagem{transform:perspective(1100px) rotateY(-3deg)}
.tm-cel{position:relative;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:#000;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.tm-cel img{width:100%;height:100%;object-fit:cover;display:block}
.tm-play{position:absolute;inset:0;display:grid;place-items:center;font-size:16px;color:#fff;
  background:radial-gradient(closest-side,rgba(0,0,0,.35),transparent);opacity:.85;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.tubao-montagem-fade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#160309 0%,transparent 26%)}
@media (max-width:820px){
  .tubao{grid-template-columns:1fr;gap:18px}
  .tubao-montagem{grid-template-columns:repeat(3,1fr);transform:none}
  .tubao-montagem .tm-cel:nth-child(n+4){display:none}
  .tubao-montagem-fade{display:none}
}
@media (max-width:520px){ .tubao-esq{flex-direction:column} .tubao-yt{width:60px;height:60px} }

/* ------------------------ redes (selo final) ------------------------ */
.redes{display:flex;gap:10px;justify-content:flex-end;margin-bottom:14px}
.rede{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--borda);transition:transform .12s,border-color .12s,background .12s}
.rede:hover{transform:translateY(-2px)}
.rd-discord{color:#5865F2}.rd-discord:hover{border-color:#5865F2;background:rgba(88,101,242,.14)}
.rd-telegram{color:#26A5E4}.rd-telegram:hover{border-color:#26A5E4;background:rgba(38,165,228,.14)}
.rd-whatsapp{color:#25D366}.rd-whatsapp:hover{border-color:#25D366;background:rgba(37,211,102,.14)}
.rd-youtube{color:#FF0000}.rd-youtube:hover{border-color:#FF0000;background:rgba(255,0,0,.14)}

/* ------------------------------ RECURSOS ------------------------------ */
.recursos,.baixar-cel,.modders{margin:46px 0}
.grade-rec{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
.rec{background:linear-gradient(180deg,var(--card),var(--fundo2));border:1px solid var(--borda);border-radius:20px;padding:22px}
.rec:hover{border-color:var(--borda-neon)}
.rec-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:24px;margin-bottom:12px;
  background:radial-gradient(closest-side,rgba(255,23,68,.28),rgba(255,23,68,.05));border:1px solid var(--borda-neon)}
.rec h3{font-size:16px;font-weight:900}
.rec p{margin-top:7px;color:var(--texto2);font-size:13px;line-height:1.55}

/* ------------------------------ QR / BAIXAR ------------------------------ */
.baixar-cel{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  background:linear-gradient(120deg,#1b0710,#100309);border:1px solid var(--borda-neon);border-radius:26px;padding:30px 32px}
.baixar-txt p{margin-top:4px;color:var(--texto2);font-size:14px;line-height:1.6;max-width:460px}
.baixar-txt .btn{margin-top:18px}
.baixar-qr{text-align:center;flex:none}
.baixar-qr img{border-radius:16px;border:3px solid var(--ouro);background:#13040a;padding:8px;box-shadow:0 0 30px rgba(255,210,61,.2)}
.baixar-qr-l{margin-top:10px;font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--ouro)}

/* ------------------------------ MODDERS ------------------------------ */
.modders-sub{color:var(--texto3);font-size:13.5px;margin-top:4px}
.grade-mod{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
.modder{display:block;text-align:center;background:linear-gradient(180deg,var(--card),var(--fundo2));
  border:1px solid var(--borda);border-radius:22px;padding:26px 18px;transition:transform .14s,border-color .14s}
.modder:hover{transform:translateY(-4px);border-color:var(--borda-neon)}
.modder-ava{width:90px;height:90px;margin:0 auto;border-radius:50%;overflow:hidden;background:#000;
  border:2px solid var(--borda-neon);box-shadow:0 0 26px rgba(255,23,68,.3);display:grid;place-items:center;font-size:38px}
.modder-ava img{width:100%;height:100%;object-fit:cover}
.modder-nome{margin-top:14px;font-size:18px;font-weight:900;letter-spacing:.02em;text-transform:uppercase}
.modder-cargo{margin-top:4px;font-size:12.5px;font-weight:800;color:var(--azul)}
.modder-cargo.ouro{color:var(--ouro)}
.modder-desc{margin-top:6px;font-size:12px;color:var(--texto3)}

/* ------------------------------ SELO FINAL ------------------------------ */
.selo-final{margin:46px 0 10px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  border-top:1px solid var(--borda);padding-top:26px}
.selo-marca{display:flex;align-items:center;gap:12px}
.selo-marca .bt{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:18px;font-weight:900;color:#fff;
  background:linear-gradient(145deg,#7C3AED,#C30D33);border:1px solid rgba(255,255,255,.2);box-shadow:0 0 22px rgba(255,23,68,.3)}
.selo-marca b{font-size:19px;font-weight:900;display:block}
.selo-marca span{font-size:12px;color:var(--texto3)}
.selo-marca .cor{color:var(--neon)}
.selo-aviso{color:var(--texto3);font-size:12.5px;line-height:1.7;text-align:right}

/* ------------------------------ CELULAR ------------------------------ */
@media (max-width:920px){
  .fone{display:none}
  .grade-rec{grid-template-columns:1fr 1fr;gap:12px}
  .baixar-cel{grid-template-columns:1fr;text-align:center;padding:24px}
  .baixar-txt p{margin-inline:auto}
  .grade-mod{grid-template-columns:1fr}
  .selo-final{grid-template-columns:1fr;gap:16px;text-align:center}
  .selo-marca{justify-content:center}
  .selo-aviso{text-align:center}
  .redes{justify-content:center}
  .tubao{grid-template-columns:1fr;text-align:center;gap:14px;padding:24px}
  .tubao-yt{margin:0 auto}
  .tubao-sub{margin-inline:auto}
  .tubao-btn{justify-self:center}
}
@media (max-width:520px){
  .grade-rec{grid-template-columns:1fr}
}