@font-face {
  font-family: "Big Shoulders Stencil";
  src: url("/fonts/big-shoulders-stencil-latin.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* Paleta Gruvbox Dark (github.com/morhetz/gruvbox) */
:root {
  --bg: #282828;
  --bg0-h: #1D2021;
  --bg1: #3C3836;
  --bg2: #504945;
  --fg: #EBDBB2;
  --fg3: #BDAE93;
  --fg4: #A89984;
  --amarelo: #FABD2F;
  --amarelo-escuro: #B57614;
  --verde: #98971A;
  --verde-claro: #B8BB26;
  --verde-escuro: #79740E;
  --vermelho: #FB4934;
  --foco: #8EC07C;

  --estencil: "Big Shoulders Stencil", Impact, "Arial Narrow", sans-serif;
  --texto: "Atkinson Hyperlegible Next", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.pagina {
  max-width: 1040px;
  margin: 0 auto;
  padding:
    max(20px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(32px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.marca {
  margin: 0 0 20px;
  font-family: var(--estencil);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--fg4);
}

.carregando { color: var(--fg4); }

/* ---------- Estado vazio / erro ---------- */
.vazio h1 { margin: 0 0 8px; font-size: 1.5rem; }
.vazio p { margin: 0; max-width: 60ch; color: var(--fg3); }
.vazio-acao {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 20px;
  border-radius: 6px;
  background: var(--amarelo);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
}

/* ---------- Título ---------- */
.titulo {
  margin: 0 0 24px;
  max-width: 20ch;
  font-family: var(--estencil);
  font-weight: 800;
  font-size: clamp(2rem, 8.5vw, 3.25rem);
  line-height: .98;
  letter-spacing: .005em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* ---------- Estrutura ---------- */
.colunas {
  display: grid;
  gap: 16px;
}

/* ---------- Cartão do link ---------- */
.download {
  padding: 18px;
  background: var(--bg1);
  border: 1px solid var(--bg2);
  border-radius: 10px;
}

.arquivo { display: flex; align-items: center; gap: 14px; }
.arquivo-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--amarelo);
}
.arquivo-texto { min-width: 0; }
.arquivo-nome { margin: 0; font-weight: 700; font-size: 1.1875rem; line-height: 1.2; overflow-wrap: anywhere; }
.arquivo-info { margin: 2px 0 0; color: var(--fg4); font-size: .95rem; overflow-wrap: anywhere; }

.botao-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  margin-top: 18px;
  padding: 0 20px;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  line-height: 1.15;
  text-align: center;
  background: var(--amarelo);
  color: var(--bg);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--amarelo-escuro);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s, box-shadow .08s;
}
.botao-download:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--amarelo-escuro); }
.botao-download[aria-disabled="true"] {
  background: var(--bg2);
  color: var(--fg3);
  box-shadow: none;
  cursor: not-allowed;
}
.botao-download[aria-disabled="true"]:active { transform: none; }
.botao-download.liberado {
  background: var(--verde-claro);
  box-shadow: 0 4px 0 var(--verde-escuro);
}
.botao-download.liberado:active { box-shadow: 0 1px 0 var(--verde-escuro); }
.botao-icone { display: grid; }

.progresso { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.segmento { height: 6px; border-radius: 3px; background: var(--bg2); transition: background .3s; }
.segmento.cheio { background: var(--verde); }
.segmento.atual { background: var(--amarelo); }

.download-status { margin: 10px 0 0; color: var(--fg3); font-size: .95rem; }

/* ---------- Etapas ---------- */
.etapa {
  padding: 14px 16px 16px;
  border: 1px solid var(--bg2);
  border-radius: 8px;
  background: var(--bg1);
}
.etapa.chamar { animation: chamar .5s ease-in-out; }

.etapa-cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}
.etapa-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: var(--amarelo);
  color: var(--bg);
  font-size: 1rem;
}
.etapa-titulo { min-width: 0; }
.etapa-estado { margin-left: auto; font-weight: 400; font-size: .9rem; color: var(--fg4); white-space: nowrap; }

.tarefas { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.tarefa {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.tarefa:hover { background: var(--bg0-h); }
.tarefa input { position: absolute; opacity: 0; pointer-events: none; }
.tarefa:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.tarefa-texto { flex: 1; min-width: 0; }
a.tarefa .tarefa-texto { text-decoration: underline; text-decoration-color: var(--fg4); text-underline-offset: 3px; }
.tarefa-ext { display: grid; color: var(--fg4); }

.marcador {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--fg4);
  border-radius: 4px;
  font-weight: 700;
  line-height: 1;
}
.feita .marcador { background: var(--verde); border-color: var(--verde); color: var(--bg); }
.feita .tarefa-texto { color: var(--fg4); }

@keyframes chamar {
  0%, 100% { transform: none; }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

[hidden] { display: none !important; }

.publicidade { margin: 0 0 24px; min-width: 0; overflow-x: auto; }
.banner-728 { width: 728px; min-height: 90px; margin-inline: auto; }
.publicidade-rotulo { margin: 0 0 8px; color: var(--fg4); font-size: .85rem; }
#anuncio-dialog {
  width: min(480px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--bg2);
  border-radius: 12px;
  background: var(--bg1);
  color: var(--fg);
}
#anuncio-dialog::backdrop { background: rgb(0 0 0 / .75); }
#anuncio-dialog h2 { margin: 0 32px 12px 0; }
.anuncio-fechar { float: right; border: 0; background: none; color: var(--fg); font: inherit; font-size: 1.5rem; min-width: 44px; min-height: 44px; cursor: pointer; }
.anuncio-link { display: block; padding: 14px; border: 1px solid var(--fg4); border-radius: 6px; color: var(--foco); text-align: center; }
#anuncio-continuar:disabled { background: var(--bg2); color: var(--fg3); box-shadow: none; cursor: wait; }

/* ---------- PC: etapa à esquerda, cartão do link fixo à direita ---------- */
@media (min-width: 900px) {
  .pagina { padding-top: 40px; }
  .titulo { margin-bottom: 32px; }
  .colunas {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "etapa download";
    gap: 32px;
    align-items: start;
  }
  .etapa { grid-area: etapa; }
  .download { grid-area: download; position: sticky; top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}