body 
{
    background-color: #252525;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.mi_marco 
{
    text-align: center;
}

.mi_logo 
{
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

/* 1. Definimos los "pasos" del temblor */
@keyframes temblor
{
    
    0% {    transform: translate(1px, -1px)     rotate(2deg);   }
    10% {   transform: translate(-3px, -6px)    rotate(-3deg);  }
    20% {   transform: translate(4px, -12px)    rotate(3deg);   }
    30% {   transform: translate(-6px, -20px)   rotate(-2deg);  }
    40% {   transform: translate(4px, -21px)    rotate(1deg);   }
    50% {   transform: translate(-5px, -18px)   rotate(-1deg);  }
    60% {   transform: translate(5px, -22px)    rotate(-10deg); }
    80% {   transform: translate(-6px, -15px)   rotate(8deg);   }
    100% {  transform: translate(1px, -2px)     rotate(-1deg);  }

}

/* 2. Aplicamos el efecto al pasar el ratón (hover) */
.mi_marco:hover .mi_logo 
{
    animation: temblor 1.0s;                    /* Duración de dos segundo */
    animation-iteration-count: 1;               /* Se ejecuta una vez */
}

/* 2. Aplicamos el efecto al pulsar (active) */
.mi_marco:active .mi_logo 
{
    animation: temblor 0.5s;                    /* Duración de medio segundo */
    animation-iteration-count: infinite;        /* Tiembla sin parar mientras esté el cursor */
}