/* Visualmente oculto, accesible para lectores de pantalla y crawlers —
   usado por el <h1> de accesibilidad/SEO en index.html. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════
   CATÁLOGO INTERACTIVO  —  styles.css
   ═══════════════════════════════════════════════════

   MODELO DE PÁGINA:
   ──────────────────
   Imágenes origen:   1920 × 1080 px  (ratio 16:9)
   Cada página:       960 × 540 px    (ratio 16:9)
   Libro abierto:    1920 × 540 px    (ratio 32:9)

   El libro se escala via CSS sin perder proporción.
   Las imágenes usan object-fit:cover + center.

   PARA CAMBIAR TAMAÑO BASE:
     --book-w  = ancho total del libro abierto
     --book-h  = alto del libro  (book-w / 3.556)
     O ajusta --book-max-w para el límite en desktop.

   PARA CAMBIAR FONDO:
     --c-bg
═══════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Libro ──────────────────────────────────────
     ratio 32:9  =  3.5556
     Cada página es la mitad: ratio 16:9  =  1.7778  */
  --book-max-w : 1920px;           /* ancho máximo desktop       */
  --book-ratio : 3.5556;           /* 32 / 9  (spread completo)  */
  --page-ratio : 1.7778;           /* 16 / 9  (una sola página)  */

  /* Mínimos para que la imagen siempre sea grande */
  --book-min-h : 420px;
  --book-max-h : 80vh;

  /* Lomo */
  --spine-w    : 8px;

  /* ── Flip ── */
  --flip-ms    : 750ms;
  --flip-ease  : cubic-bezier(0.645, 0.045, 0.355, 1.000);

  /* ── Paleta ── */
  --c-bg        : #242424;
  --c-book-bg   : #111114;
  --c-gold      : #59b4e1;
  --c-gold-dim  : rgba(0, 162, 255, 0.18);
  --c-gold-glow : rgba(0, 204, 255, 0.07);
  --c-ui        : #b8b8bc;
  --c-muted     : #42424a;
  --c-modal-bg  : rgba(8,8,10,.85);
}

/* ── Base ── */
html, body {
  height: 100%;
  background: var(--c-bg);
  color: var(--c-ui);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ═══════════════════════════════════════════════════
   LOADER
═══════════════════════════════════════════════════ */
#loader {
  position: fixed; inset: 0;
  background: var(--c-bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 32px;
  z-index: 9999;
  transition: opacity .6s ease, visibility .6s ease;
}
#loader.out { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-book-wrap { position: relative; }

.loader-book {
  width: 80px; height: 56px;
  display: flex; align-items: stretch;
  gap: 0;
}
.loader-cover {
  flex: 1;
  background: linear-gradient(135deg, rgba(110, 175, 201, 0.5), rgba(110, 180, 201, 0.2));
  border-radius: 2px;
  animation: lcFlap 1.15s ease-in-out infinite alternate;
}
.loader-cover--left  {
  border-radius: 3px 0 0 3px;
  transform-origin: right center;
  animation-delay: .08s;
}
.loader-cover--right {
  border-radius: 0 3px 3px 0;
  transform-origin: left center;
}
@keyframes lcFlap {
  0%   { transform: scaleX(1);    opacity: .7;  }
  100% { transform: scaleX(.05);  opacity: .2;  }
}
.loader-spine-center {
  width: 5px; flex-shrink: 0;
  background: var(--c-gold);
  border-radius: 1px;
}
.loader-shadow {
  height: 10px; margin-top: 4px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, transparent 70%);
  border-radius: 50%; filter: blur(4px);
}

.loader-label {
  font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--c-muted);
}
.loader-dots::after {
  content: ''; display: inline-block;
  animation: ldots 1.6s steps(4,end) infinite;
}
@keyframes ldots {
  0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} 100%{content:''}
}

/* ═══════════════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════════════ */
#app {
  height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 12px 32px;
  opacity: 0;
  transition: opacity .5s ease;
}
#app.ready { opacity: 1; }

/* Header */
.app-header { flex-shrink: 0; }
.brand-badge {
  font-size: 9px; letter-spacing: .42em;
  text-transform: uppercase; color: var(--c-gold); opacity: .7;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════
   BOOK SCENE  —  contenedor con perspectiva 3D
═══════════════════════════════════════════════════ */
#book-scene {
  flex-shrink: 1;
  position: relative;
  width: 100%;
  max-width: var(--book-max-w);

  /* Alto calculado por el ratio, con piso y techo */
  height: min(var(--book-max-h), calc(50vw / var(--page-ratio)));
  min-height: var(--book-min-h);
  max-height: var(--book-max-h);

  /* Perspectiva global: punto de fuga compartido */
  perspective: 3200px;
  perspective-origin: 50% 48%;
}

/* Sombra proyectada en el "suelo" */
#book-ground-shadow {
  position: absolute;
  bottom: -24px; left: 8%; right: 8%;
  height: 40px;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,.65) 0%, transparent 68%);
  border-radius: 50%;
  filter: blur(12px);
  z-index: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

/* ── EL LIBRO ── */
#book {
  position: absolute; inset: 0;
  display: flex;
  transform-style: preserve-3d;
  border-radius: 3px;

  /* Sombra exterior premium del libro */
  box-shadow:
    0 6px 32px rgba(0,0,0,.65),
    0 2px 8px  rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.035);

  z-index: 1;
}

/* ═══════════════════════════════════════════════════
   PÁGINAS ESTÁTICAS  —  fondo permanente
═══════════════════════════════════════════════════ */
.static-page {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--c-book-bg);
}
.static-page--left  { border-radius: 3px 0 0 3px; }
.static-page--right { border-radius: 0 3px 3px 0; }

/* Contenedor de imagen — centra y cubre */
.page-img-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
}

/* ── IMAGEN: protagonista visual ───────────────── */
.page-img-wrap img {
  /* Cubre el 100% del contenedor sin deformarse.
     Con imágenes 16:9 esto es perfecto ya que el
     contenedor también es 16:9. No hay recorte. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  position: relative; z-index: 1;

  /* Suave aparición al cargar */
  transition: opacity .35s ease;
  opacity: 1;
}
.page-img-wrap img[src=""] { opacity: 0; }

/* Sombras internas junto al lomo */
.gutter-shadow {
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  z-index: 4;
  pointer-events: none;
}
.gutter-shadow--left {
  right: 0;
  background: linear-gradient(to left,
    rgba(0,0,0,.32) 0%,
    rgba(0,0,0,.12) 40%,
    transparent 100%);
}
.gutter-shadow--right {
  left: 0;
  background: linear-gradient(to right,
    rgba(0,0,0,.32) 0%,
    rgba(0,0,0,.12) 40%,
    transparent 100%);
}

/* Placeholder cuando no hay imagen */
.page-ph {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(10px, 1.1vw, 14px);
  letter-spacing: .2em; text-transform: uppercase;
  color: #222228;
  border: 1px dashed #1c1c22;
}

/* ── LOMO ── */
#spine {
  width: var(--spine-w);
  flex-shrink: 0;
  background: linear-gradient(to right,
    #0e0e11 0%, #050506 50%, #0e0e11 100%);
  position: relative; z-index: 10;
  display: flex; align-items: stretch; justify-content: center;

  /* Sombra suave a ambos lados del lomo */
  box-shadow:
    -3px 0 8px rgba(0,0,0,.45),
     3px 0 8px rgba(0,0,0,.45);
}
.spine-glint {
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(110, 168, 201, 0.2) 15%,
    rgba(110, 172, 201, 0.55) 50%,
    rgba(110, 157, 201, 0.2) 85%,
    transparent 100%);
  align-self: stretch;
}

/* ═══════════════════════════════════════════════════
   HOJA ANIMADA  (.flip-leaf)
   ─ Creada dinámicamente por JS antes de cada flip.
   ─ Ocupa exactamente media escena.
   ─ Tiene cara frontal y trasera con backface-visibility.
   ─ El gradiente de pliegue se aplica vía JS al 50%.
═══════════════════════════════════════════════════ */
.flip-leaf {
  position: absolute;
  top: 0; bottom: 0;
  /* El ancho: mitad del libro menos el lomo */
  width: calc(50% - var(--spine-w) / 2);

  /* Perspectiva propia para un 3D más pronunciado */
  transform-style: preserve-3d;
  z-index: 100;
  pointer-events: none;
  will-change: transform, filter;
}

/* Origen y posición según dirección */
.flip-leaf.dir-right {
  /* Viene de la derecha → gira sobre el borde izquierdo */
  left: calc(50% + var(--spine-w) / 2);
  transform-origin: left center;
  border-radius: 0 3px 3px 0;
}
.flip-leaf.dir-left {
  /* Viene de la izquierda → gira sobre el borde derecho */
  right: calc(50% + var(--spine-w) / 2);
  left: 0;
  transform-origin: right center;
  border-radius: 3px 0 0 3px;
}

/* Caras */
.flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.flip-face img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
}
.flip-face-front { transform: rotateY(0deg); }
.flip-face-back  { transform: rotateY(180deg); }

/* ── Canvas de sombra de pliegue (se dibuja desde JS) ── */
.fold-canvas {
  position: absolute; inset: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: inherit;
}

/* Placeholder dentro del flip */
.flip-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .15em; text-transform: uppercase; color: #1e1e24;
  z-index: 0;
  background: var(--c-book-bg);
}

/* ── Keyframes del flip ────────────────────────── */

/* Hoja derecha avanzando (next): 0° → -180° */
@keyframes flipRight {
  0%   { transform: rotateY(0deg);    filter: brightness(1)    drop-shadow(0 0 0 transparent); }
  25%  { transform: rotateY(-45deg);  filter: brightness(0.88) drop-shadow(-8px 4px 18px rgba(0,0,0,.5)); }
  50%  { transform: rotateY(-90deg);  filter: brightness(0.42) drop-shadow(-12px 6px 24px rgba(0,0,0,.7)); }
  75%  { transform: rotateY(-135deg); filter: brightness(0.75) drop-shadow(-6px 3px 14px rgba(0,0,0,.45)); }
  100% { transform: rotateY(-180deg); filter: brightness(0.92) drop-shadow(0 0 0 transparent); }
}

/* Hoja izquierda retrocediendo (prev): 180° → 0° */
@keyframes flipLeft {
  0%   { transform: rotateY(0deg);    filter: brightness(1)    drop-shadow(0 0 0 transparent); }
  25%  { transform: rotateY(45deg);   filter: brightness(0.88) drop-shadow(8px 4px 18px rgba(0,0,0,.5)); }
  50%  { transform: rotateY(90deg);   filter: brightness(0.42) drop-shadow(12px 6px 24px rgba(0,0,0,.7)); }
  75%  { transform: rotateY(135deg);  filter: brightness(0.75) drop-shadow(6px 3px 14px rgba(0,0,0,.45)); }
  100% { transform: rotateY(180deg);  filter: brightness(0.92) drop-shadow(0 0 0 transparent); }
}

/* Breve "liftoff" del lomo al empezar */
@keyframes spineGlow {
  0%  { box-shadow: -3px 0 8px rgba(0,0,0,.45), 3px 0 8px rgba(0,0,0,.45); }
  30% { box-shadow: -5px 0 16px rgba(0,0,0,.6), 5px 0 16px rgba(0,0,0,.6),
                    0 0 8px rgba(110, 180, 201, 0.25); }
  100%{ box-shadow: -3px 0 8px rgba(0,0,0,.45), 3px 0 8px rgba(0,0,0,.45); }
}

/* Animación activa del lomo */
#spine.flipping {
  animation: spineGlow var(--flip-ms) ease-in-out forwards;
}

/* ═══════════════════════════════════════════════════
   FLECHAS DE NAVEGACIÓN
═══════════════════════════════════════════════════ */
.nav-btn {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: clamp(34px, 3vw, 48px);
  height: clamp(34px, 3vw, 48px);
  background: rgba(8,8,10,.8);
  border: 1px solid rgba(110, 175, 201, 0.2);
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-gold);
  z-index: 200;
  transition: background .22s, border-color .22s, transform .15s, opacity .2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nav-btn svg {
  width: clamp(13px, 1.3vw, 18px);
  height: clamp(13px, 1.3vw, 18px);
  flex-shrink: 0;
}
.nav-btn:hover:not(:disabled) {
  background: rgba(201, 161, 110, 0.12);
  border-color: rgba(201,169,110,.5);
  transform: translateY(-50%) scale(1.1);
}
.nav-btn:active:not(:disabled) {
  transform: translateY(-50%) scale(.93);
}
.nav-btn:disabled {
  opacity: .15; cursor: default; pointer-events: none;
}
.nav-btn--left  { left:  -28px; }
.nav-btn--right { right: -28px; }

/* ═══════════════════════════════════════════════════
   BARRA DE CONTROLES
═══════════════════════════════════════════════════ */
.controls {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: var(--book-max-w);
  padding: 0 2px;
  gap: 8px;
}

.spread-info {
  min-width: 110px;
  font-size: clamp(9px, .85vw, 11px);
  letter-spacing: .07em; color: var(--c-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#spread-label { color: var(--c-gold); opacity: .82; }

.nav-center {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.page-num {
  font-size: clamp(11px, .9vw, 13px);
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
  display: flex; align-items: center; gap: 5px;
}
.page-num b { color: var(--c-gold); font-weight: 500; }
.slash { opacity: .3; }

.action-btns { display: flex; align-items: center; gap: 8px; }

/* ── Botones de acción: Sonido, Descargar, Ampliar ──────────────
   Tamaño generoso, fondo visible, label de texto incluido.
   En móvil se colapsan a solo ícono.
────────────────────────────────────────────────────────────── */
.icon-btn {
  height: 38px;
  min-width: 38px;
  padding: 0 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,169,110,.28);
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  color: var(--c-ui);
  font-size: 12px;
  font-family: inherit;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, transform .12s;
}
.icon-btn svg {
  width: 16px; height: 16px; flex-shrink: 0;
}
.icon-btn .btn-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .85;
}
.icon-btn:hover {
  background: rgba(110, 183, 201, 0.13);
  border-color: rgba(110, 168, 201, 0.6);
  color: var(--c-gold);
  transform: translateY(-1px);
}
.icon-btn:active { transform: translateY(0) scale(.97); }
.icon-btn.on {
  background: rgba(110, 168, 201, 0.1);
  border-color: rgba(110, 168, 201, 0.55);
  color: var(--c-gold);
}

/* Botón descargar: relleno dorado para destacar */
.icon-btn--accent {
  background: rgba(255, 115, 0, 0.12);
  border-color: rgba(255, 115, 0, 0.45);
  color: var(--c-gold);
}
.icon-btn--accent:hover {
  background: rgba(201,169,110,.22);
  border-color: var(--c-gold);
}

/* En tablet/móvil: ocultar labels para ahorrar espacio */
@media (max-width: 860px) {
  .icon-btn { padding: 0 10px; }
  .icon-btn .btn-label { display: none; }
}
@media (max-width: 480px) {
  .icon-btn { height: 34px; min-width: 34px; padding: 0 8px; }
  .icon-btn svg { width: 15px; height: 15px; }
}

/* ═══════════════════════════════════════════════════
   MINIATURAS
═══════════════════════════════════════════════════ */
#thumb-rail {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  max-width: min(var(--book-max-w), 94vw);
  padding: 2px 1px 0;
  scrollbar-width: none;
}
#thumb-rail::-webkit-scrollbar { display: none; }

.thumb-item {
  flex-shrink: 0;
  /* Ratio 32:9 del spread completo */
  width:  clamp(72px, 7.5vw, 120px);
  height: clamp(20px, 2.1vw, 34px);
  border-radius: 2px; overflow: hidden; cursor: pointer;
  border: 1px solid transparent; opacity: .35;
  transition: opacity .2s, border-color .2s;
  background: #141418;
}
.thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-item:hover  { opacity: .7; }
.thumb-item.active { opacity: 1; border-color: var(--c-gold); }

/* ═══════════════════════════════════════════════════
   MODAL DE DESCARGA
═══════════════════════════════════════════════════ */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.modal.d-none { display: none; }

.modal-veil {
  position: absolute; inset: 0;
  background: var(--c-modal-bg);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  cursor: pointer;
}
.modal-card {
  position: relative; z-index: 1;
  background: #15151c;
  border: 1px solid rgba(255, 94, 0, 0.2);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 52px);
  width: min(480px, 88vw);
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,.7);
  animation: mIn .22s ease;
}
@keyframes mIn {
  from { transform: scale(.92) translateY(14px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.modal-x {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; cursor: pointer; color: var(--c-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.modal-x:hover { background: rgba(255,255,255,.08); color: #fff; }
.modal-x svg { width: 14px; height: 14px; }

.modal-ico {
  width: 50px; height: 50px; margin: 0 auto 14px;
  background: var(--c-gold-dim); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-gold);
}
.modal-ico svg { width: 24px; height: 24px; }

.modal-h   { font-size: clamp(15px,1.8vw,20px); font-weight: 500; color:#e4e4e8; margin-bottom:5px; }
.modal-sub { font-size: 13px; color: var(--c-muted); margin-bottom: 22px; }

.modal-btns { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.dl-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px; border-radius: 8px;
  font-size: 14px; font-family: inherit;
  cursor: pointer; border: none;
  transition: opacity .2s, transform .15s;
}
.dl-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.dl-btn:hover  { opacity: .86; }
.dl-btn:active { transform: scale(.97); }
.dl-primary   { background: var(--c-gold); color: #0a0a0c; font-weight: 600; }
.dl-secondary {
  background: transparent; color: var(--c-ui);
  border: 1px solid rgba(201,169,110,.22);
}
.dl-secondary:hover { background: var(--c-gold-glow); }

.modal-note { font-size: 11px; color: var(--c-muted); line-height: 1.65; }
.modal-note code { font-family: monospace; color: rgba(110, 165, 201, 0.65); font-size: 11px; }

/* ═══════════════════════════════════════════════════
   UTILIDADES
═══════════════════════════════════════════════════ */
.d-none { display: none !important; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile First
═══════════════════════════════════════════════════ */
@media (max-width: 1400px) {
  :root { --book-max-w: 97vw; --book-max-h: 78vh; }
  .nav-btn--left  { left: -22px; }
  .nav-btn--right { right: -22px; }
}
@media (max-width: 960px) {
  :root { --book-max-w:98vw; --book-max-h:56vw; --book-min-h:260px; --spine-w:5px; }
  #app { padding: 8px 10px; gap: 7px; }
  .nav-btn--left  { left: -14px; }
  .nav-btn--right { right: -14px; }
  #thumb-rail  { display: none; }
  .spread-info { display: none; }
}
@media (max-width: 700px) {
  :root { --book-max-w:100vw; --book-max-h:none; --book-min-h:0px; --spine-w:3px; }
  html, body { overflow: auto; }
  #app {
    height: auto; min-height: 100vh;
    padding: 10px 6px 14px; gap: 10px;
    justify-content: flex-start;
    padding-top: max(14px, env(safe-area-inset-top));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .app-header { display: flex; }
  #book-scene { width:100%; height:auto; aspect-ratio:32/9; min-height:100px; max-height:none; }
  .nav-btn { width:30px; height:30px; display:flex; }
  .nav-btn svg { width:12px; height:12px; }
  .nav-btn--left  { left:2px;  z-index:200; }
  .nav-btn--right { right:2px; z-index:200; }
  .controls { flex-wrap:nowrap; gap:6px; padding:0 4px; }
  .spread-info { display:none; }
  .nav-center { gap:6px; }
  .page-num { font-size:12px; }
  .action-btns { gap:5px; }
  .icon-btn { height:34px; min-width:34px; padding:0 10px; }
  .icon-btn .btn-label { display:none; }
  .icon-btn svg { width:15px; height:15px; }
}
@media (max-width: 480px) {
  :root { --spine-w: 0px; }
  #book-scene { aspect-ratio:auto; height:auto; }
  #book { flex-direction:column; border-radius:3px; }
  .static-page { flex:0 0 auto; width:100%; aspect-ratio:16/9; }
  .static-page--left  { border-radius:3px 3px 0 0; }
  .static-page--right { border-radius:0 0 3px 3px; }
  #spine { width:100%; height:4px; flex-direction:row; background:linear-gradient(to bottom,#0e0e11,#050506,#0e0e11); }
  .spine-glint { width:100%; height:1px; background:linear-gradient(to right,transparent 0%,rgba(89,180,225,0.45) 50%,transparent 100%); align-self:center; }
  #book.cover-mode #static-left,
  #book.backcover-mode #static-right { flex:0 0 auto; width:100%; aspect-ratio:16/9; margin:0; }
  .nav-btn--left  { left:6px; }
  .nav-btn--right { right:6px; }
  .controls { gap:4px; }
  .icon-btn { height:32px; min-width:32px; padding:0 8px; }
}
@media (max-height: 440px) and (orientation: landscape) {
  :root { --book-max-h: 70vh; }
  html, body { overflow: auto; }
  #app { height:auto; min-height:100vh; padding:6px 40px; gap:5px; }
  .app-header { display:none; }
  #thumb-rail { display:none; }
  .site-footer { display:none; }
  .nav-btn--left  { left:-18px; }
  .nav-btn--right { right:-18px; }
  #book-scene { aspect-ratio:32/9; height:auto; max-height:62vh; }
}
@media (max-height: 480px) and (min-width: 701px) {
  :root { --book-max-h: 72vh; --book-min-h: 140px; }
  .app-header { display:none; }
  #thumb-rail { display:none; }
  #app { gap:4px; padding:4px 10px; }
}

/* ═══════════════════════════════════════════════════
   FULLSCREEN
═══════════════════════════════════════════════════ */
:fullscreen body,        :-webkit-full-screen body        { overflow: hidden; background: var(--c-bg); }
:fullscreen #app,        :-webkit-full-screen #app        { height: 100vh; padding: 14px 28px; }
:fullscreen #book-scene, :-webkit-full-screen #book-scene { --book-max-h: 86vh; }

/* ═══════════════════════════════════════════════════
   PORTADA / CONTRAPORTADA  —  página única centrada
   ───────────────────────────────────────────────────
   Cuando el libro muestra una sola página (spread 0
   o último spread), se oculta la mitad vacía y la
   página activa se expande al 50% del libro, centrada
   visualmente gracias a un margen auto en el libro.
═══════════════════════════════════════════════════ */

/* PORTADA: página-01 sola en IZQUIERDA — ocultar derecho y lomo */
#book.cover-mode #static-right,
#book.cover-mode #spine {
  display: none;
}
#book.cover-mode #static-left {
  border-radius: 3px;   /* esquinas completas al ser página única */
  flex: 0 0 50%;        /* ocupa exactamente la mitad del espacio */
  margin: 0 auto;       /* centrada dentro del libro */
}
#book.cover-mode {
  justify-content: center;
}

/* CONTRAPORTADA: última página sola en DERECHA — ocultar izquierdo y lomo */
#book.backcover-mode #static-left,
#book.backcover-mode #spine {
  display: none;
}
#book.backcover-mode #static-right {
  border-radius: 3px;
  flex: 0 0 50%;
  margin: 0 auto;
}
#book.backcover-mode {
  justify-content: center;
}

/* ═══════════════════════════════════════════════════
   FOOTER DE CRÉDITOS
═══════════════════════════════════════════════════ */
.site-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0 2px;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: #3a3a42;
  font-size: 11px;
  letter-spacing: .04em;
  transition: color .22s ease;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: color .22s, border-color .22s, background .22s;
}
.site-footer__link:hover {
  color: #ea5c24;                           /* verde WhatsApp */
  border-color: rgba(37,211,102,.22);
  background: rgba(37,211,102,.06);
}
.site-footer__link strong {
  color: rgba(255, 153, 0, 0.55);
  font-weight: 500;
  transition: color .22s;
}
.site-footer__link:hover strong {
  color: rgba(255, 145, 0, 0.85);
}

.site-footer__wa {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #3a3a42;
  transition: color .22s;
}
.site-footer__link:hover .site-footer__wa {
  color: #ea5c24;
}

/* Ocultar footer en pantallas muy pequeñas o bajas */
@media (max-width: 400px)  { .site-footer { display: none; } }
@media (max-height: 420px) { .site-footer { display: none; } }