/* ============================================================
   honestbenefit · Excellence Cunha Júnior
   Sistema visual: bone / grafite / granito-latão · Metrolis
   ============================================================ */

/* ---------- Fontes ---------- */
@font-face{
  font-family:'Metrolis';
  src:url('../fonts/Metrolis-Redondo.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Metrolis';
  src:url('../fonts/Metrolis-Negro.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Metrolis';
  src:url('../fonts/Metrolis-Italico.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}

/* ---------- Tokens ----------
   Duas vozes: QUENTE = o projeto (latão, editorial) · FRIO = os dados (ardósia, operacional).
   Antes a paleta era toda quente (40°–60°) e nada saltava.
   Todos os pares verificados contra WCAG AA. */
:root{
  /* base quente */
  --bone:#F0F1F1;          /* fundo — cal fria (H198 S6), não creme */
  --bone-2:#E6E9E9;        /* faixas alternadas */
  --bone-3:#D6DBDB;        /* placeholders */

  /* escuros frios */
  --graphite:#23282B;      /* footer, botões, secção de pagamento */
  --ink:#3F4548;           /* corpo — 8.8:1 */
  --ink-soft:#5F6669;      /* secundário — 5.3:1 */

  /* voz quente: editorial */
  --brass:#8A7A55;         /* títulos grandes — 3.8:1, só acima de 24px */
  --brass-text:#6F6140;    /* eyebrows e texto pequeno — 5.5:1 */
  --brass-2:#A6926A;       /* latão sobre fundo escuro — 4.9:1 */

  /* voz fria: operacional */
  --slate:#2E5561;         /* disponível, foco, dados — 7.3:1 */
  --slate-soft:#7FA6B4;    /* ardósia sobre fundo escuro — 5.7:1 */
  --iron:#5A6669;          /* vendido, estado neutro — 5.4:1 */

  --line:rgba(35,40,43,.14);
  --line-soft:rgba(35,40,43,.08);
  --white:#FFFFFF;

  --gut:clamp(1.25rem,5vw,4.5rem);
  --max:1320px;
  --sec:clamp(4rem,8.5vw,7.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:'Metrolis','Helvetica Neue',Arial,sans-serif;
  font-weight:400;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
table{border-collapse:collapse;width:100%}

/* ---------- Tipografia ---------- */
.eyebrow{
  font-weight:700;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--brass-text);
  line-height:1.6;
}
.eyebrow--soft{color:var(--ink-soft)}
.eyebrow--light{color:rgba(255,255,255,.72)}

.h-display{
  font-weight:400;
  /* subido de 3,75rem: a proporção com o corpo passa de 3,4x para 4,1x */
  font-size:clamp(2.3rem,5vw,4.5rem);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--brass);
}
.h-display .thin{color:var(--ink)}

.h-sub{
  font-weight:700;
  font-size:clamp(1.05rem,1.8vw,1.35rem);
  line-height:1.35;
  letter-spacing:-.005em;
  color:var(--graphite);
}

.lead{
  font-size:clamp(1rem,1.25vw,1.1rem);
  line-height:1.8;
  color:var(--ink);

  /* medida de leitura: sem isto os parágrafos correm até 86 caracteres por
     linha, e o confortável são 45 a 75 */
  max-width:70ch;
}
.muted{color:var(--ink-soft)}
.small{font-size:.85rem;line-height:1.65}
.tiny{font-size:.75rem;line-height:1.6;color:var(--ink-soft)}
em,.italic{font-style:italic}
strong{font-weight:700;color:var(--graphite)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:900px}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(3.5rem,7vw,6rem)}
/* A lista pertence à barra de filtros que tem por cima: com o espaçamento
   normal de secção ficavam 220px de vazio a separar duas coisas que são uma só. */
.section--lista{padding-top:clamp(1.75rem,3vw,2.5rem)}
/* Página de contacto: o título e o formulário estavam separados por 216px,
   soma de dois espaçamentos de secção. Com um só título deixa de haver duas
   coisas a competir, e 112px chegam para as separar. */
.section--abertura{padding-bottom:clamp(1.25rem,2.5vw,2rem)}
.section--form{padding-top:clamp(3rem,6vw,5rem)}
.section--bone2{background:var(--bone-2)}
.section--dark{background:var(--graphite);color:rgba(255,255,255,.78)}
.section--dark .h-display{color:var(--bone)}
.section--dark .h-sub{color:var(--white)}
.section--dark .lead{color:rgba(255,255,255,.78)}

.center{text-align:center}
.stack{display:grid;gap:1.5rem;justify-items:center;text-align:center;max-width:820px;margin-inline:auto}
.stack--left{justify-items:start;text-align:left;margin-inline:0}
/* O cap de 820px do .stack é medida de leitura para parágrafos. Este título
   são duas frases, não um parágrafo: a mais longa precisa de 1145px a 60px de
   corpo, e com o cap partia-se em quatro linhas em vez das duas que a copy
   pede. Sem cap cabe em duas de ~700px de viewport para cima; abaixo disso o
   clamp reduz o corpo e o balance trata das quebras. */
.stack--largo{max-width:none}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Botões ----------
   Dois pares simétricos, e nada mais:
     fundo claro  -> grafite cheio, preenche a ardósia
     fundo escuro -> contorno claro, preenche a branco  |  bone cheio, preenche a ardósia clara
   O preenchimento sobe de baixo e só existe nos botões primários — nos controlos de
   dados (filtros, ação por fração) seria ruído, não hierarquia.
   Antes: .btn passava a latão (a voz editorial, cor errada para uma ação) e o CTA da
   secção de pagamento ficava grafite sobre grafite — 1.00:1, desaparecia ao passar o rato. */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.05rem 2.4rem;
  font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;
  background:var(--graphite);color:var(--bone);
  border:1px solid var(--graphite);
  transition:color .38s var(--ease),border-color .38s var(--ease);
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--slate);
  transform:scaleY(0);transform-origin:bottom center;
  transition:transform .42s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{border-color:var(--slate)}

/* contorno sobre imagem ou fundo escuro */
.btn--light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn--light::before{background:var(--white)}
.btn--light:hover,.btn--light:focus-visible{color:var(--graphite);border-color:var(--white)}

/* CTA principal dentro de secção escura: é o elemento mais claro do bloco */
.btn--invert{background:var(--bone);color:var(--graphite);border-color:var(--bone)}
.btn--invert::before{background:var(--slate-soft)}
.btn--invert:hover,.btn--invert:focus-visible{color:var(--graphite);border-color:var(--slate-soft)}

/* secundário sobre fundo claro */
.btn--ghost{background:transparent;color:var(--graphite)}
.btn--ghost::before{background:var(--graphite)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--bone);border-color:var(--graphite)}

@media (prefers-reduced-motion:reduce){
  .btn::before{transition:none}
}

/* Sem linha em repouso: ela cresce da esquerda ao passar o rato. O `right:.18em`
   corta o espaço que o letter-spacing deixa depois da última letra — sem isso a
   linha ficava mais comprida que a palavra. */
.link-under{
  position:relative;
  display:inline-block;
  font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--brass-text);
  padding-bottom:.16rem;
  transition:color .3s var(--ease);
}
.link-under::after{
  content:'';position:absolute;left:0;right:.18em;bottom:0;height:1px;
  background:var(--slate);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease);
}
.link-under:hover,.link-under:focus-visible{color:var(--slate)}
.link-under:hover::after,.link-under:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .link-under::after{transition:none}
}

/* ---------- Wordmark ---------- */
.wordmark{
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1;
  color:var(--graphite);
  white-space:nowrap;
}
.wordmark--light{color:var(--bone)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:90;   /* acima do menu: o botão de fechar tem de estar sempre alcançável */
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.15rem var(--gut);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
/* Sobre o vídeo, a nav assenta na banda mais contrastada da imagem (as luzes da
   ponte). Este scrim garante-lhe contraste próprio; desaparece quando o header
   ganha fundo sólido ao rolar. */
.site-header::before{
  content:'';position:absolute;inset:0 0 auto 0;height:190%;
  background:linear-gradient(180deg,rgba(18,22,24,.62) 0%,rgba(18,22,24,.28) 55%,rgba(18,22,24,0) 100%);
  pointer-events:none;opacity:1;transition:opacity .4s var(--ease);
}
.site-header.is-stuck::before{opacity:0}
.site-header > *{position:relative;z-index:1}
.site-header .wordmark{position:relative;z-index:90;font-size:1.45rem;color:var(--bone);transition:color .4s var(--ease)}
.site-header.is-stuck{
  background:rgba(240,241,241,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line-soft);
  padding-block:.9rem;
}
.site-header.is-stuck .wordmark{color:var(--graphite)}
.site-header.is-stuck .burger span{background:var(--graphite)}

.header-acoes{display:flex;align-items:center;gap:clamp(.6rem,1.5vw,1.1rem)}
.header-acoes .btn{padding:.75rem 1.4rem;font-size:.66rem;font-weight:700;text-transform:uppercase}
/* O CTA só entra quando há fundo sólido por trás: sobre o vídeo, a caixa grafite
   tinha 1.04:1 contra o fundo. Comportamento mantido. */
.header-acoes .btn{
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,
             background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.site-header.is-stuck .header-acoes .btn,
.site-header--fixo .header-acoes .btn{opacity:1;visibility:visible;transform:none}
.site-header.menu-open .header-acoes .btn{
  background:transparent;color:var(--white);border-color:rgba(255,255,255,.5);
  opacity:1;visibility:visible;transform:none;
}

.burger{display:flex;flex-direction:column;gap:5px;padding:.5rem;z-index:90}
.burger span{width:24px;height:2px;background:var(--bone);transition:transform .35s var(--ease),opacity .25s}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Modo de Alto Contraste do Windows: o sistema força todos os background-color
   para a cor da tela, e as três barras, que são só background, desapareciam.
   O botão do menu é a navegação principal de todas as páginas, por isso passa
   a pintar-se com a cor de texto de botão do próprio sistema. */
@media (forced-colors:active){
  .burger span{background:ButtonText}
}

@media (max-width:940px){
  /* backdrop-filter cria containing block: prendia o overlay fixed dentro do
     header. O menu passou a ser irmão do header e já não sofre disto, mas o
     fundo sólido continua a fazer falta quando o menu está aberto. */
  .site-header.is-stuck{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bone)}
}
.site-header.menu-open,
.site-header.is-stuck.menu-open,
.site-header--fixo.menu-open{
  background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.site-header.menu-open .wordmark,
.site-header.is-stuck.menu-open .wordmark{color:var(--bone)}
.site-header.menu-open .burger span{background:var(--bone)}

/* ===== RESTAURADO ===== Estas regras foram apagadas por engano ao
   reescrever o header; recuperadas da cópia de 28/08 e reconferidas. */

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;place-items:center;
  text-align:center;
  padding:8rem var(--gut) 6rem;
  overflow:hidden;
  background:var(--graphite);
}

.hero__media{position:absolute;inset:0;background:var(--graphite)}

.hero__media picture{position:absolute;inset:0}

.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}

.hero__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 58%;
  opacity:0;transition:opacity 1.1s var(--ease);
}

.hero__video.is-playing{opacity:1}

/* Duas camadas: uma base para o header e o rodapé do hero, e uma elipse escura
   centrada no bloco de texto — é ali que a treliça da ponte e as luzes cruzam
   (detalhe local 19.6 contra 11.1 da média da imagem). */
.hero__media::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(72% 46% at 50% 52%, rgba(18,22,24,.80) 0%, rgba(18,22,24,.55) 45%, rgba(18,22,24,0) 78%),
    linear-gradient(180deg, rgba(18,22,24,.66) 0%, rgba(18,22,24,.20) 30%, rgba(18,22,24,.30) 70%, rgba(18,22,24,.68) 100%);
}

.hero .wordmark{
  font-size:clamp(3rem,10.5vw,7rem);
  color:var(--bone);
  letter-spacing:-.035em;
  text-shadow:0 2px 40px rgba(18,22,24,.55);
}

/* Uma só linha de dados, em vez de eyebrow + badge + tagline separados.
   letter-spacing mais contido: .34em espalhava o texto por cima de mais imagem. */
.hero__project{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem clamp(.75rem,1.6vw,1.15rem);
  font-weight:700;font-size:clamp(.7rem,1.35vw,.8rem);
  text-transform:uppercase;letter-spacing:.2em;
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 14px rgba(18,22,24,.6);
}

.hero__sep{width:4px;height:4px;border-radius:50%;background:var(--brass-2);flex:none}

/* ---------- Colagem assimétrica ---------- */
.collage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,2rem);align-items:end}

.collage figure{margin:0;position:relative}

.collage img{width:100%;height:100%;object-fit:cover}

.cap{
  margin-top:.85rem;
  font-size:.78rem;font-style:italic;color:var(--ink-soft);
}



/* ===== RESTAURADO (2.ª passagem) ===== */
.hero__inner{position:relative;display:grid;gap:clamp(1.5rem,3vw,2.25rem);justify-items:center;max-width:900px}

.scroll-cue{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  width:44px;height:44px;border:1px solid rgba(255,255,255,.4);border-radius:50%;
  display:grid;place-items:center;color:rgba(255,255,255,.8);
  animation:bob 2.6s var(--ease) infinite;
}

@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

.collage__big{grid-column:1 / span 1}

.collage__small{grid-column:2 / span 1;transform:translateY(-9%)}

.collage--flip .collage__big{grid-column:2 / span 1;order:2}

.collage--flip .collage__small{grid-column:1 / span 1;order:1}

.split{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:start;
}
/* A coluna do texto era a mais estreita das duas, mas a lista ao lado só precisa
   de 331px. Aqui o texto é que manda, e assim o título cabe em duas linhas. */
/* modificadores DEPOIS da base: com a mesma especificidade, ganha o último.
   Foi assim que o --center e o --texto se perderam no restauro do CSS. */
.split--center{align-items:center}
.split--texto{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}

.split__sticky{position:sticky;top:7rem}

@media (max-width:940px){.split__sticky{position:static}}
.split--reverse .split__media{order:-1}
@media (max-width:940px){
  .split{grid-template-columns:1fr;gap:2.5rem}
  .split--reverse .split__media{order:initial}
}

/* ---------- Lista de pontos ---------- */
.poi{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.poi li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:.95rem 0;border-bottom:1px solid var(--line);
}
.poi .k{font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--graphite)}
.poi .v{font-size:.82rem;color:var(--ink-soft);white-space:nowrap}
/* O nowrap mantém chave e valor na mesma linha, que é o que se quer em ecrã
   largo. Em estreito recusava encolher: com «Assembleia da República, Bosch,
   DouroAzul» a lista exigia 332px e empurrava a grelha inteira para fora do
   ecrã a 320px. Aqui a chave sobe para cima do valor e o valor quebra. */
@media (max-width:560px){
  .poi li{flex-direction:column;align-items:flex-start;gap:.3rem}
  .poi .v{white-space:normal}
}
/* Item de grelha tem min-width:auto e recusa encolher abaixo do conteúdo.
   Sem isto, um só filho teimoso arrasta a coluna toda para fora do ecrã. */
.split > *{min-width:0}

/* ---------- Números ----------
   Respiro entre a Localização e as Tipologias. Ícones em traço fino, sem cantos
   arredondados e sem preenchimento, para não competirem com os números — que
   são o conteúdo. O do "12" desenha doze células: o ícone é a informação. */
.numeros{
  background:var(--bone);
  padding-block:clamp(3.5rem,7.5vw,6rem);
}
.numeros__lista{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.numeros__item{
  display:grid;gap:.9rem;justify-items:center;text-align:center;
  padding-inline:clamp(.5rem,2vw,1.5rem);
  border-right:1px solid var(--line);
}
.numeros__item:last-child{border-right:0}

.numeros__ic{
  width:clamp(38px,3.8vw,50px);height:auto;
  color:var(--slate);
  margin-bottom:.3rem;
}
.numeros__n{
  font-weight:700;
  font-size:clamp(1.9rem,4.2vw,3.1rem);
  line-height:1;letter-spacing:-.03em;
  color:var(--graphite);
  font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:.12em;
}
.numeros__eur{font-size:.5em;letter-spacing:0;color:var(--brass-text)}
/* a largura é fixada pelo JS antes da contagem, para as colunas não dançarem */
.numeros__v{display:inline-block;text-align:center}
.numeros__l{
  font-weight:700;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.16em;line-height:1.7;
  color:var(--ink-soft);
}

@media (max-width:940px){
  .numeros__lista{grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,3rem) 0}
  .numeros__item:nth-child(2n){border-right:0}
  .numeros__item:nth-child(-n+2){padding-bottom:clamp(2rem,5vw,3rem);border-bottom:1px solid var(--line)}
}
@media (max-width:480px){
  .numeros__lista{grid-template-columns:1fr}
  .numeros__item{border-right:0;border-bottom:1px solid var(--line);padding-block:1.75rem}
  .numeros__item:last-child{border-bottom:0}
}

/* ---------- Cards de tipologia ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.75rem)}
@media (max-width:940px){.cards{grid-template-columns:1fr}}
.card{
  background:var(--bone);border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.card{cursor:pointer}
.card:hover{border-color:var(--slate);transform:translateY(-4px)}
/* o botão continua a ser o controlo real, para teclado e leitores de ecrã;
   o anel de foco aparece à volta do card todo para se perceber o alvo */
.card:has(.card__media--zoom:focus-visible){outline:2px solid var(--slate);outline-offset:3px}
.section--bone2 .card{background:var(--bone)}
.card__media{aspect-ratio:4/3;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:clamp(1.5rem,2.5vw,2rem);display:grid;gap:1.15rem;flex:1;align-content:start}
.card__title{font-weight:700;font-size:1.3rem;color:var(--graphite);line-height:1.2}
.card__sub{font-size:.85rem;font-weight:700;color:var(--ink);margin-top:-.7rem}
.specs{display:grid;gap:0;border-top:1px solid var(--line);margin:0;padding:0}
.specs div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line-soft)}
.specs dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);font-weight:700}
.specs dd{margin:0;font-size:.86rem;font-weight:700;color:var(--graphite);text-align:right}
.card__price{
  display:flex;align-items:baseline;gap:.5rem;margin-top:auto;
  padding-top:.35rem;
}
.card__price .lbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:var(--ink-soft)}
.card__price .val{font-weight:700;font-size:1.5rem;color:var(--slate)}

/* ---------- Galeria ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(110px,11.5vw,190px);
  gap:clamp(.6rem,1.2vw,1rem);
}
.gallery button{position:relative;overflow:hidden;display:block;padding:0;background:var(--bone-3);height:100%}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .4s}
.gallery button:hover img{transform:scale(1.06)}
.gallery button::after{
  content:'';position:absolute;inset:0;
  background:rgba(42,42,40,0);transition:background .4s var(--ease);
}
.gallery button:hover::after{background:rgba(42,42,40,.12)}
/* Cinco imagens, todas do exterior: a fachada manda, o resto acompanha. */
.g-a{grid-column:span 4;grid-row:span 3}
.g-b{grid-column:span 2;grid-row:span 3}
.g-c{grid-column:span 2;grid-row:span 2}
.g-d{grid-column:span 2;grid-row:span 2}
.g-e{grid-column:span 2;grid-row:span 2}
@media (max-width:760px){
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(110px,26vw,180px)}
  .g-a{grid-column:span 2;grid-row:span 2}
  .g-b,.g-c,.g-d,.g-e{grid-column:span 1;grid-row:span 2}
}

/* Lightbox */
.lb{
  position:fixed;inset:0;z-index:120;
  background:rgba(20,20,19,.96);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
  padding:clamp(1rem,4vw,3rem);
}
.lb.is-open{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:82vh;object-fit:contain}
.lb__cap{
  position:absolute;bottom:clamp(1rem,4vw,2.5rem);left:0;right:0;text-align:center;
  font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.7);
}
.lb__x,.lb__nav{
  position:absolute;color:rgba(255,255,255,.7);
  width:52px;height:52px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);
  transition:color .3s,border-color .3s;
}
.lb__x:hover,.lb__nav:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.lb__x{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);font-size:1.4rem;line-height:1}
.lb__nav--prev{left:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%)}
.lb__nav--next{right:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%)}

/* ---------- Filme ---------- */
.film{position:relative;overflow:hidden;background:var(--graphite)}
.film video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.film__poster{position:absolute;inset:0;cursor:pointer;display:grid;place-items:center;transition:opacity .5s var(--ease)}
.film__poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film__poster::after{content:'';position:absolute;inset:0;background:rgba(20,20,19,.4)}
.film__poster.is-hidden{opacity:0;pointer-events:none}
.film__play{
  position:relative;z-index:3;display:grid;gap:1rem;justify-items:center;color:#fff;
}
.film__play .ring{
  width:76px;height:76px;border:1px solid rgba(255,255,255,.6);border-radius:50%;
  display:grid;place-items:center;transition:background .4s var(--ease),transform .4s var(--ease);
}
.film__poster:hover .ring{background:rgba(255,255,255,.14);transform:scale(1.06)}
.film__play .lbl{font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.26em}

/* ---------- Acabamentos ---------- */
.finishes{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media (max-width:1200px){.finishes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.finishes{grid-template-columns:1fr}}
.finish{padding:clamp(1.5rem,2.6vw,2rem);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:.6rem;align-content:start}
.finish__brand{font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;color:var(--brass-text)}
.finish__txt{font-size:.88rem;line-height:1.7;color:var(--ink)}

/* ---------- Tabela de vendas ---------- */
@media (max-width:760px){}

.table-scroll{overflow-x:auto;border:1px solid var(--line);background:var(--bone)}
.t-vendas{min-width:820px;font-size:.86rem}
.t-vendas th{
  text-align:left;padding:1rem .9rem;
  font-weight:700;font-size:.63rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-soft);background:var(--bone-2);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.t-vendas td{padding:.95rem .9rem;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.t-vendas tbody tr:last-child td{border-bottom:0}
.t-vendas tbody tr{transition:background .25s var(--ease),opacity .22s var(--ease),transform .22s var(--ease)}
/* O filtro escondia as linhas no mesmo fotograma, e a tabela saltava de altura.
   Agora quem sai desvanece primeiro, e a tabela só encolhe depois. */
.t-vendas tbody tr.is-fora{opacity:0;transform:translateY(-3px)}
.t-vendas tbody tr.is-entra{opacity:0;transform:translateY(7px)}
.t-vendas tbody tr:not(.is-alvo):hover{background:var(--bone-2)}
.t-vendas tr.is-sold{color:var(--ink-soft)}
.t-vendas tr.is-sold .frac,.t-vendas tr.is-sold .price{color:var(--ink-soft)}
.frac{font-weight:700;font-size:1rem;color:var(--graphite)}
.price{font-weight:700;color:var(--slate);white-space:nowrap}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{
  display:inline-block;padding:.3rem .7rem;
  font-weight:700;font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;
  border:1px solid currentColor;
}
.pill--go{color:var(--slate);border-color:var(--slate)}
.pill--no{color:var(--iron);border-color:rgba(90,102,105,.45)}

/* o texto de abertura precisa de ar antes dos filtros: colados, lê-se
   como uma coisa só e a tabela parece começar no meio da frase */
.t-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;margin-top:clamp(2.75rem,5vw,4rem)}
.chip{
  padding:.6rem 1.15rem;border:1px solid var(--line);
  font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);
  transition:all .3s var(--ease);
}
.chip:not(.is-on):hover{border-color:var(--graphite);color:var(--graphite)}
.chip.is-on:hover{background:var(--slate);border-color:var(--slate)}
.chip.is-on{background:var(--graphite);border-color:var(--graphite);color:var(--bone)}

/* ---------- Plano de pagamento ----------
   Linha do tempo à escala: cada marco é posicionado pela sua data real
   (--p, em % dos 26 meses), não por repartição igual. É a escala que mostra
   que o 2.º reforço cai a meio e que aí se atingem os 50% pagos — coisa que
   quatro colunas de largura igual escondiam. */
.linha{
  --eixo:3.1rem;              /* altura a que a linha corre, medida do topo */
  position:relative;
  margin-top:clamp(3.5rem,7vw,5.5rem);
}

/* Os marcos alinham pelo topo e o eixo é desenhado à altura dos pontos, para
   nunca cruzar o texto. A altura vem do conteúdo, não de um valor fixo. */
.linha__marcos{
  list-style:none;margin:0;padding:0;
  position:relative;min-height:14rem;
}
.linha__marcos::before{
  content:'';position:absolute;left:0;right:0;top:var(--eixo);
  height:1px;background:var(--line);
}
.linha__marcos::after{
  content:'';position:absolute;left:0;top:var(--eixo);
  width:50%;height:1px;background:var(--brass-text);
}
.linha__m{
  position:absolute;left:var(--p);top:0;
  display:grid;justify-items:center;text-align:center;
  transform:translateX(-50%);
  width:max-content;max-width:14rem;
}
.linha__m--ini{transform:translateX(0);justify-items:start;text-align:left}
.linha__m--fim{transform:translateX(-100%);justify-items:end;text-align:right}

.linha__pct{
  font-weight:700;font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1;
  letter-spacing:-.03em;color:var(--graphite);
  height:var(--eixo);display:flex;align-items:flex-start;
}
.linha__ponto{
  width:11px;height:11px;border-radius:50%;
  background:var(--brass-text);
  box-shadow:0 0 0 4px var(--bone-2);
  position:relative;z-index:2;
  margin-top:-5.5px;                /* metade da altura: centra na linha */
}
.linha__m--meio .linha__ponto{background:var(--slate);width:13px;height:13px;margin-top:-6.5px}
.linha__quando{
  font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--brass-text);margin-top:1.35rem;
}
.linha__que{font-size:.82rem;line-height:1.6;color:var(--ink-soft);margin-top:.45rem}

/* marca dos 50% do prazo */
.linha__eixo{display:none}

/* a barra da obra, no mesmo eixo temporal */
.linha__nota{
  margin-top:clamp(1.5rem,3vw,2.25rem);text-align:center;
  font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--brass-text);
}

/* as três condições, agora em linha e a ocupar a largura toda */
.condicoes{
  list-style:none;margin:clamp(3rem,6vw,4.5rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.condicoes li{
  display:grid;gap:.45rem;align-content:start;
  /* o padding esquerdo afasta o texto da linha divisória do item anterior */
  padding:clamp(1.5rem,3vw,2rem) clamp(1.5rem,2.6vw,2.25rem) 0;
  border-right:1px solid var(--line);
}
/* o primeiro não tem linha à esquerda: alinha com a margem da página */
.condicoes li:first-child{padding-left:0}
.condicoes li:last-child{border-right:0}
.condicoes b{font-weight:700;font-size:.86rem;color:var(--graphite)}
.condicoes span{font-size:.85rem;line-height:1.7;color:var(--ink-soft)}

@media (max-width:940px){
  /* em ecrã estreito os marcos sobrepunham-se: passa a lista vertical */
  .linha__marcos{height:auto;display:grid;gap:1.75rem}
  .linha__m,.linha__m--ini,.linha__m--fim{
    position:static;transform:none;width:auto;max-width:none;
    grid-template-columns:auto 1fr;align-items:baseline;
    justify-items:start;text-align:left;gap:.3rem 1rem;
  }
  .linha__pct{grid-row:span 3}
  .linha__marcos::before,.linha__marcos::after,.linha__ponto,  .linha__marcos{min-height:0}
  .linha__pct{height:auto}
  .linha__quando{margin-top:0}
  .condicoes{grid-template-columns:1fr}
  .condicoes li{border-right:0;border-bottom:1px solid var(--line);padding-bottom:1.25rem}
  .condicoes li:last-child{border-bottom:0}
}

/* ---------- Formulário ---------- */
.form{display:grid;gap:1.25rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media (max-width:760px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:.5rem}
.field label{font-weight:700;font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.95rem;color:var(--graphite);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.7rem 0;border-radius:0;
  transition:border-color .3s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--slate)}
.field textarea{resize:vertical;min-height:100px}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
/* dois filhos apenas: a caixa e o texto. Sem o <span>, o link e o ponto final
   tornavam-se flex items próprios e o gap partia a frase em três colunas. */
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.78rem;line-height:1.65;color:var(--ink-soft)}
.consent > span{flex:1}
.consent input{margin-top:.2rem;flex:none;accent-color:var(--slate)}
.form__ok{
  padding:1rem 1.25rem;border:1px solid var(--slate);color:var(--slate);
  font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;
  display:none;
}
/* Quando o cliente de email não abre, a mensagem deixa de ser boa notícia:
   dizer «pedido registado» a quem não enviou nada é a pior coisa que um
   formulário pode fazer. */
.form__ok.is-erro{color:var(--graphite);border-left:2px solid var(--brass-text);padding-left:.9rem}
.form__ok.is-on{display:block}

.contact-card{display:grid;gap:1.5rem;align-content:start}
.contact-list{display:grid;gap:.9rem;margin:0;padding:0;list-style:none}
.contact-list a{display:flex;gap:.75rem;align-items:center;font-size:.95rem;color:var(--graphite);transition:color .3s}
.contact-list a:hover{color:var(--slate)}
.contact-list .ic{font-weight:700;font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-soft);min-width:64px}

/* ---------- Footer ---------- */
.site-footer{background:var(--graphite);color:rgba(255,255,255,.6);padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem}
.footer-top{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:940px){.footer-top{grid-template-columns:repeat(2,1fr);gap:2.5rem}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}}
.footer-col h3{font-weight:700;font-size:.64rem;text-transform:uppercase;letter-spacing:.2em;color:var(--brass-2);margin-bottom:1.1rem}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.footer-col a{font-size:.88rem;color:rgba(255,255,255,.62);transition:color .3s}
.footer-col a:hover{color:var(--white)}
.footer-bot{
  border-top:1px solid rgba(255,255,255,.14);padding-top:1.75rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.72rem;letter-spacing:.04em;color:rgba(255,255,255,.6);
}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .scroll-cue{animation:none}
  *{transition-duration:.01ms !important}
}

/* ---------- Acessibilidade ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px}

/* ---------- Tabela: CTA por fração ---------- */
.t-acao{text-align:right;white-space:nowrap}
.t-acao__vazio{color:var(--line);user-select:none}
.t-cta{
  font-weight:700;font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--slate);padding:.5rem .8rem;
  border:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.t-cta:hover{border-color:var(--slate);background:rgba(46,85,97,.06)}
.t-vendas tbody tr.is-alvo{background:rgba(46,85,97,.08)}

/* ---------- Tabela em cartões no telemóvel ----------
   A tabela é a peça mais consultada do site e a que mais gente abre no telemóvel.
   Abaixo de 760px cada fração passa a ser um cartão, sem scroll horizontal. */
@media (max-width:760px){
  .table-scroll{overflow:visible;border:0;background:transparent}
  .t-vendas{min-width:0;display:block}
  .t-vendas thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .t-vendas tbody{display:grid;gap:.85rem}
  .t-vendas tr{
    display:grid;grid-template-columns:1fr 1fr;
    gap:.1rem .9rem;
    border:1px solid var(--line);background:var(--bone);
    padding:1.1rem 1.15rem 1.25rem;
  }
  .t-vendas tbody tr:hover{background:var(--bone)}
  .t-vendas td{border:0;padding:.28rem 0;display:flex;justify-content:space-between;gap:.75rem;align-items:baseline}
  .t-vendas td::before{
    content:attr(data-label);
    font-weight:700;font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;
    color:var(--ink-soft);
  }
  /* fração + estado no topo, lado a lado, sem etiqueta */
  .t-vendas td[data-label="Fração"]{
    grid-column:1;order:-2;padding-bottom:.6rem;
    border-bottom:1px solid var(--line-soft);
  }
  .t-vendas td[data-label="Fração"]::before{content:'Fração'}
  .t-vendas td[data-label="Fração"] .frac{font-size:1.35rem}
  .t-vendas td[data-label="Estado"]{
    grid-column:2;order:-1;justify-content:flex-end;padding-bottom:.6rem;
    border-bottom:1px solid var(--line-soft);
  }
  .t-vendas td[data-label="Estado"]::before{content:none}
  /* preço em destaque, a ocupar a linha toda */
  .t-vendas td[data-label="Preço"]{
    grid-column:1 / -1;order:8;
    padding-top:.7rem;margin-top:.35rem;
    border-top:1px solid var(--line-soft);
  }
  .t-vendas td[data-label="Preço"] .price{font-size:1.2rem}
  .t-acao{grid-column:1 / -1;order:9;text-align:left;padding-top:.5rem}
  .t-acao::before{content:none}
  .t-cta{border-color:var(--slate);width:100%;text-align:center;padding:.75rem}
  .t-acao__vazio{display:none}
}


/* ---------- Formulário: estados ---------- */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid{border-bottom-color:#A33A2B}
.field .erro{
  font-size:.72rem;color:#A33A2B;min-height:1em;
  opacity:0;transform:translateY(-3px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.field.tem-erro .erro{opacity:1;transform:none}
.field.tem-erro input,.field.tem-erro select,.field.tem-erro textarea{border-bottom-color:#A33A2B}
.consent.tem-erro{color:#A33A2B}

/* Openline Group no rodapé: é um link, tem de se ver que é */
@media (prefers-reduced-motion:reduce){
  .footer-bot__link::after{transition:none}
}

/* ---------- Páginas legais (privacidade, termos, cookies) ---------- */
.legal-top{
  background:var(--graphite);
  padding:clamp(7rem,12vw,10rem) 0 clamp(3rem,6vw,4.5rem);
}
.legal-top .eyebrow{color:var(--brass-2)}
.legal-top h1{
  font-weight:400;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.1;
  letter-spacing:-.015em;color:var(--bone);margin-top:1rem;
}
.legal-top .lead{color:rgba(255,255,255,.72);margin-top:1.25rem;max-width:62ch}
.legal-meta{
  margin-top:1.75rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;
  font-weight:700;color:rgba(255,255,255,.5);
}

.legal{max-width:74ch;padding-block:clamp(3.5rem,7vw,6rem)}
.legal h2{
  font-weight:700;font-size:1.05rem;line-height:1.35;color:var(--graphite);
  margin:clamp(2.5rem,5vw,3.5rem) 0 .9rem;
  padding-top:1.5rem;border-top:1px solid var(--line);
}
.legal h2:first-of-type{margin-top:0;border-top:0;padding-top:0}
.legal h2 .n{
  display:inline-block;min-width:2ch;
  color:var(--brass-text);font-variant-numeric:tabular-nums;
}
.legal p{margin-bottom:1.1rem;line-height:1.8}
.legal ul{margin:0 0 1.1rem;padding-left:1.1rem;display:grid;gap:.55rem}
.legal li{line-height:1.75}
.legal li::marker{color:var(--brass-text)}
.legal a{color:var(--slate);border-bottom:1px solid rgba(46,85,97,.35);transition:border-color .3s var(--ease)}
.legal a:hover{border-color:var(--slate)}

/* aviso: o que ainda tem de ser validado por jurista */
.legal-nota{
  margin:2rem 0;padding:1.15rem 1.35rem;
  border-left:2px solid var(--brass);background:var(--bone-2);
  font-size:.88rem;line-height:1.7;color:var(--ink);
}
.legal-nota b{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--brass-text);margin-bottom:.4rem}

.legal-tabela{width:100%;border:1px solid var(--line);margin-bottom:1.1rem;font-size:.88rem}
.legal-tabela th{
  text-align:left;padding:.85rem .9rem;background:var(--bone-2);
  font-weight:700;font-size:.63rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.legal-tabela td{padding:.85rem .9rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
.legal-tabela tr:last-child td{border-bottom:0}

.legal-voltar{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;
  color:rgba(255,255,255,.66);transition:color .3s var(--ease);
}
.legal-voltar:hover{color:var(--bone)}

/* barra inferior do rodapé, agora com os links legais */
/* A assinatura que fecha a página. O rácio do lockup é 5,483:1, por isso
   15,5vw com tecto em 235px enche a largura útil sem nunca transbordar.
   A 13% de branco é presença, não grito: lê-se como marca de água. */
.footer-marca{
  margin:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem);
  font-weight:700;letter-spacing:-.025em;line-height:.8;
  font-size:clamp(2rem,15.5vw,208px);   /* recurso, para quem não tem cqw */
  color:rgba(255,255,255,.13);
  user-select:none;
}
/* O vw obriga a adivinhar a goteira, e a adivinha falha nas larguras onde a
   goteira encosta ao mínimo. Com unidades de contentor mede-se a área útil
   directamente, seja qual for o ecrã.

   Enche 97,5% e não 99%: com 18cqw sobrava 0,91% de folga, e a mesma fonte
   desenhada com DirectWrite no Windows pode sair um pouco mais larga do que
   com CoreText no macOS. Aí a última letra era cortada pelo overflow-x:hidden
   do body, em silêncio. Os 4px que se perdem não se veem. */
@supports (font-size:1cqw){
  .site-footer .wrap{container-type:inline-size}
  .footer-marca{font-size:min(17.7cqw,208px)}
}
.footer-legal__links{display:flex;flex-wrap:wrap;gap:.4rem 1.15rem}
.footer-legal__links a{
  position:relative;color:rgba(255,255,255,.6);transition:color .3s var(--ease);
}
.footer-legal__links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--slate-soft);
  transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease);
}
.footer-legal__links a:hover{color:var(--white)}
.footer-legal__links a:hover::after,.footer-legal__links a:focus-visible::after{transform:scaleX(1)}
.footer-bot{align-items:flex-end}
.footer-contacto a{font-size:.95rem}
.footer-morada{font-size:.88rem;line-height:1.7;color:rgba(255,255,255,.62);margin-top:.5rem}
/* a cidade herda o tratamento dos títulos de coluna do rodapé */
.footer-morada .cidade{
  display:block;font-weight:700;font-size:.64rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--brass-2);margin-bottom:.25rem;
}
@media (max-width:760px){
  .footer-bot{flex-direction:column;align-items:flex-start;gap:1.25rem}
}
@media (prefers-reduced-motion:reduce){.footer-legal__links a::after{transition:none}}
.consent a{color:var(--slate);border-bottom:1px solid rgba(46,85,97,.4)}
.consent a:hover{border-color:var(--slate)}

/* cabeçalho das páginas legais: fixo sobre a faixa escura, sem estados de scroll */
.site-header--legal{position:absolute;background:transparent;box-shadow:none}
.site-header--legal .wordmark{color:var(--bone)}
.site-header--legal::before{display:none}

/* ============================================================
   Consentimento de cookies
   Estrutura do Cookiebot (separadores, categorias, três ações),
   na paleta do site. Os três botões têm o mesmo peso visual:
   o RGPD exige que recusar seja tão fácil como aceitar.
   ============================================================ */
.ck{
  position:fixed;inset:auto 0 0 0;z-index:140;
  padding:clamp(.75rem,2vw,1.5rem);
  display:flex;justify-content:center;
  pointer-events:none;
}
.ck__caixa{
  pointer-events:auto;
  width:min(1000px,100%);
  background:var(--bone);
  border:1px solid var(--graphite);
  box-shadow:0 24px 60px rgba(20,26,28,.28);
  display:flex;flex-direction:column;
  max-height:min(86vh,720px);
  transform:translateY(14px);opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.ck.is-aberto .ck__caixa{transform:none;opacity:1}

.ck__topo{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1.1rem,2.5vw,1.75rem);
  border-bottom:1px solid var(--line);
}
.ck__marca{font-size:1.15rem;color:var(--graphite)}
.ck__selo{
  font-weight:400;font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink-soft);
}

/* o diálogo recebe foco para prender o teclado, mas é um contentor:
   não leva anel, ao contrário de tudo o que é accionável */
/* Campo isco do formulário: fora do ecrã, fora do teclado e fora dos
   leitores de ecrã. Só robôs o preenchem, e o servidor recusa esses. */
.isco{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ck:focus{outline:none}
.ck__tabs{display:flex;border-bottom:1px solid var(--line)}
.ck__tab{
  position:relative;flex:1;
  padding:1rem .5rem;
  font-weight:400;font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-soft);
  transition:color .3s var(--ease);
}
.ck__tab.is-on{font-weight:700;letter-spacing:.14em}
.ck__tab::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--slate);transform:scaleX(0);transform-origin:center;
  transition:transform .35s var(--ease);
}
.ck__tab:hover{color:var(--graphite)}
.ck__tab.is-on{color:var(--slate)}  /* peso definido acima */
.ck__tab.is-on::after{transform:scaleX(1)}

.ck__corpo{overflow:hidden;display:flex}
.ck__painel{padding:clamp(1.25rem,2.6vw,1.9rem);width:100%}
.ck__painel[hidden]{display:none}
.ck__scroll{max-height:min(38vh,320px);overflow-y:auto;padding-right:.5rem}
.ck__titulo{
  font-weight:700;font-size:clamp(1.45rem,2.6vw,1.95rem);line-height:1.15;
  letter-spacing:-.015em;color:var(--graphite);margin-bottom:.9rem;
}
.ck__texto{font-size:.94rem;line-height:1.8;color:var(--ink);margin-bottom:.9rem;max-width:78ch}
.ck__texto strong{font-weight:700;color:var(--graphite)}
.ck__texto a{color:var(--slate);border-bottom:1px solid rgba(46,85,97,.4)}
.ck__texto a:hover{border-color:var(--slate)}
.ck__nota{font-size:.78rem;line-height:1.7;color:var(--ink-soft)}

/* categorias */
.ck__cats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);margin-top:1.25rem;
}
.ck__cat{
  display:grid;gap:.6rem;justify-items:center;
  padding:1.1rem .6rem;border-right:1px solid var(--line);text-align:center;
}
.ck__cat:last-child{border-right:0}
.ck__cat-nome{font-weight:700;font-size:.88rem;letter-spacing:-.005em;color:var(--graphite)}
.ck__cat-nota{font-weight:400;font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}

/* interruptor */
.ck__sw{position:relative;display:inline-block;cursor:pointer;line-height:0}
.ck__sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ck__sw-pista{
  display:block;width:46px;height:24px;background:var(--iron);
  position:relative;transition:background .3s var(--ease);
}
.ck__sw-pista::after{
  content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;
  background:var(--bone);transition:transform .3s var(--ease);
}
.ck__sw input:checked + .ck__sw-pista{background:var(--slate)}
.ck__sw input:checked + .ck__sw-pista::after{transform:translateX(22px)}
.ck__sw input:focus-visible + .ck__sw-pista{outline:2px solid var(--slate);outline-offset:3px}
.ck__sw.is-fixo{cursor:default}
.ck__sw.is-fixo input{cursor:default}
.ck__sw.is-fixo .ck__sw-pista{background:var(--slate)}
.ck__sw.is-fixo .ck__sw-pista::after{background:var(--bone);opacity:.72}

/* tabela dos detalhes */
.ck__tabela{width:100%;font-size:.82rem;border:1px solid var(--line)}
.ck__tabela th{
  text-align:left;padding:.7rem .8rem;background:var(--bone-2);
  font-weight:700;font-size:.6rem;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-soft);
  border-bottom:1px solid var(--line);
}
.ck__tabela td{padding:.8rem .85rem;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.7;font-weight:400}
.ck__tabela td:first-child{font-weight:700;color:var(--graphite);white-space:nowrap}
.ck__tabela tr:last-child td{border-bottom:0}
.ck__tabela code{font-size:.9em;background:var(--bone-2);padding:.1em .35em}

/* ações — os três com o mesmo peso */
.ck__acoes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
  padding:clamp(1rem,2.2vw,1.4rem) clamp(1.1rem,2.5vw,1.75rem);
  border-top:1px solid var(--line);background:var(--bone-2);
}
.btn--ck{padding:1rem 1rem;font-size:.7rem;letter-spacing:.15em}

/* botão discreto para reabrir o painel depois de decidido */
.ck-repor{
  background:none;border:0;padding:0;
  font:inherit;font-size:.88rem;color:rgba(255,255,255,.6);
  text-align:left;cursor:pointer;transition:color .3s var(--ease);
}
.ck-repor:hover{color:var(--white)}

@media (max-width:760px){
  .ck__cats{grid-template-columns:repeat(2,1fr)}
  .ck__cat:nth-child(2n){border-right:0}
  .ck__cat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .ck__acoes{grid-template-columns:1fr}
  .ck__tab{font-size:.62rem;letter-spacing:.1em;padding:.85rem .3rem}
  .ck__selo{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ck__caixa,.ck__tab::after,.ck__sw-pista,.ck__sw-pista::after{transition:none}
}
/* o "Preferências de cookies" vive na barra legal, ao lado dos outros links */
.footer-legal__repor{
  position:relative;font-size:.72rem;letter-spacing:.04em;
  color:rgba(255,255,255,.6);
}
.footer-legal__repor::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--slate-soft);
  transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease);
}
.footer-legal__repor:hover{color:var(--white)}
.footer-legal__repor:hover::after,.footer-legal__repor:focus-visible::after{transform:scaleX(1)}
/* "Preferências de cookies" quando aparece dentro de um parágrafo */
.ck-repor--texto{
  color:var(--slate);border-bottom:1px solid rgba(46,85,97,.4);
  font-size:inherit;padding-bottom:1px;
}
.ck-repor--texto:hover{color:var(--slate);border-color:var(--slate)}
.ck__nota strong{font-weight:700;color:var(--ink)}

/* Faixa com planta.
   A 3.65:1 a planta era decapitada em cima e em baixo e ficava ampliada 1.5x.
   A 2.4:1 cabe quase inteira e a ampliação desce para ~1.2x.
   A legenda vai numa tarja de rodapé, como nas pranchas de arquitetura: sobre o
   desenho, o texto branco descia a 3.0:1 por causa das linhas pretas. */
@media (max-width:760px){
    }


/* Colagem alinhada: as duas peças partilham a linha de topo e a de base.
   Usa-se onde as imagens têm a mesma proporção e o desfasamento não ajuda,
   como nos desenhos de arquitetura, que se comparam melhor lado a lado. */
.collage--alinhada{align-items:start}
.collage--alinhada .collage__big{grid-column:1 / span 1;order:initial}
.collage--alinhada .collage__small{grid-column:2 / span 1;order:initial;transform:none}

/* ---------- Hero do empreendimento ----------
   A home tem o wordmark como protagonista; a página da obra tem o nome dela. */
.hero--obra .hero__inner{gap:clamp(1rem,2vw,1.5rem)}
.hero__local{
  font-weight:700;font-size:clamp(.66rem,1.3vw,.76rem);
  text-transform:uppercase;letter-spacing:.24em;
  color:var(--brass-2);text-shadow:0 1px 14px rgba(18,22,24,.6);
}
.hero__nome{
  font-weight:400;font-size:clamp(2.6rem,7.5vw,5.6rem);line-height:1.02;
  letter-spacing:-.025em;color:var(--bone);
  text-shadow:0 2px 40px rgba(18,22,24,.55);
}
.nav__voltar{position:relative;padding-left:1.1rem}
.nav__voltar::before{
  content:'←';position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-size:1.15em;line-height:1;
}

/* ---------- Cartões de empreendimento ----------
   `obras--um` dá largura total ao único que existe; quando houver mais,
   troca-se por `obras--grelha` e passam a duas colunas. */
.obras{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.obras--um{grid-template-columns:1fr}      /* um empreendimento: largura toda */
.obras--grelha{grid-template-columns:repeat(2,1fr)}
.obra{background:var(--bone);border:1px solid var(--line);transition:border-color .4s var(--ease)}
.obra:hover{border-color:var(--slate)}
.obra__link{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch}
.obras--grelha .obra__link{grid-template-columns:1fr}

.obra__media{position:relative;overflow:hidden;display:block;min-height:100%}
.obra__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.obra:hover .obra__media img{transform:scale(1.04)}
.obra__estado{
  position:absolute;left:0;bottom:0;
  padding:.6rem 1rem;background:var(--graphite);color:var(--bone);
  font-weight:700;font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;
}

.obra__corpo{
  display:grid;align-content:center;gap:1.1rem;
  padding:clamp(1.75rem,3.5vw,3rem);
}
.obra__local{
  font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--brass-text);
}
.obra__nome{
  font-weight:400;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.1;
  letter-spacing:-.02em;color:var(--graphite);
}
.obra__dados{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 1.5rem;
  border-top:1px solid var(--line);padding-top:1.1rem;
}
.obra__dados span{display:grid;gap:.15rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);font-weight:700}
.obra__dados b{font-weight:700;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--graphite)}
.obra__cta{
  font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--slate);
}
.obra:hover .obra__cta{color:var(--graphite)}

@media (max-width:940px){
  .obra__link,.obras--grelha .obra__link{grid-template-columns:1fr}
  .obra__media{aspect-ratio:16/10;min-height:0}
  .obras--grelha{grid-template-columns:1fr}
}

/* ---------- Cabeçalho de página interior ----------
   Nas páginas sem hero, o header já nasce com fundo sólido: não há imagem por
   baixo para justificar o scrim, e sem fundo o conteúdo passava por trás. */
/* O header fixo está fora do fluxo, por isso o conteúdo começava por baixo
   dele: a primeira linha do título ficava cortada. O header tem dois estados,
   81px e 99px, e passa de um para o outro por volta dos 420px, quando o botão
   "Pedir informação" parte em duas linhas. Reserva-se o pior caso: um
   breakpoint novo aos 429px sairia do sistema (560 · 760 · 940 · 1200), e os
   18px a mais no desktop desaparecem dentro do padding da secção. */
.site-header--fixo ~ main{padding-top:99px}

.site-header--fixo{
  background:rgba(240,241,241,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line-soft);
}
.site-header--fixo::before{display:none}
.site-header--fixo .wordmark{color:var(--graphite)}
/* Sem isto, as barras do burger ficavam --bone sobre um header --bone:
   1:1 de contraste, invisível, nas páginas de fundo claro. */
.site-header--fixo .burger span{background:var(--graphite)}

/* Cabeçalho de listagem: imagem, título e a barra de filtros assente na base.
   A imagem é um plano diurno do Porto — distingue-se do hero nocturno da home. */
.cabeca{
  position:relative;
  /* baixado de 11rem: com 461px de cabeçalho, o primeiro card caía a 661px
     numa janela de 694 e a listagem abria sem mostrar nada. */
  padding-top:clamp(6.5rem,9vw,7.5rem);
  padding-bottom:0;
  background:var(--graphite);
  overflow:hidden;
}
.cabeca__media{position:absolute;inset:0}
.cabeca__media img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.cabeca__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,22,24,.66) 0%,rgba(18,22,24,.34) 45%,rgba(18,22,24,.58) 100%);
}
.cabeca__texto{position:relative;padding-bottom:clamp(2rem,3.5vw,2.75rem)}
.cabeca__t{
  font-weight:700;font-size:clamp(2.1rem,4.2vw,3.25rem);line-height:1.05;
  letter-spacing:-.03em;color:var(--bone);
  text-shadow:0 2px 30px rgba(18,22,24,.5);
}
.cabeca__sub{
  margin-top:.9rem;max-width:52ch;
  font-size:clamp(.92rem,1.3vw,1.05rem);line-height:1.7;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 16px rgba(18,22,24,.6);
}

/* barra de filtros, assente na base do cabeçalho */
.filtros{position:relative;background:var(--bone);border-top:1px solid var(--line)}
.filtros__linha{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(1rem,2.4vw,2.25rem);
  padding-block:clamp(1.1rem,2.2vw,1.5rem);
}
.filtro{display:grid;gap:.4rem;min-width:11rem}/* 11rem e nao 8.5: "Em comercializacao" ocupa 117px em Metrolis mas 132 em Segoe UI e 146 em Verdana. Quem abrir o site em Windows sem a fonte carregada via a opcao cortada a meio. Medido a 2026-09-01. */
.filtro > span{
  font-weight:700;font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-soft);
}
.filtro select{
  font:inherit;font-size:.92rem;color:var(--graphite);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.4rem 1.4rem .4rem 0;border-radius:0;
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:border-color .3s var(--ease);
}
.filtro select:focus{outline:0;border-bottom-color:var(--slate)}
.filtros__r{
  margin-left:auto;padding-bottom:.4rem;
  font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-soft);white-space:nowrap;
}
.filtros__r b{display:inline-block;color:var(--graphite);font-size:1.05rem;letter-spacing:0;margin-right:.3rem}
/* O número mudava sem se ver. Sobe uma vez, para acompanhar o filtro. */
@keyframes conta-troca{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
.filtros__r.is-novo b{animation:conta-troca .34s var(--ease)}
.obra{transition:opacity .24s var(--ease),transform .24s var(--ease)}
.obra.is-fora{opacity:0;transform:translateY(-4px)}
.obra.is-entra{opacity:0;transform:translateY(10px)}

/* quando um filtro não deixa nada de fora */
.sem-resultados{
  padding:clamp(3rem,6vw,4.5rem) 0;text-align:center;
  font-size:.95rem;color:var(--ink-soft);
}
.sem-resultados b{display:block;font-size:1.15rem;color:var(--graphite);margin-bottom:.4rem}

@media (max-width:760px){
  .filtros__linha{gap:1rem 1.25rem}
  .filtro{min-width:calc(50% - .75rem)}
  .filtros__r{margin-left:0;width:100%;padding-top:.5rem}
}@media (max-width:560px){/* Um filtro por linha. A 50% da largura, "Em comercializacao" nao cabe: num ecra de 320px sobram 126px uteis para 146px de texto em Verdana, que e a fonte com que o Windows substitui a Metrolis. Esta regra tem de vir DEPOIS do bloco de 760, senao aquele ganha e volta aos 50%. */.filtro{min-width:100%}}

.lista__contagem{
  font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-soft);margin-bottom:clamp(1.5rem,3vw,2rem);
}
.lista__contagem b{color:var(--graphite);font-size:1.05rem;letter-spacing:0;margin-right:.35rem}

.proximo{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  border:1px dashed var(--line);
  padding:clamp(1.75rem,3.5vw,2.5rem);
  display:grid;gap:.6rem;justify-items:start;
}
.proximo__t{font-weight:700;font-size:1.05rem;color:var(--graphite)}
.proximo__d{font-size:.9rem;line-height:1.75;color:var(--ink-soft);max-width:62ch}

/* ---------- As três linhas de negócio ---------- */
/* ---------- O que fazemos: faixas ----------
   Três faixas a toda a largura em vez de três colunas estreitas: o texto
   respira e a secção deixa de ser quase toda cabeçalho. As três pesam o
   mesmo. O ícone corre ao lado do título, alinhado pelo centro, para que
   as três cabeças fiquem na mesma altura óptica. */
.negocios{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;border-top:1px solid var(--line)}
.negocio{
  display:grid;grid-template-columns:minmax(190px,.8fr) 2.6fr;
  gap:clamp(1.25rem,4vw,3.5rem);
  padding-block:clamp(1.75rem,3.2vw,2.5rem);
  border-bottom:1px solid var(--line);
}

/* align-self:start prende a cabeça ao topo da faixa; o align-items:center
   é só a relação entre o ícone e o título, não com a faixa toda */
.negocio__cab{display:flex;align-items:center;align-self:start;gap:.8rem}
.negocio__ic{width:36px;height:36px;flex:none;color:var(--slate)}
.negocio__t{
  font-weight:700;font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.2;
  letter-spacing:-.01em;color:var(--graphite);
}

.negocio__corpo{display:grid;gap:1.15rem;align-content:start;max-width:64ch}
.negocio__d{font-size:.92rem;line-height:1.75;color:var(--ink)}

.negocio__l{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.negocio__l li{
  position:relative;padding-left:1rem;
  font-size:.84rem;line-height:1.6;color:var(--ink-soft);
}
.negocio__l li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:5px;height:1px;background:var(--brass-text);
}
.negocio .link-under{justify-self:start}

@media (max-width:760px){
  .negocio{grid-template-columns:1fr;gap:1.1rem}
}

/* ---------- Obras: painéis com as fotos a passar ----------
   Duas obras, uma entregue e uma à venda. Sem setas nem pontos: com duas não há
   nada para navegar, e os controlos só serviriam para anunciar que são só duas.
   O nome com a régua herda o gesto do resto do site; o estado é frio, porque é
   informação com que o cliente decide (--iron vendido, --slate à venda). */
.obras-p{
  display:grid;grid-template-columns:1fr 1.95fr;
  gap:clamp(2rem,4vw,3.5rem);
  /* ao topo, não ao centro: assim o vazio junta-se todo em baixo, num só
     sítio, em vez de se dividir acima e abaixo do texto */
  align-items:start;
}
/* o display normal é grande de mais para esta coluna: aqui a força vem do
   contraste com os painéis, não do tamanho */
/* este cabe em 118px: aproveita a folga que os títulos-frase não têm */
.obras-p__texto .h-display{font-size:clamp(2rem,4.4vw,4rem)}
.obras-p__texto .lead{margin-top:1.1rem;max-width:34ch}

.obras-p__lista{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2.2vw,1.75rem);
}
.painel{display:block}
.painel__link{display:block;color:inherit}

.painel__fotos{
  position:relative;display:block;aspect-ratio:4/5;
  overflow:hidden;background:var(--bone-2);
}
.painel__fotos img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;z-index:0;transition:opacity .8s var(--ease),transform .9s var(--ease);
}
.painel__fotos img.is-on{opacity:1;z-index:1}
.painel__link:hover .painel__fotos img.is-on{transform:scale(1.03)}

.painel__nome{
  display:flex;align-items:center;gap:1rem;margin-top:1.15rem;
  font-size:clamp(.95rem,1.5vw,1.15rem);line-height:1.2;color:var(--graphite);
}
.painel__nome > span{flex:none}
.painel__nome::after{content:'';flex:1;height:1px;background:var(--line)}
.painel__link:hover .painel__nome::after{background:var(--slate)}

.painel__estado{
  display:block;margin-top:.55rem;
  font-weight:700;font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;
}
.painel--vendido .painel__estado{color:var(--iron)}
.painel--venda .painel__estado{color:var(--slate)}

@media (max-width:940px){
  .obras-p{grid-template-columns:1fr;gap:clamp(2rem,5vw,3rem)}
}
@media (max-width:560px){
  .obras-p__lista{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .painel__fotos img{transition:none}
}


/* ---------- Rótulo de secção ----------
   Volta o "Em destaque": não é um pré-título de categoria, é uma afirmação,
   e a régua até à margem torna-o um elemento desenhado e não uma casa de molde. */
.rotulo{
  display:flex;align-items:center;gap:clamp(1rem,2vw,1.75rem);
  font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;
  color:var(--brass-text);
  margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}
.rotulo span{flex:none}
.rotulo::after{content:'';flex:1;height:1px;background:var(--line)}

/* ---------- Quebras de linha ----------
   Medido: sem isto, quatro títulos da home deixavam uma palavra sozinha na
   linha ("edifício.", "grupo.", "nome.", "honestbenefit."). O balance distribui
   as linhas em vez de encher até ao limite; o pretty trata da última linha dos
   parágrafos. O .thin passa a bloco para o balance actuar em cada metade do
   título, senão só corrige a primeira. */
h1,h2,h3,.h-display,.cabeca__t,.painel__nome,.obra__nome,.servico__t{text-wrap:balance}
.lead,.entregue__txt,p{text-wrap:pretty}
.h-display .thin{display:block}


/* ---------- Quem constrói, no rodapé ----------
   O rótulo usa o mesmo tratamento dos títulos de coluna do rodapé. O logótipo
   fica na cor da marca: sobre o grafite dá 4,08:1, acima do mínimo de 3:1 para
   elemento gráfico, e é a única cor de fora da paleta no site inteiro, o que
   é próprio de um logótipo de terceiros e não de decoração. */
.footer-obra__logo{display:inline-block;margin-top:.15rem;opacity:.9;transition:opacity .3s var(--ease)}
.footer-obra__logo:hover,.footer-obra__logo:focus-visible{opacity:1}
.footer-obra__logo img{display:block;width:clamp(118px,13vw,148px);height:auto}


/* ---------- Redes, na coluna dos Projetos ----------
   Sem moldura à volta: cada símbolo já é a sua própria caixa, e duas molduras
   encaixadas uma na outra ficam a brigar. As marcas vão sólidas, que é como
   se lêem a 22px; em traço fino, o "f" e o "in" desaparecem. */
.redes-bloco{margin-top:clamp(2rem,4vw,3rem)}
.redes-t{font-size:.86rem;line-height:1.65;color:var(--ink-soft);max-width:32ch}
.redes-t strong{color:var(--ink);font-weight:700}
.redes{
  list-style:none;margin:1.1rem 0 0;padding:0;
  display:flex;align-items:center;gap:1.25rem;
}
.redes a{
  display:block;color:var(--iron);
  /* o símbolo tem 22px mas o alvo de toque tem de ser maior: o padding
     alarga a área clicável e a margem negativa devolve o alinhamento */
  padding:.6rem;margin:-.6rem;
  transition:color .3s var(--ease);
}
.redes a:hover,.redes a:focus-visible{color:var(--slate)}
.redes svg{width:22px;height:22px;display:block}


/* ---------- Menu global ----------
   Irmão do header, não filho: dentro do header o backdrop-filter criava um
   containing block e prendia o overlay à barra. Abre em todos os tamanhos,
   porque o que mostra (as obras em imagem) não cabe numa barra. */
.menu{
  position:fixed;inset:0;z-index:85;
  background:var(--graphite);
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s;
  overflow-y:auto;overscroll-behavior:contain;
  display:grid;align-content:center;
  padding:clamp(5.5rem,13vh,9rem) var(--gut) clamp(2.5rem,6vh,4rem);
}
.menu.is-open{opacity:1;visibility:visible}

.menu__caixa{
  position:relative;z-index:1;
  width:100%;max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:1fr;
  gap:clamp(2.5rem,7vh,5rem);
}

.menu__nav{display:block}
.menu__links{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.menu__links a{
  display:inline-block;
  font-weight:400;font-size:clamp(2rem,5.6vw,5rem);line-height:1.14;
  letter-spacing:-.02em;color:var(--bone);
  transition:color .3s var(--ease);
}
.menu__links a:hover,.menu__links a:focus-visible{color:var(--brass-2)}

/* Ficou um bloco só: o telefone e o email, que são acção. As moradas saíram
   para a página de contacto e para o rodapé, onde as pessoas as procuram. */
.menu__dados{display:grid;justify-content:start;align-content:start}
/* Latão mais claro do que o --brass-2 do rodapé: aqui a marca de água pode
   passar por trás, e sobre esse fundo o --brass-2 cai para 3,72:1. */
.menu__rot{
  font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;
  color:#C0B08B;margin-bottom:.9rem;
}
.menu__bloco a{
  display:block;font-size:1.05rem;color:rgba(255,255,255,.72);
  margin-bottom:.55rem;transition:color .3s var(--ease);
}
.menu__bloco a:hover,.menu__bloco a:focus-visible{color:var(--white)}

/* A marca faz de chão. Vai a 9% e não aos 13% do rodapé porque aqui há texto
   por cima: acima de 9%, o fundo local sobe o suficiente para as moradas
   caírem abaixo de 4,5:1. A 9% ficam em 5,02:1. */
.menu__marca{
  position:absolute;inset:auto var(--gut);top:50%;
  transform:translateY(-50%);
  max-width:var(--max);margin-inline:auto;
  font-weight:700;letter-spacing:-.025em;line-height:.8;
  /* 15,4vw e 233px, e não 15,8/239: ver a nota da .footer-marca. Aqui a
     folga descia a 0,22% aos 583px, ainda mais apertada que no rodapé. */
  font-size:clamp(2rem,15.4vw,233px);
  color:rgba(255,255,255,.09);
  user-select:none;pointer-events:none;
  z-index:0;
}

/* Entrada em cascata: cada bloco entra a seu tempo em vez de tudo de uma vez. */
.menu__links li,.menu__bloco{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
/* O lugar na fila (--i) é posto pelo JS, um a um, por ordem do documento.
   Estava escrito à mão só até ao terceiro link, e o quarto, "Contacto", ficava
   com atraso zero: entrava antes de todos os outros. Assim serve o número de
   links que houver. Sem JS, --i cai a 0 e entram juntos, que é aceitável. */
.menu.is-open .menu__links li,
.menu.is-open .menu__bloco{
  opacity:1;transform:none;
  transition-delay:calc(.1s + var(--i,0) * .06s);
}

@media (max-width:940px){
  .menu{align-content:start}
  .menu__caixa{grid-template-columns:1fr;gap:clamp(2rem,6vh,3rem)}
  .menu__links a{font-size:clamp(1.9rem,8vw,3rem)}
  /* Aqui o conteúdo encosta ao topo e sobra meio ecrã em baixo. Ao centro, a
     marca caía por cima do email; encostada ao fundo faz mesmo de chão, que
     é o que o desenho diz. No desktop fica a meio, onde já não estorva. */
  .menu__marca{top:auto;bottom:clamp(2rem,6vh,4rem);transform:none}
}

@media (prefers-reduced-motion:reduce){
  .menu__links li,.menu__bloco{transition:none;opacity:1;transform:none}
  .menu{transition:opacity .01s}
}


/* ---------- Tipologias: a foto abre a galeria daquela tipologia ----------
   Os botões ocultos existem só para o lightbox os apanhar; ficam fora do
   fluxo, fora do foco e fora dos leitores de ecrã. */
.lb-conjunto,.lb-oculto{display:none}
.card__media--zoom{
  position:relative;display:block;width:100%;padding:0;border:0;
  background:none;cursor:pointer;overflow:hidden;
}
.card__media--zoom img{transition:transform .8s var(--ease)}
.card:hover .card__media--zoom img,
.card__media--zoom:focus-visible img{transform:scale(1.04)}
.card__conta{
  position:absolute;left:0;bottom:0;
  padding:.55rem .9rem;background:var(--graphite);color:var(--bone);
  font-weight:700;font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;
  transition:background .3s var(--ease);
}
.card:hover .card__conta,
.card__media--zoom:focus-visible .card__conta{background:var(--slate)}


/* ---------- Perguntas frequentes ----------
   <details> nativo: abre e fecha sem JavaScript, é alcançável por teclado
   e os leitores de ecrã já sabem anunciá-lo. */
/* link dentro de texto corrido: o .link-under é maiúsculas e serve para
   links soltos; a meio de uma frase lia-se como um grito. */
.link-txt{color:var(--slate);border-bottom:1px solid rgba(46,85,97,.35);transition:border-color .3s var(--ease)}
.link-txt:hover,.link-txt:focus-visible{border-color:var(--slate)}
.faq{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  display:flex;align-items:flex-start;gap:1.25rem;
  padding:clamp(1.25rem,2.4vw,1.75rem) 0;
  font-weight:700;font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.4;
  color:var(--graphite);cursor:pointer;list-style:none;
  transition:color .3s var(--ease);
}
.faq__q::-webkit-details-marker{display:none}
/* A pergunta é um <h2> dentro do <summary>, para o rastreador ver a
   hierarquia. Herda tudo, para o desenho não dar por isso. */
.faq__q h2{font:inherit;letter-spacing:inherit;color:inherit;margin:0;display:inline}
.faq__q::after{
  content:'';flex:none;margin-left:auto;margin-top:.45em;
  width:12px;height:12px;
  border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);
  transform:rotate(45deg);
  transition:transform .35s var(--ease),border-color .3s var(--ease);
}
.faq__item[open] .faq__q::after{transform:rotate(-135deg);border-color:var(--slate)}
.faq__item.is-a-fechar .faq__q::after{transform:rotate(45deg);border-color:var(--ink-soft)}
.faq__q:hover,.faq__item[open] .faq__q{color:var(--slate)}
.faq__a{padding:0 0 clamp(1.25rem,2.4vw,1.75rem);overflow:hidden}
.faq__a p{font-size:.95rem;line-height:1.8;color:var(--ink);max-width:70ch;margin:0}
@media (prefers-reduced-motion:reduce){
  .faq__q::after{transition:none}
  .t-vendas tbody tr,.obra{transition:background .25s var(--ease)}
  .t-vendas tbody tr.is-fora,.t-vendas tbody tr.is-entra,
  .obra.is-fora,.obra.is-entra{opacity:1;transform:none}
  .filtros__r.is-novo b{animation:none}
}