/* Página de libros · retoma la identidad de la página de libros anterior: un color por libro */
.lhero{position:relative;overflow:hidden;padding:136px 0 64px;background:radial-gradient(60% 60% at 85% 20%,rgba(76,124,144,.22),transparent 62%),radial-gradient(40% 50% at 0% 100%,rgba(231,226,160,.5),transparent 60%),var(--paper)}
.lhero canvas.neural{position:absolute;inset:0;width:100%;height:100%;opacity:.45}
.lh-grid{position:relative;z-index:2;display:grid;gap:40px;align-items:center}
@media(min-width:960px){.lh-grid{grid-template-columns:1.05fr .95fr}}
.lhero h1{font-size:clamp(36px,5vw,68px)}
.lstats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 10px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
@media(min-width:620px){.lstats{grid-template-columns:repeat(4,1fr)}}
.lstats b{display:block;font-family:var(--serif);font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:-.02em}
.lstats span{display:block;margin-top:6px;font-size:12px;font-weight:700;color:var(--ink-soft);line-height:1.35}
.lstats.dk{border-color:var(--line-lt)}.lstats.dk b{color:#fff}.lstats.dk span{color:rgba(255,255,255,.7)}

/* abanico de portadas */
.fan{position:relative;aspect-ratio:1/1.02;max-width:560px;width:100%;justify-self:center}
.fc{position:absolute;width:35%;aspect-ratio:2/3;border-radius:4px 10px 10px 4px;overflow:hidden;box-shadow:-8px 22px 40px rgba(11,15,19,.4);transition:transform .6s var(--out);background:#fff;display:block}
.fc img{width:100%;height:100%;object-fit:cover}
.fc0{left:2%;top:20%;transform:rotate(-13deg);z-index:1}
.fc1{left:17%;top:11%;transform:rotate(-7deg);z-index:2}
.fc2{left:31%;top:2%;width:41%;z-index:5}
.fc3{left:50%;top:11%;transform:rotate(7deg);z-index:3}
.fc4{left:63%;top:20%;transform:rotate(13deg);z-index:2}
@media(hover:hover){.fan:hover .fc0{transform:translateX(-14px) rotate(-17deg)}.fan:hover .fc1{transform:translateX(-8px) rotate(-9deg)}.fan:hover .fc3{transform:translateX(8px) rotate(9deg)}.fan:hover .fc4{transform:translateX(14px) rotate(17deg)}.fan .fc:hover{transform:translateY(-14px) scale(1.05);z-index:9}}

/* buscador */
.chip{display:inline-flex;align-items:center;gap:8px}
.chip .ic{color:var(--teal-deep)}
.picks{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:34px 0 26px}
.picks.left{justify-content:flex-start;margin:26px 0 0}
.pickcard{max-width:840px;margin:0 auto;background:var(--card);border-radius:26px;border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(32,35,31,.45);display:grid;gap:22px;padding:26px;align-items:center;position:relative;overflow:hidden}
@media(min-width:700px){.pickcard{grid-template-columns:190px 1fr;gap:38px;padding:36px}}
.pickcard::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--pa);transition:background-color .4s}
.pc-cover img{display:block;width:min(180px,60%);margin-inline:auto;border-radius:4px 10px 10px 4px;box-shadow:-8px 18px 34px rgba(11,15,19,.4)}
@media(min-width:700px){.pc-cover img{width:100%}}
.pickcard.swap .pc-cover img,.pickcard.swap .pc-body{animation:rise .5s var(--out)}
.pc-body h3{font-size:clamp(26px,3vw,36px);margin:8px 0 10px}.pc-body p{color:var(--ink-soft);font-size:17px}
.pickcard .btn.accent{--bg:var(--pa)}

/* colección */
.colgrid{display:grid;gap:18px;margin-top:44px}
@media(min-width:620px){.colgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.colgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1260px){.colgrid{grid-template-columns:repeat(5,1fr)}}
.ccol{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px 18px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 10px 24px rgba(32,35,31,.06);transition:transform .35s var(--out),box-shadow .35s;overflow:hidden}
.ccol::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--a)}
.ccol .cv{display:block;width:62%;margin-bottom:18px}
.ccol .cv img{border-radius:3px 8px 8px 3px;box-shadow:-6px 14px 26px rgba(11,15,19,.35);transition:transform .5s var(--out)}
@media(hover:hover){.ccol:hover{transform:translateY(-8px);box-shadow:0 34px 50px -30px rgba(32,35,31,.5)}.ccol:hover .cv img{transform:rotate(-3deg) scale(1.05)}}
.ccol h3{font-size:19px;line-height:1.15}
.ccol p{font-size:14px;color:var(--ink-soft);margin:8px 0 12px;flex:1}
.ccol .row{margin-top:14px;justify-content:center}
.rate{display:flex;align-items:center;gap:8px;font-size:14px}
.ccol .rate{justify-content:center}
.stars{color:#E8A317;letter-spacing:2px}
.rate small{color:var(--ink-soft)}
.price{font-size:14px;color:var(--ink-soft)}
.price b{font-family:var(--serif);font-size:24px;color:var(--ink)}
.newb{position:absolute;top:14px;left:14px;background:var(--mark);font-size:10.5px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;padding:5px 10px;border-radius:999px;z-index:2}

/* un libro, un color */
.bk{position:relative;padding:92px 0;background:var(--soft);overflow:hidden}
.bk-grid{display:grid;gap:48px;align-items:center}
@media(min-width:960px){.bk-grid{grid-template-columns:.8fr 1.2fr;gap:84px}.bk.flip .bk-grid{grid-template-columns:1.2fr .8fr}.bk.flip .bk-cover{order:2}}
.bk-cover{position:relative;justify-self:center;width:min(76%,380px)}
.bk-cover img{position:relative;z-index:2;display:block;width:100%;border-radius:5px 12px 12px 5px;box-shadow:-14px 30px 60px rgba(11,15,19,.45);transform:rotate(-2deg);transition:transform .6s var(--out)}
.bk.flip .bk-cover img{transform:rotate(2deg)}
@media(hover:hover){.bk-cover:hover img{transform:rotate(0) translateY(-8px)}}
.bk-cover .halo{position:absolute;inset:-12% -16%;border-radius:50%;background:radial-gradient(circle,var(--a) 0%,transparent 66%);opacity:.3;filter:blur(10px)}
.bignum{position:absolute;right:-10%;top:-10%;font-family:var(--serif);font-weight:700;font-size:clamp(120px,16vw,220px);line-height:.8;color:transparent;-webkit-text-stroke:2px var(--a);opacity:.4;z-index:1}
.kchips{display:flex;flex-wrap:wrap;gap:8px}
.kchips span{font-size:11px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:#fff;color:var(--ad);border:1px solid var(--a)}
.bk .sub{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2vw,24px);color:var(--ink-soft);margin-top:10px}
.bk .rate{margin-top:14px}
.hookq{font-family:var(--serif);font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1.25;margin:22px 0 10px;color:var(--ink)}
.bk .muted{font-size:17px}
.lists{display:grid;gap:16px;margin-top:24px}
@media(min-width:700px){.lists{grid-template-columns:1fr 1fr}}
.lists>div{background:#fff;border-radius:18px;padding:20px 22px;border-top:4px solid var(--a);box-shadow:0 14px 30px -22px rgba(11,15,19,.4)}
.lists h4{font-family:var(--sans);font-size:11.5px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--ad);margin-bottom:10px}
.lists li{position:relative;padding-left:20px;margin:7px 0;font-size:15.5px}
.lists li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--a)}
.meta2{font-size:13px;color:var(--ink-soft);margin-top:16px}
.buyrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:22px}
.buyrow .price small{display:block;font-size:11px;margin-top:2px}
.bk .btn.accent{--bg:var(--ad)}
.bk .btn.ghost{border-color:var(--ad);--fg:var(--ad)}
.bk .btn.ghost:hover{background:var(--ad);color:#fff}

/* reseñas */
.ratebig{display:flex;align-items:center;gap:14px}
.ratebig b{font-family:var(--serif);font-size:64px;line-height:1;color:var(--teal-deep)}
.ratebig small{display:block;color:var(--ink-soft);font-size:13px}
.rvwall{columns:1;column-gap:16px;margin-top:30px}
@media(min-width:700px){.rvwall{columns:2}}
@media(min-width:1060px){.rvwall{columns:3}}
.rvc{break-inside:avoid;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--a,var(--teal));border-radius:18px;padding:20px 22px;margin:0 0 16px;animation:rise .5s var(--out)}
.rvc p{font-size:15.5px;margin:10px 0 14px}
.rvc .by{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13px;color:var(--ink-soft);flex-wrap:wrap}
.rvc .bk-tag{font-weight:900;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ad,var(--teal-deep))}
.rvc .ver{color:var(--teal-deep);font-weight:700}

/* ventana de compra */
dialog.buy{border:0;border-radius:26px;padding:0;width:min(780px,94vw);background:var(--card);color:var(--ink);margin:auto;overflow:hidden;box-shadow:0 60px 120px -30px rgba(0,0,0,.6)}
dialog.buy::backdrop{background:rgba(10,29,38,.7);backdrop-filter:blur(6px)}
dialog.buy[open]{animation:pop .35s var(--out)}
.buy-in{display:grid;max-height:90vh;overflow:auto}
@media(min-width:700px){.buy-in{grid-template-columns:230px 1fr}}
.buy-cv{background:var(--night);padding:28px;display:grid;place-items:center}
.buy-cv img{width:min(170px,60%);border-radius:4px 9px 9px 4px;box-shadow:-8px 16px 30px rgba(0,0,0,.5)}
@media(min-width:700px){.buy-cv img{width:100%}}
.buy-body{padding:30px 28px 32px}
.buy-body h3{font-size:26px;margin:8px 0 16px}
.seg{display:inline-flex;background:var(--paper-2);border-radius:999px;padding:4px;margin-bottom:16px}
.seg button{padding:10px 18px;border-radius:999px;font-weight:900;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);transition:background-color .2s,color .2s}
.seg button[aria-selected="true"]{background:var(--ink);color:#fff}
.stores{display:grid;gap:8px}
.store{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;border:1.5px solid var(--line);font-weight:700;transition:border-color .2s,transform .18s var(--out)}
.store:active{transform:scale(.985)}
.store.main{background:var(--ink);color:#fff;border-color:var(--ink)}
.store em{display:block;font-style:normal;font-size:12.5px;font-weight:400;opacity:.75;margin-top:2px}
.store i{font-style:normal;font-size:12px;font-weight:900;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
@media(hover:hover){.store:hover{border-color:var(--ink)}}
.stores .grp{font-size:12px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft);margin:10px 0 2px}
.stores .pills{display:flex;flex-wrap:wrap;gap:8px}
.stores .pills a{font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:999px;background:var(--paper-2);transition:background-color .2s,color .2s}
.stores .pills a:hover{background:var(--ink);color:#fff}