/* ============================================================
   QUIZ-INFO — Design System
   Usado após ds-tokens.css. Mobile-first (base 375px) · sem
   framework · sem requests externos (fontes self-hosted via
   @font-face inline nos HTMLs).
   ============================================================ */

/* ---- 1. Reset mínimo ---------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
#qi-oferta { scroll-margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--qi-font);
  background: var(--qi-bg);
  color: var(--qi-ink);
  font-size: 1rem;            /* corpo ≥16px sempre */
  line-height: 1.55;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* Backdrop ≥768px: dois blobs brand a 4–6% — profundidade sutil */
@media (min-width: 768px) {
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(560px 420px at 12% -6%, rgba(14, 159, 110, .06), transparent 70%),
      radial-gradient(640px 480px at 96% 104%, rgba(20, 184, 166, .05), transparent 70%);
  }
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--qi-brand-deep);
  text-underline-offset: 3px;
}

/* ---- 2. Focus visível (AA) ----------------------------------- */
:focus-visible {
  outline: 3px solid var(--qi-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- 3. Container -------------------------------------------- */
/* Nunca px fixo — fluido com max-width                           */
.qi-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .qi-container { max-width: 560px; }
}

/* ---- 4. Header bar (marca) — navy sólido, wordmark branco ---- */
.qi-appbar {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qi-navy);
}

.qi-appbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--qi-font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--qi-on-navy);
}

.qi-appbar-brand .qi-icon {
  width: 22px;
  height: 22px;
  color: var(--qi-cta);
}

/* Faixa navy no topo (appbar + progresso vivem nela) */
.qi-top {
  background: var(--qi-navy);
}

/* ---- 5. Tipografia fluida ------------------------------------ */
/* Display: Plus Jakarta Sans 700/800 · Corpo: Inter              */
.qi-h1 {
  font-family: var(--qi-font-display);
  font-size: clamp(1.625rem, 4.5vw + 0.6rem, 2.125rem);  /* 26 → 34px */
  font-weight: 800;
  line-height: 1.15;
  color: var(--qi-ink);
  letter-spacing: -0.025em;
}

.qi-h2 {
  font-family: var(--qi-font-display);
  font-size: clamp(1.375rem, 3vw + 0.6rem, 1.75rem);     /* 22 → 28px */
  font-weight: 800;
  line-height: 1.2;
  color: var(--qi-ink);
  letter-spacing: -0.02em;
}

/* ---- 6. Badge / pill ----------------------------------------- */
.qi-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--qi-brand-deep);       /* 4.8:1 sobre brand-soft */
  background: var(--qi-brand-soft);
  border-radius: var(--qi-radius-pill);
  padding: 6px 12px;
  line-height: 1;
}

.qi-badge .qi-icon {
  width: 14px;
  height: 14px;
}

/* ---- 7. Card ------------------------------------------------- */
.qi-card {
  background: var(--qi-surface);
  border-radius: var(--qi-radius-card);
  box-shadow: var(--qi-shadow-md);
  padding: 28px 20px;
}

@media (min-width: 768px) {
  .qi-card { padding: 36px 32px; }
}

/* ---- 8. Botão CTA (âmbar + ink) ------------------------------ */
.qi-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 16px 24px;
  border: none;
  border-radius: var(--qi-radius-option);
  cursor: pointer;
  font-family: var(--qi-font);
  font-size: 1.0625rem;              /* 17px */
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  background: var(--qi-cta);
  color: var(--qi-cta-ink);          /* ink no âmbar: 10.2:1 */
  box-shadow: 0 1px 2px rgba(16, 24, 43, .08), 0 8px 20px rgba(255, 184, 0, .35);
  transition: background 0.15s var(--qi-ease), transform 0.15s var(--qi-ease), box-shadow 0.2s var(--qi-ease);
  -webkit-tap-highlight-color: transparent;
}

.qi-btn .qi-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.qi-btn:hover {
  background: var(--qi-cta-hover);
  box-shadow: 0 2px 4px rgba(16, 24, 43, .08), 0 10px 24px rgba(255, 184, 0, .42);
}

.qi-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(16, 24, 43, .08), 0 4px 12px rgba(255, 184, 0, .28);
}

.qi-btn:disabled {
  cursor: wait;
}

/* Variante secundária (brand) */
.qi-btn--secondary {
  background: var(--qi-brand);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 43, .08), 0 8px 20px rgba(14, 159, 110, .30);
}

.qi-btn--secondary:hover {
  background: var(--qi-brand-deep);
}

/* ---- 9. Pergunta + opções ------------------------------------ */
/* Kicker acima da pergunta */
.qi-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qi-brand-deep);
  margin-bottom: 8px;
}

.qi-question-label {
  font-family: var(--qi-font-display);
  font-size: clamp(1.25rem, 2.6vw + 0.65rem, 1.5rem);    /* 20 → 24px */
  font-weight: 800;
  color: var(--qi-ink);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.qi-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qi-option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 14px;
  background: var(--qi-surface);
  border: 2px solid var(--qi-hairline);
  border-radius: var(--qi-radius-option);
  box-shadow: var(--qi-shadow-sm);
  cursor: pointer;
  font-family: var(--qi-font);
  font-size: 1rem;
  font-weight: 500;
  color: var(--qi-ink);
  text-align: left;
  width: 100%;
  transition: border-color 0.15s var(--qi-ease), background 0.15s var(--qi-ease),
              transform 0.15s var(--qi-ease), box-shadow 0.2s var(--qi-ease);
  -webkit-tap-highlight-color: transparent;
}

/* Tile do ícone: 44px navy-soft (duotone) com traço emerald 2.25 */
.qi-option-ic {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qi-navy-soft);
  border-radius: 12px;
  color: var(--qi-brand);
  transition: background 0.15s var(--qi-ease), color 0.15s var(--qi-ease);
}

.qi-option-ic .qi-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.25;
}

.qi-option-label {
  flex: 1;
  min-width: 0;
}

/* Chevron à direita → check-circle quando selecionado */
.qi-option-chevron,
.qi-option-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.qi-option-chevron {
  color: var(--qi-muted);
  transition: transform 0.15s var(--qi-ease), color 0.15s var(--qi-ease);
}

.qi-option-check {
  display: none;
  color: var(--qi-brand);
}

@media (hover: hover) {
  .qi-option:hover {
    border-color: var(--qi-brand);
    transform: translateY(-1px);
    box-shadow: var(--qi-shadow-md);
  }
  .qi-option:hover .qi-option-chevron {
    color: var(--qi-brand);
    transform: translateX(2px);
  }
}

.qi-option:focus-visible {
  border-color: var(--qi-brand);
}

.qi-option[aria-selected="true"],
.qi-option.is-selected {
  border-color: var(--qi-brand);
  background: var(--qi-brand-soft);
  font-weight: 600;
}

.qi-option.is-selected .qi-option-ic,
.qi-option[aria-selected="true"] .qi-option-ic {
  background: var(--qi-brand);
  color: #ffffff;
}

.qi-option.is-selected .qi-option-chevron,
.qi-option[aria-selected="true"] .qi-option-chevron {
  display: none;
}

.qi-option.is-selected .qi-option-check,
.qi-option[aria-selected="true"] .qi-option-check {
  display: block;
}

/* Entrada em cascata: fade + rise, 40ms de stagger */
.qi-options .qi-option {
  opacity: 0;
  animation: qi-rise 0.3s var(--qi-ease) both;
}

.qi-options .qi-option:nth-child(1) { animation-delay: 0ms; }
.qi-options .qi-option:nth-child(2) { animation-delay: 40ms; }
.qi-options .qi-option:nth-child(3) { animation-delay: 80ms; }
.qi-options .qi-option:nth-child(4) { animation-delay: 120ms; }
.qi-options .qi-option:nth-child(5) { animation-delay: 160ms; }
.qi-options .qi-option:nth-child(6) { animation-delay: 200ms; }
.qi-options .qi-option:nth-child(n+7) { animation-delay: 240ms; }

@keyframes qi-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 10. Ícones inline --------------------------------------- */
.qi-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ---- 11. Utilitários ------------------------------------------ */
.qi-text-soft  { color: var(--qi-ink-soft); }
.qi-text-brand { color: var(--qi-brand-deep); }
.qi-text-warn  { color: var(--qi-danger); }

.qi-mt-sm  { margin-top:  8px; }
.qi-mt-md  { margin-top: 16px; }
.qi-mt-lg  { margin-top: 24px; }
.qi-mb-sm  { margin-bottom:  8px; }
.qi-mb-md  { margin-bottom: 16px; }
.qi-mb-lg  { margin-bottom: 24px; }

/* ---- 12. Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .qi-options .qi-option { opacity: 1; animation: none; }
}