/* Papelería: sobre de algodón, pliegues por capas y sello fotográfico. */
/* El título recibe el foco al cerrar el sobre para orientar al lector de pantalla. */
.hero h1[tabindex="-1"]:focus{outline:none}
/* Evita selección y destellos táctiles en la animación; conserva el foco de teclado. */
.envelope-intro{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.envelope-intro button{touch-action:manipulation}
.wax-seal img{-webkit-user-drag:none;-webkit-touch-callout:none}
.envelope-intro{background:#eeebe4;transition:opacity .85s ease,visibility .85s;padding:35px 24px}
.envelope-intro::before{background:radial-gradient(ellipse at 18% 10%,#fffdf6cc,transparent 53%),linear-gradient(120deg,transparent 55%,#c9c6b02a 63%,transparent 72%),radial-gradient(ellipse at 85% 100%,#b8c0a422,transparent 50%)}
.envelope-intro::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.18' filter='url(%23n)'/%3E%3C/svg%3E")}
.envelope-heading{margin-bottom:58px}
.envelope-heading>.eyebrow{font-size:10px;letter-spacing:2.3px;color:#8c8b7b}
.envelope-heading h2{font-size:clamp(38px,4vw,53px);font-weight:400;margin:17px 0 13px;color:#4a5244;letter-spacing:-.5px}
.envelope-heading p{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#92917f}
.envelope-scene{width:min(640px,83vw);aspect-ratio:1.72;perspective:1800px;filter:drop-shadow(0 4px 2px #63583e12) drop-shadow(0 26px 25px #75675026);transform:rotate(-2deg);transition:transform 1.2s cubic-bezier(.22,.61,.36,1),opacity .8s}
.envelope-back{background:linear-gradient(160deg,#c8bda7,#dbd0bb 40%,#c6baa1);border:1px solid #d1c8b6;border-radius:3px;box-shadow:inset 0 3px 7px #9c8b6c3b}
.envelope-letter{inset:5% 5% 3%;padding:11% 7% 5%;background:#fffdf6;box-shadow:0 0 0 1px #e0dacb,0 8px 20px #63513720;transition:transform 1.3s cubic-bezier(.22,.61,.36,1) 1.05s,box-shadow .7s}
.envelope-letter::before{inset:14px;border-color:#d5d9c8}
.envelope-letter .letter-small{font-size:8px;letter-spacing:2px;color:#999d87}
.envelope-letter .letter-monogram{font-size:64px;color:#6c765a;margin:5px 0;letter-spacing:3px}
.envelope-letter p{font-size:25px;font-style:italic;color:#6b735b;margin:8px 0}
.envelope-pocket{clip-path:none;background:none;overflow:hidden;border-radius:0 0 3px 3px}
.envelope-pocket::before{content:none}
.envelope-pocket::after,.envelope-flap::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.1' filter='url(%23p)'/%3E%3C/svg%3E");opacity:.35}
.envelope-pocket>span{display:block;position:absolute;inset:0}
.envelope-pocket .fold-left{background:linear-gradient(35deg,#e4dcca,#f4eedf);clip-path:polygon(0 0,55% 57%,0 100%);filter:drop-shadow(1px 0 1px #a8987b44)}
.envelope-pocket .fold-right{background:linear-gradient(-35deg,#e0d7c4,#f3ecdd);clip-path:polygon(100% 0,45% 57%,100% 100%);filter:drop-shadow(-1px 0 1px #a8987b44)}
.envelope-pocket .fold-bottom{background:linear-gradient(180deg,#f5eedf,#e9e0cd);clip-path:polygon(0 100%,50% 44%,100% 100%);filter:drop-shadow(0 -1px 1px #99886e33)}
.envelope-pocket .fold-bottom::after{content:'';position:absolute;inset:0;background:linear-gradient(147deg,transparent 49.8%,#c7bba044 50%,transparent 50.3%),linear-gradient(33deg,transparent 49.8%,#c7bba044 50%,transparent 50.3%)}
.envelope-flap{background:linear-gradient(176deg,#f7f1e4,#e6dcc7);clip-path:polygon(0 0,100% 0,50% 58%);filter:drop-shadow(0 3px 1px #88795e38);backface-visibility:visible;transition:none;transform-style:preserve-3d}
.wax-seal{width:110px;height:110px;top:55%;background:none;border-radius:50%;box-shadow:none;animation:none;filter:drop-shadow(2px 5px 3px #4c191b55);transition:transform .65s cubic-bezier(.22,.61,.36,1),opacity .55s ease,filter .3s}
.wax-seal::before,.wax-seal::after{content:none}
.wax-seal svg,.wax-seal>span{display:none}
.wax-seal img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.wax-seal:hover{transform:translate(-50%,-50%) rotate(3deg) scale(1.035);filter:drop-shadow(3px 7px 4px #4c191b55) brightness(1.04)}
.envelope-instruction{font-size:10px;letter-spacing:1.8px;color:#989581;margin-top:42px}
.skip-envelope{font-size:11px;border:0;color:#8a8c7b;letter-spacing:.4px;right:30px;bottom:24px;padding:12px 0}
.skip-envelope:hover{color:#4b5941;text-decoration:underline;text-underline-offset:5px}
.envelope-intro.is-opening .wax-seal{opacity:0;transform:translate(-40%,-18%) rotate(14deg) scale(.94)}
.envelope-intro.is-opening .envelope-scene{transform:rotate(0)}
.envelope-intro.is-opening .envelope-flap{animation:premium-flap 1.25s cubic-bezier(.45,.05,.25,1) .35s forwards}
.envelope-intro.is-opening .envelope-letter{transform:translateY(-47%) rotate(-1deg);box-shadow:0 0 0 1px #ddd5c6,0 15px 30px #63513722}
.envelope-intro.is-opening .envelope-heading{opacity:0;transform:translateY(-12px)}
.envelope-intro.is-revealing .envelope-scene{transform:translateY(15px) scale(1.035);opacity:.45}
@keyframes premium-flap{0%{transform:rotateX(0deg);z-index:4}49%{transform:rotateX(88deg);z-index:4}50%{transform:rotateX(90deg);z-index:0}100%{transform:rotateX(180deg);z-index:0}}
@media(max-width:550px){.envelope-intro{padding:25px 18px 70px}.envelope-heading{margin-bottom:65px}.envelope-heading>.eyebrow{font-size:9px;letter-spacing:1.5px}.envelope-heading h2{font-size:40px;margin:18px 0 14px}.envelope-heading p{font-size:10px;letter-spacing:1.2px}.envelope-scene{width:90vw;max-width:480px;aspect-ratio:1.57}.wax-seal{width:88px;height:88px}.envelope-letter{padding:8% 7% 5%}.envelope-letter .letter-monogram{font-size:46px;margin:4px 0}.envelope-letter .letter-small{font-size:7px;letter-spacing:1.1px}.envelope-letter p{font-size:20px;margin:7px 0}.envelope-instruction{font-size:10px;letter-spacing:.8px;margin-top:34px}.skip-envelope{font-size:11px;right:20px;bottom:17px}}
@media(max-height:620px) and (min-width:551px){.envelope-heading{margin-bottom:35px}.envelope-heading h2{font-size:38px;margin:12px 0}.envelope-scene{width:450px}.wax-seal{width:90px;height:90px}.envelope-letter .letter-monogram{font-size:45px}.envelope-letter p{font-size:19px}.envelope-instruction{margin-top:25px}}
@media(prefers-reduced-motion:reduce){.envelope-intro.is-opening .envelope-flap{animation:none!important}.envelope-scene,.envelope-letter,.wax-seal{transition:none!important}}
@media(max-width:550px){
 .envelope-heading{width:100%;margin-bottom:clamp(32px,10vh,65px);flex-shrink:0}
 .envelope-heading h2{font-size:clamp(29px,8vw,40px);line-height:1.15}
 .envelope-heading p{line-height:1.7}
 .envelope-scene{width:min(100%,480px);flex-shrink:0}
 .envelope-letter p{font-size:clamp(15px,4.5vw,20px)}
 .envelope-instruction{max-width:100%;line-height:1.8;font-size:clamp(9px,2.6vw,11px)}
}
@media(max-height:540px){
 .envelope-intro{padding:16px 20px 52px;overflow-y:auto}
 .envelope-heading{margin-bottom:24px}
 .envelope-heading h2{font-size:30px;margin:8px 0}
 .envelope-scene{width:min(65vh,100%,380px)}
 .envelope-instruction{margin-top:20px}
}