/* Libro 3D: hojas, caras, giro y página base */
.stage{flex:1;display:grid;place-items:center;perspective:2600px;padding-block:14px 4px;min-height:calc(var(--ph) + 40px)}
.tilt{transform-style:preserve-3d;transform:rotateX(calc(10deg + var(--ty,0deg))) rotateY(var(--tx,0deg));transition:transform .5s ease-out}
.enter{animation:enter 1.4s var(--ease) both}
@keyframes enter{from{transform:translateY(60px) rotateX(28deg) scale(.92);opacity:0}to{transform:none;opacity:1}}
.book{position:relative;width:calc(var(--pw) * 2);height:var(--ph);transform-style:preserve-3d;transition:transform var(--flip) var(--ease)}
.book[data-state="front"]{transform:translateX(calc(var(--pw) * -.5))}
.book[data-state="back"]{transform:translateX(calc(var(--pw) * .5))}
.book-shadow{position:absolute;top:1.5%;bottom:0;background:#0b0a09;left:50%;width:50%;border-radius:4px;box-shadow:0 40px 70px rgba(0,0,0,.75),0 10px 22px rgba(0,0,0,.55);transition:left var(--flip) var(--ease),width var(--flip) var(--ease)}
.book[data-state="open"] .book-shadow{left:0;width:100%}
.book[data-state="back"] .book-shadow{left:0;width:50%}
.edges{position:absolute;top:.6%;bottom:.6%;left:50%;width:50%;transform:translateZ(-2px);border-radius:0 3px 3px 0;background:repeating-linear-gradient(90deg,#2a2722 0 1px,#191714 1px 2px);box-shadow:3px 0 0 #0b0a09}
.edges{transition:left var(--flip) var(--ease),width var(--flip) var(--ease)}
.book[data-state="open"] .edges{left:-.6%;width:101.2%;border-radius:3px}
.book[data-state="back"] .edges{left:0;width:50%;border-radius:3px 0 0 3px;box-shadow:-3px 0 0 #0b0a09}
.no-anim,.no-anim *{transition:none!important}

.leaf{position:absolute;top:0;left:50%;width:var(--pw);height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform var(--flip) var(--ease)}
.leaf.is-flipped{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;cursor:default;border-radius:0 3px 3px 0}
.face.back{transform:rotateY(180deg);border-radius:3px 0 0 3px}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.12) 5%,transparent 12%)}
.face.back::after{background:linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,.12) 5%,transparent 12%)}
.face::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 30%,rgba(255,240,220,.16) 48%,rgba(0,0,0,.35) 62%,transparent 80%);background-size:250% 100%}
.leaf.turning .face::before{animation:sheen var(--flip) var(--ease)}
.face.hot{cursor:pointer}
.curl{position:absolute;bottom:0;width:16%;aspect-ratio:1;z-index:7;pointer-events:none;opacity:0;transition:opacity .25s,transform .35s var(--ease)}
.curl.cr{right:0;background:linear-gradient(135deg,transparent 50%,rgba(236,228,212,.16) 50%,rgba(236,228,212,.04) 75%,transparent);transform-origin:100% 100%;transform:scale(.6)}
.curl.cl{left:0;background:linear-gradient(225deg,transparent 50%,rgba(236,228,212,.16) 50%,rgba(236,228,212,.04) 75%,transparent);transform-origin:0 100%;transform:scale(.6)}
.face.hot .curl{opacity:1;transform:none}
@keyframes sheen{0%{opacity:0;background-position:100% 0}35%{opacity:1}100%{opacity:0;background-position:-40% 0}}