/* website2 v3 — a villa à noite: cabeçalho e legendas ======================
 * A conversão da cena 3D para noite (LOOKDEV_PARAMS em scene/lookdev.js)
 * deixou duas peças de interface ainda em creme por cima dela: a barra do
 * cabeçalho e as placas de texto dos capítulos. São CSS da v2 e foi por aí
 * que a página continuava a parecer meia-feita.
 *
 * Este ficheiro carrega depois de finish.css e signal.css, e trata só disso.
 * ========================================================================= */

/* ---- cabeçalho: escuro em toda a página, não só sobre o hero -----------
   O site v3 é escuro do hero às provas; uma barra creme a meio lia como
   resto de outro site. Sobre as secções claras que ainda existem (estúdio,
   contacto) uma barra escura continua a ter contraste de sobra. */
.site-header{background:rgba(7,8,13,.72)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(238,241,247,.10)}
.site-header .brand,
.site-header .brand .mark{color:#EEF1F7}
.site-header .brand .mark{border-color:rgba(238,241,247,.34)}
.site-header .site-nav a{color:rgba(238,241,247,.74)}
.site-header .site-nav a:hover{color:#EEF1F7}
.site-header .lang-switch a{color:rgba(238,241,247,.5)}
.site-header .lang-switch [aria-current]{color:#C8FF2E}
.site-header .menu-toggle{border-color:rgba(238,241,247,.28);color:#EEF1F7}
@media(max-width:820px){
  .site-header .site-nav{background:rgba(7,8,13,.96);border-bottom-color:rgba(238,241,247,.12)}
}

/* ---- placas dos capítulos: vidro escuro em vez de vidro creme ---------- */
/* O scrim era um retângulo de arestas duras que cortava a imagem a meio —
   lia-se como uma caixa colada por cima da render, não como parte dela.
   Passa a um degradê que morre no nada do lado do conteúdo: o texto continua
   a ter fundo onde precisa e a casa fica inteira. */
/* A caixa do ::before era o texto + 60px: por muito suave que o degradê
   fosse, acabava dentro do ecrã e a aresta via-se. Estende-se para lá da
   viewport dos lados que não interessam, e o degradê morre sozinho muito
   antes de lá chegar.

   SISTEMA, não cinco remendos (2026-09-22). Havia três desenhos diferentes
   de véu na mesma cena — um para 1/5, outro para 2/3, e o 4 partido. O 4
   estava partido justamente por ser um remendo: é o único capítulo alinhado
   à DIREITA (`right:var(--gutter)` em styles.css) e herdava uma caixa
   pensada para capítulos alinhados à esquerda. Os -1000px de folga ficavam
   a sair pela direita do ecrã, onde não fazem falta, e os -120px ficavam
   virados para DENTRO do plano — com o núcleo do degradê ainda a 78% de
   opacidade a acabar a direito nessa aresta. Era a costura vertical visível
   a x≈887 na folha de contacto do capítulo 4.

   Agora há um só degradê, parametrizado: a caligrafia é a mesma nos cinco,
   e o capítulo 4 usa-a ESPELHADA em vez de uma sua. As variáveis vivem no
   `.rs-chapter` e são herdadas pelo `::before`. */
.rs-chapter{
  --scrim-pad:-240px -1000px -300px -120px;   /* folga: para fora do ecrã do lado que não conta */
  --scrim-x:14%;   --scrim-y:52%;             /* foco do véu, junto ao texto */
  --scrim-w:52%;   --scrim-h:62%;             /* raio */
}
/* 1 e 5 assentam em baixo: o foco desce com eles. */
.rs-chapter[data-ch="1"],
.rs-chapter[data-ch="5"]{ --scrim-x:15%; --scrim-y:72%; --scrim-w:50%; --scrim-h:58%; }
/* 4 é o único à direita: a MESMA caligrafia, espelhada. */
.rs-chapter[data-ch="4"]{ --scrim-pad:-240px -120px -300px -1000px; --scrim-x:86%; }
.rs-chapter::before{inset:var(--scrim-pad)!important;
  background:radial-gradient(var(--scrim-w) var(--scrim-h) at var(--scrim-x) var(--scrim-y),
    rgba(5,7,13,.90) 0%, rgba(5,7,13,.74) 34%, rgba(5,7,13,.30) 58%, rgba(5,7,13,0) 78%)!important;
  border-radius:0;box-shadow:none}
/* Degradê radial, não linear, e sem backdrop-filter. Duas razões, as duas
   visíveis no ecrã antes de serem corrigidas: um linear-gradient acaba o
   seu 100% ao longo do eixo, por isso as arestas perpendiculares da caixa
   ficavam com alfa residual e desenhavam um retângulo; e o backdrop-filter
   recorta-se sempre à caixa, deixando uma costura mesmo onde o fundo já era
   transparente. O radial morre em todas as direções — não há caixa. */

/* SOMBRAS DO TEXTO — o segundo resto de v2 nesta cena. O `text-shadow` que
   vinha de styles.css é CREME (`rgba(244,239,228,.42)`), desenhado para
   texto escuro sobre uma render clara. Sobre a cena nocturna, com o texto
   já branco, era um halo claro à volta de letras claras: engordava a
   tipografia e não acrescentava contraste nenhum. Passa a sombra escura, a
   mesma família em toda a cena — difusa para separar do fundo, mais uma
   curta e fechada para o texto não "flutuar". */
.rs-chapter .display{text-shadow:0 2px 20px rgba(3,6,12,.88), 0 1px 3px rgba(3,6,12,.55)!important}
.rs-chapter .eyebrow,
.rs-chapter .rs-complement,
.rs-chapter .rs-indicators span{text-shadow:0 1px 12px rgba(3,6,12,.85)}

.rs-chapter{color:rgba(238,241,247,.78)}
.rs-chapter .display{color:#EEF1F7}
.rs-chapter .eyebrow{color:#19E5CE}
.rs-chapter .rs-complement{color:rgba(238,241,247,.72)}
.rs-chapter .rs-indicators span{color:rgba(238,241,247,.62);border-color:rgba(238,241,247,.22)}

/* OS TRÊS PONTOS DO CAPÍTULO 3 — eram três `<span>` num `flex-wrap` sem
   separador nenhum, numa coluna de 280-400px. O resultado, lido no ecrã e
   não no código: "APRESENTAÇÃO IMERSIVA RESERVAS E CONTACTOS" cabia numa
   linha e "EXPERIÊNCIA MOBILE-FIRST" caía para a seguinte — três itens a
   lerem-se como duas frases partidas ao meio. Passam a lista: um por linha,
   numerados, com um filete que os prende à coluna do texto. Numeração por
   contador CSS, para não haver números escritos no HTML que depois é preciso
   manter em quatro idiomas. */
.rs-chapter .rs-indicators{flex-direction:column;flex-wrap:nowrap;gap:0;counter-reset:rs-st;
  border-left:1px solid rgba(238,241,247,.18);padding-left:14px;margin-top:2px}
.rs-chapter .rs-indicators span{counter-increment:rs-st;display:flex;align-items:baseline;gap:10px;
  padding:7px 0;color:rgba(238,241,247,.72);line-height:1.35;
  border-bottom:1px solid rgba(238,241,247,.09)}
.rs-chapter .rs-indicators span:last-child{border-bottom:0}
.rs-chapter .rs-indicators span::before{content:counter(rs-st,decimal-leading-zero);
  color:#19E5CE;letter-spacing:.1em;flex:0 0 auto}
.rs-chapter .btn--primary{background:#C8FF2E;color:#07080D;border-color:#C8FF2E}
.rs-chapter .btn--ghost,
.rs-chapter .btn:not(.btn--primary){color:#EEF1F7;border-color:rgba(238,241,247,.3)}

/* o painel de demonstração do imóvel (rs-ui) também era creme.
   2026-09-27: deixou de ser um cartão e passou a ser informação PROJECTADA
   no vidro — ver o bloco "vidro" no fim deste ficheiro. */
.rs-ui{color:#EEF1F7}
.rs-ui h3,.rs-ui p,.rs-ui a{color:#EEF1F7}
.rs-ui .property-label,.rs-ui .property-availability{color:rgba(238,241,247,.55)}
.rs-ui button{color:rgba(238,241,247,.72);border-color:rgba(238,241,247,.22);background:transparent}
.rs-ui button[aria-pressed="true"]{color:#07080D;background:#EEF1F7}

/* Poster largo e sequência vertical passaram os dois a ser capturas reais
   da cena nocturna (reexportados em 2026-09-21 a partir do próprio WebGL,
   com setProgress a percorrer os 48 passos). Não levam graduação por CSS:
   um filtro por cima de fotogramas já nocturnos escurecia-os duas vezes. */

/* O botão fantasma ficava cinzento-claro sobre a render clara da casa:
   ilegível justamente no último plano, que é onde se pede a ação. */
.rs-chapter .btn:not(.btn--primary){background:rgba(7,8,13,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rs-chapter .btn:not(.btn--primary):hover{background:rgba(238,241,247,.12)}

/* Os medidores de desenvolvimento (fps e progresso) estavam visíveis na
   página publicada — apareciam por cima da cena no telemóvel. Passam a
   depender de um atributo explícito em <html>. */
.rs-fps,.rs-debug{display:none}
html[data-debug="1"] .rs-fps,html[data-debug="1"] .rs-debug{display:block}

/* ---- a passagem da Cena 02 para a Cena 03 ------------------------------
   Estava aqui um corte a direito, e não era subtil: a secção `.numbers`
   acaba em `--void` (quase preto) e a `.rs` começava com um gradiente CREME
   (`#f4efe6 → #ece4d5`, styles.css) por trás de uma cena nocturna. Entre
   as duas secções havia, literalmente, uma faixa cor de areia. Pior: o
   `.rs-stage::after` de finish.css punha ainda uma névoa creme sobre o
   quarto inferior do plano — sobre um jardim à noite lia-se como um véu
   leitoso por cima da imagem.

   Aqui o fundo da cena passa a continuar o preto da secção anterior, e a
   entrada e a saída são dois degradés: o de cima recebe a Cena 02, o de
   baixo entrega a secção seguinte (que é clara). A cena deixa de começar,
   passa a emergir. */
.rs{background:linear-gradient(180deg,var(--void) 0%,#080d18 16%,#060b16 78%,#0a0f1a 100%)!important}

/* véu de entrada: o topo do palco continua a cor da secção 02 e desvanece.
   É o que faz o primeiro fotograma nascer do escuro em vez de aparecer. */
.rs-stage::before{content:'';position:absolute;inset:0 0 auto;height:26%;
  background:linear-gradient(var(--void),rgba(7,8,13,.55) 42%,transparent);
  pointer-events:none;z-index:1}

/* saída: o creme de finish.css dá lugar a uma entrega escura->clara, mais
   alta e mais suave, para a secção "O Estúdio" não bater de frente. */
.rs-stage::after{height:34%!important;
  background:linear-gradient(transparent,rgba(6,11,22,.55) 46%,rgba(244,239,230,.14))!important}

/* o poster e a tela partilham o mesmo enquadramento; a troca entre os dois
   era um corte de 0.55s. Com a tela a entrar e o poster a sair ao mesmo
   tempo, e mais devagar, deixa de haver um instante em que se vê a
   substituição. */
.rs-canvas{transition:opacity .9s cubic-bezier(.22,.61,.36,1)!important}
.rs-poster{transition:opacity .9s cubic-bezier(.22,.61,.36,1)}
.rs--loaded .rs-poster{opacity:0}

/* ---- o mesmo sistema de véu, nas outras duas disposições ---------------
   Duas armadilhas que só se veem fora do desktop, e as duas vêm de o véu
   ser DIRECIONAL: ele foca-se onde o texto está e estende-se para fora do
   ecrã do lado oposto. Se a disposição muda e o véu não, fica ao contrário.

   1) Até 900px, styles.css alinha TODOS os capítulos à esquerda — incluindo
      o 4, que no desktop é o único à direita. A caligrafia espelhada que ele
      usa lá passa a estar virada ao contrário aqui: o foco ia parar a 86%
      (lado direito) com o texto à esquerda, e a folga de -1000px ia para
      fora do ecrã pelo lado errado. Volta ao desenho normal.
   2) Ainda até 900px, os capítulos 2, 3 e 4 sobem para a margem SUPERIOR
      (top: clamp(...) em styles.css) para deixarem a casa e a piscina no
      terço de baixo. Um véu centrado a 52% da altura fica por baixo deles.
      Sobe com eles. */
@media(max-width:900px){
  .rs-chapter{--scrim-y:64%; --scrim-x:16%; --scrim-w:66%; --scrim-h:60%}
  .rs-chapter[data-ch="4"]{--scrim-pad:-240px -1000px -300px -120px; --scrim-x:16%}
  .rs-chapter[data-ch="2"],
  .rs-chapter[data-ch="3"],
  .rs-chapter[data-ch="4"]{--scrim-y:34%}
  .rs-chapter[data-ch="1"],
  .rs-chapter[data-ch="5"]{--scrim-y:76%}
}

/* Em movimento reduzido a cena deixa de estar por trás do texto: o
   `.rs--static` desempilha os capítulos numa coluna normal, com a tela
   reduzida a uma imagem fixa por cima. Aí o véu não tem nada para proteger
   — e, pior, como o `::before` é absoluto e o capítulo passa a `static`, ele
   ancorava-se ao palco inteiro e pintava manchas escuras de 1000px por cima
   da coluna de texto. Não se desenha. */
.rs--static .rs-chapter::before{display:none!important}


/* ---- etiqueta da cena da villa ----------------------------------------
   A página numerava as secções 02, 02, 03, 04, 05, 06: dois "02" e nenhum
   "03", e a cena da villa — que é a terceira coisa que se vê — não tinha
   número nenhum. Daí a ambiguidade de "sessão 03". Passou a haver uma
   etiqueta aqui e a corrida passou a 02..08, seguida.
   O `.section-tag` de styles.css é de tema claro (cor `--bone-faint`, traço
   `--amber`): sobre a cena nocturna era invisível. */
.rs-tag{color:rgba(238,241,247,.42)!important;
  top:clamp(76px,10vh,104px);right:clamp(24px,5vw,72px);
  text-shadow:0 1px 10px rgba(3,6,12,.9);pointer-events:none}
.rs-tag::before{background:#19E5CE!important;opacity:.9}
@media(max-width:899px){.rs-tag{display:none}}

/* ---- movimento reduzido: a coluna editorial da visita ------------------
   Medido a 390px com `prefers-reduced-motion: reduce`: o capitulo 5 era
   PINTADO 169px acima do seu proprio lugar e caia por cima do capitulo 4.
   A causa e a mesma em todos: as regras por `data-ch` dao a cada capitulo um
   `bottom`/`top`/`left` proprio para a composicao FIXADA, e com
   `position:relative` um `bottom` que sobra desloca o desenho sem mexer no
   espaco que o elemento ocupa — o layout fica certo e a imagem fica errada,
   que e o pior dos dois mundos porque nenhum teste de fluxo o apanha.

   Aqui os seis voltam a ser uma coluna normal. E a seccao ganha as quatro
   paragens estaticas que o roteiro pede (exterior, atrio/estar,
   jantar/quintal, piscina): sem cena WebGL e sem pin, uma visita guiada que
   fosse so texto deixava de ser uma visita. */
/* Fora do movimento reduzido as paragens nao existem: a visita e a cena.
   Esta regra tem de vir ANTES do `@media`, senao ganha-lhe por ordem de
   origem e as paragens ficam escondidas justamente onde sao precisas — foi
   o que aconteceu a primeira vez (seis imagens no DOM, nenhuma visivel). */
.rs-still{display:none}

@media (prefers-reduced-motion: reduce){
  .rs-chapter[data-ch]{
    top:auto!important; right:auto!important; bottom:auto!important; left:auto!important;
    width:auto!important; max-width:min(640px,100%); margin-inline:0!important;
    align-items:flex-start!important; text-align:left!important;
    padding-block:clamp(26px,5vh,54px)!important;
  }
  .rs-chapter[data-ch] .rs-complement,
  .rs-chapter[data-ch] .display{margin-left:0!important; text-align:left!important}
  .rs-still{
    display:block; width:100%; height:clamp(200px,34vh,320px);
    object-fit:cover; object-position:50% 45%;
    border-radius:14px; margin:0 0 clamp(16px,3vh,28px); background:#0b1018;
  }
}


/* ---- AMBIENTE · Dia/Noite (Cena 03, Beat 05, 2026-09-25) --------------
   O controlo vive DENTRO do `<article data-ch="5">`, por isso não tem regra
   de visibilidade própria: herda `opacity`, `inert` e `pointer-events` do
   capítulo do quintal, que os dois caminhos de render já escrevem. Aqui só
   mora a aparência.
   Sem `position:fixed` e sem `touch-action`: o palco da villa não captura
   ponteiro (o `setPointerCapture` deste projecto é do `path.js`, na Estação
   04), e um controlo que se põe fora do fluxo do capítulo perderia a herança
   acima, que é justamente o que o mantém honesto. */
.rs-ambiente{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:clamp(18px,3vh,30px);
}
.rs-ambiente-rotulo{
  font:500 10px/1 var(--ff-mono,ui-monospace,monospace);
  letter-spacing:.2em; text-transform:uppercase; color:rgba(240,244,255,.60);
}
.rs-ambiente-botoes{
  display:inline-flex; gap:3px; padding:3px;
  border:1px solid rgba(240,244,255,.20); border-radius:999px;
  background:rgba(7,8,13,.46); backdrop-filter:blur(8px);
}
.rs-ambiente-btn{
  appearance:none; -webkit-appearance:none; border:0; cursor:pointer;
  border-radius:999px; padding:9px 20px; background:transparent;
  color:rgba(240,244,255,.74);
  font:500 11px/1 var(--ff-mono,ui-monospace,monospace);
  letter-spacing:.16em; text-transform:uppercase;
  transition:background-color .22s ease,color .22s ease;
}
.rs-ambiente-btn:hover{ color:#fff }
.rs-ambiente-btn[aria-pressed="true"]{ background:#F0F4FF; color:#07080D }
.rs-ambiente-btn:focus-visible{ outline:3px solid #C8FF2E; outline-offset:3px }
@media (prefers-reduced-motion: reduce){
  .rs-ambiente-btn{ transition:none }
}
/* 2026-10-08: o controlo passou para o capítulo 1 (`data-ch="1"`), entre o
   complemento e o CTA "Entrar na demonstração". A herança de visibilidade
   descrita acima é a mesma, só que do capítulo de entrada. Aqui fica mais
   perto do texto e afasta o CTA um pouco. */
.rs-chapter[data-ch="1"] .rs-ambiente{ margin-top:clamp(14px,2.2vh,22px) }
.rs-chapter[data-ch="1"] .rs-ambiente + .btn-row{ margin-top:clamp(16px,2.6vh,26px) }

/* REVER no fim da visita: secundário de propósito — os dois CTAs de contacto
   continuam a ser a ação principal; isto é uma ligação discreta por baixo. */
.rs-rever{
  display:flex; flex-wrap:wrap; gap:6px 20px;
  margin-top:clamp(14px,2.2vh,22px);
}
.rs-rever-btn{
  appearance:none; -webkit-appearance:none; border:0; background:none; cursor:pointer;
  padding:8px 0; color:rgba(240,244,255,.72);
  font:500 11px/1.2 var(--ff-mono,ui-monospace,monospace);
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:underline; text-decoration-color:rgba(240,244,255,.28);
  text-underline-offset:5px;
  transition:color .2s ease,text-decoration-color .2s ease;
}
.rs-rever-btn[hidden]{ display:none }
.rs-rever-btn:hover{ color:#fff; text-decoration-color:#C8FF2E }
.rs-rever-btn:focus-visible{ outline:3px solid #C8FF2E; outline-offset:3px }
@media (prefers-reduced-motion: reduce){ .rs-rever-btn{ transition:none } }

/* A prova do quintal no caminho conservador: a captura de DIA por cima da de
   NOITE, dentro do mesmo `.rs-poster`. Quem a acende é o `fallback.js`, com
   o mesmo número que conduz o resto — nada de classes que fiquem presas. */
.rs-poster .rs-dia{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:inherit; opacity:0; pointer-events:none;
}

/* ---- as vinhetas de costura em modo DIA (Cena 03, Fase 1.1) ------------
   `.rs-stage::before/::after` e o `.rs::before` que so existe em movimento
   reduzido foram desenhados contra o poster nocturno: sao escuros porque a
   cena tem de nascer do preto da Cena 02 e entregar o creme de "O Estúdio".
   Sobre a captura de DIA o mesmo escuro reescreve a prova — medido na folha
   reduzida a 1440, a imagem de dia (ceu creme, serras azuis, relva verde)
   chegava ao ecra como um cinzento que se confunde com noite, porque num
   palco de 540px as duas pontas escuras comem mais de metade da altura.
   Nao se apagam: baixam. A entrega entre secçoes continua a existir, so
   deixa de mandar na imagem. */
.rs[data-ambiente="day"] .rs-stage::before{ opacity:.3 }
.rs[data-ambiente="day"] .rs-stage::after{ opacity:.45 }
@media (prefers-reduced-motion: reduce){
  .rs--static[data-ambiente="day"]::before{ opacity:.45 }
}


/* =======================================================================
   O painel do Beat 02 como VIDRO, não como modal (2026-09-27)
   -----------------------------------------------------------------------
   O teste que ele reprovava: uma captura isolada do painel podia ser colada
   sobre qualquer fundo sem mudar nada. Era `rgba(10,15,28,.82)` chapado, com
   moldura de 1px a toda a volta, fotografia a ocupar ~40% da altura e
   separadores tão fortes como o texto. Lia-se como um `<dialog>` por cima da
   sala, e não como algo que pertence àquela sala.

   Cinco coisas, e nenhuma delas é "mais opacidade":

   1. O FUNDO É UMA CURVA, não um valor. Quase transparente em cima (onde só
      há a etiqueta) e denso em baixo (onde está a copy que tem de se ler).
      É assim que se comporta vidro fumado com luz por trás: a densidade
      aparente depende do que está lá atrás, não é constante.
   2. NÃO HÁ MOLDURA. A caixa de 1px a toda a volta é o que faz um rectângulo
      ler-se como cartão. Fica só a ARESTA ESQUERDA acesa — é a linha do vidro,
      e é de lá que o painel entra.
   3. SOMBRA DE CONTACTO COERENTE. A sala é quente e a luz vem da esquerda e
      de baixo (candeeiro de pé + suspensões). A sombra é quente
      (`rgba(20,10,4,...)`), cai para baixo e para a direita, e é larga e
      suave — não é o `box-shadow` neutro de um componente.
   4. PERSPECTIVA LIGEIRA. `rotateY(-4.2deg)` com origem à direita: o
      suficiente para o painel partilhar a fuga da sala, pouco o bastante
      para nenhuma linha de texto perder o pé. Acima de 4.5° começa a
      notar-se na leitura — foi medido a olho e é onde parei.
   5. A FOTOGRAFIA ENCOLHE. Ocupava 19vh e lia-se como um segundo site dentro
      do site. Passa a uma tira 21:9, dessaturada e um pouco mais escura: é
      PROVA, não é o assunto.
   ======================================================================= */
.rs-ui{
  background: linear-gradient(180deg,
      rgba(10,15,28,.26) 0%,
      rgba(9,13,25,.58) 30%,
      rgba(7,10,20,.74) 62%,
      rgba(6,9,18,.76) 88%,
      rgba(6,9,18,.58) 100%) !important;
  border: 0;
  border-left: 1px solid rgba(200,255,46,.44);
  border-radius: 2px;
  padding: 0 0 clamp(6px,.8vw,12px);
  -webkit-backdrop-filter: blur(17px) saturate(1.14);
  backdrop-filter: blur(17px) saturate(1.14);
  box-shadow:
    0 30px 66px -26px rgba(20,10,4,.66),
    -2px 0 16px -6px rgba(200,255,46,.30),
    0 1px 0 rgba(238,241,247,.07) inset;
  transform-origin: right center;
  /* entra A PARTIR da linha do vidro: com `--ui-a` a 0 está deslocado para a
     direita e mais inclinado; a `1` assenta. `--ui-a` é escrito por
     `story.js` com a MESMA fracção da opacidade, logo é função de `p` e
     recua com o scroll. O `1` de omissão garante que, sem JS, assenta. */
  transform:
    perspective(1400px)
    rotateY(calc(-4.2deg - (1 - var(--ui-a, 1)) * 5deg))
    translate3d(calc((1 - var(--ui-a, 1)) * 34px), 0, 0);
}
/* o reflexo: uma banda diagonal muito ténue, que é o que distingue uma
   superfície de vidro de um rectângulo pintado. Não pisca nem se move — um
   reflexo animado sem a câmara se mexer seria mentira. */
.rs-ui::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg,
      rgba(238,241,247,0) 34%,
      rgba(238,241,247,.055) 47%,
      rgba(238,241,247,.015) 56%,
      rgba(238,241,247,0) 68%);
  mix-blend-mode: screen;
}
/* o tick de ligação à fachada passa à cor da aresta acesa */
.rs-ui::before{ background: rgba(200,255,46,.34) !important; }

.rs-ui > *{ position: relative; z-index: 1; }

.rs-ui .property-label{
  padding: clamp(14px,1.3vw,20px) clamp(16px,1.5vw,24px) clamp(10px,1vw,14px);
  color: rgba(238,241,247,.52);
  letter-spacing: .16em;
}
.rs-ui .property-photo{
  height: auto;
  min-height: 0;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  filter: saturate(.82) brightness(.9) contrast(1.04);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, rgba(0,0,0,.35) 100%);
  mask-image: linear-gradient(180deg, #000 78%, rgba(0,0,0,.35) 100%);
}
.rs-ui .property-info{ padding: clamp(16px,1.5vw,24px) clamp(16px,1.5vw,24px) 0; }
.rs-ui .property-info h3{ margin: 0 0 8px; letter-spacing: -.02em; }
.rs-ui .property-info p{ color: rgba(238,241,247,.74); margin: 10px 0; }
/* separadores: eram `#d9cfbf`, ou seja tão fortes como o texto. Passam a
   uma régua única e ténue, com mais ar em vez de mais linha. */
.rs-ui .property-tabs{
  border-block: 0;
  border-top: 1px solid rgba(238,241,247,.10);
  margin: clamp(14px,1.3vw,20px) 0 0;
  padding: clamp(12px,1.1vw,16px) 0 0;
  gap: clamp(14px,1.4vw,22px);
}
.rs-ui .property-info a{
  border-top: 1px solid rgba(238,241,247,.10);
  margin-top: clamp(12px,1.1vw,18px);
  padding-top: clamp(12px,1.1vw,16px);
  color: #C8FF2E;
  text-decoration: none;
}
.rs-ui .property-info a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.rs-ui .property-availability{ color: rgba(238,241,247,.42) !important; }

/* Movimento reduzido: sem deslocamento de entrada. A perspectiva fica — é
   composição, não animação. */
@media (prefers-reduced-motion: reduce){
  .rs-ui{ transform: perspective(1400px) rotateY(-4.2deg); }
}

/* ---- visita no telemóvel: o céu sai de cena (2026-10-21) -----------------
   Na sequência em retrato o terço de cima de cada fotograma é céu low-poly,
   árvores facetadas e as luzes das casas ao longe, que a 750px se leem como
   quadrados brancos soltos ("blocos quadrados"). É também onde os capítulos
   2, 3 e 4 se sentam, por cima do candeeiro e da parede clara do interior,
   e aí o texto perdia contraste. O véu de entrada desce até meio do ecrã e
   fica mais denso no topo: a casa e a piscina ficam com o terço de baixo, que
   é onde estão, e o texto passa a ter sempre fundo escuro por trás. */
@media (max-width: 820px) {
  .rs--sequence:not(.rs--static) .rs-stage::before {
    height: 50%;
    background: linear-gradient(180deg,
      var(--void) 0%,
      rgba(7, 8, 13, .9) 24%,
      rgba(7, 8, 13, .62) 52%,
      rgba(7, 8, 13, .22) 78%,
      transparent 100%);
  }
  .rs--sequence:not(.rs--static)[data-ambiente="day"] .rs-stage::before { opacity: .55; }
}

/* ==== VISITA GUIADA no telemóvel (2026-10-21, à noite) ====================
   No telemóvel a secção já não fica presa ao scroll. O `fallback.js` põe
   `rs--static rs--visita`: um bloco de vídeo no topo (`scroll/visita.js`, os
   clipes de capítulo a tocar sozinhos em sequência) e os capítulos
   empilhados por baixo. A coluna é a do movimento reduzido, mas aqui o
   movimento NÃO está reduzido: as regras que a fazem (finish.css e
   villa-night.css, todas dentro de `prefers-reduced-motion`) repetem-se
   abaixo para a classe. Quem mexer numa tem de ver a outra. */
.rs--visita .rs-stage{position:relative;height:auto;overflow:visible}
.rs--visita .rs-stage::before,.rs--visita .rs-stage::after{display:none!important}
.rs--visita .rs-canvas{display:none}
.rs--visita .rs-overlays{position:relative;display:flex;flex-direction:column}
.rs--visita .rs-overlays>.rs-chapter[data-ch="1"],
.rs--visita .rs-overlays>.rs-chapter[data-ch="2"],
.rs--visita .rs-overlays>.rs-chapter[data-ch="3"]{order:1}
.rs--visita .rs-overlays>.rs-ui{order:2;display:block!important;position:relative!important;inset:auto!important;
  top:auto!important;right:auto!important;transform:none!important;opacity:1!important;visibility:visible!important;
  pointer-events:auto!important;width:auto!important;max-width:520px;margin:0 var(--gutter) 30px}
.rs--visita .rs-overlays>.rs-chapter[data-ch="4"],
.rs--visita .rs-overlays>.rs-chapter[data-ch="5"],
.rs--visita .rs-overlays>.rs-chapter[data-ch="6"]{order:3}
.rs--visita .rs-ui .property-photo{width:100%;height:auto}
.rs--visita .rs-chapter[data-ch]{
  position:relative!important;inset:auto!important;
  top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  width:auto!important;max-width:min(640px,100%);margin-inline:0!important;
  opacity:1!important;filter:none!important;transform:none!important;pointer-events:auto!important;
  align-items:flex-start!important;text-align:left!important;
  padding:clamp(26px,5vh,54px) var(--gutter)!important;
}
.rs--visita .rs-chapter[data-ch] .rs-complement,
.rs--visita .rs-chapter[data-ch] .display{margin-left:0!important;text-align:left!important}
.rs--visita .rs-still{
  display:block;width:100%;height:clamp(200px,34vh,320px);
  object-fit:cover;object-position:50% 45%;
  border-radius:14px;margin:0 0 clamp(16px,3vh,28px);background:#0b1018;
}
/* o capítulo 1 tem o vídeo logo por cima: a imagem dele repetia a casa */
.rs--visita .rs-chapter[data-ch="1"] .rs-still{display:none}

/* o bloco de vídeo: quase um ecrã, a casa no terço de baixo de cada plano */
.rs--visita .rs-poster{position:relative;display:block;width:100%;height:min(86svh,215vw);
  overflow:hidden;background:var(--void)}
.rs--visita .rs-poster img,
.rs--visita .rs-visita-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover!important;object-position:50% 58%}
.rs--visita .rs-visita-video{opacity:0;pointer-events:none}
/* nasce do preto da secção anterior e entrega o texto do capítulo 1, que
   sobe para cima do fim do vídeo */
.rs--visita .rs-poster::before{content:"";position:absolute;inset:0 0 auto;height:20%;z-index:3;
  pointer-events:none;background:linear-gradient(var(--void),rgba(7,8,13,0))}
.rs--visita .rs-poster::after{content:"";position:absolute;inset:auto 0 0;height:50%;z-index:3;
  pointer-events:none;background:linear-gradient(rgba(7,8,13,0),rgba(7,9,15,.74) 55%,#080b14)}
.rs--visita .rs-overlays>.rs-chapter[data-ch="1"]{margin-top:-24svh!important;z-index:4}

/* pausa (WCAG 2.2.2): duas barras a tocar, um triângulo em pausa */
.rs-visita-pausa{display:none}
.rs--visita .rs-visita-pausa{position:absolute;z-index:5;top:14px;right:14px;
  display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;
  border:1px solid rgba(240,244,255,.3);background:rgba(7,8,13,.52);color:#F0F4FF;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rs--visita .rs-visita-pausa[hidden]{display:none}
.rs-visita-pausa::before{content:"";display:block;width:12px;height:14px;
  background:linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px,currentColor 8px 12px)}
.rs-visita-pausa[aria-pressed="true"]::before{width:0;height:0;margin-left:4px;background:none;
  border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor}
.rs-visita-pausa:focus-visible{outline:3px solid #C8FF2E;outline-offset:3px}

/* o capítulo 6 repetia a piscina do 5: fica a do 5 */
.rs--visita .rs-chapter[data-ch="6"] .rs-still{display:none}
/* A travessia na coluna do telemóvel (`html.casa-visita`, ver main.js): o
   bloco "Do interesse à ação" fica no fluxo com folga de secção, e não com
   os dois ecrãs quase vazios do movimento reduzido (lidos como buraco). Da
   água da travessia só fica o anel na barra da Estação 04, como com o
   mergulho (`dive.css`): os fios e a lâmina passavam por cima do texto. */
html.casa-visita .wx-pitch.wx-pitch--travessia.wx-pitch--estatico{
  margin:clamp(88px,18svh,160px) auto clamp(72px,14svh,140px);min-height:0}
html.casa-visita .wx-pool,html.casa-visita .wx-fio,html.casa-visita .wx-grelha,
html.casa-visita .wx-drop,html.casa-visita .wx-canal{display:none!important}