@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

:root{--paper:#f6f1ed;--ink:#6c6155;--gold:#9c8255;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
button{font:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid #665337;outline-offset:7px}
.cover{position:relative;isolation:isolate;min-height:700px;min-height:max(700px,100svh);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:31px 24px 22px;color:var(--ink)}
.cover-background{position:absolute;inset:0;z-index:-3;background:#f6f1ed url('assets/fondo-onix-marfil.jpg') center/cover no-repeat}
.cover:before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at center,#fffdf52b,transparent 75%)}
.cover:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.cover-heading{display:flex;align-items:center;flex-direction:column;gap:7px}
.monogram{font-size:33px;letter-spacing:-2px;line-height:1.1}
.monogram span{font-size:24px;font-style:italic;padding:0 4px}
.eyebrow{font:400 10px/1.8 var(--sans);letter-spacing:3px}
.cover-heading .eyebrow{font-size:9px;letter-spacing:4px}
.envelope{--hinge-y:45.57377%;--inner-paper:linear-gradient(to right,#f6f1ed 0%,#f6f1ed 3.85%,#e8dfd5 3.85%,#e8dfd5 96.15%,#f6f1ed 96.15%,#f6f1ed 100%);position:relative;isolation:isolate;width:min(540px,78vw,56svh);aspect-ratio:560/610;margin:12px 0 6px;filter:drop-shadow(0 14px 18px #6c554427);flex-shrink:0;transition:transform .8s ease}
.peace-lily{position:absolute;z-index:-1;width:62%;height:110%;object-fit:contain;right:-12%;bottom:25%;transform:rotate(14deg);pointer-events:none}
.envelope-back,.envelope-front{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.envelope-back{z-index:0;filter:drop-shadow(0 2px 1px #51483725)}
.envelope-lining{position:absolute;z-index:0;left:3.57%;right:3.57%;top:var(--hinge-y);bottom:3.28%;background:var(--inner-paper);}
.envelope-flap{position:absolute;z-index:0;top:var(--hinge-y);left:3.57%;width:92.86%;height:42.62%;transform-origin:50% 0 0;transform-style:preserve-3d;transform:perspective(1100px) rotateX(-180deg);pointer-events:none;}
.flap-face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.flap-outside{transform:none;}
.flap-inside{transform:rotateX(180deg);}
.flap-segment{position:absolute;left:0;top:0;width:100%;height:var(--strip-height,3.125%);transform-origin:50% 0;transform-style:preserve-3d;}
.flap-segment>.flap-segment{top:100%;height:100%;}
.paper{fill:var(--paper)}
.photo-card{--photo-frame:16px;position:absolute;z-index:1;bottom:22%;left:8.5%;width:83%;height:76%;padding:var(--photo-frame);background:#fffcf7;transform:rotate(-5deg);transform-origin:50% 85%;box-shadow:0 3px 7px #3d332e33;overflow:hidden;}
.photo-image{width:100%;height:100%;background-image:var(--couple-photo,url('assets/pareja-sobre.jpg'));background-position:center 40%;background-repeat:no-repeat;background-size:100% auto;filter:saturate(.76);}
.envelope-front{z-index:2;pointer-events:none}
.fold{stroke:#b7a78c;stroke-width:.8;stroke-opacity:.38;fill:none}
.seal{position:absolute;z-index:5;top:76%;left:50%;width:96px;height:96px;transform:translateX(-50%) rotate(-4deg);border:0;cursor:pointer;color:#806a45;border-radius:46% 50% 45% 48%;background:radial-gradient(ellipse at 35% 28%,#e9d9b8,#d4bd91 68%,#b89a68);box-shadow:inset 1px 2px 3px #fff9,inset -2px -3px 5px #95774477,1px 4px 7px #67513340;transition:filter .25s,scale .25s}
.seal:before{content:'';position:absolute;inset:5px;border:1px solid #a98d5c66;border-radius:50%;box-shadow:0 0 0 1px #f9edcf77}
.seal-inner{position:absolute;inset:11px;border:1px solid #b69a6880;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;text-shadow:0 1px #fff7}
.sprig{height:29px;width:36px}
.seal-inner>span:not(.seal-dot){font:500 9px var(--sans);letter-spacing:2px;padding-left:2px}
.seal-dot{font-size:10px;line-height:1}
.seal:hover{filter:brightness(1.07);scale:1.06}
.seal:active{scale:.97}
.cover-footer{text-align:center;display:flex;align-items:center;flex-direction:column;gap:11px}
.cover-footer p{font-style:italic;font-size:21px;margin:0}
.cover-footer .eyebrow{font-size:8px;letter-spacing:2.5px;opacity:.8}
.down-line{height:30px;width:1px;background:linear-gradient(#9c8255b3,transparent);margin-top:2px}
.invitation{min-height:880px;text-align:center;padding:110px 24px 32px;background:linear-gradient(#f6f1ed66,#f6f1ed66),url('assets/fondo-onix-marfil.jpg') center/cover no-repeat;outline:none;scroll-margin-top:0}
.invitation>.eyebrow{font-size:9px;letter-spacing:3px;color:#9a8463}
h2{display:flex;align-items:center;justify-content:center;gap:18px;margin:36px 0 27px;font-size:clamp(42px,6vw,74px);font-weight:400;line-height:1.1}
h2 em{font-weight:400;color:#a99473;font-size:.75em}
.tiny-flower{font-size:34px;color:#ad956d;margin:18px 0 26px}
.intro{max-width:680px;font-size:clamp(22px,2.4vw,28px);font-weight:400;line-height:1.65;margin:0 auto;text-wrap:pretty}
.wedding-date{margin:45px auto 0;max-width:680px;}
.date-introduction{font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);font-weight:400;line-height:1.65;margin:0;text-wrap:pretty;}
.date-composition{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:25px;margin:28px auto 0;max-width:620px;font-family:var(--serif);font-weight:400;}
.date-month,.date-year{display:flex;align-items:center;justify-content:center;min-height:72px;border-top:1px solid #9c8d7a;border-bottom:1px solid #9c8d7a;padding:10px 0;line-height:1.15;text-align:center;}
.date-month{font-size:clamp(20px,3.4vw,34px);text-transform:uppercase;letter-spacing:1px;}
.date-year{font-size:clamp(30px,4.5vw,48px);}
.date-day{font-size:clamp(100px,16vw,160px);line-height:1;letter-spacing:-5px;padding-right:5px;}
@media(max-width:600px){.date-introduction{font-size:22px;}.date-composition{gap:14px;}.date-month{font-size:clamp(17px,4.2vw,25px);letter-spacing:.3px;}.date-year{font-size:clamp(28px,7vw,38px);}.date-day{font-size:clamp(92px,24vw,130px);letter-spacing:-3px;padding-right:3px;}}
.itinerary{width:min(620px,100%);margin:76px auto 62px;padding:52px 55px 54px;background:#f4f2ef url('assets/papel-fino-itinerario.jpg') center/cover no-repeat;box-shadow:0 14px 32px #6c55441a,0 2px 6px #6c554412;text-align:center;}
.itinerary h3{font-family:var(--serif);font-size:clamp(36px,5vw,48px);font-weight:400;letter-spacing:3px;text-transform:uppercase;text-align:center;margin:0 0 36px;}
.itinerary-events{list-style:none;margin:0;padding:0;display:grid;gap:28px;justify-items:center;}
.itinerary-event{display:grid;grid-template-columns:110px minmax(0,230px);align-items:center;justify-content:center;gap:30px;min-height:122px;width:100%;text-align:center;}
.itinerary-event img{display:block;width:100%;height:125px;object-fit:contain;}
.itinerary-event h4{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.25;margin:0 0 10px;}
.itinerary-event time{font:400 16pt/1.6 var(--sans);letter-spacing:1px;color:#806e56;}
@media(max-width:600px){.itinerary{margin:58px auto 36px;padding:38px 22px 40px;}.itinerary h3{font-size:34px;letter-spacing:2px;margin-bottom:28px;}.itinerary-events{gap:24px;}.itinerary-event{grid-template-columns:83px minmax(0,220px);gap:18px;min-height:110px;}.itinerary-event img{height:110px;}.itinerary-event h4{font-size:22px;}}
.invitation-message{font-size:18px;font-style:italic;margin:20px 0 0;color:#928473}
.details-placeholder{margin:65px auto 70px;padding:33px 20px;width:min(450px,100%);border-top:1px solid #cbbb9e80;border-bottom:1px solid #cbbb9e80}
.details-placeholder .eyebrow{font-size:9px;letter-spacing:2.5px;color:#988261}
.details-placeholder p{font-size:24px;line-height:1.35;margin:15px 0 0}
.page-footer{font-size:18px;font-style:italic;color:#a08e75}
.music-toggle{position:fixed;z-index:10;right:23px;bottom:23px;width:45px;height:45px;border:1px solid #b8a17c66;border-radius:50%;background:#f6f1ede8;color:#806b49;cursor:pointer;box-shadow:0 3px 15px #30251218}
.music-toggle svg{width:21px;height:21px;vertical-align:middle}
.music-slash{display:none}
.music-toggle[aria-pressed="false"] .music-slash{display:block}
[hidden]{display:none!important}
.audio-notice{position:fixed;z-index:11;bottom:70px;right:22px;max-width:250px;padding:13px 16px;background:var(--paper);font:12px/1.6 var(--sans);box-shadow:0 2px 16px #0002}
@media(min-width:1000px){.cover-background{background-position:center 54%}.cover{padding-top:29px}.envelope{width:min(525px,55vh)}.cover-footer{margin-top:8px}}
@media(max-width:600px){.cover{padding:27px 16px 16px;min-height:max(690px,100svh)}.envelope{width:min(440px,96vw,60svh);margin:15px 0 12px}.photo-card{--photo-frame:11px}.peace-lily{width:59%;height:102%;right:-8%;bottom:27%;transform:rotate(11deg)}.seal{width:77px;height:77px}.seal-inner{inset:9px;gap:2px}.sprig{height:22px}.seal-inner>span:not(.seal-dot){font-size:8px;letter-spacing:1.5px}.seal-dot{font-size:8px}.cover-footer p{font-size:19px}.cover-footer .eyebrow{font-size:7px;letter-spacing:1.8px}.cover-footer{gap:12px}.down-line{height:23px}.invitation{padding-top:92px;min-height:820px}h2{flex-direction:column;gap:3px;font-size:52px;margin-top:31px}h2 em{font-size:33px}.invitation>.eyebrow{font-size:8px;letter-spacing:2px}.intro{font-size:22px;max-width:34ch}.details-placeholder{margin-top:48px;margin-bottom:50px}}
@keyframes unfold-flap{
  0%{transform:perspective(1100px) rotateX(0);z-index:4}
  99.99%{z-index:4}
  100%{transform:perspective(1100px) rotateX(-180deg);z-index:0}
}
@keyframes emerge-photo{from{height:29%;transform:rotate(-1deg)}to{height:76%;transform:rotate(-5deg)}}
@keyframes curl-flap{
  0%{transform:rotateX(0)}
  35%,55%{transform:rotateX(var(--tip-bend))}
  100%{transform:rotateX(0)}
}
@keyframes seal-bounce{0%,68%,100%{translate:0 0}76%{translate:0 -10px}82%{translate:0 0}88%{translate:0 -5px}94%{translate:0 0}}
@media(prefers-reduced-motion:no-preference){
  .envelope.intro-animate .envelope-flap{animation:unfold-flap 2.1s .65s linear both;animation-play-state:paused}
  .envelope.intro-animate .flap-segment{animation:curl-flap 2.1s .65s ease-in-out both;animation-play-state:paused}
  .envelope.intro-animate .photo-card{animation:emerge-photo 1.9s 2.95s cubic-bezier(.22,1,.36,1) both;animation-play-state:paused}
  .envelope.intro-playing .envelope-flap,.envelope.intro-playing .flap-segment,.envelope.intro-playing .photo-card{animation-play-state:running}
  .envelope.intro-playing .seal{animation:seal-bounce 3.2s 5.1s ease-in-out infinite}
  .envelope.is-open .seal,.seal:hover,.seal:focus-visible{animation:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}