/* ============================================================
   LA BIBLIOTECA SPICY — librería de portadas
   Cabecera + coverflow del top + divisor + rejilla filtrable + ficha.
   Todo en Poppins (nada de mono en esta página).
   Hereda tokens de style.css.
   ============================================================ */

.pag-libros{overflow-x:hidden}
/* En esta página TODO es Poppins (petición explícita): nada de mono */
.pag-libros .mono,.pag-libros .topnav sup{font-family:var(--font-d);font-weight:500}
.pag-libros .ep-eyebrow{
  font-family:var(--font-d);font-weight:600;font-size:.84rem;
  letter-spacing:.2em;color:var(--accent-text);
}
.lib{position:relative;padding:3rem 0 3rem}

/* ============ CABECERA ============ */
.lib-head{position:relative;text-align:center;max-width:56rem;margin:0 auto;padding:0 6vw}
.lib-head .ep-eyebrow{color:var(--accent-text)}
.lib-title{
  margin-top:.5rem;
  font-weight:300;font-size:clamp(2rem,4.4vw,3.4rem);
  letter-spacing:.03em;line-height:1;text-transform:uppercase;
}
.lib-title .accent{font-weight:700}
.lib-sub{margin-top:1.1rem;color:var(--muted);font-size:1.04rem;font-weight:400;line-height:1.65}
.lib-sub b{color:var(--ink);font-weight:600}

/* filtros por categoría: viven junto a la rejilla que filtran */
.lib-filtros{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.15rem}
.lf{
  display:inline-flex;align-items:baseline;gap:.4rem;
  font-size:.88rem;font-weight:500;color:var(--muted);
  padding:.6rem 1.15rem;border-radius:999px;
  background:rgba(255,255,255,.045);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.09);
  transition:color .22s,border-color .22s,background .22s,transform .22s;
}
.lf sup{font-weight:600;font-size:.68rem;color:rgba(255,255,255,.38);transition:color .22s}
.lf:hover{color:var(--ink);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.lf.is-on{
  border-color:rgba(255,95,0,.85);color:#fff;
  background:linear-gradient(180deg,rgba(255,95,0,.2),rgba(255,95,0,.08));
  box-shadow:0 10px 26px -12px rgba(255,95,0,.55);
}
.lf.is-on sup{color:var(--accent-text)}

/* ============ ESTANTERÍA (los que más vuelven) ============ */
.shelf-wrap{position:relative;margin-top:3.2rem}
/* la sección del top no lleva título: el puesto lo canta la ficha de debajo */
.shelf-head{
  display:flex;align-items:center;justify-content:flex-end;
  max-width:86rem;margin:0 auto;padding:0 6vw;
}
.grid-title{
  font-weight:700;font-size:clamp(1.3rem,2.4vw,1.8rem);
  letter-spacing:-.02em;text-transform:uppercase;
}
.shelf-nav{display:flex;gap:.6rem}

/* coverflow de libros: el nº1 centrado, los laterales menguan y se difuminan
   (misma sensación que la galería del archivo) */
.bshelf{
  position:relative;height:clamp(300px,32vw,425px);
  margin-top:1rem;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
/* pan-y: el gesto de lado lo lleva el script (pasa de pieza), el de arriba
   abajo lo sigue llevando el navegador. Sin esto, el navegador daba el
   gesto por scroll al primer pixel, cancelaba el puntero y arrastrar el
   carrusel con el dedo no hacia absolutamente nada. */
.bs-stage{position:absolute;inset:0;touch-action:pan-y}
.bsb{
  position:absolute;left:50%;top:50%;
  cursor:pointer;will-change:transform,filter;
}
.bsb .bk-cover{filter:drop-shadow(0 26px 38px rgba(0,0,0,.55));transition:none}
.bsb.is-front .bk-cover{filter:drop-shadow(0 34px 52px rgba(0,0,0,.62))}
.bs-info{
  text-align:center;margin-top:.4rem;padding:0 6vw;
  min-height:5.2rem;
}
.bs-info .bs-rank{
  font-weight:600;font-size:.8rem;letter-spacing:.22em;
  color:var(--accent-text);text-transform:uppercase;
}
.bs-info .bs-title{
  margin-top:.35rem;font-weight:600;font-size:clamp(1.05rem,2vw,1.35rem);
  line-height:1.3;
}
.bs-info .bs-autor{margin-top:.15rem;font-size:.85rem;font-weight:400;color:var(--muted)}

/* libro (rejilla y relacionados) */
.bk{
  position:relative;flex:none;
  width:clamp(160px,16vw,215px);
  cursor:pointer;
}
/* las portadas vienen renderizadas con el mockup (traen volumen y sombra propia) */
.bk-cover{
  position:relative;width:100%;aspect-ratio:600/851;
  transition:transform .42s cubic-bezier(.3,.9,.3,1),filter .35s;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.55));
}
.bk:hover .bk-cover,.bk:focus-visible .bk-cover{
  transform:translateY(-12px) rotate(1.2deg) scale(1.045);
  filter:drop-shadow(0 36px 48px rgba(0,0,0,.62)) drop-shadow(0 18px 60px rgba(255,95,0,.22));
}
.bk-cover img{width:100%;height:100%;object-fit:contain;display:block}
/* portada tipográfica cuando no tenemos imagen del libro */
.bk-typo{
  position:absolute;left:6%;right:6%;top:2%;bottom:4%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:1.1rem 1rem 1.1rem 1.3rem;border-radius:2px 5px 5px 2px;
  background:linear-gradient(150deg,#232b38,#141922);
  box-shadow:inset -8px 0 12px -8px rgba(0,0,0,.8), 0 10px 22px rgba(0,0,0,.5);
}
.bk-typo::before{ /* lomo */
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;border-radius:2px 0 0 2px;
  background:linear-gradient(90deg,rgba(255,95,0,.85),rgba(140,50,0,.9));
}
.bk-typo b{font-size:.95rem;font-weight:700;line-height:1.25;color:#fff}
.bk-typo span{font-size:.68rem;color:var(--muted)}
.bk-typo i{
  position:absolute;left:1.3rem;top:50%;transform:translateY(-50%);
  width:34px;height:2px;background:var(--accent);
}
.bk-meta{margin-top:.95rem;text-align:left}
.bk-meta b{
  font-size:.88rem;font-weight:600;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .25s;
}
.bk:hover .bk-meta b{color:var(--accent-text)}
.bk-meta span{
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.73rem;font-weight:400;color:var(--muted);margin-top:.18rem;
}
.bk-ep{
  display:flex;align-items:center;gap:.45rem;margin-top:.45rem;font-style:normal;
  font-weight:600;font-size:.72rem;letter-spacing:.08em;
  color:rgba(255,255,255,.38);transition:color .25s;
}
.bk-ep::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);opacity:.55;transition:opacity .25s;
}
.bk:hover .bk-ep{color:var(--accent-text)}
.bk:hover .bk-ep::before{opacity:1}

/* ============ REJILLA ============ */
.grid-wrap{padding:3.6rem 6vw 2rem;max-width:86rem;margin:0 auto}
/* separador entre el top y el catálogo completo */
.lib-divider{
  height:1px;margin-bottom:3.2rem;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24) 14%,rgba(255,255,255,.24) 86%,transparent);
}
.grid-bar{margin-bottom:2.2rem}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:2.6rem 2rem}
.book-grid .bk{width:100%}

/* ============ FICHA DEL LIBRO ============ */
.bv{position:fixed;inset:0;z-index:70;display:none}
.bv.is-open{display:block}
.bv-scrim{position:absolute;inset:0;background:rgba(6,8,11,.8);backdrop-filter:blur(20px)}
.bv-inner{position:absolute;inset:0;overflow-y:auto;padding:5.6rem 4vw 4rem}
.bv-card{
  max-width:1000px;margin:0 auto;
  display:grid;grid-template-columns:300px 1fr;gap:3rem;
}
.bv-left{position:sticky;top:0;align-self:start}
.bv-cover{
  width:100%;aspect-ratio:600/851;position:relative;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.75));
}
.bv-cover img{width:100%;height:100%;object-fit:contain;display:block}
.bv-typo{
  position:absolute;left:7%;right:7%;top:3%;bottom:5%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:1.4rem 1.2rem 1.4rem 1.7rem;border-radius:3px 8px 8px 3px;
  background:linear-gradient(150deg,#232b38,#141922);
  box-shadow:inset -10px 0 16px -10px rgba(0,0,0,.8), 0 14px 30px rgba(0,0,0,.5);
}
.bv-typo::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:9px;
  background:var(--accent);border-radius:3px 0 0 3px;
}
.bv-typo b{
  font-weight:800;font-size:1.35rem;
  line-height:1.2;text-transform:uppercase;color:#fff;letter-spacing:.01em;
}
.bv-typo span{font-size:.8rem;color:var(--muted)}
.bv-buy{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin-top:1.2rem;width:100%;
  background:var(--accent);color:#fff;font-weight:700;font-size:.95rem;
  padding:1rem 1.2rem;border-radius:14px;
  box-shadow:0 14px 34px -12px rgba(255,95,0,.7);
  transition:transform .2s;
}
.bv-buy:hover{transform:translateY(-2px);color:#fff}
.bv-aff{margin-top:.65rem;font-size:.74rem;color:rgba(255,255,255,.35);text-align:center}
.bv-cat{
  display:inline-block;font-weight:600;font-size:.76rem;letter-spacing:.16em;
  color:var(--accent-text);text-transform:uppercase;margin-bottom:.8rem;
}
.bv-title{font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.14;letter-spacing:-.02em}
.bv-autor{margin-top:.5rem;color:var(--muted);font-size:1rem}
.bv-autor b{color:var(--ink);font-weight:600}
.bv-idea{
  margin:1.8rem 0;padding:1.2rem 1.4rem;
  border-left:3px solid var(--accent);border-radius:0 12px 12px 0;
  background:linear-gradient(90deg,rgba(255,95,0,.1),transparent);
  font-size:1.12rem;font-weight:600;line-height:1.45;
}
.bv-block{border-top:1px solid rgba(255,255,255,.07);padding:1.7rem 0}
.bv-block h3{font-weight:700;font-size:1.05rem;margin-bottom:.9rem}
.bv-block p{color:#c3c9d4;line-height:1.75;font-weight:400}
.bv-quote{
  font-size:1.06rem;line-height:1.6;color:var(--ink);font-weight:500;
  padding-left:2.2rem;position:relative;
}
.bv-quote::before{
  content:"«";position:absolute;left:0;top:-.5rem;
  font-size:2.6rem;font-weight:700;color:rgba(255,95,0,.35);
}
.bv-quote b{
  display:block;margin-top:.8rem;font-weight:500;
  font-size:.78rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;
}
/* «Lo que nos llevamos»: cada idea es un enlace al minuto donde se dice o se
   parafrasea. El numero ordena la lectura; el pie dice quien y cuando. */
.bv-lecs{display:flex;flex-direction:column;gap:.6rem}
.bv-lec{
  display:grid;grid-template-columns:auto 1fr;column-gap:1rem;row-gap:.5rem;
  padding:1.05rem 1.3rem 1.05rem;border-radius:11px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s,background .2s;
}
.bv-lec:hover{
  border-color:rgba(255,122,46,.45);
  background:linear-gradient(180deg,rgba(255,122,46,.085),rgba(255,255,255,.03));
}
.bv-lec-n{
  font-weight:700;font-size:.82rem;letter-spacing:.06em;line-height:1.72;
  color:var(--accent-text);font-variant-numeric:tabular-nums;
}
.bv-lec-txt{font-size:1rem;line-height:1.7;color:#ced4de;font-weight:400}
.bv-lec-pie{
  grid-column:2;font-weight:600;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.42);
}
.bv-lec-pie i{font-style:normal;margin-left:.2rem}
.bv-lec:hover .bv-lec-pie{color:var(--accent-text)}

.bv-eps{display:flex;flex-direction:column;gap:.5rem}
.bv-ep{
  display:block;
  padding:1rem 1.25rem 1.1rem;border-radius:14px;text-align:left;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  transition:all .2s;
}
.bv-ep:hover{border-color:rgba(255,122,46,.45);background:rgba(255,255,255,.06)}
.bv-ep-top{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}
.bv-ep-n{font-weight:700;font-size:.82rem;letter-spacing:.1em;color:var(--accent-text);white-space:nowrap}
.bv-ep-ctx{display:block;font-size:.98rem;font-weight:400;color:#b6bdc9;line-height:1.65}
.bv-ep-t{margin-left:auto;font-weight:600;font-size:.8rem;letter-spacing:.06em;color:rgba(255,255,255,.45);white-space:nowrap}
.bv-ep:hover .bv-ep-t{color:var(--accent-text)}
.bv-ep-badge{
  font-weight:600;font-size:.66rem;letter-spacing:.12em;
  border:1px solid rgba(255,122,46,.5);color:var(--accent-text);
  border-radius:999px;padding:.24rem .6rem;
}
.bv-rel{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.bv-rel .bk{width:100%}
.bv-rel .bk-meta b{font-size:.78rem}

/* ============ MÓVIL ============ */
@media (max-width:900px){
  /* en movil el numero estorba mas que ordena: el texto ocupa todo el ancho */
  .bv-lec{grid-template-columns:1fr;padding:.95rem 1.05rem;row-gap:.4rem}
  .bv-lec-n{line-height:1.2}
  .bv-lec-pie{grid-column:1}
  .lib{padding-top:2rem}
  .lib-title{font-size:clamp(1.75rem,7vw,2.4rem)}
  /* filtros en una sola línea deslizable: la barra no se come media pantalla */
  .lib-filtros{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    gap:.45rem;margin:1rem -6vw 0;padding:.15rem 6vw .3rem;
    mask-image:linear-gradient(90deg,#000 88%,transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .lib-filtros::-webkit-scrollbar{display:none}
  .lf{padding:.5rem .9rem;font-size:.82rem;flex:none}
  .lib-divider{margin-bottom:2.4rem}
  .grid-bar{margin-bottom:1.6rem}

  .shelf-wrap{margin-top:2.4rem}
  .bk{width:clamp(138px,38vw,175px)}

  .grid-wrap{padding-top:3rem}
  .book-grid{grid-template-columns:repeat(2,1fr);gap:2rem 1.4rem}

  .bv-card{grid-template-columns:1fr;gap:2rem}
  /* en una columna la portada/foto no se queda fija: el resto de la ficha
     pasaba por encima de ella y se veía a través de las tarjetas */
  .bv-left{position:static}
  .bv-left{position:relative;max-width:230px;margin:0 auto}
  .bv-rel{grid-template-columns:repeat(2,1fr)}
  .bv-inner{padding:4.6rem 5vw 3rem}
}