/* ============================================================================
   Enciclopédia de Arkania: papel quente, verde floresta e detalhes em latão.
   As molduras e os sprites preservam a referência visual do cliente 8.70.

   ⚠️ Fonte é a do SISTEMA, sempre. A CSP é ``default-src 'none'`` e não tem
   ``font-src``, então fonte externa seria bloqueada em silêncio — e embutir uma
   por data: URI custaria dezenas de KB numa página que já sai sem gzip.
   ========================================================================= */
:root {
  color-scheme: light dark;
  --fundo: #f0ecdf;
  --papel: #faf7ee;
  --tinta: #283c32;
  --suave: #706f60;
  --linha: #d5ceba;
  --realce: #355c47;
  --link: #356047;
  --aviso: #8a6d1e;
  --raro: #6b3fa0;
  /* Os dois tons do relevo. Claro em cima/esquerda, escuro embaixo/direita. */
  --luz: rgba(255, 255, 255, .85);
  --sombra: rgba(90, 74, 48, .35);
  /* A barra do topo é madeira escura nos DOIS temas: é a âncora da marca. */
  --barra: #193b2e;
  --barra-tinta: #f1ecd9;
  --barra-linha: #375344;
  --dourado: #d9bc79;
  --serif: Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #17231e;
    --papel: #1e2e26;
    --tinta: #e9e6d6;
    --suave: #b2b5a3;
    --linha: #3b4c40;
    --realce: #b1cfab;
    --link: #bed5a8;
    --aviso: #d8bd72;
    --raro: #b998e8;
    --luz: rgba(255, 235, 200, .10);
    --sombra: rgba(0, 0, 0, .55);
    --barra: #10271e;
    --barra-tinta: #f1ecd9;
    --barra-linha: #334b3d;
    --dourado: #d9bc79;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 15% 0%, var(--papel), transparent 65%),
              var(--fundo);
  color: var(--tinta);
  font: 15px/1.65 system-ui, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, .tabela-rolagem:focus-visible {
  outline: 3px solid var(--realce); outline-offset: 4px;
}
.pular-conteudo {
  position: absolute; left: 1rem; top: -5rem; z-index: 10;
  padding: .6rem 1rem; background: var(--papel); color: var(--tinta);
}
.pular-conteudo:focus { top: .5rem; }

/* --- A moldura do cliente ---------------------------------------------------
   Duas sombras internas de 1px: a clara em cima/esquerda e a escura
   embaixo/direita. É o bevel do 8.70 sem uma única imagem.                   */
.relevo {
  background: var(--papel);
  border: 1px solid var(--linha);
  box-shadow: inset 1px 1px 0 var(--luz), inset -1px -1px 0 var(--sombra);
}
/* O inverso, para campo de entrada: parece afundado. */
.afundado {
  background: var(--fundo);
  border: 1px solid var(--linha);
  box-shadow: inset -1px -1px 0 var(--luz), inset 1px 1px 0 var(--sombra);
}

header.topo {
  background: var(--barra);
  border-top: 3px solid var(--dourado);
  border-bottom: 1px solid var(--barra-linha);
}
/* ⚠️ A faixa interna existe para o menu ALINHAR com o conteúdo. Sem ela a
   marca ficava em x=16 e o texto da página começava em x=195 — o desalinho
   mais visível do design antigo, e o mais barato de consertar. */
header.topo .faixa {
  max-width: 76rem; margin: 0 auto; padding: 1.2rem 2rem;
  display: flex; gap: 2rem; align-items: center; justify-content: space-between;
}
header.topo .marca {
  display: inline-flex; gap: .9rem; align-items: center;
  color: var(--barra-tinta); text-decoration: none;
}
.marca-selo {
  width: 2.6rem; height: 2.9rem; display: grid; place-items: center;
  border: 1px solid var(--dourado); color: var(--dourado);
  font: 1.9rem/1 var(--serif); border-radius: 2px 2px 45% 45%;
  box-shadow: inset 0 0 0 3px var(--barra), inset 0 0 0 4px var(--barra-linha);
}
.marca-nome {
  display: block; font: 1.7rem/1.1 var(--serif);
  letter-spacing: .14em; text-transform: uppercase;
}
.marca-descricao {
  display: block; color: var(--dourado); font-size: .6rem;
  letter-spacing: .19em; text-transform: uppercase; margin-top: .3rem;
}
.topo-lema { color: #c2cabb; font: italic .9rem var(--serif); }
header.topo .faixa-menu { padding-top: 0; padding-bottom: 0; }
header.topo nav {
  display: flex; flex-wrap: wrap; gap: 0 1.8rem; width: 100%;
  border-top: 1px solid var(--barra-linha);
}
header.topo nav a {
  color: #c8d1c2; padding: .8rem 0 .7rem;
  font-size: .78rem; border-bottom: 2px solid transparent;
}
header.topo nav a:hover {
  color: var(--barra-tinta); text-decoration: none;
  border-bottom-color: var(--barra-linha);
}
/* Saber ONDE se está era informação que a barra simplesmente não dava. */
header.topo nav a.aqui {
  color: var(--dourado); border-bottom-color: var(--dourado);
}
header.topo a:focus-visible { outline-color: var(--dourado); }
header.topo nav a:last-child { margin-left: auto; }

main { max-width: 76rem; margin: 0 auto; padding: 2.5rem 2rem 4rem; }
main:focus { outline: none; }
h1 {
  font: normal clamp(2rem, 4vw, 3rem)/1.15 var(--serif);
  margin: 0 0 1rem; letter-spacing: -.035em;
}
h2 {
  font: normal 1.6rem/1.25 var(--serif); margin: 2.4rem 0 1rem;
  color: var(--tinta); border-bottom: 1px solid var(--linha); padding-bottom: .7rem;
}
h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; font-weight: 700; }
.pagina-interna > p, .artigo { max-width: 75ch; }
.pagina-interna > p:first-of-type { color: var(--suave); }
.migalha { color: var(--suave); font-size: .82rem; margin-bottom: .9rem; }
.migalha a { color: var(--suave); }
.grade {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  padding: 0; list-style: none;
}
.cartao {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: .25rem; padding: 1rem;
}
.cartao > a { display: block; text-decoration: none; }
.cartao:has(a:hover) { border-color: var(--realce); }
.cartao .n {
  font: 2rem/1.15 var(--serif); color: var(--realce);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.cartao .r {
  color: var(--suave); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .05em;
}

/* ⚠️ ``width: auto`` e não 100%: assim a tabela tem a largura do CONTEÚDO.
   A de item (12 colunas) continua ocupando tudo, e a de "quem larga" (duas)
   deixa de separar "Hellhound" de "40%" por 700px de vão. O ``min-width``
   impede que uma tabela de valores curtos vire uma tirinha. */
table.wiki {
  border-collapse: collapse; margin: .5rem 0 1.2rem;
  width: auto; min-width: min(30rem, 100%); max-width: 100%;
}
/* A lista de itens é a exceção: ela usa cada pixel. */
table.wiki[data-itens] { width: 100%; }
table.wiki th, table.wiki td {
  border-bottom: 1px solid var(--linha); padding: .42rem .6rem; text-align: left;
}
table.wiki th {
  color: var(--suave); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; border-bottom-width: 2px;
  white-space: nowrap;
}
/* ⚠️ Números de larguras diferentes desalinham a coluna e a tornam ilegível
   de relance — que é justamente o uso da tabela de itens. */
table.wiki td { font-variant-numeric: tabular-nums; }
table.wiki tbody tr:nth-child(even) { background: rgba(0, 0, 0, .022); }
table.wiki tbody tr:hover { background: var(--papel); }

/* --- Bloco estreito de rótulo/valor ----------------------------------------
   ⚠️ Substitui a tabela de duas colunas esticada a 960px, onde "vida" e "1000"
   ficavam separados por 700px de vão e o olho perdia a linha. Aqui a linha tem
   a largura do conteúdo, e dois blocos cabem lado a lado.                    */
.blocos {
  display: grid; gap: .9rem; margin: .6rem 0 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 22rem));
  align-items: start;
}
.bloco {
  background: var(--papel); border: 1px solid var(--linha); border-radius: .4rem;
  box-shadow: inset 1px 1px 0 var(--luz), inset -1px -1px 0 var(--sombra);
  padding: .2rem .8rem .4rem;
}
.bloco > .titulo {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--suave); font-weight: 700;
  padding: .5rem 0 .35rem; border-bottom: 1px solid var(--linha);
}
.bloco dl { margin: 0; display: grid; grid-template-columns: auto 1fr; }
.bloco dt {
  color: var(--suave); font-size: .88rem; padding: .28rem .8rem .28rem 0;
  border-bottom: 1px solid var(--linha);
}
.bloco dd {
  margin: 0; padding: .28rem 0; text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--linha);
}
.bloco dl > :nth-last-child(-n+2) { border-bottom: 0; }
/* Nota curta sob um bloco: explica o número sem virar parágrafo solto. */
.bloco-com-nota .nota {
  margin: .35rem .2rem 0; font-size: .78rem; max-width: 22rem; line-height: 1.45;
}

.chip {
  display: inline-block; background: var(--papel); border: 1px solid var(--linha);
  border-radius: 1rem; padding: .12rem .65rem; font-size: .85rem;
  box-shadow: inset 1px 1px 0 var(--luz), inset -1px -1px 0 var(--sombra);
}
a.chip:hover { border-color: var(--realce); text-decoration: none; }
details.spoiler {
  border: 1px dashed var(--linha); border-radius: .4rem;
  padding: .4rem .7rem; margin: .5rem 0; background: var(--papel);
}
details.spoiler > summary { cursor: pointer; color: var(--suave); font-size: .9rem; }
footer.rodape {
  max-width: 72rem; border-top: 1px solid var(--linha); margin: 0 auto;
  padding: 1.6rem 0 2rem; color: var(--suave); font-size: .7rem;
}
.rodape-marca { font: 1.25rem var(--serif); margin-right: 1rem; }
.rodape-lema { display: block; margin: .35rem 0 .8rem; font-size: .8rem; }
input.busca {
  width: 100%; padding: .55rem .8rem; font-size: 1rem;
  border: 1px solid var(--linha); border-radius: .4rem;
  background: var(--papel); color: var(--tinta);
}
.vazio { color: var(--suave); font-style: italic; }

/* --- Folhas de sprite ------------------------------------------------------
   A animação é background-position em steps(): o navegador só troca o
   deslocamento, sem decodificar nada por quadro. --d escolhe a LINHA (direção
   da criatura) e a animação percorre as COLUNAS (quadros). --n é a largura
   total da folha; --inicio e --passos delimitam o ciclo. Na caminhada normal,
   o quadro 0 é repouso: só aparece sem animação, nunca entre os passos.
   AnimateAlways conserva todos os quadros de sua animação contínua.        */
.spr {
  --f: 0; --d: 0; --n: 1; --inicio: 0; --dur: 500ms; --z: 2;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  width: calc(var(--cw) * var(--z));
  height: calc(var(--ch) * var(--z));
  background-size: calc(var(--cw) * var(--n) * var(--z))
                   calc(var(--ch) * var(--dirs, 1) * var(--z));
  background-position: calc(var(--f) * var(--cw) * var(--z) * -1)
                       calc(var(--d) * var(--ch) * var(--z) * -1);
  display: inline-block; vertical-align: middle;
}
.spr.anima {
  animation: spr-passos var(--dur) steps(var(--passos, var(--n))) infinite;
}
@keyframes spr-passos {
  from { background-position-x: calc(var(--inicio) * var(--cw) * var(--z) * -1); }
  to   { background-position-x: calc(var(--cw) * var(--n) * var(--z) * -1); }
}
/* ⚠️ Respeitar quem pediu menos movimento não é enfeite: o bestiário mostra
   dezenas de criaturas animadas ao mesmo tempo.                             */
@media (prefers-reduced-motion: reduce) {
  .spr.anima { animation: none; }
}
html.sem-animacao .spr.anima { animation: none; }
ul.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
ul.chips .cont { color: var(--suave); font-size: .8rem; }
ul.grade-itens {
  list-style: none; padding: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.item-cartao {
  display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem;
  background: var(--papel); border: 1px solid var(--linha); border-radius: .4rem;
  color: var(--tinta); min-height: 3rem;
}
.item-cartao:hover { border-color: var(--realce); text-decoration: none; }
.item-cartao .nome { font-size: .9rem; }
/* --- O retrato ---------------------------------------------------------------
   ⚠️ A sprite ficava solta no vazio, sem nada que a enquadrasse — parecia uma
   imagem quebrada em página em branco. A moldura afundada é a mesma que o 8.70
   usa na janela de inventário.

   ⚠️ O fundo é LISO (decisão do dono, 17/08/2026). A primeira versão tinha o
   quadriculado de transparência dos editores de imagem: ele mostra o recorte
   exato do sprite, mas compete com a arte — num ícone de 32px o xadrez tem
   quase o tamanho do desenho, e o olho vê o fundo antes do item.             */
.retrato { padding: .3rem 0 1rem; }
.moldura-arte {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem; border-radius: .4rem;
  background: var(--fundo);
  border: 1px solid var(--linha);
  box-shadow: inset -1px -1px 0 var(--luz), inset 1px 1px 0 var(--sombra);
}
blockquote.look {
  margin: 0 0 1.2rem; padding: .75rem 1rem; background: var(--papel);
  border: 1px solid var(--linha); border-left: 4px solid var(--realce);
  border-radius: 0 .4rem .4rem 0;
  box-shadow: inset -1px -1px 0 var(--luz);
  font-size: .98rem;
}
blockquote.look p { margin: .2rem 0; }

/* Tarja de raridade — o tier é o eixo que o servidor usa para durabilidade,
   loot e preço, e no design antigo era só mais uma linha de tabela. */
.tarja {
  display: inline-block; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .1rem .55rem; border-radius: .2rem; border: 1px solid currentColor;
  vertical-align: .15em;
}
.tarja.r-common { color: var(--suave); }
.tarja.r-uncommon { color: #3d7a3d; }
.tarja.r-semi_rare { color: #2f6f97; }
.tarja.r-rare { color: var(--realce); }
.tarja.r-very_rare { color: var(--raro); }
nav.paginacao { display: flex; gap: 1rem; align-items: center; margin: 1rem 0; }
ul.resultados { list-style: none; padding: 0; }
ul.resultados li { padding: .35rem 0; border-bottom: 1px solid var(--linha); }
ul.resultados .r { color: var(--suave); font-size: .85rem; }
#resultado-vivo ul { list-style: none; padding: 0; margin: .5rem 0; }
#resultado-vivo li { padding: .3rem 0; }
#resultado-vivo .r { color: var(--suave); font-size: .85rem; }
.artigo h2 { margin-top: 1.6rem; }
.artigo blockquote {
  margin: 1rem 0; padding: .6rem 1rem; background: var(--papel);
  border-left: 3px solid var(--aviso); border-radius: 0 .4rem .4rem 0;
}
.artigo pre {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: .4rem; padding: .7rem; overflow-x: auto;
}
.artigo .link-interno { color: var(--suave); }
td.al-right, th.al-right { text-align: right; }
td.al-center, th.al-center { text-align: center; }
.palavras code { font-size: 1.1rem; color: var(--realce); }
.direcoes { display: flex; gap: .3rem; margin-top: .5rem; }
/* A forma da área de uma magia: uma célula por quadrado do chão. Grade, e não
   texto pré-formatado, porque em fonte monoespaçada o caractere é mais alto
   que largo — e a onda sai esticada. É a proporção que faz a forma. */
/* ⚠️ Flex por LINHA, não ``grid``: o número de colunas muda de magia para
   magia, e ``grid-template-columns`` só sairia num ``style=""`` inline — que a
   CSP descarta em silêncio. */
.area-grade { display: flex; flex-direction: column; gap: 2px; margin: .6rem 0; }
.area-linha { display: flex; gap: 2px; }
.area-grade span {
  width: 14px; height: 14px; border-radius: 2px;
  background: var(--papel); border: 1px solid var(--linha);
}
.area-grade span.atinge { background: var(--realce); border-color: var(--realce); }
.area-grade span.voce { border-color: var(--texto); border-width: 2px; }
.area-legenda { color: var(--suave); font-size: .75rem; margin-top: -.2rem; }
.vitrine { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end; }
.vitrine figure { margin: 0; text-align: center; }
.vitrine figcaption { color: var(--suave); font-size: .75rem; margin-top: .3rem; }
button.pausa {
  background: var(--papel); color: var(--suave); cursor: pointer;
  border: 1px solid var(--linha); border-radius: .3rem;
  padding: .2rem .6rem; font-size: .8rem;
}

/* Lista detalhada de item: barra de filtro, cabeçalho clicável e a linha que
   o filtro do cliente esconde. ⚠️ Tudo aqui e nada no ColetorDeEstilos — o
   coletor emite um <style> por página cujo hash entra na CSP, e engordá-lo por
   causa de regra fixa seria pagar hash por algo que nunca muda. */
form.filtros {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  margin: .6rem 0 1.1rem; padding: .55rem .8rem; font-size: .85rem;
  color: var(--suave); background: var(--papel); border-radius: .4rem;
  border: 1px solid var(--linha);
  box-shadow: inset 1px 1px 0 var(--luz), inset -1px -1px 0 var(--sombra);
}
form.filtros select, form.filtros button {
  background: var(--fundo); color: var(--tinta); font: inherit;
  border: 1px solid var(--linha); border-radius: .25rem; padding: .2rem .4rem;
  box-shadow: inset 1px 1px 0 var(--sombra);
}
form.filtros button { cursor: pointer; color: var(--tinta); font-weight: 600; }
form.filtros button:hover { border-color: var(--realce); }
form.filtros a.chip { text-decoration: none; margin-left: auto; }
table.wiki thead a {
  text-decoration: none; color: var(--suave); display: inline-block;
}
table.wiki thead a:hover { color: var(--link); }
/* A coluna ordenada precisa se distinguir das outras onze. */
table.wiki thead a[data-desc] { white-space: nowrap; }
/* O UA já esconde [hidden], mas `tr` tem seletor de tipo e alguma folha de
   usuário poderia ganhar dele. Uma linha de seguro é mais barata que o bug. */
table.wiki tr[hidden] { display: none; }
table.wiki td .spr { margin: 0 auto; }
/* Montadores do exori e do exura: a recusa do jogo se distingue do resultado. */
p.recusa { color: var(--aviso); font-weight: 600; }

/* Capa: um atlas com peças do próprio jogo, sem imagens externas. */
.sobrancelha {
  margin: 0 0 .85rem; color: var(--realce); font-size: .63rem;
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem;
  align-items: center; padding: 1rem 0 3.5rem;
}
.hero-conteudo { min-width: 0; }
.hero h1 {
  font-size: clamp(2.8rem, 4.6vw, 4rem); line-height: 1.08; margin-bottom: 1.4rem;
}
.hero h1 span { display: block; }
.hero-descricao { color: var(--suave); max-width: 45ch; margin-bottom: 1.8rem; }
.hero-busca label {
  display: block; font-size: .75rem; font-weight: 600; margin-bottom: .45rem;
}
.hero-busca-campo {
  display: flex; padding: .3rem; background: var(--papel);
  border: 1px solid var(--linha); border-radius: .25rem;
  box-shadow: 0 3px 10px rgba(30, 45, 28, .04);
}
.hero-busca input.busca {
  min-width: 0; border: 0; background: transparent; font-size: .85rem;
}
.hero-busca button {
  border: 0; border-radius: .15rem; padding: .6rem 1rem;
  background: var(--barra); color: var(--barra-tinta); cursor: pointer;
  font: 600 .75rem system-ui, sans-serif;
}
.hero-acoes { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.1rem; }
.botao-primario, .botao-secundario {
  font-size: .75rem; font-weight: 600; padding: .3rem 0;
  border-bottom: 1px solid var(--linha);
}
.botao-primario::after, .botao-secundario::after { content: " ↗"; }
.hero-sem-arte { grid-template-columns: 1fr; max-width: 48rem; }
.hero-sem-arte h1 { max-width: 20ch; }
.hero-arte {
  position: relative; align-self: stretch; display: flex; flex-direction: column;
  padding: 1.1rem 1.3rem; color: #eee8d3; background: #1d3d30;
  border: 1px solid #49634a; border-radius: 3px;
  box-shadow: 8px 8px 0 -1px var(--fundo), 8px 8px 0 0 var(--linha);
}
.hero-arte::before {
  content: ""; position: absolute; inset: .45rem; border: 1px solid #4d6043;
  pointer-events: none;
}
.arte-cabecalho, .arte-rodape {
  position: relative; display: flex; justify-content: space-between;
  gap: .8rem; align-items: center;
}
.arte-cabecalho {
  font-size: .59rem; text-transform: uppercase; letter-spacing: .15em;
  padding-bottom: .9rem; border-bottom: 1px solid #4d6043;
}
.arte-selo { color: #d9bc79; font: italic .95rem var(--serif); text-transform: none; }
.arte-palco {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  flex: 1; gap: 1.2rem .5rem; align-items: end; padding: 2rem 0 1.5rem;
  background: radial-gradient(ellipse at 50% 35%, #3c5940, transparent 70%);
}
.arte-peca { display: flex; justify-content: center; min-width: 0; }
.arte-peca figure { margin: 0; text-align: center; }
.arte-peca figcaption {
  margin-top: .65rem; color: #c8d1b8; font: italic .7rem var(--serif);
}
.arte-peca .spr { filter: drop-shadow(0 5px 3px rgba(0, 0, 0, .35)); }
.arte-criatura { order: -1; grid-column: span 2; padding: .6rem 0 1rem; }
.arte-criatura figure { width: 100%; }
.arte-criatura figcaption { color: #d9bc79; font-size: .85rem; }
.arte-item { border-top: 1px solid #4d6043; padding-top: 1.2rem; }
.arte-rodape {
  border-top: 1px solid #4d6043; padding-top: .8rem;
  font-size: .6rem; color: #c8d1b8;
}
.hero-arte button.pausa {
  flex-shrink: 0; color: #d9bc79; background: transparent;
  border-color: #657553; font-size: .6rem; padding: .15rem .35rem;
}
.hero-arte button:focus-visible { outline-color: #d9bc79; }
.capa section > h2 { margin-top: 0; border-bottom: 0; padding: 0; }
.inicio-exploracao { padding: 2.5rem 0; border-top: 1px solid var(--linha); }
.exploracao { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.exploracao-cartao {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem 1.1rem;
  color: var(--tinta); background: var(--papel); border: 1px solid var(--linha);
  border-top: 2px solid var(--realce); border-radius: 2px;
}
.exploracao-cartao:hover { text-decoration: none; border-color: var(--realce); }
.exploracao-arte { flex-shrink: 0; padding-top: .3rem; }
.exploracao-arte .spr { --z: 1.5; }
.exploracao-texto { min-width: 0; }
.exploracao-texto h3 { font: 1.25rem/1.25 var(--serif); margin: 0 0 .7rem; }
.exploracao-texto p { font-size: .78rem; color: var(--suave); margin: 0 0 1rem; }
.exploracao-link { font-size: .7rem; font-weight: 600; color: var(--realce); }
.indice-mundo {
  padding: 2rem 0; border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.indice-mundo .grade {
  grid-template-columns: repeat(7, 1fr); gap: 0; margin: 1.5rem 0 0;
}
.indice-mundo .cartao {
  padding: .2rem 1rem; background: transparent; border: 0; border-radius: 0;
  border-left: 1px solid var(--linha);
}
.indice-mundo .cartao:first-child { padding-left: 0; border-left: 0; }
.indice-mundo .cartao .r {
  font-size: .57rem; letter-spacing: .05em; margin-top: .4rem;
}
.indice-mundo .cartao .n { font-size: 1.8rem; }
.indice-mundo .cartao a:hover .r { text-decoration: underline; }
.inicio-guias { padding-top: 2.5rem; }
.guias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.guia { position: relative; padding-left: 2.8rem; }
.guia-numero {
  position: absolute; top: .2rem; left: 0; color: var(--suave);
  font: italic 1.7rem var(--serif);
}
.guia h3 { font: 1.2rem var(--serif); margin: .4rem 0 .8rem; }
.guia p { color: var(--suave); font-size: .8rem; }
.guia-link { display: block; width: fit-content; font-size: .75rem; margin-top: .5rem; }
.hero #resultado-vivo:not(:empty) {
  border: 1px solid var(--linha); background: var(--papel);
  padding: .5rem 1rem; margin-top: .5rem; max-height: 18rem; overflow-y: auto;
}
.hero #resultado-vivo li { font-size: .8rem; border-bottom: 1px solid var(--linha); }
.hero #resultado-vivo li:last-child { border: 0; }

/* Tabelas largas rolam dentro da consulta, sem alargar a página no celular. */
.tabela-rolagem { max-width: 100%; overflow-x: auto; margin-bottom: 1.2rem; }
.tabela-rolagem table { margin-bottom: 0; }
@media (max-width: 65rem) {
  .hero { gap: 2rem; }
  .exploracao-cartao { flex-direction: column; }
  .indice-mundo .grade { grid-template-columns: repeat(4, 1fr); gap: 1.5rem 0; }
  .indice-mundo .cartao:nth-child(5) { padding-left: 0; border-left: 0; }
  header.topo nav { gap: 0 1.3rem; }
  footer.rodape { margin: 0 2rem; }
}
@media (max-width: 48rem) {
  header.topo .faixa { padding: 1rem 1.25rem; }
  header.topo .faixa-menu { padding-top: 0; padding-bottom: 0; }
  header.topo nav { gap: 0 1.2rem; }
  header.topo nav a { padding: .6rem 0; }
  header.topo nav a:last-child { margin-left: 0; }
  .topo-lema { display: none; }
  main { padding: 2rem 1.25rem 3rem; }
  .hero { grid-template-columns: 1fr; padding: 0 0 3rem; gap: 2rem; }
  .hero h1 { font-size: clamp(2.6rem, 8vw, 3.8rem); }
  .hero-arte { min-height: 23rem; }
  .hero-descricao { max-width: 100%; }
  .exploracao { grid-template-columns: 1fr; }
  .exploracao-cartao { flex-direction: row; padding: 1.25rem; }
  .exploracao-arte { width: 4rem; text-align: center; }
  .exploracao-arte .spr { --z: 1; }
  .guias { grid-template-columns: 1fr; gap: 1.5rem; }
  .indice-mundo .grade { grid-template-columns: repeat(2, 1fr); }
  .indice-mundo .cartao:nth-child(odd) { padding-left: 0; border-left: 0; }
  .blocos { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
  footer.rodape { margin: 0 1.25rem; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: no-preference) {
  .exploracao-cartao, .item-cartao { transition: border-color .15s; }
}
@media (max-width: 24rem) {
  .hero-arte { padding: 1rem; min-height: 21rem; }
  .arte-peca .spr { --z: 1.5; }
  .arte-rodape { flex-wrap: wrap; }
}