/* ==========================================================================
   03 COMPLEXIDADE — fragmentação → centralização + cadeia de 8 etapas
   ========================================================================== */
#complexidade .sec-hd{margin-bottom:0;row-gap:32px}

/* ---------- fragmentação (etiquetas soltas → operação única) ---------- */
.frag{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);gap:0;align-items:center}
.frag-a{display:flex;flex-wrap:wrap;gap:7px}
/* cada etiqueta recebe uma leve rotação via style="--r:1deg" */
.frag-a span{padding:7px 12px;border:1px dashed var(--border-2);border-radius:7px;font-size:var(--f-13);color:var(--text-3);background:#fff;
  transform:rotate(var(--r,0deg))}
.frag-m{display:grid;place-items:center}
.frag-m svg{width:72px;height:26px;overflow:visible}
.frag-m path{stroke:var(--border-2);stroke-width:1.2;fill:none;stroke-dasharray:var(--l);stroke-dashoffset:var(--l)}
.frag.is-in .frag-m path{animation:draw 700ms var(--e-out) .25s forwards}
.frag-b{border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:var(--sh-2);overflow:hidden}
.frag-b .h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.frag-b .h b{font-family:"IBM Plex Mono",monospace;font-size:var(--f-12);font-weight:600;color:var(--text-2)}
.frag-b ul{padding:6px 16px 12px}
.frag-b li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:var(--f-14);color:var(--text-2)}
.frag-b li:last-child{border-bottom:none}
.frag-b li b{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:var(--f-12);font-weight:600;color:var(--text-1)}

/* ---------- cadeia (trilho preenchido pelo scroll — js/modules/rails.js define --p) ---------- */
.chain{margin-top:clamp(40px,5vw,68px);position:relative}
.chain-rail{position:absolute;left:0;right:0;top:6px;height:1px;background:var(--border)}
.chain-rail i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--interactive);transform-origin:left;transform:scaleX(var(--p,0))}
.chain ol{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;position:relative}
.chain .nd{width:11px;height:11px;border-radius:3px;background:#fff;border:1.6px solid var(--border-2);margin:1px 0 16px;
  transition:border-color var(--t-slow) var(--e-out),background var(--t-slow),transform var(--t-slow) var(--e-out)}
.chain li.on .nd{border-color:var(--interactive);background:var(--interactive);transform:rotate(45deg) scale(1.08)}
.chain li:last-child.on .nd{border-color:var(--danger);background:var(--danger)}
.chain li b{display:block;font-family:Archivo;font-stretch:104%;font-size:var(--f-14);font-weight:700;letter-spacing:-.018em;margin-bottom:4px;color:var(--text-3);transition:color var(--t-slow)}
.chain li.on b{color:var(--text-1)}
.chain li span{display:block;font-size:var(--f-12);color:var(--text-3);line-height:1.42}

/* ---------- responsivo ---------- */
@media (max-width:1180px){
  .chain ol{grid-template-columns:repeat(4,1fr);gap:22px 12px}
  .chain-rail{display:none}
}
@media (max-width:1024px){
  .frag{grid-template-columns:1fr;gap:20px}
  .frag-m{transform:rotate(90deg);height:56px}
}
@media (max-width:600px){
  .chain ol{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .frag-m path{stroke-dashoffset:0!important}
}