:root {
    --champagne-50: #fffaf6;
    --champagne-100: #f8ece4;
    --blush-200: #eed4ca;
    --blush-300: #deb9ad;
    --rose-500: #a96f67;
    --gold-300: #e8c98a;
    --gold-500: #b88a3c;
    --gold-700: #846027;
    --ink: #4f3b38;
    --white: #ffffff;
    --shadow-soft: 0 24px 70px rgba(95, 61, 54, 0.16);
    --radius-lg: 34px;
    --radius-md: 24px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: radial-gradient(circle at 10% 10%, rgba(255,255,255,.95), transparent 35%), radial-gradient(circle at 90% 30%, rgba(238,212,202,.8), transparent 40%), linear-gradient(180deg, #fffaf7 0%, #f6e8df 48%, #fff9f5 100%);
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    overflow-x: hidden;
}

    body.is-locked {
        overflow: hidden;
    }

button,
input {
    font: inherit;
}

a {
    color: inherit;
}

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

.page-shell {
    min-height: 100svh;
}

.particles-canvas {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .68;
}

.loading-screen {
    min-height: 100svh;
    display: grid;
    place-content: center;
    gap: 14px;
    color: var(--gold-700);
    text-align: center;
    background: radial-gradient(circle, white, transparent 58%), linear-gradient(145deg, #fffaf6, #ecd6cb);
}

.loading-screen__crown {
    font-size: 3rem;
    animation: loadingPulse 1.4s ease-in-out infinite alternate;
}

.loading-screen p {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.4rem;
}

.welcome-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    min-height: 100svh;
    overflow: hidden;
    background: #ead5ca;
    transition: opacity 1s ease, visibility 1s ease, transform 1.2s ease;
}

    .welcome-screen.is-hidden {
        opacity: 0;
        visibility: hidden;
        transform: scale(1.025);
    }

.welcome-screen__picture,
.welcome-screen__image,
.welcome-screen__veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.welcome-screen__image {
    object-fit: cover;
    object-position: center 46%;
    filter: saturate(.92) contrast(.97) brightness(.93);
    transform: scale(1.015);
    animation: coverBreath 12s ease-in-out infinite alternate;
}

.welcome-screen__veil {
    background: linear-gradient( 180deg, rgba(255,250,246,.92) 0%, rgba(255,250,246,.64) 20%, rgba(91,58,50,.04) 46%, rgba(80,49,43,.15) 69%, rgba(255,247,241,.84) 100%), radial-gradient( circle at 50% 24%, rgba(255,255,255,.72), transparent 31%);
}

.welcome-screen::before {
    content: "";
    position: absolute;
    inset: 18px;
    z-index: 1;
    border: 1px solid rgba(184,138,60,.62);
    border-radius: 2px;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.24);
    pointer-events: none;
}

.welcome-screen__content {
    position: relative;
    z-index: 3;
    width: min(94%, 720px);
    min-height: 100svh;
    padding: max(42px, env(safe-area-inset-top)) 20px max(36px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.crown-mark {
    color: var(--gold-500);
    font-family: Georgia, serif;
    font-size: 2.2rem;
    line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(184,138,60,.25));
}

.welcome-screen .crown-mark {
    margin-top: 1vh;
}

.eyebrow {
    margin: 10px 0 8px;
    color: var(--gold-700);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.05rem, 3.8vw, 1.38rem);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.welcome-screen h1 {
    margin: 0;
    color: #8f642a;
    font-family: "Great Vibes", cursive;
    font-size: clamp(4.15rem, 17vw, 8.3rem);
    font-weight: 400;
    line-height: .9;
    text-shadow: 0 6px 20px rgba(255,255,255,.65);
}

.ornament {
    width: min(330px, 70vw);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 8px 0 4px;
    color: var(--gold-500);
}

    .ornament span {
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold-500));
    }

        .ornament span:last-child {
            background: linear-gradient(90deg, var(--gold-500), transparent);
        }

    .ornament i {
        font-family: Georgia, serif;
        font-style: normal;
        font-size: 1.2rem;
    }

.welcome-date {
    margin: 0;
    color: var(--gold-700);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.05rem, 4.4vw, 1.55rem);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.welcome-phrase {
    margin: 6px 0 0;
    color: #8c625d;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.25rem, 5vw, 1.85rem);
    font-style: italic;
}

.gold-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 28px;
    border: 1px solid rgba(184,138,60,.85);
    border-radius: 999px;
    color: #755020;
    background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(248,226,213,.96));
    box-shadow: 0 12px 30px rgba(117,80,32,.16), inset 0 0 0 3px rgba(255,255,255,.45);
    font-family: "Cormorant Garamond", serif;
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

    .gold-button:hover,
    .gold-button:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 16px 36px rgba(117,80,32,.22), 0 0 0 4px rgba(232,201,138,.2);
        outline: none;
    }

    .gold-button:active {
        transform: translateY(0);
    }

.gold-button--hero {
    width: min(390px, 88vw);
    margin-top: auto;
    min-height: 64px;
    font-size: clamp(1.45rem, 6vw, 1.85rem);
    background: linear-gradient(135deg, #fffaf2, #efd2c5);
    animation: heroButtonGlow 2.4s ease-in-out infinite alternate;
}

.gold-button--full {
    width: 100%;
}

.invitation-content {
    position: relative;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease;
}

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

.topbar {
    position: fixed;
    z-index: 50;
    top: max(16px, env(safe-area-inset-top));
    right: 16px;
}

.music-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid rgba(184,138,60,.42);
    border-radius: 999px;
    color: var(--gold-700);
    background: rgba(255,250,246,.84);
    box-shadow: 0 10px 25px rgba(79,59,56,.12);
    backdrop-filter: blur(14px);
    cursor: pointer;
}

.music-button__icon {
    font-size: 1.1rem;
}

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

    .equalizer i {
        width: 2px;
        height: 5px;
        background: var(--gold-500);
        border-radius: 3px;
    }

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

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

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

.section {
    width: min(100%, 980px);
    margin-inline: auto;
    padding: 88px 22px;
}

.section-heading {
    max-width: 720px;
    margin: 0 auto 38px;
    text-align: center;
}

.section-heading__symbol {
    display: block;
    color: var(--gold-500);
    font-size: 1.4rem;
}

.section h2,
.invitation-footer h2 {
    margin: 0;
    color: #785128;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.35rem, 9vw, 4.6rem);
    font-weight: 500;
    line-height: .98;
}

.section-heading p:not(.eyebrow) {
    max-width: 620px;
    margin: 20px auto 0;
    line-height: 1.8;
}

.lead-text {
    max-width: 720px;
    margin: 0 auto;
    color: #6f5550;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.45rem, 5vw, 2rem);
    line-height: 1.65;
    text-align: center;
}

.glass-card,
.event-card,
.rsvp-form,
.calendar-card {
    border: 1px solid rgba(184,138,60,.27);
    background: linear-gradient(145deg, rgba(255,255,255,.83), rgba(249,233,224,.72));
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
}

.glass-card {
    border-radius: var(--radius-lg);
    padding: clamp(34px, 8vw, 64px) clamp(24px, 7vw, 70px);
}

.family-card,
.centered-card {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.names-block {
    margin-top: 24px;
}

    .names-block p {
        margin: 6px 0;
        color: #76552c;
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(1.45rem, 5.5vw, 2rem);
        font-weight: 600;
    }

    .names-block span {
        color: var(--gold-500);
        font-family: "Great Vibes", cursive;
        font-size: 1.6rem;
    }

.gold-divider {
    width: 110px;
    height: 1px;
    margin: 34px auto;
    background: linear-gradient( 90deg, transparent, var(--gold-500), transparent);
}

.family-message,
.centered-card p {
    margin: 30px auto 0;
    max-width: 610px;
    line-height: 1.85;
}

.calendar-card {
    max-width: 430px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    padding: 24px;
}

.calendar-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    color: var(--gold-700);
    font-family: "Cormorant Garamond", serif;
}

    .calendar-card__header span {
        font-size: 2rem;
        font-weight: 600;
    }

    .calendar-card__header strong {
        font-size: 1.25rem;
        letter-spacing: .08em;
    }

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    text-align: center;
}

    .calendar-grid span,
    .calendar-grid strong {
        display: grid;
        place-items: center;
        min-height: 36px;
        font-size: .9rem;
        font-weight: 500;
    }

.calendar-grid--weekdays {
    margin-bottom: 4px;
    color: var(--gold-700);
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
}

.selected-day {
    width: 38px;
    height: 38px;
    justify-self: center;
    border-radius: 50%;
    color: white;
    background: linear-gradient(145deg, #c79a52, #9c6d2d);
    box-shadow: 0 8px 18px rgba(156,109,45,.28);
}

.countdown {
    max-width: 620px;
    margin: 34px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

    .countdown div {
        padding: 18px 8px;
        border: 1px solid rgba(184,138,60,.24);
        border-radius: 18px;
        background: rgba(255,255,255,.64);
        text-align: center;
        box-shadow: 0 12px 25px rgba(79,59,56,.08);
    }

    .countdown strong {
        display: block;
        color: var(--gold-700);
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(2rem, 8vw, 3.3rem);
        line-height: 1;
    }

    .countdown span {
        display: block;
        margin-top: 7px;
        font-size: clamp(.62rem, 2.4vw, .78rem);
        letter-spacing: .1em;
        text-transform: uppercase;
    }

.section--events {
    display: grid;
    gap: 24px;
}

.event-card {
    border-radius: var(--radius-lg);
    padding: 42px 28px;
    text-align: center;
}

.event-card__icon {
    color: var(--gold-500);
    font-size: 2.5rem;
}

.event-card h2 {
    margin-bottom: 8px;
}

.event-card h3 {
    margin: 0;
    color: #795b52;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.55rem, 5vw, 2.1rem);
}

.event-card p {
    max-width: 520px;
    margin: 20px auto 26px;
    line-height: 1.75;
}

.dress-icon,
.gift-icon {
    margin-bottom: 8px;
    color: var(--gold-500);
    font-size: 2.8rem;
}

.rsvp-form {
    max-width: 650px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    padding: clamp(26px, 7vw, 48px);
}

.form-field {
    margin-bottom: 25px;
}

    .form-field label,
    .form-field legend {
        display: block;
        margin-bottom: 10px;
        color: #6b4e48;
        font-weight: 600;
    }

        .form-field label span {
            font-weight: 400;
            opacity: .75;
        }

.form-control {
    width: 100%;
    min-height: 50px;
    padding: 12px 15px;
    border: 1px solid rgba(184,138,60,.38);
    border-radius: 14px;
    color: var(--ink);
    background: rgba(255,255,255,.82);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .form-control:focus {
        border-color: var(--gold-500);
        box-shadow: 0 0 0 4px rgba(232,201,138,.2);
    }

.attendance-options {
    padding: 0;
    border: 0;
}

    .attendance-options label {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        margin: 8px 0;
        padding: 10px 14px;
        border: 1px solid rgba(184,138,60,.18);
        border-radius: 14px;
        background: rgba(255,255,255,.64);
        cursor: pointer;
    }

    .attendance-options input {
        accent-color: var(--gold-500);
    }

.validation-message {
    display: block;
    margin-top: 7px;
    color: #a03f3f;
    font-size: .86rem;
}

.invitation-footer {
    position: relative;
    z-index: 3;
    padding: 80px 22px 110px;
    text-align: center;
}

    .invitation-footer p {
        margin: 16px 0 4px;
        font-family: "Cormorant Garamond", serif;
        font-size: 1.3rem;
    }

    .invitation-footer h2 {
        font-family: "Great Vibes", cursive;
        font-weight: 400;
        font-size: clamp(3.5rem, 14vw, 6rem);
    }

    .invitation-footer span {
        color: var(--gold-700);
        letter-spacing: .26em;
    }

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .85s ease, transform .85s ease;
}

    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

.not-found {
    min-height: 100svh;
    padding: 40px 20px;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
}

    .not-found h1 {
        margin-top: 0;
        font-family: "Cormorant Garamond", serif;
        color: var(--gold-700);
        font-size: clamp(2.5rem, 10vw, 5rem);
    }

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

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

@keyframes loadingPulse {
    from {
        transform: scale(.94);
        opacity: .65;
    }

    to {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes coverBreath {
    from {
        transform: scale(1.015);
    }

    to {
        transform: scale(1.055);
    }
}

@keyframes heroButtonGlow {
    from {
        box-shadow: 0 12px 28px rgba(117,80,32,.18), 0 0 0 0 rgba(232,201,138,.15);
    }

    to {
        box-shadow: 0 18px 42px rgba(117,80,32,.25), 0 0 0 8px rgba(232,201,138,.10);
    }
}

@keyframes equalizer {
    from {
        height: 4px;
    }

    to {
        height: 15px;
    }
}

@media (min-width: 760px) {
    .section {
        padding-block: 110px;
    }

    .section--events {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .welcome-screen__content {
        padding-inline: 40px;
    }
}

@media (max-width: 480px) {
    .welcome-screen__content {
        padding-top: 32px;
    }

    .welcome-screen .crown-mark {
        margin-top: 0;
    }

    .welcome-screen h1 {
        font-size: clamp(3.8rem, 18vw, 5rem);
    }

    .countdown {
        gap: 6px;
    }

        .countdown div {
            padding-inline: 3px;
            border-radius: 14px;
        }

    .music-button__text {
        display: none;
    }
}

@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;
        transform: none;
    }
}

/* ============================================================
   STORY MODE
   Sistema de navegación por escenas
   No reemplaza ninguna clase existente
   ============================================================*/

html.story-mode {
    scroll-snap-type: y proximity;
}

body::after {
    content: "";
    position: fixed;
    z-index: 90;
    inset: -12vh auto -12vh 0;
    width: 38vw;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-145vw,0,0) skewX(-12deg);
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.15) 25%, rgba(238,201,132,.36) 50%, rgba(255,255,255,.15) 75%, transparent);
    filter: blur(9px);
}

body.is-section-transitioning::after {
    animation: sectionLightSweep .9s cubic-bezier(.22,.72,.22,1);
}

/* ============================================================
   ESCENAS
   ============================================================*/

.story-step {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: max(88px,env(safe-area-inset-top));
    padding-bottom: max(40px,env(safe-area-inset-bottom));
    isolation: isolate;
    overflow: hidden;
    scroll-snap-align: start;
    width: 100%;
}

.story-step__content {
    width: min(100%,980px);
    margin-inline: auto;
    position: relative;
    z-index: 5;
}

/* ============================================================
   EFECTOS DE FONDO
   ============================================================*/

.story-step::before,
.story-step::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: -2;
    pointer-events: none;
}

.story-step::before {
    width: min(520px,74vw);
    aspect-ratio: 1;
    top: 8%;
    right: -25%;
    background: radial-gradient( circle, rgba(239,204,183,.38), rgba(239,204,183,.08) 52%, transparent 72%);
}

.story-step::after {
    width: min(430px,68vw);
    aspect-ratio: 1;
    bottom: 5%;
    left: -24%;
    background: radial-gradient( circle, rgba(232,201,138,.24), transparent 70%);
}

.story-step:nth-child(even)::before {
    right: auto;
    left: -25%;
}

.story-step:nth-child(even)::after {
    left: auto;
    right: -24%;
}

/* ============================================================
   GLOW
   ============================================================*/

.story-step__glow {
    position: absolute;
    inset: 18% 12%;
    z-index: -1;
    border-radius: 50%;
    opacity: .42;
    transform: scale(.88);
    background: radial-gradient( circle, rgba(255,255,255,.72), rgba(255,255,255,.18) 45%, transparent 72%);
    filter: blur(18px);
    transition: opacity 1.3s ease, transform 1.3s cubic-bezier(.22,.72,.22,1);
}

.story-step.is-visible .story-step__glow {
    opacity: .82;
    transform: scale(1.05);
}

/* ============================================================
   ESCENA FINAL
   ============================================================*/

.story-step--final {
    background: radial-gradient( circle at 50% 35%, rgba(255,255,255,.92), transparent 42%), linear-gradient( 180deg, rgba(255,250,246,.35), rgba(238,212,202,.45));
}

    .story-step--final .invitation-footer {
        padding: 20px;
    }

/* ============================================================
   RESPONSIVE
   ============================================================*/

@media(max-width:560px) {

    .story-step {
        padding-inline: 18px;
        padding-top: max(76px,env(safe-area-inset-top));
    }

    .story-step__content {
        width: 100%;
    }
}

/* ============================================================
   REDUCIR MOVIMIENTO
   ============================================================*/

@media(prefers-reduced-motion:reduce) {

    html.story-mode {
        scroll-snap-type: none;
    }

    .story-step__glow {
        transition: none;
    }
}
/* ============================================================
   STORY NAVIGATION
   Navegación cinematográfica entre escenas
   ============================================================*/

.story-navigation {
    width: min(100%,760px);
    margin: 40px auto 0;
    display: grid;
    gap: 14px;
    position: relative;
    z-index: 20;
}

.story-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(132,96,39,.78);
    font-family: "Cormorant Garamond",serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

    .story-progress i {
        width: 58px;
        height: 1px;
        background: linear-gradient( 90deg, transparent, var(--gold-500), transparent);
    }

.story-navigation__buttons {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
}

/* ============================================================
   BOTÓN GENERAL
   ============================================================*/

.story-button {
    min-height: 54px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: "Cormorant Garamond",serif;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: .04em;
    transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}

/* ============================================================
   BOTÓN ANTERIOR
   ============================================================*/

.story-button--previous {
    width: 58px;
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gold-700);
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(184,138,60,.45);
    box-shadow: 0 12px 28px rgba(79,59,56,.10);
}

/* ============================================================
   BOTÓN SIGUIENTE
   ============================================================*/

.story-button--next {
    flex: 1;
    max-width: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding-inline: 30px;
    color: #755020;
    border: 1px solid rgba(184,138,60,.58);
    background: linear-gradient( 135deg, rgba(255,255,255,.96), rgba(239,210,197,.96));
    box-shadow: 0 16px 36px rgba(117,80,32,.16), inset 0 0 0 3px rgba(255,255,255,.42);
}

/* ============================================================
   HOVER
   ============================================================*/

.story-button:hover {
    transform: translateY(-3px);
}

.story-button--previous:hover {
    box-shadow: 0 18px 34px rgba(79,59,56,.16);
}

.story-button--next:hover {
    box-shadow: 0 22px 42px rgba(117,80,32,.22), 0 0 0 5px rgba(232,201,138,.14);
}

.story-button:active {
    transform: translateY(0);
}

.story-button:disabled {
    opacity: .65;
    cursor: wait;
}

/* ============================================================
   ICONOS
   ============================================================*/

.story-button svg {
    width: 18px;
    height: 18px;
    flex: none;
}

/* ============================================================
   APARICIÓN
   ============================================================*/

.story-navigation {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s ease, transform .8s ease;
}

.reveal.is-visible .story-navigation {
    opacity: 1;
    transform: none;
    transition-delay: .65s;
}

/* ============================================================
   RESPONSIVE
   ============================================================*/

@media(max-width:560px) {

    .story-navigation {
        margin-top: 28px;
    }

    .story-navigation__buttons {
        gap: 8px;
    }

    .story-button {
        min-height: 50px;
    }

    .story-button--previous {
        width: 50px;
        padding: 0;
    }

    .story-button--next {
        max-width: none;
        padding-inline: 18px;
        font-size: 1rem;
    }

    .story-progress {
        font-size: .72rem;
        gap: 6px;
    }

        .story-progress i {
            width: 34px;
        }
}

/* ============================================================
   EFECTO DE LUZ ENTRE ESCENAS
   ============================================================*/

body.is-section-transitioning::after {
    animation: storyLightSweep .85s cubic-bezier(.22,.72,.22,1);
}

@keyframes storyLightSweep {

    0% {
        opacity: 0;
        transform: translate3d(-145vw,0,0) skewX(-12deg);
    }

    20% {
        opacity: .85;
    }

    70% {
        opacity: .72;
    }

    100% {
        opacity: 0;
        transform: translate3d(260vw,0,0) skewX(-12deg);
    }
}
/* ============================================================
   ANIMATED TEXT
   Sistema profesional de animación para textos
   Compatible con AnimatedText.razor
   ============================================================*/

.animated-text {
    display: inline-block;
    width: auto;
    max-width: 100%;
    vertical-align: baseline;
}

.animated-text__visual {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: .28em;
    row-gap: .10em;
}

.animated-text__word {
    display: inline-flex;
    white-space: nowrap;
    align-items: baseline;
}

.animated-text__letter {
    display: inline-block;
}

.animated-text__unit {
    opacity: 0;
    will-change: transform,opacity,filter;
    animation-fill-mode: forwards;
    animation-duration: .78s;
    animation-delay: calc(100ms + (var(--unit-index) * 38ms));
    animation-timing-function: cubic-bezier(.22,.72,.22,1);
}

/* ============================================================
   ASCENSO
   ============================================================*/

.animated-text--rise .animated-text__unit {
    transform: translateY(.75em);
    filter: blur(4px);
}

.reveal.letters-active
.animated-text--rise
.animated-text__unit,
.animated-text--immediate.animated-text--rise
.animated-text__unit {
    animation-name: animatedLetterRise;
}

/* ============================================================
   SLIDE
   ============================================================*/

.animated-text--slide .animated-text__unit {
    transform: translateX(-.6em);
    filter: blur(3px);
}

.reveal.letters-active
.animated-text--slide
.animated-text__unit,
.animated-text--immediate.animated-text--slide
.animated-text__unit {
    animation-name: animatedLetterSlide;
}

/* ============================================================
   GLOW
   ============================================================*/

.animated-text--glow .animated-text__unit {
    transform: translateY(.25em);
    filter: blur(5px);
}

.reveal.letters-active
.animated-text--glow
.animated-text__unit,
.animated-text--immediate.animated-text--glow
.animated-text__unit {
    animation-name: animatedLetterGlow;
    animation-duration: 1.05s;
}

/* ============================================================
   SOFT
   ============================================================*/

.animated-text--soft .animated-text__unit {
    transform: translateY(.35em);
    filter: blur(2px);
}

.reveal.letters-active
.animated-text--soft
.animated-text__unit,
.animated-text--immediate.animated-text--soft
.animated-text__unit {
    animation-name: animatedLetterSoft;
    animation-duration: .65s;
}

/* ============================================================
   AJUSTES PARA PORTADA
   ============================================================*/

.welcome-screen h1 .animated-text__visual {
    flex-wrap: nowrap;
    gap: .12em;
}

.welcome-screen .eyebrow .animated-text__visual {
    flex-wrap: nowrap;
}

.welcome-date .animated-text__visual {
    flex-wrap: nowrap;
}

/* ============================================================
   TITULOS
   ============================================================*/

.section-heading h2 {
    text-align: center;
}

    .section-heading h2 .animated-text {
        width: 100%;
    }

    .section-heading h2 .animated-text__visual {
        justify-content: center;
        line-height: 1.05;
    }

/* ============================================================
   RESPONSIVE
   ============================================================*/

@media(max-width:560px) {

    .animated-text__visual {
        gap: .15em;
    }

    .welcome-screen h1 .animated-text__visual {
        gap: .10em;
    }
}

/* ============================================================
   REDUCIR MOVIMIENTO
   ============================================================*/

@media(prefers-reduced-motion:reduce) {

    .animated-text__unit {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
}
/* ============================================================
   BLOQUE 4
   KEYFRAMES PROFESIONALES
   Compatible con Story Mode y AnimatedText
   ============================================================*/

/*==============================================================
  TEXTO - RISE
==============================================================*/

@keyframes animatedLetterRise {

    0% {
        opacity: 0;
        transform: translate3d(0,.75em,0);
        filter: blur(4px);
    }

    65% {
        opacity: 1;
        transform: translate3d(0,-.08em,0);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/*==============================================================
  TEXTO - SLIDE
==============================================================*/

@keyframes animatedLetterSlide {

    0% {
        opacity: 0;
        transform: translate3d(-.60em,0,0);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/*==============================================================
  TEXTO - GLOW
==============================================================*/

@keyframes animatedLetterGlow {

    0% {
        opacity: 0;
        transform: translateY(.20em);
        filter: blur(5px);
        text-shadow: none;
    }

    55% {
        opacity: 1;
        filter: none;
        text-shadow: 0 0 18px rgba(232,201,138,.95), 0 0 35px rgba(255,255,255,.90);
    }

    100% {
        opacity: 1;
        transform: none;
        filter: none;
        text-shadow: 0 4px 14px rgba(255,255,255,.65);
    }
}

/*==============================================================
  TEXTO - SOFT
==============================================================*/

@keyframes animatedLetterSoft {

    0% {
        opacity: 0;
        transform: translateY(.35em);
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/*==============================================================
  BRILLO DE BOTONES
==============================================================*/

@keyframes storyButtonGlow {

    from {
        box-shadow: 0 14px 28px rgba(184,138,60,.15);
    }

    to {
        box-shadow: 0 20px 40px rgba(184,138,60,.30), 0 0 22px rgba(232,201,138,.30);
    }
}

/*==============================================================
  BARRIDO DE LUZ
==============================================================*/

@keyframes storyLightSweep {

    0% {
        opacity: 0;
        transform: translate3d(-145vw,0,0) skewX(-12deg);
    }

    20% {
        opacity: .85;
    }

    70% {
        opacity: .72;
    }

    100% {
        opacity: 0;
        transform: translate3d(260vw,0,0) skewX(-12deg);
    }
}

/*==============================================================
  RESPIRACIÓN SUAVE
==============================================================*/

@keyframes floatingGlow {

    from {
        transform: translateY(0) scale(1);
    }

    to {
        transform: translateY(-8px) scale(1.03);
    }
}

/*==============================================================
  FLOTAR
==============================================================*/

@keyframes floating {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

/*==============================================================
  LATIDO SUAVE
==============================================================*/

@keyframes heartbeatSoft {

    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.05);
    }

    40% {
        transform: scale(.98);
    }

    60% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

/*==============================================================
  DESVANECER
==============================================================*/

@keyframes fadeInSoft {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*==============================================================
  APARICIÓN DESDE ABAJO
==============================================================*/

@keyframes riseSoft {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
/* ============================================================
   BLOQUE 5
   PREMIUM LUXURY EFFECTS
   Cristal • Oro • Profundidad • Partículas
   ============================================================*/

/*==============================================================
  FONDO PREMIUM
==============================================================*/

.page-shell {
    position: relative;
    overflow: hidden;
}

    .page-shell::before {
        content: "";
        position: fixed;
        inset: -15%;
        pointer-events: none;
        z-index: -5;
        opacity: .35;
        background: radial-gradient(circle at 15% 18%, rgba(255,255,255,.85), transparent 38%), radial-gradient(circle at 82% 26%, rgba(232,201,138,.22), transparent 40%), radial-gradient(circle at 50% 85%, rgba(255,255,255,.45), transparent 42%);
        filter: blur(40px);
    }

    /*==============================================================
  BRILLO DORADO
==============================================================*/

    .page-shell::after {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -4;
        opacity: .18;
        background-image: linear-gradient( 130deg, transparent, rgba(232,201,138,.08), transparent);
        animation: luxuryBackgroundMove 20s linear infinite;
    }

/*==============================================================
  TARJETAS
==============================================================*/

.glass-card,
.event-card,
.calendar-card,
.rsvp-form {
    position: relative;
    overflow: hidden;
}

    .glass-card::before,
    .event-card::before,
    .calendar-card::before,
    .rsvp-form::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 145deg, rgba(255,255,255,.26), transparent 30%, transparent 70%, rgba(255,255,255,.12));
        opacity: .55;
    }

    /*==============================================================
  BRILLO SUPERIOR
==============================================================*/

    .glass-card::after,
    .event-card::after,
    .calendar-card::after,
    .rsvp-form::after {
        content: "";
        position: absolute;
        top: 0;
        left: -140%;
        width: 70%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.45), transparent);
        transform: skewX(-20deg);
        pointer-events: none;
        transition: left 1.2s ease;
    }

    .glass-card:hover::after,
    .event-card:hover::after,
    .calendar-card:hover::after,
    .rsvp-form:hover::after {
        left: 180%;
    }

/*==============================================================
  BOTONES
==============================================================*/

.gold-button {
    position: relative;
    overflow: hidden;
}

    .gold-button::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,.38), transparent);
        transform: translateX(-120%);
    }

    .gold-button:hover::before {
        animation: buttonLuxurySweep .85s ease;
    }

/*==============================================================
  CORONA
==============================================================*/

.crown-mark {
    animation: floatingGlow 5s ease-in-out infinite;
}

/*==============================================================
  ORNAMENTO
==============================================================*/

.ornament {
    animation: floating 7s ease-in-out infinite;
}

/*==============================================================
  TARJETAS
==============================================================*/

.glass-card:hover,
.event-card:hover,
.calendar-card:hover {
    transform: translateY(-5px);
    transition: transform .45s ease, box-shadow .45s ease;
    box-shadow: 0 28px 60px rgba(95,61,54,.18), 0 0 45px rgba(232,201,138,.12);
}

/*==============================================================
  CONTADOR
==============================================================*/

.countdown div {
    transition: transform .35s ease, box-shadow .35s ease;
}

    .countdown div:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 36px rgba(184,138,60,.22);
    }

/*==============================================================
  ICONOS
==============================================================*/

.event-card__icon,
.dress-icon,
.gift-icon {
    animation: floating 6s ease-in-out infinite;
}

/*==============================================================
  MÚSICA
==============================================================*/

.music-button {
    transition: transform .30s ease, box-shadow .30s ease;
}

    .music-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 36px rgba(184,138,60,.20);
    }

/*==============================================================
  KEYFRAMES
==============================================================*/

@keyframes luxuryBackgroundMove {

    from {
        transform: translateX(-10%) rotate(0deg);
    }

    to {
        transform: translateX(10%) rotate(360deg);
    }
}

@keyframes buttonLuxurySweep {

    from {
        transform: translateX(-130%);
    }

    to {
        transform: translateX(180%);
    }
}
/* ============================================================
   BLOQUE 6
   CINEMATIC LUXURY
   Partículas • Destellos • Parallax • Premium
   ============================================================*/


/*==============================================================
  DESTELLOS DORADOS
==============================================================*/

.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    background: #fff;
    box-shadow: 0 0 12px rgba(255,255,255,.9), 0 0 28px rgba(232,201,138,.8);
    animation: sparkleFloat 5s linear infinite;
}



    /*==============================================================
  PARTÍCULAS GRANDES
==============================================================*/

    .sparkle.large {
        width: 14px;
        height: 14px;
        opacity: .75;
    }



    /*==============================================================
  PARTÍCULAS PEQUEÑAS
==============================================================*/

    .sparkle.small {
        width: 5px;
        height: 5px;
        opacity: .55;
    }



/*==============================================================
  BRILLO SOBRE EL NOMBRE
==============================================================*/

.welcome-screen h1 {
    position: relative;
}

    .welcome-screen h1::after {
        content: "";
        position: absolute;
        inset: -10px;
        pointer-events: none;
        background: radial-gradient(circle, rgba(255,255,255,.65), transparent 70%);
        opacity: 0;
        animation: nameGlowPulse 4s ease-in-out infinite;
    }



/*==============================================================
  EFECTO VIDRIO PREMIUM
==============================================================*/

.glass-card {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}



/*==============================================================
  PARALLAX SUAVE
==============================================================*/

.story-step {
    transform-style: preserve-3d;
}

.story-step__glow {
    transform: translateZ(-20px);
}



/*==============================================================
  EFECTO DE LUZ EN LOS TÍTULOS
==============================================================*/

.section h2 {
    position: relative;
}

    .section h2::after {
        content: "";
        position: absolute;
        left: -40%;
        top: 0;
        width: 35%;
        height: 100%;
        transform: skewX(-18deg);
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.45), transparent);
        animation: titleSweep 8s ease-in-out infinite;
    }



/*==============================================================
  CORONA
==============================================================*/

.crown-mark {
    position: relative;
}

    .crown-mark::before {
        content: "";
        position: absolute;
        inset: -18px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(232,201,138,.35), transparent 72%);
        z-index: -1;
        animation: crownAura 5s ease-in-out infinite;
    }



/*==============================================================
  BOTONES PREMIUM
==============================================================*/

.gold-button {
    overflow: hidden;
}

    .gold-button::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        border: 1px solid rgba(255,255,255,.28);
        pointer-events: none;
    }



/*==============================================================
  CONTADOR
==============================================================*/

.countdown strong {
    animation: numberBreath 3s ease-in-out infinite;
}



/*==============================================================
  TARJETAS
==============================================================*/

.event-card {
    transition: transform .45s ease, box-shadow .45s ease;
}

    .event-card:hover {
        transform: translateY(-6px) scale(1.015);
    }



/*==============================================================
  CALENDARIO
==============================================================*/

.selected-day {
    animation: selectedDayPulse 2.6s ease-in-out infinite;
}



/*==============================================================
  EFECTO SOBRE LA FOTO
==============================================================*/

.welcome-screen__image {
    animation: coverBreath 12s ease-in-out infinite alternate, imageGlow 8s ease-in-out infinite;
}



/*==============================================================
  KEYFRAMES
==============================================================*/

@keyframes sparkleFloat {

    0% {
        transform: translateY(30px) scale(.2);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(-180px) scale(1.3);
        opacity: 0;
    }
}



@keyframes crownAura {

    0%,100% {
        transform: scale(.9);
        opacity: .45;
    }

    50% {
        transform: scale(1.15);
        opacity: .9;
    }
}



@keyframes imageGlow {

    0%,100% {
        filter: brightness(.94) saturate(.92);
    }

    50% {
        filter: brightness(1) saturate(1);
    }
}



@keyframes titleSweep {

    0% {
        left: -45%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    35% {
        left: 120%;
        opacity: 0;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}



@keyframes numberBreath {

    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}



@keyframes selectedDayPulse {

    0%,100% {
        transform: scale(1);
        box-shadow: 0 8px 18px rgba(156,109,45,.28);
    }

    50% {
        transform: scale(1.12);
        box-shadow: 0 12px 34px rgba(184,138,60,.45);
    }
}



@keyframes nameGlowPulse {

    0%,100% {
        opacity: 0;
    }

    50% {
        opacity: .9;
    }
}



/*==============================================================
  MÓVIL
==============================================================*/

@media (max-width:560px) {

    .sparkle {
        transform: scale(.8);
    }
}
/*==========================================================
  BLOQUE 7
  CINEMATIC PARTICLES
==========================================================*/


/*---------------------------------------
 Fondo de partículas
---------------------------------------*/

.particle-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}



/*---------------------------------------
 Partículas
---------------------------------------*/

.floating-particle {
    position: absolute;
    bottom: -80px;
    border-radius: 50%;
    opacity: .45;
    background: radial-gradient(circle, rgba(255,255,255,.95), rgba(232,201,138,.55));
    animation: particleRise linear infinite;
}



    /* tamaños */

    .floating-particle.sm {
        width: 6px;
        height: 6px;
    }

    .floating-particle.md {
        width: 10px;
        height: 10px;
    }

    .floating-particle.lg {
        width: 18px;
        height: 18px;
    }



/*---------------------------------------
 Pétalos
---------------------------------------*/

.petal {
    position: absolute;
    width: 18px;
    height: 28px;
    border-radius: 60% 60% 60% 60%;
    background: linear-gradient( 160deg, #fff6ef, #edd4b3);
    opacity: .7;
    animation: petalFall linear infinite;
}



/*---------------------------------------
 Estrellas
---------------------------------------*/

.star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px #fff, 0 0 28px rgba(232,201,138,.8);
    animation: starBlink 3s ease-in-out infinite;
}



/*---------------------------------------
 Luz superior
---------------------------------------*/

.light-top {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,.65), transparent 72%);
    filter: blur(90px);
    opacity: .45;
}



/*---------------------------------------
 Glow inferior
---------------------------------------*/

.light-bottom {
    position: absolute;
    bottom: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 400px;
    background: radial-gradient(circle, rgba(232,201,138,.32), transparent);
    filter: blur(70px);
}



/*---------------------------------------
 Tarjetas flotando
---------------------------------------*/

.glass-card,
.event-card {
    animation: floatCard 8s ease-in-out infinite;
}

    .event-card:nth-child(even) {
        animation-delay: 2s;
    }



/*---------------------------------------
 Imagen portada
---------------------------------------*/

.welcome-screen__image {
    transform-origin: center;
    animation: coverBreath 12s ease-in-out infinite alternate, cinematicZoom 20s linear infinite;
}



/*---------------------------------------
 Calendario
---------------------------------------*/

.calendar-card {
    animation: calendarGlow 6s ease-in-out infinite;
}



/*---------------------------------------
 Countdown
---------------------------------------*/

.countdown div {
    animation: counterFloat 5s ease-in-out infinite;
}

    .countdown div:nth-child(2) {
        animation-delay: .5s;
    }

    .countdown div:nth-child(3) {
        animation-delay: 1s;
    }

    .countdown div:nth-child(4) {
        animation-delay: 1.5s;
    }



/*---------------------------------------
 Keyframes
---------------------------------------*/

@keyframes particleRise {

    from {
        transform: translateY(0) scale(.3);
        opacity: 0;
    }

    10% {
        opacity: .6;
    }

    to {
        transform: translateY(-120vh) scale(1.2);
        opacity: 0;
    }
}



@keyframes petalFall {

    from {
        transform: translateY(-120px) rotate(0deg);
    }

    to {
        transform: translateY(120vh) rotate(720deg) translateX(80px);
    }
}



@keyframes starBlink {

    0%,100% {
        opacity: .2;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}



@keyframes cinematicZoom {

    0% {
        transform: scale(1.02);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1.02);
    }
}



@keyframes floatCard {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}



@keyframes calendarGlow {

    0%,100% {
        box-shadow: 0 24px 70px rgba(95,61,54,.16);
    }


    50% {
        box-shadow: 0 28px 90px rgba(232,201,138,.35);
    }
}



@keyframes counterFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}



/*---------------------------------------
 Responsive
---------------------------------------*/

@media (max-width:768px) {

    .light-top {
        width: 550px;
    }

    .light-bottom {
        width: 450px;
    }
}
/*==============================================================
  BLOQUE 8
  PREMIUM 3D EXPERIENCE
==============================================================*/


/*==============================================================
  PROFUNDIDAD
==============================================================*/

.scene-3d {
    perspective: 1800px;
    transform-style: preserve-3d;
}

.depth-1 {
    transform: translateZ(10px);
}

.depth-2 {
    transform: translateZ(35px);
}

.depth-3 {
    transform: translateZ(70px);
}

.depth-4 {
    transform: translateZ(120px);
}



/*==============================================================
  TODAS LAS TARJETAS
==============================================================*/

.glass-card,
.event-card,
.calendar-card,
.rsvp-form {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .45s cubic-bezier(.22,.72,.22,1), box-shadow .45s ease;
}



    /*==============================================================
  REFLEJO DE VIDRIO
==============================================================*/

    .glass-card::before,
    .event-card::before,
    .calendar-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 115deg, transparent 0%, rgba(255,255,255,.35) 40%, rgba(255,255,255,.12) 48%, transparent 70% );
        transform: translateX(-160%);
    }



    .glass-card:hover::before,
    .event-card:hover::before,
    .calendar-card:hover::before {
        animation: glassSweep 1.4s ease;
    }



    /*==============================================================
  HOVER PREMIUM
==============================================================*/

    .glass-card:hover,
    .event-card:hover,
    .calendar-card:hover {
        transform: rotateX(4deg) rotateY(-4deg) translateY(-8px) scale(1.02);
    }



/*==============================================================
  FONDO 3D
==============================================================*/

.story-step {
    transform-style: preserve-3d;
}

    .story-step::before {
        animation: backgroundMove 20s linear infinite;
    }

    .story-step::after {
        animation: backgroundMoveReverse 26s linear infinite;
    }



/*==============================================================
  BOTONES
==============================================================*/

.gold-button {
    position: relative;
    overflow: hidden;
}



    .gold-button::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at center, rgba(255,255,255,.28), transparent 70% );
        opacity: 0;
        transition: .35s;
    }



    .gold-button:hover::before {
        opacity: 1;
    }



/*==============================================================
  TÍTULOS
==============================================================*/

.section h2 {
    transform-style: preserve-3d;
}



    .section h2:hover {
        transform: translateZ(30px) scale(1.02);
    }



/*==============================================================
  FOTO
==============================================================*/

.welcome-screen__image {
    transition: transform .5s ease;
}



/*==============================================================
  ORNAMENTO
==============================================================*/

.ornament {
    animation: ornamentFloat 7s ease-in-out infinite;
}



/*==============================================================
  CORONA
==============================================================*/

.crown-mark {
    animation: crownFloat 6s ease-in-out infinite;
}



/*==============================================================
  PARTÍCULAS
==============================================================*/

.sparkle {
    mix-blend-mode: screen;
}



/*==============================================================
  KEYFRAMES
==============================================================*/

@keyframes glassSweep {

    from {
        transform: translateX(-160%);
    }

    to {
        transform: translateX(170%);
    }
}



@keyframes ornamentFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}



@keyframes crownFloat {

    0%,100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(3deg);
    }
}



@keyframes backgroundMove {

    from {
        transform: translateX(0) translateY(0) scale(1);
    }

    to {
        transform: translateX(40px) translateY(-30px) scale(1.08);
    }
}



@keyframes backgroundMoveReverse {

    from {
        transform: translateX(0) translateY(0) scale(1);
    }

    to {
        transform: translateX(-45px) translateY(35px) scale(1.06);
    }
}



/*==============================================================
  EFECTO LUZ
==============================================================*/

.light-ray {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( 120deg, transparent, rgba(255,255,255,.08), transparent );
    animation: lightRay 10s linear infinite;
}



@keyframes lightRay {

    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(120%);
    }
}



/*==============================================================
  MÓVILES
==============================================================*/

@media(max-width:768px) {

    .glass-card:hover,
    .calendar-card:hover,
    .event-card:hover {
        transform: translateY(-4px) scale(1.01);
    }
}
/*==============================================================
  BLOQUE 9
  CINEMATIC STORY
==============================================================*/


/*==============================================================
ESCENA
==============================================================*/

.story-step {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}


    /*==============================================================
CAPA OSCURA PARA EL EFECTO CINEMATOGRÁFICO
==============================================================*/

    .story-step::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.10) 100%);
        opacity: .45;
    }



/*==============================================================
ENTRADA DE ESCENA
==============================================================*/

.story-enter {
    animation: storyEnter 1.25s cubic-bezier(.22,.72,.22,1) both;
}



@keyframes storyEnter {

    from {
        opacity: 0;
        transform: scale(1.06) translateY(80px);
        filter: blur(18px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}


/*==============================================================
SALIDA
==============================================================*/

.story-exit {
    animation: storyExit .85s ease forwards;
}



@keyframes storyExit {

    to {
        opacity: 0;
        transform: scale(.96) translateY(-40px);
        filter: blur(12px);
    }
}



/*==============================================================
TRANSICIÓN DE LUZ
==============================================================*/

.story-transition {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
}



    .story-transition.active {
        animation: storyFlash .9s ease;
    }



@keyframes storyFlash {

    0% {
        opacity: 0;
    }

    30% {
        opacity: .95;
        background: radial-gradient(circle, rgba(255,255,255,.95), rgba(232,201,138,.45), transparent);
    }

    100% {
        opacity: 0;
    }
}



/*==============================================================
FONDO CINEMÁTICO
==============================================================*/

.story-background {
    position: fixed;
    inset: 0;
    z-index: -10;
    background-size: cover;
    background-position: center;
    transition: transform 3s ease, filter 2s ease;
}



    .story-background.story-active {
        transform: scale(1.08);
    }



/*==============================================================
MOVIMIENTO LENTO
==============================================================*/

.story-step.active .glass-card {
    animation: cinematicFloat 10s ease-in-out infinite;
}



@keyframes cinematicFloat {

    0%,100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-10px) rotate(.4deg);
    }
}



/*==============================================================
TEXTO
==============================================================*/

.story-step.active h2 {
    animation: titleReveal 1.3s cubic-bezier(.22,.72,.22,1) both;
}



@keyframes titleReveal {

    from {
        letter-spacing: .5em;
        opacity: 0;
        transform: translateY(45px);
        filter: blur(10px);
    }

    to {
        letter-spacing: .02em;
        opacity: 1;
        transform: none;
        filter: none;
    }
}



/*==============================================================
PÁRRAFOS
==============================================================*/

.story-step.active p {
    animation: paragraphReveal 1.5s ease both;
}



@keyframes paragraphReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}



/*==============================================================
BOTONES
==============================================================*/

.story-step.active .gold-button {
    animation: buttonReveal 1.4s cubic-bezier(.22,.72,.22,1) both;
}



@keyframes buttonReveal {

    from {
        opacity: 0;
        transform: translateY(30px) scale(.9);
    }

    to {
        opacity: 1;
        transform: none;
    }
}



/*==============================================================
SCROLL
==============================================================*/

.story-step {
    scroll-margin-top: 0;
}



/*==============================================================
MÓVIL
==============================================================*/

@media(max-width:768px) {

    .story-enter {
        animation-duration: .95s;
    }
}
/*==================================================
    ESCENA ACTIVA
==================================================*/

.story-step {
    transition: opacity .8s ease, transform .8s ease, filter .8s ease;
}

    .story-step:not(.is-active-step) {
        opacity: .55;
        transform: scale(.97);
        filter: blur(2px);
    }

    .story-step.is-active-step {
        opacity: 1;
        transform: scale(1);
        filter: none;
    }

    .story-step.is-current {
        z-index: 5;
    }
/*==================================================
    EFECTO PREMIUM TARJETAS
==================================================*/

.story-card,
.glass-card,
.event-card,
.calendar-card,
.rsvp-form {
    transition: transform .45s cubic-bezier(.22,.72,.22,1), box-shadow .45s ease;
}

.story-step.is-active-step
.story-card,
.story-step.is-active-step
.glass-card,
.story-step.is-active-step
.event-card,
.story-step.is-active-step
.calendar-card,
.story-step.is-active-step
.rsvp-form {
    transform: translateY(-10px);
    box-shadow: 0 35px 90px rgba(0,0,0,.16);
}
.story-step.is-active-step
.section-heading {
    animation: sectionTitleEntrance 1s cubic-bezier(.22,.72,.22,1);
}

@keyframes sectionTitleEntrance {

    from {
        opacity: 0;
        transform: translateY(40px) scale(.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
/*==================================================
    PARALLAX PREMIUM
==================================================*/

.story-step {
    --parallax-offset: 0px;
}

.story-step__content {
    transform: translate3d( 0, calc(var(--parallax-offset) * .22), 0);
    transition: transform .15s linear;
    will-change: transform;
}

.story-step__glow {
    transform: translate3d( 0, calc(var(--parallax-offset) * -.45), 0) scale(.92);
    transition: transform .15s linear, opacity .8s ease;
}

.story-step::before {
    transform: translate3d( 0, calc(var(--parallax-offset) * -.30), 0);
    transition: transform .15s linear;
}

.story-step::after {
    transform: translate3d( 0, calc(var(--parallax-offset) * -.15), 0);
    transition: transform .15s linear;
}

.story-step.is-active-step
.story-card,
.story-step.is-active-step
.glass-card,
.story-step.is-active-step
.event-card,
.story-step.is-active-step
.calendar-card,
.story-step.is-active-step
.rsvp-form {
    transform: translateY(-10px) translate3d( 0, calc(var(--parallax-offset) * .12), 0);
}
/* ==========================================================================
   PORTADA ROYAL — DANNA SARAHI
   Parche aislado: no modifica las escenas internas de la invitación.
   ========================================================================== */

.welcome-screen--royal {
    --welcome-gold-light: #ffe4a5;
    --welcome-gold: #e7b85d;
    --welcome-gold-dark: #a97024;
    --welcome-cream: #fff7e9;
    --welcome-plum: #2b1622;
    --welcome-shadow: rgba(14, 7, 13, .82);
    background: var(--welcome-plum);
}

    /* --------------------------------------------------------------------------
   FOTOGRAFÍA
   -------------------------------------------------------------------------- */

    .welcome-screen--royal .welcome-screen__picture {
        background: radial-gradient( circle at 50% 30%, #70434b, #261620 72% );
    }

    .welcome-screen--royal .welcome-screen__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 42%;
        filter: saturate(1.04) contrast(1.04) brightness(.91);
        transform: scale(1.015);
        animation: royalCoverBreath 18s cubic-bezier(.37, 0, .23, 1) infinite alternate;
    }

    /* --------------------------------------------------------------------------
   VELO Y DEGRADADO
   Elimina el velo blanco del diseño anterior y crea profundidad oscura.
   -------------------------------------------------------------------------- */

    .welcome-screen--royal .welcome-screen__veil {
        z-index: 1;
        background: linear-gradient( 180deg, rgba(24, 12, 20, .18) 0%, rgba(24, 12, 20, .02) 30%, rgba(24, 12, 20, .04) 47%, rgba(28, 13, 22, .42) 65%, rgba(20, 10, 17, .86) 82%, rgba(14, 8, 14, .98) 100% ), radial-gradient( circle at 50% 31%, rgba(255, 221, 170, .22), transparent 37% ), radial-gradient( ellipse at center bottom, rgba(62, 27, 43, .15), rgba(18, 8, 15, .60) 80% );
        pointer-events: none;
    }

    /* Vignette suave para mantener la atención en el centro. */
    .welcome-screen--royal::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: radial-gradient( ellipse at 50% 39%, transparent 37%, rgba(20, 9, 16, .15) 67%, rgba(12, 6, 11, .48) 100% );
    }

    /* Marco dorado sutil. */
    .welcome-screen--royal::before {
        inset: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
        z-index: 4;
        border: 1px solid rgba(239, 192, 103, .52);
        border-radius: 4px;
        box-shadow: inset 0 0 0 3px rgba(255, 236, 195, .06), 0 0 30px rgba(218, 163, 77, .08);
    }

    /* --------------------------------------------------------------------------
   DISTRIBUCIÓN GENERAL
   -------------------------------------------------------------------------- */

    .welcome-screen--royal .welcome-screen__content {
        position: relative;
        z-index: 5;
        width: 100%;
        max-width: none;
        min-height: 100svh;
        padding: max(26px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

/* --------------------------------------------------------------------------
   MONOGRAMA DS
   -------------------------------------------------------------------------- */

.welcome-brand {
    position: absolute;
    top: max(27px, env(safe-area-inset-top));
    left: max(30px, env(safe-area-inset-left));
    z-index: 4;
    width: 96px;
    min-height: 96px;
    display: grid;
    place-items: center;
    color: var(--welcome-gold);
    filter: drop-shadow(0 5px 12px rgba(12, 5, 10, .42)) drop-shadow(0 0 18px rgba(232, 179, 83, .22));
}

.welcome-brand__crown {
    position: absolute;
    top: -4px;
    font-family: Georgia, serif;
    font-size: 1.4rem;
    line-height: 1;
    transform: rotate(-4deg);
}

.welcome-brand__initials {
    font-family: "Great Vibes", cursive;
    font-size: 4.2rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.08em;
}

.welcome-brand__spark {
    position: absolute;
    right: 1px;
    top: 44px;
    font-size: .8rem;
    animation: royalSparkle 2.8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   INDICADOR DE MÚSICA
   No controla el audio; informa que comenzará al abrir.
   -------------------------------------------------------------------------- */

.welcome-audio-hint {
    position: absolute;
    top: max(28px, env(safe-area-inset-top));
    right: max(28px, env(safe-area-inset-right));
    z-index: 4;
    display: grid;
    justify-items: center;
    gap: 7px;
    color: var(--welcome-gold-light);
    text-transform: uppercase;
}

.welcome-audio-hint__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244, 198, 111, .83);
    border-radius: 50%;
    color: var(--welcome-gold-light);
    background: rgba(30, 15, 24, .48);
    box-shadow: 0 0 0 4px rgba(231, 184, 93, .07), 0 8px 26px rgba(10, 4, 8, .35), 0 0 20px rgba(231, 184, 93, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: Georgia, serif;
    font-size: 1.55rem;
}

.welcome-audio-hint__text {
    font-family: "Cormorant Garamond", serif;
    font-size: .69rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: .12em;
}

/* --------------------------------------------------------------------------
   BLOQUE PRINCIPAL DE TEXTO
   -------------------------------------------------------------------------- */

.welcome-screen__copy {
    width: min(94vw, 760px);
    margin-top: auto;
    margin-inline: auto;
    padding-top: min(52svh, 560px);
    padding-bottom: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* "MIS XV AÑOS" */
.welcome-screen--royal .eyebrow {
    margin: 0 0 5px;
    color: var(--welcome-gold-light);
    font-size: clamp(.9rem, 2.5vw, 1.35rem);
    font-weight: 600;
    letter-spacing: .25em;
    text-shadow: 0 2px 10px rgba(12, 5, 9, .7), 0 0 14px rgba(239, 188, 91, .18);
}

/* Nombre principal */
.welcome-screen--royal h1 {
    position: relative;
    width: 100%;
    margin: 0;
    color: var(--welcome-gold-light);
    font-family: "Great Vibes", cursive;
    font-size: clamp(4rem, 14vw, 8rem);
    font-weight: 400;
    line-height: .84;
    white-space: nowrap;
    text-shadow: 0 3px 0 rgba(122, 69, 25, .72), 0 7px 18px rgba(9, 4, 8, .72), 0 0 26px rgba(242, 192, 99, .23);
    filter: drop-shadow(0 4px 8px rgba(11, 5, 9, .48));
}

    /*
   Neutraliza pseudo-elementos de efectos anteriores que pudieran
   colocar un brillo rectangular sobre el nombre.
*/
    .welcome-screen--royal h1::before,
    .welcome-screen--royal h1::after {
        content: none !important;
    }

/* Ornamento debajo del nombre */
.welcome-screen--royal .ornament {
    width: min(72vw, 490px);
    margin: 13px 0 15px;
    gap: 10px;
    color: var(--welcome-gold);
}

    .welcome-screen--royal .ornament span {
        background: linear-gradient( 90deg, transparent, rgba(232, 184, 91, .94) );
    }

        .welcome-screen--royal .ornament span:last-child {
            background: linear-gradient( 90deg, rgba(232, 184, 91, .94), transparent );
        }

    .welcome-screen--royal .ornament i {
        color: var(--welcome-gold-light);
        font-size: 1.25rem;
        text-shadow: 0 0 12px rgba(239, 189, 91, .38);
    }

/* Fecha */
.welcome-screen--royal .welcome-date {
    color: var(--welcome-gold-light);
    font-size: clamp(.92rem, 3vw, 1.45rem);
    font-weight: 600;
    letter-spacing: .13em;
    text-shadow: 0 3px 12px rgba(10, 4, 8, .72), 0 0 13px rgba(235, 183, 85, .18);
}

/* Pequeño ornamento situado debajo de la fecha */
.welcome-date-ornament {
    width: min(64vw, 335px);
    margin: 10px 0 11px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    color: var(--welcome-gold);
}

    .welcome-date-ornament i {
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(231, 184, 93, .78), transparent );
    }

    .welcome-date-ornament span {
        font-family: Georgia, serif;
        font-size: .9rem;
    }

/* Frase */
.welcome-screen--royal .welcome-phrase {
    margin: 0 0 16px;
    color: rgba(255, 247, 236, .96);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.05rem, 3.7vw, 1.52rem);
    font-style: normal;
    font-weight: 500;
    line-height: 1.18;
    text-shadow: 0 3px 12px rgba(8, 3, 7, .85);
}

/* --------------------------------------------------------------------------
   BOTÓN ABRIR
   -------------------------------------------------------------------------- */

.welcome-screen--royal .gold-button--hero {
    position: relative;
    width: min(86vw, 430px);
    min-height: 57px;
    margin-top: 0;
    padding: 13px 30px;
    overflow: hidden;
    border: 1px solid rgba(246, 202, 114, .88);
    color: var(--welcome-gold-light);
    background: linear-gradient( 180deg, rgba(70, 35, 45, .62), rgba(25, 13, 21, .78) );
    box-shadow: 0 0 0 4px rgba(224, 167, 74, .07), inset 0 1px 0 rgba(255, 236, 192, .20), 0 13px 34px rgba(5, 2, 5, .45), 0 0 24px rgba(231, 178, 80, .15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    animation: royalButtonGlow 2.8s ease-in-out infinite alternate;
}

    .welcome-screen--royal .gold-button--hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 110deg, transparent 25%, rgba(255, 226, 166, .20) 48%, transparent 70% );
        transform: translateX(-130%);
        animation: royalButtonSweep 4.5s ease-in-out infinite;
    }

    .welcome-screen--royal .gold-button--hero > span {
        position: relative;
        z-index: 2;
    }

    .welcome-screen--royal .gold-button--hero:hover,
    .welcome-screen--royal .gold-button--hero:focus-visible {
        transform: translateY(-3px) scale(1.01);
        color: #fff0c8;
        background: linear-gradient( 180deg, rgba(91, 45, 54, .73), rgba(29, 14, 23, .88) );
        box-shadow: 0 0 0 5px rgba(231, 184, 93, .11), 0 17px 38px rgba(5, 2, 5, .52), 0 0 32px rgba(231, 184, 93, .26);
    }

/* Flecha inferior */
.welcome-scroll-cue {
    height: 28px;
    margin-top: 4px;
    display: grid;
    place-items: center;
    color: var(--welcome-gold-light);
    font-family: Georgia, serif;
    font-size: 2.1rem;
    line-height: 1;
    text-shadow: 0 0 13px rgba(236, 183, 84, .42);
    animation: royalScrollCue 1.9s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   ANIMACIONES LOCALES
   -------------------------------------------------------------------------- */

@keyframes royalCoverBreath {
    from {
        transform: scale(1.015);
    }

    to {
        transform: scale(1.045);
    }
}

@keyframes royalSparkle {
    0%, 100% {
        opacity: .35;
        transform: scale(.75) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.25) rotate(30deg);
    }
}

@keyframes royalButtonGlow {
    from {
        box-shadow: 0 0 0 2px rgba(224, 167, 74, .05), inset 0 1px 0 rgba(255, 236, 192, .16), 0 12px 30px rgba(5, 2, 5, .42), 0 0 13px rgba(231, 178, 80, .10);
    }

    to {
        box-shadow: 0 0 0 5px rgba(224, 167, 74, .08), inset 0 1px 0 rgba(255, 236, 192, .22), 0 16px 39px rgba(5, 2, 5, .50), 0 0 29px rgba(231, 178, 80, .23);
    }
}

@keyframes royalButtonSweep {
    0%, 55% {
        transform: translateX(-135%);
    }

    78%, 100% {
        transform: translateX(145%);
    }
}

@keyframes royalScrollCue {
    0%, 100% {
        opacity: .45;
        transform: translateY(-3px);
    }

    50% {
        opacity: 1;
        transform: translateY(5px);
    }
}

/* --------------------------------------------------------------------------
   TELÉFONOS
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
    .welcome-screen--royal .welcome-screen__image {
        object-position: center 41%;
    }

    .welcome-brand {
        top: max(20px, env(safe-area-inset-top));
        left: max(21px, env(safe-area-inset-left));
        width: 72px;
        min-height: 72px;
    }

    .welcome-brand__initials {
        font-size: 3.25rem;
    }

    .welcome-brand__crown {
        top: -2px;
        font-size: 1.05rem;
    }

    .welcome-brand__spark {
        top: 34px;
        font-size: .65rem;
    }

    .welcome-audio-hint {
        top: max(20px, env(safe-area-inset-top));
        right: max(20px, env(safe-area-inset-right));
    }

    .welcome-audio-hint__icon {
        width: 46px;
        height: 46px;
        font-size: 1.25rem;
    }

    .welcome-audio-hint__text {
        font-size: .58rem;
    }

    .welcome-screen__copy {
        width: 100%;
        padding-top: 52svh;
        padding-bottom: 0;
    }

    .welcome-screen--royal h1 {
        font-size: clamp(3.6rem, 17vw, 5.4rem);
    }

    .welcome-screen--royal .ornament {
        margin-block: 8px 11px;
    }

    .welcome-date-ornament {
        margin-block: 7px 9px;
    }

    .welcome-screen--royal .welcome-phrase {
        margin-bottom: 13px;
    }

    .welcome-screen--royal .gold-button--hero {
        min-height: 53px;
    }
}

/* --------------------------------------------------------------------------
   PANTALLAS HORIZONTALES Y LAPTOPS
   Comprime el bloque inferior para que no salga del viewport.
   -------------------------------------------------------------------------- */

@media (min-width: 760px) and (orientation: landscape) {
    .welcome-screen--royal .welcome-screen__image {
        object-position: center 37%;
    }

    .welcome-screen__copy {
        width: min(84vw, 680px);
        padding-top: 39svh;
    }

    .welcome-screen--royal .eyebrow {
        font-size: .92rem;
    }

    .welcome-screen--royal h1 {
        font-size: clamp(4.4rem, 7.3vw, 6.8rem);
    }

    .welcome-screen--royal .ornament {
        margin-block: 7px 9px;
    }

    .welcome-screen--royal .welcome-date {
        font-size: 1.02rem;
    }

    .welcome-date-ornament {
        margin-block: 6px 8px;
    }

    .welcome-screen--royal .welcome-phrase {
        margin-bottom: 11px;
        font-size: 1.15rem;
    }

    .welcome-screen--royal .gold-button--hero {
        width: min(390px, 58vw);
        min-height: 50px;
    }

    .welcome-scroll-cue {
        height: 22px;
        font-size: 1.7rem;
    }
}

/* Pantallas con poca altura. */
@media (max-height: 720px) {
    .welcome-screen__copy {
        padding-top: 34svh;
    }

    .welcome-screen--royal h1 {
        font-size: clamp(3.7rem, 10vw, 5.4rem);
    }

    .welcome-screen--royal .ornament {
        margin-block: 5px 7px;
    }

    .welcome-date-ornament {
        margin-block: 5px 6px;
    }

    .welcome-screen--royal .welcome-phrase {
        margin-bottom: 8px;
        font-size: 1rem;
    }

    .welcome-screen--royal .gold-button--hero {
        min-height: 48px;
    }

    .welcome-scroll-cue {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   ACCESIBILIDAD: REDUCIR MOVIMIENTO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .welcome-screen--royal .welcome-screen__image,
    .welcome-brand__spark,
    .welcome-screen--royal .gold-button--hero,
    .welcome-screen--royal .gold-button--hero::before,
    .welcome-scroll-cue {
        animation: none !important;
    }
}