:root{color-scheme:dark;--paper:#f2e6cd;--ink:#251e19;--red:#a13f30;--reading-size:17px}*{box-sizing:border-box}body{margin:0;background:#141617;color:#eee8da;font-family:Georgia,"Times New Roman",serif}a{color:#e8bd7a}button,select,input{font:inherit}button,select{background:#292b2b;color:#f5eada;border:1px solid #686458;border-radius:4px;padding:10px 15px}button{cursor:pointer}button:hover{background:#40413c}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #e7b65e;outline-offset:4px}h2:focus{outline:none}.masthead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #454137;padding:20px 5vw;font-family:system-ui,sans-serif}.brand{text-decoration:none;letter-spacing:.1em;font-weight:800;color:#f1e2c2;font-size:14px}.brand span{color:#d66b53}.edition{font-size:10px;letter-spacing:.16em;color:#c7b99e}.intro{padding:32px 5vw 20px;max-width:1400px;margin:auto}.eyebrow{font:11px system-ui,sans-serif;letter-spacing:.22em;color:#d68b63}.intro h1{font-size:clamp(44px,7vw,78px);line-height:1;margin:10px 0;color:#db6046;letter-spacing:.02em}.intro>p:not(.eyebrow){max-width:700px;line-height:1.5}.content-note{font-size:13px;color:#c6baa7}.download{display:inline-block;margin-top:8px;font:13px system-ui,sans-serif}.controls{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:16px;padding:14px;background:#191c1df5;border-top:1px solid #494337;border-bottom:1px solid #494337;font-family:system-ui,sans-serif;font-size:14px}.select-label{display:flex;align-items:center;gap:10px}.controls[hidden]{display:none}.reading-tools{max-width:1280px;margin:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:16px 28px;font:12px system-ui,sans-serif;color:#d1c5af}.reading-tools select,.reading-tools button{font-size:12px;padding:6px 10px}#motion-note{font-size:11px;color:#b0a993}#index-pages{max-width:1224px;margin:0 auto 18px;padding:12px 20px;border:1px solid #524b3c;font:14px system-ui,sans-serif}summary{cursor:pointer}.index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:14px}.index-grid button{text-align:left;font-size:12px}.index-grid button[aria-current]{border-color:#e7b65e;color:#f8cf8c}.index-grid span{margin-left:8px}main{max-width:1280px;margin:0 auto;padding:0 28px 24px;touch-action:pan-y}.comic-page{margin:0 0 30px}.comic-page[hidden]{display:none}.page-sheet{background:var(--paper);color:var(--ink);box-shadow:0 15px 60px #0006;border:1px solid #a6987d;padding:30px 34px 18px}.page-header{border-bottom:2px solid #29231d;padding-bottom:16px}.page-header>span{font:10px system-ui,sans-serif;letter-spacing:.2em;color:#785b46}.page-header h2{font-size:34px;font-weight:normal;margin:8px 0 0}.page-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:30px;padding:24px 0;align-items:start}figure{margin:0;line-height:0;border:2px solid #2e2720;background:#c5bba3;position:sticky;top:110px}figure svg{display:block;width:100%;height:auto}.story{font-size:var(--reading-size);line-height:1.65}.story p{margin:0 0 .8em}.story p:last-child{margin-bottom:0}.dialogue{font-weight:bold}.page-footer{border-top:1px solid #aa997b;padding-top:13px;display:flex;justify-content:space-between;font:10px system-ui,sans-serif;color:#685b48}.site-footer{padding:10px 28px 35px;text-align:center;font:12px/1.6 system-ui,sans-serif;color:#b7ac99}.site-footer a{display:inline-block;margin-top:8px}.is-turning{animation:turn .18s ease-out}@keyframes turn{from{opacity:.55;transform:perspective(1200px) rotateY(2deg)}to{opacity:1;transform:none}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-100px;left:20px;background:#302c24;padding:10px;z-index:10}.skip-link:focus{top:10px}.fallback{text-align:center}
@media(max-width:760px){.masthead{padding:16px 18px}.edition{max-width:110px;text-align:right;font-size:9px}.intro{padding:24px 20px 18px}.controls{gap:8px;padding:10px 8px;flex-wrap:wrap}.controls button{padding:10px;font-size:12px}.controls select{max-width:180px;font-size:12px}.select-label{font-size:0;gap:0}#counter{font-size:11px}.reading-tools{padding:12px 18px;gap:12px}#motion-note{flex-basis:100%}#index-pages{margin:0 16px 16px}.index-grid{grid-template-columns:repeat(2,1fr)}main{padding:0 12px 18px}.page-sheet{padding:19px 17px 14px}.page-header h2{font-size:29px}.page-body{grid-template-columns:1fr;gap:20px;padding:18px 0}figure{position:static}.story{line-height:1.65}.page-footer{font-size:9px}.site-footer{padding:0 20px 25px}}
.comic-page{scroll-margin-top:110px}.zoom-note{max-width:800px;margin:12px auto;font:13px system-ui,sans-serif}.zoom-note a{color:#693525;text-decoration:underline}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
@media print{body{background:white;color:black}.masthead,.intro,.controls,.reading-tools,#index-pages,.site-footer,.skip-link,.fallback{display:none!important}main{max-width:none;padding:0}.comic-page,.comic-page[hidden]{display:block!important;break-before:page;margin:0}.page-sheet{box-shadow:none;border:none;padding:0}.page-body{grid-template-columns:1fr 1fr}.story{font-size:12pt}figure{position:static}.page-header h2{font-size:25pt}.page-footer{color:black}.is-turning{animation:none}}

.page-body.comic-layout{display:block}.comic-layout figure{max-width:800px;margin:0 auto;position:static}.comic-layout figure img{display:block;width:100%;height:auto}.comic-layout figure a{display:block}.layout-label{font:10px system-ui,sans-serif;letter-spacing:.14em;color:#705c43;margin:0 0 16px}.transcript{max-width:800px;margin:18px auto 0;border-top:1px solid #a18f71;padding-top:14px}.transcript summary{font:14px system-ui,sans-serif;color:#493629}.transcript .story{padding-top:14px}@media print{.comic-layout figure{max-width:650px}.transcript{display:none}.layout-label{display:none}}
/* Revisión 06: giro de hoja 3D manual, sin autoplay ni bloqueo del contenido. */
.comic-page{perspective:1800px;perspective-origin:50% 50%}
.page-sheet{position:relative;transform-style:preserve-3d;backface-visibility:hidden}
.page-sheet.is-turning{z-index:2;will-change:transform,filter;animation-duration:.52s;animation-timing-function:cubic-bezier(.2,.72,.25,1);animation-fill-mode:both}
.page-sheet.is-turning::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;animation:paper-glint .52s ease-out both}
.page-sheet.turn-forward{transform-origin:left center;animation-name:page-turn-forward}
.page-sheet.turn-forward::after{background:linear-gradient(105deg,rgba(33,24,16,.22),rgba(255,255,255,.34) 47%,rgba(33,24,16,.08) 70%,transparent 88%)}
.page-sheet.turn-backward{transform-origin:right center;animation-name:page-turn-backward}
.page-sheet.turn-backward::after{background:linear-gradient(255deg,rgba(33,24,16,.22),rgba(255,255,255,.34) 47%,rgba(33,24,16,.08) 70%,transparent 88%)}
@keyframes page-turn-forward{0%{opacity:.78;transform:rotateY(-13deg) translateX(2%);filter:drop-shadow(-18px 6px 14px rgba(0,0,0,.32))}55%{opacity:1;transform:rotateY(3deg) translateX(-.5%);filter:drop-shadow(-7px 4px 8px rgba(0,0,0,.22))}100%{opacity:1;transform:rotateY(0) translateX(0);filter:none}}
@keyframes page-turn-backward{0%{opacity:.78;transform:rotateY(13deg) translateX(-2%);filter:drop-shadow(18px 6px 14px rgba(0,0,0,.32))}55%{opacity:1;transform:rotateY(-3deg) translateX(.5%);filter:drop-shadow(7px 4px 8px rgba(0,0,0,.22))}100%{opacity:1;transform:rotateY(0) translateX(0);filter:none}}
@keyframes paper-glint{0%{opacity:.75}45%{opacity:.3}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.page-sheet.is-turning,.page-sheet.is-turning::after{animation:none!important}}
/* Viñeta 0: franja panorámica antes de la plancha numerada de la página 1. */
.comic-layout .opening-vignette{max-width:100%;margin:0 auto 20px;border:2px solid #2e2720;background:#241a12;line-height:normal}
.opening-vignette a{display:block}.opening-vignette img{display:block;width:100%;height:auto}.opening-vignette figcaption{padding:9px 12px;text-align:center;font:11px system-ui,sans-serif;letter-spacing:.14em;color:#ead7b8;background:#271a13}
