/*
 * Quizz Cruzion — tela cheia, no molde do quizz do Koinp (site de um gestor da Aureon,
 * koinp.com/4608, lido em 26/09/2026 a pedido do Gui: "ficou muito feio essa fonte azul
 * sobre o fundo branco apenas").
 *
 * O que veio de lá, medido no CSS do próprio site:
 *   fundo escurecido rgba(8,16,34,.74) · cartão branco de 384px, raio 24, sombra
 *   0 30px 70px · cabeçalho em degradê com brilho radial e bolhas translúcidas ·
 *   selo em pílula · opções brancas SOBREPOSTAS ao cabeçalho (margin-top negativo),
 *   com ícone quadrado, chevron e leve subida no hover · entrada translateY(16px)
 *   scale(.98) em 0,3s.
 * O que é nosso: o azul-marinho #12264D do Kauos no cabeçalho e o rosa #F8285B como
 * destaque (o mesmo par da marca). Cor vem do shortcode, por variável CSS.
 *
 * "Tela fechada" (pedido do Gui, 18/09): o quizz cobre o site inteiro e só ele recebe
 * clique; a página de baixo não rola. Sem botão de fechar.
 *
 * ⚠️ Use só em página SEM anúncio (no Kauos, a categoria `quiz` não recebe o tag da
 * ActiveView). Anúncio por baixo de camada opaca é violação de política do AdX.
 */
html.qc-fechado,
html.qc-fechado body,
html:has(.quizz-cruzion),
html:has(.quizz-cruzion) body {
  overflow: hidden !important;
  height: 100% !important;
}

.quizz-cruzion {
  --qc-cor: #12264D;
  --qc-destaque: #F8285B;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  margin: 0 !important;
  box-sizing: border-box;
  background: rgba(8, 16, 34, 0.74) !important;
  backdrop-filter: blur(2px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.quizz-cruzion *,
.quizz-cruzion *::before,
.quizz-cruzion *::after {
  box-sizing: border-box;
}

.quizz-cruzion .qc-caixa {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: auto 0;
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 70px rgba(4, 10, 24, 0.55);
  animation: qc-entra 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  text-align: left;
}

@keyframes qc-entra {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ── cabeçalho ─────────────────────────────────────────────────────────────── */
.quizz-cruzion .qc-hero {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 34px;
  color: #ffffff;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--qc-destaque) 55%, transparent) 0%, transparent 55%),
    linear-gradient(155deg, color-mix(in srgb, var(--qc-cor) 88%, #ffffff) 0%, var(--qc-cor) 100%);
}

/* Navegador sem color-mix cai neste fundo: o degradê do azul puro, sem o brilho. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .quizz-cruzion .qc-hero { background: linear-gradient(155deg, #1B3A6B 0%, var(--qc-cor) 100%); }
}

.quizz-cruzion .qc-hero::before,
.quizz-cruzion .qc-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.quizz-cruzion .qc-hero::before { width: 180px; height: 180px; right: -60px; top: -70px; }
.quizz-cruzion .qc-hero::after { width: 90px; height: 90px; left: -30px; bottom: -40px; }

.quizz-cruzion .qc-ponto {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qc-destaque);
  opacity: 0.9;
  animation: qc-flutua 3.4s ease-in-out infinite;
}
.quizz-cruzion .qc-ponto.p1 { right: 26px; top: 28px; }
.quizz-cruzion .qc-ponto.p2 { right: 54px; top: 62px; width: 5px; height: 5px; background: #ffffff; animation-delay: 0.8s; }
.quizz-cruzion .qc-ponto.p3 { right: 18px; top: 82px; width: 6px; height: 6px; background: rgba(255, 255, 255, 0.7); animation-delay: 1.6s; }

@keyframes qc-flutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.quizz-cruzion .qc-icone {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 0 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  font-size: 31px;
  line-height: 1;
  animation: qc-flutua 3s ease-in-out infinite;
}

.quizz-cruzion .qc-titulo,
.quizz-cruzion .qc-progresso {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0 0 8px !important;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4 !important;
}

.quizz-cruzion .qc-progresso:empty { display: none !important; }

.quizz-cruzion .qc-pergunta {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.quizz-cruzion .qc-subtitulo {
  position: relative;
  z-index: 1;
  margin: 8px 0 0 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
}

/* ── respostas ─────────────────────────────────────────────────────────────── */
.quizz-cruzion .qc-etapa[hidden] { display: none !important; }

.quizz-cruzion .qc-opcoes {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin: -18px 0 0;
  padding: 0 16px 16px;
}

.quizz-cruzion a.qc-resposta,
.quizz-cruzion a.qc-resposta:visited {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 !important;
  padding: 13px 14px !important;
  border: 1.5px solid #e3e9f2 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(16, 40, 80, 0.09) !important;
  color: #17243a !important;
  text-decoration: none !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: left;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.quizz-cruzion a.qc-resposta .qc-marca {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #eef4fb;
  color: var(--qc-cor);
  font-size: 17px;
  font-weight: 800;
}

.quizz-cruzion a.qc-resposta .qc-seta {
  margin-left: auto;
  color: #9aa6b8;
  font-size: 24px;
  line-height: 1;
}

.quizz-cruzion a.qc-resposta:hover,
.quizz-cruzion a.qc-resposta:focus-visible {
  transform: translateY(-1px);
  border-color: var(--qc-destaque) !important;
  box-shadow: 0 12px 24px rgba(16, 40, 80, 0.13) !important;
  outline: none;
}

.quizz-cruzion a.qc-resposta:active,
.quizz-cruzion a.qc-resposta.qc-escolhida {
  transform: scale(0.99);
  border-color: var(--qc-destaque) !important;
  background: color-mix(in srgb, var(--qc-destaque) 8%, #ffffff) !important;
}

.quizz-cruzion a.qc-resposta.qc-escolhida .qc-marca {
  background: var(--qc-destaque);
  color: #ffffff;
}

.quizz-cruzion .qc-rodape {
  margin: 0 !important;
  padding: 0 18px 16px;
  color: #7a8794 !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

@media (max-width: 380px) {
  .quizz-cruzion .qc-hero { padding: 18px 18px 30px; }
  .quizz-cruzion .qc-pergunta { font-size: 20px !important; }
  .quizz-cruzion .qc-icone { width: 50px; height: 50px; font-size: 27px; }
}