/* ═══════════════════════════════════════════════════════════════════
   Cinescópio · site.css
   Componentes. Os valores vêm todos dos tokens do base.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────── Tecla amarela ─────────────────────────
   O botão de destaque é uma tecla de arcada: a cara amarela em cima e a
   base mais escura visível por baixo. Ao carregar, a cara desce até à base. */
.tecla{
  --base:3px;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:42px;
  padding:0 var(--sp-3) 0 15px;
  background:var(--yellow);
  color:var(--bg);
  font-size:15px; font-weight:700; letter-spacing:.005em;
  border-radius:var(--r-sm);
  box-shadow:0 var(--base) 0 var(--yellow-press);
  transform:translateY(0);
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
  white-space:nowrap;
}
.tecla svg{ width:13px; height:13px; flex:none; }
.tecla:hover{ transform:translateY(-1px); box-shadow:0 calc(var(--base) + 1px) 0 var(--yellow-press); }
.tecla:active{ transform:translateY(var(--base)); box-shadow:0 0 0 var(--yellow-press); }

/* ───────────────────────── Seletor de idioma ───────────────────────── */
.idioma{
  display:flex; align-items:center; gap:2px;
  font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em;
}
.idioma a{
  display:inline-grid; place-items:center;
  min-width:30px; min-height:30px;
  color:var(--text-2);
  border-radius:var(--r-sm);
  transition:color var(--t-fast);
}
.idioma a:hover{ color:var(--text); }
.idioma a[aria-current="true"]{ color:var(--text); }
.idioma__sep{ color:var(--line); font-weight:400; }

/* ───────────────────────── Navbar ───────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; gap:var(--sp-4);
  padding-inline:var(--gutter);
  background:var(--bg) var(--grao);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-mid);
}
/* O filete só aparece quando a página já desceu: no topo a navbar
   confunde-se com o fundo e o hero fica a respirar. */
.nav.is-rolada{ border-bottom-color:var(--line); }

.nav__logo{
  flex:none;
  display:block;
  margin-right:auto;
  border-radius:var(--r-sm);
}
.nav__logo img{ width:auto; height:28px; }

.nav__links ul{ display:flex; align-items:center; gap:clamp(var(--sp-3), 2.4vw, var(--sp-5)); }
.nav__links a{
  position:relative;
  display:inline-flex; align-items:baseline; gap:7px;
  padding-block:var(--sp-2);
  font-size:15.5px; font-weight:500;
  color:var(--text-2);
  transition:color var(--t-fast);
}
/* O número do canal à frente de cada secção. */
.nav__ch{
  font-family:var(--font-tv);
  font-size:17px; line-height:1;
  color:var(--yellow);
  opacity:.75;
  transition:opacity var(--t-fast);
}
.nav__links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:3px;
  height:2px;
  background:var(--yellow);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-mid) var(--ease-out);
}
.nav__links a:hover,
.nav__links a.is-ativo{ color:var(--text); }
.nav__links a:hover .nav__ch,
.nav__links a.is-ativo .nav__ch{ opacity:1; }
.nav__links a.is-ativo::after{ transform:scaleX(1); }

.nav__acoes{ display:flex; align-items:center; gap:var(--sp-4); }

/* O botão do menu é o anel do logótipo. Só existe no telemóvel. */
.nav__anel{
  display:none;
  min-height:46px; padding:0 0 0 10px;
  margin-right:-6px;
  align-items:center; gap:8px;
  border-radius:23px;
  position:relative; z-index:2;
  font-family:var(--font-tv); font-size:20px; line-height:1;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text);
}
/* "Menu" sobe e dá lugar a "Fechar", como o texto do StaggeredMenu. */
.nav__anel-texto{ display:block; height:1em; overflow:hidden; }
.nav__anel-texto span{ display:block; height:1em; transition:transform 550ms cubic-bezier(.16, 1, .3, 1); }
.nav__anel[aria-expanded="true"] .nav__anel-texto span{ transform:translateY(-100%); }
.nav__anel img{
  width:34px; height:34px;
  transition:transform var(--t-slow) var(--ease-tv);
}
.nav__anel[aria-expanded="true"] img{ transform:rotate(225deg) scale(.92); }

@media (max-width:860px){
  .nav__links,
  .nav__acoes > .idioma,
  .nav__acoes > .tecla{ display:none; }
  .nav__anel{ display:inline-flex; }
  .nav__logo img{ height:21px; }
}

/* ───────────────────────── Menu do telemóvel ─────────────────────────
   StaggeredMenu do React Bits portado à mão (2026-10-04). Valores do
   original: camadas a 0,5 s com 70 ms entre elas (power4.out), painel a
   0,65 s logo a seguir, links a subir de 140% com 10° de rotação, 1 s cada,
   100 ms entre eles; fecho de tudo junto em 0,32 s (power3.in). As cores
   das camadas são o azul do anel e o amarelo da estrela. */
.menu{ position:fixed; inset:0; z-index:90; overflow:hidden; }
.menu[hidden]{ display:none; }
.menu__camadas{ position:absolute; inset:0; pointer-events:none; }
.menu__camada,
.menu__painel{
  position:absolute; inset:0;
  transform:translateX(100%);
  transition:transform 320ms cubic-bezier(.32, 0, .67, 0);
}
.menu__camada:nth-child(1){ background:#1678D9; }
.menu__camada:nth-child(2){ background:var(--yellow); }
.menu__painel{
  display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + var(--sp-5)) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom));
  background:var(--bg) var(--grao);
  overflow-y:auto;
}
/* linhas de varrimento ténues, como o resto do site */
.menu__painel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}
.menu.is-aberto .menu__camada,
.menu.is-aberto .menu__painel{
  transform:none;
  transition:transform 500ms cubic-bezier(.16, 1, .3, 1);
}
.menu.is-aberto .menu__camada:nth-child(2){ transition-delay:70ms; }
.menu.is-aberto .menu__painel{ transition-duration:650ms; transition-delay:150ms; }

/* Links: cada um sobe de dentro da sua linha, com o número ao lado. */
.menu__links{ display:flex; flex-direction:column; gap:var(--sp-1); counter-reset:menu; }
.menu__item{ overflow:hidden; line-height:1; }
.menu__links a{
  position:relative;
  display:inline-flex; align-items:flex-start;
  padding:6px 1.5em 6px 0;
  font-family:var(--font-title);
  font-size:clamp(40px, 12vw, 64px);
  font-weight:700; line-height:1.05; letter-spacing:-.02em;
  color:var(--text);
  transition:color var(--t-fast);
}
.menu__links a:hover,
.menu__links a:focus-visible{ color:var(--yellow); }
.menu__rotulo{
  display:inline-block;
  transform:translateY(140%) rotate(10deg);
  transform-origin:50% 100%;
}
.menu__links a::after{
  counter-increment:menu;
  content:counter(menu, decimal-leading-zero);
  position:absolute; top:.45em; right:0;
  font-family:var(--font-tv); font-size:20px; font-weight:400; letter-spacing:.04em;
  color:var(--yellow);
  opacity:0;
}
.menu.is-itens .menu__rotulo{ transform:none; }
.menu.is-itens .menu__links a::after{ opacity:1; }
.menu.is-aberto .menu__rotulo{
  transition:transform 1s cubic-bezier(.16, 1, .3, 1);
  transition-delay:calc(250ms + var(--i, 0) * 100ms);
}
.menu.is-aberto .menu__links a::after{
  transition:opacity 600ms ease-out;
  transition-delay:calc(350ms + var(--i, 0) * 80ms);
}
.menu__item:nth-child(2){ --i:1; }
.menu__item:nth-child(3){ --i:2; }
.menu__item:nth-child(4){ --i:3; }

/* Pé: tecla, idioma e redes a subir no fim. */
.menu__pe{
  margin-top:auto; padding-top:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.menu__acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-3); }
.menu__pe .tecla{ min-height:48px; font-size:16px; }
.menu__redes-titulo{
  font-family:var(--font-tv); font-size:var(--fs-tv); line-height:1;
  letter-spacing:.06em; text-transform:uppercase; color:var(--yellow);
}
.menu__redes{ display:flex; flex-wrap:wrap; gap:0 var(--sp-4); }
.menu__rede{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:18px; font-weight:600; color:var(--text);
  transition:opacity var(--t-fast), color var(--t-fast);
}
.menu__redes:hover .menu__rede:not(:hover){ opacity:.35; }
.menu__rede:hover{ color:var(--yellow); }
.menu__acoes, .menu__redes-titulo, .menu__redes{ opacity:0; transform:translateY(25px); }
.menu.is-itens .menu__acoes,
.menu.is-itens .menu__redes-titulo,
.menu.is-itens .menu__redes{ opacity:1; transform:none; }
.menu.is-aberto .menu__acoes,
.menu.is-aberto .menu__redes-titulo,
.menu.is-aberto .menu__redes{ transition:opacity 550ms ease-out, transform 550ms cubic-bezier(.33, 1, .68, 1); }
.menu.is-aberto .menu__acoes{ transition-delay:410ms; }
.menu.is-aberto .menu__redes-titulo{ transition-delay:410ms; }
.menu.is-aberto .menu__redes{ transition-delay:490ms; }

/* Com o menu aberto a página por trás não rola. */
.is-menu-aberto{ overflow:hidden; }

@media (min-width:861px){
  .menu{ display:none !important; }
}

@media (prefers-reduced-motion:reduce){
  .nav__anel img{ transition:none; }
  .menu *, .menu__camada, .menu__painel, .nav__anel-texto span{ transition:none !important; }
}

/* ───────────────────────── Hero: o ecrã ─────────────────────────
   Forma: lados ligeiramente abaulados e cantos largos, medidos na referência
   (referencias/ e material/01-home/hero/referencia-forma-ecra.png): cantos a
   ~4,2% da largura, topo e base a abaular ~1% da altura, lados ~0,9% da
   largura. O desenho exato é o clip-path que o hero.js calcula; sem JS fica
   um border-radius parecido. */
/* O ecrã ocupa o primeiro ecrã do browser inteiro, como o caixilho do site
   do Gabriel Duarte: margem lateral igual à do site, da navbar até à base do
   ecrã. A linha com o nome fica por baixo e vê-se ao começar a descer. */
.hero{
  padding:0 var(--gutter) var(--sp-5);
}
.hero__caixa{ width:100%; }

.ecra{
  position:relative;
  height:calc(100svh - var(--nav-h) - var(--gutter));
  min-height:380px;
  overflow:hidden;
  isolation:isolate;
  border-radius:3.6% / 5.8%;
  /* O vidro desligado: cinzento quase preto, com um reflexo largo. */
  background:
    radial-gradient(120% 90% at 28% 18%, rgba(160,175,200,.075), transparent 55%),
    radial-gradient(80% 80% at 50% 50%, #12151C, #090A0F 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
.ecra.tem-forma{
  border-radius:0;
  clip-path:url(#forma-ecra);
}
.ecra__forma{ position:absolute; width:0; height:0; }

/* A imagem é a camada que liga e desliga. */
.ecra__imagem{
  position:absolute; inset:0; z-index:1;
  transform-origin:50% 50%;
  background:#000;
}
.ecra__video{
  width:100%; height:100%;
  object-fit:cover;
}

/* Estados. Antes de o JS decidir, a imagem está desligada (só com JS ativo,
   para quem não tem JS ver pelo menos a capa). */
.js .ecra:not([data-estado]) .ecra__imagem,
.ecra[data-estado="apagado"] .ecra__imagem{
  transform:scale(0, 0);
  opacity:0;
}
.ecra[data-estado="a-ligar"] .ecra__imagem{ animation:crtLigar 900ms var(--ease-tv) both; }

/* Keyframes do brief: ponto de luz, linha horizontal, abre na vertical com
   pico de brilho dessaturado e normaliza. */
@keyframes crtLigar{
  0%   { transform:scale(0, .004);  filter:brightness(8); }
  18%  { transform:scale(1, .004);  filter:brightness(8); }
  45%  { transform:scale(1, 1);     filter:brightness(2.4) saturate(.3); }
  100% { transform:scale(1, 1);     filter:brightness(1) saturate(1); }
}
/* Camadas do tubo, por cima da imagem. */
.ecra__varrimento,
.ecra__vinheta,
.ecra__grao,
.ecra__reflexo{
  position:absolute; inset:0; z-index:3;
  pointer-events:none;
}
.ecra__varrimento{
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.26) 0 1px, transparent 1px 3px);
  opacity:.55;
}
/* Vinheta medida na referência: bordas laterais ~15% mais escuras que o
   centro, topo ~30%, cantos ~45%. Fica por baixo do canal, da legenda e do
   volume (z-index 1, a seguir à imagem): eles vivem nos cantos e a vinheta
   apagava-os. Varrimento, grão e reflexo continuam por cima de tudo. */
.ecra__vinheta{
  z-index:1;
  background:
    /* sombra atrás da legenda, para o texto ler sobre imagens claras */
    radial-gradient(ellipse 42% 30% at 10% 92%, rgba(0,0,0,.3), transparent 70%),
    radial-gradient(ellipse 72% 68% at 50% 50%, transparent 52%, rgba(0,0,0,.5) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.22), transparent 16%, transparent 86%, rgba(0,0,0,.14));
}
.ecra__grao{
  inset:-10%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grao 420ms steps(4) infinite;
}
@keyframes grao{
  0%   { transform:translate(0, 0); }
  25%  { transform:translate(-3%, 2%); }
  50%  { transform:translate(2%, -3%); }
  75%  { transform:translate(-2%, -1%); }
  100% { transform:translate(0, 0); }
}
.ecra__reflexo{
  background:linear-gradient(128deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 26%, transparent 42%);
  mix-blend-mode:screen;
}

/* Informação no ecrã (OSD), em VT323 com brilho de fósforo. Afastada da
   borda o suficiente para não cair na curva dos cantos. Fica por baixo do
   varrimento, do grão e do reflexo (z-index 3), como se fosse desenhada na
   própria imagem, mas por cima da vinheta. */
.ecra__canal,
.ecra__legenda{
  position:absolute; z-index:2;
  font-family:var(--font-tv);
  line-height:1;
  /* Primeiro um contorno escuro para ler sobre qualquer imagem, depois o
     brilho de fósforo da própria cor. */
  /* Sem brilho (fazia o ecrã parecer sujo): só uma sombra escura nítida
     para ler sobre imagem clara. A cor é que é forte (branco puro e amarelo
     vivo) para compensar o filtro do tubo por cima. */
  text-shadow:0 1px 0 rgba(0,0,0,.7), 1px 1px 0 rgba(0,0,0,.35);
  transition:opacity var(--t-mid);
}
.ecra__canal{
  top:max(16px, 7%); left:max(18px, 5.5%);
  font-size:clamp(22px, 2.2vw, 34px);
  color:#FFC629;
  letter-spacing:.04em;
}
.ecra__legenda{
  left:max(18px, 5.5%); bottom:max(16px, 7.5%);
  display:flex; flex-direction:column; gap:4px;
  color:var(--text);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.ecra__categoria{ font-size:clamp(15px, 1.2vw, 19px); color:#FFC629; }
.ecra__titulo{ font-size:clamp(20px, 1.9vw, 29px); color:#FFFFFF; }

/* O canal e a legenda aparecem quando a TV acaba de acender. O canal sai a
   seco, sem desvanecer, ao fim de 5 s; a legenda fica (o hero.js põe as duas
   classes e só tira .mostra-canal). */
.js .ecra:not(.mostra-canal) .ecra__canal,
.js .ecra:not(.mostra-legenda) .ecra__legenda{ opacity:0; transition:none; }

/* Som: a coluna no canto. No toque é só ela (liga/desliga o som). Com rato,
   as barras de volume (js/volume.js, adaptado do WakeSlider do React Bits)
   aparecem à esquerda ao passar por cima ou com foco do teclado. Tudo
   amarelo, por baixo das camadas do tubo (z-index 2) como o canal e a
   legenda; continua clicável porque essas camadas não apanham o rato. Só
   aparece com a TV acesa. */
.volume{
  --vol-altura:34px;
  --vol-gap:4px;
  --vol-rest:.41;
  position:absolute; z-index:2;
  right:max(14px, 5%); bottom:max(12px, 6.5%);
  display:flex; flex-direction:row-reverse; align-items:center; gap:var(--sp-1);
  color:var(--yellow);
  transition:opacity var(--t-mid);
}
.volume__botao{
  flex:none;
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  color:var(--yellow);
  filter:drop-shadow(0 0 4px rgba(255,187,0,.45)) drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
.volume__botao svg{ width:24px; height:24px; }
.volume__ondas{ opacity:0; transition:opacity var(--t-fast); }
.ecra.tem-som .volume__ondas{ opacity:1; }

.volume__track{
  position:relative;
  flex:none;
  display:flex; align-items:center; gap:var(--vol-gap);
  height:44px;
  padding-inline:4px;
  touch-action:none;
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  /* Escondidas até o rato passar por cima. Não há fade do conjunto: são as
     barras que acendem uma a uma (ver .volume__barra). O visibility espera
     que a última se apague antes de esconder a pista. */
  visibility:hidden;
  transition:visibility 0s linear 340ms;
}
@media (hover:hover) and (pointer:fine){
  /* Abertas com o rato por cima, ou com foco vindo do teclado. O foco que um
     clique deixa no botão não conta, senão ficavam abertas depois de sair. */
  .volume:hover .volume__track,
  .volume:not([data-ponteiro]):has(:focus-visible) .volume__track{
    visibility:visible;
    transition:visibility 0s;
  }
  /* Ao abrir, acendem barra a barra da direita (junto à coluna) para a
     esquerda; --d é a distância à coluna, posta no modelo. */
  .volume:hover .volume__barra,
  .volume:not([data-ponteiro]):has(:focus-visible) .volume__barra{
    opacity:1;
    transition:opacity 60ms linear calc(var(--d) * 26ms), background-color 120ms ease;
  }
  .volume__track{ cursor:grab; }
  .volume__track:active{ cursor:grabbing; }
}
/* Ecrãs táteis: só a coluna. */
@media not ((hover:hover) and (pointer:fine)){
  .volume__track{ display:none; }
}
.volume__barra{
  flex:none;
  width:3px;
  height:var(--vol-altura);
  border-radius:2px;
  background:rgba(255,187,0,.28);
  box-shadow:0 1px 2px rgba(0,0,0,.5);
  transform:scaleY(var(--vol-rest));
  transform-origin:50% 50%;
  /* Ao fechar apagam da ponta esquerda de volta à coluna, mais depressa. */
  opacity:0;
  transition:opacity 50ms linear calc((15 - var(--d)) * 16ms), background-color 120ms ease;
}
.volume__barra[data-on="true"]{
  background:var(--yellow);
  box-shadow:0 0 6px rgba(255,187,0,.45), 0 1px 2px rgba(0,0,0,.5);
}
.volume__pega{
  position:absolute; inset:0;
  border-radius:var(--r-sm);
  background:transparent;
  cursor:inherit;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.volume__pega:focus-visible{ outline:2px solid var(--yellow); outline-offset:4px; }
/* Depois de arrastar com o rato ou o dedo a pega fica com foco, mas o
   contorno só faz falta a quem usa o teclado. */
.volume[data-ponteiro] .volume__pega:focus-visible{ outline:none; }

.ecra:not([data-estado="ligado"]) .volume{ opacity:0; pointer-events:none; }

@media (prefers-reduced-motion:reduce){
  .volume__barra{ transform:scaleY(var(--vol-rest)) !important; transition-delay:0s !important; }
}

/* Botão de pausa: invisível para quem usa rato ou toque, aparece ao lado do
   som quando recebe foco pelo teclado. */
.ecra__pausa{
  right:calc(max(14px, 5%) + 54px);
  opacity:0;
  pointer-events:none;
}
.ecra__pausa:focus-visible{ opacity:1; pointer-events:auto; }
.ecra__pausa svg{ width:18px; height:18px; }

/* ───────────────────────── Hero: a linha de baixo ───────────────────────── */
/* Centrado por pedido do Micael: o nome numa linha, a frase inteira na de
   baixo sem partir. O atalho para o portfólio fica por baixo, também ao
   centro. No telemóvel a frase pode partir: numa linha só ficava ilegível. */
.hero__base{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--sp-3);
  margin-top:var(--sp-4);
  text-align:center;
}
.hero__titulo{
  font-size:var(--fs-h3);
  line-height:1.25;
}
@media (min-width:861px){
  .hero__frase{ white-space:nowrap; }
}
.hero__nome{ display:block; color:var(--yellow); font-size:.62em; letter-spacing:.01em; margin-bottom:6px; }
.hero__frase{ display:block; }
.hero__descer{
  flex:none;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:44px;
  font-family:var(--font-tv); font-size:var(--fs-tv);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-2);
  transition:color var(--t-fast);
}
.hero__descer:hover{ color:var(--text); }
.hero__seta{ color:var(--yellow); font-size:.8em; }

@media (max-width:860px){
  /* No telemóvel o ecrã não vai à altura toda: o showreel é horizontal e
     num ecrã vertical perdia ~70% da imagem. 4:3 mostra quase tudo. Se
     houver uma versão vertical da montagem, isto pode passar a altura total. */
  .ecra{ height:auto; min-height:0; aspect-ratio:4 / 3; }
}

@media (prefers-reduced-motion:reduce){
  .ecra__grao{ animation:none; }
  .ecra[data-estado="a-ligar"] .ecra__imagem{ animation:fadeImagem 300ms ease-out both; }
  @keyframes fadeImagem{ from{ opacity:0; } to{ opacity:1; } }
}

/* ───────────────────────── Etiqueta de canal ─────────────────────────
   O número do canal em VT323 por cima dos títulos de secção e de página. */
.etiqueta-canal{
  font-family:var(--font-tv);
  font-size:var(--fs-tv);
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--yellow);
}

/* ───────────────────────── Portfólio ─────────────────────────
   Valores de partida do buck.co/work: grelha de 8 colunas, 1rem entre
   colunas e 2rem entre linhas; filtros de 1 coluna cada (2 no tablet);
   cartões de 4 colunas com imagem 3:2 e 3rem por baixo. */
.portfolio{
  padding:var(--sp-7) var(--gutter) var(--sp-6);
}
.portfolio__topo{
  display:grid;
  grid-template-columns:repeat(8, minmax(0, 1fr));
  gap:var(--sp-3) 1rem;
  margin-bottom:var(--sp-5);
}
.portfolio__topo .etiqueta-canal{ grid-column:1 / -1; }
.portfolio__titulo{
  grid-column:1 / -1;
  font-size:var(--fs-h2);
}
.canais{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(8, minmax(0, 1fr));
  gap:var(--sp-2) 1rem;
  margin-top:var(--sp-3);
}
.canal{
  grid-column:auto / span 2;
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  min-height:44px;
  padding:var(--sp-1) 0;
  text-align:left;
  font-size:var(--fs-small); font-weight:500;
  color:var(--text-2);
  border-top:1px solid var(--line);
  transition:color var(--t-fast), border-color var(--t-fast);
}
.canal__num{
  font-family:var(--font-tv);
  font-size:17px; line-height:1;
  letter-spacing:.04em;
  color:var(--text-2);
  transition:color var(--t-fast);
}
.canal:hover{ color:var(--text); }
.canal[aria-pressed="true"]{ color:var(--text); border-top-color:var(--yellow); }
.canal[aria-pressed="true"] .canal__num{ color:var(--yellow); }
/* Cabeçalho do portfólio ao centro (pedido do Micael a 2026-10-03): no
   desktop os canais ficam numa fila centrada, cada um com o texto ao meio. */
.portfolio__topo{ text-align:center; }
@media (min-width:1100px){
  .canais{ display:flex; justify-content:center; gap:1rem; }
  .canal{ width:180px; align-items:center; text-align:center; }
}
/* Telemóvel e tablet: os canais ficam numa fila só que desliza para o lado
   (como uma faixa de canais), em vez de partirem em várias linhas. O
   desvanecimento à direita mostra que há mais para deslizar. */
@media (max-width:1099px){
  .canais{
    display:flex; gap:var(--sp-4);
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scroll-padding-inline:var(--gutter);
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - 48px), transparent);
  }
  .canais::-webkit-scrollbar{ display:none; }
  .canal{ flex:none; white-space:nowrap; scroll-snap-align:start; }
}

.portfolio__corpo{ position:relative; }
/* Pedido do Micael: cartões mais pequenos. A grelha passou a 12 colunas para
   caberem 3 por linha no desktop (2 no tablet, 1 no telemóvel); o resto
   dos valores do Buck mantém-se. */
/* Cartões ao centro (pedido do Micael a 2026-10-03): flex em vez de
   grelha, para uma linha incompleta (filtros, último bloco) ficar centrada,
   e o título e o local por baixo também ao meio. */
.grelha{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:2rem 1rem;
}
.cartao{ width:100%; margin-bottom:var(--sp-3); text-align:center; }
.cartao[hidden]{ display:none; }
@media (min-width:640px){
  .cartao{ width:calc((100% - 1rem) / 2); margin-bottom:var(--sp-4); }
}
@media (min-width:1100px){
  .cartao{ width:calc((100% - 2rem) / 3); }
}

.cartao__link{ display:block; border-radius:var(--r-md); }
.cartao__ecra{
  position:relative;
  aspect-ratio:3 / 2;
  overflow:hidden;
  border-radius:var(--r-md);
  background:#000;
  isolation:isolate;
}
.cartao__ecra img,
.cartao__ecra video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--foco, 50% 50%);
}
.cartao__ecra--conter img,
.cartao__ecra--conter video{ object-fit:contain; }
.cartao__ecra video{ opacity:0; transition:opacity var(--t-mid); }
.cartao__ecra.a-tocar video{ opacity:1; }
/* Linhas de varrimento ténues, as mesmas do hero, para os cartões serem
   pequenos ecrãs. */
.cartao__ecra::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  opacity:.45;
}
.cartao__canal{
  position:absolute; z-index:3;
  top:var(--sp-3); left:var(--sp-3);
  font-family:var(--font-tv);
  font-size:19px; line-height:1;
  letter-spacing:.04em;
  color:#FFC629;
  text-shadow:0 1px 0 rgba(0,0,0,.7), 1px 1px 0 rgba(0,0,0,.35);
  opacity:0;
}
.cartao__link:hover .cartao__canal,
.cartao__link:focus-visible .cartao__canal{ opacity:1; }

.cartao__titulo{
  margin-top:var(--sp-3);
  font-family:var(--font-text);
  font-size:clamp(17px, .5vw + 14px, 20px);
  font-weight:600;
  letter-spacing:0;
  line-height:1.3;
  transition:color var(--t-fast);
}
.cartao__link:hover .cartao__titulo{ color:var(--yellow); }
.cartao__local{
  margin-top:3px;
  font-size:var(--fs-small);
  color:var(--text-2);
}

/* Mudar de canal: a grelha desvanece e volta (js/portfolio.js). */
.grelha{ transition:opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.grelha.a-sair{ opacity:0; transform:translateY(6px); transition-duration:140ms; }

/* ───────────────────────── Página de projeto ─────────────────────────
   Valores de partida do changelog da Linear: 12 colunas com 32px entre elas,
   metadados em 3 colunas fixos a 24px do topo, conteúdo em 6, linha
   temporal de 1px a 9px da margem e um ponto de 6px. */
.projeto{
  padding:var(--sp-5) var(--gutter) var(--sp-7);
}
.projeto__topo{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2);
  margin-bottom:var(--sp-6);
}
.projeto__voltar{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  min-height:44px;
  margin-bottom:var(--sp-3);
  font-family:var(--font-tv); font-size:var(--fs-tv);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-2);
  transition:color var(--t-fast);
}
.projeto__voltar:hover{ color:var(--text); }
/* As maiúsculas acentuadas (À, É, Ó) sobem acima da altura da linha da
   Comfortaa e batiam na etiqueta do canal: espaço por cima do título. */
.projeto__titulo{ font-size:var(--fs-display); max-width:16ch; line-height:1.12; padding-top:.14em; }
/* Títulos longos (ex. os dos estudos do laboratório): um tamanho abaixo. */
.projeto__titulo--longo{ font-size:var(--fs-h2); max-width:22ch; }

.projeto__grelha{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--sp-5) 32px;
}
.ficha,
.projeto__conteudo{ grid-column:1 / -1; }
@media (min-width:861px){
  .projeto__grelha{ grid-template-columns:repeat(8, minmax(0, 1fr)); }
  .ficha{ grid-column:1 / span 3; }
  .projeto__conteudo{ grid-column:4 / -1; }
}
@media (min-width:1100px){
  .projeto__grelha{ grid-template-columns:repeat(12, minmax(0, 1fr)); }
  .ficha{ grid-column:1 / span 3; }
  /* Pedido do Micael: o conteúdo vai até à margem direita (na Linear ficava
     em 6 colunas com 3 livres à direita). */
  .projeto__conteudo{ grid-column:4 / -1; }
}

.ficha{
  position:relative;
  padding-left:24px;
  align-self:start;
}
@media (min-width:861px){
  .ficha{ position:sticky; top:calc(var(--nav-h) + 24px); }
}
/* Linha temporal e ponto (da Linear), em amarelo. */
.ficha::before{
  content:"";
  position:absolute; left:9px; top:9px; bottom:0;
  width:1px;
  background:var(--line);
}
.ficha::after{
  content:"";
  position:absolute; left:9px; top:9px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--yellow);
  transform:translate(-50%, -50%);
  box-shadow:0 0 0 3px var(--bg);
}
.ficha dl{ display:flex; flex-direction:column; gap:var(--sp-3); }
.ficha dt{
  font-family:var(--font-tv);
  font-size:17px; line-height:1.1;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-2);
}
.ficha dd{
  margin-top:3px;
  font-size:var(--fs-small);
  line-height:1.5;
  color:var(--text);
}
.ficha__sep{ color:var(--yellow); }

.projeto__conteudo{
  display:flex; flex-direction:column;
  gap:var(--sp-4);
  min-width:0;
}
.bloco-titulo{
  margin-top:var(--sp-4);
  font-size:var(--fs-lead);
  line-height:1.3;
}
.bloco-titulo:first-child{ margin-top:0; }
.bloco-texto{ color:var(--text-2); max-width:62ch; }
.bloco-media{ display:flex; flex-direction:column; gap:var(--sp-2); }
.fachada,
.fachada__iframe{
  width:100%;
  border-radius:var(--r-md);
  background:#000;
}
/* Vídeos e imagens no tamanho real, no máximo a largura da coluna e a
   altura do ecrã (os verticais e os pequenos, como o Keno a 400x480, não
   esticam). Dentro de uma galeria enchem a célula. */
.bloco-media video,
.bloco-media img{
  width:auto; height:auto;
  max-width:100%;
  max-height:82svh;
  border-radius:var(--r-md);
  background:#000;
}
/* "largo": true no bloco → ocupa sempre a largura toda da coluna. */
.bloco-media--largo .loop{ width:100%; }
.bloco-media--largo video,
.bloco-media--largo img{ width:100%; max-height:none; }
.bloco-galeria .bloco-media video,
.bloco-galeria .bloco-media img{ width:100%; max-height:none; }
.bloco-media figcaption{ font-size:var(--fs-small); color:var(--text-2); }
.bloco-galeria{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:var(--sp-3);
  align-items:start;
}

/* Vídeos mudos em loop: sem barra de controlos; o botão de pausa aparece
   com o rato por cima ou com foco do teclado. */
.loop{ position:relative; width:fit-content; max-width:100%; }
.loop video{ display:block; }
.loop__pausa{
  position:absolute; right:var(--sp-2); bottom:var(--sp-2);
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--text);
  background:rgba(6,7,11,.6);
  box-shadow:inset 0 0 0 1.5px rgba(237,239,245,.5);
  opacity:0;
  transition:opacity var(--t-fast);
}
.loop__pausa svg{ width:16px; height:16px; }
.loop:hover .loop__pausa,
.loop__pausa:focus-visible,
.loop__pausa[aria-pressed="true"]{ opacity:1; }
@media not ((hover:hover) and (pointer:fine)){
  .loop__pausa{ opacity:.85; }
}

/* Fachada dos vídeos do YouTube/Vimeo. */
.fachada{
  position:relative;
  display:block;
  aspect-ratio:16 / 9;
  overflow:hidden;
  color:var(--text);
}
.fachada img{
  width:100%; height:100%;
  object-fit:cover;
  opacity:.82;
  transition:opacity var(--t-mid);
}
.fachada:hover img{ opacity:1; }
.fachada__botao{
  position:absolute; left:50%; top:50%;
  translate:-50% -50%;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  min-height:46px;
  padding:0 var(--sp-3) 0 14px;
  background:var(--yellow); color:var(--bg);
  font-size:15px; font-weight:700;
  border-radius:var(--r-sm);
  box-shadow:0 3px 0 var(--yellow-press);
}
.fachada__botao svg{ width:18px; height:18px; }
.fachada__servico{
  position:absolute; left:var(--sp-3); bottom:var(--sp-3);
  font-family:var(--font-tv); font-size:18px; line-height:1;
  letter-spacing:.04em;
  color:var(--text);
  text-shadow:0 1px 0 rgba(0,0,0,.8);
}
.fachada__iframe{ aspect-ratio:16 / 9; border:0; height:auto; }
/* Fachada e leitor dos vídeos do próprio site: a proporção vem do vídeo. */
.fachada--local{ aspect-ratio:16 / 9; }
.fachada__video{
  display:block;
  width:100%; height:auto;
  border-radius:var(--r-md);
  background:#000;
}

.projeto__nav{
  display:flex; justify-content:space-between; gap:var(--sp-4);
  margin-top:var(--sp-7);
  padding-top:var(--sp-4);
  border-top:1px solid var(--line);
}
.projeto__nav-link{ display:flex; flex-direction:column; gap:var(--sp-1); min-height:44px; }
.projeto__nav-link--seg{ text-align:right; margin-left:auto; }
.projeto__nav-rotulo{
  font-family:var(--font-tv); font-size:var(--fs-tv);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-2);
}
.projeto__nav-titulo{
  font-family:var(--font-title); font-weight:700;
  font-size:var(--fs-h3);
  transition:color var(--t-fast);
}
.projeto__nav-link:hover .projeto__nav-titulo{ color:var(--yellow); }
.projeto__nav-canal{
  font-family:var(--font-tv); font-size:17px; line-height:1;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--yellow);
}

@media (prefers-reduced-motion:reduce){
  .grelha{ transition:none; }
}

/* ───────────────────────── Ligação para outro projeto/estudo ───────────────────────── */
.ligacao{
  position:relative;
  display:block;
  border-radius:var(--r-md);
  overflow:hidden;
}
.ligacao img{ display:block; width:100%; max-height:none; border-radius:0; transition:opacity var(--t-mid); }
.ligacao:hover img{ opacity:.85; }
.ligacao__rotulo{
  position:absolute; left:var(--sp-3); bottom:var(--sp-3);
  padding:var(--sp-1) var(--sp-2);
  font-family:var(--font-tv); font-size:var(--fs-tv); line-height:1;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--yellow);
  background:rgba(6,7,11,.78);
  border-radius:var(--r-sm);
}

/* ───────────────────────── Laboratório (home) ─────────────────────────
   Valores de partida do changelog da Linear: coluna de etiqueta à esquerda
   com linha temporal de 1px a 9px e ponto de 6px, 32px entre colunas. */
.laboratorio{ padding:var(--sp-6) var(--gutter) var(--sp-5); }
.laboratorio__topo{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-4); text-align:center; }
.laboratorio__titulo{ font-size:var(--fs-h2); }
.laboratorio__intro{ font-size:17px; color:var(--text-2); max-width:52ch; }

/* Etiqueta | vídeo | texto colado ao vídeo. */
.nota{
  display:grid;
  grid-template-columns:180px minmax(0, 400px) minmax(0, 1fr);
  gap:var(--sp-3) var(--sp-4);
  padding-block:var(--sp-4);
  border-top:1px solid var(--line);
}
.nota__meta{
  grid-column:1;
  position:relative;
  display:flex; flex-direction:column; gap:var(--sp-1);
  padding-left:24px;
  font-family:var(--font-tv); line-height:1;
  letter-spacing:.05em; text-transform:uppercase;
}
.nota__meta::before{
  content:""; position:absolute; left:9px; top:9px; bottom:calc(var(--sp-4) * -1 - 1px);
  width:1px; background:var(--line);
}
.nota__meta::after{
  content:""; position:absolute; left:9px; top:9px;
  width:7px; height:7px; border-radius:50%;
  background:var(--text-2);
  transform:translate(-50%, -50%);
  box-shadow:0 0 0 3px var(--bg);
}
.nota:first-child .nota__meta::after{ background:var(--yellow); }
.nota:last-child .nota__meta::before{ display:none; }
.nota__canal{ font-size:var(--fs-tv); color:var(--yellow); }
.nota__tipo{ font-size:17px; color:var(--text-2); }

.nota__corpo{ grid-column:3; align-self:start; display:flex; flex-direction:column; gap:var(--sp-2); }
.nota__titulo{ font-size:clamp(20px, .8vw + 14px, 25px); transition:color var(--t-fast); }
.nota__corpo:hover .nota__titulo{ color:var(--yellow); }
.nota__resumo{ color:var(--text-2); max-width:52ch; }
.nota__ler{
  margin-top:var(--sp-1);
  font-family:var(--font-tv); font-size:var(--fs-tv); line-height:1;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--yellow);
}
.nota__media{ grid-column:2; grid-row:1; align-self:start; cursor:pointer; }

@media (max-width:860px){
  .nota{ grid-template-columns:1fr; }
  .nota__meta, .nota__corpo, .nota__media{ grid-column:1 / -1; }
  .nota__media{ grid-row:auto; }
  .nota__meta::before{ display:none; }
}

/* ───────────────────────── Sobre (home) ─────────────────────────
   Três painéis numa moldura, como uma consola: dois laterais (ecrã + cartão)
   e o central (frase, símbolo, ficha, tecla larga). Referência: cartões de
   coleção mandados pelo Micael; cores, fontes e ecrãs são os do site. */
.sobre{
  display:flex; flex-direction:column; gap:var(--sp-4);
  text-align:left;
  padding:var(--sp-6) var(--gutter);
}
.sobre > .etiqueta-canal{ align-self:center; }
.sobre__moldura{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr);
  gap:8px; padding:8px;
  background:#06070A;
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.painel{
  display:flex; flex-direction:column; gap:8px;
  min-width:0;
}
.painel--centro{
  align-items:center; gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  text-align:center;
}

/* Ecrãs dos painéis laterais. Sem JS ficam com o border-radius; com JS
   ganham a forma abaulada do hero e acendem ao entrar à vista. */
.retrato{
  position:relative; margin:0;
  aspect-ratio:5 / 4;
  overflow:hidden; isolation:isolate;
  border-radius:3.6% / 3.6%;
  background:radial-gradient(80% 80% at 50% 50%, #12151C, #090A0F 100%);
}
.retrato.tem-forma{ border-radius:0; }
.retrato.tem-forma:has(#forma-retrato){ clip-path:url(#forma-retrato); }
.retrato.tem-forma:has(#forma-ferramentas){ clip-path:url(#forma-ferramentas); }
.retrato.tem-forma:has(#forma-contactos){ clip-path:url(#forma-contactos); }
.retrato__forma{ position:absolute; width:0; height:0; }
.retrato__imagem{ position:absolute; inset:0; z-index:1; background:#000; }
.retrato__imagem img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.retrato[data-estado="apagado"] .retrato__imagem{ transform:scale(0, 0); opacity:0; }
.retrato[data-estado="a-ligar"] .retrato__imagem{ animation:crtLigar 900ms var(--ease-tv) both; }
.retrato__canal{
  position:absolute; z-index:2;
  top:max(12px, 7%); left:max(14px, 8%);
  font-family:var(--font-tv); font-size:20px; line-height:1;
  letter-spacing:.04em; color:#FFC629;
  text-shadow:0 1px 0 rgba(0,0,0,.7), 1px 1px 0 rgba(0,0,0,.35);
  transition:opacity var(--t-mid);
}
.js .retrato:not([data-estado="ligado"]) .retrato__canal{ opacity:0; transition:none; }

/* O segundo ecrã é um guia de canais com as ferramentas. */
.retrato__imagem--guia{
  display:flex; align-items:center;
  padding:18% 12% 10%;
  background:radial-gradient(90% 90% at 50% 45%, #10203A, #050810 100%);
}
.guia{
  display:flex; flex-direction:column; gap:10px; width:100%;
  font-family:var(--font-tv); font-size:clamp(18px, 1.5vw, 24px); line-height:1;
  letter-spacing:.05em; text-transform:uppercase;
  color:#FFFFFF;
  text-shadow:0 1px 0 rgba(0,0,0,.7);
}
.guia li{ display:flex; gap:14px; }
.guia span{ color:#FFC629; }

/* Cartão por baixo de cada ecrã. */
.sobre-cartao{
  flex:1;
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:10px 10px 12px;
  background:#000;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.sobre-cartao__barra{
  padding:6px 10px;
  background:var(--yellow); color:var(--bg);
  font-family:var(--font-title); font-weight:700; font-size:18px; line-height:1.2;
  text-align:center;
  border-radius:3px;
}
.sobre-cartao__texto{
  padding:0 8px;
  font-size:13.5px; line-height:1.55; color:var(--text-2);
}
.sobre-cartao__etiqueta{
  margin-top:auto; padding:0 8px;
  font-family:var(--font-tv); font-size:16px; line-height:1; letter-spacing:.06em;
  color:var(--text-2); opacity:.6;
  text-align:right;
}

/* Tecla da moldura: relevo de botão de aparelho, texto entre parênteses. */
.moldura-tecla{
  display:flex; align-items:stretch;
  min-height:44px;
  color:var(--text);
  font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.moldura-tecla__texto,
.moldura-tecla__mais{
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-2);
  border:1px solid #2A3042;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.07), inset -2px -2px 0 rgba(0,0,0,.55);
  transition:background-color var(--t-fast), color var(--t-fast);
}
.moldura-tecla__texto{ flex:1; gap:var(--sp-3); padding:0 var(--sp-3); border-radius:3px; }
.moldura-tecla__texto > span[aria-hidden]{ font-family:var(--font-tv); font-size:26px; font-weight:400; line-height:1; color:var(--yellow); }
.moldura-tecla__mais{ width:44px; border-left:0; border-radius:0 3px 3px 0; }
.moldura-tecla__mais svg{ width:18px; height:18px; }
/* Nos cartões, a tecla fica sempre encostada ao fundo. */
.sobre-cartao .moldura-tecla{ margin-top:auto; }
.moldura-tecla:hover .moldura-tecla__texto,
.moldura-tecla:hover .moldura-tecla__mais{ background:#151926; }
.moldura-tecla:active .moldura-tecla__texto,
.moldura-tecla:active .moldura-tecla__mais{ box-shadow:inset 2px 2px 0 rgba(0,0,0,.55); }
/* Painel central: o logótipo em cima, o título e a abertura ao centro, e os
   parágrafos alinhados à esquerda para lerem bem. */
.sobre__simbolo{ width:min(100%, 260px); height:auto; margin-bottom:var(--sp-2); }
.sobre__titulo{ font-size:clamp(22px, 1.3vw + 12px, 32px); line-height:1.15; }
.sobre__lead{ max-width:58ch; font-size:16.5px; line-height:1.6; color:var(--text); }
.sobre__texto{
  max-width:58ch; margin-top:var(--sp-2);
  font-size:15px; line-height:1.65; color:var(--text-2);
  text-align:left;
}
.sobre__texto p + p{ margin-top:1em; }

/* Faixa de fecho, por baixo dos três painéis: a frase final e o convite à
   esquerda, a tecla de contacto à direita. */
.sobre__fim{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-3) var(--sp-5);
  padding:var(--sp-4) var(--sp-5);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.sobre__fecho{ font-size:16.5px; color:var(--text); }
.sobre__convite{
  margin-top:6px;
  font-family:var(--font-title); font-weight:700;
  font-size:clamp(18px, .8vw + 12px, 24px); line-height:1.3;
  color:var(--text);
}
.sobre__contactar{ min-height:50px; font-size:16px; padding-inline:20px 24px; }

@media (max-width:1000px){
  .sobre__moldura{ grid-template-columns:1fr 1fr; }
  .painel--centro{ grid-column:1 / -1; order:-1; }
}
@media (max-width:640px){
  .sobre__moldura{ grid-template-columns:1fr; }
  .painel--centro{ padding:var(--sp-4) var(--sp-3); }
  .sobre__fim{ padding:var(--sp-4) var(--sp-3); }
}

/* ───────────────────────── Call to action ─────────────────────────
   A frase do Nuno em grande, ao centro, e a tecla por baixo. */
.cta{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--sp-4);
  padding:var(--sp-7) var(--gutter);
  border-top:1px solid var(--line);
}
.cta__frase{
  font-size:clamp(28px, 2.6vw + 12px, 54px);
  line-height:1.15;
  padding-top:.1em;
  max-width:34ch;
  text-wrap:balance;
}
.cta__botao{ min-height:52px; font-size:17px; padding-inline:22px 26px; }
.cta__botao svg{ width:15px; height:15px; }

/* ───────────────────────── Página de contactos ─────────────────────────
   Refeita a 2026-10-03: topo com TV que muda de canal + contactos,
   formulário, áreas de trabalho e projetos em destaque. */
.contactos-topo,
.contactos-form,
.contactos-areas,
.contactos-destaque{ padding:var(--sp-6) var(--gutter) 0; }
.contactos-destaque{ padding-bottom:var(--sp-6); }

/* 1. Topo */
.contactos-topo{
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  align-items:center; gap:var(--sp-6);
  padding-top:var(--sp-5);
}
.contactos-topo__tv{ aspect-ratio:4 / 3; }
.contactos-topo__ecra{ background:radial-gradient(90% 90% at 50% 45%, #10203A, #050810 100%); }
.tv-canal{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-3);
  padding:10%;
  opacity:0; visibility:hidden;
}
.tv-canal.is-ativo{ opacity:1; visibility:visible; }
.tv-canal img{ width:34%; height:auto; }
.tv-canal__icone{ width:24%; height:auto; color:#FFFFFF; filter:drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.tv-canal__texto{
  font-family:var(--font-tv); font-size:clamp(18px, 1.8vw, 28px); line-height:1.1;
  letter-spacing:.04em; text-align:center; overflow-wrap:anywhere;
  color:#FFC629; text-shadow:0 1px 0 rgba(0,0,0,.7);
}
.tv-estatica{
  position:absolute; inset:-4px; z-index:4; pointer-events:none;
  opacity:0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 2px, transparent 2px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85  0 0 0 0 .87  0 0 0 0 .92  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23e)'/%3E%3C/svg%3E"),
    #0B0C10;
  transition:opacity 120ms steps(3);
}
.com-estatica .tv-estatica{ opacity:1; }
.js .retrato.contactos-topo__tv:not([data-estado="ligado"]) .retrato__canal{ opacity:0; }

.contactos-topo__texto{ display:flex; flex-direction:column; gap:var(--sp-2); }
.contactos-topo__titulo{ font-size:clamp(28px, 2vw + 14px, 46px); line-height:1.1; }
.contactos-topo__intro{ max-width:44ch; font-size:16px; line-height:1.6; color:var(--text-2); }
.contactos__lista{ margin-top:var(--sp-3); border-top:1px solid var(--line); }
.contactos__item{ display:flex; align-items:stretch; border-bottom:1px solid var(--line); }
.linha-contacto{
  flex:1; min-width:0;
  display:grid; grid-template-columns:6.5rem minmax(0, 1fr) auto;
  align-items:center; gap:var(--sp-3);
  min-height:56px; padding:0 6px;
  transition:background-color var(--t-fast);
}
.linha-contacto__canal{ font-family:var(--font-tv); font-size:17px; line-height:1; letter-spacing:.04em; color:var(--yellow); }
.linha-contacto__nome{ font-size:13.5px; color:var(--text-2); }
.linha-contacto__valor{ font-size:15.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere; transition:color var(--t-fast); }
.linha-contacto__seta svg{ width:16px; height:16px; color:var(--text-2); transition:transform var(--t-fast) var(--ease-out), color var(--t-fast); }
.linha-contacto:hover,
.linha-contacto:focus-visible{ background:rgba(255, 255, 255, .03); }
a.linha-contacto:hover .linha-contacto__valor{ color:var(--yellow); }
a.linha-contacto:hover .linha-contacto__seta svg{ color:var(--yellow); transform:translate(2px, -2px); }
.linha-contacto--falta .linha-contacto__valor{ color:var(--text-2); font-weight:500; }
.linha-contacto__copiar{
  display:flex; align-items:center; gap:6px;
  padding:0 12px; margin:8px 0;
  font-size:12.5px; font-weight:600; color:var(--text-2);
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:color var(--t-fast), border-color var(--t-fast);
}
.linha-contacto__copiar svg{ width:14px; height:14px; }
.linha-contacto__copiar:hover,
.linha-contacto__copiar.is-copiado{ color:var(--yellow); border-color:var(--yellow); }

/* 2. Formulário */
.contactos-form__cab{ display:flex; flex-direction:column; gap:var(--sp-1); margin-bottom:var(--sp-4); }
.contactos-form__titulo{ font-size:clamp(24px, 1.2vw + 14px, 34px); line-height:1.15; }
.formulario{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);
  padding:var(--sp-4);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.campo{ display:flex; flex-direction:column; gap:6px; }
.campo--largo{ grid-column:1 / -1; }
.campo label{
  font-family:var(--font-tv); font-size:17px; line-height:1;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-2);
}
.campo input,
.campo select,
.campo textarea{
  width:100%;
  padding:12px 14px;
  font-size:15.5px; color:var(--text);
  background:#06070A;
  border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color var(--t-fast);
}
.campo textarea{ resize:vertical; min-height:150px; line-height:1.55; }
.campo select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover{ border-color:#2A3042; }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible{ outline:none; border-color:var(--yellow); }
.campo [aria-invalid="true"]{ border-color:#FF6B5B; }
.campo__erro{ min-height:1em; font-size:13px; color:#FF8A7D; }
.campo--isco{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formulario__fim{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
.formulario__enviar{ min-height:48px; font-size:16px; }
.formulario__enviar:disabled{ opacity:.6; cursor:wait; }
.formulario__estado{ font-size:14.5px; color:var(--text-2); }
.formulario__estado[data-tipo="sucesso"]{ color:#7BE495; }
.formulario__estado[data-tipo="erro"]{ color:#FF8A7D; }
.formulario__estado[data-tipo="aviso"]{ color:var(--yellow); }

/* 3. Áreas de trabalho */
.areas{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--sp-2); }
.area{
  position:relative;
  display:grid; grid-template-columns:1fr auto; gap:4px var(--sp-2);
  padding:8px 8px 14px;
  background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color var(--t-fast);
}
.area__ecra{
  grid-column:1 / -1; position:relative;
  aspect-ratio:3 / 2; overflow:hidden; margin-bottom:8px;
  border-radius:var(--r-sm); background:#000;
}
.area__ecra img{ width:100%; height:100%; object-fit:cover; filter:saturate(.75) brightness(.8); transition:filter var(--t-mid), transform var(--t-slow) var(--ease-out); }
.area__ecra::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); opacity:.45; }
.area__canal{ grid-column:1 / -1; padding-inline:6px; font-family:var(--font-tv); font-size:16px; line-height:1; letter-spacing:.04em; color:var(--yellow); }
.area__nome{ padding-left:6px; font-size:15.5px; font-weight:600; line-height:1.3; }
.area__n{ grid-column:1; padding-left:6px; font-size:13px; color:var(--text-2); }
.area__seta{ grid-column:2; grid-row:2 / span 2; align-self:center; padding-right:6px; }
.area__seta svg{ width:16px; height:16px; color:var(--text-2); transition:transform var(--t-fast) var(--ease-out), color var(--t-fast); }
.area:hover{ border-color:#2A3042; }
.area:hover .area__ecra img{ filter:none; transform:scale(1.04); }
.area:hover .area__seta svg{ color:var(--yellow); transform:translate(2px, -2px); }

/* 4. Em destaque */
.contactos-destaque__cab{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.contactos-destaque__ver{
  font-family:var(--font-tv); font-size:var(--fs-tv); line-height:1;
  letter-spacing:.05em; text-transform:uppercase; color:var(--yellow);
}
.contactos-destaque__ver:hover{ text-decoration:underline; text-underline-offset:4px; }

@media (max-width:1100px){
  .areas{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:860px){
  .contactos-topo{ grid-template-columns:1fr; gap:var(--sp-4); }
  .contactos-topo__tv{ aspect-ratio:16 / 10; }
  .areas{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .formulario{ grid-template-columns:1fr; padding:var(--sp-3); }
  .linha-contacto{ grid-template-columns:minmax(0, 1fr) auto; row-gap:2px; padding-block:10px; }
  .linha-contacto__nome{ grid-column:1; grid-row:1; }
  .linha-contacto__valor{ grid-column:1; grid-row:2; }
  .linha-contacto__seta{ grid-column:2; grid-row:1 / span 2; }
  .linha-contacto__copiar span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}

/* ───────────────────────── Rodapé e gaveta ─────────────────────────
   Padrão dos sites ByMG: a página (.pagina) fica por cima, opaca, com uma
   margem por baixo do tamanho da gaveta; a gaveta é fixa ao fundo do ecrã
   e só aparece nessa margem, no fim da página, como uma gaveta a abrir. */
:root{ --gaveta-h:13rem; }
.pagina{
  position:relative; z-index:1;
  background:var(--bg) var(--grao);
  margin-bottom:var(--gaveta-h);
}
/* Rodapé reciclado do Mister Frango: fila única com o ícone à esquerda,
   os atalhos agrupados ao centro e a tecla Contactar à direita, tudo
   alinhado ao centro da altura da fila. */
.rodape{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-5);
  /* o ícone e a tecla ficam recolhidos em relação às margens da página */
  padding:var(--sp-5) calc(var(--gutter) + var(--sp-5));
  border-top:1px solid var(--line);
  /* sombra a cair sobre a gaveta por baixo, para dar profundidade */
  box-shadow:0 26px 30px -16px rgba(0,0,0,.85);
}
.rodape__marca,
.rodape__acao{ flex:0 0 12rem; display:flex; }
.rodape__acao{ justify-content:flex-end; }
.rodape__marca img{ width:48px; height:48px; }
/* A régua do "Site" em cima; "Contactos" e "Redes" por baixo, lado a lado,
   centrados com ela. */
.rodape__meio{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); }
.rodape__linha{ display:flex; align-items:flex-start; justify-content:center; gap:var(--sp-6); }
.rodape__coluna{ text-align:center; }
.rodape__etiqueta{
  margin-bottom:var(--sp-2);
  font-family:var(--font-tv); font-size:var(--fs-tv); line-height:1;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--yellow);
}
.rodape__coluna ul{ display:flex; flex-direction:column; align-items:center; }
.rodape__coluna a,
.rodape__falta{
  display:inline-flex; align-items:center; min-height:34px;
  font-size:var(--fs-small); color:var(--text-2);
  transition:color var(--t-fast);
}
.rodape__coluna li{ line-height:1; }
.rodape__coluna a:hover{ color:var(--text); }
.rodape__redes{ display:flex; justify-content:center; gap:var(--sp-2); }
.rodape__redes a{ justify-content:center; min-width:40px; }
.rodape__redes svg{ width:20px; height:20px; }
/* Os atalhos do "Site" vão juntos numa régua, como os botões de um
   aparelho: moldura comum, cantos a meio caminho entre quadrado e
   redondo, e divisórias entre eles (aprovado pelo Micael a 2026-10-03). */
.rodape__site ul{
  flex-direction:row; flex-wrap:wrap; justify-content:center;
  border:1px solid var(--line); border-radius:10px;
  overflow:hidden;
}
.rodape__site li + li{ border-left:1px solid var(--line); }
.rodape__site a{
  min-height:44px; padding:0 var(--sp-4);
  transition:color var(--t-fast), background-color var(--t-fast);
}
.rodape__site a:hover{ background:rgba(255,255,255,.04); }
@media (max-width:640px){
  .rodape__site a{ padding:0 12px; }
}

.gaveta{
  position:fixed; inset:auto 0 0 0; z-index:0;
  height:var(--gaveta-h);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-3);
  padding:var(--sp-4) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom));
  background:var(--bg);
  text-align:center;
}
.gaveta img{ width:56px; height:56px; }
.gaveta__legal{ font-size:var(--fs-micro); color:var(--text-2); }
.gaveta__credito a{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--font-tv); font-size:18px; letter-spacing:.05em;
  color:var(--text-2);
  transition:color var(--t-fast);
}
.gaveta__credito a:hover{ color:var(--yellow); }
@media (max-width:640px){
  .rodape{ flex-direction:column; text-align:center; }
  .rodape__marca, .rodape__acao{ flex:0 0 auto; justify-content:center; }
  .rodape{ padding-inline:var(--gutter); }
  .rodape__linha{ gap:var(--sp-5); }
}

/* ───────────────────────── Esqueleto provisório ─────────────────────────
   Só para testar a navbar e as âncoras nesta fase. Sai quando as secções
   verdadeiras entrarem. */
main{ padding-top:var(--nav-h); }
.provisorio{
  min-height:90svh;
  display:grid; place-content:center; gap:var(--sp-2);
  padding:var(--sp-6) var(--gutter);
  border-bottom:1px dashed var(--line);
  text-align:center;
}
.provisorio__etiqueta{
  font-family:var(--font-tv); font-size:var(--fs-tv); color:var(--yellow);
}
.provisorio h2{ font-size:var(--fs-h2); }
.provisorio__nota{ color:var(--text-2); }

/* ───────────────────────── Telemóvel: áreas de toque ─────────────────────────
   Revisão de 2026-10-03: tudo o que se carrega tem pelo menos 44px de altura
   (WCAG 2.5.5), sem mudar o desenho. */
.nav__logo{ padding-block:12px; }
.canal{ min-width:44px; }
.moldura-tecla{ font-size:13.5px; }
.contactos-destaque__ver{ display:inline-flex; align-items:center; min-height:44px; }
@media (max-width:860px){
  .rodape__coluna a,
  .rodape__falta{ min-height:44px; }
  .rodape__redes a{ min-width:44px; }
}

/* ───────────────────────── Telemóvel: revisão geral ─────────────────────────
   2026-10-03. Menos espaço morto entre secções, o portfólio em duas colunas
   (com um cartão por linha eram 14 ecrãs de scroll), o Sobre alinhado à
   esquerda para ler melhor, a régua do rodapé em 2×2 e as galerias
   panorâmicas numa coluna. */
@media (max-width:640px){
  .hero{ padding-bottom:var(--sp-3); }
  .portfolio{ padding:var(--sp-5) var(--gutter) var(--sp-4); }
  .portfolio__topo{ margin-bottom:var(--sp-4); }
  .laboratorio{ padding:var(--sp-5) var(--gutter) var(--sp-4); }
  .sobre{ padding:var(--sp-5) var(--gutter); }
  .cta{ padding:var(--sp-5) var(--gutter); }
  .contactos-topo, .contactos-form, .contactos-areas, .contactos-destaque{ padding-top:var(--sp-5); }
  .contactos-destaque{ padding-bottom:var(--sp-5); }
  .projeto{ padding-bottom:var(--sp-5); }

  /* Portfólio: duas colunas */
  .grelha{ gap:var(--sp-3) 12px; }
  .cartao{ width:calc((100% - 12px) / 2); margin-bottom:0; }
  .cartao__ecra{ border-radius:var(--r-sm); }
  .cartao__titulo{ margin-top:10px; font-size:15px; }
  .cartao__local{
    font-size:13px; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* Sobre: texto à esquerda, ecrãs mais baixos */
  .painel--centro{ align-items:flex-start; text-align:left; }
  .sobre__simbolo{ width:200px; }
  .sobre__lead{ font-size:16px; }
  .painel--lado .retrato{ aspect-ratio:16 / 10; }
  /* a foto do Nuno é vertical: no telemóvel fica quase inteira (16:10 cortava-a pelos olhos) */
  .painel--lado .retrato:has(#forma-retrato){ aspect-ratio:592 / 639; }
  .painel--lado .retrato:has(#forma-retrato) img{ object-position:50% 30%; }
  .retrato__imagem--guia{ padding:8% 10%; }

  /* Rodapé: régua 2×2 */
  .rodape__site ul{ display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .rodape__site li + li{ border-left:0; }
  .rodape__site li:nth-child(even){ border-left:1px solid var(--line); }
  .rodape__site li:nth-child(n+3){ border-top:1px solid var(--line); }
  .rodape__site a{ width:100%; justify-content:center; }
  .rodape__site{ width:100%; }

  /* Galerias panorâmicas numa coluna */
  .bloco-galeria--largas{ grid-template-columns:1fr; }
}
@media (max-width:359px){
  .cartao{ width:100%; }
}
/* Faixa de fecho do Sobre: quando o botão desce para baixo do texto, fica ao centro. */
@media (max-width:860px){
  .sobre__fim{ flex-direction:column; align-items:stretch; }
  .sobre__contactar{ align-self:center; }
}
/* Áreas de trabalho: os cartões da mesma fila ficam todos com a mesma
   altura (um nome em duas linhas deixava o vizinho mais curto e os espaços
   entre cartões desiguais); o número fica sempre colado ao fundo. */
.areas > li{ display:flex; }
.area{ flex:1; grid-template-rows:auto auto 1fr auto; }
.area__nome{ align-self:start; }
.area__n{ align-self:end; }
.areas{ grid-auto-rows:1fr; }
/* "Ver portfólio completo": mais pequeno e assente na mesma linha de base
   do título "Em destaque". */
.contactos-destaque__cab{ align-items:baseline; }
.contactos-destaque__ver{ font-size:16px; min-height:0; padding-block:12px; margin-block:-12px; }

/* Menu do telemóvel alinhado à direita, junto ao botão que o abre (pedido
   do Micael). O número passa para a esquerda de cada link. */
.menu__links{ align-items:flex-end; }
.menu__links a{ padding:6px 0 6px 1.5em; text-align:right; }
.menu__links a::after{ right:auto; left:0; }
.menu__item{ display:flex; justify-content:flex-end; }
.menu__acoes{ justify-content:flex-end; }
.menu__redes-titulo{ text-align:right; }
.menu__redes{ justify-content:flex-end; }

/* Fecho em escada, ao contrário da abertura: sai primeiro o painel e só
   depois a camada amarela e a azul, para as duas cores se verem a sair. */
.menu:not(.is-aberto) .menu__painel{ transition:transform 380ms cubic-bezier(.64, 0, .78, 0); }
.menu:not(.is-aberto) .menu__camada:nth-child(2){ transition:transform 380ms cubic-bezier(.64, 0, .78, 0) 110ms; }
.menu:not(.is-aberto) .menu__camada:nth-child(1){ transition:transform 380ms cubic-bezier(.64, 0, .78, 0) 200ms; }

/* Links do menu: letra um pouco menor, mais espaço à volta e sem números. */
.menu__links{ gap:var(--sp-2); }
.menu__links a{ padding:12px 0; font-size:clamp(34px, 10vw, 52px); }
.menu__links a::after{ content:none; }
/* O botão do menu volta a ser só o anel (sem "Menu/Fechar"). */
.nav__anel{ padding:0; width:46px; justify-content:center; }

/* Faixas azul e amarela com o filtro de TV antiga do hero: linhas de
   varrimento, vinheta, grão a mexer e uma cintilação leve no brilho. */
.menu__camada{ overflow:hidden; }
.menu__camada::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.26) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 45%, rgba(0,0,0,.45) 100%);
}
.menu__camada::after{
  content:""; position:absolute; inset:-10%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grao 420ms steps(4) infinite;
}
.menu:not([hidden]) .menu__camada{ animation:cintilar 160ms steps(2) infinite; }
@keyframes cintilar{
  0%   { filter:brightness(1); }
  50%  { filter:brightness(1.12) saturate(1.1); }
  100% { filter:brightness(.94); }
}
@media (prefers-reduced-motion:reduce){
  .menu__camada::after, .menu:not([hidden]) .menu__camada{ animation:none; }
}

/* Menu: PT/EN logo por baixo de "Sobre"; no fundo, os ícones das redes e
   depois a tecla Contactar. */
.menu__idioma{ display:flex; justify-content:flex-end; margin-top:var(--sp-3); opacity:0; transform:translateY(25px); }
.menu__idioma .idioma a{ min-width:44px; min-height:44px; font-size:15px; }
.menu.is-itens .menu__idioma{ opacity:1; transform:none; }
.menu.is-aberto .menu__idioma{ transition:opacity 550ms ease-out 560ms, transform 550ms cubic-bezier(.33, 1, .68, 1) 560ms; }
.menu__pe{ align-items:flex-end; gap:var(--sp-3); }
.menu__redes{ gap:var(--sp-2); }
.menu__rede{ justify-content:center; min-width:44px; color:var(--text-2); }
.menu__rede svg{ width:24px; height:24px; }
.menu__acoes{ margin-bottom:0; }

/* Áreas de trabalho centradas: flex em vez de grelha, para uma fila
   incompleta (o Laboratório sozinho no telemóvel) ficar ao meio. */
.areas{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2); }
.areas > li{ width:calc((100% - var(--sp-2) * 4) / 5); }
@media (max-width:1100px){ .areas > li{ width:calc((100% - var(--sp-2) * 2) / 3); } }
@media (max-width:860px){ .areas > li{ width:calc((100% - var(--sp-2)) / 2); } }
/* Com as filas a partir, todos os nomes reservam duas linhas: os cartões
   ficam todos da mesma altura, também o que fica sozinho. */
@media (max-width:1100px){ .area__nome{ min-height:2.6em; } }

/* Formulário: a tecla de envio e a mensagem de estado ao centro. */
.formulario__fim{ flex-direction:column; justify-content:center; text-align:center; }

/* Filtros do portfólio no telemóvel: o nome ao centro do traço de cima. */
@media (max-width:1099px){
  .canal{ align-items:center; text-align:center; padding-inline:6px; }
}

/* Acessibilidade (2026-10-04): o contorno dos campos do formulário passa a
   ter 3,3:1 sobre o fundo (WCAG 1.4.11; o filete de antes tinha 1,2:1). */
.campo input,
.campo select,
.campo textarea{ border-color:#5E6578; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover{ border-color:#7A8296; }

/* ───────────────────────── Página de erro 404 ─────────────────────────
   Uma TV sem sinal: estática a mexer, "CH 404" e "SEM SINAL" no ecrã. */
.erro{
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  align-items:center; gap:var(--sp-6);
  min-height:calc(100svh - var(--nav-h));
  padding:var(--sp-5) var(--gutter);
}
.erro__tv{
  position:relative; aspect-ratio:4 / 3; overflow:hidden; isolation:isolate;
  border-radius:3.6% / 5.8%;
  background:#0B0C10;
}
.erro__estatica{
  position:absolute; inset:-10%; z-index:1;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 2px, transparent 2px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85  0 0 0 0 .87  0 0 0 0 .92  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23e)'/%3E%3C/svg%3E"),
    #0B0C10;
  opacity:.55;
  animation:grao 300ms steps(3) infinite;
}
.erro__tv .ecra__vinheta, .erro__tv .ecra__varrimento, .erro__tv .ecra__reflexo{ z-index:2; }
.erro__canal, .erro__sinal{
  position:absolute; z-index:3; margin:0;
  font-family:var(--font-tv); line-height:1; letter-spacing:.05em;
  text-shadow:0 1px 0 rgba(0,0,0,.8), 0 0 12px rgba(0,0,0,.6);
}
.erro__canal{ top:max(16px, 7%); left:max(18px, 6%); font-size:clamp(22px, 2.2vw, 32px); color:#FFC629; }
.erro__sinal{
  top:50%; left:50%; transform:translate(-50%, -50%);
  padding:.25em .6em;
  font-size:clamp(28px, 3.4vw, 48px); color:#FFFFFF;
  background:rgba(6,7,11,.75);
}
.erro__texto{ display:flex; flex-direction:column; gap:var(--sp-2); }
.erro__titulo{ font-size:clamp(30px, 2.4vw + 14px, 52px); line-height:1.1; }
.erro__frase{ max-width:40ch; font-size:17px; color:var(--text-2); }
.erro__en{ font-size:14.5px; color:var(--text-2); }
.erro__acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-4); margin-top:var(--sp-3); }
.erro__link{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--font-tv); font-size:var(--fs-tv); letter-spacing:.05em; text-transform:uppercase;
  color:var(--yellow);
}
.erro__link:hover{ text-decoration:underline; text-underline-offset:4px; }
@media (max-width:860px){
  .erro{ grid-template-columns:1fr; gap:var(--sp-4); align-content:start; }
}
@media (prefers-reduced-motion:reduce){ .erro__estatica{ animation:none; } }

/* 404: texto e teclas ao centro da coluna; a frase numa só linha no ecrã largo. */
.erro__texto{ align-items:stretch; }
/* No telemóvel, com a TV por cima, o texto fica ao centro. */
@media (max-width:860px){ .erro__texto{ align-items:center; text-align:center; } .erro__acoes{ justify-content:center; } }
.erro__frase{ max-width:none; }
@media (min-width:1200px){ .erro__frase{ white-space:nowrap; } }