:root {
  --night:#0e091d; --purple:#43277f; --ink:#392442; --gold:#e4c180; --gold2:#a87a3b;
  --paper:#fff7e9; --book-width:374px; --book-height:510px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--night);color:#efe3fb;font-family:'DM Sans',Arial,sans-serif;overflow-x:hidden}
button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:2px solid #f0d693;outline-offset:3px}
.night{position:fixed;inset:0;z-index:-3;background:radial-gradient(ellipse 48% 58% at 51% 45%,#342059 0%,#1b1234 48%,#100a23 86%),radial-gradient(ellipse at 90% 90%,#4d2566,transparent 70%)}
.night:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 20% 35% at 13% 64%,#6333863d,transparent),radial-gradient(ellipse 24% 35% at 92% 16%,#483a7640,transparent)}
.night:after{content:"";position:absolute;inset:0;opacity:.3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E")}
.twinkle-field{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.twinkle{position:absolute;width:2px;height:2px;background:#e9ca98;border-radius:50%;box-shadow:0 0 9px 2px #e8c18e60;animation:twinkle var(--duration) ease-in-out infinite alternate;animation-delay:var(--delay)}.twinkle.big{width:4px;height:4px;box-shadow:0 0 16px 3px #e8c18e7d}
@keyframes twinkle{from{opacity:.12;transform:scale(.7)}to{opacity:.9;transform:scale(1.25)}}
.experience{width:min(1180px,100%);margin:auto;position:relative;padding:33px 18px 10px;min-height:100vh}.intro{text-align:center;position:relative;z-index:9;pointer-events:none}.eyebrow{display:flex;align-items:center;justify-content:center;gap:13px;letter-spacing:3.4px;font-size:10px;color:#d7b87e;margin:0 0 13px;font-weight:700}.eyebrow-line{height:1px;width:33px;background:linear-gradient(90deg,transparent,#ba995c,transparent)}.intro h1{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:clamp(21px,2.5vw,33px);line-height:1.42;margin:0;letter-spacing:-.4px}.intro h1 em{font-weight:400;font-style:normal;color:#e5bb82}.intro-subtitle{font-size:12px;letter-spacing:.5px;color:#b5a2ce;margin:11px 0 0}
.scene{height:730px;width:100%;position:relative;margin:0 auto;perspective:1700px}.book-shadow{position:absolute;left:50%;top:602px;width:445px;height:42px;border-radius:50%;transform:translateX(-50%);background:#0009;filter:blur(22px);opacity:.75;transition:transform 1.25s, width 1.25s,opacity 1s}.scene.opened .book-shadow{width:755px;transform:translateX(-50%)}
.book{position:absolute;left:50%;top:60px;width:var(--book-width);height:var(--book-height);transform:translateX(-50%) rotateZ(-1.2deg);transform-style:preserve-3d;transition:transform 1.4s cubic-bezier(.25,.85,.2,1),opacity .6s;isolation:isolate}.scene.opening .book,.scene.opened .book{transform:translateX(calc(-50% + 182px)) rotateZ(0)}
.book-body{position:absolute;inset:-2px -7px -3px 0;border-radius:8px 27px 25px 8px;background:linear-gradient(95deg,#201137 1%,#382063 5%,#6746a1 11%,#34185f 16%,#49236e 92%,#2a194d);box-shadow:12px 19px 28px #0301089c,-2px 3px 0 #754eae,inset -6px 0 8px #150c2d;transform:translateZ(-10px)}
.page-edges{position:absolute;inset:13px 0 11px 9px;border-radius:1px 20px 18px 2px;background:repeating-linear-gradient(to bottom,#ddc9a9 0,#fff7e9 1px,#eadac5 2px,#faf0e0 3px);box-shadow:6px 3px 0 #ad90ab,12px 9px 14px #09031599;transform:translateZ(-2px)}
.page{color:#493749;background:radial-gradient(circle at 80% 3%,#fffdf6,#fbf2e2 60%,#f2e5d1 100%)}
.right-page{position:absolute;inset:8px 7px 8px 10px;border-radius:3px 16px 14px 2px;padding:30px 30px 22px 37px;z-index:2;overflow:hidden;box-shadow:inset 14px 0 22px #6c516126,inset 1px 0 0 #fff,2px 2px 3px #1d0b2655;transform:translateZ(0)}
.right-page:before,.cover-inside:before{content:"";pointer-events:none;position:absolute;inset:14px;border:1px solid #b89b6c50;border-radius:3px 14px 12px 2px}.right-page .page-corner{position:absolute;color:#c3a77f;font-size:13px}.top-right{top:19px;right:20px}.bottom-right{bottom:19px;right:20px}
.page-label,.inside-kicker{font-size:9px;letter-spacing:1.8px;color:#a27c60;text-align:center;font-weight:700;margin:0 0 21px;line-height:1.6}.letter-heading{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:26px;line-height:1.2;text-align:center;color:#4c2964;margin:0 0 8px}.letter-heading em{font-family:'Great Vibes',cursive;font-size:42px;color:#a47a76;font-style:normal;font-weight:400;line-height:1.3}.letter-heading span{font-size:20px;color:#bc8098}.letter-rule{text-align:center;color:#b99564;font-size:14px;margin:0 0 10px;position:relative}.letter-rule:before,.letter-rule:after{content:"";display:inline-block;vertical-align:middle;width:50px;height:1px;background:#d1b68b;margin:0 12px}
.letter-copy{font-family:Georgia,'Times New Roman',serif;font-size:14px;line-height:1.57;margin:0 0 11px;color:#503f4b}.signature{font-family:Georgia,serif;text-align:right;font-style:italic;font-size:14px;margin-top:16px}.signature span{display:block}.signature strong{display:block;font-family:'Great Vibes',cursive;font-size:30px;color:#9b627f;font-style:normal;font-weight:400;margin-top:2px}
.front-cover{position:absolute;inset:0;z-index:8;transform-style:preserve-3d;transform-origin:2px center;transform:rotateY(0deg);transition:transform 1.65s cubic-bezier(.52,.08,.15,1)}
.scene.opening .front-cover,.scene.opened .front-cover{transform:rotateY(-177deg)}
.cover-face,.cover-inside{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.cover-face{background:radial-gradient(ellipse 85% 70% at 63% 38%,#60359e 0%,#402374 45%,#321c63 74%,#211143 100%);border-radius:10px 33px 30px 11px;border:2px solid #7253a2;box-shadow:inset 5px 0 9px #23104c,inset 0 0 15px #9b76cf38,2px 1px 0 #452973,11px 14px 28px #07041191;transform:translateZ(8px)}
.cover-face:before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.48' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.75'/%3E%3C/svg%3E")}
.cover-face:after{content:"";position:absolute;pointer-events:none;inset:0;background:linear-gradient(95deg,#05031570 0%,#ac83df28 4%,transparent 10%,transparent 87%,#efb6fe19 94%,#1b0a40a0 100%);border-radius:inherit}
.cover-border{position:absolute;inset:16px 16px 16px 21px;border:1px dotted #dab97caf;border-radius:5px 24px 22px 5px;box-shadow:0 0 0 5px #d2b57007,0 0 0 7px #c29e5d35;z-index:2;pointer-events:none}.cover-border:before,.cover-border:after{content:"✧ ✦ ✧";position:absolute;color:#d3b175b0;font-size:11px;letter-spacing:9px;left:50%;transform:translateX(-50%);white-space:nowrap}.cover-border:before{top:11px}.cover-border:after{bottom:11px}
.cover-corner{position:absolute;color:#d9b97b;font-size:22px;z-index:3;line-height:1;text-shadow:0 0 8px #dbb5754d}.cover-corner.tl{top:17px;left:23px}.cover-corner.tr{top:17px;right:16px;transform:scaleX(-1)}.cover-corner.bl{bottom:17px;left:23px;transform:scaleY(-1)}.cover-corner.br{bottom:17px;right:16px;transform:scale(-1)}
.cover-spine{position:absolute;left:13px;top:0;height:100%;width:15px;border-right:1px solid #b38bd059;box-shadow:2px 0 4px #0f042759;z-index:4}
.cover-topline{position:absolute;top:63px;width:100%;text-align:center;font-size:8px;letter-spacing:2.1px;color:#e2c28c;font-weight:700;z-index:3}.celestial{position:absolute;top:73px;left:50%;width:270px;height:270px;transform:translateX(-50%);opacity:.97;filter:drop-shadow(0 0 6px #dfb87757);z-index:3}.celestial svg{width:100%;height:100%}
.cover-caption{position:absolute;z-index:3;text-align:center;top:346px;width:100%;color:#d4b77b;font-size:9px;letter-spacing:2.5px;line-height:1.5}.cover-caption strong{display:block;color:#f4dca0;font-family:'Great Vibes',cursive;font-size:37px;font-weight:400;letter-spacing:0;line-height:1.25;text-shadow:0 0 12px #f8db9e44}.cover-quote{position:absolute;z-index:3;width:100%;text-align:center;bottom:51px;font-size:9px;font-family:Georgia,serif;font-style:italic;line-height:1.6;letter-spacing:.3px;color:#d6b986}.cover-footer{position:absolute;bottom:26px;z-index:3;text-align:center;font-size:7.2px;letter-spacing:1.9px;color:#d8b778;width:100%}
.strap{position:absolute;z-index:10;right:-6px;top:52%;width:167px;height:65px;transform:translateY(-50%);transform-origin:100% 50%;filter:drop-shadow(0 6px 5px #110924a0);transition:transform 1.05s cubic-bezier(.38,.04,.17,1),opacity .65s .4s;pointer-events:none}.strap-band{position:absolute;inset:0;background:linear-gradient(170deg,#7450ad 0%,#4d297e 27%,#4c267e 74%,#261345 100%);border:2px solid #9979ca;border-radius:12px 5px 9px 12px;box-shadow:inset 0 0 0 3px #32185b,inset 0 2px 7px #d4b0fc29}.strap-seams{position:absolute;inset:6px;border:1px dashed #cbad7794;border-radius:8px 3px 6px 8px}.strap:after{content:"";position:absolute;right:18px;top:8px;height:49px;width:1px;background:#e1cfa54d}
.metal-lock{position:absolute;width:75px;height:75px;top:-5px;left:-18px;display:grid;place-items:center;transition:transform .65s,filter .65s;filter:drop-shadow(0 5px 5px #0008)}.metal-lock svg{width:76px;height:76px;transform:rotate(-12deg);fill:#dfb76a;stroke:#fff5c4;stroke-width:1.4;filter:drop-shadow(0 0 4px #ecc68183)}.metal-lock svg path{stroke-linejoin:round}.metal-lock:before{content:"";position:absolute;inset:6px;background:linear-gradient(135deg,#fff5be,#cf9847 45%,#f3d78d 65%,#9b632d);clip-path:polygon(50% 0,66% 31%,100% 35%,75% 61%,83% 98%,50% 79%,17% 98%,25% 61%,0 35%,34% 31%);transform:rotate(-12deg);z-index:2}.keyhole{position:absolute;z-index:3;width:7px;height:12px;background:#3d2367;left:35px;top:28px;border-radius:50% 50% 2px 2px;clip-path:polygon(20% 0,80% 0,100% 48%,70% 57%,78% 100%,22% 100%,30% 57%,0 48%);box-shadow:0 0 3px #270c32}.lock-spark{position:absolute;font-size:38px;color:#fff9dc;z-index:5;opacity:0;text-shadow:0 0 16px #ffe59c;transition:opacity .3s,transform .5s;transform:scale(.2)}
.scene.unlocked .metal-lock{transform:rotate(-35deg) scale(1.14)}.scene.unlocked .lock-spark{opacity:1;transform:scale(1.45)}.scene.released .strap{transform:translate(176px,-154%) rotate(24deg) scale(.87);opacity:0}.scene.released .metal-lock{filter:drop-shadow(0 0 14px #ffe3b7)}
.cover-inside{transform:rotateY(180deg) translateZ(8px);background:radial-gradient(circle at 25% 12%,#fffcf6,#fff3e3 62%,#e9d5c6);border-radius:5px 18px 14px 5px;padding:35px 30px 34px;color:#473247;text-align:center;box-shadow:inset -17px 0 19px #94717d23,inset 0 0 4px #977c79}.inner-edge{position:absolute;right:0;top:0;width:13px;height:100%;background:linear-gradient(to left,#c7a9a0a1,transparent);pointer-events:none}
.inside-kicker{margin:0 auto 34px;max-width:250px;font-size:9px}.inner-moon{font-size:99px;line-height:1;color:#b89366;height:134px;position:relative;font-family:Georgia;text-shadow:0 0 8px #b08c7940}.inner-moon span{position:absolute;font-size:21px;top:31px;left:calc(50% + 22px)}.inner-rule{color:#b59572;font-size:12px;letter-spacing:6px;margin:-7px auto 14px}.cover-inside h2,.mobile-page h2:not(.letter-heading){font-family:'Marcellus',Georgia,serif;font-size:24px;font-weight:400;line-height:1.4;margin:0;color:#4e2a67}.cover-inside h2 em,.mobile-page h2 em{font-family:'Great Vibes',cursive;color:#a8757d;font-size:37px;font-weight:400;font-style:normal}.cover-inside p:not(.inside-kicker),.mobile-page p:not(.page-label){font:14px/1.65 Georgia,serif;max-width:260px;margin:12px auto;color:#554255}.cover-inside p.inner-dedication,.mobile-page .inner-dedication{font-style:italic;color:#9a6777}.inner-bottom{position:absolute;bottom:30px;left:0;width:100%;font-family:Georgia,serif;font-style:italic;font-size:13px}.inner-bottom strong{font-family:'Great Vibes',cursive;color:#a36382;font-size:27px;font-weight:400}
.unlock-panel{position:absolute;z-index:12;left:50%;top:606px;transform:translateX(-50%);width:min(525px,calc(100% - 20px));text-align:center;transition:opacity .5s,transform .7s;}.unlock-panel:before{content:"";position:absolute;inset:-16px -20px -12px;background:linear-gradient(180deg,#2316369c,#1e132da1);border:1px solid #a58c692c;border-radius:22px;box-shadow:0 15px 30px #05030f52;z-index:-1;backdrop-filter:blur(8px)}.unlock-icon{font-size:18px;color:#d5b477;line-height:1;margin-bottom:4px}.unlock-panel label{display:block;letter-spacing:2px;font-size:10px;color:#eed8af;font-weight:700;margin-bottom:13px}.input-row{display:flex;align-items:stretch;gap:9px}.input-shell{display:flex;align-items:center;flex:1;background:#110c24;border:1px solid #9b7d9d63;border-radius:10px;overflow:hidden;min-width:0}.input-shell>span{font-size:15px;padding-left:14px;color:#d9b77d}.input-shell input{width:100%;min-width:0;border:0;background:transparent;outline:0;color:#f6eafc;font-size:13px;padding:13px 8px}.input-shell input::placeholder{color:#9f8bae}.input-shell button{padding:7px 13px;color:#b8a6c8;border:0;background:transparent;font-size:16px}.unlock-button,.action.primary{background:linear-gradient(125deg,#f5de9e,#c7995b 50%,#e7cb8e);border:1px solid #e9cc8f;color:#301d34;box-shadow:0 5px 20px #cda15d2d}.unlock-button{font-weight:700;display:flex;align-items:center;gap:17px;padding:0 16px;border-radius:10px;font-size:12px}.unlock-button:hover,.action.primary:hover{filter:brightness(1.09)}.unlock-button:disabled{opacity:.65;cursor:wait}.status-text{min-height:16px;margin:10px 0 1px;font-size:11px;color:#ab9ab9;transition:color .3s}.status-text.error{color:#ffc2ba}.status-text.success{color:#f8df9a}.unlock-panel.shake{animation:shake .42s both}@keyframes shake{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 8px))}50%{transform:translateX(calc(-50% + 7px))}75%{transform:translateX(calc(-50% - 4px))}}.scene.opening .unlock-panel,.scene.opened .unlock-panel{opacity:0;pointer-events:none;transform:translate(-50%,15px)}
.open-actions{position:absolute;z-index:14;top:622px;left:50%;transform:translate(-50%,12px);opacity:0;pointer-events:none;display:flex;justify-content:center;gap:10px;width:100%;flex-wrap:wrap;transition:opacity .45s,transform .45s}.scene.opened .open-actions{opacity:1;transform:translate(-50%,0);pointer-events:auto}.action{font-size:11px;letter-spacing:.3px;font-weight:700;padding:13px 16px;border-radius:9px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.action.secondary{border:1px solid #b69b9a78;background:#251936c9;color:#e9d5db}.action:hover{transform:translateY(-2px)}.footer{text-align:center;margin-top:-6px;padding:12px 0 20px;color:#947fa5;font-size:9px;letter-spacing:2px}.footer span{color:#c8a674;padding:0 12px}.floating-dust{position:absolute;color:#dcc181;pointer-events:none;opacity:.7;animation:float 4s ease-in-out infinite alternate}.dust-1{left:18%;top:20%;font-size:27px}.dust-2{right:17%;top:42%;font-size:32px;animation-delay:1s}.dust-3{left:22%;top:69%;font-size:13px;animation-delay:1.8s}.dust-4{right:22%;top:7%;font-size:17px;animation-delay:2.2s}@keyframes float{to{transform:translateY(-13px) rotate(18deg);opacity:.35}}
.celebration{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:35}.mobile-reader{display:none}.hidden{display:none!important}
@media (max-width:800px){:root{--book-width:330px;--book-height:458px}.experience{padding:27px 10px 0}.intro{padding:0 5px}.intro h1{font-size:clamp(20px,4.8vw,27px)}.intro-subtitle{font-size:11px}.scene{height:690px}.book{top:66px}.book-shadow{top:538px;width:355px}.cover-topline{top:52px;font-size:7px;letter-spacing:1.8px}.celestial{top:61px;width:239px;height:239px}.cover-caption{top:300px}.cover-quote{bottom:49px}.cover-footer{bottom:23px}.strap{width:143px;height:58px;top:52%}.metal-lock{width:68px;height:68px;top:-5px}.metal-lock svg{width:69px;height:69px}.metal-lock:before{inset:6px}.keyhole{left:31px;top:27px}.unlock-panel{top:558px;width:min(520px,calc(100% - 24px))}.open-actions{top:628px}.right-page,.cover-inside{font-size:13px}.scene.opening .book,.scene.opened .book{transform:translateX(-50%) rotateZ(0)}.scene.opened .book{opacity:0;pointer-events:none;transition:transform 1.4s,opacity .4s .3s}.scene.opened .book-shadow{width:340px}.scene.opened{height:820px}.scene.opened .open-actions{top:728px}.mobile-reader{display:block;position:absolute;top:43px;left:50%;width:min(390px,calc(100vw - 30px));max-height:665px;transform:translate(-50%,10px) scale(.96);opacity:0;visibility:hidden;pointer-events:none;z-index:13;transition:opacity .5s,transform .5s,visibility .5s}.scene.opened .mobile-reader{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1);transition-delay:.25s}.mobile-paper{background:radial-gradient(circle at 15% 5%,#fffef7,#fbf0e0 70%,#eed9c6);border:10px solid #eee0cc;border-bottom-width:13px;border-radius:10px 23px 22px 10px;box-shadow:inset 5px 0 15px #b9a2a030,5px 7px 0 #4d2a77,14px 20px 25px #060310a0;position:relative;padding:25px 27px 19px;min-height:615px;max-height:665px;display:flex;flex-direction:column}.mobile-paper:before{content:"";position:absolute;inset:14px;border:1px solid #c1a17f8a;pointer-events:none;border-radius:4px 17px 15px 4px}.mobile-page{position:relative;text-align:center;color:#514055;overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:#c9a979 transparent;padding:13px 5px}.mobile-page .page-label{font-size:9px;letter-spacing:1.6px;margin:0 auto 16px}.mobile-page .inner-moon{font-size:86px;height:121px}.mobile-page h2:not(.letter-heading){margin-top:14px}.mobile-page p:not(.page-label){line-height:1.7;font-size:15px;max-width:280px;margin:15px auto}.mobile-page .letter-heading{font-size:23px;margin:0 0 12px}.mobile-page .letter-heading em{font-size:40px}.mobile-page#mobilePage2 p:not(.page-label){text-align:left;font-size:15px;line-height:1.62;margin:0 0 16px}.mobile-page#mobilePage2 .mobile-sign{text-align:right;font-style:italic}.mobile-sign strong{font-family:'Great Vibes',cursive;font-size:28px;font-weight:400;color:#a26c83}.reader-footer{border-top:1px solid #caaa827e;display:flex;justify-content:space-between;align-items:center;color:#8e745d;padding:12px 5px 0;font-size:11px;letter-spacing:1px}.next-page{background:#4d2c70;color:#fff4e2;border:0;border-radius:8px;padding:10px 15px;font-size:12px;font-weight:700}.next-page span{font-size:16px;margin-left:8px}.open-actions{gap:7px}.action{font-size:10px;padding:11px 12px}.footer{margin-top:0}
}
@media (max-width:420px){:root{--book-width:min(320px, calc(100vw - 52px));--book-height:446px}.experience{padding-top:24px}.eyebrow{font-size:8px;letter-spacing:1.8px;gap:8px}.eyebrow-line{width:18px}.intro h1{font-size:21px;max-width:340px;margin:auto}.intro-subtitle{font-size:10px}.scene{height:685px}.book{top:71px}.book-shadow{top:540px;width:300px}.cover-topline{top:52px;font-size:6.6px}.celestial{width:235px;height:235px;top:57px}.cover-caption{top:293px}.cover-quote{bottom:49px}.unlock-panel{top:558px}.unlock-panel:before{inset:-13px -6px -13px}.input-row{gap:6px}.input-shell input{font-size:12px;padding-left:6px}.input-shell>span{padding-left:10px}.unlock-button{padding:0 10px;gap:4px;font-size:11px}.unlock-panel label{font-size:9px;letter-spacing:1.2px}.scene.opened{height:818px}.scene.opened .open-actions{top:736px}.mobile-reader{top:43px}.mobile-paper{padding:19px 21px 17px;min-height:620px;max-height:665px}}
@media (max-width:350px){.scene.opened{height:840px}.scene.opened .open-actions{top:744px}.action{font-size:9px;padding:10px 9px}.mobile-paper{padding:16px 17px}.mobile-page#mobilePage2 p:not(.page-label){font-size:14px}.strap{width:128px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.front-cover,.strap,.book{transition-duration:.15s!important}}

/* Edición Yamile · JR — composición tipográfica de la carta */
.right-page { padding: 24px 25px 16px 30px; }
.right-page .page-label { margin-bottom: 10px; font-size: 8px; letter-spacing: 1.45px; }
.right-page .letter-heading { font-size: 22px; margin-bottom: 2px; }
.right-page .letter-heading em { font-size: 36px; }
.right-page .letter-rule { margin-bottom: 7px; }
.right-page .letter-copy { font-size: 13.1px; line-height: 1.47; margin-bottom: 9px; }
.right-page .birthday-opening { font-style: italic; color: #85566b; font-weight: bold; margin-bottom: 9px; }
.right-page .signature { margin-top: 2px; font-size: 12px; }
.right-page .signature strong { font-size: 29px; }
.cover-caption { letter-spacing: 1.75px; }
.cover-inside .inner-bottom { bottom: 24px; }
@media (max-width:800px) {
  .mobile-page#mobilePage2 p.birthday-opening { font-size: 17px; font-weight: bold; font-style: italic; color: #80536a; }
  .mobile-page#mobilePage2 p:not(.page-label) { line-height: 1.58; margin-bottom: 13px; }
  .mobile-page .letter-heading { margin-bottom: 7px; }
  .mobile-page .letter-rule { margin-bottom: 9px; }
}


/* ===== GALAXIA PREMIUM · YAMILE / JR · PERSONALIZACIÓN ===== */
:root { --gold:#f0ce8c; --night:#050715; --galaxy-x:0px; --galaxy-y:0px }
body { background:#030712; color:#f4ebff; }
.night {
  background-image: linear-gradient(180deg,rgba(4,7,19,.30) 0%,rgba(4,5,17,.16) 47%,rgba(5,5,17,.77) 100%),url('assets/galaxia.webp');
  background-position:center,center;
  background-size:cover,cover;
  transform:scale(1.045) translate(var(--galaxy-x),var(--galaxy-y));
  transition:transform 1s ease-out;
  filter:saturate(1.18) contrast(1.04);
}
.night:before {
  inset:-20%;background:radial-gradient(ellipse at 50% 40%,transparent 0%,rgba(1,4,17,.20) 55%,#01030b 100%),
  radial-gradient(ellipse at 18% 18%,rgba(37,33,104,.24),transparent 57%),
  radial-gradient(ellipse at 84% 60%,rgba(100,37,105,.15),transparent 58%);
}
.night:after {opacity:.24; mix-blend-mode:screen}
.galaxy-vignette {position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(2,3,15,.30),transparent 25%,transparent 70%,rgba(3,3,13,.59));}
.twinkle-field {z-index:-1}.twinkle {background:#eef0ff;box-shadow:0 0 12px 3px #a9b4ff90}.twinkle.big {background:#fff2d4;box-shadow:0 0 20px 4px #e2c3f199}
.experience {padding-top:31px}
.intro .eyebrow {font-size:10px;letter-spacing:3px;color:#f0d69f;text-shadow:0 1px 16px #02010f}
.intro h1 {font-size:clamp(22px,2.6vw,35px);text-shadow:0 3px 23px #020315}
.intro h1 em {color:#f1d2a4}
.intro-subtitle {color:#d9c9f5;font-size:12px;text-shadow:0 2px 8px #01030c}
.scene {height:690px}
.book-shadow {background:#03030cba;filter:blur(32px);}
.book-body {background:linear-gradient(90deg,#0b0f2c,#351c5b 10%,#28194e 70%,#141432 100%);border:1px solid #aa83cc}
.cover-face {
  background-image: linear-gradient(160deg,rgba(50,15,91,.50) 0%,rgba(18,13,61,.10) 43%,rgba(49,21,85,.56) 100%),url('assets/galaxia.webp');
  background-size:cover,auto 110%;background-position:center,61% 47%;
  border-color:#8d75c3;box-shadow:inset 5px 0 9px #130925, inset 0 0 31px #cc9cfa28,2px 1px 0 #493879,13px 17px 45px #0009;
}
.cover-face:before {opacity:.32;mix-blend-mode:overlay}
.cover-face:after {background:linear-gradient(96deg,#0b0421a8,#ac8de31b 9%,transparent 20%,transparent 80%,#0a0821a9 100%)}
.cover-border {border:1px solid #f5d59f9c;box-shadow:0 0 0 5px #c3a3fd0e,0 0 0 7px #e9c68766,inset 0 0 26px #0705279e}
.cover-topline {color:#f4d69f;text-shadow:0 2px 9px #000;font-size:8.1px}
.celestial {filter:drop-shadow(0 0 4px #f8cc73ce) drop-shadow(0 0 16px #c9adf482)}
.cover-caption {color:#fff0c8;text-shadow:0 2px 10px #08031d}
.cover-caption strong {font-size:42px;color:#ffe0b3;text-shadow:0 2px 6px #0a0637,0 0 20px #cbb0ed}
.cover-quote,.cover-footer {color:#f8dcaf;text-shadow:0 2px 10px #08051d}
.cover-spine {border-right:1px solid #a98cc986;box-shadow:2px 0 9px #060321}
.strap {pointer-events:none}
.metal-lock {pointer-events:auto;cursor:pointer;border:0;background:none;padding:0;display:grid;place-items:center;outline-offset:8px;z-index:15;touch-action:manipulation;}
.metal-lock:hover {filter:drop-shadow(0 2px 15px #ffdb89) drop-shadow(0 3px 9px #b579f7)}
.metal-lock:focus-visible {outline:2px solid #ffe1a0;outline-offset:6px;border-radius:50%}
.metal-lock svg,.metal-lock span {pointer-events:none}
.metal-lock:after {content:'';position:absolute;inset:-9px;z-index:2;border-radius:50%;border:1px solid transparent;transition:border-color .3s,transform .3s;pointer-events:none}
.metal-lock:hover:after {border-color:#edd6ac7d;transform:scale(1.06)}
.scene.unlocked .metal-lock {pointer-events:none}
.scene.opened .metal-lock {pointer-events:none}
/* Papel sideral: páginas oscuras y contrastadas */
.page {
  color:#f2e8fc;
  background-image:linear-gradient(125deg,rgba(9,13,38,.95) 0%,rgba(29,22,64,.90) 53%,rgba(18,12,42,.96) 100%),url('assets/galaxia.webp');
  background-size:cover,auto 100%;background-position:center,55% center;
}
.right-page {border:1px solid #e4c99659;box-shadow:inset 14px 0 24px #0502149e,inset 0 0 38px #6048b522,3px 3px 12px #0703157b}
.cover-inside {border:1px solid #d4bc9270}
.right-page:before,.cover-inside:before {border-color:#ccad784d}
.right-page .page-label,.inside-kicker {color:#e6c991}
.letter-heading,.cover-inside h2,.mobile-page h2:not(.letter-heading) {color:#fff0cc}
.letter-heading em,.cover-inside h2 em,.mobile-page h2 em {color:#edd7fb}
.letter-heading span {color:#efb2df}
.letter-rule,.right-page .page-corner,.inner-rule {color:#e5c78e}
.letter-rule:before,.letter-rule:after {background:#dfbf8299}
.letter-copy,.cover-inside p:not(.inside-kicker) {color:#f3e8f7;text-shadow:0 1px 2px #080519}
.right-page .birthday-opening {color:#f8cae5}
.signature,.inner-bottom {color:#f4e6fb}
.signature strong,.inner-bottom strong {color:#edc9fa}
.inner-moon {color:#f3d8a6;text-shadow:0 0 27px #b5aaff90}
/* Se elimina la barra fija de contraseña: solo queda una invitación discreta. */
.lock-instruction {
  position:absolute;left:50%;top:612px;transform:translateX(-50%);z-index:12;
  width:calc(100% - 28px);text-align:center;margin:0;
  font-size:11px;letter-spacing:1.3px;color:#e9d5fd;
  text-shadow:0 1px 7px #04031a,0 0 18px #1f123f;
  transition:opacity .35s;
}
.lock-instruction span {color:#ffdfa2;font-size:17px;margin:0 9px}
.scene.opened .lock-instruction,.scene.opening .lock-instruction,.scene.unlocked .lock-instruction {opacity:0;pointer-events:none}
.open-actions {top:627px}
.action.secondary {background:rgba(18,18,48,.82);border-color:#a894d17f;color:#f2ebff;backdrop-filter:blur(12px)}
.footer {color:#dac9e9;text-shadow:0 1px 11px #000;font-weight:600}
/* Modal: oculto completamente hasta pulsar el candado */
.secret-dialog {
  color:#f4eafe;background:transparent;border:0;padding:0;
  width:min(525px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 32px);
  overflow:visible;border-radius:22px;box-shadow:none;outline:none;
}
.secret-dialog:not([open]) {display:none}
.secret-dialog::backdrop {background:rgba(1,3,17,.79);backdrop-filter:blur(15px) saturate(1.1);-webkit-backdrop-filter:blur(15px)}
.dialog-surface {
  position:relative;text-align:center;overflow:hidden;padding:36px 30px 25px;
  border-radius:22px;border:1px solid #e8c78c96;
  background-image:radial-gradient(ellipse at 50% -20%,#b598eb45,transparent 65%),
      linear-gradient(165deg,rgba(19,18,57,.95),rgba(9,10,34,.97) 57%,rgba(35,18,68,.97)),
      url('assets/galaxia.webp');
  background-size:cover;box-shadow:0 32px 100px #000d,0 0 40px #ba87f33d,inset 0 0 45px #a891df12;
  animation:dialogArrive .35s cubic-bezier(.2,.8,.2,1) both;
}
.dialog-surface:before {content:'';position:absolute;inset:10px;pointer-events:none;border-radius:14px;border:1px solid #debb8142}
.dialog-surface:after {content:'';position:absolute;pointer-events:none;inset:0;opacity:.55;background:radial-gradient(circle at 3% 22%,#f4ddff 0 1px,transparent 2px),radial-gradient(circle at 92% 80%,#f4ddff 0 1px,transparent 2px),radial-gradient(circle at 79% 17%,#f4ddff 0 1px,transparent 2px),radial-gradient(circle at 18% 83%,#f4ddff 0 1px,transparent 2px)}
@keyframes dialogArrive {from{opacity:0;transform:translateY(24px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.dialog-close {position:absolute;right:19px;top:14px;border:1px solid #d4c2eb60;color:#f9e5e8;background:#ede4ff18;border-radius:50%;font-size:26px;line-height:1;width:33px;height:33px;z-index:4}
.dialog-close:hover {background:#eacbf13d}
.dialog-halo {width:77px;height:77px;margin:1px auto 19px;display:grid;place-items:center;border:1px solid #f2d29694;border-radius:50%;box-shadow:0 0 20px #daaefc66,inset 0 0 25px #f8d68e22;background:radial-gradient(circle,#c79cef3b,transparent);color:#ffe0ac;font-size:38px;}
.dialog-halo span {filter:drop-shadow(0 0 9px #ffd48d);animation:haloShine 2.3s ease-in-out infinite alternate}
@keyframes haloShine{to{filter:drop-shadow(0 0 18px #ffe5b9);transform:rotate(18deg) scale(1.08)}}
.dialog-eyebrow {letter-spacing:2.25px;color:#f4d5a6;font-size:9px;font-weight:700;margin:0 0 10px}
.dialog-surface h2 {font-family:'Marcellus',Georgia,serif;font-weight:400;line-height:1.22;font-size:clamp(23px,5vw,31px);margin:0 0 13px;color:#fff1d9;}
.dialog-surface h2 em {color:#d6b4f4;font-style:normal}
.dialog-description {font-family:Georgia,serif;font-size:13px;line-height:1.6;color:#d4c8e8;max-width:345px;margin:0 auto 23px;}
.secret-dialog .unlock-panel {
  position:relative;z-index:3;left:auto;top:auto;transform:none;width:100%;transition:none;
}
.secret-dialog .unlock-panel:before {content:none}
.secret-dialog .unlock-icon {display:none}
.secret-dialog .unlock-panel label {font-size:10px;letter-spacing:1.6px;color:#e8c995;margin-bottom:11px}
.secret-dialog .input-row {gap:10px}
.secret-dialog .input-shell {background:rgba(7,8,28,.74);border-color:#d0b4df80;}
.secret-dialog .input-shell input {color:#fff4f9;font-size:13px}
.secret-dialog .input-shell input::placeholder {color:#c1b5d0}
.secret-dialog .unlock-button {white-space:nowrap;font-size:12px}
.secret-dialog .status-text {font-size:11px;margin:13px 0 0;color:#bfb0db}
.secret-dialog .status-text.success {color:#ffe3ab}
.secret-dialog .status-text.error {color:#ffb9c4}
.secret-dialog .unlock-panel.shake {animation:dialogShake .42s both}
@keyframes dialogShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
.dialog-bottom {margin:27px 0 0;font-size:9px;letter-spacing:2px;color:#bba6d3}
.secret-dialog.verified .dialog-halo {box-shadow:0 0 45px #ffe5aa,inset 0 0 45px #eacf8b70}
/* lector galáctico en móviles */
@media (max-width:800px) {
  .scene {height:640px}
  .book-shadow {top:538px}
  .lock-instruction {top:552px;font-size:10px;letter-spacing:.8px;max-width:360px;line-height:1.8}
  .scene.opened {height:810px}
  .scene.opened .open-actions {top:728px}
  .mobile-paper {
    background-image:linear-gradient(120deg,rgba(11,15,42,.97),rgba(30,23,67,.94),rgba(12,15,39,.98)),url('assets/galaxia.webp');
    background-size:cover,auto 100%;border-color:#5b477f;
    box-shadow:inset 4px 0 16px #0007,5px 6px 0 #312457,14px 22px 35px #000b;
  }
  .mobile-paper:before {border-color:#d5b87c7d}
  .mobile-page {color:#efe5fb}
  .mobile-page .page-label {color:#e8ca99}
  .mobile-page p:not(.page-label) {color:#f2e5f4}
  .mobile-page .inner-dedication {color:#fad2e4 !important}
  .mobile-page#mobilePage2 p.birthday-opening {color:#ffd7e9}
  .mobile-page h2.letter-heading {color:#fff0ca}
  .mobile-sign strong {color:#f1cbec}
  .reader-footer {border-color:#c9a46c7d;color:#e9cfa6}
  .next-page {background:linear-gradient(100deg,#6f4994,#382e70);border:1px solid #b497d6}
}
@media (max-width:420px) {
  .scene {height:635px}
  .lock-instruction {top:551px;max-width:290px}
  .scene.opened {height:812px}
  .scene.opened .open-actions {top:730px}
  .dialog-surface {padding:29px 17px 23px}
  .dialog-eyebrow {letter-spacing:1.65px}
  .dialog-description {font-size:12.5px}
  .secret-dialog .input-row {flex-direction:column}
  .secret-dialog .input-shell input {padding:13px 8px}
  .secret-dialog .unlock-button {min-height:44px;justify-content:center}
  .dialog-bottom {font-size:8px;letter-spacing:1.2px}
}
@media (prefers-reduced-motion: reduce) {
  .night,.dialog-halo span,.dialog-surface{animation:none!important;transition:none!important}
}

/* Edición final: controles mínimos, sin contador ni botón de página anterior. */
.reader-footer{justify-content:center}
.open-actions{gap:0}
.open-actions .action{min-width:172px;justify-content:center}
.scene.opened .open-actions{z-index:20}
/* El audio se gestiona desde JS; no hay controles en la interfaz. */
#birthdayAudio{display:none}