/* ============ HERO HUB — direção "Estádio" ============================================
   A GameJam+ se chama World Cup of Game Creation, e o produto inteiro é disputa e
   progressão. O visual anterior apresentava isso como painel de SaaS: preto arroxeado com
   névoa, um gradiente coral→magenta→roxo em botão, título, barra, avatar e capa, glow como
   sinal de clicável, raio 14px em tudo. Nada estava errado; nada era uma decisão.

   Agora: preto neutro como palco, UM acento por mundo (chapado, nunca gradiente), ouro só
   para conquista, ciano só para moeda. A hierarquia vem do contraste de tipo — de 10px a
   96px — e não de efeito. Sem glow, sem vidro, sem cartão que levita.
   ==================================================================================== */
:root{
  /* paleta real Indie Hero (logo): coral -> magenta -> roxo · ouro p/ Fama (insight HeroClub) */
  --coral:#F2654C; --mag:#E8368F; --purp:#9B4DDB; --gold:#F2C24B;
  /* preto NEUTRO: o roxo no fundo era metade da "cara de template" */
  --bg0:#08080A; --bg1:#101014; --bg2:#17171C; --bg3:#1F1F26;
  /* linhas sólidas, não branco translúcido — translucidez é assinatura do genérico */
  --line:#26262E; --line2:#3A3A45;
  --hi:#F5F3F7; --md:#9A94A8; --lo:#7C7589;
  --ih1:var(--mag); --ih2:var(--purp);
  --gj1:#F7941D; --gj2:#E05A28; --gj3:#8B3F9E; --gj4:#4B6CB7;
  --cyan:#2BD9F2; --mint:#4ADE80; --rose:#FB7185; --amber:var(--gold);
  --grad-ih:linear-gradient(120deg,#F2654C,#E8368F 50%,#9B4DDB);
  --grad-gj:linear-gradient(100deg,#F7941D,#E05A28 32%,#8B3F9E 66%,#4B6CB7);
  /* o acento é COR, não gradiente: o gradiente da marca sobrou para a logo e nada mais */
  --accent:#E8368F; --accent-solid:#E8368F; --accent-dim:rgba(232,54,143,.12);
  --accent-ink:#08080A;              /* texto sobre o acento */
  --glow:none;                       /* glow eliminado; profundidade vem de superfície e linha */
  --sombra:0 10px 30px -12px rgba(0,0,0,.75);   /* offset + blur reais, não halo colorido */
  --font:'Barlow',system-ui,sans-serif;
  /* Tipografia da empresa. A Barlow e a Barlow Condensed são padrão de marca e não se
     trocam: uma tentativa de display própria (Archivo) foi revertida por isso. O que
     carrega a direção é a ESCALA — 10px nas etiquetas, 56px nos títulos, 68px no tema
     da edição —, não a escolha da face. */
  --cond:'Barlow Condensed','Barlow',sans-serif;
  --r:4px;                           /* raio quase-zero */
  --t:120ms;                         /* rápido lê como responsivo; lento lê como enfeite */
}
/* Cada MARCA tem seu acento. Trocar de mundo troca a cor da interface inteira, então a
   pessoa sabe onde está antes de ler o menu.
   O acento é por marca e não por área: Hero Lab e Hero Academy são Indie Hero (magenta, o
   padrão do :root), Jammer e Fellow são GameJamPlus (laranja). Duas áreas da mesma marca com
   cores diferentes diriam que são produtos diferentes, e não são.

   CUIDADO: o valor vem de `App.mundoDaRota()`, que devolve o id em App.MUNDOS. Quando a
   reforma v2 renomeou os mundos (`jam` virou `jammer`, nasceram `lab`, `academy` e
   `fellow`), este seletor continuou apontando para o nome antigo e o laranja simplesmente
   parou de existir na interface, sem erro nenhum no console. Id novo aqui, sempre. */
body[data-world="jammer"],
body[data-world="fellow"]{ --accent:#F7941D; --accent-solid:#F7941D; --accent-dim:rgba(247,148,29,.12); --accent-ink:#0B0B0F; }
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg0);color:var(--hi);font-family:var(--font);font-size:14.5px;overflow:hidden;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
a{color:var(--md);text-decoration:none}
a:hover{color:var(--hi)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
.ic-svg{vertical-align:-3px;flex-shrink:0}
/* Texto em gradiente saiu: ênfase vem de peso e tamanho, não de decoração. As classes
   continuam existindo porque as views as usam — agora entregam cor sólida do acento. */
.grad-text{color:var(--accent-solid)}
.grad-gj-text{color:var(--gj1)}

/* ============ LOGIN ============ */
#login-screen{position:fixed;inset:0;display:flex;z-index:50;background:var(--bg0)}
.login-left{flex:1.15;position:relative;display:flex;flex-direction:column;justify-content:center;padding:7vw;overflow:hidden;
  background:radial-gradient(ellipse 62% 48% at 22% 24%,rgba(255,46,147,.13),transparent 62%),
             radial-gradient(ellipse 55% 45% at 82% 88%,rgba(75,108,183,.14),transparent 62%),var(--bg0)}
/* o campo de pontos saiu: grade decorativa de fundo e uma das assinaturas mais
   reconheciveis de interface gerada, e aqui nao media nem estruturava nada */
.login-left .grid-dots{display:none}
.login-brand{font-weight:700;letter-spacing:.26em;font-size:11px;color:var(--lo);text-transform:uppercase;position:relative}
.login-title{font-family:var(--cond);font-weight:800;font-size:clamp(56px,7vw,104px);line-height:.9;letter-spacing:.01em;margin:22px 0 20px;position:relative}
.login-sub{font-size:15.5px;color:var(--md);max-width:440px;line-height:1.7;font-weight:300;position:relative}
.login-sub b{color:var(--hi);font-weight:600}
.login-badges{display:flex;gap:8px;margin-top:36px;position:relative;flex-wrap:wrap}
.lbadge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;padding:8px 15px;border-radius:10px;border:1px solid var(--line2);color:var(--md)}
.login-right{width:440px;display:flex;flex-direction:column;justify-content:center;padding:52px 46px;background:var(--bg1);border-left:1px solid var(--line)}
.login-card h2{font-family:var(--cond);font-weight:700;font-size:26px;letter-spacing:.02em}
.login-card .s{color:var(--lo);font-size:12.5px;margin:5px 0 26px}
.demo-accounts{margin-top:28px;border-top:1px solid var(--line);padding-top:20px}
.demo-accounts .t{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lo);margin-bottom:10px}
.acc-chip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:1px solid var(--line);border-radius:11px;padding:10px 13px;margin-bottom:6px;cursor:pointer;transition:.15s;color:var(--hi);font-family:var(--font);font-size:13.5px}
.acc-chip:hover{border-color:var(--line2);background:var(--bg2)}
.acc-chip .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.acc-chip .rl{margin-left:auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--lo)}
.login-card{position:relative}
.login-lang{position:absolute;top:-34px;right:0;margin-right:0}
.gate-hint{margin-top:14px;font-size:12px;line-height:1.55;color:var(--lo)}
.acc-mode-tag{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--lo);border:1px solid var(--line);border-radius:999px;padding:5px 11px;margin-bottom:16px}
.acc-mode-tag.full{color:var(--gold);border-color:rgba(242,194,75,.35)}
.linkback{display:block;width:100%;margin-top:18px;background:none;border:0;color:var(--lo);font-family:var(--font);font-size:12.5px;cursor:pointer;transition:.14s}
.linkback:hover{color:var(--hi)}

/* ============ SHELL ============ */
#shell{display:flex;height:100vh}
#sidebar{width:218px;background:var(--bg1);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:20px 12px 14px;flex-shrink:0}
.side-logo{font-family:var(--cond);font-weight:900;font-size:19px;letter-spacing:-.01em;padding:2px 12px 18px;display:flex;align-items:center;gap:9px;color:var(--hi)}
/* o gradiente da marca sobreviveu em UM lugar: a logo. É assinatura, não papel de parede. */
.side-logo em{font-style:normal;background:var(--grad-ih);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* impeccable-disable-line gradient-text -- assinatura da marca, único uso */
.side-logo .lg{width:26px;height:26px;border-radius:3px;background:var(--grad-ih);display:inline-flex;align-items:center;justify-content:center;color:#0B0B0F}
.nav-sec{font-family:var(--cond);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lo);padding:18px 12px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:8.5px 12px;border-radius:3px;color:var(--md);cursor:pointer;font-weight:500;font-size:13.5px;margin-bottom:1px;transition:var(--t)}
.nav-item:hover{color:var(--hi);background:var(--bg2)}
/* ativo: o acento marca o texto e o ícone, sem tarja de fundo colorida */
.nav-item.active{color:var(--hi);background:var(--bg2);box-shadow:inset 2px 0 0 var(--accent-solid)}
.nav-item.active .ic{color:var(--accent-solid)}
.nav-item .ic{display:inline-flex;color:var(--lo);transition:.13s}
.nav-item:hover .ic{color:var(--md)}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:8px}

#main{flex:1;display:flex;flex-direction:column;min-width:0}
/* sem vidro: superfície sólida. O blur era decoração, não efeito com propósito. */
#topbar{height:58px;flex-shrink:0;display:flex;align-items:center;gap:14px;padding:0 26px;border-bottom:1px solid var(--line);background:var(--bg1)}
.tb-world{font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--lo)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.viptag{font-family:var(--cond);font-weight:800;font-size:10px;letter-spacing:.16em;padding:5px 10px;border-radius:2px;color:var(--gold);border:1px solid rgba(242,194,75,.45);background:transparent}
/* mesma pastilha, mas clicável: é por aqui que o não-VIP chega na página do plano,
   já que "Seja VIP" saiu do menu lateral */
.viptag.cta{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;cursor:pointer;transition:.14s}
.viptag.cta:hover{background:rgba(242,194,75,.18);border-color:rgba(242,194,75,.7)}
.pulse{animation:hh-pulse 2s ease-in-out infinite}
@keyframes hh-pulse{0%,100%{opacity:1}50%{opacity:.6}}
.fama-gold{color:var(--gold)!important}
.brand-img{display:block}
.brandrow{display:flex;align-items:center;gap:16px;position:relative;margin-bottom:26px}
.brandrow .bx{color:var(--lo);font-size:14px}
.gjwm{font-family:var(--cond);font-weight:900;letter-spacing:-.01em;color:var(--gj1)}
.wallet-chip{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:2px;background:transparent;border:1px solid var(--line);cursor:pointer;transition:var(--t);font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:0;font-variant-numeric:tabular-nums}
.wallet-chip:hover{border-color:var(--line2)}
.wallet-chip.coin .sym{color:var(--cyan)}
.wallet-chip.gem .sym{color:var(--ih1)}
.wallet-chip .sym{display:inline-flex}
.avatar-wrap{position:relative}
.avatar-ring{position:absolute;inset:0}
.avatar{position:absolute;inset:4px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:900;font-size:13px;color:#0B0B0F;overflow:hidden;background:var(--bg2)}
.avatar-img{width:100%;height:100%;object-fit:cover;display:block}
/* chamada de cadastro na tela de entrada */
.signup-call{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--lo);text-align:center}
.linkinline{background:none;border:0;padding:0;margin-left:5px;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--accent-solid);cursor:pointer;text-decoration:underline}
.linkinline:hover{color:var(--hi)}
.lvl-tag{font-size:11px;color:var(--lo);text-align:right;line-height:1.3}
.lvl-tag b{color:var(--md);display:block;font-size:12px;font-weight:600}

/* Fundo liso. Os dois radiais roxos eram a névoa que fazia o app parecer template —
   e competiam com o conteúdo em vez de sustentá-lo. */
#view{flex:1;overflow-y:auto;padding:34px 36px 70px;position:relative;background:var(--bg0)}

/* A cabeça da tela: o título carrega o peso sozinho. O que era kicker (eyebrow) desceu
   para baixo do título e virou legenda — o craft-floor bane rótulo acima de heading, e a
   informação que alguns deles carregam (temporada, edição, aula em curso) é real demais
   para simplesmente sumir. `order` resolve os dois sem reescrever doze telas. */
.view-head{margin-bottom:30px;max-width:860px;display:flex;flex-direction:column}
.view-title{order:1;font-family:var(--cond);font-weight:800;font-size:clamp(34px,4.4vw,56px);letter-spacing:0;line-height:.94;text-transform:uppercase}
.view-eyebrow{order:2;font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lo);margin-top:12px}
.view-sub{order:3;color:var(--md);font-size:14px;margin-top:10px;font-weight:300;line-height:1.6;max-width:68ch}
.view-sub b{color:var(--hi);font-weight:600}

/* ============ COMPONENTES ============ */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1150px){.g3,.g4{grid-template-columns:1fr 1fr}}
.card{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:border-color var(--t),transform var(--t)}
/* O cartão não levita nem brilha. A borda assume o acento e ele desliza 2px — gesto de
   carta sendo puxada. Levitar com halo colorido era o mesmo sinal para tudo que é clicável. */
.card.hover:hover{border-color:var(--accent-solid);transform:translateX(2px)}
.card.hover:hover h3{color:var(--accent-solid)}
/* O toque volta 1px antes de soltar. É a diferença entre um alvo que responde e um que
   só muda de cor: o dedo (ou o clique) recebe confirmação física de que pegou. */
.card.hover:active{transform:translateX(2px) scale(.994)}
.card.hover:focus-visible{border-color:var(--accent-solid);outline:2px solid var(--accent-solid);outline-offset:2px}
.card h3{font-family:var(--cond);font-weight:800;font-size:18px;letter-spacing:-.01em;transition:color var(--t)}
.card .cs{color:var(--md);font-size:13px;margin-top:6px;line-height:1.55;font-weight:300}

/* Seção: régua que atravessa a largura, com o título ancorado à esquerda. A barrinha de
   3px em gradiente saiu junto com o resto do vocabulário decorativo.
   Mais espaço acima do que abaixo — o título pertence ao que vem depois dele. */
.sec{display:flex;align-items:baseline;gap:12px;margin:42px 0 16px;flex-wrap:wrap}
.sec:first-child{margin-top:0}
.sec .bar{display:none}
.sec .st{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--hi);flex-shrink:0}
/* o subtítulo encolhe antes de empurrar a régua para fora da tela */
.sec .sx{font-size:12px;color:var(--lo);font-weight:400;flex:0 1 auto;min-width:0}
.sec::after{content:'';flex:1;height:1px;background:var(--line);order:5}
.sec .more{order:6;font-size:11px;font-family:var(--cond);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lo);cursor:pointer;flex-shrink:0;transition:var(--t)}
.sec .more:hover{color:var(--accent-solid)}

/* Botão: cor chapada e caixa alta condensada. No hover ele INVERTE (fundo vira contorno)
   em vez de brilhar — o brilho dizia "sou clicável" com a mesma voz em toda a interface. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--cond);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:11px 20px;border-radius:3px;border:1px solid var(--accent-solid);cursor:pointer;transition:var(--t);color:var(--accent-ink);background:var(--accent-solid)}
body[data-world="jammer"] .btn,body[data-world="fellow"] .btn{color:var(--accent-ink)}
.btn:hover{background:transparent;color:var(--accent-solid)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.3;cursor:not-allowed}
.btn:disabled:active{transform:none}
.btn:disabled:hover{background:var(--accent-solid);color:var(--accent-ink)}
.btn.ghost,body[data-world="jammer"] .btn.ghost,body[data-world="fellow"] .btn.ghost{background:transparent;border-color:var(--line2);color:var(--hi)}
.btn.ghost:hover{border-color:var(--hi);background:transparent;color:var(--hi)}
.btn.danger,body[data-world="jammer"] .btn.danger,body[data-world="fellow"] .btn.danger{background:transparent;border-color:rgba(251,113,133,.45);color:var(--rose)}
.btn.danger:hover{background:var(--rose);color:var(--bg0)}
.btn.sm{padding:7px 13px;font-size:10.5px;border-radius:2px}
.btn.wfull{width:100%}

.input,textarea.input,select.input{width:100%;background:var(--bg0);border:1px solid var(--line);border-radius:2px;padding:10.5px 13px;color:var(--hi);font-family:var(--font);font-size:13.5px;outline:none;transition:var(--t)}
.input:focus{border-color:var(--accent-solid)}
.input::placeholder{color:var(--lo)}
textarea.input{resize:vertical;min-height:84px;line-height:1.55}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--cond);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lo);margin-bottom:7px}
.field .hint{font-size:11.5px;color:var(--lo);margin-top:5px}

/* Pill: contorno em vez de tarja translúcida. A cor diz o papel — ciano é moeda, ouro é
   conquista — e o contorno deixa o fundo respirar em vez de manchar a superfície. */
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--cond);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:2px;color:var(--md);background:transparent;border:1px solid var(--line2)}
.pill.coin{color:var(--cyan);border-color:rgba(43,217,242,.45)}
.pill.gem{color:var(--ih1);border-color:rgba(232,54,143,.45)}
.pill.ok{color:var(--mint);border-color:rgba(74,222,128,.45)}
.pill.warn{color:var(--amber);border-color:rgba(242,194,75,.45)}
.pill.err{color:var(--rose);border-color:rgba(251,113,133,.45)}
.pill.vip{color:var(--amber);border-color:rgba(242,194,75,.45)}
.dot-st{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}

/* rails */
.rail-scroll{display:flex;gap:13px;overflow-x:auto;padding:2px 2px 10px}
.rail-scroll>*{flex-shrink:0}

/* cover — monograma */
.cover{width:216px;border-radius:var(--r);overflow:hidden;background:var(--bg1);border:1px solid var(--line);cursor:pointer;transition:border-color var(--t),transform var(--t)}
.grid .cover{width:auto}
.cover .art.has-img{height:118px}
.cover:hover{border-color:var(--accent-solid);transform:translateX(2px)}
.cover .art{height:110px;display:flex;align-items:flex-end;justify-content:flex-start;position:relative;padding:12px}
/* Capa sem imagem: em vez de uma inicial gigante centrada sobre gradiente — que é o mesmo
   retângulo para todo conteúdo —, o nome ocupa a capa como lettering. Ainda é gerado, mas
   passa a dizer qual é o título em vez de decorar. */
.mono-mark{font-family:var(--cond);font-weight:900;font-size:26px;line-height:.92;letter-spacing:0;color:var(--bg0);text-align:left;text-transform:uppercase;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.cover .art .lock{position:absolute;top:9px;right:9px;background:rgba(11,11,15,.55);backdrop-filter:blur(4px);border-radius:8px;padding:4px 8px;font-size:10px;color:var(--amber);display:inline-flex;align-items:center;gap:5px}
.cover .body{padding:13px 15px 15px}
.cover .nm{font-family:var(--cond);font-weight:800;font-size:15.5px;line-height:1.15;letter-spacing:-.01em}
.cover .ds{font-size:11px;color:var(--lo);margin-top:4px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cover .meta{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}

/* ============ CLUBE DE VANTAGENS — capas ============ */
.club-card{cursor:pointer;display:flex;flex-direction:column}
.club-card .cs-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}
.club-card .btn{margin-top:auto}
.club-art{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#101018;display:flex;align-items:center;justify-content:center}
.club-art .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(22px) brightness(.42) saturate(1.25);transform:scale(1.25)}
.club-art>img{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;display:block}
.club-art .mono-mark{position:relative;z-index:1}
.club-art .lock{position:absolute;z-index:2;top:9px;right:9px;background:rgba(11,11,15,.6);backdrop-filter:blur(4px);border-radius:8px;padding:4px 9px;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--amber);display:inline-flex;align-items:center;gap:5px}
.club-card:hover .club-art{border-color:var(--line2)}

/* detalhe no modal — capa por completo */
.club-modal-cover{position:relative;aspect-ratio:16/9;border-radius:13px;overflow:hidden;border:1px solid var(--line);background:#101018;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.club-modal-cover .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(28px) brightness(.4) saturate(1.25);transform:scale(1.3)}
.club-modal-cover>img{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;display:block}

/* mission */
.mission{display:flex;flex-direction:column;gap:9px;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);padding:17px 18px;transition:border-color var(--t)}
.mission:hover{border-color:var(--accent-solid)}
.mission .mt{font-family:var(--cond);font-weight:800;font-size:16px;line-height:1.15;letter-spacing:-.01em}
.mission .md{font-size:12px;color:var(--md);line-height:1.5;font-weight:300}
.mission .mrow{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px}

/* tabela */
/* Tabela de classificação: cabeçalho como etiqueta, número tabular para as colunas
   alinharem de verdade, e a linha do próprio membro marcada pelo acento. */
table.tb{width:100%;border-collapse:collapse;font-size:13px}
.tb th{text-align:left;font-family:var(--cond);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lo);padding:10px;border-bottom:1px solid var(--line2)}
.tb td{padding:11px 10px;border-bottom:1px solid var(--line);color:var(--md);vertical-align:middle;font-variant-numeric:tabular-nums}
.tb td b{color:var(--hi);font-weight:600}
.tb tr:last-child td{border-bottom:none}
.tb tr.eu td,.tb tr.me td{background:var(--accent-dim)}
.tb tr.eu td:first-child,.tb tr.me td:first-child{box-shadow:inset 2px 0 0 var(--accent-solid)}

/* stats strip */
/* Números como placar: o rótulo vira etiqueta pequena e o valor cresce para 38px, com
   dígitos tabulares. É a tira que mais carrega a leitura de campeonato. */
.stat-strip{display:flex;flex-wrap:wrap;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);margin-bottom:26px}
.stat{flex:1;min-width:148px;padding:16px 20px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .kv{font-family:var(--cond);font-weight:900;font-size:38px;line-height:1;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;order:2}
.stat .kl{font-family:var(--cond);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lo);margin:0 0 8px;order:1}
.stat{display:flex;flex-direction:column}

/* sliders (jurado) */
.crit{margin-bottom:16px}
.crit .ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.crit .cn{font-weight:600;font-size:13.5px}
.crit .cw{font-size:10px;color:var(--lo);margin-left:6px}
.crit .cv{font-family:var(--cond);font-weight:800;font-size:22px;color:var(--hi);min-width:46px;text-align:right}
input[type=range]{width:100%;appearance:none;height:5px;border-radius:4px;background:var(--bg3);outline:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid var(--bg0)}

/* timeline */
.timeline{display:flex;gap:7px;margin:18px 0 0}
.tl-step{flex:1;background:var(--bg1);border:1px solid var(--line);border-radius:12px;padding:12px;position:relative;overflow:hidden}
.tl-step.now{border-color:rgba(247,148,29,.4)}
.tl-step.now:before{content:'';position:absolute;left:0;top:0;right:0;height:2px;background:var(--grad-gj)}
.tl-step .tn{font-family:var(--cond);font-weight:700;font-size:13.5px}
.tl-step .td{font-size:10.5px;color:var(--lo);margin-top:3px}
.tl-step .tnow{font-size:9px;font-weight:700;color:var(--gj1);letter-spacing:.12em;text-transform:uppercase;margin-top:5px}

/* modal */
#modal-root .overlay{position:fixed;inset:0;background:rgba(7,7,11,.78);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px}
.modal{background:var(--bg1);border:1px solid var(--line2);border-radius:18px;width:100%;max-width:540px;max-height:88vh;overflow-y:auto;padding:28px;position:relative}
.modal.wide{max-width:800px}
.modal h2{font-family:var(--cond);font-weight:700;font-size:22px;letter-spacing:.02em;margin-bottom:5px;padding-right:30px}
.modal .msub{color:var(--md);font-size:13px;margin-bottom:20px;line-height:1.6;font-weight:300}
.modal .msub b{color:var(--hi)}
.modal .x{position:absolute;top:18px;right:18px;background:none;border:none;color:var(--lo);cursor:pointer}
.modal .x:hover{color:var(--hi)}

/* toasts */
#toasts{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:9px}
.toast{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line2);border-radius:13px;padding:13px 17px;min-width:270px;max-width:380px;box-shadow:0 18px 50px rgba(0,0,0,.55);animation:toastIn .26s cubic-bezier(.22,1,.36,1)}
.toast .tico{display:inline-flex;color:var(--mint)}
.toast .tico.t-err{color:var(--rose)}
.toast .tico.t-reward{color:var(--cyan)}
.toast .tt{font-weight:600;font-size:13.5px}
.toast .ts{font-size:12px;color:var(--md);margin-top:2px}
@keyframes toastIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}

/* drawer/tx */
.tx{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.tx:last-child{border-bottom:none}
.tx .txd{flex:1;min-width:0}
.tx .txt{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx .txs{font-size:11px;color:var(--lo);margin-top:1px}
.tx .txv{font-family:var(--cond);font-weight:700;font-size:13.5px;text-align:right;line-height:1.3;flex-shrink:0}
.txv .up{color:var(--mint)}.txv .down{color:var(--rose)}.txv .gemv{color:var(--ih1)}

/* hero banner */
/* O banner vira CARTAZ. Era um retângulo arredondado com dois radiais e um título de 38px;
   agora o tema da edição ocupa a largura em corpo grande, com uma régua do acento no topo
   fazendo o papel de faixa de campeonato. A contagem regressiva é placar, não etiqueta. */
/* raio zero aqui de propósito: é cartaz, e canto arredondado brigaria com a régua de 3px
   que atravessa o topo — o detector reclama da combinação, e com razão */
.hero-banner{padding:38px 32px 34px;position:relative;overflow:hidden;margin-bottom:26px;
  border:1px solid var(--line);border-top:3px solid var(--gj1);background:var(--bg1)}
.hero-banner .hb-eyebrow{font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lo)}
.hero-banner .hb-title{font-family:var(--cond);font-weight:900;font-size:clamp(34px,5.2vw,68px);line-height:.9;margin:12px 0 14px;letter-spacing:-.01em;text-transform:uppercase}
.hero-banner .hb-sub{color:var(--md);font-size:14px;max-width:60ch;line-height:1.6;font-weight:300}
.hero-banner .hb-sub b{color:var(--hi);font-weight:600}
.hero-banner .hb-cta{margin-top:24px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.countdown{display:flex;gap:10px}
.cd{background:transparent;border:1px solid var(--line);border-radius:2px;padding:9px 13px;text-align:center;min-width:56px}
.cd .cdv{font-family:var(--cond);font-weight:900;font-size:30px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cd .cdl{font-family:var(--cond);font-size:8px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lo);margin-top:4px}

/* filtros / tabs de região */
.rtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.rtab{display:inline-flex;align-items:center;gap:7px;font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;padding:11px 22px;border-radius:11px;border:1px solid var(--line);color:var(--md);cursor:pointer;transition:.13s;background:transparent}
.rtab:hover{color:var(--hi);border-color:var(--line2)}
.rtab.active{color:var(--hi);background:var(--accent-dim);border-color:transparent}
.fbar{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.fbar .input{width:200px}

/* ============ IDIOMAS (bandeiras) ============ */
.lang-switch{display:flex;gap:4px;margin-right:6px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:4px}
.lang-btn{background:none;border:0;cursor:pointer;padding:4px 6px;border-radius:7px;display:flex;align-items:center;opacity:.45;transition:.14s}
.lang-btn:hover{opacity:.85}
.lang-btn.active{opacity:1;background:rgba(255,255,255,.08)}
.lang-btn svg{display:block;border-radius:2.5px}

/* ============ BUSCA (lupa) ============ */
.searchbar{display:flex;align-items:center;gap:10px;background:var(--bg1);border:1px solid var(--line);border-radius:12px;padding:9px 14px;max-width:420px;margin-bottom:18px;color:var(--lo);transition:.15s}
.searchbar:focus-within{border-color:var(--line2);color:var(--md)}
.searchbar input{background:none;border:0;outline:0;color:var(--hi);width:100%;font-family:var(--font);font-size:13.5px}
.searchbar input::placeholder{color:var(--lo)}

/* ============ APRENDER — estilo Netflix ============ */
.nfx-hero{position:relative;border-radius:18px;overflow:hidden;min-height:290px;display:flex;align-items:flex-end;background-size:cover;background-position:center;margin-bottom:20px;border:1px solid var(--line)}
.nfx-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,11,18,.94) 12%,rgba(13,11,18,.55) 55%,rgba(13,11,18,.22)),linear-gradient(0deg,rgba(13,11,18,.92),transparent 60%)}
.nfx-hero-body{position:relative;padding:30px 32px;max-width:640px}
.nfx-hero-title{font-family:var(--cond);font-weight:800;font-size:clamp(26px,3vw,40px);line-height:1.05;margin-top:8px}
.nfx-row-head{display:flex;align-items:center;gap:10px;margin:22px 0 10px;padding-right:4px}
.nfx-row-title{font-family:var(--cond);font-weight:700;font-size:17.5px;letter-spacing:.02em}
.rail-scroll.nfx{gap:11px;padding-bottom:14px}
.nfx-card{width:224px;flex-shrink:0;cursor:pointer}
.nfx-card .th{position:relative;border-radius:11px;overflow:hidden;aspect-ratio:16/9;background:#14141c;border:1px solid var(--line);transition:transform .18s,border-color .15s,box-shadow .18s}
.nfx-card:hover .th{transform:scale(1.045);border-color:var(--line2);box-shadow:var(--glow)}
.nfx-card .th img{width:100%;height:100%;object-fit:cover;display:block}
.nfx-card .noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff}
.nfx-num{position:absolute;left:8px;bottom:6px;font-family:var(--cond);font-weight:800;font-size:26px;line-height:1;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.85);opacity:.92}
.nfx-badge{position:absolute;top:8px;right:8px;background:rgba(11,11,15,.6);backdrop-filter:blur(4px);border-radius:8px;padding:3px 8px;font-size:10px;color:var(--amber);display:inline-flex;align-items:center;gap:4px}
.nfx-badge.done{color:var(--mint)}
.nfx-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(13,11,18,.35);opacity:0;transition:.15s}
.nfx-card:hover .nfx-play{opacity:1}
.nfx-t{font-size:12px;color:var(--md);margin-top:7px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============ CAPAS VERTICAIS (posters) ============ */
.poster{width:172px;height:256px;flex-shrink:0;border-radius:13px;position:relative;cursor:pointer;padding:15px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--line);overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .15s}
.poster:hover{transform:translateX(2px);border-color:var(--accent-solid)}
.poster::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,14,.82),transparent 52%)}
/* (o campo de pontos sobre a capa saiu pelo mesmo motivo do da tela de entrada) */
.p-title{font-family:var(--cond);font-weight:800;font-size:20px;line-height:1.05;position:relative;z-index:1}
.p-autor{font-size:11px;color:rgba(255,255,255,.88);position:relative;z-index:1;margin-top:4px}
.p-meta{font-size:10.5px;color:rgba(255,255,255,.68);margin-top:6px;position:relative;z-index:1}
.p-badge{position:absolute;top:10px;right:10px;z-index:2}
.p-bar{height:4px;border-radius:0;background:var(--bg3);margin-top:10px;position:relative;z-index:1;overflow:hidden}
/* o preenchimento vem como <span> em alguns lugares e <i> em outros — os dois valem */
.p-bar>span,.p-bar>i{display:block;height:100%;background:var(--accent-solid);border-radius:0}
.pill.gold{background:transparent;color:var(--gold);border-color:rgba(242,194,75,.45)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#0B0B0F}
.btn.gold:hover{background:transparent;color:var(--gold)}
.nav-item.gold{color:var(--gold)}
.nav-item.gold .ic{color:var(--gold)}

/* ============ PÁGINA DA SÉRIE ============ */
.serie-hero{border-radius:18px;border:1px solid var(--line);overflow:hidden;position:relative;margin-bottom:6px}
.serie-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,11,18,.55),rgba(13,11,18,.15))}
.sh-body{position:relative;padding:30px 32px;max-width:660px}
.sh-title{font-family:var(--cond);font-weight:800;font-size:clamp(30px,3.4vw,46px);line-height:1;margin-top:12px}
.sh-autor{font-size:14px;color:rgba(255,255,255,.9);margin-top:6px}
.sh-desc{font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.65;margin-top:10px}
.ep-row{display:flex;gap:16px;align-items:center;padding:11px 14px;border:1px solid var(--line);border-radius:13px;margin-bottom:9px;cursor:pointer;transition:.13s;background:var(--bg1)}
.ep-row:hover{border-color:var(--line2);background:var(--bg2);transform:translateX(3px)}
.ep-num{font-family:var(--cond);font-weight:800;font-size:21px;color:var(--lo);width:28px;text-align:center;flex-shrink:0}
.ep-row .eth{width:148px;aspect-ratio:16/9;border-radius:9px;overflow:hidden;flex-shrink:0;background:#14141c}
.ep-row .eth img{width:100%;height:100%;object-fit:cover;display:block}
.ep-row .eth .noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff}
.ep-t{font-family:var(--cond);font-weight:700;font-size:16.5px;line-height:1.2}

/* ============ PÁGINA DA AULA ============ */
.aula-player{position:relative;padding-top:46%;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--line)}
.aula-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.aula-player.noimg{display:flex;align-items:center;justify-content:center;padding-top:0;min-height:320px}
.stars{display:flex;gap:8px}
.star-btn{background:none;border:0;cursor:pointer;color:var(--lo);transition:.12s;padding:2px}
.star-btn.on{color:var(--gold)}
.star-btn:hover{transform:scale(1.2);color:var(--gold)}
.cmt{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.cmt:last-child{border-bottom:0}

/* ============ MISSÕES & LOJA — visual ============ */
.m-ico{width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.shop-art{height:86px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--hi);margin-bottom:13px;border:1px solid var(--line)}

/* ============ COMUNIDADE & VIP ============ */
.comm-banner{position:relative;border-radius:17px;padding:26px;overflow:hidden;border:1px solid var(--line);min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px}
.cb-ico{width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;color:#fff;margin-bottom:6px}
.vip-hero{text-align:center;padding:44px 20px 10px;border-radius:18px;border:1px solid rgba(242,194,75,.22);background:radial-gradient(60% 80% at 50% 0%,rgba(242,194,75,.13),transparent 70%),var(--bg1)}
.vip-hero .view-title{justify-content:center}

/* sede card */
.venue{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;transition:.14s;display:flex;flex-direction:column;gap:7px}
.venue:hover{border-color:var(--line2)}
.venue .vn{font-family:var(--cond);font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px}
.venue .vl{font-size:12px;color:var(--md)}
.venue .vo{font-size:11.5px;color:var(--lo)}
.venue .vrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.venue .vfoot{margin-top:auto;padding-top:10px;display:flex;gap:8px;align-items:center}

.empty{border:1px dashed var(--line2);border-radius:var(--r);padding:36px;text-align:center;color:var(--md);font-size:13px}
.divider{height:1px;background:var(--line);margin:26px 0}
.muted{color:var(--lo);font-size:12px}
.flex{display:flex;gap:10px;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}.mt16{margin-top:16px}.mt8{margin-top:8px}
.num{font-family:var(--cond);font-weight:800}

/* faixa de aviso do ambiente (ex.: modo demonstração sem persistência) */
.env-banner{display:flex;align-items:center;gap:9px;padding:9px 22px;font-size:12.5px;color:var(--amber);
  background:rgba(251,191,36,.10);border-bottom:1px solid rgba(251,191,36,.22)}
.env-banner b{color:var(--amber)}

/* ---- passe de batalha ---- */
/* mesma decisão do cartaz da home: canto reto, régua do acento no topo */
.pass-hero{position:relative;overflow:hidden;border:1px solid var(--line);padding:26px;margin-bottom:24px;
  background:var(--bg1);border-top:3px solid var(--accent-solid)}
/* (terceiro campo de pontos removido — ver nota na tela de entrada) */
.ph-head{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ph-tags{display:flex;gap:8px;flex-wrap:wrap}
.ph-body{position:relative;display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:18px}
.ph-nivel{display:flex;flex-direction:column}
.phn-lb{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lo)}
.phn-num{font-family:var(--cond);font-weight:800;font-size:64px;line-height:.95;margin-top:2px;
  background:var(--accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.phn-num em{font-style:normal;font-size:21px;-webkit-text-fill-color:var(--lo)}
.ph-prog{flex:1;min-width:270px}
.php-lbs{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--md);margin-bottom:9px}
.php-lbs b{color:var(--hi)}
.php-bar{height:12px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid var(--line);overflow:hidden}
.php-bar>i{display:block;height:100%;border-radius:9px;background:var(--accent-solid)}
.php-cta{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}

/* a trilha rola na horizontal; as etiquetas GRÁTIS/VIP ficam ancoradas à esquerda
   (sticky) para não se perderem do lado de fora quando a pessoa rola até o nível 30 */
/* sem scroll-behavior:smooth aqui: ele faz o navegador ignorar o scrollLeft que
   centraliza o nível atual na abertura da tela */
.pass-rail{--pass-node:44px;--pass-fama:16px;--pass-slot:122px;overflow-x:auto;padding-bottom:20px}
.pass-lanes{display:flex;min-width:min-content}
.pass-legend{position:sticky;left:0;z-index:3;display:flex;flex-direction:column;gap:8px;padding-right:14px;
  background:linear-gradient(90deg,var(--bg0) 68%,transparent)}
.pl-head{height:calc(var(--pass-node) + var(--pass-fama) + 8px)}
.pl-tag{height:var(--pass-slot);width:24px;display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;transform:rotate(180deg);border-right:2px solid var(--line);
  font-family:var(--cond);font-weight:800;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--lo)}
.pl-tag.vip{color:var(--gold);border-color:rgba(242,194,75,.4)}
.pass-cols{position:relative;display:flex;gap:10px}
.pass-line{position:absolute;left:0;right:0;top:calc(var(--pass-node) / 2 - 1px);height:2px;background:var(--line);z-index:0}
.pass-line>i{display:block;height:100%;background:var(--accent-solid)}
.pass-col{position:relative;z-index:1;flex:0 0 126px;display:flex;flex-direction:column;gap:8px;opacity:.45;transition:opacity var(--t)}
.pass-col.on,.pass-col.agora{opacity:1}
/* nó quadrado: chaveamento de campeonato, não bolha de trilha */
.pass-node{height:var(--pass-node);width:var(--pass-node);margin:0 auto;border-radius:2px;
  display:flex;align-items:center;justify-content:center;background:var(--bg1);border:1px solid var(--line2);
  font-family:var(--cond);font-weight:900;font-size:18px;color:var(--md);font-variant-numeric:tabular-nums}
.pass-col.on .pass-node{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--accent-ink)}
.pass-col.agora .pass-node{border:2px solid var(--accent-solid);color:var(--accent-solid);background:var(--bg0)}
.pass-fama{height:var(--pass-fama);line-height:var(--pass-fama);font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.1em;text-align:center;color:var(--lo);font-variant-numeric:tabular-nums}
.pass-slot{height:var(--pass-slot);background:var(--bg1);border:1px solid var(--line);border-radius:2px;padding:11px 9px;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:5px;text-align:center;transition:border-color var(--t)}
.pass-slot.vip{background:var(--bg1);border-color:rgba(242,194,75,.28)}
.pass-slot.vazio{justify-content:center;color:var(--lo);opacity:.35;border-style:dashed}
.pass-slot.pronto{border-color:var(--accent-solid);cursor:pointer}
.pass-slot.pronto:hover{background:var(--accent-dim)}
.pass-slot.pronto:hover{transform:translateY(-3px)}
.pass-slot.resgatado{border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.045)}
.pass-slot.travado{opacity:.6}
.ps-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--accent-solid);background:var(--accent-dim);flex-shrink:0}
.pass-slot.vip .ps-ico{color:var(--gold);background:rgba(242,194,75,.13)}
.pass-slot.resgatado .ps-ico{color:var(--mint);background:rgba(74,222,128,.13)}
.ps-nome{font-size:11px;font-weight:600;color:var(--md);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ps-valor{font-family:var(--cond);font-weight:800;font-size:15px;color:var(--hi);line-height:1}
.ps-ok{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--mint)}
.ps-lock{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--lo)}
.pass-aqui{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-solid)}

/* ---- perfil ---- */
.pt-id{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.pt-fama{min-width:198px}
/* pastilha clicável (equipar título/moldura) — mesma aparência da .pill estática */
button.pill{font-family:var(--font);border:0;cursor:pointer;transition:.14s}
button.pill:hover{background:rgba(255,255,255,.11);color:var(--hi)}
button.pill.ok{cursor:default}
.perfil-check{border-color:rgba(242,194,75,.26)}
/* linha de ranking que abre o perfil público */
.linha-perfil{cursor:pointer}
.linha-perfil:hover td{background:rgba(255,255,255,.035);color:var(--hi)}

/* ---- comunidade: convite, boss ---- */
.codigo-box{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;
  background:var(--bg2);border:1px dashed var(--line2);border-radius:12px;padding:14px 16px;
  font-family:var(--cond);font-weight:800;font-size:26px;letter-spacing:.12em;color:var(--hi);transition:.16s}
.codigo-box:hover{border-color:var(--accent-solid);color:var(--accent-solid)}
.boss-bar{height:14px;border-radius:9px;background:rgba(251,113,133,.14);overflow:hidden}
.boss-bar>i{display:block;height:100%;background:var(--rose)}

/* ============ TELAS ESTREITAS ============
   O layout nasceu para desktop: barra lateral fixa de 218px ao lado do conteúdo.
   Num celular de 375px isso deixaria 157px de conteúdo, então abaixo de 860px a
   barra vira gaveta (fora da tela, entra por cima) e o conteúdo ocupa tudo.

   Dois cortes, e o motivo de cada um:
     860px — onde a barra lateral + o conteúdo mínimo deixam de caber lado a lado
     560px — onde duas colunas de cartão ficam estreitas demais para ler
   O que já rola sozinho na horizontal (trilha do passe, carrosséis, tabelas) fica
   como está: rolar de lado dentro do próprio quadro é o comportamento certo ali. */

/* Base do que só aparece no mobile. Precisa vir ANTES das media queries: mesma
   especificidade, quem estiver por último vence — e com a base embaixo o botão da
   gaveta ficava escondido justamente onde ele é a única forma de abrir o menu. */
.nav-toggle{display:none;align-items:center;justify-content:center;width:36px;height:36px;
  margin-left:-4px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);
  color:var(--md);cursor:pointer;flex-shrink:0;transition:.14s}
.nav-toggle:hover{color:var(--hi);border-color:var(--line2)}
.side-lang{display:none;justify-content:center;gap:6px;padding:10px 0 2px}

@media (max-width: 860px) {
  /* ---- a barra lateral vira gaveta ---- */
  #sidebar{
    position:fixed;top:0;bottom:0;left:0;z-index:120;width:264px;
    transform:translateX(-100%);transition:transform .22s cubic-bezier(.22,1,.36,1);
    overflow-y:auto;box-shadow:0 0 60px rgba(0,0,0,.6)}
  body.nav-aberto #sidebar{transform:translateX(0)}
  /* o véu cobre o conteúdo e fecha a gaveta ao toque; sem ele, dá para clicar
     em coisas atrás do menu sem perceber */
  #shell::after{
    content:'';position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.55);
    opacity:0;pointer-events:none;transition:opacity .22s}
  body.nav-aberto #shell::after{opacity:1;pointer-events:auto}
  .nav-toggle{display:inline-flex}
  .side-lang{display:flex}
  /* itens maiores: no toque, alvo pequeno é alvo errado */
  #sidebar .nav-item{padding:12px 13px;font-size:14.5px}

  /* ---- topbar enxuta ---- */
  #topbar{padding:0 12px;gap:9px}
  .tb-world,.lvl-tag{display:none}          /* decorativo e redundante: o nível está no perfil */
  #topbar .lang-switch{display:none}        /* migra para o rodapé da gaveta */
  .tb-right{gap:7px}
  .viptag.cta span:not(.ic-svg){display:none}
  .wallet-chip{padding:6px 10px;font-size:13.5px}

  /* ---- conteúdo ---- */
  #view{padding:18px 14px 64px}
  .view-head{margin-bottom:18px}
  .view-title{font-size:26px}
  .view-sub{font-size:13px}
  .card{padding:16px}
  .g2,.g3,.g4{grid-template-columns:1fr 1fr}
  /* Algumas telas montam proporções próprias no atributo style (ranking 1.4fr 1fr 1fr,
     carteira 1.3fr 1fr, jam, jurado). Style inline ganha de qualquer folha, então aqui
     o !important é a única forma de alcançá-lo — e é o uso legítimo dele. Vira coluna
     única: em 375px, três colunas de fr não encolhem abaixo do conteúdo (a tabela
     dentro do cartão) e o cartão sai pela borda, cortado.
     minmax(0,…) e não 1fr pelo mesmo motivo: um fr sozinho respeita o tamanho natural
     do conteúdo, e a coluna da carteira ficava com 414px numa tela de 371px. */
  #view .grid[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  /* linhas de extrato/lista: deixam o texto quebrar em vez de esticar a linha */
  .tx{flex-wrap:wrap}
  .tx>*{min-width:0}
  .hero-banner{padding:22px 18px}
  .hero-banner .hb-title{font-size:27px}
  .hero-banner .hb-cta{flex-wrap:wrap}
  .stat-strip{overflow-x:auto}
  /* a régua da seção some e o subtítulo desce para a própria linha: em 375px não há
     largura para título + explicação + régua + "ver tudo" na mesma faixa */
  .sec::after{display:none}
  .sec .sx{flex-basis:100%;order:4}
  .sec .more{margin-left:auto}
  .stat .kv{font-size:30px}
  table.tb{font-size:12.5px}
  #toasts{left:12px;right:12px;bottom:12px}
  .toast{min-width:0;max-width:none}
  .modal{padding:20px 18px;max-height:92vh}

  /* ---- entrada: de duas colunas para uma ---- */
  #login-screen{overflow-y:auto}
  .login-screen-inner,#login-screen>div{min-height:0}
  .login-left{display:none}                 /* a arte come a tela inteira antes do formulário */
  .login-right{width:100%;padding:32px 22px;border-left:0}
}

@media (max-width: 560px) {
  .g2,.g3,.g4{grid-template-columns:1fr}
  .view-title{font-size:23px}
  .spread{flex-wrap:wrap}
  .stat-strip>*{min-width:50%}              /* duas métricas por linha, não seis apertadas */
  .cover{width:170px}
  .hero-banner .hb-title{font-size:24px}
  .pass-rail{--pass-slot:104px}
  .pass-col{flex-basis:108px}
}


/* ============ AGRUPADORES (Jornada e Comunidade) ============
   Cinco entradas de menu viraram duas telas com abas. O cabeçalho de cada tela interna
   é escondido aqui: quem dá o título agora é o agrupador, e dois títulos empilhados
   seriam ruído. */
.abas{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:24px}
.aba{
  font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 16px;background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--lo);cursor:pointer;transition:var(--t);margin-bottom:-1px}
.aba:hover{color:var(--hi)}
.aba.ativa{color:var(--accent-solid);border-bottom-color:var(--accent-solid)}
.aba-corpo .view-head{display:none}
.aba-corpo .sec:first-child{margin-top:0}

/* ---- destaque do Aprender: o vídeo abre tocando, de borda a borda ----
   Margem negativa que anula o padding do #view: o quadro encosta nas laterais e no topo,
   como abertura de canal. A altura é limitada por vh porque 16/9 em tela larga empurraria
   todo o catálogo para baixo da dobra. */
.destaque{margin:-34px -36px 28px}
/* Largura mandando, altura obedecendo. Com aspect-ratio + max-height o navegador faz o
   contrário: encolhe a largura para manter a proporção, e o quadro descolava 134px da
   borda direita. Aqui a largura é sempre 100% e a altura fica no clamp. */
.palco{position:relative;width:100%;height:clamp(220px,46vh,560px);background:#000;
  border-bottom:1px solid var(--line);overflow:hidden;container-type:size}

/* O iframe COBRE o quadro em vez de caber nele. Esticar para 100%x100% não resolvia:
   o YouTube preserva 16/9 por dentro e devolve as barras pretas. Então o iframe é
   dimensionado sempre 16/9 e sempre maior que o palco, com o excedente cortado.
   As unidades cqw/cqh medem o palco, não a janela, que é o que importa aqui: a barra
   lateral ocupa 218px e a viewport mentiria sobre a largura disponível. */
.palco iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100cqw, calc(100cqh * 16 / 9));
  height:max(100cqh, calc(100cqw * 9 / 16));
  border:0;display:block;
  pointer-events:none;   /* clique não pausa nem abre o YouTube: é abertura, não player */
}

/* único controle sobre o vídeo, discreto, no canto */
.palco-som{
  position:absolute;right:14px;bottom:14px;z-index:2;
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.28);border-radius:3px;cursor:pointer;
  background:rgba(8,8,10,.55);color:#F5F3F7;transition:var(--t);backdrop-filter:blur(3px)}
.palco-som:hover{background:rgba(8,8,10,.8);border-color:#fff}
.palco-som.ativo{border-color:var(--accent-solid);color:var(--accent-solid)}
.palco-vazio{display:flex;align-items:center;justify-content:center;background:var(--bg1)}
.destaque-titulo{font-family:var(--cond);font-weight:800;font-size:clamp(24px,2.6vw,34px);line-height:1.05;margin:8px 0 8px}
/* rótulo pequeno reutilizável (substitui o antigo eyebrow em blocos internos) */
.rot{font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lo)}

/* ---- materiais: o que não é aula mas ensina ---- */
.material{display:block;color:inherit}
.material:hover h3{color:var(--accent-solid)}
.material-ico{display:inline-flex;color:var(--accent-solid);margin-bottom:10px}

/* ---- agenda ---- */
.agenda-mes{font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lo);padding:14px 0 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.agenda-item{display:flex;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.agenda-item:last-child{border-bottom:0}
.agenda-item.passado{opacity:.5}
.agenda-data{width:52px;flex-shrink:0;text-align:center;border-right:1px solid var(--line);padding-right:12px}
.agenda-data b{display:block;font-family:var(--cond);font-weight:900;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.agenda-data span{font-family:var(--cond);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lo)}
.agenda-txt{flex:1;min-width:0}
.agenda-nome{font-family:var(--cond);font-weight:800;font-size:15px;line-height:1.2}
.agenda-acao{flex-shrink:0}

@media (max-width:860px){
  .destaque{margin:-18px -14px 20px}   /* acompanha o padding menor do #view no celular */
  .palco{height:auto;aspect-ratio:16/9}  /* em retrato a tela é estreita: 16/9 já é baixo */
  .agenda-item{flex-wrap:wrap;gap:10px}
  .agenda-acao{width:100%}
  .aba{padding:10px 12px;font-size:11.5px}
}

/* ============ SELETOR DE MUNDO ============
   O topo da barra deixa de ser uma assinatura e vira controle: mostra onde você está e
   troca de produto. Fica claro que é clicável pela seta e pelo estado de hover, sem
   precisar de instrução. */
.mundo-topo{position:relative;margin-bottom:14px}
.mundo-btn{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;
  background:transparent;border:1px solid transparent;border-radius:3px;cursor:pointer;
  color:var(--hi);font-family:var(--cond);font-weight:900;font-size:17px;letter-spacing:-.01em;
  text-align:left;transition:var(--t)}
.mundo-btn:hover{background:var(--bg2);border-color:var(--line)}
.mundo-marca{height:26px;width:26px;object-fit:contain;flex-shrink:0}
.mundo-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mundo-seta{display:inline-flex;color:var(--lo);transform:rotate(90deg);transition:transform var(--t)}
.mundo-menu.aberto ~ .mundo-btn .mundo-seta,.mundo-btn[aria-expanded="true"] .mundo-seta{transform:rotate(-90deg)}

.mundo-menu{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;
  background:var(--bg2);border:1px solid var(--line2);border-radius:3px;padding:4px;
  box-shadow:var(--sombra);
  display:none}
.mundo-menu.aberto{display:block}
.mundo-op{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;text-align:left;
  background:transparent;border:0;border-radius:2px;cursor:pointer;color:var(--md);
  font-family:var(--font);transition:var(--t)}
.mundo-op:hover{background:var(--bg3);color:var(--hi)}
.mundo-op-ic{display:inline-flex;flex-shrink:0}
.mundo-op b{display:block;font-family:var(--cond);font-weight:800;font-size:14.5px;color:var(--hi);letter-spacing:-.01em}
.mundo-op i{display:block;font-style:normal;font-size:11px;color:var(--lo);margin-top:1px;line-height:1.3}
/* cada opção acende na cor do próprio mundo, então a troca é reconhecível antes do clique */
.mundo-op[data-mundo="hub"]:hover .mundo-op-ic{color:#E8368F}
.mundo-op[data-mundo="jam"]:hover .mundo-op-ic{color:#F7941D}
.mundo-op[data-mundo="jobs"]:hover .mundo-op-ic{color:#A45BE8}

/* ============ MEU MENU (atalhos escolhidos) ============ */
.nav-editar{color:var(--lo);border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.nav-editar:hover{color:var(--accent-solid)}
.atalho{display:flex;align-items:center;gap:12px;cursor:pointer}
.atalho h3{font-size:16px}
.atalho-ico{display:inline-flex;color:var(--accent-solid);flex-shrink:0}

/* convite do estado vazio: a área nasce em branco de propósito, então ela precisa
   explicar o que é e oferecer a ação, em vez de mostrar um vácuo */
.vazio-convite{border:1px dashed var(--line2);border-radius:var(--r);padding:44px 28px;text-align:center;max-width:560px}
.vazio-convite .vazio-ico{color:var(--lo);margin-bottom:12px}
.vazio-convite h3{font-family:var(--cond);font-weight:800;font-size:20px;margin-bottom:6px}
.vazio-convite p{margin:0 auto;max-width:44ch}

/* escolha dos atalhos */
.escolha{max-height:46vh;overflow-y:auto;margin-top:16px;padding-right:4px}
.escolha-grupo{font-family:var(--cond);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lo);padding:14px 0 6px;border-bottom:1px solid var(--line);margin-bottom:6px}
.escolha-item{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:2px;cursor:pointer;transition:var(--t);font-size:13.5px}
.escolha-item:hover{background:var(--bg2)}
.escolha-item input{accent-color:var(--accent-solid);width:15px;height:15px;cursor:pointer;flex-shrink:0}
.escolha-item input:disabled{cursor:not-allowed}
.escolha-item:has(input:disabled){opacity:.4}
.escolha-ico{display:inline-flex;color:var(--lo);flex-shrink:0}
.escolha-item:has(input:checked) .escolha-ico{color:var(--accent-solid)}


/* ---- seletor: as areas agrupadas pela marca dona ---- */
.mundo-marca-tit{font-family:var(--cond);font-size:8.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lo);padding:10px 10px 5px;border-top:1px solid var(--line);margin-top:4px}
.mundo-menu > .mundo-marca-tit:first-child{border-top:0;margin-top:0;padding-top:6px}
.mundo-sep{height:1px;background:var(--line);margin:6px 0}
/* chip de Fama no lugar do de Plus Coins: ouro, porque Fama e conquista */
.wallet-chip.fama{color:var(--gold);border-color:rgba(242,194,75,.4)}
.wallet-chip.fama .sym{color:var(--gold)}


/* ============ HERO LAB — sequência, campanha, clãs e troféus ============
   Três telas novas com um mesmo princípio: número grande e chapado onde há placar,
   superfície sólida onde há estado, e nenhuma peça que brilhe para parecer clicável.
   A cor só entra quando significa algo — ouro é conquista, acento é o alvo da vez,
   cinza é o que ainda está trancado. */

/* .hint existia só dentro de .field, mas as telas usam solto o tempo todo. */
.hint{font-size:11.5px;color:var(--lo);line-height:1.5}
.pill.vazio{color:var(--lo);border-color:var(--line);padding:4px 6px}

/* ---- barra de sequência: o número que multiplica todo o resto ---- */
.seq{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:18px;
  background:var(--bg1);border:1px solid var(--line);border-radius:var(--r)}
.seq-chama{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;
  border:1px solid var(--line2);border-radius:var(--r);color:var(--lo)}
/* aceso = a diária de hoje já contou. É o único estado que muda a cor do ícone. */
.seq-chama.aceso{color:var(--gold);border-color:rgba(242,194,75,.45);background:rgba(242,194,75,.07)}
.seq-txt{flex:1;min-width:0}
.seq-dias{font-family:var(--cond);font-size:19px;font-weight:800;letter-spacing:.01em;color:var(--hi)}
.seq-mult{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;text-align:right}
.seq-mult b{font-family:var(--cond);font-size:26px;font-weight:800;color:var(--md);line-height:1}
.seq-mult.ativo b{color:var(--gold)}
.seq-mult span{font-family:var(--cond);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lo)}

/* ---- faixa de placar reaproveitada por campanha, clãs e conquistas ---- */
.campanha-topo{display:flex;flex-wrap:wrap;gap:34px;padding:16px 18px;margin-bottom:22px;
  background:var(--bg1);border:1px solid var(--line);border-radius:var(--r)}
.campanha-topo > div{min-width:110px}
.campanha-topo .num{color:var(--hi);line-height:1.05;font-variant-numeric:tabular-nums}
.campanha-topo .num .cs{font-size:16px;color:var(--lo);font-weight:700}

/* ---- a escada: um degrau por monstro, de cima para baixo ---- */
.escada{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg1);overflow:hidden}
.degrau{display:flex;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);transition:var(--t)}
.escada > .degrau:last-child{border-bottom:0}
.degrau-n{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;
  font-family:var(--cond);font-size:15px;font-weight:800;color:var(--lo);
  border:1px solid var(--line2);border-radius:var(--r)}
.degrau-corpo{flex:1;min-width:0}
.degrau-corpo b{font-size:15px;color:var(--hi)}
/* Derrotado sai de cena sem sumir: continua legível, mas para de disputar atenção. */
.degrau.caiu{opacity:.5}
.degrau.caiu .degrau-n{color:var(--mint);border-color:rgba(74,222,128,.45)}
.degrau.caiu .degrau-corpo b{text-decoration:line-through;text-decoration-thickness:1px}
/* Alvo é o único degrau com cor de acento — é onde o dano da turma está caindo agora. */
.degrau.alvo{background:var(--bg2);border-left:0}
.degrau.alvo .degrau-n{color:var(--accent-solid);border-color:var(--accent-solid)}
.degrau.trancado .degrau-n{color:var(--lo);border-style:dashed}
.degrau.trancado .degrau-corpo b{color:var(--md)}
.degrau-premio{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--gold)}
/* O prêmio do que está trancado aparece, mas ilegível: dá vontade sem entregar. */
.degrau-premio.borrado{color:var(--lo);filter:blur(3px);user-select:none}
/* O boss fica num quadro próprio, acima da escada: ele não é o degrau seguinte, é o fim. */
.escada.boss-topo{border-color:var(--line2);background:var(--bg2)}
.escada.boss-topo .degrau{padding:18px}
.escada.boss-topo .degrau-corpo b{font-family:var(--cond);font-size:24px;font-weight:800;letter-spacing:.01em}
.escada.boss-topo .degrau.alvo .degrau-n{color:var(--gold);border-color:rgba(242,194,75,.5)}

/* ---- clãs ---- */
.cla-convite{padding:14px 16px;margin-bottom:16px;border:1px dashed var(--line2);border-radius:var(--r)}
.cla-convite b{font-size:14px;color:var(--hi)}
.cla-card{padding:18px;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);
  border-top:2px solid var(--cla);display:flex;flex-direction:column}
.cla-card.meu{background:var(--bg2);border-color:var(--line2)}
.cla-topo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cla-marca{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;
  color:var(--cla);border:1px solid var(--cla);border-radius:var(--r)}
.cla-topo b{font-family:var(--cond);font-size:20px;font-weight:800;color:var(--hi);display:block}
.cla-num{display:flex;gap:26px;margin-top:auto}
.cla-num b{display:block;font-family:var(--cond);font-size:30px;font-weight:800;color:var(--hi);
  line-height:1.1;font-variant-numeric:tabular-nums}
.cla-num span{font-family:var(--cond);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lo)}
.disputa-linha{display:flex;align-items:center;gap:14px;padding:9px 0;font-size:13px}
.disputa-linha > span:first-child{width:120px;flex-shrink:0;font-family:var(--cond);font-weight:700;
  font-size:15px;letter-spacing:.02em}
.disputa-linha b{width:52px;text-align:right;font-variant-numeric:tabular-nums}
.disputa-barra{flex:1;height:8px;background:var(--bg3);overflow:hidden;border-radius:1px}
.disputa-barra > i{display:block;height:100%;transition:width var(--t)}

/* ---- sala de troféus ---- */
.trofeu{padding:16px;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);text-align:center}
.trofeu-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  margin-bottom:10px;color:var(--lo);border:1px solid var(--line2);border-radius:50%}
.trofeu b{display:block;font-size:14px;color:var(--md);margin-bottom:4px}
/* Ganho é ouro e nada mais: sem brilho, sem fundo, sem selo. */
.trofeu.ganho{border-color:rgba(242,194,75,.35)}
.trofeu.ganho .trofeu-ic{color:var(--gold);border-color:rgba(242,194,75,.5)}
.trofeu.ganho b{color:var(--hi)}
.trofeu .p-bar{margin-top:10px}

@media (max-width:560px){
  .campanha-topo{gap:20px 26px;padding:14px}
  .campanha-topo .num{font-size:26px !important}
  .seq{padding:12px}
  .seq-mult b{font-size:22px}
  .degrau{padding:12px 13px;gap:11px}
  .cla-num{gap:18px}
  .disputa-linha > span:first-child{width:88px;font-size:13.5px}
}

/* ---- missão do período: o cartaz que abre a tela de missões ---- */
.miss-hoje{padding:20px;margin-bottom:20px;background:var(--bg1);border:1px solid var(--line);
  border-radius:var(--r);border-top:2px solid var(--accent-solid)}
.miss-hoje.feita{border-top-color:var(--mint);opacity:.75}
.miss-hoje-tit{font-family:var(--cond);font-size:30px;font-weight:800;letter-spacing:.01em;
  line-height:1.08;color:var(--hi);margin:6px 0 6px}
.miss-hoje .mrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:560px){ .miss-hoje{padding:16px} .miss-hoje-tit{font-size:24px} }


/* ============ HERO ACADEMY — aulões, ebooks, oferta e certificado ============
   Mesma gramática do Lab: superfície sólida, raio 4, um acento. O que muda é o papel do
   ouro — aqui ele marca o que está atrás da assinatura, e só isso. */

/* ---- seção anunciada e ainda sem conteúdo ---- */
.em-breve{padding:34px;border:1px dashed var(--line2);border-radius:var(--r);text-align:center}
.em-breve p{margin-top:12px;color:var(--md);font-size:14px;max-width:52ch;margin-left:auto;margin-right:auto;line-height:1.6}

/* ---- aulões: peça solta, numerada, e o número é o único enfeite ---- */
.aulao{display:flex;gap:13px;padding:15px;background:var(--bg1);border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;transition:var(--t)}
.aulao:hover{border-color:var(--accent-solid)}
.aulao.visto{opacity:.6}
.aulao-n{font-family:var(--cond);font-size:22px;font-weight:800;color:var(--lo);line-height:1;flex-shrink:0;
  min-width:30px;font-variant-numeric:tabular-nums}
.aulao:hover .aulao-n{color:var(--accent-solid)}
.aulao-corpo{min-width:0;flex:1}
.aulao-corpo b{display:block;font-size:14.5px;color:var(--hi);line-height:1.3}
.aulao .mrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---- ebooks ---- */
.ebook{display:flex;gap:15px;padding:16px;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r)}
.ebook.trancado .ebook-capa{color:var(--lo)}
.ebook-capa{display:flex;align-items:center;justify-content:center;width:64px;height:88px;flex-shrink:0;
  color:var(--accent-solid);border:1px solid var(--line2);border-radius:2px;background:var(--bg2)}
.ebook-corpo{min-width:0;flex:1;display:flex;flex-direction:column}
.ebook-corpo b{font-size:15px;color:var(--hi)}
.ebook .mrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.ebook .btn[disabled]{opacity:.4;cursor:not-allowed}

/* ---- Academy Plus: a página de venda ---- */
.plus-ativo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;margin-bottom:20px;
  background:var(--bg1);border:1px solid var(--line);border-top:2px solid var(--mint);border-radius:var(--r)}
/* O gatilho da ordem de serviço: "você concluiu 3 cursos, assine e emita agora". O número
   grande é o argumento — o texto só explica o que ele quer dizer. */
.plus-gatilho{padding:22px;margin-bottom:24px;background:var(--bg1);border:1px solid var(--line);
  border-top:2px solid var(--gold);border-radius:var(--r)}
.plus-gatilho .num{color:var(--gold);line-height:.95;font-variant-numeric:tabular-nums}
.plus-gatilho b{font-size:17px;color:var(--hi)}
.plus-lista{display:flex;flex-wrap:wrap;gap:8px}
.plus-lista span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;font-size:12px;
  color:var(--md);border:1px solid var(--line);border-radius:2px}
.benef{display:flex;align-items:flex-start;gap:13px;padding:15px;background:var(--bg1);
  border:1px solid var(--line);border-radius:var(--r)}
.benef b{font-size:14.5px;color:var(--hi)}
.benef-n{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;
  font-family:var(--cond);font-size:14px;font-weight:800;color:var(--accent-ink);
  background:var(--accent-solid);border-radius:2px}
.benef-ic{margin-left:auto;color:var(--lo);flex-shrink:0}
.preco{padding:18px;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column}
.preco.destaque{border-color:var(--line2);background:var(--bg2)}
.preco-v{font-family:var(--cond);font-size:32px;font-weight:800;color:var(--hi);line-height:1.1;margin:6px 0 2px}
.preco .btn{margin-top:auto}

/* ---- certificado ---- */
.cert{display:flex;align-items:center;gap:15px;padding:16px;margin-bottom:10px;
  background:var(--bg1);border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:var(--r)}
.cert.pendente{border-left-color:var(--line2)}
.cert-selo{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;
  color:var(--gold);border:1px solid rgba(242,194,75,.4);border-radius:50%}
.cert.pendente .cert-selo{color:var(--lo);border-color:var(--line2)}
.cert-corpo{min-width:0;flex:1}
.cert-corpo b{display:block;font-size:15px;color:var(--hi)}
/* O código é para ser lido em voz alta e digitado: monoespaçado e espaçado de propósito. */
.cert-cod{margin-top:6px;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:13px;
  letter-spacing:.14em;color:var(--gold)}
.cert-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}

@media (max-width:560px){
  .ebook-capa{width:48px;height:66px}
  .cert{flex-wrap:wrap}
  .cert-acoes{width:100%}
  .preco-v{font-size:27px}
  .em-breve{padding:24px 16px}
}


/* ============ ETAPA 7 — resposta, som e movimento ============
   A ordem de serviço abre com o aviso que rege tudo aqui: "não encha a tela de brilho
   neon nem de animação lenta. O que a gente quer é peso e resposta, não festa."
   Então: nada de glow (o sistema já o eliminou), nada acima de 1,5s, e nenhuma cor
   fora da paleta da marca. Cada regra abaixo responde a um evento real do servidor. */

/* Número que sobe e some: o +XX da Fama e o -XX do dano. `pointer-events:none` é o que
   impede o efeito de roubar um clique enquanto passa por cima do botão. */
.fx-sobe{position:fixed;z-index:120;pointer-events:none;font-family:var(--cond);
  font-size:20px;font-weight:800;letter-spacing:.02em;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.fx-particula{position:fixed;z-index:119;pointer-events:none;width:6px;height:6px;border-radius:50%}

/* Boss derrotado: a única animação de tela cheia, e a única longa (1,5s). Ela pode —
   derrubar o boss é o fim de uma temporada inteira de trabalho coletivo. */
.fx-boss{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,10,.92);opacity:1;transition:opacity .4s;padding:24px}
.fx-boss-caixa{max-width:520px;text-align:center;animation:fx-boss-entra .5s cubic-bezier(.2,.7,.3,1)}
.fx-boss-nome{font-family:var(--cond);font-size:clamp(38px,9vw,72px);font-weight:800;line-height:1;
  margin:10px 0 16px;background:var(--grad-ih);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-boss-premio{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;font-size:14px;
  color:var(--gold);border:1px solid rgba(242,194,75,.45);border-radius:var(--r)}
@keyframes fx-boss-entra{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}

/* Check da missão concluída: o traço se desenha sobre o cartão. */
.mission,.miss-hoje{position:relative}
.fx-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--mint);background:rgba(8,8,10,.72);border-radius:var(--r);pointer-events:none}

/* Toast de conquista: maior que o normal, com a medalha girando uma vez. */
.toast.conquista{padding:16px 18px;border-left:2px solid var(--gold);transition:opacity .4s}
.toast.conquista .rot{margin-bottom:2px}
.fx-medalha{color:var(--gold);animation:fx-gira .7s cubic-bezier(.3,.8,.3,1)}
@keyframes fx-gira{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}

/* Linha do ranking que subiu: um brilho atravessa uma vez, e para. */
.linha-perfil.subiu{position:relative;background:rgba(242,194,75,.06)}
.linha-perfil.subiu::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(242,194,75,.22),transparent 70%);
  animation:fx-brilho .9s ease-out 1}
@keyframes fx-brilho{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Botão de mudo: mesma família dos outros controles da topbar. */
.som-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  color:var(--lo);background:transparent;border:1px solid var(--line);border-radius:2px;
  cursor:pointer;transition:var(--t)}
.som-btn:hover{color:var(--hi);border-color:var(--line2)}
.som-btn.ligado{color:var(--accent-solid);border-color:var(--accent-solid)}

/* ============ TUTORIAL DA TELA ============================================
   O botão herda o desenho do som (mesma família de controle da topbar). O ponto marca
   tela ainda não percorrida: sem ele, ou o tutorial abre sozinho na cara de quem já sabe,
   ou ninguém descobre que existe. */
.tut-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  position:relative;color:var(--lo);background:transparent;border:1px solid var(--line);
  border-radius:2px;cursor:pointer;transition:var(--t)}
.tut-btn:hover{color:var(--hi);border-color:var(--line2)}
.tut-btn:active{transform:translateY(1px)}
.tut-btn.novo{color:var(--accent-solid);border-color:var(--accent-solid)}
.tut-btn.novo::after{content:'';position:absolute;top:-3px;right:-3px;width:6px;height:6px;
  border-radius:50%;background:var(--accent-solid)}

/* O véu é a sombra do recorte, não um retângulo por cima: assim o alvo fica ACESO no lugar
   onde ele está, sem cópia nem clone que sai do lugar quando a página rola. */
.tut{position:fixed;inset:0;z-index:230}
.tut-furo{position:fixed;border-radius:var(--r);pointer-events:none;
  border:1px solid var(--accent-solid);
  box-shadow:0 0 0 9999px rgba(6,6,9,.76);
  transition:top var(--t),left var(--t),width var(--t),height var(--t)}
.tut-balao{position:fixed;width:min(340px,calc(100vw - 24px));padding:16px 18px 14px;
  background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:0 12px 34px rgba(0,0,0,.5)}
.tut-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.tut-passo{font-family:var(--cond);font-weight:700;font-size:10px;letter-spacing:.2em;
  color:var(--accent-solid);font-variant-numeric:tabular-nums}
.tut-x{background:none;border:0;color:var(--lo);cursor:pointer;padding:2px;line-height:0;
  transition:var(--t)}
.tut-x:hover{color:var(--hi)}
.tut-tit{font-family:var(--cond);font-weight:800;font-size:19px;letter-spacing:.01em;
  color:var(--hi);margin:0 0 6px;line-height:1.15}
.tut-txt{color:var(--md);font-size:13.5px;line-height:1.55;margin:0}
.tut-pontos{display:flex;gap:5px;margin:14px 0 12px}
.tut-ponto{width:5px;height:5px;border-radius:50%;background:var(--line2);transition:var(--t)}
.tut-ponto.ativo{background:var(--accent-solid);width:14px;border-radius:3px}
.tut-pe{display:flex;gap:8px;justify-content:flex-end}
.tut-pe .btn{padding:8px 14px}

@media (prefers-reduced-motion:reduce){
  .tut-furo{transition:none}
}
@media(max-width:560px){
  .tut-balao{width:calc(100vw - 20px)}
}

/* Barra de HP e placar acompanham a animação em vez de saltar para o valor novo. */
.boss-bar>i,.disputa-barra>i{transition:width .38s cubic-bezier(.2,.7,.3,1)}
.degrau-premio{transition:filter var(--t),color var(--t)}

/* Quem pede menos estímulo recebe menos estímulo. As transições de opacidade ficam:
   elas informam sem sacudir. O JS já corta partícula, tremor e giro (ver fx.js);
   isto aqui cobre o que é puramente CSS. */
@media (prefers-reduced-motion:reduce){
  .fx-boss-caixa,.fx-medalha,.linha-perfil.subiu::after{animation:none}
  .boss-bar>i,.disputa-barra>i{transition:none}
}


/* ============ ONBOARDING — o momento, não a tela ============
   Sem barra lateral e sem topbar de propósito: quem acabou de criar a conta ainda não
   tem o que navegar. Uma pergunta por vez, botão grande embaixo, e o gradiente da marca
   num canto só — sutil, como a ordem de serviço pede. */

body.ob-aberto{overflow:hidden}
/* O shell sai do caminho de verdade, não só some atrás de um fundo opaco: com ele visível
   o Tab levava o foco para um menu que a pessoa nem sabe que existe ainda. */
body.ob-aberto #shell{display:none}
.ob{position:fixed;inset:0;z-index:180;display:flex;flex-direction:column;background:var(--bg0);
  background-image:radial-gradient(120% 90% at 100% 0%, rgba(232,54,143,.10), transparent 58%),
                   radial-gradient(90% 80% at 0% 100%, rgba(155,77,219,.08), transparent 60%)}
/* A cor do clã toma a tela por meio segundo quando a pessoa escolhe. */
.ob.ob-flash::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--ob-flash);animation:ob-flash .5s ease-out forwards}
@keyframes ob-flash{from{opacity:.30}to{opacity:0}}

.ob-barra{height:3px;background:var(--bg2);flex-shrink:0}
.ob-barra>i{display:block;height:100%;background:var(--grad-ih);transition:width .32s cubic-bezier(.2,.7,.3,1)}

.ob-corpo{flex:1;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:720px;margin:0 auto;padding:40px 24px}
.ob-vem-dir{animation:ob-dir .18s ease-out}
.ob-vem-esq{animation:ob-esq .18s ease-out}
@keyframes ob-dir{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes ob-esq{from{transform:translateX(-40px);opacity:0}to{transform:translateX(0);opacity:1}}

.ob-h1{font-family:var(--cond);font-size:clamp(32px,6vw,52px);font-weight:800;line-height:1.05;
  color:var(--hi);letter-spacing:.01em}
.ob-h1 span{background:var(--grad-ih);-webkit-background-clip:text;background-clip:text;color:transparent}
.ob-sub{margin-top:12px;color:var(--md);font-size:15px;line-height:1.6;max-width:52ch}
.ob-impacto .rot{margin-bottom:14px}

/* Opções: cartão clicável, borda que acende no acento. Nada de rádio nativo — o alvo de
   toque tem que ser a linha inteira. */
.ob-opcoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.ob-op{display:inline-flex;align-items:center;gap:9px;padding:13px 17px;font-size:14.5px;
  color:var(--md);background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);
  cursor:pointer;transition:var(--t);font-family:var(--font);text-align:left}
.ob-op:hover{color:var(--hi);border-color:var(--line2)}
.ob-op.sel{color:var(--accent-solid);border-color:var(--accent-solid);background:var(--accent-dim)}

.ob-lugar{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}

/* A tela do clã é a mais caprichada: dois cartões grandes, cada um na cor do clã. */
.ob-clas{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.ob-cla{padding:26px 22px;text-align:center;background:var(--bg1);border:1px solid var(--line);
  border-top:3px solid var(--cla);border-radius:var(--r);cursor:pointer;transition:var(--t)}
.ob-cla:hover{background:var(--bg2)}
.ob-cla.sel{border-color:var(--cla);background:var(--bg2)}
.ob-cla-marca{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;
  margin-bottom:14px;color:var(--cla);border:1px solid var(--cla);border-radius:50%}
.ob-cla b{display:block;font-family:var(--cond);font-size:24px;font-weight:800;color:var(--hi)}

.ob-pe{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0;
  width:100%;max-width:720px;margin:0 auto;padding:18px 24px 30px}
.ob-grande{padding:14px 30px;font-size:14px}
.ob-grande[disabled]{opacity:.35;cursor:not-allowed}
/* "terminar depois" é discreto de propósito: existe para quem precisa, não para tentar. */
.ob-adiar{background:none;border:0;color:var(--lo);font-size:12.5px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;font-family:var(--font)}
.ob-adiar:hover{color:var(--md)}

/* Tela 7: os itens entram em cascata, um a cada 120ms. */
.ob-casc{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
.ob-casc.mostra{opacity:1;transform:translateY(0)}
.ob-item{display:flex;align-items:center;gap:13px;padding:14px 16px;margin-top:10px;cursor:pointer;
  background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);transition:var(--t)}
.ob-item:hover{border-color:var(--line2);background:var(--bg2)}
.ob-item.destaque{border-left:2px solid var(--gold)}
.ob-item b{font-size:15px;color:var(--hi)}
.ob-item-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;
  color:var(--accent-solid);border:1px solid var(--line2);border-radius:var(--r)}

@media (max-width:560px){
  .ob-corpo{padding:26px 16px}
  .ob-pe{padding:14px 16px 22px}
  .ob-lugar,.ob-clas{grid-template-columns:1fr}
  .ob-cla{padding:20px 16px}
  .ob-cla-marca{width:50px;height:50px;margin-bottom:10px}
  .ob-grande{padding:13px 22px}
}
@media (prefers-reduced-motion:reduce){
  .ob-vem-dir,.ob-vem-esq,.ob.ob-flash::after{animation:none}
  .ob-barra>i,.ob-casc{transition:none}
}


/* ============ JAMMER e FELLOW ============ */

/* Cronograma explicado: número, nome, período e o que acontece na etapa. */
.etapas{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--bg1);overflow:hidden}
.etapa{display:flex;gap:14px;padding:15px 16px;border-bottom:1px solid var(--line)}
.etapas > .etapa:last-child{border-bottom:0}
.etapa.agora{background:var(--bg2)}
.etapa-n{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;
  font-family:var(--cond);font-size:14px;font-weight:800;color:var(--lo);
  border:1px solid var(--line2);border-radius:var(--r)}
.etapa.agora .etapa-n{color:var(--accent-solid);border-color:var(--accent-solid)}
.etapa-corpo{flex:1;min-width:0}
.etapa-corpo b{font-size:15px;color:var(--hi)}

/* Agenda só da jam: data à esquerda, estado à direita. */
.agenda-jam{border:1px solid var(--line);border-radius:var(--r);background:var(--bg1);overflow:hidden}
.aj-linha{display:flex;align-items:center;gap:16px;padding:15px 16px;border-bottom:1px solid var(--line)}
.agenda-jam > .aj-linha:last-child{border-bottom:0}
.aj-linha.passou{opacity:.5}
.aj-linha.agora{background:var(--bg2);border-left:2px solid var(--accent-solid)}
.aj-data{display:flex;flex-direction:column;width:96px;flex-shrink:0;font-family:var(--cond);
  font-size:17px;font-weight:800;color:var(--hi);line-height:1.15}
.aj-data span{font-size:11px;font-weight:600;color:var(--lo);letter-spacing:.04em}
.aj-corpo{flex:1;min-width:0}
.aj-corpo b{font-size:15px;color:var(--hi)}
.aj-estado{flex-shrink:0}

/* As outras jams: a principal é a única clicável, e a borda diz isso. */
.jam-card{border-top:2px solid var(--jc)}
.jam-card.principal{cursor:pointer}
.jam-card.principal:hover{border-color:var(--line2);background:var(--bg2)}

/* ---- Fellow ---- */
.fellow-porta{padding:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg1)}
.fellow-porta h2{font-family:var(--cond);font-size:32px;font-weight:800;color:var(--hi);margin:8px 0 10px}
.fellow-porta p{color:var(--md);font-size:14.5px;line-height:1.65;max-width:70ch}
.fellow-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;
  margin-bottom:10px;color:var(--accent-solid);border:1px solid var(--line2);border-radius:var(--r)}

/* A comparação com as outras sedes é o ponto do painel do organizador: um número
   sozinho não diz se 40% é bom. As duas barras vivem juntas por isso. */
.comparacao{padding:14px;background:var(--bg2);border-radius:var(--r)}
.comp-linha{display:flex;align-items:center;gap:14px;padding:7px 0;font-size:13px}
.comp-linha > span:first-child{width:180px;flex-shrink:0;color:var(--md)}
.comp-linha b{width:48px;text-align:right;font-variant-numeric:tabular-nums;color:var(--hi)}
.comp-linha.media > span:first-child,.comp-linha.media b{color:var(--lo)}
.comp-barra{flex:1;height:8px;background:var(--bg3);border-radius:1px;overflow:hidden}
.comp-barra > i{display:block;height:100%;background:var(--md);transition:width .38s cubic-bezier(.2,.7,.3,1)}
.comp-barra > i.bom{background:var(--mint)}
.comp-linha.media .comp-barra > i{background:var(--line2)}

.fp-item{display:flex;align-items:flex-start;gap:14px}
.fp-item.alcancado{border-color:rgba(242,194,75,.35)}
.fp-item b{font-size:14.5px;color:var(--hi)}

@media (max-width:560px){
  .aj-data{width:72px;font-size:15px}
  .comp-linha > span:first-child{width:120px;font-size:12.5px}
  .fellow-porta{padding:18px}
  .fellow-porta h2{font-size:25px}
}


/* ============ GAMEJAMPLUS — a edição em degraus ============
   A tela deixou de ser um retângulo atrás do outro. A capa tem profundidade, a trilha do
   cronograma tem eixo, e cada degrau do percurso (sede → equipe → Discord) se anuncia. */

.jam-capa{position:relative;overflow:hidden;padding:38px 34px;margin-bottom:26px;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(115deg,#12080B 0%,#0B0A12 46%,#08080A 100%)}
/* A luz é o único "efeito" da capa, e ela é cor de marca em movimento lento, não glow. */
.jam-capa-luz{position:absolute;inset:-40% -10% auto auto;width:520px;height:520px;pointer-events:none;
  background:radial-gradient(circle, rgba(247,148,29,.20), transparent 62%);
  animation:jam-respira 9s ease-in-out infinite}
@keyframes jam-respira{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.12) translate(-3%,4%)}}
.jam-capa-txt{position:relative}

/* A linha de identificação da edição: nome à esquerda, tema como etiqueta.
   O tema era o maior tipo da tela e não dizia nada sozinho; aqui ele continua legível
   e passa a vir com rótulo, que é o que faltava para a palavra fazer sentido. */
.jam-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.jam-tema-chip{display:inline-flex;align-items:center;gap:7px;padding:3px 9px;
  font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-solid);border-radius:2px;
  border:1px solid color-mix(in srgb, var(--accent-solid) 42%, transparent)}
.jam-tema-chip i{font-style:normal;color:var(--lo);letter-spacing:.16em}

/* A contagem. Mesma gramática do placar abaixo (número manda, unidade legenda), então a
   capa lê como um sistema só em vez de dois blocos que por acaso dividem a caixa. */
.jam-conta-rot{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lo);margin-bottom:8px}
.jam-conta{display:flex;gap:26px;margin-bottom:18px}
.jam-conta > div{display:flex;flex-direction:column}
.jam-conta b{font-family:var(--cond);font-weight:800;font-size:clamp(44px,7vw,76px);line-height:.88;
  letter-spacing:-.01em;color:var(--hi);font-variant-numeric:tabular-nums}
/* só a unidade que corre fica no acento do mundo: a cor marca o que está vivo */
.jam-conta > div:last-child b{color:var(--accent-solid)}
.jam-conta span{font-family:var(--cond);font-weight:700;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lo);margin-top:5px}
/* prazo vencido: no lugar do relógio zerado, a etapa em curso */
.jam-agora{font-family:var(--cond);font-weight:800;font-size:clamp(38px,6.5vw,66px);line-height:.95;
  letter-spacing:-.01em;color:var(--hi);margin-bottom:16px}

.jam-capa-txt p{color:var(--md);font-size:15px;max-width:60ch;line-height:1.6}
.jam-nums{display:flex;flex-wrap:wrap;gap:34px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.jam-nums b{display:block;font-family:var(--cond);font-size:30px;font-weight:800;color:var(--hi);
  line-height:1;font-variant-numeric:tabular-nums}
.jam-nums span{font-family:var(--cond);font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lo)}

/* Trilha do cronograma: eixo vertical com marcas, em vez de seis caixas iguais. */
.trilha{position:relative;padding-left:8px}
.trilha-etapa{position:relative;display:flex;gap:16px;padding:0 0 22px 26px}
/* a linha do eixo nasce da marca e vai até a próxima */
.trilha-etapa::before{content:'';position:absolute;left:11px;top:24px;bottom:0;width:1px;background:var(--line)}
.trilha-etapa:last-child::before{display:none}
.trilha-etapa:last-child{padding-bottom:0}
.trilha-marca{position:absolute;left:0;top:1px;display:flex;align-items:center;justify-content:center;
  width:23px;height:23px;font-family:var(--cond);font-size:12px;font-weight:800;color:var(--lo);
  background:var(--bg0);border:1px solid var(--line2);border-radius:50%}
.trilha-etapa.passou .trilha-marca{color:var(--mint);border-color:rgba(74,222,128,.5)}
.trilha-etapa.passou{opacity:.6}
.trilha-etapa.agora .trilha-marca{background:var(--accent-solid);border-color:var(--accent-solid);
  box-shadow:0 0 0 4px var(--accent-dim)}
.trilha-etapa.agora .trilha-corpo b{color:var(--accent-solid)}
.trilha-corpo{flex:1;min-width:0;padding-bottom:2px}
.trilha-corpo b{font-size:16px;color:var(--hi)}
.trilha-data{font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lo);white-space:nowrap}

/* Degraus do percurso */
.jam-sede-minha{display:flex;align-items:center;gap:15px;flex-wrap:wrap;padding:18px;
  background:var(--bg1);border:1px solid var(--line);border-left:2px solid var(--mint);border-radius:var(--r)}
.jsm-ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex-shrink:0;
  color:var(--mint);border:1px solid rgba(74,222,128,.4);border-radius:var(--r)}
.jam-sede-minha b{font-size:17px;color:var(--hi)}
.passo-travado{opacity:.75}
.passo-aviso{display:flex;align-items:center;gap:12px;padding:20px;color:var(--md);font-size:14px;
  border:1px dashed var(--line2);border-radius:var(--r)}
.passo-aviso svg{color:var(--lo);flex-shrink:0}

.jam-discord{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:22px;
  background:linear-gradient(100deg,rgba(88,101,242,.10),transparent 60%),var(--bg1);
  border:1px solid var(--line);border-left:2px solid #5865F2;border-radius:var(--r)}
.jam-discord .jd-ico{display:flex;align-items:center;justify-content:center;width:54px;height:54px;flex-shrink:0;
  color:#fff;background:#5865F2;border-radius:var(--r)}
.jam-discord b{font-size:17px;color:var(--hi)}
.jam-discord .btn{margin-left:auto}

.vip-vem-ai{border-style:dashed}

@media (max-width:560px){
  .jam-capa{padding:24px 18px}
  .jam-nums{gap:20px}
  .jam-nums b{font-size:24px}
  .jam-conta{gap:16px}
  .jam-conta b{font-size:clamp(34px,11vw,46px)}
  .jam-discord .btn{margin-left:0;width:100%}
}


/* ============ HERO ACADEMY — gramática de streaming, escola de verdade ==============
   A referência pedida é Netflix, e ela entra inteira: cartaz vertical, trilho horizontal,
   scrim, hover que expande. O que NÃO entra é o pressuposto dela — catálogo sem ordem,
   feito para navegar. Escola tem ordem e tem progresso, e é isso que o cartaz mostra em
   primeiro plano: onde você parou. Por isso o primeiro trilho é sempre o seu próximo
   passo, e não o lançamento da casa. */

/* ---- trilho ---- */
.rail{position:relative;margin-bottom:34px}
.rail-topo{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.rail-tit{font-family:var(--cond);font-size:19px;font-weight:800;letter-spacing:.01em;color:var(--hi)}
.rail-sub{font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lo)}
.rail-n{margin-left:auto;font-size:11.5px;color:var(--lo)}
.rail-pista{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 14px;
  scroll-snap-type:x proximity;scrollbar-width:none}
.rail-pista::-webkit-scrollbar{display:none}
/* o corte na borda direita é o que diz "tem mais" sem precisar de seta */
.rail::after{content:'';position:absolute;right:0;top:34px;bottom:14px;width:56px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bg0))}

/* ---- cartaz 2:3: serve para série e para livro, e é isso que faz a biblioteca
        parecer parte do mesmo catálogo em vez de outra seção ---- */
.pz{position:relative;flex:0 0 auto;width:172px;scroll-snap-align:start;cursor:pointer;
  transition:transform var(--t)}
.pz:hover,.pz:focus-visible{transform:translateY(-4px)}
.pz-arte{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:var(--bg2)}
.pz:hover .pz-arte{border-color:var(--accent-solid)}
.pz-arte img{width:100%;height:100%;object-fit:cover;display:block}
/* Sem imagem, capa tipográfica: o título ocupa o cartaz. Nada de monograma em gradiente. */
.pz-tipo{display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:14px;
  font-family:var(--cond);font-weight:800;font-size:22px;line-height:1.02;color:#fff;
  letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.pz-scrim{position:absolute;inset:auto 0 0;height:62%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(8,8,10,.86))}
.pz-badge{position:absolute;top:9px;left:9px;z-index:2}
.pz-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:0;transition:opacity var(--t)}
.pz:hover .pz-play{opacity:1}
.pz-play span{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  background:rgba(8,8,10,.72);border:1px solid rgba(255,255,255,.35);border-radius:50%}
/* A fita de progresso é a assinatura do cartaz: numa escola ela vale mais que a arte. */
.pz-fita{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16)}
.pz-fita>i{display:block;height:100%;background:var(--accent-solid)}
.pz.feito .pz-arte{border-color:rgba(74,222,128,.45)}
.pz.feito .pz-fita>i{background:var(--mint)}
.pz-meta{padding-top:9px}
.pz-nome{font-size:13.5px;color:var(--hi);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pz-sub{margin-top:2px;font-size:11.5px;color:var(--lo)}

/* ---- o próximo passo: o primeiro trilho tem cartão grande e horizontal ---- */
.passo-cartao{display:flex;gap:0;overflow:hidden;background:var(--bg1);
  border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:var(--t)}
.passo-cartao:hover{border-color:var(--accent-solid)}
.passo-arte{position:relative;flex:0 0 232px;aspect-ratio:16/10;overflow:hidden;background:var(--bg2)}
.passo-arte img{width:100%;height:100%;object-fit:cover}
.passo-arte::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 40%,var(--bg1))}
.passo-corpo{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:20px 24px}
.passo-ep{font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-solid)}
.passo-tit{font-family:var(--cond);font-size:clamp(24px,3.4vw,34px);font-weight:800;line-height:1.05;
  color:var(--hi);margin:5px 0 8px}
.passo-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;align-self:flex-start}

/* ---- aulão: peça solta, então miniatura 16:9 (a gramática de vídeo avulso) ---- */
.au{flex:0 0 auto;width:264px;scroll-snap-align:start;cursor:pointer;transition:transform var(--t)}
.au:hover{transform:translateY(-4px)}
.au-arte{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:var(--bg2)}
.au:hover .au-arte{border-color:var(--accent-solid)}
.au-arte img{width:100%;height:100%;object-fit:cover;display:block}
.au-dur{position:absolute;right:7px;bottom:7px;padding:2px 6px;font-family:var(--cond);font-size:11px;
  font-weight:700;color:#fff;background:rgba(8,8,10,.82);border-radius:2px}
.au-n{position:absolute;left:8px;top:6px;font-family:var(--cond);font-size:30px;font-weight:800;
  color:rgba(255,255,255,.85);text-shadow:0 2px 10px rgba(0,0,0,.7);line-height:1}
.au-nome{margin-top:9px;font-size:13.5px;color:var(--hi);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.au-quem{margin-top:2px;font-size:11.5px;color:var(--lo)}

/* ---- em breve: painel largo com fundo, não caixa tracejada ---- */
.teaser{position:relative;overflow:hidden;padding:52px 40px;border:1px solid var(--line);
  border-radius:var(--r);background:linear-gradient(120deg,#140A18 0%,#0A0910 55%,#08080A 100%)}
.teaser::after{content:'';position:absolute;inset:auto -10% -60% auto;width:460px;height:460px;
  pointer-events:none;background:radial-gradient(circle,rgba(232,54,143,.16),transparent 62%)}
.teaser-txt{position:relative;max-width:56ch}
.teaser h2{font-family:var(--cond);font-size:clamp(30px,5vw,52px);font-weight:800;line-height:1.02;
  color:var(--hi);margin:12px 0 12px}
.teaser p{color:var(--md);font-size:15px;line-height:1.65}

/* ---- Academy Plus ---- */
.plus-capa{position:relative;overflow:hidden;padding:44px 40px;margin-bottom:30px;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(115deg,#16110A 0%,#0B0A10 52%,#08080A 100%);
  display:flex;gap:40px;align-items:center;flex-wrap:wrap}
.plus-capa-txt{flex:1;min-width:300px}
.plus-capa h1{font-family:var(--cond);font-size:clamp(34px,5.4vw,60px);font-weight:800;line-height:1.02;
  color:var(--hi);margin:10px 0 14px}
.plus-capa h1 b{color:var(--gold);font-weight:800}
.plus-capa p{color:var(--md);font-size:15.5px;line-height:1.65;max-width:52ch}
/* O certificado com o nome de quem está lendo. É o único benefício que sai daqui, e um
   documento com o SEU nome não se confunde com a lista de benefícios de ninguém. */
.cert-obj{flex:0 0 300px;position:relative;padding:24px 22px;background:#0E0D14;
  border:1px solid rgba(242,194,75,.35);border-radius:2px;
  transform:rotate(-2.2deg);box-shadow:0 22px 44px -20px rgba(0,0,0,.9)}
.cert-obj::before{content:'';position:absolute;inset:7px;border:1px solid rgba(242,194,75,.18);border-radius:1px}
.cert-obj-rot{position:relative;font-family:var(--cond);font-size:8.5px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.cert-obj-nome{position:relative;font-family:var(--cond);font-size:26px;font-weight:800;
  color:var(--hi);line-height:1.1;margin:10px 0 4px}
.cert-obj-linha{position:relative;font-size:11.5px;color:var(--md)}
.cert-obj-cod{position:relative;margin-top:14px;padding-top:10px;border-top:1px solid rgba(242,194,75,.2);
  font-family:ui-monospace,Consolas,monospace;font-size:10.5px;letter-spacing:.14em;color:var(--gold)}

/* Benefícios: o certificado é o primeiro e o maior. Cinco caixas iguais diriam que os
   cinco pesam o mesmo, e não pesam. */
.ben-lista{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ben{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;background:var(--bg1)}
.ben:first-child{padding:26px 20px;background:linear-gradient(100deg,rgba(242,194,75,.06),transparent 62%),var(--bg1)}
.ben:first-child .ben-tit{font-size:20px}
.ben-num{font-family:var(--cond);font-size:13px;font-weight:800;color:var(--lo);
  min-width:22px;padding-top:3px;font-variant-numeric:tabular-nums}
.ben:first-child .ben-num{color:var(--gold)}
.ben-tit{font-family:var(--cond);font-size:17px;font-weight:800;color:var(--hi);line-height:1.15}
.ben-txt{margin-top:3px;color:var(--md);font-size:13.5px;line-height:1.55}

/* Planos: duas moedas x dois ciclos. A grade diz isso; quatro cartões iguais não diriam. */
.planos{display:grid;grid-template-columns:auto 1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pl-cel{padding:18px 20px;background:var(--bg1)}
.pl-cab{font-family:var(--cond);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lo);background:var(--bg2)}
.pl-cel.destaque{background:linear-gradient(120deg,rgba(242,194,75,.07),transparent 70%),var(--bg1)}
.pl-v{font-family:var(--cond);font-size:30px;font-weight:800;color:var(--hi);line-height:1.05}
.pl-cel.destaque .pl-v{color:var(--gold)}
.pl-nota{font-size:11.5px;color:var(--lo);margin-top:2px}
.pl-cel .btn{margin-top:14px;width:100%}

@media (max-width:860px){
  .planos{grid-template-columns:1fr}
  .pl-cab{display:none}
  .passo-arte{flex-basis:150px}
}
@media (max-width:560px){
  .pz{width:136px}
  .au{width:216px}
  .teaser{padding:30px 20px}
  .plus-capa{padding:26px 20px;gap:26px}
  .cert-obj{flex-basis:100%;transform:none}
  .passo-cartao{flex-direction:column}
  .passo-arte{flex-basis:auto;width:100%;aspect-ratio:16/7}
  .passo-arte::after{background:linear-gradient(180deg,transparent 30%,var(--bg1))}
  .passo-corpo{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .pz:hover,.au:hover{transform:none}
}


/* ============ CLÃS — o VS ============================================================
   Dois lados do mundo dividindo o quadro, com uma fenda no meio onde eles colidem. O LADO
   é o botão: não existe "entrar" embaixo, porque um botão pequeno embaixo de uma imagem
   grande diz que a imagem é ilustração. Aqui ela é a escolha. */

.vs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  height:clamp(340px,52vh,520px);overflow:hidden;border:1px solid var(--line);border-radius:var(--r)}

.vs-lado{position:relative;overflow:hidden;cursor:pointer;isolation:isolate;
  transition:flex var(--t),filter 180ms ease}
.vs-lado:focus-visible{outline:2px solid var(--accent-solid);outline-offset:-4px}
.vs-arte{position:absolute;inset:0}
.vs-arte img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 420ms cubic-bezier(.2,.7,.3,1)}
/* Sem a arte escolhida, o lado é um campo da cor do clã com relevo — não um cinza vazio.
   A imagem real entra exatamente neste espaço, sem tocar no resto. */
.vs-fallback{position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 50% 110%, color-mix(in srgb, var(--cla) 55%, transparent), transparent 70%),
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.022) 26px 27px),
    linear-gradient(160deg, color-mix(in srgb, var(--cla) 26%, #08080A), #08080A 78%)}
/* o véu escurece por padrão e abre no hover: é o "acender o lado" */
.vs-veu{position:absolute;inset:0;background:rgba(8,8,10,.55);transition:background 180ms ease}
.vs-lado:hover .vs-veu,.vs-lado:focus-visible .vs-veu{background:rgba(8,8,10,.26)}
.vs-lado:hover .vs-arte img{transform:scale(1.04)}
/* a borda interna acende na cor do clã ao passar por cima */
.vs-lado::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 0 2px var(--cla);transition:opacity 180ms ease}
.vs-lado:hover::after,.vs-lado:focus-visible::after,.vs-lado.meu::after{opacity:1}

.vs-txt{position:absolute;inset:auto 0 0;z-index:2;padding:22px 22px 20px;pointer-events:none}
.vs-lado.dir .vs-txt{text-align:right}
.vs-nome{font-family:var(--cond);font-size:clamp(26px,3.6vw,42px);font-weight:800;line-height:1;
  color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.75)}
.vs-lema{margin-top:4px;font-size:13px;color:rgba(255,255,255,.72)}
/* o parágrafo fica pequeno e embaixo, sobre a imagem — como pedido */
.vs-resumo{margin-top:10px;max-width:44ch;font-size:11.5px;line-height:1.5;
  color:rgba(255,255,255,.62)}
.vs-lado.dir .vs-resumo{margin-left:auto}

/* A fenda: onde os dois lados colidem. Ela pulsa devagar — é o único movimento da tela,
   e ele existe para dizer que os lados estão em tensão, não parados lado a lado. */
.vs-fenda{position:absolute;left:50%;top:0;bottom:0;width:2px;z-index:3;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.5) 20%,rgba(255,255,255,.5) 80%,transparent);
  pointer-events:none}
.vs-fenda>i{position:absolute;left:50%;top:0;bottom:0;width:26px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  animation:vs-pulsa 2.6s ease-in-out infinite}
@keyframes vs-pulsa{0%,100%{opacity:.35;width:20px}50%{opacity:.9;width:38px}}

.vs-cta{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;pointer-events:none;
  padding:16px 26px;background:rgba(8,8,10,.72);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  backdrop-filter:blur(2px)}
.vs-cta-rot{font-family:var(--cond);font-size:9.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.vs-cta-tit{font-family:var(--cond);font-size:clamp(20px,2.6vw,30px);font-weight:800;color:#fff;line-height:1.1}
.vs-cta-sub{margin-top:4px;font-size:11.5px;color:var(--gold)}

.cla-mini{padding:14px 16px;border:1px solid var(--line);border-top:2px solid var(--cla);border-radius:var(--r)}
.cla-mini-n b{font-family:var(--cond);font-size:28px;font-weight:800;color:var(--hi);line-height:1.1}
.cla-mini-n span{margin-left:6px;font-family:var(--cond);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lo)}

/* confirmação */
.cla-confirma{text-align:center}
.cla-confirma h2 span{color:var(--cla)}
.cla-confirma-marca{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  margin-bottom:12px;color:var(--cla);border:1px solid var(--cla);border-radius:50%}
.cla-confirma-regra{display:flex;gap:12px;text-align:left;padding:14px 16px;margin-top:18px;
  background:var(--bg2);border-radius:var(--r)}
.cla-confirma-regra svg{color:var(--gold);flex-shrink:0;margin-top:2px}
.cla-confirma-regra b{font-size:14px;color:var(--hi)}
.cla-confirma-bonus{display:flex;gap:8px;justify-content:center;margin-top:14px}

@media (max-width:700px){
  .vs{grid-template-columns:1fr;height:auto}
  .vs-lado{height:230px}
  .vs-lado.dir .vs-txt{text-align:left}
  .vs-lado.dir .vs-resumo{margin-left:0}
  .vs-fenda{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;transform:translateY(-50%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 20%,rgba(255,255,255,.5) 80%,transparent)}
  .vs-fenda>i{left:0;right:0;top:50%;bottom:auto;width:auto;height:26px;transform:translateY(-50%);
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.10),transparent);animation:none}
}
@media (prefers-reduced-motion:reduce){
  .vs-fenda>i{animation:none}
  .vs-lado:hover .vs-arte img{transform:none}
}


/* ============ CONQUISTAS — medalha, não caixa ========================================
   A raridade vem do ALVO da conquista: quanto mais difícil, mais rara. Isso não é enfeite,
   é informação — a cor diz de longe o que custa mais. E é por isso que a medalha ganhou
   camadas (disco, anel, brilho) em vez de um contorno fino: uma conquista lendária não
   pode parecer igual à de concluir a primeira missão. */

.trofeus{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.tf{position:relative;padding:22px 16px 18px;text-align:center;overflow:hidden;
  background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);transition:var(--t)}
.tf.ganho{border-color:color-mix(in srgb, var(--raro) 45%, var(--line))}
.tf.ganho::before{content:'';position:absolute;inset:-40% -30% auto;height:150px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--raro) 22%, transparent), transparent 70%)}
.tf:hover{border-color:var(--raro)}

/* a medalha */
.tf-med{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:76px;height:76px;margin-bottom:12px}
.tf-disco{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 210deg, color-mix(in srgb, var(--raro) 85%, #fff 0%), color-mix(in srgb, var(--raro) 35%, #08080A) 55%, color-mix(in srgb, var(--raro) 80%, #08080A));
  mask:radial-gradient(circle, transparent 56%, #000 57%)}
.tf-anel{position:absolute;inset:9px;border-radius:50%;border:1px solid color-mix(in srgb, var(--raro) 55%, transparent)}
.tf-glifo{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;color:var(--raro);
  background:radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--raro) 24%, #12121a), #0d0d13)}
/* trancada: a mesma medalha, sem cor. A silhueta continua contando o que é. */
.tf:not(.ganho) .tf-disco{filter:grayscale(1) brightness(.45)}
.tf:not(.ganho) .tf-anel{border-color:var(--line2)}
.tf:not(.ganho) .tf-glifo{color:var(--lo);background:#101016}
.tf-fita{position:absolute;top:10px;right:10px;font-family:var(--cond);font-size:8.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--raro)}
.tf:not(.ganho) .tf-fita{color:var(--lo)}
.tf b{display:block;font-family:var(--cond);font-size:16px;font-weight:800;color:var(--hi);line-height:1.15}
.tf:not(.ganho) b{color:var(--md)}
.tf .cs{margin-top:4px;min-height:32px}
.tf .p-bar{margin-top:10px}
.tf-feito{margin-top:5px;font-size:11px;color:var(--lo);font-variant-numeric:tabular-nums}


/* ============ MISSÕES — gamificação com peso ========================================
   A referência enviada tem o que faltava: ícone com cor, dificuldade legível de relance,
   recompensa em destaque e progresso visível. O que NÃO copiamos é o brilho — o sistema
   já decidiu que profundidade vem de superfície e linha. */

.mission{position:relative;display:flex;flex-direction:column;padding:18px;
  background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);transition:var(--t)}
.mission:hover{border-color:var(--linha-cat, var(--line2))}
.mission.feita{opacity:.62}
/* a faixa da categoria no topo é o que dá cor à grade sem pintar o cartão inteiro */
.mission::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--linha-cat, var(--line2));border-radius:var(--r) var(--r) 0 0}
.m-med{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;
  color:var(--linha-cat,var(--accent-solid));border-radius:var(--r);
  background:radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--linha-cat,var(--accent-solid)) 26%, #12121a), #0e0e14);
  border:1px solid color-mix(in srgb, var(--linha-cat,var(--accent-solid)) 40%, transparent)}
.m-dif{display:inline-flex;align-items:center;gap:4px}
.m-dif i{width:6px;height:6px;border-radius:50%;background:var(--line2);display:block}
.m-dif i.on{background:var(--linha-cat,var(--accent-solid))}
.m-recompensa{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  font-family:var(--cond);font-size:14px;font-weight:800;color:var(--gold);
  border:1px solid rgba(242,194,75,.4);border-radius:2px}
.m-rodape{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:14px}

/* a sequência ganhou os degraus até o próximo multiplicador */
.seq-passos{display:flex;gap:5px;margin-top:7px}
.seq-passos i{width:16px;height:4px;border-radius:1px;background:var(--bg3);display:block}
.seq-passos i.on{background:var(--gold)}

@media (max-width:560px){
  .trofeus{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .tf-med{width:62px;height:62px}
  .tf-glifo{width:38px;height:38px}
}


/* ============ BLOCO 4 — Test Lab, Vantagens, Comunidade e Ranking ==================== */

/* ---- TEST LAB: o jogo é o produto, então ele ocupa o cartão ---- */
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.tl{position:relative;overflow:hidden;background:var(--bg1);border:1px solid var(--line);
  border-radius:var(--r);display:flex;flex-direction:column;transition:var(--t)}
.tl:hover{border-color:var(--accent-solid)}
.tl.indisponivel{opacity:.5}
.tl-arte{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg2)}
.tl-arte img{width:100%;height:100%;object-fit:cover;display:block}
.tl-arte .noimg{width:100%;height:100%}
.tl-selo{position:absolute;top:9px;left:9px;z-index:2}
.tl-vagas{position:absolute;right:9px;bottom:9px;z-index:2;padding:3px 8px;font-family:var(--cond);
  font-size:11px;font-weight:700;color:#fff;background:rgba(8,8,10,.82);border-radius:2px}
.tl-corpo{padding:15px 16px;display:flex;flex-direction:column;flex:1}
.tl-nome{font-family:var(--cond);font-size:19px;font-weight:800;color:var(--hi);line-height:1.12}
.tl-quem{margin-top:2px;font-size:11.5px;color:var(--lo)}
.tl-desc{margin-top:8px;font-size:13px;color:var(--md);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tl-pe{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.tl-pe .btn{margin-left:auto}

/* O botão de jogar é o mais importante da tela: sem jogar não existe relatório.
   Ele é grande, tem cor cheia e diz para onde vai. */
.jogar{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:16px 20px;margin-bottom:16px;font-family:var(--cond);font-size:17px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);
  background:var(--accent-solid);border:0;border-radius:var(--r);cursor:pointer;
  text-decoration:none;transition:var(--t)}
.jogar:hover{filter:brightness(1.08)}
.jogar small{font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.02em;
  text-transform:none;opacity:.75}
.tl-perguntas{padding:14px 16px;background:var(--bg2);border-left:2px solid var(--accent-solid);border-radius:var(--r)}
.tl-perguntas li{margin-top:5px}
.pergunta-linha{display:flex;gap:8px;margin-bottom:8px}
.pergunta-linha .input{flex:1}

/* ---- CLUBE DE VANTAGENS: cartão de parceiro com faixa de cor e desconto em destaque ---- */
.vant-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.vant{position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);transition:var(--t)}
.vant:hover{border-color:var(--vc,var(--accent-solid));transform:translateY(-3px)}
.vant-topo{position:relative;height:104px;overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb, var(--vc) 60%, #08080A), #0c0c12)}
.vant-topo img{width:100%;height:100%;object-fit:cover}
.vant-cat{position:absolute;left:10px;top:10px;font-family:var(--cond);font-size:9px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;padding:3px 8px;
  background:rgba(8,8,10,.6);border-radius:2px}
.vant-ic{position:absolute;right:12px;bottom:-16px;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:var(--vc);background:var(--bg1);border:1px solid var(--line2);border-radius:50%}
.vant-corpo{padding:16px;display:flex;flex-direction:column;flex:1}
.vant-corpo h3{font-family:var(--cond);font-size:17px;font-weight:800;color:var(--hi);line-height:1.15;
  padding-right:40px}
.vant-corpo .cs{margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vant-pe{margin-top:auto;padding-top:14px}
.vant-pe .btn{width:100%}

/* ---- COMUNIDADE: dois painéis grandes, cada um com a cor da própria rede ---- */
.espacos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.espaco{position:relative;overflow:hidden;padding:30px 28px;min-height:230px;
  display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(150deg, color-mix(in srgb, var(--rede) 22%, #0b0b11), #08080A 72%);
  transition:var(--t)}
.espaco:hover{border-color:var(--rede)}
.espaco::after{content:'';position:absolute;inset:auto -20% -55% auto;width:300px;height:300px;
  pointer-events:none;background:radial-gradient(circle, color-mix(in srgb, var(--rede) 30%, transparent), transparent 66%)}
.espaco-ic{position:relative;display:flex;align-items:center;justify-content:center;width:60px;height:60px;
  margin-bottom:auto;color:#fff;background:var(--rede);border-radius:var(--r)}
.espaco h3{position:relative;font-family:var(--cond);font-size:30px;font-weight:800;color:var(--hi);
  line-height:1.05;margin-top:18px}
.espaco p{position:relative;margin-top:8px;color:var(--md);font-size:14px;line-height:1.55;max-width:40ch}
.espaco-pe{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.espaco-pe .btn{background:var(--rede);border-color:var(--rede);color:#fff}
.espaco-pe .btn:hover{filter:brightness(1.1)}

/* ---- RANKING: pódio em cima, tabela embaixo, sua linha marcada ---- */
.podio{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:12px;align-items:end;margin-bottom:26px}
.pd{position:relative;overflow:hidden;padding:20px 16px 18px;text-align:center;
  background:var(--bg1);border:1px solid var(--line);border-radius:var(--r)}
.pd.p1{border-color:rgba(242,194,75,.5);padding-top:30px;padding-bottom:26px}
.pd.p1::before{content:'';position:absolute;inset:-60% -20% auto;height:170px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%, rgba(242,194,75,.18), transparent 70%)}
.pd-pos{position:relative;font-family:var(--cond);font-size:13px;font-weight:800;letter-spacing:.16em;
  color:var(--lo)}
.pd.p1 .pd-pos{color:var(--gold)}
.pd-av{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;margin:10px 0 8px;border-radius:50%;
  font-family:var(--cond);font-size:22px;font-weight:800;color:#08080A}
.pd.p1 .pd-av{width:70px;height:70px;font-size:27px;box-shadow:0 0 0 2px rgba(242,194,75,.45)}
.pd-nome{position:relative;font-family:var(--cond);font-size:17px;font-weight:800;color:var(--hi);
  line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-fama{position:relative;margin-top:4px;font-family:var(--cond);font-size:24px;font-weight:800;
  color:var(--gold);font-variant-numeric:tabular-nums}
.pd.p1 .pd-fama{font-size:32px}
.pd-liga{position:relative;margin-top:8px}

.rk{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg1)}
.rk-linha{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:var(--t)}
.rk > .rk-linha:last-child{border-bottom:0}
.rk-linha:hover{background:var(--bg2)}
.rk-linha.eu{background:linear-gradient(90deg, var(--accent-dim), transparent 60%);
  border-left:2px solid var(--accent-solid)}
.rk-pos{width:38px;flex-shrink:0;font-family:var(--cond);font-size:20px;font-weight:800;color:var(--lo);
  font-variant-numeric:tabular-nums;text-align:right}
.rk-linha.eu .rk-pos{color:var(--accent-solid)}
.rk-av{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--cond);font-size:13px;font-weight:800;color:#08080A}
.rk-nome{flex:1;min-width:0;font-size:14px;color:var(--hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-tit{font-size:11.5px;color:var(--lo)}
.rk-fama{font-family:var(--cond);font-size:18px;font-weight:800;color:var(--hi);
  font-variant-numeric:tabular-nums}
.rk-fama span{font-size:10px;color:var(--lo);margin-left:3px}

@media (max-width:860px){
  .espacos{grid-template-columns:1fr}
  .podio{grid-template-columns:1fr;align-items:stretch}
  .pd.p1{order:-1}
}
@media (max-width:560px){
  .espaco{padding:22px 18px;min-height:0}
  .espaco h3{font-size:24px}
  .rk-linha{gap:10px;padding:11px 12px}
  .rk-pos{width:28px;font-size:17px}
  .jogar{font-size:15px;padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){ .vant:hover{transform:none} }


/* ============ BLOCO 5 — menu com pastas, convite de plano e Fellow de teste ========= */

/* ---- pastas na barra lateral ---- */
.nav-pasta{padding:16px 14px 6px;font-family:var(--cond);font-size:9px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--lo)}
.nav-pasta:first-child{padding-top:4px}

/* ---- editor do menu: pastas à esquerda, destinos à direita ---- */
.menu-editor{display:grid;grid-template-columns:216px 1fr;gap:16px;margin-top:18px}
.me-pastas{border-right:1px solid var(--line);padding-right:16px}
.me-pasta{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:6px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);transition:var(--t)}
.me-pasta:hover{border-color:var(--line2)}
.me-pasta.ativa{border-color:var(--accent-solid);background:var(--accent-dim)}
.me-nome{flex:1;min-width:0;background:transparent;border:0;color:var(--hi);font-family:var(--font);
  font-size:13.5px;padding:0}
.me-nome:focus{outline:none}
.me-x{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;
  color:var(--lo);background:transparent;border:0;border-radius:2px;cursor:pointer}
.me-x:hover{color:var(--rose);background:var(--bg2)}
.me-opcoes .escolha{max-height:44vh}
.escolha-item.usado{color:var(--hi)}
.escolha-item.usado .escolha-ico{color:var(--accent-solid)}

/* ---- convite de plano: aparece uma vez por dia, e é dispensável ---- */
.convite{position:fixed;right:22px;bottom:22px;z-index:150;width:min(340px,calc(100vw - 32px));
  overflow:hidden;background:var(--bg1);border:1px solid var(--line);
  border-top:2px solid var(--cv,var(--gold));border-radius:var(--r);
  box-shadow:0 24px 48px -22px rgba(0,0,0,.9);animation:convite-entra .32s cubic-bezier(.2,.7,.3,1)}
@keyframes convite-entra{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.convite-corpo{padding:18px 18px 16px}
.convite .rot{color:var(--cv,var(--gold))}
.convite h3{font-family:var(--cond);font-size:20px;font-weight:800;color:var(--hi);line-height:1.15;margin:6px 0 6px}
.convite p{color:var(--md);font-size:13px;line-height:1.55}
.convite-pe{display:flex;align-items:center;gap:10px;margin-top:14px}
.convite-pe .btn{flex:1}
.convite-x{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;color:var(--lo);background:transparent;border:0;border-radius:2px;cursor:pointer}
.convite-x:hover{color:var(--hi);background:var(--bg2)}

/* ---- Fellow: barra de visualização de teste ---- */
.fellow-teste{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;margin-bottom:18px;
  background:var(--bg2);border:1px dashed var(--line2);border-radius:var(--r)}
.fellow-teste .rot{color:var(--amber)}
.fellow-teste .btn{padding:6px 12px}

@media (max-width:700px){
  .menu-editor{grid-template-columns:1fr}
  .me-pastas{border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:14px}
  .convite{right:12px;left:12px;bottom:12px;width:auto}
}
@media (prefers-reduced-motion:reduce){ .convite{animation:none} }


/* ============ MARCO — o que só acontece uma vez ======================================
   Diferente da tela cheia do Boss de propósito. Aquela é conquista coletiva que chega ao
   fim; esta é pessoal e irreversível: entrar na jam, completar o perfil, comprar o
   primeiro curso, emitir o primeiro certificado. O selo CARIMBA — escala de fora para
   dentro com um pouco de exagero e assenta —, os raios giram uma vez e o texto sobe.

   Continua sem glow: a luz aqui é um cone girando atrás do selo, que é forma, não halo. */

.marco{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center;
  padding:24px;cursor:pointer;background:rgba(8,8,10,.94);opacity:1;transition:opacity .36s}
.marco-caixa{max-width:460px;text-align:center}

.marco-selo{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:132px;height:132px;margin-bottom:26px;
  animation:marco-carimba .52s cubic-bezier(.18,1.5,.4,1)}
@keyframes marco-carimba{
  0%{transform:scale(2.1) rotate(-14deg);opacity:0}
  55%{opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
/* raios: um cone que dá uma volta e para. Uma volta é celebração; girar sem parar é
   tela de carregamento. */
.marco-raios{position:absolute;inset:-34px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,
    color-mix(in srgb, var(--mc) 42%, transparent) 0deg 8deg, transparent 8deg 30deg,
    color-mix(in srgb, var(--mc) 30%, transparent) 30deg 36deg, transparent 36deg 60deg,
    color-mix(in srgb, var(--mc) 42%, transparent) 60deg 68deg, transparent 68deg 90deg,
    color-mix(in srgb, var(--mc) 30%, transparent) 90deg 96deg, transparent 96deg 120deg,
    color-mix(in srgb, var(--mc) 42%, transparent) 120deg 128deg, transparent 128deg 180deg,
    color-mix(in srgb, var(--mc) 30%, transparent) 180deg 186deg, transparent 186deg 240deg,
    color-mix(in srgb, var(--mc) 42%, transparent) 240deg 248deg, transparent 248deg 300deg,
    color-mix(in srgb, var(--mc) 30%, transparent) 300deg 306deg, transparent 306deg 360deg);
  mask:radial-gradient(circle, transparent 46%, #000 54%, #000 76%, transparent 84%);
  animation:marco-gira 1.6s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes marco-gira{from{transform:rotate(0);opacity:0}20%{opacity:1}to{transform:rotate(360deg);opacity:.55}}
.marco-anel{position:absolute;inset:0;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--mc) 55%, transparent)}
.marco-glifo{position:relative;display:flex;align-items:center;justify-content:center;
  width:92px;height:92px;border-radius:50%;color:var(--mc);
  background:radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--mc) 26%, #14141c), #0b0b11);
  border:1px solid color-mix(in srgb, var(--mc) 40%, transparent)}

.marco-rot{font-family:var(--cond);font-size:11px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--mc);animation:marco-sobe .5s .16s both}
.marco-nome{font-family:var(--cond);font-size:clamp(30px,6vw,52px);font-weight:800;line-height:1.05;
  color:var(--hi);margin:8px 0 10px;animation:marco-sobe .5s .24s both}
.marco-txt{color:var(--md);font-size:15px;line-height:1.6;max-width:44ch;margin:8px auto 0;
  animation:marco-sobe .5s .32s both}
.marco-detalhe{display:inline-block;margin-top:16px;padding:7px 14px;
  font-family:ui-monospace,Consolas,monospace;font-size:12px;letter-spacing:.14em;color:var(--mc);
  border:1px solid color-mix(in srgb, var(--mc) 40%, transparent);border-radius:2px;
  animation:marco-sobe .5s .4s both}
@keyframes marco-sobe{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .marco-selo,.marco-raios,.marco-rot,.marco-nome,.marco-txt,.marco-detalhe{animation:none}
  .marco-raios{opacity:.4}
}

/* ============ RELATÓRIO DE PLAYTEST ======================================
   O que a equipe do jogo abre para ler. A leitura é o produto aqui, então a pergunta é
   etiqueta (pequena, em caixa alta) e a resposta é texto corrido em tamanho de leitura —
   o contrário do que uma tabela faria com o mesmo conteúdo. */
.rel{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rel-item{background:var(--bg1);padding:18px 20px}
.rel-pergunta{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-solid);margin-bottom:8px}
.rel-resposta{color:var(--hi);font-size:15px;line-height:1.65;white-space:pre-wrap;
  max-width:74ch;font-weight:300}
.rel-nota{background:var(--bg2);padding:12px 20px;font-size:13px;color:var(--md);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* o número da pergunta no formulário: diz quantas faltam sem precisar contar */
.pg-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  margin-right:6px;border-radius:2px;background:var(--accent-dim);color:var(--accent-solid);
  font-family:var(--cond);font-weight:800;font-size:11px}
@media(max-width:560px){
  .rel-item{padding:14px 15px}
  .rel-resposta{font-size:14.5px}
}

/* ============ CANAIS DA SEDE =============================================
   Vêm logo abaixo do Discord global, e são visualmente MENORES: o canal da edição é um só
   e o da sede é um entre vários, então botão fantasma em linha resolve sem competir com a
   ação principal logo acima. */
.jam-canais{margin-top:10px;padding:16px 18px;background:var(--bg1);
  border:1px solid var(--line);border-radius:var(--r)}
.jc-topo{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.jc-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  flex:none;border-radius:2px;color:var(--accent-solid);
  border:1px solid color-mix(in srgb, var(--accent-solid) 38%, transparent)}
.jc-topo b{font-family:var(--cond);font-weight:800;font-size:16px;letter-spacing:.01em}
.jc-links{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:560px){
  .jam-canais{padding:14px 15px}
  .jc-links .btn{flex:1 1 auto;justify-content:center}
}