/* =========================================================
   David & Sofi — Immersive Wedding Landing
   Paleta: forest green, taupe, ivory, stone, white
   ========================================================= */

:root{
  --forest: #8B7355;
  --taupe: #8B7355;
  --ivory: #F5F0E8;
  --stone: #C8B8A2;
  --white: #FFFFFF;
  --bg: var(--ivory);
  --ink: #554839;
  --ink-soft: #756655;
  --sand: var(--taupe);
  --champagne: var(--forest);
  --olive: var(--forest);
  --line: rgba(45,80,22,.22);
  --page-bg:
    radial-gradient(circle at 86% 10%, rgba(255,255,255,.88), transparent 38%),
    radial-gradient(circle at 22% 18%, rgba(245,240,232,.92), transparent 42%),
    linear-gradient(125deg, #F5F0E8 0%, #FFFFFF 34%, #DDD2C2 68%, #B6A389 100%);
  --max: 1240px;
  --pad: clamp(20px, 4vw, 56px);
  --serif: "Newsreader", ui-serif, Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ivory)}
body{
  background-color:var(--ivory);
  background-image:var(--page-bg);
  background-attachment:fixed;
  background-size:cover;
  color:var(--ink);
  font-family:var(--sans);
  font-optical-sizing:auto;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

::selection{background:var(--ivory);color:var(--forest)}

body.invite-locked{
  height:100svh;
  overflow:hidden;
}

/* ---------- ENTRADA / SOBRE ---------- */
.invite-gate{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:0;
  color:var(--forest);
  background-color:transparent;
  -webkit-backdrop-filter:blur(0px);
  backdrop-filter:blur(0px);
  transition:opacity 1.1s ease, visibility 1.1s ease, background-color 1s ease, backdrop-filter 1s ease;
}
/* Tapa sólida (lo que cubre la página); se desvanece al abrir */
.invite-gate::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 86% 10%, rgba(255,255,255,.92), transparent 38%),
    radial-gradient(circle at 22% 18%, rgba(245,240,232,.96), transparent 42%),
    linear-gradient(125deg, #F5F0E8 0%, #FFFFFF 34%, #DDD2C2 68%, #B6A389 100%);
  transition:opacity 1s ease .15s;
}
.invite-gate.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.invite-gate__inner{
  display:grid;
  justify-items:center;
  gap:24px;
  text-align:center;
}
.invite-gate__eyebrow{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(44px, 9.5vw, 96px);
  line-height:.98;
  letter-spacing:.01em;
  color:var(--forest);
  text-shadow:0 3px 20px rgba(255,255,255,.55);
}
.invite-gate__eyebrow span{
  color:var(--taupe);
  font-style:italic;
  margin:0 .04em;
}
.invite-envelope{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  cursor:ns-resize;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* Texto visible sobre el sobre cerrado (nombres + fecha) */
.invite-envelope__front{
  position:absolute;
  inset:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 var(--pad);
  text-align:center;
  pointer-events:none;
  transform:translateY(-7%);
  transition:opacity .5s ease, transform .7s ease;
}
.invite-envelope__kicker{
  font-size:clamp(10px, 1.6vw, 13px);
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--taupe);
  text-shadow:0 1px 8px rgba(255,255,255,.6);
}
.invite-envelope__divider{
  position:relative;
  width:clamp(130px, 28vw, 260px);
  height:1px;
  margin:6px 0 2px;
  background:linear-gradient(90deg, transparent, rgba(139,115,85,.6), transparent);
}
.invite-envelope__divider::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--taupe);
  box-shadow:0 0 0 3px rgba(245,240,232,.7);
}
.invite-envelope__date{
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(24px, 5vw, 52px);
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--forest);
  text-shadow:0 3px 20px rgba(255,255,255,.55);
}
.invite-gate.is-open .invite-envelope__front{
  opacity:0;
  transform:translateY(-14%);
}

/* Sello de cera con monograma */
.invite-envelope__seal{
  position:absolute;
  left:50%;
  top:72%;
  z-index:101;
  width:clamp(78px, 12vw, 120px);
  height:clamp(78px, 12vw, 120px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--ivory);
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.4), transparent 48%),
    radial-gradient(circle at 50% 54%, #9c8462 0%, #6f5c40 78%);
  box-shadow:
    0 12px 26px rgba(60,45,20,.4),
    inset 0 2px 6px rgba(255,255,255,.32),
    inset 0 -7px 14px rgba(0,0,0,.36);
  font-family:var(--serif);
  pointer-events:none;
  transition:opacity .45s ease, transform .55s cubic-bezier(.3,.7,.2,1);
}
.invite-envelope__seal::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.32);
}
.invite-envelope__seal span{
  display:flex;
  align-items:center;
  font-size:clamp(23px, 3.6vw, 34px);
  letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.invite-envelope__seal i{
  font-style:italic;
  font-size:.66em;
  opacity:.86;
  margin:0 .04em;
}
.invite-gate.is-open .invite-envelope__seal{
  opacity:0;
  transform:translate(-50%,-32%) scale(.55) rotate(-14deg);
}

/* Carcasa del sobre (cuerpo) */
.env_wrap{
  position:relative;
  overflow:hidden;
  width:100%;
  height:100%;
  border-radius:4px;
  background:linear-gradient(0deg, var(--stone) 0%, var(--stone) 55%, transparent 55%, transparent 100%);
}

/* Solapa triangular que gira al abrir */
.env_top{
  filter:drop-shadow(0 9px 11px rgba(60,45,20,.2));
  position:absolute;
  width:100%;
  height:33%;
  top:45%;
  z-index:99;
  transform-origin:top;
  transition:transform .7s ease-in-out, z-index 0s;
  transition-delay:.25s;
}
.env_top::before{
  content:"";
  position:absolute;
  transform-origin:top;
  width:100%;
  height:100%;
  background:linear-gradient(180deg, #D8CBB6 0%, var(--stone) 100%);
  clip-path:polygon(50% 100%, 0 0, 100% 0);
  transition:all .7s ease-in-out;
}

/* Bolsillo frontal del sobre (la V) */
.env_bottom_wrap{
  height:55%;
  width:100%;
  z-index:2;
  bottom:0;
  position:absolute;
  filter:drop-shadow(0 -6px 3px rgba(50,50,0,.12));
}
.env_bottom{
  clip-path:polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0);
  background:linear-gradient(165deg, #FFFFFF 0%, #F4EFE5 100%);
  width:100%;
  height:100%;
}
.env_bottom::before,
.env_bottom::after{
  content:"";
  position:absolute;
  background:var(--ivory);
  width:50%;
  height:100%;
}
.env_bottom::before{
  clip-path:polygon(100% 50%, 0 0, 0 100%);
}
.env_bottom::after{
  right:0;
  clip-path:polygon(0 50%, 100% 0, 100% 100%);
}

/* Panel/carta que se desliza hacia arriba al abrir */
.env_form_wrap{
  width:calc(100% - 2.6rem);
  left:1.3rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.12), transparent 46%),
    var(--forest);
  color:var(--white);
  position:absolute;
  height:100%;
  z-index:2;
  top:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border-radius:8px 8px 0 0;
  box-shadow:0 -10px 28px rgba(0,0,0,.18);
  transition:top .85s cubic-bezier(.2,.8,.2,1);
}

/* Carta dentro del panel */
.invite-envelope__letter{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  padding:1.4rem;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease;
}
.invite-envelope__letter span{
  font-size:11px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--stone);
}
.invite-envelope__letter strong{
  font-family:var(--serif);
  font-size:clamp(28px, 7vw, 56px);
  font-weight:300;
  letter-spacing:.04em;
}

/* ----- Estado ABIERTO (lo dispara el deslizamiento via JS) ----- */
.invite-gate.is-open{
  background-color:rgba(18,24,10,.32);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}
.invite-gate.is-open::before{
  opacity:0;
}
.invite-gate.is-open .env_top{
  transform:rotatex(-180deg);
  z-index:1;
  transition-delay:0s;
}
/* El sobre se desvanece y crece levemente, revelando la página difuminada detrás */
.invite-gate.is-open .env_wrap{
  opacity:0;
  transform:scale(1.05);
  transition:opacity .9s ease .3s, transform 1.1s ease .2s;
}

.invite-gate__status{
  position:absolute;
  left:50%;
  bottom:clamp(22px, 6vh, 54px);
  transform:translateX(-50%);
  z-index:101;
  min-height:18px;
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(45,80,22,.82);
  text-shadow:0 1px 8px rgba(255,255,255,.7);
}
.invite-gate__ready{
  display:none;
}
.invite-gate.is-ready:not(.is-open) .invite-envelope{
  animation: envelopeReadyFloat 5.6s ease-in-out infinite;
}
.invite-gate.is-unsealing .invite-envelope{
  animation: envelopeNudge .22s ease-out both;
}
.invite-gate.is-open .invite-envelope{
  animation:none;
}
.invite-gate.is-ready .invite-gate__loading,
.invite-gate.is-open .invite-gate__loading{
  display:none;
}
.invite-gate.is-ready .invite-gate__ready,
.invite-gate.is-open .invite-gate__ready{
  display:inline;
}

@keyframes envelopeReadyFloat{
  0%,100%{transform:translateY(0) rotateZ(0deg)}
  50%{transform:translateY(-4px) rotateZ(-.15deg)}
}
@keyframes envelopeNudge{
  0%{transform:translateY(0)}
  52%{transform:translateY(5px) rotateZ(.25deg)}
  100%{transform:translateY(0)}
}

@media (max-width:600px){
  .invite-gate__status{font-size:9px;letter-spacing:.24em}
}

@media (prefers-reduced-motion: reduce){
  .invite-gate,
  .env_top,
  .env_top::before,
  .env_form_wrap,
  .invite-envelope__letter{
    transition:none;
  }
  .invite-gate,
  .invite-gate.is-open{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .invite-gate.is-ready:not(.is-open) .invite-envelope,
  .invite-gate.is-unsealing .invite-envelope{
    animation:none;
  }
}

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  background:rgba(255,255,255,.06);pointer-events:none;
}
.scroll-progress__bar{
  height:100%;width:100%;
  background:linear-gradient(90deg, var(--champagne), var(--sand));
  transform:scaleX(0);transform-origin:left center;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding: 18px var(--pad);
  mix-blend-mode: difference;
  color:#FFFFFF;
  transition: padding .4s ease, background .4s ease;
}
.nav.is-scrolled{
  mix-blend-mode: normal;
  background: rgba(45,80,22,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--line);
}
.nav__brand{font-family:var(--serif);font-size:22px;letter-spacing:.04em}
.nav__brand span{color:var(--champagne)}
.nav__links{display:none;gap:28px;list-style:none;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.nav__links a{opacity:.85;transition:opacity .3s}
.nav__links a:hover{opacity:1;color:var(--champagne)}
@media (min-width: 780px){ .nav__links{display:flex} }

/* ---------- HERO ---------- */
.hero{
  position:relative;height:100svh;min-height:620px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--white);
}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__img,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.hero__overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.55) 75%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6));
}
.hero__content{position:relative;z-index:2;padding:0 var(--pad);will-change:transform,opacity}
.hero__eyebrow{
  font-size:12px;letter-spacing:.5em;text-transform:uppercase;
  color:rgba(245,240,232,.88);margin-bottom:28px;
}
.hero__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(64px, 14vw, 200px);line-height:.92;letter-spacing:-.01em;
}
.hero__title .line{
  display:inline-block;
}
.hero__title .amp{
  display:inline-block;color:var(--champagne);font-style:italic;font-weight:300;
  margin:0 .14em;transform:translateY(.05em);will-change:transform,opacity;
}
/* Char split (JS) */
.char-wrap{
  display:inline-block;
  overflow:hidden;
  line-height:1.08;
  padding:.1em .055em .04em;
  margin:-.1em -.055em -.04em;
  vertical-align:top;
}
.char{display:inline-block;will-change:transform,opacity}

.hero__date{
  margin-top:34px;font-size:14px;letter-spacing:.35em;text-transform:uppercase;color:rgba(245,240,232,.9);
}
.hero-countdown{
  position:fixed;
  left:50%;
  top:calc(100svh - clamp(188px, 21vh, 224px));
  z-index:58;
  width:min(760px, calc(100% - (var(--pad) * 2)));
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  padding:15px clamp(18px, 3vw, 34px) 17px;
  overflow:hidden;
  border:1px solid rgba(245,240,232,.32);
  border-radius:24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 42%),
    rgba(45,80,22,.88);
  box-shadow:
    0 18px 54px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(16px) saturate(.82);
  -webkit-backdrop-filter:blur(16px) saturate(.82);
  text-align:center;
  pointer-events:none;
  will-change:transform,opacity;
  transition:top .9s cubic-bezier(.2,.8,.2,1), width .9s cubic-bezier(.2,.8,.2,1), gap .9s cubic-bezier(.2,.8,.2,1), padding .9s cubic-bezier(.2,.8,.2,1);
}
.hero-countdown::before{
  content:"";
  position:absolute;
  top:0;
  left:18%;
  right:18%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(200,184,162,.78), transparent);
}
.hero-countdown__kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  font-family:var(--serif);
  font-size:clamp(16px, 2vw, 21px);
  font-style:italic;
  line-height:1.1;
  color:var(--ivory);
  text-shadow:0 2px 16px rgba(0,0,0,.45);
  transition:font-size .9s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}
.hero-countdown__kicker::before,
.hero-countdown__kicker::after{
  content:"";
  width:clamp(30px, 7vw, 72px);
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(200,184,162,.86));
}
.hero-countdown__kicker::after{transform:scaleX(-1)}
.hero-countdown__grid{
  display:grid;
  grid-template-columns:1.18fr repeat(3, 1fr);
  align-items:center;
  width:100%;
  gap:0;
  transition:gap .9s cubic-bezier(.2,.8,.2,1);
}
.hero-countdown__part{
  position:relative;
  display:grid;
  justify-items:center;
  gap:5px;
  min-width:0;
  padding:0 clamp(10px, 2vw, 22px);
  transition:gap .9s cubic-bezier(.2,.8,.2,1);
}
.hero-countdown__part + .hero-countdown__part::before{
  content:"";
  position:absolute;
  left:0;
  top:12%;
  bottom:12%;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(200,184,162,.36), transparent);
}
.hero-countdown__digits{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.02em;
  min-height:45px;
  transition:gap .9s cubic-bezier(.2,.8,.2,1), min-height .9s cubic-bezier(.2,.8,.2,1);
}
.countdown-digit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:.56em;
  height:auto;
  color:var(--white);
  font-family:var(--serif);
  font-size:clamp(36px, 4.7vw, 52px);
  font-weight:300;
  line-height:.9;
  font-variant-numeric:tabular-nums;
  text-shadow:0 3px 18px rgba(0,0,0,.42);
  transition:width .9s cubic-bezier(.2,.8,.2,1), font-size .9s cubic-bezier(.2,.8,.2,1);
}
.countdown-digit.is-changing{
  animation:countdownTick .36s ease-out;
}
.hero-countdown__label{
  font-size:9px;
  line-height:1;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(245,240,232,.78);
  text-shadow:0 2px 10px rgba(0,0,0,.48);
  transition:font-size .9s cubic-bezier(.2,.8,.2,1), letter-spacing .9s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}
@keyframes countdownTick{
  0%{transform:translateY(-5px);opacity:.35;filter:blur(2px)}
  100%{transform:translateY(0);opacity:1}
}
.hero__scroll{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:rgba(245,240,232,.84);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  will-change:transform,opacity;
}
.hero__scroll span{width:1px;height:46px;background:var(--ivory);opacity:.6;animation:dropline 2.4s ease-in-out infinite}
@keyframes dropline{
  0%,100%{transform:scaleY(.3);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
}

@media (max-width: 700px){
  .hero-countdown{
    top:calc(100svh - 158px);
    width:calc(100% - 24px);
    gap:9px;
    padding:13px 8px 14px;
    border-radius:18px;
  }
  .hero-countdown__kicker{font-size:15px;gap:9px}
  .hero-countdown__kicker::before,
  .hero-countdown__kicker::after{width:clamp(20px, 9vw, 42px)}
  .hero-countdown__part{gap:4px;padding:0 5px}
  .hero-countdown__digits{gap:0;min-height:30px}
  .countdown-digit{
    width:.55em;
    font-size:clamp(27px, 8.2vw, 35px);
  }
  .hero-countdown__label{
    font-size:7px;
    letter-spacing:.18em;
  }
  .hero__scroll{display:none}
}

/* ---------- INTRO ---------- */
.intro{
  padding: clamp(140px, 20vw, 240px) var(--pad);
  text-align:center;
}
.intro p{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(28px, 5vw, 64px);line-height:1.2;color:var(--forest);
  max-width:18ch;margin:0 auto;
}
.intro p span{display:inline-block;margin:0 .15em;will-change:transform,opacity,filter}

/* ---------- STORY ---------- */
.story{padding: 60px var(--pad) 80px;max-width:var(--max);margin:0 auto}
.story__block{
  display:grid;grid-template-columns:1fr;gap:40px;align-items:start;
  padding: 60px 0;border-bottom:1px solid var(--line);
}
.story__block:last-child{border-bottom:none}
@media (min-width: 880px){
  .story__block{
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(40px, 8vw, 120px);
    padding: 140px 0;
    align-items:center;
  }
  .story__block--reverse{grid-template-columns: 1fr 1.1fr}
  .story__block--reverse .story__img{order:2}
  .story__block--reverse .story__text{order:1}
  /* La imagen "respira" haciéndose sticky cerca del centro */
  .story__img{
    position:sticky;
    top:14vh;
  }
  .story__text{
    padding: 4vh 0 14vh;
  }
}
.story__img{position:relative;overflow:hidden;border-radius:2px;aspect-ratio: 4/5;will-change:clip-path}
.story__img img{width:100%;height:100%;object-fit:cover;will-change:transform}
.story__text small{
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne);
  display:inline-block;
}
.story__text h2{
  font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,80px);
  line-height:1;margin:18px 0 24px;letter-spacing:-.01em;color:var(--forest);
}
.story__text p{max-width:42ch;color:var(--ink-soft);font-size:17px}

/* ---------- QUOTE ---------- */
.quote{
  padding: clamp(140px, 20vw, 240px) var(--pad);
  text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background: radial-gradient(ellipse at center, rgba(139,115,85,.04), transparent 70%);
}
.quote p{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(28px, 5vw, 64px);line-height:1.25;max-width:22ch;margin:0 auto;
  will-change:transform,opacity,filter;
}
.quote em{color:var(--champagne);font-style:italic}

.song__audio{display:none}

/* ---------- WIDGET FLOTANTE ---------- */
.song-widget{
  position:fixed;right:20px;bottom:20px;z-index:55;
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 18px 10px 10px;
  background:rgba(45,80,22,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--line);border-radius:999px;
  color:var(--white);
  cursor:pointer;
  transition: opacity .5s ease, transform .5s ease, border-color .4s ease, background .4s ease;
  font-family:var(--sans);
  opacity:0;transform:translateY(20px);
  -webkit-tap-highlight-color: transparent;
}
.song-widget.is-ready{opacity:1;transform:translateY(0)}
.song-widget:hover{border-color:rgba(245,240,232,.58);background:rgba(45,80,22,.98)}
.song-widget__ring{
  position:absolute;inset:-2px;border-radius:999px;
  border:1px solid rgba(139,115,85,.5);pointer-events:none;opacity:0;
}
.song-widget.is-pending .song-widget__ring{
  animation: widgetPulse 1.8s ease-out infinite;
}
@keyframes widgetPulse{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.12);opacity:0}
}
.song-widget__btn{
  position:relative;
  width:38px;height:38px;border-radius:50%;flex:0 0 38px;
  background:var(--stone);color:var(--forest);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .35s ease;
}
.song-widget:hover .song-widget__btn{background:var(--ivory)}
.song-widget__btn svg{width:14px;height:14px;display:block}
.song-widget__icon-play{margin-left:1px}
.song-widget__icon-pause{display:none}
.song-widget.is-playing .song-widget__icon-play{display:none}
.song-widget.is-playing .song-widget__icon-pause{display:block}
.song-widget__meta{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  line-height:1;
}
.song-widget__label{
  font-family:var(--serif);font-style:italic;font-size:14px;color:var(--white);
}
.song-widget__artist{
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--ivory);
}

/* Vinyl spin sutil cuando suena */
.song-widget.is-playing .song-widget__btn{
  animation: vinylSpin 6s linear infinite;
}
@keyframes vinylSpin{
  to{transform:rotate(360deg)}
}

@media (max-width: 600px){
  .song-widget{right:14px;bottom:14px;padding:8px 14px 8px 8px;gap:10px}
  .song-widget__meta{display:none}
}

/* ---------- LETRA FLOTANTE (por toda la página) ---------- */
.lyrics-rain{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:42;
  overflow:hidden;
}
.lyric-floating{
  position:fixed;
  max-width: min(380px, 70vw);
  pointer-events:none;
  will-change:opacity;
}
.lyric-floating__inner{
  display:inline-block;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(20px, 3.2vw, 38px);line-height:1.25;
  color:var(--white);
  padding:12px 18px 14px;
  background:linear-gradient(135deg, rgba(45,80,22,.92), rgba(45,80,22,.74));
  border:1px solid rgba(200,184,162,.34);
  border-radius:6px;
  box-shadow:0 18px 48px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  text-shadow: 0 2px 14px rgba(0,0,0,.72), 0 0 18px rgba(139,115,85,.18);
  letter-spacing:.005em;
  will-change:transform,opacity,filter;
}

/* Zonas repartidas por el viewport sin invadir el contador */
.lyric-floating--tl{ top: 12vh; left: 5vw; text-align:left }
.lyric-floating--tr{ top: 12vh; right: 5vw; text-align:right }
.lyric-floating--bl{ bottom: 14vh; left: 5vw; text-align:left }
.lyric-floating--br{ bottom: 14vh; right: 5vw; text-align:right }
.lyric-floating--ml{ top: 46%; left: 4vw; text-align:left }
.lyric-floating--mr{ top: 46%; right: 4vw; text-align:right }
.lyric-floating--tc{ top: 14vh; left: 50%; margin-left:-30vw; width:60vw; text-align:center; max-width:60vw }

@media (max-width: 700px){
  .lyric-floating{max-width:78vw}
  .lyric-floating--tl, .lyric-floating--tr{ top: 12vh }
  .lyric-floating--bl, .lyric-floating--br{ bottom: 16vh }
  .lyric-floating--ml, .lyric-floating--mr{ top: 42% }
  .lyric-floating--tc{ width:84vw; margin-left:-42vw }
}

@media (prefers-reduced-motion: reduce){
  .lyrics-rain{display:none !important}
  .song-widget.is-pending .song-widget__ring{animation:none}
  .song-widget.is-playing .song-widget__btn{animation:none}
}

/* ---------- GALLERY ---------- */
.gallery{padding: 120px var(--pad);max-width:var(--max);margin:0 auto}
.gallery__head{text-align:center;margin-bottom:64px}
.gallery__head small{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne)}
.gallery__head h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,80px);margin-top:10px}

.gallery__grid{
  display:grid;gap:14px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 42vw;
}
@media (min-width: 880px){
  .gallery__grid{grid-template-columns: repeat(4, 1fr); grid-auto-rows: 22vw; gap: 20px}
}
.gallery__item{position:relative;overflow:hidden;border-radius:2px;will-change:transform,opacity,clip-path}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease;will-change:transform}
.gallery__item:hover img{transform:scale(1.06)}
.gallery__item--tall{grid-row: span 2}
.gallery__item--wide{grid-column: span 2}

/* ---------- EVENT ---------- */
.event{padding: 160px var(--pad);background:linear-gradient(180deg, transparent, rgba(139,115,85,.06))}
.event__inner{max-width:var(--max);margin:0 auto;text-align:center}
.event__inner small{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne)}
.event__inner h2{font-family:var(--serif);font-weight:300;font-size:clamp(48px,7vw,96px);margin:10px 0 64px}

.event__grid{display:grid;grid-template-columns:1fr;gap:48px}
@media (min-width:780px){ .event__grid{grid-template-columns: repeat(3,1fr); gap: 60px} }
.event__grid article{padding:0 12px}
@media (min-width:780px){ .event__dresscode-card{grid-column:1 / -1} }
.event__grid h3{
  font-family:var(--serif);font-size:28px;font-weight:400;
  margin-bottom:14px;color:var(--ink);
}
.event__grid p{color:var(--ink-soft);font-size:16px;line-height:1.7}
.event__grid em{color:var(--ink-soft);opacity:.8;font-style:italic;font-size:14px}
.event__date-card{
  display:grid;
  justify-items:center;
}
.event__date-lockup{
  position:relative;
  isolation:isolate;
  display:grid;
  justify-items:center;
  gap:2px;
  width:min(230px, 100%);
  margin:2px auto 12px;
  padding:24px 20px 22px;
  color:var(--ink);
  border-top:1px solid rgba(139,115,85,.54);
  border-bottom:1px solid rgba(139,115,85,.54);
  background:
    radial-gradient(circle at 50% 50%, rgba(139,115,85,.13), transparent 68%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
}
.event__date-lockup::before,
.event__date-lockup::after{
  content:"";
  position:absolute;
  left:50%;
  width:7px;
  height:7px;
  border:1px solid rgba(139,115,85,.7);
  background:var(--bg);
  transform:translateX(-50%) rotate(45deg);
}
.event__date-lockup::before{top:-4px}
.event__date-lockup::after{bottom:-4px}
.event__date-day{
  font-family:var(--serif);
  font-size:clamp(72px, 8vw, 110px);
  font-weight:300;
  line-height:.78;
  letter-spacing:.02em;
  color:var(--sand);
  text-shadow:0 18px 42px rgba(0,0,0,.32);
}
.event__date-month{
  font-family:var(--serif);
  font-size:clamp(25px, 3vw, 34px);
  font-style:italic;
  line-height:1;
  color:var(--champagne);
}
.event__date-year{
  margin-top:8px;
  font-size:10px;
  line-height:1;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.event__grid .event__date-note{
  max-width:22ch;
  margin:0 auto;
  font-family:var(--serif);
  font-size:18px;
  font-style:italic;
  line-height:1.35;
  color:var(--ink-soft);
}
.event__dresscode-card{
  max-width:780px;
  justify-self:center;
}
.event__dresscode{
  width:100%;
  margin:18px auto 0;
  padding:14px;
  overflow:hidden;
  border:1px solid rgba(139,115,85,.36);
  border-radius:8px;
  background:rgba(255,255,255,.96);
  box-shadow:0 22px 52px rgba(0,0,0,.24);
}
.event__dresscode img{
  width:100%;
  height:auto;
  display:block;
  border-radius:4px;
}
.event__map{
  width:min(460px, 100%);
  height:240px;
  margin:24px auto 0;
  overflow:hidden;
  border:1px solid rgba(139,115,85,.34);
  border-radius:8px;
  background:rgba(255,255,255,.03);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.event__map iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

@media (max-width: 640px){
  .event__dresscode{
    margin-top:16px;
    padding:8px;
    border-radius:6px;
  }
  .event__map{
    height:260px;
    margin-top:22px;
    border-radius:6px;
  }
}

/* ---------- SCHEDULE ---------- */
.schedule{padding:140px var(--pad);max-width:880px;margin:0 auto}
.schedule header{text-align:center;margin-bottom:64px}
.schedule small{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne)}
.schedule h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,72px);margin-top:10px}

.schedule__list{list-style:none;display:flex;flex-direction:column;gap:8px}
.schedule__list li{
  display:grid;grid-template-columns: 92px 1fr;gap:24px;align-items:start;
  padding:28px 0;border-bottom:1px solid var(--line);
  will-change:transform,opacity;
}
.schedule__list li:last-child{border-bottom:none}
.schedule__list span{
  font-family:var(--serif);color:var(--champagne);font-size:22px;
  letter-spacing:.05em;padding-top:2px;
}
.schedule__list h3{font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:4px}
.schedule__list p{color:var(--ink-soft);font-size:15px}

/* ---------- RSVP ---------- */
.rsvp{padding:160px var(--pad);text-align:center;border-top:1px solid var(--line)}
.rsvp__inner{max-width:640px;margin:0 auto}
.rsvp small{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne)}
.rsvp h2{font-family:var(--serif);font-weight:300;font-size:clamp(48px,7vw,96px);margin:10px 0 24px}
.rsvp p{color:var(--ink-soft);font-size:17px;margin-bottom:36px}
.rsvp strong{color:var(--ink);font-weight:400}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;padding:16px 28px;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;border:1px solid var(--ink);transition:all .35s ease;
  cursor:pointer;font-family:var(--sans);font-weight:400;
  position:relative;overflow:hidden;
}
.btn--solid{background:var(--ink);color:var(--bg)}
.btn--solid:hover{background:var(--champagne);border-color:var(--champagne);color:var(--bg);transform:translateY(-2px)}
.btn--ghost{margin-top:18px;background:transparent;border-color:var(--ink-soft);color:var(--ink);font-size:11px;padding:12px 22px}
.btn--ghost:hover{background:var(--ink);color:var(--bg)}

.btn--waze{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:22px;
  background:rgba(255,255,255,.96);color:#2D5016;
  border:1px solid rgba(139,115,85,.34);
  padding:13px 22px;font-size:11px;letter-spacing:.22em;font-weight:500;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  transition: background .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.btn--waze:hover{
  background:var(--sand);color:#2D5016;
  border-color:rgba(139,115,85,.74);
  box-shadow:0 14px 34px rgba(139,115,85,.2);
  transform:translateY(-2px);
}
.btn--waze .btn__icon{
  width:22px;height:22px;flex:0 0 22px;
  color:var(--champagne);
  transition: color .35s ease, transform .35s ease;
}
.btn--waze:hover .btn__icon{ color:#2D5016; transform:rotate(-6deg) }
.btn--waze svg{ display:block }
.btn--waze .btn__logo{
  width:34px;
  max-height:24px;
  flex:0 0 auto;
  object-fit:contain;
  display:block;
  transition:transform .35s ease;
}
.btn--waze:hover .btn__logo{transform:rotate(-4deg) scale(1.04)}

/* ---------- GIFTS ---------- */
.gifts{padding:140px var(--pad);text-align:center}
.gifts__inner{max-width:760px;margin:0 auto}
.gifts small{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--champagne)}
.gifts h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,72px);margin:10px 0 18px}
.gifts > .gifts__inner > p{color:var(--ink-soft);margin-bottom:42px}
.gifts__cards{display:grid;grid-template-columns:minmax(0, 420px);justify-content:center;gap:18px}
.gift-card{
  padding:32px 28px;border:1px solid var(--line);text-align:left;
  background:rgba(255,255,255,.02);
  will-change:transform,opacity;
}
.gift-card h3{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--champagne);margin-bottom:14px}
.gift-card p{color:var(--ink-soft);font-size:15px;line-height:1.9}
.gift-card--qr{text-align:center}
.gift-card__qr{
  width:min(210px, 100%);
  margin:18px auto 20px;
  padding:12px;
  background:var(--ink);
  border:1px solid rgba(139,115,85,.38);
  border-radius:8px;
  box-shadow:0 18px 38px rgba(0,0,0,.24);
}
.gift-card__qr img{
  width:100%;
  height:auto;
  border-radius:4px;
}
.gift-card--qr p{
  max-width:24ch;
  margin:0 auto;
  text-align:center;
}

/* ---------- CLOSING ---------- */
.closing{
  position:relative;min-height:92svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
}
.closing__media{position:absolute;inset:0;overflow:hidden}
.closing__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);will-change:transform}
.closing__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.75));
}
.closing__content{position:relative;z-index:2;padding:var(--pad);will-change:transform,opacity}
.closing__phrase{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(28px,5vw,56px);line-height:1.25;color:var(--ink);
  max-width:24ch;margin:0 auto 32px;
}
.closing__sign{
  font-family:var(--serif);font-size:clamp(32px,5vw,52px);
  color:var(--champagne);letter-spacing:.04em;
}

/* ---------- HEARTS LAYER ---------- */
.hearts-layer{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:40;
  overflow:hidden;
}
.heart{
  position:absolute;
  display:block;
  pointer-events:none;
  opacity:0;
  will-change:transform,opacity;
  filter: drop-shadow(0 0 8px rgba(139,115,85,.35));
  transform-origin:center;
}
.heart svg{width:100%;height:100%;display:block}

@media (prefers-reduced-motion: reduce){
  .hearts-layer{display:none !important}
}

/* ---------- ANIMATIONS ---------- */
[data-reveal]{opacity:0;transform:translateY(40px);transition:none}
[data-reveal].is-in{opacity:1;transform:translateY(0);transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.1,1)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .story__img{position:static !important}
}