/* Cabeçalho fixo — acompanha a rolagem da página. Fica sempre na "zona
   escura" do degradê (é o topo da página), então usa fundo sólido na cor
   inicial da marca e texto claro — precisa de fundo opaco de qualquer
   forma, já que fica por cima do conteúdo ao rolar. */
.cabecalho {
  background: var(--cor-marca);
  box-shadow: var(--sombra-sutil);
  position: sticky;
  top: 0;
  z-index: 10;
}

.cabecalho__conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

/* Logo saiu do cabeçalho — agora é o elemento central do Hero. Nav e CTA
   ocupam as duas pontas do cabeçalho. */

/* Fundo translúcido atrás do grupo de links — dá peso visual ao menu sem
   introduzir uma cor sólida nova sobre o fundo já colorido do cabeçalho. */
.cabecalho__nav ul {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 253, 249, .14);
  border: 1px solid rgba(255, 253, 249, .32);
  border-radius: 999px;
}

.cabecalho__nav a {
  color: var(--cor-superficie);
  font-size: var(--tam-corpo);
  font-weight: 600;
  padding-block: var(--space-2);
  /* alvo de toque: padding vertical garante ~44px de área clicável */
  display: inline-flex;
  align-items: center;
  min-height: var(--altura-toque-minima);
}

.cabecalho__nav a:hover {
  opacity: .8;
}

.cabecalho__nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-toque-minima);
  padding-inline: var(--space-4);
  border-radius: var(--raio-pequeno);
  font-weight: 600;
  font-size: var(--tam-corpo);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

/* Botão "convite discreto", não anúncio — contorno em vez de preenchido,
   conforme DESIGN.md ("sem firula"). Duas cores conforme a seção: claro
   pra quando o fundo do degradê ainda está escuro (cabeçalho, hero,
   blocos 1-2), escuro pra quando o fundo já clareou (bloco 3 em diante). */
.botao--claro {
  border: 1.5px solid var(--cor-superficie);
  color: var(--cor-superficie);
  background: transparent;
}
.botao--claro:hover {
  background: var(--cor-superficie);
  color: var(--cor-marca);
}

.botao--escuro {
  border: 1.5px solid var(--cor-texto-sobre-claro);
  color: var(--cor-texto-sobre-claro);
  background: transparent;
}
.botao--escuro:hover {
  background: var(--cor-texto-sobre-claro);
  color: var(--cor-marca-clara);
}

/* Em telas estreitas, o botão de CTA quebra pra linha de baixo e ocupa a
   largura toda — evita espremer nav + botão numa linha só em 375px. */
@media (max-width: 767px) {
  .cabecalho__cta {
    order: 3;
    width: 100%;
  }
}