/* ==========================================================
   INSTRUMENTOS CONECTADOS (#instrumentos): a rede
   ========================================================== */
.rede-area { margin-top: var(--espaco-6); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
/* Cantos arredondados dos instrumentos e do painel; a marca do canto acompanha a curva */
.rede-area { --raio-doc: 14px; }
.rede { position: relative; aspect-ratio: 10 / 7; }
.rede svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rede line { stroke: var(--cinza-claro); stroke-width: 1; opacity: .3; vector-effect: non-scaling-stroke; transition: opacity .3s, stroke .3s, stroke-width .3s; }
.rede line.ligada { stroke: var(--acento); opacity: 1; stroke-width: 2; }
.rede.com-selecao line:not(.ligada) { opacity: .08; }
.doc { position: absolute; transform: translate(-50%, -50%); width: 25%; min-height: 64px; padding: 10px 12px 10px 14px; background: var(--superficie); color: var(--texto); border: 1px solid var(--linha); border-radius: var(--raio-doc); font: 500 13px/1.3 var(--font-texto); text-align: left; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s, opacity .3s; }
.doc::before { content: ""; position: absolute; left: -1px; top: -1px; width: var(--raio-doc); height: var(--raio-doc); border-radius: var(--raio-doc) 0 0 0; background: var(--cinza-claro); transition: background-color .3s; }
.doc:hover { border-color: var(--cinza-claro); }
.rede.com-selecao .doc { opacity: .35; }
.rede.com-selecao .doc.vizinho { opacity: 1; border-color: var(--cinza-claro); }
.rede.com-selecao .doc.selecionado { opacity: 1; background: var(--quase-branco); color: var(--tinta); border-color: var(--quase-branco); }
.rede.com-selecao .doc.selecionado::before { background: var(--praca); }
/* Painel de cada instrumento: sem caixa própria, os filhos entram direto no painel */
.rede-detalhe { display: contents; }
.rede-painel { display: flex; flex-direction: column; gap: var(--espaco-3); padding: var(--espaco-5); border: 1px solid var(--linha); border-radius: calc(var(--raio-doc) * 1.5); min-height: 280px; }
.rede-painel h3 { font-size: 22px; }
.rede-painel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rede-painel li { font-size: 15px; padding-left: 18px; position: relative; color: var(--texto-suave); animation: aparecer .35s both; }
.rede-painel li::before { content: ""; position: absolute; left: 0; top: 18px; width: 10px; height: 2px; background: var(--acento); }
.rede-mensagem { margin-top: var(--espaco-7); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; font-weight: 500; max-width: 36ch; }

@media (max-width: 900px) {
  .rede-area { grid-template-columns: minmax(0, 1fr); }
}
.rede-painel li a { display: inline-block; padding: 6px 0; color: inherit; text-decoration: underline; text-decoration-color: var(--linha); text-underline-offset: 3px; }
.rede-painel li a:hover { color: var(--texto); text-decoration-color: currentColor; }

/* No celular e sem JavaScript: a rede sai e os painéis viram uma lista, cada instrumento com as suas
   ligações (cada ligação leva ao instrumento ligado, mais abaixo ou mais acima na lista). */
@media (max-width: 900px) {
  .rede-area { margin-top: 0; }
  .rede { display: none; }
  #rede-instrucao { display: none; }
  .rede-painel { padding: 0; border: 0; min-height: 0; gap: var(--espaco-3); }
  .js .rede-detalhe.alternavel:not(.ativo), .rede-detalhe { display: flex; }
}
@media (max-width: 900px) {
  .rede-detalhe { flex-direction: column; gap: 10px; padding: var(--espaco-4); border: 1px solid var(--linha); border-radius: var(--raio-doc); background: var(--superficie); scroll-margin-top: calc(var(--altura-cabecalho) + 16px); }
  .rede-detalhe:target { border-color: var(--texto); }
  .rede-detalhe h3 { font-size: 20px; }
  .rede-painel ul { gap: 0; }
  .rede-painel li { padding-left: 18px; animation: none; }
  .rede-painel li::before { top: 22px; }
  .rede-painel li a { display: block; min-height: 44px; padding: 10px 0; font-size: var(--texto-apoio); line-height: 1.5; }
}
html:not(.js) .rede, html:not(.js) #rede-instrucao { display: none; }
html:not(.js) .rede-area { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .rede-painel { padding: 0; border: 0; min-height: 0; }
html:not(.js) .rede-detalhe { display: flex; flex-direction: column; gap: 10px; padding: var(--espaco-4); border: 1px solid var(--linha); border-radius: var(--raio-doc); }
html:not(.js) .rede-painel li a { display: flex; align-items: center; min-height: 44px; }