@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600&display=swap');
:root{--paper:#f5f0e4;--ink:#302d27;--accent:#88662f}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);overflow:hidden}button{-webkit-tap-highlight-color:transparent}button:focus-visible{outline:1px solid var(--accent);outline-offset:7px}.desk{height:100svh;min-height:350px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 40%,#fbf7ed 0,#f5f0e4 55%,#e8dfcd 100%);overflow:hidden}.scene{perspective:2800px;perspective-origin:50% 50%;padding:20px 0 0}.book{position:relative;width:min(1120px,89vw,117svh);aspect-ratio:1.52;transform:translateX(-25%);transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.3,.06,.25,1)}.book.opened{transform:translateX(0)}.binding{position:absolute;inset:-3px -5px -7px;border-radius:4px 9px 8px 4px;background:#b9a788;box-shadow:0 24px 37px -18px #59472d55,0 5px 9px #68512c22;transform:translateZ(-2px)}.paper,.leaf-face,.cover-face{position:absolute;top:0;width:50%;height:100%;background-color:var(--paper);overflow:hidden}.paper{box-shadow:0 1px 1px #d4c7af,0 3px 0 -1px #f4efdf,0 4px 0 #cfc1a8,0 6px 0 -1px #ece4d5}.paper.left{left:0;border-radius:3px 0 0 3px;background-image:linear-gradient(90deg,#bc9e6a0d,transparent 20%,transparent 85%,#5f482520)}.paper.right{left:50%;border-radius:0 5px 5px 0;background-image:linear-gradient(90deg,#5f48251c,transparent 12%,transparent 85%,#bc9e6a10)}.manuscript{position:absolute;inset:7% 7% 9%;background-image:url('assets/manuscrito.png');background-size:cover;background-repeat:no-repeat;background-position:12% center;mix-blend-mode:multiply;opacity:.27;filter:sepia(.45) contrast(1.12);pointer-events:none}.right .manuscript{background-position:88% center;opacity:.22}.paper:after,.leaf-face:after,.cover-face:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 0 80%,#bb975c13,transparent 40%),url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23735a36' opacity='.055' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");box-shadow:inset 0 0 30px #a8894f0d}.gutter{position:absolute;left:48.5%;width:3%;top:0;height:100%;background:linear-gradient(90deg,transparent,#79613b16 35%,#5441262b 50%,#fcf8ed77 65%,transparent);pointer-events:none;z-index:3}.folio{position:absolute;bottom:3%;font:italic 12px Georgia,serif;color:#968267}.left .folio{left:9%}.right .folio{right:9%}.wordmark{font-family:'Manrope',sans-serif;font-size:clamp(22px,3vw,40px);font-weight:600;letter-spacing:-1.7px;white-space:nowrap}.wordmark .bass-clef{color:var(--accent);display:inline-block;width:.92em;height:1.05em;margin-left:7px;vertical-align:-.17em;overflow:visible}.right .manuscript{inset-block-start:23%}.cover{position:absolute;left:50%;width:50%;height:100%;top:0;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.3,.06,.25,1);z-index:8}.opened .cover{transform:rotateY(-180deg)}.cover-face{width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:0 5px 5px 0}.outside{background:#eee5d2;box-shadow:inset 0 0 60px #a48a5620,3px 5px 9px #57432b21}.cover-score{position:absolute;inset:6% 8%;background:url('assets/manuscrito.png') 50% 50%/auto 100%;mix-blend-mode:multiply;opacity:.13;filter:sepia(1)}.cover-frame{position:absolute;inset:30% 9% 46%;display:grid;place-items:center;background:#f1e9d8eb;border-block:1px solid #9f89523b}.cover-spine{position:absolute;inset:0 auto 0 0;width:15px;background:linear-gradient(90deg,#a58c5d40,transparent);border-left:1px solid #9c835754}.inside{transform:rotateY(180deg);background:#f5f0e4;border-radius:4px 0 0 4px;background-image:linear-gradient(90deg,transparent 80%,#64482620)}.inside .manuscript{opacity:.27;background-position:12% center}.leaf{display:none;position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left;transform-style:preserve-3d;z-index:6}.leaf.active{display:block}.leaf-face{width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}.leaf-face.back{transform:rotateY(180deg);background-image:linear-gradient(90deg,transparent 70%,#80633620)}.leaf-face.front{background-image:linear-gradient(90deg,#80633620,transparent 20%)}.controls{position:relative;display:flex;gap:30px;margin-top:34px;align-items:center;opacity:0;transition:opacity .3s;pointer-events:none}.ready .controls{opacity:1;pointer-events:auto}.controls button{width:40px;height:40px;border:0;background:transparent;color:#877454;font:23px Georgia,serif;cursor:pointer;transition:color .2s,opacity .2s}.controls button:hover{color:#302d27}.controls button:disabled{opacity:.18;cursor:default}#replay{font-size:22px;margin:0 12px}.open-trigger{position:absolute;width:min(500px,45vw);height:65svh;background:none;border:0;cursor:pointer}.ready .open-trigger{display: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}
@media(max-width:650px){.scene{perspective:1500px}.book{width:176vw;max-width:110svh;aspect-ratio:1.52;transform:translateX(-25%)}.book.opened{transform:translateX(-25%)}.wordmark{font-size:35px}.controls{margin-top:36px;gap:26px}.open-trigger{width:85vw}.folio{font-size:11px}}@media(prefers-reduced-motion:reduce){.book,.cover,.controls{transition:none}}

/* Al entrar solo se ve el volumen cerrado; el interior aparece al abrirlo. */
.binding{clip-path:inset(0 0 0 50%)}
.paper.left{visibility:hidden}
.gutter{opacity:0}
.ready .binding{clip-path:none}
.ready .paper.left{visibility:visible}
.ready .gutter{opacity:1}

/* Encuadernación: tela, papel encolado y huella de herramientas. */
.binding{background:repeating-linear-gradient(0deg,#c4b69b 0 1px,#e9dfca 1px 3px,#ac9978 3px 4px,#f3e9d6 4px 6px);border:1px solid #aa9672;border-radius:3px 5px 5px 3px;inset:-3px -5px -9px;box-shadow:0 16px 24px -14px #55412766,0 4px 6px #76604322}
.outside{background-color:#e9dfc9;background-image:radial-gradient(ellipse at 100% 0,#a3834836,transparent 28%),radial-gradient(ellipse at 88% 95%,#a78b5729,transparent 35%),repeating-linear-gradient(0deg,transparent 0 2px,#886b3c07 2px 3px),repeating-linear-gradient(90deg,transparent 0 3px,#886b3c07 3px 4px);box-shadow:inset 0 0 0 1px #b8a17b,inset -3px 0 7px #8c73452b,inset 0 0 42px #9f82461b,2px 3px 5px #57432b25}
.outside:before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,#3e2d171f,transparent 18%,#fff8e722 70%,#3e2d1729);opacity:.25}
.opening .outside:before{animation:cover-light 1.05s both cubic-bezier(.3,.06,.25,1)}
@keyframes cover-light{0%{opacity:.25}35%{opacity:.8}65%{opacity:.5}100%{opacity:.15}}
.cover-score{inset:8% 8% 8% 16%;opacity:.11;filter:sepia(.8) contrast(1.25)}
.cover-spine{width:9%;border-left:1px solid #79613d;border-right:1px solid #97805c77;background-color:#a4916f;background-image:linear-gradient(90deg,#4937222b,#d7c8a344 25%,#6d55352b 75%,#e9dcbe22),repeating-linear-gradient(0deg,#6b543122 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#f6e7c41a 0 1px,transparent 1px 3px);box-shadow:2px 0 5px #755b3425;z-index:3}
.cover-spine:before,.cover-spine:after{content:'';position:absolute;left:0;right:0;height:5%;border-block:1px solid #66533240;background:linear-gradient(#d3c19d33,transparent,#54402519)}
.cover-spine:before{top:15%}.cover-spine:after{bottom:15%}
.tooling{position:absolute;inset:5% 5% 5% 13%;width:82%;height:90%;fill:none;stroke:#8b7447;stroke-width:.65;opacity:.58;pointer-events:none}
.cover-frame{inset:34% 11% 46% 18%;background:#f5efdfef;border:1px solid #ad997356;box-shadow:1px 2px 3px #74603b18,inset 0 0 12px #a98b5815}
.cover-frame:before{content:'';position:absolute;inset:5px;border:1px solid #b4a17e59;pointer-events:none}
.cover-frame .wordmark{font-size:clamp(22px,2.8vw,36px)}
.paper:before,.inside:before{content:'';position:absolute;inset:0;border:1px solid #b5a17b38;box-shadow:inset -2px -2px 10px #b79b6230;pointer-events:none;z-index:2}
.paper.left{background-image:linear-gradient(90deg,#ae8b4d16,transparent 12%,transparent 87%,#6448232b)}
.paper.right{background-image:linear-gradient(90deg,#64482328,transparent 13%,transparent 87%,#ae8b4d1a)}
.paper:after,.inside:after{background-color:#c7a66905;box-shadow:inset 0 0 20px #a8894f18}
.gutter{left:48%;width:4%;background:linear-gradient(90deg,transparent,#79613b16 32%,#54412645 49%,#fff9ebaa 55%,#79613b16 70%,transparent)}
.gutter:after{content:'';position:absolute;left:49%;top:8%;height:84%;width:2px;background:repeating-linear-gradient(0deg,transparent 0 15%,#886f4477 15% 17%,transparent 17% 30%);opacity:.5}
@media(max-width:650px){.cover-frame .wordmark{font-size:30px}}
@media(prefers-reduced-motion:reduce){.opening .outside:before{animation:none}}

/* Las caras en movimiento son copias completas de las páginas en reposo. */
.leaf-face{background:transparent;overflow:visible}
.leaf-face:after,.inside:before,.inside:after{display:none}
.leaf-face>.paper,.inside>.paper{left:0;top:0;width:100%;height:100%;visibility:visible;box-shadow:none}
.leaf-face:before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,#503b2526,transparent 45%,#503b2518);opacity:0}
.leaf.active .leaf-face:before{animation:leaf-light .82s cubic-bezier(.38,0,.22,1) both}
@keyframes leaf-light{0%,100%{opacity:0}40%{opacity:.7}70%{opacity:.25}}
.leaf{will-change:transform}
.turn-shadow{position:absolute;left:50%;top:0;width:50%;height:100%;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(90deg,#3d291d,transparent 75%)}
.backward .turn-shadow{left:0;background:linear-gradient(270deg,#3d291d,transparent 75%)}
@media(prefers-reduced-motion:reduce){.leaf.active .leaf-face:before{animation:none}}

/* Cabecera de la página principal. */
:root{--header-height:150px}
body{height:100svh;display:flex;flex-direction:column}
.site-header{position:relative;z-index:12;flex:0 0 var(--header-height);height:var(--header-height);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px 24px;background:#e6ddca;border-bottom:1px solid #b8a98752}
.home-link{color:var(--ink);text-decoration:none;line-height:1.1}
.site-header .wordmark{font-size:52px;letter-spacing:-3px}
.site-header .bass-clef{margin-left:11px}
.site-nav{display:flex;justify-content:center;align-items:center;gap:48px}
.site-nav a{position:relative;color:#645742;text-decoration:none;font:18px/1.5 Georgia,serif;padding:2px 0 5px;transition:color .2s}
.site-nav a:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transition:transform .2s}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#302d27}
.site-nav a:hover:after,.site-nav a[aria-current="page"]:after{transform:scaleX(1)}
.site-header a:focus-visible{outline:1px solid var(--accent);outline-offset:7px}
.desk{position:relative;flex:1;min-height:0;height:calc(100svh - var(--header-height))}
.book{width:min(1120px,89vw,calc((100svh - var(--header-height) - 120px)*1.52))}
@media(max-width:650px){:root{--header-height:142px}.site-header{gap:13px;padding:18px}.site-header .wordmark{font-size:43px;letter-spacing:-2.5px}.site-nav{gap:35px}.site-nav a{font-size:17px}.book{width:176vw;max-width:calc((100svh - var(--header-height) - 110px)*1.52)}}
@media(max-height:550px){:root{--header-height:112px}.site-header{gap:6px;padding:10px}.site-header .wordmark{font-size:36px;letter-spacing:-2.1px}.site-nav a{font-size:16px}.book{width:min(1120px,89vw,calc((100svh - var(--header-height) - 85px)*1.52))}.controls{margin-top:20px}.scene{padding-top:0}}
@media(prefers-reduced-motion:reduce){.site-nav a,.site-nav a:after{transition:none}}

/* Madera oscura con veta fina y luz cálida en torno al cuaderno. */
.desk{background-color:#38251b;background-image:radial-gradient(ellipse at 50% 40%,#a3753e0d 0,#180f0755 100%),url('assets/madera.svg');background-size:cover;background-position:center}
.controls button{color:#d0b995;text-shadow:0 1px 2px #160d08}
.controls button:hover{color:#fff0d5}
.controls button:disabled{opacity:.3}
.controls button:focus-visible{outline-color:#e4c9a2}
.binding{box-shadow:0 24px 32px -10px #100a08aa,0 6px 10px #130b0766}
.book.instant,.book.instant .cover{transition:none!important}

/* Mesa de trabajo gastada: nogal oscuro, cera y manuscritos en los bordes. */
.desk{background-color:#20150f;background-image:linear-gradient(#100a0508,#100a0515),url('assets/mesa-ajada-v2.jpg');background-size:cover;background-position:center top}

/* Cuaderno de trabajo en piel, con papel de trapo y cantos gastados. */
.outside{background:#49301f url('assets/cuaderno-piel-v3.jpg') center/100% 100% no-repeat;border-radius:7px 9px 9px 5px;box-shadow:inset -2px -2px 5px #1d110e66,2px 3px 5px #170e0977}
.outside:after{opacity:.16}
.cover-score,.cover-spine,.tooling{display:none}
.cover-frame{inset:34% 12% 47% 20%;background:#e9dbba url('assets/papel-v3.jpg') center/100% 100% no-repeat;border:0;box-shadow:0 2px 4px #10070466,inset 0 0 7px #7c633429;clip-path:polygon(.3% .8%,20% 0,44% .5%,65% .1%,84% .7%,99.7% 0,100% 40%,99.4% 78%,99.8% 99%,73% 99.3%,46% 100%,20% 99.5%,0 100%,.5% 64%,0 28%)}
.cover-frame:before{display:none}
.cover-frame .wordmark{color:#382e22}
.cover-frame .bass-clef{color:#79603a}
.binding{inset:-4px -5px -9px;border:1px solid #3d291b;background:#4c3322 url('assets/cuaderno-piel-v3.jpg') center/100% 100%;border-radius:6px 9px 9px 6px;box-shadow:0 22px 28px -9px #0b0706cc,0 5px 8px #11090688}
.paper{background-color:#eddfc1;box-shadow:0 1px 0 #9a8055,0 2px 0 #e1d1ab,0 3px 0 #b29a70,0 4px 0 #e5d9bb,0 5px 0 #9c8259,0 6px 0 #d0bd95}
.paper.left{background-image:linear-gradient(90deg,#77502312,transparent 12%,transparent 86%,#48301c35),url('assets/papel-v3.jpg');background-size:100% 100%;border-radius:5px 0 0 5px}
.paper.right{background-image:linear-gradient(90deg,#48301c35,transparent 14%,transparent 88%,#77502312),url('assets/papel-v3.jpg');background-size:100% 100%;border-radius:0 6px 6px 0}
.paper:before{border:0;box-shadow:inset 0 0 8px #96744326}
.paper:after{background:none;box-shadow:none}
.manuscript,.inside .manuscript{opacity:.34}
.right .manuscript{opacity:.29}
.folio{color:#7e6847}
.gutter{background:linear-gradient(90deg,transparent,#70502e29 30%,#38231555 49%,#f5e7c780 56%,#70502e20 73%,transparent)}

/* La madera se desvanece hacia una cabecera oscura y más lisa. */
.site-header{background:#1b130e;border-bottom:0}
.site-header .home-link{color:#f0e6ce;text-shadow:0 1px 2px #08050444}
.site-header .bass-clef{color:#c7a77b}
.site-nav a{color:#d6c2a1}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#fff0d5}
.site-nav a:after{background:#c7a77b}
.site-header a:focus-visible{outline-color:#e4c9a2}
.desk{background-image:linear-gradient(to bottom,#1b130e 0px,#1b130ef5 24px,#1b130ec4 54px,#1b130e85 87px,#1b130e38 128px,#1b130e00 185px),linear-gradient(#100a0508,#100a0515),url('assets/mesa-ajada-v2.jpg')}
@media(max-width:650px){.desk{background-image:linear-gradient(to bottom,#1b130e 0px,#1b130ee6 22px,#1b130e99 55px,#1b130e40 91px,#1b130e00 135px),linear-gradient(#100a0508,#100a0515),url('assets/mesa-ajada-v2.jpg')}}

/* Título de la categoría en el lugar del logotipo interior. */


/* Cantos suavizados: las capas inferiores siguen la curva de la cubierta. */
.outside{border-radius:14px 17px 17px 13px;clip-path:inset(0 round 14px 17px 17px 13px);box-shadow:inset -1px -1px 4px #1d110e44,1px 2px 4px #170e0966}
.binding{inset:-1px -2px -5px;border:0;border-radius:16px;clip-path:inset(0 0 0 50% round 16px);box-shadow:0 19px 26px -8px #0b0706b3,0 4px 8px #11090666}
.ready .binding{clip-path:inset(0 round 16px)}
.paper{box-shadow:0 1px 0 #b49b74,0 3px 0 -1px #dac59e,0 5px 1px -1px #806644}
.paper.left{border-radius:11px 0 0 12px}
.paper.right{border-radius:0 12px 13px 0}
.book:not(.opened)>.paper.right{border-radius:15px 17px 17px 15px}
.cover-frame{border-radius:2px}

/* Ensayo de recorrido: portada → apertura → acercamiento → presentación. */
html{scroll-behavior:auto}
body{display:block;height:auto;overflow-x:clip;overflow-y:auto;background:#1b130e}
.story{height:320svh;position:relative;--zoom-progress:0;--intro-progress:0}
.story.manual{height:100svh}
.stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;overflow:hidden}
.stage .site-header{flex-basis:calc(var(--header-height)*(1 - .35*var(--zoom-progress)));height:calc(var(--header-height)*(1 - .35*var(--zoom-progress)));gap:calc(16px*(1 - .45*var(--zoom-progress)));padding-block:calc(20px*(1 - .5*var(--zoom-progress)));transition:flex-basis .35s,height .35s,padding .35s,gap .35s}
.stage .site-header .home-link{transform:scale(calc(1 - .17*var(--zoom-progress)));transform-origin:center;transition:transform .35s}
.stage .scene{transform:scale(calc(1 + .14*var(--zoom-progress)));transform-origin:50% 50%;transition:transform .35s}
.stage .controls{z-index:9}
.scroll-driven .book,.scroll-driven .cover,.scroll-driven .site-header,.scroll-driven .site-header .home-link,.scroll-driven .scene{transition:none!important}
.scroll-driven .outside:before{animation:none!important}
.story-introduction,.story-biography{position:absolute;left:12%;right:12%;opacity:0;visibility:hidden;pointer-events:none;color:#493725;transform:translateY(14px)}
.story-introduction{top:36%;text-align:center}
.story-introduction h2{font:italic clamp(32px,4.4vw,56px)/1.1 Georgia,serif;letter-spacing:-1px;margin:0 0 20px}
.story-introduction p{font:clamp(12px,1.4vw,17px)/1.5 Georgia,serif;margin:0}
.story-biography{top:35%;text-align:center}
.story-biography p{font:italic clamp(14px,1.6vw,21px)/1.65 Georgia,serif;margin:0}
.scroll-driven .story-introduction,.scroll-driven .story-biography{visibility:visible;opacity:var(--intro-progress);transform:translateY(calc(14px*(1 - var(--intro-progress))))}
.scroll-driven .paper.left>.manuscript,.scroll-driven .inside .manuscript{opacity:calc(.34 - .28*var(--intro-progress))}
.scroll-driven .paper.right>.manuscript{opacity:calc(.29 - .24*var(--intro-progress))}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:0;color:#e0cba7;cursor:pointer;padding:9px 18px;z-index:10;transition:opacity .2s;opacity:var(--cue-opacity,1)}
.scroll-cue span:first-child{font:11px/1.4 Georgia,serif;letter-spacing:.6px}
.scroll-cue span:last-child{font:22px/1 Georgia,serif}
.manual .scroll-cue{display:none}
@media(max-width:650px){.stage .scene{transform:scale(calc(1 + .065*var(--zoom-progress)))}.story-introduction{left:8%;right:8%}.story-introduction h2{font-size:32px}.scroll-cue{bottom:14px}.stage .site-header{gap:calc(13px*(1 - .4*var(--zoom-progress)))}}
@media(prefers-reduced-motion:reduce){.stage .site-header,.stage .home-link,.stage .scene{transition:none!important}.stage .scene{transform:none}.scroll-driven .story-introduction,.scroll-driven .story-biography{transform:none}}
.mobile-intro-name{display:none}
@media(max-width:650px){.mobile-intro-name{display:block;font:italic 32px/1.2 Georgia,serif;margin:0 0 25px}}

.scroll-cue[hidden]{display:none}

/* Tres palabras de identidad: texto, sin navegación ni estados de enlace. */
.site-signature{display:flex;align-items:center;justify-content:center;gap:15px;margin:0;color:#d6c2a1;font:18px/1.5 Georgia,serif}
.signature-separator{color:#a78a64;font-size:15px}
/* La biografía se reparte entre ambas páginas; en móvil se lee en la derecha. */
.story{height:440svh}
.story.manual{height:100svh}
.story-introduction{top:9%;left:11%;right:11%;text-align:left}
.story-introduction h2{font:italic clamp(22px,3.2svh,31px)/1.12 Georgia,serif;letter-spacing:-.5px;margin:0 0 17px}
.story-introduction h2 span{font-size:.88em}
.story-introduction .biography-left p,.biography-text p{font:clamp(11.5px,1.6svh,14px)/1.5 Georgia,serif;margin:0 0 12px;text-align:left}
.biography-left p:first-child{font-style:italic}
.story-biography{top:22%;bottom:10%;left:12%;right:12%;overflow:hidden;text-align:left}
.biography-text{will-change:transform}
.mobile-bio-start{display:none}
@media(max-width:650px){.site-signature{gap:12px;font-size:17px}.story-biography{top:20%;left:11%;right:11%}.mobile-bio-start{display:block}.mobile-bio-start h2{font:italic 23px/1.2 Georgia,serif;margin:0 0 17px}.biography-text p{font-size:13px;line-height:1.6}}

/* Entrar directamente en la biografía, sin rótulos de sección. */
.scroll-driven .book{width:min(1000px,76vw,calc((100svh - var(--header-height) - 120px)*1.52))}
.stage .scene{transform:scale(var(--zoom-scale,1))}
.stage .site-header{flex-basis:calc(var(--header-height)*(1 - var(--zoom-progress)));height:calc(var(--header-height)*(1 - var(--zoom-progress)));min-height:0;padding-block:calc(20px*(1 - var(--zoom-progress)));gap:calc(16px*(1 - var(--zoom-progress)));opacity:calc(1 - var(--zoom-progress));overflow:hidden}
.scroll-driven .controls{opacity:calc(1 - var(--zoom-progress))}
.story-introduction{top:10%}
.biography-heading{font:italic clamp(25px,4svh,37px)/1.15 Georgia,serif;letter-spacing:-.6px;margin:0 0 22px;color:#493725}
.story-biography{top:12%;bottom:10%}
@media(max-width:650px){.scroll-driven .book{width:176vw;max-width:calc((100svh - var(--header-height) - 110px)*1.52)}.story-introduction{visibility:hidden!important}.story-biography{top:10%}.mobile-bio-start .biography-heading{font-size:29px;margin-bottom:23px}}
@media(prefers-reduced-motion:reduce){.stage .scene{transform:none}}

.scroll-driven .controls{opacity:0;pointer-events:none}

/* Integración del cuero con la mesa: canto oscuro y sombra sin recorte. */
.book-shadow{position:absolute;left:calc(50% + 3px);right:3px;top:5px;bottom:-2px;border-radius:17px;background:#150b0870;box-shadow:0 3px 5px #0905039c,0 12px 19px -7px #07040394;transform:translateZ(-4px);pointer-events:none;z-index:-1}
.ready .book-shadow{left:3px}
.binding{background:linear-gradient(90deg,#24140f,#392419 12%,#302017 85%,#21120d);box-shadow:none}
.outside{left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);background-color:#352015;background-image:linear-gradient(90deg,#120a0659,transparent 2%,transparent 98%,#120a0638),url('assets/cuaderno-piel-v3.jpg');background-size:100% 100%,101% 100.7%;background-position:center;background-repeat:no-repeat;box-shadow:inset 1px 0 3px #170b0780,inset -1px -1px 3px #1b0d0760}
.outside:before{background:linear-gradient(90deg,#10080570 0%,#10080510 1.8%,#d4a36c12 4%,transparent 7%,#10080538 10%,transparent 14%,transparent 96%,#10080540 100%);opacity:.65}
.paper{box-shadow:0 1px 0 #856b48,0 3px 0 -1px #796045,0 5px 2px -2px #21150f99}
.gutter{left:48.5%;width:3%;background:linear-gradient(90deg,transparent,#64432625 29%,#3020144d 49%,#d6ba8426 57%,#6443261a 75%,transparent)}
.gutter:after{opacity:.28}

/* Retrato sin fondo, integrado con el papel bajo la biografía. */
.portrait-study{height:var(--portrait-height,170px);margin:12px auto 0;width:100%;pointer-events:none}
.portrait-study img{display:block;width:100%;height:100%;object-fit:contain;opacity:.88;filter:saturate(.4) sepia(.08);mix-blend-mode:multiply}

/* Tras la presentación, una hoja real da paso a la primera grabación. */
.story{height:660svh}
.story.manual{height:100svh}
.paper [hidden]{display:none!important}
.recording-page{position:absolute;inset:12% 12% 10%;color:#493725}
.recording-page h2{font:italic clamp(25px,4svh,37px)/1.15 Georgia,serif;letter-spacing:-.6px;margin:0}
.recording-pending{position:absolute;top:43%;left:0;right:0;text-align:center}
.recording-rule{display:block;width:42px;height:1px;margin:0 auto 18px;background:#80674766}
.recording-pending p{font:italic clamp(14px,2svh,18px)/1.5 Georgia,serif;color:#786044;margin:0}
.scroll-driven .paper[data-spread="1"].left>.manuscript{opacity:.18}
.scroll-driven .paper[data-spread="1"].right>.manuscript{opacity:.04}
.scroll-driven .leaf.active .leaf-face:before{animation:none;opacity:.15}
@media(max-width:650px){.recording-page{inset:10% 11%}.recording-page h2{font-size:29px}}