@font-face{font-family:'Cormorant';src:url('assets/cormorant-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Caveat';src:url('assets/caveat-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('assets/dm-sans-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
:root{--paper:#f8f4eb;--ink:#434438;--muted:#6d6c5e;--rose:#a55e67;--sage:#6e7d63;--line:#d9d6c7;--serif:'Cormorant',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--hand:'Caveat','Comic Sans MS',cursive}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}body:before{content:'';position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.12;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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E")}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--rose);outline-offset:6px}::selection{background:#e8c4c1}.wrap{width:min(1120px,calc(100% - 112px));margin-inline:auto}.rose{color:var(--rose)}.handwritten{font-family:var(--hand)}.skip-link{position:fixed;top:10px;left:10px;transform:translateY(-150%);z-index:50;background:var(--paper);padding:14px}.skip-link:focus{transform:none}.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:30}.reading-progress>div{height:100%;background:var(--rose);transform:scaleX(0);transform-origin:left;transition:transform .1s linear}.site-header{display:flex;align-items:center;justify-content:space-between;padding-block:32px;border-bottom:1px solid var(--line)}.wordmark{font:500 27px var(--serif);text-decoration:none;letter-spacing:-.8px}.wordmark span{margin-left:8px;font-family:var(--hand);color:var(--rose);font-size:29px}.header-note{font:23px var(--hand);color:var(--muted);transform:rotate(-3deg)}.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;position:relative;min-height:740px;padding-block:65px 90px}.eyebrow{font-size:10px;font-weight:500;letter-spacing:2.7px;line-height:1.6}.little-star{color:var(--rose);font-size:18px;margin-right:9px;vertical-align:-1px}.hero h1{font:400 clamp(65px,6.8vw,91px)/.98 var(--serif);letter-spacing:-3px;margin:32px 0 22px}.hero h1 em{color:var(--rose);font-family:var(--hand);font-style:normal;font-size:1.2em;line-height:1.2;display:inline-block;position:relative;letter-spacing:-3px}.hero h1 em:after{content:'';position:absolute;bottom:3px;left:0;right:-8px;height:8px;border-top:1.5px solid #c78e8c;border-radius:50%;transform:rotate(-4deg)}.hero-message{font-size:18px;line-height:1.85;color:var(--muted);margin:8px 0 32px;max-width:405px}.hero-message strong{font-weight:500;color:var(--ink)}.scroll-invitation{display:inline-flex;gap:12px;align-items:center;text-decoration:none;font-size:12px;letter-spacing:.1px;min-height:48px}.arrow-circle{width:38px;height:38px;border:1px solid #b8bbae;border-radius:50%;display:grid;place-items:center;font-size:19px;color:var(--sage);transition:transform .25s,background .25s}.scroll-invitation:hover .arrow-circle{transform:translateY(3px);background:#e8e9de}.hero-art{position:relative;text-align:center;align-self:stretch;display:flex;align-items:center;flex-direction:column;justify-content:center}.flower{width:min(100%,420px);height:auto;overflow:visible}.flower-note{position:absolute;right:0;top:26px;font:27px var(--hand);transform:rotate(9deg);color:var(--muted)}.flower-note:after{content:'';display:block;border-right:1px solid #a7a38a;border-bottom:1px solid #a7a38a;width:38px;height:45px;border-radius:0 0 80% 0;margin:7px 0 0 26px;transform:rotate(16deg)}.art-caption{font:27px var(--hand);margin:-10px 0 0;color:var(--sage);transform:rotate(-4deg)}.hero-bottom-note{position:absolute;bottom:22px;font-size:10px;letter-spacing:1px;left:0;color:var(--muted)}.hero:after{content:'';position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid var(--line)}.draw{stroke-dasharray:550;stroke-dashoffset:550;animation:draw 2.5s ease forwards}.leaf{opacity:0;animation:bloom 1.6s .65s ease forwards;transform-origin:210px 373px}.leaf-right{animation-delay:.9s}.petals{opacity:0;transform-origin:218px 192px;animation:bloom 1.8s .9s ease forwards}@keyframes draw{to{stroke-dashoffset:0}}@keyframes bloom{from{opacity:0;transform:scale(.85) rotate(-5deg)}to{opacity:1;transform:scale(1) rotate(0)}}.story-intro{text-align:center;padding-block:80px 20px}.small-heart{font:32px var(--hand);color:var(--rose)}.story-intro p{font:400 39px/1.2 var(--serif);letter-spacing:-.8px;margin:20px 0 26px}.story-intro em{font-style:italic;color:var(--sage)}.intro-line{display:block;height:58px;border-left:1px dashed #bcbda8;width:0;margin:auto}.memory{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;padding-block:66px 62px}.memory-art{margin:0;min-width:0}.illustration-paper{position:relative;transform:rotate(-3deg);background:#faf6ee;padding:15px;box-shadow:0 3px 12px #5149320b,0 1px 2px #5149320f}.illustration-paper img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}.tape{position:absolute;z-index:1;top:-13px;left:calc(50% - 37px);width:74px;height:27px;background:#c0c5ad;opacity:.62;transform:rotate(4deg);clip-path:polygon(0 5%,9% 1%,18% 7%,32% 0,43% 4%,63% 0,75% 7%,89% 2%,100% 7%,98% 94%,88% 99%,76% 93%,65% 98%,51% 95%,37% 100%,26% 94%,14% 99%,0 94%)}figcaption{font:24px/1.2 var(--hand);color:var(--muted);text-align:center;margin-top:27px;transform:rotate(-3deg)}figcaption span{color:var(--rose)}.chapter{display:flex;align-items:center;gap:14px;font-size:9px;letter-spacing:2px;line-height:1.8;margin:0 0 22px}.chapter span{color:var(--rose);font:italic 28px var(--serif);letter-spacing:0;padding-right:16px;border-right:1px solid var(--line)}.memory h2{font:400 clamp(36px,4.1vw,53px)/1.07 var(--serif);letter-spacing:-1.4px;margin:0 0 28px;text-wrap:balance}.memory h2 em{font-weight:400;color:var(--sage)}.memory-copy>p:not(.chapter){font-size:17px;line-height:1.85;margin:0 0 17px;color:var(--muted)}.marked{background:linear-gradient(transparent 65%,#dce1cb 65%,#dce1cb 93%,transparent 93%);color:var(--ink)}.coffee-doodle{color:var(--rose);width:68px;margin-top:6px;transform:rotate(-8deg)}.journey-stitch{display:flex;align-items:center;justify-content:center;gap:18px;height:110px;color:#9ea58b}.journey-stitch span{width:70px;border-top:1px dashed #c4c6b7}.journey-stitch svg{width:125px;height:40px}.beach-section{position:relative;background:#eaece1;padding-block:46px;margin-block:4px}.beach-section:before,.beach-section:after{content:'';position:absolute;left:0;right:0;height:12px;background:radial-gradient(circle at 10px 0,var(--paper) 10px,transparent 10.7px) 0 0/20px 20px}.beach-section:before{top:0}.beach-section:after{bottom:0;transform:rotate(180deg)}.beach .memory-art{grid-column:2;grid-row:1}.beach .memory-copy{grid-column:1;grid-row:1}.beach .illustration-paper{transform:rotate(3deg)}.beach .tape{background:#d4ba9b;transform:rotate(-4deg)}.beach figcaption{transform:rotate(3deg)}.beach .marked{background:linear-gradient(transparent 65%,#d7d9bc 65%,#d7d9bc 93%,transparent 93%)}.wave-doodle{width:95px;color:var(--sage);margin-top:12px}.together{padding-block:48px 110px}.together .illustration-paper{transform:rotate(-2deg)}.together .tape{background:#dbb9b7}.together .memory-copy>p:not(.chapter){font-size:16px}.love-note{display:block;font-size:23px;color:var(--rose);margin-top:25px;transform:rotate(-3deg)}.closing{background:#f0e3df;text-align:center;position:relative;padding-block:74px 85px}.closing:before{position:absolute;content:'';top:0;left:0;right:0;border-top:1px solid #e5d6cf}.closing-inner{max-width:580px}.closing-heart{width:65px;height:60px;color:var(--rose);transform:rotate(-8deg);margin-bottom:18px}.closing .eyebrow{color:#805c56;font-size:9px}.closing h2{font:400 76px/1.02 var(--serif);letter-spacing:-2px;margin:24px 0}.closing h2 em{color:var(--rose)}.closing-message{font-size:17px;line-height:1.85;color:#705f57;max-width:430px;margin:28px auto}.birthday-wish{font:24px/1.5 var(--serif);margin:28px auto;color:#654d45}.letter-button{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:52px;background:var(--ink);color:#f8f4eb;border:1px solid var(--ink);border-radius:3px;padding:14px 22px;font-size:13px;cursor:pointer;transition:background .2s,transform .2s;margin-top:12px}.letter-button:hover{background:#59634f;transform:translateY(-2px)}.letter-button svg{width:19px;height:18px}.letter-button>span{font-size:18px;margin-left:8px}.forever-note{display:block;color:#936960;font-size:27px;margin-top:30px;transform:rotate(-3deg)}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:98px;color:var(--muted);font-size:10px;letter-spacing:.2px}.site-footer>a{font-size:20px;text-decoration:none;display:grid;place-items:center;width:44px;height:44px}.reveal{opacity:1;transform:none}.js .reveal:not(.is-visible){opacity:0;transform:translateY(25px)}.js .reveal{transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 40px);padding:0;background:var(--paper);color:var(--ink);border:1px solid #d9cab8;box-shadow:0 20px 100px #39312625;overscroll-behavior:contain}dialog::backdrop{background:#35362d80;backdrop-filter:blur(4px)}.close-letter{position:absolute;right:12px;top:10px;width:44px;height:44px;border:0;background:transparent;color:var(--muted);font-size:28px;cursor:pointer}.letter-content{padding:48px 48px 38px;text-align:left}.letter-stamp{font:37px var(--hand);color:var(--rose);position:absolute;top:45px;right:48px;transform:rotate(12deg)}.letter-content h2{font:54px var(--hand);font-weight:400;color:var(--rose);margin:22px 0}.letter-content>p:not(.eyebrow){font:16px/1.8 var(--sans);margin-bottom:18px}.letter-content>.letter-signature{font:26px/1.4 var(--hand)!important;color:var(--rose);margin-top:28px}.letter-return{border:0;border-bottom:1px solid #b4b9a3;background:none;color:var(--sage);padding:12px 0;font-size:12px;cursor:pointer}.heart-confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}.confetti-heart{position:absolute;color:var(--rose);font-family:var(--hand);font-size:26px;animation:float-heart 2.8s ease-out forwards}@keyframes float-heart{0%{opacity:0;transform:translateY(35px) rotate(0)}12%{opacity:.8}100%{opacity:0;transform:translateY(-150px) rotate(28deg)}}
@media(min-width:1400px){.hero{min-height:790px}}@media(max-width:1000px){.wrap{width:calc(100% - 72px)}.memory{gap:48px}.hero h1{font-size:72px}.flower-note{right:-5px;font-size:23px}.memory h2{font-size:44px}.memory-copy>p:not(.chapter){font-size:16px}.chapter{font-size:8px;letter-spacing:1.5px}.hero{min-height:680px}.flower{width:360px;max-width:100%}}
@media(max-width:700px){.wrap{width:calc(100% - 48px)}.site-header{padding-block:21px}.wordmark{font-size:25px}.header-note{font-size:17px}.hero{display:flex;flex-direction:column;padding-block:36px 44px;min-height:0;align-items:stretch}.hero-copy{text-align:center;position:relative;z-index:1}.hero .eyebrow{font-size:8px;letter-spacing:1.9px;margin:0}.little-star{font-size:15px;margin-right:5px}.hero h1{font-size:clamp(48px,13.5vw,65px);letter-spacing:-1.8px;line-height:.98;margin:23px 0 12px}.hero h1 em{font-size:1.15em;line-height:1.14;letter-spacing:-1px}.hero h1 em:after{height:5px;bottom:0}.hero-message{font-size:17px;line-height:1.7;margin:20px auto 0;max-width:325px}.desktop-break{display:none}.hero-art{height:278px;width:100%;margin-top:0;justify-content:center;align-self:auto}.flower{width:235px;height:267px;transform:translateY(3px)}.flower-note{right:0;top:43px;font-size:19px;max-width:94px;line-height:.95;transform:rotate(9deg)}.flower-note:after{width:22px;height:28px;margin:5px 0 0 12px}.art-caption{font-size:21px;margin:-1px 0 0;position:absolute;bottom:-6px;left:0;right:0}.scroll-invitation{position:absolute;top:calc(100% + 300px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;gap:9px}.arrow-circle{width:32px;height:32px;font-size:17px}.hero{padding-bottom:95px}.hero-bottom-note{display:none}.story-intro{padding-block:55px 8px}.small-heart{font-size:28px}.story-intro p{font-size:34px;margin:16px 0 24px}.intro-line{height:45px}.memory{display:flex;flex-direction:column;gap:38px;padding-block:45px 40px}.memory-art{width:100%;max-width:440px;padding-inline:5px}.illustration-paper{padding:10px}.tape{height:24px;top:-12px}.memory-copy{width:100%}.memory h2{font-size:43px;line-height:1.04;margin-bottom:24px;letter-spacing:-1.2px}.memory-copy>p:not(.chapter),.together .memory-copy>p:not(.chapter){font-size:18px;line-height:1.8;margin-bottom:18px}.chapter{font-size:8px;letter-spacing:1.65px;margin-bottom:19px;gap:12px}.chapter span{font-size:27px;padding-right:14px}figcaption{font-size:22px;margin-top:23px}.coffee-doodle{width:56px;margin-top:4px}.journey-stitch{height:91px}.beach-section{padding-block:26px 13px}.beach .memory-copy,.beach .memory-art{grid-column:auto;grid-row:auto}.beach .memory{gap:42px;padding-block:36px 35px}.wave-doodle{width:85px;margin-top:5px}.together{padding-block:42px 67px}.love-note{font-size:25px;margin-top:23px}.closing{padding-block:56px 61px}.closing-heart{width:57px;height:54px;margin-bottom:10px}.closing h2{font-size:59px;letter-spacing:-1.7px;margin:23px 0}.closing-message{font-size:18px;line-height:1.8;margin:25px auto}.birthday-wish{font-size:25px}.letter-button{width:100%;max-width:320px;min-height:54px;font-size:12px}.forever-note{font-size:25px;margin-top:27px}.site-footer{flex-wrap:wrap;justify-content:center;gap:8px;padding-block:25px 22px;position:relative;font-size:9px}.site-footer>span{width:100%;text-align:center}.site-footer>a{position:absolute;right:-5px;top:20px}.letter-content{padding:38px 25px 25px}.letter-content h2{font-size:47px;margin:20px 0}.letter-content>p:not(.eyebrow){font-size:16px;line-height:1.75}.letter-stamp{right:33px;top:60px}.js .reveal:not(.is-visible){transform:translateY(17px)}}
@media(max-width:370px){.wrap{width:calc(100% - 40px)}.header-note{font-size:15px}.flower-note{right:-5px;font-size:17px;max-width:78px}.hero h1{font-size:48px}.hero-message{font-size:17px}.memory h2{font-size:39px}.chapter{letter-spacing:1.1px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.draw{stroke-dashoffset:0}.leaf,.petals{opacity:1}.js .reveal:not(.is-visible){opacity:1;transform:none}.heart-confetti{display:none}}
@media print{.reading-progress,.letter-button,.scroll-invitation,.site-footer>a{display:none}.reveal,.js .reveal:not(.is-visible){opacity:1;transform:none}.memory{break-inside:avoid}body:before{display:none}}

/* La carta es una hoja de papel sobre una escena con perspectiva. */
#love-letter{width:min(620px,calc(100% - 16px));max-height:calc(100dvh - 16px);padding:38px 22px 20px;border:0;background:transparent;box-shadow:none;overflow:visible}
#love-letter::backdrop{background:#37332899;backdrop-filter:blur(6px)}
#love-letter .close-letter{top:0;right:12px;color:#fff7e7;z-index:3;border-radius:50%;background:#3e382c55}
.letter-scene{perspective:1100px;perspective-origin:50% 40%}
.letter-paper{--tilt-x:0deg;--tilt-y:0deg;--light-x:50%;--light-y:35%;position:relative;isolation:isolate;background:#f7efd9;border:1px solid #e6d9bb;border-radius:2px 3px 1px 3px;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transform-origin:50% 45%;transition:transform .28s ease-out;box-shadow:1px 2px 0 #d8cbb0,2px 4px 0 #e4d7bb,0 14px 22px #1d180f28,0 35px 75px #19160f55;will-change:transform}
.letter-paper.is-dragging{transition:transform .055s linear}
.letter-paper::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:.72;background-image:radial-gradient(ellipse at var(--light-x) var(--light-y),#fffdf08c 0,transparent 66%),linear-gradient(90deg,transparent 48.8%,#a7906a0d 49.5%,#fffef06b 50%,transparent 51.2%),linear-gradient(0deg,transparent 49%,#ae9a7210 49.7%,#ffffff45 50%,transparent 51%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.18'/%3E%3C/svg%3E")}
.letter-paper::after{content:'';position:absolute;right:-1px;bottom:-1px;width:25px;height:25px;pointer-events:none;background:linear-gradient(135deg,#e5d7b8 46%,#d1c09b 49%,#eee5cd 52%,#fff8e7 100%);clip-path:polygon(100% 0,100% 100%,0 100%);filter:drop-shadow(-2px -2px 1px #5b49391f)}
.letter-grip-row{display:flex;align-items:center;justify-content:space-between;padding:9px 16px 3px;border-bottom:1px solid #bbaa841f;gap:10px}
.letter-grip{display:flex;align-items:center;gap:9px;min-height:44px;flex:1;border:0;background:transparent;padding:8px 0;color:#8c7b60;font-size:11px;cursor:grab;touch-action:none;user-select:none}
.letter-grip:active{cursor:grabbing}.letter-grip span{font-size:21px;color:#a29578}.letter-reset{height:44px;width:44px;background:transparent;border:0;color:#8c7b60;font-size:25px;cursor:pointer}
#love-letter .letter-content{position:relative;max-height:calc(100dvh - 154px);overflow-y:auto;overscroll-behavior:contain;padding:30px 46px 32px;scrollbar-width:thin;scrollbar-color:#c5b48e transparent;-webkit-overflow-scrolling:touch}
#love-letter .letter-stamp{top:29px;right:42px}#love-letter .letter-content>p:not(.eyebrow){font:22px/1.55 var(--hand);color:#5c5142}#love-letter .letter-content h2{margin:17px 0 24px}#love-letter .letter-content>.letter-signature{color:var(--rose);font-size:27px!important}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){#love-letter{padding:38px 17px 18px;width:calc(100% - 8px)}#love-letter .letter-content{padding:25px 24px 26px;max-height:calc(100dvh - 150px)}#love-letter .letter-content>p:not(.eyebrow){font-size:23px;line-height:1.5}#love-letter .letter-stamp{top:26px;right:27px}.letter-grip-row{padding:5px 12px 0}.letter-grip{font-size:10px;gap:6px}.letter-paper::after{width:21px;height:21px}}
@media(prefers-reduced-motion:reduce){.letter-paper{transform:none!important;will-change:auto}.letter-grip-row{display:none}#love-letter .letter-content{max-height:calc(100dvh - 100px)}}

/* Mantener el encuadre original de las acuarelas, sin cortar los rostros. */
.illustration-paper img{aspect-ratio:4/5;object-fit:contain}
.beach .illustration-paper img{aspect-ratio:4/3}

/* Una flor que pone música a nuestra historia. */
.flower-button{display:block;border:0;padding:0;background:transparent;color:inherit;cursor:pointer;line-height:0;max-width:100%;border-radius:50%;touch-action:manipulation}
.flower-button:hover .flower{filter:drop-shadow(0 5px 10px #bb788025)}
.flower-button .petals{transform-box:view-box;transform-origin:220px 190px}
.flower-button.is-spinning .petals{animation:petal-spin 1.8s cubic-bezier(.25,.1,.2,1) forwards;opacity:1}
@keyframes petal-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.music-panel[hidden]{display:none}
.music-panel{position:fixed;right:16px;bottom:16px;z-index:40;width:240px;max-width:calc(100vw - 32px);padding:12px;background:#fffaf0;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 35px #4b342329;color:var(--ink)}
.music-panel-heading{display:flex;align-items:center;justify-content:space-between;font:22px var(--hand);margin-bottom:8px}
.music-panel-heading button{width:32px;height:32px;border:0;background:transparent;font-size:24px;cursor:pointer}
.music-panel iframe{display:block;width:216px;max-width:100%;height:200px;border:0;border-radius:5px}
#music-toggle{width:100%;min-height:44px;border:1px solid var(--line);background:transparent;color:var(--rose);border-radius:5px;margin-top:8px;cursor:pointer;font-size:12px}
.music-panel p{font-size:11px;line-height:1.5;margin:8px 0}.music-panel p:empty{display:none}.music-panel>a{font-size:10px;color:var(--muted)}

.music-window-actions{display:flex;gap:2px}
.music-video{max-height:200px;overflow:hidden;transition:max-height .25s ease}
.music-panel.is-minimized .music-video{max-height:0}
.music-panel.is-minimized{width:228px;padding-block:8px}
.music-panel.is-minimized .music-panel-heading{margin-bottom:0;font-size:20px}
.music-panel.is-minimized #music-toggle{margin-top:4px;min-height:36px}
.music-panel.is-minimized #music-status:empty,.music-panel.is-minimized>a{display:none}