/* ==========================================================================
   Essence Tântric · cabeçalho — barra fixa, marca em imagem, navegação
   Autor: DEVOPS (Coneki) · 24/09/2026 · cliente Essence Tântric

   Porque este ficheiro existe e não é o componentes.css: o cabeçalho de
   `componentes.css` é artefacto do DESIGNER (tinta sobre bordéus, wordmark em
   texto, marca em fluxo normal). O dono pediu a 24/09/2026 «um header mais
   imponente, com stay on top, ou algo que facilite a navegação» e o logótipo do
   legado — é uma peça nova, com ficheiro próprio, para o artefacto do DESIGNER
   continuar a ser dele e não ficar com duas autorias no mesmo ficheiro.

   Quatro factos medidos que decidem o desenho:

   1. A marca é de duas tintas (#E2D4B7 e #ECECEC) e a clara mede 1,05:1 sobre
      branco. Sobre creme, «TANTRIC» e «EROTIC SPA» desapareciam. O cabeçalho é
      escuro por isso, e não por gosto.
   2. A altura da barra é FIXA. Uma barra que encolhe ao rolar desloca o conteúdo
      por baixo dela; o que encolhe é o logótipo, por `transform`, que não mexe
      no fluxo.
   3. A barra é `sticky`, não `fixed`: assim continua a ocupar o seu lugar no
      fluxo (nenhum conteúdo fica escondido por baixo) e as âncoras internas
      descontam a altura com `scroll-margin-top`.
   4. Três disposições, uma por largura — nenhuma delas obriga a encolher o menu
      nem a esconder a ação:
        · < 1024 px  marca · AGENDAR · MENU (painel com o menu e os idiomas)
        · ≥ 1024 px  marca · menu · idiomas · AGENDAR
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ALTURA DA BARRA — um só token, usado pela barra, pelas âncoras e pela
   capa da home (que passa a medir `100svh` menos a barra, para a fotografia
   continuar a fechar exactamente um ecrã).
   -------------------------------------------------------------------------- */

:root {
  --altura-cabecalho: 64px;
  --marca-largura: 132px;
}

@media (min-width: 768px) {
  :root { --altura-cabecalho: 76px; --marca-largura: 168px; }
}

@media (min-width: 1024px) {
  :root { --altura-cabecalho: 88px; --marca-largura: 198px; }
}

/* A âncora interna não pode aterrar debaixo da barra. Vale para todas as que
   existem (índice dos rituais na home, lista de massagistas, galeria). */
[id] {
  scroll-margin-top: calc(var(--altura-cabecalho) + var(--esp-4));
}

/* --------------------------------------------------------------------------
   2. A BARRA
   -------------------------------------------------------------------------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cor-fundo-escuro);
  color: var(--cor-texto-escuro);
  /* Fio de ouro: a assinatura da casa, sempre 1px, sempre do acento. */
  border-bottom: 1px solid color-mix(in srgb, var(--cor-acento) 55%, transparent);
}

.cabecalho__linha {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  flex-wrap: wrap;
  min-height: var(--altura-cabecalho);
  padding-top: var(--esp-2);
  padding-bottom: var(--esp-2);
}

/* --------------------------------------------------------------------------
   3. A MARCA — imagem do legado, sem uma cor tocada.
   -------------------------------------------------------------------------- */

.cabecalho__marca {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  /* Alvo de toque: a marca é ligação para a raiz em todas as páginas. */
  min-height: var(--alvo-minimo);
}

.cabecalho__marca picture { display: block; }

.cabecalho__marca img {
  display: block;
  width: var(--marca-largura);
  height: auto;
  transform-origin: left center;
  transition: transform var(--dur-media) var(--ease-padrao);
}

/* Ao rolar: o logótipo recolhe por `transform` (o fluxo não mexe) e a barra
   ganha presença por sombra. Nada muda de sítio — a página não salta. */
.cabecalho[data-compacto] .cabecalho__marca img { transform: scale(0.86); }

.cabecalho[data-compacto] {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   4. MENU — versaletes espaçados, com o fio de ouro a crescer da esquerda.
   É o mesmo gesto dos cartões e das revelações: uma linguagem, não três.
   -------------------------------------------------------------------------- */

.cabecalho__nav {
  display: flex;
  align-items: center;
  gap: var(--esp-6);
}

.cabecalho__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cabecalho__menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  padding: var(--esp-2) 0;
  color: var(--cor-texto-escuro);
  font-size: var(--fs-legenda);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-legenda);
  text-transform: uppercase;
  text-decoration: none;
}

.cabecalho__menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--cor-acento);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-media) var(--ease-padrao);
}

.cabecalho__menu a[aria-current='page'] { color: var(--cor-acento-claro); }
.cabecalho__menu a[aria-current='page']::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   5. IDIOMAS — cinco línguas, uma fila. O idioma em que se está não é ligação
   a fingir: é `<a>` como as outras, com `aria-current`, porque clicar no idioma
   onde já se está tem de levar à mesma página e não a lado nenhum.
   -------------------------------------------------------------------------- */

.cabecalho__idiomas {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: 0;
  padding: 0 0 0 var(--esp-6);
  list-style: none;
  border-left: 1px solid color-mix(in srgb, var(--cor-texto-escuro) 24%, transparent);
}

.cabecalho__idiomas a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--alvo-minimo);
  min-height: var(--alvo-minimo);
  color: var(--cor-texto-escuro-suave);
  font-size: var(--fs-legenda);
  letter-spacing: var(--tracking-legenda);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-rapida) var(--ease-padrao),
              border-color var(--dur-rapida) var(--ease-padrao);
}

.cabecalho__idiomas a[aria-current='true'] {
  color: var(--cor-acento-claro);
  border-bottom-color: var(--cor-acento);
}

/* --------------------------------------------------------------------------
   6. AÇÃO — o «Agendar» fica sempre à mão, no telemóvel também.
   -------------------------------------------------------------------------- */

.cabecalho__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--esp-4);
  border: 1px solid var(--cor-acento);
  border-radius: var(--raio-fio);
  background: transparent;
  color: var(--cor-acento-claro);
  font-size: var(--fs-legenda);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-legenda);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-rapida) var(--ease-padrao),
              color var(--dur-rapida) var(--ease-padrao);
}

/* --------------------------------------------------------------------------
   7. DISPOSIÇÃO POR LARGURA
   -------------------------------------------------------------------------- */

/* Telemóvel e tablet: painel. O menu vive FORA do <details> (é o irmão a
   seguir), portanto com o painel aberto a barra não cresce: a marca fica
   ancorada no topo e o menu abre por baixo, a largura toda. */
@media (max-width: 1023px) {
  .cabecalho__painel { display: block; order: 3; }
  /* O componentes.css esconde o botão a partir de 768 px (era lá que o menu
     passava a caber numa linha). Aqui o painel vale até 1023 px: sem isto, o
     botão desaparecia entre 768 e 1023 e o menu ficava sem porta. */
  .cabecalho__botao { display: inline-flex; }
  .cabecalho__cta { order: 2; }
  .cabecalho__nav { display: none; flex-basis: 100%; order: 4; }
  .cabecalho__painel[open] + .cabecalho__nav { display: block; }
  .cabecalho__nav { flex-wrap: wrap; gap: var(--esp-4); }
  .cabecalho__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--esp-3);
  }
  .cabecalho__menu a {
    display: flex;
    min-height: var(--esp-12);
    font-size: var(--fs-corpo);
    border-bottom: 1px solid color-mix(in srgb, var(--cor-texto-escuro) 24%, transparent);
  }
  .cabecalho__menu a::after { display: none; }
  .cabecalho__idiomas {
    border-left: 0;
    padding: var(--esp-4) 0 0;
    gap: var(--esp-4);
  }
}

/* Ecrã de computador: uma linha só. */
@media (min-width: 1024px) {
  .cabecalho__painel { display: none; }
  .cabecalho__nav { order: 2; }
  .cabecalho__cta { order: 3; }
}

/* --------------------------------------------------------------------------
   8. EFEITOS DE RATO — os mesmos de toda a casa: só onde há rato a sério,
   também ao teclado (`:focus-visible`), e nada em quem pediu menos movimento.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .cabecalho__menu a:hover::after,
  .cabecalho__menu a:focus-visible::after { transform: scaleX(1); }

  .cabecalho__idiomas a:hover { color: var(--cor-texto-escuro); }

  .cabecalho__cta:hover,
  .cabecalho__cta:focus-visible {
    background: var(--cor-acento);
    color: var(--cor-fundo-escuro);
  }

  .cabecalho__marca:hover img { transform: scale(1.02); }
}

.cabecalho__cta:focus-visible,
.cabecalho__marca:focus-visible {
  outline: var(--foco-largura) solid var(--cor-foco-escuro);
  outline-offset: var(--foco-deslocamento);
}

@media (prefers-reduced-motion: reduce) {
  .cabecalho__marca img,
  .cabecalho__menu a::after,
  .cabecalho__idiomas a,
  .cabecalho__cta { transition: none; }

  .cabecalho[data-compacto] .cabecalho__marca img { transform: none; }
  .cabecalho__marca:hover img { transform: none; }
}