/* ============================================================
   CicloJob — páginas interiores
   ============================================================ */

/* ---------------- imagem que sangra ---------------- */
.sangra{ margin:0 0 clamp(4rem,9vw,8rem); position:relative; }
/* a moldura recorta; a imagem é mais alta e desliza mais devagar do que a página */
.sangra__moldura{ overflow:hidden; height:clamp(18rem,52vh,34rem); position:relative; }
.sangra img{ width:100%; height:100%; object-fit:cover; display:block; }
/* A imagem fica presa ao ecrã (position:fixed) e o clip-path da moldura
   recorta-a — inclusive sendo ela fixed. É a janela que desliza sobre a
   imagem, não o contrário. Faz o mesmo que background-attachment:fixed,
   que o iOS não suporta.                                               */
.sangra--paralaxe .sangra__moldura{ clip-path:inset(0); }
.sangra--paralaxe img{
  position:fixed; top:0; left:0;
  width:100vw; height:100vh;
}
@media (prefers-reduced-motion:reduce){
  .sangra--paralaxe .sangra__moldura{ clip-path:none; }
  .sangra--paralaxe img{ position:static; width:100%; height:100%; }
}
.sangra figcaption{ padding:.85rem var(--margem) 0; color:var(--cinza); }

/* ---------------- SOBRE · história ---------------- */
.historia{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);
  padding-bottom:clamp(5rem,11vw,9rem);
}
.historia__marca{ grid-column:1/3; display:grid; gap:1.15rem; align-content:start; }
.historia__marca i{ display:block; width:1px; height:clamp(4rem,8vw,6rem); background:var(--latao); }
.historia__texto{ grid-column:5/13; }
.historia__texto h2{ margin-bottom:clamp(2rem,4vw,3rem); }
.historia__cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,3vw,3.5rem); }
.historia__cols p{ color:var(--cinza); }
@media (max-width:900px){
  .historia__marca,.historia__texto{ grid-column:1/-1; }
  .historia__texto{ margin-top:2rem; }
  .historia__cols{ grid-template-columns:1fr; }
}

/* ---------------- SOBRE · pilares (porquê nós) ---------------- */
/* Por omissão (sem JS, reduced-motion, ou ecrã estreito): grelha normal,
   tal como antes — é o estado de segurança. O JS só acrescenta
   .pin-ativo à secção quando o efeito de scroll fixo faz sentido.      */
.pilares{ padding-block:clamp(5rem,11vw,9rem); }
.pilares__topo{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);
  align-items:end; margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
.pilares__topo .num{ grid-column:1/4; }
.pilares__topo h2{ grid-column:4/13; }
.pilares__lista{
  --folga:clamp(1.25rem,2vw,1.75rem);
  list-style:none; margin:calc(var(--folga) * -1); padding:0 var(--margem);
  display:grid; grid-template-columns:repeat(3,1fr);
  column-gap:clamp(2rem,4vw,4rem); row-gap:clamp(2.75rem,5vw,4.5rem);
}
.pilar{ padding:var(--folga); }
.pilar{
  display:grid; gap:.85rem; align-content:start;
  border-radius:.35rem;
  transition:background .45s var(--ease), box-shadow .45s var(--ease);
}
/* hover: fundo azul-noite, conteúdo a claro */
.pilar{ transition:background .45s var(--ease), box-shadow .45s var(--ease), color .45s var(--ease); }
.pilar:hover{
  background:#1F243E; color:var(--cal);
  box-shadow:0 18px 42px rgba(31,36,62,.28);
}
.pilar:hover .pilar__icone{ color:var(--latao-cl); }
.pilar:hover .pilar__titulo{ color:var(--cal); }
.pilar:hover p{ color:rgba(244,241,236,.72); }
.pilar:hover .pilar__marcas li{ color:var(--cal); }
.pilar:hover .pilar__marcas li::before{ border-color:var(--latao-cl); }
/* separadores finos entre colunas, como no resto da página */
.pilares__lista > .pilar:not(:nth-child(3n+1)){
  border-left:1px solid var(--linha);
  transition:background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.pilares__lista > .pilar:hover{ border-left-color:transparent; }
.pilar__icone{ display:block; color:var(--latao); transition:color .45s var(--ease); }
.pilar p, .pilar__titulo, .pilar__marcas li{ transition:color .45s var(--ease); }
.pilar__icone svg{ width:clamp(1.75rem,2.6vw,2.25rem); height:auto; display:block; }
.pilar__titulo{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.2; letter-spacing:-.008em;
}
.pilar p{ margin:0; color:var(--cinza); font-size:.9375rem; max-width:34ch; }
.pilar__marcas{ list-style:none; margin:.35rem 0 0; padding:0; display:grid; gap:.5rem; }
.pilar__marcas li{
  position:relative; padding-left:1.5rem;
  font-size:.875rem; letter-spacing:.01em;
}
.pilar__marcas li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:.6rem; height:.32rem;
  border-left:1.5px solid var(--latao); border-bottom:1.5px solid var(--latao);
  rotate:-45deg;
}
.pilares__progresso{ display:none; }
@media (max-width:980px){
  .pilares:not(.pin-ativo) .pilares__lista{ grid-template-columns:repeat(2,1fr); }
  .pilares:not(.pin-ativo) .pilares__lista > .pilar:not(:nth-child(3n+1)){ border-left:0; }
  .pilares:not(.pin-ativo) .pilares__lista > .pilar:not(:nth-child(2n+1)){ border-left:1px solid var(--linha); }
}
@media (max-width:900px){ .pilares__topo .num,.pilares__topo h2{ grid-column:1/-1; } }
@media (max-width:620px){
  .pilares:not(.pin-ativo) .pilares__lista{ grid-template-columns:1fr; row-gap:2.5rem; }
  .pilares:not(.pin-ativo) .pilares__lista > .pilar{ border-left:0 !important; }
  .pilares:not(.pin-ativo) .pilares__lista > .pilar + .pilar{ border-top:1px solid var(--linha); padding-top:2.5rem; }
}

/* ---- pin-ativo: o JS troca a grelha por uma faixa horizontal presa ao
   ecrã — descer a página passa a mover os cartões para o lado, até ao
   fim da faixa, altura em que a página volta a descer normalmente.
   Ativo em qualquer largura, incluindo mobile; dvh evita saltos quando
   a barra do browser do telemóvel aparece/desaparece ao fazer scroll.  */
.pilares.pin-ativo{
  padding-block:0;
  height:calc(100vh + var(--pin-distancia, 0px));
  height:calc(100dvh + var(--pin-distancia, 0px));
}
.pilares.pin-ativo .pilares__pin{
  position:sticky; top:0; height:100vh; height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.pilares.pin-ativo .pilares__topo{ flex:none; margin-bottom:clamp(1.5rem,4.5vw,3.5rem); }
.pilares.pin-ativo .pilares__trilho{ flex:none; overflow:hidden; }
.pilares.pin-ativo .pilares__lista{
  margin:0; padding:0; grid-template-columns:none;
  display:flex; gap:clamp(1.75rem,4.5vw,4.5rem); width:max-content;
  will-change:transform;
}
/* a caixa do hover é o padding-box do cartão: precisa de folga à volta
   do texto nos quatro lados, não só à esquerda do separador           */
.pilares.pin-ativo .pilar{
  width:clamp(15.5rem,24vw,19rem); flex:none;
  padding:clamp(1.5rem,2.6vw,2rem) clamp(1.5rem,2.4vw,1.85rem) clamp(1.75rem,2.8vw,2.15rem) clamp(1.75rem,2.8vw,2.35rem);
}
.pilares.pin-ativo .pilares__lista > .pilar{ border-left:1px solid var(--linha); }
.pilares.pin-ativo .pilares__lista > .pilar:first-child{ margin-left:calc(var(--margem) - clamp(1.75rem,2.8vw,2.35rem)); }
.pilares.pin-ativo .pilares__lista > .pilar:last-child{ margin-right:calc(var(--margem) - clamp(1.5rem,2.4vw,1.85rem)); }
.pilares.pin-ativo .pilar p{ max-width:none; }
.pilares.pin-ativo .pilares__progresso{
  display:block; flex:none; margin-top:clamp(1.5rem,4.5vw,3.5rem);
}
.pilares.pin-ativo .pilares__progresso{ height:2px; background:var(--linha); position:relative; }
.pilares.pin-ativo .pilares__progresso span{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--latao);
}
/* ecrãs baixos (mobile em paisagem, portáteis pequenos): aperta ainda
   mais os espaços verticais para o conteúdo caber nos 100dvh          */
@media (max-height:680px){
  .pilares.pin-ativo .pilares__topo{ margin-bottom:1rem; }
  .pilares.pin-ativo .pilares__progresso{ margin-top:1rem; }
  .pilares.pin-ativo .pilar{ padding-block:1.1rem 1.35rem; }
}

/* ---------------- SOBRE · processo (mesma linguagem da home) ---------------- */
.processo{
  --recuo:clamp(4.5rem,9vw,7.5rem);   /* quanto os cartões sobem sobre a faixa */
  padding-bottom:clamp(3rem,6vw,5.5rem);
}
/* faixa escura com o render do prédio ao fundo */
.processo__faixa{
  position:relative; isolation:isolate;
  background:var(--tinta); color:var(--cal);
  padding-block:clamp(5rem,11vw,9rem) calc(var(--recuo) + clamp(3rem,6vw,5rem));
  overflow:hidden;
}
.processo__fundo{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover;
  opacity:.34; filter:grayscale(.35);
}
.processo__topo{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);
  align-items:end;
}
.processo__topo .num{ grid-column:1/4; color:var(--latao-cl); }
.processo__topo h2{ grid-column:5/13; }
/* quatro cartões claros sobrepostos ao limite da faixa */
.processo__lista{
  /* recuo extra face à margem do site, para os cartões respirarem nas laterais */
  --recuo-lateral:clamp(1.5rem,4vw,5rem);
  position:relative; z-index:1; list-style:none;
  padding-inline:calc(var(--margem) + var(--recuo-lateral));
  margin-top:calc(var(--recuo) * -1);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.25rem,2vw,2rem);
}
.fase{
  position:relative; display:flex; flex-direction:column;
  background:var(--cal); color:var(--tinta);
  padding:clamp(1.5rem,2.6vw,2.25rem);
  box-shadow:0 24px 60px rgba(25,23,20,.14);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.fase:hover{ transform:translateY(-6px); box-shadow:0 32px 74px rgba(25,23,20,.2); }
/* ícone de linha em latão, como nos cartões da home */
.fase__icone{ display:block; color:var(--latao); transition:color .45s var(--ease); }
.fase__icone svg{ display:block; width:2.6rem; height:2.6rem; }
.fase:hover .fase__icone{ color:var(--latao-txt); }
.fase__titulo{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.2rem,1.8vw,1.6rem); line-height:1.2;
  margin:clamp(1.5rem,3vw,2.25rem) 0 .85rem;
}
.fase p{ color:var(--cinza); margin:0; font-size:.9375rem; }
@media (max-width:980px){
  .processo__lista{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px){
  .processo{ --recuo:clamp(2.5rem,7vw,4rem); }
  .processo__topo h2,.processo__topo .num{ grid-column:1/-1; }
  .processo__topo .num{ margin-bottom:1rem; }
}
@media (max-width:560px){
  .processo__lista{ grid-template-columns:1fr; gap:1.5rem; }
}

/* ---------------- SOBRE · fecho (CTA sem formulário) ----------------
   Reaproveita o componente .cta partilhado (home.css) — mesma tipografia
   e .cta__dados dos outros CTAs do site — só que sem formulário embutido,
   porque esse já existe em contactos.html. Topo mais apertado do que o
   normal do .cta, para não sobrar espaço vazio depois do Método.       */
.cta--fecho{ padding-block:clamp(2rem,4vw,3rem) clamp(4.5rem,10vw,8rem); }


/* ---------------- OBRAS · aviso de obras futuras ---------------- */
.aviso{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(2.25rem,4vw,3.5rem);
}
.aviso__fundo{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover;
  opacity:.22; filter:grayscale(.4);
}
.aviso__interior{
  display:grid; grid-template-columns:5fr 6fr;
  gap:clamp(2.5rem,5vw,5rem); align-items:start;
}
.aviso__texto{ display:grid; gap:clamp(.85rem,1.6vw,1.25rem); align-content:start; }
.aviso__texto h2{ margin:0; }
.aviso__texto .lead{ max-width:38ch; }
.aviso__pontos{
  list-style:none; margin:.25rem 0 0; padding:0;
  display:grid; gap:.55rem;
}
.aviso__pontos li{
  position:relative; padding-left:1.5rem;
  font-size:.9375rem; color:var(--cal);
}
.aviso__pontos li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:.6rem; height:.32rem;
  border-left:1.5px solid var(--latao-cl); border-bottom:1.5px solid var(--latao-cl);
  rotate:-45deg;
}
/* o formulário assenta num cartão claro sobre a fotografia.
   Compacto de propósito: tem de caber num ecrã de portátil sem rolar. */
.form--aviso{
  background:var(--cal); color:var(--tinta);
  padding-block:clamp(1.9rem,3.4vw,2.85rem);
  padding-inline:clamp(1.25rem,2.2vw,1.9rem);
  box-shadow:0 28px 70px rgba(25,23,20,.3);
  gap:clamp(.7rem,1.2vw,.95rem);
}
.form--aviso .campo label,
.form--aviso legend{ color:var(--cinza); margin-bottom:.3rem; }
.form--aviso .campo input,
.form--aviso .campo textarea{ border-color:var(--linha); padding:.45rem 0; }
.form--aviso .campo textarea{ min-height:3.5rem; }
.form--aviso .form__linha{ gap:clamp(1rem,1.8vw,1.5rem); }
/* a linha de erro só ocupa espaço quando há mesmo erro */
.form--aviso .campo__erro{ min-height:0; margin-top:0; }
.form--aviso .campo--erro .campo__erro{ margin-top:.3rem; }
.form--aviso .form__accao{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.form--aviso .form__nota{ font-size:.75rem; margin:0; }
.form--aviso .btn{ padding:.9em 1.4em; }

/* tipologias e consentimento */
.campo--escolhas{ border:0; padding:0; margin:0; }
.campo--escolhas legend{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--cinza); margin-bottom:.5rem; padding:0;
}
.escolhas{ display:flex; flex-wrap:wrap; gap:.5rem; }
.escolha{ cursor:pointer; }
.escolhas .escolha input{ position:absolute; opacity:0; width:0; height:0; }
.escolhas .escolha span{
  display:inline-grid; place-items:center; min-width:2.9rem;
  padding:.4rem .75rem;
  border:1px solid var(--linha); border-radius:2rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.escolhas .escolha input:hover + span{ border-color:var(--latao); }
.escolhas .escolha input:focus-visible + span{ outline:2px solid var(--latao); outline-offset:2px; }
.escolhas .escolha input:checked + span{
  background:var(--tinta); border-color:var(--tinta); color:var(--cal);
}
/* o consentimento é uma frase normal — anula o estilo de rótulo do .campo */
.campo--consentimento label.escolha--linha{
  display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start;
  font-family:var(--corpo); font-size:.75rem; font-weight:400;
  letter-spacing:0; text-transform:none; line-height:1.45;
  color:var(--cinza); margin:0;
}
.escolha--linha input{ margin-top:.15rem; accent-color:var(--latao); width:1rem; height:1rem; }
.campo--consentimento.campo--erro .escolha--linha{ color:#B3402E; }

/* Ecrãs baixos (portáteis com barras de marcadores, 13"): a secção aperta
   para caber sem rolar. Em ecrãs altos mantém-se o espaçamento normal. */
@media (min-width:901px) and (max-height:840px){
  .aviso{ padding-block:clamp(1.5rem,3vh,2.25rem); }
  .aviso__texto{ gap:.75rem; }
  .aviso__pontos{ gap:.45rem; }
  .form--aviso{ padding-block:clamp(1.3rem,2.4vw,1.85rem); padding-inline:clamp(1rem,1.8vw,1.4rem); gap:.6rem; }
  .form--aviso .campo label,
  .form--aviso legend{ margin-bottom:.2rem; }
  .form--aviso .campo input{ padding:.35rem 0; }
  .form--aviso .campo--escolhas{
    display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1rem;
  }
  .form--aviso .campo--escolhas legend{ margin:0; float:left; }
  .escolhas .escolha span{ padding:.32rem .7rem; min-width:2.6rem; }
  .form--aviso .btn{ padding:.75em 1.25em; }
}

@media (max-width:900px){
  .aviso__interior{ grid-template-columns:1fr; }
}

/* ---------------- OBRAS · obra futura em destaque ----------------
   Fica acima da grelha das concluídas: é a obra em curso que interessa
   a quem quer comprar. Formato largo — render de um lado, ficha do
   outro — de propósito diferente do mosaico, para ler como outra coisa.
   Em mobile empilha: render em cima, texto em baixo.                  */
.proxima{ padding-block:clamp(2.5rem,5vw,4rem) clamp(3rem,6vw,5rem); }
.proxima__topo{
  display:grid; gap:clamp(.6rem,1.2vw,1rem);
  margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}
.proxima__topo h2{ margin:0; }
.proxima__cartao{
  display:grid; grid-template-columns:7fr 5fr;
  gap:clamp(1.5rem,3vw,3.5rem); align-items:start;
  border-top:1px solid var(--latao);
  padding-top:clamp(1.5rem,3vw,2.25rem);
}
.proxima__media{
  position:relative; overflow:hidden;
  aspect-ratio:16/10; background:var(--tinta);
}
.proxima__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.9s var(--ease);
}
.proxima__cartao:hover .proxima__media img,
.proxima__cartao:focus-visible .proxima__media img{
  transform:scale(1.04); transition-duration:1.3s;
}
.proxima__corpo{ display:grid; gap:clamp(.85rem,1.6vw,1.15rem); align-content:start; }
.proxima__titulo{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.1; letter-spacing:-.01em;
}
.proxima__texto{ display:grid; gap:.6em; color:var(--cinza); font-size:.9375rem; }
.proxima__texto p{ margin:0; }
/* mesma linguagem das fichas do mosaico, mas sobre fundo claro */
.proxima__fichas{
  list-style:none; margin:.15rem 0 0; padding:0;
  display:grid; gap:.55rem;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.06em;
}
.proxima__fichas li{ display:flex; align-items:center; gap:.6rem; }
.proxima__fichas svg{ width:1rem; height:1rem; color:var(--latao); flex:none; }
.proxima__cartao .btn{ justify-self:start; margin-top:.35rem; }
/* o cartão todo é o link — passar o rato nele acende também o botão */
.proxima__cartao:hover .btn{ color:var(--cal); }
.proxima__cartao:hover .btn::before{ transform:translateY(0); }
.proxima__cartao:hover .btn .seta{ transform:translate(.28em,-.28em); }
/* selo da obra em curso: dourado, para se distinguir dos estados de imóvel */
.selo--curso{ background:var(--latao); color:var(--tinta); }
/* obras futuras a mais do que a primeira caem no mosaico normal */
.proxima__restantes{ margin-top:clamp(1.5rem,3vw,2.5rem); }
@media (max-width:900px){
  .proxima__cartao{ grid-template-columns:1fr; }
  .proxima__media{ aspect-ratio:4/3; }
}

/* ---------------- LISTAGENS ---------------- */
.lista{ padding-bottom:clamp(5rem,12vw,10rem); }
/* cabeçalho fino a separar as duas metades da página Obras */
.lista__topo{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.5rem 1.5rem;
  padding-bottom:1rem; border-bottom:1px solid var(--linha);
}
.lista__topo .num{ margin:0; }
.lista__contagem{ margin-left:auto; }
.lista__grelha{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,4vw,4rem) clamp(1.5rem,2.5vw,2.5rem);
  margin-top:clamp(2rem,4vw,3.5rem);
}
.lista__celula--largo{ grid-column:span 2; }
/* estado "sem imóveis disponíveis" — ocupa o lugar da grelha inteira */
.sem-imoveis{
  grid-column:1/-1; max-width:36rem; margin-inline:auto;
  text-align:center; padding:clamp(2.5rem,6vw,4.5rem) 0;
  display:grid; justify-items:center; gap:.9rem;
}
.sem-imoveis .lead{ color:var(--cinza); margin:0 0 .5rem; }
/* imóveis: tudo alinhado na mesma linha de base */
.lista__grelha--imoveis{ align-items:start; }
.lista__grelha--imoveis .lista__celula{ display:flex; }
.lista__grelha--imoveis .lista__celula > .cartao{ display:flex; flex-direction:column; width:100%; }
.lista__grelha--imoveis .lista__celula .cartao__corpo{ flex:1; }
@media (max-width:900px){
  .lista__grelha{ grid-template-columns:1fr; gap:2.75rem; }
  .lista__celula--largo{ grid-column:span 1; }
}

/* ---- Obras em mosaico ----
   Grelha de 6 colunas: 3 mosaicos por linha (span 2). Quando a última linha
   ficaria com um mosaico sozinho, ele passa a ocupar a linha inteira; quando
   ficaria com dois, cada um ocupa metade. Nunca fica um sozinho e estreito. */
.lista__grelha--obras{
  grid-template-columns:repeat(6,1fr);
  gap:clamp(1.5rem,2.5vw,2.5rem);
  align-items:start;
}
.lista__grelha--obras .lista__celula{ margin-top:0; grid-column:span 2; }

@media (min-width:901px){
  /* sobra um: linha inteira */
  .lista__grelha--obras .lista__celula:last-child:nth-child(3n+1){ grid-column:span 6; }
  .lista__grelha--obras .lista__celula:last-child:nth-child(3n+1) .mosaico{ aspect-ratio:16/7; }
  /* sobram dois: metade cada */
  .lista__grelha--obras .lista__celula:nth-last-child(2):nth-child(3n+1),
  .lista__grelha--obras .lista__celula:nth-last-child(2):nth-child(3n+1) ~ .lista__celula{ grid-column:span 3; }
  .lista__grelha--obras .lista__celula:nth-last-child(2):nth-child(3n+1) .mosaico,
  .lista__grelha--obras .lista__celula:nth-last-child(2):nth-child(3n+1) ~ .lista__celula .mosaico{ aspect-ratio:3/2; }
}

.mosaico{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/3; background:var(--tinta);
}
.lista__celula--largo .mosaico{ aspect-ratio:16/7; }
.mosaico__media{ position:absolute; inset:0; }
.mosaico__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.9s var(--ease);
}
.mosaico:hover .mosaico__media img{ transform:scale(1.05); transition-duration:1.3s; }
/* degradê escuro só no rodapé, mais forte no hover */
.mosaico__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(25,23,20,0) 38%, rgba(25,23,20,.72) 100%);
  transition:opacity .6s var(--ease);
}
.mosaico:hover .mosaico__media::after{
  background:linear-gradient(180deg, rgba(25,23,20,.06) 20%, rgba(25,23,20,.85) 100%);
}
/* seta circular, canto superior direito */
.mosaico__seta{
  position:absolute; top:clamp(1rem,1.8vw,1.6rem); right:clamp(1rem,1.8vw,1.6rem); z-index:2;
  width:3.2rem; height:3.2rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cal); color:var(--tinta);
  font-size:1.05rem; line-height:1;
  transition:background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.mosaico:hover .mosaico__seta{ background:var(--latao); transform:translate(2px,-2px); }
/* texto sobre a imagem */
.mosaico__corpo{
  position:absolute; inset:auto 0 0; z-index:1;
  display:grid; justify-items:center; text-align:center;
  padding:0 clamp(1.25rem,3vw,2.5rem) clamp(1.5rem,3vw,2.25rem);
  color:var(--cal);
  transform:translateY(0);
  transition:transform .7s var(--ease);
}
.mosaico__titulo{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,2.2vw,2rem); line-height:1.1;
}
.mosaico__filete{
  display:block; width:min(70%, 22rem); height:1px;
  background:rgba(244,241,236,.55);
  margin:clamp(.9rem,1.6vw,1.3rem) 0 0;
  transition:opacity .5s var(--ease);
}
/* as fichas ocupam zero até ao hover — daí o título "subir" */
.mosaico__fichas{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.4rem clamp(1rem,2vw,1.75rem);
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em;
  color:var(--cal);
  overflow:hidden;
  max-height:0; opacity:0;
  margin-top:0;
  transition:max-height .7s var(--ease), opacity .5s var(--ease), margin-top .7s var(--ease);
}
.mosaico:hover .mosaico__fichas,
.mosaico:focus-visible .mosaico__fichas{
  max-height:6rem; opacity:1; margin-top:clamp(.9rem,1.6vw,1.2rem);
}
.mosaico__fichas li{ display:flex; align-items:center; gap:.45rem; white-space:nowrap; }
.mosaico__fichas svg{ width:1rem; height:1rem; color:var(--latao-cl); flex:none; }

/* tablet: dois por linha; se sobrar um, ocupa a linha inteira */
@media (max-width:900px){
  .lista__grelha--obras .lista__celula{ grid-column:span 3; }
  .lista__grelha--obras .lista__celula:last-child:nth-child(odd){ grid-column:span 6; }
  .lista__grelha--obras .lista__celula:last-child:nth-child(odd) .mosaico{ aspect-ratio:16/9; }
  /* sem rato: as fichas ficam sempre visíveis */
  .mosaico__fichas{ max-height:6rem; opacity:1; margin-top:1rem; }
}
/* telemóvel: um por linha */
@media (max-width:600px){
  .lista__grelha--obras .lista__celula,
  .lista__grelha--obras .lista__celula:last-child:nth-child(odd){ grid-column:span 6; }
  .lista__grelha--obras .lista__celula .mosaico,
  .lista__grelha--obras .lista__celula:last-child:nth-child(odd) .mosaico{ aspect-ratio:4/3; }
}

/* ---------------- DETALHE ---------------- */
.detalhe__hero{ position:relative; min-height:clamp(24rem,72svh,44rem); display:grid; align-items:end; overflow:hidden; }
.detalhe__hero-media{ position:absolute; inset:0; background:var(--betao); }
.detalhe__hero-media img{ width:100%; height:100%; object-fit:cover; }
.detalhe__hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(25,23,20,.66) 0%, rgba(25,23,20,.14) 38%, rgba(25,23,20,.86) 100%);
}
.detalhe__hero-corpo{
  position:relative; z-index:1;
  padding-top:clamp(8.5rem,17vh,11rem); padding-bottom:clamp(2.5rem,6vh,4rem);
  display:grid; gap:1rem;
}
.detalhe__hero-corpo h1{ margin:0; max-width:16ch; }
.detalhe__preco{ margin:0; display:grid; gap:.35rem; }
.detalhe__preco-valor{
  font-family:var(--display); font-size:clamp(1.5rem,3vw,2.4rem);
  color:var(--latao-cl); line-height:1;
}

.detalhe__corpo{
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(2.5rem,5vw,4rem) var(--gutter);
  padding-block:clamp(4rem,9vw,7.5rem);
}
.detalhe__texto{ grid-column:1/8; }
.detalhe__texto .num{ display:block; margin-bottom:1.5rem; }
/* A ficha é um cartão azul-noite, para se destacar do corpo claro da
   página. As linhas são douradas, como o contorno da navbar com scroll;
   os rótulos e as marcas de "por preencher" trocam para as variantes de
   fundo escuro, senão perdem contraste.                               */
.ficha{
  grid-column:9/13; align-self:start; position:sticky; top:6rem;
  display:grid; gap:1.5rem;
  background:var(--noite); color:var(--cal);
  padding:clamp(1.5rem,2.5vw,2rem);
}
.ficha .rotulo{ color:var(--cinza-cl); }
.ficha .rotulo--acento{ color:var(--latao-cl); }
.ficha mark.falta{ color:var(--latao-cl); }
.ficha dl{
  margin:0; display:grid; grid-template-columns:auto 1fr;
  gap:0 1rem; align-items:start;
}
.ficha dt{ padding:.85rem 0; border-top:1px solid var(--latao); }
.ficha dd{ margin:0; padding:.85rem 0; border-top:1px solid var(--latao); text-align:right; font-size:.9375rem; }
.ficha .btn{ justify-self:start; }
/* os botões da ficha empilham e alinham à esquerda, com folga entre si */
.ficha__accoes{ display:grid; justify-items:start; gap:.75rem; }
@media (max-width:900px){
  .detalhe__texto,.ficha{ grid-column:1/-1; }
  .ficha{ position:static; }
}

/* ---------------- CARACTERÍSTICAS (detalhe de imóvel e de obra) ----------------
   Duas metades: uma grelha de pares rótulo/valor (mesma linguagem da ficha
   lateral, mas a duas colunas) e uma lista de etiquetas com visto. Sem caixas
   à volta — a linha fina em cima de cada par é que faz a leitura.            */
.caract{ margin-top:clamp(2.5rem,5vw,3.5rem); }
.caract__titulo{
  margin:0 0 clamp(1rem,2vw,1.5rem);
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,2vw,1.85rem); line-height:1.15; letter-spacing:-.01em;
}
.caract__grelha{
  margin:0; display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:clamp(1.5rem,3vw,3rem);
}
.caract__grelha > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.85rem 0; border-top:1px solid var(--linha);
}
.caract__grelha dt{ margin:0; }
.caract__grelha dd{ margin:0; text-align:right; font-size:.9375rem; }
/* etiquetas com visto — o visto é desenhado em CSS, sem SVG por item */
.caract__etiquetas{
  list-style:none; margin:clamp(1.25rem,2.5vw,1.75rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:.7rem clamp(1.25rem,2.5vw,2rem);
}
.caract__etiquetas li{
  position:relative; padding-left:1.6rem;
  font-size:.9375rem; line-height:1.4;
}
.caract__etiquetas li::before{
  content:""; position:absolute; left:.1rem; top:.45em;
  width:.62rem; height:.34rem;
  border-left:1.5px solid var(--latao); border-bottom:1.5px solid var(--latao);
  rotate:-45deg;
}
.caract__grelha + .caract__etiquetas{ margin-top:clamp(1.5rem,3vw,2.25rem); }
@media (max-width:620px){
  .caract__grelha{ grid-template-columns:1fr; }
}

.detalhe__galeria{ padding-bottom:clamp(4rem,9vw,7.5rem); }
/* a galeria em carrossel sangra até ao bordo: a margem fica no cabeçalho */
.detalhe__galeria--rail > .detalhe__sub{ padding-inline:var(--margem); }
.detalhe__sub{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);
  align-items:end; margin-bottom:clamp(2rem,4vw,3.5rem);
}
.detalhe__sub .num{ grid-column:1/4; }
.detalhe__sub h2{ grid-column:5/11; }
@media (max-width:900px){ .detalhe__sub .num,.detalhe__sub h2{ grid-column:1/-1; } }

.detalhe__plantas{ padding-top:clamp(4rem,8vw,7rem); }
.detalhe__evolucao{ padding-block:clamp(4rem,9vw,7.5rem); }

/* tira horizontal da evolução */
.tira{
  display:flex; gap:clamp(.75rem,1.5vw,1.25rem);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 var(--margem) 1.25rem;
  scrollbar-width:thin;
}
.tira__item{
  flex:0 0 clamp(15rem,30vw,24rem); margin:0; scroll-snap-align:start;
  cursor:zoom-in; position:relative;
}
.tira__item img{
  width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--linha);
  transition:transform .9s var(--ease);
}
.tira__item:hover img{ transform:scale(1.03); }
.tira__item figcaption{
  position:absolute; left:.75rem; bottom:.75rem;
  background:var(--cal); color:var(--tinta); padding:.3em .55em;
}

/* ---------------- CONTACTOS ---------------- */
.contactos{ padding-block:clamp(3rem,7vw,6rem); }
.contactos__cartoes{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem);
}
.contactos__cartao{
  display:grid; gap:.85rem; align-content:start;
  padding-top:1.25rem; border-top:1px solid var(--linha);
  position:relative;
}
.contactos__cartao::after{
  content:""; position:absolute; inset:0 0 auto; height:1px; background:var(--latao);
  transform:scaleX(0); transform-origin:left; transition:transform .85s var(--ease);
}
.contactos__cartao:hover::after{ transform:scaleX(1); }
.contactos__cartao p{ margin:0; line-height:1.25; }
.contactos__cartao a[data-href]{ border-bottom:1px solid var(--linha); transition:border-color .4s var(--ease); }
.contactos__cartao a[data-href]:hover{ border-color:var(--latao); }
.contactos__cartao .ligacao{ justify-self:start; }
@media (max-width:820px){ .contactos__cartoes{ grid-template-columns:1fr; } }

.mapa{ margin-top:clamp(3rem,6vw,5rem); }
.mapa iframe{
  display:block; width:100%; height:clamp(20rem,50vh,30rem);
  border:0; filter:grayscale(1) contrast(1.05);
  transition:filter .9s var(--ease);
}
.mapa:hover iframe{ filter:none; }

.relacionados{ padding-block:clamp(4rem,9vw,7.5rem); }

/* ---------------- páginas legais (privacidade, cookies, termos) ---------------- */
.legal{ max-width:68ch; padding-block:clamp(1rem,3vw,2rem) clamp(4rem,8vw,6rem); }
.legal > *{ max-width:68ch; }
.legal h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.375rem,2vw,1.75rem); line-height:1.15;
  margin:2.4em 0 .75em;
}
.legal h2:first-child{ margin-top:0; }
.legal h3{
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--latao-txt);
  margin:1.8em 0 .6em;
}
.legal p{ margin:0 0 1.1em; line-height:1.65; color:var(--betao); }
.legal ul,.legal ol{ margin:0 0 1.1em; padding-left:1.3em; line-height:1.65; color:var(--betao); }
.legal li{ margin-bottom:.4em; }
.legal a{ color:var(--latao-txt); border-bottom:1px solid rgba(201,162,39,.4); }
.legal a:hover{ border-color:var(--latao-txt); }
.legal strong{ font-weight:500; color:var(--tinta); }
.legal table{ width:100%; border-collapse:collapse; margin:0 0 1.5em; font-size:.8125rem; }
.legal th,.legal td{
  text-align:left; padding:.65em .9em; border-bottom:1px solid var(--linha);
  vertical-align:top;
}
.legal th{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cinza);
}
.legal .rotulo--data{ display:block; margin-bottom:2.5em; }