/* =========================================================
   Lojinha Doramaniacs — Home
   Paleta: lilás · rosa · creme
   ========================================================= */

:root{
  --lilac-900:#3f2354;
  --lilac-800:#5a3179;
  --lilac-700:#71429a;
  --lilac-600:#8b5cc4;
  --lilac-500:#a879dd;
  --lilac-300:#c9a6ec;
  --lilac-100:#eadcfa;
  --lilac-50:#f4ecfd;

  --pink-700:#c93a75;
  --pink-600:#e14b86;
  --pink-500:#f4699b;
  --pink-300:#f9a3c2;
  --pink-100:#fde3ed;

  --cream:#fdf6ee;
  --cream-2:#fbeee2;
  --paper:#fffaf6;

  --ink:#3b2450;
  --ink-soft:#6b5580;

  --radius-l:34px;
  --radius-m:22px;
  --radius-s:14px;

  --shadow-soft:0 18px 44px -22px rgba(90,49,121,.38);
  --shadow-card:0 34px 70px -34px rgba(90,49,121,.55);
  --shadow-book:0 44px 60px -30px rgba(63,35,84,.55);

  --wrap:1180px;
  --font-display:'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-hand:'Caveat', 'Segoe Script', cursive;
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  background:
    radial-gradient(120% 70% at 50% -10%, #fbeafb 0%, rgba(251,234,251,0) 60%),
    linear-gradient(180deg,#f7effc 0%, #fdf3f8 34%, var(--paper) 72%, #f8effb 100%);
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

.wrap{width:min(100% - 2.4rem, var(--wrap));margin-inline:auto}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--pink-600);color:#fff;padding:.75rem 1.1rem;border-radius:0 0 12px 0;
  font-weight:700;text-decoration:none;
}
.skip:focus{left:0}

:focus-visible{
  outline:3px solid var(--pink-500);
  outline-offset:3px;
  border-radius:8px;
}

/* ---------- ornamentos de fundo ---------- */
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.orb-1{width:44vw;height:44vw;left:-14vw;top:-8vw;background:radial-gradient(circle,#e3c8fb,transparent 68%)}
.orb-2{width:40vw;height:40vw;right:-14vw;top:26vh;background:radial-gradient(circle,#ffd3e6,transparent 68%)}
.orb-3{width:46vw;height:46vw;left:8vw;bottom:-16vw;background:radial-gradient(circle,#f6e0ff,transparent 70%)}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  background:rgba(253,246,251,.72);
  border-bottom:1px solid rgba(168,121,221,.16);
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:70px;
}
.nav__brand img{width:clamp(150px,20vw,208px);height:auto}
.nav__links{display:flex;gap:.4rem;align-items:center}
.nav__links a{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.94rem;
  letter-spacing:.01em;
  color:var(--lilac-800);
  text-decoration:none;
  padding:.5rem .95rem;
  border-radius:999px;
  transition:background .25s ease,color .25s ease;
}
.nav__links a:hover{background:rgba(168,121,221,.16);color:var(--lilac-900)}
.nav__links a{white-space:nowrap}
.is-narrow{display:none}
@media (max-width:560px){
  .nav__links a{font-size:.86rem;padding:.45rem .7rem}
  .is-wide{display:none}
  .is-narrow{display:inline}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;z-index:1;padding:clamp(2.6rem,7vw,5rem) 0 clamp(4.5rem,9vw,6.5rem)}
.hero__inner{position:relative;text-align:center;max-width:820px}

.hero__mark{display:block;width:clamp(112px,17vw,164px);margin:0 auto .9rem}
.hero__mark img{
  filter:drop-shadow(0 16px 26px rgba(140,90,190,.3));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:0 0 .85rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--lilac-700);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(168,121,221,.28);
  padding:.4rem 1rem;
  border-radius:999px;
  box-shadow:var(--shadow-soft);
}
.eyebrow__dot{width:7px;height:7px;border-radius:50%;background:var(--pink-500);box-shadow:0 0 0 4px rgba(244,105,155,.2)}

.hero__title{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.02;
  font-size:clamp(2.35rem,8.4vw,4.6rem);
  margin:0 0 .5rem;
  color:var(--lilac-900);
  letter-spacing:-.015em;
}
.hero__title span{
  display:block;
  background:linear-gradient(96deg,var(--pink-600) 8%, var(--lilac-600) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.hero__headline{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.3rem,4.1vw,1.95rem);
  line-height:1.25;
  color:var(--lilac-800);
  margin:.9rem auto .85rem;
  max-width:22ch;
}
.hero__headline em{
  font-style:normal;
  font-family:var(--font-hand);
  font-weight:700;
  font-size:1.4em;
  color:var(--pink-600);
  line-height:1;
  display:inline-block;
  margin-top:.12em;
}

.hero__sub{
  max-width:52ch;margin:0 auto;
  color:var(--ink-soft);
  font-size:clamp(1rem,.97rem + .25vw,1.13rem);
}

.hero__scroll{
  margin-top:clamp(2rem,5vw,3rem);
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  font-family:var(--font-display);
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lilac-600);
}
.hero__scroll svg{width:20px;fill:var(--lilac-500);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(5px);opacity:1}}

/* enfeites do hero */
.hero__deco{position:absolute;inset:-2rem 0 0;pointer-events:none;z-index:0}
.hero__inner > *:not(.hero__deco){position:relative;z-index:1}
.hero__deco .spark{position:absolute;fill:#fff;filter:drop-shadow(0 2px 6px rgba(168,121,221,.55))}
.hero__deco .heart{position:absolute;fill:var(--pink-300);opacity:.85}
.spark-a{width:26px;left:6%;top:16%;animation:tw 3.4s ease-in-out infinite}
.spark-b{width:17px;right:9%;top:9%;animation:tw 4.2s ease-in-out .6s infinite}
.spark-c{width:20px;right:16%;bottom:16%;animation:tw 3.8s ease-in-out 1.2s infinite}
.heart-a{width:22px;left:12%;bottom:24%;animation:float 5.4s ease-in-out infinite}
.heart-b{width:15px;right:5%;top:44%;fill:var(--lilac-300);animation:float 6.6s ease-in-out .8s infinite}
@keyframes tw{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}

@media (max-width:760px){
  /* mantém os enfeites longe do texto em telas estreitas */
  .spark-a{left:1%;top:9%;width:20px}
  .spark-b{right:2%;top:6%;width:14px}
  .spark-c{right:2%;bottom:8%;width:15px}
  .heart-a{left:1%;bottom:6%;width:17px}
  .heart-b{right:1%;top:30%;width:13px}
}

.wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0}
.wave svg{width:100%;height:clamp(48px,7vw,86px);display:block;fill:var(--paper)}

/* =========================================================
   SEÇÕES
   ========================================================= */
.section{position:relative;z-index:1;padding:clamp(3.2rem,8vw,5.6rem) 0}

.kicker{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.79rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0 0 .5rem;
}
.kicker--pink{color:var(--pink-600)}
.kicker--lilac{color:var(--lilac-600)}

.h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.85rem,5.2vw,3rem);
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--lilac-900);
  margin:0 0 .7rem;
}
.lede{color:var(--ink-soft);margin:0 0 1.4rem;max-width:46ch;font-size:1.05rem}
.lede--center{margin-inline:auto;text-align:center;max-width:54ch}

.section__head{text-align:center;margin-bottom:clamp(1.6rem,4vw,2.4rem)}

/* ---------- JOURNAL ---------- */
.journal{background:var(--paper)}
.journal__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}

.journal__art{position:relative;isolation:isolate}
.journal__art img{
  width:100%;
  border-radius:8px 16px 16px 8px;
  box-shadow:var(--shadow-book), -14px 0 0 -6px rgba(90,49,121,.16);
  transform:rotate(-2.2deg);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.journal__art:hover img{transform:rotate(-1deg) translateY(-6px)}
.art-glow{
  position:absolute;inset:8% -6% -8% -6%;z-index:-1;
  background:radial-gradient(60% 55% at 50% 60%, rgba(200,150,240,.55), transparent 70%);
  filter:blur(34px);
}
.tape{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:118px;height:32px;
  background:linear-gradient(180deg,rgba(253,227,237,.92),rgba(249,163,194,.75));
  border-left:2px dashed rgba(255,255,255,.7);
  border-right:2px dashed rgba(255,255,255,.7);
  border-radius:3px;
  box-shadow:0 6px 14px -8px rgba(90,49,121,.6);
  z-index:2;
}
.sticker{
  position:absolute;
  display:grid;place-content:center;text-align:center;
  font-family:var(--font-display);font-weight:800;color:#fff;
  border-radius:50%;
  box-shadow:0 16px 30px -14px rgba(90,49,121,.8);
  z-index:2;
}
.sticker--journal{
  right:-16px;top:6%;
  width:clamp(74px,11vw,96px);aspect-ratio:1;
  background:linear-gradient(150deg,var(--pink-500),var(--pink-700));
  border:4px solid #fff;
  font-size:clamp(1rem,2vw,1.25rem);
  line-height:1;
  transform:rotate(10deg);
}
.sticker--journal b{display:block;font-size:.86em;letter-spacing:.08em;text-transform:uppercase;font-weight:800}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0 0 1.7rem}
.chips li{
  font-family:var(--font-display);
  font-weight:600;font-size:.88rem;
  color:var(--lilac-800);
  background:linear-gradient(180deg,#fff,#fbf1fb);
  border:1px solid rgba(168,121,221,.3);
  padding:.34rem .82rem;border-radius:999px;
  box-shadow:0 6px 14px -12px rgba(90,49,121,.7);
}

/* preço + botão */
.buy{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.buy--center{justify-content:center;flex-direction:column;gap:1.3rem;margin-top:clamp(1.8rem,4vw,2.6rem)}

.price{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,5vw,2.6rem);line-height:1;
  color:var(--lilac-900);margin:0;
}
.price__cur{font-size:.5em;vertical-align:.62em;margin-right:.14em;color:var(--pink-600)}
.price__cents{font-size:.55em;vertical-align:.5em}

.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;
  font-size:1.03rem;
  color:#fff;text-decoration:none;
  padding:.86rem 1.7rem;
  border-radius:999px;
  box-shadow:0 16px 30px -14px rgba(90,49,121,.85);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, filter .25s ease;
  position:relative;overflow:hidden;
}
.btn svg{width:19px;fill:currentColor;transition:transform .25s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 22px 36px -16px rgba(90,49,121,.9);filter:saturate(1.06)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(-1px)}
.btn--pink{background:linear-gradient(100deg,var(--pink-600),var(--pink-500) 55%,#f78bb2)}
.btn--lilac{background:linear-gradient(100deg,var(--lilac-700),var(--lilac-500) 60%,var(--pink-500))}

.note{font-size:.9rem;color:var(--ink-soft);margin:.9rem 0 0;opacity:.9}

/* ---------- LIVROS DE COLORIR ---------- */
.colorir{
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(234,220,250,.85), transparent 62%),
    linear-gradient(180deg,#f9f1fc, #fdf3f8);
  border-top:1px solid rgba(168,121,221,.14);
  border-bottom:1px solid rgba(168,121,221,.14);
}

.fan{
  position:relative;
  display:flex;align-items:flex-end;justify-content:center;
  gap:0;
  padding:clamp(1rem,3vw,2rem) 0 0;
  min-height:clamp(260px,42vw,470px);
}
.fan__glow{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:min(760px,92%);height:62%;
  background:radial-gradient(ellipse at center, rgba(180,120,225,.42), transparent 68%);
  filter:blur(30px);
}
.book{margin:0;position:relative;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.book img{filter:drop-shadow(0 30px 34px rgba(63,35,84,.42))}

.book--center{width:clamp(170px,25vw,290px);z-index:3}
.book--left{width:clamp(140px,21vw,242px);z-index:2;transform:rotate(-8deg) translate(14%,4%)}
.book--right{width:clamp(140px,21vw,242px);z-index:2;transform:rotate(8deg) translate(-14%,4%)}

.fan:hover .book--left{transform:rotate(-11deg) translate(6%,0)}
.fan:hover .book--right{transform:rotate(11deg) translate(-6%,0)}
.fan:hover .book--center{transform:translateY(-10px)}

.universes{
  list-style:none;padding:0;
  margin:clamp(1.6rem,4vw,2.4rem) auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  max-width:940px;text-align:center;
}
.universes li{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(168,121,221,.24);
  border-radius:var(--radius-m);
  padding:1rem .9rem;
  box-shadow:var(--shadow-soft);
}
.universes__dot{display:block;width:10px;height:10px;border-radius:50%;margin:0 auto .5rem}
.d1{background:var(--pink-500);box-shadow:0 0 0 5px rgba(244,105,155,.18)}
.d2{background:#b3446b;box-shadow:0 0 0 5px rgba(179,68,107,.16)}
.d3{background:var(--lilac-600);box-shadow:0 0 0 5px rgba(139,92,196,.18)}
.universes b{display:block;font-family:var(--font-display);font-size:1rem;color:var(--lilac-900);line-height:1.2}
.universes small{display:block;color:var(--ink-soft);font-size:.87rem;margin-top:.25rem}

.pricebox{
  background:rgba(255,255,255,.8);
  border:1px solid rgba(168,121,221,.28);
  border-radius:var(--radius-m);
  padding:1rem 1.4rem;
  box-shadow:var(--shadow-soft);
  min-width:min(340px,100%);
}
.pricebox__line{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  margin:0;padding:.55rem 0;
  font-size:.98rem;color:var(--ink-soft);
}
.pricebox__line + .pricebox__line{border-top:1px dashed rgba(168,121,221,.35)}
.pricebox__label{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.pricebox__line b{font-family:var(--font-display);font-size:1.28rem;color:var(--lilac-900);white-space:nowrap}
.pricebox__line--hl b{color:var(--pink-600);font-size:1.5rem}
.tag{
  font-style:normal;font-family:var(--font-display);font-weight:700;
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--pink-500);
  padding:.2rem .58rem;border-radius:999px;
  white-space:nowrap;line-height:1.5;
  box-shadow:0 8px 16px -10px rgba(225,75,134,.9);
}

/* =========================================================
   FECHAMENTO
   ========================================================= */
.closing{position:relative;z-index:1;padding:clamp(3.6rem,9vw,6rem) 0;text-align:center}
.closing__inner{max-width:660px}
.closing__heart{width:34px;fill:var(--pink-500);margin:0 auto 1.1rem;filter:drop-shadow(0 8px 14px rgba(225,75,134,.4));animation:beat 2.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}18%{transform:scale(1.14)}36%{transform:scale(1)}}

.closing__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.4rem,4.4vw,2.15rem);
  line-height:1.24;color:var(--lilac-900);margin:0 0 1rem;
}
.closing__title span{
  display:block;
  font-family:var(--font-hand);
  font-weight:700;
  font-size:1.42em;
  line-height:1.05;
  margin-top:.16em;
  background:linear-gradient(96deg,var(--pink-600),var(--lilac-600));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.closing__text{color:var(--ink-soft);margin:0 auto;max-width:50ch}
.closing__sign{
  font-family:var(--font-hand);font-size:1.5rem;color:var(--lilac-700);
  margin:1.4rem 0 0;
}
.closing__sign span{color:var(--pink-500)}

/* =========================================================
   RODAPÉ
   ========================================================= */
.footer{
  position:relative;z-index:1;
  background:linear-gradient(180deg,#f3e7fb,#efdff9);
  border-top:1px solid rgba(168,121,221,.22);
  padding:clamp(2.4rem,6vw,3.4rem) 0 1.4rem;
}
.footer__inner{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:2rem;flex-wrap:wrap;
}
.footer__brand img{width:132px}
.footer__brand p{
  font-family:var(--font-display);font-weight:700;
  color:var(--lilac-900);margin:.5rem 0 .1rem;
}
.footer__brand small{color:var(--ink-soft)}

.footer__nav{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:.4rem 2.6rem}
.footer__nav a{
  color:var(--lilac-800);text-decoration:none;font-weight:600;font-size:.97rem;
  padding:.18rem 0;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
  width:max-content;
}
.footer__nav a:hover{color:var(--pink-600);border-bottom-color:var(--pink-300)}

.footer__copy{
  text-align:center;color:var(--ink-soft);font-size:.85rem;
  margin:clamp(1.8rem,4vw,2.6rem) 0 0;
  padding-top:1.2rem;
  border-top:1px solid rgba(168,121,221,.2);
  width:min(100% - 2.4rem,var(--wrap));margin-inline:auto;
}

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__mark img,.hero__scroll svg,.closing__heart,.spark,.heart{animation:none !important}
  .btn:hover,.fan:hover .book,.journal__art:hover img{transform:none}
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:900px){
  .journal__grid{grid-template-columns:1fr;gap:2.2rem}
  .journal__art{max-width:330px;margin-inline:auto}
  .journal__text{text-align:center}
  .lede{margin-inline:auto}
  .chips{justify-content:center}
  .buy{justify-content:center}
  .universes{grid-template-columns:1fr;max-width:420px;text-align:left;display:grid}
  .universes li{display:grid;grid-template-columns:auto 1fr;column-gap:.75rem;align-items:center;padding:.85rem 1rem}
  .universes__dot{margin:0}
  .universes b{grid-column:2}
  .universes small{grid-column:2}
}

@media (max-width:640px){
  .fan{min-height:auto;padding:.5rem 0 1.6rem}
  .book--center{width:min(46vw,210px)}
  .book--left{width:min(34vw,158px);transform:rotate(-9deg) translate(22%,2%)}
  .book--right{width:min(34vw,158px);transform:rotate(9deg) translate(-22%,2%)}
  .book img{filter:drop-shadow(0 18px 22px rgba(63,35,84,.38))}
  .footer__inner{flex-direction:column;align-items:center;text-align:center;gap:1.6rem}
  .footer__nav{grid-template-columns:repeat(2,1fr);justify-items:center;gap:.5rem 1.5rem;width:100%}
  .footer__nav a{width:auto}
  .price{font-size:2.1rem}
  .btn{width:100%;justify-content:center}
  .buy{width:100%}
  .tape{width:92px;height:26px}
}

@media (max-width:380px){
  .chips li{font-size:.82rem;padding:.3rem .68rem}
  .sticker--journal{right:-6px;width:68px}
  .pricebox__line{flex-direction:column;align-items:flex-start;gap:.25rem}
  .pricebox__line b{font-size:1.35rem}
}