/* Âmago — páginas de texto corrido.
 *
 * A primeira é a declaração sobre redes sociais (2026-09-22); as que vierem — Política de
 * Privacidade, Declaração ESG — usam estas mesmas regras, por isso os nomes são genéricos
 * (`.pagina-*`) e não da declaração.
 *
 * 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}

/* 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)}
.pagina-contactos 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{text-decoration-color:currentColor}

/* 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)}
/* 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}
.papel .pagina-contactos li{border-bottom-color:rgba(var(--fundo-rgb),.16)}
.papel .pagina-rotulo{color:rgba(var(--fundo-rgb),.5)}
.papel .pagina-contactos a{text-decoration-color:rgba(var(--fundo-rgb),.38)}
.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)}

@media (max-width:560px){
  /* Numa folha estreita as margens de documento comem metade da largura: encolhem. */
  .papel{padding:clamp(28px,7%,48px) clamp(20px,6%,40px) clamp(40px,8%,56px)}
}