/* =========================================================================
   Guidelyze · Landing Page
   Reusa tokens de assets/css/tokens/livro.css (:root). Aqui só layout da LP.
   ========================================================================= */

*,*::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:920px;margin:0 auto;padding:0 var(--pad-x)}

.eyebrow{
  font-family:var(--font-body);
  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);
}

h1,h2,h3{margin:0;font-weight:400}
h2{font-family:var(--font-display);font-size:var(--text-3xl);line-height:var(--lead-tight);color:var(--fg);letter-spacing:var(--track-tight);margin-bottom:var(--space-5)}
h3{font-family:var(--font-body);font-weight:600;font-size:var(--text-lg);margin-bottom:var(--space-2)}

/* ===== 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)}
.btn--lg{padding:17px 34px;font-size:var(--text-md)}
.btn--sm{padding:9px 16px;font-size:var(--text-sm)}
.btn--block{width:100%}

/* ===== 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}

/* ===== Hero ===== */
.hero{
  padding:var(--space-16) 0 var(--space-12);
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 0%, var(--paper-warm), var(--paper) 60%);
}
.hero__inner{display:flex;flex-direction:column;align-items:center}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(38px, 7vw, var(--text-5xl));
  line-height:1.02;letter-spacing:var(--track-tight);
  max-width:16ch;margin-bottom:var(--space-5);
}
.hero__title em{font-style:italic;color:var(--accent-deep)}
.hero__sub{font-size:var(--text-lg);color:var(--fg-soft);max-width:54ch;margin:0 0 var(--space-8)}
.hero__cta{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.hero__cta-note{font-size:var(--text-sm);color:var(--fg-softer)}
.hero__media{width:100%;max-width:680px;margin-top:var(--space-12)}
.hero__media-ph{
  aspect-ratio:16/9;border-radius:var(--radius-lg);
  border:1.5px dashed var(--line);background:var(--bg-alt);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
  color:var(--fg-softer);font-size:var(--text-sm);
}
.hero__media-icon{
  width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:4px;
}

/* ===== Bands ===== */
.band{padding:var(--space-16) 0}
.band--alt{background:var(--bg-alt)}
.band--cta{background:var(--accent-deep);color:var(--paper);text-align:center}
.band--cta h2{color:var(--paper)}
.band--cta p{color:rgba(250,246,236,0.86);margin-bottom:var(--space-6)}

/* ===== Prose ===== */
.prose{max-width:640px;margin:0 auto}
.prose--center{text-align:center}
.prose p{margin:0 0 var(--space-4);color:var(--fg-soft)}
.prose strong{color:var(--fg);font-weight:600}
.prose blockquote{
  margin:var(--space-6) 0 0;padding:var(--space-4) var(--space-6);
  border-left:3px solid var(--accent);
  font-family:var(--font-display);font-style:italic;font-size:var(--text-xl);
  color:var(--accent-deep);line-height:var(--lead-snug);
}

/* ===== Feature grid ===== */
.feature-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);
  margin-top:var(--space-10);
}
.feature{
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);padding:var(--space-6);
  box-shadow:var(--shadow-soft);
}
.feature p{color:var(--fg-soft);font-size:var(--text-base);margin:0}
@media (max-width:760px){.feature-grid{grid-template-columns:1fr}}

/* ===== Convite aos 3 modos ===== */
.modes-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);
  margin-top:var(--space-10);
}
@media (max-width:880px){.modes-grid{grid-template-columns:1fr}}

.mode-card{
  background:var(--paper);border:1.5px solid var(--line-soft);
  border-radius:var(--radius-xl);padding:var(--space-6);
  text-align:left;cursor:pointer;font-family:inherit;color:inherit;
  position:relative;
  transition:transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow:var(--shadow-soft);
}
.mode-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent-soft);
  box-shadow:var(--shadow-lift);
}
.mode-card.is-selected{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(92,143,122,0.16), var(--shadow-lift);
}

.mode-card__swatch{
  position:relative;width:100%;aspect-ratio:5/3;
  border-radius:var(--radius-lg);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--space-4);
  border:1px solid rgba(0,0,0,0.06);
}
.mode-card__sample{font-size:62px;line-height:1;font-weight:700}
.mode-card__stripe{position:absolute;left:14px;right:14px;bottom:10px;height:4px;border-radius:3px}

/* ---- Swatch · Livro (cream + sage + Fraunces) ---- */
.mode-card__swatch--livro{
  background:linear-gradient(135deg, var(--paper), var(--paper-deep));
  color:var(--ink);
}
.mode-card__swatch--livro .mode-card__sample{
  font-family:var(--font-display);font-style:italic;font-weight:400;color:var(--accent-deep);
}
.mode-card__swatch--livro .mode-card__stripe{background:var(--accent)}

/* ---- Swatch · App (navy + glass + Manrope + glow ciano) ---- */
.mode-card__swatch--app{
  background:linear-gradient(135deg, #1A2042 0%, #131527 100%);
  color:#F0F2F8;
}
.mode-card__swatch--app .mode-card__sample{
  font-family:'Manrope', system-ui, sans-serif;font-weight:800;letter-spacing:-.02em;
}
.mode-card__swatch--app .mode-card__stripe{
  background:linear-gradient(90deg,#B7EAFF,#74C5FF,#5A8DFF);
  box-shadow:0 0 10px rgba(116,197,255,0.6);
}

/* ---- Swatch · Aurora/Future (gradient violet→rosa→azul) ---- */
.mode-card__swatch--future{
  background:
    radial-gradient(circle at 30% 25%, rgba(193,140,255,.55), transparent 60%),
    radial-gradient(circle at 75% 75%, rgba(255,140,200,.42), transparent 55%),
    linear-gradient(135deg, #1A0D2E, #0D0B1A);
  color:#F4F1FF;
}
.mode-card__swatch--future .mode-card__sample{
  font-family:'Manrope', system-ui, sans-serif;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(135deg,#C18CFF,#FF8CC8 50%,#8CB8FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mode-card__swatch--future .mode-card__stripe{
  background:linear-gradient(90deg,#C18CFF,#FF8CC8,#8CB8FF);
  box-shadow:0 0 12px rgba(193,140,255,0.6);
}

.mode-card__name{
  font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);
  margin:0 0 var(--space-1);color:var(--fg);
}
.mode-card__tag{
  font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--track-wide);
  color:var(--accent-deep);font-weight:600;margin:0 0 var(--space-3);
}
.mode-card__desc{font-size:var(--text-sm);color:var(--fg-soft);margin:0}

.mode-card__check{
  position:absolute;top:14px;right:14px;
  width:26px;height:26px;border-radius:50%;
  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);
  box-shadow:0 4px 12px rgba(92,143,122,0.36);
}
.mode-card__check svg{width:14px;height:14px}
.mode-card.is-selected .mode-card__check{opacity:1;transform:scale(1)}

.modes-hint{
  text-align:center;margin:var(--space-8) auto 0;
  font-size:var(--text-sm);color:var(--fg-softer);max-width:50ch;
}
.modes-hint strong{color:var(--accent-deep);font-weight:700}

/* ===== Pilha de valor + preço ===== */
.offer{display:grid;grid-template-columns:1fr;gap:var(--space-10)}
.stack{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-8);align-items:start;margin-top:var(--space-8)}
@media (max-width:760px){.stack{grid-template-columns:1fr}}

.stack__list{list-style:none;margin:0;padding:0}
.stack__list li{
  display:flex;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-3) 0;border-bottom:1px solid var(--line-soft);
  color:var(--fg-soft);font-size:var(--text-base);
}
.stack__list li span:last-child{color:var(--fg-softer);text-decoration:line-through;white-space:nowrap}
.stack__sum{font-weight:700;color:var(--fg)!important;border-bottom:0!important;padding-top:var(--space-4)!important}
.stack__sum span:last-child{color:var(--fg)!important;text-decoration:line-through;opacity:.5}

.price-card{
  background:var(--paper);border:2px solid var(--accent);
  border-radius:var(--radius-xl);padding:var(--space-8);text-align:center;
  box-shadow:var(--shadow-lift);position:sticky;top:84px;
}
.price-card__label{font-size:var(--text-sm);color:var(--fg-softer);text-transform:uppercase;letter-spacing:var(--track-wide);margin:0 0 var(--space-2)}
.price-card__value{font-family:var(--font-display);font-size:var(--text-5xl);color:var(--accent-deep);line-height:1;margin:0}
.price-card__value span{font-size:var(--text-2xl)}
.price-card__note{font-size:var(--text-sm);color:var(--fg-softer);margin:var(--space-2) 0 var(--space-6)}
.price-card__guarantee{font-size:var(--text-xs);color:var(--fg-soft);margin:var(--space-4) 0 0;line-height:var(--lead-snug)}

/* ===== FAQ ===== */
.faq{max-width:680px;margin:var(--space-8) auto 0;display:grid;gap:var(--space-3)}
.faq details{
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);
}
.faq summary{font-weight:600;cursor:pointer;list-style:none;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent);font-size:var(--text-lg);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:var(--space-3) 0 0;color:var(--fg-soft);font-size:var(--text-base)}

/* ===== Footer ===== */
.footer{padding:var(--space-12) 0;border-top:1px solid var(--line-soft);background:var(--bg)}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);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)}


/* =========================================================================
   Nav · botão de tom (abre modal)
   ========================================================================= */
.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;
  transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast);
}
.nav__tone:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--bg-alt)}
.nav__tone svg{flex-shrink:0;opacity:.7}


/* =========================================================================
   Modal · escolha de tom (estilo language picker)
   ========================================================================= */
.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;
  transition:background var(--dur-fast),color var(--dur-fast);
}
.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);
}


/* =========================================================================
   Ajustes mínimos pra LP ficar legível nos modos app + future
   (a maioria já adapta sozinho via tokens — aqui só polish onde precisa)
   ========================================================================= */

/* App e Future: usar Manrope no body pra alinhar tom */
html[data-mode="app"] body,
html[data-mode="future"] body{
  font-family:'Manrope', system-ui, sans-serif;
}

/* Botão primary nos modos escuros precisa contraste do texto */
html[data-mode="app"] .btn--primary{background:#74C5FF;color:#0F1730;box-shadow:0 0 24px rgba(116,197,255,0.34)}
html[data-mode="app"] .btn--primary:hover{background:#5A8DFF;color:#fff}

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)}

/* Hero italic accent: app/future ganham gradient text */
html[data-mode="app"] .hero__title em{
  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"] .hero__title em{
  background:linear-gradient(135deg,#C18CFF,#FF8CC8,#8CB8FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-style:normal;
}

/* Bandas: gradient do hero adapta cor base */
html[data-mode="app"] .hero,
html[data-mode="future"] .hero{
  background:radial-gradient(ellipse at 50% 0%, var(--paper-warm), var(--paper) 60%);
}

/* Cards (feature, price-card, faq, mode-card) ganham um leve glass nos modos escuros */
html[data-mode="app"] .feature,
html[data-mode="app"] .faq details,
html[data-mode="future"] .feature,
html[data-mode="future"] .faq details{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
html[data-mode="app"] .price-card,
html[data-mode="future"] .price-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);
}

/* Nav: backdrop adapta */
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);
}

/* Footer */
html[data-mode="app"] .footer,
html[data-mode="future"] .footer{border-top-color:rgba(255,255,255,0.08)}

/* mode-card (a seção existente) não muda — ela mostra previews fixas dos 3 modos */
html[data-mode="app"] .mode-card,
html[data-mode="future"] .mode-card{
  background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.10);
}
html[data-mode="app"] .mode-card__desc,
html[data-mode="future"] .mode-card__desc{color:var(--ink-2,#C6CADD)}


/* ===== Banda CTA final (.band--cta) nos modos escuros =====
   Em livro a banda usa accent-deep (sage escuro) com texto cream — boa.
   Em app/future, accent-deep vira azul claro/lavanda — texto fica washed out.
   Aqui ela vira "spotlight" com fundo dark + glow do accent.            */

html[data-mode="app"] .band--cta{
  background:
    radial-gradient(ellipse at 50% 50%, rgba(116,197,255,0.22), transparent 65%),
    linear-gradient(180deg, #131527, #181B30 50%, #131527);
  color:#F0F2F8;
  position:relative;overflow:hidden;
}
html[data-mode="app"] .band--cta h2{color:#F0F2F8}
html[data-mode="app"] .band--cta p{color:#C6CADD}
html[data-mode="app"] .band--cta .btn--primary{
  background:linear-gradient(135deg, #B7EAFF 0%, #74C5FF 50%, #5A8DFF 100%);
  color:#0F1730;
  box-shadow:0 0 42px rgba(116,197,255,0.55), 0 8px 24px rgba(0,0,0,0.4);
}
html[data-mode="app"] .band--cta .btn--primary:hover{
  box-shadow:0 0 56px rgba(116,197,255,0.75), 0 8px 28px rgba(0,0,0,0.45);
}

html[data-mode="future"] .band--cta{
  background:
    radial-gradient(ellipse at 30% 50%, rgba(193,140,255,0.42), transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(255,140,200,0.30), transparent 55%),
    linear-gradient(135deg, #1A0D2E, #0D0B1A);
  color:#F4F1FF;
  position:relative;overflow:hidden;
}
html[data-mode="future"] .band--cta h2{
  background:linear-gradient(135deg, #C18CFF, #FF8CC8 50%, #8CB8FF);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
html[data-mode="future"] .band--cta p{color:rgba(244,241,255,0.80)}
html[data-mode="future"] .band--cta .btn--primary{
  background:#F4F1FF;color:#0D0B1A;
  box-shadow:0 0 40px rgba(193,140,255,0.65), 0 8px 24px rgba(0,0,0,0.4);
}
html[data-mode="future"] .band--cta .btn--primary:hover{
  background:linear-gradient(135deg, #FFE0FA, #F4F1FF, #DDE5FF);
  filter:none;
  box-shadow:0 0 52px rgba(193,140,255,0.80), 0 8px 28px rgba(0,0,0,0.45);
}