/* Estilos principales */
:root{
  --ivory:#f7f2e8;--ivory-soft:#fbf8f2;--gold:#b99857;--gold-light:#d8c08d;
  --gold-dark:#8f713d;--text:#7b6744;--white:#fff;
  --shadow:0 20px 60px rgba(119,94,51,.10);
  --serif:"Cormorant Garamond",Georgia,serif;--script:"Allura",cursive;
  --sans:"Montserrat",Arial,sans-serif
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--ivory);color:var(--text);font-family:var(--sans);overflow-x:hidden}
button{font:inherit}
.hero,.countdown-section{position:relative;min-height:100svh;display:grid;place-items:center;padding:40px 20px;overflow:hidden}
.hero{background:radial-gradient(circle at 15% 20%,rgba(216,192,141,.18),transparent 28%),radial-gradient(circle at 85% 80%,rgba(185,152,87,.12),transparent 34%),linear-gradient(180deg,var(--ivory-soft),var(--ivory))}
.hero::before,.hero::after,.countdown-section::before,.countdown-section::after,.story::before,.story::after,.program::before,.program::after,.locations::before,.locations::after{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(185,152,87,.16);border-radius:50%}
.hero::before{top:-170px;left:-130px}.hero::after{right:-150px;bottom:-180px}
.hero__content{position:relative;z-index:2;width:min(100%,760px);text-align:center;animation:fade-up 1.15s ease both}
.hero__eyebrow{margin:0 0 20px;color:var(--gold-dark);font-size:clamp(.95rem,2.2vw,1.18rem);font-weight:500;letter-spacing:.34em;text-transform:uppercase}
.hero__names{display:flex;flex-direction:column;align-items:center;margin:0;color:var(--gold);font-family:var(--script);font-size:clamp(4.8rem,13vw,9rem);font-weight:400;line-height:.76}
.hero__ampersand{margin:.05em 0;color:var(--gold-dark);font-family:var(--serif);font-size:.55em;font-style:italic;line-height:1}
.hero__divider,.section-divider{width:88px;height:1px;margin:34px auto 24px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.hero__date{display:flex;justify-content:center;flex-wrap:wrap;gap:.55em;margin:0;color:var(--gold-dark);font-family:var(--serif);font-size:clamp(1.25rem,4vw,1.75rem);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.hero__time{margin:8px 0 30px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.primary-button{min-width:210px;padding:15px 28px;border:1px solid var(--gold);border-radius:999px;background:transparent;color:var(--gold-dark);cursor:pointer;font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;transition:.22s}
.primary-button:hover,.primary-button:focus-visible{background:var(--gold);color:var(--white);box-shadow:0 10px 26px rgba(143,113,61,.2);outline:none;transform:translateY(-2px)}

.countdown-section{background:linear-gradient(rgba(255,255,255,.52),rgba(255,255,255,.52)),repeating-linear-gradient(45deg,rgba(185,152,87,.025) 0,rgba(185,152,87,.025) 1px,transparent 1px,transparent 8px),var(--ivory-soft)}
.countdown-section::before{top:-185px;right:-120px}.countdown-section::after{bottom:-190px;left:-120px}
.countdown-section__inner{position:relative;z-index:2;width:min(100%,980px);text-align:center}
.countdown-section h2{margin:0 0 22px;color:var(--gold-dark);font-family:var(--serif);font-size:clamp(1.05rem,2.4vw,1.45rem);font-weight:500;letter-spacing:.3em;text-transform:uppercase}
.countdown-section__script{margin:0 0 32px;color:var(--gold);font-family:var(--script);font-size:clamp(3.5rem,9vw,6.5rem);line-height:1}
.countdown{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:18px}
.countdown__item{position:relative;padding:30px 14px 26px;border:1px solid rgba(185,152,87,.28);background:rgba(255,255,255,.42);box-shadow:var(--shadow)}
.countdown__item::before{content:"";position:absolute;inset:8px;border:1px solid rgba(185,152,87,.12)}
.countdown__item strong{display:block;color:var(--gold);font-family:var(--serif);font-size:clamp(3.4rem,8vw,6rem);font-weight:400;line-height:.9;font-variant-numeric:tabular-nums}
.countdown__item span{display:block;margin-top:18px;color:var(--gold-dark);font-size:.7rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
.countdown-section__closing{margin:38px 0 0;font-family:var(--serif);font-size:clamp(1.05rem,2.3vw,1.35rem);font-style:italic}

.story,.program,.locations{position:relative;padding:110px 20px 130px;overflow:hidden}
.story{background:radial-gradient(circle at 12% 16%,rgba(216,192,141,.10),transparent 22%),radial-gradient(circle at 88% 84%,rgba(185,152,87,.08),transparent 24%),var(--ivory)}
.story::before{top:-200px;left:-120px}.story::after{right:-160px;bottom:-190px}
.story__intro,.program__intro,.locations__intro{position:relative;z-index:2;width:min(100%,800px);margin:0 auto 90px;text-align:center}
.section-kicker,.timeline__eyebrow,.location-card__eyebrow{margin:0 0 14px;color:var(--gold-dark);font-size:.75rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase}
.story__intro h2,.program__intro h2,.locations__intro h2{margin:0;color:var(--gold);font-family:var(--script);font-size:clamp(3.8rem,9vw,6.5rem);font-weight:400;line-height:1}
.story__lead,.program__intro p:last-child,.locations__intro p:last-child{margin:0 auto;max-width:720px;font-family:var(--serif);font-size:clamp(1.15rem,2.5vw,1.38rem);line-height:1.8}
.timeline{position:relative;z-index:2;width:min(100%,820px);margin:0 auto;display:grid;gap:42px}
.timeline::before{content:"";position:absolute;top:18px;bottom:18px;left:54px;width:1px;background:linear-gradient(to bottom,transparent,rgba(185,152,87,.5) 8%,rgba(185,152,87,.5) 92%,transparent)}
.timeline__item{position:relative;display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;min-height:260px;padding:38px 42px 38px 0;border:1px solid rgba(185,152,87,.22);border-radius:28px;background:rgba(255,255,255,.36);box-shadow:var(--shadow)}
.timeline__number{position:relative;z-index:2;display:grid;place-items:center;width:62px;height:62px;margin:0 auto;border:1px solid rgba(185,152,87,.55);border-radius:50%;background:var(--ivory-soft);color:var(--gold);font-family:var(--serif);font-size:1.25rem}
.timeline__content{padding-left:18px}.timeline__icon{display:inline-grid;place-items:center;width:42px;height:42px;margin-bottom:18px;border:1px solid rgba(185,152,87,.4);border-radius:50%;color:var(--gold);font-family:var(--serif);font-size:1.2rem}
.timeline__content h3{margin:0 0 14px;color:var(--gold);font-family:var(--script);font-size:clamp(2.8rem,6vw,4.7rem);font-weight:400;line-height:1}
.timeline__content p:last-child{margin:0;font-family:var(--serif);font-size:1.18rem;line-height:1.72}

.program{background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),var(--ivory-soft)}
.program::before{top:-180px;right:-120px}.program::after{left:-150px;bottom:-200px}
.program__timeline{position:relative;z-index:2;width:min(100%,860px);margin:0 auto}
.program__timeline::before{content:"";position:absolute;top:20px;bottom:20px;left:178px;width:1px;background:linear-gradient(to bottom,transparent,rgba(185,152,87,.55) 8%,rgba(185,152,87,.55) 92%,transparent)}
.program__item{position:relative;display:grid;grid-template-columns:130px 96px minmax(0,1fr);align-items:center;min-height:180px}
.program__item time{justify-self:end;color:var(--gold-dark);font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.4rem);font-weight:500}
.program__dot{position:relative;z-index:2;justify-self:center;width:16px;height:16px;border:4px solid var(--ivory-soft);border-radius:50%;background:var(--gold);box-shadow:0 0 0 1px rgba(185,152,87,.6)}
.program__content{padding:28px 30px;border:1px solid rgba(185,152,87,.22);border-radius:24px;background:rgba(255,255,255,.48);box-shadow:var(--shadow)}
.program__icon{display:inline-block;margin-bottom:10px;color:var(--gold);font-size:1.2rem}
.program__content h3{margin:0 0 8px;color:var(--gold);font-family:var(--script);font-size:clamp(2.3rem,5vw,3.8rem);font-weight:400;line-height:1}
.program__content p{margin:0;font-family:var(--serif);font-size:1.1rem;line-height:1.6}

.locations{background:radial-gradient(circle at 14% 18%,rgba(216,192,141,.10),transparent 24%),radial-gradient(circle at 86% 82%,rgba(185,152,87,.08),transparent 24%),var(--ivory)}
.locations::before{top:-180px;left:-120px}.locations::after{right:-150px;bottom:-190px}
.locations__grid{position:relative;z-index:2;width:min(100%,1040px);margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.location-card{position:relative;padding:46px 38px 40px;border:1px solid rgba(185,152,87,.24);border-radius:30px;background:rgba(255,255,255,.42);box-shadow:var(--shadow);text-align:center}
.location-card::before{content:"";position:absolute;inset:10px;border:1px solid rgba(185,152,87,.12);border-radius:22px;pointer-events:none}
.location-card__symbol{display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:22px;border:1px solid rgba(185,152,87,.45);border-radius:50%;color:var(--gold);font-family:var(--serif);font-size:1.4rem}
.location-card h3{margin:0 auto 14px;max-width:360px;color:var(--gold);font-family:var(--script);font-size:clamp(2.8rem,5vw,4.6rem);font-weight:400;line-height:1}
.location-card__time{margin:0 0 16px;color:var(--gold-dark);font-family:var(--serif);font-size:1.6rem;font-weight:500}
.location-card address{margin:0 auto 30px;max-width:360px;font-family:var(--serif);font-size:1.12rem;font-style:normal;line-height:1.65}
.location-card__link{display:inline-flex;align-items:center;gap:12px;padding:13px 22px;border-bottom:1px solid var(--gold);color:var(--gold-dark);font-size:.76rem;font-weight:500;letter-spacing:.18em;text-decoration:none;text-transform:uppercase;transition:.22s}
.location-card__link:hover,.location-card__link:focus-visible{color:var(--gold);transform:translateY(-2px);outline:none}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:800px){
  .countdown{grid-template-columns:repeat(2,minmax(120px,1fr));gap:14px}
  .timeline::before{left:34px}.timeline__item{grid-template-columns:68px minmax(0,1fr);padding:30px 22px 30px 0;min-height:0}
  .timeline__number{width:48px;height:48px;font-size:1rem}.timeline__content{padding-left:12px}
  .program__timeline::before{left:36px}
  .program__item{grid-template-columns:72px minmax(0,1fr);gap:0;padding:16px 0}
  .program__item time{grid-column:2;justify-self:start;margin-bottom:10px;font-size:1.65rem}
  .program__dot{position:absolute;left:28px;top:26px}
  .program__content{grid-column:2;padding:24px}
  .locations__grid{grid-template-columns:1fr}
}
@media(max-width:390px){
  .hero__names{font-size:4.3rem}.hero__date{font-size:1rem}.countdown{gap:10px}.countdown__item strong{font-size:3rem}
  .story,.program,.locations{padding-left:14px;padding-right:14px}.timeline__item{padding-right:16px}
  .location-card{padding:38px 24px 34px}
}


/* Confirmación de asistencia */
.rsvp {
  position: relative;
  padding: 110px 20px 130px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.52), rgba(255,255,255,.52)),
    var(--ivory-soft);
}

.rsvp::before,
.rsvp::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(185,152,87,.16);
  border-radius: 50%;
}

.rsvp::before { top: -180px; right: -120px; }
.rsvp::after { left: -150px; bottom: -190px; }

.rsvp__intro {
  position: relative;
  z-index: 2;
  width: min(100%, 820px);
  margin: 0 auto 70px;
  text-align: center;
}

.rsvp__intro h2 {
  margin: 0;
  color: var(--gold);
  font-family: var(--script);
  font-size: clamp(3.7rem, 8vw, 6.2rem);
  font-weight: 400;
  line-height: 1;
}

.rsvp__intro p:last-child {
  margin: 0 auto;
  max-width: 680px;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.3vw, 1.34rem);
  line-height: 1.75;
}

.rsvp-form {
  position: relative;
  z-index: 2;
  width: min(100%, 900px);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 30px;
  border: 1px solid rgba(185,152,87,.25);
  border-radius: 30px;
  background: rgba(255,255,255,.48);
  box-shadow: var(--shadow);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label,
.form-field legend {
  color: var(--gold-dark);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 500;
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(185,152,87,.45);
  background: transparent;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.1rem;
  outline: none;
  padding: 12px 2px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.form-field input[type="text"]:focus,
.form-field input[type="tel"]:focus,
.form-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 1px 0 var(--gold);
}

.attendance-field {
  border: 0;
  padding: 0;
  margin: 0;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.08rem;
}

.radio-option input {
  appearance: none;
  width: 19px;
  height: 19px;
  margin: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.radio-option input::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  transform: scale(0);
  transition: transform .16s ease;
}

.radio-option input:checked::before {
  transform: scale(1);
}

.field-error {
  min-height: 1em;
  color: #9a5d52;
  font-size: .72rem;
}

.form-actions {
  text-align: center;
  margin-top: 8px;
}

.rsvp-submit {
  min-width: 260px;
}

.rsvp-submit[disabled] {
  opacity: .6;
  cursor: wait;
}

.form-status {
  min-height: 1.5em;
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: 1.08rem;
}

.form-status.is-success { color: #6f8669; }
.form-status.is-error { color: #9a5d52; }

@media (max-width: 700px) {
  .rsvp-form {
    grid-template-columns: 1fr;
  }

  .form-field--full {
    grid-column: auto;
  }

  .rsvp {
    padding-left: 14px;
    padding-right: 14px;
  }
}