/* ==========================================================================
   Essence Tântric · cabeçalho de página
   Autor: DEVOPS (Coneki) · 27/09/2026 · cliente Essence Tântric

   Porque este ficheiro existe: o dono pediu, a 27/09/2026, «a página de
   massagista não tem um cabeçalho, devemos adotar um cabeçalho para o título em
   todas as páginas internas. TODAS. E seguindo um padrão elegante». Até aqui o
   título de uma página interna era um <h1> solto dentro de uma secção branca:
   cada página começava de maneira diferente, e a ficha de massagista — a página
   mais visitada da equipa — era a que menos parecia uma página.

   Ficheiro próprio e não o `componentes.css` pela mesma razão do
   `cabecalho.css`: o `componentes.css` é artefacto do DESIGNER e não deve
   ganhar duas autorias. Este padrão é desta casa e vive sozinho.

   Factos que decidem o desenho (medidos no renderizado, ver relatório):

   1. A barra fixa é `--cor-fundo-escuro` (#111). A faixa do título usa a MESMA
      cor, não a noite quente da home (`--ec-noite`): duas escuridões quase
      iguais lêem-se como um erro de pintura, e a barra e o título são a mesma
      peça — barra, fio de ouro, título. A página interna começa num bloco só.
   2. O fio de ouro fecha a barra (1 px, 55% do acento), como no cabeçalho, e
      desaparece do fundo da faixa: sem isso a faixa e o corpo branco ficavam
      separados por dois traços.
   3. O <h1> é o único da página e é o maior texto do ecrã depois da capa da
      home: `clamp(2rem, 4.4vw, 3.5rem)` — 56 px a 1 440 px. A cor do <h1> de
      base é a da marca (bordéus) e sobre escuro mediria menos de 3:1; aqui é
      creme do contrato, o mesmo par medido no rodapé (15,16:1).
   4. A faixa aceita uma coluna à direita (a linha da casa na ficha, a contagem
      nos artigos): em ecrã grande fica ao nível da base do título, abaixo de
      1 024 px passa para baixo dele. Nada ao lado de um título de 56 px numa
      coluna estreita.
   ========================================================================== */

.pg-cabeca {
  background: var(--cor-fundo-escuro);
  color: var(--cor-texto-escuro);
  padding-top: var(--esp-12);
  padding-bottom: var(--esp-12);
}

@media (min-width: 1024px) {
  .pg-cabeca {
    padding-top: var(--esp-16);
    padding-bottom: var(--esp-16);
  }
}

.pg-cabeca__interior {
  display: grid;
  gap: var(--esp-6);
  align-items: end;
}

@media (min-width: 1024px) {
  .pg-cabeca__interior {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--esp-12);
  }
}

.pg-cabeca__rotulo {
  margin: 0 0 var(--esp-4);
  font-size: var(--fs-legenda);
  font-weight: var(--peso-medio);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cor-acento);
}

.pg-cabeca__titulo {
  margin: 0;
  max-width: 26ch;
  font-family: var(--fonte-display);
  font-weight: var(--peso-normal);
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  color: var(--cor-texto-escuro);
  text-wrap: balance;
}

/* A ficha de massagista mantém o gesto editorial que o dono pediu a 25/09/2026
   («o nome primeiro, grande»): a faixa é a mesma — mesma cor, mesmo fio, mesmo
   rótulo dourado — e só o título sobe de degrau. O padrão é o do site; a
   hierarquia é da página. */
.pg-cabeca--grande .pg-cabeca__titulo {
  max-width: 18ch;
  font-weight: var(--peso-leve);
  font-size: clamp(2.75rem, 8.4vw, 6rem);
  line-height: 0.98;
}

/* O texto de apoio fica em creme esbatido: sobre #111 mede 8,7:1, acima do
   mínimo, e não compete com o título. */
.pg-cabeca__apoio {
  margin: var(--esp-4) 0 0;
  max-width: var(--medida-intro);
  font-size: var(--fs-corpo);
  color: var(--cor-texto-escuro-suave);
}

.pg-cabeca__lado {
  display: grid;
  gap: var(--esp-3);
  justify-items: start;
  font-size: var(--fs-legenda);
  letter-spacing: var(--tracking-legenda);
  text-transform: uppercase;
  color: var(--cor-texto-escuro-suave);
}

.pg-cabeca__lado a,
.pg-cabeca__lado .ligacao-acao {
  color: var(--cor-acento);
}

/* Nada dentro da faixa pode herdar a tinta de marca do corpo: sobre escuro é
   ilegível. Vale para listas, notas e etiquetas que as páginas tragam para o
   encaixe da direita ou para o encaixe de baixo. */
.pg-cabeca__lado :is(p, li, span, time, address) {
  margin: 0;
  color: inherit;
}