:root {
  --sky: #74c9f2;
  --blue: #1388c9;
  --deep: #075381;
  --ink: #173548;
  --paper: #fffdf6;
  --yellow: #ffdb63;
  --mint: #a8e7dd;
  --display: "Baloo 2", sans-serif;
  --body: "Nunito", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); }
body.welcome-open { overflow: hidden; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }
.welcome { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow: hidden; padding: 24px; background: var(--sky); transition: opacity .65s ease, visibility .65s ease; }
.welcome.is-leaving { opacity: 0; visibility: hidden; }
.welcome__art { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,78,125,.82), rgba(7,97,151,.28)), url("assets/angel-fiesta.png") center/cover; }
.welcome__confetti { position: absolute; inset: 0; opacity: .7; background-image: radial-gradient(circle, #fff 1.8px, transparent 2px), radial-gradient(circle, #ffdc66 2px, transparent 2.5px), radial-gradient(circle, #69dbc7 2px, transparent 2.5px); background-position: 0 0, 31px 54px, 78px 19px; background-size: 109px 117px, 137px 151px, 173px 139px; mask-image: linear-gradient(#000, transparent 92%); }
.welcome__content { position: relative; z-index: 1; width: min(100%, 520px); padding: 42px 34px; color: white; text-align: center; border: 1px solid rgba(255,255,255,.52); border-radius: 26px; background: rgba(6,79,126,.76); box-shadow: 0 20px 65px rgba(0,48,82,.25); backdrop-filter: blur(9px); }
.welcome h1, .hero h1 { margin: 10px 0 4px; font: 800 clamp(3.8rem, 12vw, 6.3rem)/.83 var(--display); }
.welcome h1 span, .hero h1 span { color: var(--yellow); }
.welcome__content p { margin: 21px auto 23px; max-width: 350px; font-size: 1.12rem; line-height: 1.55; }
.welcome small { display: block; margin-top: 19px; color: #e1f7ff; font-weight: 800; }
.eyebrow { margin: 0; color: #ffe16f; font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 23px; border: 0; border-radius: 999px; font-weight: 900; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,42,76,.18); }
.button span { font-size: 1.2em; }
.button--blue { color: white; background: var(--blue); box-shadow: 0 4px 0 #08659b; }
.button--white { color: var(--deep); background: white; }
.music-control { position: fixed; right: 18px; bottom: 18px; z-index: 10; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 15px; color: white; border: 1px solid rgba(255,255,255,.65); border-radius: 999px; background: var(--deep); box-shadow: 0 5px 18px rgba(0,40,68,.22); font-weight: 900; cursor: pointer; }
.music-control[hidden] { display: none; }
.music-control > span:first-child { color: var(--yellow); font-size: 1.2rem; }
.music-control.is-playing > span:first-child { animation: music-pulse 1.1s ease-in-out infinite; }
.balloon { position: absolute; width: 76px; height: 94px; border-radius: 50% 50% 46% 46%; background: #fff; box-shadow: inset -9px -8px 18px rgba(29,119,169,.16), 0 12px 20px rgba(0,52,89,.12); animation: bob 4.2s ease-in-out infinite; }
.balloon::after { position: absolute; bottom: -7px; left: calc(50% - 5px); width: 10px; height: 12px; content: ""; background: inherit; clip-path: polygon(0 0,100% 0,50% 100%); }
.balloon::before { position: absolute; top: 100%; left: 50%; width: 1px; height: 125px; content: ""; background: rgba(255,255,255,.7); }
.balloon--one { top: 11%; left: 9%; background: #72d2fa; }
.balloon--two { right: 11%; top: 17%; width: 60px; height: 76px; animation-delay: -1.3s; }
.balloon--three { left: 15%; bottom: 11%; width: 55px; height: 70px; background: #ffda62; animation-delay: -2.4s; }
.hero { position: relative; display: flex; min-height: min(820px, 100svh); align-items: end; overflow: hidden; padding: 70px clamp(24px, 8vw, 110px); background: var(--sky); }
.hero__art, .hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__art { object-fit: cover; object-position: center 55%; }
.hero__veil { background: linear-gradient(90deg, rgba(5,67,109,.83), rgba(8,93,139,.32) 62%, rgba(10,100,140,.04)), linear-gradient(0deg, rgba(3,61,99,.43), transparent 55%); }
.hero__content { position: relative; z-index: 1; max-width: 610px; color: white; padding-bottom: 14px; }
.hero h1 { font-size: clamp(4.6rem, 12vw, 8.4rem); }
.hero__content > p:not(.eyebrow) { max-width: 460px; margin: 20px 0 25px; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 700; line-height: 1.55; }
.hero__badge { position: absolute; right: clamp(24px, 8vw, 110px); bottom: 60px; z-index: 2; display: grid; width: 112px; height: 112px; place-content: center; color: var(--deep); text-align: center; border-radius: 50%; background: var(--yellow); box-shadow: 0 8px 0 rgba(7,83,129,.25); transform: rotate(8deg); }
.hero__badge span { font-size: .72rem; font-weight: 900; letter-spacing: .16em; }
.hero__badge strong { font: 800 3.2rem/.9 var(--display); }
.section { position: relative; padding: 100px clamp(22px, 8vw, 112px); }
.party { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 45px; overflow: hidden; background: var(--paper); }
.party__copy h2, .section-title h2, .details__card h2, .rsvp h2 { margin: 10px 0 18px; font: 800 clamp(2.9rem, 7vw, 5.2rem)/.92 var(--display); }
.party__copy > p:not(.eyebrow) { max-width: 570px; color: #526d7e; font-size: 1.12rem; line-height: 1.8; }
.party__facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 32px; }
.party__facts div { padding: 16px 13px; border-top: 3px solid var(--sky); background: #eaf8ff; }
.party__facts span, .details__rows span { display: block; margin-bottom: 5px; color: #52809a; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.party__facts strong { font-size: 1.03rem; }
.party__art { position: relative; width: min(100%, 390px); aspect-ratio: 2 / 3; margin-inline: auto; }
.party__photo { position: absolute; inset: 0; border-radius: 16px; background: #bcecff url("assets/angel-en-la-cancha.png") center 18%/cover; box-shadow: 12px 12px 0 var(--mint); }
.video-section { display: grid; justify-items: center; gap: 28px; text-align: center; background: #fff; }
.video-section .section-title { margin: 0; }
.video-section .section-title h2 { margin-bottom: 8px; }
.video-section .section-title > p:last-child { margin: 0; color: #526d7e; font-size: 1.05rem; }
.video-frame { position: relative; width: min(100%, 430px); aspect-ratio: 1080 / 1452; overflow: hidden; border: 8px solid white; border-radius: 18px; background: #0b4567; box-shadow: 0 14px 40px rgba(25,102,139,.2), 0 0 0 2px #b9e7f8; }
.video-frame::before, .video-frame::after { position: absolute; top: 12%; z-index: 1; width: 36px; height: 48px; content: ""; border-radius: 50%; background: #79d4fa; box-shadow: inset -5px -5px 10px rgba(0,65,104,.14); pointer-events: none; }
.video-frame::before { left: -25px; }.video-frame::after { right: -25px; top: 24%; background: var(--yellow); }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.countdown-section { overflow: hidden; text-align: center; background: #dff5ff; }
.countdown-section::before { position: absolute; inset: auto -6% -170px; height: 270px; content: ""; border-radius: 50% 50% 0 0; background: #b2e8df; transform: rotate(-4deg); }
.section-title { position: relative; z-index: 1; margin-bottom: 36px; }
.section-title h2 { color: var(--deep); }
.section-title .eyebrow, .party__copy .eyebrow, .rsvp .eyebrow { color: #1588bd; }
.countdown { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 870px; margin: auto; overflow: hidden; border-radius: 18px; background: white; box-shadow: 0 12px 30px rgba(29,112,153,.12); }
.countdown div { display: grid; min-height: 150px; place-content: center; padding: 16px 8px; }
.countdown div + div { border-left: 1px solid #d8edf5; }
.countdown strong { color: var(--blue); font: 800 clamp(2.7rem, 7vw, 4.5rem)/1 var(--display); }
.countdown span { margin-top: 6px; color: #658093; font-size: .73rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.countdown__confetti { position: absolute; bottom: 15px; left: 6%; color: #1388c9; font-size: 1.4rem; opacity: .7; }
.details { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 45px; color: white; background: var(--deep); }
.details::before { position: absolute; inset: 0; content: ""; opacity: .2; background-image: radial-gradient(#fff 1.5px, transparent 2px); background-size: 33px 33px; mask-image: linear-gradient(90deg, #000, transparent 70%); }
.details__art { position: relative; z-index: 1; display: grid; min-height: 380px; place-items: center; }
.details__balloon { display: grid; width: min(280px, 66vw); aspect-ratio: 1; place-content: center; color: var(--deep); border-radius: 50% 50% 45% 48%; background: linear-gradient(145deg, #fff, #91dcff); box-shadow: inset -26px -22px 32px rgba(18,117,173,.22), 0 18px 40px rgba(0,34,56,.24); font: 800 clamp(8rem, 24vw, 13rem)/1 var(--display); animation: bob 4s ease-in-out infinite; }
.details__art > span { position: absolute; right: 2%; bottom: 35px; padding: 9px 23px; color: var(--deep); border-radius: 999px; background: var(--yellow); font: 800 2rem var(--display); transform: rotate(-8deg); }
.details__card { position: relative; z-index: 1; max-width: 650px; padding: clamp(26px, 5vw, 48px); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; background: rgba(255,255,255,.1); }
.details__card h2 { font-size: clamp(2.8rem, 6vw, 4.5rem); }
.date-tile { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); text-align: center; }
.date-tile span { font-size: .73rem; font-weight: 900; letter-spacing: .1em; }
.date-tile strong { color: var(--yellow); font: 800 clamp(4rem, 10vw, 6rem)/1 var(--display); }
.details__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 24px; }
.details__rows div { padding: 16px; border-radius: 10px; background: rgba(255,255,255,.1); }
.details__rows span { color: #aee7ff; }
.rsvp { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(32px, 8vw, 100px); background: #f7fcff; }
.rsvp h2 { color: var(--deep); }
.rsvp__headline > p:last-child { max-width: 350px; color: #526d7e; font-size: 1.1rem; line-height: 1.65; }
.rsvp-form { display: grid; gap: 17px; padding: clamp(22px, 4vw, 36px); border-radius: 16px; background: white; box-shadow: 0 14px 42px rgba(37,110,146,.11); }
.rsvp-form > label { display: grid; gap: 7px; }
.rsvp-form label > span, .rsvp-form legend { color: #4b7188; font-size: .74rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.rsvp-form input[type="text"], .rsvp-form input[type="number"] { width: 100%; height: 49px; padding: 0 13px; color: var(--ink); border: 1px solid #bed8e5; border-radius: 8px; background: #fbfeff; outline: none; }
.rsvp-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(19,136,201,.13); }
.rsvp-form fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0; border: 0; }
.rsvp-form legend { margin-bottom: 9px; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: grid; min-height: 45px; place-items: center; padding: 7px; border: 1px solid #bed8e5; border-radius: 8px; color: #48697e; cursor: pointer; }
.choice input:checked + span { color: #075381; border-color: #36a9df; background: #e6f8ff; }
.form-error { min-height: 18px; margin: 0; color: #aa2c3b; font-weight: 800; }
.rsvp-form .button { width: 100%; }
footer { display: grid; justify-items: center; gap: 8px; padding: 42px 18px 50px; color: #eaf9ff; text-align: center; background: #063d60; }
.footer__star { color: var(--yellow); font-size: 1.7rem; }
footer strong { color: white; font: 800 1.6rem var(--display); }
footer > span:last-child { color: #a9e4fb; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes bob { 50% { translate: 0 -13px; rotate: 2deg; } }
@keyframes music-pulse { 50% { transform: scale(1.22); } }
@media (max-width: 760px) {
  .welcome__content { padding: 37px 22px; }
  .balloon--one { left: -12px; top: 8%; }.balloon--two { right: -4px; top: 10%; }.balloon--three { left: 4%; bottom: 5%; }
  .hero { min-height: 760px; min-height: 94svh; padding: 44px 22px 46px; }
  .hero__art { object-position: 52% center; }
  .hero__veil { background: linear-gradient(0deg, rgba(5,67,109,.89), rgba(5,67,109,.08) 82%); }
  .hero__badge { right: 20px; top: 22px; bottom: auto; width: 82px; height: 82px; }.hero__badge strong { font-size: 2.35rem; }
  .section { padding: 74px 22px; }
  .party, .details, .rsvp { grid-template-columns: 1fr; }
  .party { gap: 26px; }.party__facts { grid-template-columns: 1fr; }.party__facts div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .party__art { width: min(100%, 360px); }.party__photo { inset: 0; }
  .countdown { grid-template-columns: 1fr 1fr; }.countdown div { min-height: 120px; }.countdown div:nth-child(3) { border-top: 1px solid #d8edf5; border-left: 0; }.countdown div:nth-child(4) { border-top: 1px solid #d8edf5; }
  .details { gap: 15px; }.details__art { min-height: 270px; }.details__balloon { width: 220px; }.details__art > span { right: 12%; bottom: 4px; }.details__rows { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .welcome h1 { font-size: 3.8rem; }.hero h1 { font-size: 4.3rem; }.hero__content > p:not(.eyebrow) { font-size: 1rem; }.party__copy h2, .section-title h2, .rsvp h2 { font-size: 2.8rem; }.date-tile { grid-template-columns: 1fr; gap: 4px; }.date-tile strong { font-size: 4rem; }.rsvp-form fieldset { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }