:root{
  --cream:#f7f3ec;
  --ivory:#fffdf9;
  --ink:#2c2a26;
  --sage:#7c9070;
  --sage-dark:#4f6146;
  --wine:#7c2540;
  --navy:#26374d;
  --gold:#a9823c;
  --line: rgba(44,42,38,.14);
  --font-display: 'Playfair Display', serif;
  --font-serif: 'Cormorant Garamond', serif;
  --font-script: 'Great Vibes', cursive;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:1.15rem;
  line-height:1.6;
}

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

/* ---------- Top nav ---------- */
.topnav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 2rem;
  background:rgba(247,243,236,.85);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.3rem;
  color:var(--gold);
  text-decoration:none;
}
.topnav-links{display:flex;gap:1.6rem;}
.topnav-links a{
  color:var(--ink);
  text-decoration:none;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.topnav-links a:hover{color:var(--gold);}

@media(max-width:640px){
  .topnav-links{gap:1rem;}
  .topnav-links a{font-size:.7rem;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse at 50% 0%, #fffaf0 0%, var(--cream) 60%);
}
.hero-content{
  position:relative;
  z-index:1;
  text-align:center;
  color:var(--ink);
  padding:6.5rem 1.5rem 4rem;
  max-width:640px;
}
.hero-photo-frame{
  width:min(380px, 72vw);
  aspect-ratio:4/5;
  margin:0 auto 1.8rem;
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 20px 45px rgba(44,42,38,.22);
}
.hero-photo-frame img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 25%;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.8rem;
  color:var(--gold);
  margin:0 0 .8rem;
}
.eyebrow-light{color:#f4e9d2;}
.hero-names{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:3rem;
  margin:0 0 .8rem;
  line-height:1.15;
  color:var(--ink);
}
.hero-names .amp{
  font-family:var(--font-script);
  font-style:normal;
  color:var(--gold);
  font-size:1.2em;
  padding:0 .1em;
}
.hero-date{
  letter-spacing:.08em;
  font-size:1rem;
  margin:0 0 1.8rem;
  color:var(--sage-dark);
}
.music-btn{
  background:none;
  border:1px solid var(--gold);
  color:var(--ink);
  border-radius:2px;
  padding:.6rem 1.4rem;
  font-family:var(--font-serif);
  font-size:.95rem;
  letter-spacing:.04em;
  cursor:pointer;
}
.music-btn:hover{background:rgba(169,130,60,.12);}

.scroll-cue{
  position:absolute;
  bottom:1.6rem;left:50%;
  transform:translateX(-50%);
  color:var(--gold);
  font-size:1.3rem;
  text-decoration:none;
  animation:bob 2.2s ease-in-out infinite;
  z-index:1;
}
@keyframes bob{
  0%,100%{transform:translate(-50%,0);}
  50%{transform:translate(-50%,8px);}
}

/* ---------- Fade-in on scroll ---------- */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* ---------- Panels (shared) ---------- */
.panel{
  padding:5.5rem 1.5rem;
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.section-title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:2.6rem;
  color:var(--ink);
  margin:0 0 2.5rem;
  position:relative;
}
.section-title::after{
  content:"";
  display:block;
  width:56px;height:1px;
  background:var(--gold);
  margin:.9rem auto 0;
}
.section-title-light{color:#fff;}
.section-title-light::after{background:#f4e9d2;}

/* ---------- Invitación ---------- */
.seal{
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #c9a24a, #8b6f3e 70%);
  color:#fff8e6;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-script);
  font-size:1.3rem;
  margin:0 auto 1.6rem;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.quote{
  font-style:italic;
  color:var(--navy);
  margin:0 auto 2.6rem;
  max-width:480px;
  font-size:1.1rem;
}
.quote cite{display:block;margin-top:.5rem;font-style:normal;font-size:.9rem;color:var(--gold);}

.invite-names{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:2rem;
  color:var(--gold);
  margin:.3rem 0 2.5rem;
}

.date-card{
  border:1px solid var(--gold);
  border-radius:2px;
  padding:1.8rem 2rem;
  max-width:340px;
  margin:0 auto 3rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
}
.date-card-main{
  display:flex;
  align-items:baseline;
  gap:.7rem;
}
.date-day{font-family:var(--font-display);font-size:3rem;color:var(--ink);line-height:1;}
.date-card-main div{display:flex;flex-direction:column;align-items:flex-start;}
.date-month{font-size:1.1rem;letter-spacing:.06em;}
.date-year{font-size:.85rem;color:var(--gold);letter-spacing:.08em;}
.date-sep{width:36px;height:1px;background:var(--line);margin:.3rem 0;}
.date-time{font-size:1rem;}
.date-place{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}

.countdown{margin-bottom:2.8rem;}
.countdown-label{
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.8rem;
  color:var(--gold);
  margin-bottom:1rem;
}
.countdown-grid{
  display:flex;
  justify-content:center;
  gap:0;
}
.countdown-grid div{
  padding:0 1.3rem;
  border-right:1px solid var(--line);
}
.countdown-grid div:last-child{border-right:none;}
.countdown-grid span{
  display:block;
  font-family:var(--font-display);
  font-size:1.9rem;
  color:var(--ink);
}
.countdown-grid small{
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
}

.section-nav{display:flex;justify-content:center;gap:2.2rem;flex-wrap:wrap;}
.link-underline{
  position:relative;
  color:var(--ink);
  text-decoration:none;
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding-bottom:.3rem;
}
.link-underline::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.link-underline:hover::after{transform:scaleX(1);}

/* ---------- Detalles ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.2rem;
  text-align:left;
  margin-bottom:2.5rem;
}
.card{
  background:var(--ivory);
  border:1px solid var(--line);
  border-left:2px solid var(--sage);
  padding:1.4rem 1.6rem;
}
.card h3{
  margin:0 0 .5rem;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  color:var(--sage-dark);
  font-size:1.2rem;
}
.card p{margin:0;font-size:1.02rem;}
.card-pet{
  display:flex;
  align-items:center;
  gap:1rem;
  border-left-color:var(--gold);
}
.card-pet img{width:64px;height:64px;object-fit:contain;flex:none;}
.card-pet p{font-style:italic;color:var(--gold);}

@media(max-width:640px){
  .card-grid{grid-template-columns:1fr;}
}

.back-link{
  display:inline-block;
  margin-top:.5rem;
  color:var(--sage-dark);
  text-decoration:none;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.back-link-light{color:#f4e9d2;}

/* ---------- Itinerario (photo panel) ---------- */
.panel-photo{
  max-width:none;
  padding:0;
  position:relative;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
.panel-photo-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(20,24,32,.82), rgba(20,24,32,.9));
}
.panel-photo-content{
  position:relative;
  z-index:1;
  max-width:680px;
  margin:0 auto;
  padding:5.5rem 1.5rem;
  color:#fff;
  text-align:center;
}

.timeline{list-style:none;padding:0;margin:0 0 2rem;text-align:left;}
.timeline li{
  border-left:1px solid rgba(244,233,210,.4);
  padding:0 0 2.2rem 1.4rem;
  margin-left:.3rem;
  position:relative;
}
.timeline li::before{
  content:"";
  position:absolute;left:-6px;top:2px;
  width:11px;height:11px;border-radius:50%;
  background:var(--gold);
}
.timeline h3{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  margin:.2rem 0 .4rem;
}
.tl-time{font-size:.85rem;letter-spacing:.1em;color:var(--gold);}
.tl-links{margin-top:.5rem;}
.tl-links a{color:#f4e9d2;margin-right:1.2rem;font-size:.85rem;}
.tl-note{font-size:.85rem;opacity:.75;margin-top:1rem;}

/* ---------- Love Story ---------- */
.story-row{
  display:flex;
  align-items:center;
  gap:2.5rem;
  text-align:left;
  margin-bottom:3rem;
}
.story-row.reverse{flex-direction:row-reverse;}
.story-row img{
  width:46%;
  height:340px;
  object-fit:cover;
  flex:none;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.story-text h3{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  color:var(--wine);
  margin:0 0 .6rem;
  font-size:1.4rem;
}
.story-text p{margin:0;}

@media(max-width:700px){
  .story-row,.story-row.reverse{flex-direction:column;gap:1.2rem;}
  .story-row img{width:100%;height:240px;}
}

/* ---------- RSVP ---------- */
.rsvp-deadline{font-weight:600;margin-bottom:2.5rem;}
.rsvp-form{
  background:var(--ivory);
  border:1px solid var(--line);
  padding:2.2rem;
  text-align:left;
  max-width:520px;
  margin:0 auto;
}
.rsvp-form h2{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:2rem;
  color:var(--gold);
  margin-top:0;
}
.rsvp-form label{display:block;font-weight:600;margin:1rem 0 .3rem;font-size:.95rem;}
.rsvp-form input[type=text],
.rsvp-form input[type=number],
.rsvp-form textarea{
  width:100%;
  padding:.6rem .7rem;
  border:1px solid var(--line);
  background:#fff;
  border-radius:2px;
  font-family:var(--font-serif);
  font-size:1rem;
}
.rsvp-form input:focus,.rsvp-form textarea:focus{outline:1px solid var(--gold);}
.rsvp-form fieldset{border:none;padding:0;margin:1rem 0;}
.rsvp-form legend{font-weight:600;padding:0;margin-bottom:.5rem;font-size:.95rem;}
.radio-option{
  display:block;
  font-weight:400;
  background:var(--cream);
  border:1px solid var(--line);
  padding:.6rem .8rem;
  margin-bottom:.5rem;
}
.rsvp-form button{
  margin-top:1.5rem;
  background:var(--sage-dark);
  color:#fff;
  border:none;
  border-radius:2px;
  padding:.8rem 1.8rem;
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.rsvp-form button:hover{background:var(--navy);}
.rsvp-thanks{margin-top:1rem;font-style:italic;color:var(--sage-dark);}

/* ---------- Footer ---------- */
.footer{
  text-align:center;
  padding:3rem 1rem 3.5rem;
  border-top:1px solid var(--line);
  color:var(--sage-dark);
}
.footer-pet{width:56px;height:56px;object-fit:contain;margin:0 auto .8rem;}
.footer-names{
  font-family:var(--font-script);
  font-size:1.6rem;
  color:var(--gold);
  margin:0 0 .2rem;
}

@media(max-width:480px){
  .hero-names{font-size:2.4rem;}
  .panel{padding:4rem 1.2rem;}
  .countdown-grid div{padding:0 .8rem;}
}