:root{--reader-black:#000;--reader-gold:#d8a53a;--reader-gold-hi:#efc45a;--reader-paper:#f2ead8;--reader-ink:#18140e;--reader-line:rgba(216,165,58,.34)}
html{scroll-behavior:smooth;background:var(--reader-black)}
body.sample-page{width:100%;min-height:100dvh;margin:0;padding:0;background:var(--reader-black)!important;color:#f4f0e8;overflow-x:hidden}
.sample-page .site-header{position:sticky;top:0;z-index:20;height:64px;padding:0 max(16px,calc((100vw - 760px)/2));display:flex;align-items:center;border-bottom:1px solid var(--reader-line);background:#000!important}
.sample-page .brand{display:flex;align-items:center;min-height:44px}
.sample-page .brand img{display:block;width:130px;height:auto}
.sample-close{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;color:var(--reader-gold-hi);font:300 31px/1 Arial,sans-serif;text-decoration:none}
.sample-reader{width:min(100% - 32px,760px);margin:0 auto;padding:18px 0 calc(92px + env(safe-area-inset-bottom))}
.sample-reader-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;color:#aaa69f;font:700 10px/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.sample-back{min-height:44px;display:flex;align-items:center;color:var(--reader-gold-hi);text-decoration:none}
.sample-progress{height:2px;margin-bottom:18px;background:rgba(255,255,255,.09);overflow:hidden}
.sample-progress span{display:block;width:0;height:100%;background:var(--reader-gold-hi);transition:width .16s ease}
.sample-source{display:none!important}
.sample-page-panel{display:none}
.sample-page-panel.active{display:block;animation:readerIn .22s ease both}
.sample-intro{padding:22px 14px 28px;grid-template-columns:1fr;align-items:center;justify-items:center;gap:10px;border-block:1px solid var(--reader-line);text-align:center}
.sample-intro.active{display:grid}
.sample-book-button{width:min(100%,310px);height:250px;padding:0!important;border:0!important;background:transparent!important;cursor:pointer;overflow:hidden}
.sample-intro img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.7))}
.sample-intro small,.sample-finish small{color:var(--reader-gold-hi);font:700 10px/1 Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase}
.sample-intro h1{margin:0 0 10px;color:#f4f0e8;font:400 clamp(34px,9vw,48px)/1 Georgia,serif}
.sample-intro p{max-width:30ch;margin:0 auto;color:#bcb7ae;font:400 16px/1.5 Arial,sans-serif}
.sample-intro>div button,.sample-finish a{min-height:48px;margin:22px auto 0;padding:0 16px;display:flex;align-items:center;justify-content:center;border:1px solid var(--reader-gold);background:linear-gradient(110deg,#bd8a29,#e4bd58);color:#160f04;font:700 11px/1 Arial,sans-serif;letter-spacing:.1em;text-decoration:none;text-transform:uppercase}
.sample-intro>div button{width:min(100%,260px)}
.sample-text-page{padding:24px clamp(22px,6.15vw,46px) 96px;background:var(--reader-black);color:#f4f0e8}
.sample-text-page::before{content:"PRÓLOGO";display:block;margin-bottom:18px;color:#8b651d;font:700 10px/1 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.sample-text-page h2{max-width:32ch;margin:0 0 24px;color:#f4f0e8;font:400 29px/1.1 Georgia,serif;letter-spacing:-.01em;text-wrap:balance}
.sample-text-page p{max-width:34ch;margin:0 auto 19px;color:#e8e1d5;font:400 18px/1.72 Georgia,serif;orphans:3;widows:3}
.sample-text-page p:first-of-type::first-letter{float:left;margin:.08em .08em 0 0;color:#9a6f1d;font-size:3.5em;line-height:.78}
.sample-text-page strong{font-weight:700}
.sample-controls{position:fixed;z-index:25;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,792px);height:66px;padding:0 max(16px,calc((100% - 760px)/2));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;border-top:1px solid var(--reader-line);background:rgba(0,0,0,.96)}
.sample-controls button{min-width:44px;min-height:44px;padding:0 8px;border:0;background:transparent;color:var(--reader-gold-hi);font:700 10px/1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.sample-controls button:last-child{text-align:right}
.sample-controls button:first-child{text-align:left}
.sample-controls button:disabled{color:#5f5a50}
#sample-page-count{color:#a9a49b;font:700 10px/1 Arial,sans-serif;letter-spacing:.1em}
.sample-finish{min-height:calc(100dvh - 220px);padding:48px 26px;align-content:center;text-align:center;border-block:1px solid var(--reader-line);background:radial-gradient(circle at 50% 35%,rgba(216,165,58,.12),transparent 43%),#000}
.sample-finish.active{display:grid}
.sample-finish p{max-width:520px;margin:18px auto 0;color:#f4f0e8;font:400 clamp(27px,7.4vw,36px)/1.18 Georgia,serif}
.sample-finish a{width:min(100%,360px);margin:28px auto 0}
.sample-finish>span{margin-top:11px;color:#87827a;font:400 11px/1 Arial,sans-serif;text-transform:uppercase}
.sample-finish>button{min-height:44px;margin:18px auto 0;border:0;background:transparent;color:var(--reader-gold-hi);font:700 10px/1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px}
@keyframes readerIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@media(max-width:379px){.sample-reader{width:calc(100% - 24px)}.sample-book-button{height:220px}.sample-intro h1{font-size:32px}.sample-controls button span{display:none}}
@media(min-width:600px){.sample-page .brand img{width:154px}.sample-intro{grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);text-align:left;padding:34px 46px;gap:26px}.sample-intro p{margin-inline:0}.sample-book-button{height:390px}.sample-reader{padding-top:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sample-page-panel.active{animation:none}}