/* Digital catalog — simple slide viewer (no page-flip animation/sound) */

.book-section{ padding-top:56px; }

.book-toolbar{
  display:flex; align-items:center; justify-content:center; gap:14px;
  max-width:960px; margin:0 auto 22px; position:relative;
}
.book-toolbar-center{ text-align:center; }
.book-toolbar-right{ position:absolute; right:0; top:50%; transform:translateY(-50%); }
.book-page-counter{
  font-family:'Oswald', sans-serif; font-weight:600; letter-spacing:0.5px;
  color:var(--navy); font-size:1rem;
}
.book-toolbar-right{ display:flex; gap:8px; }

.book-tool-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border);
  background:var(--white); color:var(--navy); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.2s ease; flex-shrink:0;
}
.book-tool-btn svg{ width:20px; height:20px; }
.book-tool-btn:hover{ background:var(--navy); color:var(--white); border-color:var(--navy); transform:translateY(-1px); }
.book-tool-btn:disabled{ opacity:0.35; cursor:default; }
.book-tool-btn:disabled:hover{ background:var(--white); color:var(--navy); border-color:var(--border); transform:none; }
.book-tool-btn.active{ background:var(--gold); color:var(--white); border-color:var(--gold); }

.book-stage{
  position:relative; max-width:620px; margin:0 auto;
  min-height:420px; display:flex; align-items:center; justify-content:center;
}

.book-nav-btn{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  box-shadow:0 6px 18px rgba(12,31,58,0.18);
}
.book-nav-prev{ left:14px; }
.book-nav-next{ right:14px; }

.book-loading{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; color:var(--text-muted); font-family:'Inter', sans-serif; font-size:0.95rem;
  background:var(--white); border-radius:12px; z-index:5; transition:opacity 0.3s ease;
}
.book-loading.hidden{ opacity:0; pointer-events:none; }
.book-spinner{
  width:40px; height:40px; border-radius:50%;
  border:4px solid var(--border); border-top-color:var(--gold);
  animation:book-spin 0.9s linear infinite;
}
@keyframes book-spin{ to{ transform:rotate(360deg); } }

.book-viewport{
  position:relative; width:100%; overflow:hidden; border-radius:10px;
  filter:drop-shadow(0 24px 40px rgba(12,31,58,0.22));
  opacity:0; transition:opacity 0.4s ease;
  background:var(--white);
}
.book-viewport.ready{ opacity:1; }

.book-track{
  display:flex; width:100%;
  transition:transform 0.45s cubic-bezier(0.65,0,0.35,1);
  will-change:transform;
}
.book-slide{ flex:0 0 100%; max-width:100%; }
.book-slide img{ display:block; width:100%; height:auto; }

.book-thumbs{
  max-width:100%; margin:34px auto 0; display:flex; gap:8px; overflow-x:auto;
  padding:10px 4px 16px; scroll-behavior:smooth;
}
.book-thumbs::-webkit-scrollbar{ height:6px; }
.book-thumbs::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }

.book-thumb{
  flex:0 0 auto; width:58px; height:75px; border-radius:5px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; opacity:0.6; transition:all 0.18s ease;
  background:var(--bg);
}
.book-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.book-thumb:hover{ opacity:0.9; transform:translateY(-2px); }
.book-thumb.active{ opacity:1; border-color:var(--gold); }

@media (max-width:640px){
  .book-toolbar{ gap:10px; }
  .book-tool-btn{ width:38px; height:38px; }
  .book-tool-btn svg{ width:17px; height:17px; }
  .book-page-counter{ font-size:0.85rem; }
  .book-thumb{ width:46px; height:60px; }
}

/* ---------- Catalogo ampliado ----------
   No se usa la pantalla completa del navegador: Safari de iPhone solo la permite
   sobre un <video>, asi que en telefono el boton no hacia nada. El visor se pone
   `position:fixed` ocupando la pantalla, que funciona en todos lados.

   El visor normal vive en una caja de 620 px de ancho; aqui se le quita el tope y
   se le fija la proporcion real de la pagina (1300 x 1682, tipo carta) para que la
   hoja entre ENTERA, de arriba a abajo, sea cual sea el tamano de la pantalla. */
/* Bloqueo del fondo. En iPhone, `overflow:hidden` sobre el body NO alcanza: Safari
   sigue desplazando la pagina por detras del visor. Lo unico que de verdad lo
   congela es sacar el body del flujo con `position:fixed`; `book.js` guarda la
   posicion antes de ampliar y la devuelve al cerrar. */
body.book-zoom-open{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }
.book-stage.book-zoom{
  position:fixed; inset:0; z-index:9999;
  max-width:none; width:100vw; height:100vh; height:100dvh; min-height:0;
  margin:0; background:#0b1626; padding:26px 20px 112px;
  display:flex; align-items:center; justify-content:center;
}
.book-stage.book-zoom .book-viewport{
  width:auto; height:100%; aspect-ratio:1300/1682; max-width:100%;
  border-radius:0; filter:none; margin:0 auto; background:transparent;
}
.book-stage.book-zoom .book-track{ height:100%; }
.book-stage.book-zoom .book-slide{ height:100%; }
.book-stage.book-zoom .book-slide img{ width:100%; height:100%; object-fit:contain; }
.book-stage.book-zoom .book-loading{ background:#0b1626; }
/* Las flechas quedan pegadas al borde de la pantalla, no al del visor. */
.book-stage.book-zoom .book-nav-prev{ left:10px; }
.book-stage.book-zoom .book-nav-next{ right:10px; }

/* La tira de miniaturas vive FUERA del visor, asi que un visor a pantalla
   completa se la tapaba entera y no habia forma de tocarla. `book.js` la mete
   dentro del visor mientras esta ampliado (y la devuelve a su sitio al cerrar);
   aqui se la ancla al borde de abajo. El relleno inferior del visor le reserva
   el espacio, para que la hoja no quede por debajo de la tira. */
.book-stage.book-zoom .book-thumbs{
  position:absolute; left:0; right:0; bottom:0; z-index:11;
  margin:0; padding:12px 12px 14px; max-width:none;
  background:rgba(8,17,30,0.86);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.book-stage.book-zoom .book-thumbs::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.28); }
.book-stage.book-zoom .book-thumb{ opacity:0.55; }
.book-stage.book-zoom .book-thumb.active{ opacity:1; }

/* Boton de cerrar: solo existe con el catalogo ampliado. */
.book-close{
  display:none; position:absolute; top:16px; right:18px; z-index:12;
  width:46px; height:46px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,0.16); color:#fff;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  align-items:center; justify-content:center;
  transition:background 0.18s ease, transform 0.18s ease;
}
.book-close svg{ width:20px; height:20px; }
.book-close:hover{ background:rgba(255,255,255,0.3); transform:scale(1.06); }
.book-stage.book-zoom .book-close{ display:flex; }

@media (max-width:600px){
  .book-stage.book-zoom{ padding:56px 8px 92px; }
  .book-close{ top:10px; right:10px; width:40px; height:40px; }
}