/* Biblioteca (app) — capa sobre style.css */
body.app{background:#03070f;color:#fff}
.app-bg{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,7,15,.55),rgba(3,7,15,.82) 60%,#03070f),url(img/fondo.jpg) center/cover no-repeat}
.topbar{position:sticky;top:0;z-index:50;background:#000;border-bottom:1px solid rgba(255,255,255,.08)}
.topbar .wrap{display:flex;align-items:center;gap:26px;height:68px}
.topbar .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:900;letter-spacing:.5px;margin-right:auto}
.topbar .logo i{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--cyan),var(--blue));display:flex;align-items:center;justify-content:center;font-style:normal;font-family:Anton,sans-serif;font-size:20px;color:#03070f}
.topbar nav a{color:#dfe9f7;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.5px;text-transform:uppercase;margin-left:20px}
.topbar nav a.on,.topbar nav a:hover{color:var(--yellow)}
.banner{color:var(--yellow);font-weight:900;font-size:18px;white-space:nowrap}
@media(max-width:820px){.topbar .banner{display:none}.topbar nav a{margin-left:14px;font-size:13px}}
.mbanner{display:none;background:var(--yellow);color:#03070f;text-align:center;font-weight:900;font-size:14px;padding:8px 12px}
@media(max-width:820px){.mbanner{display:block}}

.intro{padding:58px 0 18px}
.intro h1{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(40px,6.5vw,72px);line-height:1}
.intro p{color:#b9cbe0;font-size:18px;max-width:620px;margin-top:12px}
.intro .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

.shelf{padding:46px 0}
.shelf-h{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.shelf-h h2{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(28px,4vw,42px);line-height:1.05}
.shelf-h p{color:#9fb3cc;font-size:15px;margin-top:6px}
.books{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px}
@media(max-width:900px){.books{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.books{grid-template-columns:repeat(2,1fr);gap:22px 14px}}

/* book card */
.book{display:flex;flex-direction:column;text-decoration:none;color:#fff;position:relative}
.cover{position:relative;aspect-ratio:3/4;border-radius:6px 14px 14px 6px;padding:16px 16px 14px 22px;overflow:hidden;
  background:linear-gradient(150deg,var(--c1,#0c2e5c),var(--c2,#050d1a));display:flex;flex-direction:column;
  box-shadow:0 18px 40px rgba(0,0,0,.55),inset 6px 0 0 rgba(255,255,255,.08),inset 9px 0 0 rgba(0,0,0,.25);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.cover::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 100% 0%,rgba(255,255,255,.18),transparent 55%);pointer-events:none}
.cover::after{content:"";position:absolute;right:-30px;bottom:-30px;width:150px;height:150px;border-radius:50%;border:18px solid rgba(255,255,255,.06)}
.book:hover .cover{transform:translateY(-6px) rotate(-1.2deg);box-shadow:0 28px 60px rgba(0,0,0,.65),0 0 40px var(--glow,rgba(63,208,255,.25))}
.cover .k{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--acc,#3fd0ff)}
.cover b{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(20px,2.2vw,27px);line-height:1.05;margin-top:10px;text-transform:uppercase;position:relative;z-index:1}
.cover .em{font-size:40px;margin-top:auto;position:relative;z-index:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.cover .brand{position:absolute;left:22px;bottom:14px;font-size:10px;font-weight:900;letter-spacing:2px;opacity:.7}
.cover .em + .brand{display:none}
.book .meta{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-top:12px}
.book .meta h3{font-size:15px;font-weight:800;line-height:1.3;text-transform:uppercase}
.book .meta .min{font-size:12px;color:#9fb3cc;font-weight:600;text-transform:none;display:block;margin-top:3px}
.badge-ic{flex:0 0 auto;font-size:26px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.book.locked .cover{filter:saturate(.8)}
.book .done{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border-radius:99px;background:var(--green2);color:#03070f;font-weight:900;display:none;align-items:center;justify-content:center}
.book.is-done .done{display:flex}
.new-tag{position:absolute;top:10px;right:10px;z-index:2;background:var(--yellow);color:#03070f;font-size:10px;font-weight:900;padding:3px 8px;border-radius:99px}

/* video */
.video{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center}
@media(max-width:760px){.video{grid-template-columns:1fr}}
.player{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#0c2e5c,#03070f);border:1.5px solid rgba(63,208,255,.25);display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff}
.player .pl{width:82px;height:82px;border-radius:99px;background:var(--yellow);color:#03070f;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 0 0 14px rgba(255,214,10,.15)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .soon{position:absolute;bottom:14px;left:16px;font-family:"JetBrains Mono",monospace;font-size:12px;color:#9fb3cc}

/* precios */
.buy{padding:70px 0 90px;background:rgba(0,0,0,.72);border-top:1px solid rgba(255,255,255,.06)}
.buy .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}
@media(max-width:860px){.buy .grid{grid-template-columns:1fr}.stack{display:none}}
.stack{position:relative;height:440px}
.stack .cover{position:absolute;width:210px;box-shadow:0 30px 60px rgba(0,0,0,.7)}
.stack .cover:nth-child(1){left:0;top:60px;transform:rotate(-10deg)}
.stack .cover:nth-child(2){left:90px;top:20px;transform:rotate(-2deg);z-index:2}
.stack .cover:nth-child(3){left:190px;top:70px;transform:rotate(8deg)}
.buy h2{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(34px,5vw,54px);line-height:1.02}
.buy .offer{color:var(--yellow);font-weight:900;font-size:20px;margin:22px 0 18px;text-transform:uppercase}
.countries{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:560px){.countries{grid-template-columns:1fr}}
.country{text-align:center;text-decoration:none;color:#fff;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.12);border-radius:18px;padding:18px 12px;transition:border-color .2s,transform .2s}
.country:hover{border-color:var(--yellow);transform:translateY(-3px)}
.country .fl{font-size:34px;line-height:1}
.country .n{display:block;font-weight:800;margin-top:6px}
.country s{display:block;color:#8aa0bb;font-size:14px;margin:4px 0 10px}
.country .p{display:block;background:var(--yellow);color:#03070f;font-family:Anton,sans-serif;font-size:30px;letter-spacing:1px;border-radius:10px;padding:4px 0}
.country small{display:block;color:#9fb3cc;font-size:12px;margin-top:6px}
.bigcd{display:flex;gap:10px;justify-content:flex-start;margin-top:26px;align-items:baseline;flex-wrap:wrap}
.bigcd .lb{width:100%;font-weight:900;letter-spacing:1px;color:#dfe9f7}
.bigcd b{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(46px,7vw,72px);line-height:1}
.bigcd i{font-style:normal;font-size:12px;color:#9fb3cc;margin:0 10px 0 4px}
.app footer{background:#000}
.app details{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);box-shadow:none;color:#fff}
.app details p{color:#a9bbd1}
@media(max-width:600px){.topbar .logo span{display:none}.topbar .wrap{gap:10px}.topbar nav{white-space:nowrap}.topbar nav a{margin-left:12px;font-size:12px}}
.flag{display:inline-block;width:46px;height:30px;border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.flag.pe{background:linear-gradient(90deg,#d91023 33.3%,#fff 33.3% 66.6%,#d91023 66.6%)}
.flag.co{background:linear-gradient(180deg,#fcd116 50%,#003893 50% 75%,#ce1126 75%)}
.flag.mu{background:none;box-shadow:none;width:auto;height:30px;font-size:30px;line-height:30px}
.countries.one{grid-template-columns:minmax(0,340px)}
.countries.one .p{font-size:44px}
.flag.pa{position:relative;background:linear-gradient(90deg,#fff 50%,#d21034 50%) top/100% 50% no-repeat,linear-gradient(90deg,#005293 50%,#fff 50%) bottom/100% 50% no-repeat}
.flag.pa::before,.flag.pa::after{content:"★";position:absolute;font-size:10px;line-height:1}
.flag.pa::before{left:9px;top:2px;color:#005293}.flag.pa::after{right:9px;bottom:2px;color:#d21034}
.countries.two{grid-template-columns:repeat(2,minmax(0,260px))}
@media(max-width:560px){.countries.two{grid-template-columns:1fr}}