/* ===== Prévia dos 4 modelos — casca comum (barra, transição, cursor, utilidades) =====
   Layout: cada modelo ocupa #app inteiro; a barra flutua por cima, embaixo e no centro. */
:root {
  --bar-bg: rgba(12, 14, 24, 0.78);
  --bar-line: rgba(255, 255, 255, 0.14);
  --bar-text: #f4f3ff;
  --bar-dim: rgba(244, 243, 255, 0.62);
  --wipe-top: #e3350d;
  --wipe-bottom: #f5f3ee;
  --wipe-band: #12121a;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
#app { position: relative; min-height: 100vh; isolation: isolate; }
#app *, #app *::before, #app *::after, #pwu-bar *, #pwu-intro *, #pwu-wipe * { box-sizing: border-box; }
#app img { max-width: none; }               /* o esqueleto do link aperta imagens maiores que a caixa */
#app img.fit { max-width: 100%; }
#app a { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* palavras/linhas/letras divididas */
.w { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w > .wi { display: inline-block; will-change: transform; }
.wc { display: inline-block; }
.c { display: inline-block; will-change: transform; }

/* ondinha de clique em qualquer botão */
.rp { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0); background: currentColor; opacity: 0.28; }

/* brilho que segue o cursor nos cards 3D */
.glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, var(--ga, 0.32)), transparent 45%); mix-blend-mode: soft-light; z-index: 5; }
.tilting .glare { opacity: 1; }

/* ===== cursor próprio ===== */
#pwu-cursor { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; display: none; }
.pwu-cursor-on #pwu-cursor { display: block; }
/* 07/11: um cursor só em todo o site (nada mostra a mãozinha junto com a bola); campos ficam com o cursor normal e a bola some */
.pwu-cursor-on, .pwu-cursor-on *:not(input):not(select):not(textarea) { cursor: none !important; }
.pwu-cursor-on input, .pwu-cursor-on select, .pwu-cursor-on textarea { cursor: auto !important; }
#pwu-cursor { --ring: 34; --ring-h: 64; }
#pwu-cursor .c-dot, #pwu-cursor .c-ring { position: absolute; left: 0; top: 0; }
#pwu-cursor .c-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; transition: opacity .2s, background-color .3s; }
#pwu-cursor .c-ring { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7);
  display: grid; place-items: center; transition: background-color .35s, border-color .35s, scale .2s; }
#pwu-cursor .c-label { font: 600 11px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .3s; white-space: nowrap; }
#pwu-cursor.is-label .c-label { opacity: 1; transform: none; }
#pwu-cursor.is-down .c-ring { scale: .84; }
#pwu-cursor.is-hidden, #pwu-cursor.is-campo { opacity: 0; }
#pwu-cursor.is-lock .c-dot { opacity: 0; }

/* ===== ponteiro-pokébola (escolhido na barra) ===== */
/* 07/11 (dono: "veja o tamanho dela... se necessário diminua"): 38 px (49 px em cima de link) cobria os links pequenos e os idiomas PT/EN/ES; agora 28 px (31 px em cima de link) */
#pwu-cursor .c-ball { position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: none; }
#pwu-cursor.has-ball .c-ball { display: block; }
#pwu-cursor.has-ball .c-dot, #pwu-cursor.has-ball .c-ring { opacity: 0 !important; }
#pwu-cursor .c-ball-in { position: absolute; inset: 0; transform-origin: 50% 88%; transition: scale .42s cubic-bezier(.34, 1.56, .64, 1); }
#pwu-cursor .c-ball img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); transition: filter .35s; }
#pwu-cursor .c-ball .glint { position: absolute; inset: 4.5%; border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) 160% 0 / 320% 100% no-repeat; }
#pwu-cursor .c-ball.wobble .c-ball-in { animation: pwu-ball-wobble 3.4s cubic-bezier(.36, .07, .19, .97) infinite; }
#pwu-cursor .c-ball.wobble .glint { opacity: 1; animation: pwu-ball-glint 3.4s cubic-bezier(.4, 0, .2, 1) infinite; }
#pwu-cursor .c-ball.plana .glint { display: none; }   /* a 2D é plana: sem o brilho que passa (dava o ar de 3D) */
#pwu-cursor.has-ball.is-hover .c-ball-in { scale: 1.12; }
#pwu-cursor.has-ball.is-hover .c-ball img { filter: drop-shadow(0 0 6px var(--pwu-acc, #fff)) drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
#pwu-cursor.has-ball.is-hover .c-ball.wobble .c-ball-in { animation-duration: 1.5s; }
#pwu-cursor.has-ball.is-down .c-ball-in { scale: .8; transition-duration: .12s; }
#pwu-cursor .c-ball-lbl { position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-6px, -50%); white-space: nowrap; opacity: 0;
  font: 700 11px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(12, 14, 24, .86);
  border: 1px solid rgba(255, 255, 255, .18); padding: 6px 9px; border-radius: 999px; transition: opacity .25s, transform .3s; }
#pwu-cursor.has-ball.is-label .c-ball-lbl { opacity: 1; transform: translate(0, -50%); }
#pwu-cursor .c-burst { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--pwu-acc, #fff); box-shadow: 0 0 14px var(--pwu-acc, #fff), inset 0 0 10px var(--pwu-acc, #fff); }
@keyframes pwu-ball-wobble { 0%, 52%, 100% { rotate: 0deg; } 57% { rotate: -17deg; } 63% { rotate: 14deg; } 69% { rotate: -10deg; } 75% { rotate: 6deg; } 81% { rotate: -2deg; } 86% { rotate: 0deg; } }
/* segurar o clique = CAPTURA (easter egg, 06/11): balança 3 vezes como na captura e fecha com estalo, anel e estrelinhas */
#pwu-cursor.has-ball.is-hold .c-ball .c-ball-in { animation: pwu-ball-captura .55s cubic-bezier(.36, .07, .19, .97) 3; scale: .92; }
#pwu-cursor.has-ball.is-catch .c-ball .c-ball-in { animation: pwu-ball-catch .7s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pwu-ball-captura { 0%, 100% { rotate: 0deg; } 22% { rotate: -26deg; } 50% { rotate: 22deg; } 74% { rotate: -8deg; } }
@keyframes pwu-ball-catch { 0% { scale: .8; } 30% { scale: 1.4; } 55% { scale: .94; } 78% { scale: 1.06; } 100% { scale: 1; } }
#pwu-cursor .c-burst--catch { border-color: #ffe14d; box-shadow: 0 0 18px #ffe14d, inset 0 0 12px #ffe14d; }
#pwu-cursor .c-star { position: absolute; left: 0; top: 0; width: 16px; height: 16px; pointer-events: none; background: #ffe14d;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
@keyframes pwu-ball-glint { 0%, 30% { background-position: 160% 0; } 48%, 100% { background-position: -60% 0; } }

/* seletor de ponteiro (popover acima da barra) */
#pwu-bar .cur-pop, #pwu-bar .ab-pop { position: absolute; left: 50%; bottom: calc(100% + 12px); width: min(600px, calc(100vw - 24px)); padding: 16px 16px 14px; border-radius: 20px;
  background: rgba(12, 14, 24, .94); border: 1px solid var(--bar-line); box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px) scale(.98); transform-origin: 50% 100%;
  transition: opacity .28s cubic-bezier(.2, .8, .2, 1), transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s .38s; }
#pwu-bar .cur-pop.open, #pwu-bar .ab-pop.open { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
/* seletor de abertura do Modelo 4: 4 miniaturas 16:9 */
#pwu-bar .ab-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#pwu-bar .ab { position: relative; display: grid; gap: 8px; padding: 8px; border-radius: 14px; border: 1px solid transparent; background: rgba(255, 255, 255, .04); color: inherit; font: inherit; text-align: left;
  transition: background-color .25s, border-color .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
#pwu-bar .ab:hover { background: rgba(255, 255, 255, .09); transform: translateY(-3px); }
#pwu-bar .ab.on { border-color: var(--acc, #fff); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
#pwu-bar .ab .th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #0b0b0c; }
#pwu-bar .ab.wide { grid-column: 1 / -1; }
#pwu-bar .ab-pop { max-height: calc(100vh - 120px); overflow-y: auto; }
/* painel Opções em abas (Abertura · Treinadora · Pikachu · Passos · Faixa · Arceus · Comunidade): controle segmentado no
   topo, uma seção por vez. Com 7 abas o painel fica um pouco mais largo (os nomes cabem inteiros); no celular as abas rolam. */
#pwu-bar .ab-pop { width: min(700px, calc(100vw - 24px)); }
#pwu-bar .op-abas { display: flex; gap: 3px; padding: 4px; margin: 0 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
#pwu-bar .op-aba { flex: 1 1 auto; min-width: 0; padding: 9px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--bar-dim); font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background-color .2s ease, color .2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pwu-bar .op-aba:hover { color: rgba(244, 243, 255, .95); }
#pwu-bar .op-aba.on { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset; }
#pwu-bar .op-aba:focus-visible { outline: 2px solid var(--acc, #fff); outline-offset: 1px; }
@media (max-width: 760px) { #pwu-bar .op-abas { overflow-x: auto; scrollbar-width: none; } #pwu-bar .op-aba { flex: none; } }
#pwu-bar .op-g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#pwu-bar .ab.op .th { aspect-ratio: 4 / 5; }
#pwu-bar .op-g.larga .ab.op .th { aspect-ratio: 16 / 10; }   /* aba Passos: a seção é larga */
/* abas Pacote 5 e Pacote 6: 10 versões em 5 colunas, a arte inteira (contain) num fundo de cartão */
#pwu-bar .op-g.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#pwu-bar .op-g.cinco .ab.op { padding: 6px; gap: 6px; }
#pwu-bar .op-g.cinco .ab.op .th { aspect-ratio: 1; background: radial-gradient(closest-side, #26262e, #121216); }
#pwu-bar .op-g.cinco .ab .th img { object-fit: contain; padding: 3px; }
#pwu-bar .op-g.cinco .ab.cena .th img { object-fit: cover; padding: 0; }   /* pacotes 5/6: as cenas pintadas ocupam a miniatura */
#pwu-bar .op-g.cinco .ab .nm { font-size: 11px; line-height: 1.25; }
@media (max-width: 760px) { #pwu-bar .op-g.cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#pwu-bar .ab.wide .th { aspect-ratio: 16 / 5; }
#pwu-bar .ab .th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
#pwu-bar .ab:hover .th img { transform: scale(1.06); }
#pwu-bar .ab .pl { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 1.5px solid rgba(255, 255, 255, .8);
  opacity: 0; transform: scale(.8); transition: opacity .25s, transform .3s; }
#pwu-bar .ab .pl::after { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 6.5px 0 6.5px 10px; border-color: transparent transparent transparent #fff; }
#pwu-bar .ab:hover .pl, #pwu-bar .ab:focus-visible .pl { opacity: 1; transform: none; }
#pwu-bar .ab .nm { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: rgba(244, 243, 255, .9); }
#pwu-bar .ab .nm b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: 11px; background: rgba(255, 255, 255, .1); }
#pwu-bar .ab.on .nm b { background: var(--acc, #fff); color: #0b0b0c; }
#pwu-bar .tb[data-act="abertura"].on { color: var(--acc, #ffd34d); background: rgba(255, 255, 255, .1); }
#pwu-bar .cp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px 12px; }
#pwu-bar .op-g + .cp-h { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .07); }   /* 2º grupo na mesma aba (Fundo → Raio) */
#pwu-bar .cp-h b { font-size: 14px; letter-spacing: .01em; }
#pwu-bar .cp-h span { font-size: 11.5px; color: var(--bar-dim); }
#pwu-bar .cp-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
#pwu-bar .co { position: relative; display: grid; justify-items: center; gap: 7px; padding: 10px 4px 9px; border-radius: 14px; border: 1px solid transparent;
  background: rgba(255, 255, 255, .04); color: inherit; font: inherit; transition: background-color .25s, border-color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
#pwu-bar .co:hover { background: rgba(255, 255, 255, .09); transform: translateY(-3px); }
#pwu-bar .co.on { border-color: var(--acc, #fff); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
#pwu-bar .co .pv { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 70%); }
#pwu-bar .co .pv img { width: 42px; height: 42px; display: block; transform-origin: 50% 88%; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .4)); }
#pwu-bar .co.wob .pv img { animation: pwu-ball-wobble 3.4s cubic-bezier(.36, .07, .19, .97) infinite; animation-delay: var(--d, 0s); }
#pwu-bar .co .pv-def i { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .75); position: relative; }
#pwu-bar .co .pv-def i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff; }
#pwu-bar .co .nm { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.15; color: rgba(244, 243, 255, .86); }
#pwu-bar .tb[data-act="cursor"].on { color: var(--acc, #ffd34d); background: rgba(255, 255, 255, .1); }
html.pwu-light #pwu-bar .co.wob .pv img { animation: none; }

/* ===== barra flutuante dos modelos ===== */
#pwu-bar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 2147482000;
  font: 500 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--bar-text); }
#pwu-bar .bar-in { display: flex; align-items: stretch; gap: 6px; padding: 6px; border-radius: 18px; background: var(--bar-bg);
  border: 1px solid var(--bar-line); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
#pwu-bar .mb { position: relative; display: flex; align-items: center; gap: 10px; min-width: 132px; padding: 8px 12px 8px 10px; border-radius: 13px;
  border: 1px solid transparent; background: transparent; color: inherit; font: inherit; text-align: left; overflow: hidden;
  transition: background-color .25s, border-color .25s, transform .2s; }
#pwu-bar .mb:hover { background: rgba(255,255,255,.07); }
#pwu-bar .mb:active { transform: scale(.97); }
#pwu-bar .mb:focus-visible, #pwu-bar .tb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#pwu-bar .mb .sw { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 700 12px/1 system-ui, sans-serif;
  color: #0b0b10; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
#pwu-bar .mb .tx { display: grid; gap: 2px; }
#pwu-bar .mb .k { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bar-dim); }
#pwu-bar .mb .n { font-size: 14px; font-weight: 700; letter-spacing: .01em; }
#pwu-bar .mb.on { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
#pwu-bar .mb.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--acc, #fff); }
#pwu-bar .tools { display: flex; align-items: center; gap: 4px; padding-left: 4px; border-left: 1px solid var(--bar-line); margin-left: 2px; }
#pwu-bar .tb { width: 38px; height: 38px; border-radius: 11px; border: 1px solid transparent; background: transparent; color: inherit; display: grid; place-items: center;
  transition: background-color .2s, transform .2s, color .2s; position: relative; }
#pwu-bar .tb:hover { background: rgba(255,255,255,.09); }
#pwu-bar .tb:active { transform: scale(.94); }
#pwu-bar .tb svg { width: 18px; height: 18px; }
#pwu-bar .tb.on { color: #ffd34d; background: rgba(255, 211, 77, .14); }
#pwu-bar .tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px); padding: 6px 9px; border-radius: 8px; white-space: nowrap;
  background: rgba(12,14,24,.94); border: 1px solid var(--bar-line); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
#pwu-bar .tb:hover .tip, #pwu-bar .tb:focus-visible .tip { opacity: 1; transform: translate(-50%, 0); }
#pwu-bar .mini { display: none; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--bar-bg); border: 1px solid var(--bar-line);
  color: inherit; font: 600 12.5px/1 system-ui, sans-serif; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 34px rgba(0,0,0,.4); }
#pwu-bar .mini .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acc, #fff); }
#pwu-bar.min .bar-in { display: none; }
#pwu-bar.min .mini { display: inline-flex; }
#pwu-bar .note { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; color: #ffd34d;
  background: rgba(12,14,24,.9); border: 1px solid rgba(255,211,77,.35); padding: 5px 10px; border-radius: 999px; }
@media (max-width: 760px) {
  #pwu-bar { width: calc(100% - 20px); max-width: 520px; }
  #pwu-bar .bar-in { gap: 4px; padding: 5px; }
  #pwu-bar .mb { min-width: 0; flex: 1; padding: 7px 6px; gap: 6px; justify-content: center; }
  #pwu-bar .mb .k { display: none; }
  #pwu-bar .mb .n { font-size: 11.5px; }
  #pwu-bar .mb .sw { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }
  #pwu-bar .tb { width: 34px; height: 34px; }
  #pwu-bar.min { width: auto; }
}
@media (max-width: 420px) { #pwu-bar .mb .tx { display: none; } }
/* site final (07/11): sem modelos e sem painel — só o botão das animações, para quem tem "menos movimento" no sistema */
#pwu-bar.fin { left: 16px; right: auto; width: auto; max-width: none; transform: none; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
#pwu-bar.fin .fin-mov { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bar-line); background: var(--bar-bg); color: var(--bar-dim); font: 600 12.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
  transition: color .2s, border-color .2s, background-color .2s; }
#pwu-bar.fin .fin-mov svg { width: 18px; height: 18px; flex: none; }
#pwu-bar.fin .fin-mov:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
#pwu-bar.fin .fin-mov:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#pwu-bar.fin .fin-mov.on { width: 38px; padding: 0; justify-content: center; color: #ffd34d; }
#pwu-bar.fin .fin-mov.on span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== transição de pokébola entre modelos ===== */
#pwu-wipe { position: fixed; inset: 0; z-index: 2147482500; pointer-events: none; visibility: hidden; }
#pwu-wipe.on { visibility: visible; pointer-events: auto; }
#pwu-wipe .half { position: absolute; left: 0; right: 0; height: 50.5%; will-change: transform; }
#pwu-wipe .top { top: 0; background: var(--wipe-top); transform: translateY(-101%); }
#pwu-wipe .bot { bottom: 0; background: var(--wipe-bottom); transform: translateY(101%); }
#pwu-wipe .top::after, #pwu-wipe .bot::before { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: var(--wipe-band); }
#pwu-wipe .top::after { bottom: 0; }
#pwu-wipe .bot::before { top: 0; }
#pwu-wipe .btn { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; background: var(--wipe-band);
  display: grid; place-items: center; transform: scale(0); will-change: transform; }
#pwu-wipe .btn::before { content: ""; width: 70px; height: 70px; border-radius: 50%; background: #f5f3ee; box-shadow: inset 0 0 0 6px #d9d6cf; }
/* 06/11 (dono: "esse nome aqui não tá legal quando transiciona, tem que arrumar a fonte e o tamanho tá meio pequeno"): o nome
   da página no letreiro do site (Unbounded 800), grande e firme, sem o espaçamento largo de antes */
#pwu-wipe .lbl { position: absolute; left: 0; right: 0; top: calc(50% + 84px); padding: 0 20px; text-align: center; color: #12121a;
  font: 800 clamp(28px, 2.6vw, 46px)/1 "Unbounded", "Archivo", system-ui, sans-serif; letter-spacing: -.02em; text-transform: uppercase; opacity: 0; }

/* intro de cada modelo (o modelo desenha dentro) */
#pwu-intro { position: fixed; inset: 0; z-index: 2147482400; pointer-events: auto; }
#pwu-intro[hidden] { display: none !important; }
#pwu-intro .skip { position: absolute; right: calc(18px + env(safe-area-inset-right, 0px)); top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 3;
  font: 600 11px/1 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 8px 12px; }
#pwu-intro .skip:hover { color: #fff; }

/* ===== acabamento premium comum ===== */
/* barra fina de progresso da página, na cor do modelo */
#pwu-progress { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 2px; z-index: 2147481500; pointer-events: none; }
#pwu-progress i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--pwu-acc, #fff);
  box-shadow: 0 0 10px var(--pwu-acc, #fff); opacity: .9; }
html.model-3 #pwu-progress i { box-shadow: none; }
/* grão de filme (textura de cinema nos modelos escuros; papel bem leve no claro) */
#pwu-grain { position: fixed; inset: -30%; z-index: 2147481400; pointer-events: none; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: pwu-grain 1s steps(6) infinite; will-change: transform; }
html.model-1 #pwu-grain { opacity: .055; }
html.model-2 #pwu-grain { opacity: .06; }
html.model-3 #pwu-grain { opacity: .03; }
html.model-4 #pwu-grain { opacity: .075; }
@keyframes pwu-grain { 0% { transform: translate(0, 0); } 17% { transform: translate(-7%, 5%); } 33% { transform: translate(4%, -9%); } 50% { transform: translate(-10%, -3%); }
  67% { transform: translate(9%, 7%); } 83% { transform: translate(-3%, 10%); } 100% { transform: translate(6%, -5%); } }
/* texto que rola no hover (nav e botões) */
.rl { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; padding: .1em 0 .16em; margin: -.1em 0 -.16em; }
.rl > span { position: relative; display: inline-block; white-space: nowrap; transition: transform .62s cubic-bezier(.76, 0, .24, 1); }
.rl > span::after { content: attr(data-t); position: absolute; left: 0; top: calc(100% + .26em); white-space: nowrap; }
@media (hover: hover) {
  a:hover .rl > span, button:hover .rl > span { transform: translateY(calc(-100% - .26em)); }
}
a:focus-visible .rl > span { transform: translateY(calc(-100% - .26em)); }
/* sublinhado que se desenha nos links do rodapé (o Modelo 1 já tem o dele) */
.m2-foot li a:not(.is-off), .m3-foot li a:not(.is-off), .m4-foot li a:not(.is-off) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px;
  transition: background-size .45s cubic-bezier(.7, 0, .2, 1), color .2s; }
.m2-foot li a:not(.is-off):hover, .m3-foot li a:not(.is-off):hover, .m4-foot li a:not(.is-off):hover { background-size: 100% 1px; }
/* foco de teclado visível em tudo que é clicável */
#app a:focus-visible, #app button:focus-visible, #pwu-bar button:focus-visible { outline: 2px solid var(--pwu-acc, #fff); outline-offset: 3px; }
/* seleção de texto e barra de rolagem no tom de cada modelo */
html.model-1 { scrollbar-color: rgba(231,199,123,.5) #090b17; }
html.model-2 { scrollbar-color: rgba(255,211,92,.45) #07061a; }
html.model-3 { scrollbar-color: rgba(14,27,61,.3) #fffdf8; }
html.model-4 { scrollbar-color: #ffe14d #0b0b0c; }
html.model-1 #app ::selection { background: rgba(231,199,123,.38); color: #fff; }
html.model-2 #app ::selection { background: rgba(255,211,92,.4); color: #120c00; }
html.model-3 #app ::selection { background: rgba(47,125,246,.25); color: #0e1b3d; }
html.model-4 #app ::selection { background: #ffe14d; color: #0b0b0c; }
html.pwu-light #pwu-grain { animation: none; }   /* versão leve (movimento reduzido): grão parado */
html.pwu-light .rl > span { transition: none; }

/* sem bibliotecas (CDN bloqueada/offline): tudo visível e parado */
.no-motion .rv, .no-motion [data-rv] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  #pwu-bar .mb, #pwu-bar .tb { transition: none; }
}

/* ===== MODELO 4 — ARENA (ousado, cinético, estilo e-sports) =====
   Layout: topo com palavras gigantes reagindo ao mouse + faixas diagonais; seções como cartas que se empilham;
   sistemas em lista com arte seguindo o cursor; final com letras que se montam. */
.m4 {
  --m4-black: #0b0b0c; --m4-ink: #151517; --m4-paper: #f2f0ea; --m4-volt: #ffe14d; --m4-red: #ff3b3b; --m4-gray: #8c8c92; --m4-line: rgba(242, 240, 234, .14);
  --m4-display: "Unbounded", "Archivo", system-ui, sans-serif; --m4-body: "Archivo", system-ui, sans-serif; --m4-mono: "JetBrains Mono", ui-monospace, monospace;
  background: var(--m4-black); color: var(--m4-paper); font: 500 16px/1.55 var(--m4-body); overflow-x: clip;
}
:where(.m4) a { color: inherit; text-decoration: none; }
.m4 :focus-visible { outline: 2px solid var(--m4-volt); outline-offset: 3px; }
.m4 .wrap { width: min(1320px, 100%); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.m4-mono { font: 500 12px/1 var(--m4-mono); letter-spacing: .08em; text-transform: uppercase; }
.m4-label { display: inline-flex; align-items: center; gap: 10px; color: var(--m4-gray); }
.m4-label::before { content: ""; width: 8px; height: 8px; background: var(--m4-volt); }
.m4-h2 { margin: 0; font: 800 clamp(40px, 7vw, 108px)/.92 var(--m4-display); letter-spacing: -.04em; text-transform: uppercase; text-wrap: balance; }

/* ---------- botões ---------- */
.m4-btn { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 22px; font: 700 14px/1 var(--m4-display); letter-spacing: .02em; text-transform: uppercase;
  overflow: hidden; isolation: isolate; transition: transform .2s, color .3s, background-color .3s, box-shadow .3s; }
.m4-btn .mi { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 14px; }
.m4-btn .ar { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.m4-btn:hover .ar { transform: translateX(6px); }
.m4-btn:active { transform: translate(2px, 2px); }
.m4-btn--volt { color: var(--m4-black); background: var(--m4-volt); box-shadow: 6px 6px 0 var(--m4-red); }
.m4-btn--volt:hover { box-shadow: 9px 9px 0 var(--m4-red); }
.m4-btn--line { color: var(--m4-paper); border: 2px solid var(--m4-paper); }
.m4-btn--line::before { content: ""; position: absolute; inset: 0; background: var(--m4-paper); transform: scaleY(0); transform-origin: bottom; transition: transform .4s cubic-bezier(.2,.8,.2,1); z-index: 1; }
.m4-btn--line:hover { color: var(--m4-black); }
.m4-btn--line:hover::before { transform: scaleY(1); }
.m4-btn--black { color: var(--m4-paper); background: var(--m4-black); box-shadow: 6px 6px 0 var(--m4-paper); }
.m4-btn--black:hover { box-shadow: 9px 9px 0 var(--m4-paper); }
/* Instagram (06/11): botão do mesmo tamanho do Discord, no papel com sombra preta (o par preto/branco no vermelho) */
.m4-btn--ig { color: var(--m4-black); background: var(--m4-paper); box-shadow: 6px 6px 0 var(--m4-black); }
.m4-btn--ig:hover { box-shadow: 9px 9px 0 var(--m4-black); }
.m4-btn .ico { width: 20px; height: 20px; flex: none; display: block; }
.m4-btn .ico-of { width: 24px; height: 24px; margin: -2px 0; }   /* símbolos oficiais (Discord/Instagram) */
.m4-btn.is-off { cursor: not-allowed; opacity: .55; box-shadow: none; }
.m4-btn.is-off small { font: 500 10px/1 var(--m4-mono); padding: 4px 6px; background: rgba(0,0,0,.18); }
/* 06/11 (2º vídeo: "o baixar o Launcher... deixa numa cor mais pulsante, pro cara enxergar"): os botões de BAIXAR (ainda
   "em breve", sem clicar) ficam com o amarelo cheio e um pulso de luz em volta */
.m4-btn.is-off.m4-dl { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 225, 77, .5); }
.m4:not(.is-reduced) .m4-btn.is-off.m4-dl { animation: m4-dl-pulso 1.9s ease-out infinite; }
@keyframes m4-dl-pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 225, 77, .6); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 225, 77, 0); } }

/* ---------- topo fixo ---------- */
.m4-h { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 66px; display: flex; align-items: center; gap: 20px;
  padding: env(safe-area-inset-top, 0px) max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
  background: rgba(11,11,12,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--m4-line); mix-blend-mode: normal; }
.m4-brand { display: inline-flex; align-items: center; gap: 10px; }
.m4-brand img { width: 36px; height: auto; display: block; }
.m4-brand b { font: 800 15px/1 var(--m4-display); letter-spacing: -.02em; }
.m4-nav { display: flex; gap: 2px; margin: 0 auto; }
.m4-nav a { position: relative; padding: 10px 12px; font: 500 12.5px/1 var(--m4-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--m4-gray); transition: color .2s; }
.m4-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--m4-volt); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.m4-nav a:hover { color: var(--m4-paper); } .m4-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.m4-nav a.is-off { color: rgba(140,140,146,.55); }
.m4-nav a.is-off::after { background: var(--m4-red); }
.m4-h-r { display: flex; align-items: center; gap: 12px; }
.m4 .lang { display: inline-flex; gap: 2px; }
.m4 .lang .lg { appearance: none; border: 1px solid transparent; background: transparent; color: var(--m4-gray); font: 500 11.5px/1 var(--m4-mono); padding: 7px 7px; transition: color .2s, border-color .2s; }
.m4 .lang .lg:hover { color: var(--m4-paper); }
.m4 .lang .lg.on { color: var(--m4-black); background: var(--m4-paper); }
.m4-login { font: 500 12.5px/1 var(--m4-mono); letter-spacing: .08em; text-transform: uppercase; padding: 10px 6px; }
.m4-login:hover { color: var(--m4-volt); }
.m4-h .m4-btn { min-height: 42px; padding: 0 16px; font-size: 12px; box-shadow: 4px 4px 0 var(--m4-red); }
.m4-burger { display: none; margin-left: auto; width: 46px; height: 46px; border: 2px solid var(--m4-paper); background: transparent; color: var(--m4-paper); position: relative; }
.m4-burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; transition: transform .3s, top .3s; }
.m4-burger span:nth-child(1) { top: 16px; } .m4-burger span:nth-child(2) { top: 25px; }
.m4-burger[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); } .m4-burger[aria-expanded="true"] span:nth-child(2) { top: 20px; transform: rotate(-45deg); }
.m4-drawer { position: fixed; inset: 0; z-index: 49; background: var(--m4-volt); color: var(--m4-black); display: flex; flex-direction: column; justify-content: center;
  padding: 90px max(24px, env(safe-area-inset-left, 0px)) calc(110px + env(safe-area-inset-bottom, 0px)); }
.m4-drawer .dl { font: 800 clamp(34px, 10vw, 52px)/1.05 var(--m4-display); text-transform: uppercase; letter-spacing: -.04em; }
.m4-drawer .dl.is-off { opacity: .4; }
.m4-drawer .dl small { font: 500 11px/1 var(--m4-mono); margin-left: 8px; vertical-align: middle; }
.m4-drawer .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.m4-drawer .lang .lg { color: var(--m4-black); border-color: var(--m4-black); }
.m4-drawer .lang .lg.on { background: var(--m4-black); color: var(--m4-volt); }

/* ---------- topo ---------- */
.m4-hero { position: relative; min-height: 100vh; overflow: hidden; padding: 96px 0 0; display: grid; grid-template-rows: 1fr auto;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; gap: 20px; }
.m4-words { position: relative; z-index: 3; }
.m4-word { display: block; font: 600 clamp(54px, 9.2vw, 172px)/.88 var(--m4-display); letter-spacing: -.055em; text-transform: uppercase; white-space: nowrap; }
.m4-word .c { display: inline-block; font-variation-settings: "wght" var(--w, 600); transform-origin: 50% 80%; }
.m4-word.w3 { color: var(--m4-volt); }
/* letra vazada: o traço vai por baixo do preenchimento (cor do fundo), senão a fonte variável mostra as linhas de dentro das letras */
.m4-word.w2 { color: var(--m4-black); -webkit-text-stroke: 4px var(--m4-paper); paint-order: stroke fill; }
.m4-hero-txt { display: grid; gap: 18px; max-width: 560px; margin-top: 28px; }
.m4-kick { margin: 0; font: 700 clamp(19px, 1.8vw, 24px)/1.25 var(--m4-display); letter-spacing: -.02em; }
.m4-kick em { font-style: normal; color: var(--m4-volt); }
.m4-sub { margin: 0; color: #c6c4bd; font-size: 16.5px; max-width: 480px; }
.m4-ctas { display: flex; flex-wrap: wrap; gap: 18px; }
.m4-orb { position: relative; justify-self: center; width: min(500px, 33vw); aspect-ratio: 1; }
.m4-disc { position: absolute; inset: 6%; border-radius: 50%; background: var(--m4-paper); overflow: hidden; }   /* metade de baixo branca, como a pokébola */
.m4-disc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: var(--m4-red); }
.m4-disc::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 9px); height: 18px; background: var(--m4-black); }
.m4-disc .ctr { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--m4-paper); border: 10px solid var(--m4-black); z-index: 2; }
.m4-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(242,240,234,.25); }
/* bola do PWU no lugar do disco (07/11, Opções → Fundo 2 e 3): a arte do logo, recortada; a bola ocupa o lugar do disco e a
   coroa sai por cima (posição em % da .m4-orb, medida por tools/bola_pwu.py) */
.m4-emb { position: absolute; inset: 0; pointer-events: none; }
/* a metade preta da bola sumia no fundo escuro: um fio de luz em volta da arte e um brilho amarelo macio contornam a
   silhueta inteira (bola e coroa), e uma luz em anel logo atrás da borda da bola dá o efeito de eclipse */
.m4-orb.com-emb::before { content: ""; position: absolute; inset: -2%; border-radius: 50%; pointer-events: none; filter: blur(8px);
  background: radial-gradient(closest-side, transparent 72%, rgba(255, 225, 77, .2) 82%, rgba(255, 225, 77, .32) 86%, rgba(255, 225, 77, .1) 93%, transparent); }
.m4-emb img { position: absolute; max-width: none;
  filter: drop-shadow(0 0 1.5px rgba(255, 244, 214, .55)) drop-shadow(0 0 20px rgba(255, 225, 77, .3)) drop-shadow(0 22px 34px rgba(0, 0, 0, .5)); }
/* anel elétrico em volta da pokébola (vídeo do Higgsfield sobre preto; mistura de tela).
   Só aparece depois da entrada, quando a .m4-orb fica sem transform (senão vira grupo isolado e o preto apareceria). */
.m4-fx { position: absolute; left: 50%; top: 50%; width: 140%; height: 140%; margin: -70% 0 0 -70%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1s ease; }
.m4-orb.fx-on .m4-fx { opacity: .95; }
.m4-char { position: absolute; z-index: 3; pointer-events: none; }
.m4-char .ml { position: relative; }
.m4-char img { width: 100%; height: auto; display: block; filter: drop-shadow(14px 14px 0 rgba(0,0,0,.45)); }
/* treinadora e Pikachu animados: o vídeo com transparência cobre a arte parada no mesmo lugar e no mesmo tamanho.
   left/top/width/height vêm da opção escolhida (medidos pela máscara do 1º quadro, tools/alinhar_anim.py): o vídeo é maior
   que a arte porque mãos, cabelo e cauda saem dela. O mouse é lido pelo topo inteiro (só conta em cima do desenho). */
.m4-anim, .m4-pk-anim { position: absolute; max-width: none; object-fit: fill; opacity: 0; transition: opacity .3s ease; filter: drop-shadow(14px 14px 0 rgba(0,0,0,.45)); }
.m4-anim.on, .m4-pk-anim.on { opacity: 1; }
.m4-char .ml img { transition: opacity .25s ease; }
.m4-char.t .ml:has(.m4-anim.on) img, .m4-char.p .pkb:has(.m4-pk-anim.on) img { opacity: 0; transition: opacity .2s ease .1s; }
.m4-char .pkb { position: relative; }
/* treinadora: caixa da arte antiga (até as coxas); o .corpo cobre ela (antigas) ou é maior (corpo inteiro: style da opção)
   e então as pernas descem por trás das faixas e somem embaixo da amarela (--m4-pe0/--m4-pe1 vêm do JS) */
.m4-char.t .ml { aspect-ratio: 944 / 1520; }
.m4-char.t .corpo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.m4-char.t .corpo img { width: 100%; height: 100%; }
.m4-char.t.com-corpo .corpo { -webkit-mask-image: linear-gradient(to bottom, #000 var(--m4-pe0, 100%), transparent var(--m4-pe1, 100%)); mask-image: linear-gradient(to bottom, #000 var(--m4-pe0, 100%), transparent var(--m4-pe1, 100%)); }
.m4-bands { z-index: 5; }
/* Pikachu: brilho elétrico atrás e raios por cima */
.m4-pk-glow { position: absolute; left: 50%; top: 52%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 238, 120, .75) 0%, rgba(255, 210, 40, .35) 30%, rgba(255, 210, 40, 0) 62%); mix-blend-mode: screen; }
.m4-zap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 3px #fff6b0) drop-shadow(0 0 9px #ffd21e); }
.m4-zap path { fill: none; stroke: #fffbe0; stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.m4-char.t { width: 70%; left: 18%; bottom: -4%; }
.m4-char.p { width: 44%; left: -10%; bottom: 0; }
.m4-bands { position: relative; height: 150px; margin-top: 30px; }
.m4-band { position: absolute; left: -5%; width: 110%; overflow: hidden; padding: 16px 0; }
.m4-band.a { top: 26px; background: var(--m4-volt); color: var(--m4-black); transform: rotate(-3deg); z-index: 2; }
.m4-band.b { top: 40px; background: var(--m4-red); color: var(--m4-paper); transform: rotate(2.4deg); }
.m4-band .row { display: flex; width: max-content; gap: 0; will-change: transform; }
.m4-band span { font: 800 26px/1 var(--m4-display); letter-spacing: -.02em; text-transform: uppercase; padding: 0 26px; white-space: nowrap; }
.m4-band span::after { content: "✦"; margin-left: 52px; }

/* ---------- cartas empilhadas ---------- */
.m4-stack { position: relative; }
.m4-panel { position: sticky; top: 0; min-height: 100vh; border-radius: 34px 34px 0 0; overflow: hidden; transform-origin: 50% 0; will-change: transform; }
.m4-panel > .wrap { position: relative; padding-top: 110px; padding-bottom: 110px; }
.m4-panel .dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 9; }
.m4-p1 { background: var(--m4-paper); color: var(--m4-black); }
.m4-p2 { background: var(--m4-ink); }
/* ---- p2 (06/11, vídeo de revisão): sistemas em DUAS LINHAS na horizontal. A carta ocupa a tela; descendo, as linhas andam
   para a esquerda (o site "vai para a direita") e a de baixo começa meia carta adiante. Mouse em cima AMPLIA a carta
   (arte e informações) e apaga um pouco as outras. ---- */
/* --sx-pad: margem das linhas = a borda esquerda do título (o JS mede e grava em px; % dentro da grade virava 400 px) */
.m4-p2 { --sx-w: clamp(420px, 40vw, 720px); --sx-gap: clamp(16px, 1.5vw, 26px); --sx-pad: max(20px, calc((100vw - 1320px) / 2 + 20px));
  display: flex; flex-direction: column; height: 100vh; }
.m4-p2 > .wrap { padding-bottom: 0; }
.m4-p2 .m4-ph { margin-bottom: clamp(16px, 2.6vh, 36px); }
.m4-sx { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 18px 0 clamp(26px, 4.4vh, 52px); }
.m4-sx-pista { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sx-gap); height: 100%; padding-left: var(--sx-pad); }
.m4-sx-lin { display: flex; gap: var(--sx-gap); width: max-content; height: 100%; min-height: 0; padding-right: var(--sx-pad); will-change: transform; }
.m4-sx-lin.b { margin-left: calc(var(--sx-w) * .5); }
.m4-sxc { position: relative; flex: none; width: var(--sx-w); height: 100%; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); background: #1b1b1e;
  border: 2px solid rgba(242, 240, 234, .12); cursor: pointer; outline: none; transform-origin: 50% 50%;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, opacity .45s ease; }
.m4-sxc .art { height: 100%; aspect-ratio: 1; background: var(--m4-black); border-right: 2px solid rgba(242, 240, 234, .12); overflow: hidden; display: grid; place-items: center; transition: border-color .35s ease; }
.m4-sxc .art { position: relative; }
.m4-sxc .art img { width: 86%; height: 86%; object-fit: contain; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
/* arte animada (GIF de vocês): por cima da parada, aparece só com o mouse */
.m4-sxc .art img.anim { position: absolute; inset: 7%; width: 86%; height: 86%; opacity: 0; transition: opacity .22s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.m4-sxc .art img.anim.vis { opacity: 1; }
.m4-sxc .art:has(img.anim.vis) > img:not(.anim) { opacity: 0; transition: opacity .22s ease; }
.m4-sxc .tx { display: flex; flex-direction: column; gap: clamp(8px, 1vh, 14px); min-width: 0; min-height: 0; overflow: hidden; padding: clamp(16px, 1.9vw, 30px) clamp(56px, 4.4vw, 70px) clamp(16px, 1.9vw, 30px) clamp(16px, 1.9vw, 30px); }
.m4-sxc .n { font: 500 13px/1 var(--m4-mono); letter-spacing: .08em; color: var(--m4-volt); }
.m4-sxc h3 { margin: 0; font: 800 clamp(19px, 1.7vw, 34px)/1.02 var(--m4-display); letter-spacing: -.035em; text-transform: uppercase; color: var(--m4-paper); text-wrap: balance; }
.m4-sxc p { margin: 0; font-size: clamp(14px, 1.02vw, 17px); line-height: 1.55; color: #b9b7b0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .35s ease; }
.m4-sxc .ar { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid rgba(242, 240, 234, .4); color: var(--m4-paper);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), background-color .3s ease, color .3s ease, border-color .3s ease; }
.m4-sxc .ar svg { width: 16px; height: 16px; }
.sx-entra .m4-sxc { transition: none !important; }
@media (hover: hover) { .m4-sx-pista:hover .m4-sxc:not(:hover) { opacity: .5; } }
/* a "janela maior": a carta inteira cresce (arte e informações juntas), com a borda amarela e a sombra vermelha do modelo;
   o texto ganha uma linha e fica mais claro, sem sair da carta */
.m4-sxc:hover, .m4-sxc.on, .m4-sxc:focus-visible { z-index: 3; transform: scale(1.08); border-color: var(--m4-volt); box-shadow: 12px 12px 0 var(--m4-red); }
.m4-sxc:hover .art, .m4-sxc.on .art { border-color: var(--m4-volt); }
.m4-sxc:hover .art img, .m4-sxc.on .art img { transform: scale(1.1); }
.m4-sxc:hover p, .m4-sxc.on p { -webkit-line-clamp: 4; color: #e6e4dd; }
.m4-sxc:hover .ar, .m4-sxc.on .ar { transform: rotate(-45deg); background: var(--m4-volt); border-color: var(--m4-volt); color: var(--m4-black); }
.m4-p3 { background: var(--m4-volt); color: var(--m4-black); }
.m4-p4 { background: var(--m4-black); border-top: 1px solid var(--m4-line); }
.m4-p5 { background: var(--m4-red); color: var(--m4-paper); }
.m4-ph { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 50px; }
.m4-ph .m4-label { color: inherit; opacity: .7; }

/* p1: o que é + mapas */
/* 06/11 (2º vídeo, zoom 100%: "o texto ficou muito grande... alocar mais pra direita... imagens um pouco pra direita, tá meio
   pequena em relação ao texto... descer as imagens pra ficar no meio"): a carta usa mais da largura, o texto ganha linha mais
   longa e fica menor (46 → 35 px na tela de 1707), e os mapas crescem ~40% e ficam CENTRALIZADOS na altura do texto */
.m4-p1 > .wrap { width: min(1520px, 100%); }
.m4-about { display: grid; grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr); gap: clamp(36px, 3.6vw, 64px); align-items: center; }
/* 06/11 (vídeo de revisão: "as letras se completam muito, parece uma linha que não para"): peso 600,
   entrelinha maior e letras/palavras menos coladas, para ler frase por frase */
.m4-fill { margin: 0; font: 600 clamp(22px, 2.05vw, 36px)/1.32 var(--m4-display); letter-spacing: -.012em; word-spacing: .08em; color: var(--m4-black); }
.m4-fill .wc { color: #bdb9ae; }
.m4-fill .free { background: var(--m4-volt); padding: 0 .18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.m4-fill .nw { white-space: nowrap; }
.m4-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m4-mapc { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border: 2px solid var(--m4-black); background: #000; }
.m4-mapc img, .m4-mapc video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m4-mapc video { opacity: 0; transition: opacity .5s; }
.m4-mapc .vwrap.playing video { opacity: 1; }
.m4-mapc .vwrap { position: absolute; inset: 0; }
.m4-mapc b { position: absolute; left: 8px; bottom: 8px; z-index: 2; font: 500 10.5px/1 var(--m4-mono); text-transform: uppercase; padding: 5px 6px; background: var(--m4-black); color: var(--m4-volt); }
.m4-p1 .m4-btn--volt { box-shadow: 6px 6px 0 var(--m4-black); margin-top: 34px; }

/* p2: sistemas em lista */
.m4-list { border-top: 1px solid var(--m4-line); }
.m4-row { position: relative; display: grid; grid-template-columns: 90px 1fr 60px; align-items: center; gap: 20px; padding: 26px 8px; border-bottom: 1px solid var(--m4-line); cursor: pointer; overflow: hidden; }
.m4-row::before { content: ""; position: absolute; inset: 0; background: var(--m4-volt); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.8,.2,1); z-index: 0; }
.m4-row > * { position: relative; z-index: 1; }
.m4-row .n { font: 500 15px/1 var(--m4-mono); color: var(--m4-gray); transition: color .3s; }
.m4-row h3 { margin: 0; font: 800 clamp(24px, 2.85vw, 41px)/1 var(--m4-display); letter-spacing: -.04em; text-transform: uppercase; transition: transform .5s cubic-bezier(.2,.8,.2,1), color .3s; }
.m4-row .ex { grid-column: 2 / 3; max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.2,.8,.2,1); }
.m4-row .ex p { margin: 0; padding-top: 12px; max-width: 640px; font-size: 16px; color: inherit; opacity: .85; }
.m4-row .ar { justify-self: end; width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid currentColor; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.m4-row .ar svg { width: 18px; height: 18px; }
.m4-row:hover::before, .m4-row.on::before { transform: scaleX(1); }
.m4-row:hover, .m4-row.on { color: var(--m4-black); }
.m4-row:hover .n, .m4-row.on .n { color: var(--m4-black); }
.m4-row:hover h3, .m4-row.on h3 { transform: translateX(16px); }
.m4-row:hover .ar, .m4-row.on .ar { transform: rotate(-45deg); }
.m4-row:hover .ex, .m4-row.on .ex { max-height: 160px; }
.m4-row .thumb { display: none; }
.m4-float { position: fixed; left: 0; top: 0; z-index: 60; width: 300px; height: 360px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); }
.m4-float .fi { position: absolute; inset: 0; background: var(--m4-black); border: 2px solid var(--m4-volt); box-shadow: 10px 10px 0 var(--m4-red); overflow: hidden; }
.m4-float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: opacity .25s; }

/* p3: 3 passos */
.m4-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 3px solid var(--m4-black); }
.m4-step { position: relative; padding: 30px 26px 10px 0; border-right: 2px solid rgba(11,11,12,.18); display: grid; gap: 12px; align-content: start; }
.m4-step + .m4-step { padding-left: 26px; }
.m4-step:last-child { border-right: 0; }
.m4-step .big { font: 800 clamp(70px, 9vw, 140px)/.8 var(--m4-display); letter-spacing: -.06em; }
.m4-step .ln { height: 3px; background: var(--m4-black); transform-origin: left; }
.m4-step h3 { margin: 6px 0 0; font: 800 26px/1.05 var(--m4-display); letter-spacing: -.03em; text-transform: uppercase; }
.m4-step p { margin: 0; font-size: 16px; }
.m4-step a { font: 700 13px/1 var(--m4-mono); text-transform: uppercase; display: inline-flex; gap: 8px; padding: 8px 0; }
.m4-step a.is-off { opacity: .5; }
.m4-step a small { font-size: 10px; border: 1px solid; padding: 3px 5px; }
/* 3 passos animados (opção "Passos"): número vazado até a vez dele, pokébola na trilha, iniciais e marcador.
   O traço do número vazado usa paint-order (a fonte variável mostra linhas internas sem isso). */
.m4-steps { position: relative; }
.m4-step .big { position: relative; justify-self: start; transform-origin: 0 100%; }
.m4-p3.m4-vaz .m4-step .big { -webkit-text-stroke: 2px var(--m4-black); paint-order: stroke fill; }
.m4-trbola { position: absolute; left: 0; top: 0; width: var(--tb, 46px); height: var(--tb, 46px); z-index: 4; pointer-events: none; opacity: 0; will-change: transform; }
.m4-trbola svg { display: block; width: 100%; height: 100%; overflow: visible; }
.m4-pstar { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 5; pointer-events: none; }
.m4-pstar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.m4-pstar.r path { fill: var(--m4-red); }
.m4-pstar.w path { fill: var(--m4-paper); }
.m4-pcg { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; white-space: nowrap; font: 800 30px/1 var(--m4-display); letter-spacing: -.01em; color: var(--m4-black); }
.m4-pcg b { display: inline-block; font-weight: 800; text-shadow: 0 .1em 0 var(--m4-red); }
.m4-ini { position: absolute; right: 4%; top: 0; width: 44%; height: 150px; overflow: hidden; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; z-index: 2; }
.m4-ini img { display: block; height: 92%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(6px 6px 0 rgba(11, 11, 12, .85)); will-change: transform; }
.m4-mk { position: absolute; left: -6px; right: -10px; top: -6px; bottom: -8px; background: var(--m4-black); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.m4-prog { position: absolute; left: 0; top: -3px; width: 100%; height: 9px; background: var(--m4-black); transform: scaleX(0); transform-origin: 0 50%; z-index: 3; pointer-events: none; }
.m4.is-reduced .m4-trbola, .m4.is-reduced .m4-prog { display: none; }
/* Charizard puxando a carta da comunidade: camada fixa por cima das cartas (cordas em SVG, argolas amarelas na borda) */
.m4-voo { position: fixed; inset: 0; z-index: 60; pointer-events: none; visibility: hidden; }
.m4-voo .cordas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m4-voo .cordas path { fill: none; stroke-linecap: round; }
.m4-voo .cordas .c1o, .m4-voo .cordas .c2o { stroke: #0b0b0c; stroke-width: 8; }      /* contorno preto */
.m4-voo .cordas .c1, .m4-voo .cordas .c2 { stroke: #ffe14d; stroke-width: 3.6; }      /* corda amarela: aparece no preto e no vermelho */
.m4-voo .cordas circle { fill: #ffe14d; stroke: #0b0b0c; stroke-width: 3; }
.m4-voo .cz { position: absolute; left: 0; top: 0; transform-origin: 50% 92%; will-change: transform; filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, .3)); }
.m4-voo .cz img, .m4-voo .cz video { display: block; width: 100%; height: auto; transition: opacity .2s ease; }
.m4-voo .cz video { position: absolute; left: 0; top: 0; opacity: 0; }
.m4-voo .cz.on video { opacity: 1; }
.m4-voo .cz.on img { opacity: 0; }

/* p4: notícias */
.m4-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.m4-nc { position: relative; display: grid; gap: 14px; padding: 14px 14px 22px; border: 2px solid var(--m4-paper); background: var(--m4-black); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.m4-nc:hover { transform: translate(-6px, -6px); box-shadow: 12px 12px 0 var(--m4-volt); }
.m4-nc .im { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: block; border: 2px solid var(--m4-paper); }
.m4-nc .im img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.6) contrast(1.04); transition: filter .5s, transform .8s cubic-bezier(.2,.8,.2,1); }
.m4-nc:hover .im img, .m4-nc.rec .im img { filter: none; }
.m4-nc:hover .im img { transform: scale(1.05); }
/* a mais recente: cor cheia, borda amarela e o selo "Mais recente" com o pontinho pulsando */
.m4-nc.rec { border-color: var(--m4-volt); }
.m4-nc.rec .im { border-color: var(--m4-volt); }
.m4-nc .rec-tag { position: absolute; left: 10px; top: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px 6px 8px;
  font-size: 11px; background: var(--m4-volt); color: var(--m4-black); box-shadow: 3px 3px 0 var(--m4-black); }
.m4-nc .rec-tag i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }
/* movimento: segue o botão Movimento completo (classe is-reduced), não só o sistema (o PC do dono avisa "menos movimento") */
.m4:not(.is-reduced) .m4-nc .rec-tag i { animation: m4-rec 1.6s ease-out infinite; }
@keyframes m4-rec { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } }
.m4-nc .no { position: absolute; right: 14px; top: 14px; z-index: 2; font: 800 44px/1 var(--m4-display); color: var(--m4-volt); text-shadow: 3px 3px 0 var(--m4-black); }
.m4-nc .mt { display: flex; gap: 10px; align-items: center; color: var(--m4-gray); }
.m4-nc .mt b { color: var(--m4-black); background: var(--m4-volt); padding: 4px 6px; }
.m4-nc strong { font: 800 22px/1.1 var(--m4-display); letter-spacing: -.03em; text-transform: uppercase; }
.m4-nc .more { font: 700 12.5px/1 var(--m4-mono); text-transform: uppercase; color: var(--m4-volt); }

/* p5: comunidade (06/11, 2ª versão) — uma cena só em vídeo, já sobre o vermelho do site (#ff3b3b): Alakazam à esquerda,
   Lucario à direita, o vermelho vazio no meio fica atrás do texto. A cena ocupa a largura da carta, centrada na altura;
   as bordas de cima e de baixo se fundem no vermelho da carta (máscara). No celular, a versão lado a lado embaixo do texto. */
.m4-p5 { position: relative; }
.m4-p5 > .wrap { position: relative; z-index: 2; min-height: 100vh; display: grid; align-content: center; padding-top: 96px; padding-bottom: 72px; }
/* quadro 16:9 com folga em volta (a aura cabe inteira e some sozinha no vermelho). Tamanho aprovado pelo dono em 06/11
   ("desse tamanho tá uma proporção boa", o texto em destaque). Só em tela muito larga a largura para em 190vh, para os
   Pokémon não passarem de ~metade da altura; nesse caso as laterais esfumam (a aura não termina num corte reto).
   A centralização no CSS é só para antes do JS / "menos movimento": com a entrada animada o GSAP assume (xPercent/yPercent). */
.m4-cena { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(100%, 190vh); aspect-ratio: var(--cn-ar, 1920 / 814); transform: translate(-50%, var(--cn-dy, -46%)); pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent), linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent), linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect; }
/* versão "camadas" (a v28, opção 1 do painel): cada lado tem o assento parado (.as), a sombra de contato (.sb), a luz da
   aura no assento (.lz) e o personagem (.cp: arte parada = 1º quadro + vídeo com alfa), que sobe e pousa pelo JS. A caixa
   de cada um é maior que a coluna (a aura precisa de folga em volta) e transborda para os lados. */
.m4-medc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 540px) minmax(0, 1fr); align-items: center; column-gap: clamp(8px, 1.4vw, 24px); }
.m4-med { position: relative; z-index: 1; width: 134%; max-width: none; margin: 0 -17%; aspect-ratio: 900 / 938; pointer-events: none; }
.m4-med .as, .m4-med .cp, .m4-med .cp img, .m4-med .cp video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; }
.m4-med .as { filter: drop-shadow(8px 10px 0 rgba(0, 0, 0, .2)); }
.m4-med .cp { will-change: transform; }
#app .m4-med .cp video { opacity: 0; transition: opacity .3s ease; }
#app .m4-med.on .cp video { opacity: 1; }
#app .m4-med.on .cp .pd { opacity: 0; }
.m4-med .sb, .m4-med .lz { position: absolute; left: var(--sx); top: var(--sy); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.m4-med .sb { width: var(--sw); aspect-ratio: 5 / 1; background: radial-gradient(closest-side, rgba(25, 0, 0, .4), rgba(25, 0, 0, 0)); }
.m4-med .lz { width: calc(var(--sw) * 1.6); aspect-ratio: 2.4 / 1; opacity: 0; mix-blend-mode: screen; }
.m4-med.e .lz { background: radial-gradient(closest-side, rgba(255, 120, 240, .8), rgba(255, 120, 240, 0)); }
.m4-med.d .lz { background: radial-gradient(closest-side, rgba(110, 190, 255, .8), rgba(110, 190, 255, 0)); }
.m4-cena .cn-p, .m4-cena .cn-v, .m4-cena-cel .cn-p, .m4-cena-cel .cn-v { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.m4-cena .cn-v, .m4-cena-cel .cn-v { opacity: 0; transition: opacity .4s ease; }
.m4-cena.on .cn-v, .m4-cena-cel.on .cn-v { opacity: 1; }
.m4-cena-cel { display: none; }
/* o texto do meio em destaque (pedido do dono em 06/11): um "colchão" do próprio vermelho do site atrás do texto, esfumado
   em elipse — as auras somem suavemente ao chegar perto das letras, sem caixa nem borda (mesma cor do fundo) */
/* versão "no mouse" (06/11, 3ª rodada): cada Pokémon num vídeo quadrado próprio, sobre o vermelho do site, mais para as
   bordas (Alakazam à esquerda, Lucario à direita, pedido do dono); só o miolo (o corpo) responde ao mouse. As bordas da
   caixa esfumam de leve (o vermelho do vídeo é o da página: a caixa não aparece). Texto do meio maior. */
.cm-hover > .wrap { pointer-events: none; }
/* 06/11 (2º vídeo: "a comunidade tá mais pra direita... deixar mais centralizado"): o título (84 px) e os dois botões
   (678 px) eram mais largos que a caixa de 640 e transbordavam só para a direita (+41 px). Caixa de 780 e nada passa dela. */
.cm-hover .m4-medc-t { pointer-events: auto; max-width: 780px; }
.m4-medc-t > * { max-width: 100%; }
.cm-hover .m4-medc-t .m4-h2 { font-size: clamp(42px, 5vw, 84px); }
.cm-hover .m4-medc-t p { font-size: 19px; max-width: 470px; }
.cm-hover .m4-hv { position: absolute; z-index: 1; top: 50%; width: min(50.8vw, 83vh); aspect-ratio: 1; translate: -50% -55%; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent), linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent), linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect; }
.cm-hover .m4-hv.e { left: 12.5%; }
.cm-hover .m4-hv.d { left: 87.5%; }
.cm-hover .hv-p, .cm-hover .hv-v { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cm-hover .hv-v { opacity: 0; }
.cm-hover .m4-hv.on .hv-v { opacity: 1; }
.cm-hover .hv-alvo { position: absolute; left: 24%; right: 24%; top: 27%; bottom: 10%; border-radius: 40%; pointer-events: auto; cursor: pointer; }
.cm-cena .m4-medc-t::before, .cm-hover .m4-medc-t::before { content: ""; position: absolute; z-index: -1; inset: -14% -15%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 59, 59, .94) 0%, rgba(255, 59, 59, .82) 55%, rgba(255, 59, 59, 0) 100%); }
.m4-medc-t { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; max-width: 560px; margin: 0 auto; }
/* o título cabe no vermelho vazio do meio da cena (2 linhas), entre os dois */
.m4-medc-t .m4-h2 { font-size: clamp(38px, 4.4vw, 66px); }
.m4-medc-t p { max-width: 440px; margin: 22px 0 32px; font-size: 18px; }
.m4-medc-t .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; align-items: center; }
.m4-medc-t .row .m4-btn { min-width: 330px; justify-content: center; }   /* os dois botões do mesmo tamanho */
.m4-medc-t .ig { display: inline-flex; gap: 10px; align-items: center; font: 700 13px/1 var(--m4-mono); text-transform: uppercase; border-bottom: 2px solid; padding-bottom: 4px; }
.m4-medc-t .ig img { width: 20px; height: 20px; filter: brightness(10); }

/* ---------- final ---------- */
/* a seção prende na tela (100vh) e o Arceus fica atrás das letras. O vídeo tem fundo preto puro e entra em screen sobre o
   preto da seção: nenhum pai dele pode ter transform/opacity/z-index (isolaria o grupo e apareceria o retângulo preto). */
.m4-cta { position: relative; text-align: center; overflow: hidden; background: var(--m4-black); }
.m4-cta-in { position: relative; min-height: 100vh; display: grid; align-content: center; padding: 110px 0 96px; }
.m4-cta-in > .wrap { position: relative; z-index: 2; }
/* 06/11 (vídeo de revisão): o final é só texto; atrás dele um brilho dourado bem leve que acende e respira devagar
   (centralizado por margem: o GSAP mexe na opacidade e o CSS na escala, sem disputar o transform) */
.m4-cta-luz { position: absolute; left: 50%; top: 50%; width: min(1180px, 130vw); aspect-ratio: 1; margin: calc(min(1180px, 130vw) / -2) 0 0 calc(min(1180px, 130vw) / -2);
  border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(closest-side, rgba(255, 206, 92, .17), rgba(255, 206, 92, .06) 55%, rgba(255, 206, 92, 0)); }
@keyframes m4-cta-respira { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
.m4:not(.is-reduced) .m4-cta-luz { animation: m4-cta-respira 6s ease-in-out infinite; }
.m4-arc { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* a centralização (-50%/-50%) é feita SÓ pelo GSAP (xPercent/yPercent), sem transform/translate no CSS: antes o translate
   do CSS era lido de novo pelo GSAP e somado (no navegador do dono a pokébola ficava metade para cima) */
.m4-arc-p, .m4-arc-v, .m4-arc-f, .m4-arc-l, .m4-arc-c, .m4-arc-lc { position: absolute; left: 50%; top: 50%; width: max(100%, calc(100vh * 1.7911)); max-width: none; height: auto; aspect-ratio: var(--arc-ar, 1440 / 804);
  mix-blend-mode: screen; }
/* quadro a quadro (06/11): o link não responde Range e o <video> ali não pula para o meio; a revelação (.m4-arc-c) e o
   laço (.m4-arc-lc) são desenhados em canvas pelo WebCodecs. .qv/.ql = esse modo ligado; o <video> some (fica de reserva) */
.m4-arc-c, .m4-arc-lc { opacity: 0; transition: opacity .45s ease; }
.m4-arc.qv .m4-arc-v, .m4-arc.ql .m4-arc-l { display: none; }
.m4-arc.qv.on .m4-arc-c { opacity: 1; }
.m4-arc.ql.laco .m4-arc-lc { opacity: 1; }
.m4-arc.qv.laco .m4-arc-c { opacity: 0; }
.m4-arc-v { opacity: 0; }
.m4-arc.on .m4-arc-v { opacity: 1; }
/* laço do fim (opções 2D): troca seca de quadro igual (o laço começa no último quadro da revelação) */
.m4-arc-l { opacity: 0; transition: opacity .45s ease; }
.m4-arc.on .m4-arc-v { transition: opacity .45s ease; }   /* troca revelação <-> laço em fusão curta (sem pulo) */
.m4-arc.laco .m4-arc-l { opacity: 1; }
.m4-arc.laco .m4-arc-v { opacity: 0; }
.m4-arc.on .m4-arc-p { opacity: 0; }
/* se o vídeo ainda não carregou quando a pessoa chega no fim, o Arceus pronto aparece mesmo assim */
.m4-arc-f { opacity: 0; transition: opacity .5s ease; }
.m4-arc.fim:not(.on) .m4-arc-f { opacity: 1; }
.m4-arc.fim:not(.on) .m4-arc-p { opacity: 0; }
/* um halo dourado bem leve que respira atrás do Arceus depois que ele aparece */
.m4-arc-luz { position: absolute; left: 50%; top: 50%; width: min(78vh, 90vw); aspect-ratio: 1; margin: calc(min(78vh, 90vw) / -2) 0 0 calc(min(78vh, 90vw) / -2);
  border-radius: 50%; opacity: 0; mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(255, 206, 92, .2), rgba(255, 206, 92, .06) 60%, rgba(255, 206, 92, 0)); }
@keyframes m4-arc-respira { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
.m4:not(.is-reduced) .m4-arc-luz { animation: m4-arc-respira 5.5s ease-in-out infinite; }
.m4-cta .big { margin: 0; font: 800 clamp(48px, 10vw, 168px)/.86 var(--m4-display); letter-spacing: -.055em; text-transform: uppercase; }
.m4-cta .big .ln2 { color: var(--m4-volt); }
.m4-cta .big .c { display: inline-block; will-change: transform; }
.m4-cta p { max-width: 640px; margin: 30px auto 36px; color: #c6c4bd; font-size: 17px; }
.m4-cta .m4-ctas { justify-content: center; }

/* ---------- rodapé ---------- */
.m4-foot { border-top: 2px solid var(--m4-volt); padding: 70px 0 calc(120px + env(safe-area-inset-bottom, 0px)); background: var(--m4-black); }
.m4-foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; }
.m4-foot-brand > img { width: 110px; height: auto; display: block; margin-bottom: 18px; }
.m4-foot-brand p { margin: 0; color: var(--m4-gray); font-size: 14.5px; max-width: 340px; }
.m4-foot h4 { margin: 0 0 14px; font: 500 12px/1 var(--m4-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--m4-volt); }
.m4-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.m4-foot li a { color: #d6d4cd; font-weight: 600; transition: color .2s; }
.m4-foot li a:hover { color: var(--m4-volt); }
.m4-foot li a.is-off { opacity: .4; }
.m4-foot .os { display: block; margin-top: 12px; color: var(--m4-gray); font: 500 11.5px/1.4 var(--m4-mono); }
.m4-soc { display: flex; gap: 10px; margin-top: 18px; }
.m4-soc a { width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid var(--m4-paper); transition: background-color .2s; }
.m4-soc a:hover { background: var(--m4-volt); }
.m4-soc a img, .m4-soc a svg { width: 24px; height: 24px; margin: 0; display: block; }   /* 06/11: o logo do rodapé empurrava o ícone (estava torto) */
.m4-foot-bot { margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--m4-line); display: grid; gap: 8px; color: var(--m4-gray); font: 500 11.5px/1.6 var(--m4-mono); }

/* ---------- abertura: captura com a pokébola (vídeo) + "Capturado!" + clarão que abre o site ---------- */
#pwu-intro.i4 { overflow: hidden; background: transparent; }
.m4v { position: absolute; inset: 0; background: #0b0b0c; }
.m4v.aberto { background: transparent; }
.m4v.aberto .m4v-v, .m4v.aberto .m4v-cap, .m4v.aberto .m4v-load { visibility: hidden; }
.m4v-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.m4v-load { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 2px solid rgba(242, 240, 234, .22); }
.m4v-load::before { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; margin-top: -1px; background: rgba(242, 240, 234, .22); }
.m4v-load i { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: #ffe14d; animation: m4v-gira .9s linear infinite; }
.m4v-load i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #0b0b0c; box-shadow: 0 0 0 2px rgba(242, 240, 234, .35); }
@keyframes m4v-gira { to { transform: rotate(360deg); } }
.m4v-flash { position: absolute; inset: 0; background: #fffdf6; opacity: 0; pointer-events: none; }
/* abertura "Design": o fundo é a mesma grade do topo (some e o topo já está ali, no mesmo lugar) */
.m4d { position: absolute; inset: 0; overflow: hidden; }
.m4d-bg { position: absolute; inset: 0;
  background: linear-gradient(rgba(242, 240, 234, .14) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, rgba(242, 240, 234, .14) 1px, transparent 1px) 0 0 / 88px 100%, #0b0b0c; }
.m4d-sh { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); }
.m4d-ball { position: absolute; left: 0; top: 0; will-change: transform; }
.m4d-ball svg { display: block; width: 100%; height: 100%; overflow: visible; }
.m4d-st { position: absolute; left: 0; top: 0; display: block; will-change: transform; }
.m4d-st svg { display: block; width: 100%; height: 100%; }
/* (07/11: o "CAUGHT!" da abertura saiu a pedido do dono; o da seção "3 passos" usa .m4-pcg e continua) */

/* ---------- cursor do modelo: mira que trava nos botões ---------- */
#pwu-cursor.cur-m4 { --ring: 38; --ring-h: 58; }
#pwu-cursor.cur-m4 .c-dot { width: 6px; height: 6px; border-radius: 0; background: #ff3b3b; }
#pwu-cursor.cur-m4 .c-ring { border: 0; border-radius: 0 !important; --k: #ffe14d;
  background: linear-gradient(var(--k) 0 0) top left / 12px 2px no-repeat, linear-gradient(var(--k) 0 0) top left / 2px 12px no-repeat,
    linear-gradient(var(--k) 0 0) top right / 12px 2px no-repeat, linear-gradient(var(--k) 0 0) top right / 2px 12px no-repeat,
    linear-gradient(var(--k) 0 0) bottom left / 12px 2px no-repeat, linear-gradient(var(--k) 0 0) bottom left / 2px 12px no-repeat,
    linear-gradient(var(--k) 0 0) bottom right / 12px 2px no-repeat, linear-gradient(var(--k) 0 0) bottom right / 2px 12px no-repeat; }
#pwu-cursor.cur-m4.is-lock .c-ring { --k: #ff3b3b; }
#pwu-cursor.cur-m4 .c-label { font: 500 10px/1 "JetBrains Mono", monospace; color: #ffe14d; }

/* ---------- modo leve ---------- */
.m4.is-reduced .m4-panel { position: relative; border-radius: 0; }
.m4.is-reduced .m4-row .thumb { display: block; width: 70px; height: 70px; object-fit: contain; }
/* sistemas no "menos movimento": nada anda; as 6 cartas numa grade 3 × 2 na ordem 01 → 06 */
.m4.is-reduced .m4-p2 { height: auto; }
.m4.is-reduced .m4-sx { overflow: visible; padding-bottom: 96px; }
.m4.is-reduced .m4-sx-pista { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; padding-right: var(--sx-pad); }
.m4.is-reduced .m4-sx-lin { display: contents; }
.m4.is-reduced .m4-sxc { width: auto; height: clamp(230px, 22vw, 320px); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.m4.is-reduced .m4-sxc .art { aspect-ratio: auto; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .m4-nav, .m4-h-r { display: none; }
  .m4-burger { display: block; }
  .m4-hero-in { grid-template-columns: minmax(0, 1fr); }
  .m4-hero-in > div { min-width: 0; }
  .m4-orb { width: min(420px, 80vw); margin-top: 10px; }
  .m4-about { grid-template-columns: 1fr; }
  .m4-medc-t { max-width: 420px; }
  .m4-medc-t p { font-size: 16px; }
  /* versão "camadas" estreita: o texto em cima e os dois lado a lado embaixo (como na v28) */
  .m4-p5.cm-camadas > .wrap { min-height: 0; display: block; padding-top: 110px; padding-bottom: 110px; }
  .m4-medc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "t t" "a l"; row-gap: 6px; column-gap: 0; }
  .m4-medc .m4-medc-t { grid-area: t; max-width: none; }
  .m4-med.e { grid-area: a; } .m4-med.d { grid-area: l; }
  .m4-med { width: 122%; margin: 0 -11%; }
  .m4-news { grid-template-columns: 1fr; max-width: 560px; }
  .m4-foot-top { grid-template-columns: 1fr 1fr; }
}
/* comunidade estreita: o meio da cena larga não cabe o texto -> o texto em cima e a versão lado a lado embaixo */
@media (max-width: 900px) {
  .m4-p5 > .wrap { min-height: 0; display: block; padding-top: 104px; padding-bottom: 64px; }
  .m4-cena { display: none; }
  .cm-cena .m4-medc-t::before { display: none; }
  .cm-hover .m4-hv, .cm-hover .m4-medc-t::before { display: none; }   /* celular: depois do OK da web (pedido do dono) */
  .m4-cena-cel { display: block; position: relative; width: calc(100% + 24px); max-width: 640px; margin: 26px auto 0; aspect-ratio: var(--cn-ar-cel, 960 / 500); translate: -12px 0;
    -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 92%, transparent), linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(transparent, #000 12%, #000 92%, transparent), linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-composite: intersect; }
  .m4-medc-t { max-width: none; }
  .m4-medc-t .m4-h2 { font-size: clamp(38px, 9vw, 72px); }
  /* sistemas estreitos: uma coluna na ordem 01 → 06, arte em cima; nada anda */
  .m4-p2 { height: auto; }
  .m4-sx { overflow: visible; padding-bottom: 72px; }
  .m4-sx-pista { grid-template-rows: none; grid-template-columns: minmax(0, 1fr); height: auto; padding-right: var(--sx-pad); }
  .m4-sx-lin { display: contents; }
  .m4-sxc { width: auto; height: auto; grid-template-columns: minmax(0, 1fr); }
  .m4-sxc .art { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 2px solid rgba(242, 240, 234, .12); }
  .m4-sxc .art img { height: 82%; }
  .m4-sxc:hover, .m4-sxc.on { transform: none; }
}
@media (max-width: 760px) {
  .m4-word { font-size: clamp(42px, 14.6vw, 96px); }
  .m4-row { grid-template-columns: 40px minmax(0, 1fr) 60px; gap: 10px; padding: 20px 4px; }
  .m4-row .thumb { display: block; width: 60px; height: 60px; object-fit: contain; grid-column: 3; grid-row: 1; justify-self: end; }
  .m4-row .ar { display: none; }
  .m4-steps { grid-template-columns: 1fr; }
  .m4-step, .m4-step + .m4-step { padding: 26px 0; border-right: 0; border-bottom: 2px solid rgba(11,11,12,.18); }
  .m4-float { display: none; }
  .m4-band span { font-size: 19px; }
  .m4-foot-top { grid-template-columns: 1fr; }
  .m4-panel { border-radius: 22px 22px 0 0; }
}

/* ===== MODELO 4 — PÁGINAS INTERNAS (m4p.js) ===== */
.m4p { display: block; }

/* página atual acesa no topo */
.m4-nav a[aria-current="page"], .m4-login[aria-current="page"] { color: var(--m4-volt); }
.m4-drawer a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* ---------- topo logado: Pcoins + avatar/nome ---------- */
.m4p-pc { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 8px; border: 1px solid var(--m4-line); font: 600 13px/1 var(--m4-mono); letter-spacing: .04em; transition: border-color .25s, color .25s; }
.m4p-pc img { width: 22px; height: 22px; display: block; }
.m4p-pc:hover { border-color: var(--m4-volt); color: var(--m4-volt); }
.m4p-eu { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px 0 4px; background: var(--m4-paper); color: var(--m4-black); box-shadow: 4px 4px 0 var(--m4-volt);
  font: 700 12px/1 var(--m4-display); letter-spacing: .02em; text-transform: uppercase; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1); }
.m4p-eu:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--m4-volt); }
.m4p-eu .av { width: 34px; height: 34px; background: var(--m4-volt); overflow: hidden; display: block; flex: none; }
.m4p-eu .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m4p-eu .nm { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* rosto da Foto de perfil (topo, conta e prévia): card de fundo + personagem ampliado no rosto, como no site */
.m4p-rosto { position: relative; display: block; flex: none; overflow: hidden; background: #13254d; }
#app .m4p-rosto img { position: absolute; max-width: none; transform: none; transition: none; }
#app .m4p-rosto .fc { inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- ENTRAR / CRIAR CONTA ---------- */
.m4p-auth { position: relative; min-height: 100vh; overflow: hidden; padding: 128px 0 0; display: grid; grid-template-rows: 1fr auto;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4p-auth-in { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding-bottom: 36px; }
.m4p-words { margin: 24px 0 0; display: grid; }
/* a máscara da subida das palavras tem folga em cima para o acento (o "Ó" de "SÓ" era cortado) */
.m4p-words .w { display: block; overflow: hidden; padding: .2em 0 .06em; margin-top: -.18em; }
.m4p-words .w > span { display: block; font: 600 clamp(54px, 8.4vw, 152px)/.88 var(--m4-display); letter-spacing: -.055em; text-transform: uppercase; white-space: nowrap; will-change: transform; }
.m4p-words .w2 > span { color: var(--m4-black); -webkit-text-stroke: 4px var(--m4-paper); paint-order: stroke fill; }
.m4p-words .w3 > span { color: var(--m4-volt); }
.m4p-lead { max-width: 540px; margin: 28px 0 0; font-size: 18px; line-height: 1.55; color: rgba(242, 240, 234, .84); text-wrap: pretty; }
.m4p-perks { list-style: none; margin: 30px 0 0; padding: 0; max-width: 540px; border-top: 1px solid var(--m4-line); }
.m4p-perks li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--m4-line); }
.m4p-perks b { color: var(--m4-volt); font-weight: 600; }
.m4p-perks strong { display: block; margin-bottom: 4px; font: 700 14.5px/1.2 var(--m4-display); letter-spacing: .01em; text-transform: uppercase; color: var(--m4-paper); }
.m4p-perks span { font-size: 15px; color: rgba(242, 240, 234, .72); }

/* cartão claro com sombra dura amarela */
.m4p-card { position: relative; width: 100%; max-width: 560px; margin-left: auto; padding: 30px clamp(22px, 3vw, 40px) 22px; background: var(--m4-paper); color: var(--m4-black); box-shadow: 12px 12px 0 var(--m4-volt); }
.m4p-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--m4-black); margin-bottom: 26px; }
.m4p-tabs button { position: relative; z-index: 2; appearance: none; height: 52px; border: 0; background: transparent; color: var(--m4-black); cursor: pointer;
  font: 700 13px/1 var(--m4-display); letter-spacing: .03em; text-transform: uppercase; transition: color .3s; }
.m4p-tabs button[aria-selected="true"] { color: var(--m4-volt); }
.m4p-tabs button:focus-visible { outline: 2px solid var(--m4-red); outline-offset: -4px; }
.m4p-tabs .pill { position: absolute; z-index: 1; top: 0; left: 0; width: 50%; height: 100%; background: var(--m4-black); }
.m4p-views { position: relative; }
.m4p-v { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.m4p-v[hidden] { display: none; }

/* campos: rótulo mono, linha embaixo que corre ao focar */
.m4p-f { display: grid; gap: 7px; }
.m4p-f .lb { font-size: 11px; color: #5b5b62; transition: color .2s; }
.m4p-f .in { position: relative; display: flex; align-items: center; border-bottom: 2px solid rgba(11, 11, 12, .22); }
.m4p-f input { flex: 1; min-width: 0; appearance: none; border: 0; border-radius: 0; background: transparent; padding: 9px 0 11px; outline: none;
  font: 500 18px/1.2 var(--m4-body); color: var(--m4-black); }
.m4p-f input::placeholder { color: rgba(11, 11, 12, .36); }
.m4p-f .ul { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--m4-black); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.2, .8, .2, 1), background .2s; }
.m4p-f:focus-within .ul { transform: scaleX(1); }
.m4p-f:focus-within .lb { color: var(--m4-black); }
.m4p-f.bad .ul { background: var(--m4-red); transform: scaleX(1); }
.m4p-f .aj { font-size: 12.5px; line-height: 1.45; color: #66666e; }
.m4p .er { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: #d32626; }
.m4p .er:empty { display: none; }
.m4p-f .olho { appearance: none; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: transparent; color: rgba(11, 11, 12, .42); cursor: pointer; transition: color .2s; }
.m4p-f .olho svg { width: 20px; height: 20px; }
.m4p-f .olho:hover, .m4p-f .olho.on { color: var(--m4-black); }
.m4p-f.com-ok .in::after { content: ""; flex: none; width: 22px; height: 22px; margin-left: 8px; background: var(--m4-black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe14d' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
  transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.m4p-f.com-ok.ok .in::after { transform: scale(1); }
.m4p-cond { overflow: hidden; }
.m4p-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* força da senha */
.m4p-forca { display: grid; grid-template-columns: repeat(4, 1fr) 76px; gap: 6px; align-items: center; margin-top: -6px; }
.m4p-forca i { height: 4px; background: rgba(11, 11, 12, .12); transition: background .3s; }
.m4p-forca i.on { background: var(--m4-black); }
.m4p-forca[data-n="1"] i.on { background: var(--m4-red); }
.m4p-forca[data-n="2"] i.on { background: #f08a24; }
.m4p-forca span { font-size: 10.5px; text-align: right; color: #5b5b62; }

/* aceite das regras */
.m4p-chk { position: relative; display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; row-gap: 6px; align-items: center; font-size: 14.5px; line-height: 1.35; cursor: pointer; }
.m4p-chk input { position: absolute; top: 0; left: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.m4p-chk .bx { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--m4-black); transition: background .2s, border-color .2s; }
.m4p-chk .bx svg { width: 15px; height: 15px; color: var(--m4-volt); transform: scale(0); transition: transform .32s cubic-bezier(.3, 1.6, .5, 1); }
.m4p-chk input:checked + .bx { background: var(--m4-black); }
.m4p-chk input:checked + .bx svg { transform: scale(1); }
.m4p-chk input:focus-visible + .bx { outline: 2px solid var(--m4-red); outline-offset: 2px; }
.m4p-chk a { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m4p-chk a:hover { color: var(--m4-red); }
.m4p-chk .er { grid-column: 2; }
.m4p-chk.bad .bx { border-color: var(--m4-red); }
.m4p-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.m4p-lk { appearance: none; border: 0; padding: 0 0 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; color: var(--m4-black); cursor: pointer;
  font: 600 13.5px/1.2 var(--m4-body); transition: background-size .35s cubic-bezier(.2, .8, .2, 1), color .2s; }
.m4p-lk:hover { color: var(--m4-red); }
.m4p-lk[disabled] { cursor: default; color: #77777e; background-size: 0 2px; }

/* botão principal (o amarelo do modelo) com barra de carregamento */
.m4p .m4p-go { width: 100%; justify-content: center; margin-top: 4px; border: 0; cursor: pointer; overflow: hidden; }
.m4p .m4p-go .mi { justify-content: center; transition: opacity .2s; }
.m4p .m4p-go .ld { position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; background: var(--m4-black); transform: scaleX(0); transform-origin: 0 50%; }
.m4p .m4p-go.is-load .ld { animation: m4p-ld .95s cubic-bezier(.45, 0, .2, 1) forwards; }
.m4p .m4p-go.is-load .mi { opacity: .5; }
.m4p .m4p-go[hidden] { display: none; }
@keyframes m4p-ld { to { transform: scaleX(1); } }
.m4p-alt { margin: 2px 0 0; text-align: center; font-size: 14.5px; color: #4a4a50; }
.m4p-alt a { font-weight: 700; color: var(--m4-black); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m4p-alt a:hover { color: var(--m4-red); }

/* caixa preta de aviso (como no site: confirme seu e-mail) */
.m4p-box { display: grid; gap: 8px; padding: 16px 18px; background: var(--m4-black); color: var(--m4-paper); }
.m4p-box strong { font-size: 11px; color: var(--m4-volt); }
.m4p-box p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(242, 240, 234, .8); }

/* telas internas: código do e-mail, Recovery Key, esqueci a senha */
.m4p-back { appearance: none; justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--m4-black); cursor: pointer; }
.m4p-back svg { width: 18px; height: 18px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.m4p-back:hover svg { transform: translateX(-4px); }
.m4p-back span { font-size: 11px; }
.m4p-vt { margin: 2px 0 0; font: 800 clamp(26px, 2.6vw, 36px)/1 var(--m4-display); letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; }
.m4p-vp { margin: 0; font-size: 15px; color: #4a4a50; }
.m4p-vp b { color: var(--m4-black); word-break: break-all; }
.m4p-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.m4p-code input { width: 100%; min-width: 0; aspect-ratio: 1 / 1.15; border: 2px solid var(--m4-black); border-radius: 0; background: transparent; outline: none; text-align: center;
  font: 700 clamp(22px, 2.4vw, 30px)/1 var(--m4-display); color: var(--m4-black); transition: background .2s, color .2s, box-shadow .25s; }
.m4p-code input:focus { box-shadow: 5px 5px 0 var(--m4-volt); }
.m4p-code input.cheio { background: var(--m4-black); color: var(--m4-volt); }
.m4p-re { justify-self: start; }
.m4p-rk { display: grid; grid-template-columns: 1fr auto; border: 2px solid var(--m4-black); }
.m4p-rk code { display: flex; align-items: center; padding: 15px 16px; font: 600 clamp(14px, 1.5vw, 18px)/1.3 var(--m4-mono); letter-spacing: .06em; word-break: break-all; user-select: all; }
.m4p-copy { appearance: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: 0; border-left: 2px solid var(--m4-black); background: var(--m4-volt); color: var(--m4-black); cursor: pointer;
  font: 700 12px/1 var(--m4-display); letter-spacing: .03em; text-transform: uppercase; transition: background .2s, color .2s; }
.m4p-copy svg { width: 18px; height: 18px; }
.m4p-copy:hover { background: #ffd21a; }
.m4p-copy.ok { background: var(--m4-black); color: var(--m4-volt); }
.m4p-okmsg { margin: 0; padding: 14px 16px; background: var(--m4-black); color: var(--m4-paper); font-size: 14.5px; line-height: 1.5; }

/* sucesso: cobre o cartão por um instante antes de seguir */
.m4p-done { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 30px; text-align: center; background: var(--m4-black); color: var(--m4-paper); }
.m4p-done[hidden] { display: none; }
.m4p-done .ck { display: grid; place-items: center; width: 84px; height: 84px; background: var(--m4-volt); color: var(--m4-black); box-shadow: 6px 6px 0 var(--m4-red); }
.m4p-done .ck svg { width: 46px; height: 46px; }
.m4p-done .t1 { font: 800 clamp(24px, 2.6vw, 34px)/1.05 var(--m4-display); letter-spacing: -.03em; text-transform: uppercase; }
.m4p-done .t2 { color: rgba(242, 240, 234, .75); }
.m4p-demo { margin: 18px 0 0; text-align: center; font-size: 10px; letter-spacing: .06em; color: #8c8c92; }

/* faixa inclinada embaixo (como as do início) */
.m4p-band { position: relative; z-index: 2; left: -5%; width: 110%; margin: 34px 0 40px; padding: 15px 0; overflow: hidden; background: var(--m4-volt); color: var(--m4-black); transform: rotate(-2.2deg); }
.m4p-band .row { display: flex; align-items: center; width: max-content; will-change: transform; }
/* opção "Faixa" do painel: reta, ou inclinada que se endireita com a rolagem (o JS leva a rotação a 0) */
.m4p-band.fx-reta { transform: none; }
.m4p-band.fx-endireita { transform: rotate(-5deg); }
.m4p-band span { padding: 0 22px; font: 800 24px/1 var(--m4-display); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.m4p-band i { font-style: normal; font-size: 18px; }

/* ---------- MINHA CONTA ---------- */
.m4p-gate { min-height: 100vh; display: grid; align-items: center; padding: 140px 0 80px;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4p-gate .wrap { display: grid; gap: 22px; justify-items: start; }
.m4p-gate-t { margin: 0; font: 800 clamp(40px, 6.4vw, 96px)/.92 var(--m4-display); letter-spacing: -.04em; text-transform: uppercase; max-width: 14ch; text-wrap: balance; }
.m4p-gate p { margin: 0; max-width: 520px; font-size: 18px; color: rgba(242, 240, 234, .8); }

.m4p-acc { position: relative; padding: 128px 0 70px; overflow: hidden;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4p-acc-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 5vw, 80px); align-items: end; }
.m4p-words--2 .w > span { font-size: clamp(54px, 8vw, 140px); }
.m4p-perfil { display: grid; grid-template-columns: 116px 1fr; gap: 22px; align-items: center; margin-top: 34px; padding: 20px; background: var(--m4-paper); color: var(--m4-black); max-width: 640px; box-shadow: 10px 10px 0 var(--m4-volt); }
.m4p-perfil .av { position: relative; width: 116px; height: 116px; background: var(--m4-volt); overflow: hidden; }
.m4p-perfil .av img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.m4p-perfil .av:hover img { transform: scale(1.06); }
.m4p-perfil .av .m4p-rosto { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.m4p-perfil .av:hover .m4p-rosto { transform: scale(1.06); }
.m4p-perfil .av button { position: absolute; left: 0; right: 0; bottom: 0; appearance: none; border: 0; padding: 7px 0; background: rgba(11, 11, 12, .82); color: var(--m4-paper); font-size: 9.5px; cursor: pointer;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.m4p-perfil .av:hover button, .m4p-perfil .av button:focus-visible { transform: none; }
.m4p-perfil dl { margin: 0; display: grid; gap: 12px; }
.m4p-perfil dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid rgba(11, 11, 12, .12); }
.m4p-perfil dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.m4p-perfil dt { font-size: 10.5px; color: #5b5b62; }
.m4p-perfil dd { margin: 0; display: flex; align-items: baseline; gap: 12px; min-width: 0; font: 600 16px/1.3 var(--m4-body); }
.m4p-perfil .vl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .04em; color: #5b5b62; }
.m4p-perfil .vl.on { color: var(--m4-black); letter-spacing: 0; }
.m4p-perfil .mostra { appearance: none; border: 0; padding: 0 0 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; color: var(--m4-black); font-size: 10.5px; cursor: pointer; }
.m4p-perfil .mostra:hover { color: var(--m4-red); }
.m4p-perfil .plano { display: inline-block; padding: 5px 9px; background: var(--m4-black); color: var(--m4-volt); font: 700 11px/1 var(--m4-display); text-transform: uppercase; letter-spacing: .03em; }
.m4p-atalhos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.m4p-atalhos a, .m4p-atalhos button { appearance: none; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; border: 1px solid var(--m4-line); background: transparent; color: var(--m4-paper); cursor: pointer;
  font: 600 12px/1 var(--m4-mono); letter-spacing: .06em; text-transform: uppercase; transition: border-color .25s, color .25s, background .25s; }
.m4p-atalhos svg { width: 18px; height: 18px; }
.m4p-atalhos a:hover, .m4p-atalhos button:hover { border-color: var(--m4-volt); color: var(--m4-volt); }
.m4p-atalhos .tw.ligado { border-color: #9146ff; color: #c3a0ff; }
.m4p-atalhos .sair:hover { border-color: var(--m4-red); color: var(--m4-red); }
.m4p-saldo { display: grid; gap: 18px; padding: 28px; background: var(--m4-black); border: 2px solid var(--m4-paper); box-shadow: 12px 12px 0 var(--m4-red); }
.m4p-saldo > span { color: var(--m4-gray); }
.m4p-saldo .num { display: flex; align-items: center; gap: 16px; }
.m4p-saldo .num img { width: clamp(46px, 4.4vw, 64px); height: auto; filter: drop-shadow(0 6px 18px rgba(255, 225, 77, .35)); }
.m4p-saldo b { font: 800 clamp(48px, 6vw, 92px)/.9 var(--m4-display); letter-spacing: -.04em; color: var(--m4-volt); font-variant-numeric: tabular-nums; }
.m4p-saldo .m4-btn { justify-content: center; }

.m4p-sec { padding: clamp(70px, 9vw, 130px) 0; border-top: 1px solid var(--m4-line); }
.m4p-sh { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 30px; margin-bottom: 40px; }
.m4p-sh .m4-h2 em, .m4p-doa .m4-h2 em { font-style: normal; color: var(--m4-volt); }
.m4p-sh .ct { font-size: 18px; color: var(--m4-gray); vertical-align: middle; letter-spacing: 0; }
.m4p-trgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 26px; }
.m4p-tr { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; padding: 18px; border: 2px solid var(--m4-paper); background: var(--m4-ink);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s cubic-bezier(.2, .8, .2, 1); }
.m4p-tr:hover { transform: translate(-4px, -4px) rotate(-.6deg); box-shadow: 10px 10px 0 var(--m4-volt); }
.m4p-tr .no { position: absolute; top: 12px; right: 14px; color: var(--m4-gray); }
.m4p-tr .im { position: relative; height: 170px; background: radial-gradient(circle at 50% 70%, rgba(255, 225, 77, .2), transparent 65%), var(--m4-black); overflow: hidden; }
/* a arte é de corpo até as coxas: mostra do rosto ao peito, presa embaixo da caixa */
#app .m4p-tr .im img { position: absolute; left: 50%; top: 4%; height: 240%; width: auto; max-width: none; transform: translateX(-50%); transform-origin: 50% 0; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
#app .m4p-tr:hover .im img { transform: translateX(-50%) scale(1.05); }
.m4p-tr .tx { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.m4p-tr h3 { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 clamp(22px, 2vw, 30px)/1 var(--m4-display); text-transform: uppercase; letter-spacing: -.03em; }
.m4p-tr .lv b { color: var(--m4-volt); font-size: 14px; }
.m4p-tr .mu { display: inline-flex; align-items: center; gap: 8px; color: var(--m4-gray); }
.m4p-tr .mu i { width: 8px; height: 8px; background: var(--m4-gray); }
.m4p-tr.on .mu { color: #6fe39a; }
.m4p-tr.on .mu i { background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: m4p-on 1.8s infinite; }
@keyframes m4p-on { 70% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.m4p-lk2 { appearance: none; margin-top: 4px; padding: 0 0 2px; border: 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; color: var(--m4-paper); cursor: pointer; font-size: 11px; }
.m4p-lk2:hover { color: var(--m4-volt); }
.m4p-vazio { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; padding: 30px; border: 2px dashed rgba(242, 240, 234, .35); }
.m4p-vazio .ic { width: 84px; height: 84px; color: var(--m4-volt); }
.m4p-vazio .ic svg { width: 100%; height: 100%; }
.m4p-vazio p { margin: 0; font-size: 17px; color: rgba(242, 240, 234, .8); }
.m4p-vazio strong { display: block; margin-bottom: 4px; font: 700 18px/1.3 var(--m4-display); text-transform: uppercase; color: var(--m4-paper); }

.m4p-lc .olho { color: #c3a0ff; }
.m4p-lc .olho i { width: 8px; height: 8px; background: #9146ff; animation: m4p-on 1.8s infinite; }
.m4p-lc .m4-label::before { display: none; }
.m4p-lc-p { max-width: 640px; margin: -10px 0 36px; font-size: 18px; color: rgba(242, 240, 234, .8); }
.m4p-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--m4-paper); }
.m4p-stats > div { display: grid; gap: 14px; padding: 24px 26px; }
.m4p-stats > div + div { border-left: 2px solid var(--m4-paper); }
.m4p-stats span { color: var(--m4-gray); }
.m4p-stats b { font: 800 clamp(40px, 4.6vw, 72px)/.9 var(--m4-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.m4p-stats > div:first-child b { color: var(--m4-volt); }
.m4p-como { margin: 54px 0 22px; font-size: 12px; color: var(--m4-gray); }
.m4p-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.m4p-passos li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--m4-paper); }
.m4p-passos .n { font: 800 clamp(48px, 5vw, 80px)/.9 var(--m4-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--m4-paper); }
.m4p-passos h4 { margin: 0; font: 700 17px/1.2 var(--m4-display); text-transform: uppercase; }
.m4p-passos p { margin: 0; color: rgba(242, 240, 234, .72); }
.m4p-lc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 46px; }
.m4p-lc-act p { margin: 0; max-width: 460px; color: rgba(242, 240, 234, .75); }
.m4p-lc-act a { font-weight: 700; color: var(--m4-volt); white-space: nowrap; }
.m4p .m4p-twbtn { border: 0; cursor: pointer; background: #9146ff; color: #fff; box-shadow: 6px 6px 0 var(--m4-paper); }
.m4p .m4p-twbtn .mi { gap: 12px; }
.m4p .m4p-twbtn svg { width: 20px; height: 20px; }
.m4p .m4p-twbtn:hover { box-shadow: 9px 9px 0 var(--m4-paper); }
.m4p .m4p-twbtn.ligado { background: var(--m4-paper); color: #6c2bd9; box-shadow: 6px 6px 0 #9146ff; }

.m4p-doa-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.m4p-doa-f { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; padding: 28px; background: var(--m4-paper); color: var(--m4-black); box-shadow: 12px 12px 0 var(--m4-volt); }
.m4p-valor { display: grid; gap: 8px; }
.m4p-valor > span { font-size: 11px; color: #5b5b62; }
.m4p-valor .in { display: flex; align-items: baseline; gap: 10px; border-bottom: 3px solid var(--m4-black); }
.m4p-valor b { font: 800 30px/1 var(--m4-display); }
.m4p-valor input { flex: 1; width: 100%; min-width: 0; appearance: none; border: 0; background: transparent; outline: none; padding: 6px 0 10px; font: 800 clamp(44px, 5vw, 72px)/1 var(--m4-display); letter-spacing: -.04em; color: var(--m4-black); font-variant-numeric: tabular-nums; }
.m4p-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m4p-chips button { appearance: none; height: 38px; padding: 0 14px; border: 2px solid var(--m4-black); background: transparent; color: var(--m4-black); cursor: pointer; font-size: 12px; transition: background .2s, color .2s; }
.m4p-chips button:hover { background: rgba(11, 11, 12, .08); }
.m4p-chips button.on { background: var(--m4-black); color: var(--m4-volt); }
.m4p-doa-f .bonus { margin: 0; font-size: 11px; color: #5b5b62; }
.m4p-doa-f .m4-btn { justify-content: center; border: 0; cursor: pointer; }
.m4p-cta .big { max-width: 16ch; }

/* treinador criado na prévia: moldura + retrato do site em camadas */
.m4p-tr .im--perfil { background: var(--m4-black); }
.m4p-tr .im--perfil.sem { background: #13254d; }
#app .m4p-tr .im--perfil img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 12%; transform: none; }
/* 07/11 (vídeo 0336: "meus treinadores... colocar o card aqui; um pouco maior, igual àquela parte do Seu perfil / desse tamanho
   do card do topo, ao invés de mais curtinho"): no computador cada treinador vira um CARD em pé (o card inteiro com a moldura,
   4:5, como o do topo da conta), maior, com nome, nível e mundo embaixo */
@media (min-width: 761px) {
  .m4p-trgrid { grid-template-columns: repeat(auto-fill, minmax(240px, 290px)); gap: 28px; }
  .m4p-tr { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; padding: 12px 12px 16px; }
  .m4p-tr .im { height: auto; aspect-ratio: 4 / 5; }
  #app .m4p-tr .im--perfil img { object-position: 50% 0; }
  .m4p-tr .tx { padding: 14px 4px 0; }
  .m4p-tr .no { z-index: 3; top: 20px; right: 20px; padding: 3px 7px; background: rgba(11, 11, 12, .72); color: var(--m4-paper); }
}
#app .m4p-tr:hover .im--perfil .ch { transform: scale(1.05); }

/* ===== MINHA CONTA (06/11, vídeo da área logada) =====
   "Essa minha conta tá muito grande... coloca aquele card grande, coloca as informações aqui; o saldo mantém na direita;
   os botões mais coloridos (Twitch roxo, Tickets vermelho, Segurança azul, Doação amarelo); depois Efetuar doação, Live
   Coins todo roxo com quadriculado e movimento, e os treinadores por último." */
.m4p-acc { padding: 94px 0 54px; }
.m4p-acc-in { grid-template-columns: minmax(230px, 292px) minmax(0, 1fr) minmax(280px, 370px); gap: clamp(24px, 3vw, 48px); align-items: center; }
.m4p-acc-card { perspective: 1100px; min-width: 0; }
.m4p-cartao--acc { max-width: none; box-shadow: 12px 12px 0 var(--m4-volt); }
.m4p-cartao--acc .cv { background: var(--cor, var(--m4-black)); }
.m4p-cartao--acc .rod { padding-top: 14px; }
.m4p-cartao--acc .nm { font-size: clamp(22px, 1.9vw, 30px); }
.m4p-cartao--acc .troca { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px 0 11px; appearance: none; border: 0;
  background: rgba(11, 11, 12, .84); color: var(--m4-paper); cursor: pointer; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; transition: background .25s, color .25s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.m4p-cartao--acc .troca svg { width: 16px; height: 16px; flex: none; }
.m4p-cartao--acc .troca:hover, .m4p-cartao--acc .troca:focus-visible { background: var(--m4-volt); color: var(--m4-black); transform: translateY(-2px); outline: none; }
.m4p-acc-l { min-width: 0; }
.m4p-words--acc { display: flex; flex-wrap: wrap; column-gap: .26em; margin-top: 10px; font-size: clamp(32px, 3.3vw, 56px); }
.m4p-words--acc .w > span { font-size: 1em; }
.m4p-words--acc .w2 > span { -webkit-text-stroke-width: 3px; }
.m4p-perfil--acc { grid-template-columns: minmax(0, 1fr); max-width: none; margin-top: 18px; padding: 16px 20px; box-shadow: 8px 8px 0 var(--m4-volt); }
.m4p-perfil--acc dl > div { grid-template-columns: 136px minmax(0, 1fr); }
/* "Seu plano": VIP ativo em verde; sem VIP, o "Ser VIP →" leva à página do VIP (a mesma compra do jogo) */
.m4p-perfil .plano.vip { background: #1d7a3c; color: #fff; }
.m4p-servip { padding-bottom: 2px; border-bottom: 2px solid currentColor; color: var(--m4-black); font-size: 11px; font-weight: 700; letter-spacing: .06em; transition: color .2s; }
.m4p-servip:hover { color: var(--m4-red); }
/* botões coloridos (cada um com a sombra dura num tom mais escuro da própria cor) */
.m4p-atalhos--cor { gap: 12px 10px; margin-top: 20px; }
.m4p-atalhos--cor a, .m4p-atalhos--cor button { position: relative; height: 46px; padding: 0 16px 0 14px; border: 0; font: 700 12px/1 var(--m4-display); letter-spacing: .03em;
  box-shadow: 4px 4px 0 var(--sh, rgba(0, 0, 0, .5)); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s cubic-bezier(.2, .8, .2, 1), filter .25s, background .25s, color .25s; }
.m4p-atalhos--cor a:hover, .m4p-atalhos--cor button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sh, rgba(0, 0, 0, .5)); filter: brightness(1.07); }
.m4p-atalhos--cor .c-doa, .m4p-atalhos--cor .c-doa:hover { background: var(--m4-volt); color: var(--m4-black); --sh: var(--m4-red); }
.m4p-atalhos--cor .c-seg, .m4p-atalhos--cor .c-seg:hover { background: #2f6bff; color: #fff; --sh: #0e2d7a; }
.m4p-atalhos--cor .c-tk, .m4p-atalhos--cor .c-tk:hover { background: var(--m4-red); color: #fff; --sh: #7c1010; }
.m4p-atalhos--cor .c-tw, .m4p-atalhos--cor .c-tw:hover { background: #772ce8; color: #fff; --sh: #bf94ff; }
.m4p-atalhos--cor .c-tw.ligado, .m4p-atalhos--cor .c-tw.ligado:hover { background: #1c1430; color: #cbb0ff; box-shadow: inset 0 0 0 2px #772ce8; }
.m4p-atalhos--cor .sair { background: transparent; color: var(--m4-paper); box-shadow: inset 0 0 0 2px rgba(242, 240, 234, .35); }
.m4p-atalhos--cor .sair:hover { color: var(--m4-red); box-shadow: inset 0 0 0 2px var(--m4-red); transform: none; filter: none; }
/* a Doação pulsa (chama para doar) */
.m4:not(.is-reduced) .m4p-atalhos--cor .c-doa { animation: acc-pulso 2.1s ease-out infinite; }
@keyframes acc-pulso { 0% { box-shadow: 4px 4px 0 var(--m4-red), 0 0 0 0 rgba(255, 225, 77, .65); } 70%, 100% { box-shadow: 4px 4px 0 var(--m4-red), 0 0 0 14px rgba(255, 225, 77, 0); } }
.m4p-acc-r { min-width: 0; }
/* as seções de baixo mais juntas (o dono quer ver doação, Live Coins e treinadores sem tanto espaço) */
.m4p-acc ~ .m4p-sec { padding: clamp(42px, 4.4vw, 72px) 0; }
.m4p-acc ~ .m4p-doa { padding-top: clamp(28px, 2.6vw, 44px); border-top: 0; }
.m4p-acc ~ .m4p-sec .m4-h2 { font-size: clamp(38px, 5.2vw, 90px); }
.m4p-acc ~ .m4p-lc--tw .m4-h2 { font-size: clamp(36px, 4.6vw, 78px); }
.m4p-acc .m4p-saldo { padding: 24px; }
.m4p-acc .m4p-saldo b { font-size: clamp(40px, 3.7vw, 64px); }
@media (max-width: 1180px) {
  .m4p-acc-in { grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); }
  .m4p-acc-r { grid-column: 1 / -1; }
}
@media (max-width: 1040px) {
  .m4p-acc-in { grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .m4p-acc { padding-top: 92px; }
  .m4p-acc-in { grid-template-columns: minmax(0, 1fr); }
  .m4p-acc-card { max-width: 300px; }
  .m4p-perfil--acc dl > div { grid-template-columns: 1fr; gap: 4px; }
}
/* Efetuar doação: os pacotes com a imagem pequena junto do preço; o Doar pulsa */
.m4p-chips--pac { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.m4p-chips--pac button { height: auto; display: grid; justify-items: center; align-content: center; gap: 5px; padding: 9px 4px 10px; font-size: 11.5px; letter-spacing: .02em; white-space: nowrap; }
.m4p-chips--pac button img { width: 46px; height: 46px; max-width: none; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .22)); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.m4p-chips--pac button:hover img, .m4p-chips--pac button.on img { transform: translateY(-3px) scale(1.07); }
.m4p-chips--pac button img.cena { border-radius: 5px; object-fit: cover; }   /* pacotes 5/6 na versão cena (pintura com fundo) */
.m4p-doa-f .bonus { font-weight: 600; color: #3d3d44; }
.m4p-doa-go .ar { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.m4:not(.is-reduced) .m4p-doa-f .m4p-doa-go { animation: doa-pulso 1.9s ease-out infinite; }
.m4:not(.is-reduced) .m4p-doa-f .m4p-doa-go .ar { animation: doa-seta 1.9s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes doa-pulso { 0% { box-shadow: 6px 6px 0 var(--m4-red), 0 0 0 0 rgba(255, 59, 59, .5); } 70%, 100% { box-shadow: 6px 6px 0 var(--m4-red), 0 0 0 14px rgba(255, 59, 59, 0); } }
@keyframes doa-seta { 0%, 55%, 100% { transform: translateX(0); } 70% { transform: translateX(6px); } }
@media (max-width: 560px) { .m4p-chips--pac { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Live Coins: o bloco todo na cor da Twitch — cabeçalho próprio (logo, título, AO VIVO), quadriculado roxo andando
   devagar (como o fundo da página de foto), moedinhas subindo ao fundo e o logo boiando */
.m4p-lc--tw { position: relative; overflow: hidden; border-top: 0; color: #fff; isolation: isolate;
  background: radial-gradient(120% 95% at 88% 0%, #9146ff 0%, #772ce8 40%, #4c1ba6 100%); }
.m4p-lc--tw .lc-grade { position: absolute; z-index: -1; left: 0; right: 0; top: -88px; bottom: 0; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, rgba(255, 255, 255, .13) 1px, transparent 1px) 0 0 / 44px 100%;
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.m4p-lc--tw .lc-moedas { position: absolute; z-index: -1; inset: 0; pointer-events: none; overflow: hidden; }
.m4p-lc--tw .lc-moedas img { position: absolute; bottom: -60px; left: calc(3% + var(--i) * 11.4%); width: clamp(22px, 2.2vw, 34px); height: auto; max-width: none; opacity: 0;
  filter: drop-shadow(0 6px 12px rgba(20, 0, 60, .5)); }
.m4p-lc--tw > .wrap { position: relative; }
.lc-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 24px; margin-bottom: 30px; padding-bottom: 26px; border-bottom: 2px solid rgba(255, 255, 255, .24); }
.lc-logo { display: grid; place-items: center; width: clamp(62px, 5.6vw, 88px); aspect-ratio: 1; background: #fff; color: #772ce8; box-shadow: 8px 8px 0 #2a0d63; }
.lc-logo svg { width: 56%; height: 56%; }
.lc-tt { display: grid; gap: 8px; min-width: 0; }
.m4p-lc--tw .lc-tt .m4-label { color: #e6d8ff; }
.m4p-lc--tw .m4-h2 { color: #fff; }
.m4p-lc--tw .m4-h2 em { font-style: normal; color: #e6d8ff; }
.m4p-lc--tw .olho { align-self: center; padding: 9px 13px; background: rgba(20, 4, 60, .35); color: #fff; }
.m4p-lc--tw .olho i { background: #ff4545; animation: none; }
.m4p-lc--tw .m4p-lc-p { margin: 0 0 30px; color: rgba(255, 255, 255, .9); }
.m4p-lc--tw .m4p-stats { border-color: rgba(255, 255, 255, .85); background: rgba(20, 4, 60, .22); }
.m4p-lc--tw .m4p-stats > div + div { border-color: rgba(255, 255, 255, .85); }
.m4p-lc--tw .m4p-stats span { color: #e6d8ff; }
.m4p-lc--tw .m4p-stats b, .m4p-lc--tw .m4p-stats > div:first-child b { color: #fff; }
.m4p-lc--tw .m4p-como { color: #e6d8ff; }
.m4p-lc--tw .m4p-passos li { border-top-color: rgba(255, 255, 255, .85); }
.m4p-lc--tw .m4p-passos .n { -webkit-text-stroke-color: #fff; }
.m4p-lc--tw .m4p-passos p { color: rgba(255, 255, 255, .84); }
.m4p-lc--tw .m4p-lc-act p { color: rgba(255, 255, 255, .86); }
.m4p-lc--tw .m4p-lc-act a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.m4p .m4p-lc--tw .m4p-twbtn { background: #fff; color: #6a22d8; box-shadow: 6px 6px 0 #2a0d63; }
.m4p .m4p-lc--tw .m4p-twbtn:hover { box-shadow: 9px 9px 0 #2a0d63; }
.m4p .m4p-lc--tw .m4p-twbtn.ligado { background: #2a0d63; color: #e6d8ff; box-shadow: 6px 6px 0 #fff; }
.m4:not(.is-reduced) .m4p-lc--tw .lc-grade { animation: lc-grade 7s linear infinite; }
.m4:not(.is-reduced) .m4p-lc--tw .lc-moedas img { animation: lc-sobe 10s linear infinite; animation-delay: calc(var(--i) * -1.1s); }
.m4:not(.is-reduced) .lc-logo { animation: lc-logo 3.8s ease-in-out infinite; }
.m4:not(.is-reduced) .m4p-lc--tw .olho i { animation: lv-pisca 1.2s ease-in-out infinite; }
.m4p-lc--tw .m4p-passos li { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.m4p-lc--tw .m4p-passos li:hover { transform: translateY(-4px); }
/* passos que acendem em ordem (m4p.js): a linha de cima apagada corre branca e o número fica cheio */
.m4p-lc--tw .m4p-passos li { position: relative; border-top-color: rgba(255, 255, 255, .28); }
.m4p-lc--tw .m4p-passos li::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .75);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.m4p-lc--tw .m4p-passos .n { transition: color .6s ease .15s; }
.m4p-lc--tw .m4p-passos li.acende::before { transform: scaleX(1); }
.m4p-lc--tw .m4p-passos li.acende .n { color: #fff; }
@keyframes lc-grade { to { transform: translateY(44px); } }
@keyframes lc-sobe { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: .5; } 85% { opacity: .4; } 100% { transform: translateY(-1100px) rotate(260deg); opacity: 0; } }
@keyframes lc-logo { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@media (max-width: 720px) { .lc-cab { grid-template-columns: auto minmax(0, 1fr); } .lc-cab .olho { grid-column: 1 / -1; justify-self: start; } }

/* ---------- CRIAR PERSONAGEM ---------- */
.m4p-pe { position: relative; padding: 128px 0 110px; overflow: hidden;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4p-pe-top { display: grid; gap: 0; margin-bottom: 46px; }
.m4p-words--pe { margin-top: 18px; }
.m4p-words--pe .w > span { font-size: clamp(46px, 6.6vw, 118px); }
.m4p-steps { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; }
.m4p-steps li { display: inline-flex; align-items: center; gap: 12px; padding-right: 22px; margin-right: 22px; border-right: 1px solid var(--m4-line); }
.m4p-steps li:last-child { border-right: 0; }
.m4p-steps .b { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--m4-paper); font-size: 11px; }
.m4p-steps .b svg { width: 16px; height: 16px; }
.m4p-steps .ok .b { background: var(--m4-volt); border-color: var(--m4-volt); color: var(--m4-black); }
.m4p-steps .ok .t { color: var(--m4-gray); }
.m4p-steps .on .b { background: var(--m4-paper); color: var(--m4-black); }
.m4p-steps .t { font-size: 11.5px; }
.m4p-pe-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.m4p-pe-prev { position: sticky; top: 100px; perspective: 1100px; }
.m4p-cartao { position: relative; transform-style: preserve-3d; max-width: 440px; margin: 0 auto; background: var(--m4-paper); padding: 14px 14px 18px; box-shadow: 14px 14px 0 var(--m4-volt); will-change: transform; }
.m4p-cartao .cv { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--m4-black); transform-style: preserve-3d; }
#app .m4p-cartao .cv img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.m4p-cartao .br { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .95), rgba(255, 225, 77, .4) 45%, transparent 70%); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.m4p-cartao .rod { display: grid; gap: 6px; padding: 16px 4px 0; color: var(--m4-black); }
.m4p-cartao .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 clamp(24px, 2.4vw, 34px)/1 var(--m4-display); letter-spacing: -.03em; text-transform: uppercase; }
.m4p-cartao .inf { font-size: 11px; color: #5b5b62; }
.m4p-cartao .inf b { color: var(--m4-black); }
.m4p-pe-f { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 30px clamp(22px, 3vw, 40px) 26px; background: var(--m4-paper); color: var(--m4-black); box-shadow: 12px 12px 0 var(--m4-red); }
.m4p-pe-f .etapa { font-size: 11px; color: #5b5b62; }
.m4p-pe-f .m4p-vt { margin-top: -10px; }
.m4p-pe-f .m4p-vt em, .m4p-pe-ok .m4-h2 em { font-style: normal; display: block; }
.m4p-pe-f .m4p-vt em { color: var(--m4-red); }
.m4p-pe-ok .m4-h2 em { color: var(--m4-volt); }
.m4p-seg, .m4p-mundo { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; min-width: 0; }
.m4p-seg legend, .m4p-mundo legend { padding: 0; margin-bottom: 10px; font-size: 11px; color: #5b5b62; }
.m4p-seg .op { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--m4-black); }
.m4p-seg label, .m4p-mundo label { position: relative; cursor: pointer; }
.m4p-seg input, .m4p-mundo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.m4p-seg span { display: grid; place-items: center; height: 48px; font: 700 13px/1 var(--m4-display); text-transform: uppercase; letter-spacing: .03em; transition: background .25s, color .25s; }
.m4p-seg input:checked + span { background: var(--m4-black); color: var(--m4-volt); }
.m4p-seg input:focus-visible + span, .m4p-mundo input:focus-visible + .mn { outline: 2px solid var(--m4-red); outline-offset: -4px; }
.m4p-mundo .mn { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border: 2px solid var(--m4-black); background: var(--m4-black); color: var(--m4-paper); }
.m4p-mundo .mn b { font: 800 22px/1 var(--m4-display); text-transform: uppercase; letter-spacing: -.02em; }
.m4p-mundo small { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; color: #6fe39a; }
.m4p-mundo small i { width: 8px; height: 8px; background: #3ddc84; animation: m4p-on 1.8s infinite; }
.m4p-foto { display: grid; gap: 14px; }
.m4p-foto .hd { display: grid; gap: 6px; }
.m4p-foto .hd strong { font-size: 11px; }
.m4p-foto .hd p { margin: 0; font-size: 13.5px; color: #4a4a50; }
.m4p-ftabs { display: inline-grid; grid-template-columns: auto auto; justify-self: start; border: 2px solid var(--m4-black); }
.m4p-ftabs button { appearance: none; height: 40px; padding: 0 18px; border: 0; background: transparent; color: var(--m4-black); cursor: pointer; font: 700 12px/1 var(--m4-display); text-transform: uppercase; letter-spacing: .03em; transition: background .25s, color .25s; }
.m4p-ftabs button[aria-selected="true"] { background: var(--m4-black); color: var(--m4-volt); }
.m4p-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; max-height: 300px; overflow: auto; padding: 4px 4px 4px 0; overscroll-behavior: contain; }
.m4p-grade[hidden] { display: none; }
.m4p-grade .it { position: relative; appearance: none; padding: 0; border: 2px solid transparent; background: var(--m4-black); cursor: pointer; aspect-ratio: 4 / 5; overflow: hidden; transition: border-color .2s, transform .3s cubic-bezier(.2, .8, .2, 1); }
#app .m4p-grade .it img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.m4p-grade .it span { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 2px; background: rgba(11, 11, 12, .78); color: var(--m4-paper); font-size: 9px; text-align: center; }
.m4p-grade .it:hover { transform: translateY(-3px); }
.m4p-grade .it.on { border-color: var(--m4-red); box-shadow: 4px 4px 0 var(--m4-red); }
.m4p-pe-ok { display: grid; gap: 20px; align-content: start; padding-top: 10px; }
.m4p-pe-ok[hidden] { display: none; }
.m4p-pe-ok > p { margin: 0; font-size: 19px; color: rgba(242, 240, 234, .85); }
.m4p-pe-ok .fa { max-width: 520px; font-size: 11px; line-height: 1.6; color: var(--m4-gray); }
.m4p-pe-ok .fa a { color: var(--m4-volt); }

@media (max-width: 1040px) {
  .m4p-pe-in { grid-template-columns: 1fr; }
  .m4p-pe-prev { position: relative; top: 0; }
  .m4p-cartao { max-width: 340px; }
}
/* 06/11 (vídeo da área logada: "esse novo treinador tá meio grande... pega esse quadrado e sobe, deixa na metade... pra ele
   conseguir ver tudo"): NUMA TELA SÓ — o formulário sobe até a altura do título; à esquerda o título (menor) e, embaixo
   dele, o cartão grande, que fica na metade do formulário */
@media (min-width: 1041px) {
  .m4p-pe { padding-top: 92px; padding-bottom: 70px; }
  .m4p-pe > .wrap { display: grid; grid-template-columns: minmax(300px, 392px) minmax(0, 1fr); grid-template-areas: "top form" "prev form"; grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 4.6vw, 84px); align-items: start; }
  .m4p-pe-in { display: contents; }
  .m4p-pe-top { grid-area: top; margin-bottom: 26px; }
  .m4p-words--pe { margin-top: 10px; }
  .m4p-words--pe .w > span { font-size: clamp(38px, 3.5vw, 60px); }
  .m4p-pe-prev { grid-area: prev; position: relative; top: 0; }
  .m4p-pe-prev .m4p-cartao { max-width: 360px; margin: 0; }
  .m4p-pe-f, .m4p-pe-ok { grid-area: form; }
  .m4p-pe-f { gap: 13px; padding-top: 20px; padding-bottom: 18px; }   /* cabe inteiro na tela do dono (1707×885) */
  .m4p-pe .m4p-grade { max-height: var(--gr-2, 196px); }   /* 2 fileiras inteiras (o JS mede); o resto rola dentro */
  .m4p-pe-f .m4p-vt { font-size: clamp(24px, 1.9vw, 32px); }
}
/* a imagem nova entra por cima da antiga (troca sem quadro em branco) */
#app .m4p-cartao .cv img.nv { z-index: 1; }
#app .m4p-cartao .cv .ch, #app .m4p-cartao .cv .ch.nv { z-index: 2; }
.m4p-cartao .br { z-index: 3; }

@media (max-width: 1040px) {
  .m4p-doa-in { grid-template-columns: 1fr; }   /* a conta tem as regras dela (cartão + dados até 720 px) */
  .m4p-stats, .m4p-passos { grid-template-columns: 1fr; }
  .m4p-stats > div + div { border-left: 0; border-top: 2px solid var(--m4-paper); }
  .m4p-vazio { grid-template-columns: 1fr; justify-items: start; }
}
@media (max-width: 560px) {
  .m4p-perfil { grid-template-columns: 1fr; }
  .m4p-perfil dl > div { grid-template-columns: 1fr; gap: 4px; }
  .m4p-tr { grid-template-columns: 110px 1fr; }
  .m4p-tr .im { height: 140px; }
}
@media (max-width: 1040px) {
  .m4p-auth { padding-top: 110px; }
  .m4p-auth-in { grid-template-columns: 1fr; gap: 44px; }
  .m4p-card { max-width: 640px; margin: 0 auto; }
  .m4p-words .w > span { font-size: clamp(48px, 12.5vw, 120px); }
}
@media (max-width: 560px) {
  .m4p-two { grid-template-columns: 1fr; }
  .m4p-card { padding: 24px 18px 18px; box-shadow: 8px 8px 0 var(--m4-volt); }
  .m4p-code { gap: 7px; }
  .m4p-band span { font-size: 18px; padding: 0 16px; }
  .m4p-eu .nm { display: none; }
  .m4p-eu { padding-right: 4px; }
}

/* ---------- RANKING (treinadores e guildas) ----------
   Pódio: a montagem do site (ranking-jogo.css / ranking-guildas.css), com as mesmas porcentagens das peças do designer.
   Em volta: o Modelo 4 (palavras gigantes, abas com pílula, faixa, tabela com varrida amarela, janela papel + preto). */
.m4p-rank { position: relative; overflow: hidden; background: var(--m4-black); }
/* em cima, a grade do M4 (título e pódio); embaixo, preto liso (a tabela lê melhor) e a faixa amarela cobre a emenda */
/* 06/11 (2º vídeo): cabeçalho mais baixo (título 118 → 76 px, menos respiro) para o pódio inteiro caber ao chegar */
.m4p-rank-cima { position: relative; padding: 92px 0 46px;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4p-rank-baixo { position: relative; padding: 0 0 120px; background: var(--m4-black); }
.m4p-rank-cima::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 190px; pointer-events: none; background: linear-gradient(rgba(11, 11, 12, 0), var(--m4-black)); }
.m4p-rank-cima > .wrap { position: relative; z-index: 1; }
.m4p-rank-top { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 18px 32px; }
.m4p-rank-top::after { content: ""; grid-column: 1 / -1; height: 1px; background: var(--m4-line); }
.m4p-rank-top .tt { display: grid; justify-items: start; min-width: 0; }
.m4p-words--rank { margin-top: 12px; }
.m4p-words--rank .w > span { font-size: clamp(36px, 4.4vw, 76px); }
.m4p-rank .m4p-palco { margin-top: clamp(20px, 2.2vw, 34px); }
.m4p-rank-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }
@media (min-width: 1100px) {
  .m4p-rank-top { grid-template-columns: minmax(0, 1fr) auto; }
  .m4p-rank-bar { flex-direction: column-reverse; align-items: flex-end; justify-content: flex-start; gap: 12px; padding-bottom: 8px; }
  .m4p-rmundo { height: 40px; }
}
.m4p-rtabs { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, auto); border: 2px solid var(--m4-paper); }
.m4p-rtabs button { position: relative; z-index: 2; appearance: none; height: 50px; padding: 0 26px; border: 0; background: transparent; color: var(--m4-paper); cursor: pointer;
  font: 700 13px/1 var(--m4-display); letter-spacing: .04em; text-transform: uppercase; transition: color .3s; }
.m4p-rtabs button[aria-selected="true"] { color: var(--m4-black); }
.m4p-rtabs button[aria-selected="false"]:hover { color: var(--m4-volt); }
.m4p-rtabs button:focus-visible { outline: 2px solid var(--m4-red); outline-offset: -6px; }
.m4p-rtabs .pill { position: absolute; z-index: 1; top: 0; left: 0; width: 50%; height: 100%; background: var(--m4-volt); }
.m4p-rmundo { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px; border: 1px solid var(--m4-line); color: var(--m4-paper); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.m4p-rmundo svg { width: 18px; height: 18px; color: var(--m4-volt); }

/* palco */
.m4p-palco { position: relative; max-width: 1200px; margin: clamp(28px, 3.2vw, 52px) auto 0; }
.m4p-palco[hidden], .m4p-rank .m4p-tb[hidden], .m4p-membros[hidden], .m4p-perf[hidden] { display: none !important; }
.m4p-palco::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 76%; height: 118%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 225, 77, .1), rgba(255, 225, 77, 0)); }
.m4p-carta, .m4p-lugar { appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m4p-carta:focus-visible, .m4p-lugar:focus-visible { outline: none; }
div.m4p-lugar { cursor: default; }   /* guildas: só exibição (06/11) */
.m4p-perf .cx::-webkit-scrollbar { display: none; }

/* cartinha do lugar (pódio e janela do perfil): a célula do site em px da base 1080 (--cw x --ch) e as peças em % dela */
.m4p-cc { position: relative; display: block; container-type: inline-size; }
.m4p-cc.l1 { --cw: 387; --ch: 774; } .m4p-cc.l2 { --cw: 387; --ch: 689; } .m4p-cc.l3 { --cw: 388; --ch: 689; } .m4p-cc.l4 { --cw: 372; --ch: 687; } .m4p-cc.l5 { --cw: 371; --ch: 685; }
.m4p-cc .corpo { position: absolute; inset: 0; display: block; }
.m4p-cc .pc { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.m4p-cc.l1 .brilho { left: 0; top: 3.941%; width: 100%; height: 85.271%; }
.m4p-cc.l1 .base   { left: 12.403%; top: 7.881%; width: 74.935%; height: 79.587%; }
.m4p-cc.l1 .borda  { left: 6.718%; top: 5.297%; width: 86.305%; height: 82.3%; }
.m4p-cc.l1 .podio  { left: 26.873%; top: 79.328%; width: 40.31%; height: 20.672%; }
.m4p-cc.l1 .nivel  { left: 49.935%; top: 13.017%; height: 4.457%; }
.m4p-cc.l2 .brilho { left: 0; top: 1.669%; width: 100%; height: 94.194%; }
.m4p-cc.l2 .base   { left: 12.791%; top: 8.418%; width: 74.935%; height: 85.776%; }
.m4p-cc.l2 .borda  { left: 7.235%; top: 5.951%; width: 86.047%; height: 81.277%; }
.m4p-cc.l2 .podio  { left: 23.256%; top: 77.794%; width: 39.276%; height: 22.206%; }
.m4p-cc.l2 .nivel  { left: 50.388%; top: 13.498%; height: 4.209%; }
.m4p-cc.l3 .brilho { left: 0; top: 1.814%; width: 100%; height: 94.049%; }
.m4p-cc.l3 .base   { left: 12.758%; top: 8.418%; width: 74.742%; height: 85.776%; }
.m4p-cc.l3 .borda  { left: 7.216%; top: 5.951%; width: 85.825%; height: 79.826%; }
.m4p-cc.l3 .podio  { left: 37.113%; top: 77.794%; width: 39.433%; height: 22.206%; }
.m4p-cc.l3 .nivel  { left: 50.064%; top: 14.369%; height: 4.935%; }
.m4p-cc.l4 .brilho { left: 0; top: 4.294%; width: 100%; height: 91.849%; }
.m4p-cc.l4 .base   { left: 8.871%; top: 8.443%; width: 77.957%; height: 86.026%; }
.m4p-cc.l4 .borda  { left: 2.957%; top: 5.968%; width: 89.785%; height: 15.284%; }
.m4p-cc.l4 .podio  { left: 29.032%; top: 80.64%; width: 40.323%; height: 19.36%; }
.m4p-cc.l4 .nivel  { left: 47.984%; top: 14.665%; height: 4.44%; }
.m4p-cc.l5 .brilho { left: 0; top: 4.307%; width: 100%; height: 92.117%; }
.m4p-cc.l5 .base   { left: 13.208%; top: 8.467%; width: 78.167%; height: 86.277%; }
.m4p-cc.l5 .borda  { left: 7.278%; top: 5.985%; width: 90.027%; height: 15.328%; }
.m4p-cc.l5 .podio  { left: 30.189%; top: 80.584%; width: 40.162%; height: 19.416%; }
.m4p-cc.l5 .nivel  { left: 52.493%; top: 14.708%; height: 4.453%; }
.m4p-cc .nivel { display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); max-width: 44%; }
.m4p-cc .nivel img { display: block; height: 100%; width: auto; flex: 0 1 auto; min-width: 0; }

/* carta do pódio: nome em cima (letra do M4), luz da moldura acende no mouse, a carta sobe um pouco */
.m4p-carta .nm { position: absolute; z-index: 3; left: 2%; width: 96%; top: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 max(11.5px, calc(17 / var(--cw) * 100cqw)) / calc(30 / var(--cw) * 100cqw) var(--m4-display); letter-spacing: .03em; text-transform: uppercase; color: var(--m4-paper); transition: color .3s; }
.m4p-carta.l1 .nm, .m4p-carta.eu .nm { color: var(--m4-volt); }
.m4p-carta:hover .nm, .m4p-carta:focus-visible .nm { color: var(--m4-volt); }
.m4p-carta .brilho { opacity: .62; transition: opacity .45s ease; }
.m4p-carta:hover .brilho, .m4p-carta:focus-visible .brilho { opacity: 1; }
/* 06/11 21:47 (vídeo: "quando eu passo o brilho ele não faz nenhum efeito da cor, brilha mas não muito"; nas guildas ficou
   bom): no mouse a carta ganha a luz DA COR do lugar em volta (ouro, prata, bronze, azul), como nas guildas */
.m4p-carta { --luz: rgba(253, 220, 79, .62); }
.m4p-carta.l2 { --luz: rgba(207, 219, 231, .62); } .m4p-carta.l3 { --luz: rgba(232, 140, 64, .78); } .m4p-carta.l4, .m4p-carta.l5 { --luz: rgba(135, 147, 207, .85); }
.m4p-carta .corpo { transition: translate .55s cubic-bezier(.2, .8, .2, 1), filter .45s ease; }
.m4p-carta:hover .corpo, .m4p-carta:focus-visible .corpo { translate: 0 -1.5%; filter: drop-shadow(0 0 18px var(--luz)) drop-shadow(0 0 5px var(--luz)) brightness(1.06); }
.m4p-carta:hover, .m4p-carta:focus-visible { z-index: 6; }
/* o 1º acende quando assenta na entrada (--flash vai de 0 a 1 e volta) */
.m4p-carta.l1::before, .m4p-lugar.l1::before { content: ""; position: absolute; z-index: 0; left: -34%; right: -34%; top: -4%; bottom: 8%; pointer-events: none; opacity: var(--flash, 0);
  background: radial-gradient(closest-side, rgba(255, 225, 77, .62), rgba(255, 225, 77, 0)); }

/* guildas: base (escudo), emblema e pedra, posições medidas no quadro do designer (as do site) */
.m4p-lugar { position: relative; display: block; --luz: rgba(253, 220, 79, .5); }
.m4p-lugar.l2 { --luz: rgba(207, 219, 231, .55); } .m4p-lugar.l3 { --luz: rgba(225, 135, 63, .75); } .m4p-lugar.l4, .m4p-lugar.l5 { --luz: rgba(135, 147, 207, .85); }
.m4p-lugar.l4 { --ex: 52.45%; --ey: 53.12%; --ew: 74.19%; --px: 33.90%; --py: 88.06%; --pw: 54.05%; }
.m4p-lugar.l2 { --ex: 55.24%; --ey: 54.36%; --ew: 76.06%; --px: 25.10%; --py: 91.63%; --pw: 56.37%; }
.m4p-lugar.l1 { --ex: 50.56%; --ey: 53.98%; --ew: 48.65%; --px: 28.89%; --py: 96.41%; --pw: 37.04%; }
.m4p-lugar.l3 { --ex: 45.93%; --ey: 48.62%; --ew: 79.59%; --px: 19.19%; --py: 90.58%; --pw: 58.99%; }
.m4p-lugar.l5 { --ex: 47.55%; --ey: 53.12%; --ew: 74.19%; --px: 13.94%; --py: 87.42%; --pw: 54.05%; }
.m4p-lugar .corpo { position: relative; z-index: 1; display: block; transition: scale .55s cubic-bezier(.2, .8, .2, 1); }
.m4p-lugar .base { display: block; width: 100%; height: auto; transition: filter .3s ease; }
.m4p-lugar .emb { position: absolute; left: var(--ex); top: var(--ey); width: var(--ew); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }
.m4p-lugar .pedra { position: absolute; z-index: 2; left: var(--px); top: var(--py); width: var(--pw); height: auto; }
.m4p-lugar .nm { position: absolute; z-index: 3; left: 50%; bottom: calc(100% + .5em); translate: -50% 0; width: max-content; max-width: 150%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 clamp(11.5px, 1.02vw, 15px)/1.2 var(--m4-display); letter-spacing: .03em; text-transform: uppercase; color: var(--m4-paper); transition: color .3s; }
.m4p-lugar.l1 .nm, .m4p-lugar:hover .nm, .m4p-lugar:focus-visible .nm { color: var(--m4-volt); }
.m4p-lugar:hover .base, .m4p-lugar:focus-visible .base { filter: drop-shadow(0 0 14px var(--luz)); }
.m4p-lugar:hover .corpo, .m4p-lugar:focus-visible .corpo { scale: 1.035; }

/* boiar de leve (como no site): as pedras do pódio e as soltas; as guildas inteiras em onda */
@keyframes m4p-boia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.6%; } }
@keyframes m4p-boia-pedras { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4.6%; } }
@keyframes m4p-boia-g { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
/* movimento: segue o botão Movimento completo (classe is-reduced no #app), não só o sistema */
.m4:not(.is-reduced) .m4p-carta .podio { animation: m4p-boia 3.2s ease-in-out .8s infinite; }
  .m4:not(.is-reduced) .m4p-carta.l2 .podio { animation-delay: .2s; } .m4:not(.is-reduced) .m4p-carta.l3 .podio { animation-delay: 1.4s; } .m4:not(.is-reduced) .m4p-carta.l4 .podio { animation-delay: -.4s; } .m4:not(.is-reduced) .m4p-carta.l5 .podio { animation-delay: 2s; }
  .m4:not(.is-reduced) .m4p-palco-tr .pedras { animation: m4p-boia-pedras 3.2s ease-in-out infinite; }
  .m4:not(.is-reduced) .m4p-palco-tr .pedras.dir { animation-delay: -1.6s; }
  .m4:not(.is-reduced) .m4p-lugar { animation: m4p-boia-g 4.6s ease-in-out infinite; }
  .m4:not(.is-reduced) .m4p-lugar.l4 { animation-delay: 0s; } .m4:not(.is-reduced) .m4p-lugar.l2 { animation-delay: -1.4s; } .m4:not(.is-reduced) .m4p-lugar.l1 { animation-delay: -2.8s; } .m4:not(.is-reduced) .m4p-lugar.l3 { animation-delay: -4.2s; } .m4:not(.is-reduced) .m4p-lugar.l5 { animation-delay: -5.6s; }
  .m4:not(.is-reduced) .m4p-lugar .pedra { animation: m4p-boia-pedras 3.8s ease-in-out infinite; }
  .m4:not(.is-reduced) .m4p-lugar.l1 .pedra { animation-duration: 3.5s; } .m4:not(.is-reduced) .m4p-lugar.l3 .pedra { animation-duration: 3.9s; animation-delay: -2.1s; } .m4:not(.is-reduced) .m4p-lugar.l5 .pedra { animation-duration: 4.3s; animation-delay: -1s; }

/* palco a partir de 760 px. 06/11 (2º vídeo de revisão: "subir mais o ranking... a gente tá perdendo muito da direita e da
   esquerda, deixar maior, mais espaçado... o 1 mais pra cima, esse mais pra baixo, pra realmente fazer referência dos
   números"): PÓDIO EM DEGRAUS — o 1º maior e mais alto, 2º e 3º um degrau abaixo, 4º e 5º mais um, com espaço entre as
   cartas. O palco sai da largura do texto (até 1480 px) e cabe inteiro na tela junto do título (altura pela tela). As
   cartas usam o brilho "solto" (o do designer trazia pedaços das vizinhas, que agora ficam longe). */
@media (min-width: 760px) {
  .m4p-palco-tr, .m4p-palco-gu { --pw: min(1480px, calc(100vw - 72px), calc((100vh - 326px) * 2.5)); width: var(--pw); max-width: none; margin-left: calc((100% - var(--pw)) / 2); margin-right: 0; }
  /* 06/11 21:47 (vídeo: "tá muito espaçado e muito pequeno... um pouquinho maior e não tão espaçado"): as cartas 8 % maiores
     no mesmo palco (vãos de 3,2 % para 1,46 %) e o palco até 1600 px; os degraus continuam (1º no alto, 2º/3º e 4º/5º abaixo) */
  /* 07/11 (vídeo 0255: "o ranking ainda tá muito pequeno... mas tá legal a disposição"): o palco cresce até 2000 px nas telas
     grandes (a mesma disposição; continua cabendo inteiro na tela com o título, pela altura) */
  .m4p-palco-tr { --pw: min(2000px, calc(100vw - 72px), calc((100vh - 326px) / .432)); aspect-ratio: 1000 / 432; }
  .m4p-palco-tr .m4p-carta { position: absolute; z-index: 1; }
  .m4p-palco-tr .l1 { left: 39.17%; top: 0; width: 21.6%; height: 100%; z-index: 3; }
  .m4p-palco-tr .l2 { left: 18.3%; top: 9%; width: 19.41%; height: 80%; z-index: 2; }
  .m4p-palco-tr .l3 { left: 62.23%; top: 9%; width: 19.46%; height: 80%; z-index: 2; }
  .m4p-palco-tr .l4 { left: 0; top: 17%; width: 16.84%; height: 72%; }
  .m4p-palco-tr .l5 { left: 83.15%; top: 17%; width: 16.85%; height: 72%; }
  .m4p-palco-tr .m4p-carta:hover, .m4p-palco-tr .m4p-carta:focus-visible { z-index: 6; }
  .m4p-palco-tr .pedras { position: absolute; z-index: 0; display: block; pointer-events: none; user-select: none; }
  .m4p-palco-tr .pedras.esq { left: -5.6%; top: 58%; width: 5.2%; height: auto; }
  .m4p-palco-tr .pedras.dir { left: 100.4%; top: 58%; width: 5.2%; height: auto; }
  .m4p-palco-gu { aspect-ratio: 3840 / 1100; }
  .m4p-palco-gu .m4p-lugar { position: absolute; }
  .m4p-palco-gu .l4 { left: 2.5%; top: 24%; width: 13%; }
  .m4p-palco-gu .l2 { left: 21%; top: 15%; width: 14%; }
  .m4p-palco-gu .l1 { left: 40.5%; top: 4%; width: 19%; }
  .m4p-palco-gu .l3 { left: 65%; top: 15%; width: 13.5%; }
  .m4p-palco-gu .l5 { left: 84%; top: 24%; width: 13%; }
}
/* celular: 1º em cima, 2º e 3º, depois 4º e 5º */
@media (max-width: 759.98px) {
  .m4p-palco-tr { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 6%; align-items: end; justify-items: center; }
  .m4p-palco-tr .m4p-carta { width: 100%; aspect-ratio: var(--cw) / var(--ch); }
  .m4p-palco-tr .l1 { grid-column: 1 / -1; width: 64%; order: 1; } .m4p-palco-tr .l2 { order: 2; } .m4p-palco-tr .l3 { order: 3; } .m4p-palco-tr .l4 { order: 4; } .m4p-palco-tr .l5 { order: 5; }
  .m4p-palco-tr .pedras { display: none; }
  .m4p-palco-gu { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8%; row-gap: 84px; justify-items: center; align-items: end; padding: 40px 0 72px; }
  .m4p-palco-gu .l1 { grid-column: 1 / -1; width: 56%; order: 1; } .m4p-palco-gu .l2 { width: 78%; order: 2; } .m4p-palco-gu .l3 { width: 74%; order: 3; }
  .m4p-palco-gu .l4 { width: 72%; order: 4; } .m4p-palco-gu .l5 { width: 72%; order: 5; }
  .m4p-lugar .nm { width: 150%; max-width: none; font-size: 12.5px; line-height: 1.18; white-space: normal; text-align: center; text-wrap: balance; }
}

/* faixa entre o pódio e a tabela */
.m4p-band--rank { margin: -28px 0 clamp(56px, 5.6vw, 96px); }

/* tabelas: número vazado, nome, mundo e nível; a linha ganha a varrida amarela no mouse */
.m4p-rank-tbs { position: relative; z-index: 3; }
.m4p-rank .m4p-tb, .m4p-membros { max-width: 1100px; margin: 0 auto; }
.m4p-tb-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 18px; }
.m4p-tb .st { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
/* "Você está em 71º": leva até a linha (abre o resto da lista se precisar) e a linha pisca em amarelo */
.m4p-eu-ir { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; appearance: none; border: 1px solid var(--m4-volt); background: transparent; color: var(--m4-volt); cursor: pointer;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; transition: background .25s, color .25s, box-shadow .3s cubic-bezier(.2, .8, .2, 1), transform .3s cubic-bezier(.2, .8, .2, 1); }
.m4p-eu-ir .pt { width: 7px; height: 7px; background: currentColor; }
.m4p-eu-ir svg { width: 14px; height: 14px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.m4p-eu-ir:hover, .m4p-eu-ir:focus-visible { background: var(--m4-volt); color: var(--m4-black); box-shadow: 4px 4px 0 var(--m4-red); transform: translate(-2px, -2px); outline: none; }
.m4p-eu-ir:hover svg, .m4p-eu-ir:focus-visible svg { transform: translateY(3px); }
@keyframes m4p-pisca { 50% { opacity: .25; } }
/* movimento: segue o botão Movimento completo (classe is-reduced no #app), não só o sistema */
.m4:not(.is-reduced) .m4p-eu-ir .pt { animation: m4p-pisca 1.6s steps(2, jump-none) infinite; }
.m4p-tb .hd, .m4p-tb .rw { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(90px, 200px) 120px; align-items: center; column-gap: 18px; }
.m4p-tb .hd { padding: 0 20px 12px; border-bottom: 1px solid var(--m4-line); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-tb .hd span:last-child, .m4p-tb .lv { text-align: right; }
.m4p-tb .rows { list-style: none; margin: 0; padding: 0; }
.m4p-tb .rows li { border-bottom: 1px solid var(--m4-line); }
.m4p-tb .rows li[hidden] { display: none; }
.m4p-tb .rw { position: relative; isolation: isolate; width: 100%; min-height: 66px; padding: 0 20px; appearance: none; border: 0; background: none; color: var(--m4-paper); text-align: left; font: inherit; transition: color .3s; }
.m4p-tb button.rw { cursor: pointer; }
.m4p-tb .rw::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--m4-volt); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.m4p-tb button.rw:hover::before, .m4p-tb button.rw:focus-visible::before { transform: scaleX(1); }
.m4p-tb button.rw:hover, .m4p-tb button.rw:focus-visible { color: var(--m4-black); outline: none; }
.m4p-tb .ps { font: 700 22px/1 var(--m4-display); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.2px var(--m4-paper); font-variant-numeric: tabular-nums; transition: -webkit-text-stroke-color .3s; }
.m4p-tb button.rw:hover .ps, .m4p-tb button.rw:focus-visible .ps { -webkit-text-stroke-color: var(--m4-black); }
.m4p-tb .nm { display: flex; align-items: center; gap: 12px; min-width: 0; font: 600 17px/1.25 var(--m4-body); }
.m4p-tb .nm .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m4p-tb .nm img { flex: none; width: 34px; height: 34px; }
.m4p-tb .mu { font: 500 12px/1.2 var(--m4-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--m4-gray); transition: color .3s; }
.m4p-tb button.rw:hover .mu, .m4p-tb button.rw:focus-visible .mu { color: rgba(11, 11, 12, .72); }
.m4p-tb .mu.lider { color: var(--m4-volt); }
.m4p-tb .lv { font: 600 19px/1 var(--m4-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.m4p-tb .tag { flex: none; padding: 4px 7px; background: var(--m4-volt); color: var(--m4-black); font-size: 10px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; transition: background .3s, color .3s; }
.m4p-tb .rw.eu { box-shadow: inset 4px 0 0 var(--m4-volt); background: rgba(255, 225, 77, .07); }
.m4p-tb .rw.eu::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--m4-volt); opacity: calc(var(--pulso, 0) * .5); pointer-events: none; }
.m4p-tb .tag2 { flex: none; padding: 3px 6px; border: 1px solid rgba(242, 240, 234, .28); color: var(--m4-gray); font-size: 9.5px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; transition: border-color .3s, color .3s; }
.m4p-tb button.rw:hover .tag2, .m4p-tb button.rw:focus-visible .tag2 { border-color: rgba(11, 11, 12, .5); color: var(--m4-black); }
.m4p-tb button.rw.eu:hover .tag, .m4p-tb button.rw.eu:focus-visible .tag { background: var(--m4-black); color: var(--m4-volt); }
.m4p-mais { display: flex; align-items: center; justify-content: center; gap: 10px; width: max-content; height: 54px; margin: 32px auto 0; padding: 0 30px; appearance: none;
  border: 2px solid var(--m4-paper); background: transparent; color: var(--m4-paper); cursor: pointer; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  transition: background .25s, border-color .25s, color .25s, box-shadow .3s cubic-bezier(.2, .8, .2, 1), transform .3s cubic-bezier(.2, .8, .2, 1); }
.m4p-mais svg { width: 16px; height: 16px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.m4p-mais:hover, .m4p-mais:focus-visible { background: var(--m4-volt); border-color: var(--m4-volt); color: var(--m4-black); box-shadow: 5px 5px 0 var(--m4-red); transform: translate(-2px, -2px); outline: none; }
.m4p-mais:hover svg, .m4p-mais:focus-visible svg { transform: translateY(3px); }
.m4p-mais[hidden] { display: none; }
.m4p-rank .m4p-demo { margin-top: 40px; }

/* membros da guilda */
.m4p-voltar { display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; appearance: none; border: 0; background: none; color: var(--m4-paper); cursor: pointer; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; transition: color .25s; }
.m4p-voltar svg { width: 18px; height: 18px; color: var(--m4-volt); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.m4p-voltar:hover, .m4p-voltar:focus-visible { color: var(--m4-volt); outline: none; }
.m4p-voltar:hover svg, .m4p-voltar:focus-visible svg { transform: translateX(-4px); }
.m4p-gd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 26px; margin: 20px 0 40px; padding: 24px 26px; background: var(--m4-paper); color: var(--m4-black); box-shadow: 10px 10px 0 var(--m4-volt); }
.m4p-gd .ge { width: clamp(64px, 7vw, 96px); height: auto; }
.m4p-gd .gt { min-width: 0; }
.m4p-gd .gt > span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #67676d; }
.m4p-gd .gt > span.ouro { color: #8a6a00; }
.m4p-gd h2 { margin: 6px 0 0; font: 800 clamp(26px, 3vw, 44px)/1 var(--m4-display); letter-spacing: -.03em; text-transform: uppercase; overflow-wrap: anywhere; outline: none; }
.m4p-gd .gs { display: grid; grid-auto-flow: column; margin: 0; }
.m4p-gd .gs > div { padding: 4px 18px; border-left: 1px solid rgba(11, 11, 12, .16); }
.m4p-gd .gs dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #67676d; line-height: 1.35; }
.m4p-gd .gs dt small { display: block; font-size: 9.5px; letter-spacing: .06em; }
.m4p-gd .gs dd { margin: 8px 0 0; font: 700 24px/1 var(--m4-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m4p-gd .gs .v dd { display: inline-block; padding: 5px 10px; background: var(--m4-black); color: var(--m4-volt); }

/* janela do perfil: lado preto com a carta, lado papel com os dados e o time */
html.m4p-trava, html.m4p-trava body { overflow: hidden; }
.m4p-perf { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 22px; }
.m4p-perf .ov { position: absolute; inset: 0; background: rgba(11, 11, 12, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* 06/11 (vídeo de revisão: "pode tirar essa barra lateral"): a janela continua rolando se a tela for baixa, mas sem a barra */
/* 07/11 (vídeo 0255: "essa interface dá pra ser maior, pra aparecer um pouco mais o card"): janela de 900 para 1180 px e a
   coluna do card de 370 para 470 px */
.m4p-perf .cx { position: relative; width: min(1180px, 100%); max-height: calc(100dvh - 44px); overflow: auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--m4-paper); color: var(--m4-black); box-shadow: 14px 14px 0 var(--m4-volt); }
.m4p-perf .ct { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); min-height: 640px; }
.m4p-perf .x { position: absolute; top: 0; right: 0; z-index: 3; display: grid; place-items: center; width: 54px; height: 54px; appearance: none; border: 0; background: var(--m4-black); color: var(--m4-paper); cursor: pointer; transition: background .25s, color .25s; }
.m4p-perf .x svg { width: 20px; height: 20px; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.m4p-perf .x:hover, .m4p-perf .x:focus-visible { background: var(--m4-volt); color: var(--m4-black); outline: none; }
.m4p-perf .x:hover svg, .m4p-perf .x:focus-visible svg { transform: rotate(90deg); }
.m4p-pf-l { position: relative; display: grid; place-items: center; padding: 36px 30px; overflow: hidden;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 44px 100%, var(--m4-black); }
.m4p-pf-l::before { content: ""; position: absolute; left: 50%; top: 46%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgba(255, 225, 77, .16), rgba(255, 225, 77, 0)); }
.m4p-pf-l .m4p-cc { width: min(100%, 250px); aspect-ratio: var(--cw) / var(--ch); }
.m4p-pf-geral { position: relative; width: min(100%, 270px); aspect-ratio: 504 / 630; }
.m4p-pf-geral img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* 06/11 (dono, com o print do perfil do #39: "esse card pode preencher mais o lado da esquerda... preenchendo tudo, e não
   só na metade"): no computador o cartão do ranking geral ocupa a coluna INTEIRA — o fundo do card cobre tudo (ampliado
   para a moldura sair da vista) e o personagem fica grande, inteiro na altura; os 5 do pódio crescem até a altura da coluna */
/* 07/11 (vídeo 0255, sobre o card que preenchia a coluna toda: "o card tá muito pra cima... deixa o detalhe das bordas do
   card, pra não ficar tão zoom assim, e mostrar um pouco mais do card"): volta o card INTEIRO, com a moldura, grande e no
   meio da coluna (que ficou maior); os 5 do pódio também crescem */
@media (min-width: 761px) {
  .m4p-pf-l { padding: 34px 34px; }
  .m4p-pf-l .m4p-pf-geral { width: min(100%, 392px); filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5)); }
  .m4p-pf-l .m4p-cc { width: min(100%, 352px); }
}
.m4p-pf-r { position: relative; isolation: isolate; display: grid; align-content: start; padding: 40px 42px 36px; }
/* 06/11 21:47 (vídeo: "esse 08 tá muito grande... diminui o 08 e deixa em menos destaque; aumenta os Pokémon pra gente dar
   destaque pros Pokémon do cara, mas sem ficar grotesco"): o número fica pequeno e claro, no canto; o time cresce */
.m4p-pf-r .gn { position: absolute; z-index: -1; right: 36px; bottom: 30px; font: 800 74px/.8 var(--m4-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(11, 11, 12, .13);
  pointer-events: none; user-select: none; }
.m4p-pf-r .m4-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #67676d; }
.m4p-pf-r .nm { margin: 16px 0 24px; padding-right: 44px; font: 800 clamp(30px, 3.4vw, 46px)/.98 var(--m4-display); letter-spacing: -.035em; text-transform: uppercase; overflow-wrap: anywhere; }
.m4p-pf-r .nm .tag { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 5px 8px; background: var(--m4-volt); color: var(--m4-black); font: 600 10px/1 var(--m4-mono); letter-spacing: .08em; }
.m4p-pf-r dl { margin: 0; border-top: 2px solid var(--m4-black); }
.m4p-pf-r dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 15px 0; border-bottom: 1px solid rgba(11, 11, 12, .14); }
.m4p-pf-r dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #67676d; }
.m4p-pf-r dd { margin: 0; font: 600 17px/1.3 var(--m4-body); overflow-wrap: anywhere; }
.m4p-pf-r dd.sem { color: #67676d; }
.m4p-pf-r dd.lv { font: 700 26px/1 var(--m4-display); letter-spacing: -.02em; }
.m4p-pf-r .tt { margin: 28px 0 12px; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #67676d; }
/* o time em 3 x 2, cada Pokémon ~1,7x maior (as artes têm 128 px: nítidas até ~110 px) */
.m4p-pf-r .time { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 104px)); gap: 10px; }
.m4p-pf-r .time li { display: grid; place-items: center; aspect-ratio: 1; background: radial-gradient(closest-side, #26262c, #111114);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1); }
.m4p-pf-r .time li:hover { transform: translateY(-3px); box-shadow: 0 10px 18px rgba(11, 11, 12, .28), inset 0 0 0 2px var(--m4-volt); }
.m4p-pf-r .time img { width: 94%; height: 94%; object-fit: contain; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.m4p-pf-r .time li:hover img { transform: scale(1.08); }
/* 07/11 (vídeo 0255: "tá muito livre essa parte aqui... um sobe e fica entre esses dois... pra ficar mais proporcionalmente
   bonito"): no computador o time vira um "tijolo" — a fileira de baixo desloca meio quadro, cada Pokémon de baixo fica no meio
   de dois de cima, e o bloco ocupa mais a largura (quadros de 116 px: as artes têm 128 px, nítidas) */
@media (min-width: 761px) {
  .m4p-pf-r .time { --c: 116px; --g: 10px; grid-template-columns: repeat(7, calc((var(--c) - var(--g)) / 2)); column-gap: var(--g); row-gap: var(--g); }
  .m4p-pf-r .time li { grid-column: span 2; }
  .m4p-pf-r .time li:nth-child(4) { grid-column: 2 / span 2; }
}

@media (max-width: 1000px) {
  .m4p-gd { grid-template-columns: auto minmax(0, 1fr); }
  .m4p-gd .gs { grid-column: 1 / -1; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .m4p-gd .gs > div:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 759.98px) {
  .m4p-rank-cima { padding: 100px 0 62px; }
  .m4p-rank-baixo { padding-bottom: 90px; }
  .m4p-band--rank { margin-top: -22px; }
  .m4p-pf-r .gn { display: none; }
  .m4p-words--rank .w > span { font-size: clamp(32px, 10.2vw, 78px); }
  .m4p-rtabs { width: 100%; grid-auto-columns: minmax(0, 1fr); }
  .m4p-rtabs button { padding: 0 10px; height: 48px; }
  .m4p-rmundo { height: 40px; }
  .m4p-tb .hd, .m4p-tb .rw { grid-template-columns: 46px minmax(0, 1fr) 74px; column-gap: 12px; padding-left: 12px; padding-right: 12px; }
  .m4p-tb .hd span:nth-child(3), .m4p-tb .mu { display: none; }
  .m4p-tb .rw { min-height: 58px; }
  .m4p-tb .ps { font-size: 17px; }
  .m4p-tb .nm { font-size: 15.5px; gap: 10px; }
  .m4p-tb .nm img { width: 28px; height: 28px; }
  .m4p-tb .lv { font-size: 16px; }
  .m4p-tb-mem .rw { grid-template-rows: auto auto; row-gap: 4px; padding-top: 11px; padding-bottom: 11px; }
  .m4p-tb-mem .ps { grid-row: 1 / 3; }
  .m4p-tb-mem .nm { grid-column: 2; grid-row: 1; }
  .m4p-tb-mem .mu { display: block; grid-column: 2; grid-row: 2; font-size: 10.5px; }
  .m4p-tb-mem .lv { grid-column: 3; grid-row: 1 / 3; }
  .m4p-gd { gap: 14px 16px; padding: 18px; box-shadow: 8px 8px 0 var(--m4-volt); }
  .m4p-gd .gs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .m4p-gd .gs > div { border-left: 0; padding: 12px 0 0; border-top: 1px solid rgba(11, 11, 12, .14); }
  .m4p-gd .gs > div:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
  .m4p-gd .gs dd { font-size: 20px; }
  .m4p-perf { padding: 12px; }
  .m4p-perf .cx { max-height: calc(100dvh - 24px); box-shadow: 8px 8px 0 var(--m4-volt); }
  .m4p-perf .ct { grid-template-columns: 1fr; min-height: 0; }
  .m4p-pf-l { padding: 28px 20px 22px; }
  .m4p-pf-l .m4p-cc { width: min(52vw, 210px); }
  .m4p-pf-geral { width: min(56vw, 230px); }
  .m4p-pf-r { padding: 24px 20px 26px; }
  .m4p-pf-r .nm { margin: 12px 0 18px; padding-right: 0; }
  .m4p-pf-r dl > div { grid-template-columns: 92px minmax(0, 1fr); padding: 12px 0; }
  .m4p-pf-r .time { gap: 6px; }
}

/* ---------- DOAR (Obter Pcoins) · PAGAMENTO · COMPRAR RK ---------- */
.m4p-doar { position: relative; overflow: hidden; padding: 0 0 72px; background: var(--m4-black); }
.m4p-doar-cima { position: relative; padding: 100px 0 56px;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4p-doar-cima::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 200px; pointer-events: none; background: linear-gradient(rgba(11, 11, 12, 0), var(--m4-black)); }
.m4p-doar-cima > .wrap { position: relative; z-index: 1; }
.m4p-doar-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 40px; }
.m4p-doar-top .tt { display: grid; justify-items: start; min-width: 0; }
/* título baixo, numa linha só ("Ganhe mais" vazado + "créditos" amarelo), para os pacotes aparecerem logo na entrada */
.m4p-words--doar { display: flex; flex-wrap: wrap; column-gap: .26em; margin-top: 12px; font-size: clamp(32px, 4.6vw, 74px); }
.m4p-words--doar .w > span { font-size: 1em; }
.m4p-words--doar .w2 > span { -webkit-text-stroke-width: 3px; }
.m4p-doar-top .m4p-ola { margin-top: 14px; }
.m4p-ola { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 24px 0 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-ola i { width: 1px; height: 14px; background: var(--m4-line); }
.m4p-ola b { display: inline-flex; align-items: center; gap: 7px; color: var(--m4-paper); font-weight: 600; letter-spacing: .04em; }
/* 06/11 (2º vídeo): no Doar, a foto e o NOME do jogador em destaque (amarelo, letra do título) */
.m4p-ola .eu { display: inline-flex; align-items: center; gap: 10px; color: var(--m4-paper); }
.m4p-ola .eu .av, .m4p-ola .eu .m4p-rosto { flex: none; width: 40px; height: 40px; object-fit: cover; background: var(--m4-volt); box-shadow: 3px 3px 0 var(--m4-red); }
.m4p-ola .eu .nm { font: 800 clamp(18px, 1.55vw, 24px)/1 var(--m4-display); letter-spacing: -.01em; text-transform: uppercase; color: var(--m4-volt); }

/* a moeda grande: boia, gira de leve, um brilho atravessa; pula quando o valor sobe de faixa */
/* a Pcoin do jogo em pixel animado: 48 px do jogo x3 = 144 (x2 = 96 no celular), sem suavizar */
.m4p-moeda { position: relative; width: 144px; aspect-ratio: 1; margin-right: clamp(0px, 3.2vw, 56px); }
.m4p-moeda .gira img { image-rendering: pixelated; }
.m4p-moeda .luz { position: absolute; inset: -38%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 225, 77, .24), rgba(255, 225, 77, 0)); }
.m4p-moeda .anel { position: absolute; inset: -6%; border: 3px solid var(--m4-volt); border-radius: 50%; opacity: 0; pointer-events: none; }
.m4p-moeda .gira { position: absolute; inset: 0; }
.m4p-moeda .gira img { display: block; width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)); }
.m4p-moeda .brilho { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, 0) 60%) 160% 0 / 260% 100% no-repeat; }
.m4p-moeda .sombra { position: absolute; left: 16%; right: 16%; bottom: -15%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)); }
@keyframes m4p-brilho { 0%, 58% { background-position: 160% 0; } 88%, 100% { background-position: -60% 0; } }
/* movimento: segue o botão Movimento completo (classe is-reduced no #app), não só o sistema */
.m4:not(.is-reduced) .m4p-moeda .brilho { animation: m4p-brilho 4.6s cubic-bezier(.45, 0, .2, 1) 1.6s infinite; }

/* valor livre: R$ + campo grande + Doar, e a dica que conta o bônus */
.m4p-livre { margin-top: 14px; }
.m4p-livre .lb { display: block; margin-bottom: 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-livre .ln { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; border: 2px solid var(--m4-paper); background: var(--m4-black); transition: border-color .3s, box-shadow .4s cubic-bezier(.2, .8, .2, 1); }
.m4p-livre .ln:focus-within { border-color: var(--m4-volt); box-shadow: 8px 8px 0 var(--m4-volt); }
.m4p-livre.bad .ln { border-color: var(--m4-red); box-shadow: 8px 8px 0 var(--m4-red); }
.m4p-livre .rs { display: grid; place-items: center; padding: 0 22px; border-right: 2px solid currentColor; color: var(--m4-volt); font: 700 22px/1 var(--m4-display); }
.m4p-livre input { min-width: 0; height: 76px; padding: 0 22px; border: 0; border-radius: 0; outline: none; background: transparent; color: var(--m4-paper);
  font: 600 clamp(20px, 2.2vw, 30px)/1 var(--m4-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.m4p-livre input::placeholder { color: rgba(242, 240, 234, .34); font: 500 clamp(14px, 1.2vw, 17px)/1 var(--m4-body); letter-spacing: 0; }
.m4p-livre .ln .m4-btn { min-height: 0; margin: 0; padding: 0 30px; box-shadow: none; border: 0; cursor: pointer; }
.m4p-livre .ln .m4-btn:hover { box-shadow: none; background: #ffd21a; }
.m4p-livre .dica { min-height: 1.5em; margin: 14px 0 0; font-size: 12px; line-height: 1.5; letter-spacing: .05em; color: var(--m4-gray); }
.m4p-livre .dica b { color: var(--m4-volt); font-weight: 600; }
.m4p-livre .dica.aviso { color: #ff6b6b; }
/* 06/11 21:41 (vídeo): o valor livre e o medidor numa FAIXA só, logo embaixo dos pacotes ("essa parte do valor sobe pra ficar em
   cima do VIP"; "esse 8%, 10%... mais comprimido"): campo à esquerda, medidor à direita, e o banner do VIP inteiro embaixo */
.m4p-outro { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: 18px 48px; margin-top: 30px; }
.m4p-outro .m4p-livre { margin: 0; }
.m4p-outro .m4p-livre .lb { margin-bottom: 9px; }
.m4p-outro .m4p-livre input { height: 60px; }
.m4p-outro .m4p-livre .dica { margin-top: 9px; }
.m4p-outro .m4p-medidor { margin: 0; padding-top: 6px; }
/* o Doar do campo chama a atenção ("pra chamar a atenção pro cara clicar em doar"): um brilho que o atravessa e a seta que
   empurra, de vez em quando */
.m4p-doar-go::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 70%); }
.m4:not(.is-reduced) .m4p-doar-go::after { animation: tag-luz 4.4s ease-in-out 2.2s infinite; }
.m4:not(.is-reduced) .m4p-doar-go .ar { animation: doar-seta 4.4s ease-in-out 2.2s infinite; }
@keyframes doar-seta { 0%, 76%, 100% { translate: 0 0; } 82% { translate: 7px 0; } 87% { translate: 0 0; } 91% { translate: 4px 0; } 95% { translate: 0 0; } }

/* medidor de bônus: trilho, preenchimento amarelo e a Pcoin no ponto atual */
.m4p-medidor { margin-top: 40px; }
.m4p-medidor .tr { position: relative; height: 6px; background: rgba(242, 240, 234, .1); }
.m4p-medidor .fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255, 225, 77, .3), var(--m4-volt)); }
.m4p-medidor .th { position: absolute; top: 50%; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; max-width: none; filter: drop-shadow(0 0 10px rgba(255, 225, 77, .55)); }
.m4p-medidor .mk { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.m4p-medidor .mk li { position: relative; display: grid; justify-items: center; gap: 5px; text-align: center; }
.m4p-medidor .mk li::before { content: ""; position: absolute; top: -19px; left: 50%; width: 2px; height: 10px; margin-left: -1px; background: rgba(242, 240, 234, .25); transition: background .3s; }
.m4p-medidor .mk b { font: 700 15px/1 var(--m4-display); color: rgba(242, 240, 234, .42); transition: color .3s; }
.m4p-medidor .mk span { font: 500 10.5px/1 var(--m4-mono); letter-spacing: .06em; color: var(--m4-gray); white-space: nowrap; }
.m4p-medidor .mk li.on b { color: var(--m4-volt); }
.m4p-medidor .mk li.on::before { background: var(--m4-volt); }

/* pacotes: carta escura, pilha de moedas, número grande, bônus e o preço numa barra que vira amarela */
.m4p-pacs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: clamp(24px, 2.8vw, 40px); }
.m4p-pac { position: relative; display: flex; flex-direction: column; align-items: center; padding: 26px 14px 14px; appearance: none; border: 1px solid var(--m4-line); background: var(--m4-ink);
  color: var(--m4-paper); cursor: pointer; text-align: center; font: inherit; -webkit-tap-highlight-color: transparent;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
/* 06/11 21:45 (vídeo: "tira esse amarelo de fundo"): ao passar o mouse o cartão sobe com a borda e o preço amarelos, sem o bloco
   amarelo atrás (fica só uma sombra escura macia) */
.m4p-pac:hover, .m4p-pac:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(0, 0, 0, .5); border-color: var(--m4-volt); }
.m4p-pac.t-pop { border-color: rgba(255, 225, 77, .55); }
/* a arte (as do jogo: 1–4 fechados; 5 e 6 na versão escolhida) — "aumenta um pouco esse ícone" (vídeo 21:45): caixa quadrada e
   arte 8 % maior; sem luz amarelada atrás; os brilhos SÓ nas Pcoins (pontos achados em cada arte, fortes e fracos) */
.m4p-pac .im { position: relative; display: block; width: 100%; aspect-ratio: 1; min-height: 0; }
/* a arte e os brilhos andam juntos (camada .arte, 8 % maior que a caixa): o brilho fica sempre em cima da mesma moeda */
.m4p-pac .im .arte { position: absolute; inset: -4%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.m4p-pac .im img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
.m4p-pac:hover .im .arte, .m4p-pac:focus-visible .im .arte { transform: translateY(-6px) scale(1.05) rotate(-2deg); }
/* 07/11: versões CENA dos pacotes 5 e 6 (pintura com fundo, no estilo da foto do baú que o dono mandou): ocupam o quadro todo da
   arte, com cantos suaves e um fio dourado; no mouse a pintura aproxima devagar dentro do quadro (sem girar) */
.m4p-pac.cena .im .arte { inset: 0; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 225, 77, .3), 0 12px 26px rgba(0, 0, 0, .45); }
.m4p-pac.cena .im img { object-fit: cover; filter: none; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.m4p-pac.cena:hover .im .arte, .m4p-pac.cena:focus-visible .im .arte { transform: translateY(-4px); }
.m4p-pac.cena:hover .im img, .m4p-pac.cena:focus-visible .im img { transform: scale(1.07); }
img.mo.cena { object-fit: cover; border-radius: 8px; }
.m4p-pac .im .bz { position: absolute; z-index: 2; width: calc(7px + 11px * var(--f, .5)); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; opacity: 0; }
.m4p-pac .im .bz::before { content: ""; position: absolute; inset: -70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 247, 214, calc(.5 * var(--f, .5))), rgba(255, 222, 130, 0)); }
.m4p-pac .im .bz::after { content: ""; position: absolute; inset: 0; background: #fffbea; clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%); }
.m4:not(.is-reduced) .m4p-pac .im .bz { animation: pac-bz 3.6s ease-in-out var(--d, 0s) infinite; }
.m4:not(.is-reduced) .m4p-pac:hover .im .bz { animation-duration: 2.4s; }
@keyframes pac-bz { 0%, 62%, 100% { opacity: 0; scale: .2; rotate: 0deg; } 73% { opacity: calc(.35 + .65 * var(--f, .5)); scale: 1; rotate: 35deg; } 86% { opacity: 0; scale: .3; rotate: 70deg; } }
.m4p-pac .n { margin-top: 6px; font: 700 clamp(26px, 2.3vw, 36px)/1 var(--m4-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.m4p-pac .u { margin-top: 7px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-pac .bn { margin: 12px 0 16px; padding: 5px 9px; background: rgba(255, 225, 77, .12); color: var(--m4-volt); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.m4p-pac .pr { width: 100%; margin-top: auto; padding: 13px 8px; background: var(--m4-paper); color: var(--m4-black); font: 700 14px/1 var(--m4-display); letter-spacing: .01em; transition: background .3s; }
.m4p-pac:hover .pr, .m4p-pac:focus-visible .pr { background: var(--m4-volt); }
.m4p-pac .tag { position: absolute; z-index: 3; top: -13px; left: 50%; translate: -50% 0; rotate: -3deg; padding: 6px 10px; background: var(--m4-volt); color: var(--m4-black);
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 3px 3px 0 var(--m4-black); overflow: hidden; }
.m4p-pac.t-top .tag { background: var(--m4-red); color: var(--m4-paper); }
/* 06/11 21:45 (vídeo: "no Mais popular e no Melhor valor, algum brilho, algum efeito pra chamar a atenção... parado e de vez em
   quando mexendo pra um lado e pro outro, nível Apple"): o selo fica parado e, a cada ~5,6 s, dá uma balançada curta e um
   brilho o atravessa; os dois se alternam (nunca juntos) */
.m4p-pac .tag::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 70%); }
.m4:not(.is-reduced) .m4p-pac .tag { animation: tag-chama 5.6s cubic-bezier(.36, .07, .19, .97) 1.2s infinite; }
.m4:not(.is-reduced) .m4p-pac .tag::after { animation: tag-luz 5.6s ease-in-out 1.2s infinite; }
.m4:not(.is-reduced) .m4p-pac.t-top .tag, .m4:not(.is-reduced) .m4p-pac.t-top .tag::after { animation-delay: 4s; }
@keyframes tag-chama { 0%, 70%, 100% { rotate: -3deg; scale: 1; } 74% { rotate: 4deg; scale: 1.1; } 78% { rotate: -7deg; scale: 1.1; } 82% { rotate: 2deg; scale: 1.05; } 86% { rotate: -4deg; scale: 1; } 90% { rotate: -3deg; } }
@keyframes tag-luz { 0%, 72% { transform: translateX(-130%); } 90%, 100% { transform: translateX(130%); } }

/* confiança: 4 itens com ícone de linha */
.m4p-conf { list-style: none; margin: 60px 0 0; padding: 28px 0 0; border-top: 1px solid var(--m4-line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.m4p-conf li { display: flex; align-items: flex-start; gap: 14px; }
.m4p-conf svg { flex: none; width: 26px; height: 26px; color: var(--m4-volt); }
.m4p-conf b { display: block; font: 700 13px/1.25 var(--m4-display); letter-spacing: .02em; text-transform: uppercase; }
.m4p-conf span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.45; color: var(--m4-gray); }
.m4p-doar .m4p-demo, .m4p-pag .m4p-demo, .m4p-rkp .m4p-demo { margin-top: 40px; }

/* portão (entre para continuar) e pagamento sem pacote */
.m4p-gate--loja .m4-ctas { margin-top: 6px; }

/* ---- VIP ACCOUNT pelo site (06/11): os 3 planos com as coroas do estilo escolhido, a confirmação e o "VIP ativo" ---- */
.m4p-vip { position: relative; overflow: hidden; padding: 0 0 84px; background: var(--m4-black); }
.m4p-vip-cima { position: relative; padding: 96px 0 30px;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
/* 06/11 21:41 (vídeo): "esse Seja VIP tá meio estranho, nesse lado; talvez ficaria no meio, tá meio pequeno" e "talvez o card um
   pouco maior": o título no MEIO e maior, o texto e o saldo centrados, as cartas 20 % maiores */
.m4p-vip-top .tt { display: grid; justify-items: center; text-align: center; }
.m4p-vip .m4p-words--doar { justify-content: center; font-size: clamp(46px, 6.4vw, 108px); }
.m4p-vip-lead { margin: 14px auto 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: rgba(242, 240, 234, .8); }
.m4p-vip-top .m4p-ola { justify-content: center; margin-top: 14px; }
.m4p-vip-top .m4p-ola .ativo { color: #6fe39a; }
.m4p-vips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; max-width: 1140px; margin: 30px auto 0; }
.m4p-vipc { position: relative; display: flex; flex-direction: column; align-items: center; padding: 34px 24px 22px; border: 1px solid var(--m4-line); background: var(--m4-ink);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
/* sem o bloco amarelo atrás (o mesmo pedido do Doar): sobe com a borda amarela e uma sombra escura macia */
.m4p-vipc:hover { transform: translateY(-6px); box-shadow: 0 20px 38px rgba(0, 0, 0, .5); border-color: var(--m4-volt); }
.m4p-vipc.t-pop { border-color: rgba(255, 225, 77, .55); }
.m4p-vipc .tag { position: absolute; z-index: 3; top: -13px; left: 50%; translate: -50% 0; rotate: -3deg; padding: 6px 10px; background: var(--m4-volt); color: var(--m4-black);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--m4-black); overflow: hidden; }
.m4p-vipc.t-top .tag { background: var(--m4-red); color: var(--m4-paper); }
.m4p-vipc .tag::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 70%); }
.m4:not(.is-reduced) .m4p-vipc .tag { animation: tag-chama 5.6s cubic-bezier(.36, .07, .19, .97) 1.2s infinite; }
.m4:not(.is-reduced) .m4p-vipc .tag::after { animation: tag-luz 5.6s ease-in-out 1.2s infinite; }
.m4:not(.is-reduced) .m4p-vipc.t-top .tag, .m4:not(.is-reduced) .m4p-vipc.t-top .tag::after { animation-delay: 4s; }
/* a carta do VIP do jogo (160×240) a 192×288 */
.m4p-vipc .im { position: relative; display: grid; place-items: center; width: 100%; height: 300px; }
.m4p-vipc .im img { position: relative; z-index: 1; width: 192px; height: 288px; max-width: none; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .6));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .5s; }
.m4p-vipc:hover .im img { transform: translateY(-8px) rotate(-3deg) scale(1.03); }
.m4p-vipc:nth-child(1):hover .im img { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px rgba(90, 150, 255, .45)); }
.m4p-vipc:nth-child(2):hover .im img { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px rgba(190, 130, 255, .5)); }
.m4p-vipc:nth-child(3):hover .im img { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px rgba(255, 200, 80, .45)); }
.m4p-vipm .okv .luz { position: absolute; z-index: 0; left: 50%; top: 56%; width: 80%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 205, 80, .4), rgba(255, 170, 50, .14) 55%, rgba(255, 170, 50, 0)); }
.m4:not(.is-reduced) .m4p-vipm .okv .luz { animation: pac-luz 3.4s ease-in-out infinite; }
@keyframes pac-luz { 0%, 100% { opacity: .72; scale: .94; } 50% { opacity: 1; scale: 1.06; } }
.m4p-vipc .d { margin-top: 8px; font: 800 clamp(28px, 2.5vw, 38px)/1 var(--m4-display); letter-spacing: -.03em; text-transform: uppercase; }
/* preço em proporção (dono: "pcoin ícone tá muito pequeno, não tá harmônico"): moeda 32 px ao lado do número de 30 px, centrados */
.m4p-vipc .pr { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font: 800 30px/1 var(--m4-display); color: var(--m4-volt); font-variant-numeric: tabular-nums; }
.m4p-vipc .pr img { width: 32px; height: 32px; flex: none; filter: drop-shadow(0 3px 8px rgba(255, 200, 60, .35)); }
.m4p-vipc .pr small { align-self: center; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--m4-gray); }
/* mesma cor e aparência do selo de bônus dos pacotes (+12% / +18%) — dono 06/11: "faça na cor e aparência igual" */
.m4p-vipc .eco { margin: 10px 0 18px; padding: 5px 9px; background: rgba(255, 225, 77, .12); color: var(--m4-volt); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.m4p-vipc .eco.vazio { background: none; }
.m4p-vipc .m4-btn { width: 100%; justify-content: center; margin-top: auto; border: 0; cursor: pointer; }
/* "o que o VIP dá": 6 benefícios em cartões com ícone de linha (no lugar dos pontinhos), que acendem no mouse */
.m4p-vip-ben { max-width: 1140px; margin: 38px auto 0; padding: 24px 26px 22px; border: 1px solid var(--m4-line); background: rgba(21, 21, 23, .8); }
.m4p-vip-ben h2 { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--m4-volt); }
.m4p-vip-ben ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.m4p-vip-ben li { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 13px 16px; border: 1px solid rgba(242, 240, 234, .08); background: rgba(255, 255, 255, .025);
  font-size: 15px; line-height: 1.35; color: rgba(242, 240, 234, .9); transition: border-color .3s, background-color .3s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.m4p-vip-ben li .ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; background: rgba(255, 225, 77, .1); color: var(--m4-volt);
  transition: background-color .3s, color .3s; }
.m4p-vip-ben li .ic svg { width: 22px; height: 22px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.m4p-vip-ben li .bt { min-width: 0; }
.m4p-vip-ben li:hover { border-color: rgba(255, 225, 77, .45); background: rgba(255, 225, 77, .04); transform: translateY(-2px); }
.m4p-vip-ben li:hover .ic { background: var(--m4-volt); color: var(--m4-black); }
.m4p-vip-ben li:hover .ic svg { transform: scale(1.12) rotate(-6deg); }
.m4p-vip-ben .nao { margin: 16px 0 0; font-size: 11px; line-height: 1.6; letter-spacing: .02em; text-transform: none; color: var(--m4-gray); }
.m4p-vip-regras { max-width: 1140px; margin: 18px auto 0; font-size: 11px; letter-spacing: .02em; text-transform: none; color: var(--m4-gray); }
.m4p-vip-regras a { color: var(--m4-volt); }
.m4p-vip .m4p-demo { max-width: 1140px; margin: 8px auto 0; }
.m4p-vipm { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.m4p-vipm[hidden] { display: none; }
.m4p-vipm .ov { position: absolute; inset: 0; background: rgba(11, 11, 12, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.m4p-vipm .cx { position: relative; display: grid; gap: 14px; width: min(440px, 100%); padding: 26px; background: var(--m4-paper); color: var(--m4-black); box-shadow: 12px 12px 0 var(--m4-volt); }
.m4p-vipm .x { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 46px; height: 46px; appearance: none; border: 0; background: var(--m4-black); color: var(--m4-paper); cursor: pointer;
  transition: background .25s, color .25s; }
.m4p-vipm .x:hover, .m4p-vipm .x:focus-visible { background: var(--m4-volt); color: var(--m4-black); outline: none; }
.m4p-vipm .x svg { width: 18px; height: 18px; }
.m4p-vipm .hd { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 16px; padding-right: 40px; }
.m4p-vipm .hd .im { display: grid; place-items: center; width: 84px; height: 96px; background: var(--m4-black); }
.m4p-vipm .hd img { width: 56px; height: 84px; }
.m4p-vipm .hd .k, .m4p-vipm .cta { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #5b5b62; }
.m4p-vipm h2 { margin: 4px 0; font: 800 24px/1.05 var(--m4-display); letter-spacing: -.02em; text-transform: uppercase; }
.m4p-vipm .vl, .m4p-vipm .dp { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 0; border-top: 1px solid rgba(11, 11, 12, .14); }
.m4p-vipm .vl span, .m4p-vipm .dp span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #5b5b62; }
.m4p-vipm .vl b { display: inline-flex; align-items: center; gap: 8px; font: 800 26px/1 var(--m4-display); font-variant-numeric: tabular-nums; }
.m4p-vipm .dp b { font: 700 18px/1 var(--m4-display); font-variant-numeric: tabular-nums; }
.m4p-vipm .falta { margin: 0; font-size: 12px; color: #c42323; }
.m4p-vipm .m4-btn { justify-content: center; border: 0; cursor: pointer; }
.m4p-vipm .okv { display: grid; justify-items: center; gap: 8px; padding-top: 6px; text-align: center; }
.m4p-vipm .okv .im { position: relative; display: grid; place-items: center; width: 180px; height: 200px; }
.m4p-vipm .okv img { position: relative; z-index: 1; width: 120px; height: 180px; }
.m4p-vipm .okv h2 { font-size: 30px; }
.m4p-vipm .okv p { margin: 0; color: #3a3a40; }
.m4p-vipm .okv .ate { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #1d7a3c; }
.m4p-vipm .okv .m4-btn { margin-top: 8px; }
@media (max-width: 760px) {
  .m4p-vips { grid-template-columns: minmax(0, 1fr); max-width: 420px; gap: 26px; }
  .m4p-vip-ben ul { grid-template-columns: minmax(0, 1fr); }
}
/* BANNER do VIP no Doar (06/11, "faça algo mais épico, sem fundo transparente"): fundo épico do Higgsfield (sólido), as 3 cartas
   do jogo grandes em leque, com luz e boiando; título forte e botão. O clique leva à página do VIP. */
/* 06/11 21:41–21:45 (vídeos): "ficou muito bonito... o tamanho também"; mas sem o amarelo de trás (bloco e luz amarelada) e
   "quando eu passo o mouse esses cards têm que se mover, bem legal" + "o realce do brilho... seja VIP, ver planos": no mouse as
   cartas se abrem em leque e sobem, seguem o mouse em profundidades diferentes (3D leve), um brilho atravessa o banner e o
   Ver planos acende */
.m4p-vipfx { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  margin: 30px 0 0; min-height: 232px; padding: 30px 34px 30px 40px; color: var(--m4-paper);
  background: radial-gradient(70% 120% at 82% 40%, #6a3fd0 0%, #2a1a6b 45%, #0d1030 100%); border: 1px solid rgba(255, 225, 77, .4); box-shadow: 0 22px 54px rgba(0, 0, 0, .45);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s cubic-bezier(.2, .8, .2, 1), border-color .4s; }
.m4p-vipfx:hover { transform: translateY(-4px); border-color: rgba(255, 225, 77, .8); box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 34px rgba(150, 100, 255, .22); }
.m4p-vipfx .fundo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.m4p-vipfx:hover .fundo { transform: scale(1.05); }
.m4p-vipfx .vela { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7, 8, 24, .92) 0%, rgba(7, 8, 24, .7) 42%, rgba(7, 8, 24, 0) 72%); }
/* o realce: uma faixa de luz atravessa o banner quando o mouse entra (volta escondida, sem varrer de volta) */
.m4p-vipfx .varre { position: absolute; z-index: 0; top: -10%; bottom: -10%; left: 0; width: 34%; pointer-events: none; opacity: 0; transform: translateX(-120%) skewX(-14deg);
  background: linear-gradient(90deg, rgba(255, 250, 235, 0), rgba(255, 246, 220, .14) 40%, rgba(255, 255, 255, .26) 50%, rgba(255, 246, 220, .14) 60%, rgba(255, 250, 235, 0)); }
.m4p-vipfx:hover .varre { opacity: 1; transform: translateX(330%) skewX(-14deg); transition: transform 1.3s cubic-bezier(.4, 0, .2, 1), opacity .25s; }
.m4p-vipfx .tx { position: relative; z-index: 1; display: grid; justify-items: start; gap: 8px; min-width: 0; max-width: 560px; }
.m4p-vipfx .k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--m4-volt); }
.m4p-vipfx .t { font: 800 clamp(36px, 3.6vw, 56px)/.95 var(--m4-display); letter-spacing: -.035em; text-transform: uppercase; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.m4p-vipfx .p { font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.m4p-vipfx .m4-btn { margin-top: 8px; min-height: 50px; pointer-events: none; }
.m4p-vipfx:hover .m4-btn { background: #ffe866; box-shadow: 9px 9px 0 var(--m4-red), 0 0 28px rgba(255, 225, 77, .5); }
.m4p-vipfx:hover .m4-btn .ar { transform: translateX(6px); }
.m4p-vipfx .cartas { position: relative; z-index: 1; width: 330px; height: 200px; perspective: 900px; }
.m4p-vipfx .vc { position: absolute; top: 30px; width: 108px; height: 162px; transform-style: preserve-3d; }
.m4p-vipfx .vc:nth-child(1) { left: 14px; rotate: -12deg; }
.m4p-vipfx .vc:nth-child(2) { left: 111px; z-index: 2; top: 6px; width: 116px; height: 174px; }
.m4p-vipfx .vc:nth-child(3) { left: 208px; rotate: 12deg; }
.m4p-vipfx .vc img { display: block; width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6));
  transition: transform .75s cubic-bezier(.2, .9, .25, 1.15), filter .5s; }
.m4p-vipfx:hover .vc:nth-child(1) img { transform: translate(-24px, -12px) rotate(-7deg); filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(90, 150, 255, .5)); }
.m4p-vipfx:hover .vc:nth-child(2) img { transform: translateY(-18px) scale(1.08); filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .62)) drop-shadow(0 0 14px rgba(190, 130, 255, .55)); }
.m4p-vipfx:hover .vc:nth-child(3) img { transform: translate(24px, -12px) rotate(7deg); filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(255, 200, 80, .5)); }
.m4:not(.is-reduced) .m4p-vipfx .vc:nth-child(2) { animation: vipfx-boia 3.6s ease-in-out infinite; }
@keyframes vipfx-boia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@media (max-width: 760px) {
  .m4p-vipfx { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; }
  .m4p-vipfx .cartas { justify-self: center; width: 300px; height: 190px; }
}

/* ---------- PAGAMENTO ---------- */
.m4p-pag, .m4p-rkp { position: relative; overflow: hidden; padding: 116px 0 84px;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4p-pag-top { display: grid; justify-items: start; }
.m4p-words--pag { margin-top: 18px; }
.m4p-words--pag .w > span { font-size: clamp(40px, 6.6vw, 118px); }
.m4p-pag-top .lead, .m4p-rkp .lead { margin: 18px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.55; color: rgba(242, 240, 234, .78); }
.m4p-pag .m4p-pag-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(30px, 4.4vw, 76px); align-items: start; margin-top: clamp(34px, 3.6vw, 52px); }
/* 06/11 (1º vídeo: "esse cabeçalho tá muito grande de novo... já tem que aparecer o seu pedido, ver tudo de uma vez"):
   título numa linha só (como o do Doar), menos respiro, e o "Seu pedido" inteiro na primeira tela */
.m4p-pag { padding-top: 92px; }
.m4p-pag .m4p-words--pag { display: flex; flex-wrap: wrap; column-gap: .26em; margin-top: 10px; font-size: clamp(30px, 3.6vw, 60px); }
.m4p-pag .m4p-words--pag .w > span { font-size: 1em; }
.m4p-pag .m4p-words--pag .w2 > span { -webkit-text-stroke-width: 3px; }
.m4p-pag .m4p-pag-top .lead { margin-top: 8px; font-size: 16px; }
.m4p-pag .m4p-pag-in { margin-top: clamp(20px, 2.2vw, 30px); }
.m4p-pag-l { min-width: 0; }
/* cartão papel com sombra amarela (como o do login) */
.m4p-pcard { position: relative; padding: 30px clamp(20px, 2.6vw, 38px) 28px; background: var(--m4-paper); color: var(--m4-black); box-shadow: 12px 12px 0 var(--m4-volt); }
.m4p-pcard[hidden] { display: none !important; }
.m4p-pcard .hh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; margin-bottom: 22px; }
.m4p-pcard h2 { margin: 0; font: 800 clamp(24px, 2.4vw, 34px)/1 var(--m4-display); letter-spacing: -.03em; text-transform: uppercase; outline: none; }
.m4p button.m4-btn { cursor: pointer; }
.m4p button.m4-btn--line { background-color: transparent; }
.m4p-pcard .m4-btn--line { color: var(--m4-black); border-color: var(--m4-black); }
.m4p-pcard .m4-btn--line::before { background: var(--m4-black); }
.m4p-pcard .m4-btn--line:hover { color: var(--m4-paper); }
.m4p-pcard .acoes { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 24px; }
.m4p-lk3 { display: inline-flex; align-items: center; gap: 8px; padding: 0; appearance: none; border: 0; background: none; color: var(--m4-black); cursor: pointer; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: color .25s; }
.m4p-lk3 svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.m4p-lk3:hover { color: var(--m4-red); }
.m4p-lk3:hover svg { transform: translateX(-4px); }
.m4p-lk3.claro { color: var(--m4-paper); }
.m4p-lk3.claro:hover { color: var(--m4-volt); }
/* resumo do pedido: faixa preta com as moedas, os Pcoins e o valor */
.m4p-ped .resumo { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 20px; background: var(--m4-black); color: var(--m4-paper); }
.m4p-ped .mo { width: 84px; height: auto; max-width: none; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }   /* o sprite ×2 pela metade (nítido) */
.m4p-ped .qt b { display: block; font: 800 34px/1 var(--m4-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.m4p-ped .qt > span { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-ped .qt .bn { display: inline-block; margin-top: 10px; padding: 4px 8px; background: var(--m4-volt); color: var(--m4-black); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .04em; }
.m4p-ped .vl { display: grid; justify-items: end; gap: 5px; text-align: right; }
.m4p-ped .vl .de { font: 600 14px/1 var(--m4-body); color: var(--m4-gray); text-decoration: line-through; }
.m4p-ped .vl .de[hidden] { display: none; }
.m4p-ped .vl .por { display: inline-block; font: 800 clamp(22px, 2.2vw, 30px)/1 var(--m4-display); letter-spacing: -.02em; color: var(--m4-volt); font-variant-numeric: tabular-nums; }
.m4p-ped .vl .lg { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--m4-gray); }
/* pagador: e-mail, CPF e cupom */
.m4p-ped .payer { display: grid; gap: 18px; margin-top: 26px; }
.m4p-ped .dois { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 22px; }
.m4p-f.ro input { color: #5b5b62; cursor: default; }
.m4p-cupom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.m4p-cupom .m4p-f .er { display: none; }
.m4p-cupom .ap { height: 46px; padding: 0 20px; appearance: none; border: 2px solid var(--m4-black); background: transparent; color: var(--m4-black); cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: background .25s, color .25s; }
.m4p-cupom .ap:hover { background: var(--m4-black); color: var(--m4-volt); }
.m4p-cupom .ap.is-load { opacity: .55; cursor: progress; }
.m4p-ped .cmsg { margin: -6px 0 0; font-size: 12px; letter-spacing: .02em; color: #c42323; }
.m4p-ped .cmsg.ok { color: #1d7a3c; }
.m4p-ped .cmsg[hidden] { display: none; }
/* meios de pagamento: botão grande que enche de preto no mouse */
.m4p-ped .st { margin: 28px 0 12px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #5b5b62; }
.m4p-ped .meios { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.meio { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 86px; padding: 16px 18px;
  appearance: none; border: 2px solid var(--m4-black); background: var(--m4-paper); color: var(--m4-black); cursor: pointer; text-align: left; font: inherit;
  transition: color .3s, transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1); }
.meio::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--m4-black); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.meio:hover, .meio:focus-visible { color: var(--m4-paper); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--m4-volt); }
.meio:hover::before, .meio:focus-visible::before { transform: scaleY(1); }
.meio > svg { width: 30px; height: 30px; }
.meio:hover > svg, .meio:focus-visible > svg { color: var(--m4-volt); }
.meio .tx b { display: block; font: 800 18px/1 var(--m4-display); letter-spacing: -.01em; text-transform: uppercase; }
.meio .tx > span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; opacity: .78; }
.meio .ar svg { display: block; width: 20px; height: 20px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.meio:hover .ar svg { transform: translateX(4px); }
.meio .ld { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--m4-volt); transform: scaleX(0); transform-origin: 0 50%; }
.meio.is-load .ld { animation: m4p-ld 1s cubic-bezier(.45, 0, .2, 1) forwards; }
.meio:disabled { cursor: progress; }
.m4p-ped .regras { margin: 18px 0 0; font-size: 13px; color: #5b5b62; }
.m4p-ped .regras a { color: var(--m4-black); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m4p-ped .regras a:hover { color: var(--m4-red); }
/* Pix: QR de exemplo, relógio, Copia e Cola */
.m4p-pix .pix-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.m4p-pix .qr { display: grid; justify-items: center; gap: 12px; }
.m4p-pix .qrbox { width: 224px; aspect-ratio: 1; padding: 12px; background: #fff; box-shadow: 0 0 0 2px var(--m4-black), 6px 6px 0 2px var(--m4-black); }
.m4p-pix .qrbox svg { display: block; width: 100%; height: 100%; }
.m4p-pix .selo { padding: 5px 9px; background: var(--m4-red); color: var(--m4-paper); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.m4p-pix .det { min-width: 0; }
.m4p-pix .stt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #5b5b62; }
.m4p-pix .stt .ag { color: var(--m4-black); font-weight: 600; }
.m4p-pix .stt b { color: var(--m4-black); font-variant-numeric: tabular-nums; }
.m4p-pix .pulso { width: 9px; height: 9px; border-radius: 50%; background: #e09a00; }
.m4p-pix .pulso.fim { background: var(--m4-red); animation: none; }
@keyframes m4p-pulso { 0% { box-shadow: 0 0 0 0 rgba(224, 154, 0, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(224, 154, 0, 0); } }
/* movimento: segue o botão Movimento completo (classe is-reduced no #app), não só o sistema */
.m4:not(.is-reduced) .m4p-pix .pulso:not(.fim) { animation: m4p-pulso 1.6s infinite; }
.m4p-pix .lb { display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #5b5b62; }
.m4p-pix textarea { display: block; width: 100%; box-sizing: border-box; resize: none; padding: 12px 14px; border: 2px solid var(--m4-black); border-radius: 0; background: #fff; color: var(--m4-black);
  font: 500 12.5px/1.55 var(--m4-mono); word-break: break-all; outline: none; transition: box-shadow .25s; }
.m4p-pix textarea:focus { box-shadow: 5px 5px 0 var(--m4-volt); }
.m4p .m4p-copiar { width: 100%; justify-content: center; margin-top: 14px; border: 0; cursor: pointer; }
.m4p-copiar svg { width: 18px; height: 18px; }
.m4p-pix .cmsg2 { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: #5b5b62; }
.m4p-pix .cmsg2[hidden] { display: none; }
.m4p-pcard .tot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(11, 11, 12, .14); }
.m4p-pcard .tot span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #5b5b62; }
.m4p-pcard .tot b { font: 800 17px/1.15 var(--m4-display); letter-spacing: -.01em; }
.m4p-sim { width: 100%; margin-top: 18px; padding: 12px 14px; appearance: none; border: 2px dashed rgba(11, 11, 12, .42); background: transparent; color: var(--m4-black); cursor: pointer;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; transition: border-color .25s, background .25s; }
.m4p-sim:hover { border-color: var(--m4-black); background: rgba(255, 225, 77, .45); }
.m4p-pix .sim-n { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: #5b5b62; }
/* cartão: no site real vai para a Stripe */
.m4p-cart .cart-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px; background: var(--m4-black); color: var(--m4-paper); }
.m4p-cart .cart-in svg { width: 34px; height: 34px; color: var(--m4-volt); }
.m4p-cart .cart-in p { margin: 0; font-size: 15.5px; line-height: 1.55; }
/* aprovado */
.m4p-aprov { display: grid; justify-items: center; text-align: center; padding-top: 42px; padding-bottom: 36px; }
.m4p-aprov .ck, .m4p-rkok .ck { display: grid; place-items: center; width: 88px; height: 88px; background: var(--m4-volt); color: var(--m4-black); box-shadow: 6px 6px 0 var(--m4-red); }
.m4p-aprov .ck svg, .m4p-rkok .ck svg { width: 44px; height: 44px; }
.m4p-aprov h2 { margin-top: 24px; }
.m4p-aprov .okp { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: #3a3a40; }
.m4p-aprov .ns { display: grid; justify-items: center; gap: 8px; margin-top: 24px; padding: 16px 28px; background: var(--m4-black); color: var(--m4-paper); }
.m4p-aprov .ns > span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-aprov .ns b { display: inline-flex; align-items: center; gap: 10px; font: 800 40px/1 var(--m4-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.m4p-aprov .acoes { justify-content: center; }
/* direita: o que acontece agora */
.m4p-pag-r { position: sticky; top: 96px; min-width: 0; }
.m4p-pag-r .m4-h2 { font-size: clamp(30px, 3vw, 46px); }
.m4p-pag-r .m4-h2 em { font-style: normal; color: var(--m4-volt); }
.m4p-agora { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--m4-line); }
.m4p-agora li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--m4-line); }
.m4p-agora .n { font: 800 34px/1 var(--m4-display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.4px var(--m4-volt); }
.m4p-agora h3 { margin: 3px 0 7px; font: 700 14.5px/1.25 var(--m4-display); letter-spacing: .01em; text-transform: uppercase; }
.m4p-agora p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(242, 240, 234, .72); }
/* chuva de Pcoins no aprovado */
.m4p-chuva { position: fixed; inset: 0; z-index: 95; overflow: hidden; pointer-events: none; perspective: 700px; }
.m4p-chuva img { position: absolute; left: 0; top: 0; max-width: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }

/* ---------- COMPRAR RK ---------- */
.m4p-rkp-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(32px, 5vw, 96px); align-items: start; }
.m4p-rkp .l { display: grid; justify-items: start; min-width: 0; }
.m4p-rkp .l .m4-label { margin-top: 30px; }
.m4p-words--rk2 { margin-top: 16px; }
.m4p-words--rk2 .w > span { font-size: clamp(56px, 9vw, 164px); }
/* a chave atual (riscada no fim) e a nova (embaralha enquanto espera o código) */
.m4p-chaves { display: grid; gap: 10px; width: 100%; max-width: 520px; margin-top: 36px; }
.m4p-chaves .ch { position: relative; padding: 14px 16px; border: 1px solid var(--m4-line); background: rgba(11, 11, 12, .72); }
.m4p-chaves .ch > span { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-chaves code { display: block; margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--m4-paper); font: 600 clamp(15px, 1.5vw, 19px)/1.2 var(--m4-mono); letter-spacing: .08em; transition: color .4s; }
.m4p-chaves .risco { position: absolute; left: 14px; right: 14px; top: 64%; height: 2px; background: var(--m4-red); transform: scaleX(0); transform-origin: 0 50%; }
.m4p-chaves .velha.off code { color: rgba(242, 240, 234, .32); }
.m4p-chaves .velha.off .risco { transform: scaleX(1); }
.m4p-chaves .seta { justify-self: center; color: var(--m4-volt); }
.m4p-chaves .seta svg { display: block; width: 20px; height: 20px; }
.m4p-chaves .nova { border-color: rgba(255, 225, 77, .45); }
.m4p-chaves .nova code { color: var(--m4-volt); }
.m4p-chaves .nova .ok { position: absolute; right: 14px; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px; background: var(--m4-volt); color: var(--m4-black); transform: scale(0); }
.m4p-chaves .nova .ok svg { width: 16px; height: 16px; }
.m4p-chaves .nova.feita .ok { transform: scale(1); }
.m4p-rkp .r { min-width: 0; }
.m4p-rkg p { margin: 0; font-size: 16px; line-height: 1.55; }
.m4p-rkg .acoes { margin-top: 20px; }
.m4p-rkf { display: grid; gap: 18px; }
.m4p-rkf .pp { margin: -6px 0 0; font-size: 15px; line-height: 1.55; color: #3a3a40; }
.m4p-rkf .preco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 2px solid var(--m4-black); }
.m4p-rkf .preco > div { padding: 14px 16px; }
.m4p-rkf .preco > div + div { border-left: 2px solid var(--m4-black); }
.m4p-rkf .preco span { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #5b5b62; }
.m4p-rkf .preco b { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 800 21px/1 var(--m4-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.m4p-rkf .preco b img { width: 24px; height: 24px; }
.m4p-rkf .cod { display: grid; gap: 10px; overflow: hidden; }
.m4p-rkf .cod[hidden] { display: none; }
.m4p-rkf .cod .lb { font-size: 11px; color: #5b5b62; }
.m4p-rkf .nota { margin: 0; font-size: 12px; line-height: 1.55; color: #5b5b62; }
.m4p-rkf .acoes { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-top: 4px; }
.m4p-rkf .acoes .m4p-go { margin-top: 0; }
.m4p-rkf .acoes .m4-btn--line { justify-content: center; }
.m4p-rkf input:disabled { opacity: .55; }
.m4p-erro2 { margin: 0; padding: 12px 14px; border-left: 3px solid var(--m4-red); background: rgba(255, 59, 59, .1); color: #a01c1c; font-size: 14px; line-height: 1.45; }
.m4p-erro2[hidden] { display: none; }
.m4p-erro2 a { color: inherit; font-weight: 700; white-space: nowrap; }
.m4p-rkok { display: grid; justify-items: start; gap: 12px; }
.m4p-rkok[hidden] { display: none; }
.m4p-rkok h2 { margin-top: 10px; }
.m4p-rkok p { margin: 0; font-size: 15px; line-height: 1.55; }
.m4p-rkok .nota { font-size: 13px; color: #5b5b62; }
.m4p-rkok .acoes { margin-top: 10px; }

@media (max-width: 1180px) {
  .m4p-pacs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .m4p-outro { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 980px) {
  .m4p-pag .m4p-pag-in, .m4p-rkp-in { grid-template-columns: minmax(0, 1fr); }
  .m4p-pag-r { position: static; }
  .m4p-conf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759.98px) {
  .m4p-pag, .m4p-rkp { padding-top: 100px; }
  .m4p-doar-cima { padding: 92px 0 44px; }
  .m4p-doar-top { gap: 12px 14px; }
  .m4p-moeda { width: 96px; margin: 0; }
  .m4p-words--pag .w > span { font-size: clamp(32px, 10.4vw, 78px); }
  .m4p-words--doar { font-size: clamp(28px, 8.2vw, 56px); }
  .m4p-words--doar .w2 > span { -webkit-text-stroke-width: 2px; }
  .m4p-words--rk2 .w > span { font-size: clamp(54px, 18vw, 120px); }
  .m4p-livre .ln { grid-template-columns: auto minmax(0, 1fr); }
  .m4p-livre .rs { padding: 0 14px; font-size: 18px; }
  .m4p-livre input { height: 62px; padding: 0 14px; }
  .m4p-livre .ln .m4-btn { grid-column: 1 / -1; justify-content: center; min-height: 54px; }
  .m4p-medidor .mk b { font-size: 12px; }
  .m4p-medidor .mk span { font-size: 8.5px; letter-spacing: 0; }
  .m4p-medidor .th { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  .m4p-pacs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; margin-top: 24px; }
  .m4p-pac { padding: 22px 10px 12px; }
  .m4p-pac .pr { font-size: 13px; padding: 12px 6px; }
  .m4p-conf { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .m4p-pcard { padding: 24px 18px 22px; box-shadow: 8px 8px 0 var(--m4-volt); }
  .m4p-ped .resumo { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .m4p-ped .mo { width: 64px; }
  .m4p-ped .vl { grid-column: 1 / -1; justify-items: start; text-align: left; padding-top: 12px; border-top: 1px solid rgba(242, 240, 234, .14); }
  .m4p-ped .dois, .m4p-ped .meios { grid-template-columns: minmax(0, 1fr); }
  .m4p-pix .pix-in { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .m4p-pix .det { width: 100%; }
  .m4p-pix .qrbox { width: 200px; }
  .m4p-rkf .preco { grid-template-columns: minmax(0, 1fr); }
  .m4p-rkf .preco > div + div { border-left: 0; border-top: 2px solid var(--m4-black); }
  .m4p-rkf .acoes { grid-template-columns: minmax(0, 1fr); }
  .m4p-agora li { grid-template-columns: 52px minmax(0, 1fr); }
  .m4p-pcard .acoes .m4-btn, .m4p-srk .compra .m4-btn { width: 100%; justify-content: center; padding: 0 14px; font-size: 12.5px; }
}

/* ---------- SEGURANÇA: linhas numeradas (título à esquerda, painel papel à direita) ---------- */
.m4p-segu { position: relative; overflow: hidden; padding: 116px 0 84px;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4p-seg-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px 50px; margin-top: 26px; }
.m4p-seg-top .tt { display: grid; justify-items: start; min-width: 0; }
.m4p-words--seg { margin-top: 16px; }
.m4p-words--seg .w > span { font-size: clamp(40px, 6.6vw, 118px); }
.m4p-seg-top .lead { margin: 18px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.55; color: rgba(242, 240, 234, .78); }
/* proteção da conta: anel de 4 arcos + a lista */
.m4p-escudo { display: grid; grid-template-columns: auto auto; align-items: center; gap: 22px; padding: 22px 26px; border: 1px solid var(--m4-line); background: rgba(11, 11, 12, .76); }
.m4p-escudo .anel { position: relative; width: 120px; height: 120px; }
.m4p-escudo svg { display: block; width: 100%; height: 100%; }
.m4p-escudo .arco { fill: none; stroke: rgba(242, 240, 234, .14); stroke-width: 10; stroke-dasharray: 82; stroke-dashoffset: 0; transition: stroke .5s; }
.m4p-escudo .arco.on { stroke: var(--m4-volt); }
.m4p-escudo .anel b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 26px/1 var(--m4-display); letter-spacing: -.02em; color: var(--m4-paper); }
.m4p-escudo .anel b .na { color: var(--m4-volt); }
.m4p-escudo .ex .t { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-escudo ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.m4p-escudo li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(242, 240, 234, .5); transition: color .4s; }
.m4p-escudo li i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.5px solid rgba(242, 240, 234, .3); transition: background .4s, border-color .4s; }
.m4p-escudo li i svg { width: 12px; height: 12px; }
.m4p-escudo li.on { color: var(--m4-paper); }
.m4p-escudo li.on i { background: var(--m4-volt); border-color: var(--m4-volt); color: var(--m4-black); }
/* linhas */
.m4p-sl { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(26px, 4vw, 70px); padding: clamp(40px, 4.4vw, 64px) 0; border-top: 1px solid var(--m4-line); }
.m4p-seg-top + .m4p-sl { margin-top: clamp(44px, 4.6vw, 70px); }
/* 07/11 (vídeo 0336: "o cabeçalho tá meio grande, desperdiçando espaço... deixar menor pra ficar mais fácil e o cara não
   precisar explorar mais pra baixo; tá muito espaçado, deixar menos espaçado pro cara ver todas as opções"): título numa linha
   só e menor, menos respiro em cima, as opções mais juntas e o índice com as 5 opções logo abaixo do título */
.m4p-segu { padding-top: 92px; }
.m4p-seg-top { margin-top: 12px; align-items: center; }
.m4p-words--seg { display: flex; flex-wrap: wrap; column-gap: .26em; margin-top: 10px; }
.m4p-words--seg .w > span { font-size: clamp(30px, 3.3vw, 58px); }
.m4p-seg-top .lead { margin-top: 10px; font-size: 15.5px; }
.m4p-sl { padding: clamp(26px, 2.5vw, 38px) 0; }
.m4p-seg-idx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 22px; padding: 14px 0 0; border-top: 1px solid var(--m4-line); }
.m4p-seg-idx .t { margin-right: 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-seg-idx a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid rgba(242, 240, 234, .3); color: var(--m4-paper); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  transition: background .25s, border-color .25s, color .25s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.m4p-seg-idx a b { color: var(--m4-volt); transition: color .25s; }
.m4p-seg-idx a:hover, .m4p-seg-idx a:focus-visible { background: var(--m4-volt); border-color: var(--m4-volt); color: var(--m4-black); transform: translateY(-2px); outline: none; }
.m4p-seg-idx a:hover b, .m4p-seg-idx a:focus-visible b { color: var(--m4-black); }
.m4p-seg-idx .desce { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--m4-volt); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.m4p-seg-idx .desce svg { width: 16px; height: 16px; }
.m4:not(.is-reduced) .m4p-seg-idx .desce svg { animation: seg-desce 1.6s ease-in-out infinite; }
@keyframes seg-desce { 0%, 100% { translate: 0 -2px; opacity: .6; } 50% { translate: 0 4px; opacity: 1; } }
.m4p-seg-idx + .m4p-sl { margin-top: 18px; }
.m4p-sl .sl-l { display: grid; align-content: start; justify-items: start; min-width: 0; }
.m4p-sl .nn { font: 800 clamp(40px, 4vw, 58px)/1 var(--m4-display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.4px var(--m4-volt); }
.m4p-sl h2 { margin: 14px 0 0; font: 800 clamp(26px, 2.6vw, 40px)/1 var(--m4-display); letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; }
.m4p-sl h2 em { font-style: normal; color: var(--m4-volt); }
.m4p-sl .sl-l p { margin: 14px 0 0; max-width: 44ch; font-size: 15.5px; line-height: 1.6; color: rgba(242, 240, 234, .7); }
.m4p-sl .sl-r { min-width: 0; }
.m4p-pcard.sp { padding: 26px clamp(18px, 2.2vw, 30px) 24px; box-shadow: 8px 8px 0 var(--m4-volt); }
.m4p-fsen { display: grid; gap: 18px; }
.m4p-okmsg2 { margin: 0; padding: 12px 14px; border-left: 3px solid #1d7a3c; background: rgba(29, 122, 60, .1); color: #145a2b; font-size: 14px; line-height: 1.45; }
.m4p-okmsg2[hidden] { display: none; }
.m4p-sl .acoes { display: flex; flex-wrap: wrap; gap: 10px 12px; }
/* e-mail da conta */
.m4p-smail .atual, .m4p-srk .atual { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 18px; background: var(--m4-black); color: var(--m4-paper); }
.m4p-smail .atual .lb { font-size: 10.5px; letter-spacing: .12em; color: var(--m4-gray); }
.m4p-smail .atual .vl { font: 600 17px/1.2 var(--m4-body); overflow-wrap: anywhere; }
.m4p-smail .selo, .m4p-srk .selo { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 9px; background: rgba(255, 225, 77, .14); color: var(--m4-volt); font-size: 10.5px; letter-spacing: .08em; }
.m4p-smail .selo svg, .m4p-srk .selo svg { width: 13px; height: 13px; }
.m4p-smail .m4p-abre { margin-top: 18px; }
.m4p-smail .m4p-abre[hidden] { display: none; }
.m4p-smail .fluxo { display: grid; gap: 16px; margin-top: 20px; overflow: hidden; }
.m4p-smail .fluxo[hidden] { display: none; }
.m4p-smail .passos3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m4p-smail .passos3 li { display: flex; align-items: center; gap: 8px; padding: 10px; border: 2px solid rgba(11, 11, 12, .14); font-size: 10.5px; line-height: 1.25; letter-spacing: .05em; color: #5b5b62; transition: border-color .3s, color .3s, background .3s; }
.m4p-smail .passos3 li b { display: grid; place-items: center; flex: none; width: 22px; height: 22px; background: rgba(11, 11, 12, .1); font-size: 11px; transition: background .3s, color .3s; }
.m4p-smail .passos3 li.agora { border-color: var(--m4-black); color: var(--m4-black); }
.m4p-smail .passos3 li.agora b { background: var(--m4-black); color: var(--m4-volt); }
.m4p-smail .passos3 li.feito { border-color: var(--m4-black); background: var(--m4-black); color: var(--m4-paper); }
.m4p-smail .passos3 li.feito b { background: var(--m4-volt); color: var(--m4-black); }
.m4p-smail .etapa { display: grid; gap: 12px; }
.m4p-smail .etapa[hidden] { display: none; }
.m4p-smail .ex, .m4p-s2fa .ex { margin: 0; font-size: 14.5px; line-height: 1.55; color: #3a3a40; }
.m4p-smail .acoes { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.m4p-smail .acoes .m4p-go { margin-top: 0; }
.m4p-smail > .m4p-okmsg2 { margin-top: 16px; }
/* Recovery Key */
.m4p-srk .atual code { font: 600 clamp(14px, 1.4vw, 17px)/1.2 var(--m4-mono); letter-spacing: .08em; }
.m4p-srk .nota { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: #5b5b62; }
.m4p-srk .compra { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 20px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(11, 11, 12, .14); }
.m4p-srk .compra > div > b { display: block; font: 800 16px/1.2 var(--m4-display); text-transform: uppercase; }
.m4p-srk .compra > div > span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: #5b5b62; }
/* duas etapas */
.m4p-s2fa .op { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 18px 0; border-bottom: 1px solid rgba(11, 11, 12, .12); }
.m4p-s2fa .op:first-child { padding-top: 0; }
.m4p-s2fa .ic { display: grid; place-items: center; width: 44px; height: 44px; background: var(--m4-black); color: var(--m4-volt); }
.m4p-s2fa .ic svg { width: 22px; height: 22px; }
.m4p-s2fa .tx { min-width: 0; }
.m4p-s2fa .tx b { display: block; font: 800 15px/1.3 var(--m4-display); text-transform: uppercase; }
.m4p-s2fa .tx em { display: inline-block; margin-left: 6px; padding: 4px 7px; background: rgba(11, 11, 12, .08); color: #3a3a40; font-size: 10px; font-style: normal; letter-spacing: .06em; vertical-align: 2px; }
.m4p-s2fa .op[data-op="mail"] .tx em, .m4p-s2fa .op.ligada .tx em { background: var(--m4-black); color: var(--m4-volt); }
.m4p-s2fa .tx > span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.45; color: #5b5b62; }
.m4p-s2fa .op-f { grid-column: 1 / -1; display: grid; gap: 12px; overflow: hidden; }
.m4p-s2fa .op-f[hidden], .m4p-s2fa .op-f > [hidden] { display: none; }
.m4p-s2fa .a2, .m4p-s2fa .a3 { display: grid; gap: 10px; }
.m4p-s2fa .qrl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.m4p-s2fa .qrbox { width: 132px; aspect-ratio: 1; padding: 8px; background: #fff; box-shadow: 0 0 0 2px var(--m4-black); }
.m4p-s2fa .qrbox svg { display: block; width: 100%; height: 100%; }
.m4p-s2fa .lb { display: block; font-size: 10.5px; letter-spacing: .1em; color: #5b5b62; }
.m4p-s2fa .chv { display: block; margin-top: 6px; font: 600 14px/1.4 var(--m4-mono); letter-spacing: .06em; word-break: break-all; }
.m4p-s2fa .selo { display: inline-block; margin-top: 10px; padding: 4px 8px; background: var(--m4-red); color: var(--m4-paper); font-size: 10px; letter-spacing: .08em; }
.m4p-s2fa > .m4p-okmsg2 { margin-top: 16px; }
.m4p-mini { height: 38px; padding: 0 14px; appearance: none; border: 2px solid var(--m4-black); background: transparent; color: var(--m4-black); cursor: pointer; font-size: 11px; letter-spacing: .08em; white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
.m4p-mini:hover, .m4p-mini.on { background: var(--m4-black); color: var(--m4-volt); }
.m4p-mini.on:hover { background: #2a2a2e; }
.m4p-mini[hidden] { display: none; }
/* computadores autorizados */
.m4p-sdev .cnt { margin: 0 0 12px; font-size: 11px; color: #5b5b62; }
.m4p-sdev .devs { list-style: none; margin: 0; padding: 0; }
.m4p-sdev li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 14px 0; border-top: 1px solid rgba(11, 11, 12, .12); overflow: hidden; }
.m4p-sdev .ic { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--m4-black); }
.m4p-sdev .ic svg { width: 20px; height: 20px; }
.m4p-sdev .tx { min-width: 0; }
.m4p-sdev .tx b { display: block; font: 700 15px/1.25 var(--m4-body); }
.m4p-sdev .tx span { display: block; margin-top: 4px; font-size: 11px; color: #5b5b62; }
.m4p-sdev .tag { padding: 6px 9px; background: var(--m4-volt); color: var(--m4-black); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.m4p-sdev .conf { grid-column: 1 / -1; display: grid; gap: 10px; padding: 12px 14px; border-left: 3px solid var(--m4-red); background: rgba(255, 59, 59, .08); }
.m4p-sdev .conf[hidden] { display: none; }
.m4p-sdev .conf p { margin: 0; font-size: 14px; line-height: 1.45; color: #6b1717; }
.m4p-sdev .conf .m4p-mini.on { border-color: var(--m4-red); background: var(--m4-red); color: var(--m4-paper); }
.m4p-segu .m4p-demo { margin-top: 30px; }
.m4p-segu .m4p-code { max-width: 400px; gap: 8px; }

@media (max-width: 980px) {
  .m4p-seg-top { grid-template-columns: minmax(0, 1fr); }
  .m4p-sl { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 759.98px) {
  .m4p-segu { padding-top: 100px; }
  .m4p-words--seg .w > span { font-size: clamp(34px, 11vw, 80px); }
  .m4p-escudo { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 18px; }
  .m4p-escudo .anel { width: 96px; height: 96px; }
  .m4p-escudo .anel b { font-size: 21px; }
  .m4p-smail .passos3 { grid-template-columns: minmax(0, 1fr); }
  .m4p-smail .acoes { grid-template-columns: minmax(0, 1fr); }
  .m4p-s2fa .op { grid-template-columns: auto minmax(0, 1fr); }
  .m4p-s2fa .op > .m4p-mini { grid-column: 1 / -1; justify-self: start; }
  .m4p-s2fa .qrl { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .m4p-srk .compra { grid-template-columns: minmax(0, 1fr); }
  .m4p-sdev li { grid-template-columns: auto minmax(0, 1fr); }
  .m4p-sdev li > .m4p-mini, .m4p-sdev li > .tag { grid-column: 2; justify-self: start; }
}

/* ---------- NOTÍCIAS (lista, notícia aberta e a especial da Live Coins) ---------- */
/* 06/11 (2º vídeo: "assim que eu entro, ver mais notícias aqui embaixo, ver o Live Coins assim que entro"): cabeçalho
   enxuto — o título numa linha só (como o do Doar) e menos respiro; o destaque, a lista e o cartão da Live Coins
   aparecem inteiros na primeira tela */
.m4p-nts, .m4p-nt { position: relative; overflow: hidden; padding: 92px 0 90px;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4p-nts-top { display: grid; justify-items: start; }
.m4p-words--nt { display: flex; flex-wrap: wrap; column-gap: .26em; margin-top: 12px; font-size: clamp(28px, 3.05vw, 52px); }
.m4p-words--nt .w > span { font-size: 1em; }
.m4p-words--nt .w2 > span { -webkit-text-stroke-width: 3px; }
.m4p-nts .mt, .m4p-nt .mt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-nts .tg, .m4p-nt .tg { padding: 4px 7px; background: var(--m4-volt); color: var(--m4-black); font-size: 10px; font-weight: 700; letter-spacing: .08em; transition: background .3s, color .3s; }
.m4p-nts .lr { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; color: var(--m4-volt); }
.m4p-nts .lr .ar { width: 16px; height: 16px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
/* destaque + últimas + Live Coins */
.m4p-ntd { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 18px 22px; margin-top: clamp(22px, 2.2vw, 34px); }
.m4p-ntd-h { position: relative; grid-row: 1 / 3; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--m4-line); background: var(--m4-ink); color: var(--m4-paper); transition: border-color .3s, box-shadow .45s cubic-bezier(.2, .8, .2, 1); }
.m4p-ntd-h:hover { border-color: var(--m4-volt); box-shadow: 10px 10px 0 var(--m4-volt); }
.m4p-ntd-h .im { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.m4p-ntd-h img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.m4p-ntd-h:hover img { transform: scale(1.045); }
.m4p-ntd-h .cx { display: grid; gap: 14px; padding: 22px 26px 26px; }
.m4p-ntd-h .tt { font: 800 clamp(24px, 2.5vw, 38px)/1.02 var(--m4-display); letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; transition: color .3s; }
.m4p-ntd-h:hover .tt { color: var(--m4-volt); }
.m4p-ntd-h:hover .lr .ar, .m4p-ntd-lc:hover .lr .ar, .m4p-ntc:hover .lr .ar { transform: translateX(5px); }
.m4p-ntd-l { display: grid; align-content: start; padding: 20px 22px 22px; border: 1px solid var(--m4-line); background: rgba(11, 11, 12, .82); }
.m4p-ntd-l .hh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.m4p-ntd-l h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--m4-paper); }
.m4p-ntd-l .hh a { font-size: 11px; color: var(--m4-volt); }
.m4p-ntd-l .hh a:hover { text-decoration: underline; text-underline-offset: 3px; }
.m4p-ntd-l ol { list-style: none; margin: 0 0 16px; padding: 0; }
.m4p-ntd-l li a { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--m4-line); color: var(--m4-paper); }
.m4p-ntd-l li img { display: block; width: 104px; height: auto; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; transition: box-shadow .3s; }
.m4p-ntd-l li a:hover img { box-shadow: 0 0 0 2px var(--m4-volt); }
.m4p-ntd-l li .t { display: block; margin-top: 6px; font: 600 14.5px/1.3 var(--m4-body); transition: color .3s; }
.m4p-ntd-l li a:hover .t { color: var(--m4-volt); }
.m4p-ntd-l .m4-btn { justify-self: start; min-height: 46px; font-size: 12px; }
/* 07/11 (vídeo 0255, com o zoom de ~150% do dono = ~1700×873: "o ideal é eu entrar no site e ficar assim", a central inteira
   com a caixa da Live Coins): menos respiro em cima e na lista, para a central caber com folga na 1ª tela */
.m4p-nts { padding-top: 80px; }
.m4p-nts .m4p-ntd { margin-top: clamp(16px, 1.5vw, 24px); }
.m4p-ntd-l li a { padding: 9px 0; }
.m4p-ntd-l ol { margin-bottom: 12px; }
.m4p-ntd-lc { display: grid; align-content: start; gap: 12px; padding: 22px 24px; background: var(--m4-volt); color: var(--m4-black); box-shadow: 8px 8px 0 var(--m4-red);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1); }
.m4p-ntd-lc:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--m4-red); }
.m4p-ntd-lc .bd { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 5px 10px 5px 6px; background: var(--m4-black); color: var(--m4-volt); font-size: 10.5px; letter-spacing: .1em; }
.m4p-ntd-lc .bd img { width: 20px; height: 20px; }
.m4p-ntd-lc > b { font: 800 clamp(20px, 1.9vw, 27px)/1.05 var(--m4-display); letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
.m4p-ntd-lc .lr { color: var(--m4-black); }
/* seções */
.m4p-nt-sec { margin-top: clamp(70px, 7vw, 120px); }
.m4p-nt-sec .m4-h2 { font-size: clamp(34px, 4.6vw, 72px); }
.m4p-nt-sec .m4-h2 em { font-style: normal; color: var(--m4-volt); }
.m4p-nt-sec .m4-label + .m4-h2 { margin-top: 14px; }
.m4p-nt-sec .sub { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: rgba(242, 240, 234, .72); }
/* cartas de notícia */
.m4p-ntg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.m4p-ntg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m4p-ntc { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; border: 1px solid var(--m4-line); background: var(--m4-ink); color: var(--m4-paper);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.m4p-ntc:hover, .m4p-ntc:focus-visible { transform: translate(-4px, -6px); box-shadow: 8px 10px 0 var(--m4-volt); border-color: var(--m4-volt); }
.m4p-ntc .im { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.m4p-ntc .im img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.m4p-ntc:hover .im img { transform: scale(1.06); }
.m4p-ntc .mt, .m4p-ntc h3, .m4p-ntc p, .m4p-ntc .lr { margin-left: 18px; margin-right: 18px; }
.m4p-ntc .mt { margin-top: 8px; }
.m4p-ntc h3 { margin-top: 0; margin-bottom: 0; font: 800 17px/1.15 var(--m4-display); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.m4p-ntc p { margin-top: 0; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.5; color: rgba(242, 240, 234, .66); }
.m4p-ntc .lr { margin-top: auto; padding-top: 6px; }
/* arquivo */
.m4p-nta .ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.m4p-nta .chips, .m4p-nta .ord { display: inline-flex; border: 1px solid var(--m4-line); }
.m4p-nta .chips button, .m4p-nta .ord button { height: 42px; padding: 0 16px; appearance: none; border: 0; background: transparent; color: var(--m4-paper); cursor: pointer; font-size: 11px; letter-spacing: .08em; transition: background .25s, color .25s; }
.m4p-nta .chips button + button, .m4p-nta .ord button + button { border-left: 1px solid var(--m4-line); }
.m4p-nta .chips button.on, .m4p-nta .ord button.on { background: var(--m4-volt); color: var(--m4-black); }
.m4p-nta .chips button:not(.on):hover, .m4p-nta .ord button:not(.on):hover { color: var(--m4-volt); }
.m4p-nta .busca { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--m4-line); transition: border-color .25s; }
.m4p-nta .busca:focus-within { border-color: var(--m4-volt); }
.m4p-nta .busca svg { flex: none; width: 18px; height: 18px; color: var(--m4-gray); }
.m4p-nta .busca input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--m4-paper); font: 500 15px/1 var(--m4-body); }
.m4p-nta .busca input::placeholder { color: rgba(242, 240, 234, .38); }
.m4p-nta .cnt { margin: 22px 0 10px; font-size: 11px; color: var(--m4-gray); }
.m4p-nta .lst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--m4-line); }
.m4p-nta .lst li { border-bottom: 1px solid var(--m4-line); }
.m4p-nta .lst li[hidden] { display: none; }
.m4p-nta .lst a { position: relative; isolation: isolate; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 20px 18px; color: var(--m4-paper); transition: color .3s; }
.m4p-nta .lst a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--m4-volt); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.m4p-nta .lst a:hover::before, .m4p-nta .lst a:focus-visible::before { transform: scaleX(1); }
.m4p-nta .lst a:hover, .m4p-nta .lst a:focus-visible { color: var(--m4-black); }
.m4p-nta .lst a:hover .tg, .m4p-nta .lst a:focus-visible .tg { background: var(--m4-black); color: var(--m4-volt); }
.m4p-nta .lst a:hover .mt, .m4p-nta .lst a:focus-visible .mt { color: rgba(11, 11, 12, .7); }
.m4p-nta .dd b { display: block; font: 800 40px/1 var(--m4-display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.3px var(--m4-paper); transition: -webkit-text-stroke-color .3s; }
.m4p-nta .lst a:hover .dd b, .m4p-nta .lst a:focus-visible .dd b { -webkit-text-stroke-color: var(--m4-black); }
.m4p-nta .dd span { display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.m4p-nta .tx { display: grid; gap: 6px; min-width: 0; }
.m4p-nta .tx .t { font: 800 19px/1.15 var(--m4-display); letter-spacing: -.01em; text-transform: uppercase; }
.m4p-nta .tx .r { font-size: 14px; line-height: 1.5; opacity: .72; }
.m4p-nta .lst .ar svg { display: block; width: 22px; height: 22px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.m4p-nta .lst a:hover .ar svg { transform: translateX(5px); }
.m4p-nta .nada { margin: 20px 0 0; font-size: 12px; color: var(--m4-gray); }
.m4p-nta .nada[hidden] { display: none; }
/* conversas do Discord */
.m4p-ntv { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(26px, 4vw, 70px); align-items: start; }
.m4p-ntv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.m4p-ntv li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; padding: 20px 22px; background: var(--m4-paper); color: var(--m4-black); box-shadow: 6px 6px 0 var(--m4-volt); }
.m4p-ntv li .n { grid-row: 1 / 3; font: 800 34px/1 var(--m4-display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.3px var(--m4-black); }
.m4p-ntv li b { display: block; font: 800 17px/1.2 var(--m4-display); text-transform: uppercase; }
.m4p-ntv li p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: #3a3a40; }
.m4p-ntv li .q { display: block; margin-top: 8px; font-size: 10.5px; color: #67676d; }
.m4p-ntv li a { grid-column: 2; justify-self: start; padding-bottom: 2px; border-bottom: 2px solid var(--m4-black); color: var(--m4-black); font-size: 11px; transition: color .25s, border-color .25s; }
.m4p-ntv li a:hover { color: var(--m4-red); border-color: var(--m4-red); }
/* notícia aberta */
.m4p-nt-cab { display: grid; justify-items: start; gap: 18px; max-width: 1000px; margin-top: 28px; }
.m4p-nt-cab h1 { margin: 0; font: 800 clamp(34px, 4.8vw, 76px)/.98 var(--m4-display); letter-spacing: -.04em; text-transform: uppercase; text-wrap: balance; }
.m4p-nt-cab .lead { margin: 0; max-width: 58ch; font-size: 19px; line-height: 1.55; color: rgba(242, 240, 234, .8); }
.m4p-nt-cab .so { margin: 0; font-size: 11px; color: var(--m4-gray); }
.m4p-nt-img { position: relative; margin: 34px 0 0; overflow: hidden; border: 1px solid var(--m4-line); box-shadow: 12px 12px 0 var(--m4-volt); }
.m4p-nt-img img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; }
/* 06/11 (2º vídeo: "o cabeçalho tá muito grande, não consigo ver o banner todo; assim que eu entro já vejo o banner todo e o
   cabeçalho"): na tela larga, o título fica ao lado da arte (as duas inteiras na primeira tela) */
@media (min-width: 1100px) {
  .m4p-nt-hero { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(30px, 3.4vw, 60px); margin-top: 22px; }
  .m4p-nt-hero .m4p-nt-cab { margin-top: 0; gap: 16px; }
  .m4p-nt-hero .m4p-nt-cab h1 { font-size: clamp(32px, 3.3vw, 58px); line-height: 1; }
  .m4p-nt-hero .m4p-nt-cab .lead { font-size: 17.5px; }
  .m4p-nt-hero .m4p-nt-img { margin: 0; }
}
.m4p-nt-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: start; gap: clamp(30px, 5vw, 90px); margin-top: clamp(44px, 5vw, 80px); }
.m4p-nt-corpo { min-width: 0; max-width: 740px; }
.m4p-nt-corpo > p { margin: 0 0 22px; font-size: 18px; line-height: 1.75; color: rgba(242, 240, 234, .86); }
.m4p-nt-corpo > h2 { margin: 40px 0 18px; font: 800 26px/1.1 var(--m4-display); letter-spacing: -.02em; text-transform: uppercase; }
/* 07/11 (vídeo 0255: "isso aqui não dá pra ler direito, tem que fazer um banner mais amarelo, sem ser transparente"): o destaque
   do texto vira uma faixa amarela CHEIA com letra preta e a sombra vermelha dos botões do site */
.m4p-nt-corpo blockquote { margin: 30px 0; padding: 20px 24px; border: 0; background: var(--m4-volt); box-shadow: 6px 6px 0 var(--m4-red); font: 600 18px/1.55 var(--m4-body); color: var(--m4-black); }
.m4p-nt-corpo .li { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.m4p-nt-corpo .li li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.6; color: rgba(242, 240, 234, .86); }
.m4p-nt-corpo .li li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--m4-volt); }
.m4p-nt-corpo .ass { display: grid; gap: 6px; margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--m4-line); }
.m4p-nt-corpo .ass b { font: 800 20px/1.2 var(--m4-display); text-transform: uppercase; color: var(--m4-volt); }
.m4p-nt-corpo .ass span { font-size: 11px; color: var(--m4-gray); }
.m4p-nt-lado { position: sticky; top: 96px; display: grid; gap: 30px; min-width: 0; }
.m4p-nt-lado .cmp > span, .m4p-nt-lado .ult > span { display: block; margin-bottom: 12px; font-size: 11px; color: var(--m4-gray); }
.m4p-nt-lado .bts { display: grid; gap: 8px; }
/* 07/11 (vídeo 0255: "WhatsApp, X... pra compartilhar a notícia; isso aqui também tem que deixar diferente, senão quase não dá
   pra enxergar"): o "Compartilhar" fica claro — título branco e botões com fundo e borda visíveis; no mouse viram amarelos */
.m4p-nt-lado .cmp > span { color: var(--m4-paper); font-weight: 600; letter-spacing: .12em; }
.m4p-nt-lado .bts > * { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; appearance: none; border: 1px solid rgba(242, 240, 234, .42); background: rgba(242, 240, 234, .08); color: var(--m4-paper); cursor: pointer;
  font-size: 11.5px; letter-spacing: .08em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: border-color .25s, color .25s, background .25s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.m4p-nt-lado .bts > *:hover { border-color: var(--m4-volt); background: var(--m4-volt); color: var(--m4-black); transform: translateX(3px); }
.m4p-nt-lado .bts button.ok { border-color: var(--m4-volt); background: var(--m4-volt); color: var(--m4-black); }
.m4p-nt-lado .bts svg { flex: none; width: 16px; height: 16px; }
.m4p-nt-lado .ult ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.m4p-nt-lado .ult a { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--m4-paper); }
.m4p-nt-lado .ult img { display: block; width: 92px; height: auto; max-width: none; aspect-ratio: 16 / 9; object-fit: cover; }
.m4p-nt-lado .ult b { font: 600 13.5px/1.3 var(--m4-body); transition: color .3s; }
.m4p-nt-lado .ult a:hover b { color: var(--m4-volt); }
.m4p-nt-barra { position: fixed; z-index: 49; left: 0; right: 0; top: 66px; height: 3px; background: var(--m4-volt); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
/* especial da Live Coins */
.m4p-nt-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 40px; }
.m4p-nt-nav a { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--m4-line); color: var(--m4-paper); font-size: 11px; letter-spacing: .06em; transition: border-color .25s, background .25s, color .25s; }
.m4p-nt-nav a b { color: var(--m4-volt); transition: color .25s; }
.m4p-nt-nav a:hover { border-color: var(--m4-volt); background: var(--m4-volt); color: var(--m4-black); }
.m4p-nt-nav a:hover b { color: var(--m4-black); }
.m4p-lv { margin: 10px 0 54px; }
.m4p-lv h2 { margin: 14px 0 12px; font: 800 clamp(26px, 2.8vw, 40px)/1.02 var(--m4-display); letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; }
.m4p-lv > p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: rgba(242, 240, 234, .82); }
.m4p-lv .av { padding: 14px 16px; border: 1px dashed rgba(255, 225, 77, .5); color: var(--m4-volt); font-size: 11.5px; line-height: 1.6; letter-spacing: .03em; text-transform: none; }
.m4p-lv .ps { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.m4p-lv .ps li { padding: 20px; background: var(--m4-paper); color: var(--m4-black); box-shadow: 6px 6px 0 var(--m4-volt); }
.m4p-lv .ps .n { display: block; font: 800 30px/1 var(--m4-display); color: transparent; -webkit-text-stroke: 1.3px var(--m4-black); }
.m4p-lv .ps b { display: block; margin-top: 12px; font: 800 16px/1.2 var(--m4-display); text-transform: uppercase; }
.m4p-lv .ps p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: #3a3a40; }
/* banner da Live Store: o fundo azul virou roxo da Twitch (tools/banner_live_roxo.py) e ganhou a sombra roxa dos cartões */
.m4p-lv .ban { display: block; width: 100%; height: auto; max-width: none; margin: 6px 0 18px; filter: drop-shadow(6px 6px 0 #bf94ff) drop-shadow(0 0 22px rgba(145, 70, 255, .35)); }
.m4p-lv .its { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.m4p-lv .its img { display: block; width: 100%; height: auto; max-width: none; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.m4p-lv .its li:hover img { transform: translateY(-6px) rotate(-2deg); }
.m4p-lv .nota { margin: 14px 0 0; font-size: 11px; line-height: 1.6; color: var(--m4-gray); text-transform: none; }
.m4p-lv .mts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.m4p-lv .mts li { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--m4-line); text-align: center; transition: border-color .3s; }
.m4p-lv .mts li:hover { border-color: var(--m4-volt); }
.m4p-lv .mts .h { font: 800 22px/1 var(--m4-display); color: var(--m4-volt); }
.m4p-lv .mts img { width: 64px; height: 64px; max-width: none; }
.m4p-lv .mts span { font-size: 12.5px; line-height: 1.35; color: rgba(242, 240, 234, .82); }
/* 06/11 (vídeo de revisão: "Live Coins... ao invés de ser amarelo, faz roxo, pra vincular à Twitch; o passo a passo na cor
   roxa e não branca"): o cartão da Live Coins nas notícias e a notícia especial na cor da Twitch (#772ce8 com branco tem
   contraste de leitura; #bf94ff nos detalhes) */
.m4p-ntd-lc { background: #772ce8; color: #fff; box-shadow: 8px 8px 0 #bf94ff; }
.m4p-ntd-lc:hover { box-shadow: 11px 11px 0 #bf94ff; }
.m4p-ntd-lc .bd { background: var(--m4-black); color: #d6c2ff; }
.m4p-ntd-lc .lr { color: #fff; }
/* 07/11 (vídeo 0255: "coloca tipo um pulsando da Twitch, pro cara ver aqui, pra ele conseguir resgatar os coins"): o cartão
   da Live Coins pulsa uma onda roxa em volta e o selo ganha o pontinho vermelho de "ao vivo" piscando; no mouse a onda para */
.m4p-ntd-lc .bd::before { content: ""; flex: none; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; background: #e91916; box-shadow: 0 0 8px rgba(233, 25, 22, .8); }
.m4:not(.is-reduced) .m4p-ntd-lc { animation: lc-pulso 2.2s ease-out infinite; }
.m4:not(.is-reduced) .m4p-ntd-lc:hover { animation: none; }
.m4:not(.is-reduced) .m4p-ntd-lc .bd::before { animation: lv-pisca 1.2s ease-in-out infinite; }
@keyframes lc-pulso { 0% { box-shadow: 8px 8px 0 #bf94ff, 0 0 0 0 rgba(145, 70, 255, .6); } 70%, 100% { box-shadow: 8px 8px 0 #bf94ff, 0 0 0 20px rgba(145, 70, 255, 0); } }
/* 07/11 (vídeo 0255: "como participar / itens da loja tá apagado, não dá pra enxergar direito... coloca na mesma cor da Twitch"):
   os atalhos 01–03 da notícia já vêm roxos e legíveis, com a sombra do botão da Twitch; no mouse sobem e clareiam */
.m4p-nt-nav a { border-color: #772ce8; background: #772ce8; color: #fff; font-size: 11.5px; box-shadow: 4px 4px 0 #bf94ff; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s; }
.m4p-nt-nav a b { color: #d6c2ff; }
.m4p-nt-nav a:hover { border-color: #8f4af0; background: #8f4af0; color: #fff; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #bf94ff; }
.m4p-nt-nav a:hover b { color: #fff; }
/* o aviso "Uma live conta por vez..." mal se lia (tracejado fino): vira um cartão roxo cheio, como os passos 01/02 logo abaixo
   ("esse bannerzinho, talvez igual a esses dois") */
.m4p-lv .av { padding: 16px 18px; border: 0; background: #772ce8; color: #fff; box-shadow: 6px 6px 0 #bf94ff; font-size: 12.5px; line-height: 1.65; }
.m4p-lv .ps li { background: #772ce8; color: #fff; box-shadow: 6px 6px 0 #bf94ff; }
.m4p-lv .ps .n { -webkit-text-stroke-color: #fff; }
.m4p-lv .ps p { color: rgba(255, 255, 255, .9); }
.m4p-lv .mts .h { color: #bf94ff; }
.m4p-lv .mts li:hover { border-color: #bf94ff; }
.m4-btn--twitch { color: #fff; background: #772ce8; box-shadow: 6px 6px 0 #bf94ff; }
.m4-btn--twitch:hover { box-shadow: 9px 9px 0 #bf94ff; }
/* 06/11 (2º vídeo: "colocar algumas animações e coisinhas, pra não ficar tão estático... umas animaçãozinhas"): a notícia da
   Live Coins ganha vida — a arte respira devagar, uma luz passa por ela, o selo AO VIVO pisca, moedinhas roxas sobem; o botão
   da Twitch pulsa; os bônus boiam e os passos levantam no mouse. Tudo some no "menos movimento" do botão do site. */
.m4p-nt-hero.lv .m4p-nt-img { border-color: rgba(191, 148, 255, .55); box-shadow: 12px 12px 0 #bf94ff; }
.m4p-nt-hero.lv .m4p-nt-cab .m4-btn { margin-top: 4px; }
.lv-ao { position: absolute; z-index: 3; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 7px 9px; background: #e91916; color: #fff;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); }
.lv-ao i { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.lv-luz { position: absolute; z-index: 2; inset: 0; pointer-events: none; transform: translateX(-120%); mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .26) 47%, rgba(191, 148, 255, .24) 53%, transparent 64%); }
.m4:not(.is-reduced) .m4p-nt-hero.lv .m4p-nt-img > img { animation: lv-kb 16s ease-in-out 3s infinite alternate; }
.m4:not(.is-reduced) .lv-ao i { animation: lv-pisca 1.2s ease-in-out infinite; }
.m4:not(.is-reduced) .lv-luz { animation: lv-varre 6s cubic-bezier(.45, 0, .2, 1) 2.2s infinite; }
.m4:not(.is-reduced) .m4p-nt-hero.lv .m4-btn--twitch { animation: lv-btn 2.2s ease-out infinite; }
.m4:not(.is-reduced) .m4p-lv .mts img { animation: lv-boia 3.4s ease-in-out infinite; }
.m4:not(.is-reduced) .m4p-lv .mts li:nth-child(2n) img { animation-delay: -1.7s; }
.m4:not(.is-reduced) .m4p-lv .mts li:nth-child(3n) img { animation-delay: -.9s; }
.m4p-lv .ps li { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1); }
.m4p-lv .ps li:hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 #bf94ff; }
@keyframes lv-kb { from { scale: 1; } to { scale: 1.05; } }
@keyframes lv-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes lv-varre { 0% { transform: translateX(-120%); } 36%, 100% { transform: translateX(120%); } }
@keyframes lv-btn { 0% { box-shadow: 6px 6px 0 #bf94ff, 0 0 0 0 rgba(145, 70, 255, .55); } 70%, 100% { box-shadow: 6px 6px 0 #bf94ff, 0 0 0 16px rgba(145, 70, 255, 0); } }
@keyframes lv-boia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

@media (max-width: 1100px) {
  .m4p-ntg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .m4p-ntd { grid-template-columns: minmax(0, 1fr); }
  .m4p-ntd-h { grid-row: auto; }
  .m4p-ntv, .m4p-nt-in { grid-template-columns: minmax(0, 1fr); }
  .m4p-nt-lado { position: static; }
}
@media (max-width: 759.98px) {
  .m4p-nts, .m4p-nt { padding-top: 100px; }
  .m4p-words--nt .w > span { font-size: clamp(30px, 9.6vw, 74px); }
  .m4p-ntg, .m4p-ntg--3 { grid-template-columns: minmax(0, 1fr); }
  .m4p-ntd-h .cx { padding: 18px; }
  .m4p-nta .lst a { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; padding: 16px 10px; }
  .m4p-nta .lst .ar { display: none; }
  .m4p-nta .dd b { font-size: 28px; }
  .m4p-nta .tx .t { font-size: 16px; }
  .m4p-nt-img { box-shadow: 8px 8px 0 var(--m4-volt); }
  .m4p-nt-corpo > p { font-size: 16.5px; }
  .m4p-lv .ps { grid-template-columns: minmax(0, 1fr); }
  .m4p-lv .its, .m4p-lv .mts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m4p-nt-nav { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- O JOGO (topo com o brasão, o que é, sistemas, galeria e chamada) ---------- */
/* topo */
.m4p-jg-h { position: relative; overflow: hidden; padding: 116px 0 0;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4p-jg-hin { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.m4p-jg-h .crumb { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-jg-h .crumb a { color: var(--m4-paper); transition: color .25s; }
.m4p-jg-h .crumb a:hover { color: var(--m4-volt); }
.m4p-jg-h .crumb i { font-style: normal; }
.m4p-jg-h .crumb span { color: var(--m4-volt); }
.m4p-words--jg { margin-top: 22px; }
.m4p-words--jg .w > span { font-size: clamp(42px, 6.2vw, 112px); }
.m4p-jg-h .bt, .m4p-jg-c .bt { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 34px; }
.m4p-jg-h .bt .ar { width: 18px; height: 18px; }
/* brasão: anéis, luz, sombra no chão e selos */
.m4p-jg-h .crest { position: relative; width: min(100%, 600px); aspect-ratio: 1; justify-self: center; }
.m4p-jg-h .aro { position: absolute; inset: 3%; border: 1px solid rgba(242, 240, 234, .16); border-radius: 50%; }
.m4p-jg-h .aro.a2 { inset: 14%; border: 1px dashed rgba(255, 225, 77, .34); }
/* 3 planetas no lugar da bolinha única (07/11, o dono: "uns três, como se fosse um planeta, uma órbita girando em volta"):
   o amarelo no anel de fora, o branco numa órbita maior (fio bem fraco) e o vermelho numa órbita por dentro, ao contrário,
   passando por trás do brasão. Cada .orbita é um círculo que gira; o planeta fica no topo dele. */
.m4p-jg-h .orbita { position: absolute; border-radius: 50%; pointer-events: none; }
.m4p-jg-h .orbita.o1 { inset: 3%; }
.m4p-jg-h .orbita.o2 { inset: -4%; border: 1px solid rgba(242, 240, 234, .07); }
.m4p-jg-h .orbita.o3 { inset: 9%; }
.m4p-jg-h .orbita i { position: absolute; left: 50%; top: 0; border-radius: 50%; translate: -50% -50%; }
.m4p-jg-h .orbita.o1 i { width: 13px; height: 13px; background: radial-gradient(circle at 34% 30%, #fffbe0, var(--m4-volt) 42%, #b8930f); box-shadow: 0 0 18px 2px rgba(255, 225, 77, .7); }
.m4p-jg-h .orbita.o2 i { width: 8px; height: 8px; background: radial-gradient(circle at 34% 30%, #fff, var(--m4-paper) 50%, #8f8d86); box-shadow: 0 0 12px rgba(242, 240, 234, .55); }
.m4p-jg-h .orbita.o3 i { width: 10px; height: 10px; background: radial-gradient(circle at 34% 30%, #d9ecff, #4888f8 48%, #0a2fc4); box-shadow: 0 0 14px rgba(72, 136, 248, .75); }   /* 07/11: azul do PWU (dono) */
.m4.is-reduced .m4p-jg-h .orbita.o2 { rotate: 130deg; }
.m4.is-reduced .m4p-jg-h .orbita.o3 { rotate: -140deg; }
.m4p-jg-h .glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 225, 77, .24), rgba(255, 225, 77, .07) 56%, transparent); }
.m4p-jg-h .sombra { position: absolute; left: 25%; right: 25%; bottom: 8%; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .8), transparent); }
.m4p-jg-h .fl { position: absolute; inset: 12% 8% 16%; }
.m4p-jg-h .tl { position: relative; width: 100%; height: 100%; }
.m4p-jg-h .tl img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .6)); }
.m4p-jg-h .bri { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%) no-repeat 160% 0 / 260% 100%; }
/* selos: o .sat (ponto de 0×0 no centro do brasão) anda no anel pelo m4p.js; o selo fica centrado nele e sempre em pé */
.m4p-jg-h .sat { position: absolute; left: 50%; top: 50%; z-index: 2; width: 0; height: 0; will-change: transform; }
.m4p-jg-h .chip { position: absolute; left: 0; top: 0; translate: -50% -50%; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--m4-volt); background: var(--m4-black); color: var(--m4-paper); box-shadow: 4px 4px 0 var(--m4-volt);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.m4p-jg-h .chip::before { content: ""; width: 7px; height: 7px; background: var(--m4-volt); }
/* faixas cruzadas (as do topo do início), com o que o jogo tem */
.m4p-jg-h .fx { position: relative; height: 150px; margin-top: clamp(16px, 2.6vw, 40px); pointer-events: none; }
.m4p-jg-h .f { position: absolute; left: -5%; width: 110%; overflow: hidden; padding: 15px 0; }
.m4p-jg-h .f.a { top: 30px; z-index: 2; background: var(--m4-volt); color: var(--m4-black); transform: rotate(-2.6deg); }
.m4p-jg-h .f.b { top: 46px; background: var(--m4-red); color: var(--m4-paper); transform: rotate(2deg); }
.m4p-jg-h .row { display: flex; width: max-content; }
.m4p-jg-h .f span { padding: 0 24px; font: 800 24px/1 var(--m4-display); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.m4p-jg-h .f span::after { content: "✦"; margin-left: 48px; }
@keyframes m4p-jg-gira { to { rotate: 360deg; } }
@keyframes m4p-jg-boia { 0%, 100% { translate: 0 -1.8%; } 50% { translate: 0 1.8%; } }
@keyframes m4p-jg-sombra { 0%, 100% { scale: .84; opacity: .65; } 50% { scale: 1; opacity: 1; } }
@keyframes m4p-jg-bri { 0% { background-position: 160% 0; } 34%, 100% { background-position: -60% 0; } }
@keyframes m4p-jg-pulsa { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes m4p-jg-corre { to { translate: -50% 0; } }
.m4:not(.is-reduced) .m4p-jg-h .aro { animation: m4p-jg-gira 34s linear infinite; }
.m4:not(.is-reduced) .m4p-jg-h .aro.a2 { animation-duration: 70s; animation-direction: reverse; }
.m4:not(.is-reduced) .m4p-jg-h .orbita.o1 { animation: m4p-jg-gira 34s linear infinite; }
.m4:not(.is-reduced) .m4p-jg-h .orbita.o2 { animation: m4p-jg-gira 58s linear -21s infinite; }
.m4:not(.is-reduced) .m4p-jg-h .orbita.o3 { animation: m4p-jg-gira 23s linear -9s infinite reverse; }
.m4:not(.is-reduced) .m4p-jg-h .glow { animation: m4p-jg-pulsa 6s ease-in-out infinite; }
.m4:not(.is-reduced) .m4p-jg-h .fl { animation: m4p-jg-boia 6s ease-in-out infinite; }
.m4:not(.is-reduced) .m4p-jg-h .sombra { animation: m4p-jg-sombra 6s ease-in-out infinite; }
.m4:not(.is-reduced) .m4p-jg-h .bri { animation: m4p-jg-bri 6.5s cubic-bezier(.6, 0, .25, 1) 2.2s infinite; }
.m4:not(.is-reduced) .m4p-jg-h .f.a .row { animation: m4p-jg-corre 70s linear infinite; }
.m4:not(.is-reduced) .m4p-jg-h .f.b .row { animation: m4p-jg-corre 80s linear infinite reverse; }
/* títulos das seções */
.m4p-jg-o .m4-h2, .m4p-jg-s .m4-h2, .m4p-jg-g .m4-h2 { margin-top: 16px; font-size: clamp(36px, 5vw, 80px); }
.m4p-jg-s .m4-h2 em, .m4p-jg-g .m4-h2 em { font-style: normal; color: var(--m4-volt); }
.m4p-jg-s .sub, .m4p-jg-g .sub { max-width: 620px; margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: rgba(242, 240, 234, .72); }
/* 01 · o que é (papel) */
.m4p-jg-o { position: relative; padding: clamp(80px, 8vw, 130px) 0 clamp(80px, 7.4vw, 120px); background: var(--m4-paper); color: var(--m4-black); }
.m4p-jg-o .m4-label { color: #6d6a62; }
.m4p-jg-o .m4-h2 em { font-style: normal; background: linear-gradient(transparent 60%, var(--m4-volt) 60%, var(--m4-volt) 90%, transparent 90%); }
.m4p-jg-o .cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 5vw, 90px); align-items: start; margin-top: clamp(30px, 3.6vw, 56px); }
/* 06/11 (vídeo de revisão: "separar melhor, pra não parecer uma linha só"): mesmo tamanho, peso 600, entrelinha e
   espaços maiores; destaques amarelos também em "pokémon únicos" e "PWU City" (about.p2d) */
.m4p-jg-o .p1 { margin: 0; font: 600 clamp(20px, 1.85vw, 28px)/1.42 var(--m4-display); letter-spacing: -.01em; word-spacing: .07em; text-wrap: pretty; }
.m4p-jg-o .p1 .free { padding: 0 .16em; background: var(--m4-volt); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.m4p-jg-o .p2 { max-width: 640px; margin: 26px 0 0; font-size: 17px; line-height: 1.65; color: #3a3a40; }
.m4p-jg-o .nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--m4-black); border-left: 2px solid var(--m4-black); }
.m4p-jg-o .nums li { container-type: inline-size; display: grid; align-content: space-between; gap: 18px; min-height: 172px; padding: 18px 18px 16px; border-right: 2px solid var(--m4-black); border-bottom: 2px solid var(--m4-black); transition: background .35s; }
.m4p-jg-o .nums li:hover, .m4p-jg-o .nums li.vez { background: var(--m4-volt); }
/* fio que corre embaixo do número aceso sozinho (o m4p.js troca a cada 2,6 s) */
.m4p-jg-o .nums li { position: relative; }
.m4p-jg-o .nums li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--m4-black); transform: scaleX(0); transform-origin: left; }
.m4p-jg-o .nums li.vez::after { animation: m4p-jg-fio 2.6s linear forwards; }
@keyframes m4p-jg-fio { to { transform: scaleX(1); } }
.m4p-jg-o .nums li.vez .v { color: var(--m4-black); }
/* "Criar personagem" (chamada final): mesmo pulso de luz do "Baixar o launcher", mantendo a sombra vermelha do botão */
@keyframes m4p-chama { 0% { box-shadow: 6px 6px 0 var(--m4-red), 0 0 0 0 rgba(255, 225, 77, .6); } 70%, 100% { box-shadow: 6px 6px 0 var(--m4-red), 0 0 0 16px rgba(255, 225, 77, 0); } }
.m4:not(.is-reduced) .m4-btn.m4-chama { animation: m4p-chama 1.9s ease-out infinite; }
.m4:not(.is-reduced) .m4-btn.m4-chama:hover { animation: none; }
/* o tamanho do número segue a largura da caixa (cqw): "100%" nunca encosta na borda */
.m4p-jg-o .nums .v { display: flex; align-items: flex-start; font: 800 min(78px, 30cqw)/.86 var(--m4-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--m4-black); font-variant-numeric: tabular-nums; transition: color .35s; }
.m4p-jg-o .nums .v i { font-style: normal; font-size: .46em; margin-left: .06em; }
.m4p-jg-o .nums li:hover .v { color: var(--m4-black); }
.m4p-jg-o .nums .l { font: 500 12px/1.35 var(--m4-mono); letter-spacing: .08em; text-transform: uppercase; }
/* as duas artes largas do site (5 gerações e "venha explorar"): sombra dura que sai de trás */
.m4p-jg-o .ger, .m4p-jg-c .poster { position: relative; display: block; margin: clamp(56px, 6vw, 96px) 0 0; }
.m4p-jg-o .ger .sb, .m4p-jg-c .poster .sb { position: absolute; inset: 0; background: var(--m4-black); transform: translate(14px, 14px); }
.m4p-jg-c .poster .sb { background: var(--m4-volt); }
.m4p-jg-o .ger .cl, .m4p-jg-c .poster .cl { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 5; background: var(--m4-ink); }
.m4p-jg-o .ger img, .m4p-jg-c .poster img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.m4p-jg-c .poster .cl { transition: translate .45s cubic-bezier(.2, .8, .2, 1); }
.m4p-jg-c .poster:hover .cl, .m4p-jg-c .poster:focus-visible .cl { translate: -5px -5px; }
/* 02 · sistemas: palco parado + lista */
.m4p-jg-s { position: relative; padding: clamp(90px, 9vw, 150px) 0 clamp(70px, 7vw, 120px); background: var(--m4-black); }
.m4p-jg-s .sp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); margin-top: clamp(40px, 4vw, 64px); }
.m4p-jg-s .pin { position: sticky; top: calc(50vh - min(36vh, 300px)); height: min(72vh, 600px); overflow: hidden; border: 1px solid var(--m4-line);
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 64px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 64px 100%, var(--m4-ink); }
.m4p-jg-s .pin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 30%; background: linear-gradient(transparent, rgba(11, 11, 12, .88)); pointer-events: none; }
.m4p-jg-s .pin .aro { position: absolute; left: 50%; top: 56%; width: 76%; aspect-ratio: 1; translate: -50% -50%; border: 1px solid rgba(242, 240, 234, .14); border-radius: 50%; }
.m4p-jg-s .pin .glow { position: absolute; left: 50%; top: 58%; width: 66%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 225, 77, .2), transparent); }
.m4p-jg-s .art { position: absolute; left: 50%; bottom: 0; width: auto; height: 84%; max-width: 92%; object-fit: contain; object-position: 50% 100%; translate: -50% 0; opacity: 0; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5)); }
.m4p-jg-s .art.on { opacity: 1; }
.m4p-jg-s .ct { position: absolute; left: 24px; top: 18px; z-index: 2; display: flex; align-items: flex-end; gap: 10px; overflow: hidden; }
.m4p-jg-s .ct b { display: block; font: 800 clamp(70px, 7vw, 118px)/.92 var(--m4-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--m4-paper); font-variant-numeric: tabular-nums; }
.m4p-jg-s .ct span { padding-bottom: 12px; font-size: 12px; letter-spacing: .1em; color: var(--m4-gray); }
.m4p-jg-s .nm { position: absolute; left: 24px; bottom: 50px; z-index: 2; max-width: calc(100% - 48px); padding: 7px 10px; background: var(--m4-volt); color: var(--m4-black); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.m4p-jg-s .br { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.m4p-jg-s .br i { height: 4px; background: rgba(242, 240, 234, .2); transition: background .4s; }
.m4p-jg-s .br i.on { background: var(--m4-volt); }
.m4p-jg-s .its { list-style: none; margin: 0; padding: 0; }
.m4p-jg-s .it { display: grid; align-content: center; gap: 14px; min-height: min(64vh, 560px); padding: 30px 0; border-top: 1px solid var(--m4-line); opacity: .26; transition: opacity .5s; }
.m4p-jg-s .it:last-child { border-bottom: 1px solid var(--m4-line); }
.m4p-jg-s .it.on { opacity: 1; }
.m4p-jg-s .it .k { font-size: 12px; letter-spacing: .12em; color: var(--m4-volt); }
.m4p-jg-s .it .mi { display: none; }
.m4p-jg-s .it h3 { margin: 0; font: 800 clamp(28px, 3vw, 46px)/1 var(--m4-display); letter-spacing: -.03em; text-transform: uppercase; text-wrap: balance; }
.m4p-jg-s .it p { max-width: 520px; margin: 0; font-size: 17px; line-height: 1.6; color: rgba(242, 240, 234, .76); }
/* 03 · galeria */
.m4p-jg-g { position: relative; padding: clamp(90px, 9vw, 150px) 0 clamp(80px, 7.4vw, 120px); background: var(--m4-ink); border-top: 1px solid var(--m4-line); }
.m4p-jg-g .gr { list-style: none; margin: clamp(36px, 4vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.m4p-jg-g .gr li:first-child { grid-column: span 2; grid-row: span 2; }
.m4p-jg-g .ce { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--m4-line); background: var(--m4-black); color: var(--m4-paper); cursor: zoom-in; overflow: hidden; text-align: left;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.m4p-jg-g .ce:hover, .m4p-jg-g .ce:focus-visible { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--m4-volt); border-color: var(--m4-volt); }
.m4p-jg-g .ce .im { position: absolute; inset: 0; }
.m4p-jg-g .ce img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.m4p-jg-g .ce:hover img, .m4p-jg-g .ce:focus-visible img { transform: scale(1.07); }
.m4p-jg-g .cp { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 10px; padding: 44px 14px 12px; background: linear-gradient(transparent, rgba(11, 11, 12, .92)); font: 600 13px/1.3 var(--m4-body);
  transform: translateY(101%); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.m4p-jg-g .cp b { flex: none; padding: 3px 6px; background: var(--m4-volt); color: var(--m4-black); font-size: 10px; letter-spacing: .08em; }
.m4p-jg-g .ce:hover .cp, .m4p-jg-g .ce:focus-visible .cp, .m4p-jg-g li:first-child .cp { transform: none; }
.m4p-jg-g li:first-child .cp { padding: 70px 22px 20px; font-size: 17px; }
.m4p-jg-g .pl { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; background: var(--m4-volt); color: var(--m4-black); transform: scale(0); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.m4p-jg-g .pl svg { width: 18px; height: 18px; }
.m4p-jg-g .ce:hover .pl, .m4p-jg-g .ce:focus-visible .pl { transform: scale(1); }
/* janela da cena grande */
.m4p-jg-g .lb { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 70px clamp(80px, 8vw, 140px) 50px; }
.m4p-jg-g .lb[hidden] { display: none; }
.m4p-jg-g .lb-fd { position: absolute; inset: 0; background: rgba(11, 11, 12, .94); }
.m4p-jg-g .lb figure { position: relative; display: grid; gap: 14px; width: min(100%, calc(100vh - 170px)); margin: 0; }
.m4p-jg-g .lb-im { aspect-ratio: 1; overflow: hidden; background: var(--m4-ink); box-shadow: 12px 12px 0 var(--m4-volt); }
.m4p-jg-g .lb-im img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m4p-jg-g .lb figcaption { display: flex; align-items: baseline; gap: 12px; color: var(--m4-paper); font-size: 15px; line-height: 1.4; }
.m4p-jg-g .lb figcaption b { flex: none; font-size: 11px; letter-spacing: .1em; color: var(--m4-volt); }
.m4p-jg-g .lb-x, .m4p-jg-g .lb-n { position: absolute; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 2px solid var(--m4-paper); background: transparent; color: var(--m4-paper); cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s; }
.m4p-jg-g .lb-x:hover, .m4p-jg-g .lb-n:hover { background: var(--m4-volt); border-color: var(--m4-volt); color: var(--m4-black); }
.m4p-jg-g .lb-x svg, .m4p-jg-g .lb-n svg { width: 22px; height: 22px; }
.m4p-jg-g .lb-x { top: 18px; right: 18px; }
.m4p-jg-g .lb-n { top: 50%; margin-top: -26px; }
.m4p-jg-g .lb-n.ant { left: clamp(14px, 3vw, 44px); }
.m4p-jg-g .lb-n.prox { right: clamp(14px, 3vw, 44px); }
html.m4p-lb-on #pwu-bar { visibility: hidden; }
/* chamada final */
.m4p-jg-c { position: relative; overflow: hidden; padding: clamp(100px, 10vw, 170px) 0 clamp(90px, 9vw, 140px); text-align: center;
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4p-words--jgc { justify-items: center; margin-top: 20px; }
.m4p-words--jgc .w > span { font-size: clamp(38px, 7vw, 124px); }
.m4p-jg-c .m4p-lead { max-width: 620px; margin: 26px auto 0; }
.m4p-jg-c .bt { justify-content: center; }
.m4p-jg-c .poster { margin-top: clamp(56px, 6vw, 90px); text-align: left; }
@media (hover: none) {
  .m4p-jg-g .pl { transform: scale(1); }
}
@media (max-width: 900px) {
  .m4p-jg-h { padding-top: 100px; }
  .m4p-jg-hin { grid-template-columns: minmax(0, 1fr); }
  .m4p-jg-h .crest { width: min(88%, 430px); margin-top: 10px; }
  .m4p-jg-h .chip { padding: 8px 10px; font-size: 10px; }
  .m4p-jg-h .fx { height: 118px; }
  .m4p-jg-h .f span { padding: 0 16px; font-size: 18px; }
  .m4p-jg-h .f span::after { margin-left: 32px; }
  .m4p-jg-o .cols { grid-template-columns: minmax(0, 1fr); }
  .m4p-jg-o .nums li { min-height: 132px; }
  .m4p-jg-s .sp { grid-template-columns: minmax(0, 1fr); }
  .m4p-jg-s .palco { display: none; }
  .m4p-jg-s .it { min-height: 0; padding: 28px 0 32px; opacity: 1; }
  .m4p-jg-s .it .mi { display: block; width: 100%; height: 250px; padding-top: 16px; object-fit: contain; object-position: 50% 100%; border: 1px solid var(--m4-line);
    background: radial-gradient(closest-side at 50% 72%, rgba(255, 225, 77, .2), transparent), var(--m4-ink); }
  .m4p-jg-g .gr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .m4p-jg-g .gr li:first-child { grid-row: auto; }
  .m4p-jg-g .cp { display: none; }
  .m4p-jg-g li:first-child .cp { display: flex; padding: 50px 14px 14px; font-size: 14px; }
  .m4p-jg-g .lb { padding: 64px 16px 96px; }
  .m4p-jg-g .lb-n { top: auto; bottom: 22px; margin-top: 0; }
  .m4p-jg-g .lb-n.ant { left: calc(50% - 62px); }
  .m4p-jg-g .lb-n.prox { right: calc(50% - 62px); }
}

/* ---------- FOTO DE PERFIL (personagem + card de fundo, prévia, restaurar e salvar) ---------- */
/* overflow-x: clip (e não hidden): hidden vira área de rolagem e desliga o "fixo ao rolar" da prévia e da mini prévia */
.m4p-idt { position: relative; overflow-x: clip; padding: 116px 0 clamp(80px, 8vw, 130px);
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
/* página de ferramenta: título menor e o texto ao lado, para o editor aparecer logo */
.m4p-idt-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: end; gap: 20px 56px; margin-top: 26px; }
.m4p-idt-top .tt { display: grid; justify-items: start; min-width: 0; }
.m4p-words--idt { margin-top: 14px; }
.m4p-words--idt .w > span { font-size: clamp(36px, 4.6vw, 84px); }
.m4p-idt-top .ld { display: grid; justify-items: start; gap: 16px; padding-bottom: 8px; }
.m4p-idt-top .m4p-lead { margin: 0; font-size: 17px; }
.m4p-idt-top .col { padding: 7px 11px; border: 1px solid var(--m4-volt); color: var(--m4-volt); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.m4p-idt-in { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 5vw, 90px); align-items: start; margin-top: clamp(40px, 4.6vw, 70px); }
/* prévia */
.m4p-idt .prev { position: sticky; top: 96px; display: grid; gap: 24px; justify-items: center; }
.m4p-idt .carta { position: relative; width: 100%; max-width: 420px; padding: 14px 14px 18px; background: var(--m4-paper); box-shadow: 14px 14px 0 var(--m4-volt); will-change: transform; }
.m4p-idt .cv { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #13254d; }
#app .m4p-idt .cv img, .m4p-idt .cv i.cd { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.m4p-idt .cv i.cd { display: block; background: #13254d; }
.m4p-idt .cv .ch { z-index: 2; }
.m4p-idt .cv .luz { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .9), rgba(255, 225, 77, .45) 46%, transparent 72%);
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .9), color-mix(in srgb, var(--cor) 60%, transparent) 46%, transparent 72%); }
.m4p-idt .rod { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px 0; color: var(--m4-black); }
.m4p-idt .rod .nm { display: block; min-width: 0; overflow: hidden; font: 800 24px/1.05 var(--m4-display); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.m4p-idt .rod .tp { display: inline-flex; flex: none; align-items: center; gap: 8px; padding: 6px 9px; background: var(--m4-black); color: var(--m4-paper); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.m4p-idt .rod .tp i { width: 9px; height: 9px; transition: background-color .4s; }
.m4p-idt .topo { display: grid; justify-items: center; gap: 10px; }
.m4p-idt .topo .lb { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-idt .topo .eu { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px 0 4px; background: var(--m4-paper); color: var(--m4-black); box-shadow: 4px 4px 0 var(--m4-volt);
  font: 700 12px/1 var(--m4-display); letter-spacing: .02em; text-transform: uppercase; }
/* escolha */
.m4p-idt .esc { display: grid; gap: 24px; min-width: 0; }
.m4p-idt .mini { display: none; }
.m4p-idt .tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--m4-paper); }
.m4p-idt .tabs .ind { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: var(--m4-volt); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.m4p-idt .tabs[data-g="c"] .ind { transform: translateX(100%); }
.m4p-idt .tabs button { position: relative; z-index: 1; appearance: none; height: 54px; padding: 0 12px; border: 0; background: transparent; color: var(--m4-paper); cursor: pointer;
  font: 700 13px/1 var(--m4-display); letter-spacing: .03em; text-transform: uppercase; transition: color .35s; }
.m4p-idt .tabs button span { margin-left: 6px; font-size: 11px; opacity: .7; }
.m4p-idt .tabs button[aria-selected="true"] { color: var(--m4-black); }
.m4p-idt .painel[hidden] { display: none; }
.m4p-idt .painel h2 { margin: 0; font: 800 clamp(22px, 2.2vw, 32px)/1.05 var(--m4-display); letter-spacing: -.02em; text-transform: uppercase; }
.m4p-idt .painel > p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: rgba(242, 240, 234, .72); }
.m4p-idt .gr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.m4p-idt .gr .it { position: relative; appearance: none; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; border: 2px solid var(--m4-line); background: var(--m4-ink); cursor: pointer;
  transition: border-color .25s, transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1); }
#app .m4p-idt .gr .it img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 10%; }
.m4p-idt .gr .it span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 4px 5px; overflow: hidden; background: linear-gradient(transparent, rgba(11, 11, 12, .92)); color: var(--m4-paper);
  font-size: 9.5px; letter-spacing: .06em; text-align: center; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; transition: background .25s, color .25s; }
.m4p-idt .gr .it:hover { transform: translateY(-4px); border-color: rgba(242, 240, 234, .5); }
.m4p-idt .gr .it.on { border-color: var(--m4-volt); box-shadow: 5px 5px 0 var(--m4-volt); }
.m4p-idt .gr .it.on span { background: var(--m4-volt); color: var(--m4-black); }
.m4p-idt .gr--c .it .sem { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #13254d 0 10px, #182d5c 10px 20px); }
.m4p-idt .fim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding-top: 22px; border-top: 1px solid var(--m4-line); }
.m4p-idt .msg { flex: 1 1 220px; min-height: 1.4em; margin: 0; font-size: 11.5px; letter-spacing: .06em; color: var(--m4-volt); }
.m4p-idt .bts { display: flex; flex-wrap: wrap; gap: 14px; }
.m4p-idt .bts .m4-btn[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }
@media (max-width: 900px) {
  .m4p-idt { padding-top: 100px; }
  .m4p-idt-top { grid-template-columns: minmax(0, 1fr); }
  .m4p-words--idt .w > span { font-size: clamp(34px, 11vw, 80px); }
  .m4p-idt-in { grid-template-columns: minmax(0, 1fr); }
  .m4p-idt .prev { position: relative; top: 0; }
  .m4p-idt .carta { max-width: 300px; }
  .m4p-idt .esc { gap: 18px; }
  .m4p-idt .mini { position: sticky; top: 66px; z-index: 5; display: flex; align-items: center; gap: 12px; margin: 0 -16px; padding: 10px 16px; border-bottom: 1px solid var(--m4-line); background: rgba(11, 11, 12, .94); }
  .m4p-idt .mini .tx { display: grid; gap: 4px; min-width: 0; }
  .m4p-idt .mini b { overflow: hidden; font: 800 16px/1 var(--m4-display); text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
  .m4p-idt .mini .tx span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--m4-volt); }
  .m4p-idt .tabs button { padding: 0 8px; font-size: 11.5px; }
  .m4p-idt .gr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .m4p-idt .bts { width: 100%; }
  .m4p-idt .bts .m4-btn { flex: 1 1 0; justify-content: center; padding: 0 12px; }
}

/* ---------- TICKETS (abrir chamado, meus chamados e atalhos) ---------- */
.m4p-tk { position: relative; overflow-x: clip; padding: 116px 0 clamp(80px, 8vw, 130px);
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4p-tk-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: end; gap: 20px 56px; margin-top: 26px; }
.m4p-tk-top .tt { display: grid; justify-items: start; min-width: 0; }
.m4p-words--tk { margin-top: 14px; }
.m4p-words--tk .w > span { font-size: clamp(40px, 6vw, 108px); }
.m4p-tk-top .ld { display: grid; justify-items: start; gap: 14px; padding-bottom: 10px; }
.m4p-tk-top .m4p-lead { margin: 0; font-size: 17px; }
.m4p-tk-top .mail { padding: 7px 11px; border: 1px solid var(--m4-line); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-tk-top .mail b { color: var(--m4-paper); font-weight: 600; letter-spacing: .02em; text-transform: none; }
.m4p-tk-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 4.6vw, 80px); align-items: start; margin-top: clamp(40px, 4.6vw, 70px); }
/* 07/11 (vídeo 0336: "os tickets... de novo, ele não consegue ver tudo assim que entra; se dá uma diminuída, ele já vê tudo de
   primeira"): título numa linha só e menor, menos respiro — o formulário e "Meus chamados" aparecem inteiros na 1ª tela */
.m4p-tk { padding-top: 92px; }
.m4p-tk-top { margin-top: 12px; align-items: center; }
.m4p-words--tk { display: flex; flex-wrap: wrap; column-gap: .26em; margin-top: 10px; }
.m4p-words--tk .w > span { font-size: clamp(30px, 3.3vw, 58px); }
.m4p-tk-in { margin-top: clamp(24px, 2.4vw, 36px); }
.m4p-tk .hh { margin: 0; font: 800 clamp(26px, 2.6vw, 38px)/1 var(--m4-display); letter-spacing: -.03em; text-transform: uppercase; }
/* formulário (papel) */
.m4p-tk-f { display: grid; gap: 24px; padding: clamp(24px, 2.6vw, 36px); background: var(--m4-paper); color: var(--m4-black); box-shadow: 14px 14px 0 var(--m4-volt); }
.m4p-tk-f .hh em { font-style: normal; background: linear-gradient(transparent 58%, var(--m4-volt) 58%, var(--m4-volt) 92%, transparent 92%); }
.m4p-tk-f .ass { min-width: 0; margin: 0; padding: 0; border: 0; }
.m4p-tk-f legend, .m4p-tk-f .lb { display: block; margin-bottom: 10px; padding: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5b5b62; }
.m4p-tk-f .op { display: flex; flex-wrap: wrap; gap: 10px; }
.m4p-tk-f .op label { position: relative; cursor: pointer; }
.m4p-tk-f .op input { position: absolute; opacity: 0; pointer-events: none; }
.m4p-tk-f .op span { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 2px solid var(--m4-black); font: 700 12px/1 var(--m4-display); letter-spacing: .02em; text-transform: uppercase;
  transition: background-color .25s, color .25s, box-shadow .3s cubic-bezier(.2, .8, .2, 1), transform .3s cubic-bezier(.2, .8, .2, 1); }
.m4p-tk-f .op span svg { flex: none; width: 16px; height: 16px; }
.m4p-tk-f .op label:hover span { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--m4-black); }
.m4p-tk-f .op input:checked + span { background: var(--m4-black); color: var(--m4-volt); box-shadow: 4px 4px 0 var(--m4-volt); transform: translate(-2px, -2px); }
.m4p-tk-f .op input:focus-visible + span { outline: 2px solid var(--m4-red); outline-offset: 3px; }
.m4p-tk-f .msgc { display: grid; }
.m4p-tk-f textarea { display: block; width: 100%; min-height: 150px; box-sizing: border-box; resize: vertical; padding: 14px 16px; border: 2px solid var(--m4-black); border-radius: 0; background: #fff; color: var(--m4-black);
  font: 500 16px/1.55 var(--m4-body); outline: none; transition: box-shadow .3s cubic-bezier(.2, .8, .2, 1), border-color .25s; }
.m4p-tk-f textarea::placeholder { color: #8c8c92; }
.m4p-tk-f textarea:focus { box-shadow: 6px 6px 0 var(--m4-volt); }
.m4p-tk-f .msgc.bad textarea { border-color: var(--m4-red); box-shadow: 6px 6px 0 var(--m4-red); }
.m4p-tk-f .pe { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 11px; letter-spacing: .08em; color: #5b5b62; }
.m4p-tk-f .msgc.ok .dica { color: var(--m4-black); font-weight: 700; }
.m4p-tk-f .ct b { color: var(--m4-black); }
.m4p-tk-f .er { margin-top: 6px; font-size: 13px; color: var(--m4-red); }
.m4p-tk-f .er:empty { display: none; }
.m4p-tk-f .m4p-go { justify-self: start; }
.m4p-tk-f .ok { justify-self: start; margin: 0; padding: 8px 10px; background: var(--m4-volt); color: var(--m4-black); font-size: 12px; letter-spacing: .04em; }
.m4p-tk-f .ok:empty { display: none; }
/* meus chamados */
.m4p-tk-l { display: grid; gap: 18px; min-width: 0; }
.m4p-tk-l .hh em { font-style: normal; color: var(--m4-volt); }
.m4p-tk-l .hh .qt { font-size: 14px; letter-spacing: .04em; color: var(--m4-gray); }
.m4p-tk-l .lst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--m4-line); }
.m4p-tk-l .lst:empty { display: none; }
.m4p-tk-l .lst li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 18px 6px; border-bottom: 1px solid var(--m4-line); }
.m4p-tk-l .lst .ic { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--m4-line); color: var(--m4-volt); }
.m4p-tk-l .lst .ic svg { width: 20px; height: 20px; }
.m4p-tk-l .lst b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 700 15px/1.25 var(--m4-display); letter-spacing: .01em; text-transform: uppercase; }
.m4p-tk-l .lst .n { font-size: 12px; letter-spacing: .06em; color: var(--m4-volt); }
.m4p-tk-l .lst p { margin: 6px 0 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; color: rgba(242, 240, 234, .72); }
.m4p-tk-l .lst .qd { display: block; margin-top: 8px; font-size: 10.5px; letter-spacing: .08em; color: var(--m4-gray); }
.m4p-tk-l .lst .st { padding: 5px 8px; background: var(--m4-volt); color: var(--m4-black); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.m4p-tk-l .vazio { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 16px; padding: 22px; border: 1px dashed rgba(242, 240, 234, .26); }
.m4p-tk-l .vazio[hidden] { display: none; }
.m4p-tk-l .vazio .ic { display: grid; place-items: center; width: 56px; height: 56px; background: var(--m4-volt); color: var(--m4-black); }
.m4p-tk-l .vazio .ic svg { width: 26px; height: 26px; }
.m4p-tk-l .vazio p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(242, 240, 234, .72); }
.m4p-tk-l .vazio strong { display: block; margin-bottom: 4px; color: var(--m4-paper); font: 700 15px/1.3 var(--m4-body); }
/* antes de abrir */
.m4p-tk-at { margin-top: clamp(60px, 6vw, 96px); }
.m4p-tk-at h2 { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-tk-at .gr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.m4p-tk-at a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--m4-line); color: var(--m4-paper);
  transition: border-color .3s, transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s cubic-bezier(.2, .8, .2, 1); }
.m4p-tk-at a:hover, .m4p-tk-at a:focus-visible { border-color: var(--m4-volt); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--m4-volt); }
.m4p-tk-at .ic { display: grid; place-items: center; width: 44px; height: 44px; background: var(--m4-ink); color: var(--m4-volt); }
.m4p-tk-at .ic svg { width: 20px; height: 20px; }
.m4p-tk-at .tx { display: grid; gap: 4px; min-width: 0; }
.m4p-tk-at b { font: 700 14px/1.2 var(--m4-display); text-transform: uppercase; }
.m4p-tk-at .tx span { font-size: 13.5px; line-height: 1.45; color: rgba(242, 240, 234, .66); }
.m4p-tk-at .ar { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.m4p-tk-at a:hover .ar { transform: translateX(4px); }
@media (max-width: 900px) {
  .m4p-tk { padding-top: 100px; }
  .m4p-tk-top, .m4p-tk-in { grid-template-columns: minmax(0, 1fr); }
  .m4p-words--tk .w > span { font-size: clamp(36px, 11.5vw, 84px); }
  .m4p-tk-f { box-shadow: 8px 8px 0 var(--m4-volt); }
  .m4p-tk-f .op span { height: 40px; padding: 0 12px; font-size: 11px; }
  .m4p-tk-at .gr { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- TERMOS E REGRAS (partes, índice que acende e o documento) ---------- */
.m4p-rg { position: relative; background: var(--m4-black); }
.m4p-rg-cima { position: relative; padding: 116px 0 clamp(50px, 5vw, 80px); border-bottom: 1px solid var(--m4-line);
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 88px, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 88px 100%, var(--m4-black); }
.m4p-rg-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: end; gap: 20px 56px; }
.m4p-rg-top .tt { display: grid; justify-items: start; min-width: 0; }
.m4p-words--rg { margin-top: 14px; }
.m4p-words--rg .w > span { font-size: clamp(44px, 7vw, 128px); }
.m4p-rg-top .ld { display: grid; gap: 16px; padding-bottom: 10px; }
.m4p-rg-top .m4p-lead { margin: 0; font-size: 17px; }
.m4p-rg-top .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.m4p-rg-top .meta li { padding: 7px 10px; border: 1px solid var(--m4-line); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-rg-top .meta b { font-weight: 600; color: var(--m4-paper); }
.m4p-rg-top .meta .idade { display: inline-flex; align-items: center; gap: 8px; border-color: var(--m4-red); color: var(--m4-paper); letter-spacing: .02em; text-transform: none; }
.m4p-rg-top .meta .idade b { padding: 3px 5px; background: var(--m4-red); font-weight: 800; }
.m4p-rg-cima .pp { margin: clamp(40px, 4.4vw, 66px) 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-rg-partes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.m4p-rg-partes a { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 230px; padding: 20px 20px 18px; overflow: hidden; border: 1px solid var(--m4-line); background: var(--m4-ink); color: var(--m4-paper);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.m4p-rg-partes a:hover, .m4p-rg-partes a:focus-visible { transform: translate(-4px, -6px); box-shadow: 8px 10px 0 var(--m4-volt); border-color: var(--m4-volt); }
.m4p-rg-partes .rom { font: 800 clamp(56px, 5.4vw, 90px)/.9 var(--m4-display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px var(--m4-volt); }
.m4p-rg-partes b { font: 800 clamp(17px, 1.4vw, 21px)/1.12 var(--m4-display); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.m4p-rg-partes .it { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--m4-gray); }
.m4p-rg-partes .lr { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--m4-volt); }
.m4p-rg-partes .lr .ar { width: 16px; height: 16px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.m4p-rg-partes a:hover .lr .ar { transform: translateX(5px); }
/* índice (parado ao lado do texto) */
.m4p-rg-in { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: start; padding-top: clamp(50px, 5vw, 80px); padding-bottom: clamp(80px, 8vw, 130px); }
.m4p-rg .ind { position: sticky; top: 96px; }
.m4p-rg .ind .abre { display: none; }
.m4p-rg .ind ol { max-height: calc(100vh - 140px); margin: 0; padding: 0 6px 0 0; overflow: auto; overscroll-behavior: contain; border-left: 1px solid var(--m4-line); list-style: none; scrollbar-width: thin; }
.m4p-rg .ind li a { position: relative; display: block; padding: 7px 0 7px 16px; font-size: 13px; line-height: 1.35; color: rgba(242, 240, 234, .6); transition: color .25s; }
.m4p-rg .ind li a::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--m4-volt); transform: scaleY(0); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.m4p-rg .ind li a:hover { color: var(--m4-paper); }
.m4p-rg .ind li a.on { color: var(--m4-volt); }
.m4p-rg .ind li a.on::before { transform: scaleY(1); }
.m4p-rg .ind li.n1 a { margin-top: 14px; padding-top: 10px; font: 700 11.5px/1.3 var(--m4-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--m4-paper); }
.m4p-rg .ind li.n1 a.on { color: var(--m4-volt); }
/* documento */
.m4p-rg .doc { min-width: 0; max-width: 780px; color: rgba(242, 240, 234, .84); font-size: 16.5px; line-height: 1.75; }
.m4p-rg .doc .tit { margin: 0 0 8px; font: 800 clamp(24px, 2.4vw, 34px)/1.1 var(--m4-display); letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; color: var(--m4-paper); }
.m4p-rg .doc .so { margin: 0 0 20px; font-size: 11px; letter-spacing: .08em; color: var(--m4-volt); }
.m4p-rg .doc h1 { position: relative; display: flex; align-items: center; gap: 18px; margin: 80px 0 26px; padding: 18px 22px; background: var(--m4-volt); color: var(--m4-black); box-shadow: 8px 8px 0 var(--m4-red);
  font: 800 clamp(20px, 2vw, 28px)/1.12 var(--m4-display); letter-spacing: -.02em; text-transform: uppercase; scroll-margin-top: 100px; }
.m4p-rg .doc h1::before { content: attr(data-n); display: grid; flex: none; place-items: center; min-width: 64px; height: 64px; padding: 0 10px; background: var(--m4-black); color: var(--m4-volt); font-size: 30px; letter-spacing: -.02em; }
.m4p-rg .doc h2 { margin: 52px 0 14px; font: 800 clamp(19px, 1.7vw, 25px)/1.2 var(--m4-display); letter-spacing: -.01em; text-transform: uppercase; color: var(--m4-paper); scroll-margin-top: 100px; }
.m4p-rg .doc h2 .nn { margin-right: 4px; color: var(--m4-volt); }
.m4p-rg .doc h3 { margin: 30px 0 10px; font: 600 12px/1.3 var(--m4-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--m4-volt); scroll-margin-top: 100px; }
.m4p-rg .doc p { margin: 0 0 16px; }
.m4p-rg .doc strong { color: var(--m4-paper); }
.m4p-rg .doc ul, .m4p-rg .doc ol { margin: 0 0 18px; padding: 0 0 0 22px; }
.m4p-rg .doc ul { list-style: square; }
.m4p-rg .doc li { margin: 0 0 8px; padding-left: 4px; }
.m4p-rg .doc li::marker { color: var(--m4-volt); }
.m4p-rg .doc hr { margin: 56px 0; border: 0; border-top: 1px solid var(--m4-line); }
.m4p-rg .doc table { width: 100%; margin: 6px 0 22px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.m4p-rg .doc th { padding: 10px 12px; border-bottom: 2px solid var(--m4-volt); font: 600 11px/1.3 var(--m4-mono); letter-spacing: .1em; text-align: left; text-transform: uppercase; color: var(--m4-gray); }
.m4p-rg .doc td { padding: 12px; border-bottom: 1px solid var(--m4-line); vertical-align: top; }
.m4p-rg .doc tbody tr:hover td { background: rgba(255, 225, 77, .05); }
@media (max-width: 900px) {
  .m4p-rg-cima { padding-top: 100px; }
  .m4p-rg-top { grid-template-columns: minmax(0, 1fr); }
  .m4p-words--rg .w > span { font-size: clamp(40px, 13vw, 96px); }
  .m4p-rg-partes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .m4p-rg-partes a { min-height: 180px; padding: 16px; }
  .m4p-rg-in { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 30px; }
  .m4p-rg .ind { top: 66px; z-index: 6; margin: 0 -16px; padding: 0 16px; border-bottom: 1px solid var(--m4-line); background-color: var(--m4-black); }
  .m4p-rg .ind.on { box-shadow: 0 24px 40px rgba(0, 0, 0, .6); }
  .m4p-rg .ind .abre { display: flex; align-items: center; gap: 10px; width: 100%; height: 52px; padding: 0; border: 0; background: none; color: var(--m4-paper); cursor: pointer; font-size: 11px; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
  .m4p-rg .ind .abre span { flex: none; color: var(--m4-volt); }
  .m4p-rg .ind .abre .atual { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; letter-spacing: .02em; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
  .m4p-rg .ind .abre i { flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .3s; }
  .m4p-rg .ind.on .abre i { transform: translateY(2px) rotate(-135deg); }
  .m4p-rg .ind ol { display: none; max-height: 60vh; padding-bottom: 12px; border-left: 0; }
  .m4p-rg .ind.on ol { display: block; }
  .m4p-rg .doc { font-size: 16px; }
  .m4p-rg .doc h1 { gap: 12px; margin-top: 56px; padding: 14px 16px; }
  .m4p-rg .doc h1::before { min-width: 48px; height: 48px; font-size: 22px; }
}

/* ---------- SITE DE VERDADE (07/11): avisos, toast e prévia escondida ---------- */
html.pwu-prod .m4p-demo { display: none !important; }
.m4p-aviso2 { margin: 18px 0 0; padding: 13px 16px; border-left: 4px solid #ffe14d; background: rgba(255, 225, 77, .12); color: inherit; font-size: 14.5px; line-height: 1.5; }
.m4p-aviso2.ok { border-left-color: #3ddc84; background: rgba(61, 220, 132, .13); }
.m4p-aviso2.erro { border-left-color: #ff3b3b; background: rgba(255, 59, 59, .14); }
.m4p-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 2147482600;
  width: max-content; max-width: min(560px, calc(100vw - 32px)); padding: 13px 18px; background: #0b0b0c; color: #f4f1e8; border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 6px 6px 0 #ffe14d; font: 600 14px/1.45 Inter, system-ui, sans-serif; pointer-events: none; }
.m4p-toast.erro { box-shadow: 6px 6px 0 #ff3b3b; }
button.m4p-parc { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
button.m4p-parc:disabled { opacity: .5; cursor: default; }.m4p-rk-vazio { margin: 28px auto 0; max-width: 560px; padding: 16px 20px; text-align: center; font-size: 13px; letter-spacing: .04em; line-height: 1.55;
  color: rgba(244, 241, 232, .82); border: 1px dashed rgba(255, 225, 77, .45); background: rgba(11, 11, 12, .55); }
.m4p-semtime { margin: 10px 0 0; font-size: 12.5px; letter-spacing: .04em; opacity: .7; }
p.cmsg.erro { color: #ff6b6b; }/* 07/11 (teste nos celulares de 360 a 430 px): coluna de grade NUNCA mais larga que a tela. A trilha "auto" crescia até a
   palavra mais longa do título (BALANCEAMENTO, ACONTECE, COMUNIDADE) e o texto da notícia saía pela direita. Agora a coluna é
   minmax(0, 1fr), o título diminui com a largura da tela e, no último caso, quebra a palavra em vez de cortar. */
@media (max-width: 760px) {
  #app .m4p-nt-cab, #app .m4p-nts-top, #app .m4-medc-t { grid-template-columns: minmax(0, 1fr); }
  #app .m4p-nt-cab > *, #app .m4p-nts-top > *, #app .m4-medc-t > * { min-width: 0; }
  #app .m4p-nt-cab h1 { font-size: clamp(24px, 7.4vw, 34px); overflow-wrap: anywhere; }
  #app .m4-medc-t .m4-h2 { font-size: clamp(28px, 9.2vw, 42px); overflow-wrap: anywhere; }
  #app .m4p-nt-cab .lead, #app .m4p-nt-cab .mt { overflow-wrap: anywhere; }
  #app .m4-cta .big { overflow-wrap: anywhere; }
  #app .m4p-words--nt { max-width: 100%; }
}
/* ---------- SEGURANÇA DE VERDADE (07/11): troca de e-mail com as etapas do servidor ---------- */
.m4p-ec .ec-body { display: grid; gap: 14px; margin-top: 14px; }
.m4p-ec .ec-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; margin: 0; padding: 12px 14px; background: rgba(11, 11, 12, .05); border-left: 3px solid #ffe14d; }
.m4p-ec .ec-res dt { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.m4p-ec .ec-res dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.m4p-ec .ec-painel { display: grid; gap: 12px; }
.m4p-ec .ec-form { display: grid; gap: 12px; }
.m4p-ec .ec-t { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.m4p-ec .ec-msg:empty { display: none; }
.m4p-ec .ec-como { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; opacity: .85; }
.m4p-ec .ec-fim { display: grid; gap: 10px; margin-top: 14px; padding: 16px; border-left: 4px solid #1d7a3c; background: rgba(29, 122, 60, .1); }
.m4p-ec .ec-fim h3 { margin: 0; }
.m4p-ec .ec-fim p { margin: 0; }
.m4p-ec .ec-cancel { opacity: .8; }
.m4p-ec .acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }/* QR de verdade (Pix do Mercado Pago e o do autenticador): a imagem cabe na moldura branca do QR (antes era só o SVG da prévia) */
div.qrbox > img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* DOAR-VIP-DE-CARA 07/11 ~19:20 (dono, com a foto da tela 1366x887: "quando eu entro na aba Doar quero que o SEJA VIP
   apareça logo de cara nessa proporção da foto, e não pode cortar a Pcoin em cima. Pro cara ver que ele pode ser VIP também"):
   no PC (6 colunas), ~57 px a menos só nos ESPAÇOS entre o topo e o banner (artes, letras e moeda do mesmo tamanho);
   a Pcoin continua inteira e com folga embaixo do menu. */
@media (min-width: 1181px) {
  .m4p-doar-cima { padding: 90px 0 36px; }
  .m4p-outro { margin-top: 22px; }
  .m4p-outro .m4p-livre .lb { margin-bottom: 7px; }
  .m4p-outro .m4p-livre input { height: 54px; }
  .m4p-outro .m4p-livre .dica { margin-top: 6px; }
  .m4p-vipfx { margin-top: 22px; }
}
/* MEDIDOR-PCOIN-POR-CIMA 07/11 ~19:40 (dono: "essas coisas ficam clipando a Pcoin, tem que ficar por trás da Pcoin e não em
   cima dela"): a Pcoin do medidor fica acima dos tracinhos das faixas (eles vêm depois no HTML e eram pintados por cima) */
.m4p-medidor .th { z-index: 2; }
/* LOGIN-FAIXA-DE-CARA 07/11 ~21h (dono, vídeo: "essa parte de cima você está deixando muito sem uso... quando eu entro quero ver
   toda essa parte e essa faixa passando"): no PC o espaço do topo, o título, os 3 itens e as margens da faixa acompanham a ALTURA
   da tela (vh), para o título, o cartão de entrar e a faixa caberem na 1ª tela. Em tela alta (>= ~1240 px) fica como antes. */
@media (min-width: 1041px) {
  .m4p-auth { padding-top: clamp(74px, 9.4vh, 128px); }
  .m4p-auth .m4p-words { margin-top: clamp(12px, 1.9vh, 24px); }
  .m4p-auth .m4p-words .w > span { font-size: clamp(54px, min(8.4vw, 11.9vh), 152px); }
  .m4p-auth .m4p-perks { margin-top: clamp(14px, 2.4vh, 30px); }
  .m4p-auth .m4p-perks li { padding: clamp(8px, 1.3vh, 16px) 0; }
  .m4p-auth-in { padding-bottom: clamp(10px, 1.6vh, 36px); }
  .m4p-auth .m4p-band { margin: clamp(8px, 1.6vh, 34px) 0 clamp(14px, 2.4vh, 40px); }
}
/* BANNERS-DO-SITE 07/11 ~22h (dono, vídeo 20261107-2347: "um banner que orne com o site todo... com esse mesmo texto... com esses
   mesmos pokémons... não faça nesse mesmo formato"): as 2 artes largas do "O jogo" viram banners do Modelo 4. Fundo preto com a
   grade (16 x 5 quadrados), anel e luz do brasão, título em Unbounded (texto de verdade, na língua da página), faixa dupla inclinada
   como as do topo e os MESMOS personagens do designer. A faixa passa na frente da base dos personagens (onde o recorte termina).
   Tudo em cqw (largura do banner): a composição é a mesma em qualquer tela; no celular vira um cartão em pé (4:5). */
.m4p-jg-o .ger .cl.bn, .m4p-jg-c .poster .cl.bn { container-type: inline-size; isolation: isolate; color: var(--m4-paper);
  background: linear-gradient(var(--m4-line) 1px, transparent 1px) 0 0 / 100% 6.25cqw, linear-gradient(90deg, var(--m4-line) 1px, transparent 1px) 0 0 / 6.25cqw 100%, var(--m4-ink); }
.bn .bn-aro { position: absolute; z-index: 0; left: 58cqw; top: -9cqw; width: 46cqw; aspect-ratio: 1; border: 1px solid rgba(242, 240, 234, .16); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 225, 77, .24), rgba(255, 225, 77, .07) 58%, transparent); }
.bn .bn-aro::after { content: ""; position: absolute; inset: 11%; border: 1px dashed rgba(255, 225, 77, .36); border-radius: 50%; }
.bn--poster .bn-aro { left: 57cqw; background: radial-gradient(closest-side, rgba(255, 225, 77, .17), rgba(255, 225, 77, .05) 58%, transparent); }
.bn .bn-tx { position: absolute; z-index: 3; left: 5cqw; top: 7.6cqw; display: flex; align-items: center; gap: 1.8cqw; }
.bn--poster .bn-tx { top: 5.4cqw; }
.bn .bn-n { flex: none; font: 800 12.9cqw/.76 var(--m4-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: .2cqw var(--m4-volt); text-shadow: .55cqw .55cqw 0 var(--m4-red); }
.bn .bn-t { display: grid; justify-items: start; font: 800 3.05cqw/1.06 var(--m4-display); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.bn .bn-t em { font-style: normal; padding: 0 .14em; background: var(--m4-volt); color: var(--m4-black); }
.bn .bn-cta { display: inline-flex; align-items: center; gap: .8cqw; margin-top: 1.9cqw; padding: 1.05cqw 1.5cqw; background: var(--m4-volt); color: var(--m4-black);
  font: 800 1.15cqw/1 var(--m4-display); letter-spacing: .02em; box-shadow: .45cqw .45cqw 0 var(--m4-red); transition: translate .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1); }
.bn .bn-cta svg { width: 1.35cqw; height: 1.35cqw; }
.m4p-jg-c .poster:hover .bn-cta, .m4p-jg-c .poster:focus-visible .bn-cta { translate: -.2cqw -.2cqw; box-shadow: .7cqw .7cqw 0 var(--m4-red); }
/* os personagens (vencem a regra geral das artes, que esticava a imagem no quadro) */
.m4p-jg-o .ger .bn img.bn-arte, .m4p-jg-c .poster .bn img.bn-arte { position: absolute; z-index: 2; right: var(--r); bottom: var(--b); width: auto; height: var(--h); max-width: none; object-fit: contain; transform-origin: 100% 100%; }
.bn--ger { --h: 28.75cqw; --r: -5.3cqw; --b: -1.8cqw; }
.bn--poster { --h: 31cqw; --r: -5.95cqw; --b: -2.5cqw; }
/* "Gerações I · II · III · IV · V" em cima do título, no estilo dos rótulos do site */
.bn .bn-k { position: absolute; z-index: 3; left: 5cqw; top: 3.7cqw; display: flex; align-items: center; gap: .8cqw; font: 500 .95cqw/1 var(--m4-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 240, 234, .62); }
.bn .bn-k::before { content: ""; width: .55cqw; height: .55cqw; background: var(--m4-volt); }
/* faixa inclinada na base (como as do topo): a frase na língua da página, com o fio da outra cor embaixo. Presa pelo canto
   esquerdo e descendo para a direita: a frase fica inteira à esquerda e, à direita, a faixa passa na frente da base dos
   personagens (o recorte termina abaixo da borda do banner) */
.bn .bn-fx { position: absolute; z-index: 4; left: -6cqw; right: -6cqw; bottom: .8cqw; display: grid; transform: rotate(1.2deg); transform-origin: 0 100%; pointer-events: none; }
.bn .bn-fx .fa { display: flex; overflow: hidden; white-space: nowrap; padding: 1.15cqw 0 1.15cqw 10.6cqw; background: var(--m4-volt); color: var(--m4-black); box-shadow: 0 .55cqw 0 var(--m4-red); }
.bn .bn-fx .fa span { flex: none; font: 800 1.5cqw/1 var(--m4-display); letter-spacing: -.01em; text-transform: uppercase; }
.bn .bn-fx .fa span::after { content: "✦"; margin: 0 2.4cqw; }
.bn--poster .bn-fx .fa { background: var(--m4-red); color: var(--m4-paper); box-shadow: 0 .55cqw 0 var(--m4-volt); }
/* celular: cartão em pé, texto em cima, personagens embaixo */
@media (max-width: 760px) {
  .m4p-jg-o .ger .cl.bn, .m4p-jg-c .poster .cl.bn { aspect-ratio: 1; background-size: 100% 12.5cqw, 12.5cqw 100%, auto; }
  .m4p-jg-c .poster .cl.bn { aspect-ratio: 4 / 5; }
  .bn .bn-aro { left: 12cqw; top: 26cqw; width: 96cqw; }
  .bn--poster .bn-aro { left: 8cqw; top: 40cqw; }
  .bn .bn-tx { left: 7cqw; top: 7.5cqw; gap: 3.2cqw; }
  .bn--poster .bn-tx { top: 8cqw; }
  .bn .bn-n { font-size: 24.4cqw; -webkit-text-stroke-width: .42cqw; text-shadow: 1cqw 1cqw 0 var(--m4-red); }
  .bn .bn-t { font-size: 5.6cqw; }
  .bn .bn-cta { gap: 1.8cqw; margin-top: 4.2cqw; padding: 2.5cqw 3.4cqw; font-size: 3.1cqw; box-shadow: 1.1cqw 1.1cqw 0 var(--m4-red); }
  .bn .bn-cta svg { width: 3.6cqw; height: 3.6cqw; }
  .bn--ger { --h: 64cqw; --r: -9cqw; --b: -3cqw; }
  .bn--poster { --h: 76cqw; --r: -15cqw; --b: 0cqw; }
  .bn .bn-k { left: 7cqw; top: 6.5cqw; gap: 1.8cqw; font-size: 2.3cqw; }
  .bn .bn-k::before { width: 1.3cqw; height: 1.3cqw; }
  .bn--ger .bn-tx { top: 13cqw; }
  /* no celular a frase não cabe numa linha: vai inteira em 2 linhas (uma vez só), sem cortar na borda */
  .bn .bn-fx { bottom: 3cqw; transform: rotate(2.4deg); }
  .bn .bn-fx .fa { white-space: normal; padding: 2.3cqw 13cqw; box-shadow: 0 1.2cqw 0 var(--m4-red); }
  .bn--poster .bn-fx .fa { box-shadow: 0 1.2cqw 0 var(--m4-volt); }
  .bn .bn-fx .fa span { flex: 1 1 auto; font-size: 3.4cqw; line-height: 1.18; }
  .bn .bn-fx .fa span:not(:first-child) { display: none; }
  .bn .bn-fx .fa span::after { content: none; }
}