/* ==========================================================================
   BARRA DE NAVEGAÇÃO — botões de ação
   Carregar depois de site.css e molduras.css.
   ========================================================================== */

/* Com sete itens de menu mais busca e dois botões, a barra fica apertada:
   o espaçamento e o corpo do texto cedem antes de qualquer item sumir. */
.site nav { gap: clamp(14px, 1.5vw, 26px); }
.site nav a { white-space: nowrap; font-size: 13.5px; }
.search { flex: 0 1 260px; }

.bt-acessar,
.bt-assine {
  display: inline-flex; align-items: center;
  white-space: nowrap;
  border-radius: var(--r-1);
  padding: 9px 17px;
  font-size: var(--step-0);
  font-weight: 700;
  border: 1px solid;
  transition: box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              background var(--t-med) var(--ease),
              transform var(--t-fast) var(--ease);
}
.bt-acessar:hover, .bt-assine:hover { transform: translateY(-1px); }

/* ---------- Acessar: branco neon, acende em ouro ---------- */
.bt-acessar {
  background: #fff;
  color: #0B1220;
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.30);
}
.bt-acessar:hover,
.bt-acessar:focus-visible {
  color: #1A1204;
  border-color: var(--ouro);
  box-shadow:
    0 0 0 1px var(--ouro),
    0 0 24px var(--ouro-glow),
    0 0 12px rgba(255, 255, 255, 0.45);
  outline: none;
}

/* ---------- Assine: ouro, acende em azul-céu ---------- */
.bt-assine {
  background: linear-gradient(135deg, #FFD469, var(--ouro) 55%, #C99A2E);
  color: #1A1204;
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 0 18px var(--ouro-glow);
}
.bt-assine:hover,
.bt-assine:focus-visible {
  border-color: var(--acc-2);
  box-shadow:
    0 0 0 1px var(--acc-2),
    0 0 26px rgba(127, 211, 255, 0.55),
    0 0 44px rgba(78, 168, 255, 0.30);
  outline: none;
}

/* Abaixo de 1180px a navegação não cabe: vai para o menu recolhido, e
   ficam só marca, busca e as duas ações. */
@media (max-width: 1180px) {
  .site nav { display: none; }
  .mobile-toggle { display: inline-flex; }
  .search { margin-left: auto; }
}
@media (max-width: 760px) {
  .search { display: none; }
  .bt-acessar { display: none; }   /* Assine é a ação que fica */
}

@media (prefers-reduced-motion: reduce) {
  .bt-acessar:hover, .bt-assine:hover { transform: none; }
}

/* ---------- Menu ao centro ----------
   Três faixas: marca à esquerda, navegação no meio, ações à direita. As
   faixas laterais têm o mesmo peso (1fr), então o menu cai no centro exato
   da tela — e continua ali mesmo quando a marca ou os botões mudam de
   largura, o que acontece ao entrar na conta. */
.hrow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.hrow .logo { justify-self: start; }
.site nav { justify-content: center; }
.hacoes {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}
.hacoes .search { flex: 0 1 240px; margin-left: 0; }

/* Recolhido: volta a ser uma linha simples, com o menu fora */
@media (max-width: 1180px) {
  .hrow { display: flex; }
  .hacoes { margin-left: auto; }
}

/* Rolagem suave até a âncora, sem esbarrar no cabeçalho fixo */
html { scroll-behavior: smooth; }
#conheca { scroll-margin-top: 86px; }