/* Barra superior e ícones de redes sociais (inseridos por /js/social.js) */
.topbar { background: var(--navy-900); color: #cbd5e1; font-size: .78rem; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 36px; }
.topbar-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-txt strong { color: var(--gold-light); font-weight: 600; }

.sociais { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sociais li { padding: 0; }
.sociais a {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  color: #cbd5e1; transition: color .2s, background .2s, transform .2s;
}
.sociais a:hover { color: var(--navy-900); background: var(--gold-light); transform: translateY(-1px); }
.sociais svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sociais a.em-breve { opacity: .55; cursor: default; }
.sociais a.em-breve:hover { color: #cbd5e1; background: rgba(255,255,255,.08); transform: none; }
.sociais a[data-dica]:hover::after, .sociais a[data-dica]:focus-visible::after {
  content: attr(data-dica); position: absolute; top: calc(100% + 6px); right: 0; z-index: 5;
  background: var(--navy-800); color: #fff; font-size: .72rem; font-weight: 500; white-space: nowrap;
  padding: 5px 9px; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.25); pointer-events: none;
}

/* Rodapé: ícones alinhados à direita */
.sociais-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 22px; }
.sociais-rodape > span { font-size: .82rem; color: #94a3b8; }
.sociais-rodape .sociais { gap: 8px; }
.sociais-rodape .sociais a { width: 38px; height: 38px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.sociais-rodape .sociais svg { width: 18px; height: 18px; }
.sociais-rodape .sociais a[data-dica]:hover::after, .sociais-rodape .sociais a[data-dica]:focus-visible::after { top: auto; bottom: calc(100% + 6px); }

/* Compensa a altura extra do cabeçalho fixo */
html.com-topbar { scroll-padding-top: 120px; }
html.com-topbar nav ul#menu { top: 100%; }
html.com-topbar main > :first-child { margin-top: 36px; }

@media (max-width: 600px) {
  .topbar-txt { display: none; }
  .topbar-in { justify-content: flex-end; height: 34px; }
  html.com-topbar main > :first-child { margin-top: 34px; }
  .sociais-rodape { justify-content: center; flex-wrap: wrap; }
}