/* Versicolor® · página de projeto (dono: frente F4). DIRECAO-v2 §5: estudo de caso e ficha curta.
   Primeiro ecrã que identifica a obra sem scroll; o palco troca por separador, seta ou swipe (nada preso ao scroll);
   a explicação em camadas (frase, quatro respostas, painel de informação); o arquivo inteiro numa folha.
   Componentes partilhados (modos, faixa, painel, folha, barra) seguem os contratos da §7 com estilo próprio da
   página; o comportamento base é do core.js e o projeto.js só o completa onde o core ainda não o tem. */

.pj { --pj-secao: clamp(48px, 6vw, 96px); --pj-h1: clamp(36px, 4vw, 60px); --pj-titulo: clamp(26px, 2.6vw, 40px);
  background: var(--osso); }
.pj section { position: relative; }
.pj-titulo { font: 300 var(--pj-titulo)/1.08 var(--serif); letter-spacing: -.015em; margin: 0; }
.pj .pilula { white-space: nowrap; }

/* legenda numerada do sistema (.legenda-n): o nome do sítio a cheio */
.pj .legenda-n { max-width: none; }
.pj .legenda-n strong { font-weight: 500; color: var(--tinta); margin-right: .35em; }

/* ---------------------------------------------------------------- 1. primeiro ecrã */
.pj-capa { padding-top: var(--cab); background: var(--fundo); color: var(--tinta); }
.pj-capa__rotulo { margin: 0 0 14px; color: var(--tinta-2); }
.pj-capa__rotulo .numeral--pequeno { color: var(--acento); }
.pj-capa__titulo { font: 300 var(--pj-h1)/1.02 var(--serif); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.pj-capa__titulo sup { font-size: .42em; vertical-align: .9em; }
.pj-capa__linha { margin: 12px 0 0; }
/* a descrição (1 ou 2 parágrafos, revisão do cliente): o primeiro na voz da casa, o segundo em texto corrido */
.pj-capa__desc { margin: 18px 0 0; max-width: 30rem; }
.pj-capa__desc p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinta-3); text-wrap: pretty; }
.pj-capa__desc p:first-child { font: 300 clamp(18px, 1.3vw, 21px)/1.36 var(--serif); color: var(--tinta); }
.pj-capa__desc p + p { margin-top: 10px; }

/* "Ler mais" (15 e 16-Out-2026): no primeiro ecrã ficam o nome e a linha da obra; a descrição, o Enquadramento e a
   Intenção do projeto abrem no sítio pelo "Ler mais" do site todo (M15 do base.css e do core.js, ler-mais--tudo).
   Fechado, fica só o botão, por baixo da linha da obra. */
.pj-mais { margin-top: 6px; }
.pj-mais__blocos { margin-top: 22px; max-width: 30rem; }
.pj-mais__blocos:first-child { margin-top: 18px; }
.pj-mais__blocos .pj-texto__bloco p { font-size: 15px; line-height: 1.55; color: var(--tinta-3); }
.pj-capa__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pj-capa__acoes--movel { display: none; }
.pj-btn-texto { min-height: 44px; display: inline-flex; align-items: center; font: 500 14px/1 var(--sans);
  background-color: transparent; border: 0; padding: 0 4px; cursor: pointer; color: inherit; }

/* ficha: a do sistema (.ficha, duas colunas), mais justa no primeiro ecrã */
.pj-capa .ficha { margin-top: 22px; gap: 12px var(--calha); }
.pj-capa .ficha dd { font-size: 14px; }

/* estudo de caso: capa em col 1 a 8 a sangrar pela esquerda, texto em col 9 a 12 */
@media (min-width: 1024px) {
  .pj-capa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha);
    padding-right: var(--margem); min-height: 100svh; }
  /* a capa enche o primeiro ecrã até ao fundo (com 860 px de teto, a 1920x1080 sobrava uma faixa de 148 px por baixo
     da imagem ao lado da ficha); 75vw só trava os ecrãs ao alto, onde o 5:4 ficaria cortado numa tira */
  .pj-capa--caso .pj-capa__media { grid-column: 1 / 9; height: min(calc(100svh - var(--cab)), 75vw); overflow: hidden; }
  .pj-capa--caso .pj-capa__texto { grid-column: 9 / 13; align-self: end; padding: 32px 0 clamp(24px, 4svh, 44px); }
  .pj-capa__media picture, .pj-capa__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* ficha curta: texto em col 1 a 4 e o palco Antes e Depois em col 5 a 12 */
  .pj-capa--ficha { padding-left: var(--margem); align-items: end; }
  .pj-capa--ficha .pj-capa__texto { grid-column: 1 / 5; grid-row: 1; align-self: end; padding: 32px 0 clamp(24px, 4svh, 44px); }
  .pj-capa--ficha .pj-capa__palco { grid-column: 5 / 13; grid-row: 1; align-self: end; min-width: 0;
    padding-bottom: clamp(24px, 4svh, 44px); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .pj-capa--caso .pj-capa__media { grid-column: 1 / 8; }
  .pj-capa--caso .pj-capa__texto { grid-column: 8 / 13; }
  .pj-capa--ficha .pj-capa__texto { grid-column: 1 / 6; }
  .pj-capa--ficha .pj-capa__palco { grid-column: 6 / 13; }
  .pj-capa__desc p:first-child { font-size: 17px; }
  .pj-capa__desc p { font-size: 14px; line-height: 1.5; }
}
/* telemóvel e tablet: capa 5:4 a toda a largura (até 55% da janela); por baixo o nome, a linha e as fotografias */
@media (max-width: 1023px) {
  .pj-capa { display: flex; flex-direction: column; }
  .pj-capa--caso .pj-capa__media { aspect-ratio: 5 / 4; max-height: 55svh; width: 100%; overflow: hidden; }
  .pj-capa__media picture, .pj-capa__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .pj-capa__texto { padding: 18px var(--margem) 28px; }
  .pj-capa__rotulo { margin-bottom: 10px; }
  .pj-capa .pj-ficha, .pj-capa__acoes--pc { display: none; }
  .pj-capa__acoes--movel { display: flex; margin-top: 16px; }
  .pj-capa__desc { margin-top: 18px; }
  .pj-capa__desc p:first-child { font-size: 19px; }
  .pj-capa__linha { margin-top: 8px; }
}

/* ---------------------------------------------------------------- palco por modos (M2) e faixas (M3) */
.modos { min-width: 0; }
/* overflow-y: hidden: com só overflow-x o 1 px que sobra do sublinhado fazia da fila um scroll vertical e um gesto
   que começava nos separadores não descia a página (telemóvel, 9-Out) */
.modos__separadores { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; margin: 0 0 4px; border-bottom: 1px solid var(--linha); touch-action: pan-x pan-y; }
.modos__separadores::-webkit-scrollbar { display: none; }
.modos [role="tab"] { position: relative; flex: none; min-height: 44px; padding: 0 14px; background: none; border: 0;
  font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); cursor: pointer;
  transition: color .3s var(--ease); }
.modos [role="tab"]:first-child { padding-left: 0; }
.modos [role="tab"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 1px;
  background: var(--acento); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.modos [role="tab"]:first-child::after { left: 0; }
.modos [role="tab"][aria-selected="true"] { color: var(--tinta); }
.modos [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .modos [role="tab"]:hover { color: var(--tinta); } }
.modos__unico { margin: 0 0 12px; color: var(--tinta-2); }
.pj .modos__palco { container-type: inline-size; }
.modos__nota { margin: 14px 0 16px; font-size: 15px; line-height: 1.5; color: var(--tinta-3); max-width: 40rem; text-wrap: pretty; }
html.js:not(.vc-pronto) .modos__painel:not(.is-ativo) { display: none; }   /* antes do core: sem salto */
/* telemóvel (§5.2): a nota do modo vem por baixo da faixa e do contador; no PC fica por baixo dos separadores */
@media (max-width: 1023px) {
  .pj .modos__painel { display: flex; flex-direction: column; }
  .pj .modos__painel > .modos__nota { order: 1; margin: 14px 0 0; }
}

/* faixa nativa com espreitadela, contador e setas: a roda vertical nunca é desviada para o lado */
.pj-faixa { --faixa-h: min(52svh, 44cqw); display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: 0; outline-offset: 4px; }
.pj-faixa::-webkit-scrollbar { display: none; }
.pj-faixa__item { flex: none; margin: 0; scroll-snap-align: start; width: calc(var(--faixa-h) * var(--ar, 1.5));
  max-width: 100%; }
.pj-faixa__item--v { --ar: .8; }
.pj-faixa__item__media { height: var(--faixa-h); overflow: hidden; background: var(--superficie); }
.pj-faixa__item__media picture, .pj-faixa__item__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pj-faixa__item .legenda-n { min-height: 1.45em; }
.pj-palco .faixa__controlos { margin-top: 6px; }
@media (hover: hover) and (pointer: fine) { .pj-faixa { cursor: grab; } }
@media (max-width: 1023px) {
  .pj-faixa { --faixa-h: auto; }
  .pj-faixa__item, .pj-faixa__item--v { width: 86%; --ar: .8; }
  .pj-faixa__item__media { height: auto; aspect-ratio: 4 / 5; }
}

/* planta em três estados (o traço desenha-se ao entrar) */
.pj-planta { --ar: 2.09; }
.pj-planta .pj-faixa__item__media { display: grid; place-items: center; padding: 4% 3%; background: transparent; border: 1px solid var(--linha); }
.pj-planta svg { width: 100%; height: 100%; }
.pj-planta--alterada .planta { color: var(--acento); }
.pj-planta svg .paredes path { stroke-width: 1.35; }
.pj-planta svg .mobiliario path { stroke-width: .7; }
@media (max-width: 1023px) { .pj-planta, .pj-faixa__item.pj-planta { width: 92%; }
  .pj-planta .pj-faixa__item__media { aspect-ratio: 2.09; } }

/* 3D: comparador quando as camadas estão registadas, lado a lado quando os pontos de vista diferem */
.pj-par { margin: 0; }
.pj-par .comparar { margin: 0; }
.pj-par .comparar__palco { max-height: min(56svh, 520px); }
.pj-par__lados { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pj-par__lado { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: min(56svh, 520px); overflow: hidden;
  background: var(--superficie); }
.pj-par__lado picture, .pj-par__lado img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pj-par__rot { position: absolute; left: 10px; top: 10px; padding: 6px 8px; background: rgb(11 11 12 / .55); color: var(--osso); }
.pj-par .legenda-n { min-height: 1.45em; }
.pj-minis { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.pj-mini { flex: none; display: grid; gap: 6px; width: 96px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--tinta-2); text-align: left; }
.pj-mini__img { display: block; width: 96px; height: 64px; overflow: hidden; outline: 1px solid transparent;
  outline-offset: 2px; transition: outline-color .3s var(--ease); }
.pj-mini__img picture, .pj-mini__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pj-mini[aria-pressed="true"] { color: var(--tinta); }
.pj-mini[aria-pressed="true"] .pj-mini__img { outline-color: var(--acento); }
.pj-mini__rot { font-size: 10px; }
html.js .pj-pares > .pj-par:not(.is-ativo) { display: none; }
/* o par registado passa do 3D à obra com a fusão de luz do motor 3D (vc3d.js); o palco nunca passa da altura do
   ecrã: a largura sai da altura e da proporção do par (--ar vem do bloco, "2400 / 1800") */
.pj-fundir { margin: 0; }
.pj-fundir .fundir__palco { width: min(100%, calc(min(56svh, 540px) * (var(--ar, 3 / 2)))); }
.pj-fundir .fundir__botoes { margin-top: 6px; }
.pj-fundir .fundir__legenda { margin-top: 0; }
html:not(.js) .pj-fundir .fundir__palco { width: auto; }
@media (max-width: 1023px) { .pj-fundir .fundir__palco { width: 100%; } }
html:not(.js) .pj-minis { display: none; }

/* ficha curta: o palco é a capa (Depois em 5:4 no telemóvel, com Antes | Depois sobre a imagem) */
.pj-palco--capa .pj-faixa { --faixa-h: min(56svh, 52cqw); }
@media (max-width: 1023px) {
  .pj-capa__palco { order: -1; position: relative; }
  .pj-palco--capa { position: relative; }
  .pj-palco--capa .modos__separadores { position: absolute; z-index: 2; left: var(--margem); bottom: 64px; border: 0;
    background: rgb(11 11 12 / .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 0 4px; gap: 0; }
  .pj-palco--capa [role="tab"], .pj-palco--capa [role="tab"]:first-child { padding: 0 12px; color: rgb(243 241 236 / .7); }
  .pj-palco--capa [role="tab"][aria-selected="true"] { color: var(--osso); }
  .pj-palco--capa [role="tab"]::after, .pj-palco--capa [role="tab"]:first-child::after { left: 12px; right: 12px; bottom: 8px; background: var(--luz); }
  .pj-palco--capa .modos__unico { position: absolute; z-index: 2; left: var(--margem); bottom: 72px; color: var(--osso); }
  .pj-palco--capa .modos__nota { display: none; }
  .pj-palco--capa .pj-faixa { gap: 0; }
  /* os separadores estão sobre a imagem: a margem do palco (18 px) deixava uma faixa vazia por baixo do cabeçalho */
  .pj-palco--capa .modos__palco { margin-top: 0; }
  .pj-palco--capa .pj-faixa__item, .pj-palco--capa .pj-faixa__item--v { width: 100%; }
  .pj-palco--capa .pj-faixa__item__media { aspect-ratio: 5 / 4; max-height: 55svh; width: 100%; }
  .pj-palco--capa .pj-faixa__item .legenda-n { padding: 0 var(--margem); min-height: 0; }
  .pj-palco--capa .faixa__controlos { position: absolute; z-index: 2; right: var(--margem); bottom: 56px; margin: 0; min-height: 32px;
    background: rgb(11 11 12 / .55); padding: 0 10px; }
  .pj-palco--capa .faixa__setas { display: none; }
  .pj-palco--capa .faixa__contador, .pj-palco--capa .faixa__contador b { color: var(--osso); }
  /* menos texto sobre a imagem (16-Out-2026): a vizinha que espreita já diz que há mais; o "1 / 6" fica no PC */
  .pj-palco--capa .faixa__controlos { display: none; }
  .pj-capa--ficha .pj-capa__texto { padding-top: 6px; }
}

/* ---------------------------------------------------------------- 2. o projeto: as principais soluções em cartões */
.pj-projeto { padding: var(--pj-secao) var(--margem); background: var(--fundo); color: var(--tinta); }
.pj-texto__bloco + .pj-texto__bloco { margin-top: 22px; }
.pj-texto__tit { margin: 0 0 10px; padding-top: 14px; border-top: 1px solid var(--linha); font-weight: 500; }
.pj-texto__bloco p { margin: 0; font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.pj-texto__bloco p + p { margin-top: 10px; }
@media (min-width: 1024px) {
  .pj-projeto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); align-items: start; }
  .pj-projeto > .pj-sel { grid-column: 1 / 13; min-width: 0; }
  /* estudo de caso: começa abaixo do cabeçalho e da barra quando chega ao topo */
  .pj-nivel-caso .pj-projeto { padding-top: calc(var(--pj-secao) + var(--cab)); }
}

/* palco do estudo de caso: no PC os modos são os títulos da secção, em coluna à esquerda; no telemóvel, a fila */
.pj-imagens { padding: var(--pj-secao) var(--margem); background: var(--fundo); color: var(--tinta); border-top: 1px solid var(--linha); }
@media (min-width: 1024px) {
  .pj-palco--lado { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); align-items: start; }
  .pj-palco--lado > .modos__separadores { grid-column: 1 / 5; flex-direction: column; align-items: flex-start; gap: 2px;
    margin: 0; border: 0; overflow: visible; padding-top: 2px; }
  .pj-palco--lado [role="tab"], .pj-palco--lado [role="tab"]:first-child { min-height: 44px; padding: 4px 0 8px;
    font: 300 clamp(22px, 2vw, 30px)/1.12 var(--serif); letter-spacing: -.012em; text-transform: none; color: var(--tinta-3);
    text-align: left; }
  .pj-palco--lado [role="tab"]::after, .pj-palco--lado [role="tab"]:first-child::after { left: 0; right: 0; bottom: 4px; }
  .pj-palco--lado [role="tab"][aria-selected="true"] { color: var(--tinta); }
  .pj-palco--lado > .modos__unico { grid-column: 1 / 5; font: 300 clamp(22px, 2vw, 30px)/1.12 var(--serif); letter-spacing: -.012em;
    text-transform: none; color: var(--tinta); }
  .pj-palco--lado > .modos__palco { grid-column: 5 / 13; min-width: 0; }
  .pj-palco--lado .modos__nota { margin-top: 0; }
  /* o palco começa logo a seguir às soluções (16-Out-2026: o ecrã inteiro centrado deixava ~200 px de creme vazio
     entre as duas secções); a faixa dá a altura */
  .pj-nivel-caso .pj-imagens { padding-top: calc(var(--pj-secao) * .75); }
  .pj-nivel-caso .pj-projeto { padding-bottom: calc(var(--pj-secao) * .75); }
  .pj-imagens .pj-faixa { --faixa-h: min(60svh, 50cqw); }
  .pj-imagens .pj-planta { max-width: calc(100% - 64px); }   /* a planta seguinte continua a espreitar */
}
@media (max-width: 1023px) { .pj-imagens .modos__palco { margin-top: 8px; } }

/* rótulo 3D: um render nunca passa por fotografia (sempre à vista, sobre a imagem) */
.pj-faixa__item__media, .pj-sel__item__media, .pj-dec__img, .pj-mini__img { position: relative; }
.pj-r3d { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 5px 8px 4px; background: rgb(11 11 12 / .66);
  color: var(--osso); letter-spacing: .14em; pointer-events: none; }
.pj-mini__img .pj-r3d, .pj-dec__img .pj-r3d { left: 6px; top: 6px; padding: 3px 6px 2px; font-size: 9px; letter-spacing: .12em; }

/* ficha curta: ecrã 2 com as respostas e a seleção (tríptico, ou par e uma) */
.pj-sel { display: grid; gap: 8px; align-items: start; }
.pj-sel__item { margin: 0; }
.pj-sel__item__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--superficie); }
.pj-sel__item--h .pj-sel__item__media { aspect-ratio: 3 / 2; }
.pj-sel__item__media picture, .pj-sel__item__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .pj-projeto > .pj-sel { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
  .pj-sel--1 { --n: 1; } .pj-sel--2 { --n: 2; } .pj-sel--3 { --n: 3; } .pj-sel--4 { --n: 4; } .pj-sel--5, .pj-sel--6 { --n: 3; }
  .pj-sel__item__media, .pj-sel__item--h .pj-sel__item__media { aspect-ratio: 4 / 5; max-height: 58svh; }
  .pj-sel--1 .pj-sel__item__media, .pj-sel--2 .pj-sel__item__media { aspect-ratio: 3 / 2; }
}
@media (max-width: 1023px) {
  .pj-sel { grid-template-columns: 1fr 1fr; margin-top: 24px; }
  .pj-sel__item:nth-child(n + 5) { display: none; }
  .pj-sel--3 .pj-sel__item:first-child { grid-column: 1 / -1; }
  .pj-sel--3 .pj-sel__item:first-child .pj-sel__item__media { aspect-ratio: 3 / 2; }
  .pj-sel__item--h .pj-sel__item__media { aspect-ratio: 4 / 5; }
}

/* ---------------------------------------------------------------- 3. principais soluções: cartões compactos com imagem
   À vista, a imagem (com profundidade ao rato, motor 3D), o número e o título; a frase do cartão ativo vive na legenda
   da secção (projeto.js: rato, foco ou, no telemóvel, o cartão encostado à esquerda da faixa). Sem a legenda (sem JS,
   movimento reduzido), cada frase fica por baixo do seu cartão. */
.pj-sols__topo { margin: 0 0 22px; }
.pj-sols__legenda { margin: 0; min-height: calc(3 * 1.36em); max-width: 34rem; font: 300 var(--t-lead)/1.36 var(--serif);
  color: var(--tinta); text-wrap: pretty; }
.pj-sols__legenda:empty { display: none; }
.pj-sols__legenda .numeral--pequeno { margin-right: .7em; font: 500 11px/1 var(--sans); letter-spacing: .1em; color: var(--acento);
  vertical-align: .25em; }
.pj-sol__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: var(--calha); align-items: start; }
/* position: relative prende a frase escondida (absoluta) ao cartão: fora dele, a do quarto cartão da faixa saía da
   página no telemóvel e o navegador afastava a vista (390 passava a 702 de largura) */
.pj-sol { position: relative; margin: 0; min-width: 0; outline-offset: 4px; }
.pj-sol[data-ecra-item] { cursor: zoom-in; }
.pj-sol__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--superficie); }
.pj-sol__img picture, .pj-sol__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pj-sol .pj-dec__cab { position: relative; display: flex; gap: 10px; align-items: baseline; margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--linha); }
.pj-sol .pj-dec__cab::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--acento);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.pj-sol .pj-dec__cab .numeral--pequeno { color: var(--acento); }
.pj-sol .pj-dec__cab .rotulo { color: var(--tinta); transition: color .3s var(--ease); }
.pj-sol .pj-dec__txt { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--tinta-3); text-wrap: pretty; }
.tem-legenda .pj-sol .pj-dec__cab .rotulo { color: var(--tinta-2); }
.tem-legenda .pj-sol.is-ativo .pj-dec__cab .rotulo { color: var(--tinta); }
.tem-legenda .pj-sol.is-ativo .pj-dec__cab::before { transform: scaleX(1); }
/* a frase do cartão sai da vista (continua no HTML, para os leitores de ecrã e para o visor) */
.tem-legenda .pj-dec__txt { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; opacity: 0; }
@media (min-width: 1024px) {
  /* o título e a legenda numa fila, os cartões a toda a largura por baixo (imagens grandes, texto curto) */
  .pj-sols__topo { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha);
    align-items: end; margin-bottom: 26px; }
  .pj-sols__topo .pj-titulo { grid-column: 1 / 6; margin: 0; }
  .pj-sols__legenda { grid-column: 7 / 13; min-height: calc(2 * 1.36em); }
  /* ao chegar a legenda está vazia (nenhum cartão ativo): o lugar fica guardado, para os cartões não saltarem ao
     passar o rato */
  .pj-sols__legenda:empty { display: block; }
  .pj-sol__lista { grid-column: 1 / 13; }
  .pj-sol__img { max-height: 44svh; }
}
@media (hover: hover) and (pointer: fine) {
  .tem-legenda:hover .pj-sol:not(:hover) .pj-sol__img img { opacity: .55; }
  .pj-sol__img img { transition: opacity .4s var(--ease), scale .6s var(--ease); }
}
/* telemóvel: o título, a faixa de cartões (o seguinte espreita) e a legenda por baixo */
@media (max-width: 1023px) {
  .pj-sols { display: flex; flex-direction: column; }
  .pj-sols__topo { display: contents; }
  .pj-sols__topo .pj-titulo { order: 0; margin-bottom: 18px; }
  .pj-sol__lista { order: 1; display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem); scroll-padding-inline: var(--margem); }
  .pj-sol__lista::-webkit-scrollbar { display: none; }
  .pj-sol { flex: none; width: 62%; scroll-snap-align: start; }
  .pj-sols__legenda { order: 2; margin-top: 16px; font-size: 18px; min-height: calc(3 * 1.36em); }
}

/* ---------------------------------------------------------------- 3b. a planta em 3D (Porto Salvo; motor 3D, three.js)
   No escuro, antes do momento da luz e do filme. O desenho em SVG fica por baixo até o three.js chegar e fica sozinho
   sem WebGL; a dica de arrastar só aparece com o modelo vivo. */
.pj-planta3d { padding: var(--pj-secao) var(--margem); background: var(--noite); color: var(--osso); }
.pj-planta3d__texto { margin-bottom: 18px; }
.pj-planta3d__dica { margin: 12px 0 0; opacity: 0; transition: opacity .6s var(--ease); }
.pj-planta3d:has(.planta3d--viva) .pj-planta3d__dica { opacity: 1; }
.pj-planta3d .planta3d__palco { background: var(--noite-2); }
.pj-planta3d .planta3d__legenda { margin-top: 4px; font: 500 var(--t-rotulo)/1.4 var(--sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--pedra); }
@media (min-width: 1024px) {
  /* PC: o título em cima à esquerda, os quatro estados em coluna por baixo dele e a planta à direita (a figura ocupa a
     grelha toda e reparte-se: o palco em col 4 a 12, os botões e a legenda em col 1 a 3) */
  .pj-planta3d { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); align-items: start; }
  .pj-planta3d__texto { grid-column: 1 / 4; grid-row: 1; position: relative; z-index: 2; margin: 0; pointer-events: none; }
  .pj-planta3d__fig { grid-column: 1 / 13; grid-row: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto; column-gap: var(--calha); min-width: 0; }
  .pj-planta3d .planta3d__palco { grid-column: 4 / 13; grid-row: 1 / 4; max-height: 74svh; }
  .pj-planta3d .planta3d__estados { grid-column: 1 / 4; grid-row: 2; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; }
  .pj-planta3d .planta3d__estados button { min-height: 40px; }
  .pj-planta3d .planta3d__estados button::after { bottom: 10px; }
  .pj-planta3d .planta3d__legenda { grid-column: 1 / 4; grid-row: 3; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linha); }
}

/* ---------------------------------------------------------------- 4. o momento: a linha de luz sobre a régua verdadeira */
.pj-momento { padding: var(--pj-secao) var(--margem); background: var(--noite); color: var(--osso); }
.pj-momento__fig { max-width: calc(100% * 10 / 12); margin: 0 auto; }
.pj-momento__fig .luz-sobre__quadro { max-height: 74svh; }
.pj-momento .legenda-n { color: var(--pedra); }
@media (max-width: 1023px) { .pj-momento__fig { max-width: none; margin-inline: calc(var(--margem) * -1); }
  .pj-momento .legenda-n { padding-inline: var(--margem); } }

/* ---------------------------------------------------------------- 5. filme (nunca toca sozinho) */
.pj-filme { padding: var(--pj-secao) var(--margem); background: var(--noite); color: var(--osso);
  display: grid; gap: 20px var(--calha); align-items: end; }
.pj-momento + .pj-filme { padding-top: 0; }   /* o momento e o filme no mesmo escuro, sem dois vazios seguidos */
.pj-filme__frase { font: 300 clamp(19px, 1.5vw, 24px)/1.3 var(--serif); margin: 14px 0 0; max-width: 24rem; }
.pj-filme__dados { margin: 14px 0 0; }
.pj-filme .aviso-provisorio { margin-top: 10px; max-width: 22rem; }
.pj-filme__ecra { position: relative; background: #000; overflow: hidden; }
.pj-filme__ecra .vid { position: absolute; inset: 0; }
.pj-filme__ecra .vid :is(video, picture, img) { width: 100%; height: 100%; object-fit: contain; }
.pj-filme--h .pj-filme__ecra { aspect-ratio: 16 / 9; }
/* o excerto só existe na vertical: 9:16 numa coluna, com o texto ao lado (nunca em tira dentro de um 16:9) */
.pj-filme--v .pj-filme__ecra { aspect-ratio: 9 / 16; }
.pj-filme__ecra .vid__filme { cursor: pointer; }
.pj-filme--v .vid__tocar { padding: 20px; }   /* a margem da página (até 96 px) partia "Ver o filme" em duas linhas */
.pj-filme__ecra:fullscreen { background: #000; aspect-ratio: auto; max-height: none; }
@media (min-width: 1024px) {
  .pj-filme { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pj-filme--h .pj-filme__texto { grid-column: 2 / 5; }
  .pj-filme--h .pj-filme__ecra { grid-column: 5 / 12; }
  .pj-filme--v .pj-filme__texto { grid-column: 3 / 7; padding-bottom: 4px; }
  .pj-filme--v .pj-filme__ecra { grid-column: 7 / 11; height: min(64svh, 600px); width: auto; justify-self: start; }
}
@media (max-width: 1023px) {
  .pj-filme { grid-template-columns: 1fr 1fr; padding-block: 40px; }
  .pj-filme--h { grid-template-columns: 1fr; }
  .pj-filme--v .pj-filme__texto { grid-column: 1; grid-row: 1; }
  .pj-filme--v .pj-filme__ecra { grid-column: 2; grid-row: 1; width: 100%; max-height: 46svh; justify-self: end; }
  /* no ecrã estreito o círculo fica por cima de "Ver o filme" (lado a lado partia o rótulo em duas linhas) */
  .pj-filme--v .vid__tocar { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px;
    padding: 16px 14px; }
  .pj-filme--v .vid__tocar-ico { width: 52px; height: 52px; }
  /* a tocar, o ecrã cresce para a largura toda (até 70svh de altura): no meio do texto ficava com 170 px */
  .pj-filme--v .pj-filme__ecra.com-ctl { grid-column: 1 / -1; grid-row: 2; width: min(100%, calc(70svh * 9 / 16));
    max-height: none; justify-self: center; }
}

/* momento vertical (15-Out: a fotografia acabada das réguas de luz no teto) e, no PC, ao lado do filme vertical, à
   mesma altura e no mesmo escuro. A fotografia nunca se corta: a largura sai da altura (--luz-r = largura / altura) */
.pj-momento--v .luz-sobre__quadro { max-height: none; }
.pj-momento--v .pj-momento__fig { width: min(100%, calc(var(--pj-lf-h, 72svh) * var(--luz-r, .667))); margin-inline: auto; }
.pj-luz-filme { background: var(--noite); color: var(--osso); }
@media (min-width: 1024px) {
  .pj-luz-filme { --pj-lf-h: min(72svh, 680px, 46vw); display: flex; justify-content: center; align-items: flex-start;
    gap: calc(var(--calha) * 2.5); padding: var(--pj-secao) var(--margem); }
  .pj-luz-filme > .pj-momento, .pj-luz-filme > .pj-filme { padding: 0; }
  .pj-luz-filme > .pj-momento--v { flex: none; width: calc(var(--pj-lf-h) * var(--luz-r, .667)); }
  .pj-luz-filme > .pj-momento--v .pj-momento__fig { width: 100%; max-width: none; margin: 0; }
  .pj-luz-filme > .pj-filme--v { flex: none; display: grid; grid-template-columns: auto minmax(9rem, 12rem);
    align-items: end; gap: 0 calc(var(--calha) * 1.5); }
  .pj-luz-filme > .pj-filme--v .pj-filme__ecra { grid-column: 1; grid-row: 1; height: var(--pj-lf-h); width: auto;
    justify-self: start; }
  .pj-luz-filme > .pj-filme--v .pj-filme__texto { grid-column: 2; grid-row: 1; padding-bottom: 4px; }
  .pj-luz-filme > .pj-filme--v .pj-filme__ecra:fullscreen { height: 100%; width: 100%; }
}
/* controlos próprios (projeto.js): o tempo e a duração contam só o que se vê, como o rótulo "0:32 · com som" */
.pj-ctl { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: none; align-items: center; gap: 2px;
  padding: 36px 4px 4px; background: linear-gradient(rgb(11 11 12 / 0), rgb(11 11 12 / .78)); color: var(--osso);
  transition: opacity .3s var(--ease); }
.pj-filme__ecra.com-ctl .pj-ctl { display: flex; }
/* telemóvel: com o filme a andar a pílula sai, para nunca ficar por cima dos controlos se a pessoa descer um pouco.
   Só enquanto anda (.a-correr, do projeto.js): com o filme em pausa a pílula volta (antes só voltava no fim, 12-Out) */
@media (max-width: 1023px) {
  body.pj:has(.pj-filme__ecra.com-ctl.a-correr) .barra-projeto.visivel { opacity: 0; visibility: hidden; pointer-events: none; }
}
.pj-filme__ecra.ctl-quieto .pj-ctl { opacity: 0; pointer-events: none; }   /* o primeiro toque só os mostra */
.pj-filme__ecra.ctl-quieto { cursor: none; }
.pj-ctl button { flex: none; width: 40px; height: 44px; display: grid; place-items: center; padding: 0; margin: 0;
  background: none; border: 0; color: inherit; cursor: pointer; }
.pj-ctl svg { width: 20px; height: 20px; fill: currentColor; }
.pj-ctl [data-ctl="tocar"] .ico-tocar, .pj-ctl [data-ctl="tocar"].is-pausado .ico-pausa { display: none; }
.pj-ctl [data-ctl="tocar"].is-pausado .ico-tocar { display: block; }
.pj-ctl [data-ctl="som"] .ico-mudo, .pj-ctl [data-ctl="som"][aria-pressed="true"] .ico-som { display: none; }
.pj-ctl [data-ctl="som"][aria-pressed="true"] .ico-mudo { display: block; }
.pj-ctl__tempo { flex: none; padding: 0 4px; font: 500 11px/1 var(--sans); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.pj-ctl__pos { flex: 1 1 auto; min-width: 36px; height: 44px; margin: 0 4px; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; --p: 0%; }
.pj-ctl__pos::-webkit-slider-runnable-track { height: 2px;
  background: linear-gradient(var(--luz), var(--luz)) 0 0 / var(--p) 100% no-repeat, rgb(243 241 236 / .3); }
.pj-ctl__pos::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border: 0;
  border-radius: 50%; background: var(--osso); }
.pj-ctl__pos::-moz-range-track { height: 2px; background: rgb(243 241 236 / .3); }
.pj-ctl__pos::-moz-range-progress { height: 2px; background: var(--luz); }
.pj-ctl__pos::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--osso); }
.pj-ctl :focus-visible { outline: 1px solid var(--luz); outline-offset: -6px; }
@media (hover: hover) and (pointer: fine) { .pj-ctl button:hover { color: var(--luz); } }

/* ---------------------------------------------------------------- 6. fotografias, convite e seguinte (até 0,6 ecrã no PC) */
.pj-fim { padding: 48px var(--margem) 36px; background: var(--noite); color: var(--osso); display: grid; gap: 20px var(--calha); }
.pj-fim__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.pj-fim__convite { margin: 0; font: 300 clamp(19px, 1.5vw, 24px)/1.3 var(--serif); }
/* a frase do convite é a ligação: sublinhado de luz que enche ao passar e a seta desenhada a seguir */
.pj-fim__contacto { display: inline-flex; align-items: baseline; gap: .45em; min-height: 44px; color: var(--osso);
  background: linear-gradient(var(--acento), var(--acento)) 0 calc(100% - 6px) / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.pj-fim__contacto::after { content: '→'; font: 400 .8em/1 var(--sans); color: var(--acento); transition: translate .35s var(--ease); }
.pj-fim__contacto:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .pj-fim__contacto:hover { background-size: calc(100% - 1.25em) 1px; }
  .pj-fim__contacto:hover::after { translate: 6px 0; }
}
a.cartao.pj-seguinte { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 0 16px; align-items: center;
  color: inherit; text-decoration: none; }
a.cartao.pj-seguinte .cartao__capa { position: relative; grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5; min-width: 0; width: 100%; margin: 0;
  overflow: hidden; background: var(--noite-2); }
.pj-seguinte .cartao__capa picture, .pj-seguinte .cartao__capa img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease); }
a.cartao.pj-seguinte .pj-seguinte__texto { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
.pj-seguinte__texto .rotulo--luz { margin: 0 0 8px; }
.pj-seguinte .cartao__n { margin: 0 0 6px; }
.pj-seguinte .cartao__nome { font: 300 28px/1.04 var(--serif); margin: 0; letter-spacing: -.02em; text-wrap: balance; }
.pj-seguinte .cartao__meta { margin: 10px 0 0; }
.pj-seguinte__seta::before { content: '→'; }
.pj-seguinte__seta { display: inline-block; margin-top: 12px; font-size: 22px; line-height: 1; color: var(--acento);
  transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .pj-seguinte:hover .pj-seguinte__seta { transform: translateX(8px); } }
@media (hover: hover) and (pointer: fine) { .pj-seguinte:hover .cartao__capa img { transform: scale(1.02); } }
.pj-fim__nav { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-top: 14px; border-top: 1px solid var(--linha); }
.pj-fim .botao-n--grande { min-height: 44px; padding: 0 18px; font-size: 13px; }
.pj-nivel-ficha .pj-fim .pj-btn-fotos, .pj-nivel-3d .pj-fim .pj-btn-fotos { display: none; }
/* PC: à esquerda as fotografias, o convite e a navegação; à direita o seguinte (imagem 3:2 e o nome ao lado).
   Antes o convite ficava sozinho em meio ecrã escuro e o cartão saía da grelha (0,8 ecrã; agora cerca de 0,45) */
@media (min-width: 1024px) {
  .pj-fim { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; padding: 56px var(--margem) 44px;
    row-gap: 0; align-items: start; }
  .pj-fim__acoes { grid-column: 1 / 6; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 22px; }
  .pj-fim .botao-n--grande { min-height: 52px; padding: 0 26px; font-size: 14px; }
  .pj-fim__nav { grid-column: 1 / 6; grid-row: 2; align-self: end; margin-top: 28px; }
  a.cartao.pj-seguinte { grid-column: 6 / 13; grid-row: 1 / 3; align-self: stretch; grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--calha); align-items: end; }
  a.cartao.pj-seguinte .cartao__capa { grid-column: 1 / 5; aspect-ratio: 3 / 2; max-height: 40svh; }
  a.cartao.pj-seguinte .pj-seguinte__texto { grid-column: 5 / 8; align-self: end; }
  .pj-seguinte__texto .rotulo--luz { margin-bottom: 14px; }
  .pj-seguinte .cartao__nome { font-size: clamp(30px, 2.8vw, 46px); }
  /* ficha curta: o cartão pequeno do seguinte (§5.4) e a navegação logo por baixo do convite */
  .pj-nivel-ficha .pj-fim, .pj-nivel-3d .pj-fim { padding-top: 48px; }
  .pj-nivel-ficha .pj-fim__nav, .pj-nivel-3d .pj-fim__nav { align-self: start; margin-top: 24px; }
  .pj-nivel-ficha a.cartao.pj-seguinte, .pj-nivel-3d a.cartao.pj-seguinte { grid-column: 7 / 13; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pj-nivel-ficha a.cartao.pj-seguinte .cartao__capa, .pj-nivel-3d a.cartao.pj-seguinte .cartao__capa { grid-column: 1 / 4; max-height: 30svh; }
  .pj-nivel-ficha a.cartao.pj-seguinte .pj-seguinte__texto, .pj-nivel-3d a.cartao.pj-seguinte .pj-seguinte__texto { grid-column: 4 / 7; }
  .pj-nivel-ficha .pj-seguinte .cartao__nome, .pj-nivel-3d .pj-seguinte .cartao__nome { font-size: clamp(26px, 2.2vw, 36px); }
}

/* ---------------------------------------------------------------- barra de contexto (M12, do sistema) e painéis (M5, M6)
   Aqui só o que é desta página: o número da obra na barra e o conteúdo do painel de informação e do índice. */
.barra-projeto .barra__n { margin-left: 8px; }
.barra-projeto a[rel] { padding-inline: 8px; font-size: 15px; letter-spacing: 0; }
.barra__fotos b { margin-left: .35em; }
@media (min-width: 1024px) { .barra__fotos b { display: none; } }
.pj-info__nome { font: 300 clamp(30px, 2.8vw, 40px)/1.05 var(--serif); letter-spacing: -.015em; margin: 0; color: var(--tinta); }
.pj-indice__lista { list-style: none; margin: 0; padding: 0; }
.pj-indice__ligacao { display: grid; grid-template-columns: 32px 1fr; gap: 2px 12px; padding: 14px 0; color: inherit; text-decoration: none;
  border-top: 1px solid var(--linha); }
.pj-indice__ligacao .rotulo { grid-column: 2; }
.pj-indice__nome { font: 300 22px/1.15 var(--serif); }
.pj-indice__ligacao[aria-current="page"] .pj-indice__nome { color: var(--acento); }
@media (hover: hover) and (pointer: fine) { .pj-indice__ligacao:hover .pj-indice__nome { color: var(--acento); } }
.botao-n--cheio { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.botao-n--grande { min-height: 52px; padding: 0 26px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .botao-n--cheio:hover { background: transparent; color: var(--tinta); } }
html:not(.js) [data-abrir] { display: none; }

/* ---------------------------------------------------------------- ajustes de densidade (v2: menos ecrãs, o mesmo conteúdo) */
.pj .botao-n { gap: .32em; }
.pj-dec--sem-img { grid-template-columns: 1fr !important; }
.painel__corpo .pj-info__desc p { margin: 10px 0 0; }
.painel__corpo .pj-info__desc p:first-child { font: 300 20px/1.35 var(--serif); color: var(--tinta); }
@media (max-width: 1023px) {
  .pj-texto__bloco p { font-size: 15px; }
  .pj-capa--ficha .pj-capa__texto { padding-top: 16px; }
}
.painel__corpo .pj-info__nome { font: 300 clamp(30px, 2.8vw, 40px)/1.05 var(--serif); letter-spacing: -.015em; color: var(--tinta); }
/* telemóvel: a vizinha espreita na capa da ficha curta (mostra que há mais) e o momento fica dentro das margens */
@media (max-width: 1023px) {
  .pj-palco--capa .pj-faixa { gap: 6px; }
  .pj-palco--capa .pj-faixa__item, .pj-palco--capa .pj-faixa__item--v { width: 90%; }
  .pj-momento__fig { margin-inline: 0; }
  .pj-momento .legenda-n { padding-inline: 0; }
}

/* ---------------------------------------------------------------- 16-Out-2026: menos vazio, plantas fora do HTML */
/* a planta 3D e o que vem a seguir no mesmo escuro: um só intervalo, não dois (sobravam ~170 px de preto no PC) */
.pj-planta3d { padding-bottom: calc(var(--pj-secao) * .5); }
.pj-planta3d + :is(.pj-luz-filme, .pj-momento, .pj-filme) { padding-top: calc(var(--pj-secao) * .5); }
/* telemóvel e tablet: o piso e os quatro estados por cima da planta (por baixo, a pílula de Informação e Fotografias
   tapava-os quando a planta estava ao centro do ecrã) */
@media (max-width: 1023px) {
  .pj-planta3d__fig { display: flex; flex-direction: column; }
  .pj-planta3d .planta3d__legenda { order: -2; margin: 0; }
  .pj-planta3d .planta3d__estados { order: -1; margin: 0 0 6px; gap: 0 22px; }
  .pj-planta3d__texto { margin-bottom: 10px; }
}
/* ecrãs baixos (360x640, navegadores das redes): a planta quadrada, para o piso, os botões e a planta caberem juntos */
@media (max-width: 767px) and (max-height: 720px) { .pj-planta3d .planta3d__palco { aspect-ratio: 1; } }
/* as plantas do palco em <img> (sem JS, ou se o SVG não chegar): o desenho parado; a proposta a dourado */
.pj-planta__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pj-planta--alterada .pj-planta__img { filter: invert(36%) sepia(1) saturate(2.5) brightness(.8); }
/* as setas da faixa e da barra são desenho, não texto (o nome vai no aria-label) */
.pj .faixa__seta--ant::before, .barra__seta--ant::before { content: '←'; }
.pj .faixa__seta--seg::before, .barra__seta--seg::before { content: '→'; }
.barra__seta::before { font: 400 15px/1 var(--sans); }
/* telemóveis baixos (360x640 e os navegadores das redes): o fim mais curto, para o convite, o seguinte e o rodapé
   caberem em menos scroll; "Todos os projetos" está no menu e no rodapé */
@media (max-width: 767px) and (max-height: 720px) {
  .pj-fim { padding: 36px var(--margem) 24px; gap: 16px var(--calha); }
  a.cartao.pj-seguinte .cartao__capa { aspect-ratio: 1; }
  .pj-fim__nav { display: none; }
}