/* =====================================================
   ALICIA WONDERLAND — Template CSS v3.0  (2026 Edition)
   Dark, editorial, elegantly surreal
   Diseñado para inxvita · premium XV template
   ===================================================== */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Great+Vibes&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ─────────────────────────────────────────────────────
   Design Tokens
────────────────────────────────────────────────────── */
:root {
    /* Brand */
    --wonder-gold:        #d4af37;
    --wonder-gold-light:  #e8cc72;
    --wonder-gold-dark:   #a07820;
    --wonder-gold-soft:   rgba(212,175,55,.14);
    --wonder-gold-glow:   rgba(212,175,55,.35);
    --wonder-emerald:     #2e8b57;
    --wonder-violet:      #4a2c7a;
    --wonder-violet-soft: rgba(74,44,122,.18);
    --wonder-tea:         #f4e4c1;
    --wonder-deep:        #06040b;

    /* Text */
    --wonder-text:        #f7f1e5;
    --wonder-text-muted:  rgba(247,241,229,.74);
    --wonder-text-soft:   rgba(247,241,229,.48);

    /* Effects */
    --glow-wonder:        0 0 32px rgba(212,175,55,.30);
    --glow-strong:        0 0 55px rgba(212,175,55,.50);
    --shadow-deep:        0 40px 80px rgba(0,0,0,.70);
    --shadow-card:        0 20px 50px rgba(0,0,0,.55);
    --border-gold:        1px solid rgba(212,175,55,.28);
    --border-gold-strong: 1px solid rgba(212,175,55,.55);
    --glass:              rgba(255,255,255,.035);
    --glass-hover:        rgba(255,255,255,.06);

    /* Typography */
    --ff-display: 'Cinzel','Cormorant Garamond',serif;
    --ff-body:    'Cormorant Garamond',Georgia,serif;
    --ff-ui:      'Manrope',system-ui,sans-serif;
    --ff-script:  'Great Vibes',cursive;

    /* Motion */
    --ease-spring:    cubic-bezier(0.34,1.56,0.64,1);
    --ease-out:       cubic-bezier(0.16,1,0.3,1);
    --float-dur:      6.5s;

    /* Layout */
    --r-xl:  2.8rem;
    --r-lg:  2rem;
    --r-md:  1.4rem;
    --r-sm:  0.9rem;
    --pad-y: clamp(4rem,8vw,7rem);
    --pad-x: clamp(1.25rem,5vw,3.5rem);
    --inner: 72rem;
}

/* ─────────────────────────────────────────────────────
   Body shell
────────────────────────────────────────────────────── */
body.invitation-shell--alicia-wonderland {
    background:
        radial-gradient(ellipse 90% 45% at 50% -5%,  rgba(212,175,55,.14), transparent 55%),
        radial-gradient(ellipse 55% 55% at 12%  70%,  rgba(74,44,122,.20),  transparent 55%),
        radial-gradient(ellipse 50% 50% at 88%  30%,  rgba(46,139,87,.10),  transparent 50%),
        linear-gradient(180deg, #07050c 0%, #0c0912 55%, #07050b 100%);
    color: var(--wonder-text);
    font-family: var(--ff-ui);
}

body.invitation-shell--alicia-wonderland .watermark {
    background: rgba(8,6,13,.88);
    color: var(--wonder-tea);
    border: 1px solid rgba(212,175,55,.20);
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

/* ─────────────────────────────────────────────────────
   Template root
────────────────────────────────────────────────────── */
.wonder-template {
    position: relative;
    z-index: 1;
    color: var(--wonder-text);
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Grain overlay — muy sutil */
.wonder-template::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 300px 300px;
}

.wonder-template * { box-sizing: border-box; }
.wonder-template a  { text-decoration: none; }

/* ─────────────────────────────────────────────────────
   Labels / Kickers
────────────────────────────────────────────────────── */
.wonder-kicker,
.wonder-section-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .85rem;
    font-family: var(--ff-ui);
    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--wonder-gold);
}

.wonder-section-label::before {
    content: '\2726';
    font-size: .58rem;
    opacity: .75;
}

/* ─────────────────────────────────────────────────────
   Sections
────────────────────────────────────────────────────── */
.wonder-section {
    position: relative;
    padding: var(--pad-y) var(--pad-x);
    overflow: hidden;
}

.wonder-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.wonder-section-actions,
.wonder-hero__actions,
.wonder-rsvp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

/* ─────────────────────────────────────────────────────
   Typography
────────────────────────────────────────────────────── */
.wonder-title,
.wonder-section-title {
    margin: 0;
    font-family: var(--ff-display);
    line-height: .95;
    letter-spacing: -.03em;
    text-wrap: balance;
}

/* Gradient dorado metálico animado en el nombre */
.wonder-title {
    font-size: clamp(3.4rem,10vw,7.8rem);
    font-weight: 700;
    background: linear-gradient(
        130deg,
        #f4e4c1 0%,
        var(--wonder-gold) 28%,
        #fff8e7 50%,
        var(--wonder-gold) 72%,
        var(--wonder-gold-light) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: wonder-shimmer 6s linear infinite;
    filter: drop-shadow(0 0 28px rgba(212,175,55,.22));
}

.wonder-section-title {
    font-size: clamp(1.9rem,4.5vw,3.1rem);
    font-weight: 600;
    color: var(--wonder-tea);
    line-height: 1.0;
}

.wonder-subtitle,
.wonder-section-copy {
    margin: 0;
    font-family: var(--ff-body);
    font-size: clamp(1rem,1.4vw,1.15rem);
    line-height: 1.95;
    color: var(--wonder-text-muted);
    letter-spacing: .01em;
}

.wonder-subtitle { max-width: 36rem; margin-top: 1rem; }

/* ─────────────────────────────────────────────────────
   Buttons
────────────────────────────────────────────────────── */
.wonder-button,
.wonder-inline-link {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3.2rem;
    padding: .88rem 1.6rem;
    border-radius: 999px;
    font-family: var(--ff-ui);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    white-space: nowrap;
    transition:
        transform  280ms var(--ease-spring),
        box-shadow 280ms ease,
        border-color 240ms ease,
        background-color 240ms ease;
}

.wonder-button:hover,
.wonder-inline-link:hover { transform: translateY(-3px) scale(1.02); }

.wonder-button:active { transform: translateY(0) scale(.98); }

.wonder-button--primary {
    background: linear-gradient(130deg, var(--wonder-gold-light), var(--wonder-gold), var(--wonder-gold-dark));
    color: #100c07;
    border: 1px solid rgba(255,235,170,.38);
    box-shadow: var(--glow-wonder), 0 8px 22px rgba(0,0,0,.45);
    font-weight: 800;
}

.wonder-button--primary:hover {
    box-shadow: var(--glow-strong), 0 14px 32px rgba(0,0,0,.45);
}

.wonder-button--ghost {
    background: rgba(255,255,255,.04);
    color: var(--wonder-tea);
    border: var(--border-gold);
    backdrop-filter: blur(8px);
}

.wonder-button--ghost:hover {
    background: rgba(212,175,55,.08);
    border-color: rgba(212,175,55,.55);
}

/* Inline link  */
.wonder-inline-link {
    min-height: unset;
    padding: 0;
    border-radius: 0;
    font-family: var(--ff-ui);
    font-size: .85rem;
    font-weight: 600;
    color: var(--wonder-gold);
    border-bottom: 1px solid rgba(212,175,55,.32);
    transition: color 200ms ease, border-color 200ms ease;
    display: inline;
    margin-top: .75rem;
}

.wonder-inline-link:hover {
    color: var(--wonder-tea);
    border-color: var(--wonder-tea);
    transform: none;
}

/* ─────────────────────────────────────────────────────
   Glass Panel
────────────────────────────────────────────────────── */
.wonder-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem,4.5vw,3rem);
    background: linear-gradient(
        155deg,
        rgba(22,14,32,.94),
        rgba(11,8,18,.90) 60%,
        rgba(16,10,26,.94)
    );
    border: var(--border-gold);
    border-radius: var(--r-lg);
    backdrop-filter: blur(24px);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(212,175,55,.14), inset 0 -1px 0 rgba(0,0,0,.5);
}

/* Top shimmer line */
.wonder-panel::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.7), rgba(212,175,55,.9), rgba(212,175,55,.7), transparent);
    pointer-events: none;
}

/* Pattern overlay */
.wonder-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(212,175,55,.09), transparent),
        url('../img/wonderland-hero-pattern.svg') center/cover no-repeat;
    opacity: .22;
    border-radius: inherit;
}

.wonder-panel > * { position: relative; z-index: 1; }

.wonder-panel--compact {
    max-width: 52rem;
    margin: 0 auto;
    text-align: center;
}

.wonder-panel--rsvp {
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}

/* ─────────────────────────────────────────────────────
   Music embed
────────────────────────────────────────────────────── */
.wonder-music-embed {
    width: 100%;
    margin: 1.5rem 0 2rem;
    border-radius: var(--r-md);
    overflow: hidden;
    background: rgba(0,0,0,.4);
    border: var(--border-gold);
}

.wonder-music-embed iframe { display: block; width: 100%; }

.wonder-spotify-embed { width: 100%; min-height: 152px; }
.wonder-spotify-embed iframe { display: block; width: 100%; border: 0; }

/* ─────────────────────────────────────────────────────
   HERO — Full-width cinematic, sin border-radius
────────────────────────────────────────────────────── */
.wonder-hero {
    position: relative;
    min-height: min(100dvh, 65rem);
    padding: clamp(2.5rem,6vw,4rem) var(--pad-x) clamp(3rem,7vw,5rem);
    overflow: hidden;
    background:
        radial-gradient(ellipse 75% 55% at 50%  0%, rgba(212,175,55,.18), transparent 55%),
        radial-gradient(ellipse 45% 50% at  8%  65%, rgba(74,44,122,.25),  transparent 55%),
        radial-gradient(ellipse 40% 45% at 92%  35%, rgba(74,44,122,.18),  transparent 50%),
        radial-gradient(ellipse 30% 30% at 15%  20%, rgba(46,139,87,.10),  transparent 45%),
        linear-gradient(180deg, rgba(10,7,17,.97) 0%, rgba(6,4,12,.99) 100%);
}

/* Top gold line */
.wonder-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--wonder-gold) 20%, rgba(212,175,55,.6) 50%, var(--wonder-gold) 80%, transparent 100%);
    pointer-events: none;
}

/* Ambient blobs */
.wonder-hero__layer {
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(88px);
    opacity: .55;
}

.wonder-hero__layer--mist {
    top: -10rem; left: -6rem;
    width: 32rem; height: 32rem;
    background: radial-gradient(circle, rgba(212,175,55,.26), rgba(212,175,55,.05));
}

.wonder-hero__layer--emerald {
    right: -8rem; bottom: -2rem;
    width: 28rem; height: 28rem;
    background: radial-gradient(circle, rgba(74,44,122,.38), rgba(46,139,87,.08));
}

/* ─── Floating Cards ─── */
.wonder-cards-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.floating-card {
    position: absolute;
    width: clamp(3rem,6.5vw,5.2rem);
    aspect-ratio: .72;
    border-radius: 1rem;
    border: 1px solid rgba(212,175,55,.30);
    background: linear-gradient(160deg, rgba(30,18,48,.88), rgba(12,8,22,.82));
    box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(212,175,55,.14);
    opacity: .62;
    animation: wonder-float var(--float-dur) ease-in-out infinite;
    backdrop-filter: blur(4px);
}

.floating-card--heart,
.floating-card--spade {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 58%;
}

.floating-card--heart  { background-image: url('../img/playing-card-heart.svg'); }
.floating-card--spade  { background-image: url('../img/playing-card-spade.svg'); }
.floating-card--glyph  {
    display: grid;
    place-items: center;
    color: rgba(244,228,193,.72);
    font-size: 1.7rem;
}

.floating-card--one   { top: 8%;   left:  3%;   animation-delay:   0s; }
.floating-card--two   { top: 13%;  right: 8%;   animation-delay: -1.4s; }
.floating-card--three { bottom: 20%; left: 7%;  animation-delay: -2.8s; }
.floating-card--four  { bottom: 10%; right: 5%; animation-delay: -3.3s; }
.floating-card--five  { top: 44%;  left: 53%;   animation-delay: -4.7s; opacity: .30; }

/* ─── Hero Grid ─── */
.wonder-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(2rem,4vw,3rem);
    align-items: center;
    max-width: var(--inner);
    margin: 0 auto;
}

.wonder-hero__copy { max-width: 46rem; }

/* ─── Hero Facts — Bento style ─── */
.wonder-hero__facts {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .75rem;
    margin: 1.75rem 0;
}

.wonder-fact {
    padding: 1rem 1.1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(212,175,55,.22);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
    transition: border-color 250ms ease, background-color 250ms ease;
}

.wonder-fact:hover {
    border-color: rgba(212,175,55,.40);
    background: rgba(212,175,55,.06);
}

.wonder-fact span {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--ff-ui);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--wonder-text-soft);
}

.wonder-fact strong {
    display: block;
    font-family: var(--ff-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wonder-tea);
}

/* ─── Hero Frame ─── */
.wonder-hero__frame {
    position: relative;
    min-height: clamp(22rem,50vw,40rem);
    margin: 0;
    padding: 1.4rem;
    border-radius: 47% 47% 22% 22% / 37% 37% 15% 15%;
    background:
        radial-gradient(ellipse at top, rgba(212,175,55,.22), transparent 45%),
        linear-gradient(180deg, rgba(24,15,36,.98), rgba(10,8,17,.97));
    box-shadow: 0 40px 80px rgba(0,0,0,.60), 0 0 0 1px rgba(212,175,55,.24);
}

.wonder-hero__frame::before {
    content: '';
    position: absolute;
    inset: .6rem;
    background: url('../img/golden-frame.svg') center/contain no-repeat;
    opacity: .86;
    pointer-events: none;
    z-index: 2;
}

.wonder-hero__portrait {
    position: absolute;
    inset: 1.2rem;
    overflow: hidden;
    border-radius: 44% 44% 22% 22% / 33% 33% 17% 17%;
    background: rgba(255,255,255,.04);
    z-index: 1;
}

.wonder-hero__portrait img,
.wonder-lightbox-link { display: block; width: 100%; height: 100%; }

.wonder-hero__portrait img {
    object-fit: cover;
    transition: transform 600ms ease;
}

.wonder-hero__frame:hover .wonder-hero__portrait img { transform: scale(1.04); }

.wonder-hero__portrait.is-empty {
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at top, rgba(212,175,55,.26), transparent 48%),
        linear-gradient(180deg, rgba(20,13,30,.97), rgba(9,7,15,.97));
}

.wonder-hero__placeholder {
    padding: 2rem;
    text-align: center;
    color: var(--wonder-tea);
    font-family: var(--ff-display);
    font-size: 1.05rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .65;
}

.wonder-hero__caption {
    position: absolute;
    right: 1.5rem;
    bottom: 1.3rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem 1.1rem;
    border-radius: 999px;
    background: rgba(11,8,18,.90);
    border: 1px solid rgba(212,175,55,.22);
    backdrop-filter: blur(14px);
    font-family: var(--ff-ui);
    font-size: .76rem;
    color: var(--wonder-text-muted);
    z-index: 3;
}

.wonder-hero__caption strong {
    color: var(--wonder-gold);
    font-size: .9rem;
    font-weight: 700;
}

/* ─────────────────────────────────────────────────────
   Quote
────────────────────────────────────────────────────── */
.wonder-quote {
    position: relative;
    margin: 2rem 0 0;
    padding: 1.5rem 1.5rem 1.5rem 3.2rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(212,175,55,.18);
    background: rgba(212,175,55,.04);
}

.wonder-quote__mark {
    position: absolute;
    top: .4rem; left: 1rem;
    font-family: var(--ff-script);
    font-size: 3.5rem;
    line-height: 1;
    color: rgba(212,175,55,.38);
}

.wonder-quote p {
    margin: 0;
    font-family: var(--ff-body);
    font-size: 1.1rem;
    font-style: italic;
    line-height: 2;
    color: var(--wonder-text-muted);
}

/* ─────────────────────────────────────────────────────
   Countdown
────────────────────────────────────────────────────── */
.wonder-countdown {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1rem;
    max-width: 56rem;
    margin: 0 auto;
}

.wonder-countdown-card {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1rem 1.5rem;
    text-align: center;
    border-radius: 1.8rem;
    border: 1px solid rgba(212,175,55,.22);
    background: linear-gradient(155deg, rgba(26,18,40,.93), rgba(12,9,20,.91));
    box-shadow: 0 20px 44px rgba(0,0,0,.38), inset 0 1px 0 rgba(212,175,55,.18);
    transition: border-color 300ms ease, box-shadow 300ms ease;
}

.wonder-countdown-card:hover {
    border-color: rgba(212,175,55,.42);
    box-shadow: 0 20px 44px rgba(0,0,0,.38), var(--glow-wonder);
}

.wonder-countdown-card::before {
    content: '';
    position: absolute;
    inset: .8rem;
    border-radius: 1.2rem;
    border: 1px dashed rgba(212,175,55,.16);
    pointer-events: none;
}

.wonder-countdown-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.5), transparent);
}

.wonder-countdown-value {
    display: block;
    font-family: var(--ff-display);
    font-size: clamp(2.4rem,7vw,3.8rem);
    font-weight: 700;
    line-height: 1;
    color: var(--wonder-tea);
    letter-spacing: -.02em;
}

.wonder-countdown-label {
    display: block;
    margin-top: .65rem;
    font-family: var(--ff-ui);
    font-size: .66rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--wonder-text-soft);
}

.wonder-countdown-card--seconds .wonder-countdown-value.is-live {
    animation: wonder-pulse 1.8s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────
   Locations
────────────────────────────────────────────────────── */
.wonder-location-grid {
    display: grid;
    gap: 1rem;
    max-width: var(--inner);
    margin: 0 auto;
}

.wonder-location-card {
    position: relative;
    overflow: hidden;
    padding: 1.6rem;
    border-radius: var(--r-md);
    border: 1px solid rgba(212,175,55,.20);
    background: linear-gradient(155deg, rgba(22,14,34,.90), rgba(11,8,20,.88));
    box-shadow: 0 18px 44px rgba(0,0,0,.32);
    transition: transform 280ms var(--ease-spring), border-color 280ms ease, box-shadow 280ms ease;
}

.wonder-location-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212,175,55,.40);
    box-shadow: 0 26px 52px rgba(0,0,0,.38), var(--glow-wonder);
}

.wonder-location-card::after {
    content: '';
    position: absolute;
    width: 6rem; height: 6rem;
    right: -1rem; bottom: -1rem;
    background: url('../img/teapot.svg') center/contain no-repeat;
    opacity: .07;
    pointer-events: none;
    filter: saturate(0);
}

.wonder-location-card__type {
    display: inline-block;
    margin-bottom: .85rem;
    font-family: var(--ff-ui);
    font-size: .68rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--wonder-gold);
}

.wonder-location-card__title {
    display: flex;
    gap: .7rem;
    align-items: center;
    margin-bottom: .65rem;
}

.wonder-location-card__title i {
    color: var(--wonder-gold);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.wonder-location-card__title strong {
    font-family: var(--ff-body);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--wonder-tea);
}

.wonder-location-card__address,
.wonder-location-card__note {
    margin: 0 0 .4rem;
    font-family: var(--ff-body);
    font-size: 1rem;
    color: var(--wonder-text-muted);
    line-height: 1.75;
}

/* ─────────────────────────────────────────────────────
   Timeline
────────────────────────────────────────────────────── */
.wonder-timeline {
    position: relative;
    display: grid;
    gap: 1.25rem;
    max-width: var(--inner);
    margin: 0 auto;
}

.wonder-timeline::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 1.35rem;
    border-left: 1px dashed rgba(212,175,55,.32);
}

.wonder-timeline-item {
    position: relative;
    padding-left: 3.6rem;
}

.wonder-timeline-marker {
    position: absolute;
    top: 1.1rem;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(212,175,55,.28), rgba(212,175,55,.08));
    border: 1px solid rgba(212,175,55,.34);
    color: var(--wonder-gold);
    font-family: var(--ff-display);
    font-size: .88rem;
    font-weight: 700;
    box-shadow: 0 0 18px rgba(212,175,55,.16);
}

.wonder-timeline-card {
    padding: 1.4rem 1.4rem 1.5rem;
    border-radius: 1.6rem;
    border: 1px solid rgba(212,175,55,.18);
    background: rgba(255,255,255,.03);
    backdrop-filter: blur(10px);
    transition: border-color 250ms ease, box-shadow 250ms ease;
}

.wonder-timeline-card:hover {
    border-color: rgba(212,175,55,.30);
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.wonder-timeline-time {
    display: inline-flex;
    margin-bottom: .55rem;
    font-family: var(--ff-ui);
    font-size: .70rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--wonder-gold);
    font-weight: 700;
}

.wonder-timeline-card h3 {
    margin: 0 0 .45rem;
    font-family: var(--ff-body);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--wonder-tea);
}

.wonder-timeline-card p {
    margin: 0;
    font-family: var(--ff-body);
    font-size: 1rem;
    color: var(--wonder-text-muted);
    line-height: 1.8;
}

/* ─────────────────────────────────────────────────────
   Dress Code
────────────────────────────────────────────────────── */
.wonder-dress-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 1rem;
    max-width: var(--inner);
    margin: 0 auto;
}

.wonder-dress-card {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1.5rem;
    min-height: 14rem;
    border-radius: var(--r-md);
    border: 1px solid rgba(212,175,55,.22);
    background: linear-gradient(155deg, rgba(22,14,34,.90), rgba(11,8,20,.88));
    box-shadow: 0 18px 44px rgba(0,0,0,.32);
    transition: transform 280ms var(--ease-spring), border-color 280ms ease, box-shadow 280ms ease;
}

.wonder-dress-card:hover {
    transform: translateY(-6px) rotate(.4deg);
    border-color: rgba(212,175,55,.42);
    box-shadow: 0 26px 52px rgba(0,0,0,.38), var(--glow-wonder);
}

.wonder-dress-card::before {
    content: '';
    position: absolute;
    inset: 1rem;
    border-radius: .9rem;
    border: 1px solid rgba(212,175,55,.13);
    pointer-events: none;
}

.wonder-dress-card__label {
    display: inline-block;
    margin-bottom: .85rem;
    font-family: var(--ff-ui);
    font-size: .68rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--wonder-gold);
}

.wonder-dress-card strong {
    display: block;
    margin-bottom: .65rem;
    font-family: var(--ff-body);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--wonder-tea);
    line-height: 1.2;
}

.wonder-dress-card p {
    color: var(--wonder-text-muted);
    line-height: 1.8;
    font-family: var(--ff-body);
    font-size: 1rem;
}

.wonder-dress-card--heart::after,
.wonder-dress-card--spade::after,
.wonder-dress-card--club::after {
    content: '';
    position: absolute;
    width: 5rem; height: 5rem;
    right: -.8rem; bottom: -.6rem;
    opacity: .10;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.wonder-dress-card--heart::after { background-image: url('../img/playing-card-heart.svg'); }
.wonder-dress-card--spade::after { background-image: url('../img/playing-card-spade.svg'); }
.wonder-dress-card--club::after {
    content: '\2663';
    display: grid;
    place-items: center;
    font-size: 4rem;
    color: var(--wonder-tea);
    background-image: none;
}

.wonder-dress-visual {
    margin: 0;
    min-height: 18rem;
    overflow: hidden;
    border-radius: var(--r-md);
    border: 1px solid rgba(212,175,55,.22);
    background: rgba(255,255,255,.03);
    grid-column: span 2;
}

.wonder-dress-visual img { width: 100%; height: 100%; object-fit: cover; }

/* ─────────────────────────────────────────────────────
   Court of Honor
────────────────────────────────────────────────────── */
.wonder-party-board {
    display: grid;
    gap: 1.5rem;
    max-width: var(--inner);
    margin: 0 auto;
}

.wonder-party-group {
    position: relative;
    padding: 1.75rem;
    border-radius: var(--r-lg);
    border: 1px solid rgba(212,175,55,.20);
    background: linear-gradient(155deg, rgba(20,13,30,.90), rgba(10,7,18,.88));
}

.wonder-party-group::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.45), transparent);
    border-radius: inherit;
}

.wonder-party-group__head { margin-bottom: 1.25rem; }

.wonder-party-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(155px,100%),1fr));
    gap: 1rem;
}

.wonder-party-card {
    position: relative;
    overflow: hidden;
    padding: 1.4rem 1.2rem;
    border-radius: var(--r-md);
    border: 1px solid rgba(212,175,55,.18);
    background: linear-gradient(155deg, rgba(22,14,34,.90), rgba(11,8,20,.88));
    text-align: center;
    transition: transform 280ms var(--ease-spring), border-color 280ms ease, box-shadow 280ms ease;
}

.wonder-party-card:hover {
    transform: translateY(-5px);
    border-color: rgba(212,175,55,.38);
    box-shadow: 0 20px 40px rgba(0,0,0,.32), var(--glow-wonder);
}

.wonder-party-card:nth-child(even) { transform: translateY(.5rem); }
.wonder-party-card:nth-child(even):hover { transform: translateY(calc(.5rem - 5px)); }

.wonder-party-card__avatar {
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 1rem;
    border-radius: 999px;
    border: 2px solid rgba(212,175,55,.30);
    background:
        radial-gradient(ellipse at top, rgba(212,175,55,.22), transparent 52%),
        rgba(255,255,255,.04);
    overflow: hidden;
    font-family: var(--ff-display);
    font-size: 1.3rem;
    color: var(--wonder-tea);
    box-shadow: 0 0 20px rgba(212,175,55,.10), 0 8px 20px rgba(0,0,0,.32);
    transition: border-color 250ms ease, box-shadow 250ms ease;
}

.wonder-party-card:hover .wonder-party-card__avatar {
    border-color: rgba(212,175,55,.58);
    box-shadow: 0 0 26px rgba(212,175,55,.22), 0 8px 20px rgba(0,0,0,.32);
}

.wonder-party-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

.wonder-party-card strong {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--ff-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--wonder-tea);
}

.wonder-party-card p {
    margin: 0;
    font-family: var(--ff-ui);
    font-size: .74rem;
    letter-spacing: .08em;
    color: var(--wonder-gold);
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────
   Gallery
────────────────────────────────────────────────────── */
.wonder-gallery-wall {
    columns: 1;
    gap: 1rem;
    max-width: var(--inner);
    margin: 0 auto;
}

.wonder-gallery-card {
    display: block;
    margin-bottom: 1rem;
    break-inside: avoid;
    overflow: hidden;
    border-radius: 1.4rem;
    border: 1px solid rgba(212,175,55,.24);
    background: rgba(255,255,255,.03);
    box-shadow: 0 18px 38px rgba(0,0,0,.30);
    transition: transform 300ms var(--ease-spring), box-shadow 300ms ease;
}

.wonder-gallery-card:hover { box-shadow: 0 26px 52px rgba(0,0,0,.38), var(--glow-wonder); }

.wonder-gallery-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 400ms ease;
}

.wonder-gallery-card:hover img { transform: scale(1.04) rotate(var(--card-rotate, 0deg)); }

.wonder-gallery-card--2 img,
.wonder-gallery-card--4 img { --card-rotate: -1.2deg; transform: rotate(-1.2deg); }

.wonder-gallery-card--1 img,
.wonder-gallery-card--3 img { --card-rotate: 1.1deg; transform: rotate(1.1deg); }

/* ─────────────────────────────────────────────────────
   Gifts
────────────────────────────────────────────────────── */
.wonder-gift-grid {
    display: grid;
    gap: 1rem;
    max-width: var(--inner);
    margin: 0 auto;
}

.wonder-gift-card {
    position: relative;
    overflow: hidden;
    padding: 1.6rem;
    border-radius: var(--r-md);
    border: 1px solid rgba(212,175,55,.20);
    background: linear-gradient(155deg, rgba(22,14,34,.90), rgba(11,8,20,.88));
    box-shadow: 0 18px 40px rgba(0,0,0,.30);
    transition: transform 280ms var(--ease-spring), border-color 280ms ease, box-shadow 280ms ease;
}

.wonder-gift-card:hover {
    transform: translateY(-5px);
    border-color: rgba(212,175,55,.38);
    box-shadow: 0 24px 48px rgba(0,0,0,.34), var(--glow-wonder);
}

.wonder-gift-card__eyebrow {
    display: inline-block;
    margin-bottom: .75rem;
    font-family: var(--ff-ui);
    font-size: .70rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--wonder-gold);
}

.wonder-gift-card p {
    margin: 0 0 .5rem;
    font-family: var(--ff-body);
    font-size: 1rem;
    color: var(--wonder-text-muted);
    line-height: 1.75;
}

.wonder-gift-card__meta {
    display: block;
    margin-top: .75rem;
    font-family: var(--ff-ui);
    font-size: .85rem;
    color: var(--wonder-text-soft);
}

/* ─────────────────────────────────────────────────────
   Sticky RSVP
────────────────────────────────────────────────────── */
.wonder-sticky-rsvp {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 3.3rem;
    padding: .88rem 1.5rem;
    border-radius: 999px;
    background: linear-gradient(130deg, var(--wonder-gold-light), var(--wonder-gold), var(--wonder-gold-dark));
    color: #100c07;
    border: 1px solid rgba(255,235,170,.35);
    box-shadow: 0 18px 34px rgba(0,0,0,.40), var(--glow-wonder);
    font-family: var(--ff-ui);
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .03em;
    white-space: nowrap;
    transition: transform 280ms var(--ease-spring), box-shadow 280ms ease;
}

.wonder-sticky-rsvp:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 44px rgba(0,0,0,.44), var(--glow-strong);
}

/* ─────────────────────────────────────────────────────
   Scroll to Top
────────────────────────────────────────────────────── */
.wonder-scroll-top {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 100;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(212,175,55,.40);
    background: rgba(14,10,22,.88);
    backdrop-filter: blur(14px);
    color: var(--wonder-gold);
    font-size: 1.05rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all .4s var(--ease-out);
    box-shadow: 0 8px 22px rgba(0,0,0,.38);
}

.wonder-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wonder-scroll-top:hover {
    background: var(--wonder-gold);
    color: #100c07;
    box-shadow: var(--glow-wonder), 0 12px 26px rgba(0,0,0,.44);
    transform: translateY(-3px);
}

/* ─────────────────────────────────────────────────────
   FAQ Accordion
────────────────────────────────────────────────────── */
.wonder-section--faq { padding-top: clamp(3rem,6vw,5rem); }

.wonder-faq-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    max-width: 52rem;
    margin: 0 auto;
}

.wonder-faq-card {
    background: rgba(255,255,255,.03);
    border: var(--border-gold);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: all .4s var(--ease-out);
}

.wonder-faq-card.is-active {
    background: rgba(212,175,55,.07);
    border-color: rgba(212,175,55,.48);
    box-shadow: var(--glow-wonder);
}

.wonder-faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 1rem;
    color: var(--wonder-text);
    transition: background .3s var(--ease-out);
}

.wonder-faq-trigger:hover { background: rgba(255,255,255,.02); }

.wonder-faq-question { display: flex; align-items: center; gap: 1rem; flex: 1; }

.wonder-faq-number {
    font-family: var(--ff-display);
    font-size: .76rem;
    font-weight: 700;
    color: var(--wonder-gold);
    background: var(--wonder-gold-soft);
    padding: .3rem .6rem;
    border-radius: .5rem;
    border: 1px solid rgba(212,175,55,.30);
    flex-shrink: 0;
}

.wonder-faq-text {
    font-family: var(--ff-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--wonder-text);
    line-height: 1.4;
}

.wonder-faq-icon {
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
    border: 1px solid rgba(212,175,55,.22);
    flex-shrink: 0;
    position: relative;
    transition: all .3s var(--ease-out);
}

.wonder-faq-icon i {
    position: absolute;
    color: var(--wonder-gold);
    font-size: .7rem;
    transition: all .3s var(--ease-out);
}

.wonder-faq-icon .fa-minus { opacity: 0; transform: rotate(-90deg); }

.wonder-faq-card.is-active .wonder-faq-icon {
    background: linear-gradient(135deg, var(--wonder-gold), rgba(212,175,55,.6));
    border-color: var(--wonder-gold);
}

.wonder-faq-card.is-active .wonder-faq-icon .fa-plus  { opacity: 0; transform: rotate(90deg); }
.wonder-faq-card.is-active .wonder-faq-icon .fa-minus { opacity: 1; transform: rotate(0); color: #100c07; }

.wonder-faq-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .5s var(--ease-out), opacity .4s var(--ease-out);
}

.wonder-faq-answer { padding: 0 1.5rem 1.5rem 3.6rem; }

.wonder-faq-answer p {
    font-family: var(--ff-body);
    font-size: 1rem;
    line-height: 1.9;
    color: var(--wonder-text-muted);
    margin: 0;
}

/* ─────────────────────────────────────────────────────
   Footer
────────────────────────────────────────────────────── */
.wonder-footer {
    padding: 4rem var(--pad-x) 2rem;
    text-align: center;
    color: var(--wonder-text-soft);
    font-family: var(--ff-ui);
    font-size: .84rem;
    letter-spacing: .06em;
    position: relative;
}

.wonder-footer::before {
    content: '';
    display: block;
    margin: 0 auto 2.5rem;
    width: 40%;
    max-width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.38), transparent);
}

/* ─────────────────────────────────────────────────────
   Reveal animation
────────────────────────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity  .65s cubic-bezier(.22,1,.36,1),
        transform .65s cubic-bezier(.22,1,.36,1);
}

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

/* Itinerario: animación de entrada lateral */
.wonder-timeline-item[data-reveal] {
    opacity: 0;
    transform: translateX(-40px) translateY(20px);
    transition:
        opacity .7s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1);
}

.wonder-timeline-item[data-reveal]:nth-child(even) {
    transform: translateX(40px) translateY(20px);
}

.wonder-timeline-item[data-reveal].is-visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* ─────────────────────────────────────────────────────
   Keyframes
────────────────────────────────────────────────────── */
@keyframes wonder-float {
    0%,100% { transform: translateY(0)     rotate(0deg);   }
    33%      { transform: translateY(-14px) rotate(1.5deg); }
    66%      { transform: translateY(-8px)  rotate(-1deg);  }
}

@keyframes wonder-pulse {
    0%,100% { text-shadow: 0 0 0    rgba(212,175,55,0);   }
    50%      { text-shadow: 0 0 22px rgba(212,175,55,.52); }
}

@keyframes wonder-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────────────────── */

/* Tablet: 640px+ */
@media (min-width: 640px) {
    .wonder-gallery-wall  { columns: 2; }
    .wonder-location-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .wonder-gift-grid     { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Desktop: 980px+ */
@media (min-width: 980px) {
    .wonder-hero__grid {
        grid-template-columns: minmax(0,1.05fr) minmax(20rem,.90fr);
    }

    .wonder-gallery-wall { columns: 3; }
    .wonder-gift-grid    { grid-template-columns: repeat(3,minmax(0,1fr)); }

    /* Zigzag timeline */
    .wonder-timeline::before { left: 50%; transform: translateX(-50%); }

    .wonder-timeline-item { width: calc(50% - 2.1rem); padding-left: 0; }
    .wonder-timeline-item:nth-child(even) { margin-left: auto; }

    .wonder-timeline-item:nth-child(odd)  .wonder-timeline-marker { right: -2.9rem; left: auto; }
    .wonder-timeline-item:nth-child(even) .wonder-timeline-marker { left:  -2.9rem; }

    .wonder-timeline-item:nth-child(odd)  .wonder-timeline-card { transform: translateX(-.15rem); }
    .wonder-timeline-item:nth-child(even) .wonder-timeline-card { transform: translateX(.15rem); }
}

/* Wide: 1200px+ */
@media (min-width: 1200px) {
    .wonder-location-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Mobile: < 760px */
@media (max-width: 759px) {
    :root {
        --pad-x: 1rem;
        --pad-y: clamp(2.5rem,6vw,4rem);
    }

    .wonder-title { font-size: clamp(3rem,13vw,4.5rem); }

    .wonder-section-head { align-items: flex-start; flex-direction: column; }

    .wonder-hero__facts,
    .wonder-countdown { grid-template-columns: 1fr 1fr; }

    .wonder-location-grid,
    .wonder-party-grid,
    .wonder-gift-grid { grid-template-columns: 1fr; }

    .wonder-dress-grid { grid-template-columns: 1fr; }
    .wonder-dress-visual { grid-column: 1; }

    .wonder-gallery-wall { columns: 1; }

    .wonder-sticky-rsvp { right: .75rem; bottom: .75rem; }

    .wonder-party-card:nth-child(even) { transform: none; }
    .wonder-party-card:nth-child(even):hover { transform: translateY(-5px); }
}

/* Sticky RSVP: solo icono en móvil pequeño */
@media (max-width: 400px) {
    .wonder-sticky-rsvp span { display: none; }
    .wonder-sticky-rsvp { padding: .88rem; }
}

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

    .wonder-title { animation: none; }
    .floating-card, .wonder-countdown-value.is-live { animation: none; }

    [data-reveal] { opacity: 1; transform: none; transition: none; }

    .wonder-button, .wonder-inline-link,
    .wonder-location-card, .wonder-dress-card,
    .wonder-gift-card, .wonder-party-card,
    .wonder-gallery-card img,
    .wonder-scroll-top, .wonder-sticky-rsvp,
    .wonder-hero__portrait img,
    .wonder-timeline-card, .wonder-countdown-card,
    .wonder-faq-card { transition: none; }
}