:root{--ink:#633044;--rose:#9a415f;--paper:#fffaf3;--line:#c797a5}*{box-sizing:border-box}body{margin:0;background:#f6e9e7;color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px;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='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23633044' opacity='.035' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}button,a,label,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-decoration:none}header,footer{max-width:1380px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:28px 5vw}header>a{font-family:'Cormorant Garamond',serif;font-size:32px;font-style:italic}header>a span{font-family:'DM Sans',sans-serif;display:block;font-size:10px;letter-spacing:.13em;font-style:normal;margin-top:3px}.quiet{background:none;border:0;color:var(--ink);padding:9px 0;font-size:12px}.quiet:hover{text-decoration:underline;text-underline-offset:5px}header button span{font-size:24px;margin-left:10px}.cover-view{max-width:1140px;margin:30px auto 65px;display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;padding:0 35px}.book-wrap{position:relative;padding:0 0 35px 15px}.cover{position:relative;background:#df9eae;border-radius:3px 10px 10px 3px;padding:22px 23px 22px 31px;box-shadow:inset 8px 0 10px #ab5d7544,14px 18px 35px #68314326,5px 3px 0 #fff4e6,9px 5px 0 #c6a69d;transform:rotate(-3deg)}.cover:before{content:'';position:absolute;top:0;bottom:0;left:15px;border-left:1px solid #b16d8377}.cover-border{border:1px solid #97546a77;min-height:556px;text-align:center;padding:27px 20px 22px}.tiny,.edition{font-size:9px;letter-spacing:.19em}.flower{font-size:38px;margin:22px 0 12px;color:#83415a}h1,h2,h3,p{margin:0}h1{font:500 66px/.88 'Cormorant Garamond',serif;letter-spacing:-.035em}h1>span{display:block;font:italic 29px 'Cormorant Garamond',serif;margin:14px 0 22px;letter-spacing:0}.cover-photo{width:170px;background:#f5d8d8;margin:auto;padding:10px 10px 16px;transform:rotate(5deg);box-shadow:2px 5px 10px #63304420}.cover-photo svg{width:135px;color:#af7184}.cover-photo span{font-size:9px}.hand{font:24px 'La Belle Aurore',cursive}.cover .hand{font-size:18px;margin:24px -20px 21px}.edition{font-size:8px}.ribbon{position:absolute;z-index:2;top:-7px;right:65px;width:26px;height:87px;background:#a3405b;clip-path:polygon(0 0,100% 0,100% 100%,50% 83%,0 100%);transform:rotate(-3deg)}.under-book{position:absolute;bottom:-4px;left:0;width:100%;text-align:center;font:italic 16px 'Cormorant Garamond',serif}.hello{color:var(--rose);font-size:31px}.intro h2{font:500 45px/1.05 'Cormorant Garamond',serif;letter-spacing:-.025em;margin:12px 0 18px}.intro h2 em{font-weight:400}.intro>p{line-height:1.85;max-width:380px;color:#785362;font-size:13px}.music{border-top:1px solid #cfabb4;border-bottom:1px solid #cfabb4;margin:30px 0 25px;padding:20px 0 13px}.music-top{display:flex;align-items:center;gap:15px}.music h3{font:600 23px 'Cormorant Garamond',serif}.music p{font-size:11px;line-height:1.6;margin-top:4px}.record{width:56px;height:56px;flex-shrink:0;border-radius:50%;background:repeating-radial-gradient(#352630 0 1px,#51404b 2px 3px);display:grid;place-items:center}.record i{background:#dba2b5;border-radius:50%;width:21px;height:21px;border:7px solid #c7849b}.record.playing{animation:spin 6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tracks{margin-top:14px;max-height:135px;overflow:auto}.tracks .empty{color:#805467;font-size:12px;font-style:italic}.track{display:flex;width:100%;text-align:left;border:0;border-bottom:1px solid #dfc4ca;background:transparent;color:var(--ink);padding:9px 4px;gap:10px;font-size:12px}.track.active{color:#963654;font-weight:600}.music-actions{display:flex;justify-content:space-between;gap:10px;margin-top:8px}.upload{cursor:pointer}input[type=file]{display:none}.local-note{color:#805467;font-size:10px!important}.primary{width:100%;background:#8b3a55;border:1px solid #8b3a55;border-radius:3px;color:#fff8f3;padding:17px 22px;display:flex;justify-content:space-between;transition:background .2s}.primary:hover{background:#6a2941}.primary span{font-size:20px}.little-note{display:block;text-align:center;font-size:10px;margin-top:13px}.player{display:flex;align-items:center;gap:10px;padding-top:12px}.player[hidden]{display:none}.player button{border:0;background:#8b3a55;color:white;border-radius:50%;width:30px;height:30px}.player span{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.player input{width:60px;accent-color:#8b3a55}footer{font-size:10px;color:#805467;border-top:1px solid #dbc0c4;padding-top:19px;padding-bottom:20px}.heart{font-size:18px;margin-left:8px}#reader{max-width:1040px;margin:18px auto 40px;padding:0 25px}.reader-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;font:italic 20px 'Cormorant Garamond',serif}#chapterCount{font:11px 'DM Sans',sans-serif}.spread{display:grid;grid-template-columns:1fr 1fr;box-shadow:0 15px 40px #63304420;border-radius:4px;background:var(--paper)}.page{min-height:520px;padding:46px;position:relative}.photo-page{background:linear-gradient(90deg,transparent 94%,#63304412);display:flex;flex-direction:column;justify-content:center;border-right:1px solid #d9c5ba}.memory-photo{cursor:pointer;display:block;background:#f0dfd9;border:12px solid white;border-bottom-width:35px;box-shadow:2px 6px 18px #63304422;transform:rotate(-4deg);aspect-ratio:1;overflow:hidden}.memory-photo img{width:100%;height:100%;object-fit:cover}.memory-photo>span{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:10px}.memory-photo svg{width:65px;fill:none;stroke:#ab7a87;stroke-width:1}.memory-photo b{font:italic 23px 'Cormorant Garamond',serif}.memory-photo small{font-size:10px;line-height:1.5}.photo-page>.hand{text-align:center;margin-top:30px;font-size:25px}.story-page{display:flex;flex-direction:column;justify-content:center}.chapter-label{font-size:10px;letter-spacing:.1em}.story-page h2{font:500 43px/1.05 'Cormorant Garamond',serif;margin:16px 0 24px}.story-page p{font:17px/1.75 'Cormorant Garamond',serif;margin-bottom:17px}.story-page .hand{font-family:'La Belle Aurore',cursive;font-size:25px}.page-number{position:absolute;bottom:20px;right:28px;font:14px 'Cormorant Garamond',serif}.navigation{display:flex;gap:25px;justify-content:center;align-items:center;margin-top:27px}.round{border:1px solid #bd8f9e;border-radius:50%;width:40px;height:40px;background:none;color:var(--ink)}#dots{display:flex;gap:10px}#dots button{height:8px;width:8px;padding:0;border:0;background:#cfabb4;border-radius:50%}#dots button.active{background:#8b3a55}.reader-note{text-align:center;margin-top:20px;font-size:10px}.envelope{padding:25px;background:#f1d7dc;color:var(--ink);border:1px solid #d9aebb;font:italic 25px 'Cormorant Garamond',serif;text-align:center}.envelope small{display:block;font:10px 'DM Sans',sans-serif;margin-top:10px}.envelope span{margin-left:10px}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#633044;color:white;max-width:90%;padding:13px 20px;border-radius:4px;font-size:12px;opacity:0;pointer-events:none}#toast.show{opacity:1}::selection{background:#e2a8bc;color:#4e2233}:focus-visible{outline:2px solid #933e5c;outline-offset:5px}*{scrollbar-color:#bd8397 #f6e9e7;scrollbar-width:thin}[hidden]{display:none!important}@media(min-width:760px){.spread.turning{animation:turn .4s ease-out}@keyframes turn{from{filter:brightness(.94);transform:perspective(1500px) rotateY(-3deg)}to{filter:brightness(1);transform:none}}}@media(max-width:950px){.cover-view{gap:45px}.cover-border{min-height:510px;padding-left:10px;padding-right:10px}h1{font-size:56px}.intro h2{font-size:38px}.page{padding:30px}}@media(max-width:700px){header{padding:20px 24px}header>a{font-size:28px}header button{font-size:10px}.cover-view{display:flex;flex-direction:column;padding:0 25px;gap:45px;margin:20px auto 45px}.book-wrap{width:min(100%,350px);padding-right:10px}.cover-border{min-height:480px;padding-top:24px}.flower{margin-top:16px}h1{font-size:56px}.cover-photo{width:150px}.cover-photo svg{width:115px}.cover .hand{margin-top:22px}.intro{width:100%;max-width:410px}.intro h2{font-size:40px}.intro>p{max-width:none}.hello{font-size:30px}.music{margin-top:25px}footer{padding:18px 24px;gap:25px;font-size:9px}.spread{display:flex;flex-direction:column}.page{min-height:0;padding:32px}.photo-page{border-right:0;padding-bottom:15px;background:var(--paper)}.memory-photo{max-width:300px;width:100%;margin:auto;aspect-ratio:1.2}.photo-page>.hand{margin-top:22px}.story-page{padding-top:20px;padding-bottom:48px}.story-page h2{font-size:36px;margin-top:12px;margin-bottom:16px}.story-page p{font-size:18px}.chapter-label{font-size:9px}#reader{padding:0 18px}.reader-heading{font-size:18px}.reader-heading .quiet{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Readable supporting text across screens. */
.tiny,.edition,.cover-photo span,header>a span,.local-note,.little-note,.reader-note,.memory-photo small,.chapter-label,footer{font-size:11px!important}header>a span{letter-spacing:.03em}header button{font-size:12px!important}.quiet,.upload{min-height:40px}.track{min-height:44px}

/* Encuadernación y hojas con profundidad real. */
.book-wrap{perspective:1500px;isolation:isolate}
.cover{transform-origin:5% 50%;border:1px solid #a65975;background-color:#dfa0b3;background-image:linear-gradient(90deg,#9b4f6a 0,#c8809b 4%,#e6acc0 8%,transparent 13%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h100v100H0z' filter='url(%23grain)' opacity='.12'/%3E%3C/svg%3E");box-shadow:inset 1px 0 2px #fff6,9px 6px 0 -2px #f8eee1,11px 8px 0 -2px #cdb5a7,13px 10px 0 -2px #fff5e6,16px 13px 0 -2px #a35e77,21px 26px 38px #63304435}
.cover:before{left:23px;border-color:#8d4662;box-shadow:2px 0 3px #fff4}
.cover-border{border:1px solid #8d486988;outline:1px solid #8d486944;outline-offset:5px;border-radius:65px 5px 65px 5px}
.cover-border:before,.cover-border:after{content:'❧';display:block;font:25px 'Cormorant Garamond',serif;color:#82425d;position:absolute;bottom:25px}
.cover-border:before{left:43px}.cover-border:after{right:35px;transform:rotate(180deg)}
.cover-photo{border:1px solid #fff4}.ribbon{filter:drop-shadow(2px 4px 3px #63304433)}
#reader{max-width:1120px;padding-left:34px;padding-right:34px}
.spread{position:relative;isolation:isolate;perspective:2200px;overflow:visible;border-radius:9px 13px 13px 9px;border:1px solid #cfb8a5;background:#fffaf3;box-shadow:0 2px 0 #d6c5b0,0 5px 0 -1px #fffaf3,0 7px 0 -1px #c7af99,0 10px 0 -2px #fff7e8,0 12px 0 -2px #d8c0aa,0 16px 0 -3px #a45e78,0 18px 0 -2px #7a3c57,2px 29px 45px #6330442e}
.spread:before{content:'';position:absolute;inset:-9px -10px -17px;background:#b66f8b;border:1px solid #8e4b68;border-radius:12px 17px 15px 12px;z-index:-1;box-shadow:inset 0 0 0 3px #e0a2b633}
.spread:after{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 25px);width:50px;background:linear-gradient(90deg,transparent,#4f302019 36%,#57311e35 49%,#fff5 52%,#6d443318 65%,transparent);pointer-events:none;z-index:2}
.page{min-height:560px;background-color:var(--paper);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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23896443' opacity='.045' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");border-radius:8px}
.photo-page{border-right:0;padding-right:50px;border-radius:8px 0 0 8px;box-shadow:inset 5px 0 12px #825b3010}
.story-page{padding-left:50px;border-radius:0 8px 8px 0;box-shadow:inset -5px 0 12px #825b3010}
.photo-page:after{content:'tú & yo';position:absolute;bottom:20px;left:30px;font:italic 14px 'Cormorant Garamond',serif;color:#8a6270}
.story-page:before{content:'';position:absolute;top:28px;left:50px;right:35px;height:1px;background:#b8879b55}
.story-page h2{text-wrap:balance}.story-page p{font-size:19px;line-height:1.75}.chapter-label{color:#92506c;letter-spacing:.06em}
.memory-photo{position:relative;box-shadow:1px 9px 18px #63304426}.memory-photo:before{content:'';position:absolute;top:-4px;left:30%;width:40%;height:22px;background:#d7b8a577;transform:rotate(3deg);z-index:1;pointer-events:none}
.navigation{margin-top:43px}.round{width:46px;height:46px;background:#fff8f344;transition:background .2s,transform .2s}.round:hover:not(:disabled){background:#edd0d9;transform:translateY(-2px)}#dots button{width:24px;height:30px;border-radius:0;background:none;position:relative}#dots button:after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:#c59bab;left:9px;top:12px}#dots button.active{background:none}#dots button.active:after{background:#8b3a55;box-shadow:0 0 0 4px #8b3a5515}
.turn-sheet{position:absolute;top:0;bottom:0;width:50%;z-index:5;pointer-events:none;transform-style:preserve-3d;backface-visibility:hidden;background:var(--paper);box-shadow:-15px 5px 30px #49243225;overflow:hidden}
.turn-sheet.forward{right:0;transform-origin:left center;border-radius:0 8px 8px 0}.turn-sheet.backward{left:0;transform-origin:right center;border-radius:8px 0 0 8px}.turn-sheet .sheet-content{height:100%;width:100%;min-height:100%;margin:0}.turn-sheet:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#57311e20,transparent 18%,transparent 75%,#57311e10);pointer-events:none}.spread.turning{animation:none}
.envelope{position:relative;background:linear-gradient(150deg,transparent 49.5%,#c58a9e 50%,transparent 50.5%) left top/50% 65% no-repeat,linear-gradient(210deg,transparent 49.5%,#c58a9e 50%,transparent 50.5%) right top/50% 65% no-repeat,#efd0da;box-shadow:0 6px 15px #63304413;padding-top:48px;margin-top:12px}.envelope:hover{background-color:#e9c0ce}
@media(max-width:950px) and (min-width:701px){.page{padding:35px}.story-page{padding-left:38px}.photo-page{padding-right:38px}.story-page h2{font-size:37px}.story-page p{font-size:18px}}
@media(max-width:700px){#reader{padding:0 25px}.spread{display:block;border-radius:5px 13px 13px 5px;margin-left:5px}.spread:after{left:0;right:auto;width:20px;background:linear-gradient(90deg,#683d332e,transparent)}.spread:before{inset:-7px -7px -15px}.page{min-height:0;background-color:transparent;box-shadow:none}.photo-page{padding:30px 28px 0 34px;border-radius:5px 13px 0 0}.photo-page:after{display:none}.story-page{padding:22px 28px 48px 34px;border-radius:0 0 13px 5px}.story-page:before{display:none}.memory-photo{aspect-ratio:1.4;max-width:270px;border-width:9px;border-bottom-width:24px}.photo-page>.hand{font-size:22px;margin-top:18px}.story-page h2{font-size:34px;margin:10px 0 18px}.story-page p{font-size:18px;line-height:1.6;margin-bottom:14px}.turn-sheet{width:100%;border-radius:5px 13px 13px 5px!important}.turn-sheet.forward,.turn-sheet.backward{left:0;right:0;transform-origin:left center}.turn-sheet .sheet-content{display:block;background:var(--paper);padding:0;border:0;box-shadow:none;min-height:100%}.navigation{gap:12px}#dots{gap:2px}.reader-heading>span{font-size:16px}footer{flex-wrap:wrap}.cover-border:before,.cover-border:after{font-size:20px;bottom:20px}}
@media(prefers-reduced-motion:reduce){.round:hover:not(:disabled){transform:none}}
/* Un girasol dibujado para la dedicatoria de la portada. */
.cover-photo.sunflower-card{padding:5px 10px 13px;background:#fff0e6;overflow:visible}
.cover-photo .sunflower{display:block;width:140px;max-width:100%;height:auto;margin:0 auto;overflow:visible}
.sunflower-sway{transform-origin:82px 143px;animation:sunflower-sway 5s ease-in-out infinite}
.sunflower-head{transform-origin:80px 62px;animation:sunflower-nod 5s ease-in-out infinite}
.sun-leaf{transform-box:fill-box;transform-origin:90% 90%;animation:sunflower-leaf 5s ease-in-out infinite}
.leaf-right{transform-origin:5% 90%;animation-delay:-2s}
.cover-photo .sunflower-caption{display:block;font:15px/1.25 'La Belle Aurore',cursive;color:#82425d;margin-top:3px}
@keyframes sunflower-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes sunflower-nod{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-5deg)}}
@keyframes sunflower-leaf{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-7deg)}}
@media(max-width:700px){.cover-photo .sunflower{width:120px}.cover-photo .sunflower-caption{font-size:14px}}
@media(prefers-reduced-motion:reduce){.sunflower-sway,.sunflower-head,.sun-leaf{animation:none}}
/* El girasol forma parte de la tela de la tapa. */
.cover-photo.sunflower-card{background:transparent;border:0;box-shadow:none;transform:none;width:180px;padding:0 8px 10px}
.cover-photo .sunflower{width:150px;filter:drop-shadow(1px 3px 2px #82425d18)}
.cover-photo .sunflower-caption{font-size:17px;margin-top:5px;color:#633044}
.cover-tab{position:absolute;bottom:0;right:0;width:76px;height:76px;background:none;border:0;padding:0;color:#74354e;cursor:pointer;z-index:4;transform-origin:bottom right;transition:transform .3s ease,filter .3s ease}
.cover-tab svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(-3px -3px 4px #63304425)}
.cover-tab svg path:first-child{fill:#edb9c9;stroke:#ac6a83;stroke-width:1}
.cover-tab svg path:last-child{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cover-tab:hover,.cover-tab:focus-visible{transform:scale(1.08);filter:brightness(1.05)}
.cover-border:after{display:none}.under-book{font-size:16px;bottom:-10px;padding:0 5px}.little-note{margin-top:22px}
@media(max-width:700px){.cover-photo.sunflower-card{width:165px}.cover-photo .sunflower{width:135px}.cover-photo .sunflower-caption{font-size:16px}.cover-tab{width:68px;height:68px}.under-book{font-size:14px;bottom:-12px}}
@media(prefers-reduced-motion:reduce){.cover-tab:hover{transform:none}}
/* Las hojas móviles deben cubrir la encuadernación rosada. */
@media(max-width:700px){
 .spread{background-color:var(--paper)}
 .spread>.photo-page,.spread>.story-page{background-color:var(--paper)}
 .spread>.photo-page{border-radius:5px 13px 0 0}
 .spread>.story-page{border-radius:0 0 13px 5px}
}
/* Pestañas de papel para avanzar desde las esquinas del libro. */
.page-tab{position:absolute;bottom:0;width:68px;height:68px;z-index:4;padding:0;background:none;border:0;color:#74354e;transform-origin:bottom right;transition:transform .25s ease,filter .25s ease}
.page-tab-next{right:0}.page-tab-prev{left:0;transform-origin:bottom left}
.page-tab svg{display:block;width:100%;height:100%;filter:drop-shadow(-2px -3px 3px #63304420)}
.page-tab-prev svg{transform:scaleX(-1)}
.page-tab svg path:first-child{fill:#ecd5cf;stroke:#c1a79a;stroke-width:1}
.page-tab svg path:last-child{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.page-tab:hover:not(:disabled),.page-tab:focus-visible{transform:scale(1.08);filter:brightness(1.04)}
.page-tab:disabled{visibility:hidden;pointer-events:none}
.page-number{bottom:30px;right:80px}.photo-page:after{left:80px;bottom:30px}
.navigation{margin-top:35px}
@media(max-width:700px){.page-tab{width:58px;height:58px}.story-page{padding-bottom:72px}.page-number{right:70px;bottom:22px}.navigation{margin-top:30px}}
@media(prefers-reduced-motion:reduce){.page-tab:hover:not(:disabled){transform:none}}