:root {
  --black: #050505;
  --black-soft: #0d0d0d;
  --gold: #d6a84b;
  --gold-light: #f5d98b;
  --gold-dark: #9a6a16;
  --cream: #fff7df;
  --text: #f7f1e5;
  --muted: #c7c0b4;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--text);
  font-family: "Montserrat", sans-serif;
  line-height: 1.75;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at 20% 18%, rgba(214,168,75,.10), transparent 30%),
    radial-gradient(circle at 80% 60%, rgba(214,168,75,.08), transparent 28%),
    linear-gradient(180deg, #060606 0%, #0a0907 55%, #050505 100%);
}
a { text-decoration: none; }
h1,h2,h3 { font-family: "Cormorant Garamond", serif; }
.section { position: relative; padding: 100px 0; }
.section-kicker {
  margin-bottom: .6rem;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .78rem;
  font-weight: 600;
}
h2 { color: var(--gold-light); font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; }
.gold-line { width: 92px; height: 1px; margin: 28px 0; background: linear-gradient(90deg,var(--gold),transparent); }

.stars { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.stars-a { background-image: radial-gradient(circle, rgba(255,220,130,.92) 0 1px, transparent 1.5px); background-size: 58px 58px; opacity: .44; }
.stars-b { background-image: radial-gradient(circle, rgba(255,244,199,.8) 0 1px, transparent 1.4px); background-size: 89px 89px; background-position: 27px 13px; opacity: .28; animation: star-drift 26s linear infinite; }
@keyframes star-drift { to { transform: translateY(89px); } }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: url("../img/foto-1.jpg") 66% center / cover no-repeat;
}
.hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,190,69,.13), transparent 25%),
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.68) 42%, rgba(0,0,0,.25) 72%, rgba(0,0,0,.36) 100%);
}
.hero-overlay { position:absolute; inset:0; box-shadow: inset 0 -140px 130px rgba(0,0,0,.75); }
.hero-content { position:relative; z-index:2; width:min(100%, 1100px); text-align:left !important; }
.eyebrow { color:var(--gold-light); text-transform:uppercase; letter-spacing:.35em; font-size:.82rem; }
.hero-name { margin:0; color:transparent; background:linear-gradient(180deg,#fff7d3,#d39a34 55%,#8f5d12); -webkit-background-clip:text; background-clip:text; font-size:clamp(5.8rem,14vw,11rem); font-weight:600; line-height:.78; text-shadow:0 0 35px rgba(214,168,75,.14); }
.hero-xv { margin:.7rem 0 1rem 2.2rem; font-family:"Parisienne",cursive; color:var(--gold); font-size:clamp(3.2rem,8vw,6.8rem); line-height:1; }
.hero-xv span { font-family:"Cormorant Garamond",serif; font-weight:600; }
.hero-date { display:inline-block; padding:.7rem 1rem; color:var(--cream); border-top:1px solid rgba(214,168,75,.6); border-bottom:1px solid rgba(214,168,75,.6); letter-spacing:.22em; font-size:clamp(.75rem,2vw,1rem); }
.hero-date span { color:var(--gold); margin:0 .4rem; }
.scroll-indicator { position:absolute; z-index:3; bottom:24px; left:50%; color:var(--gold-light); font-size:1.4rem; animation:bounce 1.8s infinite; }
@keyframes bounce { 50% { transform:translateY(8px); } }

.btn { border-radius:999px; padding:.8rem 1.4rem; font-weight:600; letter-spacing:.04em; transition:.25s ease; }
.btn-gold { color:#171006; border:1px solid #f5d98b; background:linear-gradient(135deg,#9a6818,#f2cf75 48%,#b57a21); box-shadow:0 0 0 1px rgba(255,222,142,.2),0 10px 28px rgba(177,117,25,.25); }
.btn-gold:hover { color:#050505; transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 14px 36px rgba(214,168,75,.32); }
.btn-outline-gold { color:var(--gold-light); border:1px solid var(--gold); background:rgba(0,0,0,.3); }
.btn-outline-gold:hover { color:#080603; background:var(--gold-light); border-color:var(--gold-light); }

.invitation-section { border-top:1px solid rgba(214,168,75,.35); }
.invitation-section p { color:#ded8cc; }
.closing-text { color:var(--gold-light)!important; font-family:"Cormorant Garamond",serif; font-size:1.5rem; }
.signature { margin-top:.5rem; color:var(--gold)!important; font-family:"Parisienne",cursive; font-size:3.4rem; }
.featured-photo { position:relative; margin:0; border:1px solid rgba(214,168,75,.7); border-radius:180px 180px 20px 20px; overflow:hidden; box-shadow:0 28px 80px rgba(0,0,0,.55); }
.featured-photo::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 80px rgba(0,0,0,.3); pointer-events:none; }
.featured-photo img { width:100%; height:650px; object-fit:cover; object-position:center 45%; display:block; }

.countdown-section { padding:75px 0; background:rgba(0,0,0,.44); border-block:1px solid rgba(214,168,75,.24); }
.countdown { display:grid; grid-template-columns:repeat(4,1fr); width:min(100%,900px); margin:2rem auto 0; }
.count-box { position:relative; padding:1rem; }
.count-box:not(:last-child)::after { content:""; position:absolute; right:0; top:22%; height:56%; width:1px; background:linear-gradient(transparent,var(--gold),transparent); }
.count-box span { display:block; color:var(--gold-light); font-family:"Cormorant Garamond",serif; font-size:clamp(3.1rem,8vw,6rem); line-height:1; }
.count-box small { color:var(--cream); text-transform:uppercase; letter-spacing:.18em; }
.countdown-ended { color:var(--gold-light); font-family:"Cormorant Garamond",serif; font-size:2.8rem; }

.info-card,.action-card { position:relative; overflow:hidden; padding:34px 26px; text-align:center; border:1px solid rgba(214,168,75,.48); border-radius:22px; background:linear-gradient(145deg,rgba(22,20,16,.88),rgba(5,5,5,.96)); box-shadow:0 18px 50px rgba(0,0,0,.3); }
.info-card::before,.action-card::before { content:"✦"; position:absolute; right:16px; top:10px; color:rgba(245,217,139,.6); }
.info-card h3,.action-card h3 { color:var(--gold-light); font-size:1.7rem; }
.info-icon,.action-icon { display:block; margin-bottom:12px; color:var(--gold); font-size:2.7rem; }
.info-card p,.action-card p { color:var(--muted); }
.info-card strong,.action-card strong { color:var(--cream); }
.action-section { padding-top:30px; }
.highlight,.price { color:var(--gold-light)!important; font-family:"Cormorant Garamond",serif; font-size:1.8rem; font-weight:600; }
.price { margin-bottom:.3rem; font-size:2.4rem; }
.alias-button { border:0; background:transparent; color:var(--gold-light); font-family:"Cormorant Garamond",serif; font-size:1.7rem; font-weight:600; }
.alias-feedback { display:block; min-height:1.5rem; color:#a9e6b0; }

.gallery-section { border-top:1px solid rgba(214,168,75,.18); }
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:250px; gap:14px; }
.gallery-item { position:relative; padding:0; overflow:hidden; border:1px solid rgba(214,168,75,.55); border-radius:18px; background:#111; cursor:zoom-in; }
.gallery-item::after { content:"✦"; position:absolute; right:14px; bottom:10px; color:var(--gold-light); text-shadow:0 0 10px #000; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .65s ease,filter .65s ease; }
.gallery-item:hover img { transform:scale(1.06); filter:brightness(1.08); }
.gallery-wide { grid-column:span 2; }
.gallery-tall { grid-row:span 2; }

.closing-section { position:relative; min-height:78svh; display:grid; place-items:center; background:url("../img/foto-6.jpg") center 42% / cover no-repeat fixed; }
.closing-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.74)); }
.closing-content { position:relative; z-index:2; text-align:center; }
.closing-content p { margin:0; color:var(--gold); font-family:"Parisienne",cursive; font-size:clamp(3.4rem,9vw,7rem); }
.closing-content h2 { margin-top:-.6rem; color:var(--cream); font-size:clamp(4.6rem,11vw,8rem); }
.closing-content span { color:var(--gold-light); letter-spacing:.35em; }
.site-footer { padding:25px; color:#8e887e; border-top:1px solid rgba(214,168,75,.2); }

.song-modal { color:var(--text); border:1px solid rgba(214,168,75,.58); border-radius:24px; background:linear-gradient(160deg,#17130d,#050505 70%); box-shadow:0 28px 90px #000; }
.song-modal .modal-title { color:var(--gold-light); font-family:"Cormorant Garamond",serif; }
.song-modal p,.song-modal label { color:#d8d0c3; }
.song-modal .form-control { color:#fff; border:1px solid rgba(214,168,75,.38); background:#0d0c0a; }
.song-modal .form-control:focus { border-color:var(--gold); box-shadow:0 0 0 .25rem rgba(214,168,75,.12); }
.btn-spotify { color:white; background:#1db954; }

.lightbox { position:fixed; inset:0; z-index:2000; display:none; place-items:center; padding:25px; background:rgba(0,0,0,.94); }
.lightbox.open { display:grid; }
.lightbox img { max-width:min(95vw,1100px); max-height:90vh; border:1px solid var(--gold); border-radius:12px; box-shadow:0 0 60px rgba(214,168,75,.18); }
.lightbox-close { position:absolute; top:20px; right:25px; border:0; background:transparent; color:#fff; font-size:2rem; }

.reveal { opacity:0; transform:translateY(30px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width:991.98px) {
  .hero { background-position:62% center; }
  .hero::before { background:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,.78) 74%,rgba(0,0,0,.92)); }
  .hero-content { align-self:end; padding-bottom:95px; text-align:center!important; }
  .hero-xv { margin-left:0; }
  .featured-photo img { height:560px; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767.98px) {
  .section { padding:76px 0; }
  .hero-name { font-size:clamp(5rem,28vw,8rem); }
  .hero-date { letter-spacing:.1em; }
  .countdown { grid-template-columns:repeat(2,1fr); gap:10px; }
  .count-box:nth-child(2)::after { display:none; }
  .count-box span { font-size:4rem; }
  .featured-photo { border-radius:110px 110px 16px 16px; }
  .featured-photo img { height:520px; }
  .gallery-grid { grid-auto-rows:210px; gap:10px; }
  .gallery-wide { grid-column:span 2; }
  .closing-section { background-attachment:scroll; }
}
@media (max-width:420px) {
  .hero-content { padding-bottom:75px; }
  .btn-lg { font-size:.9rem; }
  .gallery-grid { grid-auto-rows:180px; }
  .gallery-tall { grid-row:span 2; }
}
@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
  .reveal { opacity:1; transform:none; }
}

/* Sección de regalo independiente */
.gift-section {
  padding-top: 1rem;
}

.gift-card {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  text-align: left;
  border: 1px solid rgba(214, 171, 84, .55);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(20, 18, 14, .96), rgba(5, 5, 5, .96));
  box-shadow: 0 20px 55px rgba(0, 0, 0, .45), inset 0 0 30px rgba(214, 171, 84, .05);
}

.gift-icon-wrap {
  flex: 0 0 auto;
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214, 171, 84, .6);
  border-radius: 50%;
  color: var(--gold, #d6ab54);
  font-size: 3rem;
  box-shadow: 0 0 28px rgba(214, 171, 84, .16);
}

.gift-content {
  max-width: 570px;
}

.gift-content h2 {
  margin-bottom: 1rem;
}

.spotify-invitation {
  color: #f4e2b5;
  font-weight: 500;
  text-align: center;
  margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
  .gift-card {
    flex-direction: column;
    text-align: center;
  }

  .gift-icon-wrap {
    width: 88px;
    height: 88px;
    font-size: 2.4rem;
  }
}