/* ═══════════════════════════════════════════════════════════════════
   barra.css — a barra que segue o scroll, e o que ela faz ao passar
   o herói.

   ═══ PORQUE É QUE ELA NÃO PODE VIVER DENTRO DO QUADRO ═══
   No artboard a `<nav>` está `position: fixed`. Aqui isso NÃO PEGA: o
   `.quadro` tem um `transform`, e um elemento transformado passa a ser
   o bloco que contém os `fixed` que traz lá dentro. A nav ficava presa
   ao topo do QUADRO — isto é, ao topo do documento — e ia-se embora
   com o scroll. Era exactamente o que se via.

   Por isso o gerador LEVANTA a nav (e a pastilha de contacto do herói)
   para fora do quadro, para esta camada. A camada repete a geometria
   do palco — mesma largura máxima, mesmo centro, MESMA ESCALA — para
   que as coordenadas do artboard (47,44 e 1154,44) continuem a cair
   exactamente onde caíam. Ao scroll 0 nada mudou de sítio.

   ═══ OS DOIS ESTADOS ═══
   A · HERÓI      nav com o logótipo e as três categorias à esquerda;
                  a pastilha «Contactonos», grande, do outro lado à
                  mesma altura. É o desenho do artboard, intacto.

   B · COMPLETA   passada a secção a seguir ao herói, a pastilha grande
                  sai e «Contactonos» entra DENTRO da nav, do tamanho
                  das outras categorias. A nav alarga para lhe dar
                  lugar.

   O `data-troca` de cada barra diz em que Y do artboard isso acontece.
   ═══════════════════════════════════════════════════════════════════ */

.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  /* A camada é uma folha em branco por cima da página inteira. Se
     apanhasse o rato, nada por baixo dela era clicável — só as peças
     é que voltam a apanhá-lo. */
  pointer-events: none;
}

.barra-palco {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: calc(var(--qw) * 1px);
  margin-inline: auto;
}

/* ═══ A BARRA CRESCE COM O PALCO — 1440 NÃO ERA O TECTO ═══
   O `palco.css` diz, e está lá escrito: «O TECTO DA BANDA LARGA: 1440 →
   1680». O palco cresceu; esta barra ficou para trás nos 1440, e o
   `barra.js` lê a escala DAQUI (`--k = .barra-palco.clientWidth / qw`,
   barra.js:34). Resultado num ecrã de 1920: o palco esticava-se a 1680 e
   pintava a 1,167, e a barra ficava a 1,000 — a nav com 57 de alto ao
   lado de um «Contactonos» com 66,5, e o canto esquerdo da nav a 240
   quando o texto do herói começava a 185. A 1440 não se via nada, que é
   onde as duas escalas coincidem: foi por isso que aguentou tanto tempo.

   Mesmo tecto, mesma lei. A partir daqui a barra é do tamanho do palco
   em qualquer ecrã, e a espessura da nav volta a ser a do botão. */
.barra--largo .barra-palco { max-width: 1680px; }

/* Altura zero: as peças são absolutas, e a barra não deve ocupar fluxo
   nenhum — o quadro por baixo já traz o seu próprio espaço de topo. */
.barra-quadro {
  position: relative;
  width: calc(var(--qw) * 1px);
  height: 0;
  transform-origin: 0 0;
  transform: scale(var(--k, 1));
}

/* ═══════════════════════════════════════════════════════════════════
   A ESCALA DA BARRA RESOLVE-SE EM CSS, E NÃO À ESPERA DO GUIÃO (28-set)

   «Quando clico na página inicial o header começa mais pequeno e depois
   fica maior.» Começava mesmo: o `--k` da barra era escrito SÓ pelo
   `barra.js`, e até ele correr o `var(--k, 1)` do `.barra-quadro` valia
   1. Num ecrã de 1920 a barra pinta a 1,167 — ou seja, aparecia a 86%
   do tamanho e dava um salto assim que o guião aterrava.

   O palco nunca teve este defeito: o `palco.css` resolve a escala dele
   em CSS puro (`calc(100cqw / (--qw * 1px))`), e o guião é só a rede
   para quem não souber dividir comprimentos. A barra ficou de fora, e
   é a mesma conta.

   ═══ PORQUE É NA `.barra` E NÃO NO `.barra-palco` ═══
   Era esta a razão de não estar cá: a faixa é IRMÃ do palco, não filha,
   e uma escala escrita no palco não lhe chegava. Resolve-se pondo o
   contentor no pai — a `.barra` é fixa com `left: 0; right: 0`, por
   isso a largura dela é a da janela — e repetindo aqui o tecto que o
   `.barra-palco` tem logo acima: 1680 na banda larga, 560 na estreita.
   Dá o mesmo número que o guião mede (`.barra-palco.clientWidth / qw`),
   e por isso quando ele escreve não se vê mexer nada.

   Fica a rede para quem não tiver unidades de contentor: sem o
   `@supports`, o `--k` continua a valer 1 até o guião correr — que é
   exactamente o que havia antes. */
.barra { container-type: inline-size; }

/* Os 1440 e os 390 estão aqui à letra, e não em `var(--qw)`, porque o
   `--qw` é escrito no `.barra-palco` — que é FILHO — e as propriedades
   herdam para baixo, não para cima. Um `var(--qw)` nesta regra é uma
   variável que não existe, a conta fica inválida e o `--k` volta a 1:
   custou uma medição a ver, porque o defeito é exactamente o que se
   estava a corrigir. São os mesmos dois números dos tectos da regra de
   cima (1680 = 1440 × 7/6; 560 = 390 × 1,436). */
@supports (opacity: calc(100cqw / 1440px)) {
  .barra--largo    { --k: calc(min(100cqw, 1680px) / 1440px); }
  .barra--estreito { --k: calc(min(100cqw, 560px) / 390px); }
}

.barra nav,
.barra a,
.barra button { pointer-events: auto; }

/* O traje da pastilha, que o gerador tirou do `style=` para aqui poder
   ser apagado no estado B sem um `!important`. Os valores continuam a
   ser os do artboard — só mudaram de sítio. */
.barra nav {
  /* A nav ANDA COM `transform`, não com `left`.
     Com `left: 50%` a caixa passava a ter só metade do quadro para
     crescer — é absoluta e ajusta-se ao conteúdo — e o flex encolhia-lhe
     os itens: o «Contactos» saía cortado a meio, «CONTACT». Fixa em
     `left: 0` tem os 1440 todos, e o deslocamento é só pintura.
     `translateX(-50%)` conta a largura DELA, por isso metade do quadro
     menos meia nav dá o centro exacto. */
  left: 0;
  transform: translate(calc(var(--nav-esq, 47) * 1px), 0);
  background-color: var(--nav-fundo);
  border: var(--nav-borda);
  box-shadow: var(--nav-sombra);
  /* ═══ E A LARGURA ANDA COM ELA (28-set) ═══
     Faltava aqui, e era metade do defeito. No estado A a nav tem uma
     `width` fixa (a regra logo abaixo); no B essa regra deixa de se
     aplicar e a largura passava a `auto` DE UM FOTOGRAMA PARA O
     OUTRO — 690 do desenho contra os 707 que o conteúdo pede, 17px
     a saltar no instante exacto em que a barra começava a andar.
     Medido: a caixa ia de 682,8 a 699,7 entre dois fotogramas.

     Agora o estado B declara a largura MEDIDA (`--nav-w`) e os dois
     valores interpolam-se. E não leva `min-width: max-content` como
     rede: a rede reintroduzia o salto inteiro — o `max-content` são
     os tais 707, e a largura começava lá em vez de começar nos 690. */
  transition: transform        var(--gesto) var(--curva),
              width            var(--gesto) var(--curva),
              background-color var(--gesto) var(--curva),
              border-color     var(--gesto) var(--curva),
              box-shadow       var(--gesto) var(--curva);
}

/* ═══ A NAV RECOLHIDA OCUPA O TOPO ATÉ AO BANNER ═══
   No estado A a nav era `shrink-to-fit` e flutuava a 47 do bordo: o
   logótipo mais três categorias davam-lhe 671, e sobrava topo vazio.
   Passa a ir de **36 a 726** — `left: 36` no artboard (que alimenta o
   `--nav-esq`) mais os 690 desta regra.

   OS DOIS LIMITES, e porque são estes:
     · à esquerda, 36 fica 20 à frente do eixo do texto do herói (a
       tinta do sobretítulo e do h1 começa em 56): a barra avança sobre
       a margem sem se colar ao bordo do ecrã;
     · à direita, 726 é o máximo que há. A fotografia do herói começa em
       **732** e o pedido do cliente foi explícito: a barra NÃO a pisa.
       Sobram 6 — sete num ecrã de 1920, onde tudo isto pinta a 1,167.
   Quem quiser mais largura à direita tem primeiro de mover a fotografia.

   PORQUE É AQUI E NÃO NO ARTBOARD: a nav é levantada do quadro e o
   `despirNav()` só tira o `left`, o fundo, a borda e a sombra — uma
   `width` em linha ficava lá presa e o estado B não a podia desfazer.
   O `left` do artboard continua a mandar na posição; aqui só se diz a
   largura, e só na banda larga recolhida.

   E PORQUE SÓ NO ESTADO A: no B a nav abre o «Sobre» e o «Contactos»,
   dissolve-se na faixa e o bloco nav+CTA centra-se com a largura MEDIDA
   (`--nav-w`, que o `barra.js` relê sozinho). Presa a uma largura fixa
   ficaria com as categorias encostadas à esquerda de uma caixa larga e o
   centro fora do sítio. Sem fundo nem borda no estado B, nem a troca de
   largura nem a de posição se vêem. */
.barra--largo:not(.barra--cheia) nav.pill { width: calc(var(--nav-larga, 690) * 1px); }

/* E a do estado B, para haver dois números e não um número e um salto.
   É a largura que o `barra.js` mede com a nav solta por um fotograma
   (`--nav-w`) — a mesma que a conta do centro já usava. Escrita aqui,
   a nav deixa de ser `shrink-to-fit` no estado B: cresce até ela e
   pára lá, que é onde a conta do centro a espera. */
.barra--largo.barra--cheia nav.pill { width: calc(var(--nav-w) * 1px); }

/* ═══ AS DUAS BANDAS — as mesmas regras do palco ═══ */
.barra--estreito .barra-palco { max-width: 560px; }

@media (min-width: 1024px) {
  .barra--estreito { display: none; }
}
@media (max-width: 1023.98px) {
  body:has(.barra--estreito) .barra--largo { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   A FAIXA — o estado B

   Passado o herói a nav deixa de ser uma pastilha pousada a 47px do
   bordo e passa a ser uma barra de bordo a bordo, com os itens ao
   centro. Quem se estende é ESTA faixa, não a nav: a nav vive dentro
   de um quadro de 1440 escalado, e um quadro de 1440 não chega às
   pontas de um ecrã de 2560. A faixa está fora dele, à largura da
   janela, e é ela que leva a cor e o desfoque.

   ═══ FINA, E DA COR DA PASTILHA ═══
   A faixa não é uma zona nova: é a mesma pastilha, esticada. Por isso
   veste-se dela — a altura é a da nav mais uma respiração igual em
   cima e em baixo (`--faixa-ar`), e a cor é a `--nav-fundo` quase
   cheia. Ao trocar de estado o tom quase não se mexe; o que se nota é
   ela a chegar às pontas.

   Ficar translúcida a meio — 50%, digamos — dava uma banda lavanda
   sobre o fundo claro, muito longe do roxo da pastilha, e ainda por
   cima punha texto branco sobre um cinzento claro. A 96% é
   praticamente a cor da pastilha: ao trocar de estado o tom não se
   mexe, e o que sobra de vidro é só o suficiente para o desfoque dar
   sinal de vida por baixo.

   A nav dissolve-se nela — sem fundo, sem borda, sem sombra — e a
   sombra passa para a faixa, que é quem agora está por cima da
   página. `translate` faz os dois movimentos de uma vez: ao centro na
   horizontal, e para cima o tanto que falta para ficar ao meio da
   faixa.
   ═══════════════════════════════════════════════════════════════════ */
.barra {
  --faixa-ar: 5;

  /* ═══ O GESTO: UM RELÓGIO SÓ PARA A TROCA DE ESTADO (28-set) ═══
     A troca era feita por cinco relógios diferentes — a nav a andar em
     520ms, as categorias a abrir em 420, a faixa a acender em 320, o
     fundo e a borda da pastilha a apagar em 300. Cada um certo por si,
     e o conjunto a ler-se como três coisas a acontecer ao lado umas
     das outras: a faixa já estava posta e a nav ainda ia a meio
     caminho. Foi isso que o dono viu.

     Agora é UM número e UMA curva. O que muda de forma — a nav a
     andar e a crescer, as categorias a abrir, a faixa a acender, a
     pastilha a dissolver-se — anda tudo no mesmo relógio e chega ao
     mesmo tempo. O que só esvanece (o texto das categorias, a
     pastilha do orçamento) fica mais curto de propósito, para chegar
     ANTES de a forma assentar e não parecer que aterra atrasado. */
  --gesto: 460ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
  /* A altura da pastilha do orçamento. Vive aqui, e não na regra dela,
     porque o deslocamento vertical do estado B precisa de a saber para
     a centrar na faixa. Dois números davam duas verdades. */
  --cta-alta: 42;
  /* O vão entre a nav e a pastilha, no estado B. Maior do que o `gap`
     de 21 de dentro da nav — ali separa irmãos, aqui separa duas
     peças diferentes. */
  --vao-cta: 32;

  /* MEDIDAS QUE VÊM DO `barra.js`, em coordenadas de artboard:
       --nav-w      a nav JÁ ABERTA (é shrink-to-fit; o CSS não a lê)
       --cta-w      a pastilha
       --bloco-dir  a pastilha mais o vão, ou 0 quando não há pastilha
     As reservas são as do índice, e servem só o fotograma anterior à
     medição. */
  --nav-w: 829;
  --cta-w: 242;
  --bloco-dir: 274;
}

.faixa {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc((var(--nav-alta) + var(--faixa-ar) * 2) * 1px * var(--k, 1));
  opacity: 0;
  transition: opacity var(--gesto) var(--curva);
  box-shadow: var(--nav-sombra);

  /* Expandida, a nav perde o contorno próprio — dissolve-se na faixa.
     Sem isto ficava sem borda nenhuma, e a barra deixava de falar a
     língua das cápsulas. A largura e a cor saem da mesma propriedade
     que a nav usa, por isso não há dois sítios para as manter. */
  border-bottom: var(--nav-borda);

  /* O `color-mix` já lê a cor da pastilha, seja ela qual for. O valor
     de cima é só a rede para quem não o suporta — e estava no roxo
     antigo, o que dava duas cores conforme o browser. */
  background: rgba(74, 41, 75, .96);
  background: color-mix(in srgb, var(--nav-fundo) 96%, transparent);
}

/* O desfoque só onde há com que o fazer. Sem `@supports` o Firefox
   antigo ficava com uma faixa opaca a tapar a página. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .faixa {
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
  }
}

.barra--cheia .faixa { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   O BRILHO ATRAVESSA A BARRA INTEIRA

   Cada pastilha da casa tem um brilho que segue o rato: um `::after`
   com uma poça de luz em `--gx`/`--gy`, que um ouvinte delegado do
   artboard escreve. A nav é UMA pastilha — e no estado B, com a barra
   já de bordo a bordo, o brilho continuava preso à caixa dela. Passar
   o rato pela faixa não fazia nada em todo o resto da largura.

   Agora quem brilha é a faixa. O degradê é o MESMO do artboard, cor por
   cor; o que muda é o raio, porque a superfície passou de 829px de nav
   a um ecrã inteiro e a poça de 260 lá dentro lia-se como um reflexo
   perdido.

   ═══ E A FAIXA PASSA A APANHAR O RATO ═══
   A camada da barra é `pointer-events: none` de propósito, para não
   tapar a página. Mas a faixa, no estado B, é uma barra OPACA por cima
   dela — e mesmo assim deixava passar os cliques para o que estava por
   baixo. Corrigir isso é o que o brilho precisa (sem rato não há
   `:hover`) e é o que já devia ser. Só no estado B: fechada, a faixa
   está a zero de opacidade e tem de continuar transparente ao toque. */
.faixa::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 460ms ease;
  background: radial-gradient(var(--brilho-r, 460px) circle at var(--gx, 50%) var(--gy, 50%),
              rgba(255, 244, 255, 0.13),
              rgba(222, 168, 226, 0.06) 38%,
              rgba(180, 110, 184, 0.02) 62%,
              rgba(150, 80, 155, 0) 88%);
}

.barra--cheia .faixa { pointer-events: auto; }

/* O `:hover` é da BARRA e não da faixa. A nav e a pastilha estão POR
   CIMA da faixa, não dentro dela — são irmãs — e por isso
   `.faixa:hover` apagava-se precisamente quando o rato passava pelas
   ligações, que é onde ele mais está. O estado `:hover` sobe pelos
   antepassados mesmo quando eles são `pointer-events: none`, por isso a
   barra apanha os três: a faixa, a nav e a pastilha.

   Só onde há rato a sério: num ecrã de dedo o `:hover` fica preso ao
   primeiro toque. Ao dedo é o `.faixa-toque` (barra.js) que a acende,
   e onde se tocou. */
@media (hover: hover) and (pointer: fine) {
  .barra--cheia:hover .faixa::after { opacity: 1; }
}
.faixa.faixa-toque::after { opacity: 1; }

/* E a nav deixa de brilhar por sua conta: duas poças ao mesmo tempo,
   uma dentro da outra, lem-se como um defeito. A regra do artboard é
   `:is(.palco--largo, .barra--largo) .pill:hover::after`, que são dois
   símbolos; esta tem dois mais o elemento, e passa à frente sem
   `!important`. */
.barra--cheia nav.pill:hover::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .faixa::after { transition-duration: 1ms; }
}

/* ═══════════════════════════════════════════════════════════════════
   A BANDA ESTREITA: A BARRA É SEMPRE DE BORDO A BORDO

   A 390 a nav era uma pastilha de 350 pousada a 20px do bordo, e a
   página passava-lhe dos dois lados. Lia-se como uma etiqueta em cima
   do herói, não como a barra do sítio — e o herói vinha logo por baixo,
   a competir com ela.

   Agora é a mesma peça que a banda larga usa no estado B, mas SEM
   estado: a faixa está sempre aberta, a nav dissolve-se nela (sem
   fundo, sem borda, sem sombra) e estende-se aos 390 todos. O que fica
   é o logótipo à esquerda e o hambúrguer à direita, com a goteira de 20
   que o resto da página usa.

   Só onde a página pedir `faixa: true` — ver o registo do `gerar.mjs`.
   ═══════════════════════════════════════════════════════════════════ */
.barra--estreito.barra--faixa .faixa { opacity: 1; pointer-events: auto; }

.barra--estreito.barra--faixa nav {
  /* Dois símbolos de classe mais o elemento: passa à frente do
     `.barra--cheia nav`, que centraria a nav no quadro — aqui ela não
     se centra, estende-se. */
  width: calc(var(--qw) * 1px);
  padding: 0 12px 0 20px;
  transform: translate(0, calc((var(--faixa-ar) - var(--nav-topo)) * 1px));
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Sem pastilha não há poça de luz presa a ela: quem brilha é a faixa,
   como na banda larga. */
.barra--estreito.barra--faixa nav.pill:hover::after { opacity: 0; }

/* A banda estreita nunca chega a `.barra--cheia` (não tem marco), por
   isso a poça de luz da faixa — que na larga acende com
   `.barra--cheia:hover` — nunca acendia aqui. Mas a faixa estreita
   está SEMPRE aberta (opaca, `pointer-events: auto`), portanto pode
   apanhar o `:hover` na mesma. Acende-a directamente, sem o estado —
   e só onde há rato (ao dedo é o `.faixa-toque` que trata disto). */
@media (hover: hover) and (pointer: fine) {
  .barra--estreito.barra--faixa:hover .faixa::after { opacity: 1; }
}


/* ═══ AS DUAS CENTRAM-SE JUNTAS ═══
   A nav estava centrada no quadro e a pastilha pendurada na goteira
   direita: dois centros diferentes, e um vazio de 434 à esquerda contra
   16 à direita. Lia-se como uma nav ao meio com uma peça agarrada ao
   canto, não como uma barra.

   Agora o que se centra é o BLOCO — nav, vão, pastilha — e a margem
   fica igual dos dois lados. O `50%` de antes contava a largura da
   própria nav, e por isso chegava; para o bloco é preciso saber as duas
   larguras, e quem as mede é o `barra.js`.

   Sem pastilha (a página do orçamento), o `--bloco-dir` é 0 e a conta
   reduz-se sozinha à nav ao meio. */
.barra--cheia nav {
  transform: translate(calc((var(--qw) - var(--nav-w) - var(--bloco-dir)) * 0.5px),
                       calc((var(--faixa-ar) - var(--nav-topo)) * 1px));
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════
   B · E ENTRA COMO MAIS UMA CATEGORIA

   O tamanho é o das outras: 15,5px, o mesmo peso, a mesma largura de
   glifo. Não leva a `Designer` — no rodapé o «Contactos» também é uma
   ligação normal, e é o próprio desenho a dizer que aqui é uma
   categoria e não uma marca.

   O `max-width` abre de 0 até à largura natural do texto, que o
   `barra.js` mede e escreve em `--lig-w` (só se sabe depois de a face
   carregar). E o `margin-left` negativo come o `gap: 21px` da nav
   enquanto a ligação está fechada — senão ficava lá um vão de 21px à
   espera de nada.
   ═══════════════════════════════════════════════════════════════════ */
.barra .lig {
  display: block;
  overflow: hidden;
  max-width: 0;
  margin-left: -21px;
  opacity: 0;
  pointer-events: none;
  /* O mesmo que a pastilha do orcamento: fechadas, estas ligacoes
     continuavam a apanhar o tabulador. */
  visibility: hidden;
  transition: max-width   var(--gesto) var(--curva),
              margin-left var(--gesto) var(--curva),
              opacity     240ms ease 140ms,
              visibility  0s linear var(--gesto);
}
.barra--cheia .lig {
  /* A largura vive em CADA item, e não na barra: são dois agora — o
     «Sobre» e os «Contactos» — e uma medida partilhada dava ao mais
     curto a largura do mais comprido. */
  max-width: var(--w, 150px);
  margin-left: 0;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: max-width   var(--gesto) var(--curva),
              margin-left var(--gesto) var(--curva),
              opacity     240ms ease 140ms,
              visibility  0s linear 0s;
}

/* ═══ ONDE ESTAMOS ═══
   Não se desenha aqui nada. O artboard já traz o seu `.navhere` — um
   traço de 3px com o degradé da marca por baixo da ligação da página
   aberta — e essa regra agora alcança a barra, porque o prefixo do
   `escopar` passou a `:is(.palco--largo, .barra--largo)`. O gerador só
   acrescenta o `aria-current`, que é o que falta para quem lê o sítio
   sem o ver. */

@media (prefers-reduced-motion: reduce) {
  .barra nav,
  .barra .faixa,
  .barra .lig { transition-duration: 1ms; }
}

/* ═══ O MARCO ═══
   A marca de 1px que o gerador põe no palco, na altura em que a barra
   troca de estado. Não se vê nem se toca: existe só para o
   `IntersectionObserver` do `barra.js` ter uma linha para vigiar. */
.palco { position: relative; }
.marco {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   A GAVETA

   O que a nav larga mostra em fila, a estreita guarda aqui. Vive no
   `.barra-quadro`, que é a régua do artboard — escala com a banda como
   a nav, sem uma segunda medida para manter.

   Veste-se como as cápsulas do sítio, porque é uma delas: o mesmo
   `--nav-fundo`, a mesma `--nav-borda`, o mesmo raio de 4.
   ═══════════════════════════════════════════════════════════════════ */
.gaveta {
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 2px;
  border-radius: 4px;
  background: var(--nav-fundo, #4A294B);
  border: var(--nav-borda, 2px solid #713773);
  box-shadow: var(--nav-sombra, 0 8px 22px rgba(43, 18, 42, .18));

  /* Anima o que o compositor resolve sozinho. Animar `height` obrigava
     a refazer o layout de uma página que pode ter 14 mil pixéis. */
  opacity: 0;
  transform: translateY(-6px);

  /* FECHADA, SAI DO TESTE DE ACERTO. Só com `opacity: 0` a gaveta
     continuava a apanhar o toque: uma coluna de ligações invisível,
     pendurada da barra fixa, tapava o terço de cima de TODAS as
     páginas — tocar numa seta da grelha dos brindes abria os
     «Contactos». O `visibility` tira-a do caminho; anima-se a zero no
     fim da transição, para o esmaecer ainda se ver. O `pointer-events`
     nas ligações é o cinto por cima dos suspensórios: `.barra a`
     punha-lhes `auto`, e um `:not()` de duas classes passa-lhe à frente. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease,
              visibility 0s linear 200ms;
}

.gaveta:not(.gaveta--aberta) a { pointer-events: none; }

.gaveta--aberta {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* ═══ A GAVETA SEGUE A NAV QUANDO ELA SOBE ═══
   No estado com faixa a nav estreita cola-se ao topo do ecrã com um
   `translate(0, faixa-ar − nav-topo)` — no índice são −55px. A gaveta
   pendura da nav, mas ficava para trás: abria 55px abaixo da barra,
   com o herói a espreitar no vão. Leva o mesmo deslocamento, e assim
   o `top: nav-topo + nav-alta + 8` volta a valer os 8px de folga que
   diz. O −6px da abertura soma-se aqui à mão — `transform` não
   empilha. Três classes: passa à frente do `.gaveta` de uma. */
.barra--estreito.barra--faixa .gaveta {
  transform: translate(0, calc((var(--faixa-ar) - var(--nav-topo)) * 1px - 6px));
}
.barra--estreito.barra--faixa .gaveta--aberta {
  transform: translate(0, calc((var(--faixa-ar) - var(--nav-topo)) * 1px));
}

/* ═══ PORQUE É QUE ISTO LEVA `.barra` À FRENTE ═══
   A folha do artboard entra escopada como `:is(.palco--estreito,
   .barra--estreito) a`, que é UMA classe de especificidade — igual à
   de `.gaveta a` — e vem depois nesta cascata. Empatados, ganhava ela,
   e pintava as ligações de #3A1E3C: roxo escuro sobre roxo escuro, com
   três dos quatro destinos ilegíveis.

   `.barra .gaveta a` são duas classes, e passa à frente sem precisar
   de `!important`. Vale para tudo o que aqui se acrescente: dentro da
   barra, a folha do artboard também manda. */
.barra .gaveta a {
  padding: 11px 12px;
  border-radius: 4px;
  text-decoration: none;
  color: #FFFFFF;
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: 0.005em;
  font-variation-settings: 'wdth' 75;
  white-space: nowrap;
}

/* O dedo precisa de saber onde tocou. */
.barra .gaveta a:active { background: rgba(255, 255, 255, .10); }
.barra .gaveta a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }

/* A página onde já estamos não se anuncia como destino. */
.barra .gaveta a[aria-current="page"] {
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .72);
}

@media (prefers-reduced-motion: reduce) {
  .gaveta { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   C · O PEDIDO DE ORÇAMENTO, À DIREITA DA FAIXA

   No estado A o herói já tem o seu botão, e o artboard traz a pastilha
   «Contactonos» no canto. Passado o herói os dois saem de cena com a
   página, e a barra ficava a ser só navegação — sem uma única saída
   para quem já se decidiu, precisamente a partir do momento em que o
   visitante leu o suficiente para se decidir.

   ═══ E FICA À DIREITA, QUE É ONDE JÁ ESTAVA ═══
   Esteve à esquerda por um raciocínio que só olhava para o estado B: o
   centro é das categorias, à esquerda alinha com a goteira, as duas
   pontas ocupadas. Está certo — e ignora o estado A, que é de onde se
   vem. Ali a pastilha do artboard está no canto DIREITO (x 1154 de
   1440), com a nav à esquerda. Ao passar o herói a chamada à acção
   atravessava a barra de um lado ao outro.

   À direita não atravessa nada: fica onde estava e só encolhe. A
   goteira é a mesma dos 47 — o `right` mede-se no quadro de 1440, e o
   `transform-origin: 0 0` do `.barra-quadro` faz a escala tratar dos
   dois lados por igual.

   ═══ E ENCOLHE ═══
   Media 216×55 — a altura da nav inteira. É uma pastilha secundária: o
   que manda na barra são as categorias. Passa a 42 de alto, com o
   recuo, o vão e o símbolo à medida. O que NÃO encolhe é o texto, que
   é a única coisa ali que se lê.

   ═══ CLARA SOBRE ESCURO ═══
   As pastilhas da casa são roxas sobre papel claro. Aqui o chão é a
   faixa roxa, e uma pastilha roxa sobre roxo não se vê. Inverte-se —
   papel claro, seta roxa — que é o que o menu de 390 já faz na mesma
   situação, e por isso não é linguagem nova.

   O deslocamento vertical é o MESMO da nav: as duas sobem o tanto que
   falta para ficarem ao meio da faixa. Se fossem dois números, ao
   segundo retoque estavam desalinhadas. */
/* ═══ TRÊS SÍMBOLOS, E NÃO UM ═══
   A pastilha leva `.pill` para ganhar o brilho que segue o rato, como
   todas as outras da casa. Mas a folha do artboard traz
   `.pill { position: relative; isolation: isolate }` — e o `escopar`
   prefixa-a para `:is(.palco--largo, .barra--largo) .pill`, que já são
   DOIS símbolos, e entra depois desta (o `<style>` do artboard está no
   corpo, esta folha na cabeça).

   Com `.cta-barra` ou `.barra .cta-barra` ganhava ele: o `absolute`
   virava `relative`, a pastilha esticava-se aos 1440 do quadro e
   ficava POR BAIXO da nav — foi o que apagou o logotipo. Medido:
   `width: 1440px`, `position: relative`. Daí os três símbolos. */
.barra .barra-quadro .cta-barra {
  position: absolute;
  /* Encostada à direita do BLOCO centrado, e não à goteira do quadro:
     o bloco começa em `(qw - nav - bloco-dir) / 2` e a pastilha entra
     logo a seguir à nav e ao vão. */
  left: calc((var(--qw) - var(--nav-w) - var(--bloco-dir)) * 0.5px
             + (var(--nav-w) + var(--vao-cta)) * 1px);
  top: calc(var(--nav-topo, 44) * 1px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  height: calc(var(--cta-alta, 42) * 1px);
  padding: 0 5px 0 14px;
  border-radius: 4px;
  text-decoration: none;
  background: #F1EFF1;
  border: 2px solid #F1EFF1;
  color: #3A1E3C;

  /* ═══ A FACE É A DESIGNER, COMO EM TODAS AS PASTILHAS DA CASA ═══
     Estava com o traje das CATEGORIAS — Roboto estreitada a `wdth` 75 —
     por um argumento que não se sustentava: que dentro da barra só o
     «PontOriginal Pro» falava outra tipografia. Mas isto não é uma
     categoria, é uma pastilha, e no artboard TODAS as pastilhas são
     Designer a 15.5/400 — a «Contactonos» do herói, o «Enviar Pedido»,
     o «White-label», o «Entrar no PRO». A excepção era esta.

     O corpo fica nos 15.5 do artboard mesmo com a caixa a encolher:
     numa pastilha que só tem duas palavras, são elas que se leem. */
  font-family: 'Designer', 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  /* `opacity: 0` esconde dos olhos e nao do TECLADO: sem isto ficava
     ali uma pastilha invisivel a apanhar o tabulador no estado A. A
     visibilidade nao se interpola, por isso troca-se no fim do
     esvanecer (320ms) — e a subir troca-se logo. */
  visibility: hidden;
  transition: opacity 320ms ease,
              transform var(--gesto) var(--curva),
              visibility 0s linear 320ms;
}

.barra .barra-quadro .cta-barra i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  /* Os mesmos 14 de folga do artboard, agora contados sobre a altura
     da pastilha e não sobre a da nav — senão o símbolo ficava mais
     alto do que a caixa que o leva. */
  height: calc((var(--cta-alta, 42) - 14) * 1px);
  border-radius: 4px;
  background: #4A294B;
  border: 2px solid #713773;
}
.barra .barra-quadro .cta-barra i svg { width: 11px; height: 13px; }

.barra--cheia .barra-quadro .cta-barra {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 320ms ease,
              transform var(--gesto) var(--curva),
              visibility 0s linear 0s;
  /* A nav sobe o tanto que falta para ficar ao meio da faixa, e esta
     tem de fazer o mesmo — mas já não tem a altura da nav. Ao meio da
     faixa é `faixa-ar` mais metade do que lhe sobra: enquanto foram
     iguais, `faixa-ar` sozinho bastava. */
  transform: translateY(calc((var(--faixa-ar)
                              + (var(--nav-alta, 55) - var(--cta-alta, 42)) / 2
                              - var(--nav-topo)) * 1px));
}

@media (prefers-reduced-motion: reduce) {
  .barra .barra-quadro .cta-barra { transition-duration: 1ms; }
}

/* ═══════════════════════════════════════════════════════════════════
   A BARRA DO WORDPRESS EMPURRA A PÁGINA — E A NOSSA TEM DE IR ATRÁS

   Com sessão iniciada, o WordPress põe a sua barra preta no topo e
   escreve `html { margin-top: 32px }`. A PÁGINA desce 32px — e com ela
   o desenho inteiro, incluindo a pastilha «Contactos», que é desenho da
   página. A nossa barra não desce: é `position: fixed`, e o `fixed`
   mede-se ao ecrã, não ao documento.

   Resultado, medido: a pastilha «Contactos» fica 32px abaixo da barra
   do menu, que estavam à mesma altura (as duas em 51–118 a 1920, com a
   pastilha a cair para 83–150). Quem tem sessão vê o desalinhamento em
   TODAS as páginas; quem visita o sítio não vê nada — e é por isso que
   isto passa despercebido a quem faz o sítio e salta à vista a quem o
   administra.

   As medidas são as do WordPress, e não inventadas: 32px acima dos 782,
   46px entre os 601 e os 782. Abaixo dos 600 a barra dele DEIXA de ser
   fixa (rola com a página), e por isso a nossa volta ao topo — se
   descesse 46, abria um vão por baixo dela mal se rolasse um pixel.

   As `.portas` vêm com a barra por serem a outra peça `fixed` com o
   topo no zero: a cortina de transição passaria por trás da barra dele.
   O resto da casca está preso em baixo (`.acoes`, `.pocook`) e não sente
   nada disto.
   ═══════════════════════════════════════════════════════════════════ */
body.admin-bar .barra,
body.admin-bar .portas { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .barra,
  body.admin-bar .portas { top: 46px; }
}

@media screen and (max-width: 600px) {
  body.admin-bar .barra,
  body.admin-bar .portas { top: 0; }
}

/* As duas marcas que dizem à barra quando trocar de estado — ver o
   ponto 4 do `js/barra.js`. Não pintam, não ocupam espaço na página
   (são absolutas) e não apanham o rato. Ficam no `body`, que o
   `palco.css` põe em `position: relative`, e por isso o `top` delas
   conta-se do princípio do documento. */
.barra-marca {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: -1;
}