/* ==========================================================================
   Perumnas · landing page de teste
   Feita a partir do Figma "Perumnas - Real Estate Website Design":
   frame "Website" (5:32, 1440 px) e frame "Responsive" (5:31, 375 px).

   Ordem do ficheiro:
   1. Tokens do design (cores, tipografia, espaços) e do movimento
   2. Base
   3. Peças comuns (container, títulos, texto, logótipo, ligações, botão Menu)
   4. Barra flutuante e menu do telemóvel
   5. Secções, pela ordem da página
   6. Animações (entradas, revelações ao scroll, estados de hover)
   7. Movimento reduzido
   8. Pontos de rutura (768 px, 1024 px, 1200 px)
   9. Casas: cartões da galeria e página de cada casa (14-09-2026)
   10. Formulários: interesse numa casa e contacto (16-09-2026)
   11. Galeria ligada ao scroll: presa no computador, a deslizar no telemóvel (16-09-2026)

   Abordagem: primeiro telemóvel (375 px), depois computador (1440 px).
   Os tamanhos que mudam entre os dois usam clamp(), que cresce de forma
   contínua entre os 375 px e os 1440 px de largura de ecrã.
   As animações mexem só em transform, opacity e clip-path, para o layout
   ficar sempre igual ao do Figma. A única exceção é a altura das respostas
   das perguntas frequentes, que só muda quando alguém carrega.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* Cores (estilos do Figma: Neutral/...) */
  --neutral-900: #12161d;  /* títulos */
  --neutral-600: #61656e;  /* texto corrido */
  --neutral-100: #e5e5e6;  /* linhas e contornos */
  --neutral-25:  #fafafb;  /* fundo do rodapé */
  --neutral-0:   #ffffff;
  --sky:         #5383a9;  /* degradê azul do topo do hero */
  --paper:       #fffaf0;  /* fundo das secções com formulário (pedido do Bernardo, 16-09-2026; era #fefefa) */
  --danger:      #a8352a;  /* erros dos formulários, o mesmo vermelho do painel */

  /* Tipografia: Inter Display (Inter no tamanho ótico 32) */
  --font: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --regular: 400;
  --medium: 500;

  /* Escala tipográfica: telemóvel -> computador */
  --display-size: clamp(44px, 34.14px + 2.629vw, 72px);   /* hero: 44/52 -> 72/80 */
  --display-lh:   clamp(52px, 42.14px + 2.629vw, 80px);
  --h1-size: clamp(36px, 33.18px + 0.751vw, 44px);        /* títulos de secção: 36/48 -> 44/52 */
  --h1-lh:   clamp(48px, 46.59px + 0.376vw, 52px);
  --h2-size: clamp(24px, 19.77px + 1.127vw, 36px);        /* números: 24/32 -> 36/48 */
  --h2-lh:   clamp(32px, 26.37px + 1.502vw, 48px);
  --h3-size: clamp(20px, 18.59px + 0.376vw, 24px);        /* subtítulos e perguntas: 20/28 -> 24/32 */
  --h3-lh:   clamp(28px, 26.59px + 0.376vw, 32px);
  --p1-size: 18px;  --p1-lh: 26px;                         /* texto corrido */
  --lbl1-size: 16px; --lbl1-lh: 16px;                      /* botões e ligações */
  --lbl2-size: 14px; --lbl2-lh: 14px;                      /* rodapé legal */

  /* Espaços */
  --gutter: clamp(20px, 5.556vw, 80px);     /* margem lateral: 20 px -> 80 px */
  --section-y: clamp(60px, 8.333vw, 120px); /* espaço vertical: 60 px -> 120 px */
  --radius: 8px;
  --radius-scaled: clamp(2px, 0.556vw, 8px); /* raio da colagem, que encolhe com ela */
  --content-max: 1280px;
  --pin-title-top: 112px;   /* onde os títulos presos param, abaixo da barra flutuante */

  /* Movimento: afinar aqui a velocidade e o carácter de toda a página */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* arranque rápido, chegada longa */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* para abrir e fechar */
  --dur-fast: 240ms;    /* hovers e pequenos estados */
  --dur-base: 600ms;    /* menu e perguntas */
  --dur-slow: 1000ms;   /* entradas ao scroll */
  --dur-hero: 1400ms;   /* entrada do hero */
  --stagger: 110ms;     /* atraso entre elementos encadeados */
  --reveal-y: 48px;     /* distância que os blocos sobem ao entrar */
  --dur-count: 1800ms;  /* contagem dos números */
  --dur-scroll: 1600ms; /* scroll suave mais longo (os saltos curtos demoram 600 ms) */
  --ease-scroll: cubic-bezier(0.7, 0, 0.2, 1);  /* curva do scroll suave: arranque firme, chegada longa */
  --dur-page-out: 420ms; /* véu a tapar a página que sai */
  --dur-page-in: 700ms;  /* véu a destapar a página que chega */
}

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Com JavaScript, o scroll suave é feito pelo main.js, com a curva da página */
html.js { scroll-behavior: auto; }
html.reduced-motion { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Página parada por baixo do menu de ecrã inteiro. O espaço da barra de scroll
   é compensado, para nada saltar para o lado em ecrãs com barra visível. */
.scroll-locked, .scroll-locked body { overflow: hidden; }
.scroll-locked body { padding-right: var(--lock-gap, 0px); }
.scroll-locked .float-bar { right: var(--lock-gap, 0px); }

body {
  margin: 0;
  font-family: var(--font);
  font-variation-settings: "opsz" 32;  /* força o corte "Display" da Inter */
  font-weight: var(--regular);
  font-size: var(--p1-size);
  line-height: var(--p1-lh);
  color: var(--neutral-900);
  background: var(--neutral-0);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }   /* o atributo hidden ganha sempre a quem define display */
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius);
  background: var(--neutral-900); color: var(--neutral-0);
}
.skip-link:focus { top: 16px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Quebras de linha que só existem num dos desenhos */
.br-desktop { display: none; }

/* 3. PEÇAS COMUNS ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-title {
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--medium);
  color: var(--neutral-900);
}

.text { color: var(--neutral-600); font-size: var(--p1-size); line-height: var(--p1-lh); }

/* Logótipo: caixa com as medidas do Figma e o SVG a sair ligeiramente dela,
   tal como no ficheiro (inset -4.7% em cima, -0.93% à direita, -4% em baixo). */
.logo { position: relative; display: block; flex: none; }
.logo__box { position: absolute; top: -4.7%; right: -0.93%; bottom: -4%; left: 0; }
.logo__box img { width: 100%; height: 100%; }
.logo--nav    { width: 111.253px; height: 26px; }   /* telemóvel */
.logo--footer { width: 136.926px; height: 32px; }

/* Ligações com sublinhado que cresce da esquerda */
.link { position: relative; display: inline-block; }
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur-base) var(--ease-out);
}
.link:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
/* Na barra, a ligação da secção que está a meio do ecrã fica sublinhada (main.js, bloco 7) */
.link.is-current::after { transform: scaleX(1); transform-origin: left center; }

/* Botão Menu, com o ícone exportado do Figma transformado em três barras que viram X */
.menu-button {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 0; border-radius: 25px;
  background: var(--neutral-0); color: var(--neutral-900);
  font-size: var(--lbl1-size); line-height: var(--lbl1-lh); font-weight: var(--medium);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}
.menu-button:active { transform: scale(0.96); }
.menu-icon { width: 20px; height: 20px; flex: none; overflow: visible; }
.menu-icon__bar {
  fill: currentColor;
  transform-box: fill-box; transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
.menu-open .menu-icon__bar--top { transform: translateY(4.16667px) rotate(45deg); }
.menu-open .menu-icon__bar--mid { transform: scaleX(0); opacity: 0; }
.menu-open .menu-icon__bar--bot { transform: translateY(-4.16667px) rotate(-45deg); }

/* Versão escura do botão, para a barra flutuante */
.menu-button--dark { background: var(--neutral-900); color: var(--neutral-0); }

/* 4. BARRA FLUTUANTE E MENU (não desenhados no Figma) ------------------------ */

/* Barra que aparece ao subir a página depois do hero */
.float-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 45;
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.float-bar.is-visible { transform: none; }
.float-bar::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--neutral-100);
  transition: opacity var(--dur-fast) linear;
}
.float-bar__inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
}
/* Ordem do HTML: logótipo, ligações (tablet e computador), botão Menu (telemóvel) */
.float-bar__logo { display: block; }
.float-bar__links { display: none; }
.logo__box--light { opacity: 0; transition: opacity var(--dur-fast) linear; }
.logo__box--dark  { transition: opacity var(--dur-fast) linear; }

/* Menu de ecrã inteiro aberto (telemóvel): o botão e o logótipo ficam por cima
   dele até ele acabar de fechar, e a barra fica transparente e clara */
@media (max-width: 767px) {
  .menu-active .float-bar, .menu-active .navbar { z-index: 60; }
  .menu-open .float-bar::before { opacity: 0; }
  .menu-open .float-bar .logo__box--dark { opacity: 0; }
  .menu-open .float-bar .logo__box--light { opacity: 1; }
  .menu-open .float-bar .menu-button--dark { background: var(--neutral-0); color: var(--neutral-900); }
}

/* Menu: no telemóvel é um ecrã inteiro que abre em círculo a partir do botão */
.site-menu {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 104px 20px 32px;
  overflow-y: auto; overscroll-behavior: contain;
  color: var(--neutral-0);
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(83, 131, 169, 0.55) 0%, rgba(83, 131, 169, 0) 60%),
    var(--neutral-900);
  clip-path: circle(0px at var(--menu-x, 100%) var(--menu-y, 0%));
  transition: clip-path 700ms var(--ease-in-out);
}
.site-menu[hidden] { display: none; }
.site-menu.is-open { clip-path: circle(150vmax at var(--menu-x, 100%) var(--menu-y, 0%)); }

.site-menu__list { display: grid; gap: 4px; }
.site-menu__list a {
  position: relative;
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 0;
  font-size: var(--h1-size); line-height: var(--h1-lh); font-weight: var(--medium);
}
.site-menu__num {
  font-size: var(--lbl2-size); line-height: var(--lbl2-lh);
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}
.site-menu__item,
.site-menu__footer {
  opacity: 0; transform: translateY(32px);
  transition: opacity 400ms var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.site-menu.is-open .site-menu__item,
.site-menu.is-open .site-menu__footer {
  opacity: 1; transform: none;
  transition-delay: calc(220ms + var(--i, 0) * 70ms);
}
.site-menu__footer { --i: 3; color: rgba(255, 255, 255, 0.6); font-size: var(--lbl1-size); line-height: 24px; }

/* Véu entre páginas: tapa a página que sai e a que chega até estar no sítio
   certo (main.js, blocos 7 e 9). Sem JavaScript nunca aparece. */
.page-veil {
  position: fixed; inset: 0; z-index: 95;
  background: var(--neutral-0);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-page-in) var(--ease-out), visibility 0s linear var(--dur-page-in);
}
.js.is-arriving .page-veil {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: none;
}
.is-leaving .page-veil {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--dur-page-out) var(--ease-in-out);
}

/* 5. SECÇÕES --------------------------------------------------------------- */

/* 5.1 Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  height: 812px;
  overflow: hidden;
  color: var(--neutral-0);
  background: var(--sky);
}

.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: 50% 100%;
}
/* Véu escuro de 20% por cima da fotografia */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.hero__sky {
  position: absolute; top: 0; left: 0; right: 0;
  height: 435px;
  background: linear-gradient(180deg, var(--sky) 0%, rgba(83, 131, 169, 0.39) 54.861%, rgba(92, 138, 176, 0) 100%);
}

.hero__fade {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 177px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.37) 19.942%, rgba(255, 255, 255, 0.78) 39.064%, rgba(255, 255, 255, 0.94) 65.278%, #fff 88.544%);
  z-index: 1;
}

/* Barra de navegação */
.navbar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
}
.navbar__logo { display: block; }
.navbar__links { display: none; }
.navbar__links, .float-bar__links {
  gap: 24px;
  font-size: var(--lbl1-size); line-height: var(--lbl1-lh); font-weight: var(--medium);
}

/* Título */
.hero__content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 344px; margin: 30px auto 0;
  text-align: center;
}
.hero__title {
  font-size: var(--display-size);
  line-height: var(--display-lh);
  font-weight: var(--medium);
}
/* Uma linha por frase, como no Figma. A máscara deixa passar as descendentes (y, g). */
.hero__line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero__line-inner { display: block; }
.hero__subtitle { font-size: var(--p1-size); line-height: var(--p1-lh); }

/* 5.2 Features ------------------------------------------------------------- */
.features { padding-block: 60px; }
.features__grid { display: grid; gap: 32px; }
.features__right { display: grid; gap: 60px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { display: grid; gap: 12px; }
.stat__value {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--medium);
  color: var(--neutral-900);
}

/* 5.3 Galeria -------------------------------------------------------------- */
.gallery { padding-block: 60px; }
.gallery__track {
  display: flex; gap: 24px;
  padding-inline: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;           /* esconde a barra, a faixa continua a deslizar */
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item {
  position: relative;
  flex: none; scroll-snap-align: start;
  overflow: hidden; border-radius: var(--radius);
}
.gallery__item img {
  width: min(64vw, 300px); height: auto;
  aspect-ratio: 3 / 4;                 /* telemóvel e tablet: fotografias verticais */
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
  border-radius: var(--radius);
}
/* No computador com rato, a faixa anda com o scroll da página (main.js) */
.gallery--linked { overflow: hidden; }
.gallery--linked .gallery__track { overflow: visible; scroll-snap-type: none; will-change: transform; }

/* 5.4 Highlights (Features 2) --------------------------------------------- */
.highlights { padding-block: 60px; }
.highlights__list { display: grid; gap: 60px; }
.highlight { display: grid; gap: 18px; }
.highlight__title {
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: var(--medium);
  color: var(--neutral-900);
}

/* 5.5 Showcase (Features 3) ------------------------------------------------ */
.showcase { padding-block: 60px var(--section-y); }   /* em baixo vem o fundo do contacto: mesmo espaço dos dois lados */
.showcase__inner { display: grid; gap: 60px; }
.showcase__intro { display: grid; gap: 32px; }

/* Colagem: posições do Figma em percentagem de uma caixa de 1280 x 1111,
   por isso a mesma regra serve o telemóvel e o computador. */
.collage { position: relative; aspect-ratio: 1280 / 1111; }
.collage__frame {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius-scaled);
}
.collage__frame img { width: 100%; height: 100%; object-fit: cover; }
.collage__frame--1 { left: 46.875%; top: 0;       width: 53.125%; height: 66.067%; }
.collage__frame--2 { left: 0;       top: 26.823%; width: 42.969%; height: 57.606%; }
.collage__frame--3 { left: 46.875%; top: 72.187%; width: 36.016%; height: 27.813%; }

/* 5.6 Perguntas frequentes ------------------------------------------------- */
.faq { padding-block: 60px; }
.faq__grid { display: grid; gap: 60px; }
.faq__intro { display: grid; gap: 32px; align-content: start; }
.faq__list { display: grid; gap: 20px; }

.faq__item {
  position: relative;
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius);
  background: var(--neutral-0);
  padding: 20px;
}
/* Contorno mais escuro no hover, feito com opacidade para não mexer no layout */
.faq__item::before {
  content: ""; position: absolute; inset: -1px;
  border: 1px solid var(--neutral-600); border-radius: inherit;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) linear;
}
.faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: var(--medium);
  color: var(--neutral-900);
  list-style: none;
  cursor: pointer;
}
.faq__question::-webkit-details-marker { display: none; }

/* Ícone: o mais roda e desaparece, o menos roda e aparece */
.faq__icon { position: relative; width: 24px; height: 24px; flex: none; }
.faq__icon img {
  position: absolute; inset: 0; width: 24px; height: 24px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
.faq__icon-minus { opacity: 0; transform: rotate(-90deg); }
.faq__item[open]:not(.is-closing) .faq__icon-plus  { opacity: 0; transform: rotate(90deg); }
.faq__item[open]:not(.is-closing) .faq__icon-minus { opacity: 1; transform: none; }

.faq__panel { overflow: hidden; }
.faq__panel-inner { padding-top: 24px; }

/* 5.7 Rodapé --------------------------------------------------------------- */
.footer { background: var(--neutral-25); padding: 60px 0 20px; }
.footer__top { display: grid; gap: 60px; }
.footer__brand { display: grid; gap: 24px; justify-items: start; padding-right: 32px; }

.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 144px));
  grid-template-areas: "company product" "resources resources";
  column-gap: 20px; row-gap: 40px;
}
.footer__col--product   { grid-area: product; }
.footer__col--company   { grid-area: company; }
.footer__col--resources { grid-area: resources; }
.footer__col { display: grid; gap: 20px; align-content: start; }
.footer__heading {
  font-size: var(--p1-size); line-height: var(--p1-lh); font-weight: var(--medium);
  color: var(--neutral-900);
}
.footer__links {
  display: grid; gap: 16px; justify-items: start;
  font-size: var(--lbl1-size); line-height: var(--lbl1-lh); font-weight: var(--medium);
  color: var(--neutral-600);
  white-space: nowrap;
}

.footer__bottom {
  display: grid; gap: 32px;
  margin-top: 80px;
  padding-top: 25px;                 /* 1 px de linha + 24 px de espaço */
  border-top: 1px solid var(--neutral-100);
  font-size: var(--lbl2-size); line-height: var(--lbl2-lh);
  color: var(--neutral-600);
}
.footer__legal { display: grid; gap: 12px; justify-items: start; }

/* 6. ANIMAÇÕES ------------------------------------------------------------- */
/* Tudo o que começa escondido está debaixo de .js, para a página ficar
   completa quando não há JavaScript. */

@keyframes fade-down { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes fade-up   { from { opacity: 0; transform: translateY(24px); }  to { opacity: 1; transform: none; } }
@keyframes line-up   { from { transform: translateY(110%); }               to { transform: none; } }
@keyframes photo-in  { from { opacity: 0.35; transform: scale(1.14); }     to { opacity: 1; transform: none; } }

/* 6.1 Entrada do hero, ao carregar */
.js:not(.reduced-motion) .hero__media { animation: photo-in 1800ms var(--ease-out) both; }
.js:not(.reduced-motion) .navbar { animation: fade-down var(--dur-slow) var(--ease-out) 250ms both; }
.js:not(.reduced-motion) .hero__line-inner { animation: line-up var(--dur-hero) var(--ease-out) both; }
.js:not(.reduced-motion) .hero__line:nth-child(1) .hero__line-inner { animation-delay: 350ms; }
.js:not(.reduced-motion) .hero__line:nth-child(2) .hero__line-inner { animation-delay: 480ms; }
.js:not(.reduced-motion) .hero__subtitle { animation: fade-up var(--dur-slow) var(--ease-out) 850ms both; }

/* 6.2 Títulos de secção: palavras a subir por trás de uma máscara, linha a linha */
.split-word { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.split-word__inner { display: inline-block; }
.js:not(.reduced-motion) [data-split] .split-word__inner {
  transform: translateY(115%);
  transition: transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--line, 0) * var(--stagger));
}
.js:not(.reduced-motion) [data-split].is-inview .split-word__inner { transform: none; }

/* 6.3 Blocos a subir */
.js:not(.reduced-motion) [data-reveal="up"] {
  opacity: 0; transform: translateY(var(--reveal-y));
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js:not(.reduced-motion) [data-reveal="up"].is-inview { opacity: 1; transform: none; }

/* 6.4 Fotografias: cortina branca que se recolhe e imagem que assenta.
   A cortina é uma camada por cima da fotografia e não um recorte da imagem:
   uma imagem totalmente recortada fica por carregar até começar a aparecer,
   e surgia de repente. A moldura arredonda os cantos (overflow hidden).
   O main.js só abre a cortina quando a fotografia já carregou. */
.js:not(.reduced-motion) [data-reveal^="clip"]::after {
  content: ""; position: absolute; inset: -1px;
  background: var(--neutral-0);
  pointer-events: none;
  transition: transform calc(var(--dur-slow) * 1.2) var(--ease-in-out);
  transition-delay: calc(var(--i, 0) * 150ms);
}
.js:not(.reduced-motion) [data-reveal="clip-left"]::after { transform-origin: right center; }
.js:not(.reduced-motion) [data-reveal="clip-up"]::after   { transform-origin: center top; }
.js:not(.reduced-motion) [data-reveal="clip-left"].is-inview::after { transform: scaleX(0); }
.js:not(.reduced-motion) [data-reveal="clip-up"].is-inview::after   { transform: scaleY(0); }
.js:not(.reduced-motion) [data-reveal^="clip"] img {
  transform: scale(1.25);
  transition: transform 1800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 150ms);
}
.js:not(.reduced-motion) [data-reveal^="clip"].is-inview img { transform: none; }
/* Depois de entrar, os hovers respondem sem atraso */
.reveal-done, .reveal-done img { transition-delay: 0ms !important; }

/* 6.5 Hovers (só em aparelhos com rato) */
@media (hover: hover) {
  .link:hover::after { transform: scaleX(1); transform-origin: left center; }
  .menu-button:hover { transform: translateY(-2px); }
  .menu-button:active { transform: scale(0.96); }
  .gallery__item img, .collage__frame img { transition: transform 1200ms var(--ease-out); }
  .gallery__item:hover img, .collage__frame:hover img { transform: scale(1.05); }
  .faq__item:hover::before { opacity: 1; }
  .site-menu__list a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: right center;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .site-menu__list a:hover::after { transform: scaleX(1); transform-origin: left center; }
}

/* 7. MOVIMENTO REDUZIDO ---------------------------------------------------- */
/* Pedido pelo sistema (ou por ?reduced-motion no endereço): sem parallax,
   sem contagens e sem deslocações. Ficam só transições curtas de opacidade. */
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after {
  animation: none !important;
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
}
.js.reduced-motion [data-reveal], .js.reduced-motion [data-split] {
  opacity: 0;
  transition: opacity 200ms linear !important;
}
.js.reduced-motion [data-reveal].is-inview, .js.reduced-motion [data-split].is-inview { opacity: 1; }
.reduced-motion .site-menu {
  clip-path: none;
  opacity: 0;
  transform: none !important;
  transition: opacity 200ms linear !important;
}
.reduced-motion .site-menu.is-open { opacity: 1; }
.reduced-motion .site-menu__item, .reduced-motion .site-menu__footer { opacity: 1; transform: none; }
.reduced-motion .float-bar { transform: none; opacity: 0; transition: opacity 200ms linear !important; }
.reduced-motion .float-bar.is-visible { opacity: 1; }
.reduced-motion .gallery__item:hover img, .reduced-motion .collage__frame:hover img { transform: none; }

/* 8. PONTOS DE RUTURA ------------------------------------------------------ */

/* Tablet e computador: o hero cresce com o ecrã e a barra fica com o logótipo à
   esquerda e as duas ligações à direita, sem botão Menu. Aos 768 px a barra tem
   mais de 400 px livres entre o logótipo e as ligações, por isso nunca apertam. */
@media (min-width: 768px) {
  .br-mobile { display: none; }

  .hero { height: clamp(812px, 81.25vw, 1170px); }
  .hero__media img { object-position: center bottom; }
  .hero__sky { height: 512px; }
  .hero__fade { height: 240px; }

  .navbar {
    min-height: 81px;                /* 20 + 41 + 20, como no Figma */
    padding: 20px 40px;
  }
  .float-bar__inner { min-height: 64px; padding: 12px 40px; }
  .navbar .menu-button, .float-bar .menu-button { display: none; }
  .navbar__links, .float-bar__links { display: flex; align-items: center; gap: 36px; }
  .navbar__links { color: var(--neutral-0); }
  .float-bar__links { color: var(--neutral-900); }
  .logo--nav { width: 119.81px; height: 28px; }

  .hero__content { max-width: 624px; margin-top: 80px; gap: 24px; }
  .hero__line { white-space: nowrap; }

  /* O menu de ecrã inteiro é só do telemóvel: aqui as ligações estão sempre à vista */
  .site-menu { display: none !important; }
}

/* Computador pequeno: duas colunas onde o Figma as tem */
@media (min-width: 1024px) {
  .hero__title { letter-spacing: -0.025em; }

  /* Títulos presos (uma regra para todas as secções de duas colunas): o título,
     ou o bloco do título, fica à vista enquanto a coluna da direita passa e
     solta-se no fim da grelha, antes do espaço da secção seguinte. Se a coluna
     da direita não for mais alta do que o título, não há nada para prender.
     As grelhas destas secções alinham ao topo, senão o título ocupava a altura
     toda da linha e não tinha por onde andar. */
  .pin-title { position: sticky; top: var(--pin-title-top); }

  .features { padding-block: var(--section-y) clamp(60px, 5.556vw, 80px); }
  .features__grid {
    grid-template-columns: minmax(0, 520fr) minmax(0, 680fr);
    column-gap: 80px;
    align-items: start;
  }
  .features__right { gap: 80px; }

  .gallery { padding-block: 40px; }
  .gallery__track {
    gap: 40px;
    padding-inline: max(var(--gutter), (100vw - var(--content-max)) / 2);
    scroll-padding-inline: max(var(--gutter), (100vw - var(--content-max)) / 2);
  }
  .gallery__item img { width: 600px; height: 320px; aspect-ratio: auto; }
  .gallery__item:first-child img { width: 560px; }

  .highlights { padding-block: clamp(60px, 5.556vw, 80px) var(--section-y); }
  .highlights__grid {
    display: grid;
    grid-template-columns: minmax(0, 520fr) minmax(0, 680fr);
    column-gap: 80px;
  }
  .highlights__list { grid-column: 2; gap: 40px; }
  .highlight { gap: 24px; }

  .footer { padding: 80px 0 40px; }
  .footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
  .footer__nav {
    width: 515px;
    min-height: 220px;               /* altura fixa do bloco no Figma */
    grid-template-columns: repeat(3, 124px);
    grid-template-areas: "product company resources";
    justify-content: space-between;
    column-gap: 0;
  }
  .footer__col { gap: 32px; }
  .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
  .footer__legal { display: flex; gap: 24px; white-space: nowrap; }
}

/* Entre 1024 e 1199 px as perguntas ainda estão numa coluna só: o título não se prende */
@media (min-width: 1024px) and (max-width: 1199px) {
  .faq__intro.pin-title { position: static; }
}

/* Computador: título por cima da colagem e perguntas ao lado do título */
@media (min-width: 1200px) {
  .br-desktop { display: inline; }

  .showcase { padding-block: var(--section-y); }
  .showcase__inner { position: relative; display: block; }
  .showcase__intro { position: absolute; top: 0; left: var(--gutter); width: calc((100% - 2 * var(--gutter)) * 0.42969); gap: 24px; z-index: 1; }
  .showcase__intro .section-title { max-width: 520px; }

  .faq { padding-block: var(--section-y); }
  .faq__grid { grid-template-columns: minmax(0, 550px) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .faq__intro { gap: 24px; }
  .faq__item { padding: 24px; }
}

/* ==========================================================================
   9. CASAS (secção da galeria como cartões + página de cada casa)
   Acrescentado a 14-09-2026. Usa os mesmos tokens, durações e curvas do resto
   do ficheiro: os cartões são a galeria de sempre com uma camada por cima,
   e a página da casa reaproveita o hero, o bloco de texto, as perguntas
   frequentes e o rodapé.
   ========================================================================== */

/* 9.1 Cartão de casa dentro da galeria ------------------------------------- */
.house-card {
  display: block;
  position: relative;
  color: var(--neutral-0);
  text-decoration: none;
  border-radius: var(--radius);
}

/* Véu escuro só no fundo da fotografia, para o nome se ler sempre */
.house-card img { display: block; }

.house-card__veil {
  position: absolute; inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg,
    rgba(18, 22, 29, 0) 34%,
    rgba(18, 22, 29, 0.28) 62%,
    rgba(18, 22, 29, 0.78) 100%);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.house-card__body {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  pointer-events: none;
}
.house-card__name {
  font-size: 18px; line-height: 24px;
  font-weight: var(--medium);
  text-shadow: 0 1px 12px rgba(18, 22, 29, 0.35);
}
.house-card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none;
  font-size: var(--lbl2-size); line-height: var(--lbl2-lh); font-weight: var(--medium);
}
.house-card__cta-text { display: none; }
.house-card__arrow {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.house-card__arrow svg { display: block; }

/* O contorno de foco fica na moldura, para se ver sobre a fotografia */
.house-card:focus-visible { outline: none; }
.gallery__item:has(.house-card:focus-visible) {
  outline: 2px solid var(--neutral-900);
  outline-offset: 3px;
}

/* 9.2 Página de uma casa --------------------------------------------------- */
/* A fotografia grande reaproveita o .hero, por isso herda o movimento lento
   da imagem que a landing page já faz. Só muda a altura e tira o degradê azul. */
.house-hero { height: clamp(420px, 62vw, 760px); background: var(--neutral-100); }
.house-hero .hero__media img { object-position: var(--focus-x, 50%) var(--focus-y, 50%); }
/* Sem fotografia (casa que não existe, ou antes de chegar) não aparece o ícone de imagem partida */
.house-hero .hero__media img:not([src]) { visibility: hidden; }
/* A entrada da fotografia espera que ela carregue, para nunca acabar antes de ela aparecer */
.js:not(.reduced-motion) .house-hero .hero__media { animation-play-state: paused; }
.js:not(.reduced-motion) .house-hero.is-loaded .hero__media { animation-play-state: running; }
.house-hero .hero__media::after { background: rgba(0, 0, 0, 0.12); }

/* Barra de navegação legível sobre fotografias claras */
.house-hero .navbar { background: linear-gradient(180deg, rgba(18, 22, 29, 0.45) 0%, rgba(18, 22, 29, 0) 100%); }

/* Por baixo da descrição fica o espaço normal entre secções, antes do fundo do formulário.
   Se a casa não existir, o formulário some e o espaço passa a ser só o das perguntas. */
.house { padding-block: 40px var(--section-y); }
.house:has(+ .enquiry[hidden]) { padding-bottom: 0; }
.house__grid { display: grid; gap: 32px; }
.house__body { display: grid; gap: 24px; }
.house__body .text + .text { margin-top: 0; }
.house__title { margin: 0; }

.house__back {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
  font-size: var(--lbl1-size); line-height: var(--lbl1-lh); font-weight: var(--medium);
  color: var(--neutral-600); text-decoration: none;
}
.house__back svg { display: block; transition: transform var(--dur-fast) var(--ease-out); }

/* Aviso quando o endereço não corresponde a nenhuma casa */
.house__missing { display: grid; gap: 20px; justify-items: start; }

/* 9.3 Hovers (só em aparelhos com rato) ----------------------------------- */
@media (hover: hover) {
  .gallery__item:hover .house-card img { display: block; }

.house-card__veil { opacity: 1; }
  .gallery__item:hover .house-card__arrow {
    background: var(--neutral-0);
    border-color: var(--neutral-0);
    color: var(--neutral-900);
    transform: translateX(3px);
  }
  .house__back:hover svg { transform: translateX(-4px); }
}
.reduced-motion .gallery__item:hover .house-card__arrow { transform: none; }

/* 9.4 Pontos de rutura ----------------------------------------------------- */
@media (min-width: 768px) {
  .house__grid { gap: 40px; }
}

@media (min-width: 1024px) {
  .house-card__body { left: 24px; right: 24px; bottom: 20px; }
  .house-card__name { font-size: var(--h3-size); line-height: var(--h3-lh); }
  .house-card__cta-text { display: inline; }
  .house-card__arrow { width: 40px; height: 40px; }

  .house { padding-block: 60px var(--section-y); }
  .house__grid {
    grid-template-columns: minmax(0, 520fr) minmax(0, 680fr);
    column-gap: 80px;
    align-items: start;
  }
}


/* ==========================================================================
   10. FORMULÁRIOS (interesse numa casa + contacto na página inicial)
   Acrescentado a 16-09-2026. A grelha é a da descrição da casa (520/680),
   os campos têm o contorno e o raio das perguntas frequentes, o botão tem a
   forma do botão Menu, e tudo usa as curvas e durações do topo do ficheiro.
   ========================================================================== */

/* 10.1 Secção ---------------------------------------------------------------- */
.enquiry { padding-block: var(--section-y); background: var(--paper); }
.enquiry__grid { display: grid; gap: 40px; }
.enquiry__intro { display: grid; gap: 24px; align-content: start; }
.enquiry__panel { position: relative; }

/* 10.2 Campos ------------------------------------------------------------------ */
.form { display: grid; gap: 20px; }
.form__row { display: grid; gap: 20px; }

.field { display: grid; gap: 10px; min-width: 0; }
.field__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: var(--lbl1-size); line-height: 20px; font-weight: var(--medium);
  color: var(--neutral-900);
}
.field__hint { font-size: var(--lbl2-size); font-weight: var(--regular); color: var(--neutral-600); }

.field__input {
  display: block; width: 100%; min-height: 56px;
  margin: 0; padding: 15px 16px;
  font: inherit; font-size: var(--p1-size); line-height: var(--p1-lh);
  color: var(--neutral-900);
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100); border-radius: var(--radius);
  box-shadow: 0 0 0 0 rgba(83, 131, 169, 0);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
textarea.field__input { min-height: 150px; resize: vertical; }
.field__input::placeholder { color: var(--neutral-600); opacity: 0.55; }
.field__input:focus {
  outline: none;
  border-color: var(--neutral-900);
  box-shadow: 0 0 0 4px rgba(83, 131, 169, 0.22);
}
.field.is-invalid .field__input { border-color: var(--danger); }
.field.is-invalid .field__input:focus { box-shadow: 0 0 0 4px rgba(168, 53, 42, 0.14); }

/* Erro por baixo do campo: abre em altura, sem saltos na página */
.field__error {
  display: grid; grid-template-rows: 0fr;
  margin: -4px 0 0;
  transition: grid-template-rows var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
  opacity: 0;
}
.field__error > span {
  overflow: hidden;
  font-size: var(--lbl2-size); line-height: 20px;
  color: var(--danger);
}
.field.is-invalid .field__error { grid-template-rows: 1fr; opacity: 1; }

.field__count {
  font-size: var(--lbl2-size); line-height: 20px; color: var(--neutral-600);
  font-variant-numeric: tabular-nums; justify-self: end;
}

/* Armadilha para robots: fora do ecrã e fora do Tab */
.form__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form__alert {
  padding: 14px 16px;
  border: 1px solid rgba(168, 53, 42, 0.35); border-radius: var(--radius);
  background: rgba(168, 53, 42, 0.05);
  font-size: var(--lbl2-size); line-height: 20px; color: var(--danger);
}
.form__alert[hidden] { display: none; }

.form__footer { display: grid; gap: 18px; justify-items: start; margin-top: 8px; }
.form__privacy { font-size: var(--lbl2-size); line-height: 20px; color: var(--neutral-600); max-width: 460px; }
.form__privacy .link { color: var(--neutral-900); font-weight: var(--medium); }
.form__privacy .link::after { bottom: -2px; transform: scaleX(1); transform-origin: left center; opacity: 0.35; transition: opacity var(--dur-fast) linear; }

/* 10.3 Botão principal: a forma do botão Menu, em escuro e maior ------------ */
.button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 8px 8px 8px 24px;
  border: 0; border-radius: 26px;
  background: var(--neutral-900); color: var(--neutral-0);
  font-size: var(--lbl1-size); line-height: var(--lbl1-lh); font-weight: var(--medium);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
.button:active { transform: scale(0.97); }
.button[disabled] { cursor: progress; }
.button__icon {
  position: relative;
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition: background var(--dur-fast) var(--ease-out);
}
.button__arrow { display: block; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear; }
.button__spinner {
  position: absolute; inset: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-top-color: var(--neutral-0);
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}
.button.is-loading .button__arrow { opacity: 0; transform: translateX(8px); }
.button.is-loading .button__spinner { opacity: 1; animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (hover: hover) {
  .button:hover { transform: translateY(-2px); }
  .button:active { transform: scale(0.97); }
  .button:hover .button__icon { background: var(--neutral-0); color: var(--neutral-900); }
  .button:hover .button__arrow { transform: translateX(2px); }
  .button.is-loading:hover .button__icon { background: rgba(255, 255, 255, 0.14); }
  .field__input:hover:not(:focus) { border-color: var(--neutral-600); }
  .field.is-invalid .field__input:hover:not(:focus) { border-color: var(--danger); }
  .form__privacy .link:hover::after { opacity: 1; }
}

/* 10.4 Troca entre formulário e mensagem de sucesso ------------------------- */
.enquiry__panel .form,
.form-success { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.enquiry__panel.is-leaving .form { opacity: 0; transform: translateY(-16px); }

.form-success { display: grid; gap: 20px; justify-items: start; align-content: start; }
.form-success[hidden] { display: none; }
.form-success:focus { outline: none; }
.form-success__icon {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--neutral-900); color: var(--neutral-0);
}
.form-success__title {
  font-size: var(--h2-size); line-height: var(--h2-lh); font-weight: var(--medium);
  color: var(--neutral-900);
}
.form-success__again {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--lbl1-size); line-height: var(--lbl1-lh); font-weight: var(--medium);
  color: var(--neutral-900);
}
.form-success__again::after { transform: scaleX(1); transform-origin: left center; opacity: 0.35; transition: opacity var(--dur-fast) linear, transform var(--dur-base) var(--ease-out); }
@media (hover: hover) { .form-success__again:hover::after { opacity: 1; } }

/* Entrada da mensagem: o círculo cresce, o visto desenha-se, o texto sobe */
.js:not(.reduced-motion) .form-success > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js:not(.reduced-motion) .form-success .form-success__icon { transform: scale(0.4); }
.js:not(.reduced-motion) .form-success__check {
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: stroke-dashoffset var(--dur-base) var(--ease-out) 380ms;
}
.js:not(.reduced-motion) .form-success.is-in > * { opacity: 1; transform: none; }
.js:not(.reduced-motion) .form-success.is-in .form-success__check { stroke-dashoffset: 0; }

/* 10.5 Pontos de rutura ------------------------------------------------------ */
@media (min-width: 768px) {
  .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__footer { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 28px; }
}

@media (min-width: 1024px) {
  .enquiry__grid {
    grid-template-columns: minmax(0, 520fr) minmax(0, 680fr);
    column-gap: 80px;
    align-items: start;
  }
  .form { gap: 24px; }
}

/* ==========================================================================
   11. GALERIA LIGADA AO SCROLL (16-09-2026)
   Computador com rato: a secção fica presa a meio do ecrã enquanto a faixa
   anda, e só se solta com a última casa inteira à vista (altura dada pelo
   main.js, conforme o número de casas).
   Telemóvel e ecrãs táteis: a faixa avança sozinha com o scroll da página e
   continua a deslizar com o dedo; o encaixe fica desligado para as duas
   coisas não lutarem.
   ========================================================================== */
.gallery-pin { position: relative; }
.gallery--linked { position: sticky; top: var(--pin-top, 0px); }
.gallery--drift .gallery__track { scroll-snap-type: none; }

/* ==========================================================================
   12. SECÇÕES DA CASA (17-09-2026)
   Desenhadas pelo house-sections.js a partir do ficheiro de cada casa.
   Tipos: model (maquete 3D), zoom (fotografia que cresce presa ao scroll),
   strip (faixa horizontal), tabs (divisões com separadores) e mosaic (filas de
   larguras diferentes). O movimento é do GSAP; aqui ficam as formas, os
   estados de partida e a versão sem movimento.
   ========================================================================== */

/* 12.1 Comum -------------------------------------------------------------- */
.house:has(+ .house-sections:not([hidden])) { padding-bottom: 0; }
.hs { position: relative; padding-block: clamp(64px, 7vw, 104px); }
.hs .text + .hs-facts, .hs .section-title + .text { margin-top: 20px; }
.hs img { max-width: none; }

/* 12.2 Maquete 3D ---------------------------------------------------------- */
.hs-model__grid { display: grid; gap: 40px; }
.hs-model__intro { align-self: start; }
.hs-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 32px 0 0;
  border-top: 1px solid var(--neutral-100);
}
.hs-fact { padding: 18px 0; border-bottom: 1px solid var(--neutral-100); }
.hs-fact:nth-child(odd) { padding-right: 16px; }
.hs-fact dt { font-size: var(--lbl2-size); line-height: 20px; color: var(--neutral-600); }
.hs-fact dd { margin: 4px 0 0; font-size: var(--h2-size); line-height: var(--h2-lh); font-weight: var(--medium); color: var(--neutral-900); }

.model { display: grid; gap: 14px; }
.model__stage {
  position: relative;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(120% 90% at 50% 20%, #fdfcf8 0%, #efece4 62%, #e6e1d6 100%);
  cursor: grab;
  touch-action: pan-y;               /* no telemóvel, deslizar na vertical continua a mexer a página */
  -webkit-tap-highlight-color: transparent;
  outline-offset: 4px;
}
.model__stage::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 15%, #8093b5 0%, #3c4865 55%, #232a3b 100%);
  opacity: 0;
  transition: opacity 900ms var(--ease-in-out);
}
.model.is-dusk .model__stage::before { opacity: 1; }
.model__stage.is-dragging { cursor: grabbing; }
.model__canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}
.model.is-ready .model__canvas { opacity: 1; }
.model__status {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center;
  font-size: var(--lbl2-size); line-height: 20px; color: var(--neutral-600);
}
.model__status.is-note {
  inset: auto 12px 12px 12px;
  justify-content: flex-start;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  z-index: 2;
}
.model__status.is-note .model__spinner { display: none; }
.model__spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--neutral-100); border-top-color: var(--neutral-900);
  animation: spin 800ms linear infinite;
}
.model__fallback, .model__fallback img { position: absolute; inset: 0; width: 100%; height: 100%; }
.model__fallback img { object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); }
.model__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.model__hint {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--lbl2-size); line-height: 20px; color: var(--neutral-600);
}
.model__controls { display: flex; align-items: center; gap: 8px; }
.model__mood {
  display: inline-flex; padding: 3px;
  border: 1px solid var(--neutral-100); border-radius: 22px;
}
.model__mood button, .model__turn, .hs-tabs__pause {
  font: inherit; font-size: var(--lbl2-size); line-height: 1; font-weight: var(--medium);
  border: 0; background: none; color: var(--neutral-900); cursor: pointer;
}
.model__mood button {
  min-height: 32px; padding: 0 14px; border-radius: 18px;
  color: var(--neutral-600);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) linear;
}
.model__mood button[aria-pressed="true"] { background: var(--neutral-900); color: var(--neutral-0); }
.model__turn {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--neutral-100);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) linear;
}
.model__turn:active { transform: scale(0.94); }
.model button:disabled { opacity: 0.4; cursor: default; }

/* 12.3 Zoom ---------------------------------------------------------------- */
.hs--zoom { padding: 0; background: var(--neutral-0); }
.hs-zoom__track { position: relative; height: 150vh; }
.hs-zoom__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.hs-zoom__frame { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.hs-zoom__frame img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%);
  transform-origin: 50% 60%;
  will-change: transform;
}
.hs-zoom__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 22, 29, 0) 35%, rgba(18, 22, 29, 0.62) 100%);
}
.hs-zoom__copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-bottom: clamp(40px, 9vh, 104px);
  color: var(--neutral-0);
}
.hs-zoom__title {
  max-width: 13ch;
  font-size: clamp(40px, 5.4vw, 88px); line-height: 1.04; font-weight: var(--medium);
  letter-spacing: -0.02em;
}
.hs-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hs-word__inner { display: inline-block; will-change: transform; }
.hs-zoom__text { max-width: 520px; margin-top: 20px; font-size: var(--p1-size); line-height: var(--p1-lh); color: rgba(255, 255, 255, 0.86); }

/* 12.4 Faixa horizontal ------------------------------------------------------ */
.hs--strip {
  --rail: min(60vh, 600px);
  --strip-pad: max(var(--gutter), (100vw - var(--content-max)) / 2);
  padding: 0;
  background: var(--neutral-900); color: var(--neutral-0);
}
.hs--strip .section-title { color: var(--neutral-0); }
.hs--strip .text { color: rgba(255, 255, 255, 0.72); }
.hs-strip__track { position: relative; }
.hs-strip__sticky {
  position: sticky; top: 0;
  display: flex; flex-direction: column; justify-content: center;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.hs-strip__rail {
  display: flex; align-items: center; gap: clamp(24px, 3.4vw, 64px);
  height: var(--rail);
  padding-inline: var(--strip-pad);
  will-change: transform;
}
.hs-strip__rail:focus-visible { outline-offset: -6px; }
/* No computador a introdução fica por cima do espaço reservado no início da fila
   e anda com ela (house-sections.js); nos outros casos fica por cima da fila */
.hs-strip__intro {
  position: absolute; top: 0; bottom: 0; left: var(--strip-pad); z-index: 1;
  display: flex; align-items: center;
  width: clamp(280px, 27vw, 420px);
}
.hs-strip__spacer {
  flex: none; align-self: stretch;
  width: clamp(280px, 27vw, 420px);
  margin-right: clamp(16px, 4vw, 80px);
}
.hs-strip__hint {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 32px;
  font-size: var(--lbl2-size); line-height: 20px; font-weight: var(--medium);
  color: var(--neutral-0);
}
.hs-strip__hint-touch { display: none; }
.hs-strip__item { --h: var(--rail); flex: none; align-self: var(--align, center); }
.hs-strip__item--m { --h: calc(var(--rail) * 0.8); }
.hs-strip__item--s { --h: calc(var(--rail) * 0.62); }
.hs-strip__figure { margin: 0; display: grid; gap: 12px; }
.hs-strip__media {
  position: relative; overflow: hidden;
  height: calc(var(--h) - 36px);
  width: calc((var(--h) - 36px) * var(--ar));
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  will-change: clip-path;
}
.hs-strip__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); will-change: transform; }
.hs-strip__caption {
  display: flex; align-items: baseline; gap: 12px;
  height: 24px;
  font-size: var(--lbl1-size); line-height: 24px; font-weight: var(--medium);
  white-space: nowrap;
}
.hs-strip__num { font-size: 12px; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; }
.hs-strip__progress { position: absolute; left: 0; right: 0; bottom: clamp(20px, 5vh, 48px); }
.hs-strip__bar { position: relative; display: block; height: 1px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.hs-strip__bar i { position: absolute; inset: 0; background: var(--neutral-0); transform: scaleX(0); transform-origin: left center; }

/* Sem a faixa presa (telemóvel, ecrãs táteis, movimento reduzido, sem GSAP):
   a faixa desliza com o dedo, a roda ou o teclado */
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .hs--strip { --rail: min(112vw, 560px); padding-block: clamp(56px, 12vw, 96px); }
  .hs-strip__sticky { position: static; height: auto; overflow: visible; }
  .hs-strip__rail {
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--strip-pad);
    scrollbar-width: none;
    will-change: auto;
  }
  .hs-strip__rail::-webkit-scrollbar { display: none; }
  .hs-strip__item { scroll-snap-align: start; }
  .hs-strip__intro { position: static; display: block; width: auto; padding-inline: var(--strip-pad); margin-bottom: clamp(28px, 7vw, 44px); }
  .hs-strip__intro-inner { max-width: 560px; }
  .hs-strip__spacer { display: none; }
  /* as horizontais nunca passam da largura do ecrã, para se verem inteiras */
  .hs-strip__media { width: min(calc((var(--h) - 36px) * var(--ar)), 84vw); height: auto; aspect-ratio: var(--ar); }
  .hs-strip__hint-desk { display: none; }
  .hs-strip__hint-touch { display: inline; }
  .hs-strip__progress { position: static; margin-top: 28px; }
}
.reduced-motion .hs-strip__track, .hs-static .hs-strip__track { height: auto !important; }
.reduced-motion .hs-strip__sticky, .hs-static .hs-strip__sticky { position: static; height: auto; overflow: visible; padding-block: clamp(56px, 7vw, 104px); }
.reduced-motion .hs-strip__rail, .hs-static .hs-strip__rail { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--strip-pad); }
.reduced-motion .hs-strip__item, .hs-static .hs-strip__item { scroll-snap-align: start; }
.reduced-motion .hs-strip__intro, .hs-static .hs-strip__intro { position: static; display: block; width: auto; padding-inline: var(--strip-pad); margin-bottom: 40px; }
.reduced-motion .hs-strip__intro-inner, .hs-static .hs-strip__intro-inner { max-width: 560px; }
.reduced-motion .hs-strip__spacer, .hs-static .hs-strip__spacer { display: none; }

/* 12.5 Separadores ---------------------------------------------------------- */
.hs-tabs__grid { display: grid; gap: 32px; }
.hs-tabs__grid > *, .hs-model__grid > * { min-width: 0; }   /* a lista de separadores desliza dentro da coluna, sem alargar a página */
.hs-tabs__list { display: flex; gap: 8px; overflow-x: auto; margin-top: 28px; scrollbar-width: none; }
.hs-tabs__list::-webkit-scrollbar { display: none; }
.hs-tab { flex: none; position: relative; }
.hs-tab__button {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--neutral-100); border-radius: 22px;
  background: none; color: var(--neutral-600); cursor: pointer;
  font: inherit; font-size: var(--lbl1-size); line-height: 1; font-weight: var(--medium);
  transition: color var(--dur-fast) linear, border-color var(--dur-fast) linear, background var(--dur-fast) var(--ease-out);
}
.hs-tab.is-active .hs-tab__button { color: var(--neutral-0); background: var(--neutral-900); border-color: var(--neutral-900); }
.hs-tab__num { font-size: 12px; opacity: 0.6; font-variant-numeric: tabular-nums; }
.hs-tab__bar { position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px; overflow: hidden; }
.hs-tab__bar i { position: absolute; inset: 0; background: currentColor; opacity: 0.6; transform: scaleX(0); transform-origin: left center; }
.hs-tab__more { display: none; }
.hs-tabs__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 18px;
  background: var(--neutral-100);
}
.hs-tabs__slide { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.hs-tabs__slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); will-change: transform; }
.hs-tabs__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 64px 20px 20px;
  background: linear-gradient(180deg, rgba(18, 22, 29, 0) 0%, rgba(18, 22, 29, 0.72) 100%);
  color: var(--neutral-0);
  font-size: var(--lbl1-size); line-height: 24px;
}
.hs-tabs__pause {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  min-height: 32px; padding: 0 14px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.9); color: var(--neutral-900);
}
.hs-tabs__pause-play { display: none; }
.hs-tabs__pause[aria-pressed="true"] .hs-tabs__pause-play { display: inline; }
.hs-tabs__pause[aria-pressed="true"] .hs-tabs__pause-stop { display: none; }

/* 12.6 Mosaico ---------------------------------------------------------------- */
.hs--mosaic { overflow: hidden; }
.hs-mosaic {
  --tile-gap: clamp(10px, 1.4vw, 24px);
  display: grid; gap: var(--tile-gap);
  grid-template-columns: minmax(0, 1fr);   /* as filas nunca ficam mais largas do que a coluna */
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hs-mosaic__row { display: flex; gap: var(--tile-gap); will-change: transform; }
.hs-mosaic__tile { position: relative; margin: 0; min-width: 0; container-type: inline-size; }
.hs-mosaic__tile--intro { display: flex; flex-direction: column; justify-content: flex-end; }
.hs-mosaic__media { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius); background: var(--neutral-100); will-change: clip-path; }
.hs-mosaic__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); transform: scale(1.06); will-change: transform; }
.hs-mosaic__caption {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.9); color: var(--neutral-900);
  font-size: 13px; line-height: 16px; font-weight: var(--medium);
  pointer-events: none;
}
/* Legenda só onde cabe */
@container (max-width: 150px) { .hs-mosaic__caption { display: none; } }
/* Telemóvel: a introdução por cima e as fotografias em filas próprias (house-sections.js
   calcula-as), que ocupam a largura toda; em cada fila a largura segue o formato,
   por isso as fotografias da mesma fila têm a mesma altura */
@media (max-width: 767px) {
  .hs-mosaic { display: flex; flex-wrap: wrap; }
  .hs-mosaic__row { display: contents; }
  .hs-mosaic__tile {
    flex: none;
    width: calc((100% - (var(--pr-n, 1) - 1) * var(--tile-gap)) * var(--ar) / var(--pr-sum, 1) - 0.1px);
    aspect-ratio: var(--ar);
    max-height: 125vw;
  }
  .hs-mosaic__tile--intro { width: 100%; aspect-ratio: auto; max-height: none; justify-content: flex-start; margin-bottom: 14px; }
  .hs-mosaic__tile--intro > * { max-width: 560px; }
}
@media (min-width: 768px) {
  .hs-mosaic__tile { flex: var(--ar) 1 0; aspect-ratio: var(--ar); }
  .hs-mosaic__tile--intro { padding-right: clamp(8px, 2vw, 32px); }
}
/* Tablet: a introdução ocupa a primeira linha e as fotografias seguem por baixo */
@media (min-width: 768px) and (max-width: 1023px) {
  .hs-mosaic__row:first-child { flex-wrap: wrap; row-gap: 32px; }
  .hs-mosaic__tile--intro { flex: 0 0 100%; aspect-ratio: auto; padding-right: 0; }
  .hs-mosaic__tile--intro > * { max-width: 560px; }
}

/* 12.7 Pontos de rutura --------------------------------------------------------- */
@media (hover: hover) {
  .model__turn:hover { border-color: var(--neutral-900); transform: translateY(-2px); }
  .model__mood button:not([aria-pressed="true"]):hover { color: var(--neutral-900); }
  .hs-tab:not(.is-active) .hs-tab__button:hover { color: var(--neutral-900); border-color: var(--neutral-600); }
  .hs-mosaic__tile .hs-mosaic__media img { transition: transform 1400ms var(--ease-out); }
}
@media (min-width: 768px) {
  .model__stage { aspect-ratio: 16 / 11; }
  .hs-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hs-fact:nth-child(odd) { padding-right: 0; }
  .hs-tabs__stage { aspect-ratio: 3 / 2; }
}
@media (min-width: 1024px) {
  .hs-model__grid {
    grid-template-columns: minmax(0, 440fr) minmax(0, 760fr);
    column-gap: 72px;
    align-items: start;
  }
  .hs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-fact:nth-child(odd) { padding-right: 16px; }
  .model__stage { aspect-ratio: 5 / 4; }

  .hs-tabs__grid {
    grid-template-columns: minmax(0, 480fr) minmax(0, 720fr);
    column-gap: 72px;
    align-items: center;
  }
  .hs-tabs__list { display: grid; gap: 0; overflow: visible; margin-top: 32px; border-top: 1px solid var(--neutral-100); }
  .hs-tab { border-bottom: 1px solid var(--neutral-100); }
  .hs-tab__button {
    width: 100%; min-height: 0; padding: 18px 0;
    border: 0; border-radius: 0; background: none !important;
    font-size: var(--h3-size); line-height: var(--h3-lh);
    text-align: left;
  }
  .hs-tab.is-active .hs-tab__button { color: var(--neutral-900); }
  /* A linha da duração corre por cima do traço de baixo do item, depois do texto */
  .hs-tab .hs-tab__button { position: static; }
  .hs-tab__bar { left: 0; right: 0; bottom: -1px; height: 1px; }
  .hs-tab__bar i { opacity: 1; background: var(--neutral-900); }
  .hs-tab__more {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-base) var(--ease-out);
  }
  .hs-tab.is-active .hs-tab__more { grid-template-rows: 1fr; }
  .hs-tab__text {
    overflow: hidden;
    color: var(--neutral-600); font-size: var(--p1-size); line-height: var(--p1-lh);
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .hs-tab.is-active .hs-tab__text { opacity: 1; transform: none; padding-bottom: 20px; }
  .hs-tabs__caption { display: none; }
  .hs-zoom__track { height: 155vh; }
}

/* 12.8 Movimento reduzido e sem GSAP: nada preso, nada escondido ------------- */
.reduced-motion .hs-zoom__track, .hs-static .hs-zoom__track { height: auto; }
.reduced-motion .hs-zoom__sticky, .hs-static .hs-zoom__sticky { position: relative; height: 86vh; }
.reduced-motion .model__canvas { transition: none; }