/* ===== 00-base.css ===== */
/* ==========================================================================
   PLF PVP — base v2 ("HUD escuro")
   Tokens, tipografia, componentes, topo, hero, faixa e rodapé.
   Seções ficam em src/css/NN-nome.css (ver src/DESIGN.md).
   ========================================================================== */

/* Paleta oficial (manual PRO LEAGUE © Visual Identity, VISUALS CO. 2025):
   01 Pêssego Suave #FFF2EB · 02 Cinza Lilás Suave #DBD9DB · 03 Vermelho Impacto #F32028 · 04 Preto Absoluto #030303 */
:root {
  color-scheme: dark;
  --peach: #FFF2EB;
  --lilac: #DBD9DB;
  --bg: #030303;
  --bg-2: #070707;
  --surface: #0C0B0D;
  --surface-2: #131214;
  --line: #1D1C1F;
  --line-2: #2B2A2E;
  --text: #FFF2EB;
  --text-2: #B3B0B4;
  --text-3: #8A868C;
  --red: #F32028;
  --red-hot: #FF3B42;
  --red-deep: #A3121A;
  --red-wash: rgba(243, 32, 40, .09);
  --online: #3DDC84;

  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --ui: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --nav-h: 76px;
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --rgb-split: -1.5px 0 rgba(37, 99, 255, .45), 1.5px 0 rgba(255, 214, 0, .45);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); overflow-x: clip; scrollbar-gutter: stable; }
html.menu-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
img, video, svg { display: block; max-width: 100%; }
img, video { -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { color: var(--text); font-weight: 600; }
::selection { background: var(--red); color: var(--text); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Linhas de monitor (CRT) bem sutis sobre tudo */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 120;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  opacity: .5;
  mix-blend-mode: multiply;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  background: var(--red); color: var(--text); padding: 12px 18px;
  font: 700 14px var(--ui); letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { top: 16px; }

/* ---------- Tipografia ---------- */
.t-display {
  font: 400 clamp(3.2rem, 8vw, 8rem)/.9 var(--display);
  color: var(--text); text-transform: uppercase; letter-spacing: -.005em;
  text-shadow: var(--rgb-split); text-wrap: balance;
}
.t-h2 {
  font: 400 clamp(2.6rem, 6vw, 6rem)/.92 var(--display);
  color: var(--text); text-transform: uppercase; text-wrap: balance;
  text-shadow: var(--rgb-split);
}
.t-display em, .t-h2 em { font-style: normal; color: var(--red); }
.t-h3 { font: 700 clamp(22px, 2.2vw, 30px)/1.05 var(--ui); color: var(--text); text-transform: uppercase; letter-spacing: .02em; }
.t-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--red);
}
.t-eyebrow::before { content: ''; width: 18px; height: 2px; background: currentColor; }
.t-label { font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(80px, 10vw, 140px); background: var(--bg); }
.section--alt { background: var(--bg-2); }
.section--grid {
  background-color: var(--bg-2);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
}
/* Seções claras/vermelhas (como as peças oficiais): os tokens de texto se invertem */
.section--peach {
  background: var(--peach); color: #3A373C;
  --text: #030303; --text-2: #3A373C; --text-3: #6A666D;
  --line: rgba(3, 3, 3, .12); --line-2: rgba(3, 3, 3, .22);
  --surface: #FFFFFF; --surface-2: #F6ECE6;
}
.section--red {
  background: var(--red); color: var(--peach);
  --text: var(--peach); --text-2: rgba(255, 242, 235, .88); --text-3: rgba(255, 242, 235, .7);
  --line: rgba(3, 3, 3, .2); --line-2: rgba(3, 3, 3, .35);
  --surface: rgba(3, 3, 3, .18); --surface-2: rgba(3, 3, 3, .28);
}
.section--peach .t-h2, .section--red .t-h2 { text-shadow: none; }
.section--red .t-eyebrow, .section--red .t-h2 em { color: #030303; }
.section-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--row { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 40px; }
.section-lead { max-width: 58ch; font-size: 18px; color: var(--text-2); }
@media (max-width: 720px) { .section-head--row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- HUD: cantoneiras de mira ---------- */
.hud { position: relative; --hud: var(--line-2); --hud-size: 14px; }
.hud::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--hud), var(--hud)) top left / var(--hud-size) 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) top left / 2px var(--hud-size) no-repeat,
    linear-gradient(var(--hud), var(--hud)) top right / var(--hud-size) 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) top right / 2px var(--hud-size) no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom left / var(--hud-size) 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom left / 2px var(--hud-size) no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom right / var(--hud-size) 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom right / 2px var(--hud-size) no-repeat;
  transition: --hud .25s, opacity .25s;
}
.hud--red { --hud: var(--red); }
.hud--hover::after { opacity: .9; }
.hud--hover:hover, .hud--hover:focus-visible, .hud--hover:focus-within { --hud: var(--red); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 28px;
  transition: background-color .25s, border-color .25s, transform .35s var(--ease);
}
.card:hover { background: var(--surface-2); border-color: var(--line-2); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); border: 1px solid var(--line-2); background: var(--bg);
  white-space: nowrap;
}
.chip--red { color: var(--text); border-color: var(--red); background: var(--red-wash); }
.chip--live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--online); box-shadow: 0 0 8px var(--online); }

.kbd {
  display: inline-grid; place-items: center; min-width: 30px; height: 28px; padding: 0 8px;
  font: 600 12px/1 var(--mono); color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line-2); border-bottom-width: 3px;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--red);
  transition: gap .25s var(--ease), color .2s;
}
.link-arrow:hover { gap: 12px; color: var(--red-hot); }
.ext { font-family: var(--mono); font-weight: 500; }

/* ---------- Ícones ---------- */
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.i--fill { fill: currentColor; stroke: none; }
.ico {
  display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.ico--discord   { -webkit-mask-image: url(../icons/discord.svg);   mask-image: url(../icons/discord.svg); }
.ico--instagram { -webkit-mask-image: url(../icons/instagram.svg); mask-image: url(../icons/instagram.svg); }
.ico--tiktok    { -webkit-mask-image: url(../icons/tiktok.svg);    mask-image: url(../icons/tiktok.svg); }
.ico--youtube   { -webkit-mask-image: url(../icons/youtube.svg);   mask-image: url(../icons/youtube.svg); }
.ico--twitch    { -webkit-mask-image: url(../icons/twitch.svg);    mask-image: url(../icons/twitch.svg); }
.ico--x         { -webkit-mask-image: url(../icons/x.svg);         mask-image: url(../icons/x.svg); }
.ico--pix       { -webkit-mask-image: url(../icons/pix.svg);       mask-image: url(../icons/pix.svg); }
.ico--mercadopago { -webkit-mask-image: url(../icons/mercadopago.svg); mask-image: url(../icons/mercadopago.svg); }
.ico--picpay    { -webkit-mask-image: url(../icons/picpay.svg);    mask-image: url(../icons/picpay.svg); }
.ico--visa      { -webkit-mask-image: url(../icons/visa.svg);      mask-image: url(../icons/visa.svg); }
.ico--mastercard { -webkit-mask-image: url(../icons/mastercard.svg); mask-image: url(../icons/mastercard.svg); }

/* ---------- Botões (corte chanfrado da marca) ---------- */
.btn {
  --cut: 10px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px;
  font: 700 16px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background-color .2s, color .2s, transform .2s var(--ease);
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .25) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .6s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; --cut: 8px; }
.btn--lg { height: 60px; padding: 0 30px; font-size: 18px; --cut: 12px; }
.btn--red { background: var(--red); color: var(--text); }
.btn--red:hover { background: var(--red-hot); }
.btn--ghost { background: rgba(244, 238, 234, .06); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { background: rgba(244, 238, 234, .12); }
.btn--cream { background: var(--text); color: var(--bg); }
.btn--cream:hover { background: #fff; }
.btn:focus-visible, .card:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }

/* ---------- Conexão (connect + copiar) ---------- */
.connect {
  display: inline-flex; align-items: stretch; max-width: 100%; min-height: 44px;
  background: rgba(5, 5, 5, .7); border: 1px solid var(--line-2);
  font: 500 13px var(--mono);
}
.connect__label { display: flex; align-items: center; padding: 0 12px; color: var(--text-3); letter-spacing: .12em; text-transform: uppercase; border-right: 1px solid var(--line-2); font-size: 11px; }
.connect__cmd {
  display: flex; align-items: center; padding: 12px 14px; min-width: 0;
  font: 500 14px var(--mono); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-user-select: all; user-select: all;
}
.connect__copy {
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  border-left: 1px solid var(--line-2); color: var(--text-2);
  font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.connect__copy:hover { background: var(--surface-2); color: var(--text); }
.connect__copy:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
.connect__copy.is-done { background: var(--online); color: var(--bg); }
@media (max-width: 420px) {
  .connect__label, .connect__copy span { display: none; }
  .connect__cmd { flex: 1; font-size: 13px; }
}

/* ---------- YouTube (capa + play; iframe só no clique) ---------- */
.yt { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; max-width: 100%; }
.yt__poster { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out), filter .4s; filter: saturate(.9) brightness(.8); }
.yt::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(5, 5, 5, .85), transparent 55%); }
.yt__play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; gap: 16px; padding: clamp(16px, 3vw, 32px); text-align: left; color: var(--text); }
.yt__play:focus-visible { outline: 3px solid var(--text); outline-offset: -10px; }
.yt__btn {
  display: grid; place-items: center; flex: none; width: 56px; aspect-ratio: 1;
  background: var(--red); color: var(--text);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform .35s var(--ease), background-color .2s;
}
.yt__btn .i { width: 22px; height: 22px; }
.yt:hover .yt__poster { transform: scale(1.04); filter: saturate(1) brightness(.9); }
.yt:hover .yt__btn { transform: scale(1.06); background: var(--red-hot); }
.yt iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.yt.is-playing::before, .yt.is-playing .yt__play { display: none; }

/* ---------- Revelar ao rolar ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js:not(.js-ready) .reveal { animation: reveal-failsafe 0s 3s forwards; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }

/* ---------- Números que sobem (odômetro) ---------- */
.odo { --odo-h: 1.1em; display: inline-flex; height: var(--odo-h); line-height: var(--odo-h); overflow: hidden; vertical-align: bottom; }
.odo__col { display: inline-block; height: var(--odo-h); overflow: hidden; }
.odo__strip { display: block; will-change: transform; }
.odo__strip span { display: block; height: var(--odo-h); text-align: center; }
.odo__sep { display: inline-block; }
html:not(.js) .odo__strip { transition: none !important; }

/* ---------- Status ---------- */
.dot { width: 8px; height: 8px; border-radius: 50%; background: #5c5654; flex: none; }
[data-state="online"] .dot { background: var(--online); box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: pulse 2s infinite; }
[data-state="offline"] .dot { background: var(--red); }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }

/* ==========================================================================
   TOPO
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 60;
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  pointer-events: none;
}
.nav__bar {
  pointer-events: auto;
  display: flex; align-items: center; gap: 28px;
  height: calc(var(--nav-h) - 12px); padding: 0 12px 0 20px;
  background: rgba(5, 5, 5, .55);
  border: 1px solid rgba(42, 42, 42, .7);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  --hud: var(--red); --hud-size: 10px;
  transition: background-color .3s;
}
.nav.is-scrolled .nav__bar { background: rgba(5, 5, 5, .82); }
.nav__brand { display: flex; align-items: center; gap: 12px; flex: none; }
.nav__brand img { height: 30px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-right: auto; padding-left: 20px; border-left: 1px solid var(--line-2); }
.nav__links a {
  position: relative; padding: 10px 12px;
  font: 600 15px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-2); transition: color .2s, opacity .2s, text-shadow .2s;
}
.nav__links:hover a { opacity: .6; }
.nav__links a:hover, .nav__links a:focus-visible { opacity: 1; color: var(--red); text-shadow: 0 0 18px rgba(239, 31, 38, .55); }
.nav__links a::after {
  content: ''; position: absolute; inset: 2px; pointer-events: none;
  background:
    linear-gradient(var(--red), var(--red)) top left / 6px 1px no-repeat,
    linear-gradient(var(--red), var(--red)) top left / 1px 6px no-repeat,
    linear-gradient(var(--red), var(--red)) bottom right / 6px 1px no-repeat,
    linear-gradient(var(--red), var(--red)) bottom right / 1px 6px no-repeat;
  opacity: 0; transform: scale(1.2); transition: opacity .2s, transform .25s var(--ease);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after { opacity: 1; transform: none; }
.nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav__actions .btn--sm { height: 44px; }
.nav__status {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
  white-space: nowrap;
}
.nav__status b { color: var(--text); font-weight: 600; }
.nav__burger { display: none; width: 44px; height: 44px; position: relative; }
.nav__burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--text); transition: transform .3s var(--ease), right .3s var(--ease); }
.nav__burger span:first-child { top: 17px; }
.nav__burger span:last-child { top: 25px; right: 19px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { right: 11px; transform: translateY(-4px) rotate(-45deg); }
.nav__burger:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }

.menu {
  position: fixed; inset: 0; z-index: 55;
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 24px) var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  display: flex; flex-direction: column; gap: 32px; overflow-y: auto;
}
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 400 clamp(34px, 9vw, 52px)/1.2 var(--display); text-transform: uppercase; color: var(--text);
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.menu nav a small { font: 500 11px var(--mono); letter-spacing: .16em; color: var(--text-3); }
.menu nav a:hover { color: var(--red); }
.menu__foot { margin-top: auto; display: grid; gap: 12px; }
.menu__foot .btn { width: 100%; }

@media (max-width: 1180px) { .nav__status { display: none; } }
@media (max-width: 1080px) {
  .nav__links, .nav__actions .btn--ghost { display: none; }
  .nav__burger { display: block; }
}
@media (max-width: 560px) {
  :root { --nav-h: 68px; }
  .nav { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
  .nav__bar { padding: 0 6px 0 14px; gap: 12px; }
  .nav__brand img { height: 26px; }
  .nav__actions .btn--red { display: none; }
}

/* Barra "Jogar" fixa no celular */
.playbar {
  position: fixed; inset: auto 0 0; z-index: 50;
  display: none; gap: 8px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 5, 5, .9); border-top: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translateY(110%); visibility: hidden;
  transition: transform .35s var(--ease), visibility 0s linear .35s;
}
.playbar .btn { flex: 1; }
.playbar .btn--ghost { flex: 0 0 56px; padding: 0; }
.playbar.is-on { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
@media (max-width: 760px) {
  .playbar { display: flex; }
  html { scroll-padding-bottom: 96px; } /* a barra fixa não cobre o que recebe foco/âncora */
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(680px, min(100svh, 980px));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 72px) 0 0;
  background: var(--bg);
}
.hero__media {
  position: absolute; inset: 0 0 0 22%; z-index: -2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.hero__slide:nth-child(1) { object-position: 30% 50%; }
.hero__slide:nth-child(2) { object-position: 50% 50%; }
.hero__slide:nth-child(3) { object-position: 45% 40%; }
.hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity 1.2s var(--ease), transform 9s linear;
  filter: saturate(.95) contrast(1.05);
}
.hero__slide.is-on { opacity: 1; transform: scale(1); }
.hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, .9) 0%, rgba(5, 5, 5, .7) 30%, rgba(5, 5, 5, .1) 62%, rgba(5, 5, 5, .35) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(5, 5, 5, .2) 38%, rgba(5, 5, 5, .55) 100%);
}
.hero__inner { position: relative; display: grid; justify-items: start; gap: 22px; max-width: 780px; padding-bottom: 88px; }
.hero__title { font-size: clamp(3.1rem, 7.4vw, 7.6rem); }
.hero__title .hero__mark {
  display: inline-block; margin: .04em 0; padding: .02em .12em 0;
  background: var(--red); color: var(--text); text-shadow: none;
  clip-path: polygon(.16em 0, 100% 0, 100% calc(100% - .16em), calc(100% - .16em) 100%, 0 100%, 0 .16em);
}
.hero__lead { max-width: 54ch; font-size: clamp(17px, 1.4vw, 19px); color: var(--text-2); }
.hero__lead strong { color: var(--text); }
.hero__perks { display: flex; flex-wrap: wrap; gap: 8px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__rise { animation: hero-rise .9s var(--ease-out) both; }
.hero__rise:nth-child(2) { animation-delay: .08s; }
.hero__rise:nth-child(3) { animation-delay: .16s; }
.hero__rise:nth-child(4) { animation-delay: .24s; }
.hero__rise:nth-child(5) { animation-delay: .32s; }
.hero__rise:nth-child(6) { animation-delay: .4s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(24px); } }

.hero__ctrl {
  position: absolute; right: var(--gutter); bottom: calc(100% + 18px);
  display: flex; align-items: center; gap: 12px;
}
.hero__dots { display: flex; gap: 6px; }
.hero__dot { width: 28px; height: 3px; background: var(--line-2); position: relative; overflow: hidden; }
.hero__dot::after { content: ''; position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; }
.hero__dot.is-on::after { animation: dot-fill var(--slide-ms, 7000ms) linear forwards; }
.hero.is-paused .hero__dot.is-on::after { animation-play-state: paused; }
@keyframes dot-fill { to { transform: scaleX(1); } }
.hero__pause { display: grid; place-items: center; width: 44px; height: 44px; background: rgba(5, 5, 5, .6); border: 1px solid var(--line-2); color: var(--text); }
.hero__pause .i { width: 14px; height: 14px; }
.hero__pause .i--play, .hero.is-paused .hero__pause .i--pause { display: none; }
.hero.is-paused .hero__pause .i--play { display: block; }
.hero__scroll { position: absolute; left: var(--gutter); bottom: calc(100% + 26px); display: flex; align-items: center; gap: 10px; }

/* Faixa de números ao vivo na base do hero */
.stats .wrap { position: relative; }
.stats { position: relative; border-top: 1px solid var(--line); background: rgba(5, 5, 5, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats__item { padding: 22px 24px; border-left: 1px solid var(--line); display: grid; gap: 6px; }
.stats__item:first-child { border-left: 0; padding-left: 0; }
.stats__label { display: flex; align-items: center; gap: 8px; }
.stats__value { font: 400 clamp(30px, 3.2vw, 46px)/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.stats__value small { font: 500 .42em var(--mono); color: var(--text-3); margin-left: 4px; letter-spacing: .04em; }
.stats__value--text { font-size: clamp(22px, 2.2vw, 30px); line-height: calc(clamp(30px, 3.2vw, 46px) * 1.1); }
.stats__value .odo { vertical-align: top; }
/* Sem JavaScript: nada de "—" eterno nem botões que não fazem nada */
html:not(.js-on) [data-needs],
html:not(.js-on) [data-copy],
html:not(.js-on) [data-hero-toggle],
html:not(.js-on) [data-ticker-toggle],
html:not(.js-on) [data-video-toggle],
html:not(.js-on) .hero__ctrl { display: none !important; }
@media (max-width: 900px) {
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .stats__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 48vw); }
  .hero__media { inset: 0 0 auto 0; height: 78vw; -webkit-mask-image: none; mask-image: none; }
  .hero__shade { background: linear-gradient(0deg, var(--bg) 0%, var(--bg) 30%, rgba(5, 5, 5, .55) 62%, rgba(5, 5, 5, .35) 100%); }
  .hero__ctrl { top: auto; bottom: calc(100% + 16px); }
  .hero__scroll { display: none; }
}
@media (max-width: 900px) { .hero__inner { padding-bottom: 72px; } }
@media (max-width: 560px) {
  .hero__inner { justify-items: stretch; grid-template-columns: minmax(0, 1fr); }
  .hero__perks .chip { display: block; height: auto; padding: 6px 9px; line-height: 1.35; white-space: normal; }
  .hero__cta .btn { flex: 1 1 100%; }
  .connect { display: flex; width: 100%; }
}
/* Telas de notebook baixas (1366x768, 1440x900): o hero inteiro, com os números, cabe na primeira tela */
@media (min-width: 901px) and (max-height: 920px) {
  .hero { min-height: 100svh; padding-top: calc(var(--nav-h) + 36px); }
  .hero__inner { gap: 16px; padding-bottom: 64px; }
  .hero__title { font-size: min(7.4vw, 10.6vh); }
  .hero__lead { font-size: 17px; }
  .stats__item { padding-block: 16px; }
  .stats__value { font-size: min(3.2vw, 5vh); }
}
@media (min-width: 901px) and (max-height: 760px) { .hero .connect { display: none; } }

/* ==========================================================================
   FAIXA "CONQUEST IS NEVER LUCK"
   ========================================================================== */
.ticker { position: relative; z-index: 2; background: var(--red); overflow: hidden; border-block: 1px solid var(--red-deep); }
.ticker__track {
  display: flex; align-items: center; width: max-content;
  padding: 14px 0 12px;
  font: 400 clamp(26px, 3vw, 42px)/1 var(--display); text-transform: uppercase; color: var(--text);
  animation: marquee 42s linear infinite;
}
/* Espaço como margem (não gap): as duas metades ficam idênticas e o loop não dá o pulo de meio espaço */
.ticker__track > * { flex: none; margin-right: 36px; white-space: nowrap; }
.ticker__track b { font: 500 .45em var(--mono); color: var(--bg); letter-spacing: .1em; }
.ticker.is-paused .ticker__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ticker__toggle {
  position: absolute; right: var(--gutter); top: 50%; z-index: 1; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--bg); color: var(--text);
}
.ticker__toggle .i { width: 13px; height: 13px; }
.ticker__toggle .i--play, .ticker.is-paused .ticker__toggle .i--pause { display: none; }
.ticker.is-paused .ticker__toggle .i--play { display: block; }
.ticker__toggle:focus-visible { outline: 2px solid var(--text); outline-offset: -5px; }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.footer { position: relative; background: #000; border-top: 1px solid var(--line); overflow: hidden; padding-top: clamp(64px, 8vw, 96px); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 56px; }
.footer__brand { display: grid; gap: 18px; align-content: start; }
.footer__brand img { width: 170px; height: auto; }
.footer__brand p { max-width: 34ch; }
.footer__social { display: flex; flex-wrap: wrap; gap: 6px; }
.footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); color: var(--text-2); transition: color .2s, border-color .2s, background-color .2s; }
.footer__social a:hover { color: var(--text); border-color: var(--red); background: var(--red-wash); }
.footer__social .ico { width: 18px; height: 18px; }
.footer__col { display: flex; flex-direction: column; gap: 0; }
.footer__col a { padding-block: 9px; }
.footer__h { margin-bottom: 8px; }
.footer__col a { color: var(--text-2); font-size: 16px; transition: color .2s; width: fit-content; }
.footer__col a:hover { color: var(--text); }
.footer__legal {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end;
  padding: 28px 0; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.6; color: var(--text-3);
}
.footer__legal strong { color: var(--text-2); font-weight: 600; }
.footer__legal a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.footer__legal a:hover { color: var(--text); }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: flex-end; }
.footer__giant {
  pointer-events: none;
  font: 400 clamp(80px, 24vw, 380px)/.78 var(--display); text-transform: uppercase; text-align: center; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(244, 238, 234, .08); margin-bottom: -.05em;
}
@media (max-width: 900px) {
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__legal { grid-template-columns: minmax(0, 1fr); }
  .footer__legal-links { justify-content: flex-start; }
}
@media (max-width: 560px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .footer { padding-bottom: 76px; } }

/* ---------- Página de texto (privacidade) ---------- */
.doc { padding: calc(var(--nav-h) + 64px) 0 96px; }
.doc__inner { max-width: 760px; display: grid; gap: 22px; }
.doc h1 { margin-bottom: 8px; }
.doc h2 { font: 700 24px/1.2 var(--ui); color: var(--text); text-transform: uppercase; letter-spacing: .03em; margin-top: 18px; }
.doc p, .doc li { max-width: 68ch; }
.doc ul { display: grid; gap: 8px; }
.doc li { padding-left: 20px; position: relative; }
.doc li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--red); }
.doc a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--red); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 130;
  max-width: calc(100% - 32px); padding: 14px 20px; text-align: center;
  background: var(--text); color: var(--bg);
  font: 700 15px var(--ui); letter-spacing: .08em; text-transform: uppercase;
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; visibility: hidden;
  transition: transform .4s var(--ease), opacity .3s, visibility .4s; pointer-events: none;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
@media (max-width: 760px) { .toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; }
  .ticker__toggle, .hero__ctrl { display: none; }
}

/* ===== 10-sobre.css ===== */
/* ==========================================================================
   SOBRE — "Por que a PLF"
   Abas numeradas (01–04). Cada painel = pôster da marca (numeral vazado,
   faixas a -33°, mira) + texto com 3 destaques.
   Sem JS: as abas somem e os quatro painéis aparecem empilhados.
   ========================================================================== */
.sobre { overflow: clip; }

/* ---------- Cabeçalho ---------- */
.sobre__heading { display: grid; gap: 18px; justify-items: start; }
.sobre__claim {
  display: grid; gap: 12px; max-width: 440px;
  padding: 4px 0 4px 20px; border-left: 2px solid var(--red);
}
.sobre__quote { margin: 0; }
.sobre__quote p {
  font: 500 clamp(19px, 1.6vw, 22px)/1.4 var(--body); color: var(--text);
  text-wrap: balance;
}

/* ---------- Abas ---------- */
.sobre__tabs { display: none; }
.sobre.is-tabbed .sobre__tabs,
.js:not(.js-ready) .sobre__tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
/* antes do JS: reserva o espaço das abas; se o JS não carregar, some após 3s */
.js:not(.js-ready) .sobre__tabs { visibility: hidden; animation: sobre-failsafe-tabs 0s 3s forwards; }
@keyframes sobre-failsafe-tabs { to { visibility: hidden; height: 0; margin: 0; overflow: hidden; } }

.sobre__tab {
  position: relative;
  display: grid; align-content: start; gap: 10px;
  min-height: 44px; padding: 20px 12px 22px 0;
  text-align: left; color: var(--text-3);
  -webkit-tap-highlight-color: transparent;
}
.sobre__tab::before,
.sobre__tab::after { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--line-2); }
.sobre__tab::after {
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.sobre__tab-num { font: 500 12px/1 var(--mono); letter-spacing: .16em; transition: color .2s; }
.sobre__tab-label {
  font: 600 clamp(16px, 1.45vw, 20px)/1.1 var(--ui); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2); transition: color .2s;
}
.sobre__tab:hover .sobre__tab-label { color: var(--text); }
.sobre__tab:hover::before { background: var(--text-3); }
.sobre__tab[aria-selected="true"]::after { transform: none; }
.sobre__tab[aria-selected="true"] .sobre__tab-num { color: var(--red); }
.sobre__tab[aria-selected="true"] .sobre__tab-label { color: var(--text); }
.sobre__tab:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* ---------- Painéis ---------- */
.sobre__panel + .sobre__panel { margin-top: clamp(64px, 9vw, 112px); }
.sobre.is-tabbed .sobre__panel + .sobre__panel { margin-top: 0; }
/* antes do JS: só o primeiro painel; rede de segurança igual à do .reveal */
.js:not(.js-ready) .sobre__panel + .sobre__panel {
  height: 0; margin-top: 0; overflow: hidden; visibility: hidden;
  animation: sobre-failsafe-panel 0s 3s forwards;
}
@keyframes sobre-failsafe-panel { to { height: auto; margin-top: 72px; overflow: visible; visibility: visible; } }

.sobre__panel {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px);
}
/* só anima na troca feita pelo jogador (o painel inicial nunca depende de animação) */
.sobre__panel.is-entering { animation: sobre-in .3s var(--ease-out) both; }
@keyframes sobre-in { from { opacity: 0; transform: translateY(10px); } }
.sobre__panel:focus-visible { outline: 2px solid var(--red); outline-offset: 8px; }

/* ---------- Pôster ---------- */
.sobre__poster {
  --hud-size: 20px;
  position: relative; isolation: isolate;
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  min-height: clamp(360px, 104vw, 540px);
  padding: clamp(18px, 2.2vw, 28px);
  background: var(--surface); border: 1px solid var(--line);
}
.sobre__art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
/* grade de HUD que some nas bordas */
.sobre__art::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(110% 80% at 75% 35%, #000 10%, transparent 72%);
  mask-image: radial-gradient(110% 80% at 75% 35%, #000 10%, transparent 72%);
}
/* faixas diagonais da marca (-33°) */
.sobre__art::after {
  content: ''; position: absolute; top: 12%; bottom: 36%; right: -2%; width: 30%;
  background:
    linear-gradient(90deg,
      var(--red) 0 14px, transparent 14px 26px,
      var(--red) 26px 30px, transparent 30px 44px,
      var(--line-2) 44px 46px, transparent 46px);
  transform: skewX(-33deg); transform-origin: bottom right;
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 22%, #000 62%, transparent);
  mask-image: linear-gradient(0deg, transparent, #000 22%, #000 62%, transparent);
}
.sobre__num {
  position: absolute; z-index: 1; right: 7%; top: 43%; transform: translateY(-50%);
  font: 400 200px/.8 var(--display); font-size: 50cqi;
  letter-spacing: -.01em; white-space: nowrap;
  color: var(--surface); -webkit-text-stroke: 1.5px rgba(255, 242, 235, .22);
}
.sobre__poster-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3);
}
.sobre__mark { width: 40px; height: auto; }
.sobre__poster-foot { display: grid; gap: 14px; }
.sobre__micro {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-2);
  font: 500 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}
.sobre__micro span:last-child { margin-left: auto; color: var(--red); }
.sobre__title {
  font: 400 46px/.92 var(--display); font-size: clamp(38px, 12.5cqi, 76px);
  color: var(--text); text-transform: uppercase; text-wrap: balance;
  text-shadow: var(--rgb-split);
}
.sobre__title em { font-style: normal; color: var(--red); }

/* ---------- Texto ---------- */
.sobre__body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.sobre__kicker {
  display: flex; align-items: center; gap: 12px;
  font: 500 12px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3);
}
.sobre__kicker span { color: var(--red); }
.sobre.is-tabbed .sobre__kicker { display: none; }
.sobre__kicker::after { content: ''; width: 32px; height: 1px; background: var(--line-2); }
.sobre__text {
  max-width: 30ch;
  font: 500 clamp(21px, 2vw, 27px)/1.3 var(--body); color: var(--text);
  text-wrap: pretty;
}
.sobre__points { width: 100%; border-top: 1px solid var(--line); }
.sobre__points li {
  position: relative;
  padding: 16px 0 16px 32px; border-bottom: 1px solid var(--line);
  font-size: 16px; line-height: 1.6; color: var(--text-2);
}
.sobre__points li::before { /* barra diagonal da marca */
  content: ''; position: absolute; left: 6px; top: 21px;
  width: 3px; height: 15px; background: var(--red); transform: skewX(-33deg);
}
.sobre__points strong { color: var(--red); font-weight: 600; }
.sobre__points .kbd { height: 22px; min-width: 26px; padding: 0 6px; font-size: 11px; vertical-align: 1px; border-bottom-width: 2px; }
.sobre__more { min-height: 44px; }
.sobre__keep { white-space: nowrap; }

/* ---------- Telas maiores ---------- */
@media (min-width: 900px) {
  .sobre__panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
  .sobre__poster { min-height: 540px; }
  .sobre__body { padding-block: 8px; }
}
@media (min-width: 1200px) {
  .sobre__poster { min-height: 580px; }
}

/* ---------- Coluna única (celular e tablet) ---------- */
@media (max-width: 899.98px) {
  .sobre__head { grid-template-columns: minmax(0, 1fr); }
  .sobre__num { font-size: min(50cqi, 250px); }
}

/* ---------- Celular ---------- */
@media (max-width: 719.98px) {
  .sobre.is-tabbed .sobre__tabs,
  .js:not(.js-ready) .sobre__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sobre__tab { padding: 16px 8px 18px 0; gap: 8px; min-height: 76px; }
  .sobre__tab-label { font-size: 16px; }
  .sobre__claim { padding-left: 16px; }
  .sobre__points li { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .sobre__panel.is-entering { animation: none; }
  .sobre__tab::after { transition: none; }
}

/* ===== 20-modos.css ===== */
/* ==========================================================================
   MODOS DE JOGO — lista de foco (esquerda) + pôster do modo ativo (direita)
   Sem JS: a lista vira sumário com âncoras e os 5 pôsteres aparecem empilhados.
   Com JS (.modos.is-ready): abas; os pôsteres dividem a mesma célula da grade
   (a altura não pula ao trocar de modo).
   ========================================================================== */
.modos__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "nav" "stage" "cta";
  gap: 0;
}
.modos__head { grid-area: head; margin-bottom: clamp(28px, 4vw, 40px); }
.modos__nav { grid-area: nav; margin-bottom: 20px; }
.modos__stage { grid-area: stage; display: grid; gap: 24px; min-width: 0; }
.modos__cta { grid-area: cta; margin-top: 28px; }

/* ---------- Lista de modos ---------- */
.modos__list { border-top: 1px solid var(--line-2); }
.modos__tab {
  --hud-c: var(--red);
  position: relative;
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 14px 8px 12px;
  border-bottom: 1px solid var(--line);
  font: 700 clamp(19px, 5.4vw, 24px)/1.05 var(--ui); letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-2);
  transition: color .2s, background-color .25s;
}
.modos__tab::before { /* cantoneiras de mira do item ativo */
  content: ''; position: absolute; inset: -1px 0 0; pointer-events: none;
  background:
    linear-gradient(var(--hud-c), var(--hud-c)) top left / 12px 2px no-repeat,
    linear-gradient(var(--hud-c), var(--hud-c)) top left / 2px 12px no-repeat,
    linear-gradient(var(--hud-c), var(--hud-c)) top right / 12px 2px no-repeat,
    linear-gradient(var(--hud-c), var(--hud-c)) top right / 2px 12px no-repeat,
    linear-gradient(var(--hud-c), var(--hud-c)) bottom left / 12px 2px no-repeat,
    linear-gradient(var(--hud-c), var(--hud-c)) bottom left / 2px 12px no-repeat,
    linear-gradient(var(--hud-c), var(--hud-c)) bottom right / 12px 2px no-repeat,
    linear-gradient(var(--hud-c), var(--hud-c)) bottom right / 2px 12px no-repeat;
  opacity: 0; transform: scale(1.03, 1.12);
  transition: opacity .2s, transform .25s var(--ease);
}
.modos__num { font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--text-3); transition: color .2s; }
.modos__name { grid-column: 2; min-width: 0; }
.modos__flag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 7px;
  font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  grid-column: 3; color: var(--text-2); border: 1px solid var(--line-2);
  transition: color .2s, border-color .2s;
}
.modos__arrow { grid-column: 4; display: none; width: 20px; height: 20px; color: var(--red); opacity: 0; transform: translateX(-8px); transition: opacity .2s, transform .25s var(--ease); }
.modos__tab:hover { color: var(--text); }
.modos__tab:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }

/* distância do ativo: vizinhos mais apagados (só com JS) */
.modos.is-ready .modos__tab { color: var(--text-3); }
.modos.is-ready .modos__tab[data-d="1"] { color: var(--text-2); }
.modos.is-ready .modos__tab:hover { color: var(--text); }
.modos.is-ready .modos__tab[aria-selected="true"] { color: var(--red); background: var(--red-wash); }
.modos__tab[aria-selected="true"]::before { opacity: 1; transform: none; }
.modos__tab[aria-selected="true"] .modos__num { color: var(--red); }
.modos__tab[aria-selected="true"] .modos__flag { color: var(--text); border-color: var(--red); }
.modos__tab[aria-selected="true"] .modos__arrow { opacity: 1; transform: none; }

/* ---------- Pôster ---------- */
.modos__panel {
  --hud-size: 16px;
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  container-type: inline-size;
}
.modos__panel:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.modos__art, .modos__cover { grid-row: 1; grid-column: 1; }
.modos__art { position: relative; min-height: 320px; min-height: 75cqi; overflow: hidden; background: var(--bg); } /* 4:3; cresce se outro pôster da pilha for mais alto */
.modos__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.modos__art::before { /* sombras para o texto */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 3, 3, .72) 0%, rgba(3, 3, 3, 0) 24%),
    linear-gradient(0deg, var(--surface) 0%, rgba(12, 11, 13, .88) 20%, rgba(12, 11, 13, 0) 56%),
    linear-gradient(90deg, rgba(3, 3, 3, .6) 0%, rgba(3, 3, 3, 0) 60%);
}
.modos__art::after { /* linhas de monitor */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .32) 0 1px, transparent 1px 3px);
}

.modos__cover {
  position: relative; z-index: 1; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: clamp(16px, 3.4vw, 28px);
}
.modos__cover::before { /* corte diagonal da marca */
  content: ''; position: absolute; z-index: -1; top: -10%; bottom: -10%; right: 13%;
  width: clamp(36px, 9%, 72px);
  background: linear-gradient(90deg, var(--red) 0 78%, transparent 78% 86%, var(--red) 86%);
  opacity: .85;
  transform: skewX(-33deg);
}
.modos__panel--x1 .modos__cover::before { display: none; } /* o X1 já tem a costura na arte */
.modos__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modos__idx { font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
.modos__idx span { color: var(--text-3); }
.modos__top .chip { background: rgba(3, 3, 3, .6); }
.modos__top .chip--red { background: var(--red); border-color: var(--red); }
.modos__title {
  max-width: 11ch;
  font: 400 clamp(2.5rem, 12.5vw, 4rem)/.92 var(--display); letter-spacing: .005em;
  text-transform: uppercase; color: var(--text); text-shadow: var(--rgb-split); text-wrap: balance;
}
.modos__panel--x1 .modos__title { font-size: clamp(5rem, 30vw, 9.5rem); line-height: .8; letter-spacing: -.01em; }

.modos__body {
  display: flex; flex-direction: column; gap: 18px;
  padding: 4px clamp(16px, 3.4vw, 28px) clamp(20px, 3.4vw, 28px);
}
.modos__desc { max-width: 52ch; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.modos__prize {
  --cut: 10px;
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 16px 12px;
  background: var(--red); color: var(--text);
  font: 700 clamp(16px, 4.4vw, 19px)/1.25 var(--ui); letter-spacing: .01em;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.modos__prize-mark { flex: none; font: 600 12px/1 var(--mono); letter-spacing: .04em; color: var(--bg); }
.modos__quote { margin: 0; padding-left: 16px; border-left: 2px solid var(--red); }
.modos__quote p { font: 700 clamp(21px, 5.4vw, 26px)/1.1 var(--ui); letter-spacing: .01em; text-transform: uppercase; color: var(--text); }
.modos__quote footer { margin-top: 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }

.modos__facts { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.modos__fact {
  display: grid; grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); gap: 4px 14px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--line-2);
}
.modos__fact:last-child { padding-bottom: 0; }
.modos__fact dt { font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.modos__fact dd { margin: 0; font: 600 18px/1.25 var(--ui); letter-spacing: .01em; color: var(--text); }
.modos__fact .kbd { height: 22px; min-width: 26px; padding: 0 6px; font-size: 11px; border-bottom-width: 2px; vertical-align: 1px; }
.modos__fact code { font: 500 .8em var(--mono); padding: 1px 5px; background: var(--surface-2); border: 1px solid var(--line-2); white-space: nowrap; }

@container (max-width: 559px) {
  .modos__art { min-height: 90cqi; } /* celular: pôster um pouco mais alto que 4:3 para o título não cobrir a arte */
}
@container (min-width: 560px) {
  .modos__title { font-size: clamp(3.6rem, 10.6cqi, 6rem); }
  .modos__panel--x1 .modos__title { font-size: clamp(7rem, 24cqi, 11rem); }
  .modos__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
  .modos__fact { grid-template-columns: minmax(0, 1fr); align-content: start; padding: 14px 18px 0; border-top: 0; border-left: 1px solid var(--line); }
  .modos__fact:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- Chamada ---------- */
.modos__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.modos__hint { display: flex; align-items: center; gap: 10px; min-width: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--text-2); }
.modos__hint code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Com JS: abas ---------- */
.modos.is-ready .modos__stage { gap: 0; }
.modos.is-ready .modos__panel {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.modos.is-ready .modos__panel.is-active { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); z-index: 1; }
.modos.is-ready .modos__panel.is-active .modos__img { animation: modos-settle .5s var(--ease-out) both; }
.modos.is-ready .modos__panel.is-active .modos__title { animation: modos-rise .3s var(--ease-out) both; }
.modos.is-ready .modos__panel.is-active .modos__cover::before { animation: modos-slash .3s var(--ease-out) .05s both; }
@keyframes modos-settle { from { transform: scale(1.05); } }
@keyframes modos-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes modos-slash { from { opacity: 0; transform: skewX(-33deg) translateX(40px); } }

/* ---------- Celular pequeno ---------- */
@media (max-width: 379px) {
  .modos__flag { display: none; } /* "Principal" e "Grátis" continuam no chip do pôster */
}
@media (max-width: 560px) {
  .modos__cta .btn { flex: 1 1 100%; }
}

/* ---------- Tablet e desktop ---------- */
@media (min-width: 640px) {
  .modos__tab { min-height: 60px; padding-inline: 16px 18px; grid-template-columns: 36px minmax(0, 1fr) auto auto; }
}
@media (min-width: 1024px) {
  .modos__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "head stage" "nav stage" "cta stage";
    column-gap: clamp(40px, 4.5vw, 72px);
  }
  .modos__head { margin-bottom: 36px; }
  .modos__head .t-h2 { font-size: clamp(3.4rem, 5.6vw, 5.6rem); }
  .modos__nav { margin-bottom: 0; }
  .modos__cta { align-self: end; margin-top: 32px; }
  .modos__tab { min-height: 64px; font-size: clamp(22px, 1.9vw, 26px); }
  .modos__arrow { display: block; }
  .modos__stage { align-self: start; }
}

/* ===== 30-videos.css ===== */
/* ==========================================================================
   VÍDEOS — um destaque grande (monitor com cantoneiras vermelhas e faixas
   diagonais da marca) + 4 vídeos compactos (trilho no celular, 2x2 no resto).
   Usa a fachada .yt do base (iframe só no clique).
   Media queries na sintaxe clássica (min-/max-width) por causa do Safari antigo.
   ========================================================================== */
.videos__intro { display: grid; gap: 18px; justify-items: start; }
.videos__intro .section-lead { text-wrap: pretty; } /* sem palavra órfã quando quebra */
.videos__channel { justify-self: start; }
.videos__channel .ico { width: 20px; height: 20px; }
@media (min-width: 720.02px) { .videos__channel { justify-self: end; } }

.videos__grid { display: grid; gap: 28px 16px; }

/* ---------- Barra de dados (categoria · data · índice) ---------- */
.videos__meta {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 12px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
  overflow: hidden; /* rede de segurança: nada atravessa a borda do card */
}
.videos__meta .chip { flex: none; transition: color .2s, border-color .2s, background-color .2s; }
.videos__date { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); font-variant-numeric: tabular-nums; }
.videos__idx { flex: none; margin-left: auto; color: var(--text-2); font-variant-numeric: tabular-nums; }
.videos__idx span { color: var(--text-3); }
.videos__flag { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--red); }
.videos__flag::before { content: ''; width: 6px; height: 6px; background: currentColor; }
@media (max-width: 359.98px) { .videos__flag, .videos__idx { display: none; } }
/* Card estreito (desktop de 1100 a ~1340px, celular pequeno): sai o índice, ficam categoria e data */
@container (max-width: 279.98px) { .videos__item .videos__idx { display: none; } }

/* ---------- Fachada .yt dentro da seção ---------- */
.videos .yt { isolation: isolate; }   /* cantoneiras ficam por cima do iframe */
.videos .yt__poster { transition: transform .3s var(--ease-out), filter .3s; }
.videos .yt__btn { transition: transform .2s var(--ease), background-color .2s; }
.videos .yt:focus-within .yt__poster { transform: scale(1.04); filter: saturate(1) brightness(.9); }
.videos .yt:focus-within .yt__btn { background: var(--red-hot); }
.videos__player--crop .yt__poster { scale: 1.25; } /* capa com tarjas pretas embutidas */
/* Tutorial: a capa traz manchete própria ("Como resgatar a skin…"). O card enquadra só a arma,
   no canto direito da capa, e a manchete fica fora do quadro — sem dois títulos sobrepostos. */
.videos__player--zoom .yt__poster { scale: 2; transform-origin: 100% 18%; }

/* ---------- Destaque ---------- */
.videos__feature { --off: clamp(8px, 1.1vw, 14px); position: relative; isolation: isolate; }
.videos__feature::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: var(--off) var(--off) calc(var(--off) * -1) calc(var(--off) * -1);
  background: repeating-linear-gradient(-57deg, var(--red) 0 2px, transparent 2px 9px);
  opacity: .5; transition: opacity .3s;
}
.videos__feature:hover::before, .videos__feature:focus-within::before { opacity: .85; }
.videos__screen {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface); border: 1px solid var(--line-2);
  --hud-size: 18px;
  container-type: inline-size;
}
.videos__feature .yt__play { gap: clamp(14px, 2vw, 22px); padding: clamp(16px, 2.6vw, 30px); }
.videos__feature .yt__btn { width: clamp(52px, 5vw, 68px); }
.videos__feature .yt__btn .i { width: 24px; height: 24px; }
.videos__ftitle { display: grid; gap: 10px; min-width: 0; }
.videos__fname {
  font: 400 clamp(34px, 4.6vw, 64px)/.88 var(--display); text-transform: uppercase;
  font-size: clamp(34px, 9cqi, 80px); /* acompanha a largura do monitor, não da janela */
  color: var(--text); text-shadow: var(--rgb-split);
}
@container (min-width: 760px) {
  .videos__feature .yt__btn { width: 76px; }
  .videos__fsub { font-size: 12px; }
}
.videos__fsub {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 11px/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2);
}
.videos__fsub::before { content: ''; width: 18px; height: 2px; background: var(--red); flex: none; }

/* ---------- Vídeos compactos ---------- */
.videos__item {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .2s;
  container-type: inline-size;
}
.videos__item:hover, .videos__item:focus-within { border-color: var(--line-2); }
.videos__item:hover .chip, .videos__item:focus-within .chip { color: var(--text); border-color: var(--red); background: var(--red-wash); }
.videos__item .yt::before { background: linear-gradient(0deg, rgba(3, 3, 3, .94) 0%, rgba(3, 3, 3, .7) 32%, transparent 68%); }
.videos__item .videos__player--zoom::before { background: linear-gradient(0deg, rgba(3, 3, 3, .95) 0%, rgba(3, 3, 3, .78) 38%, transparent 74%); }
.videos__item .yt__play { gap: 12px; padding: 14px; }
.videos__item .yt__btn { width: 40px; }
.videos__item .yt__btn .i { width: 16px; height: 16px; }
.videos__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 700 clamp(17px, 1.45vw, 20px)/1.08 var(--ui); letter-spacing: .03em; text-transform: uppercase;
  font-size: clamp(18px, 6.6cqi, 24px);
  color: var(--text); text-wrap: balance;
}
/* Com mouse, as capas menores ficam em "monitor desligado" e acendem no hover/foco */
@media (hover: hover) {
  .videos__item .yt__poster { filter: grayscale(.85) brightness(.6); }
  .videos__item:hover .yt__poster, .videos__item:focus-within .yt__poster { filter: grayscale(0) brightness(.88); }
}

/* Celular: trilho com arrasto (a próxima capa aparece na borda) */
.videos__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(calc(100% - 44px), 340px); gap: 12px;
  margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--red) var(--line);
}
.videos__item { scroll-snap-align: start; }

/* Tablet: grade 2x2 abaixo do destaque */
@media (min-width: 640px) {
  .videos__list {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    margin: 0; padding: 0; overflow: visible; scroll-snap-type: none;
  }
}

/* Desktop: destaque à esquerda, 2x2 à direita, bases alinhadas.
   Quando a grade 2x2 fica mais alta que o 16:9 do destaque (1100–1279px), o player do
   destaque cresce junto (a capa cobre o quadro) em vez de deixar uma faixa preta embaixo. */
@media (min-width: 1100px) {
  .videos__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
  .videos__list { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .videos__feature .yt { flex: 1 0 auto; }
  .videos__item .yt { flex: 1 1 auto; aspect-ratio: auto; min-height: 150px; }
  .videos__feature .yt__poster, .videos__item .yt__poster { position: absolute; inset: 0; }
}

/* ===== 40-arsenal.css ===== */
/* ==========================================================================
   ARSENAL — skins do servidor
   Ideia: a diagonal da marca (~-33°) corta tudo. As armas ficam inclinadas
   nela e "travam a mira" (endireitam + brilho vermelho) no hover.
   Os cards e os filtros estão escritos no HTML (40-arsenal.html) para a seção
   funcionar sem JS; o 00-core.js só liga os cliques dos filtros.
   Media queries na sintaxe clássica (min/max-width) por causa do Safari antigo.
   ========================================================================== */

.arsenal { --arsenal-tilt: -10deg; --arsenal-diag: 123deg; }

/* ---------- Cabeçalho ---------- */
.arsenal__head {
  display: grid; gap: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(36px, 4.5vw, 56px);
}
.arsenal__intro { display: grid; gap: 18px; align-content: end; }
.arsenal__title em { display: block; }
.arsenal__lead { max-width: 46ch; }

@media (min-width: 960px) {
  .arsenal__head { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; }
  .arsenal__intro { padding-bottom: 6px; }
}

/* Vitrine: peça no estilo dos pôsteres oficiais (faixas diagonais + microtextos) */
.arsenal__feature {
  --hud-size: 18px;
  position: relative; isolation: isolate;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--line);
}
.arsenal__stripes {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(ellipse 75% 70% at 55% 50%, transparent 35%, rgba(3, 3, 3, .72) 100%),
    linear-gradient(var(--arsenal-diag),
      transparent 0 33%,
      var(--red) 33% 42%,
      transparent 42% 44.5%,
      rgba(255, 242, 235, .8) 44.5% 45.2%,
      transparent 45.2% 62%,
      var(--red-deep) 62% 65%,
      transparent 65% 67%,
      rgba(243, 32, 40, .55) 67% 67.7%,
      transparent 67.7%),
    repeating-linear-gradient(var(--arsenal-diag), rgba(255, 242, 235, .05) 0 1px, transparent 1px 10px),
    var(--bg);
}
/* faca em retrato (377x600): deitada na diagonal, atravessando as faixas */
.arsenal__feature-img {
  position: absolute; left: 50%; top: 50%;
  width: auto; height: 128%; max-width: none;
  transform: translate(-50%, -50%) rotate(38deg);
  filter: drop-shadow(0 26px 26px rgba(3, 3, 3, .8)) drop-shadow(0 0 22px rgba(243, 32, 40, .35));
}
.arsenal__micro {
  position: absolute; z-index: 1;
  font: 500 10px/1.35 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3);
}
.arsenal__micro b { display: block; font-weight: 600; color: var(--text); }
.arsenal__micro--tl { top: 16px; left: 18px; }
.arsenal__micro--bl {
  bottom: 16px; left: 18px;
  padding: 6px 10px 6px 10px; border-left: 2px solid var(--red); background: rgba(3, 3, 3, .82);
}
.arsenal__micro--br {
  bottom: 16px; right: 18px;
  padding: 5px 8px; border: 1px solid var(--line-2); background: rgba(3, 3, 3, .82); color: var(--text-2);
}
.arsenal__symbol { position: absolute; z-index: 1; top: 14px; right: 18px; width: 28px; height: auto; }

@media (min-width: 560px) and (max-width: 959.98px) {
  .arsenal__feature { aspect-ratio: 21 / 9; }
  .arsenal__feature-img { height: 150%; }
}
@media (max-width: 559.98px) {
  .arsenal__feature { aspect-ratio: 16 / 10; --hud-size: 14px; }
  .arsenal__feature-img { top: 45%; height: 116%; } /* cabo livre da etiqueta "Level Up" */
  .arsenal__micro--tl { top: 12px; left: 14px; }
  .arsenal__micro--bl { bottom: 12px; left: 14px; }
  .arsenal__micro--br { bottom: 12px; right: 14px; }
  .arsenal__symbol { top: 10px; right: 14px; width: 24px; }
}

/* ---------- Barra de filtros ---------- */
.arsenal__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px; margin-bottom: 20px;
  border-top: 1px solid var(--line);
}
/* sem JS os filtros não funcionam: some a barra, os 16 cards continuam visíveis
   (.js-on vem do <head> e do core, como no 00-base.css; .js/.js-ready por garantia) */
html:not(.js-on):not(.js):not(.js-ready) .arsenal__bar { display: none; }
.arsenal__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.arsenal__filters button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--line-2);
  transition: color .2s, border-color .2s, background-color .2s;
}
.arsenal__filters button::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(var(--red), var(--red)) top left / 7px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) top left / 2px 7px no-repeat,
    linear-gradient(var(--red), var(--red)) bottom right / 7px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) bottom right / 2px 7px no-repeat;
  opacity: 0; transition: opacity .2s;
}
.arsenal__filters button:hover { color: var(--text); border-color: var(--text-3); }
.arsenal__filters button[aria-pressed="true"] { color: var(--text); background: var(--red-wash); border-color: rgba(243, 32, 40, .5); }
.arsenal__filters button[aria-pressed="true"]::after { opacity: 1; }
.arsenal__filters button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.arsenal__n { font-size: 10px; letter-spacing: .04em; color: var(--text-3); transition: color .2s; }
.arsenal__filters button[aria-pressed="true"] .arsenal__n { color: var(--red); }

.arsenal__status {
  font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.arsenal__status b { color: var(--text); font-weight: 600; }

@media (max-width: 719.98px) {
  .arsenal__bar { gap: 14px; }
  .arsenal__filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .arsenal__filters button { padding: 0 6px; gap: 6px; font-size: 11px; letter-spacing: .06em; }
}
@media (max-width: 359.98px) {
  .arsenal__filters button { letter-spacing: .02em; }
  .arsenal__n { display: none; }
}

/* ---------- Grade ---------- */
.arsenal__grid {
  counter-reset: arsenal;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
@media (min-width: 720px) { .arsenal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 1080px) { .arsenal__grid { gap: 12px; } }

/* ---------- Card de skin (markup estático em 40-arsenal.html) ---------- */
.skin {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  counter-increment: arsenal;
  transition: border-color .25s, background-color .25s;
}
.skin[hidden] { display: none; }

/* cantoneiras de mira: só aparecem quando a mira "trava" (hover) */
.skin::after {
  content: ''; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--red), var(--red)) top left / 14px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) top left / 2px 14px no-repeat,
    linear-gradient(var(--red), var(--red)) top right / 14px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) top right / 2px 14px no-repeat,
    linear-gradient(var(--red), var(--red)) bottom left / 14px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) bottom left / 2px 14px no-repeat,
    linear-gradient(var(--red), var(--red)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) bottom right / 2px 14px no-repeat;
  opacity: 0; transform: scale(1.05);
  transition: opacity .2s, transform .3s var(--ease-out);
}

.skin__stage {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(ellipse 70% 60% at 50% 52%, rgba(255, 242, 235, .05), transparent 72%),
    repeating-linear-gradient(var(--arsenal-diag), rgba(255, 242, 235, .055) 0 1px, transparent 1px 9px),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
/* número do item (renumera sozinho ao filtrar) */
.skin__stage::before {
  content: counter(arsenal, decimal-leading-zero);
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font: 500 10px/1 var(--mono); letter-spacing: .16em; color: var(--text-3);
  transition: color .2s;
}
/* brilho + faixa vermelha atrás da arma no hover */
.skin__stage::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(closest-side at 50% 52%, rgba(243, 32, 40, .3), transparent),
    linear-gradient(var(--arsenal-diag), transparent 42%, rgba(243, 32, 40, .16) 42% 56%, transparent 56%);
  opacity: 0; transition: opacity .3s;
}
.skin__stage img {
  position: absolute; left: 11%; top: 24%;
  width: 78%; height: 58%; max-width: none;
  object-fit: contain;
  transform: rotate(var(--arsenal-tilt));
  filter: drop-shadow(0 12px 12px rgba(3, 3, 3, .75)) drop-shadow(0 0 0 rgba(243, 32, 40, 0));
  transition: transform .3s var(--ease-out), filter .3s;
}

.skin__info { display: grid; gap: 6px; padding: 14px 16px 16px; }
.skin__col {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font: 500 11px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--red);
}
.skin__col::before { content: ''; flex: none; width: 6px; height: 6px; background: currentColor; }
.skin__name {
  font: 700 clamp(19px, 1.75vw, 24px)/1.02 var(--ui);
  letter-spacing: .03em; text-transform: uppercase; color: var(--text);
  overflow-wrap: anywhere;
}
/* tipo da arma no canto do palco (canto superior direito) */
.skin__type {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}

/* cards estreitos (~140–200px): celular em 2 colunas e tablet em 4 */
@media (max-width: 479.98px), (min-width: 720px) and (max-width: 879.98px) {
  .skin__info { padding: 12px 12px 14px; gap: 5px; }
  .skin__col { font-size: 10px; letter-spacing: .12em; gap: 6px; }
  .skin__name { font-size: 18px; }
  .skin__type { position: static; font-size: 10px; letter-spacing: .1em; }
  .skin__stage::before { top: 10px; left: 10px; }
  .skin__stage img { left: 7%; width: 86%; top: 20%; height: 62%; }
}

/* mira travada */
@media (hover: hover) {
  .skin:hover { background: var(--surface-2); border-color: var(--line-2); }
  .skin:hover::after { opacity: 1; transform: none; }
  .skin:hover .skin__stage::after { opacity: 1; }
  .skin:hover .skin__stage::before, .skin:hover .skin__type { color: var(--red); }
  .skin:hover .skin__stage img {
    transform: rotate(0deg) scale(1.07);
    filter: drop-shadow(0 12px 12px rgba(3, 3, 3, .75)) drop-shadow(0 0 16px rgba(243, 32, 40, .7));
  }
}

/* ---------- Revelar ao rolar (o core chama PLF.reveal nos cards) ---------- */
.js .skin {
  opacity: 0; transform: translateY(20px);
  transition:
    opacity .6s var(--ease) calc(var(--i, 0) * 60ms),
    transform .6s var(--ease) calc(var(--i, 0) * 60ms),
    border-color .25s, background-color .25s;
}
.js .skin.is-in { opacity: 1; transform: none; }
.js:not(.js-ready) .skin { animation: reveal-failsafe 0s 3s forwards; }

/* troca de filtro: os cards visíveis entram rápido, em cascata */
.arsenal__grid.is-sorting .skin:not([hidden]) {
  animation: arsenal-in .28s var(--ease-out) both;
  animation-delay: calc(var(--n, 0) * 30ms);
}
@keyframes arsenal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Rodapé da seção ---------- */
.arsenal__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 32px;
  margin-top: clamp(28px, 3.5vw, 40px); padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--line);
}
.arsenal__notes { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.arsenal__notes li {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
}

@media (max-width: 719.98px) {
  .arsenal__notes { flex-direction: column; }
  .arsenal__notes li { font-size: 11px; letter-spacing: .1em; }
  .arsenal__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .arsenal__grid.is-sorting .skin:not([hidden]) { animation: none; }
  .skin:hover .skin__stage img { transform: rotate(0deg); }
}

/* ===== 50-como-jogar.css ===== */
/* ==========================================================================
   COMO JOGAR — 3 passos + loadscreen + controles (fundo Pêssego)
   Ideia: uma "ficha de missão" numerada à esquerda; à direita o monitor
   preto com a loadscreen oficial. O comando de conexão é o terminal escuro.
   ========================================================================== */
.como-jogar { overflow: clip; isolation: isolate; }

/* Texto vermelho pequeno sobre Pêssego não passa em contraste: usa o vermelho profundo */
.como-jogar .t-eyebrow { color: var(--red-deep); }
.como-jogar .t-eyebrow::before { background: var(--red); }
/* Botão vermelho mantém o texto Pêssego do resto do site */
.como-jogar .btn--red { color: var(--peach); }

/* ---------- Grade principal ---------- */
.como-jogar__grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "media" "steps" "spec";
  gap: clamp(40px, 6vw, 56px);
}
.como-jogar__head { grid-area: head; margin-bottom: 0; }
.como-jogar__head-main { display: grid; gap: 18px; justify-items: start; }
.como-jogar__lead { max-width: 30ch; }
.como-jogar__media { grid-area: media; }
.como-jogar__steps { grid-area: steps; }
.como-jogar__spec { grid-area: spec; }

@media (min-width: 1024px) {
  .como-jogar__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head head" "steps media" "steps spec";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(48px, 6vw, 96px); row-gap: 0;
    align-items: start;
  }
  .como-jogar__head { margin-bottom: clamp(48px, 5vw, 72px); }
  .como-jogar__spec { margin-top: 40px; }
}

/* ---------- Monitor com a loadscreen ---------- */
/* margem de 10px = espaço das cantoneiras, que ficam por fora do monitor */
.como-jogar__media { position: relative; margin-inline: 10px; }
@media (min-width: 1024px) { .como-jogar__media { margin: 10px 10px 0 0; } }

.como-jogar__screen {
  --hud-size: 18px;
  background: var(--bg);
  border: 1px solid var(--bg);
}
.como-jogar__screen.hud::after { inset: -10px; }

.como-jogar__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 38px; padding: 0 14px;
  font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 242, 235, .55);
  white-space: nowrap; overflow: hidden;
}
.como-jogar__rec { display: inline-flex; align-items: center; gap: 10px; color: var(--peach); }
.como-jogar__rec::before {
  content: ''; width: 7px; height: 7px; flex: none; background: var(--red);
  animation: como-jogar-rec 1.2s steps(1, end) infinite;
}
.como-jogar__screen:has(.is-paused) .como-jogar__rec::before { animation: none; opacity: .35; }
@keyframes como-jogar-rec { 50% { opacity: .2; } }
@media (max-width: 379.98px) { .como-jogar__bar-end { display: none; } }

.como-jogar__view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--peach); }
.como-jogar__view video { width: 100%; height: 100%; object-fit: cover; }

.como-jogar__toggle {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  display: grid; place-items: center; width: 44px; height: 44px;
  background: rgba(3, 3, 3, .8); color: var(--peach);
  border: 1px solid rgba(255, 242, 235, .16);
  transition: background-color .2s, border-color .2s;
}
.como-jogar__toggle:hover { background: var(--red); border-color: var(--red); }
.como-jogar__toggle:focus-visible { outline: 2px solid var(--peach); outline-offset: -6px; }
.como-jogar__toggle .i { width: 16px; height: 16px; }
.como-jogar__toggle .i--play,
.como-jogar__toggle.is-paused .i--pause { display: none; }
.como-jogar__toggle.is-paused .i--play { display: block; }

.como-jogar__caption { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 20px; }

/* ---------- Passos ---------- */
.como-jogar__steps { border-bottom: 1px solid var(--line-2); }
.como-jogar__step {
  --num-w: clamp(48px, 6.4vw, 96px); /* = tamanho do número: "03" em Anton ocupa ~1em */
  display: grid; grid-template-columns: var(--num-w) minmax(0, 1fr);
  grid-template-areas: "num title" "body body";
  align-items: center; gap: 16px clamp(16px, 2.4vw, 32px);
  padding-block: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line-2);
}
.como-jogar__num {
  grid-area: num;
  font: 400 clamp(48px, 6.4vw, 96px)/.8 var(--display);
  color: var(--text); font-variant-numeric: tabular-nums;
  transition: color .2s var(--ease);
}
.como-jogar__step:hover .como-jogar__num,
.como-jogar__step:focus-within .como-jogar__num { color: var(--red); }
.como-jogar__title {
  grid-area: title;
  font: 700 clamp(24px, 2.4vw, 32px)/1 var(--ui);
  color: var(--text); text-transform: uppercase; letter-spacing: .02em;
}
.como-jogar__body { grid-area: body; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 14px; min-width: 0; }
.como-jogar__body p { max-width: 46ch; }
.como-jogar__body p .kbd { height: 24px; min-width: 28px; font-size: 11px; vertical-align: 2px; }

@media (min-width: 560px) {
  .como-jogar__step { grid-template-areas: "num title" "num body"; align-items: start; row-gap: 14px; }
  .como-jogar__title { padding-top: .1em; }
}

.como-jogar__req { display: flex; flex-wrap: wrap; gap: 6px; }
.como-jogar__req li {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 10px;
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); border: 1px solid var(--line-2);
}
.como-jogar__req li::before { content: ''; width: 6px; height: 6px; flex: none; background: var(--red); }

.como-jogar__note { font-size: 15px; line-height: 1.5; color: var(--text-3); }

.como-jogar__link {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font: 700 15px/1.1 var(--ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); transition: color .2s;
}
.como-jogar__link-text {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: var(--line-2); transition: text-decoration-color .2s;
}
.como-jogar__link .ico { width: 18px; height: 18px; }
.como-jogar__link .ext {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  background: var(--red); color: var(--peach); font-size: 13px;
  transition: transform .2s var(--ease), background-color .2s;
}
.como-jogar__link:hover { color: var(--red-deep); }
.como-jogar__link:hover .como-jogar__link-text { text-decoration-color: currentColor; }
.como-jogar__link:hover .ext { transform: translate(2px, -2px); background: var(--text); }

/* Terminal escuro dentro da seção clara: tokens de volta ao escuro só aqui */
.como-jogar__connect {
  --text: var(--peach); --text-2: var(--lilac); --text-3: rgba(255, 242, 235, .5);
  --line-2: rgba(255, 242, 235, .14); --surface-2: rgba(255, 242, 235, .08);
  display: flex; width: 100%; max-width: 540px;
  background: var(--bg); border-color: var(--bg);
}
.como-jogar__connect .connect__label { color: var(--red); font-weight: 600; }
.como-jogar__connect .connect__cmd { flex: 1; min-height: 52px; }
.como-jogar__connect .connect__copy { min-width: 48px; justify-content: center; }
/* o comando nunca pode aparecer cortado: fonte menor e botão só com ícone onde a coluna aperta */
@media (max-width: 1279.98px) { .como-jogar__connect .connect__cmd { font-size: 13px; } }
@media (min-width: 1024px) and (max-width: 1279.98px) { .como-jogar__connect .connect__copy span { display: none; } }

/* ---------- Ficha do servidor ---------- */
@media (min-width: 1024px) { .como-jogar__spec { margin-right: 10px; } }
.como-jogar__spec-title { margin-bottom: 12px; }
.como-jogar__spec-list { margin: 0; border-top: 1px solid var(--line-2); }
.como-jogar__spec-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line-2);
}
.como-jogar__spec-row dt {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}
.como-jogar__spec-row dd {
  margin: 0; text-align: right;
  font: 700 17px/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.como-jogar__spec-row dd small { font: 500 12px var(--mono); color: var(--text-3); margin-left: 2px; letter-spacing: .04em; }

/* ---------- Controles essenciais ---------- */
.como-jogar__controls { margin-top: clamp(64px, 9vw, 120px); }
.como-jogar__controls-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 24px; margin-bottom: 20px;
}
.como-jogar__controls-title {
  font: 700 clamp(24px, 2.4vw, 32px)/1 var(--ui);
  color: var(--text); text-transform: uppercase; letter-spacing: .02em;
}
.como-jogar__keys { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; margin: 0; border-top: 1px solid var(--line-2); }
.como-jogar__key {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line-2);
}
.como-jogar__key dt, .como-jogar__key dd { margin: 0; }
.como-jogar__key .kbd {
  min-width: 48px; height: 44px; padding: 0 12px;
  font-size: 15px; background: var(--surface);
}
.como-jogar__key--cmd .kbd { background: var(--bg); color: var(--peach); border-color: var(--bg); border-bottom-color: var(--red); }
.como-jogar__key dd {
  font: 600 18px/1.2 var(--ui); color: var(--text);
  text-transform: uppercase; letter-spacing: .04em;
}
.como-jogar__key dd small {
  display: block; margin-top: 4px;
  font: 500 11px/1.3 var(--mono); letter-spacing: .12em; color: var(--text-3);
}

@media (min-width: 560px) {
  .como-jogar__keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .como-jogar__keys { grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 0; border-bottom: 1px solid var(--line-2); }
  .como-jogar__key {
    grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; gap: 20px;
    padding: 24px 18px 28px; border-bottom: 0; border-left: 1px solid var(--line-2);
  }
  .como-jogar__key:first-child { border-left: 0; padding-left: 0; }
  .como-jogar__key dt { justify-self: start; }
}

/* ---------- Chamada final ---------- */
.como-jogar__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px 48px; margin-top: clamp(48px, 7vw, 88px);
}
.como-jogar__cta-title {
  font: 400 clamp(34px, 4.4vw, 60px)/.95 var(--display);
  color: var(--text); text-transform: uppercase;
}
.como-jogar__cta-title em { display: block; font-style: normal; color: var(--red); }
.como-jogar__cta-go { display: grid; justify-items: start; gap: 12px; }
.como-jogar__cta-note { font-size: 14px; line-height: 1.5; color: var(--text-3); max-width: 36ch; }

@media (max-width: 559.98px) {
  .como-jogar__cta-go { width: 100%; justify-items: stretch; }
  .como-jogar__cta-go .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .como-jogar__rec::before { animation: none; }
}

/* ===== 60-loja.css ===== */
/* ==========================================================================
   LOJA OFICIAL (#loja) — mosaico de categorias + faixa de confiança
   Quase todo card é um link "esticado" (o ::after do título cobre o card).
   Exceção: Veículos blindados — cada nível de blindagem é o seu próprio link.
   ========================================================================== */

/* ---------- Cabeçalho ---------- */
.loja__intro { display: grid; gap: 18px; max-width: 760px; }
.loja__all {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  min-height: 44px; padding: 0 2px;
  font: 500 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: var(--text); border-bottom: 1px solid var(--line-2);
  transition: color .2s, border-color .2s, gap .25s var(--ease);
}
.loja__all .ext { color: var(--red); }
.loja__all:hover { color: var(--red-hot); border-color: var(--red); gap: 14px; }

/* ---------- Mosaico ---------- */
.loja__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.loja__card {
  --hud-size: 16px;
  --pad: clamp(18px, 2.2vw, 28px);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 300px; padding: var(--pad);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .25s var(--ease);
}
/* grade de fundo (estilo mira/HUD), acesa em volta do cursor quando há JS */
.loja__card::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
  opacity: .6;
  -webkit-mask-image: radial-gradient(circle at var(--mx, 80%) var(--my, 28%), #000 0, transparent 340px);
          mask-image: radial-gradient(circle at var(--mx, 80%) var(--my, 28%), #000 0, transparent 340px);
}
.loja__card:hover { border-color: var(--line-2); }

/* imagem de fundo do card + sombra para o texto */
.loja__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.loja__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.loja__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--surface) 6%, rgba(12, 11, 13, .8) 40%, rgba(12, 11, 13, .2) 70%, rgba(12, 11, 13, .75) 100%);
}
.loja__card:hover .loja__media img { transform: scale(1.04); }

/* topo do card: índice + seta */
.loja__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.loja__idx {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px;
  font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2);
  background: var(--bg); border: 1px solid var(--line);
}
.loja__idx b { color: var(--red); font-weight: 600; }
.loja__idx b::after { content: '/'; margin-left: 10px; color: var(--text-3); font-weight: 500; }
.loja__go {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  font: 500 15px/1 var(--mono); color: var(--text);
  background: var(--bg); border: 1px solid var(--line-2);
  transition: background-color .2s, border-color .2s, transform .25s var(--ease);
}
.loja__card:hover .loja__go, .loja__card:focus-within .loja__go { background: var(--red); border-color: var(--red); }
.loja__card:hover .loja__go { transform: translate(2px, -2px); }

/* texto do card */
.loja__body { margin-top: auto; display: grid; justify-items: start; gap: 10px; max-width: 46ch; }
.loja__titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.loja__title {
  font: 400 clamp(34px, 3.3vw, 46px)/.95 var(--display);
  color: var(--text); text-transform: uppercase; text-wrap: balance;
}
.loja__desc { font-size: 15px; line-height: 1.55; color: var(--text-2); max-width: 38ch; }
.loja__desc .kbd { height: 24px; min-width: 0; font-size: 11px; vertical-align: 1px; }

/* link esticado: o card inteiro é clicável; anel de foco por dentro do card */
.loja__link { color: inherit; }
.loja__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.loja__link:focus-visible { outline: none; }
.loja__link:focus-visible::after { outline: 2px solid var(--text); outline-offset: -6px; box-shadow: inset 0 0 0 6px rgba(3, 3, 3, .55); }

/* link secundário dentro do card (fica acima do link esticado) */
.loja__sub {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  font: 600 13px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text);
  background: rgba(3, 3, 3, .6); border: 1px solid var(--line-2);
  transition: border-color .2s, background-color .2s;
}
.loja__sub .ext { color: var(--red); }
.loja__sub:hover { border-color: var(--red); background: var(--red-wash); }
.loja__sub:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* botão visual do card grande (o link é o card) */
.loja__cta {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; margin-top: 8px;
  font: 700 15px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  background: var(--red); color: var(--text);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background-color .2s;
}
.loja__card:hover .loja__cta { background: var(--red-hot); }

/* ---------- 01 · VIPs (escada de níveis + mira da marca; sem arte de personagem) ---------- */
/* o corpo ocupa o card: a escada fica no topo (order -1) e o título embaixo */
.loja__card--vip .loja__body { flex: 1 1 auto; max-width: none; grid-template-rows: 1fr; }
.loja__card--vip .loja__title { font-size: clamp(64px, 8.4vw, 116px); line-height: .86; }
.loja__card--vip .loja__desc { font-size: 16px; }

/* mira (símbolo) gigante e apagada no canto */
.loja__mark { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.loja__mark::before {
  content: ''; position: absolute; right: -14%; bottom: -18%;
  width: min(72%, 420px); aspect-ratio: 5500 / 4762;
  background: var(--red); opacity: .1;
  -webkit-mask: url(../img/symbol.svg) center / contain no-repeat;
          mask: url(../img/symbol.svg) center / contain no-repeat;
  transition: transform .5s var(--ease), opacity .3s;
}
.loja__card--vip:hover .loja__mark::before { transform: rotate(-8deg); opacity: .14; }

/* escada: uma barra por nível, crescendo do Booster (embaixo) ao Legend (em cima) */
.loja__tiers {
  order: -1; align-self: start; justify-self: stretch;
  display: flex; flex-direction: column-reverse; gap: 4px;
  margin: 2px 0 22px;
}
.loja__tiers li {
  display: grid; grid-template-columns: 22px 80px minmax(0, 1fr); align-items: center; column-gap: 10px;
  height: 24px;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
}
.loja__tiers li:last-child { color: var(--text); }
.loja__tn { color: var(--text-3); }
.loja__bar { position: relative; height: 10px; }
.loja__bar::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--n) * 100% / 9);
  background: var(--text-3); opacity: calc(.28 + var(--n) * .06);
  /* segmentos de ~8px; "round" encaixa um número inteiro deles em cada barra */
  -webkit-mask: linear-gradient(90deg, #000 72%, transparent 0) 0 0 / 11px 100% round;
          mask: linear-gradient(90deg, #000 72%, transparent 0) 0 0 / 11px 100% round;
}
.loja__tiers .is-max .loja__bar::before { background: var(--red); opacity: calc(.4 + (var(--n) - 5) * .15); }
.loja__bar small {
  position: absolute; top: 50%; left: calc(var(--n) * 100% / 9 + 10px); transform: translateY(-50%);
  font: 500 10px/1 var(--mono); letter-spacing: .08em; white-space: nowrap; color: var(--text-3);
}
.loja__tiers .is-max small { color: var(--red); }

/* ---------- 02 · Skins (armas que a loja aluga: MTAR e pistola Level Up) ---------- */
.loja__card--skins { min-height: 400px; }
.loja__guns { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.loja__guns::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--surface) 14%, rgba(12, 11, 13, .7) 38%, rgba(12, 11, 13, 0) 58%);
}
.loja__guns img {
  position: absolute; height: auto; max-width: none;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .6));
  transition: transform .3s var(--ease);
}
.loja__guns img:nth-child(1) { width: 78%; right: -4%; top: 21%; transform: rotate(-12deg); }
.loja__guns img:nth-child(2) { width: 38%; left: 7%; top: 40%; transform: rotate(8deg); }
.loja__card:hover .loja__guns img:nth-child(1) { transform: translate(8px, -6px) rotate(-12deg); }
.loja__card:hover .loja__guns img:nth-child(2) { transform: translate(-6px, 6px) rotate(8deg); }

/* ---------- 03 · Gangue (quadro do teaser; a tropa fica no alto do card) ---------- */
.loja__card--gang .loja__media img { object-position: 50% 0; }
.loja__card--gang .loja__media::after {
  background: linear-gradient(0deg, var(--surface) 8%, rgba(12, 11, 13, .85) 36%, rgba(12, 11, 13, .15) 64%, rgba(12, 11, 13, .4) 100%);
}

/* ---------- 04 · Veículos blindados (4 links, um por nível) ---------- */
.loja__card--armor .loja__media img { object-position: 100% 50%; opacity: .7; }
.loja__armor {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  width: 100%; max-width: 340px; margin-top: 4px;
}
.loja__tier {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px 8px;
  min-height: 48px; padding: 9px 11px 10px;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text);
  background: rgba(3, 3, 3, .62); border: 1px solid var(--line-2);
  transition: border-color .2s, background-color .2s;
}
.loja__tier .ext { color: var(--red); transition: transform .25s var(--ease); }
/* medidor de 4 segmentos: Semi 1, Baixa 2, Média 3, Alta 4 */
.loja__tier::after {
  content: ''; grid-column: 1 / -1; height: 5px;
  background: linear-gradient(90deg, var(--red) calc(var(--n) * 25%), var(--line-2) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 3px), transparent 0 25%);
          mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 3px), transparent 0 25%);
}
.loja__tier:hover { border-color: var(--red); background: rgba(3, 3, 3, .8); }
.loja__tier:hover .ext { transform: translate(2px, -2px); }
.loja__tier:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-color: var(--red); }

/* ---------- 05 · Danças e temas (faixas diagonais da marca) ---------- */
.loja__card--dance { min-height: 260px; }
.loja__stripes {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 10%, #000 70%);
  opacity: .55;
}
.loja__stripes::before {
  content: ''; position: absolute; inset: 0 -60px;
  background: repeating-linear-gradient(123deg,
    transparent 0 38px, var(--red) 38px 56px, transparent 56px 70px,
    rgba(219, 217, 219, .22) 70px 72px, transparent 72px 104px);
  transition: transform .3s var(--ease);
}
.loja__card:hover .loja__stripes::before { transform: translateX(28px); }
.loja__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.loja__hint {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}
.loja__hint .kbd { text-transform: none; letter-spacing: 0; }

/* ---------- Faixa de confiança ---------- */
.loja__trust { margin-top: clamp(24px, 3vw, 40px); background: var(--bg-2); border: 1px solid var(--line); }
.loja__stats { display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--line); }
.loja__src { display: inline-flex; align-items: center; gap: 10px; }
.loja__src::before { content: ''; width: 6px; height: 6px; background: var(--red); }
.loja__nums { display: grid; grid-template-columns: minmax(0, 1fr); }
.loja__num {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.loja__num:first-child { border-top: 0; padding-top: 0; }
.loja__num:last-child { padding-bottom: 0; }
.loja__n {
  display: block; white-space: nowrap;
  font: 400 clamp(38px, 4.6vw, 68px)/1 var(--display); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.loja__plus { display: inline-block; margin-right: .08em; font: 500 .5em/1 var(--mono); color: var(--red); vertical-align: top; transform: translateY(.2em); }
.loja__n small { font: 500 .34em var(--mono); color: var(--text-3); margin-left: 6px; letter-spacing: .04em; }
.loja__nl {
  font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2); text-align: right;
}

.loja__facts { display: grid; grid-template-columns: minmax(0, 1fr); }
.loja__fact { display: grid; align-content: start; justify-items: start; gap: 14px; padding: clamp(20px, 3vw, 32px); border-top: 1px solid var(--line); }
.loja__fact:first-child { border-top: 0; }
.loja__pay { display: flex; flex-wrap: wrap; gap: 8px; }
.loja__pay li {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px;
  font: 600 14px/1.1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-2);
}
.loja__pay .ico { width: 18px; height: 18px; color: var(--lilac); }
.loja__pay .ico--visa { width: 30px; height: 30px; margin-inline: -4px; }
.loja__pay .ico--mastercard { width: 22px; height: 22px; }
.loja__big { font: 700 clamp(22px, 2.2vw, 28px)/1.05 var(--ui); letter-spacing: .02em; text-transform: uppercase; color: var(--text); text-wrap: balance; }
.loja__note { font-size: 14px; line-height: 1.55; color: var(--text-3); max-width: 46ch; }
.loja__quote { margin: 0; padding-left: 16px; border-left: 2px solid var(--red); }
.loja__quote p { font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 48ch; }
.loja__terms {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: -6px;
  font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--red);
  transition: color .2s, gap .25s var(--ease);
}
.loja__terms:hover { color: var(--red-hot); gap: 12px; }

/* ---------- Tablet: 2 colunas ---------- */
@media (min-width: 640px) {
  .loja__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .loja__card--vip, .loja__card--skins, .loja__card--dance { grid-column: 1 / -1; }

  /* VIPs: escada mais alta e mais larga */
  .loja__tiers { gap: 5px; margin-bottom: 26px; }
  .loja__tiers li { grid-template-columns: 24px 96px minmax(0, 1fr); height: 26px; }
  .loja__bar { height: 12px; }

  .loja__card--skins { min-height: 340px; }
  .loja__card--skins .loja__desc { max-width: 28ch; }
  .loja__guns::after { background: linear-gradient(90deg, var(--surface) 20%, rgba(12, 11, 13, .55) 40%, rgba(12, 11, 13, 0) 58%); }
  .loja__guns img:nth-child(1) { width: 50%; right: 6%; top: 18%; }
  .loja__guns img:nth-child(2) { width: 24%; left: auto; right: 5%; top: 56%; }
}
@media (min-width: 720px) {
  .loja__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loja__num { display: grid; justify-content: start; gap: 10px; padding: 0 24px; border-top: 0; border-left: 1px solid var(--line); }
  .loja__num:first-child { border-left: 0; padding-left: 0; }
  .loja__nl { text-align: left; }
}
@media (min-width: 900px) {
  .loja__all { justify-self: end; }
  .loja__facts { grid-template-columns: 1.1fr 1fr 1.15fr; }
  .loja__fact { border-top: 0; border-left: 1px solid var(--line); }
  .loja__fact:first-child { border-left: 0; }
}

/* ---------- Desktop: mosaico ---------- */
@media (min-width: 1100px) {
  .loja__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(310px, auto) minmax(310px, auto) auto;
    gap: 16px;
  }
  .loja__card--vip { grid-column: 1 / span 6; grid-row: 1 / span 2; min-height: 0; }
  .loja__card--skins { grid-column: 7 / span 6; grid-row: 1; min-height: 0; }
  .loja__card--gang { grid-column: 7 / span 3; grid-row: 2; }
  .loja__card--armor { grid-column: 10 / span 3; grid-row: 2; }
  .loja__card--dance { grid-column: 1 / -1; grid-row: 3; min-height: 220px; }
  .loja__card--gang .loja__title, .loja__card--armor .loja__title { font-size: clamp(32px, 2.6vw, 40px); }
  .loja__card--dance .loja__body { max-width: 60ch; }
}

/* ---------- Telas bem estreitas ---------- */
@media (max-width: 380px) {
  .loja__all { white-space: normal; }
  .loja__card--vip .loja__title { font-size: 56px; }
  .loja__bar small { display: none; } /* a descrição já diz 15% e 100% */
  .loja__nl { font-size: 10px; letter-spacing: .12em; }
}

/* ===== 70-historia.css ===== */
/* ==========================================================================
   NOSSA HISTÓRIA — linha do tempo 2022 → 2026 (trilho HUD com progresso
   vermelho) + painel com o crescimento do Discord em barras em escala.
   Sem JS o trilho aparece completo; com JS (70-historia.js) ele avança
   com a rolagem.
   ========================================================================== */

.historia__intro { align-items: end; }
/* eyebrow + H2 ficam num wrapper (por causa do layout em linha): mesmo respiro de 18px do .section-head */
.historia__title { display: grid; gap: 18px; justify-items: start; }
@media (max-width: 999.98px) { .historia__intro { grid-template-columns: minmax(0, 1fr); } }
.historia__lead { max-width: 42ch; }

.historia__layout { display: grid; gap: clamp(56px, 7vw, 80px); }

/* ---------- Trilho ---------- */
.historia__timeline {
  --rail-x: 6px;                 /* centro do trilho, a partir da esquerda */
  --ev-x: 40px;                  /* onde começa o conteúdo dos marcos */
  --yr-size: clamp(3rem, 13vw, 4.4rem);
  --historia-p: 1;               /* 0 → 1: quanto do trilho já foi percorrido */
  position: relative;
}
.historia__rail {
  position: absolute; top: 0; bottom: 0; left: calc(var(--rail-x) - 1px); width: 2px;
  background: repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 10px);
}
.historia__fill {
  position: absolute; inset: 0;
  background: var(--red);
  transform-origin: top; transform: scaleY(var(--historia-p));
}
.historia__tip {
  position: absolute; left: 50%; top: calc(var(--historia-p) * 100%);
  display: none; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: var(--red); box-shadow: 0 0 0 4px var(--bg-2);
}
.historia__timeline.is-live .historia__tip { display: block; }
/* depois do último marco o trilho segue tracejado e some: a história continua */
.historia__year:last-child .historia__event:last-child::after {
  content: ''; position: absolute; z-index: 1;
  left: calc(var(--rail-x) - var(--ev-x) - 1px); top: calc(var(--node-y) + var(--node) + 3px); bottom: -8px; width: 2px;
  background:
    linear-gradient(transparent, var(--bg-2) 85%),
    repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 10px),
    var(--bg-2);
}

/* ---------- Anos ---------- */
.historia__years { display: grid; gap: clamp(48px, 6vw, 72px); }
.historia__year { position: relative; padding-left: var(--ev-x); }
/* marca de ano no trilho (traço maior, como numa régua) */
.historia__year::before {
  content: ''; position: absolute; z-index: 1;
  left: calc(var(--rail-x) - 10px); top: calc(var(--yr-size) * .42);
  width: 20px; height: 2px; background: var(--red);
  transition: background-color .3s;
}
.historia__when {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.historia__yr {
  font: 400 var(--yr-size)/.86 var(--display);
  color: var(--text); letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--rgb-split);
  transition: color .3s, -webkit-text-stroke-color .3s;
}
.historia__tag {
  font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
  padding-bottom: .3em;
}
.historia__tag span { color: var(--red); margin-right: 6px; }

/* ---------- Marcos ---------- */
.historia__events { display: grid; gap: 24px; container-type: inline-size; }
.historia__event {
  --node: 8px; --node-y: 4px;
  position: relative; display: grid; gap: 6px;
}
.historia__event::before {
  content: ''; position: absolute; z-index: 1;
  left: calc(var(--rail-x) - var(--ev-x) - var(--node) / 2); top: var(--node-y);
  width: var(--node); height: var(--node);
  background: var(--red); border: 1px solid var(--red);
  box-shadow: 0 0 0 3px var(--bg-2);
  transition: background-color .25s, border-color .25s;
}
.historia__date {
  font: 500 12px/16px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}
.historia__text { max-width: 52ch; color: var(--text-2); text-wrap: pretty; }
.historia__text strong { font-weight: 600; }

.historia__event--key { --node: 12px; --node-y: 2px; }
.historia__event--key .historia__date { color: var(--red); }
.historia__event--key .historia__text {
  font: 700 clamp(21px, 2vw, 26px)/1.1 var(--ui); letter-spacing: .02em; text-transform: uppercase; color: var(--text);
}

@container (min-width: 460px) {
  .historia__event { grid-template-columns: 132px minmax(0, 1fr); gap: 20px; --node-y: 10px; }
  .historia__event--key { --node-y: 8px; }
  .historia__date { padding-top: 6px; }
  .historia__event--key .historia__date { padding-top: 5px; }
}

/* Estado "ao vivo" (só com JS e sem movimento reduzido): o que ainda não passou fica apagado */
.historia__timeline.is-live .historia__year:not(.is-passed)::before { background: var(--line-2); }
.historia__timeline.is-live .historia__year:not(.is-passed) .historia__yr {
  color: transparent; -webkit-text-stroke: 1px var(--text-3); text-shadow: none;
}
.historia__timeline.is-live .historia__event:not(.is-passed)::before { background: var(--bg-2); border-color: var(--text-3); }
.historia__timeline.is-live .historia__tip { transition: opacity .25s; }
.historia__timeline.is-live:not(.is-started) .historia__tip { opacity: 0; }

/* ---------- Painel: crescimento do Discord ---------- */
.historia__panel {
  display: grid; gap: 28px; align-content: start;
  padding: clamp(20px, 3vw, 32px);
  background: var(--surface); border: 1px solid var(--line);
}
.historia__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.historia__stripes {
  width: 64px; height: 10px; flex: none;
  background: repeating-linear-gradient(-57deg, var(--red) 0 2px, transparent 2px 7px);
}

.historia__chart { display: grid; gap: 28px; }
.historia__cap { display: grid; gap: 8px; }
.historia__big {
  display: flex; align-items: flex-end; gap: 10px;
  font: 400 clamp(64px, 7vw, 88px)/.86 var(--display); color: var(--text);
  text-shadow: var(--rgb-split); font-variant-numeric: tabular-nums;
}
.historia__big .odo { --odo-h: .9em; }
.historia__big small {
  font: 400 .42em/1 var(--display); color: var(--red); text-transform: uppercase; text-shadow: none;
  padding-bottom: .06em;
}
.historia__sub { font: 500 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); text-wrap: balance; }

/* Barras em escala: altura = valor / 186 mil (o maior) */
.historia__bars {
  --plot: 220px;                 /* área do gráfico (rótulo + barra) */
  --label: 50px;                 /* espaço reservado ao rótulo acima da barra */
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.historia__bars::after {        /* linha de base */
  content: ''; position: absolute; left: 0; right: 0; top: var(--plot); height: 1px; background: var(--line-2);
}
.historia__bar { display: grid; grid-template-rows: var(--plot) auto; min-width: 0; }
.historia__plot { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-width: 0; }
.historia__val {
  display: grid; justify-items: start;
  font: 400 clamp(24px, 2.4vw, 30px)/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  transition-delay: calc(var(--i) * 90ms + 420ms);
}
.historia__val small { font: 500 10px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.historia__col {
  display: block; min-height: 2px;
  height: calc((var(--plot) - var(--label)) * var(--v) / 186);
  border: 1px solid var(--text-3); border-bottom: 0;
  background: repeating-linear-gradient(-57deg, rgba(219, 217, 219, .28) 0 1px, transparent 1px 6px);
  transform-origin: bottom;
  transition: transform .7s var(--ease-out);
  transition-delay: calc(var(--i) * 90ms + 120ms);
}
.historia__bar--now .historia__col { background: var(--red); border-color: var(--red); }
.historia__bar--now .historia__val small { color: var(--red); }
.historia__when-bar {
  display: grid; padding-top: 12px;
  font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.historia__when-bar b { font-weight: 600; color: var(--text-2); }

/* barras crescem quando o gráfico aparece (o JS central marca .is-in) */
.js.js-ready .historia__chart:not(.is-in) .historia__col { transform: scaleY(0); }
.js.js-ready .historia__chart:not(.is-in) .historia__val { opacity: 0; transform: translateY(8px); }

.historia__foot { display: grid; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.historia__live { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.historia__live b { font: 400 26px/1.1 var(--display); color: var(--text); font-weight: 400; font-variant-numeric: tabular-nums; }
.historia__live .odo { --odo-h: 1.1em; }
.historia__cta { width: 100%; }

.historia__note { margin-top: clamp(48px, 6vw, 72px); padding-top: 20px; border-top: 1px solid var(--line); }

/* ---------- Tablet+ : ano à esquerda do trilho, fixo enquanto os marcos rolam ---------- */
@media (min-width: 760px) {
  .historia__timeline {
    --yr-w: clamp(160px, 15vw, 200px);
    --col-gap: 72px;
    --yr-size: clamp(4.8rem, 7.4vw, 6rem);
    --rail-x: calc(var(--yr-w) + var(--col-gap) / 2);
    --ev-x: calc(var(--yr-w) + var(--col-gap));
  }
  .historia__year { display: grid; grid-template-columns: var(--yr-w) minmax(0, 1fr); column-gap: var(--col-gap); padding-left: 0; }
  .historia__when {
    position: sticky; top: calc(var(--nav-h) + 32px); align-self: start;
    display: grid; justify-items: end; gap: 12px; margin: 0; text-align: right;
  }
  .historia__tag { padding: 0; }
  .historia__year::before { top: calc(var(--yr-size) * .38); }
  .historia__events { padding-top: calc(var(--yr-size) * .38 - 12px); }
}

/* Painel largo (sem coluna lateral): título à esquerda, barras à direita */
@media (min-width: 760px) and (max-width: 1179.98px) {
  .historia__chart { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 40px; }
  .historia__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .historia__cta { width: auto; }
}

/* Desktop: linha do tempo + painel fixo ao lado */
@media (min-width: 1180px) {
  .historia__layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: start; }
  .historia__panel { position: sticky; top: calc(var(--nav-h) + 32px); }
  .historia__bars { --plot: 240px; }
}

@media (max-width: 380px) {
  .historia__bars { gap: 6px; --plot: 200px; }
  .historia__val { font-size: 22px; }
  .historia__when-bar { letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  .historia__col, .historia__val { transition: none; }
}

/* ===== 80-comunidade.css ===== */
/* ==========================================================================
   COMUNIDADE — Discord em destaque (número ao vivo) + redes oficiais
   ========================================================================== */
.comunidade__title { display: grid; gap: 18px; justify-items: start; }
.comunidade__lead { max-width: 40ch; }

/* ---------- Card do Discord ---------- */
.comunidade__discord {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid var(--line-2);
  margin-bottom: clamp(56px, 7vw, 96px);
}

/* Arte: corte diagonal da marca + faixa vermelha solta */
.comunidade__art {
  position: relative; order: -1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
}
.comunidade__art::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--red);
  clip-path: polygon(0 calc(100% - 5px), 100% calc(86% - 5px), 100% 86%, 0 100%);
}
.comunidade__art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 5%;
  clip-path: polygon(0 0, 100% 0, 100% calc(86% - 12px), 0 calc(100% - 12px));
}

.comunidade__body {
  position: relative; isolation: isolate;
  container-type: inline-size;
  display: grid; align-content: start; gap: clamp(26px, 3vw, 36px);
  padding: 20px 18px 28px;
}
/* grade de mira bem sutil no fundo do texto */
.comunidade__body::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(165deg, #000 0%, transparent 62%); mask-image: linear-gradient(165deg, #000 0%, transparent 62%);
  opacity: .75;
}

.comunidade__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.comunidade__badge {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  background: var(--red); color: var(--text);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.comunidade__badge .ico { width: 22px; height: 22px; }
.comunidade__kicker {
  display: flex; align-items: center; gap: 10px;
  font: 500 12px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--text);
}
.comunidade__idx { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--text-3); }
.comunidade__live { margin-left: auto; }

.comunidade__count { display: grid; gap: 14px; }
.comunidade__num {
  font: 400 clamp(3.4rem, 11vw, 7.5rem)/1 var(--display); /* reserva p/ navegador sem unidade cqi */
  font: 400 clamp(3.4rem, 23cqi, 10rem)/1 var(--display);
  color: var(--text); text-shadow: var(--rgb-split); text-transform: uppercase;
  letter-spacing: -.005em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.comunidade__num b { font-weight: 400; color: inherit; }
.comunidade__num .odo { --odo-h: 1em; }
.comunidade__unit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  font: 500 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2);
}
.comunidade__online { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); letter-spacing: .12em; }
.comunidade__online b { color: var(--text); font-weight: 600; }

.comunidade__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.comunidade__note { display: grid; gap: 2px; font-size: 14px; line-height: 1.45; color: var(--text-3); }
.comunidade__invite { font: 500 13px/1.4 var(--mono); letter-spacing: .06em; color: var(--text); }

/* Media queries em sintaxe clássica (min/max-width): Safari < 16.4 ignora a sintaxe de intervalo */
@media (max-width: 559.98px) {
  .comunidade__cta .btn { width: 100%; }
}
@media (max-width: 399.98px) {
  .comunidade__cta .btn { padding-inline: 14px; gap: 8px; font-size: 16px; letter-spacing: .06em; }
}
@media (max-width: 479.98px) {
  .comunidade__kicker .comunidade__idx { display: none; }
  .comunidade__live { margin-left: 0; }
}
@media (min-width: 640px) and (max-width: 999.98px) {
  .comunidade__art { aspect-ratio: 2 / 1; }
}
@media (min-width: 1000px) {
  .comunidade__discord { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .comunidade__body { padding: clamp(28px, 3.6vw, 52px); }
  .comunidade__art {
    order: 0; aspect-ratio: auto;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  }
  .comunidade__art::before { clip-path: polygon(12% 0, calc(12% + 6px) 0, 6px 100%, 0 100%); }
  .comunidade__art img {
    object-position: 70% 4%; /* selo PROLEAGUE inteiro no topo */
    clip-path: polygon(calc(12% + 14px) 0, 100% 0, 100% 100%, 14px 100%);
  }
}

/* ---------- Redes ---------- */
.comunidade__subhead { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.comunidade__subhead h3 { color: var(--text); }
.comunidade__subhead::after { content: ''; order: 1; flex: 1; height: 1px; background: var(--line-2); }
.comunidade__subhead span { order: 2; }

.comunidade__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.comunidade__grid > li { display: flex; min-width: 0; }
.comunidade__grid > li > a { flex: 1; min-width: 0; }
.comunidade__feature { margin-bottom: 12px; }
.comunidade__grid > li:nth-child(n+3) { margin-top: -1px; } /* linhas coladas, borda única */

.comunidade__handle { font: 500 12px/1.3 var(--mono); letter-spacing: .06em; color: var(--text-3); overflow-wrap: anywhere; }
.comunidade__what { font-size: 15px; line-height: 1.45; color: var(--text-2); }
.comunidade__go { font: 500 18px/1 var(--mono); color: var(--text-3); transition: transform .2s var(--ease), color .2s, background-color .2s; }

/* Instagram: card com a arte oficial */
.comunidade__insta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 5;
  background: var(--red); border: 1px solid var(--line);
  --hud: transparent;
}
.comunidade__insta.hud::after { inset: 0; }
.comunidade__insta:hover, .comunidade__insta:focus-visible { --hud: var(--peach); }
.comunidade__insta img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 14%;
  transition: transform .3s var(--ease);
}
.comunidade__insta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(3, 3, 3, .95) 0%, rgba(3, 3, 3, .78) 30%, rgba(3, 3, 3, 0) 64%);
}
.comunidade__insta:hover img { transform: scale(1.04); }
.comunidade__insta-body { display: grid; justify-items: start; gap: 6px; padding: 22px 20px; }
.comunidade__insta-top { justify-self: stretch; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--text); }
.comunidade__insta-top .ico { width: 22px; height: 22px; }
.comunidade__insta-kicker { font: 500 12px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.comunidade__insta-name {
  font: 400 clamp(44px, 5.4vw, 76px)/.92 var(--display); text-transform: uppercase;
  color: var(--text); text-shadow: var(--rgb-split); margin-bottom: 6px;
}
.comunidade__insta .comunidade__handle { color: var(--text); }
.comunidade__insta .comunidade__idx { color: var(--text-2); }
.comunidade__insta .comunidade__go {
  margin-left: auto;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line-2); background: var(--bg); color: var(--text);
}
.comunidade__insta:hover .comunidade__go { background: var(--red); border-color: var(--red); }
.comunidade__insta:focus-visible { outline: 2px solid var(--peach); outline-offset: -6px; }

/* Linhas das outras redes */
.comunidade__row {
  position: relative;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; align-items: center; gap: 4px 16px;
  min-height: 96px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line);
  --hud: var(--red);
  transition: background-color .2s;
}
.comunidade__row.hud::after { opacity: 0; transition: opacity .2s; }
.comunidade__row:hover, .comunidade__row:focus-visible { background: var(--surface-2); z-index: 1; }
.comunidade__row:hover::after, .comunidade__row:focus-visible::after { opacity: 1; }
.comunidade__row:focus-visible { outline: 2px solid var(--red); outline-offset: -5px; }
.comunidade__row .comunidade__idx { display: none; }
.comunidade__ico {
  grid-column: 1; grid-row: 1 / span 2;
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--line-2); background: var(--bg); color: var(--text);
  transition: background-color .2s, border-color .2s;
}
.comunidade__ico .ico { width: 22px; height: 22px; }
.comunidade__id { grid-column: 2; grid-row: 1; align-self: end; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.comunidade__name { font: 700 24px/1 var(--ui); letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.comunidade__row .comunidade__what { grid-column: 2; grid-row: 2; align-self: start; }
.comunidade__row .comunidade__go { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
.comunidade__row:hover .comunidade__ico, .comunidade__row:focus-visible .comunidade__ico { background: var(--red); border-color: var(--red); }
.comunidade__row:hover .comunidade__go, .comunidade__row:focus-visible .comunidade__go { color: var(--red); transform: translate(3px, -3px); }

@media (min-width: 640px) {
  .comunidade__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
  .comunidade__feature { grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0; }
  .comunidade__grid > li:nth-child(2) { margin-top: 0; }
  .comunidade__insta { aspect-ratio: auto; min-height: 480px; }
  /* card vira coluna alta: ancora a arte à direita/topo p/ o selo PROLEAGUE nunca ser cortado */
  .comunidade__insta img { object-position: 100% 0%; }
  .comunidade__insta-body { padding: 28px; }
}
@media (min-width: 640px) and (max-width: 899.98px) {
  /* coluna do Instagram um pouco mais larga: rosto e selo cabem juntos */
  .comunidade__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); }
}
@media (min-width: 1100px) {
  .comunidade__row { grid-template-columns: 24px 52px minmax(0, 1fr) minmax(0, 1.1fr) 24px; gap: 20px; padding: 18px 28px; }
  .comunidade__row .comunidade__idx { display: block; }
  .comunidade__ico, .comunidade__id, .comunidade__row .comunidade__what, .comunidade__row .comunidade__go { grid-column: auto; grid-row: auto; align-self: center; }
  .comunidade__ico { width: 52px; height: 52px; }
  .comunidade__id { flex-direction: column; align-items: flex-start; gap: 6px; }
  .comunidade__name { font-size: 26px; }
}

/* ===== 90-faq.css ===== */
/* ==========================================================================
   FAQ + SUPORTE (#faq)
   Celular: título → perguntas → suporte (ordem do HTML).
   Desktop: título e suporte à esquerda (suporte fixo ao rolar), acordeão à direita.
   ========================================================================== */
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 7vw, 56px); }
.faq__head { margin-bottom: 0; }
.faq__title { font-size: clamp(2.6rem, 6vw, 4.4rem); }

/* ---------- Acordeão ---------- */
.faq__meta {
  display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: 14px;
  font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}
.faq__meta span:first-child { color: var(--red); }

.faq__item {
  --hud: var(--red); --hud-size: 12px;
  border-top: 1px solid var(--line);
  transition: background-color .25s;
  interpolate-size: allow-keywords;
}
.faq__item:last-of-type { border-bottom: 1px solid var(--line); }
.faq__item::after { opacity: 0; } /* cantoneiras (.hud) só na pergunta aberta */
.faq__item[open] { background: var(--red-wash); }
.faq__item[open]::after { opacity: 1; }

.faq__q {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 36px; align-items: center; gap: 12px;
  min-height: 72px; padding: 14px 12px 14px 14px;
  list-style: none; cursor: pointer;
  transition: background-color .2s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q:hover { background: var(--surface); }
.faq__item[open] > .faq__q:hover { background: transparent; }
.faq__q:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

.faq__n { font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--text-3); transition: color .2s; }
.faq__qt {
  font: 600 clamp(18px, 1.55vw, 22px)/1.15 var(--ui); letter-spacing: .03em; text-transform: uppercase;
  color: var(--lilac); text-wrap: balance; transition: color .2s;
}
.faq__q:hover .faq__n, .faq__item[open] .faq__n { color: var(--red); }
.faq__q:hover .faq__qt, .faq__item[open] .faq__qt { color: var(--text); }

/* Indicador + / × */
.faq__x {
  position: relative; justify-self: end; width: 36px; height: 36px;
  border: 1px solid var(--line-2);
  transition: background-color .25s, border-color .25s;
}
.faq__x::before, .faq__x::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 2px; margin: -1px 0 0 -7px;
  background: var(--red);
  transition: transform .3s var(--ease), background-color .25s;
}
.faq__x::after { transform: rotate(90deg); }
.faq__q:hover .faq__x { border-color: var(--red); }
.faq__item[open] .faq__x { background: var(--red); border-color: var(--red); }
.faq__item[open] .faq__x::before { transform: rotate(45deg); background: var(--text); }
.faq__item[open] .faq__x::after { transform: rotate(135deg); background: var(--text); }

/* Resposta */
.faq__a {
  display: grid; justify-items: start; gap: 14px;
  padding: 0 14px 26px 52px;
  transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.faq__item:not([open]) .faq__a { opacity: 0; translate: 0 -8px; }
@starting-style { .faq__item[open] .faq__a { opacity: 0; translate: 0 -8px; } }
.faq__a p { max-width: 60ch; }
.faq__a .kbd { height: 24px; min-width: 28px; font-size: 11px; vertical-align: 1px; }
.faq__note { font-size: 15px; line-height: 1.6; color: var(--text-3); padding-left: 14px; border-left: 2px solid var(--line-2); }
.faq__actions { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: -4px; }
.faq__actions .link-arrow, .faq__mail-actions .link-arrow { min-height: 44px; }

.faq__connect { width: 100%; max-width: 440px; min-height: 46px; }
.faq__connect .connect__cmd { white-space: normal; overflow-wrap: anywhere; }

.faq__req { display: grid; gap: 10px; }
.faq__req li {
  display: flex; align-items: center; gap: 12px;
  font: 600 17px/1.25 var(--ui); letter-spacing: .05em; text-transform: uppercase; color: var(--text);
}
.faq__req .i { width: 18px; height: 18px; color: var(--red); }
.faq__req .is-off { color: var(--text-3); }
.faq__req .is-off .i { color: var(--text-3); }

.faq__pay { display: flex; flex-wrap: wrap; gap: 8px; }
.faq__pay li {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 8px 14px;
  background: var(--bg); border: 1px solid var(--line-2);
  font: 600 15px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text);
}
.faq__pay .ico, .faq__pay .i { width: 18px; height: 18px; color: var(--text-2); }
.faq__pay .is-fast { border-color: var(--red); background: var(--red-wash); }
.faq__pay .is-fast .ico { color: var(--red); }
.faq__pay small { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--red); }

.faq__quote { display: grid; gap: 10px; padding: 2px 0 2px 18px; border-left: 3px solid var(--red); }
.faq__quote blockquote { margin: 0; }
.faq__quote blockquote p {
  max-width: 30ch; text-wrap: balance;
  font: 700 clamp(21px, 2vw, 27px)/1.1 var(--ui); letter-spacing: .02em; text-transform: uppercase; color: var(--text);
}
.faq__quote strong { color: var(--red); font-weight: 700; }

/* Abrir/fechar com altura animada (Chrome/Edge; nos demais só o fade da resposta) */
.faq__item::details-content {
  block-size: 0; overflow: clip;
  transition: block-size .3s var(--ease), content-visibility .3s allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .faq__item::details-content { transition: none; }
}

/* ---------- Suporte ---------- */
.faq__support { display: grid; gap: 14px; align-content: start; }
.faq__cards { display: grid; gap: 12px; }

/* Ticket: placa vermelha da marca, faixas a -33° e a mira */
.faq__ticket {
  --cut: 18px;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: start; align-content: start; gap: 14px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--red); color: var(--bg);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.faq__ticket::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(123deg, transparent 0 55%, rgba(255, 242, 235, .16) 55% 63%, transparent 63% 67%, rgba(255, 242, 235, .1) 67% 70%, transparent 70%),
    linear-gradient(123deg, transparent 0 84%, rgba(3, 3, 3, .14) 84%);
}
.faq__ticket::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  right: -8%; bottom: -22%; width: min(48%, 250px); aspect-ratio: 5500 / 4762;
  background: var(--bg); opacity: .15;
  -webkit-mask: url(../img/symbol.svg) center / contain no-repeat; mask: url(../img/symbol.svg) center / contain no-repeat;
  transition: transform .3s var(--ease);
}
.faq__ticket:hover::after { transform: rotate(-4deg) scale(1.04); }
.faq__ticket-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; width: 100%; }
.faq__tag {
  padding: 7px 9px;
  font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  background: var(--bg); color: var(--peach);
}
.faq__micro { font: 500 10px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bg); }
.faq__ticket-title {
  margin-top: 14px;
  font: 400 clamp(36px, 3.6vw, 52px)/.92 var(--display); text-transform: uppercase; color: var(--peach);
  text-shadow: 3px 3px 0 var(--red-deep);
}
.faq__ticket-text { max-width: 36ch; font-size: 16px; font-weight: 500; line-height: 1.55; color: var(--bg); }
.faq__ticket-btn { margin-top: 6px; background: var(--bg); color: var(--peach); }
.faq__ticket-btn:hover { background: var(--surface-2); }

/* E-mail */
.faq__mail { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; padding: 24px; }
.faq__mail-top { display: flex; align-items: center; gap: 10px; color: var(--red); }
.faq__mail-title { font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.faq__mail-addr { font: 600 clamp(17px, 4.8vw, 22px)/1.2 var(--ui); letter-spacing: .02em; color: var(--text); overflow-wrap: anywhere; }
.faq__mail-actions { align-self: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.faq__copy {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-2);
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
  transition: background-color .2s, border-color .2s, color .2s;
}
.faq__copy .i { width: 14px; height: 14px; }
.faq__copy:hover { color: var(--text); border-color: var(--text-3); background: var(--surface-2); }
.faq__copy:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
.faq__copy.is-done { background: var(--online); border-color: var(--online); color: var(--bg); }

/* ---------- Telas maiores ---------- */
@media (width < 640px) {
  .faq__ticket-btn { justify-self: stretch; }
}
@media (width >= 640px) {
  .faq__q { grid-template-columns: 44px minmax(0, 1fr) 40px; gap: 16px; min-height: 80px; padding: 18px 20px; }
  .faq__x { width: 40px; height: 40px; }
  .faq__a { padding: 0 76px 30px 80px; }
}
@media (640px <= width < 1024px) {
  .faq__cards { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (width >= 1024px) {
  .faq__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    gap: 40px clamp(48px, 6vw, 104px);
    align-items: start;
  }
  .faq__head { grid-area: 1 / 1 / 2 / 2; }
  .faq__list { grid-area: 1 / 2 / 3 / 3; }
  .faq__support { grid-area: 2 / 1 / 3 / 2; }
  .faq__title { font-size: clamp(3.4rem, 5vw, 5.5rem); }
  .faq__a { padding-right: 20px; }
}
@media (width >= 1024px) and (height >= 720px) {
  .faq__support { position: sticky; top: calc(var(--nav-h) + 28px); }
}