.cinderella-demo-switch{position:fixed;top:auto;bottom:20px;right:20px;z-index:9999;display:flex;align-items:center;gap:5px;padding:6px;border-radius:50px;background:#fffdf8ee;box-shadow:0 5px 30px #60354b33;backdrop-filter:blur(14px);font:600 12px/1.2 'DM Sans',sans-serif;color:#193752}
.cinderella-demo-label{padding:0 9px;letter-spacing:1px;font-size:10px}
.cinderella-demo-switch button{border:0;border-radius:30px;padding:9px 12px;cursor:pointer;background:transparent;color:#193752;font-weight:700}
.cinderella-demo-switch button.active{background:#244965;color:white}
body.cinderella-intro-locked{overflow:hidden}
.cinderella-intro{position:fixed;inset:0;z-index:999;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,#f5f8fb 0%,#c5ddf9 48%,#6289b8 100%);isolation:isolate;color:#193752;transition:opacity .85s ease,visibility .85s ease}
.cinderella-intro.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.intro-glow{position:absolute;inset:-30%;background:radial-gradient(circle at 20% 25%,#fff8 0%,transparent 30%),radial-gradient(circle at 80% 75%,#ffffff85 0%,transparent 24%);animation:introGlow 8s ease-in-out infinite alternate}
.intro-sparkles{position:absolute;inset:0;opacity:.6;background-image:radial-gradient(circle,#fff 0 2px,transparent 3px),radial-gradient(circle,#fff 0 1px,transparent 2px);background-size:113px 137px,73px 97px;background-position:15px 21px,54px 36px;animation:introSparkles 14s linear infinite}
.intro-content{width:min(94vw,480px);text-align:center;position:relative;z-index:1;padding:34px 5px}
.intro-eyebrow{letter-spacing:.27em;font:600 10px 'DM Sans',sans-serif;color:#5b7690}
.intro-heading{font:normal clamp(31px,7vw,44px) 'Cormorant Garamond',Georgia,serif;margin:12px 0 -7px}
.intro-envelope-scene{height:320px;display:flex;align-items:center;justify-content:center;perspective:1000px}
.intro-envelope{position:relative;width:min(76vw,310px);height:195px;margin-top:82px;filter:drop-shadow(0 19px 15px #76465e43);transform-style:preserve-3d;transition:transform 1.4s ease}
.intro-envelope-back{position:absolute;inset:0;background:linear-gradient(140deg,#356598,#8cb6df);border-radius:6px}
.intro-card{position:absolute;bottom:12px;left:8%;width:84%;height:255px;background:linear-gradient(145deg,#fffefd,#eef5fb);border:1px solid #d9c58a;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 2px 9px #975c7c3a;transition:transform 1.55s cubic-bezier(.15,.85,.2,1);z-index:2}
.intro-flower{font-size:25px;color:#b9933e}.intro-card-small{font:700 10px 'DM Sans',sans-serif;letter-spacing:.18em}.intro-card-xv{font:42px 'Cormorant Garamond',Georgia,serif;line-height:1.1}.intro-card-name{font:48px 'Cormorant Garamond',Georgia,serif;line-height:1.1}.intro-card-date{font:600 10px 'DM Sans',sans-serif;letter-spacing:.12em}.intro-card-bottom{font:14px 'Cormorant Garamond',Georgia,serif;margin-top:10px}
.intro-envelope-flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 64%);background:linear-gradient(170deg,#cee5fc,#749dc6);transform-origin:top center;z-index:5;transition:transform .85s ease,z-index 0s linear .45s;backface-visibility:visible}
.intro-envelope-front{position:absolute;inset:0;clip-path:polygon(0 0,50% 51%,100% 0,100% 100%,0 100%);background:linear-gradient(155deg,#91b9df,#4d7eac);z-index:4;border-radius:5px}
.intro-envelope-front::after{content:'';position:absolute;inset:0;clip-path:polygon(0 100%,50% 39%,100% 100%);background:#a9cbee}
.intro-wax{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:23px 'Cormorant Garamond',Georgia,serif;color:#fff;background:linear-gradient(130deg,#c7a24a,#806322);border:3px double #f4ddb0;z-index:7;box-shadow:0 4px 12px #69435a40;transition:opacity .2s}
.intro-open-btn{background:#244965;color:white;border:1px solid #c7a24a;border-radius:40px;padding:15px 30px;box-shadow:0 7px 22px #784c6c3d;cursor:pointer;font:700 13px 'DM Sans',sans-serif;letter-spacing:.05em;transition:transform .2s,opacity .3s}
.intro-open-btn:hover{transform:translateY(-3px)}.intro-hint{font:13px 'Cormorant Garamond',Georgia,serif;margin-top:18px;font-size:22px;color:#456e90}.intro-skip{position:absolute;bottom:19px;right:22px;background:#fff7;border:1px solid #ffffffa0;padding:8px 12px;border-radius:20px;color:#193752;cursor:pointer;font:12px 'DM Sans',sans-serif}
.cinderella-intro.opening .intro-envelope-flap{transform:rotateX(180deg);z-index:1}.cinderella-intro.opening .intro-wax{opacity:0}.cinderella-intro.opening .intro-card{transform:translateY(-162px)}.cinderella-intro.opening .intro-envelope{transform:translateY(33px) scale(1.06)}.cinderella-intro.opening .intro-open-btn{opacity:0;pointer-events:none}
@keyframes introSparkles{to{background-position:15px -253px,54px -158px}}@keyframes introGlow{to{transform:translate(6%,3%)}}
@media(max-width:520px){.cinderella-demo-switch{top:auto;bottom:12px;right:50%;transform:translateX(50%);white-space:nowrap}.cinderella-demo-label{display:none}.intro-skip{bottom:65px;right:12px}.intro-envelope-scene{height:330px}}
@media(prefers-reduced-motion:reduce){.cinderella-intro *, .cinderella-intro{animation:none!important;transition:none!important}}

.cinderella-intro[hidden]{display:none}.cinderella-demo-switch[hidden]{display:none}

/* Misma geometría móvil que Princess Frog, sin escalas de contenedor. */
.intro-heading,.intro-hint{font-style:italic}
.intro-card-name{font-size:36px;max-width:100%;text-align:center}
.intro-card-bottom{font-size:14px}
.intro-glow,.intro-sparkles{pointer-events:none}
@media(max-width:650px){
 .intro-content{width:min(94vw,480px)}
 .intro-envelope{height:clamp(145px,48vw,195px)}
 .intro-card-name{font-size:34px}
 .intro-heading{font-size:32px}
 .intro-hint{font-size:20px}
 body.cinderella-intro-locked .cinderella-demo-switch{position:fixed;bottom:12px;right:50%;transform:translateX(50%);z-index:1000;margin:0}
}
@media(max-width:375px){.intro-card-name{font-size:31px}}
@media(max-height:560px){
 .cinderella-intro{overflow-y:auto;align-items:start}
 .intro-content{padding:14px 5px 90px}
 .intro-envelope-scene{height:270px}
 .intro-skip{position:fixed;bottom:65px}
}