:root{--white:#fffdfb;--gold:#c5a35a;--gold-light:#ead9ad;--rose:#c98f91;--rose-dark:#a96f73;--rose-light:#f3dfe0;--ink:#282324;--muted:#746b6c;--serif:'Cormorant Garamond',serif;--script:'Alex Brush',cursive;--sans:'Montserrat',sans-serif;--shadow:0 24px 60px rgba(83,51,53,.15)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);line-height:1.7;overflow-x:hidden}button,a{font:inherit}.intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;text-align:center;overflow:hidden;background:radial-gradient(circle at 50% 42%,#fff 0,#fffaf7 48%,#f4e2df 100%);transition:opacity 1.5s cubic-bezier(.4,0,.2,1),visibility 1.5s}.intro--leave{opacity:0;visibility:hidden}.intro__eyebrow,.kicker{text-transform:uppercase;letter-spacing:.24em;font-size:.7rem;font-weight:700;color:var(--gold)}.site{opacity:0;transition:opacity .7s}.site--visible{opacity:1}.envelope-scene{min-height:100svh;display:grid;place-items:center;padding:2rem 1rem;text-align:center;background:linear-gradient(155deg,#fff 0,#f9ecea 54%,#fff8eb 100%);position:relative;overflow:hidden}.envelope-scene__glow{position:absolute;width:75vw;height:75vw;border-radius:50%;background:rgba(197,163,90,.12);filter:blur(50px)}.envelope-wrap{position:relative;z-index:2}.envelope-wrap h2{font:600 clamp(2rem,8vw,3.5rem)/1 var(--serif);margin:.4rem 0 2rem}.envelope{position:relative;width:min(82vw,340px);aspect-ratio:1.45;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 25px 25px rgba(85,50,55,.18));perspective:900px}.envelope span{position:absolute;display:block}.envelope__back{inset:0;background:#d9a4a7;border-radius:8px}.envelope__letter{left:9%;right:9%;bottom:7%;height:82%;background:#fffdf8;border:1px solid #ebd9b0;display:flex!important;flex-direction:column;align-items:center;justify-content:center;transition:transform 1.1s .45s cubic-bezier(.2,.8,.2,1);z-index:2}.envelope__monogram{position:static!important;font:4rem var(--script);color:var(--rose-dark)}.envelope__small{position:static!important;text-transform:uppercase;letter-spacing:.25em;font-size:.65rem;color:var(--gold)}.envelope__front{inset:0;z-index:3;background:linear-gradient(30deg,#bd7f83 49%,transparent 50%),linear-gradient(-30deg,#c98f91 49%,transparent 50%);border-radius:8px}.envelope__flap{inset:0 0 auto;height:55%;z-index:4;background:#d49da0;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .8s cubic-bezier(.2,.8,.2,1)}.seal{z-index:5;left:50%;top:48%;width:76px;height:76px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#e4c476,#b58732 75%);box-shadow:0 7px 20px rgba(84,58,26,.25);animation:sealPulse 2s infinite}.seal span{inset:8px;border:1px solid rgba(255,255,255,.65);border-radius:50%;display:grid!important;place-items:center;font:2.3rem var(--script);color:#fff}.tap-hint{margin-top:1.5rem;color:var(--muted);font-size:.85rem;animation:float 2.5s infinite}.envelope--open .envelope__flap{transform:rotateX(180deg);z-index:1}.envelope--open .seal{animation:none;transform:translate(-50%,-50%) scale(0);transition:.45s}.envelope--open .envelope__letter{transform:translateY(-55%)}.envelope-scene--opening{animation:fadeScene 1s 1s forwards}.invitation{display:none}.invitation--visible{display:block;animation:pageOpen 1s both}.section{padding:6rem 1.25rem;position:relative}.section--full{min-height:100svh;display:grid;place-items:center}.container{width:min(1120px,100%);margin:auto}.narrow{width:min(760px,100%);text-align:center}.soft-bg{background:linear-gradient(180deg,#fdf8f6,#f7e8e7)}h2{font:600 clamp(2.2rem,8vw,4.3rem)/1.05 var(--serif);margin:.3rem 0 1.5rem}h3{font:600 1.7rem var(--serif)}p{margin:0 0 1rem}.lead{font:500 clamp(1.05rem,3.4vw,1.35rem)/1.8 var(--serif)}.script{font-family:var(--script);font-weight:400;color:var(--rose-dark)}.script--medium{font-size:clamp(4rem,13vw,7rem);margin:.3rem 0}.section-number{font:600 .8rem var(--sans);letter-spacing:.3em;color:var(--gold)}.section-intro{max-width:650px;margin:0 auto 2.5rem;text-align:center;color:var(--muted)}.hero{text-align:center;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.96),rgba(248,228,226,.9)),url('../images/gallery/foto-02.jpeg') center/cover}.hero__content{max-width:760px}.hero .script{font-size:clamp(5.5rem,20vw,12rem);line-height:.72;margin:.8rem 0}.hero__subtitle{font:600 clamp(1.7rem,7vw,3rem) var(--serif);letter-spacing:.15em;text-transform:uppercase}.hero__message{max-width:650px;margin:1.8rem auto;font-family:var(--serif);font-size:1.2rem}.date-pill{display:inline-block;padding:.55rem 1.3rem;border:1px solid var(--gold);border-radius:999px;color:#866c37;letter-spacing:.08em}.hero__ornament{position:absolute;top:8%;font-size:2rem;color:var(--gold);animation:float 3s infinite}.scroll-cue{position:absolute;bottom:1.5rem;width:24px;height:40px;border:1px solid var(--gold);border-radius:14px}.scroll-cue span{display:block;width:4px;height:8px;background:var(--gold);border-radius:4px;margin:7px auto;animation:scrollCue 1.7s infinite}.btn{display:inline-flex;justify-content:center;align-items:center;padding:.9rem 1.5rem;border-radius:999px;text-decoration:none;border:1px solid transparent;font-weight:700;font-size:.86rem;letter-spacing:.04em;transition:.25s}.btn--primary{background:var(--rose-dark);color:#fff;box-shadow:0 12px 30px rgba(169,111,115,.25)}.btn--primary:hover{transform:translateY(-2px);background:#955f63}.btn--outline{border-color:var(--gold);color:#846b38;background:#fff}.btn--full{width:100%}.divider{display:flex;align-items:center;gap:1rem;margin:2rem auto;color:var(--gold)}.divider:before,.divider:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold),transparent)}blockquote{margin:1.5rem 0;font:italic 1.5rem/1.6 var(--serif);color:#5c5052}.portrait-grid{display:grid;gap:3rem;align-items:center}.portrait-frame{position:relative;padding:12px;border:1px solid var(--gold);border-radius:180px 180px 22px 22px;box-shadow:var(--shadow)}.portrait-frame:before{content:'';position:absolute;inset:-12px 18px;border:1px solid var(--gold-light);border-radius:180px 180px 22px 22px}.portrait-frame img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:165px 165px 14px 14px}.names-grid,.event-grid,.details-grid,.memory-grid{display:grid;gap:1.25rem}.name-card,.event-card,.detail-card,.memory-form{background:rgba(255,255,255,.82);border:1px solid rgba(197,163,90,.3);border-radius:24px;padding:2rem;box-shadow:0 18px 50px rgba(80,50,53,.08)}.name-card{text-align:center}.name-card span{color:var(--gold);text-transform:uppercase;letter-spacing:.15em;font-size:.72rem}.name-card h3{margin:.8rem 0}.name-card p{font-family:var(--script);font-size:2rem;color:var(--rose)}.countdown-section{text-align:center;background:#fff}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:2rem}.countdown div{padding:1rem .35rem;border:1px solid var(--gold-light);border-radius:18px;background:#fffaf5}.countdown strong{display:block;font:600 clamp(1.7rem,7vw,3rem) var(--serif);color:var(--rose-dark)}.countdown span{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.today{grid-column:1/-1;font:3rem var(--script);color:var(--rose-dark)}.event-card{text-align:center}.event-card__icon{font-size:2rem;color:var(--gold)}.event-time{font-weight:700;color:var(--rose-dark)}.timeline{list-style:none;padding:0;margin:2.5rem 0 0;position:relative}.timeline:before{content:'';position:absolute;left:68px;top:0;bottom:0;width:1px;background:var(--gold-light)}.timeline li{display:grid;grid-template-columns:55px 1fr;gap:2rem;text-align:left;padding:0 0 2rem;position:relative}.timeline li:before{content:'';position:absolute;left:62px;top:.55rem;width:13px;height:13px;border-radius:50%;background:var(--rose);border:3px solid var(--white)}.timeline time{font-size:.75rem;color:var(--gold);font-weight:700}.timeline span{font:600 1.35rem var(--serif)}.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.gallery__item{border:0;padding:0;background:none;border-radius:18px;overflow:hidden;cursor:pointer}.gallery__item img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .5s}.gallery__item:hover img{transform:scale(1.04)}.detail-card{text-align:center}.detail-card__icon{font-size:2rem;color:var(--gold)}.memory-grid{align-items:start}.privacy-list{padding:0;list-style:none}.privacy-list li{padding:.55rem 0 .55rem 1.8rem;position:relative}.privacy-list li:before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700}.field{margin-bottom:1.25rem}.field label{display:block;font-weight:700;font-size:.86rem;margin-bottom:.45rem}.field label span,.field small{font-weight:400;color:var(--muted)}input,textarea{width:100%;border:1px solid #dbc7c2;border-radius:14px;padding:.9rem 1rem;background:#fff;font:inherit;color:var(--ink);outline:none}input:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,163,90,.12)}.field>small{display:block;text-align:right}.file-drop{padding:1.7rem;border:1.5px dashed var(--gold)!important;border-radius:18px;text-align:center;background:#fffaf7;cursor:pointer}.file-drop input{position:absolute;opacity:0;pointer-events:none}.file-drop span,.file-drop strong,.file-drop small{display:block}.file-drop__icon{font-size:2rem;color:var(--gold)}.photo-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem}.photo-preview figure{margin:0}.photo-preview img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}.photo-preview figcaption{font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-progress{height:7px;background:#eadfdb;border-radius:10px;margin-top:1rem;overflow:hidden}.upload-progress span{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}.form-status{margin:.8rem 0 0;font-size:.85rem}.form-status.success{color:#19734a}.form-status.error{color:#a63232}.rsvp-section{text-align:center}.deadline{font-size:.8rem;color:var(--muted);margin-top:1rem}.finale{text-align:center;background:linear-gradient(rgba(53,34,36,.68),rgba(53,34,36,.68)),url('../images/gallery/foot.jpeg') center/cover;color:#fff}.finale .script{font-size:clamp(5rem,18vw,10rem);color:#fff}.music-toggle{position:fixed;right:1rem;bottom:1rem;z-index:50;width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:var(--rose-dark);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.2);font-size:1.2rem}.music-toggle.is-playing{animation:spin 5s linear infinite}.lightbox{width:min(94vw,900px);border:0;padding:0;background:transparent}.lightbox::backdrop{background:rgba(30,20,22,.92)}.lightbox img{width:100%;max-height:86vh;object-fit:contain}.lightbox button{position:fixed;right:1rem;top:1rem;width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:1.6rem}.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}.reveal.is-visible{opacity:1;transform:none}@media(min-width:760px){.section{padding:8rem 2rem}.portrait-grid{grid-template-columns:minmax(280px,.8fr) 1.2fr}.names-grid,.event-grid,.details-grid{grid-template-columns:repeat(2,1fr)}.memory-grid{grid-template-columns:.9fr 1.1fr;gap:4rem}.gallery{grid-template-columns:repeat(3,1fr)}.gallery__item:nth-child(2),.gallery__item:nth-child(5){transform:translateY(2rem)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}@keyframes introTitle{0%{opacity:0;transform:scale(.8);filter:blur(10px)}55%{opacity:1;filter:blur(0)}100%{transform:scale(1)}}@keyframes sealPulse{50%{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 7px 28px rgba(197,163,90,.55)}}@keyframes float{50%{transform:translateY(-8px)}}@keyframes fadeScene{to{opacity:0;transform:scale(1.05)}}@keyframes pageOpen{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@keyframes scrollCue{to{transform:translateY(14px);opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}

/* Apertura premium: destellos dorados temporales */
.opening-sparkles{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}.opening-sparkle{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:radial-gradient(circle,#fff 0 18%,#efd48c 35%,#c5a35a 68%,transparent 72%);opacity:0;filter:drop-shadow(0 0 5px rgba(197,163,90,.85))}.opening-sparkle--star{border-radius:0;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%)}.opening-sparkles--active .opening-sparkle{animation:openingSparkle var(--duration) cubic-bezier(.16,.75,.28,1) var(--delay) both}.envelope:disabled{cursor:default}.music-toggle{cursor:pointer}.music-toggle:focus-visible,.envelope:focus-visible{outline:3px solid rgba(197,163,90,.5);outline-offset:5px}
@keyframes openingSparkle{0%{opacity:0;transform:translate3d(0,12px,0) scale(.25) rotate(0)}18%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(1.15) rotate(160deg)}}

/* =========================================================
   Transiciones de apertura y revelado v1.2.0
   ========================================================= */
html.js body.is-intro-active,
html.js body:not(.invitation-is-open) {
  overscroll-behavior-y: none;
}

/* El atributo hidden siempre debe retirar el elemento del flujo. */
[hidden] {
  display: none !important;
}

.envelope-scene {
  position: relative;
  z-index: 20;
  opacity: 1;
  transform: translateZ(0) scale(1);
  transition:
    opacity .72s cubic-bezier(.4, 0, .2, 1),
    transform 1.05s cubic-bezier(.22, 1, .36, 1),
    filter .72s ease;
  will-change: opacity, transform, filter;
}

.envelope-scene--opening .envelope-wrap {
  animation: envelopeWrapLift 1.25s cubic-bezier(.22, 1, .36, 1) both;
}

.envelope-scene--exit {
  opacity: 0;
  transform: scale(1.075);
  filter: blur(8px);
  pointer-events: none;
}

/* La invitación se coloca debajo del sobre durante la transición.
   Al ocultar el sobre ya ocupa exactamente el primer viewport. */
.invitation {
  display: none;
  min-height: 100svh;
  opacity: 0;
  transform: scale(.985);
  transform-origin: 50% 20%;
}

.invitation--entering,
.invitation--visible {
  display: block;
}

.invitation--entering {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  background: var(--white);
}

.invitation--visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s cubic-bezier(.22, 1, .36, 1),
    transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

.invitation--visible:not(.invitation--entering) {
  position: relative;
  inset: auto;
  z-index: auto;
  overflow: visible;
  pointer-events: auto;
}

.hero {
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  width: min(70vw, 760px);
  aspect-ratio: 1;
  top: -28%;
  left: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.92), rgba(255,255,255,0) 68%);
  transform: translateX(-50%);
  animation: heroHalo 7s ease-in-out infinite alternate;
}

.hero::after {
  width: 240px;
  height: 240px;
  right: -90px;
  bottom: -90px;
  border: 1px solid rgba(197,163,90,.24);
  box-shadow: 0 0 0 36px rgba(197,163,90,.045), 0 0 0 72px rgba(201,143,145,.035);
}

.hero__content--opening > * {
  opacity: 0;
  transform: translateY(24px);
  animation: heroElementIn .82s cubic-bezier(.22,1,.36,1) forwards;
}
.hero__content--opening > *:nth-child(1) { animation-delay: .10s; }
.hero__content--opening > *:nth-child(2) { animation-delay: .24s; }
.hero__content--opening > *:nth-child(3) { animation-delay: .38s; }
.hero__content--opening > *:nth-child(4) { animation-delay: .50s; }
.hero__content--opening > *:nth-child(5) { animation-delay: .62s; }
.hero__content--opening > *:nth-child(6) { animation-delay: .75s; }

.reveal {
  opacity: 0;
  transform: translate3d(0, 42px, 0) scale(.985);
  filter: blur(5px);
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms),
    transform 1s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms),
    filter .8s ease var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

.portrait-frame.reveal {
  transform: translate3d(-42px, 24px, 0) rotate(-1.2deg) scale(.97);
}
.portrait-frame.reveal.is-visible {
  transform: translate3d(0,0,0) rotate(0) scale(1);
}

.event-card.reveal:nth-child(even),
.detail-card.reveal:nth-child(even) {
  transform: translate3d(34px, 28px, 0) scale(.98);
}
.event-card.reveal:nth-child(even).is-visible,
.detail-card.reveal:nth-child(even).is-visible {
  transform: translate3d(0,0,0) scale(1);
}

.gallery__item.reveal {
  transform: translate3d(0, 30px, 0) scale(.94);
}
.gallery__item.reveal.is-visible {
  transform: translate3d(0,0,0) scale(1);
}

.section::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(110px, 24vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(197,163,90,.5), transparent);
}

@keyframes envelopeWrapLift {
  0% { transform: translateY(0) scale(1); }
  54% { transform: translateY(-10px) scale(1.025); }
  100% { transform: translateY(-34px) scale(1.055); }
}

@keyframes heroElementIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroHalo {
  from { transform: translateX(-50%) scale(.94); opacity: .7; }
  to { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

@media (min-width: 760px) {
  .hero__content {
    padding-top: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .envelope-scene,
  .invitation,
  .reveal,
  .hero__content--opening > * {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
  .hero__content--opening > *,
  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* Introducción cinematográfica v1.3.0 */
.intro__halo {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(76vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(244,223,220,.42) 48%, transparent 72%);
  filter: blur(8px);
  animation: introHaloBreath 5.4s ease-in-out infinite alternate;
}
.intro__sequence {
  position: relative;
  z-index: 2;
  width: min(92vw, 1000px);
  min-height: 55vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}
.intro__scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(.97);
  filter: blur(9px);
  transition: opacity .9s ease, transform 1.25s cubic-bezier(.16,1,.3,1), filter .9s ease, visibility .9s;
  pointer-events: none;
}
.intro__scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.intro__scene.is-leaving {
  opacity: 0;
  transform: translateY(-18px) scale(1.025);
  filter: blur(8px);
}
.intro__scene--blessing p,
.intro__scene--chapter p {
  margin: 0;
  max-width: 850px;
  font: 500 clamp(2rem, 7vw, 4.8rem)/1.15 var(--serif);
  color: var(--ink);
}
.intro__scene--chapter p {
  font-style: italic;
  color: #5c5052;
}
.intro__ornament {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--gold);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  animation: introStarPulse 1.9s ease-in-out infinite;
}
.intro__scene--name h1 {
  margin: .2rem 0 -.15rem;
  max-width: 95vw;
  font: clamp(4.2rem, 16vw, 10.5rem)/.78 var(--script);
  color: var(--rose-dark);
  text-shadow: 0 14px 45px rgba(169,111,115,.12);
}
.intro__scene--name > span {
  margin-top: 1.35rem;
  font: 600 clamp(1.2rem, 4vw, 2.25rem)/1 var(--serif);
  text-transform: uppercase;
  letter-spacing: clamp(.16em, 1vw, .34em);
  color: var(--ink);
}
.intro__scene--name.is-active h1 {
  animation: introNameZoom 3.2s cubic-bezier(.16,1,.3,1) both;
}
.intro__scene--name.is-active > span,
.intro__scene--name.is-active .intro__eyebrow {
  animation: introTextRise 1.2s .45s both;
}
.intro__sparkles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.intro-sparkle {
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, #d7b35c 38%, rgba(197,163,90,0) 72%);
  opacity: 0;
  animation: introSparkleFloat var(--duration) var(--delay) ease-in-out infinite;
}
.intro-sparkle--star {
  border-radius: 0;
  background: var(--gold);
  clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
@keyframes introHaloBreath {
  from { transform: translate(-50%,-50%) scale(.92); opacity: .72; }
  to { transform: translate(-50%,-50%) scale(1.08); opacity: 1; }
}
@keyframes introStarPulse {
  0%,100% { transform: scale(.9) rotate(0); opacity: .68; }
  50% { transform: scale(1.18) rotate(45deg); opacity: 1; }
}
@keyframes introNameZoom {
  from { opacity: 0; transform: scale(.88); letter-spacing: .015em; }
  35% { opacity: 1; }
  to { opacity: 1; transform: scale(1.035); letter-spacing: 0; }
}
@keyframes introTextRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes introSparkleFloat {
  0%,100% { opacity: 0; transform: translateY(15px) scale(.5) rotate(0); }
  22% { opacity: .8; }
  55% { opacity: .95; transform: translateY(-16px) scale(1.15) rotate(90deg); }
  82% { opacity: .2; }
}
@media (max-width: 560px) {
  .intro__sequence { min-height: 64vh; }
  .intro__scene--name h1 { font-size: clamp(4rem, 22vw, 7rem); line-height: .82; }
  .intro__scene--name > span { margin-top: 1.1rem; letter-spacing: .2em; }
}
@media (prefers-reduced-motion: reduce) {
  .intro__halo,
  .intro-sparkle,
  .intro__scene--name.is-active h1,
  .intro__scene--name.is-active > span,
  .intro__scene--name.is-active .intro__eyebrow {
    animation: none !important;
  }

  /* Conservamos únicamente el fundido para que las tres frases se lean. */
  .intro__scene {
    transform: none !important;
    filter: none !important;
    transition: opacity .65s ease, visibility .65s ease !important;
  }
  .intro__scene.is-leaving {
    transform: none !important;
    filter: none !important;
  }
}

/* Apertura del sobre y revelado progresivo v1.4.0 */
.envelope-scene {
  isolation: isolate;
}

.envelope-wrap {
  transition: opacity .8s ease, transform 1s cubic-bezier(.22,1,.36,1);
}

.envelope__letter {
  transform-origin: 50% 75%;
  will-change: transform, opacity, box-shadow;
}

/* Primera fase: la carta comienza a salir después de abrirse la solapa. */
.envelope--open .envelope__letter {
  transform: translateY(-18%);
  transition: transform 1.15s .55s cubic-bezier(.22,1,.36,1),
              box-shadow .8s ease;
}

.envelope--letter-out .envelope__letter {
  z-index: 6;
  transform: translateY(-88%) scale(1.04);
  box-shadow: 0 28px 70px rgba(83,51,53,.22);
}

.envelope-scene--letter-out .tap-hint,
.envelope-scene--letter-out .kicker,
.envelope-scene--letter-out .envelope-wrap > h2 {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .55s ease, transform .7s ease;
}

/* Segunda fase: la carta se acerca y ocupa la pantalla. */
.envelope--letter-expand {
  filter: none;
  z-index: 8;
}

.envelope--letter-expand .envelope__letter {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: auto;
  top: 50%;
  width: min(88vw, 620px);
  height: min(82vh, 760px);
  transform: translate(-50%, -50%) scale(1.08);
  border-radius: 22px;
  box-shadow: 0 34px 100px rgba(83,51,53,.25);
  transition: all 1.05s cubic-bezier(.22,1,.36,1);
}

.envelope-scene--expanding .envelope__back,
.envelope-scene--expanding .envelope__front,
.envelope-scene--expanding .envelope__flap,
.envelope-scene--expanding .seal {
  opacity: 0;
  transition: opacity .55s ease;
}

.envelope-scene--exit {
  opacity: 0;
  transform: scale(1.025);
  pointer-events: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
}

.invitation--entering {
  opacity: 0;
  transform: scale(.985);
}

.invitation--visible {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease, transform 1.05s cubic-bezier(.22,1,.36,1);
}

/* Cada elemento entra al hacer scroll, no la sección completa. */
.invitation .reveal {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 54px, 0) scale(.975);
  filter: blur(7px);
  transition:
    opacity .95s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms),
    transform 1.05s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms),
    filter .85s ease var(--reveal-delay, 0ms),
    visibility 0s linear var(--reveal-delay, 0ms);
}

.invitation .reveal.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

.invitation .portrait-frame.reveal {
  transform: translate3d(-54px, 34px, 0) rotate(-1.6deg) scale(.95);
}

.invitation .portrait-frame.reveal.is-visible {
  transform: translate3d(0,0,0) rotate(0) scale(1);
}

.invitation .event-card.reveal:nth-child(even),
.invitation .detail-card.reveal:nth-child(even),
.invitation .name-card.reveal:nth-child(even) {
  transform: translate3d(48px, 38px, 0) scale(.965);
}

.invitation .gallery__item.reveal {
  transform: translate3d(0, 42px, 0) scale(.9);
}

.invitation .timeline > li.reveal {
  transform: translate3d(-34px, 28px, 0);
}

@media (max-width: 759px) {
  .envelope--letter-expand .envelope__letter {
    width: 90vw;
    height: 72vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .envelope--letter-expand .envelope__letter {
    transition-duration: .25s !important;
  }

  /* Conserva el revelado por scroll, pero sin desplazamientos bruscos. */
  .invitation .reveal {
    opacity: 0;
    visibility: hidden;
    transform: none;
    filter: none;
    transition: opacity .35s ease !important;
  }

  .invitation .reveal.is-visible {
    opacity: 1;
    visibility: visible;
  }
}

/* =========================================================
   Ajustes finales v1.4.2
   ========================================================= */
.intro__sparkles{overflow:hidden}
.intro-sparkle{opacity:0;filter:drop-shadow(0 0 6px rgba(197,163,90,.75));will-change:transform,opacity}
.intro-sparkle--star{filter:drop-shadow(0 0 8px rgba(197,163,90,.9))}
.intro.intro--sparkles-ready .intro-sparkle{animation-name:introSparkleFloat}
.intro{transition:opacity 1.8s cubic-bezier(.4,0,.2,1),visibility 1.8s}

.envelope__flap{transition:transform 1.65s cubic-bezier(.22,.78,.25,1)}
.envelope--open .seal{transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .65s ease;opacity:0}
.envelope--open .envelope__letter{
  transform:translateY(-14%);
  transition:transform 1.55s .65s cubic-bezier(.22,1,.36,1),box-shadow 1.1s ease
}
.envelope--letter-out .envelope__letter{
  z-index:6;
  transform:translateY(-96%) scale(1.045);
  box-shadow:0 32px 78px rgba(83,51,53,.24);
  transition:transform 2.15s cubic-bezier(.22,1,.36,1),box-shadow 1.4s ease
}
.envelope--letter-expand .envelope__letter{
  position:fixed;left:50%;right:auto;bottom:auto;top:50%;
  width:min(90vw,650px);height:min(84vh,790px);
  transform:translate(-50%,-50%) scale(1.08);
  border-radius:24px;
  box-shadow:0 40px 110px rgba(83,51,53,.27);
  transition:left 2.15s cubic-bezier(.22,1,.36,1),
             top 2.15s cubic-bezier(.22,1,.36,1),
             width 2.15s cubic-bezier(.22,1,.36,1),
             height 2.15s cubic-bezier(.22,1,.36,1),
             transform 2.15s cubic-bezier(.22,1,.36,1),
             border-radius 1.8s ease,
             box-shadow 1.8s ease
}
.envelope-scene--exit{
  transition:opacity 1.35s ease,
             transform 1.5s cubic-bezier(.22,1,.36,1),
             filter 1.35s ease
}
.invitation--visible{
  transition:opacity 1.25s ease,
             transform 1.4s cubic-bezier(.22,1,.36,1)
}
.invitation .reveal{
  transition:opacity 1.05s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),
             transform 1.15s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),
             filter .95s ease var(--reveal-delay,0ms),
             visibility 0s linear var(--reveal-delay,0ms)
}
@media(max-width:759px){
  .envelope--letter-expand .envelope__letter{width:92vw;height:76vh}
}


/* =========================================================
   Corrección móvil definitiva v1.4.5
   ========================================================= */

@media (max-width: 759px) {
  /* Todos los contenedores ocupan exactamente el ancho disponible */
  .section,
  .container,
  .narrow,
  .event-grid,
  .details-grid,
  .names-grid,
  .memory-grid,
  .timeline {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .event-grid,
  .details-grid,
  .names-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .event-card,
  .detail-card,
  .name-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  /* En móvil todas las tarjetas entran únicamente desde abajo */
  .invitation .event-card.reveal,
  .invitation .detail-card.reveal,
  .invitation .name-card.reveal,
  .invitation .portrait-frame.reveal,
  .invitation .gallery__item.reveal {
    transform: translate3d(0, 32px, 0) scale(.98) !important;
  }

  .invitation .event-card.reveal.is-visible,
  .invitation .detail-card.reveal.is-visible,
  .invitation .name-card.reveal.is-visible,
  .invitation .portrait-frame.reveal.is-visible,
  .invitation .gallery__item.reveal.is-visible {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  /* Timeline móvil reconstruida para no cortar horas ni textos */
  .timeline {
    padding: 0;
    margin-top: 2.25rem;
    overflow: visible;
  }

  .timeline::before {
    left: 94px !important;
    top: 8px;
    bottom: 10px;
  }

  .timeline li {
    display: grid;
    grid-template-columns: 78px 32px minmax(0, 1fr) !important;
    column-gap: 0 !important;
    width: 100%;
    max-width: 100%;
    padding: 0 0 2rem 0;
    margin: 0;
    transform: translate3d(0, 28px, 0) !important;
  }

  .timeline li.is-visible {
    transform: translate3d(0, 0, 0) !important;
  }

  .timeline li::before {
    left: 87px !important;
    top: .45rem;
    width: 13px;
    height: 13px;
  }

  .timeline time {
    grid-column: 1;
    width: 78px;
    padding: 0 8px 0 0;
    margin: 0;
    text-align: right;
    white-space: nowrap;
    overflow: visible;
    font-size: .7rem;
    line-height: 1.35;
  }

  .timeline span {
    grid-column: 3;
    width: 100%;
    min-width: 0;
    padding: 0 0 0 10px;
    margin: 0;
    text-align: left;
    overflow-wrap: break-word;
    word-break: normal;
    font-size: clamp(1.08rem, 5vw, 1.32rem);
    line-height: 1.28;
  }

  /* La carta deja ver antes la portada */
  .envelope-scene--reveal-invitation {
    background: rgba(255, 253, 251, .72);
  }

  .envelope-scene--reveal-invitation .envelope__letter {
    opacity: .08;
    filter: blur(3px);
  }
}

/* Asegura que ningún estado visible conserve desplazamiento lateral */
.invitation .event-card.reveal.is-visible,
.invitation .detail-card.reveal.is-visible,
.invitation .name-card.reveal.is-visible,
.invitation .timeline > li.reveal.is-visible {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* =========================================================
   Apertura sin pantalla blanca y control de overflow v1.4.6
   ========================================================= */

/*
 * La regla antigua .envelope-scene--opening ejecutaba fadeScene
 * después de un segundo. Eso ocultaba el sobre demasiado pronto.
 */
.envelope-scene--opening {
  animation: none !important;
}

/* Bloqueo real de desbordamiento horizontal en Safari/iPhone */
html,
body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}

body {
  position: relative;
}

#site,
.invitation,
.section,
.container,
.narrow,
.event-grid,
.details-grid,
.names-grid,
.memory-grid,
.gallery,
.timeline {
  min-width: 0;
  max-width: 100%;
}

#site,
.invitation {
  width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  #site,
  .invitation,
  .section {
    overflow-x: hidden;
  }
}

/* Ningún elemento multimedia puede ampliar el viewport */
img,
video,
svg,
canvas,
audio,
iframe {
  max-width: 100%;
}

/* Durante la apertura se impide cualquier arrastre lateral */
body.envelope-is-opening {
  overflow: hidden !important;
  touch-action: pan-y;
}

/* La escena permanece visible mientras la carta sale */
.envelope-scene {
  width: 100%;
  max-width: 100vw;
  overflow: hidden !important;
}

.envelope-scene--opening .envelope-wrap {
  animation: none !important;
  transform: none;
}

/* Solapa */
.envelope__flap {
  transition: transform .85s cubic-bezier(.22,.78,.25,1) !important;
}

/* Estado inicial de apertura */
.envelope--open .envelope__letter {
  transform: translateY(-22%);
  transition:
    transform .9s .28s cubic-bezier(.22,1,.36,1),
    box-shadow .7s ease,
    opacity .65s ease !important;
}

/* La carta sale claramente, pero no se convierte en una pantalla blanca */
.envelope--letter-out .envelope__letter {
  z-index: 6;
  transform: translateY(-92%) scale(1.04) !important;
  box-shadow: 0 28px 70px rgba(83,51,53,.22);
  opacity: 1;
  transition:
    transform 1.15s cubic-bezier(.22,1,.36,1),
    box-shadow .8s ease,
    opacity .65s ease !important;
}

/*
 * Se anula la expansión fixed de versiones anteriores.
 * Esa expansión era la principal fuente del bloque blanco.
 */
.envelope--letter-expand .envelope__letter,
.envelope--letter-out.envelope--letter-expand .envelope__letter {
  position: absolute !important;
  left: 9% !important;
  right: 9% !important;
  top: auto !important;
  bottom: 7% !important;
  width: auto !important;
  height: 82% !important;
  border-radius: 0 !important;
  transform: translateY(-92%) scale(1.04) !important;
}

/* La portada aparece detrás antes de desvanecer la carta */
.envelope-scene--showing-invitation {
  background: transparent;
}

.envelope-scene--showing-invitation .envelope__back,
.envelope-scene--showing-invitation .envelope__front,
.envelope-scene--showing-invitation .envelope__flap,
.envelope-scene--showing-invitation .seal {
  opacity: .18;
  transition: opacity .55s ease;
}

/* Desvanecimiento final de la carta */
.envelope--letter-fade .envelope__letter {
  opacity: 0 !important;
  transform: translateY(-102%) scale(1.06) !important;
  filter: blur(3px);
  transition:
    opacity .72s ease,
    transform .85s cubic-bezier(.22,1,.36,1),
    filter .72s ease !important;
}

.envelope-scene--exit {
  opacity: 0;
  transform: none !important;
  filter: none !important;
  transition: opacity .78s ease !important;
}

/* La invitación se hace visible inmediatamente detrás de la escena */
.invitation--entering {
  background: transparent !important;
}

.invitation--visible {
  opacity: 1;
  transform: none;
  transition: opacity .75s ease !important;
}

/* =========================================================
   Timeline estable y sin desbordamiento
   ========================================================= */

.timeline {
  width: min(100%, 680px);
  margin-inline: auto;
  padding: 0;
  overflow: visible;
}

.timeline li {
  width: 100%;
  min-width: 0;
}

@media (max-width: 759px) {
  .section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .timeline-section .narrow {
    width: 100%;
    padding-inline: 0;
  }

  .timeline {
    display: block;
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }

  /*
   * Tres columnas reales:
   * hora | marcador | texto
   */
  .timeline li {
    display: grid !important;
    grid-template-columns: 82px 28px minmax(0, 1fr) !important;
    column-gap: 0 !important;
    align-items: start;
    padding: 0 0 2rem 0;
    margin: 0;
    transform: translate3d(0, 24px, 0) !important;
  }

  .timeline li.is-visible {
    transform: translate3d(0,0,0) !important;
  }

  .timeline::before {
    left: 95px !important;
    top: 6px;
    bottom: 8px;
  }

  .timeline li::before {
    left: 88px !important;
    top: .42rem;
  }

  .timeline time {
    grid-column: 1;
    width: 82px;
    min-width: 0;
    padding: 0 9px 0 0;
    margin: 0;
    text-align: right;
    white-space: nowrap;
    overflow: visible;
    font-size: .68rem;
    line-height: 1.4;
  }

  .timeline span {
    grid-column: 3;
    width: 100%;
    min-width: 0;
    padding: 0 0 0 9px;
    margin: 0;
    text-align: left;
    overflow-wrap: break-word;
    word-break: normal;
    font-size: clamp(1.02rem, 4.8vw, 1.28rem);
    line-height: 1.3;
  }

  /* Todas las entradas móviles son verticales, nunca laterales */
  .invitation .reveal,
  .invitation .event-card.reveal,
  .invitation .detail-card.reveal,
  .invitation .name-card.reveal,
  .invitation .portrait-frame.reveal,
  .invitation .gallery__item.reveal,
  .invitation .timeline > li.reveal {
    transform: translate3d(0, 28px, 0) scale(.985) !important;
  }

  .invitation .reveal.is-visible,
  .invitation .event-card.reveal.is-visible,
  .invitation .detail-card.reveal.is-visible,
  .invitation .name-card.reveal.is-visible,
  .invitation .portrait-frame.reveal.is-visible,
  .invitation .gallery__item.reveal.is-visible,
  .invitation .timeline > li.reveal.is-visible {
    transform: translate3d(0,0,0) scale(1) !important;
  }

  .event-card,
  .detail-card,
  .name-card,
  .memory-form {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }
}


/* =========================================================
   Fuente manuscrita legible v1.4.7
   Alex Brush permite distinguir mejor la “A” mayúscula.
   ========================================================= */

.envelope__monogram {
  font-family: var(--script);
  font-size: 4.35rem;
  line-height: 1;
  letter-spacing: .015em;
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
}

.hero .script,
.script--medium,
.intro__scene--name h1,
.finale .script {
  font-family: var(--script);
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
}

/* Ajuste específico para que la A inicial no quede demasiado cerrada */
.hero .script,
.intro__scene--name h1 {
  letter-spacing: .005em;
}

@media (max-width: 560px) {
  .envelope__monogram {
    font-size: 4rem;
  }

  .hero .script {
    line-height: .82;
  }
}