/* mest | base da home. Valores do documento de espaçamentos (px). */

:root {
  --paper: #F2F3F0;
  --brand: #063369;
  --fundo: #142A50;
  --ink: #0F1A2E;
  --stone: #C9C4BA;
  --margem: 45px;
  --padding-secao: 120px;
  --header-h: 90px;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

/* Cabeçalho: transparente no topo, sólido ao subir o scroll */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  padding: 0 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  background: transparent;
  color: var(--paper);
  transition: transform .35s ease, background-color .35s ease;
}
.site-header.is-solid { background: var(--fundo); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .logo img { height: 30px; width: auto; }
.nav { display: flex; gap: 32px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.nav a { text-decoration: none; }

/* Hero: ecrã inteiro, o vídeo cobre sempre a janela */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--fundo);
  color: var(--paper);
}
.hero-media, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media video { object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: #0F1A2E; mix-blend-mode: multiply; opacity: .4; }
.hero-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.hero h1 { margin: 0; font-weight: 400; font-size: 80px; line-height: 1; text-transform: uppercase; }
.btn {
  margin-top: 70px;
  width: 120px; height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; border-radius: 50px;
  background: transparent; color: inherit;
  font: 400 14px/1 "DM Sans", ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase; text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.btn:hover, .btn:focus-visible { background: var(--paper); color: var(--brand); outline: none; }

/* Secções */
section, .rodape {
  padding-block: var(--padding-secao);
  padding-inline: max(var(--margem), env(safe-area-inset-left, 0px)) max(var(--margem), env(safe-area-inset-right, 0px));
  scroll-margin-top: var(--header-h);
}

/* Telemóvel: margens de 16 px */
@media (max-width: 720px) {
  .hero h1 { font-size: 40px; }
  .nav { gap: 16px; }
}

/* O nosso trabalho */
/* Mesma grelha dos Serviços: rótulo e título alinhados pelo topo */
.projetos-cabecalho { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 45px; align-items: start; }
.projetos-cabecalho .rotulo { grid-column: 1; grid-row: 1; }
.projetos-cabecalho .projetos-titulo { grid-column: 3 / 5; grid-row: 1; margin-left: 0; }
@media (max-width: 1000px) {
  .projetos-cabecalho { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projetos-cabecalho .projetos-titulo { grid-column: 2; }
}
@media (max-width: 720px) {
  .projetos-cabecalho { grid-template-columns: 1fr; }
  .projetos-cabecalho .rotulo, .projetos-cabecalho .projetos-titulo { grid-column: 1; grid-row: auto; }
  .projetos-cabecalho .projetos-titulo { margin-top: 20px; }
}
.rotulo {
  margin: 0;
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--brand);
}
.projetos-titulo {
  margin-left: 50%;
}
.projetos-titulo h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(30px, 3.33vw, 48px);
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.projetos-titulo p {
  margin: clamp(20px, 2.08vw, 30px) 0 0;
  font-weight: 300;
  font-size: clamp(18px, 1.67vw, 24px);
  line-height: 1.2;
  letter-spacing: .01em;
}

/* Carrossel: altura fixa de 500 px, largura segue cada imagem; sai até às bordas */
.carrossel {
  margin-top: 80px;
  margin-inline: calc(-1 * var(--margem));
  padding-inline: var(--margem);
  display: flex;
  gap: 40px;
  overflow: hidden;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.carrossel.is-arrastar { cursor: grabbing; }
.carrossel::-webkit-scrollbar { display: none; }
/* Cartão com a largura da capa (400px a 500px de altura, 4:5): o nome do promotor quebra dentro dela */
.cartao { flex: 0 0 400px; width: 400px; text-decoration: none; -webkit-user-drag: none; user-select: none; }
.cartao img {
  height: 500px;
  width: auto;
  aspect-ratio: 4 / 5;
  display: block;
  pointer-events: none;
}
.cartao-nome {
  display: block;
  margin-top: 30px;
  font-weight: 300;
  font-size: clamp(20px, 2.08vw, 30px);
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
}
.cartao-promotor {
  display: block;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(16px, 1.67vw, 24px);
  line-height: 1.2;
  letter-spacing: .1em;
}

/* Os nossos serviços: lista à esquerda, texto ao centro, imagem à direita */
.servicos-cabecalho { display: block; }
.servicos-titulo { margin-left: 50%; }
.servicos-titulo h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(30px, 3.33vw, 48px);
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.servicos-titulo p {
  margin: clamp(20px, 2.08vw, 30px) 0 0;
  font-weight: 300;
  font-size: clamp(18px, 1.67vw, 24px);
  line-height: 1.2;
  letter-spacing: .01em;
}
.servicos-grelha {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  align-items: start;
}
.servicos-lista { display: flex; flex-direction: column; gap: 22px; }
.servico-botao {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  text-align: left;
  cursor: pointer;
  text-underline-offset: 6px;
}
.servico-botao.is-ativo { font-weight: 500; text-decoration: underline; }
.servico-botao:focus-visible { outline: 1px solid var(--brand); outline-offset: 4px; }
.servico-painel { display: contents; }
.servico-painel[hidden] { display: none; }
.servico-texto { grid-column: 2; }
.servico-frase {
  margin: 0 0 24px;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.67vw, 24px);
  line-height: 1.2;
}
.servico-texto p { margin: 0 0 18px; font-weight: 300; font-size: 18px; line-height: 1.6; }
.servico-itens {
  list-style: none;
  margin: 80px 0 0;
  padding: 0;
  border-top: 1px solid var(--stone);
}
.servico-itens li {
  padding: 10px 0;
  border-bottom: 1px solid var(--stone);
  font-size: 18px;
  line-height: 1.4;
}
.servico-imagem {
  grid-column: 3;
  height: auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

@media (max-width: 720px) {
  .servicos-titulo { margin-left: 0; }
  .servicos-grelha { grid-template-columns: 1fr; margin-top: 48px; row-gap: 40px; }
  .servico-texto, .servico-imagem { grid-column: 1; }
  .servico-itens { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .carrossel { scroll-behavior: auto; }
}

/* Projetos e Serviços: margem superior e inferior de 90px */
.projetos, .servicos { padding-block: 120px; }

/* Serviços: grelha de 4 colunas, alinhada com o título */
.servicos-cabecalho { display: grid; }
.servicos-grelha { align-items: stretch; }
.servico-texto { display: flex; flex-direction: column; }
.servico-texto .servico-frase {
  font-weight: 500;
  font-style: italic;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
.servico-texto p {
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
/* A lista fica encostada ao fundo da imagem */
.servico-itens { margin: auto 0 0; }

@media (min-width: 1001px) {
  /* 4 colunas iguais: o título continua a começar a meio da página, e a coluna do texto ganha largura */
  .servicos-cabecalho,
  .servicos-grelha { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 45px; }
  .servicos-cabecalho { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 45px; }
  .servicos-cabecalho .rotulo { grid-column: 1 / 3; }
  .servicos-titulo { grid-column: 5 / 9; margin-left: 0; }
  /* Mesma escala para os nomes dos serviços e para todo o texto da coluna 2: diminuem com a largura do ecrã
     até caber numa linha (a quebra só acontece em ecrãs muito estreitos) */
  .servicos { --servico-escala: max(14px, min(24px, calc((100vw - 225px) / 68))); }
  .servico-botao { font-size: var(--servico-escala); }
  .servico-texto .servico-frase,
  .servico-texto p,
  .servico-itens li { font-size: var(--servico-escala); line-height: 1.2; }
  /* Teste: coluna 1 = serviços, colunas 2 e 3 = texto, coluna 4 = imagem */
  .servicos-lista { grid-column: 1 / 3; grid-row: 1; align-self: start; }
  .servico-texto { grid-column: 3 / 6; grid-row: 1; }
  .servico-imagem { grid-column: 6 / 9; grid-row: 1; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; justify-self: stretch; }
}

@media (max-width: 1000px) {
  .servicos-cabecalho,
  .servicos-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 45px; }
  .servicos-cabecalho .rotulo { grid-column: 1; }
  .servicos-titulo { grid-column: 2; margin-left: 0; }
  .servicos-lista { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 12px 32px; }
  .servico-texto { grid-column: 1; }
  .servico-imagem { grid-column: 2; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; justify-self: stretch; }
}

@media (max-width: 720px) {
  .servicos-cabecalho,
  .servicos-grelha { grid-template-columns: 1fr; }
  .servicos-titulo { grid-column: auto; }
  .servicos-lista { flex-direction: column; }
  .servico-texto, .servico-imagem { grid-column: 1; }
  .servico-imagem { height: auto; aspect-ratio: 4 / 5; }
  /* Telemóvel: o detalhe de cada serviço aparece logo abaixo do botão carregado */
  .servicos-lista { display: contents; }
  .servicos-grelha { row-gap: 28px; }
  .servico-botao { grid-column: 1; justify-self: start; }
  #tab-1 { order: 1; }
  #servico-1 > * { order: 2; }
  #tab-2 { order: 3; }
  #servico-2 > * { order: 4; }
  #tab-3 { order: 5; }
  #servico-3 > * { order: 6; }
}

/* Quem somos: mesma lógica dos Serviços, sem imagem */
.quem-somos { padding-block: 120px; }
.quem-somos-grelha {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) repeat(3, minmax(0, 1fr));
  column-gap: 45px;
  align-items: start;
}
.quem-somos-rotulo { grid-column: 1; grid-row: 1; align-self: start; line-height: 28px; }
.qs-lista {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 118px; /* 90px entre o rótulo e a navegação, a contar a partir da linha do rótulo (28px) */
}
.qs-botao {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  text-align: left;
  cursor: pointer;
  text-underline-offset: 6px;
  white-space: nowrap;
}
.qs-botao.is-ativo { font-weight: 500; text-decoration: underline; }
.qs-botao:focus-visible { outline: 1px solid var(--brand); outline-offset: 4px; }
.qs-painel { grid-column: 3 / 5; grid-row: 1; }
.qs-painel[hidden] { display: none; }
.qs-painel h2 {
  margin: 0 0 clamp(20px, 2.08vw, 30px);
  font-weight: 400;
  font-size: clamp(30px, 3.33vw, 48px);
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.qs-painel p {
  margin: 0 0 24px;
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.01em;
}
.qs-pessoa { margin-bottom: 40px; }
.qs-nome { font-weight: 500; }
.qs-cargo { text-transform: lowercase; font-style: italic; }
.qs-linkedin { display: inline-flex; vertical-align: -3px; margin-left: 6px; color: inherit; opacity: .85; transition: opacity .25s ease; }
.qs-linkedin:hover, .qs-linkedin:focus-visible { opacity: 1; outline: none; }
.qs-linkedin svg { width: 16px; height: 16px; display: block; }

@media (max-width: 1000px) {
  .quem-somos-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qs-painel { grid-column: 2; }
}

@media (max-width: 720px) {
  .quem-somos-grelha { grid-template-columns: 1fr; row-gap: 40px; }
  .quem-somos-rotulo, .qs-lista, .qs-painel { grid-column: 1; grid-row: auto; }
  .qs-lista { margin-top: 0; }
  /* Telemóvel: o texto de cada opção aparece logo abaixo do botão carregado */
  .quem-somos-grelha { row-gap: 28px; }
  .qs-lista { display: contents; }
  .qs-botao { grid-column: 1; justify-self: start; }
  #qs-tab-1 { order: 1; }
  #qs-1 { order: 2; }
  #qs-tab-2 { order: 3; }
  #qs-2 { order: 4; }
  #qs-tab-3 { order: 5; }
  #qs-3 { order: 6; }
}

/* Parceiros: fundo azul mest, título alinhado com a imagem dos Serviços e logótipos a 90px do título */
.parceiros {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) repeat(3, minmax(0, 1fr));
  column-gap: 45px;
  align-items: start;
  background: var(--fundo);
  color: var(--paper);
  padding-block: 120px;
}
.parceiros-rotulo { grid-column: 1; grid-row: 1; margin: 0; line-height: 28px; color: var(--paper); }
.parceiros-titulo {
  grid-column: 3 / 5;
  grid-row: 1;
  margin: 0;
  font-weight: 400;
  font-size: clamp(30px, 3.33vw, 48px);
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.parceiros-grelha {
  grid-column: 1 / -1;
  grid-row: 2;
  contain: inline-size; /* o carrossel não aumenta as colunas da grelha */
  min-width: 0;
  margin: 90px calc(-1 * var(--margem)) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: 55px;
}
/* Logótipos em carrossel, com o mesmo comportamento do carrossel de trabalhos */
.parceiros-grelha .carrossel-logos { margin: 0; padding-inline: 0; align-items: center; gap: 90px; }
.parceiros-grelha .carrossel-logos .cartao { flex: 0 0 auto; width: auto; height: 90px; display: flex; align-items: center; }
.parceiros-grelha .carrossel-logos img { display: block; height: 90px; width: auto; max-width: none; max-height: 90px; aspect-ratio: auto; object-fit: contain; }

@media (max-width: 1000px) {
  .parceiros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parceiros-titulo { grid-column: 2; }
  .parceiros-grelha { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .parceiros { grid-template-columns: 1fr; }
  .parceiros-rotulo, .parceiros-titulo, .parceiros-grelha { grid-column: 1; grid-row: auto; }
  .parceiros-grelha { row-gap: 40px; margin-top: 48px; }
}

/* Fecho: imagem de ecrã inteiro, camada azul noite em multiply a 40%, texto alinhado com os títulos */
.fecho {
  position: relative;
  height: 100vh;
  min-height: 560px;
  padding: 0;
  overflow: hidden;
  background: var(--fundo);
  color: var(--paper);
}
.fecho-media, .fecho-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fecho-media img { object-fit: cover; }
.fecho-overlay { position: absolute; inset: 0; background: #0F1A2E; mix-blend-mode: multiply; opacity: .4; }
.fecho-conteudo {
  position: absolute;
  inset: 0;
  padding: 20vh 45px 0;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) repeat(3, minmax(0, 1fr));
  column-gap: 45px;
  align-content: start;
}
.fecho-titulo {
  grid-column: 3 / 5;
  margin: 0;
  font-weight: 400;
  font-size: clamp(30px, 3.33vw, 48px);
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--paper);
}
.fecho-frase {
  grid-column: 3 / 5;
  margin: 0;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(30px, 3.33vw, 48px);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--paper);
}
@media (max-width: 1000px) {
  .fecho-conteudo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fecho-titulo, .fecho-frase { grid-column: 2; }
}
@media (max-width: 720px) {
  .fecho-conteudo { grid-template-columns: 1fr; padding: 15vh 16px 0; }
  .fecho-titulo, .fecho-frase { grid-column: 1; }
}

/* Fecho: entrelinha de 57,6px (48px com 1,2) nos ecrãs grandes */
@media (min-width: 1441px) {
  .fecho-titulo, .fecho-frase { line-height: 57.6px; }
}

/* Contactos: mesma lógica dos Serviços (título a meio da página), formulário à direita */
.contactos {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) repeat(3, minmax(0, 1fr));
  column-gap: 45px;
  align-items: start;
  background: var(--fundo);
  color: var(--paper);
  padding-block: 120px;
  position: relative;
  overflow: hidden;
}
/* Marca de água por baixo dos textos */
.contactos > *:not(.contactos-marca) { position: relative; z-index: 1; }
.contactos-marca {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.contactos-rotulo { grid-column: 1; grid-row: 1; margin: 0; line-height: 28px; color: var(--paper); }
.contactos-titulo {
  grid-column: 3 / 5;
  grid-row: 1;
  margin: 0;
  font-weight: 400;
  font-size: clamp(30px, 3.33vw, 48px);
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.contactos-dados {
  grid-column: 1;
  grid-row: 2;
  margin-top: 90px;
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.01em;
}
.contactos-dados p { margin: 0 0 4px; }
.contactos-dados a { text-decoration: none; }
.contactos-dados a:hover { text-decoration: underline; }
.contactos-redes-titulo { margin-top: 60px !important; }
.contactos-redes { display: flex; gap: 14px; margin-top: 8px; }
.contactos-redes a { color: var(--paper); display: inline-flex; }
.contactos-redes svg { width: 28px; height: 28px; display: block; }
.formulario {
  grid-column: 3 / 5;
  grid-row: 2;
  margin-top: 90px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.campo { display: block; }
.campo input, .campo textarea {
  width: 100%;
  margin: 0;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.01em;
  border-radius: 0;
  resize: vertical;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--paper); opacity: 1; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-width: 2px; }
.formulario-botao {
  align-self: flex-start;
  margin-top: 40px;
  width: 120px;
  height: 50px;
  border-radius: 50px;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--paper);
  font: 400 14px/1 "DM Sans", ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.formulario-botao:hover, .formulario-botao:focus-visible { background: var(--paper); color: var(--brand); outline: none; }

/* Rodapé */
.rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 30px 45px;
  background: #102345;
  color: var(--paper);
  font-size: 14px;
}
.rodape p { margin: 0; }
.rodape-links { display: flex; gap: 32px; }
.rodape a { color: var(--paper); text-decoration: none; }
.rodape a:hover { text-decoration: underline; }

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

@media (max-width: 1000px) {
  .contactos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contactos-titulo, .formulario { grid-column: 2; }
  .contactos-dados { grid-column: 1; }
}

@media (max-width: 720px) {
  .contactos { grid-template-columns: 1fr; }
  .contactos-rotulo, .contactos-titulo, .contactos-dados, .formulario { grid-column: 1; grid-row: auto; }
  .contactos-dados, .formulario { margin-top: 48px; }
  .rodape { padding: 30px 16px; }
}

/* Serviços: linhas azul mest no limite superior e inferior da secção */
.servicos {
  border-top: 1px solid var(--brand);
  border-bottom: 1px solid var(--brand);
}

/* Página de projetos: fundo azul mest, mesmo cabeçalho e rodapé da página principal */
.pagina-projetos { background: var(--fundo); color: var(--paper); }
.projetos-pagina {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 45px;
  align-items: start;
  padding-block: 120px;
  padding-inline: 45px;
  background: var(--fundo);
  color: var(--paper);
}
.projetos-pagina-titulo {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-weight: 400;
  /* Tamanho máximo 48px; desce com o ecrã para o título ficar sempre numa linha */
  font-size: min(48px, calc(3.1vw - 4px));
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--paper);
}
/* Grelha de cartões: 4 por linha em ecrãs grandes, 3 em portáteis, 2 em tablet.
   A largura máxima impede que os cartões se afastem demasiado em 4K. */
.projetos-pagina-lista {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  max-width: 1800px;
  margin: 90px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 45px;
  row-gap: 90px;
}
/* Ecrãs grandes: 4 colunas */
@media (min-width: 1441px) {
  .projetos-pagina-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.projeto-cartao { display: block; text-decoration: none; color: var(--paper); min-width: 0; }
/* Capas sempre em 4:5 */
.projeto-cartao img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  pointer-events: none;
}
.projetos-pagina .projeto-cartao .cartao-nome,
.projetos-pagina .projeto-cartao .cartao-promotor { color: var(--paper); }
.projeto-cartao .cartao-nome {
  display: block;
  margin-top: 30px;
  font-weight: 300;
  font-size: clamp(20px, 2.08vw, 30px);
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.projeto-cartao .cartao-promotor {
  display: block;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(16px, 1.67vw, 24px);
  line-height: 1.2;
  letter-spacing: .1em;
}
.projeto-cartao:hover .cartao-nome { text-decoration: underline; text-underline-offset: 6px; }

@media (max-width: 720px) {
  .projetos-pagina { grid-template-columns: 1fr; padding-inline: 16px; }
  .projetos-pagina-titulo { grid-column: 1; grid-row: auto; font-size: 30px; white-space: normal; }
  .projetos-pagina-lista { grid-template-columns: 1fr; grid-row: auto; margin-top: 48px; }
  .projeto-cartao img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
}

/* Página de projeto: topo dividido ao meio (imagem vertical à esquerda, texto à direita) */
.pagina-projeto { background: var(--paper); color: var(--ink); }
.projeto-topo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  padding: 0;
}
.projeto-topo-imagem { margin: 0; height: 100vh; min-height: 560px; overflow: hidden; }
.projeto-topo-imagem img { display: block; width: 100%; height: 100%; object-fit: cover; }
.projeto-topo-texto {
  padding: calc(var(--header-h) + 150px) 45px 120px 60px;
  align-self: start;
}
.projeto-titulo {
  margin: 0 0 40px;
  font-weight: 400;
  font-size: clamp(36px, 3.33vw, 48px);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.projeto-descricao {
  margin: 0;
  font-weight: 300;
  font-size: 24px;
  line-height: 28.8px;
  letter-spacing: .01em;
  max-width: 34em;
}
.projeto-descricao em { font-style: italic; }
.projeto-descricao + .projeto-descricao { margin-top: 28.8px; }
/* Ficha técnica: 45px de espaço acima e abaixo da linha */
.projeto-ficha {
  list-style: none;
  margin: 45px 0 0;
  padding: 45px 0 0;
  border-top: 1px solid var(--stone);
  font-weight: 300;
  font-size: 21px;
  line-height: 28.8px;
  letter-spacing: .01em;
}
.projeto-ficha .ficha-rotulo { font-weight: 400; }
.projeto-ficha .ficha-grupo { margin-top: 28.8px; }

@media (max-width: 720px) {
  .projeto-topo { grid-template-columns: 1fr; min-height: 0; }
  .projeto-topo-imagem { height: 80vh; min-height: 0; }
  .projeto-topo-texto { padding: 48px 16px 80px; }
}

/* Página de projeto: navegação em mest tinta (azul escuro) sobre o fundo papel */
.pagina-projeto .site-header .nav a,
.pagina-projeto .site-header .nav a:hover { color: var(--ink); }
/* Cabeçalho com fundo azul (ao subir): navegação em mest papel */
.pagina-projeto .site-header.is-solid .nav a,
.pagina-projeto .site-header.is-solid .nav a:hover { color: var(--paper); }

/* Galeria do projeto: altura fixa de 500px, largura conforme cada imagem */
.projeto-galeria { padding-block: 120px; }
.projeto-galeria .carrossel img {
  display: block;
  height: 500px;
  width: auto;
  max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
  pointer-events: none;
}
.projeto-galeria .carrossel { list-style: none; margin: 0; }
.projeto-galeria .carrossel .cartao { display: block; flex: 0 0 auto; width: auto; }
/* Telemóvel (teste B): todas as imagens com 220 px de altura; as horizontais ocupam a largura do ecrã e aparecem completas (contain); carrossel sem margens laterais (como na home); espaçamento menor */
@media (max-width: 720px) {
  .projeto-galeria { padding-block: 48px; }
  .projeto-topo .projeto-topo-texto { padding-bottom: 0; }
  .projeto-galeria .carrossel {
    margin-inline: calc(-1 * var(--margem));
    padding-inline: var(--margem);
    gap: 20px;
  }
  .projeto-galeria .carrossel img { height: 220px; width: auto; max-width: none; }
}

/* Página de projeto: imagem de largura total antes dos contactos */
.projeto-hero { margin: 0; padding: 0; }
.projeto-hero img { display: block; width: 100%; height: auto; }
/* Imagem de marca (São Francisco): 120px de espaço acima, igual ao espaçamento da galeria */
.projeto-hero-brand { padding-top: 120px; }

/* Página de projeto: botão "Mais projetos" centrado, com o estilo pill do formulário */
.projeto-mais { display: flex; justify-content: center; padding-block: 90px; padding-inline: 45px; }
@media (max-width: 720px) { .projeto-mais { padding-block: 48px; } }
.projeto-mais-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 50px;
  padding-inline: 28px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: background-color .2s, color .2s;
}
.projeto-mais-botao:hover, .projeto-mais-botao:focus-visible { background: var(--ink); color: var(--paper); }

/* Página de projeto: vídeo promocional, limitado a 1600px e centrado */
.projeto-video { max-width: 1600px; margin: 0 auto; padding: 0 45px 120px; }
.projeto-video-quadro { position: relative; width: min(100%, calc((100vh - 230px) * 16 / 9)); margin-inline: auto; padding-top: calc(min(100%, calc((100vh - 230px) * 16 / 9)) * 9 / 16); background: var(--ink); }
.projeto-video-quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Página de projeto: o texto acompanha a altura do ecrã e fica sempre dentro da imagem de topo.
   Em 1080 px de altura (FullHD) ou mais, os tamanhos e espaços são os definidos; abaixo disso reduzem-se. */
/* Texto centrado verticalmente entre o fundo do cabeçalho e o fundo da imagem de topo.
   align-self: stretch faz com que a coluna ocupe toda a altura da imagem (a regra base tinha align-self: start). */
.projeto-topo-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  padding: var(--header-h) 45px 0 60px;
}
.projeto-titulo { font-size: clamp(32px, 4.44vh, 48px); margin-bottom: clamp(24px, 3.7vh, 40px); }
.projeto-descricao { font-size: clamp(17px, 2.22vh, 24px); line-height: 1.2; }
.projeto-descricao + .projeto-descricao { margin-top: 1.2em; }
.projeto-ficha {
  margin-top: clamp(24px, 4.17vh, 45px);
  padding-top: clamp(24px, 4.17vh, 45px);
  font-size: clamp(15px, 1.94vh, 21px);
  line-height: 1.37;
}
.projeto-ficha .ficha-grupo { margin-top: 1.37em; }
@media (max-width: 720px) {
  .projeto-topo-texto { padding: 48px 16px 80px; }
  .projeto-titulo { font-size: 30px; }
  .projeto-descricao { font-size: 18px; }
  .projeto-ficha { font-size: 16px; }
}

/* Cookies: banner de consentimento */
[hidden] { display: none !important; }
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 16px 32px;
  padding: 20px 45px;
  background: var(--ink); color: var(--paper);
  font-size: 15px; line-height: 1.5;
  box-shadow: 0 -8px 24px rgba(15, 26, 46, .18);
}
.cookies p { margin: 0; max-width: 760px; }
.cookies a { color: var(--paper); }
.cookies-botoes { display: flex; gap: 12px; flex-shrink: 0; }
.cookies .btn, .consentimento .btn, .legal .btn {
  margin-top: 0; width: auto; min-width: 120px; height: 44px; padding: 0 24px;
  border-color: var(--paper); color: var(--paper);
}
.cookies .btn:hover, .cookies .btn:focus-visible,
.consentimento .btn:hover, .consentimento .btn:focus-visible,
.legal .btn:hover, .legal .btn:focus-visible { background: var(--paper); color: var(--ink); }
.cookies .cookies-aceitar { background: var(--paper); color: var(--ink); }
.cookies .cookies-aceitar:hover, .cookies .cookies-aceitar:focus-visible { background: transparent; color: var(--paper); }
.legal .btn { color: var(--ink); border-color: var(--ink); }

/* Conteúdos de terceiros à espera de consentimento */
.consentimento {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 24px; text-align: center;
  background: var(--ink); color: var(--paper);
}
.consentimento p { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.5; }

/* Páginas legais: política de privacidade e de cookies */
.legal {
  max-width: 860px; margin: 0 auto;
  padding: calc(var(--header-h) + 80px) 45px 120px;
}
.legal h1 { font-weight: 400; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.1; margin: 0 0 16px; }
.legal h2 { font-weight: 500; font-size: 22px; margin: 48px 0 12px; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; }
.legal p { margin: 0 0 16px; }
.legal ul { padding-left: 20px; margin: 0 0 16px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--brand); }
.legal-atualizacao { color: var(--brand); font-size: 15px !important; margin-bottom: 40px !important; }
.legal mark { background: #FFE58A; color: var(--ink); padding: 0 4px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 16px 0 24px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--stone); }
.legal th { font-weight: 500; }
.legal p .btn { margin-top: 0; }

@media (max-width: 720px) {
  .cookies { padding: 20px 16px; }
  .cookies-botoes { width: 100%; }
  .cookies-botoes .btn { flex: 1; min-width: 0; }
  .legal { padding: calc(var(--header-h) + 48px) 16px 96px; }
  .legal table, .legal thead, .legal tbody, .legal tr, .legal th, .legal td { display: block; width: 100%; }
  .legal thead { display: none; }
  .legal td { padding: 2px 0; border-bottom: none; }
  .legal tr { padding: 12px 0; border-bottom: 1px solid var(--stone); }
}


/* Menu do telemóvel: a navegação passa a abrir pelo botão (evita quebras no cabeçalho) */
.menu-botao { display: none; }
@media (max-width: 720px) {
  .menu-botao {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 0; margin-right: -8px;
    background: none; border: 0; cursor: pointer; color: inherit;
  }
  .menu-botao span {
    display: block; height: 1.5px; width: 24px; margin-left: auto;
    background: currentColor; transition: transform .3s ease, opacity .3s ease;
  }
  .menu-botao.is-aberto span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-botao.is-aberto span:nth-child(2) { opacity: 0; }
  .menu-botao.is-aberto span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .site-header .nav {
    display: none; position: fixed; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px 45px 24px;
    background: var(--fundo); font-size: 14px;
  }
  .site-header .nav.aberto { display: flex; }
  .site-header .nav a { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .site-header .nav a.idioma { border-bottom: 0; }
  .pagina-projeto .site-header .nav.aberto a,
  .pagina-projeto .site-header .nav.aberto a:hover { color: var(--paper); }
}


/* Páginas legais (cookies e privacidade): cabeçalho claro e opaco, com texto escuro, para o texto nunca ficar por baixo */
.pagina-legal .site-header,
.pagina-legal .site-header.is-solid { background: var(--paper); color: var(--ink); }
.pagina-legal .site-header .nav a,
.pagina-legal .site-header.is-solid .nav a,
.pagina-legal .site-header .nav.aberto a,
.pagina-legal .site-header.is-solid .nav.aberto a { color: var(--ink); }
@media (max-width: 720px) {
  .pagina-legal .site-header .nav { background: var(--paper); }
}

/* Formulário: Telefone e Empresa lado a lado (em telemóvel passam para uma coluna) */
.campos-linha { display: flex; gap: 32px; }
.campos-linha .campo { flex: 1 1 0; min-width: 0; }
@media (max-width: 720px) { .campos-linha { flex-direction: column; gap: 0; } }

/* Ritmo vertical no telemóvel: 48 px entre secções, igual na home e nos projetos (24 px de cada lado) */
@media (max-width: 720px) {
  .projetos, .servicos, .quem-somos, .parceiros, .contactos { padding-block: 24px; }
  .projetos { padding-top: 48px; }
  .fecho { margin-block: 0; }
  .projeto-mais { padding-block: 48px; }
  .projeto-hero-brand { padding-top: 48px; }
  .projeto-video { padding-bottom: 48px; }
  .servicos-titulo { margin-top: 20px; }
}