/* =========================================================================
   Guidelyze · LP Quiz "Mapa do Seu Painel"
   Step-flow single-page: uma tela visível por vez via .is-active.
   3 modos via html[data-mode] — tokens em tokens/{livro,app,future}.css.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-body);font-size:var(--text-md);line-height:var(--lead-relaxed);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
.wrap{max-width:760px;margin:0 auto;padding:0 var(--pad-x)}

.eyebrow{
  font-size:var(--text-xs);letter-spacing:var(--track-widest);text-transform:uppercase;
  color:var(--accent-deep);font-weight:600;margin:0 0 var(--space-3);
}

/* ===== Botões ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:14px 26px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:var(--text-base);font-weight:600;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast),box-shadow var(--dur-fast);
}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--accent);color:var(--paper);box-shadow:0 6px 20px rgba(92,143,122,0.28)}
.btn--primary:hover{background:var(--accent-deep);box-shadow:0 10px 28px rgba(92,143,122,0.34)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn--ghost:hover{background:var(--bg-alt);border-color:var(--accent)}
.btn--lg{padding:17px 34px;font-size:var(--text-md)}
.btn--sm{padding:9px 16px;font-size:var(--text-sm)}

/* ===== Nav ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,246,236,0.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav__logo{height:26px;width:auto}
.nav__actions{display:flex;align-items:center;gap:var(--space-3)}
.nav__tone{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:var(--radius-pill);
  background:transparent;border:1.5px solid var(--line);
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--fg-soft);
  cursor:pointer;
}
.nav__tone:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--bg-alt)}
.nav__tone svg{flex-shrink:0;opacity:.7}

/* ===== Quiz (container das telas) ===== */
.quiz{padding:var(--space-12) 0 var(--space-16);min-height:60dvh}

/* Step-flow: só .is-active é visível */
.screen{
  display:none;
  text-align:center;
  animation:screenIn .35s var(--ease-out);
}
.screen.is-active{display:block}
@keyframes screenIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ===== Bolha (capa + loading) ===== */
.bubble{
  width:clamp(140px,28vw,180px);aspect-ratio:1;
  margin:0 auto var(--space-6);
  filter:drop-shadow(0 12px 32px rgba(60,90,69,0.16));
  animation:bubBreath 5s ease-in-out infinite;
}
.bubble--breath{animation:bubBreath 1.8s ease-in-out infinite}
@keyframes bubBreath{
  50%{transform:scale(1.05);filter:drop-shadow(0 18px 42px rgba(60,90,69,0.22))}
}

/* ===== Capa ===== */
.quiz__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(32px,5.2vw,var(--text-4xl));line-height:1.05;letter-spacing:var(--track-tight);
  margin:0 0 var(--space-4);color:var(--fg);max-width:22ch;margin-inline:auto;
}
.quiz__sub{font-size:var(--text-lg);color:var(--fg-soft);margin:0 auto var(--space-8);max-width:50ch}
.quiz__note{font-size:var(--text-sm);color:var(--fg-softer);margin:var(--space-4) 0 0}

/* ===== Telas de pergunta ===== */
.quiz__progress{
  font-family:var(--font-body);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:var(--track-wide);
  color:var(--fg-softer);font-weight:600;margin:0 0 var(--space-4);
}
.quiz__q{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,3.8vw,var(--text-3xl));line-height:1.15;
  margin:0 auto var(--space-8);max-width:30ch;color:var(--fg);letter-spacing:var(--track-tight);
}

.opts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);
  max-width:560px;margin:0 auto;
}
.opts--col{grid-template-columns:1fr;max-width:520px}
@media (max-width:560px){.opts{grid-template-columns:1fr}}

.opt{
  background:var(--paper);border:1.5px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:var(--space-5) var(--space-4);
  font-family:var(--font-body);font-size:var(--text-base);font-weight:500;
  color:var(--fg);text-align:center;cursor:pointer;
  transition:border-color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast);
}
.opt:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.opt.is-picked{
  border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep);
  transform:translateY(-2px);box-shadow:0 0 0 3px rgba(92,143,122,0.14);
}

/* ===== Loading ===== */
.screen--loading{padding:var(--space-12) 0}
.quiz__loading{
  font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:var(--text-xl);color:var(--fg-soft);margin:0;
}

/* ===== Reveal ===== */
.reveal__nome{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(36px,6vw,var(--text-5xl));line-height:1;
  color:var(--accent-deep);margin:0 0 var(--space-4);letter-spacing:var(--track-tight);
}
.reveal__desc{
  font-size:var(--text-lg);color:var(--fg-soft);
  max-width:48ch;margin:0 auto var(--space-8);line-height:var(--lead-snug);
}

.reveal__box{
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-xl);padding:var(--space-6);
  text-align:left;max-width:600px;margin:0 auto var(--space-5);
  box-shadow:var(--shadow-soft);
}
.reveal__box--cego{border-left:3px solid var(--alert-warn)}
.reveal__box--prompt{border-left:3px solid var(--accent)}

.reveal__label{
  font-size:var(--text-xs);letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--fg-softer);font-weight:600;margin:0 0 var(--space-2);
}
.reveal__cego{font-size:var(--text-md);color:var(--fg);margin:0;line-height:var(--lead-snug)}

.reveal__prompt{
  font-family:ui-monospace,Menlo,monospace;font-size:13px;line-height:1.55;
  white-space:pre-wrap;color:var(--fg);
  background:var(--bg-alt);border-radius:var(--radius-md);
  padding:var(--space-4);margin:0 0 var(--space-4);
  max-height:280px;overflow-y:auto;
}

/* ===== CTA + grid ===== */
.cta__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(26px,4vw,var(--text-3xl));line-height:1.1;
  margin:var(--space-2) 0 var(--space-8);color:var(--fg);
}

.prompts-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);
  margin-bottom:var(--space-8);
}
@media (max-width:600px){.prompts-grid{grid-template-columns:repeat(2,1fr)}}

.prompt-tile{
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:var(--space-4) var(--space-3);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  position:relative;
  filter:blur(.4px);opacity:.72;
}
.prompt-tile.is-given{opacity:1;filter:none;border-color:var(--accent);background:var(--accent-soft)}
.prompt-tile__num{
  font-family:ui-monospace,Menlo,monospace;font-size:10px;
  color:var(--fg-softer);font-weight:700;
}
.prompt-tile__name{font-size:var(--text-sm);font-weight:600;color:var(--fg);text-align:left;line-height:1.3}
.prompt-tile__lock{position:absolute;top:8px;right:8px;font-size:12px;opacity:.6}
.prompt-tile__given{
  font-size:10px;color:var(--accent-deep);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--track-wide);
}

.cta-card{
  background:var(--paper);border:2px solid var(--accent);
  border-radius:var(--radius-xl);padding:var(--space-7);text-align:center;
  box-shadow:var(--shadow-lift);
  max-width:480px;margin:0 auto;
}
.cta-card__price{
  font-family:var(--font-display);font-size:var(--text-5xl);color:var(--accent-deep);
  line-height:1;margin:0;
}
.cta-card__sub{font-size:var(--text-sm);color:var(--fg-soft);margin:var(--space-3) 0 var(--space-5);line-height:var(--lead-snug)}
.cta-card__note{font-size:var(--text-xs);color:var(--fg-softer);margin:var(--space-3) 0 0}

.quiz__reset{
  display:inline-block;margin-top:var(--space-6);
  background:none;border:0;color:var(--fg-softer);
  font-family:var(--font-body);font-size:var(--text-sm);cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;
}
.quiz__reset:hover{color:var(--fg)}

/* ===== Toast ===== */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--fg);color:var(--paper);padding:12px 20px;border-radius:var(--radius-pill);
  font-size:var(--text-sm);box-shadow:0 12px 32px rgba(28,28,26,0.32);
  opacity:0;transition:opacity .25s,transform .25s;z-index:200;
}
.toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Footer ===== */
.footer{padding:var(--space-10) 0 var(--space-12);border-top:1px solid var(--line-soft);background:var(--bg)}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center}
.footer__logo{height:22px;opacity:.7}
.footer__fine{font-size:var(--text-xs);color:var(--fg-softer);max-width:46ch;margin:0;line-height:var(--lead-normal)}


/* =========================================================================
   Modal · escolha de tom
   ========================================================================= */
.tone-modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:var(--pad-x);
  opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out);
}
.tone-modal.is-open{opacity:1;pointer-events:auto}
.tone-modal[hidden]{display:none}

.tone-modal__backdrop{position:absolute;inset:0;background:rgba(28,28,26,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tone-modal__card{
  position:relative;z-index:1;background:var(--paper);color:var(--fg);
  border-radius:var(--radius-xl);padding:var(--space-10) var(--space-8) var(--space-8);
  max-width:460px;width:100%;
  box-shadow:0 30px 80px rgba(28,28,26,0.30), 0 12px 32px rgba(28,28,26,0.15);
  transform:translateY(8px) scale(.98);transition:transform var(--dur-base) var(--ease-out);
}
.tone-modal.is-open .tone-modal__card{transform:none}
.tone-modal__close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:transparent;border:0;font-size:24px;line-height:1;color:var(--fg-softer);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.tone-modal__close:hover{background:var(--bg-alt);color:var(--fg)}
.tone-modal__title{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);line-height:var(--lead-tight);margin:0 0 var(--space-2)}
.tone-modal__sub{font-size:var(--text-base);color:var(--fg-soft);margin:0 0 var(--space-6)}
.tone-modal__opts{display:flex;flex-direction:column;gap:var(--space-2)}

.tone-opt{
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--bg-alt);border:1.5px solid transparent;border-radius:var(--radius-lg);padding:var(--space-3);
  font-family:var(--font-body);color:var(--fg);text-align:left;cursor:pointer;
  transition:border-color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast);
}
.tone-opt:hover{border-color:var(--accent-soft);transform:translateY(-1px)}
.tone-opt.is-selected{border-color:var(--accent);background:var(--paper);box-shadow:0 0 0 3px rgba(92,143,122,0.14)}
.tone-opt__swatch{
  width:54px;height:54px;border-radius:var(--radius-md);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;font-weight:700;overflow:hidden;
  border:1px solid rgba(0,0,0,0.05);
}
.tone-opt__swatch--livro{background:linear-gradient(135deg,#FAF6EC,#EFE6CE);color:#3D5A45;font-family:'Fraunces',serif;font-style:italic;font-weight:400}
.tone-opt__swatch--app{background:linear-gradient(135deg,#1A2042,#131527);color:#F0F2F8;font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.02em}
.tone-opt__swatch--future{background:radial-gradient(circle at 30% 25%,rgba(193,140,255,.55),transparent 60%),linear-gradient(135deg,#1A0D2E,#0D0B1A);color:#F4F1FF;font-family:'Manrope',sans-serif;font-weight:800}
.tone-opt__swatch--future span{background:linear-gradient(135deg,#C18CFF,#FF8CC8 50%,#8CB8FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tone-opt__body{flex:1;min-width:0}
.tone-opt__body strong{display:block;font-size:var(--text-md);font-weight:600;color:var(--fg)}
.tone-opt__body span{display:block;font-size:var(--text-sm);color:var(--fg-soft);margin-top:2px}
.tone-opt__chk{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:var(--accent);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.8);transition:opacity var(--dur-fast),transform var(--dur-fast);
}
.tone-opt__chk svg{width:13px;height:13px}
.tone-opt.is-selected .tone-opt__chk{opacity:1;transform:scale(1)}
.tone-modal__hint{font-size:var(--text-xs);color:var(--fg-softer);text-align:center;margin:var(--space-6) 0 0;line-height:var(--lead-normal)}


/* =========================================================================
   Modos escuros (app + future) — ajustes mínimos
   ========================================================================= */
html[data-mode="app"] body,
html[data-mode="future"] body{font-family:'Manrope', system-ui, sans-serif}

/* Reveal nome com gradient nos modos escuros */
html[data-mode="app"] .reveal__nome{
  background:linear-gradient(135deg,#B7EAFF,#74C5FF,#5A8DFF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-style:normal;
}
html[data-mode="future"] .reveal__nome{
  background:linear-gradient(135deg,#C18CFF,#FF8CC8,#8CB8FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-style:normal;
}

/* Cards (opt, reveal__box, prompt-tile, cta-card) ganham glass nos modos escuros */
html[data-mode="app"] .opt,
html[data-mode="future"] .opt,
html[data-mode="app"] .reveal__box,
html[data-mode="future"] .reveal__box,
html[data-mode="app"] .prompt-tile,
html[data-mode="future"] .prompt-tile{
  background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.10);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
html[data-mode="app"] .prompt-tile.is-given,
html[data-mode="future"] .prompt-tile.is-given{
  background:rgba(255,255,255,0.10);border-color:var(--accent);
}

/* Prompt monospace block — fundo darker dentro do card */
html[data-mode="app"] .reveal__prompt,
html[data-mode="future"] .reveal__prompt{
  background:rgba(0,0,0,0.30);color:var(--fg);
}

/* Botão primary nos modos escuros usa gradient */
html[data-mode="app"] .btn--primary{
  background:linear-gradient(135deg,#B7EAFF,#74C5FF,#5A8DFF);color:#0F1730;
  box-shadow:0 0 24px rgba(116,197,255,0.34);
}
html[data-mode="app"] .btn--primary:hover{filter:brightness(1.08)}
html[data-mode="future"] .btn--primary{
  background:linear-gradient(135deg,#C18CFF,#FF8CC8 50%,#8CB8FF);color:#0D0B1A;
  box-shadow:0 0 28px rgba(193,140,255,0.40);
}
html[data-mode="future"] .btn--primary:hover{filter:brightness(1.08)}

/* Opt picked nos modos escuros */
html[data-mode="app"] .opt.is-picked{
  background:rgba(116,197,255,0.14);border-color:#74C5FF;color:#B7EAFF;
  box-shadow:0 0 0 3px rgba(116,197,255,0.18);
}
html[data-mode="future"] .opt.is-picked{
  background:rgba(193,140,255,0.16);border-color:#C18CFF;color:#F4F1FF;
  box-shadow:0 0 0 3px rgba(193,140,255,0.18);
}

/* Cta-card destaque */
html[data-mode="app"] .cta-card,
html[data-mode="future"] .cta-card{
  background:rgba(255,255,255,0.04);border-color:var(--accent);
  box-shadow:0 12px 36px rgba(0,0,0,0.35), 0 0 24px rgba(116,197,255,0.18);
}

/* Toast no escuro */
html[data-mode="app"] .toast,
html[data-mode="future"] .toast{background:rgba(255,255,255,0.95);color:#131527}

/* Nav + footer adaptam */
html[data-mode="app"] .nav,
html[data-mode="future"] .nav{background:rgba(19,21,39,0.72);border-bottom-color:rgba(255,255,255,0.08)}
html[data-mode="app"] .footer,
html[data-mode="future"] .footer{border-top-color:rgba(255,255,255,0.08)}