/* Abertura editorial da seção de fragmentação. */
.fragmentation {
  position: relative;
  overflow: hidden;
  padding: 26px 0 62px;
}

.fragmentation::before {
  content: '';
  position: absolute;
  width: 660px;
  height: 660px;
  right: -110px;
  top: -555px;
  border: 1px solid #e9e2dd;
  border-radius: 50%;
  pointer-events: none;
}

.fragmentation-content { position: relative; }

.fragmentation-layout {
  display: block;
  text-align: center;
}

.fragmentation-copy h2 {
  max-width: 1180px;
  font-size: clamp(2.45rem, 3.65vw, 3.55rem);
  font-weight: 400;
  letter-spacing: -.052em;
  line-height: 1.08;
  text-wrap: balance;
  margin-inline: auto;
}

.fragmentation-copy h2 > span,
.fragmentation-copy h2 > strong { display: block; white-space: nowrap; }

.fragmentation-copy h2 strong {
  color: var(--interactive);
  font-weight: 700;
}

.fragmentation-copy > p {
  max-width: 1120px;
  margin-top: 28px;
  color: #647187;
  font-size: clamp(1.08rem, 1.55vw, 1.28rem);
  line-height: 1.62;
  margin-left: auto;
  margin-right: auto;
}

.fragmentation-copy > p > span { display: block; white-space: nowrap; }

.fragmentation-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  max-width: 100%;
  margin-top: 34px;
  overflow-x: auto;
  scrollbar-width: none;
}

.fragmentation-strip::-webkit-scrollbar { display: none; }

.fragmentation-strip p {
  margin: 0;
  color: #647187;
  font: 500 .7rem/1.55 var(--font-mono);
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
}

.management-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 28px 0 0;
  min-width: 0;
}

.management-diagram > svg { display: block; width: min(100%, 1080px); height: auto; overflow: visible; }
.system-orbit-base { stroke: #d7e3ed; stroke-width: 1.2; opacity: .65; }
.system-orbit-inner { stroke: #69baf7; stroke-width: 1.2; opacity: .65; }
.system-arc { stroke-width: 2.4; stroke-dasharray: 19 81; stroke-linecap: round; opacity: .82; animation: system-arc-light 4s ease-in-out infinite; }
.system-arc-blue { stroke: #168df2; stroke-dashoffset: 0; }
.system-arc-orange { stroke: #ff920e; stroke-dashoffset: -20; animation-delay: -.8s; }
.system-arc-purple { stroke: #7138ef; stroke-dashoffset: -40; animation-delay: -1.6s; }
.system-arc-pink { stroke: #ff3470; stroke-dashoffset: -60; animation-delay: -2.4s; }
.system-arc-teal { stroke: #08c7aa; stroke-dashoffset: -80; animation-delay: -3.2s; }
.system-node-shadow { fill: #7d9ab5; opacity: .12; filter: blur(13px); }
.system-node-surface { fill: #ffffffed; stroke: #d5e3ef; stroke-width: 1.3; filter: drop-shadow(0 12px 14px #2d56751b); }
.system-icon-orbit { fill: none; stroke: var(--node-color); stroke-width: 1; opacity: .18; }
.system-icon-disc { fill: var(--node-color); opacity: .12; }
.system-node-icon { fill: none; stroke: #142b4d; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.system-node-title { fill: #102342; font: 700 16px var(--font-mono); letter-spacing: 2px; }
.system-node-copy { fill: #526b89; font: 500 9.5px var(--font-mono); letter-spacing: 1.15px; }
.system-core-glow { fill: #249ff2; opacity: .34; filter: url(#system-glow); animation: system-glow 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.system-core-halo { fill: none; stroke: #55baff; stroke-width: 10; opacity: .72; filter: drop-shadow(0 0 9px #249ff2); animation: system-halo 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.system-core-face { stroke: #fff; stroke-width: 2; }
.system-core-icon { stroke: #0e82eb; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.system-core-title { fill: #102342; font: 700 21px var(--font-mono); letter-spacing: 5px; }
.system-core-copy { fill: #58708c; font: 500 9.5px var(--font-mono); letter-spacing: 1px; }
.system-core-rule { stroke: #178df0; stroke-width: 2.5; stroke-linecap: round; }
.connector { stroke-width: 2.5; stroke-dasharray: 2 6; filter: drop-shadow(0 0 5px currentColor); animation: system-flow 5s linear infinite; }
.connector-site { stroke: #168df2; color: #168df2; }
.connector-search { stroke: #08c7aa; color: #08c7aa; animation-delay: -.8s; }
.connector-infrastructure { stroke: #ff920e; color: #ff920e; animation-delay: -1.6s; }
.connector-protection { stroke: #ff3470; color: #ff3470; animation-delay: -2.4s; }
.connector-data { stroke: #7138ef; color: #7138ef; animation-delay: -3.2s; }
.point-site { fill: #168df2; }.point-search { fill: #08c7aa; }.point-infrastructure { fill: #ff920e; }.point-protection { fill: #ff3470; }.point-data { fill: #7138ef; }

@keyframes system-flow { to { stroke-dashoffset: -100; } }
@keyframes system-arc-light { 50% { opacity: 1; filter: drop-shadow(0 0 8px currentColor); } }
@keyframes system-glow { 50% { opacity: .78; transform: scale(1.09); } }
@keyframes system-halo { 50% { opacity: 1; stroke-width: 15; transform: scale(1.035); filter: drop-shadow(0 0 18px #168df2); } }

@media (max-width: 900px) {
  .fragmentation { padding: 22px 0 52px; }
  .fragmentation-copy h2 { font-size: clamp(2.35rem, 6vw, 3.35rem); }
  .fragmentation-copy h2 > span,
  .fragmentation-copy h2 > strong,
  .fragmentation-copy > p > span { white-space: normal; }
  .management-diagram > svg { max-width: 840px; }
}

@media (max-width: 700px) {
  .fragmentation { padding: 18px 0 44px; }
  .fragmentation-copy h2 { font-size: clamp(2.15rem, 9vw, 3rem); line-height: 1.1; }
  .fragmentation-copy h2 br { display: none; }
  .fragmentation-copy > p { margin-top: 22px; font-size: 1.05rem; line-height: 1.58; }
  .fragmentation-layout { gap: 28px; }
  .fragmentation-strip { justify-content: flex-start; margin-top: 28px; padding-bottom: 4px; }
  .fragmentation-strip p { font-size: .62rem; letter-spacing: .13em; }
  .management-diagram { margin-top: 24px; }
  .management-diagram > svg { width: min(120%, 620px); max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .connector,.system-arc,.system-core-glow,.system-core-halo { animation: none !important; transform: none !important; }
}

/* Desenho editorial inspirado no diagrama fornecido pelo cliente. */
.management-diagram { margin-top: 20px; }
.management-diagram > svg { width: min(100%, 1080px); }
.management-background { stroke: #c4d9ec; stroke-width: .65; opacity: .54; }
.management-background circle:not(:nth-child(-n+2)) { fill: #7da9c9; stroke: none; opacity: .9; }
.management-connections { stroke: #168af2; stroke-width: 1.1; }
.management-beams { stroke: #45b6ff; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 5px #168af2); }
.management-beams path { stroke-dasharray: 20 80; stroke-dashoffset: 100; animation: management-beam 3.4s linear infinite; }
.management-beams path:nth-child(2) { animation-delay: -.6s; }
.management-beams path:nth-child(3) { animation-delay: -1.2s; }
.management-beams path:nth-child(4) { animation-delay: -1.8s; }
.management-beams path:nth-child(5) { animation-delay: -2.4s; }
.management-data-packets path { stroke: #5bc4ff; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 2 98; opacity: 0; filter: drop-shadow(0 0 6px #168af2); }
.management-connection-points { fill: #168af2; }
.management-node-halo { fill: none; stroke: #88c4ff; stroke-width: 10; opacity: .18; filter: blur(9px); }
.management-node-face { fill: #e9f5ff; fill-opacity: .16; stroke: #81beff; stroke-width: .9; filter: drop-shadow(0 5px 10px #73a8d52e); }
.management-node-icon { fill: none; stroke: #112e50; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px #234f7929); }
.management-node-label { fill: #142d4b; font: 700 14px var(--font-body); letter-spacing: 2.6px; }
.management-node { cursor: pointer; }
.management-node-hit { fill: transparent; pointer-events: all; }
.management-node-face,.management-node-icon,.management-node-halo,.management-node-label { transition: transform .32s ease, stroke .32s ease, fill .32s ease, opacity .32s ease, filter .32s ease; transform-box: fill-box; transform-origin: center; }
.management-node:is(:hover,:focus-visible) .management-node-halo { opacity: .5; transform: scale(1.12); }
.management-node:is(:hover,:focus-visible) .management-node-face { stroke: #168af2; stroke-width: 1.6; transform: scale(1.07); filter: drop-shadow(0 7px 12px #168af24d); }
.management-node:is(:hover,:focus-visible) .management-node-icon { stroke: #126fca; transform: scale(1.1); }
.management-node:is(:hover,:focus-visible) .management-node-label { fill: #126fca; }
.management-node:focus { outline: none; }
.management-diagram:has(.management-node:is(:hover,:focus-visible)) .management-center-glow { opacity: .5; animation-duration: 1.2s; }
.management-diagram:has(.management-node:is(:hover,:focus-visible)) .management-center-ring { stroke-width: 2; filter: drop-shadow(0 0 9px #168af280); }
.management-diagram:has(.management-node-site:is(:hover,:focus-visible)) .management-data-packets path:nth-child(1),
.management-diagram:has(.management-node-search:is(:hover,:focus-visible)) .management-data-packets path:nth-child(2),
.management-diagram:has(.management-node-infrastructure:is(:hover,:focus-visible)) .management-data-packets path:nth-child(3),
.management-diagram:has(.management-node-protection:is(:hover,:focus-visible)) .management-data-packets path:nth-child(4),
.management-diagram:has(.management-node-data:is(:hover,:focus-visible)) .management-data-packets path:nth-child(5) { opacity: 1; animation: management-packet 1.1s linear infinite; }
.management-center-glow { fill: #4cafff; opacity: .13; filter: url(#management-blue-glow); animation: management-breathe 3.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.management-center-ring { fill: #fff; stroke: #2996fa; stroke-width: 1.2; }
.management-center-face { stroke: #e0efff; stroke-width: 9; }
.management-center-icon { stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.management-center-icon-top { stroke: #168af2; }
.management-center-icon-layers { stroke: #173d68; }
.management-center-title { fill: #102b4b; font: 700 23px var(--font-body); letter-spacing: 6px; }
.management-center-copy { fill: #587292; font: 400 13px var(--font-body); letter-spacing: 1.2px; }
.management-center-rule { fill: none; stroke: #168af2; stroke-width: 2; stroke-linecap: round; }
.management-side-label { fill: #4b6884; font: 400 8px var(--font-mono); letter-spacing: 3px; }
.management-side-label path { fill: none; stroke: #86a8c3; stroke-width: 1; }
@keyframes management-breathe { 50% { opacity: .42; transform: scale(1.08); } }
@keyframes management-beam { to { stroke-dashoffset: 0; } }
@keyframes management-packet { to { stroke-dashoffset: -100; } }

@media (max-width: 700px) {
  .management-diagram { margin-top: 18px; }
  .management-diagram > svg { width: 100%; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .management-center-glow,.management-beams path { animation: none; }
  .management-data-packets path { animation: none !important; }
  .management-node-face,.management-node-icon,.management-node-halo { transition: none; }
}