/* Estilos das páginas públicas do XWK (servidos em /estatico/xwk.css).
   Visual limpo, estilo Apple: fundo claro, tipografia do sistema, sem sombras fortes.
   Todos os valores vêm dos tokens de design da spec 002; nada de cor solta no meio das regras.
   Responsivo a partir de 360 px; botões têm no mínimo 44 px de altura (alvo de toque). */

:root {
  /* Fundo e superfícies */
  --cor-fundo: #ffffff;
  --cor-superficie: #f5f5f7;
  /* Texto */
  --cor-texto: #1d1d1f;
  --cor-texto-secundario: #6e6e73;
  /* Ação e linhas */
  --cor-acao: #0066cc;
  --cor-linha: #e8e8ed;

  /* Tipografia */
  --fonte: Inter, -apple-system, "SF Pro Text", system-ui, sans-serif;

  /* Raios e medidas */
  --raio: 16px;
  --raio-menor: 14px;
  --altura-botao: 44px;
  --largura-conteudo: 640px;
  /* Ficha e plataforma usam a largura do mockup (PaginaPublica.dc.html). */
  --largura-larga: 1120px;
  --espaco: 24px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Marca no topo: só o nome, discreto, levando de volta para a home. */
.marca {
  max-width: var(--largura-larga);
  margin: 0 auto;
  padding: var(--espaco);
}

.marca-nome {
  color: var(--cor-texto);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
}

/* Conteúdo centralizado; o padding lateral encolhe em telas de 360 px. */
.conteudo {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--espaco) var(--espaco) 64px;
}

/* Ficha e plataforma ocupam a largura larga, como no mockup. */
.conteudo.largura-larga {
  max-width: var(--largura-larga);
}

.titulo {
  margin: 0 0 12px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.subtitulo {
  margin: 0 0 28px;
  color: var(--cor-texto-secundario);
  font-size: 17px;
}

/* Trilha da ficha (plataformas do jogo), em texto pequeno e discreto. */
.trilha {
  margin: 0 0 20px;
  color: var(--cor-texto-secundario);
  font-size: 13px;
}

.trilha a {
  color: var(--cor-texto-secundario);
}

/* Campo de busca: formulário GET para /busca, sem JavaScript. */
.busca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 16px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
  /* min-height garante o alvo de toque mesmo em tela pequena. */
  min-height: var(--altura-botao);
}

.busca-campo {
  flex: 1 1 auto;
  min-width: 0;
  height: calc(var(--altura-botao) - 12px);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 17px;
  outline: none;
}

.busca-campo::placeholder {
  color: var(--cor-texto-secundario);
}

/* Botão de enviar a busca, dentro do campo. */
.busca-acao {
  flex: 0 0 auto;
  min-height: calc(var(--altura-botao) - 12px);
  padding: 0 14px;
  background: var(--cor-acao);
  border: 0;
  border-radius: var(--raio-menor);
  color: var(--cor-fundo);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Botão principal; desabilitado quando a ação ainda não existe (Onda 3). */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-botao);
  padding: 0 18px;
  background: var(--cor-acao);
  border: 0;
  border-radius: var(--raio-menor);
  color: var(--cor-fundo);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.botao:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Botão de navegação (anterior/próxima) na listagem da plataforma. */
.botao-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-botao);
  padding: 0 18px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-menor);
  color: var(--cor-texto);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* Ação da ficha: botão desabilitado e a nota "Em breve" ao lado. */
.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 32px;
}

.nota {
  color: var(--cor-texto-secundario);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Seções e rótulos em caixa alta, como no mockup. */
.secao {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 32px;
}

.rotulo {
  color: var(--cor-texto-secundario);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.grupo {
  padding: 16px 20px;
  background: var(--cor-superficie);
  border-radius: var(--raio);
}

.grupo-titulo {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.grupo-titulo a {
  color: var(--cor-texto);
}

.lista-edicoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.edicao {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-linha);
  border-radius: 20px;
  font-size: 14px;
}

.edicao-nome {
  font-weight: 600;
}

.edicao-regiao {
  color: var(--cor-texto-secundario);
  font-size: 13px;
}

/* Crédito da fonte do dado, no fim da ficha. */
.credito {
  margin: 0;
  color: var(--cor-texto-secundario);
  font-size: 13px;
}

/* Lista de jogos da plataforma e de resultados da busca. */
.lista-jogos,
.lista-busca {
  margin: 16px 0 24px;
  padding: 0;
  list-style: none;
}

.lista-jogo,
.resultado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  min-height: 60px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cor-linha);
}

.lista-jogo a,
.resultado a {
  color: var(--cor-acao);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

/* Informação secundária (ano ou plataforma) ao lado do título. */
.meta {
  color: var(--cor-texto-secundario);
  font-size: 13px;
}

.paginacao {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* Selo de loja verificada e resumo da página da loja (spec 034). */
.selo {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 12px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: 999px;
  color: var(--cor-texto-secundario);
  font-size: 13px;
  font-weight: 600;
}

.descricao-loja {
  max-width: 720px;
  margin: 0 0 20px;
}

.loja-resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0 0 32px;
  padding: 16px 20px;
  background: var(--cor-superficie);
  border-radius: var(--raio);
}

.nota-media,
.avaliacao-nota {
  font-weight: 600;
}

.link-site {
  color: var(--cor-acao);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* Filtro da lista de lojas e a própria lista. */
.filtro {
  margin: 0 0 20px;
}

.filtro-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.filtro-campo {
  width: 88px;
  min-height: var(--altura-botao);
  padding: 0 12px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-menor);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: 17px;
  text-transform: uppercase;
}

.lista-lojas,
.lista-anuncios,
.lista-avaliacoes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.loja-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  min-height: 60px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cor-linha);
}

.loja-nome {
  color: var(--cor-acao);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

/* Anúncio público: foto opcional, loja/edição, preço e condição. */
.lista-anuncios {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.anuncio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio);
}

.anuncio-foto {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: cover;
  background: var(--cor-fundo);
  border-radius: var(--raio-menor);
}

.anuncio-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.anuncio-titulo {
  font-weight: 600;
}

.preco {
  font-size: 17px;
  font-weight: 600;
}

/* Bloco "Quer comprar?" (spec 041): a compra acontece só no app. */
.compra-app {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-menor);
}

.anuncio .compra-app {
  flex-basis: 100%;
}

.compra-app-titulo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.compra-app-texto {
  margin: 0;
  color: var(--cor-texto-secundario);
  font-size: 15px;
}

.compra-app-lojas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.compra-app-fim {
  margin-top: 4px;
}

/* Avaliações públicas: nota, comentário e resposta da loja, sem comprador. */
.avaliacao {
  padding: 14px 0;
  border-bottom: 1px solid var(--cor-linha);
}

.avaliacao-texto {
  margin: 4px 0 0;
}

.resposta {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--cor-superficie);
  border-radius: var(--raio-menor);
}

.resposta p {
  margin: 4px 0 0;
}

@media (max-width: 400px) {
  .conteudo {
    padding: 16px 16px 48px;
  }

  .marca {
    padding: 16px;
  }

  .titulo {
    font-size: 28px;
  }
}