/* Versicolor® · Início (dono: frente inicio). Prefixo ini-. Estrutura e textos da revisão do cliente de 15-Out-2026
   (§02, A a G); desenho, orçamentos e movimento da DIRECAO-v2 §4.1. Sete secções, nenhuma presa:
   A abertura (o filme, a frase, o texto complementar, a assinatura e os dois botões), B apresentação (o roupeiro de
   Porto Salvo em quatro estados com o fio de luz), C antevisão (o comparador da antevisão e da fotografia real),
   D método (as seis etapas), E projetos (Porto Salvo em grande e mais dois), F confiança (três testemunhos discretos)
   e G contacto; depois a assinatura e o rodapé do sistema. Usa os tokens e as peças do base.css.
   Pedido do Daniel de 16-Out-2026: à vista o título e no máximo uma frase de B a G (o resto do texto do cliente abre no
   sítio pelo "Ler mais" do site todo, M15; no telemóvel só o título e o botão), as frases da Antevisão a seguir o
   comparador, o passeio 3D ligado ao scroll no topo da Antevisão com o rótulo "3D" preso, o comparador com a fusão de
   luz do vc3d.js, o fio de luz que percorre as etapas do Método, uma voz de cada vez e profundidade ao rato. */

/* no telemóvel e no tablet, as etiquetas das margens repetiriam o título logo abaixo: ficam só no PC */
@media (max-width: 1023px) { .ini .com-etiqueta > .etiqueta-v { display: none; } }
/* no telemóvel 34 px entre secções (eram 40): com o texto atrás das linhas, as secções ficaram mais curtas e o ar
   a mais entre elas lia-se como vazio */
.ini { --ini-secao: clamp(34px, 6vw, 88px); }
@media (min-width: 768px) { .ini { --ini-secao: var(--secao); } }
.ini-faz, .ini-proj, .ini-metodo, .ini-ante, .ini-conf, .ini-contacto { position: relative; padding-block: var(--ini-secao); --etiqueta-topo: var(--ini-secao); }
.ini-titulo { font-family: var(--serif); font-weight: 300; font-size: var(--t-titulo); line-height: 1.06; letter-spacing: -.02em; }
/* as quebras dos títulos são as do cliente ("/"): cada troço é uma linha; no telemóvel o corpo desce um pouco para
   a linha mais comprida caber inteira a 360 px */
@media (max-width: 767px) { .ini-titulo { font-size: clamp(23px, 6.4vw, 30px); } }
.ini-texto { display: grid; gap: .55em; max-width: 38rem; font-size: var(--t-lead); line-height: 1.5; color: var(--tinta-3); text-wrap: pretty; }
.ini-texto > p:first-child, .ini-texto .ler-mais__texto > p:first-child { color: var(--tinta); }
@media (max-width: 767px) { .ini-texto { font-size: 16px; line-height: 1.5; } }

/* os botões do cliente ("Conheça…", "Descubra…", "Explore…", "Fale-nos…"): contorno de 1 px, o dourado só no foco e
   ao passar; 46 px de alvo */
.ini-botao { display: inline-flex; align-items: center; gap: .7em; min-height: 46px; padding: 0 20px; border: 1px solid var(--linha-forte);
  font: 500 14px/1.2 var(--sans); letter-spacing: .02em; color: var(--tinta); text-decoration: none; white-space: nowrap;
  transition: border-color var(--t-curto) var(--ease), background-color var(--t-curto) var(--ease); }
.ini-botao .seta { display: inline-block; transition: transform var(--t-curto) var(--ease); }
.ini-botao sup { font-size: .62em; vertical-align: .55em; margin-left: .02em; }
.ini-botao:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.ini-botao--cheio { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); }
@media (hover: hover) and (pointer: fine) {
  .ini-botao:hover { border-color: var(--acento); }
  .ini-botao:hover .seta { transform: translateX(4px); }
  .ini-botao--cheio:hover { background: transparent; color: var(--tinta); }
}

/* texto em camadas: o texto do cliente fica todo no HTML, à letra; à vista o título e uma frase (PC) ou só o título
   (telemóvel, e no Método e na Confiança em todos os tamanhos). O resto abre no sítio pelo "Ler mais" do site todo
   (M15 do base.css e do core.js); aqui só o espaço entre as frases, que fica dentro do texto que anima */
.ini-texto.ler-mais { display: block; }
.ini-texto .ler-mais__texto { display: grid; gap: .55em; }
@keyframes ini-sobe { from { opacity: 0; transform: translate3d(0, .8em, 0); } }
/* a seta dos botões, desenhada (inicio_seta) */
.ini-seta { flex: none; width: 1.15em; height: .72em; overflow: visible; vertical-align: .02em; }
.ini-conf__seta .ini-seta { width: 16px; height: 10px; }

/* ------------------------------------------------------------------ A. abertura */
/* Pouco texto sobre o filme: a frase em baixo à esquerda; à direita, o texto complementar e os dois botões; a
   assinatura numa linha calada no fundo. O texto complementar está à vista desde a primeira pintura (é o maior texto
   do ecrã e conta para o LCP no telemóvel); a frase acende por linhas e os botões e a assinatura entram depois. */
.ini-abertura .abertura__texto { bottom: clamp(92px, 13svh, 132px); }
.ini-abertura__corpo { display: grid; gap: 18px 0; align-items: end; }
.ini-abertura__lado { display: grid; gap: 18px; justify-items: start; max-width: 34rem; }
.ini-abertura__comp { font-size: 16px; line-height: 1.5; color: rgba(243, 241, 236, .86); text-wrap: pretty; }
.ini-abertura__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.ini-botao--sobre { min-height: 44px; padding: 0 18px; font-size: 13.5px; border-color: rgba(243, 241, 236, .5);
  background: rgba(11, 11, 12, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--osso); }
.ini-abertura .abertura__rodape { right: auto; bottom: 30px; justify-content: flex-start; }
/* a assinatura em duas linhas, como o cliente a escreve: "Versicolor® / Design que eleva a forma de viver." */
.ini-abertura__assinatura { display: grid; justify-items: start; gap: 7px; margin: 0; }
.ini-abertura__marca { font: 500 var(--t-rotulo)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--osso); }
.ini-abertura__marca sup { font-size: .8em; vertical-align: .5em; }
.ini-abertura__linha { font: italic 300 15px/1.2 var(--serif); letter-spacing: 0; color: rgba(243, 241, 236, .78); }
/* a frase fica por cima de tetos brancos e de mármore quando a casa acende: a sombra de baixo sobe um pouco */
.ini-abertura::after {
  background: linear-gradient(to top, rgba(11, 11, 12, .78) 0%, rgba(11, 11, 12, .46) 26%, rgba(11, 11, 12, .14) 48%, rgba(11, 11, 12, 0) 64%),
              linear-gradient(to bottom, rgba(11, 11, 12, .38), rgba(11, 11, 12, 0) 22%);
}
@media (min-width: 1024px) {
  .ini-abertura__corpo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); }
  .ini-abertura__frase { grid-column: 1 / 8; }
  .ini-abertura__lado { grid-column: 8 / 13; justify-self: end; padding-bottom: .45em; }
}
@media (max-width: 767px) {
  .ini-abertura .abertura__texto { bottom: 76px; }
  .ini-abertura__corpo { gap: 14px; }
  .ini-abertura__lado { gap: 14px; }
  .ini-abertura__comp { font-size: 15px; line-height: 1.45; }
  .ini-abertura__acoes { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ini-abertura .abertura__rodape { bottom: 22px; right: calc(var(--margem) + 52px); }
  .ini-abertura__assinatura { gap: 5px; }
  .ini-abertura__linha { font-size: 14px; }
  .ini-abertura::after {
    background: linear-gradient(to top, rgba(11, 11, 12, .86) 0%, rgba(11, 11, 12, .6) 30%, rgba(11, 11, 12, .18) 50%, rgba(11, 11, 12, 0) 64%),
                linear-gradient(to bottom, rgba(11, 11, 12, .4), rgba(11, 11, 12, 0) 18%);
  }
}

/* ------------------------------------------------------------------ B. apresentação: o mesmo roupeiro em quatro estados */
/* o texto ao lado alinha pelo topo do título: ao abrir o "Ler mais" cresce para baixo e o título fica onde está */
.ini-faz__cabeca { row-gap: 18px; align-items: start; }
.ini-faz__seq { margin-top: clamp(28px, 3.4vw, 48px); padding-inline: var(--margem); }
.ini-faz__rotulo { margin-bottom: 14px; }
.ini-faz__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px var(--calha); }
.ini-faz__passo { position: relative; min-width: 0; --aceso: 1; }
.ini-faz__cab { display: flex; align-items: baseline; gap: 10px; height: 20px; }
.ini-faz__n { font: 500 12px/1 var(--sans); letter-spacing: .1em; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--luz) calc(var(--aceso) * 100%), var(--pedra)); transition: color .3s var(--ease); }
.ini-faz__estado { font: 500 var(--t-rotulo)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--osso) calc(var(--aceso) * 100%), var(--pedra)); transition: color .3s var(--ease); }
/* o fio de luz: um segmento por estado que atravessa a calha até ao seguinte; desenhados um a seguir ao outro,
   leem-se como uma só linha da esquerda para a direita. Só marca o progresso, não imita uma régua */
.ini-faz__fio { position: relative; display: block; height: 1px; margin: 10px 0 14px; width: calc(100% + var(--calha));
  background: linear-gradient(var(--luz), var(--luz)) 0 0 / calc(var(--f, 1) * 100%) 100% no-repeat, var(--linha); }
.ini-faz__passo:last-child .ini-faz__fio { width: 100%; }
.ini-faz__fio::before { content: ''; position: absolute; left: 0; top: -3px; width: 1px; height: 7px;
  background: color-mix(in srgb, var(--luz) calc(var(--aceso) * 100%), var(--linha-forte)); }
.ini-faz__fig { position: relative; overflow: hidden; margin: 0; }
.ini-faz__foto { display: block; overflow: hidden; background: var(--superficie); }
.ini-faz__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .ini-faz__foto img { transition: transform .6s var(--ease); }
  .ini-faz__passo:hover .ini-faz__foto img { transform: scale(1.02); }
  /* com a profundidade (vc3d.js) a imagem já se aproxima e desliza: o crescimento daqui sairia a dobrar */
  .ini-faz__passo:hover .ini-faz__fig.vc3d-prof .ini-faz__foto img { transform: none; }
}
/* antes de o fio passar (classe posta pelo inicio.js só com movimento): estados apagados e as quatro imagens já no
   sítio, em meia-luz; cada uma acende quando o fio lá chega (nenhuma fica por ver a quem desce depressa) */
.ini-faz--armado .ini-faz__passo { --aceso: 0; --f: 0; }
.ini-faz--armado .ini-faz__fig { opacity: .3; filter: saturate(.4); }
.ini-faz__fig { transition: opacity .6s var(--ease), filter .6s var(--ease); }
.ini-faz--armado .ini-faz__passo.is-aceso .ini-faz__fig { opacity: 1; filter: none; }
@media (min-width: 1024px) {
  .ini-faz__titulo { grid-column: 1 / 7; }
  .ini-faz__lado { grid-column: 7 / 13; padding-bottom: .2em; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ini-faz__titulo { grid-column: 1 / 7; }
  .ini-faz__lado { grid-column: 7 / 13; }
}
@media (max-width: 767px) {
  /* o ecrã 2 do telemóvel tem de mostrar as quatro imagens e a legenda de Porto Salvo (DIRECAO-v2 §10.3, a 360x640):
     o número e o estado passam para cima da imagem, numa pastilha, e o fio corre colado ao topo das imagens */
  .ini-faz { padding-top: 32px; }
  .ini-faz__seq { margin-top: 20px; }
  .ini-faz__rotulo { margin-bottom: 10px; }
  .ini-faz__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .ini-faz__passo { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .ini-faz__fio { grid-area: 1 / 1; margin: 0 0 6px; }
  .ini-faz__fio::before { top: -2px; height: 5px; }
  .ini-faz__fig { grid-area: 2 / 1; }
  .ini-faz__cab { grid-area: 2 / 1; z-index: 1; align-self: start; justify-self: start; height: auto; margin: 6px 0 0 6px; gap: 7px;
    padding: 5px 7px; background: rgba(11, 11, 12, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  /* na pastilha só o estado: a ordem já a dão o fio e a grelha */
  .ini-faz__n { display: none; }
  .ini-faz__estado { font-size: 10px; letter-spacing: .14em; }
  .ini-faz--armado .ini-faz__cab { opacity: 0; transition: opacity .6s var(--ease); }
  .ini-faz--armado .ini-faz__passo.is-aceso .ini-faz__cab { opacity: 1; }
  .ini-faz__passo:nth-child(2n) .ini-faz__fio { width: 100%; }
  .ini-faz__passo:nth-child(2n + 1) .ini-faz__fio { width: calc(100% + 12px); }
}

/* ------------------------------------------------------------------ C. antevisão: o passeio 3D e o comparador */
/* B e C têm o mesmo fundo: sem a mudança de cor, dois --secao seguidos (cerca de 200 px a 1440) leem-se como um vazio.
   Fica um só --secao entre a faixa do roupeiro e o passeio; a etiqueta "ANTEVISÃO" acompanha o topo */
@media (min-width: 768px) { .ini-faz + .ini-ante { padding-top: 0; --etiqueta-topo: 0px; } }
/* o passeio 3D de Porto Salvo (vc3d.js, data-sequencia-scroll): uma faixa larga que avança com o scroll, sem prender,
   com o título do cliente por cima, em baixo à esquerda. Por baixo do título, o rótulo "3D · Sala e escada, Porto
   Salvo", sticky (bottom): quando a faixa entra por baixo, fica preso ao fundo do ecrã por cima do render; quando sai
   por cima, é a última coisa da faixa a sair. Assim nunca há render à vista sem "3D" (o rótulo do canto do bloco sai:
   era o mesmo, mas ficava fora do ecrã quando o topo da faixa saía). Sem JS e com movimento reduzido fica o primeiro
   fotograma, com o mesmo rótulo */
.ini-ante__passeio { --rot-baixo: clamp(16px, 1.9vw, 28px); --rot-alto: 27px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-inline: var(--margem); }
.ini-ante__passeio > *, .ini-ante__passeio::after { grid-area: 1 / 1; }
.ini-ante__passeio::after { content: ''; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(11, 11, 12, .74) 0%, rgba(11, 11, 12, .32) 34%, rgba(11, 11, 12, 0) 60%),
              linear-gradient(to right, rgba(11, 11, 12, .42), rgba(11, 11, 12, 0) 52%); }
.ini-ante__seq .seq3d__palco { aspect-ratio: 2.4 / 1; }
.ini-ante__seq .vc3d-rotulo { display: none; }
.ini-ante__titulo { z-index: 2; align-self: end; justify-self: start; max-width: 15em;
  margin: 0 0 calc(var(--rot-baixo) + var(--rot-alto) + clamp(12px, 1.4vw, 20px)) clamp(20px, 2.6vw, 40px); color: var(--osso); }
.ini-ante__rot { z-index: 3; align-self: end; justify-self: start; position: sticky; bottom: 16px; box-sizing: border-box; height: var(--rot-alto);
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--rot-baixo) clamp(20px, 2.6vw, 40px); padding: 0 10px;
  font: 500 var(--t-rotulo)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 241, 236, .86);
  background: rgba(11, 11, 12, .46); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.ini-ante__3d { color: var(--osso); }
.ini-ante__onde-3d { display: inline-flex; align-items: center; gap: 10px; }
.ini-ante__onde-3d::before { content: ''; width: 1px; height: 1.1em; background: rgba(243, 241, 236, .38); }
.ini-ante__grelha { margin-top: clamp(28px, 3.4vw, 52px); row-gap: 26px; align-items: start; }
.ini-ante__lado { display: grid; gap: 22px; justify-items: start; }
.ini-ante__mesa { min-width: 0; }
/* as três frases do cliente no mesmo sítio: a do estado do comparador à vista (inicio.js, só com movimento). A caixa
   tem a altura da frase mais comprida, para o botão de baixo não saltar */
.ini-ante__frase { color: var(--tinta); }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.sem-mov) .ini-ante__texto--troca { display: grid; }
  html.js:not(.sem-mov) .ini-ante__texto--troca > .ini-ante__frase { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, .5em, 0);
    transition: opacity .3s var(--ease), transform .3s var(--ease); }
  html.js:not(.sem-mov) .ini-ante__texto--troca > .ini-ante__frase.is-atual { opacity: 1; transform: none;
    transition: opacity .6s var(--ease) .12s, transform .7s var(--ease) .12s; }
}
/* no telemóvel, em repouso, o comparador fala sozinho: a caixa das frases abre quando se toca num dos três botões */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.sem-mov) .ini-ante__texto--troca:not(.is-escolhido) { display: none; }
  html.js:not(.sem-mov) .ini-ante__texto--troca.is-escolhido { animation: ini-sobe .55s var(--ease) both; }
}
html.js .ini-ante__comparar .comparar__palco { aspect-ratio: var(--proporcao, 4 / 3); max-height: 74svh; }
/* a 4:3 e encostado à esquerda, o corte acaba antes do aquário iluminado da direita (começa a 77% da fotografia).
   1% e não 0%: a fusão do vc3d.js lê o object-position e trata 0 como "sem valor" (50%), e o aquário voltava durante
   a passagem de luz */
.ini-ante__comparar { --proporcao: 4 / 3 !important; }
.ini-ante__comparar [data-camada] img { object-position: 1% 50%; }
.ini-ante__legenda { align-items: baseline; justify-content: flex-start; gap: 6px 18px; }
.ini-ante__onde { font: 500 var(--t-rotulo)/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); }
/* o sítio é a ligação à obra: sublinhado fino, 44 px de alvo */
.ini-ante__onde--ligacao { display: inline-block; padding-block: 13px; margin-block: -13px; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 11px) / 100% 1px no-repeat;
  transition: color var(--t-curto) var(--ease); }
.ini-ante__onde--ligacao:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ini-ante__onde--ligacao:hover { color: var(--acento); } }
/* no telemóvel o comparador ocupa a largura toda e a pega fica no meio do ecrã: um dedo a subir que comece nela tem de
   descer a página (como no resto do palco); o arrasto na horizontal continua a mover a linha */
.ini-ante__comparar .comparar__pega { touch-action: pan-y; }
/* cada imagem identificada à vista: rótulo em caixa, legível por cima do branco das paredes, acima da tela da fusão */
.ini-ante__comparar .comparar__rotulo { z-index: 4; padding: 6px 9px; background: rgba(11, 11, 12, .55); -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px); color: var(--osso); transition: opacity .25s var(--ease); }
/* imagem inteira (3D ou obra): sem linha nem pega; pegar na imagem volta a comparar. Durante a fusão, idem */
.ini-ante__comparar .comparar__fio, .ini-ante__comparar .comparar__pega { transition: opacity .35s var(--ease); }
.ini-ante--puro .comparar__fio, .ini-ante--puro .comparar__pega,
.ini-ante__comparar.fundir--a-fundir .comparar__fio, .ini-ante__comparar.fundir--a-fundir .comparar__pega { opacity: 0; }
.ini-ante--puro .comparar__pega { pointer-events: none; }
.ini-ante--puro .comparar__pega:focus-visible { opacity: 1; }   /* com o teclado, a pega aparece para se ver onde está o foco */
/* sem a fusão em WebGL, a linha de luz atravessa a imagem sozinha (sem a pega) */
.ini-ante--puro.ini-ante--varrer .comparar__fio { opacity: 1; }
/* os rótulos durante a fusão: o "Antevisão 3D" sai quando a luz lhe passa por cima, ou entra quando a obra já é 3D */
.ini-ante__comparar.ini-ante--sem-a .comparar__rotulo--a { opacity: 0 !important; }
.ini-ante__comparar.ini-ante--com-a .comparar__rotulo--a { opacity: 1 !important; }
/* por baixo do palco, numa linha: os botões da troca à esquerda, o sítio e a ligação à obra à direita */
.ini-ante__comparar { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
.ini-ante__comparar > .comparar__palco { grid-column: 1 / -1; }
.ini-ante__ver { grid-column: 1; margin-top: 8px; }
.ini-ante__legenda { grid-column: 2; margin-top: 8px; justify-content: flex-end; }
html:not(.js) .ini-ante__legenda, .ini-ante__ver[hidden] + .ini-ante__legenda { grid-column: 1 / -1; justify-content: flex-start; }
/* abaixo de 1280 a coluna do comparador não leva os três botões e o sítio na mesma linha: um por baixo do outro */
@media (max-width: 1279px) {
  .ini-ante__comparar { grid-template-columns: minmax(0, 1fr); }
  .ini-ante__legenda { grid-column: 1; justify-content: flex-start; margin-top: 4px; }
}
/* sem JS as duas imagens ficam lado a lado (o palco é também .fundir__palco), cada uma com o seu rótulo */
html:not(.js) .ini-ante__comparar [data-camada] { position: relative; }
html:not(.js) .ini-ante__comparar [data-camada] + [data-camada] { margin-top: 0; }
html:not(.js) .ini-ante__comparar [data-camada]::before { content: attr(data-camada); position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 6px 9px; font: 500 var(--t-rotulo)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--osso);
  background: rgba(11, 11, 12, .55); }
@media (min-width: 1024px) {
  .ini-ante__lado { grid-column: 1 / 6; padding-top: 4px; }
  .ini-ante__mesa { grid-column: 6 / 13; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ini-ante__seq .seq3d__palco { aspect-ratio: 2 / 1; }
  .ini-ante__lado { grid-column: 1 / 6; }
  .ini-ante__mesa { grid-column: 6 / 13; }
}
@media (max-width: 767px) {
  /* no telemóvel os fotogramas verticais (720) num palco 4:5; o rótulo preso e o título em baixo, à esquerda */
  .ini-ante__seq .seq3d__palco { aspect-ratio: 4 / 5; width: 100%; }
  .ini-ante__passeio { --rot-baixo: 14px; --rot-alto: 24px; }
  .ini-ante__titulo { margin: 0 16px calc(var(--rot-baixo) + var(--rot-alto) + 10px); }
  .ini-ante__rot { margin: 0 0 var(--rot-baixo) 16px; padding: 0 8px; gap: 8px; font-size: 10px; }
  .ini-ante__onde-3d { gap: 8px; }
  .ini-ante__passeio::after { background: linear-gradient(to top, rgba(11, 11, 12, .8) 0%, rgba(11, 11, 12, .36) 30%, rgba(11, 11, 12, 0) 55%); }
  .ini-ante__grelha { margin-top: 22px; }
  .ini-ante__lado { gap: 16px; }
  /* o comparador logo a seguir ao passeio, e o texto por baixo dos botões que o mudam. Ao alto (4:5) e centrado no
     painel em losango: mais imagem no ecrã e o aquário fica de fora */
  .ini-ante__mesa { order: -1; }
  .ini-ante__comparar { --proporcao: 4 / 5 !important; }
  .ini-ante__comparar [data-camada] img { object-position: 47% 50%; }
  .ini-ante__comparar .comparar__rotulo { top: 10px; padding: 5px 7px; font-size: 10px; }
  .ini-ante__comparar .comparar__rotulo--a { left: 10px; } .ini-ante__comparar .comparar__rotulo--b { right: 10px; }
  /* os três botões da troca numa linha só, por cima do sítio */
  .ini-ante__ver { gap: 0 14px; }
  .ini-ante__ver button { font-size: 10.5px; letter-spacing: .1em; }
}

/* ------------------------------------------------------------------ D. método: as seis etapas */
.ini-metodo__cabeca { row-gap: 18px; align-items: start; }   /* como no B: o título não desce quando o texto abre */
.ini-metodo__lado { display: grid; gap: 22px; justify-items: start; }
.ini-metodo__texto { color: var(--tinta-3); }
.ini-metodo__lista { margin-top: clamp(26px, 3vw, 40px); row-gap: 0; }
.ini-metodo__etapa { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-content: start;
  padding-top: 16px; border-top: 1px solid var(--linha-forte); }
.ini-metodo__etapa::before { content: ''; position: absolute; left: 0; top: -1px; width: 28px; height: 1px; background: var(--acento); }
.ini-metodo__n { grid-row: 1 / span 2; font: 300 26px/1 var(--serif); color: var(--acento); font-variant-numeric: lining-nums tabular-nums; }
.ini-metodo__verbo { font: 300 22px/1.1 var(--serif); letter-spacing: -.01em; }
.ini-metodo__frase { margin-top: 6px; font: italic 300 16px/1.35 var(--serif); color: var(--tinta-3); text-wrap: pretty; }
/* com movimento (inicio.js, .ini-metodo--foco): um fio de luz enche o traço de cima de cada etapa com o scroll; a frase
   de cada etapa sobe quando o fio lá chega e fica (com a lista a meio do ecrã leem-se as seis); a etapa onde o fio está
   tem a frase mais clara. As frases ficam no HTML e para os leitores de ecrã (só a opacidade muda); com movimento
   reduzido, todas à vista */
.ini-metodo__etapa::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--acento);
  transform: scaleX(0); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.sem-mov) .ini-metodo--foco .ini-metodo__etapa::after { transform: scaleX(var(--f, 0)); }
  html.js:not(.sem-mov) .ini-metodo--foco .ini-metodo__n { color: var(--tinta-2); transition: color .4s var(--ease); }
  html.js:not(.sem-mov) .ini-metodo--foco .ini-metodo__etapa:is(.is-ativa, .is-passada, .is-sobre) .ini-metodo__n { color: var(--acento); }
  html.js:not(.sem-mov) .ini-metodo--foco .ini-metodo__frase { opacity: 0; transform: translate3d(0, 8px, 0);
    transition: opacity .3s var(--ease), transform .3s var(--ease), color .4s var(--ease); }
  html.js:not(.sem-mov) .ini-metodo--foco .ini-metodo__etapa:is(.is-ativa, .is-passada, .is-sobre) .ini-metodo__frase { opacity: 1; transform: none;
    transition: opacity .6s var(--ease), transform .6s var(--ease), color .4s var(--ease); }
  html.js:not(.sem-mov) .ini-metodo--foco .ini-metodo__etapa:is(.is-ativa, .is-sobre) .ini-metodo__frase { color: var(--tinta); }
}
/* no telemóvel (inicio.js, .ini-metodo--legenda) as células ficam com o numeral e o verbo numa linha, e a frase da etapa
   onde o fio está aparece por baixo da grelha, numa linha só (a de uma etapa tocada, se se tocar). As frases das células
   saem do desenho mas ficam para os leitores de ecrã (transparentes, fora do fluxo) */
.ini-metodo__legenda { display: none; }
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.sem-mov) .ini-metodo--legenda .ini-metodo__etapa .ini-metodo__frase { position: absolute; left: 0; top: 0; width: 100%;
    opacity: 0 !important; pointer-events: none; }
  html.js:not(.sem-mov) .ini-metodo--legenda .ini-metodo__legenda { display: block; min-height: 2.7em; margin: 14px var(--margem) 0;
    font: italic 300 17px/1.35 var(--serif); color: var(--tinta); text-wrap: pretty; }
  html.js:not(.sem-mov) .ini-metodo--legenda .ini-metodo__legenda::before { content: ''; display: block; width: 28px; height: 1px;
    margin-bottom: 10px; background: var(--acento); }
  html.js:not(.sem-mov) .ini-metodo__legenda.is-viva { animation: ini-sobe .55s var(--ease) both; }
}
@media (min-width: 1024px) {
  .ini-metodo__titulo { grid-column: 1 / 6; }
  .ini-metodo__lado { grid-column: 6 / 13; }
  .ini-metodo__texto { max-width: none; }
  .ini-metodo__etapa { grid-column: span 2; }
}
/* entre 1024 e 1279 as seis colunas são estreitas: o numeral sobe para cima do verbo */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ini-metodo__etapa { grid-template-columns: minmax(0, 1fr); }
  .ini-metodo__n { grid-row: auto; font-size: 20px; }
  .ini-metodo__verbo { margin-top: 6px; font-size: 20px; }
  .ini-metodo__frase { font-size: 15px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ini-metodo__titulo { grid-column: 1 / 7; }
  .ini-metodo__lado { grid-column: 7 / 13; }
  .ini-metodo__etapa { grid-column: span 4; padding-bottom: 18px; }
}
@media (max-width: 767px) {
  /* duas colunas, três filas: 01 02, 03 04, 05 06; o numeral e o verbo na mesma linha */
  .ini-metodo__etapa { grid-column: span 6; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: baseline;
    padding: 12px 0 14px; border-top-color: var(--linha); }
  .ini-metodo__n { grid-row: auto; font-size: 17px; }
  .ini-metodo__verbo { font-size: 19px; }
  .ini-metodo__frase { grid-column: 1 / -1; margin-top: 3px; font-size: 14px; }
  .ini-metodo__lado { gap: 18px; }
}

/* ------------------------------------------------------------------ E. projetos: Porto Salvo em grande e mais dois */
.ini-proj { background: var(--noite); }
.ini-proj__grelha { row-gap: 26px; align-items: start; }
.ini-proj__cabeca { display: grid; gap: 18px; justify-items: start; }
.ini-proj__grande { position: relative; min-width: 0; }
.ini-proj .cartao--grande .cartao__capa { aspect-ratio: 6 / 5; max-height: 70svh; }
.ini-proj__linhas { display: grid; gap: 16px; }
.ini-proj .cartao--linha { --mini: clamp(150px, 16.7vw, 240px); }
.ini-proj .cartao--linha .cartao__capa { aspect-ratio: 4 / 3; }
.ini-proj .cartao--linha .cartao__nome { font-size: clamp(20px, 1.6vw, 24px); }
/* o estado da capa: "Casa acabada" e, na troca, "3D" ou "Antes". Cada rótulo tem a sua caixa, para a caixa
   ter sempre a largura da palavra que se lê */
.ini-proj .cartao__estado { display: inline-grid; justify-items: start; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ini-proj .cartao__estado > span { grid-area: 1 / 1; padding: 6px 9px; background: rgba(11, 11, 12, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .3s var(--ease); }
.ini-proj .cartao__estado-b { opacity: 0; }
.ini-proj a.cartao.a-trocar .cartao__estado-a { opacity: 0; }
.ini-proj a.cartao.a-trocar .cartao__estado-b { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .ini-proj a.cartao[data-troca-rotulo]:is(:hover, :focus-visible) .cartao__estado-a { opacity: 0; }
  .ini-proj a.cartao[data-troca-rotulo]:is(:hover, :focus-visible) .cartao__estado-b { opacity: 1; }
}
.ini-proj .cartao--linha .cartao__estado { left: 6px; bottom: 6px; font-size: 10px; opacity: 0; transition: opacity .3s var(--ease); }
.ini-proj .cartao--linha .cartao__estado > span { padding: 5px 7px; }
/* nas miniaturas o rótulo só aparece com a troca */
.ini-proj .cartao--linha .cartao__estado-a { display: none; }
.ini-proj a.cartao--linha.a-trocar .cartao__estado { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .ini-proj a.cartao--linha:is(:hover, :focus-visible) .cartao__estado { opacity: 1; } }
/* o botão de troca do telemóvel: "Casa acabada | 3D" sobre a capa, fora da ligação (as palavras do rótulo do canto) */
.ini-troca { gap: 8px; }
.ini-troca > span { opacity: .55; transition: opacity .3s var(--ease); }
.ini-troca[aria-pressed="false"] > span:first-child, .ini-troca[aria-pressed="true"] > span:last-child { opacity: 1; }
.ini-troca > span + span::before { content: '|'; margin-right: 8px; opacity: .5; }
html:not(.js) .ini-troca { display: none; }
@media (min-width: 768px) {
  /* a capa grande ocupa as duas filas; à direita, o título, o texto e o botão, e por baixo os outros dois projetos */
  .ini-proj__grelha { grid-template-rows: auto 1fr; }
  .ini-proj__grande { grid-row: 1 / span 2; }
  .ini-proj__linhas { align-self: end; }
}
@media (min-width: 1024px) {
  .ini-proj__grande { grid-column: 1 / 8; }
  .ini-proj__cabeca, .ini-proj__linhas { grid-column: 8 / 13; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ini-proj__grande { grid-column: 1 / 8; }
  .ini-proj__cabeca, .ini-proj__linhas { grid-column: 8 / 13; }
  .ini-proj .cartao--linha { --mini: 112px; }
}
@media (max-width: 767px) {
  .ini-proj__grelha { row-gap: 22px; }
  .ini-proj__cabeca { gap: 14px; }
  .ini-proj .cartao--grande .cartao__capa { height: auto; min-height: 0; aspect-ratio: 5 / 4; }
  .ini-proj .cartao--grande .cartao__nome { font-size: 28px; }
  /* 134 px de coluna dão 120 px de imagem (a capa tem 14 px de margem): a miniatura conta como imagem à vista */
  .ini-proj .cartao--linha { --mini: 134px; }
  .ini-proj .cartao--linha .cartao__nome { font-size: 20px; }
  .ini-proj .cartao--linha .cartao__estado { display: none; }
  /* na capa grande o botão "Casa acabada | 3D" já diz o estado (o que está à vista mais claro): o rótulo do canto
     repetia "Casa acabada" duas vezes no mesmo ecrã. Sem JS o botão não existe e o rótulo fica */
  html.js .ini-proj__grande .cartao__estado { display: none; }
}

/* ------------------------------------------------------------------ F. confiança: três testemunhos, discretos */
.ini-conf__grelha { row-gap: 26px; align-items: start; }
.ini-conf__cabeca { display: grid; gap: 18px; align-content: start; }
.ini-conf__vozes { position: relative; min-width: 0; }
.ini-conf__ctrl { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.ini-conf__seta { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--linha-forte); border-radius: 50%;
  font: 400 15px/1 var(--sans); color: var(--tinta); transition: border-color var(--t-curto) var(--ease); }
.ini-conf__seta:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ini-conf__seta:hover { border-color: var(--acento); } }
.ini-conf__contador { min-width: 4.2em; text-align: center; font: 500 12px/1 var(--sans); letter-spacing: .12em; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ini-conf__contador b { color: var(--acento); font-weight: 500; }
.ini-conf__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--calha); }
.ini-conf__item { min-width: 0; }
.ini-conf__voz { margin: 0; height: 100%; display: flex; flex-direction: column; padding-top: 16px; border-top: 1px solid var(--linha); }
.ini-conf__voz::before { content: ''; display: block; width: 28px; height: 1px; margin-top: -17px; margin-bottom: 16px; background: var(--acento); }
.ini-conf__texto { font: italic 300 clamp(17px, 1.35vw, 20px)/1.4 var(--serif); letter-spacing: -.005em; color: var(--tinta); text-wrap: pretty; }
.ini-conf__autor { margin-top: auto; padding-top: 16px; display: grid; gap: 4px; }
.ini-conf__fonte { letter-spacing: .1em; color: var(--tinta-2); opacity: .8; text-transform: none; font-weight: 400; font-size: 12px; }
@media (min-width: 1024px) {
  .ini-conf__cabeca { grid-column: 1 / 6; }
  .ini-conf__vozes { grid-column: 6 / 13; padding-top: .35em; }
}
/* PC com movimento: as três vozes no mesmo sítio, uma de cada vez, maiores; as setas e o contador por cima */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.sem-mov) .ini-conf--palco .ini-conf__vozes { grid-column: 7 / 13; padding-top: 0; }
  html.js:not(.sem-mov) .ini-conf--palco .ini-conf__lista { grid-template-columns: minmax(0, 1fr); }
  html.js:not(.sem-mov) .ini-conf--palco .ini-conf__item { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translate3d(0, 14px, 0);
    transition: opacity .35s var(--ease), transform .5s var(--ease), visibility 0s linear .35s; }
  html.js:not(.sem-mov) .ini-conf--palco .ini-conf__item.is-atual { opacity: 1; visibility: visible; transform: none;
    transition: opacity .6s var(--ease) .12s, transform .8s var(--ease) .12s, visibility 0s; }
  html.js:not(.sem-mov) .ini-conf--palco .ini-conf__texto { font-size: clamp(24px, 2.1vw, 32px); line-height: 1.3; letter-spacing: -.01em; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ini-conf__cabeca { grid-column: 1 / 8; }
}
@media (max-width: 767px) {
  /* faixa com contador: uma voz por vez, a seguinte a espreitar */
  .ini-conf__ctrl { justify-content: flex-end; margin-bottom: 12px; }
  .ini-conf__vozes { margin-top: 18px; }
  .ini-conf__lista { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--margem) * -1); padding-inline: var(--margem); scroll-padding-inline: var(--margem); }
  .ini-conf__lista::-webkit-scrollbar { display: none; }
  .ini-conf__item { scroll-snap-align: start; }
  /* com JS há setas e contador: uma voz de cada vez, a seguinte fora do ecrã (sem JS, a seguinte espreita) */
  html.js .ini-conf__lista { grid-auto-columns: 100%; gap: calc(var(--margem) * 2); }
  .ini-conf__texto { font-size: 18px; }
}
.ini-conf__lista:focus-visible { outline-offset: 6px; }

/* ------------------------------------------------------------------ G. contacto */
/* o texto e o botão à esquerda, uma sala acabada à direita: o fim da página não fica só com texto */
.ini-contacto__grelha { row-gap: 22px; align-items: start; }
.ini-contacto__lado { display: grid; gap: 22px; justify-items: start; }
.ini-contacto__fig { margin: 0; min-width: 0; }
.ini-contacto__prof { position: relative; overflow: hidden; }
.ini-contacto__foto { display: block; overflow: hidden; background: var(--superficie); }
.ini-contacto__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ini-contacto__leg { margin-top: 10px; font: 500 var(--t-rotulo)/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
@media (min-width: 768px) {
  .ini-contacto__grelha { grid-template-rows: auto 1fr; }
  .ini-contacto__titulo { grid-column: 1 / 7; }
  .ini-contacto__lado { grid-column: 1 / 7; }
  .ini-contacto__fig { grid-column: 8 / 13; grid-row: 1 / span 2; }
}
@media (max-width: 767px) {
  .ini-contacto__lado { gap: 18px; }
  .ini-contacto__fig { order: 3; margin-top: 6px; }
}

/* ---------------------------------------------------------------- Antes & Depois (19-Out-2026): o destaque, com o comparador do site */
.ini-ad { padding-block: var(--secao); }
.ini-ad__grelha { row-gap: 26px; align-items: center; }
.ini-ad__lado { display: grid; gap: 20px; justify-items: start; }
.ini-ad__mesa { min-width: 0; }
@media (min-width: 1024px) {
  .ini-ad__lado { grid-column: 1 / 5; }
  .ini-ad__mesa { grid-column: 5 / -1; }
}
.ini-ad .ad-par--grande .comparar__palco { width: 100%; }
html.js .ini-ad .ad-par--grande .comparar__palco { aspect-ratio: 4 / 3; max-height: 74svh; }
.ini-ad .ad-destaque__legenda { margin-top: 10px; }