/* ═══════════════════════════════════════════════════
   Clínica Reviver — desktop (canvas Figma 1440px)
   Fonte da verdade: Figma "Home" (node 1:161)
   ═══════════════════════════════════════════════════ */

:root {
  /* Paleta */
  --navy:       #1B4558;
  --sky:        #6DBDE0;
  --steel:      #2B6D8A;
  --ice:        #DDEDF6;   /* fundo da secção Equipa */
  --ice-deep:   #CFE4F0;   /* painel do manifesto */
  --white:      #FFFFFF;
  --line:       #E3EDF3;
  --muted:      #5B7B8C;   /* era #8FA9B6 — 2.47:1 sobre branco, falhava AA */

  /* O --sky continua a ser a cor de marca para preenchimentos, bordos e
     ícones. Para texto sobre fundo claro usa-se a variante escura: o azul
     original dá 2.10:1, muito abaixo dos 4.5:1 exigidos. */
  --sky-text:   #237FA7;

  /* Métricas do design */
  --canvas:     1440px;
  --gutter:     96px;
  --content:    1248px;    /* 1440 - 2×96 */
  --radius-card: 8px;
  --radius-btn:  5px;
  --radius-hero: 24px;   /* pontas de baixo do hero e do cabeçalho interior */
  --header-top:  40px;   /* distância do header ao topo (Figma: 48px) */
  --header-h:    69px;   /* altura do header — usada pelo pagehead em mobile */

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;          /* âncoras do menu sem salto */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* as âncoras não encostam ao topo do ecrã */
#servicos, #espaco, #equipa, #contactos, #lista, #topo, #conteudo { scroll-margin-top: 28px; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: none; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure, address { margin: 0; }
address { font-style: normal; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Canvas fixo — desktop only, conforme decidido */
.page {
  width: 100%;
  max-width: var(--canvas);
  margin-inline: auto;
  overflow-x: clip;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

:where(a, button):focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Placeholder para assets ainda não exportados do Figma */
.is-missing {
  background: repeating-linear-gradient(135deg, #E8F2F8 0 10px, #DCEAF3 10px 20px);
  border-radius: 6px;
}
.is-missing::after {
  content: '';
  display: block;
  width: 100%; height: 100%;
}


/* ═══════════════ BOTÕES ═══════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease;
}

.btn--primary {
  width: 132.69px;
  height: 39.47px;
  background: var(--sky);
  border: 1px solid var(--sky);
  /* rótulo a navy, não branco: branco sobre este azul dá 2.10:1 e
     falha AA mesmo para texto grande. Navy sobre o mesmo azul dá 4.91:1. */
  color: var(--navy);
}
.btn--primary:hover  { background: #8ACDEA; border-color: #8ACDEA; }
.btn--primary:active { background: #5AAFD6; border-color: #5AAFD6; }


/* ═══════════════ HERO ═══════════════ */

.hero {
  position: relative;
  min-height: 726.07px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) 96px;    /* 726 - 630 de conteúdo = 96 */
  overflow: hidden;
  /* `overflow: hidden` já corta o fundo, os pontos e o halo pelo raio */
  border-bottom-left-radius: var(--radius-hero);
  border-bottom-right-radius: var(--radius-hero);
}

/* ── Fundo do hero, à maneira da Cloudflare ────────────────────────
   Campo escuro sólido + textura de pontos. A única luz é o halo do cursor.
   100% CSS: sem imagem, sem vídeo, ~0 KB.
   ------------------------------------------------------------------ */

.hero__bg {
  /* Actualizadas pelo JS: posição do cursor e intensidade do halo. */
  --mx: 50%;
  --my: 55%;
  --mo: 0;

  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;        /* contém o `screen` do halo ao hero */
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #1F5069 0%, transparent 70%),
    linear-gradient(to bottom, #143848 0%, var(--navy) 58%, #18404F 100%);
}

/* Sem luz fixa: o hero fica escuro e uniforme, e a única iluminação
   é o halo que segue o cursor (.hero__cursor, mais abaixo). */

/* Grelha de pontos fixa e discreta: dá textura ao azul, sem reagir a nada. */
.hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, .9) .9px, transparent 1px);
  background-size: 8px 8px;
  mix-blend-mode: overlay;
  opacity: .5;
}

/* Halo que segue o cursor — a única reacção do hero.
   `screen` só clareia, por isso nunca suja o azul; largo e discreto. */
.hero__cursor {
  position: absolute;
  inset: 0;
  opacity: var(--mo);
  mix-blend-mode: screen;
  background: radial-gradient(
    circle 560px at var(--mx) var(--my),
    rgba(126, 194, 228, .20) 0%,
    rgba(126, 194, 228, .08) 42%,
    rgba(126, 194, 228, 0)   74%
  );
}

/* Escurecimento no topo, para o header e o h1 respirarem. */
.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(12, 39, 51, .55) 0%, rgba(12, 39, 51, 0) 38%),
    radial-gradient(ellipse 75% 55% at 50% 42%, rgba(12, 39, 51, .28) 0%, transparent 72%);
}

/* Fotografia opcional por cima do fundo gerado. */
.hero__photo {
  position: absolute;
  left: 0;
  top: -33.32%;
  width: 100%;
  height: 198.33%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: .55;
}

/* — Header sobreposto — */
.header {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: var(--header-top);
  z-index: 5;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 16px;
  border-radius: 10px;
  background: rgba(27, 69, 88, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.header__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 32px;
}
.header__logo-svg {
  width: 146px;
  height: 32px;
  color: var(--white);        /* o desenho usa currentColor */
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.27;
  color: var(--white);
  white-space: nowrap;
}
.header__nav a { transition: color .18s ease; }
.header__nav a:hover { color: var(--sky); }

.header__cta { flex: 0 0 auto; }

/* — Conteúdo do hero — */
.hero__content { position: relative; z-index: 2; }

.pill {
  /* inline-block e não inline-flex: em flex containers o espaço entre o
     <strong> e o texto seguinte é descartado. */
  display: inline-block;
  height: 33px;
  padding: 0 18px;
  line-height: 33px;
  border-radius: 16.3px;
  background: var(--white);
  font-size: 12px;
  color: var(--navy);
  white-space: nowrap;
}
.pill strong { font-weight: 600; color: var(--sky-text); }


.hero__title {
  margin-top: 32px;      /* 436 - 371 - 33 */
  width: 514px;
  font-size: 64px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--white);
}

.hero__sub {
  margin-top: 31px;      /* 608 - 436 - 141 */
  width: 623.17px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--white);
}


/* ═══════════════ BLOCO DE INTRODUÇÃO (partilhado) ═══════════════ */

.section-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--sky);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.27;
  color: var(--sky-text);
  white-space: nowrap;
}

.section-title {
  width: 514px;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.27;
  color: var(--navy);
  text-wrap: balance;
}

.section-lead {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--steel);
  text-wrap: pretty;
}


/* ═══════════════ SERVIÇOS ═══════════════ */

/* Altura já não é fixa: o número de serviços passou de 12 para 27 e a grelha
   muda com o filtro. Mantidos os espaçamentos verticais do Figma. */
.services {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px var(--gutter) 64px;
  background: var(--white);
}

.services .section-intro { width: 612px; }


/* ═══════════════ BENTO GRID (homepage) ═══════════════
   Intro a duas cores e tiles de larguras alternadas, ao estilo Stripe.
   ═════════════════════════════════════════════════════ */

/* mesmo sobretítulo sublinhado das secções Serviços e Equipa do Figma,
   mas alinhado à esquerda, a acompanhar a intro */
.bento-eyebrow {
  align-self: flex-start;
  margin-bottom: 26px;
}

.bento-intro {
  align-self: flex-start;
  width: 760px;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.28;
  color: var(--muted);
  text-wrap: pretty;
}
.bento-intro strong {
  font-weight: 500;
  color: var(--navy);
}

.bento {
  margin-top: 56px;
  width: var(--content);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

/* Larguras alternadas: 7/5 · 7/5 · 12 */
.bento > .tile { min-height: 372px; }
.bento > .tile:nth-child(1) { grid-column: span 7; }
.bento > .tile:nth-child(2) { grid-column: span 5; }
.bento > .tile:nth-child(3) { grid-column: span 7; }
.bento > .tile:nth-child(4) { grid-column: span 5; }
.bento > .tile:nth-child(5) { grid-column: span 12; min-height: 306px; }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tile:hover {
  border-color: #C3DEEC;
  box-shadow: 0 14px 40px rgba(27, 69, 88, .10);
  transform: translateY(-3px);
}

.tile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 32px 24px;
}

.tile__title {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.24;
  color: var(--navy);
  letter-spacing: -.01em;
  text-wrap: balance;
}

.tile__meta {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

.tile__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--steel);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tile__icon svg { width: 14px; height: 14px; }
.tile:hover .tile__icon { background: var(--sky); border-color: var(--sky); color: var(--navy); }


/* ── Painel de arte: sangra até aos bordos do card, como no Stripe ──
   Gradiente-base muito claro; a luz que segue o cursor vem do ::after,
   por trás do conteúdo. --tx/--ty/--to são escritas pelo JS.          */
.art {
  --tx: 50%;
  --ty: 50%;
  --to: 0;

  position: relative;
  flex: 1;
  overflow: hidden;
  isolation: isolate;        /* contém o `screen` do ::after a este painel */
  padding: 26px 32px 0;
  background:
    radial-gradient(ellipse 70% 60% at 18% 4%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(162deg, #FBFDFE 0%, #F3F9FC 46%, #E9F4FA 100%);
  border-top: 1px solid var(--line);
}

/* Foco de luz que acompanha o rato.
   `screen` só clareia — nunca escurece — por isso lê-se como luz a cair
   na superfície e não como uma mancha de cor. */
.art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle 380px at var(--tx) var(--ty),
    rgba(255, 255, 255, .55) 0%,
    rgba(168, 216, 242, .34) 32%,
    rgba(168, 216, 242, .10) 52%,
    rgba(168, 216, 242, 0)   72%
  );
  opacity: var(--to);
  transition: opacity .35s ease;
}

/* conteúdo por cima da luz */
.art > * { position: relative; z-index: 1; }

/* chips soltos, cortados em baixo pelo limite do card */
.art__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.art__chips span {
  padding: 8px 15px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 2px 6px rgba(27, 69, 88, .06);
  font-size: 13px;
  line-height: 1.3;
  color: var(--steel);
  transition: background-color .2s ease, color .2s ease;
}
.tile:hover .art__chips span { background: #fff; color: var(--navy); }

/* "folha" branca a emergir do fundo, à maneira dos mockups do Stripe */
.art__sheet {
  padding: 6px 20px;
  border-radius: 10px 10px 0 0;
  background: var(--white);
  box-shadow: 0 -1px 0 rgba(27, 69, 88, .06), 0 8px 26px rgba(27, 69, 88, .10);
}
.art__row {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--navy);
}
.art__row:last-child { border-bottom: 0; }

.art__panels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.art__panels span {
  padding: 14px 16px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 2px 8px rgba(27, 69, 88, .06);
  font-size: 13px;
  line-height: 1.3;
  color: var(--steel);
}

.bento-all {
  margin-top: 32px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 6px;
  border: 1px solid #CFE0E9;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  transition: border-color .18s ease, color .18s ease, gap .18s ease;
}
.bento-all svg { width: 17px; height: 17px; }
.bento-all:hover { border-color: var(--sky); color: var(--sky); gap: 13px; }


/* ═══════════════ CABEÇALHO DE PÁGINA INTERIOR ═══════════════ */

.pagehead {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: flex-end;     /* texto assente em baixo, como no Figma */
  overflow: hidden;
  /* o header sobrepõe-se ao topo: reserva-se-lhe o espaço para que um
     título de três linhas faça crescer a secção em vez de lhe passar por baixo */
  padding: calc(var(--header-top) + var(--header-h) + 40px) 0 84px;
  border-bottom-left-radius: var(--radius-hero);
  border-bottom-right-radius: var(--radius-hero);
}

.pagehead__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--gutter);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: rgba(255, 255, 255, .68);
}
.crumbs a { transition: color .18s ease; }
.crumbs a:hover { color: var(--sky); }

.pagehead__title {
  margin-top: 16px;
  font-size: 52px;
  font-weight: 500;
  line-height: 1.12;
  color: var(--white);
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 760px;
}

.pagehead__sub {
  margin-top: 18px;
  max-width: 660px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
}

/* Cabeçalho curto, para páginas de texto. */
.pagehead--short { min-height: 420px; }


/* ═══════════════ PÁGINAS LEGAIS ═══════════════ */

.legal {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 72px;
  width: var(--content);
  margin: 88px auto 112px;
  align-items: start;
}
.legal--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

/* Índice fixo enquanto se percorre o texto */
.legal__nav {
  position: sticky;
  top: 40px;
  padding: 24px 26px;
  border-radius: 12px;
  background: #F7FBFD;
  border: 1px solid var(--line);
}
.legal__nav-t {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.legal__nav ol {
  list-style: none;
  counter-reset: n;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.legal__nav li { counter-increment: n; }
.legal__nav a {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--steel);
  transition: color .16s ease;
}
.legal__nav a::before {
  content: counter(n) '.';
  display: inline-block;
  width: 20px;
  color: #A9C3D1;
}
.legal__nav a:hover { color: var(--sky); }

.legal__body { max-width: 760px; }
.legal__body section + section,
.legal__body section + blockquote,
.legal__body blockquote + section { margin-top: 44px; }

.legal__body h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 40px;
}
.legal__body h3 {
  margin-top: 28px;
  font-size: 17px;
  font-weight: 500;
  color: var(--navy);
}
.legal__body p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--steel);
}
.legal__body strong { font-weight: 500; color: var(--navy); }
.legal__body a:not(.btn-lg) {
  color: var(--sky-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal__body a:not(.btn-lg):hover { color: var(--steel); }

.legal__list {
  margin-top: 20px;
  list-style: none;
  counter-reset: d;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.legal__list li {
  counter-increment: d;
  position: relative;
  padding-left: 42px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--steel);
}
.legal__list li::before {
  content: counter(d);
  position: absolute;
  left: 0;
  top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--steel);
  font-size: 13px;
  font-weight: 600;
}

.legal__cta {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
}


/* ═══════════════ ARTIGOS ═══════════════
   Reaproveitam o corpo das páginas legais (.legal__body); só acrescentam
   a linha de meta, o parágrafo de abertura, as listas com marca e a nota
   final. Não há listagem: chega-se a estas páginas pelo motor de busca. */

.artigo__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.artigo__meta time { color: var(--steel); font-weight: 500; }
.artigo__meta [aria-hidden] { color: #C3DEEC; }

.artigo__lead {
  margin-top: 0;
  font-size: 19px;
  line-height: 1.65;
  color: var(--navy);
  text-wrap: pretty;
}
.artigo .legal__body,
.artigo > section:first-of-type { margin-top: 0; }
.artigo__lead + section { margin-top: 44px; }

/* listas com marca redonda, a condizer com os vistos dos serviços */
.artigo__ul {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.artigo__ul li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--steel);
}
.artigo__ul li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky);
}

/* as 25 áreas de intervenção: número em círculo + sublista */
.artigo__areas > li { padding-top: 2px; }
.artigo__areas > li > strong {
  display: block;
  font-size: 17px;
  font-weight: 500;
  color: var(--navy);
}
.artigo__areas .artigo__ul { margin-top: 10px; gap: 7px; }
.artigo__areas .artigo__ul li { font-size: 15px; }
.artigo__areas .artigo__ul li::before { top: 10px; width: 5px; height: 5px; background: #A9C3D1; }

.artigo__nota {
  margin-top: 48px;
  padding: 18px 22px;
  border-radius: var(--radius-card);
  background: #F6FBFD;
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}


/* A página de serviços começa direto nas tabs. */
.services--page { padding-top: 88px; }
.cta--flat { margin-bottom: 96px; }

/* — Barra de especialidades — */
.tabs {
  position: relative;
  margin-top: 120px;
  width: var(--content);
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.tabs__item {
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color .18s ease;
}
.tabs__item:hover { color: var(--steel); }
.tabs__item.is-active { color: var(--navy); font-weight: 600; }
.tabs__n {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
  letter-spacing: 0;
  color: #B6CBD7;
}
.tabs__item.is-active .tabs__n { color: var(--sky-text); }

.tabs__picker { display: none; }

.tabs__ink {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 87.23px;
  background: var(--navy);
  transition: transform .25s ease, width .25s ease;
}

/* — Grelha de serviços — */
.svc-grid {
  margin-top: 48px;
  width: var(--content);
  display: grid;
  grid-template-columns: repeat(4, 294px);
  grid-auto-rows: 294px;
  gap: 24px;
}

/* Cards quadrados, sem imagem, clicáveis. */
.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32px;
  text-align: left;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--white);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

/* Lavagem de cor que sobe do fundo ao passar o rato. */
.svc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(109, 189, 224, .13) 0%, rgba(109, 189, 224, 0) 62%);
  opacity: 0;
  transition: opacity .22s ease;
}

.svc:hover,
.svc:focus-visible {
  border-color: var(--sky);
  box-shadow: 0 10px 30px rgba(27, 69, 88, .11);
  transform: translateY(-3px);
}
.svc:hover::before,
.svc:focus-visible::before { opacity: 1; }
.svc:active { transform: translateY(-1px); }

.svc__group {
  position: relative;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #A9C3D1;
}

.svc__title {
  position: relative;
  margin-top: auto;
  padding-top: 16px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--navy);
  text-wrap: balance;
}

.svc__more {
  position: relative;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--sky-text);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}
.svc__more svg {
  width: 16px;
  height: 16px;
  transition: transform .22s ease;
}
.svc:hover .svc__more,
.svc:focus-visible .svc__more { opacity: 1; transform: translateY(0); }
.svc:hover .svc__more svg { transform: translateX(4px); }

/* Todos os cards têm o mesmo aspeto, tenham ou não conteúdo escrito. */


/* ═══════════════ POP-UP DE SERVIÇO ═══════════════ */

.modal {
  width: 860px;
  max-width: calc(100vw - 64px);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 30px 80px rgba(12, 39, 51, .28);
  overflow: hidden;
  /* cabeçalho e rodapé fixos, corpo a rolar */
  display: flex;
  flex-direction: column;
}
.modal:not([open]) { display: none; }

.modal::backdrop {
  background: rgba(12, 39, 51, .58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal[open] { animation: modal-in .24s cubic-bezier(.22, .61, .36, 1); }
.modal[open]::backdrop { animation: fade-in .24s ease; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* — Cabeçalho — */
.modal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 36px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.modal__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sky-text);
}

.modal__title {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--navy);
  text-wrap: balance;
}

.modal__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--navy);
  transition: background-color .18s ease, transform .18s ease;
}
.modal__close:hover { background: var(--ice-deep); transform: rotate(90deg); }
.modal__close svg { width: 18px; height: 18px; }

/* — Corpo — */
.modal__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #C9DDE8 transparent;
}
.modal__scroll::-webkit-scrollbar { width: 10px; }
.modal__scroll::-webkit-scrollbar-thumb {
  background: #C9DDE8;
  border: 3px solid var(--white);
  border-radius: 6px;
}

.modal__body { padding: 28px 36px 36px; }

.modal__lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--steel);
}

.blk { margin-top: 30px; }

.blk__t {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.blk__p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel);
}

/* listas com visto */
.ticks {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--navy);
}
.ticks svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; color: var(--sky); }

/* passos numerados */
.steps { margin-top: 16px; counter-reset: p; display: flex; flex-direction: column; gap: 16px; }
.steps li {
  counter-increment: p;
  position: relative;
  padding-left: 42px;
  font-size: 15px;
  line-height: 1.55;
}
.steps li::before {
  content: counter(p);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--steel);
  font-size: 13px;
  font-weight: 600;
}
.steps strong { display: block; font-weight: 500; color: var(--navy); }
.steps span   { display: block; margin-top: 3px; color: var(--steel); }

/* lista de definições: termo + explicação */
.defs {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.defs dt {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
}
.defs dd {
  margin: 3px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--ice-deep);
  font-size: 15px;
  line-height: 1.55;
  color: var(--steel);
}

/* painéis (ex.: painéis analíticos) */
.panels {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.panel {
  padding: 16px 18px;
  border-radius: var(--radius-card);
  background: #F6FBFD;
  border: 1px solid var(--line);
}
.panel h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.panel ul { display: flex; flex-wrap: wrap; gap: 5px; }
.panel li {
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid #E1EEF5;
  font-size: 12px;
  line-height: 1.35;
  color: var(--steel);
}

/* FAQ em acordeão */
.faq { margin-top: 8px; }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  transition: color .16s ease;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary:hover { color: var(--sky); }
.faq__i summary svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  color: var(--sky);
  transition: transform .2s ease;
}
.faq__i[open] summary svg { transform: rotate(180deg); }
.faq__i p {
  padding: 0 34px 16px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel);
}

.quote {
  margin-top: 30px;
  padding: 20px 24px;
  border-left: 3px solid var(--sky);
  background: #F6FBFD;
  font-size: 17px;
  line-height: 1.5;
  color: var(--navy);
}

.todo {
  padding: 18px 20px;
  border-radius: var(--radius-card);
  background: #FFF9EC;
  border: 1px solid #F2E2BE;
  font-size: 15px;
  line-height: 1.55;
  color: #7A6222;
}
.todo strong { font-weight: 600; }

/* — Galeria — */
.modal__gallery { background: var(--ice); }

/* — Pop-up só de fotografias: o palco ocupa o espaço todo — */
.modal--fotos { width: 1080px; }
.modal--fotos .gallery__stage { height: min(58vh, 560px); }
.modal--fotos .gallery__stage { background: #F4FAFC; }
.modal--fotos .gallery__img { object-fit: contain; }
.modal--fotos .gallery__thumbs { flex-wrap: wrap; padding: 14px 16px 16px; }

.gallery__stage {
  position: relative;
  height: 300px;
  background: var(--ice-deep);
}
.gallery__img { width: 100%; height: 100%; object-fit: cover; }

.gallery__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--navy);
  box-shadow: 0 2px 10px rgba(12, 39, 51, .18);
  transition: background-color .18s ease;
}
.gallery__nav:hover { background: var(--white); }
.gallery__nav svg { width: 20px; height: 20px; }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }

.gallery__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(12, 39, 51, .62);
  color: var(--white);
  font-size: 11px;
  letter-spacing: .04em;
}

.gallery__thumbs { display: flex; gap: 8px; padding: 12px; }
.gallery__thumb {
  width: 62px;
  height: 46px;
  border-radius: 5px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--ice-deep);
  opacity: .65;
  transition: border-color .18s ease, opacity .18s ease;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { border-color: var(--sky-text); opacity: 1; }

/* — Rodapé fixo — */
.modal__foot {
  flex: 0 0 auto;
  padding: 20px 36px 22px;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.modal__actions { display: flex; gap: 12px; }

.btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 0 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-lg svg { width: 19px; height: 19px; }

.btn-lg--phone { background: var(--sky); border: 1px solid var(--sky); color: var(--navy); }
.btn-lg--phone:hover { background: #8ACDEA; border-color: #8ACDEA; }

.btn-lg--wa { background: var(--white); border: 1px solid #CFE0E9; color: var(--navy); }
.btn-lg--wa:hover { border-color: #25D366; color: #128C4A; }

.modal__note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}


/* ═══════════════ CTA ═══════════════ */

.cta {
  position: relative;
  z-index: 2;          /* o cartão flutua por cima da secção Equipa */
  padding: 0 var(--gutter);
  background: transparent;
}

.cta__card {
  min-height: 158px;
  padding: 0 32px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--white);
}

.cta__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 104px;
  border-bottom: 1px solid var(--line);
}

.cta__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--navy);
}

.cta__list {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 53px;
  font-size: 14px;
  line-height: 1.27;
  color: var(--steel);
}
.cta__list li { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.cta__list svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--sky); }


/* ═══════════════ O ESPAÇO ═══════════════
   Faixa horizontal de fotografias entre os Serviços e a Equipa. Sangra
   pela direita: o cartão seguinte fica meio à vista e convida a rolar.
   ══════════════════════════════════════════ */

.espaco {
  padding: 8px 0 64px var(--gutter);
  background: var(--white);
}

.espaco__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* o .section-title comum é estreito e centrado; aqui alinha à esquerda */
.espaco__title { width: auto; max-width: 620px; }

.espaco__viewport {
  margin-top: 44px;
  padding-right: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.espaco__viewport::-webkit-scrollbar { display: none; }
.espaco__viewport { cursor: grab; }
.espaco__viewport.a-agarrar { cursor: grabbing; }
.espaco__viewport img { -webkit-user-drag: none; user-select: none; }

.espaco__track {
  display: flex;
  gap: 24px;
  width: max-content;
}

.espaco__track > li {
  flex: 0 0 480px;
  scroll-snap-align: start;
}

.espaco__card {
  position: relative;
  display: block;
  width: 100%;
  height: 320px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ice);
  text-align: left;
}

.espaco__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .5s cubic-bezier(.2, .6, .2, 1);
}
.espaco__card:hover img { scale: 1.04; }

/* véu por baixo, para a legenda branca ter contraste sobre qualquer foto */
.espaco__card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 48%;
  background: linear-gradient(to top, rgba(27, 69, 88, .78), rgba(27, 69, 88, 0));
  pointer-events: none;
}

.espaco__legenda {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 1;
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.27;
}

/* quantas fotografias há por trás do cartão */
.espaco__conta {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 1;
  padding: 5px 11px;
  border-radius: 20px;
  background: rgba(12, 39, 51, .55);
  color: var(--white);
  font-size: 11px;
  letter-spacing: .04em;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  translate: 0 -4px;
  transition: opacity .2s ease, translate .2s ease;
}
.espaco__card:hover .espaco__conta,
.espaco__card:focus-visible .espaco__conta { opacity: 1; translate: 0 0; }

.espaco__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
  padding-right: var(--gutter);
}

.espaco__barra {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.espaco__progresso {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background: var(--steel);
  transition: translate .18s ease, width .18s ease;
}

.espaco__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--steel);
  transition: color .18s ease, border-color .18s ease, opacity .18s ease;
}
.espaco__seta:hover:not(:disabled) { color: var(--navy); border-color: #BFDCEB; }
.espaco__seta:disabled { opacity: .3; cursor: default; }
.espaco__seta svg { width: 18px; height: 18px; }


/* ═══════════════ EQUIPA ═══════════════ */

.team {
  position: relative;
  z-index: 1;
  /* No Figma o CTA sobrepõe-se ao topo da Equipa. */
  margin-top: -79px;
  padding-top: 199px;
  background: var(--ice);
  overflow: hidden;
}

.team__intro { width: 595.4px; margin: 0 auto; }
.team__intro .section-lead { width: 540px; max-width: 100%; }

/* — Marquee em duas linhas, sentidos opostos, com pausa ao passar o rato — */
.marquee {
  position: relative;
  margin-top: 120px;      /* 559 - 199 - 240 */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.marquee__row { overflow: hidden; }

.marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
  animation: marquee var(--duracao, 60s) linear infinite;
}
.marquee__row--rtl .marquee__track { animation-direction: reverse; }

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--percurso) * -1), 0, 0); }
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-parado .marquee__track { animation-play-state: paused; }

/* Controlo de pausa: obrigatório para movimento automático (WCAG 2.2.2 A) */
.marquee__pausa {
  position: absolute;
  left: 50%;
  bottom: -22px;
  translate: -50% 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--steel);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(27, 69, 88, .08);
  transition: color .18s ease, border-color .18s ease;
}
.marquee__pausa:hover { color: var(--navy); border-color: #BFDCEB; }
.marquee__pausa svg { width: 15px; height: 15px; }

.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(to right, var(--ice) 12%, rgba(221, 237, 246, 0)); }
.marquee::after  { right: 0; background: linear-gradient(to left,  var(--ice) 12%, rgba(221, 237, 246, 0)); }

.member {
  flex: 0 0 320px;
  height: 236px;
  padding: 26px 22px;
  border-radius: var(--radius-card);
  background: var(--white);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: box-shadow .2s ease, transform .2s ease;
}
.member:hover { box-shadow: 0 10px 30px rgba(27, 69, 88, .10); transform: translateY(-2px); }

.member__photo {
  width: 92px;
  height: 92px;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ice-deep);
}
.member__photo.is-missing { border-radius: 50%; }

.member__name {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
}

.member__role {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--sky-text);
}

.member__cedula {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.36;
  color: var(--muted);
}

/* — Manifesto: duas colunas, texto e fotografia — */
.manifesto {
  position: relative;
  margin-top: 117px;      /* 95 + 22 para o botão de pausa respirar */
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 620px minmax(0, 1fr);
  gap: 64px;
  align-items: center;      /* o texto centra-se; a foto continua assente no fundo */
}

/* o azul desvanece para branco antes do rodapé */
.manifesto__panel {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: -60px;
  bottom: 0;
  background: linear-gradient(to bottom,
    rgba(221, 237, 246, 0) 0%,
    rgba(238, 246, 251, 1) 42%,
    var(--white) 78%);
}

.manifesto__col { position: relative; z-index: 3; }

.manifesto__text {
  font-size: 18px;          /* igual a .pagehead__sub */
  font-weight: 400;
  line-height: 1.55;
  color: var(--steel);
  text-wrap: pretty;
}

.signatures {
  margin-top: 40px;
  display: flex;
  align-items: flex-end;
  gap: 64px;
}

.signature { display: flex; flex-direction: column; }
.signature img { height: 46px; width: auto; margin-bottom: 10px; }
.signature figcaption {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--steel);
}
.signature .is-missing { width: 170px; height: 46px; }

.manifesto__photo {
  position: relative;
  z-index: 1;
  justify-self: end;
  align-self: end;
  width: 520px;
  max-width: 100%;
  height: auto;
  /* Esbatimento longo, a acabar onde a secção já é branca. */
  -webkit-mask-image: linear-gradient(to bottom, #000 38%, rgba(0,0,0,.55) 68%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 38%, rgba(0,0,0,.55) 68%, transparent 97%);
}
.manifesto__photo.is-missing { height: 597px; }


/* ═══════════════ ACORDOS E PARCERIAS (página) ═══════════════ */

.acordos-pg {
  width: var(--content);
  max-width: calc(100% - 2 * var(--gutter));
  margin: 88px auto 112px;
}

.acordos-pg__lead {
  max-width: 640px;
  font-size: 20px;
  line-height: 1.45;
  color: var(--steel);
  text-wrap: pretty;
}

.acordos__lista {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.acordos__lista li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100px;
  padding: 20px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
  text-wrap: balance;
}

.acordos-pg__notas {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.acordos-pg__nota {
  padding: 26px 28px;
  border-radius: 12px;
  background: #F7FBFD;
  border: 1px solid var(--line);
}
.acordos-pg__nota h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy);
}
.acordos-pg__nota p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--steel);
}

.acordos-pg__accao {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.acordos-pg__accao .fgroup__note { margin: 0; }


/* ═══════════════ FOOTER ═══════════════ */

.footer {
  padding: 0 var(--gutter) 47px;
  background: var(--white);
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr) auto;
  grid-template-areas:
    'marca contactos parceiros'
    'barra barra barra';
  column-gap: 40px;
  row-gap: 72px;
  align-items: start;
}

.footer__brand    { grid-area: marca; }
.footer__contacts {
  grid-area: contactos;
  max-width: 520px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-auto-flow: column;    /* enche a 1.ª coluna e só depois a 2.ª */
  gap: 32px 40px;
  align-content: start;
}
.partners         { grid-area: parceiros; }
.footer__bar      { grid-area: barra; }

.footer__logo   { width: 60.44px; height: 71.6px; margin-bottom: 32px; color: var(--navy); }
.footer__name   { font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--navy); }
.footer__legal  { margin-top: 2px; font-size: 15px; font-weight: 400; line-height: 1.33; color: var(--steel); }
.footer__licence{ margin-top: 60px; font-size: 12px; line-height: 1.25; color: var(--muted); }

.fgroup__title { font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--navy); margin-bottom: 12px; }
.fgroup__body  { font-size: 15px; font-weight: 400; line-height: 1.33; color: var(--steel); }
.fgroup__lead  { display: inline-block; font-size: 16px; font-weight: 400; line-height: 1.25; color: var(--steel); transition: color .18s ease; }
.fgroup__lead:hover { color: var(--sky); }
.fgroup__note  { margin-top: 4px; font-size: 11px; line-height: 1.36; color: var(--muted); }
.fgroup__lead--seguinte { margin-top: 14px; }

/* — Desfile de parceiros no rodapé —
   Enquanto não houver ficheiro em assets/parceiros/, cada parceiro mostra
   o nome em texto; o app.js troca para o logótipo assim que este carregar. */
.partners {
  align-self: start;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 57.42px;
  padding: 0 14px 0 21.7px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  transition: border-color .18s ease;
}
.partners:hover { border-color: #BFDCEB; }
.partners__label { font-size: 11px; line-height: 1.36; color: var(--muted); white-space: nowrap; }

.partners__viewport {
  width: 232px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}

.partners__track {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  will-change: transform;
  animation: marquee var(--duracao, 30s) linear infinite;
}
.partners:hover .partners__track,
.partners:focus-within .partners__track,
.partners.is-parado .partners__track { animation-play-state: paused; }

.parceiro {
  display: inline-flex;
  align-items: center;
  height: 26px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
  transition: color .18s ease;
}
a.parceiro:hover { color: var(--navy); }
.parceiro img { display: none; height: 16px; width: auto; max-width: 96px; object-fit: contain; opacity: .78; transition: opacity .18s ease; }
a.parceiro:hover img { opacity: 1; }
.parceiro.tem-logo img { display: block; }
.parceiro.tem-logo .parceiro__nome { display: none; }

.partners__pausa {
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--muted);
  transition: color .18s ease, background-color .18s ease;
}
.partners__pausa:hover { color: var(--navy); background: var(--ice); }
.partners__pausa svg { width: 13px; height: 13px; }

.partners__mais {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--sky-text);
  transition: background-color .18s ease;
}
.partners__mais:hover { background: var(--ice); }
.partners__mais svg { width: 16px; height: 16px; }

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  min-height: 82px;
  padding: 16px 33.44px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: #FBFDFE;
}

.footer__links { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; font-size: 14px; line-height: 1.36; color: var(--steel); }
.footer__links a { transition: color .18s ease; }
.footer__links a:hover { color: var(--sky); }
.footer__links a[aria-current] { color: var(--navy); font-weight: 500; }

.footer__social { display: flex; align-items: center; gap: 24px; color: var(--navy); }
.footer__social a { display: flex; transition: color .18s ease; }
.footer__social a:hover { color: var(--sky); }
.footer__social svg { width: 22px; height: 22px; }


/* ═══════════════ IMPRESSÃO / MOVIMENTO ═══════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* sem marquee: as filas ficam paradas e navegáveis por scroll */
  .marquee__track { animation: none !important; }
  .marquee__row { overflow-x: auto; }
  .partners__track { animation: none !important; transform: none !important; }
  .espaco__viewport { scroll-behavior: auto; }
  .espaco__card img { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVO
   Acima de 1440px o desenho é o do Figma. Abaixo, as margens encolhem
   e as grelhas vão perdendo colunas. O menu passa a gaveta a partir
   dos 900px, onde a navegação deixa de caber ao lado do botão.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Botão do menu (escondido no desktop) ── */
.header__burger {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 11px 9px;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 8px;
  transition: background-color .18s ease;
}
.header__burger:hover { background: rgba(255, 255, 255, .1); }
.header__burger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--white);
  transition: transform .25s ease, opacity .2s ease;
}
.header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* ══════════ ≤ 1440px — margens fluidas ══════════ */
@media (max-width: 1440px) {
  :root { --gutter: clamp(24px, 5vw, 96px); }

  .services,
  .bento,
  .tabs,
  .svc-grid,
  .bento-intro,
  .legal { width: 100%; }

  .services { padding-left: var(--gutter); padding-right: var(--gutter); }
  .legal    { padding: 0 var(--gutter); }

  .bento-intro { width: 100%; max-width: 760px; }
  .team__intro { width: 100%; max-width: 595.4px; }
  .manifesto { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; }
  .manifesto__photo { width: 100%; max-width: 520px; }
  .modal { width: min(860px, calc(100vw - 48px)); }
}


/* ══════════ ≤ 1180px — grelhas mais estreitas ══════════ */
@media (max-width: 1180px) {
  .bento > .tile:nth-child(1),
  .bento > .tile:nth-child(2),
  .bento > .tile:nth-child(3),
  .bento > .tile:nth-child(4) { grid-column: span 6; }
  .bento > .tile:nth-child(5) { grid-column: span 12; }

  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .art__panels { grid-template-columns: repeat(3, 1fr); }

  .footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'marca contactos'
      'parceiros parceiros'
      'barra barra';
    row-gap: 48px;
  }
  .partners { align-self: start; }
  .footer__licence { margin-top: 32px; }

  /* a célula dos contactos passa a ocupar meia largura: volta a uma coluna */
  .footer__contacts {
    max-width: 280px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 32px;
  }

  /* Coluna única: o max-width deixa de fazer sentido e desalinhava o corpo
     em relação ao cabeçalho da página. O texto passa a acompanhar as margens. */
  .legal,
  .legal--single { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .legal__body { max-width: none; }
  .legal__nav { position: static; }
  .legal__nav ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 24px; }
}


/* ══════════ ≤ 900px — menu em gaveta ══════════ */
@media (max-width: 900px) {

  /* Acordos — três por linha */
  .acordos-pg { margin: 64px auto 88px; }
  .acordos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* O Espaço — cartões mais baixos e setas mais próximas */
  .espaco { padding-bottom: 56px; }
  .espaco__track > li { flex-basis: 380px; }
  .espaco__card { height: 260px; }
  .espaco__viewport { margin-top: 36px; }
  .header { padding: 0 12px 0 16px; }
  .header__burger { display: flex; order: 3; }
  /* o botão fica no header em vez de descer para a gaveta */
  .header__cta { order: 2; }

  /* a navegação desce do header como painel */
  .header__nav {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    border-radius: 12px;
    background: rgba(20, 56, 72, .96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(12, 39, 51, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .header__nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .header__nav a {
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 16px;
  }
  .header__nav a:hover { background: rgba(255, 255, 255, .08); color: var(--white); }

  .hero { min-height: 620px; padding-bottom: 64px; }
  .hero__title { width: 100%; max-width: 560px; font-size: clamp(38px, 6.4vw, 64px); }
  .hero__sub   { width: 100%; font-size: 18px; }

  /* O header sobrepõe-se ao topo da secção. O padding superior reserva-lhe
     o espaço e o `align-items: center` reparte o resto por igual acima e
     abaixo do texto — fica centrado no que sobra, não na secção inteira. */
  .pagehead {
    min-height: 560px;
    align-items: center;      /* centra o texto no espaço abaixo do header */
    padding: calc(var(--header-top) + var(--header-h) + 32px) 0 32px;
  }
  .pagehead--short { min-height: 470px; }
  .pagehead__title {
    font-size: clamp(32px, 8vw, 52px);
    line-height: 1.14;
    max-width: 15ch;              /* trava a linha antes de encostar à margem */
    text-wrap: balance;
  }
  .pagehead__sub { max-width: 46ch; text-wrap: pretty; }

  .bento-intro { font-size: clamp(24px, 3.4vw, 34px); }
  .section-title { width: 100%; font-size: clamp(28px, 4vw, 40px); }
  .section-lead  { font-size: 18px; }

  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc { padding: 24px; }

  .cta__card { padding: 0 24px; }
  .cta__top { flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; height: auto; padding: 24px 0; }
  .cta__list { flex-wrap: wrap; gap: 12px 24px; height: auto; padding: 18px 0; }

  .manifesto { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .manifesto__col { padding-bottom: 40px; }
  .manifesto__photo { justify-self: center; margin-bottom: 0; }

  /* filtros: tabs fora, <select> nativo dentro */
  .tabs { display: none; }
  .tabs__picker {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 44px 0 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B6D8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--navy);
    appearance: none;
    -webkit-appearance: none;
  }
  .svc-grid { margin-top: 20px; }

  .modal { width: calc(100vw - 32px); max-height: 92vh; }
  .modal__head { padding: 24px 24px 18px; }
  .modal__body { padding: 22px 24px 28px; }
  .modal__foot { padding: 16px 24px 18px; }
  .modal__title { font-size: 24px; }
  .ticks { grid-template-columns: minmax(0, 1fr); }
  .panels { grid-template-columns: minmax(0, 1fr); }
}


/* ══════════ ≤ 640px — telemóvel ══════════ */
@media (max-width: 640px) {

  /* Acordos — dois por linha */
  .acordos-pg { margin: 48px auto 64px; }
  .acordos-pg__lead { font-size: 17px; }
  .acordos__lista { margin-top: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .acordos__lista li { min-height: 78px; font-size: 14px; }
  .acordos-pg__notas { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .partners__viewport { width: min(210px, 46vw); }
  .modal--fotos .gallery__stage { height: 44vh; }

  /* O Espaço — um cartão de cada vez, com o seguinte a espreitar */
  .espaco { padding-bottom: 48px; }
  .espaco__track > li { flex-basis: min(80vw, 320px); }
  .espaco__card { height: 220px; }
  .espaco__track { gap: 14px; }
  .espaco__nav { gap: 14px; margin-top: 22px; }
  .espaco__seta { flex-basis: 40px; width: 40px; height: 40px; }
  .espaco__legenda { left: 16px; bottom: 14px; font-size: 14px; }
  :root { --header-h: 60px; }
  .header { padding: 0 8px 0 12px; gap: 8px; }
  .header__logo-svg { width: 108px; height: 24px; }
  .header__cta { width: auto; height: 34px; padding: 0 12px; font-size: 9px; }


  .hero { min-height: 540px; padding-bottom: 48px; }
  .pill { height: auto; padding: 8px 14px; line-height: 1.4; white-space: normal; }
  .hero__title { margin-top: 24px; }
  .hero__sub { margin-top: 20px; font-size: 16px; }

  .services { padding-top: 72px; padding-bottom: 48px; }
  .bento { gap: 16px; }
  .bento > .tile:nth-child(n) { grid-column: span 12; min-height: 0; }
  .tile__head { padding: 22px 22px 18px; }
  .tile__title { font-size: 21px; }
  .art { padding: 0; min-height: 0; }

  /* Todos os painéis ficam em lista. Acima de 7 linhas, corta com
     esbatimento e deixa rolar o resto. */
  .art__chips,
  .art__sheet {
    display: block;
    max-height: 322px;          /* ~7 linhas */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 22px 22px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  }
  .art__chips span,
  .art__row {
    display: block;
    width: 100%;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid rgba(27, 69, 88, .10);
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 15px;
    color: var(--navy);
  }
  .art__chips span:last-child,
  .art__row:last-child { border-bottom: 0; }

  /* listas curtas não precisam de corte nem de esbatimento */
  .art__sheet:has(.art__row:nth-child(-n+5):last-child) {
    max-height: none;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* o painel do posto de colheitas segue a mesma lista dos outros */
  .art__panels {
    display: block;
    max-height: 322px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 22px 22px;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  }
  .art__panels span {
    display: block;
    width: 100%;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid rgba(27, 69, 88, .10);
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 15px;
    color: var(--navy);
  }
  .art__panels span:last-child { border-bottom: 0; }

  .tabs { flex-wrap: wrap; gap: 12px 18px; }
  .tabs__ink { display: none; }
  .tabs__item.is-active { border-bottom: 2px solid var(--navy); padding-bottom: 4px; }

  /* Serviços em lista: linha com título e seta, em vez de caixa alta */
  .svc-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0; }
  .svc {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 16px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
  }
  .svc:first-child { border-top: 1px solid var(--line); }
  .svc:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .svc::before { display: none; }
  .svc__group { display: none; }
  .svc__title { margin-top: 0; padding-top: 0; font-size: 16px; }
  .svc__more {
    margin-top: 0;
    opacity: 1;
    transform: none;
    flex: 0 0 auto;
    font-size: 0;      /* fica só a seta */
    gap: 0;
  }
  .svc__more svg { width: 18px; height: 18px; }

  .team { padding-top: 96px; }
  .marquee { margin-top: 56px; }
  .marquee::before, .marquee::after { width: 48px; }
  .member { flex-basis: 260px; height: 210px; padding: 22px 18px; }
  .member__photo { width: 76px; height: 76px; }

  .manifesto { margin-top: 64px; }
  .signatures { flex-wrap: wrap; gap: 28px 40px; }
  .signature img { height: 40px; }

  .footer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'marca' 'contactos' 'parceiros' 'barra';
    row-gap: 40px;
    padding-bottom: 40px;
  }
  .footer__contacts { max-width: none; }
  .footer__licence { margin-top: 24px; }
  .partners { flex-wrap: wrap; height: auto; padding: 14px 14px 14px 18px; gap: 12px 14px; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 20px; padding: 22px; }
  .footer__links { gap: 8px 20px; }

  .legal { margin-top: 56px; margin-bottom: 72px; }
  .legal__nav ol { grid-template-columns: minmax(0, 1fr); }
  .legal__body h2 { font-size: 21px; }
  .legal__body p, .legal__list li, .artigo__ul li { font-size: 15px; }
  .artigo__lead { font-size: 17px; }
  .artigo__areas > li > strong { font-size: 16px; }
  .legal__cta { flex-direction: column; }
  .btn-lg { width: 100%; }

  .modal__actions { flex-direction: column; }
  .modal__actions .btn-lg { width: 100%; }
  .gallery__stage { height: 220px; }
}


/* ══════════ ≤ 400px — ecrãs muito estreitos ══════════
   O header passa a levar o botão "Agendar consulta" em vez de o esconder
   na gaveta, por isso logo + botão + burger têm de caber na mesma linha. */
@media (max-width: 400px) {
  .header { padding: 0 6px 0 10px; gap: 6px; }
  .header__logo-svg { width: 96px; height: 21px; }
  .header__burger { width: 36px; height: 36px; padding: 10px 8px; }
  .header__cta { padding: 0 10px; }
}