:root{--olive:#41452c;--cream:#eee9dc;--wine:#711f25;--ink:#f5f0e7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--olive);color:var(--ink);font-family:"Cormorant Garamond",serif}
body.locked{overflow:hidden}
.video-cover{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;width:100%;height:100vh;height:100dvh;overflow:hidden;background:#252719;cursor:pointer;transition:opacity .55s ease,visibility .55s ease}
.video-cover video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-shade{position:absolute;inset:0;background:linear-gradient(180deg,#17180c33,#17180c73)}
.open-message{position:relative;z-index:2;text-align:center;color:#fff;padding:25px;text-shadow:0 2px 15px #0009;pointer-events:none}
.open-message span{display:block;font-family:"Mrs Saint Delafield",cursive;font-size:clamp(48px,8vw,90px);line-height:1}
.open-message p{margin:14px 0 0;font:300 clamp(12px,1.8vw,17px) Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.video-cover.opened{opacity:0;visibility:hidden;pointer-events:none}
main{width:min(100%,520px);margin:auto;overflow:hidden}
.png-section{display:grid;place-items:center;padding:26px 16px}.png-section img{width:100%;height:auto;display:block}.hero{min-height:310px;padding-top:10px}
.collage{position:relative;min-height:345px;padding:20px 42px}.photo-strip{position:absolute;left:72px;top:15px;width:95px;padding:0;transform:rotate(4deg);z-index:2}.photo-strip img{display:block;width:100%;height:82px;object-fit:cover;margin-bottom:4px}
.paper-note{position:absolute;right:45px;top:105px;width:240px;min-height:140px;padding:33px 25px;background:#eeece4;color:#73232a;transform:rotate(-7deg);box-shadow:0 10px 18px #191b1250;font-size:22px}.paper-note:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 24px,#cbc5b830 25px);pointer-events:none}
.seal{position:absolute;right:28px;top:211px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#751d22;color:#d9a9a3;font-size:11px;transform:rotate(-10deg);box-shadow:0 3px 5px #1118}
.itinerary{padding:5px 55px 30px}.event{min-height:145px;display:flex;align-items:center;gap:28px}.event.reverse{flex-direction:row-reverse;justify-content:flex-end}.stamp{width:104px;height:118px;object-fit:cover;filter:drop-shadow(0 5px 3px #16170e70);transform:rotate(-6deg)}.stamp.tilted{transform:rotate(-14deg)}.event p{font-family:"Mrs Saint Delafield",cursive;font-size:34px;margin:0 0 8px;white-space:nowrap}
.button{display:inline-block;border:0;border-radius:18px;padding:6px 18px;background:#f3f0ea;color:#646457;font:11px Montserrat,sans-serif;text-decoration:none;box-shadow:0 2px 7px #1114}.gifts{padding:25px 15px 75px}.gifts a{display:block;width:100%}
.gallery{padding:0 32px 65px;position:relative}.frame{margin:0;background:transparent;border:0;box-shadow:none;padding:0}.frame img{display:block;width:100%;height:100%;object-fit:cover;filter:none}.frame.main{width:205px;height:275px;margin:0 auto 95px}.gallery-grid{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:24px 17px}.frame.square{height:115px}.frame.oval,.frame.small-oval{height:145px;border-radius:50%}.frame.oval img,.frame.small-oval img{border-radius:50%}.frame.tall{height:178px}.frame.wide{height:90px;grid-column:2}.frame.small-oval{height:110px;grid-column:3}.love{font-family:"Mrs Saint Delafield";font-size:25px;transform:rotate(-4deg);margin:-75px 0 0 15px;width:160px;text-align:center}
.farewell{min-height:380px;background-image:linear-gradient(#30321a28,#24241255),var(--bg);background-position:center;background-size:cover;display:grid;place-items:center;text-align:center}.farewell-content{padding:70px 20px}.farewell span{font-family:"Mrs Saint Delafield";font-size:42px}.farewell h1{font-weight:400;font-size:30px;margin:3px}.farewell p{font-size:14px}
.reveal{opacity:1;transform:none}.typewriter{display:inline-block;overflow:visible;width:auto}
@media(max-width:390px){.collage{padding-inline:20px}.photo-strip{left:35px}.paper-note{right:30px;width:215px}.event{gap:14px}.itinerary{padding-inline:28px}.event p{font-size:29px}.stamp{width:90px;height:104px}}
@media(min-width:760px){
  body{background:#30331f;padding:36px 0}
  main{width:min(94%,960px);background:var(--olive);box-shadow:0 20px 60px #17180f99}
  .hero{min-height:470px;padding:30px}
  .hero img{max-width:700px}
  .collage{width:680px;min-height:470px;margin:0 auto;padding-top:45px}
  .photo-strip{left:70px;top:30px;width:145px}
  .photo-strip img{height:120px}
  .paper-note{right:55px;top:150px;width:340px;min-height:185px;padding:45px 38px;font-size:28px}
  .seal{right:28px;top:285px;width:55px;height:55px}
  .itinerary{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;width:880px;margin:0 auto;padding:35px 25px 90px}
  .event,.event.reverse{min-height:260px;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:22px}
  .stamp{width:145px;height:165px}
  .event p{font-size:38px}
  .gifts{width:700px;margin:0 auto;padding-bottom:110px}
  .gallery{width:820px;margin:0 auto;padding-bottom:100px}
  .frame.main{width:310px;height:400px;margin-bottom:110px}
  .gallery-grid{gap:36px 34px}
  .frame.square{height:190px}.frame.oval{height:220px}.frame.tall{height:260px}.frame.wide{height:145px}.frame.small-oval{height:165px}
  .love{font-size:32px;width:230px;margin-top:-105px}
  .farewell{min-height:560px}
  .farewell span{font-size:60px}.farewell h1{font-size:42px}.farewell p{font-size:18px}.button{font-size:13px;padding:8px 22px}
}


/* ANIMACIONES SUAVES + PARALLAX LIGERO */
.hero img{
  --py:0px;
  transform:translate3d(0,var(--py),0);
  will-change:transform;
}
.paper-note{
  --py:0px;
  transform:translate3d(0,var(--py),0) rotate(-7deg);
  will-change:transform;
}
.photo-strip{
  --py:0px;
  transform:translate3d(0,var(--py),0) rotate(4deg);
  will-change:transform;
}
.seal{
  --py:0px;
  transform:translate3d(0,var(--py),0) rotate(-10deg);
  will-change:transform;
}

/* Entrada muy sutil para la galería */
.gallery .frame{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
}
.gallery.is-visible .frame{
  opacity:1;
  transform:translateY(0);
}
.gallery.is-visible .frame:nth-child(2){transition-delay:.08s}
.gallery.is-visible .frame:nth-child(3){transition-delay:.14s}
.gallery.is-visible .frame:nth-child(4){transition-delay:.20s}
.gallery.is-visible .frame:nth-child(5){transition-delay:.26s}

/* En celular: nota arriba y las 3 fotos debajo */
@media(max-width:759px){
  .collage{
    min-height:0;
    padding:28px 20px 38px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
  }
  .collage .paper-note{
    position:relative;
    right:auto;top:auto;left:auto;bottom:auto;
    width:min(82vw,280px);
    min-height:140px;
    margin:0 auto;
    order:1;
  }
  .collage .photo-strip{
    position:relative;
    left:auto;top:auto;right:auto;bottom:auto;
    width:min(76vw,245px);
    margin:0 auto;
    order:2;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
  }
  .collage .photo-strip img{
    width:100%;
    height:112px;
    margin:0;
    object-fit:cover;
  }
  .collage .seal{
    position:relative;
    right:auto;top:auto;left:auto;bottom:auto;
    order:3;
    margin-top:-6px;
    align-self:flex-end;
    margin-right:12%;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero img,.paper-note,.photo-strip,.seal{
    transform:none!important;
    will-change:auto;
  }
  .gallery .frame{
    opacity:1;
    transform:none;
    transition:none;
  }
}


/* CORRECCION DEFINITIVA MOVIL: NOTA ARRIBA, 3 FOTOS ABAJO */
@media screen and (max-width:759px){
  main .collage{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    min-height:auto!important;
    height:auto!important;
    padding:32px 18px 45px!important;
    gap:24px!important;
  }

  main .collage .paper-note{
    position:relative!important;
    inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    order:1!important;
    width:min(82vw,280px)!important;
    min-height:150px!important;
    margin:0 auto!important;
    z-index:3!important;
  }

  main .collage .photo-strip{
    position:relative!important;
    inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    order:2!important;
    width:min(88vw,330px)!important;
    margin:0 auto!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    z-index:2!important;
  }

  main .collage .photo-strip img{
    display:block!important;
    width:100%!important;
    height:125px!important;
    margin:0!important;
    object-fit:cover!important;
  }

  main .collage .seal{
    position:relative!important;
    inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    order:3!important;
    align-self:flex-end!important;
    margin:-12px 9% 0 0!important;
    z-index:4!important;
  }
}


/* EFECTOS VINTAGE SUAVES */
.fx-soft{
  opacity:0;
  transform:translateY(22px) scale(.985);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.fx-soft.fx-show{opacity:1;transform:translateY(0) scale(1)}

.itinerary .event.fx-soft:nth-child(2){transition-delay:.10s}
.itinerary .event.fx-soft:nth-child(3){transition-delay:.18s}

.gallery .frame.fx-soft{transition-duration:1s}
.gallery .frame.fx-soft:nth-child(even){transform:translateY(20px) rotate(1.2deg)}
.gallery .frame.fx-soft:nth-child(odd){transform:translateY(20px) rotate(-1deg)}
.gallery .frame.fx-soft.fx-show{transform:translateY(0) rotate(0)}

.stamp{transition:transform .8s ease, filter .8s ease}
.event.fx-show .stamp{animation:stampFloat 4.8s ease-in-out infinite}
@keyframes stampFloat{
  0%,100%{transform:rotate(-6deg) translateY(0)}
  50%{transform:rotate(-4deg) translateY(-5px)}
}
.event.fx-show .stamp.tilted{animation:stampFloatTilt 5.2s ease-in-out infinite}
@keyframes stampFloatTilt{
  0%,100%{transform:rotate(-14deg) translateY(0)}
  50%{transform:rotate(-11deg) translateY(-5px)}
}

.paper-note.fx-show{animation:noteBreathe 6s ease-in-out infinite}
@keyframes noteBreathe{
  0%,100%{filter:drop-shadow(0 7px 8px rgba(0,0,0,.12))}
  50%{filter:drop-shadow(0 11px 11px rgba(0,0,0,.18))}
}

.seal.fx-show{animation:sealSoft 4.5s ease-in-out infinite}
@keyframes sealSoft{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.12)}
}

.button{transition:transform .25s ease, box-shadow .25s ease}
.button:active{transform:scale(.96)}

@media(prefers-reduced-motion:reduce){
  .fx-soft,.fx-soft.fx-show{opacity:1!important;transform:none!important;transition:none!important}
  .stamp,.paper-note,.seal{animation:none!important}
}