/* Composición aprobada: una escena decorativa continua, letras y objetos separados. */
body{background:#785c40;text-size-adjust:100%;-webkit-text-size-adjust:100%}
.restored-scene{--u:calc(100cqw / 1536);position:relative;container-type:inline-size;isolation:isolate;max-width:1800px;margin:auto;overflow:hidden;color:#211f19;background:#ad8b65}
.scene-background{display:block;width:100%;pointer-events:none;user-select:none}
.scene-background img{display:block;width:100%;height:auto}
.restored-scene .place{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);box-sizing:border-box;margin:0;padding:0;inset-inline-end:auto;inset-block-end:auto;max-width:none;min-width:0;aspect-ratio:auto;background:none;border:0;transform:none;z-index:2}
.restored-scene .brand{display:block;color:#171b15;text-decoration:none;z-index:3}
.brand>span{font:normal calc(36 * var(--u))/.8 Georgia,'Times New Roman',serif;letter-spacing:calc(-1.2 * var(--u))}
.welcome h1{font:normal calc(66 * var(--u))/.91 Georgia,'Times New Roman',serif;letter-spacing:calc(-2 * var(--u));margin:0 0 calc(12 * var(--u));white-space:nowrap}
.welcome p{font:normal calc(26 * var(--u))/1.1 Georgia,'Times New Roman',serif;letter-spacing:calc(.2 * var(--u));white-space:nowrap;margin:0}
.paper-note{font-family:Arial,Helvetica,sans-serif;transform-origin:center}
.restored-scene .book-note{transform:rotate(-5deg)}
.paper-note h2{font-size:calc(22 * var(--u));font-weight:700;line-height:1.08;letter-spacing:calc(-.4 * var(--u));margin:0 0 calc(9 * var(--u));white-space:nowrap}
.paper-note p{font-size:calc(16 * var(--u));line-height:1.3;margin:0;white-space:nowrap}
.restored-scene .music-note{transform:rotate(-4deg)}
.music-note h2{line-height:1;margin-bottom:calc(8 * var(--u))}
.music-note p{font-size:calc(15 * var(--u));line-height:1.25}
.restored-scene .book{display:block;color:#30261a;cursor:pointer;isolation:isolate;border-radius:calc(8 * var(--u));transition:transform .25s ease,filter .25s ease}
.book-skin{display:block;position:absolute;inset:0;pointer-events:none;background-image:url('assets/libros-originales-vacios.png');background-repeat:no-repeat}
.compact-skin{display:none;background-image:url('assets/libros-originales-mobile-vacios.png')}
.book-title,.book-signature,.book-heart{position:absolute;top:50%;display:block;white-space:nowrap}
.book-title{left:52%;font:normal calc(42 * var(--u))/1 Georgia,'Times New Roman',serif;letter-spacing:calc(.3 * var(--u));transform:translate(-50%,-50%)}
.book-signature{left:87%;font:normal calc(27 * var(--u))/1 Georgia,'Times New Roman',serif;transform:translate(-50%,-50%) rotate(-90deg)}
.book-heart{left:25%;width:calc(38 * var(--u));height:calc(38 * var(--u));fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;transform:translate(-50%,-50%) rotate(-90deg)}
.desamor,.dedicatorias{color:#e9c28a!important}
.dedicatorias .book-title{font-size:calc(38 * var(--u))}
.dedicatorias .book-heart{left:26%}
.restored-scene .book:hover{transform:translateX(calc(8 * var(--u)));filter:brightness(1.045);box-shadow:none;backdrop-filter:none;z-index:4}
.restored-scene .book:focus-visible{outline:2px solid #d5b67e;outline-offset:2px;z-index:5}
.restored-scene .playlist-player{display:block;cursor:pointer;transition:transform .25s ease,filter .25s ease;transform-origin:75% 90%;border-radius:calc(9 * var(--u))}
.player-skin{position:absolute;inset:0;display:block;background:url('assets/mp3-original-aislado.png') no-repeat;pointer-events:none}
.restored-scene .playlist-player:hover{transform:translateY(calc(-4 * var(--u))) rotate(-1deg);filter:brightness(1.055)}
.handwritten{font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-size:calc(18 * var(--u));line-height:1.25;letter-spacing:calc(-.15 * var(--u));color:#2d2a22}
.handwritten p{margin:0;white-space:nowrap}
.restored-scene .open-letter{transform:rotate(-12deg)}
.restored-scene .home-words{font-size:calc(19 * var(--u));line-height:1.1;transform:rotate(-7deg)}
.home-words .note-signature{display:inline-block;margin-inline-start:.65em}
.restored-scene .shared-stories{font-size:calc(16.5 * var(--u));transform:rotate(-9deg)}
.restored-scene .shelf-whisper{font-size:calc(16 * var(--u));transform:rotate(-10deg);opacity:.85}
.restored-scene .rainy-days{font-size:calc(14 * var(--u));transform:rotate(-13deg);opacity:.85}
.restored-scene .lower-letter{font-size:calc(16 * var(--u));transform:rotate(-9deg)}
.restored-scene .lower-blue{font-size:calc(19 * var(--u));transform:rotate(-7deg)}
.small-heart{position:absolute;right:calc(9 * var(--u));bottom:calc(3 * var(--u));font:normal calc(28 * var(--u))/1 Georgia,serif}
.compact-copy{display:none}
.restored-scene .story-invitation{text-align:center;color:#211d17;z-index:3;filter:none}
.story-invitation h2{font:normal calc(36 * var(--u))/.98 Georgia,'Times New Roman',serif;letter-spacing:calc(-1.3 * var(--u));margin:0 0 calc(8 * var(--u));white-space:nowrap}
.story-invitation p{font:normal calc(18 * var(--u))/1.25 Georgia,'Times New Roman',serif;margin:0 0 calc(12 * var(--u));white-space:nowrap}
.story-invitation .story-open{position:relative;display:inline-flex;align-items:center;justify-content:center;width:calc(230 * var(--u));height:calc(44 * var(--u));padding:0;margin:0;border:0;border-radius:calc(9 * var(--u));gap:calc(22 * var(--u));background:#252720;color:#fff7e9;font:normal calc(20 * var(--u))/1.1 Georgia,serif;cursor:pointer}
.story-invitation .story-open::after{content:"";position:absolute;inset:-5px 0}
.story-invitation .story-open:hover{background:#3d4135}
.story-copy-in-motion h2,.story-copy-in-motion p{visibility:hidden}
.story-paper-transition{
 position:fixed;
 z-index:21;
 pointer-events:none;
 text-align:center;
}
.story-paper-surface{
 position:absolute;
 inset:0;
 z-index:-1;
 transform-origin:top center;
 background:#fae7d5 url('assets/pie-papel-patina.png') center / cover;
 background-blend-mode:soft-light;
}
.restored-scene .mobile-menu{display:none;position:absolute;left:auto;right:3%;top:1.5%;width:44px;height:44px;border:0;padding:8px;margin:0;background:transparent;z-index:10;border-radius:5px}
.mobile-menu>span{display:block;height:2px;background:#25271e;border-radius:2px;margin:5px 0}
#mobile-nav{top:65px;right:18px;z-index:20}
.library-footer{
 position:relative;
 isolation:isolate;
 display:grid;
 place-content:center;
 gap:4px;
 max-width:1800px;
 min-height:56px;
 margin:-10px auto 0;
 padding:17px 16px 10px;
 background:#d09d71;
 color:#3c2a1d;
 text-align:center;
 font:15px/1.2 Georgia,serif;
 letter-spacing:.045em;
 clip-path:polygon(
  0% 7px, 2% 7px, 3.2% 6px, 4.6% 5px, 5.8% 6px, 7.1% 5px, 8.6% 6px, 10% 7px,
  12% 8px, 13.7% 7px, 15.4% 8px, 17% 6px, 18.3% 5px, 19.5% 5px, 20.9% 3px, 22% 4px,
  23% 2px, 24.3% 3px, 26% 4px, 27.4% 4px, 28.5% 5px, 30% 6px, 32% 5px, 33.4% 7px,
  35% 7px, 37% 8px, 38.6% 7px, 40% 8px, 42% 9px, 43.8% 8px, 45% 9px, 46% 8px,
  47.6% 7px, 49.3% 5px, 50.5% 6px, 52% 5px, 53.4% 6px, 55.5% 7px, 57% 7px, 59% 8px,
  60.5% 7px, 62% 9px, 64% 9px, 65.8% 10px, 67.4% 9px, 69% 8px, 71.2% 8px, 73% 6px,
  75% 6px, 76.4% 5px, 78% 4px, 79.5% 5px, 81% 6px, 83% 5px, 85% 6px, 86.4% 7px,
  88% 8px, 90% 8px, 91.6% 9px, 93% 8px, 94.4% 9px, 96.5% 9px, 98% 10px, 100% 10px,
  100% 100%, 0 100%
 );
}
.library-footer::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 background:#ffe2c4 url('assets/pie-papel-patina.png') center / max(100%, 680px) auto no-repeat;
 background-blend-mode:multiply;
 opacity:.52;
 pointer-events:none;
}
.library-footer::after{
 content:"";
 position:absolute;
 inset:0 0 auto;
 height:17px;
 z-index:-1;
 background:#66401e38;
 mix-blend-mode:multiply;
 clip-path:polygon(
  0 0, 100% 0, 100% 15px, 98% 14px, 96.5% 12px, 94.4% 13px, 93% 13px, 91.6% 12px,
  90% 13px, 88% 12px, 86.4% 11px, 85% 9px, 83% 9px, 81% 11px, 79.5% 9px, 78% 7px,
  76.4% 9px, 75% 11px, 73% 9px, 71.2% 13px, 69% 12px, 67.4% 13px, 65.8% 13px, 64% 13px,
  62% 14px, 60.5% 11px, 59% 11px, 57% 11px, 55.5% 12px, 53.4% 9px, 52% 10px, 50.5% 10px,
  49.3% 9px, 47.6% 10px, 46% 12px, 45% 14px, 43.8% 12px, 42% 12px, 40% 12px, 38.6% 12px,
  37% 11px, 35% 12px, 33.4% 11px, 32% 9px, 30% 9px, 28.5% 9px, 27.4% 9px, 26% 8px,
  24.3% 6px, 23% 6px, 22% 9px, 20.9% 6px, 19.5% 10px, 18.3% 9px, 17% 10px, 15.4% 11px,
  13.7% 11px, 12% 13px, 10% 11px, 8.6% 9px, 7.1% 9px, 5.8% 11px, 4.6% 8px, 3.2% 11px,
  2% 11px, 0% 11px
 );
 pointer-events:none;
}
.footer-signoff{
 margin:0;
 font:italic 12px/1.25 Georgia,serif;
 letter-spacing:.015em;
}
@media(max-width:900px){
 .restored-scene{--u:calc(100cqw / 887)}
 .restored-scene .place{left:var(--mx);top:var(--my);width:var(--mw);height:var(--mh)}
 .brand>span{font-size:calc(46 * var(--u));line-height:.8}
 .welcome h1{font-size:calc(74 * var(--u));line-height:.9;letter-spacing:calc(-2 * var(--u));margin-bottom:calc(18 * var(--u))}
 .welcome p{font-size:calc(32 * var(--u));line-height:1.05;letter-spacing:0}
 .book-note h2{font-size:calc(34 * var(--u));line-height:1.05;margin-bottom:calc(12 * var(--u))}
 .book-note p{font-size:calc(22 * var(--u));line-height:1.25}
 .music-note h2{font-size:calc(28 * var(--u));line-height:1.02;margin-bottom:calc(9 * var(--u))}
 .music-note p{font-size:calc(20 * var(--u));line-height:1.25}
 .wide-skin{display:none}.compact-skin{display:block}
 .book-title{font-size:calc(42 * var(--u))}.dedicatorias .book-title{font-size:calc(38 * var(--u));left:57%}
 .book-heart{width:calc(38 * var(--u));height:calc(38 * var(--u))}
 .book-signature{font-size:calc(29 * var(--u));left:86%}
 .restored-scene .home-words{font-size:calc(21 * var(--u));transform:rotate(-7deg)}
 .restored-scene .lower-letter{font-size:calc(17 * var(--u));transform:rotate(-12deg);text-align:center}
 .restored-scene .lower-blue{font-size:calc(18 * var(--u));line-height:1.25;text-align:center}
 .desktop-only,.wide-copy{display:none!important}.compact-copy{display:inline}
 .story-invitation h2{font-size:calc(44 * var(--u));line-height:1;letter-spacing:calc(-1.4 * var(--u));margin-bottom:calc(14 * var(--u))}
 .story-invitation p{font-size:calc(22 * var(--u));line-height:1.3;margin-bottom:calc(16 * var(--u))}
 .story-invitation .story-open{width:calc(315 * var(--u));height:calc(53 * var(--u));font-size:calc(28 * var(--u));border-radius:calc(12 * var(--u));gap:calc(28 * var(--u))}
 .restored-scene .mobile-menu{display:block}
 .library-footer{
  min-height:62px;
  padding:20px 16px max(13px, env(safe-area-inset-bottom));
 }
}
@media(prefers-reduced-motion:reduce){.restored-scene .book,.restored-scene .playlist-player{transition:none}.restored-scene .book:hover,.restored-scene .playlist-player:hover{transform:none}}
.overlay{background:linear-gradient(#241b13b0,#241b13b0),url('assets/estante-inferior-completo.png') center/cover fixed}
.story-view,#success{background:linear-gradient(#f8e9d185,#f8e9d185),url('assets/estante-inferior-completo.png') center/cover fixed}
.story-view .envelope{background:none}
.story-delivering{background:none;overflow:hidden}
.story-delivering .letter{transform-origin:top left;animation:handoff-story-paper 440ms step-end both}
.story-delivering .letter > *,.story-delivering .reading-header{animation:fade-story-fields 240ms ease-out both}
@keyframes handoff-story-paper{to{visibility:hidden}}
@keyframes fade-story-fields{to{opacity:0}}
#success{min-height:100vh;isolation:isolate;text-align:center;padding:80px 24px 50px;color:#fff6e7}
#success::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 background:rgba(30,21,15,.72);
}
#success.envelope-closing::before{animation:dim-story-backdrop 560ms ease-in-out both}
@keyframes dim-story-backdrop{
 from{opacity:0}
 to{opacity:1}
}
.closed-envelope{width:min(440px,80vw);aspect-ratio:1.65;position:relative;isolation:isolate;margin:38px auto 35px;background:linear-gradient(150deg,#ad7643,#d6a66d 70%);border:2px solid #a67442;border-radius:8px;box-shadow:0 15px 40px #34201444}
.closed-envelope::after{
 content:"";position:absolute;z-index:3;inset:0;border-radius:inherit;
 background:linear-gradient(145deg,#d5a66e,#bd8953);
 clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);
}
.envelope-insert{
 position:absolute;z-index:2;inset:8% 9% 5%;overflow:hidden;
 background:#faf3e6;
 border-radius:3px;box-shadow:0 1px 8px #593c2440;
}
.envelope-insert span{
 display:block;width:62%;height:27%;margin:9% auto 0;
 background:repeating-linear-gradient(transparent 0 30%,#9a765d66 31% 34%,transparent 35% 50%);
}
.envelope-flap{
 position:absolute;z-index:4;inset:0;border-radius:inherit;transform-origin:top;
 background:linear-gradient(165deg,#dfb27d,#bc834c);
 clip-path:polygon(0 0,100% 0,50% 58%);
}
.closed-envelope i{position:absolute;z-index:5;left:43%;top:43%;width:14%;aspect-ratio:1;background:radial-gradient(circle at 35% 28%,#963c4c,#681c2e 72%,#501322);color:#ffe2d1;border:3px double #ad5c69;border-radius:50%;display:grid;place-items:center;font:600 clamp(13px,4vw,23px)/1 Georgia,serif;box-shadow:1px 3px 4px #38200d55}
.envelope-closing .envelope-insert{animation:insert-story-letter 450ms 440ms cubic-bezier(.32,.1,.24,1) both}
.envelope-closing .envelope-flap{animation:close-story-flap 510ms 720ms cubic-bezier(.45,.04,.22,1) both}
.envelope-closing .closed-envelope i{animation:show-story-seal 220ms 1160ms ease-out both}
@keyframes insert-story-letter{
 0%{transform:translateY(-25%);visibility:hidden}
 0.01%{visibility:visible}
 100%{transform:translateY(0);visibility:visible}
}
@keyframes close-story-flap{
 from{transform:perspective(850px) rotateX(90deg)}
 to{transform:perspective(850px) rotateX(0)}
}
@keyframes show-story-seal{
 from{opacity:0}
 to{opacity:1}
}
#success h1{font:normal clamp(30px,4vw,48px)/1.1 Georgia,serif;letter-spacing:-.035em;margin:0 auto 15px;max-width:700px}
.success-message{font:clamp(19px,2vw,25px)/1.4 Georgia,serif;margin:0 auto 25px}
.success-return{position:static;display:inline-block;padding:13px 26px;border:0;border-radius:8px;background:#252720;color:#fff7e9;font-size:17px}


