/* Topo fixo, menu numerado, barra de leitura, anel de navegação e o mapa do site em ciclo. */
.topo { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--topo-altura); display: flex; align-items: center; transition: background .3s, box-shadow .3s; }
.topo.rolou { background: rgba(10, 23, 51, .92); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.topo-linha { display: flex; align-items: center; gap: 24px; }
.marca img { width: 170px; height: auto; }
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a { color: #D7E0F2; text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 999px; position: relative; transition: color .2s, background .2s; }
.menu a i { font-style: normal; font-size: 10px; color: var(--caminho); margin-right: 6px; vertical-align: 2px; }
.menu a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.menu a.ativo { color: #fff; background: rgba(91, 140, 255, .16); }
.menu a.ativo i { color: var(--verde); }
.btn-topo { padding: 9px 18px; font-size: 14px; }
.menu-toggle { display: none; margin-left: auto; background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .4); border-radius: 999px; padding: 8px 16px; font: 700 14px Sora, sans-serif; cursor: pointer; }
.topo-progresso { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.topo-progresso span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--caminho), #fff 80%, var(--verde)); transition: width .15s linear; }

@media (max-width: 980px) {
  .menu { position: fixed; inset: var(--topo-altura) 0 auto 0; flex-direction: column; background: var(--azul); padding: 12px 16px 20px; gap: 2px; transform: translateY(-120%); transition: transform .35s ease; box-shadow: 0 20px 40px rgba(0, 0, 0, .3); }
  .menu.aberto { transform: none; }
  .menu a { padding: 12px 14px; font-size: 16px; }
  .menu-toggle { display: inline-flex; }
  .btn-topo { display: none; }
}

/* anel fixo: enche com a rolagem; o verde acende ao chegar no contato */
.anel-nav { position: fixed; right: 22px; bottom: 22px; z-index: 45; width: 64px; height: 64px; border-radius: 50%; border: 0; padding: 8px; cursor: pointer; background: var(--azul); box-shadow: 0 10px 30px rgba(10, 23, 51, .4); transition: transform .25s, opacity .3s; opacity: 0; transform: scale(.6); pointer-events: none; }
.anel-nav.mostra { opacity: 1; transform: none; pointer-events: auto; }
.anel-nav:hover { transform: scale(1.06); }
.anel-nav svg { width: 100%; height: 100%; }
.anel-nav path { fill: none; stroke-width: 14; }
.anel-nav .trilho { stroke: rgba(255, 255, 255, .15); }
.anel-nav .enche { stroke: #fff; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .2s linear; }
.anel-nav .sim { stroke: rgba(31, 191, 117, .2); transition: stroke .4s, filter .4s; }
.anel-nav.fechou .sim { stroke: var(--verde); filter: drop-shadow(0 0 4px var(--verde)); }
.anel-rotulo { position: absolute; right: 74px; top: 50%; transform: translateY(-50%); background: var(--azul); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; white-space: nowrap; opacity: 0; transition: opacity .25s; pointer-events: none; }
.anel-nav:hover .anel-rotulo, .anel-nav:focus-visible .anel-rotulo { opacity: 1; }

/* mapa do site em forma de ciclo */
.mapa-ciclo { position: fixed; inset: 0; z-index: 60; background: radial-gradient(circle at 50% 50%, #142a59, var(--azul) 70%); display: grid; place-items: center; animation: abre .35s ease; }
.mapa-ciclo[hidden] { display: none; }
@keyframes abre { from { opacity: 0; transform: scale(1.04); } }
.mapa-fechar { position: absolute; top: 18px; right: 22px; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.mapa-roda { position: relative; width: min(560px, 86vw); aspect-ratio: 1; }
.mapa-roda svg { width: 100%; height: 100%; }
.mapa-roda path { fill: none; stroke-width: 6; }
.mapa-roda .trilho { stroke: rgba(255, 255, 255, .22); }
.mapa-roda .sim { stroke: var(--verde); filter: drop-shadow(0 0 6px var(--verde)); }
.mapa-itens a { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.mapa-itens a b { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--azul-3); border: 2px solid var(--caminho); font-size: 13px; transition: background .2s, transform .2s; }
.mapa-itens a:hover b, .mapa-itens a.ativo b { background: var(--caminho); transform: scale(1.12); }
.mapa-itens a.item-sim b { border-color: var(--verde); color: var(--verde); }
.mapa-itens a.item-sim:hover b { background: var(--verde); color: var(--azul); }
.mapa-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
@media (max-width: 560px) { .mapa-centro { padding: 10px 16px; font-size: 13px; } }
.mapa-centro:hover { transform: translate(-50%, calc(-50% - 2px)); }
@media (max-width: 560px) { .mapa-itens a { font-size: 12px; } .mapa-itens a b { width: 34px; height: 34px; } .anel-nav { right: 14px; bottom: 14px; width: 56px; height: 56px; } }

/* Link "Equipe" (painel de metas): separado das seções, discreto, com cadeado. */
.menu a.menu-equipe { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: #AFC0E3; border: 1px solid rgba(255, 255, 255, .16); }
.menu a.menu-equipe svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu a.menu-equipe:hover { color: #fff; border-color: rgba(31, 191, 117, .55); background: rgba(31, 191, 117, .1); }
@media (max-width: 980px) { .menu a.menu-equipe { margin: 8px 0 0; justify-content: flex-start; } }