/* ==========================================================================
   #PortugalMediaLab — tema Ágora
   Portado de Design/homepage-template-agora-final.html e dos ficheiros
   irmãos da lista de notícias e do detalhe.

   Carrega em TODO o site, pela masterPage e sempre depois do main.css, que
   continua a servir de base (estrutura, formulários, carrossel). Esta folha
   redefine os tokens e o que difere; o que aqui não estiver cai no main.css,
   por isso a ordem dos dois <link> não é negociável.

   Trabalha sobre a marcação que já existe: não se alteraram as componentes,
   porque vários destes partials são partilhados entre tipos de página.

   Tokens confirmados nos componentes reais do Ágora (ver a nota no topo do
   ficheiro de design). O anel de foco vai POR FORA do controlo: o React do
   Ágora desenha-o por dentro e, sobre um botão sólido primary-600, o
   magenta fica a 2,11:1 e reprova o critério 1.4.11 da WCAG, que exige 3:1.
   ========================================================================== */

:root {
    --color-white: #FFFFFF;
    --color-neutral-50: #F7F8FA;
    --color-neutral-100: #F1F3F8;
    --color-neutral-200: #E1E4EA;
    --color-neutral-300: #CDD2DC;
    --color-neutral-400: #BAC0CC;
    --color-neutral-600: #8893AA;
    --color-neutral-700: #64718B;
    --color-neutral-800: #475164;
    --color-neutral-900: #2B363C;
    --color-primary-100: #F2F6FF;
    --color-primary-200: #E5EEFF;
    --color-primary-300: #BBD1FD;
    --color-primary-400: #5F93FC;
    --color-primary-600: #034AD8;
    --color-primary-900: #021C51;

    /* --- Cores da marca ---------------------------------------------
       Substituem o azul do Ágora. O accent manda: o accent-strong é
       derivado dele e não o primary-900 do Ágora, senão as faixas escuras
       e os títulos ficavam num azul de família diferente do das ligações.

         --accent        #070078   16,40:1 sobre branco
         --accent-strong #04004A   19,02:1 — faixas escuras, títulos, hover
         --accent-light  #05C4AF    8,62:1 sobre o accent-strong

       O accent-light NÃO serve para texto sobre branco: dá 2,21:1 e
       reprova tudo. É a cor de realce sobre fundo escuro, e é aí — e só
       aí — que aparece.                                                  */
    --accent:        #070078;
    --accent-strong: #04004A;
    --accent-light:  #05C4AF;
    --accent-tint:   var(--color-primary-200);

    /* Os papéis do Ágora por cima dos nomes que o main.css já usa: assim o
       cabeçalho e o rodapé mudam de paleta sem duplicar seletores. */
    --navy:      var(--accent-strong);
    --navy-dark: var(--accent-strong);
    --navy-deep: var(--accent-strong);
    --teal:      var(--accent-light);
    /* O antigo "teal para texto" tem de ser escuro: sobre branco o
       #05C4AF não passa. Passa a ser o próprio accent. */
    --teal-text: var(--accent);
    --page:      var(--color-white);
    --tint:      var(--color-neutral-100);
    --band:      var(--color-neutral-100);
    --line:      var(--color-neutral-300);
    --ink:       var(--color-neutral-900);
    --ink-soft:  var(--color-neutral-800);
    --ink-muted: var(--color-neutral-700);
    --lav:       var(--color-primary-300);
    --focus:     #F408FC;

    --font-display: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "Noto Sans", system-ui, sans-serif;

    --radius: 4px;
    --control: 60px;
    --container: 1280px;
    --gutter: 24px;
    --section-y: 72px;
    --pad: 24px;
}

/* ==========================================================================
   Base
   ========================================================================== */
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--ink); background: var(--page); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--accent-strong); margin: 0; }
h1 { font-size: 2.5rem; line-height: 1.5; font-weight: 700; }   /* 40px é o maior do Ágora */
h2 { font-size: 2rem;   line-height: 1.5; font-weight: 700; }
h3 { font-size: 1.5rem; line-height: 1.5; font-weight: 600; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* O contentor é uma regra, não um elemento: as faixas ficam de bordo a
   bordo e o conteúdo centra-se em 1280px. Evita acrescentar
   <div class="container"> a partials que também servem outras páginas. */
.masthead-top,
.footer-main,
.footer-legal { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* A navegação alinha à esquerda com o logótipo mas NÃO fecha nos 1280px:
   os itens empacotam-se à esquerda, por isso o espaço extra à direita não
   se vê, e é ele que evita a segunda fila quando os rótulos crescem ou se
   acrescenta uma entrada ao menu. */
.mainnav {
    /* + --gutter: o .masthead-top tem enchimento próprio por dentro do
       contentor, e sem o somar o menu ficava 24px à esquerda do logótipo. */
    padding-left: calc(max(var(--gutter), calc((100% - var(--container)) / 2)) + var(--gutter));
    padding-right: var(--gutter);
}

/* A .gov-bar é ela própria a faixa azul, por isso centra-se por padding:
   com max-width encolhia o fundo em vez de só o conteúdo. */
.gov-bar { padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); }

/* Faixas da homepage. Presas ao .doc-homepage: a classe .section também
   é usada pela página de cancelamento da newsletter, e sem isto ganhava
   ali um fundo e filetes que não fazem sentido nenhum. */
.doc-homepage .section,
.doc-homepage .news,
.doc-homepage .docs { padding-block: var(--section-y); padding-inline: 0; }
.doc-homepage .section > *,
.doc-homepage .news > *,
.doc-homepage .docs > * { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Alternância de faixas do template: Destaques e Documentos com fundo,
   Notícias sobre branco. */
.doc-homepage .section { background: var(--band); border-block: 2px solid var(--line); }
.doc-homepage .news { background: var(--page); }
.doc-homepage .docs { background: var(--band); border-block: 2px solid var(--line); }

/* ==========================================================================
   Botões
   60x60 mínimos, enchimento 16px, raio 4px, contorno de 2px transparente
   nos sólidos para o botão não mudar de tamanho entre variantes.
   ========================================================================== */
.btn-tpl {
    min-height: var(--control);
    min-width: var(--control);
    padding: 16px;
    gap: 8px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 400;
}
/* O Ágora tem duas variantes de botão: sólida e de contorno. As classes
   deste projeto vêm da linha PML e são quatro (navy, teal, outline e
   outline-light), o que dava quatro aspetos diferentes na mesma página.
   Aqui as duas sólidas convergem e as duas de contorno também.

   O btn-tpl-outline-light era o caso sério: texto e contorno brancos,
   herdados de quando o banner era navy. Com o herói sobre branco, o
   "Todos os destaques" ficava branco sobre branco — invisível. */
/* Sólido: accent cheio, com o contorno da mesma cor. Hover escurece para
   o accent-strong, contorno incluído. */
.btn-tpl-navy,
.btn-tpl-teal {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--color-white);
}
.btn-tpl-navy:hover,
.btn-tpl-teal:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--color-white);
}

/* Contorno: as mesmas cores, com o fundo a entrar só no hover. */
.btn-tpl-outline,
.btn-tpl-outline-light {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}
.btn-tpl-outline:hover,
.btn-tpl-outline-light:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--color-white);
}
.btn-tpl-sm { min-height: 44px; padding: 8px 16px; }

/* Dentro da faixa escura as variantes invertem-se: sobre primary-900 o
   Ágora usa o sólido primary-400 com texto primary-900 (5,49:1) e o
   contorno em neutral-50. Mais específico, por isso ganha às regras acima. */
.foco .btn-tpl-teal { background: var(--accent-light); color: var(--accent-strong); font-weight: 600; border-color: transparent; }
.foco .btn-tpl-teal:hover { background: var(--accent-tint); color: var(--accent-strong); }
.foco .btn-tpl-outline-light { border-color: var(--color-neutral-50); color: var(--color-neutral-50); }
.foco .btn-tpl-outline-light:hover { background: var(--color-neutral-50); color: var(--accent-strong); }

.kicker {
    font-family: var(--font-body);
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--accent);
}

/* ==========================================================================
   Barra do Estado
   ========================================================================== */
.gov-bar { background: var(--accent-strong); color: var(--color-white); min-height: 56px; padding-block: 4px; }
.gov-bar-id { gap: 16px; font-size: .875rem; line-height: 1.5rem; }
.gov-bar-id .sep { color: var(--color-primary-300); opacity: 1; }
.gov-bar-id .sub { color: var(--color-primary-200); opacity: 1; }
.gov-bar-right { gap: 8px; }
/* Sublinhado permanente: sobre cor sólida a ligação não se distingue do
   texto corrido só pela cor (WCAG 1.4.1). */
.gov-bar-right > a {
    min-height: 44px;
    padding: 4px 8px;
    border-radius: var(--radius);
    font-size: .875rem;
    line-height: 1.5rem;
    text-decoration: underline;
}
.gov-bar-right > a:hover { background: rgba(255, 255, 255, .14); color: var(--color-white); }

.gov-social { gap: 4px; }
.gov-social a { width: 44px; height: 44px; border: 0; border-radius: var(--radius); }
.gov-social a:hover { background: rgba(255, 255, 255, .14); border-color: transparent; }
.gov-social img { width: 20px; height: 20px; }

.gov-lang { gap: 4px; }
.gov-lang a {
    min-height: 44px;
    padding: 4px 12px;
    border-radius: var(--radius);
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 400;
    text-decoration: underline;
}
.gov-lang a:hover { background: rgba(255, 255, 255, .14); }
/* Estado por fundo E peso, não só por cor */
.gov-lang a[aria-current="true"] { background: var(--accent-light); color: var(--accent-strong); font-weight: 600; text-decoration: none; }

/* ==========================================================================
   Cabeçalho
   ========================================================================== */
.masthead { background: var(--page); border-bottom: 2px solid var(--line); }
.masthead-top { gap: 32px; padding-block: 20px; }
.brand img { height: 56px; }
.masthead-actions { gap: 16px; margin-left: auto; }

/* Campo de pesquisa: contorno de 2px em neutral-700 (4,91:1, acima dos 3:1
   que a WCAG 1.4.11 exige para fronteiras de controlos).

   A altura é a mesma receita do botão "Área reservada" (.btn-tpl-sm):
   min-height 44px + 8px de padding vertical + a linha de 28px = 47,2px com
   os 2px de contorno. Fica abaixo dos 60px de --control que o Ágora pede
   para controlos, mas alinhado com o botão ao lado — e acima dos 44px que
   a WCAG 2.5.5 exige. */
.search-box {
    width: 320px;
    min-height: 44px;
    gap: 12px;
    padding: 8px 16px;
    border: 2px solid var(--color-neutral-700);
    border-radius: var(--radius);
    background: var(--page);
}
.search-box svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; }
.search-box .search-box-text { font-size: 1rem; line-height: 1.75rem; color: var(--color-neutral-700); }

/* --- Navegação: padrão disclosure, não role="menubar" ---

   Os rótulos reais são bem maiores que os do template ("Plano de Ação para
   a Comunicação Social", "Direitos Humanos e Literacia Mediática"): a 16px
   com 12px de enchimento a barra pedia 1440px e só tinha 1232, passando a
   duas filas. Aqui usa-se o token "s" do Ágora (14/24), enchimento de 10px
   e sem intervalo entre itens, o que a faz caber numa fila.

   O white-space garante que nenhum rótulo parte a meio; o flex-wrap fica
   como estava, para que um item novo empurre para baixo em vez de sair
   cortado do ecrã. */
.mainnav { padding-block: 0; }
.nav-l1 { gap: 0; }
.nav-link {
    min-height: 56px;
    padding: 16px 10px 12px;
    border-bottom: 4px solid transparent;
    font-size: .875rem;
    line-height: 1.5rem;
    white-space: nowrap;
    color: var(--ink);
}
.nav-link:hover { border-bottom-color: var(--color-neutral-400); color: var(--accent-strong); }
.nav-link[aria-current="page"],
.nav-link.is-active { color: var(--accent-strong); font-weight: 600; border-bottom-color: var(--accent); }
.nav-toggle { min-width: 32px; min-height: 56px; padding: 0 4px 4px; border-bottom: 4px solid transparent; color: var(--ink); }
.nav-toggle:hover { border-bottom-color: var(--color-neutral-400); }
.nav-panel { padding: 8px 0; border: 2px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.nav-panel a { min-height: 44px; padding: 8px 16px; font-size: 1rem; color: var(--ink); }
.nav-panel a:hover { background: var(--color-primary-100); color: var(--accent-strong); }
.nav-sub { border-left: 4px solid var(--accent); }
.nav-sub a { color: var(--ink-soft); }
.nav-toggle-sub { min-height: 44px; color: var(--ink); }

/* ==========================================================================
   Herói — o carrossel do Umbraco com a forma do herói do template:
   texto à esquerda sobre branco, imagem à direita com friso azul.
   ========================================================================== */
.banner-tpl { background: var(--page); color: var(--ink); }
/* Centrado por padding e NÃO por max-width + margin:auto: o Swiper calcula
   o deslocamento pela largura do slide, e encolher o slide desalinhava o
   carrossel a cada passagem. Assim o slide mantém a largura do carrossel e
   só o conteúdo fica dentro dos 1280px. */
.banner-tpl .swiper-slide {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 48px;
    align-items: center;
    padding-block: var(--section-y);
    padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
    background: transparent;
}
.banner-body { padding: 0; }
.banner-tag {
    display: block;
    padding: 0;
    background: none;
    font-family: var(--font-body);
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--accent);
}
.banner-body h1,
.banner-body .h1 {
    margin: 16px 0;
    max-width: 22ch;
    font-size: 2.5rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--accent-strong);
    text-wrap: pretty;
}
.banner-text { margin: 0; max-width: 56ch; font-size: 1.25rem; line-height: 2rem; color: var(--ink-soft); }
.banner-text p { margin: 0; }
.banner-actions { margin-top: 32px; gap: 16px; }
.banner-media {
    align-self: stretch;
    min-height: 400px;
    border-top: 8px solid var(--accent);
    border-radius: var(--radius);
    background: var(--band);
    overflow: hidden;
}
.banner-media img { width: 100%; height: 100%; object-fit: cover; }
/* Traços indicadores: o ativo é mais largo, para o estado não depender só
   da cor (WCAG 1.4.1). */
.banner-dots .dot { background: var(--color-neutral-400); opacity: 1; }
.banner-dots .dot.is-current { background: var(--accent); }
.swiper-nav { background: var(--page); border: 2px solid var(--accent); border-radius: var(--radius); color: var(--accent); }
.swiper-nav:hover { background: var(--accent); color: var(--color-white); }
.swiper-nav svg { fill: currentColor; }

/* ==========================================================================
   Cabeçalho de secção
   ========================================================================== */
/* margin-inline aqui e não só no .section > *: o main.css tem
   ".section h2 { margin: 0 }" (0-1-1), que ganha a ".section > *" (0-1-0)
   e deixava o título encostado à esquerda enquanto o resto centrava. */
.doc-homepage .section > h2,
.doc-homepage .docs > h2,
.news-head { margin: 0 auto 32px; }
.doc-homepage .section > h2,
.doc-homepage .docs > h2 { font-size: 2rem; line-height: 1.5; letter-spacing: 0; }
.news-head { align-items: baseline; padding-bottom: 0; border-bottom: 0; }
.news-head h2 { font-size: 2rem; line-height: 1.5; letter-spacing: 0; }
/* Ligação com seta: alvo de 44px sem parecer um botão */
.news-head a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
}

/* ==========================================================================
   Destaques — cartões
   ========================================================================== */
.grid-3 { gap: 24px; margin-top: 0; }
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--page);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.card:hover { border-color: var(--accent-strong); }
.card-media { height: 200px; background: var(--band); }
.card-body { display: flex; flex-direction: column; flex-grow: 1; padding: 24px; }
.card h3 { margin: 12px 0; font-size: 1.5rem; line-height: 1.5; font-weight: 600; }
.card h3 a { color: var(--accent); text-decoration: underline; }
.card-text { margin-bottom: 0; font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }
.card-text p { margin: 0; }

/* ==========================================================================
   Notícias — lista datada, em vez da grelha de 4
   ========================================================================== */
.grid-4 { display: block; margin-top: 0; }
/* A marcação tem thumb/time/h3/p como irmãos diretos, sem <div> à volta do
   texto, por isso a colocação na grelha é explícita e não automática. */
.news-item {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-row: auto;
    column-gap: 32px;
    row-gap: 8px;
    align-items: start;
    padding-block: 28px;
    border-top: 2px solid var(--line);
}
.news-item:last-child { border-bottom: 2px solid var(--line); }
.news-item > .news-thumb { grid-column: 1; grid-row: 1 / span 3; height: 160px; border-radius: var(--radius); background: var(--band); }
.news-item > time { grid-column: 2; grid-row: 1; align-self: center; font-family: var(--font-body); font-size: .875rem; line-height: 1.5rem; color: var(--ink-muted); }
.news-item > h3 { grid-column: 2; grid-row: 2; font-size: 1.5rem; line-height: 1.5; font-weight: 600; }
.news-item > h3 a { color: var(--accent); text-decoration: none; }
.news-item > h3 a:hover { text-decoration: underline; }
.news-item > p { grid-column: 2; grid-row: 3; max-width: 76ch; font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }

/* ==========================================================================
   Legislação e documentos
   ========================================================================== */
.docs-grid { gap: 24px; }
.doc {
    gap: 16px;
    min-height: 200px;
    padding: 24px;
    background: var(--page);
    border: 2px solid var(--line);
    border-radius: var(--radius);
}
.doc:hover { border-color: var(--accent-strong); }
/* Ícone por CSS: a marcação é partilhada com as páginas de conteúdo e não
   se lhe pode acrescentar um <span>. */
.doc::before {
    content: "";
    order: -2;
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: var(--color-primary-100) center / 24px 24px no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23034AD8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
}
.doc .title { order: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.75; font-weight: 600; color: var(--accent); text-decoration: underline; }
/* Formato e tamanho depois do nome, no DOM e à vista: a ligação lê-se
   "Plano de Ação PDF · 1,2 MB" e não o contrário. */
.doc .meta { order: 1; margin-top: auto; font-family: var(--font-body); font-size: .875rem; line-height: 1.5rem; font-weight: 400; color: var(--ink-soft); }

/* ==========================================================================
   Newsletter e contactos
   ========================================================================== */
.duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--section-y) var(--gutter);
}
.duo > .duo-part { padding: 0; border: 0; background: transparent; }
.duo > .duo-part + .duo-part { padding-left: 64px; border-left: 2px solid var(--line); }
.duo h2 { margin-bottom: 8px; font-size: 2rem; line-height: 1.5; }
.duo-intro { margin-bottom: 24px; color: var(--ink-soft); }
.duo-intro p { margin: 0; }

/* Campos: rótulo acima, 60px de altura, contorno de 2px em neutral-700.
   Sem rótulo flutuante — a 200% de zoom sobrepõe-se ao texto escrito. */
.nl-row { gap: 16px; max-width: 520px; }
.nl-row label { flex-basis: 100%; margin-bottom: 8px; font-size: 1rem; font-weight: 500; color: var(--accent-strong); }
.nl-row input {
    min-height: var(--control);
    padding: 14px 16px;
    border: 2px solid var(--color-neutral-700);
    border-radius: var(--radius);
    font-size: 1rem;
    line-height: 1.75rem;
}
.consent { margin-top: 20px; max-width: 60ch; font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }
/* 24px é o mínimo de alvo da WCAG 2.2 (2.5.8) */
.consent input { width: 24px; height: 24px; margin-top: 2px; accent-color: var(--accent); }
.consent a { color: var(--accent); }

.contact-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; margin-top: 24px; padding-top: 0; border-top: 0; }
.contact-cols dt { font-family: var(--font-body); font-size: .875rem; line-height: 1.5rem; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--ink-soft); }
.contact-cols dd { margin: 4px 0 0; font-size: 1rem; }
.contact-cols a { color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   Em foco — faixa escura (estático: ainda não existe no Umbraco)
   ========================================================================== */
.foco { background: var(--accent-strong); color: var(--color-white); }
.foco-inner {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--section-y) var(--gutter);
}
.foco .kicker { color: var(--accent-light); }
.foco h2 { margin: 16px 0; color: var(--color-white); }
.foco-texto { margin-bottom: 32px; color: var(--color-primary-300); }
.foco-acoes { display: flex; gap: 16px; flex-wrap: wrap; }
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; }
/* dt primeiro no DOM, dd à vista em cima: o número sem o rótulo não diz nada */
.numero { display: flex; flex-direction: column-reverse; align-items: flex-start; padding: 24px; border: 2px solid var(--color-neutral-700); border-radius: var(--radius); }
.numero dd { margin: 0; font-size: 2.5rem; line-height: 1.5; font-weight: 700; color: var(--accent-light); }
.numero dt { color: var(--color-primary-200); }
/* A data tem dez caracteres e, aos mesmos 40px dos números, só não cabe
   no cartão com o espaçamento alargado da 1.4.12 (254px em 224px, entre os
   1101 e os ~1180px). Deixar partir é o suficiente — no uso normal fica
   sempre numa linha. */
.numero dd { overflow-wrap: anywhere; }

/* ==========================================================================
   Rodapé
   ========================================================================== */
.site-footer { background: var(--accent-strong); color: var(--color-white); }
.footer-main { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding: 56px var(--gutter) 32px; }
.footer-logo { height: 48px; }
.footer-brand { font-family: var(--font-display); font-size: 1.5rem; line-height: 2.25rem; font-weight: 700; letter-spacing: 0; }
.footer-address { margin-top: 8px; font-size: 1rem; line-height: 1.75; color: var(--color-primary-300); }
.footer-address p { margin: 0; }
.footer-kicker { font-family: var(--font-body); font-size: .875rem; line-height: 1.5rem; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--color-primary-300); }
.footer-links { margin-top: 12px; gap: 0; }
.footer-links a,
.footer-address a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: 1rem; color: var(--color-primary-200); text-decoration: underline; }
.footer-links a:hover,
.footer-address a:hover { color: var(--color-white); }
/* .footer-map e .footer-map-link deixaram de ser usados: a coluna do mapa
   no rodapé foi substituída pela ligação de contactos. As regras do
   main.css ficam sem efeito por não haver marcação que lhes corresponda. */

/* Ligação com seta sobre a faixa escura: o accent (#070078) sobre #04004A
   seria ilegível, por isso usa o accent-light, a 8,62:1. */
.foco .link-seta { color: var(--accent-light); }
.foco .link-seta:hover { color: var(--accent-tint); }

.footer-legal { padding-block: 20px; gap: 24px; border-top: 2px solid var(--color-neutral-700); }
.badge-tpl { border: 2px solid var(--color-neutral-700); border-radius: var(--radius); }
.legal-links { gap: 24px; }
.legal-links a { min-height: 44px; font-size: .875rem; color: var(--color-primary-300); text-decoration: underline; }
.legal-links a:hover { color: var(--color-white); }

/* O <ul> traz margin-left:auto do main.css, mas desde que a lista passou a
   estar dentro de um <nav> é o <nav> que é o item flex do .footer-legal — a
   margem automática tem de subir um nível para as ligações encostarem à
   direita, do lado oposto ao selo ePortugal. */
.footer-legal > nav { margin-left: auto; }
.legal-links { justify-content: flex-end; }

/* ==========================================================================
   Responsivo — legível até 320px (1.4.10) e sem alturas fixas em texto,
   para aguentar espaçamento alargado (1.4.12).
   ========================================================================== */
@media (max-width: 1100px) {
    :root { --section-y: 56px; }
    .banner-tpl .swiper-slide { grid-template-columns: 1fr; }
    .banner-media { min-height: 280px; order: -1; }
    .foco-inner { grid-template-columns: 1fr; gap: 40px; }
    .docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .grid-3 { grid-template-columns: 1fr; }
    .duo { grid-template-columns: 1fr; gap: 40px; }
    .duo > .duo-part + .duo-part { padding-top: 40px; padding-left: 0; border-left: 0; border-top: 2px solid var(--line); }
    .news-item { grid-template-columns: 1fr; }
    .news-item > .news-thumb { grid-column: 1; grid-row: auto; height: 200px; }
    .news-item > time,
    .news-item > h3,
    .news-item > p { grid-column: 1; grid-row: auto; }
    .masthead-actions { margin-left: 0; width: 100%; }
    .search-box { width: 100%; }
}
@media (max-width: 600px) {
    .docs-grid { grid-template-columns: 1fr; }
    .numeros { grid-template-columns: 1fr; }
    .contact-cols { grid-template-columns: 1fr; }
    .footer-main { grid-template-columns: 1fr; }
    .footer-legal > nav { margin-left: 0; }
    .legal-links { margin-left: 0; justify-content: flex-start; }
}

@media print {
    .gov-bar, .masthead, .site-footer, .banner-tpl, .foco-acoes { display: none !important; }
    .section, .docs, .foco { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   LISTA DE NOTÍCIAS
   Portado de Design/lista-noticiasss-agora-final.html.

   A marcação da view já tem a forma certa (trilho + título, banda de
   filtros, contagem, destaque, grelha de cartões, paginação); o que muda
   são os nomes das classes, que vêm da linha PML. É tudo CSS sobre a
   marcação existente, sem tocar na listaDeNoticias.cshtml.
   ========================================================================== */

/* --- Cabeçalho da página (shared/masterpage/header) ---
   width:100% é preciso: o .page-head é um item da grelha do #content e,
   num item de grelha, margin-inline:auto encolhe-o ao conteúdo em vez de
   o esticar — ficava com 593px em vez dos 1280 do contentor. */
.page-head {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: 32px var(--gutter) 40px;
}
.page-breadcrumb { font-size: .875rem; line-height: 1.5rem; color: var(--ink-soft); }
.page-breadcrumb ol { gap: 12px; margin: 0 0 24px; }
.page-breadcrumb a { color: var(--ink-soft); text-decoration: underline; }
.page-breadcrumb a:hover { color: var(--accent-strong); }
/* Separador com aria-hidden para não ser lido em voz alta */
.page-breadcrumb .sep { color: var(--ink-muted); opacity: 1; }
.page-breadcrumb [aria-current="page"] { color: var(--ink); }

.page-head h1 { margin: 0 0 16px; font-size: 2.5rem; line-height: 1.5; font-weight: 700; color: var(--accent-strong); text-wrap: pretty; }
.page-head .description { margin-top: 0; max-width: 60ch; font-size: 1.25rem; line-height: 2rem; color: var(--ink-soft); }

/* --- Banda de filtros ---
   Centrada por padding e não por max-width: é ela que leva o fundo da
   faixa, tal como a barra do Estado. */
.filters {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0;
    padding-block: 24px;
    padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
    background: var(--band);
    border: 0;
    border-block: 2px solid var(--line);
}
/* O rótulo "Filtrar" não existe no template: as categorias falam por si e
   o <nav> à volta já tem nome acessível próprio. */
.filters .filter-label { display: none; }
.filter-cats { gap: 8px; }
.filter-cats ul { gap: 8px; }
.filter-cats a {
    min-height: var(--control);
    padding: 16px;
    background: var(--page);
    border: 2px solid var(--color-neutral-700);
    border-radius: var(--radius);
    font-size: 1rem;
    line-height: 1.75rem;
    color: var(--ink);
}
.filter-cats a:hover { background: var(--page); border-color: var(--accent-strong); color: var(--accent-strong); }
/* Ativo por fundo, peso e aria-current — nunca só por cor */
.filter-cats a[aria-current="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--color-white);
    font-weight: 600;
}

.filter-form { align-items: center; gap: 16px; margin-left: auto; }
.filter-form label { font-size: 1rem; font-weight: 500; color: var(--accent-strong); }
.filter-form select {
    min-height: var(--control);
    padding: 0 16px;
    background: var(--page);
    border: 2px solid var(--color-neutral-700);
    border-radius: var(--radius);
    font-size: 1rem;
    line-height: 1.75rem;
    color: var(--ink);
}
.filter-search {
    width: 260px;
    min-height: var(--control);
    gap: 12px;
    padding: 0 16px;
    background: var(--page);
    border: 2px solid var(--color-neutral-700);
    border-radius: var(--radius);
}
.filter-search svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; }
.filter-search input { font-size: 1rem; line-height: 1.75rem; color: var(--ink); }
.filter-search input::placeholder { color: var(--ink-muted); }
.filter-search:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
/* O botão vem com .btn-tpl-sm (44px) da linha PML; na faixa de filtros
   alinha com o select e a pesquisa, que são controlos de 60px. */
.filter-form .btn-tpl { min-height: var(--control); padding: 14px; }

/* --- Contagem, destaque e grelha: contentor de 1280px --- */
.results-count,
.featured,
.news-list,
.empty-state,
.pager { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.results-count {
    margin-block: 0;
    padding-block: 48px 28px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ink-soft);
}

/* --- Notícia em destaque --- */
.featured {
    grid-template-columns: 6fr 6fr;
    gap: 48px;
    align-items: center;
    margin-block: 0;
    padding-bottom: 44px;
    border-bottom: 2px solid var(--line);
}
.featured-media { min-height: 0; background: var(--band); border-radius: var(--radius); overflow: hidden; }
.featured-media img { width: 100%; height: 320px; object-fit: cover; }
.featured .meta-row { gap: 12px; }
.featured h2 { margin: 12px 0; font-size: 2rem; line-height: 1.5; letter-spacing: 0; text-wrap: pretty; }
.featured h2 a { color: var(--accent); text-decoration: none; }
.featured h2 a:hover { text-decoration: underline; }
.featured p { font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }
/* Repetição visual do título-ligação; fora da árvore de acessibilidade
   para não anunciar duas ligações para o mesmo sítio. */
.featured .cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 20px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
}

/* --- Grelha de cartões: duas colunas, sem subgrid ---
   O main.css põe os cartões em subgrid para alinhar data, título e resumo
   entre colunas. Aqui o cartão é uma caixa com contorno e enchimento
   próprios, e a igualdade de alturas já vem do stretch da grelha. */
.news-list { padding-block: 0; }
.news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 44px 0 0; }
.news-grid > li { display: block; grid-row: auto; grid-template-rows: none; }
.news-card {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-template-rows: none;
    height: 100%;
    background: var(--page);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.news-card:hover { border-color: var(--accent-strong); }
.news-card .thumb { height: 200px; background: var(--band); }
.news-card .meta-row { gap: 12px; padding: 24px 24px 0; }
.news-card h3 { margin: 12px 0; padding: 0 24px; font-size: 1.5rem; line-height: 1.5; font-weight: 600; text-wrap: pretty; }
.news-card h3 a { color: var(--accent); text-decoration: none; }
.news-card h3 a:hover { text-decoration: underline; }
.news-card p { padding: 0 24px 24px; font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }

/* --- Etiquetas de categoria ---
   O template usa uma etiqueta única para todas as categorias em vez de uma
   cor por categoria. A cor nunca foi o único portador do significado (o
   texto está lá), mas eram quatro azuis a competir com as ligações. */
.cat,
.cat-comunicado,
.cat-evento,
.cat-legislacao {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    background: var(--accent-tint);
    border-radius: var(--radius);
    color: var(--accent-strong);
    font-family: var(--font-body);
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
a.cat { text-decoration: none; }
a.cat:hover { background: var(--color-primary-300); text-decoration: underline; }

.meta-row time { font-family: var(--font-body); font-size: .875rem; line-height: 1.5rem; color: var(--ink-muted); }

/* --- Sem resultados --- */
.empty-state {
    margin-top: 32px;
    margin-bottom: 0;
    padding: 32px;
    background: var(--band);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    font-size: 1rem;
    color: var(--ink-soft);
}

/* --- Paginação --- */
.pager { gap: 8px; margin-block: 48px var(--section-y); }
.pager ol { gap: 8px; }
.pager a,
.pager .current {
    min-width: var(--control);
    min-height: var(--control);
    height: auto;
    padding: 16px;
    border: 2px solid var(--color-neutral-700);
    border-radius: var(--radius);
    font-size: 1rem;
    line-height: 1.75rem;
    color: var(--accent);
}
.pager a:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.pager .current { background: var(--accent); border-color: var(--accent); color: var(--color-white); font-weight: 600; }

@media (max-width: 1100px) {
    .featured { grid-template-columns: 1fr; gap: 24px; }
    .featured-media img { height: 260px; }
}
@media (max-width: 860px) {
    .news-grid { grid-template-columns: 1fr; }
    .filter-form { margin-left: 0; width: 100%; }
    .filter-search { width: 100%; }
}

/* ==========================================================================
   DETALHE DE NOTÍCIA
   Portado de Design/noticia-agora-final.html.
   ========================================================================== */

/* --- Cabeçalho do artigo --- */
.artigo-head { border-bottom: 2px solid var(--line); }
.artigo-head-inner {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: 32px var(--gutter) 40px;
}
.artigo-titulo { max-width: 900px; }
.artigo-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.artigo-data { display: flex; gap: 6px; margin: 0; font-size: .875rem; line-height: 1.5rem; color: var(--ink-muted); }
.artigo-data .label { font-weight: 400; }
.artigo-head h1 { margin: 16px 0; font-size: 2.5rem; line-height: 1.5; font-weight: 700; color: var(--accent-strong); text-wrap: pretty; }
.artigo-lead { margin: 0; font-size: 1.25rem; line-height: 2rem; color: var(--ink-soft); }

/* --- Corpo e coluna lateral --- */
.artigo-layout {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: 72px;
    align-items: start;
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: 48px var(--gutter) var(--section-y);
}
.artigo-layout > article { min-width: 0; grid-column: 1; grid-row: 1 / span 2; }
/* O índice é irmão do artigo (ver a nota na noticia.cshtml): em ecrã largo
   volta ao topo da coluna da direita; em ecrã estreito a ordem do código
   põe-no antes do corpo, que é o que o critério 4.1 pede. */
.artigo-layout > .indice { grid-column: 2; grid-row: 1; align-self: start; }
.artigo-layout > .lateral { grid-column: 2; grid-row: 2; align-self: start; }

.figura { margin: 0 0 40px; }
.figura-caixa { background: var(--band); border-top: 8px solid var(--accent); border-radius: var(--radius); overflow: hidden; }
.figura img { width: 100%; height: 400px; object-fit: cover; display: block; }
.figura figcaption { margin-top: 12px; font-size: .875rem; line-height: 1.5rem; color: var(--ink-soft); }

/* Medida de leitura travada em 72ch, como no template */
.artigo-layout .prose { max-width: 72ch; }
.artigo-layout .prose p { margin: 0 0 24px; font-size: 1rem; line-height: 1.75; color: var(--ink); }
.artigo-layout .prose p:last-child { margin-bottom: 0; }
.artigo-layout .prose h2 { margin: 40px 0 16px; font-size: 1.5rem; line-height: 2.25rem; font-weight: 700; color: var(--accent-strong); }
.artigo-layout .prose h3 { margin: 32px 0 12px; font-size: 1.25rem; line-height: 2rem; font-weight: 600; color: var(--accent-strong); }
.artigo-layout .prose a { color: var(--accent); text-decoration: underline; }
.artigo-layout .prose ul,
.artigo-layout .prose ol { margin: 0 0 24px; padding-left: 24px; font-size: 1rem; line-height: 1.75; color: var(--ink); }
.artigo-layout .prose li { margin-bottom: 8px; }
.artigo-layout .prose li::marker { color: var(--accent); }
.artigo-layout .prose blockquote {
    margin: 32px 0;
    padding: 24px;
    background: var(--band);
    border-left: 8px solid var(--accent);
    border-radius: var(--radius);
    font-size: 1.25rem;
    line-height: 2rem;
    color: var(--ink);
}
.artigo-layout .prose blockquote p { margin: 0; font-size: inherit; line-height: inherit; }
.artigo-layout .prose blockquote footer { margin-top: 12px; font-size: .875rem; line-height: 1.5rem; color: var(--ink-soft); }
.artigo-layout .prose blockquote cite { font-style: normal; }

/* --- Partilhar --- */
.partilhar { margin-top: 48px; padding-top: 24px; border-top: 2px solid var(--line); }
.partilhar-rotulo {
    margin: 0 0 12px;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.partilhar ul { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
/* Variante neutra: contorno em neutral-700 (4,91:1, acima dos 3:1 que a
   WCAG 1.4.11 exige para fronteiras de controlos). */
/* transparent e não var(--page): com fundo branco declarado o botão conta
   como preenchido — para um avaliador e para qualquer medição automática —
   e a página de detalhe passava a ter cinco "ações principais" em vez de
   nenhuma (critério 5.3). Partilhar nunca é a ação principal de um artigo. */
.btn-tpl-neutro {
    border-color: var(--color-neutral-700);
    background: transparent;
    color: var(--accent);
}
.btn-tpl-neutro:hover { border-color: var(--accent-strong); color: var(--accent-strong); background: transparent; }
.btn-tpl-neutro svg { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; }

.voltar {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: var(--control);
    margin-top: 24px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
}
.voltar svg { width: 20px; height: 20px; flex: none; }

/* --- Coluna lateral --- */
.lateral { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.caixa { padding: 24px; background: var(--page); border: 2px solid var(--line); border-radius: var(--radius); }
.caixa h2 { margin: 0 0 16px; font-size: 1.25rem; line-height: 2rem; font-weight: 600; color: var(--accent-strong); }
.caixa ul { list-style: none; margin: 0; padding: 0; }

/* Índice: o item ativo tem filete E peso, não só cor (WCAG 1.4.1) */
.indice a {
    display: block;
    padding: 8px 0 8px 16px;
    border-left: 4px solid var(--line);
    color: var(--accent);
    text-decoration: underline;
}
.indice a[aria-current] { border-left-color: var(--accent); color: var(--accent-strong); font-weight: 600; }

.caixa-escura { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--color-white); }
.caixa-escura h2 { color: var(--color-white); }
.caixa-escura ul { display: flex; flex-direction: column; gap: 16px; }
.caixa-escura a { display: flex; gap: 12px; color: var(--color-primary-200); text-decoration: underline; }
.caixa-escura a:hover { color: var(--color-white); }
.caixa-escura svg { width: 24px; height: 24px; flex: none; margin-top: 2px; stroke: var(--accent-light); fill: none; }
/* Formato e tamanho depois do nome: a ligação lê-se "Plano de Ação PDF,
   840 KB" e não o contrário. */
.caixa-escura .formato { display: block; font-size: .875rem; line-height: 1.5rem; color: var(--color-primary-300); text-decoration: none; }

.relacionadas { background: var(--band); }
.relacionadas ul { display: flex; flex-direction: column; gap: 16px; }
.relacionadas a { display: block; color: var(--accent); text-decoration: underline; }
.relacionadas time { display: block; margin-top: 4px; font-size: .875rem; line-height: 1.5rem; color: var(--ink-muted); }

.caixa-cta { border-left: 8px solid var(--accent); }
.caixa-cta p { margin: 0 0 16px; color: var(--ink-soft); }

/* --- Mais notícias --- */
.mais { background: var(--band); border-block: 2px solid var(--line); }
.mais-inner {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--section-y) var(--gutter);
}
.mais-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.mais-head h2 { font-size: 2rem; line-height: 1.5; }
/* Ligação com seta: alvo de 44px sem parecer um botão */
.link-seta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
}
.link-seta svg { width: 20px; height: 20px; flex: none; }

.grelha-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.cartao-noticia {
    position: relative;
    height: 100%;
    background: var(--page);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.cartao-noticia:hover { border-color: var(--accent-strong); }
.cartao-noticia .thumb { height: 180px; background: var(--band); }
.cartao-noticia .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartao-noticia .corpo { padding: 24px; }
.cartao-noticia time { font-size: .875rem; line-height: 1.5rem; color: var(--ink-muted); }
.cartao-noticia h3 { margin: 8px 0 0; font-size: 1.25rem; line-height: 2rem; font-weight: 600; text-wrap: pretty; }
.cartao-noticia h3 a { color: var(--accent); text-decoration: none; }
/* Só o título é ligação; o ::after estende a área clicável ao cartão todo */
.cartao-noticia h3 a::after { content: ""; position: absolute; inset: 0; }
.cartao-noticia h3 a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
    .artigo-layout { grid-template-columns: 1fr; gap: 48px; }
    .artigo-layout > .indice,
    .artigo-layout > article,
    .artigo-layout > .lateral { grid-column: 1; grid-row: auto; }
    .lateral { position: static; }
    .artigo-layout .prose { max-width: none; }
    .figura img { height: 300px; }
}
@media (max-width: 860px) {
    .grelha-3 { grid-template-columns: 1fr; }
    .partilhar ul { flex-direction: column; align-items: stretch; }
}
@media (max-width: 600px) {
    .artigo-layout .prose blockquote { padding: 20px; font-size: 1rem; line-height: 1.75rem; }
}

/* --- Impressão: o botão "imprimir" tem de dar uma página utilizável --- */
@media print {
    #header, .site-footer, .skip-to-main, #preloader, .modal-search,
    .page-breadcrumb, .partilhar, .lateral, .voltar, .mais { display: none !important; }
    .artigo-head { border-bottom: 0; }
    .artigo-head-inner, .artigo-layout { display: block; padding: 0; max-width: none; }
    .artigo-layout .prose { max-width: none; }
    body { font-size: 12pt; }
    /* O destino das ligações deixa de estar visível em papel */
    .artigo-layout .prose a::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
}

/* ==========================================================================
   PÁGINAS DE CONTEÚDO, NEWSLETTER E CANCELAMENTO
   Mesmo contentor de 1280px do resto do site.
   ========================================================================== */

/* width:100% porque estes blocos são itens da grelha do #content e, num
   item de grelha, margin-inline:auto encolhe-os ao conteúdo. */
.conteudo-layout,
.page-content > .section,
.page-content > .form-page {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: 48px var(--gutter) var(--section-y);
}

.conteudo-layout > * + * { margin-top: 40px; }
.conteudo-layout .prose,
.conteudo-layout .rte { max-width: 72ch; }

.conteudo-atualizacao {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 2px solid var(--line);
    font-size: .875rem;
    line-height: 1.5rem;
    color: var(--ink-muted);
    text-align: right;
}

/* Corpo de texto vindo do editor.

   Preso aos contentores de conteúdo e NÃO a .page-content. Apanhado em
   uso: ".page-content a:not(.btn-tpl):not(.cat)" tem especificidade 0-3-1
   e ganhava ao ".filter-cats a[aria-current]" (0-2-1) — o chip de filtro
   ativo ficava com o texto da cor do próprio fundo, ilegível. O mesmo
   bloco punha todos os resumos a --ink em vez de --ink-soft.

   Com :is(), a especificidade fica em 0-1-x e estes seletores deixam de
   competir com os componentes. */
:is(.conteudo-layout, .form-page-intro, .duo-intro) p { font-size: 1rem; line-height: 1.75; color: var(--ink); }
:is(.conteudo-layout, .form-page-intro) h2 { font-size: 2rem; line-height: 1.5; font-weight: 700; color: var(--accent-strong); }
:is(.conteudo-layout, .form-page-intro) h3 { font-size: 1.5rem; line-height: 1.5; font-weight: 600; color: var(--accent-strong); }
:is(.conteudo-layout, .form-page-intro) h4 { font-size: 1.25rem; line-height: 2rem; font-weight: 600; color: var(--accent-strong); }
:is(.conteudo-layout, .form-page-intro, .duo-intro) a:not(.btn-tpl) { color: var(--accent); text-decoration: underline; }
:is(.conteudo-layout, .form-page-intro) li::marker { color: var(--accent); }

/* --- Atalhos para as páginas filhas (masterConteudos) --- */
.shortcuts {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: 0 var(--gutter) var(--section-y);
}
.shortcuts .container,
.shortcuts .container-max { max-width: none; padding: 0; }
.shortcuts .row { --bs-gutter-x: 24px; --bs-gutter-y: 24px; }
.shortcut {
    height: 100%;
    padding: 24px !important;
    background: var(--page);
    border: 2px solid var(--line);
    border-radius: var(--radius) !important;
}
.shortcut:hover { border-color: var(--accent-strong); }
.shortcut .text { font-size: .875rem !important; line-height: 1.5rem; font-weight: 600; text-transform: uppercase; color: var(--accent); }
.shortcut .title {
    display: block;
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: 1.25rem !important;
    line-height: 2rem !important;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.shortcut .title:hover { text-decoration: underline; }

/* --- Formulários (newsletter, cancelamento, contactos) --- */
.form-page-intro { margin-bottom: 32px; max-width: 72ch; color: var(--ink-soft); }
.form-page label { font-weight: 500; color: var(--accent-strong); }
.form-page input[type="email"],
.form-page input[type="text"],
.form-page textarea,
.form-page select {
    min-height: var(--control);
    padding: 14px 16px;
    background: var(--page);
    border: 2px solid var(--color-neutral-700);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.75rem;
    color: var(--ink);
}
.form-page textarea { min-height: 140px; }

/* Botões do Bootstrap (.btn) nos formulários: alguns partials ainda usam
   as classes do Bootstrap em vez das .btn-tpl, e ficavam a 38px enquanto
   os campos ao lado têm 60. O Ágora pede 60x60 mínimos. */
.page-content .btn,
.page-content input[type="submit"] {
    min-height: var(--control);
    min-width: var(--control);
    padding: 16px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 400;
    text-transform: none !important;
}
.page-content .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--color-white);
}
.page-content .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--color-white); }

/* As mensagens do Bootstrap ganham a forma do Ágora */
.alert { border-width: 2px; border-radius: var(--radius); font-size: 1rem; line-height: 1.75; }
.alert-success { background: #E7F6EF; border-color: #008558; color: #0A5138; }
.alert-danger { background: #FEF1F2; border-color: #DE2D3B; color: #C41826; }

@media (max-width: 1100px) {
    .conteudo-layout,
    .page-content > .section,
    .page-content > .form-page { padding-block: 40px var(--section-y); }
    .conteudo-layout .prose,
    .conteudo-layout .rte { max-width: none; }
}

/* ==========================================================================
   Checklist "Conteúdo" da AMA — correções
   ========================================================================== */

/* 2.2 — a informação secundária não pode descer abaixo de 10 pt (13,33 px).
   O selo do rodapé estava a 11 px (8,3 pt). */
.badge-tpl small { font-size: .875rem; line-height: 1.5rem; }

/* 5.2 — alvos interativos com 44 px CSS de lado, na vertical E na horizontal.
   O mínimo do Ágora (60 px) já cobre os botões e os campos; o que faltava
   eram os controlos pequenos do cabeçalho e as ligações do rodapé. */
.skip-to-main a { display: inline-flex; align-items: center; min-height: 44px; }
.gov-lang a { min-width: 44px; justify-content: center; }
.gov-bar-right > a { min-width: 44px; justify-content: center; }
.nav-toggle { min-width: 44px; }
.footer-address a,
.footer-links a,
.legal-links a,
.footer-map-link { min-height: 44px; }
/* O endereço do rodapé é um bloco de texto corrido com <br>: sem isto as
   ligações de telefone e correio ficavam com a altura da linha. */
.footer-address a { display: inline-flex; align-items: center; }
/* Mesmo caso na secção de contactos da página inicial, onde o main.css
   deixava as ligações com min-height de 26 px. */
.contact-cols a { display: inline-flex; align-items: center; min-height: 44px; }
/* O e-mail é uma palavra só, sem espaços: a sua largura min-content (238px)
   era maior do que a coluna (144px entre os ~700 e os 1100px) e transbordava
   da página. "anywhere" baixa essa contribuição e deixa-o partir. */
.contact-cols a, .footer-address a { overflow-wrap: anywhere; }

/* 4.2 — sem varrimento horizontal até aos 320 px.
   Abaixo dos 900 px o menu empilha na vertical (regra do main.css), e aí o
   white-space:nowrap — que existe para manter a barra numa só fila no
   desktop — impedia as etiquetas longas de quebrar e empurrava a página
   para lá da largura do ecrã. O enchimento do contentor também não faz
   sentido num ecrã que já é mais estreito do que ele. */
@media (max-width: 900px) {
    .mainnav { padding-inline: var(--gutter); }
    .nav-link { white-space: normal; }
    .nav-l1 { gap: 0; }
}
/* A ligação de salto tem texto longo e passou a inline-flex por causa do
   alvo de 44 px; sem isto deixou de poder quebrar. */
.skip-to-main a { flex-wrap: wrap; white-space: normal; }

/* 4.2 — a barra de cookies não se adapta abaixo dos ~400 px: o cookieconsent
   dá largura fixa ao aviso (371 px) e ao painel de definições (403 px), e num
   ecrã de 320 px é isso que obriga a página inteira a rolar na horizontal.
   O aviso aparece na primeira visita a QUALQUER página, por isso afeta-as
   todas. O cookieconsent.min.css é carregado antes desta folha. */
@media (max-width: 420px) {
    /* max-width em vw e não left/right nem percentagens: o #cc--main tem
       largura 0 e é ele o bloco de contenção destes elementos fixos, por
       isso qualquer medida relativa dava 0 e a caixa caía para a largura
       mínima do conteúdo (379 px). O vw resolve contra a janela. */
    #cc--main #cm {
        width: auto;
        max-width: calc(100vw - 24px);
        left: 12px;
        right: auto;
    }
    #cc--main #cs,
    #cc--main #s-cnt { width: 100vw; max-width: 100vw; }
    /* Os véus por trás das caixas: estão com visibility:hidden mas continuam
       a contar para a largura de rolamento da página. */
    #cc--main #cs-ov,
    #cc--main #cm-ov { width: 100vw; max-width: 100vw; }
}

/* 4.2 — títulos em ecrã estreito.
   "#PortugalMediaLab" é uma palavra única e indivisível: a 40 px ocupa
   379 px e num ecrã de 320 px não cabe nos 272 px disponíveis. Como o
   body tem overflow-x:hidden, o excesso não gerava barra de rolamento —
   era simplesmente CORTADO, e parte do título desaparecia sem aviso.
   O break-word fica como rede para palavras ainda maiores. */
@media (max-width: 600px) {
    h1,
    .page-head h1,
    .artigo-head h1,
    .banner-body h1,
    .banner-body .h1 { font-size: 1.625rem; line-height: 1.3; }
    h2, .mais-head h2, .duo h2 { font-size: 1.5rem; }
}
h1, h2, h3, .banner-body .h1 { overflow-wrap: break-word; }

/* Transação 2.1 — o tamanho do campo deve sugerir o tamanho do dado.
   Um campo de e-mail com 1232 px de largura não dá pista nenhuma. */
.form-page input[type="email"],
.form-page input[type="text"],
.form-page .form-floating { max-width: 34rem; }
.form-page textarea { max-width: 48rem; }

/* Conteúdo 2.1 — corpo do documento a 12 pt (16 px) no mínimo.
   O resumo dos cartões de destaque ficava a 15,5 px (11,63 pt): o main.css
   tem ".card p" (0-1-1), que ganhava ao ".card-text" (0-1-0) que eu tinha
   escrito. Isto é texto descritivo, não metadado — tem de cumprir o 2.1 e
   não o 2.2. Dois níveis de classe para passar à frente. */
.card .card-text,
.card .card-text p { font-size: 1rem; line-height: 1.75; }

/* Conteúdo 2.1 — rótulos de conteúdo a 12 pt.
   A etiqueta do herói ("Destaque") e os kickers das secções ("Programa",
   "Plano", "Sítio associado", "Em foco") introduzem o conteúdo: não são
   metadados como uma data ou o tamanho de um ficheiro, por isso não se
   acolhem ao mínimo de 10 pt do requisito 2.2 e têm de cumprir os 12 pt.

   Divergem dos 14 px que o Ágora define para o kicker. Continuam a
   distinguir-se do corpo pela caixa alta, pelo peso 600 e pela cor accent. */
.kicker,
.banner-tag { font-size: 1rem; line-height: 1.5rem; }