/* Versicolor® · página "Versicolor®" (quem somos). Dono: frente versicolor-contacto. Prefixo vs-.
   Revisão do Hernâni (15-Out-2026, §06) encaixada na base v2 (DIRECAO-v2 §4.6): o texto é o dele, o desenho é o de antes.
   1 abertura (título, texto e o Hernâni a desenhar) · 2 como pensamos (texto e dois detalhes de Porto Salvo) ·
   3 a citação do fundador, com espaço e um retrato pequeno · 4 uma equipa, quatro áreas · 5 projetos (lista com a capa
   sob o rato, M9) · 6 confiança construída.
   Movimento: a segunda linha do título acende-se; o fio de luz percorre as quatro áreas uma vez; a capa troca sob o
   rato. Nada preso ao scroll. Estados apagados só com html.vs-mov (posto pelo versicolor.js com movimento
   permitido); sem JS, com movimento reduzido ou se o JS falhar, tudo está aceso e visível.
   Menos texto à vista (pedido do Daniel, 15-Out-2026, noite), com o mesmo texto do cliente no HTML: em cada bloco de
   texto só o título e "Ler mais" (o do site todo, M15), que abre o texto inteiro no sítio (ronda 2, 16-Out); a
   citação do fundador maior, por linhas, e as palavras acendem-se com o scroll (de pedra para osso, legíveis desde o
   início); as quatro áreas mostram uma frase de cada vez (a da área sob o rato, no PC, nenhuma em repouso; a da área
   tocada, no telemóvel); uma voz de cada vez; no PC as obras só com o nome (a tipologia aparece na capa sob o rato) e
   a obra sob o rato ganha um fio dourado, sem apagar as outras; profundidade ao passar o rato nas fotografias. */

/* ------------------------------------------------------------------ 1. abertura */
.vs-ab { position: relative; background: var(--noite); color: var(--osso);
  padding: calc(var(--cab) + clamp(20px, 3.4svh, 40px)) 0 clamp(32px, 4svh, 56px); }
.vs-ab .etiqueta-v { --etiqueta-topo: calc(var(--cab) + clamp(20px, 3.4svh, 40px) + .9em); }
.vs-ab__grelha { row-gap: 28px; align-items: end; }
/* o título do cliente parte só onde ele pôs "/": "Uma visão de arquitetura e design" mede 13,7 em, por isso o corpo
   segue a largura da coluna (3,6vw no PC, 6,2vw no telemóvel) e não o --t-capitulo, que a partia em duas */
.vs-ab__frase { font: 300 clamp(30px, 3.6vw, 52px)/1.02 var(--serif); letter-spacing: -.026em; text-wrap: balance; }
.vs-ab__frase .l { padding-bottom: .12em; margin-bottom: -.12em; }
.vs-ab .vs-f--1 { color: var(--pedra); }
.vs-ab .vs-f--2 { color: var(--osso); transition: color 1.6s var(--ease-io); }
.vs-ab__fio { margin: clamp(22px, 3svh, 36px) 0 clamp(18px, 2.4svh, 26px); }
.vs-ab__corpo { max-width: 36em; }
.vs-ab__p { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; color: #CFCAC0; text-wrap: pretty; }
.vs-ab__p + .vs-ab__p { margin-top: .7em; }
.vs-ab__foto { aspect-ratio: 4 / 5; }
@media (max-width: 1023px) {
  .vs-ab__texto, .vs-ab__fig { grid-column: 1 / -1; }
  .vs-ab__fig { order: -1; }
  /* no telemóvel a fotografia vai primeiro, a toda a largura, até metade da janela */
  .vs-ab__foto { aspect-ratio: auto; height: min(34svh, 86vw); }
  .vs-ab__foto img { object-position: 50% 18% !important; }
  .vs-ab__frase { font-size: clamp(22px, 6.2vw, 48px); }
  /* os títulos das secções acompanham o do topo (como no Início, 6,4vw), para nenhum ficar maior do que o h1 */
  .vs-pensar__titulo, .vs-equipa__titulo, .vs-obras__titulo, .vs-vozes__cab .t-titulo { font-size: clamp(22px, 6.2vw, 28px); }
  .vs-ab__fio { margin: 18px 0 16px; }
  .vs-ab__p { font-size: 15.5px; line-height: 1.55; }
}
@media (min-width: 1024px) {
  .vs-ab__texto { grid-column: 1 / 8; padding-bottom: 6px; }
  .vs-ab__fig { grid-column: 8 / 13; justify-self: end; width: min(100%, calc(min(66svh, 640px) * .8)); }
}
/* a fotografia acende-se como uma sala: um véu da cor da noite recolhe para cima. É um véu e não um clip-path de
   propósito: a fotografia pinta logo por baixo e conta para o LCP a tempo. Sem o JS da página, abre aos 3,6 s. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .js .vs-ab__foto[data-vs-rolo]::after { content: ''; position: absolute; inset: -1px; z-index: 1; pointer-events: none;
    background: var(--noite); transform-origin: 50% 0; transition: transform 1.2s var(--ease-io); }
  .js .vs-ab__foto[data-vs-rolo] img { transform: scale(1.05); transition: transform 1.8s var(--ease), scale .6s var(--ease); }
  .js .vs-ab__foto[data-vs-rolo]:not(.is-aberta)::after { animation: vs-rolo-salva .01s 3.6s forwards; }
  .js .vs-ab__foto.is-aberta::after, .sem-mov .vs-ab__foto[data-vs-rolo]::after { transform: scaleY(0); }
  .js .vs-ab__foto.is-aberta img, .sem-mov .vs-ab__foto[data-vs-rolo] img { transform: none; }
}
@keyframes vs-rolo-salva { to { transform: scaleY(0); } }
/* a segunda frase do título começa a meia-luz e acende-se (só com o JS da página e movimento permitido) */
html.vs-mov .vs-ab:not(.is-acesa) .vs-f--2 { color: var(--pedra); }

/* ------------------------------------------------------------------ 2. como pensamos */
.vs-pensar__grelha { row-gap: 0; align-items: center; }
.vs-pensar__titulo { max-width: 9em; }
.vs-pensar__corpo { margin-top: clamp(20px, 2.6svh, 30px); }
.vs-pensar__corpo .t-texto + .t-texto { margin-top: .8em; }
.vs-pensar__m { aspect-ratio: 4 / 5; }
@media (max-width: 1023px) {
  .vs-pensar__texto { grid-column: 1 / -1; }
  .vs-pensar__fig { margin-top: 28px; }
  .vs-pensar__fig--1 { grid-column: 1 / 7; } .vs-pensar__fig--2 { grid-column: 7 / 13; }
  .vs-pensar__corpo .t-texto { font-size: 16px; line-height: 1.58; }
}
@media (min-width: 1024px) {
  /* pelo topo das fotografias (era ao centro): ao abrir o "Ler mais" o texto cresce para baixo e o título fica */
  .vs-pensar__texto { grid-column: 1 / 6; padding-right: 4%; align-self: start; }
  .vs-pensar__fig--1 { grid-column: 7 / 10; }
  .vs-pensar__fig--2 { grid-column: 10 / 13; margin-top: clamp(40px, 7svh, 72px); }
  .vs-pensar__m { max-height: 56svh; }
}

/* ------------------------------------------------------------------ 3. a citação do fundador
   Editorial: a frase grande, muito espaço à volta, e o retrato pequeno, a preto e branco, ao lado da assinatura. */
.vs-cit { background: var(--noite); padding-block: calc(var(--secao) * 1.12); }
.vs-cit__grelha { row-gap: 32px; align-items: end; }
.vs-cit__fio { margin-bottom: clamp(26px, 3.4svh, 40px); }
.vs-cit__texto { font-size: clamp(28px, 3.9vw, 60px); line-height: 1.1; letter-spacing: -.022em; max-width: 19em;
  text-indent: -.42em; text-wrap: pretty; color: var(--osso); }
.vs-cit__autor { margin-top: clamp(26px, 3.4svh, 40px); }
.vs-cit__cargo { color: var(--pedra); }
.vs-cit__m { aspect-ratio: 4 / 5; }
.vs-cit__m img { filter: grayscale(1) contrast(1.04); }
@media (max-width: 1023px) {
  .vs-cit { padding-block: calc(var(--secao) * 1.05); }
  .vs-cit__bloco { grid-column: 1 / -1; }
  .vs-cit__fig { grid-column: 1 / 6; }
  .vs-cit__texto { font-size: clamp(25px, 7vw, 34px); }
}
@media (min-width: 1024px) {
  .vs-cit__bloco { grid-column: 1 / 10; }
  .vs-cit__fig { grid-column: 10 / 13; justify-self: end; width: min(100%, 280px); }
}

/* ------------------------------------------------------------------ 4. uma equipa, quatro áreas */
.vs-equipa__topo { row-gap: 18px; align-items: start; }
.vs-equipa__titulo { max-width: 12em; }
.vs-equipa__lead { max-width: 34em; }
.vs-equipa__lead .t-texto + .t-texto { margin-top: .7em; }
.vs-equipa__metodo { margin-top: 6px; }
.vs-equipa__grelha { margin-top: clamp(28px, 4svh, 44px); row-gap: 0; }
.vs-equipa__lista { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--calha); }
/* o fio de luz que percorre as quatro frentes, por cima das fotografias */
.vs-equipa__fio { grid-column: 1 / -1; grid-row: 1; display: block; height: 1px; background: var(--luz); transform-origin: 0 50%; }
.vs-fr { padding-top: 18px; }
.vs-fr__m { aspect-ratio: 3 / 2; }
.vs-fr__onde { position: absolute; z-index: 2; left: 10px; bottom: 10px; padding: 5px 8px; font: 500 10px/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase; color: var(--osso); background: rgb(11 11 12 / .55); }
.vs-fr__titulo { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; font: 300 clamp(20px, 1.6vw, 24px)/1.15 var(--serif);
  letter-spacing: -.01em; }
.vs-fr__linha { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--tinta-3); max-width: 26em; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
  html.vs-mov .vs-equipa__fio:not(.is-aceso) { transform: scaleX(0); }
  .vs-equipa__fio { transition: transform 1.2s var(--ease-io); }
}
@media (max-width: 1023px) {
  .vs-equipa__topo > * { grid-column: 1 / -1; }
  .vs-equipa__lead .t-texto { font-size: 16px; line-height: 1.58; }
  .vs-equipa__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .vs-fr__linha { font-size: 14px; }
}
@media (min-width: 1024px) {
  .vs-equipa__titulo { grid-column: 1 / 6; }
  .vs-equipa__lead { grid-column: 7 / 13; }
}

/* ------------------------------------------------------------------ 5. projetos: as obras numa frase (M9) */
.vs-obras { padding-block: calc(var(--secao) * .7); }
.vs-obras__grelha { row-gap: 18px; align-items: start; }
.vs-obras__frase { font: 300 21px/1.45 var(--serif); letter-spacing: -.012em; color: var(--tinta-3); text-wrap: pretty; }
.vs-obras__obra { color: var(--tinta); background: linear-gradient(var(--linha-forte), var(--linha-forte)) 0 100% / 100% 1px no-repeat;
  padding-bottom: .04em; transition: opacity .2s, background-size .3s var(--ease); }
.vs-obras__meta { display: none; }
.vs-obras__obra:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.vs-obras__rotulo { margin-bottom: 12px; }
.vs-obras__fim { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 10px; }
.vs-obras__previa-m { aspect-ratio: 4 / 3; }
.vs-obras__previa-m img { width: 100%; height: 100%; object-fit: cover; }
.vs-obras__previa-leg { display: grid; gap: 6px; margin-top: 12px; }
@media (hover: hover) and (pointer: fine) {
  .vs-obras__obra:hover .vs-obras__nome { color: var(--tinta); }
}
@media not ((hover: hover) and (pointer: fine)) { .vs-obras__previa { display: none; } }
@media (max-width: 1023px) {
  .vs-obras__grelha > * { grid-column: 1 / -1; }
  .vs-obras__previa { display: none; }
  /* ligações com alvo de toque de 44 px sem mudar a frase */
  .vs-obras__obra { position: relative; }
  .vs-obras__obra::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; transform: translateY(-50%); }
}
@media (min-width: 1024px) {
  .vs-obras__grelha { grid-template-rows: auto 1fr; }
  .vs-obras__titulo { grid-column: 1 / 9; margin-bottom: 10px; }
  .vs-obras__lista { grid-column: 1 / 9; grid-row: 2; padding-right: clamp(0px, 2vw, 32px); }
  .vs-obras__previa { grid-column: 9 / 13; grid-row: 1 / span 2; }
  /* no PC cada obra é uma linha da tabela: nome e tipologia, sem numeração; a capa troca à direita */
  .vs-obras__frase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column;
    grid-template-rows: repeat(6, auto); column-gap: var(--calha); border-top: 1px solid var(--linha); }
  .vs-obras__sep { display: none; }
  .vs-obras__obra { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
    min-height: 44px; padding: 9px 0; border-bottom: 1px solid var(--linha); background: none; }
  .vs-obras__nome { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vs-obras__meta { display: block; font: 500 10px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2);
    text-align: right; }
}

/* ------------------------------------------------------------------ 6. confiança construída */
.vs-vozes { background: var(--noite); }
.vs-vozes__grelha { row-gap: 28px; align-items: start; }
.vs-vozes__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4svh, 44px) var(--calha); }
.vs-voz { padding-top: 18px; border-top: 1px solid var(--linha); }
.vs-voz__texto { font-size: clamp(20px, 1.75vw, 26px); line-height: 1.25; max-width: 20em; text-indent: -.42em; }
.vs-voz__autor { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 16px; }
.vs-voz__fonte { color: var(--tinta-2); letter-spacing: .1em; text-transform: none; font-weight: 400; }
@media (max-width: 1023px) {
  .vs-vozes__cab, .vs-vozes__lista { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  /* telemóvel: uma voz de cada vez, a seguinte a espreitar (faixa nativa M3, o contador vem do core) */
  .vs-vozes__lista { grid-template-columns: none; margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem);
    scroll-padding-inline: var(--margem); }
  .vs-vozes__lista:not(.faixa) { display: grid; grid-template-columns: 1fr; }
  .vs-vozes__lista.faixa { --faixa-col: 86%; gap: 16px; }
  .vs-voz__texto { font-size: 21px; }
  .vs-vozes .faixa__controlos { margin-top: 8px; }
}
@media (min-width: 1024px) {
  /* "Confiança construída." numa linha (4 colunas) e uma coluna de ar antes das vozes */
  .vs-vozes__cab { grid-column: 1 / 5; }
  .vs-vozes__lista { grid-column: 6 / 13; }
}

/* telemóvel: as secções desta página respiram um pouco menos, para a página não passar de 1,25 vezes o PC */
@media (max-width: 767px) {
  .vs-pensar, .vs-equipa, .vs-vozes { padding-block: 44px; }
  .vs-cit { padding-block: 56px; }
  .vs-obras { padding-block: 36px; }
}
/* PC estreito (1024 a 1279): as linhas das obras ficam só com o nome, para caber inteiro */
@media (min-width: 1024px) and (max-width: 1279px) {
  .vs-obras__obra { grid-template-columns: minmax(0, 1fr); }
  .vs-obras__meta { display: none; }
  .vs-obras__nome { white-space: normal; }
}

/* ------------------------------------------------------------------ menos texto à vista, o mesmo texto no HTML (15-Out-2026, noite)
   "Ler mais": o texto do cliente abre no sítio. Em repouso só se vê o botão; aberto, a primeira frase é a entrada em
   serif (.vs-rev__lede). O botão, o estado fechado e o abrir são os do site todo (M15 do base.css e do core.js,
   ler-mais--tudo); sem JS, o texto está todo à vista e o botão não aparece. */
.vs-rev__lede { font: 300 clamp(19px, 1.45vw, 23px)/1.38 var(--serif); letter-spacing: -.006em; color: var(--tinta);
  max-width: 25em; text-wrap: pretty; }
.vs-rev__resto > p { margin-top: .75em; }
.vs-rev__resto > p:first-child { margin-top: 0; }
.vs-ab .vs-rev__lede { color: var(--osso); }
/* as linhas da citação do fundador (só durante a entrada; depois o parágrafo volta a ser texto corrido) */
.vs-l { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; text-indent: 0; }
.vs-cit__texto > .vs-l:first-child { text-indent: -.42em; }
.vs-l > span { display: block; }
@media (max-width: 1023px) {
  .vs-rev__lede { font-size: clamp(18px, 4.9vw, 21px); line-height: 1.38; }
}

/* a citação do fundador: entra por linhas e as palavras acendem-se com o scroll (só com html.vs-mov) */
.vs-cit__texto .vs-w { display: inline; }
html.vs-mov .vs-cit__texto[data-vs-cit]:not(.vs-pronto) { visibility: hidden; }

/* as quatro áreas: uma frase de cada vez (só com html.vs-mov; sem movimento ou sem JS, as quatro frases à vista).
   PC (.vs-areas--pc): a área sob o rato (ou com o foco, ou tocada) acende-se e as outras ficam a meia-luz; o fio dourado
   deixa de atravessar as quatro e passa a ser um segmento que segue a área acesa. As frases das outras ficam com
   opacity 0 e com o lugar guardado (a grelha não salta); continuam no HTML e os leitores de ecrã leem as quatro.
   Toque (.vs-areas--toque, telemóvel e tablet): em 2x2 só a imagem e o título, com um sinal "+"; um toque abre a frase
   dessa área (sobe e acende-se) e as outras ficam a meia-luz; outro toque fecha. As frases fechadas continuam lidas
   pelos leitores de ecrã. */
.vs-equipa__trilho { display: none; }
.vs-areas--foco .vs-fr { outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vs-areas--pc .vs-fr.is-ativa { cursor: default; }
.vs-areas--foco .vs-fr:focus-visible .vs-fr__titulo { outline: 2px solid var(--acento); outline-offset: 6px; }
.vs-areas--foco .vs-fr__m::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgb(11 11 12 / .5); opacity: 0; transition: opacity .7s var(--ease); }
.vs-areas--foco.tem-ativa .vs-fr:not(.is-ativa) .vs-fr__m::before { opacity: 1; }
.vs-areas--foco .vs-fr__titulo { transition: color .5s var(--ease); }
.vs-areas--foco.tem-ativa .vs-fr:not(.is-ativa) .vs-fr__titulo { color: var(--tinta-2); }
.vs-areas--foco .vs-fr__onde { opacity: 0; transition: opacity .4s var(--ease); }
.vs-areas--foco .vs-fr.is-ativa .vs-fr__onde { opacity: 1; transition-delay: .08s; }
.vs-areas--pc .vs-fr__linha { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .4s var(--ease), transform .7s var(--ease); }
.vs-areas--pc .vs-fr.is-ativa .vs-fr__linha { opacity: 1; transform: none; transition-delay: .08s; }
/* fechada no toque: fora da vista e sem lugar, mas os leitores de ecrã continuam a lê-la (recorte de 1 px, opacity 0) */
.vs-areas--toque .vs-fr:not(.is-ativa) .vs-fr__linha { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.vs-areas--toque .vs-fr.is-ativa .vs-fr__linha { animation: vs-frase .7s var(--ease) both; }
@keyframes vs-frase { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.vs-areas--toque .vs-fr { position: relative; }
.vs-areas--toque .vs-fr__titulo { position: relative; padding-right: 22px; }
.vs-areas--toque .vs-fr__titulo::before, .vs-areas--toque .vs-fr__titulo::after { content: ''; position: absolute; right: 2px;
  top: .62em; width: 11px; height: 1px; background: var(--acento); transition: transform .35s var(--ease); }
.vs-areas--toque .vs-fr__titulo::after { transform: rotate(90deg); }
.vs-areas--toque .vs-fr.is-ativa .vs-fr__titulo::after { transform: rotate(0deg); }
@media (min-width: 1024px) {
  .vs-equipa__grelha:has(.vs-areas--pc) .vs-equipa__trilho {
    display: block; grid-column: 1 / -1; grid-row: 1; height: 1px; background: var(--linha); }
  .vs-equipa__fio.vs-fio--seg { transition: transform .8s var(--ease); }
}

/* confiança construída, no PC: uma voz de cada vez, maior, numa faixa com contador e setas (sem movimento, as quatro).
   Na faixa a aspa de abertura não pode ficar pendurada (o overflow da faixa cortava-a). Com movimento, só a voz atual
   tem o texto aceso: a seguinte (cortada pela faixa no PC, a espreitar no telemóvel) mostra só o fio de cima e acende-se
   quando chega; no telemóvel as setas ficam à vista (são frases, não fotografias: o dedo nem sempre adivinha a faixa) */
.vs-vozes__lista.faixa .vs-voz__texto { text-indent: 0; }
html.vs-mov .vs-vozes__lista.faixa > .vs-voz :is(.vs-voz__texto, .vs-voz__autor > *) { transition: opacity .6s var(--ease); }
html.vs-mov .vs-vozes__lista.faixa > .vs-voz:not(.is-atual) :is(.vs-voz__texto, .vs-voz__autor > *) { opacity: 0; }
@media (pointer: coarse) { .vs-vozes .faixa__setas { display: flex; } }
@media (min-width: 768px) {
  .vs-vozes__lista.faixa { grid-template-columns: none; --faixa-col: 100%; gap: var(--calha); }
  .vs-vozes__lista.faixa .vs-voz__texto { font-size: clamp(26px, 2.5vw, 38px); line-height: 1.18; max-width: 19em; }
  .vs-vozes__grelha > .faixa__controlos { grid-column: 6 / 13; margin-top: 4px; }
}
@media (min-width: 768px) and (max-width: 1023px) { .vs-vozes__grelha > .faixa__controlos { grid-column: 1 / -1; } }

/* projetos, no PC com rato: só o nome de cada obra; a tipologia e o local aparecem por baixo da capa sob o rato */
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  html.vs-mov .vs-obras__obra { grid-template-columns: minmax(0, 1fr); }
  html.vs-mov .vs-obras__meta { display: none; }
}

/* ronda 2 (16-Out-2026, revisão): a lista das obras deixa de apagar as outras sob o rato (o M9 do base.css punha-as a
   35%, claras de mais sobre o osso, 2,1:1); ficam todas em grafite (13:1) e a obra sob o rato (ou com o foco) ganha um
   fio dourado e chega-se para a direita */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .vs-obras [data-espreitar]:has([data-espreitar-src]:hover) [data-espreitar-src]:not(:hover) { opacity: 1; }
  .vs-obras__obra { position: relative; }
  .vs-obras__obra::before { content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--acento);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); pointer-events: none; }
  .vs-obras__nome { transition: transform .5s var(--ease); }
  .vs-obras__obra:is(:hover, :focus-visible)::before { transform: scaleX(1); }
  .vs-obras__obra:is(:hover, :focus-visible) .vs-obras__nome { transform: translate3d(22px, 0, 0); }
}

/* ronda 2: no telemóvel e no tablet a frase das obras mostra as cinco primeiras e o "Ler mais" do site todo (M15,
   ler-mais--estreito: "Ver mais 6 obras") abre as outras no sítio; no PC e sem JS, as onze */
@media (min-width: 1024px) { .vs-obras__resto { display: contents; } }