/* ===========================================================================
   CASA/ (2026-10-22): a visita completa, numa página só dela.
   ---------------------------------------------------------------------------
   A landing mostra uma prévia (secção 03, casa-previa.js) e o botão
   "Explorar demonstração" traz aqui. Esta página carrega o mesmo conjunto
   afinado da visita (villa-night, water, dive, cauda…) e direcao.css; o que
   está neste ficheiro é só o que a página tem de seu:
   1. o cabeçalho de saída: voltar ao site e "Quero um site assim", sempre à
      vista, para ninguém ter de atravessar a casa para sair dela;
   2. o fecho (`#estudio`, destino do mergulho), com o fundo `--ink` contra o
      qual o water.css e o dive.css foram afinados;
   3. o botão de simulação do painel do imóvel e a sua nota;
   4. o rodapé curto.
   ======================================================================== */

/* ---- 1. cabeçalho de saída ---------------------------------------------- */
.casa-topo .wrap{display:flex;align-items:center;gap:16px}
.casa-acoes{display:flex;align-items:center;gap:8px;margin-left:auto}
.casa-voltar{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;
  border-radius:999px;color:rgba(238,241,247,.74);text-decoration:none;
  font:500 14px/1 var(--ff-ui);transition:color .16s ease-out,background-color .16s ease-out;
}
.casa-voltar:hover{color:var(--paper);background:var(--ink-2)}
.casa-voltar-seta{font-size:16px;line-height:1}
.casa-cta{
  display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;
  background:var(--volt);color:var(--void);text-decoration:none;white-space:nowrap;
  font:600 14px/1 var(--ff-ui);transition:background-color .16s ease-out;
}
.casa-cta:hover{background:var(--volt-hover)}
.casa-cta:active{background:var(--volt-press)}
.casa-voltar:focus-visible,
.casa-cta:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.casa-topo .lang-switch{margin-left:8px}
/* telemóvel: a seta fica e o texto continua a ser lido pelo leitor de ecrã;
   o nome da marca sai do ecrã mas não do leitor (é o nome do link). Abaixo
   de 481 px o logótipo sai por inteiro: a seta já leva ao mesmo sítio, e
   logótipo + seta + botão + quatro idiomas não cabem em 350 px (medido: 394). */
@media (max-width:620px){
  .casa-topo .marca-nome,
  .casa-voltar-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .casa-voltar{width:44px;padding:0;justify-content:center}
  .casa-cta{padding:0 14px;font-size:13px}
  .casa-topo .lang-switch{margin-left:2px}
  .casa-acoes{gap:4px}
}
@media (max-width:480px){
  .casa-topo .brand{display:none}
  .casa-acoes{margin-left:0}
  .casa-topo .lang-switch{margin-left:auto}
}
@media (max-width:374px){
  .casa-cta{padding:0 10px;font-size:12px}
  .casa-topo .lang-switch a{padding-inline:3px}
}

/* movimento reduzido (ou sem ScrollTrigger) no desktop: não há pista, os
   capítulos ficam empilhados e cada um traz a sua imagem. O palco ficava por
   cima deles como uma imagem parada com a faixa de água do fecho (fallback.js
   põe-na de propósito, para ligar à secção seguinte da landing antiga); aqui
   era a primeira coisa da página e lia-se como um corte de água sem contexto.
   O modo vídeo do telemóvel (`rs--visita`) também é `rs--static` e fica. */
.pagina-casa .rs--static:not(.rs--visita) :is(.rs-poster, .rs-canvas, .rs-water){display:none!important}
/* o cabeçalho é fixo: sem o palco por cima, a primeira imagem nascia debaixo dele */
.pagina-casa .rs--static:not(.rs--visita){padding-top:clamp(72px,10vh,104px)}

/* o título da página existe para leitores de ecrã e motores de busca; o
   título visível é o do primeiro capítulo da visita */
.casa-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- 2. o fecho ----------------------------------------------------------
   O pin do palco (story.js) é `pinSpacing:false` e acaba quando o fundo de
   `.rs` chega ao topo do ecrã; nesse instante o fecho tem de ocupar o ecrã
   inteiro, ou a página acaba antes de o mergulho terminar. Na landing isto
   resolvia-se sozinho porque a secção seguinte era longa. Ao soltar, o
   palco fica deslocado para baixo do fim de `.rs` (por transform) e, sem o
   corte, acrescentava ~180 px vazios por baixo do rodapé (medido: altura do
   documento 6840 com o rodapé a acabar em 6545). Debaixo do fecho opaco o
   palco já não se vê, por isso cortá-lo não muda nada no ecrã. O mesmo para
   o reflexo do mergulho (`.dv-reflexo`, dive.css), que tem 120% da altura do
   ecrã e na landing cabia numa secção longa: aqui passava o fundo do fecho. */
.pagina-casa .rs,
.casa-fim{overflow:hidden;overflow:clip}
.casa-fim{
  position:relative;background:var(--ink);color:var(--paper);
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(120px,16vh,200px) 0 clamp(96px,12vh,160px);
}
.casa-fim-dentro{
  width:var(--conteudo);margin-inline:auto;
  display:flex;flex-direction:column;align-items:flex-start;
}
.casa-fim-tag{margin:0 0 24px;font:500 13px/1.2 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim)}
.casa-fim-titulo{
  margin:0;max-width:20ch;font-family:var(--ff-display);font-weight:500;
  font-size:var(--t-d2);line-height:1;letter-spacing:-.025em;color:var(--paper);
}
.casa-fim-texto{margin:24px 0 0;max-width:58ch;font:400 18px/1.6 var(--ff-ui);color:var(--paper)}
.casa-fim-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.casa-fim-nota{margin:32px 0 0;max-width:62ch;font:400 15px/1.5 var(--ff-ui);color:var(--paper-dim)}
@media (max-width:620px){
  .casa-fim-texto{font-size:17px}
  .casa-fim-acoes{flex-direction:column;align-items:stretch;width:100%}
}

/* ---- 3. simulação no painel do imóvel ------------------------------------
   Era um link "Pedir visita →" que não levava a lado nenhum. Passa a botão
   que diz o que um site real faria, sem enviar nada. Mesmo desenho que o
   link tinha (villa-night.css, `.rs-ui .property-info a`). */
.rs-ui .property-simular{
  display:block;width:100%;margin-top:clamp(12px,1.1vw,18px);padding:clamp(12px,1.1vw,16px) 0 0;
  border:0;border-top:1px solid rgba(238,241,247,.10);background:none;text-align:left;
  color:#C8FF2E;font:700 13px/1.3 var(--ff-ui);cursor:pointer;
}
.rs-ui .property-simular:hover{text-decoration:underline;text-underline-offset:4px}
.rs-ui .property-simular:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.rs-ui .property-simular[aria-expanded="true"]{color:rgba(238,241,247,.74)}
.rs-ui .property-simular-nota{margin:10px 0 0;font-size:13px;line-height:1.5;color:rgba(238,241,247,.74)}
.rs-ui [data-property-content][hidden],
.rs-ui .property-simular-nota[hidden]{display:none}

/* ---- 4. rodapé ----------------------------------------------------------- */
.casa-rodape{background:var(--void);border-top:1px solid var(--rule);padding:28px 0}
.casa-rodape .wrap{width:var(--conteudo);margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;
  font:400 14px/1.4 var(--ff-ui);color:var(--paper-dim)}
.casa-rodape a{color:var(--paper-dim);text-decoration:none}
.casa-rodape a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:4px}
.casa-rodape a:focus-visible{outline:2px solid var(--paper);outline-offset:3px}