/* Âmago — páginas de texto corrido.
 *
 * São três: a declaração sobre redes sociais (2026-09-22), a Declaração ESG e a Política
 * de Privacidade (as duas a 2026-10-02). Usam todas estas regras — por isso os nomes são
 * genéricos (`.pagina-*`) e não de uma declaração. O glossário (2026-10-06) também vai
 * em folhas, e tem as suas regras no fim do ficheiro.
 *
 * Fundo VERDE da marca e texto branco, como o resto do site. Esteve branco por uma volta
 * (2026-09-22) e o cliente preferiu o verde — fica registado que a página branca obrigava
 * a prender a navbar, que é transparente enquanto não se rola e desaparecia sobre o
 * branco. Com o verde isso deixa de ser preciso e a barra volta ao comportamento normal.
 *
 * A MEDIDA da linha é o que manda no resto: um texto para ler quer ~65 caracteres por
 * linha, e é daí que sai a banda (68ch) em vez dos 1280px das secções da homepage.
 */

.pagina{position:relative;z-index:2;background:var(--fundo);color:var(--ink);
  /* O respiro do topo é o mesmo das secções da homepage, mais a navbar: a barra é
     `sticky` e tapa os primeiros pixels de quem chega à página pelo link. */
  padding:calc(var(--altura-nav) + var(--respiro)) clamp(16px,4vw,40px)
          clamp(64px,12vh,120px)}
.pagina-interior{max-width:68ch;margin:0 auto}

.pagina-cabeca{margin-bottom:clamp(32px,6vh,64px)}
/* A etiqueta por cima do título, nas páginas que ainda não têm conteúdo: diz o estado
   sem ocupar o lugar do título. */
.pagina-etiqueta{margin:0 0 clamp(10px,1.6vh,16px);font-size:12px;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
/* Os botões vêm do `base.css`, já nas cores de fundo escuro; aqui só se lhes dá o
   espaço. */
.pagina-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,4vh,40px)}
.pagina h1{margin:0;font-weight:200;font-size:clamp(30px,4.2vw,52px);line-height:1.08;
  letter-spacing:-.01em;text-wrap:balance}
/* A entrada é o resumo: maior do que o corpo e sem ser um título. É o parágrafo que diz
   tudo a quem só ler o primeiro. */
/* O afastamento ao título é generoso: com pouco, a entrada lia-se como uma segunda linha
   do título e não como o resumo que é.
   ARMADILHA, e mordeu duas vezes neste mesmo ficheiro: os parágrafos com classe própria
   (`.pagina-entrada`, `.pagina-fecho`) têm de ser escritos com o ELEMENTO à frente —
   `.pagina p.pagina-entrada`. Sem ele, a regra geral `.pagina p` é mais específica (uma
   classe MAIS um elemento, contra uma classe só) e ganha-lhes a margem e o corpo da
   letra: a margem que se pedia aqui saía a zero e a entrada ficava colada ao título. */
.pagina p.pagina-entrada{margin:clamp(28px,5vh,52px) 0 0;font-size:clamp(17px,1.5vw,21px);
  font-weight:300;line-height:1.6;opacity:.92;text-wrap:pretty}

/* Os intertítulos separam as três partes da declaração. Mais pequenos do que os títulos
   de secção da homepage: aqui competem com texto corrido, não com uma página inteira. */
.pagina h2{margin:clamp(38px,6vh,64px) 0 clamp(12px,2vh,20px);
  font-weight:300;font-size:clamp(20px,2vw,26px);line-height:1.2;letter-spacing:.01em}

.pagina p{margin:0 0 clamp(14px,2.2vh,22px);font-weight:300;
  font-size:clamp(15px,1.15vw,17px);line-height:1.75;opacity:.88;text-wrap:pretty}
/* A primeira frase de cada argumento, que no documento do cliente já era a ideia toda.
   Peso 500 e a cheio: é o que deixa a página ler-se de relance, saltando de afirmação em
   afirmação, sem perder o texto de quem o quiser todo. */
.pagina p strong{font-weight:500;opacity:1}
.pagina i{font-style:italic}
/* O "CO₂" da Declaração ESG: com a entrelinha do browser, um `sub` alargava a linha onde
   está e o parágrafo ficava com um degrau. A regra é a mesma das métricas da homepage. */
.pagina sub{font-size:.7em;line-height:0}

/* Contactos: rótulo curto e o dado a seguir, numa linha por cada. Não é uma tabela nem
   cartões — são quatro linhas. */
.pagina-contactos{list-style:none;margin:clamp(16px,2.6vh,26px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:clamp(10px,1.6vh,16px)}
.pagina-contactos li{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  padding-bottom:clamp(10px,1.6vh,16px);border-bottom:1px solid rgba(255,255,255,.14)}
.pagina-rotulo{flex:0 0 auto;min-width:9em;font-size:12px;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
/* Rótulos mais compridos (a identificação da empresa na Política de Privacidade,
   2026-10-07: "Registered office" não cabe em 9em, e o dado saía do alinhamento das
   outras linhas). As duas listas da página levam a mesma coluna, para os dados das duas
   começarem no mesmo sítio. */
.pagina-contactos--larga .pagina-rotulo{min-width:12.5em}
/* E o dado quebra DENTRO da sua coluna em vez de cair para debaixo do rótulo (o aparte do
   NIPC, a morada do escritório em inglês). No telemóvel a linha é uma coluna e isto não
   conta. */
.pagina-contactos--larga li{flex-wrap:nowrap}
/* Ao lado de um dado curto (o NIPC), quem cede é o aparte: com os dois a encolher por
   igual, o número partia-se em "508 487 / 390". Só em linha — no telemóvel, em coluna,
   uma base de 0 deixava-o sem altura. */
@media (min-width:561px){
  .pagina-contactos--larga .pagina-aparte{flex:1 1 0;min-width:0}
}
/* Um parágrafo a seguir a uma destas listas ficava colado ao fio da última linha. */
.pagina-contactos--larga + p{margin-top:clamp(18px,2.8vh,28px)}
.pagina-contactos li{font-weight:300}
/* As ligações têm o mesmo desenho na lista de contactos e no meio do texto (a Política de
   Privacidade, 2026-10-02, tem o email e a CNPD dentro de parágrafos): sem esta regra
   saíam com o azul do browser. */
.pagina-contactos a,.pagina p a,.pagina-lista a{color:inherit;font-weight:300;
  text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.4);transition:text-decoration-color .25s}
.pagina-contactos a:hover,.pagina p a:hover,.pagina-lista a:hover{
  text-decoration-color:currentColor}

/* Uma lista no meio do texto (a Política de Privacidade: os cookies e os direitos). Cada
   item é um parágrafo curto com o nome a negrito; o corpo da letra é o dos parágrafos. */
.pagina-lista{margin:0 0 clamp(14px,2.2vh,22px);padding-left:1.1em}
.pagina-lista li{margin-bottom:6px;font-weight:300;font-size:clamp(15px,1.15vw,17px);
  line-height:1.6;opacity:.88;text-wrap:pretty}
.pagina-lista li::marker{color:rgba(255,255,255,.4)}
.pagina-lista strong{font-weight:500}

/* Uma nota pequena no fim do texto (a data da última atualização da política). */
.pagina p.pagina-nota{margin-top:clamp(24px,4vh,40px);font-size:13px;opacity:.6}

/* O fecho é a frase que joga com o nome da marca ("no âmago das questões importantes").
   Fica isolada e maior — é o que o leitor leva daqui. */
/* `.pagina p.pagina-fecho` e não só `.pagina-fecho`: a regra do parágrafo (`.pagina p`)
   tem mais um elemento no seletor e ganhava-lhe o corpo da letra — o fecho saía do mesmo
   tamanho do texto corrido e perdia o destaque todo. */
/* Sem traço por cima e CENTRADA (2026-09-22, pedido do cliente): a lista de contactos
   acima já acaba num traço, e dois tão perto liam-se como uma moldura a meio da folha. O
   que separa o fecho do resto passa a ser só o espaço. */
.pagina p.pagina-fecho{margin-top:clamp(40px,7vh,72px);padding-top:clamp(24px,4vh,40px);
  text-align:center;
  font-size:clamp(18px,1.8vw,24px);font-weight:200;line-height:1.4;
  letter-spacing:.01em;opacity:1}

@media (max-width:560px){
  /* Em ecrã estreito o rótulo não cabe ao lado do dado: passa para cima dele. */
  .pagina-contactos li{flex-direction:column;gap:2px}
  .pagina-rotulo{min-width:0}
}


/* ---------- EXPERIÊNCIA: o texto como folhas de papel ----------
   2026-09-22, a pedido do cliente: o mesmo texto, mas em duas folhas A4 brancas pousadas
   sobre o verde, como um documento aberto dentro da página. Tudo o que é próprio desta
   experiência vive aqui em baixo e depende da classe `pagina--papel`, por isso voltar
   atrás é tirar essa classe do `<main>` (e desfazer a quebra em dois `<article>` no
   template). */

/* A pilha: as folhas uma sob a outra, com o vão que um leitor de PDF deixa entre páginas. */
.pagina--papel{padding-inline:clamp(12px,3vw,32px)}
.papel-pilha{display:flex;flex-direction:column;align-items:center;
  gap:clamp(20px,4vh,44px)}

/* A folha, com a proporção do A4.
   ARMADILHA que mordeu à primeira: estava escrito `min-height:calc(min(820px,100%)*1.414)`
   e o `100%` de uma ALTURA refere-se à altura do pai, não à largura — o pai tem altura
   automática, por isso aquilo resolvia a zero e as folhas ficavam com a altura do texto,
   cada uma com a sua. Com `aspect-ratio` a altura sai da LARGURA, que é o que se quer; e
   como o conteúdo pode empurrar, a proporção é um mínimo e não um corte.
   As margens interiores são as de um documento: ~2,5cm à escala da folha. */
.papel{position:relative;width:min(820px,100%);aspect-ratio:210/297;
  background:#fff;color:var(--fundo);
  padding:clamp(52px,9%,96px) clamp(40px,10%,104px) clamp(64px,11%,112px);
  box-shadow:0 2px 6px rgba(0,0,0,.18), 0 24px 60px rgba(0,0,0,.32);
  display:flex;flex-direction:column}

/* Cabeçalho e numeração: o que um documento impresso tem, e o que faz a folha ler-se
   como folha. `aria-hidden` nos dois — é cenário, e quem ouve a página não precisa de
   ouvir "1" ao fim de cada bloco. */
.papel-topo{display:flex;justify-content:space-between;gap:16px;
  margin-bottom:clamp(28px,5%,52px);padding-bottom:10px;
  border-bottom:1px solid rgba(var(--fundo-rgb),.16);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(var(--fundo-rgb),.5)}
/* ARMADILHA: aqui as medidas VERTICAIS têm de ser em pixels e não em percentagem. Um
   `gap` ou uma `height` em % resolvem contra a ALTURA do contentor, que neste flex é
   automática — e o pé, que devia ter meia centena de pixels, inchou para 608 e levou a
   folha de 1160 para 1697. (Nos paddings a percentagem é segura: essa conta-se sempre
   pela LARGURA.) */
/* O pé vive DENTRO da margem inferior da folha, como o rodapé de um documento
   impresso — e não a seguir ao texto. Estava no fluxo, empurrado por `margin-top:auto`,
   e acabava a 112px do fim (a margem inteira da folha), o que o deixava a meio do vazio.
   Absoluto, encosta ao fundo; o `padding-bottom` da folha garante que o texto nunca lhe
   chega lá. */
/* O logótipo ao CENTRO e o número no canto inferior direito, como num documento
   paginado. Os limites laterais são os mesmos do texto (o padding da folha), para o
   número alinhar com a margem e não com a borda do papel. */
.papel-pe{position:absolute;bottom:clamp(20px,3%,34px);
  left:clamp(40px,10%,104px);right:clamp(40px,10%,104px);
  display:flex;align-items:flex-end;justify-content:center;
  font-size:12px;color:rgba(var(--fundo-rgb),.45);
  font-variant-numeric:tabular-nums}
.papel-numero{position:absolute;right:0;bottom:4px}
/* O logótipo por baixo do número, pequeno e esbatido: é a assinatura do papel timbrado,
   não um segundo logótipo da página — por isso não compete com o do cabeçalho do site. */
.papel-marca{display:block;height:30px;width:auto;opacity:.45}

/* O texto dentro da folha: tinta escura sobre branco, e um corpo um pouco menor do que
   na página aberta — numa folha, a medida da linha é a da folha e não a do ecrã. */
.papel h1{font-size:clamp(26px,3.4vw,38px);margin:0 0 4px}
.papel h2{margin:clamp(26px,4%,40px) 0 clamp(8px,1.4%,14px);
  font-size:clamp(17px,1.7vw,21px);color:rgba(var(--fundo-rgb),.9)}
/* Uma folha que abre com um intertítulo (a segunda da Declaração ESG): o cabeçalho da
   folha já dá o espaço, e a margem do título somava-se-lhe. */
.papel-topo + h2{margin-top:0}
/* O entrelinhamento é o que faz o texto caber nas duas folhas sem sobrar folha. Está
   em 1,62 e é o número a mexer se o texto mudar: a 1,7 a primeira folha passava do A4. */
.papel p{font-size:clamp(13.5px,1.05vw,15px);line-height:1.62;
  margin-bottom:clamp(12px,1.6%,18px);opacity:.82}
.papel p strong{opacity:1}
.papel .pagina-entrada{font-size:clamp(15px,1.3vw,18px);opacity:.9;
  margin:clamp(18px,3%,30px) 0 0}
/* A entrada não tem margem em baixo: na declaração das redes sociais vem um intertítulo a
   seguir, que traz a dele. Na Declaração ESG vem um parágrafo, e ficava colado a ela. */
.papel .pagina-entrada + p{margin-top:clamp(14px,2.4%,22px)}
.papel .pagina-contactos li{border-bottom-color:rgba(var(--fundo-rgb),.16)}
.papel .pagina-rotulo{color:rgba(var(--fundo-rgb),.5)}
/* O custo da chamada a seguir ao telefone, na lista de contactos (DL 59/2021). O mesmo
   desenho serve um aparte curto a seguir a qualquer outro dado (`.pagina-aparte`: na
   Política de Privacidade, o NIPC que é também o número de matrícula, 2026-10-07). */
.pagina-chamada,.pagina-aparte{font-size:12px;color:rgba(255,255,255,.55)}
.papel .pagina-chamada,.papel .pagina-aparte{color:rgba(var(--fundo-rgb),.5)}
.papel .pagina-contactos a,.papel p a,.papel .pagina-lista a{
  text-decoration-color:rgba(var(--fundo-rgb),.38)}
.papel .pagina-lista li{font-size:clamp(13.5px,1.05vw,15px);line-height:1.62;opacity:.82}
.papel .pagina-lista li::marker{color:rgba(var(--fundo-rgb),.4)}
.papel .pagina-lista strong{opacity:1}
.papel p.pagina-nota{font-size:12px}
.papel p.pagina-fecho{font-size:clamp(16px,1.6vw,21px);opacity:1;
  margin-top:clamp(28px,5%,48px);padding-top:clamp(20px,3.5%,34px)}

/* ---------- O glossário (2026-10-06), dentro das folhas ----------
   Uma lista de consulta: cada termo com um fio fino por baixo, como as linhas da lista de
   contactos, e a explicação no corpo do texto da folha. O termo vai mais pesado (é por ele
   que o olho procura) e o "por extenso" ao lado, esbatido — se não couber, desce sozinho.
   As medidas VERTICAIS são em pixels e não em `vh`: é delas que a view tira a conta do
   que cabe em cada folha (`_folhas`), e com `vh` a conta mudava com a altura da janela.
   Quem mexer aqui mede outra vez essa conta. */
/* A frase por baixo do título é uma linha de apresentação, e não o resumo de um texto como
   nas declarações: mais pequena, esbatida e encostada ao título, como um subtítulo (pedido
   do cliente: "tem muito destaque"). Fica abaixo dos termos em peso e em tamanho, que são o
   que se procura na folha.
   ARMADILHA, a do topo do ficheiro outra vez: a `.papel .pagina-entrada` que devia pôr a
   entrada a 18px dentro das folhas PERDE para a `.pagina p.pagina-entrada` (que tem mais um
   elemento no seletor), e a frase saía com 21px. Aqui vai com o elemento e as duas classes.
   Nas declarações continua a mandar a regra geral — não se mexeu nelas. */
.papel p.pagina-entrada.glossario-entrada{margin:clamp(10px,1.6%,16px) 0 0;
  font-size:clamp(14.5px,1.15vw,16px);line-height:1.6;opacity:.68}
.glossario{margin:clamp(18px,3%,30px) 0 0}
/* Nas folhas seguintes a lista começa logo a seguir ao cabeçalho, que já traz o fio. */
.papel-topo + .glossario{margin-top:0}
/* O título de cada TEMA é o intertítulo das folhas (o `.papel h2` das declarações: o
   "Ambiente", o "Social"), com um fio por baixo que o separa dos termos. A lista a seguir
   dispensa a sua margem: o fio já faz de separador. */
.papel h2.glossario-tema{margin-bottom:0;padding-bottom:10px;
  border-bottom:1px solid rgba(var(--fundo-rgb),.3)}
.glossario-tema + .glossario{margin-top:0}
/* 13px e não 14 (2026-10-06): a conta das folhas (`TERMO_LINHAS`) conta com 14, e o pixel
   que falta é margem de segurança — ~12px por folha, para um browser que desenhe as letras
   um pouco maiores do que o Chrome em que a conta foi medida não passar do A4. */
.glossario-termo{padding:13px 0;border-bottom:1px solid rgba(var(--fundo-rgb),.14);
  /* A navbar é `sticky`: quem chega por um `#cde` aterrava com o termo debaixo dela. */
  scroll-margin-top:calc(var(--altura-nav) + 24px)}
.glossario-termo:last-child{border-bottom:0}
.glossario dt{margin:0 0 4px;font-size:clamp(16px,1.3vw,18px);font-weight:500;line-height:1.35}
.glossario-extenso{font-size:clamp(13px,1vw,14.5px);font-weight:300;
  color:rgba(var(--fundo-rgb),.6)}
.glossario dd{margin:0;font-weight:300;font-size:clamp(13.5px,1.05vw,15px);line-height:1.62;
  opacity:.82;text-wrap:pretty}
.glossario dd strong{font-weight:500}
.glossario dd sub{font-size:.7em;line-height:0}
/* O termo a que se chegou por uma ligação (`/glossario/#cde`): um fio no verde-água das
   malhas, à esquerda, para se saber qual é sem ter de o procurar. */
.glossario-termo:target{box-shadow:inset 3px 0 0 rgb(15,143,122);padding-left:14px}

@media (max-width:560px){
  /* Numa folha estreita as margens de documento comem metade da largura: encolhem. */
  /* A margem de BAIXO não encolhe com as outras (2026-10-02): num telemóvel a folha
     passa do A4 e o texto chega até ela, e com 40px o logótipo do pé (30px de altura,
     mais a distância ao fundo) ficava 12px por cima da última linha — nas duas
     declarações. O pé passa a uma distância fixa e a margem dá-lhe o lugar todo. */
  .papel{padding:clamp(28px,7%,48px) clamp(20px,6%,40px) 72px}
  .papel-pe{bottom:20px}
}