:root {
  --tinta: #3b2a1a;
  --tinta-suave: #6b4e2e;
  --pergaminho: #f1e4c3;
  --pergaminho-escuro: #e3d0a4;
  --borda: #c9a76a;
  --vinho: #7a1c12;
  --ouro: #e8c26a;
  --mata: #2e5b2e;
  --fundo: #140c04;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
}
a { color: var(--vinho); }
.topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: rgba(20, 12, 4, 0.92); position: sticky; top: 0; z-index: 5;
  border-bottom: 1px solid rgba(201, 167, 106, 0.4);
}
.topo a { color: #f4e8c8; text-decoration: none; margin-left: 16px; font-size: 15px; }
.topo .marca { font-weight: bold; letter-spacing: 3px; margin-left: 0; }
.heroi {
  min-height: 78vh; display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(rgba(10, 6, 2, 0.35), rgba(10, 6, 2, 0.75)), url("img/keyart.jpg") center / cover no-repeat;
  color: #f4e8c8; padding: 48px 20px;
}
.heroi h1 { font-size: clamp(40px, 8vw, 84px); letter-spacing: 8px; margin: 0; text-shadow: 0 3px 12px #000; }
.heroi .sub { font-size: clamp(18px, 3vw, 24px); font-style: italic; margin: 6px 0 24px; text-shadow: 0 2px 8px #000; }
.botoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.botao {
  display: inline-block; background: var(--vinho); color: #fff4dc; border: 2px solid var(--ouro); border-radius: 10px;
  padding: 12px 22px; font-weight: bold; text-decoration: none; font-size: 17px;
}
.botao.claro { background: rgba(241, 228, 195, 0.95); color: var(--tinta); border-color: var(--borda); }
.faixa {
  margin: 28px auto 0; max-width: 560px; background: rgba(122, 28, 18, 0.92); border: 2px solid var(--ouro);
  border-radius: 12px; padding: 14px 18px; color: #fff4dc;
}
.faixa .novo { color: #ffd54f; letter-spacing: 3px; font-size: 13px; font-weight: bold; }
.faixa s { color: #d9b8a0; }
.faixa b { color: #ffd54f; }
main { background: var(--pergaminho); }
section { max-width: 1040px; margin: 0 auto; padding: 56px 20px; }
h2 { color: var(--vinho); font-size: 30px; margin-top: 0; }
h3 { color: var(--tinta); margin-bottom: 4px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.cartao { background: var(--pergaminho-escuro); border: 1px solid var(--borda); border-radius: 12px; padding: 18px; }
.cartao p { margin: 6px 0 0; color: var(--tinta-suave); }
.telas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.telas img, .predios { width: 100%; border-radius: 10px; border: 2px solid var(--borda); display: block; }
.aviso { background: #fff8e8; border-left: 4px solid var(--vinho); padding: 12px 16px; border-radius: 6px; }
.documento { max-width: 820px; }
.documento h2 { margin-top: 36px; }
.documento li { margin-bottom: 6px; }
.rodape { background: var(--fundo); color: #d9c8a4; text-align: center; padding: 32px 20px; font-size: 14px; }
.rodape img { height: 44px; margin-bottom: 8px; background: #f7f5ef; border-radius: 8px; padding: 6px 10px; }
.rodape a { color: #f4e8c8; margin: 0 8px; }
@media (max-width: 600px) {
  .topo { flex-wrap: wrap; }
  .topo a { margin: 4px 10px 4px 0; font-size: 14px; }
  section { padding: 40px 16px; }
}