@font-face{font-family:Anybody;src:url('/site/fonts/anybody.woff2');font-weight:100 900;font-stretch:50% 150%}@font-face{font-family:'Hanken Grotesk';src:url('/site/fonts/hanken.woff2');font-weight:100 900}@font-face{font-family:'Martian Mono';src:url('/site/fonts/martian.woff2');font-weight:300 700}

/* ================= Tokens ================= */
:root{
  color-scheme: dark;
  --h1300:#FFF3DC; --h1100:#FFC454; --h1000:#FF8A2A; --h900:#D9582A; --h800:#B0380F; --h600:#5C1A08;
  --coal:#1E1E1E; --iron:#2E2B28; --slag:#877E74; --bone:#E6DFD3; --lime:#F7F4EF;

  --bg:#1E1E1E; --bg-deep:#161514; --bg-2:#242220; --bg-3:#2C2926;
  --ink:#F1EBE1; --ink-2:#BFB6AA; --ink-3:#9D958A;
  --rule:rgba(255,236,214,.09); --rule-2:rgba(255,236,214,.17);
  --accent:#D9582A; --accent-text:#FF8A2A; --live:#5EC26A;
  --mark-metal:#E6DFD3; --mark-cut:var(--bg); --flame-fill:url(#rfFlame); --flame-core:#FFC454;

  --f-display:"Anybody", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:"Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease-hammer:cubic-bezier(.2,1.6,.4,1);
  --ease-cool:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px, 4vw, 56px);
  --max:1320px;
}

/* ================= Base ================= */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased}
body::after{content:""; position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--h1000); outline-offset:3px; border-radius:6px}
::selection{background:var(--h1000); color:#1E1E1E}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
section[id], div[id].spec{scroll-margin-top:76px}
h1,h2,h3,h4{margin:0; font-weight:inherit; text-wrap:balance}
p{margin:0}

.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text)}
.eyebrow svg{width:12px; height:15px; flex:none}
.sec-head{display:grid; gap:20px; max-width:820px; margin-bottom:clamp(36px, 5vw, 64px)}
.sec-head h2{font-family:var(--f-display); font-variation-settings:"wdth" 118, "wght" 800; font-size:clamp(2.4rem, 5.4vw, 4.6rem); line-height:.94; letter-spacing:-.01em; text-transform:uppercase}
.sec-head h2 em{font-style:normal; color:var(--accent-text)}
.lead{font-size:clamp(17px, 1.45vw, 19.5px); color:var(--ink-2); max-width:60ch}
.section{padding-block:clamp(80px, 11vw, 150px)}

/* ================= Símbolo ================= */
svg.mark{display:block; overflow:visible}

/* ================= Botões e chips ================= */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 24px; border-radius:12px; font:600 15px/1 var(--f-body); letter-spacing:.01em; text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .42s var(--ease-hammer), background .25s, border-color .25s, box-shadow .3s, color .2s}
.btn:active{transform:scale(.97,.92); transition-duration:.08s}
.btn .arr{font-family:var(--f-mono); font-size:13px}
.btn-primary{color:#FFF; background:linear-gradient(180deg, #E6662F 0%, #C9491E 100%); box-shadow:inset 0 1px 0 rgba(255,222,190,.4), inset 0 -2px 0 rgba(0,0,0,.25), 0 10px 30px -12px rgba(217,88,42,.9)}
.btn-primary:hover{background:linear-gradient(180deg, #F2743A 0%, #D65424 100%); box-shadow:inset 0 1px 0 rgba(255,232,205,.55), inset 0 -2px 0 rgba(0,0,0,.25), 0 14px 40px -10px rgba(255,138,42,.95)}
.btn-glass{color:var(--ink); background:rgba(255,240,225,.05); border-color:var(--rule-2); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.btn-glass:hover{border-color:rgba(255,236,214,.4); background:rgba(255,240,225,.09)}
.btn-ghost{min-height:40px; padding:0 2px; color:var(--accent-text); background:none}
.btn-ghost:hover{text-decoration:underline; text-underline-offset:5px}
.btn-sm{min-height:36px; padding:0 14px; font-size:13px; border-radius:10px}

.chip{display:inline-flex; align-items:center; gap:8px; height:26px; padding:0 11px; border-radius:999px; font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; border:1px solid; white-space:nowrap; background:rgba(20,19,18,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.chip::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.chip-live{color:var(--live); border-color:rgba(94,194,106,.4)}
.chip-live::before{animation:pulse 3.2s ease-in-out infinite}
.chip-forge{color:var(--accent-text); border-color:rgba(255,138,42,.42)}
.chip-forge::before{background:var(--h1000); box-shadow:0 0 8px var(--h1000)}
.chip-radar{color:var(--ink-2); border-color:var(--rule-2)}
.chip-radar::before{background:transparent; box-shadow:inset 0 0 0 1.5px currentColor}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(94,194,106,0)} 50%{box-shadow:0 0 0 5px rgba(94,194,106,.22)}}
@media (prefers-reduced-motion: reduce){ .chip-live::before{animation:none} }

/* Logo em brasa: a camada .hot é o logo recortado em cor de calor, que esfria até o logo real */
.heat{position:relative; display:block}
.heat img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:var(--pos, center)}
.heat .hotimg{opacity:0}
.heat.slam{animation:slam .46s var(--ease-hammer)}
@keyframes slam{0%{transform:scale(1.2,1.2) translateY(-5px)} 18%{transform:scale(1.12,.8)} 46%{transform:scale(.97,1.05)} 100%{transform:none}}

/* ================= Nav ================= */
.nav{position:sticky; top:env(safe-area-inset-top, 0px); z-index:60; border-bottom:1px solid transparent; transition:background .35s, border-color .35s}
.nav.scrolled{background:rgba(26,25,24,.8); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border-bottom-color:var(--rule)}
.nav .wrap{display:flex; align-items:center; gap:32px; min-height:68px}
.lockup{display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.lockup svg.mark{width:36px; height:31px}
.lockup .wm{font-family:var(--f-display); font-variation-settings:"wdth" 128, "wght" 680; font-size:17px; letter-spacing:.08em; line-height:1}
.lockup .wm small{display:block; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.44em; font-weight:500; color:var(--ink-3); margin-top:5px}
.nav-links{display:flex; gap:28px; margin-left:auto}
.nav-links a{position:relative; text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-2); transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--h1000); transform:scaleX(0); transition:transform .35s var(--ease-out); box-shadow:0 0 10px var(--h1000)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav .btn{min-height:42px; padding:0 18px; font-size:14px}
@media (max-width: 880px){ .nav-links{display:none} .nav .btn{margin-left:auto} }
@media (max-width: 420px){ .nav .btn .long{display:none} }

/* ================= Hero ================= */
.hero{position:relative; isolation:isolate; overflow:hidden; margin-top:-68px; padding-top:68px}
#forge{position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block}
.hero::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 75% 80% at 68% 46%, transparent 35%, rgba(14,13,12,.62) 100%), linear-gradient(180deg, transparent 72%, var(--bg) 100%)}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:stretch; gap:clamp(24px, 3vw, 48px); min-height:clamp(620px, calc(92svh - 68px), 880px); padding-block:clamp(24px, 4vw, 48px) clamp(40px, 5vw, 64px)}
.hero-copy{display:grid; gap:26px; align-content:center; padding-bottom:40px}
.hero h1{font-family:var(--f-display); font-variation-settings:"wdth" 125, "wght" 840; text-transform:uppercase; font-size:clamp(3rem, 7.2vw, 6.6rem); line-height:.86; letter-spacing:-.01em}
.hero h1 .l2{display:block; background:linear-gradient(180deg, #FFF3DC 8%, #FFC454 38%, #FF8A2A 62%, #D9582A 92%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 28px rgba(255,138,42,.35))}
.hero .lead{max-width:46ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.hero-meta{display:flex; flex-wrap:wrap; gap:8px 26px; padding-top:20px; border-top:1px solid var(--rule); font-family:var(--f-mono); font-size:11.5px; letter-spacing:.07em; color:var(--ink-3); text-transform:uppercase}
.hero-meta b{font-weight:500; color:var(--ink)}

.stage{position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; min-height:520px; -webkit-tap-highlight-color:transparent;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-38 16 16)'%3E%3Crect x='14.5' y='11' width='3.4' height='19' rx='1.4' fill='%238A5A34' stroke='%231E1E1E' stroke-width='1.2'/%3E%3Crect x='6.5' y='4' width='19' height='8.5' rx='1.6' fill='%23D9582A' stroke='%231E1E1E' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") 7 7, pointer}
.stage-mark{position:absolute; left:50%; top:calc((100% - 96px) / 2); transform:translate(-50%, -50%); width:min(80%, 520px); height:auto; aspect-ratio:212/180; transition:opacity 1s var(--ease-cool)}
.gl-on .stage-mark{opacity:0}
.stage-hint{position:absolute; top:4px; right:0; display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.stage-hint::before{content:""; width:22px; height:1px; background:var(--ink-3)}
.plate-row{position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center}
.plate{--hh:0; position:relative; display:flex; align-items:center; gap:16px; height:62px; padding:0 20px 0 18px; border-radius:14px; background:linear-gradient(180deg, #252321, #1A1918); border:1px solid #3A3632; box-shadow:inset 0 1px 0 rgba(255,236,214,.06), 0 18px 50px -18px rgba(0,0,0,.8)}
.plate.hit{animation:hit .42s var(--ease-hammer)}
.plate::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; border:1px solid rgba(255,138,42,calc(var(--hh) * .9)); box-shadow:0 0 calc(var(--hh) * 38px) calc(var(--hh) * -2px) rgba(255,110,20,calc(var(--hh) * .5)), inset 0 0 calc(var(--hh) * 26px) rgba(255,120,30,calc(var(--hh) * .28))}
.pspk{position:absolute; z-index:3; width:3px; height:3px; margin:-1.5px 0 0 -1.5px; border-radius:50%; background:#FFF1D0; box-shadow:0 0 6px 2px rgba(255,150,50,.9); pointer-events:none; animation:pspk .6s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes pspk{0%{transform:translate(0,0) scale(1.2); opacity:1} 55%{background:#FFC454; opacity:1} 100%{transform:translate(var(--dx), calc(var(--dy) + 26px)) scale(.4); background:#B0380F; opacity:0}}
.psteam{position:absolute; z-index:3; width:72px; height:34px; margin:-17px 0 0 -36px; border-radius:50%; background:radial-gradient(closest-side, rgba(236,228,216,.42), rgba(236,228,216,0)); filter:blur(3px); pointer-events:none; animation:psteam 1.5s ease-out forwards}
@keyframes psteam{0%{transform:translate(0,4px) scale(.5); opacity:0} 22%{opacity:.85} 100%{transform:translate(var(--dx, 0px), -38px) scale(1.7); opacity:0}}
@media (prefers-reduced-motion: reduce){ .heat.slam, .pspk, .psteam{animation:none} .pspk, .psteam{display:none} }
@keyframes hit{0%{transform:scale(1)} 16%{transform:scale(1.05,.86)} 100%{transform:scale(1)}}
.plate-k{flex:none; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#8C8378; line-height:1.35; width:7.5ch}
.plate .heat{width:168px; height:40px}
.plate-t{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.04em; font-variant-numeric:tabular-nums; width:7.5ch; text-align:right; color:#FFF3DC}
.strike{height:62px; display:inline-flex; align-items:center; gap:9px; padding:0 18px; border-radius:14px; border:1px solid var(--rule-2); background:rgba(36,34,32,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink); font:600 14px/1 var(--f-body); cursor:pointer; transition:transform .42s var(--ease-hammer), border-color .2s}
.strike:hover{border-color:var(--h1000)}
.strike:active{transform:scale(.95,.88); transition-duration:.08s}
.strike svg{width:19px; height:19px; color:var(--h1000)}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr; min-height:0; padding-top:4px}
  .stage{order:-1; min-height:clamp(360px, 96vw, 480px)}
  .stage-hint{display:none}
  .hero-copy{padding-bottom:0}
}
@media (max-width: 440px){
  .plate{gap:10px; padding:0 14px}
  .plate-k{display:none}
  .plate .heat{width:140px}
  .strike span{display:none}
}

/* ================= Faixa de logos ================= */
.rail{position:relative; z-index:2; border-block:1px solid var(--rule); background:linear-gradient(180deg, rgba(36,34,32,.6), rgba(30,30,30,.6))}
.rail .wrap{display:flex; align-items:center; gap:32px; min-height:96px}
.rail-label{flex:none; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); max-width:16ch; line-height:1.5}
.marquee{flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.marquee-track{display:flex; width:max-content; animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee ul{display:flex; align-items:center; gap:64px; padding:0 64px 0 0; margin:0; list-style:none}
.marquee li{display:flex; align-items:center; height:64px}
.marquee img{height:46px; width:auto; max-width:190px; object-fit:contain; filter:saturate(.8); opacity:.78; transition:filter .4s, opacity .4s, transform .42s var(--ease-hammer)}
.marquee li:hover img{filter:none; opacity:1; transform:scale(1.06)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (max-width: 720px){ .rail .wrap{flex-direction:column; align-items:flex-start; gap:6px; padding-block:18px} .rail-label{max-width:none} .marquee{width:100%} }
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none; width:auto}
  .marquee ul{flex-wrap:wrap; gap:18px 40px}
  .marquee ul + ul{display:none}
  .marquee{-webkit-mask-image:none; mask-image:none}
}

/* ================= Vitrine de jogos ================= */
.show-stage{position:relative; isolation:isolate; overflow:hidden; border-radius:26px; min-height:620px; aspect-ratio:16/8.4; background:#121110; border:1px solid var(--rule); box-shadow:0 40px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4)}
.show-art{position:absolute; inset:0; z-index:-2}
.show-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity 1s var(--ease-cool), transform 9s linear}
.show-art img.on{opacity:1; transform:scale(1)}
.show-stage::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(18,17,16,.96) 0%, rgba(18,17,16,.84) 30%, rgba(18,17,16,.35) 58%, rgba(18,17,16,.1) 100%), linear-gradient(0deg, rgba(18,17,16,.92) 0%, rgba(18,17,16,0) 42%), radial-gradient(ellipse 60% 70% at 0% 100%, rgba(217,88,42,.22), transparent 70%)}
.show-info{position:absolute; left:0; top:0; bottom:0; width:min(560px, 50%); display:flex; flex-direction:column; justify-content:center; gap:20px; padding:clamp(28px, 4vw, 56px)}
.show-info.swap > *{animation:swapIn .7s var(--ease-out) both}
.show-info.swap > *:nth-child(2){animation-delay:.05s} .show-info.swap > *:nth-child(3){animation-delay:.1s} .show-info.swap > *:nth-child(4){animation-delay:.15s} .show-info.swap > *:nth-child(5){animation-delay:.2s} .show-info.swap > *:nth-child(6){animation-delay:.25s}
@keyframes swapIn{from{opacity:.001; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .show-info.swap > *{animation:none} .show-art img{transition:opacity .01s; transform:none} }
.show-logo{--pos:left center; width:min(100%, 400px); height:clamp(90px, 10vw, 132px)}
.show-top{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.show-meta{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.show-desc{font-size:17.5px; color:#E4DDD2; max-width:46ch}
.show-list{display:grid; gap:8px; margin:0; padding:0; list-style:none}
.show-list li{display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; font-size:15px; color:var(--ink-2); line-height:1.45}
.show-list li::before{content:""; width:7px; height:7px; margin-top:7px; border-radius:1px; background:var(--h1000); box-shadow:0 0 8px var(--h1000); transform:rotate(45deg)}
.show-idea{padding:14px 16px; border-radius:12px; border:1px solid rgba(255,138,42,.28); background:linear-gradient(90deg, rgba(217,88,42,.14), rgba(217,88,42,.03)); font-size:15px; color:#E4DDD2; max-width:46ch}
.show-idea b{display:block; font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); margin-bottom:5px}
.show-cta{display:flex; flex-wrap:wrap; gap:10px}
.show-count{position:absolute; top:22px; right:24px; font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; color:rgba(241,235,225,.7); font-variant-numeric:tabular-nums}
.show-gallery{position:absolute; right:clamp(18px, 2.4vw, 32px); bottom:clamp(18px, 2.4vw, 32px); display:grid; gap:10px; justify-items:end}
.show-gallery .lbl{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(241,235,225,.75)}
.thumbs{display:flex; gap:10px}
.thumb{position:relative; width:clamp(104px, 10vw, 150px); aspect-ratio:16/9; padding:0; border-radius:12px; overflow:hidden; border:1px solid rgba(255,236,214,.22); background:#121110; cursor:zoom-in; box-shadow:0 12px 30px -12px rgba(0,0,0,.8); transition:transform .42s var(--ease-hammer), border-color .25s, box-shadow .3s}
.thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-out)}
.thumb:hover{transform:translateY(-4px); border-color:var(--h1000); box-shadow:0 16px 36px -12px rgba(255,138,42,.55)}
.thumb:hover img{transform:scale(1.08)}

.dock{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:10px; margin-top:14px}
.tab{position:relative; overflow:hidden; display:grid; gap:10px; justify-items:center; align-content:center; min-height:112px; padding:16px 12px 18px; border-radius:16px; border:1px solid var(--rule); background:var(--bg-2); color:var(--ink-2); cursor:pointer; font:inherit; transition:border-color .3s, background .3s, transform .42s var(--ease-hammer)}
.tab::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(255,138,42,.16), transparent 70%); opacity:0; transition:opacity .3s}
.tab:hover::before{opacity:1}
.tab:hover{border-color:var(--rule-2); transform:translateY(-2px)}
.tab img{height:40px; width:100%; max-width:140px; object-fit:contain; filter:saturate(.35) brightness(.85); opacity:.72; transition:filter .4s, opacity .4s}
.tab .nm{display:flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase}
.tab .dot{width:6px; height:6px; border-radius:50%}
.tab .dot.live{background:var(--live)} .tab .dot.forge{background:var(--h1000); box-shadow:0 0 6px var(--h1000)} .tab .dot.radar{box-shadow:inset 0 0 0 1.4px var(--ink-3)}
.tab .bar{position:absolute; left:14px; right:14px; bottom:9px; height:2px; border-radius:2px; background:rgba(255,236,214,.08); overflow:hidden; opacity:0}
.tab .bar i{display:block; height:100%; width:100%; background:linear-gradient(90deg, #D9582A, #FFC454); transform-origin:left; transform:scaleX(0)}
.tab[aria-selected="true"]{border-color:rgba(255,138,42,.55); background:linear-gradient(180deg, #2C2926, #242220); color:var(--ink); box-shadow:0 0 0 1px rgba(255,138,42,.15), 0 18px 40px -22px rgba(255,138,42,.6)}
.tab[aria-selected="true"] img{filter:none; opacity:1}
.tab[aria-selected="true"] .bar{opacity:1}
.dock.manual .bar{opacity:0 !important}

@media (max-width: 1080px){
  .show-stage{aspect-ratio:auto; min-height:0; display:flex; flex-direction:column}
  .show-art{position:relative; inset:auto; aspect-ratio:16/9; z-index:0}
  .show-stage::before{inset:auto; top:0; left:0; right:0; aspect-ratio:16/9; z-index:0; background:linear-gradient(0deg, #121110 0%, rgba(18,17,16,0) 55%)}
  .show-info{position:relative; width:auto; padding:0 clamp(20px, 4vw, 40px) 8px; margin-top:-56px; z-index:1}
  .show-gallery{position:relative; right:auto; bottom:auto; justify-items:start; padding:18px clamp(20px, 4vw, 40px) clamp(22px, 4vw, 40px); z-index:1}
  .thumbs{overflow-x:auto; max-width:100%; padding-bottom:4px; scroll-snap-type:x mandatory}
  .thumb{flex:none; scroll-snap-align:start; width:170px}
  .dock{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(150px, 1fr); overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory}
  .tab{scroll-snap-align:start}
}

/* ================= Celular ================= */
.mobile{position:relative; overflow:hidden; background:radial-gradient(ellipse 60% 70% at 75% 50%, rgba(217,88,42,.13), transparent 70%), var(--bg-deep); border-block:1px solid var(--rule)}
.mobile-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:clamp(32px, 5vw, 80px); align-items:center}
.mobile-copy{display:grid; gap:24px}
.mobile-copy .sec-head{margin-bottom:0}
.perks{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none}
.perks li{display:grid; gap:4px; padding:16px; border-radius:14px; border:1px solid var(--rule); background:rgba(36,34,32,.6)}
.perks b{font-family:var(--f-display); font-variation-settings:"wdth" 115, "wght" 780; text-transform:uppercase; font-size:17px; line-height:1.1}
.perks span{font-size:13.5px; color:var(--ink-3); line-height:1.4}
.phones{position:relative; aspect-ratio:1.35/1; perspective:1800px}
.phone{position:absolute; width:78%; padding:10px; border-radius:30px; background:linear-gradient(150deg, #3A3530, #111 55%); box-shadow:inset 0 0 0 1.5px #4A443E, 0 50px 90px -30px rgba(0,0,0,.95); transform-style:preserve-3d; transition:transform .9s var(--ease-out)}
.phone::before{content:""; position:absolute; left:4px; top:50%; width:3px; height:46px; transform:translateY(-50%); border-radius:3px; background:#050505}
.phone img{display:block; width:100%; height:auto; aspect-ratio:1400/646; object-fit:cover; border-radius:21px}
.phone.p1{left:0; top:4%; transform:rotateY(calc(16deg + var(--ry, 0deg))) rotateX(calc(6deg + var(--rx, 0deg))) translateZ(-120px); filter:brightness(.7)}
.phone.p2{right:0; top:30%; transform:rotateY(calc(-14deg + var(--ry, 0deg))) rotateX(calc(4deg + var(--rx, 0deg))) translateZ(-60px); filter:brightness(.82)}
.phone.p3{left:9%; top:52%; width:84%; transform:rotateY(calc(6deg + var(--ry, 0deg))) rotateX(calc(8deg + var(--rx, 0deg))) translateZ(40px); z-index:2}
.phones::after{content:""; position:absolute; left:10%; right:10%; bottom:-6%; height:22%; background:radial-gradient(ellipse at center, rgba(255,138,42,.35), transparent 70%); filter:blur(20px); z-index:-1}
@media (max-width: 960px){
  .mobile-grid{grid-template-columns:1fr}
  .perks{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width: 560px){ .perks{grid-template-columns:1fr} .phones{aspect-ratio:1.1/1} }

/* ================= Método ================= */
.steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; counter-reset:s}
.step{position:relative; overflow:hidden; display:grid; gap:14px; align-content:start; padding:26px 24px 30px; border-radius:18px; border:1px solid var(--rule); background:linear-gradient(180deg, var(--bg-2), var(--bg)); transition:border-color .35s, transform .42s var(--ease-hammer)}
.step::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--c); box-shadow:0 0 22px 2px var(--c)}
.step::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); opacity:0; transition:opacity .35s}
.step:hover{border-color:color-mix(in srgb, var(--c) 45%, transparent); transform:translateY(-4px)}
.step:hover::after{opacity:1}
.step-n{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--ink-3)}
.step .deg{font-family:var(--f-display); font-variation-settings:"wdth" 110, "wght" 860; font-size:clamp(3rem, 5.4vw, 4.6rem); line-height:.9; font-variant-numeric:tabular-nums; color:var(--c); text-shadow:0 0 30px color-mix(in srgb, var(--c) 55%, transparent)}
.step .deg small{font-size:.42em; vertical-align:top; margin-left:2px}
.step h3{font-family:var(--f-display); font-variation-settings:"wdth" 104, "wght" 800; font-size:clamp(1.25rem, 1.75vw, 1.6rem); text-transform:uppercase; line-height:1; overflow-wrap:anywhere}
.step p{color:var(--ink-2); font-size:15.5px}
.step.cold .deg{color:#8C8378; text-shadow:none}
@media (max-width: 1000px){ .steps{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 560px){ .steps{grid-template-columns:1fr} }

/* ================= CTA ================= */
.cta{position:relative; isolation:isolate; overflow:hidden; border-radius:28px; padding:clamp(32px, 7vw, 96px); min-height:420px; display:grid; align-content:center; border:1px solid var(--rule)}
.cta > img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover}
.cta::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(18,17,16,.95) 0%, rgba(18,17,16,.78) 45%, rgba(18,17,16,.25) 100%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(217,88,42,.35), transparent 70%)}
.cta h2{font-family:var(--f-display); font-variation-settings:"wdth" 122, "wght" 820; text-transform:uppercase; font-size:clamp(2.2rem, 5.6vw, 4.8rem); line-height:.92; max-width:13ch}
.cta p{color:var(--ink-2); max-width:48ch; margin-top:20px; font-size:18px}
.cta .hero-cta{margin-top:32px}

/* ================= Rodapé ================= */
.foot{padding-block:clamp(56px, 8vw, 104px) 36px; border-top:1px solid var(--rule); overflow:hidden}
.foot-wm{display:inline-block; font-family:var(--f-display); font-variation-settings:"wdth" 130, "wght" 840; text-transform:uppercase; font-size:10vw; line-height:.82; letter-spacing:-.01em; white-space:nowrap; background:linear-gradient(180deg, var(--ink) 30%, #8C8378 130%); -webkit-background-clip:text; background-clip:text; color:transparent}
.foot-sub{display:flex; align-items:center; gap:16px; margin-top:20px; font-family:var(--f-mono); font-size:12px; letter-spacing:.44em; color:var(--ink-3)}
.foot-sub::before,.foot-sub::after{content:""; flex:1; height:1px; background:var(--rule-2)}
.foot-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 32px; margin-top:48px; font-size:14px; color:var(--ink-2)}
.foot-row nav{display:flex; flex-wrap:wrap; gap:20px}
.foot-row a{text-decoration:none}
.foot-row a:hover{color:var(--ink)}
.legal{margin-top:22px; font-size:12.5px; color:var(--ink-3); max-width:92ch}

/* ================= Lightbox ================= */
.lb{width:min(1200px, 94vw); max-width:none; max-height:none; padding:0; border:0; background:transparent; color:var(--ink); overflow:visible}
.lb::backdrop{background:rgba(10,9,8,.88); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.lb figure{margin:0; display:grid; gap:14px}
.lb img{display:block; width:100%; max-height:78vh; object-fit:contain; border-radius:16px; background:#0E0D0C; box-shadow:0 40px 120px -30px rgba(0,0,0,.9)}
.lb figcaption{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--ink-2)}
.lb figcaption .mono{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; color:var(--ink-3)}
.lb-btn{position:absolute; top:50%; width:48px; height:48px; margin-top:-40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--rule-2); background:rgba(36,34,32,.85); color:var(--ink); font:600 18px/1 var(--f-body); cursor:pointer; transition:border-color .2s, transform .42s var(--ease-hammer)}
.lb-btn:hover{border-color:var(--h1000)}
.lb-prev{left:-24px} .lb-next{right:-24px}
.lb-close{position:absolute; top:-56px; right:0; margin:0; width:42px; height:42px; top:-54px}
@media (max-width: 700px){ .lb-prev{left:6px} .lb-next{right:6px} }

/* ================= Manual da marca ================= */
.manual-top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:40px}
.toc{display:flex; flex-wrap:wrap; gap:8px}
.toc a{display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--rule-2); text-decoration:none; font-size:13.5px; font-weight:500; color:var(--ink-2); transition:border-color .2s, color .2s}
.toc a:hover{border-color:var(--accent); color:var(--ink)}
.spec{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.5fr); gap:clamp(24px, 4vw, 64px); padding-block:clamp(40px, 5vw, 64px); border-top:1px solid var(--rule)}
.spec-l{display:grid; gap:14px; align-content:start}
.spec-l h3{font-family:var(--f-display); font-variation-settings:"wdth" 118, "wght" 780; text-transform:uppercase; font-size:26px; line-height:1}
.spec-l p{color:var(--ink-2); font-size:15.5px}
.rules{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px}
.rules li{display:grid; grid-template-columns:14px minmax(0,1fr); gap:8px; font-size:14px; line-height:1.45; color:var(--ink-2)}
.rules li::before{content:""; width:6px; height:6px; margin-top:7px; border-radius:1px; background:var(--accent); transform:rotate(45deg)}
.spec-r{display:grid; gap:20px; min-width:0}
@media (max-width: 900px){ .spec{grid-template-columns:1fr} }
.tiles{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.tile{aspect-ratio:1/1.05; border-radius:16px; display:grid; place-items:center; padding:18px}
.tile-coal{background:#1E1E1E; color:#E6DFD3; --mark-metal:#E6DFD3; --mark-cut:#1E1E1E; box-shadow:inset 0 0 0 1px var(--rule-2)}
.tile-white{background:#FFFFFF; color:#1E1E1E; --mark-metal:#1E1E1E; --mark-cut:#FFFFFF}
.tile-brasa{background:#D9582A; color:#FFFFFF; --mark-metal:#FFFFFF; --mark-cut:#D9582A; --flame-fill:#FFFFFF; --flame-core:#D9582A}
.stack{display:grid; justify-items:center; gap:10px; text-align:center; width:100%}
.stack svg.mark{width:44%; height:auto; aspect-ratio:212/180; margin-bottom:6px}
.stack .wm{font-family:var(--f-display); font-variation-settings:"wdth" 128, "wght" 680; font-size:clamp(15px, 1.9vw, 23px); letter-spacing:.08em; line-height:1}
.stack .sub{display:flex; align-items:center; gap:8px; width:84%; font-family:var(--f-mono); font-size:clamp(8px, .8vw, 10px); letter-spacing:.42em; font-weight:500}
.stack .sub::before,.stack .sub::after{content:""; flex:1; height:1px; background:currentColor; opacity:.55}
.stack .tag{font-family:var(--f-mono); font-size:clamp(7px, .72vw, 9px); letter-spacing:.34em; opacity:.8}
.tile-cap{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:8px}
.donts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.dont{display:grid; gap:10px}
.dont-box{aspect-ratio:16/10; border-radius:12px; background:var(--bg-2); border:1px solid var(--rule); display:grid; place-items:center; overflow:hidden; --mark-cut:var(--bg-2)}
.dont-box svg.mark{width:40%; height:auto; aspect-ratio:212/180}
.dont p{display:flex; gap:8px; align-items:flex-start; font-size:13.5px; color:var(--ink-2)}
.dont p::before{content:"✕"; color:#FF6B5B; font-weight:700; line-height:1.4}
.d-flame{--flame-fill:#3B82F6; --flame-core:#93C5FD}
.d-stretch{transform:scaleX(1.5) scaleY(.8)}
.d-glow{filter:drop-shadow(0 0 10px #FF8A2A) drop-shadow(5px 7px 0 rgba(0,0,0,.7))}
@media (max-width: 640px){ .tiles, .donts{grid-template-columns:1fr} .tile{aspect-ratio:16/11} .stack svg.mark{width:30%} }
.swatches{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); border-radius:16px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--rule)}
.sw{position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; min-height:196px; padding:14px; border:0; text-align:left; background:var(--c); color:var(--t); font:inherit; cursor:copy; transition:transform .42s var(--ease-hammer)}
.sw:hover{z-index:1; transform:translateY(-4px)}
.sw-temp{font-family:var(--f-display); font-variation-settings:"wdth" 110, "wght" 780; font-size:22px; line-height:1; font-variant-numeric:tabular-nums}
.sw-name{font-weight:600; font-size:14px; margin-top:6px}
.sw-hex{font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; opacity:.85}
.sw-use{font-size:12.5px; line-height:1.35; opacity:.85; margin-top:4px}
.sw.copied .sw-hex::after{content:" · copiado"}
.swatches.neutral .sw{min-height:120px}
.swatches.neutral .sw-temp{font-size:13px; font-family:var(--f-mono); font-variation-settings:"wdth" 100; letter-spacing:.08em; text-transform:uppercase}
@media (max-width: 900px){ .swatches{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width: 480px){ .swatches{grid-template-columns:repeat(2, minmax(0,1fr))} }
.type-rows{display:grid; border-top:1px solid var(--rule)}
.tr{display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:20px; align-items:baseline; padding-block:20px; border-bottom:1px solid var(--rule)}
.tr .mono{font-family:var(--f-mono); color:var(--ink-3); line-height:1.6; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase}
.t-display{font-family:var(--f-display); font-variation-settings:"wdth" 125, "wght" 840; font-size:clamp(2.2rem, 5vw, 4.4rem); line-height:.9; text-transform:uppercase}
.t-title{font-family:var(--f-display); font-variation-settings:"wdth" 118, "wght" 800; font-size:clamp(1.6rem, 3vw, 2.6rem); line-height:1; text-transform:uppercase}
.t-body{font-size:17px; color:var(--ink-2); max-width:58ch}
.t-mono{font-family:var(--f-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text)}
@media (max-width: 640px){ .tr{grid-template-columns:1fr; gap:8px} }
.axis{display:grid; gap:14px; padding:22px; border-radius:16px; background:var(--bg-2); border:1px solid var(--rule)}
.axis-word{font-family:var(--f-display); font-variation-settings:"wdth" 125, "wght" 820; font-size:clamp(1.5rem, 5.2vw, 4rem); line-height:1.05; text-transform:uppercase; white-space:nowrap; overflow:hidden}
.axis-ctl{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.axis-ctl label{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.axis-ctl input{flex:1; min-width:160px; accent-color:var(--accent)}
.axis-ctl output{font-family:var(--f-mono); font-size:12px; min-width:8ch; font-variant-numeric:tabular-nums}
.comp{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
.comp-box{display:grid; gap:14px; align-content:start; padding:22px; border-radius:16px; border:1px solid var(--rule); background:var(--bg)}
.comp-box .row{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.comp-box .mono{font-family:var(--f-mono); color:var(--ink-3); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase}
.comp-box .tab{width:170px}
@media (max-width: 640px){ .comp{grid-template-columns:1fr} }
.voice{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
.voice-col{display:grid; gap:10px; align-content:start; padding:22px; border-radius:16px; border:1px solid var(--rule)}
.voice-col h4{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.voice-col.yes h4{color:var(--live)}
.voice-col.no h4{color:#FF6B5B}
.voice-col q{display:block; quotes:none; font-size:17px; line-height:1.45; padding-block:10px; border-top:1px solid var(--rule)}
.voice-col.no q{color:var(--ink-3); text-decoration:line-through; text-decoration-color:rgba(255,107,91,.6); text-decoration-thickness:1.5px}
@media (max-width: 640px){ .voice{grid-template-columns:1fr} }
.motion{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.mo{display:grid; gap:10px; align-content:start; padding:20px; border-radius:16px; border:1px solid var(--rule)}
.mo-demo{height:96px; border-radius:10px; background:var(--bg-2); display:grid; place-items:center; overflow:hidden}
.mo h4{font-family:var(--f-display); font-variation-settings:"wdth" 118, "wght" 780; text-transform:uppercase; font-size:20px}
.mo .spec-t{font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3)}
.mo p{font-size:14px; color:var(--ink-2)}
.mo .btn{justify-self:start}
.demo-hammer{font-family:var(--f-display); font-variation-settings:"wdth" 100, "wght" 820; font-size:32px; text-transform:uppercase}
.demo-hammer.run{animation:hammer .42s var(--ease-hammer)}
@keyframes hammer{0%{transform:scale(1); font-variation-settings:"wdth" 100, "wght" 820} 20%{transform:scale(1.08,.72); font-variation-settings:"wdth" 150, "wght" 900} 100%{transform:scale(1); font-variation-settings:"wdth" 100, "wght" 820}}
.demo-ember{width:40px; height:40px; border-radius:50%; background:radial-gradient(circle at 50% 55%, #FFF3DC, #FFC454 30%, #FF8A2A 55%, #D9582A 80%)}
.demo-ember.on{animation:glow 3.2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 6px 1px rgba(255,138,42,.35); transform:scale(.96)} 50%{box-shadow:0 0 34px 10px rgba(255,138,42,.55); transform:scale(1.04)}}
.demo-cool{width:78%; height:16px; border-radius:999px; background:#FFF3DC; box-shadow:0 0 24px rgba(255,196,84,.8)}
.demo-cool.run{animation:cool 1.2s var(--ease-cool) forwards}
@keyframes cool{0%{background:#FFF3DC; box-shadow:0 0 24px rgba(255,196,84,.8)} 35%{background:#FF8A2A} 70%{background:#B0380F; box-shadow:0 0 10px rgba(217,88,42,.4)} 100%{background:#4A443E; box-shadow:none}}
@media (max-width: 760px){ .motion{grid-template-columns:1fr} }
.tokens{position:relative; border-radius:16px; background:#161514; border:1px solid var(--rule-2); overflow:hidden}
.tokens pre{margin:0; padding:22px; overflow-x:auto; font-family:var(--f-mono); font-size:12.5px; line-height:1.75; color:#D6CEC2; font-variation-settings:"wdth" 90}
.tokens pre .c{color:#877E74}
.tokens pre .v{color:#FF8A2A}
.tokens .btn{position:absolute; top:12px; right:12px; background:#2E2B28; color:#EEE8DE; border-color:#4A443E}

/* ================= Números do hero ================= */
.hero-stats{display:flex; flex-wrap:wrap; gap:14px 36px; margin:0; padding-top:22px; border-top:1px solid var(--rule)}
.hero-stats div{display:grid; gap:5px}
.hero-stats dt{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.hero-stats dd{margin:0; font-family:var(--f-display); font-variation-settings:"wdth" 115, "wght" 760; font-size:22px; text-transform:uppercase; line-height:1}
.plate-t{color:#8C8378} .plate-t b{color:#F1EBE1; font-weight:500}

/* ================= Sobre ================= */
.about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px, 5vw, 80px); align-items:end}
.about-grid .sec-head{margin-bottom:0}
.about-grid .sec-head h2{font-size:clamp(2.2rem, 4.4vw, 3.8rem)}
.about-text{display:grid; gap:18px}
.about-text p:not(.lead){color:var(--ink-2); max-width:60ch}
.mvv{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:clamp(40px, 5vw, 64px)}
.mv{position:relative; overflow:hidden; display:grid; gap:14px; align-content:start; padding:28px; border-radius:18px; border:1px solid var(--rule); background:linear-gradient(180deg, var(--bg-2), var(--bg)); transition:border-color .35s, transform .42s var(--ease-hammer)}
.mv:hover{border-color:rgba(255,138,42,.35); transform:translateY(-3px)}
.mv-k{font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-text)}
.mv h3{font-family:var(--f-display); font-variation-settings:"wdth" 112, "wght" 780; font-size:clamp(1.3rem, 1.9vw, 1.6rem); line-height:1.05; text-transform:uppercase}
.mv p{color:var(--ink-2); font-size:15.5px}
.mv ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.mv li{display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; font-size:16px}
.mv li::before{content:""; width:7px; height:7px; margin-top:8px; border-radius:1px; background:var(--h1000); box-shadow:0 0 8px var(--h1000); transform:rotate(45deg)}
@media (max-width: 900px){ .about-grid{grid-template-columns:1fr} .mvv{grid-template-columns:1fr} }

/* ================= Serviços ================= */
.services{background:var(--bg-deep); border-block:1px solid var(--rule)}
.svc{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px}
.svc-card{position:relative; overflow:hidden; display:grid; gap:14px; align-content:start; padding:28px 24px; border-radius:18px; border:1px solid var(--rule); background:var(--bg-2); transition:border-color .35s, transform .42s var(--ease-hammer)}
.svc-card:hover{border-color:rgba(255,138,42,.4); transform:translateY(-4px)}
.svc-ic{width:52px; height:52px; display:grid; place-items:center; border-radius:14px; color:var(--h1000); background:radial-gradient(circle at 50% 40%, rgba(255,138,42,.22), rgba(255,138,42,.05)); border:1px solid rgba(255,138,42,.3); box-shadow:0 0 24px -6px rgba(255,138,42,.5)}
.svc-ic svg{width:24px; height:24px}
.svc-card h3{font-family:var(--f-display); font-variation-settings:"wdth" 115, "wght" 780; font-size:21px; text-transform:uppercase; line-height:1.05}
.svc-card p{color:var(--ink-2); font-size:15.5px}
@media (max-width: 1000px){ .svc{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 560px){ .svc{grid-template-columns:1fr} }
.mv::after,.svc-card::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255,138,42,.12), transparent 70%); opacity:0; transition:opacity .35s}
.mv:hover::after,.svc-card:hover::after{opacity:1}

/* ================= Nível e conquistas ================= */
.lvl{display:inline-flex; align-items:center; gap:10px; height:42px; padding:0 12px 0 6px; border-radius:12px; border:1px solid var(--rule-2); background:rgba(36,34,32,.6); color:var(--ink); cursor:pointer; font:inherit; transition:border-color .25s}
.lvl:hover{border-color:rgba(255,138,42,.55)}
.lvl-n{display:grid; place-items:center; min-width:40px; height:30px; padding:0 6px; border-radius:8px; background:linear-gradient(180deg, #E6662F, #C9491E); color:#fff; font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.04em; box-shadow:inset 0 1px 0 rgba(255,222,190,.4)}
.lvl-meter{display:grid; gap:5px; min-width:84px}
.lvl-bar,.ach-meter span{display:block; height:5px; border-radius:5px; background:rgba(255,236,214,.1); overflow:hidden}
.lvl-bar i,.ach-meter i{display:block; height:100%; width:0; border-radius:5px; background:linear-gradient(90deg, #D9582A, #FFC454); box-shadow:0 0 8px rgba(255,138,42,.7); transition:width .8s var(--ease-out)}
.lvl-xp{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em; color:var(--ink-3); font-variant-numeric:tabular-nums; text-align:left; white-space:nowrap}
.lvl.up{animation:lvlup .9s var(--ease-hammer)}
@keyframes lvlup{0%{transform:scale(1)} 20%{transform:scale(1.12); box-shadow:0 0 0 6px rgba(255,138,42,.25), 0 0 30px rgba(255,138,42,.8)} 100%{transform:scale(1)}}
@media (max-width: 880px){ .lvl{margin-left:auto} .nav .btn{margin-left:0} }
@media (max-width: 560px){ .lvl-meter{min-width:44px} .lvl-xp{display:none} .nav .wrap{gap:10px} .lockup .wm{font-size:14px} .lockup svg.mark{width:30px; height:26px} }

.ach{position:fixed; z-index:70; top:calc(env(safe-area-inset-top, 0px) + 76px); right:max(16px, calc((100vw - var(--max)) / 2 + var(--gutter))); width:min(390px, calc(100vw - 32px)); max-height:calc(100vh - 110px); overflow:auto; padding:18px; border-radius:18px; border:1px solid var(--rule-2); background:rgba(28,27,26,.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 30px 80px -20px rgba(0,0,0,.9)}
.ach-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.ach-head b{display:block; font-family:var(--f-display); font-variation-settings:"wdth" 115, "wght" 780; font-size:19px; text-transform:uppercase; line-height:1.1}
.ach-head span{font-size:13px; color:var(--ink-3)}
.ach-x{flex:none; width:32px; height:32px; border-radius:8px; border:1px solid var(--rule-2); background:none; color:var(--ink-2); cursor:pointer}
.ach-meter{display:flex; align-items:center; gap:10px; margin:14px 0 16px}
.ach-meter span{flex:1; height:7px}
.ach-meter em{font-style:normal; font-family:var(--f-mono); font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.ach-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.ach-item{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; border:1px solid var(--rule); background:rgba(255,240,225,.02)}
.ach-ic{width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:rgba(255,236,214,.05); color:var(--ink-3)}
.ach-ic svg{width:20px; height:20px}
.ach-item b{display:block; font-size:14.5px; font-weight:600}
.ach-item small{display:block; font-size:12.5px; color:var(--ink-3); line-height:1.4}
.ach-item .pts{font-family:var(--f-mono); font-size:11px; color:var(--ink-3); white-space:nowrap; text-align:right}
.ach-item.on{border-color:rgba(255,138,42,.35); background:linear-gradient(90deg, rgba(217,88,42,.12), rgba(217,88,42,.02))}
.ach-item.on .ach-ic{color:#1E1E1E; background:linear-gradient(180deg, #FFC454, #FF8A2A); box-shadow:0 0 16px rgba(255,138,42,.5)}
.ach-item.on .pts{color:var(--accent-text)}
.ach-foot{margin-top:14px; font-size:12.5px; color:var(--ink-3)}
.ach-foot button{background:none; border:0; padding:0; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:inherit}

.toasts{position:fixed; z-index:80; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); display:grid; gap:10px; width:min(360px, calc(100vw - 32px)); pointer-events:none}
.toast{pointer-events:auto; display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:center; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,138,42,.45); background:rgba(28,27,26,.97); box-shadow:0 20px 50px -18px rgba(0,0,0,.9), 0 0 30px -10px rgba(255,138,42,.6); animation:toastIn .5s var(--ease-out) both}
.toast.out{animation:toastOut .4s ease-in forwards}
.toast .ach-ic{width:44px; height:44px; color:#1E1E1E; background:linear-gradient(180deg, #FFC454, #FF8A2A); box-shadow:0 0 18px rgba(255,138,42,.6)}
.toast small{display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text)}
.toast b{display:block; font-size:15px; line-height:1.3}
.toast span{display:block; font-size:13px; color:var(--ink-2)}
.toast a{color:var(--accent-text)}
@keyframes toastIn{from{opacity:.001; transform:translateY(16px) scale(.96)} to{opacity:1; transform:none}}
@keyframes toastOut{to{opacity:0; transform:translateX(30px)}}
@media (prefers-reduced-motion: reduce){ .toast, .toast.out, .lvl.up{animation:none} }

[hidden]{display:none !important}

/* ================= Menu no celular ================= */
.menu-btn{display:none; width:42px; height:42px; place-content:center; gap:5px; padding:0; border-radius:12px; border:1px solid var(--rule-2); background:rgba(36,34,32,.6); cursor:pointer}
.menu-btn span{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink); transition:transform .35s var(--ease-out), opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed; z-index:59; inset:0; display:flex; flex-direction:column; gap:26px; overflow:auto; padding:calc(env(safe-area-inset-top, 0px) + 88px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 28px); background:rgba(20,19,18,.98); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px)}
.mnav-links{display:grid; border-top:1px solid var(--rule)}
.mnav-links a{display:flex; justify-content:space-between; align-items:center; padding:15px 2px; border-bottom:1px solid var(--rule); text-decoration:none; color:var(--ink); font-family:var(--f-display); font-variation-settings:"wdth" 115, "wght" 780; font-size:clamp(1.5rem, 7vw, 2.1rem); text-transform:uppercase; line-height:1}
.mnav-links a::after{content:"→"; font-family:var(--f-mono); font-size:16px; color:var(--accent-text)}
.mnav > .btn{align-self:stretch}
.mnav-links a, .mnav > .btn, .mnav > .socials{animation:swapIn .5s var(--ease-out) both}
.mnav-links a:nth-child(2){animation-delay:.03s} .mnav-links a:nth-child(3){animation-delay:.06s} .mnav-links a:nth-child(4){animation-delay:.09s} .mnav-links a:nth-child(5){animation-delay:.12s} .mnav-links a:nth-child(6){animation-delay:.15s} .mnav-links a:nth-child(7){animation-delay:.18s}
@media (prefers-reduced-motion: reduce){ .mnav-links a, .mnav > .btn, .mnav > .socials{animation:none} }
@media (max-width: 880px){ .nav-cta{display:none !important} .menu-btn{display:grid} .nav.menu-open{background:rgba(20,19,18,.98); border-bottom-color:var(--rule)} }
@media (min-width: 881px){ .mnav{display:none !important} }
@media (max-width: 560px){ .lvl{padding:0 6px} }

.socials{display:flex; flex-wrap:wrap; gap:8px}
.soc{width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--rule-2); color:var(--ink-2); transition:color .2s, border-color .2s, transform .42s var(--ease-hammer)}
.soc:hover{color:var(--ink); border-color:var(--h1000); transform:translateY(-2px)}
.soc svg{width:20px; height:20px}

/* ================= Launcher (conceito) ================= */
.launcher{position:relative; overflow:hidden; background:radial-gradient(ellipse 70% 40% at 50% 0%, rgba(217,88,42,.13), transparent 70%)}
.lx{--lx-bg:#131211; --lx-p1:#181715; --lx-p2:#1D1C1A; --lx-ln:rgba(255,236,214,.07); position:relative; overflow:hidden; border-radius:18px; background:var(--lx-bg); border:1px solid rgba(255,236,214,.12); font-size:14px; box-shadow:0 60px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.5), 0 0 100px -30px rgba(255,138,42,.35)}
.lx button{font:inherit}
.lx-top{display:flex; align-items:center; gap:16px; height:58px; padding:0 12px 0 16px; background:linear-gradient(180deg, #1F1E1C, #181716); border-bottom:1px solid var(--lx-ln)}
.lx-brand{display:flex; align-items:center; gap:9px; font-family:var(--f-display); font-variation-settings:"wdth" 125, "wght" 720; letter-spacing:.08em; font-size:12.5px; white-space:nowrap}
.lx-brand svg.mark{width:26px; height:22px}
.lx-nav{display:flex; gap:2px}
.lx-nav button{position:relative; height:36px; padding:0 14px; border-radius:9px; border:0; background:none; color:var(--ink-3); font-weight:600; font-size:13.5px; cursor:pointer; transition:color .2s, background .2s}
.lx-nav button:hover{color:var(--ink)}
.lx-nav button[aria-selected="true"]{color:var(--ink); background:rgba(255,236,214,.07)}
.lx-nav button[aria-selected="true"]::after{content:""; position:absolute; left:14px; right:14px; bottom:-11px; height:2px; border-radius:2px; background:var(--h1000); box-shadow:0 0 10px var(--h1000)}
.lx-search{flex:1; max-width:300px; margin-left:auto; display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; border-radius:10px; background:rgba(255,236,214,.05); border:1px solid var(--lx-ln); color:var(--ink-3)}
.lx-search svg{width:16px; height:16px; flex:none}
.lx-search input{flex:1; min-width:0; background:none; border:0; outline:0; color:var(--ink); font:14px var(--f-body)}
.lx-search input::placeholder{color:var(--ink-3)}
.lx-search:focus-within{border-color:rgba(255,138,42,.5)}
.lx-me{display:flex; align-items:center; gap:10px; padding:4px 10px 4px 4px; border-radius:12px; border:1px solid transparent; background:none; color:var(--ink); cursor:pointer; text-align:left}
.lx-me:hover{border-color:var(--lx-ln); background:rgba(255,236,214,.04)}
.lx-me .avf{width:36px; height:36px}
.lx-me-t{display:grid; line-height:1.2}
.lx-me-t b{font-size:13px}
.lx-me-t small{font-family:var(--f-mono); font-size:9.5px; color:var(--accent-text)}
.lx-winctl{display:flex; gap:8px; margin-left:6px}
.lx-winctl i{width:11px; height:11px; border-radius:50%; background:rgba(255,236,214,.14)}
.lx-body{display:grid; grid-template-columns:72px minmax(0,1fr) 272px; height:720px}
.lx-foot{display:flex; flex-wrap:wrap; gap:6px 22px; padding:8px 16px; border-top:1px solid var(--lx-ln); background:var(--lx-p1); font-size:11.5px; color:var(--ink-3)}
.lx-foot .ok::before{content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live)}

/* trilho de jogos */
.lx-rail{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 0; background:var(--lx-p1); border-right:1px solid var(--lx-ln); overflow-y:auto; scrollbar-width:none}
.lx-rail::-webkit-scrollbar{display:none}
.lx-ri{position:relative; width:48px; height:48px; flex:none; padding:0; border-radius:14px; border:0; background:#232120; cursor:pointer; transition:border-radius .3s var(--ease-out), transform .42s var(--ease-hammer)}
.lx-ri img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; filter:saturate(.75) brightness(.72); transition:filter .25s}
.lx-ri:hover{border-radius:12px; transform:translateY(-1px)}
.lx-ri:hover img, .lx-ri[aria-current="true"] img{filter:none}
.lx-ri[aria-current="true"]{box-shadow:0 0 0 2px var(--lx-p1), 0 0 0 4px var(--h1000)}
.lx-ri::before{content:""; position:absolute; left:-12px; top:50%; width:4px; height:0; border-radius:0 4px 4px 0; background:var(--ink); transform:translateY(-50%); transition:height .25s var(--ease-out)}
.lx-ri:hover::before{height:18px}
.lx-ri[aria-current="true"]::before{height:32px; background:var(--h1000)}
.lx-ri .st{position:absolute; right:-2px; bottom:-2px; width:13px; height:13px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px var(--lx-p1)}
.lx-ri.home{display:grid; place-items:center; background:linear-gradient(160deg, #2C2926, #1A1918); border:1px solid var(--lx-ln)}
.lx-ri.home svg.mark{width:28px; height:24px}
.lx-rail hr{width:32px; height:2px; margin:4px 0; border:0; border-radius:2px; background:var(--lx-ln)}
.lx-tip{position:absolute; z-index:5; pointer-events:none; padding:6px 10px; border-radius:8px; background:#050505; color:var(--ink); font-size:12.5px; font-weight:600; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.6); opacity:0; transform:translateX(-4px); transition:opacity .15s, transform .15s}
.lx-tip.on{opacity:1; transform:none}

/* área principal */
.lx-main{position:relative; min-width:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,236,214,.15) transparent}
.lx-view{display:grid; gap:16px; align-content:start; padding:18px}
.lx-view.in{animation:swapIn .45s var(--ease-out) both}
.lx-rowh{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px}
.lx-rowh h4{font-family:var(--f-display); font-variation-settings:"wdth" 115, "wght" 780; font-size:17px; text-transform:uppercase}
.lx-rowh > span{font-size:12.5px; color:var(--ink-3)}
.lx-hero{position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:18px; align-items:end; min-height:400px; padding:24px; border-radius:16px}
.lx-hero > img.bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:opacity .4s var(--ease-cool), transform 8s linear; transform:scale(1.04)}
.lx-hero > img.bg.on{transform:scale(1)}
.lx-hero::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(19,18,17,.97) 0%, rgba(19,18,17,.55) 45%, rgba(19,18,17,.08) 80%), linear-gradient(90deg, rgba(19,18,17,.7), transparent 55%)}
.lx-hin{display:grid; gap:12px; align-content:end}
.lx-logo{--pos:left center; width:min(320px, 80%); height:92px}
.lx-tags{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.lx-desc{max-width:52ch; color:#E4DDD2; font-size:14.5px}
.lx-cta{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.lx-play{position:relative; overflow:hidden; min-width:230px; height:56px; padding:0 28px; border-radius:12px; border:0; cursor:pointer; color:#fff; font-weight:700; font-size:15px; letter-spacing:.08em; text-transform:uppercase; background:linear-gradient(180deg, #E6662F, #C9491E); box-shadow:inset 0 1px 0 rgba(255,222,190,.4), 0 14px 34px -12px rgba(217,88,42,.95); transition:transform .42s var(--ease-hammer), filter .2s, background .3s}
.lx-play:hover{filter:brightness(1.08)}
.lx-play:active{transform:scale(.97,.92); transition-duration:.08s}
.lx-play .fill{position:absolute; inset:0; transform-origin:left; transform:scaleX(var(--p, 0)); background:linear-gradient(90deg, #B0380F, #FF8A2A); opacity:0}
.lx-play span{position:relative; font-variant-numeric:tabular-nums}
.lx-play.busy{background:#2A2623; box-shadow:inset 0 0 0 1px rgba(255,138,42,.35)}
.lx-play.busy .fill{opacity:1}
.lx-play.playing{background:linear-gradient(180deg, #3E9B4B, #2E7A3A); box-shadow:inset 0 1px 0 rgba(220,255,220,.3), 0 14px 34px -12px rgba(94,194,106,.8)}
.lx-play.soon{background:rgba(255,236,214,.08); box-shadow:inset 0 0 0 1px rgba(255,236,214,.22); color:var(--ink)}
.lx-play.soon.on{box-shadow:inset 0 0 0 1px rgba(94,194,106,.6); color:var(--live)}
.lx-play:disabled{cursor:default; background:rgba(255,236,214,.05); box-shadow:inset 0 0 0 1px rgba(255,236,214,.12); color:var(--ink-3); filter:none}
.lx-srv{display:grid; gap:2px; padding:8px 14px; border-radius:12px; border:1px solid rgba(255,236,214,.14); background:rgba(19,18,17,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.lx-srv small{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.lx-srv b{font-size:13.5px}
.lx-srv b::before{content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--live)}
.lx-srv.off b::before{background:var(--ink-3)}
.lx-sub{font-size:12.5px; color:var(--ink-2)}
.lx-hside{display:grid; gap:10px; align-self:stretch; align-content:end}
.lx-gcard{display:grid; gap:10px; padding:14px; border-radius:14px; background:rgba(19,18,17,.72); border:1px solid rgba(255,236,214,.1); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.lx-gcard > small, .lx-cap, .pm-cap{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.lx-gprog{display:flex; align-items:center; gap:12px}
.lx-gprog b{display:block; font-size:15px}
.lx-gprog em{font-style:normal; font-size:12px; color:var(--ink-3)}
.ring{--p:0; --sz:56px; --th:6px; --in:#161514; width:var(--sz); height:var(--sz); flex:none; display:grid; place-items:center; align-content:center; border-radius:50%; background:radial-gradient(closest-side, var(--in) calc(100% - var(--th)), transparent calc(100% - var(--th) + 1px)), conic-gradient(from 0deg, #D9582A, #FFC454 calc(var(--p) * 1%), rgba(255,236,214,.1) 0)}
.ring b{font-family:var(--f-mono); font-size:12px; font-weight:600; line-height:1}
.ring.big{--sz:118px; --th:10px; --in:var(--lx-p2)}
.ring.big b{font-family:var(--f-display); font-variation-settings:"wdth" 110, "wght" 800; font-size:28px}
.ring.big em{font-style:normal; font-size:11px; color:var(--ink-3); margin-top:2px}
.lx-next{display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:center; padding-top:10px; border-top:1px solid var(--lx-ln)}
.lx-next img{width:44px; height:44px; border-radius:10px; object-fit:cover; filter:grayscale(.2)}
.lx-next small{display:block; font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text)}
.lx-next b{display:block; font-size:13px}
.lx-next span{display:block; font-size:11.5px; color:var(--ink-3); line-height:1.35}
.stack{display:flex; align-items:center}
.stack img{width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid #161514; margin-left:-8px}
.stack img:first-child{margin-left:0}
.stack span{margin-left:8px; font-size:12px; color:var(--ink-2)}
.lx-news{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.lx-nc{display:grid; grid-template-rows:auto 1fr; overflow:hidden; border-radius:12px; background:var(--lx-p2); border:1px solid var(--lx-ln); transition:border-color .25s, transform .42s var(--ease-hammer)}
.lx-nc:hover{border-color:rgba(255,138,42,.35); transform:translateY(-2px)}
.lx-nc img{display:block; width:100%; aspect-ratio:16/8; object-fit:cover}
.lx-nc div{display:grid; gap:4px; padding:12px 14px}
.lx-nc small{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text)}
.lx-nc b{font-size:14px; line-height:1.3}
.lx-nc span{font-size:12px; color:var(--ink-3)}

/* biblioteca */
.lx-seg{display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; border-radius:10px; background:rgba(255,236,214,.05); border:1px solid var(--lx-ln)}
.lx-seg button{height:30px; padding:0 12px; border-radius:7px; border:0; background:none; color:var(--ink-3); font-size:12.5px; font-weight:600; cursor:pointer}
.lx-seg button:hover{color:var(--ink)}
.lx-seg button[aria-pressed="true"]{background:rgba(255,236,214,.1); color:var(--ink)}
.lx-lib{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px}
.lx-lc{position:relative; overflow:hidden; aspect-ratio:3/4; padding:0; border-radius:14px; border:1px solid rgba(255,236,214,.08); background:var(--lx-p2); cursor:pointer; text-align:left; color:var(--ink); transition:border-color .25s, transform .42s var(--ease-hammer), box-shadow .3s}
.lx-lc > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out)}
.lx-lc::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(19,18,17,.96) 10%, rgba(19,18,17,.1) 65%)}
.lx-lc .in{position:absolute; left:12px; right:12px; bottom:12px; z-index:1; display:grid; gap:8px}
.lx-lc .in img{height:36px; width:100%; object-fit:contain; object-position:left center}
.lx-lc .in small{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2)}
.lx-lc .in small::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c)}
.lx-lc .go{position:absolute; z-index:2; top:10px; right:10px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; opacity:0; transform:scale(.8); transition:opacity .2s, transform .3s var(--ease-hammer)}
.lx-lc .go svg{width:14px; height:14px}
.lx-lc:hover{border-color:rgba(255,138,42,.5); transform:translateY(-3px); box-shadow:0 20px 40px -20px rgba(255,138,42,.5)}
.lx-lc:hover > img{transform:scale(1.06)}
.lx-lc:hover .go{opacity:1; transform:none}
.lx-empty{color:var(--ink-3); font-size:13.5px}

/* conquistas globais */
.lx-atop{display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,260px); gap:18px; align-items:center; padding:18px; border-radius:16px; background:linear-gradient(135deg, rgba(217,88,42,.16), rgba(217,88,42,.02) 60%), var(--lx-p2); border:1px solid rgba(255,138,42,.2)}
.lx-stats{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 18px; margin:0}
.lx-stats dt{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.lx-stats dd{margin:2px 0 0; font-family:var(--f-display); font-variation-settings:"wdth" 110, "wght" 780; font-size:20px; line-height:1.1}
.lx-reward{display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center; padding:12px; border-radius:12px; background:rgba(19,18,17,.6); border:1px solid var(--lx-ln)}
.lx-reward img{width:64px; height:64px; border-radius:12px; object-fit:cover}
.lx-reward small{display:block; font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text)}
.lx-reward b{display:block; font-size:14px}
.lx-reward span{display:block; font-size:12px; color:var(--ink-3); line-height:1.35}
.lx-reward .bar{display:block; height:5px; margin-top:6px; border-radius:5px; background:rgba(255,236,214,.1); overflow:hidden}
.lx-reward .bar i{display:block; height:100%; background:linear-gradient(90deg, #D9582A, #FFC454)}
.lx-filters{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px}
.lx-chips{display:flex; flex-wrap:wrap; gap:6px}
.lx-chips button{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--lx-ln); background:rgba(255,236,214,.03); color:var(--ink-2); font-size:12.5px; font-weight:600; cursor:pointer; transition:border-color .2s, color .2s, background .2s}
.lx-chips button:hover{color:var(--ink); border-color:rgba(255,236,214,.2)}
.lx-chips button[aria-pressed="true"]{color:var(--ink); border-color:rgba(255,138,42,.55); background:rgba(217,88,42,.14)}
.lx-chips button i{font-style:normal; font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3)}
.lx-chips button .live{width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live)}
.lx-ach{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.ac{--rc:#BFB6AA; position:relative; display:grid; grid-template-columns:54px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 14px 12px 12px; border-radius:14px; background:var(--lx-p2); border:1px solid var(--lx-ln); overflow:hidden}
.ac.on{border-color:color-mix(in srgb, var(--rc) 40%, transparent); background:linear-gradient(90deg, color-mix(in srgb, var(--rc) 14%, transparent), transparent 70%), var(--lx-p2)}
.ac .bdg{width:54px; height:58px; color:var(--rc)}
.ac .bdg .hx{fill:color-mix(in srgb, var(--rc) 16%, #161514); stroke:var(--rc); stroke-width:2}
.ac:not(.on) .bdg{color:#5E5852}
.ac:not(.on) .bdg .hx{fill:#1A1918; stroke:#3A3632}
.ac.on .bdg{filter:drop-shadow(0 0 10px color-mix(in srgb, var(--rc) 45%, transparent))}
.ac .lock{position:absolute; left:40px; top:44px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#2A2724; color:var(--ink-3); box-shadow:0 0 0 2px var(--lx-p2)}
.ac .lock svg{width:12px; height:12px}
.ac b{display:block; font-size:14px; line-height:1.25}
.ac p{font-size:12.5px; color:var(--ink-3); line-height:1.4; margin-top:2px}
.ac .meta{display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:6px; font-size:11px}
.ac .gt{padding:2px 8px; border-radius:6px; background:rgba(255,236,214,.06); color:var(--ink-2)}
.ac .gt.site{background:rgba(94,194,106,.12); color:var(--live)}
.ac .rr{color:var(--rc); font-weight:600}
.ac .pg{display:flex; align-items:center; gap:8px; margin-top:8px}
.ac .pg span{flex:1; height:5px; border-radius:5px; background:rgba(255,236,214,.08); overflow:hidden}
.ac .pg i{display:block; height:100%; border-radius:5px; background:var(--rc)}
.ac .pg em{font-style:normal; font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3)}
.ac .pts{font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); text-align:right; white-space:nowrap}
.ac.on .pts{color:var(--rc)}
.ac .pts small{display:block; font-size:10px; color:var(--ink-3)}

/* perfil e avatares */
.avf{--rc:#FF8A2A; position:relative; display:inline-grid; flex:none; width:40px; height:40px; padding:2px; border-radius:50%; background:conic-gradient(from 200deg, var(--rc), color-mix(in srgb, var(--rc) 25%, transparent) 40%, var(--rc) 70%, color-mix(in srgb, var(--rc) 25%, transparent))}
.avf img{width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid #131211; display:block}
.avf.sm{width:32px; height:32px}
.avf.lg{width:84px; height:84px; padding:3px}
.avf.xl{width:132px; height:132px; padding:4px; box-shadow:0 0 40px -6px color-mix(in srgb, var(--rc) 60%, transparent)}
.lx-prof{display:grid; grid-template-columns:280px minmax(0,1fr); gap:16px; align-items:start}
.lx-pcard{display:grid; justify-items:center; gap:10px; padding:24px 18px; border-radius:16px; text-align:center; background:radial-gradient(ellipse at 50% 0%, rgba(217,88,42,.22), transparent 60%), var(--lx-p2); border:1px solid var(--lx-ln)}
.pf-name{font-family:var(--f-display); font-variation-settings:"wdth" 115, "wght" 800; font-size:22px; text-transform:uppercase}
.pf-lvl{font-family:var(--f-mono); font-size:11px; color:var(--accent-text); letter-spacing:.06em}
.pf-stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; width:100%; margin-top:6px}
.pf-stats div{padding:8px 4px; border-radius:10px; background:rgba(255,236,214,.04)}
.pf-stats b{display:block; font-family:var(--f-display); font-variation-settings:"wdth" 110, "wght" 780; font-size:18px}
.pf-stats small{font-size:11px; color:var(--ink-3)}
.pf-cap{justify-self:start; margin-top:8px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.pf-show{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; width:100%}
.pf-show div{--rc:#BFB6AA; display:grid; justify-items:center; gap:4px; padding:8px 4px; border-radius:10px; background:rgba(255,236,214,.04); font-size:10.5px; color:var(--ink-2); line-height:1.25}
.pf-show .bdg{width:36px; height:39px; color:var(--rc)}
.pf-show .bdg .hx{fill:color-mix(in srgb, var(--rc) 16%, #161514); stroke:var(--rc); stroke-width:2}
.pf-show .empty{color:var(--ink-3); opacity:.6}
.avgrid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.avt{--rc:#BFB6AA; position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); gap:10px; align-items:center; padding:10px; border-radius:14px; border:1px solid var(--lx-ln); background:var(--lx-p2); color:var(--ink); text-align:left; cursor:pointer; transition:border-color .25s, transform .42s var(--ease-hammer)}
.avt img{width:56px; height:56px; border-radius:12px; object-fit:cover; box-shadow:0 0 0 2px var(--lx-p2), 0 0 0 3.5px var(--rc)}
.avt b{display:block; font-size:13.5px}
.avt small{display:block; font-size:11.5px; color:var(--ink-3); line-height:1.35}
.avt:hover{border-color:rgba(255,236,214,.2); transform:translateY(-2px)}
.avt.sel{border-color:var(--h1000); background:linear-gradient(90deg, rgba(217,88,42,.16), transparent), var(--lx-p2)}
.avt.sel small{color:var(--accent-text)}
.avt.locked{cursor:not-allowed}
.avt.locked img{filter:grayscale(1) brightness(.45); box-shadow:0 0 0 2px var(--lx-p2), 0 0 0 3.5px #3A3632}
.avt.locked::after{content:""; position:absolute; left:28px; top:28px; width:22px; height:22px; border-radius:50%; background:#2A2724 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFB6AA' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/12px no-repeat; box-shadow:0 0 0 2px var(--lx-p2)}
.avt.locked:hover{transform:none}
.avt.new{animation:avnew 1.2s var(--ease-hammer)}
@keyframes avnew{0%{box-shadow:0 0 0 0 rgba(255,196,84,.8)} 100%{box-shadow:0 0 0 18px rgba(255,196,84,0)}}

/* painel social */
.lx-social{display:flex; flex-direction:column; gap:12px; padding:16px 14px; background:var(--lx-p1); border-left:1px solid var(--lx-ln); overflow-y:auto; scrollbar-width:none}
.lx-sh{display:flex; justify-content:space-between; align-items:baseline}
.lx-sh b{font-family:var(--f-display); font-variation-settings:"wdth" 115, "wght" 780; font-size:15px; text-transform:uppercase}
.lx-sh span{font-size:12px; color:var(--live)}
.lx-party{display:grid; gap:10px; padding:12px; border-radius:14px; background:linear-gradient(160deg, rgba(217,88,42,.14), rgba(217,88,42,.02)); border:1px solid rgba(255,138,42,.22)}
.lx-party > small{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text)}
.party{display:flex; gap:8px}
.party .slot{width:40px; height:40px; border-radius:50%; border:1.5px dashed rgba(255,236,214,.2); display:grid; place-items:center; color:var(--ink-3); font-size:18px}
.lx-inv{height:34px; border-radius:9px; border:1px solid rgba(255,138,42,.45); background:none; color:var(--accent-text); font-weight:600; font-size:12.5px; cursor:pointer}
.lx-inv:hover{background:rgba(217,88,42,.12)}
.lx-inv.done{border-color:rgba(94,194,106,.5); color:var(--live)}
.lx-fl, .lx-act{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.lx-fr{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:10px; align-items:center; padding:6px; border-radius:10px}
.lx-fr:hover{background:rgba(255,236,214,.04)}
.lx-fr .avf{width:40px; height:40px}
.lx-fr .avf::after{content:""; position:absolute; right:0; bottom:0; width:11px; height:11px; border-radius:50%; background:var(--s); box-shadow:0 0 0 2.5px var(--lx-p1)}
.lx-fr b{display:block; font-size:13px}
.lx-fr small{display:block; font-size:11.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lx-fr small.pl{color:var(--live)}
.lx-fr button{width:30px; height:30px; display:grid; place-items:center; border-radius:8px; border:1px solid var(--lx-ln); background:none; color:var(--ink-3); cursor:pointer; opacity:0; transition:opacity .2s}
.lx-fr:hover button, .lx-fr button:focus-visible{opacity:1}
.lx-fr button svg{width:14px; height:14px}
.lx-fr.off{opacity:.55}
.lx-act li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:start; padding:6px; font-size:12px; color:var(--ink-3); line-height:1.4}
.lx-act img{width:28px; height:28px; border-radius:50%; object-fit:cover}
.lx-act b{color:var(--ink); font-weight:600}
.lx-act em{font-style:normal; color:var(--rc, var(--accent-text)); font-weight:600}

/* app companheiro */
.lxm{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(32px, 6vw, 96px); align-items:center; margin-top:clamp(56px, 7vw, 96px)}
.lxm-copy{display:grid; gap:18px; max-width:520px}
.lxm-copy h3{font-family:var(--f-display); font-variation-settings:"wdth" 118, "wght" 800; font-size:clamp(1.9rem, 3.6vw, 3rem); line-height:.95; text-transform:uppercase}
.lxm-copy h3 em{font-style:normal; color:var(--accent-text)}
.lxm-copy p{color:var(--ink-2)}
.lxm-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.lxm-list li{display:grid; gap:2px; padding-left:18px; position:relative}
.lxm-list li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:1px; background:var(--h1000); box-shadow:0 0 8px var(--h1000); transform:rotate(45deg)}
.lxm-list b{font-size:15.5px}
.lxm-list span{font-size:14px; color:var(--ink-3)}
.pm{position:relative; width:320px; max-width:100%; aspect-ratio:320/660; padding:12px; border-radius:48px; background:linear-gradient(150deg, #3A3530, #111 55%); box-shadow:inset 0 0 0 1.5px #4A443E, 0 60px 100px -30px rgba(0,0,0,.95), 0 0 80px -20px rgba(255,138,42,.35)}
.pm::before{content:""; position:absolute; z-index:3; left:50%; top:22px; width:92px; height:26px; transform:translateX(-50%); border-radius:20px; background:#050505}
.pm-scr{position:relative; display:flex; flex-direction:column; height:100%; overflow:hidden; border-radius:37px; background:#131211}
.pm-sb{display:flex; justify-content:space-between; align-items:center; height:44px; padding:0 26px 0 30px; font-size:13px; flex:none}
.pm-sb span{display:flex; gap:5px; align-items:center}
.pm-sb svg{height:12px; width:auto}
.pm-hd{display:flex; align-items:center; gap:8px; padding:6px 16px 10px; flex:none}
.pm-hd svg.mark{width:24px; height:20px}
.pm-hd b{font-family:var(--f-display); font-variation-settings:"wdth" 120, "wght" 760; font-size:14px; letter-spacing:.06em; text-transform:uppercase}
.pm-hd .avf{margin-left:auto}
.pm-body{flex:1; min-height:0; overflow-y:auto; padding:0 14px 14px; scrollbar-width:none}
.pm-body::-webkit-scrollbar{display:none}
.pm-v{display:grid; gap:12px; align-content:start}
.pm-v.in{animation:swapIn .4s var(--ease-out) both}
.pm-hello{font-size:15px}
.pm-hello b{color:var(--accent-text)}
.pm-lvl{display:flex; align-items:center; gap:8px}
.pm-lvl span{flex:1; height:6px; border-radius:6px; background:rgba(255,236,214,.1); overflow:hidden}
.pm-lvl i{display:block; height:100%; width:0; background:linear-gradient(90deg, #D9582A, #FFC454); transition:width .8s var(--ease-out)}
.pm-lvl em{font-style:normal; font-family:var(--f-mono); font-size:10px; color:var(--ink-3)}
.pm-play{position:relative; overflow:hidden; border-radius:16px; border:1px solid rgba(255,236,214,.1)}
.pm-play img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover}
.pm-play div{position:absolute; inset:auto 0 0 0; display:grid; gap:2px; padding:44px 12px 12px; background:linear-gradient(0deg, rgba(19,18,17,.98) 35%, rgba(19,18,17,.75) 65%, transparent)}
.pm-play small{font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text)}
.pm-play b{font-size:15px}
.pm-play a{justify-self:start; margin-top:6px; padding:7px 12px; border-radius:9px; background:var(--accent); color:#fff; font-size:12px; font-weight:700; text-decoration:none}
.pm-list{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.pm-li{--rc:#BFB6AA; display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 10px; border-radius:12px; background:#1C1B19; border:1px solid rgba(255,236,214,.06)}
.pm-li .bdg{width:34px; height:37px; color:var(--rc)}
.pm-li .bdg .hx{fill:color-mix(in srgb, var(--rc) 16%, #161514); stroke:var(--rc); stroke-width:2}
.pm-li.lock .bdg{color:#5E5852}
.pm-li.lock .bdg .hx{fill:#1A1918; stroke:#3A3632}
.pm-li b{display:block; font-size:12.5px; line-height:1.25}
.pm-li small{display:block; font-size:10.5px; color:var(--ink-3)}
.pm-li em{font-style:normal; font-family:var(--f-mono); font-size:10px; color:var(--rc)}
.pm-li.lock em{color:var(--ink-3)}
.pm-li .avf{width:34px; height:34px}
.pm-li .avf::after{content:""; position:absolute; right:0; bottom:0; width:9px; height:9px; border-radius:50%; background:var(--s); box-shadow:0 0 0 2px #1C1B19}
.pm-ach-top{display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:linear-gradient(135deg, rgba(217,88,42,.16), rgba(217,88,42,.02)), #1C1B19}
.pm-ach-top .ring{--in:#1E1C1A}
.pm-ach-top b{display:block; font-size:15px}
.pm-ach-top em{font-style:normal; font-size:11.5px; color:var(--ink-3)}
.pm-me{display:grid; justify-items:center; gap:4px; padding:10px 0 4px; text-align:center}
.pm-me b{font-family:var(--f-display); font-variation-settings:"wdth" 115, "wght" 800; font-size:18px; text-transform:uppercase; margin-top:6px}
.pm-me em{font-style:normal; font-family:var(--f-mono); font-size:10px; color:var(--accent-text)}
.pm-avs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
.pm-avs button{--rc:#BFB6AA; position:relative; aspect-ratio:1; padding:0; border-radius:14px; border:0; background:none; cursor:pointer}
.pm-avs img{width:100%; height:100%; border-radius:14px; object-fit:cover; box-shadow:0 0 0 2px #131211, 0 0 0 3.5px var(--rc)}
.pm-avs button.locked img{filter:grayscale(1) brightness(.4); box-shadow:0 0 0 2px #131211, 0 0 0 3.5px #3A3632}
.pm-avs button.sel img{box-shadow:0 0 0 2px #131211, 0 0 0 4px var(--h1000), 0 0 18px rgba(255,138,42,.6)}
.pm-tabs{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); flex:none; padding:8px 8px 18px; border-top:1px solid rgba(255,236,214,.07); background:#161514}
.pm-tabs button{display:grid; justify-items:center; gap:3px; padding:4px 0; border:0; background:none; color:var(--ink-3); font:600 10px var(--f-body); cursor:pointer}
.pm-tabs svg{width:22px; height:22px}
.pm-tabs button[aria-pressed="true"]{color:var(--h1000)}

.lw-note{margin-top:14px; font-size:12.5px; color:var(--ink-3); text-align:center}
.lw-feats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:clamp(56px, 7vw, 96px)}
.lw-plat{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; padding:18px 22px; border-radius:16px; border:1px solid var(--rule); background:var(--bg-2)}
.lw-plat .chips{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.pchip{display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--rule-2); font-size:13.5px; color:var(--ink-2)}
.pchip svg{width:16px; height:16px; color:var(--h1000)}

@media (max-width: 1240px){ .lx-body{grid-template-columns:72px minmax(0,1fr)} .lx-social{display:none} .lx-search{max-width:220px} }
@media (max-width: 1000px){ .lx-brand b{display:none} .lx-search{max-width:170px} }
@media (max-width: 880px) and (min-width: 761px){ .lx-search{display:none} .lx-me{margin-left:auto} }
@media (max-width: 1000px){
  .lw-feats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .lx-me-t, .lx-winctl{display:none}
  .lx-hero{grid-template-columns:1fr}
  .lx-hside{grid-template-columns:repeat(2, minmax(0,1fr)); align-self:auto}
  .lx-atop{grid-template-columns:auto minmax(0,1fr)}
  .lx-reward{grid-column:1 / -1}
  .lx-ach{grid-template-columns:1fr}
  .lx-prof{grid-template-columns:1fr}
  .avgrid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .lxm{grid-template-columns:1fr; justify-items:center}
  .lxm-copy{max-width:640px}
}
@media (max-width: 760px){
  .lx-top{height:auto; flex-wrap:wrap; gap:8px; padding:10px}
  .lx-brand b{display:none}
  .lx-nav{order:3; flex-basis:100%; overflow-x:auto; scrollbar-width:none}
  .lx-nav button{flex:none; padding:0 12px}
  .lx-nav button[aria-selected="true"]::after{bottom:2px}
  .lx-search{max-width:none}
  .lx-body{grid-template-columns:minmax(0,1fr); height:auto}
  .lx-rail{flex-direction:row; padding:10px; overflow-x:auto; border-right:0; border-bottom:1px solid var(--lx-ln)}
  .lx-rail hr{width:2px; height:32px; margin:0 4px}
  .lx-ri::before{display:none}
  .lx-main{overflow:visible}
  .lx-view{padding:12px}
  .lx-hero{min-height:0; padding:16px}
  .lx-hside{grid-template-columns:1fr}
  .lx-play{min-width:0; flex:1}
  .lx-news{grid-template-columns:1fr}
  .lx-atop{grid-template-columns:1fr; justify-items:start}
  .lx-stats{width:100%}
  .avgrid{grid-template-columns:1fr}
  .lx-foot span:not(.ok){display:none}
  .lw-feats{grid-template-columns:1fr}
  .lw-plat .btn{width:100%}
  .pm{width:300px}
}

/* ================= Novidades ================= */
.news-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.nw{display:grid; grid-template-rows:auto 1fr; overflow:hidden; border-radius:18px; border:1px solid var(--rule); background:var(--bg-2); text-decoration:none; color:inherit; transition:transform .42s var(--ease-hammer), border-color .3s}
.nw:hover{transform:translateY(-4px); border-color:rgba(255,138,42,.4)}
.nw-img{display:block; aspect-ratio:16/9; overflow:hidden; background:#121110}
.nw-img img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)}
.nw:hover .nw-img img{transform:scale(1.05)}
.nw-art{display:flex; align-items:center; justify-content:center; gap:14px; background:radial-gradient(ellipse at 50% 120%, rgba(217,88,42,.5), transparent 65%), linear-gradient(160deg, #26231F, #151413)}
.nw-art svg.mark{width:30%; height:auto; aspect-ratio:212/180; --mark-cut:#1E1C1A}
.nw-art span{font-family:var(--f-display); font-variation-settings:"wdth" 125, "wght" 800; font-size:clamp(18px, 2vw, 26px); letter-spacing:.06em; text-transform:uppercase}
.nw-body{display:grid; gap:10px; align-content:start; padding:20px}
.nw-top{display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.nw-top b{color:var(--accent-text); font-weight:500}
.nw h3{font-family:var(--f-display); font-variation-settings:"wdth" 108, "wght" 780; font-size:20px; line-height:1.1; text-transform:uppercase}
.nw p{font-size:15px; color:var(--ink-2)}
.nw .more{font-size:13.5px; color:var(--accent-text); font-weight:600}
@media (max-width: 900px){ .news-grid{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px} .nw{scroll-snap-align:start} }

/* ================= Contato ================= */
.contact{background:var(--bg-deep); border-block:1px solid var(--rule)}
.contact-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px}
.ct{position:relative; overflow:hidden; display:grid; gap:14px; align-content:start; padding:26px 22px; border-radius:18px; border:1px solid var(--rule); background:var(--bg-2); transition:border-color .35s}
.ct:hover{border-color:rgba(255,138,42,.35)}
.ct h3{font-family:var(--f-display); font-variation-settings:"wdth" 115, "wght" 780; font-size:21px; text-transform:uppercase; line-height:1.05}
.ct p{color:var(--ink-2); font-size:15px}
.ct .btn-ghost{justify-self:start}
.mail{display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; padding:5px 5px 5px 11px; border-radius:10px; border:1px solid var(--rule-2); background:rgba(255,240,225,.03); font-family:var(--f-mono); font-variation-settings:"wdth" 82; font-size:11px; color:var(--ink)}
.mail span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mail button{flex:none; width:32px; height:32px; display:grid; place-items:center; padding:0; border-radius:8px; border:1px solid var(--rule-2); background:none; color:var(--ink-2); cursor:pointer}
.mail button svg{width:15px; height:15px}
.mail button:hover{border-color:var(--h1000); color:var(--ink)}
.mail button.ok{color:var(--live); border-color:rgba(94,194,106,.5)}
@media (max-width: 1100px){ .contact-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 600px){ .contact-grid{grid-template-columns:1fr} }

/* ================= Rodapé ================= */
.foot{padding-block:clamp(56px, 8vw, 96px) 28px; border-top:1px solid var(--rule); overflow:hidden; background:linear-gradient(180deg, var(--bg), #161514)}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr)) minmax(0,1.35fr); gap:clamp(24px, 3vw, 44px)}
.foot-brand{display:grid; gap:18px; align-content:start}
.foot-brand p{font-size:14.5px; color:var(--ink-2); max-width:38ch}
.foot-col h4{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px}
.foot-col ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.foot-col a{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink-2); text-decoration:none; transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-col .dot{width:6px; height:6px; border-radius:50%; flex:none}
.foot-col .dot.live{background:var(--live)} .foot-col .dot.forge{background:var(--h1000); box-shadow:0 0 6px var(--h1000)} .foot-col .dot.radar{box-shadow:inset 0 0 0 1.4px var(--ink-3)}
.foot-col .mails{display:grid; gap:14px}
.foot-col .mails small{display:block; font-size:11.5px; color:var(--ink-3); margin-bottom:6px}
.foot .foot-wm{margin-top:clamp(56px, 7vw, 96px)}
.foot-bottom{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px; margin-top:32px; padding-top:22px; border-top:1px solid var(--rule); font-size:13px; color:var(--ink-3)}
.foot-bottom nav{display:flex; flex-wrap:wrap; gap:18px}
.foot-bottom nav a{color:var(--ink-2); text-decoration:none}
.foot-bottom nav a:hover{color:var(--ink)}
.lang{display:inline-flex; align-items:center; gap:8px}
.lang svg{width:16px; height:16px}
.to-top{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:10px; border:1px solid var(--rule-2); background:none; color:var(--ink-2); font:600 13px var(--f-body); cursor:pointer; transition:border-color .2s, color .2s}
.to-top:hover{border-color:var(--h1000); color:var(--ink)}
@media (max-width: 1100px){ .foot-grid{grid-template-columns:repeat(3, minmax(0,1fr))} .foot-brand{grid-column:1 / -1} .foot-contact{grid-column:span 3} .foot-contact .mails{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width: 700px){ .foot-grid{grid-template-columns:repeat(2, minmax(0,1fr))} .foot-contact{grid-column:1 / -1} .foot-contact .mails{grid-template-columns:1fr} .foot-bottom{flex-direction:column; align-items:flex-start} }

@media (max-width: 1180px) and (min-width: 881px){ .nav .wrap{gap:18px} .nav-links{gap:18px} .lvl-xp{display:none} .lvl-meter{min-width:48px} }

.archive-note{position:fixed;z-index:9999;bottom:14px;left:50%;transform:translateX(-50%);background:#e6dfd3;color:#25211d;border:1px solid #b39b7a;box-shadow:0 8px 30px #0005;border-radius:6px;padding:10px 16px;font:12px/1.5 sans-serif;max-width:90vw;white-space:nowrap}.archive-note a{color:#934119;font-weight:bold;margin-left:12px}@media(max-width:650px){.archive-note{font-size:10px;white-space:normal;width:90vw}}