/* ===================================================================
   BIBLIOTECA — proyectos editoriales
   Página aparte del portafolio principal: paleta y tipografía propias,
   pensada como "otro cuarto" del mismo estudio — de noche, con una
   sola lámpara prendida sobre el libro que estás mirando en cada
   momento. No comparte tokens con styles.css a propósito.

   Elemento "firma" de esta página: la lámpara fija en el centro de
   la pantalla (.lib-lamp) — los libros pasan bajo su luz al deslizar
   el estante, en vez de que la luz los persiga a ellos.
=================================================================== */

:root{
  --lib-bg: #12160B;          /* verde-negro — hermano oscuro de --pal-verde-oscuro del sitio principal */
  --lib-wood: #2A1D14;        /* la tabla del estante */
  --lib-paper: #E8E2CF;
  --lib-text: #EDE8D8;
  --lib-text-dim: #8E8B76;
  --lib-lamp: #E8B65A;        /* acento — luz cálida de lámpara */
  --lib-lamp-bright: #F2C877;
  --lib-lamp-soft: rgba(232,182,90,0.16);

  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --book-w: clamp(150px, 17vw, 230px);
  --book-h: clamp(220px, 25vw, 320px);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body.lib-body{
  margin: 0;
  background: var(--lib-bg);
  color: var(--lib-text);
  font-family: var(--body);
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }

/* ---- la luz que se prende al llegar (arranca todo negro y "titila"
   dos veces antes de quedar prendida, como un tubo fluorescente
   viejo) ---- */
.lib-light-mask{
  position: fixed; inset: 0;
  background: #000;
  z-index: 500;
  animation: libFlicker 1.1s steps(1, end) forwards;
}
@keyframes libFlicker{
  0%, 9%    { opacity: 1; }
  11%       { opacity: 0.25; }
  13%, 19%  { opacity: 1; }
  21%       { opacity: 0.15; }
  24%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .lib-light-mask{ animation: none; opacity: 0; }
}

.lib-back{
  position: fixed; top: 1.5rem; left: 1.75rem; z-index: 300;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.03em;
  color: var(--lib-text-dim);
  transition: color .2s ease;
}
.lib-back:hover, .lib-back:focus-visible{ color: var(--lib-lamp); }

.lib-header{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 5rem 1.5rem 0.3rem; /* Reducido para mobile */
  flex-shrink: 0; /* No se encoge */
}
.lib-heading{
  font-family: var(--mono); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  margin: 0 0 0.35rem;
  color: var(--lib-paper);
}
.lib-hint{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--lib-text-dim);
  margin: 0;
}

/* la lámpara: un resplandor fijo en el centro de la pantalla — no
   sigue al mouse ni a los libros, son los libros los que "entran" y
   "salen" de su luz al pasar por el centro del estante */
.lib-lamp{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, var(--lib-lamp-soft) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.lib-shelf-wrap{
  position: relative;
  z-index: 2;
  flex: 1; /* Ocupa el espacio disponible */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow: visible; /* Permite que el contenido se vea */
}

.lib-shelf{
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x pinch-zoom;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* el padding lateral (mitad de un libro) es lo que permite que el
     primer y el último libro también puedan llegar a quedar centrados.
     El padding vertical generoso evita que el libro centrado (que se
     agranda ~30%) quede recortado: overflow-x:auto obliga a que
     overflow-y también se calcule como "auto" internamente, así que
     necesita ese margen de sobra para no cortar nada. */
  padding: 4rem calc(50% - var(--book-w) / 2) 4rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.lib-shelf.is-dragging{ cursor: grabbing; scroll-behavior: auto; }
.lib-shelf::-webkit-scrollbar{ display: none; }

/* ---- ANIMACIÓN DE ENTRADA PARA LOS LIBROS ---- */
.lib-book{
  flex: 0 0 auto;
  width: var(--book-w);
  height: var(--book-h);
  scroll-snap-align: center;
  background: none; border: none; padding: 0; cursor: default;
  position: relative;
  z-index: 1;
  opacity: 0;
  pointer-events: auto;
  transform: translateX(-100vw) scale(0.86);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.4s ease;
  will-change: transform, filter, opacity;
}
.lib-book--square{
  width: calc(var(--book-w) * 1.08);
  height: calc(var(--book-h) * 1.08);
}
.lib-book.is-visible{
  opacity: 1;
  transform: translateX(0) scale(0.86);
}
.lib-book:hover{
  transform: translateX(0) scale(0.94);
}
.lib-book.is-focused{
  cursor: pointer;
  transform: translateX(0) scale(1.30);
  z-index: 50;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.4s ease;
}
.lib-book.is-focused:hover{
  transform: translateX(0) scale(1.40);
}
.lib-book img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.55));
}
.lib-book-fallback{
  display: none; /* JS lo muestra solo si la imagen no carga */
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  text-align: center; padding: 0.6rem;
  font-family: var(--mono); font-size: 0.68rem; color: var(--lib-text-dim);
  border: 1px dashed var(--lib-text-dim);
}

/* ---- panel de metadatos del libro activo ---- */
.lib-meta{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0.3rem 1.5rem 1.5rem; /* Reducido para mobile */
  flex-shrink: 0; /* No se encoge */
}

.lib-meta.is-visible{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.lib-meta-title{
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--lib-paper);
  margin: 0 0 0.5rem;
}
.lib-meta-type{
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--lib-text-dim);
  margin: 0 0 0.45rem;
}
.lib-meta-row{
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0.65rem;
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--lib-text-dim);
  margin-bottom: 1.1rem;
}
.lib-meta-row span:first-child{ max-width: 55vw; }
.lib-meta-row span:not(:first-child){
  border-left: 1px solid var(--lib-text-dim);
  padding-left: 0.65rem;
}
.lib-meta-hint{
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.03em;
  color: var(--lib-text-dim);
  margin: 0;
}

/* ---- lightbox: flipbook embebido (Heyzine) o imagen completa ---- */
.lib-lightbox{
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.96);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  padding: 1.25rem;
}
.lib-lightbox.is-open{ opacity: 1; pointer-events: all; }
.lib-lightbox-content{
  max-width: min(92vw, 980px);
  max-height: 85vh;
  width: 100%;
  overflow: hidden;
  background: #243105;
  border-radius: 8px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.55);
  position: relative;
}
.lib-window{
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.4rem;
  max-height: calc(85vh - 2.8rem);
  overflow-y: auto;
}
.lib-window-header{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 1.25rem;
  align-items: stretch;  /* Both columns fill height */
}
.lib-window-header-main{ 
  display: flex;
  flex-direction: column; /* The description stays at top naturally */
 }
.lib-window-eyebrow{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 182, 90, 0.85);
  margin: 0 0 0.45rem;
}
.lib-window-title{
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.8vw, 1.95rem);
  margin: 0 0 0.65rem;
  color: var(--lib-paper);
}
.lib-window-lead{
  font-family: var(--body);
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(237, 232, 216, 0.95);
  margin: 0;
  max-width: 100%;
}
.lib-window-actions{
  margin-top: 0.75rem;
}
.lib-window-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(237,232,216,0.35);
  border-radius: 999px;
  background: rgba(237,232,216,0.08);
  color: rgba(237,232,216,0.95);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lib-window-btn:hover,
.lib-window-btn:focus-visible{
  background: rgba(237,232,216,0.16);
  border-color: rgba(237,232,216,0.55);
}
.lib-window-meta{
  display: grid;
  gap: 0.4rem;
  align-content: center;
  margin-top: 0;

}
.lib-window-meta-row{
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 0.45rem;
  align-items: top;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: rgba(237,232,216,0.82);
}
.meta-label{ font-weight: 600; letter-spacing: 0.04em; color: rgba(237,232,216,0.95); }
.meta-value{ color: rgba(237,232,216,0.95); }
.lib-window-body{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}
.lib-window-summary{
  font-family: var(--body);
  font-size: 0.82rem;
  line-height: 1.75;
  color: rgba(237,232,216,0.95);
}
.lib-window-visual{
  min-height: 62vh;
}
.lib-window-visual iframe,
.lib-window-visual img{
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  object-fit: contain;
}
.lib-window-gallery{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.lib-photo-block{
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.lib-photo-block img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}
.lib-img-caption{
  margin: 0;
  font-family: var(--body);
  font-size: 0.78rem;
  color: rgba(237,232,216,0.9);
  text-align: left;
}
@media (max-width: 900px){
  .lib-window{
    padding: 1.5rem;
  }
  .lib-window-header{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .lib-window-body{
    grid-template-columns: 1fr;
  }
  .lib-window-visual{
    min-height: 48vh;
  }
}
.lib-lightbox-close{
  position: absolute; top: 1.5rem; right: 1.75rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--lib-text-dim);
  background: transparent;
  color: var(--lib-text);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.lib-lightbox-close:hover, .lib-lightbox-close:focus-visible{
  border-color: var(--lib-lamp); color: var(--lib-lamp);
}

/* ============ CURSOR PERSONALIZADO — mismo mecanismo que el sitio
   principal (ver script.js / styles.css allá), reimplementado acá
   porque esta página no carga script.js. Punto sólido + anillo
   punteado color lámpara, para que se lea bien sobre el fondo oscuro. */
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  display: none;
  color: var(--lib-lamp);
}
.cursor-dot{
  width: 8px; height: 8px;
  background: currentColor;
}
.cursor-ring{
  width: 36px; height: 36px;
  border: 1.5px dashed currentColor;
  opacity: 0;
  transition: opacity .18s ease, width .18s ease, height .18s ease;
}
.cursor-ring.is-active{ opacity: 1; }

html.has-custom-cursor{ cursor: none; }
html.has-custom-cursor *{ cursor: none !important; }
html.has-custom-cursor .cursor-dot,
html.has-custom-cursor .cursor-ring{ display:block; }
html.has-custom-cursor.cursor-hidden .cursor-dot,
html.has-custom-cursor.cursor-hidden .cursor-ring{ opacity: 0 !important; }

@media (prefers-reduced-motion: reduce){
  html.has-custom-cursor, html.has-custom-cursor *{ cursor: auto !important; }
  .cursor-dot, .cursor-ring{ display: none !important; }
}

@media (prefers-reduced-motion: reduce){
  .lib-book{ transition: none; }
}

/* ===== SOLO MOBILE (≤1024px) ===== */
@media (max-width: 1024px){
  /* Ahora sí, todo lo que pongas aquí es SEGURO para desktop */
  body.lib-body{
    overflow: hidden; /* ← Solo en mobile */
  }
  
  .lib-shelf-wrap{
    overflow: hidden; /* ← Solo en mobile */
  }
  
  .lib-header{ 
    padding: 4rem 1.5rem 0.3rem;
  }
  
  .lib-heading{
    font-size: 0.7rem;
  }
  
  .lib-hint{
    font-size: 0.6rem;
    /* display: none; */
  }
  
  .lib-back{ 
    top: 0.8rem; 
    left: 0.8rem; 
    font-size: 0.6rem; 
  }
  
  .lib-shelf{
    padding: 1rem calc(50% - var(--book-w) / 2) 6rem;
  }
  
  .lib-meta{
    padding: 0 1.5rem 7rem;
  }
  
  .lib-meta-title{
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
  }
  
  .lib-meta-type{
    font-size: 0.65rem;
    margin-bottom: 0.15rem;
  }
  
  .lib-meta-row{
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.65rem;
  }
  
  .lib-meta-row span:not(:first-child){
    border-left: none;
    padding-left: 0;
  }
}

/* ============ SELECTOR DE IDIOMA ============ */
.lang-switcher--library{
  position: fixed;
  left: 1.4rem;
  bottom: 1.25rem;
  z-index: 450;
  display: flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid rgba(232, 226, 207, 0.2);
  border-radius: 999px;
  background: rgba(18, 22, 11, 0.9);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
}

.lang-switcher--library .lang-btn{
  min-width: 32px;
  padding: 0.3rem 0.6rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--lib-text-dim);
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.lang-switcher--library .lang-btn:hover,
.lang-switcher--library .lang-btn:focus-visible{
  color: var(--lib-paper);
}

.lang-switcher--library .lang-btn.is-active{
  background: var(--lib-lamp);
  color: var(--lib-bg);
}

.lang-switcher--library .lang-btn:disabled{
  cursor: not-allowed;
  opacity: 0.45;
}

@media (max-width: 760px){
  .lang-switcher--library{
    left: 0.8rem;
    bottom: 0.8rem;
  }

  .lang-switcher--library .lang-btn{
    min-width: 28px;
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
  }
}