/* ============================================================
   Just Ball · link beta do grupo de teste (13/10/2026)
   Chaves de liberação, abas Início · Loja · Perfil, loja, perfil real,
   foto com recorte, complete seu perfil, sugestões, X1 simétrico,
   assinatura do estúdio e abertura da primeira vez.
   Mesmos tokens do app: preto, lima é luz, verde é atmosfera, grão.
   ============================================================ */

/* ---------- chaves de liberação: ganha de qualquer display de autor ---------- */
[data-flag-off]{display:none !important}
/* desafio do fim do Arremesso 30s só volta com o X1 real (Drop 2, quinta 15/10) */
html.sem-x1 .jbs-acts [data-e="send"]{display:none !important}
html.sem-x1 .jbs-acts [data-e="menu"]{grid-column:1/-1}

/* ---------- barra de abas: quantas estiverem liberadas, divididas por igual ---------- */
.tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}

/* ---------- topo: logo + chip Beta ---------- */
.top__l{display:flex;align-items:center;gap:10px;min-width:0}
.beta-chip{position:relative;height:24px;padding:0 10px;border-radius:var(--rp);border:1px solid rgba(197,255,26,.5);color:var(--lime);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:22px;transition:background .25s,border-color .25s,transform .15s var(--e)}
.beta-chip::before{content:"";position:absolute;inset:-9px -6px}
.beta-chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.beta-chip:hover{background:var(--lime-dim);border-color:var(--lime)}}
.beta-chip:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* botão do perfil no topo: foto ou inicial */
.me-btn{place-items:center}
.mb__img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.mb__ini{font-family:var(--disp);font-weight:900;font-size:21px;line-height:1;color:var(--lime);transform:translateY(1px)}
.mb__ico svg{width:20px;height:20px;fill:none;stroke:var(--mute);stroke-width:1.8;stroke-linecap:round}

/* rostinhos de quem vai: foto por cima da inicial */
.ini--f{position:relative;overflow:hidden;color:transparent}
.ini--f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ============================================================
   X1 (drop x1): dois rostos com a MESMA altura de rosto
   (sobrancelha ao queixo: 348 px no masculino, 306 px no feminino),
   olhos na mesma linha (42% da altura) e as pontas dos narizes a
   26,3% de cada borda. Texto centrado de verdade entre os dois.
   ============================================================ */
.hx1{aspect-ratio:716/400;height:auto;margin-top:22px;
  background:
    radial-gradient(60% 70% at 50% 115%, rgba(3,199,63,.42), transparent 65%),
    radial-gradient(45% 60% at 50% 40%, rgba(3,199,63,.10), transparent 70%),
    linear-gradient(180deg,#0d110b 0%,#060706 100%);
  border:1px solid rgba(197,255,26,.16)}
.hx1::before{content:"";position:absolute;inset:0;z-index:0;background:url('../assets/tex/cracks-leve.webp') center/cover;mix-blend-mode:screen;opacity:.16;filter:sepia(1) hue-rotate(40deg) saturate(3);pointer-events:none}
.hx1__f{position:absolute;z-index:1;width:auto;max-width:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 94%);mask-image:linear-gradient(180deg,#000 62%,transparent 94%)}
.hx1__f--m{top:2.77%;height:95.55%;left:-10.94%;filter:contrast(1.06) saturate(.82) brightness(.88) drop-shadow(3px 0 14px rgba(197,255,26,.2))}
.hx1__f--f{top:4.48%;height:108.66%;right:-13.55%;filter:contrast(1.06) saturate(.82) brightness(.88) drop-shadow(-3px 0 14px rgba(197,255,26,.14));
  /* o coque encosta no topo do arquivo: a borda reta se dissolve em vez de cortar (15/10/2026) */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 62%,transparent 94%);mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 62%,transparent 94%)}
.hx1__mid{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 27%}
.hx1__mid::before{content:"";position:absolute;left:50%;top:50%;width:62%;height:86%;transform:translate(-50%,-50%);z-index:-1;background:radial-gradient(closest-side,rgba(3,6,3,.82),rgba(3,6,3,.45) 60%,transparent);pointer-events:none}
.hx1 .hero__k{margin-bottom:6px;text-shadow:0 1px 8px #000}
.hx1 .hero__h{font-size:clamp(30px,8.6vw,38px);text-shadow:0 2px 18px rgba(0,0,0,.85);margin-bottom:6px}
.hx1__s{font-size:12px;line-height:1.3;color:#e6e6e6;text-shadow:0 1px 10px #000;margin-bottom:10px;text-wrap:balance}
.hx1 .btn--out{min-height:38px;padding:0 18px;font-size:13px;background:rgba(0,0,0,.4)}

/* ============================================================
   LOJA
   As fotos da loja são de estúdio, fundo claro quente: entram numa
   moldura escura com vinheta e borda de luz, nunca soltas no preto.
   ============================================================ */
.lj-sec .sec__h{align-items:center}
.lj-all{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 2px;font-size:13px;font-weight:800;color:var(--lime)}
.lj-all i{font-style:normal;transition:transform .2s var(--e)}
@media (hover:hover) and (pointer:fine){.lj-all:hover i{transform:translateX(3px)}}

.lj-rail{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  margin:0 calc(var(--gut) * -1);padding:2px var(--gut) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lj-rail::-webkit-scrollbar{display:none}
.lj-rail>*{flex:0 0 132px;scroll-snap-align:start;scroll-snap-stop:always}

.lj-c{display:flex;flex-direction:column;gap:3px;color:var(--paper);text-decoration:none;text-align:left;min-width:0;transition:transform .15s var(--e)}
.lj-c:active{transform:scale(.97)}
.lj-ph{position:relative;display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--ink-4);margin-bottom:6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.45);transition:box-shadow .3s var(--e)}
.lj-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;filter:saturate(.92) contrast(1.04);transition:filter .3s var(--e)}
.lj-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,transparent 55%,rgba(0,0,0,.32)),linear-gradient(0deg,rgba(5,5,5,.38),transparent 34%)}
.lj-n{font-size:12.5px;font-weight:700;line-height:1.25;text-wrap:balance}
.lj-pr{font-size:12px;font-weight:700;color:var(--lime)}
@media (hover:hover) and (pointer:fine){
  .lj-c:hover .lj-ph{box-shadow:0 0 0 1px rgba(197,255,26,.55),0 0 26px rgba(197,255,26,.16),0 10px 24px rgba(0,0,0,.45)}
  .lj-c:hover .lj-ph img{filter:saturate(1) contrast(1.06) brightness(1.04)}
}
.lj-c:focus-visible{outline:none}
.lj-c:focus-visible .lj-ph,.lj-c--all:focus-visible .lj-all__ic{box-shadow:0 0 0 2px var(--lime)}

/* último do trilho: ver tudo */
.lj-c--all{align-items:stretch}
.lj-all__ic{display:grid;place-items:center;aspect-ratio:4/5;border-radius:14px;margin-bottom:6px;border:1px solid rgba(197,255,26,.32);
  background:radial-gradient(80% 70% at 50% 100%,rgba(3,199,63,.22),transparent 70%),var(--ink-3);transition:border-color .25s}
.lj-all__ic svg{width:30px;height:30px;fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lj-c--all .lj-n{color:var(--lime)}
@media (hover:hover) and (pointer:fine){.lj-c--all:hover .lj-all__ic{border-color:var(--lime)}}

/* destaque da aba Loja: luz verde atrás, borda de luz lima, grão, sombra de contato */
.lj-hero{position:relative;display:block;isolation:isolate;overflow:hidden;border-radius:24px;padding:22px 18px 18px;color:var(--paper);text-decoration:none;
  background:
    radial-gradient(70% 50% at 50% 40%, rgba(3,199,63,.34), transparent 70%),
    radial-gradient(60% 34% at 50% 0%, rgba(197,255,26,.12), transparent 70%),
    linear-gradient(180deg,#10140d 0%,#080908 62%,#060606 100%);
  border:1px solid rgba(197,255,26,.30);
  box-shadow:inset 0 1px 0 rgba(197,255,26,.28),inset 0 0 36px rgba(197,255,26,.06),0 22px 50px rgba(0,0,0,.55);
  transition:transform .15s var(--e),box-shadow .3s var(--e)}
.lj-hero::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background-image:var(--grain);background-size:160px;opacity:.16;mix-blend-mode:overlay}
.lj-hero:active{transform:scale(.97)}
.lj-hero__glow{position:absolute;z-index:0;left:50%;top:14px;width:84%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(197,255,26,.32),rgba(3,199,63,.24) 55%,transparent);filter:blur(18px);pointer-events:none}
.lj-hero__ph{position:relative;z-index:2;display:block;width:76%;margin:0 auto;aspect-ratio:1;border-radius:18px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(197,255,26,.45),0 0 34px rgba(197,255,26,.20),0 18px 30px rgba(0,0,0,.55)}
.lj-hero__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.95) contrast(1.05)}
.lj-hero__ph::after{content:"";position:absolute;inset:0;background:radial-gradient(110% 90% at 50% 35%,transparent 58%,rgba(0,0,0,.30));pointer-events:none}
.lj-hero__shadow{position:relative;z-index:1;display:block;width:62%;height:16px;margin:-4px auto 0;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent);filter:blur(3px)}
.lj-hero__b{position:relative;z-index:3;display:flex;flex-direction:column;gap:4px;margin-top:12px}
.lj-hero__n{font-family:var(--disp);font-weight:900;font-size:clamp(32px,9.4vw,40px);line-height:.92;text-transform:uppercase;letter-spacing:.005em}
.lj-hero__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.lj-hero__pr{font-size:22px;font-weight:700;color:var(--lime)}
.lj-hero__cta{min-height:44px;padding:0 18px;font-size:14px}
.lj-hero__cta svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
  .lj-hero:hover{box-shadow:inset 0 1px 0 rgba(197,255,26,.4),inset 0 0 40px rgba(197,255,26,.1),0 0 0 1px rgba(197,255,26,.4),0 22px 50px rgba(0,0,0,.55)}
}
.lj-hero:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

.lj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;margin-top:26px}

/* cabeçalho da aba: atmosfera verde por baixo, grão por cima */
.lj-head{position:relative;isolation:isolate;margin:-20px calc(var(--gut) * -1) 18px;padding:26px var(--gut) 18px}
.lj-head::after{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:160px;opacity:.14;mix-blend-mode:overlay;
  -webkit-mask-image:radial-gradient(70% 70% at 30% 45%,#000,transparent);mask-image:radial-gradient(70% 70% at 30% 45%,#000,transparent)}
.lj-head__glow{position:absolute;z-index:-2;left:-6%;top:-30%;width:84%;height:150%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(3,199,63,.28),rgba(197,255,26,.06) 58%,transparent)}
.lj-head .scr__t{text-shadow:0 0 34px rgba(197,255,26,.18)}

/* grade: moldura de luz, sombra de contato embaixo da foto, preço em pílula */
.lj-grid .lj-ph{margin-bottom:0;box-shadow:0 0 0 1px rgba(197,255,26,.22),inset 0 1px 0 rgba(255,255,255,.12),0 14px 28px rgba(0,0,0,.5),0 0 30px rgba(3,199,63,.08)}
.lj-grid .lj-ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%);mix-blend-mode:screen}
/* no preto, sombra não aparece: o "chão" é o reflexo de luz verde embaixo da peça */
.lj-sh{display:block;width:84%;height:14px;margin:-3px auto 6px;border-radius:50%;background:radial-gradient(closest-side,rgba(3,199,63,.42),rgba(197,255,26,.1) 55%,transparent)}
.lj-grid .lj-n{font-size:13.5px}
.lj-grid .lj-pr{align-self:flex-start;margin-top:4px;padding:4px 10px;border-radius:var(--rp);font-size:12px;background:rgba(197,255,26,.1);border:1px solid rgba(197,255,26,.32);line-height:1.2}

/* "a loja inteira": cartão de saída pro site, sem sublinhado */
.lj-cta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:14px;margin-top:30px;padding:22px 18px 22px 20px;border-radius:22px;
  color:var(--paper);text-decoration:none;
  background:radial-gradient(90% 120% at 50% 130%,rgba(3,199,63,.4),transparent 62%),linear-gradient(180deg,#0f130c,#070807);
  border:1px solid rgba(197,255,26,.34);
  box-shadow:inset 0 1px 0 rgba(197,255,26,.3),inset 0 0 40px rgba(197,255,26,.05),0 20px 44px rgba(0,0,0,.55);transition:transform .15s var(--e),box-shadow .3s var(--e)}
.lj-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:160px;opacity:.16;mix-blend-mode:overlay}
.lj-cta__glow{position:absolute;z-index:-2;left:10%;right:10%;bottom:-40px;height:80px;border-radius:50%;background:radial-gradient(closest-side,rgba(197,255,26,.28),transparent);pointer-events:none}
.lj-cta__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.lj-cta__t{font-family:var(--disp);font-weight:900;font-size:clamp(32px,9.6vw,40px);line-height:.92;text-transform:uppercase}
.lj-cta__p{font-size:13px;color:#cfcfcf;line-height:1.35;text-wrap:balance}
.lj-cta__go{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--lime);box-shadow:0 0 0 6px rgba(197,255,26,.12),0 10px 26px rgba(197,255,26,.3)}
.lj-cta__go svg{width:22px;height:22px;fill:none;stroke:#0a0a0a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.lj-cta:hover{box-shadow:inset 0 1px 0 rgba(197,255,26,.45),inset 0 0 40px rgba(197,255,26,.08),0 0 0 1px rgba(197,255,26,.4),0 20px 44px rgba(0,0,0,.55)}}
.lj-cta:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* ============================================================
   PERFIL REAL
   ============================================================ */
.pc{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;padding:18px;border-radius:22px;
  background:
    radial-gradient(80% 90% at 0% 0%, rgba(197,255,26,.12), transparent 60%),
    radial-gradient(60% 80% at 14% 100%, rgba(3,199,63,.24), transparent 70%),
    var(--ink-3);
  border:1px solid rgba(197,255,26,.24)}
.pc::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:160px;opacity:.14;mix-blend-mode:overlay}
.pc__ph{width:96px;height:96px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:radial-gradient(80% 80% at 50% 30%,#1d2a0c,#0a0a0a);
  box-shadow:0 0 0 2px var(--lime),0 0 26px rgba(197,255,26,.22);transition:transform .15s var(--e)}
.pc__img{width:100%;height:100%;object-fit:cover}
.pc__ini{font-family:var(--disp);font-weight:900;font-size:50px;line-height:1;color:var(--lime);transform:translateY(2px)}
.pc__ico svg{width:46px;height:46px;fill:none;stroke:var(--mute);stroke-width:1.6;stroke-linecap:round}
.pc__b{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pc__n{font-family:var(--disp);font-weight:900;font-size:clamp(34px,10vw,42px);line-height:.9;text-transform:uppercase;overflow-wrap:anywhere}
.pc__t{font-size:13px;color:#cfcfcf;line-height:1.35}
.pc__t b{color:var(--lime);font-weight:700}
.pc__x{margin-top:4px}
.pc--vazio .pc__t{color:var(--mute)}

/* progresso do perfil */
.pp{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;width:100%;margin-top:12px;padding:14px 16px;border-radius:16px;background:var(--ink-3);border:1px solid var(--line);text-align:left;transition:border-color .25s,transform .15s var(--e)}
.pp__t{font-weight:700;font-size:14px}
.pp__t b{color:var(--lime)}
.pp__n{font-size:12.5px;font-weight:800;color:var(--lime);white-space:nowrap}
.pp__n i{font-style:normal}
.pp__bar{grid-column:1 / -1;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.pp__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--lime));transform-origin:0 50%;transition:transform .6s var(--e)}
@media (hover:hover) and (pointer:fine){.pp:hover{border-color:rgba(197,255,26,.45)}}

/* pedidos do perfil (bottom sheet) */
.ask .ckf__h{margin-top:2px}
.ask__ph{width:72px;height:72px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:radial-gradient(80% 80% at 50% 30%,#1d2a0c,#0a0a0a);box-shadow:0 0 0 2px var(--lime),0 0 22px rgba(197,255,26,.22)}
.ask__img{width:100%;height:100%;object-fit:cover}
.ask__ini{font-family:var(--disp);font-weight:900;font-size:36px;color:var(--lime);line-height:1}
.ask__ico svg{width:34px;height:34px;fill:none;stroke:var(--mute);stroke-width:1.6}
.ask__no{align-self:center;min-height:40px;padding:0 12px;font-size:13px;font-weight:700;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.ask__no:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.ckf__f input[inputmode="numeric"]{font-family:var(--mono);font-weight:700}

/* "Quem joga no seu tamanho" sem altura: só o botão */
.nba--vazio{display:flex;justify-content:center;padding:22px 16px}
.nba__acts{display:flex;flex-wrap:wrap;gap:4px 18px}
.nba__more--mute{color:var(--mute)}

/* sugestões (chip Beta e caixa de ideias) */
.sug{display:flex;flex-direction:column;gap:12px}
.sug__tx{width:100%;min-height:96px;resize:none;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--ink-2);color:var(--paper);font:500 16px/1.45 var(--body)}
.sug__tx:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(197,255,26,.15)}
.sug__cats{display:flex;flex-wrap:wrap;gap:6px}
.sug__cats .chip{height:34px;font-size:12.5px;padding:0 12px}
.sug__f{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sug__cnt{font-size:10.5px;color:var(--mute)}
.idea .sug{margin-top:2px}

/* ============================================================
   RECORTE DA FOTO (círculo, arrastar, pinça ou régua)
   ============================================================ */
.fx{position:absolute;inset:0;z-index:330;display:flex;flex-direction:column;background:#050505;opacity:0;transition:opacity .22s var(--e)}
.fx.is-on{opacity:1}
.fx__top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(12px + env(safe-area-inset-top)) var(--gut) 10px}
.fx__b{justify-self:start;min-height:40px;font-size:14px;font-weight:700;color:var(--mute)}
.fx__t{font-family:var(--disp);font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.fx__area{position:relative;flex:1;min-height:0;touch-action:none;cursor:grab;overflow:hidden}
.fx__area:active{cursor:grabbing}
.fx__cv{position:absolute;inset:0;display:block}
.fx__mask{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* o escuro fora do círculo é a sombra gigante do próprio anel (a área corta) */
.fx__mask::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--fx-r,140px) * 2);height:calc(var(--fx-r,140px) * 2);transform:translate(-50%,-50%);border-radius:50%;
  box-shadow:0 0 0 2px var(--lime),0 0 24px rgba(197,255,26,.3),0 0 0 2000px rgba(5,5,5,.74)}
.fx__bot{display:flex;flex-direction:column;gap:14px;padding:14px var(--gut) calc(18px + env(safe-area-inset-bottom))}
.fx__zoom{display:flex;align-items:center;gap:12px}
.fx__zoom svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--mute);stroke-width:1.8;stroke-linecap:round}
.fx__zoom input{flex:1;min-width:0;height:40px;accent-color:var(--lime)}

/* ============================================================
   ASSINATURA DO ESTÚDIO
   ============================================================ */
.sig{display:flex;justify-content:center;margin-top:44px;padding:18px 0 6px}
.sig__a{display:flex;flex-direction:row;align-items:center;gap:8px;min-height:44px;padding:6px 16px;text-decoration:none;color:var(--mute);transition:transform .15s var(--e)}
.sig__a:active{transform:scale(.97)}
.sig__a:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:10px}
.sig__l{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.sig__logo{width:52px;height:auto;opacity:.92}
.sig.is-in .sig__logo{animation:sigGlow 1.1s var(--e) both}
@keyframes sigGlow{0%{filter:drop-shadow(0 0 0 rgba(197,255,26,0))}30%{filter:drop-shadow(0 0 10px rgba(197,255,26,.95)) drop-shadow(0 0 2px rgba(197,255,26,.9))}100%{filter:drop-shadow(0 0 0 rgba(197,255,26,0))}}
@media (hover:hover) and (pointer:fine){.sig__a:hover .sig__logo{opacity:1;filter:drop-shadow(0 0 8px rgba(197,255,26,.45))}}

/* ============================================================
   ABERTURA DA PRIMEIRA VEZ (logo Just Ball + "Feito pela" hype)
   ============================================================ */
.intro{position:absolute;inset:0;z-index:390;display:grid;place-items:center;background:#050505;opacity:0;transition:opacity .25s var(--e);cursor:pointer;
  background-image:radial-gradient(60% 40% at 50% 58%,rgba(3,199,63,.14),transparent 70%)}
.intro.is-on{opacity:1}
.intro.is-out{opacity:0;transition-duration:.3s}
.intro--fast.is-out{transition-duration:.22s}
.intro__in{display:flex;flex-direction:column;align-items:center}
/* 17/10/2026 (Jordan): a marca de giz "Just Ball" verde animada do fecho do site
   (justball.com.br, .close__mark.mark.mark--flow.wr): máscara do kit do Pedro Clark,
   luz líquida correndo por dentro e o mesmo wipe da esquerda pra direita */
.intro__jb{display:block;width:198px;aspect-ratio:600/241;
  -webkit-mask:url('../assets/marks/just_ball.webp') no-repeat center/contain;mask:url('../assets/marks/just_ball.webp') no-repeat center/contain;
  background:linear-gradient(100deg,var(--green) 0%,var(--lime) 28%,var(--mint) 46%,var(--lime) 64%,var(--green) 100%);background-size:280% 100%;
  clip-path:inset(0 100% 0 0);animation:introWipe 1.15s var(--e) .05s forwards,introFlow 7s linear infinite}
@keyframes introWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes introFlow{to{background-position:280% 0}}
.intro__sig{display:flex;flex-direction:row;align-items:center;gap:8px;margin-top:30px;opacity:0;animation:introIn .45s var(--e) .38s forwards}
.intro__sig span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.intro__sig img{width:52px;height:auto;animation:sigGlow 1s var(--e) .5s both}
.intro--fast .intro__jb{animation-duration:.6s,7s;animation-delay:0s,0s}
.intro--fast .intro__sig{animation-duration:.3s;animation-delay:.18s}
.intro--fast .intro__sig img{animation-delay:.25s;animation-duration:.7s}
@keyframes introIn{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .intro__jb,.intro__sig{opacity:1;transform:none;animation:none}
  .intro__jb{clip-path:none}
  .intro__sig img,.sig.is-in .sig__logo{animation:none}
  .fx,.intro{transition:opacity .12s linear}
  .pp__bar i{transition:none}
}

/* selo de estoque da loja (mesmos textos do site) */
/* o selo nunca passa da moldura: largura máxima da foto menos as margens, e
   quebra em duas linhas antes de vazar (no trilho o texto já é o curto) */
.lj-tag{position:absolute;left:8px;top:8px;z-index:2;max-width:calc(100% - 16px);font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;
  padding:4px 7px;border-radius:10px;background:rgba(5,5,5,.78);color:var(--paper);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);white-space:normal;overflow-wrap:anywhere;text-wrap:balance}
.lj-tag--pronta{color:var(--lime);border-color:rgba(197,255,26,.45)}
.lj-tag--ultimas{color:#050505;background:var(--lime);border-color:var(--lime)}
.lj-hero__ph .lj-tag{left:12px;top:12px;max-width:calc(100% - 24px);font-size:10.5px}
/* a foto do destaque anda um pouco (profundidade): sobra pra não abrir fresta */
.lj-hero__ph img{scale:1.08}

.lj-hero__n{text-wrap:balance}

/* instalar no celular (passo a passo em css/motion.css) */
.aj__row[hidden]{display:none!important}

/* estimativa de altura (15/10/2026): convite à parte da lista "quem joga no seu tamanho" */
.nbe{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.nbe__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin:0 0 6px}
.nbe__t{font-size:16px;font-weight:800;color:#fff;margin:0 0 6px;line-height:1.3}
.nbe__p{font-size:12.5px;color:var(--mute);line-height:1.45;margin:0 0 12px}
.nbe .seg{margin:8px 0 4px}