/* ==========================================================
   A INTERCONEXÃO DOCUMENTAL (#interconexao)
   O redesenho da figura do sócio nas cores do site: os documentos em círculos claros, o centro em
   tinta com o filete vermelho, os eixos como arcos por fora. No celular (até 900 px), o mesmo círculo em escala
   menor, com os documentos como pontos numerados, e os eixos como botões: o toque num eixo (ou num ponto, ou num
   arco) destaca o eixo e mostra a lista dele embaixo (js/secoes/interconexao.js). Sem JavaScript, as listas ficam
   todas à vista. Nada abaixo de 14 px no celular.
   ========================================================== */
.interconexao { margin: var(--espaco-6) auto 0; max-width: 1040px; }
.interconexao-svg { width: 100%; height: auto; overflow: visible; }
.ic-anel { fill: none; stroke: var(--linha); stroke-width: 10; }
.ic-raio { stroke: var(--texto-apagado); stroke-width: 1.2; stroke-dasharray: 3 6; opacity: .7; }
.ic-doc circle { fill: var(--fundo); stroke: var(--texto-apagado); stroke-width: 1.2; }
.ic-doc text { fill: var(--texto); font: 400 16px var(--font-texto); }
.ic-centro circle { fill: var(--praca); }
.ic-centro text { fill: var(--branco); font: 400 31px var(--font-titulo); }
.ic-centro-filete { fill: var(--branco); }
.ic-eixo-arco { fill: none; stroke: var(--texto); stroke-width: 4; stroke-linecap: round; }
/* Cada eixo com a sua cor: o arco e os documentos dele; um fio separa um eixo do outro (o sócio, 27/10, vídeo 4) */
.ic-fio { stroke: var(--texto); stroke-width: 1.5; }
.ic-eixo-1 { --eixo: var(--eixo-1); --eixo-texto: var(--eixo-texto-1); }
.ic-eixo-2 { --eixo: var(--eixo-2); --eixo-texto: var(--eixo-texto-2); }
.ic-eixo-3 { --eixo: var(--eixo-3); --eixo-texto: var(--eixo-texto-3); }
.ic-eixo-4 { --eixo: var(--eixo-4); --eixo-texto: var(--eixo-texto-4); }
.ic-eixo .ic-eixo-arco { stroke: var(--eixo); }
.ic-doc.ic-eixo-1 circle, .ic-doc.ic-eixo-2 circle, .ic-doc.ic-eixo-3 circle, .ic-doc.ic-eixo-4 circle { fill: var(--eixo); stroke: none; }
.ic-doc.ic-eixo-1 text, .ic-doc.ic-eixo-2 text, .ic-doc.ic-eixo-3 text, .ic-doc.ic-eixo-4 text { fill: var(--eixo-texto); }
.ic-eixo-nome { fill: var(--texto); font: 600 16px var(--font-texto); letter-spacing: .16em; text-transform: uppercase; }
.ic-eixo-rotulo { fill: var(--texto-suave); font-weight: 400; }

/* No computador, as listas ficam só para o leitor de tela (o desenho é aria-hidden) */
.interconexao-eixos { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ic-celular-svg, .ic-celular-botoes, .ic-celular-instrucao { display: none; }

@media (max-width: 900px) {
  .interconexao-svg { display: none; }
  .interconexao { margin-top: var(--espaco-5); }
  .ic-celular-svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; overflow: visible; }
  .ic-celular-svg .ic-anel { stroke-width: 5; }
  .ic-celular-svg .ic-raio { stroke-width: 1; stroke-dasharray: 2 4; }
  .ic-celular-svg .ic-fio { stroke-width: 1.2; }
  .ic-celular-svg .ic-eixo-arco { stroke-width: 5; }
  .ic-toque { fill: none; stroke: transparent; stroke-width: 30; pointer-events: stroke; }
  .ic-ponto circle { fill: var(--eixo); }
  .ic-ponto text { fill: var(--eixo-texto); font: 500 16px var(--font-texto); }
  .ic-celular-svg .ic-centro text { font: 400 16px var(--font-titulo); }
  .js .ic-celular-svg [data-eixo] { cursor: pointer; transition: opacity .2s; }
  /* Os outros eixos apagam: o ponto e o arco ficam claros, e o número, na cor do texto, continua legível (AA) */
  .ic-celular-svg .ic-apagado circle, .ic-celular-svg .ic-apagado .ic-eixo-arco { opacity: .2; }
  .ic-celular-svg .ic-apagado text { fill: var(--texto); }

  /* Os eixos como botões, como os quadros das fases do ciclo: a cor do eixo e o nome (o sócio, 28/10, tirou os números) */
  .js .ic-celular-instrucao { display: block; margin: var(--espaco-4) auto 0; max-width: 34em; text-align: center; font-size: 15px; line-height: 1.5; color: var(--texto-suave); }
  .js .ic-celular-botoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: var(--espaco-3); }
  .ic-celular-botao { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; text-align: left; color: var(--texto); background: transparent; border: 1px solid var(--linha); border-radius: 14px; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
  .ic-celular-botao-cor { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--eixo); box-shadow: 0 0 0 1px rgba(33, 31, 27, .22); }
  .ic-celular-botao-nome { font-size: 16px; line-height: 1.25; }
  .ic-celular-botao[aria-pressed="true"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
  .ic-celular-botao[aria-pressed="true"] .ic-celular-botao-cor { box-shadow: 0 0 0 2px var(--fundo); }

  /* As listas: com JavaScript, só a do eixo escolhido; sem ele, todas */
  .interconexao-eixos { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: grid; gap: 14px; margin-top: 14px; }
  .js .ic-lista:not(.ativo) { display: none; }
  .ic-lista { padding: 20px 20px 22px; border-radius: var(--raio); background: var(--superficie); box-shadow: 0 0 0 1px var(--linha); }
  .ic-lista h3 { display: flex; align-items: center; gap: 10px; font: 600 14px/1.3 var(--font-texto); letter-spacing: .16em; text-transform: uppercase; }
  .ic-lista h3::before { content: ""; flex: 0 0 22px; height: 10px; border-radius: 3px; background: var(--eixo, var(--texto)); box-shadow: 0 0 0 1px rgba(33, 31, 27, .22); }
  .ic-lista ol { list-style: none; margin-top: 8px; }
  .ic-lista li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); font-size: 16px; line-height: 1.45; }
  .ic-lista li:first-child { border-top: 0; }
  .ic-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--eixo); color: var(--eixo-texto); font-size: 14px; font-weight: 500; line-height: 1; }
}