:root {
    --pool-50: #f5fdff;
    --pool-100: #dff8ff;
    --pool-200: #bceefa;
    --pool-300: #82dcf5;
    --pool-400: #54c8ee;
    --pool-500: #24add9;
    --pool-600: #1688ae;
    --pink-100: #ffe4ef;
    --pink-300: #ff9fc5;
    --pink-500: #f44d91;
    --pink-600: #dc347c;
    --purple-500: #8060c4;
    --purple-600: #6747ae;
    --yellow-300: #ffe27a;
    --yellow-500: #f7bf36;
    --ink: #173455;
    --muted: #5f7388;
    --white: #ffffff;
    --card: rgba(255,255,255,.92);
    --card-soft: rgba(255,255,255,.78);
    --shadow-soft: 0 24px 60px rgba(30, 113, 148, .18);
    --shadow-card: 0 18px 42px rgba(32, 112, 145, .16);
    --radius-xl: 34px;
    --radius-lg: 26px;
    --radius-md: 18px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: #78d2f0;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background:
        radial-gradient(circle at 15% 10%, rgba(255,255,255,.55), transparent 28%),
        linear-gradient(180deg, #72d3f2 0%, #dff8ff 52%, #84dff5 100%);
    font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

body.is-locked {
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

button:disabled {
    cursor: wait;
    opacity: .72;
}

.pool-page {
    min-height: 100svh;
    position: relative;
    overflow: clip;
}

/* --------------------------------------------------------------------------
   BURBUJAS GLOBALES
   -------------------------------------------------------------------------- */
.bubble-layer {
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
}

.bubble {
    position: absolute;
    left: var(--x);
    bottom: -12vh;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    opacity: 0;
    border: 1px solid rgba(255,255,255,.78);
    background:
        radial-gradient(circle at 28% 24%, rgba(255,255,255,.95) 0 6%, transparent 7%),
        radial-gradient(circle at 62% 68%, rgba(255,255,255,.2), transparent 48%),
        rgba(255,255,255,.08);
    box-shadow:
        inset 0 0 14px rgba(255,255,255,.62),
        0 8px 18px rgba(33,129,164,.08);
    backdrop-filter: blur(1px);
    animation: bubbleRise var(--duration) linear var(--delay) infinite;
}

@keyframes bubbleRise {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(.72);
    }
    9% {
        opacity: .55;
    }
    65% {
        opacity: .38;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift), -122vh, 0) scale(1.08);
    }
}

/* --------------------------------------------------------------------------
   PORTADA / APERTURA
   -------------------------------------------------------------------------- */
.welcome-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #73d2f0;
    transition: opacity .8s ease, visibility .8s ease, transform 1s ease;
}

.welcome-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.04);
    pointer-events: none;
}

.welcome-screen__water,
.hero-water {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.7) 0 1.6%, transparent 1.8%),
        radial-gradient(ellipse at 72% 22%, rgba(255,255,255,.55) 0 1.2%, transparent 1.5%),
        radial-gradient(ellipse at 48% 66%, rgba(255,255,255,.36) 0 1.5%, transparent 1.8%),
        repeating-radial-gradient(ellipse at 40% 30%, rgba(255,255,255,.18) 0 1px, transparent 2px 24px),
        linear-gradient(165deg, #8adff5 0%, #55c9ed 52%, #2facd9 100%);
}

.welcome-screen__water::after,
.hero-water::after {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        repeating-linear-gradient(112deg, transparent 0 22px, rgba(255,255,255,.18) 24px 27px, transparent 29px 56px);
    opacity: .42;
    filter: blur(4px);
    animation: waterShimmer 13s linear infinite;
}

@keyframes waterShimmer {
    from { transform: translate3d(-4%, -2%, 0) rotate(.001deg); }
    to { transform: translate3d(5%, 4%, 0) rotate(.001deg); }
}

.welcome-screen__sun,
.hero-sun {
    position: absolute;
    width: min(80vw, 560px);
    aspect-ratio: 1;
    top: -30%;
    right: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,244,191,.52) 27%, transparent 68%);
    filter: blur(3px);
    animation: sunGlow 5s ease-in-out infinite alternate;
}

@keyframes sunGlow {
    from { opacity: .62; transform: scale(.96); }
    to { opacity: .95; transform: scale(1.05); }
}

.welcome-screen__content {
    position: relative;
    z-index: 5;
    width: min(92vw, 660px);
    min-height: 100svh;
    padding:
        max(40px, env(safe-area-inset-top))
        18px
        max(34px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.welcome-kicker {
    color: #155f82;
    font-family: "Baloo 2", sans-serif;
    font-size: clamp(.9rem, 3.4vw, 1.18rem);
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(255,255,255,.7);
}

.welcome-title-wrap {
    position: relative;
    margin-top: 8px;
}

.welcome-title-wrap h1,
.hero-name-line h1 {
    margin: 0;
    color: #f15093;
    font-family: "Pacifico", cursive;
    font-weight: 400;
    letter-spacing: .01em;
    text-shadow:
        0 5px 0 #fff,
        0 9px 0 rgba(226,76,139,.15),
        0 18px 30px rgba(40,120,154,.25);
}

.welcome-title-wrap h1 {
    font-size: clamp(4.7rem, 19vw, 8.8rem);
    line-height: 1;
}

.mini-crown,
.hero-crown {
    position: absolute;
    color: #ffd34f;
    text-shadow: 0 3px 0 #e3a724, 0 6px 12px rgba(123,89,16,.25);
    transform: rotate(-8deg);
}

.mini-crown {
    top: -28px;
    right: 10%;
    font-size: clamp(2rem, 8vw, 3.4rem);
}

.welcome-age {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
    color: #6a49ab;
    font-family: "Baloo 2", sans-serif;
    font-weight: 800;
}

.welcome-age span {
    font-size: clamp(1.4rem, 5vw, 2.1rem);
}

.welcome-age strong {
    min-width: 84px;
    color: #ff5a9a;
    font-size: clamp(4.7rem, 17vw, 7.4rem);
    line-height: .9;
    text-shadow:
        inset 0 0 14px #fff,
        0 4px 0 #fff,
        0 9px 18px rgba(211,59,123,.25);
}

.welcome-ribbon,
.purple-ribbon {
    position: relative;
    color: white;
    background: linear-gradient(135deg, #8c68ce, #6d48b4);
    box-shadow: 0 14px 30px rgba(70,50,120,.25);
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    transform: rotate(-1deg);
}

.welcome-ribbon {
    max-width: 560px;
    margin: 14px auto 0;
    padding: 13px 28px;
    border-radius: 16px 8px 16px 8px;
    font-size: clamp(1.25rem, 5vw, 1.8rem);
}

.welcome-ribbon strong,
.purple-ribbon strong {
    color: #ffd85c;
}

.open-invitation-button {
    margin-top: clamp(46px, 9vh, 88px);
    min-width: min(90vw, 360px);
    min-height: 64px;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, #ff5a9e, #ef3c83 60%, #d92c75);
    box-shadow:
        0 18px 36px rgba(198,43,110,.26),
        inset 0 0 0 3px rgba(255,255,255,.32);
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: openPulse 2.2s ease-in-out infinite alternate;
}

.open-invitation-button i {
    grid-row: 1 / span 2;
    font-size: 1.55rem;
}

.open-invitation-button span {
    font-family: "Baloo 2", sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}

.open-invitation-button small {
    justify-self: start;
    opacity: .88;
    font-size: .74rem;
    line-height: 1;
}

.open-invitation-button:hover,
.open-invitation-button:focus-visible {
    outline: none;
    transform: translateY(-2px);
}

@keyframes openPulse {
    from { box-shadow: 0 16px 32px rgba(198,43,110,.22), 0 0 0 0 rgba(255,255,255,.16); }
    to { box-shadow: 0 20px 42px rgba(198,43,110,.32), 0 0 0 10px rgba(255,255,255,.12); }
}

.welcome-note {
    margin: 12px 0 0;
    color: rgba(18,78,105,.72);
    font-weight: 700;
    font-size: .82rem;
}

.welcome-float,
.hero-float {
    position: absolute;
    z-index: 3;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(0 18px 24px rgba(25,91,119,.18));
}

.welcome-float--flamingo {
    width: clamp(140px, 34vw, 290px);
    left: -8%;
    bottom: 7%;
    animation: floatBob 4.8s ease-in-out infinite alternate;
}

.welcome-float--ball {
    width: clamp(92px, 22vw, 170px);
    top: 13%;
    right: -3%;
    animation: floatSpin 11s linear infinite;
}

.welcome-float--ring {
    width: clamp(100px, 23vw, 190px);
    left: -4%;
    top: 11%;
    animation: floatBob 5.8s ease-in-out -1s infinite alternate;
}

@keyframes floatBob {
    from { transform: translate3d(0, -4px, 0) rotate(-2deg); }
    to { transform: translate3d(0, 12px, 0) rotate(3deg); }
}

@keyframes floatSpin {
    from { transform: rotate(0deg) translateY(-3px); }
    to { transform: rotate(360deg) translateY(3px); }
}

/* --------------------------------------------------------------------------
   CONTENIDO PRINCIPAL
   -------------------------------------------------------------------------- */
.invitation-content {
    position: relative;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity .65s ease;
}

.invitation-content.is-visible {
    opacity: 1;
    visibility: visible;
}

.hero-section {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.hero-content {
    position: relative;
    z-index: 5;
    width: min(92%, 800px);
    padding: 100px 16px 120px;
    text-align: center;
}

.hero-kicker {
    display: inline-flex;
    padding: 6px 15px;
    border-radius: 999px;
    color: #137b9c;
    background: rgba(255,255,255,.76);
    box-shadow: 0 8px 22px rgba(27,102,130,.12);
    backdrop-filter: blur(10px);
    font-family: "Baloo 2", sans-serif;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.hero-name-line {
    position: relative;
    width: fit-content;
    margin: 12px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.hero-name-line h1 {
    font-size: clamp(4.2rem, 17vw, 8.4rem);
    line-height: 1;
}

.hero-crown {
    top: -32px;
    left: 26%;
    font-size: clamp(2rem, 6vw, 3rem);
}

.hero-eight {
    display: grid;
    place-items: center;
    width: clamp(92px, 24vw, 170px);
    aspect-ratio: .75;
    border-radius: 48% 52% 48% 52% / 44% 44% 56% 56%;
    color: #ff4d95;
    background:
        radial-gradient(circle at 35% 20%, rgba(255,255,255,.94) 0 8%, transparent 9%),
        linear-gradient(145deg, #ffc2da 0%, #ff6da8 50%, #e83a86 100%);
    box-shadow:
        inset -10px -15px 24px rgba(171,23,90,.14),
        inset 9px 9px 18px rgba(255,255,255,.45),
        0 7px 0 white,
        0 18px 34px rgba(205,45,111,.22);
    font-family: "Baloo 2", sans-serif;
    font-size: clamp(4.4rem, 16vw, 8.4rem);
    font-weight: 800;
    line-height: .9;
    transform: rotate(4deg);
    animation: eightFloat 4s ease-in-out infinite alternate;
}

@keyframes eightFloat {
    from { transform: translateY(-5px) rotate(3deg); }
    to { transform: translateY(8px) rotate(5deg); }
}

.hero-subtitle {
    margin: 0;
    color: #714aae;
    font-family: "Baloo 2", sans-serif;
    font-size: clamp(1.7rem, 7vw, 3rem);
    font-weight: 700;
}

.hero-subtitle strong {
    color: #fff;
    text-shadow: 0 2px 0 #6b48a4, 0 8px 20px rgba(60,58,124,.22);
}

.purple-ribbon {
    width: min(90%, 560px);
    margin: 18px auto 0;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: clamp(1.25rem, 4.8vw, 1.8rem);
}

.scroll-button {
    width: 54px;
    height: 54px;
    margin-top: 34px;
    border: 0;
    border-radius: 50%;
    color: #ed4a8d;
    background: white;
    box-shadow: 0 12px 28px rgba(31,106,136,.2);
    font-size: 1.35rem;
    cursor: pointer;
    animation: arrowBounce 1.7s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(7px); }
}

.hero-float--flamingo {
    width: clamp(160px, 32vw, 340px);
    left: -6%;
    bottom: 5%;
    animation: floatBob 5s ease-in-out infinite alternate;
}

.hero-float--ball {
    width: clamp(100px, 20vw, 190px);
    right: 2%;
    bottom: 10%;
    animation: floatSpin 13s linear infinite;
}

.hero-float--ring {
    width: clamp(100px, 20vw, 190px);
    right: -3%;
    top: 10%;
    animation: floatBob 6s ease-in-out -1s infinite alternate;
}

.hero-confetti i {
    position: absolute;
    z-index: 4;
    top: -8%;
    width: 10px;
    height: 26px;
    border-radius: 4px;
    animation: confettiFall 7s linear infinite;
}

.hero-confetti i:nth-child(1) { left: 12%; background:#ff4f95; animation-delay:-1s; transform:rotate(14deg); }
.hero-confetti i:nth-child(2) { left: 27%; background:#ffd64e; animation-delay:-4s; }
.hero-confetti i:nth-child(3) { left: 42%; background:#7c54c2; animation-delay:-2.4s; }
.hero-confetti i:nth-child(4) { left: 56%; background:#17b7d4; animation-delay:-5.2s; }
.hero-confetti i:nth-child(5) { left: 68%; background:#ff739f; animation-delay:-.5s; }
.hero-confetti i:nth-child(6) { left: 78%; background:#ffd64e; animation-delay:-3.2s; }
.hero-confetti i:nth-child(7) { left: 88%; background:#734cc0; animation-delay:-6s; }
.hero-confetti i:nth-child(8) { left: 95%; background:#1db1d2; animation-delay:-2s; }

@keyframes confettiFall {
    0% { transform: translate3d(0,-10vh,0) rotate(0deg); opacity:0; }
    10% { opacity:.9; }
    100% { transform: translate3d(40px,110vh,0) rotate(630deg); opacity:0; }
}

.wave {
    position: absolute;
    z-index: 5;
    left: -2%;
    right: -2%;
    bottom: -2px;
    height: 78px;
    background: var(--pool-50);
    clip-path: polygon(0 45%, 8% 56%, 18% 42%, 28% 55%, 38% 38%, 50% 55%, 61% 40%, 72% 55%, 83% 43%, 92% 57%, 100% 45%, 100% 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   MÚSICA / YOUTUBE
   -------------------------------------------------------------------------- */
.music-dock {
    position: fixed;
    z-index: 80;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    transition: opacity .3s ease, transform .3s ease;
}

.music-button {
    min-height: 48px;
    padding: 6px 12px 6px 7px;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 999px;
    color: #b8276c;
    background: rgba(255,255,255,.86);
    box-shadow: 0 10px 28px rgba(28,96,125,.18);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.music-button__circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(145deg, #ff6ba5, #ed3f86);
}

.music-button__label {
    font-weight: 800;
}

.equalizer {
    height: 14px;
    display: inline-flex;
    align-items: end;
    gap: 2px;
}

.equalizer i {
    width: 2px;
    height: 4px;
    border-radius: 3px;
    background: #ec4388;
}

.music-button.is-playing .equalizer i {
    animation: eq .7s ease-in-out infinite alternate;
}

.music-button.is-playing .equalizer i:nth-child(2) { animation-delay: .16s; }
.music-button.is-playing .equalizer i:nth-child(3) { animation-delay: .3s; }

@keyframes eq {
    from { height: 4px; }
    to { height: 14px; }
}

.youtube-mini {
    width: 160px;
    padding: 5px;
    border-radius: 14px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 28px rgba(28,96,125,.16);
    backdrop-filter: blur(14px);
}

.youtube-mini iframe {
    display: block;
    width: 150px;
    height: 84px;
    border: 0;
    border-radius: 10px;
    background: #0b2330;
}

/* --------------------------------------------------------------------------
   SECCIONES
   -------------------------------------------------------------------------- */
.content-section {
    position: relative;
    z-index: 4;
    width: 100%;
    padding: 74px max(18px, env(safe-area-inset-left)) 74px max(18px, env(safe-area-inset-right));
}

.countdown-zone {
    background:
        radial-gradient(circle at 10% 20%, rgba(130,220,245,.32), transparent 24%),
        linear-gradient(180deg, var(--pool-50), #edfaff);
}

.details-zone {
    padding-top: 10px;
    padding-bottom: 30px;
    background: #edfaff;
}

.action-zone {
    padding-top: 40px;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,159,197,.16), transparent 28%),
        radial-gradient(circle at 86% 70%, rgba(128,96,196,.12), transparent 24%),
        linear-gradient(180deg, #edfaff 0%, #d9f5ff 100%);
}

.section-heading {
    position: relative;
    z-index: 2;
    width: min(100%, 720px);
    margin: 0 auto 30px;
    text-align: center;
}

.section-heading > span,
.eyebrow {
    color: var(--pink-500);
    font-family: "Baloo 2", sans-serif;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.section-heading h2,
.party-card__heading h2 {
    margin: 5px 0 0;
    color: #6b4baa;
    font-family: "Baloo 2", sans-serif;
    font-weight: 800;
    line-height: 1.05;
}

.section-heading h2 {
    font-size: clamp(2.2rem, 8vw, 4rem);
}

.section-heading p {
    margin: 10px auto 0;
    color: var(--muted);
    font-weight: 600;
}

.section-watermark {
    position: absolute;
    top: 22px;
    left: 6%;
    opacity: .12;
    font-size: 5rem;
    transform: rotate(-18deg);
}

.countdown-card {
    width: min(100%, 820px);
    margin: 0 auto;
    padding: 24px 20px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.86);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(12px);
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
}

.countdown-item {
    text-align: center;
}

.countdown-item strong {
    display: block;
    color: var(--pink-500);
    font-family: "Baloo 2", sans-serif;
    font-size: clamp(2.2rem, 9vw, 4.4rem);
    font-weight: 800;
    line-height: .95;
}

.countdown-item span {
    display: block;
    margin-top: 6px;
    color: #275374;
    font-size: clamp(.66rem, 2.4vw, .86rem);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.countdown-divider {
    width: 1px;
    height: 58px;
    background: linear-gradient(transparent, rgba(32,98,130,.2), transparent);
}

.event-details-card {
    width: min(100%, 920px);
    margin: 0 auto;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.9);
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.event-detail {
    min-width: 0;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.event-detail + .event-detail {
    border-left: 1px solid rgba(41,113,143,.12);
}

.detail-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
}

.detail-icon--pink { color:#df397e; background:#ffe2ee; }
.detail-icon--yellow { color:#d59513; background:#fff4c8; }
.detail-icon--aqua { color:#0c8dab; background:#d9f8fd; }

.event-detail div {
    min-width: 0;
    display: grid;
}

.event-detail small {
    color: var(--pink-500);
    font-size: .73rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.event-detail strong {
    margin-top: 2px;
    font-size: clamp(.92rem, 2.4vw, 1.06rem);
    line-height: 1.2;
}

.event-detail span:not(.detail-icon) {
    color: var(--muted);
    font-size: .9rem;
}

.action-grid {
    width: min(100%, 960px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 22px;
    align-items: start;
}

.party-card {
    position: relative;
    min-width: 0;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(255,255,255,.74);
    border-radius: var(--radius-xl);
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.rsvp-card {
    background:
        radial-gradient(circle at 100% 100%, rgba(255,142,184,.21), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,235,244,.9));
}

.location-card {
    background:
        radial-gradient(circle at 100% 0, rgba(123,214,239,.18), transparent 30%),
        rgba(255,255,255,.94);
}

.party-card__heading {
    position: relative;
    z-index: 2;
    text-align: center;
}

.party-card__heading h2 {
    font-size: clamp(1.75rem, 5vw, 2.65rem);
}

.party-card__heading p {
    margin: 6px 0 0;
    color: var(--muted);
}

.card-decoration--heart {
    position: absolute;
    top: 18px;
    right: 22px;
    color: rgba(244,77,145,.22);
    font-size: 3.5rem;
    transform: rotate(12deg);
}

.rsvp-form {
    position: relative;
    z-index: 3;
    margin-top: 24px;
}

.form-field {
    display: block;
    margin-bottom: 15px;
}

.form-field > span {
    display: block;
    margin: 0 0 6px 4px;
    color: #34516d;
    font-size: .82rem;
    font-weight: 800;
}

.form-field > span small {
    color: #8493a1;
    font-weight: 600;
}

.input-shell {
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid rgba(40,114,145,.14);
    border-radius: 15px;
    background: rgba(255,255,255,.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.input-shell:focus-within {
    border-color: rgba(244,77,145,.5);
    box-shadow: 0 0 0 4px rgba(244,77,145,.10);
    transform: translateY(-1px);
}

.input-shell i {
    flex: 0 0 auto;
    color: var(--pink-500);
}

.input-shell input,
.input-shell select,
.input-shell textarea {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    color: var(--ink);
    background: transparent;
}

.input-shell input,
.input-shell select {
    min-height: 48px;
}

.input-shell textarea {
    padding: 12px 0;
    resize: vertical;
}

.input-shell--select select {
    appearance: none;
    cursor: pointer;
}

.input-shell--select::after {
    content: "⌄";
    color: #7890a0;
    font-size: 1rem;
}

.input-shell--textarea {
    align-items: flex-start;
}

.input-shell--textarea i {
    margin-top: 13px;
}

.validation-message {
    display: block;
    margin: 5px 0 0 4px;
    color: #b5235f;
    font-size: .76rem;
    font-weight: 700;
}

.honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px,1px,1px,1px) !important;
    white-space: nowrap !important;
}

.form-error {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 12px;
    color: #8e1e4f;
    background: #ffe2ef;
    font-size: .86rem;
    font-weight: 700;
}

.pink-button,
.purple-button,
.pool-button {
    border: 0;
    border-radius: 999px;
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.pink-button:hover,
.pink-button:focus-visible,
.purple-button:hover,
.purple-button:focus-visible,
.pool-button:hover,
.pool-button:focus-visible {
    outline: none;
    transform: translateY(-2px);
}

.pink-button {
    width: 100%;
    min-height: 54px;
    margin-top: 4px;
    background: linear-gradient(135deg, #ff5a9d, #e93982);
    box-shadow: 0 12px 24px rgba(215,46,116,.22);
}

.purple-button {
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
    background: linear-gradient(135deg, #8d66d1, #6846af);
    box-shadow: 0 12px 24px rgba(92,64,157,.2);
}

.pool-button {
    min-height: 48px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #28b9d9, #148aaa);
    box-shadow: 0 10px 22px rgba(25,136,170,.2);
}

.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: white;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.rsvp-success {
    min-height: 290px;
    margin-top: 22px;
    padding: 28px 16px;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255,255,255,.7);
}

.rsvp-success > span {
    font-size: 3rem;
}

.rsvp-success strong {
    margin-top: 8px;
    color: #6947a9;
    font-family: "Baloo 2", sans-serif;
    font-size: 1.5rem;
}

.rsvp-success p {
    margin: 4px 0 12px;
    color: var(--muted);
}

.text-button {
    border: 0;
    color: var(--pink-600);
    background: transparent;
    font-weight: 800;
    cursor: pointer;
}

.card-prop--glasses {
    position: absolute;
    z-index: 1;
    width: 112px;
    right: -14px;
    bottom: -12px;
    opacity: .9;
    transform: rotate(-10deg);
}

.map-frame {
    width: 100%;
    height: 240px;
    margin-top: 22px;
    border-radius: 20px;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,.85);
    box-shadow: 0 10px 24px rgba(42,111,141,.12);
}

.map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.location-copy {
    margin-top: 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.location-copy > i {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(145deg, #27b9d5, #1486a9);
}

.location-copy div {
    display: grid;
}

.location-copy strong {
    line-height: 1.25;
}

.location-copy span {
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   TRAJE DE BAÑO / FOOTER
   -------------------------------------------------------------------------- */
.swimsuit-zone {
    position: relative;
    z-index: 4;
    padding: 46px 18px 68px;
    background: linear-gradient(180deg, #d9f5ff, #7ddaf3);
}

.wood-sign {
    position: relative;
    width: min(92%, 760px);
    min-height: 122px;
    margin: 0 auto;
    padding: 24px 58px 24px 126px;
    border: 2px solid rgba(178,108,39,.25);
    border-radius: 18px;
    background:
        linear-gradient(0deg, rgba(120,65,24,.05), rgba(255,255,255,.04)),
        repeating-linear-gradient(0deg, transparent 0 26px, rgba(142,85,34,.09) 27px 28px),
        linear-gradient(145deg, #f6d497, #eab870);
    box-shadow: 0 18px 34px rgba(104,80,50,.18);
    display: flex;
    align-items: center;
}

.wood-sign::before,
.wood-sign::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 4px;
    border-radius: 50%;
    background: rgba(147,88,36,.09);
}

.wood-sign::before { top: 35%; }
.wood-sign::after { top: 68%; }

.wood-sign img {
    position: absolute;
    z-index: 2;
    width: 104px;
    left: 18px;
    bottom: -18px;
    filter: drop-shadow(0 10px 12px rgba(83,71,69,.16));
}

.wood-sign div {
    position: relative;
    z-index: 2;
    display: grid;
}

.wood-sign strong {
    color: #6748a9;
    font-family: "Baloo 2", sans-serif;
    font-size: clamp(1.35rem, 5vw, 2.25rem);
    line-height: 1.1;
}

.wood-sign span {
    color: #5d4a3e;
    font-weight: 700;
}

.wood-sign__heart {
    position: absolute;
    right: 24px;
    color: #ec4e8f !important;
    font-size: 2.8rem;
    transform: rotate(8deg);
}

.party-footer {
    position: relative;
    z-index: 4;
    min-height: 300px;
    padding: 90px 20px max(54px, env(safe-area-inset-bottom));
    overflow: hidden;
    color: white;
    background: linear-gradient(180deg, #4cc5e8 0%, #1aa8d4 100%);
    text-align: center;
}

.party-footer p,
.party-footer strong,
.party-footer span {
    position: relative;
    z-index: 3;
}

.party-footer p {
    margin: 0;
    font-family: "Baloo 2", sans-serif;
    font-size: clamp(1.2rem, 4.5vw, 1.8rem);
    font-weight: 700;
}

.party-footer strong {
    display: block;
    margin-top: 8px;
    color: #fff0a8;
    font-family: "Pacifico", cursive;
    font-size: clamp(2.2rem, 9vw, 4rem);
    font-weight: 400;
}

.party-footer span {
    display: block;
    margin-top: 8px;
    font-weight: 800;
}

.footer-wave {
    position: absolute;
    left: -12%;
    width: 124%;
    height: 70px;
    border-radius: 50%;
    background: rgba(255,255,255,.48);
}

.footer-wave--one {
    top: -34px;
    animation: waveMove 9s ease-in-out infinite alternate;
}

.footer-wave--two {
    top: -50px;
    opacity: .52;
    animation: waveMove 11s ease-in-out -2s infinite alternate-reverse;
}

@keyframes waveMove {
    from { transform: translateX(-3%) rotate(-1deg); }
    to { transform: translateX(3%) rotate(1deg); }
}

/* --------------------------------------------------------------------------
   REVEAL
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    filter: blur(5px);
    transition:
        opacity .82s ease,
        transform .92s cubic-bezier(.22,.72,.22,1),
        filter .82s ease;
    will-change: opacity, transform, filter;
}

.reveal--rise { transform: translate3d(0, 54px, 0); }
.reveal--fade-scale { transform: scale(.94); }
.reveal--slide-left { transform: translate3d(-55px,0,0); }
.reveal--slide-right { transform: translate3d(55px,0,0); }

.reveal.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,0,0) scale(1);
}

/* --------------------------------------------------------------------------
   ADMIN
   -------------------------------------------------------------------------- */
.admin-page {
    min-height: 100svh;
    padding: 36px 18px 70px;
    background:
        radial-gradient(circle at 15% 10%, rgba(255,255,255,.8), transparent 30%),
        linear-gradient(160deg, #dff8ff, #9de5f7);
}

.admin-shell {
    width: min(100%, 1120px);
    margin: 0 auto;
}

.admin-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #155f82;
    text-decoration: none;
    font-weight: 800;
}

.admin-heading {
    margin: 28px 0;
}

.admin-heading span {
    color: var(--pink-600);
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.admin-heading h1 {
    margin: 4px 0;
    color: #6747aa;
    font-family: "Baloo 2", sans-serif;
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    line-height: 1;
}

.admin-heading p {
    margin: 0;
    color: var(--muted);
}

.admin-login-card,
.admin-list-card {
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow-soft);
}

.admin-login-card {
    width: min(100%, 480px);
    padding: 28px;
}

.admin-login-card label {
    display: grid;
    gap: 7px;
    font-weight: 800;
}

.admin-login-card input {
    min-height: 50px;
    padding: 10px 14px;
    border: 1px solid #cfe5ed;
    border-radius: 14px;
    outline: none;
}

.admin-login-card .pool-button {
    width: 100%;
    margin-top: 16px;
}

.admin-error {
    color: #a6215b;
    font-weight: 700;
}

.admin-loading,
.admin-empty {
    padding: 40px;
    text-align: center;
    color: var(--muted);
}

.admin-stats {
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.admin-stats article {
    padding: 20px;
    border-radius: 20px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 12px 26px rgba(31,106,136,.12);
    display: grid;
}

.admin-stats span {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-stats strong {
    color: #6847ac;
    font-family: "Baloo 2", sans-serif;
    font-size: 2.2rem;
}

.admin-list-card {
    overflow: hidden;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #e4f0f4;
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    color: #3f6178;
    background: #f5fcff;
    font-size: .76rem;
    text-transform: uppercase;
}

.status-pill {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
}

.status-pill--yes { color:#16784b; background:#dcf8e9; }
.status-pill--no { color:#a53d59; background:#ffe3ea; }

.not-found {
    min-height: 100svh;
    padding: 30px;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
    background: linear-gradient(145deg, #dff8ff, #8bdcf2);
}

.not-found__bubble { font-size: 4rem; }
.not-found h1 {
    margin: 10px 0;
    color: #6747aa;
    font-family: "Baloo 2", sans-serif;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: auto 0 0 0;
    padding: 12px 18px;
    color: #5d3044;
    background: #fff0c7;
    box-shadow: 0 -3px 16px rgba(0,0,0,.12);
}

#blazor-error-ui .reload { font-weight: 800; }
#blazor-error-ui .dismiss {
    float: right;
    border: 0;
    background: transparent;
    font-size: 1.3rem;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
    .hero-float--flamingo { left: -15%; }
    .hero-float--ball { right: -7%; }
    .hero-float--ring { right: -8%; }

    .event-details-card {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .event-detail + .event-detail {
        border-left: 0;
        border-top: 1px solid rgba(41,113,143,.12);
    }

    .action-grid {
        grid-template-columns: 1fr;
    }

    .location-card {
        order: 2;
    }
}

@media (max-width: 600px) {
    .welcome-float--flamingo { left: -18%; bottom: 3%; }
    .welcome-float--ball { right: -8%; top: 10%; }
    .welcome-float--ring { left: -9%; top: 7%; }

    .hero-content {
        width: 100%;
        padding-top: 86px;
        padding-inline: 12px;
    }

    .hero-name-line {
        gap: 8px;
    }

    .hero-name-line h1 {
        font-size: clamp(3.8rem, 18vw, 5.8rem);
    }

    .hero-eight {
        width: clamp(78px, 24vw, 116px);
        font-size: clamp(4rem, 18vw, 6rem);
    }

    .hero-float--flamingo { width: 150px; left: -22%; bottom: 8%; }
    .hero-float--ball { width: 92px; right: -7%; bottom: 13%; }
    .hero-float--ring { width: 92px; right: -7%; top: 10%; }

    .countdown-card {
        padding: 18px 8px;
        border-radius: 22px;
    }

    .countdown-divider {
        height: 42px;
    }

    .countdown-item strong {
        font-size: clamp(1.9rem, 10vw, 3rem);
    }

    .countdown-item span {
        letter-spacing: .02em;
        font-size: .6rem;
    }

    .event-details-card {
        padding: 10px 14px;
    }

    .event-detail {
        padding: 15px 4px;
    }

    .party-card {
        padding: 24px 18px;
        border-radius: 26px;
    }

    .map-frame {
        height: 210px;
    }

    .wood-sign {
        width: 100%;
        min-height: 135px;
        padding: 22px 34px 22px 106px;
    }

    .wood-sign img {
        width: 88px;
        left: 10px;
    }

    .wood-sign__heart {
        display: none;
    }

    .music-button__label {
        display: none;
    }

    .music-button {
        padding-right: 8px;
    }

    .youtube-mini {
        width: 126px;
    }

    .youtube-mini iframe {
        width: 116px;
        height: 65px;
    }

    .admin-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .welcome-title-wrap h1 { font-size: 4.2rem; }
    .welcome-age strong { min-width: 70px; }

    .countdown-item strong { font-size: 1.75rem; }
    .countdown-item span { font-size: .54rem; }

    .wood-sign {
        padding-left: 90px;
    }
    .wood-sign img { width: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .reveal {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   OVERRIDES - SECCIONES MÁS MARCADAS / ANIMACIONES EXTRA
   -------------------------------------------------------------------------- */
.story-section {
    min-height: 100svh;
    display: flex;
    align-items: center;
}

.section-shell {
    width: min(100%, 980px);
    margin: 0 auto;
}

.hero-section {
    min-height: 100svh;
}

.hero-content {
    width: min(94%, 860px);
    max-width: 860px;
}

.hero-event-pill {
    margin: 10px auto 22px;
    padding: 12px 18px;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 12px 28px rgba(28,96,125,.15);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    color: #2d5370;
    font-weight: 800;
    backdrop-filter: blur(10px);
}

.hero-event-pill span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hero-portrait {
    position: relative;
    z-index: 3;
    width: min(280px, 68vw);
    margin: 18px auto 22px;
    animation: portraitFloat 5.5s ease-in-out infinite;
}

.hero-portrait__glow {
    position: absolute;
    inset: 12px;
    border-radius: 48px;
    background: radial-gradient(circle at center, rgba(255,255,255,.92), rgba(255,255,255,0) 70%);
    filter: blur(12px);
    z-index: 0;
}

.hero-portrait img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 26px rgba(34, 113, 146, .22));
}

.hero-portrait__badge {
    position: absolute;
    right: 10px;
    bottom: 12px;
    z-index: 2;
    padding: 8px 14px;
    border-radius: 999px;
    color: white;
    background: linear-gradient(135deg, #8d66d1, #6846af);
    box-shadow: 0 10px 20px rgba(80, 50, 128, .22);
    font-family: "Baloo 2", sans-serif;
    font-size: .95rem;
    font-weight: 800;
}

@keyframes portraitFloat {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50% { transform: translateY(-10px) rotate(1.2deg); }
}

.section-nav {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.section-nav--hero {
    margin-top: 24px;
}

.section-next-button {
    position: relative;
    overflow: hidden;
    min-width: min(84vw, 270px);
    min-height: 54px;
    padding: 12px 20px;
    border-radius: 999px;
    color: white;
    text-decoration: none;
    background: linear-gradient(135deg, #8d66d1, #6846af);
    box-shadow: 0 14px 28px rgba(92,64,157,.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 800;
    transition: transform .25s ease, box-shadow .25s ease;
    animation: arrowPulse 2.1s ease-in-out infinite alternate;
}

.section-next-button::after,
.pink-button::after,
.purple-button::after,
.pool-button::after,
.open-invitation-button::after,
.music-button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.34) 50%, transparent 80%);
    transform: translateX(-140%);
    transition: transform .75s ease;
    pointer-events: none;
}

.section-next-button:hover::after,
.pink-button:hover::after,
.purple-button:hover::after,
.pool-button:hover::after,
.open-invitation-button:hover::after,
.music-button:hover::after,
.section-next-button:focus-visible::after,
.pink-button:focus-visible::after,
.purple-button:focus-visible::after,
.pool-button:focus-visible::after,
.open-invitation-button:focus-visible::after,
.music-button:focus-visible::after {
    transform: translateX(140%);
}

.section-next-button:hover,
.section-next-button:focus-visible {
    outline: none;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 34px rgba(92,64,157,.28);
}

.section-next-button--light {
    background: linear-gradient(135deg, #4ec8eb, #1fa8d6);
    box-shadow: 0 14px 28px rgba(27, 141, 173, .22);
}

@keyframes arrowPulse {
    from { transform: translateY(0); }
    to { transform: translateY(4px); }
}

.details-stack {
    display: grid;
    gap: 22px;
}

.schedule-highlight {
    position: relative;
    padding: clamp(24px, 4vw, 34px);
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 176, 204, .2), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(243,250,255,.94));
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.schedule-highlight__eyebrow {
    display: inline-flex;
    padding: 7px 14px;
    border-radius: 999px;
    color: #f44d91;
    background: #ffe9f2;
    font-family: "Baloo 2", sans-serif;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.schedule-highlight h3 {
    margin: 12px 0 8px;
    color: #6847ac;
    font-family: "Baloo 2", sans-serif;
    font-size: clamp(1.6rem, 5vw, 2.5rem);
    line-height: 1.08;
}

.schedule-highlight p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.schedule-chip-grid {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.schedule-chip {
    padding: 8px 13px;
    border-radius: 999px;
    color: #355774;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 16px rgba(39, 106, 137, .10);
    font-weight: 800;
}

.party-card--single {
    width: min(100%, 760px);
    margin: 0 auto;
}

.location-zone {
    background:
        radial-gradient(circle at 18% 22%, rgba(128,96,196,.12), transparent 24%),
        linear-gradient(180deg, #dff7ff 0%, #d2f2fc 100%);
}

.fun-zone {
    background:
        radial-gradient(circle at 85% 18%, rgba(255,159,197,.18), transparent 22%),
        linear-gradient(180deg, #d2f2fc 0%, #c0ecfb 100%);
}

.fun-card {
    background:
        radial-gradient(circle at 0 100%, rgba(130,220,245,.22), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(235,248,255,.94));
}

.fun-card__grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 24px;
    align-items: center;
}

.fun-photo-frame {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255,255,255,.72);
    box-shadow: 0 18px 36px rgba(31,106,136,.16);
}

.fun-photo-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fun-copy__lead {
    color: #6747aa;
    font-family: "Baloo 2", sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: 800;
    line-height: 1.2;
}

.fun-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.fun-list li {
    padding: 13px 15px;
    border-radius: 18px;
    color: #34516d;
    background: rgba(255,255,255,.78);
    box-shadow: inset 0 0 0 1px rgba(40,114,145,.08);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 700;
}

.fun-list i {
    color: #f44d91;
    font-size: 1.05rem;
    margin-top: 1px;
}

.map-frame--placeholder {
    display: grid;
    place-items: center;
    background:
        linear-gradient(145deg, rgba(240,249,255,.98), rgba(224,245,252,.98));
}

.map-frame--placeholder div {
    padding: 18px;
    text-align: center;
    display: grid;
    gap: 8px;
    color: #52708a;
}

.map-frame--placeholder i {
    font-size: 2.1rem;
    color: #24add9;
}

.party-card,
.countdown-card,
.event-details-card,
.schedule-highlight,
.wood-sign,
.fun-photo-frame,
.youtube-mini,
.music-button {
    transition: transform .35s ease, box-shadow .35s ease;
}

.party-card:hover,
.countdown-card:hover,
.event-details-card:hover,
.schedule-highlight:hover,
.wood-sign:hover,
.fun-photo-frame:hover,
.youtube-mini:hover,
.music-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 46px rgba(31,106,136,.18);
}

.section-heading h2,
.party-card__heading h2,
.party-footer strong {
    text-shadow: 0 4px 14px rgba(255,255,255,.25);
}

@media (max-width: 820px) {
    .story-section {
        min-height: auto;
    }

    .fun-card__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .hero-event-pill {
        gap: 8px 12px;
        padding: 10px 14px;
        font-size: .88rem;
    }

    .hero-portrait {
        width: min(240px, 72vw);
    }

    .section-next-button {
        min-width: 78vw;
    }

    .schedule-chip-grid {
        gap: 8px;
    }
}
.open-invitation-button,
.pink-button,
.purple-button,
.pool-button,
.music-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}