:root{
  --crema:#fbf3ec;
  --crema-2:#f6e7e0;
  --rosa:#e8a1b0;
  --rosa-fuerte:#c9506f;
  --vino:#7a2540;
  --tinta:#4a2c36;
  --papel:#fffaf3;
  --sombra:0 18px 40px -18px rgba(122,37,64,.45);
  --manuscrita:'Caveat',cursive;
  --elegante:'Cormorant Garamond',Georgia,serif;
  --firma:'Great Vibes',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--elegante);
  color:var(--tinta);
  background:radial-gradient(circle at 20% 10%,#fff 0,var(--crema) 40%,var(--crema-2) 100%);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}
body.bloqueado{overflow:hidden}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* corazones flotantes de fondo */
.corazones{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.corazones span{
  position:absolute;bottom:-40px;color:var(--rosa);opacity:0;
  animation:subir linear infinite;
}
@keyframes subir{
  0%{transform:translateY(0) rotate(0);opacity:0}
  10%{opacity:.45}
  100%{transform:translateY(-110vh) rotate(40deg);opacity:0}
}

/* ---------- INTRO / SOBRE ---------- */
.intro{
  position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2.2rem;padding:1.5rem;
  background:radial-gradient(circle at 50% 30%,#fff 0,var(--crema) 55%,var(--crema-2) 100%);
  transition:opacity 1s ease,visibility 1s;
}
.intro.fuera{opacity:0;visibility:hidden}
.intro-texto{font-family:var(--firma);font-size:clamp(2.2rem,8vw,3.4rem);color:var(--vino);text-align:center;line-height:1.1}
.intro-pista{font-family:var(--manuscrita);font-size:1.4rem;color:var(--rosa-fuerte);animation:latido 1.8s ease-in-out infinite}
@keyframes latido{50%{transform:scale(1.07);opacity:.75}}

.sobre{
  position:relative;width:min(320px,82vw);aspect-ratio:3/2;perspective:900px;
  filter:drop-shadow(0 22px 22px rgba(122,37,64,.28));
  transition:transform .4s;
}
.sobre:hover{transform:translateY(-4px) rotate(-1deg)}
.sobre>*{position:absolute;display:block}
.sobre-fondo{inset:0;background:#e9b8c1;border-radius:6px}
.sobre-carta{
  left:7%;right:7%;top:6%;height:88%;background:var(--papel);border-radius:4px;
  transition:transform .9s cubic-bezier(.3,.9,.3,1) .55s;
  padding:14% 12%;
}
.sobre-lineas{
  display:block;height:100%;
  background:repeating-linear-gradient(transparent 0 11px,#e8c9ce 11px 12px);opacity:.8
}
.sobre-frente{
  inset:0;border-radius:6px;
  background:
    linear-gradient(to top right,transparent 49.5%,#dd9aa6 50%) left/50% 100% no-repeat,
    linear-gradient(to top left,transparent 49.5%,#d98e9c 50%) right/50% 100% no-repeat;
  /* mitad inferior del sobre */
  clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);
  background-color:#e4a5b1;
}
.sobre-solapa{
  left:0;right:0;top:0;height:56%;
  background:#d98e9c;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top;
  transition:transform .6s ease,z-index 0s .3s;
  z-index:3;border-radius:6px 6px 0 0;
}
.sello{
  left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d65a79,var(--vino));
  color:#ffd9e2;display:grid!important;place-items:center;font-size:1.6rem;z-index:4;
  box-shadow:0 3px 8px rgba(0,0,0,.35);transition:opacity .3s;
}
.sobre.abierto .sello{opacity:0}
.sobre.abierto .sobre-solapa{transform:rotateX(180deg);z-index:0}
.sobre.abierto .sobre-carta{transform:translateY(-62%)}
.sobre.abierto{pointer-events:none}

/* ---------- PÁGINA ---------- */
.pagina{position:relative;z-index:1;padding-bottom:6rem}
.pagina.visible .portada>*{animation:entra 1.2s ease both}
.pagina.visible .portada>*:nth-child(2){animation-delay:.2s}
.pagina.visible .portada>*:nth-child(3){animation-delay:.4s}
@keyframes entra{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.portada{min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1.2rem}
.portada-sup{font-family:var(--manuscrita);font-size:clamp(1.6rem,5vw,2.2rem);color:var(--rosa-fuerte)}
.portada h1{font-family:var(--firma);font-weight:400;font-size:clamp(3.6rem,15vw,8rem);line-height:1;color:var(--vino);margin:.4rem 0}
.portada-edad{font-family:var(--elegante);font-size:1.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--tinta)}
.bajar{margin-top:3rem;font-size:2rem;color:var(--rosa-fuerte);animation:rebota 1.6s ease-in-out infinite}
@keyframes rebota{50%{transform:translateY(10px)}}

/* papel de la carta */
.papel{
  position:relative;max-width:760px;margin:0 auto;padding:4rem 2.2rem 3.5rem;
  background:
    repeating-linear-gradient(transparent 0 35px,rgba(201,80,111,.12) 35px 36px),
    var(--papel);
  box-shadow:var(--sombra),0 0 0 1px rgba(122,37,64,.06);
  border-radius:4px;
  width:calc(100% - 2rem);
}
.papel::before{ /* margen rojo de cuaderno */
  content:"";position:absolute;left:2.4rem;top:0;bottom:0;width:1px;background:rgba(201,80,111,.3)
}
.cinta{
  position:absolute;top:-16px;left:50%;width:130px;height:34px;margin-left:-65px;
  background:rgba(232,161,176,.7);transform:rotate(-2deg);
  clip-path:polygon(3% 0,97% 0,100% 20%,96% 45%,100% 70%,97% 100%,3% 100%,0 75%,4% 50%,0 25%);
}
.parrafo{display:flow-root;margin-bottom:2.2rem;padding-left:1.2rem}
.parrafo p{font-family:var(--manuscrita);font-size:clamp(1.45rem,4.2vw,1.85rem);line-height:36px;color:var(--tinta)}
.polaroid-in{
  float:right;width:min(210px,44%);margin:.2rem 0 .8rem 1.2rem;
  transform:rotate(var(--giro,3deg));
}
.parrafo.alt .polaroid-in{float:left;margin:.2rem 1.2rem .8rem 0}
.despedida{font-family:var(--manuscrita);font-size:clamp(1.7rem,5vw,2.2rem);color:var(--vino);padding-left:1.2rem;line-height:1.4;margin-top:1rem}
.firma{font-family:var(--firma);font-size:clamp(2.2rem,8vw,3rem);color:var(--rosa-fuerte);text-align:right;margin-top:1rem}

/* polaroid */
.polaroid{
  background:#fff;padding:.55rem .55rem 0;box-shadow:0 10px 24px -10px rgba(0,0,0,.4);
  cursor:zoom-in;transition:transform .35s,box-shadow .35s;display:block;
  text-decoration:none;color:var(--tinta);
}
.polaroid:hover{transform:scale(1.05) rotate(0)!important;box-shadow:0 18px 30px -12px rgba(0,0,0,.45);z-index:2}
.polaroid img,.polaroid video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--crema-2)}
.polaroid .marco{position:relative}
.videos .polaroid video{aspect-ratio:4/3}
.videos .muro{grid-template-columns:repeat(auto-fit,minmax(220px,320px));justify-content:center}
.polaroid .play{
  position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:rgba(122,37,64,.78);color:#fff;font-style:normal;display:grid;place-items:center;
  font-size:1.3rem;padding-left:4px;box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.polaroid span{display:block;font-family:var(--manuscrita);font-size:1.25rem;text-align:center;padding:.5rem .2rem .6rem;color:var(--tinta);line-height:1.1}

/* razones */
.razones,.galeria{max-width:900px;margin:6rem auto 0;padding:0 1.2rem;text-align:center}
h2{font-family:var(--firma);font-weight:400;font-size:clamp(2.4rem,9vw,3.8rem);color:var(--vino);margin-bottom:2rem}
#listaRazones{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
#listaRazones li{
  background:rgba(255,255,255,.75);backdrop-filter:blur(4px);border:1px solid rgba(201,80,111,.18);
  border-radius:14px;padding:1.2rem 1rem;font-size:1.3rem;font-style:italic;font-weight:500;
  box-shadow:0 8px 18px -14px rgba(122,37,64,.5);position:relative;
}
#listaRazones li::before{content:"♥";display:block;color:var(--rosa-fuerte);font-style:normal;margin-bottom:.3rem}

/* galería */
.muro{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.8rem 1.4rem;padding:1rem 0}
.muro .polaroid{transform:rotate(var(--giro,-2deg))}

/* final */
.final{text-align:center;margin:6rem auto 0;padding:0 1.2rem}
.btn-sorpresa{
  font-family:var(--manuscrita);font-size:1.8rem;color:#fff;
  background:linear-gradient(135deg,var(--rosa-fuerte),var(--vino));
  padding:.8rem 2.2rem;border-radius:999px;box-shadow:0 14px 26px -12px var(--vino);
  transition:transform .25s;
}
.btn-sorpresa:hover{transform:translateY(-3px) scale(1.04)}
.mensaje-sorpresa{
  font-family:var(--manuscrita);font-size:clamp(1.8rem,5.5vw,2.6rem);color:var(--vino);
  max-width:620px;margin:2rem auto 0;line-height:1.3;
  opacity:0;transform:translateY(14px);transition:all 1s ease;
}
.mensaje-sorpresa.ver{opacity:1;transform:none}

/* música */
.musica{
  position:fixed;right:1rem;bottom:1rem;width:48px;height:48px;border-radius:50%;
  background:var(--vino);color:#fff;font-size:1.4rem;z-index:5;box-shadow:0 8px 18px rgba(0,0,0,.3)
}
.musica.suena{animation:gira 3s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* visor */
.visor{position:fixed;inset:0;z-index:30;background:rgba(40,12,22,.85);display:grid;place-items:center;padding:1rem;cursor:zoom-out}
.visor figure{background:#fff;padding:.8rem .8rem 0;max-width:min(92vw,620px);box-shadow:0 20px 50px rgba(0,0,0,.5);animation:entra .4s ease}
.visor img,.visor video{display:block;max-width:100%;max-height:72vh;margin:auto}
.visor figcaption{font-family:var(--manuscrita);font-size:1.6rem;text-align:center;padding:.7rem}

#confeti{position:fixed;inset:0;pointer-events:none;z-index:40;width:100%;height:100%}

/* aparecer al hacer scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.reveal.ver{opacity:1;transform:none}

@media (max-width:520px){
  .papel{padding:3rem 1.1rem 2.5rem}
  .papel::before{left:1rem}
  .parrafo{padding-left:.8rem}
  .polaroid-in,.parrafo.alt .polaroid-in{float:none;margin:0 auto 1rem;width:min(230px,70%);display:block}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}