/* comunidade-v2-pele.css · a PELE do QG (área do membro, /comunidadedojr)
   02/11/2026 — pedido do JR: "melhora design todo da comunidade do jr ... id nossa".

   O QUE É: só aparência. Cor, fonte, canto, fundo e o peso da barra de cima no celular.
   NÃO mexe em texto, em lógica, em portão nem em ordem de bloco. Vive num ficheiro à parte
   (carregado por último no <head> de comunidade-membro.html) de propósito: há outros agentes
   a mexer no mesmo HTML hoje, e um bloco isolado não colide com eles.
   Tirar a pele = apagar a linha <link ... comunidade-v2-pele.css> do HTML. Volta tudo.

   A TESE: a porta grátis (/comunidadedojr2026, /comunidade) já fala a língua da casa —
   Clash Display + Cabinet Grotesk + JetBrains Mono, preto #060608, laranja #F26A2E, canto
   de 2px, linha de 1px, zero vidro. O lead cadastrava nessa página e caía num QG de OUTRA
   geração: Archivo Black/Inter/Bebas que NUNCA baixavam (0 webfonts carregadas, medido),
   cartão de 14-18px com vidro e brilho, partículas a subir no fundo. Esta pele faz o QG
   ser a mesma casa da porta.

   ⚠ Medidas que NÃO se podem desfazer aqui (guardadas por provadores):
     - #col-feed{min-width:0} / #cp-space{min-width:0} / .composer .send{flex-shrink:0}
       (estouro horizontal a 320px) — esta pele não toca em largura mínima.
     - campos a 16px no toque (zoom do Safari) — esta pele não baixa fonte de campo.
   ⚠ Sem crase em lado nenhum deste ficheiro (não é template literal, mas a regra da casa vale). */

@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/midia/comunidade-vendas/fontes/jetbrains-mono-latin-pt-v1.woff2") format("woff2")}

/* ── 1. TOKENS: os mesmos da porta grátis ─────────────────────────────────────── */
:root{
  --ink:#F2F4F8;
  --mute:#A6ABB6;        /* era #93A0BA (azulado, herança navy) */
  --faint:#8A8FA0;       /* era #5A6684: 3,4:1 sobre #060608 — texto pequeno abaixo do AA */
  --disp:"Clash Display","Arial Black",system-ui,sans-serif;
  --cond:"Clash Display","Arial Narrow",system-ui,sans-serif;
  --body:"Cabinet Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --pele-r:4px;          /* canto de caixa */
  --pele-rb:2px;         /* canto de botão — igual ao .cta da porta */
  --pele-card:#0B0B0E;
}
body{font-size:16px;font-variant-numeric:tabular-nums}

/* ── 2. FUNDO: tira o pacote de efeito, fica o grão ──────────────────────────────
   glow pulsando + 30 brasas subindo + scanline = 24-28 animações rodando o tempo todo
   num QG que se lê no celular. O grão (feTurbulence) é a assinatura da casa e é estático. */
.bg .glow,.bg .ember,#embers,.bg .scan{display:none!important}
.bg .grid{opacity:.55}
.bg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* ── 3. PORTÃO (entrar com email) ──────────────────────────────────────────────── */
.card{background:var(--abyss);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-radius:var(--pele-r)}
.card::before{right:auto;width:72px;background:var(--gold)}
.card h1{font-family:var(--disp);font-weight:700;letter-spacing:-.01em;line-height:.98;font-size:32px}
.crest{border-radius:var(--pele-rb);animation:none;background:var(--panel)}
.eyebrow{letter-spacing:.16em;font-weight:700}
.eyebrow::before{height:2px;background:var(--gold)}
.field input{border-radius:var(--pele-rb);background:#08080A}
.field input:focus{box-shadow:0 0 0 1px var(--gold);border-color:var(--gold)}
.btn{background:var(--gold);border-radius:var(--pele-rb);box-shadow:none;font-family:var(--mono);font-weight:800;
  letter-spacing:.08em;min-height:52px}
.btn:hover{filter:none;background:var(--gold-b)}
.btn.ghost{background:none;font-family:var(--body);letter-spacing:0;min-height:48px}
.btn.ghost:hover{background:var(--raised);border-color:var(--line-2);color:var(--ink)}

/* ── 4. BARRA DE CIMA ─────────────────────────────────────────────────────────────
   No celular ela + as abas comiam 206px de 740 (28% da tela) antes do 1º post: o botão
   de sair caía SOZINHO numa 2ª linha. Aqui o selo de patente sai da pílula abaixo de 420px
   (ele está repetido, grande, no "Teu posto") e a linha 1 volta a caber. */
.topbar{background:rgba(6,6,8,.97);backdrop-filter:none;-webkit-backdrop-filter:none}
.tsearch{border-radius:var(--pele-rb);background:#08080A}
.tsearch:focus-within{border-color:var(--gold-d)}
.mechip,.ticon{border-radius:var(--pele-rb)}
.mechip .rk{font-weight:700;letter-spacing:.1em}
@media(max-width:420px){
  .topbar{gap:8px;padding:8px 14px;row-gap:8px}
  .mechip{padding:3px}
  .mechip .rk{display:none}
  .tsearch{padding:9px 12px}
}
@media(max-width:960px){
  .mtabs{background:rgba(6,6,8,.97)}
  .mtabs button{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;min-height:46px}
  .mtabs button.on{background:linear-gradient(0deg,rgba(242,106,46,.08),transparent 70%)}
}

/* ── 5. CAIXAS: canto de 4px, superfície chapada, sem vidro ───────────────────── */
.panel{background:var(--abyss)}
.panel h3{letter-spacing:.16em;color:var(--mute);font-weight:700}
.chan button{border-radius:var(--pele-rb)}
.chan button.on{background:rgba(242,106,46,.10)}
.chan button.on::before{top:0;bottom:0;border-radius:0}
.composer{background:var(--panel)}
.post{background:var(--pele-card)}
.post.pin{background:linear-gradient(180deg,rgba(242,106,46,.07),transparent 140px),var(--pele-card);border-color:rgba(242,106,46,.36)}
.post h4{font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.005em;line-height:1.12}
.post .body{font-size:15.5px;line-height:1.55}
.post .esp{color:var(--gold);letter-spacing:.06em}
.stat{border-radius:var(--pele-rb)}
.stat b{font-family:var(--disp);font-weight:600;font-size:22px;line-height:1.1}
.stat span{color:var(--mute)}
.pbody .pn{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.005em}

/* capa do QG: some o brilho que varre (efeito de pack), fica a foto em duotone e o grão */
.cover{box-shadow:none}
.cover .cvsweep{display:none}
.cover .cvbar{width:3px;background:var(--gold)}
.cover .cvttl{font-family:var(--disp);font-weight:700;letter-spacing:-.01em;line-height:.95;text-shadow:none}
.cover .cvtag{letter-spacing:.18em;font-weight:700}

/* cartão "Teu dia 1" e cartões irmãos */
.passo1 h4,.meuspend h4{font-size:22px}
.passo1 .p1list button,.passo1 .p1list a{border-radius:var(--pele-rb);border-left:2px solid var(--gold);background:#08080A}
.passo1 .p1list button:hover,.passo1 .p1list a:hover{background:var(--raised)}
.passo1 .p1x{min-height:40px}

/* compositor: os dois botões de mídia ganham caixa e alvo de 40px; POSTAR igual ao CTA da porta */
.composer .tool{border:1px solid var(--line);border-radius:var(--pele-rb);min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.composer select{border-radius:var(--pele-rb);min-height:40px}
.composer .send{border-radius:var(--pele-rb);font-family:var(--mono);letter-spacing:.08em;min-height:40px;padding:9px 18px}
.composer .send:hover{background:var(--gold-b)}

/* ações do post (curtir / comentar): alvo de 40px no toque, sem pílula */
.act{border-radius:var(--pele-rb);min-height:40px}

/* selos de patente: placa, não pílula */
.rb-adm,.rb-mod,.rb-rank{border-radius:var(--pele-rb)}
.rb-jr{box-shadow:none}

/* ── 6. JANELAS (perfil, comentário, sala ao vivo) ───────────────────────────── */
.overlay{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(3,3,5,.86)}
.modal{border-radius:6px 6px 0 0}
@media(min-width:720px){.modal{border-radius:var(--pele-r)}}
.modal .mh{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.005em}
.modal .mh .x{min-width:44px;min-height:44px}
.liveroom{border-radius:var(--pele-r)}

/* ── 7. JR COPILOTO e SUPORTE: o CSS deles é injetado pelo JS DEPOIS desta folha, por
   isso o seletor leva html body na frente (especificidade, sem !important) ─────── */
html body #cop-fab{border-radius:var(--pele-rb);background:var(--gold);box-shadow:0 0 0 1px rgba(6,6,8,.6),0 14px 30px -14px rgba(0,0,0,.9);min-height:46px}
html body #cop-fab:hover{background:var(--gold-b)}
html body #cop-panel{border-radius:var(--pele-r)}
html body #cop-h{background:var(--raised)}
html body #cop-send{background:var(--gold);border-radius:var(--pele-rb)}
html body #cop-i{border-radius:var(--pele-rb)}
html body .cop-m{border-radius:var(--pele-r)}
html body #cop-x{min-width:44px;min-height:44px}

/* ── 8. CANTOS: tudo o que tinha 7-22px de raio ──────────────────────────────────
   Lista tirada dos <style> do HTML e da economia.css (seletores com raio 7..22px).
   Caixa (>=12px) -> 4px; controlo (7..11px) -> 2px. Avatar, ponto e pílula de 99px
   ficam como estão (redondo ali é forma que carrega sentido: pessoa, estado). */
.card,.cover,.composer,.post,.panel,.modal .mdstage,.rmcard,.des-win,.mc-form,.ophero,.opcard,.opskel,.aghero,.agvazio,.agrow,.agstage,.agbox,.filarec,.qres,.toast,.skel,.vdstage,.mdstage,
html body #cv2-ob,html body #cv2-ob-tour .cv2ob-tsh{border-radius:var(--pele-r)}
.crest,.ticon,.avtudo,.chan button,.composer .prev,.composer .tool,.composer select,.composer .send,.passo1 .p1list button,.passo1 .p1list a,.meuspend .mpend,.post .media,.rmfoot,.sino-btn,.sino-seq,.seq-btn,.des-mis,.des-num,.des-tool,.des-undo,.mc-inp,.mc-seg button,.mc-lr button,.mc-carimbar,.mc-fi,.mc-item,.mc-res button,.act,.pbanner .capabt,.pbody .edit,.stat,.toolrow,.toolrow .ti,.toolrow .tk,.tkb,.ars-retry,.evt .go,.rank .r,.vdtl,.vdsel,.cbar input,.cbar button,.lcm.mod .lcmsg .lcx,.liveroom .lcbar input,.liveroom .lcbar button,.pe input,.pe textarea,.agdemo,.agthumb,.agpin,.agposter .pf,.agopen,.agfile .fi,.agmark,.agnext,.agskel,.admk,.admb,.filaitem,.filamid img,.filamid video,.filab,.filador,.filanota,.mc-conf button,.mc-selo,.mc-cal,.lb .lb-bar a,.lb .lb-bar button,.opcard .zoomb,.pmod .media,.cmt.alvo,.cmt .cedit textarea,.cmt .cbtns button,
html body #jrb-cx,html body #jrb-msg,html body #jrb-email,html body #jrb-x,html body #jrb-ok,html body .jrb-btn,
html body #cv2-ob .cv2ob-it,html body #cv2-ob .cv2ob-btn,html body #cv2-ob-tour .cv2ob-btn,html body #cv2-ob .cv2ob-code,html body #cv2-ob-tour .cv2ob-x{border-radius:var(--pele-rb)}

/* botões cheios da casa: chapados no acento, sem degradê nem sombra colorida */
.sino-btn,.mc-carimbar{background:var(--gold);box-shadow:none;font-family:var(--mono);letter-spacing:.08em}
.sino-btn:hover{transform:none;box-shadow:none;background:var(--gold-b)}
.agrow:hover{transform:none;box-shadow:none}
.opcard:hover{transform:none}
.ophero::before,.aghero::before{opacity:.5}

/* vidro que sobrou em cima de foto/vídeo: vira placa escura sólida */
.pbanner .capabt,.opcard .kind,.opcard .mut,.opcard .ob{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,6,8,.82)}

/* ── 9. MOVIMENTO: quem pediu menos, recebe menos ─────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .panel,.post,.cover .cvimg,.col-side.show,.col-rail.show{animation:none!important}
}

/* ── 10. TÍTULO EM CLASH: o espaço entre palavras da Clash é estreito; com tracking
   negativo "Teu dia 1 na tropa" lia-se como uma palavra só. Tracking a zero + respiro
   entre palavras, em todo título que usa a fonte de display. ───────────────────── */
.card h1,.cover .cvttl,.post h4,.pbody .pn,.modal .mh,.stat b,.aghero h2,.ophero h2,.agvazio h4,.des-win h5,.seq-num{letter-spacing:0;word-spacing:.1em}
@media(max-width:420px){.cover .cvttl{font-size:25px}}
@media(max-width:420px){.cover .cvin{padding:16px 16px 16px 18px}.cover .cvttl{font-size:24px}}
/* sino e sair: 33px de altura no toque -> 40px (a régua da casa no QG é 44 no cartão, 40 no ícone) */
.ticon{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}

/* ── 11. CELULAR E TABLET (02/11 · pedido do JR: "otimiza toda a comunidade do JR no celular
   e no tablet também"). Só geometria: nenhum texto, nenhuma regra de negócio.
   Faixas: <=699 celular (1 coluna, 3 abas) · 700-1099 tablet (feed + Teu posto lado a lado,
   Espaços na aba) · 1100-1279 três colunas magras · >=1280 o desktop de sempre.
   ⚠ O JS de mtab() usa o MESMO corte de 1099 — se mexer aqui, mexe lá. ─────────────── */

/* 11.1 tablet em pé e deitado: o feed não fica mais estreito que o do celular */
@media(min-width:700px) and (max-width:1099px){
  .wrap{grid-template-columns:minmax(0,1fr) 312px;gap:18px}
  .col-side{position:static;display:none;max-height:none;overflow-y:visible}
  .col-side.show{display:flex}
  .col-rail{display:flex;position:sticky;top:calc(var(--tbh,67px) + 64px);
    max-height:calc(100dvh - var(--tbh,67px) - 80px);overflow-y:auto}
  .topbar{flex-wrap:nowrap}
  .tsearch{order:0;flex-basis:auto;max-width:340px}
  .mtabs{display:flex;position:sticky;top:var(--tbh,67px);z-index:20;background:rgba(6,6,8,.97);border-bottom:1px solid var(--line)}
  .mtabs button{flex:1;padding:12px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--mute);border-bottom:2px solid transparent;min-height:46px}
  .mtabs button.on{color:var(--gold);border-bottom-color:var(--gold);background:linear-gradient(0deg,rgba(242,106,46,.08),transparent 70%)}
  .mtabs button[data-mt="rail"]{display:none}
  html body #cv2-hud{display:none}
}
/* 11.2 notebook pequeno / tablet grande deitado */
@media(min-width:1100px) and (max-width:1279px){
  .wrap{grid-template-columns:200px minmax(0,1fr) 300px;gap:18px}
}

/* 11.3 celular: barra de cima mais baixa, e ela sai ao rolar pra baixo (volta ao rolar pra cima).
   A classe tb-some é posta pelo JS só abaixo de 700px. */
@media(max-width:699px){
  .tsearch{padding:0 12px}
  .tsearch input{min-height:44px}
  .topbar{transition:transform .22s ease}
  .mtabs{transition:top .22s ease}
  html.tb-some .topbar{transform:translateY(-100%)}
  html.tb-some .mtabs{top:0}
}

/* 11.4 bordas do aparelho (a página declara viewport-fit=cover, então o entalhe e a
   barra de gesto do iPhone ENTRAM na tela: sem isto o conteúdo corre por baixo deles) */
.topbar{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
.wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));
  padding-bottom:calc(90px + env(safe-area-inset-bottom))}
@media(max-width:420px){
  .topbar{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .wrap{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
}

/* 11.5 mídia do post reserva o lugar antes de chegar (sem isto o post pulava ao carregar a
   imagem: CLS 0,051 medido a 820px). "auto 16/10" = usa 16:10 só ENQUANTO não sabe a
   proporção real; carregou, vale a da imagem — o print não é cortado nem achatado. */
.post .media img{aspect-ratio:auto 16/10}
.post .media video{aspect-ratio:auto 16/9}

/* 11.6 dedo: alvo de 44px e piso de texto de 11px, no toque e em tela de tablet pra baixo.
   O desktop de mouse fica como estava. */
@media (pointer:coarse),(max-width:1099px){
  .ticon{min-width:44px;min-height:44px}
  .composer .tool{min-width:44px;min-height:44px}
  .composer select,.composer .send{min-height:44px}
  .act{min-height:44px}
  .passo1 .p1x{min-height:44px}
  .chan button{min-height:44px}
  .pbanner .capabt{min-height:44px;padding:0 12px;display:inline-flex;align-items:center;font-size:11px}
  .pbody .edit{min-height:44px;padding:0 12px;display:inline-flex;align-items:center;font-size:11px}
  .ars-retry{min-height:44px;display:inline-flex;align-items:center}
  .evt .go{min-height:44px}
  html body #pf-x{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;top:4px;right:4px}

  .rolebadge,.arsb,.matbadge,.mc-selo,.agposter .ph .pk{font-size:11px}
  .rolebadge{white-space:nowrap}
  /* o selo de patente desce pra linha de baixo em vez de partir o NOME em dois */
  .pbody .pn{flex-wrap:wrap;row-gap:4px}
  .chan .grp,.panel h3,.arshint,.stat span,.cover .cvtag,.mechip .rk{font-size:11px}
  .badge,.prox{font-size:11px}
  /* com letra de 11px a linha "próxima conquista" partia em 5 colunas no Teu posto de 300px:
     a frase do que fazer desce pra linha dela */
  .prox{flex-wrap:wrap;row-gap:4px}
  .prox>span:last-child{flex:1 0 100%}
  /* faixa do perfil sem capa: com os dois botões de 44px ela precisa de altura pra eles
     não se encavalarem (PÔR CAPA no topo, editar sobe da caixa de baixo) */
  .pbanner:not(.hascapa){height:96px}
  .cp-hint{font-size:12px}
}

/* 11.7 JR COPILOTO no celular: vira ícone de 48px, acima da barra de gesto.
   E em qualquer tela ele SAI DA FRENTE quando está por cima de um botão do feed
   (POSTAR, curtir, comentar) — a classe desvia é posta pelo JS. */
@media(max-width:600px){
  html body #cop-fab{width:48px;height:48px;min-height:48px;padding:0;justify-content:center;
    right:max(12px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom))}
  html body #cop-fab .d,html body #cop-fab .cft{display:none}
  html body #cop-fab .cfi{font-size:22px;line-height:1}
  html body #cop-panel{bottom:calc(12px + env(safe-area-inset-bottom))}
}
html body #cop-fab{transition:opacity .18s ease}
html body #cop-fab.desvia{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .topbar,.mtabs,html body #cop-fab{transition:none}
}