/* Jazvron — catálogo editorial de jogos. Sistema de design: off-white + navy + um acento (rust orange). */

:root {
  --bg: #f6f4ee;
  --surface: #ffffff;
  --surface-muted: #eeeadd;
  --navy: #12172a;
  --navy-soft: #232a45;
  --ink: #171b2e;
  --ink-muted: #5b6178;
  --line: #ddd8c8;
  --line-navy: rgba(255, 255, 255, 0.14);
  --accent: #e8590c;
  --accent-ink: #7a2c02;
  --on-navy: #f3f1e9;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --shadow-card: 0 1px 2px rgba(18, 23, 42, 0.06), 0 8px 24px -14px rgba(18, 23, 42, 0.28);
  --max: 1220px;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, dl, dd, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 1.08rem; line-height: 1.3; font-weight: 700; }

.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--on-navy); padding: 12px 18px; border-radius: 0 0 var(--radius-s) 0;
}
.saltar:focus { left: 0; }

.contentor { max-width: var(--max); margin-inline: auto; padding-inline: 20px; }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- botões e etiquetas ---------- */

.botao {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 0.94rem;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.botao svg { flex-shrink: 0; }
.botao--primario { background: var(--accent); color: #fff; }
.botao--primario:hover { background: #d24f0a; }
.botao--secundario { background: var(--navy); color: var(--on-navy); }
.botao--secundario:hover { background: var(--navy-soft); }
.botao--fantasma { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.botao--fantasma:hover { border-color: var(--navy); }
.botao:active { transform: translateY(1px); }

.etiqueta {
  display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); background: var(--surface-muted);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
a.etiqueta:hover { color: var(--accent-ink); background: #f4dfce; }

.icone { flex-shrink: 0; }

/* ---------- cabeçalho ---------- */

.cabecalho { background: var(--navy); color: var(--on-navy); position: sticky; top: 0; z-index: 100; }
.cabecalho__interior { display: flex; align-items: center; gap: 24px; padding-block: 14px; }

.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; color: var(--on-navy); flex-shrink: 0; }
.marca__simbolo { flex-shrink: 0; }

.navegacao { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; }
.navegacao a {
  padding: 8px 12px; border-radius: 999px; font-size: 0.92rem; font-weight: 600; color: rgba(243, 241, 233, 0.78);
  transition: background-color .15s ease, color .15s ease;
}
.navegacao a:hover { color: var(--on-navy); background: rgba(255, 255, 255, 0.08); }
.navegacao a[aria-current="page"] { color: var(--navy); background: var(--on-navy); }

.cabecalho__ferramentas { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cabecalho__busca {
  display: none; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line-navy);
  border-radius: 999px; padding: 8px 14px; color: rgba(243, 241, 233, 0.7);
}
.cabecalho__busca input {
  background: none; border: 0; color: var(--on-navy); width: 150px; font-size: 0.88rem;
}
.cabecalho__busca input::placeholder { color: rgba(243, 241, 233, 0.5); }
.cabecalho__busca input:focus { outline: none; }

.botao-icone {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 999px; color: var(--on-navy); transition: background-color .15s ease;
}
.botao-icone:hover { background: rgba(255, 255, 255, 0.1); }

.alternar-menu__fechar { display: none; }
.alternar-menu[aria-expanded="true"] .alternar-menu__abrir { display: none; }
.alternar-menu[aria-expanded="true"] .alternar-menu__fechar { display: block; }

@media (max-width: 880px) {
  .navegacao {
    position: fixed; inset: 60px 0 0 0; background: var(--navy); flex-direction: column; align-items: stretch;
    padding: 12px 20px 30px; gap: 2px; overflow-y: auto; transform: translateX(100%);
    transition: transform .25s ease; border-top: 1px solid var(--line-navy);
  }
  .navegacao.esta-aberta { transform: translateX(0); }
  .navegacao a { padding: 14px 12px; font-size: 1.02rem; }
}
@media (min-width: 881px) {
  .alternar-menu { display: none; }
  .cabecalho__busca { display: flex; }
}

/* ---------- rodapé ---------- */

.rodape { background: var(--navy); color: var(--on-navy); margin-top: 72px; }
.rodape__grelha { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-block: 52px 32px; }
.rodape__marca p { margin-top: 14px; color: rgba(243, 241, 233, 0.65); font-size: 0.92rem; max-width: 34ch; }
.rodape__coluna h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(243, 241, 233, 0.5); font-weight: 700; margin-bottom: 14px; }
.rodape__coluna li + li { margin-top: 10px; }
.rodape__coluna a { color: rgba(243, 241, 233, 0.85); font-size: 0.92rem; }
.rodape__coluna a:hover { color: var(--accent); }
.rodape__base {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 20px;
  border-top: 1px solid var(--line-navy); font-size: 0.82rem; color: rgba(243, 241, 233, 0.55);
}
@media (max-width: 880px) {
  .rodape__grelha { grid-template-columns: repeat(2, 1fr); }
  .rodape__marca { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .rodape__grelha { grid-template-columns: 1fr; }
}

/* ---------- secções gerais ---------- */

.seccao { padding-block: 44px; }
.seccao--contraste { background: var(--surface-muted); padding-block: 48px; }
.seccao__cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.seccao__ver-tudo { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.9rem; color: var(--accent-ink); }
.seccao__ver-tudo:hover { text-decoration: underline; }

.cabecalho-pagina { padding-block: 40px 8px; }
.cabecalho-pagina h1 { margin-block: 14px 12px; }
.cabecalho-pagina p { max-width: 62ch; color: var(--ink-muted); font-size: 1.02rem; }

/* ---------- trilho (breadcrumbs) ---------- */

.trilho ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ink-muted); }
.trilho a:hover { color: var(--accent-ink); text-decoration: underline; }
.trilho__item[aria-current="page"] { color: var(--ink); font-weight: 600; }
.trilho__sep { opacity: 0.5; }

/* ---------- hero de descoberta (home) ---------- */

.hero-descoberta { background: var(--navy); color: var(--on-navy); padding-block: 56px 64px; }
.hero-descoberta__grelha { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hero-descoberta__eyebrow { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); margin-bottom: 14px; }
.hero-descoberta h1 { color: #fff; }
.hero-descoberta__texto { margin-top: 16px; color: rgba(243, 241, 233, 0.75); max-width: 52ch; font-size: 1.02rem; }

.formulario-busca {
  display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 999px;
  padding: 8px 8px 8px 18px; margin-top: 26px; max-width: 480px; color: var(--ink-muted);
  box-shadow: var(--shadow-card);
}
.formulario-busca__campo { flex: 1; border: 0; background: none; font-size: 0.98rem; color: var(--ink); min-width: 0; }
.formulario-busca__campo:focus { outline: none; }
.formulario-busca__campo::placeholder { color: var(--ink-muted); }
.formulario-busca__botao { padding: 10px 20px; }
.formulario-busca--grande { max-width: 640px; margin-top: 22px; padding: 10px 10px 10px 20px; }

.hero-descoberta__atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; font-size: 0.85rem; color: rgba(243, 241, 233, 0.55); }
.chip-atalho { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line-navy); border-radius: 999px; padding: 6px 13px; color: var(--on-navy); font-size: 0.85rem; }
.chip-atalho:hover { border-color: var(--accent); color: var(--accent); }

.hero-descoberta__posteres { display: flex; justify-content: center; align-items: center; position: relative; height: 320px; }
.hero-descoberta__poster { width: 150px; border-radius: var(--radius-m); overflow: hidden; box-shadow: 0 20px 40px -16px rgba(0,0,0,.55); position: absolute; }
.hero-descoberta__poster .capa { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.hero-descoberta__poster--1 { transform: rotate(-9deg) translateX(-106px); z-index: 1; }
.hero-descoberta__poster--2 { transform: translateY(-14px); z-index: 3; }
.hero-descoberta__poster--3 { transform: rotate(9deg) translateX(106px); z-index: 2; }

@media (max-width: 960px) {
  .hero-descoberta__grelha { grid-template-columns: 1fr; }
  .hero-descoberta__posteres { height: 220px; margin-top: 12px; }
  .hero-descoberta__poster { width: 110px; }
  .hero-descoberta__poster--1 { transform: rotate(-8deg) translateX(-76px); }
  .hero-descoberta__poster--3 { transform: rotate(8deg) translateX(76px); }
}

/* ---------- grelhas de jogos ---------- */

.grelha-destaques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.jogo-destaque {
  display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-l);
  overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--line);
}
.jogo-destaque__poster { aspect-ratio: 4 / 3; overflow: hidden; }
.jogo-destaque__poster .capa { width: 100%; height: 100%; object-fit: cover; }
.jogo-destaque__corpo { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.jogo-destaque__titulo a:hover { color: var(--accent-ink); }
.jogo-destaque__tagline { color: var(--ink-muted); font-size: 0.94rem; }
.jogo-destaque__meta { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ink-muted); font-family: var(--font-mono); }
.jogo-destaque__corpo .botao { align-self: flex-start; margin-top: 6px; }

.grelha-catalogo { display: grid; gap: 20px; }
.grelha-catalogo--3 { grid-template-columns: repeat(3, 1fr); }
.grelha-catalogo--4 { grid-template-columns: repeat(4, 1fr); }

.jogo-cartao {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease; display: flex; flex-direction: column;
}
.jogo-cartao:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.jogo-cartao__poster { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.jogo-cartao__poster .capa { width: 100%; height: 100%; object-fit: cover; }
.jogo-cartao__corpo { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.jogo-cartao__etiquetas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jogo-cartao__ano { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-muted); }
.jogo-cartao__titulo { font-size: 1.02rem; }
.jogo-cartao__titulo a:hover { color: var(--accent-ink); }
.jogo-cartao__tagline { font-size: 0.88rem; color: var(--ink-muted); flex: 1; }
.jogo-cartao__rodape { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-muted); border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }

.grelha-generos { display: flex; flex-wrap: wrap; gap: 10px; }
.genero-chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 16px; font-weight: 600; font-size: 0.9rem; transition: border-color .15s ease, color .15s ease;
}
.genero-chip:hover { border-color: var(--accent); color: var(--accent-ink); }

.grelha-escolhas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.escolha-cartao { display: flex; gap: 16px; background: var(--surface); border-radius: var(--radius-m); padding: 16px; border: 1px solid var(--line); }
.escolha-cartao__poster { width: 76px; flex-shrink: 0; border-radius: var(--radius-s); overflow: hidden; }
.escolha-cartao__poster .capa { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.escolha-cartao__corpo p { font-size: 0.88rem; color: var(--ink-muted); margin-top: 6px; }
.escolha-cartao__link { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 0.86rem; font-weight: 600; }
.escolha-cartao__link span { color: var(--accent-ink); }
.escolha-cartao__link:hover span { text-decoration: underline; }

.grelha-leituras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grelha-leituras--lista { grid-template-columns: repeat(2, 1fr); }
.leitura-cartao { border-top: 3px solid var(--navy); padding-top: 16px; }
.leitura-cartao__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.leitura-cartao__jogo { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-ink); font-weight: 700; }
.leitura-cartao__titulo a:hover { color: var(--accent-ink); }
.leitura-cartao__resumo { color: var(--ink-muted); font-size: 0.92rem; margin-top: 8px; }
.leitura-cartao__meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-muted); margin-top: 12px; }

.grelha-taxonomia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-block: 20px 56px; }
.taxonomia-cartao {
  display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 22px; position: relative; transition: border-color .15s ease, transform .15s ease;
}
.taxonomia-cartao:hover { border-color: var(--accent); transform: translateY(-2px); }
.taxonomia-cartao__contagem { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink); background: var(--surface-muted); border-radius: 999px; padding: 3px 10px; }
.taxonomia-cartao__titulo { margin-top: 10px; }
.taxonomia-cartao__desc { margin-top: 8px; color: var(--ink-muted); font-size: 0.9rem; }
.taxonomia-cartao__seta { position: absolute; right: 20px; bottom: 20px; color: var(--ink-muted); }

.bloco-relacionado { margin-top: 44px; }
.bloco-relacionado h2 { margin-bottom: 16px; }

@media (max-width: 960px) {
  .grelha-destaques, .grelha-escolhas, .grelha-catalogo--3, .grelha-catalogo--4, .grelha-leituras, .grelha-taxonomia { grid-template-columns: repeat(2, 1fr); }
  .grelha-leituras--lista { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grelha-destaques, .grelha-escolhas, .grelha-catalogo--3, .grelha-catalogo--4, .grelha-leituras, .grelha-leituras--lista, .grelha-taxonomia { grid-template-columns: 1fr; }
  .escolha-cartao { flex-direction: column; }
  .escolha-cartao__poster { width: 96px; }
}

/* ---------- página Todos os Jogos ---------- */

.catalogo { display: grid; grid-template-columns: 230px 1fr; gap: 36px; padding-block: 28px 64px; align-items: start; }
.filtros { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 24px; }
.filtros__legenda { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); margin-bottom: 10px; }
.filtros__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-filtro {
  border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 0.85rem; font-weight: 600;
  color: var(--ink-muted); transition: all .15s ease;
}
.chip-filtro:hover { border-color: var(--navy); color: var(--ink); }
.chip-filtro[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }

.catalogo__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.catalogo__barra p { font-size: 0.88rem; color: var(--ink-muted); font-family: var(--font-mono); }
.catalogo__ordenar { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--ink-muted); }
.catalogo__ordenar select { border: 1.5px solid var(--line); border-radius: var(--radius-s); padding: 7px 10px; background: var(--surface); }
.catalogo__vazio { text-align: center; padding: 48px 0; color: var(--ink-muted); }

.paginacao { display: flex; align-items: center; gap: 8px; margin-top: 36px; }
.paginacao__item { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: var(--radius-s); font-weight: 600; font-size: 0.9rem; }
.paginacao__item--atual { background: var(--navy); color: var(--on-navy); }
.paginacao__item--inativo { color: var(--ink-muted); opacity: .55; }

@media (max-width: 880px) {
  .catalogo { grid-template-columns: 1fr; }
  .filtros { position: static; flex-direction: row; flex-wrap: wrap; gap: 18px 28px; }
}

/* ---------- ficha de jogo ---------- */

.jogo-hero { padding-block: 32px 8px; }
.jogo-hero__grelha { display: grid; grid-template-columns: 320px 1fr; gap: 44px; align-items: start; }
.jogo-hero__poster { border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-card); }
.jogo-hero__poster .capa { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.jogo-hero__tagline { font-size: 1.12rem; color: var(--ink-muted); margin-top: 10px; max-width: 56ch; }
.jogo-hero__meta-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; margin-top: 26px; }
.jogo-hero__meta-lista dt { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.jogo-hero__meta-lista dd { margin: 4px 0 0; font-weight: 600; }
.jogo-hero__classificacao { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; font-size: 0.88rem; color: var(--ink-muted); background: var(--surface-muted); border-radius: var(--radius-s); padding: 12px 14px; }
.jogo-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

@media (max-width: 780px) {
  .jogo-hero__grelha { grid-template-columns: 1fr; }
  .jogo-hero__poster { max-width: 260px; }
  .jogo-hero__meta-lista { grid-template-columns: 1fr 1fr; }
}

/* ---------- corpo editorial ---------- */

.artigo-corpo { padding-block: 40px 12px; max-width: 760px; }
.artigo-corpo--texto { max-width: 720px; }
.artigo-corpo__cabecalho { margin-bottom: 8px; }
.artigo-corpo__cabecalho h1 { margin-top: 14px; }
.artigo-corpo__resumo { font-size: 1.08rem; color: var(--ink-muted); margin-top: 14px; }
.artigo-corpo__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.artigo-corpo__revisao { margin-top: 40px; font-size: 0.85rem; color: var(--ink-muted); }

.secao-ficha { max-width: 760px; margin-inline: auto; padding-block: 26px; border-top: 1px solid var(--line); }
.secao-ficha:first-of-type { border-top: 0; padding-top: 8px; }
.secao-ficha h2 { margin-bottom: 12px; }
.secao-ficha p { color: var(--ink); font-size: 1rem; }

.info-chave { display: grid; gap: 10px; }
.info-chave li { display: flex; align-items: flex-start; gap: 10px; }
.info-chave svg { color: var(--accent); margin-top: 3px; flex-shrink: 0; }

.resumo-pontos { max-width: 760px; margin: 28px auto 0; background: var(--surface-muted); border-radius: var(--radius-m); padding: 22px 24px; }
.resumo-pontos h2 { font-size: 1rem; margin-bottom: 12px; }
.resumo-pontos ul { display: grid; gap: 9px; }
.resumo-pontos li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.94rem; }
.resumo-pontos svg { color: var(--accent); margin-top: 3px; flex-shrink: 0; }

.indice { max-width: 760px; margin: 24px auto 0; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 18px 22px; }
.indice h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); margin-bottom: 10px; }
.indice ol { display: grid; gap: 6px; counter-reset: idx; }
.indice li { counter-increment: idx; font-size: 0.92rem; }
.indice li a::before { content: counter(idx) ". "; color: var(--accent-ink); font-weight: 700; }
.indice a:hover { text-decoration: underline; }

.corpo-editorial { max-width: 760px; margin-inline: auto; font-size: 1.03rem; }
.corpo-editorial h2 { margin-top: 36px; margin-bottom: 12px; scroll-margin-top: 90px; }
.corpo-editorial p { margin-bottom: 16px; }
.corpo-editorial a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- capturas do jogo ---------- */

.capturas__aviso { font-size: 0.85rem; color: var(--ink-muted); margin-block: 4px 20px; }
.capturas__aviso a { color: var(--accent-ink); text-decoration: underline; }
.capturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: 56px; }
.capturas__item { border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.capturas__item .capa { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.capturas__item figcaption { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.capturas__item figcaption strong { font-size: 0.94rem; }
.capturas__item figcaption span { font-size: 0.86rem; color: var(--ink-muted); }

@media (max-width: 880px) {
  .capturas { grid-template-columns: 1fr; }
}

/* ---------- perguntas frequentes (accordion nativo) ---------- */

.lista-perguntas { display: grid; gap: 10px; max-width: 760px; margin-inline: auto; padding-bottom: 56px; }
.pergunta { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 4px 20px; background: var(--surface); }
.pergunta > p { padding-bottom: 16px; color: var(--ink-muted); }
.pergunta__cabecalho {
  padding-block: 16px; font-weight: 700; cursor: pointer; list-style: none; display: flex;
  align-items: center; justify-content: space-between; gap: 12px;
}
.pergunta__cabecalho::-webkit-details-marker { display: none; }
.pergunta__cabecalho::after { content: "+"; font-size: 1.3rem; color: var(--accent); flex-shrink: 0; }
.pergunta[open] .pergunta__cabecalho::after { content: "–"; }

/* ---------- página Comparar ---------- */

.tabela-comparar__envolvente { overflow-x: auto; padding-block: 24px 56px; }
.tabela-comparar { width: 100%; border-collapse: collapse; min-width: 620px; }
.tabela-comparar th, .tabela-comparar td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 0.94rem; }
.tabela-comparar thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); border-bottom: 2px solid var(--navy); }
.tabela-comparar thead th a:hover { color: var(--accent-ink); }
.tabela-comparar tbody th { font-weight: 700; color: var(--ink-muted); white-space: nowrap; }
.tabela-comparar tbody tr:hover { background: var(--surface-muted); }

.grelha-descoberta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 56px; }
.descoberta-cartao { display: flex; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 18px; }
.descoberta-cartao__poster { width: 84px; flex-shrink: 0; border-radius: var(--radius-s); overflow: hidden; }
.descoberta-cartao__poster .capa { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.descoberta-cartao__corpo h3 { font-size: 1rem; }
.descoberta-cartao__corpo p { font-size: 0.88rem; color: var(--ink-muted); margin-block: 8px 14px; }

@media (max-width: 880px) {
  .grelha-descoberta { grid-template-columns: 1fr; }
}

/* ---------- contactos ---------- */

.lista-contactos { display: grid; gap: 18px; margin-block: 28px 36px; }
.lista-contactos li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-m); }
.lista-contactos svg { color: var(--accent); margin-top: 3px; flex-shrink: 0; }
.lista-contactos strong { display: block; font-size: 0.95rem; }
.lista-contactos a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lista-contactos span { display: block; margin-top: 4px; font-size: 0.86rem; color: var(--ink-muted); }

/* ---------- erro 404 ---------- */

.erro { text-align: center; padding-block: 100px 120px; }
.erro__codigo { font-family: var(--font-mono); font-size: 5rem; font-weight: 800; color: var(--surface-muted); margin: 0; }
.erro h1 { margin-top: 8px; }
.erro p { color: var(--ink-muted); margin-top: 12px; }
.erro__cta { display: flex; justify-content: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

/* ---------- responsivo geral ---------- */

@media (max-width: 620px) {
  .contentor { padding-inline: 16px; }
  .seccao { padding-block: 32px; }
  .jogo-hero__cta .botao { flex: 1; justify-content: center; }
}