/* ==========================================================================
   cards.css
   Invitación XV · Danna Sarahi
   Sistema visual para tarjetas internas de la invitación.

   Orden recomendado:
   1. app.css / site.css
   2. cover.css
   3. sections.css
   4. cards.css

   Este archivo está aislado bajo .invitation-content para evitar afectar
   otros componentes del proyecto.
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES DEL SISTEMA DE TARJETAS
   ========================================================================== */

.invitation-content {
    --card-bg: linear-gradient( 145deg, rgba(255, 255, 255, .82), rgba(255, 246, 241, .64) );
    --card-bg-strong: linear-gradient( 145deg, rgba(255, 255, 255, .92), rgba(250, 235, 228, .76) );
    --card-bg-dark: linear-gradient( 145deg, rgba(67, 34, 49, .94), rgba(38, 20, 30, .96) );
    --card-border: rgba(184, 135, 70, .23);
    --card-border-strong: rgba(184, 135, 70, .42);
    --card-gold: #c99c52;
    --card-gold-light: #efd8a7;
    --card-gold-dark: #986728;
    --card-plum: #5a3044;
    --card-plum-dark: #2f1823;
    --card-text: #4d393b;
    --card-muted: #7f6566;
    --card-shadow: 0 24px 70px rgba(80, 46, 57, .13), 0 10px 28px rgba(110, 72, 75, .08);
    --card-shadow-hover: 0 34px 88px rgba(80, 46, 57, .18), 0 14px 34px rgba(110, 72, 75, .12);
    --card-radius-lg: 30px;
    --card-radius-md: 24px;
    --card-radius-sm: 18px;
    --card-blur: 16px;
}

    /* ==========================================================================
   2. SELECTOR BASE PARA TARJETAS
   ========================================================================== */

    .invitation-content :is( .parents-card, .godparents-card, .family-card, .event-card, .calendar-card, .countdown-card, .dress-code-card, .gift-card, .envelope-card, .rsvp-card, .confirmation-card, .location-card, .message-card, .memory-card, .info-card, .invitation-card, .glass-card ) {
        position: relative;
        z-index: 1;
        width: min(100%, 760px);
        margin-inline: auto;
        padding: clamp(26px, 5vw, 46px);
        overflow: hidden;
        isolation: isolate;
        border: 1px solid var(--card-border);
        border-radius: var(--card-radius-lg);
        background: var(--card-bg);
        box-shadow: var(--card-shadow);
        backdrop-filter: blur(var(--card-blur)) saturate(1.08);
        -webkit-backdrop-filter: blur(var(--card-blur)) saturate(1.08);
        transition: transform .55s cubic-bezier(.22, .72, .22, 1), box-shadow .55s ease, border-color .55s ease, background .55s ease;
    }

        /* Luz superior interna. */
        .invitation-content :is( .parents-card, .godparents-card, .family-card, .event-card, .calendar-card, .countdown-card, .dress-code-card, .gift-card, .envelope-card, .rsvp-card, .confirmation-card, .location-card, .message-card, .memory-card, .info-card, .invitation-card, .glass-card )::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;
            pointer-events: none;
            background: radial-gradient( circle at 20% 0%, rgba(255, 255, 255, .82), transparent 34% ), radial-gradient( circle at 100% 100%, rgba(211, 164, 92, .13), transparent 38% );
            opacity: .9;
        }

        /* Línea ornamental inferior. */
        .invitation-content :is( .parents-card, .godparents-card, .family-card, .event-card, .calendar-card, .countdown-card, .dress-code-card, .gift-card, .envelope-card, .rsvp-card, .confirmation-card, .location-card, .message-card, .memory-card, .info-card, .invitation-card, .glass-card )::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            z-index: -1;
            width: 72%;
            height: 2px;
            background: linear-gradient( 90deg, transparent, rgba(201, 156, 82, .58), transparent );
            transform: translateX(-50%);
            opacity: .82;
        }

/* Hover solo en equipos que realmente tienen puntero. */
@media (hover: hover) and (pointer: fine) {
    .invitation-content :is( .parents-card, .godparents-card, .family-card, .event-card, .calendar-card, .countdown-card, .dress-code-card, .gift-card, .envelope-card, .rsvp-card, .confirmation-card, .location-card, .message-card, .memory-card, .info-card, .invitation-card, .glass-card ):hover {
        transform: translateY(-6px);
        border-color: var(--card-border-strong);
        box-shadow: var(--card-shadow-hover);
    }
}

/* ==========================================================================
   3. TIPOGRAFÍA INTERNA
   ========================================================================== */

.invitation-content :is( .parents-card, .godparents-card, .family-card, .event-card, .calendar-card, .countdown-card, .dress-code-card, .gift-card, .envelope-card, .rsvp-card, .confirmation-card, .location-card, .message-card, .memory-card, .info-card, .invitation-card, .glass-card ) h3 {
    margin: 0 0 14px;
    color: var(--card-plum);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.85rem, 5vw, 2.75rem);
    font-weight: 600;
    line-height: 1.05;
    text-align: center;
    text-wrap: balance;
}

.invitation-content :is( .parents-card, .godparents-card, .family-card, .event-card, .calendar-card, .countdown-card, .dress-code-card, .gift-card, .envelope-card, .rsvp-card, .confirmation-card, .location-card, .message-card, .memory-card, .info-card, .invitation-card, .glass-card ) p {
    margin-top: 0;
    color: var(--card-text);
    line-height: 1.72;
}

.invitation-content :is( .card-kicker, .card-eyebrow, .event-card__eyebrow, .gift-card__eyebrow, .rsvp-card__eyebrow ) {
    margin: 0 0 10px;
    color: var(--card-gold-dark);
    font-family: "Cormorant Garamond", serif;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

.invitation-content :is( .card-description, .event-card__description, .gift-card__description, .rsvp-card__description ) {
    width: min(100%, 590px);
    margin-inline: auto;
    color: var(--card-muted);
    text-align: center;
}

/* ==========================================================================
   4. ÍCONOS Y MARCAS DECORATIVAS
   ========================================================================== */

.invitation-content :is( .card-icon, .event-card__icon, .gift-card__icon, .dress-code-card__icon, .rsvp-card__icon, .location-card__icon ) {
    width: 68px;
    height: 68px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 156, 82, .28);
    border-radius: 50%;
    color: var(--card-gold-dark);
    background: radial-gradient( circle, rgba(255, 255, 255, .95), rgba(239, 216, 167, .38) );
    box-shadow: 0 10px 30px rgba(104, 70, 55, .11), inset 0 1px 0 rgba(255, 255, 255, .92);
    font-size: 1.7rem;
}

/* ==========================================================================
   5. TARJETAS DE PADRES Y PADRINOS
   ========================================================================== */

.invitation-content :is( .parents-card, .godparents-card, .family-card ) {
    width: min(100%, 680px);
    text-align: center;
}

.invitation-content :is( .parents-list, .godparents-list, .family-list, .names-list ) {
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 16px;
    list-style: none;
}

    .invitation-content :is( .parents-list, .godparents-list, .family-list, .names-list ) li {
        position: relative;
        padding: 0 0 16px;
        color: var(--card-plum-dark);
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(1.35rem, 4vw, 1.8rem);
        font-weight: 600;
        line-height: 1.25;
    }

        .invitation-content :is( .parents-list, .godparents-list, .family-list, .names-list ) li:not(:last-child)::after {
            content: "✦";
            position: absolute;
            left: 50%;
            bottom: -3px;
            color: var(--card-gold);
            transform: translateX(-50%);
            font-size: .62rem;
        }

/* ==========================================================================
   6. TARJETAS DE CEREMONIA Y RECEPCIÓN
   ========================================================================== */

.invitation-content .event-card {
    width: min(100%, 720px);
    text-align: center;
}

.invitation-content .event-card__details,
.invitation-content .event-details {
    margin: 26px 0 0;
    display: grid;
    gap: 14px;
}

.invitation-content :is( .event-card__detail, .event-detail, .location-detail ) {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 11px 14px;
    border: 1px solid rgba(184, 135, 70, .16);
    border-radius: 16px;
    background: rgba(255, 255, 255, .44);
    text-align: left;
}

.invitation-content :is( .event-card__detail-icon, .event-detail__icon, .location-detail__icon ) {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--card-gold-dark);
    background: rgba(239, 216, 167, .38);
    font-size: 1.05rem;
}

.invitation-content :is( .event-card__detail-label, .event-detail__label, .location-detail__label ) {
    margin: 0 0 2px;
    color: var(--card-muted);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.invitation-content :is( .event-card__detail-value, .event-detail__value, .location-detail__value ) {
    margin: 0;
    color: var(--card-plum-dark);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.35;
}

/* ==========================================================================
   7. CALENDARIO
   ========================================================================== */

.invitation-content .calendar-card {
    width: min(100%, 620px);
    padding: clamp(24px, 5vw, 40px);
}

.invitation-content :is( .calendar-header, .calendar-card__header ) {
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.invitation-content :is( .calendar-month, .calendar-card__month ) {
    color: var(--card-plum);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.7rem, 5vw, 2.35rem);
    font-weight: 600;
    text-transform: capitalize;
}

.invitation-content :is( .calendar-grid, .calendar-card__grid ) {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.invitation-content :is( .calendar-weekday, .calendar-card__weekday ) {
    min-height: 34px;
    display: grid;
    place-items: center;
    color: var(--card-gold-dark);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.invitation-content :is( .calendar-day, .calendar-card__day ) {
    position: relative;
    min-height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--card-text);
    font-size: .94rem;
    font-weight: 600;
}

.invitation-content :is( .calendar-day.is-event, .calendar-day.is-selected, .calendar-day--event, .calendar-card__day.is-event, .calendar-card__day.is-selected ) {
    color: #fff;
    background: radial-gradient( circle at 35% 30%, #dfbd78, #a87431 78% );
    box-shadow: 0 8px 20px rgba(145, 95, 38, .28), 0 0 0 5px rgba(223, 189, 120, .16);
}

    .invitation-content :is( .calendar-day.is-event, .calendar-day.is-selected, .calendar-day--event, .calendar-card__day.is-event, .calendar-card__day.is-selected )::after {
        content: "♡";
        position: absolute;
        top: -12px;
        right: -6px;
        color: var(--card-plum);
        font-family: Georgia, serif;
        font-size: 1rem;
    }

/* ==========================================================================
   8. CUENTA REGRESIVA
   ========================================================================== */

.invitation-content .countdown-card {
    width: min(100%, 780px);
    padding: clamp(25px, 5vw, 42px);
}

.invitation-content :is( .countdown-grid, .countdown-card__grid ) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 2vw, 16px);
}

.invitation-content :is( .countdown-item, .countdown-card__item ) {
    min-width: 0;
    min-height: 116px;
    padding: 18px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184, 135, 70, .2);
    border-radius: 20px;
    background: linear-gradient( 160deg, rgba(255, 255, 255, .78), rgba(245, 224, 215, .5) );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 10px 26px rgba(86, 52, 59, .08);
}

.invitation-content :is( .countdown-number, .countdown-card__number, .countdown-value ) {
    color: var(--card-plum);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2rem, 7vw, 3.4rem);
    font-weight: 700;
    line-height: .9;
}

.invitation-content :is( .countdown-label, .countdown-card__label ) {
    margin-top: 10px;
    color: var(--card-gold-dark);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1.1;
    text-transform: uppercase;
}

/* ==========================================================================
   9. CÓDIGO DE VESTIMENTA
   ========================================================================== */

.invitation-content .dress-code-card {
    width: min(100%, 680px);
    text-align: center;
}

.invitation-content :is( .dress-code-title, .dress-code-card__title ) {
    color: var(--card-plum);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 600;
}

.invitation-content :is( .dress-code-note, .dress-code-card__note ) {
    width: min(100%, 520px);
    margin: 18px auto 0;
    color: var(--card-muted);
}

.invitation-content :is( .dress-code-colors, .dress-code-card__colors ) {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.invitation-content :is( .dress-code-color, .dress-code-card__color ) {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(255, 255, 255, .86);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(116, 79, 83, .16), 0 8px 18px rgba(69, 42, 49, .12);
}

/* ==========================================================================
   10. MESA DE REGALOS Y BUZÓN DE SOBRES
   ========================================================================== */

.invitation-content :is( .gift-card, .envelope-card ) {
    width: min(100%, 680px);
    text-align: center;
}

.invitation-content :is( .gift-options, .gift-card__options ) {
    margin-top: 26px;
    display: grid;
    gap: 14px;
}

.invitation-content :is( .gift-option, .gift-card__option ) {
    position: relative;
    padding: 18px;
    border: 1px solid rgba(184, 135, 70, .18);
    border-radius: 18px;
    background: rgba(255, 255, 255, .5);
    color: var(--card-text);
}

    .invitation-content :is( .gift-option, .gift-card__option ) strong {
        display: block;
        margin-bottom: 4px;
        color: var(--card-plum);
        font-family: "Cormorant Garamond", serif;
        font-size: 1.25rem;
    }

/* ==========================================================================
   11. CONFIRMACIÓN / RSVP
   ========================================================================== */

.invitation-content :is( .rsvp-card, .confirmation-card ) {
    width: min(100%, 720px);
}

.invitation-content :is( .rsvp-form, .confirmation-form ) {
    margin-top: 28px;
    display: grid;
    gap: 18px;
}

.invitation-content :is( .form-group, .rsvp-form__group, .confirmation-form__group ) {
    display: grid;
    gap: 8px;
}

    .invitation-content :is( .form-group, .rsvp-form__group, .confirmation-form__group ) label {
        color: var(--card-plum);
        font-size: .82rem;
        font-weight: 750;
        letter-spacing: .07em;
    }

.invitation-content :is( .rsvp-card, .confirmation-card ) :is( input, select, textarea ) {
    width: 100%;
    min-height: 52px;
    padding: 12px 15px;
    border: 1px solid rgba(184, 135, 70, .22);
    border-radius: 15px;
    outline: none;
    color: var(--card-text);
    background: rgba(255, 255, 255, .74);
    font: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.invitation-content :is( .rsvp-card, .confirmation-card ) textarea {
    min-height: 112px;
    resize: vertical;
}

.invitation-content :is( .rsvp-card, .confirmation-card ) :is( input, select, textarea ):focus {
    border-color: rgba(169, 116, 48, .58);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 0 0 4px rgba(201, 156, 82, .13), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.invitation-content :is( .rsvp-card, .confirmation-card ) ::placeholder {
    color: rgba(90, 65, 68, .52);
}

/* Opciones Sí / No o cantidad de invitados. */
.invitation-content :is( .rsvp-options, .confirmation-options, .attendance-options ) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.invitation-content :is( .rsvp-option, .confirmation-option, .attendance-option ) {
    min-height: 52px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(184, 135, 70, .2);
    border-radius: 16px;
    background: rgba(255, 255, 255, .55);
    color: var(--card-plum);
    cursor: pointer;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

    .invitation-content :is( .rsvp-option, .confirmation-option, .attendance-option ):has(input:checked) {
        border-color: rgba(169, 116, 48, .52);
        background: linear-gradient( 145deg, rgba(239, 216, 167, .55), rgba(255, 255, 255, .76) );
        box-shadow: 0 8px 24px rgba(128, 85, 39, .11);
    }

/* ==========================================================================
   12. GRID DE DOS O MÁS TARJETAS
   ========================================================================== */

.invitation-content :is( .cards-grid, .event-cards, .info-cards, .gift-cards, .family-cards ) {
    width: min(100%, 1040px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(18px, 3vw, 28px);
}

    .invitation-content :is( .cards-grid, .event-cards, .info-cards, .gift-cards, .family-cards ) > * {
        width: 100%;
        height: 100%;
    }

/* ==========================================================================
   13. TARJETA OSCURA OPCIONAL
   ========================================================================== */

.invitation-content :is( .card--dark, .event-card--dark, .gift-card--dark, .rsvp-card--dark ) {
    border-color: rgba(239, 216, 167, .22);
    background: var(--card-bg-dark);
    box-shadow: 0 28px 76px rgba(25, 12, 18, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}

    .invitation-content :is( .card--dark, .event-card--dark, .gift-card--dark, .rsvp-card--dark ) :is( h3, .card-title, .event-card__title ) {
        color: var(--card-gold-light);
    }

    .invitation-content :is( .card--dark, .event-card--dark, .gift-card--dark, .rsvp-card--dark ) p {
        color: rgba(255, 247, 239, .84);
    }

/* ==========================================================================
   14. ESTADOS DE VALIDACIÓN
   ========================================================================== */

.invitation-content .validation-message,
.invitation-content .field-validation-error {
    margin-top: 4px;
    color: #9e3d4e;
    font-size: .78rem;
    font-weight: 650;
}

.invitation-content :is( input.invalid, select.invalid, textarea.invalid, .input-validation-error ) {
    border-color: rgba(158, 61, 78, .58) !important;
    box-shadow: 0 0 0 4px rgba(158, 61, 78, .1) !important;
}

/* ==========================================================================
   15. APARICIÓN DE LAS TARJETAS
   Compatible con las clases reveal / is-visible del proyecto.
   ========================================================================== */

.invitation-content .story-step.is-visible :is( .parents-card, .godparents-card, .family-card, .event-card, .calendar-card, .countdown-card, .dress-code-card, .gift-card, .envelope-card, .rsvp-card, .confirmation-card, .location-card, .message-card, .memory-card, .info-card, .invitation-card, .glass-card ),
.invitation-content .story-step.is-active-step :is( .parents-card, .godparents-card, .family-card, .event-card, .calendar-card, .countdown-card, .dress-code-card, .gift-card, .envelope-card, .rsvp-card, .confirmation-card, .location-card, .message-card, .memory-card, .info-card, .invitation-card, .glass-card ) {
    animation: invitationCardEnter .9s cubic-bezier(.22, .72, .22, 1) both;
}

@keyframes invitationCardEnter {
    from {
        opacity: 0;
        transform: translate3d(0, 34px, 0) scale(.97);
        filter: blur(5px);
    }

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

/* ==========================================================================
   16. TABLET
   ========================================================================== */

@media (max-width: 860px) {
    .invitation-content :is( .cards-grid, .event-cards, .info-cards, .gift-cards, .family-cards ) {
        grid-template-columns: 1fr;
        width: min(100%, 720px);
    }
}

/* ==========================================================================
   17. MÓVIL
   ========================================================================== */

@media (max-width: 560px) {
    .invitation-content :is( .parents-card, .godparents-card, .family-card, .event-card, .calendar-card, .countdown-card, .dress-code-card, .gift-card, .envelope-card, .rsvp-card, .confirmation-card, .location-card, .message-card, .memory-card, .info-card, .invitation-card, .glass-card ) {
        padding: 25px 18px;
        border-radius: var(--card-radius-md);
    }

    .invitation-content :is( .event-card__detail, .event-detail, .location-detail ) {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;
        padding-inline: 11px;
    }

    .invitation-content :is( .event-card__detail-icon, .event-detail__icon, .location-detail__icon ) {
        width: 38px;
        height: 38px;
    }

    .invitation-content :is( .countdown-grid, .countdown-card__grid ) {
        gap: 7px;
    }

    .invitation-content :is( .countdown-item, .countdown-card__item ) {
        min-height: 94px;
        padding: 14px 4px;
        border-radius: 16px;
    }

    .invitation-content :is( .countdown-number, .countdown-card__number, .countdown-value ) {
        font-size: clamp(1.75rem, 9vw, 2.7rem);
    }

    .invitation-content :is( .countdown-label, .countdown-card__label ) {
        font-size: .58rem;
        letter-spacing: .07em;
    }

    .invitation-content :is( .calendar-grid, .calendar-card__grid ) {
        gap: 3px;
    }

    .invitation-content :is( .calendar-day, .calendar-card__day ) {
        min-height: 38px;
        font-size: .86rem;
    }

    .invitation-content :is( .rsvp-options, .confirmation-options, .attendance-options ) {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   18. PANTALLAS MUY PEQUEÑAS
   ========================================================================== */

@media (max-width: 380px) {
    .invitation-content :is( .countdown-grid, .countdown-card__grid ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invitation-content :is( .countdown-item, .countdown-card__item ) {
        min-height: 88px;
    }

    .invitation-content :is( .calendar-weekday, .calendar-card__weekday ) {
        font-size: .62rem;
    }
}

/* ==========================================================================
   19. ACCESIBILIDAD Y MOVIMIENTO REDUCIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .invitation-content :is( .parents-card, .godparents-card, .family-card, .event-card, .calendar-card, .countdown-card, .dress-code-card, .gift-card, .envelope-card, .rsvp-card, .confirmation-card, .location-card, .message-card, .memory-card, .info-card, .invitation-card, .glass-card ) {
        animation: none !important;
        transition: none !important;
    }
}
/* Número de acompañantes y total de asistentes */

.invitation-content .form-help {
    display: block;
    margin-top: 2px;
    color: var(--card-muted);
    font-size: .78rem;
    line-height: 1.45;
}

.invitation-content .rsvp-total {
    min-height: 54px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(184, 135, 70, .22);
    border-radius: 16px;
    color: var(--card-plum);
    background: linear-gradient( 145deg, rgba(239, 216, 167, .42), rgba(255, 255, 255, .72) );
    text-align: center;
}

    .invitation-content .rsvp-total span {
        font-size: 1.3rem;
    }