/* ═══════════ EL LIBRO EN 3D · la obra como objeto ═══════════
   Cubierta con su ilustración, lomo, cantos de papel y contraportada. Si la obra trae su envoltura entera,
   el lomo y la contraportada son su arte (.con-arte) y el grosor sale de su lomo (--grosor).
   Se gira arrastrando; al abrirlo, la cubierta gira sobre el lomo y aparece la primera página.
   Ojo: las caras no pueden llamarse .tapa, .pie ni .cabeza — marco.css ya usa esos nombres
   en la estantería y se colaban aquí (la raya discontinua bajo el libro era .pie{margin-top}). */

.portada-libro{justify-content:center}
.portada-libro .lienzo{filter:blur(5px) brightness(.46) saturate(.85);transform:scale(1.08)}
.portada-libro .velo{background:
  radial-gradient(ellipse 58% 70% at 30% 52%,rgba(3,5,16,.05) 0%,rgba(3,5,16,.55) 58%,rgba(3,5,16,.88) 100%),
  linear-gradient(to top,rgba(3,5,16,.94) 0%,rgba(3,5,16,.25) 42%,rgba(3,5,16,.5) 100%)}

.escaparate{position:relative;z-index:2;width:min(1120px,100%);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,6vw,96px);
  padding:clamp(12px,3vh,32px) 0}
.escaparate .contenido{text-align:center}
.escaparate .logotipo{width:min(360px,62vw)}
.escaparate .pieza{display:flex;flex-direction:column;align-items:center}
.escaparate .pista{margin:clamp(30px,5vh,48px) 0 0;font-family:var(--f-rotulo);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-idle);text-shadow:0 1px 8px rgba(0,0,0,.9)}
@media (max-width:760px){
  .escaparate{grid-template-columns:1fr;gap:clamp(8px,2vh,20px)}
  .escaparate .pista{margin-top:clamp(22px,3.4vh,34px)}
}

.libro3d{--w:clamp(210px,23vw,320px);--ratio:1.414;--grosor:.13;--h:calc(var(--w) * var(--ratio));--g:calc(var(--w) * var(--grosor));
  --ry:-30deg;--rx:10deg;--esc:1;--brillo:40%;
  position:relative;width:var(--w);height:var(--h);perspective:1800px;perspective-origin:50% 38%;
  cursor:grab;touch-action:pan-y;outline:none;-webkit-tap-highlight-color:transparent;user-select:none}
@media (max-width:760px){.libro3d{--w:min(52vw,230px)}}
.libro3d.agarrado{cursor:grabbing}
.libro3d:focus-visible::after{content:"";position:absolute;inset:-18px;border:1px solid var(--cyan);pointer-events:none}

.libro3d .flota{position:absolute;inset:0;transform-style:preserve-3d;animation:libro-flota 8s ease-in-out infinite}
@keyframes libro-flota{0%,100%{transform:translateY(0) rotateY(0deg)}50%{transform:translateY(-9px) rotateY(7deg)}}
.libro3d.agarrado .flota,.libro3d.abriendo .flota{animation-play-state:paused}
html[data-animaciones="0"] .libro3d .flota{animation:none}

.libro3d .cuerpo{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--esc));transition:transform 1s var(--curva)}
.libro3d.agarrado .cuerpo{transition:none}
.libro3d .cara{position:absolute;margin:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* la cubierta: gira sobre el lomo */
.libro3d .cubierta{inset:0;transform-style:preserve-3d;transform-origin:left center;
  transform:translateZ(calc(var(--g) / 2)) rotateY(0deg);transition:transform 1.2s cubic-bezier(.55,.05,.25,1)}
.libro3d .cubierta > div{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.libro3d .exterior img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.libro3d .exterior::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.14) 3.2%,rgba(255,236,190,.12) 4.6%,rgba(0,0,0,0) 9%)}
.libro3d .exterior::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(112deg,transparent 38%,rgba(255,236,190,.16) 49%,transparent 60%);
  background-size:260% 100%;background-position:var(--brillo) 0}
.libro3d .interior{transform:rotateY(180deg);display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 42%,#2A2118 0%,#140F0A 72%)}
.libro3d .interior img{width:62%;opacity:.8}

/* el filete grabado de las guardas y la contraportada: una línea fina, a un dedo del borde */
.libro3d .interior::before,.libro3d .trasera::before{content:"";position:absolute;inset:11px;pointer-events:none;
  border:1px solid rgba(201,163,95,.34)}

/* la primera página, debajo de la cubierta */
.libro3d .pagina{top:3px;bottom:3px;left:0;right:5px;transform:translateZ(calc(var(--g) / 2 - 2px));
  background:radial-gradient(ellipse 120% 80% at 50% 30%,#F0E6CE 0%,#E7DABD 58%,#D6C5A1 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--w) * .035);
  text-align:center;padding:14%;color:var(--ink)}
.libro3d .pagina .parte{font-family:var(--f-rotulo);font-size:calc(var(--w) * .032);letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-faint);margin:0}
.libro3d .pagina .cifra{font-family:var(--f-rotulo);font-weight:600;font-size:calc(var(--w) * .2);line-height:1;
  color:var(--leaf);margin:0;text-shadow:0 1px 0 rgba(255,248,226,.7)}
.libro3d .pagina img{width:72%;mix-blend-mode:multiply;opacity:.85}
.libro3d .pagina .tit{font-family:var(--f-rotulo);font-weight:500;font-size:calc(var(--w) * .052);letter-spacing:.08em;
  text-transform:uppercase;color:#3A2A18;margin:0;text-wrap:balance}

/* contraportada */
.libro3d .trasera{inset:0;transform:rotateY(180deg) translateZ(calc(var(--g) / 2));
  background:linear-gradient(160deg,#1D1812 0%,#0D0A07 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding-bottom:13%}
.libro3d .trasera img{width:48%;opacity:.7}
.libro3d .trasera span{font-family:var(--f-rotulo);font-size:calc(var(--w) * .036);letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold-idle)}

/* el lomo */
.libro3d .lomo{top:0;left:calc(50% - var(--g) / 2);width:var(--g);height:var(--h);
  transform:rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background:linear-gradient(90deg,#05050A 0%,#171522 26%,#221F31 50%,#131120 76%,#05050A 100%);
  display:flex;align-items:center;justify-content:center}
.libro3d .lomo::before,.libro3d .lomo::after{content:"";position:absolute;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,200,116,.75),transparent)}
.libro3d .lomo::before{top:7%}
.libro3d .lomo::after{bottom:7%}
.libro3d .lomo span{writing-mode:vertical-rl;white-space:nowrap;font-family:var(--f-rotulo);font-weight:600;
  font-size:calc(var(--g) * .34);letter-spacing:.3em;text-transform:uppercase;
  background:linear-gradient(90deg,#F6E5B4,#D8AE60 50%,#8C6736);-webkit-background-clip:text;background-clip:text;color:transparent}
.libro3d .lomo small{position:absolute;bottom:11%;font-family:var(--f-rotulo);font-size:calc(var(--g) * .2);color:var(--gold-idle)}

/* la envoltura del autor: su lomo y su contraportada, tal cual */
.libro3d .trasera.con-arte{padding:0;background:#111}
.libro3d .lomo.con-arte{background:#111}
.libro3d .trasera.con-arte::before,.libro3d .lomo.con-arte::before,.libro3d .lomo.con-arte::after{display:none}
.libro3d .trasera.con-arte img,.libro3d .lomo.con-arte img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:1;pointer-events:none}

/* los cantos de papel: el de delante con sus hojas; arriba y abajo lisos, que de canto no se rayen */
.libro3d .canto{top:3px;left:calc(50% - (var(--g) - 4px) / 2);width:calc(var(--g) - 4px);height:calc(var(--h) - 6px);
  transform:rotateY(90deg) translateZ(calc(var(--w) / 2 - 5px));
  background:repeating-linear-gradient(90deg,#EFE6CF 0 1px,#CDBC98 1px 2px),#E2D5B8}
.libro3d .canto-sup,.libro3d .canto-inf{left:0;top:calc(50% - (var(--g) - 4px) / 2);width:calc(var(--w) - 5px);height:calc(var(--g) - 4px);
  background:linear-gradient(0deg,#D6C7A4 0%,#EDE3CB 50%,#D6C7A4 100%)}
.libro3d .canto-sup{transform:rotateX(90deg) translateZ(calc(var(--h) / 2 - 3px))}
.libro3d .canto-inf{transform:rotateX(-90deg) translateZ(calc(var(--h) / 2 - 3px))}

/* el halo en el suelo, en oro: la casa no usa sombras difusas */
.libro3d .suelo3d{position:absolute;left:-26%;right:-26%;bottom:-12%;height:18%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--gold-hi) 30%,transparent) 0%,color-mix(in srgb,var(--gold) 10%,transparent) 42%,transparent 70%)}

/* abrirlo: se pone de frente, se acerca y la cubierta gira */
.libro3d.abriendo{--ry:0deg;--rx:3deg;--esc:1.14;cursor:default}
.libro3d.abierto .cubierta{transform:translateZ(calc(var(--g) / 2)) rotateY(-168deg)}
.portada-libro.saliendo .contenido,.portada-libro.saliendo .pista{opacity:0;transition:opacity .6s ease}

/* ═══ el libro sale del marco: en los estantes (.libro) y en las bandas de la Library (.nicho) ═══
   Solo con ratón y con las animaciones puestas; en móvil la tapa se queda como está. */
.con-libro .emerge{display:none}
@media (hover:hover) and (pointer:fine){
  html:not([data-animaciones="0"]) .con-libro .emerge{display:grid;place-items:center;position:absolute;z-index:5;
    pointer-events:none;container-type:inline-size}
  html:not([data-animaciones="0"]) .libro .emerge{left:0;top:0;width:100%;aspect-ratio:3/4}
  html:not([data-animaciones="0"]) .nicho .emerge{inset:0}
  .con-libro .emerge .libro3d{--w:76cqw;--ry:0deg;--rx:0deg;--esc:.9;cursor:inherit;pointer-events:none;
    opacity:0;transform:translateY(0);transition:opacity .4s ease,transform .9s var(--curva)}
  .con-libro .emerge .flota{animation-play-state:paused}
  .con-libro .emerge .suelo3d{bottom:-16%;opacity:0;transition:opacity .9s ease}
  .con-libro:hover .emerge .libro3d{--ry:-26deg;--rx:8deg;--esc:1;opacity:1;transform:translateY(-13%)}
  .con-libro:hover .emerge .flota{animation-play-state:running}
  .con-libro:hover .emerge .suelo3d{opacity:1}
  html:not([data-animaciones="0"]) .con-libro :is(.tapa img,.plana){transition:filter .45s,opacity .5s ease}
  html:not([data-animaciones="0"]) .con-libro:hover :is(.tapa:has(+ .emerge) img,.nicho:has(.emerge) .plana){opacity:.12}
}

@media (prefers-reduced-motion:reduce){
  .libro3d .flota{animation:none}
  .libro3d .cuerpo,.libro3d .cubierta{transition:none}
  .con-libro .emerge{display:none!important}
}