/* graficos */
/* ---------- figura ---------- */
figure{margin:0}
figcaption{margin-top:12px; font-size:14.5px; color:var(--muted); line-height:1.5; max-width:72ch}
.fig-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:22px 20px; margin-top:20px}
svg.dia{display:block; max-width:100%; height:auto; margin:0 auto; color:var(--ink)}
svg.dia text{font-family:"Archivo","Helvetica Neue",Arial,sans-serif}
svg.dia .cx{fill:var(--surface-2); stroke:var(--line-2)}
svg.dia .cx-on{fill:var(--roxo-soft); stroke:var(--roxo)}
svg.dia .cx-al{fill:var(--laranja-soft); stroke:var(--laranja)}
svg.dia .rot{fill:var(--ink); font-weight:600}
svg.dia .sub{fill:var(--muted)}
svg.dia .lab{fill:var(--muted); font-family:"IBM Plex Mono",monospace; letter-spacing:.04em}
svg.dia .li{stroke:var(--line-2); fill:none}
svg.dia .li-on{stroke:var(--roxo); fill:none}
svg.dia .li-al{stroke:var(--laranja); fill:none}
svg.dia .ac{fill:var(--roxo)}
svg.dia .aa{fill:var(--laranja)}
svg.dia .on-roxo{fill:var(--on-roxo); font-weight:600}

/* ---------- timeline ---------- */
.tl{position:relative; margin-top:26px; padding:4px 0}
.tl::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
  background:var(--line-2); transform:translateX(-50%)}
.marco{position:relative; display:grid; grid-template-columns:1fr 46px 1fr; align-items:start;
  margin-bottom:26px}
.marco:last-child{margin-bottom:0}
.no{grid-column:2; justify-self:center; width:30px; height:30px; border-radius:50%;
  background:var(--roxo); color:var(--on-roxo); display:grid; place-items:center; z-index:2;
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600;
  box-shadow:0 0 0 5px var(--ground)}
.marco.trava .no{background:var(--laranja)}
.cartao{border:1px solid var(--line-2); border-radius:12px; background:var(--surface);
  padding:15px 17px 16px; position:relative}
.marco > .cartao{grid-row:1}
.marco.esq > .cartao{grid-column:1; margin-right:14px}
.marco.dir > .cartao{grid-column:3; margin-left:14px}
.marco.esq > .cartao::after, .marco.dir > .cartao::after{
  content:""; position:absolute; top:14px; width:14px; height:2px; background:var(--line-2)}
.marco.esq > .cartao::after{right:-14px}
.marco.dir > .cartao::after{left:-14px}
.marco.trava > .cartao{border-color:var(--laranja)}
.cartao h3{font-family:"Archivo",sans-serif; font-size:16.5px; font-weight:700; margin-bottom:3px}
.cartao .qd{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--laranja); display:block; margin-bottom:6px}
.cartao ul{margin:9px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.cartao li{font-size:14.5px; line-height:1.45; color:var(--ink-2); padding-left:15px; position:relative}
.cartao li::before{content:""; position:absolute; left:2px; top:.62em; width:5px; height:5px;
  border-radius:50%; background:var(--line-2)}
.marco.trava .cartao li::before{background:var(--laranja)}
.cartao .sist{margin-top:10px; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  color:var(--muted); border-top:1px solid var(--line); padding-top:8px; line-height:1.45}
@media (max-width:800px){
  .tl::before{left:15px}
  .marco{grid-template-columns:30px 1fr; gap:0}
  .no{grid-column:1; grid-row:1; justify-self:start}
  .marco.esq > .cartao, .marco.dir > .cartao{grid-column:2; grid-row:1; margin:0 0 0 16px}
  .marco.esq > .cartao::after, .marco.dir > .cartao::after{left:-16px; right:auto}
}
.legenda{display:flex; flex-wrap:wrap; gap:16px; margin-top:20px; font-size:14px; color:var(--muted)}
.legenda span{display:flex; align-items:center; gap:7px}
.legenda i{width:13px; height:13px; border-radius:50%; display:inline-block}
.legenda i.r{background:var(--roxo)} .legenda i.l{background:var(--laranja)}