/* ============================================================
   Nav flutuante (pill) partilhada por / e /gig
   Reproduz a FloatingNav do /marketplace em CSS estatico:
   pill preta, fixa e centrada em baixo, que aparece ao rolar
   (a barra de cima esconde-se em simultaneo, ver header.css).
   Cores e raios vem de tokens.css; o texto viaja via data-i18n.
   ============================================================ */
.floating-nav{
  position:fixed;
  left:50%; bottom:40px;
  transform:translateX(-50%) translateY(16px);
  z-index:5000;
  display:flex; align-items:center; gap:8px;
  max-width:calc(100vw - 24px);
  padding:7px 8px 7px 20px;
  background:var(--black);
  color:#fcfcfc;
  border-radius:100px;
  box-shadow:0 4px 24px 8px rgba(75,75,75,.17);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.floating-nav.is-visible{
  opacity:1; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* Lista de secoes: rola na horizontal se nao couber (mobile), sem barra visivel. */
.fnav-links{
  display:flex; align-items:center; gap:2px;
  min-width:0; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.fnav-links::-webkit-scrollbar{ display:none; }

.fnav-link{
  flex:0 0 auto;
  display:inline-flex; align-items:center;
  padding:8px 12px; border-radius:100px;
  font:600 14px/1 'Abadi','Inter',sans-serif;
  color:#fcfcfc; opacity:.82; text-decoration:none; white-space:nowrap;
  transition:color .2s ease, opacity .2s ease;
}
.fnav-link:hover,
.fnav-link:focus-visible{ color:var(--green-600); opacity:1; }
.fnav-link.is-active{ color:var(--green-700); opacity:1; font-weight:700; }

/* CTA claro para o Marketplace, com seta branca em circulo verde-600. */
.fnav-cta{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 6px 6px 16px; border-radius:100px;
  background:#fcfcfc; color:var(--black);
  font:700 14px/1 'Abadi','Inter',sans-serif;
  text-decoration:none; white-space:nowrap;
  transition:background .2s ease;
}
.fnav-cta:hover,
.fnav-cta:focus-visible{ background:#ffffff; }
.fnav-cta .fnav-cta-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:100px;
  background:var(--green-600); color:#ffffff;
}
.fnav-cta .fnav-cta-ico svg{ width:15px; height:15px; display:block; }

/* Compacto (<=960px): esconder o(s) CTA(s); a pill fica so com a tira de
   links de seccao. E o mesmo limiar a que o cabecalho ja esconde os botoes
   GIG/Marketplace (ver header.css), pelo que os CTAs da pill, que espelham
   esses botoes, acompanham. Resolve o aperto de mobile (os links passam a ter
   a largura toda) e os CTAs voltam em desktop/tablet largo. Padding simetrico
   para a pill ficar equilibrada so com os links, sem gap vazio. */
@media (max-width:960px){
  .floating-nav .fnav-cta{ display:none; }
  .floating-nav{ padding:7px 16px; }
}

@media (max-width:560px){
  .floating-nav{ bottom:20px; padding:6px 12px; gap:6px; }
  .fnav-link{ padding:8px 10px; }
}

@media (prefers-reduced-motion:reduce){
  .floating-nav{ transition:opacity .18s ease; }
}