/* Diario interactivo: el cuaderno del juego (NotebookSpread) con sus dos páginas; en teléfono, una página a la vez. */
.diary{padding-block:10px 80px}
.book-wrap{perspective:2400px;max-width:1180px;margin-inline:auto}
.book{position:relative;width:100%;aspect-ratio:1476/892;background:url(/constanza/media/arte/cuaderno-abierto.webp) center/100% 100% no-repeat;container-type:inline-size;filter:drop-shadow(0 30px 40px rgba(41,31,65,.35))}
.page{position:absolute;top:7.5%;bottom:8.5%;display:flex;flex-direction:column;gap:1.1cqw;color:#2b2836;font-family:var(--hand);font-size:1.42cqw;line-height:1.52;overflow:hidden}
.page.l{left:7%;width:39.5%}
.page.r{left:54.2%;width:39.5%}
.page .chap{font-family:var(--display);font-size:1.05cqw;letter-spacing:.14em;text-transform:uppercase;color:#726c87}
.page h2{font-family:var(--hand);font-weight:700;font-size:2.35cqw;line-height:1.15;color:#23212b}
.page .txt{white-space:pre-line}
.page img{max-height:44%;width:auto;max-width:100%;align-self:center;object-fit:contain;mix-blend-mode:multiply;margin-top:auto}
.page .folio{margin-top:auto;font-family:var(--display);font-size:1cqw;color:#827c98;text-align:center;padding-top:.6cqw}
.page img+.folio{margin-top:0}
.page.cover h1{font-family:var(--hand);font-weight:700;font-size:3.2cqw;line-height:1.1;color:#23212b}
.page.cover .sub{color:#655f79;font-size:1.35cqw}
.page.cover img{max-height:62%;margin-top:1cqw}
.toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.2cqw}
.toc button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:.2cqw;width:100%;box-sizing:border-box;padding:.6cqw .8cqw;border-radius:.6cqw}
.toc button:hover,.toc button:focus-visible{background:rgba(144,108,62,.12)}
.toc b{font-family:var(--hand);font-weight:700;font-size:1.7cqw;color:#23212b}
.toc span{font-family:var(--display);font-size:1.05cqw;color:#726c87}
.toc .new{color:#ad4f7e}
.flip{position:absolute;top:2%;bottom:2%;width:46%;transform-style:preserve-3d;pointer-events:none;z-index:3}
.flip.fwd{left:50%;transform-origin:left center;animation:fwd .7s cubic-bezier(.45,.05,.3,1) forwards}
.flip.back{left:4%;transform-origin:right center;animation:back .7s cubic-bezier(.45,.05,.3,1) forwards}
.flip::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#e7e1fe,#f0edff 45%,#ddd5fb);border-radius:3px;box-shadow:0 0 30px rgba(0,0,0,.18)}
@keyframes fwd{to{transform:rotateY(-180deg)}}
@keyframes back{to{transform:rotateY(180deg)}}
.fade{animation:fade .45s ease both}
@keyframes fade{from{opacity:0}}
.controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.controls button{all:unset;cursor:pointer;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:1.4rem}
.controls button:disabled{opacity:.35;cursor:default}
.controls .count{font-variant-numeric:tabular-nums;color:var(--soft);min-width:13ch;text-align:center}
.controls .idx{all:unset;cursor:pointer;width:auto;height:auto;border-radius:99px;padding:10px 16px;font-size:1rem}
.hint{text-align:center;color:var(--soft);font-family:var(--hand);margin-top:6px}
/* teléfono: una página a la vez, sobre papel */
@media (max-width:820px){
  .book{aspect-ratio:auto;min-height:72vh;background:url(/constanza/media/arte/pagina.webp) center/cover;border-radius:6px 14px 14px 6px;box-shadow:inset 10px 0 18px -10px rgba(67,55,98,.35);filter:drop-shadow(0 18px 24px rgba(41,31,65,.3))}
  .page{position:relative;inset:auto;width:auto!important;left:auto!important;padding:28px 22px 22px;font-size:18px;gap:12px;min-height:72vh}
  .page .chap{font-size:12px}.page h2{font-size:28px}.page.cover h1{font-size:36px}.page.cover .sub{font-size:16px}
  .page .folio{font-size:13px}.toc b{font-size:21px}.toc span{font-size:13px}.toc{gap:10px}.toc button{padding:8px 10px;border-radius:8px}
  .page img{max-height:240px}
  .page.l.hide-m,.page.r.hide-m{display:none}
  .flip{display:none}
}
body.desk .controls button{background:#fbfafd;border-color:#d4c9fe;color:#342e46}
body.desk .controls .count{color:#e6e0fd}
body.desk .hint{color:#d9cefe}
.page{font-size:1.56cqw}
@media (max-width:820px){.book{background:#ece8fd url(/constanza/media/arte/pagina.webp) center/cover}.page{font-size:18px;color:#2b2836}}
.page .unlock{font-family:var(--display);font-size:.98cqw;color:#9f6466;text-align:center;font-style:italic}
.page img+.unlock{margin-top:.2cqw}

@media (max-width:820px){.page .unlock{font-size:13px}}