body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    overflow: hidden;
}

/* ⚙️ ANIMACIONES */
@keyframes rotate-circle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes counter-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}


/* ⚙️ CONTENEDOR PRINCIPAL */
.circle-container {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 0%;
    /* border: 2px dashed pink; */
    
    /* Animación principal que hace girar todo el sistema */
    animation: rotate-circle 25s linear infinite;
}


/* ⚙️ PIVOTE (EL BRAZO INVISIBLE) */
.image-pivot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Posiciona cada pivote en su ángulo inicial. Estos son los "brazos" estáticos. */
.image-pivot:nth-child(1) { transform: rotate(0deg); }
.image-pivot:nth-child(2) { transform: rotate(51.4deg); }
.image-pivot:nth-child(3) { transform: rotate(102.8deg); }
.image-pivot:nth-child(4) { transform: rotate(154.2deg); }
.image-pivot:nth-child(5) { transform: rotate(205.6deg); }
.image-pivot:nth-child(6) { transform: rotate(257deg); }
.image-pivot:nth-child(7) { transform: rotate(308.4deg); }


/* ⚙️ IMAGEN */
.circle-img {
    width: 100px;
    height: 70px;
    object-fit: cover;
    border: 0px solid red;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0);

    /* Empuja la imagen hacia afuera desde el centro a lo largo del brazo/pivote */
    transform: translateY(-250px);
    
    /* Animación de contra-rotación para mantener la imagen "derecha" */
    animation: counter-rotate 25s linear infinite;
}