/* Ecossistema SG (mapa dos 11 sistemas): estilos do componente. Tokens vêm de /assets/base.css. */
.eco { position: relative; width: 100%; }
.eco-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eco-svg .ln { fill: none; stroke: rgba(201,168,130,.22); stroke-width: 1.4; transition: stroke .3s; }
.eco-svg .ln.on { stroke: var(--gold, #c9a882); stroke-width: 2; }
.eco-svg .pk { fill: var(--gold, #c9a882); }
.eco-svg .eco-anel { fill: none; stroke: rgba(201,168,130,.12); stroke-dasharray: 2 7; }
.eco-nos { position: absolute; inset: 0; }
.eco-no { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-ui, 'Inter', system-ui, sans-serif); font-size: 13px; line-height: 1.25; text-align: center; padding: 10px 12px; border-radius: 14px; background: rgba(10,26,32,.92); border: 1px solid rgba(201,168,130,.22); color: var(--text, #f0ede8); width: 132px; transition: border-color .2s, background .2s, transform .25s cubic-bezier(.16,1,.3,1); cursor: pointer; }
.eco-no small { display: block; font-size: 11px; color: var(--muted, #8aacb8); margin-top: 2px; }
.eco-no:hover { border-color: rgba(201,168,130,.5); }
.eco-no[aria-pressed="true"] { border-color: var(--gold, #c9a882); background: rgba(42,30,18,.95); transform: translate(-50%, -50%) scale(1.06); }
.eco-no.core { width: 150px; padding: 18px 12px; border-color: rgba(201,168,130,.5); background: radial-gradient(circle at 50% 30%, rgba(201,168,130,.18), rgba(10,26,32,.95)); cursor: default; }
.eco-no.core b { display: block; font-family: var(--font-d, 'Playfair Display', serif); font-size: 19px; font-weight: 500; }
.eco-no.core::after { content: ''; position: absolute; inset: -14px; border-radius: 26px; border: 1px solid rgba(201,168,130,.25); animation: eco-pulso 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes eco-pulso { 0%, 100% { opacity: .25; transform: scale(.96); } 50% { opacity: .8; transform: scale(1.04); } }

/* celular: órbita. Os nós giram no sentido do anel e o texto gira ao contrário, para continuar legível. */
.eco-movel .eco-no { width: 82px; font-size: 11px; padding: 7px 5px; border-radius: 11px; }
.eco-movel .eco-no small { font-size: 9.5px; }
.eco-movel .eco-no.core { width: 90px; padding: 9px 6px; }
.eco-movel .eco-no.core b { font-size: 14px; }
.eco-movel .eco-nos, .eco-movel .eco-svg { animation: eco-gira 90s linear infinite; transform-origin: 50% 50%; }
.eco-movel .eco-no { animation: eco-contra 90s linear infinite; }
.eco-movel .eco-no[aria-pressed="true"] { animation: eco-contra 90s linear infinite; }
@keyframes eco-gira { to { transform: rotate(360deg); } }
@keyframes eco-contra { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
.eco-movel .eco-no[aria-pressed="true"] { border-color: var(--gold, #c9a882); background: rgba(42,30,18,.95); }
@media (prefers-reduced-motion: reduce) {
  .eco-movel .eco-nos, .eco-movel .eco-svg, .eco-movel .eco-no, .eco-no.core::after { animation: none !important; }
}

/* painel de informação do sistema escolhido */
.eco-info h3 { margin-bottom: 4px; }
.eco-info .eco-sub { font-family: var(--font-ui, 'Inter', sans-serif); font-size: 13px; color: var(--gold, #c9a882); margin-bottom: 14px; }
.eco-info dl { display: flex; flex-direction: column; gap: 10px; }
.eco-info dt { font-family: var(--font-ui, 'Inter', sans-serif); font-size: 12px; color: var(--muted, #8aacb8); }
.eco-info dd { font-size: 15px; color: var(--text-2, #c9c5bd); line-height: 1.55; }