:root{
  --bg-a:#f1e4d1;
  --bg-b:#ffffff;
  --ink:#201b19;
  --muted:#201b19;
  --accent:#617a62;
  --accent-dark:#4c5f4d;

  --on-accent:#ffffff;
  --veil:rgba(255,255,255,.62);
  --card-bg:rgba(255,255,255,.66);
  --card-border:rgba(32,27,25,.14);
  --tint:rgba(97,122,98,.12);
  --shadow:rgba(32,27,25,.14);
  --shadow-soft:rgba(32,27,25,.08);
  --shadow-strong:rgba(32,27,25,.24);
  --scrim:rgba(32,27,25,.46);
  --scrim-soft:rgba(32,27,25,.24);
  --lightbox-bg:rgba(18,15,14,.92);
  --art-shadow:rgba(76,95,77,.34);
  --on-hero:#201b19;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}

html{background:var(--bg-b);scroll-behavior:smooth}
body{
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:transparent;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

h1,h2,.script{
  font-family:"Brittany","Great Vibes",cursive;
  font-weight:400;
  line-height:1.15;
}

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

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

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  font-family:inherit;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.02em;
  padding:.85em 1.6em;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-accent{
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:0 10px 24px var(--art-shadow);
}
.btn-accent:hover{background:var(--accent-dark)}
.btn-ghost{
  background:transparent;
  color:var(--accent-dark);
  border-color:var(--accent-dark);
}
.btn-ghost:hover{background:var(--tint)}

.splash{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:linear-gradient(var(--veil),var(--veil)),url("../assets/imagenes/fondofijo.jpg?v=20260902") center/cover no-repeat;
  opacity:1;
  transition:opacity .7s ease;
}
.splash.gone{opacity:0;pointer-events:none}
.splash-card{
  width:min(92vw,420px);
  padding:44px 30px;
  text-align:center;
  border-radius:26px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  box-shadow:0 24px 60px var(--shadow-strong);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.kicker{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.7rem;
  font-weight:600;
  color:var(--muted);
}
.splash-mid{
  padding:50px 0;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
}
.splash-title{
  font-size:clamp(3rem,14vw,4.4rem);
  color:var(--ink);
  white-space:nowrap;
}
.splash-name{
  font-family:"Brittany","Great Vibes",cursive;
  font-size:clamp(2rem,9vw,2.8rem);
  color:var(--accent-dark);
}

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

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:64px 20px 96px;
  background:transparent;
  overflow:hidden;
}
.hero-art{
  width:min(90vw,440px);
  height:auto;
  max-width:min(90vw,440px);
  max-height:80svh;
  object-fit:contain;
  filter:drop-shadow(0 14px 30px var(--shadow));
  animation:floaty 5.5s ease-in-out infinite;
}
.scroll-ind{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--on-hero);
}
.scroll-word{
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.66rem;
  font-weight:600;
}
.mouse{
  width:26px;
  height:42px;
  border:2px solid var(--on-hero);
  border-radius:16px;
  display:flex;
  justify-content:center;
  padding-top:7px;
}
.wheel{
  width:4px;
  height:8px;
  border-radius:2px;
  background:var(--on-hero);
  animation:wheel 1.6s ease-in-out infinite;
}

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

.section h2{
  font-size:clamp(2.6rem,11vw,3.6rem);
  color:var(--accent-dark);
}
.lead{font-size:1.12rem;font-weight:500}
.muted{color:var(--muted);opacity:.72}
.quote{
  font-family:"Brittany","Great Vibes",cursive;
  font-size:clamp(1.7rem,6.5vw,2.4rem);
  line-height:1.4;
  color:var(--accent-dark);
}

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

.sec-icon{
  width:min(150px,42vw);
  height:min(150px,42vw);
  background-color:var(--accent-dark);
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  opacity:0;
  transform:scale(.3);
  filter:drop-shadow(0 12px 22px var(--art-shadow));
}
.sec-icon.in{
  opacity:1;
  transform:none;
  animation:bounceIn .8s cubic-bezier(.22,1.2,.36,1) forwards;
}
.sec-icon.in.loop{
  animation:giftBounce 2.6s ease-in-out infinite;
}

.countdown{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  width:100%;
  max-width:520px;
}
.cd-box{
  flex:1 1 0;
  min-width:0;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:16px 6px;
  display:flex;
  flex-direction:column;
  gap:4px;
  box-shadow:0 10px 24px var(--shadow-soft);
}
.cd-num{
  font-size:clamp(1.4rem,7vw,2.1rem);
  font-weight:700;
  color:var(--accent-dark);
  line-height:1;
}
.cd-lbl{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.62rem;
  font-weight:600;
  color:var(--muted);
}
.countdown-done{
  font-family:"Brittany","Great Vibes",cursive;
  font-size:clamp(1.6rem,6vw,2.2rem);
  color:var(--accent-dark);
}

.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  width:100%;
  align-items:start;
}
.gallery figure{
  margin:0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 28px var(--shadow);
  cursor:pointer;
}
.gallery figure:nth-child(3n+2){transform:translateY(34px)}
.gallery img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  transition:transform .4s ease;
}
.gallery figure:hover img{transform:scale(1.05)}

.gift-panel{
  width:100%;
  max-width:460px;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:4px;
}
.gift-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 10px 24px var(--shadow-soft);
}
.gift-data{display:flex;flex-direction:column;gap:2px;text-align:left;min-width:0}
.gift-lbl{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.6rem;
  font-weight:700;
  color:var(--muted);
}
.gift-val{font-weight:600;word-break:break-all}
.copy-btn{flex:none;padding:.55em 1.1em;font-size:.82rem}

.actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.wsp-ico{
  width:1.2em;
  height:1.2em;
  background-color:var(--on-accent);
  -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:54px 20px;
  font-size:.9rem;
}
.footer .wrap{gap:6px}
.footer a{color:var(--on-accent);font-weight:600}

.music-btn{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:90;
  width:54px;
  height:54px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:0 12px 28px var(--shadow-strong);
  display:flex;
  align-items:center;
  justify-content:center;
}
.music-btn .eq{display:none;align-items:flex-end;gap:3px;height:20px}
.music-btn .eq i{
  width:3px;
  height:100%;
  background:var(--on-accent);
  border-radius:2px;
  transform-origin:bottom;
  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}

.lightbox{
  position:fixed;
  inset:0;
  z-index:130;
  background:var(--lightbox-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.lightbox img{
  max-width:92vw;
  max-height:88vh;
  border-radius:10px;
  box-shadow:0 30px 70px var(--shadow-strong);
}
.lightbox-close{
  position:absolute;
  top:16px;
  right:22px;
  background:transparent;
  border:none;
  color:var(--on-accent);
  font-size:2.4rem;
  line-height:1;
  cursor:pointer;
}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes wheel{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes bounceIn{
  0%{opacity:0;transform:scale(.3)}
  55%{opacity:1;transform:scale(1.2)}
  75%{transform:scale(.92)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes giftBounce{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.08)}
}

@media (max-width:520px){
  .section{padding:76px 18px}
  .countdown{gap:7px}
  .cd-box{padding:12px 3px;border-radius:13px}
  .cd-lbl{font-size:.54rem;letter-spacing:.08em}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery figure:nth-child(3n+2){transform:none}
  .gallery figure:nth-child(2n){transform:translateY(28px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-art,.wheel,.music-btn .eq i{animation:none}
  .sec-icon.in.loop{animation:none}
  .reveal{transition-duration:.001s}
}