/* ==========================================================================
   HyperCash — Quiz gamificado (substitui o formulário direto)
   Visual herda a identidade Hyper: verde #54EC66, fundo #060D00, Oakes Grotesk
   Escopo isolado em #hyper-quiz para não afetar o resto da LP.
   ========================================================================== */
#hyper-quiz {
  --hq-green: #54ec66;
  --hq-lime: #54ec66;
  --hq-card: #0e0f0c;          /* "preto claro" — cinza-escuro neutro */
  --hq-card-2: #181a15;        /* opções: um tom acima do card */
  --hq-border: rgba(255,255,255,.08);
  --hq-border-hover: rgba(255,255,255,.24);
  --hq-gray: #d4d9ce;
  --hq-white: #fff;
  --hq-font-head: "Oakes Grotesk", sans-serif;
  --hq-font-body: "Manrope", "Oakes Grotesk", sans-serif;

  background: var(--hq-card);
  border: 1px solid var(--hq-border);
  border-radius: 20px;
  padding: 34px 32px 36px;
  width: 100%;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  font-family: var(--hq-font-body);
}

/* ---------- Barra de progresso ---------- */
#hyper-quiz .hq-progress {
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 26px;
}
#hyper-quiz .hq-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--hq-green);
  border-radius: 999px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}

/* ---------- Cabeçalho da etapa ---------- */
#hyper-quiz .hq-step-count {
  font-family: var(--hq-font-head);
  font-size: 13px;
  letter-spacing: .5px;
  color: var(--hq-lime);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}
#hyper-quiz .hq-question {
  font-family: var(--hq-font-head);
  font-size: 26px;
  line-height: 1.22;
  color: var(--hq-white);
  font-weight: 400;
  margin: 0 0 22px;
}

/* ---------- Opções (botões de escolha) ---------- */
#hyper-quiz .hq-options { display: grid; gap: 12px; }
#hyper-quiz .hq-options--cols { grid-template-columns: 1fr 1fr; }
#hyper-quiz .hq-option {
  font-family: var(--hq-font-head);
  font-size: 16px;
  text-align: left;
  color: var(--hq-white);
  background: var(--hq-card-2);
  border: 1px solid var(--hq-border);
  border-radius: 14px;
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
#hyper-quiz .hq-option:hover {
  border-color: var(--hq-border-hover);
  background: #181a15;
  transform: translateY(-1px);
}
#hyper-quiz .hq-option.is-selected {
  border-color: var(--hq-green);
  background: rgba(84,236,102,.10);
}
#hyper-quiz .hq-option::after {
  content: "";
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--hq-border);
  transition: all .15s;
}
#hyper-quiz .hq-option:hover::after { border-color: var(--hq-green); }
#hyper-quiz .hq-option.is-selected::after {
  border-color: var(--hq-green);
  background: var(--hq-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23060d00'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ---------- Etapa de dados (inputs) ---------- */
#hyper-quiz .hq-field { margin-bottom: 16px; }
#hyper-quiz .hq-field label {
  display: block;
  font-family: var(--hq-font-head);
  font-size: 14px;
  color: var(--hq-white);
  margin-bottom: 8px;
}
#hyper-quiz .hq-field input {
  width: 100%;
  padding: 15px 18px;
  background: var(--hq-card-2);
  border: 1px solid var(--hq-border);
  border-radius: 14px;
  color: var(--hq-white);
  font-family: var(--hq-font-body);
  font-size: 15px;
  transition: border-color .15s;
}
#hyper-quiz .hq-field input::placeholder { color: #8a948a; }
#hyper-quiz .hq-field input:focus { outline: none; border-color: var(--hq-green); }
#hyper-quiz .hq-field input.is-error { border-color: #ff5a5a; }
#hyper-quiz .hq-field .hq-error {
  display: none;
  color: #ff7a7a;
  font-size: 12.5px;
  margin-top: 6px;
  font-family: var(--hq-font-head);
}
#hyper-quiz .hq-field input.is-error + .hq-error { display: block; }

/* ---------- Botão CTA ---------- */
#hyper-quiz .hq-cta {
  width: 100%;
  font-family: var(--hq-font-head);
  font-size: 18px;
  color: #060d00;
  background: var(--hq-green);
  border: none;
  border-radius: 999px;
  padding: 17px 24px;
  cursor: pointer;
  margin-top: 8px;
  transition: transform .15s, filter .15s, box-shadow .15s;
}
#hyper-quiz .hq-cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 30px rgba(84,236,102,.35); }
#hyper-quiz .hq-cta:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Rodapé: voltar + segurança ---------- */
#hyper-quiz .hq-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}
#hyper-quiz .hq-back {
  background: none;
  border: none;
  color: var(--hq-gray);
  font-family: var(--hq-font-head);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
}
#hyper-quiz .hq-back:hover { color: var(--hq-white); }
#hyper-quiz .hq-secure {
  font-family: var(--hq-font-head);
  font-size: 12px;
  color: var(--hq-gray);
}

/* ---------- Tela de sucesso ---------- */
#hyper-quiz .hq-success { text-align: center; padding: 24px 6px 10px; }
#hyper-quiz .hq-success__icon {
  width: 64px; height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--hq-green);
  display: grid; place-items: center;
}
#hyper-quiz .hq-success__icon svg { width: 32px; height: 32px; }
#hyper-quiz .hq-success h3 {
  font-family: var(--hq-font-head);
  font-size: 26px;
  color: var(--hq-white);
  font-weight: 400;
  margin-bottom: 12px;
}
#hyper-quiz .hq-success p {
  font-family: var(--hq-font-head);
  font-size: 16px;
  color: var(--hq-gray);
  line-height: 1.55;
  margin-bottom: 26px;
}
#hyper-quiz .hq-success__tag {
  display: inline-block;
  font-family: var(--hq-font-head);
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--hq-lime);
  margin-bottom: 12px;
}
/* CTA principal como link <a> (herda .hq-cta, mas precisa de display) */
#hyper-quiz .hq-cta--link {
  display: block;
  text-decoration: none;
  text-align: center;
}
/* CTA secundário (outline) */
#hyper-quiz .hq-cta--ghost {
  display: block;
  text-decoration: none;
  text-align: center;
  background: transparent;
  color: var(--hq-white);
  border: 1px solid var(--hq-border);
  margin-top: 12px;
}
#hyper-quiz .hq-cta--ghost:hover {
  border-color: var(--hq-green);
  background: rgba(84,236,102,.08);
  color: var(--hq-white);
  box-shadow: none;
}

/* ---------- Animação de troca de etapa ---------- */
#hyper-quiz .hq-stage { animation: hq-fade .3s ease; }
@keyframes hq-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Responsivo ---------- */
@media (max-width: 560px) {
  #hyper-quiz { padding: 24px 20px 28px; }
  #hyper-quiz .hq-question { font-size: 22px; }
  #hyper-quiz .hq-options--cols { grid-template-columns: 1fr; }
}