/* ArtQuiz — layout novo (Arena). Mantém os hooks de cor do ACF via inline style. */
.aq-modal{
  --aq-accent:#e5352b;
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(10,12,16,.55);backdrop-filter:blur(8px);
}
body.aq-modal-open{overflow:hidden;height:100%}

/* ---- Card ---- */
.aq-content{
  position:relative;width:100%;max-width:440px;overflow:hidden;
  background:#fff;border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.4);
}
.aq-content::before{content:"";display:block;height:5px;background:var(--aq-accent)}

/* ---- Progresso (pílula) ---- */
.aq-progress{height:6px;margin:18px 26px 0;border-radius:999px;background:#eceef2;overflow:hidden}
.aq-bar{height:100%;width:0;border-radius:999px;background:var(--aq-accent);transition:width .35s cubic-bezier(.4,0,.2,1)}

/* ---- Slides ---- */
.aq-slide,.aq-loading,.aq-final{display:flex;flex-direction:column;padding:26px 26px 30px;gap:18px}
.aq-slide{align-items:stretch}
.aq-loading,.aq-final{align-items:center;text-align:center}
.aq-slide .question,.aq-final p{
  margin:0;font-size:20px;font-weight:700;line-height:1.35;color:#16181d;text-align:center;
}

/* ---- Opções: botão sólido, só o nome (centralizado) ---- */
.options{display:flex;flex-direction:column;gap:12px}
.aq-answer{
  display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;width:100%;
  background:var(--aq-accent);color:#fff;border:none;border-radius:14px;
  padding:17px 18px;font-size:15px;font-weight:700;line-height:1.3;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.aq-answer:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.2)}

/* Variante "secundário": label + subtexto à direita */
.aq-answer-secondary{justify-content:space-between;text-align:left}
.aq-answer-secondary span{
  font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;opacity:.85;
}

/* Variante "imagem": grade de cartões com imagem */
.options-image{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.aq-answer-image{
  flex-direction:column;gap:10px;text-align:center;padding:16px 12px;
  font-size:13px;text-transform:uppercase;letter-spacing:.3px;
}
.aq-answer-image img,.aq-answer-image svg{width:72px;height:72px;object-fit:contain}

/* ---- Loading ---- */
.aq-loading h2{margin:0;font-size:18px;font-weight:600;color:#5b636f}
.aq-dots{display:flex;gap:10px;justify-content:center}
.aq-dots span{
  width:12px;height:12px;border-radius:50%;font-size:0;background:var(--aq-accent);
  animation:aq-wave 1s ease-in-out infinite;
}
.aq-dots span:nth-child(2){animation-delay:.15s}
.aq-dots span:nth-child(3){animation-delay:.3s}
@keyframes aq-wave{0%,100%{transform:scale(.5);opacity:.4}50%{transform:scale(1);opacity:1}}

/* ---- Final (CTA de reward com o visual novo) ---- */
.aq-final p{font-size:22px}
#aq-cta{
  display:block;width:100%;box-sizing:border-box;
  background:var(--aq-accent);color:#fff;text-decoration:none;text-align:center;cursor:pointer;border:none;
  padding:18px 22px;border-radius:14px;font-size:17px;font-weight:700;line-height:1.2;
  transition:filter .16s ease,transform .16s ease;
}
#aq-cta:hover{filter:brightness(1.07);transform:translateY(-2px);color:#fff;text-decoration:none}
.aq-final small{color:#8a919c;font-size:12px;line-height:1.5}

/* ---- Tamanho grande ---- */
.aq-modal.grande .aq-content{max-width:620px}
.aq-modal.grande .aq-slide .question{font-size:25px;line-height:1.3}
.aq-modal.grande .aq-answer{font-size:18px;padding:20px}
.aq-modal.grande .options-image{grid-template-columns:repeat(3,1fr)}

@media (max-width:480px){
  .aq-content{border-radius:16px}
  .aq-slide,.aq-loading,.aq-final{padding:22px 18px 26px}
  .aq-slide .question{font-size:18px}
  .aq-answer{padding:15px 16px;font-size:14px}
}