/* =========================================================================
   ASA — prototipo.css
   Camada de componentes. Consome design-tokens.css e NAO declara valores
   literais de cor, tipo de letra ou espacamento (§5.1, verificado pelo gate).

   Mobile-first. Zero dependencias. Sem framework.
   ========================================================================= */

/* ---------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--asa-font-text);
  font-size: var(--asa-text-base);
  line-height: var(--asa-leading-normal);
  font-weight: var(--asa-weight-body);
  color: var(--asa-text-on-functional);
  background: var(--asa-surface-functional);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--asa-font-display);
  line-height: var(--asa-leading-tight);
  letter-spacing: var(--asa-tracking-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--asa-text-3xl); }
h2 { font-size: var(--asa-text-2xl); }
h3 { font-size: var(--asa-text-xl); }

p { margin: 0; text-wrap: pretty; }

img, svg { max-width: 100%; height: auto; display: block; }

/* Salto para o conteudo — 2.4.1 Bypass Blocks */
.p-skip {
  position: absolute;
  left: var(--asa-space-sm);
  top: calc(var(--asa-space-sm) * -8);
  z-index: 100;
  padding: var(--asa-space-2xs) var(--asa-space-sm);
  background: var(--asa-action-primary-bg);
  color: var(--asa-action-primary-text);
  border-radius: var(--asa-radius-md);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--asa-duration-fast) var(--asa-easing-standard);
}
.p-skip:focus { top: var(--asa-space-sm); }

.p-wrap {
  width: 100%;
  max-width: var(--asa-measure-prose);
  margin-inline: auto;
  padding-inline: var(--asa-space-md);
}
.p-wrap--wide { max-width: var(--asa-bp-xl); }

.p-stack > * + * { margin-block-start: var(--asa-space-md); }
.p-stack--lg > * + * { margin-block-start: var(--asa-space-xl); }

.p-visually-hidden {
  position: absolute;
  width: var(--asa-border-hairline);
  height: var(--asa-border-hairline);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------- navegacao (vidro 1/2) -- */

.p-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--asa-glass-nav-bg);
  -webkit-backdrop-filter: blur(var(--asa-glass-nav-blur)) saturate(1.4);
  backdrop-filter: blur(var(--asa-glass-nav-blur)) saturate(1.4);
  border-block-end: var(--asa-border-hairline) solid var(--asa-glass-nav-border);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .p-nav { background: var(--asa-glass-nav-fallback); }
}

.p-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--asa-space-sm);
  padding-block: var(--asa-space-2xs);
}

.p-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--asa-space-2xs);
  min-height: var(--asa-field-min-target);
  color: var(--asa-text-on-narrative);
  text-decoration: none;
  font-weight: 600;
}
.p-nav__brand img { width: var(--asa-space-xl); border-radius: var(--asa-radius-sm); }

.p-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--asa-field-min-target);
  min-height: var(--asa-field-min-target);
  background: none;
  border: var(--asa-border-hairline) solid var(--asa-glass-nav-border);
  border-radius: var(--asa-radius-md);
  color: var(--asa-text-on-narrative);
  font-size: var(--asa-text-lg);
  cursor: pointer;
}

.p-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  gap: var(--asa-space-3xs);
  padding-block-end: var(--asa-space-sm);
}
.p-nav__list[data-open="true"] { display: flex; }

.p-nav__list a {
  display: block;
  min-height: var(--asa-field-min-target);
  padding: var(--asa-space-2xs) var(--asa-space-xs);
  color: var(--asa-text-on-narrative);
  text-decoration: none;
  border-radius: var(--asa-radius-md);
  font-size: var(--asa-text-sm);
}
.p-nav__list a:hover { background: var(--asa-glass-status-chip-bg); }
.p-nav__list a[aria-current="page"] {
  background: var(--asa-glass-status-chip-bg);
  font-weight: 600;
}

/* Com Notícias o menu passou a nove itens e transbordava 19px a 768px — a
   página inteira ganhava scroll horizontal. Só fica na horizontal quando cabe;
   abaixo disso volta ao botão.

   Correção de 2026-08: o limiar estava em 1024px e não chegava. Medido em
   navegador a 1024px, os nove itens partiam em DUAS linhas (a lista media 66px
   de altura em vez de 44) — a barra abria horizontal exactamente na largura em
   que já não cabia. Não era do botão novo: medi com e sem a classe `p-nav__cta`
   e o resultado é o mesmo, o botão acrescenta 2px. A uma linha só a partir de
   ~1107px; 1120px dá margem sem esperar por ecrãs grandes. */
@media (min-width: 1120px) {
  .p-nav__toggle { display: none; }
  .p-nav__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-block-end: 0;
  }
}

/* -------------------------------------------------------------- camadas --- */

.p-narrative {
  --asa-layer-muted: var(--asa-text-on-narrative-muted);
  background: var(--asa-gradient-surface-narrative);
  color: var(--asa-text-on-narrative);
  font-weight: var(--asa-weight-body-on-dark);
}
.p-narrative h1, .p-narrative h2, .p-narrative h3 { color: var(--asa-text-on-narrative); }

.p-functional {
  --asa-layer-muted: var(--asa-text-on-functional-muted);
  background: var(--asa-surface-functional);
  color: var(--asa-text-on-functional);
  font-weight: var(--asa-weight-body);
}

/* Retícula em poios: bandas assimetricas, cada seccao um terraco (§4.4).
   Sem parallax — a sensacao de camadas vem da geometria, nao do scroll. */
.p-poio { position: relative; padding-block: var(--asa-space-3xl); }
.p-poio--inset { padding-block: var(--asa-space-2xl); }
.p-poio + .p-poio { border-block-start: var(--asa-border-hairline) solid var(--asa-glass-nav-border); }

/* Luz de UMA fonte, em cima a esquerda. Nao e um degradado posto onde cabe. */
.p-lit { position: relative; isolation: isolate; }
.p-lit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--asa-gradient-edge-light);
  pointer-events: none;
  z-index: -1;
}

/* ---------------------------------------------------------------- hero ---- */

.p-hero { padding-block: var(--asa-space-3xl) var(--asa-space-2xl); }
.p-hero h1 { font-size: var(--asa-text-4xl); }
/* A cor do lede depende da CAMADA, nao da classe. A primeira versao fixava aqui
   o tom atenuado da camada escura; ao mover estas seccoes para a camada clara,
   passou a ser texto claro sobre branco — falha de contraste medida pelo axe em
   7 das 8 paginas. A cor passa a vir do contexto. */
.p-hero__lede {
  font-size: var(--asa-text-lg);
  max-width: var(--asa-measure-prose);
}

.p-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-xs);
}
@media (min-width: 480px) {
  .p-hero__actions { flex-direction: row; flex-wrap: wrap; }
}

/* --------------------------------------------------------------- botoes --- */

.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--asa-space-2xs);
  min-height: var(--asa-field-min-target);
  padding: var(--asa-space-2xs) var(--asa-space-md);
  border: var(--asa-border-thin) solid transparent;
  border-radius: var(--asa-radius-lg);
  font-family: var(--asa-font-text);
  font-size: var(--asa-text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--asa-duration-base) var(--asa-easing-standard),
    transform var(--asa-duration-fast) var(--asa-easing-spring);
}
.p-btn:active { transform: translateY(var(--asa-border-hairline)); }

.p-btn--primary {
  background: var(--asa-action-primary-bg);
  color: var(--asa-action-primary-text);
}
.p-btn--primary:hover { background: var(--asa-action-primary-bg-hover); }

.p-btn--outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.p-btn--outline:hover { background: var(--asa-glass-status-chip-bg); }

.p-functional .p-btn--outline:hover { background: var(--asa-surface-functional-sunken); }

.p-btn[disabled],
.p-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------------- chip de convocatoria - */

.p-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--asa-space-2xs);
  padding: var(--asa-space-3xs) var(--asa-space-xs);
  border-radius: var(--asa-radius-full);
  font-size: var(--asa-text-sm);
  font-weight: 600;
}
/* Forma + palavra + icone. NUNCA so cor (1.4.1). */
.p-chip::before { font-size: var(--asa-text-xs); }
.p-chip--aberta {
  background: var(--asa-status-convocatoria-aberta-bg);
  color: var(--asa-status-convocatoria-aberta-text);
}
.p-chip--aberta::before { content: "\25CF"; }
.p-chip--encerrada {
  background: var(--asa-status-convocatoria-encerrada-bg);
  color: var(--asa-status-convocatoria-encerrada-text);
}
.p-chip--encerrada::before { content: "\25A0"; }
.p-chip--breve {
  background: var(--asa-status-convocatoria-em-breve-bg);
  color: var(--asa-status-convocatoria-em-breve-text);
}
.p-chip--breve::before { content: "\25C6"; }

/* ----------------------------------------------------- cartao de programa - */

.p-cards {
  display: grid;
  gap: var(--asa-space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .p-cards { grid-template-columns: 1fr 1fr; } }

/* Os cartoes NAO sao de vidro.
   Duas razoes, e a segunda foi medida. (1) §4.4 so justifica material translucido
   "onde a interface se superpoe a fotografia real das pessoas da ASA" — aqui nao
   ha fotografia por tras, logo o vidro nao teria argumento de conteudo.
   (2) A verificacao mediu 3 superficies translucidas simultaneas a 768px (nav +
   2 cartoes), o que viola a regra 4 de §4.3 (maximo duas) e o critério A3c.
   Ficam superficie opaca elevada: mesma leitura de profundidade, sem o custo. */
.p-card {
  position: relative;
  padding: var(--asa-space-md);
  border-radius: var(--asa-radius-xl);
  background: var(--asa-surface-narrative-raised);
  border: var(--asa-border-hairline) solid var(--asa-glass-card-over-photo-border);
  overflow: hidden;
}

/* A luz responde ao ponteiro: o brilho de bordo desloca-se levemente.
   Um gesto reconhecivel, nao um catalogo (§4.4). */
.p-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--asa-gradient-edge-light);
  opacity: 0.6;
  transition: opacity var(--asa-duration-slow) var(--asa-easing-spring);
  pointer-events: none;
}
.p-card:hover::after, .p-card:focus-within::after { opacity: 1; }

.p-card__accent {
  display: block;
  width: var(--asa-space-xl);
  height: var(--asa-border-thick);
  border-radius: var(--asa-radius-full);
  margin-block-end: var(--asa-space-xs);
}
/* Acentos como BARRA, nunca como texto: nenhum passa AA sobre branco (§4.5 regra 2) */
.p-card--habitacao .p-card__accent { background: var(--asa-prog-habitacao); }
.p-card--regressar .p-card__accent { background: var(--asa-prog-regressar); }
.p-card--proinfancia .p-card__accent { background: var(--asa-prog-proinfancia); }
.p-card--valorizacao .p-card__accent { background: var(--asa-prog-valorizacao); }
.p-card--capacitar .p-card__accent { background: var(--asa-prog-capacitar); }
.p-card--oportunidades .p-card__accent { background: var(--asa-prog-oportunidades); }

.p-card h3 { font-size: var(--asa-text-lg); }
.p-card__link { color: inherit; text-decoration: none; }
.p-card__link::after { content: ""; position: absolute; inset: 0; }

/* ------------------------------------------------------- tira parceiros --- */

.p-partners {
  background: var(--asa-surface-partner-zone);
  padding-block: var(--asa-space-2xl);
}
.p-partners__title {
  font-family: var(--asa-font-text);
  font-size: var(--asa-text-sm);
  font-weight: 600;
  letter-spacing: var(--asa-tracking-wide);
  text-transform: uppercase;
  color: var(--asa-text-on-functional-muted);
  text-align: center;
  margin-block-end: var(--asa-space-xl);
}
.p-partners__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Regra 2 da CMF: 250px minimo. Em 375px cabe UM por fila. */
  grid-template-columns: repeat(auto-fit, minmax(var(--asa-partner-logo-min-width), 1fr));
  gap: var(--asa-space-2xl);
  justify-items: center;
  align-items: center;
  max-width: var(--asa-bp-lg);
  margin-inline: auto;
}
.p-partners__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--asa-partner-logo-min-width);
  min-height: var(--asa-field-min-target);
}
/* Marcador: os logotipos reais dependem de autorizacao da ASA (§11 regra 6). */
.p-partners__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--asa-space-xl);
  padding: var(--asa-space-xs);
  border: var(--asa-border-thin) dashed var(--asa-field-border);
  border-radius: var(--asa-radius-md);
  font-size: var(--asa-text-xs);
  color: var(--asa-text-on-functional-muted);
  text-align: center;
}

/* ------------------------------------------------------------ formulario -- */

/* §4.3 regra 3 / critério A3c: ZERO vidro nos campos do formulario. */

.p-progress { margin-block-end: var(--asa-space-md); }
.p-progress__track {
  height: var(--asa-space-3xs);
  background: var(--asa-surface-functional-sunken);
  border-radius: var(--asa-radius-full);
  overflow: hidden;
}
.p-progress__bar {
  height: 100%;
  background: var(--asa-action-primary-bg);
  border-radius: var(--asa-radius-full);
  transition: width var(--asa-duration-slow) var(--asa-easing-standard);
}
.p-progress__label {
  font-size: var(--asa-text-sm);
  color: var(--asa-text-on-functional-muted);
  margin-block-start: var(--asa-space-3xs);
}

.p-fieldset {
  border: var(--asa-border-hairline) solid var(--asa-field-border);
  border-radius: var(--asa-radius-lg);
  padding: var(--asa-space-md);
  margin: 0;
}
.p-fieldset + .p-fieldset { margin-block-start: var(--asa-space-lg); }
.p-fieldset > legend {
  font-family: var(--asa-font-display);
  font-size: var(--asa-text-lg);
  font-weight: 600;
  padding-inline: var(--asa-space-2xs);
}
.p-fieldset__intro {
  font-size: var(--asa-text-sm);
  color: var(--asa-text-on-functional-muted);
  margin-block-end: var(--asa-space-md);
}

.p-field { display: block; }
.p-field + .p-field { margin-block-start: var(--asa-space-md); }

.p-field__label {
  display: block;
  font-weight: 600;
  color: var(--asa-field-label);
  margin-block-end: var(--asa-space-3xs);
}
.p-field__req { color: var(--asa-field-required-mark); }
.p-field__opt {
  font-weight: 400;
  color: var(--asa-text-on-functional-muted);
  font-size: var(--asa-text-sm);
}

.p-field__control {
  display: block;
  width: 100%;
  min-height: var(--asa-field-min-target);
  padding: var(--asa-space-2xs) var(--asa-space-xs);
  font-family: var(--asa-font-text);
  font-size: var(--asa-text-base);
  color: var(--asa-field-text);
  background: var(--asa-field-bg);
  /* VISUAL-07: em producao o limite mede 1.93:1; 1.4.11 exige >=3:1. */
  border: var(--asa-border-field) solid var(--asa-field-border);
  border-radius: var(--asa-radius-md);
  transition: border-color var(--asa-duration-fast) var(--asa-easing-standard);
}
.p-field__control:hover { border-color: var(--asa-field-border-hover); }
.p-field__control:focus { border-color: var(--asa-field-border-focus); }
/* A11Y-03: em producao o placeholder mede 1.86:1. */
.p-field__control::placeholder { color: var(--asa-field-placeholder); opacity: 1; }
.p-field__control[disabled] {
  background: var(--asa-surface-functional-sunken);
  color: var(--asa-text-on-functional-muted);
  cursor: not-allowed;
}
.p-field__control[readonly] {
  background: var(--asa-surface-functional-sunken);
  border-style: dashed;
}

.p-field__help {
  font-size: var(--asa-text-sm);
  color: var(--asa-field-help);
  margin-block-start: var(--asa-space-3xs);
}

.p-field__control[aria-invalid="true"] {
  border-color: var(--asa-feedback-error-border);
  border-width: var(--asa-border-thick);
}
.p-field__error {
  display: flex;
  gap: var(--asa-space-3xs);
  font-size: var(--asa-text-sm);
  font-weight: 600;
  color: var(--asa-feedback-error-text);
  background: var(--asa-feedback-error-bg);
  padding: var(--asa-space-3xs) var(--asa-space-2xs);
  border-radius: var(--asa-radius-sm);
  margin-block-start: var(--asa-space-3xs);
}
.p-field__error::before { content: "\26A0"; }
.p-field__ok {
  font-size: var(--asa-text-sm);
  font-weight: 600;
  color: var(--asa-feedback-success-text);
  margin-block-start: var(--asa-space-3xs);
}
.p-field__ok::before { content: "\2713\00A0"; }

.p-errors {
  border: var(--asa-border-thick) solid var(--asa-feedback-error-border);
  background: var(--asa-feedback-error-bg);
  color: var(--asa-feedback-error-text);
  border-radius: var(--asa-radius-lg);
  padding: var(--asa-space-md);
  margin-block-end: var(--asa-space-md);
}
.p-errors[hidden] { display: none; }
.p-errors ul { margin: var(--asa-space-2xs) 0 0; padding-inline-start: var(--asa-space-md); }
.p-errors a { color: inherit; }

/* ------------------------------------------------------ agregado familiar - */

/* 375px: cartoes. A tabela de 5 controlos por linha e hostil em telefone. */
.p-member {
  border: var(--asa-border-hairline) solid var(--asa-field-border);
  border-radius: var(--asa-radius-lg);
  padding: var(--asa-space-sm);
  background: var(--asa-surface-functional);
}
.p-member + .p-member { margin-block-start: var(--asa-space-sm); }
.p-member__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--asa-space-xs);
  margin-block-end: var(--asa-space-xs);
  font-weight: 600;
}
.p-member__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Em producao este alvo mede 28x28. 2.5.8 exige 24; o projeto exige 44. */
  min-width: var(--asa-field-min-target);
  min-height: var(--asa-field-min-target);
  background: none;
  border: var(--asa-border-hairline) solid var(--asa-field-border);
  border-radius: var(--asa-radius-md);
  color: var(--asa-text-on-functional-muted);
  cursor: pointer;
}
.p-member__remove:hover { border-color: var(--asa-feedback-error-border); color: var(--asa-feedback-error-text); }

.p-computed {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* --------------------------------------------------------------- resumo --- */

.p-summary {
  display: grid;
  gap: var(--asa-space-xs);
  grid-template-columns: 1fr 1fr;
  padding: var(--asa-space-md);
  background: var(--asa-surface-functional-sunken);
  border-radius: var(--asa-radius-lg);
}
.p-summary__label {
  display: block;
  font-size: var(--asa-text-sm);
  color: var(--asa-text-on-functional-muted);
}
.p-summary__value {
  display: block;
  font-family: var(--asa-font-display);
  font-size: var(--asa-text-xl);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- checklist ---- */

.p-checklist { list-style: none; margin: 0; padding: 0; }
.p-checklist li {
  display: flex;
  gap: var(--asa-space-2xs);
  padding-block: var(--asa-space-2xs);
  border-block-end: var(--asa-border-hairline) solid var(--asa-field-border);
  font-size: var(--asa-text-sm);
}
.p-checklist li::before { content: "\2610"; flex: none; }

/* --------------------------------------------------------------- passos --- */

.p-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
/* NAO usar `display: grid` aqui. Com grid, CADA filho do <li> — incluindo os nos
   de TEXTO — torna-se um item de grelha independente, pelo que «Envie-a para», o
   <a> e o ponto final caiam em celulas separadas e a linha partia-se ao meio.
   Foi o defeito visivel na pagina de socios. Com padding + contador em absoluto,
   o conteudo do <li> continua a ser um fluxo de texto normal. */
.p-steps li {
  counter-increment: step;
  position: relative;
  padding-block: var(--asa-space-2xs);
  padding-inline-start: calc(var(--asa-space-lg) + var(--asa-space-xs));
}
.p-steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--asa-space-2xs);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--asa-space-lg);
  height: var(--asa-space-lg);
  border-radius: var(--asa-radius-full);
  background: var(--asa-action-primary-bg);
  color: var(--asa-action-primary-text);
  font-weight: 600;
  font-size: var(--asa-text-sm);
}

/* ------------------------------------------------------------------ faq --- */

.p-faq { border-block-start: var(--asa-border-hairline) solid var(--asa-field-border); }
.p-faq summary {
  padding-block: var(--asa-space-xs);
  min-height: var(--asa-field-min-target);
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}
.p-faq p { padding-block-end: var(--asa-space-xs); color: var(--asa-text-on-functional-muted); }

/* ------------------------------------------------------------ confirmacao - */

.p-ref {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--asa-space-xs);
  padding: var(--asa-space-md);
  background: var(--asa-feedback-success-bg);
  border: var(--asa-border-thin) solid var(--asa-feedback-success-text);
  border-radius: var(--asa-radius-lg);
}
.p-ref__code {
  font-family: var(--asa-font-display);
  font-size: var(--asa-text-2xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--asa-tracking-wide);
  color: var(--asa-feedback-success-text);
}

/* --------------------------------------------------------------- rodape --- */

.p-footer { padding-block: var(--asa-space-2xl); font-size: var(--asa-text-sm); }
.p-footer__cols {
  display: grid;
  gap: var(--asa-space-lg);
  grid-template-columns: 1fr;
}
/* Quatro colunas desde que entrou Redes sociais: 2x2 no meio, 4 em linha em
   ecrã largo. Três colunas deixavam a quarta sozinha numa segunda linha. */
@media (min-width: 480px) { .p-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .p-footer__cols { grid-template-columns: repeat(4, 1fr); } }
.p-footer h2 { font-size: var(--asa-text-base); margin-block-end: var(--asa-space-2xs); }
.p-footer ul { list-style: none; margin: 0; padding: 0; }
.p-footer li + li { margin-block-start: var(--asa-space-3xs); }
.p-footer a {
  color: var(--asa-text-on-narrative);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  min-height: var(--asa-field-min-target);
  padding-block: var(--asa-space-3xs);
}

/* Ligacoes no corpo claro: VISUAL-01 / A11Y-08 — sublinhado obrigatorio,
   porque so a cor nao chega (1.4.1). */
.p-functional a:not(.p-btn):not(.p-card__link) {
  color: var(--asa-action-link-on-functional);
  text-decoration: var(--asa-action-link-decoration);
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- foco ---- */

.p-functional :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--asa-focus-ring-width) solid var(--asa-focus-ring-color-on-functional);
  outline-offset: var(--asa-focus-ring-offset);
}
.p-narrative :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--asa-focus-ring-width) solid var(--asa-focus-ring-color-on-narrative);
  outline-offset: var(--asa-focus-ring-offset);
}

/* -------------------------------------------------------- degradacao ------ */

@media (prefers-reduced-transparency: reduce) {
  .p-nav, .p-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .p-nav { background: var(--asa-glass-nav-fallback); }
  .p-card { background: var(--asa-glass-card-over-photo-fallback); }
  .p-card::after, .p-lit::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .p-btn:active { transform: none; }
}

@media (prefers-contrast: more) {
  .p-field__control { border-width: var(--asa-border-thick); }
  .p-nav, .p-card { background: var(--asa-glass-nav-fallback); }
}

@media print {
  .p-nav, .p-hero__actions, .p-btn { display: none; }
  .p-narrative { background: var(--asa-white); color: var(--asa-text-on-functional); }
}

.p-partners__note {
  text-align: center;
  font-size: var(--asa-text-sm);
  color: var(--asa-text-on-functional-muted);
  margin-block-start: var(--asa-space-lg);
}

/* A verificacao mediu a caixa de consentimento a 13x13 px. E o controlo mais
   importante da ficha e falhava 2.5.8 Target Size (minimo 24) e o objetivo de
   44 px do projeto. Dimensiona-se a caixa e garante-se o alvo na etiqueta. */
.p-field__label:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: var(--asa-space-2xs);
  min-height: var(--asa-field-min-target);
  padding-block: var(--asa-space-3xs);
  cursor: pointer;
}
.p-field__label input[type="checkbox"] {
  flex: none;
  inline-size: var(--asa-space-md);
  block-size: var(--asa-space-md);
  margin: 0;
  accent-color: var(--asa-action-link-on-functional);
  cursor: pointer;
}

/* Uma acao autonoma num paragrafo proprio nao e "uma ligacao dentro de uma
   frase", pelo que nao beneficia da excecao de 2.5.8. Passa a alvo pleno. */
.p-action-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--asa-field-min-target);
  padding-inline: var(--asa-space-2xs);
  margin-inline-start: calc(var(--asa-space-2xs) * -1);
  border-radius: var(--asa-radius-md);
  font-weight: 600;
}

/* Defeito REAL encontrado pela verificacao: as ligacoes em prosa dentro da camada
   narrativa nao tinham regra de cor, pelo que herdavam o azul por omissao do
   browser (#0000EE) sobre navy — 1.2:1 medido. So `.p-functional a` estava
   coberto. As migalhas de sobre.html eram o caso visivel. */
.p-narrative a:not(.p-btn):not(.p-nav__brand):not(.p-nav__list a):not(.p-card__link) {
  color: var(--asa-text-on-narrative);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Lista de factos por programa: financiamento, ambito, desde. */
.p-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--asa-space-3xs) var(--asa-space-sm);
  margin: 0;
}
@media (min-width: 480px) {
  .p-facts { grid-template-columns: auto 1fr; }
}
.p-facts dt {
  font-weight: 600;
  font-size: var(--asa-text-sm);
  color: var(--asa-text-on-functional-muted);
}
.p-facts dd { margin: 0; }

/* Acento por programa como BARRA. §4.5 regra 2: nenhum passa AA sobre branco
   (1.64-2.44:1 medido), pelo que nunca serve de texto. */
.p-accent--habitacao { background: var(--asa-prog-habitacao); }
.p-accent--regressar { background: var(--asa-prog-regressar); }
.p-accent--proinfancia { background: var(--asa-prog-proinfancia); }
.p-accent--valorizacao { background: var(--asa-prog-valorizacao); }
.p-accent--capacitar { background: var(--asa-prog-capacitar); }
.p-accent--socialmente-aleatorio { background: var(--asa-prog-oportunidades); }

/* Cifras de impacto na portada. */
.p-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--asa-space-md);
  margin: 0;
}
@media (min-width: 768px) { .p-stats { grid-template-columns: repeat(4, 1fr); } }
.p-stats dt {
  font-size: var(--asa-text-sm);
  color: var(--asa-text-on-functional-muted);
}
.p-stats dd {
  margin: 0;
  font-family: var(--asa-font-display);
  font-size: var(--asa-text-3xl);
  line-height: var(--asa-leading-tight);
  font-variant-numeric: tabular-nums;
  color: var(--asa-navy);
}

/* Factos por projeto: financiamento, ambito, contactos. */
.p-facts { display: grid; grid-template-columns: 1fr; gap: var(--asa-space-3xs) var(--asa-space-sm); margin: 0 0 var(--asa-space-md); }
@media (min-width: 480px) { .p-facts { grid-template-columns: auto 1fr; } }
.p-facts dt { font-weight: 600; font-size: var(--asa-text-sm); color: var(--asa-text-on-functional-muted); }
.p-facts dd { margin: 0; }

/* Cartoes na camada CLARA (catalogo de projetos sociais). */
.p-cards--light .p-card {
  background: var(--asa-surface-functional-sunken);
  border-color: var(--asa-field-border);
  color: var(--asa-text-on-functional);
}
.p-cards--light .p-card { --asa-layer-muted: var(--asa-text-on-functional-muted); }
.p-card--neutro .p-card__accent { background: var(--asa-verde-luz); }

/* Barra de acento por projeto. §4.5 regra 2: so como barra, nunca como texto. */
.p-accent--regressar { background: var(--asa-prog-regressar); }
.p-accent--habitacao { background: var(--asa-prog-habitacao); }
.p-accent--proinfancia { background: var(--asa-prog-proinfancia); }
.p-accent--capacitar { background: var(--asa-prog-capacitar); }
.p-accent--valorizacao { background: var(--asa-prog-valorizacao); }
.p-accent--socialmente-aleatorio { background: var(--asa-prog-oportunidades); }
.p-card--regressar .p-card__accent { background: var(--asa-prog-regressar); }
.p-card--socialmente-aleatorio .p-card__accent { background: var(--asa-prog-oportunidades); }


/* ---------------------------------------------------------------------------
   Cor atenuada e do lede: UMA regra, resolvida por heranca de custom property.

   Porque assim: `<main class="p-functional">` envolve `<section
   class="p-narrative">`. Com selectores `.p-functional .p-muted` e
   `.p-narrative .p-muted` — mesma especificidade (0,2,0) — decidia a ordem no
   ficheiro, e a camada clara ganhava DENTRO do painel escuro. Resultado medido
   no render: texto escuro sobre navy, praticamente ilegivel. As custom
   properties herdam do antepassado mais proximo que as define, que e a
   semantica correcta: a camada mais proxima ganha.

   Nota: o axe deu 0 violacoes neste texto. Nao o apanhou porque o fundo e um
   DEGRADADO, e o algoritmo de contraste do axe nao resolve gradientes — o mesmo
   ponto cego que tive de corrigir no meu proprio script de verificacao. Foi o
   render que o revelou, nao a automacao.
   --------------------------------------------------------------------------- */
.p-muted { color: var(--asa-layer-muted, var(--asa-text-on-functional-muted)); }
.p-hero__lede { color: var(--asa-layer-muted, var(--asa-text-on-functional-muted)); }
.p-card__desc { color: var(--asa-layer-muted, var(--asa-text-on-functional-muted)); }

/* ---------------------------------------------------------------------------
   Banda do hero: camada NARRATIVA. §4.3 poe as camadas narrativas em navy e as
   funcionais em claro; a primeira versao tinha o hero em branco, o que deixava
   a portada sem a assinatura de «Luz sobre Pedra» e a pagina toda plana.
   --------------------------------------------------------------------------- */
.p-hero-band {
  padding-block: var(--asa-space-4xl) var(--asa-space-3xl);
}
.p-hero-band h1 {
  font-size: var(--asa-text-4xl);
  max-width: var(--asa-measure-prose);
}
/* Cifras de impacto sobre navy: separadas do hero por uma regra de luz. */
.p-hero-band .p-stats {
  margin-block-start: var(--asa-space-3xl);
  padding-block-start: var(--asa-space-xl);
  border-block-start: var(--asa-border-hairline) solid var(--asa-glass-nav-border);
}
.p-hero-band .p-stats dd { color: var(--asa-white); }
.p-hero-band .p-stats dt { color: var(--asa-layer-muted); }

/* Os chips levam ESTADO CURTO. O detalhe longo pertence ao corpo do texto —
   um chip que quebra em tres linhas deixou de ser um chip. */
.p-chip { max-width: 100%; }

/* ===========================================================================
   ELEMENTO ASSINATURA — a cronologia em POIOS

   §4.1 da direcao de design: «a referencia formal e madeirense — os poios, as
   terracas de pedra escalonadas da ilha: estrutura, camadas, solidez, feitas a
   mao ao longo de geracoes.» A cronologia da ASA e literalmente isso: 26 anos
   construidos degrau a degrau. Cada marco e um poio, e cada poio esta mais alto
   que o anterior.

   A primeira versao usava uma lista numerada vertical em grelha `auto 1fr`, e o
   resultado media-se mal: a data era empurrada para a direita e o texto caia
   para a linha seguinte. Ilegivel. Aqui a ordem e o eixo horizontal, que e o
   eixo que o tempo ja tem na cabeca de quem le.
   =========================================================================== */

.p-poios {
  list-style: none;
  margin: var(--asa-space-xl) 0 0;
  padding: 0 0 var(--asa-space-sm);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--asa-poios-step-min-width), 1fr);
  gap: var(--asa-space-sm);
  align-items: end;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Pista de deslocamento: a mesma tecnica da tabela do agregado. */
  background:
    linear-gradient(to right, var(--asa-surface-functional) 30%, rgb(255 255 255 / 0)) left center,
    linear-gradient(to left, var(--asa-surface-functional) 30%, rgb(255 255 255 / 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgb(23 18 72 / 0.14), rgb(23 18 72 / 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgb(23 18 72 / 0.14), rgb(23 18 72 / 0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.p-poio-step {
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--asa-space-2xs);
  padding: var(--asa-space-sm);
  border-radius: var(--asa-radius-lg) var(--asa-radius-lg) 0 0;
  background: var(--asa-surface-functional-sunken);
  /* A luz vem de cima a esquerda — a mesma fonte de todo o sitio (§4.4). */
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / 0.9);
  border-inline-start: var(--asa-border-thick) solid var(--asa-verde-luz);
}
/* Cada poio um degrau acima do anterior: a terraca sobe. */
.p-poio-step:nth-child(1) { min-height: var(--asa-poios-step-1); }
.p-poio-step:nth-child(2) { min-height: var(--asa-poios-step-2); }
.p-poio-step:nth-child(3) { min-height: var(--asa-poios-step-3); }
.p-poio-step:nth-child(4) { min-height: var(--asa-poios-step-4); }
.p-poio-step:nth-child(5) { min-height: var(--asa-poios-step-5); }

.p-poio-step__ano {
  font-family: var(--asa-font-display);
  font-size: var(--asa-text-xl);
  line-height: var(--asa-leading-tight);
  color: var(--asa-navy);
  font-variant-numeric: tabular-nums;
}
.p-poio-step__data {
  font-size: var(--asa-text-xs);
  letter-spacing: var(--asa-tracking-wide);
  text-transform: uppercase;
  color: var(--asa-layer-muted);
}
.p-poio-step__texto { font-size: var(--asa-text-sm); }

/* O marco final e o presente: ganha o acento quente. */
.p-poio-step--agora {
  background: var(--asa-feedback-info-bg);
  border-inline-start-color: var(--asa-action-primary-bg);
}

/* ---------------------------------------------------------------------------
   MOVIMENTO. Passado pelo gate de «find-animation-opportunities»: cada
   candidato tem de declarar frequencia e proposito, e a maioria e rejeitada.

   ACEITES
   1. Entrada dos cartoes de projeto — frequencia OCASIONAL, proposito
      «evitar mudanca abrupta». Stagger de 60 ms, opacity + translateY.
   2. Subida dos poios — frequencia OCASIONAL, proposito «explicacao»: a
      sequencia E o conteudo, e a ordem de entrada transporta informacao.
   3. Estado da navegacao ao deslocar — frequencia DEZENAS/DIA, portanto so
      movimento quase imperceptivel: muda o bordo, 160 ms, nada mais.

   REJEITADOS
   - Contagem animada do «+6 000 familias» — sao dados que a pessoa esta a LER.
     Decoracao sobre dados atrapalha. Rejeitado pela pergunta 4 do gate.
   - Fade geral no carregamento da pagina — atrasa o conteudo sem proposito.
   - Parallax no hero — proibido explicitamente por §4.5 do encargo.
   - Animacao no menu — navegacao principal, uso muito frequente: nunca animar.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   REVELACAO AO DESLOCAR: REMOVIDA.

   Tres tentativas, tres falhas com a mesma assinatura — conteudo invisivel:
     1. esconder em CSS + revelar com IntersectionObserver -> a cronologia
        desapareceu (o observer nunca dispara abaixo da dobra, nem sem JS);
     2. mover o esconder para tras de um atributo posto por JS -> mudou o
        momento da falha, nao a falha;
     3. `animation-timeline: view()` -> os seis cartoes de projeto ficaram
        invisiveis, porque a posicao do elemento no scrollport decide o progresso
        da animacao e numa captura de pagina completa caem no inicio do intervalo.

   O padrao comum: qualquer revelacao cujo estado inicial e `opacity: 0` tem como
   modo de falha «conteudo que nao existe». Para um sitio institucional de uma
   IPSS, esse risco nao se paga com nenhuma elegancia. A premissa da propria
   skill de animacao e que ha casos em que a melhor animacao e nenhuma; este e um.

   Fica o movimento que NAO pode esconder nada: estado da nav ao deslocar,
   brilho de bordo no hover dos cartoes, e feedback de pressao nos botoes.
   --------------------------------------------------------------------------- */

/* Estado da nav ao deslocar: so o bordo. Uso frequente => quase imperceptivel. */
.p-nav {
  transition: border-color var(--asa-duration-fast) var(--asa-easing-standard);
}
.p-nav[data-scrolled="true"] { border-block-end-color: var(--asa-action-primary-bg); }

/* --------------------------------------------------------- logos de parceiro */

.p-partners__logo {
  /* Regra 3 da CMF: mesma ALTURA para todos os logotipos que se acompanham. */
  height: var(--asa-partner-logo-height);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* Sem filtros: os logotipos de terceiros vao na sua cor de marca. Alterar a
     marca de outra entidade e, no caso da CMF, incumprimento do manual. */
}
@media (min-width: 1024px) { .p-partners__logo { height: var(--asa-partner-logo-height-wide); } }

/* ------------------------------------------------------ logos de programa --- */

.p-card__logo {
  height: var(--asa-poios-logo-height);
  width: auto;
  max-width: 60%;
  margin-block-end: var(--asa-space-xs);
  /* Os logos de programa da ASA sao navy+verde sobre fundo branco. Sobre a
     camada navy precisam de um leito claro para se lerem. */
  background: var(--asa-white);
  border-radius: var(--asa-radius-sm);
  padding: var(--asa-space-3xs) var(--asa-space-2xs);
}

/* Logotipos knockout (branco sobre transparente) precisam de leito escuro.
   Medido: 100% dos pixeis opacos de secretaria-regional.png e de
   governo-regional.png sao quase-brancos. Sao as versoes para fundo escuro.
   PENDENTE: pedir a ASA as versoes em cor, para dispensar o azulejo. */
.p-partners__logo--knockout {
  background: var(--asa-navy);
  border-radius: var(--asa-radius-md);
  padding: var(--asa-space-2xs) var(--asa-space-sm);
  box-sizing: content-box;
}

/* ===========================================================================
   MAQUETADO — revisao de distribuicao

   Tres problemas medidos no render a 1280px:
   (1) espaco vertical excessivo: `.p-poio` tinha 6rem em cima E em baixo, logo
       12rem entre seccoes consecutivas — a pagina lia-se vazia;
   (2) a coluna de texto (68ch) encostava a esquerda e deixava metade do
       viewport em branco, sem que nada ocupasse esse lado;
   (3) os logotipos — o unico material grafico proprio da ASA, porque nao ha
       fotografia — estavam a 32-52px, tamanho de icone.
   =========================================================================== */

/* (1) O ritmo vertical passa a ser de UMA banda, nao de duas somadas. */
.p-poio { padding-block: var(--asa-space-2xl); }
.p-poio--inset { padding-block: var(--asa-space-xl); }
.p-poio + .p-poio { border-block-start: none; }
/* Uma regra de luz separa bandas da MESMA camada; entre camadas o contraste de
   fundo ja faz o trabalho e a regra seria ruido. */
.p-functional .p-poio + .p-poio {
  border-block-start: var(--asa-border-hairline) solid var(--asa-neutral-200);
}

/* (2) Coluna de leitura centrada, e um par de seccoes em duas colunas onde o
       conteudo o justifica. Nada de esticar prosa ate 1280px: a medida de
       60-75 caracteres nao se negocia (§4.4b). */
.p-wrap { margin-inline: auto; }

.p-duo {
  display: grid;
  gap: var(--asa-space-xl);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .p-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--asa-space-2xl); }
  .p-duo--aside { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* (3) Logotipos ao tamanho a que se leem. */
.p-nav__brand img {
  width: auto;
  height: var(--asa-brand-nav-logo);
  border-radius: 0;
}
.p-card__logo {
  height: var(--asa-brand-programme-logo);
  width: auto;
  max-width: 100%;
  margin-block-end: var(--asa-space-sm);
  /* Os logos da ASA sao navy+verde: sobre a camada navy precisam de leito claro. */
  background: var(--asa-white);
  border-radius: var(--asa-radius-md);
  padding: var(--asa-space-2xs) var(--asa-space-xs);
}
@media (min-width: 768px) {
  .p-card__logo { height: var(--asa-brand-programme-logo-wide); }
}
/* Cartao com logotipo: o acento de cor seria redundante — o logotipo ja
   identifica o programa. Chanel: retirar um acessorio antes de sair. */
.p-card:has(.p-card__logo) .p-card__accent { display: none; }

/* Cartoes um pouco mais generosos, agora que carregam um logotipo. */
.p-card { padding: var(--asa-space-lg); }

/* O hero ganha ar sem ganhar vazio. */
.p-hero-band { padding-block: var(--asa-space-3xl) var(--asa-space-2xl); }
.p-hero-band .p-stats { margin-block-start: var(--asa-space-2xl); }

/* Cifras de impacto: maiores, porque sao o argumento mais forte da ASA. */
.p-stats dd { font-size: var(--asa-text-4xl); }

/* ===========================================================================
   FAIXA DE PARCEIROS — banda navy, logotipos a branco, em movimento

   Pedido explicito do cliente. Registo da tensao, para memoria do projeto:
   §4.5 do encargo proibe «marquees, tickers, infinite scroll», e a entrega v1
   foi criticada por trazer exactamente um ticker. O cliente reafirmou o pedido,
   pelo que se executa — mas com os travoes que o tornam defensavel:
     · para ao passar o ponteiro e ao receber foco de teclado;
     · para por completo sob prefers-reduced-motion (nao abranda: para);
     · a duplicacao da serie e aria-hidden, logo nao ha repeticao para quem ouve;
     · nenhuma informacao existe SO na faixa — a lista tambem esta no rodape.
   =========================================================================== */

.p-band {
  background: var(--asa-gradient-surface-narrative);
  color: var(--asa-text-on-narrative);
  padding-block: var(--asa-space-xl);
  overflow: hidden;
}
.p-band__title {
  font-family: var(--asa-font-text);
  font-size: var(--asa-text-sm);
  font-weight: 600;
  letter-spacing: var(--asa-tracking-wide);
  text-transform: uppercase;
  color: var(--asa-text-on-narrative-muted);
  text-align: center;
  margin-block-end: var(--asa-space-lg);
}
.p-band__note {
  text-align: center;
  font-size: var(--asa-text-sm);
  color: var(--asa-text-on-narrative-muted);
  margin-block-start: var(--asa-space-lg);
}

.p-ticker {
  /* Esbatimento nos bordos: a faixa entra e sai da banda em vez de ser cortada.
     O overflow tem de estar AQUI e nao no `.p-band`, senao a banda corta antes
     de a mascara esbater e os logotipos aparecem cortados a meio. */
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.p-ticker__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--asa-space-3xl);
  width: max-content;
}
.p-ticker__item { flex: none; display: flex; align-items: center; }

.p-ticker__logo {
  /* Maiores, como pedido: 72px em telefone, 88px em ecra largo.
     Limite de largura porque os logotipos tem proporcoes muito diferentes — o da
     Secretaria Regional e 1024x144 (7:1) e, sem tecto, ocupava sozinho metade da
     faixa. Com `object-fit: contain` a altura cede antes da largura. */
  height: var(--asa-brand-ticker-logo);
  width: auto;
  max-width: var(--asa-brand-ticker-logo-max-width);
  object-fit: contain;
  opacity: 0.92;
}
@media (min-width: 768px) { .p-ticker__logo { height: var(--asa-brand-ticker-logo-wide); } }

@media (prefers-reduced-motion: no-preference) {
  .p-ticker__track { animation: asa-ticker 38s linear infinite; }
  /* Pausa ao passar o ponteiro e — importante — ao dar foco por teclado. */
  .p-ticker:hover .p-ticker__track,
  .p-ticker:focus-within .p-ticker__track { animation-play-state: paused; }
  @keyframes asa-ticker {
    from { transform: translateX(0); }
    /* -50% porque a serie esta duplicada: o ciclo fecha sem salto visivel. */
    to   { transform: translateX(-50%); }
  }
}
/* Sem movimento: a faixa fica parada e centrada, e continua legivel. */
@media (prefers-reduced-motion: reduce) {
  .p-ticker { mask-image: none; -webkit-mask-image: none; }
  .p-ticker__track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: var(--asa-space-xl);
  }
  .p-ticker__item:nth-child(n+5) { display: none; }  /* esconde a serie duplicada */
}

/* ===========================================================================
   PORTADA com fotografia — §4.4 duotono navy→âmbar

   A fotografia e da propria ASA (biblioteca de media de producao). §4.5 proibe
   fotografia de stock, e para uma IPSS que pede o NIF a estranhos uma imagem
   real da organizacao faz um trabalho que nenhuma imagem generica faz.
   O duotono cumpre duas funcoes: integra a foto na paleta e uniformiza material
   de qualidade desigual.
   =========================================================================== */

.p-hero-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--asa-navy);
}
.p-hero-photo__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  opacity: 0.55;
}
/* Veu de legibilidade: o texto NUNCA se apoia na fotografia sem garantia de
   contraste. §4.3 regra 1 — medir contra o pior fundo possivel, nao a media.
   Aqui o pior caso e o ambar claro do duotono, e o veu leva-o ao navy. */
.p-hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(148deg, rgb(23 18 72 / 0.94) 0%, rgb(23 18 72 / 0.78) 55%, rgb(23 18 72 / 0.90) 100%);
}
@media (prefers-contrast: more) {
  .p-hero-photo__media { opacity: 0.28; }
}

/* Seccao de projeto: marca a esquerda, conteudo a direita. Da aos logotipos o
   tamanho a que se leem, sem criar uma grelha em que metade dos cartoes tem
   logotipo e a outra nao. */
.p-proj { display: grid; gap: var(--asa-space-md); grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .p-proj { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--asa-space-xl); align-items: start; }
}
.p-proj__mark { display: flex; flex-direction: column; gap: var(--asa-space-xs); }
.p-proj__logo {
  height: auto;
  width: 100%;
  max-width: var(--asa-brand-project-logo);
  background: var(--asa-white);
  border-radius: var(--asa-radius-lg);
  padding: var(--asa-space-xs);
  box-shadow: var(--asa-shadow-raised);
}

/* ===========================================================================
   1. CIFRAS DE IMPACTO — tamanho e distribuicao

   O problema medido: `--asa-text-4xl` chega a 3.6rem e, numa grelha de quatro
   colunas a 1280px (~250px cada), «+6 000» e «11 anos» quebravam em duas linhas.
   Um numero que quebra deixa de se ler como numero.
   Correcao: token proprio com clamp mais contido, numero em nowrap, e a grelha
   passa a duas colunas em tablet em vez de forcar quatro.
   =========================================================================== */
.p-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--asa-space-lg) var(--asa-space-md);
}
@media (min-width: 900px) { .p-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-stats > div {
  display: flex;
  flex-direction: column-reverse;   /* numero primeiro na leitura visual */
  gap: var(--asa-space-3xs);
}
.p-stats dt {
  font-size: var(--asa-text-xs);
  letter-spacing: var(--asa-tracking-wide);
  text-transform: uppercase;
  line-height: var(--asa-leading-snug);
}
.p-stats dd {
  font-size: var(--asa-brand-stat-number);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: var(--asa-tracking-tight);
}

/* ===========================================================================
   2. FAIXA DE LOGOTIPOS — sempre a cobrir a banda

   Com duas series de quatro havia posicoes do ciclo em que a faixa nao chegava
   aos dois extremos. Passa a TRES series (o gerador emite-as) e o ciclo fecha a
   -33.333%, pelo que ha sempre material a entrar por ambos os lados.
   =========================================================================== */
.p-ticker__track { gap: var(--asa-space-2xl); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes asa-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.3333%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Sem movimento mostra-se UMA serie (as outras duas sao copias aria-hidden). */
  .p-ticker__item:nth-child(n+5) { display: none; }
}

/* ===========================================================================
   5. CONTAS — pastas de arquivo

   A metafora e justa: sao onze exercicios arquivados, um por ano. A aba com o
   ano faz o trabalho que uma lista de «Descarregar» repetido nao faz.
   =========================================================================== */
.p-folders {
  list-style: none;
  margin: var(--asa-space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--asa-space-md);
  grid-template-columns: repeat(auto-fill, minmax(var(--asa-brand-folder-min-width), 1fr));
}
.p-folder { position: relative; padding-block-start: var(--asa-brand-folder-tab); }
/* A aba: um trapezio recortado, como a lingueta de uma pasta suspensa. */
.p-folder::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 62%;
  height: calc(var(--asa-brand-folder-tab) + var(--asa-space-2xs));
  background: var(--asa-verde-luz);
  border-radius: var(--asa-radius-md) var(--asa-radius-lg) 0 0;
  clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}
.p-folder__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--asa-space-2xs);
  padding: var(--asa-space-sm);
  min-height: var(--asa-brand-folder-min-height);
  background: var(--asa-surface-functional-sunken);
  border: var(--asa-border-hairline) solid var(--asa-neutral-200);
  border-radius: 0 var(--asa-radius-lg) var(--asa-radius-lg) var(--asa-radius-lg);
  box-shadow: var(--asa-shadow-raised);
}
.p-folder__ano {
  font-family: var(--asa-font-display);
  font-size: var(--asa-text-xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--asa-navy);
}
.p-folder__label { font-size: var(--asa-text-xs); color: var(--asa-layer-muted); }
.p-folder a {
  margin-block-start: auto;
  font-size: var(--asa-text-sm);
  font-weight: 600;
  min-height: var(--asa-field-min-target);
  display: inline-flex;
  align-items: center;
}
/* O ano mais recente destaca-se: e o que a maioria procura. */
.p-folder--recente::before { background: var(--asa-action-primary-bg); }
.p-folder--recente .p-folder__body { border-color: var(--asa-action-primary-bg); }

/* ===========================================================================
   4. PROJETOS SOCIAIS — o catalogo deixa de ser uma grelha de caixas iguais

   Era sosso porque seis cartoes identicos nao dizem nada sobre o que os
   distingue: uns estao activos, outros terminaram; uns sao de 1999, outros de
   2024. A informacao que ja existe no texto passa a ser estrutura visual:
   faixa de anos, estado, e a barra de acento do projeto.
   =========================================================================== */
.p-cat { display: grid; gap: var(--asa-space-md); grid-template-columns: 1fr; }
@media (min-width: 800px) { .p-cat { grid-template-columns: 1fr 1fr; } }

.p-cat__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--asa-space-md);
  padding: var(--asa-space-md);
  background: var(--asa-surface-functional);
  border: var(--asa-border-hairline) solid var(--asa-neutral-200);
  border-radius: var(--asa-radius-xl);
  border-inline-start: var(--asa-border-thick) solid var(--asa-verde-luz);
  transition: box-shadow var(--asa-duration-base) var(--asa-easing-standard),
              border-color var(--asa-duration-base) var(--asa-easing-standard);
}
.p-cat__item:hover {
  box-shadow: var(--asa-shadow-raised);
  border-inline-start-color: var(--asa-action-primary-bg);
}
.p-cat__item--fim { border-inline-start-color: var(--asa-neutral-300); }

/* Selo do periodo: e o dado que ordena o catalogo na cabeca de quem le. */
.p-cat__anos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: var(--asa-brand-year-badge);
  padding: var(--asa-space-2xs);
  border-radius: var(--asa-radius-md);
  background: var(--asa-surface-functional-sunken);
  font-variant-numeric: tabular-nums;
}
.p-cat__anos b {
  font-family: var(--asa-font-display);
  font-size: var(--asa-text-lg);
  line-height: 1;
  color: var(--asa-navy);
}
.p-cat__anos span { font-size: var(--asa-text-xs); color: var(--asa-layer-muted); }
.p-cat__item h3 { font-size: var(--asa-text-lg); margin-block-end: var(--asa-space-3xs); }
.p-cat__meta { font-size: var(--asa-text-sm); color: var(--asa-layer-muted); margin-block-end: var(--asa-space-2xs); }

/* ===========================================================================
   3. CRONOLOGIA — eixo horizontal com marcos alternados

   Referencia dada pelo cliente: eixo central com os marcos a alternar acima e
   abaixo. Sem fotografia por ano — so os factos. Os poios escalonados sairam:
   a altura crescente era bonita mas obrigava a ler de baixo para cima, e o eixo
   com alternancia le-se de esquerda para direita, que e como o tempo funciona.
   =========================================================================== */

.p-tl { margin-block-start: var(--asa-space-xl); }

/* Telefone: coluna simples com barra a esquerda. Um eixo horizontal em 375px
   obrigaria a deslocar para ler cada marco, o que e pior do que empilhar. */
.p-tl__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--asa-space-md);
  border-inline-start: var(--asa-border-thick) solid var(--asa-neutral-200);
  display: grid;
  gap: var(--asa-space-md);
}
.p-tl__item { position: relative; }
.p-tl__item::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--asa-space-md) * -1 - var(--asa-brand-timeline-dot-offset));
  inset-block-start: var(--asa-space-3xs);
  width: var(--asa-brand-timeline-dot);
  height: var(--asa-brand-timeline-dot);
  border-radius: var(--asa-radius-full);
  background: var(--asa-verde-luz);
  box-shadow: 0 0 0 3px var(--asa-surface-functional);
}
.p-tl__item--agora::before { background: var(--asa-action-primary-bg); }

.p-tl__ano {
  display: block;
  font-family: var(--asa-font-display);
  font-size: var(--asa-text-xl);
  line-height: 1;
  color: var(--asa-navy);
  font-variant-numeric: tabular-nums;
}
.p-tl__data {
  display: block;
  font-size: var(--asa-text-xs);
  letter-spacing: var(--asa-tracking-wide);
  text-transform: uppercase;
  color: var(--asa-layer-muted);
  margin-block: var(--asa-space-3xs);
}
.p-tl__texto { font-size: var(--asa-text-sm); }

/* Ecra largo: eixo horizontal, marcos alternados acima e abaixo. */
@media (min-width: 900px) {
  .p-tl__list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto 1fr;
    gap: 0 var(--asa-space-sm);
    padding: 0;
    border-inline-start: none;
    align-items: stretch;
  }
  /* O eixo. Em absoluto, NAO como item de grelha: com `grid-auto-flow: column`
     um ::before conta como item e consumia uma coluna, pelo que a linha cobria
     so parte da largura e o ultimo marco ficava sem eixo por baixo. */
  .p-tl__list { position: relative; }
  .p-tl__list::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    translate: 0 -50%;
    height: var(--asa-border-thick);
    background: linear-gradient(to right,
      var(--asa-neutral-200) 0%, var(--asa-verde-luz) 10%,
      var(--asa-verde-luz) 82%, var(--asa-action-primary-bg) 100%);
  }
  .p-tl__item { padding-inline: var(--asa-space-2xs); }
  .p-tl__item::before {
    inset-inline-start: 50%;
    translate: -50% 0;
  }
  /* Impares acima do eixo, pares abaixo. */
  .p-tl__item:nth-child(odd) {
    grid-row: 1;
    text-align: center;
    align-self: end;
    padding-block-end: var(--asa-space-md);
  }
  .p-tl__item:nth-child(odd)::before { inset-block-start: auto; inset-block-end: calc(var(--asa-brand-timeline-dot-offset) * -1); }
  .p-tl__item:nth-child(even) {
    grid-row: 3;
    text-align: center;
    align-self: start;
    padding-block-start: var(--asa-space-md);
  }
  .p-tl__item:nth-child(even)::before { inset-block-start: calc(var(--asa-brand-timeline-dot-offset) * -1); }
  /* Haste que liga o marco ao eixo — sem ela os marcos flutuam. */
  .p-tl__item::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    translate: -50% 0;
    width: var(--asa-border-hairline);
    height: var(--asa-space-md);
    background: var(--asa-neutral-300);
  }
  .p-tl__item:nth-child(odd)::after { inset-block-end: 0; }
  .p-tl__item:nth-child(even)::after { inset-block-start: 0; }
}

/* Mapa de expansao. Acompanha a cronologia porque conta a MESMA historia noutro
   eixo: a ASA comecou numa freguesia e chegou a Regiao inteira. */
.p-mapa {
  margin-block-start: var(--asa-space-xl);
  border-radius: var(--asa-radius-xl);
  overflow: hidden;
  box-shadow: var(--asa-shadow-raised);
}
.p-mapa { background: var(--asa-navy); }
.p-mapa img { display: block; width: 100%; height: auto; }
.p-mapa figcaption {
  padding: var(--asa-space-sm) var(--asa-space-md);
  background: var(--asa-navy);
  color: var(--asa-text-on-narrative-muted);
  font-size: var(--asa-text-sm);
}

/* 1. Nav: fica o logotipo, sai o texto. O nome da associação já está no
   `aria-label` da ligação e no `alt` da imagem, pelo que nada se perde para
   quem usa leitor de ecrã — e ganha-se presença de marca. */
.p-nav__brand img { height: var(--asa-brand-nav-logo-lg); }
@media (min-width: 768px) { .p-nav__brand img { height: var(--asa-brand-nav-logo-xl); } }

/* 3. O rótulo da cifra passa a poder levar uma qualificação em segunda linha
   (o ano do dado). Sem isto, «Famílias apoiadas desde 1999» competia com o
   número pelo espaço. */
.p-stats dt small {
  display: block;
  font-size: var(--asa-text-xs);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}

/* Retrato do presidente. Sem duotono: aqui o rosto tem valor de identificação e
   o tratamento tirar-lhe-ia legibilidade — o duotono serve o fundo do hero, não
   um retrato que se quer reconhecível. */
.p-retrato { margin: 0; }
.p-retrato img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--asa-radius-xl);
  box-shadow: var(--asa-shadow-raised);
}
.p-retrato figcaption {
  margin-block-start: var(--asa-space-xs);
  font-size: var(--asa-text-sm);
  color: var(--asa-layer-muted);
}

/* ------------------------------------------------- noticias e redes sociais - */

/* Lista de arquivo: a data é a coluna fixa, o título ocupa o resto. Em ecrã
   estreito passa a duas linhas — a data primeiro, pequena, porque num arquivo
   é ela que orienta. */
.p-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-news__row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr;
  gap: var(--asa-space-sm);
  align-items: baseline;
  padding-block: var(--asa-space-xs);
  border-block-end: var(--asa-border-hairline) solid var(--asa-field-border);
}
.p-news__row:last-child { border-block-end: none; }
.p-news__row time {
  font-size: var(--asa-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--asa-layer-muted, var(--asa-text-on-functional-muted));
}
/* O sublinhado herda a regra global de links (§foco/links): repeti-lo aqui
   criava uma segunda verdade para a mesma decisao. */
.p-news__row > a { font-weight: 600; }
@media (max-width: 40rem) {
  .p-news__row {
    grid-template-columns: 1fr;
    gap: var(--asa-space-3xs);
  }
}

/* Destaque na landing: o resumo entra numa terceira linha, e o título cresce. */
.p-news__row--destaque { grid-template-columns: minmax(0, 11rem) 1fr; }
.p-news__row--destaque > a { font-size: var(--asa-text-lg); }
.p-news__resumo {
  grid-column: 2;
  margin: 0;
  font-size: var(--asa-text-sm);
  color: var(--asa-layer-muted, var(--asa-text-on-functional-muted));
}
@media (max-width: 40rem) {
  .p-news__resumo { grid-column: 1; }
}

/* Ano. O número é o marco; a contagem é apoio. */
.p-news__ano {
  font-size: var(--asa-text-xl);
  font-variant-numeric: tabular-nums;
}
.p-news__ano + .p-muted { font-size: var(--asa-text-sm); }

/* Anos anteriores dobrados em <details>: nativo, sem JS, e evita despejar 119
   linhas de uma vez. O marcador roda porque a seta é o único sinal de estado. */
.p-news__fold {
  border-block-start: var(--asa-border-hairline) solid var(--asa-field-border);
  padding-block: var(--asa-space-xs);
}
.p-news__fold > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--asa-space-sm);
  padding-block: var(--asa-space-2xs);
  cursor: pointer;
  list-style: none;
}
.p-news__fold > summary::-webkit-details-marker { display: none; }
.p-news__fold > summary::after {
  content: "\203A";
  margin-inline-start: auto;
  font-size: var(--asa-text-xl);
  line-height: 1;
  color: var(--asa-action-primary-bg);
}
/* Rodar o mesmo glifo em vez de o trocar: `content` nao transita, `rotate` sim. */
.p-news__fold[open] > summary::after { rotate: 90deg; }
.p-news__fold[open] > summary { margin-block-end: var(--asa-space-2xs); }
@media (prefers-reduced-motion: no-preference) {
  .p-news__fold > summary::after { transition: rotate var(--asa-duration-fast) var(--asa-easing-standard); }
}

/* Redes. Ícone em SVG inline: zero pedidos, herda currentColor, escala com o
   texto. O nome fica escrito — um glifo sozinho não diz para onde leva. */
.p-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--asa-space-2xs);
}
.p-social a {
  display: inline-flex;
  align-items: center;
  gap: var(--asa-space-2xs);
  min-height: var(--asa-field-min-target);
}
.p-social__i {
  inline-size: var(--asa-icon-inline);
  block-size: var(--asa-icon-inline);
  flex: none;
}

/* ------------------------------------------- fotografia dos programas ------ */

/* Moldura. A cor do passe-partout vem da camada, não do ficheiro: numa banda
   clara é navy, numa banda navy é branca. Uma cor fixa desaparecia numa das
   duas — é o mesmo problema de contraste que já apareceu nos cartões. */
.p-narrative .p-proj__foto {
  --asa-layer-frame-bg: var(--asa-white);
  --asa-layer-frame-text: var(--asa-text-on-functional);
}

.p-proj__foto {
  margin: 0;
  background: var(--asa-layer-frame-bg);
  color: var(--asa-layer-frame-text);
  padding: var(--asa-space-2xs);
  /* A `sizes` da imagem promete 46rem. Se a figura crescesse para além disso, a
     promessa passava a mentira e o browser escolhia o candidato errado. */
  max-inline-size: var(--asa-measure-figure);
  border-radius: var(--asa-radius-lg);
  box-shadow: var(--asa-shadow-raised);
  overflow: hidden;
}
.p-proj__foto img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--asa-radius-md);
}
.p-proj__foto figcaption {
  padding: var(--asa-space-xs) var(--asa-space-2xs) var(--asa-space-3xs);
  font-size: var(--asa-text-sm);
  line-height: var(--asa-leading-snug);
}

/* =========================================================================== */
/* FEED DE NOTÍCIAS                                                            */
/* Modelo: o blog do anje.pt — cartão com imagem, data, título, resumo e um     */
/* «saber mais», com pesquisa e filtro na lateral. Adaptado num ponto: o        */
/* anje.pt filtra por categoria e a ASA não tem nenhuma (os 119 artigos estão   */
/* todos em `Uncategorized`), logo filtra-se por ano — a única dimensão real.   */
/* =========================================================================== */

.p-news__grid { display: grid; gap: var(--asa-space-xl); }
@media (min-width: 62rem) {
  .p-news__grid { grid-template-columns: minmax(0, 1fr) 16rem; align-items: start; }
  /* A lateral acompanha o scroll: com 119 publicações a pesquisa não pode
     ficar no topo, fora de alcance. */
  .p-news__lado { position: sticky; inset-block-start: var(--asa-space-xl); }
}

.p-news__feed { display: grid; gap: var(--asa-space-md); }

/* Cartão. Horizontal a partir de 48rem: com 18 cartões, a imagem a toda a
   largura (como no modelo) obrigava a uma página três vezes mais alta. */
.p-post {
  display: grid;
  gap: var(--asa-space-sm);
  padding-block-end: var(--asa-space-md);
  border-block-end: var(--asa-border-hairline) solid var(--asa-field-border);
}
@media (min-width: 48rem) {
  .p-post { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--asa-space-md); }
  .p-post--sem-imagem { grid-template-columns: 1fr; }
}
.p-post:last-of-type { border-block-end: none; }

.p-post__media {
  display: block;
  border-radius: var(--asa-radius-lg);
  overflow: hidden;
  background: var(--asa-layer-frame-bg);
  box-shadow: var(--asa-shadow-raised);
}
.p-post__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.p-post__corpo { display: grid; gap: var(--asa-space-2xs); align-content: start; }
.p-post__meta {
  margin: 0;
  font-size: var(--asa-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--asa-layer-muted, var(--asa-text-on-functional-muted));
}
.p-post__t { margin: 0; font-size: var(--asa-text-lg); }
.p-post__resumo { margin: 0; }
/* «Saber mais» não é uma segunda ligação: seria um destino repetido para quem
   navega por teclado. É a promessa visual do link do título. */
.p-post__mais {
  margin: 0;
  font-size: var(--asa-text-sm);
  font-weight: 600;
  color: var(--asa-action-link-on-functional);
}
@media (prefers-reduced-motion: no-preference) {
  .p-post__mais span { transition: translate var(--asa-duration-fast) var(--asa-easing-standard); }
  .p-post:hover .p-post__mais span { translate: var(--asa-space-3xs) 0; }
}

/* Lateral */
.p-news__lado { display: grid; gap: var(--asa-space-sm); align-content: start; }
.p-news__lado-t { margin: 0; font-size: var(--asa-text-base); }
.p-news__anos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--asa-space-2xs);
}
.p-chip--ano {
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  background: var(--asa-surface-functional-sunken);
  color: var(--asa-text-on-functional);
  min-height: var(--asa-field-min-target);
}
.p-chip--ano::before { content: none; }
.p-chip--ano:hover { background: var(--asa-glass-status-chip-bg); }

.p-news__mais { margin: 0; }
.p-news__vazio { margin: 0; }

/* `display: grid` num elemento com [hidden] ganha ao `display: none` da folha
   do browser — os 9 cartoes extra apareciam todos e o «mostrar mais» nao fazia
   nada visivel. Vale para qualquer componente do sitio que use display, por
   isso a regra e geral e nao só do cartao. */
[hidden] { display: none !important; }

/* --------------------------------------------- sedes, horário e assinatura - */

/* As três sedes no rodapé, e cada sede na página de contactos. */
.p-footer__sedes {
  list-style: none;
  margin: var(--asa-space-xs) 0 0;
  padding: 0;
  display: grid;
  gap: var(--asa-space-xs);
  font-size: var(--asa-text-sm);
  color: var(--asa-layer-muted, var(--asa-text-on-narrative-muted));
}
.p-footer__sedes b { color: var(--asa-text-on-narrative); font-weight: 600; }
.p-footer__horario { margin-block-start: var(--asa-space-xs); font-size: var(--asa-text-sm); }

/* Assinatura, separada do resto por uma regra: é metadado, não navegação. */
.p-footer__base {
  margin-block-start: var(--asa-space-xl);
  padding-block-start: var(--asa-space-sm);
  border-block-start: var(--asa-border-hairline) solid var(--asa-glass-nav-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--asa-space-2xs) var(--asa-space-md);
  justify-content: space-between;
  align-items: baseline;
}
.p-copy {
  margin: 0;
  font-size: var(--asa-text-sm);
  color: var(--asa-text-on-narrative-muted);
}

/* Cartão de sede. Grelha automática: com três sedes dá três colunas em ecrã
   largo e desce sozinha, sem breakpoint escrito à mão. */
.p-sedes {
  display: grid;
  gap: var(--asa-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.p-sede {
  padding: var(--asa-space-md);
  border: var(--asa-border-hairline) solid var(--asa-field-border);
  border-radius: var(--asa-radius-lg);
  background: var(--asa-surface-functional-sunken);
}
.p-sede h3 { margin: 0; }
.p-sede__progs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--asa-space-3xs);
}
/* Aqui o chip identifica o projeto, não um estado de convocatória: sem o ponto,
   que noutro contexto quer dizer «aberta». */
.p-sede__progs .p-chip::before { content: none; }
.p-sede .p-facts { font-size: var(--asa-text-sm); }

/* ===========================================================================
   V3 (2026-08) — pedidos do cliente
   =========================================================================== */

/* ---------------------------------------- botao de Candidatura na barra --- */
/* A Candidatura e a unica accao do sitio que leva a pessoa para fora das
   paginas informativas, e era o sexto item de texto de nove — indistinguivel
   dos outros. Passa a botao.

   O relevo faz-se com uma aresta dura em baixo (`0 2px 0`) e nao so com uma
   sombra difusa: e a aresta que le como espessura fisica. Ao carregar, a
   aresta encolhe e o botao desce 1px — o objecto afunda-se, que e o que o
   dedo espera. Sem isso o «3D» e so decoracao.

   Contraste medido: #171248 sobre #f2a93b = 8.76:1. Passa AA (4.5) e AAA (7). */
.p-nav__list a.p-nav__cta {
  background: var(--asa-action-primary-bg);
  color: var(--asa-action-primary-text);
  font-weight: 600;
  border-radius: var(--asa-radius-md);
  box-shadow: 0 2px 0 rgb(23 18 72 / 0.55), var(--asa-shadow-raised);
}
.p-nav__list a.p-nav__cta:hover {
  background: var(--asa-action-primary-bg-hover);
}
/* O foco por teclado tem de ser visivel SOBRE o ambar, nao so sobre o navy. */
.p-nav__list a.p-nav__cta:focus-visible {
  outline: var(--asa-border-focus) solid var(--asa-action-primary-text);
  outline-offset: 2px;
}
.p-nav__list a.p-nav__cta:active {
  box-shadow: 0 1px 0 rgb(23 18 72 / 0.55);
  transform: translateY(1px);
}
/* Se a pessoa pediu menos movimento, o botao continua a responder — muda a
   aresta, que e informacao, e nao a posicao, que e animacao. */
@media (prefers-reduced-motion: reduce) {
  .p-nav__list a.p-nav__cta:active { transform: none; }
}
/* Em coluna (menu por botao, abaixo de 1120px) o CTA ocupa a linha toda e
   centra-se: um botao a meio de uma lista vertical de links fica a flutuar.
   O limiar acompanha o da nav — se um mudar sem o outro, ha uma faixa de
   larguras em que o botao fica centrado dentro da barra horizontal. */
@media (max-width: 1119px) {
  .p-nav__list a.p-nav__cta { text-align: center; }
}

/* ------------------------------------------- fotografia da fachada ------- */
/* Mesmo tratamento da figura do mapa: cantos arredondados, fundo navy por
   baixo e legenda dentro da moldura. Duas figuras da mesma pagina com molduras
   diferentes leem-se como dois sitios diferentes. */
.p-fachada {
  margin: 0;
  border-radius: var(--asa-radius-xl);
  overflow: hidden;
  box-shadow: var(--asa-shadow-raised);
  background: var(--asa-navy);
}
.p-fachada img { display: block; width: 100%; height: auto; }
.p-fachada figcaption {
  padding: var(--asa-space-sm) var(--asa-space-md);
  background: var(--asa-navy);
  color: var(--asa-text-on-narrative-muted);
  font-size: var(--asa-text-sm);
  text-align: start;
}

/* --------------------------------------------- justificacao dos textos --- */
/* Pedido do cliente (2026-08): justificar o texto.

   `hyphens: auto` nao e um extra, e a metade que falta. Justificar sem partir
   palavras deixa o navegador com uma unica ferramenta — esticar os espacos — e
   numa coluna estreita isso abre «rios» de branco que atravessam o paragrafo de
   cima a baixo. Com a hifenizacao ligada, e com lang="pt-PT" declarado no
   <html> (esta), o motor parte pelas regras do portugues e os espacos voltam ao
   normal.

   `overflow-wrap: break-word` e a rede de seguranca: um endereco de correio
   longo numa coluna estreita transbordaria a caixa.

   A hifenizacao fica ligada em TODAS as larguras, mesmo onde nao se justifica:
   numa coluna estreita e ela que evita que uma palavra longa abra um buraco na
   margem direita.

   A justificacao, essa, so entra a partir de 40rem (640px). Abaixo disso a
   coluna leva cerca de 40 caracteres por linha, e a 4 ou 5 palavras por linha o
   navegador nao tem espacos suficientes para distribuir: o resultado medido, a
   395px, era «A  ASA  é  uma» esticado de margem a margem. Justificar ali nao e
   cumprir o pedido, e estraga-lo. Se a ASA preferir justificado tambem no
   telefone, muda-se `40rem` para `0`. */
main p,
main li,
main dd,
main blockquote {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
@media (min-width: 40rem) {
  main p,
  main li,
  main dd,
  main blockquote {
    text-align: justify;
  }
}

/* O lede nunca se justifica. E texto de tamanho grande numa coluna de medida
   normal: leva metade das palavras por linha do texto corrido, e por isso e o
   primeiro a abrir buracos. E, sendo a primeira coisa que se le na pagina, e
   tambem onde um defeito de composicao mais se nota. */
main .p-hero__lede {
  text-align: start;
}

/* O que NAO se justifica. Um texto de duas ou tres palavras justificado nao
   fica «alinhado dos dois lados»: fica com um buraco no meio. */
main .p-chip,
main .p-muted,
main .p-cat__meta,
main .p-post__meta,
main .p-post__resumo,
main .p-news__resumo,
main .p-band__note,
main .p-partners__note,
main .p-tl__texto,
main figcaption,
main .p-btn,
main .p-action-link,
main .p-ticker__item,
main .p-stats li,
main .p-news__vazio,
main table td,
main table th,
main label,
main .p-footer__sedes li {
  text-align: start;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Os titulos nunca se justificam: uma linha de titulo esticada e imediatamente
   legivel como defeito. */
main h1, main h2, main h3, main h4 {
  text-align: start;
  -webkit-hyphens: manual;
  hyphens: manual;
}