/* Quiz Notus Studio · tema Black Friday (preto e laranja)
   Direção: cinzas escuros em vez de preto puro, texto off-white, profundidade por superfícies mais claras,
   laranja só onde há ação, alvos de toque grandes, feedback imediato e microanimações. */
:root {
  --bg: #0B0B0D;
  --surface: #141417;
  --raised: #1C1C21;
  --raised-2: #24242A;
  --line: #2A2A31;
  --line-2: #3A3A43;
  --fg: #F3F1EC;
  --muted: #A4A3AB;
  --dim: #74737C;
  --or: #FF7A1A;
  --or-2: #FF5A00;
  --or-3: #FFB25C;
  --or-soft: rgba(255, 122, 26, .12);
  --or-line: rgba(255, 122, 26, .55);
  --ok: #3DDC84;
  --f: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fd: "Sora", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(900px 520px at 50% -180px, rgba(255, 106, 0, .22), transparent 70%),
    radial-gradient(600px 400px at 110% 30%, rgba(255, 90, 0, .06), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg); font: 400 16px/1.55 var(--f); -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
::selection { background: var(--or); color: #111; }

/* Faixa de Black Friday */
.q-ticker { position: relative; z-index: 20; overflow: hidden; background: var(--or); color: #120A04; border-bottom: 1px solid var(--or-2); }
.q-ticker-track { display: flex; width: max-content; animation: q-tick 28s linear infinite; }
.q-ticker span { padding: 9px 0; font: 800 12px/1 var(--fd); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; }
.q-ticker span::after { content: "✦"; margin: 0 18px; font-size: 11px; }
.q-ticker.has-timer .q-ticker-track { animation: none; width: 100%; justify-content: center; }
.q-ticker b { font-variant-numeric: tabular-nums; }
@keyframes q-tick { to { transform: translateX(-50%); } }

/* Estrutura */
.q-shell { max-width: 540px; min-height: calc(100vh - 31px); margin: 0 auto; display: flex; flex-direction: column; }
.q-top { position: sticky; top: 0; z-index: 10; padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px; display: grid; gap: 12px; background: linear-gradient(var(--bg) 70%, transparent); }
.q-top-row { position: relative; display: flex; justify-content: center; align-items: center; min-height: 36px; }
.q-back { position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; cursor: pointer; display: grid; place-items: center; color: var(--muted); transition: color .15s, border-color .15s; }
.q-back:hover { color: var(--fg); border-color: var(--line-2); }
.q-back:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.q-back svg { width: 20px; height: 20px; }
.q-pct { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 700 12.5px/1 var(--fd); color: var(--muted); font-variant-numeric: tabular-nums; }
.q-logo { display: inline-flex; align-items: center; gap: 9px; font: 700 16.5px/1 var(--fd); letter-spacing: -0.01em; color: var(--fg); text-decoration: none; }
.q-logo i { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(140deg, var(--or-3), var(--or-2)); color: #140A03; display: grid; place-items: center; font: italic 800 15px/1 Georgia, serif; box-shadow: 0 6px 18px -8px var(--or-2); }
.q-progress { height: 6px; background: var(--raised); border-radius: 99px; overflow: hidden; }
.q-progress span { position: relative; display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--or-2), var(--or), var(--or-3)); box-shadow: 0 0 14px rgba(255, 122, 26, .6); transition: width .55s cubic-bezier(.2,.7,.2,1); }
.q-main { flex: 1; padding: 8px 20px 36px; }
.q-step { display: grid; gap: 20px; animation: q-in .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes q-in { from { opacity: 0; transform: translateY(16px); } }

/* Tipografia */
.q-badge { justify-self: center; display: inline-flex; align-items: center; gap: 8px; background: #000; border: 1px solid var(--or-line); color: var(--or-3); padding: 8px 14px; border-radius: 99px; font: 800 11.5px/1 var(--fd); letter-spacing: .14em; text-transform: uppercase; }
.q-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 0 rgba(255,122,26,.7); animation: q-dot 1.6s ease-out infinite; }
@keyframes q-dot { to { box-shadow: 0 0 0 9px rgba(255,122,26,0); } }
.q-head { font: 800 clamp(27px, 7.2vw, 34px)/1.12 var(--fd); letter-spacing: -0.03em; text-align: center; margin: 0; text-wrap: balance; }
.q-head mark { background: none; color: var(--or); }
.q-title { font: 800 clamp(22px, 5.8vw, 26px)/1.22 var(--fd); letter-spacing: -0.02em; text-align: center; margin: 0; text-wrap: balance; }
.q-title em { font-style: normal; color: var(--or); }
.q-sub { color: var(--muted); text-align: center; margin: -6px 0 0; font-size: 15.5px; text-wrap: pretty; }
.q-paras { display: grid; gap: 12px; font-size: 16px; color: #DAD8D2; }
.q-paras p { margin: 0; }
.q-paras b { color: var(--fg); font-weight: 700; }
.q-paras b.or { color: var(--or); }

/* Etiqueta de preço da capa */
.q-price { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; overflow: hidden; }
.q-price > div { padding: 14px 12px; display: grid; gap: 4px; justify-items: center; text-align: center; align-content: center; }
.q-price span { font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.q-price s { font: 700 15px/1.1 var(--fd); white-space: nowrap; color: var(--dim); text-decoration-thickness: 2px; text-decoration-color: rgba(255, 90, 0, .8); }
.q-price .q-arrow { display: grid; place-items: center; padding: 0 2px; color: var(--or); font-weight: 800; }
.q-price .now { background: linear-gradient(160deg, rgba(255,122,26,.18), rgba(255,90,0,.06)); border-left: 1px solid var(--or-line); }
.q-price .now b { font: 800 30px/1 var(--fd); color: var(--or); letter-spacing: -0.03em; }

/* Opções */
.q-opts { display: grid; gap: 10px; }
.q-opt { position: relative; width: 100%; min-height: 62px; display: flex; align-items: center; gap: 14px; text-align: left; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 14px 12px 12px; font-size: 16px; font-weight: 600; color: var(--fg); cursor: pointer; transition: border-color .18s, background .18s, transform .12s, box-shadow .18s; -webkit-tap-highlight-color: transparent; }
.q-opt:hover { border-color: var(--line-2); background: var(--raised); }
.q-opt:active { transform: scale(.985); }
.q-opt:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.q-opt[aria-pressed="true"] { border-color: var(--or); background: linear-gradient(120deg, rgba(255,122,26,.16), rgba(255,122,26,.05)); box-shadow: 0 0 0 4px var(--or-soft), 0 10px 26px -18px var(--or); }
.q-emoji { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--raised-2); display: grid; place-items: center; transition: background .18s; }
.q-opt[aria-pressed="true"] .q-emoji { background: rgba(255,122,26,.18); }
.q-emoji img { width: 26px; height: 26px; display: block; }
.q-opt-label { flex: 1; line-height: 1.3; }
.q-check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; transition: background .18s, border-color .18s, transform .18s; }
.q-opt.multi .q-check { border-radius: 7px; }
.q-opt[aria-pressed="true"] .q-check { background: var(--or); border-color: var(--or); animation: q-pop .28s cubic-bezier(.3,1.6,.5,1); }
.q-opt[aria-pressed="true"] .q-check::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid #140A03; border-bottom: 2.5px solid #140A03; transform: rotate(-45deg) translate(1px, -1px); }
@keyframes q-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

/* Botão principal */
.q-cta { position: relative; overflow: hidden; width: 100%; min-height: 60px; border: 0; border-radius: 16px; padding: 18px 20px; background: linear-gradient(180deg, var(--or-3) -40%, var(--or) 45%, var(--or-2) 120%); color: #140A03; font: 800 17px/1.1 var(--fd); letter-spacing: .01em; cursor: pointer; box-shadow: 0 14px 34px -14px rgba(255, 106, 0, .85), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .12s, filter .15s, opacity .15s; }
.q-cta:hover { filter: brightness(1.06); }
.q-cta:active { transform: scale(.985); }
.q-cta:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.4); box-shadow: none; }
.q-cta:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.q-cta.pulse:not(:disabled)::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: q-shine 2.6s ease-in-out infinite; }
@keyframes q-shine { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.q-cta-note { text-align: center; font-size: 12.5px; color: var(--dim); margin: -8px 0 0; display: flex; justify-content: center; gap: 6px; align-items: center; }

/* Campos */
.q-field { display: grid; gap: 12px; }
.q-input { width: 100%; min-height: 60px; border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 18px; font-size: 18px; font-weight: 600; background: var(--surface); color: var(--fg); transition: border-color .15s, box-shadow .15s; }
.q-input::placeholder { color: var(--dim); font-weight: 500; }
.q-input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 4px var(--or-soft); }
.q-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); cursor: pointer; }
.q-consent input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--or); flex: none; }
.q-consent a { color: var(--muted); }
.q-error { color: var(--or-3); font-size: 14px; text-align: center; min-height: 1em; margin: -4px 0 0; }

/* Diagnóstico */
.q-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 20px 20px 22px; display: grid; gap: 12px; font-size: 16px; color: #DAD8D2; overflow: hidden; }
.q-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--or-3), var(--or-2)); }
.q-card p { margin: 0; }
.q-card mark { background: none; color: var(--or); font-weight: 700; }
.q-card-tag { font: 800 11px/1 var(--fd); letter-spacing: .14em; text-transform: uppercase; color: var(--or-3); }
.q-question { font: 800 20px/1.3 var(--fd); letter-spacing: -0.015em; text-align: center; margin: 2px 0 0; text-wrap: balance; }

/* Recibo da hospedagem */
.q-receipt { border: 1px dashed var(--line-2); border-radius: 16px; padding: 6px 16px; background: var(--surface); }
.q-receipt div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.q-receipt div:last-child { border-bottom: 0; }
.q-receipt span { color: var(--muted); }
.q-receipt span small { display: block; font-size: 12px; color: var(--dim); }
.q-receipt b { font: 800 16px/1.2 var(--fd); white-space: nowrap; text-align: right; }
.q-receipt b.or { color: var(--or); }
.q-receipt b s { color: var(--dim); font-weight: 600; font-size: 13px; margin-right: 6px; }

/* Carregamento (mostra o trabalho acontecendo) */
.q-load { display: grid; gap: 24px; justify-items: center; padding-top: 18px; }
.q-ring { position: relative; width: 168px; height: 168px; }
.q-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.q-ring .trk { fill: none; stroke: var(--raised); stroke-width: 10; }
.q-ring .bar { fill: none; stroke: url(#q-grad); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(255, 122, 26, .55)); }
.q-ring-txt { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2px; }
.q-ring-txt b { font: 800 40px/1 var(--fd); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.q-ring-txt span { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.q-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.q-tasks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--dim); font-weight: 600; transition: color .3s, border-color .3s, background .3s; }
.q-tasks li small { display: block; font-weight: 500; font-size: 12.5px; color: var(--dim); }
.q-tasks li i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; }
.q-tasks li.run { color: var(--fg); border-color: var(--line-2); }
.q-tasks li.run i { border-color: var(--raised-2); border-top-color: var(--or); animation: q-spin .8s linear infinite; }
.q-tasks li.done { color: var(--fg); }
.q-tasks li.done i { border-color: var(--or); background: var(--or); animation: q-pop .28s cubic-bezier(.3,1.6,.5,1); }
.q-tasks li.done i::after { content: ""; width: 9px; height: 5px; border-left: 2.5px solid #140A03; border-bottom: 2.5px solid #140A03; transform: rotate(-45deg) translate(1px, -1px); }
@keyframes q-spin { to { transform: rotate(360deg); } }

/* Resultado */
.q-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--or-line); box-shadow: 0 0 0 6px var(--or-soft), 0 30px 60px -30px rgba(255, 90, 0, .55); }
.q-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.q-video-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1d1410, #000 70%); color: var(--muted); font-weight: 600; text-align: center; padding: 20px; }
.q-video-ph span { display: grid; gap: 12px; justify-items: center; }
.q-video-ph i { width: 70px; height: 70px; border-radius: 50%; background: var(--or); color: #140A03; display: grid; place-items: center; font-style: normal; font-size: 24px; padding-left: 4px; box-shadow: 0 0 0 10px rgba(255,122,26,.18); }
/* VSL vertical do vturb (9:16, até 400px) */
.q-vsl { width: 100%; max-width: 400px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--or-line); box-shadow: 0 0 0 6px var(--or-soft), 0 30px 60px -30px rgba(255, 90, 0, .55); }
/* Delay do vturb: escondido até o player liberar (ele troca para display:block) */
.esconder { display: none; }

/* Agenda (Cal.com embutido): um cartão só, nas cores do quiz */
.q-book { display: grid; gap: 14px; margin-top: 10px; padding-top: 26px; border-top: 1px solid var(--line); }
.q-book-head { display: grid; gap: 10px; justify-items: center; text-align: center; }
.q-book-tag { color: var(--or-3); font: 800 11.5px/1 var(--fd); letter-spacing: .16em; text-transform: uppercase; }
.q-book-t { font: 800 22px/1.25 var(--fd); margin: 0; max-width: 30ch; text-wrap: balance; }
.q-chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.q-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: #DAD8D2; font-size: 13.5px; font-weight: 600; }
.q-chips svg { width: 16px; height: 16px; fill: none; stroke: var(--or); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.q-cal-wrap { position: relative; }
.q-cal { position: relative; z-index: 1; transition: opacity .35s ease; }
.q-cal iframe { display: block; width: 100% !important; border: 0; }
.q-cal-load { position: absolute; inset: 0; z-index: 2; display: none; place-items: center; align-content: center; gap: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--muted); font-size: 14.5px; font-weight: 600; }
.q-cal-load i { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--or); animation: q-spin .8s linear infinite; }
.q-cal-wrap.is-loading { min-height: 520px; }
.q-cal-wrap.is-loading .q-cal-load { display: grid; }
.q-cal-wrap.is-loading .q-cal { opacity: 0; }
.q-cal-note { margin: 0; text-align: center; color: var(--dim); font-size: 13.5px; }
.q-reserved { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.q-reserved i { width: 44px; height: 44px; border-radius: 12px; background: rgba(61, 220, 132, .14); display: grid; place-items: center; }
.q-reserved i::after { content: ""; width: 14px; height: 8px; border-left: 3px solid var(--ok); border-bottom: 3px solid var(--ok); transform: rotate(-45deg) translate(1px, -2px); }
.q-reserved b { display: block; font: 800 17px/1.3 var(--fd); margin-bottom: 4px; }
.q-reserved span { color: var(--muted); font-size: 15px; }

/* Rodapé */
.q-foot { padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 12.5px; color: var(--dim); }
.q-foot a { color: var(--dim); }
.q-noscript { padding: 40px 20px; text-align: center; }

/* Desktop */
@media (min-width: 768px) {
  .q-shell { max-width: 660px; min-height: 0; margin: 28px auto 0; background: rgba(20, 20, 23, .72); border: 1px solid var(--line); border-radius: 28px; backdrop-filter: blur(8px); box-shadow: 0 40px 100px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset; transition: max-width .35s ease; }
  .q-shell.q-wide { max-width: 940px; }
  .q-top { position: static; background: none; padding: 26px 52px 12px; }
  .q-main { padding: 18px 52px 44px; }
  .q-step { gap: 20px; }
  .q-head { font-size: 35px; }
  .q-top { padding-top: 22px; }
  .q-title { font-size: 29px; }
  .q-sub { font-size: 16.5px; }
  .q-opt { min-height: 66px; font-size: 16.5px; }
  .q-cta { font-size: 18px; min-height: 64px; }
  .q-card { padding: 24px 26px 24px 28px; font-size: 16.5px; }
  .q-question { font-size: 22px; }
  .q-price .now b { font-size: 34px; }
  .q-wide .q-head { font-size: 42px; max-width: 800px; justify-self: center; }
  .q-wide .q-sub { max-width: 640px; justify-self: center; }
  .q-book-t { font-size: 26px; }
  .q-cal-wrap.is-loading { min-height: 600px; }
  .q-foot { padding: 22px 52px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}