/* Guia do Viajante — usa as cores e fontes de site.css */
.pagina-guia { background: radial-gradient(1200px 600px at 80% -10%, #1a2040 0%, var(--fundo) 60%) fixed, var(--fundo); }
.pagina-guia .topo .envoltorio { gap: 18px; }
.guia-nome { font-family: var(--titulo); color: var(--ouro-2); text-decoration: none; font-size: 1.05rem; white-space: nowrap; }
.busca-topo { position: relative; flex: 1; max-width: 420px; margin-left: auto; }
.busca input {
  width: 100%; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linha); background: var(--fundo-2);
  color: var(--texto); font: 500 .95rem var(--corpo); outline: none;
}
.busca input:focus { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(232, 180, 74, .2); }
.sugestoes {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; background: var(--painel);
  border: 1px solid var(--linha); border-radius: 12px; box-shadow: var(--sombra); overflow: hidden;
}
.sugestoes a { display: flex; gap: 10px; align-items: center; padding: 8px 12px; color: var(--texto); text-decoration: none; }
.sugestoes a:hover, .sugestoes a.marcado { background: var(--painel-2); }
.sugestoes img, .sugestoes a > span:first-child { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; background: var(--fundo-2); flex: none; display: grid; place-items: center; }
.sugestoes b { display: block; font-size: .92rem; }
.sugestoes small { color: var(--texto-2); font-size: .78rem; }
.sugestoes .sug-todos { justify-content: center; color: var(--ouro-2); font-weight: 600; font-size: .85rem; border-top: 1px solid var(--linha); }
.sug-vazio { padding: 12px; color: var(--texto-2); font-size: .9rem; }

/* ---------- estrutura ---------- */
.guia { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding-top: 104px; padding-bottom: 48px; align-items: start; }
.lateral { position: sticky; top: 100px; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral a {
  display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; color: var(--texto-2);
  text-decoration: none; font-weight: 500; font-size: .95rem;
}
.lateral a:hover { background: var(--painel); color: var(--texto); }
.lateral a.ativo { background: linear-gradient(90deg, rgba(232, 180, 74, .18), transparent); color: var(--ouro-2); box-shadow: inset 3px 0 0 var(--ouro); }
.lateral a span { width: 22px; text-align: center; }
#conteudo { min-width: 0; outline: none; }

/* ---------- capa ---------- */
.guia-capa { padding: 34px 0 10px; }
.guia-capa h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--ouro-2); max-width: 760px; }
.sobre { display: inline-block; color: var(--ouro); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; margin-bottom: 10px; }
.busca-grande { display: flex; gap: 10px; margin: 22px 0 12px; max-width: 680px; }
.busca-grande input { padding: 15px 20px; font-size: 1.05rem; }
.atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.atalhos a { padding: 5px 12px; border-radius: 999px; background: var(--painel); border: 1px solid var(--linha); color: var(--texto-2); text-decoration: none; font-size: .85rem; }
.atalhos a:hover { color: var(--ouro-2); border-color: var(--ouro); }
.guia-h2 { font-size: 1.35rem; margin: 40px 0 16px; color: var(--texto); }

/* ---------- cartões ---------- */
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.grade-cartoes.mini { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cartao {
  --cor: var(--ouro); display: flex; gap: 14px; padding: 14px; border-radius: var(--raio); background: var(--painel);
  border: 1px solid var(--linha); text-decoration: none; color: var(--texto); transition: transform .15s, border-color .15s, background .15s;
}
.cartao:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cor) 70%, transparent); background: var(--painel-2); }
.cartao-img { flex: none; width: 78px; height: 96px; border-radius: 10px; overflow: hidden; background: #d8d6d2; }
.cartao-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.cartao-img.icone { background: radial-gradient(circle, color-mix(in srgb, var(--cor) 35%, #1e2337), #10131f); }
.cartao-img.icone img { object-fit: contain; padding: 8px; }
.cartao-img.vazio { display: grid; place-items: center; font-size: 2rem; background: var(--fundo-2); }
.cartao.pequeno .cartao-img { width: 52px; height: 60px; }
.cartao-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cartao-cat { color: var(--ouro); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.cartao-cat em { color: var(--texto-2); font-style: normal; }
.cartao b { font-family: var(--titulo); font-size: 1.08rem; line-height: 1.2; }
.cartao-sub { color: var(--texto-2); font-size: .82rem; }
.cartao-resumo { color: var(--texto-2); font-size: .86rem; line-height: 1.45; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.grade-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cat {
  display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: var(--raio); background: var(--painel);
  border: 1px solid var(--linha); color: var(--texto); text-decoration: none; transition: border-color .15s, transform .15s;
}
.cat:hover { border-color: var(--ouro); transform: translateY(-2px); }
.cat b { font-family: var(--titulo); font-size: 1.1rem; color: var(--ouro-2); }
.cat span:not(.cat-ico) { color: var(--texto-2); font-size: .86rem; line-height: 1.45; }
.cat small { color: var(--texto-2); opacity: .7; margin-top: auto; padding-top: 6px; }
.cat-ico { font-size: 1.7rem; }
.cat-ico.grande { font-size: 2.6rem; }
.cat-cabeca { display: flex; gap: 16px; align-items: center; margin: 10px 0 24px; }
.cat-cabeca h1 { color: var(--ouro-2); margin: 0; font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
.cat-cabeca p { margin: 4px 0 0; }

/* ---------- trilha ---------- */
.trilha { font-size: .86rem; color: var(--texto-2); margin: 6px 0 14px; }
.trilha a { color: var(--texto-2); text-decoration: none; }
.trilha a:hover { color: var(--ouro-2); }
.trilha span { margin: 0 4px; }
.trilha [aria-current] { color: var(--texto); margin: 0; }

/* ---------- artigo ---------- */
.artigo { --cor: var(--ouro); }
.artigo-cabeca h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--ouro-2); margin: 6px 0 4px; }
.artigo-sub { color: color-mix(in srgb, var(--cor) 75%, var(--texto)); font-weight: 600; margin: 0 0 8px; }
.artigo-resumo { font-size: 1.08rem; color: var(--texto); max-width: 760px; }
.selo-breve { display: inline-block; padding: 2px 10px; border-radius: 999px; background: rgba(74, 163, 255, .15); color: #8cc6ff; border: 1px solid rgba(74, 163, 255, .4); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; vertical-align: middle; }
.artigo-corpo { display: flex; flex-direction: row-reverse; gap: 28px; align-items: flex-start; margin-top: 12px; }
.ficha {
  flex: none; width: 290px; position: sticky; top: 100px; background: var(--painel); border: 1px solid var(--linha);
  border-top: 3px solid var(--cor); border-radius: var(--raio); overflow: hidden;
}
.ficha-img { background: #d8d6d2; }
.ficha-img img { width: 100%; max-height: 380px; object-fit: contain; }
.ficha-img.icone { background: radial-gradient(circle, color-mix(in srgb, var(--cor) 35%, #1e2337), #10131f); padding: 26px; display: grid; place-items: center; }
.ficha-img.icone img { width: 128px; height: 128px; }
.ficha-dados { margin: 0; padding: 6px 16px 12px; display: grid; grid-template-columns: auto 1fr; gap: 0 12px; font-size: .9rem; }
.ficha-dados dt, .ficha-dados dd { padding: 8px 0; border-bottom: 1px solid var(--linha); margin: 0; }
.ficha-dados dt { color: var(--texto-2); }
.ficha-dados dd { text-align: right; font-weight: 600; }
.ficha-dados dt:last-of-type, .ficha-dados dd:last-of-type { border-bottom: 0; }

.texto-guia { flex: 1; min-width: 0; }
.texto-guia h3 { font-size: 1.2rem; color: var(--ouro-2); margin: 28px 0 10px; }
.texto-guia h3:first-child { margin-top: 0; }
.texto-guia ul, .texto-guia ol { padding-left: 1.3em; margin: 0 0 1em; }
.texto-guia li { margin-bottom: .45em; }
.texto-guia a { text-decoration: none; border-bottom: 1px dotted rgba(255, 210, 122, .5); }
.texto-guia a:hover { border-bottom-style: solid; }
.texto-guia figure { margin: 18px 0; }
.texto-guia figure img { border-radius: 12px; border: 1px solid var(--linha); width: 100%; }
.texto-guia figcaption { color: var(--texto-2); font-size: .85rem; margin-top: 6px; }
.texto-guia code { background: var(--fundo-2); border: 1px solid var(--linha); padding: 1px 6px; border-radius: 6px; font-size: .88em; }
.texto-guia blockquote {
  margin: 0 0 20px; padding: 14px 18px; border-left: 3px solid var(--cor); background: var(--painel);
  border-radius: 0 12px 12px 0; font-style: italic; color: var(--texto);
}
.texto-guia blockquote cite { display: block; margin-top: 6px; font-style: normal; color: var(--texto-2); font-size: .85rem; }
.texto-guia blockquote cite::before { content: '— '; }
.passos { counter-reset: p; list-style: none; padding-left: 0 !important; }
.passos li { counter-increment: p; position: relative; padding-left: 44px; margin-bottom: 14px; }
.passos li::before {
  content: counter(p); position: absolute; left: 0; top: -1px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: linear-gradient(180deg, var(--ouro-2), var(--bronze)); color: #1b1203; font-weight: 700; font-size: .9rem;
}
.dica { padding: 14px 18px; border-radius: 12px; background: rgba(95, 211, 141, .08); border: 1px solid rgba(95, 211, 141, .35); margin: 18px 0; }
.aviso-breve { padding: 12px 16px; border-radius: 12px; background: rgba(74, 163, 255, .08); border: 1px solid rgba(74, 163, 255, .35); color: #bfdcff; }
.dois { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---------- tabelas ---------- */
.rolar { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: .92rem; background: var(--painel); border-radius: 12px; overflow: hidden; }
.tabela th { text-align: left; background: var(--painel-2); color: var(--ouro-2); font-weight: 600; padding: 10px 12px; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.tabela td { padding: 9px 12px; border-top: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:hover td { background: rgba(255, 255, 255, .02); }
.tabela.num td, .tabela.num th { text-align: center; }
.tabela.num td:first-child, .tabela.num th:first-child { text-align: left; }
.tabela small { display: block; color: var(--texto-2); font-size: .8rem; }
.tabela .ico { width: 44px; height: 44px; object-fit: contain; }
.pecas td:first-child { width: 56px; }
.rar { color: var(--c); font-weight: 700; }

.rodape-guia { border-top: 1px solid var(--linha); padding: 18px 0; color: var(--texto-2); font-size: .85rem; }
.rodape-guia .envoltorio { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rodape-guia a { color: var(--texto-2); }

/* ---------- celular ---------- */
@media (max-width: 960px) {
  .guia { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: calc(var(--topo, 80px) + 54px); }
  .lateral { min-width: 0; }
  .ficha { display: grid; grid-template-columns: 130px 1fr; }
  .ficha-img, .ficha-img.icone { height: 100%; padding: 10px; display: grid; place-items: center; }
  .ficha-img img { max-height: 220px; }
  .ficha-img.icone img { width: 96px; height: 96px; }
  .ficha-dados { padding: 4px 14px 8px; font-size: .86rem; }
  .lateral { position: fixed; top: var(--topo, 80px); left: 0; right: 0; z-index: 40; padding: 8px 16px; background: rgba(11, 13, 20, .95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linha); }
  .lateral nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .lateral nav::-webkit-scrollbar { display: none; }
  .lateral a { flex: none; padding: 7px 12px; border: 1px solid var(--linha); border-radius: 999px; font-size: .86rem; }
  .lateral a.ativo { box-shadow: none; border-color: var(--ouro); }
  .artigo-corpo { flex-direction: column; }
  .ficha { position: static; width: 100%; }
}
@media (max-width: 760px) {
  .pagina-guia .topo .envoltorio { flex-wrap: wrap; height: auto; padding: 8px 0 10px; gap: 8px 10px; }
  .pagina-guia .topo .marca img { height: 44px; }
  .guia-nome { font-size: .9rem; }
  .guia-ranking { display: none; }
  .busca-topo { order: 5; flex-basis: 100%; max-width: none; }
  .pagina-guia .topo .acoes { margin-left: auto; }
  .busca-grande { flex-direction: column; }
  .dois { grid-template-columns: 1fr; }
  .tabela { font-size: .84rem; }
  .tabela td, .tabela th { padding: 8px; }
}