/* Villa do Sossego · páginas de vendas · v3
   Direcção (a do v1 aprovado): o caderno do lote. Papel quente, traço verde-tinta, cotas e carimbo,
   como o processo técnico que o comprador recebe. O objecto que se repete nas duas páginas é a folha
   de papel: a fachada da V3 dois pisos no herói de construir, o lote no herói de investir, a prancha
   dos 7 projectos, o desenho cotado. O tijolo do logótipo é a única cor de acção.
   Ritmo: três espaçamentos (--s1 entre secções irmãs, --s2 nas correntes, --s3 antes dos dois
   momentos fortes: o lote cotado e o preço). Movimento só onde explica: o desenho do lote, a régua,
   a prancha e a troca de planta. */

@font-face {
  font-family: "Archivo";
  src: url("../fontes/Archivo-v3.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 82% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fontes/SourceSerif4-v3.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: #FAF8F3;
  --papel-2: #F1EDE3;
  --papel-3: #E8E2D4;
  --salva: #BCC9B9;
  --verde: #344F39;
  --verde-tinta: #203C32;
  --noite: #15251D;
  --tinta: #2A2820;
  --cinza: #656257;          /* 5,8:1 sobre o papel */
  --terracota: #845027;      /* 6,3:1 sobre o papel */
  --tijolo: #C36300;         /* o do logótipo: só em marcas gráficas */
  --tijolo-botao: #B35A00;   /* botões: 4,8:1 com texto branco */
  --tijolo-fundo: #9C4E00;
  --tijolo-claro: #E6964F;   /* sobre verde-noite 6,7:1; sobre verde-tinta 5,0:1 */
  --linha: rgba(32, 60, 50, 0.16);
  --linha-forte: rgba(32, 60, 50, 0.32);
  --linha-clara: rgba(188, 201, 185, 0.24);
  --fundo: var(--papel);

  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --max: 1320px;
  --gutter: clamp(16px, 4.2vw, 56px);
  --s1: clamp(48px, 6vw, 72px);
  --s2: clamp(64px, 8.4vw, 112px);
  --s3: clamp(88px, 12.5vw, 184px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  background: var(--papel);
  accent-color: var(--tijolo-botao);
}
@media (min-width: 900px) { html { scroll-padding-top: 96px; } }
@media (max-width: 899px) { html { scroll-padding-bottom: 96px; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, dl, dd, ol, ul, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
main:focus { outline: none; }
[hidden] { display: none !important; }

/* foco: anel de duas cores, legível sobre papel, verde-noite ou fotografia (ACESSIBILIDADE I-1) */
:focus-visible {
  outline: 2px solid var(--tijolo-botao);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--papel);
  border-radius: 2px;
}
.escuro :focus-visible, .heroi :focus-visible, .topo:not(.fixo) :focus-visible, .barra-escura :focus-visible {
  outline-color: var(--papel);
  box-shadow: 0 0 0 6px rgba(14, 26, 20, 0.88);
}

.salto {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 12px 16px; background: var(--noite); color: var(--papel); text-decoration: none; font-weight: 600;
}
.salto:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.nw { white-space: nowrap; }

/* ------------------------------------------------------------ tipografia */
.etiqueta {
  font-family: var(--sans);
  font-stretch: 88%;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--terracota);
}
.rotulo {                      /* maiúsculas só em três sítios por página (DECISOES-DA-RONDA, ponto 7) */
  font-family: var(--sans);
  font-stretch: 82%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--terracota);
}
.escuro .etiqueta, .escuro .rotulo { color: var(--tijolo-claro); }
.titulo-1, .titulo-2, .titulo-3 {
  font-family: var(--serif);
  font-weight: 560;
  color: var(--verde-tinta);
  text-wrap: balance;
  font-optical-sizing: auto;
}
.titulo-1 { font-size: clamp(2.2rem, 1.1rem + 4.6vw, 5.3rem); line-height: 1; letter-spacing: -0.022em; }
.titulo-2 { font-size: clamp(1.9rem, 1.15rem + 2.6vw, 3.35rem); line-height: 1.05; letter-spacing: -0.018em; }
.titulo-3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em; }
.escuro .titulo-1, .escuro .titulo-2, .escuro .titulo-3 { color: var(--papel); }
.lead { font-size: clamp(1.04rem, 0.98rem + 0.25vw, 1.18rem); line-height: 1.55; color: var(--cinza); text-wrap: pretty; max-width: 36em; }
.escuro .lead { color: var(--salva); }
.micro { font-size: 13.5px; line-height: 1.45; color: var(--cinza); text-wrap: pretty; max-width: 32em; }
.escuro .micro, .heroi .micro { color: rgba(250, 248, 243, 0.78); }

/* --------------------------------------------------------------- botões */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 22px;
  border: 1px solid transparent; border-radius: 3px;
  font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0.005em; line-height: 1.15;
  text-decoration: none; text-align: center; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition-property: transform, background-color, border-color, color;
  transition-duration: 160ms; transition-timing-function: var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-tijolo { background: var(--tijolo-botao); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.12); }
.btn-linha { border-color: rgba(250, 248, 243, 0.6); color: var(--papel); background: transparent; }
.btn-linha-escura { border-color: var(--linha-forte); color: var(--verde-tinta); background: transparent; }
.btn-sm { --h: 44px; padding: 0 16px; font-size: 15px; }
.btn-texto { min-height: 44px; padding: 0 6px; background: none; border: 0; color: var(--verde-tinta); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--linha-forte); }
@media (hover: hover) and (pointer: fine) {
  .btn-tijolo:hover { background: var(--tijolo-fundo); }
  .btn-linha:hover { border-color: var(--papel); background: rgba(250, 248, 243, 0.08); }
  .btn-linha-escura:hover { border-color: var(--verde-tinta); background: rgba(32, 60, 50, 0.04); }
  .btn-texto:hover { text-decoration-color: currentColor; }
}
.ligacao {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; color: var(--verde-tinta);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--linha-forte);
  transition: text-decoration-color 160ms ease;
}
.ligacao svg { width: 18px; height: 18px; flex: none; transition: transform 200ms var(--ease-out); }
.ligacao-clara { color: var(--papel); text-decoration-color: rgba(250, 248, 243, 0.5); }
@media (hover: hover) and (pointer: fine) {
  .ligacao:hover { text-decoration-color: currentColor; }
  .ligacao:hover svg { transform: translateX(3px); }
}
.accao { display: grid; gap: 8px; justify-items: start; }

/* ------------------------------------------------------------ cabeçalho */
.topo {
  position: absolute; inset: 0 0 auto 0; z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
}
.topo-wrap {
  display: flex; justify-content: space-between;
  align-items: center; gap: 12px; min-height: 80px;
}
.placa {
  display: inline-flex; align-items: center; gap: 14px; justify-self: start;
  padding: 7px 12px; background: var(--papel); border-radius: 2px;
  box-shadow: 0 1px 0 rgba(21, 37, 29, 0.08), 0 10px 26px -12px rgba(5, 12, 8, 0.6);
}
.placa-villa { display: block; line-height: 0; border-radius: 2px; }
.placa-villa img { height: 40px; width: auto; }
.assinatura {
  display: none; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid var(--linha-forte);
  font-size: 12.5px; font-weight: 500; color: var(--cinza); white-space: nowrap; line-height: 1;
}
.assinatura img { height: 20px; width: auto; }
@media (min-width: 600px) { .assinatura { display: inline-flex; } }
.topo-wa { flex: none; }
/* no computador, depois do herói, o cabeçalho volta preso ao topo quando se sobe (esconde-se a descer) */
.topo.fixo {
  position: fixed; background: rgba(250, 248, 243, 0.97); box-shadow: 0 1px 0 var(--linha);
  transform: translateY(-105%); transition: transform 260ms var(--ease-out);
}
.topo.fixo.ver { transform: none; }
.topo.fixo .topo-wrap { min-height: 68px; }
.topo.fixo .placa { box-shadow: none; padding-inline: 0; background: transparent; }
@media (max-width: 599px) {
  .topo-wrap { gap: 8px; min-height: 64px; }
  .placa { padding: 6px 8px; }
  .placa-villa img { height: 28px; }
}
@media (max-width: 399px) {
  .placa-villa img { height: 26px; }
}

/* --------------------------------------------------------------- herói */
.heroi { position: relative; display: flex; flex-direction: column; background: var(--noite); color: var(--papel); isolation: isolate; overflow: hidden; }
.heroi-img img { width: 100%; height: 100%; object-fit: cover; }
.heroi .etiqueta { color: var(--papel); }   /* sobre a fotografia: cor cheia (contraste medido no testar.py) */
.heroi .titulo-1 { color: var(--papel); }
.heroi-construir .titulo-1 { max-width: 9.5em; }
.heroi .accoes .micro { max-width: 36ch; text-wrap: balance; }
.heroi-texto { display: grid; gap: 16px; align-content: end; }
.heroi-texto .lead { color: rgba(250, 248, 243, 0.88); max-width: 33em; }
.heroi .accoes { display: grid; gap: 10px; padding-top: 4px; }
.heroi-rodape { display: grid; gap: 4px; }
.heroi-linha {
  font-size: 13.5px; line-height: 1.45; color: rgba(250, 248, 243, 0.9);
  text-decoration: underline; text-decoration-color: rgba(250, 248, 243, 0.4); text-underline-offset: 4px;
  padding-block: 8px; display: inline-block;
}
.heroi-legenda { font-size: 13px; line-height: 1.45; color: rgba(250, 248, 243, 0.8); }
@media (hover: hover) and (pointer: fine) { .heroi-linha:hover { color: var(--papel); text-decoration-color: currentColor; } }
.heroi-args { display: grid; grid-template-columns: 1fr 1fr; background: rgba(250, 248, 243, 0.06); border: 1px solid var(--linha-clara); border-radius: 3px; }
.heroi-args > div { padding: 10px 12px 11px; display: grid; gap: 2px; align-content: start; }
.heroi-args > div + div { border-left: 1px solid var(--linha-clara); }
.heroi-args dt { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; line-height: 1.15; color: var(--papel); }
.heroi-args dd { font-size: 12.5px; line-height: 1.3; color: rgba(250, 248, 243, 0.82); }
.folha-heroi { display: none; }

/* telemóvel e tablet: a fotografia numa faixa, o texto por baixo; o botão entra no primeiro ecrã */
@media (max-width: 759px) {
  .heroi-img { height: clamp(140px, 27svh, 260px); position: relative; }
  .heroi-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 26, 20, 0.5) 0%, rgba(14, 26, 20, 0) 34%, rgba(21, 37, 29, 0) 58%, var(--noite) 100%); }
  .heroi-construir .heroi-img img { object-position: 88% 45%; }
  .heroi-investir .heroi-img img { object-position: 50% 50%; }
  .heroi-conteudo { margin-top: -34px; position: relative; padding-bottom: 22px; }
  .heroi-texto { gap: 12px; }
  .heroi .titulo-1 { font-size: clamp(2.1rem, 1.25rem + 4.4vw, 2.75rem); }
  .heroi-texto .lead { font-size: 15.5px; line-height: 1.5; }
  .heroi .accao .btn { width: 100%; }
  .heroi .ligacao { min-height: 44px; }
}
@media (max-width: 359px) {
  .heroi-texto .lead { font-size: 15px; } .heroi .titulo-1 { font-size: 2.05rem; }
  .heroi-img { height: 120px; }
  .heroi-conteudo { margin-top: -14px; }   /* com a faixa de 120 px, a etiqueta a -34 px ficava sobre a fotografia clara */
  .heroi-args { grid-template-columns: 1fr; }
  .heroi-args > div + div { border-left: 0; border-top: 1px solid var(--linha-clara); }
}

/* computador e tablet largo: a fotografia a toda a altura do ecrã */
@media (min-width: 760px) {
  .heroi { min-height: 100svh; justify-content: flex-end; }
  .heroi-img { position: absolute; inset: 0; z-index: -2; }
  .heroi::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    /* o véu do v1 aprovado: escuro em baixo e à esquerda, onde vive o texto; o céu fica limpo */
    background:
      linear-gradient(0deg, rgba(14, 26, 20, 0.94) 0%, rgba(14, 26, 20, 0.78) 28%, rgba(14, 26, 20, 0.34) 52%, rgba(14, 26, 20, 0) 70%),
      linear-gradient(90deg, rgba(14, 26, 20, 0.66) 0%, rgba(14, 26, 20, 0.24) 46%, rgba(14, 26, 20, 0) 66%),   /* a etiqueta passa sobre o céu: 3,5:1 com 0,55 */
      linear-gradient(180deg, rgba(21, 37, 29, 0.5) 0, rgba(21, 37, 29, 0) 150px);
  }
  .heroi-investir::before {
    background:
      linear-gradient(0deg, rgba(14, 26, 20, 0.94) 0%, rgba(14, 26, 20, 0.78) 28%, rgba(14, 26, 20, 0.42) 54%, rgba(14, 26, 20, 0.18) 76%),
      linear-gradient(90deg, rgba(14, 26, 20, 0.66) 0%, rgba(14, 26, 20, 0.24) 46%, rgba(14, 26, 20, 0) 66%),
      linear-gradient(180deg, rgba(14, 26, 20, 0.55) 0%, rgba(14, 26, 20, 0.1) 22%);
  }
  .heroi-construir .heroi-img img { object-position: 46% 60%; }
  .heroi-investir .heroi-img img { object-position: 50% 55%; }
  .heroi-conteudo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 24px; padding-top: 140px; padding-bottom: 96px; }
  .heroi-texto { grid-column: 1 / -1; }
  .heroi .accoes { grid-template-columns: auto minmax(0, 1fr); justify-content: start; align-items: center; column-gap: 24px; row-gap: 8px; }
  .heroi .accao { display: contents; }
  .heroi .accao .btn { grid-column: 1; grid-row: 1; }
  .heroi .accao .micro { grid-column: 1 / -1; grid-row: 2; }
  .heroi .ligacao { grid-column: 2; grid-row: 1; justify-self: start; }
  .heroi .ligacao { min-height: 52px; }
  .heroi-rodape {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px;
    padding: 6px var(--gutter) calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 20, 15, 0.78); border-top: 1px solid rgba(250, 248, 243, 0.12);
  }
  .heroi-linha:focus-visible { outline-offset: -4px; }
  .heroi-args { max-width: 560px; }
}
@media (min-width: 1000px) {
  .heroi-texto { grid-column: 1 / span 7; }
  .heroi-args { display: none; }
  .folha-heroi { display: block; grid-column: 8 / -1; justify-self: end; width: min(100%, 520px); margin-bottom: 4px; }
  .heroi-investir .folha-heroi { width: min(100%, 420px); }
  .heroi .ligacao { white-space: nowrap; }
}

/* a folha: o objecto que se repete (papel, marcas de corte, legenda, quadro) */
.folha {
  position: relative; background: var(--papel); color: var(--tinta);
  padding: 16px 16px 0; border-radius: 2px;
  box-shadow: 0 2px 6px rgba(4, 10, 7, 0.28), 0 30px 60px -28px rgba(4, 10, 7, 0.8);
}
.folha::before {             /* marcas de corte nos quatro cantos, como numa prova de impressão */
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  background:
    linear-gradient(var(--linha-forte), var(--linha-forte)) 0 0 / 8px 1px no-repeat,
    linear-gradient(var(--linha-forte), var(--linha-forte)) 0 0 / 1px 8px no-repeat,
    linear-gradient(var(--linha-forte), var(--linha-forte)) 100% 0 / 8px 1px no-repeat,
    linear-gradient(var(--linha-forte), var(--linha-forte)) 100% 0 / 1px 8px no-repeat,
    linear-gradient(var(--linha-forte), var(--linha-forte)) 0 100% / 8px 1px no-repeat,
    linear-gradient(var(--linha-forte), var(--linha-forte)) 0 100% / 1px 8px no-repeat,
    linear-gradient(var(--linha-forte), var(--linha-forte)) 100% 100% / 8px 1px no-repeat,
    linear-gradient(var(--linha-forte), var(--linha-forte)) 100% 100% / 1px 8px no-repeat;
}
.folha > img { width: 100%; height: auto; outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; }
.folha figcaption { padding: 10px 0 12px; border-bottom: 1px solid var(--linha); font-stretch: 88%; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--cinza); }
.folha-args { display: grid; grid-template-columns: 1fr 1fr; }
.folha-args > div { padding: 13px 14px 16px 0; display: grid; gap: 4px; align-content: start; }
.folha-args > div + div { padding-left: 14px; border-left: 1px solid var(--linha); }
.folha-args dt { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; color: var(--verde-tinta); }
.folha-args dd { font-size: 13.5px; line-height: 1.4; color: var(--cinza); }
@media (max-width: 1199px) { .folha-args dt { font-size: 1.08rem; } .folha-args dd { font-size: 13px; } }
.folha-lote .folha-lote-svg { width: 100%; height: auto; overflow: visible; margin: 4px 0 2px; }

/* entrada do herói: um só bloco, 300 ms, sem zoom na imagem (DIRECTOR-DE-ARTE, correcção 14) */
/* o texto só muda de opacidade: um transform faria da coluna o bloco de contenção da faixa do fundo */
.heroi-texto { animation: aparece 300ms var(--ease-out) both; }
.folha-heroi { animation: entra 320ms var(--ease-out) 70ms both; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------- secções */
.seccao { padding-block: var(--s2); position: relative; }
.papel-2 { background: var(--papel-2); --fundo: var(--papel-2); }
.escuro { background: var(--noite); color: var(--papel); --fundo: var(--noite); }
.tinta { background: var(--verde-tinta); --fundo: var(--verde-tinta); }
.cabeca-col { display: grid; gap: 14px; justify-items: start; margin-bottom: clamp(32px, 4.4vw, 56px); max-width: 52em; }
.cabeca-col .lead { max-width: 36em; }
.cabeca { display: grid; gap: 16px 56px; margin-bottom: clamp(32px, 4.4vw, 56px); }
.cabeca > div { display: grid; gap: 14px; align-content: start; }
@media (min-width: 960px) { .cabeca { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; } }

/* S2 · números */
.faixa-numeros { padding-block: clamp(28px, 4vw, 52px); }
.numeros { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linha-forte); border-bottom: 1px solid var(--linha); }
.numeros > div { padding: 18px 0 20px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.numeros > div:nth-child(odd) { padding-right: 14px; }
.numeros > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--linha); }
.numeros > div:nth-child(n + 3) { border-top: 1px solid var(--linha); }
.numeros dt { font-family: var(--serif); font-weight: 560; font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.45rem); line-height: 1; letter-spacing: -0.015em; color: var(--verde-tinta); white-space: nowrap; }
@media (max-width: 379px) { .numeros dt { font-size: 1.2rem; } }
.numeros dd { font-size: 14.5px; line-height: 1.45; color: var(--cinza); max-width: 17em; }
@media (min-width: 900px) {
  .numeros { grid-template-columns: repeat(4, 1fr); }
  .numeros > div, .numeros > div:nth-child(odd), .numeros > div:nth-child(even) { padding: 24px 22px 26px; border-top: 0; border-left: 1px solid var(--linha); }
  .numeros > div:first-child { padding-left: 0; border-left: 0; }
}

/* S3 · dois caminhos: duas colunas emparelhadas, a da Villa numa tira de papel */
.caminhos { width: 100%; border-collapse: separate; border-spacing: 0; }
.caminhos th { text-align: left; vertical-align: bottom; padding: 0 24px 14px 0; font-stretch: 88%; font-size: 15px; font-weight: 700; line-height: 1.3; }
.c-sinal { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; margin-right: 8px; }
.caminhos .c-velho { color: var(--cinza); }
.caminhos .c-novo { color: var(--verde-tinta); padding-left: 28px; background: var(--papel); border-left: 1px solid var(--linha-forte); padding-top: 16px; }
.caminhos .c-novo .c-sinal { color: var(--tijolo); }
.caminhos td { vertical-align: top; padding: 17px 28px 17px 0; border-top: 1px solid var(--linha); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.caminhos td:first-child { color: var(--cinza); width: 44%; }
.caminhos td:last-child { color: var(--tinta); font-weight: 500; padding-left: 28px; background: var(--papel); border-left: 1px solid var(--linha-forte); }
.caminhos tbody tr:last-child td { border-bottom: 1px solid var(--linha); }
.fecho-seccao { margin-top: clamp(24px, 3vw, 36px); font-family: var(--serif); font-weight: 500; font-size: clamp(1.18rem, 1.02rem + 0.6vw, 1.45rem); line-height: 1.38; color: var(--verde-tinta); text-wrap: pretty; max-width: 31em; }
@media (max-width: 759px) {
  .caminhos, .caminhos thead, .caminhos tbody, .caminhos tr, .caminhos td, .caminhos th { display: block; }
  .caminhos thead tr { display: grid; gap: 4px; padding-bottom: 12px; }
  .caminhos th, .caminhos .c-novo { padding: 0; background: none; border: 0; font-size: 14px; }
  .caminhos tbody tr { padding: 14px 0 16px; border-top: 1px solid var(--linha-forte); }
  .caminhos td, .caminhos td:first-child, .caminhos td:last-child { width: auto; border: 0; padding: 0 0 0 28px; position: relative; background: none; }
  .caminhos td:first-child { font-size: 14.5px; margin-bottom: 8px; }
  .caminhos td::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background-size: 18px 18px; }
  .caminhos td:first-child::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' fill='none' stroke='%23656257' stroke-width='1.6'/%3E%3C/svg%3E"); }
  .caminhos td:last-child::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23C36300' stroke-width='1.8'/%3E%3C/svg%3E"); }
  .caminhos tbody tr:last-child td { border-bottom: 0; }
}

/* ------------------------------------------------- S4 · a prancha dos 7 projectos */
.instrucao { font-size: 14.5px; color: var(--cinza); margin-bottom: 14px; }
@media (min-width: 1000px) { .js .instrucao { display: none; } }   /* no computador a prancha já vem aberta, com a lista à vista */
.p-cab { font-stretch: 88%; font-size: 13.5px; font-weight: 600; color: var(--cinza); }
.p-cab { display: none; }
.p-lista { border-top: 1px solid var(--linha-forte); }
.p-linha { border-bottom: 1px solid var(--linha); }
.p-botao {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) 24px; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 2px;
  align-items: center; width: 100%; min-height: 76px; padding: 12px 0;
  border: 0; background: transparent; text-align: left; cursor: pointer; touch-action: manipulation;
  transition: background-color 200ms ease;
}
.p-num { display: none; }
.p-mini { grid-row: 1 / span 3; width: 84px; height: 56px; object-fit: cover; border-radius: 1px; outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; background: var(--papel-2); }
.p-modelo { grid-column: 2; font-family: var(--serif); font-size: 1.16rem; font-weight: 600; color: var(--verde-tinta); line-height: 1.2; }
.p-desc, .p-area { grid-column: 2; font-size: 14px; line-height: 1.4; color: var(--cinza); font-variant-numeric: tabular-nums; }
.p-area { color: var(--tinta); font-weight: 600; }
.p-area-mais { font-weight: 500; color: var(--cinza); }
.p-seta { grid-column: 3; grid-row: 1 / span 3; width: 22px; height: 22px; color: var(--verde-tinta); transition: transform 260ms var(--ease-out); }
.p-botao[aria-expanded="true"] .p-seta { transform: rotate(180deg); }
.p-linha.aberta { background: var(--papel-2); }
.p-linha.aberta .p-botao { box-shadow: inset 3px 0 0 var(--tijolo); }

@media (min-width: 1000px) {
  .js .prancha { display: grid; grid-template-columns: minmax(300px, 3.4fr) minmax(0, 8.6fr); column-gap: 40px; }
  .js .p-cab { display: flex; gap: 6px; padding-bottom: 10px; grid-column: 1; }
  .js .p-cab > span:nth-child(-n + 2)::after { content: " ·"; }
  .js .p-cab > span:last-child { margin-left: auto; }
  .js .p-lista { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(300px, 3.4fr) minmax(0, 8.6fr); grid-template-rows: repeat(7, auto) 1fr; column-gap: 40px; align-items: start; border-top: 0; }
  .js .p-linha { display: contents; }
  .js .p-botao {
    grid-column: 1; position: relative; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-rows: auto auto;
    min-height: 68px; padding: 12px 10px 12px 2px; border-top: 1px solid var(--linha);
  }
  .js .p-linha:first-child .p-botao { border-top-color: var(--linha-forte); }
  .js .p-linha:last-child .p-botao { border-bottom: 1px solid var(--linha); }
  .js .p-num { display: block; grid-row: 1 / span 2; font-stretch: 82%; font-size: 13px; font-weight: 700; color: var(--cinza); font-variant-numeric: tabular-nums; align-self: start; padding-top: 3px; }
  .js .p-mini, .js .p-seta { display: none; }
  .js .p-modelo { grid-column: 2; }
  .js .p-desc { grid-column: 2; }
  .js .p-area { grid-column: 3; grid-row: 1 / span 2; text-align: right; font-weight: 600; align-self: center; white-space: nowrap; }
  .js .p-area-mais { display: block; font-size: 12.5px; line-height: 1.3; }
  .js .p-botao::before { content: ""; position: absolute; left: -14px; top: 12px; bottom: 12px; width: 3px; background: var(--tijolo); transform: scaleY(0); transition: transform 260ms var(--ease-out); }
  .js .p-linha.aberta { background: none; }
  .js .p-linha.aberta .p-botao { box-shadow: none; background: var(--papel-2); }
  .js .p-linha.aberta .p-botao::before { transform: scaleY(1); }
  .js .p-linha.aberta .p-num { color: var(--terracota); }
  .js .prancha .ficha { grid-column: 2; grid-row: 1 / -1; margin: 0; }
  .js .prancha .ficha-fechar { display: none; }
}
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .js .p-linha:not(.aberta) .p-botao:hover { background: rgba(241, 237, 227, 0.6); }
}

/* a folha de cada projecto */
.ficha {
  display: grid; gap: 18px;
  margin: 2px 0 18px; padding: clamp(16px, 2vw, 24px);
  background: var(--papel); border: 1px solid var(--linha-forte); border-radius: 2px;
  box-shadow: 0 1px 0 rgba(21, 37, 29, 0.04), 0 24px 48px -32px rgba(21, 37, 29, 0.38);
}
.js .ficha:not(.aberta) { display: none; }
.ficha.entra { animation: folha 300ms var(--ease-out) both; }
@keyframes folha { from { opacity: 0; filter: blur(2px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }
.ficha-nome { font-family: var(--serif); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem); font-weight: 560; line-height: 1.1; color: var(--verde-tinta); padding-bottom: 12px; border-bottom: 1px solid var(--linha-forte); }
.ficha-info { display: grid; gap: 16px; align-content: start; min-width: 0; }
.ficha-fachada { display: grid; gap: 6px; }
.ficha-fachada img { width: 100%; height: auto; max-height: 280px; object-fit: cover; border-radius: 1px; outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; }
.ficha-fachada figcaption { font-stretch: 88%; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--cinza); }
.ficha-texto { font-size: 16.5px; line-height: 1.55; color: var(--tinta); text-wrap: pretty; max-width: 36em; }
.ficha-dados { border-top: 1px solid var(--linha-forte); }
.ficha-dados > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 15px; }
.ficha-dados dt { color: var(--cinza); }
.ficha-dados dd { font-weight: 600; color: var(--verde-tinta); text-align: right; font-variant-numeric: tabular-nums; }
.ficha-dados .total dd { font-family: var(--serif); font-size: 1.32rem; font-weight: 600; line-height: 1.15; }
@media (max-width: 599px) { .ficha-dados .total { grid-template-columns: 1fr; gap: 2px; } .ficha-dados .total dd { text-align: left; font-size: 1.2rem; } }
.ficha-accoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ficha-plantas { display: grid; gap: 12px; align-content: start; justify-items: start; min-width: 0; }
.vista { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--linha-forte); border-radius: 4px; }
.vista button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 2px; background: transparent; font-size: 14.5px; font-weight: 600; color: var(--verde-tinta); cursor: pointer; touch-action: manipulation; transition: background-color 150ms ease, color 150ms ease; }
.vista button[aria-pressed="true"] { background: var(--verde-tinta); color: var(--papel); }
.ficha-folhas { display: grid; justify-content: start; }
.folhas-par { grid-area: 1 / 1; display: flex; gap: 10px; transition: opacity 150ms ease; }
.folhas-par.sai { opacity: 0; }
.folhas-par figure { display: grid; gap: 4px; }
.folhas-par img { height: 440px; width: auto; max-width: none; outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; background: var(--papel-2); }
.ficha-folhas.dois img { height: 400px; }
.piso { font-stretch: 88%; font-size: 13px; font-weight: 600; color: var(--cinza); }
.ampliar {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px;
  background: none; border: 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--verde-tinta);
  text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 5px; touch-action: manipulation;
}
.ampliar svg { width: 18px; height: 18px; flex: none; }
.ampliar-claro { color: var(--papel); text-decoration-color: rgba(250, 248, 243, 0.45); }
@media (hover: hover) and (pointer: fine) { .ampliar:hover { text-decoration-color: currentColor; } }
.ficha-leg { font-size: 13.5px; line-height: 1.45; color: var(--cinza); max-width: 26em; }
.carimbo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--linha-forte); font-size: 13px; line-height: 1.3; }
.carimbo > div { padding: 8px 10px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); display: grid; gap: 2px; }
.carimbo > div:nth-child(2n) { border-right: 0; }
.carimbo dt { font-stretch: 82%; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cinza); }
.carimbo dd { font-weight: 600; color: var(--verde-tinta); font-variant-numeric: tabular-nums; }
.carimbo > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
@media (min-width: 700px) {
  .carimbo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .carimbo > div { border-bottom: 0; }
  .carimbo > div:nth-child(2n) { border-right: 1px solid var(--linha); }
  .carimbo > div:last-child { border-right: 0; }
  .carimbo > div:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 999px) {
  .ficha-nome { display: none; }
  .ficha-plantas { justify-items: stretch; }
  .ficha-folhas { justify-content: center; background: var(--papel-2); padding: 12px; }
  .vista { justify-self: start; }
}
@media (min-width: 760px) and (max-width: 999px) {
  .ficha { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info plantas" "carimbo carimbo"; column-gap: 24px; }
  .ficha-info { grid-area: info; } .ficha-plantas { grid-area: plantas; } .ficha .carimbo { grid-area: carimbo; }
}
@media (min-width: 1000px) {
  .ficha { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; grid-template-areas: "nome nome" "info plantas" "carimbo plantas"; column-gap: 32px; row-gap: 18px; }
  .ficha-nome { grid-area: nome; } .ficha-info { grid-area: info; } .ficha-plantas { grid-area: plantas; }
  .ficha .carimbo { grid-area: carimbo; align-self: end; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha .carimbo > div { border-bottom: 1px solid var(--linha); }
  .ficha .carimbo > div:nth-child(2n) { border-right: 0; }
  .ficha .carimbo > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .folhas-par img { height: 700px; }
  .ficha-folhas.dois img { height: 620px; }
}
@media (max-width: 399px) { .vista button { padding: 0 10px; font-size: 13.5px; } .folhas-par img { height: 400px; } .ficha-folhas.dois img { height: 320px; } }

.projectos-pe { display: grid; gap: 24px 48px; margin-top: clamp(28px, 3.6vw, 44px); }
@media (min-width: 900px) { .projectos-pe { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.caixa-mq { padding: 20px 22px 22px; background: var(--papel-2); border-top: 2px solid var(--verde-tinta); display: grid; gap: 8px; }
.papel-2 .caixa-mq { background: var(--papel); }
.caixa-mq h3 { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; line-height: 1.2; color: var(--verde-tinta); }
.caixa-mq p { font-size: 15.5px; line-height: 1.55; color: var(--tinta); text-wrap: pretty; }
.nota-quadro { font-size: 15px; line-height: 1.6; color: var(--cinza); text-wrap: pretty; max-width: 40em; }
.nota-quadro a { color: var(--verde-tinta); font-weight: 600; text-underline-offset: 4px; text-decoration-color: var(--linha-forte); }

/* investir · os 7 projectos em miniatura (fachada, nome e área) e uma só ligação para a prancha de construir */
.quadro-titulo { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--verde-tinta); margin: clamp(40px, 5vw, 64px) 0 16px; }
.quadro-titulo:focus { outline: none; }
.miniaturas { display: grid; gap: 12px; }
.mini-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; padding-top: 16px; border-top: 1px solid var(--linha-forte); }
@media (min-width: 380px) { .mini-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) { .mini-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; } }
@media (min-width: 1000px) { .mini-lista { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.mini { display: grid; gap: 4px; align-content: start; min-width: 0; }
.mini-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1px; outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; background: var(--papel-2); margin-bottom: 6px; }
.mini-nome { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; line-height: 1.2; color: var(--verde-tinta); }
.mini-area { font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.mini-mais { display: block; font-size: 13px; font-weight: 500; color: var(--cinza); }
.mini-leg { font-size: 13.5px; line-height: 1.45; color: var(--cinza); }
.ligacao-projectos { margin-top: 10px; }

/* ---------------------------------- banda do Jardins de Belas: o canto verdadeiro da folha, à escala */
.seccao-projectos, .seccao-cinco { padding-bottom: var(--s1); }
.banda-jb { background: var(--papel); padding-bottom: var(--s1); }
.banda-grelha { position: relative; display: grid; gap: 24px 56px; align-items: center; padding-top: var(--s1); }
.banda-grelha::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--linha); }
.jb-canto { display: grid; gap: 8px; max-width: 280px; }
.jb-canto img { width: 100%; height: auto; outline: 1px solid rgba(0, 0, 0, 0.14); outline-offset: -1px; }
.jb-canto figcaption { font-size: 13.5px; line-height: 1.45; color: var(--cinza); }
.jb-texto { display: grid; gap: 12px; justify-items: start; max-width: 34em; }
.banda-jb .titulo-2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
@media (min-width: 900px) { .banda-grelha { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); } }

/* ----------------------------------------------- S6 · o lote, cotado (o desenho do v1) */
.seccao-lote { padding-block: var(--s3) var(--s2); }
.lote-grelha { display: grid; gap: clamp(32px, 4vw, 56px); }
.lote-texto { display: grid; gap: 16px; align-content: start; justify-items: start; }
@media (min-width: 1040px) {
  .lote-texto { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; align-items: end; }
  .lote-texto .etiqueta, .lote-texto .titulo-2 { grid-column: 1; }
  .lote-texto .lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}
.desenho { position: relative; border: 1px solid var(--linha-clara); padding: clamp(14px, 2.2vw, 28px); display: grid; gap: 16px; min-width: 0; }
.desenho-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-stretch: 82%; font-size: 12.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--salva); }
.desenho figcaption { font-size: 14px; line-height: 1.45; color: var(--salva); text-wrap: pretty; }
.notas { border-top: 1px solid var(--linha-clara); padding-top: 14px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--salva); }
.notas h3 { font-stretch: 82%; font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tijolo-claro); }
.notas ol { display: grid; gap: 8px 32px; counter-reset: n; }
@media (min-width: 900px) { .notas ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.notas li { display: grid; grid-template-columns: 24px 1fr; counter-increment: n; text-wrap: pretty; }
.notas li::before { content: counter(n) "."; font-variant-numeric: tabular-nums; color: var(--papel); font-weight: 600; }
.desenho .ampliar { justify-self: start; }
.lote-h { display: none; width: 100%; max-width: 1120px; height: auto; margin-inline: auto; }
.lote-v { width: 100%; height: auto; max-width: 440px; margin-inline: auto; }
@media (min-width: 960px) { .lote-h { display: block; } .lote-v { display: none; } }
@media (min-width: 960px) { .desenho .ampliar { display: none; } }

.lote-svg { overflow: visible; font-family: var(--sans); }
.lote-svg .bloco { fill: none; stroke: var(--papel); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lote-svg .bloco-fundo { fill: #22473A; stroke: none; }
.lote-svg .limite-traco { fill: none; stroke: var(--tijolo-claro); stroke-width: 1.3; vector-effect: non-scaling-stroke; opacity: 0; }
.lote-svg .parede { stroke: rgba(250, 248, 243, 0.8); stroke-width: 0.9; vector-effect: non-scaling-stroke; fill: none; }
.lote-svg .parede-aberta { stroke: rgba(250, 248, 243, 0.45); stroke-width: 0.8; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.lote-svg .limite { fill: none; stroke: var(--tijolo-claro); stroke-width: 1.3; stroke-dasharray: 9 3 1.5 3; vector-effect: non-scaling-stroke; }
.lote-svg .pav { stroke: rgba(188, 201, 185, 0.16); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.lote-svg .risco { stroke: rgba(188, 201, 185, 0.35); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.lote-svg .zona-pav, .lote-svg .zona-risc { stroke: none; }
.lote-svg .lugar { fill: none; stroke: rgba(188, 201, 185, 0.5); stroke-width: 0.8; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.lote-svg .rot { fill: var(--papel); font-size: 6.4px; font-weight: 600; text-anchor: middle; }
.lote-svg .rot.pq { font-size: 5.3px; }
.lote-svg .rot.zona { fill: var(--salva); font-stretch: 88%; }
.lote-svg .rot .area { fill: var(--salva); font-weight: 500; font-variant-numeric: tabular-nums; }
.lote-svg .rot-cham { fill: var(--papel); font-size: 7px; font-weight: 700; text-anchor: middle; }
.lote-svg .rot-cham.fim { text-anchor: end; }
.lote-svg .rot-cham.ini { text-anchor: start; }
.lote-svg .rot-cham .area { fill: var(--tijolo-claro); font-weight: 600; font-variant-numeric: tabular-nums; }
.lote-svg .cham { fill: none; stroke: var(--tijolo-claro); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.lote-svg .cota, .lote-svg .chamada { stroke: var(--salva); stroke-width: 0.7; vector-effect: non-scaling-stroke; }
.lote-svg .chamada { stroke-opacity: 0.55; }
.lote-svg .marca { stroke: var(--salva); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lote-svg .cota-t { fill: var(--salva); font-size: 5.8px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.lote-svg .cota-g { fill: var(--papel); font-size: 6.4px; }
.lote-svg .frente { fill: var(--tijolo-claro); font-size: 4.8px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-anchor: middle; font-stretch: 82%; }
.lote-svg .frente-l { stroke: var(--tijolo-claro); stroke-width: 0.8; stroke-dasharray: 1 2; vector-effect: non-scaling-stroke; }
.lote-svg .esc-cheio { fill: var(--salva); }
.lote-svg .esc-vazio { fill: none; stroke: var(--salva); stroke-width: 0.7; vector-effect: non-scaling-stroke; }
.lote-svg .esc-t { fill: var(--salva); font-size: 5.2px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.lote-svg .esc-u { text-anchor: start; }
.lote-h .rot { font-size: 5.6px; }
.lote-h .rot.pq { font-size: 4.7px; }
.lote-h .cota-t { font-size: 5px; }
.lote-h .cota-g { font-size: 5.6px; }
.lote-h .rot-cham { font-size: 6.2px; }
.lote-h .frente { font-size: 4.2px; }
.lote-h .esc-t { font-size: 4.6px; }
.lote-v .rot { font-size: 7px; }
.lote-v .rot.pq { font-size: 6.5px; }
.lote-v .cota-t { font-size: 6.6px; }
.lote-v .cota-g, .lote-v .rot-cham { font-size: 7.4px; }
.lote-v .frente { font-size: 5.6px; }
.lote-v .esc-t { font-size: 6px; }
/* A planta monta-se com o scroll e desmonta-se ao subir: a animação está presa à posição do desenho no ecrã
   (CSS scroll-driven, sem JavaScript, fora do fio principal). Ordem: limite, cotas, moradia, anexo, quintais,
   rótulos e as chamadas da moradia e do anexo. Fica completa antes de o desenho chegar ao centro do ecrã
   (cover 47 %). Sem suporte, ou com movimento reduzido, a planta está completa e parada. Só opacidade e
   stroke-dashoffset; os textos só em opacidade (vários estão rodados pelo atributo transform). */
@keyframes planta-traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes planta-surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes planta-limite { 0% { stroke-dashoffset: 1; opacity: 1; } 72% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .desenho .lote-svg { view-timeline: --planta block; }
    .desenho .lote-svg :is(.traco, .cota, .cham, .limite-traco) { stroke-dasharray: 1; }
    .desenho .lote-svg :is(.limite-traco, .limite, .cota, .chamada, .marca, .cota-t, .frente, .frente-l, .escala,
      .bloco, .bloco-fundo, .parede, .parede-aberta, .camada-zonas, .rot, .cham, .rot-cham) {
      animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --planta;
    }
    .desenho .lote-svg .limite-traco { animation-name: planta-limite; animation-range: cover 2% cover 16%; }
    .desenho .lote-svg .limite { animation-name: planta-surge; animation-range: cover 12% cover 16%; }
    .desenho .lote-svg .cota { animation-name: planta-traco; animation-range: cover 12% cover 22%; }
    .desenho .lote-svg :is(.chamada, .marca, .cota-t, .frente, .frente-l, .escala) { animation-name: planta-surge; animation-range: cover 16% cover 23%; }
    .desenho .lote-svg .camada-casa .bloco { animation-name: planta-traco; animation-range: cover 19% cover 27%; }
    .desenho .lote-svg .camada-casa .parede { animation-name: planta-traco; animation-range: cover 23% cover 31%; }
    .desenho .lote-svg .camada-casa :is(.bloco-fundo, .parede-aberta) { animation-name: planta-surge; animation-range: cover 25% cover 31%; }
    .desenho .lote-svg .camada-anexo .bloco { animation-name: planta-traco; animation-range: cover 29% cover 34%; }
    .desenho .lote-svg .camada-anexo .parede { animation-name: planta-traco; animation-range: cover 31% cover 35%; }
    .desenho .lote-svg .camada-anexo .bloco-fundo { animation-name: planta-surge; animation-range: cover 32% cover 36%; }
    .desenho .lote-svg .camada-zonas { animation-name: planta-surge; animation-range: cover 34% cover 40%; }
    .desenho .lote-svg .rot { animation-name: planta-surge; animation-range: cover 37% cover 43%; }
    .desenho .lote-svg .cham { animation-name: planta-traco; animation-range: cover 41% cover 45%; }
    .desenho .lote-svg .rot-cham { animation-name: planta-surge; animation-range: cover 43% cover 47%; }
  }
}

.loteamento-bloco { display: grid; gap: 28px; margin-top: var(--s2); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--linha-clara); }
.loteamento-planta { display: grid; gap: 12px; justify-items: start; }
.loteamento-planta img { width: 100%; max-width: 600px; height: auto; }
.loteamento-planta figcaption { font-size: 13.5px; line-height: 1.45; color: var(--salva); max-width: 40em; }
.loteamento-texto { display: grid; gap: 14px; align-content: start; }
.loteamento-num { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.32; color: var(--papel); text-wrap: pretty; max-width: 24em; }
@media (min-width: 960px) { .loteamento-bloco { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; } }

/* ---------------------------------------------- S7 · o que leva: o jardim numa tira, o cartão em papel */
.incluido { background: var(--papel-2); --fundo: var(--papel-2); padding-bottom: var(--s2); }
.faixa-jardim img { width: 100%; height: clamp(150px, 19vw, 280px); object-fit: cover; object-position: 28% 42%; }
.legenda-faixa { background: var(--noite); color: rgba(250, 248, 243, 0.88); font-size: 13px; line-height: 1.45; padding: 9px 0; }
.legenda-faixa .wrap { display: block; }
.incluido > .wrap { padding-top: var(--s2); }
.incluido-cartao { background: var(--papel); border: 1px solid var(--linha-forte); border-radius: 2px; padding: clamp(20px, 3.4vw, 48px); display: grid; gap: 26px; box-shadow: 0 30px 60px -44px rgba(21, 37, 29, 0.5); }
.incluido-cabeca { display: grid; gap: 12px; }
.incluido-grelha { display: grid; gap: 32px; }
.lista-cab { padding-top: 12px; border-top: 2px solid var(--verde-tinta); font-stretch: 88%; font-size: 15px; font-weight: 700; color: var(--verde-tinta); margin-bottom: 2px; }
.lista-cab-nao { margin-top: 28px; border-top-color: var(--terracota); color: var(--terracota); }
.lista-inc li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--linha); font-size: 15.5px; line-height: 1.4; }
.lista-inc li > span:first-child { min-width: 0; text-wrap: pretty; }
.lista-inc li > span:last-child { flex: 0 1 auto; min-width: 7.4em; max-width: 46%; text-align: right; font-size: 14px; font-weight: 600; color: var(--verde-tinta); text-wrap: balance; }
.lista-nao li > span:first-child { color: var(--cinza); }
.lista-nao li > span:last-child { color: var(--terracota); }
.preco-bloco { align-self: start; display: grid; gap: 10px; padding: clamp(22px, 2.6vw, 32px); background: var(--noite); color: var(--papel); border-radius: 2px; }
.preco-valor { font-family: var(--serif); font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.6rem); font-weight: 560; line-height: 1; letter-spacing: -0.02em; }
.preco-sub { font-size: 15px; color: var(--salva); margin-top: -2px; }
.preco-conta { font-size: 15.5px; line-height: 1.55; color: rgba(250, 248, 243, 0.88); padding-top: 12px; border-top: 1px solid var(--linha-clara); text-wrap: pretty; }
.preco-seguinte { font-size: 14px; color: rgba(188, 201, 185, 0.92); }
.preco-data { font-stretch: 88%; font-size: 13px; font-weight: 600; color: var(--salva); }
.preco-bloco .accao { padding-top: 8px; }
.preco-bloco .btn { width: 100%; padding-inline: 16px; }
.preco-bloco .micro { color: rgba(250, 248, 243, 0.8); }
.preco-cabeca, .preco-meio { display: grid; gap: 10px; align-content: start; }
.incluido-listas { display: grid; gap: 0 44px; }
@media (min-width: 900px) {
  .incluido-listas { grid-template-columns: 1fr 1fr; align-items: start; }
  .lista-cab-nao { margin-top: 0; }
}
@media (min-width: 1000px) {
  .preco-bloco { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3.4fr); gap: 32px; align-items: start; padding: 32px 36px; }
  .preco-bloco .accao { padding-top: 0; }
  .preco-conta { padding-top: 0; border-top: 0; padding-left: 32px; border-left: 1px solid var(--linha-clara); }
  .preco-meio .preco-seguinte, .preco-meio .preco-data { padding-left: 32px; }
}
@media (max-width: 479px) {
  .lista-inc li { flex-direction: column; gap: 2px; align-items: flex-start; }
  .lista-inc li > span:last-child { max-width: none; min-width: 0; text-align: left; font-size: 13.5px; }
}

/* ---------------------------------------------- S8 · documentos: quatro folhas de papel em sequência
   Cada folha é um documento: papel, filete verde-tinta, canto dobrado, número tijolo. Ligam-se por uma linha
   de cota tracejada com remates, como nas cotas do lote. No telemóvel empilham-se com a cota à esquerda. */
.folhas-docs { position: relative; display: grid; gap: 10px; padding-left: 28px; --cota: var(--terracota); }
.folhas-docs::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: 20px; border-left: 1px dashed var(--cota); }
.folha-doc {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; row-gap: 3px; align-content: start;
  padding: 12px 30px 13px 12px; background: #FFFEFA; border: 1px solid var(--linha-forte);
  box-shadow: 0 1px 0 rgba(32, 60, 50, 0.05), 0 14px 22px -20px rgba(21, 37, 29, 0.45);
}
/* o remate da cota, em diagonal, onde a linha chega à folha */
.folha-doc::before { content: ""; position: absolute; left: -25px; top: 20px; width: 9px; border-top: 1.4px solid var(--cota); transform: rotate(-45deg); }
/* o canto dobrado */
.folha-doc::after {
  content: ""; position: absolute; top: -1px; right: -1px; width: 16px; height: 16px;
  background: linear-gradient(225deg, var(--fundo) 0 50%, var(--papel-3) 50% 100%);
  border-left: 1px solid var(--linha-forte); border-bottom: 1px solid var(--linha-forte);
}
.folha-doc.dupla { box-shadow: 5px 5px 0 -1px #FFFEFA, 5px 5px 0 0 var(--linha-forte), 0 14px 22px -20px rgba(21, 37, 29, 0.45); }
.fd-n { grid-row: 1 / span 2; padding-top: 4px; font-stretch: 88%; font-size: 13px; font-weight: 700; color: var(--terracota); font-variant-numeric: tabular-nums; }
.fd-nome, .fd-texto, .fd-linhas { grid-column: 2; }
.fd-nome { font-family: var(--serif); font-size: clamp(1.05rem, 1rem + 0.2vw, 1.12rem); font-weight: 600; line-height: 1.25; color: var(--verde-tinta); text-wrap: balance; }
.fd-texto { font-size: 15px; line-height: 1.5; color: var(--tinta); text-wrap: pretty; }
.fd-linhas { display: none; }
@media (min-width: 900px) {
  .folhas-docs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; padding-left: 0; padding-top: 30px; }
  .folhas-docs::before { left: 0; right: 0; top: 8px; bottom: auto; border-left: 0; border-top: 1px dashed var(--cota); }
  .folha-doc { grid-template-columns: minmax(0, 1fr); padding: 18px 34px 18px 18px; row-gap: 6px; }
  .fd-n { grid-row: auto; padding-top: 0; }
  .fd-nome, .fd-texto, .fd-linhas { grid-column: 1; }
  .folha-doc::before { left: 18px; top: -27px; width: 9px; }
  .folha-doc.dupla::before { left: 18px; }
  /* as linhas do texto do documento, a lápis: dizem «folha», não enchem caixa */
  .fd-linhas { display: block; height: 22px; margin-top: 10px; background: repeating-linear-gradient(to bottom, transparent 0 6px, rgba(32, 60, 50, 0.12) 6px 7px); width: 72%; }
}
.depois-obra { display: grid; gap: 10px 48px; margin-top: clamp(20px, 3vw, 36px); }
.depois-obra p { font-size: clamp(15px, 14.6px + 0.15vw, 16px); line-height: 1.55; color: var(--tinta); text-wrap: pretty; max-width: 36em; }
.depois-obra b { font-weight: 700; color: var(--verde-tinta); }
@media (min-width: 900px) { .seccao-documentos > .wrap > .depois-obra { grid-template-columns: 1fr 1fr; } }

/* as infra-estruturas: uma legenda de duas linhas, como a de um desenho (sem tabela a repetir o estado) */
.infra { margin-top: clamp(26px, 4vw, 48px); padding-top: 18px; border-top: 1px solid var(--linha-forte); display: grid; gap: 12px 48px; justify-items: start; }
.infra-texto { display: grid; gap: 10px; align-content: start; justify-items: start; }
.infra-titulo { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; line-height: 1.25; color: var(--verde-tinta); }
.infra-legenda { display: grid; gap: 12px; }
.infra-legenda > div { display: grid; gap: 2px; }
.infra-legenda dt { font-stretch: 88%; font-size: 13.5px; font-weight: 700; color: var(--terracota); }
.infra-legenda .definido dt { color: var(--verde-tinta); }
.infra-legenda dd { font-size: 15.5px; line-height: 1.5; color: var(--tinta); text-wrap: pretty; }
.infra-legenda { justify-self: stretch; }
@media (min-width: 760px) { .infra-legenda > div { grid-template-columns: 13em minmax(0, 1fr); gap: 16px; align-items: baseline; } }
@media (min-width: 1040px) {
  .infra { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .infra-titulo { grid-column: 1; grid-row: 1; }
  .infra-reg { grid-column: 1; grid-row: 2; }
  .infra-legenda { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 899px) {
  .seccao-documentos { padding-block: 40px 44px; }
  .seccao-documentos .cabeca { margin-bottom: 22px; gap: 12px; }
  .seccao-documentos .cartao-incluido { padding: 12px 14px; }
  .depois-obra { gap: 8px; }
  .folhas-docs { gap: 8px; }
  .fd-texto { font-size: 14.5px; line-height: 1.45; }
}

/* investir S4: por baixo das folhas, a obra e o prazo ao lado do cartão do incluído, que se recolhe no telemóvel */
.documentos-grelha { display: grid; gap: 24px; margin-top: clamp(20px, 3vw, 36px); }
@media (min-width: 900px) { .documentos-grelha .depois-obra { grid-template-columns: 1fr 1fr; } }
.documentos-grelha .depois-obra { margin-top: 0; align-content: start; }
.cartao-incluido .lista-inc li > span:last-child { min-width: 11.5em; }
.cartao-incluido { padding: clamp(18px, 2.4vw, 28px); background: var(--papel); border: 1px solid var(--linha-forte); border-radius: 2px; align-self: start; }
.cartao-incluido summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.cartao-incluido summary::-webkit-details-marker { display: none; }
.cartao-incluido summary .lista-cab { flex: 1; margin: 0; }
.cartao-incluido summary::after { content: ""; width: 12px; height: 12px; margin-left: 12px; border-right: 1.6px solid var(--verde-tinta); border-bottom: 1.6px solid var(--verde-tinta); transform: translateY(-3px) rotate(45deg); transition: transform 200ms var(--ease-out); }
.cartao-incluido[open] summary::after { transform: translateY(3px) rotate(-135deg); }
@media (min-width: 1100px) {
  .cartao-incluido summary { cursor: default; pointer-events: none; }
  .cartao-incluido summary::after { display: none; }
}

/* ---------------------------------------------- para quem é: duas listas, sem caixas de verificação */
.seccao-para-quem { padding-bottom: var(--s1); }
.admissao { display: grid; gap: 32px; }
.adm h3 { font-family: var(--serif); font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); font-weight: 600; line-height: 1.2; padding-bottom: 12px; border-bottom: 2px solid currentColor; }
.adm-sim { background: var(--papel); padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--linha-forte); }
.adm-sim h3 { color: var(--verde-tinta); }
.adm-nao { padding: clamp(20px, 2.6vw, 32px) 0; }
.adm-nao h3 { color: var(--terracota); }
.adm li { padding: 14px 0; border-bottom: 1px solid var(--linha); font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
.adm li:last-child { border-bottom: 0; }
.adm-nao li { color: var(--cinza); }
@media (min-width: 900px) { .admissao { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } }

/* ---------------------------------------------- como comprar: um percurso com quatro marcos, e o mapa
   Uma linha tracejada liga os marcos numerados a tijolo; por baixo de cada um, o título e uma linha.
   No telemóvel o percurso desce, com a linha à esquerda. Sem caixas. */
.seccao-comprar { padding-top: var(--s1); }
.percurso { position: relative; display: grid; gap: 26px; padding-left: 54px; }
.percurso::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 30px; border-left: 1px dashed rgba(230, 150, 79, 0.7); }
.marco { position: relative; display: grid; gap: 6px; align-content: start; }
.marco-n {
  position: absolute; left: -54px; top: -4px; width: 35px; height: 35px; border-radius: 50%;
  display: grid; place-items: center; background: var(--fundo); box-shadow: inset 0 0 0 1.5px var(--tijolo-claro);
  font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1; color: var(--tijolo-claro); font-variant-numeric: lining-nums tabular-nums;
}
.marco h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 560; line-height: 1.2; color: var(--papel); }
.marco p { font-size: 15.5px; line-height: 1.55; color: var(--salva); text-wrap: pretty; max-width: 22em; }
.percurso-accao { margin-top: clamp(28px, 3.6vw, 44px); }
@media (min-width: 900px) {
  .percurso { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 36px; padding-left: 0; padding-top: 60px; }
  .percurso::before { left: 17px; right: calc(25% - 44px); top: 17px; bottom: auto; border-left: 0; border-top: 1px dashed rgba(230, 150, 79, 0.7); }
  .marco-n { left: 0; top: -60px; }
}
.mapa-faixa { display: grid; gap: 20px 40px; margin-top: var(--s1); }
.mapa { display: grid; gap: 8px; min-width: 0; }
.mapa-tela { position: relative; border: 1px solid var(--linha-clara); line-height: 0; background: #F1EDE3; }
.mapa-tela img { width: 100%; height: auto; }
.mapa-ponto { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--tijolo); box-shadow: 0 0 0 5px rgba(195, 99, 0, 0.25), 0 0 0 1.5px var(--papel); }
.mapa-rot {
  position: absolute; transform: translate(-50%, -50%); padding: 2px 6px; white-space: nowrap; line-height: 1.2;
  font-stretch: 88%; font-size: 13px; font-weight: 600; color: var(--verde-tinta); background: rgba(241, 237, 227, 0.9); border-radius: 2px;
}
.mapa-rot.lugar { font-family: var(--serif); font-stretch: 100%; font-size: 16px; font-weight: 600; }
.mapa-rot.lugar-peq { font-size: 14px; }
.mapa-rot.via { font-size: 12.5px; color: #3f5648; }
.mapa-rot.fim { transform: translate(-100%, -50%); }
.mapa-rot.villa { transform: translate(0, -50%); font-size: 14px; font-weight: 700; color: var(--tijolo-fundo); background: var(--papel); box-shadow: 0 0 0 1px rgba(156, 78, 0, 0.35); }
@media (max-width: 599px) { .mapa-rot.via, .mapa-rot.lugar-peq { display: none; } .mapa-rot.lugar { font-size: 13.5px; } .mapa-rot.fim { transform: translate(-100%, -50%); }
.mapa-rot.villa { font-size: 12.5px; } }
.mapa figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 13.5px; color: var(--salva); line-height: 1.4; }
.mapa-osm { font-size: 12.5px; }
.mapa-osm a { color: inherit; text-underline-offset: 3px; }
.mapa-lado { display: grid; gap: 10px; align-content: start; }
.mapa-lado .seguranca { margin-top: 14px; }
.mapa-micro { font-size: 15px; line-height: 1.55; color: var(--salva); max-width: 30em; }
.mapa-ligacoes { display: grid; gap: 0; border-top: 1px solid var(--linha-clara); margin-top: 6px; }
.mapa-ligacoes li { border-bottom: 1px solid var(--linha-clara); }
.mapa-ligacoes a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15.5px; font-weight: 600; color: var(--papel); text-decoration: underline; text-decoration-color: rgba(250, 248, 243, 0.45); text-underline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .mapa-ligacoes a:hover { text-decoration-color: currentColor; } }
@media (min-width: 1000px) { .mapa-faixa { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.seguranca { margin-top: clamp(28px, 3vw, 40px); padding: 14px 18px; border: 1px solid var(--linha-clara); border-left: 3px solid var(--tijolo-claro); font-size: 15.5px; color: var(--papel); max-width: 44em; }

/* ---------------------------------------------- perguntas */
.faq-grelha { display: grid; gap: 28px; }
.faq-cabeca { display: grid; gap: 14px; align-content: start; justify-items: start; }
.faq-cabeca .titulo-2 { font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.7rem); }
.faq-outra { font-size: 16px; color: var(--cinza); }
.faq-outra a { font-weight: 600; color: var(--verde-tinta); text-underline-offset: 5px; text-decoration-color: var(--linha-forte); display: inline-flex; min-height: 44px; align-items: center; }
.faq details { border-bottom: 1px solid var(--linha); }
.faq details:first-child { border-top: 1px solid var(--linha-forte); }
.faq summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 22px; align-items: baseline; gap: 16px; min-height: 64px; padding: 18px 0;
  cursor: pointer; list-style: none; touch-action: manipulation;
  font-family: var(--serif); font-size: clamp(1.08rem, 1rem + 0.35vw, 1.24rem); font-weight: 600; line-height: 1.3; color: var(--verde-tinta); text-wrap: pretty;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 14px; height: 14px; align-self: center; justify-self: end;
  background: linear-gradient(var(--verde-tinta), var(--verde-tinta)) center / 14px 1.6px no-repeat, linear-gradient(var(--verde-tinta), var(--verde-tinta)) center / 1.6px 14px no-repeat;
  transition: transform 220ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 38px 22px 0; font-size: 16px; line-height: 1.6; color: var(--tinta); max-width: 44em; text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 5px; } }
@media (min-width: 1000px) { .faq-grelha { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; } .faq-cabeca { position: sticky; top: 112px; } }

/* ---------------------------------------------- ligação cruzada e fecho */
.cruzada { background: var(--papel-2); padding-block: 22px; border-top: 1px solid var(--linha); }
.cruzada p { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); color: var(--verde-tinta); text-wrap: pretty; }
.cruzada a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--terracota); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(132, 80, 39, 0.4); }
.cruzada a svg { width: 18px; height: 18px; }
.fecho { display: grid; gap: clamp(36px, 5vw, 72px); }
@media (min-width: 1000px) { .fecho { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; } }
.fecho-texto { display: grid; gap: 18px; align-content: start; justify-items: start; }
.fecho-infra { font-size: 14.5px; line-height: 1.5; color: var(--salva); max-width: 30em; padding-top: 14px; border-top: 1px solid var(--linha-clara); }
.fecho-lado { display: grid; gap: 14px; align-content: start; }
.form { display: grid; gap: 18px; align-content: start; }
.form-obrig { font-size: 14px; color: var(--salva); }
.campo { display: grid; gap: 8px; align-content: start; }
.campo label, .campo legend, .campo-rotulo { font-stretch: 88%; font-size: 14.5px; font-weight: 600; color: var(--papel); padding: 0; }
.campo input[type="text"], .campo input[type="email"] {
  width: 100%; height: 52px; padding: 0 14px;
  border: 1px solid rgba(188, 201, 185, 0.62); border-radius: 3px; background: rgba(250, 248, 243, 0.05);
  color: var(--papel); font: inherit; font-size: 16px;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.campo input::placeholder { color: rgba(188, 201, 185, 0.9); }
.campo input:focus { border-color: var(--tijolo-claro); background: rgba(250, 248, 243, 0.08); outline: 2px solid transparent; box-shadow: 0 0 0 1px var(--tijolo-claro); }
.campo input[aria-invalid="true"] { border-color: #F2A57E; }
.ajuda { font-size: 14px; color: var(--salva); }
.erro { font-size: 14px; font-weight: 600; color: #F6BC9C; }
.erro:empty { display: none; }
.erro-resumo { font-size: 14.5px; font-weight: 600; color: #F6BC9C; }
.erro-resumo:not(:empty) { padding: 10px 14px; border: 1px solid rgba(246, 188, 156, 0.5); border-radius: 3px; }
.duas { display: grid; gap: 18px; align-items: start; }
@media (min-width: 640px) { .duas { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 8px; } .duas .ajuda { grid-column: 1 / -1; } }
fieldset.campo { border: 0; padding: 0; min-width: 0; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.opcoes label { position: relative; display: inline-flex; cursor: pointer; }
.opcoes input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcoes label > span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 16px;
  border: 1px solid rgba(188, 201, 185, 0.62); border-radius: 3px;
  font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--papel);
  user-select: none; -webkit-user-select: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.opcoes label:active > span { transform: scale(0.97); }
.opcoes input:checked + span { background: var(--papel); border-color: var(--papel); color: var(--verde-tinta); }
.opcoes input:checked + span::before { content: ""; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23B35A00' stroke-width='2.4'/%3E%3C/svg%3E") center / 14px no-repeat; }
.opcoes input:focus-visible + span { outline: 2px solid var(--papel); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(14, 26, 20, 0.88); }
fieldset.campo[aria-invalid="true"] .opcoes label > span { border-color: #F2A57E; }
.modelo-valor { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; color: var(--papel); }
.modelo-valor a { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--tijolo-claro); text-underline-offset: 4px; display: inline-flex; min-height: 44px; align-items: center; }
.isco { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { width: 100%; }
@media (min-width: 640px) { .form .btn { width: auto; justify-self: start; } }
.form-nota, .form-computador { font-size: 14px; line-height: 1.5; color: var(--salva); text-wrap: pretty; max-width: 34em; }
.form-computador { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 760px) { .form-computador { display: block; margin-top: -10px; } }
.form-computador a, .form-tel a { color: var(--papel); font-weight: 600; text-underline-offset: 4px; white-space: nowrap; }
.form-tel { font-size: 15px; color: var(--salva); }
.form-tel a { display: inline-flex; min-height: 44px; align-items: center; }
.sem-js .btn { width: 100%; }
.fecho-extra { display: grid; gap: 0; padding-top: 6px; border-top: 1px solid var(--linha-clara); font-size: 15px; color: var(--salva); }
.fecho-extra a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--papel); text-decoration: underline; text-decoration-color: rgba(250, 248, 243, 0.4); text-underline-offset: 5px; }

/* ---------------------------------------------- rodapé */
.rodape { padding-block: 48px calc(56px + env(safe-area-inset-bottom, 0px)); background: var(--papel); font-size: 14.5px; color: var(--cinza); }
.rodape-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-bottom: 22px; border-bottom: 1px solid var(--linha); }
.rodape-marcas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rodape-marcas .villa { height: 44px; width: auto; }
.rodape-marcas .proimoveis { height: 24px; width: auto; padding-left: 22px; border-left: 1px solid var(--linha); box-sizing: content-box; }
.rodape-linha { font-size: 14.5px; color: var(--tinta); }
.rodape-contactos { padding-top: 14px; line-height: 1.5; }
.rodape-contactos a { display: inline-block; padding-block: 10px; color: var(--verde-tinta); font-weight: 600; text-underline-offset: 4px; white-space: nowrap; }
.rodape-ligacoes { display: flex; flex-wrap: wrap; align-items: center; }
.rodape-ligacoes li { display: inline-flex; align-items: center; }
.rodape-ligacoes li + li::before { content: "·"; margin: 0 10px; color: var(--cinza); }
.rodape-ligacoes a { display: inline-flex; align-items: center; min-height: 44px; color: var(--verde-tinta); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .rodape-ligacoes a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.rodape-aviso { padding-top: 8px; }
.rodape-direitos { padding-top: 4px; }
@media (max-width: 599px) {
  .rodape-contactos { display: flex; flex-wrap: wrap; column-gap: 18px; }
  .rodape-contactos .sep { display: none; }
  .rodape-marcas .proimoveis { padding-left: 0; border-left: 0; }
  .rodape-ligacoes { gap: 0 18px; }
  .rodape-ligacoes li + li::before { content: none; }
}

/* ---------------------------------------------- barra do telemóvel */
.barra {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--papel); border-top: 1px solid var(--linha-forte); box-shadow: 0 -10px 24px -18px rgba(21, 37, 29, 0.35);
  transform: translateY(calc(100% + 40px)); transition: transform 300ms var(--ease-out);
}
.barra.ver { transform: none; }
.barra-preco { display: grid; line-height: 1.2; }
.barra-preco strong { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--verde-tinta); letter-spacing: -0.01em; }
.barra-preco > span { font-size: 13px; color: var(--cinza); }
@media (min-width: 900px) { .barra { display: none; } }
@media (max-width: 359px) { .barra-preco strong { font-size: 16px; } .barra .btn { padding: 0 12px; } }
@media (max-width: 340px) { .barra { gap: 10px; } .barra-preco strong { font-size: 15px; } .barra-preco > span { font-size: 12.5px; } .barra .btn { white-space: nowrap; gap: 0; } .barra .btn svg { display: none; } }

/* ---------------------------------------------- visor de ecrã inteiro (plantas, desenho, planta do loteamento) */
.visor { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--papel); color: var(--tinta); }
.visor[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.visor::backdrop { background: rgba(14, 26, 20, 0.7); }
.visor-barra { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) var(--gutter) 8px; border-bottom: 1px solid var(--linha); background: var(--papel); }
.visor-titulo { flex: 1; min-width: 0; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--verde-tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-zoom, .visor-fechar { min-height: 44px; padding: 0 14px; border: 1px solid var(--linha-forte); border-radius: 3px; background: transparent; font-size: 15px; font-weight: 600; color: var(--verde-tinta); cursor: pointer; touch-action: manipulation; }
.visor-fechar { background: var(--verde-tinta); border-color: var(--verde-tinta); color: var(--papel); }
.visor-tela { overflow: auto; overscroll-behavior: contain; padding: 16px; display: flex; gap: 16px; align-items: flex-start; justify-content: center; touch-action: pan-x pan-y pinch-zoom; }
.visor-tela figure { display: grid; gap: 6px; flex: 0 1 auto; }
.visor-tela figcaption { font-stretch: 88%; font-size: 13px; font-weight: 600; color: var(--cinza); }
.visor-tela img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 120px); outline: 1px solid rgba(0, 0, 0, 0.08); outline-offset: -1px; background: var(--papel-2); }
.visor-tela.alto img { max-height: none; }
.visor-tela.perto { justify-content: flex-start; }
.visor-tela.perto img { max-width: none; max-height: none; width: calc(var(--w) * 1px); }
.visor-tela svg { width: 100%; max-width: 1200px; height: auto; }
.visor-tela.perto svg { width: 220%; max-width: none; }
.visor-tela.escuro-tela { background: var(--noite); }
.visor[open] .visor-tela { animation: abre 180ms var(--ease-out) both; }
@keyframes abre { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------- investir: herói, régua, tabela, histórico */
.titulo-preco { font-variant-numeric: lining-nums; }
.titulo-preco .frase { display: block; }
.titulo-preco .depois { color: var(--salva); }
.titulo-preco .inteiro { white-space: nowrap; }
.heroi-investir .titulo-1 { font-size: clamp(2rem, 1.05rem + 4.1vw, 4.7rem); }
@media (max-width: 759px) { .heroi-investir .titulo-1 { font-size: clamp(1.9rem, 1.15rem + 4vw, 2.5rem); } }
.folha-lote-svg .l-lim { fill: rgba(195, 99, 0, 0.06); stroke: var(--tijolo); stroke-width: 1.4; stroke-dasharray: 9 3 1.5 3; vector-effect: non-scaling-stroke; }
.folha-lote-svg .l-pav { stroke: rgba(32, 60, 50, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.folha-lote-svg .l-cota { stroke: var(--cinza); stroke-width: 1; vector-effect: non-scaling-stroke; }
.folha-lote-svg .l-cota-t { fill: var(--verde-tinta); font-family: var(--sans); font-size: 12px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.folha-lote-svg .l-frente { fill: var(--terracota); font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-anchor: middle; text-transform: uppercase; font-stretch: 82%; }
.folha-lote-svg .l-frente-l { stroke: var(--terracota); stroke-width: 0.8; stroke-dasharray: 1 2; vector-effect: non-scaling-stroke; }

.regua-fig { margin-bottom: clamp(32px, 4vw, 48px); }
.regua { width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.regua .eixo, .regua .tick { stroke: var(--linha-forte); stroke-width: 1; vector-effect: non-scaling-stroke; }
.regua .grelha { stroke: rgba(32, 60, 50, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.regua .tick-t { fill: var(--cinza); font-size: 12px; text-anchor: middle; font-variant-numeric: tabular-nums; font-stretch: 88%; }
.regua .tick-t.unid { text-anchor: end; font-size: 12.5px; }
.regua .barra-a { fill: var(--tijolo); }
.regua .barra-b { fill: var(--verde); }
.regua .remate { stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.regua .remate.a { stroke: var(--tijolo-fundo); }
.regua .remate.b { stroke: var(--verde-tinta); }
.regua .fase { fill: var(--tinta); font-size: 15px; font-weight: 600; }
.regua .fase-s { fill: var(--cinza); font-size: 13.5px; }
.regua .valor { fill: var(--verde-tinta); font-family: var(--serif); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; }
.regua .valor.a { fill: var(--tijolo-fundo); font-size: 26px; }
.regua-m .fase { font-size: 13.5px; }
.regua-m .valor { font-size: 21px; }
.js .regua .cresce { transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; transition: transform 900ms var(--ease-in-out) var(--d, 0ms); }
.js .visto .regua .cresce { transform: none; }
.js .regua .surge { opacity: 0; transition: opacity 400ms ease 780ms; }
.js .visto .regua .surge { opacity: 1; }
.regua-m { display: block; max-width: 520px; }
.regua-d { display: none; }
@media (min-width: 600px) { .regua-m { display: none; } .regua-d { display: block; } }

.tabela-grelha { display: grid; gap: 32px; }
.tabela-principal { display: grid; gap: 22px; align-content: start; min-width: 0; }
/* desde 04/11/2026 a tabela ocupa a coluna sozinha (saiu o histórico do Jardins de Belas) */
@media (min-width: 1100px) { .tabela-principal { max-width: 880px; } }
.tabela-fases { width: 100%; border-collapse: collapse; }
.tabela-fases thead th { text-align: right; padding: 0 0 12px 12px; font-stretch: 88%; font-size: 14px; font-weight: 700; color: var(--cinza); border-bottom: 1px solid var(--linha-forte); vertical-align: bottom; }
.tabela-fases thead td { border-bottom: 1px solid var(--linha-forte); }
.tabela-fases tbody th { text-align: left; padding: 16px 12px 16px 0; font-size: 15.5px; font-weight: 600; color: var(--tinta); border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela-fases td { padding: 16px 0 16px 12px; text-align: right; border-bottom: 1px solid var(--linha); vertical-align: top; }
.preco { font-family: var(--serif); font-size: clamp(1.12rem, 0.95rem + 0.7vw, 1.45rem); font-weight: 600; color: var(--verde-tinta); line-height: 1.25; font-variant-numeric: tabular-nums lining-nums; }
.tabela-fases .preco:not(.agora) { font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem); font-weight: 500; }
.tabela-fases .agora { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 1.9rem); color: var(--tijolo-fundo); background: rgba(195, 99, 0, 0.06); box-shadow: inset 0 3px 0 var(--tijolo); padding-right: 10px; }
.preco-nota { display: block; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--cinza); margin-top: 4px; }
.indisp { font-size: 14.5px; color: var(--cinza); }
.fases-cartoes { display: none; gap: 12px; }
.fase-cartao { border: 1px solid var(--linha-forte); padding: 16px 16px 6px; background: var(--papel); }
.fase-cartao.agora { box-shadow: inset 0 3px 0 var(--tijolo); background: #F8F0E6; }
.fase-cartao h3 { font-stretch: 88%; font-size: 14.5px; font-weight: 700; color: var(--cinza); padding-bottom: 8px; border-bottom: 1px solid var(--linha-forte); }
.fase-cartao dl > div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.fase-cartao dl > div:last-child { border-bottom: 0; }
.fase-cartao dt { font-size: 14px; font-weight: 600; color: var(--tinta); }
.fase-cartao.agora .preco { color: var(--tijolo-fundo); }
@media (max-width: 419px) { .tabela-fases { display: none; } .fases-cartoes { display: grid; } }
.tabela-notas { display: grid; gap: 8px; font-size: 14.5px; line-height: 1.55; color: var(--cinza); max-width: 48em; }
.tabela-notas .preco-data { color: var(--cinza); }
.tabela-notas a { color: var(--verde-tinta); font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; text-underline-offset: 4px; white-space: nowrap; }

/* investir S5 · o prazo na etiqueta (o «5» grande saiu: revisão final, I7) e o texto ao lado do título */
.cinco { display: grid; gap: 20px 56px; }
.cinco-cabeca { display: grid; gap: 14px; align-content: start; justify-items: start; }
.cinco-texto { display: grid; gap: 16px; align-content: start; }
.cinco-regras { font-size: 16px; line-height: 1.55; color: var(--verde-tinta); max-width: 36em; padding-top: 14px; border-top: 1px solid var(--linha); }
@media (min-width: 960px) { .cinco { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; } }

/* investir S7 · a planta inteira e os dois lotes à mesma escala */
.loteamento-grande { display: grid; gap: 32px; }
.loteamento-grande .loteamento-planta img { max-width: 860px; }
.loteamento-lado { display: grid; gap: clamp(28px, 3.4vw, 44px); align-content: start; }
@media (min-width: 1000px) { .loteamento-grande { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 56px; } }
.lotes-escala { width: 100%; max-width: 500px; }
.lotes-svg { width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.lotes-svg .l-lim { fill: rgba(230, 150, 79, 0.08); stroke: var(--tijolo-claro); stroke-width: 1.4; stroke-dasharray: 9 3 1.5 3; vector-effect: non-scaling-stroke; }
.lotes-svg .l-pav { stroke: rgba(188, 201, 185, 0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lotes-svg .l-cota { stroke: var(--salva); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lotes-svg .l-cota-t { fill: var(--salva); font-size: 13px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.lotes-svg .l-frente { fill: var(--tijolo-claro); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-anchor: middle; text-transform: uppercase; font-stretch: 82%; }
.lotes-svg .l-area { fill: var(--papel); font-family: var(--serif); font-size: 30px; font-weight: 600; text-anchor: middle; letter-spacing: -0.01em; }
.lotes-svg .l-area-s { fill: var(--salva); font-size: 14px; font-weight: 600; text-anchor: middle; font-stretch: 88%; }
.lotes-svg .l-tipo { fill: var(--salva); font-size: 14px; font-weight: 600; text-anchor: middle; font-stretch: 88%; font-variant-numeric: tabular-nums; }
.lotes-svg .l-esc-cheio { fill: var(--salva); }
.lotes-svg .l-esc-vazio { fill: none; stroke: var(--salva); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lotes-svg .l-esc-t { fill: var(--salva); font-size: 12px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.comercial { display: grid; gap: 28px 56px; margin-top: var(--s2); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--linha-clara); }
@media (min-width: 1000px) {
  .comercial { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .comercial-img { grid-column: 1; grid-row: 1; }
  .comercial-texto { grid-column: 2; }
}
.comercial-texto { display: grid; gap: 16px; align-content: start; justify-items: start; }
.comercial-texto > p:not(.etiqueta) { font-size: 16px; line-height: 1.6; color: var(--salva); max-width: 34em; }
.ficha-comercial { width: 100%; max-width: 30em; border-top: 1px solid var(--linha-clara); }
.ficha-comercial li { padding: 10px 0; border-bottom: 1px solid var(--linha-clara); font-size: 15.5px; font-weight: 600; color: var(--papel); font-variant-numeric: tabular-nums; }
.comercial-img { width: min(100%, 300px); display: grid; gap: 0; }
.comercial-img img { width: 100%; height: auto; aspect-ratio: 520 / 641; object-fit: cover; }
@media (max-width: 599px) {
  .comercial-img { width: 100%; }
  .comercial-img img { aspect-ratio: 16 / 9; max-height: 200px; object-position: 50% 62%; }
}
.comercial-img .legenda-faixa { padding: 8px 10px; font-size: 12.5px; background: rgba(250, 248, 243, 0.08); }

/* investir S10 · empresas */
.empresas { background: var(--papel-3); padding-block: var(--s1); }
.empresas-grelha { display: grid; gap: 20px 56px; }
.empresas-grelha > div:first-child { display: grid; gap: 14px; justify-items: start; }
.empresas .titulo-2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem); max-width: 16em; }
.empresas-texto { display: grid; gap: 12px; align-content: end; justify-items: start; }
@media (min-width: 960px) { .empresas-grelha { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; } }

/* ---------------------------------------------- entradas ao percorrer: só o desenho, a régua e a prancha */
.js [data-revela] { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js [data-revela].visto { opacity: 1; transform: none; }

/* ---------------------------------------------- melhorias de 04/11 (crítica com as skills de design) */
/* cabeçalho: «WhatsApp» no telemóvel, «Quero um lote» no computador (onde fica preso ao topo depois do herói) */
.topo-wa .so-largo { display: none; }
@media (min-width: 1000px) { .topo-wa .so-curto { display: none; } .topo-wa .so-largo { display: inline; } }
/* «Um projecto Proimóveis» também no telemóvel, por baixo do logótipo */
@media (max-width: 599px) {
  .placa { flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 9px 5px; }
  .assinatura { display: inline-flex; padding-left: 0; border-left: 0; font-size: 11px; gap: 5px; }
  .assinatura img { height: 13px; }
}
/* a barra do telemóvel numa só linha entre 360 e 389 px (a largura mais comum dos Android baratos) */
@media (max-width: 389px) {
  .barra { gap: 10px; }
  .barra-preco strong { font-size: 16px; white-space: nowrap; }
  .barra-preco > span { font-size: 12.5px; white-space: nowrap; }
  .barra .btn { padding: 0 14px; white-space: nowrap; gap: 0; }
  .barra .btn svg { display: none; }
}
/* na prancha, no telemóvel: o PDF passa a ligação de texto e «Quero este projecto» ocupa a largura toda */
@media (max-width: 599px) {
  .ficha-accoes [data-msg="M2"] { width: 100%; }
  .ficha-accoes .ficha-pdf {
    min-height: 44px; padding: 0; border: 0; background: none; box-shadow: none; justify-content: flex-start;
    color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: currentColor;
  }
}
/* construir no telemóvel: a faixa a seguir ao herói não repete o «7» nem o preço, que o herói já mostra */
@media (max-width: 759px) {
  .numeros > .so-largo { display: none; }
  .numeros > .so-largo + .so-largo + div { border-top: 0; }
}
/* investir no telemóvel: o preço a pronto manda; o das prestações por baixo, mais pequeno */
@media (max-width: 759px) { .titulo-preco .depois { font-size: 0.64em; line-height: 1.15; margin-top: 0.2em; } }
/* texto corrido a tinta cheia; o cinzento fica para microcopy e legendas */
.lead { color: var(--tinta); }
.caminhos td:first-child { color: var(--tinta); }
/* investir: o cartão do incluído, no computador, com as duas listas lado a lado e os títulos à mesma altura */
.cab-largo { display: none; }
@media (min-width: 1100px) { .cartao-incluido > summary { display: none; } .cab-largo { display: block; } }
/* depois de enviar o formulário */
.estado-envio { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--tinta); text-wrap: pretty; }
.escuro .estado-envio { color: var(--papel); }
.estado-envio a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
/* rodapé: sem palavra sozinha na última linha */
.rodape p { text-wrap: pretty; }

/* ---------------------------------------------- movimento reduzido: tudo visível, sem deslocações */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .heroi-texto, .folha-heroi, .ficha.entra, .visor[open] .visor-tela { animation: none; }
  .js [data-revela] { opacity: 1; transform: none; transition: none; }
  .js .regua .cresce { transform: none; transition: none; }
  .js .regua .surge { opacity: 1; transition: none; }
  .folhas-par, .barra, .topo.fixo, .p-seta, .p-botao::before, .faq summary::after, .cartao-incluido summary::after { transition: none !important; }
  .btn:active, .opcoes label:active > span { transform: none; }
}