/* ==========================================================================
   KASCO — Kairos Strategic Consulting, Lda
   Design system + components. Mobile-first, no framework, no build step.
   ========================================================================== */

/* ------------------------------------------------------------ 1. Tokens --- */
:root {
  /* Brand */
  --navy-900: #071c2c;
  --navy-800: #102a43;
  --navy-700: #1b3d5c;
  --navy-600: #2a5580;
  --navy-050: #eaf0f7;

  --gold-600: #8d6a30;
  --gold-500: #a67c3d;
  --gold-400: #c39a55;
  --gold-100: #f5efe4;

  /* Neutrals */
  --ink: #101828;
  --ink-muted: #364152;
  --ink-soft: #667085;
  --line: #e6e9ed;
  --paper: #ffffff;
  --paper-alt: #faf9f6;

  --focus: #1b3d5c;

  /* Type */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.16vw, 1.0625rem);
  --step-1: clamp(1.1rem, 1.03rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.7rem, 1.42rem + 1.35vw, 2.5rem);
  --step-4: clamp(2.05rem, 1.55rem + 2.4vw, 3.5rem);

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --radius: 4px;
  --radius-lg: 8px;
  --shell: 1200px;
  --shadow-sm: 0 1px 2px rgba(7, 28, 44, 0.06), 0 1px 3px rgba(7, 28, 44, 0.08);
  --shadow-md: 0 8px 24px rgba(7, 28, 44, 0.1);
  --shadow-lg: 0 18px 48px rgba(7, 28, 44, 0.16);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------- 2. Reset --- */
*,
*::before,
*::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Icons sit inside runs of text, so they must stay inline. */
.icon { display: inline-block; vertical-align: -0.18em; flex: 0 0 auto; }
.icon-badge .icon, .area-card .icon-badge .icon { display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  color: var(--navy-800);
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-700); text-underline-offset: 3px; }
a:hover { color: var(--gold-600); }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 2px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

/* -------------------------------------------------------- 3. Utilities --- */
.shell { width: min(100% - 2rem, var(--shell)); margin-inline: auto; }
@media (min-width: 768px) { .shell { width: min(100% - 4rem, var(--shell)); } }

.section { padding-block: var(--sp-7); }
@media (min-width: 768px) { .section { padding-block: var(--sp-9); } }
.section--tight { padding-block: var(--sp-6); }
.section--alt { background: var(--paper-alt); }
.section--navy { background: var(--navy-800); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-800); color: #fff; padding: var(--sp-3) var(--sp-4);
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-600);
  margin-bottom: var(--sp-2);
}
.section--navy .eyebrow { color: var(--gold-400); }

.section-head { max-width: 62ch; margin-bottom: var(--sp-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-muted); font-size: var(--step-1); }
.section--navy .section-head p { color: rgba(255, 255, 255, 0.78); }

.rule-title {
  display: flex; align-items: center; gap: var(--sp-4);
  justify-content: center; margin-bottom: var(--sp-6);
}
.rule-title::before, .rule-title::after {
  content: ""; height: 1px; background: var(--line); flex: 1; max-width: 120px;
}
.section--navy .rule-title::before,
.section--navy .rule-title::after { background: rgba(255, 255, 255, 0.22); }

.lead { font-size: var(--step-1); color: var(--ink-muted); }
.muted { color: var(--ink-soft); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.text-center { text-align: center; }
.stack > * + * { margin-top: var(--sp-4); }

.grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------- 4. Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  /* 44px é a altura mínima de um alvo de toque: abaixo disso, um dedo acerta
     ao lado. A medida vem da altura, não do texto — «Ler mais» e «Lire la
     suite» têm de dar o mesmo alvo. */
  min-height: 44px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--gold { background: var(--gold-500); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-400); color: var(--navy-900); }

.btn--navy { background: var(--navy-800); color: #fff; }
.btn--navy:hover { background: var(--navy-700); color: #fff; }

.btn--ghost { border-color: currentColor; color: var(--navy-800); background: transparent; }
.btn--ghost:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

.btn--ghost-light { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--navy-800); border-color: #fff; }

.btn--sm { padding: 0.6rem 1.1rem; }
/* O botão pequeno encolhe o espaçamento, não o alvo. */
@media (max-width: 1023px) { .btn--sm { min-height: 44px; } }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: 0.5; pointer-events: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--gold-600);
}
.link-arrow svg { transition: transform 0.2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------- 5. Header --- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 72px;
}
.brand {
  display: flex; align-items: center; gap: var(--sp-3); text-decoration: none;
  /* O logótipo tem 34px de altura; a ligação que o envolve tem de dar 44px
     de alvo, senão o primeiro elemento do cabeçalho é o mais difícil de
     acertar em telemóvel. */
  min-height: 44px;
}
/* 34px em toque, 42px no desktop: dentro da faixa da identidade e sempre com a
   proporção do ficheiro, que é quadrado. `width: auto` garante que nunca
   distorce, mesmo que alguém carregue um logótipo de outro formato. */
.brand img { height: 34px; width: auto; flex: 0 0 auto; }
@media (min-width: 1024px) { .brand img { height: 42px; } }
.brand-name {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--navy-800); letter-spacing: 0.06em; line-height: 1;
}
@media (min-width: 1024px) { .brand-name { font-size: 1.4rem; } }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; background: none;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--navy-800); border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.primary-nav { display: none; }
.primary-nav.is-open {
  display: block; position: absolute; inset: 72px 0 auto; background: #fff;
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
  padding: var(--sp-4) 1rem var(--sp-6); max-height: calc(100vh - 72px);
  overflow-y: auto;
}
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list > li { border-bottom: 1px solid var(--line); }
.nav-list > li:last-child { border-bottom: 0; }
.nav-link {
  display: block; padding: var(--sp-3) 0; text-decoration: none;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-800);
}
.nav-link[aria-current="page"] { color: var(--gold-600); }
.nav-cta { margin-top: var(--sp-4); }

.mega-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; font: inherit; cursor: pointer; padding: var(--sp-3) 0;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-800);
}
.mega { display: none; padding-bottom: var(--sp-4); }
.mega.is-open { display: block; }
.mega-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.mega-item {
  display: block; padding: var(--sp-3); border-left: 3px solid var(--gold-500);
  background: var(--paper-alt); text-decoration: none; border-radius: 0 var(--radius) var(--radius) 0;
}
.mega-item strong { display: block; color: var(--navy-800); font-size: 0.95rem; }
.mega-item span { font-size: var(--step--1); color: var(--ink-muted); }
.mega-item:hover { background: var(--navy-050); }

/* --- Selector de idioma ---------------------------------------------------
   Em ecrãs estreitos é uma fila horizontal de quatro códigos, sempre visível:
   um menu dentro de outro menu é uma armadilha em toque. A partir dos 1024 px
   passa a lista suspensa, para não roubar largura à navegação. */
.lang-toggle {
  display: none; align-items: center; gap: 0.3rem; background: none; border: 0;
  font: inherit; cursor: pointer; color: var(--navy-800);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
}
.lang-menu { list-style: none; margin: 0; padding: var(--sp-3) 0; display: flex; gap: var(--sp-2); }
.lang-item {
  display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none;
  padding: 0.55rem 0.85rem; min-height: 44px; min-width: 44px; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--navy-800);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
}
.lang-item .lang-name { display: none; }
.lang-item:hover { border-color: var(--gold-500); }
.lang-item.is-current { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* O menu horizontal só a partir dos 1200px. A 1024 não cabia: nove entradas
   mais o selector de idioma mais o botão empurravam a barra para lá da
   viewport — 114px de excesso em português e 147px em espanhol, que tem as
   palavras mais longas. Entre os 1024 e os 1199 usa-se a gaveta, que é o
   comportamento certo para um menu deste tamanho. */
@media (min-width: 1200px) and (max-width: 1319px) {
  .header-inner { gap: var(--sp-3); }
  .nav-list { gap: 0.9rem; }
}

@media (min-width: 1200px) {
  .nav-toggle { display: none; }
  .primary-nav { display: block; }
  .primary-nav.is-open { position: static; box-shadow: none; padding: 0; border: 0; max-height: none; }
  .nav-list { display: flex; align-items: center; gap: 1.15rem; }
  .nav-list > li { border: 0; position: relative; }
  .nav-link, .mega-toggle {
    padding: 1.55rem 0; font-size: 0.68rem; letter-spacing: 0.1em; white-space: nowrap;
  }
  .nav-link { position: relative; }
  .nav-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 1.1rem; height: 2px;
    background: var(--gold-500); transform: scaleX(0); transform-origin: left;
    transition: transform 0.25s var(--ease);
  }
  .nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
  .mega-toggle { gap: 0.35rem; width: auto; }
  .mega {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    width: min(880px, 90vw); background: #fff; box-shadow: var(--shadow-lg);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: var(--sp-5); display: none;
  }
  .mega.is-open { display: block; }
  .mega-list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .nav-cta { margin: 0 0 0 var(--sp-3); }
  .nav-cta .btn { padding: 0.7rem 1rem; white-space: nowrap; }

  .nav-lang { margin-left: var(--sp-2); }
  .lang-item { border: 0; border-radius: var(--radius); padding: 0.6rem 0.7rem; }
  .lang-item .lang-name { display: inline; font-weight: 400; letter-spacing: 0; text-transform: none; }
  .lang-item .lang-code { color: var(--ink-soft); min-width: 1.8rem; }
  .lang-item:hover { background: var(--navy-050); }
  .lang-item.is-current .lang-code { color: rgba(255, 255, 255, 0.75); }

  /* A lista só se recolhe onde há JavaScript para a voltar a abrir. Sem ele o
     botão não aparece e as quatro ligações ficam à vista — são endereços reais
     e têm de continuar alcançáveis. `js` é a classe que o `<head>` acrescenta. */
  .js .lang-toggle { display: inline-flex; padding: 1.55rem 0; }
  .js .lang-menu {
    position: absolute; top: 100%; right: 0; flex-direction: column; gap: 0;
    min-width: 11rem; padding: var(--sp-2); background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .js .lang-menu:not(.is-open) { display: none; }
}

/* ------------------------------------------------------------ 6. Hero --- */
.hero {
  position: relative; background: var(--navy-800); color: #fff; overflow: hidden;
  isolation: isolate;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Opaco onde assenta o texto, quase transparente do lado oposto: a imagem
     lê-se, e o contraste do título mantém-se acima do exigido pela WCAG. */
  background: linear-gradient(105deg, rgba(7, 28, 44, 0.95) 0%,
    rgba(7, 28, 44, 0.82) 42%, rgba(16, 42, 67, 0.38) 100%);
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover;
}
/* O contentor mantém a largura da `.shell`, para que o hero comece exactamente
   na mesma vertical que o logótipo do cabeçalho. Limitar aqui a largura fazia o
   `margin-inline: auto` da `.shell` centrar o bloco todo, e o texto aparecia
   avançado em relação ao resto da página. A medida de leitura passa a ser dos
   filhos, que ficam alinhados à esquerda. */
.hero-inner { padding-block: var(--sp-7); }
.hero-inner > h1, .hero-inner > p { max-width: 46rem; }
@media (min-width: 900px) { .hero-inner { padding-block: var(--sp-8); } }
.hero h1 { color: #fff; font-size: var(--step-4); margin-bottom: var(--sp-5); }
.hero h1 .accent { color: var(--gold-400); display: block; }
.hero p { color: rgba(255, 255, 255, 0.85); font-size: var(--step-1); max-width: 40rem; }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6);
}
.hero--compact .hero-inner { padding-block: var(--sp-7); }
.hero--compact h1 { font-size: var(--step-3); }

.breadcrumbs { font-size: var(--step--1); padding-top: var(--sp-4); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumbs a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold-400); }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: rgba(255, 255, 255, 0.4); }
.breadcrumbs [aria-current] { color: var(--gold-400); }

/* ----------------------------------------------------------- 7. Cards --- */
.card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; gap: var(--sp-3); }
.card-media { aspect-ratio: 16 / 10; background: var(--navy-050); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card h3 { margin: 0; font-size: var(--step-1); }
.card p { color: var(--ink-muted); font-size: 0.95rem; margin: 0; }
.card .link-arrow { margin-top: auto; padding-top: var(--sp-2); }

.card-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--step--1);
  color: var(--ink-soft); align-items: center;
}
.card-meta > span, .card-meta > a { display: inline-flex; align-items: center; gap: 0.35rem; }
.tag {
  display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.28rem 0.7rem; border-radius: 999px;
  background: var(--navy-050); color: var(--navy-700);
}
/* #7a5b28 sobre #f5efe4 dá 5.47:1 — a etiqueta é pequena e negrito, e o
   dourado normal ficava a 4.33:1, abaixo do mínimo AA. */
.tag--gold { background: var(--gold-100); color: #7a5b28; }
.tag--open { background: #e5f4ec; color: #1f7a4d; }
.tag--closed { background: #f2f3f5; color: var(--ink-soft); }
/* Uma etiqueta solta num card em coluna não deve esticar à largura toda. */
.card-body > .tag, .member-role { align-self: flex-start; }

/* Area cards — the five arms */
.area-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: var(--radius-lg); text-decoration: none;
  background: var(--navy-800); color: #fff; min-height: 100%;
  border: 1px solid var(--navy-800);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.area-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: #fff; }
.area-card--gold { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.area-card--gold:hover { color: var(--navy-900); }
.area-card .icon-badge {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.12);
}
.area-card--gold .icon-badge { background: rgba(7, 28, 44, 0.12); }
.area-card h3 {
  color: inherit; font-family: var(--font-sans); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; margin: 0;
}
.area-card p { color: inherit; opacity: 0.86; font-size: 0.92rem; margin: 0; }
/* Sobre dourado, o texto tem de ficar a cheio: com opacidade cai para 3.1:1. */
.area-card--gold p, .area-card--gold .card-cta { opacity: 1; }
.area-card .card-cta {
  margin-top: auto; padding-top: var(--sp-3); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex;
  align-items: center; gap: 0.4rem;
}
@media (min-width: 640px) { .areas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .areas-grid { grid-template-columns: repeat(5, 1fr); } }

/* --------------------------------------------------------- 8. Process --- */
.process { display: grid; gap: var(--sp-5); counter-reset: step; }
.process-step { display: flex; gap: var(--sp-4); align-items: flex-start; }
.process-step .icon-badge {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy-800); color: #fff;
}
.process-step:nth-child(even) .icon-badge { background: var(--gold-500); color: var(--navy-900); }
.process-num {
  font-size: var(--step--1); font-weight: 700; color: var(--gold-600);
  letter-spacing: 0.1em;
}
.process-step h3 {
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; margin: 0.15rem 0 0.35rem;
}
.process-step p { font-size: 0.92rem; color: var(--ink-muted); margin: 0; }
@media (min-width: 900px) {
  .process { grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
  .process-step { flex-direction: column; align-items: center; text-align: center; position: relative; }
  .process-step:not(:last-child)::after {
    content: ""; position: absolute; top: 32px; left: calc(50% + 42px);
    width: calc(100% - 84px); height: 1px; background: var(--line);
  }
  .section--navy .process-step:not(:last-child)::after { background: rgba(255, 255, 255, 0.25); }
}

.section--navy .process-num { color: var(--gold-400); }
.section--navy .process-step h3 { color: #fff; }
.section--navy .process-step p { color: rgba(255, 255, 255, 0.75); }

/* Pillars */
.pillar { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.pillar .icon-badge { color: var(--gold-600); }
.pillar h3 {
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; margin: 0;
}
.pillar p { font-size: 0.9rem; color: var(--ink-muted); margin: 0; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(5, 1fr); } }

/* Values */
.value-item {
  display: flex; gap: var(--sp-4); padding: var(--sp-5);
  border-left: 3px solid var(--gold-500); background: var(--paper-alt);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.value-num {
  font-family: var(--font-display); font-size: 1.6rem; color: var(--gold-500);
  line-height: 1; flex: 0 0 auto;
}
.value-item h3 {
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 0.3rem;
}
.value-item p { margin: 0; font-size: 0.93rem; color: var(--ink-muted); }

/* Highlights strip */
.highlight-tile {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; background: var(--navy-800);
}
.highlight-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.highlight-tile:hover img { transform: scale(1.06); }
.highlight-tile figcaption {
  position: absolute; inset: auto 0 0; padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: linear-gradient(to top, rgba(7, 28, 44, 0.92), rgba(7, 28, 44, 0));
  color: #fff; font-size: 0.82rem; font-weight: 600; line-height: 1.3;
}
@media (min-width: 640px) { .highlights { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .highlights { grid-template-columns: repeat(6, 1fr); } }

/* Quote */
.quote-block {
  border-left: 4px solid var(--gold-500); padding-left: var(--sp-5);
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.4;
  color: var(--navy-800);
}
.section--navy .quote-block { color: #fff; }
.quote-block cite { display: block; font-family: var(--font-sans); font-size: var(--step--1); font-style: normal; color: var(--ink-soft); margin-top: var(--sp-3); }

/* Split panel (Academy / Research on the home page) */
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.panel h3 { color: var(--gold-600); font-size: var(--step-2); }
.panel--navy { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.panel--navy h3 { color: #fff; }
.panel--navy p { color: rgba(255, 255, 255, 0.8); }
.panel-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin: var(--sp-5) 0; }
@media (min-width: 520px) { .panel-items { grid-template-columns: repeat(4, 1fr); } }
.panel-item { text-align: center; font-size: 0.78rem; line-height: 1.35; }
.panel-item .icon-badge { margin: 0 auto var(--sp-2); color: var(--navy-700); }
.panel--navy .panel-item .icon-badge { color: var(--gold-400); }

/* ------------------------------------------------------------- 9. CTA --- */
.cta-band {
  background: var(--navy-800); color: #fff; border-radius: var(--radius-lg);
  padding: var(--sp-6); display: grid; gap: var(--sp-5); align-items: center;
}
@media (min-width: 900px) { .cta-band { grid-template-columns: 1fr auto; padding: var(--sp-7); } }
.cta-band h2 { color: #fff; margin: 0 0 var(--sp-2); font-size: var(--step-2); }
.cta-band p { color: rgba(255, 255, 255, 0.8); margin: 0; max-width: 52ch; }

/* --------------------------------------------------------- 10. Footer --- */
.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, 0.75); margin-top: var(--sp-8); }
.footer-top { display: grid; gap: var(--sp-6); padding-block: var(--sp-7); }
@media (min-width: 768px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; } }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-legal { color: rgba(255, 255, 255, 0.6); }
.footer-tagline { font-family: var(--font-display); font-style: italic; color: var(--gold-400); margin-top: var(--sp-3); }
.site-footer h2, .footer-heading {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  margin: 0 0 var(--sp-4);
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.footer-list a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 0.9rem; }
.footer-list a:hover { color: var(--gold-400); }
.footer-list--numbered a { display: grid; grid-template-columns: 1.9rem 1fr; align-items: baseline; }
.footer-num {
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--gold-500);
}
.footer-contact { font-size: 0.9rem; display: grid; gap: var(--sp-2); }
.footer-contact > div { display: flex; gap: var(--sp-2); align-items: flex-start; }
.footer-contact .icon { margin-top: 0.2em; color: var(--gold-400); }
.footer-contact a { color: rgba(255, 255, 255, 0.85); }

.newsletter-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.newsletter-form input[type="email"] {
  flex: 1 1 12rem; min-width: 0; padding: 0.75rem 0.9rem; border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06);
  color: #fff; font: inherit; font-size: 0.9rem;
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.5); }

.footer-consent {
  font-size: 0.78rem; line-height: 1.5; color: rgba(255, 255, 255, 0.55);
  margin-top: var(--sp-3);
}
.consent-note { font-size: 0.78rem; line-height: 1.5; color: var(--ink-soft); margin-top: var(--sp-3); }

.social-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  transition: background 0.2s var(--ease);
}
.social-row a:hover { background: var(--gold-500); color: var(--navy-900); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12); padding-block: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  justify-content: space-between; font-size: 0.82rem;
}
.footer-bottom a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-400); }
.footer-legal-links { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* ---------------------------------------------------------- 11. Forms --- */
.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--navy-800); }
.field .req { color: #b3261e; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.95rem; padding: 0.75rem 0.9rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: #fff; color: var(--ink); width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(27, 61, 92, 0.12); outline: none;
}
/* Erro: contorno vermelho e uma barra à esquerda. A cor sozinha não serve —
   cerca de 8% dos homens não distingue vermelho de cinzento com fiabilidade. */
.field--invalid input, .field--invalid select, .field--invalid textarea {
  border-color: #b3261e; box-shadow: inset 3px 0 0 #b3261e;
}
.field--invalid input:focus, .field--invalid select:focus, .field--invalid textarea:focus {
  box-shadow: inset 3px 0 0 #b3261e, 0 0 0 3px rgba(179, 38, 30, 0.15);
}
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: var(--paper-alt); color: var(--ink-soft); cursor: not-allowed;
}
.field .helptext { font-size: var(--step--1); color: var(--ink-soft); }
.field-error { color: #b3261e; font-size: var(--step--1); margin: 0; }
.field--check { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
.field--check input { width: auto; margin-top: 0.3rem; }
.field--check label { font-weight: 400; color: var(--ink-muted); }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.alert {
  padding: var(--sp-4); border-radius: var(--radius); border-left: 4px solid;
  margin-bottom: var(--sp-4); font-size: 0.95rem;
}
.alert--success { background: #e8f5ee; border-color: #1f7a4d; color: #14532d; }
.alert--error { background: #fdecea; border-color: #b3261e; color: #7f1d1d; }
.alert--info { background: var(--navy-050); border-color: var(--navy-700); color: var(--navy-800); }

/* Filter bar */
.filters {
  display: grid; gap: var(--sp-3); background: var(--paper-alt); padding: var(--sp-4);
  border-radius: var(--radius-lg); border: 1px solid var(--line); margin-bottom: var(--sp-6);
}
/* Flex em vez de colunas fixas: os filtros variam de página para página e uma
   grelha rígida empurrava os botões para fora do painel. */
@media (min-width: 768px) {
  .filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-4); }
  .filters .field { flex: 1 1 11rem; min-width: 0; }
  .filters .field--search { flex: 2 1 18rem; }
  .filters .field--action { flex: 0 0 auto; }
}
.filters .field label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------------------------------------------------- 12. Article body --- */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-6); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-5); }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 var(--sp-4); }
.prose li { margin-bottom: 0.4rem; }
.prose img { border-radius: var(--radius-lg); margin: var(--sp-5) 0; }
.prose blockquote {
  margin: var(--sp-5) 0; padding-left: var(--sp-5); border-left: 4px solid var(--gold-500);
  font-family: var(--font-display); font-size: var(--step-1); color: var(--navy-800);
}
.prose table { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; font-size: 0.92rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: var(--sp-3); text-align: left; }
.prose th { background: var(--paper-alt); }
.table-scroll { overflow-x: auto; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: 0.95rem; }
.checklist li::before { content: "✓"; color: var(--gold-600); font-weight: 700; flex: 0 0 auto; }
.checklist a { text-decoration: none; color: var(--navy-800); }
.checklist a:hover { color: var(--gold-600); text-decoration: underline; }

.definition-list { display: grid; gap: var(--sp-3); margin: 0; }
.definition-list > div {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
}
.definition-list dt { font-size: var(--step--1); color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.definition-list dd { margin: 0; font-weight: 600; text-align: right; color: var(--navy-800); }
/* Numa coluna estreita, o par empilha: o valor ganha a largura toda. */
.definition-list--stacked > div { display: block; }
.definition-list--stacked dt { margin-bottom: 0.15rem; }
.definition-list--stacked dd { text-align: left; }

/* Sticky sidebar */
.with-aside { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) { .with-aside { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-7); } }
.aside-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
@media (min-width: 1024px) { .aside-sticky { position: sticky; top: 96px; } }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-7); }
.pagination a, .pagination span {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 0.6rem;
  border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none;
  font-size: 0.9rem; color: var(--navy-800);
}
.pagination .is-current { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.pagination a:hover { border-color: var(--gold-500); color: var(--gold-600); }

/* Empty state */
.empty-state {
  text-align: center; padding: var(--sp-7) var(--sp-4); border: 1px dashed var(--line);
  border-radius: var(--radius-lg); color: var(--ink-soft); background: var(--paper-alt);
}

/* Reveal on scroll */
/* Only hide when JS is running: html.js is set by an inline script in <head>.
   Without JS (or if the script fails) every .reveal stays fully visible. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   13. Composições editoriais
   Camada aditiva: nada aqui redefine as classes anteriores. Cada composição
   existe porque uma página real precisa dela, e todas degradam para uma coluna
   única em ecrãs estreitos.
   ========================================================================== */

/* 13.1 Hero da página inicial ---------------------------------------------
   A imagem é fundo de largura total, não uma coluna ao lado do texto. Duas
   razões: é a composição do material impresso da KASCO, e a coluna anterior
   tinha `aspect-ratio: 4 / 5`, o que fazia a faixa azul crescer para lá dos
   700px de altura mal alguém carregasse uma imagem no painel.
   A medida de leitura vive aqui, no `.hero-copy`, e não no contentor: limitar
   o contentor fazia o `margin-inline: auto` da `.shell` centrar o bloco todo,
   e o título deixava de começar na vertical do logótipo.                    */
.hero-copy { max-width: 44rem; }
/* Um degrau abaixo do `--step-4` geral: com três linhas de título a faixa
   ficava alta demais, e a mancha de texto perdia o peso institucional. */
.hero--home h1 { font-size: clamp(2rem, 1.5rem + 1.9vw, 3rem); }

/* Altura com presença executiva mas com tecto. Os 80–90vh do brief davam 918px
   num portátil de 1080 e empurravam a primeira secção para fora do primeiro
   ecrã — o problema que corrigimos há dois dias. O `clamp` em `rem` impede
   também que um ecrã muito baixo esmague a mancha de texto. */
.hero--home { display: flex; flex-direction: column; min-height: clamp(30rem, 68vh, 44rem); }
.hero--home .hero-inner { flex: 1; display: flex; align-items: center; }

.hero-eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 0 0 var(--sp-4);
}

.hero-signature { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.hero-signature ul {
  /* `padding-inline: 0` não é decorativo: sem ele fica o recuo de 40px que o
     browser dá a qualquer `ul`, e a assinatura desalinha do resto da página. */
  list-style: none; margin: 0; padding-inline: 0; padding-block: var(--sp-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem var(--sp-4);
}
.hero-signature li {
  display: flex; align-items: center; gap: var(--sp-4);
  font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
/* O ponto separador é decoração: fica no CSS para os leitores de ecrã lerem
   cinco nomes e não «Advisory ponto Academy ponto». */
.hero-signature li:not(:last-child)::after { content: "·"; color: var(--gold-500); }

/* 13.1.b Manifesto ---------------------------------------------------------
   A pausa depois do hero. Só tipografia e espaço: nem card, nem ícone, nem
   fundo. O filete dourado é a única marca gráfica. */
/* Só respiração em cima: a secção seguinte traz o seu próprio `padding`, e
   somar os dois abria um vazio de doze rem entre a declaração e o conteúdo. */
.manifesto { padding-block: var(--sp-8) 0; }
@media (min-width: 768px) { .manifesto { padding-block: var(--sp-9) 0; } }
.manifesto-text {
  max-width: 34ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.35;
  color: var(--navy-800);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--gold-500);
}
@media (min-width: 768px) { .manifesto-text { max-width: 26ch; font-size: var(--step-4); } }

/* 13.1.c Faixa de afirmação ----------------------------------------------- */
.statement { text-align: center; }
.statement-text {
  margin: 0 auto;
  max-width: 30ch;
  border: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.3;
  color: #fff;
}
.statement-text::before,
.statement-text::after { content: ""; }

/* 13.1.d Academy + Research, 60 / 40 ---------------------------------------
   Dois blocos de peso diferente, não dois cards iguais: um sobre o papel
   branco, outro em navy. A assimetria é o que impede a página de parecer uma
   grelha de componentes. Abaixo dos 960 px empilham, pela ordem do HTML. */
.duo-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 960px) {
  .duo-grid { grid-template-columns: 58fr 42fr; gap: var(--sp-7); align-items: start; }
}
/* Sem `max-width`: a largura da própria coluna é a medida certa. Limitar o
   título a 20ch deixava-o em quatro linhas curtas com meia coluna vazia ao
   lado, e desequilibrava a altura dos dois blocos. */
.duo-main h2, .duo-side h2 { font-size: var(--step-2); margin-bottom: var(--sp-5); }

.duo-list {
  list-style: none; margin: 0 0 var(--sp-6); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.duo-list li {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.5rem 0.85rem; font-size: var(--step--1); color: var(--ink-soft);
}

.duo-side {
  background: var(--navy-800); color: #fff;
  padding: var(--sp-6); border-radius: var(--radius-lg);
}
@media (min-width: 960px) { .duo-side { padding: var(--sp-7); } }
.duo-side h2 { color: #fff; }
.eyebrow--light { color: var(--gold-400); }
.duo-feature {
  margin-bottom: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.duo-feature h3 { color: #fff; font-size: var(--step-1); margin: var(--sp-3) 0 var(--sp-2); }
.duo-feature h3 a { color: inherit; text-decoration: none; }
.duo-feature h3 a:hover { color: var(--gold-400); }
.duo-feature p { color: rgba(255, 255, 255, 0.78); font-size: var(--step--1); margin: 0; }

/* 13.1.e Princípios --------------------------------------------------------
   Cinco linhas numeradas. Sem ícones e sem caixas: o número e a regra
   horizontal fazem o trabalho que cinco cartões faziam pior. */
.principles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.principle {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--sp-4);
  padding-block: var(--sp-5); border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
  .principle { grid-template-columns: 6rem 1fr; gap: var(--sp-6); padding-block: var(--sp-6); }
}
.principle-num {
  font-family: var(--font-display); font-size: var(--step-2);
  color: var(--gold-500); line-height: 1;
}
.principle h3 { font-size: var(--step-1); margin: 0 0 var(--sp-2); }
.principle p { margin: 0; color: var(--ink-muted); max-width: 62ch; }

/* 13.1.f Páginas internas — composições editoriais -------------------------
   Todas partilham a mesma ideia: número, filete, espaço. É o que substitui as
   grelhas de cartões que faziam cada página parecer a mesma página. */

/* Abertura da página «Sobre nós». Reutiliza a tipografia do manifesto. */
.about-opening { padding-block: var(--sp-8) 0; }
@media (min-width: 768px) { .about-opening { padding-block: var(--sp-9) 0; } }

/* Visão e missão: duas declarações separadas por um filete, sem caixa. */
.creed { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) {
  .creed { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .creed-item + .creed-item {
    padding-left: var(--sp-8); border-left: 1px solid var(--line);
  }
}
.creed-text {
  font-family: var(--font-display); font-size: var(--step-2);
  line-height: 1.35; color: var(--navy-800); margin: 0;
}

/* Presença institucional, a fechar a página. */
.presence { display: grid; gap: var(--sp-5); align-items: end; }
@media (min-width: 768px) { .presence { grid-template-columns: 1fr auto; } }
.presence-cities { font-family: var(--font-display); font-size: var(--step-2); color: #fff; margin: 0 0 var(--sp-3); }
.presence-address { color: rgba(255, 255, 255, 0.78); margin: 0; }
.presence-action { margin: 0; }

/* Academy: faixa das áreas de formação. */
.academy-intro-grid { display: grid; gap: var(--sp-4); align-items: baseline; }
@media (min-width: 900px) { .academy-intro-grid { grid-template-columns: 16rem 1fr; gap: var(--sp-6); } }
.academy-lead { margin: 0; font-size: var(--step-1); color: var(--navy-800); }

/* Research: catálogo em lista. */
.pub-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pub-row {
  display: grid; gap: var(--sp-4); padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line); align-items: start;
}
@media (min-width: 768px) {
  .pub-row { grid-template-columns: 5.5rem 1fr auto; gap: var(--sp-5); padding-block: var(--sp-6); }
}
.pub-row:not(:has(.pub-cover)) { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .pub-row:not(:has(.pub-cover)) { grid-template-columns: 1fr auto; }
}
.pub-cover img { border: 1px solid var(--line); border-radius: var(--radius); }
.pub-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  align-items: center; font-size: var(--step--1); color: var(--ink-soft);
  margin-bottom: var(--sp-3);
}
.pub-body h3 { font-size: var(--step-1); margin: 0 0 var(--sp-2); }
.pub-body h3 a { color: inherit; text-decoration: none; }
.pub-body h3 a:hover { color: var(--gold-600); }
.pub-authors { font-style: italic; color: var(--ink-muted); margin: 0 0 var(--sp-2); }
.pub-abstract { color: var(--ink-muted); margin: 0; max-width: 68ch; }
.pub-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Serviços de cada braço, em linhas numeradas. */
.offer-list { list-style: none; margin: 0 0 var(--sp-6); padding: 0; border-top: 1px solid var(--line); }
.offer-row {
  display: grid; grid-template-columns: 3rem 1fr auto; gap: var(--sp-4);
  align-items: center; padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) { .offer-row { grid-template-columns: 4.5rem 1fr auto; gap: var(--sp-5); } }
.offer-num { font-family: var(--font-display); font-size: var(--step-1); color: var(--gold-500); }
.offer-row h3 { font-size: var(--step-1); margin: 0 0 var(--sp-1); }
.offer-row p { margin: 0; color: var(--ink-muted); }
.offer-row .icon { color: var(--gold-500); }
.offer-row:hover .offer-num, .offer-row:hover h3 a { color: var(--gold-600); }

/* 13.2 Faixa numerada dos braços ------------------------------------------ */
.arms-band { display: grid; gap: 0; border-top: 1px solid var(--line); }
.arm-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background 0.25s var(--ease), padding 0.25s var(--ease);
}
.arm-row:hover, .arm-row:focus-visible {
  background: var(--paper-alt);
  padding-inline: var(--sp-4);
  color: inherit;
}
.arm-num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--gold-500);
  font-variant-numeric: tabular-nums;
  min-width: 2.6ch;
}
.arm-row--accent .arm-num { color: var(--navy-700); }
.arm-name {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-800);
  margin: 0 0 0.25rem;
}
.arm-tagline { margin: 0; color: var(--ink-muted); font-size: 0.95rem; }
.arm-row .icon { color: var(--gold-600); transition: transform 0.25s var(--ease); }
.arm-row:hover .icon { transform: translateX(5px); }
@media (max-width: 599px) {
  .arm-row { grid-template-columns: auto 1fr; }
  .arm-row > .icon { display: none; }
}

/* 13.3 Linha do tempo ----------------------------------------------------- */
.timeline {
  position: relative; display: grid; gap: var(--sp-6);
  margin: 0; padding: 0 0 0 var(--sp-6); list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold-500), var(--line));
}
.timeline-item { position: relative; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-6) + 3px);
  top: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 4px var(--paper);
}
.section--alt .timeline-item::before { box-shadow: 0 0 0 4px var(--paper-alt); }
.timeline-item h3 {
  font-family: var(--font-sans);
  font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0 0 0.4rem;
}
.timeline-item p { margin: 0; color: var(--ink-muted); }

/* 13.4 Blocos editoriais alternados --------------------------------------- */
.editorial { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) {
  .editorial { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .editorial--wide-text { grid-template-columns: 1.25fr 1fr; }
  .editorial--reverse > :first-child { order: 2; }
}
.editorial-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--navy-050);
}
.editorial-figure img { width: 100%; height: 100%; object-fit: cover; }
.editorial-body > * + * { margin-top: var(--sp-4); }
/* Fora da grelha de duas colunas, o texto não deve atravessar a página inteira. */
:not(.editorial) > .editorial-body { max-width: 62ch; }

/* 13.5 Mosaico assimétrico de destaques ----------------------------------- */
@media (min-width: 700px) {
  /* Três colunas com o primeiro destaque a ocupar quatro células: seis
     destaques preenchem a grelha exactamente, e um número diferente continua
     a fluir sem buracos. */
  .mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; grid-auto-flow: dense; }
  .mosaic > :first-child { grid-column: span 2; grid-row: span 2; }
  .mosaic > :first-child.highlight-tile { aspect-ratio: auto; }
}

/* 13.6 Filosofia institucional -------------------------------------------- */
.philosophy {
  position: relative;
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--sp-4);
}
.philosophy::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 0.8;
  color: var(--gold-400);
  opacity: 0.55;
  margin-bottom: var(--sp-3);
}
.philosophy blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.32;
  color: #fff;
}
.philosophy p { margin-top: var(--sp-5); color: rgba(255, 255, 255, 0.78); }

/* 13.7 Síntese institucional (só dados reais) ----------------------------- */
.synthesis { display: grid; gap: 0; margin: 0; }
.synthesis > div {
  display: grid;
  gap: 0.2rem var(--sp-5);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) { .synthesis > div { grid-template-columns: 14rem 1fr; align-items: baseline; } }
.synthesis dt {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.synthesis dd { margin: 0; color: var(--navy-800); font-weight: 600; }

/* 13.8 Cartão de liderança em destaque ------------------------------------ */
.leader-card { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 768px) { .leader-card { grid-template-columns: 260px 1fr; gap: var(--sp-7); } }
.leader-portrait {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--navy-050);
  border: 1px solid var(--line);
}
.leader-portrait img { width: 100%; height: 100%; object-fit: cover; }
.leader-role {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
}

/* 13.9 Logística de um curso ---------------------------------------------- */
.logistics {
  display: grid; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0;
  list-style: none; font-size: 0.9rem;
}
@media (min-width: 480px) { .logistics { grid-template-columns: repeat(2, 1fr); } }
.logistics > li, .logistics > div {
  display: flex; gap: 0.5rem; align-items: flex-start; color: var(--ink-muted);
}
.logistics .icon { color: var(--gold-600); margin-top: 0.15em; }

/* 13.10 Artigo em destaque ------------------------------------------------ */
.feature-article { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) {
  .feature-article { grid-template-columns: 1.1fr 1fr; gap: var(--sp-7); align-items: center; }
}
.feature-article .card-media { aspect-ratio: 16 / 11; border-radius: var(--radius-lg); }
.feature-article h2 { font-size: var(--step-3); margin-bottom: var(--sp-3); }
.feature-article p { color: var(--ink-muted); font-size: var(--step-1); }

/* 13.11 Ritmo de leitura -------------------------------------------------- */
/* 68–75 caracteres por linha é onde a leitura contínua é mais confortável. */
.prose--article { max-width: 72ch; font-size: 1.075rem; line-height: 1.78; }
/* Páginas livres (Política de Privacidade, Termos): não têm barra
   lateral, e uma medida de leitura encostada à esquerda deixava meio
   ecrã vazio a 1440px. Aqui a coluna centra-se. */
.prose--page { margin-inline: auto; }
.prose--article > p + p { margin-top: var(--sp-4); }
.prose--article > h2 { margin-top: var(--sp-7); }

/* ==========================================================================
   14. Regras que substituem estilos inline
   Cada uma existe para retirar um style="" de um template. Nada de utilitários
   genéricos: só o que as páginas realmente usam.
   ========================================================================== */
.rule-title > h2, .rule-title > h3 { margin: 0; }
.shell--narrow { width: min(100% - 2rem, 64rem); }
.card h3 a, .card-title-link { text-decoration: none; color: inherit; }
.card h3 a:hover { color: var(--gold-600); }
.quote-mark { color: var(--gold-500); }
.testimonial, figure.highlight-tile { margin: 0; }
.grid--spaced { margin-top: var(--sp-6); }
.testimonial blockquote { margin: 0; font-size: 0.98rem; }
.testimonial figcaption { margin-top: auto; }
.testimonial figcaption strong { color: var(--navy-800); }
.partner-logo { max-height: 56px; margin-inline: auto; object-fit: contain; }
.partners-grid { align-items: center; }
.section-title-soft { color: var(--ink-soft); text-align: center; }
.cta-band .cta-action { margin: 0; }
.mega-footer { margin: var(--sp-4) 0 0; }
.mega-note {
  margin: var(--sp-4) 0 0; font-size: var(--step--1); color: var(--ink-soft);
  padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.mega-toggle.is-current { color: var(--gold-600); }
.footer-note { margin: 0; }
.footer-brand img { height: 44px; }
.aside-card > :first-child { margin-top: 0; }
.aside-card h3 { font-size: var(--step-1); margin: 0; }
.filters .btn { white-space: nowrap; }
/* Os botões de filtro herdam o alvo mínimo como qualquer outro. */
.filters .btn, .filters button { min-height: 44px; }

/* Declarações institucionais (visão, missão) */
.statement {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--navy-800);
  margin: 0;
}
.panel--navy .statement { color: #fff; }
.panel--navy .eyebrow { color: var(--gold-400); }

/* Fichas de equipa */
.card-media--square { aspect-ratio: 1 / 1; }
.member-bio { font-size: 0.93rem; color: var(--ink-muted); }
.card-meta--foot { margin-top: auto; }
.team-title { margin-top: var(--sp-7); }
.team-card h3 { font-size: 1rem; }

/* Listagens */
.empty-state--full { grid-column: 1 / -1; }
.card-media--cover { aspect-ratio: 3 / 4; }
.card-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); align-items: center; }
.tag-row .tag { text-decoration: none; }
.tag-row .tag:hover { background: var(--gold-100); color: var(--gold-600); }
.tag-row-label { font-size: 0.8rem; color: var(--ink-soft); }
.result-count { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--sp-4); }

/* Artigo: barra de meta, partilha e newsletter clara na coluna lateral */
.article-meta { margin-bottom: var(--sp-5); }
.share-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.newsletter-form--light { margin-top: 0; }
.newsletter-form--light input[type="email"] {
  background: #fff; border-color: var(--line); color: var(--ink);
}
.newsletter-form--light input::placeholder { color: var(--ink-soft); }
/* Páginas de mensagem (404, 500, obrigado) */
.section--message { padding-block: var(--sp-9); }
.measure-center { width: min(100% - 2rem, 44rem); margin-inline: auto; text-align: center; }
.hero-actions--center { justify-content: center; }
.status-icon { color: var(--gold-500); }
.measure-center h1 { margin-top: var(--sp-4); }

/* Contactos */
.map-embed { width: 100%; height: 220px; border: 0; border-radius: var(--radius); }
.contact-list { font-size: 0.92rem; color: var(--ink-muted); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--navy-800); }
.faq-answer { margin-top: var(--sp-3); color: var(--ink-muted); }
.section-actions { margin-top: var(--sp-5); }
.site-footer .footer-heading--spaced { margin-top: var(--sp-6); }
.footer-note-sm { font-size: 0.9rem; }
.aside-cover { border-radius: var(--radius); }
.aside-heading {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 var(--sp-3);
}
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.link-list a { color: var(--navy-700); text-decoration: none; font-size: 0.92rem; }
.link-list a:hover { color: var(--gold-600); text-decoration: underline; }
.icon-gold { color: var(--gold-600); }
.subsection-title { margin-top: var(--sp-7); }
.hero .eyebrow, .page-hero .eyebrow { color: var(--gold-400); }

.feature-article--framed {
  padding-bottom: var(--sp-7);
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--line);
}

/* Print */
@media print {
  .site-header, .site-footer, .cta-band, .btn { display: none !important; }
  body { color: #000; }
}