@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* Jardim encantado: a estrutura e os campos do convite permanecem intactos. */
:root {
  --cream: #fbf8fd;
  --paper: #fffdfa;
  --ink: #493854;
  --muted: #706478;
  --pink: #b99bda;
  --pink-strong: #785696;
  --green: #91a68a;
  --line: #e7d9ed;
}

.topbar {
  background: #f6effa;
  color: var(--pink-strong);
}

.hero {
  background: #fffaf6 url('/jardim-encantado-desktop.webp') center center / cover no-repeat;
}
.sun, .flower { display: none; }
.hero h1 { line-height: 1.04; text-shadow: 0 1px 0 #fff9; }
.hero h1 em {
  font-family: 'Great Vibes', cursive;
  font-size: 1.05em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}
.hero h1 > span { margin-top: 10px; }
.hero h1 > .hero-name {
  margin-top: 15px;
  color: var(--pink-strong);
  font-family: 'Great Vibes', cursive;
  font-size: clamp(70px, 7.5vw, 108px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.08;
}
.hero { min-height: 830px; }
.hero-footnote { color: #8d7a99; }

.primary-link, .rsvp button {
  background: linear-gradient(135deg, #775395, #9a73b4);
  box-shadow: 0 10px 25px #77539530;
}
.primary-link:hover, .rsvp button:hover {
  background: linear-gradient(135deg, #684584, #8a63a7);
  box-shadow: 0 14px 28px #77539545;
}

.details {
  background: radial-gradient(circle at 50% 0%, #f6ecfb 0, #fffdfa 68%);
}
.detail-card {
  background: #fffdfdf0;
  box-shadow: 0 14px 38px #7452980d;
}
.rsvp-form { box-shadow: 0 18px 65px #74529813; }
.rsvp-form input:not([type=radio]), .rsvp-form textarea { border-color: #dccccf; }
.rsvp-form input:focus, .rsvp-form textarea:focus { box-shadow: 0 0 0 3px #a784c636; }
.choices span { border-color: #dccccf; }
.choices input:checked + span { background: #f4eafb; }
.optional, .privacy { color: #95869c; }
footer { background: #eee2f3; }

@media (max-width: 760px) {
  .hero {
    min-height: 770px;
    background-image: url('/jardim-encantado-mobile.webp');
    background-position: center;
  }
  .hero h1 > .hero-name { font-size: clamp(62px, 12vw, 82px); }
  .hero::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 85px;
    right: 18px;
    bottom: 40px;
    left: 18px;
    border: 1px solid #fff9;
    border-radius: 30px;
    background: #fffdf9c9;
    box-shadow: 0 12px 40px #73558d18;
    backdrop-filter: blur(2px);
  }
  .hero > *:not(.sun):not(.flower) { z-index: 1; }
}