/* ==========================================================================
   Rudá Virginio — folha partilhada (tokens, nav, rodapé, base)
   Editada uma vez, vale para as três páginas.
   ========================================================================== */

:root{
  /* --- superfícies ------------------------------------------------------ */
  --bg:#ece9e2;          /* creme base */
  --bg-slot:#e2ded4;     /* espaço à espera de vídeo/imagem */
  --ink:#14130f;         /* 15.3:1 sobre o creme */
  --muted:#666055;       /*  5.1:1 — passa como texto de corpo */

  /* --- um único acento --------------------------------------------------
     4.6:1 sobre o creme e 3.5:1 sobre o reel escuro: funciona nos dois
     fundos, que é a razão de existir só um. Marca interação, nunca decora. */
  --accent:#c62d17;

  /* --- traços -----------------------------------------------------------
     rule  = divisória discreta (não é limite de UI, pode ser leve)
     edge  = limite real de um objeto (3.2:1, mínimo para limites de UI) */
  --rule:rgba(20,19,15,.18);
  --edge:rgba(20,19,15,.48);

  /* --- sobre o vídeo escuro --------------------------------------------- */
  --night:#121212;        /* preto das secções escuras */
  --blue:#a9c3e2;         /* azul pastel sobre o escuro */
  --blue-deep:#43648f;    /* o mesmo azul, legível sobre o papel */
  --on-dark:#f4f2ec;
  --on-dark-soft:rgba(244,242,236,.78);

  /* --- tipografia -------------------------------------------------------
     Uma família só, duas funções, separadas por peso — não por família.
     Outfit partilha a geometria de compasso do logótipo MOTION.VIRG:
     bojos circulares, monolinear, peso alto. */
  --font:"Outfit","Helvetica Neue",Helvetica,Arial,sans-serif;

  --step-display:clamp(2.6rem,7.4vw,7rem);
  --step-title:clamp(2rem,4.4vw,3.6rem);
  --step-lead:clamp(1.05rem,1.5vw,1.3rem);
  --step-body:1rem;
  --step-small:.875rem;

  --nav-h:74px;
  --pad-x:6vw;
  /* Goteira comum: acompanha a margem em ecrãs estreitos e, a partir do
     momento em que o conteúdo atinge o teto de 1240px, passa a acompanhar a
     coluna. Assim o texto e o vídeo partilham sempre a mesma linha à
     esquerda, seja qual for o monitor. */
  --stage-max:1240px;
  --gutter:max(var(--pad-x), calc((100% - var(--stage-max)) / 2));
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* sem isto, um display: flex ou grid ganha ao atributo hidden */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--step-body); font-weight:400;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}


/* --- display ------------------------------------------------------------
   O peso, não a cor nem o itálico, é o que cria ênfase neste site. */
.display{
  font-weight:900; letter-spacing:-.045em; line-height:.95;
  text-wrap:balance;
}

/* --- foco -----------------------------------------------------------------
   Estava ausente em todo o site. Sem isto ninguém navega por teclado. */
:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}
:focus:not(:focus-visible){ outline:none; }
.on-dark :focus-visible,
html.hero-dark header :focus-visible{ outline-color:var(--on-dark); }

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.skip-link{
  position:absolute; left:var(--pad-x); top:-4rem; z-index:200;
  background:var(--ink); color:var(--bg); padding:.7em 1.1em;
  text-decoration:none; font-weight:600; font-size:var(--step-small);
  transition:top .2s ease;
}
.skip-link:focus{ top:.6rem; }

/* ===== NAV ============================================================== */
/* A barra fica por cima do conteúdo, por isso leva um fundo translúcido com
   desfoque: o que passa por baixo continua a ver-se, e o texto lê-se sempre.
   A cor inverte-se quando a barra está sobre uma secção escura — sem isso o
   logótipo e os links desapareciam no preto. */
header{
  position:fixed; top:0; left:0; width:100%; height:var(--nav-h);
  display:flex; align-items:center; justify-content:center; z-index:100;
  background:color-mix(in oklch, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
  transition:background .45s ease, color .45s ease;
}
header::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--rule); transition:background .45s ease;
}

/* sobre secção escura */
html.nav-light header{ background:color-mix(in oklch, var(--night) 62%, transparent); }
html.nav-light header::after{ background:rgba(244,242,236,.2); }
html.nav-light .logo a,
html.nav-light nav a.link,
html.nav-light .lang button{ color:var(--on-dark); }
html.nav-light nav a.link::after{ background:var(--blue); }
.logo a, nav a.link, .lang button{ transition:color .45s ease, opacity .25s ease; }

.logo{ position:absolute; left:var(--pad-x); top:0; height:var(--nav-h); display:flex; align-items:center; }
.logo a{
  display:block; width:124px; aspect-ratio:3360/745; color:var(--ink);
  background-color:currentColor;
  -webkit-mask:url(../img/logo.svg) no-repeat center/contain;
  mask:url(../img/logo.svg) no-repeat center/contain;
}

nav{ display:flex; align-items:center; gap:34px; font-size:var(--step-small); font-weight:500; }
nav a.link{
  color:var(--ink); text-decoration:none; position:relative; padding:6px 2px;
  opacity:.7; transition:opacity .25s ease;
}
nav a.link:hover, nav a.link:focus-visible, nav a.link.current{ opacity:1; }
nav a.link::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
nav a.link:hover::after, nav a.link.current::after{ transform:scaleX(1); }

/* --- idioma: texto, não bandeiras ---------------------------------------
   Bandeiras são países, não línguas. E o estado ativo passa a ser dito
   ao leitor de ecrã por aria-pressed, não só por uma sombra. */
.lang{
  position:absolute; right:var(--pad-x); top:0; height:var(--nav-h);
  display:flex; align-items:center; gap:2px;
}
.lang button{
  font:inherit; font-size:var(--step-small); font-weight:500;
  background:none; border:0; padding:6px 8px; cursor:pointer;
  color:var(--ink); opacity:.45; transition:opacity .25s ease;
}
.lang button:hover{ opacity:.8; }
.lang button[aria-pressed="true"]{ opacity:1; font-weight:700; }
.lang .sep{ opacity:.3; font-size:var(--step-small); }

/* ===== RODAPÉ =====
   Azul pastel para separar do creme do resto: fecha a página com uma cor em
   vez de uma linha. O logótipo grande em baixo assina, e a chamada à ação
   vem antes de tudo o resto — é a única coisa que se quer que aconteça aqui. */
.site-footer{
  --footer-bg:#cdd9e4;
  position:relative; z-index:1; margin-block-start:0;
  background:var(--footer-bg); color:var(--ink);
  padding:clamp(64px,10vh,140px) var(--gutter) 0;   /* zero em baixo: o logótipo assenta no chão */
  overflow:hidden;
}

.site-footer .cta{ display:flex; flex-wrap:wrap; align-items:end;
  justify-content:space-between; gap:clamp(28px,4vw,72px); }
.site-footer h2{
  font-size:clamp(1.9rem,4.6vw,4rem); font-weight:900; letter-spacing:-.045em;
  line-height:1.02; max-inline-size:16ch; text-wrap:balance; }

.site-footer .btn{
  display:inline-block; flex:none; text-decoration:none;
  background:var(--ink); color:var(--footer-bg);
  font-size:var(--step-body); font-weight:600; letter-spacing:-.01em;
  padding:1.05em 1.9em; border-radius:100px;
  transition:background .3s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.site-footer .btn:hover, .site-footer .btn:focus-visible{
  background:var(--accent); transform:translateY(-2px); }

.site-footer .social{
  display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,48px);
  margin-block-start:clamp(48px,7vh,96px);
  padding-block-end:clamp(40px,6vh,72px);
  border-block-end:1px solid rgba(20,19,15,.16);
  font-size:var(--step-small); }
.site-footer .social a{
  display:inline-flex; align-items:center; gap:.55em;
  color:var(--ink); text-decoration:none; position:relative; padding-block-end:3px; }
.site-footer .social svg{ inline-size:1.15em; block-size:1.15em; flex:none; fill:currentColor; }
.site-footer .social a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; inline-size:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.16,1,.3,1); }
.site-footer .social a:hover::after, .site-footer .social a:focus-visible::after{ transform:scaleX(1); }

/* assinatura: o logótipo à largura toda, a sangrar em baixo */
/* Sangra de margem a margem e passa dos limites de propósito: as pontas
   ficam cortadas, que é o efeito pretendido. */
.foot-logo{
  margin-block-start:clamp(20px,3vh,44px);
  margin-block-end:0;   /* encostado ao fundo: quem corta as letras é o limite do rodapé */
  /* --gutter tem uma percentagem lá dentro e resolve-se contra o contentor de
     cada elemento: no rodapé dá um valor, aqui dava outro, e as pontas não
     coincidiam. Aqui a largura é do ecrã, não do contentor. */
  position:relative; inline-size:100vw;
  margin-inline-start:50%; translate:-50% 0;
  /* A caixa é mais baixa do que a altura natural do logótipo e a máscara é
     mais larga que o ecrã: por isso corta nos lados e em baixo, ficando só
     a faixa central das letras. É o efeito da referência. */
  /* +15%: mostra-se mais da altura das letras antes de o chão as cortar.
     É a própria linha de corte que define onde o logótipo assenta. */
  block-size:clamp(106px, 15vw, 270px);
  background-color:#fff;
  -webkit-mask:url(../img/logo.svg) no-repeat center top / 120% auto;
  mask:url(../img/logo.svg) no-repeat center top / 120% auto; }

.foot-legal{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  padding-block:clamp(20px,3vh,32px) 0;
  font-size:var(--step-small); color:rgba(20,19,15,.72); }
.foot-legal a{ color:inherit; text-decoration:none; border-block-end:1px solid rgba(20,19,15,.3); }
.foot-legal a:hover{ color:var(--ink); border-color:var(--ink); }

/* ===== RODAPÉ COMPACTO — About e Work =====
   Mesma linguagem da inicial, um terço da altura. Sem chamada à ação: essa
   vive só na página principal, para não competir consigo mesma. */
.site-footer.compact{ padding-block-start:clamp(14px,1.8vh,20px); }
.site-footer.compact .foot-row{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:18px clamp(24px,4vw,56px);
  padding-block-end:clamp(10px,1.4vh,14px);
  border-block-end:1px solid rgba(20,19,15,.16); }
.site-footer.compact .foot-mail a{
  color:var(--ink); text-decoration:none; font-size:var(--step-small);
  border-block-end:1px solid var(--edge); padding-block-end:2px; }
.site-footer.compact .foot-mail a:hover{ color:var(--accent); border-color:var(--accent); }
.site-footer.compact .foot-legal{
  display:flex; align-items:baseline; gap:clamp(18px,2.6vw,40px);
  padding-block:0; font-size:var(--step-small); }
.site-footer.compact .foot-legal a{ border-block-end:1px solid rgba(20,19,15,.3); }
/* Voltar ao topo: a seta é ::after para o tradutor poder trocar só o texto.
   Sobe um pouco ao passar o rato — o gesto diz o que o botão faz. */
.site-footer.compact .foot-legal .to-top::after{
  content:"\2191"; display:inline-block; margin-inline-start:7px;
  transition:transform .3s cubic-bezier(.16,1,.3,1); }
.site-footer.compact .foot-legal .to-top:hover::after,
.site-footer.compact .foot-legal .to-top:focus-visible::after{ transform:translateY(-3px); }
/* O logo.svg tem quase 30% de espaço vazio por cima das letras: numa faixa
   curta esse vazio comia tudo e só assomavam os bicos das letras. Aqui usa-se
   a versão com a caixa cortada rente ao desenho, por isso o que a faixa mostra
   é letra e não ar. De margem a margem, cortado só pelo chão da página. */
.site-footer.compact .foot-logo{
  margin-block-start:clamp(10px,1.4vh,16px);
  block-size:clamp(26px, 5vw, 96px);   /* ~40% da altura das letras em qualquer ecrã: o corte é sempre o mesmo */
  -webkit-mask-image:url(../img/logo-crop.svg);
  mask-image:url(../img/logo-crop.svg);
  -webkit-mask-size:100% auto; mask-size:100% auto; }

@media (max-width:560px){
  .site-footer.compact .foot-row{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:720px){
  .site-footer .cta{ align-items:start; }
  .site-footer .btn{ inline-size:100%; text-align:center; }
}

/* ===== ESPAÇO À ESPERA DE MEDIA =========================================
   Sem grelhas de wireframe: um plano liso e calado. Quando o vídeo ou a
   imagem entrarem, preenchem por cima e isto desaparece. */
.slot{ background:var(--bg-slot); position:relative; overflow:hidden; }
.slot > video, .slot > img, .slot > iframe{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border:0; z-index:1;
}
.slot-mark{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--edge); opacity:.5;
}

@media (max-width:720px){
  :root{ --pad-x:4vw; }
  nav{ gap:16px; }
  .logo a{ width:clamp(62px,20vw,88px); }
}

/* Abaixo de 560px a nav centrada e o seletor de idioma absoluto disputam o
   mesmo espaço e acabam por se tocar. Aqui o header deixa de posicionar por
   absoluto e passa a ser uma linha: logo | nav | idioma. Nada colide porque
   nada está sobreposto. */
@media (max-width:560px){
  header{ justify-content:space-between; padding:0 var(--pad-x); gap:10px; }
  .logo, .lang{ position:static; height:auto; }
  nav{ gap:14px; font-size:.82rem; }
  .lang button{ padding:6px 4px; font-size:.82rem; }
  .logo a{ width:clamp(56px,17vw,78px); }
}
/* Cinco entradas de menu — Início, Trabalhos, Lab, Sobre, Contacto — mais o
   logótipo e o PT/EN não cabem na largura de um telemóvel: em português, a
   320px faltam 70px, a 375px o "EN" encosta ao rebordo do ecrã e só por
   volta dos 470px é que a linha respira. E um menu espremido até ao
   ilegível deixa de ser um menu.

   Por isso, em ecrãs de telemóvel o header passa a duas filas: logótipo e
   idioma em cima, navegação por baixo, ambos em tamanho legível. A altura
   nova fica registada no --nav-h, que é o que todas as páginas usam para
   saber onde começar o conteúdo. */
@media (max-width:479px){
  :root{ --nav-h:102px; }
  header{ flex-wrap:wrap; align-content:center; }
  .logo{ order:1; }
  .lang{ order:2; }
  nav{ order:3; flex-basis:100%; justify-content:center;
    gap:clamp(12px,4.5vw,26px); font-size:.86rem; margin-block-start:2px; }
  .lang button{ padding:6px 4px; font-size:.86rem; }
  .logo a{ width:clamp(56px,17vw,78px); }
}

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

/* ===== TRANSIÇÃO ENTRE PÁGINAS ===========================================
   Um sólido azul sobe do fundo, tapa a página, e do outro lado continua a
   subir e descortina a que vem a seguir. São duas metades do mesmo gesto:
   a primeira acontece antes de navegar, a segunda à chegada. */
.wipe{
  position:fixed; inset:0; z-index:9997; background:var(--blue);
  transform:translateY(100%); pointer-events:none;
  will-change:transform;
}
/* o monograma viaja dentro do sólido — é o que o torna nosso e não genérico */
.wipe::after{
  content:""; position:absolute; inset:0; margin:auto;
  inline-size:min(26vw,260px); aspect-ratio:648/745;
  background-color:rgba(20,19,15,.14);
  -webkit-mask:url(../img/mv.svg) no-repeat center/contain;
  mask:url(../img/mv.svg) no-repeat center/contain;
}
html.wipe-out .wipe{ animation:wipeCover .56s cubic-bezier(.76,0,.24,1) forwards; }
html.wipe-in  .wipe{ animation:wipeReveal .74s cubic-bezier(.76,0,.24,1) .05s both; }
@keyframes wipeCover { from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@keyframes wipeReveal{ from{ transform:translateY(0); }    to{ transform:translateY(-101%); } }

@media (prefers-reduced-motion:reduce){
  html.wipe-out .wipe, html.wipe-in .wipe{ animation:none; }
}

/* ===== CAIXA DE CONTACTO =================================================
   Abre no "Contacto" do menu e no "Vamos conversar" dos projetos.

   É irmã da caixa do briefing (css/brief.css) e veste-se como ela: a mesma
   faixa azul com um pedaço do logótipo, o mesmo painel escuro, campos com
   um traço por baixo em vez de moldura, e o rodapé separado por uma linha
   com os botões à direita. As duas têm de parecer a mesma casa.

   Os estilos estão aqui e não no brief.css porque o brief.css só é
   carregado na página inicial, e esta caixa existe nas onze páginas.
   Ver js/contacto.js — a caixa é montada lá, não está escrita no HTML.
   ======================================================================== */
html.cx-aberta{ overflow:hidden; }

.cx{
  --panel:#121212;
  --panel-2:#1c1c1c;
  --line-d:rgba(244,242,236,.16);
  border:0; padding:0; background:none;
  margin:auto;                      /* o reset global apaga o auto do browser */
  inline-size:min(640px, 94vw); max-block-size:92dvh;
  color:var(--on-dark);
}
.cx::backdrop{ background:rgba(20,19,15,.55); backdrop-filter:blur(3px); }

.cx-shell{
  position:relative; background:var(--panel); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column; max-block-size:92dvh;
}

/* ---- faixa de entrada: o mesmo pedaço de logótipo da caixa do briefing,
        numa banda mais baixa porque aqui o formulário é curto ---- */
.cx-cover{ position:relative; flex:none; aspect-ratio:16/3; background:var(--blue); overflow:hidden; }
.cx-cover::before{
  content:""; position:absolute; inset:-25% -10%;
  background-color:var(--bg);
  /* 170% e não os 240% do briefing: a banda aqui é mais baixa, e com a mesma
     ampliação as letras ficavam barras abstratas em vez de um logótipo cortado */
  -webkit-mask:url(../img/logo.svg) no-repeat 34% center / 170% auto;
  mask:url(../img/logo.svg) no-repeat 34% center / 170% auto;
}
.cx-x{
  position:absolute; inset-block-start:10px; inset-inline-end:10px; z-index:3;
  inline-size:40px; block-size:40px; display:grid; place-items:center;
  background:rgba(18,18,18,.7); color:var(--on-dark);
  border:0; border-radius:50%; cursor:pointer; font:inherit; font-size:1.1rem; line-height:1;
  transition:background .25s ease;
}
.cx-x:hover, .cx-x:focus-visible{ background:var(--panel); }

.cx-body{ padding:clamp(24px,3.6vw,38px); overflow-y:auto; }
.cx-t{ font-size:clamp(1.4rem,2.6vw,2rem); font-weight:800; letter-spacing:-.03em; }
.cx-sub{ margin-block-start:.6em; color:rgba(244,242,236,.7);
  line-height:1.6; max-inline-size:48ch; }

/* ---- campos: traço por baixo, como no briefing ---- */
.cx-grid{ margin-block-start:1.2rem; display:grid; gap:.2rem 1.6rem;
  grid-template-columns:1fr 1fr; }
.cx-larga{ grid-column:1 / -1; }
.cx-f{ display:block; min-inline-size:0; margin-block-start:1.3rem; }
.cx-f > span{ display:block; font-size:var(--step-small);
  color:rgba(244,242,236,.75); margin-block-end:.5em; }
.cx-f input, .cx-f textarea{
  inline-size:100%; background:none; color:var(--on-dark);
  border:0; border-block-end:1px solid var(--line-d);
  padding:.6em 0; font:inherit; font-size:1.05rem;
  transition:border-color .25s ease;
}
.cx-f textarea{ min-block-size:4.6em; resize:vertical; }
.cx-f input::placeholder, .cx-f textarea::placeholder{ color:rgba(244,242,236,.34); }
.cx-f input:focus, .cx-f textarea:focus{ outline:none; border-block-end-color:var(--blue); }
.cx-f input.cx-mau, .cx-f textarea.cx-mau{ border-block-end-color:#ff8b7a; }
/* escondido enquanto não houver erro, como no briefing; quando aparece, o
   campo em falta recebe o cursor e fica à vista */
.cx-erro{ display:none; font-style:normal; font-size:.8rem; line-height:1.3;
  color:#ff8b7a; margin-block-start:.5em; }
.cx-erro:not(:empty){ display:block; }

/* a mensagem escrita, no segundo ecrã: fica à vista para poder ser copiada
   à mão quando o browser recusa a área de transferência */
.cx-copia{
  inline-size:100%; margin-block-start:1.4rem; font:inherit; font-size:.92rem;
  line-height:1.5; color:rgba(244,242,236,.82); resize:vertical;
  background:var(--panel-2); border:1px solid var(--line-d); border-radius:5px;
  padding:.8em .9em;
}
.cx-copia:focus-visible{ outline:0; border-color:var(--blue); }

/* ---- rodapé do diálogo ---- */
.cx-foot{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:.95rem clamp(24px,3.6vw,38px) 1.25rem;
  border-block-start:1px solid var(--line-d);
}
.cx-nota{ font-size:var(--step-small); color:rgba(244,242,236,.55); }
.cx-nav{ display:flex; gap:8px; flex:none; }
.cx-b{
  font:inherit; font-size:.95rem; font-weight:600; cursor:pointer;
  border:0; border-radius:5px; padding:.75em 1.4em;
  background:var(--blue); color:var(--panel); text-decoration:none; text-align:center;
  transition:filter .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.cx-b:hover, .cx-b:focus-visible{ filter:brightness(1.08); transform:translateY(-1px); }
.cx-ghost{ background:none; color:rgba(244,242,236,.7); border:1px solid var(--line-d); }
.cx-ghost:hover, .cx-ghost:focus-visible{ color:var(--on-dark); border-color:var(--on-dark); filter:none; }

@media (max-width:640px){
  .cx-cover{ aspect-ratio:16/4; }
  .cx-grid{ grid-template-columns:1fr; }
  .cx-foot{ flex-wrap:wrap; }
  .cx-nota{ order:2; flex-basis:100%; }
  .cx-nav{ flex:1 1 auto; }
  .cx-nav .cx-b{ flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce){
  .cx-b, .cx-x{ transition:none; }
}