/* ==========================================================================
   ÍNDICE DE ÂNCORAS — anc-
   Barra "nesta página" que gruda no topo e marca a seção em leitura.
   Tokens usados: --bg --fg --fg-2 --fg-muted --rule --accent --dark
                  --display --radius-pill --ease --nav-h
   Parafusos locais:
     --anc-top   onde a barra gruda. 0 por padrão; var(--nav-h) sob menu fixo
     --anc-z     camada. 90: abaixo do menu fixo (100), acima do conteúdo
     --anc-x/w   posição e largura da marca, ESCRITAS pelo script
   ========================================================================== */

.anc{
  position:sticky;
  top:var(--anc-top,0px);
  z-index:var(--anc-z,90);
  background:var(--bg);
  border-block:1px solid var(--rule);
  transition:background .35s var(--ease);
}
/* Grudada, ela passa por cima do conteúdo, e o fundo sólido cortaria a foto
   de baixo com uma régua. Vidro no lugar — a mesma receita do menu fixo, com
   a mistura feita sobre o --bg do escopo, para servir a .sec-deep e a
   .sec-paper sem uma variação de código. */
.anc.is-preso{
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}

.anc-in{display:flex;align-items:center;gap:clamp(18px,3vw,40px);min-height:58px}

.anc-titulo{
  flex:0 0 auto;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.01em;
  color:var(--fg);white-space:nowrap;
}

/* O trilho rola de lado quando os links não cabem; a marca mora DENTRO dele,
   para rolar junto com os links em vez de ficar parada sobre o lugar errado. */
.anc-trilho{
  position:relative;flex:1 1 auto;min-width:0;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}
.anc-trilho::-webkit-scrollbar{display:none}

.anc-lista{display:flex;gap:clamp(18px,2.4vw,32px);white-space:nowrap}
.anc-link{
  display:block;padding:19px 0 18px;
  font-size:13px;letter-spacing:.02em;color:var(--fg-muted);
  transition:color .25s;
}
.anc-link:hover,
.anc-link[aria-current]{color:var(--fg)}
.anc-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* A marca de "você está aqui": um filete de 2px na cor de marca, colado ao
   pé do trilho. Anda de um link para o outro por transform — nunca por left
   ou width animados, que refariam o layout da barra a cada quadro. A largura
   entra por scaleX sobre uma base de 1px. Sem script ela nem aparece. */
.anc-marca{
  position:absolute;left:0;bottom:0;
  width:1px;height:2px;background:var(--accent);
  transform-origin:0 50%;
  transform:translateX(var(--anc-x,0px)) scaleX(var(--anc-w,0));
  opacity:0;
  transition:transform .5s var(--ease),opacity .3s;
}
.anc.is-ativo .anc-marca{opacity:1}
@media(prefers-reduced-motion:reduce){
  .anc-marca{transition:opacity .3s}
}

.anc-cta{
  flex:0 0 auto;
  font-family:var(--display);font-weight:700;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  background:var(--accent);color:var(--dark);
  border-radius:var(--radius-pill);padding:10px 18px;
  transition:background .3s;
}
.anc-cta:hover{background:var(--fg)}

@media(max-width:860px){
  .anc-titulo{display:none}
  /* As bordas do trilho dissolvem, para o link cortado na ponta ler como
     "tem mais para o lado" e não como erro de layout. */
  .anc-trilho{
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%);
  }
  .anc-lista{padding-inline:14px 22px}
}
@media(max-width:480px){
  .anc-cta{padding:9px 14px;font-size:10px}
}