/* book-extra.css · 2026-10-17 · pop-up, Look inside, explicación del libro y BANG del hero (WebDev) */
html[lang="en"] .l-es{display:none!important}html:not([lang="en"]) .l-en{display:none!important}
.bk-noscroll{overflow:hidden}
.bk-unlocked .bkpop .lock{display:none}
/* ---------- BANG (hero) ---------- */
.stack{margin-top:48px}.stack .bang{position:absolute;top:-92px;right:0;z-index:6;text-decoration:none;color:#111;display:block}
.bang-in{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;padding:12px 30px 12px 24px;transform:rotate(-4deg);animation:bangPulse 2.8s ease-in-out infinite;transition:transform .2s}
.bang-in::before,.bang-in::after{content:"";position:absolute;inset:-12px -22px;clip-path:polygon(50.0% 0.0%,55.1% 11.3%,62.9% 1.7%,64.9% 14.0%,75.0% 6.7%,73.7% 19.1%,85.4% 14.6%,80.9% 26.3%,93.3% 25.0%,86.0% 35.1%,98.3% 37.1%,88.7% 44.9%,100.0% 50.0%,88.7% 55.1%,98.3% 62.9%,86.0% 64.9%,93.3% 75.0%,80.9% 73.7%,85.4% 85.4%,73.7% 80.9%,75.0% 93.3%,64.9% 86.0%,62.9% 98.3%,55.1% 88.7%,50.0% 100.0%,44.9% 88.7%,37.1% 98.3%,35.1% 86.0%,25.0% 93.3%,26.3% 80.9%,14.6% 85.4%,19.1% 73.7%,6.7% 75.0%,14.0% 64.9%,1.7% 62.9%,11.3% 55.1%,0.0% 50.0%,11.3% 44.9%,1.7% 37.1%,14.0% 35.1%,6.7% 25.0%,19.1% 26.3%,14.6% 14.6%,26.3% 19.1%,25.0% 6.7%,35.1% 14.0%,37.1% 1.7%,44.9% 11.3%)}
.bang-in::before{background:#FFD400;z-index:-1}
.bang-in::after{background:#111;z-index:-2;transform:translate(5px,6px)}
.stack .bang img{position:static;width:34px;height:51px;border-radius:2px;box-shadow:0 3px 8px rgba(0,0,0,.35);transform:rotate(6deg);flex:none}
.bang-t{display:flex;flex-direction:column;line-height:1.1;font-family:Outfit,system-ui,sans-serif}
.bang-pow{font:800 13px/1 Outfit,system-ui,sans-serif;letter-spacing:.08em;color:#fff;background:#e5261f;align-self:flex-start;padding:3px 7px 2px;border-radius:3px;transform:rotate(-2deg);margin-bottom:4px}
.bang-txt{font-weight:600;font-size:15px;white-space:nowrap}
.bang-txt b{font-weight:800}
.bang:hover .bang-in,.bang:focus-visible .bang-in{animation:none;transform:rotate(-2deg) scale(1.06)}
.bang:focus-visible{outline:3px solid var(--blue,#3b82f6);outline-offset:14px;border-radius:12px}
@keyframes bangPulse{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(-2.5deg) scale(1.045)}}
@media(max-width:820px){.stack{margin-top:118px}.stack .bang{top:-104px;right:auto;left:50%;transform:translateX(-50%);width:min(330px,84vw)}.bang-in::before,.bang-in::after{inset:-12px -12px}.bang-in{padding:14px 26px 14px 22px}.bang-txt{font-size:15px;white-space:normal}}
@media(max-width:380px){.bang-txt{font-size:13.5px}}
/* ---------- Look inside ---------- */
#libro .lk{margin-top:44px;padding:26px;background:#fff;border:1px solid #e6e1da;border-radius:18px}
#libro .lk h3,#libro .bx h3{font:600 24px Fraunces,serif;margin:.25em 0 .3em}
#libro .lk p{margin:0 0 16px;color:#3a3633;line-height:1.5}
.lk-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 14px;-webkit-overflow-scrolling:touch}
.lk-th{flex:none;scroll-snap-align:start;border:0;background:none;padding:0;cursor:zoom-in;text-align:center;font:500 12px Outfit;color:var(--mut)}
.lk-th img{display:block;width:120px;height:180px;object-fit:cover;border-radius:3px;box-shadow:0 4px 14px rgba(0,0,0,.16);margin-bottom:6px;background:#f2efe9;transition:transform .15s}
.lk-th:hover img{transform:translateY(-3px)}
.lk-th:focus-visible{outline:3px solid var(--blue,#3b82f6);outline-offset:3px;border-radius:4px}
.lk-th.first{position:relative}.lk-th.first::after{content:attr(data-badge);position:absolute;left:50%;top:8px;transform:translateX(-50%);background:#111;color:#fff;font:600 11px Outfit;padding:3px 8px;border-radius:99px;white-space:nowrap}
/* lightbox */
.lb{position:fixed;inset:0;z-index:1000;background:rgba(17,17,17,.92);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb-fig{margin:0;max-width:min(92vw,720px);max-height:88vh;display:flex;flex-direction:column;align-items:center;touch-action:pan-y}
.lb-fig img{max-width:100%;max-height:80vh;width:auto;height:auto;border-radius:3px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-cap{color:#ddd;font:500 14px Outfit;margin-top:10px}
.lb button{font:600 15px Outfit;cursor:pointer}
.lb-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#111;font-size:18px!important}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#111;font-size:20px!important}
.lb-prev{left:14px}.lb-next{right:14px}.lb-nav[disabled]{opacity:.3;cursor:default}
.lb-end{background:#fff;border-radius:14px;padding:30px;max-width:420px;text-align:center}
.lb-end h4{font:600 24px Fraunces,serif;margin:0 0 8px}.lb-end p{color:var(--mut);line-height:1.5;margin:0 0 18px}
.lb-end[hidden]{display:none}
@media(max-width:620px){.lb-nav{top:auto;bottom:16px;transform:none}.lb-fig img{max-height:74vh}}
/* ---------- explicación ---------- */
#libro .bx{margin-top:44px;padding-top:34px;border-top:1px solid #e6e1da}
#libro .bx .lead{max-width:44em}
#libro .bx-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;margin-top:22px}
#libro .bx h4{font:600 18px Fraunces,serif;margin:0 0 8px}
#libro .bx ul,#libro .bx ol{margin:0;padding-left:1.2em;line-height:1.55;color:#3a3633}
#libro .bx li{margin-bottom:6px}
#libro .bx-toc{margin-top:28px;background:var(--cream);border-radius:16px;padding:22px 24px}
#libro .bx-toc ol{list-style:none;padding:0}
#libro .bx-toc li{display:grid;grid-template-columns:200px 1fr;gap:14px;padding:8px 0;border-bottom:1px solid #e6e1da}
#libro .bx-toc li:last-child{border-bottom:0}
#libro .bx-toc li b{font-family:Fraunces,serif}
@media(max-width:620px){#libro .bx-toc li{grid-template-columns:1fr;gap:2px}}
#libro .bx-cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* ---------- pop-up ---------- */
.bkpop{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;padding:16px}
.bkpop[hidden]{display:none}
.bkpop-bg{position:absolute;inset:0;background:rgba(17,17,17,.55)}
.bkpop-card{position:relative;background:#fff;border-radius:20px;max-width:620px;width:100%;max-height:calc(100vh - 32px);overflow:auto;padding:30px;display:grid;grid-template-columns:150px 1fr;gap:24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);animation:popIn .25s ease-out}
.bkpop-card:focus{outline:none}
.bkpop-card img{width:150px;height:auto;border-radius:4px;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.bkpop-card h2{font:600 26px/1.15 Fraunces,serif;margin:.3em 0 .4em}
.bkpop-card p{margin:0 0 14px;color:#3a3633;line-height:1.5}
.bkpop-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:1px solid #e6e1da;background:#fff;font-size:16px;cursor:pointer}
.bkpop-dl{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bkpop-dl .btn{padding:11px 16px;font-size:14px}
.bkpop .bk-dl[aria-disabled]{opacity:.4;cursor:not-allowed}
.bkpop .later{background:none;border:0;color:var(--mut);text-decoration:underline;cursor:pointer;font:500 14px Outfit;margin-top:14px;padding:6px 0}
.bkpop audio{width:100%;margin-top:10px}
@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:560px){.bkpop{align-items:flex-end;padding:0}.bkpop-card{grid-template-columns:1fr;border-radius:20px 20px 0 0;padding:24px 20px;max-height:92vh;gap:12px}.bkpop-card img{width:84px}.bkpop-card h2{font-size:22px}.bkpop-dl .btn{flex:1 1 100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.bang-in{animation:none!important;transition:none}.bkpop-card{animation:none}.lk-th img{transition:none}}
/* ---------- 5) idioma del libro (sin mezclar) ---------- */
.bk-set[data-bl="es"] .bl-en,.bk-set[data-bl="en"] .bl-es{display:none!important}
.bk-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font:500 15px Outfit}
.bk-pick select{font:500 15px Outfit;padding:9px 34px 9px 12px;border:1px solid #cfc8bf;border-radius:10px;background:#fff;color:var(--ink);min-height:42px;cursor:pointer}
.bk-pick select:focus-visible{outline:3px solid var(--blue,#3b82f6);outline-offset:2px}
.bkpop .bk-pick{margin-top:14px}