:root{
  --bg-a:#fbfaee;
  --bg-b:#ffffff;
  --ink:#111111;
  --muted:#555555;
  --accent:#777f6e;
  --accent-dark:#5f6657;

  --on-accent:#ffffff;
  --veil:rgba(251,250,238,.55);
  --card-bg:rgba(255,255,255,.34);
  --card-border:rgba(255,255,255,.55);
  --tint:rgba(119,127,110,.14);
  --shadow:rgba(0,0,0,.18);
  --shadow-soft:rgba(0,0,0,.12);
  --shadow-strong:rgba(0,0,0,.25);
  --scrim:rgba(0,0,0,.35);
  --scrim-soft:rgba(0,0,0,.4);
  --lightbox-bg:rgba(17,17,17,.9);
  --art-shadow:rgba(0,0,0,.35);
  --on-hero:#ffffff;

  --wrap:680px;
  --pad:22px;
}

@font-face{
  font-family:"Brittany";
  src:url("../assets/fonts/brittany.woff2") format("woff2"),
      url("../assets/fonts/brittany.woff") format("woff");
  font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg-a);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}

img{max-width:100%;display:block}

a{color:inherit}

h1,h2,.splash-title,.quote,.sec-title,.cd-done{
  font-family:"Brittany","Great Vibes",cursive;
  font-weight:400;
  line-height:1.15;
}

.fixed-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:url("../assets/imagenes/fondofijo.jpg?v=20260902") center/cover no-repeat;
  background-attachment:fixed;
}
.fixed-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 80% at 50% 40%,transparent 55%,var(--scrim) 100%);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:13px 26px;
  border:none;
  border-radius:999px;
  font-family:inherit;
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease,opacity .15s ease;
}
.btn:active{transform:scale(.96)}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-ghost{background:transparent;color:var(--accent-dark);border:1.5px solid var(--accent-dark)}

.splash{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--pad);
  background:url("../assets/imagenes/fondofijo.jpg?v=20260902") center/cover no-repeat;
  transition:opacity .6s ease,visibility .6s ease;
}
.splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-veil{
  position:absolute;
  inset:0;
  background:var(--veil);
}
.splash-card{
  position:relative;
  width:min(92vw,420px);
  padding:38px 30px;
  text-align:center;
  border-radius:22px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 60px var(--shadow);
}
.splash-kicker{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.7rem;
  font-weight:600;
  color:var(--muted);
}
.splash-mid{
  padding:50px 0;
}
.splash-title{
  font-size:clamp(2.6rem,12vw,3.6rem);
  color:var(--ink);
  white-space:nowrap;
}
.splash-name{
  font-family:"Brittany","Great Vibes",cursive;
  font-size:clamp(1.8rem,8vw,2.4rem);
  color:var(--accent-dark);
  margin-top:6px;
}

.confetti-canvas{
  position:fixed;
  inset:0;
  z-index:70;
  width:100%;
  height:100%;
  pointer-events:none;
}

.music-btn{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:50;
  width:54px;
  height:54px;
  border:none;
  border-radius:50%;
  background:var(--accent);
  color:var(--on-accent);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px var(--shadow-strong);
}
.music-btn .eq{display:none;gap:3px;align-items:flex-end;height:20px}
.music-btn .eq i{
  width:3px;
  height:100%;
  background:var(--on-accent);
  border-radius:2px;
  animation:eq 1s ease-in-out infinite;
}
.music-btn .eq i:nth-child(2){animation-delay:.2s}
.music-btn .eq i:nth-child(3){animation-delay:.4s}
.music-btn .eq i:nth-child(4){animation-delay:.6s}
.music-btn .play-tri{
  width:0;height:0;
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--on-accent);
  margin-left:3px;
}
.music-btn.playing .eq{display:flex}
.music-btn.playing .play-tri{display:none}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  padding:var(--pad);
}
.hero-inner{
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-art{
  width:auto;
  max-width:min(90vw,440px);
  max-height:80svh;
  filter:drop-shadow(0 14px 30px var(--art-shadow));
  animation:floaty 5s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}

.scroll-ind{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--on-hero);
}
.mouse{
  width:24px;
  height:38px;
  border:2px solid var(--on-hero);
  border-radius:14px;
  position:relative;
}
.mouse::after{
  content:"";
  position:absolute;
  left:50%;
  top:7px;
  width:3px;
  height:7px;
  background:var(--on-accent);
  border-radius:2px;
  transform:translateX(-50%);
  animation:wheel 1.6s ease-in-out infinite;
}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}
.scroll-word{
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:600;
  text-shadow:0 1px 6px var(--scrim-soft);
}

.section{
  position:relative;
  padding:76px var(--pad);
}
.section.bg-a{background:var(--bg-a)}
.section.bg-b{background:var(--bg-b)}
.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.sec-icon{
  width:min(150px,42vw);
  height:min(150px,42vw);
  background-color:var(--accent-dark);
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain;
  opacity:0;
  transform:scale(.3);
}
.sec-icon.in{
  animation:bounceIn .8s cubic-bezier(.2,.7,.3,1.2) forwards;
}
.sec-icon.in.loop{
  animation:bounceIn .8s cubic-bezier(.2,.7,.3,1.2) forwards,giftLoop 2.6s ease-in-out 1s infinite;
}
@keyframes bounceIn{
  0%{opacity:0;transform:scale(.3)}
  60%{opacity:1;transform:scale(1.18)}
  80%{transform:scale(.94)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes giftLoop{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.08)}
}

.sec-title{
  font-size:clamp(2.4rem,9vw,3.2rem);
  color:var(--ink);
}
.sec-text{
  font-size:1.02rem;
  max-width:36ch;
}
.sec-text.muted,.muted{color:var(--muted)}
.quote{
  font-size:clamp(1.7rem,6.5vw,2.4rem);
  color:var(--accent-dark);
  max-width:22ch;
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.in{opacity:1;transform:none}

.countdown{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  width:100%;
  max-width:420px;
}
.cd-box{
  flex:1 1 0;
  min-width:0;
  padding:14px 4px;
  border-radius:14px;
  background:var(--tint);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.cd-num{
  font-size:clamp(1.1rem,6vw,1.8rem);
  font-weight:700;
  color:var(--accent-dark);
  font-variant-numeric:tabular-nums;
}
.cd-lbl{
  font-size:clamp(.55rem,2.6vw,.72rem);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}
.cd-done{
  font-size:clamp(1.8rem,7vw,2.6rem);
  color:var(--accent-dark);
}

.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  width:100%;
}
.gallery .ph{
  border:none;
  padding:0;
  background:none;
  cursor:pointer;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 22px var(--shadow-soft);
}
.gallery .ph img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  transition:transform .3s ease;
}
.gallery .ph:hover img{transform:scale(1.05)}
.gallery .ph:nth-child(2),
.gallery .ph:nth-child(5){transform:translateY(28px)}

.gift-panel{
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:4px;
}
.gift-panel[hidden]{display:none}
.gift-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border-radius:14px;
  background:var(--tint);
  text-align:left;
}
.gift-lbl{
  display:block;
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.gift-val{
  display:block;
  font-size:.9rem;
  font-weight:600;
  word-break:break-all;
}
.btn-copy{padding:9px 16px;font-size:.78rem;flex-shrink:0}

.btn-wa .wa-ico{
  width:18px;
  height:18px;
  background-color:currentColor;
  -webkit-mask:url("../assets/iconos/whatsapp.svg?v=20260902") center/contain no-repeat;
  mask:url("../assets/iconos/whatsapp.svg?v=20260902") center/contain no-repeat;
}

.footer{
  background:var(--accent);
  color:var(--on-accent);
  text-align:center;
  padding:34px var(--pad);
  font-size:.82rem;
  line-height:1.9;
}
.footer a{text-decoration:underline}

.lightbox{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--lightbox-bg);
}
.lightbox[hidden]{display:none}
.lightbox img{
  max-width:92vw;
  max-height:88svh;
  border-radius:12px;
}
.lightbox-close{
  position:absolute;
  top:16px;
  right:20px;
  background:none;
  border:none;
  color:var(--on-accent);
  font-size:2.4rem;
  line-height:1;
  cursor:pointer;
}

.copied{position:relative}

@media (max-width:520px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .ph:nth-child(2),
  .gallery .ph:nth-child(5){transform:none}
  .gallery .ph:nth-child(2),
  .gallery .ph:nth-child(4),
  .gallery .ph:nth-child(6){transform:translateY(24px)}
  .section{padding:60px var(--pad)}
  .cd-box{padding:12px 2px;border-radius:11px}
  .countdown{gap:7px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-art,.mouse::after,.music-btn .eq i{animation:none}
  .sec-icon.in.loop{animation:bounceIn .8s ease forwards}
  .reveal{transition:none}
}