@font-face{font-family:Sparkle Passion;src:url('assets/sparkle-passion.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--ivory:#F4EEE2;--blue:#BBD9F3;--ice:#E9F5FC;--navy:#203B56}
*{box-sizing:border-box}body{margin:0;background:var(--ivory);color:var(--navy);font-family:'Sparkle Passion',serif}img{display:block;max-width:100%;height:auto}main{width:100%;max-width:750px;margin-inline:auto}.envelope{overflow:hidden}.envelope-artwork{position:relative;width:100%;aspect-ratio:2/3;transform:scale(1.06);transform-origin:center}.envelope-base{width:100%}.invitation{background:var(--ivory) url('assets/papel.png') center/cover;padding:6% 0 6%;display:flex;align-items:center;flex-direction:column}.invitation-card{width:77%;box-shadow:0 2px 4px rgba(61,49,35,.12),4px 9px 15px rgba(61,49,35,.10),10px 22px 34px rgba(61,49,35,.14)}.verse{width:90%;margin:6% 0 0}.verse img{width:100%;filter:drop-shadow(1px 2px 1.5px rgba(32,44,55,.20)) drop-shadow(5px 11px 10px rgba(49,45,39,.18))}.reception{padding:18.5% 0;background:var(--ivory) url('/assets/recepcion-lirios-trazos-fuertes.png') center/cover no-repeat;display:grid;place-items:center}.reception-card{width:72%;position:relative}.reception-card>img{width:100%;filter:drop-shadow(1px 2px 1.5px rgba(52,45,35,.20)) drop-shadow(5px 12px 12px rgba(52,45,35,.20))}.location{position:absolute;top:79.5%;left:34%;width:32%;height:4.7%;padding:0;border:0;border-radius:3px;background:transparent;cursor:pointer}.location:hover{background:#203b5612}.location:focus-visible{outline:2px solid var(--navy);outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{width:min(400px,calc(100% - 40px));border:1px solid #91acc2;background:var(--ivory);color:var(--navy);padding:32px 24px;border-radius:4px;text-align:center}dialog::backdrop{background:#203b5680}dialog h2{font:400 32px 'Sparkle Passion',serif;margin:0 0 12px}dialog p{font:14px/1.5 system-ui,sans-serif;margin:0 0 24px}.map-options{display:grid;gap:12px}.map-options a{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--navy);border-radius:3px;padding:15px 18px;text-decoration:none;color:var(--navy);font:16px system-ui,sans-serif}.map-options a:hover{background:var(--ice)}.close-dialog{margin-top:20px;padding:8px 16px;border:0;background:transparent;text-decoration:underline;color:var(--navy);font:14px system-ui,sans-serif;cursor:pointer}a:focus-visible,.close-dialog:focus-visible{outline:3px solid #91acc2;outline-offset:3px}
@media(min-width:900px){body{background:var(--ivory) url('assets/papel.png') center/900px auto}main{max-width:750px}.envelope{height:min(900px,100svh);min-height:660px;background:var(--ivory) url('assets/papel.png') center/cover}.envelope-artwork{width:auto;height:100%;margin:auto;max-width:100%;aspect-ratio:2/3}.envelope-base{width:100%;height:100%;object-fit:contain}.invitation{padding-top:40px;padding-bottom:40px}.invitation-card{width:77%;box-shadow:0 2px 4px rgba(61,49,35,.12),4px 9px 15px rgba(61,49,35,.10),10px 22px 34px rgba(61,49,35,.14)}.verse{margin-top:40px;max-width:620px}.reception{padding:80px 0}.reception-card{width:72%;max-width:500px}}

/* Proportions measured from the supplied Figma composition (700 × 764). */
.gifts{margin-bottom:clamp(28px,6vw,44px);position:relative;aspect-ratio:700/820;background:var(--ivory) url('assets/papel.png') center/cover;isolation:isolate}
.gifts .gift-card{position:absolute;width:54%;max-width:none;left:10.45%;top:7.2%;z-index:1;filter:drop-shadow(1px 2px 1px rgba(52,45,35,.25)) drop-shadow(4px 8px 5px rgba(52,45,35,.24)) drop-shadow(11px 20px 15px rgba(52,45,35,.19))}
.gifts .dresscode-card{position:absolute;width:49.5%;max-width:none;left:38%;top:56%;z-index:2;filter:drop-shadow(1px 3px 1.5px rgba(25,37,49,.34)) drop-shadow(5px 10px 6px rgba(45,44,40,.26)) drop-shadow(12px 23px 17px rgba(45,44,40,.22))}

.countdown{position:relative;isolation:isolate;overflow:hidden;width:100%;margin-inline:0;padding:44px 16px 48px;background:linear-gradient(135deg,#E8F5FE 0%,color-mix(in srgb,#E8F5FE 85%,#163854) 55%,color-mix(in srgb,#E8F5FE 72%,#163854) 100%);color:var(--navy);text-align:center}
.countdown::before{content:'';position:absolute;inset:-4px;background:url('assets/countdown-venue-grabado.png') center 60%/cover;filter:blur(.35px) contrast(1.15);opacity:.88;mix-blend-mode:soft-light;z-index:-1;pointer-events:none}
.countdown h2{font:400 clamp(16px,3.1vw,24px)/1.35 'Sparkle Passion',serif;letter-spacing:.01em;white-space:nowrap;margin:0 0 28px}
.countdown-clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:600px;margin:auto}
.countdown-unit{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.countdown-unit{border:0}.countdown-separator{position:absolute;right:0;top:0;transform:translateX(50%);font:400 clamp(26px,6.5vw,52px)/clamp(36px,9vw,72px) Georgia,serif;color:var(--navy)}
.countdown-number{font:400 clamp(36px,9vw,72px)/1 'Sparkle Passion',serif;font-variant-numeric:tabular-nums;min-height:1em;white-space:nowrap;text-shadow:0 1px 1px rgba(255,255,255,.18)}
.countdown-label{font:400 clamp(10px,2.5vw,12px)/1.4 system-ui,sans-serif;letter-spacing:.12em}
.countdown-complete{font:400 25px/1.4 'Sparkle Passion',serif;margin:30px 0 0}
@media(min-width:900px){.countdown{padding:60px 32px 64px}.countdown h2{margin-bottom:32px}}


.wedding-calendar{padding:64px 28px 36px;background:var(--ivory) url('assets/papel.png') center/cover;text-align:center}
.calendar-paper{position:relative;isolation:isolate;max-width:600px;margin:auto;aspect-ratio:4/3;padding:10% 13%;display:flex;flex-direction:column;justify-content:center;background:transparent}
.calendar-paper::before{content:'';position:absolute;inset:-6% -6%;background:url('assets/calendario-contorno-relieve.svg') center/100% 100% no-repeat;z-index:-1;pointer-events:none}
.wedding-calendar h2{font:400 clamp(30px,6vw,44px)/1.2 'Sparkle Passion',serif;letter-spacing:.04em;margin:0 0 16px}
.wedding-calendar h2 span{display:block;font-size:.6em;letter-spacing:.14em;margin-top:12px}
.month-table{width:100%;table-layout:fixed;border-collapse:collapse;margin:0}
.month-table th{font:400 12px/1 system-ui,sans-serif;padding:0 0 12px;color:var(--navy);letter-spacing:.12em}
.month-table td{height:52px;padding:2px;text-align:center;font:400 clamp(23px,6vw,30px)/1 'Sparkle Passion',serif}
.month-table td span{width:30px;height:30px;max-width:100%;display:inline-flex;justify-content:center;align-items:center}
.month-table .wedding-day{position:relative;background:transparent}
.month-table .wedding-day::before{content:'';position:absolute;inset:-6px -7px;background:url('assets/calendario-corazon.svg') center/100% 100% no-repeat;pointer-events:none}
.calendar-save{display:inline-block;margin-top:16px;padding:10px 16px;border:1px solid var(--navy);border-radius:3px;color:var(--navy);font:400 clamp(15px,3.8vw,17px)/1.3 'Sparkle Passion',serif;text-decoration:none}
.calendar-save:hover{background:var(--navy);color:var(--ice)}
@media(min-width:900px){.wedding-calendar{padding:80px 40px 48px}.month-table td{height:62px}.month-table td span{width:48px;height:48px}}

/* Closing photograph and layered stationery. The photo file remains untouched. */
.closing{overflow:hidden;position:relative;aspect-ratio:4/5;padding:0;background-color:#E8F5FE;background-image:linear-gradient(#E8F5FE66,#E8F5FE66),url('/assets/cierre-papel-azul-gris.png');background-position:center;background-size:cover;background-repeat:no-repeat;text-align:center;isolation:isolate}
.closing-stationery{position:relative;width:100%;height:100%;container-type:inline-size}
.story-photo-card{position:absolute;left:7%;top:12%;width:59%;height:76%;margin:0;padding:4%;background:#426A8B;background-image:url('/assets/papel-grano-fino.svg'),url('/assets/cierre-papel-azul-gris.png');background-blend-mode:soft-light,multiply;background-position:center;background-size:160px 160px,460px auto;background-repeat:repeat;transform:rotate(-4deg);box-shadow:inset 0 0 0 1px #FFFFFF55,1px 2px 2px #203B5630,6px 14px 20px #162A3A47,12px 24px 30px -10px #162A3A30;z-index:2}
.story-photo-window{width:100%;height:100%;overflow:hidden;background:#203B56}
.story-photo-window img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;filter:grayscale(1);transform:scale(1.3);transform-origin:50% 36%}
.story-vellum{position:absolute;left:-1%;top:48%;width:102%;height:21%;display:grid;place-items:center;background:rgba(244,238,226,.34);backdrop-filter:blur(.4px);border-block:1px solid #FFFDFA40;box-shadow:1px 2px 2px #203B5638,3px 6px 6px #203B5630,6px 12px 14px #203B5624;color:var(--ivory)}
.story-vellum::before{content:'';position:absolute;inset:0;background:url('/assets/papel.png') center/cover;opacity:.20;mix-blend-mode:soft-light;pointer-events:none}
.story-vellum span{position:relative;color:#D4D2C5;text-shadow:none;filter:url(#vellum-relief);font:400 clamp(22px,6vw,42px)/1.3 'Sparkle Passion',Georgia,serif}
.story-note{position:absolute;right:3%;top:24%;width:32%;height:53%;padding:7% 2% 7% 4%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4cqw;background:var(--ivory) url('/assets/papel.png') center/cover;transform:rotate(5deg);box-shadow:inset 0 0 0 1px #FFFDF699,1px 2px 2px #203B5626,5px 10px 16px #162A3A3D,9px 18px 24px -8px #162A3A2B;z-index:1}
.closing .story-note h2{width:100%;margin:0;color:#92938D;font:400 clamp(15px,4.3cqw,28px)/1.5 'Sparkle Passion',Georgia,serif;text-shadow:none;filter:url(#closing-deboss);letter-spacing:0}
.closing .story-note h2 span{display:block}

.closing-effects{position:absolute;overflow:hidden;pointer-events:none}

.envelope-photo{position:absolute;left:25.68359375%;top:28.19010417%;width:48.2421875%;height:48.95833333%;overflow:hidden}
.envelope-photo>img{width:100%;height:100%;object-fit:cover;object-position:center}
.envelope-photo-fold{position:absolute;inset:0;background:rgba(187,217,243,.28);clip-path:polygon(0 56.7%,50% 92.5%,100% 56.7%,100% 100%,0 100%);pointer-events:none}

.story-vellum::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#FFFDF618 0 6%,transparent 6% 94%,#FFFDF620 94%);pointer-events:none}
.story-stamp{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:clamp(32px,7.4cqw,52px);height:auto;filter:drop-shadow(0 1px 1px #16385440) drop-shadow(1px 3px 3px #16385430);z-index:2}

.gifts::after{content:'';position:absolute;left:0;right:0;top:100%;height:clamp(28px,6vw,44px);background:inherit;pointer-events:none}

/* An opening cover in normal document flow: no fixed overlays or body scroll locks. */
.invitation-cover{display:none}
.invitation-pending .invitation-cover{position:relative;display:flex;flex-direction:column;align-items:center;isolation:isolate;width:100%;max-width:750px;min-height:100svh;margin-inline:auto;padding:clamp(28px,5svh,54px) 20px 100px;overflow:hidden;background:#163854;color:#F4EEE2;text-align:center}
.invitation-pending #wedding-content{display:none}
.cover-photo,.cover-shade{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.cover-photo{object-fit:cover;object-position:50% 42%;filter:grayscale(1) contrast(1.03)}
.cover-shade{background:linear-gradient(180deg,#18181852,transparent 32%,transparent 55%,#18181899)}
.cover-heading{text-shadow:0 2px 18px #18181866}
.cover-heading>img{width:64px;height:64px;object-fit:contain;margin:auto}
.cover-heading p{font:400 clamp(30px,6vw,44px)/1.15 'Sparkle Passion',Georgia,serif;margin:12px 0}
.cover-heading>span{font:400 10px/1.5 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.cover-open{position:relative;display:block;flex-shrink:0;width:min(78%,410px);aspect-ratio:1.5;margin:auto auto 0;padding:0;border:0;border-radius:3px;background:transparent;color:inherit;cursor:pointer;perspective:1000px;-webkit-tap-highlight-color:transparent}
.cover-open:focus-visible{outline:2px solid #E8F5FE;outline-offset:12px}
.cover-envelope{position:absolute;inset:0;display:block;transform-style:preserve-3d;filter:drop-shadow(0 3px 3px #1638544D) drop-shadow(5px 16px 22px #10273E80);transition:transform .25s ease}
@media(hover:hover){.cover-open:not(:disabled):hover .cover-envelope{transform:translateY(-4px)}}
/* Thin fibrous vellum: the photo remains visible through each paper layer. */
.cover-envelope-back,.cover-fold{position:absolute;inset:0;border-radius:2px;background:url('/assets/sobre-vellum-fibras.png') center/cover}
.cover-envelope-back{opacity:.32;box-shadow:inset 0 1px 1px #FFFFFF99}
.cover-fold-left{clip-path:polygon(0 0,53% 52%,0 100%);opacity:.45;background-position:left center}
.cover-fold-right{clip-path:polygon(100% 0,47% 52%,100% 100%);opacity:.45;background-position:right center}
.cover-fold-bottom{clip-path:polygon(0 100%,0 99%,49% 46%,51% 46%,100% 99%,100% 100%);opacity:.55;background-position:center bottom}
.cover-flap{position:absolute;inset:0 0 auto;height:64%;transform-origin:center top;filter:drop-shadow(0 2px 1.5px #16385440)}
.cover-seal{position:absolute;top:45%;left:50%;width:14%;transform:translateX(-50%);filter:drop-shadow(1px 3px 2px #16385466)}
.cover-open-label{position:absolute;left:0;right:0;top:calc(100% + 28px);font:400 11px/1.5 system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#F4EEE2;text-shadow:0 2px 8px #18181866}
.invitation-cover.is-opening .cover-seal{animation:cover-unseal .25s ease-in forwards}
.invitation-cover.is-opening .cover-flap{animation:cover-unfold .75s .18s cubic-bezier(.45,0,.2,1) forwards}
.invitation-cover.is-opening{animation:cover-dismiss .3s 1.3s ease-in forwards}
.invitation-opened #wedding-content{animation:invitation-arrive .45s ease-out}
#wedding-content:focus{outline:none}
@keyframes cover-unseal{to{opacity:0;transform:translate(-50%,12px) scale(.9)}}
@keyframes cover-unfold{to{transform:rotateX(180deg)}}
@keyframes cover-dismiss{to{opacity:0}}
@keyframes invitation-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.invitation-cover.is-opening,.invitation-cover.is-opening *,.invitation-opened #wedding-content{animation:none!important}.cover-envelope{transition:none}}

.cover-flap-paper{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,54% 91%,50% 95%,46% 91%);opacity:.64;background:url('/assets/sobre-vellum-fibras.png') center top/cover;box-shadow:inset 0 1px 1px #FFFFFFAA}