:root{
  --desk:#2b1a1e; --paper:#fbf4e6; --paper2:#f3e7d0; --ink:#2d2a3d; --wine:#9c2f45; --seal:#8e1f33; --soft:#7a6a63;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:radial-gradient(ellipse at 50% 0%,#4a2a31 0,var(--desk) 60%) fixed;color:var(--ink);font-family:'Caveat',cursive;min-height:100vh;overflow-x:hidden}
body.locked{overflow:hidden;height:100vh}
#petals{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

/* ---------- ENVELOPE ---------- */
.stage{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;background:radial-gradient(ellipse at 50% 40%,#4a2a31 0,var(--desk) 70%);transition:opacity 1.4s ease 1.3s,visibility 0s 2.7s}
.stage.gone{opacity:0;visibility:hidden}
.stage-hint{font-family:'Cormorant Garamond',serif;font-style:italic;color:#e9d6c0;font-size:1.3rem;letter-spacing:.05em;animation:textIn 1.4s ease 2.3s backwards}
.stage-tap{color:#b99a90;font-size:1.3rem;animation:textIn 1.2s ease 3.1s backwards,pulse 2.4s ease-in-out 4.3s infinite}
@keyframes textIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes arrive{
  0%{transform:translate(0,-80vh) rotate(-16deg) scale(.72);opacity:0}
  12%{opacity:1}
  46%{transform:translate(12px,3vh) rotate(5deg) scale(1.02)}
  64%{transform:translate(-7px,-1.6vh) rotate(-2.4deg) scale(1)}
  82%{transform:translate(3px,.7vh) rotate(1deg)}
  100%{transform:none}
}
@keyframes sealIn{0%{opacity:0;transform:translate(-50%,-70%) scale(0)}60%{opacity:1;transform:translate(-50%,-70%) scale(1.25)}100%{opacity:1;transform:translate(-50%,-70%) scale(1)}}
.stage:not(.ready) .seal{pointer-events:none}
@keyframes pulse{50%{opacity:.35}}
.envelope{position:relative;width:min(86vw,380px);aspect-ratio:3/2;perspective:1200px;filter:drop-shadow(0 25px 35px rgba(0,0,0,.55));transition:transform 1.4s ease .9s;animation:arrive 2.6s cubic-bezier(.22,.7,.3,1) .3s backwards}
.stage.open .envelope{transform:translateY(60vh) scale(.9)}
.env-back{position:absolute;inset:0;background:#d9bf9a;border-radius:6px}
.env-front{position:absolute;inset:0;background:linear-gradient(160deg,#ecd5b0,#dcc09a);border-radius:6px;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);z-index:3}
.env-flap{position:absolute;left:0;right:0;top:0;height:58%;background:linear-gradient(#e6cca5,#d6b88f);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:4;transition:transform .9s ease,z-index 0s .45s;border-radius:6px 6px 0 0}
.stage.open .env-flap{transform:rotateX(180deg);z-index:1}
.env-to{position:absolute;left:0;right:0;bottom:12%;text-align:center;z-index:5;font-family:'Cormorant Garamond',serif;font-style:italic;color:#6a4a3a;font-size:1.15rem}
.env-to span{font-family:'Great Vibes',cursive;font-style:normal;font-size:2rem;color:var(--wine);margin-left:.2rem}
.seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-70%);z-index:6;width:88px;height:88px;border:0;background:none;padding:0;cursor:pointer;
  display:grid;place-items:center;animation:sealIn .9s ease 2.7s backwards,beat 2.4s ease-in-out 3.6s infinite;transition:opacity .4s}
.seal img{width:100%;height:100%;filter:drop-shadow(0 3px 5px rgba(70,40,20,.5))}
.vol-note{position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:40;white-space:nowrap;pointer-events:none;opacity:0;
  font-size:1.25rem;color:#f0dcc4;background:rgba(43,26,30,.78);padding:.25rem .95rem;border-radius:20px}
.vol-note svg{width:1.15em;height:1.15em;vertical-align:-.22em;margin-right:.35em;fill:none;stroke:#f0dcc4;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vol-note.on{animation:volNote 6.5s ease .4s forwards}
@keyframes volNote{0%{opacity:0;transform:translate(-50%,8px)}12%,72%{opacity:.9;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}
.seal:focus-visible{outline:2px solid #fff;outline-offset:4px}
.stage.open .seal{opacity:0;pointer-events:none}
@keyframes beat{0%,100%{transform:translate(-50%,-70%) scale(1)}50%{transform:translate(-50%,-70%) scale(1.08)}}
.stage.open .stage-hint,.stage.open .stage-tap{opacity:0;transition:opacity .5s}

/* ---------- CARTA ---------- */
.desk{position:relative;z-index:2;padding:3rem 1rem 6rem;opacity:0;transition:opacity 1.6s ease 1.8s}
.desk.show{opacity:1}
.paper{max-width:720px;margin:0 auto;padding:4rem clamp(1.4rem,6vw,4.5rem) 4rem;background:
    radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.55),transparent 60%),
    linear-gradient(var(--paper),var(--paper2));
  border-radius:3px;box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 0 1px rgba(120,80,40,.15);position:relative}
.paper::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;border-radius:3px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.paper>*{position:relative}

.head{text-align:right;margin-bottom:2.2rem}
.place{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--soft);font-size:1.1rem}

.ink{font-size:clamp(1.55rem,4.6vw,1.95rem);line-height:1.55;margin-bottom:1.6rem;color:var(--ink)}
.greeting{font-family:'Great Vibes',cursive;font-size:clamp(2.4rem,8vw,3.4rem);color:var(--wine);line-height:1.2;margin-bottom:1.8rem}
.soft{color:var(--soft);font-style:italic;text-align:center}
.closing{margin-top:2.4rem;text-align:right}
.signature{font-family:'Great Vibes',cursive;font-size:clamp(3rem,10vw,4.4rem);color:var(--wine);text-align:right;line-height:1;margin-bottom:2.6rem}
.ps{border-top:1px dashed rgba(45,42,61,.3);padding-top:1.4rem;font-size:clamp(1.4rem,4vw,1.7rem)}
.ps b{color:var(--wine);font-weight:600}

.stamp{display:flex;justify-content:flex-start;margin:2.2rem 0 1.6rem}
.stamp span{font-family:'Special Elite',monospace;font-size:.95rem;letter-spacing:.2em;color:var(--wine);border:2px solid var(--wine);padding:.35rem .8rem;border-radius:4px;transform:rotate(-3deg);opacity:.8}

.polaroid{width:min(78%,300px);background:#fffdf8;padding:.7rem .7rem 0;margin:2rem auto 2.4rem;box-shadow:0 10px 25px rgba(60,35,20,.3);position:relative}
.polaroid.a{transform:rotate(-2.5deg)}
.polaroid.b{transform:rotate(2deg)}
.polaroid::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:26px;transform:translateX(-50%) rotate(-3deg);background:rgba(240,215,160,.7);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.polaroid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;background:#e8dccb}
.pair{display:flex;gap:1.2rem;justify-content:center;align-items:flex-start;margin:2rem 0 2.4rem}
.pair .polaroid{width:calc(50% - .6rem);margin:0}
.pair .polaroid:nth-child(2){margin-top:1.6rem}
.pair .polaroid figcaption{font-size:1.15rem}
.pair:has(.polaroid:only-child) .polaroid{margin:0 auto}
.polaroid figcaption{font-size:1.35rem;text-align:center;padding:.5rem 0 .8rem;color:var(--ink)}

.divider{height:46px;margin:2.4rem 0;
  background:url(margarida.svg) 50% 50%/40px no-repeat,url(margarida.svg) calc(50% - 52px) 70%/24px no-repeat,url(margarida.svg) calc(50% + 52px) 70%/24px no-repeat,
    linear-gradient(90deg,transparent,rgba(156,47,69,.25) 20%,rgba(156,47,69,.25) 38%,transparent 38%,transparent 62%,rgba(156,47,69,.25) 62%,rgba(156,47,69,.25) 80%,transparent) 50% 60%/100% 1px no-repeat}

/* margaridas decorativas */
.ramo{position:absolute!important;width:74px;height:102px;background:url(ramo.svg) center/contain no-repeat;pointer-events:none;z-index:1}
.ramo-top{top:12px;left:10px;transform:rotate(-8deg)}
.ramo-bottom{bottom:10px;right:10px;transform:scaleX(-1) rotate(-4deg)}
.head{min-height:5.6rem}
.paper{padding-bottom:9rem}
.polaroid::after{content:"";position:absolute;width:44px;height:44px;background:url(margarida.svg) center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(60,35,20,.3))}
.polaroid.a::after{right:-14px;bottom:30px;transform:rotate(15deg)}
.polaroid.b::after{left:-14px;bottom:36px;transform:rotate(-20deg)}
.pair .polaroid::after{width:34px;height:34px}
.album-title::before,.album-title::after{content:"";display:inline-block;width:.8em;height:.8em;vertical-align:-.05em;margin:0 .35em;background:url(margarida.svg) center/contain no-repeat}
.signature::after{content:"";display:inline-block;width:.7em;height:.7em;margin-left:.3em;background:url(margarida.svg) center/contain no-repeat}

.reply{display:block;width:fit-content;margin:2.5rem auto 0;padding:.7rem 1.8rem;border:1.5px solid var(--wine);border-radius:40px;color:var(--wine);text-decoration:none;font-size:1.6rem;transition:background .3s,color .3s}
.reply:hover,.reply:focus-visible{background:var(--wine);color:#fff;outline:none}
.reply[hidden]{display:none}

.quote{font-size:clamp(1.45rem,4.2vw,1.8rem);line-height:1.5;color:var(--wine);border-left:3px solid rgba(156,47,69,.45);padding:.2rem 0 .2rem 1.2rem;margin:0 0 1.8rem;font-style:italic}

/* álbum */
.album{margin-top:3rem}
.album-title{font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(2.4rem,8vw,3.4rem);color:var(--wine);text-align:center;line-height:1.2;margin-bottom:.8rem}
.album-grid{columns:2;column-gap:.9rem;margin-top:1.8rem}
.thumb{display:block;width:100%;break-inside:avoid;margin:0 0 .9rem;padding:.4rem;background:#fffdf8;border:0;cursor:zoom-in;box-shadow:0 6px 16px rgba(60,35,20,.28);transition:transform .3s}
.thumb:nth-child(3n+1){transform:rotate(-1.4deg)}
.thumb:nth-child(3n+2){transform:rotate(1.1deg)}
.thumb:hover,.thumb:focus-visible{transform:scale(1.03) rotate(0);outline:none}
.thumb img{display:block;width:100%;height:auto}
@media(min-width:620px){.album-grid{columns:3}}

/* visualizador */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(20,10,13,.94);display:none;align-items:center;justify-content:center;padding:1rem}
.lightbox.on{display:flex}
.lightbox img{max-width:100%;max-height:86vh;border:8px solid #fffdf8;box-shadow:0 20px 60px #000}
.lb-btn{position:absolute;background:none;border:0;color:#f3e3d3;font-size:2.6rem;cursor:pointer;padding:.6rem 1rem;font-family:serif}
.lb-close{top:.4rem;right:.6rem}
.lb-prev{left:.2rem;top:50%;transform:translateY(-50%)}
.lb-next{right:.2rem;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:.8rem;left:0;right:0;text-align:center;color:#c9b3a3;font-size:1.3rem}

/* ink reveal */
.fade{opacity:0;filter:blur(4px);transform:translateY(14px);transition:opacity 1.6s ease,filter 1.6s ease,transform 1.6s ease}
.fade.in{opacity:1;filter:none;transform:none}
.pair .polaroid{width:calc(50% - .6rem)}
.polaroid.a.fade.in{transform:rotate(-2.5deg)}
.polaroid.b.fade.in{transform:rotate(2deg)}
.polaroid.a.fade{transform:rotate(-2.5deg) translateY(14px)}
.polaroid.b.fade{transform:rotate(2deg) translateY(14px)}
.stamp.fade.in span{opacity:.8}

.music{position:fixed;right:1rem;bottom:1rem;z-index:30;width:46px;height:46px;border-radius:50%;border:1px solid #d9bfa5;background:rgba(43,26,30,.85);color:#e9d6c0;font-size:1.2rem;cursor:pointer}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .fade{opacity:1;filter:none}
  .vol-note.on{opacity:.9}
}