:root {
  color-scheme: dark;
  --navy: #071a3b;
  --navy-deep: #041128;
  --gold: #f7bd32;
  --gold-light: #ffe39a;
  --cream: #fff8ed;
  --muted: #d6dced;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--navy-deep); }
body {
  margin: 0; min-height: 100vh; color: var(--cream);
  font-family: "DM Sans", sans-serif;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(22,72,132,.6), transparent 48%),
    radial-gradient(circle at 12% 12%, rgba(247,189,50,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 22%, rgba(247,189,50,.18) 0 1px, transparent 2px),
    linear-gradient(145deg, #06132c, #092653 52%, #041128);
  background-size: auto, 37px 41px, 53px 47px, auto;
}
.invitation {
  position: relative; isolation: isolate; overflow: hidden;
  width: min(100%, 620px); min-height: 100vh; margin: 0 auto;
  padding: clamp(100px, 20vw, 140px) clamp(22px, 7vw, 54px) 42px;
  background: #041128 url("assets/Noite estrelada sobre vila iluminada.png") center top / 100% auto no-repeat;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.invitation::before, .invitation::after { display: none;
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 310px; height: 310px; border-radius: 50%;
  background: repeating-radial-gradient(ellipse at center, transparent 0 12px, rgba(247,189,50,.18) 13px 15px, transparent 16px 23px);
  filter: drop-shadow(0 0 18px rgba(247,189,50,.14));
}
.invitation::before { top: -190px; left: -160px; }
.invitation::after { right: -190px; bottom: -160px; }
.stars { display: none; }
.star { position: absolute; color: var(--gold-light); text-shadow: 0 0 12px var(--gold); font-size: 25px; }
.star:nth-child(1) { top: 6%; left: 13%; }.star:nth-child(2) { top: 15%; right: 12%; }
.star:nth-child(3) { top: 48%; left: 7%; }.star:nth-child(4) { bottom: 15%; right: 17%; }
.eyebrow { color: var(--gold-light); letter-spacing: .28em; text-transform: uppercase; font-size: 10px; margin: 0 0 18px; }
.party-logo { display: block; width: min(62%, 260px); height: auto; margin: 0 auto 10px; object-fit: contain; }
.name {
  margin: 0; color: var(--gold-light); font: clamp(62px, 14vw, 88px)/1 "Great Vibes", cursive;
  text-shadow: 0 2px 0 #a96c12, 0 0 20px rgba(247,189,50,.18);
}
.age { margin: 2px 0 24px; color: var(--gold-light); font: clamp(32px, 7.5vw, 46px)/1.1 "Great Vibes", cursive; }
.intro { margin: 0 0 10px; font: 500 17px/1.6 "Playfair Display", serif; }
.message { max-width: 460px; margin: 0 auto; color: var(--muted); font: 16px/1.7 "Playfair Display", serif; }
.date-line {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin: 22px 0 22px; color: var(--cream); font: 24px "Playfair Display", serif;
}
.date-line .day { color: var(--gold-light); font-size: 34px; }
.date-line .month { font-style: italic; }
.date-line .separator { height: 34px; width: 1px; background: var(--gold); }
.date-line .time { font-size: 19px; }
.actions { position: relative; display: block; width: 78%; line-height: 0; margin: 2px auto 0; }
.actions-art { display: block; width: 100%; height: auto; }
.action-hotspot { position: absolute; top: 0; bottom: 0; width: 33.3333%; display: block; border: 0; background: transparent; cursor: pointer; border-radius: 12px; }
.action-hotspot:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -5px; }
.action-location { left: 0; }
.action-whatsapp { left: 33.3333%; }
.action-gifts { left: 66.6666%; }
.action {
  color: var(--cream); text-decoration: none; display: flex; flex-direction: column;
  align-items: center; gap: 12px; min-width: 0; background: transparent; border: 0; cursor: pointer;
  font: 14px/1.35 "Playfair Display", serif;
}
.action:focus-visible, .modal-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.action-icon {
  width: 82px; height: 82px; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--gold); color: var(--gold); font-size: 34px;
  box-shadow: 0 0 0 4px rgba(247,189,50,.07), 0 0 24px rgba(247,189,50,.2), inset 0 0 20px rgba(247,189,50,.08);
  transition: transform .2s ease, background .2s ease;
}
.action:hover .action-icon { transform: translateY(-4px); background: rgba(247,189,50,.1); }
.action[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.footnote { margin: 38px 0 0; color: #9eabc4; font-size: 11px; letter-spacing: .08em; }
.loading, .error { margin: auto; color: var(--cream); }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 5; display: grid; place-items: center;
  padding: 20px; background: rgba(1,8,22,.78); backdrop-filter: blur(8px);
}
.modal {
  width: min(100%, 430px); max-height: 80vh; overflow: auto; padding: 28px;
  border: 1px solid rgba(247,189,50,.55); border-radius: 20px;
  background: linear-gradient(145deg, #102b52, #06152e); box-shadow: 0 20px 70px #0008;
}
.modal h2 { margin: 0 0 10px; color: var(--gold-light); font: 30px "Great Vibes", cursive; text-align: center; }
.modal p { color: var(--muted); line-height: 1.6; }
.gift-list { display: flex; flex-direction: column; align-items: center; list-style-position: inside; padding: 0; margin: 18px 0 0; line-height: 2; color: var(--cream); text-align: center; }
.gift-list li { text-align: center; }
.gift-pix { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 18px; color: var(--cream); text-align: center; line-height: 1.6; }
.gift-pix strong { font-weight: 700; }
.modal-close {
  float: right; border: 1px solid rgba(247,189,50,.5); border-radius: 50%;
  width: 34px; height: 34px; color: var(--gold-light); background: transparent; cursor: pointer;
}
@media (max-width: 380px) {
  
  .date-line { gap: 11px; }.date-line .time { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

.location-modal h3 { margin: 8px 0 12px; color: var(--cream); font: 600 17px/1.4 "Playfair Display", serif; text-align: center; }
.location-address { margin: 0 auto 20px; text-align: center; }
.parking-info { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 18px 0 22px; padding: 16px; border: 1px solid rgba(247,189,50,.35); border-radius: 14px; background: rgba(247,189,50,.06); color: var(--cream); text-align: center; line-height: 1.5; }
.parking-info strong { color: var(--gold-light); }
.parking-price { color: var(--gold-light); font-weight: 700; }
.maps-button { display: block; width: fit-content; max-width: 100%; margin: 0 auto; padding: 12px 18px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-light); text-decoration: none; text-align: center; font-weight: 600; }
.maps-button:hover { background: rgba(247,189,50,.1); }