/* Cada órbita é um grupo: o ponto carrega seu próprio rótulo pela trajetória. */
.hero-mark-wrap{aspect-ratio:1;height:auto;margin-left:auto;max-width:500px;min-width:0}
.orbit-unit{inset:0;position:absolute;transform-origin:50% 50%;z-index:1}
.orbit-unit .mark-orbit{animation:none;left:50%;top:50%;transform:translate(-50%,-50%)}
.orbit-unit .node{transform:translate(-50%,-50%)}
.orbit-unit .node .mark-label{bottom:auto;position:absolute;right:auto;white-space:nowrap}
/* Arquitetura: círculo externo. */
.orbit-unit-a{animation:orbit-unit-forward 24s linear infinite}
.orbit-unit-a .orbit-c{height:100%;width:100%}
.orbit-unit-a .node-a{left:80%;right:auto;top:10%}
.orbit-unit-a .mark-label-a{left:20px;top:8px;animation:orbit-label-reverse-24 24s linear infinite}
/* Produto: elipse vertical. */
.orbit-unit-b{animation:orbit-unit-reverse 28s linear infinite}
.orbit-unit-b .orbit-b{height:83%;width:53%}
.orbit-unit-b .node-b{bottom:auto;left:27.050327%;top:70.75%}
.orbit-unit-b .mark-label-b{right:22px;top:1px;animation:orbit-label-forward-28 28s linear infinite}
/* Código: elipse horizontal. */
.orbit-unit-c{animation:orbit-unit-forward 20s linear infinite}
.orbit-unit-c .orbit-a{height:76%;width:95%}
.orbit-unit-c .node-c{bottom:auto;left:97.5%;right:auto;top:50%}
.orbit-unit-c .mark-label-c{right:22px;top:8px;animation:orbit-label-reverse-20 20s linear infinite}
.hero-mark{aspect-ratio:1;height:auto;width:44%;z-index:3}
.hero-mark img{height:auto;width:64%}
@keyframes orbit-unit-forward{to{transform:rotate(360deg)}}
@keyframes orbit-unit-reverse{to{transform:rotate(-360deg)}}
@keyframes orbit-label-reverse-24{to{transform:rotate(-360deg)}}
@keyframes orbit-label-forward-28{to{transform:rotate(360deg)}}
@keyframes orbit-label-reverse-20{to{transform:rotate(-360deg)}}
@media(max-width:991px){.hero-mark-wrap{margin:18px auto;max-width:500px}}
@media(max-width:767px){.hero-mark-wrap{margin:0 auto;max-width:360px;transform:none}.hero-mark{width:48%}}
@media(prefers-reduced-motion:reduce){.orbit-unit,.orbit-unit .mark-label{animation:none!important}}
/* Keep the counter-rotated labels anchored below their orbit nodes. */
.orbit-unit .node .mark-label{left:50%;right:auto;top:50%;transform-origin:0 0}
@keyframes orbit-label-reverse-24{from{transform:rotate(0deg) translate(-50%,14px)}to{transform:rotate(-360deg) translate(-50%,14px)}}
@keyframes orbit-label-forward-28{from{transform:rotate(0deg) translate(-50%,14px)}to{transform:rotate(360deg) translate(-50%,14px)}}
@keyframes orbit-label-reverse-20{from{transform:rotate(0deg) translate(-50%,14px)}to{transform:rotate(-360deg) translate(-50%,14px)}}
.hero-section{overflow:clip}
@media(max-width:767px){.hero-mark-wrap{width:100%;max-width:min(360px,calc(100% - 88px))}}
@media(prefers-reduced-motion:reduce){.orbit-unit .node .mark-label{transform:translate(-50%,14px)}}