@font-face{font-family:Instrument Serif;src:url('assets/fonts/e41d5df559864f9e-s.p.380d09ea.woff2') format('woff2');font-display:swap}
@font-face{font-family:Fragment Mono;src:url('assets/fonts/a9a434ecf764164f-s.p.73974b4a.woff2') format('woff2');font-display:swap}
@font-face{font-family:Libre Baskerville;src:url('assets/fonts/38df7484fe560b25-s.p.60f15535.woff2') format('woff2');font-display:swap}
@font-face{font-family:OldNewspaper;src:url('assets/fonts/OldNewspaperTypes.ttf') format('truetype');font-display:swap}
:root{--ink:#39362b;--muted:#8f8a72;--paper:#fffdf5;--pink:#d8b94f;--butter:#f2dda0;--cream:#fff8df;--sage:#a8ad87}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink)}
body{font-family:"Instrument Serif",serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#noise{position:fixed;inset:0;width:100%;height:100%;z-index:99;pointer-events:none;opacity:.04;mix-blend-mode:multiply;image-rendering:pixelated}
#orbit-view{position:fixed;inset:0;overflow:hidden;perspective:1200px;cursor:default;user-select:none}
.corner-action{position:absolute;right:2rem;top:2rem;z-index:30}
.corner-action,.footer,.discover{font-family:"Fragment Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.corner-action::before,.footer>*::before,.masthead::before{content:"";position:absolute;inset:-20px -28px;background:rgba(255,253,245,.94);border-radius:50%;filter:blur(24px);z-index:-1}
.masthead{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;z-index:5;animation:appear .3s ease both}
.masthead::before{inset:auto;left:50%;top:50%;width:440px;height:180px;transform:translate(-50%,-50%);filter:blur(36px)}
.masthead h1{font-family:OldNewspaper,serif;font-size:3rem;font-weight:400;line-height:1;letter-spacing:-.025em;min-height:48px}
.masthead h1 i{display:inline-block;width:3px;height:.85em;margin-left:2px;vertical-align:middle;background:var(--pink);animation:blinkTitle 1.2s ease-in-out infinite}
.masthead p{margin-top:16px;font-family:"Libre Baskerville",serif;font-size:12px;color:var(--muted)}
.world{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d}
.orbit{position:relative;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.letter{position:absolute;width:256px;height:186px;margin:-93px 0 0 -128px;padding:28px;transform-style:preserve-3d;pointer-events:auto;cursor:pointer;will-change:transform,opacity}
.envelope{display:block;width:100%;height:100%;object-fit:cover;overflow:hidden;background:#faf3d7;border:1px solid #ded3ae;box-shadow:2px 4px 16px rgba(83,70,31,.14);animation:idleFloat var(--float-time) var(--float-delay) ease-in-out infinite;transition:scale .25s,box-shadow .25s;filter:sepia(.16) saturate(.82) brightness(1.04) hue-rotate(350deg)}
.letter:nth-child(2n) .envelope{filter:sepia(.25) saturate(.72) brightness(1.08) hue-rotate(4deg)}.letter:nth-child(3n) .envelope{filter:sepia(.12) saturate(.68) brightness(1.06) hue-rotate(22deg)}
.letter:hover .envelope,.letter:focus-visible .envelope{scale:1.06;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 70%,transparent),0 0 32px 8px color-mix(in srgb,var(--accent) 45%,transparent),2px 6px 24px rgba(0,0,0,.18)}
.footer{position:absolute;left:2rem;right:2rem;bottom:2rem;z-index:20;display:flex;align-items:center;animation:footerIn .3s ease both}
.footer>*{position:relative}.sound{display:flex;align-items:center;gap:10px}.play{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(26,26,26,.2);border-radius:50%}.play svg{width:8px;height:10px;fill:currentColor}.pause-icon{display:none}.sound.on .play-icon{display:none}.sound.on .pause-icon{display:block}.equalizer{display:flex;height:10px;align-items:flex-end;gap:2px}.equalizer i{width:2px;height:100%;border-radius:999px;background:rgba(26,26,26,.4);transform:scaleY(.2);transform-origin:bottom}.sound.on .equalizer i{animation:eqBar .65s ease-in-out infinite alternate}.sound.on .equalizer i:nth-child(2){animation-delay:.12s}.sound.on .equalizer i:nth-child(3){animation-delay:.24s}.sound.on .equalizer i:nth-child(4){animation-delay:.36s}.instructions{position:absolute!important;left:50%;transform:translateX(-50%);white-space:nowrap}.closed{margin-left:auto}
.tooltip{position:fixed;z-index:120;pointer-events:none;transform:translate(-50%,-50%);width:220px;height:286px;filter:drop-shadow(2px 8px 24px rgba(0,0,0,.28));opacity:0;transition:opacity .15s,scale .15s;scale:.9}.tooltip img{width:100%;height:100%;object-fit:contain}.tooltip.show{opacity:1;scale:1}
.letter-view{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:#fffdf5;overflow:hidden;opacity:0;transition:opacity .3s ease}.letter-view[hidden]{display:none}.letter-view.open{opacity:1}.letter-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.08) saturate(.88) brightness(1.03)}.letter-fade{position:absolute;left:0;right:0;bottom:0;height:54vh;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,rgba(255,250,231,.48) 56%,rgba(255,249,226,.94) 86%,#fff9e6 100%)}
.letter-nav,.letter-home{position:absolute;top:40px;z-index:4;font-family:"Fragment Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:3px;box-shadow:0 0 10px 6px var(--frosted);color:var(--letter-color);background:var(--frosted);transition:opacity .2s}.letter-nav:hover,.letter-home:hover{opacity:.75}.letter-nav.previous{left:48px}.letter-nav.next{right:48px}.letter-home{left:50%;width:22px;height:22px;padding:0;display:grid;place-items:center;transform:translateX(-50%)}.mobile-label{display:none}
.letter-sheet{position:relative;width:min(860px,92vw);display:flex;gap:40px;align-items:flex-start;padding:0 48px;opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s cubic-bezier(.25,.1,.25,1)}.letter-view.open .letter-sheet{opacity:1;transform:none}.letter-content{width:100%;max-height:70vh;overflow-y:auto;padding:8px 0 48px 32px;margin-left:-32px;font:18px/1.7 OldNewspaper,serif;color:var(--letter-color);white-space:pre-wrap;scrollbar-width:none}.letter-content::-webkit-scrollbar{display:none}.letter-lines{background:var(--frosted);border-radius:3px;padding:1px 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone;box-shadow:0 0 10px 6px var(--frosted)}.letter-lines del{opacity:.5;color:var(--accent-color);text-decoration:line-through}
.letter-meta{position:absolute;left:16px;bottom:32px;z-index:3;display:flex;flex-direction:column;gap:4px;font-family:"Fragment Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#555}.letter-keepsake{position:absolute;right:32px;bottom:32px;z-index:3;width:150px;height:98px;box-shadow:2px 4px 16px rgba(0,0,0,.12)}.letter-envelope-thumb{width:100%;height:100%;object-fit:cover}.letter-preview{position:absolute;right:0;bottom:calc(100% + 12px);width:220px;height:286px;object-fit:contain;filter:drop-shadow(2px 8px 24px rgba(0,0,0,.28));opacity:0;transform:translateY(8px) scale(.96);transition:opacity .2s,transform .2s}.letter-keepsake:hover .letter-preview{opacity:1;transform:none}.letter-view.closing{opacity:0}.letter-view.closing .letter-sheet{opacity:0;transform:translateY(20px)}
.letter-audio{position:absolute;left:50%;bottom:32px;z-index:3;width:min(480px,34vw);min-width:360px;display:flex;align-items:flex-end;gap:20px;transform:translateX(-50%);font-family:"Fragment Mono",monospace;color:#555}.letter-audio-button{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border:1px solid color-mix(in srgb,var(--accent-color) 25%,transparent);border-radius:50%;color:var(--accent-color)}.letter-audio-button svg{grid-area:1/1;width:10px;height:12px;fill:currentColor}.audio-pause-icon{display:none}.letter-audio.playing .audio-play-icon{display:none}.letter-audio.playing .audio-pause-icon{display:block}.letter-audio-details{display:flex;flex:1;min-width:0;flex-direction:column;gap:7px;font-size:9px;letter-spacing:.1em}.letter-audio-details>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.letter-audio-progress{position:relative;width:100%;height:3px;border-radius:999px;background:color-mix(in srgb,var(--accent-color) 30%,transparent)}.letter-audio-progress i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--accent-color)}.letter-audio-time{display:flex;justify-content:space-between}
.modal{position:fixed;inset:0;z-index:110;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(65,61,39,.24);animation:appear .2s ease}.modal[hidden]{display:none}.scroll-paper{width:min(340px,72vw);aspect-ratio:1000/1280;padding:17% 14% 15%;color:#514923;background:#f5e8b8;clip-path:polygon(4% 0,96% 2%,100% 8%,97% 18%,100% 30%,97% 43%,100% 58%,97% 72%,100% 88%,94% 100%,5% 98%,0 91%,3% 76%,0 61%,3% 45%,0 28%,3% 13%);filter:drop-shadow(2px 8px 24px rgba(63,55,24,.24));background-image:radial-gradient(ellipse at 20% 30%,rgba(214,178,56,.16),transparent 34%),linear-gradient(90deg,rgba(255,255,255,.3),transparent 20%,rgba(125,119,71,.08) 80%,transparent)}
.about-text{font:14px/1.35 OldNewspaper,serif;white-space:pre-wrap}.about-text::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:middle;background:currentColor;animation:blink 1s step-end infinite}.discover{margin-top:24px;padding:8px 14px;color:#4a2f1c;background:rgba(255,255,255,.92);border-radius:999px;box-shadow:0 3px 12px rgba(0,0,0,.1)}
.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}
/* El texto queda por delante del recuerdo y del sobre en la carta abierta. */
.letter-sheet{z-index:3}.letter-keepsake{z-index:2}
.letter-background{transition:opacity .2s ease,transform .35s ease}
.letter-keepsake{right:12%;bottom:15%;width:220px;height:144px;opacity:.82}
.letter-view.changing .letter-background{opacity:.45;transform:scale(1.025)}
.letter-view.changing .letter-sheet{opacity:0;transform:translateX(var(--change-x,18px)) translateY(8px)}
.letter-view.changing .letter-meta,.letter-view.changing .letter-audio,.letter-view.changing .letter-keepsake{opacity:0;transition:opacity .16s ease}
@keyframes blink{50%{opacity:0}}@keyframes blinkTitle{0%,47%{opacity:.9}50%,97%{opacity:.05}to{opacity:.9}}@keyframes idleFloat{50%{transform:translateY(-6px)}}@keyframes appear{from{opacity:0}to{opacity:1}}@keyframes footerIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes eqBar{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@media(max-width:639px){.corner-action{right:50%;transform:translateX(50%)}.masthead h1{font-size:3rem}.footer{bottom:1.5rem;flex-direction:column;gap:12px}.closed{order:-1;margin:0}.instructions{display:none}.sound{order:2}.desktop-label{display:none}.mobile-label{display:inline}.letter-nav.previous{left:16px}.letter-nav.next{right:16px}.letter-sheet{padding:0 24px}.letter-content{font-size:16px}.letter-meta{bottom:96px}.letter-keepsake{right:12px;bottom:96px}.letter-audio{left:16px;right:16px;bottom:16px;width:auto;min-width:0;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}