:root{
  --paper:#F4EEE1;
  --paper-dark:#E9E0D0;
  --pink:#ECCFD0;
  --pink-deep:#E3BCC2;
  --rose:#BE8293;
  --rose-dark:#A96A80;
  --ink:#3B2C2F;
  --mauve:#5E454C;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --hand:'Nothing You Could Do','Segoe Script','Bradley Hand',cursive;
  --display:'DM Serif Display','Playfair Display',Georgia,serif;
  --script:'Mrs Saint Delafield','Snell Roundhand','Segoe Script',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper-dark);color:var(--ink);font-family:var(--serif);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden;height:100dvh}
img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- página ---------- */
.page{
  position:relative;width:min(100%,480px);margin:0 auto;background:var(--paper);
  container-type:inline-size;overflow:hidden;
  box-shadow:0 0 40px rgba(90,70,50,.18);
}
.page::after{ /* textura de papel */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:50;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .48  0 0 0 0 .38  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.sec{position:relative;overflow:hidden;background:var(--paper)}
.sec + .sec{box-shadow:0 -1px 0 rgba(255,255,255,.7),0 -7px 12px -9px rgba(110,90,70,.28)}
.abs{position:absolute}
.deco{position:absolute;pointer-events:none}
.deco img{width:100%;height:auto}

/* ---------- animaciones ---------- */
.rv{opacity:0;transform:translateY(var(--ty,5cqw)) rotate(var(--r,0deg)) scale(var(--s,1));
  transition:opacity 1s ease var(--d,0s),transform 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.rv.in{opacity:1;transform:rotate(var(--r,0deg))}
.pop{--ty:0cqw;--s:.45}
.pop.in{transition-timing-function:ease,cubic-bezier(.34,1.56,.64,1)}
.drop{--ty:0cqw;--s:.92}
@keyframes dropin{0%{transform:translateY(-38cqw)}60%{transform:translateY(2.5cqw)}80%{transform:translateY(-1cqw)}100%{transform:none}}
.drop.in{animation:dropin 1.5s cubic-bezier(.3,.7,.4,1) var(--d,0s) both}
@keyframes sway{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6cqw)}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.8) rotate(10deg);opacity:.7}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(1.6cqw)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(190,130,147,.55)}100%{box-shadow:0 0 0 3.4cqw rgba(190,130,147,0)}}
@keyframes shimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12) contrast(1.04)}}
.sway{transform-origin:50% 0;animation:sway 5.5s ease-in-out infinite}
.sway.b{animation-duration:6.8s;animation-delay:-2s}
.floaty{animation:floaty 6s ease-in-out infinite}
.floaty.b{animation-duration:7.5s;animation-delay:-3s}
.tw{animation:twinkle 3.6s ease-in-out infinite}
.tw.b{animation-duration:4.4s;animation-delay:-1.6s}
.tw.c{animation-duration:5.2s;animation-delay:-3s}
.disco{animation:shimmer 4s ease-in-out infinite}

/* ---------- portada ---------- */
.cover{position:fixed;inset:0;z-index:200;background:var(--paper-dark);display:flex;justify-content:center;
  transition:transform 1.1s cubic-bezier(.7,0,.2,1),opacity .9s ease .2s}
.cover.gone{transform:translateY(-102%);opacity:0;pointer-events:none}
.cover-in{position:relative;width:min(100%,480px);height:100%;background:var(--paper);container-type:inline-size;overflow:hidden}
.cover-in::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .48  0 0 0 0 .38  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.cover .ball{left:0;right:0;margin:0 auto;top:-2cqw;width:46cqw}
.cover .kicker{left:0;right:0;top:calc(50% + 6cqw);text-align:center;font:300 3.5cqw var(--sans);letter-spacing:.42em;color:var(--mauve);padding-left:.42em}
.cover .lock{left:0;right:0;margin:0 auto;top:calc(50% + 14cqw);width:80cqw}
.cover .tap{left:0;right:0;margin:0 auto;top:calc(50% + 50cqw);width:max-content}
.btn{display:inline-flex;align-items:center;gap:2.4cqw;border:0;cursor:pointer;text-decoration:none;
  background:linear-gradient(180deg,#C48C9C,#B87A8D);color:#fff;font:400 4.2cqw var(--sans);letter-spacing:.06em;
  padding:3.4cqw 7cqw;border-radius:999px;box-shadow:0 1.2cqw 3cqw -1cqw rgba(120,60,80,.55),inset 0 0 0 .3cqw rgba(255,255,255,.25);
  transition:transform .25s ease,box-shadow .25s ease;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.96)}
.btn.pulse{animation:pulse 1.8s ease-out infinite}
.cover .hint{left:0;right:0;top:calc(50% + 64cqw);text-align:center;font:italic 400 3.6cqw var(--serif);color:var(--mauve)}

/* música (botón fijo) */
.mbtn{position:fixed;z-index:150;top:calc(3.2vw + env(safe-area-inset-top,0px));right:max(12px,calc(50vw - 240px + 12px));width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(180deg,#CD94A6,#B97C90);display:grid;place-items:center;box-shadow:0 4px 12px -3px rgba(120,60,80,.55);
  opacity:0;transform:scale(.4);transition:opacity .6s ease 1.4s,transform .6s cubic-bezier(.34,1.56,.64,1) 1.4s;-webkit-tap-highlight-color:transparent}
body.opened .mbtn{opacity:1;transform:none}
.mbtn svg{width:24px;height:24px;fill:#fff}
.mbtn.on{animation:pulse 2s ease-out infinite}
.mbtn .off{display:none}
.mbtn.muted .off{display:block}.mbtn.muted .onn{display:none}
.mbtn.muted{animation:none;filter:saturate(.7)}

/* ---------- HERO ---------- */
.hero{height:128cqw}
.hero .mis{left:0;right:0;top:35cqw;text-align:center;font:300 3.7cqw var(--sans);letter-spacing:.4em;padding-left:.4em;color:var(--mauve)}
.hero .lockup{left:0;right:0;margin:0 auto;top:44cqw;width:80cqw}
.hero .invite{left:0;right:0;top:84cqw;text-align:center;font:400 3.5cqw/1.75 var(--sans);letter-spacing:.2em;color:var(--ink);padding-left:.2em}
.hero .chev{left:0;right:0;top:104cqw;margin:0 auto;width:7cqw;animation:bob 2.2s ease-in-out infinite}
.hero .chev svg{width:100%;display:block;stroke:var(--mauve);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hand{font-family:var(--hand);color:var(--mauve);line-height:1.25}
.hero .gv{left:5cqw;top:100cqw;font-size:5cqw;width:26cqw;--r:-12deg}
.hero .sw{right:4cqw;top:98cqw;font-size:6.4cqw;width:30cqw;color:#E3A5B6;--r:-9deg;text-align:center}

/* ---------- FOTOS + REPRODUCTOR ---------- */
.photos{height:204cqw}
.photos .quote{left:62cqw;top:15cqw;width:34cqw;font-size:5.6cqw;--r:-7deg;text-align:center}
.photos .pm{right:6cqw;top:76cqw;width:32cqw;font-size:5cqw;--r:6deg;text-align:center}
.player{left:0;right:0;margin:0 auto;top:128cqw;width:90cqw;background:linear-gradient(180deg,#EDD2D3,#E8C8CA);border-radius:4.5cqw;padding:5cqw 5.5cqw 4.2cqw;
  box-shadow:0 .5cqw 0 rgba(255,255,255,.6) inset,0 2.4cqw 5cqw -2cqw rgba(150,90,100,.45),0 0 0 .25cqw rgba(190,130,147,.25)}
.player .top{display:flex;gap:4cqw;align-items:center}
.player .art{width:15cqw;height:15cqw;border-radius:1.4cqw;overflow:hidden;flex:none;box-shadow:0 1cqw 2cqw -.6cqw rgba(90,50,60,.5)}
.player .art img{width:100%;height:100%;object-fit:cover}
.player .meta{flex:1;min-width:0}
.player .t{font:500 4.4cqw var(--sans);color:#3E2F33}
.player .a{font:400 3.5cqw var(--sans);color:#5B4A4E;margin-top:.6cqw}
.player .heart{border:0;background:none;cursor:pointer;width:7cqw;height:7cqw;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.player .heart svg{width:5.4cqw;height:5.4cqw;fill:none;stroke:#6B5459;stroke-width:1.8;transition:transform .25s}
.player .heart.on svg{fill:#C7607F;stroke:#C7607F;transform:scale(1.15)}
.splink{display:block;text-align:center;margin-top:3.4cqw;font:400 3.5cqw var(--sans);color:#6B4853;text-decoration:underline;text-underline-offset:.8cqw}
.hint2{text-align:center;margin-top:3.6cqw;font:400 3.4cqw var(--sans);color:#6B4853}
.spwrap{margin-top:2.4cqw;border-radius:3cqw;overflow:hidden;min-height:80px;background:rgba(110,80,88,.10)}
.spwrap iframe{display:block;width:100%;border:0;color-scheme:normal}
.bar{margin-top:4.5cqw;height:1.1cqw;border-radius:9px;background:rgba(110,80,88,.35);position:relative;cursor:pointer}
.bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:#5C4249;border-radius:9px}
.bar i::after{content:"";position:absolute;right:-1.3cqw;top:50%;width:2.6cqw;height:2.6cqw;margin-top:-1.3cqw;border-radius:50%;background:#5C4249}
.times{display:flex;justify-content:space-between;font:400 2.9cqw var(--sans);color:#5B4A4E;margin-top:1.8cqw}
.ctrl{display:flex;justify-content:center;align-items:center;gap:9cqw;margin-top:1.8cqw}
.ctrl button{border:0;background:none;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.ctrl .sk svg{width:6.4cqw;height:6.4cqw;fill:#6E5359}
.ctrl .pp{width:12.5cqw;height:12.5cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9B7B84,#7C5C66);box-shadow:0 1.2cqw 2.4cqw -.8cqw rgba(70,40,50,.6)}
.ctrl .pp svg{width:5.8cqw;height:5.8cqw;fill:#F3E4E4}
.ctrl .pp .ic-play{display:none}
.ctrl .pp.paused .ic-play{display:block}.ctrl .pp.paused .ic-pause{display:none}

/* ---------- CALENDARIO + CUENTA REGRESIVA ---------- */
.count{height:132cqw}
.cal{left:0;right:0;margin:0 auto;top:9cqw;width:52cqw;text-align:center}
.cal h3{font:400 3.3cqw var(--sans);letter-spacing:.34em;padding-left:.34em;color:var(--mauve);margin-bottom:3cqw}
.cal .g{display:grid;grid-template-columns:repeat(7,1fr);row-gap:1.6cqw;font:400 3.4cqw var(--serif);color:var(--ink)}
.cal .g b{font:400 2.4cqw var(--sans);color:#8a7479;letter-spacing:.1em;padding-bottom:1.2cqw;border-bottom:1px solid rgba(94,69,76,.4);margin-bottom:.6cqw}
.cal .g span{position:relative;display:grid;place-items:center;height:5.4cqw}
.cal .g .day{font-weight:600;color:#fff;z-index:1}
.cal .g .day::before{content:"";position:absolute;width:8cqw;height:8cqw;z-index:-1;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-8.5-5.4-8.5-11.2C3.5 6.6 5.8 4.5 8.4 4.5c1.6 0 2.9.8 3.6 2 .7-1.2 2-2 3.6-2 2.6 0 4.9 2.1 4.9 5.3C20.5 15.6 12 21 12 21z' fill='%23C98095' stroke='%23B4687F' stroke-width='1'/></svg>") center/contain no-repeat}
.band{left:0;right:0;top:66cqw;height:56cqw}
.band .bg{position:absolute;left:-4cqw;right:-2cqw;top:0;bottom:0;filter:url(#rough);
  background:radial-gradient(ellipse at 18% 30%,#F2D9DA 0,transparent 55%),radial-gradient(ellipse at 82% 75%,#E5BEC3 0,transparent 55%),var(--pink)}
.band .bg::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 4cqw rgba(200,150,160,.45)}
.count .faltan{left:0;right:0;top:75cqw;text-align:center;font:400 5.4cqw var(--sans);letter-spacing:.24em;padding-left:.24em;color:var(--ink)}
.count .cd{left:0;right:0;top:90cqw;margin:0 auto;width:82cqw;display:grid;grid-template-columns:repeat(4,1fr);align-items:start}
.cd div{text-align:center;position:relative}
.cd div + div::before{content:"";position:absolute;left:0;top:1.5cqw;height:12cqw;width:1px;background:rgba(59,44,47,.55)}
.cd b{display:block;font:500 11.5cqw/1 var(--serif);color:var(--mauve);letter-spacing:.02em;font-variant-numeric:lining-nums tabular-nums}
.cd small{display:block;margin-top:2cqw;font:400 3.1cqw var(--sans);letter-spacing:.2em;padding-left:.2em;color:var(--ink)}

/* ---------- EVENTO ---------- */
.event{height:176cqw}
.postit{right:5cqw;top:11cqw;width:40cqw;height:34cqw;--r:4deg}
.postit .bg{position:absolute;inset:0;background:radial-gradient(ellipse at 25% 20%,#F6DEDD 0,transparent 60%),#EFD3D3;filter:url(#rough2);box-shadow:0 1cqw 3cqw rgba(150,100,100,.4)}
.postit p{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:4cqw;font-size:5.5cqw;color:var(--mauve);line-height:1.28}
.when{left:0;right:0;top:70cqw;text-align:center;font:400 3.5cqw var(--sans);letter-spacing:.28em;padding-left:.28em;color:var(--mauve)}
.when em{display:block;margin-top:1.2cqw;font:italic 500 5.2cqw var(--serif);letter-spacing:.02em;color:var(--ink);padding:0}
.cols{left:0;right:0;top:92cqw;margin:0 auto;width:90cqw;display:grid;grid-template-columns:1fr 1px 1fr;gap:0}
.cols .vr{background:rgba(59,44,47,.3);margin:0 0}
.cols .c{text-align:center;padding:0 2.4cqw;display:flex;flex-direction:column;align-items:center}
.cols .ic{height:11cqw;width:auto;margin:0 auto 3.4cqw;opacity:.9}
.cols h4{font:400 3.7cqw var(--sans);letter-spacing:.24em;padding-left:.24em;color:var(--ink);margin-bottom:3.2cqw}
.cols p{font:400 4.5cqw/1.32 var(--serif);color:var(--ink);flex:1}
.cols p small{font:400 3.7cqw var(--serif);color:#5b4a4e}
.cols .tm{display:flex;gap:2cqw;align-items:center;justify-content:center;margin-top:4.2cqw;font:400 4cqw var(--sans);letter-spacing:.06em}
.clock{width:4.6cqw;height:4.6cqw;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round}

/* ---------- VESTIMENTA ---------- */
.dress{height:126cqw}
.dress .band{top:44cqw;height:74cqw}
.dress h3{left:0;right:0;top:55cqw;text-align:center;font:400 4.4cqw/1.7 var(--sans);letter-spacing:.14em;padding-left:.14em;color:var(--ink)}
.dress .note{left:8cqw;right:8cqw;top:78cqw;text-align:center;font-size:5.2cqw;--r:-2deg}
.dress .rec{left:0;right:0;margin:0 auto;width:max-content;top:98cqw;font-size:5.6cqw;padding:3.4cqw 8cqw 3.4cqw 6.4cqw;gap:3cqw}
.dress .l{left:5cqw;top:72cqw;width:44cqw;text-align:center}
.dress .l img{height:15cqw;width:auto;margin:0 auto 2.4cqw}
.dress .l b{display:block;font:500 5.4cqw var(--serif);white-space:nowrap;color:var(--ink)}
.dress .l small{display:block;margin-top:1cqw;font:400 3.6cqw var(--serif);color:#5b4a4e}
.dress .vr{left:51cqw;top:71cqw;height:28cqw;width:1px;background:rgba(59,44,47,.4)}
.dress .r{left:54cqw;top:74cqw;width:38cqw;font-size:5cqw;text-align:center;--r:-7deg}

/* ---------- CONFIRMAR + UBICACIÓN ---------- */
.rsvp{height:112cqw}
.rsvp h3{left:0;right:0;font:400 4.6cqw var(--sans);letter-spacing:.22em;padding-left:.22em;text-align:center;color:var(--mauve)}
.rsvp .wa{left:0;right:0;margin:0 auto;width:max-content;top:46cqw}
.rsvp .wa svg{width:7cqw;height:7cqw;fill:#fff}
.rsvp .wa{font-size:6cqw;padding:3.8cqw 9cqw 3.8cqw 7cqw;gap:3cqw}
.rsvp .honor{left:0;right:0;top:63cqw;text-align:center;font-size:5.2cqw;--r:-3deg;padding:0 14cqw}
.rsvp .sep{left:18cqw;right:18cqw;top:92cqw;height:1px;background:linear-gradient(90deg,transparent,rgba(59,44,47,.35),transparent)}
.rsvp .loc{left:0;right:0;top:104cqw;text-align:center}
.rsvp .loc svg.pin{width:9cqw;height:9cqw;fill:#C48C9C;margin:0 auto}
.rsvp .loc h4{font:400 3.8cqw var(--sans);letter-spacing:.24em;padding-left:.24em;color:var(--mauve);margin-top:1.5cqw}
.rsvp .loc b{display:block;font:600 6cqw var(--serif);margin-top:2.4cqw;color:var(--ink)}
.rsvp .loc span{display:block;font:400 4.6cqw var(--serif);color:var(--ink);margin-top:.6cqw}
.rsvp .map{left:0;right:0;margin:0 auto;width:max-content;top:140cqw;font-size:4.4cqw;padding:3.2cqw 6.6cqw}
.foot{left:0;right:0;bottom:7cqw;text-align:center}
.foot p{display:flex;align-items:center;gap:3cqw;justify-content:center;font:400 3.1cqw var(--sans);letter-spacing:.26em;white-space:nowrap;color:var(--mauve)}
.foot p::before,.foot p::after{content:"";height:1px;width:6cqw;background:rgba(59,44,47,.35)}
.foot svg{display:block;margin:3cqw auto 0;width:4.4cqw;fill:none;stroke:#C48C9C;stroke-width:1.6}


/* nombre (título) */
.nm{position:relative;text-align:center;line-height:1;white-space:nowrap}
.nm .n1{display:block;font:400 16.4cqw/1 var(--display);color:#2d2124;transform:rotate(-3deg);letter-spacing:-.012em}
.nm .n2{display:block;font:400 14.5cqw/1 var(--script);color:#3b2c2f;margin:-1.5cqw 0 0 8cqw;transform:rotate(-4deg)}
.nm .hat{position:absolute;left:3cqw;top:-8cqw;width:16cqw;height:auto;transform:rotate(-8deg)}
/* polaroids con las fotos */
.pol{position:absolute;background:#FBF7F1;padding:2.3cqw 2.3cqw 8.5cqw;box-shadow:0 .9cqw 2.8cqw -.6cqw rgba(90,60,55,.5),0 0 0 .2cqw rgba(0,0,0,.06)}
.pol img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pol::before{content:"";position:absolute;z-index:2;top:-2.4cqw;left:50%;width:15cqw;height:4.8cqw;margin-left:-7.5cqw;background:rgba(232,186,196,.78);transform:rotate(-4deg);box-shadow:0 .3cqw .8cqw rgba(120,70,80,.25);clip-path:polygon(2% 0,98% 6%,100% 100%,0 94%)}
.pol.t2::before{transform:rotate(5deg)}
/* botones pequeños */
.btn.sm{font-size:3.7cqw;padding:2.3cqw 4.6cqw;margin-top:4cqw}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:rotate(var(--r,0deg))!important;transition:none!important}
  .sway,.floaty,.tw,.disco,.chev,.btn.pulse,.mbtn.on{animation:none!important}
  .cover{transition:opacity .4s}
}