/* ===========================================================================
   INFINITY TASK — landing no visual FORJA do jogo (2026-10-10).
   Tudo que é arte vem do jogo (scripts/site/site-art.ts): molduras/botões/soquete/filetes de raridade/
   emblemas = UI Forja (artCore), cenas = Salão dos Heróis / Ferreiro / Loja (src/ui/scenes), ícones =
   PixelLab (assets/ui/icons). Cores de classe/raridade e medidas das cenas: site/css/game.css (gerado).
   Escala do pixel (igual ao jogo): --fp = round(dpr)/dpr → 1 px de arte cai em pixel inteiro do monitor.
     --u  = 1 px de arte da UI (molduras, botões, abas) — 1:1 como no jogo
     --u2 = 2 px (vitrines: soquetes das skills, janelas das cenas, faixa de raridades)
     .stage --K / --KP = boneco da classe / tablado (escala inteira, como a criação de personagem)
     --sk = px CSS por px de arte de cada CENA (landing.js: inteiro no monitor; aqui só o fallback sem JS)
   =========================================================================== */
:root {
  color-scheme: dark;
  --fp: 1;
  --u: calc(var(--fp) * 1px);
  --u2: calc(var(--fp) * 2px);
  --void: var(--scene-void, #0b0b0d);
  --bg: #121214;
  --bg-2: #18181a;
  --panel-grad: linear-gradient(180deg, #2c2d2f 0, #222325 60px, #1c1c1f 100%);
  --line: #363739;
  --text: #dcd6c8;
  --muted: #a9aaac;
  --gold: #f0c24b;
  --gold-hi: #fbe08a;
  --gold-dim: #b98424;
  --title-ink: #f1e1b6;
  --ink: #2a1a06;
  --f-title: "Cinzel", "Marcellus SC", Georgia, serif;
  --f-sc: "Alegreya SC", "Cinzel", Georgia, serif;
  --f-body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --wrap: 1180px;
  --gut: 20px;
}
@media (max-width: 760px) {
  :root { --u2: calc(var(--fp) * 1px); --gut: 16px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font: 17px/1.6 var(--f-body);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
.px, .px img { image-rendering: pixelated; }
a { color: var(--gold-hi); text-underline-offset: 3px; }
a:hover { color: #fff2c6; }
:where(a, button, [tabindex]):focus-visible { outline: 3px solid #f3d887; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.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; }
/* idioma: o par pt/en fica no HTML; mostra só o da página (<html lang>) */
html:not([lang="en"]) [data-l="en"], html[lang="en"] [data-l="pt"] { display: none !important; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; background: #f0c24b; color: var(--ink); font: 700 15px var(--f-sc); text-decoration: none;
}
.skip:focus { top: 10px; }

/* ---------- botões da Forja (placa mostarda 9-slice: fatias 10 12, igual ao forja.css) ---------- */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 52px; min-width: 150px; padding: 0 8px calc(var(--u) * 2);
  border-style: solid; border-width: calc(var(--u) * 10) calc(var(--u) * 12);
  border-image: url("../img/forja/btn.png") 10 12 fill / calc(var(--u) * 10) calc(var(--u) * 12) / 0 stretch;
  image-rendering: pixelated;
  background: none;
  color: var(--ink);
  font: 700 17px/1.05 var(--f-sc);
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 244, 200, 0.45);
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.08s ease;
}
.btn:hover { color: var(--ink); border-image-source: url("../img/forja/btn-h.png"); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); transform: translateY(-1px); }
.btn:active { border-image-source: url("../img/forja/btn-p.png"); transform: none; filter: brightness(0.97); }
.btn.primary { border-image-source: url("../img/forja/btn-pr.png"); text-shadow: 0 1px 0 rgba(255, 248, 215, 0.6); }
.btn.primary:hover { border-image-source: url("../img/forja/btn-pr-h.png"); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 6px rgba(255, 200, 90, 0.4)); }
/* "Em breve" = placa bloqueada (fosca) da Forja */
.btn:disabled, .btn[aria-disabled="true"] {
  border-image-source: url("../img/forja/btn-x.png");
  color: #9a9b9d; text-shadow: 0 1px 0 #000; cursor: not-allowed; transform: none; filter: none;
}
.btn .b-sub { font: 700 11.5px/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; }
.btn:disabled .b-sub { color: #c9b27a; }
.btn.sm { min-height: 40px; min-width: 0; font-size: 15px; padding-left: 4px; padding-right: 4px; }
.btn .ic { width: 20px; height: 20px; }

/* botão GRANDE (placa "Criar Personagem" da criação: 72x56, fatias 18 22) + brilho que varre */
.cta-wrap { position: relative; display: inline-block; }
.cta-wrap::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 112%; height: 230%;
  transform: translate(-50%, -46%);
  background: radial-gradient(closest-side, rgba(240, 180, 60, 0.32), rgba(240, 180, 60, 0.07) 62%, transparent);
  pointer-events: none;
  animation: cta-glow 3.6s ease-in-out infinite;
}
@keyframes cta-glow { 0%, 100% { opacity: 0.45; transform: translate(-50%, -46%) scale(0.94); } 50% { opacity: 1; transform: translate(-50%, -46%) scale(1.05); } }
.cta {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-width: min(360px, calc(100vw - 2 * var(--gut)));
  height: calc(var(--u) * 56);
  min-height: 56px;
  padding: 0 14px;
  border-style: solid; border-width: calc(var(--u) * 18) calc(var(--u) * 22);
  border-image: url("../img/forja/cta.png") 18 22 fill / calc(var(--u) * 18) calc(var(--u) * 22) / 0 stretch;
  image-rendering: pixelated;
  color: var(--ink);
  font: 800 21px/1 var(--f-title);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 248, 215, 0.7);
  transition: filter 0.12s ease, transform 0.08s ease;
}
.cta::after {
  content: ""; position: absolute; inset: calc(var(--u) * -11) calc(var(--u) * -15);
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 240, 0.55) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%;
  mix-blend-mode: soft-light;
  pointer-events: none;
  animation: cta-sheen 3.6s ease-in-out infinite;
}
@keyframes cta-sheen { 0% { background-position: 130% 0; } 45%, 100% { background-position: -30% 0; } }
.cta:hover {
  color: var(--ink);
  border-image-source: url("../img/forja/cta-h.png");
  transform: translateY(-2px);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 10px rgba(255, 205, 95, 0.6));
}
.cta:active { border-image-source: url("../img/forja/cta-p.png"); transform: translateY(1px); }
/* manutenção de rotina: o Jogar vira placa bloqueada */
.play[aria-disabled="true"] { pointer-events: none; }
.cta[aria-disabled="true"] { border-image-source: url("../img/forja/btn-x.png"); border-image-slice: 10 12 fill; border-width: calc(var(--u) * 10) calc(var(--u) * 12); border-image-width: calc(var(--u) * 10) calc(var(--u) * 12); color: #9a9b9d; text-shadow: 0 1px 0 #000; }
.cta[aria-disabled="true"]::after, .cta-wrap:has(.cta[aria-disabled="true"])::before { display: none; }

/* ---------- NAV: barra de título de aço escovado + filete de latão (cabeçalho das janelas do jogo) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background:
    url("../img/forja/hdr-top.png") left top / calc(var(--u) * 64) calc(var(--u) * 2) repeat-x,
    url("../img/forja/hdr-bot.png") left bottom / calc(var(--u) * 64) calc(var(--u) * 5) repeat-x,
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.14)),
    url("../img/forja/hdr-tex.png") left top / calc(var(--u) * 64) calc(var(--u) * 32) repeat,
    #323335;
  image-rendering: pixelated;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.nav-in { display: flex; align-items: center; gap: 22px; height: 62px; padding-bottom: calc(var(--u) * 5); }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 20px/1 var(--f-title); letter-spacing: 0.1em; white-space: nowrap;
  color: var(--title-ink); text-decoration: none;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(243, 200, 110, 0.25);
}
.brand:hover { color: #fff2c6; }
/* LOGO OFICIAL do jogo no lugar do nome em texto (Marcelo 2026-10-17): a mesma arte da tela de load do jogo
   (assets/ui/loading/logo.webp → site/img/forja/logo.webp, liberada na trava do Caddy pelo /img/forja/*). É arte em
   alta reduzida: redução SUAVE (a barra herda image-rendering: pixelated, que serrilharia a logo). */
.brand-logo, .hero-logo img, .foot-logo { image-rendering: auto; height: auto; }
.brand-logo { display: block; width: auto; height: 46px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); transition: filter 0.15s ease; }
.brand:hover .brand-logo { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px rgba(243, 200, 110, 0.45)); }
.hero-title.hero-logo {
  line-height: 0; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 28px rgba(240, 190, 80, 0.22));
}
.hero-logo img { display: block; width: clamp(240px, 30vw, 520px); margin: 0 auto; }
.foot-brand .foot-logo { display: inline-block; width: auto; height: 38px; vertical-align: middle; }
.foot-brand .foot-logo + small { margin-left: 12px; }
@media (max-width: 760px) { .brand-logo { height: 40px; } }
@media (max-width: 600px) { .hero-logo img { width: min(54vw, 215px); } }
@media (max-width: 380px) { .brand-logo { height: 36px; } }
.nav-links { display: flex; gap: 24px; margin: 0 auto; }
.nav-links a { font: 700 16px var(--f-sc); letter-spacing: 0.04em; color: #d2c9b4; text-decoration: none; text-shadow: 0 1px 0 #000; }
.nav-links a:hover { color: var(--gold-hi); }
.nav-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-links + .nav-tools { margin-left: 0; }
.nav-play { min-width: 96px; }
@media (max-width: 520px) { .nav-play { display: none; } }
/* PT | EN = abas da Forja (aba ativa mostarda) */
.lang { display: flex; gap: 2px; }
.lang button {
  min-width: 42px; height: 34px; padding: 0 4px;
  border-style: solid; border-width: calc(var(--u) * 8) calc(var(--u) * 10) calc(var(--u) * 2);
  border-image: url("../img/forja/tab.png") 8 10 2 fill / calc(var(--u) * 8) calc(var(--u) * 10) calc(var(--u) * 2) / 0 stretch;
  image-rendering: pixelated;
  background: none; color: #c5c6c8; cursor: pointer;
  font: 700 14px/1 var(--f-sc); letter-spacing: 0.08em; text-shadow: 0 1px 0 #000;
}
.lang button:hover { border-image-source: url("../img/forja/tab-h.png"); color: #f0e3c0; }
.lang button[aria-pressed="true"] { border-image-source: url("../img/forja/tab-on.png"); color: var(--ink); text-shadow: 0 1px 0 rgba(255, 244, 200, 0.45); }

/* ---------- banner de manutenção de rotina (esmalte vermelho, como o botão de perigo) ---------- */
#maint-banner {
  display: none; position: relative; z-index: 60;
  padding: 12px var(--gut);
  background: linear-gradient(180deg, #961d1f, #721318);
  border-bottom: 2px solid #4f0c11;
  color: #fff0e8; text-align: center; font: 700 16px/1.4 var(--f-body); text-shadow: 0 1px 0 #2a0406;
}

/* ===========================================================================
   CENAS do jogo (pixel art) — base = quadro 0; .rg = recorte animado (folha em degraus)
   =========================================================================== */
.scene { position: relative; flex: none; width: calc(var(--scene-w) * var(--sk) * 1px); height: calc(var(--scene-h) * var(--sk) * 1px); }
.scene picture { display: contents; }
.scene img { width: 100%; height: 100%; image-rendering: pixelated; }
.rg {
  position: absolute;
  left: calc(var(--x) * var(--sk) * 1px); top: calc(var(--y) * var(--sk) * 1px);
  width: calc(var(--w) * var(--sk) * 1px); height: calc(var(--h) * var(--sk) * 1px);
  background-repeat: no-repeat;
  background-size: calc(var(--w) * var(--n) * var(--sk) * 1px) 100%;
  image-rendering: pixelated;
  animation: rg-play calc(var(--n) / var(--fps) * 1s) steps(var(--n)) infinite;
  animation-play-state: paused;
}
.is-live .rg { animation-play-state: running; }
@keyframes rg-play { from { background-position: 0 0; } to { background-position: calc(var(--w) * var(--n) * var(--sk) * -1px) 0; } }

/* Portal do infinito (fundo do hero; arte PixelLab — scripts/site/hero-portal.ts): PC 640x360 / celular em pé
   360x640. Recortes animados da própria arte, cada um com seu laço (--n quadros a --fps): runas pulsando, luz em
   espiral no vórtice, chamas e moedas cintilando. Nenhum pixel muda de lugar — só a cor. */
.portal .port { display: none; }
.portal .land.r0 { --x: var(--hero-land-r0-x); --y: var(--hero-land-r0-y); --w: var(--hero-land-r0-w); --h: var(--hero-land-r0-h); --n: var(--hero-land-r0-n); --fps: var(--hero-land-r0-fps); }
.portal .land.r1 { --x: var(--hero-land-r1-x); --y: var(--hero-land-r1-y); --w: var(--hero-land-r1-w); --h: var(--hero-land-r1-h); --n: var(--hero-land-r1-n); --fps: var(--hero-land-r1-fps); }
.portal .land.r2 { --x: var(--hero-land-r2-x); --y: var(--hero-land-r2-y); --w: var(--hero-land-r2-w); --h: var(--hero-land-r2-h); --n: var(--hero-land-r2-n); --fps: var(--hero-land-r2-fps); }
.portal .land.r3 { --x: var(--hero-land-r3-x); --y: var(--hero-land-r3-y); --w: var(--hero-land-r3-w); --h: var(--hero-land-r3-h); --n: var(--hero-land-r3-n); --fps: var(--hero-land-r3-fps); }
.portal .land.r4 { --x: var(--hero-land-r4-x); --y: var(--hero-land-r4-y); --w: var(--hero-land-r4-w); --h: var(--hero-land-r4-h); --n: var(--hero-land-r4-n); --fps: var(--hero-land-r4-fps); }
.portal.is-live .land.r0 { background-image: url("../img/scene/portal-land-r0.png"); }
.portal.is-live .land.r1 { background-image: url("../img/scene/portal-land-r1.png"); }
.portal.is-live .land.r2 { background-image: url("../img/scene/portal-land-r2.png"); }
.portal.is-live .land.r3 { background-image: url("../img/scene/portal-land-r3.png"); }
.portal.is-live .land.r4 { background-image: url("../img/scene/portal-land-r4.png"); }
@media (max-width: 600px) {
  .portal .land { display: none; }
  .portal .port { display: block; }
  .portal .port.r0 { --x: var(--hero-port-r0-x); --y: var(--hero-port-r0-y); --w: var(--hero-port-r0-w); --h: var(--hero-port-r0-h); --n: var(--hero-port-r0-n); --fps: var(--hero-port-r0-fps); }
  .portal .port.r1 { --x: var(--hero-port-r1-x); --y: var(--hero-port-r1-y); --w: var(--hero-port-r1-w); --h: var(--hero-port-r1-h); --n: var(--hero-port-r1-n); --fps: var(--hero-port-r1-fps); }
  .portal .port.r2 { --x: var(--hero-port-r2-x); --y: var(--hero-port-r2-y); --w: var(--hero-port-r2-w); --h: var(--hero-port-r2-h); --n: var(--hero-port-r2-n); --fps: var(--hero-port-r2-fps); }
  .portal .port.r3 { --x: var(--hero-port-r3-x); --y: var(--hero-port-r3-y); --w: var(--hero-port-r3-w); --h: var(--hero-port-r3-h); --n: var(--hero-port-r3-n); --fps: var(--hero-port-r3-fps); }
  .portal .port.r4 { --x: var(--hero-port-r4-x); --y: var(--hero-port-r4-y); --w: var(--hero-port-r4-w); --h: var(--hero-port-r4-h); --n: var(--hero-port-r4-n); --fps: var(--hero-port-r4-fps); }
  .portal .port.r5 { --x: var(--hero-port-r5-x); --y: var(--hero-port-r5-y); --w: var(--hero-port-r5-w); --h: var(--hero-port-r5-h); --n: var(--hero-port-r5-n); --fps: var(--hero-port-r5-fps); }
  .portal .port.r6 { --x: var(--hero-port-r6-x); --y: var(--hero-port-r6-y); --w: var(--hero-port-r6-w); --h: var(--hero-port-r6-h); --n: var(--hero-port-r6-n); --fps: var(--hero-port-r6-fps); }
  .portal .port.r7 { --x: var(--hero-port-r7-x); --y: var(--hero-port-r7-y); --w: var(--hero-port-r7-w); --h: var(--hero-port-r7-h); --n: var(--hero-port-r7-n); --fps: var(--hero-port-r7-fps); }
  .portal.is-live .port.r0 { background-image: url("../img/scene/portal-port-r0.png"); }
  .portal.is-live .port.r1 { background-image: url("../img/scene/portal-port-r1.png"); }
  .portal.is-live .port.r2 { background-image: url("../img/scene/portal-port-r2.png"); }
  .portal.is-live .port.r3 { background-image: url("../img/scene/portal-port-r3.png"); }
  .portal.is-live .port.r4 { background-image: url("../img/scene/portal-port-r4.png"); }
  .portal.is-live .port.r5 { background-image: url("../img/scene/portal-port-r5.png"); }
  .portal.is-live .port.r6 { background-image: url("../img/scene/portal-port-r6.png"); }
  .portal.is-live .port.r7 { background-image: url("../img/scene/portal-port-r7.png"); }
}

/* Ferreiro: cenário + 3 regiões animadas (as `regions` da própria cena: forja+ferreiro, tocha, lampião) */
.smith { --scene-w: var(--smith-w); --scene-h: var(--smith-h); --n: var(--smith-n); --fps: var(--smith-fps); }
.smith .r0 { --x: var(--smith-r0-x); --y: var(--smith-r0-y); --w: var(--smith-r0-w); --h: var(--smith-r0-h); }
.smith .r1 { --x: var(--smith-r1-x); --y: var(--smith-r1-y); --w: var(--smith-r1-w); --h: var(--smith-r1-h); }
.smith .r2 { --x: var(--smith-r2-x); --y: var(--smith-r2-y); --w: var(--smith-r2-w); --h: var(--smith-r2-h); }
.smith.is-live .r0 { background-image: url("../img/scene/smith-r0.png"); }
.smith.is-live .r1 { background-image: url("../img/scene/smith-r1.png"); }
.smith.is-live .r2 { background-image: url("../img/scene/smith-r2.png"); }
.shop { --scene-w: var(--shop-w); --scene-h: var(--shop-h); }

/* janela de aço forjado (moldura grande das janelas do jogo: fatia 52, borda 12) com a cena recortada dentro */
.win {
  position: relative;
  border-style: solid; border-width: calc(var(--u2) * 12);
  border-image: url("../img/forja/win.png") 52 / calc(var(--u2) * 52) / 0 repeat;
  image-rendering: pixelated;
  background: var(--void);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}
/* recorte da cena: --cx/--cy/--cw/--ch em px de arte (o que aparece da cena) */
/* se a tela for mais estreita que o recorte, ele corta pelos lados mantendo o centro do recorte no meio */
.view { position: relative; overflow: hidden; width: calc(var(--cw) * var(--sk) * 1px); height: calc(var(--ch) * var(--sk) * 1px); max-width: 100%; margin: 0 auto; }
.view > .scene { position: absolute; left: calc(50% - (var(--cx) + var(--cw) / 2) * var(--sk) * 1px); top: calc(var(--cy) * var(--sk) * -1px); }

/* ===========================================================================
   HERO — "Portal do infinito": o portal fica à direita; título, chamada e botões sobre o céu e as ruínas
   da esquerda/centro (PC). No celular (arte em pé): texto no céu, ∞ e vórtice no meio, botões nos degraus.
   Escala (--sk, landing.js): pixel inteiro do monitor, sempre cobrindo a largura (e a altura do hero).
   Âncora do recorte: --ax/--ay = 0 (borda esq./topo) … 1 (borda dir./base) do que sobra da arte;
   --keep = no máx. quantos px de arte o topo pode perder (a runa ∞ do PC fica a 36 px do topo).
   =========================================================================== */
.hero {
  --sk: 2;
  --scene-w: var(--hero-land-w, 640); --scene-h: var(--hero-land-h, 360);
  --ax: 1; --ay: 0.9; --keep: 40;
  --tx: 50%; /* centro da coluna de texto */
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  /* a primeira tela (menos a barra do topo), sem passar da altura da arte na escala atual */
  min-height: min(calc(100vh - 62px), calc(var(--scene-h) * var(--sk) * 1px));
  min-height: min(calc(100svh - 62px), calc(var(--scene-h) * var(--sk) * 1px));
  background: var(--void);
}
.hero-scene { position: absolute; inset: 0; pointer-events: none; }
.hero-scene > .scene {
  position: absolute;
  left: calc((100% - var(--scene-w) * var(--sk) * 1px) * var(--ax));
  top: max(calc((100% - var(--scene-h) * var(--sk) * 1px) * var(--ay)), calc(var(--keep) * var(--sk) * -1px));
}
/* escurece atrás do bloco de texto e funde o pé da arte com a página */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 86%, var(--void) 100%),
    radial-gradient(ellipse 34% 44% at var(--tx) 47%, rgba(11, 11, 13, 0.6), rgba(11, 11, 13, 0.25) 62%, transparent 82%);
}
.hero-in {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  width: min(660px, 100%); margin: 0 auto;
  padding: 40px var(--gut) 56px;
  text-align: center;
}
@media (min-width: 900px) {
  .hero { --tx: 34%; }
  .hero-in { margin-left: max(0px, calc(var(--tx) - 330px)); }
}
.eyebrow {
  margin-top: 10px;
  font: 700 15px/1.2 var(--f-sc); letter-spacing: 0.22em; text-transform: uppercase;
  color: #d9c690; text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 0, 0, 0.8);
}
.hero-title {
  margin: 0;
  font: 800 clamp(42px, 4.4vw, 84px)/0.98 var(--f-title);
  letter-spacing: 0.06em;
  /* rampa de latão do jogo (artCore R.brass) */
  background: linear-gradient(180deg, #fff1c4 0%, #f3d887 38%, #e6bd52 66%, #b98424 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 6px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 22px rgba(240, 190, 80, 0.28));
}
.hero-sub {
  max-width: 600px; margin: 26px auto 0;
  font-size: 19px; line-height: 1.55; color: #e4ddcd;
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(0, 0, 0, 0.95), 0 0 22px rgba(0, 0, 0, 0.9);
}
.hero-cta { margin-top: 28px; }
.hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-top: 22px; }
.hero-note { margin-top: 16px; font-size: 14.5px; color: #b6b7b9; text-shadow: 0 1px 0 #000, 0 0 8px #000; }
@media (max-width: 600px) {
  /* arte em pé centrada e ancorada embaixo (degraus no pé do hero); texto no céu, botões nos degraus */
  .hero {
    --scene-w: var(--hero-port-w, 360); --scene-h: var(--hero-port-h, 640);
    --ax: 0.5; --ay: 1; --keep: 640;
    min-height: min(calc(100vh - 56px), calc(var(--scene-h) * var(--sk) * 1px));
    min-height: min(calc(100svh - 56px), calc(var(--scene-h) * var(--sk) * 1px));
  }
  .hero::after {
    background:
      linear-gradient(180deg, transparent 62%, rgba(11, 11, 13, 0.5) 80%, var(--void) 100%),
      radial-gradient(ellipse 90% 26% at 50% 15%, rgba(11, 11, 13, 0.62), rgba(11, 11, 13, 0.2) 70%, transparent 90%);
  }
  .hero-in { justify-content: flex-start; padding: 14px var(--gut) 18px; }
  .eyebrow { font-size: 13px; letter-spacing: 0.14em; margin-top: 8px; }
  .hero-sub { font-size: 16.5px; line-height: 1.5; margin-top: 12px; }
  .hero-cta { margin-top: auto; padding-top: 22px; }
  .hero-btns { margin-top: 14px; }
  .hero-btns .btn { min-width: 0; flex: 1 1 140px; }
  .hero-btns .btn.discord { flex-basis: 100%; }
}
/* 360 px: a frase cabe em 3 linhas e não encosta no medalhão do ∞ */
@media (max-width: 380px) { .hero-sub { font-size: 15.5px; } }

/* ===========================================================================
   SEÇÕES
   =========================================================================== */
.sec { position: relative; padding: 76px 0; background: var(--bg); }
.sec.alt { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
/* filete de latão no topo de cada seção */
.sec::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 5);
  background: url("../img/forja/hdr-bot.png") left top / calc(var(--u) * 64) calc(var(--u) * 5) repeat-x;
  image-rendering: pixelated; opacity: 0.8;
}
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.kicker { font: 700 14px/1.2 var(--f-sc); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dim); }
.sec h2 {
  margin-top: 6px;
  font: 800 clamp(28px, 4vw, 42px)/1.1 var(--f-title); letter-spacing: 0.06em;
  color: var(--title-ink); text-shadow: 0 2px 0 #000, 0 0 16px rgba(243, 200, 110, 0.22);
}
.divider {
  width: calc(var(--u) * 140); height: calc(var(--u) * 9); margin: 14px auto 0;
  background: url("../img/forja/divider.png") center / 100% 100% no-repeat; image-rendering: pixelated;
}
.lead { margin-top: 14px; font-size: 18px; color: #c9c3b4; }

/* cartão da Forja (cartões/modais do jogo: fatia 36, borda 9) */
.card {
  position: relative;
  border-style: solid; border-width: calc(var(--u) * 9);
  border-image: url("../img/forja/card.png") 36 / calc(var(--u) * 36) / 0 repeat;
  image-rendering: pixelated;
  background: var(--panel-grad);
  background-clip: padding-box;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  padding: 22px 22px 24px;
}
.card h3 {
  font: 700 20px/1.2 var(--f-title); letter-spacing: 0.05em;
  color: var(--title-ink); text-shadow: 0 1px 0 #000, 0 0 8px rgba(243, 200, 110, 0.22);
}
.card p { margin-top: 8px; color: #cdc7b8; font-size: 16.5px; }
.ico { width: calc(var(--fp) * 60px); height: calc(var(--fp) * 60px); image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.45)); }

/* --- como funciona --- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.step { text-align: center; }
.step .ico { margin: 2px auto 12px; }
.step-n { display: block; margin-bottom: 2px; font: 700 13px var(--f-sc); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); }

/* faixa de raridades: filete do slot na cor da legenda do jogo (rarity.ts) */
.rarities { list-style: none; margin: 34px auto 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; max-width: 900px; }
.rar { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rar .slot { position: relative; width: calc(var(--u2) * 48); height: calc(var(--u2) * 48); background: center / 100% 100% no-repeat; image-rendering: pixelated; }
.rar .slot img { position: absolute; left: 50%; top: 50%; width: calc(var(--u2) * 30); height: calc(var(--u2) * 30); transform: translate(-50%, -50%); image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5)); }
.rar span { font: 700 14px/1.1 var(--f-sc); letter-spacing: 0.03em; text-shadow: 0 1px 0 #000; text-align: center; }
.rar-note { margin-top: 14px; text-align: center; font-size: 15px; color: var(--muted); }
.r-common .slot { background-image: url("../img/forja/slot-common.png"); } .r-common span { color: var(--r-common); }
.r-uncommon .slot { background-image: url("../img/forja/slot-uncommon.png"); } .r-uncommon span { color: var(--r-uncommon); }
.r-rare .slot { background-image: url("../img/forja/slot-rare.png"); } .r-rare span { color: var(--r-rare); }
.r-heroic .slot { background-image: url("../img/forja/slot-heroic.png"); } .r-heroic span { color: var(--r-heroic); }
.r-unique .slot { background-image: url("../img/forja/slot-unique.png"); } .r-unique span { color: var(--r-unique); }
.r-celestial .slot { background-image: url("../img/forja/slot-celestial.png"); } .r-celestial span { color: var(--r-celestial); }
.r-epic .slot { background-image: url("../img/forja/slot-epic.png"); } .r-epic span { color: var(--r-epic); }
.r-legendary .slot { background-image: url("../img/forja/slot-legendary.png"); } .r-legendary span { color: var(--r-legendary); }

/* --- ferreiro --- */
.feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.feature-art { display: flex; justify-content: center; min-width: 0; }
.feature .win { max-width: 100%; }
/* recorte da cena (px de arte): PC = forja + bigorna + ferreiro; celular = fechado no ferreiro */
.smith-view { --cx: 190; --cy: 26; --cw: 290; --ch: 244; }
@media (max-width: 760px) { .smith-view { --cx: 262; --cy: 40; --cw: 218; --ch: 230; } }
.feature h2 { text-align: left; }
.feature .kicker, .feature .lead { text-align: left; }
.feature .divider { margin-left: 0; }
.facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.facts li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.facts .ico { margin-top: -6px; }
.facts b { display: block; font: 700 17px var(--f-title); letter-spacing: 0.04em; color: var(--title-ink); }
.facts span { color: #c9c3b4; font-size: 16.5px; }

/* --- classes --- */
.cls-tabs { display: flex; justify-content: center; gap: 6px; margin: 0 auto 0; padding: 0; }
.cls-tab {
  --cc-c: var(--gold);
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  width: 150px; min-height: calc(var(--u2) * 32 + 46px); padding: 6px 4px 6px;
  border-style: solid; border-width: calc(var(--u) * 8) calc(var(--u) * 10) calc(var(--u) * 2);
  border-image: url("../img/forja/tab.png") 8 10 2 fill / calc(var(--u) * 8) calc(var(--u) * 10) calc(var(--u) * 2) / 0 stretch;
  image-rendering: pixelated;
  background: none; cursor: pointer;
  color: #c5c6c8; font: 700 16px/1.1 var(--f-sc); letter-spacing: 0.03em; text-shadow: 0 1px 0 #000;
}
.cls-tab img { width: calc(var(--u2) * 32); height: calc(var(--u2) * 32); image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5)); transition: transform 0.15s ease; }
.cls-tab:hover { border-image-source: url("../img/forja/tab-h.png"); color: #f0e3c0; }
.cls-tab:hover img { transform: translateY(-2px); }
.cls-tab[aria-selected="true"] { border-image-source: url("../img/forja/tab-on.png"); color: var(--ink); text-shadow: 0 1px 0 rgba(255, 244, 200, 0.45); }
.cls-tab[aria-selected="true"] img { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 6px color-mix(in srgb, var(--cc-c) 70%, transparent)); }
.cls-panel { margin-top: -2px; padding: 28px 28px 30px; overflow: hidden; }
.cls-panel[hidden] { display: none; }
.cls-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 34px; align-items: center; }
.cls-panel .cls-name { font: 800 clamp(30px, 4vw, 40px)/1.05 var(--f-title); letter-spacing: 0.06em; color: #f4e3b5; text-shadow: 0 2px 0 #000, 0 0 20px color-mix(in srgb, var(--cc-c) 45%, transparent); }
.cls-panel .cls-role { margin-top: 6px; font: 700 16px var(--f-sc); letter-spacing: 0.1em; color: var(--cc-c); text-shadow: 0 1px 0 #000; }
.cls-panel .cls-lore { margin-top: 12px; font-size: 18px; color: #d8d2c3; max-width: 640px; }
.cls-panel .cls-attr { margin-top: 10px; font-size: 15.5px; color: var(--muted); }
.cls-attr b { color: var(--cc-c); font-weight: 800; letter-spacing: 0.04em; }
.cls-panel .cls-skills-t { margin-top: 22px; font: 700 15px var(--f-sc); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); }
/* 8 soquetes numa linha: colunas do tamanho do soquete e a sobra vira o espaço entre eles (mín. 4 px);
   quando não cabem (zoom 150 %, janela estreita), landing.js põe #classes.sk4 → 4 por linha */
.skills { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, calc(var(--u2) * 48)); justify-content: space-between; gap: 8px; }
.skill { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
/* soquete da barra de skills (48x48) com o ícone-quadro v2 no nicho (40 px a partir de 4) */
.sock { position: relative; width: calc(var(--u2) * 48); height: calc(var(--u2) * 48); background: url("../img/forja/socket.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.sock img { position: absolute; left: calc(var(--u2) * 4); top: calc(var(--u2) * 4); width: calc(var(--u2) * 40); height: calc(var(--u2) * 40); image-rendering: pixelated; }
.skill span { font: 700 13.5px/1.15 var(--f-body); color: #cfc8b6; }

/* palco da classe = o palco da CRIAÇÃO de personagem do jogo (CharacterCreateScreen.layoutStage +
   pedestalStage.ts + charcreate.css), com as medidas do jogo vindas do game.css (--doll-*, --ped-*):
   - boneco = paper-doll do set inicial de frente (img/class/*.png, célula 64) em escala INTEIRA --K;
     tablado a --KP = pedScale(K) (metade, como na criação);
   - o APOIO dos pés (DOLL_FOOT_X, DOLL_STAND_Y = meio das botas) vai no CENTRO DO TAMPO (CC_PED cx/cy);
   - caixa do palco = pedestalBox(K, KP, padT, padB): o herói sobe p/ cima-esquerda, a espessura do
     tablado desce p/ baixo-direita; o grupo fica centrado na coluna (como na criação);
   - facho do alto-esquerda, halo oval na diagonal do corpo, brilho do tampo, brasas subindo pelo facho
     e sombra de contato dos pés: receitas .cc-beam/.cc-aura/.cc-ped-glow/.cc-mote/.cc-feet-shadow.
   Unidades: --K/--KP/--b* em px "inteiros do monitor" (× --fp = px CSS). */
.stage {
  --K: 4; --KP: 2; --padT: 14; --padB: 8;
  --k: calc(var(--fp) * var(--K) * 1px);
  --kp: calc(var(--fp) * var(--KP) * 1px);
  --bl: max(calc((var(--doll-foot-x) - var(--doll-left-x)) * var(--K)), calc(var(--ped-cx) * var(--KP)));
  --br: max(calc((var(--doll-right-x) - var(--doll-foot-x)) * var(--K)), calc((var(--ped-h) - var(--ped-cy)) * var(--KP)));
  --bu: calc(max(calc((var(--doll-stand-y) - var(--doll-top-y)) * var(--K)), calc(var(--ped-cx) * var(--KP))) + var(--padT));
  --bd: calc(max(calc((var(--ped-h) - var(--ped-cy)) * var(--KP)), calc((var(--doll-feet-y) + 2 - var(--doll-stand-y)) * var(--K))) + var(--padB));
  --fx: calc(var(--bl) * var(--fp) * 1px); /* apoio dos pés: a partir da esquerda do palco */
  --feet: calc(var(--bd) * var(--fp) * 1px); /* … e da base do palco */
  --r: calc(var(--ped-rt) * var(--kp)); /* raio do tampo */
  --body: calc(var(--k) * 44);
  position: relative;
  width: calc((var(--bl) + var(--br)) * var(--fp) * 1px);
  height: calc((var(--bu) + var(--bd)) * var(--fp) * 1px);
  margin: 0 auto;
}
.stage .beam {
  position: absolute; left: calc(var(--fx) - var(--r) * 1.1); bottom: var(--feet); width: calc(var(--r) * 2.2); height: calc(var(--body) * 2);
  transform-origin: 50% 100%; transform: rotate(-45deg);
  background: linear-gradient(0deg, color-mix(in srgb, var(--cc-c) 32%, transparent), color-mix(in srgb, var(--cc-c) 8%, transparent) 55%, transparent 92%);
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); pointer-events: none;
  animation: cc-beam 6s ease-in-out infinite;
}
.stage .aura {
  position: absolute; left: calc(var(--fx) - var(--k) * 15); bottom: calc(var(--feet) + var(--k) * 13);
  width: calc(var(--body) * 1.05); height: calc(var(--body) * 1.5);
  transform: translate(-50%, 50%) rotate(-45deg);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cc-c) 34%, transparent), color-mix(in srgb, var(--cc-c) 10%, transparent) 60%, transparent);
  animation: cc-pulse 3.4s ease-in-out infinite;
}
.stage .ped {
  position: absolute; left: calc(var(--fx) - var(--ped-cx) * var(--kp)); bottom: calc(var(--feet) - (var(--ped-h) - var(--ped-cy)) * var(--kp));
  width: calc(var(--ped-w) * var(--kp)); height: calc(var(--ped-h) * var(--kp));
  background: url("../img/forja/ped.png") center / 100% 100% no-repeat; image-rendering: pixelated;
  filter: drop-shadow(calc(var(--fp) * 4px) calc(var(--fp) * 5px) calc(var(--fp) * 6px) rgba(0, 0, 0, 0.5));
}
.stage .glow {
  position: absolute; left: calc((var(--ped-cx) - var(--ped-rt)) * var(--kp)); top: calc((var(--ped-cy) - var(--ped-rt)) * var(--kp));
  width: calc(var(--ped-rt) * 2 * var(--kp)); height: calc(var(--ped-rt) * 2 * var(--kp)); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cc-c) 70%, transparent), color-mix(in srgb, var(--cc-c) 18%, transparent) 70%, transparent);
  mix-blend-mode: screen; animation: cc-pulse 3.4s ease-in-out infinite;
}
.stage .mote {
  --sz: 1;
  position: absolute; left: calc(var(--fx) + var(--mx) * var(--r) * 0.6); bottom: calc(var(--feet) + var(--mx) * var(--r) * 0.6);
  width: calc(var(--fp) * (var(--sz) + 1) * 2px); height: calc(var(--fp) * (var(--sz) + 1) * 2px);
  background: color-mix(in srgb, var(--cc-c) 65%, #fff); box-shadow: 0 0 calc(var(--fp) * 6px) var(--cc-c);
  opacity: 0; animation: cc-rise var(--dur) linear var(--delay) infinite;
}
.stage .doll {
  position: absolute; left: calc(var(--fx) - var(--doll-foot-x) * var(--k)); bottom: calc(var(--feet) - (var(--doll-cell) - var(--doll-stand-y)) * var(--k));
  width: calc(var(--doll-cell) * var(--k)); height: calc(var(--doll-cell) * var(--k));
}
.stage .doll img {
  position: relative; display: block; width: 100%; height: 100%; image-rendering: pixelated;
  filter: drop-shadow(0 0 calc(var(--k) * 1.5) color-mix(in srgb, var(--cc-c) 45%, transparent));
}
/* sombra de contato sob os pés (solas em x 43..54, y 55 da célula), um pouco p/ baixo-direita */
.stage .shadow {
  position: absolute; left: calc(100% * 50 / 64); top: calc(100% * 56 / 64); width: calc(100% * 19 / 64); height: calc(100% * 7 / 64);
  transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.25) 60%, transparent);
}
@keyframes cc-beam { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes cc-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes cc-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.9; }
  70% { opacity: 0.55; }
  100% { transform: translate(calc(var(--body) * -0.9), calc(var(--body) * -0.9)); opacity: 0; }
}

/* --- sistemas --- */
.shop-banner { margin: 0 auto 30px; width: fit-content; max-width: 100%; }
.shop-banner .view { --cx: 0; --cy: 0; --cw: var(--shop-w); --ch: var(--shop-h); }
.systems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sys { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 6px 16px; align-items: start; }
.sys .ico { grid-row: span 2; }
.sys p { margin-top: 0; }

/* --- plataformas --- */
.plats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.plat { display: flex; flex-direction: column; overflow: hidden; }
.plat .tag { margin-bottom: 4px; font: 700 13px var(--f-sc); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); }
.plat p:not(.tag) { flex: 1; }
.plat .btn, .plat .cta-wrap { margin-top: 18px; align-self: center; }
.plat .cta { min-width: 250px; font-size: 18px; }
.account { max-width: 760px; margin: 30px auto 0; text-align: center; font-size: 16px; color: var(--muted); }

/* --- comunidade (roadmap + discord) --- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.duo .card { display: flex; flex-direction: column; align-items: flex-start; }
.duo .card p { flex: 1; }
.duo .btn { margin-top: 18px; }

/* ---------- rodapé: barra de aço ---------- */
.foot {
  position: relative;
  padding: 26px 0 34px;
  background:
    url("../img/forja/hdr-top.png") left top / calc(var(--u) * 64) calc(var(--u) * 2) repeat-x,
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.3)),
    url("../img/forja/hdr-tex.png") left top / calc(var(--u) * 64) calc(var(--u) * 32) repeat,
    #2a2b2d;
  image-rendering: pixelated;
  color: var(--muted); font-size: 15px;
}
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.foot-brand { font: 800 17px var(--f-title); letter-spacing: 0.1em; color: var(--title-ink); text-shadow: 0 1px 0 #000; }
.foot-brand small { margin-left: 10px; font: 500 14px var(--f-body); letter-spacing: 0; color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-links a { color: #d6cdb6; text-decoration: none; font-weight: 700; text-shadow: 0 1px 0 #000; }
.foot-links a:hover { color: var(--gold-hi); text-decoration: underline; }

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 15px; }
  .cls-tab { width: 128px; }
  .skills { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; max-width: max(520px, calc(var(--u2) * 48 * 4 + 42px)); }
}
@media (min-width: 1081px) {
  .skills { column-gap: 4px; }
  #classes.sk4 .skills { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: normal; gap: 14px 8px; max-width: max(520px, calc(var(--u2) * 48 * 4 + 42px)); }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .steps, .systems, .plats { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-left: auto; margin-right: auto; }
  .feature { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .feature .kicker, .feature h2, .feature .lead { text-align: center; }
  .feature .divider { margin-left: auto; }
  .duo { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin: 0 auto; }
  .rarities { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 520px; row-gap: 16px; }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .sec { padding: 56px 0; }
  .sec-head { margin-bottom: 28px; }
  .lead { font-size: 17px; }
  .nav-in { height: 56px; gap: 10px; }
  .brand { font-size: 17px; letter-spacing: 0.08em; }
  .nav-tools .btn { min-width: 0; }
  .cls-tabs { gap: 3px; }
  .cls-tab { flex: 1 1 0; width: auto; min-width: 0; font-size: 12.5px; letter-spacing: 0; padding: 4px 0 5px; }
  .cls-panel { padding: 20px 14px 22px; }
  .cls-body { grid-template-columns: minmax(0, 1fr); gap: 18px; text-align: center; }
  .cls-lore { margin-left: auto; margin-right: auto; }
  .skills { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
  .skill span { font-size: 12.5px; }
  .card { padding: 18px 16px 20px; }
  /* celular: passos e sistemas compactos (ícone à esquerda) */
  .step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; text-align: left; align-items: start; }
  .step .ico { grid-row: span 2; margin: 0; }
  .step p { margin-top: 0; }
  .steps, .systems { gap: 14px; }
  .duo .card { align-items: center; text-align: center; }
  .foot-in { flex-direction: column; text-align: center; }
  .foot-links { justify-content: center; }
}
@media (max-width: 430px) {
  .cls-tab { font-size: 11px; }
  .cta { font-size: 18px; letter-spacing: 0.05em; padding: 0 6px; }
}
@media (max-width: 380px) {
  .brand { font-size: 15px; letter-spacing: 0.05em; }
  .lang button { min-width: 36px; }
  /* 5 abas em 328 px: só o emblema (o nome continua no leitor de tela e no painel) */
  .cls-tab { min-height: calc(var(--u2) * 32 + 26px); }
  .cls-tab > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}