:root{
  --wine:#6f2230;
  --gold:#b79a62;
  --ink:#51443a;
  --cream:#f2eadf;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#e9dece}
body{
  font-family:Georgia,"Times New Roman",serif;
  color:var(--ink);
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 15%,rgba(255,255,255,.9),transparent 35%),
    linear-gradient(145deg,#f3ebdf,#dccab3);
}
button,a{font:inherit}
.grain{
  position:fixed;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' 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%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}
.app{min-height:100dvh;position:relative}
.intro{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;text-align:center;
  background:linear-gradient(145deg,#f4ecdf,#dfcfba);
  transition:opacity 1s ease,visibility 1s;
}
.intro.hidden{opacity:0;visibility:hidden}
.intro>div{padding:24px;animation:introRise 1.2s var(--ease) both}
.intro span,.intro p{text-transform:uppercase;letter-spacing:.2em;color:#806d5b}
.intro span{font-size:12px}.intro p{font-size:11px;margin:0}
.intro h1{font-size:clamp(30px,8vw,58px);font-weight:400;color:var(--wine);margin:16px 0 12px}
@keyframes introRise{from{opacity:0;transform:translateY(14px)}}

.stage{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:max(12px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
.envelope-view,.card-view{
  grid-area:1/1;
  width:100%;
  display:grid;
  place-items:center;
  transition:opacity .75s ease,visibility .75s,transform 1s var(--ease);
}
.envelope-wrap{
  width:min(96vw,560px);
  position:relative;
  display:grid;
  place-items:center;
  animation:float 5.5s ease-in-out infinite;
}
.envelope-wrap img{
  width:100%;
  max-height:92dvh;
  object-fit:contain;
  display:block;
  box-shadow:0 30px 80px rgba(55,36,22,.27),0 4px 12px rgba(55,36,22,.14);
  border-radius:6px;
}
.envelope-wrap p{
  position:absolute;
  bottom:5.2%;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  white-space:nowrap;
  font-size:13px;
  letter-spacing:.08em;
  color:#685548;
}
@keyframes float{50%{transform:translateY(-7px)}}
.seal-button{
  position:absolute;left:50%;top:59.2%;
  width:clamp(84px,22vw,122px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:0;background:transparent;border-radius:50%;
  cursor:pointer;touch-action:manipulation;
}
.seal-button::before{
  content:"";position:absolute;inset:9%;border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,255,255,.58);animation:pulse 2.15s infinite;
}
@keyframes pulse{0%,60%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.58)}82%{box-shadow:0 0 0 19px rgba(255,255,255,0)}}
.seal-button.breaking{animation:sealBreak .62s var(--ease) forwards}
@keyframes sealBreak{
  24%{transform:translate(-50%,-50%) scale(1.08) rotate(-4deg)}
  58%{transform:translate(-50%,-50%) scale(.96) rotate(5deg)}
  100%{transform:translate(-50%,-50%) scale(.2);opacity:0}
}

.card-view{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(70px) scale(.95);
  overflow:auto;
  align-content:start;
}
.app.open .envelope-view{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-55px) scale(1.06);
}
.app.open .card-view{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
}
.card{
  width:min(94vw,560px);
  min-height:calc(100dvh - 24px);
  padding:clamp(24px,6vw,42px) clamp(22px,6vw,46px) 28px;
  background:
    linear-gradient(rgba(247,241,232,.91),rgba(247,241,232,.94)),
    url("/assets/papel.webp") center/cover;
  border:1px solid rgba(123,97,66,.22);
  box-shadow:0 28px 80px rgba(55,36,22,.25),0 4px 12px rgba(55,36,22,.12);
  text-align:center;
  position:relative;
}
.app.open .card{animation:cardRise 1.05s var(--ease) both}
@keyframes cardRise{from{opacity:0;transform:translateY(90px) scale(.94)}}
.crest{font-size:38px;color:var(--gold);margin-bottom:12px}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.16em;margin:0 0 8px}
.lead{font-size:12px;line-height:1.7;text-transform:uppercase;letter-spacing:.08em;margin:0}
.divider{display:flex;align-items:center;gap:10px;justify-content:center;margin:20px 0}
.divider span{height:1px;background:linear-gradient(90deg,transparent,var(--gold));width:70px}
.divider span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.divider b{color:var(--gold);font-size:13px}
.small-title{
  text-transform:uppercase;letter-spacing:.13em;font-size:18px;line-height:1.45;margin:0;color:#59493f
}
.small-title span{font-size:12px}
.card h2{
  margin:16px 0 0;
  color:var(--wine);
  font-size:clamp(39px,10vw,66px);
  line-height:.96;
  font-weight:400;
  font-family:"Brush Script MT","Segoe Script",cursive;
}
.details{display:grid;gap:16px;text-align:left;margin-top:8px}
.detail{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:14px;
  align-items:start;
}
.icon{
  width:44px;height:44px;border:1px solid rgba(183,154,98,.55);border-radius:50%;
  display:grid;place-items:center;color:var(--gold);font-size:20px;
}
.detail strong{text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.detail p{margin:4px 0 0;line-height:1.45;font-size:15px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0 0}
.actions a{
  min-height:48px;border-radius:999px;border:1px solid rgba(111,34,48,.2);
  background:rgba(255,255,255,.78);color:var(--wine);text-decoration:none;
  display:grid;place-items:center;font-weight:600;
}
.closing{font-style:italic;margin:22px 0 14px;font-size:14px}
.close-button{
  border:0;background:transparent;color:#7d6958;text-decoration:underline;cursor:pointer;
}
.music-button{
  position:fixed;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));
  z-index:60;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(111,34,48,.2);background:rgba(255,255,255,.9);
  color:var(--wine);box-shadow:0 9px 24px rgba(55,36,22,.13);
  opacity:0;pointer-events:none;transition:.4s;cursor:pointer;
}
.app.open .music-button{opacity:1;pointer-events:auto}
.music-button::after{content:"♫";font-size:19px;opacity:.55}
.music-button.playing::after{content:"♪";font-size:21px;opacity:1;animation:note .9s ease-in-out infinite alternate}
@keyframes note{to{transform:translateY(-2px) rotate(7deg)}}
.audio-notice{
  position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:70;
  transform:translateX(-50%);margin:0;background:#fff8ee;color:#665345;border:1px solid #d8c4aa;
  border-radius:12px;padding:10px 14px;font-size:12px;box-shadow:0 10px 24px rgba(55,36,22,.15);
  opacity:0;visibility:hidden;transition:.35s;text-align:center;white-space:nowrap;
}
.audio-notice.show{opacity:1;visibility:visible}
.sparkles{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.sparkles i{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(184,154,98,.5);opacity:0;animation:dust 5s linear infinite}
.sparkles i:nth-child(1){left:8%;top:85%;animation-delay:.2s}
.sparkles i:nth-child(2){left:25%;top:91%;animation-delay:1.4s}
.sparkles i:nth-child(3){left:42%;top:84%;animation-delay:2.3s}
.sparkles i:nth-child(4){left:59%;top:90%;animation-delay:.8s}
.sparkles i:nth-child(5){left:76%;top:86%;animation-delay:3s}
.sparkles i:nth-child(6){left:91%;top:93%;animation-delay:1.8s}
@keyframes dust{0%{transform:translateY(28px) scale(.5);opacity:0}20%{opacity:.72}100%{transform:translateY(-125px) scale(1.3);opacity:0}}
@media(max-width:430px){
  .stage{padding:0}
  .card{width:100%;min-height:100dvh;border-left:0;border-right:0;padding-top:max(28px,env(safe-area-inset-top))}
  .actions{grid-template-columns:1fr}
  .envelope-wrap{width:100vw}
  .envelope-wrap img{border-radius:0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}