/* /serie e páginas de livro da série (/livros/two-columns etc.) no estilo B. Depende de b.css, b-pages.css (e b-livro.css nas páginas de livro).
   Leque 3D de capas, "Como funciona", cenas dos três livros (nível animado, gancho, sinopse, compra e QR) e cena final. Sem inline style (CSP). */
.sr-alt{display:block}
.sr-hero .lv-giant{font-size:clamp(3rem,19vw,21rem)}
.sr-by,.cl-by{margin:1rem 0 0;font-size:.82rem;letter-spacing:.08em;color:var(--mut)}

/* hero: leque */
.sr-stage{position:relative;isolation:isolate;display:grid;justify-items:center;align-content:center;padding:1.5rem 0 2.5rem;--ry:0deg;--rx:0deg;--gx:50%;transform:translateY(calc(var(--hp,0) * 5vh))}
.sr-fan{position:relative;width:min(100%,540px);aspect-ratio:1 / .94;perspective:1600px}
.sr-fan-in{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.sr-cov{--k:0;--y:0%;--z:0px;--lift:0%;--zl:0px;--spr:60%;position:absolute;left:50%;top:50%;width:44%;display:block;line-height:0;border-radius:3px 8px 8px 3px;transform-origin:50% 115%;
  transform:translate(-50%,-50%) translate3d(calc(var(--k) * var(--spr)),calc(var(--y) + var(--lift)),calc(var(--z) + var(--zl))) rotate(calc(var(--k) * 7deg));box-shadow:var(--shb);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.sr-cov img{display:block;width:100%;height:auto;aspect-ratio:5 / 8;border-radius:inherit;object-fit:cover}
.sr-cov-1{--k:-1;--y:5%}.sr-cov-2{--k:0;--y:-2%;--z:70px}.sr-cov-3{--k:1;--y:5%}
.sr-cov:hover,.sr-cov:focus-visible{--lift:-4%;--zl:90px}
@media (prefers-reduced-motion:no-preference){html:not(.lite) .sr-fan{animation:lv-float 8s ease-in-out infinite}}
@keyframes lv-float{50%{transform:translateY(-9px)}}

/* como funciona */
.sr-how{padding:clamp(4rem,9vw,7rem) 0 clamp(3rem,6vw,5rem)}
.sr-how-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:center;max-width:1180px}
.sr-steps{margin:1.4rem 0 0;display:grid;gap:.9rem}
.sr-step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;padding:1rem 1.2rem;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shc)}
.sr-step-n{grid-row:span 2;align-self:center;width:2.4rem;height:2.4rem;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;font-size:1.05rem;font-weight:700}
.sr-step h3{font-size:1.1rem;letter-spacing:-.01em}.sr-step p{margin:.15rem 0 0;color:var(--mut)}
.sr-how-vis{width:min(100%,520px);margin:0 auto}
.sr-spread{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:1.1rem .9rem 1.2rem;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shc)}
.sr-spread::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:18px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.18) 50%,transparent);pointer-events:none}
.sr-col{padding:0 .8rem;display:grid;gap:.85rem;align-content:start;min-width:0}
.sr-col-h{margin:0 0 .1rem;font-size:.72rem;letter-spacing:.16em;font-weight:700;color:var(--mut)}
.sr-par{display:grid;gap:.32rem;padding:.35rem .4rem;border-radius:8px;border:1px solid transparent;transition:background .45s,border-color .45s}
.sr-par i{display:block;height:7px;border-radius:99px;background:var(--line);transition:background .45s}
.sr-par i:nth-child(1){width:100%}.sr-par i:nth-child(2){width:92%}.sr-par i:nth-child(3){width:64%}
.sr-col-en .sr-par i:nth-child(1){width:96%}.sr-col-en .sr-par i:nth-child(2){width:100%}.sr-col-en .sr-par i:nth-child(3){width:78%}
.sr-par.is-on{border-color:var(--acc);background:rgba(215,38,30,.08)}
html[data-theme="dark"] .sr-par.is-on{background:rgba(255,74,63,.12)}
.sr-par.is-on i{background:var(--acc)}
.sr-ladder{display:flex;justify-content:center;gap:.6rem;margin:1.1rem 0 0}
.sr-ladder li{min-width:3.4rem;padding:.25rem .8rem;border:2px solid var(--line);border-radius:999px;background:var(--card);text-align:center;font-family:"PlexMono",monospace;font-size:.85rem;font-weight:700;color:var(--mut);transition:background .4s,color .4s,transform .4s}
.sr-ladder li.is-on{background:var(--acc);border-color:var(--acc);color:var(--on-acc);transform:translateY(-3px)}

/* cenas dos livros */
.sr-book{padding:clamp(3.5rem,8vw,6.5rem) 0}
.sr-book-in{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:start;max-width:1180px}
.sr-book-r .sr-book-in{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.sr-book-r .sr-cover-col{order:2}
.sr-cover-col{position:sticky;top:calc(var(--hud-h,60px) + 1.5rem);isolation:isolate;display:grid;justify-items:center;padding:1rem 0 2rem;--bw:min(30vw,340px);--ry:12deg;--rx:0deg;--gx:50%}
.sr-book-r .sr-cover-col{--ry:-12deg}
.sr-cover-persp{width:var(--bw);perspective:1500px}
.sr-cover{position:relative;transform:rotateY(var(--ry)) rotateX(var(--rx));transition:transform .14s linear;border-radius:3px 8px 8px 3px;box-shadow:var(--shb);line-height:0;background:#1a1a2e}
.sr-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5%;border-radius:3px 0 0 3px;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.12) 45%,transparent);pointer-events:none;z-index:1}
.sr-cover img{display:block;width:100%;height:auto;aspect-ratio:5 / 8;border-radius:inherit;object-fit:cover}
@media (prefers-reduced-motion:no-preference){html:not(.lite) .sr-cover-persp{animation:lv-float 7s ease-in-out infinite}}
.sr-copy{position:relative;min-width:0}
.sr-btitle{margin:0;font-size:clamp(2.3rem,5.4vw,4.6rem);font-weight:700;letter-spacing:-.045em;line-height:.98;overflow-wrap:anywhere}
.sr-btitle .sr-alt{margin-top:.35rem;font-size:clamp(1.05rem,2.1vw,1.5rem);font-weight:500;letter-spacing:-.01em;color:var(--mut)}
.sr-lvl{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 1.6rem;margin:1.5rem 0 0}
.sr-lvl-n{margin:0;display:flex;align-items:baseline;font-size:clamp(4.6rem,10vw,8rem);font-weight:700;line-height:.86;letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--acc)}
.sr-lvl-d{display:inline-block;min-width:.62em}
.sr-lvl-side{display:grid;gap:.55rem;min-width:min(100%,240px);flex:1 1 200px;max-width:320px}
.sr-lvl-k{margin:0;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.sr-meter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.sr-meter li{position:relative;padding-top:1.05rem;font-family:"PlexMono",monospace;font-size:.78rem;color:var(--mut)}
.sr-meter li.on{color:var(--ink);font-weight:700}
.sr-meter li::before,.sr-meter li::after{content:"";position:absolute;left:0;right:0;top:0;height:8px;border-radius:99px}
.sr-meter li::before{background:var(--line)}
.sr-meter li::after{background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * .28s + .3s)}
.sr-meter li.on::after{transform:scaleX(1)}
.sr-meter li[data-i="1"]{--i:1}.sr-meter li[data-i="2"]{--i:2}
@media (prefers-reduced-motion:no-preference){html.lv-on:not(.lite) .sr-book:not(.is-in) .sr-meter li.on::after{transform:scaleX(0)}}
.sr-hook{position:relative;margin:1.6rem 0 0;padding-left:1.1rem;border-left:4px solid var(--acc);max-width:24ch;font-size:clamp(1.55rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.035em;line-height:1.1}
.sr-syn{margin:1.3rem 0 0;max-width:62ch;font-size:1.05rem;line-height:1.65;color:var(--mut)}
.sr-buyblock{margin-top:1.6rem;padding:1rem 1.1rem 1.1rem;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shc)}
.sr-buy{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:.6rem}
.sr-buy .btn{justify-content:center;text-align:center}
.sr-qrs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.9rem 1.4rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line)}
.sr-qrs .sr-scan{flex:1 1 100%;margin:0}

/* final */
.sr-end{padding:clamp(4rem,8vw,6.5rem) 0 3rem}
.sr-cards{margin:1.6rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;align-items:stretch}
.sr-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;padding:2.9rem 1.2rem 1.3rem;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shc)}
.sr-card-1{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--acc)}
.sr-card-cover{display:block;width:min(52%,150px);line-height:0;border-radius:3px 8px 8px 3px;overflow:hidden;box-shadow:var(--shb)}
.sr-card-cover img{display:block;width:100%;height:auto;aspect-ratio:5 / 8;object-fit:cover}
.sr-flag{position:absolute;left:1.2rem;top:1rem;margin:0;padding:.05rem .7rem;border-radius:999px;background:var(--acc);color:var(--on-acc);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sr-card-lvl{margin:.3rem 0 0;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-d)}
.sr-card h3{font-size:1.5rem;letter-spacing:-.03em;line-height:1.05}
.sr-card h3 .sr-alt{margin-top:.15rem;font-size:.95rem;font-weight:500;letter-spacing:0;color:var(--mut)}
.sr-card-hook{margin:0 0 .5rem;flex:1}
.sr-card-btns{display:flex;flex-wrap:wrap;gap:.5rem}

@media (prefers-reduced-motion:reduce){.sr-stage{transform:none}.sr-cover,.sr-cov,.sr-par,.sr-par i,.sr-ladder li,.sr-meter li::after{transition:none}.sr-cover-col{position:static}}
html.lite .sr-cover,html.lite .sr-cov{transition:none}
@media (max-width:1000px){
  .sr-stage{order:-1;padding-top:.5rem}.sr-fan{width:min(100%,440px)}
  .sr-how-in,.sr-book-in,.sr-book-r .sr-book-in{grid-template-columns:minmax(0,1fr)}
  .sr-book-r .sr-cover-col{order:0}.sr-cover-col{position:static;--bw:min(52vw,280px);padding-bottom:1.2rem}
  .sr-cards{grid-template-columns:minmax(0,1fr);max-width:560px}
}
@media (max-width:700px){.sr-fan{width:min(92%,340px);--spr:50%}.sr-cov{width:42%}.sr-hero .lv-giant{font-size:18vw;top:38%}.sr-col{padding:0 .4rem;gap:.65rem}}
@media (max-width:560px){.sr-qrs{display:none}.sr-buyblock{padding:.9rem}.sr-step{padding:.85rem .9rem}}
@media (max-height:560px){.sr-stage{padding:.2rem 0 1rem}.sr-fan{width:min(100%,300px)}.sr-cover-col{position:static;--bw:min(26vw,36vh)}}