:root{color-scheme:dark;--lilac:#b38ac7;--purple:#56336c;--gold:#e6c37a;--ink:#fff4d5;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#382041}body{font-family:Georgia,'Times New Roman',serif;color:var(--ink)}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #fff1ba;outline-offset:7px}button:disabled{cursor:wait}button::selection,p::selection{background:#e6c37a;color:#432653}[hidden]{display:none!important}
.theatre{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#9261ab url('assets/fondo-horizontal.webp') center/cover no-repeat;perspective:1200px}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,#30113c55);z-index:-1}.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.envelope-scene{flex-direction:column;gap:5vh}.envelope{position:relative;width:min(47vw,68vh);aspect-ratio:1.5;border:0;background:transparent;padding:0;perspective:1200px;filter:drop-shadow(0 25px 26px #2b133e70);transition:transform 1s var(--ease),opacity .8s ease}.envelope:hover{transform:translateY(-5px)}.envelope-back,.envelope-pocket,.envelope-flap{position:absolute;inset:0;border-radius:4px}.envelope-back{background:linear-gradient(140deg,#5a306d,#a677b8 48%,#75458c);border:2px solid var(--gold)}.envelope-pocket{background:linear-gradient(32deg,#774b90,#c099d1 52%,#9063a5);clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);border:2px solid var(--gold);z-index:3}.envelope-pocket:after{content:'';position:absolute;inset:4%;border:1px solid #edcf8d;clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%)}.envelope-flap{z-index:4;background:linear-gradient(160deg,#c19bd2,#9f73b5 58%,#613979);clip-path:polygon(0 0,100% 0,50% 60%);transform-origin:top;transition:transform 1s var(--ease),filter 1s;backface-visibility:hidden}.envelope-flap:after{content:'';position:absolute;inset:2px;background:linear-gradient(160deg,#eaca7c,#fce7b1,#b17b31);clip-path:polygon(0 0,50% 59%,100% 0,100% 1%,50% 60%,0 1%)}.seal{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:19%;aspect-ratio:1;border-radius:50%;z-index:5;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#f8e2a6,#d6ac56 45%,#a36f2d 75%,#efcf83);box-shadow:inset 0 0 0 3px #e0b769,inset 0 0 0 6px #a36e3666,0 6px 10px #3f225a66;transition:opacity .35s,transform .65s var(--ease)}.seal svg{width:68%;fill:#9261a5;stroke:#663c7e;stroke-width:1.5;filter:drop-shadow(0 1px 1px #fbe7b0)}.open-caption{margin:0;font-size:clamp(12px,2.4vh,20px);font-style:italic;text-shadow:0 2px 5px #3b194e;transition:opacity .3s}.theatre[data-state=opening] .seal{opacity:0;transform:translate(-50%,-50%) scale(1.3)}.theatre[data-state=opening] .envelope-flap{transform:rotateX(175deg);filter:brightness(.8)}.theatre[data-state=opening] .open-caption{opacity:0}.theatre[data-state=opening] .envelope{transform:translateY(6%) scale(1.05)}
.video-scene{padding:3vh 0 7vh;flex-direction:column;gap:1.5vh}.video-frame{position:relative;height:100%;aspect-ratio:9/16;max-width:90%;background:#382041;box-shadow:0 18px 45px #2f0e4155;outline:1px solid #edcf8d99;outline-offset:5px}video{display:block;width:100%;height:100%;object-fit:contain}.video-controls{position:absolute;bottom:1.6vh;display:flex;gap:12px;align-items:center}.round-control,.text-control{border:1px solid #e6c37a99;background:#4c2b60d9;color:#fff1cf;transition:background .2s,transform .2s}.round-control{border-radius:50%;width:36px;height:36px;padding:9px;display:grid;place-items:center}.round-control svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.round-control:hover,.text-control:hover{background:#75458c;transform:translateY(-2px)}.text-control{border-radius:20px;padding:8px 16px;font-size:13px}.resume{position:absolute;inset:0;border:0;background:#3f1c5bc9;font-size:20px;text-decoration:underline;text-underline-offset:6px}.error{position:absolute;bottom:11vh;max-width:60%;background:#4b2359;padding:12px 18px;font-size:15px}.error button{background:none;border:0;text-decoration:underline}
.cards-scene{padding:4vh 0}.cards{display:flex;align-items:center;justify-content:center;gap:3.5vw;height:100%;width:100%}.invitation-card{height:100%;aspect-ratio:9/16;position:relative;box-shadow:0 16px 38px #34134166;overflow:hidden;animation:reveal-card 1s var(--ease) both}.invitation-card:nth-child(2){animation-delay:.16s}.invitation-card img{display:block;width:100%;height:100%;object-fit:fill}.card-content{position:absolute;inset:25% 15% 17%;color:#4d285e}.replay{position:absolute;right:3vw;bottom:3vh;background:#442355e6}.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}@keyframes reveal-card{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
/* Keep portrait devices upright; fit the media without rotating the page. */
@media(orientation:portrait){.theatre{background-image:url('assets/tarjeta-sin-texto.webp');background-size:100% 100%}.envelope-scene{gap:4vh}.envelope{width:80vw}.open-caption{font-size:clamp(12px,2vh,18px)}.video-scene{padding:4vh 0 10vh}.video-frame{height:auto;width:min(82vw,calc(83dvh * 9 / 16))}.video-controls{bottom:3vh;gap:10px}.round-control{width:36px;height:36px;padding:9px}.text-control{font-size:13px;padding:8px 14px}.cards-scene{padding:4vh 0}.cards{gap:3vw}.invitation-card{height:auto;width:43vw;flex-shrink:0}.replay{right:5vw;bottom:3vh}.error{bottom:11vh;max-width:85%}}


.open-caption{background:#56336c;padding:8px 16px;border-radius:20px}

/* The closed face is a reference-matched plate; its paper continues across the moving folds. */
.envelope:before{content:'';position:absolute;inset:0;z-index:6;background:url('assets/sobre-ornamental.webp') center/100% 100%;border-radius:4px;transition:opacity .4s ease;pointer-events:none}
.envelope-back{background:#9d75b0}
.envelope-pocket,.envelope-flap{background-image:url('assets/sobre-ornamental.webp');background-size:100% 220%;background-repeat:no-repeat}
.envelope-pocket{background-position:center bottom}.envelope-flap{background-position:center top}
.envelope-pocket:after,.envelope-flap:after,.seal svg{display:none}
.seal{width:27%;z-index:7;background:url('assets/sobre-ornamental.webp') 50% 56.7%/370.37% 246.91%;box-shadow:none}
.theatre[data-state=opening] .envelope:before{opacity:0}

/* The invitation is a single page after the film, not a pair of inset cards. */
.theatre{container-type:size}
.video-scene{padding:14cqh 0 8cqh}
.video-frame{height:min(74cqh,138cqw);width:auto;max-width:86%}
.video-controls{bottom:2cqh}
.invitation-scene{padding:8px 0 64px}
.invitation-art{display:block;width:100%;height:100%;object-fit:contain;animation:reveal-card .8s var(--ease) both}
.invitation-scene .replay{right:2cqw;bottom:2cqh}
@media(orientation:portrait){
  body{display:grid;place-items:center}
  .theatre{position:relative;inset:auto;width:100vw;height:100svh}
  .envelope-scene{gap:4cqh}.envelope{width:76cqw}.open-caption{font-size:clamp(12px,2.7cqh,18px)}
  .video-scene{padding:6cqh 0 8cqh}.video-frame{height:min(84cqh,164cqw);width:auto;max-width:92%}
  .video-controls{bottom:max(2cqh,env(safe-area-inset-bottom))}.replay{bottom:2cqh}
  .theatre[data-state=cards]{background-image:radial-gradient(ellipse at center,#a779bb,#56336c)}
}

@font-face{font-family:Gabriola;src:url('assets/Gabriola-latin.woff') format('woff');font-display:swap}
.invitation-deck{position:relative;height:min(calc(100cqh - 80px),133.333cqw);aspect-ratio:3/4;max-width:100%;container-type:size}
.page-panels{position:absolute;inset:0;overflow:hidden}
.page-panel{position:absolute;inset:0;animation:reveal-card .45s var(--ease) both}
.page-panel .invitation-art{animation:none}
.framed-page{background:#a779bb url('assets/marco-tarjetas.webp') center/100% 100% no-repeat}
.card-copy{position:absolute;left:13%;right:13%;text-align:center;font-family:Gabriola,Georgia,serif;color:#fff0bc;text-shadow:0 2px 2px #25102f,1px 0 #291431,-1px 0 #291431,0 -1px #291431}
.card-copy h2,.card-copy p{margin:0;font-weight:400}
.parents-copy{top:28%;font-size:7.7cqh;line-height:1.25}
.parents-copy h2{font-size:8.8cqh;line-height:1.1;color:#fff9f2;margin-bottom:7cqh}
.parents-copy .parents-and{font-size:7cqh;margin:1cqh 0}
.prayer-copy{top:22%;left:12%;right:12%;font-size:5.7cqh;line-height:1.17}
.dress-copy{top:21%;line-height:1.12}
.dress-copy h2{font-size:7.7cqh}.dress-name{font-size:8.4cqh;margin:1cqh 0 2cqh!important}
.reserved-colors{font-size:6.7cqh;line-height:1.13}
.invitation-actions{position:absolute;left:9%;right:9%;top:67%;display:flex;justify-content:center;gap:1cqw}
.ornate-action{width:calc(100% / 3);border:0;padding:0;background:none;display:flex;align-items:center;flex-direction:column;gap:.5cqh;color:#fff8df;font-size:clamp(12px,2.6cqh,19px);text-shadow:0 1px 3px #26112f;transition:transform .2s var(--ease)}
.ornate-action:hover{transform:translateY(-3px)}
.medallion{display:block;width:100%;aspect-ratio:1;background:url('assets/iconos-evento.webp') left center/300% 100% no-repeat}
.medallion-attendance{background-position:center}.medallion-gifts{background-position:right center}
.page-navigation{position:absolute;bottom:-48px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:3px 5px;background:#492654e8;border-radius:24px;color:#fff2ce;font:12px Georgia,serif;white-space:nowrap}
.page-arrow{display:grid;place-items:center;border:0;border-radius:50%;width:30px;height:30px;padding:7px;background:none}
.page-arrow svg,.popup-close svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.page-arrow:hover{background:#815095}.page-arrow:disabled{opacity:.35;cursor:default}
.invitation-popup{position:fixed;width:min(96vw,640px);max-width:none;max-height:94svh;overflow-y:auto;overscroll-behavior:contain;margin:auto;padding:66px 72px 60px;border:2px solid #e6c37a;border-radius:10px;background:#a779bb url('assets/marco-tarjetas.webp') center/100% 100% no-repeat;color:#fff8e4;box-shadow:0 20px 65px #0009;scrollbar-color:#e6c37a #663b7b;animation:reveal-card .25s var(--ease) both}
.invitation-popup::backdrop{background:#25112dcc}
.invitation-popup h2{margin:0 0 22px;text-align:center;font:50px/1 Gabriola,Georgia,serif;color:#fff0bc;text-shadow:0 2px 3px #32183d}
.invitation-popup h3{font-size:19px;margin:0 0 10px;color:#fff0bc}
.invitation-popup p{font:17px/1.5 Georgia,serif;margin:10px 0;text-shadow:0 1px 2px #482151}
.popup-close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:32px;height:32px;border:1px solid #e6c37a;border-radius:50%;padding:7px;background:#56336c;color:#fff4d5}
.popup-link{display:block;text-align:center;margin-top:18px;padding:13px 14px;border:1px solid #e6c37a;border-radius:22px;background:#56336c;color:#fff4d5;font:16px/1.4 Georgia,serif;text-decoration:none;text-underline-offset:3px}
.popup-link:hover{background:#75458c;text-decoration:underline}.popup-link:focus-visible{outline:3px solid #fff1ba;outline-offset:4px}
.venue+.venue{margin-top:22px;padding-top:20px;border-top:1px solid #f0cf8b88}
.gift-caption{display:block;margin-top:20px;text-align:center;font:32px/1.2 Gabriola,Georgia,serif;color:#fff0bc;text-shadow:0 1px 2px #32183d}
@media(max-width:480px){.invitation-popup{padding:54px 34px 44px}.invitation-popup h2{font-size:42px}}
.card-copy{font-style:italic}.parents-copy h2{font-weight:600}
.prayer-copy{font-size:5.1cqh}
.invitation-popup #popup-content{background:#56336ce8;padding:16px;border-radius:8px}
.invitation-deck{perspective:1200px;overflow:visible}
.page-panel{animation:none;backface-visibility:hidden;transform-origin:center}
.page-navigation{z-index:3}
.music-toggle{position:absolute;right:2cqw;top:2cqh;z-index:4;background:#492654e8}
.music-toggle[data-playing=true] .music-slash{opacity:0}
.music-toggle[data-playing=false]{opacity:.75}

/* Open the paper in stages, with a gentle acceleration instead of a snap. */
:root{--paper-ease:cubic-bezier(.4,0,.2,1)}
.envelope{transition:transform 1.9s cubic-bezier(.37,0,.63,1),opacity .8s ease}
.seal{transition:opacity .5s ease,transform .65s cubic-bezier(.37,0,.63,1)}
.envelope:before{transition:opacity .65s ease .15s}
.envelope-flap{transition:transform 1.6s cubic-bezier(.37,0,.63,1) .3s;backface-visibility:visible}

.open-caption{transition:opacity .65s ease}
.theatre[data-state=opening] .envelope-flap{filter:none}
.theatre[data-state=opening] .seal{transform:translate(-50%,-50%) scale(1.12)}
.theatre[data-state=opening] .envelope-scene{animation:envelope-away .5s ease 1.9s both}
.theatre[data-state=video] .video-scene{animation:film-arrival .65s ease both}
.invitation-popup{animation:film-arrival .55s var(--paper-ease) both}
@keyframes envelope-away{from{opacity:1}to{opacity:0}}
@keyframes film-arrival{from{opacity:0}to{opacity:1}}