@font-face {
  font-family: "Protest Revolution";
  src: url("fonte/ProtestRevolution.woff2") format("woff2");
  font-display: swap;
}

:root {
  --preto: #050404;
  --painel: #120c0c;
  --linha: #3a1416;
  --vermelho: #e10a14;
  --vermelho-escuro: #a80a12;
  --creme: #f5e8c8;
  --texto: #e8e0d0;
  --apagado: #b8ad98;
  --pincel: "Protest Revolution", "Segoe Script", cursive;
  --sistema: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--preto); color: var(--texto); font: 400 1.0625rem/1.6 var(--sistema); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--creme); }
code { font-family: Consolas, "Courier New", monospace; font-size: .92em; color: var(--creme); background: #241414; padding: .08em .35em; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 400; }
h1, h2 { font-family: var(--pincel); word-spacing: .14em; }
h3 { font: 700 1.2rem/1.3 var(--sistema); color: var(--creme); }

.pular { position: absolute; left: -999px; }
.pular:focus { left: 8px; top: 8px; z-index: 30; background: var(--creme); color: #000; padding: 8px 12px; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; height: 52px; padding: 0 clamp(14px, 3vw, 32px); background: rgba(5, 4, 4, .94); border-bottom: 1px solid var(--linha); }
.marca { display: flex; align-items: center; gap: 8px; font: 1.35rem var(--pincel); color: #fff; text-decoration: none; }
.topo nav { display: flex; gap: 20px; margin-left: auto; }
.topo nav a { color: var(--texto); font-size: .92rem; text-decoration: none; }
.topo nav a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--vermelho); text-underline-offset: 5px; }
.topo-baixar { padding: 5px 14px; background: var(--vermelho); color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none; }
.topo-baixar:hover { background: #f51f29; }

/* Hero */
.hero { display: flex; flex-direction: column; min-height: calc(100svh - 52px); background: #000; }
.hero picture { flex: 1 1 0; min-height: 0; display: flex; position: relative; }
.hero picture::after { content: ""; position: absolute; inset: auto 0 0; height: 170px; background: linear-gradient(transparent, #000 calc(100% - 56px)); }
/* De fora a fora, ancorada no alto para a cabeça e a lua não cortarem em telas largas. */
.hero picture img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; object-position: 50% 12%; }
/* O texto sobe sobre o fim da arte, já escurecido, para a imagem ganhar altura sem tirar o botão da primeira tela. */
.hero-texto { flex: none; position: relative; margin-top: -56px; padding: 0 20px 18px; text-align: center; }
.chapeu { margin: 0; color: var(--creme); font-weight: 700; font-size: clamp(.9rem, 2.4vw, 1.15rem); letter-spacing: .04em; }
h1 { margin: 2px 0 12px; color: #fff; font-size: clamp(2.5rem, 7vw, 3.8rem); }
.acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 8px 24px; background: var(--vermelho); border: 2px solid var(--vermelho); color: #fff; font-weight: 800; font-size: 1.05rem; text-decoration: none; transition: background .15s, border-color .15s; }
.botao:hover { background: #f51f29; border-color: #f51f29; }
.botao small { font-weight: 500; font-size: .85rem; opacity: .9; }
.botao-linha { background: transparent; border-color: var(--creme); color: var(--creme); }
.botao-linha:hover { background: var(--creme); border-color: var(--creme); color: #000; }
.botao-grande { min-height: 60px; padding: 12px 40px; font-size: 1.25rem; }

/* Faixa do cupom: mesmo desenho da faixa das telas de carregamento */
.cupom { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 28px; padding: 16px 20px; background: #000; border-top: 3px solid var(--vermelho); border-bottom: 1px solid var(--linha); text-align: center; }
.cupom p { margin: 0; color: var(--texto); }
.cupom-codigo { font-weight: 800; font-size: clamp(1.3rem, 4vw, 1.75rem); line-height: 1.25; letter-spacing: .02em; color: #fff !important; text-shadow: 0 0 2px var(--vermelho), 1px 1px 0 var(--vermelho-escuro); }
.cupom code { font: inherit; background: none; padding: 0; color: #fff; user-select: all; }
.copiar { min-height: 44px; min-width: 104px; padding: 6px 18px; background: transparent; border: 2px solid var(--vermelho); color: #fff; font: 700 1rem var(--sistema); cursor: pointer; }
.copiar:hover { background: var(--vermelho); }
.copiar.copiado { background: var(--creme); border-color: var(--creme); color: #000; }

/* Seções */
.secao { max-width: 1120px; margin: 0 auto; padding: clamp(48px, 7vw, 84px) clamp(16px, 4vw, 32px) 0; }
.secao > h2 { margin-bottom: 28px; color: #fff; font-size: clamp(2.1rem, 5vw, 3.1rem); }
.secao > h2::after { content: ""; display: block; width: 88px; height: 4px; margin-top: 10px; background: var(--vermelho); clip-path: polygon(0 40%, 100% 0, 96% 100%, 2% 80%); }
.intro { margin: -8px 0 24px; }
#mudancas { padding-bottom: clamp(48px, 7vw, 84px); }

/* Faixas de arte em largura total */
.banda { position: relative; margin: clamp(48px, 7vw, 84px) 0 0; background: #000; }
.banda img { width: 100%; height: clamp(300px, 56vw, 86svh); object-fit: cover; object-position: 50% 30%; }
.banda::before, .banda::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.banda::before { top: 0; height: 14%; background: linear-gradient(var(--preto), transparent); z-index: 1; }
.banda::after { bottom: 0; height: 26%; background: linear-gradient(transparent, var(--preto)); }
.secao-apos-banda { padding-top: clamp(20px, 3vw, 36px); }

/* Features */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 44px); align-items: center; margin-bottom: 40px; }
.feature:nth-of-type(even) img { order: 2; }
.feature img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.feature p { margin: 8px 0; }
.feature ul { margin: 10px 0 0; padding: 0; list-style: none; }
.feature li { position: relative; padding: 3px 0 3px 18px; }
.feature li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; background: var(--vermelho); transform: rotate(45deg); }
.feature strong { color: var(--creme); }
.tabela-titulo { margin: 8px 0 14px; }

/* Instalação */
.passos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0 0 36px; padding: 0; list-style: none; counter-reset: passo; }
.passos li { position: relative; padding: 18px 18px 16px 70px; background: var(--painel); counter-increment: passo; }
.passos li::before { content: counter(passo); position: absolute; left: 18px; top: 8px; color: var(--vermelho); font: 2.7rem/1.2 var(--pincel); }
.passos p { margin: 6px 0 0; font-size: 1rem; }

.arquivos { width: 100%; border-collapse: collapse; }
.arquivos th, .arquivos td { padding: 11px 12px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.arquivos thead th { color: var(--apagado); font-size: .88rem; font-weight: 600; border-bottom: 2px solid var(--vermelho); }
.arquivos tbody th { font-weight: 400; white-space: nowrap; }
.arquivos td:last-child { white-space: nowrap; }

/* Problemas */
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary { padding: 13px 4px; color: var(--creme); font-weight: 600; cursor: pointer; }
.perguntas summary:hover { color: #fff; }
.perguntas p { margin: 0 4px 16px; }

/* Download final */
.download { text-align: center; padding-bottom: clamp(44px, 6vw, 64px); }
.download > h2::after { margin-inline: auto; }
.dados { max-width: 840px; margin: 28px auto 0; text-align: left; }
.dados div { display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.dados dt { color: var(--apagado); }
.dados dd { margin: 0; }
.hash { font-size: .82em; }

/* Recrutamento */
.recrutamento { margin-top: clamp(48px, 7vw, 84px); background: var(--painel); border-bottom: 1px solid var(--linha); }
.recrutamento-texto { max-width: 760px; margin: 0 auto; padding: clamp(36px, 5vw, 60px) 20px; text-align: center; }
.recrutamento-texto p { margin: 0 0 14px; }
.recrutamento-chamada { color: var(--vermelho); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.recrutamento-texto p.recrutamento-chamada { margin-bottom: 6px; color: #ff4a52; }
.recrutamento-texto h2 { margin-bottom: 14px; color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
.recrutamento-texto ol { display: table; margin: 0 auto; padding: 0; list-style: none; text-align: left; counter-reset: etapa; }
.recrutamento-texto .botao { margin-top: 20px; }
.recrutamento-texto li { position: relative; padding: 5px 0 5px 34px; color: var(--creme); font-weight: 600; counter-increment: etapa; }
.recrutamento-texto li::before { content: counter(etapa); position: absolute; left: 0; top: 0; color: var(--vermelho); font: 1.6rem/1.35 var(--pincel); }

.changelog { margin: 0; padding: 0; list-style: none; }
.changelog li { padding: 7px 0; border-bottom: 1px solid var(--linha); }
.changelog strong { display: inline-block; min-width: 70px; color: var(--creme); }

.rodape { padding: 22px 20px; border-top: 3px solid var(--vermelho); background: #000; color: var(--apagado); font-size: .9rem; text-align: center; }
.rodape img { width: 84px; height: auto; margin: 0 auto 12px; }
.rodape p { margin: 0; }

@media (max-width: 900px) {
  .passos { grid-template-columns: 1fr; }
  .topo nav { display: none; }
  .topo-baixar { margin-left: auto; }
}

@media (max-width: 700px) {
  .feature { grid-template-columns: 1fr; }
  .feature:nth-of-type(even) img { order: 0; }
  .banda img { object-position: 50% 25%; }
  .dados div { grid-template-columns: 1fr; gap: 0; }

  /* A tabela de arquivos vira blocos, para não haver rolagem horizontal. */
  .arquivos thead { position: absolute; left: -999px; }
  .arquivos, .arquivos tbody, .arquivos tr, .arquivos th, .arquivos td { display: block; width: 100%; }
  .arquivos tr { padding: 10px 0; border-bottom: 1px solid var(--linha); }
  .arquivos th, .arquivos td { padding: 3px 0; border: 0; white-space: normal; }
  .arquivos td::before { content: attr(data-rotulo) ": "; color: var(--apagado); font-size: .9rem; }
  .arquivos td:last-child { white-space: normal; }
}

@media (max-width: 480px) {
  body { font-size: 1rem; }
  .acoes .botao { width: 100%; }
  .hero-texto { padding-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}