@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
:root{--pink:#ff4fa2;--rose:#ff1f72;--gold:#ffd5a6;--ink:#fff7fb;--glass:rgba(35,8,34,.42)}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:#050008;color:var(--ink);font-family:Inter,sans-serif;overflow-x:hidden}
button{font:inherit} #stars{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.start-screen{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 45%,rgba(123,15,89,.3),rgba(0,0,0,.88))}
.start-card{text-align:center;max-width:620px;padding:42px;border:1px solid rgba(255,255,255,.15);border-radius:30px;background:rgba(15,2,18,.62);backdrop-filter:blur(16px);box-shadow:0 30px 90px rgba(255,31,114,.18)}
.eyebrow{display:block;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:#ffc0df;margin-bottom:12px}
h1,h2{font-family:"Cormorant Garamond",serif;margin:0}.start-card h1{font-size:clamp(3.7rem,10vw,7.5rem);line-height:.85;background:linear-gradient(120deg,#fff,#ff85be,#ffd6a3);-webkit-background-clip:text;color:transparent}
.start-card p{color:#e7d7e5;font-size:1.05rem}.start-card button,.primary{border:0;border-radius:999px;padding:15px 24px;background:linear-gradient(135deg,var(--rose),#ff73ba);color:white;font-weight:700;box-shadow:0 12px 35px rgba(255,31,114,.35);cursor:pointer}
.experience{position:relative;z-index:2;opacity:0;transform:translateY(20px);transition:.9s ease}.experience.active{opacity:1;transform:none}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:relative;z-index:4}
.brand{font-family:"Cormorant Garamond",serif;font-size:1.35rem}.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(20,0,22,.55);color:#fff;cursor:pointer}
.hero{min-height:calc(100vh - 76px);display:grid;grid-template-columns:minmax(280px,480px) minmax(420px,1fr);align-items:center;gap:30px;padding:24px 5vw 70px}
.intro-copy{position:relative;z-index:5}.intro-copy h2{font-size:clamp(3.2rem,6.4vw,6.8rem);line-height:.88}.intro-copy p{max-width:520px;line-height:1.7;color:#d9c9d7}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}.secondary{border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:14px 22px;background:rgba(255,255,255,.07);color:#fff;cursor:pointer;backdrop-filter:blur(10px)}
.heart-stage{height:min(76vh,760px);position:relative;perspective:1200px;touch-action:none}.photo-heart{position:absolute;inset:0;transform-style:preserve-3d;animation:autoSpin 26s linear infinite}
.photo-card{position:absolute;left:50%;top:50%;width:112px;height:142px;border-radius:15px;overflow:hidden;border:1px solid rgba(255,255,255,.45);box-shadow:0 0 22px rgba(255,58,153,.35),0 18px 35px rgba(0,0,0,.3);transform-style:preserve-3d;background:#170513}
.photo-card img{width:100%;height:100%;object-fit:cover}.heart-glow{position:absolute;inset:20% 12%;background:radial-gradient(circle,rgba(255,40,137,.28),transparent 65%);filter:blur(30px);pointer-events:none}
@keyframes autoSpin{to{transform:rotateY(360deg)}}.counter-section{padding:90px 5vw 120px;text-align:center;background:linear-gradient(transparent,rgba(68,0,46,.25),transparent)}
.counter-section h2{font-size:clamp(2.8rem,6vw,5.5rem)}.counter{max-width:980px;margin:38px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.counter div{padding:28px 10px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}
.counter strong{display:block;font-family:"Cormorant Garamond",serif;font-size:clamp(2.6rem,6vw,5rem);color:#ffd5e8}.counter span{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:#d7bed0}
.movie,.letter-modal{position:fixed;inset:0;z-index:70;opacity:0;pointer-events:none;transition:.5s ease}.movie.visible,.letter-modal.visible{opacity:1;pointer-events:auto}
.movie{background:#000}.movie-frame{position:absolute;inset:0;overflow:hidden}.movie img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:opacity .65s ease}.movie.playing img{animation:kenburns 5s ease-in-out both}
@keyframes kenburns{from{transform:scale(1.03) translate3d(-1%,0,0)}to{transform:scale(1.15) translate3d(1%,-1%,0)}}.movie-shade{position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(0,0,0,.8))}
.movie-caption{position:absolute;left:7vw;right:7vw;bottom:10vh}.movie-caption span{color:#ffc1df;letter-spacing:.2em}.movie-caption h2{font-size:clamp(2.5rem,7vw,6rem);max-width:1000px}.progress{position:absolute;left:7vw;right:7vw;bottom:5vh;height:3px;background:rgba(255,255,255,.25)}.progress i{display:block;height:100%;width:0;background:#ff5ba8}
.close{position:absolute;z-index:10;right:24px;top:20px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:#fff;font-size:2rem;cursor:pointer}
.letter-modal{display:grid;place-items:center;padding:28px;overflow:auto;background:#100008}.letter-backdrop{position:absolute;inset:0;background:url('assets/atardecer.jpg') center/cover;filter:blur(5px) brightness(.48);transform:scale(1.05)}
.letter-card{position:relative;z-index:4;width:min(680px,92vw);margin-left:min(34vw,430px);padding:42px;border-radius:28px;background:rgba(45,8,31,.82);border:1px solid rgba(255,220,235,.26);backdrop-filter:blur(14px);box-shadow:0 35px 100px rgba(0,0,0,.5)}
.letter-card h2{font-size:clamp(3rem,7vw,5.8rem);color:#ffd6e8}.letter-card p{line-height:1.75;color:#f1e3eb}.signature{font-family:"Cormorant Garamond",serif;font-size:1.5rem;color:#ffc0dc!important}
.bouquet-scene{position:absolute;z-index:5;left:6vw;bottom:8vh;width:360px;height:500px;perspective:1000px}.bouquet{position:absolute;inset:0;transform:translateY(120%) rotateX(18deg) rotateZ(-8deg);transition:1.3s cubic-bezier(.2,.9,.2,1);transform-style:preserve-3d}
.letter-modal.visible .bouquet{transform:translateY(0) rotateX(8deg) rotateZ(-5deg);animation:breathe 3s ease-in-out 1.3s infinite}.stems{position:absolute;left:150px;top:175px;width:52px;height:300px;background:linear-gradient(90deg,#184d2d,#4b8f46,#174127);clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}
.rose{position:absolute;width:108px;height:108px;border-radius:50%;background:radial-gradient(circle at 45% 48%,#ffb4cc 0 8%,#d91456 9% 20%,#7b0732 21% 33%,#ff316d 34% 48%,#8c0b39 49% 65%,#ee2765 66%);box-shadow:inset 0 0 18px #4f001e,0 10px 28px rgba(255,15,95,.35)}
.r1{left:55px;top:70px}.r2{left:135px;top:25px}.r3{left:220px;top:80px}.r4{left:95px;top:140px}.r5{left:185px;top:145px}.r6{left:145px;top:95px;transform:translateZ(35px)}
.leaf{position:absolute;width:75px;height:130px;background:linear-gradient(135deg,#69a95a,#17462d);border-radius:100% 0 100% 0}.l1{left:35px;top:205px;transform:rotate(-35deg)}.l2{left:250px;top:190px;transform:rotate(25deg)}.l3{left:80px;top:280px;transform:rotate(-50deg)}
.ribbon{position:absolute;left:100px;top:360px;width:165px;padding:15px;text-align:center;background:#e7c1a7;color:#5d1231;font-family:"Cormorant Garamond",serif;font-size:1.25rem;transform:rotate(-4deg);box-shadow:0 12px 30px rgba(0,0,0,.25)}
@keyframes breathe{50%{transform:translateY(-12px) rotateX(8deg) rotateZ(-2deg)}}.petal{position:absolute;top:-60px;width:18px;height:28px;border-radius:80% 20% 70% 30%;background:linear-gradient(#ff8eb8,#d71757);animation:fall linear forwards}
@keyframes fall{to{transform:translate3d(var(--drift),110vh,0) rotate(620deg);opacity:.2}}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:40px}.heart-stage{height:65vh}.intro-copy{text-align:center}.intro-copy p{margin-inline:auto}.hero-actions{justify-content:center}.photo-card{width:78px;height:100px}.counter{grid-template-columns:repeat(2,1fr)}.letter-card{margin:270px 0 40px}.bouquet-scene{left:50%;transform:translateX(-50%);top:40px;width:300px;height:400px}.bouquet{scale:.8;transform-origin:top center}}