/* Âmago — página de Notícias e página de cada notícia (2026-09-28).
 *
 * Fundo BRANCO, pedido do cliente, com a referência de um jornal: a principal em grande,
 * duas ao lado, as outras em grelha, e a IMAGEM sempre por cima do título. O branco e a
 * navbar opaca vêm do `base.css` (`.pagina-clara`), partilhados com a página de Serviços.
 *
 * O que se afina está nas variáveis do topo. O que MEXE é do `arquivo.js` (a pesquisa,
 * o calendário das datas, "ver mais", a entrada dos cartões) e do `leitura.js` (a barra de leitura e o
 * botão de copiar a ligação); a entrada da cabeça e dos destaques é CSS, ao abrir a página.
 */

.pagina-clara{
  --tinta:var(--fundo);
  /* Texto secundário (datas, resumos). A 66% sobre branco dá 5,4:1 — passa os 4,5 que um
     texto pequeno pede. Não descer disto: a 50% ficava nos 3,3. */
  --tinta-2:rgba(2,36,37,.66);
  --fio:rgba(2,36,37,.12);
  /* O verde-água do site (o `--rede-pulso`, 15,143,122) só dá 4:1 sobre branco, pouco para
     as letras pequenas do tema. Este é o mesmo tom, mais escuro, a 5,3:1. */
  --acento:#0b7566;
  --placa:#e9efed;          /* o fundo de uma imagem que ainda não chegou */
  --raio:clamp(12px,1.1vw,16px);
  --lateral:clamp(16px,4vw,40px);
  --curva:cubic-bezier(.2,.7,.2,1);
}

/* A banda de todas as secções: os 1280px do resto do site, com a margem lateral. */
.jornal-cabeca,.destaques,.arquivo,.relacionadas-interior{
  width:min(1280px,calc(100% - 2 * var(--lateral)));margin-inline:auto}

/* `clip` e não `hidden`: corta o fundo da barra da pesquisa, que é esticado até às bordas
   da janela, sem fazer da página um contentor de scroll — com `hidden` a barra deixava de
   se prender ao topo. */
.jornal{overflow-x:clip;padding-bottom:clamp(80px,14vh,150px)}


/* ------------------------------------------------------------------------ a cabeça */
/* O título sozinho, com um fio a fechar: a cabeça de um jornal. Teve uma frase à direita
   do título e o cliente mandou-a tirar (2026-09-28). */
.jornal-cabeca{padding:clamp(20px,5vh,72px) 0 clamp(14px,2.6vh,30px);
  border-bottom:1px solid var(--fio)}
/* O corpo é o `--tipo-h1` da raiz, o mesmo do hero e da capa dos Serviços: o <h1> de uma
   página tem uma medida só no site todo. Numa janela BAIXA encolhe com a altura (6,5svh):
   é o primeiro ecrã que tem de caber, e cada pixel do título sai das imagens. */
.jornal-titulo{margin:0;font-size:min(var(--tipo-h1),6.5svh);font-weight:200;line-height:1;
  letter-spacing:.02em;text-transform:uppercase}


/* ----------------------------------------------------------------------- o cartão */
.nota{position:relative;display:flex;flex-direction:column;gap:clamp(12px,1.6vh,18px);
  min-width:0;margin:0}
/* ARMADILHA registada (2026-09-18): o `hidden` do HTML perde para qualquer `display`
   escrito por nós, e o `.nota` é flex. Sem esta linha apareciam as notícias todas. */
.nota[hidden]{display:none}

/* A caixa da imagem manda na forma; a imagem enche-a, cortada ao centro. Assim a forma é
   uma decisão do CSS (16:10 no arquivo, 16:9 no destaque, a que sobrar ao lado) e não da
   fotografia que calhou. */
.nota-img{position:relative;overflow:hidden;border-radius:var(--raio);
  aspect-ratio:16/10;background:var(--placa)}
.nota-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--curva)}
/* Os SELOS dos prémios não são fotografias: vão INTEIROS, sobre um claro, com ar à volta.
   Cortados a encher a caixa ficavam sem metade do texto que lhes dá o nome. */
.nota-img--selo{background:radial-gradient(120% 120% at 50% 40%,#fafcfb 0%,#e6eeeb 100%)}
.nota-img--selo img{object-fit:contain;padding:12% 16%}

/* O cartão inteiro abre a notícia: o link é o título e o `::after` dele estica-se por cima
   do cartão todo. */
.nota:hover .nota-img img{transform:scale(1.045)}

/* A seta ao canto da imagem, que chega com o rato. */
.nota-seta{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;background:#fff;color:var(--tinta);
  box-shadow:0 6px 18px rgba(2,36,37,.18);
  opacity:0;transform:translate(-6px,6px) scale(.9);
  transition:opacity .35s ease,transform .45s var(--curva)}
.nota-seta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.nota:hover .nota-seta{opacity:1;transform:none}

.nota-texto{display:flex;flex-direction:column;gap:clamp(8px,1.1vh,12px);min-width:0}
/* A data. Teve o TEMA à frente dela (PROJETOS, INOVAÇÃO…) e o cliente mandou tirá-lo dos
   cartões e do artigo (2026-09-28). Os temas continuam nos FILTROS do arquivo. */
.nota-meta{margin:0;font-size:13px;font-weight:300;letter-spacing:.02em;color:var(--tinta-2)}
.nota-titulo{margin:0;font-size:clamp(17px,1.3vw,20px);font-weight:400;line-height:1.3;
  text-wrap:pretty}
/* O sublinhado do título corre da esquerda para a direita com o rato em cima — linha a
   linha, porque o fundo de um elemento em linha é desenhado como se fosse uma linha só e
   depois partido. */
.nota-titulo a{color:inherit;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size .55s var(--curva)}
.nota-titulo a::after{content:"";position:absolute;inset:0;z-index:1}
.nota:hover .nota-titulo a,.nota-titulo a:focus-visible{background-size:100% 1px}
.nota-titulo a:focus-visible{outline:none}
.nota:has(.nota-titulo a:focus-visible){outline:2px solid var(--acento);outline-offset:8px;
  border-radius:var(--raio)}
.nota-resumo{margin:0;font-size:clamp(14px,1.05vw,15px);font-weight:300;line-height:1.6;
  color:var(--tinta-2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}


/* -------------------------------------------------------------------- os destaques */
/* O PRIMEIRO ECRÃ (pedido do cliente a 2026-09-28): a cabeça e os três destaques cabem
   JUNTOS entre a navbar e o fundo da janela, em qualquer tamanho dela.

   A conta não é feita à mão: o `.jornal-topo` mede um ecrã menos a navbar (é a primeira
   coisa da página, por isso o desconto é o certo — a regra de 2026-09-14), a cabeça fica
   com o que precisa e a linha `1fr` dá o resto aos destaques. Lá dentro, quem cede são as
   IMAGENS (`flex:1`): o texto fica com o que pede, e as fotografias crescem ou encolhem
   até tudo caber. Por isso a forma das imagens deixou de ser fixa (era 16:9) — num portátil
   ficam mais deitadas, num ecrã alto mais cheias. Cortam, nunca deformam.

   Duas saídas nas pontas:
   - quando a janela é tão baixa que nem as imagens no MÍNIMO cabem (um telemóvel deitado),
     o `1fr` é `minmax(auto,1fr)` e a secção CRESCE em vez de cortar texto — é o "tentar"
     caber, e não caber à força;
   - numa janela muito alta (2560x1440) o primeiro ecrã pára nos 1000px: aí a imagem
     grande já está em ~16:10 na banda de 1280px, e daí para cima ficava mais alta do que
     larga. O que sobra do ecrã mostra o princípio do arquivo. */
.jornal-topo{display:grid;grid-template-rows:auto 1fr;
  min-height:min(calc(100svh - var(--altura-nav)),1000px)}
.destaques{display:flex;flex-direction:column;
  padding:clamp(16px,3.4vh,44px) 0 clamp(16px,3.4vh,40px)}
/* A grande a dois terços, as outras duas a um terço, uma sobre a outra. A grelha estica
   pela altura que o `.jornal-topo` lhe deu, e a linha dela também (`align-content`
   normal estica as linhas `auto`). */
.destaques-grelha{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:clamp(20px,2.4vw,36px)}
.nota--grande .nota-img{flex:1 1 0;aspect-ratio:auto;min-height:clamp(120px,22vh,300px)}
.nota--grande .nota-titulo{font-size:clamp(22px,2.1vw,32px);font-weight:300;line-height:1.2;
  letter-spacing:-.005em}
.nota--grande .nota-resumo{font-size:clamp(15px,1.15vw,17px);-webkit-line-clamp:3;
  max-width:60ch}
.nota--grande .nota-seta{width:52px;height:52px;right:18px;bottom:18px}

/* A coluna da direita ESTICA até à altura da grande (é o `stretch` da grelha), e quem
   absorve a diferença são as IMAGENS das duas: crescem ou encolhem para as duas colunas
   acabarem juntas, em qualquer largura. O mínimo é o que ainda deixa ver o que lá está. */
.destaques-lado{display:flex;flex-direction:column;gap:clamp(20px,2.6vh,32px);min-height:0}
.nota--media{flex:1 1 0}
.nota--media .nota-img{flex:1 1 0;aspect-ratio:auto;min-height:clamp(80px,12vh,170px)}

/* Numa janela baixa o resumo da grande fica em duas linhas: cada linha que se lhe tira é
   imagem que se ganha. */
@media (max-height:820px){
  .nota--grande .nota-resumo{-webkit-line-clamp:2}
}

/* A entrada da cabeça e dos destaques, ao abrir a página: sobem um pouco e aparecem, em
   escada. É CSS e não o script, por isso não depende de ele chegar; e o preenchimento é
   `backwards` — só segura o estado de partida durante o atraso, e no fim larga tudo, para
   não ficar por cima do `transform` do rato. */
@media (prefers-reduced-motion:no-preference){
  .jornal-cabeca > *,.destaques-grelha > .nota,.destaques-lado > .nota{
    animation:jornal-subir .9s var(--curva) backwards}
  .destaques-grelha > .nota{animation-delay:.16s}
  .destaques-lado > .nota:nth-child(1){animation-delay:.26s}
  .destaques-lado > .nota:nth-child(2){animation-delay:.34s}
  .nota--grande .nota-img img{animation:jornal-assentar 1.8s var(--curva) .16s backwards}
}
@keyframes jornal-subir{from{opacity:0;transform:translateY(22px)}}
@keyframes jornal-assentar{from{transform:scale(1.08)}}


/* ---------------------------------------------------------------------- o arquivo */
.arquivo{margin-top:clamp(72px,12vh,128px);scroll-margin-top:var(--altura-nav)}
/* O desenho dos títulos de secção do site: `--tipo-titulo`, peso 200, em maiúsculas. */
.arquivo-titulo{margin:0 0 clamp(14px,2.2vh,22px);font-size:var(--tipo-titulo);font-weight:200;
  line-height:1.1;letter-spacing:.04em;text-transform:uppercase}

/* A BARRA da pesquisa e da data, presa ao topo por baixo da navbar enquanto se
   percorre a grelha. O fundo branco dela é esticado até às bordas da janela (o `::before`,
   com o excesso cortado pelo `overflow-x:clip` do `.jornal`), senão via-se a grelha a
   passar por baixo nas margens. O fio e a sombra só aparecem quando está PRESA (a classe
   `presa`, posta pelo script). */
.arquivo-barra{position:sticky;top:var(--altura-nav);z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:12px 24px;
  padding:12px 0}
.arquivo-barra::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;
  left:calc(50% - 50vw);right:calc(50% - 50vw);background:#fff;
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.arquivo-barra.presa::before{border-bottom-color:var(--fio);
  box-shadow:0 14px 26px -22px rgba(2,36,37,.55)}

/* A PESQUISA, à esquerda — no lugar que era do filtro por tema, que o cliente tirou a
   2026-09-28. O anel verde-água ao escrever é o mesmo tom dos pormenores da página. */
.pesquisa{position:relative;flex:1 1 auto;max-width:520px;min-width:0}
.pesquisa svg{position:absolute;left:17px;top:50%;width:18px;height:18px;
  transform:translateY(-50%);fill:none;stroke:var(--tinta-2);stroke-width:1.7;
  stroke-linecap:round;pointer-events:none}
.pesquisa-campo{width:100%;height:46px;padding:0 18px 0 46px;border:1px solid var(--fio);
  border-radius:999px;background:#fff;color:var(--tinta);font:inherit;font-size:15px;
  font-weight:300;transition:border-color .25s,box-shadow .25s}
.pesquisa-campo::placeholder{color:var(--tinta-2)}
.pesquisa-campo:focus{outline:none;border-color:var(--acento);
  box-shadow:0 0 0 4px rgba(11,117,102,.14)}

/* A DATA, à direita. Sem script é uma lista e um botão (`.datas-simples`); com ele, o
   calendário. As duas têm a forma dos campos da barra: pílulas de 46px. */
.datas{position:relative;flex:none;margin-left:auto}
.datas-simples{display:flex;gap:8px}
.datas-simples[hidden]{display:none}
.datas-lista{height:46px;padding:0 14px 0 18px;border:1px solid var(--fio);border-radius:999px;
  background:#fff;color:var(--tinta);font:inherit;font-size:15px;font-weight:300}
.datas-filtrar{height:46px;padding:0 22px;border:0;border-radius:999px;background:var(--fundo);
  color:#fff;font:inherit;font-size:15px;cursor:pointer}

/* O CALENDÁRIO. O botão diz a data escolhida; quando há uma, pinta-se a verde escuro — é
   o sinal de que a lista está filtrada, visto de longe. */
.calendario{position:relative}
.calendario[hidden],.calendario-painel[hidden],.calendario-folha[hidden]{display:none}
.calendario-botao{display:inline-flex;align-items:center;gap:10px;height:46px;
  padding:0 16px 0 18px;border:1px solid var(--fio);border-radius:999px;background:#fff;
  color:var(--tinta);font:inherit;font-size:15px;font-weight:300;white-space:nowrap;
  cursor:pointer;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.calendario-botao svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.calendario-botao .calendario-abre{width:16px;height:16px;transition:transform .3s var(--curva)}
.calendario-botao:hover{border-color:rgba(2,36,37,.35)}
.calendario-botao[aria-expanded=true]{border-color:var(--acento);
  box-shadow:0 0 0 4px rgba(11,117,102,.14)}
.calendario-botao[aria-expanded=true] .calendario-abre{transform:rotate(180deg)}
.calendario-botao:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.calendario.escolhido .calendario-botao{background:var(--fundo);border-color:var(--fundo);
  color:#fff}

/* O PAINEL: um ano de cada vez, "Todo o ano" por cima e os doze meses em 4x3. Abre por
   baixo do botão, encostado à direita, e chega com um pequeno deslize. */
.calendario-painel{position:absolute;right:0;top:calc(100% + 10px);z-index:20;width:316px;
  padding:16px;border:1px solid var(--fio);border-radius:18px;background:#fff;
  box-shadow:0 26px 50px -18px rgba(2,36,37,.32);transform-origin:top right;outline:none}
.calendario-painel.a-abrir{animation:calendario-abrir .24s var(--curva)}
@keyframes calendario-abrir{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.calendario-cabeca{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px}
.calendario-ano{font-size:20px;font-weight:300;letter-spacing:.04em}
.calendario-seta{display:grid;place-items:center;width:36px;height:36px;padding:0;
  border:1px solid var(--fio);border-radius:50%;background:#fff;color:var(--tinta);cursor:pointer;
  transition:border-color .2s,background .2s}
.calendario-seta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.calendario-seta:hover:not(:disabled){border-color:var(--acento);color:var(--acento)}
.calendario-seta:disabled{opacity:.3;cursor:default}

.calendario-todo{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  height:40px;margin-bottom:8px;border:1px solid var(--fio);border-radius:999px;background:#fff;
  color:var(--tinta);font:inherit;font-size:14px;font-weight:400;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.calendario-todo:hover{border-color:var(--acento)}
.calendario-meses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.calendario-mes{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;height:54px;padding:0;border:0;border-radius:12px;background:#f1f5f4;
  color:var(--tinta);font:inherit;cursor:pointer;transition:background .2s,color .2s}
.calendario-mes-nome{font-size:14px;font-weight:400}
/* Quantas notícias tem o mês: pequeno, em verde-água, por baixo do nome. */
.calendario-n{min-height:13px;font-size:11px;font-weight:400;line-height:1.2;color:var(--acento)}
.calendario-mes:hover:not(:disabled){background:#e0ebe8}
/* Um mês sem notícias fica apagado e não se escolhe — mas fica, para o ano ter sempre a
   mesma forma. */
.calendario-mes:disabled{background:transparent;color:rgba(2,36,37,.28);cursor:default}
.calendario-mes[aria-pressed=true],.calendario-todo[aria-pressed=true]{background:var(--fundo);
  border-color:var(--fundo);color:#fff}
.calendario-mes[aria-pressed=true] .calendario-n,
.calendario-todo[aria-pressed=true] .calendario-n{color:rgba(255,255,255,.7)}
.calendario-mes:focus-visible,.calendario-todo:focus-visible,.calendario-seta:focus-visible,
.calendario-limpar:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.calendario-limpar{display:block;width:100%;margin-top:10px;padding:6px;border:0;background:none;
  color:var(--acento);font:inherit;font-size:14px;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}

/* O ESTADO ("2 notícias em setembro de 2026"). Guarda sempre a altura de uma linha, mesmo vazio:
   senão a grelha saltava para baixo a cada filtro. */
.arquivo-estado{display:flex;align-items:center;gap:14px;min-height:26px;
  margin:10px 0 clamp(20px,3vh,32px);font-size:14px;font-weight:300;color:var(--tinta-2)}
.arquivo-estado p{margin:0}
.arquivo-limpar{color:var(--acento);font-size:14px;font-weight:400;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.arquivo-limpar[hidden]{display:none}

/* A GRELHA. `position:relative` porque os cartões que SAEM num filtro passam a absolutos,
   no sítio onde estavam, enquanto se desvanecem — ver o `arquivo.js`. */
.arquivo-grelha{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(40px,6vh,64px) clamp(20px,2.4vw,36px)}
/* À espera de entrar no ecrã. Só o script põe esta classe, e só nos que estão abaixo da
   dobra quando a página abre — os que já se veem não piscam. */
.nota.por-aparecer{opacity:0}

.arquivo-vazio{padding:clamp(24px,6vh,64px) 0;text-align:center;font-size:17px;font-weight:300}
.arquivo-vazio p{margin:0 0 10px}
.arquivo-vazio[hidden]{display:none}

.arquivo-mais{display:flex;justify-content:center;margin-top:clamp(48px,8vh,80px)}
.arquivo-mais-botao{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 28px;
  border:1px solid rgba(2,36,37,.25);border-radius:999px;background:#fff;color:var(--tinta);
  font:inherit;font-size:15px;font-weight:400;letter-spacing:.02em;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s}
.arquivo-mais-botao svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;transition:transform .45s var(--curva)}
.arquivo-mais-botao:hover{background:var(--fundo);border-color:var(--fundo);color:#fff}
.arquivo-mais-botao:hover svg{transform:rotate(90deg)}
.arquivo-mais-botao:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.arquivo-mais-botao[hidden]{display:none}


/* ---------------------------------------------------------------------- um artigo */
/* A barra da leitura: fina, colada por baixo da navbar, a encher-se da esquerda. */
.leitura-barra{position:fixed;left:0;right:0;top:var(--altura-nav);z-index:899;height:3px;
  background:var(--acento);transform:scaleX(0);transform-origin:0 50%}

.artigo{width:min(1100px,calc(100% - 2 * var(--lateral)));margin:0 auto;
  padding:clamp(24px,4vh,44px) 0 clamp(64px,11vh,110px)}
.artigo-volta{display:inline-flex;align-items:center;gap:8px;margin-bottom:clamp(18px,3vh,28px);
  color:var(--tinta-2);text-decoration:none;font-size:14px;letter-spacing:.02em;
  transition:color .25s}
.artigo-volta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--curva)}
.artigo-volta:hover{color:var(--tinta)}
.artigo-volta:hover svg{transform:translateX(-4px)}

/* A imagem abre o artigo, como abre o cartão. 16:9 com teto de altura, pela mesma razão
   do destaque: numa janela baixa empurrava o título para fora do ecrã. */
.artigo-foto{position:relative;margin:0;overflow:hidden;border-radius:var(--raio);
  aspect-ratio:16/9;max-height:62svh;background:var(--placa)}
.artigo-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.artigo-foto--selo{background:radial-gradient(120% 120% at 50% 40%,#fafcfb 0%,#e6eeeb 100%)}
.artigo-foto--selo img{object-fit:contain;padding:12% 20%}
@media (prefers-reduced-motion:no-preference){
  .artigo-foto img{animation:jornal-assentar 1.8s var(--curva) backwards}
  .artigo-cabeca,.artigo-corpo{animation:jornal-subir .9s var(--curva) .12s backwards}
}

/* O texto numa coluna de leitura, ~68 caracteres, como as páginas de texto do site. */
.artigo-cabeca,.artigo-corpo,.artigo-partilha{max-width:68ch;margin-inline:auto}
.artigo-cabeca{padding-top:clamp(28px,5vh,52px)}
.artigo-titulo{margin:clamp(12px,1.8vh,18px) 0 0;font-size:clamp(28px,3.3vw,46px);
  font-weight:300;line-height:1.14;letter-spacing:-.005em;text-wrap:balance}
.artigo-entrada{margin:clamp(18px,3vh,28px) 0 0;font-size:clamp(18px,1.5vw,21px);
  font-weight:300;line-height:1.6;text-wrap:pretty}
.artigo-corpo{margin-top:clamp(24px,4vh,40px);padding-top:clamp(24px,4vh,40px);
  border-top:1px solid var(--fio)}
.artigo-corpo p{margin:0 0 1.15em;font-size:clamp(16px,1.2vw,18px);font-weight:300;
  line-height:1.8;color:rgba(2,36,37,.86);text-wrap:pretty}
/* A capitular: a primeira letra grande, fina e em verde-água. É o que diz, de relance,
   que ali começa o texto. */
.artigo-corpo p:first-child::first-letter{float:left;margin:.08em .12em 0 0;
  font-size:3.3em;font-weight:200;line-height:.82;color:var(--acento)}
/* O corpo vem do editor do backoffice (2026-09-29) e pode trazer mais do que parágrafos:
   títulos de secção, listas, citações e ligações. As regras seguem as do parágrafo. */
.artigo-corpo h2,.artigo-corpo h3{margin:1.4em 0 .5em;font-weight:500;line-height:1.25;color:var(--fundo)}
.artigo-corpo h2{font-size:clamp(20px,1.6vw,24px)}
.artigo-corpo h3{font-size:clamp(17px,1.3vw,20px)}
.artigo-corpo ul,.artigo-corpo ol{margin:0 0 1.15em;padding-left:1.4em;font-size:clamp(16px,1.2vw,18px);font-weight:300;line-height:1.7}
.artigo-corpo li{margin-bottom:.35em}
.artigo-corpo blockquote{margin:1.2em 0;padding:.2em 0 .2em 1.1em;border-left:2px solid var(--agua-texto,#0a6b5c);
  font-size:clamp(16px,1.2vw,18px);font-weight:300;line-height:1.7;color:rgba(2,36,37,.72)}
.artigo-corpo blockquote p{margin:0}
.artigo-corpo a{color:var(--agua-texto,#0a6b5c);text-underline-offset:3px}
.artigo-corpo strong{font-weight:500}
.artigo-corpo table{display:block;width:100%;margin:1.5em 0;overflow-x:auto;border-collapse:collapse;font-size:clamp(14px,1.05vw,16px)}
.artigo-corpo th,.artigo-corpo td{min-width:110px;padding:10px 12px;border:1px solid rgba(2,36,37,.2);text-align:left;vertical-align:top}
.artigo-corpo th{background:#e9f1ef;font-weight:500;color:var(--fundo)}
.artigo-corpo caption{margin-bottom:8px;color:var(--tinta-2);font-size:14px;text-align:left}
.artigo-corpo .grafico-barras,.artigo-corpo .grafico-visual{margin:1.8em 0;padding:clamp(14px,2vw,22px);border:1px solid rgba(2,36,37,.14);border-radius:var(--raio);background:#f7faf9}
.artigo-corpo .grafico-barras figcaption,.artigo-corpo .grafico-visual figcaption{margin-bottom:12px;font-size:clamp(17px,1.3vw,20px);font-weight:500;color:var(--fundo)}
.artigo-corpo .grafico-barras table,.artigo-corpo .grafico-visual table{display:table;margin:8px 0 0;overflow:visible;font-size:14px}
.artigo-corpo .grafico-barras th,.artigo-corpo .grafico-barras td,.artigo-corpo .grafico-visual th,.artigo-corpo .grafico-visual td{min-width:0;padding:8px;border:0;border-bottom:1px solid rgba(2,36,37,.09);background:transparent}
.artigo-corpo .grafico-barras th,.artigo-corpo .grafico-visual th{font-weight:400;text-align:left}
.artigo-corpo .grafico-barras td:last-child,.artigo-corpo .grafico-visual td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.artigo-corpo .grafico-barras meter{width:100%;height:20px;accent-color:var(--agua-texto,#0a6b5c)}
.artigo-corpo .grafico-desenho{display:block;width:100%;height:auto;max-height:430px}
.artigo-corpo .grafico-desenho text{font:12px Jost,sans-serif}
.artigo-corpo .grafico-dados{margin-top:8px}
.artigo-corpo .grafico-dados summary{cursor:pointer;color:var(--agua-texto,#0a6b5c);font-size:14px;font-weight:500}
.artigo-corpo .bloco-kpi{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:1.8em 0;padding:clamp(18px,3vw,28px);border-left:4px solid var(--agua-texto,#0a6b5c);border-radius:var(--raio);background:#e9f3f0}
.artigo-corpo .bloco-kpi strong{font-size:clamp(30px,4vw,46px);font-weight:400;line-height:1;color:var(--fundo)}
.artigo-corpo .bloco-kpi span{font-size:15px;color:var(--tinta-2)}
/* Uma imagem no meio do texto (2026-09-30). A largura máxima é a do TEXTO, e não é um
   número novo: a imagem vive dentro do `.artigo-corpo`, que já é a coluna de 68ch. É
   `max-width` e não `width` porque uma imagem mais pequena do que a coluna não se estica
   — esticar não acrescenta detalhe, é a regra da casa desde as fotografias dos projetos.
   O `height:auto` é obrigatório: o `<img>` traz `width`/`height` em atributo (para
   reservar o espaço) e sem ele a proporção partia-se assim que a coluna estreitasse. */
.artigo-corpo{--vao-imagem:clamp(28px,4.5vh,46px)}
.artigo-corpo img{display:block;max-width:100%;height:auto;border-radius:var(--raio);
  margin:var(--vao-imagem) auto}
/* A LEGENDA (2026-09-30): um parágrafo marcado, que o editor põe a seguir à imagem. É
   opcional — quem escreve deixa a pergunta em branco e não há legenda nenhuma. Encosta-se
   à imagem por uma margem NEGATIVA: o vão por baixo da imagem é grande (é o que separa a
   imagem do texto que vem depois) e a legenda pertence à imagem, não ao texto. */
.artigo-corpo .legenda{font-size:clamp(13px,1vw,15px);font-weight:300;line-height:1.5;
  color:rgba(2,36,37,.62);text-wrap:pretty}
/* Só quando ela vem mesmo A SEGUIR a uma imagem é que sobe para junto dela. A margem
   negativa tem de estar presa a este caso: numa linha marcada como legenda no meio do
   texto, ela puxava o parágrafo de cima para cima de si. E o vão de baixo volta a ser o
   da imagem, para o par imagem+legenda se ler como um bloco só. */
.artigo-corpo p:has(img) + .legenda{margin-top:calc(10px - var(--vao-imagem));
  margin-bottom:var(--vao-imagem)}
/* O editor embrulha a imagem num <p>: se ela for o primeiro bloco, o parágrafo fica sem
   primeira letra e a capitular desaparecia em silêncio. Passa para o primeiro com texto. */
.artigo-corpo p:first-child:has(img){text-indent:0}
.artigo-corpo p:first-child:has(img) + p::first-letter{float:left;margin:.08em .12em 0 0;
  font-size:3.3em;font-weight:200;line-height:.82;color:var(--acento)}


.artigo-partilha{display:flex;align-items:center;gap:10px;margin-top:clamp(28px,5vh,48px);
  padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--fio)}
.artigo-partilha-rotulo{margin-right:6px;font-size:12px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-2)}
.partilha-botao{display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid rgba(2,36,37,.2);border-radius:50%;background:#fff;color:var(--tinta);
  cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.partilha-botao svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.partilha-botao:hover,.partilha-botao.copiado{background:var(--fundo);border-color:var(--fundo);
  color:#fff}
.partilha-botao:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.partilha-botao[hidden]{display:none}
.partilha-aviso{font-size:14px;font-weight:300;color:var(--acento)}

/* "Mais notícias", numa faixa à parte, num verde quase branco: separa o que se acabou de
   ler do que vem a seguir sem um fio nem um título a mais. */
.relacionadas{padding:clamp(56px,10vh,100px) 0 clamp(64px,11vh,110px);background:#f3f7f5}
.relacionadas-grelha{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(32px,5vh,48px) clamp(20px,2.4vw,36px)}
.relacionadas .nota-img{background:#e3ebe8}


/* ------------------------------------------------------------ ecrãs mais estreitos */
@media (max-width:1000px){
  .arquivo-grelha,.relacionadas-grelha{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* A três por linha já não cabem; a terceira do fim do artigo ficava sozinha. */
  .relacionadas-grelha > .nota:nth-child(3){display:none}
}

@media (max-width:900px){
  /* A grande passa a ocupar a largura toda e as duas vão lado a lado por baixo dela. O
     primeiro ecrã continua a caber: a altura reparte-se pelas duas linhas (1,7 para a
     grande, 1 para as duas), e em cada uma são outra vez as imagens que cedem. */
  .destaques-grelha{grid-template-columns:1fr;grid-template-rows:1.7fr 1fr}
  .destaques-lado{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(20px,2.4vw,36px)}
}

/* Num ecrã estreito a barra deixa de se prender: são duas linhas (a pesquisa e a data)
   e presas comiam um quarto do ecrã a quem está a ler. A data ocupa a largura toda, e o
   calendário também. */
@media (max-width:720px){
  .arquivo-barra{position:static;flex-direction:column;align-items:stretch;padding:0}
  .arquivo-barra::before{display:none}
  .pesquisa{flex:none;max-width:none}
  .datas{margin-left:0}
  .datas-lista{flex:1;min-width:0}
  .calendario-botao{width:100%}
  .calendario-botao [data-calendario-rotulo]{flex:1;text-align:left}
  .calendario-painel{left:0;right:0;width:auto;transform-origin:top center}
}

@media (max-width:600px){
  .arquivo-grelha{grid-template-columns:1fr}
  /* Num telemóvel as duas de baixo continuam lado a lado — em coluna, as três não cabiam
     num ecrã. Para caberem, a grande perde o resumo e as pequenas ficam com o título em
     15px e no máximo três linhas. */
  .nota--grande .nota-resumo{display:none}
  .nota--media .nota-titulo{font-size:15px;display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:3;overflow:hidden}
  .destaques-lado{gap:14px}
  .relacionadas-grelha{grid-template-columns:1fr}
  .relacionadas-grelha > .nota:nth-child(3){display:flex}
  /* Uma palavra só, sozinha no topo de um telemóvel: com os 26px do chão do `--tipo-h1`
     lia-se como um título de secção. O mesmo chão da capa dos Serviços. */
  .jornal-titulo{font-size:clamp(34px,9vw,44px)}
  .nota-seta{display:none}
}

@media (prefers-reduced-motion:reduce){
  .nota-img img,.nota-seta,.nota-titulo a{transition:none}
  .calendario-painel.a-abrir{animation:none}
  .nota:hover .nota-img img{transform:none}
}