.brujula-wrapper {
    position: relative;
    width: 35px;  /* Ajusta al tamaño de tus imágenes */
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brujula-fondo {
    position: absolute;
    width: 90%;
    height: auto;
    z-index: 1;
}

.brujula-flecha {
    position: absolute;
    width: 70%; /* Ajusta según qué tan grande sea la flecha respecto al cuadrante */
    z-index: 2;
    /* El punto de pivote: 50% 50% es el centro exacto */
    transform-origin: center center; 
    /* Transición suave para que no salte bruscamente */
    transition: transform .1s linear;
}