/* Seja Guia do Vale (guia-do-vale.html, 22/10/2026). Carregada depois de site/cascabel.css e site/paginas.css, que trazem
   as cores, as fontes, o cabeçalho, o rodapé e as listas das Regras do vale. Aqui só a capa com a arte do vale e dois
   acabamentos. A arte (site/arte/) é ilustração do Higgsfield, não captura do jogo: veja site/arte/manifesto.json. */
.guia-vale .guia-capa { max-width: none; margin-bottom: clamp(44px, 6vw, 72px); }
.guia-capa-imagem {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid var(--linha); border-radius: 6px;
  background: var(--painel);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .42);
}
.guia-capa-imagem img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 686; object-fit: cover; }
/* O pé da arte escurece até o couro da página, para o título entrar por cima sem caixa. */
.guia-capa-imagem::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
  background: linear-gradient(0deg, var(--couro) 0%, rgba(22, 17, 13, .72) 38%, rgba(22, 17, 13, 0) 100%);
}
.guia-capa-texto { position: relative; max-width: 900px; margin-top: clamp(-150px, -9vw, -72px); padding: 0 clamp(18px, 3.4vw, 44px); }
.site-pagina main .guia-capa-texto h1 { margin: 4px 0 clamp(26px, 3vw, 40px); text-shadow: 0 3px 0 rgba(0, 0, 0, .55), 0 0 32px rgba(0, 0, 0, .55); }
.guia-capa-texto .intro { color: var(--texto); }

/* "O que ganha": um parágrafo só, com o filete de latão das Regras. */
.guia-vale .guia-ganha { max-width: 860px; padding-left: 22px; border-left: 3px solid var(--latao); }
.guia-vale .guia-ganha p { margin: 0; }
.guia-vale .guia-dados { max-width: 860px; }
.guia-vale #candidatar .acoes { margin-top: 18px; }
/* O número do passo fica no meio do círculo (o parágrafo justificado das páginas puxa a última linha para o começo). */
.guia-vale .regras-passos li::before { text-align-last: center; }

@media (max-width: 720px) {
  /* No celular a arte encosta no cabeçalho e vai de uma borda à outra, sem moldura: o pé dela se funde ao couro. */
  .site-pagina > main.guia-vale { padding-top: 0; }
  .guia-capa-imagem { margin: 0 calc(-1 * var(--respiro)); border: 0; border-radius: 0; box-shadow: none; }
  .guia-capa-imagem img { aspect-ratio: 4 / 3; }
  .guia-capa-texto { margin-top: -56px; padding: 0; }
  .guia-vale #candidatar .acoes .botao { flex: 1 1 100%; justify-content: center; }
}