/* ===================================================================
   ARCHIVO: public/plantillas/pergamino/estilo.css
   MODELO: Pergamino Romántico
   =================================================================== */

:root {
    --tpl-paper: #fbf6ef;
    --tpl-paper-deep: #f2e7d8;
    --tpl-ink: #33312f;
    --tpl-muted: #6f6964;
    --tpl-gold: #c9a96e;
    --tpl-maroon: #6b3e38;
    --tpl-button: #6b3e38;
    --tpl-accent: #a8704a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.tpl-pergamino {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--tpl-ink);
    font-family: 'Inter', sans-serif;
    background-color: #e9e1d5;
    background-image: var(--tpl-fondotex, none), radial-gradient(circle at top, #f7f1e8, #ddd2c4);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
body.tpl-pergamino.invitation-opened { overflow-y: auto; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
img { max-width: 100%; }

.script-font { font-family: 'Great Vibes', cursive; margin: 0; font-weight: 500; }
.serif-font { font-family: 'Playfair Display', serif; }

.demo-bar,
.private-guest-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10020;
    padding: 9px 16px;
    text-align: center;
    color: #fff;
    font-size: .78rem;
    letter-spacing: .04em;
    background: rgba(56, 74, 89, .96);
    box-shadow: 0 3px 12px rgba(0,0,0,.18);
}
.private-guest-banner { background: rgba(107, 62, 56, .96); }
.demo-bar + #envelope-screen,
.private-guest-banner + #envelope-screen { padding-top: 38px; }

/* SOBRE */
#envelope-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee6dc;
    background-image: var(--tpl-fondotex, none), radial-gradient(circle at center, #faf5ed, #ded4c8);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    outline: none;
}
#envelope-screen:focus-visible .envelope-wrapper { outline: 3px solid var(--tpl-accent); outline-offset: 8px; }
.envelope-container {
    text-align: center;
    animation: floatEnvelope 3s ease-in-out infinite;
}
.envelope-wrapper {
    position: relative;
    width: min(420px, calc(100vw - 36px));
    height: min(290px, 69vw);
    max-height: 290px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 5px;
    background: #f6f3eb;
    box-shadow: 0 15px 35px rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.05);
}
.envelope-back { position: absolute; inset: 0; z-index: 1; background: #f6f3eb; }
.env-bottom-flap-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    height: 60%;
    filter: drop-shadow(0 -2px 5px rgba(0,0,0,.06));
}
.envelope-bottom-flap { width: 100%; height: 100%; background: #f6f3eb; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.env-printed-text {
    position: absolute;
    bottom: 15px;
    z-index: 10;
    width: 100%;
    color: #3a3835;
    font-family: 'Playfair Display', serif;
    font-size: clamp(.95rem, 4vw, 1.3rem);
    letter-spacing: .5px;
    text-align: center;
}
.env-flower { position: absolute; top: 15%; z-index: 2; width: 67%; pointer-events: none; }
.env-flower-left { left: -5px; }
.env-flower-right { right: -5px; transform: scaleX(-1); }
.env-flap-shadow-wrapper {
    position: absolute;
    inset: 0;
    z-index: 4;
    transform-origin: top;
    filter: drop-shadow(0 6px 6px rgba(0,0,0,.18));
    transition: transform .6s ease-in;
}
.envelope-front-flap {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 65%;
    padding-top: 24px;
    background: #f6f3eb;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env-names {
    margin: 0;
    color: #726a4e;
    font-family: 'Great Vibes', cursive;
    font-size: clamp(2.45rem, 11vw, 3.6rem);
    font-weight: 400;
    line-height: .95;
    text-align: center;
}
.env-seal {
    position: absolute;
    top: 65%;
    left: 50%;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    color: #d5b85e;
    font-family: 'Great Vibes', cursive;
    font-size: 1.5rem;
    background: radial-gradient(circle at 35% 30%, #8c2d2c 0, #631c1e 48%, #3f1214 100%);
    box-shadow: inset 0 0 0 5px rgba(255,255,255,.08), 0 4px 8px rgba(0,0,0,.3);
    text-shadow: 1px 1px 2px rgba(0,0,0,.7);
    transform: translate(-50%, -50%);
    transition: opacity .3s;
}
.env-seal.with-image { background: var(--seal) center/contain no-repeat; box-shadow: none; }
.env-seal span { position: relative; display: inline-block; line-height: 1; }
.env-seal .letra-j { top: -12px; left: -6px; }
.env-seal .amp { top: 2px; z-index: 2; margin: 0 -8px; color: #c39e42; font-size: .5em; }
.env-seal .letra-s { top: 14px; left: 2px; }
.env-text-outside {
    display: inline-block;
    margin-top: 25px;
    padding: 7px 18px;
    border-radius: 20px;
    color: #6d665f;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: rgba(255,255,255,.68);
}
.is-opening .env-flap-shadow-wrapper { transform: scaleY(0); }
.is-opening .env-seal { opacity: 0; }
.screen-fade-out { animation: fadeOutEnvelope 1s ease-out forwards; pointer-events: none; }
@keyframes floatEnvelope { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes fadeOutEnvelope { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.05); } }

/* COLUMNA PRINCIPAL */
.invitation-column {
    display: none;
    position: relative;
    width: min(100%, clamp(460px, 35vw, 500px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 35px 15px 80px;
    background-color: #f4ede4;
    background-image:
        linear-gradient(180deg, rgba(248, 242, 234, .68), rgba(234, 223, 206, .68)),
        var(--tpl-fondo-inv, none);
    background-position: center top;
    background-repeat: repeat-y;
    background-size: cover;
    box-shadow: 0 0 40px rgba(0,0,0,.22);
}
.invitation-column.invitation-visible { display: block; }
.info-card {
    position: relative;
    z-index: 1;
    margin: 0 0 25px;
    padding: 30px 20px;
    overflow: hidden;
    border: 1px solid #f0e9df;
    border-radius: 12px;
    text-align: center;
    background-color: #fbf7f1;
    background-image: var(--tpl-papeltextura, none), linear-gradient(145deg, #fffdf9, #f4eadf);
    box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.info-card h2 { margin: 0 0 15px; color: var(--tpl-maroon); font-size: clamp(1.45rem, 7vw, 2.2rem); }
.info-card h3 { margin: 0 0 10px; font-family: 'Playfair Display', serif; }
.info-card p { margin: 0 0 10px; color: #47423e; font-size: .94rem; line-height: 1.55; }
.cover-card { z-index: 3; margin-top: 10px; padding: 15px; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.cover-border-outer { position: relative; padding: 6px; border: 2px solid #e5dcc7; background: #fbf6ef; }
.cover-border-inner { position: relative; padding: 1.8%; border: 1.5px solid var(--tpl-gold); }
.cover-flower { position: absolute; z-index: 3; width: 60%; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.23)); }
.cover-flower-top { top: -5%; right: -15%; }
.cover-flower-bottom { bottom: -14%; left: -12.3%; }

/* FOTO DINÁMICA: foto_portada o public/img/foto_novios.svg */
.photo-frame { position: relative; z-index: 2; width: 100%; max-width: none; margin: 0; }
.photo-composition { position: relative; width: 100%; aspect-ratio: 1457 / 2048; isolation: isolate; filter: drop-shadow(0 9px 15px rgba(56,42,31,.18)); }
.pergamino-base,
.pergamino-texture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.pergamino-base { z-index: 1; }
.photo-mask { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.has-parchment .photo-mask,
.has-parchment .photo-fade {
    -webkit-mask-image: var(--tpl-pergamino-mask, none);
    mask-image: var(--tpl-pergamino-mask, none);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}
.no-parchment { aspect-ratio: 4 / 5; padding: 10px; border: 1px solid #dacbb6; background: linear-gradient(145deg, #f6ead8, #e6d0b0); }
.no-parchment .photo-mask { inset: 10px; border-radius: 3px; }
.hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.015); filter: brightness(1.01) contrast(1.025) saturate(.92) sepia(.035); }
.pergamino-texture { z-index: 3; opacity: .34; mix-blend-mode: multiply; }
.photo-fade {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(236,221,193,.05) 0%, rgba(236,221,193,0) 53%, rgba(236,221,193,.09) 65%, rgba(236,221,193,.28) 75%, rgba(236,221,193,.68) 86%, rgba(236,221,193,.96) 100%),
        radial-gradient(ellipse at center 43%, rgba(236,221,193,0) 43%, rgba(236,221,193,.07) 59%, rgba(236,221,193,.31) 78%, rgba(236,221,193,.73) 100%);
}
.photo-title {
    position: absolute;
    right: -5%;
    bottom: 2%;
    left: 8%;
    z-index: 5;
    margin: 0;
    color: #3d352f;
    font-family: 'Alex Brush', cursive;
    font-size: clamp(1.75rem, 7.1vw, 2.3rem);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,.58), 0 2px 5px rgba(57,44,34,.16);
}
.no-parchment .photo-title { bottom: 24px; padding: 10px 8px 4px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.62)); }

/* EFECTO PORTADA: hojas que nacen visualmente del racimo superior derecho
   y descienden en diagonal hasta perderse sobre el arreglo floral inferior izquierdo. */
.cover-falling-effect {
    position: absolute;
    top: -8%;
    right: -18%;
    bottom: -20%;
    left: 6%;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image:
        radial-gradient(circle at 78% 14%, #000 0 16%, transparent 33%),
        linear-gradient(135deg, transparent 10%, rgba(0,0,0,.92) 29%, #000 48%, rgba(0,0,0,.92) 63%, transparent 84%),
        radial-gradient(circle at 17% 84%, rgba(0,0,0,.98) 0 18%, rgba(0,0,0,.68) 28%, transparent 43%);
    mask-image:
        radial-gradient(circle at 78% 14%, #000 0 16%, transparent 33%),
        linear-gradient(135deg, transparent 10%, rgba(0,0,0,.92) 29%, #000 48%, rgba(0,0,0,.92) 63%, transparent 84%),
        radial-gradient(circle at 17% 84%, rgba(0,0,0,.98) 0 18%, rgba(0,0,0,.68) 28%, transparent 43%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

.cover-fall-particle {
    --particle-size: 12px;
    --particle-opacity: .72;
    --particle-duration: 14s;
    --particle-delay: 0s;
    --particle-x: 84%;
    --travel-x: -160px;
    --travel-y: 420px;
    --particle-rotation: 16deg;
    --particle-sway: 10px;

    position: absolute;
    top: -8%;
    left: var(--particle-x);
    display: block;
    width: var(--particle-size);
    aspect-ratio: 1 / 1.8;
    opacity: 0;
    transform-origin: 50% 48%;
    filter: drop-shadow(0 3px 4px rgba(63, 52, 42, .16));
    will-change: transform, opacity;
    animation: coverParticleFall var(--particle-duration) linear var(--particle-delay) infinite;
}

.cover-fall-leaf {
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 92% 8% 92% 8%;
    box-shadow: inset 1px 0 rgba(255,255,255,.38);
}

.cover-fall-leaf::after {
    content: '';
    position: absolute;
    top: 9%;
    bottom: 9%;
    left: 50%;
    width: 1px;
    border-radius: 999px;
    background: rgba(109, 98, 76, .28);
    transform: rotate(8deg);
    transform-origin: center;
}

.cover-fall-leaf.leaf-sage {
    background: linear-gradient(145deg, #eef1e7 0 22%, #b8c6bf 23% 38%, #95aaa4 39% 66%, #748e88 67% 100%);
}

.cover-fall-leaf.leaf-sage-dark {
    background: linear-gradient(145deg, #dde7df 0 24%, #a0b2aa 25% 40%, #7f9891 41% 68%, #5f7c75 69% 100%);
}

.cover-fall-leaf.leaf-ivory {
    background: linear-gradient(145deg, #fffdf6 0 26%, #f3ecda 27% 56%, #e2d6bb 57% 78%, #cab999 79% 100%);
}

.cover-fall-particle:nth-child(1)  { --particle-x: 83%; --particle-size: 14px; --particle-duration: 13.6s; --particle-delay: -7.8s;  --travel-x: -170px; --travel-y: 452px; --particle-rotation: 10deg;  --particle-sway: 12px; --particle-opacity: .78; }
.cover-fall-particle:nth-child(2)  { --particle-x: 90%; --particle-size: 11px; --particle-duration: 15.4s; --particle-delay: -3.4s;  --travel-x: -208px; --travel-y: 498px; --particle-rotation: -18deg; --particle-sway: 9px;  --particle-opacity: .67; }
.cover-fall-particle:nth-child(3)  { --particle-x: 76%; --particle-size: 9px;  --particle-duration: 14.2s; --particle-delay: -10.7s; --travel-x: -132px; --travel-y: 390px; --particle-rotation: 28deg;  --particle-sway: 8px;  --particle-opacity: .60; }
.cover-fall-particle:nth-child(4)  { --particle-x: 94%; --particle-size: 15px; --particle-duration: 16.8s; --particle-delay: -6.2s;  --travel-x: -228px; --travel-y: 520px; --particle-rotation: -9deg;  --particle-sway: 14px; --particle-opacity: .74; }
.cover-fall-particle:nth-child(5)  { --particle-x: 87%; --particle-size: 12px; --particle-duration: 12.9s; --particle-delay: -1.8s;  --travel-x: -186px; --travel-y: 468px; --particle-rotation: 18deg;  --particle-sway: 10px; --particle-opacity: .72; }
.cover-fall-particle:nth-child(6)  { --particle-x: 79%; --particle-size: 10px; --particle-duration: 17.2s; --particle-delay: -12.4s; --travel-x: -148px; --travel-y: 430px; --particle-rotation: -26deg; --particle-sway: 11px; --particle-opacity: .59; }
.cover-fall-particle:nth-child(7)  { --particle-x: 92%; --particle-size: 8px;  --particle-duration: 14.8s; --particle-delay: -8.6s;  --travel-x: -214px; --travel-y: 478px; --particle-rotation: 12deg;  --particle-sway: 7px;  --particle-opacity: .56; }
.cover-fall-particle:nth-child(8)  { --particle-x: 74%; --particle-size: 13px; --particle-duration: 18.1s; --particle-delay: -14.2s; --travel-x: -122px; --travel-y: 405px; --particle-rotation: 24deg;  --particle-sway: 13px; --particle-opacity: .68; }
.cover-fall-particle:nth-child(9)  { --particle-x: 97%; --particle-size: 12px; --particle-duration: 15.2s; --particle-delay: -5.9s;  --travel-x: -236px; --travel-y: 508px; --particle-rotation: -14deg; --particle-sway: 9px;  --particle-opacity: .66; }
.cover-fall-particle:nth-child(10) { --particle-x: 85%; --particle-size: 10px; --particle-duration: 16.1s; --particle-delay: -9.9s;  --travel-x: -176px; --travel-y: 445px; --particle-rotation: 35deg;  --particle-sway: 10px; --particle-opacity: .60; }
.cover-fall-particle:nth-child(11) { --particle-x: 80%; --particle-size: 9px;  --particle-duration: 13.5s; --particle-delay: -4.5s;  --travel-x: -156px; --travel-y: 418px; --particle-rotation: -19deg; --particle-sway: 8px;  --particle-opacity: .58; }
.cover-fall-particle:nth-child(12) { --particle-x: 88%; --particle-size: 13px; --particle-duration: 17.5s; --particle-delay: -11.3s; --travel-x: -198px; --travel-y: 486px; --particle-rotation: 21deg;  --particle-sway: 12px; --particle-opacity: .64; }

@keyframes coverParticleFall {
    0% {
        opacity: 0;
        transform: translate3d(0, -10px, 0) rotate(var(--particle-rotation)) scale(.7);
    }
    10% {
        opacity: var(--particle-opacity);
        transform: translate3d(calc(var(--particle-sway) * .45), 18px, 0) rotate(calc(var(--particle-rotation) + 34deg)) scale(.9);
    }
    38% {
        opacity: var(--particle-opacity);
        transform: translate3d(calc(var(--travel-x) * .26 + var(--particle-sway)), calc(var(--travel-y) * .28), 0) rotate(calc(var(--particle-rotation) + 132deg)) scale(.98);
    }
    68% {
        opacity: calc(var(--particle-opacity) * .92);
        transform: translate3d(calc(var(--travel-x) * .63 - var(--particle-sway)), calc(var(--travel-y) * .66), 0) rotate(calc(var(--particle-rotation) + 248deg)) scale(1);
    }
    88% {
        opacity: calc(var(--particle-opacity) * .36);
        transform: translate3d(calc(var(--travel-x) * .9 + var(--particle-sway) * .35), calc(var(--travel-y) * .9), 0) rotate(calc(var(--particle-rotation) + 338deg)) scale(.9);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--travel-x), var(--travel-y), 0) rotate(calc(var(--particle-rotation) + 430deg)) scale(.82);
    }
}

@media (max-width: 520px) {
    .cover-falling-effect {
        top: -6%;
        right: -14%;
        bottom: -16%;
        left: 12%;
    }

    .cover-fall-particle:nth-child(3),
    .cover-fall-particle:nth-child(6),
    .cover-fall-particle:nth-child(8),
    .cover-fall-particle:nth-child(11) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cover-falling-effect {
        display: none;
    }
}

/* MÚSICA */
.music-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 18px 0; }
.music-controls img { width: 70px; max-height: 60px; object-fit: contain; }
.play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 2px solid var(--tpl-gold);
    border-radius: 50%;
    color: var(--tpl-gold);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    transition: transform .25s, color .25s, background .25s, box-shadow .25s;
}
.play-btn:hover { color: #fff; background: var(--tpl-gold); box-shadow: 0 0 15px rgba(201,169,110,.6); transform: scale(1.08); }
.play-btn:active { transform: scale(.95); }
.play-btn.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(201,169,110,.6); } 70% { box-shadow: 0 0 0 15px rgba(201,169,110,0); } 100% { box-shadow: 0 0 0 0 rgba(201,169,110,0); } }
@keyframes flotarIzq { 0%,100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-6px); } }
@keyframes flotarDer { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.musica-izq { animation: flotarIzq 3s ease-in-out infinite; }
.musica-der { animation: flotarDer 3s ease-in-out 1.5s infinite; }
.featured-phrase { margin-top: 20px; color: #403a36; font-family: 'Playfair Display', serif; font-size: .98rem; font-weight: 600; line-height: 1.65; }
.muted-template { color: var(--tpl-muted) !important; }

/* PERSONAS */
.people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.people-grid h3,
.special-people h3 { color: var(--tpl-maroon); font-size: 1rem; }
.people-grid p,
.special-people p { margin-bottom: 5px; font-size: .84rem; }
.special-people { display: grid; gap: 15px; }
.special-people article + article { padding-top: 14px; border-top: 1px solid rgba(201,169,110,.35); }
.separador { display: flex; align-items: center; width: 150px; margin: 22px auto; }
.separador::before,
.separador::after { content: ''; flex: 1; height: 2px; background: var(--tpl-gold); }
.punto { width: 8px; height: 8px; margin: 0 10px; border-radius: 50%; background: var(--tpl-gold); }

/* FECHA, PERGAMINO HORIZONTAL Y CONTADOR */
.event-date-heading,
.event-date-subheading {
    margin: 0;
    color: var(--tpl-maroon);
    font-family: 'Great Vibes', cursive;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}

.event-date-heading {
    margin-bottom: 12px;
    font-size: clamp(2.8rem, 8vw, 3.65rem);
}

.event-date-subheading {
    margin: 8px 0 10px;
    font-size: clamp(2.35rem, 7vw, 3.1rem);
}

.event-parchment-horizontal {
    position: relative;
    left: 50%;
    width: 110%;
    max-width: 410px;
    margin: 10px 0 6px;
    aspect-ratio: 16 / 7;
    transform: translateX(-50%);
}

.event-parchment-base,
.event-parchment-texture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
}

.event-parchment-base { z-index: 1; }

.event-parchment-photo-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
}

.has-mini-parchment .event-parchment-photo-wrap,
.has-mini-parchment .event-parchment-fade {
    -webkit-mask-image: var(--tpl-pergamino-mask, none);
    mask-image: var(--tpl-pergamino-mask, none);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}

.no-mini-parchment {
    padding: 9px;
    border: 1px solid #dacbb6;
    border-radius: 8px;
    background: linear-gradient(145deg, #f6ead8, #e6d0b0);
}

.no-mini-parchment .event-parchment-photo-wrap {
    inset: 9px;
    border-radius: 4px;
}

.event-parchment-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
    transform: scale(1.035);
    filter: grayscale(1) contrast(1.08) brightness(1.03);
}

.event-parchment-texture {
    z-index: 3;
    opacity: .36;
    mix-blend-mode: multiply;
}

.event-parchment-fade {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(236,221,193,.23) 0%,
            rgba(236,221,193,.02) 25%,
            rgba(236,221,193,0) 51%,
            rgba(236,221,193,.15) 72%,
            rgba(236,221,193,.82) 100%
        ),
        radial-gradient(
            ellipse at center,
            rgba(236,221,193,0) 35%,
            rgba(236,221,193,.08) 57%,
            rgba(236,221,193,.35) 79%,
            rgba(236,221,193,.78) 100%
        );
}

.event-weekday { margin: 8px 0 2px !important; color: var(--tpl-accent); font-size: clamp(2.2rem, 11vw, 3rem); text-transform: uppercase; }
.event-date { color: var(--tpl-accent) !important; font-size: 1.12rem !important; letter-spacing: .09em; }
.event-time { color: var(--tpl-maroon) !important; font-weight: 600; }
.count { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.count div { min-width: 0; flex: 1 1 0; }
.count span {
    display: block;
    padding: 10px 4px;
    border: 1px solid #e5dcc7;
    border-radius: 8px;
    color: var(--tpl-accent);
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.75rem, 9vw, 2.6rem);
    background: #fdfaf6;
}
.count small { display: block; margin-top: 5px; color: #59293a; font-size: .58rem; font-weight: 600; letter-spacing: .08em; }

/* CALENDARIO Y LUGARES */
.calendar-widget { position: relative; max-width: 315px; margin: 20px auto 26px; overflow: hidden; border: 1px solid #f0e9df; border-radius: 16px; background: #fff; box-shadow: 0 8px 25px rgba(0,0,0,.08); }
.calendar-widget::before { content: ''; position: absolute; inset: 8px; border: 1px solid #e5dcc7; border-radius: 12px; pointer-events: none; }
.calendar-header { padding: 14px 0; border-bottom: 1px solid #f0e9df; color: var(--tpl-maroon); font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 600; letter-spacing: .05em; background: linear-gradient(135deg, #fbf6ef, #f3ede4); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 15px; }
.calendar-day-name { margin-bottom: 7px; color: var(--tpl-accent); font-size: .72rem; font-weight: 600; text-align: center; }
.calendar-day,
.calendar-empty { position: relative; min-height: 34px; padding: 8px 0; border-radius: 6px; color: #555; font-size: .85rem; text-align: center; }
.calendar-day:hover { background: #fdf6ee; }
.calendar-day.marked { z-index: 1; color: #fff; font-weight: 700; }
.calendar-day.marked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 36px;
    height: 36px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,85 C20,65 10,40 20,20 C30,5 50,20 50,20 C50,20 70,5 80,20 C90,40 80,65 50,85 Z' fill='%23c94b4b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translate(-50%, -50%);
    animation: heartbeat 1.8s infinite;
}
@keyframes heartbeat { 0%,40%,100% { transform: translate(-50%,-50%) scale(1); filter: drop-shadow(0 0 0 rgba(201,75,75,.3)); } 25%,60% { transform: translate(-50%,-50%) scale(1.16); filter: drop-shadow(0 0 8px rgba(201,75,75,.7)); } }
.venue-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 15px 0 8px; }
.venue-grid article { padding: 16px 12px; border: 1px solid rgba(201,169,110,.45); border-radius: 10px; background: rgba(255,255,255,.5); }
.venue-grid h3 { color: var(--tpl-maroon); font-size: 1.05rem; }
.location-icon { width: 52px; max-height: 52px; margin: 10px 0 14px; object-fit: contain; }
.corner { position: absolute; width: 45%; max-width: 190px; opacity: .5; pointer-events: none; }
.corner-top-left { bottom: -38px; left: -8px; }
.corner-bottom-right { top: -38px; right: -8px; transform: rotate(180deg); }

/* BOTONES */
.btn-dark-blue,
.btn-maroon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 24px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-size: .88rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s, filter .2s;
}
.btn-dark-blue { background: var(--tpl-button); }
.btn-maroon { background: var(--tpl-maroon); }
.btn-dark-blue:hover,
.btn-maroon:hover { color: #fff; filter: brightness(.92); transform: translateY(-1px); }
.btn-dark-blue:disabled { cursor: not-allowed; opacity: .55; }

/* VESTIMENTA */
.dress-grid { display: flex; justify-content: center; gap: 42px; margin-top: 20px; }
.dress-grid > div { width: 120px; }
.img-estilo { width: 100px; height: 120px; margin-bottom: 10px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(107,62,56,.5)); transition: transform .3s, filter .3s; }
.img-estilo:hover { filter: drop-shadow(0 0 10px rgba(107,62,56,.7)); transform: scale(1.05); }
.dress-note { margin-top: 18px !important; font-size: .84rem !important; font-weight: 600; }

/* ITINERARIO */
.timeline-zigzag { position: relative; max-width: 100%; margin: 0 auto; padding: 20px 0; }
.timeline-zigzag::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--tpl-maroon); transform: translateX(-50%); }
.zigzag-item { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 35px; }
.zigzag-item:last-child { margin-bottom: 0; }
.zigzag-item::after { content: ''; position: absolute; top: 50%; left: 50%; z-index: 2; width: 12px; height: 12px; border: 2px solid var(--tpl-maroon); border-radius: 50%; background: #fbf6ef; transform: translate(-50%,-50%); }
.zigzag-left,
.zigzag-right { width: 45%; }
.zigzag-item:nth-child(odd) .zigzag-left { padding-right: 15px; text-align: right; }
.zigzag-item:nth-child(odd) .zigzag-right { display: flex; align-items: center; justify-content: flex-start; padding-left: 15px; }
.zigzag-item:nth-child(even) .zigzag-left { display: flex; align-items: center; justify-content: flex-end; padding-right: 15px; }
.zigzag-item:nth-child(even) .zigzag-right { padding-left: 15px; text-align: left; }
.zigzag-img { width: 44px; height: 44px; object-fit: contain; }
.timeline-symbol { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--tpl-maroon); background: #f7eee5; }
.zigzag-time { color: #333; font-size: .95rem; font-weight: 600; }
.zigzag-text { color: #666; font-size: .86rem; }
.zigzag-item small { display: block; margin-top: 3px; color: #837a73; font-size: .72rem; line-height: 1.35; }

/* REGALOS, RSVP Y FIRMAS */
.gift-list { display: grid; gap: 12px; margin-top: 20px; }
.gift-list article { display: grid; gap: 6px; padding: 16px; border: 1px solid #e5dcc7; border-radius: 10px; background: rgba(255,255,255,.56); }
.gift-list article strong { color: var(--tpl-maroon); }
.gift-list article span { font-size: .84rem; overflow-wrap: anywhere; }
.gift-list article a { color: var(--tpl-button); font-size: .86rem; font-weight: 600; }
.gift-qr { width: 130px; margin: 10px auto 0; }
.reconfirmation-box { margin: 16px 0; padding: 15px; border: 1px solid var(--tpl-gold); border-radius: 10px; color: #51483f; background: #fffaf0; line-height: 1.55; }
.rsvp-form,
.signature-form { display: grid; gap: 13px; margin-top: 18px; text-align: left; }
.rsvp-form label,
.signature-form label { display: grid; gap: 6px; color: #5d554e; font-size: .84rem; font-weight: 600; }
.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea,
.signature-form textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #e5dcc7;
    border-radius: 8px;
    color: #332f2c;
    background: #faf8f5;
    outline: none;
}
.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus,
.signature-form textarea:focus { border-color: var(--tpl-maroon); background: #fff; box-shadow: 0 0 0 3px rgba(107,62,56,.1); }
.rsvp-form .btn-dark-blue,
.signature-form .btn-maroon { width: 100%; }
.invite-name { padding: 12px; border-radius: 9px; color: #4c443e !important; background: rgba(201,169,110,.12); text-align: center; }
.signature-list { display: grid; gap: 12px; margin: 18px 0; }
.signature-list blockquote { margin: 0; padding: 16px; border-left: 3px solid var(--tpl-gold); color: #4c4540; font-family: 'Playfair Display', serif; font-style: italic; background: rgba(255,255,255,.5); text-align: left; }
.signature-list cite { display: block; margin-top: 8px; color: var(--tpl-maroon); font-family: 'Inter', sans-serif; font-size: .78rem; font-style: normal; font-weight: 600; }

/* GALERÍA */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.gallery-grid figure { margin: 0; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.gallery-grid img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.gallery-grid figcaption { padding: 8px; color: #6c625b; font-size: .72rem; }
.extra-section div { color: #47423e; font-family: 'Playfair Display', serif; line-height: 1.65; }

/* PIE */
.template-footer { position: relative; padding: 32px 15px 12px; color: #443d37; text-align: center; }
.template-footer h2 { margin: 8px 0 18px; font-size: 1.8rem; }
.template-footer > strong,
.template-footer > span,
.template-footer > small { display: block; margin-top: 4px; }
.template-footer > small { margin-top: 8px; color: #756c65; font-size: .7rem; }
.monogram-wrap { position: relative; width: 130px; height: 110px; margin: 0 auto 10px; }
.monogram-wrap > img { position: absolute; inset: 5px -15px auto; width: 160px; }
.monograma { position: absolute; top: 50%; left: 50%; width: 95px; height: 95px; color: var(--tpl-accent); font-family: 'Great Vibes', cursive; transform: translate(-50%,-50%); }
.monograma .j { position: absolute; top: 0; left: 10px; font-size: 2.2rem; }
.monograma .amp { position: absolute; top: 50%; left: 50%; font-size: 1.5rem; transform: translate(-50%,-50%); }
.monograma .s { position: absolute; right: 10px; bottom: 0; font-size: 2.2rem; }
.close-private-access { margin-top: 16px; padding: 8px 13px; border: 1px solid rgba(107,62,56,.35); border-radius: 7px; color: var(--tpl-maroon); font-size: .74rem; background: transparent; cursor: pointer; }

/* Aparición progresiva de cada sección al entrar en pantalla */
.fade-item {
    opacity: 0;
    filter: blur(3px);
    transform: translate3d(0, 42px, 0) scale(.985);
    transition:
        opacity .85s cubic-bezier(.22, 1, .36, 1),
        transform .85s cubic-bezier(.22, 1, .36, 1),
        filter .65s ease;
    will-change: opacity, transform, filter;
}
.fade-item.show {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

/* Aparición escalonada de los elementos internos de cada sección */
.reveal-element {
    opacity: 0;
    filter: blur(2px);
    translate: var(--reveal-x, 0) 22px;
    transition:
        opacity .62s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
        translate .62s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
        filter .48s ease var(--reveal-delay, 0ms);
    will-change: opacity, translate, filter;
}

.reveal-element.element-show {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
}


/* ================================================================
   PARCIALES EXTERNOS INTEGRADOS AL DISEÑO PERGAMINO
   QR de ingreso y carga de fotografías usan la misma tarjeta,
   textura y animación que el resto de la invitación.
   ================================================================ */
.integrated-guest-card {
    isolation: isolate;
    overflow: hidden;
}

/* Quita únicamente la tarjeta blanca exterior generada por el parcial.
   Las tarjetas internas de cada QR conservan su borde y separación. */
.integrated-guest-card > section,
.integrated-guest-card > div {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.integrated-guest-card h1,
.integrated-guest-card h2,
.integrated-guest-card h3 {
    color: var(--tpl-maroon) !important;
    font-family: 'Playfair Display', serif !important;
}

.integrated-guest-card p,
.integrated-guest-card label,
.integrated-guest-card small {
    color: #47423e;
}

.integrated-guest-card form {
    width: 100%;
}

.integrated-guest-card input,
.integrated-guest-card select,
.integrated-guest-card textarea {
    width: 100%;
    border: 1px solid #e5dcc7 !important;
    border-radius: 10px !important;
    color: #332f2c;
    background: rgba(250, 248, 245, .92) !important;
}

.integrated-guest-card input[type="file"] {
    padding: 8px !important;
}

.integrated-guest-card input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 9px 13px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    background: var(--tpl-maroon);
}

.integrated-guest-card button,
.integrated-guest-card input[type="submit"] {
    border-radius: 9px !important;
}

/* La sección extensa no se desvanece completa: solo sus elementos. */
.reveal-by-element {
    opacity: 1;
    filter: none;
    transform: none;
}

@media (max-width: 520px) {
    .reveal-by-element .reveal-element {
        --reveal-x: 0px !important;
        translate: 0 18px;
    }

    .integrated-guest-card > section,
    .integrated-guest-card > div {
        min-width: 0 !important;
    }
}

@supports not ((-webkit-mask-image: var(--tpl-pergamino-mask, none)) or (mask-image: var(--tpl-pergamino-mask, none))) {
    .has-parchment .photo-mask,
    .has-parchment .photo-fade { inset: 3.2% 4.2% 4.3%; border-radius: 8px; -webkit-mask-image: none; mask-image: none; }

    .has-mini-parchment .event-parchment-photo-wrap,
    .has-mini-parchment .event-parchment-fade {
        inset: 8% 5%;
        border-radius: 9px;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (max-width: 520px) {
    body.tpl-pergamino { background-attachment: scroll; }
    .invitation-column {
        width: 100%;
        padding-inline: 10px;
    }
    .info-card { padding: 26px 16px; }
    .cover-card { padding: 8px; }
    .cover-border-inner { padding: 1.8%; }
    .people-grid { gap: 11px; }
    .event-parchment-horizontal {
        width: min(100%, 330px);
        aspect-ratio: 15 / 7;
        margin-top: 6px;
    }
    .event-date-heading { font-size: clamp(2.55rem, 12vw, 3.15rem); }
    .event-date-subheading { font-size: clamp(2.15rem, 10vw, 2.8rem); }
    .count { gap: 5px; }
    .count span { font-size: 1.75rem; }
    .calendar-grid { gap: 3px; padding: 13px; }
    .calendar-day,
    .calendar-empty { min-height: 31px; padding: 7px 0; }
    .dress-grid { gap: 20px; }
    .gallery-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 360px) {
    .people-grid { grid-template-columns: 1fr; }
    .count small { font-size: .5rem; }
    .dress-grid { gap: 8px; }
    .dress-grid > div { width: 105px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .fade-item,
    .reveal-element,
    .reveal-by-element {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        translate: none !important;
    }
}

/* ===================================================================
   CORRECCIÓN 2.6.2: RESTAURACIÓN DE BLOQUES VISUALES ORIGINALES
   =================================================================== */
.music-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    min-height: 62px;
}
.music-art img { display: block; width: 76px; max-height: 62px; object-fit: contain; }
.music-note-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(201,169,110,.45);
    border-radius: 50%;
    color: var(--tpl-gold);
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    background: rgba(255,255,255,.45);
}
.music-art-left .music-note-fallback { transform: rotate(-12deg); }
.music-art-right .music-note-fallback { transform: rotate(12deg); }
.music-unavailable { opacity: .82; }
.play-btn:disabled {
    cursor: not-allowed;
    opacity: .58;
    box-shadow: none;
    transform: none;
}
.play-btn:disabled:hover {
    color: var(--tpl-gold);
    background: transparent;
    box-shadow: none;
    transform: none;
}

.original-role-block {
    text-align: center;
}
.original-role-block h3,
.godparents-grid h3 {
    color: var(--tpl-maroon);
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
}
.original-role-block p {
    margin-bottom: 5px;
    font-size: .84rem;
}
.godparents-grid { margin-top: 0; }

.gifts-section {
    position: relative;
    z-index: 20;
    overflow: visible;
    isolation: visible;
}

.gift-flower-decoration {
    position: absolute;

    top: -12%;
    bottom: calc(100% - 28px);
    right: -52px;

    z-index: 30;
    display: block;
    width: 60%;
    max-width: 270px;
    height: auto;

    pointer-events: none;
    transform: rotate(180deg);
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.22));
}

.gifts-section > *:not(.gift-flower-decoration) {
    position: relative;
    z-index: 2;
}

.gifts-section {
    margin-top: 25px;
}
.section-icon-wrap {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    margin-bottom: 8px;
}
.section-icon-wrap img { display: block; object-fit: contain; }
.section-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(201,169,110,.5);
    border-radius: 50%;
    color: var(--tpl-maroon);
    font-size: 1.8rem;
    background: rgba(255,255,255,.58);
}
.album-qr-decoration {
    width: 120px;
    max-height: 120px;
    object-fit: contain;
}
.children-section > div:last-child,
.extra-section > div:last-child {
    color: #47423e;
    font-family: 'Playfair Display', serif;
    line-height: 1.65;
}
.final-flower-decoration {
    position: absolute;
    top: -48px;
    left: -72px;
    z-index: 0;
    width: calc(100% + 144px);
    max-width: none;
    pointer-events: none;
    transform: rotate(180deg);
    opacity: .96;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.22));
}
.template-footer > *:not(.final-flower-decoration) {
    position: relative;
    z-index: 1;
}

@media (max-width: 430px) {
    .music-controls { gap: 10px; }
    .music-art { width: 64px; }
    .music-art img { width: 62px; }
}

/* Opciones múltiples de regalo */
.gift-list .gift-card{align-content:start}.gift-kind{display:inline-flex;width:max-content;margin:0 auto 2px;padding:4px 9px;border-radius:999px;background:#f1e8d8;color:#7b5841;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.gift-card--billetera_digital .gift-kind{background:#eee8f8;color:#725296}.gift-card--enlace_externo .gift-kind{background:#e8f2e7;color:#4f7452}.gift-description{margin:2px 0 5px!important;font-size:.82rem!important;line-height:1.45!important}.gift-list article b{font-weight:700}

/* ===================================================================
   CORRECCIÓN 2.6.10: CIERRE ORIGINAL DE PERGAMINO ROMÁNTICO
   Conserva la tarjeta final del modelo recibido: política de adultos,
   mensaje “Te esperamos”, trigo, monograma y flor final.
   =================================================================== */
.children-final-card {
    overflow: visible;
    padding-bottom: 0;
}

.children-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    margin-bottom: 1rem;
}

.children-icon-wrap img {
    display: block;
    width: 60px;
    height: auto;
    object-fit: contain;
}

.children-main-copy {
    margin-bottom: 10px !important;
    color: #333 !important;
    font-size: 1rem !important;
}

.children-detail-copy {
    color: #555 !important;
}

.final-message-block {
    position: relative;
    margin-top: 3rem;
    padding-bottom: 50px;
    text-align: center;
    isolation: isolate;
}

.final-message-block > *:not(.final-flower-decoration) {
    position: relative;
    z-index: 4;
}

.final-emotional-copy {
    color: #444 !important;
    font-weight: 600;
}


/* Foto 3 de cierre con forma orgánica y corazones descendentes */
.final-photo-showcase {
    position: relative;
    width: min(100%, 255px);
    min-height: 245px;
    margin: 18px auto 22px;
    isolation: isolate;
}

.final-photo-frame {
    position: relative;
    z-index: 4;
    width: 100%;
    aspect-ratio: 4 / 4.7;
    margin: 0 auto;
    overflow: hidden;
    border: 7px solid rgba(255, 250, 242, .94);
    border-radius: 47% 53% 44% 56% / 39% 42% 58% 61%;
    background: linear-gradient(145deg, #f8eee2, #ead7be);
    box-shadow:
        0 13px 26px rgba(83, 57, 38, .20),
        0 0 0 1px rgba(201, 169, 110, .24),
        inset 0 0 0 1px rgba(255, 255, 255, .55);
    transform: rotate(-3deg);
}

.final-photo-frame::before {
    content: '';
    position: absolute;
    inset: 7px;
    z-index: 3;
    border: 1px solid rgba(201, 169, 110, .42);
    border-radius: inherit;
    pointer-events: none;
}

.final-photo-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 248, 237, .10) 0%,
            rgba(255, 248, 237, 0) 52%,
            rgba(109, 68, 51, .13) 100%
        );
    pointer-events: none;
}

.final-photo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
    transform: scale(1.045);
    filter: contrast(1.03) brightness(1.02) saturate(.92);
}

.final-photo-glow {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 30px rgba(255, 246, 231, .42),
        inset 0 -24px 35px rgba(98, 58, 43, .10);
}

.heart-fall {
    --heart-drift: 0px;
    position: absolute;
    top: -20px;
    z-index: 7;
    color: rgba(148, 70, 78, .82);
    font-size: 1rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .65),
        0 3px 6px rgba(107, 62, 56, .18);
    animation: finalHeartFall 5.2s linear infinite;
}

.heart-1 { left: 7%;  --heart-drift: 13px;  animation-delay: 0s; }
.heart-2 { left: 24%; --heart-drift: -10px; animation-delay: .85s; font-size: .78rem; }
.heart-3 { left: 43%; --heart-drift: 9px;   animation-delay: 1.65s; font-size: 1.12rem; }
.heart-4 { left: 61%; --heart-drift: -12px; animation-delay: 2.45s; font-size: .86rem; }
.heart-5 { left: 78%; --heart-drift: 11px;  animation-delay: 3.25s; }
.heart-6 { left: 91%; --heart-drift: -8px;  animation-delay: 4.05s; font-size: .72rem; }

@keyframes finalHeartFall {
    0% {
        opacity: 0;
        transform: translate3d(0, -14px, 0) rotate(-10deg) scale(.58);
    }
    12% {
        opacity: .92;
    }
    55% {
        opacity: .78;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--heart-drift), 248px, 0) rotate(26deg) scale(1.06);
    }
}

.final-message-block h2 {
    margin-bottom: 1.5rem;
    color: #333;
    font-size: 1.8rem;
}

.original-monogram-wrap {
    position: relative;
    z-index: 4;
    width: 120px;
    height: 112px;
    margin: 0 auto;
}

.original-monogram-wrap > img {
    position: relative;
    top: 5px;
    left: -15px;
    display: block;
    width: 130%;
    max-width: none;
}

.original-monogram-wrap .monograma {
    top: 69%;
}

.final-message-block .final-flower-decoration {
    position: absolute;
    top: 45%;
    left: -70px;
    z-index: 3;
    width: 134%;
    max-width: none;
    height: auto;
    pointer-events: none;
    transform: rotate(180deg);
    opacity: 1;
    filter:
        drop-shadow(0 6px 10px rgba(0,0,0,.25))
        drop-shadow(0 -2px 3px rgba(255,255,255,.6));
}

.template-system-footer {
    top: auto;
    position: relative;
    z-index: 5;
    padding: 2px 15px 22px;
    color: #756c65;
    font-size: .7rem;
    text-align: center;
}

.template-system-footer small {
    display: block;
}

.template-system-footer form {
    margin: 0;
}

@media (max-width: 520px) {
    .final-photo-showcase {
        width: min(100%, 220px);
        min-height: 218px;
        margin: 16px auto 20px;
    }

    .final-photo-frame {
        border-width: 6px;
    }

    .heart-fall {
        font-size: .9rem;
    }

    @keyframes finalHeartFall {
        0% {
            opacity: 0;
            transform: translate3d(0, -12px, 0) rotate(-10deg) scale(.58);
        }
        12% {
            opacity: .9;
        }
        55% {
            opacity: .74;
        }
        100% {
            opacity: 0;
            transform: translate3d(var(--heart-drift), 218px, 0) rotate(24deg) scale(1);
        }
    }
}

@media (max-width: 520px) {
    /* CIERRE MÓVIL: la última tarjeta termina donde termina florfinal.webp. */
    .children-final-card {
        margin-bottom: 0;
        padding-bottom: 0;
        overflow: visible;
    }

    .final-message-block {
        margin-bottom: 0;
        padding-bottom: 0;
        overflow: visible;
    }

    /* Sustituye los saltos usados como espaciadores de escritorio. */
    .original-monogram-wrap > br,
    .final-message-block > br,
    body.tpl-pergamino > br {
        display: none;
    }

    .final-message-block .final-flower-decoration {
        position: relative;
        top: auto;
        left: 50%;
        z-index: 3;
        display: block;
        width: 134%;
        max-width: none;
        height: auto;
        margin: -100px 0 -125px;
        transform: translateX(-50%) rotate(180deg);
        transform-origin: center;
    }

    .invitation-column {
        padding-bottom: 0;
    }

    .template-system-footer {
        top: auto;
        margin-top: 0;
        padding: 65px 15px 22px;
    }
}

.event-reservation-card {
    position: relative;
    z-index: 12;
    overflow: visible;
    isolation: isolate;
}

.event-reservation-card + .info-card {
    position: relative;
    z-index: 2;
}

.blessing-content,
.event-date-content,
.reservation-content {
    position: relative;
    z-index: 4;
}

.blessing-content + .event-date-content {
    margin-top: 44px;
}

.ornament-divider {
    position: relative;
    z-index: 30;
    width: calc(100% + 40px);
    height: 92px;
    margin: 12px -20px -8px;
    overflow: visible;
    pointer-events: none;
}

.ornament-divider-image {
    position: absolute;
    top: 780%;
    left: -10px;
    z-index: 31;
    display: block;
    width: 48%;
    max-width: 210px;
    height: auto;
    opacity: 1;
    transform: translateY(-50%);
    filter:
        drop-shadow(0 7px 10px rgba(0,0,0,.22))
        drop-shadow(0 -2px 3px rgba(255,255,255,.6));
}

.reservation-content {
    padding-top: 0%;
}

.ornament-card-overlap {
    position: absolute;
    z-index: 35;
    display: block;
    width: 48%;
    max-width: 210px;
    height: auto;
    opacity: 1;
    pointer-events: none;
    filter:
        drop-shadow(0 7px 10px rgba(0,0,0,.22))
        drop-shadow(0 -2px 3px rgba(255,255,255,.6));
}

.ornament-card-overlap-right {
    top: -40px;
    right: -10px;
    bottom: auto;
    transform: rotate(180deg);
}


.event-reservation-card ~ .info-card {
    position: relative;
}

@media (max-width: 520px) {
 
    .event-reservation-card {
        overflow: visible;
    }

    .ornament-divider {
        position: absolute;
        inset: 0;
        z-index: 30;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        pointer-events: none;
    }

    .ornament-divider-image {
        top: auto;
        bottom: -40px;
        left: -10px;
        width: 48%;
        max-width: 210px;
        height: auto;
        transform: none;
    }

    .ornament-card-overlap-right {
        top: -40px;
        right: -10px;
        bottom: auto;
        width: 48%;
        max-width: 210px;
        height: auto;
    }
}

.gifts-section {
    width: 100%;
    padding-top: 42px;
}

.gifts-section--without-options {
    padding-bottom: 38px;
}

.gifts-section--with-options {
    padding-bottom: 30px;
}

.gift-flower-decoration {
    top: -75px;
    right: -42px;
    bottom: auto;
    z-index: 1;
    width: clamp(190px, 60%, 270px);
    max-width: 270px;
}

.gifts-section > *:not(.gift-flower-decoration) {
    z-index: 2;
}

.gifts-section--without-options > p:last-of-type {
    max-width: 330px;
    margin-right: auto;
    margin-left: auto;
}

/* Escarcha decorativa contenida dentro del calendario. */
.calendar-widget {
    isolation: isolate;
}

.calendar-widget::before {
    z-index: 4;
}

.calendar-header,
.calendar-grid {
    position: relative;
    z-index: 2;
}

.calendar-glitter {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.calendar-glitter-particle {
    --glitter-left: 50%;
    --glitter-size: 4px;
    --glitter-duration: 6.8s;
    --glitter-delay: 0s;
    --glitter-drift: 8px;

    position: absolute;
    top: -14px;
    left: var(--glitter-left);
    display: block;
    width: var(--glitter-size);
    height: var(--glitter-size);
    border-radius: 42% 58% 55% 45%;
    opacity: 0;
    transform: translate3d(0, -14px, 0) rotate(0);
    will-change: transform, opacity;
    animation: calendarGlitterFall var(--glitter-duration) linear var(--glitter-delay) infinite;
}

.calendar-glitter-particle::after {
    content: '';
    position: absolute;
    inset: 35%;
    border-radius: 50%;
    background: rgba(255,255,255,.82);
    box-shadow: 0 0 4px rgba(255,255,255,.82);
}

.glitter-wine {
    background: linear-gradient(145deg, #b65a79 0%, #7c2948 52%, #4d1830 100%);
    box-shadow: 0 0 5px rgba(124,41,72,.52);
}

.glitter-navy {
    background: linear-gradient(145deg, #52739b 0%, #183b63 52%, #0b223d 100%);
    box-shadow: 0 0 5px rgba(24,59,99,.52);
}

.calendar-glitter-particle:nth-child(1)  { --glitter-left: 7%;  --glitter-size: 3px; --glitter-duration: 6.2s; --glitter-delay: -1.7s; --glitter-drift: 10px; }
.calendar-glitter-particle:nth-child(2)  { --glitter-left: 13%; --glitter-size: 5px; --glitter-duration: 7.4s; --glitter-delay: -5.4s; --glitter-drift: -8px; }
.calendar-glitter-particle:nth-child(3)  { --glitter-left: 19%; --glitter-size: 4px; --glitter-duration: 5.9s; --glitter-delay: -3.2s; --glitter-drift: 7px; }
.calendar-glitter-particle:nth-child(4)  { --glitter-left: 26%; --glitter-size: 3px; --glitter-duration: 7.8s; --glitter-delay: -6.6s; --glitter-drift: -11px; }
.calendar-glitter-particle:nth-child(5)  { --glitter-left: 32%; --glitter-size: 5px; --glitter-duration: 6.7s; --glitter-delay: -2.4s; --glitter-drift: 9px; }
.calendar-glitter-particle:nth-child(6)  { --glitter-left: 38%; --glitter-size: 4px; --glitter-duration: 8.1s; --glitter-delay: -7.2s; --glitter-drift: -6px; }
.calendar-glitter-particle:nth-child(7)  { --glitter-left: 44%; --glitter-size: 3px; --glitter-duration: 6.1s; --glitter-delay: -.8s; --glitter-drift: 12px; }
.calendar-glitter-particle:nth-child(8)  { --glitter-left: 50%; --glitter-size: 5px; --glitter-duration: 7.1s; --glitter-delay: -4.3s; --glitter-drift: -10px; }
.calendar-glitter-particle:nth-child(9)  { --glitter-left: 56%; --glitter-size: 4px; --glitter-duration: 6.4s; --glitter-delay: -5.8s; --glitter-drift: 8px; }
.calendar-glitter-particle:nth-child(10) { --glitter-left: 62%; --glitter-size: 3px; --glitter-duration: 8.4s; --glitter-delay: -2.1s; --glitter-drift: -12px; }
.calendar-glitter-particle:nth-child(11) { --glitter-left: 68%; --glitter-size: 5px; --glitter-duration: 6.8s; --glitter-delay: -6.9s; --glitter-drift: 9px; }
.calendar-glitter-particle:nth-child(12) { --glitter-left: 74%; --glitter-size: 4px; --glitter-duration: 7.6s; --glitter-delay: -3.7s; --glitter-drift: -7px; }
.calendar-glitter-particle:nth-child(13) { --glitter-left: 80%; --glitter-size: 3px; --glitter-duration: 6.0s; --glitter-delay: -4.9s; --glitter-drift: 11px; }
.calendar-glitter-particle:nth-child(14) { --glitter-left: 86%; --glitter-size: 5px; --glitter-duration: 8.0s; --glitter-delay: -1.4s; --glitter-drift: -9px; }
.calendar-glitter-particle:nth-child(15) { --glitter-left: 92%; --glitter-size: 4px; --glitter-duration: 6.6s; --glitter-delay: -5.1s; --glitter-drift: 7px; }
.calendar-glitter-particle:nth-child(16) { --glitter-left: 23%; --glitter-size: 2px; --glitter-duration: 5.7s; --glitter-delay: -2.9s; --glitter-drift: -6px; }
.calendar-glitter-particle:nth-child(17) { --glitter-left: 59%; --glitter-size: 2px; --glitter-duration: 7.0s; --glitter-delay: -6.1s; --glitter-drift: 6px; }
.calendar-glitter-particle:nth-child(18) { --glitter-left: 83%; --glitter-size: 2px; --glitter-duration: 6.3s; --glitter-delay: -3.9s; --glitter-drift: -5px; }

@keyframes calendarGlitterFall {
    0% {
        opacity: 0;
        transform: translate3d(0, -14px, 0) rotate(0deg) scale(.65);
    }
    10% {
        opacity: .86;
    }
    52% {
        opacity: .72;
        transform: translate3d(var(--glitter-drift), 150px, 0) rotate(210deg) scale(1);
    }
    88% {
        opacity: .34;
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(var(--glitter-drift) * -.35), 330px, 0) rotate(430deg) scale(.72);
    }
}

@media (max-width: 520px) {
    body.tpl-pergamino {
        background-size: auto 100vh;
        background-position: center top;
    }

    .invitation-column {
        width: calc(100% - 16px);
        max-width: 500px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .gifts-section {
        margin-top: 28px;
        padding: 38px 15px 30px;
    }

    .gifts-section--without-options {
        padding-bottom: 34px;
    }

    .gift-flower-decoration {
        top: -75px;
        right: -42px;
        bottom: auto;
        width: clamp(190px, 60%, 270px);
        max-width: 270px;
        height: auto;
        object-fit: contain;
    }

    .calendar-glitter-particle:nth-child(4n) {
        display: none;
    }
}

@media (max-width: 360px) {
    .invitation-column {
        width: calc(100% - 10px);
        padding-right: 6px;
        padding-left: 6px;
    }

    .gifts-section {
        padding-right: 13px;
        padding-left: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-glitter {
        display: none;
    }
}

@media (max-width: 520px) {
    .cover-flower-bottom {
        bottom: -14%;
        left: -12.3%;
        width: 60%;
        max-width: none;
        height: auto;
        object-fit: contain;
    }
}

/* Mensaje exclusivo para invitados VIP cuando la ceremonia es privada */
.vip-ceremony-message {
    position: relative;
    max-width: 355px;
    margin: 18px auto 22px;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid rgba(107, 62, 56, .30);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 250, 244, .94), rgba(244, 230, 218, .90)),
        var(--tpl-papeltextura, none);
    box-shadow: 0 7px 18px rgba(75, 47, 39, .10);
}

.vip-ceremony-message::before,
.vip-ceremony-message::after {
    content: '✦';
    position: absolute;
    color: rgba(107, 62, 56, .36);
    font-size: 1rem;
}

.vip-ceremony-message::before { top: 8px; left: 11px; }
.vip-ceremony-message::after { right: 11px; bottom: 8px; }

.vip-ceremony-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--tpl-maroon);
    font-family: 'Playfair Display', serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.vip-ceremony-message p {
    margin: 0 !important;
    color: #51443f !important;
    font-family: 'Playfair Display', serif;
    font-size: .94rem !important;
    font-style: italic;
    line-height: 1.65 !important;
}

@media (max-width: 520px) {
    .vip-ceremony-message {
        margin: 16px auto 20px;
        padding: 17px 16px;
    }
}

@media (min-width: 521px) {
    .event-reservation-card {
        position: relative;
        overflow: visible;
    }

    .ornament-divider {
        position: absolute;
        inset: 0;
        z-index: 30;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        pointer-events: none;
    }

    .ornament-divider-image {
        top: auto;
        bottom: -35px;
        left: -10px;
        width: 48%;
        max-width: 210px;
        height: auto;
        transform: none;
    }
}

@media (min-width: 521px) {
    body.tpl-pergamino > br + .invitation-column {
        margin-top: -18px;
    }

    .invitation-column {
        padding-top: 14px;
    }
}
/* SISINV 3.0.0: confirmación privada de regalos */
.gift-confirmation{position:relative;z-index:3;margin:1.5rem auto 0;padding:1.25rem;max-width:720px;border:1px solid rgba(93,39,55,.24);border-radius:18px;background:rgba(255,252,244,.92)}
.gift-confirmation h3{margin:0 0 .5rem}.gift-confirmation form{display:grid;gap:.85rem;margin-top:1rem}.gift-confirmation label{display:grid;gap:.35rem;text-align:left}.gift-confirmation input,.gift-confirmation select,.gift-confirmation textarea{width:100%;padding:.75rem;border:1px solid rgba(42,55,82,.25);border-radius:10px;background:#fff}.gift-confirmation button{justify-self:center}.gift-confirmation .gift-confirmation-submit{width:100%;justify-self:stretch}.gift-confirmation-grid{display:grid;grid-template-columns:2fr 1fr;gap:.75rem}.gift-confirmation-history{display:grid;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(93,39,55,.15)}.gift-confirmation-history div{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem}.gift-confirmation-history em{font-style:normal;font-weight:600}@media(max-width:520px){.gift-confirmation-grid{grid-template-columns:1fr}.gift-confirmation-history div{display:grid;gap:.15rem}}

/* ================================================================
   AJAX público y modal de confirmación - SISINV 3.0.16
   ================================================================ */
body.pergamino-modal-open {
    overflow: hidden;
}

form[data-pergamino-ajax-form][aria-busy="true"] {
    pointer-events: none;
}

form[data-pergamino-ajax-form][aria-busy="true"] button[type="submit"] {
    cursor: wait;
    opacity: .78;
}

.pergamino-ajax-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}

.pergamino-ajax-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.pergamino-ajax-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 12, 8, .66);
    backdrop-filter: blur(4px);
}

.pergamino-ajax-modal__dialog {
    position: relative;
    width: min(100%, 430px);
    max-height: min(88vh, 620px);
    overflow: auto;
    padding: 34px 28px 26px;
    border: 1px solid rgba(122, 84, 42, .34);
    border-radius: 22px;
    background:
        linear-gradient(rgba(255, 252, 244, .97), rgba(247, 237, 217, .97)),
        var(--pergamino-paper, none);
    box-shadow: 0 28px 80px rgba(22, 12, 4, .38);
    text-align: center;
    transform: translateY(18px) scale(.97);
    transition: transform .18s ease;
}

.pergamino-ajax-modal.is-open .pergamino-ajax-modal__dialog {
    transform: translateY(0) scale(1);
}

.pergamino-ajax-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5c4634;
    font: 700 30px/1 Arial, sans-serif;
    cursor: pointer;
}

.pergamino-ajax-modal__close:hover,
.pergamino-ajax-modal__close:focus-visible {
    background: rgba(91, 62, 35, .1);
    outline: none;
}

.pergamino-ajax-modal__icon {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    border: 2px solid currentColor;
    border-radius: 50%;
    color: #1d7650;
    font: 800 38px/1 Arial, sans-serif;
}

.pergamino-ajax-modal[data-type="warning"] .pergamino-ajax-modal__icon {
    color: #9a6716;
}

.pergamino-ajax-modal[data-type="danger"] .pergamino-ajax-modal__icon {
    color: #a53838;
}

.pergamino-ajax-modal[data-type="info"] .pergamino-ajax-modal__icon {
    color: #315f88;
}

.pergamino-ajax-modal__title {
    margin: 0 0 10px;
    color: #3b281b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.45rem, 5vw, 1.9rem);
    line-height: 1.2;
}

.pergamino-ajax-modal__message {
    margin: 0 auto 24px;
    color: #604b3a;
    font-size: 1rem;
    line-height: 1.62;
    white-space: pre-line;
}

.pergamino-ajax-modal__accept {
    min-width: 150px;
    min-height: 46px;
    padding: 11px 24px;
    border: 0;
    border-radius: 999px;
    background: #5d2634;
    color: #fff;
    font: 700 1rem/1.2 inherit;
    box-shadow: 0 10px 24px rgba(93, 38, 52, .24);
    cursor: pointer;
}

.pergamino-ajax-modal__accept:hover,
.pergamino-ajax-modal__accept:focus-visible {
    filter: brightness(1.08);
    outline: 3px solid rgba(93, 38, 52, .2);
    outline-offset: 3px;
}

@media (max-width: 520px) {
    .pergamino-ajax-modal {
        padding: 14px;
    }

    .pergamino-ajax-modal__dialog {
        padding: 30px 20px 22px;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pergamino-ajax-modal,
    .pergamino-ajax-modal__dialog {
        transition: none;
    }
}

.pergamino-ajax-modal[hidden] {
    display: none;
}

.pergamino-ajax-modal__accept {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

/* SISINV 3.0.20: prioridad de interacción del modal AJAX */
.pergamino-ajax-modal {
    pointer-events: none;
}

.pergamino-ajax-modal.is-open {
    pointer-events: auto;
}

.pergamino-ajax-modal__backdrop {
    z-index: 0;
}

.pergamino-ajax-modal__dialog {
    z-index: 1;
    pointer-events: auto;
}