/* ============================================================
   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);
}
.bs-stage{position:absolute;inset:0}
.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;
}
.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){
  .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}
  .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}
}