/* ══════════════════════════════════════════════════════════
   FABULORA — Landing Page
   Paleta “Céu de Dormir” · Playfair Display / Nunito / Caveat
   ══════════════════════════════════════════════════════════ */
:root{
  --night-900:#120E33; --night-800:#1B1450; --night-700:#2B2170;
  --indigo:#4A3AA8; --lilac:#CBBDF0;
  --paper:#F4EFFC; --paper-2:#EFE7FA; --rose-paper:#FAF0F7; --ink:#2A2350; --muted:#6D619C;
  --gold:#F6BF3C; --gold-soft:#FFE39A; --rose:#F2A3C8;
  --display:'Playfair Display',serif; --body:'Nunito',sans-serif; --hand:'Caveat',cursive;
  --card-shadow:0 18px 46px rgba(43,33,112,.15);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--body);background:var(--night-900);color:var(--ink);
  overflow-x:hidden;line-height:1.6;font-size:1rem;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
::selection{background:var(--gold);color:var(--night-900)}

/* rastro de estrelinhas do cursor */
.trail-star{position:fixed;pointer-events:none;z-index:9999;color:var(--gold);
  animation:trailFade .9s ease-out forwards;will-change:transform,opacity}
@keyframes trailFade{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-130%) scale(.15) rotate(80deg)}}

/* ─────────── Botão ─────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:800;font-size:.92rem;letter-spacing:.6px;
  background:linear-gradient(180deg,#FFD766,var(--gold));color:#3A2B08;
  border:none;border-radius:999px;padding:15px 30px;cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 8px 22px rgba(246,191,60,.42);
  transition:transform .25s var(--ease-pop),box-shadow .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(246,191,60,.6)}
.btn::before{content:"";position:absolute;top:0;left:-85%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg)}
.btn:hover::before{animation:shine .75s ease}
@keyframes shine{to{left:140%}}
.btn.small{padding:11px 22px;font-size:.78rem}
.btn.full{width:100%}

/* ─────────── Header ─────────── */
#site-header{position:fixed;inset:0 0 auto;z-index:100;display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;gap:0;padding:14px 4vw;
  transition:background .35s,box-shadow .35s,padding .35s}
#site-header.scrolled{background:rgba(18,14,51,.92);backdrop-filter:blur(14px);
  box-shadow:0 6px 26px rgba(0,0,0,.4);padding:10px 4vw}
.main-nav{display:flex;gap:22px;font-weight:700;font-size:.88rem;color:#E7E0FA;justify-content:flex-start}
.main-nav a{position:relative;padding:4px 0;transition:color .3s}
.main-nav a::after{content:"✦";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%) scale(0);
  color:var(--gold);font-size:.6rem;transition:transform .3s var(--ease-pop)}
.main-nav a:hover{color:#fff}
.main-nav a:hover::after{transform:translateX(-50%) scale(1)}
.logo{display:flex;justify-content:center}
.logo img{height:52px;width:auto;transition:transform .4s var(--ease-pop)}
.logo:hover img{transform:rotate(-2deg) scale(1.05)}
.header-actions{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.meu-acesso{font-family:var(--body);font-weight:700;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(224,214,248,.8);padding:6px 0;
  transition:color .3s;white-space:nowrap}
.meu-acesso:hover{color:#fff}
.cart{width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.12);
  color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .3s,transform .3s}
.cart:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}
.cart svg{width:18px;height:18px}

/* ─────────── Hero ─────────── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;isolation:isolate;
  background:url('../assets/bg-hero.jpg') center 20%/cover no-repeat,var(--night-800)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,rgba(16,11,48,.86) 0%,rgba(20,14,58,.52) 42%,rgba(24,17,66,.06) 68%)}
.sky{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--d,3s) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:.95;transform:scale(1.2)}}
.shooting{position:absolute;width:130px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,227,154,0),#FFE39A 60%,#fff);
  filter:drop-shadow(0 0 6px #FFE39A);opacity:0;animation:shoot 8s linear infinite}
.shooting::after{content:"";position:absolute;right:-3px;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff}
@keyframes shoot{0%,74%{opacity:0;transform:translate(0,0) rotate(-28deg)}
  76%{opacity:1}84%{opacity:0;transform:translate(-42vw,21vw) rotate(-28deg)}100%{opacity:0}}

.hero-inner{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:2vw;
  align-items:center;padding:150px 4vw 120px}
h1{font-family:var(--display);font-weight:400;color:#fff;
  font-size:clamp(2.2rem,4.6vw,3.85rem);line-height:1.14;letter-spacing:.2px;
  text-shadow:0 4px 26px rgba(12,8,38,.75)}
h1 .magic{color:var(--gold)}
.h1-orn{display:inline-block;width:clamp(64px,7.5vw,104px);height:auto;
  vertical-align:.42em;margin-left:.4em;opacity:.95;filter:brightness(1.4) saturate(1.15)}
.hero-copy .lead{margin:18px 0 26px;font-size:1.02rem;line-height:1.65;max-width:44ch;color:#DFD6F5}

/* cartão de formulário (hero + finale) */
.form-card{background:rgba(238,229,250,.95);border-radius:22px;padding:22px;
  box-shadow:0 22px 60px rgba(8,4,30,.55);max-width:430px;position:relative;backdrop-filter:blur(6px)}
.form-card::before{content:"";position:absolute;inset:8px;border:1.5px dashed rgba(74,58,168,.22);
  border-radius:16px;pointer-events:none}
.form-card h3{font-family:var(--hand);font-weight:600;font-size:1.7rem;color:var(--night-700);
  text-align:center;margin-bottom:14px;line-height:1.25}
.form-card .tw{color:var(--gold);display:inline-block;animation:twinkle 2.6s ease-in-out infinite}
.form-card input{width:100%;border:2px solid #E1D5F2;background:#fff;border-radius:13px;
  padding:13px 17px;font-family:var(--body);font-size:.98rem;color:var(--ink);
  transition:border-color .3s,box-shadow .3s}
.form-card input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(246,191,60,.25)}
.form-card input::placeholder{color:#9F94C4}
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 14px}
.toggle{display:flex;align-items:center;justify-content:center;gap:7px;
  border:2px solid transparent;border-radius:13px;padding:11px 8px;
  font-weight:800;font-size:.94rem;cursor:pointer;transition:all .25s var(--ease-pop)}
.toggle .tg-ic{width:20px;height:20px;object-fit:contain;flex:0 0 auto}
.toggle.t-boy{background:var(--night-700);color:#fff}
.toggle.t-girl{background:#FBDCEC;color:#A8407A;border-color:#F0BBD8}
.toggle[aria-pressed=true]{border-color:var(--gold);transform:scale(1.03);
  box-shadow:0 6px 16px rgba(43,33,112,.28)}
.after{margin-top:11px;text-align:center;font-size:.88rem}
.after a{font-weight:800;color:var(--night-700);border-bottom:2px dotted var(--gold);padding-bottom:1px}
.after .play{font-size:.62rem;color:var(--gold);vertical-align:1px}
.after.muted{color:var(--muted)}

/* palco da menina */
.hero-stage{position:relative;height:min(78vh,690px);min-height:400px;
  display:flex;align-items:flex-end;justify-content:center}
.glow{position:absolute;left:52%;top:52%;transform:translate(-50%,-50%);
  width:78%;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,206,105,.42) 0%,rgba(246,191,60,.16) 42%,transparent 68%);
  filter:blur(8px);animation:pulseGlow 4.2s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
.hero-girl{position:relative;z-index:2;height:100%;width:auto;max-width:none;object-fit:contain;
  will-change:transform;filter:drop-shadow(0 26px 46px rgba(8,4,30,.6))}
.hero-spark{position:absolute;z-index:3;width:64px;height:auto;opacity:.95;
  animation:floaty 5s ease-in-out infinite;pointer-events:none}
.hero-spark.s1{top:10%;left:2%}
.hero-spark.s2{bottom:20%;right:0;width:80px;animation-delay:1.5s}
.hero-moon{position:absolute;z-index:1;top:14%;right:4%;width:88px;height:auto;
  opacity:.9;animation:floaty 7s ease-in-out infinite;animation-delay:.8s;pointer-events:none}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(4deg)}}

/* ─────────── Selos de confiança ─────────── */
.trust-band{background:var(--paper);padding:0 4vw;position:relative;z-index:6}
.trust{max-width:1220px;margin:-56px auto 0;background:#fff;border-radius:24px;
  box-shadow:0 22px 54px rgba(18,10,55,.3);
  display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:24px;
  align-items:center;padding:26px 36px}
.tp{display:flex;flex-direction:column;gap:2px;padding-right:28px;border-right:2px solid var(--paper-2)}
.tp b{font-size:1.25rem;color:var(--night-700);font-weight:800}
.tp-stars{color:var(--gold);letter-spacing:3px;font-size:1.25rem;line-height:1.1}
.tp-brand{font-size:.96rem;font-weight:800;color:#3E3762}
.tp-brand i{color:#00B67A;font-style:normal}
.trust-item{display:flex;align-items:center;gap:15px}
.trust-item img{width:56px;height:56px;object-fit:contain;flex:0 0 auto;
  transition:transform .35s var(--ease-pop);filter:drop-shadow(0 6px 14px rgba(43,33,112,.12))}
.trust-item:hover img{transform:scale(1.16) rotate(-7deg)}
.trust-item p{font-size:1.02rem;line-height:1.35;color:var(--muted)}
.trust-item b{display:block;color:var(--night-700);font-weight:800;font-size:1.1rem}
.feature p b,.trust-item p b{white-space:nowrap}

/* ─────────── Base das seções ─────────── */
section{position:relative}
/* seções com nuvem transbordante: corta só na horizontal */
.memory,.finale{overflow-x:clip;overflow-y:visible}
.wrap{max-width:1180px;margin:0 auto;padding:86px 4vw}
h2{font-family:var(--display);font-weight:400;color:var(--night-700);
  font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.24;text-align:center}
h2.left{text-align:left}
h2.on-dark{color:#fff;text-align:left}
.sub{max-width:48ch;margin:10px auto 0;text-align:center;color:var(--muted);font-size:1rem}
.title-orn{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.title-orn.left{justify-content:flex-start}
.title-orn .orn{width:clamp(70px,9vw,120px);height:auto;flex:0 0 auto;opacity:.95}
.title-orn .orn.flip{transform:scaleX(-1)}
.h2-orn{display:inline-block;width:96px;height:auto;vertical-align:.1em;margin-left:.35em;opacity:.95}

/* transição de nuvem entre seções */
.cloud-edge{position:absolute;left:50%;width:104%;min-width:1000px;height:auto;
  pointer-events:none;user-select:none;z-index:4}
.cloud-edge.top{top:0;transform:translate(-50%,-52%)}
.cloud-edge.top.flip{transform:translate(-50%,-52%) scaleY(-1)}

/* ─────────── Quebras orgânicas de seção ─────────── */
.section-break{position:relative;line-height:0;font-size:0;display:block;z-index:4}
.section-break img{width:100%;height:auto;display:block}
/* quebra dark: fundo da .how é paper, o SVG preto fica na borda inferior */
.break-to-dark{background:var(--paper);margin-bottom:-2px}
/* quebra light: fundo da .books é dark, o SVG lilás fica na borda inferior */
.break-to-light{background:linear-gradient(180deg,transparent,var(--night-800));margin-bottom:-2px}

/* ─────────── Como funciona ─────────── */
.how{background:var(--paper);z-index:2;overflow:clip}
.how .wrap{padding-top:70px;padding-bottom:80px}
.steps{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap:16px;align-items:stretch;margin-top:52px}
.step{background:#fff;border-radius:24px;padding:48px 24px 32px;text-align:center;
  box-shadow:var(--card-shadow);position:relative;
  transition:transform .35s var(--ease-pop),box-shadow .35s}
.step::before{content:"";position:absolute;inset:9px;border:2px dashed rgba(246,191,60,0);
  border-radius:17px;transition:border-color .35s;pointer-events:none}
.step:hover{transform:translateY(-9px);box-shadow:0 26px 56px rgba(43,33,112,.22)}
.step:hover::before{border-color:rgba(246,191,60,.65)}
.num{position:absolute;top:-28px;left:50%;transform:translateX(-50%);
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#5646BC,var(--night-700));color:var(--gold-soft);
  font-family:var(--display);font-size:1.65rem;font-weight:700;line-height:1;
  box-shadow:0 10px 24px rgba(43,33,112,.45),inset 0 0 0 3px rgba(246,191,60,.9)}
.scene{width:100%;height:185px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.scene img{width:185px;height:185px;max-width:100%;object-fit:contain;transition:transform .45s var(--ease-pop);
  filter:drop-shadow(0 12px 24px rgba(43,33,112,.12))}
.step:hover .scene img{transform:scale(1.08) rotate(3deg)}
.step h3{font-family:var(--display);font-weight:700;font-size:1.24rem;color:var(--night-700);
  margin-bottom:8px;line-height:1.3}
.step p{color:var(--muted);font-size:.92rem;line-height:1.55}
.arrow{align-self:center;width:38px;color:var(--gold);animation:nudge 2.4s ease-in-out infinite}
.arrow svg{width:100%;height:auto}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

/* ─────────── Nossos livros (noturno) ─────────── */
.books{background:var(--night-800);z-index:3;overflow:clip}
/* ─────────── Coleções de livros ─────────── */
.books-wrap{padding-top:36px;padding-bottom:50px}
.books-header{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:24px}
/* título segue o padrão h2 do site: display, weight 400, totalmente centralizado */
.books-title{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.2vw,2.5rem);
  color:#fff;line-height:1.24;text-align:center!important;margin:0}
.books-title-gold{color:var(--gold)}
.books-sub{color:var(--lilac);font-size:1rem;margin-top:8px;text-align:center;max-width:48ch}
.books-header .orn{filter:brightness(1.2) drop-shadow(0 2px 8px rgba(246,191,60,.35))}

/* grid das 4 coleções */
.col-slider{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;align-items:start;
  margin-top:0}

/* cada coleção: vertical, sem fundo, sem borda */
.col-slide{display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .4s var(--ease-pop)}
.col-slide:hover{transform:translateY(-8px)}

/* imagem grande, fundo transparente, drop-shadow mágico */
.col-slide-img{position:relative;width:100%;display:flex;align-items:flex-end;
  justify-content:center;min-height:220px;margin-bottom:16px}
.col-slide-img img{width:90%;max-width:280px;height:auto;object-fit:contain;
  display:block;position:relative;z-index:2;
  filter:drop-shadow(0 16px 36px rgba(0,0,0,.55)) drop-shadow(0 6px 18px rgba(74,58,168,.4));
  transition:transform .55s var(--ease-pop),filter .4s}
.col-slide:hover .col-slide-img img{transform:scale(1.05) translateY(-6px);
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.7)) drop-shadow(0 8px 28px rgba(74,58,168,.55))}

/* halo de luz colorido — fica atrás da imagem */
.col-slide-glow{position:absolute;bottom:-10%;left:50%;transform:translateX(-50%);
  width:70%;height:60%;pointer-events:none;z-index:1;border-radius:50%;
  opacity:.5;filter:blur(30px);transition:opacity .4s}
.col-slide:hover .col-slide-glow{opacity:.8}
.col-glow-yellow{background:#FFD766}
.col-glow-blue{background:#7E9FFF}
.col-glow-rose{background:#F2A3C8}
.col-glow-purple{background:#CBBDF0}

/* informações abaixo da imagem — direto no fundo escuro da seção */
.col-slide-glass{width:100%;display:flex;flex-direction:column;align-items:center}

/* badge de idade */
.col-slide-meta{margin-bottom:10px}
.col-slide-age{font-size:.72rem;font-weight:700;color:var(--gold);letter-spacing:.08em;
  background:rgba(246,191,60,.12);border:1px solid rgba(246,191,60,.3);
  border-radius:99px;padding:3px 12px;display:inline-block}

/* nome da coleção: padrão h2 do site */
.col-slide-name{font-family:var(--display);font-size:clamp(1.1rem,1.8vw,1.45rem);font-weight:400;
  color:#fff;margin-bottom:10px;line-height:1.28;text-align:center}

/* descrição */
.col-slide-desc{font-size:.88rem;line-height:1.55;color:var(--lilac);
  margin-bottom:18px;max-width:26ch;text-align:center}

/* botão de seleção */
.col-slide-btn{display:inline-flex;align-items:center;justify-content:center;
  padding:11px 22px;font-size:.84rem;font-weight:800;border-radius:99px;
  background:linear-gradient(180deg,#FFD766,var(--gold));color:#3A2B08;border:none;cursor:pointer;
  box-shadow:0 4px 18px rgba(246,191,60,.4);transition:transform .25s var(--ease-pop),box-shadow .25s}
.col-slide-btn:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(246,191,60,.65)}

/* barra de features */
.features{margin-top:32px;background:rgba(90,74,190,.24);border:1px solid rgba(203,189,240,.22);
  border-radius:18px;padding:18px 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;backdrop-filter:blur(4px)}

.feature{display:flex;align-items:center;gap:11px}
.feature img{width:40px;height:40px;object-fit:contain;flex:0 0 auto;transition:transform .35s var(--ease-pop)}
.feature:hover img{transform:scale(1.16) rotate(7deg)}
.feature p{font-size:.85rem;line-height:1.35;color:var(--lilac)}
.feature b{display:block;color:#fff;font-weight:800}

/* ─────────── Memória afetiva + depoimentos ─────────── */
.memory{background:linear-gradient(180deg,var(--rose-paper) 0%,#F6EEFB 60%,var(--paper) 100%);z-index:2}
.memory .wrap{padding-top:150px;padding-bottom:110px}
.deco-cloud{position:absolute;opacity:.8;pointer-events:none;z-index:0;
  animation:floaty 8s ease-in-out infinite}
.dc1{top:180px;right:2vw;width:150px}
.dc2{bottom:70px;left:1vw;width:190px;animation-delay:2.2s}
.mem-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:4vw;align-items:center}
.mem-copy h2{margin-bottom:30px}
.mem-list{display:flex;flex-direction:column;gap:22px}
.mem-item{display:flex;gap:16px;align-items:flex-start}
.badge{flex:0 0 auto;width:58px;height:58px;border-radius:50%;background:#fff;
  box-shadow:0 10px 26px rgba(43,33,112,.16);display:grid;place-items:center;
  transition:transform .35s var(--ease-pop)}
.badge img{width:34px;height:34px;object-fit:contain}
.mem-item:hover .badge{transform:scale(1.1) rotate(-7deg)}
.mem-item h4{font-weight:800;color:var(--night-700);font-size:1.02rem;margin-bottom:3px;line-height:1.35}
.mem-item p{color:var(--muted);font-size:.9rem;line-height:1.5;max-width:40ch}
.quotes{display:flex;flex-direction:column;gap:18px}
.quote{display:flex;gap:16px;background:#fff;border-radius:20px;padding:14px;
  box-shadow:var(--card-shadow);position:relative;
  transition:transform .35s var(--ease-pop),box-shadow .35s}
.quote:hover{transform:translateY(-6px);box-shadow:0 26px 52px rgba(43,33,112,.2)}
.q-photo{width:124px;height:132px;flex:0 0 auto;border-radius:14px;object-fit:cover;object-position:center 22%}
.q-body{display:flex;flex-direction:column;justify-content:center;gap:5px;padding-right:22px}
.q-body blockquote{font-family:var(--body);font-style:italic;font-weight:700;
  color:var(--indigo);font-size:.95rem;line-height:1.45}
.q-body .stars{color:var(--gold);letter-spacing:2px;font-size:.82rem}
.q-body .who{font-size:.8rem;font-weight:700;color:var(--muted)}
.q-heart{position:absolute;right:-16px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(242,163,200,.7));animation:heartbeat 3s ease-in-out infinite}
@keyframes heartbeat{0%,100%{transform:translateY(-50%) scale(1)}
  12%{transform:translateY(-50%) scale(1.16)}24%{transform:translateY(-50%) scale(1)}}

/* ─────────── Perguntas frequentes ─────────── */
.faq{background:var(--paper);z-index:2;overflow:clip}
.faq .wrap{padding-top:46px;padding-bottom:120px}
.faq-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:4vw;align-items:center}
.faq h2{margin-bottom:26px}
.acc{display:flex;flex-direction:column;gap:12px;max-width:520px}
.acc-item{background:#fff;border-radius:15px;box-shadow:0 10px 26px rgba(43,33,112,.1);overflow:hidden}
.acc-btn{width:100%;display:flex;align-items:center;gap:12px;background:none;border:none;cursor:pointer;
  padding:15px 18px;font-weight:800;font-size:.95rem;color:var(--night-700);text-align:left}
.acc-ic{width:30px;height:30px;object-fit:contain;flex:0 0 auto}
.plus{margin-left:auto;color:var(--indigo);font-size:1.4rem;font-weight:400;line-height:1;
  transition:transform .4s var(--ease-pop),color .3s}
.acc-item.open .plus{transform:rotate(135deg);color:var(--gold)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .45s ease}
.acc-panel p{padding:0 18px 16px 60px;color:var(--muted);font-size:.9rem;line-height:1.55}
.fox-scene{position:relative;display:flex;justify-content:center;align-items:center}
.fox{width:min(100%,400px);height:auto;transform-origin:center 76%;
  animation:breathe 4.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.zzz{position:absolute;top:8%;left:24%;font-family:var(--hand);color:var(--indigo);
  font-size:1.3rem;display:flex;gap:3px;align-items:flex-end}
.zzz i,.zzz b{font-style:normal;font-weight:500}
.zzz i{font-size:1.6rem}
.zzz b{font-size:2rem}
.zzz>*,.zzz{animation:zfloat 4.6s ease-in-out infinite}
.zzz i{animation-delay:.5s}
.zzz b{animation-delay:1s}
@keyframes zfloat{0%,100%{opacity:.25;transform:translateY(4px)}50%{opacity:.95;transform:translateY(-8px)}}

/* ─────────── CTA final + rodapé ─────────── */
.finale{background:url('../assets/bg-finale.jpg') center/cover no-repeat,var(--night-900);
  z-index:3;margin-top:-90px;position:relative;
  -webkit-mask-image:url('../assets/quebra-de-bloco3-mask.svg');
  mask-image:url('../assets/quebra-de-bloco3-mask.svg');
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.finale::before{content:"";position:absolute;inset:0;background:rgba(16,11,48,.5)}
.finale .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:60px}
.finale-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;align-items:center}
.f-brand{position:relative;text-align:center;padding-top:20px}
.f-moon{position:absolute;top:-30px;left:4%;width:96px;height:auto;
  animation:floaty 6.5s ease-in-out infinite;pointer-events:none}
.f-logo{width:min(300px,72%);height:auto;margin:0 auto 12px}
.tagline{font-family:var(--hand);font-size:1.45rem;color:var(--gold-soft);line-height:1.35}
.socials{display:flex;justify-content:center;gap:12px;margin-top:20px}
.socials a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;transition:background .3s,color .3s,transform .3s}
.socials a:hover{background:var(--gold);color:var(--night-800);transform:translateY(-3px)}
.socials svg{width:19px;height:19px}
.finale-form{justify-self:end;background:rgba(238,229,250,.96)}
footer{position:relative;z-index:2;text-align:center;padding:24px 4vw 32px;
  color:#AEA2DC;font-size:.8rem}

/* ─────────── Reveal / motion ─────────── */
html.js .reveal{opacity:0;transform:translateY(40px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html.js .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ─────────── Responsivo ─────────── */
@media (max-width:1100px){
  .main-nav{display:none}
  .hero-inner{grid-template-columns:1fr;justify-items:center;text-align:center;
    padding:120px 5vw 90px;gap:0}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  .hero-copy .lead{margin-inline:auto}
  .hero-stage{order:-1;height:44vh;min-height:300px;width:100%;margin-bottom:14px}
  .hero-moon{display:none}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:-40px}
  .tp{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:center;gap:12px;
    border-right:none;border-bottom:2px solid var(--paper-2);padding:0 0 14px}
  .steps{grid-template-columns:1fr;max-width:420px;margin-inline:auto;gap:34px}
  .arrow{transform:rotate(90deg);justify-self:center;animation:none;width:32px}
  .mem-grid,.faq-grid,.finale-grid{grid-template-columns:1fr;gap:44px}
  .mem-copy h2,.faq h2{text-align:center}
  .mem-copy h2{margin-bottom:24px}
  .acc{margin-inline:auto}
  .finale-form{justify-self:center}
  .fox-scene{order:2}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .col-slider{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .books .wrap,.memory .wrap,.finale .wrap{padding-top:120px}
}
@media (max-width:640px){
  .logo img{height:34px}
  .wrap{padding-left:6vw;padding-right:6vw}
  .trust{grid-template-columns:1fr;margin-top:-34px;padding:18px 22px}
  .toggles{grid-template-columns:1fr 1fr}
  .quote{flex-direction:column;padding:12px}
  .q-photo{width:100%;height:190px;object-position:center 20%}
  .q-body{padding:4px 6px 8px}
  .q-heart{right:10px;top:auto;bottom:-14px;transform:none;animation:none}
  .features{grid-template-columns:1fr}
  .col-slider{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .deco-cloud{display:none}
  .cloud-edge{min-width:760px}
  .title-orn .orn{width:56px}
  .h2-orn{display:none}
  .books .wrap,.memory .wrap,.finale .wrap{padding-top:100px}
}

/* ══════════════════════════════════════════════════════════
   SCROLLYTELLING HERO
   Canvas · Overlays · Glassmorphism Card
   ══════════════════════════════════════════════════════════ */

/* ─── Section container ─── */
#scrollytelling{position:relative;background:var(--night-900)}

/* ─── Preloader bar ─── */
#preloader-bar{position:fixed;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,#FFD766,var(--gold),#F2A3C8);
  transform-origin:left center;transform:scaleX(0);
  transition:transform .3s linear,opacity .5s ease .2s;z-index:9999;pointer-events:none}

/* ─── Canvas wrapper ─── */
#canvas-wrapper{position:relative;width:100vw;height:100vh;overflow:hidden}

/* ─── Canvas itself ─── */
#hero-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}

/* ─── Generic overlay layer ─── */
.st-overlay{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;opacity:0;pointer-events:none;will-change:opacity,transform}

/* ── Overlay 1 — Headline ── */
.overlay-start{
  background:linear-gradient(160deg,rgba(12,8,38,.65) 0%,rgba(18,14,51,.4) 50%,transparent 100%);
  align-items:center;justify-content:flex-start}
.overlay-start__content{padding:clamp(28px,8vw,90px) clamp(24px,6vw,72px);
  max-width:min(640px,90vw);display:flex;flex-direction:column;gap:14px;align-items:flex-start;text-align:left}
.st-ornament{width:clamp(130px,18vw,220px);height:auto;opacity:.9;align-self:flex-start}
.st-ornament--top{margin-bottom:2px}
.st-ornament--bottom{margin-top:2px}
.st-headline{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5.5vw,4.8rem);
  line-height:1.12;color:#fff;letter-spacing:-.01em;
  text-shadow:0 6px 36px rgba(8,4,30,.85);margin:0;font-style:italic;text-align:left}
.st-gold{color:var(--gold);display:inline;font-style:italic}
.st-subheadline{font-family:var(--body);font-size:clamp(1rem,1.8vw,1.25rem);
  color:rgba(224,214,248,.88);line-height:1.55;max-width:46ch;text-align:left}
.st-scroll-hint{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);
  font-size:.82rem;font-weight:700;color:rgba(203,189,240,.7);letter-spacing:.08em;
  margin-top:6px;animation:hintPulse 2.4s ease-in-out infinite}
.st-scroll-icon{width:22px;height:36px;border:2px solid rgba(203,189,240,.5);
  border-radius:12px;position:relative;flex:0 0 auto}
.st-scroll-icon::after{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:4px;height:8px;background:var(--gold);border-radius:2px;
  animation:scrollDot 2.4s ease-in-out infinite}
@keyframes scrollDot{0%{top:5px;opacity:1}70%{top:18px;opacity:0}100%{top:5px;opacity:0}}
@keyframes hintPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ── Overlay 2 — Morphing Text ── */
.overlay-mid{align-items:center;justify-content:flex-start}
.overlay-mid__container{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:1fr}
.mid-block{grid-area:1/1;display:flex;flex-direction:column;gap:14px;align-items:flex-start;will-change:opacity,transform}

/* ── Overlay 3 — Glass Conversion Card ── */
.overlay-end{align-items:center;justify-content:space-between;
  padding:0 clamp(24px,6vw,100px);gap:clamp(20px,4vw,60px)}

/* Magic logo left side */
.end-logo-wrap{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  will-change:opacity,transform}
.end-logo-img{width:clamp(180px,22vw,320px);height:auto;
  filter:drop-shadow(0 0 40px rgba(246,191,60,.6)) drop-shadow(0 0 80px rgba(246,191,60,.3));
  animation:logoFloat 4s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(-.5deg)}
  50%{transform:translateY(-12px) rotate(.5deg)}}

/* Sparkle stars around logo */
.end-logo-sparkles{position:absolute;inset:-40px;pointer-events:none}
.esl-star{position:absolute;width:6px;height:6px;border-radius:50%;
  background:var(--gold);filter:blur(1px);opacity:0;
  animation:starPop 3s ease-in-out infinite}
.esl-star:nth-child(1){top:10%;left:15%;animation-delay:0s;animation-duration:2.8s}
.esl-star:nth-child(2){top:5%;left:55%;animation-delay:.4s;animation-duration:3.2s}
.esl-star:nth-child(3){top:20%;right:10%;animation-delay:.8s;animation-duration:2.6s}
.esl-star:nth-child(4){bottom:25%;right:5%;animation-delay:1.2s;animation-duration:3.4s}
.esl-star:nth-child(5){bottom:10%;left:40%;animation-delay:1.6s;animation-duration:2.9s}
.esl-star:nth-child(6){bottom:20%;left:8%;animation-delay:.2s;animation-duration:3.1s}
.esl-star:nth-child(7){top:45%;left:2%;animation-delay:1s;animation-duration:2.7s;width:4px;height:4px}
.esl-star:nth-child(8){top:40%;right:2%;animation-delay:1.8s;animation-duration:3.5s;width:4px;height:4px}
@keyframes starPop{0%,100%{opacity:0;transform:scale(0) translateY(0)}
  20%{opacity:1;transform:scale(1.6) translateY(-6px)}
  60%{opacity:.7;transform:scale(1) translateY(-14px)}
  80%{opacity:0;transform:scale(.4) translateY(-22px)}}
.glass-card{width:min(480px,92vw);background:rgba(22,16,66,.78);
  border:1px solid rgba(203,189,240,.22);border-radius:28px;
  padding:clamp(24px,4vw,40px);
  backdrop-filter:blur(28px) saturate(1.8);-webkit-backdrop-filter:blur(28px) saturate(1.8);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 32px 80px rgba(4,2,18,.72),inset 0 1px 0 rgba(255,255,255,.10);
  position:relative;overflow:hidden}
.glass-card::before{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.04),transparent);
  transform:skewX(-18deg);animation:cardShimmer 6s ease-in-out infinite;pointer-events:none}
@keyframes cardShimmer{0%,100%{left:-80%;opacity:0}40%{opacity:1}70%{left:130%;opacity:0}}
.glass-card__header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.glass-card__icon{width:28px;height:28px;object-fit:contain;
  filter:brightness(1.4) drop-shadow(0 0 8px var(--gold));animation:floaty 5s ease-in-out infinite}
.glass-card__label{font-family:var(--body);font-size:.78rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.glass-card__title{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.2vw,2.4rem);
  color:#fff;line-height:1.2;text-align:left;margin:0 0 22px;
  text-shadow:0 4px 22px rgba(8,4,30,.6)}
.glass-input-wrap{position:relative;margin-bottom:14px}
.glass-input-wrap::before{content:"✦";position:absolute;right:16px;top:50%;
  transform:translateY(-50%);color:var(--gold);font-size:.75rem;
  pointer-events:none;opacity:.6;animation:twinkle 3s ease-in-out infinite}
#hero-form input[type="text"]{width:100%;background:rgba(255,255,255,.06);
  border:1.5px solid rgba(203,189,240,.28);border-radius:14px;
  padding:14px 44px 14px 18px;font-family:var(--body);font-size:1rem;color:#fff;
  transition:border-color .3s,box-shadow .3s,background .3s}
#hero-form input[type="text"]::placeholder{color:rgba(203,189,240,.48)}
#hero-form input[type="text"]:focus{outline:none;background:rgba(255,255,255,.10);
  border-color:var(--gold);box-shadow:0 0 0 4px rgba(246,191,60,.18)}
.glass-toggles{margin:0 0 18px}
.glass-toggles .toggle.t-boy{background:rgba(75,58,168,.5);
  border:1.5px solid rgba(203,189,240,.22);color:#e7e0fa}
.glass-toggles .toggle.t-girl{background:rgba(160,64,122,.4);
  border:1.5px solid rgba(242,163,200,.28);color:#f9d0e9}
.glass-toggles .toggle[aria-pressed="true"]{border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(246,191,60,.2),0 8px 20px rgba(8,4,30,.4);transform:scale(1.03)}
.glass-cta{width:100%;background:linear-gradient(160deg,#FFD766 0%,var(--gold) 60%,#E8A800 100%);
  color:#2A1B00;font-size:1.05rem;font-weight:900;letter-spacing:.04em;
  padding:16px 28px;border-radius:14px;
  box-shadow:0 10px 32px rgba(246,191,60,.55),0 2px 0 rgba(255,255,255,.22) inset;
  transition:transform .25s var(--ease-pop),box-shadow .25s;position:relative;overflow:hidden}
.glass-cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 44px rgba(246,191,60,.7)}
.glass-cta::before{content:"";position:absolute;top:0;left:-85%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-20deg)}
.glass-cta:hover::before{animation:shine .75s ease}
.glass-card__note{text-align:center;margin-top:14px;font-size:.78rem;color:rgba(203,189,240,.45)}


/* ─── Responsive adjustments ─── */
@media (max-width:820px){
  /* Header mobile */
  #site-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
  .main-nav{display:none}
  .logo img{height:36px}
  .header-actions{gap:8px}
  .meu-acesso{font-size:.72rem}
  .cart{width:32px;height:32px}
  .cart svg{width:16px;height:16px}
  .btn.small{padding:8px 14px;font-size:.72rem}

  /* Overlays mobile */
  .overlay-start,.overlay-mid{align-items:flex-end;justify-content:center;
    background:linear-gradient(0deg,rgba(12,8,38,.88) 0%,rgba(12,8,38,.48) 55%,transparent 100%)}
  .overlay-start__content{padding:24px 18px 42px;text-align:center;align-items:center;max-width:100%}
  .st-headline{text-align:center !important;font-size:clamp(1.8rem,6.8vw,2.5rem)}
  .st-subheadline{text-align:center !important;font-size:.9rem;max-width:34ch}
  .st-ornament{align-self:center;width:clamp(120px,36vw,170px)}
  .mid-block{align-items:center !important;text-align:center !important}

  /* Overlay End - Form at bottom under the boy */
  .end-logo-wrap{display:none !important}
  .overlay-end{align-items:flex-end;justify-content:center;padding:0 12px 18px;
    background:linear-gradient(0deg,rgba(12,8,38,.85) 0%,rgba(12,8,38,.35) 60%,transparent 100%)}
  .glass-card{width:min(420px,94vw);border-radius:20px;padding:20px 18px 14px;
    background:rgba(22,16,66,.92);box-shadow:0 14px 40px rgba(4,2,18,.85)}
  .glass-card__header{margin-bottom:4px;justify-content:center}
  .glass-card__title{font-size:1.35rem;text-align:center;margin-bottom:12px}
  .glass-input-wrap{margin-bottom:10px}
  #hero-form input[type="text"]{padding:11px 36px 11px 14px;font-size:.9rem}
  .glass-toggles{margin-bottom:12px}
  .glass-toggles .toggle{padding:10px 12px;font-size:.85rem}
  .glass-cta{padding:12px 20px;font-size:.95rem}
  .glass-card__note{margin-top:8px;font-size:.72rem}
}

@media (max-width:420px){
  #site-header{padding:8px 12px}
  .logo img{height:32px}
  .meu-acesso{display:none}
  .st-headline{font-size:1.65rem}
  .glass-card{padding:16px 14px 12px;border-radius:18px}
  .glass-card__title{font-size:1.2rem;margin-bottom:10px}
  #hero-form input[type="text"]{padding:9px 32px 9px 12px;font-size:.85rem}
  .glass-toggles .toggle{padding:8px 10px;font-size:.8rem}
  .glass-cta{padding:10px 16px;font-size:.88rem}
}