@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:wght@400;600&display=swap');

:root{
  --gold:#d4af37;
  --gold-dark:#b99328;
  --ink:#2b2b2b;
  --soft:#faf7f6;
  --rose:#ff6b81;
  --wa:#25d366;
}

*{box-sizing: border-box}

body{
  margin:0;
  min-height: 100dvh;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#fffafc,#f5f1ee);
  color:var(--ink);
  font-family:'Playfair Display',serif;
}

.card{
  width:min(720px,92%);
  background:#fff;
  border-radius:28px;
  padding:36px 28px;
  border:3px solid rgba(212,175,55,.18);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
  text-align:center;
  animation:fadeIn .8s ease;
}

.title{
  font-family:'Great Vibes',cursive;
  font-size:42px;
  color:var(--gold-dark);
  margin:0 0 6px;
}

.subtitle{
  margin:0 0 18px;
  color:#555;
  line-height:1.6;
}

.details{
  list-style:none;
  padding:0;
  margin:8px 0 22px;
}
.details li{margin:6px 0;font-size:18px}

.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:18px;
}

.btn{
  display:inline-block;
  padding:14px 18px;
  border-radius:14px;
  text-decoration:none;
  font-weight:600;
  transition:.2s transform,.2s box-shadow,.2s filter;
  border:0;
  cursor:pointer;
}

.btn:hover{transform:translateY(-1px);filter:saturate(1.05);box-shadow:0 8px 18px rgba(0,0,0,.12)}

.btn-whatsapp{background:var(--wa);color:#fff}
.btn-bride{background:linear-gradient(135deg,#ff9eb5,#ff6b81);color:#fff}
.btn-gold{background:var(--gold);color:#1a1a1a}

.divider{
  border:none;height:1px;width:100%;margin:22px 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)
}

.rsvp{display:grid;gap:12px;justify-items:center}

.label{font-weight:600}
.input{
  width:min(480px,100%);
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #ddd;
  font-size:16px;
  outline:none;
}
.input:focus{border-color:var(--gold)}

.destinos{
  border:1px solid #eee;
  border-radius:12px;
  padding:10px 14px;
  width:min(480px,100%);
}
.destinos legend{padding:0 6px;color:#666;font-size:14px}
.radio{margin-right:16px;display:inline-flex;gap:8px;align-items:center}

.footnote{margin-top:18px;color:#777;font-size:14px}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
