/* =====================================================================
   mod.css — PÁGINA DO MOD (bt/mod.php), nível loja premium (Fable 5).
   Herói com ícone em moldura cromada girando, letreiro cromado, estrelas,
   botão neon pulsando; selos técnicos cromados; galeria com lightbox;
   FUNÇÕES DO MOD em grade por grupo com marcador neon e entrada animada;
   requisitos, descrição, changelog em linha do tempo, tags e "mais do modder".
   Só CSS + um JS pequeno (mod.js). Tudo respeita prefers-reduced-motion.
   ===================================================================== */

.mp{max-width:1100px;margin:14px auto 70px}
.mp-volta{display:inline-flex;align-items:center;gap:6px;color:var(--texto3);font-size:13px;font-weight:800;padding:8px 0;
  transition:color .15s ease,transform .15s ease}
.mp-volta:hover{color:var(--neon3);transform:translateX(-2px)}

/* ============================== HERÓI ============================== */
.mp-hero{position:relative;isolation:isolate;margin-top:8px;border-radius:30px;overflow:hidden;
  border:1px solid rgba(255,23,68,.34);
  background:linear-gradient(180deg,#1b0711,#0e0308);
  box-shadow:0 30px 80px rgba(0,0,0,.62),0 0 70px rgba(255,23,68,.13)}
/* capa do jogo desfocada como luz ambiente (respira devagar) */
.mp-hero-bg{position:absolute;inset:-60px;z-index:-2;background-size:cover;background-position:center;
  filter:blur(42px) saturate(1.35);opacity:.55;transform:scale(1.12);animation:mp-bg 22s ease-in-out infinite alternate}
@keyframes mp-bg{from{transform:scale(1.12) translate(0,0)}to{transform:scale(1.2) translate(-2%,2%)}}
.mp-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 70% at 20% 0,rgba(255,23,68,.18),transparent 60%),
             linear-gradient(180deg,rgba(11,2,6,.45),rgba(11,2,6,.9) 62%,#0e0308)}
/* fio de luz correndo pela borda (vermelho -> ouro -> rosa) */
.mp-hero::after{content:"";position:absolute;inset:0;border-radius:30px;padding:1.5px;pointer-events:none;z-index:6;
  background:linear-gradient(120deg,var(--neon),var(--ouro),var(--neon3),var(--neon));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:.85;animation:mp-borda 7s linear infinite}
@keyframes mp-borda{to{background-position:300% 0}}
.mp-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;gap:30px;padding:34px 34px 30px;align-items:start}

/* ícone do mod: moldura cromada girando + brilho pulsando + flutuação + tilt 3D (JS) */
.mp-icone-box{position:relative;perspective:900px;animation:mp-flutua 5.5s ease-in-out infinite}
@keyframes mp-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.mp-icone-box::after{content:"";position:absolute;inset:-22px;border-radius:50%;z-index:-1;filter:blur(20px);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,23,68,.5),rgba(255,210,61,.12) 60%,transparent 75%);animation:mp-glow 3s ease-in-out infinite}
@keyframes mp-glow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.mp-icone{position:relative;width:156px;height:156px;padding:4px;border-radius:42px;overflow:hidden;isolation:isolate;
  box-shadow:0 22px 46px rgba(0,0,0,.7);transition:transform .18s ease;transform-style:preserve-3d;will-change:transform}
.mp-icone::before{content:"";position:absolute;left:50%;top:50%;width:230%;aspect-ratio:1;border-radius:50%;z-index:-1;
  transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(var(--neon),#FFE98A,var(--ouro),var(--neon2),#fff,var(--neon));animation:mp-anel 7s linear infinite}
@keyframes mp-anel{to{transform:translate(-50%,-50%) rotate(360deg)}}
.mp-icone img,.mp-icone .semicone{width:100%;height:100%;border-radius:38px;object-fit:cover;background:#000;
  border:3px solid #0c0307;display:grid;place-items:center}
.mp-icone .semicone{background:radial-gradient(120% 120% at 50% 0,#2A0A16,#0a0206)}
.mp-icone-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
/* selo VIP / GRÁTIS grande (vidro cromado com brilho deslizante) */
.mp-selo-tipo{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:900;letter-spacing:.08em;
  padding:8px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.4);text-shadow:0 1px 1px rgba(0,0,0,.18);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.mp-selo-tipo::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%);animation:mp-shine 3.6s ease-in-out infinite}
@keyframes mp-shine{0%{transform:translateX(-140%)}55%,100%{transform:translateX(170%)}}
.mp-selo-tipo.vip{background:linear-gradient(135deg,#FFE98A,#F0B000 52%,#FFD24D);color:#2A1600;border-color:rgba(255,233,150,.9);
  box-shadow:0 6px 20px rgba(233,161,0,.5),inset 0 0 0 1px rgba(255,255,255,.3);animation:mp-vip 2.8s ease-in-out infinite}
@keyframes mp-vip{0%,100%{box-shadow:0 6px 20px rgba(233,161,0,.45)}50%{box-shadow:0 6px 28px rgba(255,210,61,.85)}}
.mp-selo-tipo.gratis{background:linear-gradient(135deg,#6DF39D,#10A03D);color:#04230f;border-color:rgba(130,255,175,.75);
  box-shadow:0 6px 18px rgba(57,255,106,.35),inset 0 0 0 1px rgba(255,255,255,.25)}

/* texto do herói */
.mp-hero-info{min-width:0}
.mp-eyebrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.mp-marca{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--ouro);
  padding:6px 13px 6px 7px;border-radius:999px;border:1px solid var(--borda-ouro);background:rgba(255,210,61,.08)}
.mp-marca .bt{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:9px;letter-spacing:0;color:#fff;
  background:linear-gradient(145deg,var(--neon2),#8E0B26);border:1px solid rgba(255,255,255,.22);box-shadow:0 0 12px rgba(255,23,68,.45)}
.mp-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:900;letter-spacing:.06em;padding:6px 12px;border-radius:999px;
  border:1px solid var(--borda);background:rgba(255,255,255,.05);color:var(--texto2)}
.mp-pill.destaque{color:#2A1600;border-color:rgba(255,241,199,.9);background:linear-gradient(135deg,#FFF6DC,#FFEAA6 20%,#EBB43A 52%,#D89A2A 70%,#FFD24D 100%);
  box-shadow:0 2px 10px rgba(233,161,0,.35),inset 0 1px 0 rgba(255,255,255,.55)}
.mp-pill.rank{color:#fff;border-color:rgba(255,255,255,.28);background:linear-gradient(180deg,var(--neon2),#C30D33);box-shadow:0 6px 16px rgba(213,14,54,.4)}
.mp-pill.beta{color:var(--azul);border-color:rgba(79,227,255,.35);background:rgba(79,227,255,.08)}
.mp-nome{font-size:clamp(28px,4.6vw,48px);font-weight:900;line-height:1.05;letter-spacing:-.01em;overflow-wrap:anywhere;
  background:linear-gradient(180deg,#fff 12%,#FFE3E9 40%,#FF8FA6 68%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(255,23,68,.38))}
.mp-dev{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px;font-size:13.5px;color:var(--texto3);font-weight:700}
.mp-dev a{display:inline-flex;align-items:center;gap:7px;color:var(--texto);font-weight:900;transition:color .15s}
.mp-dev a:hover{color:var(--neon3)}
.mp-dev a img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--borda-ouro);box-shadow:0 0 10px rgba(255,210,61,.35)}
.mp-dev .emp{color:var(--texto2)}
/* estrelas douradas com preenchimento proporcional (--p = % da nota) */
.mp-nota{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px}
.mp-estrelas{position:relative;display:inline-block;font-size:19px;line-height:1;letter-spacing:2px;color:rgba(255,255,255,.14);white-space:nowrap}
.mp-estrelas::before{content:"★★★★★";position:absolute;left:0;top:0;width:var(--p,0%);overflow:hidden;white-space:nowrap;color:var(--ouro);
  text-shadow:0 0 10px rgba(255,210,61,.65)}
.mp-nota .num{font-size:18px;font-weight:900;color:var(--ouro);text-shadow:0 0 12px rgba(255,210,61,.4)}
.mp-nota .chip{font-weight:800}
.mp-nota .chip.genero{color:#2A1B00;border-color:rgba(255,241,199,.95);
  background:linear-gradient(135deg,#FFF6DC 0%,#FFEAA6 20%,#EBB43A 52%,#D89A2A 70%,#FFD24D 100%);
  box-shadow:0 2px 9px rgba(233,161,0,.3),inset 0 1px 0 rgba(255,255,255,.55);font-weight:900}
.mp-nota .chip.genero .gen-ic{filter:drop-shadow(0 1px 1px rgba(255,255,255,.45))}
.mp-nota .chip.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))}

/* ações: botão principal NEON PULSANDO + secundários + ❤/☆ */
.mp-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.mp-cta{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;
  padding:15px 30px;border-radius:18px;color:#fff;font-weight:900;font-size:16px;letter-spacing:.03em;line-height:1.1;text-decoration:none;
  background:linear-gradient(180deg,#FF3B63,#D50E36);border:1px solid rgba(255,255,255,.32);
  box-shadow:0 14px 34px rgba(213,14,54,.45),0 0 0 0 rgba(255,23,68,.7);animation:mp-pulso 2.2s ease-out infinite;
  transition:transform .14s ease}
.mp-cta:hover{transform:translateY(-2px) scale(1.02)}
.mp-cta:active{transform:translateY(0) scale(.98)}
.mp-cta small{font-size:10.5px;font-weight:800;opacity:.92;letter-spacing:.08em}
.mp-cta::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-140%) skewX(-16deg);
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.55) 48%,transparent 60%);animation:mp-shine 2.8s ease-in-out infinite}
@keyframes mp-pulso{
  0%{box-shadow:0 14px 34px rgba(213,14,54,.45),0 0 0 0 rgba(255,23,68,.7)}
  70%{box-shadow:0 14px 34px rgba(213,14,54,.45),0 0 0 18px rgba(255,23,68,0)}
  100%{box-shadow:0 14px 34px rgba(213,14,54,.45),0 0 0 0 rgba(255,23,68,0)}}
.mp-cta.ouro{background:linear-gradient(180deg,#FFD65A,#E9A100);color:#231400;border-color:rgba(255,255,255,.45);
  box-shadow:0 14px 34px rgba(233,161,0,.4),0 0 0 0 rgba(255,210,61,.7);animation-name:mp-pulso-ouro}
@keyframes mp-pulso-ouro{
  0%{box-shadow:0 14px 34px rgba(233,161,0,.4),0 0 0 0 rgba(255,210,61,.7)}
  70%{box-shadow:0 14px 34px rgba(233,161,0,.4),0 0 0 18px rgba(255,210,61,0)}
  100%{box-shadow:0 14px 34px rgba(233,161,0,.4),0 0 0 0 rgba(255,210,61,0)}}
.mp-acoes .btn.vidro{padding:13px 18px;border-radius:16px}
.mp-acoes .bt-social{margin-left:auto}
.mp-dica{margin-top:10px;font-size:12px;color:var(--texto3)}
.mp-dica a{color:var(--neon3);font-weight:800}

/* números do mod (downloads / curtidas / visualizações / funções) */
.mp-numeros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.mp-num{position:relative;overflow:hidden;text-align:center;padding:16px 10px 13px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--borda);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.mp-num::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--neon) 30%,var(--ouro) 60%,transparent);opacity:.55}
.mp-num:hover{transform:translateY(-3px);border-color:var(--borda-ouro);box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 18px rgba(255,210,61,.12)}
.mp-num .v{font-size:26px;font-weight:900;color:var(--ouro);text-shadow:0 0 16px rgba(255,210,61,.35);line-height:1}
.mp-num .l{font-size:10.5px;letter-spacing:.14em;font-weight:800;color:var(--texto3);margin-top:6px;overflow-wrap:break-word}
.mp-num.neon .v{color:#FF8FA6;text-shadow:0 0 16px rgba(255,23,68,.45)}
.mp-num.azul .v{color:var(--azul);text-shadow:0 0 16px rgba(79,227,255,.35)}

/* ============================ SELOS TÉCNICOS ============================ */
.mp-selos{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.mp-selo{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:900;letter-spacing:.05em;
  padding:9px 14px;border-radius:12px;color:#fff;border:1px solid rgba(255,255,255,.24);white-space:nowrap;
  box-shadow:0 5px 16px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 6px rgba(0,0,0,.22);
  transition:transform .16s ease,box-shadow .16s ease}
.mp-selo:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.4)}
.mp-selo::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-160%) skewX(-18deg);
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 48%,rgba(255,255,255,.85) 52%,transparent 70%);
  animation:mp-cromo 5.6s ease-in-out infinite}
.mp-selo:nth-child(6n+2)::after{animation-delay:.9s}.mp-selo:nth-child(6n+3)::after{animation-delay:1.8s}
.mp-selo:nth-child(6n+4)::after{animation-delay:2.7s}.mp-selo:nth-child(6n+5)::after{animation-delay:3.6s}.mp-selo:nth-child(6n)::after{animation-delay:4.5s}
@keyframes mp-cromo{0%,22%{transform:translateX(-160%) skewX(-18deg)}45%,100%{transform:translateX(160%) skewX(-18deg)}}
.mp-selo .r{font-size:9px;font-weight:800;letter-spacing:.14em;opacity:.8}
.mp-selo.x64{background:linear-gradient(135deg,#6EE7B7,#059669 55%,#10B981)}
.mp-selo.x32{background:linear-gradient(135deg,#FDBA74,#C2410C 55%,#F97316)}
.mp-selo.zygisk{background:linear-gradient(135deg,#C4B5FD,#5B21B6 55%,#8B5CF6)}
.mp-selo.apk{background:linear-gradient(135deg,#F8FAFC,#94A3B8 45%,#475569 70%,#CBD5E1);color:#0f172a;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.mp-selo.ouro{background:linear-gradient(135deg,#FFF6DC,#FFE9A8 22%,#E9A100 55%,#D89A2A 72%,#FFD24D);color:#2A1600;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.mp-selo.prata{background:linear-gradient(135deg,#FFFFFF,#D7DEE8 30%,#8A96A8 60%,#E5EAF2);color:#141A24;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.mp-selo.vinho{background:linear-gradient(135deg,#4a0f22,#1e0610);color:var(--texto2);border-color:var(--borda-neon)}
.mp-selo.neon{background:linear-gradient(180deg,var(--neon2),#C30D33)}

/* ============================== SEÇÕES ============================== */
.mp-sec{margin:34px 0 0}
.mp-sec-cab{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.mp-sec-cab .ic{width:46px;height:46px;flex:none;border-radius:15px;display:grid;place-items:center;font-size:22px;
  background:radial-gradient(120% 120% at 50% 0,#3a0a1c,#12040a);border:1px solid var(--borda-neon);
  box-shadow:0 0 22px rgba(255,23,68,.28),inset 0 0 12px rgba(255,23,68,.15)}
.mp-sec-cab h2{font-size:22px;font-weight:900;letter-spacing:.02em;
  background:linear-gradient(180deg,#FFF6DC 10%,#FFD24D 50%,#E9A100 80%,#FFF1BF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(255,210,61,.22))}
.mp-sec-cab .sub{font-size:12.5px;color:var(--texto3);font-weight:700;margin-top:2px}
.mp-sec-cab .tt{min-width:0}
.mp-total{margin-left:auto;font-size:13px;font-weight:900;letter-spacing:.04em;padding:8px 15px;border-radius:999px;
  background:linear-gradient(135deg,#FFE98A,#F0B000 52%,#FFD24D);color:#2A1600;box-shadow:0 6px 18px rgba(233,161,0,.4);white-space:nowrap;
  animation:mp-vip 2.8s ease-in-out infinite}
.mp-fio{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--neon),var(--ouro),transparent);margin:14px 0 18px}

/* ============================== GALERIA ============================== */
.mp-galeria{position:relative}
.mp-pista{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 2px 14px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);mask-image:linear-gradient(90deg,#000 94%,transparent)}
.mp-pista::-webkit-scrollbar{display:none}
.mp-shot{position:relative;flex:none;height:250px;border-radius:18px;overflow:hidden;border:1px solid var(--borda);scroll-snap-align:start;
  background:#000;cursor:zoom-in;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s}
.mp-shot img{height:100%;width:auto;max-width:none;display:block;object-fit:cover}
.mp-shot::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,transparent,var(--neon) 28%,var(--ouro) 55%,var(--neon2) 80%,transparent);opacity:0;transition:opacity .25s}
.mp-shot:hover{transform:translateY(-4px);border-color:var(--borda-neon);box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 26px rgba(255,23,68,.25)}
.mp-shot:hover::after{opacity:1}
.mp-shot .lupa{position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;
  background:rgba(10,2,6,.75);border:1px solid var(--borda-ouro);color:var(--ouro);opacity:0;transition:opacity .2s}
.mp-shot:hover .lupa{opacity:1}
.mp-seta{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;display:none;place-items:center;cursor:pointer;z-index:3;
  border:1px solid var(--borda-ouro);background:rgba(12,3,7,.88);color:var(--ouro);font-size:18px;font-weight:900;backdrop-filter:blur(4px);
  box-shadow:0 8px 22px rgba(0,0,0,.5);transition:transform .15s,box-shadow .15s}
.mp-js .mp-seta{display:grid}
.mp-seta:hover{transform:translateY(-50%) scale(1.08);box-shadow:0 8px 26px rgba(0,0,0,.6),0 0 18px rgba(255,210,61,.35)}
.mp-seta.esq{left:-10px}.mp-seta.dir{right:-10px}
.mp-lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;cursor:zoom-out;
  background:rgba(5,1,3,.94);backdrop-filter:blur(10px);animation:mp-fade .2s ease}
@keyframes mp-fade{from{opacity:0}to{opacity:1}}
.mp-lightbox img{max-width:min(96vw,1200px);max-height:88vh;width:auto;height:auto;border-radius:16px;border:1px solid var(--borda-neon);
  box-shadow:0 30px 90px rgba(0,0,0,.8),0 0 60px rgba(255,23,68,.28);animation:mp-zoom .25s cubic-bezier(.2,.7,.2,1)}
@keyframes mp-zoom{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.mp-lightbox .fechar{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:20px;
  color:#fff;background:rgba(255,23,68,.25);border:1px solid var(--borda-neon)}

/* ========================= FUNÇÕES DO MOD ========================= */
.mp-grupos{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.mp-grupo{position:relative;isolation:isolate;border-radius:22px;padding:18px 18px 12px;border:1px solid var(--borda);
  background:radial-gradient(120% 80% at 50% -10%,rgba(255,23,68,.13),transparent 60%),linear-gradient(180deg,var(--card2),var(--fundo2));
  box-shadow:0 14px 34px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s}
.mp-grupo::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:22px 22px 0 0;
  background:linear-gradient(90deg,transparent,var(--neon) 28%,var(--ouro) 55%,var(--neon2) 80%,transparent);opacity:.55;transition:opacity .25s}
.mp-grupo:hover{transform:translateY(-4px);border-color:var(--borda-neon);box-shadow:0 22px 50px rgba(0,0,0,.6),0 0 30px rgba(255,23,68,.22)}
.mp-grupo:hover::before{opacity:1}
.mp-grupo.largo{grid-column:1/-1}
.mp-grupo.largo .mp-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 10px}
.mp-grupo-cab{display:flex;align-items:center;gap:11px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,210,61,.14)}
.mp-grupo-cab .em{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:21px;
  background:linear-gradient(145deg,rgba(255,23,68,.3),rgba(255,23,68,.06));border:1px solid var(--borda-neon);
  box-shadow:inset 0 0 14px rgba(255,23,68,.2),0 4px 14px rgba(0,0,0,.4);text-shadow:0 2px 6px rgba(0,0,0,.5)}
.mp-grupo-cab h3{font-size:16px;font-weight:900;letter-spacing:.01em;min-width:0;
  background:linear-gradient(180deg,#fff 14%,#FFEAD0 52%,#FFD79A 76%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mp-grupo-cab .qt{margin-left:auto;flex:none;font-size:11px;font-weight:900;padding:4px 10px;border-radius:999px;
  background:rgba(255,210,61,.1);border:1px solid var(--borda-ouro);color:var(--ouro)}
.mp-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.mp-func{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:12px;font-size:13.5px;font-weight:700;color:var(--texto2);line-height:1.4;
  border:1px solid transparent;overflow-wrap:anywhere;transition:background .2s,border-color .2s,color .2s,transform .2s}
.mp-func:hover{background:rgba(255,23,68,.08);border-color:rgba(255,23,68,.28);color:var(--texto);transform:translateX(4px)}
/* marcador: losango neon pulsando (cada um num tempo) */
.mp-marc{flex:none;width:10px;height:10px;margin-top:5px;transform:rotate(45deg);border-radius:2px;
  background:linear-gradient(135deg,#FF8FA6,var(--neon) 55%,#B0071F);border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 8px rgba(255,23,68,.7);animation:mp-marc 2.6s ease-in-out infinite}
@keyframes mp-marc{0%,100%{box-shadow:0 0 6px rgba(255,23,68,.55)}50%{box-shadow:0 0 14px rgba(255,23,68,1),0 0 24px rgba(255,23,68,.45)}}
.mp-func:nth-child(4n+2) .mp-marc{animation-delay:.65s}.mp-func:nth-child(4n+3) .mp-marc{animation-delay:1.3s}.mp-func:nth-child(4n) .mp-marc{animation-delay:1.95s}
.mp-func:hover .mp-marc{background:linear-gradient(135deg,#FFF6DC,var(--ouro) 55%,#B37A00);box-shadow:0 0 14px rgba(255,210,61,.9)}
/* entrada animada (só quando o JS liga .mp-js; sem JS tudo aparece na hora) */
.mp-js .mp-func{opacity:0;transform:translateY(10px)}
.mp-js .mp-func.vis{opacity:1;transform:none;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1),background .2s,border-color .2s,color .2s;
  transition-delay:calc(var(--i,0)*45ms),calc(var(--i,0)*45ms),0s,0s,0s}
.mp-js .mp-func.vis:hover{transform:translateX(4px);transition-delay:0s}
.mp-js .mp-grupo{opacity:0;transform:translateY(16px)}
.mp-js .mp-grupo.vis{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .25s}
.mp-js .mp-grupo.vis:hover{transform:translateY(-4px)}
.mp-sem-funcoes{padding:22px;border-radius:18px;border:1px dashed var(--borda);color:var(--texto3);font-size:13.5px;text-align:center}

/* ============================ REQUISITOS ============================ */
.mp-reqs{display:flex;flex-wrap:wrap;gap:10px}
.mp-req{display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 9px;border-radius:14px;font-size:13px;font-weight:800;color:var(--texto);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--borda);transition:transform .15s,border-color .15s}
.mp-req:hover{transform:translateY(-2px);border-color:var(--borda-ouro)}
.mp-req .em{font-size:16px;width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:10px;
  background:rgba(255,210,61,.1);border:1px solid var(--borda-ouro)}

/* ============================== SOBRE ============================== */
.mp-sobre{position:relative;padding:22px 26px;border-radius:22px;border:1px solid var(--borda);border-left:3px solid var(--ouro);
  background:linear-gradient(180deg,var(--card),var(--fundo2));color:var(--texto2);font-size:14.5px;line-height:1.8;white-space:pre-line;
  box-shadow:var(--sombra)}
.mp-sobre::before{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,23,68,.16),transparent 70%);filter:blur(10px)}
.mp-sobre-idioma{margin-top:8px;font-size:11.5px;color:var(--texto3)}

/* ============================ CHANGELOG ============================ */
.mp-timeline{position:relative;padding-left:28px}
.mp-timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--ouro),var(--neon) 40%,rgba(255,23,68,.05))}
.mp-cl{position:relative;padding:0 0 18px}
.mp-cl::before{content:"";position:absolute;left:-25px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--neon);
  border:2px solid #0e0308;box-shadow:0 0 12px rgba(255,23,68,.8)}
.mp-cl.atual::before{background:var(--ouro);box-shadow:0 0 14px rgba(255,210,61,.9);animation:mp-ponto 2s ease-in-out infinite}
@keyframes mp-ponto{0%,100%{box-shadow:0 0 8px rgba(255,210,61,.6)}50%{box-shadow:0 0 18px rgba(255,210,61,1),0 0 30px rgba(255,210,61,.4)}}
.mp-cl-cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mp-cl-ver{font-weight:900;font-size:15px;color:var(--texto)}
.mp-cl-ver b{color:var(--neon3)}
.mp-cl-data{font-size:12px;color:var(--texto3);font-weight:700}
.mp-cl-atual{font-size:10px;font-weight:900;letter-spacing:.1em;padding:3px 9px;border-radius:999px;
  background:linear-gradient(135deg,#FFE98A,#F0B000);color:#2A1600;box-shadow:0 3px 10px rgba(233,161,0,.4)}
.mp-cl-txt{margin-top:6px;color:var(--texto2);font-size:13.5px;line-height:1.65;white-space:pre-line}
.mp-mais summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;color:var(--neon3);font-weight:800;font-size:13px;
  padding:8px 14px;border-radius:999px;border:1px solid var(--borda-neon);background:rgba(255,23,68,.06);margin-left:-28px;user-select:none}
.mp-mais summary::-webkit-details-marker{display:none}
.mp-mais[open] summary{margin-bottom:14px}
.mp-mais[open] summary .abrir{display:none}
.mp-mais:not([open]) summary .fechar{display:none}

/* =============================== TAGS =============================== */
.mp-tags{display:flex;flex-wrap:wrap;gap:8px}
.mp-tags .chip{font-weight:800;color:var(--azul);border-color:rgba(79,227,255,.34);
  background:linear-gradient(180deg,rgba(79,227,255,.13),rgba(79,227,255,.05));transition:transform .14s,box-shadow .14s}
.mp-tags .chip:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.4),0 0 14px rgba(79,227,255,.2)}

/* ============================ CTA FINAL ============================ */
.mp-final{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:24px 26px;border-radius:26px;
  border:1px solid var(--borda-neon);background:linear-gradient(120deg,rgba(255,23,68,.16),rgba(255,210,61,.06) 60%,transparent),linear-gradient(180deg,#1b0711,#0e0308);
  box-shadow:0 20px 50px rgba(0,0,0,.5)}
.mp-final .ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:28px;
  background:linear-gradient(145deg,var(--neon2),#8E0B26);box-shadow:0 0 30px rgba(255,23,68,.45);border:1px solid rgba(255,255,255,.2)}
.mp-final h3{font-size:19px;font-weight:900}
.mp-final p{color:var(--texto2);font-size:13px;margin-top:4px;line-height:1.55}
.mp-final .acoes{display:flex;gap:10px;flex-wrap:wrap}

/* ============================== CELULAR ============================== */
@media (max-width:820px){
  .mp-hero-grid{grid-template-columns:1fr;gap:20px;padding:26px 20px 22px;justify-items:center;text-align:center}
  .mp-hero-info{width:100%}
  .mp-eyebrow,.mp-dev,.mp-nota,.mp-acoes{justify-content:center}
  .mp-acoes .bt-social{margin-left:0;width:100%;justify-content:center}
  .mp-cta{width:100%}
  .mp-numeros{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mp-num .v{font-size:22px}
  .mp-selos{justify-content:center}
  .mp-grupos{grid-template-columns:1fr}
  .mp-grupo.largo .mp-lista{grid-template-columns:1fr}
  .mp-shot{height:200px}
  .mp-seta.esq{left:2px}.mp-seta.dir{right:2px}
  .mp-final{grid-template-columns:auto 1fr;gap:14px;padding:18px}
  .mp-final .acoes{grid-column:1/-1}
  .mp-final .acoes .btn,.mp-final .acoes .mp-cta{flex:1;justify-content:center}
}
@media (max-width:560px){
  .mp-hero{border-radius:22px}
  .mp-hero::after{border-radius:22px}
  .mp-icone{width:128px;height:128px;border-radius:36px}
  .mp-icone img,.mp-icone .semicone{border-radius:32px}
  .mp-nome{font-size:clamp(26px,8vw,34px)}
  .mp-sec-cab h2{font-size:19px}
  .mp-sec-cab .ic{width:40px;height:40px;font-size:19px;border-radius:13px}
  .mp-total{margin-left:0;font-size:12px;padding:6px 12px}
  .mp-selo{font-size:10.5px;padding:8px 11px}
  .mp-func{font-size:13px;padding:7px 8px}
  .mp-sobre{padding:18px;font-size:14px}
  .mp-shot{height:170px}
}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion:reduce){
  .mp-hero-bg,.mp-hero::after,.mp-icone-box,.mp-icone-box::after,.mp-icone::before,.mp-selo-tipo::after,.mp-selo-tipo.vip,
  .mp-cta,.mp-cta::after,.mp-cta.ouro,.mp-selo::after,.mp-total,.mp-marc,.mp-cl.atual::before,.mp-lightbox,.mp-lightbox img{animation:none}
  .mp-js .mp-func,.mp-js .mp-grupo{opacity:1;transform:none;transition:none}
  .mp-icone{transition:none}
  .mp-pista{scroll-behavior:auto}
}