/*
 * "Núcleo vivo": seção Família My Sat Synapse. Fiel ao protótipo aprovado
 * (~/compartilhado/mysat/my-sat-redes.html, variante "Núcleo vivo"). Carregado depois
 * de theme.css e restrito a .nucleo. O ciano continua só no ponto da marca.
 * As conexões representam a família de agentes, não integrações entre sistemas.
 */
.nucleo{
  --n-fundo:#080F26; --n-cartao-a:#27385C; --n-cartao-b:#141E37;
  --n-sel-a:#365DE4; --n-sel-b:#793DDE; --n-conexao:#B591FF; --n-texto:#F5F6FF;
  --n-suave:#B7A7FF; --n-borda:#52618B;
  position:relative;overflow:hidden;color:var(--n-texto);
  background:radial-gradient(ellipse at 50% 45%,#292461 0,transparent 54%),var(--n-fundo);
}
.nucleo .section-top h2{color:var(--n-texto)}
/* palavra destacada em azul claro, sem violeta */
.nucleo .section-top h2 .destaque{color:#8FB0FF}
/* marca Synapse completa (negativo) no título: 260 px, acima do mínimo de 130 px; sem esticar */
.nucleo-marca{display:block;width:260px;height:auto;margin:0 0 26px}
@media(max-width:760px){.nucleo-marca{width:200px;margin-bottom:20px}}
.nucleo .section-top>p{color:#C9C3EE}
.nucleo.products .eyebrow{color:var(--n-suave)}
.nucleo .section-top .eyebrow:before{background:var(--n-suave)}
.nucleo .products-note,.nucleo .products-note p{color:#9C97C7}

/* rede: SVG das conexões atrás, cartões e núcleo na frente, sobre a malha de pontos */
.nucleo .agent-explorer{display:block;border:0}
.nucleo-rede{position:relative;padding:8px 0;background-image:radial-gradient(#9E90DC25 1px,transparent 1px);background-size:22px 22px}
.nucleo-linhas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.nucleo-linhas path{fill:none;stroke:#7163A36B;stroke-width:1.4;transition:stroke .25s,stroke-width .25s}
.nucleo-linhas path.ativa{stroke:var(--n-conexao);stroke-width:3;filter:drop-shadow(0 0 5px #9664FF)}
.nucleo-linhas .sinal{fill:#C7B5FF;opacity:.65;filter:drop-shadow(0 0 5px #A379FF)}
.nucleo-linhas .sinal.forte{opacity:1}

.nucleo .agent-tabs{
  position:relative;z-index:1;display:grid;padding:0;border:0;
  grid-auto-flow:column;grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr);grid-template-rows:repeat(6,auto);
  column-gap:96px;row-gap:14px;align-items:stretch;
}
.nucleo .agent-tabs button{
  display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 16px;margin:0;position:relative;
  border:1px solid var(--n-borda);border-radius:14px;color:var(--n-texto);text-align:left;
  background:linear-gradient(145deg,var(--n-cartao-a),var(--n-cartao-b));box-shadow:0 6px 24px #02050F55;
  transform:none;transition:transform .2s ease,box-shadow .25s ease,border-color .25s ease;
}
.nucleo .agent-tabs button:hover:not([aria-selected=true]),
.nucleo .agent-tabs button:focus-visible:not([aria-selected=true]){
  transform:scale(1.04);background:linear-gradient(145deg,var(--n-cartao-a),var(--n-cartao-b));
  border-color:#BEABFF;box-shadow:0 0 28px #8F60FF55;
}
.nucleo .agent-tabs button:focus-visible{outline:2px solid var(--n-texto);outline-offset:3px}
.nucleo .agent-tabs button[aria-selected=true]{
  background:linear-gradient(125deg,var(--n-sel-a),var(--n-sel-b));color:#fff;border-color:#C1AEFF;
  box-shadow:0 0 0 3px #9976FF26,0 0 32px #814DEB70;transform:scale(1.045);
}
/* indicador de seleção: ponto branco luminoso no canto do cartão */
.nucleo .agent-tabs button[aria-selected=true]::after{content:'';position:absolute;right:8px;top:8px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff}
.nucleo .agent-tabs .agent-emblem{width:44px;height:44px;margin:0;border-radius:12px 12px 12px 4px;background:rgba(255,255,255,.06);color:#B7A5FF;border:1px solid rgba(255,255,255,.08)}
.nucleo .agent-tabs .agent-emblem svg{width:26px;height:26px}
.nucleo .agent-tabs button[aria-selected=true] .agent-emblem{background:rgba(255,255,255,.16);color:#fff}
.nucleo .agent-tabs button>span:nth-child(2){font:700 17px/1.25 Manrope,Arial,sans-serif;min-width:0}
.nucleo .agent-tabs button small{display:block;margin-top:3px;font:400 13px/1.35 'Instrument Sans',Arial,sans-serif;color:#B9BFDD}
.nucleo .agent-tabs button[aria-selected=true] small{color:rgba(255,255,255,.85)}
.nucleo .agent-tabs .tab-sign{display:none}

/* núcleo */
.nucleo-core{grid-row:span 6;align-self:center;justify-self:center;position:relative;width:200px;aspect-ratio:1;display:grid;place-items:center}
/* centro marinho sólido (a "placa" que o manual do Synapse pede para a versão negativo,
   com o SYN em névoa legível) e o brilho violeta só na borda do círculo */
.nucleo-miolo{
  position:relative;z-index:2;width:128px;height:128px;border-radius:50%;border:1px solid #A68CFF;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(circle,#0B2447 0 58%,#2A2477 74%,#6841D1 90%,#8F6BFF 100%);
  box-shadow:0 0 50px #8655FF77;animation:nucleo-pulso 3s ease-in-out infinite;
}
/* logo Synapse (versão nome, negativo): 96 px, acima do mínimo de 78 px do manual; nunca esticar */
.nucleo-miolo img{display:block;width:96px;height:auto}
.nucleo-anel{position:absolute;z-index:1;border-radius:50%;border:1px solid #956FFF70;pointer-events:none}
.nucleo-anel.n1{width:156px;height:156px;border-top:2px solid #D3BBFF;border-right-color:transparent;animation:nucleo-giro 9s linear infinite}
.nucleo-anel.n2{width:182px;height:182px;border-left:2px solid #627DFF;border-bottom-color:transparent;animation:nucleo-giro 13s linear infinite reverse}
.nucleo-onda{position:absolute;z-index:1;width:120px;height:120px;border-radius:50%;border:2px solid #B799FF;opacity:0;pointer-events:none}
.nucleo-onda.pulsar{animation:nucleo-onda .75s ease-out forwards}
/* o pulso varia só o brilho em volta: o logo Synapse dentro do círculo não muda de cor */
@keyframes nucleo-pulso{50%{box-shadow:0 0 80px #8655FFCC}}
@keyframes nucleo-giro{to{transform:rotate(360deg)}}
@keyframes nucleo-onda{from{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(3)}}
/* fora da tela ou aba inativa: tudo para */
.nucleo.nucleo-pausado .nucleo-miolo,.nucleo.nucleo-pausado .nucleo-anel,.nucleo.nucleo-pausado .nucleo-onda{animation-play-state:paused}

/* painel do agente, escuro como no protótipo, com o conteúdo completo do site */
.nucleo #agent-panel{
  margin-top:40px;color:var(--n-texto);
  background:linear-gradient(115deg,#263760,#1B2244);border:1px solid #7159BC;border-left:4px solid #A280FF;
  border-radius:12px;box-shadow:0 12px 35px #0003;
}
.nucleo #agent-panel .agent-kicker{display:inline-block;padding:5px 10px;border-radius:20px;background:#7354C955;color:#E3D8FF}
.nucleo #agent-panel h3,.nucleo #agent-panel h4{color:var(--n-texto)}
.nucleo #agent-panel .agent-content p{color:#D4C9FF}
.nucleo #agent-panel .agent-content li{color:#E6E2FA;border-color:rgba(255,255,255,.12)}
.nucleo #agent-panel .agent-emblem.large{background:rgba(255,255,255,.08);color:#C9B6FF;border-color:rgba(255,255,255,.1)}
.nucleo #agent-panel .text-link{color:#E3D8FF}
.nucleo #agent-panel .text-link:focus-visible{outline-color:#fff}
.nucleo #agent-panel .scenario{background:#121A36;border:1px solid rgba(181,145,255,.25)}
.nucleo #agent-panel:focus-visible{outline:2px solid #fff;outline-offset:4px}
.nucleo-anuncio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(max-width:1180px){
  .nucleo .agent-tabs{grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);column-gap:64px}
}
/* tablet e celular: núcleo em cima, agentes em duas colunas */
@media(max-width:1023px){
  .nucleo .agent-tabs{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;column-gap:40px;row-gap:14px}
  .nucleo-core{order:-1;grid-column:1/-1;grid-row:auto;width:190px;margin:0 auto 18px}
  .nucleo #agent-panel{margin-top:30px}
}
/* telas estreitas: uma coluna, conexões pela margem esquerda */
@media(max-width:559px){
  .nucleo .agent-tabs{grid-template-columns:minmax(0,1fr);padding-left:26px}
  .nucleo .agent-tabs button{min-height:66px;padding:11px 14px}
  .nucleo .agent-tabs button>span:nth-child(2){font-size:16px}
  .nucleo-core{width:170px}
  .nucleo-miolo{width:112px;height:112px}
  .nucleo-miolo img{width:84px}
  .nucleo-anel.n1{width:138px;height:138px}
  .nucleo-anel.n2{width:162px;height:162px}
}
@media(prefers-reduced-motion:reduce){
  .nucleo-miolo,.nucleo-anel,.nucleo-onda.pulsar{animation:none}
  .nucleo .agent-tabs button,.nucleo-linhas path{transition:none}
  .nucleo .agent-tabs button:hover:not([aria-selected=true]),.nucleo .agent-tabs button:focus-visible:not([aria-selected=true]){transform:none}
}
/* no cartão selecionado (gradiente azul/violeta) o cinza do logo some: tom bem claro da
   mesma família, com contraste de 4,5:1 até sobre o azul mais claro do gradiente */
.nucleo .agent-tabs button[aria-selected=true] .syn{color:#EEF1F6}