/* Todo el diseño y sus animaciones viven aquí. No usa fuentes ni recursos externos. */
:root{color-scheme:light;--paper:#f8f2e9;--ink:#59453e;--wine:#8e3e4b;--muted:#8d796d;--line:#dccabd;--ease:cubic-bezier(.22,.72,.18,1)}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;min-width:280px;min-height:100svh;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;display:flex;flex-direction:column;overflow-x:hidden;background-image:radial-gradient(ellipse at 50% 56%,#f0ddcd66 0,transparent 48%),radial-gradient(ellipse at 94% 1%,#efd9d14a,transparent 36%)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
a{color:inherit}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--wine);outline-offset:6px}
button{touch-action:manipulation}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.paper-grain{position:fixed;inset:0;background:url('assets/papel.svg');opacity:.26;pointer-events:none;z-index:10}
.page-frame{position:fixed;inset:19px;border:1px solid #c9ab932f;pointer-events:none;z-index:0}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:40px 5.3%;position:relative;z-index:2}
.monogram{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--wine)}
.monogram .icon{width:21px;transform:rotate(-12deg)}
.monogram span{font:italic 23px Georgia,'Times New Roman',serif}
.music-toggle{display:flex;align-items:center;gap:10px;border:1px solid #c8af9e80;border-radius:50px;background:#fcf9f459;padding:11px 17px;color:#776157;font-size:11px;letter-spacing:.025em;min-height:44px;transition:background .25s}
.music-toggle:hover{background:#fffaf3}
.music-dot{width:5px;height:5px;border-radius:100%;background:#bca99b;margin-left:2px}
.music-toggle[aria-pressed=true]{color:var(--wine);border-color:#b2747e80}
.music-toggle[aria-pressed=true] .music-dot{background:var(--wine);box-shadow:0 0 0 3px #8e3e4b13}
.welcome{position:relative;isolation:isolate;width:100%;margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 24px 25px;overflow:clip}
.introduction{position:relative;z-index:2}
.eyebrow{font-size:9px;letter-spacing:.25em;font-weight:400;color:var(--muted);line-height:1.6}
.introduction .eyebrow{display:flex;align-items:center;justify-content:center;gap:15px;margin:0 0 23px}
.introduction .eyebrow span{height:1px;width:27px;background:#cbb6a8}
h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(46px,5.7vw,78px);letter-spacing:-.055em;line-height:1.08;margin:0}
h1 em{font-weight:400;font-size:.9em;color:var(--wine);letter-spacing:-.055em}
.title-heart{display:inline-block;font-size:.25em;letter-spacing:0;vertical-align:middle;margin-left:9px;transform:rotate(-9deg)}
.intro-copy{font-size:12px;line-height:1.9;font-weight:400;color:#877366;margin:23px 0 0;letter-spacing:.035em}
.envelope-area{position:relative;width:min(440px,80vw);aspect-ratio:1.57;perspective:1400px;margin-top:69px;margin-bottom:34px;z-index:3}
.envelope-halo{position:absolute;inset:-65% -45%;border:1px solid #cdb29820;border-radius:50%;transform:rotate(-13deg);pointer-events:none;z-index:-2}
.envelope-halo:after{content:'';position:absolute;inset:9%;border:1px solid #cdb2981c;border-radius:50%}
.envelope-shadow{position:absolute;bottom:-27px;left:5%;width:90%;height:31px;background:#845d4726;border-radius:50%;filter:blur(17px);transition:transform 1s,opacity 1s;pointer-events:none}
.envelope{display:block;position:relative;width:100%;height:100%;border:0;padding:0;background:none;transform:rotate(-4deg);transition:transform .7s var(--ease);outline-offset:20px!important}
.envelope:hover{transform:rotate(-2deg) translateY(-5px)}
.envelope:disabled{cursor:default}
.envelope-back{position:absolute;inset:0;border-radius:5px;background:linear-gradient(150deg,#e6cdb0,#f1dfc5 70%);box-shadow:0 7px 17px #6440250f,0 24px 45px -16px #7952353d}
.envelope-lining{position:absolute;inset:0;background:linear-gradient(125deg,#cfb196,#ead7bd);clip-path:polygon(0 0,50% 48%,100% 0);z-index:1}
.envelope-front{position:absolute;inset:0;z-index:4;border-radius:3px 3px 5px 5px;overflow:hidden;clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%);background:linear-gradient(145deg,#f7e9d1,#efe0c6 68%,#f2e4cd)}
.envelope-front:before,.envelope-front:after{content:'';position:absolute;inset:0;pointer-events:none}
.envelope-front:before{background:linear-gradient(30deg,#ecdbc0,#faedd6);clip-path:polygon(0 0,52% 51%,0 100%);filter:drop-shadow(1px 0 1px #baa088)}
.envelope-front:after{background:linear-gradient(-35deg,#edddc2,#f9ecd4);clip-path:polygon(100% 0,48% 51%,100% 100%)}
.address{position:absolute;bottom:44px;left:0;width:100%;font:italic 30px Georgia,'Times New Roman',serif;z-index:1;color:#8d725c;transform:rotate(-2deg)}
.envelope-note{position:absolute;bottom:27px;left:0;width:100%;font-size:7px;letter-spacing:.23em;text-transform:uppercase;color:#a38a73;z-index:1}
.envelope-flap{position:absolute;inset:0;z-index:6;background:linear-gradient(155deg,#fbefd9,#f0dfc3 79%);clip-path:polygon(0 0,100% 0,50% 60%);transform-origin:50% 0%;transform:rotateX(0deg);transition:transform .9s var(--ease),filter .9s;filter:drop-shadow(0 2px 2px #8a6a4540);backface-visibility:visible}
.wax-seal{position:absolute;top:43%;left:50%;width:67px;height:67px;margin-left:-33.5px;z-index:7;display:grid;place-items:center;border-radius:48% 52% 46% 51% / 53% 47% 54% 46%;background:radial-gradient(circle at 35% 25%,#c56d79,#a64c5d 50%,#863748);box-shadow:inset 0 0 0 2px #b9697380,inset 1px 2px 2px #eda7a488,2px 4px 6px #78433155;transition:transform .35s,opacity .3s}
.wax-ring{width:53px;height:53px;border:1px solid #7d33464d;border-radius:50%;box-shadow:inset 1px 1px 3px #782c4160,1px 1px 1px #da8e9170;display:grid;place-items:center}
.seal-heart{width:26px;height:26px;fill:#e4a8a4;stroke:#f4c5b8;stroke-width:.6;filter:drop-shadow(0 1px 1px #692235);transform:rotate(2deg)}
.letter-peek{position:absolute;display:block;width:88%;left:6%;bottom:5%;height:90%;background:#fffdfa;z-index:2;overflow:hidden;box-shadow:0 0 5px #7b614b33;transition:transform .85s var(--ease)}
.letter-peek img{display:block;width:100%;height:auto}
.envelope-area[data-state=opening] .envelope,.envelope-area[data-state=reading] .envelope,.envelope-area[data-state=closing] .envelope{transform:rotate(0deg)}
.envelope-area[data-state=opening] .wax-seal,.envelope-area[data-state=reading] .wax-seal,.envelope-area[data-state=closing] .wax-seal{transform:scale(1.15);opacity:0}
.envelope-area[data-state=opening] .envelope-flap,.envelope-area[data-state=reading] .envelope-flap,.envelope-area[data-state=closing] .envelope-flap{transform:rotateX(180deg);filter:brightness(.98);transition-delay:.12s}
.envelope-area.flap-behind .envelope-flap{z-index:0}
.envelope-area.letter-out .letter-peek{transform:translateY(-66%) rotate(-3deg);height:130%;z-index:3}
.envelope-area.letter-out .envelope-shadow{transform:scale(.9);opacity:.65}
.open-letter{border:0;border-bottom:1px solid #a1616659;padding:12px 0;background:transparent;display:flex;align-items:center;gap:21px;font-size:12px;color:var(--wine);letter-spacing:.06em;position:relative;z-index:4}
.open-letter .icon{width:18px;transition:transform .3s}
.open-letter:hover .icon{transform:translateX(4px)}
.open-letter:disabled{opacity:.55}
.envelope-hint{margin:14px 0 0;font-size:10px;line-height:1.7;color:#998375;letter-spacing:.035em}
.botanical{position:absolute;width:180px;opacity:.5;pointer-events:none;z-index:-1}
.botanical-left{left:9%;top:43%;transform:rotate(-24deg)}
.botanical-right{right:7%;top:9%;width:146px;transform:rotate(151deg);opacity:.28}
.site-footer{display:flex;justify-content:center;align-items:center;gap:14px;padding:28px 24px 34px;color:#9c8677;position:relative;z-index:1}
.site-footer p{font:italic 13px Georgia,'Times New Roman',serif;margin:0}
.site-footer .icon{width:11px;height:11px;color:#a5666e}
.site-footer>span{height:1px;width:35px;background:#d6c3b14f}
.floating-hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;color:#b17a7c}
.floating-hearts span{position:absolute;bottom:-40px;animation:heart-drift 20s linear infinite;font:24px Georgia,serif;opacity:0}
.floating-hearts span:nth-child(1){left:15%;animation-delay:0s}
.floating-hearts span:nth-child(2){left:80%;animation-delay:5s;font-size:17px}
.floating-hearts span:nth-child(3){left:29%;animation-delay:12s;font-size:14px}
.floating-hearts span:nth-child(4){left:91%;animation-delay:16s;font-size:22px}
.floating-hearts span:nth-child(5){left:6%;animation-delay:8s;font-size:13px}
@keyframes heart-drift{0%{transform:translate(0,0) rotate(-8deg);opacity:0}15%,70%{opacity:.21}100%{transform:translate(28px,-100vh) rotate(18deg);opacity:0}}
.letter-dialog{position:fixed;inset:0;margin:auto;padding:0;width:min(980px,calc(100% - 64px));max-width:none;height:min(1000px,92dvh);max-height:92dvh;border:1px solid #dcc5b4;border-radius:10px;background:#f8f3eb;color:var(--ink);overflow:hidden;box-shadow:0 30px 100px #33241e44;opacity:0;transition:opacity .3s}
.letter-dialog.visible{opacity:1}
.letter-dialog::backdrop{background:#40352d85;backdrop-filter:blur(6px)}
.reader-shell{display:flex;flex-direction:column;height:100%;min-height:0}
.reader-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:25px 32px 18px;border-bottom:1px solid #d8c4b552;flex-shrink:0}
.reader-header .eyebrow{margin:0 0 6px;font-size:8px}
.reader-header-actions{display:flex;align-items:center;gap:7px}
.reader-music{border-color:transparent!important}
.reader-music[aria-pressed=true]{color:var(--wine);background:#ead9cd66}
h2{font:italic 29px Georgia,'Times New Roman',serif;margin:0;letter-spacing:-.025em;color:var(--wine)}
h2 span{font:22px Georgia,serif;padding-left:11px}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #d9c5b7;border-radius:50%;background:transparent;flex-shrink:0}
.icon-button:hover{background:#efe4d9}
.reader-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 32px;flex-shrink:0}
.reader-tools p{font:italic 13px Georgia,serif;color:#8a7566;margin:0}
.zoom-controls{display:flex;gap:1px;align-items:center}
.zoom-controls button{min-width:38px;min-height:40px;border:0;background:transparent;color:var(--wine);font-size:21px;border-radius:5px}
.zoom-controls button:hover{background:#ead9cd66}
.zoom-controls button:disabled{color:#c9b6a5}
.zoom-controls #zoom-reset{font-size:11px;width:48px;font-variant-numeric:tabular-nums}
.letter-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:#e9dfd4;padding:24px;scrollbar-color:#bda696 transparent;scrollbar-width:thin;touch-action:pan-x pan-y pinch-zoom}
.letter-canvas{width:100%;min-width:100%;margin:0 auto;--zoom:1}
.letter-image{display:block;width:100%;height:auto;max-width:760px;margin:0 auto;box-shadow:0 2px 13px #5d483225;background:white}
.reader-footer{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 30px;background:#f8f3eb;border-top:1px solid #d8c4b552}
.reader-footer a,.reader-footer button{display:flex;align-items:center;gap:8px;text-decoration:none;border:0;background:none;font-size:11px;padding:5px 0;min-height:34px}
.reader-footer a{color:#826f60}
.reader-footer button{color:var(--wine)}
.reader-footer button span{font-size:22px;padding-left:4px}
.reader-footer .icon{width:16px;height:16px}
.flying-letter{position:fixed;z-index:9999;pointer-events:none;object-fit:fill;background:#fff;box-shadow:0 10px 35px #4f362e40;transform-origin:0 0}
.screen-reader-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);max-width:90%;width:max-content;background:#6a4644;color:#fff9f0;padding:13px 20px;font-size:12px;line-height:1.5;border-radius:8px;z-index:10000;box-shadow:0 4px 20px #3b1f2033}
.image-error{padding:30px;font-size:14px;line-height:1.7;text-align:center}
body.reading{overflow:hidden}
@media(min-width:1440px){.welcome{padding-top:24px;padding-bottom:36px}.envelope-area{margin-top:78px;margin-bottom:42px}.site-header{padding-top:46px}.botanical-left{left:17%}.botanical-right{right:16%}}
@media(max-width:700px){.page-frame{inset:10px}.site-header{padding:26px 28px 30px}.monogram span{font-size:21px}.music-toggle{padding:9px 12px;font-size:10px;gap:8px}.music-toggle .icon{width:16px}.welcome{padding:11px 22px 22px}.introduction .eyebrow{font-size:7px;letter-spacing:.21em;gap:10px;margin-bottom:22px}.introduction .eyebrow span{width:18px}h1{font-size:clamp(39px,8.7vw,59px)}h1 em{font-size:.94em}.title-heart{font-size:.25em;margin-left:5px}.intro-copy{font-size:11px;line-height:1.9;margin-top:20px;letter-spacing:.01em}.envelope-area{width:min(400px,80vw);margin-top:65px;margin-bottom:26px}.wax-seal{width:57px;height:57px;margin-left:-28.5px}.wax-ring{width:45px;height:45px}.seal-heart{width:23px;height:23px}.address{font-size:25px;bottom:35px}.envelope-note{font-size:6px;bottom:21px}.botanical-left{width:100px;left:-24px;top:46%;opacity:.28}.botanical-right{width:90px;right:-17px;top:17%;opacity:.23}.envelope-halo{inset:-48% -23%}.envelope-hint{font-size:9px;margin-top:12px}.open-letter{font-size:11px;gap:17px}.site-footer{padding:25px 24px 30px;gap:11px}.site-footer p{font-size:12px}.site-footer>span{width:23px}.letter-dialog{width:calc(100% - 20px);height:94dvh;max-height:94dvh;border-radius:8px}.reader-header{padding:18px 16px 14px}.reader-header .eyebrow{font-size:6px;letter-spacing:.18em}h2{font-size:25px}.reader-tools{padding:5px 14px}.reader-tools p{font-size:11px}.letter-scroll{padding:10px}.reader-footer{padding:10px 14px}.reader-footer a,.reader-footer button{font-size:10px;min-height:38px}.reader-footer .icon{width:14px}}
@media(max-width:360px){.site-header{padding-left:24px;padding-right:24px}.monogram{gap:7px}.music-toggle{font-size:9px}.introduction .eyebrow{font-size:6px}h1{font-size:35px}.intro-copy{font-size:10px}.envelope-hint{font-size:8px}.reader-tools p{max-width:135px}.reader-footer{gap:4px}.reader-footer a,.reader-footer button{font-size:9px}}
@media(max-height:730px) and (min-width:701px){.site-header{padding-top:27px;padding-bottom:24px}h1{font-size:57px}.introduction .eyebrow{margin-bottom:15px}.intro-copy{margin-top:16px}.envelope-area{width:340px;margin-top:49px;margin-bottom:20px}.site-footer{padding-top:17px;padding-bottom:25px}.wax-seal{width:58px;height:58px;margin-left:-29px}.wax-ring{width:47px;height:47px}.address{font-size:26px;bottom:36px}.envelope-note{bottom:21px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.floating-hearts{display:none}}