@charset "UTF-8";

/*
 * HORSE MASCOT - Cavalry Animation (componente embebible)
 * Basado en recursos\caballo\style.css
 * Adaptado para invitacion.html  |  Oro premium #d4af37
 */

/* ── Variables y layout del contenedor ── */
.horse-mascot-wrap {
    --outlines: transparent;
    --speed: 0.9s;
    --delay-gap: 8;
    --horse-width: 3.8em;
    --horse-height: 2.5em;

    /* COLORES DE ORO */
    --color-horse: #d4af37;
    --color-horse-back: #b8860b;
    --color-hair: #ffd700;
    --color-hoof: #d4af37;
    /* Cascos ahora de oro */
    --color-dust: rgba(212, 175, 55, 0.7);
    /* Polvo de oro más denso */
    --color-floor: transparent;
    --color-sky: transparent;

    /* ══════════════════════════════════════════
       🐴 CONTROLES DE LA MELENA  ← EDITA AQUÍ
       ══════════════════════════════════════════
       Coordenadas RELATIVAS al cuello (neck-local space):
       --melena-x      → posición horizontal dentro del cuello (0%=base, 100%=arriba)
       --melena-y      → posición vertical   (valores negativos = sobre la línea del cuello)
       --melena-rotate → inclinación en grados relativa al eje del cuello (0deg=paralelo, 90deg=perpendicular)
       --melena-size   → altura de cada pelo  (50%=corto, 90%=largo)
    */
    --melena-x:      2%;
    --melena-y:      -15%;
    --melena-rotate: -3deg;
    --melena-size:   55%;


    /*
     * font-size controla TODO el tamaño del caballo.
     * Cambia este valor para hacer el caballo más grande o pequeño.
     */
    /*
     * font-size controla la resolución interna del caballo.
     * Al ser grande (80px), el navegador calcula las piezas con más precisión.
     * Luego se escala visualmente en el JS para el tamaño deseado.
     */
    font-size: 80px;

    /* Bloque en el flujo normal del documento — debajo del título */
    display: block;
    width: 100%;
    height: 160px;
    /* Altura visual final (mejorada de 120px) */
    margin: 15px auto 0px;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* IMPORTANTE: Previene que el polvo mueva la pantalla en móviles */
    pointer-events: none;
    z-index: 10;
}

/* El caballo se escala visualmente aquí para mantener la precisión interna */
.horse-mascot-wrap .caballo {
    transform: scale(0.6);
    transform-origin: center center;
    position: relative;
    display: inline-block;
    width: var(--horse-width);
    height: var(--horse-height);
    filter: drop-shadow(0 8px 25px rgba(212, 175, 55, 0.4)) blur(0.35px);
    will-change: transform, filter;
}

/* Todos los hijos: position relative (igual que el original con * { position:relative }) */
.horse-mascot-wrap * {
    position: relative;
    box-sizing: border-box;

    /* Forzar renderizado por GPU para suavizar bordes (anti-aliasing) */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);

    /* Eliminar cualquier recuadro o borde de diagnóstico */
    border: none !important;
    outline: none !important;
}

/* ── Solución para pezuñas: Ocultar delanteras ── */
.horse-mascot-wrap .pata-delantera .pezuna {
    display: none !important;
}

/* El .pie delantero sigue siendo gold por defecto */
.horse-mascot-wrap .pata-delantera .pie {
    background-color: var(--color-horse) !important;
}

/* ── Polvo: Reposicionado al nivel de los cascos (LAYOUT BASE) ── */
.horse-mascot-wrap .polvo {
    position: absolute !important;
    top: auto !important;
    /* Evita que nazca en la cabeza */
    bottom: -22px !important;
    /* Ajuste fino para que nazca en la pezuña */
    left: 0;
    right: 0;
    height: 100px;
    overflow: visible;
    pointer-events: none;
    z-index: -1;
}

/* Las partículas heredan las animaciones del style.css original */
.horse-mascot-wrap .polvo .particula {
    background-color: var(--color-dust);
    filter: blur(0.04em);
}

/* .polvo generic removed to avoid fixed positioning issues */

.suelo {
    display: none;
    /* Ocultar el suelo en versión mascota */
}

.polvo .particula {
    background-color: var(--color-dust);
    width: 0.05em;
    height: 0.05em;
    border-radius: 50%;
    position: absolute;
    border: none;
    top: 75%;
    /* Ajustado para el alto de 145px */
    left: calc(50% - (var(--horse-width) / 2) + (var(--horse-width) * 0.15));
    filter: blur(0.04em);
}

.polvo.atras .particula {
    left: calc(50% - (var(--horse-width) / 2) + (var(--horse-width) * 0.5));
}

@-webkit-keyframes particle-animation-1 {
    100% {
        -webkit-transform: translateX(calc(0.1865302066 * var(--horse-width))) translateY(calc(-0.0019510211 * (var(--horse-height) / 5))) scale(3) rotate(-126.5deg);
        transform: translateX(calc(0.1865302066 * var(--horse-width))) translateY(calc(-0.0019510211 * (var(--horse-height) / 5))) scale(3) rotate(-126.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-1 {
    100% {
        -webkit-transform: translateX(calc(0.1865302066 * var(--horse-width))) translateY(calc(-0.0019510211 * (var(--horse-height) / 5))) scale(3) rotate(-126.5deg);
        transform: translateX(calc(0.1865302066 * var(--horse-width))) translateY(calc(-0.0019510211 * (var(--horse-height) / 5))) scale(3) rotate(-126.5deg);
        opacity: 0;
    }
}

.particula:nth-child(1) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-1 var(--speed) ease-out infinite;
    animation: particle-animation-1 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.01s);
    animation-delay: calc((var(--speed) * 0.1) + 0.01s);
}

.polvo.atras .particula:nth-child(1) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.01s);
    animation-delay: calc((var(--speed) * 0.68) + 0.01s);
}

@-webkit-keyframes particle-animation-2 {
    100% {
        -webkit-transform: translateX(calc(0.0269289474 * var(--horse-width))) translateY(calc(-0.0005832403 * (var(--horse-height) / 5))) scale(4) rotate(-57.5deg);
        transform: translateX(calc(0.0269289474 * var(--horse-width))) translateY(calc(-0.0005832403 * (var(--horse-height) / 5))) scale(4) rotate(-57.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-2 {
    100% {
        -webkit-transform: translateX(calc(0.0269289474 * var(--horse-width))) translateY(calc(-0.0005832403 * (var(--horse-height) / 5))) scale(4) rotate(-57.5deg);
        transform: translateX(calc(0.0269289474 * var(--horse-width))) translateY(calc(-0.0005832403 * (var(--horse-height) / 5))) scale(4) rotate(-57.5deg);
        opacity: 0;
    }
}

.particula:nth-child(2) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-2 var(--speed) ease-out infinite;
    animation: particle-animation-2 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.02s);
    animation-delay: calc((var(--speed) * 0.1) + 0.02s);
}

.polvo.atras .particula:nth-child(2) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.02s);
    animation-delay: calc((var(--speed) * 0.68) + 0.02s);
}

@-webkit-keyframes particle-animation-3 {
    100% {
        -webkit-transform: translateX(calc(0.2183341644 * var(--horse-width))) translateY(calc(-0.0011654604 * (var(--horse-height) / 5))) scale(6) rotate(-141deg);
        transform: translateX(calc(0.2183341644 * var(--horse-width))) translateY(calc(-0.0011654604 * (var(--horse-height) / 5))) scale(6) rotate(-141deg);
        opacity: 0;
    }
}

@keyframes particle-animation-3 {
    100% {
        -webkit-transform: translateX(calc(0.2183341644 * var(--horse-width))) translateY(calc(-0.0011654604 * (var(--horse-height) / 5))) scale(6) rotate(-141deg);
        transform: translateX(calc(0.2183341644 * var(--horse-width))) translateY(calc(-0.0011654604 * (var(--horse-height) / 5))) scale(6) rotate(-141deg);
        opacity: 0;
    }
}

.particula:nth-child(3) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-3 var(--speed) ease-out infinite;
    animation: particle-animation-3 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.03s);
    animation-delay: calc((var(--speed) * 0.1) + 0.03s);
}

.polvo.atras .particula:nth-child(3) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.03s);
    animation-delay: calc((var(--speed) * 0.68) + 0.03s);
}

@-webkit-keyframes particle-animation-4 {
    100% {
        -webkit-transform: translateX(calc(0.516067634 * var(--horse-width))) translateY(calc(-0.0008606763 * (var(--horse-height) / 5))) scale(4) rotate(-108deg);
        transform: translateX(calc(0.516067634 * var(--horse-width))) translateY(calc(-0.0008606763 * (var(--horse-height) / 5))) scale(4) rotate(-108deg);
        opacity: 0;
    }
}

@keyframes particle-animation-4 {
    100% {
        -webkit-transform: translateX(calc(0.516067634 * var(--horse-width))) translateY(calc(-0.0008606763 * (var(--horse-height) / 5))) scale(4) rotate(-108deg);
        transform: translateX(calc(0.516067634 * var(--horse-width))) translateY(calc(-0.0008606763 * (var(--horse-height) / 5))) scale(4) rotate(-108deg);
        opacity: 0;
    }
}

.particula:nth-child(4) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-4 var(--speed) ease-out infinite;
    animation: particle-animation-4 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.04s);
    animation-delay: calc((var(--speed) * 0.1) + 0.04s);
}

.polvo.atras .particula:nth-child(4) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.04s);
    animation-delay: calc((var(--speed) * 0.68) + 0.04s);
}

@-webkit-keyframes particle-animation-5 {
    100% {
        -webkit-transform: translateX(calc(0.6010072872 * var(--horse-width))) translateY(calc(-0.0060810274 * (var(--horse-height) / 5))) scale(4) rotate(-76deg);
        transform: translateX(calc(0.6010072872 * var(--horse-width))) translateY(calc(-0.0060810274 * (var(--horse-height) / 5))) scale(4) rotate(-76deg);
        opacity: 0;
    }
}

@keyframes particle-animation-5 {
    100% {
        -webkit-transform: translateX(calc(0.6010072872 * var(--horse-width))) translateY(calc(-0.0060810274 * (var(--horse-height) / 5))) scale(4) rotate(-76deg);
        transform: translateX(calc(0.6010072872 * var(--horse-width))) translateY(calc(-0.0060810274 * (var(--horse-height) / 5))) scale(4) rotate(-76deg);
        opacity: 0;
    }
}

.particula:nth-child(5) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-5 var(--speed) ease-out infinite;
    animation: particle-animation-5 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.05s);
    animation-delay: calc((var(--speed) * 0.1) + 0.05s);
}

.polvo.atras .particula:nth-child(5) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.05s);
    animation-delay: calc((var(--speed) * 0.68) + 0.05s);
}

@-webkit-keyframes particle-animation-6 {
    100% {
        -webkit-transform: translateX(calc(0.4536142004 * var(--horse-width))) translateY(calc(-0.0087663683 * (var(--horse-height) / 5))) scale(4) rotate(-75.5deg);
        transform: translateX(calc(0.4536142004 * var(--horse-width))) translateY(calc(-0.0087663683 * (var(--horse-height) / 5))) scale(4) rotate(-75.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-6 {
    100% {
        -webkit-transform: translateX(calc(0.4536142004 * var(--horse-width))) translateY(calc(-0.0087663683 * (var(--horse-height) / 5))) scale(4) rotate(-75.5deg);
        transform: translateX(calc(0.4536142004 * var(--horse-width))) translateY(calc(-0.0087663683 * (var(--horse-height) / 5))) scale(4) rotate(-75.5deg);
        opacity: 0;
    }
}

.particula:nth-child(6) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-6 var(--speed) ease-out infinite;
    animation: particle-animation-6 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.06s);
    animation-delay: calc((var(--speed) * 0.1) + 0.06s);
}

.polvo.atras .particula:nth-child(6) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.06s);
    animation-delay: calc((var(--speed) * 0.68) + 0.06s);
}

@-webkit-keyframes particle-animation-7 {
    100% {
        -webkit-transform: translateX(calc(0.3354709263 * var(--horse-width))) translateY(calc(-0.0063274995 * (var(--horse-height) / 5))) scale(4) rotate(-14deg);
        transform: translateX(calc(0.3354709263 * var(--horse-width))) translateY(calc(-0.0063274995 * (var(--horse-height) / 5))) scale(4) rotate(-14deg);
        opacity: 0;
    }
}

@keyframes particle-animation-7 {
    100% {
        -webkit-transform: translateX(calc(0.3354709263 * var(--horse-width))) translateY(calc(-0.0063274995 * (var(--horse-height) / 5))) scale(4) rotate(-14deg);
        transform: translateX(calc(0.3354709263 * var(--horse-width))) translateY(calc(-0.0063274995 * (var(--horse-height) / 5))) scale(4) rotate(-14deg);
        opacity: 0;
    }
}

.particula:nth-child(7) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-7 var(--speed) ease-out infinite;
    animation: particle-animation-7 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.07s);
    animation-delay: calc((var(--speed) * 0.1) + 0.07s);
}

.polvo.atras .particula:nth-child(7) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.07s);
    animation-delay: calc((var(--speed) * 0.68) + 0.07s);
}

@-webkit-keyframes particle-animation-8 {
    100% {
        -webkit-transform: translateX(calc(0.7113461256 * var(--horse-width))) translateY(calc(-0.0099493652 * (var(--horse-height) / 5))) scale(6) rotate(-67.5deg);
        transform: translateX(calc(0.7113461256 * var(--horse-width))) translateY(calc(-0.0099493652 * (var(--horse-height) / 5))) scale(6) rotate(-67.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-8 {
    100% {
        -webkit-transform: translateX(calc(0.7113461256 * var(--horse-width))) translateY(calc(-0.0099493652 * (var(--horse-height) / 5))) scale(6) rotate(-67.5deg);
        transform: translateX(calc(0.7113461256 * var(--horse-width))) translateY(calc(-0.0099493652 * (var(--horse-height) / 5))) scale(6) rotate(-67.5deg);
        opacity: 0;
    }
}

.particula:nth-child(8) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-8 var(--speed) ease-out infinite;
    animation: particle-animation-8 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.08s);
    animation-delay: calc((var(--speed) * 0.1) + 0.08s);
}

.polvo.atras .particula:nth-child(8) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.08s);
    animation-delay: calc((var(--speed) * 0.68) + 0.08s);
}

@-webkit-keyframes particle-animation-9 {
    100% {
        -webkit-transform: translateX(calc(0.080946473 * var(--horse-width))) translateY(calc(-0.0065291825 * (var(--horse-height) / 5))) scale(4) rotate(-38deg);
        transform: translateX(calc(0.080946473 * var(--horse-width))) translateY(calc(-0.0065291825 * (var(--horse-height) / 5))) scale(4) rotate(-38deg);
        opacity: 0;
    }
}

@keyframes particle-animation-9 {
    100% {
        -webkit-transform: translateX(calc(0.080946473 * var(--horse-width))) translateY(calc(-0.0065291825 * (var(--horse-height) / 5))) scale(4) rotate(-38deg);
        transform: translateX(calc(0.080946473 * var(--horse-width))) translateY(calc(-0.0065291825 * (var(--horse-height) / 5))) scale(4) rotate(-38deg);
        opacity: 0;
    }
}

.particula:nth-child(9) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-9 var(--speed) ease-out infinite;
    animation: particle-animation-9 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.09s);
    animation-delay: calc((var(--speed) * 0.1) + 0.09s);
}

.polvo.atras .particula:nth-child(9) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.09s);
    animation-delay: calc((var(--speed) * 0.68) + 0.09s);
}

@-webkit-keyframes particle-animation-10 {
    100% {
        -webkit-transform: translateX(calc(0.1470335732 * var(--horse-width))) translateY(calc(-0.0020159981 * (var(--horse-height) / 5))) scale(4) rotate(-152.5deg);
        transform: translateX(calc(0.1470335732 * var(--horse-width))) translateY(calc(-0.0020159981 * (var(--horse-height) / 5))) scale(4) rotate(-152.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-10 {
    100% {
        -webkit-transform: translateX(calc(0.1470335732 * var(--horse-width))) translateY(calc(-0.0020159981 * (var(--horse-height) / 5))) scale(4) rotate(-152.5deg);
        transform: translateX(calc(0.1470335732 * var(--horse-width))) translateY(calc(-0.0020159981 * (var(--horse-height) / 5))) scale(4) rotate(-152.5deg);
        opacity: 0;
    }
}

.particula:nth-child(10) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-10 var(--speed) ease-out infinite;
    animation: particle-animation-10 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.1s);
    animation-delay: calc((var(--speed) * 0.1) + 0.1s);
}

.polvo.atras .particula:nth-child(10) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.1s);
    animation-delay: calc((var(--speed) * 0.68) + 0.1s);
}

@-webkit-keyframes particle-animation-11 {
    100% {
        -webkit-transform: translateX(calc(0.3975218731 * var(--horse-width))) translateY(calc(-0.0075265158 * (var(--horse-height) / 5))) scale(4) rotate(-40.5deg);
        transform: translateX(calc(0.3975218731 * var(--horse-width))) translateY(calc(-0.0075265158 * (var(--horse-height) / 5))) scale(4) rotate(-40.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-11 {
    100% {
        -webkit-transform: translateX(calc(0.3975218731 * var(--horse-width))) translateY(calc(-0.0075265158 * (var(--horse-height) / 5))) scale(4) rotate(-40.5deg);
        transform: translateX(calc(0.3975218731 * var(--horse-width))) translateY(calc(-0.0075265158 * (var(--horse-height) / 5))) scale(4) rotate(-40.5deg);
        opacity: 0;
    }
}

.particula:nth-child(11) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-11 var(--speed) ease-out infinite;
    animation: particle-animation-11 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.11s);
    animation-delay: calc((var(--speed) * 0.1) + 0.11s);
}

.polvo.atras .particula:nth-child(11) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.11s);
    animation-delay: calc((var(--speed) * 0.68) + 0.11s);
}

@-webkit-keyframes particle-animation-12 {
    100% {
        -webkit-transform: translateX(calc(0.6381622519 * var(--horse-width))) translateY(calc(-0.0067366122 * (var(--horse-height) / 5))) scale(5) rotate(-10deg);
        transform: translateX(calc(0.6381622519 * var(--horse-width))) translateY(calc(-0.0067366122 * (var(--horse-height) / 5))) scale(5) rotate(-10deg);
        opacity: 0;
    }
}

@keyframes particle-animation-12 {
    100% {
        -webkit-transform: translateX(calc(0.6381622519 * var(--horse-width))) translateY(calc(-0.0067366122 * (var(--horse-height) / 5))) scale(5) rotate(-10deg);
        transform: translateX(calc(0.6381622519 * var(--horse-width))) translateY(calc(-0.0067366122 * (var(--horse-height) / 5))) scale(5) rotate(-10deg);
        opacity: 0;
    }
}

.particula:nth-child(12) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-12 var(--speed) ease-out infinite;
    animation: particle-animation-12 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.12s);
    animation-delay: calc((var(--speed) * 0.1) + 0.12s);
}

.polvo.atras .particula:nth-child(12) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.12s);
    animation-delay: calc((var(--speed) * 0.68) + 0.12s);
}

@-webkit-keyframes particle-animation-13 {
    100% {
        -webkit-transform: translateX(calc(0.3130797386 * var(--horse-width))) translateY(calc(-0.0077930678 * (var(--horse-height) / 5))) scale(3) rotate(-122deg);
        transform: translateX(calc(0.3130797386 * var(--horse-width))) translateY(calc(-0.0077930678 * (var(--horse-height) / 5))) scale(3) rotate(-122deg);
        opacity: 0;
    }
}

@keyframes particle-animation-13 {
    100% {
        -webkit-transform: translateX(calc(0.3130797386 * var(--horse-width))) translateY(calc(-0.0077930678 * (var(--horse-height) / 5))) scale(3) rotate(-122deg);
        transform: translateX(calc(0.3130797386 * var(--horse-width))) translateY(calc(-0.0077930678 * (var(--horse-height) / 5))) scale(3) rotate(-122deg);
        opacity: 0;
    }
}

.particula:nth-child(13) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-13 var(--speed) ease-out infinite;
    animation: particle-animation-13 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.13s);
    animation-delay: calc((var(--speed) * 0.1) + 0.13s);
}

.polvo.atras .particula:nth-child(13) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.13s);
    animation-delay: calc((var(--speed) * 0.68) + 0.13s);
}

@-webkit-keyframes particle-animation-14 {
    100% {
        -webkit-transform: translateX(calc(0.1034230215 * var(--horse-width))) translateY(calc(-0.0038184827 * (var(--horse-height) / 5))) scale(5) rotate(-150deg);
        transform: translateX(calc(0.1034230215 * var(--horse-width))) translateY(calc(-0.0038184827 * (var(--horse-height) / 5))) scale(5) rotate(-150deg);
        opacity: 0;
    }
}

@keyframes particle-animation-14 {
    100% {
        -webkit-transform: translateX(calc(0.1034230215 * var(--horse-width))) translateY(calc(-0.0038184827 * (var(--horse-height) / 5))) scale(5) rotate(-150deg);
        transform: translateX(calc(0.1034230215 * var(--horse-width))) translateY(calc(-0.0038184827 * (var(--horse-height) / 5))) scale(5) rotate(-150deg);
        opacity: 0;
    }
}

.particula:nth-child(14) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-14 var(--speed) ease-out infinite;
    animation: particle-animation-14 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.14s);
    animation-delay: calc((var(--speed) * 0.1) + 0.14s);
}

.polvo.atras .particula:nth-child(14) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.14s);
    animation-delay: calc((var(--speed) * 0.68) + 0.14s);
}

@-webkit-keyframes particle-animation-15 {
    100% {
        -webkit-transform: translateX(calc(0.6811699412 * var(--horse-width))) translateY(calc(-0.0004574408 * (var(--horse-height) / 5))) scale(6) rotate(-105.5deg);
        transform: translateX(calc(0.6811699412 * var(--horse-width))) translateY(calc(-0.0004574408 * (var(--horse-height) / 5))) scale(6) rotate(-105.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-15 {
    100% {
        -webkit-transform: translateX(calc(0.6811699412 * var(--horse-width))) translateY(calc(-0.0004574408 * (var(--horse-height) / 5))) scale(6) rotate(-105.5deg);
        transform: translateX(calc(0.6811699412 * var(--horse-width))) translateY(calc(-0.0004574408 * (var(--horse-height) / 5))) scale(6) rotate(-105.5deg);
        opacity: 0;
    }
}

.particula:nth-child(15) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-15 var(--speed) ease-out infinite;
    animation: particle-animation-15 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.15s);
    animation-delay: calc((var(--speed) * 0.1) + 0.15s);
}

.polvo.atras .particula:nth-child(15) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.15s);
    animation-delay: calc((var(--speed) * 0.68) + 0.15s);
}

@-webkit-keyframes particle-animation-16 {
    100% {
        -webkit-transform: translateX(calc(0.3868914844 * var(--horse-width))) translateY(calc(-0.0059887576 * (var(--horse-height) / 5))) scale(6) rotate(-139.5deg);
        transform: translateX(calc(0.3868914844 * var(--horse-width))) translateY(calc(-0.0059887576 * (var(--horse-height) / 5))) scale(6) rotate(-139.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-16 {
    100% {
        -webkit-transform: translateX(calc(0.3868914844 * var(--horse-width))) translateY(calc(-0.0059887576 * (var(--horse-height) / 5))) scale(6) rotate(-139.5deg);
        transform: translateX(calc(0.3868914844 * var(--horse-width))) translateY(calc(-0.0059887576 * (var(--horse-height) / 5))) scale(6) rotate(-139.5deg);
        opacity: 0;
    }
}

.particula:nth-child(16) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-16 var(--speed) ease-out infinite;
    animation: particle-animation-16 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.16s);
    animation-delay: calc((var(--speed) * 0.1) + 0.16s);
}

.polvo.atras .particula:nth-child(16) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.16s);
    animation-delay: calc((var(--speed) * 0.68) + 0.16s);
}

@-webkit-keyframes particle-animation-17 {
    100% {
        -webkit-transform: translateX(calc(0.1950402245 * var(--horse-width))) translateY(calc(-0.0056747992 * (var(--horse-height) / 5))) scale(5) rotate(-123.5deg);
        transform: translateX(calc(0.1950402245 * var(--horse-width))) translateY(calc(-0.0056747992 * (var(--horse-height) / 5))) scale(5) rotate(-123.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-17 {
    100% {
        -webkit-transform: translateX(calc(0.1950402245 * var(--horse-width))) translateY(calc(-0.0056747992 * (var(--horse-height) / 5))) scale(5) rotate(-123.5deg);
        transform: translateX(calc(0.1950402245 * var(--horse-width))) translateY(calc(-0.0056747992 * (var(--horse-height) / 5))) scale(5) rotate(-123.5deg);
        opacity: 0;
    }
}

.particula:nth-child(17) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-17 var(--speed) ease-out infinite;
    animation: particle-animation-17 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.17s);
    animation-delay: calc((var(--speed) * 0.1) + 0.17s);
}

.polvo.atras .particula:nth-child(17) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.17s);
    animation-delay: calc((var(--speed) * 0.68) + 0.17s);
}

@-webkit-keyframes particle-animation-18 {
    100% {
        -webkit-transform: translateX(calc(0.108179063 * var(--horse-width))) translateY(calc(-0.0047562251 * (var(--horse-height) / 5))) scale(3) rotate(-81deg);
        transform: translateX(calc(0.108179063 * var(--horse-width))) translateY(calc(-0.0047562251 * (var(--horse-height) / 5))) scale(3) rotate(-81deg);
        opacity: 0;
    }
}

@keyframes particle-animation-18 {
    100% {
        -webkit-transform: translateX(calc(0.108179063 * var(--horse-width))) translateY(calc(-0.0047562251 * (var(--horse-height) / 5))) scale(3) rotate(-81deg);
        transform: translateX(calc(0.108179063 * var(--horse-width))) translateY(calc(-0.0047562251 * (var(--horse-height) / 5))) scale(3) rotate(-81deg);
        opacity: 0;
    }
}

.particula:nth-child(18) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-18 var(--speed) ease-out infinite;
    animation: particle-animation-18 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.18s);
    animation-delay: calc((var(--speed) * 0.1) + 0.18s);
}

.polvo.atras .particula:nth-child(18) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.18s);
    animation-delay: calc((var(--speed) * 0.68) + 0.18s);
}

@-webkit-keyframes particle-animation-19 {
    100% {
        -webkit-transform: translateX(calc(0.665064983 * var(--horse-width))) translateY(calc(-0.0047968338 * (var(--horse-height) / 5))) scale(5) rotate(-164deg);
        transform: translateX(calc(0.665064983 * var(--horse-width))) translateY(calc(-0.0047968338 * (var(--horse-height) / 5))) scale(5) rotate(-164deg);
        opacity: 0;
    }
}

@keyframes particle-animation-19 {
    100% {
        -webkit-transform: translateX(calc(0.665064983 * var(--horse-width))) translateY(calc(-0.0047968338 * (var(--horse-height) / 5))) scale(5) rotate(-164deg);
        transform: translateX(calc(0.665064983 * var(--horse-width))) translateY(calc(-0.0047968338 * (var(--horse-height) / 5))) scale(5) rotate(-164deg);
        opacity: 0;
    }
}

.particula:nth-child(19) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-19 var(--speed) ease-out infinite;
    animation: particle-animation-19 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.19s);
    animation-delay: calc((var(--speed) * 0.1) + 0.19s);
}

.polvo.atras .particula:nth-child(19) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.19s);
    animation-delay: calc((var(--speed) * 0.68) + 0.19s);
}

@-webkit-keyframes particle-animation-20 {
    100% {
        -webkit-transform: translateX(calc(0.3799311838 * var(--horse-width))) translateY(calc(-0.0012141532 * (var(--horse-height) / 5))) scale(3) rotate(-22.5deg);
        transform: translateX(calc(0.3799311838 * var(--horse-width))) translateY(calc(-0.0012141532 * (var(--horse-height) / 5))) scale(3) rotate(-22.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-20 {
    100% {
        -webkit-transform: translateX(calc(0.3799311838 * var(--horse-width))) translateY(calc(-0.0012141532 * (var(--horse-height) / 5))) scale(3) rotate(-22.5deg);
        transform: translateX(calc(0.3799311838 * var(--horse-width))) translateY(calc(-0.0012141532 * (var(--horse-height) / 5))) scale(3) rotate(-22.5deg);
        opacity: 0;
    }
}

.particula:nth-child(20) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-20 var(--speed) ease-out infinite;
    animation: particle-animation-20 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.2s);
    animation-delay: calc((var(--speed) * 0.1) + 0.2s);
}

.polvo.atras .particula:nth-child(20) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.2s);
    animation-delay: calc((var(--speed) * 0.68) + 0.2s);
}

@-webkit-keyframes particle-animation-21 {
    100% {
        -webkit-transform: translateX(calc(0.6391360309 * var(--horse-width))) translateY(calc(-0.009106735 * (var(--horse-height) / 5))) scale(3) rotate(-48.5deg);
        transform: translateX(calc(0.6391360309 * var(--horse-width))) translateY(calc(-0.009106735 * (var(--horse-height) / 5))) scale(3) rotate(-48.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-21 {
    100% {
        -webkit-transform: translateX(calc(0.6391360309 * var(--horse-width))) translateY(calc(-0.009106735 * (var(--horse-height) / 5))) scale(3) rotate(-48.5deg);
        transform: translateX(calc(0.6391360309 * var(--horse-width))) translateY(calc(-0.009106735 * (var(--horse-height) / 5))) scale(3) rotate(-48.5deg);
        opacity: 0;
    }
}

.particula:nth-child(21) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-21 var(--speed) ease-out infinite;
    animation: particle-animation-21 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.21s);
    animation-delay: calc((var(--speed) * 0.1) + 0.21s);
}

.polvo.atras .particula:nth-child(21) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.21s);
    animation-delay: calc((var(--speed) * 0.68) + 0.21s);
}

@-webkit-keyframes particle-animation-22 {
    100% {
        -webkit-transform: translateX(calc(0.5704055607 * var(--horse-width))) translateY(calc(-0.0003910802 * (var(--horse-height) / 5))) scale(6) rotate(-69.5deg);
        transform: translateX(calc(0.5704055607 * var(--horse-width))) translateY(calc(-0.0003910802 * (var(--horse-height) / 5))) scale(6) rotate(-69.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-22 {
    100% {
        -webkit-transform: translateX(calc(0.5704055607 * var(--horse-width))) translateY(calc(-0.0003910802 * (var(--horse-height) / 5))) scale(6) rotate(-69.5deg);
        transform: translateX(calc(0.5704055607 * var(--horse-width))) translateY(calc(-0.0003910802 * (var(--horse-height) / 5))) scale(6) rotate(-69.5deg);
        opacity: 0;
    }
}

.particula:nth-child(22) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-22 var(--speed) ease-out infinite;
    animation: particle-animation-22 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.22s);
    animation-delay: calc((var(--speed) * 0.1) + 0.22s);
}

.polvo.atras .particula:nth-child(22) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.22s);
    animation-delay: calc((var(--speed) * 0.68) + 0.22s);
}

@-webkit-keyframes particle-animation-23 {
    100% {
        -webkit-transform: translateX(calc(0.5243436617 * var(--horse-width))) translateY(calc(-0.0087148752 * (var(--horse-height) / 5))) scale(4) rotate(-103deg);
        transform: translateX(calc(0.5243436617 * var(--horse-width))) translateY(calc(-0.0087148752 * (var(--horse-height) / 5))) scale(4) rotate(-103deg);
        opacity: 0;
    }
}

@keyframes particle-animation-23 {
    100% {
        -webkit-transform: translateX(calc(0.5243436617 * var(--horse-width))) translateY(calc(-0.0087148752 * (var(--horse-height) / 5))) scale(4) rotate(-103deg);
        transform: translateX(calc(0.5243436617 * var(--horse-width))) translateY(calc(-0.0087148752 * (var(--horse-height) / 5))) scale(4) rotate(-103deg);
        opacity: 0;
    }
}

.particula:nth-child(23) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-23 var(--speed) ease-out infinite;
    animation: particle-animation-23 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.23s);
    animation-delay: calc((var(--speed) * 0.1) + 0.23s);
}

.polvo.atras .particula:nth-child(23) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.23s);
    animation-delay: calc((var(--speed) * 0.68) + 0.23s);
}

@-webkit-keyframes particle-animation-24 {
    100% {
        -webkit-transform: translateX(calc(0.1731283628 * var(--horse-width))) translateY(calc(-0.0092726604 * (var(--horse-height) / 5))) scale(6) rotate(-73deg);
        transform: translateX(calc(0.1731283628 * var(--horse-width))) translateY(calc(-0.0092726604 * (var(--horse-height) / 5))) scale(6) rotate(-73deg);
        opacity: 0;
    }
}

@keyframes particle-animation-24 {
    100% {
        -webkit-transform: translateX(calc(0.1731283628 * var(--horse-width))) translateY(calc(-0.0092726604 * (var(--horse-height) / 5))) scale(6) rotate(-73deg);
        transform: translateX(calc(0.1731283628 * var(--horse-width))) translateY(calc(-0.0092726604 * (var(--horse-height) / 5))) scale(6) rotate(-73deg);
        opacity: 0;
    }
}

.particula:nth-child(24) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-24 var(--speed) ease-out infinite;
    animation: particle-animation-24 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.24s);
    animation-delay: calc((var(--speed) * 0.1) + 0.24s);
}

.polvo.atras .particula:nth-child(24) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.24s);
    animation-delay: calc((var(--speed) * 0.68) + 0.24s);
}

@-webkit-keyframes particle-animation-25 {
    100% {
        -webkit-transform: translateX(calc(0.0794815925 * var(--horse-width))) translateY(calc(-0.0068352112 * (var(--horse-height) / 5))) scale(6) rotate(-93.5deg);
        transform: translateX(calc(0.0794815925 * var(--horse-width))) translateY(calc(-0.0068352112 * (var(--horse-height) / 5))) scale(6) rotate(-93.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-25 {
    100% {
        -webkit-transform: translateX(calc(0.0794815925 * var(--horse-width))) translateY(calc(-0.0068352112 * (var(--horse-height) / 5))) scale(6) rotate(-93.5deg);
        transform: translateX(calc(0.0794815925 * var(--horse-width))) translateY(calc(-0.0068352112 * (var(--horse-height) / 5))) scale(6) rotate(-93.5deg);
        opacity: 0;
    }
}

.particula:nth-child(25) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-25 var(--speed) ease-out infinite;
    animation: particle-animation-25 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.25s);
    animation-delay: calc((var(--speed) * 0.1) + 0.25s);
}

.polvo.atras .particula:nth-child(25) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.25s);
    animation-delay: calc((var(--speed) * 0.68) + 0.25s);
}

@-webkit-keyframes particle-animation-26 {
    100% {
        -webkit-transform: translateX(calc(0.3962348094 * var(--horse-width))) translateY(calc(-0.0079345421 * (var(--horse-height) / 5))) scale(3) rotate(-56deg);
        transform: translateX(calc(0.3962348094 * var(--horse-width))) translateY(calc(-0.0079345421 * (var(--horse-height) / 5))) scale(3) rotate(-56deg);
        opacity: 0;
    }
}

@keyframes particle-animation-26 {
    100% {
        -webkit-transform: translateX(calc(0.3962348094 * var(--horse-width))) translateY(calc(-0.0079345421 * (var(--horse-height) / 5))) scale(3) rotate(-56deg);
        transform: translateX(calc(0.3962348094 * var(--horse-width))) translateY(calc(-0.0079345421 * (var(--horse-height) / 5))) scale(3) rotate(-56deg);
        opacity: 0;
    }
}

.particula:nth-child(26) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-26 var(--speed) ease-out infinite;
    animation: particle-animation-26 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.26s);
    animation-delay: calc((var(--speed) * 0.1) + 0.26s);
}

.polvo.atras .particula:nth-child(26) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.26s);
    animation-delay: calc((var(--speed) * 0.68) + 0.26s);
}

@-webkit-keyframes particle-animation-27 {
    100% {
        -webkit-transform: translateX(calc(0.3415531831 * var(--horse-width))) translateY(calc(-0.0022188424 * (var(--horse-height) / 5))) scale(5) rotate(-153.5deg);
        transform: translateX(calc(0.3415531831 * var(--horse-width))) translateY(calc(-0.0022188424 * (var(--horse-height) / 5))) scale(5) rotate(-153.5deg);
        opacity: 0;
    }
}

@keyframes particle-animation-27 {
    100% {
        -webkit-transform: translateX(calc(0.3415531831 * var(--horse-width))) translateY(calc(-0.0022188424 * (var(--horse-height) / 5))) scale(5) rotate(-153.5deg);
        transform: translateX(calc(0.3415531831 * var(--horse-width))) translateY(calc(-0.0022188424 * (var(--horse-height) / 5))) scale(5) rotate(-153.5deg);
        opacity: 0;
    }
}

.particula:nth-child(27) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-27 var(--speed) ease-out infinite;
    animation: particle-animation-27 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.27s);
    animation-delay: calc((var(--speed) * 0.1) + 0.27s);
}

.polvo.atras .particula:nth-child(27) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.27s);
    animation-delay: calc((var(--speed) * 0.68) + 0.27s);
}

@-webkit-keyframes particle-animation-28 {
    100% {
        -webkit-transform: translateX(calc(0.393523244 * var(--horse-width))) translateY(calc(-0.0088784406 * (var(--horse-height) / 5))) scale(6) rotate(-14deg);
        transform: translateX(calc(0.393523244 * var(--horse-width))) translateY(calc(-0.0088784406 * (var(--horse-height) / 5))) scale(6) rotate(-14deg);
        opacity: 0;
    }
}

@keyframes particle-animation-28 {
    100% {
        -webkit-transform: translateX(calc(0.393523244 * var(--horse-width))) translateY(calc(-0.0088784406 * (var(--horse-height) / 5))) scale(6) rotate(-14deg);
        transform: translateX(calc(0.393523244 * var(--horse-width))) translateY(calc(-0.0088784406 * (var(--horse-height) / 5))) scale(6) rotate(-14deg);
        opacity: 0;
    }
}

.particula:nth-child(28) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-28 var(--speed) ease-out infinite;
    animation: particle-animation-28 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.28s);
    animation-delay: calc((var(--speed) * 0.1) + 0.28s);
}

.polvo.atras .particula:nth-child(28) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.28s);
    animation-delay: calc((var(--speed) * 0.68) + 0.28s);
}

@-webkit-keyframes particle-animation-29 {
    100% {
        -webkit-transform: translateX(calc(0.5950931187 * var(--horse-width))) translateY(calc(-0.0052506571 * (var(--horse-height) / 5))) scale(5) rotate(-40deg);
        transform: translateX(calc(0.5950931187 * var(--horse-width))) translateY(calc(-0.0052506571 * (var(--horse-height) / 5))) scale(5) rotate(-40deg);
        opacity: 0;
    }
}

@keyframes particle-animation-29 {
    100% {
        -webkit-transform: translateX(calc(0.5950931187 * var(--horse-width))) translateY(calc(-0.0052506571 * (var(--horse-height) / 5))) scale(5) rotate(-40deg);
        transform: translateX(calc(0.5950931187 * var(--horse-width))) translateY(calc(-0.0052506571 * (var(--horse-height) / 5))) scale(5) rotate(-40deg);
        opacity: 0;
    }
}

.particula:nth-child(29) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-29 var(--speed) ease-out infinite;
    animation: particle-animation-29 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.29s);
    animation-delay: calc((var(--speed) * 0.1) + 0.29s);
}

.polvo.atras .particula:nth-child(29) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.29s);
    animation-delay: calc((var(--speed) * 0.68) + 0.29s);
}

@-webkit-keyframes particle-animation-30 {
    100% {
        -webkit-transform: translateX(calc(0.1338113957 * var(--horse-width))) translateY(calc(-0.0052104567 * (var(--horse-height) / 5))) scale(5) rotate(-170deg);
        transform: translateX(calc(0.1338113957 * var(--horse-width))) translateY(calc(-0.0052104567 * (var(--horse-height) / 5))) scale(5) rotate(-170deg);
        opacity: 0;
    }
}

@keyframes particle-animation-30 {
    100% {
        -webkit-transform: translateX(calc(0.1338113957 * var(--horse-width))) translateY(calc(-0.0052104567 * (var(--horse-height) / 5))) scale(5) rotate(-170deg);
        transform: translateX(calc(0.1338113957 * var(--horse-width))) translateY(calc(-0.0052104567 * (var(--horse-height) / 5))) scale(5) rotate(-170deg);
        opacity: 0;
    }
}

.particula:nth-child(30) {
    -webkit-transform-origin: -20% -20%;
    transform-origin: -20% -20%;
    -webkit-animation: particle-animation-30 var(--speed) ease-out infinite;
    animation: particle-animation-30 var(--speed) ease-out infinite;
    -webkit-animation-delay: calc((var(--speed) * 0.1) + 0.3s);
    animation-delay: calc((var(--speed) * 0.1) + 0.3s);
}

.polvo.atras .particula:nth-child(30) {
    -webkit-animation-delay: calc((var(--speed) * 0.68) + 0.3s);
    animation-delay: calc((var(--speed) * 0.68) + 0.3s);
}

.horse-mascot-wrap .caballo {




    width: var(--horse-width);
    height: var(--horse-height);
    border: 0px solid var(--outlines);
    filter: blur(0.4px);
    will-change: filter;
}

.horse-mascot-wrap .caballo *,
.horse-mascot-wrap .caballo *:after,
.horse-mascot-wrap .caballo *:before {
    border: 1px dashed var(--outlines);
}

.horse-mascot-wrap .caballo>* {
    position: absolute;
    top: var(--part-y, 0);
    left: var(--part-x, 0);
    width: var(--part-width, 10px);
    height: var(--part-height, 10px);
    border-radius: var(--part-radius, 0);
    -webkit-transform: rotate(var(--part-rotate, 0deg));
    transform: rotate(var(--part-rotate, 0deg));
    -webkit-transform-origin: var(--part-origin, 50% 50%);
    transform-origin: var(--part-origin, 50% 50%);
    -webkit-animation-delay: var(--delay, 0s) !important;
    animation-delay: var(--delay, 0s) !important;
}

.horse-mascot-wrap .caballo>* *,
.horse-mascot-wrap .caballo>* *:after,
.horse-mascot-wrap .caballo>* *:before {
    position: absolute;
    background-color: var(--color-horse);
    top: var(--shape-y, 0);
    left: var(--shape-x, 0);
    width: var(--shape-width, 10px);
    height: var(--shape-height, 10px);
    border-radius: var(--shape-radius, 0);
    -webkit-transform: rotate(var(--shape-rotate, 0deg));
    transform: rotate(var(--shape-rotate, 0deg));
    -webkit-transform-origin: var(--shape-origin, 50% 50%);
    transform-origin: var(--shape-origin, 50% 50%);
    -webkit-animation-delay: var(--delay, 0s) !important;
    animation-delay: var(--delay, 0s) !important;
}

/* ================

   HEAD

   ================ */
.cabeza {
    --part-width: 20%;
    --part-height: 15%;
    --part-x: -1%;
    --part-y: 3%;
    --part-origin: 100% 50%;
    --part-rotate: -40deg;
    border: none;
}

.cabeza .craneo {
    --shape-width: 55%;
    --shape-height: 80%;
    --shape-radius: 50%;
    --shape-x: 43%;
    --shape-y: 10%;
    --shape-rotate: 40deg;
}

.cabeza .ojo {
    background-color: var(--color-horse-back);
    --shape-width: 7%;
    --shape-height: 10%;
    --shape-radius: 30% 100%;
    --shape-x: 45%;
    --shape-y: 20%;
    --shape-rotate: 0deg;
}

.cabeza .cara {
    --shape-width: 47%;
    --shape-height: 50%;
    --shape-y: 8%;
    --shape-x: 14%;
    --shape-rotate: -5deg;
}

.cabeza .nariz {
    --shape-x: 0%;
    --shape-y: 11.7%;
    --shape-width: 24%;
    --shape-height: 35%;
    --shape-radius: 50%;
    --shape-rotate: -12deg;
}

.cabeza .mandibula {
    --shape-width: 25%;
    --shape-height: 60%;
    --shape-x: 40%;
    --shape-y: 37%;
    --shape-radius: 45%;
    -webkit-transform: skew(0deg) rotate(40deg);
    transform: skew(0deg) rotate(40deg);
}

.cabeza .labio {
    --shape-rotate: 40deg;
    --shape-x: -3%;
    --shape-y: 28%;
    --shape-radius: 30%;
    --shape-width: 12%;
    --shape-height: 25%;
}

.cabeza .barbilla {
    --shape-width: 15%;
    --shape-height: 40%;
    --shape-y: 31%;
    --shape-x: 2%;
    --shape-radius: 30%;
    --shape-rotate: 40deg;
}

.cabeza .barbilla:after {
    content: '';
    --shape-width: 130%;
    --shape-height: 180%;
    --shape-radius: 0;
    --shape-x: 123%;
    --shape-y: -95%;
    --shape-rotate: 70deg;
}

.cabeza .oreja {
    --shape-width: 20%;
    --shape-height: 25%;
    --shape-y: 17%;
    --shape-x: 78%;
    --shape-radius: 50%;
    --shape-rotate: -20deg;
    --shape-origin: 0% 50%;
}

.cabeza .oreja:after {
    content: '';
    --shape-width: 90%;
    --shape-height: 70%;
    --shape-y: 10%;
    --shape-x: 65%;
    --shape-radius: 40%;
    --shape-rotate: -45deg;
}

.cabeza .oreja:before {
    content: '';
    --shape-width: 110%;
    --shape-height: 80%;
    --shape-y: -30%;
    --shape-x: 1%;
    --shape-radius: 0%;
    --shape-rotate: -20deg;
}

/* ================

   NECK

   ================ */
.cuello {
    --part-width: 30%;
    --part-height: 25%;
    --part-x: 5%;
    --part-y: 35%;
    --part-origin: 90% 50%;
    --part-rotate: 45deg;
    border: none;
}

.cuello .debajo {
    --shape-height: 40%;
    --shape-width: 16%;
    --shape-radius: 50%;
    --shape-x: 11%;
    --shape-y: 55%;
    --shape-rotate: -19deg;
    background-color: transparent;
    border-top: 0.07em outset var(--color-horse);
}

.cuello .frente {
    --shape-width: 75%;
    --shape-height: 55%;
    --shape-radius: 50%;
    --shape-y: 28%;
    --shape-x: 7%;
    --shape-rotate: 20deg;
}

.cuello .parte-superior {
    --shape-x: 10%;
    --shape-y: 5%;
    --shape-width: 50%;
    --shape-height: 25%;
    --shape-radius: 50% / 20%;
    --shape-rotate: 0deg;
}

.cuello .parte-superior:after {
    content: '';
    --shape-x: 50%;
    --shape-y: -10%;
    --shape-width: 70%;
    --shape-height: 50%;
    --shape-radius: 0%;
    --shape-rotate: -5deg;
}

.cuello .base {
    --shape-width: 50%;
    --shape-height: 30%;
    --shape-x: 20%;
    --shape-y: 10%;
    --shape-radius: 30%;
    --shape-rotate: -10deg;
}

.cuello .hombro {
    --shape-width: 50%;
    --shape-height: 30%;
    --shape-x: 48%;
    --shape-y: -2%;
    --shape-rotate: -20deg;
    --shape-radius: 50%;
}

/* ================

   BODY

   ================ */
.cuerpo {
    --part-width: 55%;
    --part-height: 33%;
    --part-x: 20%;
    --part-y: 30%;
    --part-origin: 10% 50%;
    border: none;
}

.cuerpo .seccion {
    --shape-width: 94%;
    --shape-height: 90%;
    --shape-x: 40%;
    --shape-y: 5%;
    --shape-origin: 10% 30%;
    --shape-radius: 50% 0 20% 20%;
    --shape-rotate: -9deg;
}

.cuerpo .seccion.ultimo {
    --shape-radius: 45%;
}

.cuerpo .seccion.ultimo:after {
    content: none;
}

.cuerpo>.seccion {
    --shape-x: 4%;
    --shape-y: 4%;
    --shape-width: 32%;
    --shape-height: 92%;
    --shape-rotate: 10deg;
    --shape-origin: 50% 50%;
    --shape-radius: 45%;
}

.cuerpo>.seccion:after {
    content: '';
    --shape-height: 70%;
    --shape-width: 202%;
    --shape-x: 40%;
    --shape-y: 48%;
    --shape-rotate: -23deg;
    --shape-origin: 0% 100%;
    --shape-radius: 50%;
}

.cuerpo .parte-trasera {
    --shape-x: 60%;
    --shape-y: -10%;
    --shape-width: 33.4%;
    --shape-height: 63.0%;
    --shape-origin: 0 0;
    --shape-rotate: 8deg;
    --shape-radius: 40% 50% 50%;
}

/* ================

   TAIL

   ================ */
.cola {
    --part-width: 35%;
    --part-height: 18%;
    --part-x: 63%;
    --part-y: 29%;
    --part-rotate: 10deg;
    --part-origin: 0% 50%;
    border: none;
}

.cola .inicio-cola {
    --shape-width: 30.8%;
    --shape-height: 27.0%;
    --shape-rotate: 4deg;
    --shape-origin: 10% 50%;
    --shape-radius: 20% / 50%;
    background-color: var(--color-hair);
}

.cola .seccion {
    --shape-width: 108.0%;
    --shape-height: 94.5%;
    --shape-rotate: 15deg;
    --shape-origin: 0% 50%;
    --shape-radius: 30% / 50%;
    --shape-y: -25%;
    --shape-x: 60%;
    background-color: var(--color-hair);
}

.cola .seccion:after {
    content: '';
    --shape-width: 183.6%;
    --shape-height: 126.0%;
    --shape-rotate: 6deg;
    --shape-origin: 0% 50%;
    --shape-radius: 50%;
    --shape-y: -10%;
    --shape-x: 0%;
    background-color: transparent;
    box-shadow: -0.068em 0.022em 0 0 var(--color-hair);
}

.cola .seccion:before {
    content: '';
    --shape-width: 140.4%;
    --shape-height: 105.0%;
    --shape-rotate: -20deg;
    --shape-origin: 0% 50%;
    --shape-radius: 50%;
    --shape-y: 0%;
    --shape-x: 50%;
    background-color: transparent;
    box-shadow: -0.068em 0.045em 0 0 var(--color-hair);
}

.cola .inicio-cola>.seccion {
    --shape-width: 44.0%;
    --shape-height: 153.0%;
}

.cola .seccion>*>* {
    --shape-rotate: 0deg;
    --shape-height: 84.0%;
}

.cola .seccion>*>*>*>* {
    --shape-rotate: -25deg;
    --shape-height: 42.0%;
}

/* ================

   MANE (MELENA)
   Child of .cuello → follows neck movement automatically.
   Uses --shape-* system (same as debajo, frente, etc.)
   --shape-rotate controls the tilt — works without animation conflicts!

   ════ EDITA LOS CONTROLES EN LA PARTE SUPERIOR DEL ARCHIVO ════
   ================ */

/* Container: positioned on the nape within neck's local coordinate space */
.cuello .melena {
    --shape-x: var(--melena-x, 15%);
    --shape-y: var(--melena-y, -15%);
    --shape-width: 69%;
    --shape-height: 55%;
    --shape-rotate: var(--melena-rotate, 0deg);  /* ← Works freely now! */
    --shape-origin: 0% 100%;
    background-color: transparent !important;    /* override generic rule */
    z-index: 6;
}


/* Individual strands — fully explicit CSS (3 levels deep, not covered by generic rule) */
.cuello .melena .m1,
.cuello .melena .m2,
.cuello .melena .m3,
.cuello .melena .m4,
.cuello .melena .m5,
.cuello .melena .m6 {
    position: absolute;
    background-color: var(--color-hair);
    width: 22%;
    height: var(--melena-size, 50%);
    border-radius: 40% 60% 80% 20% / 5% 5% 95% 95%;
    transform-origin: 50% 0%;
}

/* Strand positions: from the ear side (left in neck-local space) to the back */
.cuello .melena .m1 { left:  0%;  top: 5%;   transform: rotate( 8deg) scaleX(0.75); }
.cuello .melena .m2 { left: 16%;  top: 2%;   transform: rotate( 4deg) scaleX(0.85); }
.cuello .melena .m3 { left: 33%;  top: 0%;   transform: rotate( 0deg) scaleX(0.92); }
.cuello .melena .m4 { left: 50%;  top: -2%;  transform: rotate(-4deg) scaleX(0.96); }
.cuello .melena .m5 { left: 68%;  top: -3%;  transform: rotate(-7deg) scaleX(1.00); }
.cuello .melena .m6 { left: 85%;  top: -2%;  transform: rotate(-10deg) scaleX(1.05); }

/* Wind-wave animation for individual strands */
@-webkit-keyframes mane-wave {
    0%, 100% { -webkit-transform: rotate(var(--mr, 0deg)) scaleX(var(--ms, 1)); }
    40%       { -webkit-transform: rotate(calc(var(--mr, 0deg) + 10deg)) scaleX(var(--ms, 1)) skewX(-5deg); }
    70%       { -webkit-transform: rotate(calc(var(--mr, 0deg) -  4deg)) scaleX(var(--ms, 1)) skewX( 2deg); }
}

@keyframes mane-wave {
    0%, 100% { transform: rotate(var(--mr, 0deg)) scaleX(var(--ms, 1)); }
    40%       { transform: rotate(calc(var(--mr, 0deg) + 10deg)) scaleX(var(--ms, 1)) skewX(-5deg); }
    70%       { transform: rotate(calc(var(--mr, 0deg) -  4deg)) scaleX(var(--ms, 1)) skewX( 2deg); }
}

/* Staggered animation per strand */
.animar .melena .m1 { --mr:  8deg; --ms: 0.75; animation: mane-wave var(--speed) ease-in-out 0.00s infinite; -webkit-animation: mane-wave var(--speed) ease-in-out 0.00s infinite; }
.animar .melena .m2 { --mr:  4deg; --ms: 0.85; animation: mane-wave var(--speed) ease-in-out 0.10s infinite; -webkit-animation: mane-wave var(--speed) ease-in-out 0.10s infinite; }
.animar .melena .m3 { --mr:  0deg; --ms: 0.92; animation: mane-wave var(--speed) ease-in-out 0.20s infinite; -webkit-animation: mane-wave var(--speed) ease-in-out 0.20s infinite; }
.animar .melena .m4 { --mr: -4deg; --ms: 0.96; animation: mane-wave var(--speed) ease-in-out 0.30s infinite; -webkit-animation: mane-wave var(--speed) ease-in-out 0.30s infinite; }
.animar .melena .m5 { --mr: -7deg; --ms: 1.00; animation: mane-wave var(--speed) ease-in-out 0.40s infinite; -webkit-animation: mane-wave var(--speed) ease-in-out 0.40s infinite; }
.animar .melena .m6 { --mr:-10deg; --ms: 1.05; animation: mane-wave var(--speed) ease-in-out 0.50s infinite; -webkit-animation: mane-wave var(--speed) ease-in-out 0.50s infinite; }

/* ================

   FRONT LEG

   ================ */
.pata-delantera {
    --part-width: 15%;
    --part-height: 60%;
    --part-x: 20%;
    --part-y: 40%;
    --part-origin: 100% 50%;
    border: none;
}

.pata-delantera.derecha {
    --color-horse: var(--color-horse-back);
    --delay: calc(0s - var(--speed) / var(--delay-gap));
}

.pata-delantera .hombro {
    --shape-x: 20%;
    --shape-width: 80%;
    --shape-height: 35%;
    --shape-origin: 100% 50%;
    --shape-radius: 30% 30% 30% 50%;
    --shape-rotate: -0deg;
}

.pata-delantera .superior {
    --shape-x: 40%;
    --shape-y: 60%;
    --shape-width: 40%;
    --shape-height: 80%;
    --shape-origin: 40% 10%;
    --shape-radius: 30% 30% 50% 50%;
    --shape-rotate: 0deg;
}

.pata-delantera .superior:before {
    content: '';
    --shape-x: 5%;
    --shape-radius: 20%;
    --shape-rotate: 0deg;
}

.pata-delantera .superior:after {
    content: '';
    --shape-x: 40%;
    --shape-y: 60%;
    --shape-height: 78%;
    --shape-radius: 40%;
    --shape-rotate: 5deg;
}

.pata-delantera .rodilla {
    --shape-x: 0%;
    --shape-y: 120%;
    --shape-width: 77.0%;
    --shape-height: 55%;
    --shape-radius: 45%;
    --shape-origin: 40% 20%;
    --shape-rotate: -0deg;
}

.pata-delantera .rodilla:before {
    content: '';
    --shape-x: 0%;
    --shape-y: 60%;
    --shape-width: 34.5%;
    --shape-height: 40%;
    --shape-radius: 30%;
    --shape-rotate: 0deg;
}

.pata-delantera .inferior {
    --shape-x: 0%;
    --shape-y: 80%;
    --shape-width: 62.1%;
    --shape-height: 120%;
    --shape-radius: 5%;
    --shape-rotate: 12deg;
}

.pata-delantera .tobillo {
    --shape-x: -20%;
    --shape-y: 80%;
    --shape-width: 195.5%;
    --shape-height: 45%;
    --shape-radius: 50%;
    --shape-rotate: 20deg;
}

.pata-delantera .pie {
    --shape-x: -35%;
    --shape-y: 65%;
    --shape-width: 120%;
    --shape-height: 200%;
    --shape-radius: 0%;
    --shape-rotate: 30deg;
    -webkit-clip-path: polygon(0% 0%, 80% 0%, 65% 20%, 63% 30%, 70% 45%, 75% 55%, 46% 90%, 35% 95%, 10% 70%, 5% 50%, 10% 25%);
    clip-path: polygon(0% 0%, 80% 0%, 65% 20%, 63% 30%, 70% 45%, 75% 55%, 46% 90%, 35% 95%, 10% 70%, 5% 50%, 10% 25%);
}

.pata-delantera .pezuna {
    --shape-x: 40%;
    --shape-y: 52%;
    --shape-width: 100%;
    --shape-height: 35.0%;
    --shape-radius: 0%;
    --shape-rotate: 45deg;
    background-color: var(--color-hoof);
    background-color: var(--color-horse) !important;
}

/* ================

   BACK LEG

   ================ */
.pata-trasera {
    --part-width: 20%;
    --part-height: 70%;
    --part-x: 60%;
    --part-y: 30%;
    --part-origin: 100% 50%;
    border: none;
}

.pata-trasera.derecha {
    --color-horse: var(--color-horse-back);
    --delay: calc(0s - var(--speed) / var(--delay-gap));
}

.pata-trasera .parte-superior {
    --shape-height: 20%;
    --shape-width: 75%;
    --shape-radius: 45%;
    --shape-rotate: 25deg;
    --shape-x: -8%;
    background-color: transparent;
}

.pata-trasera .parte-superior:after {
    content: '';
    --shape-height: 140%;
    --shape-width: 40%;
    --shape-radius: 50% / 30%;
    --shape-rotate: -19deg;
    --shape-x: 55%;
    --shape-y: 20%;
    --shape-origin: 50% 10%;
}

.pata-trasera .parte-superior:before {
    content: '';
    --shape-height: 150%;
    --shape-width: 80%;
    --shape-radius: 50% / 60%;
    --shape-rotate: -60deg;
    --shape-x: 24%;
    --shape-y: 58%;
}

.pata-trasera .muslo {
    --shape-height: 140%;
    --shape-width: 28%;
    --shape-radius: 45% / 20%;
    --shape-rotate: -95deg;
    --shape-x: 75%;
    --shape-y: 172%;
    --shape-origin: 50% 0%;
}

.pata-trasera .muslo:before {
    content: '';
    --shape-height: 80%;
    --shape-width: 70%;
    --shape-radius: 50%;
    --shape-rotate: -15deg;
    --shape-x: -66%;
    --shape-y: -10%;
    --shape-origin: 50% 0%;
}

.pata-trasera .muslo:after {
    content: '';
    --shape-height: 40%;
    --shape-width: 50%;
    --shape-radius: 50%;
    --shape-rotate: 20deg;
    --shape-x: 110%;
    --shape-y: 23%;
    --shape-origin: 50% 50%;
    background-color: transparent;
    box-shadow: -1.2% 0.5% 0 0 var(--color-horse);
}

.pata-trasera .pierna-inferior {
    --shape-height: 100%;
    --shape-width: 69.0%;
    --shape-radius: 50% / 10%;
    --shape-rotate: 47deg;
    --shape-x: 80%;
    --shape-y: 88%;
    --shape-origin: 50% 0%;
}

.pata-trasera .pierna-inferior:after {
    content: '';
    --shape-height: 60%;
    --shape-width: 218.5%;
    --shape-radius: 50%;
    --shape-rotate: -25deg;
    --shape-x: -155%;
    --shape-y: 8%;
    --shape-origin: 50% 50%;
    background-color: transparent;
    box-shadow: 0.045em 0.006em 0 0 var(--color-horse);
}

.pata-trasera .pie {
    --shape-x: -120%;
    --shape-y: 100%;
    --shape-width: 180%;
    --shape-height: 60%;
    --shape-radius: 0%;
    --shape-rotate: -70deg;
    -webkit-clip-path: polygon(90% 0%, 95% 10%, 100% 20%, 100% 30%, 60% 45%, 60% 55%, 70% 62%, 80% 65%, 80% 70%, 15% 95%, 10% 50%, 15% 25%, 30% 10%, 70% 0%);
    clip-path: polygon(90% 0%, 95% 10%, 100% 20%, 100% 30%, 60% 45%, 60% 55%, 70% 62%, 80% 65%, 80% 70%, 15% 95%, 10% 50%, 15% 25%, 30% 10%, 70% 0%);
}

.pata-trasera .pezuna {
    --shape-x: -10%;
    --shape-y: 65%;
    --shape-width: 100%;
    --shape-height: 100%;
    --shape-radius: 0%;
    --shape-rotate: -5deg;
    background-color: var(--color-hoof);
    background-color: var(--color-horse) !important;
}

/* ================

   ANIMATIONS

   ================ */
@-webkit-keyframes body {

    0%,
    100% {
        -webkit-transform: rotate(8deg) translatex(2%) translatey(-5%);
        transform: rotate(8deg) translatex(2%) translatey(-5%);
    }

    9% {
        -webkit-transform: rotate(4deg) translatex(2%) translatey(0%);
        transform: rotate(4deg) translatex(2%) translatey(0%);
    }

    18.1% {
        -webkit-transform: rotate(1deg) translatex(0%) translatey(5%);
        transform: rotate(1deg) translatex(0%) translatey(5%);
    }

    27.2% {
        -webkit-transform: rotate(1deg) translatex(2%) translatey(0%) scaleX(0.92);
        transform: rotate(1deg) translatex(2%) translatey(0%) scaleX(0.92);
    }

    36.3% {
        -webkit-transform: rotate(0deg) translatex(2%) translatey(-2%) scaleX(0.9);
        transform: rotate(0deg) translatex(2%) translatey(-2%) scaleX(0.9);
    }

    45.4% {
        -webkit-transform: rotate(2deg) translatex(2%) translatey(-3%) scaleX(0.9);
        transform: rotate(2deg) translatex(2%) translatey(-3%) scaleX(0.9);
    }

    54.5% {
        -webkit-transform: rotate(3deg) translatex(2%) translatey(-5%) scaleX(0.9);
        transform: rotate(3deg) translatex(2%) translatey(-5%) scaleX(0.9);
    }

    63.6% {
        -webkit-transform: rotate(4deg) translatex(0%) translatey(-4%) scaleX(0.9);
        transform: rotate(4deg) translatex(0%) translatey(-4%) scaleX(0.9);
    }

    72.7% {
        -webkit-transform: rotate(4.5deg) translatex(0%) translatey(-3%) scaleX(0.95);
        transform: rotate(4.5deg) translatex(0%) translatey(-3%) scaleX(0.95);
    }

    81.8% {
        -webkit-transform: rotate(6.5deg) translatex(0%) translatey(-5%) scaleX(0.95);
        transform: rotate(6.5deg) translatex(0%) translatey(-5%) scaleX(0.95);
    }

    90.9% {
        -webkit-transform: rotate(10deg) translatex(0%) translatey(-14%) scaleX(1);
        transform: rotate(10deg) translatex(0%) translatey(-14%) scaleX(1);
    }
}

@keyframes body {

    0%,
    100% {
        -webkit-transform: rotate(8deg) translatex(2%) translatey(-5%);
        transform: rotate(8deg) translatex(2%) translatey(-5%);
    }

    9% {
        -webkit-transform: rotate(4deg) translatex(2%) translatey(0%);
        transform: rotate(4deg) translatex(2%) translatey(0%);
    }

    18.1% {
        -webkit-transform: rotate(1deg) translatex(0%) translatey(5%);
        transform: rotate(1deg) translatex(0%) translatey(5%);
    }

    27.2% {
        -webkit-transform: rotate(1deg) translatex(2%) translatey(0%) scaleX(0.92);
        transform: rotate(1deg) translatex(2%) translatey(0%) scaleX(0.92);
    }

    36.3% {
        -webkit-transform: rotate(0deg) translatex(2%) translatey(-2%) scaleX(0.9);
        transform: rotate(0deg) translatex(2%) translatey(-2%) scaleX(0.9);
    }

    45.4% {
        -webkit-transform: rotate(2deg) translatex(2%) translatey(-3%) scaleX(0.9);
        transform: rotate(2deg) translatex(2%) translatey(-3%) scaleX(0.9);
    }

    54.5% {
        -webkit-transform: rotate(3deg) translatex(2%) translatey(-5%) scaleX(0.9);
        transform: rotate(3deg) translatex(2%) translatey(-5%) scaleX(0.9);
    }

    63.6% {
        -webkit-transform: rotate(4deg) translatex(0%) translatey(-4%) scaleX(0.9);
        transform: rotate(4deg) translatex(0%) translatey(-4%) scaleX(0.9);
    }

    72.7% {
        -webkit-transform: rotate(4.5deg) translatex(0%) translatey(-3%) scaleX(0.95);
        transform: rotate(4.5deg) translatex(0%) translatey(-3%) scaleX(0.95);
    }

    81.8% {
        -webkit-transform: rotate(6.5deg) translatex(0%) translatey(-5%) scaleX(0.95);
        transform: rotate(6.5deg) translatex(0%) translatey(-5%) scaleX(0.95);
    }

    90.9% {
        -webkit-transform: rotate(10deg) translatex(0%) translatey(-14%) scaleX(1);
        transform: rotate(10deg) translatex(0%) translatey(-14%) scaleX(1);
    }
}

.animar .cuerpo {
    -webkit-animation: body var(--speed) linear infinite;
    animation: body var(--speed) linear infinite;
}

@-webkit-keyframes front-shoulder {

    0%,
    100% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(6%);
        transform: rotate(20deg) translatex(0%) translatey(6%);
    }

    8.3% {
        -webkit-transform: rotate(8deg) translatex(-10%) translatey(0%);
        transform: rotate(8deg) translatex(-10%) translatey(0%);
    }

    16.6% {
        -webkit-transform: rotate(0deg) translatex(-12%) translatey(-3%);
        transform: rotate(0deg) translatex(-12%) translatey(-3%);
    }

    24.9% {
        -webkit-transform: rotate(0deg) translatex(10%) translatey(0%);
        transform: rotate(0deg) translatex(10%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(-30deg) translatex(7%) translatey(-12%);
        transform: rotate(-30deg) translatex(7%) translatey(-12%);
    }

    41.6% {
        -webkit-transform: rotate(-30deg) translatex(11%) translatey(-10%);
        transform: rotate(-30deg) translatex(11%) translatey(-10%);
    }

    49.9% {
        -webkit-transform: rotate(-20deg) translatex(10%) translatey(0%);
        transform: rotate(-20deg) translatex(10%) translatey(0%);
    }

    58.3% {
        -webkit-transform: rotate(-10deg) translatex(30%) translatey(-5%);
        transform: rotate(-10deg) translatex(30%) translatey(-5%);
    }

    66.6% {
        -webkit-transform: rotate(15deg) translatex(25%) translatey(5%);
        transform: rotate(15deg) translatex(25%) translatey(5%);
    }

    74.9% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
        transform: rotate(0deg) translatex(0%) translatey(0%);
    }

    83.3% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
        transform: rotate(0deg) translatex(0%) translatey(0%);
    }

    91.6% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }
}

@keyframes front-shoulder {

    0%,
    100% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(6%);
        transform: rotate(20deg) translatex(0%) translatey(6%);
    }

    8.3% {
        -webkit-transform: rotate(8deg) translatex(-10%) translatey(0%);
        transform: rotate(8deg) translatex(-10%) translatey(0%);
    }

    16.6% {
        -webkit-transform: rotate(0deg) translatex(-12%) translatey(-3%);
        transform: rotate(0deg) translatex(-12%) translatey(-3%);
    }

    24.9% {
        -webkit-transform: rotate(0deg) translatex(10%) translatey(0%);
        transform: rotate(0deg) translatex(10%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(-30deg) translatex(7%) translatey(-12%);
        transform: rotate(-30deg) translatex(7%) translatey(-12%);
    }

    41.6% {
        -webkit-transform: rotate(-30deg) translatex(11%) translatey(-10%);
        transform: rotate(-30deg) translatex(11%) translatey(-10%);
    }

    49.9% {
        -webkit-transform: rotate(-20deg) translatex(10%) translatey(0%);
        transform: rotate(-20deg) translatex(10%) translatey(0%);
    }

    58.3% {
        -webkit-transform: rotate(-10deg) translatex(30%) translatey(-5%);
        transform: rotate(-10deg) translatex(30%) translatey(-5%);
    }

    66.6% {
        -webkit-transform: rotate(15deg) translatex(25%) translatey(5%);
        transform: rotate(15deg) translatex(25%) translatey(5%);
    }

    74.9% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
        transform: rotate(0deg) translatex(0%) translatey(0%);
    }

    83.3% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
        transform: rotate(0deg) translatex(0%) translatey(0%);
    }

    91.6% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }
}

.animar .pata-delantera .hombro {
    -webkit-animation: front-shoulder var(--speed) linear infinite;
    animation: front-shoulder var(--speed) linear infinite;
}

@-webkit-keyframes front-upper {

    0%,
    100% {
        -webkit-transform: rotate(50deg) translatex(30%) translatey(8%);
        transform: rotate(50deg) translatex(30%) translatey(8%);
    }

    8.3% {
        -webkit-transform: rotate(45deg) translatex(40%) translatey(10%);
        transform: rotate(45deg) translatex(40%) translatey(10%);
    }

    16.6% {
        -webkit-transform: rotate(33deg) translatex(25%) translatey(10%);
        transform: rotate(33deg) translatex(25%) translatey(10%);
    }

    24.9% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
        transform: rotate(0deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(18deg) translatex(7%) translatey(10%);
        transform: rotate(18deg) translatex(7%) translatey(10%);
    }

    41.6% {
        -webkit-transform: rotate(-8deg) translatex(-30%) translatey(15%);
        transform: rotate(-8deg) translatex(-30%) translatey(15%);
    }

    49.9% {
        -webkit-transform: rotate(-4deg) translatex(-20%) translatey(10%);
        transform: rotate(-4deg) translatex(-20%) translatey(10%);
    }

    58.3% {
        -webkit-transform: rotate(20deg) translatex(17%) translatey(10%);
        transform: rotate(20deg) translatex(17%) translatey(10%);
    }

    66.6% {
        -webkit-transform: rotate(30deg) translatex(20%) translatey(-10%);
        transform: rotate(30deg) translatex(20%) translatey(-10%);
    }

    74.9% {
        -webkit-transform: rotate(75deg) translatex(40%) translatey(-15%);
        transform: rotate(75deg) translatex(40%) translatey(-15%);
    }

    83.3% {
        -webkit-transform: rotate(85deg) translatex(15%) translatey(-10%);
        transform: rotate(85deg) translatex(15%) translatey(-10%);
    }

    91.6% {
        -webkit-transform: rotate(55deg) translatex(25%) translatey(-5%);
        transform: rotate(55deg) translatex(25%) translatey(-5%);
    }
}

@keyframes front-upper {

    0%,
    100% {
        -webkit-transform: rotate(50deg) translatex(30%) translatey(8%);
        transform: rotate(50deg) translatex(30%) translatey(8%);
    }

    8.3% {
        -webkit-transform: rotate(45deg) translatex(40%) translatey(10%);
        transform: rotate(45deg) translatex(40%) translatey(10%);
    }

    16.6% {
        -webkit-transform: rotate(33deg) translatex(25%) translatey(10%);
        transform: rotate(33deg) translatex(25%) translatey(10%);
    }

    24.9% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
        transform: rotate(0deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(18deg) translatex(7%) translatey(10%);
        transform: rotate(18deg) translatex(7%) translatey(10%);
    }

    41.6% {
        -webkit-transform: rotate(-8deg) translatex(-30%) translatey(15%);
        transform: rotate(-8deg) translatex(-30%) translatey(15%);
    }

    49.9% {
        -webkit-transform: rotate(-4deg) translatex(-20%) translatey(10%);
        transform: rotate(-4deg) translatex(-20%) translatey(10%);
    }

    58.3% {
        -webkit-transform: rotate(20deg) translatex(17%) translatey(10%);
        transform: rotate(20deg) translatex(17%) translatey(10%);
    }

    66.6% {
        -webkit-transform: rotate(30deg) translatex(20%) translatey(-10%);
        transform: rotate(30deg) translatex(20%) translatey(-10%);
    }

    74.9% {
        -webkit-transform: rotate(75deg) translatex(40%) translatey(-15%);
        transform: rotate(75deg) translatex(40%) translatey(-15%);
    }

    83.3% {
        -webkit-transform: rotate(85deg) translatex(15%) translatey(-10%);
        transform: rotate(85deg) translatex(15%) translatey(-10%);
    }

    91.6% {
        -webkit-transform: rotate(55deg) translatex(25%) translatey(-5%);
        transform: rotate(55deg) translatex(25%) translatey(-5%);
    }
}

.animar .pata-delantera .superior {
    -webkit-animation: front-upper var(--speed) linear infinite;
    animation: front-upper var(--speed) linear infinite;
}

@-webkit-keyframes front-knee {

    0%,
    100% {
        -webkit-transform: rotate(-15deg) translatex(0%) translatey(0%);
        transform: rotate(-15deg) translatex(0%) translatey(0%);
    }

    8.3% {
        -webkit-transform: rotate(-10deg) translatex(0%) translatey(0%);
        transform: rotate(-10deg) translatex(0%) translatey(0%);
    }

    16.6% {
        -webkit-transform: rotate(-12deg) translatex(0%) translatey(0%);
        transform: rotate(-12deg) translatex(0%) translatey(0%);
    }

    24.9% {
        -webkit-transform: rotate(-20deg) translatex(0%) translatey(0%);
        transform: rotate(-20deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(-55deg) translatex(-25%) translatey(10%);
        transform: rotate(-55deg) translatex(-25%) translatey(10%);
    }

    41.6% {
        -webkit-transform: rotate(-35deg) translatex(0%) translatey(-10%);
        transform: rotate(-35deg) translatex(0%) translatey(-10%);
    }

    49.9% {
        -webkit-transform: rotate(-28deg) translatex(0%) translatey(0%);
        transform: rotate(-28deg) translatex(0%) translatey(0%);
    }

    58.3% {
        -webkit-transform: rotate(-90deg) translatex(-22%) translatey(0%);
        transform: rotate(-90deg) translatex(-22%) translatey(0%);
    }

    66.6% {
        -webkit-transform: rotate(-95deg) translatex(-30%) translatey(0%);
        transform: rotate(-95deg) translatex(-30%) translatey(0%);
    }

    74.9% {
        -webkit-transform: rotate(-98deg) translatex(-10%) translatey(0%);
        transform: rotate(-98deg) translatex(-10%) translatey(0%);
    }

    83.3% {
        -webkit-transform: rotate(-80deg) translatex(-20%) translatey(8%);
        transform: rotate(-80deg) translatex(-20%) translatey(8%);
    }

    91.6% {
        -webkit-transform: rotate(-50deg) translatex(-30%) translatey(10%);
        transform: rotate(-50deg) translatex(-30%) translatey(10%);
    }
}

@keyframes front-knee {

    0%,
    100% {
        -webkit-transform: rotate(-15deg) translatex(0%) translatey(0%);
        transform: rotate(-15deg) translatex(0%) translatey(0%);
    }

    8.3% {
        -webkit-transform: rotate(-10deg) translatex(0%) translatey(0%);
        transform: rotate(-10deg) translatex(0%) translatey(0%);
    }

    16.6% {
        -webkit-transform: rotate(-12deg) translatex(0%) translatey(0%);
        transform: rotate(-12deg) translatex(0%) translatey(0%);
    }

    24.9% {
        -webkit-transform: rotate(-20deg) translatex(0%) translatey(0%);
        transform: rotate(-20deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(-55deg) translatex(-25%) translatey(10%);
        transform: rotate(-55deg) translatex(-25%) translatey(10%);
    }

    41.6% {
        -webkit-transform: rotate(-35deg) translatex(0%) translatey(-10%);
        transform: rotate(-35deg) translatex(0%) translatey(-10%);
    }

    49.9% {
        -webkit-transform: rotate(-28deg) translatex(0%) translatey(0%);
        transform: rotate(-28deg) translatex(0%) translatey(0%);
    }

    58.3% {
        -webkit-transform: rotate(-90deg) translatex(-22%) translatey(0%);
        transform: rotate(-90deg) translatex(-22%) translatey(0%);
    }

    66.6% {
        -webkit-transform: rotate(-95deg) translatex(-30%) translatey(0%);
        transform: rotate(-95deg) translatex(-30%) translatey(0%);
    }

    74.9% {
        -webkit-transform: rotate(-98deg) translatex(-10%) translatey(0%);
        transform: rotate(-98deg) translatex(-10%) translatey(0%);
    }

    83.3% {
        -webkit-transform: rotate(-80deg) translatex(-20%) translatey(8%);
        transform: rotate(-80deg) translatex(-20%) translatey(8%);
    }

    91.6% {
        -webkit-transform: rotate(-50deg) translatex(-30%) translatey(10%);
        transform: rotate(-50deg) translatex(-30%) translatey(10%);
    }
}

.animar .pata-delantera .rodilla {
    -webkit-animation: front-knee var(--speed) linear infinite;
    animation: front-knee var(--speed) linear infinite;
}

@-webkit-keyframes front-lower {

    0%,
    100% {
        -webkit-transform: rotate(-25deg) translatex(20%) translatey(0%);
        transform: rotate(-25deg) translatex(20%) translatey(0%);
    }

    8.3% {
        -webkit-transform: rotate(10deg) translatex(0%) translatey(-10%);
        transform: rotate(10deg) translatex(0%) translatey(-10%);
    }

    16.6% {
        -webkit-transform: rotate(10deg) translatex(0%) translatey(0%);
        transform: rotate(10deg) translatex(0%) translatey(0%);
    }

    24.9% {
        -webkit-transform: rotate(12deg) translatex(0%) translatey(0%);
        transform: rotate(12deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(-12deg) translatex(7%) translatey(-12%);
        transform: rotate(-12deg) translatex(7%) translatey(-12%);
    }

    41.6% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(-10%);
        transform: rotate(0deg) translatex(0%) translatey(-10%);
    }

    49.9% {
        -webkit-transform: rotate(-23deg) translatex(20%) translatey(-20%);
        transform: rotate(-23deg) translatex(20%) translatey(-20%);
    }

    58.3% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(-30%);
        transform: rotate(0deg) translatex(0%) translatey(-30%);
    }

    66.6% {
        -webkit-transform: rotate(-15deg) translatex(30%) translatey(-20%);
        transform: rotate(-15deg) translatex(30%) translatey(-20%);
    }

    74.9% {
        -webkit-transform: rotate(-15deg) translatex(0%) translatey(0%);
        transform: rotate(-15deg) translatex(0%) translatey(0%);
    }

    83.3% {
        -webkit-transform: rotate(-15deg) translatex(15%) translatey(0%);
        transform: rotate(-15deg) translatex(15%) translatey(0%);
    }

    91.6% {
        -webkit-transform: rotate(-10deg) translatex(20%) translatey(-30%);
        transform: rotate(-10deg) translatex(20%) translatey(-30%);
    }
}

@keyframes front-lower {

    0%,
    100% {
        -webkit-transform: rotate(-25deg) translatex(20%) translatey(0%);
        transform: rotate(-25deg) translatex(20%) translatey(0%);
    }

    8.3% {
        -webkit-transform: rotate(10deg) translatex(0%) translatey(-10%);
        transform: rotate(10deg) translatex(0%) translatey(-10%);
    }

    16.6% {
        -webkit-transform: rotate(10deg) translatex(0%) translatey(0%);
        transform: rotate(10deg) translatex(0%) translatey(0%);
    }

    24.9% {
        -webkit-transform: rotate(12deg) translatex(0%) translatey(0%);
        transform: rotate(12deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(-12deg) translatex(7%) translatey(-12%);
        transform: rotate(-12deg) translatex(7%) translatey(-12%);
    }

    41.6% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(-10%);
        transform: rotate(0deg) translatex(0%) translatey(-10%);
    }

    49.9% {
        -webkit-transform: rotate(-23deg) translatex(20%) translatey(-20%);
        transform: rotate(-23deg) translatex(20%) translatey(-20%);
    }

    58.3% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(-30%);
        transform: rotate(0deg) translatex(0%) translatey(-30%);
    }

    66.6% {
        -webkit-transform: rotate(-15deg) translatex(30%) translatey(-20%);
        transform: rotate(-15deg) translatex(30%) translatey(-20%);
    }

    74.9% {
        -webkit-transform: rotate(-15deg) translatex(0%) translatey(0%);
        transform: rotate(-15deg) translatex(0%) translatey(0%);
    }

    83.3% {
        -webkit-transform: rotate(-15deg) translatex(15%) translatey(0%);
        transform: rotate(-15deg) translatex(15%) translatey(0%);
    }

    91.6% {
        -webkit-transform: rotate(-10deg) translatex(20%) translatey(-30%);
        transform: rotate(-10deg) translatex(20%) translatey(-30%);
    }
}

.animar .pata-delantera .inferior {
    -webkit-animation: front-lower var(--speed) linear infinite;
    animation: front-lower var(--speed) linear infinite;
}

@-webkit-keyframes front-ankle {

    0%,
    100% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }

    8.3% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }

    16.6% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }

    24.9% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(15deg) translatex(10%) translatey(0%);
        transform: rotate(15deg) translatex(10%) translatey(0%);
    }

    41.6% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }

    49.9% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
        transform: rotate(0deg) translatex(0%) translatey(0%);
    }

    58.3% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(-20%);
        transform: rotate(0deg) translatex(0%) translatey(-20%);
    }

    66.6% {
        -webkit-transform: rotate(-30deg) translatex(0%) translatey(0%);
        transform: rotate(-30deg) translatex(0%) translatey(0%);
    }

    74.9% {
        -webkit-transform: rotate(-30deg) translatex(0%) translatey(0%);
        transform: rotate(-30deg) translatex(0%) translatey(0%);
    }

    83.3% {
        -webkit-transform: rotate(-10deg) translatex(0%) translatey(-20%);
        transform: rotate(-10deg) translatex(0%) translatey(-20%);
    }

    91.6% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }
}

@keyframes front-ankle {

    0%,
    100% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }

    8.3% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }

    16.6% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }

    24.9% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(15deg) translatex(10%) translatey(0%);
        transform: rotate(15deg) translatex(10%) translatey(0%);
    }

    41.6% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }

    49.9% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
        transform: rotate(0deg) translatex(0%) translatey(0%);
    }

    58.3% {
        -webkit-transform: rotate(0deg) translatex(0%) translatey(-20%);
        transform: rotate(0deg) translatex(0%) translatey(-20%);
    }

    66.6% {
        -webkit-transform: rotate(-30deg) translatex(0%) translatey(0%);
        transform: rotate(-30deg) translatex(0%) translatey(0%);
    }

    74.9% {
        -webkit-transform: rotate(-30deg) translatex(0%) translatey(0%);
        transform: rotate(-30deg) translatex(0%) translatey(0%);
    }

    83.3% {
        -webkit-transform: rotate(-10deg) translatex(0%) translatey(-20%);
        transform: rotate(-10deg) translatex(0%) translatey(-20%);
    }

    91.6% {
        -webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
        transform: rotate(20deg) translatex(0%) translatey(0%);
    }
}

.animar .pata-delantera .tobillo {
    -webkit-animation: front-ankle var(--speed) linear infinite;
    animation: front-ankle var(--speed) linear infinite;
}

@-webkit-keyframes front-foot {

    0%,
    100% {
        -webkit-transform: rotate(-28deg) translatex(40%) translatey(0%);
        transform: rotate(-28deg) translatex(40%) translatey(0%);
    }

    8.3% {
        -webkit-transform: rotate(-15deg) translatex(50%) translatey(0%);
        transform: rotate(-15deg) translatex(50%) translatey(0%);
    }

    16.6% {
        -webkit-transform: rotate(-11deg) translatex(35%) translatey(0%);
        transform: rotate(-11deg) translatex(35%) translatey(0%);
    }

    24.9% {
        -webkit-transform: rotate(50deg) translatex(0%) translatey(0%);
        transform: rotate(50deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(-10deg) translatex(50%) translatey(0%);
        transform: rotate(-10deg) translatex(50%) translatey(0%);
    }

    41.6% {
        -webkit-transform: rotate(-36deg) translatex(50%) translatey(0%);
        transform: rotate(-36deg) translatex(50%) translatey(0%);
    }

    49.9% {
        -webkit-transform: rotate(-30deg) translatex(32%) translatey(0%);
        transform: rotate(-30deg) translatex(32%) translatey(0%);
    }

    58.3% {
        -webkit-transform: rotate(-30deg) translatex(45%) translatey(0%);
        transform: rotate(-30deg) translatex(45%) translatey(0%);
    }

    66.6% {
        -webkit-transform: rotate(-30deg) translatex(50%) translatey(0%);
        transform: rotate(-30deg) translatex(50%) translatey(0%);
    }

    74.9% {
        -webkit-transform: rotate(-30deg) translatex(50%) translatey(0%);
        transform: rotate(-30deg) translatex(50%) translatey(0%);
    }

    83.3% {
        -webkit-transform: rotate(-30deg) translatex(50%) translatey(0%);
        transform: rotate(-30deg) translatex(50%) translatey(0%);
    }

    91.6% {
        -webkit-transform: rotate(-50deg) translatex(50%) translatey(10%);
        transform: rotate(-50deg) translatex(50%) translatey(10%);
    }
}

@keyframes front-foot {

    0%,
    100% {
        -webkit-transform: rotate(-28deg) translatex(40%) translatey(0%);
        transform: rotate(-28deg) translatex(40%) translatey(0%);
    }

    8.3% {
        -webkit-transform: rotate(-15deg) translatex(50%) translatey(0%);
        transform: rotate(-15deg) translatex(50%) translatey(0%);
    }

    16.6% {
        -webkit-transform: rotate(-11deg) translatex(35%) translatey(0%);
        transform: rotate(-11deg) translatex(35%) translatey(0%);
    }

    24.9% {
        -webkit-transform: rotate(50deg) translatex(0%) translatey(0%);
        transform: rotate(50deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(-10deg) translatex(50%) translatey(0%);
        transform: rotate(-10deg) translatex(50%) translatey(0%);
    }

    41.6% {
        -webkit-transform: rotate(-36deg) translatex(50%) translatey(0%);
        transform: rotate(-36deg) translatex(50%) translatey(0%);
    }

    49.9% {
        -webkit-transform: rotate(-30deg) translatex(32%) translatey(0%);
        transform: rotate(-30deg) translatex(32%) translatey(0%);
    }

    58.3% {
        -webkit-transform: rotate(-30deg) translatex(45%) translatey(0%);
        transform: rotate(-30deg) translatex(45%) translatey(0%);
    }

    66.6% {
        -webkit-transform: rotate(-30deg) translatex(50%) translatey(0%);
        transform: rotate(-30deg) translatex(50%) translatey(0%);
    }

    74.9% {
        -webkit-transform: rotate(-30deg) translatex(50%) translatey(0%);
        transform: rotate(-30deg) translatex(50%) translatey(0%);
    }

    83.3% {
        -webkit-transform: rotate(-30deg) translatex(50%) translatey(0%);
        transform: rotate(-30deg) translatex(50%) translatey(0%);
    }

    91.6% {
        -webkit-transform: rotate(-50deg) translatex(50%) translatey(10%);
        transform: rotate(-50deg) translatex(50%) translatey(10%);
    }
}

.animar .pata-delantera .pie {
    -webkit-animation: front-foot var(--speed) linear infinite;
    animation: front-foot var(--speed) linear infinite;
}

@-webkit-keyframes back-top {

    0%,
    100% {
        -webkit-transform: rotate(0deg) translatex(-5%) translatey(50%);
        transform: rotate(0deg) translatex(-5%) translatey(50%);
    }

    8.3% {
        -webkit-transform: rotate(-5deg) translatex(-7%) translatey(38%);
        transform: rotate(-5deg) translatex(-7%) translatey(38%);
    }

    16.6% {
        -webkit-transform: rotate(-10deg) translatex(-14%) translatey(30%);
        transform: rotate(-10deg) translatex(-14%) translatey(30%);
    }

    24.9% {
        -webkit-transform: rotate(25deg) translatex(0%) translatey(10%);
        transform: rotate(25deg) translatex(0%) translatey(10%);
    }

    33.3% {
        -webkit-transform: rotate(32deg) translatex(-18%) translatey(25%);
        transform: rotate(32deg) translatex(-18%) translatey(25%);
    }

    41.6% {
        -webkit-transform: rotate(45deg) translatex(-5%) translatey(20%);
        transform: rotate(45deg) translatex(-5%) translatey(20%);
    }

    49.9% {
        -webkit-transform: rotate(65deg) translatex(10%) translatey(35%);
        transform: rotate(65deg) translatex(10%) translatey(35%);
    }

    58.3% {
        -webkit-transform: rotate(65deg) translatex(10%) translatey(40%);
        transform: rotate(65deg) translatex(10%) translatey(40%);
    }

    66.6% {
        -webkit-transform: rotate(75deg) translatex(20%) translatey(40%);
        transform: rotate(75deg) translatex(20%) translatey(40%);
    }

    74.9% {
        -webkit-transform: rotate(70deg) translatex(20%) translatey(45%);
        transform: rotate(70deg) translatex(20%) translatey(45%);
    }

    83.3% {
        -webkit-transform: rotate(60deg) translatex(25%) translatey(40%);
        transform: rotate(60deg) translatex(25%) translatey(40%);
    }

    91.6% {
        -webkit-transform: rotate(30deg) translatex(10%) translatey(40%);
        transform: rotate(30deg) translatex(10%) translatey(40%);
    }
}

@keyframes back-top {

    0%,
    100% {
        -webkit-transform: rotate(0deg) translatex(-5%) translatey(50%);
        transform: rotate(0deg) translatex(-5%) translatey(50%);
    }

    8.3% {
        -webkit-transform: rotate(-5deg) translatex(-7%) translatey(38%);
        transform: rotate(-5deg) translatex(-7%) translatey(38%);
    }

    16.6% {
        -webkit-transform: rotate(-10deg) translatex(-14%) translatey(30%);
        transform: rotate(-10deg) translatex(-14%) translatey(30%);
    }

    24.9% {
        -webkit-transform: rotate(25deg) translatex(0%) translatey(10%);
        transform: rotate(25deg) translatex(0%) translatey(10%);
    }

    33.3% {
        -webkit-transform: rotate(32deg) translatex(-18%) translatey(25%);
        transform: rotate(32deg) translatex(-18%) translatey(25%);
    }

    41.6% {
        -webkit-transform: rotate(45deg) translatex(-5%) translatey(20%);
        transform: rotate(45deg) translatex(-5%) translatey(20%);
    }

    49.9% {
        -webkit-transform: rotate(65deg) translatex(10%) translatey(35%);
        transform: rotate(65deg) translatex(10%) translatey(35%);
    }

    58.3% {
        -webkit-transform: rotate(65deg) translatex(10%) translatey(40%);
        transform: rotate(65deg) translatex(10%) translatey(40%);
    }

    66.6% {
        -webkit-transform: rotate(75deg) translatex(20%) translatey(40%);
        transform: rotate(75deg) translatex(20%) translatey(40%);
    }

    74.9% {
        -webkit-transform: rotate(70deg) translatex(20%) translatey(45%);
        transform: rotate(70deg) translatex(20%) translatey(45%);
    }

    83.3% {
        -webkit-transform: rotate(60deg) translatex(25%) translatey(40%);
        transform: rotate(60deg) translatex(25%) translatey(40%);
    }

    91.6% {
        -webkit-transform: rotate(30deg) translatex(10%) translatey(40%);
        transform: rotate(30deg) translatex(10%) translatey(40%);
    }
}

.animar .pata-trasera .parte-superior {
    -webkit-animation: back-top var(--speed) linear infinite;
    animation: back-top var(--speed) linear infinite;
}

@-webkit-keyframes back-thigh {

    0%,
    100% {
        -webkit-transform: rotate(-45deg) translatex(-30%) translatey(-10%);
        transform: rotate(-45deg) translatex(-30%) translatey(-10%);
    }

    8.3% {
        -webkit-transform: rotate(-45deg) translatex(-30%) translatey(-8%);
        transform: rotate(-45deg) translatex(-30%) translatey(-8%);
    }

    16.6% {
        -webkit-transform: rotate(-43deg) translatex(-35%) translatey(-10%);
        transform: rotate(-43deg) translatex(-35%) translatey(-10%);
    }

    24.9% {
        -webkit-transform: rotate(-95deg) translatex(0%) translatey(0%);
        transform: rotate(-95deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(-115deg) translatex(0%) translatey(10%);
        transform: rotate(-115deg) translatex(0%) translatey(10%);
    }

    41.6% {
        -webkit-transform: rotate(-130deg) translatex(20%) translatey(-5%);
        transform: rotate(-130deg) translatex(20%) translatey(-5%);
    }

    49.9% {
        -webkit-transform: rotate(-130deg) translatex(10%) translatey(0%);
        transform: rotate(-130deg) translatex(10%) translatey(0%);
    }

    58.3% {
        -webkit-transform: rotate(-90deg) translatex(80%) translatey(-20%);
        transform: rotate(-90deg) translatex(80%) translatey(-20%);
    }

    66.6% {
        -webkit-transform: rotate(-85deg) translatex(0%) translatey(-20%);
        transform: rotate(-85deg) translatex(0%) translatey(-20%);
    }

    74.9% {
        -webkit-transform: rotate(-65deg) translatex(5%) translatey(-10%);
        transform: rotate(-65deg) translatex(5%) translatey(-10%);
    }

    83.3% {
        -webkit-transform: rotate(-65deg) translatex(10%) translatey(-10%);
        transform: rotate(-65deg) translatex(10%) translatey(-10%);
    }

    91.6% {
        -webkit-transform: rotate(-75deg) translatex(-20%) translatey(-15%);
        transform: rotate(-75deg) translatex(-20%) translatey(-15%);
    }
}

@keyframes back-thigh {

    0%,
    100% {
        -webkit-transform: rotate(-45deg) translatex(-30%) translatey(-10%);
        transform: rotate(-45deg) translatex(-30%) translatey(-10%);
    }

    8.3% {
        -webkit-transform: rotate(-45deg) translatex(-30%) translatey(-8%);
        transform: rotate(-45deg) translatex(-30%) translatey(-8%);
    }

    16.6% {
        -webkit-transform: rotate(-43deg) translatex(-35%) translatey(-10%);
        transform: rotate(-43deg) translatex(-35%) translatey(-10%);
    }

    24.9% {
        -webkit-transform: rotate(-95deg) translatex(0%) translatey(0%);
        transform: rotate(-95deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(-115deg) translatex(0%) translatey(10%);
        transform: rotate(-115deg) translatex(0%) translatey(10%);
    }

    41.6% {
        -webkit-transform: rotate(-130deg) translatex(20%) translatey(-5%);
        transform: rotate(-130deg) translatex(20%) translatey(-5%);
    }

    49.9% {
        -webkit-transform: rotate(-130deg) translatex(10%) translatey(0%);
        transform: rotate(-130deg) translatex(10%) translatey(0%);
    }

    58.3% {
        -webkit-transform: rotate(-90deg) translatex(80%) translatey(-20%);
        transform: rotate(-90deg) translatex(80%) translatey(-20%);
    }

    66.6% {
        -webkit-transform: rotate(-85deg) translatex(0%) translatey(-20%);
        transform: rotate(-85deg) translatex(0%) translatey(-20%);
    }

    74.9% {
        -webkit-transform: rotate(-65deg) translatex(5%) translatey(-10%);
        transform: rotate(-65deg) translatex(5%) translatey(-10%);
    }

    83.3% {
        -webkit-transform: rotate(-65deg) translatex(10%) translatey(-10%);
        transform: rotate(-65deg) translatex(10%) translatey(-10%);
    }

    91.6% {
        -webkit-transform: rotate(-75deg) translatex(-20%) translatey(-15%);
        transform: rotate(-75deg) translatex(-20%) translatey(-15%);
    }
}

.animar .pata-trasera .muslo {
    -webkit-animation: back-thigh var(--speed) linear infinite;
    animation: back-thigh var(--speed) linear infinite;
}

@-webkit-keyframes back-lower-leg {

    0%,
    100% {
        -webkit-transform: rotate(40deg) translatex(0%) translatey(0%);
        transform: rotate(40deg) translatex(0%) translatey(0%);
    }

    8.3% {
        -webkit-transform: rotate(30deg) translatex(-30%) translatey(0%);
        transform: rotate(30deg) translatex(-30%) translatey(0%);
    }

    16.6% {
        -webkit-transform: rotate(28deg) translatex(-40%) translatey(0%);
        transform: rotate(28deg) translatex(-40%) translatey(0%);
    }

    24.9% {
        -webkit-transform: rotate(47deg) translatex(0%) translatey(0%);
        transform: rotate(47deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(78deg) translatex(0%) translatey(5%);
        transform: rotate(78deg) translatex(0%) translatey(5%);
    }

    41.6% {
        -webkit-transform: rotate(110deg) translatex(40%) translatey(10%);
        transform: rotate(110deg) translatex(40%) translatey(10%);
    }

    49.9% {
        -webkit-transform: rotate(115deg) translatex(50%) translatey(5%);
        transform: rotate(115deg) translatex(50%) translatey(5%);
    }

    58.3% {
        -webkit-transform: rotate(90deg) translatex(30%) translatey(5%);
        transform: rotate(90deg) translatex(30%) translatey(5%);
    }

    66.6% {
        -webkit-transform: rotate(76deg) translatex(0%) translatey(0%);
        transform: rotate(76deg) translatex(0%) translatey(0%);
    }

    74.9% {
        -webkit-transform: rotate(50deg) translatex(-40%) translatey(-4%);
        transform: rotate(50deg) translatex(-40%) translatey(-4%);
    }

    83.3% {
        -webkit-transform: rotate(40deg) translatex(-20%) translatey(-5%);
        transform: rotate(40deg) translatex(-20%) translatey(-5%);
    }

    91.6% {
        -webkit-transform: rotate(70deg) translatex(0%) translatey(0%);
        transform: rotate(70deg) translatex(0%) translatey(0%);
    }
}

@keyframes back-lower-leg {

    0%,
    100% {
        -webkit-transform: rotate(40deg) translatex(0%) translatey(0%);
        transform: rotate(40deg) translatex(0%) translatey(0%);
    }

    8.3% {
        -webkit-transform: rotate(30deg) translatex(-30%) translatey(0%);
        transform: rotate(30deg) translatex(-30%) translatey(0%);
    }

    16.6% {
        -webkit-transform: rotate(28deg) translatex(-40%) translatey(0%);
        transform: rotate(28deg) translatex(-40%) translatey(0%);
    }

    24.9% {
        -webkit-transform: rotate(47deg) translatex(0%) translatey(0%);
        transform: rotate(47deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(78deg) translatex(0%) translatey(5%);
        transform: rotate(78deg) translatex(0%) translatey(5%);
    }

    41.6% {
        -webkit-transform: rotate(110deg) translatex(40%) translatey(10%);
        transform: rotate(110deg) translatex(40%) translatey(10%);
    }

    49.9% {
        -webkit-transform: rotate(115deg) translatex(50%) translatey(5%);
        transform: rotate(115deg) translatex(50%) translatey(5%);
    }

    58.3% {
        -webkit-transform: rotate(90deg) translatex(30%) translatey(5%);
        transform: rotate(90deg) translatex(30%) translatey(5%);
    }

    66.6% {
        -webkit-transform: rotate(76deg) translatex(0%) translatey(0%);
        transform: rotate(76deg) translatex(0%) translatey(0%);
    }

    74.9% {
        -webkit-transform: rotate(50deg) translatex(-40%) translatey(-4%);
        transform: rotate(50deg) translatex(-40%) translatey(-4%);
    }

    83.3% {
        -webkit-transform: rotate(40deg) translatex(-20%) translatey(-5%);
        transform: rotate(40deg) translatex(-20%) translatey(-5%);
    }

    91.6% {
        -webkit-transform: rotate(70deg) translatex(0%) translatey(0%);
        transform: rotate(70deg) translatex(0%) translatey(0%);
    }
}

.animar .pata-trasera .pierna-inferior {
    -webkit-animation: back-lower-leg var(--speed) linear infinite;
    animation: back-lower-leg var(--speed) linear infinite;
}

@-webkit-keyframes back-foot {

    0%,
    100% {
        -webkit-transform: rotate(40deg) translatex(0%) translatey(-20%);
        transform: rotate(40deg) translatex(0%) translatey(-20%);
    }

    8.3% {
        -webkit-transform: rotate(20deg) translatex(10%) translatey(-20%);
        transform: rotate(20deg) translatex(10%) translatey(-20%);
    }

    16.6% {
        -webkit-transform: rotate(-65deg) translatex(0%) translatey(0%);
        transform: rotate(-65deg) translatex(0%) translatey(0%);
    }

    24.9% {
        -webkit-transform: rotate(-70deg) translatex(0%) translatey(0%);
        transform: rotate(-70deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(-60deg) translatex(20%) translatey(-10%);
        transform: rotate(-60deg) translatex(20%) translatey(-10%);
    }

    41.6% {
        -webkit-transform: rotate(-80deg) translatex(0%) translatey(0%);
        transform: rotate(-80deg) translatex(0%) translatey(0%);
    }

    49.9% {
        -webkit-transform: rotate(-70deg) translatex(0%) translatey(0%);
        transform: rotate(-70deg) translatex(0%) translatey(0%);
    }

    58.3% {
        -webkit-transform: rotate(-60deg) translatex(10%) translatey(-10%);
        transform: rotate(-60deg) translatex(10%) translatey(-10%);
    }

    66.6% {
        -webkit-transform: rotate(-43deg) translatex(20%) translatey(-10%);
        transform: rotate(-43deg) translatex(20%) translatey(-10%);
    }

    74.9% {
        -webkit-transform: rotate(-13deg) translatex(5%) translatey(-10%);
        transform: rotate(-13deg) translatex(5%) translatey(-10%);
    }

    83.3% {
        -webkit-transform: rotate(8deg) translatex(5%) translatey(-15%);
        transform: rotate(8deg) translatex(5%) translatey(-15%);
    }

    91.6% {
        -webkit-transform: rotate(20deg) translatex(15%) translatey(-20%);
        transform: rotate(20deg) translatex(15%) translatey(-20%);
    }
}

@keyframes back-foot {

    0%,
    100% {
        -webkit-transform: rotate(40deg) translatex(0%) translatey(-20%);
        transform: rotate(40deg) translatex(0%) translatey(-20%);
    }

    8.3% {
        -webkit-transform: rotate(20deg) translatex(10%) translatey(-20%);
        transform: rotate(20deg) translatex(10%) translatey(-20%);
    }

    16.6% {
        -webkit-transform: rotate(-65deg) translatex(0%) translatey(0%);
        transform: rotate(-65deg) translatex(0%) translatey(0%);
    }

    24.9% {
        -webkit-transform: rotate(-70deg) translatex(0%) translatey(0%);
        transform: rotate(-70deg) translatex(0%) translatey(0%);
    }

    33.3% {
        -webkit-transform: rotate(-60deg) translatex(20%) translatey(-10%);
        transform: rotate(-60deg) translatex(20%) translatey(-10%);
    }

    41.6% {
        -webkit-transform: rotate(-80deg) translatex(0%) translatey(0%);
        transform: rotate(-80deg) translatex(0%) translatey(0%);
    }

    49.9% {
        -webkit-transform: rotate(-70deg) translatex(0%) translatey(0%);
        transform: rotate(-70deg) translatex(0%) translatey(0%);
    }

    58.3% {
        -webkit-transform: rotate(-60deg) translatex(10%) translatey(-10%);
        transform: rotate(-60deg) translatex(10%) translatey(-10%);
    }

    66.6% {
        -webkit-transform: rotate(-43deg) translatex(20%) translatey(-10%);
        transform: rotate(-43deg) translatex(20%) translatey(-10%);
    }

    74.9% {
        -webkit-transform: rotate(-13deg) translatex(5%) translatey(-10%);
        transform: rotate(-13deg) translatex(5%) translatey(-10%);
    }

    83.3% {
        -webkit-transform: rotate(8deg) translatex(5%) translatey(-15%);
        transform: rotate(8deg) translatex(5%) translatey(-15%);
    }

    91.6% {
        -webkit-transform: rotate(20deg) translatex(15%) translatey(-20%);
        transform: rotate(20deg) translatex(15%) translatey(-20%);
    }
}

.animar .pata-trasera .pie {
    -webkit-animation: back-foot var(--speed) linear infinite;
    animation: back-foot var(--speed) linear infinite;
}

@-webkit-keyframes neck {

    0%,
    100% {
        -webkit-transform: scaleX(1) rotate(40deg) translatex(0%) translatey(-10%);
        transform: scaleX(1) rotate(40deg) translatex(0%) translatey(-10%);
    }

    /* 	8.3% { 	transform: scaleX(1) rotate(40deg) translatex(2%) translatey(-10%); } */
    16.6% {
        -webkit-transform: scaleX(1) rotate(40deg) translatex(6%) translatey(-10%);
        transform: scaleX(1) rotate(40deg) translatex(6%) translatey(-10%);
    }

    /* 	24.9% { transform: scaleX(0.9) rotate(40deg) translatex(5%) translatey(-5%); } */
    33.3% {
        -webkit-transform: scaleX(0.9) rotate(45deg) translatex(3%) translatey(5%);
        transform: scaleX(0.9) rotate(45deg) translatex(3%) translatey(5%);
    }

    /* 	41.6% { transform: scaleX(0.9) rotate(50deg) translatex(3%) translatey(5%); } */
    49.9% {
        -webkit-transform: scaleX(0.85) rotate(45deg) translatex(3%) translatey(-5%);
        transform: scaleX(0.85) rotate(45deg) translatex(3%) translatey(-5%);
    }

    /* 	58.3% { transform: scaleX(0.85) rotate(45deg) translatex(3%) translatey(-10%); } */
    66.6% {
        -webkit-transform: scaleX(0.85) rotate(40deg) translatex(0%) translatey(-15%);
        transform: scaleX(0.85) rotate(40deg) translatex(0%) translatey(-15%);
    }

    /* 	74.9% { transform: scaleX(0.9) rotate(34deg) translatex(0%) translatey(-15%); } */
    83.3% {
        -webkit-transform: scaleX(1) rotate(35deg) translatex(0%) translatey(-15%);
        transform: scaleX(1) rotate(35deg) translatex(0%) translatey(-15%);
    }

    /* 	91.6% { transform: scaleX(1) rotate(35deg) translatex(0%) translatey(-10%); } */
}

@keyframes neck {

    0%,
    100% {
        -webkit-transform: scaleX(1) rotate(40deg) translatex(0%) translatey(-10%);
        transform: scaleX(1) rotate(40deg) translatex(0%) translatey(-10%);
    }

    /* 	8.3% { 	transform: scaleX(1) rotate(40deg) translatex(2%) translatey(-10%); } */
    16.6% {
        -webkit-transform: scaleX(1) rotate(40deg) translatex(6%) translatey(-10%);
        transform: scaleX(1) rotate(40deg) translatex(6%) translatey(-10%);
    }

    /* 	24.9% { transform: scaleX(0.9) rotate(40deg) translatex(5%) translatey(-5%); } */
    33.3% {
        -webkit-transform: scaleX(0.9) rotate(45deg) translatex(3%) translatey(5%);
        transform: scaleX(0.9) rotate(45deg) translatex(3%) translatey(5%);
    }

    /* 	41.6% { transform: scaleX(0.9) rotate(50deg) translatex(3%) translatey(5%); } */
    49.9% {
        -webkit-transform: scaleX(0.85) rotate(45deg) translatex(3%) translatey(-5%);
        transform: scaleX(0.85) rotate(45deg) translatex(3%) translatey(-5%);
    }

    /* 	58.3% { transform: scaleX(0.85) rotate(45deg) translatex(3%) translatey(-10%); } */
    66.6% {
        -webkit-transform: scaleX(0.85) rotate(40deg) translatex(0%) translatey(-15%);
        transform: scaleX(0.85) rotate(40deg) translatex(0%) translatey(-15%);
    }

    /* 	74.9% { transform: scaleX(0.9) rotate(34deg) translatex(0%) translatey(-15%); } */
    83.3% {
        -webkit-transform: scaleX(1) rotate(35deg) translatex(0%) translatey(-15%);
        transform: scaleX(1) rotate(35deg) translatex(0%) translatey(-15%);
    }

    /* 	91.6% { transform: scaleX(1) rotate(35deg) translatex(0%) translatey(-10%); } */
}

.animar .cuello {
    -webkit-animation: neck var(--speed) linear infinite;
    animation: neck var(--speed) linear infinite;
}

@-webkit-keyframes head {

    0%,
    100% {
        -webkit-transform: rotate(-45deg) translatex(-5%) translatey(10%);
        transform: rotate(-45deg) translatex(-5%) translatey(10%);
    }

    /* 	8.3% { 	transform: rotate(-45deg) translatex(-5%) translatey(12%); } */
    16.6% {
        -webkit-transform: rotate(-45deg) translatex(0%) translatey(15%);
        transform: rotate(-45deg) translatex(0%) translatey(15%);
    }

    /* 	24.9% { transform: rotate(-43deg) translatex(0%) translatey(20%); } */
    33.3% {
        -webkit-transform: rotate(-40deg) translatex(5%) translatey(23%);
        transform: rotate(-40deg) translatex(5%) translatey(23%);
    }

    /* 	41.6% { transform: rotate(-40deg) translatex(10%) translatey(23%); } */
    49.9% {
        -webkit-transform: rotate(-36deg) translatex(15%) translatey(35%);
        transform: rotate(-36deg) translatex(15%) translatey(35%);
    }

    /* 	58.3% { transform: rotate(-38deg) translatex(18%) translatey(45%); } */
    66.6% {
        -webkit-transform: rotate(-42deg) translatex(5%) translatey(35%);
        transform: rotate(-42deg) translatex(5%) translatey(35%);
    }

    /* 	74.9% { transform: rotate(-45deg) translatex(-5%) translatey(22%); } */
    83.3% {
        -webkit-transform: rotate(-45deg) translatex(-15%) translatey(10%);
        transform: rotate(-45deg) translatex(-15%) translatey(10%);
    }

    /* 	91.6% { transform: rotate(-50deg) translatex(-15%) translatey(0%); } */
}

@keyframes head {

    0%,
    100% {
        -webkit-transform: rotate(-45deg) translatex(-5%) translatey(10%);
        transform: rotate(-45deg) translatex(-5%) translatey(10%);
    }

    /* 	8.3% { 	transform: rotate(-45deg) translatex(-5%) translatey(12%); } */
    16.6% {
        -webkit-transform: rotate(-45deg) translatex(0%) translatey(15%);
        transform: rotate(-45deg) translatex(0%) translatey(15%);
    }

    /* 	24.9% { transform: rotate(-43deg) translatex(0%) translatey(20%); } */
    33.3% {
        -webkit-transform: rotate(-40deg) translatex(5%) translatey(23%);
        transform: rotate(-40deg) translatex(5%) translatey(23%);
    }

    /* 	41.6% { transform: rotate(-40deg) translatex(10%) translatey(23%); } */
    49.9% {
        -webkit-transform: rotate(-36deg) translatex(15%) translatey(35%);
        transform: rotate(-36deg) translatex(15%) translatey(35%);
    }

    /* 	58.3% { transform: rotate(-38deg) translatex(18%) translatey(45%); } */
    66.6% {
        -webkit-transform: rotate(-42deg) translatex(5%) translatey(35%);
        transform: rotate(-42deg) translatex(5%) translatey(35%);
    }

    /* 	74.9% { transform: rotate(-45deg) translatex(-5%) translatey(22%); } */
    83.3% {
        -webkit-transform: rotate(-45deg) translatex(-15%) translatey(10%);
        transform: rotate(-45deg) translatex(-15%) translatey(10%);
    }

    /* 	91.6% { transform: rotate(-50deg) translatex(-15%) translatey(0%); } */
}

.animar .cabeza {
    -webkit-animation: head var(--speed) linear infinite;
    animation: head var(--speed) linear infinite;
}

@-webkit-keyframes ear {

    0%,
    100% {
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
    }

    /* 	8.3% { 	transform: rotate(28deg); } */
    16.6% {
        -webkit-transform: rotate(28deg);
        transform: rotate(28deg);
    }

    /* 	24.9% { transform: rotate(20deg); } */
    33.3% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    /* 	41.6% { transform: rotate(30deg); } */
    49.9% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    /* 	58.3% { transform: rotate(30deg); } */
    66.6% {
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }

    /* 	74.9% { transform: rotate(35deg); } */
    83.3% {
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }

    /* 	91.6% { transform: rotate(20deg); } */
}

@keyframes ear {

    0%,
    100% {
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
    }

    /* 	8.3% { 	transform: rotate(28deg); } */
    16.6% {
        -webkit-transform: rotate(28deg);
        transform: rotate(28deg);
    }

    /* 	24.9% { transform: rotate(20deg); } */
    33.3% {
        -webkit-transform: rotate(24deg);
        transform: rotate(24deg);
    }

    /* 	41.6% { transform: rotate(30deg); } */
    49.9% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    /* 	58.3% { transform: rotate(30deg); } */
    66.6% {
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }

    /* 	74.9% { transform: rotate(35deg); } */
    83.3% {
        -webkit-transform: rotate(35deg);
        transform: rotate(35deg);
    }

    /* 	91.6% { transform: rotate(20deg); } */
}

.animar .oreja {
    -webkit-animation: ear var(--speed) linear infinite;
    animation: ear var(--speed) linear infinite;
}

@-webkit-keyframes tail {

    0%,
    100% {
        -webkit-transform: rotate(-10deg) translatex(-5%) translatey(38%);
        transform: rotate(-10deg) translatex(-5%) translatey(38%);
    }

    /* 	8.3% { 	transform: rotate(-3deg) translatex(-5%) translatey(38%); } */
    16.6% {
        -webkit-transform: rotate(-10deg) translatex(-5%) translatey(28%);
        transform: rotate(-10deg) translatex(-5%) translatey(28%);
    }

    /* 	24.9% { transform: rotate(20deg) translatex(-5%) translatey(10%); } */
    33.3% {
        -webkit-transform: rotate(-10deg) translatex(-10%) translatey(10%);
        transform: rotate(-10deg) translatex(-10%) translatey(10%);
    }

    /* 	41.6% { transform: rotate(20deg) translatex(-10%) translatey(10%); } */
    49.9% {
        -webkit-transform: rotate(-10deg) translatex(-10%) translatey(10%);
        transform: rotate(-10deg) translatex(-10%) translatey(10%);
    }

    /* 	58.3% { transform: rotate(20deg) translatex(-13%) translatey(14%); } */
    66.6% {
        -webkit-transform: rotate(-10deg) translatex(-10%) translatey(18%);
        transform: rotate(-10deg) translatex(-10%) translatey(18%);
    }

    /* 	74.9% { transform: rotate(15deg) translatex(-13%) translatey(18%); } */
    83.3% {
        -webkit-transform: rotate(-10deg) translatex(-10%) translatey(25%);
        transform: rotate(-10deg) translatex(-10%) translatey(25%);
    }

    /* 	91.6% { transform: rotate(0deg) translatex(-5%) translatey(38%); } */
}

@keyframes tail {

    0%,
    100% {
        -webkit-transform: rotate(-10deg) translatex(-5%) translatey(38%);
        transform: rotate(-10deg) translatex(-5%) translatey(38%);
    }

    /* 	8.3% { 	transform: rotate(-3deg) translatex(-5%) translatey(38%); } */
    16.6% {
        -webkit-transform: rotate(-10deg) translatex(-5%) translatey(28%);
        transform: rotate(-10deg) translatex(-5%) translatey(28%);
    }

    /* 	24.9% { transform: rotate(20deg) translatex(-5%) translatey(10%); } */
    33.3% {
        -webkit-transform: rotate(-10deg) translatex(-10%) translatey(10%);
        transform: rotate(-10deg) translatex(-10%) translatey(10%);
    }

    /* 	41.6% { transform: rotate(20deg) translatex(-10%) translatey(10%); } */
    49.9% {
        -webkit-transform: rotate(-10deg) translatex(-10%) translatey(10%);
        transform: rotate(-10deg) translatex(-10%) translatey(10%);
    }

    /* 	58.3% { transform: rotate(20deg) translatex(-13%) translatey(14%); } */
    66.6% {
        -webkit-transform: rotate(-10deg) translatex(-10%) translatey(18%);
        transform: rotate(-10deg) translatex(-10%) translatey(18%);
    }

    /* 	74.9% { transform: rotate(15deg) translatex(-13%) translatey(18%); } */
    83.3% {
        -webkit-transform: rotate(-10deg) translatex(-10%) translatey(25%);
        transform: rotate(-10deg) translatex(-10%) translatey(25%);
    }

    /* 	91.6% { transform: rotate(0deg) translatex(-5%) translatey(38%); } */
}

.animar .cola {
    -webkit-animation: tail var(--speed) linear infinite;
    animation: tail var(--speed) linear infinite;
}

@-webkit-keyframes tail-section-1 {

    0%,
    100% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    /* 	8.3% { 	transform: rotate(15deg); } */
    16.6% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    /* 	24.9% { transform: rotate(10deg); } */
    33.3% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg);
    }

    /* 	41.6% { transform: rotate(0deg); } */
    49.9% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    /* 	58.3% { transform: rotate(0deg); } */
    66.6% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    /* 	74.9% { transform: rotate(0deg); } */
    83.3% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    /* 	91.6% { transform: rotate(5deg); } */
}

@keyframes tail-section-1 {

    0%,
    100% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    /* 	8.3% { 	transform: rotate(15deg); } */
    16.6% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    /* 	24.9% { transform: rotate(10deg); } */
    33.3% {
        -webkit-transform: rotate(12deg);
        transform: rotate(12deg);
    }

    /* 	41.6% { transform: rotate(0deg); } */
    49.9% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    /* 	58.3% { transform: rotate(0deg); } */
    66.6% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    /* 	74.9% { transform: rotate(0deg); } */
    83.3% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    /* 	91.6% { transform: rotate(5deg); } */
}

.animar .cola .seccion {
    -webkit-animation: tail-section-1 var(--speed) linear infinite;
    animation: tail-section-1 var(--speed) linear infinite;
}

@-webkit-keyframes tail-section-2 {

    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    /* 	8.3% { 	transform: rotate(-2deg); } */
    16.6% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    /* 	24.9% { transform: rotate(-6deg); } */
    33.3% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    /* 	41.6% { transform: rotate(50deg); } */
    49.9% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    /* 	58.3% { transform: rotate(20deg); } */
    66.6% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }

    /* 	74.9% { transform: rotate(-10deg); } */
    83.3% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    /* 	91.6% { transform: rotate(-10deg); } */
}

@keyframes tail-section-2 {

    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    /* 	8.3% { 	transform: rotate(-2deg); } */
    16.6% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    /* 	24.9% { transform: rotate(-6deg); } */
    33.3% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    /* 	41.6% { transform: rotate(50deg); } */
    49.9% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    /* 	58.3% { transform: rotate(20deg); } */
    66.6% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }

    /* 	74.9% { transform: rotate(-10deg); } */
    83.3% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    /* 	91.6% { transform: rotate(-10deg); } */
}

.animar .cola .seccion>*>* {
    -webkit-animation: tail-section-2 var(--speed) linear infinite;
    animation: tail-section-2 var(--speed) linear infinite;
}

@-webkit-keyframes tail-section-3 {

    0%,
    100% {
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg);
    }

    /* 	8.3% { 	transform: rotate(-20deg); } */
    16.6% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }

    /* 	24.9% { transform: rotate(-30deg); } */
    33.3% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }

    /* 	41.6% { transform: rotate(-70deg); } */
    49.9% {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg);
    }

    /* 	58.3% { transform: rotate(20deg); } */
    66.6% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    /* 	74.9% { transform: rotate(40deg); } */
    83.3% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }

    /* 	91.6% { transform: rotate(20deg); } */
}

@keyframes tail-section-3 {

    0%,
    100% {
        -webkit-transform: rotate(-25deg);
        transform: rotate(-25deg);
    }

    /* 	8.3% { 	transform: rotate(-20deg); } */
    16.6% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }

    /* 	24.9% { transform: rotate(-30deg); } */
    33.3% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }

    /* 	41.6% { transform: rotate(-70deg); } */
    49.9% {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg);
    }

    /* 	58.3% { transform: rotate(20deg); } */
    66.6% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    /* 	74.9% { transform: rotate(40deg); } */
    83.3% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }

    /* 	91.6% { transform: rotate(20deg); } */
}

.animar .cola .seccion>*>*>*>* {
    -webkit-animation: tail-section-3 var(--speed) linear infinite;
    animation: tail-section-3 var(--speed) linear infinite;
}

/* ── Overrides Finales de Animación y Estética ── */
.horse-mascot-wrap .cabeza .oreja {
    -webkit-animation: ear var(--speed) linear infinite !important;
    animation: ear var(--speed) linear infinite !important;
}

@keyframes ear {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

@-webkit-keyframes ear {
    0%, 100% { -webkit-transform: rotate(-10deg); }
    50% { -webkit-transform: rotate(10deg); }
}

/* Animación de polvo levantado (kick-up) */
@keyframes dust-kick {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    20%  { transform: translate(-10%, -50%) scale(1.5); opacity: 1; }
    80%  { transform: translate(-80%, -80%) scale(2); opacity: 0.5; }
    100% { transform: translate(-150%, -100%) scale(0.5); opacity: 0; }
}

@-webkit-keyframes dust-kick {
    0%   { -webkit-transform: translate(0, 0) scale(1); opacity: 0; }
    20%  { -webkit-transform: translate(-10%, -50%) scale(1.5); opacity: 1; }
    80%  { -webkit-transform: translate(-80%, -80%) scale(2); opacity: 0.5; }
    100% { -webkit-transform: translate(-150%, -100%) scale(0.5); opacity: 0; }
}

.horse-mascot-wrap .polvo .particula {
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important;
}