@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;500;600;700&family=Parisienne&display=swap');
:root{--paper:#fbf7ef;--ink:#55313b;--accent:#73273f;--gold:#ac8e55;--line:#d7c5b2;--muted:#7f6d6b;--serif:'Cormorant Garamond',Georgia,serif;--script:'Parisienne',cursive;--sans:'DM Sans',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}body{margin:0;background:#e8e1d8;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.8}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}img{display:block;width:100%;object-fit:cover}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:5px}[hidden]{display:none!important}.demo-bar{position:relative;z-index:30;min-height:44px;padding:10px 16px;background:#faf7f1;color:#594743;display:flex;justify-content:center;gap:20px;align-items:center;font-size:10px;letter-spacing:.09em;border-bottom:1px solid #d9cec1}.demo-bar a{text-decoration:none}.demo-bar b{font-weight:500;text-transform:uppercase}.demo-bar .back{position:absolute;left:20px;font-size:12px;letter-spacing:0}.opener{min-height:calc(100svh - 44px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:46px 20px 32px;background:radial-gradient(ellipse at 20% 0,#fff9ee,transparent 65%),#eee6dc;overflow:hidden;transition:opacity .8s,transform .8s}.opener .overline{margin-bottom:28px}.overline{font-size:10px;letter-spacing:.29em;text-transform:uppercase;font-weight:500;color:var(--gold)}.opener h1{font:400 clamp(40px,8vw,64px)/1.05 var(--serif);margin:0 0 8px}.opener .intro{font:italic 21px var(--serif);margin:0 0 28px}.envelope{width:min(100%,490px);height:390px;position:relative;margin:8px auto 28px;perspective:1000px}.envelope .letter{position:absolute;left:9%;right:9%;top:0;height:355px;background:var(--paper);border:1px solid #d4b888;box-shadow:0 4px 25px #3c122331;padding:25px 20px;transition:transform 1s .1s;z-index:2}.letter .line{border:1px solid #d4b888;height:100%;padding:15px}.letter .script{font:37px var(--script);margin:0 0 10px}.letter img{height:160px;width:75%;margin:auto;filter:sepia(.15);border:5px solid #fff}.letter .date{font-size:10px;letter-spacing:.2em;margin-top:13px}.envelope .pocket{position:absolute;bottom:0;width:100%;height:225px;background:linear-gradient(130deg,#8b3553,#5c1931);box-shadow:0 20px 38px #3510233d;z-index:4;clip-path:polygon(0 0,50% 36%,100% 0,100% 100%,0 100%)}.envelope .pocket:after{content:'';position:absolute;inset:20px;border:1px solid #bd986477}.envelope .flap{position:absolute;top:165px;width:100%;height:155px;background:linear-gradient(160deg,#923a58,#60172f);clip-path:polygon(0 0,100% 0,50% 100%);z-index:5;transform-origin:top;transition:transform 1s}.seal{position:absolute;z-index:6;bottom:75px;left:calc(50% - 34px);width:68px;height:68px;border-radius:47% 53% 45% 55%;border:4px double #bc9b56;background:radial-gradient(circle at 28% 22%,#ead5a0,#b0914a 60%,#806329);color:#5d471d;box-shadow:2px 4px 8px #26061855;display:grid;place-items:center;font:21px var(--serif);transition:opacity .4s,transform .5s}.envelope .flower{position:absolute;width:155px;height:230px;right:-40px;bottom:5px;z-index:7;pointer-events:none;transform:rotate(15deg)}.opening .seal{opacity:0;transform:scale(1.2)}.opening .flap{transform:rotateX(180deg)}.opening .letter{transform:translateY(-90px)}.opening{opacity:0;transform:translateY(-35px)}.open-label{font-size:11px;text-transform:uppercase;letter-spacing:.2em;margin:0;color:#6e3b49}.open-action{border:0;background:none;color:inherit;display:inline-flex;gap:12px;align-items:center;padding:12px 24px}.open-action span{width:25px;height:25px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center}.paper{max-width:780px;margin:auto;background:var(--paper);box-shadow:0 0 90px #39221f12;overflow:clip}.invite-nav{padding:14px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);font:17px var(--serif);background:var(--paper)}.invite-nav a{text-decoration:none}.invite-nav .nav-links{display:flex;gap:20px;font:10px var(--sans);text-transform:uppercase;letter-spacing:.13em}.section{padding:75px clamp(24px,7vw,78px);text-align:center;position:relative}.section h2{font:400 clamp(39px,6vw,53px)/1.06 var(--serif);margin:16px 0 24px}.section h3{font:500 27px/1.2 var(--serif);margin:12px 0}.section p{max-width:500px;margin:16px auto;color:var(--muted)}.script{font-family:var(--script)}.divider{width:90px;display:flex;align-items:center;gap:12px;margin:25px auto;color:var(--gold);font-size:18px}.divider:before,.divider:after{content:'';height:1px;background:var(--gold);flex:1}.velvet-hero{padding-top:55px;padding-bottom:65px}.velvet-hero h1{font:400 clamp(70px,12vw,100px)/.82 var(--script);margin:35px 0 32px;color:var(--accent)}.velvet-hero h1 span{display:block;font:italic 27px var(--serif);margin:14px 0}.velvet-hero .date-line{font-size:12px;letter-spacing:.22em}.hero-frame{position:relative;margin:38px auto 0;max-width:500px;padding:12px;border:1px solid var(--gold);border-radius:210px 210px 0 0}.hero-frame img{height:510px;max-height:70vh;border-radius:200px 200px 0 0;object-position:50% 35%}.hero-frame .flower{position:absolute;bottom:-30px;right:-35px;width:150px;height:230px}.quote{font:italic 28px/1.4 var(--serif);max-width:430px;margin:26px auto!important;color:var(--ink)!important}.count-section{background:var(--accent);color:#f9f1df;padding:48px 20px;text-align:center}.count-section .overline{color:#dfc78d}.countdown{display:flex;justify-content:center;gap:0;margin:22px auto 0;max-width:450px}.countdown>div{width:25%;padding:0 10px;border-right:1px solid #e4d2b144}.countdown>div:last-child{border:0}.countdown strong{display:block;font:400 42px var(--serif);font-variant-numeric:tabular-nums}.countdown small{font-size:9px;letter-spacing:.16em;text-transform:uppercase}.story{background:#e9ded4}.story-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:28px}.polaroid{padding:13px 13px 27px;background:#fffdf7;transform:rotate(-4deg);box-shadow:0 8px 25px #55313b20}.polaroid img{aspect-ratio:3/4}.polaroid figcaption{font:22px var(--script);margin-top:15px}.story-text{text-align:left}.story-text .overline{font-size:9px}.story-text h2{font-size:39px}.story-text p{font-size:13px}.family{border-bottom:1px solid var(--line)}.names{font:400 25px/1.55 var(--serif);color:var(--ink)!important}.family-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:35px}.family-grid small{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}.events{display:grid;grid-template-columns:1fr 1fr;gap:23px}.event{border:1px solid var(--line);padding-bottom:27px;background:#fffdf7}.event img{height:200px}.event .event-copy{padding:15px 18px 0}.event .overline{font-size:9px;letter-spacing:.15em}.event p{font-size:12px;line-height:1.6}.event time{font:26px var(--serif);display:block;color:var(--accent)}.btn{display:inline-flex;justify-content:center;align-items:center;padding:12px 20px;min-height:45px;border:1px solid var(--accent);background:var(--accent);color:var(--paper);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;transition:background .2s,transform .2s}.btn:hover{background:var(--ink);transform:translateY(-2px)}.btn.outline{background:transparent;color:var(--accent)}.venue-note{font-size:10px!important;color:var(--muted);margin-top:22px!important}.timeline{display:grid;grid-template-columns:repeat(4,1fr);margin-top:35px;gap:10px}.timeline>div{border-top:1px solid var(--gold);position:relative;padding:25px 5px 0}.timeline>div:before{content:'✦';position:absolute;top:-15px;left:calc(50% - 10px);background:var(--paper);padding:0 5px;color:var(--gold)}.timeline b{display:block;font:26px var(--serif)}.timeline small{font-size:11px}.dress{padding-top:5px}.dress .swatches{display:flex;justify-content:center;gap:8px;margin-top:20px}.swatches i{width:26px;height:26px;border-radius:50%;border:1px solid #0001}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:30px 0 0}.gallery button{border:0;padding:0;background:transparent;overflow:hidden}.gallery img{height:330px;transition:transform .4s}.gallery button:hover img{transform:scale(1.04)}.gallery button:nth-child(2){margin-top:45px}.gallery .detail-crop{object-position:60% 75%;transform:scale(1.05)}.gallery button:nth-child(2) img{object-position:center 75%}.rsvp{background:#e9ded4}.rsvp .rsvp-inner{border:1px solid var(--gold);padding:42px 30px;background:var(--paper)}form{text-align:left;max-width:440px;margin:30px auto 0}label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.13em;margin:19px 0 8px}input,select,textarea{width:100%;border:1px solid var(--line);background:transparent;border-radius:0;padding:12px;color:var(--ink);font-size:15px}textarea{resize:vertical;min-height:85px}form .btn{width:100%;margin-top:24px}form .hint{font-size:11px;line-height:1.6;text-align:center}form .status{font-size:13px;border-left:2px solid var(--gold);padding:12px;background:#f1e9dc}.closing{padding:65px 24px;text-align:center;background:var(--accent);color:var(--paper)}.closing .script{font-size:54px;line-height:1.2}.closing p{font-size:12px;letter-spacing:.12em}.closing a{color:#e5cda6;font-size:10px;text-transform:uppercase;letter-spacing:.15em}.sample-footer{max-width:780px;margin:auto;padding:28px 24px 85px;text-align:center;background:var(--paper);font-size:11px;color:var(--muted)}.sample-footer summary{cursor:pointer}.sample-footer a{color:inherit}.sample-footer p{margin:8px}.floating-controls{position:fixed;bottom:18px;right:max(18px,calc((100vw - 780px)/2 + 18px));z-index:25;display:flex;gap:8px}.floating-controls button,.floating-controls a{width:43px;height:43px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);box-shadow:0 5px 20px #26141d1a;display:grid;place-items:center;text-decoration:none;font-size:17px}.floating-controls .music{font-size:20px}.music[aria-pressed=true]{background:var(--accent);color:var(--paper)}dialog{border:1px solid var(--line);padding:16px;max-width:min(90vw,650px);max-height:90vh;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#26151ee6}dialog img{max-height:75vh;object-fit:contain}dialog .close-dialog{display:block;margin:12px 0 0 auto;background:transparent;border:1px solid var(--line);padding:8px 18px;color:var(--ink)}
/* Cumpleaños: un diseño gráfico y festivo, independiente de la boda. */
.birthday{--paper:#fff8ed;--ink:#512e56;--accent:#eb5b47;--gold:#a14a68;--muted:#7c6579;--line:#e7c9bf;background:#f5d5c6}.birthday .paper{background-color:var(--paper)}.birthday .opener{background:#f6c7ae;position:relative}.birthday .opener:before,.birthday .opener:after{content:'✦';position:absolute;font-size:260px;line-height:1;color:#ed5c4740;left:-50px;top:15%;transform:rotate(12deg)}.birthday .opener:after{left:auto;right:-70px;top:55%;font-size:320px;color:#9172ad33}.birthday .opener>*{z-index:1}.birthday-ticket{position:relative;border:2px solid var(--ink);padding:36px 38px;background:var(--paper);box-shadow:11px 11px 0 var(--accent);width:min(100%,400px);margin:20px 0 35px;transform:rotate(-4deg)}.birthday-ticket:before,.birthday-ticket:after{content:'';position:absolute;top:48%;width:25px;height:25px;border:2px solid var(--ink);border-radius:50%;background:#f6c7ae}.birthday-ticket:before{left:-15px}.birthday-ticket:after{right:-15px}.birthday-ticket .big-number{font:600 135px/.95 var(--serif);color:var(--accent)}.birthday-ticket .script{font-size:58px;line-height:1.2;margin:15px 0}.birthday-ticket .ticket-bottom{border-top:1px dashed var(--ink);margin-top:20px;padding-top:16px;font-size:11px;letter-spacing:.14em}.birthday-hero{background:#f6c7ae;position:relative;padding:65px 28px}.birthday-hero h1{font:500 clamp(80px,15vw,115px)/.85 var(--serif);letter-spacing:-.07em;margin:30px 0;color:var(--accent)}.birthday-hero h1 em{font-family:var(--script);font-weight:400;letter-spacing:0;color:var(--ink);display:block;font-size:.75em}.birthday-hero .cake{max-width:410px;position:relative;margin:35px auto 0}.birthday-hero .cake img{height:410px;border-radius:210px 210px 0 0;border:8px solid var(--paper)}.birthday-hero .badge{position:absolute;right:-20px;bottom:25px;border-radius:50%;height:115px;width:115px;background:var(--accent);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(12deg);font:26px var(--serif);box-shadow:0 5px 15px #512e5633}.birthday-hero .badge strong{font-size:46px;line-height:1}.birthday .count-section{background:var(--ink)}.birthday .count-section .overline{color:#f4b394}.birthday .story{background:#eee1ed}.birthday .timeline{grid-template-columns:repeat(3,1fr)}.birthday .rsvp{background:#f6c7ae}.birthday .rsvp-inner{border:2px solid var(--accent);box-shadow:7px 7px 0 #ed5c4730}.birthday .closing{background:var(--ink)}.birthday .closing a{color:#f6c7ae}.birthday .family{background:#eee1ed}.birthday .swatches{margin-bottom:25px}
/* Bautizo: papelería marfil, arcos y estrellas doradas. */
.baptism{--paper:#fffcf4;--ink:#60513e;--accent:#a7834f;--gold:#a7834f;--muted:#8c7b64;--line:#dcc9a9;background:#e9dfcb}.baptism .opener{background:radial-gradient(ellipse at center,#fffcf4,#e8dfcc)}.baptism .opener h1{font:55px var(--script)}.baptism-cover{position:relative;margin:10px 0 30px;width:min(100%,370px);background:var(--paper);padding:20px;border:1px solid var(--gold);box-shadow:0 20px 45px #715a3330;border-radius:190px 190px 4px 4px}.baptism-cover .cover-inner{border:1px solid var(--line);border-radius:180px 180px 0 0;padding:35px 15px 25px}.cross{font:400 58px var(--serif);color:var(--gold);line-height:1.3}.baptism-cover img{aspect-ratio:1;border-radius:50%;border:6px solid #f1e8d6;margin:13px auto;width:180px}.baptism-cover .script{font-size:48px;margin:12px 0;line-height:1.1}.baptism .open-action{background:var(--accent);color:var(--paper);font-size:10px;letter-spacing:.13em;text-transform:uppercase}.baptism .open-action span{border-color:#fff6}.baptism-hero{padding-top:55px}.baptism-hero h1{font:400 clamp(70px,14vw,100px)/1.05 var(--script);margin:12px 0 22px}.baptism-hero .hero-frame{border-radius:250px 250px 0 0;background:#f2e9d9;max-width:430px}.baptism-hero .hero-frame img{height:420px;border-radius:230px 230px 0 0}.baptism .count-section{background:#e7d7ba;color:var(--ink)}.baptism .count-section .overline{color:var(--ink)}.baptism .countdown>div{border-color:#a7834f66}.baptism .story{background:#f1e9d9}.baptism .story-text h2{font-size:37px}.baptism .rsvp{background:#efe4d0}.baptism .rsvp-inner{border-radius:150px 150px 0 0;padding-top:60px}.baptism .closing{background:#e7d7ba;color:var(--ink)}.baptism .closing a{color:var(--ink)}.star-line{font-size:22px;color:var(--gold);letter-spacing:1.2em;margin-left:1.2em}.baptism .timeline{grid-template-columns:repeat(3,1fr)}
@media(max-width:600px){.demo-bar{justify-content:flex-end;font-size:9px;gap:8px;padding:10px 12px}.demo-bar .back{left:12px;font-size:11px}.demo-bar a:last-child{display:none}.opener{padding-top:35px}.envelope{height:340px;max-width:360px}.envelope .letter{height:310px;padding:19px 14px}.letter img{height:135px}.letter .script{font-size:32px}.envelope .pocket{height:190px}.envelope .flap{top:150px;height:120px}.seal{bottom:56px}.envelope .flower{right:-28px;width:120px;height:185px}.section{padding:55px 25px}.velvet-hero h1{font-size:76px}.hero-frame img{height:420px}.hero-frame .flower{width:120px;height:190px;right:-25px}.story-grid{gap:18px;grid-template-columns:1fr}.story-grid .polaroid{width:80%;margin:0 auto 28px}.story-text{text-align:center}.story-text h2{font-size:42px}.family-grid{gap:15px}.names{font-size:22px}.events{grid-template-columns:1fr;max-width:380px;margin:auto}.event img{height:230px}.event .event-copy{padding:20px 25px 0}.timeline{grid-template-columns:1fr 1fr;gap:28px 15px}.birthday .timeline,.baptism .timeline{grid-template-columns:repeat(3,1fr);gap:6px}.timeline b{font-size:23px}.timeline small{font-size:10px}.gallery{gap:10px}.gallery img{height:240px}.rsvp{padding:35px 17px}.rsvp .rsvp-inner{padding:30px 20px}.rsvp-inner h2{font-size:40px}.birthday-hero .cake img{height:350px}.birthday-hero .badge{right:-8px;height:95px;width:95px}.birthday-hero .badge strong{font-size:39px}.baptism .rsvp-inner{padding-top:55px}.invite-nav{padding:14px 20px}.invite-nav .nav-links{gap:14px;font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}