/* ============================================================
   MVRK — folha de estilo base
   Mobile-first. Sem framework, sem build.
   Paleta e tipografia fechadas em Referencias/branding mvrk.jpg.
   ============================================================ */

/* ---------- 1. Fichas de identidade (tokens) ---------- */

:root {
  /* cor — nada fora destes valores */
  --preto:          #000000;
  --preto-elevado:  #0a0a0a;   /* faixa do rodapé, ligeiramente acima do preto */
  --branco:         #f2f2f2;   /* texto principal, quase-branco */
  --cinza:          #b5b5b5;   /* texto secundário */
  --cinza-fundo:    #797979;   /* micro-etiquetas, apoio */

  /* gradiente da identidade — só como textura/detalhe, nunca como fundo */
  --grad:           linear-gradient(135deg, #d9d9d9, #797979);
  --grad-filete:    linear-gradient(135deg, rgba(217,217,217,.42), rgba(121,121,121,.12));

  /* tipografia */
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ritmo */
  --gutter:    clamp(1.5rem, 5vw, 4.5rem);
  --largura:   1440px;
  --ar-seccao: clamp(5rem, 12vw, 10rem);

  /* movimento */
  --transicao: 480ms cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2. Reposição ---------- */

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

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

body {
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 1px solid var(--cinza);
  outline-offset: 4px;
}

.salta-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--branco);
  color: var(--preto);
  font-size: .8rem;
}
.salta-para-conteudo:focus { left: 0; }

/* ---------- 3. Peças reutilizáveis ---------- */

/* micro-etiqueta: maiúsculas pequenas, muito espaçadas — do mood da lcmedia */
.sobrancelha {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cinza-fundo);
}

/*
  Botão: filete de 1px feito com o gradiente da identidade, interior quase
  transparente para o vídeo respirar por baixo. Ao passar por cima, enche
  com o mesmo gradiente e o texto passa a preto.

  O filete é um ::before com máscara em vez de border-image, porque
  border-image ignora o border-radius e partia a forma de cápsula.
*/
.botao {
  position: relative;
  display: inline-block;
  padding: .95rem 2.25rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  color: var(--branco);
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color var(--transicao), background var(--transicao);
}

.botao::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.botao:hover,
.botao:focus-visible {
  background: var(--grad);
  color: var(--preto);
}

/* ---------- 4. Marca (símbolo + wordmark) ---------- */

.marca {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
}

.marca__simbolo {
  width: auto;
  height: 1.5rem;
  opacity: .92;
  transition: opacity var(--transicao);
}

/*
  Wordmark oficial (Referencias/MVRK logo.png, recortado à caixa).
  É uma imagem com o gradiente da marca gravado — por isso dimensiona-se
  pela altura e nunca se pinta por CSS.
*/
.marca__wordmark {
  height: .9375rem;
  width: auto;
  opacity: .92;
  transition: opacity var(--transicao);
}

.marca:hover .marca__simbolo,
.marca:hover .marca__wordmark { opacity: 1; }

/* no rodapé entra o lock-up completo: símbolo + wordmark */
.marca--rodape { gap: .75rem; }
.marca--rodape .marca__wordmark { height: .875rem; }

/* ---------- 5. Header ---------- */

.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background var(--transicao), border-color var(--transicao);
}

/* ao rolar, ganha um véu e um filete com o gradiente da identidade */
.cabecalho.esta-rolado {
  background: rgba(0, 0, 0, .78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-image: var(--grad-filete) 1;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.cabecalho__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 1.125rem var(--gutter);
}

.navegacao {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.navegacao a {
  position: relative;
  font-size: .75rem;
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--cinza);
  transition: color var(--transicao);
}

.navegacao a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.375rem;
  width: 100%;
  height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}

.navegacao a:hover { color: var(--branco); }
.navegacao a:hover::after { transform: scaleX(1); }

/* ---------- 6. Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;          /* conteúdo ancorado em baixo */
  /*
    A variável só existe (e só tem valor > 0) enquanto o aviso de cookies
    está visível — o JS mede a altura real da barra e escreve-a aqui. Sem
    aviso, var(..., 0px) não muda nada. Com aviso, o Hero encolhe
    exatamente o espaço da barra, para o CTA nunca ficar tapado por trás
    dela no primeiro ecrã.
  */
  min-height: calc(100vh - var(--aviso-cookies-altura, 0px));
  min-height: calc(100svh - var(--aviso-cookies-altura, 0px)); /* evita o salto da barra do browser em telemóvel */
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* o poster também entra como fundo: garante imagem mesmo que o .mp4 falhe */
  background: var(--preto) url("../../Hero/hero-poster.jpg") center / cover no-repeat;
}

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

/* vídeo ausente ou preferência de movimento reduzido — fica só o poster */
.hero__video.esta-oculto { display: none; }

/*
  Véu: o gradiente cinza da identidade a 135° por cima do vídeo (a textura
  pedida), somado a um escurecimento de baixo para cima que garante que o
  texto encostado em baixo é sempre legível.
*/
.hero__veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.72) 26%,
      rgba(0,0,0,.34) 62%,
      rgba(0,0,0,.42) 100%),
    linear-gradient(135deg, rgba(217,217,217,.16), rgba(121,121,121,.16));
}

.hero__conteudo {
  position: relative;
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3.5rem, 9vh, 6.5rem);
}

.hero__titulo {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 9.5vw, 6.5rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.005em;
  max-width: 16ch;
  text-wrap: balance;
}

/* o itálico serifado numa palavra é o que faz a frase ler como marca, não como slogan */
.hero__titulo em {
  font-style: italic;
  font-weight: 300;
}

.hero__sub {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  max-width: 46ch;
  font-size: clamp(.9375rem, 1.6vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.62;
  color: var(--cinza);
}

.hero__conteudo .botao { margin-top: clamp(2rem, 4.5vw, 2.75rem); }

.hero__meta {
  margin-top: 1.5rem;
  font-size: .6875rem;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cinza-fundo);
}

/*
  Segunda linha da localização: mais pequena que a de cima, mas na mesma
  cor. Baixar também o contraste punha texto de 10px abaixo do mínimo
  legível sobre o vídeo — a diferença de tamanho já dá a hierarquia.
*/
.hero__meta__nota {
  display: block;
  margin-top: .4375rem;
  font-size: .625rem;
  letter-spacing: .16em;
}

/* ---------- 7. Secções ---------- */

.seccao {
  max-width: var(--largura);
  margin-inline: auto;
  padding: var(--ar-seccao) var(--gutter);
}

.seccao--stub,
.seccao--filete {
  border-top: 1px solid transparent;
  border-image: var(--grad-filete) 1;
}

/* texto ainda por preencher — marcado no ecrã para não passar despercebido */
.por-preencher {
  color: var(--cinza-fundo) !important;
  text-decoration: underline dotted;
  text-underline-offset: .3em;
}

/* ---------- 7b. Trabalho ---------- */

.trabalho__lista {
  display: grid;
  gap: clamp(.375rem, 1vw, .75rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

/*
  Cada projeto é um bloco largo, empilhado — o layout da lcmedia.
  Em telemóvel fica 6:4 — mais largo que alto, mas ainda com altura
  suficiente para a capa respirar. Uma faixa cinematográfica num ecrã de
  375px ficaria uma nesga sem impacto nenhum, e é por isso que só abre
  para faixa a partir dos 1024px.
*/
.projeto {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 6 / 4;
  background: var(--preto-elevado);
  isolation: isolate;
}

.projeto__media { position: absolute; inset: 0; }

.projeto__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}

/* véu escuro para o texto ser sempre legível sobre a capa */
.projeto__veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0,0,0,.90) 0%,
      rgba(0,0,0,.52) 42%,
      rgba(0,0,0,.14) 100%),
    linear-gradient(135deg, rgba(217,217,217,.12), rgba(121,121,121,.12));
  transition: opacity var(--transicao);
}

.projeto__texto {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: clamp(1.25rem, 3.2vw, 2.5rem);
}

.projeto__titulo {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.6vw, 2.5rem);
  font-weight: 300;
  line-height: 1.08;
}

.projeto__tipo {
  margin-top: .625rem;
  font-size: .6875rem;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cinza);
  transition: color var(--transicao);
}

/*
  Capa do Projeto 1: o título do filme está gravado na imagem e tem de
  ficar legível, não cortado a meio.

  O ficheiro que este card usa (Capa-card.jpg) já vem sem as barras de
  letterbox — foram removidas no próprio ficheiro, não por zoom. A
  tentativa anterior, com transform: scale(), não servia: o
  object-position escolhe o recorte dentro da caixa e só depois é que o
  transform amplia o resultado já recortado, cortando mais 134px de cada
  lado. Mesmo com object-position a 0% a janela nunca chegava ao título.

  Sem zoom, o object-position volta a mandar sozinho no enquadramento.
  Medido no ficheiro: o bloco de texto ocupa x 115..440 dos 1280px; a
  janela visível tem 840px, e 15% coloca-a a começar aos 66 — o título
  cabe inteiro, com folga.

  A partir dos 1024px a faixa 2.6:1 é mais larga que o próprio ficheiro,
  logo não há recorte lateral e a percentagem deixa de ter efeito.
*/
.projeto--capa-com-barras .projeto__media img { object-position: 15% center; }

/* estado de hover visível: a capa aproxima, o véu alivia, o tipo acende */
.projeto:hover .projeto__media img,
.projeto:focus-visible .projeto__media img { transform: scale(1.045); }

.projeto:hover .projeto__veu,
.projeto:focus-visible .projeto__veu { opacity: .82; }

.projeto:hover .projeto__tipo,
.projeto:focus-visible .projeto__tipo { color: var(--branco); }

.stub__nota {
  margin-top: 1.25rem;
  max-width: 52ch;
  font-size: .875rem;
  color: #4a4a4a;
}

.stub__nota code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125em;
  color: var(--cinza-fundo);
}

/* ---------- 7c. Serviços ---------- */

/*
  "Cartão" aqui é um bloco com filete de 1px e uma elevação mínima de
  fundo — nunca sombra nem cantos redondos, que é o que faria isto
  parecer SaaS.
*/
.servico {
  /* guardado numa variável porque o carrossel das fases precisa de a
     anular para sangrar até às bordas do cartão */
  --pad-cartao: clamp(1.75rem, 4.5vw, 3.25rem);
  padding: var(--pad-cartao);
  background: var(--preto-elevado);
  border: 1px solid transparent;
  border-image: var(--grad-filete) 1;
}

.servicos .servico--principal { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.servicos .servico--secundario { margin-top: clamp(.375rem, 1vw, .75rem); }

.servico__titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.1;
  font-size: clamp(1.75rem, 5.2vw, 3rem);
}

/* o secundário é deliberadamente mais calado: hierarquia por peso, não por rótulo */
.servico--secundario .servico__titulo { font-size: clamp(1.375rem, 3.6vw, 2rem); }

.servico__lista {
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
}

.servico__lista li {
  padding: .875rem 0;
  border-top: 1px solid rgba(121, 121, 121, .22);
  font-size: clamp(.9375rem, 1.7vw, 1.0625rem);
  font-weight: 300;
  color: var(--cinza);
}

.servico__lista li:last-child { border-bottom: 1px solid rgba(121, 121, 121, .22); }

/* ---------- Como funciona (subordinado ao cartão principal) ---------- */

.fases {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: clamp(2.25rem, 5vw, 3.25rem);
  /* o divisor pedido: filete com o gradiente da identidade */
  border-top: 1px solid transparent;
  border-image: var(--grad) 1;
}

.fases__rotulo {
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cinza-fundo);
}

.fases__lista {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3rem);
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.fase__numero {
  display: block;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  color: var(--cinza-fundo);
}

.fase__titulo {
  margin: .875rem 0 0;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
}

.fase__texto {
  margin-top: .625rem;
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--cinza);
}

/* ---------- 7d. Contacto ---------- */

.contacto__fecho {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 26ch;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 300;
  line-height: 1.14;
}

/*
  Linha de apoio por baixo do fecho: sans-serif e bem mais pequena, para
  não competir com a frase serifada acima nem com os campos abaixo.
*/
.contacto__nota {
  margin-top: clamp(1rem, 2.5vw, 1.375rem);
  max-width: 46ch;
  font-size: clamp(.875rem, 1.6vw, .9375rem);
  font-weight: 300;
  line-height: 1.62;
  color: var(--cinza);
}

.formulario {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  max-width: 34rem;
}

.campo { margin-bottom: clamp(1.75rem, 4vw, 2.25rem); }

.campo__etiqueta {
  display: block;
  margin-bottom: .625rem;
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cinza-fundo);
}

/*
  Input sem caixa e sem sombra — só uma linha por baixo, como o campo do
  rodapé da real state. A linha é o gradiente da identidade esbatido, e
  acende ao focar.
*/
.campo__entrada {
  display: block;
  width: 100%;
  padding: .5rem 0 .75rem;
  border: 0;
  border-bottom: 1px solid rgba(121, 121, 121, .45);
  border-radius: 0;
  background: transparent;
  color: var(--branco);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  transition: border-color var(--transicao);
}

.campo__entrada--area {
  resize: vertical;
  min-height: 6.5rem;
}

.campo__entrada:hover { border-bottom-color: rgba(181, 181, 181, .7); }

.campo__entrada:focus {
  outline: none;
  border-bottom-color: #d9d9d9;
}

.campo__entrada:focus-visible { outline: none; }

/* o browser pinta o autofill de azul — anular sem perder a legibilidade */
.campo__entrada:-webkit-autofill,
.campo__entrada:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--branco);
  -webkit-box-shadow: 0 0 0 100px var(--preto) inset;
  caret-color: var(--branco);
}

.formulario .botao {
  margin-top: .5rem;
  cursor: pointer;
}

.formulario .botao[disabled] {
  opacity: .5;
  cursor: progress;
}

.formulario__erro {
  margin-top: 1.5rem;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--cinza);
}

.contacto__confirmacao {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 300;
  line-height: 1.16;
  color: var(--branco);
}

/* ============================================================
   7e. Página de projeto (Trabalhos/trabalho-N.html)

   Mesma identidade do resto do site — só mais funda em conteúdo.
   Reaproveita .seccao, .fases/.fase, .botao e .sobrancelha.
   ============================================================ */

/* o topo é fixo, por isso a página começa por baixo dele */
.projeto-pagina { padding-top: clamp(3.25rem, 7vw, 4.25rem); }

/*
  Ritmo próprio para as páginas de projeto: mais apertado que o da home.
  Na home o vazio é o que dá o ar de alto padrão; aqui a página é uma
  sequência contínua de imagens e texto, e o mesmo vazio só obrigava a
  rolar entre blocos que se querem lidos como um só.
*/
.projeto-pagina .seccao { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }

/* secção que segue outra sem precisar de respirar duas vezes */
.seccao--sem-topo { padding-top: 0; }

/* ---------- Link "← Trabalhos" do topo ---------- */

.voltar {
  font-size: .75rem;
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--cinza);
  transition: color var(--transicao);
}

.voltar:hover { color: var(--branco); }

.voltar__seta {
  display: inline-block;
  margin-right: .35em;
  transition: transform var(--transicao);
}

.voltar:hover .voltar__seta,
.fecho__saida:hover .voltar__seta { transform: translateX(-.2em); }

/* ---------- 2. Capa ---------- */

/*
  Faixa de cabeçalho: encosta às duas margens do ecrã (sem gutter nem
  max-width) e é baixa — funciona como banda de abertura, não como um
  bloco que ocupa o primeiro ecrã todo.

  Como o corte é vertical e agressivo, o object-position fica em 42% em
  vez de centrado: nestes frames o assunto está ligeiramente acima do
  meio, e um corte centrado começava a comer cabeças.
*/
.capa {
  position: relative;
  width: 100%;
  aspect-ratio: 2.2 / 1;
  overflow: hidden;
}

.capa__imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/*
  Mesmo véu da capa na home, mas mais leve: aqui não há texto por cima
  para proteger, só se quer a mesma textura.
*/
.capa__veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.10) 55%, rgba(0,0,0,.20) 100%),
    linear-gradient(135deg, rgba(217,217,217,.12), rgba(121,121,121,.12));
}

/* ---------- 3. Título + serviço/tipo ---------- */

/* o título cola-se mais à faixa de cima e ao vídeo de baixo */
.projeto-pagina .projeto-cabeca {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.projeto-cabeca__titulo {
  margin: 0;
  max-width: 20ch;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 7.5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.04;
  text-wrap: balance;
}

.projeto-cabeca__tipo {
  margin-top: clamp(.875rem, 2vw, 1.25rem);
  font-size: .6875rem;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cinza);
}

/* ---------- 4. Produto final ---------- */

.produto-final__moldura {
  position: relative;
  background: var(--preto-elevado);
  border: 1px solid transparent;
  border-image: var(--grad-filete) 1;
}

.produto-final__video,
.produto-final__iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--preto);
}

.produto-final__video { object-fit: cover; }

/* enquanto o ficheiro não existir, o JS tira os controlos e fica o poster */
.produto-final__video.sem-ficheiro { pointer-events: none; }

/* ---------- Fachada do vídeo (só carrega o YouTube ao clicar) ---------- */

.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: var(--preto);
  cursor: pointer;
  overflow: hidden;
}

.video-facade__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.video-facade__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.34), rgba(0,0,0,.52));
  transition: opacity var(--transicao);
}

.video-facade__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.video-facade__play svg {
  width: clamp(3rem, 8vw, 4.5rem);
  height: auto;
  transition: transform var(--transicao);
}

.video-facade:hover .video-facade__poster,
.video-facade:focus-visible .video-facade__poster { transform: scale(1.03); }

.video-facade:hover .video-facade__veu,
.video-facade:focus-visible .video-facade__veu { opacity: .72; }

.video-facade:hover .video-facade__play svg,
.video-facade:focus-visible .video-facade__play svg { transform: scale(1.07); }

/* ---------- 5. Resumo (reaproveita .fases) ---------- */

/*
  Formato alternativo do resumo: parágrafo simples, para trabalhos
  editoriais/autorais onde os 3 blocos não fazem sentido. Sans-serif —
  o serifado é para títulos, não para blocos de texto corrido.
*/
/*
  Formato único do resumo (decisão final, substitui os antigos 3 blocos
  Problema/O que fizemos/Resultado): um parágrafo corrido, seguido da
  lista curta de serviços por tópico.
*/
.resumo__texto {
  max-width: 62ch;
  font-size: clamp(1rem, 1.9vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.72;
  color: var(--cinza);
}

/* etiquetas, não frases — mesmo registo das micro-etiquetas do site */
.resumo__topicos {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: .6875rem;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cinza-fundo);
}

.resumo__topicos span { padding: 0 .5em; }

/* ---------- 6. Galeria ---------- */

/*
  Galeria em grelha de contacto: fotos pequenas, 2 por linha em
  telemóvel e 4 por linha em ecrã largo. Cada uma no rácio real do
  ficheiro — nada é esticado nem cortado.
*/
.galeria__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.375rem, 1vw, .75rem);
}

.galeria__item {
  width: 100%;
  height: auto;
}

/*
  As verticais vivem no seu próprio contentor, que ocupa a linha toda.
  Isso garante duas coisas: caem sempre numa linha nova (nunca ficam a
  preencher buracos no fim da grelha das horizontais) e ficam lado a
  lado. O max-width trava-as — maiores que as horizontais, sem passarem
  a ser o elemento dominante da página.
*/
.galeria__verticais {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.375rem, 1vw, .75rem);
  max-width: 34rem;
}

/*
  Variante mosaico, para projetos com muitas fotos de rácios diferentes
  misturados. Mantém o ritmo de colunas, mas as horizontais ocupam o
  dobro da largura das verticais — os tamanhos ficam misturados sem a
  grelha se desalinhar.

  align-items: start impede que uma foto baixa seja esticada até à
  altura da foto mais alta da mesma linha.
*/
.galeria__lista--mosaico {
  align-items: start;
  /* deixa o browser recuar e preencher buracos que sobrem numa linha */
  grid-auto-flow: dense;
}

/* em telemóvel (2 colunas) qualquer item "largo" ocupa a linha toda */
.galeria__lista--mosaico .galeria__item--largo,
.galeria__lista--mosaico .galeria__item--banda,
.galeria__lista--mosaico .galeria__item--destaque { grid-column: span 2; }

/* placa no lugar do vídeo, enquanto o produto final não existe */
.produto-final__placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ============================================================
   7f. Página legal (legal/*.html — políticas, informações legais)

   Prose simples: reaproveita .projeto-cabeca para o título e usa o
   mesmo ritmo/tokens do resto do site. h2 serifado só para separar
   blocos, parágrafos em sans-serif (o serifado é só para títulos).
   Sem caixas nem sombras — é texto corrido, não um "card".
   ============================================================ */

.pagina-legal__corpo {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 62ch;
}

.pagina-legal__bloco {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

.pagina-legal__titulo {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 400;
  color: var(--branco);
}

.pagina-legal__texto {
  font-size: clamp(.9375rem, 1.6vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.72;
  color: var(--cinza);
}

.pagina-legal__texto a {
  color: var(--branco);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: var(--cinza-fundo);
  transition: text-decoration-color var(--transicao);
}

.pagina-legal__texto a:hover { text-decoration-color: var(--branco); }

/* ---------- 7. Fecho ---------- */

.fecho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid transparent;
  border-image: var(--grad-filete) 1;
}

.fecho__saida {
  font-size: .75rem;
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--cinza);
  transition: color var(--transicao);
}

.fecho__saida:hover { color: var(--branco); }

.fecho__legal {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #4a4a4a;
}

/* ---------- 8. Rodapé ---------- */

.rodape {
  background: var(--preto-elevado);
  border-top: 1px solid transparent;
  border-image: var(--grad-filete) 1;
}

.rodape__interior {
  max-width: var(--largura);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 4.5rem) var(--gutter);
}

/* o <svg> que só existe para guardar o gradiente dos ícones */
.rodape__defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* ---------- Grelha do rodapé ----------
   Símbolo, contactos e legal. Dentro de cada coluna os itens empilham
   na vertical; as duas colunas ficam lado a lado.

   Em telemóvel o símbolo ocupa a linha inteira e as duas colunas
   dividem a largura por baixo dele. Em ecrã largo passa tudo a uma só
   linha, com o símbolo à esquerda e as colunas empurradas para a
   direita — o arranjo do rodapé da lcmedia.
------------------------------------------------------------------ */

.rodape__grelha {
  display: grid;
  gap: clamp(1.75rem, 5vw, 2.5rem);
  align-items: start;
}

.rodape__colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 4vw, 2rem);
  align-items: start;
}

/*
  O bloco encolhe à largura do lema (width: fit-content) e centra o que
  tem dentro — assim o símbolo fica centrado sobre a frase, em vez de
  alinhado ao canto esquerdo dela.
*/
.rodape__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}

.rodape__simbolo {
  display: inline-block;
  width: fit-content;
}

/* lema por baixo do símbolo — serifada, como os títulos da marca */
.rodape__lema {
  margin-top: .875rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--cinza);
}

.rodape__simbolo img {
  height: 2.25rem;
  width: auto;
  opacity: .92;
  transition: opacity var(--transicao);
}

.rodape__simbolo:hover img { opacity: 1; }

/* as duas colunas: itens uns por cima dos outros */
.rodape__canais,
.rodape__legal {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* contactos mais juntos que os legais — pedido explícito */
.rodape__canais { gap: .5rem; }
.rodape__legal  { gap: .8125rem; }

/*
  O <li> passa a flex para não gerar caixa de linha: com o <a> em
  inline-flex, a linha acrescentava ~5px de descida por baixo de cada
  contacto e o passo acabava maior que o da coluna legal, ao contrário
  do pretendido.
*/
.rodape__canais li { display: flex; }

.rodape__canais a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 300;
  color: var(--cinza);
  transition: color var(--transicao);
}

.rodape__canais a:hover,
.rodape__canais a:focus-visible { color: var(--branco); }

/* traço fino no gradiente da identidade — nunca cor de destaque */
.rodape__icone {
  width: 1.0625rem;
  height: 1.0625rem;
  flex: none;
  opacity: .8;
  transition: opacity var(--transicao);
}

.rodape__canais a:hover .rodape__icone,
.rodape__canais a:focus-visible .rodape__icone { opacity: 1; }

/* ---------- Nível 2: legal ----------
   Coluna ao lado dos contactos. A separação dos dois níveis é feita
   pelo peso visual — texto menor, mais apagado e sem ícones — e não
   por um filete, que aqui separaria colunas em vez de níveis.
------------------------------------------------------------------ */

.rodape__legal li {
  font-size: .75rem;
  font-weight: 300;
  color: var(--cinza-fundo);
}

/* quando cada página existir, o <span> passa a <a> e herda isto */
.rodape__legal a {
  color: inherit;
  transition: color var(--transicao);
}

.rodape__legal a:hover,
.rodape__legal a:focus-visible { color: var(--branco); }

/* ---------- Nível 3: copyright ----------
   A última linha, ainda mais apagada que a legal.
------------------------------------------------------------------ */

.rodape__copyright {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 3.5vw, 2rem);
  /* o filete fica aqui, a fechar o rodapé — a separar níveis, não colunas */
  border-top: 1px solid transparent;
  border-image: var(--grad-filete) 1;
  font-size: .6875rem;
  font-weight: 300;
  letter-spacing: .06em;
  color: #4a4a4a;
}

@media (min-width: 48rem) {
  /*
    Marca à esquerda e colunas à direita, mas nenhuma delas encostada à
    margem: os recuos laterais afastam-nas dos cantos e trazem o
    conteúdo para dentro.

    Com "1fr auto", as colunas ficam à direita e a marca fica com o
    resto — o recuo à direita é o que faz as colunas começarem já
    depois do meio da página, sem chegarem à borda.
  */
  .rodape__grelha {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .rodape__marca { padding-left: clamp(1.5rem, 6vw, 5rem); }

  .rodape__colunas {
    grid-template-columns: auto auto;
    gap: clamp(2rem, 5vw, 4rem);
    padding-right: clamp(1.5rem, 6vw, 5rem);
  }
}

/* ============================================================
   8b. "Como funciona" — 4 fases

   São 4 blocos, não 3, e por isso não passam logo a 4 colunas: dentro
   do cartão, quatro colunas antes dos 1200px deixariam ~170px de texto
   cada, e os parágrafos 03 e 04 (os mais longos) ficavam a escorrer em
   tiras de 3 palavras.

   O caminho é: empilhado no telemóvel, 2x2 em ecrã médio, e só a 4
   colunas quando há largura real. Os intervalos não se sobrepõem, para
   não ser preciso desfazer regras de nth-child de um bloco no outro.

   Filetes: separam as colunas na vertical e as linhas na horizontal —
   nunca na borda exterior do cartão, que já tem a sua.
   ============================================================ */

/* ---------- Setas do carrossel ----------
   Definidas antes da media query de propósito: o display:none tem de
   vir primeiro, senão ganha por ordem ao display:flex do telemóvel.
--------------------------------------------------------------- */

.fases__setas { display: none; }

.fases__seta {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;   /* alvo de toque confortável, mesmo com o traço fino */
  padding: 0;
  border: 0;
  background: none;
  color: var(--cinza-fundo);
  cursor: pointer;
  transition: color var(--transicao), opacity var(--transicao);
}

.fases__seta svg {
  width: 1.375rem;
  height: 1.375rem;
}

.fases__seta:hover:not([disabled]),
.fases__seta:focus-visible:not([disabled]) { color: var(--branco); }

/* no fim da faixa a seta apaga-se, para não prometer o que não há */
.fases__seta[disabled] {
  opacity: .25;
  cursor: default;
}

/* ---------- Telemóvel: carrossel horizontal ----------
   Empilhados, os 4 blocos davam uma coluna de texto corrido demasiado
   longa. Lado a lado, cada um lê-se como um passo do processo, e o
   bloco seguinte fica cortado na margem a dizer que há mais.

   O trilho sangra até às bordas do cartão (anula o padding e volta a
   pô-lo por dentro) — é isso que faz o bloco seguinte espreitar em vez
   de acabar antes da margem.
--------------------------------------------------------------- */
@media (max-width: 47.9375rem) {
  .fases__lista {
    display: flex;
    gap: clamp(.875rem, 3.5vw, 1.25rem);

    margin-inline: calc(-1 * var(--pad-cartao));
    padding-inline: var(--pad-cartao);
    scroll-padding-inline: var(--pad-cartao);

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    /* a barra de scroll nativa estragava a faixa; a navegação é o
       arrasto e as setas */
    scrollbar-width: none;
  }

  .fases__lista::-webkit-scrollbar { display: none; }

  /*
    Largura medida a partir do ecrã (vw), não em percentagem: a
    percentagem contaria a partir da caixa de conteúdo do trilho, já sem
    o padding, e dava blocos muito mais estreitos do que o esperado.

    O valor é 63vw e não 80vw porque a faixa vive dentro do cartão: a
    secção recua 25px de cada lado e o cartão outros 28, e a faixa não
    pode sair de lá sem cortar a borda. Medido a 375px: com 80vw
    sobravam 11px do bloco seguinte, com 68vw sobravam 28. A 63vw
    espreitam ~47px, que é o que torna o gesto óbvio sem apertar o
    texto abaixo das ~29 letras por linha.
  */
  .fase {
    flex: 0 0 63vw;
    scroll-snap-align: start;
  }

  /* setas: só existem aqui, onde há para onde deslizar */
  .fases__setas {
    display: flex;
    justify-content: flex-end;
    gap: .25rem;
    margin-top: 1rem;
  }
}

/*
  Empurrão único quando a secção entra no ecrã: o trilho desliza um
  pouco para a esquerda e volta. Transform em vez de scroll porque o
  scroll-snap puxaria o scroll de volta a meio da animação.
*/
@keyframes empurrao-fases {
  0%   { transform: translateX(0); }
  38%  { transform: translateX(-1.5rem); }
  100% { transform: translateX(0); }
}

.fases__lista.esta-a-empurrar {
  animation: empurrao-fases 1100ms cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 2x2 ---------- */
@media (min-width: 48rem) and (max-width: 74.9375rem) {
  .fases__lista {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .fase { padding: clamp(1.5rem, 3vw, 2.25rem); }

  /* coluna esquerda encosta à esquerda; direita encosta à direita */
  .fase:nth-child(odd)  { padding-left: 0; }
  .fase:nth-child(even) {
    padding-right: 0;
    border-left: 1px solid rgba(121, 121, 121, .22);
  }

  /* linha de cima encosta ao topo; a de baixo ganha filete e encosta ao fundo */
  .fase:nth-child(-n+2) { padding-top: 0; }
  .fase:nth-child(n+3) {
    padding-bottom: 0;
    border-top: 1px solid rgba(121, 121, 121, .22);
  }
}

/* ---------- 4 colunas ---------- */
@media (min-width: 75rem) {
  .fases__lista {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }

  /* recuo mais curto que o das 3 fases: com 4 colunas, cada píxel
     gasto entre elas sai do texto */
  .fase {
    padding-inline: clamp(1rem, 1.8vw, 1.75rem);
    border-left: 1px solid rgba(121, 121, 121, .22);
  }

  .fase:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .fase:last-child { padding-right: 0; }
}

/* ============================================================
   8c. Aviso de cookies

   Barra fixa no fundo do ecrã, injetada por JS (ver main.js) na
   primeira visita a qualquer página do site. O Google Analytics só
   carrega depois de "Aceitar" — nunca antes. A escolha (aceite ou
   recusado) fica guardada nesse navegador e o aviso não volta a
   aparecer, a não ser que a pessoa a mude pela Política de Cookies.
   ============================================================ */

.aviso-cookies {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: rgba(10, 10, 10, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid transparent;
  border-image: var(--grad-filete) 1;
}

.aviso-cookies__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 1.125rem var(--gutter);
}

.aviso-cookies__texto {
  flex: 1 1 40ch;
  font-size: .8125rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--cinza);
}

.aviso-cookies__texto a {
  color: var(--branco);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: var(--cinza-fundo);
  transition: text-decoration-color var(--transicao);
}

.aviso-cookies__texto a:hover { text-decoration-color: var(--branco); }

.aviso-cookies__acoes {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

/* "Recusar" fica discreto de propósito — mesmo registo do .voltar/.fecho__saida — para não competir com "Aceitar", que é a ação com destaque visual (.botao). Nenhuma das duas é pré-selecionada por CSS; a escolha é sempre um clique explícito. */
.aviso-cookies__recusar {
  padding: .65rem .25rem;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--cinza);
  cursor: pointer;
  transition: color var(--transicao);
}

.aviso-cookies__recusar:hover { color: var(--branco); }

.botao--aviso {
  flex-shrink: 0;
  padding: .65rem 1.75rem;
  font-size: .6875rem;
}

/* ---------- 9. Ecrãs maiores ---------- */

@media (min-width: 48rem) {
  .marca__simbolo { height: 1.75rem; }
  .cabecalho .marca__wordmark { height: 1.0625rem; }

  .projeto { aspect-ratio: 16 / 9; }


  /* o secundário recua para dar destaque ao principal */
  .servico--secundario { max-width: 62%; }

  /* a faixa de cabeçalho baixa mais à medida que o ecrã alarga */
  .capa { aspect-ratio: 3 / 1; }

  /* galeria: 4 horizontais por linha em ecrã largo */
  .galeria__lista { grid-template-columns: repeat(4, 1fr); }

  /*
    Mosaico em 4 colunas. A vertical em destaque ocupa 2x2: a altura de
    duas linhas de verticais (2 x 1.33 larguras de coluna) é quase
    exatamente a altura de uma vertical com o dobro da largura, por isso
    encaixa sem deixar buraco.
  */
  .galeria__lista--mosaico .galeria__item--banda { grid-column: span 4; }

  .galeria__lista--mosaico .galeria__item--destaque {
    grid-column: span 2;
    grid-row: span 2;
  }

  .rodape__interior {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
  }
}

/* em ecrã largo os blocos abrem para faixa cinematográfica, como na lcmedia */
@media (min-width: 64rem) {
  .projeto { aspect-ratio: 2.6 / 1; }

  /* a capa da página de projeto segue a mesma faixa das capas na home */
  .capa { aspect-ratio: 3.6 / 1; }
}

/* ---------- 10. Preferência de movimento reduzido ---------- */

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

  .hero__video { display: none; }   /* fica o poster estático */

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}