/* Intro: sobre con sello → tarjeta → destello → sitio. Lógica en intro.js */
@font-face{font-family:"MJ Memories";src:url(intro/memories.woff) format("woff");font-display:block}

/* Tapa el sitio desde el primer pintado hasta que intro.js arranque. Si el JS falla, se quita sola a los 5 s. */
html:not(.mj-ready) body::before{content:"";position:fixed;inset:0;z-index:2147483646;background:#F4EADB;animation:mj-cover-out .6s 5s forwards}
@keyframes mj-cover-out{to{opacity:0;visibility:hidden}}
html.mj-lock,html.mj-lock body{overflow:hidden}

#mj{position:fixed;inset:0;z-index:2147483647;overflow:hidden;background:#F4EADB;color:#332D2B;font-family:"Cormorant Garamond",cormorantgaramond,Georgia,serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#mj *{box-sizing:border-box}
#mj p{margin:0}
.mj-bg{position:absolute;inset:-3%;background:url(intro/bg.jpg) center/cover}
.mj-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 75% 65% at 50% 58%,rgba(252,248,235,.5),rgba(244,234,219,.86) 68%,rgba(232,216,192,.95))}

/* ---------- pantalla inicial ---------- */
.mj-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4vh 0 2vh}
.mj-kicker{font-size:clamp(11px,1.3vw,14px);letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;opacity:.75}
.mj-title{font-family:"Luxurious Script",luxurious-script,cursive;font-size:clamp(40px,6.4vw,72px);line-height:1.15;margin:.05em 0 clamp(16px,3.5vh,36px)!important;text-align:center}
.mj-hint{margin-top:clamp(22px,4.5vh,44px)!important;font-style:italic;font-size:clamp(17px,1.9vw,20px);opacity:.7}

/* ---------- sobre ---------- */
.mj-env{position:relative;width:min(90vw,560px);aspect-ratio:1.42;perspective:1600px;cursor:pointer}
.mj-paper{background-color:#EFE3CF;background-image:url(intro/papel.jpg);background-size:320px}
.mj-back{position:absolute;inset:0;border-radius:4px;box-shadow:0 44px 70px -34px rgba(60,38,18,.5),0 12px 22px -12px rgba(60,38,18,.28)}
.mj-back::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(95,62,30,.26),rgba(95,62,30,.08))}
.mj-pocket{position:absolute;inset:0;z-index:10;border-radius:4px;clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%)}
.mj-pocket svg{position:absolute;inset:0;width:100%;height:100%}
.mj-fshadow{position:absolute;left:0;right:0;top:0;height:57%;z-index:19;filter:blur(5px);transform:translateY(5px)}
.mj-fshadow i{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);background:rgba(70,44,18,.32)}
.mj-flap{position:absolute;left:0;right:0;top:0;height:56%;z-index:20;transform-origin:50% 0;transform-style:preserve-3d}
.mj-flap-f,.mj-flap-b{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.mj-flap-f{clip-path:polygon(0 0,100% 0,50% 100%)}
.mj-flap-f::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(120,88,48,.12))}
.mj-flap-b{clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotateX(180deg)}
.mj-flap-b::before{content:"";position:absolute;inset:0;clip-path:polygon(50% 10%,92% 100%,8% 100%);background:url(intro/liner.webp) center/cover}
.mj-flap-b::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(80,50,20,.22),transparent 60%)}
.mj-shade{position:absolute;inset:0;background:#3a2410;opacity:0;pointer-events:none}

.mj-flowers{position:absolute;left:50%;top:55%;z-index:25;width:31%;transform:translate(-64%,-66%) rotate(-24deg);pointer-events:none;filter:drop-shadow(0 6px 6px rgba(60,38,18,.25))}
.mj-flowers img{display:block;width:100%;height:auto}

.mj-seal{position:absolute;left:50%;top:55%;z-index:30;width:22%;aspect-ratio:1;margin:0;padding:0;border:0;background:none;cursor:pointer;transform:translate(-50%,-50%);border-radius:50%;filter:drop-shadow(0 6px 8px rgba(70,10,8,.35))}
.mj-seal:focus-visible{outline:2px solid #D5A785;outline-offset:6px}
.mj-sh{position:absolute;inset:0;background:url(intro/sello.webp) center/contain no-repeat}
.mj-sh.l{clip-path:polygon(0 0,53% 0,47% 17%,56% 34%,45% 51%,55% 69%,47% 86%,52% 100%,0 100%)}
.mj-sh.r{clip-path:polygon(53% 0,100% 0,100% 100%,52% 100%,47% 86%,55% 69%,45% 51%,56% 34%,47% 17%)}
.mj-glint{position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,240,225,.7) 50%,transparent 62%) no-repeat;background-size:260% 100%;-webkit-mask:url(intro/sello.webp) center/contain no-repeat;mask:url(intro/sello.webp) center/contain no-repeat;mix-blend-mode:screen;animation:mj-glint 3.6s ease-in-out 1.8s infinite;pointer-events:none}
@keyframes mj-glint{0%{background-position:160% 0}55%,100%{background-position:-60% 0}}
.mj-ring{position:absolute;inset:-14%;border-radius:50%;border:1px solid rgba(213,167,133,.85);animation:mj-ring 2.4s ease-out 2s infinite;opacity:0;pointer-events:none}
@keyframes mj-ring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.mj-opened .mj-ring,.mj-opened .mj-glint{animation:none;opacity:0}
.mj-crumb{position:absolute;border-radius:50%;background:#8E1B17;pointer-events:none}

/* ---------- tarjeta ---------- */
.mj-layer{position:absolute;inset:0;pointer-events:none}
.mj-emerge{visibility:hidden}
.mj-card{position:absolute;left:0;top:0;aspect-ratio:1.42;container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:3px;background-color:#FFFCF5;background-image:linear-gradient(rgba(255,253,248,.72),rgba(255,253,248,.72)),url(intro/papel.jpg);background-size:auto,300px;box-shadow:0 30px 60px -26px rgba(40,24,10,.5),0 3px 8px rgba(40,24,10,.14)}
.mj-card::before,.mj-card::after{content:"";position:absolute;pointer-events:none;border:1px solid rgba(213,167,133,.85)}
.mj-card::before{inset:4.5%}
.mj-card::after{inset:calc(4.5% + 5px);border-width:.5px;border-color:rgba(213,167,133,.6)}
.mj-c-rings{width:15cqw;height:auto;opacity:0}
.mj-c-small{font-size:2.9cqw;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;opacity:.75}
.mj-c-names{font-family:"MJ Memories",cursive;font-size:10.5cqw;line-height:1.25;margin:2cqw 0 1cqw!important;white-space:nowrap;clip-path:inset(-40% 102% -40% -4%)}
.mj-c-line{display:block;width:20cqw;height:1px;background:#D5A785;transform:scaleX(0)}
.mj-c-date{margin-top:3cqw!important;font-size:3.5cqw;font-weight:500;letter-spacing:.32em;padding-left:.32em;text-transform:uppercase;font-variant-numeric:tabular-nums;opacity:0}

.mj-bloom{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#FFFDF8;box-shadow:0 0 60px 40px #FFFDF8;transform:scale(0);pointer-events:none}
.mj-skip{position:absolute;right:clamp(14px,3vw,28px);top:clamp(10px,2.4vh,22px);z-index:5;padding:8px 4px;border:0;background:none;color:rgba(51,45,43,.62);font:italic 17px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.04em;cursor:pointer;opacity:0}
.mj-skip:hover,.mj-skip:focus-visible{color:#332D2B}