@font-face{font-family:Fraunces;src:url('../assets/fonts/font-04.ttf')}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#201b20}body{display:grid;place-items:center;min-height:100svh}.poster{position:relative;width:min(100vw,59.9753svh);aspect-ratio:971/1619;overflow:hidden;container-type:inline-size;isolation:isolate}.photo{display:block;width:100%;height:100%;object-fit:contain}.piece{position:absolute;display:block;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 1px #0004)}
.bunting{position:absolute;left:13%;top:2.4%;width:75%;height:16%;display:flex;align-items:flex-start;gap:1.4%;z-index:10;--delay:.25s}.string{position:absolute;left:-3%;top:-1%;width:106%;height:75%;overflow:visible;fill:none;stroke:#efe1d4;stroke-width:2.3}.bunting span{position:relative;display:block;text-align:center;width:15.4%;height:17cqw;padding-top:2cqw;background:#29262a;clip-path:polygon(0 0,100% 0,50% 100%);color:#f0a6c3;font:6.7cqw Fraunces;transform:rotate(10deg)}.bunting span:nth-of-type(2){margin-top:3cqw;transform:rotate(7deg)}.bunting span:nth-of-type(3){margin-top:4.5cqw;transform:rotate(2deg)}.bunting span:nth-of-type(4){margin-top:4.5cqw;transform:rotate(-3deg)}.bunting span:nth-of-type(5){margin-top:3cqw;transform:rotate(-7deg)}.bunting span:nth-of-type(6){transform:rotate(-11deg)}
.disco{width:36%;--delay:.5s}.pink-top{left:-19%;top:-8%;width:39%;transform:rotate(-14deg)}.silver-side{right:-20%;top:25%;width:35%;transform:rotate(15deg)}.silver-bottom{left:-21%;bottom:-8%;width:42%}.silver-small{left:1%;bottom:-12%;width:33%}.pink-bottom{right:-22%;bottom:-8%;width:44%}.balloon{width:20%;top:10%;right:-4%;--delay:.8s;transform-origin:50% 90%}.balloon-a{right:-8%;transform:rotate(16deg)}.balloon-b{right:0%;top:11%;transform:rotate(-16deg)}.balloon-c{right:-2%;top:17%;width:20%;transform:rotate(8deg)}
.hat{width:19%;left:32%;top:10.7%;transform:rotate(-18deg);z-index:3;--delay:1.1s}.hat-star{width:6%;left:34%;top:10%;transform:rotate(-14deg);z-index:4;--delay:1.3s}.glasses{width:31%;left:29.5%;top:28.65%;transform:rotate(-29deg);z-index:6;transform-origin:center}
.star{--delay:1s}.star-a{width:17%;top:17%;left:0%;transform:rotate(-14deg)}.star-b{width:9%;top:27%;left:9%;transform:rotate(15deg);--delay:1.15s}.star-c{width:12%;top:40%;left:-2%;transform:rotate(-20deg);--delay:1.3s}.star-d{width:10%;top:32%;right:1%;transform:rotate(12deg);--delay:1.45s}.star-e{width:14%;bottom:12%;left:1%;transform:rotate(-16deg);--delay:1.6s}.star-f{width:12%;bottom:4%;right:22%;transform:rotate(16deg);--delay:1.75s}.star-g{width:10%;bottom:3%;left:34%;transform:rotate(14deg);--delay:1.9s}.kiss{width:10%;z-index:3;--delay:1.6s}.kiss-a{top:51%;right:2%;transform:rotate(23deg)}.kiss-b{top:62%;left:3%;transform:rotate(-25deg)}
.fifteen{position:absolute;left:28%;top:67%;width:44%;height:18%;display:flex;z-index:3;--delay:1.6s}.fifteen img{width:50%;height:100%;object-fit:contain}.fifteen img:first-child{transform:rotate(-9deg)}.fifteen img:last-child{transform:rotate(7deg);margin-left:-5%}.cupcake{top:74%;right:9%;width:15%;height:13%;transform:rotate(14deg);z-index:4;--delay:1.8s}
.ransom{position:absolute;left:6%;top:86%;width:88%;display:flex;justify-content:center;align-items:center;z-index:5;gap:.5%;font-size:8cqw;line-height:1}.ransom span{padding:0 .2cqw .6cqw;background:#e86b9b;color:#fff;font-family:Georgia,serif;font-weight:bold;transform:rotate(8deg);box-shadow:0 1px 2px #0005}.ransom span:nth-child(4n+1){background:#edc537;color:#bb164b;transform:rotate(-8deg);font-style:italic}.ransom span:nth-child(4n+2){background:#ef9dba;color:#fff;transform:translateY(-1cqw) rotate(3deg);font-family:Arial}.ransom span:nth-child(4n+3){background:#d3313d;color:#fff0c0;transform:rotate(-4deg)}.ransom span:nth-child(6n){background:#2c87b3;color:#f39bbb;transform:translateY(1cqw) rotate(4deg)}.ransom i{width:2%}
.replay{position:fixed;right:12px;bottom:10px;z-index:30;border:1px solid #ffffff30;border-radius:20px;background:#201b20b8;color:#fff;padding:8px 12px;font:12px system-ui;cursor:pointer}.replay:focus-visible{outline:2px solid #f4a6c6;outline-offset:3px}
@keyframes pasted{from{opacity:0;translate:0 5px;scale:.99}to{opacity:1;translate:0 0;scale:1}}@keyframes settle-glasses{0%{opacity:0;translate:1cqw -5cqw;rotate:5deg}25%{opacity:1}85%{translate:0 .2cqw;rotate:-.3deg}100%{opacity:1;translate:0 0;rotate:0deg}}@keyframes paper-sway{0%,100%{rotate:-1deg;translate:0 0}50%{rotate:1deg;translate:0 -1px}}
.ready .layer{animation:pasted .85s ease-out var(--delay,0s) both}.ready .star,.ready .balloon{animation:pasted .85s ease-out var(--delay,0s) both,paper-sway 7s ease-in-out calc(var(--delay,0s) + 1s) infinite}.ready .glasses{animation:settle-glasses 1.7s cubic-bezier(.22,.61,.36,1) 2.3s both}.ready .ransom span{animation:pasted .6s ease-out calc(1.9s + var(--i,0)*.055s) both}
@media(prefers-reduced-motion:reduce){.ready .layer,.ready .glasses,.ready .ransom span{animation:none!important}.replay{display:none}}
.poster:not(.ready) .layer,.poster:not(.ready) .glasses,.poster:not(.ready) .ransom span{opacity:0}
/* Portada web: mismo encuadre que la portada aprobada. */
.poster{width:100%;height:100svh;aspect-ratio:auto;container-type:size}.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;transform:scale(1.14);transform-origin:50% 100%}.poster::after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#160d182b);pointer-events:none;z-index:0}.piece,.fifteen,.ransom{z-index:2}
.glasses{position:absolute;left:var(--glasses-x);top:var(--glasses-y);width:var(--glasses-w);height:var(--glasses-h);transform:rotate(-29deg);z-index:6;pointer-events:none}.glasses img{display:block;width:100%;height:100%}.lens{position:absolute;top:30%;width:35%;height:44%;border-radius:35% 35% 48% 48%;overflow:hidden}.lens-left{left:10%;transform:rotate(9deg)}.lens-right{right:10%;transform:rotate(-9deg)}.lens::after{content:'';position:absolute;inset:-40%;background:linear-gradient(110deg,transparent 42%,#ffffff65 49%,#fff9 50%,transparent 57%);translate:-140% 0;opacity:0}
.hat{left:var(--hat-x);top:var(--hat-y);width:var(--hat-w);z-index:3}.hat-star{left:var(--tip-x);top:var(--tip-y);width:var(--tip-w)}
.pink-top{width:29%;left:-16%;top:-9%}.balloon{width:24%;top:2%;right:-5%}.balloon-a{right:-8%;top:1%}.balloon-b{right:2%;top:0%}.balloon-c{right:-2%;top:10%;width:24%}.silver-side{top:35%;right:-20%;width:32%}.star-a{width:15%;top:6%;left:1%}.star-b{width:8%;top:20%;left:1%}.star-c{width:10%;top:42%;left:-2%}.star-d{width:9%;top:33%;right:1%}.star-e{bottom:15%;width:12%}.star-f{bottom:2%;width:10%;right:19%}.star-g{bottom:4%;width:9%;left:28%}.fifteen{top:auto;bottom:16%;height:20%;width:44%;left:28%}.ransom{top:auto;bottom:8%;font-size:8cqw}.cupcake{top:auto;bottom:15%;right:5%;height:13%;width:15%}.silver-bottom{width:34%;bottom:-8%;left:-21%}.silver-small{width:27%;bottom:-11%;left:-2%}.pink-bottom{width:35%;bottom:-7%;right:-22%}.kiss-a{top:50%}.kiss-b{top:62%}.replay{padding:6px 10px;font-size:11px}
/* Chaque recorte tiene su propia amplitud y tiempo; sin fundidos. */
@keyframes float-balloon{0%,100%{translate:0 0;rotate:-1deg}50%{translate:2px -5px;rotate:1deg}}
@keyframes arrive-balloon{0%{translate:-6px 110svh;rotate:-6deg}75%{translate:1px -7px;rotate:1deg}100%{translate:0 0;rotate:0deg}}
@keyframes float-number{0%,100%{translate:0 0;rotate:-.8deg}50%{translate:1px -4px;rotate:1deg}}
@keyframes letter-rock{0%,100%{rotate:var(--rock,-1.5deg);translate:0 0}50%{rotate:calc(var(--rock,-1.5deg)*-1);translate:0 -1px}}
@keyframes twinkle{0%,100%{opacity:.15;scale:.45;rotate:-8deg}48%{opacity:.9;scale:1;rotate:8deg}65%{opacity:.4;scale:.7}}
@keyframes lens-reflection{0%,72%{translate:-140% 0;opacity:0}77%{opacity:.75}88%{translate:140% 0;opacity:0}100%{translate:140% 0;opacity:0}}
.sparkle{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);aspect-ratio:1;z-index:7;pointer-events:none;background:#fff7e9;clip-path:polygon(50% 0,60% 39%,100% 50%,60% 61%,50% 100%,40% 61%,0 50%,40% 39%);filter:drop-shadow(0 0 3px #fff)}
.ready .layer{animation:none}.ready .star{animation:paper-sway var(--duration,7s) ease-in-out var(--offset,0s) infinite}.ready .balloon{animation:arrive-balloon var(--arrival,4s) cubic-bezier(.2,.65,.3,1) var(--delay,0s) both,float-balloon var(--duration,7s) ease-in-out calc(var(--delay,0s) + var(--arrival,4s)) infinite}.ready .fifteen img{animation:float-number var(--duration,5s) ease-in-out var(--offset,0s) infinite}.ready .ransom span{animation:letter-rock var(--duration,6s) ease-in-out var(--offset,0s) infinite}.ready .glasses{animation:none}.ready .lens::after{animation:lens-reflection 9s ease-in-out 2s infinite}.ready .lens-right::after{animation-delay:2.2s}.ready .sparkle{animation:twinkle var(--duration,3.5s) ease-in-out var(--offset,0s) infinite}.poster:not(.ready) .layer,.poster:not(.ready) .glasses,.poster:not(.ready) .ransom span{opacity:1}.poster:not(.ready) .balloon{visibility:hidden}
@media(min-width:600px) and (max-width:899px){.photo{transform:none}}
@media(min-width:900px){.photo{object-position:50% 45%;transform:none}.balloon{width:15%;right:3%;top:1%}.balloon-a{right:-3%}.balloon-b{right:7%;top:-6%}.balloon-c{right:0%;top:11%;width:15%}.pink-top{width:22%;left:-10%;top:-17%}.silver-side{width:21%;right:-12%;top:39%}.star-a{width:9%;left:16%;top:12%}.star-b{width:5%;left:6%;top:40%}.star-c{width:7%;left:14%;top:63%}.star-d{width:6%;right:22%;top:38%}.star-e{width:7%;left:27%;bottom:16%}.star-f{width:6%;right:24%;bottom:4%}.star-g{width:5%;left:62%;bottom:22%}.fifteen{width:29svh;height:25%;left:calc(50% - 14.5svh);bottom:15%}.ransom{width:48%;left:26%;font-size:4.3cqw;bottom:5%}.cupcake{right:29%;width:8%;height:16%;bottom:14%}.kiss-a{width:6%;right:28%;top:56%}.kiss-b{width:6%;left:23%;top:50%}.silver-bottom{width:25%;left:-13%;bottom:-25%}.silver-small{width:20%;left:1%;bottom:-26%}.pink-bottom{width:24%;right:-10%;bottom:-24%}}
@media(prefers-reduced-motion:reduce){.ready .layer,.ready .glasses,.ready .ransom span,.ready .fifteen img,.ready .sparkle,.ready .lens::after{animation:none!important}.sparkle{opacity:.55}.lens::after{display:none}.balloon{visibility:visible!important}}
@media(min-width:900px){.star-f{right:14%;bottom:3%}.hat,.hat-star{display:none}}
/* Los anteojos llegan a la cara una vez; luego conservan su reflejo. */
@keyframes glasses-land{
  0%{translate:0 -110svh;rotate:8deg}
  70%{translate:0 -12px;rotate:1.5deg}
  88%{translate:0 2px;rotate:-.4deg}
  100%{translate:0 0;rotate:0deg}
}
.poster:not(.ready) .glasses{visibility:hidden}
.ready .glasses{animation:glasses-land 2.8s cubic-bezier(.22,.61,.36,1) .7s both}
@media(prefers-reduced-motion:reduce){.ready .glasses{animation:none!important;visibility:visible}}