:root {
  --preto: #000;
  --painel: #0f0f10;
  --borda: #3a3a3e;
  --vermelho: #e10600;
  --vermelho-claro: #ff5a52;
  --verde: #2fd16b;
  --texto: #fff;
  --suave: #b9b9c0;
}

* { box-sizing: border-box; }

html { background: var(--preto); }

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--texto);
  font: 400 16px/1.5 Inter, system-ui, sans-serif;
  background: radial-gradient(70vmax 55vmax at 0 0, #6e0505 0, #2a0202 42%, transparent 72%) no-repeat, var(--preto);
}

.faixas { position: relative; height: 76px; overflow: hidden; }

.faixa {
  position: absolute;
  left: -5%;
  width: 110%;
  padding: 3px 0;
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
  background: var(--vermelho);
  font: 800 14px/1.4 Montserrat, sans-serif;
}

.faixa::before {
  content: "BLACK WEEK BLACK WEEK BLACK WEEK BLACK WEEK BLACK WEEK BLACK WEEK BLACK WEEK BLACK WEEK BLACK WEEK BLACK WEEK BLACK WEEK BLACK WEEK";
}

.faixa-a { top: 8px; transform: rotate(1.6deg); }
.faixa-b { top: 26px; transform: rotate(-2.4deg); }

main { width: min(100% - 40px, 480px); margin: 0 auto; padding: 12px 0 48px; }

header { text-align: center; margin-bottom: 28px; }
.logo { display: block; width: min(280px, 74%); height: auto; margin: 0 auto; }
.periodo {
  margin: 10px 0 0;
  font: 700 13px/1.2 Montserrat, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 { margin: 0 0 10px; font: 900 clamp(28px, 8vw, 36px)/1.1 Montserrat, sans-serif; }
.nb { white-space: nowrap; }
.intro { margin: 0 0 24px; color: var(--suave); }
.intro strong { color: var(--texto); font-weight: 600; }

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.campo { margin-bottom: 22px; }

label[for], legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-weight: 600;
}

input[type="text"], input[type="tel"] {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  color: var(--texto);
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 8px;
  font: inherit;
  font-size: 17px;
}

input::placeholder { color: #85858c; }
input[aria-invalid] { border-color: var(--vermelho-claro); }

input:focus-visible, button:focus-visible, .opcao:has(input:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.de { margin: -2px 0 8px; color: var(--suave); }
.de s { color: var(--vermelho-claro); }

.opcoes { display: grid; gap: 10px; }

.opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 8px;
  cursor: pointer;
}

.opcao input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--vermelho);
}

.opcao:has(input:checked) { border-color: var(--vermelho); box-shadow: inset 0 0 0 1px var(--vermelho); background: #1c0605; }

.opcao-texto { display: grid; }
.opcao-texto strong { font-weight: 600; }
.opcao-texto span { color: var(--suave); font-size: 14px; }
.opcao-preco strong { color: var(--verde); font: 800 20px/1.25 Montserrat, sans-serif; }

.erro { margin: 6px 0 0; color: var(--vermelho-claro); font-size: 14px; }
.erro:empty { display: none; }
.erro-geral { text-align: center; margin-top: 12px; }

.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

button {
  width: 100%;
  min-height: 56px;
  padding: 14px;
  color: #fff;
  background: var(--vermelho);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: 800 17px/1.2 Montserrat, sans-serif;
  text-transform: uppercase;
}

button:hover { background: #c70500; }
button:disabled { opacity: .7; cursor: progress; }

.aviso { margin: 14px 0 0; color: var(--suave); font-size: 13px; }

#tela-ok { text-align: center; outline: none; }
.check { width: 64px; height: 64px; color: var(--verde); margin-bottom: 8px; }
.resumo {
  margin: 0 0 20px;
  padding: 12px;
  border: 1px solid var(--vermelho);
  border-radius: 8px;
  font-weight: 600;
}