/* Topo de Soluções: órbita das 6 especialidades (fotos circulares + fundo que se mistura à cor ativa) */
@property --orb-c { syntax: '<color>'; inherits: true; initial-value: #E8641B; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.orb { --orb-c: #E8641B; --d: min(50vh, 34vw); position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(720px, calc(100svh - 72px), 880px); background: var(--bg); transition: --orb-c 1100ms ease; }
.orb-bg { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(ellipse 62% 80% at 70% 46%, color-mix(in srgb, var(--orb-c) 36%, var(--bg)) 0%, color-mix(in srgb, var(--orb-c) 15%, var(--bg)) 46%, var(--bg) 86%),
  radial-gradient(ellipse 50% 40% at 4% 100%, color-mix(in srgb, var(--orb-c) 10%, var(--bg)) 0%, transparent 70%); }

/* planetas */
.orb-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.orb-planet { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d); border-radius: 50%; overflow: hidden; margin: 0; pointer-events: auto; cursor: pointer; border: 0; padding: 0; background: var(--s-2);
  transform: translate(-50%, -50%) scale(var(--s, 1)); filter: blur(var(--b, 0px)); opacity: var(--o, 1);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 85%, transparent), 0 0 70px color-mix(in srgb, var(--c) 45%, transparent), 0 30px 80px rgba(0,0,0,0.35);
  transition: left 1000ms cubic-bezier(.65,0,.2,1), top 1000ms cubic-bezier(.65,0,.2,1), transform 1000ms cubic-bezier(.65,0,.2,1), filter 1000ms ease, opacity 1000ms ease; }
.orb-planet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.orb-planet[data-slot="0"] { left: 71%; top: 45%; --s: 1;    --b: 0px;  --o: 1;    z-index: 6; cursor: default; }
.orb-planet[data-slot="1"] { left: 98%; top: 80%; --s: .48;  --b: 4px;  --o: .8;   z-index: 5; }
.orb-planet[data-slot="2"] { left: 93%; top: 7%;  --s: .40;  --b: 10px; --o: .6;   z-index: 4; }
.orb-planet[data-slot="3"] { left: 52%; top: -2%; --s: .34;  --b: 16px; --o: .38;  z-index: 3; }
.orb-planet[data-slot="4"] { left: 46%; top: 96%; --s: .36;  --b: 14px; --o: .36;  z-index: 3; }
.orb-planet[data-slot="5"] { left: 47%; top: 22%; --s: .40;  --b: 12px; --o: .42;  z-index: 3; }

/* texto */
.orb-inner { position: relative; z-index: 8; width: 100%; padding-top: 44px; padding-bottom: 190px; }
.orb-copy { max-width: 520px; }
.orb-texts { position: relative; display: grid; margin-top: 8px; }
.orb-text { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 600ms ease, transform 700ms ease; }
.orb-text.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: 250ms; }
.orb-text h2 { font-family: var(--display); font-weight: 500; font-size: clamp(40px, 5.2vw, 76px); line-height: 0.98; letter-spacing: -0.036em; color: var(--fg-1); }
.orb-text p { margin-top: 24px; font-size: 18px; line-height: 1.6; color: var(--fg-2); max-width: 470px; }
.orb-cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.orb-ctrl { margin-top: 44px; display: flex; align-items: center; gap: 12px; }
.orb-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bd-2); background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--fg-1); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: border-color 200ms, background 200ms; }
.orb-btn:hover { border-color: var(--fg-1); }
.orb-btn svg { width: 16px; height: 16px; }
.orb-pause svg.ring { position: absolute; inset: -1px; width: 46px; height: 46px; transform: rotate(-90deg); fill: none; stroke: var(--orb-c); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; }
.orb-pause.run svg.ring { animation: orbRing 6s linear forwards; }
.orb-pause.paused svg.ring { animation: none; stroke-dashoffset: 100; }
.orb-pause .i-play { display: none; }
.orb-pause.paused .i-play { display: block; }
.orb-pause.paused .i-pause { display: none; }
@keyframes orbRing { to { stroke-dashoffset: 0; } }

/* órbita (curva com os 6 nomes) */
.orb-track { position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: 7; }
.orb-track svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orb-track path { fill: none; stroke: var(--bd-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.orb-node { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--fg-2); font-family: inherit; }
.orb-node .lbl { position: absolute; bottom: 20px; white-space: nowrap; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; transition: color 300ms, transform 300ms; }
.orb-node .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fg-1); box-shadow: 0 0 0 0 transparent; transition: transform 300ms, box-shadow 300ms, background 300ms; }
.orb-node:hover .lbl { color: var(--fg-1); }
.orb-node.is-active .lbl { color: var(--fg-1); font-weight: 700; transform: translateY(-4px); }
.orb-node.is-active .dot { background: var(--orb-c); transform: scale(1.5); box-shadow: 0 0 0 6px color-mix(in srgb, var(--orb-c) 30%, transparent), 0 0 24px var(--orb-c); }
.orb-node:focus-visible { outline: 2px solid var(--orb-c); outline-offset: 8px; border-radius: 6px; }

@media (max-width: 900px) {
  .orb { --d: min(62vw, 300px); display: block; min-height: 0; padding-top: 0; padding-bottom: 56px; }
  .orb-stage { position: relative; inset: auto; height: 380px; margin-top: 16px; }
  .orb-planet[data-slot="0"] { left: 50%; top: 52%; --s: 1; }
  .orb-planet[data-slot="1"] { left: 100%; top: 62%; --s: .5; --b: 4px; --o: .7; }
  .orb-planet[data-slot="5"] { left: 0%; top: 62%; --s: .5; --b: 4px; --o: .7; }
  .orb-planet[data-slot="2"], .orb-planet[data-slot="3"], .orb-planet[data-slot="4"] { left: 50%; top: 52%; --s: .3; --b: 12px; --o: 0; }
  .orb-inner { padding-top: 40px; padding-bottom: 0; }
  .orb-copy { max-width: none; }
  .orb-text p { font-size: 16px; }
  .orb-track { display: none; }
  .orb-ctrl { margin-top: 0; }
  .orb-pause { display: none; }
  .orb-inner, .orb-copy, .orb-ctrl { position: static; }
  .orb-prev, .orb-next { position: absolute; top: 183px; z-index: 9; width: 46px; height: 46px; background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .orb-prev { left: 10px; }
  .orb-next { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .orb, .orb-planet, .orb-text, .orb-node .lbl, .orb-node .dot { transition: none; }
  .orb-pause.run svg.ring { animation: none; }
}