.hero-img.orbit{position:relative;width:min(440px,100%);max-width:none;aspect-ratio:1/1.12;margin:0 auto 6px}
.hero-img.orbit:before{inset:10%;border-radius:50%;background:radial-gradient(circle,#F1E2CC 0,#F1E2CC 62%,transparent 63%)}
.orbit .ring{position:absolute;inset:0;animation:vspin 50s linear infinite;z-index:1}
.orbit .ring i{position:absolute;left:50%;top:50%;width:21%;aspect-ratio:1;margin:-10.5% 0 0 -10.5%;transform:rotate(var(--a)) translateY(-220%)}
.orbit .ring i>span{display:block;width:100%;height:100%;transform:rotate(calc(var(--a) * -1))}
.orbit .ring i>span>b{display:block;width:100%;height:100%;animation:vspin 50s linear infinite reverse}
.orbit .ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:3px solid #fff;box-shadow:0 10px 22px -10px rgba(80,45,20,.55);animation:vbob 4.5s ease-in-out infinite;animation-delay:var(--d)}
.orbit .libro{position:absolute;left:50%;top:50%;width:57%;height:auto;transform:translate(-50%,-50%);animation:vfloat 6s ease-in-out infinite;z-index:2;filter:drop-shadow(0 18px 24px rgba(80,45,20,.18))}
@keyframes vspin{to{transform:rotate(360deg)}}
@keyframes vbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes vfloat{0%,100%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-50%,-53%) rotate(-1.2deg)}}
@media (min-width:860px){.hero-img.orbit{width:min(540px,100%)}}
@media (prefers-reduced-motion:reduce){.orbit .ring,.orbit .ring i>span>b,.orbit .ring img,.orbit .libro{animation:none}}