/* Lectura, recuerdos y ritmo de la película. */
.word-ink{display:inline-block;animation:ink-arrive .65s both;animation-delay:var(--word-delay)}
@keyframes ink-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.words.fading-out{opacity:0;transition:opacity .6s ease}
.paused .word-ink,.reading .word-ink{animation:none;opacity:1;transform:none}
.paused .words:not(.final-frame){opacity:1}
.paused .words .line,.paused .words .overline,.paused .words .under-line{opacity:1;animation:none}
.flow-button{position:fixed;z-index:24;left:4.4%;top:77px;display:flex;align-items:center;gap:10px;min-height:44px;color:#b893a8;font-family:'Reenie Beanie',cursive;font-size:23px;padding:4px 0;touch-action:manipulation}
.flow-button svg{width:28px;height:20px;stroke:currentColor;stroke-width:1;fill:none}
.flow-button[aria-pressed=true]{color:#e6b9ca}.flow-button[aria-pressed=false] svg{opacity:.45}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:1px solid #e5baca;outline-offset:5px}
[aria-busy=true]{cursor:progress}
.cinema-mode .letterbox{border:0}.cinema-mode .screen{background:#000}.cinema-mode .entry{background:#030305}
.cinema-mode .entry-coordinate{opacity:.25}.cinema-mode .entry-center{transform:scale(1.04);transition:transform .5s}
.photo-background{filter:none;opacity:.12;object-fit:cover;scale:1.06}
.memory-frame{will-change:auto;gap:3vw}
.memory-frame>img:first-child{border:7px solid #ead8c5;outline:1px solid #af889160;outline-offset:0;box-shadow:0 16px 40px #0008}
.memory-inscription{position:absolute;bottom:-38px;left:0;right:0;font-family:'Reenie Beanie',cursive;font-size:27px;line-height:1;text-align:center;color:#e0b9c5;rotate:-2deg}
.memory-frame:before{content:'✦';position:absolute;top:-17px;left:13%;z-index:2;font-size:23px;color:#d6b88f;rotate:-15deg}
.memory-frame:after{content:'';position:absolute;top:-12px;left:12%;height:25px;width:64px;background:#e0c6a222;rotate:-12deg;border:1px solid #ead9b910;pointer-events:none}
.memory-frame .memory-echo{border:5px solid #cab5a0;filter:brightness(.8);max-width:23%}

.letter{width:900px;padding:0;background:#151018;color:#eddfd8;border:1px solid #ad7e923b;border-radius:2px;box-shadow:0 22px 80px #0009;scrollbar-width:thin;scrollbar-color:#866276 #151018;overscroll-behavior:contain}
.letter::before{display:none}
.reader-tools{z-index:30;backdrop-filter:none;background:#1b1420f2;box-shadow:0 2px 12px #0004}
.reader-tools .icon-button{width:40px;height:40px}
.letter-portrait{height:360px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 55% 30%,#503542 0,transparent 72%),#151018;border-bottom:1px solid #b88c9c20;isolation:isolate}
.letter-portrait:after{display:none}
.letter-photo{margin:0;padding:7px 7px 28px;position:absolute;background:#e0cbb5;box-shadow:0 15px 30px #0005;z-index:2}
.letter-photo.primary{width:42%;left:13%;top:33px;rotate:-7deg}
.letter-photo.secondary{width:28%;right:12%;top:104px;rotate:9deg;z-index:3}
.letter-photo:before{content:'';position:absolute;top:-10px;left:36%;width:64px;height:23px;background:#d9c9aa70;rotate:-5deg;z-index:2}
.letter-portrait .letter-photo img{position:static;display:block;width:100%;height:210px;object-fit:contain;filter:none;opacity:1;background:#c8b6a4}
.letter-portrait .secondary img{height:155px}
.letter-photo figcaption{position:absolute;bottom:5px;left:9px;right:7px;font-family:'Reenie Beanie',cursive;font-size:22px;line-height:1;color:#533642;text-align:center}
.letter-portrait>.letter-cover-note{position:absolute;bottom:13px;left:12%;font-family:'Reenie Beanie',cursive;font-size:33px;line-height:.95;color:#e9bdc9;rotate:-3deg;z-index:4}
.letter-thread{position:absolute;inset:auto 0 -5px;width:100%;height:95px;stroke:#dca59d50;stroke-width:.7;fill:none;z-index:1}
.letter-body{position:relative;margin:0;padding:47px 75px 50px;background:linear-gradient(90deg,transparent 18px,#c997ac10 19px,transparent 20px)}
.letter-body>.letter-cover-note{position:static;display:block;font-family:'Reenie Beanie',cursive;font-size:38px;line-height:1;color:#d5aabd;rotate:-2deg;margin:0 0 32px}
.letter-date{font-size:7px;letter-spacing:.18em;color:#b78c9f}
.letter h1{font-family:'Reenie Beanie',cursive;font-style:normal;font-size:78px;line-height:1;margin:25px 0 39px;color:#e7b9c9;rotate:-4deg}
.letter #letterText p{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:22px;line-height:1.55;letter-spacing:.005em;margin:0 0 25px;text-wrap:pretty}
.letter #letterText p:first-child{font-size:25px;line-height:1.45;color:#f2ded9}
.letter #letterText p:first-child:first-letter{float:left;font-size:65px;line-height:.8;padding:9px 9px 0 0;color:#dcacb8}
.letter-quote{margin:46px 0 45px;padding:25px 18px 24px 23px;border-top:1px solid #c694aa35;border-bottom:1px solid #c694aa35;font-family:'Reenie Beanie',cursive;font-size:38px;line-height:1.02;color:#e2b6c5;rotate:-2deg;text-wrap:balance}
.letter-cinema{margin:45px -13px 38px;padding:0}
.cinema-kicker{display:block;font-size:7px;letter-spacing:.2em;color:#ba94a4;margin:0 0 19px 10px}
.letter-scene{position:relative;margin:0;padding:8px 8px 48px;background:#d9c4b0;rotate:-1deg;box-shadow:0 9px 28px #0004}
.letter-scene:before,.letter-scene:after{content:'';position:absolute;z-index:2;top:-10px;width:60px;height:22px;background:#dbc9ab85;rotate:-7deg}
.letter-scene:before{left:8%}.letter-scene:after{right:8%;rotate:9deg}
.letter-scene>img{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:#14101b}
.letter-scene>figcaption{position:absolute;bottom:10px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;gap:15px;color:#4d3440}
.letter-scene>figcaption>span{font-family:'Reenie Beanie',cursive;font-size:31px;line-height:1}
.letter-scene>figcaption>small{font-size:6px;letter-spacing:.12em;text-align:right;max-width:50%}
.letter-keepsakes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:30px 0 0;align-items:start}
.keepsake-shot,.keepsake-shot:nth-child(even){display:block;flex:none;rotate:0deg;translate:none;padding:0 0 8px;min-width:0;transition:transform .3s,color .3s}
.keepsake-shot img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#09070b;outline:1px solid #b9869d55;outline-offset:3px;filter:none;opacity:.55;transition:opacity .3s}
.keepsake-shot[aria-pressed=true] img,.keepsake-shot:hover img{opacity:1;outline-color:#e9b4c7}
.keepsake-shot>span{font-size:21px;line-height:1;margin-top:11px;color:#bd96a7;text-align:center}
.letter p.keepsake-meaning{font-family:'Reenie Beanie',cursive;font-size:30px;color:#ddb1c2;line-height:1.05;margin:19px 0 0;min-height:43px;text-align:center}
.letter-memories{display:flex;align-items:center;gap:7%;margin:50px -20px 45px;padding:14px 0;position:relative}
.letter-memories:before{content:'';position:absolute;left:-15px;right:-15px;top:40%;height:1px;background:#9c6f8035;rotate:-7deg}
.letter-memories figure{flex:1;min-width:0;position:relative;margin:0;padding:6px 6px 27px;background:#deccb9;rotate:-5deg;box-shadow:0 10px 20px #0005}
.letter-memories figure:nth-child(2){rotate:6deg;translate:0 -9px}.letter-memories figure:nth-child(3){rotate:-3deg}
.letter-memories img{display:block;width:100%;height:140px;object-fit:contain;background:#c3b19f}
.letter-memories figcaption{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-family:'Reenie Beanie',cursive;font-size:23px;line-height:1;color:#5b3a48}
.letter p.letter-ending{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;line-height:1.7;margin:50px 0 0;color:#e9d5d2}
.letter .letter-ending em{display:inline-block;font-family:'Reenie Beanie',cursive;font-size:53px;line-height:1.05;color:#e8b6c9;margin-top:11px;rotate:-3deg}
.letter-signature{font-family:'Reenie Beanie',cursive;font-size:31px;line-height:1.1;color:#ba91a4;max-width:440px;margin-top:25px}
.letter .save-memory{font-size:26px;margin:35px 0 0;min-height:48px;display:flex;align-items:center;gap:20px;color:#d9b39e}

@media(max-width:700px){
 .flow-button{left:7%;top:61px;font-size:20px;gap:7px}.flow-button svg{width:24px}
 .global-controls .icon-button{width:42px;height:44px}.global-controls{right:10px}
 .music-dock{max-width:calc(100vw - 124px);right:auto}.credits-button{bottom:76px;right:9px}
 .letter{max-width:calc(100vw - 18px);max-height:94svh}.reader-tools .icon-button{width:38px;height:40px}
 .letter-portrait{height:300px}.letter-photo.primary{width:50%;left:8%;top:40px}.letter-photo.secondary{width:34%;right:5%;top:116px}
 .letter-portrait .letter-photo img{height:150px}.letter-portrait .secondary img{height:104px}.letter-photo figcaption{font-size:18px}
 .letter-portrait>.letter-cover-note{left:9%;font-size:28px;bottom:15px}.letter-body{padding:32px 27px 35px}.letter-date{font-size:5.5px;letter-spacing:.12em}
 .letter-body>.letter-cover-note{font-size:32px;margin-bottom:26px}.letter h1{font-size:64px;margin:25px 0 31px}.letter #letterText p{font-size:20px;line-height:1.5;margin-bottom:23px}.letter #letterText p:first-child{font-size:22px}
 .letter #letterText p:first-child:first-letter{font-size:54px}.letter-quote{font-size:31px;padding:23px 6px;margin:34px 0}
 .letter-cinema{margin:34px -10px}.letter-scene{padding:5px 5px 43px}.letter-scene>figcaption{left:12px;right:12px;bottom:10px}.letter-scene>figcaption>span{font-size:26px}.letter-scene>figcaption>small{font-size:5px}
 .letter-keepsakes{gap:9px;margin-top:25px}.keepsake-shot>span{font-size:17px;line-height:.95}.letter p.keepsake-meaning{font-size:27px;min-height:53px}
 .letter-memories{gap:5%;margin:35px -10px 25px}.letter-memories figure{padding:4px 4px 21px}.letter-memories img{height:86px}.letter-memories figcaption{font-size:18px}
 .letter p.letter-ending{font-size:22px;margin-top:35px}.letter .letter-ending em{font-size:43px}.letter-signature{font-size:28px}.letter .save-memory{font-size:25px}
 .memory-inscription{font-size:24px;bottom:-36px}.memory-frame>img:first-child{border-width:5px}.memory-frame:before{left:5%}.memory-frame:after{left:3%;width:47px}
}
@media(orientation:landscape) and (max-height:580px){
 .flow-button{top:54px;left:5%;font-size:20px;min-height:36px}.flow-button svg{width:23px}
 .letter{max-height:94svh}.letter-portrait{height:300px}.letter-photo.primary{top:30px;left:15%;width:39%}.letter-photo.secondary{right:15%;width:27%;top:90px}
 .letter-portrait .letter-photo img{height:175px}.letter-portrait .secondary img{height:135px}.letter-portrait>.letter-cover-note{left:13%;bottom:15px}
 .letter-body{padding:32px 60px}.letter #letterText p{font-size:21px}.letter-memories img{height:120px}
 .memory-inscription{font-size:23px;bottom:-32px}.credits-button{bottom:12px;right:5%}.music-dock{max-width:min(260px,34vw)}
 .global-controls .icon-button{width:38px;height:38px}.story-navigation{right:calc(5% + 145px)}
}
@media(prefers-reduced-motion:reduce){.word-ink{animation:none}.words.fading-out{opacity:1}.letter-scene,.keepsake-shot{transition:none}}

/* El montaje no cambia de tamaño mientras una foto termina de decodificarse. */
.photo,.photo.current{transform:none;translate:none;transition:opacity 1s ease}
.photo img{rotate:0deg!important;box-shadow:none;border:0}
.photo .photo-background{max-width:none;max-height:none;width:100%;height:100%}
.memory-frame,.current .memory-frame{transform:none!important;transition:none;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;justify-items:center}
.memory-frame.has-echo{grid-template-columns:minmax(0,1fr) minmax(0,.3fr)}
.memory-mount{grid-column:1;grid-row:1;width:min(100%,calc(var(--mount-height) * var(--photo-ratio)));aspect-ratio:var(--photo-ratio);max-height:100%;position:relative;padding:6px;background:#dbc6b1;border:1px solid #f4dfcc55;box-shadow:0 14px 35px #0008;rotate:-1.2deg}
.memory-mount>img{display:block;width:100%;height:100%;object-fit:contain;max-width:100%;max-height:100%;outline:none;box-shadow:none}
.memory-frame>.memory-echo{grid-column:2;grid-row:1;width:100%;height:auto;max-width:100%;max-height:62%;object-fit:contain;filter:none;opacity:.75;border:4px solid #c4ad9d;outline:0;translate:none;rotate:3deg!important}
@media(orientation:portrait) and (max-width:700px){.memory-frame,.memory-frame.has-echo{grid-template-columns:minmax(0,1fr);--mount-height:43svh}.memory-frame>.memory-echo{display:none}.memory-mount{padding:4px}.memory-frame{inset:17% 10% 32%}}
@media(orientation:landscape) and (max-height:580px){.memory-frame{--mount-height:47svh;inset:16% 17% 30%}.memory-inscription{bottom:-27px;font-size:22px}}
.memory-frame{--mount-height:40svh;inset:14% 15% 33%}
.memory-inscription{top:calc(100% + 9px);bottom:auto;left:-20px;right:-20px;font-size:25px}
.memory-frame:before,.memory-frame:after{display:none}
.memory-mount:before{content:'';position:absolute;z-index:2;top:-10px;left:36%;height:22px;width:58px;background:#d7c3a855;rotate:-5deg;border:1px solid #ead9b918}
.memory-mount:after{content:'✦';position:absolute;z-index:3;left:-9px;top:-15px;color:#d6b88f;font-size:22px;line-height:1;rotate:-12deg}
#memoryCounter{display:none}
.memory-number{position:absolute;right:1px;top:-18px;font-family:'Sora',sans-serif;font-size:6px;line-height:1;letter-spacing:.16em;color:#d7b6c1}
body[data-world=recuerdos] .words{top:auto;bottom:18%;translate:none}
@media(orientation:portrait) and (max-width:700px){.memory-frame,.memory-frame.has-echo{--mount-height:36svh;inset:16% 9% 36%}.memory-inscription{font-size:21px;top:calc(100% + 7px)}body[data-world=recuerdos] .words{bottom:20%}body[data-world=recuerdos] .words .line{font-size:29px;line-height:1.04}}
@media(orientation:landscape) and (max-height:580px){.memory-frame,.memory-frame.has-echo{--mount-height:43svh;inset:16% 42% 23% 12%;grid-template-columns:minmax(0,1fr)}.memory-frame>.memory-echo{display:none}.memory-inscription{font-size:23px}body[data-world=recuerdos] .words{left:61%;right:8%;top:46%;bottom:auto;translate:0 -50%}body[data-world=recuerdos] .words .line{font-size:30px;line-height:1.06}}