/* Piezas comunes de la cuarta tanda: dibujos, libro y rótulos. La paleta, el grano y las cápsulas vienen de ../p.css. */
.cab{position:fixed;left:0;right:0;top:0;z-index:60;background:linear-gradient(var(--bg) 20%,rgba(var(--bg-rgb),0))}
.t{margin:0;font:400 clamp(26px,3.3vw,52px)/1.05 var(--titulo);letter-spacing:-.035em;text-wrap:balance}
.t em{font-style:normal;color:var(--gold)}
.acc{display:flex;gap:10px;flex-wrap:wrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* dibujos de línea: se trazan al encenderse */
.dib{display:block;width:100%;height:auto;overflow:visible}
.dib .dl{fill:none;stroke:rgba(241,238,230,.7);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease);transition-delay:calc(.15s + var(--i,0) * 50ms)}
.dib .dd{fill:var(--gold);opacity:0;transition:opacity .7s var(--ease) 1.1s}
.dib .dp{fill:rgba(241,238,230,.4);opacity:0;transition:opacity .8s var(--ease) .9s}
.on .dib .dl,.dib.on .dl{stroke-dashoffset:0}
.on .dib .dd,.dib.on .dd{opacity:1}
.on .dib .dp,.dib.on .dp{opacity:1}

/* el libro: tapa negra con letras de oro, hojas de papel */
.lb-host{position:absolute;inset:0;perspective:2400px;perspective-origin:50% 42%;pointer-events:none}
.lb{--pw:min(34vw,420px,calc(74svh/1.38));--ph:calc(var(--pw)*1.38);position:absolute;left:50%;top:50%;width:var(--pw);height:var(--ph);
  transform-style:preserve-3d;transform:translate(-50%,-50%) translateX(calc(var(--pw)*.5*var(--o,0))) rotateX(10deg) rotateZ(calc(var(--o,0)*-1deg))}
.lb::before{content:"";position:absolute;left:calc(var(--pw)*-1);right:0;bottom:-26px;height:34px;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);filter:blur(8px);opacity:.7;transform:translateZ(-20px)}
.lb-hoja{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d}
.lb-cara{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:8% 8% 7%}
.lb-dorso{transform:rotateY(180deg)}
.lb-papel{background:#efe9d9;color:#1a1712}
.lb-papel.izq{box-shadow:inset -18px 0 24px -14px rgba(60,40,10,.35),inset 0 0 40px rgba(120,95,40,.14)}
.lb-papel.der{box-shadow:inset 18px 0 24px -14px rgba(60,40,10,.35),inset 0 0 40px rgba(120,95,40,.14)}
.lb-tapa{background:#15120d;border:1px solid #2b241a;border-radius:2px 8px 8px 2px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12% 8%}
.lb-tapa::before{content:"";position:absolute;inset:5%;border:1px solid rgba(217,163,27,.55);pointer-events:none}
.lb-tapa .nom{font:400 clamp(16px,2.2vw,32px)/1 var(--caps);letter-spacing:.22em;text-align:center;background:linear-gradient(170deg,#f6d77a,#d9a31b 50%,#9a6f0a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;margin-top:30%}
.lb-tapa .lema{font:400 clamp(7.5px,.85vw,11px)/1.7 var(--caps);letter-spacing:.26em;text-align:center;color:rgba(217,163,27,.85)}
.lb-tapa i{display:block;width:10px;height:10px;border-radius:50%;background:var(--gold);margin:0 auto}
.lb-pg h2{margin:0 0 .7em;font:500 clamp(7.5px,.8vw,10.5px)/1 var(--caps);letter-spacing:.24em;color:#8a6200;text-transform:uppercase}
.lb-pg h3{margin:0;font:400 clamp(14px,1.7vw,24px)/1.12 var(--sans);letter-spacing:-.03em}
.lb-pg h3 em{font-style:normal;color:#8a6200}
.lb-pg p{margin:.7em 0 0;font:400 clamp(8.5px,.88vw,12px)/1.5 var(--sans);color:#4a4435}
.lb-pg ul{list-style:none;margin:1em 0 0;padding:0;border-top:1px solid rgba(26,23,18,.18)}
.lb-pg li{padding:.55em 0;border-bottom:1px solid rgba(26,23,18,.18);font:400 clamp(8.5px,.88vw,12px)/1.35 var(--sans)}
.lb-pg li b{display:block;font:500 clamp(7.5px,.8vw,10.5px)/1.2 var(--caps);letter-spacing:.16em;color:#8a6200}
.lb-lam{display:grid;grid-template-columns:repeat(2,1fr);gap:4% 5%;margin-top:6%}
.lb-lam figure{margin:0}
.lb-lam .dib .dl{stroke:#1a1712;stroke-width:1.5}
.lb-lam .dib .dd{fill:#8a6200}
.lb-lam figcaption{margin-top:.2em;font:500 clamp(7px,.75vw,10px)/1.2 var(--caps);letter-spacing:.14em;color:#4a4435;text-align:center}
.lb-pg .btn{padding:.9em 1.3em .8em;font-size:clamp(8.5px,.9vw,12px);background:#1a1712;border-color:#1a1712;color:#efe9d9}
.lb-pg .btn.sec{background:none;color:#1a1712;border-color:rgba(26,23,18,.35)}
.lb-pg .acc{margin-top:1.2em;gap:.6em}
.lb-pg .campo{margin-top:1.1em;padding:.65em 1em;border:1px solid rgba(26,23,18,.35);border-radius:999px;font:400 clamp(8.5px,.95vw,12.5px)/1.2 var(--sans);white-space:nowrap;overflow:hidden}
.lb-pg .campo::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:2px;background:#8a6200;vertical-align:-.15em;animation:lbparp 1s steps(1) infinite}
@keyframes lbparp{50%{opacity:0}}
@media (max-width:860px){
  .lb{--pw:min(76vw,340px,calc(66svh/1.38));transform:translate(-50%,-50%) rotateX(8deg)}
  .lb-pg h3{font-size:clamp(17px,5vw,22px)}.lb-pg p,.lb-pg li{font-size:12.5px}.lb-pg h2{font-size:10px}.lb-pg .btn{font-size:12px}.lb-lam figcaption{font-size:9px}.lb-pg .campo{font-size:12px}
}

/* libro de una página (celular) */
.lbm{position:absolute;left:50%;top:50%;width:min(86vw,360px);height:min(70svh,560px);transform:translate(-50%,-50%)}
.lbm .lb-cara{inset:0;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .4s var(--ease),transform .4s var(--ease);padding:9% 8%;border-radius:6px 14px 14px 6px;pointer-events:none}
.lbm .lb-cara.on{opacity:1;transform:none;pointer-events:auto}
.lbm .lb-lam{margin-top:5%}
.lbm .lb-papel{box-shadow:0 20px 50px -20px rgba(0,0,0,.7),inset 14px 0 18px -12px rgba(60,40,10,.3)}
.lbm .lb-tapa{padding:14% 9%}
.lbm .lb-tapa .nom{font-size:clamp(20px,6vw,28px)}.lbm .lb-tapa .lema{font-size:9.5px}