/* Grimório Luz Valente — extras: banner interativo, tocador de música e livro do iniciante.
   Roxo com brilho + azul fogo. */
:root{--violet:#8b3fe6;--violet-2:#a66bff;--fire:#1f6bff;--fire-2:#4cc3ff;--night:#12061f;--night-2:#24103d}

/* ---------- banner interativo ---------- */
.hero2{position:relative;border-radius:20px;overflow:hidden;margin-bottom:26px;min-height:420px;color:#f3ecff;isolation:isolate;
  background:radial-gradient(120% 90% at 70% 10%,#3a1766 0%,#1d0b35 45%,var(--night) 100%);
  box-shadow:0 18px 50px rgba(30,8,60,.35), inset 0 0 0 1px rgba(166,107,255,.25)}
.hero2 canvas.h-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero2 .h-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(260px 260px at var(--gx,70%) var(--gy,40%),rgba(76,195,255,.22),transparent 70%),
             radial-gradient(420px 320px at calc(var(--gx,70%) + 6%) calc(var(--gy,40%) + 10%),rgba(139,63,230,.30),transparent 70%)}
.hero2 .h-moon{position:absolute;z-index:1;right:9%;top:12%;width:110px;height:110px;border-radius:50%;
  box-shadow:22px -6px 0 0 #f6e7c7, 22px -6px 30px 6px rgba(255,214,150,.35);transform:translate(calc(var(--px,0)*-14px),calc(var(--py,0)*-10px)) rotate(-18deg)}
.hero2 .h-circle{position:absolute;z-index:1;right:-6%;bottom:-38%;width:620px;height:620px;opacity:.85;
  transform:translate(calc(var(--px,0)*18px),calc(var(--py,0)*12px));filter:drop-shadow(0 0 10px rgba(76,195,255,.55))}
.hero2 .h-circle svg{width:100%;height:100%;animation:girar 120s linear infinite}
.hero2 .h-circle .anel{fill:none;stroke:var(--fire-2);stroke-width:1.4;opacity:.75}
.hero2 .h-circle .anel2{fill:none;stroke:var(--violet-2);stroke-width:1;opacity:.7}
.hero2 .h-circle .runa{fill:var(--fire-2);opacity:.8}
@keyframes girar{to{transform:rotate(360deg)}}
.hero2 .h-emb{position:absolute;z-index:1;right:calc(9% + 150px);top:50%;width:150px;opacity:.16;transform:translate(calc(var(--px,0)*24px),calc(-50% + var(--py,0)*18px))}
.hero2 .h-velas{position:absolute;z-index:2;right:5%;bottom:0;display:flex;align-items:flex-end;gap:18px;transform:translateX(calc(var(--px,0)*-8px))}
.vela{position:relative;width:16px;border-radius:3px 3px 2px 2px;background:linear-gradient(90deg,#d9c7f7,#fff 45%,#cdb6f2)}
.vela::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:7px;background:#2b1d2e;transform:translateX(-50%)}
.vela i{position:absolute;left:50%;bottom:calc(100% + 5px);width:12px;height:22px;margin-left:-6px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 75%,#fff 0 18%,#bfe9ff 30%,var(--fire-2) 55%,rgba(31,107,255,.0) 75%);
  filter:drop-shadow(0 0 10px rgba(76,195,255,.9)) drop-shadow(0 0 22px rgba(139,63,230,.7));transform-origin:50% 90%;animation:chama 1.8s ease-in-out infinite}
.vela:nth-child(2) i{animation-duration:2.3s;animation-delay:-.6s}.vela:nth-child(3) i{animation-duration:1.5s;animation-delay:-.3s}
.vela:nth-child(4) i{animation-duration:2.1s;animation-delay:-1s}.vela:nth-child(5) i{animation-duration:1.7s;animation-delay:-1.3s}
@keyframes chama{0%,100%{transform:scale(1,1) rotate(-2deg)}25%{transform:scale(.92,1.08) rotate(2deg)}50%{transform:scale(1.05,.95) rotate(-1deg)}75%{transform:scale(.96,1.1) rotate(3deg)}}
.hero2 .h-txt{position:relative;z-index:3;padding:46px 40px 34px;max-width:620px}
.h-kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-title);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--fire-2);
  background:rgba(76,195,255,.08);border:1px solid rgba(76,195,255,.3);border-radius:999px;padding:5px 14px}
.hero2 h1{font-family:var(--f-title);font-weight:700;font-size:clamp(32px,5vw,58px);line-height:1.04;letter-spacing:.02em;margin:16px 0 14px;color:#fbf6ea;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.hero2 h1 em{font-style:normal;background:linear-gradient(90deg,var(--violet-2),var(--violet) 40%,var(--fire-2));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(139,63,230,.55))}
.hero2 p.h-sub{font-family:var(--f-serif);font-size:20px;line-height:1.45;color:#dccff2;margin:0 0 22px;max-width:48ch}
.h-btns{display:flex;gap:12px;flex-wrap:wrap}
.h-btn{display:inline-flex;align-items:center;gap:10px;border-radius:12px;padding:12px 20px;cursor:pointer;font-family:var(--f-title);font-weight:700;font-size:13.5px;letter-spacing:.06em;
  border:1px solid rgba(166,107,255,.6);color:#fff;background:linear-gradient(135deg,rgba(139,63,230,.95),rgba(76,24,140,.95));
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 8px 24px rgba(139,63,230,.45);transition:transform .15s,box-shadow .15s}
.h-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 10px 30px rgba(76,195,255,.45)}
.h-btn.alt{background:rgba(18,6,31,.55);border-color:rgba(76,195,255,.55)}
.h-btn svg{width:20px;height:20px}
.h-stats{display:flex;gap:28px;margin-top:28px;flex-wrap:wrap}
.h-stats b{display:block;font-family:var(--f-title);font-size:30px;line-height:1;background:linear-gradient(90deg,var(--violet-2),var(--fire-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.h-stats span{font-size:12.5px;color:#b9a8d6;letter-spacing:.04em}
@media (max-width:900px){
  .hero2{min-height:0}
  .hero2 .h-txt{padding:30px 20px 26px}
  .hero2 .h-circle{width:420px;height:420px;right:-40%;bottom:-30%;opacity:.5}
  .hero2 .h-moon{width:70px;height:70px;right:8%;top:6%}
  .hero2 .h-emb,.hero2 .h-velas{display:none}
  .h-stats{gap:20px}
}

/* ---------- tocador de música ---------- */
.player{position:fixed;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:45;color:#efe6ff;font-family:var(--f-body)}
.pl-mini{width:58px;height:58px;border-radius:50%;border:2px solid rgba(255,168,53,.8);padding:0;cursor:pointer;position:relative;
  background:radial-gradient(circle at 50% 40%,#3a1766,var(--night));box-shadow:0 8px 24px rgba(18,6,31,.5),0 0 18px rgba(139,63,230,.55);display:grid;place-items:center}
.pl-mini img{width:40px;height:40px;opacity:.95}
.player.tocando .pl-mini img,.player.tocando .pl-cover img{animation:girar 9s linear infinite}
.pl-mini .onda{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(76,195,255,.6);opacity:0}
.player.tocando .pl-mini .onda{animation:onda 2.4s ease-out infinite}
@keyframes onda{from{transform:scale(.9);opacity:.8}to{transform:scale(1.35);opacity:0}}
.pl-card{position:absolute;left:0;bottom:70px;width:min(340px,calc(100vw - 36px));background:linear-gradient(160deg,#1d0b35,#0e0518);border:1px solid rgba(255,168,53,.35);
  border-radius:16px;padding:16px;box-shadow:0 20px 50px rgba(10,3,20,.6)}
.pl-top{display:flex;gap:12px;align-items:center}
.pl-cover{width:58px;height:58px;border-radius:10px;flex:none;display:grid;place-items:center;background:radial-gradient(circle,#4a1f80,#14062a);box-shadow:inset 0 0 0 1px rgba(76,195,255,.35)}
.pl-cover img{width:44px;height:44px}
.pl-t{min-width:0;flex:1}
.pl-t b{display:block;font-family:var(--f-title);font-weight:700;font-size:15px;color:#ffb648;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.03em}
.pl-t span{font-size:12.5px;color:#b9a8d6}
.pl-min{background:none;border:0;color:#b9a8d6;cursor:pointer;padding:6px;border-radius:8px}
.pl-min:hover{color:#fff}
.pl-bar{margin-top:14px}
.pl-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,var(--violet) 0 var(--v,0%),#c9962b var(--v,0%) 100%)}
.pl-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#1d0b35;border:3px solid var(--violet-2);box-shadow:0 0 10px rgba(139,63,230,.8)}
.pl-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#1d0b35;border:3px solid var(--violet-2)}
.pl-time{display:flex;justify-content:space-between;font-size:11.5px;color:#b9a8d6;margin-top:4px;font-variant-numeric:tabular-nums}
.pl-ctrl{display:flex;align-items:center;justify-content:center;gap:22px;margin:8px 0 10px}
.pl-ctrl button{background:none;border:0;color:#ffb648;cursor:pointer;display:grid;place-items:center;padding:6px;border-radius:50%}
.pl-ctrl button svg{width:22px;height:22px}
.pl-ctrl .pl-play{width:52px;height:52px;background:#ffb648;color:#1d0b35;box-shadow:0 0 18px rgba(255,168,53,.45)}
.pl-ctrl .pl-play svg{width:24px;height:24px}
.pl-vol{display:flex;align-items:center;gap:10px}
.pl-vol svg{width:20px;height:20px;color:#ffb648;flex:none}
.pl-list{margin-top:10px;border-top:1px solid rgba(255,255,255,.08);padding-top:8px;display:flex;flex-direction:column;gap:2px;max-height:150px;overflow:auto}
.pl-list button{background:none;border:0;color:#d9cdf0;text-align:left;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13px;display:flex;gap:8px}
.pl-list button:hover{background:rgba(139,63,230,.18)}
.pl-list button[aria-current="true"]{color:#ffb648}
.pl-list small{color:#8f7fae;margin-left:auto}
@media (max-width:900px){.player{bottom:calc(14px + env(safe-area-inset-bottom,0px));left:calc(12px + env(safe-area-inset-left,0px))}.pl-mini{width:52px;height:52px}.pl-card{bottom:64px}}

/* ---------- livro do iniciante ---------- */
nav.side button.livro-nav{background:linear-gradient(135deg,rgba(139,63,230,.12),rgba(31,107,255,.10));border:1px solid rgba(139,63,230,.25);margin:4px 0}
nav.side button.livro-nav .n{color:var(--violet);font-weight:700}
.livro{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(90% 80% at 50% 30%,#2a1150,#0c0416 75%);padding:max(14px,env(safe-area-inset-top,0px)) 14px max(14px,env(safe-area-inset-bottom,0px));animation:pop .2s ease-out}
.livro .lv-x{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:5}
.livro .lv-x:hover{border-color:#ffb648;color:#ffb648}
.lv-stage{position:relative;perspective:2400px;width:min(1120px,96vw);aspect-ratio:1.5/1;max-height:calc(100vh - 120px)}
.lv-book{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.lv-pg{position:relative;overflow:hidden;background:
   radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(120,80,30,.18) 100%),
   linear-gradient(180deg,#fbf3e2,#f3e5c8);color:#3a2616}
.lv-pg.esq{border-radius:10px 0 0 10px;box-shadow:inset -26px 0 30px -18px rgba(90,55,20,.45)}
.lv-pg.dir{border-radius:0 10px 10px 0;box-shadow:inset 26px 0 30px -18px rgba(90,55,20,.45)}
.lv-pg .pc{position:absolute;inset:0;padding:clamp(18px,3.2vw,40px) clamp(18px,3.4vw,44px) 44px;overflow:auto;font-family:var(--f-serif);font-size:clamp(15px,1.45vw,18.5px);line-height:1.5}
.lv-pg .pn{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:var(--f-title);font-size:12px;color:#9b7a4f;letter-spacing:.2em}
.lv-pg h2{font-family:var(--f-title);font-weight:700;font-size:clamp(18px,2vw,26px);color:#4b1d7a;margin:0 0 4px;letter-spacing:.03em;line-height:1.15}
.lv-pg h3{font-family:var(--f-title);font-weight:700;font-size:clamp(13px,1.2vw,15px);color:#1f4fb8;margin:14px 0 4px;letter-spacing:.08em;text-transform:uppercase}
.lv-pg .orn{display:block;text-align:center;color:#b98b3e;letter-spacing:.6em;font-size:13px;margin:6px 0 12px}
.lv-pg p{margin:0 0 10px}
.lv-pg ul{margin:0 0 10px;padding-left:20px}
.lv-pg li{margin:0 0 4px}
.lv-pg .cap::first-letter{float:left;font-family:var(--f-title);font-weight:700;font-size:3.1em;line-height:.9;margin:4px 8px 0 0;color:#6b2bb5}
.lv-pg table{width:100%;border-collapse:collapse;font-size:.92em}
.lv-pg td{padding:5px 6px;border-bottom:1px solid rgba(155,122,79,.3);vertical-align:top}
.lv-pg td:first-child{font-family:var(--f-title);font-weight:700;font-size:.82em;color:#4b1d7a;white-space:nowrap;letter-spacing:.04em}
.lv-pg .nota{background:rgba(107,43,181,.08);border-left:3px solid #8b3fe6;padding:8px 12px;border-radius:0 8px 8px 0;font-size:.95em;margin:10px 0}
.lv-pg .ir{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--f-title);font-weight:700;font-size:12px;letter-spacing:.08em;color:#fff;background:linear-gradient(135deg,#8b3fe6,#4c1d95);border:0;border-radius:999px;padding:7px 14px;cursor:pointer}
.lv-pg .ir:hover{background:linear-gradient(135deg,#1f6bff,#8b3fe6)}
.lv-pg.capa-in{display:flex}
.lv-pg .centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.lv-pg .centro img{width:38%;max-width:180px;opacity:.85;margin-bottom:10px}
.lv-leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;z-index:4;transition:transform .85s cubic-bezier(.45,.05,.25,1)}
.lv-leaf .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lv-leaf .face.verso{transform:rotateY(180deg)}
.lv-leaf .face .lv-pg{position:absolute;inset:0}
.lv-leaf .sombra{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.0),rgba(0,0,0,.18));opacity:0;transition:opacity .85s}
.lv-leaf.virando .sombra{opacity:1}
/* capa fechada */
.lv-capa{position:absolute;top:0;bottom:0;right:0;width:50%;border-radius:6px 14px 14px 6px;cursor:pointer;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;
  background:radial-gradient(circle at 50% 40%,#3d1873,#1a0a2e 70%);border:2px solid #b98b3e;box-shadow:inset 0 0 0 8px #1a0a2e,inset 0 0 0 9px rgba(185,139,62,.6),0 30px 60px rgba(0,0,0,.5);color:#f4e4c1;
  transform-origin:left center;transition:transform 1s cubic-bezier(.45,.05,.25,1)}
.lv-capa img{width:46%;max-width:200px;filter:drop-shadow(0 0 16px rgba(76,195,255,.6))}
.lv-capa h2{font-family:var(--f-title);font-weight:700;font-size:clamp(20px,2.6vw,34px);margin:16px 0 6px;color:#ffcf7a;letter-spacing:.06em}
.lv-capa p{font-family:var(--f-serif);font-style:italic;font-size:clamp(15px,1.5vw,19px);color:#d9c6f3;margin:0 0 18px}
.lv-capa .abrir{font-family:var(--f-title);font-weight:700;font-size:12px;letter-spacing:.2em;color:#4cc3ff;animation:pisca 2s ease-in-out infinite}
@keyframes pisca{50%{opacity:.4}}
.lv-capa{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lv-capa.aberta{transform:rotateY(-180deg);pointer-events:none}
.lv-ctrl{display:flex;align-items:center;gap:14px;color:#d9c6f3}
.lv-ctrl button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(166,107,255,.5);background:rgba(139,63,230,.18);color:#fff;cursor:pointer;display:grid;place-items:center}
.lv-ctrl button:hover:not(:disabled){background:rgba(31,107,255,.35);border-color:#4cc3ff}
.lv-ctrl button:disabled{opacity:.3;cursor:default}
.lv-ctrl .ind{font-family:var(--f-title);font-size:13px;letter-spacing:.12em;min-width:110px;text-align:center}
.lv-ctrl .som{width:auto;border-radius:999px;padding:0 14px;font-size:12px;gap:6px;display:flex}
@media (max-width:760px){
  .lv-stage{aspect-ratio:auto;height:calc(100vh - 150px);width:min(520px,94vw)}
  .lv-book{grid-template-columns:1fr}
  .lv-pg.esq{display:none}
  .lv-pg.dir{border-radius:6px 10px 10px 6px;box-shadow:inset 18px 0 24px -16px rgba(90,55,20,.45)}
  .lv-leaf{width:100%}
  .lv-capa{width:100%;left:0}
  .lv-pg .pc{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){.lv-leaf,.lv-capa{transition:none}}