/* nav-pill.css — barra de navegação em pílula flutuante.
   Porte do componente `animated-nav-framer` (Framer Motion) para o stack da landing:
   HTML + CSS + GSAP 3.15, que o site já carrega.

   Comportamento: a pílula fica centrada no topo; rolando para baixo ela encolhe até
   virar um círculo com o ícone ☰; rolando para cima volta a abrir. Clicar no círculo
   reabre a barra.

   Guard-rails Bedrock: nenhuma cor nova (só --tq-blue, --tq-sky e as superfícies da
   marca); a leitura sobre fundo claro/escuro é resolvida por TROCA DE SUPERFÍCIE,
   não por sombra decorativa. */

/* A .site-nav vira só o trilho de posicionamento — a barra visível é a pílula. */
.site-nav.site-nav--pill{
  position:fixed;top:20px;left:0;right:0;z-index:60;
  background:none;backdrop-filter:none;border:0;height:auto;pointer-events:none;
}
.site-nav.site-nav--pill .site-nav__row{position:relative;justify-content:center;height:auto;padding:0}

.tqpill{
  pointer-events:auto;position:relative;display:flex;align-items:center;
  height:48px;overflow:hidden;border-radius:9999px;
  border:1px solid rgba(246,249,254,.20);
  background:rgba(12,30,56,.58);backdrop-filter:saturate(1.2) blur(10px);
  color:var(--tq-on-dark);
  transition:background .35s ease,border-color .35s ease,color .35s ease;
}
/* Fora do hero a pílula troca de superfície para ler sobre o fundo claro. */
.tqpill[data-surface="light"]{
  border-color:var(--tq-line);
  background:color-mix(in srgb,var(--tq-canvas) 84%,transparent);
  color:var(--tq-ink);
}
.tqpill[data-state="collapsed"]{cursor:pointer}
.tqpill[data-state="collapsed"]:hover{border-color:var(--tq-sky)}
.tqpill[data-surface="light"][data-state="collapsed"]:hover{border-color:var(--tq-blue)}

/* Marca: só o ícone Deslocamento, sem wordmark — o nome já domina o hero logo abaixo.
   Sai girando quando a pílula encolhe. As placas seguem a regra da marca: sobre superfície
   escura o par é on-dark + sky; sobre a clara vira ink + azul. */
.tqpill__mark{display:flex;align-items:center;flex:0 0 auto;padding:0 13px 0 17px}
.tqpill__mark svg{width:23px;height:17px;flex:0 0 auto}
.tqpill__slab--base{fill:var(--tq-on-dark)}
.tqpill__slab--accent{fill:var(--tq-sky)}
.tqpill[data-surface="light"] .tqpill__slab--base{fill:var(--tq-ink)}
.tqpill[data-surface="light"] .tqpill__slab--accent{fill:var(--tq-blue)}

.tqpill__links{display:flex;align-items:center;gap:2px;padding-right:6px;white-space:nowrap}
.tqpill__links a:not(.tqpill__cta){
  color:inherit;opacity:.76;text-decoration:none;padding:8px 12px;
  font-family:var(--tq-font-display);font-weight:600;font-size:14px;line-height:1;
}
.tqpill__links a:not(.tqpill__cta):hover{opacity:1;text-decoration:none}
.tqpill__cta{font-size:14px;padding:10px 18px;color:#fff!important;margin-left:6px}
.tqpill__cta:hover{text-decoration:none}
.tqpill[data-state="collapsed"] .tqpill__links,
.tqpill[data-state="collapsed"] .tqpill__mark{pointer-events:none}

/* o ☰ ocupa o centro do círculo; invisível enquanto a barra está aberta */
.tqpill__burger{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;
}
.tqpill__burger svg{width:17px;height:17px;color:currentColor}

/* ---------- Mobile: seções numa folha abaixo da pílula ----------
   Abaixo de 760px os links de seção não cabem na pílula. Ela guarda a marca, o CTA e um ☰;
   as seções abrem numa folha logo abaixo, na mesma linguagem da barra. Sem overlay de tela
   cheia: o conteúdo do site continua visível atrás. */
.tqpill__more{
  display:none;align-items:center;justify-content:center;
  width:34px;height:34px;margin:0 7px 0 -2px;padding:0;flex:0 0 auto;
  background:none;border:0;border-radius:9999px;color:inherit;cursor:pointer;
}
.tqpill__more svg{width:16px;height:16px}
.tqpill__more:hover{color:var(--tq-sky)}
.tqpill[data-surface="light"] .tqpill__more:hover{color:var(--tq-blue)}

/* O `display:flex` abaixo vence o `[hidden]{display:none}` da folha de estilo do navegador
   por especificidade. Sem esta linha o menu nascia ABERTO e, como o JS o considerava
   fechado, nem rolar a página o fechava. */
.tqpill-sheet[hidden]{display:none}
.tqpill-sheet{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  margin-top:10px;width:min(280px,calc(100vw - 40px));
  display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;
  border-radius:20px;border:1px solid rgba(246,249,254,.20);
  background:rgba(12,30,56,.92);backdrop-filter:saturate(1.2) blur(10px);
  color:var(--tq-on-dark);
}
.tqpill-sheet[data-surface="light"]{
  border-color:var(--tq-line);
  background:color-mix(in srgb,var(--tq-canvas) 96%,transparent);
  color:var(--tq-ink);
}
.tqpill-sheet a{
  display:block;padding:15px 22px;color:inherit;text-decoration:none;
  font-family:var(--tq-font-display);font-weight:600;font-size:16px;line-height:1;
}
.tqpill-sheet a+a{border-top:1px solid rgba(246,249,254,.12)}
.tqpill-sheet[data-surface="light"] a+a{border-top-color:var(--tq-line)}
.tqpill-sheet a:active{background:rgba(95,160,255,.14)}
/* o CTA fecha a folha, em largura cheia e destacado do resto */
.tqpill-sheet__cta{
  margin:10px;padding:14px 18px;justify-content:center;
  border-radius:9999px;color:#fff!important;font-size:15px;
}
.tqpill-sheet__cta:active{background:var(--tq-blue)}
.tqpill-sheet a.tqpill-sheet__cta+a,.tqpill-sheet a+a.tqpill-sheet__cta{border-top:0}

/* No mobile a pílula vira só o ☰ — um círculo de 48px. A marca já abre o hero logo
   abaixo, então repeti-la na barra só rouba espaço. Seções e CTA moram na folha. */
@media(max-width:760px){
  .tqpill__links,.tqpill__mark{display:none}
  .tqpill__more{display:inline-flex;width:48px;height:48px;margin:0}
  .site-nav.site-nav--pill{top:14px}
}
@media(min-width:761px){
  .tqpill-sheet{display:none}
}