/* §skate_espera — CSS copiado del plugin (cep-plugin/index.html «SKATEBOARD REAL — foto + CSS 3D»,
   #mix-anim / #mix-skate-reveal). Scopeado a .sk-esp. Lo único nuevo: --sk escala la escena al marco. */
.sk-esp-on { background: #000 !important; animation: none !important; color: #777; container-type: normal; }
.sk-esp-on > :not(.sk-esp) { position: relative; z-index: 1; }
.sk-esp-on > i, .sk-esp-on > span, .sk-esp-on > small, .sk-esp-on > .cr-prog { display: none !important; }   /* spinner y «Generando…» viejos: los reemplaza la escena del plugin */
.sk-esp-on { place-content: end center !important; padding-bottom: 12px !important; }
.sk-esp-on .cr-prog { width: 190px; max-width: 70%; height: 2px; background: #111; border-radius: 2px; }
.sk-esp-on .cr-prog i { background: #fff; }
.sk-esp-on small { font-size: 7.5px; font-weight: 600; letter-spacing: 1px; color: #444; text-transform: uppercase; }
.gp-run.sk-esp-on { position: absolute; inset: 0; }
.sk-esp { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.sk-esp-fit { display: flex; flex-direction: column; align-items: center; gap: 14px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--sk, 1)); transform-origin: center; }
.sk-esp .sk-scene { position: relative; display: flex; align-items: center; justify-content: center; perspective: 800px; }
.sk-esp .sk-scene--lg { width: 256px; height: 256px; }
.sk-esp .sk-scene--lg .sk-ring { width: 230px; height: 230px; }
.sk-esp .sk-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.65); box-shadow: 0 0 18px rgba(255,255,255,.2), 0 0 50px rgba(255,255,255,.07); animation: skEspRing 2.2s ease-in-out infinite; }
.sk-esp .sk-board-img { display: block; object-fit: contain; transition: transform 0.055s linear, filter 0.12s ease; }
.sk-esp .sk-board-img--lg { width: 220px; height: auto; }
.sk-esp .sk-wrap { position: relative; transform-origin: center center; display: inline-block; }
.sk-esp .sk-3d { transform-style: preserve-3d; transition: transform .55s cubic-bezier(.23,1,.32,1); will-change: transform; }
.sk-esp-live .sk-3d { cursor: grab; touch-action: none; pointer-events: auto; }
.sk-esp .sk-3d.sk-dragging { transition: none; cursor: grabbing; }
.sk-esp .sk-3d.sk-inertia { transition: none; }
.sk-esp .sk-shadow { border-radius: 50%; background: rgba(0,0,0,.5); filter: blur(8px); animation: skEspSh 2.8s ease-in-out infinite; }
.sk-esp-live .sk-wrap.floating { animation: skEspFloat 2.6s ease-in-out infinite; }
.sk-esp .sk-wrap.kickflip { animation: skEspKick 1.15s cubic-bezier(.22,1,.36,1) forwards; }
.sk-esp .sk-wrap.heelflip { animation: skEspHeel 1.1s cubic-bezier(.22,1,.36,1) forwards; }
.sk-esp .sk-wrap.sk-spin { animation: skEspSpin 1.25s cubic-bezier(.22,1,.36,1) forwards; }
.sk-esp .sk-wrap.ollie { animation: skEspOllie 1.05s cubic-bezier(.22,1,.36,1) forwards; }
.sk-esp-lbl { font-size: 15px; font-weight: 900; color: #fff; letter-spacing: .5px; text-transform: uppercase; margin-top: 8px; }
.sk-esp-dots { display: flex; gap: 8px; }
.sk-esp .sb-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .2; }
.sk-esp-live .sb-dot { animation: skEspDot 1.2s ease-in-out infinite; }
.sk-esp-live .sb-dot:nth-child(2) { animation-delay: .2s; } .sk-esp-live .sb-dot:nth-child(3) { animation-delay: .4s; }
/* tarjetas no vivas = fotograma fijo (sin animación) */
.sk-esp-on:not(.sk-esp-live) .sk-ring, .sk-esp-on:not(.sk-esp-live) .sk-shadow { animation: none; opacity: .6; }
.sk-esp-on:not(.sk-esp-live) .sk-wrap { transform: translateY(0) rotate(-5deg); }
@keyframes skEspRing { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .85; transform: scale(1.05); } }
@keyframes skEspSh { 0%,100% { transform: scaleX(1); opacity: .35; } 50% { transform: scaleX(.6); opacity: .15; } }
@keyframes skEspFloat { 0%,100% { transform: translateY(0px) rotate(-5deg); } 50% { transform: translateY(-10px) rotate(-5deg); } }
@keyframes skEspDot { 0%,100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes skEspKick { 0% { transform: translateY(2px) rotate(6deg); } 6% { transform: translateY(-7px) rotate(11deg); } 22% { transform: translateY(-30px) rotate(4deg); } 42% { transform: translateY(-40px) rotate(-2deg); } 62% { transform: translateY(-24px) rotate(-3deg); } 82% { transform: translateY(-5px) rotate(2deg); } 100% { transform: translateY(0px) rotate(0deg); } }
@keyframes skEspHeel { 0% { transform: translateY(2px) rotate(-6deg); } 6% { transform: translateY(-7px) rotate(-11deg); } 22% { transform: translateY(-30px) rotate(-3deg); } 42% { transform: translateY(-40px) rotate(2deg); } 62% { transform: translateY(-24px) rotate(3deg); } 82% { transform: translateY(-5px) rotate(-2deg); } 100% { transform: translateY(0px) rotate(0deg); } }
@keyframes skEspSpin { 0% { transform: translateY(2px) rotate(0deg); } 8% { transform: translateY(-8px) rotate(20deg); } 30% { transform: translateY(-34px) rotate(160deg); } 52% { transform: translateY(-40px) rotate(358deg); } 70% { transform: translateY(-22px) rotate(360deg); } 88% { transform: translateY(-5px) rotate(360deg); } 100% { transform: translateY(0px) rotate(360deg); } }
@keyframes skEspOllie { 0% { transform: translateY(2px) rotate(8deg); } 7% { transform: translateY(-7px) rotate(13deg); } 24% { transform: translateY(-32px) rotate(1deg); } 46% { transform: translateY(-40px) rotate(-3deg); } 66% { transform: translateY(-20px) rotate(1deg); } 84% { transform: translateY(-4px) rotate(4deg); } 100% { transform: translateY(0px) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .sk-esp *, .sk-esp-live .sk-wrap.floating { animation: none !important; } }
.sk-esp-fit { gap: 6px; }
.sk-esp-lbl { text-transform: none; font-size: 17px; letter-spacing: .3px; }
.sk-esp-ell span { font-style: normal; opacity: .25; }
.sk-esp-live .sk-esp-ell span { animation: skEspEll 1.4s ease-in-out infinite; }
.sk-esp-live .sk-esp-ell span:nth-child(2) { animation-delay: .2s; } .sk-esp-live .sk-esp-ell span:nth-child(3) { animation-delay: .4s; }
@keyframes skEspEll { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.sk-esp-sub { font-size: 11px; font-weight: 600; color: #666; letter-spacing: .5px; }

/* §skate2 — todo marco en curso es contenedor de la escena (especificidad 0: cualquier regla del panel gana) */
:where(.sk-esp-on) { position: relative; overflow: hidden; }