/* GERADO por tools/build.mjs: concatenação de css/tokens.css, css/base.css, css/componentes.css, css/secoes.css, css/movimento.css. Não edite; edite as fontes. */
/* ===== css/tokens.css ===== */
/* css/tokens.css — paleta (2.5), tipografia (2.6), grade (3.0), durações e easings (5) */

/* Fontes de reserva com métrica ajustada (2.6): o LCP é texto e não pode saltar
   quando a Archivo e a Martian Mono chegam. Percentuais calibrados em Arial/Consolas. */
@font-face {
  font-family: "Archivo Reserva";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue");
  size-adjust: 98%; ascent-override: 93%; descent-override: 23%; line-gap-override: 0%;
}
@font-face {
  font-family: "Martian Reserva";
  src: local("Consolas"), local("Menlo"), local("DejaVu Sans Mono");
  size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

/* Eixo de largura animável da declaração (4.3) */
@property --largura { syntax: '<number>'; inherits: false; initial-value: 100; }

:root {
  /* ---- Paleta (2.5): tinta e papel do impresso, um só acento (a chama) ---- */
  --tinta: #0B0C10;
  --tinta-2: #4A4E5A;
  --grafite: #15171D;
  --linha: #262932;
  --linha-papel: rgba(11, 12, 16, .12);
  --papel: #F2F0EA;
  --papel-2: #A4A7B2;
  --chama: #3A5BFF;
  --chama-texto: #96A8FF;
  --chama-escura: #16248C;
  --incandescente: #FFFFFF;
  /* cores dos jogos: só em seletores .figura--taskforge, .figura--hcd e .luz (o --verificar confere) */
  --ouro-taskforge: #E8B64C;
  --brasa-hcd: #FF7A2E;
  --rubra-hcd: #B3222B;
  /* componentes RGB para transparências (botões secundários, barra fixa, filetes) */
  --tinta-rgb: 11 12 16;
  --papel-rgb: 242 240 234;

  /* ---- Famílias ---- */
  --fonte-texto: "Archivo", "Archivo Reserva", sans-serif;
  --fonte-mono: "Martian Mono", "Martian Reserva", monospace;

  /* ---- Escala tipográfica (2.6); os valores de celular valem até 767 px ---- */
  --t-corpo: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  --t-declaracao: clamp(1.25rem, 5.5vw, 1.75rem);
  --t-h2: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);
  --t-h3: clamp(1.75rem, 1rem + 2.2vw, 3rem);
  --t-frase: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --t-numeral: clamp(5rem, 12vw, 11rem);
  --t-fato: 3.25rem;
  --t-email: clamp(1.75rem, 9.5vw, 3.5rem);
  --t-mono: 0.75rem;
  --t-botao: 0.9375rem;

  /* ---- Grade (3.0): 4 colunas; 8 a partir de 768 px; 12 a partir de 1200 px.
     Duas trilhas externas (mínimo = margem − gutter, máximo auto) absorvem a margem
     e, acima de 1440 px, o excedente por estiramento; as colunas são 1fr até 1199 px
     e minmax(0, --col-max) no desktop. Nomes [c] colocam por "c 4 / c 10" = colunas 4 a 9. ---- */
  --colunas: 4;
  --gutter: 16px;
  --margem: 16px;
  --largura-max: 1440px;
  --col-max: 1fr;
  --grade: [inicio] minmax(calc(var(--margem) - var(--gutter)), auto)
           [grade-inicio] repeat(var(--colunas), [c] minmax(0, var(--col-max)))
           [grade-fim] minmax(calc(var(--margem) - var(--gutter)), auto) [fim];
  --secao-pad: clamp(5rem, 10vw, 10rem);
  --topo-altura: 56px;
  --rolagem-margem: 72px;

  /* ---- Movimento (5): easings e durações ---- */
  --saida-expo: cubic-bezier(.16, 1, .3, 1);
  --entra-sai: cubic-bezier(.7, 0, .2, 1);
  --padrao: cubic-bezier(.2, 0, 0, 1);
  --micro: 160ms;
  --ui-entrada: 240ms;
  --ui-saida: 160ms;
  --reveal: 640ms;
  --stagger: 40ms;
}

@media (min-width: 768px) {
  :root {
    --colunas: 8; --gutter: 20px; --margem: 32px;
    --t-fato: clamp(3rem, 2rem + 3vw, 6rem);
    --t-email: clamp(1.75rem, 6.2vw, 6.5rem);   /* teto abaixo dos 7,5rem do blueprint: a coluna trava em 1312 px e 24 caracteres medem ≈12,05 em */
    --stagger: 60ms;
  }
}
@media (min-width: 1024px) {
  :root { --topo-altura: 72px; --rolagem-margem: 88px; }
}
@media (min-width: 1200px) {
  :root {
    --colunas: 12; --gutter: 24px; --margem: 64px;
    --col-max: calc((var(--largura-max) - 2 * var(--margem) - 11 * var(--gutter)) / 12);
    --t-declaracao: clamp(1.125rem, 2.5vw, 2.4rem);
  }
}

/* ===== css/base.css ===== */
/* css/base.css — reset, tipografia, grade, foco visível e utilitários */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  overflow-x: clip;                 /* rede de segurança das sangrias (3.0) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }   /* só nas âncoras; a rolagem é da pessoa */
}

body {
  min-height: 100svh;
  background: var(--tinta);          /* a tinta que se vê na abertura, nos jogos e no rodapé */
  color: var(--papel);
  font: 400 var(--t-corpo) / 1.55 var(--fonte-texto);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* menu e galeria abertos travam a rolagem no html (não no body: html { overflow-x: clip } impede a propagação); scrollbar-gutter evita o salto */
html:has(body.menu-aberto), html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }

main { position: relative; isolation: isolate; }
main:focus { outline: none; }        /* foco programático do link de salto, não um controle */

img, picture, svg, canvas { display: block; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
dd { margin: 0; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
dialog { color: inherit; }
[hidden] { display: none !important; }   /* o atributo vence qualquer display de componente (contrato do DOM) */
:target, [id] { scroll-margin-top: var(--rolagem-margem); }

/* ---- Tipografia de base (2.6) ---- */
h1, h2, h3 { font-weight: 800; line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; hyphens: manual; }
h2 { font-size: var(--t-h2); font-variation-settings: 'wdth' 112; }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.08; letter-spacing: 0; font-variation-settings: 'wdth' 105; }
p { text-wrap: pretty; hyphens: auto; }
em { font-style: italic; }
:lang(pt-BR) { quotes: "\201C" "\201D" "\2018" "\2019"; }
:lang(en)    { quotes: "\201C" "\201D" "\2018" "\2019"; }
:lang(es)    { quotes: "\00AB" "\00BB" "\201C" "\201D"; }

.lead { font-size: var(--t-lead); line-height: 1.5; }
.frase { font-size: var(--t-frase); font-weight: 500; line-height: 1.2; font-variation-settings: 'wdth' 110; text-wrap: balance; hyphens: manual; }
.mono {
  font-family: var(--fonte-mono);
  font-size: var(--t-mono);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  text-wrap: initial;
  hyphens: manual;
}
.fato { font-family: var(--fonte-mono); font-size: var(--t-fato); font-weight: 500; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* Numerais e índices são fólios do impresso, nunca o acento (2.5, decisão fechada) */
.numeral { display: block; align-self: start; font-family: var(--fonte-mono); font-size: var(--t-numeral); font-weight: 500; line-height: .9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--papel); }
.numeral__texto, .linha { display: block; }   /* cada linha de título e o texto do numeral são blocos: é neles que o corte de máscara (4.4) atua */
.indice { color: var(--papel-2); }

/* ---- Utilitários ---- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.pular {
  position: fixed; top: 8px; left: var(--margem); z-index: 30;
  padding: 12px 16px; background: var(--papel); color: var(--tinta);
  font-weight: 500; font-size: var(--t-botao);
  translate: 0 calc(-100% - 16px);
}
.pular:focus { translate: 0 0; outline-offset: 2px; }
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.seta-externa { width: 12px; height: 12px; flex: none; }

/* ---- Grade (3.0): o mesmo gabarito em todo contêiner; filhos de conteúdo nas
   colunas, sangrias de trilha externa a trilha externa (inicio / fim). ---- */
.secao, .secao__cabecalho, .jogo, .divisa, .abertura, .faixa-status, .principio,
.rodape, .rodape__topo, .erro {
  display: grid;
  grid-template-columns: var(--grade);
  column-gap: var(--gutter);
}
.secao > *, .secao__cabecalho > *, .jogo > *, .abertura > *, .faixa-status > *, .principio > *,
.rodape > *, .rodape__topo > *, .erro > * { grid-column: grade-inicio / grade-fim; }
.secao__cabecalho, .jogo, .faixa-status, .rodape__topo { grid-column: inicio / fim; }

.secao { position: relative; isolation: isolate; padding-block: var(--secao-pad); }
.secao--papel { background: var(--papel); color: var(--tinta); }

/* Filetes das colunas (só a partir de 1200 px): pseudo-elemento absoluto cujo bloco
   de contenção é a área das 12 colunas; um traço no início de cada coluna e um à direita. */
@media (min-width: 1200px) {
  .secao::before, .abertura::before, .rodape::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    grid-column: grade-inicio / grade-fim;
    --filete: rgb(var(--papel-rgb) / .04);
    background: repeating-linear-gradient(90deg, var(--filete) 0 1px, transparent 1px calc((100% + var(--gutter)) / var(--colunas)));
    box-shadow: inset -1px 0 var(--filete);
  }
  .secao--papel::before { --filete: rgb(var(--tinta-rgb) / .06); }
}

/* ---- Foco visível em tudo (5): anel de 2 px afastado 2 px, cantos vivos ---- */
:focus-visible { outline: 2px solid var(--chama); outline-offset: 2px; }
.secao--papel :focus-visible { outline-color: var(--chama-escura); }
.botao--primario:focus-visible { outline-color: var(--incandescente); }
.secao--papel .botao--primario:focus-visible { outline-color: var(--chama-escura); }

/* ---- Links de texto: sublinhado que cresce da esquerda em 160 ms (só transform) ---- */
.rodape__links a, .faixa-status__item a, .erro__saidas a, .redes__link, .jogo__rede {
  position: relative; display: inline-block;
}
.rodape__links a::after, .faixa-status__item a::after, .erro__saidas a::after, .redes__link::after, .jogo__rede::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--micro) var(--padrao);
}
@media (hover: hover) and (pointer: fine) {
  .rodape__links a:hover::after, .faixa-status__item a:hover::after, .erro__saidas a:hover::after, .redes__link:hover::after, .jogo__rede:hover::after { transform: scaleX(1); }
}
.rodape__links a:focus-visible::after, .faixa-status__item a:focus-visible::after, .erro__saidas a:focus-visible::after, .redes__link:focus-visible::after, .jogo__rede:focus-visible::after { transform: scaleX(1); }

/* ===== css/componentes.css ===== */
/* css/componentes.css — topo e menu, seletor de idioma, botões, tags, molduras, números e odômetro, galeria, rodapé, sugestão de idioma, 404 */

/* ---- Marca inline: cor pelo contêiner (currentColor); o núcleo do símbolo é a chama ---- */
.lockup { display: block; height: 24px; width: auto; }
.lockup .simbolo .nucleo { fill: var(--chama); }
.simbolo .nucleo { fill: var(--chama); }

/* ---- Topo fixo: 56 px (72 px a partir de 1024), tinta a 92 % sem desfoque ---- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  padding-top: env(safe-area-inset-top);
  background: rgb(var(--tinta-rgb) / .92);
  color: var(--papel);
}
.topo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--linha);
  opacity: 0; transition: opacity var(--micro) var(--padrao);
}
html.rolou .topo::after { opacity: 1; }
.topo__barra {
  display: flex; align-items: center; gap: 4px;
  height: var(--topo-altura);
  max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--margem);
}
.topo__marca { position: relative; display: inline-flex; align-items: center; height: 44px; flex: none; margin-right: auto; }
.topo__marca-slot { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 146.25px; height: 20px; pointer-events: none; }
.topo__lockup { display: none; }
.topo__lockup--curto { display: block; }
.topo__lockup--curto .lockup { height: 20px; }

/* Navegação de seções (só desktop) e indicador: o quadrado de 6 px que desliza */
.topo__secoes { display: none; position: relative; }
.secoes__lista { display: flex; }
.secoes__link {
  position: relative; display: inline-flex; align-items: center; height: 44px; padding-inline: 12px;
  font-weight: 500; font-size: var(--t-botao); white-space: nowrap;
}
.indicador {
  position: absolute; left: 0; top: 0; width: 6px; height: 6px; background: var(--chama);
  pointer-events: none; opacity: 0;
  transition: translate var(--micro) var(--padrao), opacity var(--micro);
}
/* o JS (topo.js) escreve `translate` e `opacity` no indicador; enquanto não o faz, o quadrado nasce por CSS sob o item atual */
.indicador[style*="translate"] { opacity: 1; }
.secoes__link::after, .idiomas__link::after {
  content: ""; position: absolute; width: 6px; height: 6px; background: var(--chama); opacity: 0;
  transition: opacity var(--micro) var(--padrao);
}
.secoes__link::after { left: 50%; bottom: 0; margin-left: -3px; }
.secoes__link[aria-current]::after, .idiomas__link[aria-current]::after { opacity: 1; }
.secoes:has(.indicador[style*="translate"]) .secoes__link::after,
.idiomas:has(.indicador[style*="translate"]) .idiomas__link::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  .secoes__lista:hover .secoes__link::after, .idiomas__lista:hover .idiomas__link::after { opacity: 0; }
  .secoes__link:hover::after, .idiomas__link:hover::after { opacity: 1; }
}
.secoes__lista:focus-within .secoes__link::after, .idiomas__lista:focus-within .idiomas__link::after { opacity: 0; }
.secoes__link:focus-visible::after, .idiomas__link:focus-visible::after { opacity: 1; }

/* Seletor de idioma compacto (PT · EN · ES): mono 12 px, alvos de 44 px, separador por CSS */
.idiomas { position: relative; }
.idiomas__lista { display: flex; align-items: center; }
.idiomas--compacto li { position: relative; display: flex; }
.idiomas--compacto li + li::before {
  content: "\00B7"; position: absolute; left: 0; top: 50%; translate: -50% -50%;
  color: var(--papel-2); font-family: var(--fonte-mono); font-size: var(--t-mono); pointer-events: none;
}
.idiomas--compacto .idiomas__link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding-inline: 4px;
  font-family: var(--fonte-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.idiomas--compacto .idiomas__link::after { left: 50%; bottom: 0; margin-left: -3px; }
/* Seletor por extenso (menu e rodapé): nomes na própria língua, alvos de 48 px, quadrado à esquerda */
.idiomas--extenso .idiomas__lista { flex-direction: column; align-items: flex-start; }
.idiomas--extenso .idiomas__link {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; padding-left: 18px;
  font-weight: 500; font-size: var(--t-botao);
}
.idiomas--extenso .idiomas__link::after { left: 0; top: 50%; margin-top: -3px; }
.idiomas__rotulo, .rodape__rotulo { color: var(--papel-2); text-transform: uppercase; margin-bottom: 12px; }

/* Menu do celular e do tablet: <details> com painel de máscara (6.2) */
.menu { display: block; }
.menu:not([open]) .menu__painel { display: none; }   /* fechado, o painel não entra na largura da página (scrollWidth) nem na árvore de acessibilidade */
.menu__botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding-inline: 8px;
  font-weight: 500; font-size: var(--t-botao); white-space: nowrap;
}
.menu__fechar { display: none; }
.menu[open] .menu__abrir { display: none; }
.menu[open] .menu__fechar { display: inline; }
.topo__barra:has(.menu[open]) .topo__idiomas { display: none; }   /* o painel já lista os três idiomas por extenso */
.menu__painel {
  position: fixed; inset: calc(var(--topo-altura) + env(safe-area-inset-top)) 0 0 0;
  display: flex; flex-direction: column; gap: 28px;
  padding: 24px var(--margem) 40px; overflow-y: auto;
  background: var(--grafite); color: var(--papel);
}
.menu__link {
  display: flex; align-items: center; min-height: 56px;
  font-weight: 700; font-size: 2.25rem; line-height: 1; letter-spacing: -0.015em; font-variation-settings: 'wdth' 105;
}
.menu__idiomas { border-top: 1px solid var(--linha); padding-top: 20px; }

@media (min-width: 1024px) {
  .topo__barra { gap: 8px; }
  .topo__lockup--curto { display: none; }
  .topo__lockup--largo { display: block; }
  .topo__marca-slot { width: 311.25px; height: 24px; }
  .topo__secoes { display: block; margin-right: 12px; }
  .menu { display: none; }
}

/* ---- Botões (2.5, 5): 48 px, padding 0 20 px, sem largura fixa, cantos vivos ---- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px;
  font: 500 var(--t-botao) / 1 var(--fonte-texto); white-space: nowrap;
  border: 1px solid transparent; color: inherit;
  transition: background-color var(--micro) var(--padrao), border-color var(--micro) var(--padrao), color var(--micro) var(--padrao), transform 120ms var(--padrao);
}
.botao--primario { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.botao--secundario { border-color: rgb(var(--papel-rgb) / .4); color: var(--papel); }
.secao--papel .botao--primario { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.secao--papel .botao--secundario { border-color: rgb(var(--tinta-rgb) / .4); color: var(--tinta); }
.botao:active { transform: scale(.98); }
.botao[disabled] { opacity: .55; cursor: default; }   /* "Ver na Steam (em breve)": ainda sem página para abrir */
.botao[disabled]:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .botao--primario:hover { background: var(--incandescente); border-color: var(--incandescente); }
  .secao--papel .botao--primario:hover { background: var(--grafite); border-color: var(--grafite); }
  .botao--secundario:hover { border-color: currentColor; }
}
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 767px) {
  .acoes { flex-direction: column; }
  .acoes .botao { width: 100%; }
}

/* ---- Tags e o quadrado: o único acento, sempre quadrado ---- */
.quadrado { display: inline-block; flex: none; width: 6px; height: 6px; background: var(--chama); }
.tag { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; white-space: nowrap; }
.tag--vazada .quadrado { background: transparent; box-shadow: inset 0 0 0 1px var(--chama); }

/* ---- Molduras e legendas (3.3): borda --linha, fundo --grafite ---- */
.moldura { position: relative; }
.moldura > picture, .moldura__quadro { border: 1px solid var(--linha); background: var(--grafite); }
.moldura > picture { overflow: hidden; }
.moldura > picture img { width: 100%; height: auto; }
.legenda { margin-top: 12px; color: var(--papel-2); }
.secao--papel .legenda { color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) {
  .moldura > picture img, .moldura__fundo img { transition: transform var(--micro) var(--padrao); }
  .legenda { transition: translate var(--micro) var(--padrao); }
  .moldura:hover > picture img, .moldura:hover .moldura__fundo img { transform: scale(1.02); }
  .moldura:hover .legenda { translate: 4px 0; }
}
.moldura:focus-within .legenda { translate: 4px 0; }

/* ---- Números dos jogos (3.3, 4.6): valor em --t-fato tabular, unidade em mono, filetes ---- */
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
.numero { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 20px; border-top: 1px solid var(--linha); min-width: 0; }
.numero__valor { display: block; white-space: nowrap; }
.numero__unidade { color: var(--papel-2); }
@media (min-width: 768px) { .numeros--grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .numeros--grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numeros--linha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numeros--linha .numero__valor { font-size: 4rem; }
}
/* Odômetro: o JS troca o texto por colunas de 1 em; a pilha desce até --d (dígito final) */
.odometro__colunas { display: inline-flex; vertical-align: top; }
.odometro__coluna { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.odometro__fixo { display: inline-block; line-height: 1; }
.odometro__pilha { display: block; line-height: 1; }
.odometro__digito { display: block; height: 1em; line-height: 1; }

/* ---- Galeria do Hero Core Defense: <dialog> na top layer ---- */
.galeria {
  width: min(1200px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px);
  margin: auto; padding: 0; border: 1px solid var(--linha);
  background: var(--grafite); color: var(--papel);
}
.galeria::backdrop { background: rgb(11 12 16 / .86); }
.galeria__painel { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.galeria__topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.galeria__titulo { font-size: var(--t-frase); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin-right: auto; font-variation-settings: 'wdth' 105; }
.galeria__contador { color: var(--papel-2); }
.galeria__item { margin: 0; }
.galeria__imagem { width: 100%; height: auto; max-height: calc(100svh - 260px); object-fit: contain; background: var(--tinta); }
.galeria__legenda { margin-top: 12px; color: var(--papel-2); }
.galeria__controles { display: flex; justify-content: space-between; gap: 12px; }
@media (min-width: 768px) { .galeria__painel { padding: 24px; } }

/* ---- Rodapé (3.6): de volta à tinta; o wordmark de sangria sai pela base da página ---- */
.rodape { position: relative; overflow: hidden; border-top: 1px solid var(--linha); color: var(--papel); }
.rodape__topo { row-gap: 48px; padding-block: var(--secao-pad) 56px; }
.rodape__marca { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.rodape__lockup { display: block; width: 100%; max-width: 415px; color: var(--papel); }
.rodape__lockup .lockup { height: 32px; }
.rodape__lockup--largo .lockup { width: 100%; height: auto; aspect-ratio: 415 / 32; }   /* cede à coluna (1200–1348 px); 32 px a partir de ~1420 */
.rodape__lockup--largo { display: none; }
.rodape__frase { max-width: 32ch; color: var(--papel-2); text-wrap: pretty; }
.rodape__colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gutter); }
.rodape__coluna.idiomas { grid-column: 1 / -1; }
.rodape__links { display: flex; flex-direction: column; gap: 10px; }
.rodape__links a { font-size: var(--t-botao); line-height: 1.4; }   /* o e-mail traz <wbr> depois do @ (@emailQuebra): quebra ali, não em qualquer letra */
/* seletor segmentado no celular: três células de 48 px */
.segmentado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--linha); }
.segmentado li + li { border-left: 1px solid var(--linha); }
.rodape .segmentado .idiomas__link { justify-content: center; text-align: center; padding: 6px 18px; font-size: 0.875rem; line-height: 1.15; }
.rodape .segmentado .idiomas__link::after { left: 50%; bottom: 0; margin: 0 0 0 -3px; }
.rodape__sangria { order: 3; margin-top: 24px; margin-bottom: -11.03%; color: var(--papel); }   /* 45 % cortado = 0,45 × 245/1000 da largura */
.rodape__sangria .wordmark { width: 100%; height: auto; }
.rodape__base { order: 2; display: flex; flex-direction: column; gap: 12px; padding-block: 24px; border-top: 1px solid var(--linha); color: var(--papel-2); }
.rodape__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.rodape__legal > .rodape__simbolo + span::after { content: "\00A0\00B7"; }   /* separador entre o © e a nota da Steam; fica preso ao fim da 1.ª linha se quebrar */
.rodape__simbolo { display: inline-flex; color: var(--papel); }
.rodape__simbolo .simbolo { width: 24px; height: 24px; }
.rodape__colofao { max-width: 72ch; }
@media (min-width: 768px) {
  .rodape__colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__coluna.idiomas { grid-column: auto; }
  .segmentado { display: flex; flex-direction: column; align-items: flex-start; border: 0; }
  .segmentado li + li { border: 0; }
  .rodape .segmentado .idiomas__link { justify-content: flex-start; text-align: left; padding: 0 0 0 18px; font-size: var(--t-botao); }
  .rodape .segmentado .idiomas__link::after { left: 0; top: 50%; bottom: auto; margin: -3px 0 0 0; }
  .rodape .idiomas--extenso:has(.indicador[style*="translate"]) .idiomas__link { padding-left: 0; }   /* com JS o quadrado fica sob o link: sem recuo */
  .rodape__sangria { margin-bottom: -8.575%; }   /* 35 % cortado */
  .rodape__base { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 24px; }
  .rodape__colofao { max-width: 56ch; text-align: right; }
}
@media (min-width: 1024px) {
  .rodape__lockup--largo { display: block; }
  .rodape__lockup--curto { display: none; }
}
@media (min-width: 1200px) {
  .rodape__marca { grid-column: c 1 / c 5; }
  .rodape__colunas { grid-column: c 5 / grade-fim; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__colunas:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Barra de sugestão de idioma (6.4): fixa na base, sobrepõe sem deslocar nada ---- */
.sugestao-idioma {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  padding: 0 var(--margem) env(safe-area-inset-bottom);
  background: var(--grafite); color: var(--papel); border-top: 1px solid var(--linha);
}
.sugestao-idioma__opcao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 48px; padding-block: 6px; max-width: calc(var(--largura-max) - 2 * var(--margem)); margin-inline: auto; }
.sugestao-idioma__texto { flex: 1 1 16ch; font-size: var(--t-botao); }
.sugestao-idioma .botao { height: 36px; padding-inline: 14px; }
/* a barra sobrepõe sem deslocar nada; só a faixa de status ganha respiro quando as duas coincidem (6.4) */
html.sugestao-visivel .faixa-status { padding-bottom: 48px; }
@media (max-width: 767px) { html.sugestao-visivel .faixa-status { padding-bottom: 104px; } }

/* ---- Página 404 (7.4): tinta, sem luz, sem efeitos ---- */
.erro { min-height: 100svh; align-content: center; row-gap: 20px; padding-block: 80px; }
.erro__lockup { display: block; height: 24px; color: var(--papel); margin-bottom: 24px; }
.erro__numeral { color: var(--papel); }
.erro__titulo { font-size: var(--t-h2); }
.erro__saidas { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 12px; font-weight: 500; font-size: var(--t-botao); }
.erro__saidas a::after { transform: scaleX(1); }
@media (min-width: 1200px) {
  .erro > * { grid-column: c 1 / c 9; }
}

/* ===== css/secoes.css ===== */
/* css/secoes.css — abertura, jogos (faixa e Devorador em repouso), divisa e numeral 03, sobre, contato */

/* ---- Abertura: fatos no alto, marca + declaração + lead + botões no centro, faixa de status na base ---- */
.abertura {
  position: relative; isolation: isolate;
  overflow-x: clip;                 /* o canvas da forja tem 24 px de margem além do h1 (4.1): no celular sairia 8 px da janela */
  grid-template-rows: auto minmax(2rem, 1fr) auto auto auto auto minmax(2rem, 1fr) auto;
  min-height: 100svh;
  padding-top: var(--topo-altura);
}
.abertura__fatos { grid-row: 1; margin-top: 24px; color: var(--papel-2); }
.marca-hero { grid-row: 3; position: relative; width: 100%; color: var(--papel); line-height: 0; font-size: 1rem; }
.marca-hero .wordmark { width: 100%; height: auto; overflow: visible; }
.declaracao {
  grid-row: 4; margin-top: 24px;
  font-size: var(--t-declaracao); font-weight: 500; line-height: 1.2;
  hyphens: manual; text-wrap: balance;
}
.declaracao__linha { display: block; font-variation-settings: 'wdth' var(--largura); }
.declaracao__linha--pequeno { --largura: 75; }
.declaracao__linha--grande { --largura: 112; }
.abertura__lead { grid-row: 5; margin-top: 24px; max-width: 44ch; }
.abertura__acoes { grid-row: 6; margin-top: 28px; }

.faixa-status {
  grid-row: 8; position: relative; margin-top: 48px;
  overflow-x: clip; overflow-y: visible;              /* o pet parte de 100vw (4.8) e anda SOBRE o filete, acima do texto */
  border-top: 1px solid var(--linha);
  color: var(--papel-2);
}
.faixa-status__itens { display: flex; flex-direction: column; gap: 4px; padding-block: 14px; }
.faixa-status__item--idiomas { display: none; }
.pet {
  position: absolute; left: 0; bottom: calc(100% - 7px); width: 50px; height: 50px; overflow: hidden;   /* os pés do sprite pisam o filete */
  pointer-events: none; image-rendering: pixelated;
  transform: scaleX(-1);                              /* o sprite nasce olhando para a direita */
  translate: 100vw 0;
}
.pet__tira { width: 200px; height: 50px; background: var(--tira-walk) 0 0 / 200px 50px no-repeat; }

@media (min-width: 768px) { .abertura__acoes { flex-direction: row; } }
@media (min-width: 1024px) {
  /* uma linha só a partir de 1024 px (9.6); abaixo, os dois jogos empilhados e com quebra livre */
  .faixa-status__itens { flex-direction: row; justify-content: space-between; align-items: center; height: 56px; padding: 0; }
  .faixa-status__item { white-space: nowrap; }
  .faixa-status__item--idiomas { display: block; }
  .faixa-status__item + .faixa-status__item::before { content: "\00B7\00A0"; }
}
@media (min-width: 1200px) {
  /* espaçadores de 2rem (não 2,5): em 1440 × 900 a abertura fecha em ≈ 893 px, com a faixa de status inteira na dobra */
  .abertura { grid-template-rows: auto minmax(2rem, 1fr) auto auto auto minmax(2rem, 1fr) auto; }
  .abertura__fatos { grid-column: c 1 / grade-fim; margin-top: 32px; }   /* nada divide a linha com ela: não quebra em 1200 */
  .declaracao { margin-top: 40px; line-height: 1.12; container-type: inline-size; }
  .declaracao__linha { white-space: nowrap; }
  .abertura__lead { grid-row: 5; grid-column: c 1 / c 7; margin-top: 40px; }
  .abertura__acoes { grid-row: 5; grid-column: c 8 / grade-fim; margin-top: 40px; align-self: start; }
  .faixa-status { grid-row: 7; }
}

/* ---- Cabeçalho das seções 02–04: filete, numeral cruzando o filete, h2 e subtítulo ---- */
.secao__cabecalho { border-top: 1px solid var(--linha); padding-top: 24px; row-gap: 16px; margin-bottom: clamp(3rem, 6vw, 5rem); }
.secao--papel .secao__cabecalho { border-color: var(--linha-papel); }
.secao__cabecalho .numeral { margin-top: calc(-0.5em - 24px); }
.secao__subtitulo { color: var(--papel-2); max-width: 44ch; }
.secao--papel .secao__subtitulo { color: var(--tinta-2); }
.secao--papel .numeral, .secao--papel .indice { color: var(--tinta); }
@media (max-width: 767px) { .secao__cabecalho .numeral { font-size: min(28vw, 7rem); } }
@media (min-width: 768px) {
  .secao__cabecalho .numeral { grid-column: c 1 / c 3; grid-row: 1 / span 2; }
  .secao__titulo { grid-column: c 3 / grade-fim; }
  .secao__subtitulo { grid-column: c 3 / grade-fim; }
}
@media (min-width: 1200px) {
  .secao__cabecalho .numeral { grid-column: c 1 / c 4; }
  .secao__titulo { grid-column: c 4 / grade-fim; }
  .secao__subtitulo { grid-column: c 4 / c 10; }
}

/* ---- Jogos: dossiê. z 2 e overflow visible para o Devorador pintar sobre o papel ---- */
.secao--jogos { z-index: 2; overflow: visible; }
.jogo { position: relative; }
.jogo + .jogo { margin-top: clamp(5rem, 10vw, 10rem); }
.jogo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; grid-column: grade-inicio / grade-fim; pointer-events: none; }
.figura--taskforge::after { background: var(--ouro-taskforge); }
.figura--hcd::after { background: var(--brasa-hcd); }
.jogo__figura { margin-bottom: 36px; }
.jogo__meta { display: flex; align-items: center; gap: 12px; color: var(--papel-2); }
.jogo__linha { margin-top: 8px; color: var(--papel-2); text-wrap: balance; }
.jogo__nome { margin-top: 20px; }
.jogo__frase { margin-top: 12px; max-width: 26ch; }
.jogo__descricao { margin-top: 20px; max-width: 44ch; }
.jogo__acoes { margin-top: 28px; }
.jogo__nota, .jogo__status { margin-top: 16px; color: var(--papel-2); max-width: 48ch; }
.jogo__acompanhe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.jogo__acompanhe-rotulo { color: var(--papel-2); text-transform: uppercase; }
.jogo__rede { font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.numeros { margin-top: 40px; }
.jogo__complemento { margin-top: 20px; color: var(--papel-2); }
.jogo__capa { margin-top: 40px; padding-bottom: 40px; }
.figura--hcd .numeros { padding-bottom: 40px; }
@media (max-width: 1199px) { .figura--hcd .jogo__texto { padding-bottom: 40px; } }   /* respiro antes da linha de 2 px quando o texto é a última peça */

/* Faixa em tamanho real (4.5): escala inteira por --e (1 abaixo de 1200 px, 2 acima) */
.faixa-figura { position: relative; margin-bottom: 32px; }
.faixa-figura .legenda { margin-inline: var(--margem); }
.faixa-recorte { width: 100%; overflow: hidden; }
.faixa {
  --e: 1;
  position: relative; overflow: hidden;
  width: calc(480px * var(--e)); height: calc(132px * var(--e));
  background: linear-gradient(180deg, #241708 0%, #4c3212 46%, #8a5c26 78%, #b8813a 100%);
  image-rendering: pixelated;
  touch-action: pan-y; cursor: grab; user-select: none;
}
.faixa__colinas { position: absolute; left: 0; right: 0; bottom: calc(17px * var(--e)); height: calc(43px * var(--e)); background: url(../assets/jogos/taskforge/cenarios/ato1-colinas.png) repeat-x bottom left / auto 100%; opacity: .55; }
.faixa__adereco { position: absolute; bottom: calc(17px * var(--e)); background-size: 100% 100%; background-repeat: no-repeat; opacity: .85; }
.faixa__adereco--pedras { left: calc(10px * var(--e)); width: calc(62px * var(--e)); height: calc(27px * var(--e)); background-image: url(../assets/jogos/taskforge/cenarios/ato1-pedras-caidas.png); }
.faixa__adereco--coluna { left: calc(300px * var(--e)); width: calc(44px * var(--e)); height: calc(93px * var(--e)); background-image: url(../assets/jogos/taskforge/cenarios/ato1-coluna-ruina.png); opacity: .6; }
.faixa__adereco--arvore { right: calc(12px * var(--e)); width: calc(76px * var(--e)); height: calc(86px * var(--e)); background-image: url(../assets/jogos/taskforge/cenarios/ato1-arvore-seca.png); }
.faixa__chao { position: absolute; left: 0; right: 0; bottom: calc(3px * var(--e)); height: calc(14px * var(--e)); background: url(../assets/jogos/taskforge/cenarios/chao-ato1.png) repeat-x 0 0 / auto 100%; }
.faixa__fase { position: absolute; left: 0; right: 0; bottom: 0; height: calc(3px * var(--e)); background: #140f0a; }
.figura--taskforge .faixa__fase i { display: block; width: 38%; height: 100%; background: var(--ouro-taskforge); }
.ator { position: absolute; z-index: 1; bottom: calc(1px * var(--e)); width: calc(100px * var(--e)); height: calc(100px * var(--e)); overflow: hidden; }
.ator__tira { width: calc(400px * var(--e)); height: 100%; background: var(--tira-idle) 0 0 / 100% 100% no-repeat; }
.ator--devoto { left: calc(-16px * var(--e)); }
.ator--arcanista { left: calc(20px * var(--e)); }
.ator--batedor { left: calc(58px * var(--e)); }
.ator--guardiao { left: calc(104px * var(--e)); z-index: 3; }
.ator--esqueleto { left: calc(158px * var(--e)); z-index: 2; }
.legenda__escala { display: none; }
/* luz estática atrás da faixa quando a camada móvel não existe (4.2) */
html:not(.luz-ativa) .figura--taskforge .faixa-figura::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -8%; right: -8%; top: -50%; bottom: -10%;
  background: url(../assets/luz/luz-ouro-pixel.png) center / 100% 100% no-repeat;
  image-rendering: pixelated; opacity: .2;
}

/* Figura do Hero Core Defense (4.7): moldura 16:9, captura escurecida, Devorador em contraluz */
/* quadro transparente e captura a 55 % de opacidade: a luz brasa (z −1) atravessa a figura atrás do Devorador (4.7) */
.moldura--hcd .moldura__quadro { position: relative; aspect-ratio: 16 / 9; overflow: visible; background: transparent; }
.moldura__fundo { position: absolute; inset: 0; overflow: hidden; }
.moldura__fundo img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.devorador {
  position: absolute; z-index: 2; right: 4%; bottom: -56px;
  width: 60%; height: auto; max-width: 560px; max-height: 560px;
  -webkit-mask-image: linear-gradient(#000 92%, transparent);
  mask-image: linear-gradient(#000 92%, transparent);
}
/* recorte do personagem contra o escuro: brasa a 18 % sempre; brasa + rubra a 25 % sem a luz móvel */
.figura--hcd .moldura__quadro::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 34% 58% at 66% 58%, color-mix(in srgb, var(--brasa-hcd) 18%, transparent), transparent 72%);
}
html:not(.luz-ativa) .figura--hcd .moldura__quadro::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 42% 66% at 66% 56%, color-mix(in srgb, var(--brasa-hcd) 25%, transparent), color-mix(in srgb, var(--rubra-hcd) 15%, transparent) 48%, transparent 76%);
}
.moldura--hcd { display: flex; flex-direction: column; margin-bottom: 72px; }
.moldura--hcd .legenda { order: -1; margin: 0 0 12px; }     /* acima da moldura: abaixo dela ficam as canelas do Devorador e o numeral 03 */

@media (max-width: 767px) {
  .faixa-figura { grid-column: inicio / fim; }     /* recorte de borda a borda; heróis ancorados à esquerda */
}
@media (min-width: 768px) {
  .faixa-figura .legenda { margin-inline: 0; }
  .faixa { margin-inline: auto; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .faixa-figura .legenda { width: 480px; max-width: 100%; margin-inline: auto; }   /* a legenda acompanha a faixa 1× centrada */
}
@media (min-width: 768px) {
  .figura--taskforge .jogo__texto { grid-column: c 1 / c 7; }
  .jogo__capa { grid-column: c 1 / c 5; }
  .figura--hcd .jogo__texto { grid-column: c 1 / c 7; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  /* 1024: jogos em duas colunas internas (9.4), ainda com a faixa 1×; a moldura do HCD em largura total */
  .figura--taskforge .jogo__texto { grid-column: c 1 / c 5; grid-row: 2 / span 3; }
  .figura--taskforge .numeros { grid-column: c 5 / grade-fim; grid-row: 2; }
  .figura--taskforge .jogo__complemento { grid-column: c 5 / grade-fim; grid-row: 3; }
  .figura--taskforge .jogo__capa { grid-column: c 5 / c 8; grid-row: 4; align-self: start; }
  .figura--hcd .jogo__texto { grid-column: c 1 / c 5; grid-row: 2; }
  .figura--hcd .numeros { grid-column: c 5 / grade-fim; grid-row: 2; margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .secao--jogos { padding-bottom: 0; }              /* a figura do HCD termina a seção: o Devorador cruza a divisa */
  .faixa { --e: 2; margin-inline: 0; }
  .legenda__escala { display: inline; }
  .figura--taskforge .faixa-figura { grid-column: c 1 / grade-fim; grid-row: 1; margin-bottom: 0; }
  .figura--taskforge .jogo__texto { grid-column: c 1 / c 6; grid-row: 2 / span 3; margin-top: 56px; }
  .figura--taskforge .numeros { grid-column: c 7 / grade-fim; grid-row: 2; margin-top: 56px; }
  .figura--taskforge .jogo__complemento { grid-column: c 7 / grade-fim; grid-row: 3; }
  .figura--taskforge .jogo__capa { grid-column: c 9 / grade-fim; grid-row: 4; align-self: start; padding-bottom: 48px; }
  /* Bloco espelhado: números em linha no alto (c 1–7), texto à direita, moldura na base — última peça de #jogos,
     88 px de respiro (meia altura do 03) e o Devorador 208 px abaixo = 120 px dentro de #sobre */
  /* colunas ≥ conteúdo e numeral fluido (46 px em 1200 → 56 px em 1440): "1–4" e "dificuldades" cabem */
  .figura--hcd .numeros { grid-column: c 1 / c 8; grid-row: 1; margin-top: 0; padding-bottom: 40px; grid-template-columns: repeat(5, minmax(max-content, 1fr)); }
  .figura--hcd .numeros .numero__valor { font-size: clamp(2.75rem, 4.1667vw - 0.25rem, 3.5rem); }
  .figura--hcd::after { clip-path: inset(0 0 0 25%); }   /* a linha brasa começa na coluna do h2: não cruza o numeral 03 em difference */
  .figura--hcd .jogo__texto { grid-column: c 8 / grade-fim; grid-row: 1 / span 2; }
  .figura--hcd .jogo__figura { grid-column: c 1 / c 8; grid-row: 2; align-self: end; margin-bottom: 0; padding-bottom: 88px; }
  .devorador { right: 8%; bottom: -208px; width: auto; height: 460px; }
}
@media (min-width: 1440px) {
  .figura--taskforge .faixa-figura { grid-column: c 1 / c 10; }
}

/* ---- Divisa: bloco de altura zero; o numeral 03 cruza o corte em difference ---- */
.divisa { position: relative; height: 0; }
.numeral--divisa {
  position: absolute; top: 0; translate: 0 -50%; z-index: 3; grid-column: grade-inicio / grade-fim;
  color: #fff; mix-blend-mode: difference;
  font-size: min(20vw, 7rem);
}
@media (min-width: 768px) { .numeral--divisa { grid-column: c 1 / c 3; font-size: var(--t-numeral); } }
@media (min-width: 1200px) { .numeral--divisa { grid-column: c 1 / c 4; } }

/* ---- Sobre: manifesto em papel; planta técnica atrás, recortada por overflow-x clip ---- */
.secao--sobre { z-index: 1; overflow-x: clip; }
.secao--sobre .secao__cabecalho { border-top: 0; padding-top: 0; }
/* div.planta, não .planta: o SVG inline (planta-viga.svg) também traz class="planta" e herdaria posição e opacidade */
div.planta { position: absolute; z-index: -1; top: 16px; right: -48px; width: 240px; color: var(--tinta); opacity: .08; pointer-events: none; }
.planta svg { width: 100%; height: auto; }
.ledger {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--gutter);
  padding-block: 16px; border-block: 1px solid var(--linha-papel);
  color: var(--tinta); margin-bottom: clamp(3rem, 6vw, 5rem);
}
.ledger__par { display: flex; flex-wrap: wrap; column-gap: .5em; }
.ledger__rotulo { color: var(--tinta-2); }
.ledger__valor::before { content: "\2014\00A0"; color: var(--tinta-2); }
.principios { display: flex; flex-direction: column; }
.principio {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 12px;
  padding-block: 28px 36px; border-top: 1px solid var(--linha-papel);
}
.principio > * { grid-column: auto; }
.principio__numero {
  grid-row: 1 / span 2; display: inline-flex; align-items: center; align-self: start; gap: 12px;
  font: 500 3.5rem / 1 var(--fonte-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--tinta);
}
.principio__numero .quadrado { width: 10px; height: 10px; }
.principio__titulo { align-self: center; }
.principio__texto { grid-column: 1 / -1; max-width: 38ch; }
@media (min-width: 768px) {
  .principio__numero { font-size: 4.5rem; }
  .principio__texto { grid-column: 2; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .secao--sobre { padding-top: max(var(--secao-pad), 152px); }   /* respiro entre as garras do Devorador e o h2 */
  .secao--sobre .ledger { grid-column: c 2 / grade-fim; }          /* 11 colunas: os quatro pares cabem em linha nos três idiomas (es é o mais longo) */
  .secao--sobre .ledger__par + .ledger__par { padding-left: 12px; }
}
@media (min-width: 1200px) {
  div.planta { top: 42%; right: -140px; width: 560px; }
  .ledger { grid-column: c 4 / grade-fim; grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .ledger__par { flex-wrap: nowrap; white-space: nowrap; }   /* o par inteiro fica numa linha: o travessão nunca abre a linha de baixo */
  .ledger__par + .ledger__par { border-left: 1px solid var(--linha-papel); padding-left: 16px; }
  .principios { grid-column: inicio / fim; }
  .principio { grid-template-columns: var(--grade); column-gap: var(--gutter); border-top: 0; padding-block: 36px 44px; }
  .principio::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linha-papel); grid-column: grade-inicio / grade-fim; }
  .principio__numero { grid-column: c 1 / c 3; grid-row: 1; font-size: 6rem; }
  .principio__titulo { grid-column: c 3 / c 8; grid-row: 1; align-self: start; padding-top: .35em; }
  .principio__texto { grid-column: c 8 / grade-fim; grid-row: 1; padding-top: .5em; }
}

/* ---- Contato: um só endereço, em papel ---- */
.contato__rotulo { color: var(--tinta-2); }   /* um filete só: o do cabeçalho, que o numeral 04 cruza */
.email {
  position: relative; margin-top: 12px;
  font: 700 var(--t-email) / 1 var(--fonte-texto); letter-spacing: -0.02em;
  overflow-wrap: anywhere; hyphens: manual; text-wrap: initial;
}
.email__link { position: relative; display: inline-block; color: var(--tinta); }
.email__arroba { font-variation-settings: 'wdth' 62; }
.email__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .08em; background: var(--chama-escura);
  transform: scaleX(0); transform-origin: left; transition: transform var(--micro) var(--padrao);
}
.email__link:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .email__link:hover::after { transform: scaleX(1); } }
.contato__acoes { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 40px; }
.contato__copiar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.copiar .quadrado { width: 8px; height: 8px; }
.contato__idiomas { color: var(--tinta-2); }
.redes__rotulo { color: var(--tinta-2); text-transform: uppercase; margin-bottom: 8px; }
.redes__lista { display: flex; flex-wrap: wrap; gap: 0 24px; }
.redes__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
@media (max-width: 767px) { .copiar { width: 100%; } }
@media (min-width: 768px) { .email { overflow-wrap: normal; } }
@media (min-width: 1200px) {
  .secao--contato .secao__cabecalho { align-items: baseline; }
  .secao--contato .secao__titulo { grid-column: c 4 / c 9; }
  .secao--contato .secao__subtitulo { grid-column: c 9 / grade-fim; grid-row: 1; }
}

/* ===== css/movimento.css ===== */
/* css/movimento.css — tudo o que se move: cortes por máscara, forja em CSS, largura como calor, faixa, odômetro, Devorador, pet, luz, rodapé, estados de interface e reduced-motion */

/* ---- Forja em CSS (4.1): o rect.quente (2H, em y = −H) desliza 2H; transform-box: fill-box ---- */
.wordmark .quente { transform-box: fill-box; transform-origin: 0 0; animation: esfriar 1.2s .4s both; }
@keyframes esfriar { to { transform: translateY(100%); } }
html.forja .wordmark .quente { animation-play-state: paused; }    /* shader em preparação: quente e parado */
html.forja .marca-hero .nucleo { fill: var(--chama); }            /* o núcleo também nasce quente, como no 1.º quadro do shader */
.wordmark.fria .quente { display: none; }                          /* shader terminou */
html.forja-vista .marca-hero .quente { display: none; }            /* forja já vista na sessão (script do <head>): nasce fria */
html.forja-vista .marca-hero .nucleo { fill: var(--chama); }
.wordmark .nucleo.piscar, .wordmark .nucleo.aceso { fill: var(--chama); }
.wordmark .nucleo.piscar { animation: piscar-nucleo 640ms linear 2 both; }
@keyframes piscar-nucleo { 0%, 50% { fill: currentColor; } 50.01%, 100% { fill: var(--chama); } }
/* sem JS, o núcleo acende e pisca por conta própria quando o esfriamento termina (0,4 s + 1,2 s) */
html.sem-js .marca-hero .nucleo { animation: piscar-nucleo 640ms linear 1.6s 2 both; fill: var(--chama); }

/* ---- Largura como calor (4.3): só desktop, só com JS; sem JS as linhas ficam nos valores finais ---- */
@media (min-width: 1200px) {
  .declaracao__linha { transition: --largura 900ms var(--saida-expo); }
  html.js .declaracao__linha--pequeno { --largura: 125; }
  html.js .declaracao__linha--grande { --largura: 62; }
  html.js .declaracao.visivel .declaracao__linha--pequeno, html.sem-js .declaracao__linha--pequeno { --largura: 62; }
  html.js .declaracao.visivel .declaracao__linha--grande, html.sem-js .declaracao__linha--grande { --largura: 125; }
  /* zoom alto ou fonte do sistema: se a coluna encolher demais, a linha volta a quebrar */
  @container (max-width: 30em) { .declaracao__linha { white-space: normal; } }
}

/* ---- Cortes por máscara (4.4) e odômetro (4.6): armados só com JS e sem reduced-motion ---- */
@media (prefers-reduced-motion: no-preference) {
  /* linhas de título: lâmina de cima para baixo, com folga para acentos e descendentes */
  html.js [data-revelar] .linha { clip-path: inset(-0.1em -0.1em 100% -0.1em); }
  html.js [data-revelar].visivel .linha { clip-path: inset(-0.1em -0.1em -0.15em -0.1em); transition: clip-path var(--reveal) var(--saida-expo) calc(var(--i, 0) * var(--stagger)); }
  /* numerais de seção e dos princípios: guilhotina lateral */
  /* (o clip fica sempre num FILHO do elemento observado: o IntersectionObserver do Chrome considera o clip-path do alvo) */
  html.js .numeral[data-revelar] .numeral__texto, html.js [data-revelar] .principio__numero { clip-path: inset(0 100% 0 0); }
  html.js .numeral[data-revelar].visivel .numeral__texto, html.js [data-revelar].visivel .principio__numero { clip-path: inset(0 -0.1em 0 0); transition: clip-path 900ms var(--saida-expo); }
  /* texto dos princípios: máscara de cima para baixo, escalonada por --i */
  html.js [data-revelar] .principio__texto { clip-path: inset(-0.1em -0.1em 100% -0.1em); }
  html.js [data-revelar].visivel .principio__texto { clip-path: inset(-0.1em -0.1em -0.15em -0.1em); transition: clip-path var(--reveal) var(--saida-expo) calc(var(--i, 0) * var(--stagger)); }
  /* figuras e molduras abrem a partir do meio (o vão do símbolo) */
  html.js .faixa-figura[data-revelar] .faixa-recorte, html.js .jogo__capa[data-revelar] > picture,
  html.js .moldura--hcd[data-revelar] .moldura__fundo, html.js .moldura--hcd[data-revelar] .devorador { clip-path: inset(50% 0 50% 0); }
  html.js .faixa-figura.visivel .faixa-recorte, html.js .jogo__capa.visivel > picture,
  html.js .moldura--hcd.visivel .moldura__fundo, html.js .moldura--hcd.visivel .devorador { clip-path: inset(0); transition: clip-path 900ms var(--saida-expo); }
  /* odômetro: cada pilha desce até --d em 900 ms, escalonado por --i e --j; a unidade entra 100 ms depois */
  html.js .odometro__pilha { transform: translateY(0); }
  html.js .numeros.visivel .odometro__pilha { transform: translateY(calc(-1em * var(--d, 0))); transition: transform 900ms var(--saida-expo) calc(var(--i, 0) * 70ms + var(--j, 0) * 70ms); }
  html.js .numeros[data-revelar] .numero__unidade { clip-path: inset(-0.1em -0.1em 100% -0.1em); }
  html.js .numeros.visivel .numero__unidade { clip-path: inset(-0.1em -0.5em -0.15em -0.1em); transition: clip-path var(--reveal) var(--saida-expo) calc(var(--i, 0) * 70ms + 100ms); }
  /* e-mail: máscara horizontal com o quadrado --chama na borda, como um cursor (3.5) */
  html.js .email[data-revelar] .email__link { clip-path: inset(-0.1em 100% -0.15em 0); }
  html.js .email.visivel .email__link { clip-path: inset(-0.1em 0 -0.15em 0); transition: clip-path var(--reveal) var(--saida-expo); }
  html.js .email__link::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .12em; pointer-events: none;
    background: linear-gradient(90deg, transparent calc(100% - .12em), var(--chama) 0);
    transform: translateX(-100%); opacity: 0;
  }
  html.js .email.visivel .email__link::before { animation: cursor-email var(--reveal) var(--saida-expo) both; }
  /* sangria do rodapé: entra em grafite e vira papel por máscara (3.6); cortes.js a observa com limiar 0 */
  html.js .rodape__sangria[data-revelar] .quente { display: block; fill: var(--grafite); transform: none; animation: none; }
  html.js .rodape__sangria.visivel .quente { transform: translateX(100%); transition: transform 1200ms var(--saida-expo) 100ms; }
  html.js .rodape__sangria .wordmark .nucleo { transition: fill 300ms var(--padrao); }
}
@keyframes cursor-email { from { transform: translateX(-100%); opacity: 1; } 85% { opacity: 1; } to { transform: translateX(0); opacity: 0; } }
.rodape__sangria .wordmark .quente { display: none; }                        /* sem JS ou em repouso: só o papel */

/* ---- Faixa em tamanho real (4.5): sprites por transform em steps(4), cenário em paralaxe no hover ---- */
.ator__tira { animation: quadros var(--dur, .9s) steps(4, end) infinite; }
@keyframes quadros { to { transform: translateX(-100%); } }
.ator--esqueleto .ator__tira { animation-duration: var(--dur, .85s); }
/* :focus-visible, não :focus-within: o foco por toque ou clique não deixa a party andando para sempre; o teclado sim */
.faixa:is(:hover, :focus-visible, .andando) .ator:not(.ator--esqueleto) .ator__tira { background-image: var(--tira-walk); animation-duration: .6s; }
.faixa:is(:hover, :focus-visible, .andando) .faixa__colinas { animation: deslizar-colinas 36s linear infinite; }
.faixa:is(:hover, :focus-visible, .andando) .faixa__chao { animation: deslizar-chao 24s linear infinite; }
@keyframes deslizar-colinas { to { background-position-x: calc(-148px * var(--e)); } }
@keyframes deslizar-chao { to { background-position-x: calc(-32px * var(--e)); } }
.faixa:active { cursor: grabbing; }
/* linha de 2 px na base de cada bloco respirando em opacidade (3.3) */
.jogo::after { animation: respirar 5s ease-in-out infinite alternate; }
@keyframes respirar { from { opacity: .55; } to { opacity: 1; } }

/* ---- Devorador (4.7): respiro em `transform`; a paralaxe do JS escreve `translate` ---- */
.devorador { animation: respiro-devorador 4s ease-in-out infinite alternate; }
@keyframes respiro-devorador { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* ---- Pet na barra (4.8): atravessa da direita para a esquerda em 9 s a cada 25 s ---- */
.pet { animation: atravessar 25s linear 6s infinite; }
.pet__tira { animation: quadros .6s steps(4, end) infinite; }
@keyframes atravessar { 0% { translate: 100vw 0; } 36% { translate: -60px 0; } 100% { translate: -60px 0; } }

/* ---- O calor que viaja (4.2): camada fixa atrás de tudo, só transform e opacity ---- */
.luz { position: fixed; inset: 0; z-index: -1; pointer-events: none; contain: strict; overflow: hidden; }
html:not(.luz-ativa) .luz { display: none; }
.luz__nucleo { position: absolute; left: 0; top: 0; width: 1000px; height: 1000px; transform: translate3d(-500px, -500px, 0) scale(0); will-change: transform; }
.luz__frio, .luz__ouro, .luz__brasa { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.luz__frio { background: radial-gradient(circle, rgba(58, 91, 255, .38) 0%, rgba(58, 91, 255, .08) 40%, transparent 70%); }
.luz__frio.acoplada { background: radial-gradient(circle, var(--incandescente) 0 1.2%, rgba(58, 91, 255, .55) 4%, rgba(58, 91, 255, .38) 10%, rgba(58, 91, 255, .08) 40%, transparent 70%); }
.luz__ouro { background: url(../assets/luz/luz-ouro-pixel.png) center / 100% 100% no-repeat; image-rendering: pixelated; transform: scaleX(1.6); }   /* alongado só na horizontal: vaza pelos lados da faixa sem mudar o raio vertical calibrado */
.luz__brasa { background: radial-gradient(ellipse 50% 62% at 50% 56%, rgba(255, 122, 46, .6) 0%, rgba(179, 34, 43, .2) 45%, transparent 72%); animation: subir 6s ease-in-out infinite alternate; }
@keyframes subir { from { transform: translateY(-1.5%); } to { transform: translateY(1.5%); } }
@media (max-width: 767px) { .luz__brasa { animation: none; } }

/* ---- Rodapé (3.6, 4.2): o núcleo do I fica vazado até a luz pousar; depois acende e respira em 6 s ---- */
#rodape .wordmark .nucleo { fill: none; }
#rodape .wordmark .nucleo.aceso { fill: var(--chama); }
#rodape .wordmark .nucleo.aceso ~ .incandescente { fill: var(--incandescente); animation: respiro-nucleo 6s ease-in-out infinite alternate; }
html:not(.luz-ativa) #rodape .wordmark .nucleo, html:not(.luz-ativa) #rodape .simbolo .nucleo { fill: var(--chama); }
html:not(.luz-ativa) #rodape .incandescente { fill: var(--incandescente); }
@keyframes respiro-nucleo { from { opacity: .55; } to { opacity: 1; } }

/* ---- Estados de interface (5, 6): menu, galeria, barra de idioma, copiar ---- */
.menu[open] .menu__painel { animation: abrir-painel var(--ui-entrada) var(--entra-sai) both; }
@keyframes abrir-painel { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.galeria[open] { animation: abrir-galeria var(--ui-entrada) var(--entra-sai) both; }
@keyframes abrir-galeria { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0); } }
.sugestao-idioma:not([hidden]) { animation: subir-barra var(--ui-saida) var(--entra-sai) both; }
@keyframes subir-barra { from { transform: translateY(100%); } }
.sugestao-idioma.saindo { transform: translateY(100%); transition: transform var(--ui-saida) var(--entra-sai); }
.copiar.copiado .quadrado { animation: piscar-quadrado 640ms linear 2; }
@keyframes piscar-quadrado { 0%, 50% { opacity: 0; } 50.01%, 100% { opacity: 1; } }
.menu__link, .idiomas__link, .secoes__link, .rodape__links a { -webkit-tap-highlight-color: transparent; }

/* ---- Reduced-motion (5.9): tudo em repouso; restam transições de 150 ms nos estados de interface ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 150ms !important; transition-property: opacity, background-color, border-color, color !important; }
  .wordmark .quente, .rodape__sangria .wordmark .quente { display: none !important; animation: none !important; }
  .marca-hero .nucleo, .wordmark .nucleo.piscar { animation: none !important; fill: var(--chama); }
  .declaracao__linha--pequeno { --largura: 75 !important; }
  .declaracao__linha--grande { --largura: 125 !important; }
  .ator__tira, .faixa__colinas, .faixa__chao, .jogo::after, .devorador, .pet, .pet__tira, .luz__brasa,
  #rodape .incandescente, .menu[open] .menu__painel, .galeria[open], .sugestao-idioma:not([hidden]), .copiar.copiado .quadrado { animation: none !important; }
  .pet { translate: 0 0; left: auto; right: 16px; transform: none; }
  .pet__tira { background-image: var(--tira-idle); }
  .faixa:is(:hover, :focus-visible, .andando) .ator__tira { background-image: var(--tira-idle); }
  .devorador { translate: 0 0; transform: none; }
  .odometro__pilha { transform: translateY(calc(-1em * var(--d, 0))) !important; }
  .numero__unidade, .linha, .numeral__texto, .principio__numero, .principio__texto, .email__link, .faixa-recorte, .jogo__capa > picture, .moldura__fundo, .devorador { clip-path: none !important; }
  .email__link::before { display: none; }
}