:root {
  --preto: #111111;
  --preto-2: #1b1b1b;
  --branco: #ffffff;
  --papel: #f4f1ea;
  --amarelo: #ffd21f;
  --papelao: #b98b52;
  --vermelho: #e1251b;
  --cinza: #8a8a8a;
  --linha: #2e2e2e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--preto);
  color: var(--branco);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 640px; margin: 0 auto; padding: 0 20px; }

.topo { padding: 20px 0; border-bottom: 1px solid var(--linha); }
.topo .wrap { display: flex; align-items: center; gap: 10px; }
.marca {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: .04em; text-transform: uppercase;
}
.marca i { font-style: normal; color: var(--amarelo); }

h1, h2, h3 { font-family: 'Big Shoulders Display', sans-serif; text-transform: uppercase; line-height: .98; letter-spacing: .005em; }
h1 { font-weight: 900; font-size: clamp(44px, 12vw, 72px); }
h2 { font-weight: 800; font-size: clamp(32px, 8vw, 44px); }
h3 { font-weight: 800; font-size: 26px; }
.y { color: var(--amarelo); }
.mono { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--amarelo); }

.btn {
  display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--amarelo); color: var(--preto); border: 0; border-radius: 0;
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 26px;
  letter-spacing: .03em; text-transform: uppercase; padding: 16px 20px;
}
.btn:hover { filter: brightness(1.06); }
.btn[disabled] { opacity: .6; cursor: wait; }