/* ════════════════════════════════════════════════════════════════════
   NAV DA COLEÇÃO · interliga os 3 dossiês (Análise · Oferta · DSPC)
   Barra fina, fixa no topo. Não é o menu do site, é um alternador.
   Carregar depois de colors_and_type.css + forja.css.
   ════════════════════════════════════════════════════════════════════ */
.trio-nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 20px; padding: 14px 24px;
  background: rgba(15,13,7,0.82); backdrop-filter: blur(7px);
  border-bottom: 1px solid var(--linha-bronze);
}
.trio-nav .tlabel {
  font-family: var(--voz-sagrada); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--bronze);
}
.trio-nav .tlabel .am { color: var(--amarelo); }
.trio-nav .tsep { color: var(--linha-bronze); margin: 0 -8px; }
.trio-nav a {
  font-family: var(--voz-sagrada); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze-claro); transition: color 0.3s;
  padding: 5px 2px; position: relative;
}
.trio-nav a:hover { color: var(--amarelo); }
.trio-nav a.here { color: var(--amarelo); }
.trio-nav a.here::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--amarelo);
}
@media (max-width: 640px) {
  .trio-nav { gap: 4px 14px; padding: 11px 16px; }
  .trio-nav .tlabel { width: 100%; text-align: center; margin-bottom: 2px; }
  .trio-nav .tsep { display: none; }
  .trio-nav a { font-size: 10px; }
}