/* Versicolor® · Projetos, o índice (dono: frente F5). DIRECAO-v2 §4.2.
   Uma ferramenta, não um rolo: o topo numa faixa curta, as onze obras e o cartão dos projetos em 3D em três filas
   de quatro (PC), e a mesma peça em lista numa altura de ecrã. Os cartões são os mesmos elementos nas duas vistas:
   o CSS muda a forma ([data-vista]) e o Flip (projetos.js) leva cada um ao seu novo sítio.
   Fundo --noite; o dourado só nos números, no estado ativo dos controlos e no rótulo da Antevisão 3D. */

.ix { --ix-gap-y: clamp(20px, 1.8vw, 26px); --ix-nome: clamp(18px, 1.45vw, 22px);
  position: relative; padding: calc(var(--cab) + clamp(12px, 2vw, 28px)) var(--margem) clamp(28px, 2.8vw, 40px);
  --etiqueta-topo: calc(var(--cab) + clamp(18px, 2.2vw, 32px)); }
@media (max-width: 1023px) { .ix > .etiqueta-v { display: none; } }

/* ---------------------------------------------------------------- topo: título, frase e controlos numa faixa */
/* o texto alinha pelo topo do título: ao abrir o "Ler mais" cresce para baixo e o título fica onde está */
.ix-topo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); align-items: start;
  padding-bottom: clamp(16px, 1.7vw, 24px); }
.ix-topo__titulo { grid-column: 1 / 7; display: flex; align-items: flex-start; gap: .14em; margin: 0;
  font-size: clamp(36px, 4vw, 60px); line-height: 1; letter-spacing: -.024em; text-wrap: balance; }
.ix-topo__palavra { display: block; }
.ix-topo__n { font: 500 clamp(12px, 1vw, 15px)/1 var(--sans); letter-spacing: .06em; margin-top: .3em;
  font-variant-numeric: tabular-nums; }
/* o texto introdutório do cliente: a primeira frase na voz da casa, as outras duas em texto corrido */
/* largura fixa (não a da frase): aberto, o texto não empurra a primeira frase para a esquerda */
.ix-topo__texto { grid-column: 7 / 13; justify-self: end; width: 100%; max-width: 31rem; padding-bottom: .2em; }
.ix-topo__frase { margin: 0; font: 300 clamp(18px, 1.4vw, 21px)/1.35 var(--serif); color: var(--tinta); text-wrap: balance; }
.ix-topo__mais { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--tinta-3); text-wrap: pretty; }
/* "Ler mais" (15-Out-2026): à vista só a primeira frase (no telemóvel nenhuma, ler-mais--movel); as outras duas do
   texto do cliente abrem no sítio pelo "Ler mais" do site todo (M15 do base.css e do core.js) */
.ix-controlos { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px clamp(28px, 3.4vw, 56px);
  margin-top: clamp(14px, 1.5vw, 22px); border-top: 1px solid var(--linha); }

.ix-rot { flex: none; color: var(--tinta-2); margin-right: 14px; }
.ix-vistas, .ix-divisoes { display: flex; align-items: center; min-width: 0; }
.ix-divisoes__lista { display: flex; align-items: center; gap: 0 clamp(16px, 1.8vw, 28px); min-width: 0; }
.ix-divisoes__lista li { flex: none; }
.ix-vista + .ix-vista { margin-left: 18px; }

/* o mesmo desenho para os botões de vista e as divisões: texto calado, fio de luz no ativo */
.ix-vista, .ix-div, .ix-ord { position: relative; display: inline-flex; align-items: baseline; gap: 5px; min-height: 44px;
  padding-top: 15px; font: 400 14px/1 var(--sans); color: var(--tinta-3); white-space: nowrap;
  transition: color .25s var(--ease); }
.ix-vista::after, .ix-div::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--luz);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.ix-vista[aria-pressed="true"], .ix-div[aria-current="true"] { color: var(--osso); }
.ix-vista[aria-pressed="true"]::after, .ix-div[aria-current="true"]::after { transform: scaleX(1); }
.ix-div__n { font: 500 10px/1 var(--sans); letter-spacing: .06em; color: var(--pedra); transform: translateY(-.5em);
  font-variant-numeric: tabular-nums; }
.ix-div[aria-current="true"] .ix-div__n { color: var(--luz); }
/* menos texto à vista (16-Out-2026): a contagem só na divisão ativa e ao passar o rato ou com o foco */
.ix-div__n { transition: opacity .25s var(--ease), color .25s var(--ease); }
.ix-div:not([aria-current="true"]) .ix-div__n { opacity: 0; }
.ix-div:focus-visible .ix-div__n { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .ix-div:hover .ix-div__n { opacity: 1; } }

/* legenda das marcas de estado (revisão do cliente §03: identificar as obras concluídas e as que estão em
   desenvolvimento): ponto cheio, concluída; anel dourado, em desenvolvimento; anel calado, só em 3D. A mesma marca
   está em cada cartão, ao lado do nome; o estado por extenso fica para os leitores de ecrã, na Lista e na obra. */
.ix-legenda { display: flex; align-items: center; gap: 6px 18px; margin: 0 0 0 auto; padding-top: 15px; min-height: 44px;
  font: 400 12px/1 var(--sans); letter-spacing: .02em; color: var(--tinta-2); white-space: nowrap; }
.ix-legenda__item { display: inline-flex; align-items: center; gap: 8px; }
.ix-legenda__item::before { content: ''; }
.ix-legenda__item::before, .ix .cartao__marca { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }
.ix-legenda__item[data-estado="desenvolvimento"]::before, .ix .cartao__marca[data-estado="desenvolvimento"] {
  background: transparent; box-shadow: inset 0 0 0 1px var(--acento); }
.ix-legenda__item[data-estado="3d"]::before, .ix .cartao__marca[data-estado="3d"] {
  background: transparent; box-shadow: inset 0 0 0 1px var(--pedra); }
/* na lista do PC há a coluna Estado: a legenda apaga-se (no telemóvel a lista mostra a marca e fica a legenda) */
@media (min-width: 1024px) { .ix[data-vista="lista"] .ix-legenda { opacity: 0; pointer-events: none; } }
@media (hover: hover) and (pointer: fine) {
  .ix-vista:hover, .ix-div:hover, .ix-ord:hover { color: var(--osso); }
  .ix-div:hover::after, .ix-vista:hover::after { transform: scaleX(1); }
}
/* tablet: sem os rótulos "Vista" e "Divisão" a fila cabe (a 768 passava 6 px da janela); se ainda não couber,
   desliza com o dedo em vez de alargar a página */
@media (min-width: 768px) and (max-width: 1023px) {
  .ix-controlos .ix-rot { display: none; }
  .ix-divisoes__lista { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ix-divisoes__lista::-webkit-scrollbar { display: none; }
}
/* a fila que desliza corta o que sai dela: 1 px por cima para o fio da divisão ativa ficar sobre a linha */
@media (max-width: 1023px) { .ix-divisoes__lista { margin-top: -1px; padding-top: 1px; } }
/* sem JS não há troca de vista: só a grelha, e os botões não aparecem */
html:not(.js) .ix-vistas { display: none; }

/* ---------------------------------------------------------------- grelha (vista por defeito) */
.ix-obras { position: relative; }
.ix-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ix-gap-y) var(--calha); }
@media (min-width: 768px) { .ix-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* quatro colunas a partir de 1000 px: a 1024x768 as três filas cabem perto do teto (com três colunas eram quatro filas) */
@media (min-width: 1000px) { .ix-cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ix-item { min-width: 0; }

.ix .cartao { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'capa capa capa' 'n nome marca' 'meta meta meta' 'linha linha linha' 'estado estado estado';
  column-gap: 10px; align-items: baseline; height: 100%; color: var(--tinta); }
/* a marca do estado, à direita do nome (a legenda está nos controlos) */
.ix .cartao__marca { grid-area: marca; display: block; align-self: center; margin-right: 2px; }
.ix[data-vista="lista"] .cartao__marca { display: none; }
/* o cartão dos projetos em 3D: o "3D" sobre a imagem e no nome chega (o número "3D" repetia-o); sem número, o nome
   encosta à margem do cartão */
.ix[data-vista="grelha"] .cartao--3d .cartao__n { display: none; }
.ix[data-vista="grelha"] .cartao--3d { grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'capa capa' 'nome marca' 'meta meta' 'linha linha' 'estado estado'; }
.ix .cartao__capa { grid-area: capa; position: relative; display: grid; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--noite-2); margin-bottom: 11px; }
.ix .cartao__capa > picture { grid-area: 1 / 1; width: 100%; height: 100%; background: var(--cor, var(--noite-2)); }
.ix .cartao__capa img { width: 100%; height: 100%; object-fit: cover; }
.ix .cartao__n { grid-area: n; font: 500 11px/1 var(--sans); letter-spacing: .1em; color: var(--acento); font-variant-numeric: tabular-nums; }
.ix .cartao__nome { grid-area: nome; font: 300 var(--ix-nome)/1.1 var(--serif); letter-spacing: -.012em; }
.ix .cartao__meta { grid-area: meta; margin-top: 7px; font: 500 var(--t-rotulo)/1.35 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2); }
/* a linha da obra ("Moradia · Projeto integrado", revisão do cliente) e o estado (Concluída ou Em desenvolvimento);
   na grelha substituem o tipo e o local, que ficam para as colunas da lista */
.ix[data-vista="grelha"] .cartao:not(.cartao--3d) .cartao__meta { display: none; }
.ix .cartao__linha { grid-area: linha; grid-column: 1 / -1; margin-top: 7px; font: 500 var(--t-rotulo)/1.35 var(--sans);
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
  display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; max-width: none; }
.ix .cartao__obra { grid-area: estado; grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: 13px; line-height: 1.3; color: var(--tinta-3); }
.ix .cartao__obra::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--acento); }
.ix .cartao__obra[data-estado="desenvolvimento"]::before { background: transparent; box-shadow: inset 0 0 0 1px var(--acento); }
@media (min-width: 1000px) and (max-width: 1279px) {
  .ix { --ix-nome: 19px; }
  .ix .cartao__linha { letter-spacing: .1em; }
}
.ix .cartao__ambito, .ix .cartao__fotos { display: none; }
.ix[data-vista="lista"] .cartao__obra { display: none; }

/* menos texto à vista (15-Out-2026): na grelha, a imagem, o número e o nome; a linha ("Moradia · Projeto integrado")
   e o estado sobem sobre a imagem ao passar o rato ou com o foco do teclado. Continuam no HTML (leitores de ecrã) e na
   Lista, onde são colunas; sem JS e com movimento reduzido ficam à vista por baixo do nome, como antes. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.sem-mov) .ix[data-vista="grelha"] .cartao__linha,
  html.js:not(.sem-mov) .ix[data-vista="grelha"] .cartao__obra,
  html.js:not(.sem-mov) .ix[data-vista="grelha"] .cartao--3d .cartao__meta {
    grid-area: capa; align-self: end; justify-self: start; position: relative; z-index: 3; max-width: calc(100% - 28px);
    margin: 0 0 calc(11px + 14px) 14px; color: var(--osso); opacity: 0; transform: translate3d(0, 8px, 0);
    transition: opacity .35s var(--ease), transform .5s var(--ease); pointer-events: none; }
  html.js:not(.sem-mov) .ix[data-vista="grelha"] .cartao:not(.cartao--3d) .cartao__linha { margin-bottom: calc(11px + 36px); }
  html.js:not(.sem-mov) .ix[data-vista="grelha"] .cartao__obra { color: rgb(243 241 236 / .78); }
  /* o que está dentro (o local e o tipo do cartão 3D, o "Estado:" para os leitores de ecrã) segue a opacidade */
  html.js:not(.sem-mov) .ix[data-vista="grelha"] :is(.cartao__obra, .cartao--3d .cartao__meta) > * { opacity: inherit; }
  html.js:not(.sem-mov) .ix[data-vista="grelha"] .cartao--3d .cartao__meta { margin-bottom: calc(11px + 46px); }
  html.js:not(.sem-mov) .ix[data-vista="grelha"] .cartao__capa::before { content: ''; position: absolute; inset: 38% 0 0; z-index: 2;
    background: linear-gradient(rgb(11 11 12 / 0), rgb(11 11 12 / .74)); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
  html.js:not(.sem-mov) .ix[data-vista="grelha"] .cartao:is(:hover, :focus-visible) :is(.cartao__linha, .cartao__obra, .cartao__meta) {
    opacity: 1; transform: none; transition-delay: .06s; }
  html.js:not(.sem-mov) .ix[data-vista="grelha"] .cartao:is(:hover, :focus-visible) .cartao__capa::before { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  html.js:not(.sem-mov) .ix[data-vista="grelha"] .cartao:not(.cartao--3d) .cartao__linha { margin-bottom: calc(10px + 30px); }
  html.js:not(.sem-mov) .ix[data-vista="grelha"] :is(.cartao__linha, .cartao__obra, .cartao--3d .cartao__meta) { margin-left: 10px; }
}

/* troca ao passar o rato (M10) e camadas por divisão: no mesmo enquadramento, a nova acende por cima */
.ix .cartao__troca, .ix .cartao__div { opacity: 0; transition: opacity .35s ease; }
.ix .cartao__div.is-viva { opacity: 1; }
/* com a divisão acesa, a capa de baixo deixa de contar como imagem à vista (só depois do fundido) */
.ix .cartao__capa > picture[data-vt] { transition: visibility 0s 0s; }
.ix .cartao__capa.tem-div > picture[data-vt] { visibility: hidden; transition: visibility 0s .36s; }
.ix-item.is-troca .cartao__troca { opacity: 1; }
.ix .cartao__estado { position: absolute; left: 10px; top: 10px; z-index: 2; align-self: start; justify-self: start; padding: 5px 8px 4px; background: rgb(11 11 12 / .66);
  color: var(--osso); letter-spacing: .14em; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.ix .cartao__estado:not(:empty) { opacity: 1; }
.ix .cartao__rotulo-3d { position: absolute; left: 10px; bottom: 10px; z-index: 2; align-self: end; justify-self: start; padding: 6px 9px 5px; background: rgb(11 11 12 / .72);
  color: var(--luz); letter-spacing: .16em; pointer-events: none; }
.ix .cartao--3d .cartao__n { color: var(--luz); }
.ix .cartao--3d .cartao__local { text-transform: none; letter-spacing: .02em; font-weight: 400; font-size: 12px; }

@media (hover: hover) and (pointer: fine) {
  .ix .cartao__capa img { transform: scale(1.001); transition: transform .6s var(--ease); }
  .ix[data-vista="grelha"] .cartao:hover .cartao__capa img { transform: scale(1.02); }
  .ix .cartao__nome { background: linear-gradient(var(--acento), var(--acento)) 0 100% / 0 1px no-repeat; padding-bottom: .08em;
    transition: background-size .3s var(--ease); justify-self: start; }
  .ix .cartao:hover .cartao__nome, .ix .cartao:focus-visible .cartao__nome { background-size: 100% 1px; }
}

.ix-vazio { padding-top: 24px; }
.ix-cabeca, .ix-previa__legenda { display: none; }

/* ---------------------------------------------------------------- lista */
.ix[data-vista="lista"] .ix-cartoes { display: block; }
.ix[data-vista="lista"] .ix-item { border-top: 1px solid var(--linha); }
.ix[data-vista="lista"] .ix-item:last-child { border-bottom: 1px solid var(--linha); }
.ix[data-vista="lista"] .cartao__linha { display: none; }
.ix[data-vista="lista"] .cartao__estado { display: none; }
.ix[data-vista="lista"] .cartao__rotulo-3d { display: none; }
.ix-cabeca .ix-ord { padding-top: 0; min-height: 44px; align-items: center; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.ix-ord__seta { font-size: 11px; opacity: 0; transform: translateY(-1px); transition: opacity .25s ease; }
.ix-ord[aria-pressed="true"] { color: var(--osso); }
.ix-ord[aria-pressed="true"] .ix-ord__seta { opacity: 1; color: var(--luz); }

/* PC: tabela de seis colunas em 8 de 12 colunas; à direita, a imagem fixa da linha sob o rato (M9) */
@media (min-width: 1024px) {
  .ix[data-vista="lista"] { --ix-cols: 34px minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.2fr) minmax(0, .95fr) 84px;
    --ix-previa-w: calc((100% - 11 * var(--calha)) / 12 * 4 + 3 * var(--calha)); }
  .ix[data-vista="lista"] .ix-obras { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha);
    align-items: start; }
  .ix[data-vista="lista"] .ix-cabeca, .ix[data-vista="lista"] .ix-cartoes, .ix[data-vista="lista"] .ix-vazio { grid-column: 1 / 9; }
  .ix[data-vista="lista"] .ix-cabeca { display: grid; grid-template-columns: var(--ix-cols); column-gap: 16px; align-items: center;
    grid-row: 1; min-height: 40px; font: 500 var(--t-rotulo)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
    color: var(--tinta-2); }
  .ix[data-vista="lista"] .ix-cartoes { grid-row: 2; }
  .ix[data-vista="lista"] .ix-c-fotos { text-align: right; }
  .ix[data-vista="lista"] .ix-item, .ix[data-vista="lista"] .cartao { position: static; }
  .ix[data-vista="lista"]:not(.a-mexer) .ix-item { transform: none !important; }
  .ix[data-vista="lista"] .cartao { grid-template-columns: var(--ix-cols); grid-template-areas: none; column-gap: 16px; align-items: center;
    min-height: 52px; padding-block: 6px; transition: opacity .2s ease; }
  .ix[data-vista="lista"] .cartao__meta { display: contents; }
  .ix[data-vista="lista"] .cartao__sep { display: none; }
  .ix[data-vista="lista"] .cartao > *, .ix[data-vista="lista"] .cartao__meta > * { grid-area: auto; min-width: 0; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ix[data-vista="lista"] .cartao__n { grid-column: 1; }
  .ix[data-vista="lista"] .cartao__nome { grid-column: 2; font-size: 20px; line-height: 1.2; padding-block: 2px; justify-self: stretch; }
  /* o nome que não cabe vai a duas linhas, nunca a reticências */
  .ix[data-vista="lista"] .cartao__nome { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-clamp: 2; }
  .ix[data-vista="lista"] .cartao__local { grid-column: 3; }
  .ix[data-vista="lista"] .cartao__tipo { grid-column: 4; }
  .ix[data-vista="lista"] .cartao__ambito { grid-column: 5; display: block; }
  .ix[data-vista="lista"] .cartao__obra { grid-column: 6; grid-row: 1; display: flex; margin: 0; white-space: nowrap; }
  .ix[data-vista="lista"] .cartao__fotos { grid-column: 7; display: block; text-align: right; font-variant-numeric: tabular-nums; }
  .ix[data-vista="lista"] .cartao__local, .ix[data-vista="lista"] .cartao__tipo, .ix[data-vista="lista"] .cartao__ambito,
  .ix[data-vista="lista"] .cartao__fotos { grid-row: 1; font: 400 14px/1.3 var(--sans); letter-spacing: .01em; text-transform: none;
    color: var(--tinta-3); }
  /* o que não cabe numa linha vai a duas, sem crescer a fila */
  .ix[data-vista="lista"] .cartao__local, .ix[data-vista="lista"] .cartao__tipo, .ix[data-vista="lista"] .cartao__ambito {
    white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .ix[data-vista="lista"] .cartao__n, .ix[data-vista="lista"] .cartao__nome { grid-row: 1; }
  .ix[data-vista="lista"] .cartao__fotos--3d { color: var(--luz); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
  /* os projetos em 3D: o local (os cinco nomes) ocupa Local, Tipologia e Âmbito numa linha; "Projeto 3D" já está no
     número e no nome */
  .ix[data-vista="lista"] .cartao--3d .cartao__local { grid-column: 3 / 6; display: block; white-space: nowrap; }
  .ix[data-vista="lista"] .cartao--3d .cartao__tipo, .ix[data-vista="lista"] .cartao--3d .cartao__ambito { display: none; }
  .ix[data-vista="lista"] .cartao--3d .cartao__fotos { grid-column: 7; }
  /* as capas ficam todas no mesmo sítio, à direita; só a da linha ativa se vê */
  .ix[data-vista="lista"] .cartao__capa { position: absolute; top: var(--ix-previa-y, 0px); right: 0; width: var(--ix-previa-w); margin: 0; z-index: 1;
    opacity: 0; pointer-events: none; transition: opacity .15s ease; }
  .ix[data-vista="lista"] .ix-item.is-previa .cartao__capa { opacity: 1; z-index: 2; }
  .ix[data-vista="lista"] .cartao__capa img { transform: none; }
  .ix[data-vista="lista"] .ix-previa__legenda { display: block; grid-column: 9 / 13; grid-row: 1 / span 2; margin-top: calc(75% + 16px);
    translate: 0 var(--ix-previa-y, 0px); }
  .ix-previa__meta { font: 500 var(--t-rotulo)/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
    text-wrap: balance; }
  .ix-previa__frase { margin-top: 8px; max-width: 30ch; font: 300 19px/1.3 var(--serif); color: var(--tinta); text-wrap: pretty; }
}
/* 1024 a 1279: a tabela em 9 colunas e a imagem em 3, para "Apartamento T3" e "S. Domingos de Rana" caberem */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ix[data-vista="lista"] { --ix-cols: 24px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 76px;
    --ix-previa-w: calc((100% - 11 * var(--calha)) / 12 * 3 + 2 * var(--calha)); }
  .ix[data-vista="lista"] .ix-cabeca, .ix[data-vista="lista"] .ix-cartoes, .ix[data-vista="lista"] .ix-vazio { grid-column: 1 / 10; }
  .ix[data-vista="lista"] .ix-cabeca, .ix[data-vista="lista"] .cartao { column-gap: 12px; }
  .ix[data-vista="lista"] .ix-cabeca { letter-spacing: .12em; }
  .ix[data-vista="lista"] .cartao__nome { font-size: 18px; }
  .ix[data-vista="lista"] .cartao__local, .ix[data-vista="lista"] .cartao__tipo, .ix[data-vista="lista"] .cartao__ambito,
  .ix[data-vista="lista"] .cartao__fotos { font-size: 13px; }
  .ix[data-vista="lista"] .ix-previa__legenda { grid-column: 10 / 13; }
  /* projetos em 3D: os cinco locais em Local e Tipologia (a duas linhas), o estado na sua coluna e "3D" em Fotografias */
  .ix[data-vista="lista"] .cartao--3d .cartao__local { grid-column: 3 / 6; white-space: normal; display: -webkit-box; }
  .ix[data-vista="lista"] .cartao--3d .cartao__fotos { grid-column: 7; }
  .ix[data-vista="lista"] .cartao__obra { font-size: 12px; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .ix[data-vista="lista"] .ix-cartoes:has(.cartao:hover) .cartao:not(:hover) { opacity: .35; }
  .ix[data-vista="lista"] .cartao:hover .cartao__nome { background-size: 100% 1px; }
}

/* telemóvel e tablet: a linha com miniatura de 56 px */
@media (max-width: 1023px) {
  .ix[data-vista="lista"] .ix-cabeca { display: flex; align-items: center; gap: 18px; font: 500 var(--t-rotulo)/1 var(--sans);
    letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
  .ix[data-vista="lista"] .ix-cabeca .ix-c-n, .ix[data-vista="lista"] .ix-cabeca .ix-c-tipo,
  .ix[data-vista="lista"] .ix-cabeca .ix-c-ambito, .ix[data-vista="lista"] .ix-cabeca .ix-c-estado { display: none; }
  .ix[data-vista="lista"] .ix-cabeca .ix-c-fotos { margin-left: auto; }
  .ix[data-vista="lista"] .cartao { grid-template-columns: 56px auto minmax(0, 1fr) auto auto;
    grid-template-areas: 'capa n nome marca fotos' 'capa meta meta meta fotos';
    column-gap: 10px; row-gap: 2px; align-items: center; padding-block: 8px; }
  /* a marca do estado também na lista do telemóvel (a coluna Estado só cabe no PC) */
  .ix[data-vista="lista"] .cartao__marca { display: block; align-self: end; margin-bottom: .45em; }
  .ix[data-vista="lista"] .cartao__capa { width: 56px; aspect-ratio: 1; margin: 0; align-self: center; }
  .ix[data-vista="lista"] .cartao__n { align-self: end; }
  .ix[data-vista="lista"] .cartao__nome { align-self: end; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ix[data-vista="lista"] .cartao__meta { margin: 0; align-self: start; letter-spacing: .1em; }
  .ix[data-vista="lista"] .cartao--3d .cartao__tipo, .ix[data-vista="lista"] .cartao--3d .cartao__sep { display: none; }
  .ix[data-vista="lista"] .cartao__fotos { grid-area: fotos; display: block; font: 400 13px/1 var(--sans); color: var(--tinta-3);
    font-variant-numeric: tabular-nums; }
  .ix[data-vista="lista"] .cartao__fotos--3d { color: var(--luz); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
}

/* durante o Flip, a opacidade das capas é do GSAP (a transição do CSS atrasava-a) */
.ix.a-mexer .cartao__capa { transition: none; }
/* durante a troca de vista: o texto sai de cena e volta no novo sítio, as caixas viajam (Flip) */
.ix.a-trocar .cartao > :not(.cartao__capa), .ix.a-trocar .cartao__meta > *, .ix.a-trocar .ix-cabeca,
.ix.a-trocar .ix-previa__legenda { opacity: 0; transition: none; }
.ix.a-voltar .cartao > :not(.cartao__capa), .ix.a-voltar .cartao__meta > *, .ix.a-voltar .ix-cabeca,
.ix.a-voltar .ix-previa__legenda { transition: opacity .3s ease; }

/* ---------------------------------------------------------------- telemóvel */
@media (max-width: 767px) {
  .ix { --ix-gap-y: 22px; --ix-nome: 17px; padding-top: calc(var(--cab) + 14px); padding-bottom: 32px; }
  .ix-topo { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding-bottom: 14px; }
  .ix-topo__titulo { grid-column: 1; grid-row: 1; font-size: 40px; }
  .ix-topo__titulo { font-size: 36px; }
  .ix-topo__texto { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-top: 10px; padding: 0; max-width: 26rem; }
  .ix-topo__frase { font-size: 17px; }
  .ix-topo__mais { font-size: 13px; margin-top: 6px; }
  .ix-controlos { display: contents; }
  .ix-vistas { grid-column: 2; grid-row: 1; align-self: end; }
  .ix-vistas .ix-rot { display: none; }
  .ix-vista { padding-top: 0; align-items: center; font-size: 13px; }
  .ix-vista + .ix-vista { margin-left: 14px; }
  .ix-vista::after { top: auto; bottom: 8px; }
  .ix-divisoes { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; border-top: 1px solid var(--linha); }
  .ix-divisoes .ix-rot { display: none; }
  /* a legenda do estado numa linha curta por baixo das divisões */
  .ix-legenda { grid-column: 1 / -1; grid-row: 4; justify-self: start; margin: 0; padding: 4px 0 0; min-height: 0; font-size: 11px; }
  /* a fila das divisões desliza com o dedo, a sangrar até às margens */
  .ix-divisoes__lista { overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem);
    scroll-padding-inline: var(--margem); gap: 0 20px; overscroll-behavior-x: contain; }
  .ix-divisoes__lista::-webkit-scrollbar { display: none; }
  .ix-div { font-size: 14px; padding-top: 14px; }
  .ix .cartao__capa { margin-bottom: 10px; }
  .ix .cartao { column-gap: 7px; }
  .ix .cartao__meta { margin-top: 5px; font-size: 10px; letter-spacing: .1em; }
  .ix .cartao__linha { margin-top: 5px; font-size: 10px; letter-spacing: .1em; }
  .ix .cartao__obra { margin-top: 4px; font-size: 12px; }
  .ix .cartao--3d .cartao__local { font-size: 11px; }
  .ix .cartao__rotulo-3d { left: 6px; bottom: 6px; padding: 5px 7px 4px; font-size: 10px; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  .ix .cartao__troca, .ix .cartao__div, .ix .cartao__capa, .ix .cartao, .ix .cartao__capa img { transition: none !important; }
}

/* telemóvel, menos texto à vista (16-Out-2026): na grelha a imagem, o nome e a marca do estado (o número da obra fica
   na Lista e na página dela); o texto de abertura todo atrás de "Ler mais" (M15, ler-mais--movel), a seguir ao título */
@media (max-width: 767px) {
  .ix[data-vista="grelha"] .cartao__n { display: none; }
  .ix[data-vista="grelha"] .cartao { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'capa capa' 'nome marca' 'meta meta' 'linha linha' 'estado estado'; }
}
@media (max-width: 767px) { html.js:not(.sem-mov) .ix-topo__texto { margin-top: 2px; } }