/* ==========================================================================
   DO ZERO AO KINDLE — style.css
   Dark premium · glassmorphism · acentos dourados
   Mobile first — breakpoints: 561 / 768 / 960 / 1080 / 1200
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:        #070709;
  --bg-2:      #0D0D10;
  --graphite:  #16161B;
  --glass:     rgba(255,255,255,.07);
  --glass-brd: rgba(255,255,255,.14);
  --hairline:  rgba(255,255,255,.07);
  --white:     #F5F5F7;
  --gray:      #A7A7B0;
  --gray-dim:  #6E6E76;
  --gold:      #D6AD62;
  --gold-lt:   #F0D58F;
  --gold-dk:   #8D6932;
  --font:      'Manrope', system-ui, sans-serif;
  --mono:      'IBM Plex Mono', monospace;
  --ease-out:  cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--white);
  font:400 16px/1.6 var(--font);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }
s{ text-decoration-color:var(--gray-dim); }

::selection{ background:rgba(214,173,98,.28); color:var(--white); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:fixed; top:-60px; left:16px; z-index:200;
  background:var(--gold); color:#181206; font-weight:800;
  padding:12px 18px; border-radius:10px; transition:top .3s;
}
.skip-link:focus{ top:16px; }

/* ---------- Ícones ---------- */
.icon{
  width:18px; height:18px; flex:none;
  fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Utilidades ---------- */
.wrap{ width:min(1140px,92%); margin-inline:auto; position:relative; }
.gt{
  background:linear-gradient(160deg,#F0D58F 5%,#D6AD62 42%,#B58F52 64%,#8D6932 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gold{ color:var(--gold); font-style:normal; }

/* ==========================================================================
   FUNDO CINEMATOGRÁFICO
   ========================================================================== */
.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}
.bg-glow-a{
  background:
    radial-gradient(52% 42% at 82% -6%, rgba(214,173,98,.09), transparent 70%),
    radial-gradient(70% 55% at 50% 115%, rgba(13,13,16,.9), transparent 70%);
}
.bg-glow-b{
  background:radial-gradient(38% 34% at 8% 22%, rgba(255,255,255,.028), transparent 70%);
}

/* Grain sutil (textura de filme) */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
}

/* Partículas douradas — criadas via JS, poucas e lentas */
#particles{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.particle{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle, var(--gold-lt), rgba(214,173,98,0) 70%);
  animation:drift var(--dur,22s) ease-in-out infinite alternate;
}
@keyframes drift{
  0%  { transform:translate3d(0,0,0); }
  100%{ transform:translate3d(var(--dx,30px), var(--dy,-40px), 0); }
}
@media (prefers-reduced-motion:reduce){ .particle{ display:none; } }

/* Cursor glow — apenas desktop com ponteiro fino */
.cursor-glow{
  display:none; position:fixed; top:0; left:0; z-index:1;
  width:520px; height:520px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(214,173,98,.07), transparent 62%);
  transform:translate(-50%,-50%); opacity:0;
  transition:transform .55s ease-out, opacity .8s;
}
@media (hover:hover) and (pointer:fine){ .cursor-glow{ display:block; } }

/* Barra de progresso de leitura */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:110; pointer-events:none;
}
.progress i{
  display:block; height:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--gold-dk), var(--gold), var(--gold-lt));
}

main{ position:relative; z-index:2; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.header.scrolled{
  background:rgba(7,7,9,.72);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-bottom-color:var(--hairline);
}
.header-inner{
  width:min(1240px,94%); margin-inline:auto;
  height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand svg{ color:var(--gold); }
.brand-name{
  font-size:11px; font-weight:800; letter-spacing:.16em; color:var(--white);
}
.brand-name b{ color:var(--gold); font-weight:800; }

.nav-desktop{ display:none; gap:34px; }
.nav-desktop a{
  font-size:13.5px; font-weight:600; color:var(--gray);
  transition:color .25s;
}
.nav-desktop a:hover{ color:var(--white); }

.header-cta{ display:none; }

/* Hamburger */
.burger{
  width:44px; height:44px; border-radius:12px;
  background:var(--glass); border:1px solid var(--glass-brd);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{
  width:18px; height:1.5px; border-radius:2px; background:var(--white);
  transition:transform .35s var(--ease-out);
}
.burger.open span:nth-child(1){ transform:translateY(3.25px) rotate(45deg); }
.burger.open span:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg); }

/* Overlay do menu mobile */
.nav-overlay{
  position:fixed; inset:0; z-index:90;
  background:rgba(7,7,9,.9);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  display:flex; align-items:center; padding:90px 28px 44px;
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
.nav-overlay nav{ width:100%; display:flex; flex-direction:column; }
.nav-overlay a{
  font-size:25px; font-weight:800; letter-spacing:-.01em;
  padding:17px 0; border-bottom:1px solid var(--hairline);
  opacity:0; transform:translateY(16px);
  transition:opacity .5s, transform .5s var(--ease-out);
}
.nav-overlay.open{ opacity:1; visibility:visible; }
.nav-overlay.open a{ opacity:1; transform:none; }
.nav-overlay.open a:nth-child(1){ transition-delay:.08s; }
.nav-overlay.open a:nth-child(2){ transition-delay:.14s; }
.nav-overlay.open a:nth-child(3){ transition-delay:.20s; }
.nav-overlay.open a:nth-child(4){ transition-delay:.26s; }
.nav-overlay.open a:nth-child(5){ transition-delay:.34s; margin-top:30px; width:fit-content; border:0; }
body.no-scroll{ overflow:hidden; }

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:15px 28px;
  border-radius:14px; border:1px solid transparent;
  font-weight:800; font-size:14.5px; letter-spacing:.04em; text-transform:uppercase;
  transition:transform .25s, box-shadow .25s, border-color .25s, background .25s, color .25s;
  -webkit-tap-highlight-color:transparent;
}
.btn .icon{ transition:transform .25s; }

.btn-gold{
  background:linear-gradient(180deg,#F0D58F 0%,#D6AD62 48%,#B58A45 100%);
  color:#181206;
  border-color:rgba(240,213,143,.55);
  box-shadow:0 8px 26px rgba(214,173,98,.20), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 42px rgba(214,173,98,.32), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-gold:hover .icon{ transform:translateX(3px); }
.btn-gold:active{ transform:translateY(0); }

.btn-ghost{
  background:var(--glass); border-color:var(--glass-brd); color:var(--white);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.btn-ghost:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.3); }
.btn-ghost:hover .icon{ transform:translateX(3px); }

.btn-sm{ min-height:42px; padding:11px 20px; font-size:11.5px; border-radius:11px; }
.btn-lg{ min-height:56px; padding:18px 32px; font-size:15px; }
.btn-xl{ width:100%; min-height:62px; padding:21px 30px; font-size:clamp(14px,2.6vw,16.5px); }

/* ==========================================================================
   SEÇÕES — base
   ========================================================================== */
.section{ padding:clamp(78px,11vw,132px) 0; position:relative; }
.section-tight{ padding:clamp(60px,8vw,96px) 0; }
section[id]{ scroll-margin-top:86px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); margin-bottom:18px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:""; width:26px; height:1px; background:linear-gradient(-90deg,var(--gold),transparent); }

.sec-head{ max-width:660px; margin:0 auto clamp(42px,6vw,64px); text-align:center; }
.sec-head h2{
  font-size:clamp(27px,5.4vw,44px); font-weight:800; line-height:1.12; letter-spacing:-.015em;
}
.sec-sub{ color:var(--gray); font-size:clamp(15px,1.8vw,16.5px); line-height:1.65; margin-top:16px; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:118px 0 76px; overflow:hidden;
}
.hero-grid{
  display:grid; gap:52px; justify-items:center; text-align:center;
}
.hero-mark{
  position:absolute; right:-5%; top:6%; z-index:0; pointer-events:none; user-select:none;
  font-weight:800; font-size:clamp(240px,34vw,470px); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(214,173,98,.08);
  display:none;
}

.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  color:var(--gold-lt); text-transform:uppercase;
  border:1px solid rgba(214,173,98,.3); border-radius:999px;
  padding:9px 18px; background:rgba(214,173,98,.06);
}
.badge-dot{
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.hero-copy{ position:relative; z-index:1; }
.hero-copy h1{
  font-size:clamp(44px,12.4vw,102px); font-weight:800; line-height:.98;
  letter-spacing:-.02em; margin:26px 0 22px; text-transform:uppercase;
}
.hero-sub{
  color:var(--gray); font-size:clamp(16px,2.3vw,19px); line-height:1.65;
  max-width:540px; margin:0 auto;
}
.hero-ctas{ display:flex; flex-direction:column; gap:14px; margin-top:34px; }
.hero-meta{
  margin-top:26px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gray-dim);
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px;
}
.hero-meta i{ font-style:normal; color:var(--gold); }

/* ---------- Mockup 3D do livro ---------- */
.hero-book{ position:relative; z-index:1; padding:14px 0 34px; }
.book-glow{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:min(560px,120%); aspect-ratio:1; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(214,173,98,.15), transparent 70%);
  filter:blur(22px);
}
.book-parallax{ position:relative; will-change:transform; }
.book-float{ animation:bookFloat 7s ease-in-out infinite alternate; position:relative; z-index:2; }
@keyframes bookFloat{ from{ transform:translateY(9px); } to{ transform:translateY(-11px); } }

.book-scene{ perspective:1300px; display:flex; justify-content:center; }

.book{
  --bw:225px; --bd:30px; /* largura e profundidade */
  position:relative; width:var(--bw); aspect-ratio:5/7.1;
  transform-style:preserve-3d;
  transform:rotateX(calc(7deg + var(--ry,0deg))) rotateY(calc(-27deg + var(--rx,0deg)));
  transition:transform .5s ease;
}
.book-sm{ --bw:172px; --bd:24px; }

.book-face{ position:absolute; backface-visibility:hidden; -webkit-backface-visibility:hidden; }

/* Capa */
.book-cover{
  inset:0; transform:translateZ(calc(var(--bd) / 2));
  border-radius:4px; overflow:hidden; background:#101014;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.book-cover::after{ /* reflexo de papel couché */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 26%, transparent 42%);
}
.book-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }

/* Capa de fallback (aparece caso a imagem não carregue) */
.cover-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:14px;
  padding:9%; background:linear-gradient(165deg,#15151a,#0b0b0e 60%);
}
.cover-fallback::before{
  content:""; position:absolute; inset:9px; border-radius:2px;
  border:1px solid rgba(214,173,98,.4);
}
.cf-top,.cf-bottom{
  font-family:var(--mono); font-size:.32em; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold);
}
.cf-title{ font-weight:800; font-size:.95em; line-height:1.12; letter-spacing:.01em; }
.cf-title b{
  background:linear-gradient(160deg,#F0D58F,#D6AD62 55%,#8D6932);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cf-line{ width:34%; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.cf-sub{ font-size:.34em; color:var(--gray); line-height:1.5; max-width:90%; }

/* Lombada (invisível neste ângulo, mas mantém o volume correto) */
.book-spine{
  left:calc(var(--bd) / -2); width:var(--bd); top:0; bottom:0;
  transform:rotateY(-90deg);
  background:linear-gradient(90deg,#0b0b0e,#18181f 30%,#0d0d11 85%);
  display:flex; align-items:center; justify-content:center;
}
.book-spine span{
  writing-mode:vertical-rl;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold);
}

/* Corte lateral das páginas */
.book-pages{
  right:calc(var(--bd) / -2); width:var(--bd); top:3px; bottom:3px;
  transform:rotateY(90deg);
  background:
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 34%),
    repeating-linear-gradient(0deg,#EDE9DE 0 2px,#CFCABD 2px 3px);
}

/* Corte superior */
.book-top{
  top:calc(var(--bd) / -2); left:2px; right:2px; height:var(--bd);
  transform:rotateX(90deg);
  background:
    linear-gradient(180deg, rgba(0,0,0,.16), transparent 55%),
    linear-gradient(90deg,#E9E5D9,#F0ECE1);
}

/* Sombra no chão, sincronizada com a flutuação */
.book-shadow{
  position:relative; z-index:1; margin:-16px auto 0;
  width:66%; height:26px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  filter:blur(9px);
  animation:shadowPulse 7s ease-in-out infinite alternate;
}
@keyframes shadowPulse{
  from{ opacity:.75; transform:scaleX(1); }
  to  { opacity:.45; transform:scaleX(.86); }
}

/* ==========================================================================
   ÍNDICE EDITORIAL — 8 módulos
   ========================================================================== */
.index{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline); border-radius:22px; overflow:hidden;
}
.index-cell{
  position:relative; background:rgba(11,11,14,.92);
  padding:26px 24px 28px; transition:background .3s;
}
.index-cell::after{ /* filete dourado no hover */
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk));
  opacity:0; transition:opacity .3s;
}
.idx-num{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.24em;
  color:var(--gold); display:block; margin-bottom:12px;
}
.index-cell h3{
  font-size:14.5px; font-weight:800; letter-spacing:.07em; margin-bottom:10px;
}
.index-cell p{ color:var(--gray); font-size:14px; line-height:1.6; }

@media (hover:hover){
  .index-cell:hover{ background:#121218; }
  .index-cell:hover::after{ opacity:1; }
  .index-cell:hover .idx-num{ color:var(--gold-lt); }
}

/* ==========================================================================
   TIMELINE — vertical no mobile, pipeline horizontal no desktop
   ========================================================================== */
.timeline{ position:relative; max-width:620px; margin:0 auto; }
.tl-line{
  position:absolute; left:16px; top:27px; bottom:27px; width:2px;
  background:rgba(255,255,255,.09); border-radius:2px;
}
.tl-fill{
  position:absolute; left:0; top:0; width:100%; height:0;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  border-radius:2px;
}
.tl-items{ display:grid; row-gap:4px; }
.tl-item{
  display:grid; grid-template-columns:34px 1fr; column-gap:16px;
  align-items:center; padding:9px 0;
}
.tl-node{
  position:relative; z-index:1;
  width:34px; height:34px; border-radius:50%;
  background:#101014; border:1px solid rgba(255,255,255,.15);
  display:grid; place-items:center; color:#82828c;
  transition:border-color .4s, color .4s, background .4s, box-shadow .4s;
}
.tl-node .icon{ width:16px; height:16px; }
.tl-label{
  display:flex; align-items:baseline; gap:10px;
  font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.tl-label b{
  font-family:var(--mono); font-weight:500; font-size:10px;
  color:var(--gray-dim); transition:color .4s;
}
.tl-item.done .tl-node{
  border-color:var(--gold); color:var(--gold-lt);
  background:#171307; box-shadow:0 0 0 4px rgba(214,173,98,.08);
}
.tl-item.done .tl-label b{ color:var(--gold); }

/* ==========================================================================
   SEÇÃO IA
   ========================================================================== */
.section-ia{
  background:var(--bg-2);
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.section-ia::before{ /* malha de pontos discreta */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 65% at 50% 40%, #000, transparent);
  mask-image:radial-gradient(70% 65% at 50% 40%, #000, transparent);
}

.ai-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:38px; }
.ai-tag{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 19px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-brd);
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#CFCFD6; transition:border-color .3s, color .3s;
}
.ai-tag::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); }
@media (hover:hover){ .ai-tag:hover{ border-color:rgba(214,173,98,.4); color:var(--white); } }

.prompt-card{
  max-width:640px; margin:0 auto;
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:20px;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  overflow:hidden; position:relative;
}
.prompt-card::before{ /* reflexo diagonal sutil */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.06), transparent 42%);
}
.prompt-head{
  display:flex; align-items:center; gap:14px;
  padding:15px 20px; border-bottom:1px solid var(--hairline);
}
.prompt-dots{ display:flex; gap:6px; }
.prompt-dots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.18); }
.prompt-label{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em;
  color:var(--gold); text-transform:uppercase;
}
.prompt-text{
  padding:22px 22px 26px;
  font-family:var(--mono); font-size:12.5px; line-height:1.75; color:#C9C9D2;
  min-height:16em;
}
.prompt-caret{
  display:inline-block; width:7px; height:13px; margin-left:3px; vertical-align:-2px;
  background:var(--gold); animation:blink 1.1s steps(2,start) infinite;
}
@keyframes blink{ to{ visibility:hidden; } }

.ai-note{
  max-width:560px; margin:34px auto 0; text-align:center;
  color:var(--gray); font-size:15px; line-height:1.7;
}
.ia-cta{ text-align:center; margin-top:30px; }

/* ==========================================================================
   BÔNUS
   ========================================================================== */
.bonus-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.bonus-card{
  position:relative; overflow:hidden;
  background:var(--glass); border:1px solid rgba(255,255,255,.1); border-radius:22px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  padding:26px 24px;
  display:flex; flex-direction:column; gap:12px;
  transition:transform .35s var(--ease-out), border-color .35s;
}
.bonus-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.07), transparent 40%);
}
.bonus-top{ display:flex; align-items:center; justify-content:space-between; }
.bonus-icon{
  width:44px; height:44px; border-radius:13px;
  background:rgba(214,173,98,.1); border:1px solid rgba(214,173,98,.28);
  color:var(--gold); display:grid; place-items:center;
}
.bonus-tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.22em;
  color:var(--gold); text-transform:uppercase;
}
.bonus-card h3{ font-size:14.5px; font-weight:800; letter-spacing:.06em; }
.bonus-card p{ color:var(--gray); font-size:13.5px; line-height:1.6; }

@media (hover:hover){
  .bonus-card:hover{ transform:translateY(-5px); border-color:rgba(214,173,98,.3); }
  .bonus-card:hover .bonus-icon{ color:var(--gold-lt); }
}

/* ==========================================================================
   PARA QUEM É
   ========================================================================== */
.fit-grid{ display:grid; gap:18px; }
.fit-card{
  background:var(--glass); border:1px solid rgba(255,255,255,.1); border-radius:24px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  padding:30px 26px;
}
.fit-card h3{
  font-size:13.5px; font-weight:800; letter-spacing:.1em; margin-bottom:8px;
}
.fit-yes{ border-color:rgba(214,173,98,.26); }
.fit-yes h3{ color:var(--gold); }
.fit-no h3{ color:var(--gray); }

.fit-list li{
  display:flex; align-items:center; gap:13px;
  padding:13px 0; border-bottom:1px solid var(--hairline);
  font-size:15px; font-weight:500;
}
.fit-list li:last-child{ border-bottom:0; }
.fit-yes .icon{ color:var(--gold); }
.fit-no .icon{ color:var(--gray-dim); }

.fit-note{
  margin-top:clamp(48px,7vw,72px); text-align:center;
  font-size:clamp(23px,4.2vw,36px); font-weight:800; line-height:1.25; letter-spacing:-.01em;
}

/* ==========================================================================
   DENTRO DO LIVRO — páginas em papel
   ========================================================================== */
.pages-hint{
  text-align:center; margin-bottom:6px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gray-dim);
}
.pages-wrap{ position:relative; }
.pages-wrap::before,.pages-wrap::after{ /* fade nas bordas laterais (mobile) */
  content:""; position:absolute; top:0; bottom:0; width:26px; z-index:2; pointer-events:none;
}
.pages-wrap::before{ left:0;  background:linear-gradient(90deg, var(--bg), transparent); }
.pages-wrap::after { right:0; background:linear-gradient(-90deg, var(--bg), transparent); }

.pages{
  display:flex; gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:24px 4.5% 36px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.pages::-webkit-scrollbar{ display:none; }

.page{
  flex:0 0 min(252px,72vw); scroll-snap-align:center;
  aspect-ratio:210/297;
  background:linear-gradient(160deg,#F5F2EA,#ECE8DD);
  border-radius:8px;
  box-shadow:0 24px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.75);
  padding:28px 22px;
  display:flex; flex-direction:column; position:relative;
  color:#26262D; transform:none;
}
.page-num{
  position:absolute; bottom:13px; right:17px;
  font-family:var(--mono); font-size:9px; color:#9B9687;
}
.p-label{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-dk); margin-bottom:12px;
}
.p-title{ font-size:15px; font-weight:800; line-height:1.25; color:#1E1E24; margin-bottom:12px; }
.p-text{ font-size:10.5px; line-height:1.6; margin-bottom:10px; }

.ln{ display:block; height:6px; border-radius:99px; background:#DCD7C9; margin:7px 0; }
.ln.w85{ width:85%; } .ln.w60{ width:60%; }

/* Sumário */
.toc-row{
  display:flex; align-items:baseline; gap:7px;
  font-size:10.5px; margin:9px 0; color:#33333B; font-weight:500;
}
.toc-dots{ flex:1; border-bottom:1.5px dotted #B9B3A2; transform:translateY(-3px); }
.toc-row b{ font-family:var(--mono); font-weight:400; font-size:9px; color:#8D6932; }

/* Checklist */
.ck-row{ display:flex; align-items:center; gap:10px; font-size:10.5px; margin:11px 0; }
.ck{
  width:13px; height:13px; border:1.5px solid #8D6932; border-radius:3px;
  flex:none; position:relative;
}
.ck.on{ background:#8D6932; }
.ck.on::after{
  content:""; position:absolute; left:3.5px; top:1px; width:4px; height:7px;
  border:solid #F5F2EA; border-width:0 1.5px 1.5px 0; transform:rotate(42deg);
}

/* Prompt (dentro da página de papel) */
.pp-card{
  background:#141419; border:1px solid #26262E; border-radius:10px;
  padding:13px 12px; margin-top:4px;
}
.pp-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pp-dots{ display:flex; gap:5px; }
.pp-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.18); }
.pp-head span:last-child{
  font-family:var(--mono); font-size:8px; letter-spacing:.2em; color:var(--gold);
}
.pp-text{ font-family:var(--mono); font-size:9px; line-height:1.7; color:#A7A7B0; }
.pp-text b{ color:var(--gold-lt); font-weight:500; }
.pp-caret{
  display:inline-block; width:6px; height:10px; margin-left:2px;
  background:var(--gold); animation:blink 1.1s steps(2,start) infinite;
}

/* Mini timeline (página) */
.tp-row{ display:flex; gap:11px; align-items:flex-start; position:relative; padding-bottom:13px; }
.tp-row::before{
  content:""; position:absolute; left:4px; top:9px; bottom:-3px;
  width:1.5px; background:#CFC9B8;
}
.tp-row:last-child::before{ display:none; }
.tp-dot{
  width:9px; height:9px; border-radius:50%; flex:none; margin-top:2px;
  border:2px solid #8D6932; background:#F5F2EA; position:relative; z-index:1;
}
.tp-dot.on{ background:#8D6932; }
.tp-row span{ font-size:10.5px; font-weight:600; color:#33333B; }

/* Exercício */
.ex-line{ display:block; height:24px; border-bottom:1px solid #C8C2B0; margin-top:8px; }

/* ==========================================================================
   PREÇO
   ========================================================================== */
.price-card{
  position:relative; overflow:hidden;
  max-width:600px; margin:0 auto; text-align:center;
  background:var(--glass); border:1px solid rgba(214,173,98,.22); border-radius:28px;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 34px 80px rgba(0,0,0,.45);
  padding:clamp(34px,7vw,54px) clamp(24px,6vw,50px);
}
.price-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.08), transparent 40%);
}
.price-badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-lt); border:1px solid rgba(214,173,98,.38); border-radius:999px;
  padding:9px 17px; background:rgba(214,173,98,.07);
}
.price-card h2{
  font-size:clamp(26px,4.6vw,38px); font-weight:800; letter-spacing:-.015em;
  margin:22px 0 6px;
}
.price-includes{
  display:grid; gap:11px; text-align:left;
  max-width:340px; margin:26px auto 8px;
}
.price-includes li{ display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:500; }
.price-includes .icon{ color:var(--gold); }

.price{ margin:26px 0 30px; display:grid; gap:6px; }
.price s{ color:var(--gray-dim); font-size:16px; }
.price-now{ line-height:1; }
.price-cur{ font-size:clamp(18px,3vw,23px); font-weight:700; color:var(--gold-dk); margin-right:6px; vertical-align:8px; }
.price-now .gt{ font-size:clamp(52px,11vw,76px); font-weight:800; letter-spacing:-.02em; }
.price-cond{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gray-dim);
}
.price-trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px;
  margin-top:22px; color:var(--gray); font-size:12px;
}
.price-trust span{ display:inline-flex; align-items:center; gap:8px; }
.price-trust .icon{ width:15px; height:15px; color:var(--gold-dk); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ max-width:760px; margin:0 auto; display:grid; gap:12px; }
.faq-item{
  background:var(--glass); border:1px solid rgba(255,255,255,.1); border-radius:18px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  overflow:hidden; transition:border-color .3s;
}
.faq-item.open{ border-color:rgba(214,173,98,.28); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:21px 22px; text-align:left;
  font-size:15.5px; font-weight:700; color:var(--white); min-height:56px;
}
.faq-q .icon{ color:var(--gold); transition:transform .4s var(--ease-out); }
.faq-item.open .faq-q .icon{ transform:rotate(180deg); }
.faq-a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease-out);
}
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a-inner p{
  padding:0 22px 23px; color:var(--gray); font-size:14.5px; line-height:1.7;
}

/* ==========================================================================
   SEÇÃO FINAL
   ========================================================================== */
.final{
  position:relative; text-align:center; overflow:hidden;
  padding:clamp(96px,14vw,170px) 0 clamp(84px,12vw,150px);
  background:radial-gradient(60% 45% at 50% 100%, rgba(214,173,98,.05), transparent 70%);
}
.final-glow{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:min(640px,92vw); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle, rgba(214,173,98,.17), transparent 64%);
  filter:blur(34px);
}
.final-inner{ position:relative; z-index:1; }
.final h2{
  font-size:clamp(28px,5.8vw,54px); font-weight:800;
  line-height:1.14; letter-spacing:-.015em;
}
.final-sub{
  margin-top:18px; font-size:clamp(19px,3vw,28px); font-weight:700;
  color:var(--gray); line-height:1.3;
}
.final-sub .gt{ font-weight:800; }
.final-book{ display:flex; flex-direction:column; align-items:center; margin:clamp(40px,6vw,60px) 0; }
.final-book .btn{ margin-top:0; }
.final-meta{
  margin-top:20px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gray-dim);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ border-top:1px solid var(--hairline); padding:54px 0 38px; position:relative; z-index:2; }
.footer-grid{
  display:flex; flex-direction:column; gap:30px;
  align-items:flex-start;
}
.footer-tag{ color:var(--gray-dim); font-size:13px; margin-top:12px; }
.footer-nav{ display:flex; flex-direction:column; gap:2px; }
.footer-link{
  padding:10px 0; color:var(--gray); font-size:14px; font-weight:500;
  transition:color .25s; text-align:left;
}
.footer-link:hover{ color:var(--white); }
.legal{
  margin-top:38px; padding-top:26px; border-top:1px solid var(--hairline);
  color:#71717A; font-size:12px; line-height:1.75; max-width:760px;
}
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px;
  margin-top:20px; color:#5C5C64; font-size:12px;
}

/* ==========================================================================
   BARRA CTA MOBILE
   ========================================================================== */
.cta-bar{
  position:fixed; left:14px; right:14px; bottom:14px; z-index:80;
  display:flex; align-items:center; gap:12px;
  padding:12px 12px 12px 18px;
  background:rgba(13,13,16,.85);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--glass-brd); border-radius:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  transform:translateY(calc(100% + 24px));
  transition:transform .55s var(--ease-out);
}
.cta-bar.show{ transform:none; }
.cta-bar-title{ flex:1; min-width:0; display:grid; gap:3px; }
.cta-bar-title strong{
  font-size:12.5px; font-weight:800; letter-spacing:.1em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cta-bar-title span{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.2em;
  color:var(--gray-dim); text-transform:uppercase;
}
.cta-bar .btn{ min-height:48px; padding:13px 20px; font-size:12.5px; }
@media (max-width:767px){
  body.has-cta{ padding-bottom:104px; } /* não cobre conteúdo */
}

/* ==========================================================================
   MODAL + TOAST
   ========================================================================== */
.modal{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-backdrop{
  position:fixed; inset:0; background:rgba(5,5,7,.7);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .35s;
}
.modal.show .modal-backdrop{ opacity:1; }
.modal-card{
  position:relative; width:min(560px,100%);
  max-height:min(78vh,640px); overflow-y:auto;
  background:#101014; border:1px solid var(--glass-brd); border-radius:22px;
  padding:34px 28px;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  opacity:0; transform:translateY(22px) scale(.98);
  transition:opacity .35s, transform .35s var(--ease-out);
}
.modal.show .modal-card{ opacity:1; transform:none; }
.modal-close{
  position:absolute; top:16px; right:16px;
  width:40px; height:40px; border-radius:11px;
  background:var(--glass); border:1px solid var(--glass-brd);
  display:grid; place-items:center; color:var(--gray);
  transition:color .25s, border-color .25s;
}
.modal-close:hover{ color:var(--white); border-color:rgba(255,255,255,.3); }
.modal-card h3{ font-size:19px; font-weight:800; margin-bottom:16px; padding-right:44px; }
.modal-card p{ color:var(--gray); font-size:14px; line-height:1.7; margin-bottom:14px; }
.modal-card p:last-child{ margin-bottom:0; }

.toast{
  position:fixed; left:50%; bottom:26px; z-index:160;
  transform:translate(-50%, 140%); transition:transform .45s var(--ease-out);
  background:#17171D; border:1px solid rgba(214,173,98,.35); border-radius:13px;
  padding:14px 20px; max-width:min(420px,90vw);
  font-size:13.5px; font-weight:600; color:var(--white);
  box-shadow:0 20px 50px rgba(0,0,0,.5); text-align:center;
}
.toast.show{ transform:translate(-50%,0); }
@media (max-width:767px){ .toast{ bottom:108px; } }

/* ==========================================================================
   RESPONSIVO — desktop
   ========================================================================== */
@media (min-width:561px){
  .header-cta{ display:inline-flex; }
  .hero-ctas{ flex-direction:row; justify-content:center; }
  .bonus-grid{ grid-template-columns:repeat(2,1fr); }
  .fit-grid{ grid-template-columns:1fr 1fr; }
}

@media (min-width:768px){
  .cta-bar{ display:none; }
}

@media (min-width:960px){
  .nav-desktop{ display:flex; }
  .burger{ display:none; }

  .hero{ padding-top:130px; }
  .hero-grid{
    grid-template-columns:1.08fr .92fr;
    text-align:left; gap:30px; align-items:center;
  }
  .hero-sub{ margin:0; }
  .hero-ctas{ justify-content:flex-start; }
  .hero-meta{ justify-content:flex-start; }
  .hero-book{ padding:0; }
  .book{ --bw:300px; --bd:34px; }

  /* Timeline vira pipeline horizontal */
  .timeline{ max-width:none; }
  .tl-items{ grid-template-columns:repeat(10,1fr); }
  .tl-item{
    grid-template-columns:none; column-gap:0;
    flex-direction:column; align-items:center; gap:15px;
    padding:0; align-items:center; display:flex;
  }
  .tl-node{ width:38px; height:38px; }
  .tl-node .icon{ width:17px; height:17px; }
  .tl-label{ flex-direction:column; align-items:center; gap:5px; text-align:center; font-size:11.5px; }
  .tl-line{
    left:26px; right:26px; top:18px; bottom:auto;
    width:auto; height:2px;
  }
  .tl-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--gold-lt),var(--gold)); }
}

@media (min-width:1080px){
  .index{ grid-template-columns:repeat(4,1fr); }
  .bonus-grid{ grid-template-columns:repeat(4,1fr); }
}

@media (min-width:1200px){
  .hero-mark{ display:block; }
}

/* Composição em leque das páginas, apenas em telas grandes com hover */
@media (min-width:1024px) and (hover:hover){
  .pages{ overflow:visible; justify-content:center; padding:34px 0 44px; }
  .page{
    flex:0 0 auto; width:238px;
    transform:rotate(var(--r,0deg)) translateY(var(--ty,0px));
    transition:transform .65s var(--ease-out), box-shadow .4s;
  }
  .page:nth-child(1){ --r:-7deg;  --ty:14px; z-index:1; }
  .page:nth-child(2){ --r:-4.2deg; --ty:5px; z-index:2; }
  .page:nth-child(3){ --r:-1.6deg; --ty:0px; z-index:3; }
  .page:nth-child(4){ --r:1.6deg;  --ty:0px; z-index:4; }
  .page:nth-child(5){ --r:4.2deg;  --ty:5px; z-index:5; }
  .page:nth-child(6){ --r:7deg;    --ty:14px; z-index:6; }
  .pages:hover .page{ transform:none; }
  .pages-wrap::before,.pages-wrap::after{ display:none; }
  .pages-hint{ display:none; }
}

/* ==========================================================================
   MOVIMENTO REDUZIDO — acessibilidade
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .prompt-caret,.pp-caret{ animation:none; }
}