/* ═══════════════════════════════════════════════════════════════════
   rodape.css — o rodapé é UM, e é o mesmo nas treze páginas.

   ═══ PORQUÊ SAIU DO ARTBOARD ═══
   O rodapé estava desenhado DENTRO de cada artboard, com todas as peças
   em `position: absolute` e um `top` clavado. Treze artboards largos e
   treze estreitos: vinte e seis cópias do mesmo bloco. Medidas as vinte
   e seis, a banda larga estava igual em todas — mas a estreita tinha
   DUAS disposições incompatíveis:

     · os oito artboards de telemóvel do cliente (720px de faixa):
       morada numa linha, sem «Ver no mapa», rótulos legais abreviados
       («Privacidade», «Cookies»), o fio ANTES das colunas, duas colunas
       lado a lado e uma tira de fotografias;
     · os cinco derivados pelo `converter.mjs` (744px): morada em duas
       linhas, com «Ver no mapa», rótulos legais inteiros, o fio DEPOIS
       das colunas, três colunas empilhadas, sem tira.

   (O fio já não está em nenhum dos dois: saiu do rodapé. Ver a régua.)

   Corpo de 12,2px contra 11px, margem de 20 contra 12. Não é um desvio:
   são dois rodapés. E cada vez que a «Navegação» ganhava uma página, o
   gerador tinha de descer à mão tudo o que vivia por baixo dela
   (`descerRodapeEstreito`) — um remendo que só existia porque as peças
   estavam clavadas.

   ═══ O QUE MUDA ═══
   O rodapé passa a ser CASCA, como a barra e as portas: um só bloco,
   posto pelo gerador em todas as páginas, nas duas bandas. E por dentro
   é FLUXO — grelha e `gap` — não coordenadas. Acrescentar uma página à
   «Navegação» deixa de mexer em número nenhum.

   ═══ A FORMA É A DO RODAPÉ QUE ESTÁ NO AR ═══
   Estrutura, ordem dos blocos, ritmo vertical e posição vêm do rodapé
   de `pontoriginal.pt` (o `<footer>` do tema dele): régua no topo, marca
   com logótipo · frase · morada · «Ver no mapa», três colunas de
   ligações, e um remate separado por um fio de cabelo com o © e os
   quatro pontos do espectro. O traje — face, corpos, cores — é o nosso,
   tirado do artboard.

   Os vãos dele estão à escala da nossa grelha: o contentor dele mede
   1184 de conteúdo, o nosso 1346 (1440 menos 2×47), que é 1,14× — daí
   78 → 90 no ar de cima e 56 → 64 no vão antes do remate.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ A CAIXA ═══
   Absoluta no quadro (é a única maneira de aterrar num artboard), mas
   por dentro é fluxo. O `top` e a largura da faixa vêm do gerador; a
   ALTURA não é declarada aqui: é o conteúdo que a dá, e o gerador
   guarda o número na faixa escura e no quadro. O `_rodape.html` compara
   os dois e queixa-se se divergirem. */
.palco .quadro .rodape {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 3;
  box-sizing: border-box;
  padding: var(--r-topo) var(--r-lado) var(--r-baixo);
  display: flex;
  flex-direction: column;
  /* O quadro põe itálico e caixa alta em linha, e é assim que o rodapé
     do artboard se lia. Herda-se de propósito. */
  text-align: left;
}

.palco--largo .quadro .rodape {
  --r-lado: 47px;                 /* a goteira da página */
  --r-topo: 90px;                 /* o ar de cima (78 dele × 1,14) */
  --r-baixo: 32px;
  --r-vao: 64px;                  /* entre a marca e o remate (56 dele × 1,14) */
}
.palco--estreito .quadro .rodape {
  --r-lado: 20px;
  --r-topo: 62px;
  --r-baixo: 26px;
  --r-vao: 36px;
}

/* ═══ A RÉGUA DO TOPO ═══
   No tema dele o rodapé abre com uma barra de 5px de degradê. Aqui é a
   mesma coisa, com as cores da marca.

   Estava aqui o FIO do artboard — o percurso cosido, com máscara e
   medidor — e saiu. Ver o porquê no `fonte/rodape.mjs`.

   Fica FORA do `padding` da caixa, e por isso não empurra nada. */
.palco .quadro .rodape-regua {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #8E4A8F, #D355CB 35%, #3FA9F5 70%, #7AC943);
}

/* ═══ A GRELHA, QUE DEIXOU DE SER UMA GRELHA (12-set) ═══
   Estavam aqui quatro colunas na banda larga — a marca a `2.3fr` e as
   três de ligações — e duas na estreita, com a marca e o «Falar
   connosco» a atravessar. AS TRÊS COLUNAS DE LIGAÇÕES SAÍRAM (ver o
   porquê no `fonte/rodape.mjs`), e o que sobra dentro da caixa é a
   marca, sozinha.

   Fica `grid` com uma coluna e não se troca por um `block`: é a mesma
   caixa, o mesmo alinhamento ao topo, e o dia em que as colunas
   voltarem é uma linha de `grid-template-columns` e não uma
   reconstrução.

   O `--r-vao` que separava as colunas do remate passa a separar a
   MARCA do remate. O número é o mesmo — é o ritmo do rodapé dele à
   nossa escala (56 → 64) — e é o que impede que apertar o rodapé se
   transforme em colar o © à morada.

   A CONTA DA MEDIDA QUE SE PERDEU, para quem vier medir outra vez: o
   bloco das colunas valia 394 unidades na banda estreita (duas de seis
   e cinco itens lado a lado, 30 de vão, e o «Falar connosco» de quatro
   a atravessar) e ~200 na larga, onde eram irmãs da marca e por isso
   não somavam altura — a larga desce só o que a marca já não tem de
   igualar. */
.palco .quadro .rodape-in {
  display: grid;
  align-items: start;
}
.palco--largo .quadro .rodape-in {
  grid-template-columns: 1fr;
}
.palco--estreito .quadro .rodape-in {
  grid-template-columns: 1fr;
}

/* ═══════════════════════════════════════════════════════════════════
   O CHAO DE LETRA, TAMBEM AQUI

   O `chaoDeLetra()` do gerador nao entra no rodape: isto e casca, tem
   folha propria, e uma ALTURA em numero que o `site/_rodape.html`
   vigia. Uma letra que cresce numa caixa medida muda a medida.

   Aqui estavam tambem as medidas do `.fh` e das `.fcol .s6-link` — os
   rotulos e as vinte ligacoes das colunas. Sairam com elas. O que
   sobra de letra pequena no rodape e a morada, o «Ver no mapa» e o
   remate, e esses tres continuam a pedir o passo a dividir pelo `--kt`
   pela mesma razao de sempre: sem isso a morada pintava 8,5px a 320,
   que era o pior numero que sobrava no sitio inteiro.

   Fica a conta que decidiu isto, porque uma medida que envelhece sem
   se dar por isso e exactamente o que este ficheiro anda a tentar
   evitar noutro sitio — medida em unidades de artboard, com o travao
   do `--kt` do `js/quadro.js` (que para aos 0,82051) ja posto:

                          260   280   300   320   360   390+
     sem as ligacoes      713   713   713   713   703   700
     com as ligacoes      726   726   726   726   703   700

   Treze unidades para nao ter uma unica letra abaixo dos 11px
   pintados: e o que faz entrarem TODAS as pecas do rodape.
   ═══════════════════════════════════════════════════════════════════ */

/* O artboard declarava a transição de cor das ligações e NUNCA escreveu
   o `:hover` que ela servia — passar o rato pelas vinte não fazia nada.
   No rodapé dele o realce é o contraste cheio, e é o que se faz. */
.palco .quadro .rodape .s6-link {
  color: rgba(242, 242, 242, 0.82);
  text-decoration: none;
  transition: color 220ms ease;
}
.palco .quadro .rodape a.s6-link:hover {
  color: #F2F2F2;
}

/* ═══ A MARCA ═══
   O logótipo é o que faltava: o rodapé dele abre com ele, o nosso
   começava na frase. É o mesmo lockup da barra (`logo-nav.svg`, já em
   #F2F2F2, que é a cor do texto daqui). */
.palco .quadro .rodape-marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ═══ NA BANDA LARGA, A MARCA VAI AO EIXO ═══
   Enquanto o rodapé tinha as três colunas de ligações, a marca era a
   primeira de quatro e a largura estava toda ocupada. Sem elas ficou um
   bloco encostado à esquerda com o terço da direita vazio — e um vazio
   desse tamanho não se lê como escolha, lê-se como peça em falta.

   Só a MARCA se centra. A barra de baixo continua a ir de ponta a
   ponta: o © numa e o «Feito em Ovar» na outra são os dois extremos que
   dão a medida do rodapé, e é contra essa medida que um bloco centrado
   se percebe como centrado. Tirá-los do lugar deixava o rodapé sem
   nenhuma referência de largura.

   A banda estreita não leva isto: a 390 não há terço vazio nenhum, e o
   bloco de marca alinhado à esquerda é o que o cliente aprovou. */
.palco--largo .quadro .rodape-marca {
  align-items: center;
  text-align: center;
}
.palco .quadro .rodape-logo {
  display: block;
  width: auto;
  height: 44px;
}
.palco--estreito .quadro .rodape-logo {
  height: 34px;
}

/* Os corpos são os do artboard, declaração por declaração — estavam em
   `style=` e passam para aqui sem se mexer num número. */
.palco .quadro .rodape-frase {
  margin: 22px 0 0;
  font-family: 'Designer', 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #F2F2F2;
}
.palco .quadro .rodape-morada {
  margin: 20px 0 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: rgba(242, 242, 242, 0.72);
}
/* ═══ OS ELOS DA MARCA — «VER NO MAPA» E «BLOG» ═══
   O bloco da marca acabava numa ligação só. Passa a acabar em duas, na
   MESMA LINHA. Ver o `ELOS DA MARCA` do `fonte/rodape.mjs` para o
   porquê de o Blog voltar ao rodapé e de não ir para a linha de legais.

   Porque é uma linha e não duas empilhadas: a altura do rodapé é
   número clavado (o `ALTURA` do `rodape.mjs`, que o `site/_rodape.html`
   vigia), e uma linha a mais no bloco da marca paga-se nas treze
   páginas e nas duas bandas. Lado a lado não custa altura nenhuma —
   medido, o par mede ~195 das 350 unidades da coluna a 390 e ~238 a
   320, que é onde a letra é maior.

   ═══ O VÃO NÃO É DE DESENHO, É DO DEDO (banda estreita) ═══
   Enquanto o «Ver no mapa» estava sozinho não havia conta nenhuma a
   fazer. Com uma vizinha ao lado há a mesma da linha de legais, e pela
   mesma razão: as duas levam a auréola de toque do `fonte/toque.css`
   (`inset: -14px -12px`), e duas auréolas que se sobreponham são pior
   do que uma pequena — o dedo aterra entre as duas e abre a errada.
   Daí 24 de coluna (12+12) e 28 de linha (14+14), que é o mínimo e dá
   auréolas encostadas com sobreposição zero.

   E A AURÉOLA DELES MUDOU, sem se lhe tocar: o `.rodape-marca >
   a[href]` do `toque.css` — a auréola apertada de 6px que ali está pelo
   LOGÓTIPO — apanhava também o «Ver no mapa», que é filho directo da
   marca, e ganhava-lhe por especificidade à auréola cheia. Embrulhados
   num `.rodape-elos`, os dois deixam de ser filhos directos: o logótipo
   fica com os seus 6px e eles passam a ter os 14/12 de toda a gente,
   que é o que o comentário do `toque.css` sempre disse que tinham.
   Alvos de ~48px de altura em vez de ~32. */
.palco .quadro .rodape-elos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
  gap: 10px 26px;
}
.palco--largo .quadro .rodape-elos { justify-content: center; }

.palco .quadro :is(.rodape-mapa, .rodape-blog) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.4px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.palco--estreito .quadro .rodape-frase { margin-top: 16px; font-size: calc(var(--d5) * 1.18); }
.palco--estreito .quadro .rodape-morada { margin-top: 14px; font-size: calc(var(--c3) / var(--kt, 1)); line-height: 1.55; }
.palco--estreito .quadro .rodape-elos { margin-top: 12px; gap: 28px 24px; }
.palco--estreito .quadro :is(.rodape-mapa, .rodape-blog) { font-size: calc(var(--c3) / var(--kt, 1)); }

/* ═══ O REMATE ═══
   Um fio de cabelo a separar, como no dele, e os quatro pontos do
   espectro à direita — o mesmo quarteto que abre cada sobretítulo, na
   versão clara, que é a que ele usa em painel escuro. O «Feito em Ovar»
   é nosso e fica: encosta aos pontos, do lado de fora.

   O REMATE PASSOU A TER DUAS LINHAS (12-set): o selo (© · pontos ·
   «Feito em Ovar») e, por baixo, a linha de legais. O `.rodape-base`
   deixa de ser a linha e passa a ser a COLUNA que as empilha; a linha
   do selo é o `.rodape-selo`, com o mesmo traje que o `.rodape-base`
   tinha — alinhamento ao meio e o vão de 14/10.

   Porque é uma COLUNA e não um `flex-wrap` na mesma linha: medido a
   320, que é onde a letra é maior, o selo mede 340 unidades de conteúdo
   e vãos (o © dá 163, os pontos 46, o «Feito em Ovar» 111, e os dois
   vãos de 10) numa coluna de 350. Dez unidades. Com as quatro peças na
   mesma caixa a quebrar, essas dez unidades passavam a ser a única
   coisa a impedir que os pontos e o «Feito em Ovar» caíssem para uma
   linha sozinhos — e ninguém quer descobrir isso no dia em que o © diz
   2027 ou o selo ganha uma palavra. Empilhado, cada linha quebra por
   sua conta e a de legais não arrasta a assinatura. */
.palco .quadro .rodape-base {
  margin-top: var(--r-vao);
  padding-top: 20px;
  border-top: 1px solid rgba(242, 242, 242, 0.14);
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: 12.4px;
  letter-spacing: 0.05em;
  color: rgba(242, 242, 242, 0.5);
}
.palco .quadro .rodape-selo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.palco--estreito .quadro .rodape-base {
  padding-top: 16px;
  font-size: calc(var(--c4) / var(--kt, 1));
}
.palco--estreito .quadro .rodape-selo { gap: 10px; }

/* ═══ A LINHA DE LEGAIS ═══
   Cinco ligações — Privacidade · Cookies · Termos e condições ·
   Devoluções · Livro de reclamações. Ver o `LEGAIS` do
   `fonte/rodape.mjs` para o porquê de existirem e de serem estas.

   O QUE ELA TEM DE PARECER: miudinho legal, e não navegação. Por isso
   herda o corpo e o espaçamento do `.rodape-base` — a mesma letra do ©,
   que está a um vão de distância — e o que a distingue é só a cor das
   ligações, que é a das outras do rodapé (0,82 contra os 0,5 do ©):
   uma ligação tem de se ver que é ligação, e esse é o único sinal que
   aqui há. Sem rótulo, sem pontos entre as palavras (a 320 a linha
   quebra em três e um ponto ao fim de uma linha lê-se como sujidade),
   sem sublinhado.

   Não leva alinhamento nenhum: o rodapé é um bloco de marca alinhado à
   esquerda, e isto alinha com o © que tem em cima.

   ═══ O VÃO NÃO É DE DESENHO, É DO DEDO (banda estreita) ═══
   As ligações do rodapé levam a auréola de toque do `fonte/toque.css` —
   um `::after` absoluto com `inset: -14px -12px`, que não ocupa espaço
   no fluxo mas apanha o dedo. Cinco ligações seguidas a 390 põem
   auréolas VIZINHAS, e duas auréolas que se sobreponham são pior do que
   uma pequena: o dedo aterra entre as duas e abre a errada.

   A conta que decide os vãos, e que é a razão de eles não serem os da
   banda larga:

     · a auréola cresce 14 para cima e 14 para baixo  →  vão de linha
       ≥ 28, senão a linha de baixo sobrepõe-se à de cima;
     · cresce 12 para cada lado  →  vão de coluna ≥ 24;
     · a altura do alvo é a caixa da ligação mais 28. Com
       `line-height: 1.5` sobre os 13,5px pintados a 390 a caixa dá
       20,2 e o alvo 48 — acima dos 44 da WCAG 2.2 AA.

   28 e 24 são o MÍNIMO e é o que está: dá auréolas encostadas, com
   sobreposição zero, que é o mesmo critério das duas setas do carrossel
   dos Brindes. Um vão maior só afastava a letra sem ganhar alvo.

   O `nowrap` é para a conta se manter: uma ligação que partisse em duas
   linhas passava a ter uma caixa de duas linhas com uma auréola só, e a
   altura do alvo deixava de ser a de cima. Cabe — a 320, que é onde a
   letra é maior, a mais comprida («Livro de reclamações») mede ~170 dos
   350 da coluna. */
.palco .quadro .rodape-legais {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--r-legais);
}
.palco .quadro .rodape-legais .s6-link { white-space: nowrap; }
.palco--largo .quadro .rodape-legais {
  --r-legais: 22px;
  gap: 10px 22px;
}
/* O vão que separa a linha de legais do selo é MAIOR do que o vão
   entre as linhas dela (34 contra 28), e é de propósito: com os dois
   iguais — e pior, com o do selo menor, que era o primeiro número que
   se escreveu — as três linhas de 320 leem-se como quatro linhas
   soltas e o © passa a ser a primeira delas. O grupo tem de estar mais
   perto de si próprio do que da assinatura que tem em cima. */
.palco--estreito .quadro .rodape-legais {
  --r-legais: 34px;
  gap: 28px 24px;
  line-height: 1.5;
}
.palco .quadro .rodape-pts {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}
.palco .quadro .rodape-pts i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.palco--estreito .quadro .rodape-pts i { width: 7px; height: 7px; }
.palco .quadro .rodape-pts i:nth-child(1) { background: #F1EFF1; }
.palco .quadro .rodape-pts i:nth-child(2) { background: #6E7BD8; }
.palco .quadro .rodape-pts i:nth-child(3) { background: #7BE0AE; }
.palco .quadro .rodape-pts i:nth-child(4) { background: #F06BE0; }

/* ═══ QUEM CHEGA PELO TECLADO ═══
   São oito — o logótipo, o «Ver no mapa», o «Blog» e as cinco legais —,
   e sem isto o foco não se vê em cima de roxo quase preto. O traje é o
   da barra. (Eram vinte e duas quando o rodapé tinha as três colunas.) */
.palco .quadro .rodape a:focus-visible {
  outline: 2px solid #F06BE0;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   AO CENTRO (22-set)

   Pedido do dono: no telemóvel o rodapé «não está nada centrado
   horizontalmente» e a frase em Designer tem a letra grande de mais;
   no PC, as ligações das páginas legais ao centro.

   O resto do sítio já vive ao eixo no telemóvel (títulos, sobretítulos,
   entradas — ver a `telemovel.css`); o rodapé era o único bloco
   encostado à esquerda, e lia-se como outro sítio colado por baixo.
   Passa ao eixo inteiro: marca, frase, morada, elos, selo e legais. Os
   vãos entre as ligações ficam os mesmos — são do dedo, não do desenho
   (ver A LINHA DE LEGAIS, acima).
   ═══════════════════════════════════════════════════════════════════ */
.palco--estreito .quadro .rodape { text-align: center; }
.palco--estreito .quadro .rodape-marca { align-items: center; }
.palco--estreito .quadro .rodape-elos,
.palco--estreito .quadro .rodape-legais { justify-content: center; }

/* O selo: o © e o «Feito em Ovar» deixam de estar nas duas pontas, com
   os pontos empurrados para a direita, e juntam-se ao meio — os pontos
   entre os dois, que é o que são. Se um dia não couberem numa linha,
   quebram ao centro. */
.palco--estreito .quadro .rodape-selo {
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 8px;
}
.palco--estreito .quadro .rodape-pts { margin-left: 0; }

/* A frase em Designer. Vinha a 17,7px pintados — do tamanho de um
   subtitular, num rodapé. Passa a 14 a 390, e segue o corpo: escala com
   o desenho até 390 e fica fixa acima (a mesma conta das `--c` na
   `telemovel.css`), sem descer dos 11 pintados a 320 (11,5). */
.palco--estreito .quadro .rodape-frase {
  font-size: calc(0.875rem * min(var(--kt, 1), 1) / var(--kt, 1));
  line-height: 1.4;
}

/* No PC, a linha de legais vai ao eixo, por baixo do selo. O selo fica
   de ponta a ponta — é ele que dá a medida do rodapé (ver A MARCA). */
.palco--largo .quadro .rodape-legais { justify-content: center; }