/* Carta de una sola pantalla: diseño a 360 × 640 y se escala con --s */
.carta{position:relative;width:360px;height:640px;overflow:hidden;color:var(--ink);font-family:Montserrat,sans-serif;transform-origin:0 0}
.c-bg{position:absolute;inset:0;background-color:var(--bgc);background-image:var(--bgi);background-size:var(--bgs);background-position:center}
.c-bg:not(.photo)::after{content:'';position:absolute;inset:0;background:var(--bgc);opacity:.5}
.c-bg.photo::after{content:'';position:absolute;inset:0;background:rgba(20,6,10,.28)}
.c-card{position:absolute;inset:22px;display:flex;flex-direction:column;padding:30px 26px 26px;box-shadow:0 1px 1px rgba(20,10,10,.08),0 12px 24px rgba(20,10,10,.18),0 34px 64px rgba(20,10,10,.28)}
.c-card.nocard{inset:0;box-shadow:none;padding:46px 34px 34px}
.paper-crema{background:linear-gradient(rgba(240,232,220,.62),rgba(240,232,220,.62)),url(../img/papel-crema.jpg) center/700px,rgb(240,232,220)}
.paper-marfil{background:linear-gradient(rgba(244,239,229,.62),rgba(244,239,229,.62)),url(../img/papel-marfil.jpg) center/700px,rgb(244,239,229)}
.paper-blanco{background:linear-gradient(rgba(250,249,245,.62),rgba(250,249,245,.62)),url(../img/papel-blanco.jpg) center/700px,rgb(250,249,245)}
.c-decor{display:block;margin:0 auto 14px;max-width:80%;height:auto;pointer-events:none}
.c-corner{position:absolute;right:-6px;top:6px;width:110px;pointer-events:none}
.c-title{font-size:40px;line-height:1.08;outline:none;min-height:1em;word-break:break-word}
.f-script{font-family:'Pinyon Script',cursive;font-weight:400}
.f-clasica{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:38px}
.f-moderna{font-family:Montserrat,sans-serif;font-weight:200;font-size:24px;letter-spacing:.22em;text-transform:uppercase;line-height:1.4}
.c-body{margin-top:18px;font-weight:300;font-size:13.5px;line-height:1.85;white-space:pre-wrap;outline:none;flex:1 1 auto;overflow:hidden;word-break:break-word}
.c-end{text-align:right;margin-top:10px;position:relative}
.c-close{font-style:italic;font-weight:300;font-size:12.5px;opacity:.82;outline:none}
.c-from{font-family:'Pinyon Script',cursive;font-size:32px;line-height:1.1;margin-top:2px;outline:none;color:var(--acc)}
.c-sign{display:block;margin:4px 0 -2px auto;max-width:150px;max-height:54px;width:auto;height:auto;pointer-events:none}
.c-photo{position:absolute;left:0;top:0;width:var(--pw,170px);transform-origin:50% 50%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.22))}
.c-photo.dragging{cursor:grabbing}
.c-photo.framed{background:#fff;padding:6px 6px 22px;filter:none;box-shadow:0 10px 22px rgba(0,0,0,.24)}
.c-draw{position:absolute;inset:0;width:360px;height:640px;touch-action:none}
.c-draw.off{pointer-events:none}
.decor-bottom .c-decor{order:9;margin:12px auto 0}
.light-ink .c-close{opacity:.78}
[contenteditable=true]{cursor:text;border-radius:4px;transition:box-shadow .3s}
[contenteditable=true]:hover{box-shadow:0 0 0 1px rgba(127,127,127,.25)}
[contenteditable=true]:focus{box-shadow:0 0 0 1px currentColor}
[contenteditable=true]:empty::before{content:attr(data-ph);opacity:.45}

/* Sobre para quien la recibe */
.sobre-escena{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;transition:opacity .8s ease .5s}
.sobre-escena.abierto{opacity:0;pointer-events:none}
.env2{position:relative;width:290px;height:192px;perspective:900px;cursor:pointer;border:0;padding:0;background:none}
.env2 .back,.env2 .front,.env2 .flap{position:absolute;left:0;right:0}
.env2 .back{inset:0;background:#e9dfd0 url(../img/papel-crema.jpg) center/500px;box-shadow:0 26px 50px rgba(0,0,0,.32)}
.env2 .front{left:0;right:0;bottom:0;height:100%;background:#f0e8dc url(../img/papel-crema.jpg) center/500px;clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);z-index:3}
.env2 .flap{top:0;height:62%;background:#e6dccb url(../img/papel-crema.jpg) center/500px;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .9s cubic-bezier(.4,.1,.2,1);z-index:4;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
.env2 .seal{position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;transform:translate(-50%,-30%);z-index:5;display:flex;align-items:center;justify-content:center;font-family:'Pinyon Script',cursive;font-size:22px;color:rgba(255,255,255,.85);box-shadow:inset 0 0 0 5px rgba(255,255,255,.06),inset 0 -4px 8px rgba(0,0,0,.35),0 3px 6px rgba(0,0,0,.3);transition:opacity .4s}
.abierto .env2 .flap{transform:rotateX(180deg);z-index:1}
.abierto .env2 .seal{opacity:0}
.sobre-hint{font-size:9px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.carta-wrap{transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .9s ease}
.carta-wrap.guardada{transform:translateY(40px) scale(.92);opacity:0}
@media (prefers-reduced-motion:reduce){.env2 .flap,.carta-wrap,.sobre-escena{transition:none}}

/* Ilustraciones y efectos */
.c-art{position:absolute;left:0;right:0;display:flex;justify-content:center;pointer-events:none;z-index:1}
.c-art svg{height:100%;width:auto;max-width:100%;display:block}
.c-art svg+svg{margin-left:70px}
.c-art-bottom{bottom:18px;height:200px}
.c-art-top{top:0;height:210px}
.c-art-top svg{width:100%}
.c-art-ground{bottom:0;height:150px}
.c-art-ground svg{width:100%}
.c-art-inline{position:relative;left:auto;right:auto;height:90px;margin:0 auto 12px}
.c-card{z-index:2}
.c-card.nocard{background:none}
.c-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.c-fx i{position:absolute;left:var(--x);top:-20px;width:var(--s);height:var(--s);display:block}
.fx-nieve i{border-radius:50%;background:#fff;opacity:.85;filter:blur(.4px);animation:fxCae var(--d) linear var(--dl) infinite}
.fx-confeti i{width:calc(var(--s) * .55);background:linear-gradient(#f3e1ae,#a8833a);animation:fxCaeGira var(--d) linear var(--dl) infinite}
.fx-destellos i{top:var(--y);background:#f3e1ae;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:fxBrilla var(--d) ease-in-out var(--dl) infinite}
.fx-corazones i{top:auto;bottom:-24px;background:rgba(243,220,220,.75);clip-path:path('M5 9C1.5 6.2 0 4.4 0 2.7 0 1.2 1.2 0 2.6 0 3.6 0 4.4.6 5 1.4 5.6.6 6.4 0 7.4 0 8.8 0 10 1.2 10 2.7 10 4.4 8.5 6.2 5 9z');width:10px;height:10px;transform:scale(calc(var(--s) / 10px));animation:fxSube var(--d) ease-in var(--dl) infinite}
@keyframes fxCae{to{transform:translate(var(--dr),680px)}}
@keyframes fxCaeGira{to{transform:translate(var(--dr),680px) rotate(calc(var(--h) + 540deg))}}
@keyframes fxBrilla{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}
@keyframes fxSube{0%{opacity:0;translate:0 0}15%{opacity:1}100%{opacity:0;translate:var(--dr) -700px}}
@media (prefers-reduced-motion:reduce){.c-fx i{animation:none;opacity:.5;top:var(--y)}}

/* Imágenes en acuarela y adornos colgantes */
.c-art img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
.c-art-bottom img{filter:drop-shadow(0 10px 14px rgba(40,20,10,.12))}
.c-hang{position:absolute;inset:0 0 auto 0;height:300px;pointer-events:none;z-index:1}
.c-hang span{position:absolute;top:-12px;width:var(--w);margin-left:calc(var(--w) / -2);transform-origin:50% 0;animation:fxMece var(--sd) ease-in-out infinite alternate}
.c-hang span::before{content:'';position:absolute;left:50%;top:0;width:1px;height:var(--len);background:linear-gradient(rgba(168,131,58,.2),rgba(168,131,58,.75))}
.c-hang img{display:block;width:100%;margin-top:calc(var(--len) - 14px)}
@keyframes fxMece{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}

/* Copos pintados */
.fx-copos i{width:calc(var(--s) * 2.3);height:calc(var(--s) * 2.3);background:url(../img/x-copo1.webp) center/contain no-repeat;opacity:.8;animation:fxCaeGira calc(var(--d) * 1.4) linear var(--dl) infinite}
.fx-copos i.k2{background-image:url(../img/x-copo2.webp)}.fx-copos i.k3{background-image:url(../img/x-copo3.webp)}.fx-copos i.k4{background-image:url(../img/x-copo4.webp)}
/* Estrellas que caen, doradas y con brillo */
.fx-lluvia i{width:calc(var(--s) * 1.6);height:calc(var(--s) * 1.6);background:radial-gradient(circle,#fff8dc 0 18%,#e8c873 40%,#c9a24e 70%);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);filter:drop-shadow(0 0 5px rgba(255,205,100,.95));animation:fxLluvia calc(var(--d) * 1.2) linear var(--dl) infinite}
@keyframes fxLluvia{0%{transform:translate(0,0) rotate(0) scale(.8);opacity:0}10%{opacity:1}50%{transform:translate(calc(var(--dr) * .5),340px) rotate(180deg) scale(1.1)}90%{opacity:.9}100%{transform:translate(var(--dr),680px) rotate(360deg) scale(.8);opacity:0}}
/* Estrellas colgantes con brillo, como en Artesia Seasons */
.fx-colgantes i{top:0;width:1px;height:var(--len);background:linear-gradient(transparent,rgba(214,176,104,.6) 30%,rgba(214,176,104,.6));transform-origin:top;animation:fxMece calc(3s + var(--s) / 6) ease-in-out var(--dl) infinite alternate}
.fx-colgantes i b{position:absolute;left:50%;bottom:-9px;width:calc(var(--s) * 1.6 + 8px);height:calc(var(--s) * 1.6 + 8px);transform:translateX(-50%);background:#ffe3a0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(0 0 8px rgba(255,215,90,1)) drop-shadow(0 0 16px rgba(255,190,70,.7));animation:fxBrillo calc(2s + var(--s) / 8) ease-in-out var(--dl) infinite}
@keyframes fxBrillo{0%,100%{opacity:.8}50%{opacity:1}}
/* Estrella fugaz */
.fx-fugaz i{top:calc(var(--y) * .5);left:-30%;width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,240,200,.95));transform:rotate(18deg);filter:drop-shadow(0 0 4px #ffe3a0);opacity:0;animation:fxFugaz var(--d) ease-in var(--dl) infinite}
@keyframes fxFugaz{0%{transform:translate(0,0) rotate(18deg);opacity:0}2%{opacity:1}12%{transform:translate(560px,180px) rotate(18deg);opacity:0}100%{opacity:0}}
/* Estrellitas al tocar la carta */
.tap-star{position:fixed;width:var(--sz);height:var(--sz);margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);background:#ffe3a0;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);filter:drop-shadow(0 0 6px rgba(255,215,90,1));pointer-events:none;z-index:9999;animation:tapStar .85s ease-out forwards}
@keyframes tapStar{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(0) rotate(180deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.c-hang span,.fx-colgantes i,.fx-colgantes i b{animation:none}}