/* Topo: barra flutuante em pill, cartão creme chapado (legível em qualquer tema) */
.tp { position: fixed; top: 0; left: 0; right: 0; z-index: 100; pointer-events: none; }
.tp-barra {
  pointer-events: auto;
  margin: 0.875rem auto 0; width: min(calc(100% - 1.5rem), 57.5rem);
  display: flex; align-items: center; gap: 1.25rem;
  height: 3.375rem; padding: 0 0.375rem 0 1rem; border-radius: 62.4375rem;
  background: rgba(244, 244, 237, 0.82);
  -webkit-backdrop-filter: blur(1rem) saturate(160%);
  backdrop-filter: blur(1rem) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(40, 44, 32, 0.1), 0 0.625rem 1.875rem -18px rgba(40, 44, 32, 0.35);
  color: var(--oliva);
  transition: transform .7s var(--curva), width .6s var(--curva), height .6s var(--curva), margin .6s var(--curva);
}
.tp.tp-rolou .tp-barra { height: 3.125rem; width: min(calc(100% - 1.5rem), 53.75rem); margin-top: 0.625rem; }
.tp.tp-escondido .tp-barra { transform: translateY(calc(-100% - 3rem)); }
.tp-marca { display: flex; align-items: center; gap: 0.5625rem; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.02em; white-space: nowrap; }
.tp-logo { height: 1.125rem; background: var(--oliva); transition: transform .6s var(--curva-mola); }
.tp-marca:hover .tp-logo { transform: rotate(-8deg) scale(1.08); }
.tp-links { list-style: none; display: flex; gap: 0.125rem; margin: 0 auto; }
.tp-links a {
  position: relative; display: block; padding: 0.4375rem 0.75rem; border-radius: 62.4375rem;
  font-size: 0.875rem; font-weight: 500; color: rgba(40, 44, 32, 0.7);
  transition: color .3s, background-color .3s;
}
.tp-links a:hover { color: var(--oliva); background: rgba(40, 44, 32, 0.06); }
.tp-cta {
  display: inline-flex; align-items: center; height: 2.625rem; padding: 0 1.125rem; border-radius: 62.4375rem;
  background: var(--acento); color: var(--oliva); font-size: 0.875rem; font-weight: 600; white-space: nowrap;
  transition: transform .5s var(--curva), background-color .3s;
}
.tp-cta:hover { transform: translateY(-1px) scale(1.02); }
.tp-menu { display: none; position: relative; width: 2.625rem; height: 2.625rem; border-radius: 50%; background: var(--oliva); margin-left: auto; }
.tp-menu span { position: absolute; left: 0.8125rem; right: 0.8125rem; height: 1.5px; background: var(--creme); transition: transform .5s var(--curva); }
.tp-menu span:first-child { top: 1.0625rem; }
.tp-menu span:last-child { top: 1.4375rem; }
.tp-aberto .tp-menu span:first-child { transform: translateY(0.1875rem) rotate(45deg); }
.tp-aberto .tp-menu span:last-child { transform: translateY(-3px) rotate(-45deg); }

.tp-painel {
  position: fixed; inset: 0; z-index: -1; padding: 6rem 1.25rem 1.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--creme); color: var(--oliva);
  clip-path: inset(0 0 100% 0 round 0 0 2rem 2rem);
  visibility: hidden;
  transition: clip-path .8s var(--curva), visibility 0s .8s;
}
.tp-aberto .tp-painel { pointer-events: auto; visibility: visible; clip-path: inset(0 0 0 0 round 0); transition: clip-path .8s var(--curva); }
.tp-painel-links { list-style: none; }
.tp-painel-links li { overflow: hidden; border-bottom: 1px solid rgba(40, 44, 32, 0.14); }
.tp-painel-links a {
  display: flex; align-items: baseline; gap: 0.875rem; padding: 0.875rem 0;
  font-size: clamp(1.875rem, 9vw, 3rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05;
  transform: translateY(110%); transition: transform .8s var(--curva);
}
.tp-painel-links small { font-family: var(--fonte-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: rgba(40, 44, 32, 0.5); }
.tp-aberto .tp-painel-links a { transform: none; }
.tp-aberto .tp-painel-links li:nth-child(1) a { transition-delay: .15s; }
.tp-aberto .tp-painel-links li:nth-child(2) a { transition-delay: .21s; }
.tp-aberto .tp-painel-links li:nth-child(3) a { transition-delay: .27s; }
.tp-aberto .tp-painel-links li:nth-child(4) a { transition-delay: .33s; }
.tp-painel-cta { justify-content: center; height: 3.375rem; font-size: 1rem; }

@media (max-width: 900px) {
  .tp-links, .tp-barra > .tp-cta { display: none; }
  .tp-menu { display: block; }
  .tp-barra { height: 3.375rem; padding-left: 1rem; }
}