/* css/style.css */

/* ==========================================================================
   ÍNDICE
   1.  Variáveis
   2.  Reset e base
   3.  Acessibilidade
   4.  Layout geral
   5.  Botões e ligações
   6.  Etiquetas (tags)
   7.  Header e navegação (inclui .site-lang)
   8.  Hero
   9.  Áreas de trabalho
   10. Projetos em destaque
   11. Espinha dorsal narrativa
   12. Monitorização
   13. Parcerias
   14. Contacto
   15. Footer
   16. Responsivo (tablet 720px, desktop 1020px)
   17. Página legal (legal.html)
   18. Movimento reduzido
   ========================================================================== */


/* ==========================================================================
   1. VARIÁVEIS
   ========================================================================== */
:root {

  /* --- Base neutra --- */
  --background: #f7f7f4;
  --surface: #ffffff;
  --surface-tinted: #eef2ef;
  --text: #1c2621;
  --muted: #5a665f;
  --border: #d8ded8;

  /* --- Verde principal (cor dominante) --- */
  --green-900: #14352c;
  --green-700: #1f5c4c;
  --green-500: #2f7d63;
  --green-300: #a7d3c1;
  --green-100: #e2f0e9;

  /* --- Azul secundário (dados, GIS, GBIF) --- */
  --blue-900: #16354d;
  --blue-700: #235c7f;
  --blue-500: #3a7ca5;
  --blue-300: #a9cbe0;
  --blue-100: #e3eef5;

  /* --- Terracota discreta (educação) --- */
  --clay-700: #8a4b2f;
  --clay-500: #b3673d;
  --clay-100: #f3e2d6;

  /* --- Tipografia: fontes do sistema, sem descarregar nada --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* --- Espaçamentos --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  /* --- Raios dos cantos --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Sombra suave dos cartões --- */
  --shadow-card: 0 1px 2px rgba(20, 53, 44, 0.06), 0 4px 12px rgba(20, 53, 44, 0.05);

  /* --- Medidas gerais --- */
  --container-width: 1120px;
  --header-height: 4rem;
  --reading-width: 62ch;
}


/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--background);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.2;
  color: var(--green-900);
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.1rem;
}

p {
  margin: 0 0 var(--space-4);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

figure,
blockquote {
  margin: 0;
}

a {
  color: var(--green-700);
}


/* ==========================================================================
   3. ACESSIBILIDADE
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  color: #ffffff;
  background-color: var(--green-900);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--space-3);
}

main:focus {
  outline: none;
}


/* ==========================================================================
   4. LAYOUT GERAL
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.page-section {
  padding-block: var(--space-6);
}

@media (min-width: 720px) {
  .page-section {
    padding-block: var(--space-8);
  }
}

.page-section--surface {
  background-color: var(--surface-tinted);
  border-block: 1px solid var(--border);
}

.section-intro {
  margin-bottom: var(--space-6);
}

.section-intro__title {
  margin-bottom: var(--space-3);
}

.section-intro__text {
  max-width: var(--reading-width);
  margin-bottom: 0;
  color: var(--muted);
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
}

.card-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--green-100);
}

.card-media__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   5. BOTÕES E LIGAÇÕES
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.button--primary {
  color: #ffffff;
  background-color: var(--green-700);
  border-color: var(--green-700);
}

.button--primary:hover,
.button--primary:focus-visible {
  background-color: var(--green-900);
  border-color: var(--green-900);
}

.button--secondary {
  color: var(--green-700);
  background-color: var(--surface);
  border-color: var(--green-700);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  color: var(--green-900);
  background-color: var(--green-100);
  border-color: var(--green-900);
}

.text-link {
  display: inline-block;
  padding-block: var(--space-2);
  font-weight: 600;
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--green-900);
}


/* ==========================================================================
   6. ETIQUETAS (TAGS)
   Cada etiqueta combina cor + símbolo + texto (nunca só cor).
   ========================================================================== */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid;
  border-radius: var(--radius-pill);
}

.tag::before {
  font-size: 0.75em;
}

.tag--conservacao {
  color: var(--green-700);
  background-color: var(--green-100);
  border-color: var(--green-300);
}
.tag--conservacao::before {
  content: "●";
  content: "●" / "";
}

.tag--dados {
  color: var(--blue-700);
  background-color: var(--blue-100);
  border-color: var(--blue-300);
}
.tag--dados::before {
  content: "◆";
  content: "◆" / "";
}

.tag--educacao {
  color: var(--clay-700);
  background-color: var(--clay-100);
  border-color: var(--clay-500);
}
.tag--educacao::before {
  content: "▲";
  content: "▲" / "";
}

.tag--comunicacao {
  color: var(--green-900);
  background-color: var(--surface);
  border-color: var(--green-700);
}
.tag--comunicacao::before {
  content: "■";
  content: "■" / "";
}

.tag--geral {
  color: var(--muted);
  background-color: var(--surface);
  border-color: var(--border);
}
.tag--geral::before {
  content: "○";
  content: "○" / "";
}


/* ==========================================================================
   7. HEADER E NAVEGAÇÃO
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
}

.site-header__brand {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--green-900);
  text-decoration: none;
}

/* --- Navegação de desktop (escondida por defeito) --- */
.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav__link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--green-900);
  background-color: var(--green-100);
}

.site-nav__link[aria-current="page"] {
  font-weight: 700;
  color: var(--green-900);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* --- Seletor de idioma (.site-lang) ---
   Inerte se o elemento ainda não existir no HTML. */
.site-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green-700);
  text-decoration: none;
  border: 1px solid var(--green-700);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-lang:hover,
.site-lang:focus-visible {
  color: var(--green-900);
  background-color: var(--green-100);
}

/* --- Menu de telemóvel/tablet: <details> sem JS --- */
.mobile-menu__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  color: var(--green-900);
  background-color: var(--surface);
  border: 2px solid var(--green-700);
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
}

.mobile-menu__button::-webkit-details-marker {
  display: none;
}

.mobile-menu__button::before {
  content: "☰";
  content: "☰" / "";
}

.mobile-menu[open] .mobile-menu__button::before {
  content: "✕";
  content: "✕" / "";
}

.mobile-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-height));
  padding: var(--space-3) var(--space-4) var(--space-5);
  overflow-y: auto;
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.mobile-menu__link {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.mobile-menu__link:hover,
.mobile-menu__link:focus-visible {
  color: var(--green-900);
  background-color: var(--green-100);
}

.mobile-menu__link[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}


/* ==========================================================================
   8. HERO
   Foto full-bleed como fundo + overlay verde + degradê preto à esquerda.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 460px;
  display: flex;
  align-items: center;
  background-color: var(--green-900);
  padding-block: var(--space-6);
}

/* Camada de fundo: figura + imagem */
.hero__figure {
  position: absolute;
  inset: 0;
  z-index: 0;
  max-width: none;
  margin: 0;
  overflow: hidden;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Overlay verde sobre a foto */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--green-900);
  opacity: 0.65;
  pointer-events: none;
}

/* Degradê preto da esquerda para o meio (para legibilidade do texto) */
/* base (mobile): gradiente vertical para legibilidade sobre toda a largura */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.35) 55%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}

@media (min-width: 1020px) {
  .hero::after {
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.35) 25%,
      rgba(0, 0, 0, 0) 55%
    );
  }
}

/* Conteúdo: container + texto acima do overlay */
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  width: 100%;
}

.hero__text {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.hero__name {
  font-size: clamp(2.5rem, 8vw, 4.25rem);
  letter-spacing: -0.02em;
  color: #ffffff;
}

.hero__role {
  margin-top: var(--space-3);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--green-300);
}

.hero__identity {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
  border-left: 4px solid var(--green-500);
}

.hero__location {
  font-weight: 600;
  color: var(--green-300);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.hero .button--primary {
  color: var(--green-900);
  background-color: #ffffff;
  border-color: #ffffff;
}

.hero .button--primary:hover,
.hero .button--primary:focus-visible {
  background-color: var(--green-100);
  border-color: var(--green-100);
}

.hero .button--secondary {
  color: #ffffff;
  background-color: transparent;
  border-color: var(--green-300);
}

.hero .button--secondary:hover,
.hero .button--secondary:focus-visible {
  color: var(--green-900);
  background-color: var(--green-300);
  border-color: var(--green-300);
}

.hero :focus-visible {
  outline-color: var(--green-300);
}


/* ==========================================================================
   9. ÁREAS DE TRABALHO
   ========================================================================== */
.area-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-5);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-top-width: 4px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.area-card .card-media {
  aspect-ratio: 2.39 / 1;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
}

.area-card__symbol {
  margin-bottom: var(--space-2);
  font-size: 1.25rem;
  line-height: 1;
}

.area-card__title {
  margin-bottom: var(--space-2);
}

.area-card__text {
  flex-grow: 1;
  color: var(--muted);
}

.area-card--conservacao { border-top-color: var(--green-500); }
.area-card--conservacao .area-card__symbol { color: var(--green-700); }

.area-card--educacao { border-top-color: var(--clay-500); }
.area-card--educacao .area-card__symbol { color: var(--clay-700); }

.area-card--comunicacao { border-top-color: var(--green-900); }
.area-card--comunicacao .area-card__symbol { color: var(--green-900); }

.area-card--dados { border-top-color: var(--blue-500); }
.area-card--dados .area-card__symbol { color: var(--blue-700); }

.area-card--colecoes { border-top-color: var(--muted); }
.area-card--colecoes .area-card__symbol { color: var(--muted); }


/* ==========================================================================
   10. PROJETOS EM DESTAQUE
   ========================================================================== */
.project-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease;
}

.project-card:hover,
.project-card:focus-within {
  border-color: var(--green-500);
}

.project-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
  padding: var(--space-5);
}

.project-card__title {
  margin-bottom: var(--space-2);
}

.project-card__summary {
  flex-grow: 1;
}

.project-card__body > p:last-child {
  margin-bottom: 0;
}

/* base (mobile) — imagens mais curtas nos cartões */
.project-card .card-media,
.preview-card .card-media {
  aspect-ratio: 2.39 / 1;
}

@media (min-width: 720px) {
  .project-card .card-media,
  .preview-card .card-media {
    aspect-ratio: 3 / 2;
  }
}

/* ==========================================================================
   11. ESPINHA DORSAL NARRATIVA
   Cada .spine-section define a sua cor de destaque em --spine-accent.
   ========================================================================== */
.spine-section {
  --spine-accent: var(--green-700);
  padding-block: var(--space-6);
  border-top: 1px solid var(--border);
}

@media (min-width: 720px) {
  .spine-section {
    padding-block: var(--space-7);
  }
}

.spine-section--conhecer   { --spine-accent: var(--green-700); }
.spine-section--documentar { --spine-accent: var(--blue-700); }
.spine-section--proteger   { --spine-accent: var(--green-700); }
.spine-section--ensinar    { --spine-accent: var(--clay-700); }
.spine-section--comunicar  { --spine-accent: var(--green-900); }
.spine-section--percurso   { --spine-accent: var(--green-900); }

.spine-section__header {
  max-width: 52rem;
  margin-bottom: var(--space-6);
}

.spine-section__number {
  margin: 0;
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--spine-accent);
}

.spine-section__heading {
  margin-top: var(--space-2);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--spine-accent);
}

.spine-section__title {
  display: block;
  margin-top: var(--space-2);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.spine-section__text {
  max-width: var(--reading-width);
  margin: var(--space-4) 0 0;
  color: var(--muted);
}

/* Cartão de pré-visualização dentro da espinha dorsal */
.preview-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease;
}

.preview-card:hover,
.preview-card:focus-within {
  border-color: var(--spine-accent);
}

.preview-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.preview-card__title {
  margin-bottom: var(--space-2);
}

.preview-card__text {
  flex-grow: 1;
  margin-bottom: var(--space-2);
  color: var(--muted);
}


/* ==========================================================================
   12. MONITORIZAÇÃO
   ========================================================================== */
#monitorizacao .preview-card {
  border-top-width: 4px;
  border-top-color: var(--green-500);
}

#monitorizacao .preview-card:hover,
#monitorizacao .preview-card:focus-within {
  border-color: var(--green-500);
}


/* ==========================================================================
   13. PARCERIAS — estatísticas, áreas e parede de logos
   ========================================================================== */
.partners__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.partners__stat {
  padding: var(--space-4);
  text-align: center;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.partners__stat-number {
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--green-700);
}

.partners__stat-label {
  margin: var(--space-2) 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

.partners__areas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.partners__area {
  padding: var(--space-1) var(--space-3);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-900);
  background-color: var(--green-100);
  border: 1px solid var(--green-300);
  border-radius: var(--radius-pill);
}

.partners__wall {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.partners__group-title {
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.logo-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: var(--space-3);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.logo-grid__item img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.logo-grid__item:hover img {
  filter: grayscale(0);
  opacity: 1;
}


/* ==========================================================================
   14. CONTACTO
   ========================================================================== */
.contact-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.contact-link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon label"
    "icon text";
  column-gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  color: var(--text);
  text-decoration: none;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.contact-link:hover,
.contact-link:focus-visible {
  background-color: var(--green-100);
  border-color: var(--green-500);
}

.contact-link__icon {
  grid-area: icon;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--green-900);
  background-color: var(--green-100);
  border: 2px solid var(--green-700);
  border-radius: var(--radius-pill);
}

.contact-link__label {
  grid-area: label;
  font-weight: 700;
  color: var(--green-900);
}

.contact-link__text {
  grid-area: text;
  font-size: 0.95rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}


/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.site-footer {
  padding-block: var(--space-7);
  color: var(--green-100);
  background-color: var(--green-900);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.site-footer__name {
  margin-bottom: var(--space-1);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
}

.site-footer__location,
.site-footer__copyright,
.site-footer__note {
  margin-bottom: var(--space-1);
  font-size: 0.95rem;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__link {
  display: inline-block;
  padding-block: var(--space-1);
  color: #ffffff;
  text-underline-offset: 3px;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--green-300);
}

.site-footer__license {
  margin-bottom: var(--space-1);
  font-size: 0.85rem;
}

.site-footer__license a {
  color: #ffffff;
  text-underline-offset: 3px;
}

.site-footer__note {
  white-space: nowrap;
  font-size: 0.9rem;
}

.site-footer :focus-visible {
  outline-color: var(--green-300);
}


/* ==========================================================================
   16. RESPONSIVO
   Breakpoints: tablet = 720px, desktop = 1020px.
   O CSS não permite variáveis em @media; se mudares aqui, atualiza
   DESKTOP_BREAKPOINT_PX em js/main.js.
   ========================================================================== */

/* ----- Tablet (a partir de 720px) ----- */
@media (min-width: 720px) {

  .container {
    padding-inline: var(--space-6);
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__inner {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  .partners__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----- Desktop (a partir de 1020px) ----- */
@media (min-width: 1020px) {

  .site-nav {
    display: block;
  }

  .mobile-menu {
    display: none;
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr 1.4fr;
  }

  /* Hero */
  .hero {
    min-height: 600px;
    padding-block: var(--space-7);
  }

  .hero__inner {
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-6);
  }

  /* Grelhas */
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-grid--four {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Espinha dorsal: número à esquerda, conteúdo à direita */
  .spine-section__header {
    max-width: none;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-7);
    row-gap: var(--space-3);
    align-items: start;
  }

  .spine-section__number {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }

  .spine-section__heading {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .spine-section__text {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    max-width: 75ch;
  }

  #espinha .section-intro__text {
    max-width: 75ch;
  }

  /* Parcerias */
  .partners__stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .logo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ==========================================================================
   17. PÁGINA LEGAL (legal.html)
   ========================================================================== */
.legal-content {
  max-width: 80ch;
}

.legal-content h2 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: 1.35rem;
}

.legal-content p {
  margin-bottom: var(--space-4);
}

.legal-content ul {
  margin-bottom: var(--space-4);
  padding-left: var(--space-5);
  list-style: disc;
}

.legal-content li {
  margin-bottom: var(--space-2);
}

.legal-content a {
  color: var(--green-700);
  text-underline-offset: 3px;
}


/* ==========================================================================
   18. MOVIMENTO REDUZIDO
   ========================================================================== */

/* Animações de scroll: desativadas se o utilizador pedir menos movimento.
   Como a classe .is-visible só é adicionada pelo JS, elementos sem
   JS ficam sempre visíveis. */
@media (prefers-reduced-motion: no-preference) {

  /* Áreas de trabalho */
  html.js-enabled #areas .section-intro__title,
  html.js-enabled #areas .area-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  }
  html.js-enabled #areas .section-intro__title.is-visible,
  html.js-enabled #areas .area-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Espinha dorsal */
  html.js-enabled .spine-section__header,
  html.js-enabled .spine-section .preview-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out, border-color 0.15s ease;
  }
  html.js-enabled .spine-section__header.is-visible,
  html.js-enabled .spine-section .preview-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  html.js-enabled .spine-section .preview-card:nth-child(2) {
    transition-delay: 0.1s;
  }
  html.js-enabled .spine-section .preview-card:nth-child(3) {
    transition-delay: 0.2s;
  }
}

/* Se o utilizador pedir menos movimento, sem transições nem animações. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}