/* ===== XV Años · Ana Isabel — estilos ===== */
:root{
  --rose-deep:#bf1559;
  --rose:#e0628f;
  --rose-soft:#f0a6c0;
  --ink:#6e2a39;
  --ink-soft:#8a4456;
  --bg-1:#fbe3ea;
  --bg-2:#f3c5d4;
  --bg-3:#efb8cb;
  --card-edge:#e7a6bd;
  --gold-line:linear-gradient(180deg,#8a5a16 0%,#e7c777 20%,#fff4d2 40%,#d9af56 62%,#9a6a1e 84%,#6e4a12 100%);
  --gold-solid:#c79a3a;
  --rg1:#f06aa0; --rg2:#d4256f; --rg3:#a30c4e;
  --font-script:'Pinyon Script',cursive;
  --font-display:'Cinzel',serif;
  --font-body:'Cormorant Garamond',serif;
  --anim:1;            /* multiplier set by Tweaks (0 = off) */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(120% 60% at 50% -8%, #ffd9e6 0%, rgba(255,217,230,0) 55%),
    linear-gradient(160deg,#e7a9bf 0%, #d98aa7 45%, #cf7a9a 100%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---------- shell ---------- */
.stage{
  display:flex;justify-content:center;
  padding:clamp(0px,3vw,26px) clamp(0px,3vw,26px) 40px;
}
.invite{
  position:relative;
  width:100%;max-width:444px;
  background:
    radial-gradient(140% 50% at 50% 0%, #fde7ee 0%, rgba(253,231,238,0) 60%),
    radial-gradient(80% 40% at 12% 38%, #fbdfe8 0%, rgba(251,223,232,0) 60%),
    radial-gradient(80% 40% at 88% 70%, #fbdfe8 0%, rgba(251,223,232,0) 60%),
    linear-gradient(175deg,var(--bg-1) 0%, var(--bg-2) 60%, var(--bg-3) 100%);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(120,30,60,.45), 0 4px 16px rgba(120,30,60,.3);
  isolation:isolate;
}
/* gold frame */
.invite::before{
  content:"";position:absolute;inset:9px;border-radius:6px;
  padding:2.5px;
  background:var(--gold-line);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  z-index:40;pointer-events:none;
  opacity:.92;
  filter:drop-shadow(0 1px 1px rgba(120,60,20,.25));
}
.invite::after{
  content:"";position:absolute;inset:14px;border:1px solid rgba(190,140,40,.4);border-radius:4px;
  z-index:40;pointer-events:none;
}
/* corner flourishes — pure CSS */
.corner{position:absolute;width:38px;height:38px;z-index:42;pointer-events:none;}
.corner::before{content:"";position:absolute;inset:0;
  border-top:2px solid var(--gold-solid);border-left:2px solid var(--gold-solid);
  border-top-left-radius:14px;
  filter:drop-shadow(0 1px 1px rgba(120,70,20,.3));}
.corner::after{content:"";position:absolute;left:-4px;top:-4px;width:10px;height:10px;
  background:var(--gold-line);transform:rotate(45deg);border-radius:1px;
  box-shadow:0 0 0 1px rgba(255,255,255,.45) inset, 0 1px 2px rgba(120,70,20,.35);}
.corner i{position:absolute;left:13px;top:13px;width:13px;height:13px;
  border-top:1.5px solid rgba(199,154,58,.7);border-left:1.5px solid rgba(199,154,58,.7);
  border-top-left-radius:10px;}
.corner.tl{top:19px;left:19px;}
.corner.tr{top:19px;right:19px;transform:scaleX(-1);}
.corner.bl{bottom:19px;left:19px;transform:scaleY(-1);}
.corner.br{bottom:19px;right:19px;transform:scale(-1,-1);}

/* ---------- content rhythm ---------- */
section{position:relative;z-index:5;padding:0 26px;text-align:center;}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}

/* ---------- gold + rose text ---------- */
.gold{
  background:var(--gold-line);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(110,70,20,.35));
}
.rose-grad{
  background:linear-gradient(180deg,var(--rg1) 0%,var(--rg2) 45%,var(--rg3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 1px rgba(150,10,70,.25));
}

/* ---------- hero ---------- */
.garland{display:block;width:108%;margin:-2px -4% 0;
  -webkit-mask:linear-gradient(#000 62%, transparent 100%);
          mask:linear-gradient(#000 62%, transparent 100%);}
.hero{padding-top:6px;margin-top:-26px;}
.kicker{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(26px,8vw,34px);letter-spacing:.04em;
  margin:0;line-height:1.05;
}
.name{
  font-family:var(--font-script);
  font-size:clamp(62px,20vw,92px);line-height:.82;
  margin:.08em 0 .12em;
}
.heart-div{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px auto;max-width:240px;}
.heart-div i{height:1.5px;flex:1;background:linear-gradient(90deg,transparent,var(--gold-solid));}
.heart-div i:last-child{background:linear-gradient(90deg,var(--gold-solid),transparent);}
.heart-div b{width:9px;height:9px;background:var(--gold-line);transform:rotate(45deg);border-radius:1px;
  box-shadow:0 0 0 1px rgba(255,255,255,.3) inset;}

.date-badge{
  display:inline-block;margin:6px auto 2px;padding:11px 30px;border-radius:40px;
  background:linear-gradient(180deg,#f4a9c4,#e87ba6);
  border:2px solid transparent;
  position:relative;
  box-shadow:0 6px 18px rgba(170,40,90,.3), inset 0 1px 2px rgba(255,255,255,.5);
}
.date-badge::before{content:"";position:absolute;inset:0;border-radius:40px;padding:2px;
  background:var(--gold-line);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}
.date-badge span{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,5vw,21px);
  letter-spacing:.06em;color:#fff;text-shadow:0 1px 2px rgba(150,20,70,.5);}

/* ---------- portrait ---------- */
.portrait{margin:26px auto 4px;width:min(78%,300px);position:relative;}
.portrait .frame{position:relative;border-radius:50% 50% 48% 48%/40% 40% 60% 60%;overflow:hidden;
  box-shadow:0 14px 34px rgba(150,40,80,.32);}
.portrait .frame::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.35), inset 0 0 0 6px rgba(199,154,58,.65);}
.portrait img{display:block;width:100%;
  -webkit-mask:radial-gradient(115% 120% at 58% 42%, #000 66%, transparent 94%), linear-gradient(90deg, transparent 0%, #000 14%);
          mask:radial-gradient(115% 120% at 58% 42%, #000 66%, transparent 94%), linear-gradient(90deg, transparent 0%, #000 14%);
  -webkit-mask-composite:source-in; mask-composite:intersect;}

/* ---------- quote ---------- */
.quote{margin:30px auto 6px;}
.quote p{font-style:italic;font-size:clamp(19px,5.4vw,23px);line-height:1.5;color:var(--ink);
  max-width:30ch;margin:14px auto;text-wrap:pretty;}

/* ---------- section heading ---------- */
.shead{font-family:var(--font-script);font-size:clamp(40px,12vw,54px);line-height:.9;margin:0 0 6px;}
.subtle{font-size:clamp(17px,4.6vw,19px);line-height:1.45;color:var(--ink-soft);max-width:32ch;margin:6px auto;text-wrap:pretty;}

/* ---------- padres ---------- */
.block{margin:34px auto;}
.duo{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start;margin-top:8px;}
.duo h3{font-family:var(--font-script);font-size:clamp(21px,5.6vw,27px);margin:0 0 5px;line-height:.9;white-space:nowrap;}
.duo p{font-size:clamp(16px,4.6vw,19px);font-weight:600;margin:2px 0;color:var(--ink);}
.duo .orn-css{align-self:center;width:3px;height:108px;margin:0 4px;position:relative;
  background:var(--gold-line);border-radius:2px;}
.duo .orn-css::before,.duo .orn-css::after{content:"";position:absolute;left:50%;width:11px;height:11px;
  transform:translateX(-50%) rotate(45deg);background:var(--gold-line);border-radius:1px;
  box-shadow:0 0 0 1px rgba(255,255,255,.4) inset;}
.duo .orn-css::before{top:-6px;}
.duo .orn-css::after{bottom:-6px;}
.duo .orn-css b{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffc6dc,var(--rose-deep) 78%);
  box-shadow:0 0 0 3px var(--gold-solid),0 2px 6px rgba(150,20,70,.45),inset 0 1px 2px rgba(255,255,255,.5);}

/* ---------- countdown ---------- */
.count{display:flex;justify-content:center;gap:9px;margin:18px auto 4px;max-width:360px;}
.cbox{flex:1;position:relative;padding:14px 4px 10px;border-radius:12px;
  background:linear-gradient(180deg,#fde7ee,#f6cedb);
  box-shadow:0 6px 16px rgba(160,40,85,.18), inset 0 1px 2px rgba(255,255,255,.6);}
.cbox::before{content:"";position:absolute;inset:0;border-radius:12px;padding:1.5px;
  background:var(--gold-line);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}
.cbox b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(24px,7.5vw,32px);
  color:var(--rose-deep);line-height:1;}
.cbox span{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px;}

/* ---------- detail rows ---------- */
.figframe{width:min(60%,210px);margin:14px auto 18px;border-radius:14px;overflow:hidden;position:relative;
  box-shadow:0 10px 24px rgba(150,40,80,.26);}
.figframe::after{content:"";position:absolute;inset:0;border-radius:14px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4), inset 0 0 0 5px rgba(199,154,58,.6);}
.figframe img{display:block;width:100%;}
.det{display:flex;gap:12px;align-items:flex-start;text-align:left;max-width:330px;margin:13px auto;}
.pin{flex:none;width:24px;height:24px;margin-top:3px;position:relative;}
.pin::before{content:"";position:absolute;left:50%;top:0;width:20px;height:20px;transform:translateX(-50%) rotate(45deg);
  border-radius:50% 50% 50% 0;background:linear-gradient(135deg,#e0628f,#bf1559);
  box-shadow:0 2px 5px rgba(150,20,70,.4);}
.pin::after{content:"";position:absolute;left:50%;top:7px;width:7px;height:7px;transform:translateX(-50%);
  background:#fde7ee;border-radius:50%;}
.pin.clock::before{border-radius:50%;}
.pin.clock i{position:absolute;left:50%;top:5px;width:1.5px;height:6px;background:#fde7ee;transform-origin:bottom;
  transform:translateX(-50%);z-index:2;}
.pin.clock i:last-child{height:5px;transform:translateX(-50%) rotate(90deg);}
.det .lab{font-size:clamp(17px,4.7vw,19px);line-height:1.4;}
.det .lab b{color:var(--rose-deep);font-weight:700;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:none;
  font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.03em;
  padding:13px 26px;border-radius:40px;color:#fff;margin:8px 5px;
  background:linear-gradient(180deg,#e0628f,#bf1559);
  box-shadow:0 8px 20px rgba(170,30,85,.35), inset 0 1px 1px rgba(255,255,255,.4);
  transition:transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(170,30,85,.45);}
.btn:active{transform:translateY(0);}
.btn.gold-btn{background:linear-gradient(180deg,#e7c777,#c79a3a);color:#5a3a08;
  text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:0 8px 20px rgba(150,110,30,.35);}
.btn.wa{background:linear-gradient(180deg,#3ed27a,#1faa57);box-shadow:0 8px 20px rgba(20,140,70,.35);}
.btn svg{width:18px;height:18px;}

/* ---------- music toggle ---------- */
.music-btn{position:fixed;left:14px;bottom:14px;z-index:60;width:50px;height:50px;border-radius:50%;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#f4a9c4,#d4256f);color:#fff;
  box-shadow:0 6px 18px rgba(170,30,85,.4),inset 0 1px 1px rgba(255,255,255,.5);
  transition:transform .15s ease, opacity .2s ease;-webkit-tap-highlight-color:transparent;}
.music-btn::before{content:"";position:absolute;inset:0;border-radius:50%;padding:2px;
  background:var(--gold-line);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}
.music-btn::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(199,154,58,.7);opacity:0;}
.music-btn:hover{transform:scale(1.07);}
.music-btn svg{width:22px;height:22px;position:relative;z-index:1;}
.music-btn.paused{opacity:.85;}
.music-btn.paused svg{opacity:.7;}
.music-btn.playing::after{animation:ring 1.9s ease-out infinite;}
.music-btn.playing svg{animation:notebob 1.1s ease-in-out infinite;transform-origin:center;}
@keyframes ring{0%{transform:scale(.92);opacity:.65;}100%{transform:scale(1.55);opacity:0;}}
@keyframes notebob{0%,100%{transform:scale(1) rotate(-4deg);}50%{transform:scale(1.14) rotate(4deg);}}

/* ---------- QR ---------- */
.qr-wrap{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:16px auto;}
.qr-card{background:#fff;padding:12px;border-radius:14px;position:relative;
  box-shadow:0 8px 20px rgba(150,40,80,.22);}
.qr-card::before{content:"";position:absolute;inset:0;border-radius:14px;padding:2px;
  background:var(--gold-line);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}
.qr-card canvas,.qr-card img{display:block;width:124px;height:124px;border-radius:4px;}
.qr-card em{display:block;font-style:normal;font-family:var(--font-display);font-weight:600;
  font-size:13px;letter-spacing:.04em;color:var(--rose-deep);margin-top:8px;}

/* ---------- recepcion accent ---------- */
.venue{font-family:var(--font-script);font-size:clamp(40px,12vw,52px);line-height:.95;margin:6px 0;}

/* ---------- footer ---------- */
.foot{padding:30px 26px 40px;text-align:center;}
.monogram{font-family:var(--font-script);font-size:64px;line-height:1;margin:6px 0;}
.foot .tag{font-family:var(--font-display);letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:var(--ink-soft);}


/* divider scroll */
.div-orn{width:150px;height:auto;margin:8px auto;display:block;opacity:.9;
  filter:drop-shadow(0 1px 1px rgba(120,60,20,.25));}

/* ---------- animation overlay ---------- */
.fx{position:absolute;inset:0;overflow:hidden;z-index:30;pointer-events:none;}
.petal{position:absolute;top:-30px;width:14px;height:14px;border-radius:0 100% 0 100%;
  background:radial-gradient(circle at 30% 30%, #ffd2e1, #ef93b4);opacity:.85;
  animation:fall linear infinite;}
@keyframes fall{
  0%{transform:translateY(-30px) rotate(0deg);opacity:0;}
  10%{opacity:.85;}
  100%{transform:translateY(115vh) rotate(540deg);opacity:.2;}
}
.spark{position:absolute;width:10px;height:10px;animation:twinkle ease-in-out infinite;}
.spark::before,.spark::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle,#fff 0%, #ffe7b0 40%, transparent 70%);}
.spark::after{transform:rotate(45deg);}
@keyframes twinkle{0%,100%{transform:scale(.3);opacity:0;}50%{transform:scale(1);opacity:.95;}}
/* CSS animated butterfly */
.cbfly{position:absolute;perspective:160px;will-change:transform;
  animation:drift ease-in-out infinite;
  filter:drop-shadow(0 4px 5px rgba(150,40,80,.32));}
.cbfly::before,.cbfly::after{content:"";position:absolute;top:-26%;width:1.4px;height:30%;
  background:var(--gold-solid);border-radius:2px;transform-origin:bottom;}
.cbfly::before{left:45%;transform:rotate(-24deg);}
.cbfly::after{right:45%;transform:rotate(24deg);}
.cbfly .wing{position:absolute;top:0;width:49%;height:100%;}
.cbfly .wing.l{left:0;transform-origin:right center;animation:flapL .34s ease-in-out infinite alternate;}
.cbfly .wing.r{right:0;transform-origin:left center;animation:flapR .34s ease-in-out infinite alternate;}
.cbfly .wing::before,.cbfly .wing::after{content:"";position:absolute;
  background:radial-gradient(120% 120% at 30% 25%,#fff 0%,#ffd9e8 18%,var(--bw1) 55%,var(--bw2) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 1px rgba(199,154,58,.65);}
.cbfly .wing::before{top:0;width:100%;height:60%;border-radius:60% 60% 45% 45%/70% 70% 40% 40%;}
.cbfly .wing::after{bottom:0;width:80%;height:46%;border-radius:45% 45% 60% 60%/35% 35% 75% 75%;}
.cbfly .wing.l::before,.cbfly .wing.l::after{right:0;}
.cbfly .wing.r::before,.cbfly .wing.r::after{left:0;}
.cbfly .body{position:absolute;left:50%;top:6%;width:2.2px;height:88%;transform:translateX(-50%);
  background:linear-gradient(#6e4a12,#caa23c 50%,#6e4a12);border-radius:3px;z-index:2;}
@keyframes flapL{from{transform:rotateY(6deg);}to{transform:rotateY(46deg);}}
@keyframes flapR{from{transform:rotateY(-6deg);}to{transform:rotateY(-46deg);}}
@keyframes drift{
  0%{transform:translate(0,0) rotate(-6deg);}
  25%{transform:translate(18px,-26px) rotate(6deg);}
  50%{transform:translate(-12px,-12px) rotate(-4deg);}
  75%{transform:translate(14px,16px) rotate(8deg);}
  100%{transform:translate(0,0) rotate(-6deg);}
}
@media (prefers-reduced-motion:reduce){
  .petal,.spark,.cbfly,.cbfly .wing{animation:none;}
}

/* scroll hint */
.scroll-hint{display:flex;flex-direction:column;align-items:center;gap:4px;margin:22px auto 2px;
  color:var(--ink-soft);animation:bob 1.8s ease-in-out infinite;}
.scroll-hint span{font-family:var(--font-display);letter-spacing:.18em;text-transform:uppercase;font-size:11px;}
.scroll-hint b{width:22px;height:22px;border-right:2px solid var(--gold-solid);border-bottom:2px solid var(--gold-solid);
  transform:rotate(45deg);}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* ---------- entry overlay ---------- */
.enter-overlay{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:
    radial-gradient(120% 70% at 50% 0%, #fde7ee 0%, rgba(253,231,238,0) 55%),
    linear-gradient(160deg,#e7a9bf 0%, #d98aa7 45%, #cf7a9a 100%);
  transition:opacity .7s ease, visibility .7s ease;}
.enter-overlay.gone{opacity:0;visibility:hidden;pointer-events:none;}
.enter-card{position:relative;width:100%;max-width:360px;text-align:center;padding:48px 30px 40px;
  border-radius:12px;
  background:linear-gradient(175deg,var(--bg-1) 0%, var(--bg-2) 60%, var(--bg-3) 100%);
  box-shadow:0 24px 70px rgba(120,30,60,.45);
  animation:cardIn .8s cubic-bezier(.2,.7,.2,1) both;}
.enter-card::before{content:"";position:absolute;inset:9px;border-radius:6px;padding:2.5px;
  background:var(--gold-line);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.92;}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.96);}to{opacity:1;transform:none;}}
.enter-corner{position:absolute;width:34px;height:34px;z-index:2;}
.enter-corner i{display:none;}
.enter-corner::before{content:"";position:absolute;inset:0;
  border-top:2px solid var(--gold-solid);border-left:2px solid var(--gold-solid);border-top-left-radius:14px;}
.enter-corner::after{content:"";position:absolute;left:-4px;top:-4px;width:10px;height:10px;
  background:var(--gold-line);transform:rotate(45deg);border-radius:1px;}
.enter-corner.tl{top:18px;left:18px;}
.enter-corner.tr{top:18px;right:18px;transform:scaleX(-1);}
.enter-corner.bl{bottom:18px;left:18px;transform:scaleY(-1);}
.enter-corner.br{bottom:18px;right:18px;transform:scale(-1,-1);}
.enter-kicker{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.05em;margin:0;}
.enter-name{font-family:var(--font-script);font-size:clamp(56px,18vw,74px);line-height:.85;margin:.08em 0 .14em;}
.enter-sub{font-size:18px;color:var(--ink-soft);margin:10px auto 22px;max-width:24ch;line-height:1.4;text-wrap:pretty;}
.enter-btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:none;
  font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:.03em;
  padding:15px 32px;border-radius:40px;color:#fff;
  background:linear-gradient(180deg,#e0628f,#bf1559);
  box-shadow:0 10px 24px rgba(170,30,85,.4), inset 0 1px 1px rgba(255,255,255,.4);
  animation:pulse 2.2s ease-in-out infinite;}
.enter-btn svg{width:20px;height:20px;}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 10px 24px rgba(170,30,85,.4);}
  50%{transform:scale(1.05);box-shadow:0 14px 30px rgba(170,30,85,.5);}}
.enter-note{font-family:var(--font-display);letter-spacing:.04em;font-size:13px;color:var(--ink-soft);margin:16px 0 0;}