/* Grupo niños (1/2): dino · unicornio · sirena · heroe */
@font-face{font-family:"Luckiest Guy";font-weight:400;font-display:swap;src:url("/fonts/ninos-luckiest-guy.woff2") format("woff2")}
@font-face{font-family:"Pacifico";font-weight:400;font-display:swap;src:url("/fonts/ninos-pacifico.woff2") format("woff2")}
@font-face{font-family:"Grandstander";font-weight:100 900;font-display:swap;src:url("/fonts/ninos-grandstander.woff2") format("woff2")}
@font-face{font-family:"Bangers";font-weight:400;font-display:swap;src:url("/fonts/ninos-bangers.woff2") format("woff2")}
@font-face{font-family:"Lilita One";font-weight:400;font-display:swap;src:url("/fonts/ninos-lilita-one.woff2") format("woff2")}

/* ================= DINO AVENTURA ================= */
[data-fx="dino"] #fx{background:radial-gradient(circle,color-mix(in srgb,var(--c4) 16%,transparent) 3px,#0000 4px) 0 0/44px 44px,linear-gradient(180deg,var(--soft) 0,var(--bg) 330px),var(--bg)}
[data-tpl="dino"] .nombre{font-family:var(--f-head);font-size:min(var(--name-size),12.5vw);line-height:1.05;letter-spacing:.02em;color:var(--accent);text-shadow:0 2px 0 var(--bg),2px 4px 0 var(--accent-2),4px 7px 0 var(--accent-2),5px 9px 0 color-mix(in srgb,var(--accent-2) 55%,#000);margin:.7rem 0 .5rem;animation:dino-pisa 3.4s ease-in-out infinite}
[data-tpl="dino"] .eyebrow{display:inline-block;background:var(--accent);color:var(--btn-ink);padding:.28rem 1rem;border-radius:999px;font-weight:700;font-size:.82rem;letter-spacing:.1em;opacity:1;box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,#000)}
[data-tpl="dino"] .titulo{font-family:var(--f-head);color:var(--ink);font-size:1.7rem;letter-spacing:.03em;margin-top:.6rem}
[data-tpl="dino"] .edad-num{min-width:112px;height:128px;padding:0 .6rem;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 24% 70%,var(--c2) 0 8px,#0000 9px),radial-gradient(circle at 80% 58%,var(--c2) 0 6px,#0000 7px),radial-gradient(circle at 70% 82%,var(--c2) 0 5px,#0000 6px),color-mix(in srgb,var(--c3) 80%,#fff);color:#2a1a08;font-family:var(--f-head);font-size:4.8rem;box-shadow:inset -8px -10px 0 #0000001a,6px 7px 0 var(--accent-2);transform-origin:50% 100%;animation:dino-wob 3s ease-in-out infinite}
[data-tpl="dino"] .edad-lbl{font-family:var(--f-head);color:var(--accent);font-weight:400;letter-spacing:.18em;font-size:1.05rem;opacity:1}
[data-tpl="dino"] .f-dino{--ar:1;border-radius:46% 54% 52% 48%/54% 50% 50% 46%;overflow:hidden;border:7px solid var(--accent);outline:4px dashed var(--c2);outline-offset:7px;box-shadow:8px 10px 0 var(--accent-2)}
[data-tpl="dino"] .fecha .dia{width:92px;height:106px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 24% 68%,var(--c2) 0 7px,#0000 8px),radial-gradient(circle at 78% 54%,var(--c2) 0 5px,#0000 6px),color-mix(in srgb,var(--c3) 80%,#fff);color:#2a1a08;font-family:var(--f-head);box-shadow:5px 6px 0 var(--accent-2);font-size:3.3rem}
[data-tpl="dino"] .fecha .d-dow,[data-tpl="dino"] .fecha .d-mes,[data-tpl="dino"] .fecha .d-anio{font-family:var(--f-head);letter-spacing:.14em;color:var(--accent)}
[data-tpl="dino"] .cuenta div{border-radius:18px;border:3px solid var(--accent);background:var(--card);box-shadow:0 4px 0 var(--accent)}
[data-tpl="dino"] .cuenta b{font-family:var(--f-head);font-weight:400;color:var(--accent-2);font-size:1.9rem}
[data-tpl="dino"] .mensaje{font-style:normal;font-weight:600;font-size:1.2rem}
[data-tpl="dino"] h2.sec{font-family:var(--f-head);color:var(--accent);font-size:2.1rem;letter-spacing:.03em;text-shadow:2px 3px 0 color-mix(in srgb,var(--accent-2) 45%,transparent)}
[data-tpl="dino"] .programa::before{background:none;border-left:3px dotted var(--accent);opacity:1}
[data-tpl="dino"] .programa time{font-family:var(--f-head);font-weight:400;letter-spacing:.04em;color:var(--accent-2)}
[data-tpl="dino"] .programa span::before{background:var(--accent);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;width:11px;height:13px}
[data-tpl="dino"] .nombre-lugar{font-family:var(--f-head);font-weight:400;font-size:1.7rem;color:var(--accent)}
[data-tpl="dino"] .btn{font-family:var(--f-head);text-transform:none;letter-spacing:.04em;font-size:1.2rem;font-weight:400;border-radius:16px;box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 50%,#000);padding:.75rem 1.6rem}
[data-tpl="dino"] .btn:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 50%,#000)}
[data-tpl="dino"] .btn.ghost{background:transparent;color:var(--ink);border:3px solid var(--accent);box-shadow:none}
[data-tpl="dino"] form,[data-tpl="dino"] .gracias{background:var(--card);border:3px solid var(--accent);border-radius:26px;box-shadow:6px 7px 0 var(--accent-2)}
[data-tpl="dino"] input[type=text],[data-tpl="dino"] textarea{border:2px solid var(--accent);border-radius:14px}
[data-tpl="dino"] label{font-weight:700;opacity:1;color:var(--accent)}
[data-tpl="dino"] .galeria img{border:4px solid var(--accent);border-radius:46% 54% 52% 48%/54% 50% 50% 46%;aspect-ratio:1;box-shadow:4px 5px 0 var(--accent-2)}
[data-tpl="dino"] .galeria img:nth-child(3n+1){border-radius:56% 44% 48% 52%/46% 56% 44% 54%;aspect-ratio:1}
[data-tpl="dino"] .cierre .nombre-cierre,[data-tpl="dino"] .gracias .script{font-family:var(--f-head);color:var(--accent)}
[data-tpl="dino"] .sep{width:min(180px,56%)}
[data-tpl="dino"] #sobre{background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--c3) 45%,transparent),#0000 60%),linear-gradient(180deg,var(--soft),var(--bg))}
[data-tpl="dino"] .sobre-wrap h1{font-family:var(--f-head);color:var(--accent);font-size:2.3rem;text-shadow:2px 3px 0 var(--accent-2);margin-bottom:1rem}
[data-tpl="dino"] .sobre-wrap .para{font-family:var(--f-head);opacity:1;color:var(--ink);letter-spacing:.14em}
[data-tpl="dino"] #abrir{font-family:var(--f-head);text-transform:none;font-weight:400;font-size:1.25rem;letter-spacing:.04em;border-radius:16px;box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 50%,#000)}
.dino-vol{fill:color-mix(in srgb,var(--ink) 58%,var(--soft))}
.dino-dk{fill:color-mix(in srgb,var(--c1) 78%,#000)}
.dino-sway{animation:dino-sway 4.6s ease-in-out infinite alternate}
.dino-tail{animation:dino-tail 1.5s ease-in-out infinite alternate}
.dino-head{animation:dino-head 3.2s ease-in-out infinite alternate}
.dino-breathe{animation:dino-br 2.6s ease-in-out infinite}
.dino-wave{animation:dino-wave 1.3s ease-in-out infinite alternate}
.dino-blink{animation:dino-blink 4.2s infinite}
.dino-spin{animation:gira 24s linear infinite}
.dino-tw{animation:dino-tw 2.6s ease-in-out infinite}
.dino-lava{animation:dino-lava 1.8s ease-in-out infinite alternate}
.dino-smoke{animation:dino-smoke 6.5s ease-out infinite;transform-origin:316px 96px}
.dino-ember{animation:dino-ember 2.6s ease-out infinite}
.dino-fly{animation:dino-fly 15s linear infinite}
.dino-bob{animation:dino-bob 1.6s ease-in-out infinite alternate}
.dino-flap{animation:dino-flap .55s ease-in-out infinite alternate}
.dino-egg{animation:dino-egg 3.2s ease-in-out infinite}
.dino-egg2{animation-delay:-1.1s}.dino-egg3{animation-duration:2.2s}
@keyframes dino-sway{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
@keyframes dino-tail{from{transform:rotate(-9deg)}to{transform:rotate(11deg)}}
@keyframes dino-head{from{transform:rotate(-2.5deg) translateY(0)}to{transform:rotate(3deg) translateY(-3px)}}
@keyframes dino-br{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,1.035)}}
@keyframes dino-wave{from{transform:rotate(-20deg)}to{transform:rotate(26deg)}}
@keyframes dino-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes dino-tw{0%,100%{opacity:.2;transform:scale(.5)}50%{opacity:1;transform:scale(1.2)}}
@keyframes dino-lava{from{opacity:.75}to{opacity:1}}
@keyframes dino-smoke{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(26px,-70px) scale(2.2)}}
@keyframes dino-ember{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(14px,-46px)}}
@keyframes dino-fly{from{transform:translateX(-70px)}to{transform:translateX(480px)}}
@keyframes dino-bob{from{transform:translateY(-8px) rotate(-4deg)}to{transform:translateY(8px) rotate(4deg)}}
@keyframes dino-flap{from{transform:scaleY(1)}to{transform:scaleY(-.6)}}
@keyframes dino-egg{0%,55%,100%{transform:rotate(0)}62%{transform:rotate(-7deg)}70%{transform:rotate(6deg)}78%{transform:rotate(-4deg)}86%{transform:rotate(0)}}
@keyframes dino-pisa{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-4px)}}
@keyframes dino-wob{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.05)}}
/* sobre: huevo de dino */
.sobre-dino{width:200px;height:230px;margin:0 auto}
.sobre-dino svg{width:100%;height:100%;overflow:visible}
.dino-eggw{transform-origin:100px 220px;animation:dino-eggi 2.8s ease-in-out infinite}
.sobre-dino .dino-crk{animation:dino-crk 1.4s ease-in-out infinite alternate}
.dino-peek{transform:translateY(110px);transition:transform .5s .12s cubic-bezier(.3,1.6,.5,1)}
.dino-cap{transition:transform .65s cubic-bezier(.4,0,.6,1),opacity .6s .15s}
.dino-conf{opacity:0;transition:transform .7s cubic-bezier(.2,.8,.3,1),opacity .7s}
.sobre-dino.open .dino-eggw{animation:none}
.sobre-dino.open .dino-cap{transform:translate(40px,-120px) rotate(40deg);opacity:0}
.sobre-dino.open .dino-peek{transform:translateY(-30px)}
.sobre-dino.open .dino-conf{opacity:1;transform:translate(var(--x),var(--y))}
@keyframes dino-eggi{0%,40%,100%{transform:rotate(0)}48%{transform:rotate(-9deg)}56%{transform:rotate(8deg)}64%{transform:rotate(-6deg)}72%{transform:rotate(4deg)}80%{transform:rotate(0)}}
@keyframes dino-crk{from{opacity:.35}to{opacity:.85}}
@media (prefers-reduced-motion:reduce){[data-tpl="dino"] .nombre,[data-tpl="dino"] .edad-num,.dino-eggw,.sobre-dino .dino-crk{animation:none!important}}

/* ================= REINO MÁGICO ================= */
[data-fx="unicornio"] #fx{background:radial-gradient(circle at 15% 12%,color-mix(in srgb,var(--c1) 26%,transparent),#0000 38%),radial-gradient(circle at 88% 30%,color-mix(in srgb,var(--c2) 24%,transparent),#0000 36%),radial-gradient(circle at 20% 80%,color-mix(in srgb,var(--c4) 22%,transparent),#0000 34%),linear-gradient(180deg,var(--soft) 0,var(--bg) 330px),var(--bg)}
[data-tpl="unicornio"] .nombre{font-family:var(--f-head);font-weight:800;font-size:min(var(--name-size),13.8vw);line-height:1.04;margin:.7rem 0 .3rem;padding:0 .2rem .12em;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent)) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 var(--bg)) drop-shadow(0 4px 6px color-mix(in srgb,var(--accent) 30%,transparent));animation:uni-shim 5s linear infinite}
[data-tpl="unicornio"] .eyebrow{font-family:var(--f-script);text-transform:none;letter-spacing:.02em;font-size:1.25rem;color:var(--accent-2);opacity:1}
[data-tpl="unicornio"] .titulo{font-family:var(--f-script);font-size:1.6rem;color:var(--accent);margin-top:.5rem;line-height:1.3}
[data-tpl="unicornio"] .edad-num{min-width:104px;height:104px;border-radius:50%;background:conic-gradient(from 0deg,var(--c1),var(--c3),var(--c4),var(--c2),var(--c1));color:#2d1650;font-family:var(--f-head);font-weight:800;font-size:4.2rem;box-shadow:0 0 0 6px var(--bg),0 0 0 9px var(--accent-2),0 8px 24px color-mix(in srgb,var(--accent) 35%,transparent);transform:none;animation:uni-bob 3.4s ease-in-out infinite}
[data-tpl="unicornio"] .edad-lbl{font-family:var(--f-script);text-transform:none;letter-spacing:.04em;font-size:1.25rem;color:var(--accent);opacity:1;margin-top:1rem}
[data-tpl="unicornio"] .f-unicornio{--ar:1;border-radius:50%;width:min(72%,280px)}
[data-tpl="unicornio"] .f-unicornio::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:conic-gradient(var(--c1),var(--c3),var(--c4),var(--c2),var(--c1));animation:gira 8s linear infinite;z-index:-1;filter:drop-shadow(0 8px 14px color-mix(in srgb,var(--accent) 30%,transparent))}
[data-tpl="unicornio"] .f-unicornio img{border-radius:50%;border:6px solid var(--bg)}
[data-tpl="unicornio"] .fecha .dia{width:104px;height:104px;border-radius:0;clip-path:polygon(50% 0,61% 33%,96% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,4% 35%,39% 33%);background:linear-gradient(135deg,var(--c1),var(--c3));color:#2d1650;font-family:var(--f-head);font-weight:800;font-size:2.7rem;box-shadow:none;padding-top:.5rem;animation:uni-bob 3.2s ease-in-out infinite}
[data-tpl="unicornio"] .fecha .d-dow,[data-tpl="unicornio"] .fecha .d-mes,[data-tpl="unicornio"] .fecha .d-anio{font-family:var(--f-script);text-transform:none;letter-spacing:.04em;color:var(--accent);font-size:1.25rem}
[data-tpl="unicornio"] .cuenta div{border-radius:20px;border:3px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--c1),var(--c2),var(--c4)) border-box}
[data-tpl="unicornio"] .cuenta b{font-family:var(--f-head);font-weight:800;color:var(--accent)}
[data-tpl="unicornio"] .mensaje{font-style:normal;font-weight:600;font-size:1.15rem}
[data-tpl="unicornio"] h2.sec{font-family:var(--f-script);color:var(--accent);font-size:2.2rem;line-height:1.3}
[data-tpl="unicornio"] h2.sec::after{content:"✦";color:var(--c3);font-size:.7em;margin-left:.3em;display:inline-block;animation:uni-tw 2.4s ease-in-out infinite;text-shadow:0 0 6px var(--accent-2)}
[data-tpl="unicornio"] .programa::before{width:4px;border-radius:4px;background:linear-gradient(var(--c1),var(--c2),var(--c3),var(--c4));opacity:1}
[data-tpl="unicornio"] .programa time{font-family:var(--f-head);font-weight:800;color:var(--accent-2)}
[data-tpl="unicornio"] .programa span::before{width:14px;height:14px;left:-.5rem;top:.5rem;border-radius:0;background:var(--accent);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
[data-tpl="unicornio"] .nombre-lugar{font-family:var(--f-script);font-weight:400;font-size:1.7rem;color:var(--accent)}
[data-tpl="unicornio"] .btn{font-family:var(--f-head);font-weight:800;text-transform:none;letter-spacing:.02em;font-size:1.1rem;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 38%,transparent)}
[data-tpl="unicornio"] .btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent);box-shadow:none}
[data-tpl="unicornio"] form,[data-tpl="unicornio"] .gracias{border:3px solid transparent;border-radius:26px;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--c1),var(--c2),var(--c3),var(--c4)) border-box;box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 18%,transparent)}
[data-tpl="unicornio"] label{color:var(--accent);font-weight:700;opacity:1}
[data-tpl="unicornio"] input[type=text],[data-tpl="unicornio"] textarea{border:2px solid var(--c2);border-radius:14px}
[data-tpl="unicornio"] .galeria img{border-radius:50%;aspect-ratio:1;box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--c1)}
[data-tpl="unicornio"] .galeria img:nth-child(3n+1){border-radius:50%;aspect-ratio:1;box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--c2)}
[data-tpl="unicornio"] .cierre .nombre-cierre,[data-tpl="unicornio"] .gracias .script{font-family:var(--f-script);color:var(--accent)}
[data-tpl="unicornio"] #sobre{background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c3) 40%,transparent),#0000 55%),radial-gradient(circle at 12% 90%,color-mix(in srgb,var(--c1) 30%,transparent),#0000 40%),linear-gradient(180deg,var(--soft),var(--bg))}
[data-tpl="unicornio"] .sobre-wrap h1{font-family:var(--f-head);font-weight:800;color:var(--accent);font-size:2.4rem;margin-bottom:.8rem}
[data-tpl="unicornio"] .sobre-wrap .para{font-family:var(--f-script);text-transform:none;letter-spacing:.02em;font-size:1.3rem;opacity:1;color:var(--accent-2)}
[data-tpl="unicornio"] #abrir{font-family:var(--f-head);font-weight:800;text-transform:none;letter-spacing:.02em;font-size:1.15rem;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.uni-body{fill:color-mix(in srgb,#fff 90%,var(--c1))}
.uni-mz{fill:color-mix(in srgb,#fff 70%,var(--c1))}
.uni-w{fill:color-mix(in srgb,#fff 86%,var(--c2))}
.uni-cl{fill:color-mix(in srgb,var(--card) 100%,#fff 0%);fill-opacity:1}.uni-cl2{fill:color-mix(in srgb,var(--c2) 22%,var(--soft))}
.uni-hov{animation:uni-hov 4s ease-in-out infinite}
.uni-head{animation:uni-head 4.4s ease-in-out infinite alternate}
.uni-mane{animation:uni-mane 3.2s ease-in-out infinite alternate}
.uni-blink{animation:dino-blink 4.6s infinite}
.uni-spark{animation:uni-tw 1.8s ease-in-out infinite}
.uni-tw{animation:uni-tw 2.8s ease-in-out infinite}
.uni-arch{animation:uni-arch 5s ease-in-out infinite;transform-origin:200px 266px}
.uni-dr{animation:uni-dr 11s ease-in-out infinite alternate}
.uni-flag{animation:uni-flag 1.2s ease-in-out infinite alternate;transform-origin:0 -128px}
.uni-win{animation:uni-win 3s ease-in-out infinite}
.uni-fl{animation:uni-fl .5s ease-in-out infinite alternate;transform-origin:0 -72px}
.uni-cake{animation:uni-bob 3.6s ease-in-out infinite}
.uni-shoot{animation:uni-shoot 8s ease-in infinite}
@keyframes uni-shim{to{background-position:200% 0}}
@keyframes uni-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes uni-tw{0%,100%{opacity:.25;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(25deg)}}
@keyframes uni-hov{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes uni-head{from{transform:rotate(-3deg)}to{transform:rotate(3.5deg)}}
@keyframes uni-mane{from{transform:rotate(-5deg) skewX(-3deg)}to{transform:rotate(6deg) skewX(4deg)}}
@keyframes uni-arch{0%,100%{opacity:.78;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
@keyframes uni-dr{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
@keyframes uni-flag{from{transform:skewY(-8deg) scaleX(.9)}to{transform:skewY(8deg) scaleX(1.05)}}
@keyframes uni-win{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes uni-fl{from{transform:scale(.9,1.08) rotate(-4deg)}to{transform:scale(1.1,.92) rotate(4deg)}}
@keyframes uni-shoot{0%,70%{transform:translate(430px,0);opacity:0}72%{opacity:1}92%{transform:translate(90px,120px);opacity:1}100%{transform:translate(70px,134px);opacity:0}}
/* sobre: varita y estrella */
.sobre-uni{width:230px;height:230px;margin:0 auto}
.sobre-uni svg{width:100%;height:100%;overflow:visible}
.uni-orbit{transform-origin:110px 104px;animation:gira 14s linear infinite}
.uni-glow{transform-origin:122px 94px;animation:uni-glow 2.4s ease-in-out infinite;transition:transform .5s,opacity .5s}
.uni-star{animation:uni-star 1.9s ease-in-out infinite;transition:transform .55s cubic-bezier(.5,0,.9,.4),opacity .5s .1s}
.uni-wand{transform-origin:0 0;animation:uni-wand 2.4s ease-in-out infinite;transition:transform .35s}
.uni-ring{opacity:0;transform-origin:122px 94px;transform:scale(.3);transition:transform .8s cubic-bezier(.2,.7,.3,1),opacity .8s}
.sobre-uni.open .uni-star{animation:none;transform:scale(3.4);opacity:0}
.sobre-uni.open .uni-glow{animation:none;transform:scale(2.6);opacity:0}
.sobre-uni.open .uni-wand{animation:none;transform:rotate(28deg)}
.sobre-uni.open .uni-ring{opacity:.9;transform:scale(3);transition-duration:.9s}
@keyframes uni-glow{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.12);opacity:1}}
@keyframes uni-star{0%,100%{transform:scale(1) rotate(-6deg)}50%{transform:scale(1.1) rotate(6deg)}}
@keyframes uni-wand{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(7deg)}}
@media (prefers-reduced-motion:reduce){[data-tpl="unicornio"] .nombre,[data-tpl="unicornio"] .edad-num,[data-tpl="unicornio"] .fecha .dia,[data-tpl="unicornio"] h2.sec::after,[data-tpl="unicornio"] .f-unicornio::before,.uni-orbit,.uni-glow,.uni-star,.uni-wand{animation:none!important}}

/* ================= FIESTA DE SIRENAS ================= */
[data-fx="sirena"] #fx{background:radial-gradient(ellipse at 50% -10%,color-mix(in srgb,#fff 38%,transparent),#0000 60%),repeating-conic-gradient(from -8deg at 50% -8%,color-mix(in srgb,#fff 9%,transparent) 0 5deg,#0000 5deg 13deg),linear-gradient(180deg,var(--soft) 0,var(--bg) 310px),var(--bg)}
[data-tpl="sirena"] .nombre{font-family:var(--f-script);font-size:min(var(--name-size),12.5vw);line-height:1.2;margin:.6rem 0 .2rem;color:var(--accent);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent),0 3px 0 color-mix(in srgb,var(--accent2) 60%,transparent);animation:sr-nom 4.5s ease-in-out infinite}
[data-tpl="sirena"] .eyebrow{font-family:var(--f-head);letter-spacing:.14em;font-size:.88rem;color:var(--accent2);opacity:1;font-weight:400}
[data-tpl="sirena"] .titulo{font-family:var(--f-head);font-weight:400;font-size:1.75rem;color:var(--ink);letter-spacing:.02em}
[data-tpl="sirena"] .edad-num{min-width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,color-mix(in srgb,var(--c4) 55%,#fff) 72%);color:#103a55;font-family:var(--f-head);font-size:4rem;box-shadow:0 0 0 5px var(--accent),0 0 28px color-mix(in srgb,var(--accent) 55%,transparent);transform:none;animation:sr-nom 3.6s ease-in-out infinite}
[data-tpl="sirena"] .edad-lbl{font-family:var(--f-script);text-transform:none;letter-spacing:.02em;font-size:1.2rem;color:var(--accent);opacity:1;margin-top:1.1rem}
[data-tpl="sirena"] .f-sirena{--ar:1;border-radius:50%;width:min(74%,290px);border:7px solid color-mix(in srgb,#fff 75%,var(--c4));box-shadow:0 0 0 4px var(--accent),0 0 44px color-mix(in srgb,var(--accent) 50%,transparent);background:var(--soft);animation:sr-nom 5s ease-in-out infinite}
[data-tpl="sirena"] .f-sirena img{border-radius:50%}
[data-tpl="sirena"] .f-sirena::after{content:"";position:absolute;left:11%;top:9%;width:34%;height:20%;border-radius:50%;background:linear-gradient(#fffa,#fff0);transform:rotate(-32deg);pointer-events:none}
[data-tpl="sirena"] .f-sirena::before{content:"";position:absolute;right:-24px;top:8%;width:26px;height:26px;border-radius:50%;border:2px solid #fffc;background:radial-gradient(circle at 30% 28%,#fff9 0 18%,#0000 22%);box-shadow:-8px 62px 0 -8px #fff8,6px 120px 0 -6px #fff6;animation:sr-nom 3.4s ease-in-out infinite}
[data-tpl="sirena"] .fecha .dia{width:98px;height:98px;background:radial-gradient(circle at 32% 28%,#fff,color-mix(in srgb,var(--c4) 55%,#fff) 72%);color:#103a55;font-family:var(--f-head);font-size:3.2rem;box-shadow:0 0 0 4px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 50%,transparent)}
[data-tpl="sirena"] .fecha .d-dow,[data-tpl="sirena"] .fecha .d-mes,[data-tpl="sirena"] .fecha .d-anio{font-family:var(--f-head);letter-spacing:.14em;color:var(--accent)}
[data-tpl="sirena"] .cuenta div{border-radius:50% 50% 50% 50%/42% 42% 58% 58%;border:2px solid color-mix(in srgb,var(--accent) 70%,transparent);background:var(--card);min-width:70px;padding:.8rem .6rem;box-shadow:inset 0 4px 10px #fff3}
[data-tpl="sirena"] .cuenta b{font-family:var(--f-head);font-weight:400;color:var(--accent)}
[data-tpl="sirena"] .mensaje{font-style:normal;font-weight:600;font-size:1.15rem}
[data-tpl="sirena"] h2.sec{font-family:var(--f-script);font-size:2rem;color:var(--accent);text-shadow:0 0 14px color-mix(in srgb,var(--accent) 40%,transparent)}
[data-tpl="sirena"] .programa::before{background:none;border-left:3px dotted var(--accent);opacity:.9}
[data-tpl="sirena"] .programa time{font-family:var(--f-head);font-weight:400;color:var(--accent2);letter-spacing:.04em}
[data-tpl="sirena"] .programa span::before{width:12px;height:12px;background:radial-gradient(circle at 32% 28%,#fff,var(--accent) 80%);box-shadow:0 0 8px var(--accent)}
[data-tpl="sirena"] .nombre-lugar{font-family:var(--f-script);font-weight:400;font-size:1.6rem;color:var(--accent)}
[data-tpl="sirena"] .btn{font-family:var(--f-head);font-weight:400;text-transform:none;letter-spacing:.04em;font-size:1.15rem;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--c4)));box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 40%,transparent)}
[data-tpl="sirena"] .btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent);box-shadow:none}
[data-tpl="sirena"] form,[data-tpl="sirena"] .gracias{background:var(--card);border:2px solid color-mix(in srgb,var(--accent) 65%,transparent);border-radius:30px 30px 30px 8px;box-shadow:0 0 26px color-mix(in srgb,var(--accent) 22%,transparent)}
[data-tpl="sirena"] label{color:var(--accent);font-weight:700;opacity:1}
[data-tpl="sirena"] input[type=text],[data-tpl="sirena"] textarea{border:2px solid color-mix(in srgb,var(--accent) 65%,#fff);border-radius:16px}
[data-tpl="sirena"] .galeria img{border-radius:50%;aspect-ratio:1;border:4px solid color-mix(in srgb,#fff 75%,var(--c4));box-shadow:0 0 0 3px var(--accent)}
[data-tpl="sirena"] .galeria img:nth-child(3n+1){border-radius:50%;aspect-ratio:1}
[data-tpl="sirena"] .cierre .nombre-cierre,[data-tpl="sirena"] .gracias .script{font-family:var(--f-script);color:var(--accent)}
[data-tpl="sirena"] #sobre{background:radial-gradient(ellipse at 50% -10%,color-mix(in srgb,#fff 34%,transparent),#0000 60%),repeating-conic-gradient(from -8deg at 50% -8%,color-mix(in srgb,#fff 9%,transparent) 0 5deg,#0000 5deg 13deg),linear-gradient(180deg,var(--soft),var(--bg))}
[data-tpl="sirena"] .sobre-wrap h1{font-family:var(--f-script);color:var(--accent);font-size:2.4rem;margin-bottom:.6rem;text-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}
[data-tpl="sirena"] .sobre-wrap .para{font-family:var(--f-head);opacity:1;color:var(--accent2);letter-spacing:.16em}
[data-tpl="sirena"] #abrir{font-family:var(--f-head);font-weight:400;text-transform:none;letter-spacing:.04em;font-size:1.2rem}
.sr-skin{fill:#f3c29b}
.sr-st{stop-color:color-mix(in srgb,var(--c3) 38%,var(--soft))}
.sr-ray{animation:sr-ray 7s ease-in-out infinite alternate;transform-origin:200px -20px}
.sr-float{animation:sr-float 4.6s ease-in-out infinite}
.sr-hair{animation:sr-hair 3.4s ease-in-out infinite alternate}
.sr-fluke{animation:sr-fluke 1.8s ease-in-out infinite alternate}
.sr-wave{animation:dino-wave 1.4s ease-in-out infinite alternate}
.sr-blink{animation:dino-blink 4.4s infinite}
.sr-shine{animation:sr-shine 4s ease-in-out infinite}
.sr-sw{animation:sr-sw 17s linear infinite}.sr-swr{animation:sr-swr 20s linear infinite}
.sr-wag{animation:sr-wag .5s ease-in-out infinite alternate}
.sr-sway{animation:dino-sway 3.6s ease-in-out infinite alternate}
.sr-jel{animation:sr-jel 2.4s ease-in-out infinite}
.sr-bub{animation:sr-bub 7s linear infinite}
.sr-star{animation:gira 18s linear infinite}
@keyframes sr-ray{from{transform:rotate(-4deg);opacity:.7}to{transform:rotate(5deg);opacity:1}}
@keyframes sr-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}
@keyframes sr-hair{from{transform:rotate(-4deg) skewX(-3deg)}to{transform:rotate(4deg) skewX(3deg)}}
@keyframes sr-fluke{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
@keyframes sr-shine{0%,25%{transform:translateX(0) skewX(-20deg)}70%,100%{transform:translateX(110px) skewX(-20deg)}}
@keyframes sr-sw{from{transform:translateX(-60px)}to{transform:translateX(470px)}}
@keyframes sr-swr{from{transform:translateX(470px)}to{transform:translateX(-60px)}}
@keyframes sr-wag{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes sr-jel{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-10px) scale(1.08,.9)}}
@keyframes sr-bub{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-230px) scale(1.2);opacity:0}}
@keyframes sr-nom{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* sobre: concha con perla */
.sobre-sirena{width:240px;height:218px;margin:0 auto}
.sobre-sirena svg{width:100%;height:100%;overflow:visible}
.sr-shell{animation:sr-nom 3s ease-in-out infinite}
.sr-lid{animation:sr-lid 2.6s ease-in-out infinite;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.sr-glow{opacity:.35;transform-origin:110px 100px;animation:uni-glow 2.2s ease-in-out infinite}
.sr-pearl{transition:transform .7s .1s cubic-bezier(.3,1.5,.5,1)}
.sr-sb{animation:sr-sbub 3.6s linear infinite}
.sobre-sirena.open .sr-lid{animation:none;transform:rotate(-50deg)}
.sobre-sirena.open .sr-pearl{transform:translateY(-34px) scale(1.18)}
.sobre-sirena.open .sr-glow{animation:none;opacity:1;transform:scale(1.7);transition:transform .8s,opacity .6s}
.sobre-sirena.open .sr-shell{animation:none}
@keyframes sr-lid{0%,100%{transform:rotate(0)}30%,50%{transform:rotate(-9deg)}}
@keyframes sr-sbub{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-90px);opacity:0}}
@media (prefers-reduced-motion:reduce){[data-tpl="sirena"] .nombre,[data-tpl="sirena"] .edad-num,[data-tpl="sirena"] .f-sirena,[data-tpl="sirena"] .f-sirena::before,.sr-shell,.sr-lid,.sr-glow,.sr-sb{animation:none!important}}

/* ================= SUPERHÉROES CÓMIC ================= */
[data-fx="heroe"] #fx{background:radial-gradient(circle,color-mix(in srgb,var(--c1) 30%,transparent) 2.4px,#0000 3px) 0 0/13px 13px,var(--bg);-webkit-mask:linear-gradient(#000 0,#000 18%,#0000 62%);mask:linear-gradient(#000 0,#000 18%,#0000 62%)}
[data-tpl="heroe"] .nombre{font-family:var(--f-head);font-size:min(var(--name-size),14vw);line-height:1;letter-spacing:.04em;margin:.8rem 0 .5rem;color:var(--c3);-webkit-text-stroke:5px #150f2e;paint-order:stroke fill;text-shadow:3px 4px 0 #150f2e,6px 8px 0 var(--accent-2);transform:rotate(-3deg) skewX(-4deg);animation:hr-nom 2.4s ease-in-out infinite}
[data-tpl="heroe"] .eyebrow{display:inline-block;font-family:var(--f-head);font-size:1.15rem;letter-spacing:.12em;font-weight:400;background:var(--c3);color:#150f2e;border:3px solid #150f2e;padding:.1rem .8rem;opacity:1;transform:rotate(-2deg);box-shadow:3px 3px 0 #150f2e}
[data-tpl="heroe"] .titulo{font-family:var(--f-head);font-size:1.9rem;letter-spacing:.05em;color:var(--accent);line-height:1.1;margin-top:.8rem}
[data-tpl="heroe"] .edad{margin:.8rem 0 .2rem}
[data-tpl="heroe"] .edad-num{position:relative;min-width:128px;height:128px;border-radius:0;padding:0;clip-path:polygon(50% 0,60% 18%,80% 8%,80% 30%,100% 36%,86% 52%,100% 68%,80% 72%,82% 94%,60% 84%,50% 100%,40% 84%,18% 94%,20% 72%,0 68%,14% 52%,0 36%,20% 30%,20% 8%,40% 18%);background:#150f2e;color:#150f2e;font-family:var(--f-head);font-size:4.6rem;box-shadow:none;transform:none;animation:hr-nom 1.6s ease-in-out infinite;padding-top:.2rem}
[data-tpl="heroe"] .edad-num::before{content:"";position:absolute;inset:6px;clip-path:inherit;background:var(--c3);z-index:-1}
[data-tpl="heroe"] .edad-lbl{font-family:var(--f-head);font-size:1.5rem;letter-spacing:.2em;color:var(--accent-2);font-weight:400;opacity:1;margin-top:.5rem}
[data-tpl="heroe"] .f-heroe{--ar:4/5;width:min(74%,280px);border:5px solid var(--ink);transform:rotate(-2deg);box-shadow:9px 9px 0 var(--accent-2);background:var(--soft);margin-top:2.2rem}
[data-tpl="heroe"] .f-heroe::before{content:"";position:absolute;right:0;bottom:0;width:48%;height:40%;background:radial-gradient(circle,var(--c1) 2px,#0000 2.6px) 0 0/9px 9px;opacity:.55;z-index:1;pointer-events:none}
[data-tpl="heroe"] .f-heroe::after{content:"¡EL HÉROE DEL DÍA!";position:absolute;left:-10px;top:-20px;z-index:2;background:var(--c3);color:#150f2e;font-family:var(--f-head);font-size:1.15rem;letter-spacing:.06em;padding:.05rem .6rem;border:3px solid var(--ink);transform:rotate(-3deg);white-space:nowrap}
[data-tpl="heroe"] .fecha .dia{border-radius:6px;width:92px;height:92px;background:var(--c3);color:#150f2e;border:4px solid var(--ink);font-family:var(--f-head);font-size:3.4rem;box-shadow:6px 6px 0 var(--accent-2);transform:rotate(-4deg)}
[data-tpl="heroe"] .fecha .d-dow,[data-tpl="heroe"] .fecha .d-mes,[data-tpl="heroe"] .fecha .d-anio{font-family:var(--f-head);letter-spacing:.14em;color:var(--accent);font-size:1.3rem}
[data-tpl="heroe"] .cuenta div{border:3px solid var(--ink);border-radius:4px;background:var(--card);box-shadow:4px 4px 0 var(--accent-2)}
[data-tpl="heroe"] .cuenta b{font-family:var(--f-head);font-weight:400;color:var(--accent);font-size:2rem}
[data-tpl="heroe"] .mensaje{font-style:normal;font-weight:700;font-size:1.15rem}
[data-tpl="heroe"] h2.sec{font-family:var(--f-head);font-weight:400;font-size:2.4rem;letter-spacing:.05em;color:var(--accent);transform:skewX(-6deg);text-shadow:3px 3px 0 color-mix(in srgb,var(--accent-2) 55%,transparent)}
[data-tpl="heroe"] .programa::before{display:none}
[data-tpl="heroe"] .programa li{border-bottom:2px dashed color-mix(in srgb,var(--ink) 35%,transparent);align-items:center}
[data-tpl="heroe"] .programa time{flex:0 0 5.6rem;text-align:center;font-family:var(--f-head);font-weight:400;font-size:1.1rem;letter-spacing:.05em;background:var(--c3);color:#150f2e;border:2px solid var(--ink);transform:skewX(-8deg);padding:.05rem .2rem}
[data-tpl="heroe"] .programa span{padding-left:0}[data-tpl="heroe"] .programa span::before{display:none}
[data-tpl="heroe"] .nombre-lugar{font-family:var(--f-head);font-weight:400;font-size:1.9rem;letter-spacing:.05em;color:var(--accent)}
[data-tpl="heroe"] .btn{font-family:var(--f-head);font-weight:400;font-size:1.25rem;letter-spacing:.08em;border-radius:6px;border:3px solid #150f2e;box-shadow:4px 4px 0 #150f2e;transform:skewX(-6deg);padding:.6rem 1.5rem}
[data-tpl="heroe"] .btn:active{transform:skewX(-6deg) translate(3px,3px);box-shadow:1px 1px 0 #150f2e}
[data-tpl="heroe"] .btn.ghost{background:var(--card);color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
[data-tpl="heroe"] form,[data-tpl="heroe"] .gracias{background:var(--card);border:3px solid var(--ink);border-radius:6px;box-shadow:7px 7px 0 var(--accent-2)}
[data-tpl="heroe"] label{font-family:var(--f-head);font-size:1.05rem;letter-spacing:.1em;font-weight:400;opacity:1;color:var(--accent)}
[data-tpl="heroe"] input[type=text],[data-tpl="heroe"] textarea{border:3px solid #150f2e;border-radius:4px}
[data-tpl="heroe"] .galeria img{border:3px solid var(--ink);border-radius:4px;aspect-ratio:1;box-shadow:5px 5px 0 var(--accent-2);transform:rotate(-1.5deg)}
[data-tpl="heroe"] .galeria img:nth-child(even){transform:rotate(1.5deg)}[data-tpl="heroe"] .galeria img:nth-child(3n+1){border-radius:4px;aspect-ratio:1}
[data-tpl="heroe"] .cierre .nombre-cierre,[data-tpl="heroe"] .gracias .script{font-family:var(--f-head);font-size:2.6rem;letter-spacing:.06em;color:var(--c3);-webkit-text-stroke:3px #150f2e;paint-order:stroke fill;text-shadow:3px 3px 0 var(--accent-2)}
[data-tpl="heroe"] #sobre{background:radial-gradient(circle,color-mix(in srgb,var(--c1) 30%,transparent) 2.4px,#0000 3px) 0 0/13px 13px,repeating-conic-gradient(from 0deg at 50% 42%,color-mix(in srgb,var(--c3) 22%,transparent) 0 6deg,#0000 6deg 15deg),var(--bg)}
[data-tpl="heroe"] .sobre-wrap h1{font-family:var(--f-head);font-size:2.9rem;letter-spacing:.05em;color:var(--c3);-webkit-text-stroke:4px #150f2e;paint-order:stroke fill;text-shadow:3px 3px 0 #150f2e,5px 6px 0 var(--accent-2);margin-bottom:1.2rem;transform:rotate(-2deg)}
[data-tpl="heroe"] .sobre-wrap .para{font-family:var(--f-head);opacity:1;font-size:1.2rem;letter-spacing:.2em;color:var(--ink)}
[data-tpl="heroe"] #abrir{font-family:var(--f-head);font-weight:400;font-size:1.35rem;letter-spacing:.08em;border-radius:6px;border:3px solid #150f2e;box-shadow:4px 4px 0 #150f2e}
.hr-burst{animation:gira 50s linear infinite}
.hr-far{fill:color-mix(in srgb,var(--c1) 40%,var(--soft))}.hr-near{fill:color-mix(in srgb,#150f2e 84%,var(--c1))}
.hr-w{fill:var(--c3);animation:hr-win 3.4s steps(1) infinite}.hr-w1{animation-delay:-1.1s}.hr-w2{animation-delay:-2.2s}
.hr-fly{animation:hr-fly 2.6s ease-in-out infinite}
.hr-cape{animation:hr-cape .9s ease-in-out infinite alternate}.hr-cape2{animation-delay:-.45s;animation-name:hr-cape2}
.hr-arm{animation:hr-arm 1.6s ease-in-out infinite alternate}
.hr-head{animation:hr-head 3s ease-in-out infinite alternate}
.hr-eye{animation:dino-blink 4s infinite;transform-box:fill-box;transform-origin:center}
.hr-puff{animation:hr-puff .35s ease-in-out infinite alternate;transform-origin:0 62px}
.hr-pop{animation:hr-pop 7.6s ease-out infinite}
@keyframes hr-nom{0%,100%{transform:rotate(-3deg) skewX(-4deg) scale(1)}50%{transform:rotate(-3deg) skewX(-4deg) scale(1.04)}}
@keyframes hr-win{0%{opacity:1}50%{opacity:.15}}
@keyframes hr-fly{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes hr-cape{from{transform:rotate(-7deg) skewY(-3deg)}to{transform:rotate(8deg) skewY(4deg)}}
@keyframes hr-cape2{from{transform:rotate(8deg) skewY(3deg)}to{transform:rotate(-7deg) skewY(-4deg)}}
@keyframes hr-arm{from{transform:rotate(-6deg)}to{transform:rotate(9deg)}}
@keyframes hr-head{from{transform:rotate(-2deg)}to{transform:rotate(2.5deg)}}
@keyframes hr-puff{from{transform:scaleY(.8)}to{transform:scaleY(1.25)}}
@keyframes hr-pop{0%{transform:scale(0)}5%{transform:scale(1.25)}9%,38%{transform:scale(1)}42%,48%{transform:scale(1.08)}52%,100%{transform:scale(0)}}
/* sobre: carta secreta */
.sobre-heroe{width:280px;height:230px;margin:0 auto}
.hr-env{position:relative;width:270px;height:176px;margin:44px auto 0;animation:hr-shake 3s ease-in-out infinite}
.hr-back,.hr-front{position:absolute;inset:0;border:4px solid #150f2e;border-radius:8px;background:radial-gradient(circle,#0003 1.6px,#0000 2.2px) 0 0/8px 8px,var(--c1)}
.hr-front{background:linear-gradient(150deg,#0000 49.5%,#150f2e 50%,#150f2e 52%,#0000 52.5%) left/50% 100% no-repeat,linear-gradient(210deg,#0000 49.5%,#150f2e 50%,#150f2e 52%,#0000 52.5%) right/50% 100% no-repeat,radial-gradient(circle,#0003 1.6px,#0000 2.2px) 0 0/8px 8px,var(--c1)}
.hr-flap{position:absolute;left:0;right:0;top:0;height:62%;background:#150f2e;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;filter:drop-shadow(0 0 0 #150f2e);transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .3s .5s;animation:hr-flap 3s ease-in-out infinite}
.hr-flap::after{content:"";position:absolute;inset:0;background:var(--c2);clip-path:polygon(4% 0,96% 0,50% 88%)}
.hr-card{position:absolute;left:35px;right:35px;top:8px;height:130px;transition:transform .7s .25s cubic-bezier(.3,1.5,.5,1);z-index:0}
.hr-card svg{width:100%;height:100%;overflow:visible}
.hr-stamp{position:absolute;left:14px;bottom:12px;z-index:3;font-family:var(--f-head);font-size:1.1rem;letter-spacing:.1em;color:var(--accent-2);background:#fff;border:3px solid var(--accent-2);padding:0 .45rem;transform:rotate(-8deg);opacity:.95}
.hr-seal{position:absolute;left:50%;top:44%;width:62px;height:62px;margin:-6px 0 0 -31px;border-radius:50%;background:var(--c3);border:4px solid #150f2e;z-index:4;display:grid;place-items:center;animation:hr-seal 1.2s ease-in-out infinite;transition:transform .35s,opacity .3s}
.hr-seal svg{width:70%;height:70%}
.hr-zap{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:hr-zap 1.1s steps(1) infinite;pointer-events:none;z-index:5}
.hr-front{z-index:2}.hr-flap{z-index:3}.hr-stamp{z-index:4}
.sobre-heroe.open .hr-env{animation:none}
.sobre-heroe.open .hr-flap{animation:none;transform:rotateX(180deg);opacity:0}
.sobre-heroe.open .hr-card{transform:translateY(-56px) scale(1.25) rotate(-4deg);z-index:6}
.sobre-heroe.open .hr-seal{animation:none;transform:scale(2.4);opacity:0}
@keyframes hr-shake{0%,70%,100%{transform:rotate(0)}74%{transform:rotate(-3deg)}78%{transform:rotate(3deg)}82%{transform:rotate(-2deg)}86%{transform:rotate(1.5deg)}}
@keyframes hr-flap{0%,60%,100%{transform:rotateX(0)}70%{transform:rotateX(28deg)}80%{transform:rotateX(0)}}
@keyframes hr-seal{0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--c3) 70%,transparent)}50%{transform:scale(1.1);box-shadow:0 0 0 14px #0000}}
@keyframes hr-zap{0%{opacity:1}30%{opacity:0}60%{opacity:1}80%{opacity:0}}
@media (prefers-reduced-motion:reduce){[data-tpl="heroe"] .nombre,[data-tpl="heroe"] .edad-num,.hr-env,.hr-flap,.hr-seal,.hr-zap,.hr-w{animation:none!important}}
@media (min-width:561px){:is([data-tpl="dino"],[data-tpl="unicornio"],[data-tpl="sirena"],[data-tpl="heroe"]) .escena{-webkit-mask:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000);mask:linear-gradient(90deg,#0000,#000 12%,#000 88%,#0000)}}