/* ==========================================================================
   DIAGRAMA HUB — dois territórios ligados a um núcleo em órbita
   Prefixo: hub-
   Tokens usados: --fg --fg-2 --fg-muted --rule --rule-2 --accent --accent-2
                  --display --sans --ease
   ========================================================================== */


.hub-head .eyebrow{margin-inline:auto}
/* nowrap: o título é curto e centralizado; quebrar em duas linhas aqui
   desequilibra a composição simétrica do diagrama logo abaixo. */
.hub-head .sec-title{max-width:none;margin-inline:auto;white-space:nowrap}
.hub-head .sec-lead{max-width:63ch;margin-inline:auto}

.hub{position:relative;margin-top:clamp(50px,8vh,86px)}

/* ---- os traços ----
   O "d" de cada path é escrito pelo script, a partir da posição real dos
   elementos. pathLength="1" (também posto pelo script) normaliza o
   comprimento, então dasharray/dashoffset:1 vale para qualquer forma. */
.hub-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.hub-link{fill:none;stroke:var(--rule-2);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}
.hub.is-drawn .hub-link{transition:stroke-dashoffset 1.4s var(--ease);stroke-dashoffset:0}
.hub.is-drawn .hub-link-down{transition-delay:.25s}

.hub-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(210px,24vw,290px) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:center;position:relative;z-index:1;
}

/* ---- figuras ---- */
.hub-fig{width:clamp(78px,9vw,112px);margin-bottom:22px}
.is-right .hub-fig{margin-left:auto}
/* Os ícones chegam como arquivo, então entram por fade. O "desenho" por
   stroke-dashoffset só funcionaria com o SVG inline. */
.hub-ic{
  width:100%;height:auto;display:block;
  opacity:0;transform:translateY(8px);
  transition:opacity 1s var(--ease) .15s,transform 1s var(--ease) .15s;
}
.hub.is-drawn .hub-ic{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.hub-ic{opacity:1;transform:none;transition:none}}

/* ---- núcleo ----
   Sem borda nem fundo próprio: o único círculo da composição é o anel
   externo. Um segundo círculo em volta do texto vira alvo, não centro. */
.hub-core{position:relative;aspect-ratio:1;display:grid;place-items:center}
.hub-orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-ring{fill:none;stroke:var(--rule-2);stroke-width:1}
.hub-spin{transform-origin:150px 150px;animation:hubOrbit 26s linear infinite}
.hub-dot{fill:var(--accent)}
.hub-dot.is-sm{fill:var(--accent-2)}
@keyframes hubOrbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hub-spin{animation:none}}

.hub-core-inner{
  position:relative;z-index:2;text-align:center;padding:16px;
  width:62%;aspect-ratio:1;display:grid;place-content:center;
}
.hub-core-inner strong{
  display:block;font-family:var(--sans);font-style:italic;font-weight:300;
  font-size:clamp(15px,1.7vw,19px);line-height:1.3;color:var(--fg);
}

/* ---- listas laterais ---- */
.hub-side{min-width:0}
.hub-cap{display:flex;align-items:baseline;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.hub-cap b{
  font-family:var(--display);font-weight:700;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}
.hub-cap span{font-size:11px;color:var(--fg-muted);letter-spacing:.06em}

.hub-list li{
  font-size:15px;line-height:1.6;color:var(--fg-2);
  padding:13px 0;border-bottom:1px solid var(--rule);
  display:flex;gap:11px;align-items:flex-start;
  transition:color .3s,border-color .3s;
}
.hub-list li:hover{color:var(--fg);border-bottom-color:var(--rule-2)}
.hub-list li::before{
  content:"";flex:0 0 auto;width:5px;height:5px;margin-top:8px;border-radius:50%;
  background:var(--accent-2);transition:background .3s,transform .3s;
}
.hub-list li:hover::before{background:var(--accent);transform:scale(1.3)}

/* A coluna da direita é espelhada: texto, marcador e legenda invertem. */
.hub-side.is-right{text-align:right}
.hub-side.is-right .hub-cap{justify-content:flex-end}
.hub-side.is-right .hub-list li{flex-direction:row-reverse}

/* ---- terceira ramificação ----
   Não é card avulso: pendura no mesmo traço que liga as pontas ao núcleo
   (o hub-link-down, calculado a partir da base do núcleo). */
.hub-foot{
  margin-top:clamp(46px,7vh,72px);padding-top:clamp(22px,3vh,32px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  position:relative;z-index:1;
}
.hub-foot-mark{
  position:absolute;top:0;left:50%;width:6px;height:6px;background:var(--accent-2);
  transform:translate(-50%,-50%) rotate(45deg);
}
.hub-foot b{
  font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap;
}
.hub-foot p{font-size:15px;line-height:1.6;color:var(--fg-muted);max-width:50ch;margin-top:10px}

/* ---- mobile ----
   Uma coluna, tudo centralizado, sem traços: em pilha vertical eles ligariam
   coisas que já estão obviamente ligadas. */
@media(max-width:900px){
  .hub-grid{grid-template-columns:1fr;gap:38px}
  .hub-links{display:none}
  .hub-core{width:100%;max-width:224px;margin-inline:auto}
  .hub-core-inner{width:72%;padding:14px;place-items:center}
  .hub-fig,.is-right .hub-fig{margin-inline:auto}
  .hub-side,.hub-side.is-right{text-align:center}
  .hub-cap,.hub-side.is-right .hub-cap{justify-content:center}
  .hub-list li,.hub-side.is-right .hub-list li{display:block;text-align:center}
  .hub-list li::before{display:none}
  .hub-cap b{font-size:14px}
  .hub-foot b{font-size:14px}
}

@media(max-width:560px){.hub-head .sec-title{white-space:normal}}