:root{--azul-noche:#0a1f44;--azul:#1546a0;--celeste:#3b82f6;--cielo:#9fd0ff;--texto:#eaf3ff;--papel:#f5f9ff;--tinta:#12305e}*{box-sizing:border-box;margin:0}body{color:var(--texto);background:linear-gradient(135deg, var(--azul-noche), var(--azul), var(--celeste), var(--azul-noche));background-size:300% 300%;height:100dvh;font-family:Lora,Georgia,serif;animation:18s ease-in-out infinite alternate fondo;overflow:hidden}@keyframes fondo{to{background-position:100% 100%}}.corazones span{opacity:.35;pointer-events:none;animation:linear infinite flotar;position:fixed;bottom:-3rem}@keyframes flotar{0%{opacity:0;transform:translate(0)rotate(0)}15%{opacity:.4}50%{transform:translate(30px,-55vh)rotate(20deg)}to{opacity:0;transform:translate(-20px,-110vh)rotate(-15deg)}}.sobre{z-index:2;color:inherit;cursor:pointer;font:inherit;background:0 0;border:0;align-content:center;place-items:center;gap:1.5rem;transition:opacity .6s .9s,visibility 0s 1.5s;display:grid;position:fixed;inset:0}.sobre.abierto{opacity:0;visibility:hidden}.envelope{aspect-ratio:3/2;background:var(--papel);perspective:800px;border-radius:10px;width:min(80vw,360px);transition:transform .8s cubic-bezier(.5,-.4,.3,1.4) .3s;animation:1.8s ease-in-out infinite latido;position:relative;box-shadow:0 20px 50px #0007}.solapa{background:var(--cielo);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:1;transition:transform .6s;position:absolute;inset:0 0 40%}.envelope span{z-index:2;font-size:2.8rem;transition:transform .8s .2s;position:absolute;top:60%;left:50%;translate:-50% -50%}.sobre p{text-shadow:0 2px 12px #0006;font-family:Dancing Script,cursive;font-size:2.2rem;animation:2.5s ease-in-out infinite brillo}.sobre.abierto .envelope{animation:none;transform:translateY(30px)scale(.9)}.sobre.abierto .solapa{transform:rotateX(180deg)}.sobre.abierto .envelope span{transform:translateY(-140px)scale(2.2)}@keyframes latido{50%{transform:scale(1.04)rotate(-1deg)}}@keyframes brillo{50%{text-shadow:0 0 24px var(--cielo)}}.pasarela{scroll-snap-type:x mandatory;scrollbar-width:none;height:100dvh;display:flex;position:relative;overflow-x:auto}.pasarela::-webkit-scrollbar{display:none}.slide{scroll-snap-align:center;flex-direction:column;flex:0 0 100%;justify-content:center;align-items:center;gap:1.5rem;padding:2rem 16px 4rem;display:flex}.polaroid{opacity:0;background:#fff;padding:12px 12px 48px;transition:opacity .7s,transform .9s cubic-bezier(.3,1.5,.5,1);position:relative;transform:translateY(60px)rotate(-10deg)scale(.85);box-shadow:0 20px 50px #0008}.slide.activa .polaroid{opacity:1;transform:rotate(var(--r))}.slide.activa .polaroid:hover{transform:rotate(0)scale(1.03)}.marco{place-items:center;min-width:196px;min-height:196px;display:grid;overflow:hidden}.marco img{object-fit:cover;max-width:min(84vw,500px);max-height:56dvh;display:block}.slide.activa .marco img{animation:10s ease-out forwards acercar}@keyframes acercar{0%{transform:scale(1)}to{transform:scale(1.12)}}.falta{color:#7a8aa6;text-align:center;padding:1rem;font-size:.9rem}.slide>p{text-align:center;text-shadow:0 2px 14px #0007;opacity:0;max-width:30ch;font-family:Dancing Script,cursive;font-size:clamp(1.6rem,4.5vw,2.4rem);transition:opacity .8s .4s,transform .8s .4s;transform:translateY(20px)}.slide.activa>p{opacity:1;transform:none}.carta{background:var(--papel);color:var(--tinta);border-top:6px solid var(--celeste);opacity:0;border-radius:6px;gap:1rem;max-width:60ch;max-height:80dvh;padding:2.5rem 2rem;font-style:italic;line-height:1.8;transition:opacity .7s,transform .7s;display:grid;position:relative;overflow-y:auto;transform:translateY(40px)scale(.95);box-shadow:0 20px 50px #0008}.slide.activa .carta{opacity:1;transform:none}.carta>:is(p,.cierre){opacity:0;transition:opacity .6s,transform .6s;transform:translate(-15px)}.slide.activa .carta>:is(p,.cierre){opacity:1;transition-delay:calc(.5s + var(--i) * .35s);transform:none}.cierre{flex-direction:column;align-items:flex-end;margin-top:.5rem;display:flex}.firma{white-space:pre-line;text-align:right;color:var(--azul);font-family:Dancing Script,cursive;font-size:1.7rem;font-style:normal}.sello{width:56px;color:var(--azul);mix-blend-mode:multiply;opacity:0;margin:-.4rem 1.5rem 0 0;transform:scale(2.5)rotate(10deg)}.sello svg{width:100%;display:block}.slide.activa .sello{animation:.45s cubic-bezier(.5,0,.7,1.4) forwards estampar;animation-delay:calc(.5s + var(--i) * .35s)}@keyframes estampar{to{opacity:.85;transform:scale(1)rotate(-12deg)}}.flecha{z-index:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;background:#ffffff1f;border:1px solid #fff4;border-radius:50%;width:48px;height:48px;font-size:1.6rem;transition:transform .2s,opacity .3s,background .2s;animation:.6s 1.2s both aparecer;position:fixed;top:50%;translate:0 -50%}.flecha:hover:not(:disabled){background:#ffffff40;transform:scale(1.12)}.flecha:disabled{opacity:0;pointer-events:none}.prev{left:12px}.next{right:12px}.puntos{z-index:1;gap:8px;animation:.6s 1.2s both aparecer;display:flex;position:fixed;bottom:20px;left:50%;translate:-50%}.puntos button{cursor:pointer;background:#fff6;border:0;border-radius:99px;width:10px;height:10px;padding:0;transition:width .3s,background .3s}.puntos button.activo{background:var(--cielo);width:28px}@keyframes aparecer{0%{opacity:0;transform:translateY(10px)}}.flor{fill:currentColor;stroke:#fff6;stroke-width:1px;display:block}.corazones .flor{width:1.5em}.flor-esquina{color:#5b9cf5;z-index:1;filter:drop-shadow(0 2px 3px #0a1f4455);width:44px;position:absolute;top:-18px;left:-18px}.slide.activa .flor-esquina{animation:.8s .6s both florecer,4s ease-in-out 1.4s infinite mecer}.ramito{pointer-events:none;align-items:flex-end;display:flex;position:absolute}.ramito .flor{animation:4s ease-in-out infinite mecer;animation-delay:calc(var(--d) * -1.3s)}.ramito .flor:first-child{color:#3b6fd8;width:26px}.ramito .flor:nth-child(2){color:#5b9cf5;width:36px;margin-left:-8px}.ramito .flor:nth-child(3){color:#9fd0ff;width:22px;margin-left:-6px}.ramito-sobre{bottom:8px;left:10px}.ramito-carta{top:10px;right:12px}.slide.activa .ramito-carta .flor{animation:florecer .7s calc(.4s + var(--d) * .15s) both, mecer 4s 1.5s ease-in-out infinite}@keyframes florecer{0%{transform:scale(0)rotate(-120deg)}}@keyframes mecer{50%{transform:rotate(14deg)scale(1.05)}}.jardin{pointer-events:none;position:fixed;inset:auto 0 0}.jardin>svg:first-child{position:absolute}.rosa{height:var(--h);aspect-ratio:60/200;transform-origin:50% 100%;position:absolute;bottom:-4px;overflow:visible}.tallo{fill:none;stroke:#3f8f72;stroke-width:2.5px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px}.hoja{fill:#4aa07f;transform-box:fill-box;scale:0}.h1{transform-origin:100% 100%}.h2{transform-origin:0 100%}.capullo{stroke:#0c2a66;stroke-width:.6px;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 100%;scale:0}.caliz{fill:#3c8a6e;stroke:none}.espiral{fill:none;stroke:#9fd0ff;stroke-width:1.2px;stroke-linecap:round}.crece .tallo{animation:crecer 2s calc(1.2s + var(--d)) ease-out forwards}.crece .h1{animation:brotar .6s calc(1.8s + var(--d)) ease-out forwards}.crece .h2{animation:brotar .6s calc(2.4s + var(--d)) ease-out forwards}.crece .capullo{animation:abrir 1s calc(3s + var(--d)) cubic-bezier(.3, 1.5, .5, 1) forwards}.crece .rosa{animation:balanceo 6s calc(4s + var(--d)) ease-in-out infinite}@keyframes crecer{to{stroke-dashoffset:0}}@keyframes brotar{to{scale:1}}@keyframes abrir{0%{rotate:-40deg;scale:0}to{rotate:0deg;scale:1}}@keyframes balanceo{25%{rotate:2deg}75%{rotate:-2deg}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:10ms!important;transition-delay:0s!important;animation:none!important}.sello{opacity:.85;transform:rotate(-12deg)}.crece .tallo{stroke-dashoffset:0}.crece :is(.hoja,.capullo){scale:1}}
