@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Great+Vibes&display=swap');

* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#32000a url('assets/fondo-terciopelo.png') center/cover fixed; }
body { min-height:100svh; overflow-x:hidden; color:#f5ecdf; background:url('assets/fondo-terciopelo.png') center top/cover fixed; }

.envelope-screen { position:fixed; z-index:50; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px; background:#570012 url('assets/fondo-terciopelo.png') center/cover; transition:opacity .65s ease,visibility .65s ease; }
.envelope-button { width:min(92vw,760px); aspect-ratio:1471/1069; padding:0; border:0; background:transparent; cursor:pointer; filter:drop-shadow(0 24px 34px #16000588); transition:transform .65s ease,opacity .55s ease; }
.envelope-button img { display:block; width:100%; height:100%; object-fit:contain; }
.envelope-button:focus-visible { outline:2px solid #f5eadd; outline-offset:8px; }
.envelope-screen>p { margin:20px 0 0; font:500 12px/1.2 'Cormorant Garamond',serif; letter-spacing:.18em; text-transform:uppercase; animation:pulse 1.7s ease-in-out infinite; }
.opening .envelope-button { transform:scale(.9) translateY(-4%); opacity:0; }
.revealed .envelope-screen { opacity:0; visibility:hidden; pointer-events:none; }

.invitation-stage { position:relative; isolation:isolate; width:min(100%,853px); aspect-ratio:853/1844; margin:0 auto; overflow:hidden; opacity:0; visibility:hidden; background:#570012 url('assets/fondo-terciopelo.png') center/cover; box-shadow:0 0 70px #0008; transition:opacity .7s ease; }
.revealed .invitation-stage { opacity:1; visibility:visible; }
.heading { position:absolute; z-index:20; top:10.05%; left:2%; width:96%; text-align:center; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; }
.heading p { margin:0 0 2.8%; font:500 clamp(13px,3.2vw,29px)/1 'Cormorant Garamond',serif; letter-spacing:.065em; text-transform:uppercase; }
.heading h1 { margin:0; font:400 clamp(43px,11.3vw,100px)/.92 'Great Vibes',cursive; white-space:nowrap; }
.heading h1 span { margin:0 .02em; font-size:1.08em; }

.arrangement { position:absolute; z-index:2; top:21.4%; left:4.7%; width:90.6%; height:56.2%; }
.arrangement:focus { outline:none; }
.arrangement img { display:block; user-select:none; pointer-events:none; }
.envelope-back { position:absolute; z-index:1; left:7%; top:16%; width:88%; height:84%; background:linear-gradient(108deg,#f8f0e5,#ece0d0 48%,#f7eee1); clip-path:polygon(0 36%,50% 0,100% 36%,100% 100%,0 100%); box-shadow:0 12px 30px #28000866; opacity:0; }
.lace { position:absolute; z-index:0; left:-2%; top:-2%; width:104%; height:auto; filter:brightness(1.17) saturate(.75) drop-shadow(0 4px 5px #30000c33); }
.plant { position:absolute; z-index:4; object-fit:contain; filter:drop-shadow(0 4px 3px #25000933); }
.plant-left { left:-1%; top:17%; width:23%; height:49%; transform-origin:bottom center; }
.plant-top { left:36%; top:1%; width:29%; height:25%; }
.plant-right { right:-1%; top:18%; width:24%; height:52%; transform-origin:bottom center; }
.polaroid { position:absolute; z-index:5; background:#f9f7f3 url('assets/couple-photos.png') no-repeat; background-size:200% auto; border:clamp(7px,1.35vw,13px) solid #f8f6f2; border-bottom-width:clamp(14px,2.4vw,23px); box-shadow:0 5px 13px #32000e55; }
.polaroid-one { left:15.5%; top:9%; width:32%; aspect-ratio:.81; background-position:left top; transform:rotate(-5.5deg); }
.polaroid-two { left:10%; top:35%; width:34%; aspect-ratio:.88; background-position:right top; transform:rotate(-6deg); }
.save-date { position:absolute; z-index:4; right:7%; top:5%; width:62%; height:42%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8% 5% 2%; color:#681326; background:linear-gradient(145deg,#f9f1e6,#eee1d1); border-radius:50% 50% 7% 7% / 43% 43% 8% 8%; transform:rotate(4deg); filter:drop-shadow(0 6px 7px #30000b38); }
.save-date span,.save-date small { display:block; font:400 clamp(30px,7.8vw,69px)/.78 'Great Vibes',cursive; }
.save-date small { margin-top:.14em; font-size:clamp(27px,7vw,62px); }
.date-flower { position:absolute; z-index:6; left:41%; top:34%; width:44%; height:34%; object-fit:contain; }
.envelope-front { position:absolute; z-index:7; left:7%; top:47%; width:88%; height:53%; overflow:hidden; background:linear-gradient(120deg,#f7eee1 0 48%,#ede0d0 49% 51%,#f8efe3 52%); clip-path:polygon(0 0,50% 26%,100% 0,100% 100%,0 100%); box-shadow:inset 0 1px 0 #fff8; opacity:0; }
.envelope-front:before,.envelope-front:after { content:""; position:absolute; bottom:0; width:67%; height:88%; opacity:.42; border-top:1px solid #d9ccbb; }
.envelope-front:before { left:-18%; transform:skewX(37deg); }
.envelope-front:after { right:-18%; transform:skewX(-37deg); }
.seal { position:absolute; z-index:9; left:50%; top:67.5%; width:25%; height:auto; transform:translateX(-50%); filter:drop-shadow(0 7px 8px #36000e66); }
.closing { position:absolute; z-index:20; left:4%; top:79.7%; width:92%; text-align:center; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; }
.closing p { margin:0 0 .8%; font:500 clamp(17px,4.2vw,37px)/1 'Cormorant Garamond',serif; letter-spacing:.055em; text-transform:uppercase; }
.closing strong { display:block; font:500 clamp(16px,3.8vw,34px)/1.2 'Cormorant Garamond',serif; letter-spacing:.06em; }
.closing span { display:block; margin-top:6.5%; font:400 clamp(31px,7.5vw,69px)/1 'Great Vibes',cursive; }

.details-panel { position:relative; width:min(100%,853px); min-height:760px; margin:-1px auto 0; padding:clamp(115px,15vw,145px) clamp(24px,8vw,72px) clamp(70px,10vw,100px); overflow:hidden; color:#3f1018; background:linear-gradient(145deg,#fbf5eb,#eee3d5); clip-path:polygon(0 72px,100% 0,100% 100%,0 100%); box-shadow:0 35px 70px #16000555; opacity:0; visibility:hidden; transition:opacity .7s .25s ease; }
.details-panel:before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; background-image:radial-gradient(#7a5947 0.55px,transparent 0.65px); background-size:4px 4px; mix-blend-mode:multiply; }
.revealed .details-panel { opacity:1; visibility:visible; }
.details-inner { position:relative; z-index:1; max-width:700px; margin:0 auto; text-align:center; }
.eyebrow { margin:0 0 clamp(32px,6vw,52px); font:500 clamp(18px,4.1vw,34px)/1.2 'Cormorant Garamond',serif; letter-spacing:.1em; text-transform:uppercase; }
.countdown { display:grid; grid-template-columns:minmax(0,1.2fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:start; justify-content:center; max-width:650px; margin:0 auto clamp(42px,7vw,65px); }
.countdown div { min-width:0; }
.countdown strong { display:block; font:400 clamp(37px,8.9vw,73px)/.9 'Cormorant Garamond',serif; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.countdown b { margin:.03em .08em 0; font:400 clamp(34px,8.1vw,68px)/.9 'Cormorant Garamond',serif; }
.countdown span { display:block; margin-top:13px; font:500 clamp(10px,2.35vw,17px)/1 'Cormorant Garamond',serif; letter-spacing:.04em; text-transform:uppercase; }
.address-copy { max-width:510px; margin:0 auto 32px; font:400 clamp(16px,3.1vw,23px)/1.5 'Cormorant Garamond',serif; letter-spacing:.015em; }
.address-button { display:block; max-width:480px; margin:0 auto clamp(45px,8vw,70px); padding:20px 22px; color:#3f1018; border:1.5px solid #3f1018; font:500 clamp(13px,2.5vw,18px)/1 'Cormorant Garamond',serif; letter-spacing:.24em; text-decoration:none; text-transform:uppercase; transition:background .25s ease,color .25s ease; }
.address-button:hover,.address-button:focus-visible { color:#f8efe3; background:#570012; outline:none; }
.signature { margin:0; color:#570012; font:400 clamp(62px,14vw,118px)/.68 'Great Vibes',cursive; }
.signature span { display:block; margin:.12em 0 -.1em; }
.contact-copy { margin:clamp(45px,8vw,72px) 0 0; font:500 clamp(15px,3vw,22px)/1.3 'Cormorant Garamond',serif; letter-spacing:.05em; }
.information { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:clamp(75px,12vw,120px); text-align:left; }
.info-card { padding:clamp(24px,4.5vw,38px); border:1px solid #6b3a3a42; background:#fffaf2a8; box-shadow:0 10px 28px #4e18200e; }
.venue-card,.schedule-card,.rsvp-card { grid-column:1/-1; text-align:center; }
.card-kicker { margin:0 0 10px; color:#7a2635; font:500 12px/1 'Cormorant Garamond',serif; letter-spacing:.18em; text-transform:uppercase; }
.info-card h2,.faq h2 { margin:0 0 16px; color:#570012; font:400 clamp(28px,5.2vw,43px)/1.05 'Cormorant Garamond',serif; }
.info-card p { margin:0; font:400 clamp(15px,2.7vw,20px)/1.5 'Cormorant Garamond',serif; }
.event-date { margin-top:14px!important; font-weight:500!important; letter-spacing:.025em; }
.button-row { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:24px; }
.button-row a,.text-link { display:inline-block; padding:13px 17px; color:#570012; border:1px solid #6b2632; font:500 12px/1 'Cormorant Garamond',serif; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; transition:.22s ease; }
.button-row a:hover,.button-row a:focus-visible,.text-link:hover,.text-link:focus-visible { color:#fff8ee; background:#570012; outline:none; }
.text-link { margin-top:18px; }
.schedule { max-width:470px; margin:0 auto; padding:0; list-style:none; text-align:left; }
.schedule li { display:grid; grid-template-columns:62px 1fr; gap:18px; align-items:baseline; padding:11px 0; border-bottom:1px solid #6b3a3a24; }
.schedule time { color:#7a2635; font:500 17px/1 'Cormorant Garamond',serif; }
.schedule span { font:400 clamp(15px,2.7vw,20px)/1.35 'Cormorant Garamond',serif; }
.faq { display:grid; gap:12px; margin-top:clamp(55px,10vw,90px); text-align:left; }
.faq>.card-kicker,.faq>h2 { text-align:center; }
.faq details { overflow:hidden; border:1px solid #6b3a3a35; background:#fffaf2b8; box-shadow:0 8px 22px #4e18200b; transition:border-color .25s ease,box-shadow .25s ease; }
.faq details[open] { border-color:#7a26357a; box-shadow:0 11px 28px #4e182014; }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:21px 24px; cursor:pointer; color:#570012; font:500 clamp(16px,3vw,21px)/1.3 'Cormorant Garamond',serif; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:after { content:"+"; flex:0 0 30px; display:grid; place-items:center; width:30px; height:30px; color:#fff9ef; background:#6b1425; border-radius:50%; font:400 22px/1 'Cormorant Garamond',serif; transition:transform .25s ease,background .25s ease; }
.faq details[open] summary:after { background:#8b3343; transform:rotate(45deg); }
.faq details p { margin:0; padding:0 64px 23px 24px; color:#58343a; font:400 clamp(15px,2.7vw,19px)/1.55 'Cormorant Garamond',serif; }
.contact-links { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px; margin-top:18px; }
.contact-links a { color:#570012; font:500 clamp(15px,2.8vw,20px)/1.3 'Cormorant Garamond',serif; text-underline-offset:4px; }
.whatsapp-float { position:fixed; z-index:40; right:18px; bottom:18px; display:none; padding:13px 18px; color:#fff; background:#6b1425; border:1px solid #f6e9d8a0; border-radius:999px; box-shadow:0 8px 24px #21000866; font:500 12px/1 'Cormorant Garamond',serif; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.revealed .whatsapp-float { display:block; }
.site-footer { width:min(100%,853px); margin:0 auto; padding:50px 24px 46px; color:#f6ebdf; background:#3b000b url('assets/fondo-terciopelo.png') center bottom/cover; text-align:center; opacity:0; visibility:hidden; transition:opacity .7s .35s ease; }
.revealed .site-footer { opacity:1; visibility:visible; }
.site-footer p { margin:0; font:500 clamp(13px,2.5vw,17px)/1.4 'Cormorant Garamond',serif; letter-spacing:.045em; }

.item-heading,.item-lace,.item-plant-left,.item-plant-top,.item-plant-right,.item-photo-one,.item-photo-two,.item-save-date,.item-date-flower,.item-seal,.item-footer { opacity:0; }
.revealed .envelope-back { animation:envelopeIn .65s .15s ease-out forwards; }
.revealed .envelope-front { animation:envelopeIn .65s .35s ease-out forwards; }
.revealed .item-lace { animation:riseIn .75s .65s ease-out forwards; }
.revealed .item-plant-left { animation:plantLeft .8s .9s ease-out forwards; }
.revealed .item-plant-top { animation:dropIn .75s 1.05s ease-out forwards; }
.revealed .item-plant-right { animation:plantRight .8s 1.2s ease-out forwards; }
.revealed .item-save-date { animation:cardRight .8s 1.45s cubic-bezier(.2,.8,.2,1) forwards; }
.revealed .item-photo-one { animation:photoLeft .75s 1.7s cubic-bezier(.2,.8,.2,1) forwards; }
.revealed .item-photo-two { animation:photoLeftTwo .75s 1.95s cubic-bezier(.2,.8,.2,1) forwards; }
.revealed .item-date-flower { animation:flowerPop .7s 2.25s cubic-bezier(.18,.9,.28,1.2) forwards; }
.revealed .item-seal { animation:sealIn .7s 2.55s cubic-bezier(.18,.9,.28,1.2) forwards; }
.revealed .item-heading { animation:textIn .7s 2.8s ease-out forwards; }
.revealed .item-footer { animation:textIn .7s 3.05s ease-out forwards; }

/* Animación del contenido posterior; no modifica la apertura del sobre. */
.motion-item { opacity:0; transform:translateY(24px) scale(.99); transition:opacity .72s ease,transform .85s cubic-bezier(.2,.75,.22,1); transition-delay:var(--motion-delay,0ms); will-change:opacity,transform; }
.motion-item.is-visible { opacity:1; transform:translate3d(0,0,0) scale(1); }
.countdown.is-visible strong { animation:numberBreath 2.6s ease-in-out infinite; }
.countdown.is-visible div:nth-of-type(2) strong { animation-delay:.18s; }
.countdown.is-visible div:nth-of-type(3) strong { animation-delay:.36s; }
.countdown.is-visible div:nth-of-type(4) strong { animation-delay:.54s; }
.signature.is-visible { animation:signatureGlow 4.6s ease-in-out infinite; }
.address-button.is-visible { animation:ctaBreath 3.2s ease-in-out infinite; }
.info-card.is-visible { animation:cardBreath 5.2s ease-in-out infinite; }
.info-card.is-visible:nth-child(even) { animation-delay:.65s; }
.revealed .whatsapp-float { animation:whatsappPulse 2.8s ease-in-out infinite; }

@keyframes pulse { 50%{opacity:.45} }
@keyframes envelopeIn { from{opacity:0;transform:translateY(5%)} to{opacity:1;transform:none} }
@keyframes riseIn { from{opacity:0;transform:translateY(4%);filter:blur(4px)} to{opacity:1;transform:none;filter:none} }
@keyframes textIn { from{opacity:0} to{opacity:1} }
@keyframes plantLeft { from{opacity:0;transform:translateX(-18%) rotate(-7deg)} to{opacity:1;transform:none} }
@keyframes plantRight { from{opacity:0;transform:translateX(18%) rotate(7deg)} to{opacity:1;transform:none} }
@keyframes dropIn { from{opacity:0;transform:translateY(-16%) rotate(-5deg)} to{opacity:1;transform:none} }
@keyframes cardRight { from{opacity:0;transform:translateX(18%) rotate(8deg)} to{opacity:1;transform:rotate(4deg)} }
@keyframes photoLeft { from{opacity:0;transform:translateX(-22%) rotate(-12deg)} to{opacity:1;transform:rotate(-5.5deg)} }
@keyframes photoLeftTwo { from{opacity:0;transform:translateX(-22%) rotate(-12deg)} to{opacity:1;transform:rotate(-6deg)} }
@keyframes flowerPop { from{opacity:0;transform:scale(.45) rotate(-12deg)} to{opacity:1;transform:scale(1)} }
@keyframes sealIn { from{opacity:0;transform:translateX(-50%) scale(.5) rotate(-8deg)} to{opacity:1;transform:translateX(-50%) scale(1)} }
@keyframes numberBreath { 0%,100%{opacity:1;transform:translateY(0)} 50%{opacity:.76;transform:translateY(-3px)} }
@keyframes signatureGlow { 0%,100%{filter:drop-shadow(0 0 0 #7a263500)} 50%{filter:drop-shadow(0 4px 7px #7a26352c)} }
@keyframes ctaBreath { 0%,100%{box-shadow:0 0 0 0 #6b142500} 50%{box-shadow:0 7px 22px 1px #6b142525} }
@keyframes cardBreath { 0%,100%{box-shadow:0 10px 28px #4e18200e} 50%{box-shadow:0 16px 34px #4e18201c} }
@keyframes whatsappPulse { 0%,100%{transform:translateY(0);box-shadow:0 8px 24px #21000866} 50%{transform:translateY(-4px);box-shadow:0 13px 30px #21000880} }

@media (prefers-reduced-motion:reduce) {
  .envelope-screen,.envelope-button,.invitation-stage,.details-panel,.site-footer { transition:none; }
  .revealed .envelope-back,.revealed .envelope-front,.revealed [class*="item-"] { opacity:1; animation:none; }
  .item-seal { transform:translateX(-50%); }
  .motion-item,.motion-item.is-visible { opacity:1; transform:none; transition:none; animation:none; }
  .countdown.is-visible strong,.signature.is-visible,.address-button.is-visible,.info-card.is-visible,.revealed .whatsapp-float { animation:none; }
}

@media (max-width:600px) {
  .motion-item { transform:translateY(38px) scale(.975); transition-duration:.78s,.92s; }
  .info-card.motion-item:nth-child(odd),.faq details.motion-item:nth-of-type(odd) { transform:translateX(-28px) scale(.98); }
  .info-card.motion-item:nth-child(even),.faq details.motion-item:nth-of-type(even) { transform:translateX(28px) scale(.98); }
  .motion-item.is-visible,.info-card.motion-item.is-visible,.faq details.motion-item.is-visible { transform:translate3d(0,0,0) scale(1); }
}

@media (max-width:430px) {
  .details-panel { min-height:690px; padding-top:105px; clip-path:polygon(0 58px,100% 0,100% 100%,0 100%); }
  .countdown b { margin-left:.02em; margin-right:.02em; }
  .signature { line-height:.72; }
  .information { grid-template-columns:1fr; gap:14px; }
  .venue-card,.schedule-card,.rsvp-card { grid-column:auto; }
  .button-row { flex-direction:column; }
  .button-row a { width:100%; }
  .whatsapp-float { right:12px; bottom:12px; padding:11px 14px; }
  .faq summary { padding:18px; }
  .faq details p { padding:0 54px 20px 18px; }
}