/* Amato Quiz — front-end premium, sem dependências. Marca via --aq-accent (por quiz). */
.aq-root{
  --aq-accent:#0a7d5a;
  --aq-accent2:color-mix(in srgb, var(--aq-accent) 78%, #12b886);
  --aq-accent-d:color-mix(in srgb, var(--aq-accent) 84%, #000);
  --aq-on:#fff;
  --aq-ink:#0f172a; --aq-sub:#5b6b7f; --aq-line:#e6ebf2; --aq-bg:#fff; --aq-soft:#f6f8fb;
  --aq-ring:color-mix(in srgb, var(--aq-accent) 22%, transparent);
  --aq-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 32px -8px rgba(16,24,40,.14);
  max-width:600px; margin:24px auto; font-family:inherit; color:var(--aq-ink);
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme:dark){
  .aq-root{ --aq-ink:#eaf0f7; --aq-sub:#9db0c5; --aq-line:#2b3646; --aq-bg:#141b25; --aq-soft:#1b2431;
    --aq-shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 40px -10px rgba(0,0,0,.55); }
}
.aq-root *{ box-sizing:border-box; }
.aq-root :focus-visible{ outline:2px solid var(--aq-accent); outline-offset:2px; }

.aq-card{
  position:relative; background:var(--aq-bg); border:1px solid var(--aq-line); border-radius:22px;
  box-shadow:var(--aq-shadow); padding:30px 26px; overflow:hidden;
}
.aq-card::before{ /* faixa de marca no topo */
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--aq-accent), var(--aq-accent2));
}
.aq-intro .aq-card, .aq-result .aq-card{ text-align:center; }

/* Capa (splash) da intro — imagem full-bleed no topo do cartão */
.aq-has-hero::before{ display:none; }
.aq-hero{ display:block; width:calc(100% + 52px); margin:-30px -26px 22px; max-height:230px; object-fit:cover; }
@media (max-width:480px){ .aq-hero{ width:calc(100% + 36px); margin:-24px -18px 18px; max-height:180px; } }

.aq-h{ margin:6px 0 10px; font-size:24px; line-height:1.22; font-weight:820; letter-spacing:-.02em; }
.aq-sub{ margin:0 0 22px; font-size:16px; line-height:1.6; color:var(--aq-sub); }
.aq-meta{ margin:16px 0 0; font-size:13px; color:var(--aq-sub); }
.aq-emoji{ font-size:44px; line-height:1; margin-bottom:6px; }

/* Botões */
.aq-btn{
  -webkit-appearance:none; appearance:none; cursor:pointer; border:0; border-radius:14px;
  background:linear-gradient(180deg, var(--aq-accent2), var(--aq-accent)); color:var(--aq-on);
  font:inherit; font-size:17px; font-weight:750; padding:16px 24px; width:100%; letter-spacing:.01em;
  box-shadow:0 8px 20px -6px var(--aq-ring); transition:transform .12s cubic-bezier(.2,.9,.3,1.4), filter .15s, box-shadow .15s;
}
.aq-btn:hover{ filter:brightness(1.05); box-shadow:0 12px 26px -6px var(--aq-ring); }
.aq-btn:active{ transform:scale(.975); }
.aq-btn:disabled{ opacity:.6; cursor:default; box-shadow:none; filter:none; transform:none; }
.aq-btn.ghost{ background:none; color:var(--aq-sub); box-shadow:none; font-weight:650; font-size:14.5px; padding:10px; }
.aq-btn.ghost:hover{ color:var(--aq-ink); filter:none; }

/* Cabeçalho da pergunta: contador + progresso */
.aq-top{ display:flex; align-items:center; justify-content:space-between; margin:0 0 8px; font-size:12.5px; color:var(--aq-sub); font-weight:600; }
.aq-top b{ color:var(--aq-accent); }
.aq-progress{ height:8px; border-radius:99px; background:var(--aq-line); overflow:hidden; margin:0 0 22px; }
.aq-progress > i{ display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--aq-accent), var(--aq-accent2));
  transition:width .5s cubic-bezier(.2,.8,.2,1); }

/* Pergunta + respostas */
.aq-q{ margin:2px 0 20px; font-size:21px; line-height:1.35; font-weight:780; letter-spacing:-.01em; }
.aq-qimg{ width:100%; border-radius:14px; margin:0 0 16px; display:block; }
.aq-answers{ display:grid; gap:12px; }
.aq-answers.imgs{ grid-template-columns:1fr 1fr; }
.aq-ans{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  padding:17px 18px; border:2px solid var(--aq-line); border-radius:16px;
  background:var(--aq-bg); color:var(--aq-ink); font:inherit; font-size:16px; font-weight:550; cursor:pointer;
  transition:border-color .15s, background .15s, transform .1s, box-shadow .15s;
}
.aq-ans:hover{ border-color:color-mix(in srgb, var(--aq-accent) 50%, var(--aq-line)); transform:translateY(-1px);
  box-shadow:0 6px 16px -8px var(--aq-ring); }
.aq-ans:active{ transform:scale(.99); }
.aq-ans.sel{ border-color:var(--aq-accent); background:color-mix(in srgb, var(--aq-accent) 7%, var(--aq-bg)); }
.aq-ans .mark{
  flex:0 0 24px; height:24px; border-radius:50%; border:2px solid var(--aq-line);
  display:grid; place-items:center; transition:.15s; color:transparent; font-size:14px;
}
.aq-ans.sel .mark{ border-color:var(--aq-accent); background:var(--aq-accent); color:#fff; transform:scale(1.08); }
.aq-answers.imgs .aq-ans{ flex-direction:column; align-items:stretch; gap:8px; padding:10px; text-align:center; }
.aq-answers.imgs .aq-ans img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.aq-answers.imgs .mark{ position:absolute; margin:8px; }
.aq-answers.imgs .aq-ans{ position:relative; }

/* Gate de e-mail */
.aq-field{ width:100%; padding:15px 16px; border:2px solid var(--aq-line); border-radius:14px;
  font:inherit; font-size:16px; margin:0 0 11px; background:var(--aq-bg); color:var(--aq-ink); transition:border-color .15s; }
.aq-field:focus{ outline:none; border-color:var(--aq-accent); box-shadow:0 0 0 4px var(--aq-ring); }
.aq-consent{ display:flex; gap:10px; align-items:flex-start; text-align:left; font-size:13px; color:var(--aq-sub); margin:6px 0 18px; }
.aq-consent input{ margin-top:2px; width:17px; height:17px; accent-color:var(--aq-accent); flex:0 0 auto; }
.aq-lock{ font-size:12px; color:var(--aq-sub); margin:12px 0 0; }

/* Resultado */
.aq-result .badge{ display:inline-grid; place-items:center; width:76px; height:76px; border-radius:50%;
  background:linear-gradient(180deg, var(--aq-accent2), var(--aq-accent)); color:#fff; font-size:36px;
  box-shadow:0 12px 28px -8px var(--aq-ring); margin-bottom:10px; }
.aq-gauge{ height:10px; border-radius:99px; background:var(--aq-line); overflow:hidden; margin:14px 0 20px; }
.aq-gauge > i{ display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--aq-accent), var(--aq-accent2)); transition:width .9s cubic-bezier(.2,.8,.2,1); }
.aq-body{ text-align:left; font-size:16px; line-height:1.65; color:var(--aq-ink); }
.aq-body p{ margin:0 0 12px; }
.aq-share{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; margin:16px 0 0; }
.aq-share-l{ font-size:13px; color:var(--aq-sub); }
.aq-sbtn{ -webkit-appearance:none; appearance:none; cursor:pointer; border:1px solid var(--aq-line); background:var(--aq-bg);
  color:var(--aq-ink); font:inherit; font-size:13px; font-weight:600; padding:8px 12px; border-radius:9px; text-decoration:none; transition:border-color .12s; }
.aq-sbtn:hover{ border-color:var(--aq-accent); }

/* Etapas / animação */
.aq-stage{ will-change:transform, opacity; }
.aq-spin{ display:inline-block; width:19px; height:19px; border:2.5px solid rgba(255,255,255,.45);
  border-top-color:#fff; border-radius:50%; animation:aqSpin .7s linear infinite; vertical-align:-4px; }
@keyframes aqSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .aq-progress>i,.aq-gauge>i,.aq-spin{ transition:none; animation:none; } }
.aq-noscript{ padding:18px; border:1px solid var(--aq-line); border-radius:16px; }

@media (max-width:480px){
  .aq-root{ margin:14px auto; }
  .aq-card{ padding:24px 18px; border-radius:20px; }
  .aq-h{ font-size:22px; } .aq-q{ font-size:19px; }
}