.envelope{--env-backdrop:#9397bf;--env-backdrop-glow:#a9acd0;--env-paper:#9397bf;--env-paper-shade:#7b80ad;--env-liner:#9397bf;--env-liner-shade:#8489b6;--env-page-bg:#f4f0ea;--env-ink:#272a58;--env-seal-bg:#fffcf5;--env-seal-ring:#565a92;--env-shadow:44,46,82;--env-focus:#565a92;--env-bg-image:url(/images/fondo-sobre-olas.png);--env-font-script:"Miama","Snell Roundhand","Brush Script MT",cursive;--env-font-sans:"Adobe Caslon Pro",Georgia,serif;--env-ratio:1.45;--env-w:max(calc(112vh * var(--env-ratio)),108vw);--env-h:calc(var(--env-w) / var(--env-ratio));--tip-k:0.52;--tip:calc(var(--tip-k) * 100%);--seal-size:clamp(120px,40vw,230px);--env-perspective:1400px;--page-w:100vw;--page-h:100vh;--card-s:0.6;--card-ch:calc(var(--page-h) * var(--card-s));--rise:calc(var(--card-ch) * -0.3);--fill-x:0px;--fill-y:0px;--paper-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .25 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0;z-index:500;display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 90% at 50% 38%,var(--env-backdrop-glow) 0,var(--env-backdrop) 72%);isolation:isolate;-webkit-tap-highlight-color:transparent;touch-action:manipulation}@supports (height:1dvh){.envelope{--env-w:max(calc(112dvh * var(--env-ratio)),108vw);--page-h:100dvh}}.envelope--done,.envelope--done .env,html[data-envelope=opened] .envelope:not(.envelope--opening),html[data-envelope=opened] .envelope:not(.envelope--opening) .env{display:contents}html[data-envelope=opened] .envelope:not(.envelope--opening) .env>:not(.envelope-page),html[data-envelope=opened] .envelope:not(.envelope--opening) .envelope__button,html[data-envelope=opened] .envelope:not(.envelope--opening)>:not(.env){display:none}.envelope:not(.envelope--done) .envelope-page{position:absolute;z-index:3;width:var(--page-w);height:var(--page-h);left:calc(50% - var(--page-w) / 2);top:calc(var(--tip) + var(--card-ch) * .02 - var(--page-h) / 2);overflow:hidden;background:var(--env-page-bg);box-shadow:0 3px 14px rgba(var(--env-shadow),.3);transform:translateZ(0) scale(var(--card-s));transform-origin:50% 50%;will-change:transform;pointer-events:none}html[data-envelope=opened] .envelope:not(.envelope--opening):not(.envelope--done) .envelope-page{position:static;width:auto;height:auto;overflow:visible;background:none;box-shadow:none;transform:none;will-change:auto;pointer-events:auto}.envelope__bg{position:absolute;inset:0;pointer-events:none;background:var(--env-bg-image) center /cover no-repeat}@media (min-width:768px){.envelope__bg{display:none}.envelope{background:var(--env-paper)}}.envelope__button{position:absolute;inset:0;z-index:10;display:block;width:100%;height:100%;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.envelope__button:focus-visible{outline:3px solid var(--env-focus);outline-offset:-10px}.envelope--opening .envelope__button{pointer-events:none}.envelope__vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 52%,rgba(var(--env-shadow),.34) 100%)}.env{width:var(--env-w);height:var(--env-h);left:calc(50% - var(--env-w) / 2);top:calc(50% - var(--env-h) * var(--tip-k));perspective:var(--env-perspective)}.env,.env__back,.env__flap,.env__flap-shadow,.env__name,.env__pocket,.env__seal{position:absolute;display:block}.env__back{inset:0;z-index:1;background:none}.env__pocket{inset:0;z-index:5;pointer-events:none;filter:drop-shadow(0 -3px 5px rgba(var(--env-shadow),.24));will-change:transform}.env__pocket-shape,.env__pocket-shape>*{position:absolute;inset:0;display:block}.env__pocket-shape{clip-path:polygon(0 0,50% var(--tip),100% 0,100% 100%,0 100%);background:var(--paper-noise),linear-gradient(180deg,var(--env-paper) 0,var(--env-paper-shade) 100%)}.env__pocket-left{clip-path:polygon(0 0,50% var(--tip),0 100%)}.env__pocket-left,.env__pocket-right{background:linear-gradient(0deg,rgba(40,42,90,.14),rgba(255,255,255,.1))}.env__pocket-right{clip-path:polygon(100% 0,50% var(--tip),100% 100%)}.env__pocket-bottom{clip-path:polygon(0 100%,50% var(--tip),100% 100%);background:linear-gradient(0deg,rgba(255,255,255,.22),rgba(255,255,255,.34))}.env__fold{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.env__fold path{fill:none;stroke:rgba(40,42,90,.3);stroke-width:1;vector-effect:non-scaling-stroke}.env__name{left:calc(50% - var(--name-w) / 2);width:var(--name-w);top:calc(var(--tip) + var(--seal-size) / 2 + clamp(1.6rem, 5.5vh, 3.4rem));z-index:5;--name-w:min(88vw,680px);text-align:center;font-family:var(--env-font-script);font-size:clamp(2.1rem,10.5vw,3.8rem);line-height:1.1;color:var(--env-ink);text-wrap:balance;pointer-events:none;will-change:transform}.env__name--long{font-size:clamp(1.7rem,8vw,3rem);line-height:1.08}.env__flap{left:0;top:0;width:100%;height:var(--tip);z-index:6;transform-origin:50% 0;transform-style:preserve-3d;will-change:transform}.env__flap-face{position:absolute;inset:0;display:block;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;-webkit-backface-visibility:hidden}.env__flap-face--out{background:var(--paper-noise),linear-gradient(180deg,var(--env-paper) 0,var(--env-paper-shade) 100%)}.env__flap-face--in{transform:rotateX(180deg);background:var(--paper-noise),linear-gradient(0deg,var(--env-liner-shade) 0,var(--env-liner) 70%)}.env__flap-face svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.env__flap-face path{fill:none;stroke:rgba(40,42,90,.3);stroke-width:1;vector-effect:non-scaling-stroke}.env__flap-shadow{left:0;top:0;width:100%;height:var(--tip);z-index:5;clip-path:polygon(-4% 0,104% 0,50% 104%);background:rgba(var(--env-shadow),.34);filter:blur(5px);transform:translateY(5px);pointer-events:none}.env__seal{width:var(--seal-size);height:var(--seal-size);left:calc(50% - var(--seal-size) / 2);top:calc(var(--tip) - var(--seal-size) / 2);z-index:7;border-radius:50%;overflow:hidden;background:var(--env-seal-bg);box-shadow:0 0 0 max(2px,calc(var(--seal-size) * .028)) var(--env-seal-ring),0 0 0 max(4px,calc(var(--seal-size) * .055)) var(--env-paper),0 8px 16px rgba(var(--env-shadow),.4);animation:env-seal-pulse 3.4s ease-in-out infinite;will-change:transform}.env__seal-img{object-fit:cover;object-position:47% 52%;transform:scale(1.22);transform-origin:47% 52%;mix-blend-mode:multiply}.env__seal--wax{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#7a7fb4 0,var(--env-seal-ring) 55%,#3b3e75 100%);color:#f3f4fa;font-family:var(--env-font-script);font-size:calc(var(--seal-size) * .4);line-height:1}.envelope__cta{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom, 0px) + clamp(1.6rem, 7vh, 4rem));z-index:3;text-align:center;font-family:var(--env-font-sans);font-size:clamp(.72rem,.6vw + .62rem,.9rem);letter-spacing:.34em;text-transform:uppercase;color:var(--env-ink);animation:env-cta-glow 2.8s ease-in-out infinite}.envelope-replay{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:400;padding:.45rem .85rem;border:1px solid rgba(63,55,50,.14);border-radius:999px;background:rgba(255,253,251,.82);color:#5c5148;font-family:Adobe Caslon Pro,Georgia,serif;font-size:.72rem;letter-spacing:.04em;cursor:pointer;opacity:.8;transition:opacity .2s ease}.envelope-replay:focus-visible,.envelope-replay:hover{opacity:1}.envelope-replay:focus-visible{outline:2px solid #565a92;outline-offset:2px}.envelope--opening .env__seal{animation:env-seal-out var(--env-duration) linear forwards}.envelope--opening .envelope__cta{animation:env-cta-out var(--env-duration) linear forwards}.envelope--opening .envelope__vignette{animation:env-vignette-out var(--env-duration) linear forwards}.envelope--opening .env__flap{animation:env-flap-rotate var(--env-duration) linear forwards,env-flap-layer var(--env-duration) linear forwards}.envelope--opening .env__flap-shadow{animation:env-shadow-out var(--env-duration) linear forwards}.envelope--opening .env__name,.envelope--opening .env__pocket{animation:env-pocket-drop var(--env-duration) linear forwards}.envelope--opening .envelope-page{animation:env-card-move var(--env-duration) linear forwards}@keyframes env-seal-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.045)}}@keyframes env-cta-glow{0%,to{opacity:.55}50%{opacity:1}}@keyframes env-seal-out{0%{opacity:1;transform:scale(1) rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.3,1)}14%{opacity:0;transform:scale(1.3) rotate(8deg)}to{opacity:0;transform:scale(1.3) rotate(8deg)}}@keyframes env-cta-out{0%{opacity:.8}7%{opacity:0}to{opacity:0}}@keyframes env-shadow-out{0%,6%{opacity:1}18%,to{opacity:0}}@keyframes env-flap-rotate{0%,6%{transform:rotateX(0deg);animation-timing-function:cubic-bezier(.5,0,.9,.7)}20%{transform:rotateX(-90deg);animation-timing-function:cubic-bezier(.1,.3,.5,1)}34%,to{transform:rotateX(-180deg)}}@keyframes env-flap-layer{0%,20%{z-index:6}20.01%,to{z-index:2}}@keyframes env-pocket-drop{0%,48%{transform:translateZ(0);animation-timing-function:cubic-bezier(.55,0,1,.5)}64%,to{transform:translate3d(0,125vh,0)}}@keyframes env-vignette-out{0%,40%{opacity:1}60%,to{opacity:0}}@keyframes env-card-move{0%,22%{transform:translateZ(0) scale(var(--card-s));animation-timing-function:cubic-bezier(.3,.6,.25,1)}46%,52%{transform:translate3d(0,var(--rise),0) scale(var(--card-s));animation-timing-function:cubic-bezier(.65,0,.25,1)}92%,to{transform:translate3d(var(--fill-x),var(--fill-y),0) scale(1)}}@keyframes env-fade-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.env__seal,.envelope__cta{animation:none}.envelope--opening .envelope-page{animation:none;transform:translate3d(var(--fill-x),var(--fill-y),0) scale(1)}.envelope--opening .env__back,.envelope--opening .env__flap,.envelope--opening .env__flap-shadow,.envelope--opening .env__name,.envelope--opening .env__pocket,.envelope--opening .env__seal,.envelope--opening .envelope__cta,.envelope--opening .envelope__vignette{animation:env-fade-out .4s ease forwards}}