/* La magia del portal (la genera pasar-a-la-web.js desde SERVIDOR/docs/animaciones). */
.magia-capa{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;view-transition-name:magia}
.magia-lienzo{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;view-transition-name:magia-fondo}
::view-transition-old(magia),::view-transition-old(magia-fondo){display:none}
::view-transition-new(magia),::view-transition-new(magia-fondo){animation:none}
.magia-actor{position:absolute;left:0;top:0;will-change:transform;opacity:0;transition:opacity 1.2s ease}
.magia-actor.visible{opacity:1}
.magia-actor.visible.tras{opacity:.18;transition:opacity .6s ease}
.magia-actor.saliendo{opacity:0;transition:opacity 1.3s ease}
.m-cara{width:100%;height:100%}
.m-arte{width:100%;height:100%;overflow:visible;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(240,183,84,.5));transition:filter .4s}
.m-arte g{transform-box:view-box}
.encima .m-arte{filter:drop-shadow(0 0 6px rgba(255,220,150,.95)) drop-shadow(0 0 16px rgba(240,183,84,.55))}
.m-trazo{stroke:var(--tono,#f0b754);stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 2s ease}
.m-solido{fill:#1e1915}
.visible .m-trazo{stroke-dashoffset:0}
.saliendo .m-trazo{stroke-dashoffset:-1;transition:stroke-dashoffset 1.3s ease-in}
.m-punto,.m-pupila{fill:var(--tono,#f0b754);stroke:none}
.m-lejos{opacity:.55}
.m-toque{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}
.m-ojos{transition:transform .08s}
.parpadea .m-ojos{transform:scaleY(.12)}
.vuela .m-giro-a{animation:magia-ala-a var(--aleteo) ease-in-out infinite}
.vuela .m-giro-b{animation:magia-ala-b var(--aleteo) ease-in-out infinite}
.buho .m-giro-a,.buho .m-giro-b{transition:transform .5s ease}
.buho.posa .m-giro-a{transform:rotate(-72deg) scale(.5)}
.buho.posa .m-giro-b{transform:rotate(72deg) scale(.5)}
.vuela .m-pliegue{animation:magia-pliegue var(--aleteo) ease-in-out infinite}
.vuela .m-lejos.m-pliegue{animation-delay:calc(var(--aleteo) / -2)}
.vuela .m-mariposa{animation:magia-mariposa var(--aleteo) ease-in-out infinite}
.m-cola{animation:magia-cola 2.6s ease-in-out infinite}
.m-tentaculo{animation:magia-tentaculo 3s ease-in-out infinite}
.m-oreja{animation:magia-oreja 4s ease-in-out infinite}
.m-llama{animation:magia-llama .9s ease-in-out infinite alternate}
.m-orbe{animation:magia-orbe 2.4s ease-in-out infinite}
.encima .m-cola{animation-duration:.7s}
.eriza .m-cara{animation:magia-eriza .6s ease}
@keyframes magia-ala-a{0%,100%{transform:rotate(28deg)}50%{transform:rotate(-24deg)}}
@keyframes magia-ala-b{0%,100%{transform:rotate(-28deg)}50%{transform:rotate(24deg)}}
@keyframes magia-pliegue{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.45)}}
@keyframes magia-mariposa{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.18)}}
@keyframes magia-cola{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes magia-tentaculo{0%,100%{transform:skewX(-6deg)}50%{transform:skewX(6deg)}}
@keyframes magia-oreja{0%,80%,100%{transform:rotate(0)}88%{transform:rotate(-12deg)}}
@keyframes magia-llama{from{transform:scale(1,1)}to{transform:scale(.88,1.12) skewX(3deg)}}
@keyframes magia-orbe{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes magia-eriza{0%{transform:scale(1)}35%{transform:scale(1.2,1.12)}70%{transform:scale(.95)}100%{transform:scale(1)}}
.magia-globo{position:absolute;left:0;top:0;font:italic 600 .95rem/1 var(--serif);color:#f3d9a4;white-space:nowrap;text-shadow:0 0 8px rgba(240,183,84,.8);animation:magia-globo 2.2s ease-out forwards}
@keyframes magia-globo{0%{opacity:0;transform:translate(var(--x),var(--y))}12%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) - 30px))}}
.magia-nota{position:absolute;left:0;top:0;font:400 1.15rem/1 var(--serif);color:#f3d9a4;text-shadow:0 0 8px rgba(240,183,84,.85);animation:magia-nota 3.5s ease-out forwards}
.magia-nota.grande{font-size:1.5rem}
@keyframes magia-nota{0%{opacity:0;transform:translate(var(--x),var(--y)) rotate(-10deg)}15%{opacity:.95}100%{opacity:0;transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) - 110px)) rotate(12deg)}}
.magia-libro-brilla{box-shadow:0 0 0 1px rgba(240,183,84,.45),0 0 36px rgba(240,183,84,.5)!important;transition:box-shadow .8s}
.magia-conste{position:absolute;left:0;top:0;opacity:0;transition:opacity 1.5s;pointer-events:none;will-change:transform}
.magia-conste.visible{opacity:1}
.magia-conste.saliendo{opacity:0;transition:opacity 2s}
.magia-conste svg{display:block;width:100%;height:auto;overflow:visible}
.m-estrella{fill:#fff3d6;filter:drop-shadow(0 0 3px rgba(255,230,170,.9));opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:all;cursor:pointer;animation:magia-aparece .6s ease forwards,magia-titila 3s ease-in-out infinite}
@keyframes magia-aparece{to{opacity:1}}
@keyframes magia-titila{50%{transform:scale(.55)}}
.m-linea{stroke:rgba(240,200,130,.5);stroke-width:.7;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s ease,stroke .4s,stroke-width .4s}
.visible .m-linea{stroke-dashoffset:0}
.m-linea-toque{stroke:transparent;stroke-width:9;pointer-events:stroke;cursor:pointer}
.brilla .m-linea{stroke:rgba(255,222,155,.95);stroke-width:1.1}
.m-nombre{display:block;margin-top:-4px;text-align:center;font:italic 600 1rem/1.3 var(--serif);color:#f3dcae;opacity:0;transition:opacity 1.5s 2.4s;text-shadow:0 0 10px rgba(240,183,84,.6)}
.visible .m-nombre{opacity:.9}
.m-nombre small{display:block;font:400 .8rem/1.4 var(--sans);color:var(--papel-tenue);opacity:0;transition:opacity .4s}
.brilla .m-nombre small{opacity:1}
.magia-palabra{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;white-space:nowrap;text-align:center;color:#f3d9a4;font-family:var(--serif);font-style:italic;line-height:1.1;text-shadow:0 0 12px rgba(240,183,84,.7);opacity:0;transition:opacity 2s;will-change:transform}
.magia-palabra.visible{opacity:.75}
.magia-palabra.visible:hover{opacity:1}
.magia-palabra.apaga{opacity:0;transition:opacity 3s}
.magia-palabra b{display:inline-block;font-weight:500;transition:transform .6s ease-out,filter .6s,letter-spacing .6s}
.magia-palabra small{display:block;font:400 max(.72rem,.5em)/1.4 var(--sans);color:var(--papel);opacity:0;transform:translateY(-4px);transition:.35s}
.magia-palabra:hover small{opacity:.9;transform:none}
.magia-palabra.estalla{opacity:0!important;transition:opacity .7s;pointer-events:none}
.estalla b{transform:scale(1.7);filter:blur(5px);letter-spacing:.4em}
.magia-piano{position:absolute;left:0;top:0;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.magia-piano.visible{opacity:1}
.magia-piano .m-arte{filter:drop-shadow(0 0 3px rgba(240,183,84,.35))}
.magia-piano .m-trazo{stroke-width:1.5}
.m-tecla{fill:#1e1915;stroke:#f0b754;stroke-width:.7;pointer-events:all;cursor:pointer;transition:fill .12s}
.m-tecla.negra{fill:#4a3a2a}
.m-tecla:hover{fill:#5a4630}
.m-tecla.pulsada{fill:#f0b754}
.m-tecla.negra:hover{fill:#7a6040}
.m-tecla.negra.pulsada{fill:#ffe7a8}
.m-zona{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}
.m-vela.apagada .m-llama{opacity:0;transition:opacity .3s}
.m-vela .m-llama{transition:opacity .4s}
.m-partitura:hover .m-trazo{stroke:#ffe7a8}
.magia-suelo{position:absolute;left:0;top:0;height:30px;opacity:0;transition:opacity 1.6s;pointer-events:none}
.magia-suelo.visible{opacity:1}
.magia-suelo svg{display:block;overflow:visible}
.m-pasto{fill:none;stroke:#b08c4a;stroke-width:1.1;stroke-linecap:round;opacity:.7;transform-box:view-box;animation:magia-pasto 4s ease-in-out infinite}
@keyframes magia-pasto{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
.anda .m-pierna-a{animation:magia-pierna var(--paso) ease-in-out infinite alternate}
.anda .m-pierna-b{animation:magia-pierna var(--paso) ease-in-out infinite alternate-reverse}
.anda .m-brazo-a{animation:magia-brazo var(--paso) ease-in-out infinite alternate-reverse}
.anda .m-brazo-b{animation:magia-brazo var(--paso) ease-in-out infinite alternate}
.anda .m-pata-a{animation:magia-pata var(--paso) ease-in-out infinite alternate}
.anda .m-pata-b{animation:magia-pata var(--paso) ease-in-out infinite alternate-reverse}
.anda .m-capa,.anda .m-tunica{animation:magia-capa calc(var(--paso) * 2) ease-in-out infinite}
@keyframes magia-pierna{from{transform:rotate(-17deg)}to{transform:rotate(17deg)}}
@keyframes magia-brazo{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
@keyframes magia-pata{from{transform:rotate(16deg)}to{transform:rotate(-16deg)}}
@keyframes magia-capa{0%,100%{transform:skewX(0)}50%{transform:skewX(4deg)}}
.persona .m-cabeza{transition:transform .6s ease}
.persona .m-brazo-a,.persona .m-brazo-b{transition:transform .5s ease}
.h-mira-cielo .m-cabeza{transform:rotate(-20deg)}
.h-saluda .m-brazo-b{animation:magia-saludo .42s ease-in-out infinite alternate}
@keyframes magia-saludo{from{transform:rotate(-155deg)}to{transform:rotate(-120deg)}}
.m-espada{opacity:0;transition:opacity .3s}
.h-entrena .m-espada{opacity:1}
.h-entrena .m-puno{opacity:0}
.h-entrena .m-brazo-b{animation:magia-tajo .9s ease-in-out infinite}
@keyframes magia-tajo{0%{transform:rotate(-165deg)}40%{transform:rotate(-170deg)}58%{transform:rotate(-15deg)}75%{transform:rotate(-25deg)}100%{transform:rotate(-165deg)}}
.h-magia .m-brazo-b{transform:translate(3px,-9px) rotate(24deg)}
.h-magia .m-orbe{animation:magia-orbe .35s ease-in-out infinite}
.h-calienta .m-brazo-a,.h-calienta .m-brazo-b,.h-fogata .m-brazo-a,.h-fogata .m-brazo-b{transform:rotate(-68deg)}
.h-farol .m-brazo-b{transform:rotate(-48deg)}
.h-aplaude .m-brazo-a{animation:magia-aplauso-a .26s ease-in-out infinite alternate}
.h-aplaude .m-brazo-b{animation:magia-aplauso-b .26s ease-in-out infinite alternate}
@keyframes magia-aplauso-a{from{transform:rotate(-80deg)}to{transform:rotate(-58deg)}}
@keyframes magia-aplauso-b{from{transform:rotate(-58deg)}to{transform:rotate(-80deg)}}
.h-escucha .m-arte{animation:magia-mecer 2.6s ease-in-out infinite;transform-origin:50% 96%}
.bicho.h-escucha .m-cola{animation-duration:1.1s}
@keyframes magia-mecer{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.h-reverencia .m-arte{transform:rotate(16deg);transform-origin:50% 96%;transition:transform .5s ease}
.flor .m-cara{animation:magia-crece 1.2s ease-out both;transform-origin:50% 100%}
@keyframes magia-crece{from{transform:scale(.05)}to{transform:scale(1)}}
.fogata .m-arte{filter:drop-shadow(0 0 6px rgba(255,157,77,.8))}
.tocando .m-toca-a{animation:magia-toca-a .46s ease-in-out infinite alternate}
.tocando .m-toca-b{animation:magia-toca-b .4s ease-in-out infinite alternate}
.tocando .m-balanceo{animation:magia-balanceo 2.8s ease-in-out infinite}
.tocando .m-cabeza{animation:magia-cabeceo 1.4s ease-in-out infinite}
@keyframes magia-toca-a{from{transform:translate(-3px,0) rotate(-3deg)}to{transform:translate(3px,1.5px) rotate(4deg)}}
@keyframes magia-toca-b{from{transform:translate(3px,1.5px) rotate(3deg)}to{transform:translate(-3px,0) rotate(-4deg)}}
@keyframes magia-balanceo{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes magia-cabeceo{0%,100%{transform:rotate(0)}50%{transform:rotate(4deg)}}