/* Magy & Carlos: propuesta local reversible. Solo afecta el contenido tras abrir el sobre. */
:root {
    --color-titulos: #800020;
    --color-texto: #49383d;
    --color-btn: #800020;
    --color-btn-hover: #671129;
    --bg-modal: #f8f3eb;
}

body { background: #fffaf4; color: #49383d; }
#final-website { background: #fffaf4; }
#final-website .btn-grl,
#final-website .hero-btn,
#final-website .mc-rsvp-button { background-color: #800020; color: #fffaf4; }

#intro.intro-section { background: #fffaf4; }
#intro .intro-image {
    min-height: min(100svh, 900px) !important;
    height: min(100svh, 900px) !important;
    padding: 0 !important;
    background: #eee7de !important;
}
#intro .intro-image::before {
    content: none !important;
    display: none !important;
}
#intro .intro-image img.mc-editor-photo-hero {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 1 !important;
    visibility: visible !important;
}
#intro .intro-image .mc-editorial-card {
    position: absolute !important;
    z-index: 2 !important;
    left: 6% !important;
    top: 48% !important;
    transform: translateY(-50%) !important;
    width: min(34vw, 430px) !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 24px 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    text-align: left !important;
}
#intro .intro-image .mc-editorial-card,
#intro .intro-image .mc-editorial-card * {
    color: #54172b !important;
    text-shadow: 0 1px 2px #fffaf4, 0 0 9px rgba(255,250,244,.9) !important;
}
#intro .intro-image .mc-editorial-card p {
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: .88rem !important;
    letter-spacing: .24em !important;
    margin-bottom: 14px !important;
}
#intro .intro-image .circulo-nombre {
    font-size: clamp(3.6rem, 5.4vw, 6rem) !important;
    line-height: .98 !important;
}
#intro .intro-image .circulo-and {
    font-size: 2.4rem !important;
    margin: 3px 0 !important;
}
#intro .intro-image .circulo-fecha {
    width: fit-content;
    margin-top: 22px !important;
    border-color: rgba(128,0,32,.45) !important;
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: .9rem !important;
    letter-spacing: .09em;
}
#intro .intro-image .mc-editorial-card::after { display: none !important; }
#intro .intro-image .scroll-indicator {
    position: absolute !important;
    left: 6% !important;
    bottom: 28px !important;
    top: auto !important;
    transform: none !important;
    color: #54172b !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px #fffaf4, 0 0 9px rgba(255,250,244,.9) !important;
    padding: 0 !important;
}
#intro .intro-image .scroll-indicator * {
    color: #54172b !important;
    opacity: 1 !important;
}

#invitacion.invitacion-section {
    background: #fffaf4;
    padding: 96px 22px 72px !important;
}
#invitacion .invitacion-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr .86fr;
    gap: clamp(24px, 3.5vw, 56px);
    align-items: center;
    max-width: 1240px;
}
#invitacion .foto-novios {
    flex: none;
    min-width: 0;
    width: 100%;
    border-radius: 2px;
    box-shadow: 0 16px 34px rgba(40,18,22,.13);
    background-color: #eee6dc;
    background-repeat: no-repeat !important;
}
#invitacion .mc-editable-photo-left { height: 410px; }
#invitacion .mc-editable-photo-right { height: 520px; }
#invitacion .col-info { min-width: 0; padding: 12px 0; }
#invitacion .col-info h2 {
    color: #800020;
    font-size: clamp(3.3rem, 4vw, 5rem);
    margin-bottom: 24px;
}
#invitacion .col-info p {
    color: #49383d;
    font-size: 1.24rem;
    line-height: 1.75;
}

/* Itinerario: contraste legible sin cambiar sus eventos ni su animación. */
#invitacion .mc-itinerary .mc-itinerary-title {
    color: #542032 !important;
}
#invitacion .mc-itinerary .mc-itinerary-subtitle {
    color: #73505b !important;
    font-size: .77rem !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
}
#invitacion .mc-itinerary .mc-itinerary-row .event-wrap h3 {
    color: #800020 !important;
    font-size: clamp(2rem, 3.3vw, 2.9rem) !important;
    line-height: 1.12 !important;
    text-shadow: none !important;
}
#invitacion .mc-itinerary .mc-itinerary-row .event-wrap p {
    color: #49383d !important;
    font-family: Georgia, serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    text-shadow: none !important;
}
#invitacion .mc-itinerary .mc-itinerary-row .event-hra {
    color: #671129 !important;
    font-size: 1.8rem !important;
    line-height: 1.18 !important;
    text-shadow: none !important;
}
#invitacion .mc-itinerary .mc-itinerary-row .mc-itinerary-provisional {
    color: #795360 !important;
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    line-height: 1.35 !important;
}
#invitacion .mc-itinerary .mc-itinerary-row .btn-grl {
    background: #800020 !important;
    border-color: #800020 !important;
    color: #fffaf4 !important;
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
    min-height: 37px;
    text-shadow: none !important;
}
#invitacion .mc-itinerary .mc-itinerary-row .btn-grl:hover,
#invitacion .mc-itinerary .mc-itinerary-row .btn-grl:focus-visible {
    background: #671129 !important;
    border-color: #671129 !important;
    color: #fffaf4 !important;
}
#invitacion .mc-itinerary .mc-itinerary-line-base {
    opacity: .48 !important;
}
#invitacion .mc-itinerary .mc-itinerary-highlighter-progress {
    width: 6px !important;
    opacity: .68 !important;
    background: linear-gradient(90deg, rgba(190,151,70,.22), #bc9a50 50%, rgba(190,151,70,.22)) !important;
    box-shadow: 0 0 5px rgba(157,113,43,.14) !important;
}
#propuesta-section.propuesta-section {
    padding: 100px 22px 110px;
    background: #fff;
}
#propuesta-section .propuesta-text { max-width: 760px; margin: auto; }
#propuesta-section h3 { color: #800020; }
#propuesta-section p { color: #49383d; }
#propuesta-section .propuesta-img {
    max-width: 1120px;
    height: auto !important;
    aspect-ratio: 1920 / 1301;
    margin: 52px auto 0;
    border-radius: 2px;
    background-color: #eee6dc;
    background-attachment: scroll !important;
    box-shadow: 0 18px 45px rgba(40,18,22,.12);
}

@media (max-width: 800px) {
    #intro .intro-image {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 66.6667vw 0 0 !important;
        background: #fffaf4 !important;
    }
    #intro .intro-image::before { display: none !important; }
    #intro .intro-image img.mc-editor-photo-hero {
        inset: 0 0 auto !important;
        height: 66.6667vw !important;
        aspect-ratio: 3 / 2;
        object-fit: contain !important;
    }
    #intro .intro-image .mc-editorial-card {
        position: relative !important;
        order: 1;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 32px 24px 18px !important;
        background: #fffaf4 !important;
        text-align: center !important;
    }
    #intro .intro-image .circulo-nombre {
        font-size: clamp(3.4rem, 12vw, 5rem) !important;
    }
    #intro .intro-image .circulo-fecha {
        margin: 20px auto 0 !important;
    }
    #intro .intro-image .scroll-indicator {
        position: relative !important;
        order: 2;
        left: auto !important;
        bottom: auto !important;
        margin: 0 auto 24px !important;
        color: #800020 !important;
    }
    #invitacion.invitacion-section { padding: 68px 20px 55px !important; }
    #invitacion .invitacion-grid { display: flex; flex-direction: column; gap: 38px; }
    #invitacion .foto-novios { width: 100%; height: auto !important; }
    #invitacion .mc-editable-photo-left { aspect-ratio: 3 / 2; }
    #invitacion .mc-editable-photo-right { aspect-ratio: 1280 / 1979; max-width: 430px; }
    #invitacion .col-info { order: -1; padding: 0; }
    #invitacion .col-info h2 { font-size: 3.6rem; }
    #invitacion .col-info p { font-size: 1.18rem; }
    #invitacion .mc-itinerary .mc-itinerary-subtitle { font-size: .72rem !important; }
    #invitacion .mc-itinerary .mc-itinerary-row .event-wrap h3 {
        font-size: clamp(2rem, 8vw, 2.35rem) !important;
    }
    #invitacion .mc-itinerary .mc-itinerary-row .event-wrap p {
        font-size: .92rem !important;
        line-height: 1.5 !important;
    }
    #invitacion .mc-itinerary .mc-itinerary-row .event-hra {
        font-size: 1.62rem !important;
    }
    #invitacion .mc-itinerary .mc-itinerary-row .btn-grl {
        min-height: 35px;
        padding: 7px 9px !important;
        font-size: .66rem !important;
    }
    #invitacion .mc-itinerary .mc-itinerary-highlighter-progress { width: 5px !important; }
    #propuesta-section.propuesta-section { padding: 70px 20px 80px; }
    #propuesta-section .propuesta-img { margin-top: 35px; }
}

#propuesta-section .propuesta-text h3 {
    font-family: var(--fuente-titulos);
    font-size: clamp(2.8rem, 4vw, 4rem);
}
#propuesta-section .propuesta-text p {
    font-family: var(--fuente-textos);
    font-size: 1.3rem;
    line-height: 1.7;
}
#propuesta-section .propuesta-img.mc-editable-proposal.mc-propuesta-static-image-v3 {
    max-width: 1120px;
    height: auto !important;
    aspect-ratio: 1920 / 1301;
    background-size: contain !important;
    opacity: 1 !important;
}
#propuesta-section .mc-propuesta-floats-main-v3,
#propuesta-section .mc-propuesta-floats-back-v3 { display: none !important; }

@media (max-width: 800px) {
    #intro.intro-section .intro-image .mc-photo-tech-stage-v3 {
        position: absolute !important;
        inset: 0 0 auto !important;
        z-index: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 66.6667vw !important;
        aspect-ratio: 3 / 2 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    #invitacion .mc-photo-tech-stage-v3 {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    #invitacion .mc-photo-tech-stage-v3:has(.mc-editable-photo-left) { aspect-ratio: 3 / 2 !important; }
    #invitacion .mc-photo-tech-stage-v3:has(.mc-editable-photo-right) { aspect-ratio: 1280 / 1979 !important; }
    #invitacion .mc-photo-tech-stage-v3 .mc-photo-tech-background-v5 {
        width: 100% !important;
        height: 100% !important;
    }
}

#intro .mc-photo-tech-stage-v3::before,
#intro .mc-photo-tech-stage-v3::after,
#invitacion .mc-photo-tech-stage-v3::before,
#invitacion .mc-photo-tech-stage-v3::after,
#intro .mc-photo-tech-shape-v3,
#intro .mc-photo-tech-orbit-v3,
#intro .mc-photo-tech-particle-v3,
#invitacion .mc-photo-tech-shape-v3,
#invitacion .mc-photo-tech-orbit-v3,
#invitacion .mc-photo-tech-particle-v3 {
    content: none !important;
    display: none !important;
}

/* Mesa real de los invitados de esta invitación, visible solo si está asignada. */
#mc-rsvp-personalized .mc-rsvp-seating {
    max-width: 580px;
    margin: 24px auto 0;
    padding: 20px 0 2px;
    border-top: 1px solid rgba(128,0,32,.23);
    color: #49383d;
}
#mc-rsvp-personalized .mc-rsvp-seating-title {
    margin: 0 0 12px;
    color: #800020;
    font-family: 'Cinzel', Georgia, serif;
    font-size: .83rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}
#mc-rsvp-personalized .mc-rsvp-seating-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#mc-rsvp-personalized .mc-rsvp-seating-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: Georgia, serif;
    font-size: 1rem;
    line-height: 1.45;
}
#mc-rsvp-personalized .mc-rsvp-seat {
    color: #671129;
    font-weight: 600;
    text-align: right;
}
@media (max-width: 600px) {
    #mc-rsvp-personalized .mc-rsvp-seating { text-align: left; }
    #mc-rsvp-personalized .mc-rsvp-seating-list li { flex-wrap: wrap; gap: 2px 12px; }
    #mc-rsvp-personalized .mc-rsvp-seat { text-align: left; }
}

/* La carta y la confirmación siguen a la portada en la vista editable. */
#final-website > #mc-personal-welcome {
    min-height: min(80svh, 760px);
    padding: clamp(64px, 9vw, 112px) 20px;
}
#final-website > #mc-rsvp-personalized {
    padding: clamp(58px, 7vw, 88px) 20px;
}
#final-website > #mc-entry-pass {
    padding: 56px 20px 72px;
}
/* El pase pendiente se integra al RSVP y deja vacío su contenedor original. */
#final-website > #mc-entry-pass:not(:has(.mc-entry-pass-card)) {
    display: none;
}
.mc-rsvp-pass-state {
    max-width: 540px;
    margin: 26px auto 0;
    padding: 15px 20px;
    border: 1px solid rgba(128, 0, 32, .16);
    border-radius: 12px;
    background: #fffaf4;
    color: #701c35;
    font-family: Georgia, serif;
    font-size: .95rem;
    line-height: 1.5;
}
/* QWeb deja espacios en el estado vacío; ocultarlo hasta recibir una respuesta. */
#mc-rsvp-personalized .mc-rsvp-status:not(.is-confirmed):not(.is-declined):not(.is-error) {
    display: none;
}
.mc-rsvp-pass-state .mc-pass-approved,
.mc-rsvp-pass-state .mc-pass-declined {
    display: none;
}
.mc-rsvp-card:has(.mc-rsvp-status.is-confirmed) .mc-pass-awaiting-rsvp,
.mc-rsvp-card:has(.mc-rsvp-status.is-declined) .mc-pass-awaiting-rsvp {
    display: none;
}
.mc-rsvp-card:has(.mc-rsvp-status.is-confirmed) .mc-pass-approved,
.mc-rsvp-card:has(.mc-rsvp-status.is-declined) .mc-pass-declined {
    display: inline;
}
@media (max-width: 650px) {
    #final-website > #mc-personal-welcome {
        min-height: 68svh;
        padding: 66px 14px 76px;
    }
    #final-website > #mc-rsvp-personalized {
        padding: 56px 12px;
    }
    #final-website > #mc-entry-pass {
        padding: 36px 12px 62px;
    }
    .mc-rsvp-pass-state {
        margin-top: 23px;
        padding: 13px 15px;
    }
}