/* =========================================================
   AVATAR - EFECTOS V2
   Base visual consolidada para el avatar modular
   ========================================================= */

.avatarCompuesto {
    position: relative !important;
    isolation: isolate;
    border-radius: 50%;
    overflow: hidden !important;
    background: #ffffff;
}

/*
   Borde blanco interior universal.

   No crea otro círculo.
   Se dibuja pegado al borde interior del avatar y queda
   por encima del personaje.

   El marco elegido conserva su propio color,
   animación y diseño exterior.
*/
.avatarCompuesto::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 5px #ffffff;

    pointer-events: none;
    z-index: 19;
}


/* =========================================================
   CONTENEDOR DE CAPAS PNG
   ========================================================= */

.capasImagenAvatar {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    pointer-events: none !important;

    z-index: 1;
}


/*
   Todas las imágenes del avatar trabajan con
   exactamente el mismo lienzo maestro.
*/
.capaBaseCuerpoAvatar,
.capaBaseCabezaAvatar,
.capaImagenAvatar-ropa,
.capaImagenAvatar-disfraz,
.capaImagenAvatar-cabello,
.capaImagenAvatar-rostro,
.capaImagenAvatar-accesorio,
.capaImagenAvatar-distintivo,
.capaImagenAvatar-mascota,
.capaTinteCabelloAvatar,
.capaTinteRopaAvatar {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    pointer-events: none !important;

    user-select: none !important;

    /*
       Desactivamos los recortes circulares anteriores.
       El borde blanco superior será quien oculte
       visualmente el exceso.
    */
    clip-path: none !important;
}


/* =========================================================
   FONDO Y MARCO PNG
   Para opciones futuras que usen imágenes.
   ========================================================= */

.capaImagenAvatar-fondo,
.capaImagenAvatar-marco {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    pointer-events: none !important;

    user-select: none !important;
}


.capaImagenAvatar-fondo {
    z-index: 1 !important;
}


/* =========================================================
   CUERPO BASE
   Más compacto y ubicado hacia la parte inferior
   ========================================================= */

.capaBaseCuerpoAvatar {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    /*
       Menos ancho y, sobre todo,
       menos alto que antes.
    */
    transform:
        translateY(10%)
        scaleX(1.36)
        scaleY(1.17)
        !important;

    /*
       Conservamos la base como punto de apoyo.
       Al reducirlo, se encoge hacia arriba
       y no deja de cubrir la zona inferior.
    */
    transform-origin:
        50% 100%
        !important;

    z-index:
        2 !important;

    pointer-events:
        none !important;

    user-select:
        none !important;

    clip-path:
        none !important;
}


/* =========================================================
   CABELLO
   También debe seguir el nuevo tamaño de cabeza
   ========================================================= */

.capaImagenAvatar-cabello,
.capaTinteCabelloAvatar {

    transform:
        translateY(-1.8%)
        scale(1.10)
        !important;

    transform-origin:
        50% 42%
        !important;

    z-index:
        8 !important;

    clip-path:
        none !important;
}


/* =========================================================
   ROSTRO
   Debe crecer junto con la cabeza
   ========================================================= */

.capaImagenAvatar-rostro {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    transform:
        translateY(-1.9%)
        scale(0.8)
        !important;

    transform-origin:
        50% 42%
        !important;

    z-index:
        9 !important;

    pointer-events:
        none !important;

    user-select:
        none !important;

    clip-path:
        none !important;
}


/* =========================================================
   OCULTAR PIEZAS ANTIGUAS CSS CUANDO EXISTE PNG
   ========================================================= */

.usaCabezaImagen
.avatarCabezaCompuesta {

    background:
        transparent !important;

    box-shadow:
        none !important;
}


.usaCabezaImagen
.avatarOreja {

    opacity:
        0 !important;
}


.usaCuerpoPielImagen
.avatarCuerpoCompuesto,

.usaCuerpoPielImagen
.avatarCuelloCompuesto {

    opacity:
        0 !important;
}


.usaImagenCabello
.avatarCabelloAtras,

.usaImagenCabello
.avatarCabelloFrente {

    opacity:
        0 !important;
}


.usaImagenRostro
.avatarRostroCompuesto {

    opacity:
        0 !important;
}


.usaImagenRopa
.avatarCuerpoCompuesto,

.usaImagenDisfraz
.avatarCuerpoCompuesto {

    background:
        transparent !important;

    border-color:
        transparent !important;

    box-shadow:
        none !important;
}


.usaImagenRopa
.avatarDetalleRopa,

.usaImagenDisfraz
.avatarDetalleRopa {

    opacity:
        0 !important;
}


.usaImagenAccesorio
.avatarAccesorioCompuesto {

    opacity:
        0 !important;
}


.usaImagenDistintivo
.avatarDistintivo {

    opacity:
        0 !important;
}


.usaImagenMascota
.avatarMascotaCompuesta {

    opacity:
        0 !important;
}


/* =========================================================
   TINTE DE CABELLO
   ========================================================= */

.capaTinteCabelloAvatar {

    opacity:
        0.72;

    mix-blend-mode:
        color;
}


.avatarCompuesto
.capaTinteCabelloAvatar {

    filter:
        brightness(1.08);
}


/* =========================================================
   TINTE DE ROPA
   ========================================================= */

.capaTinteRopaAvatar {

    opacity:
        0.62;

    mix-blend-mode:
        color;
}


/* =========================================================
   MINIATURAS
   ========================================================= */

.muestraOpcionAvatar.muestraImagenAvatar {

    overflow:
        hidden;

    padding:
        3px;
}


.miniaturaRealAvatar {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    pointer-events:
        none;

    user-select:
        none;
}


.imagenItemTiendaAvatar {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;
}


.muestraColorTiendaAvatar {

    display:
        block;

    width:
        54px;

    height:
        54px;

    margin:
        auto;

    border:
        4px solid
        rgba(
            255,
            255,
            255,
            0.95
        );

    border-radius:
        50%;

    box-shadow:
        0 0 0 2px
        rgba(
            85,
            75,
            140,
            0.18
        );
}


/* =========================================================
   RAREZAS
   ========================================================= */

.rarezaAvatar-normal {

    --rareza-avatar:
        #96909d;
}


.rarezaAvatar-poco_comun {

    --rareza-avatar:
        #4da875;
}


.rarezaAvatar-especial {

    --rareza-avatar:
        #567bd5;
}


.rarezaAvatar-epica {

    --rareza-avatar:
        #9856cf;
}


.rarezaAvatar-legendaria {

    --rareza-avatar:
        #d1a52b;
}


.etiquetaRarezaAvatar,
.etiquetaRarezaTienda {

    display:
        inline-block;

    padding:
        3px 7px;

    border-radius:
        999px;

    background:
        var(
            --rareza-avatar,
            #96909d
        );

    color:
        white;

    font-size:
        7px;

    font-weight:
        900;

    text-transform:
        uppercase;
}


.etiquetaRarezaAvatar-normal {

    background:
        #96909d;
}


.etiquetaRarezaAvatar-poco_comun {

    background:
        #4da875;
}


.etiquetaRarezaAvatar-especial {

    background:
        #567bd5;
}


.etiquetaRarezaAvatar-epica {

    background:
        #9856cf;
}


.etiquetaRarezaAvatar-legendaria {

    background:
        linear-gradient(
            90deg,
            #bf8c0c,
            #e3bf45
        );
}


.etiquetaAnimadaAvatar,
.etiquetaAnimadaTienda {

    display:
        inline-block;

    margin-top:
        3px;

    color:
        #6d4bae;

    font-size:
        7px;

    font-weight:
        900;
}


/* =========================================================
   EFECTO BRILLO
   ========================================================= */

.efectoAvatar-brillo {

    animation:
        avatarBrillo
        2.4s
        ease-in-out
        infinite;
}


@keyframes avatarBrillo {

    0%,
    100% {

        filter:
            brightness(1);
    }

    50% {

        filter:
            brightness(1.28)
            drop-shadow(
                0 0 7px
                rgba(
                    255,
                    232,
                    145,
                    0.8
                )
            );
    }
}


/* =========================================================
   EFECTO PULSO
   ========================================================= */

.efectoAvatar-pulso {

    animation:
        avatarPulso
        2s
        ease-in-out
        infinite;
}


@keyframes avatarPulso {

    0%,
    100% {

        filter:
            brightness(1)
            saturate(1);
    }

    50% {

        filter:
            brightness(1.22)
            saturate(1.25)
            drop-shadow(
                0 0 6px
                rgba(
                    255,
                    255,
                    255,
                    0.65
                )
            );
    }
}


/* =========================================================
   EFECTO DESTELLO
   ========================================================= */

.efectoAvatar-destello {

    animation:
        avatarDestello
        2.7s
        ease-in-out
        infinite;
}


@keyframes avatarDestello {

    0%,
    75%,
    100% {

        filter:
            brightness(1);
    }

    82% {

        filter:
            brightness(1.45);
    }

    90% {

        filter:
            brightness(1.1);
    }
}


/* =========================================================
   EFECTO FLOTAR
   ========================================================= */

.efectoAvatar-flotar {

    animation:
        avatarFlotar
        2.6s
        ease-in-out
        infinite;
}


@keyframes avatarFlotar {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-4px);
    }
}


/* =========================================================
   EFECTO FUEGO
   ========================================================= */

.efectoAvatar-fuego,
.efectoAvatar-llamas {

    animation:
        avatarFuego
        1.3s
        ease-in-out
        infinite;
}


@keyframes avatarFuego {

    0%,
    100% {

        filter:
            brightness(1.05)
            saturate(1.15);
    }

    50% {

        filter:
            brightness(1.35)
            saturate(1.55)
            drop-shadow(
                0 0 9px
                rgba(
                    255,
                    115,
                    35,
                    0.85
                )
            );
    }
}


/* =========================================================
   EFECTO HIELO / CRISTAL
   ========================================================= */

.efectoAvatar-hielo,
.efectoAvatar-cristal {

    animation:
        avatarCristal
        2.5s
        ease-in-out
        infinite;
}


@keyframes avatarCristal {

    0%,
    100% {

        filter:
            brightness(1);
    }

    50% {

        filter:
            brightness(1.4)
            contrast(1.08)
            drop-shadow(
                0 0 10px
                rgba(
                    190,
                    240,
                    255,
                    0.9
                )
            );
    }
}


/* =========================================================
   EFECTO ELECTRICIDAD
   ========================================================= */

.efectoAvatar-electricidad {

    animation:
        avatarElectricidad
        0.9s
        linear
        infinite;
}


@keyframes avatarElectricidad {

    0%,
    100% {

        filter:
            brightness(1);
    }

    20% {

        filter:
            brightness(1.5);
    }

    45% {

        filter:
            brightness(1.05);
    }

    70% {

        filter:
            brightness(1.35)
            drop-shadow(
                0 0 8px
                rgba(
                    255,
                    232,
                    70,
                    0.9
                )
            );
    }
}


/* =========================================================
   EFECTO AGUA
   ========================================================= */

.efectoAvatar-agua {

    animation:
        avatarAgua
        2.8s
        ease-in-out
        infinite;
}


@keyframes avatarAgua {

    0%,
    100% {

        filter:
            brightness(1)
            saturate(1);
    }

    50% {

        filter:
            brightness(1.22)
            saturate(1.35)
            drop-shadow(
                0 0 8px
                rgba(
                    75,
                    175,
                    255,
                    0.75
                )
            );
    }
}


/* =========================================================
   EFECTO NATURALEZA
   ========================================================= */

.efectoAvatar-naturaleza {

    animation:
        avatarNaturaleza
        3s
        ease-in-out
        infinite;
}


@keyframes avatarNaturaleza {

    0%,
    100% {

        filter:
            brightness(1)
            saturate(1);
    }

    50% {

        filter:
            brightness(1.2)
            saturate(1.4)
            drop-shadow(
                0 0 8px
                rgba(
                    80,
                    200,
                    105,
                    0.72
                )
            );
    }
}


/* =========================================================
   EFECTO ENERGÍA / LUCES
   ========================================================= */

.efectoAvatar-energia,
.efectoAvatar-luces {

    animation:
        avatarEnergia
        1.8s
        ease-in-out
        infinite;
}


@keyframes avatarEnergia {

    0%,
    100% {

        filter:
            brightness(1);
    }

    50% {

        filter:
            brightness(1.3)
            contrast(1.08)
            drop-shadow(
                0 0 8px
                rgba(
                    90,
                    225,
                    255,
                    0.8
                )
            );
    }
}


/* =========================================================
   EFECTO ESTRELLAS
   ========================================================= */

.efectoAvatar-estrellas {

    animation:
        avatarEstrellas
        2.1s
        ease-in-out
        infinite;
}


@keyframes avatarEstrellas {

    0%,
    100% {

        filter:
            brightness(1);
    }

    35% {

        filter:
            brightness(1.4)
            drop-shadow(
                0 0 8px
                rgba(
                    255,
                    235,
                    120,
                    0.9
                )
            );
    }

    65% {

        filter:
            brightness(1.12);
    }
}


/* =========================================================
   EFECTO HALO
   ========================================================= */

.efectoAvatar-halo {

    animation:
        avatarHalo
        2.6s
        ease-in-out
        infinite;
}


@keyframes avatarHalo {

    0%,
    100% {

        filter:
            brightness(1);
    }

    50% {

        filter:
            brightness(1.35)
            drop-shadow(
                0 0 12px
                rgba(
                    255,
                    244,
                    178,
                    0.9
                )
            );
    }
}


/* =========================================================
   EFECTO NEBULOSA
   ========================================================= */

.efectoAvatar-nebulosa {

    animation:
        avatarNebulosa
        4s
        linear
        infinite;
}


@keyframes avatarNebulosa {

    0% {

        filter:
            brightness(1)
            saturate(1.05)
            hue-rotate(0deg);
    }

    50% {

        filter:
            brightness(1.27)
            saturate(1.5)
            hue-rotate(32deg)
            drop-shadow(
                0 0 10px
                rgba(
                    170,
                    105,
                    255,
                    0.78
                )
            );
    }

    100% {

        filter:
            brightness(1)
            saturate(1.05)
            hue-rotate(0deg);
    }
}


/* =========================================================
   EFECTO ARCOÍRIS
   ========================================================= */

.efectoAvatar-arcoiris {

    animation:
        avatarArcoiris
        4s
        linear
        infinite;
}


@keyframes avatarArcoiris {

    from {

        filter:
            saturate(1.35)
            hue-rotate(0deg);
    }

    to {

        filter:
            saturate(1.35)
            hue-rotate(360deg);
    }
}


/* =========================================================
   EFECTO AURORA
   ========================================================= */

.efectoAvatar-aurora {

    animation:
        avatarAurora
        4.8s
        ease-in-out
        infinite;
}


@keyframes avatarAurora {

    0% {

        filter:
            brightness(1.05)
            saturate(1.15)
            hue-rotate(0deg);
    }

    50% {

        filter:
            brightness(1.3)
            saturate(1.45)
            hue-rotate(55deg)
            drop-shadow(
                0 0 10px
                rgba(
                    125,
                    255,
                    220,
                    0.78
                )
            );
    }

    100% {

        filter:
            brightness(1.05)
            saturate(1.15)
            hue-rotate(0deg);
    }
}


/* =========================================================
   EFECTO PARTÍCULAS
   ========================================================= */

.efectoAvatar-particulas {

    animation:
        avatarParticulas
        2.5s
        ease-in-out
        infinite;
}


@keyframes avatarParticulas {

    0%,
    100% {

        filter:
            brightness(1);
    }

    50% {

        filter:
            brightness(1.32)
            saturate(1.25)
            drop-shadow(
                0 0 10px
                rgba(
                    255,
                    232,
                    130,
                    0.82
                )
            );
    }
}


/* =========================================================
   EFECTO REBOTE
   ========================================================= */

.efectoAvatar-rebote {

    animation:
        avatarRebote
        1.7s
        ease-in-out
        infinite;
}


@keyframes avatarRebote {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-3px);
    }
}


/* =========================================================
   EFECTO RAYOS
   ========================================================= */

.efectoAvatar-rayos {

    animation:
        avatarRayos
        1.4s
        linear
        infinite;
}


@keyframes avatarRayos {

    0%,
    100% {

        filter:
            brightness(1);
    }

    35% {

        filter:
            brightness(1.5);
    }

    42% {

        filter:
            brightness(1);
    }
}


/* =========================================================
   EFECTO BRASAS
   ========================================================= */

.efectoAvatar-brasas {

    animation:
        avatarBrasas
        2s
        ease-in-out
        infinite;
}


@keyframes avatarBrasas {

    0%,
    100% {

        filter:
            brightness(1)
            saturate(1);
    }

    50% {

        filter:
            brightness(1.28)
            saturate(1.45)
            drop-shadow(
                0 0 9px
                rgba(
                    255,
                    95,
                    35,
                    0.82
                )
            );
    }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    html:not([data-aventura-animaciones="activas"]) .capaAvatarAnimada,
    html:not([data-aventura-animaciones="activas"]) [class*="efectoAvatar-"] {

        animation:
            none !important;
    }
}

/* =========================================================
   AJUSTE INDEPENDIENTE DE LA CABEZA BASE
   ========================================================= */

.capaBaseCabezaAvatar {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    /* Cabeza más grande */
    transform:
        translateY(-2.5%)
        scale(1.32)
        !important;

    transform-origin:
        50% 42%
        !important;

    z-index:
        4 !important;

    pointer-events:
        none !important;

    user-select:
        none !important;

    clip-path:
        none !important;
}

/* =========================================================
   CABELLOS V2
   ADAPTACIÓN A CABEZA MAESTRA
   ========================================================= */


/* ---------------------------------------------------------
   ENVOLTURA

   Debe repetir EXACTAMENTE la transformación actual
   de .capaBaseCabezaAvatar
   --------------------------------------------------------- */

.envolturaCabelloV2 {

    position:
        absolute !important;

    inset:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    pointer-events:
        none !important;

    user-select:
        none !important;


    transform:
        translateY(-1.6%)
        scale(1.30)
        !important;


    transform-origin:
        50% 42%
        !important;
}


/* ---------------------------------------------------------
   PNG DEL CABELLO
   --------------------------------------------------------- */

.capaCabelloV2 {

    position:
        absolute !important;

    inset:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        contain !important;

    pointer-events:
        none !important;

    user-select:
        none !important;

    clip-path:
        none !important;
}


/* ---------------------------------------------------------
   CAPAS
   --------------------------------------------------------- */

.envolturaCabelloV2-atras {

    z-index:
        3.8 !important;
}


.envolturaCabelloV2-lateral {

    z-index:
        7.8 !important;
}


.envolturaCabelloV2-frente {

    z-index:
        8 !important;
}


.envolturaCabelloV2-extra {

    z-index:
        8.4 !important;
}


.envolturaCabelloV2-efecto {

    z-index:
        8.8 !important;
}

/* =========================================================
   ESCALA GENERAL DEL PERSONAJE
   SE APLICA EN TODO EL JUEGO
   ========================================================= */

:root {
    --escala-general-avatar: 0.91;
    --ajuste-y-general-avatar: 3.5%;
    --origen-general-avatar: 50% 58%;
}


/*
   Se aplica a cualquier avatar compuesto:
   - Editor de avatar
   - Perfil lateral
   - Pantalla de progreso
   - Selección de personaje
   - Tarjetas de jugador
   - Otros previews del avatar
*/

.avatarCompuesto .capasImagenAvatar {

    transform:
        translateY(
            var(--ajuste-y-general-avatar)
        )
        scale(
            var(--escala-general-avatar)
        )
        !important;

    transform-origin:
        var(--origen-general-avatar)
        !important;
}

/* =========================================================
   CABELLOS V2 - LIMPIEZA VISUAL
   ========================================================= */

.envolturaCabelloV2,
.capaCabelloV2 {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    user-select: none !important;
}

.capaCabelloV2 {
    display: block !important;
    border-radius: 0 !important;
}

/* Cabellos V2 sustituyen por completo las formas antiguas hechas con CSS. */
.usaCabelloV2 .avatarCabelloAtras,
.usaCabelloV2 .avatarCabelloFrente {
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   CAPAS DE CABELLO ANIMADAS
   El contenedor mantiene el ajuste.
   El sprite interno hace la animación.
   ========================================================= */

.capaCabelloWrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.capaCabelloSprite {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    will-change: transform;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
}

/* =========================================================
   ANIMACIÓN 1
   BALANCEO SUAVE
   Ideal para largo_princesa, coletas, trenzas, etc.
   ========================================================= */

.animacionCabello--balanceo_suave--atras {
    animation: cabelloBalanceoAtras 3.8s ease-in-out infinite;
    transform-origin: 50% 28%;
}

.animacionCabello--balanceo_suave--frente {
    animation: cabelloBalanceoFrente 3.4s ease-in-out infinite;
    transform-origin: 50% 18%;
}

.animacionCabello--balanceo_suave--lateral {
    animation: cabelloBalanceoLateral 3.2s ease-in-out infinite;
    transform-origin: 50% 24%;
}

@keyframes cabelloBalanceoAtras {
    0%, 100% {
        transform: rotate(0deg) translateY(0px);
    }
    25% {
        transform: rotate(-1.2deg) translateY(0.5px);
    }
    50% {
        transform: rotate(0.6deg) translateY(0px);
    }
    75% {
        transform: rotate(1.2deg) translateY(0.5px);
    }
}

@keyframes cabelloBalanceoFrente {
    0%, 100% {
        transform: rotate(0deg) translateY(0px);
    }
    25% {
        transform: rotate(-1.6deg) translateY(0.5px);
    }
    50% {
        transform: rotate(0.8deg) translateY(0px);
    }
    75% {
        transform: rotate(1.6deg) translateY(0.5px);
    }
}

@keyframes cabelloBalanceoLateral {
    0%, 100% {
        transform: rotate(0deg) translateY(0px);
    }
    25% {
        transform: rotate(-2deg) translateY(1px);
    }
    50% {
        transform: rotate(1deg) translateY(0px);
    }
    75% {
        transform: rotate(2deg) translateY(1px);
    }
}

/* =========================================================
   ANIMACIÓN 2
   FLOTACIÓN SUAVE
   Para cabellos mágicos o fantasía.
   ========================================================= */

.animacionCabello--flotacion_suave--atras,
.animacionCabello--flotacion_suave--frente,
.animacionCabello--flotacion_suave--lateral {
    animation: cabelloFlotacionSuave 3.6s ease-in-out infinite;
}

@keyframes cabelloFlotacionSuave {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-2px);
    }
}

/* =========================================================
   ANIMACIÓN 3
   TEMBLOR ELÉCTRICO
   Para cabellos eléctricos o graciosos.
   ========================================================= */

.animacionCabello--temblor_electrico--atras,
.animacionCabello--temblor_electrico--frente,
.animacionCabello--temblor_electrico--lateral {
    animation: cabelloTemblorElectrico 0.18s steps(2) infinite;
}

@keyframes cabelloTemblorElectrico {
    0%   { transform: translate(0px, 0px) rotate(0deg); }
    25%  { transform: translate(-1px, 0px) rotate(-0.6deg); }
    50%  { transform: translate(1px, 0px) rotate(0.6deg); }
    75%  { transform: translate(-0.5px, 0.5px) rotate(-0.4deg); }
    100% { transform: translate(0.5px, -0.5px) rotate(0.4deg); }
}