/* =========================================================================
   OceanView 2 — sistema visual (versão 2, aprovada a 14/10/2026, com as
   mudanças da versão 2.1 de 15/10/2026). As regras estão no docs/DESIGN.md e
   o alvo é material/design-v2-1/referencia-v2-1.html.
   Uma só família (Archivo), fundo claro, cartões brancos, cantos arredondados
   (24 / 18 / 12 px), botões em pílula e nenhuma sombra.
   --luz só no botão do formulário e no sol do símbolo.
   ========================================================================= */

/* --- Cores ---------------------------------------------------------------- */
:root {
  --fundo: #F5F5F1;
  --cartao: #FFFFFF;
  --borda-cartao: #E3E6E1;
  --filete: #DCE0DB;
  --contorno: #C9CFCA;
  --atlantico: #14303A;
  --mare: #2E5560;
  --texto-2: #5F6C70;
  --texto-claro: #B7C5C4;
  --luz: #C98E45;
  --pedra: #E6E2D8;
  /* Logótipo (clientes, 19/10/2026: opção 2, «Azul oceano»): símbolo Vigia e
     palavra OCEANVIEW 2. Sobre fotografia fica branco; o sol é sempre --luz. */
  --logo: #0F2E4C;
  /* Fora da paleta: só para mensagens de erro sobre o bloco Atlântico
     (8,1:1 sobre #14303A). A cor nunca é o único sinal: há sempre texto. */
  --erro-escuro: #F6B9AE;
  --erro: #9A3B2E;
}

/* --- Tipo de letra ----------------------------------------------------------
   Archivo variável, alojado em /fonts/ (licença OFL), reduzido ao latino e aos
   acentos do português, com wght 400–800 e wdth 96–125. O caminho é relativo a
   este ficheiro, para o site funcionar tanto na raiz do domínio como num
   subcaminho (pré-visualização do GitHub Pages). */
@font-face {
  font-family: 'Archivo';
  src: url('../../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 96% 125%;
  font-style: normal;
  font-display: swap;
}
/* Tipo de recurso para redes lentas: o `size-adjust` põe o tipo do sistema à
   largura medida do Archivo 400 a 100%, para o texto não mudar de linha na
   troca. Medido no browser a 14/10/2026 com o ficheiro desta versão: 97,7%
   para o Helvetica Neue (98,1% para o Arial; a diferença não muda linhas). */
@font-face {
  font-family: 'Archivo recurso';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans');
  size-adjust: 97.7%;
}

/* --- Medidas -------------------------------------------------------------- */
:root {
  --fonte: 'Archivo', 'Archivo recurso', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --maxw: 1320px;
  --margem: clamp(16px, 4vw, 56px);
  --seccao: clamp(72px, 9vw, 128px);
  --seccao-larga: clamp(88px, 10vw, 150px);
  --raio-grande: 24px;
  --raio-cartao: 18px;
  --raio-imagem: 12px;
  --raio-campo: 14px;
}

/* --- Reposição ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  background: var(--fundo);
  color: var(--atlantico);
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
/* O «* { margin: 0 }» tira a centragem nativa dos diálogos modais. */
dialog { margin: auto; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--mare); }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mare);
  outline-offset: 3px;
}
.hero :focus-visible, .registo__bloco :focus-visible { outline-color: #FFFFFF; }

.salto-conteudo {
  position: absolute; left: 16px; top: 16px; z-index: 300;
  padding: 12px 20px; border-radius: 999px;
  background: var(--atlantico); color: #FFFFFF; font-size: 15px; font-weight: 600;
  transform: translateY(-200%);
}
.salto-conteudo:focus { transform: none; color: #FFFFFF; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Grelha e secções ----------------------------------------------------- */
.envolvente { max-width: calc(var(--maxw) + 2 * var(--margem)); margin-inline: auto; padding-inline: var(--margem); }
.seccao { padding-top: var(--seccao); }
.seccao--larga { padding-top: var(--seccao-larga); }

.etiqueta {
  font-size: 11px; font-weight: 600; line-height: 1.4;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--texto-2);
}
.titulo {
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.02; font-weight: 600; letter-spacing: -0.04em;
}
.titulo--grande { font-size: clamp(38px, 4.6vw, 68px); line-height: 1; }
.texto {
  max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--texto-2);
}
.nota { font-size: 13px; line-height: 1.55; color: var(--texto-2); }

/* Marcador de dados em falta: nenhum .todo pode ficar visível no site
   publicado (a pré-visualização é a exceção aprovada). */
.todo {
  border-bottom: 1.5px dashed currentColor;
  text-decoration: none;
}

/* --- Marca ---------------------------------------------------------------- */
.marca {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--logo); white-space: nowrap;
}
.marca:hover { color: var(--logo); }
.hero .marca, .hero .marca:hover { color: #FFFFFF; }
.marca svg { flex: none; width: 30px; height: 30px; }
.marca__nome {
  font-size: 15px; font-weight: 600; letter-spacing: .16em; font-stretch: 125%;
  line-height: 1;
}

/* --- Botões --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  border: 1px solid transparent; background: none;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, filter .2s;
}
.btn svg { flex: none; width: 16px; height: 16px; }
.btn--principal { background: var(--atlantico); color: #FFFFFF; }
.btn--principal:hover { background: var(--mare); color: #FFFFFF; }
.btn--claro { background: #FFFFFF; color: var(--atlantico); }
.btn--claro:hover { background: #EEF1EE; color: var(--atlantico); }
.btn--contorno { border-color: var(--contorno); color: var(--atlantico); font-weight: 500; }
.btn--contorno:hover { border-color: var(--atlantico); color: var(--atlantico); }
.btn--branco { background: var(--cartao); }
.btn--contorno-claro { border-color: rgba(255, 255, 255, .6); color: #FFFFFF; font-weight: 500; }
.btn--contorno-claro:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.btn--luz { min-height: 52px; padding: 0 28px; background: var(--luz); color: var(--atlantico); font-weight: 700; border: 0; }
.btn--luz:hover { filter: brightness(1.08); color: var(--atlantico); }
.btn--pequeno { min-height: 44px; padding: 0 20px; font-size: 14px; }
.btn:disabled { opacity: .6; cursor: progress; }
.grupo-botoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* Seta circular dos cartões */
.seta {
  flex: none; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--contorno);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s, color .2s, border-color .2s;
}
.seta svg { width: 16px; height: 16px; }

/* Legenda de imagem ilustrativa */
.legenda {
  position: absolute; left: 16px; bottom: 16px; right: auto; max-width: calc(100% - 32px);
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--atlantico);
  font-size: 12px; line-height: 1.3;
}
@media (min-width: 900px) { .legenda { left: 20px; bottom: 20px; padding: 9px 16px; } }
.figura { position: relative; }
.figura img, .figura picture { width: 100%; }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding: 12px; }
.hero__moldura {
  position: relative; overflow: hidden;
  min-height: 640px; border-radius: var(--raio-grande);
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--atlantico); color: #FFFFFF;
}
@media (min-width: 900px) { .hero__moldura { min-height: 820px; } }
.hero__imagem, .hero__imagem img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero__imagem img { object-fit: cover; object-position: 50% 45%; }
.hero__veu {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,48,58,.50) 0%, rgba(20,48,58,0) 24%, rgba(20,48,58,0) 40%, rgba(20,48,58,.85) 100%);
}
/* Telemóvel: o título e o subtítulo ocupam mais de metade do hero e caem
   sobre a fachada branca de dia; o véu escurece mais cedo para o texto branco
   ter contraste AA (diferença assumida em relação à referência v2.1). */
@media (max-width: 899px) {
  .hero__veu {
    background: linear-gradient(180deg, rgba(20,48,58,.50) 0%, rgba(20,48,58,.12) 16%, rgba(20,48,58,.58) 38%, rgba(20,48,58,.90) 100%);
  }
}

.cabecalho {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px clamp(20px, 3.4vw, 44px);
}
.navegacao { display: none; align-items: center; gap: 34px; font-size: 14px; }
.navegacao a, .idiomas a { color: #FFFFFF; }
.navegacao a:hover, .idiomas a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 5px; }
.cabecalho__accoes { display: flex; align-items: center; gap: 18px; }
.idiomas { display: none; font-size: 13px; letter-spacing: .08em; white-space: nowrap; }
.idiomas a[aria-current] { font-weight: 600; }
.idiomas a:not([aria-current]) { opacity: .75; }
.idiomas span { opacity: .6; margin-inline: 4px; }
@media (min-width: 900px) {
  .navegacao { display: flex; }
  .idiomas { display: block; }
}
/* Telemóvel: só a marca e o botão, sem quebra de linha e sem barra horizontal. */
@media (max-width: 899px) {
  .cabecalho { padding: 18px 16px; gap: 10px; }
  .cabecalho .btn { padding: 0 16px; font-size: 13px; }
}
@media (max-width: 439px) {
  .cabecalho { padding-inline: 14px; }
  .cabecalho .marca { gap: 8px; }
  .cabecalho .marca svg { width: 24px; height: 24px; }
  .cabecalho .marca__nome { font-size: 12px; letter-spacing: .1em; }
  .cabecalho .btn { padding: 0 13px; }
}

.hero__corpo {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 32px;
  padding: 0 clamp(20px, 3.4vw, 44px) clamp(24px, 3.4vw, 44px);
}
.hero__titulos { flex: 1 1 520px; min-width: 0; }
.hero__sobretitulo {
  margin-bottom: 22px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.hero__titulo {
  font-size: clamp(46px, 6.6vw, 98px); line-height: .9; font-weight: 800;
  letter-spacing: -0.045em; font-stretch: 96%; text-transform: uppercase;
  text-wrap: nowrap;
}
.hero__lado { flex: 0 1 360px; display: flex; flex-direction: column; gap: 22px; }
.hero__subtitulo {
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.22; font-weight: 500; letter-spacing: -0.015em;
}
.hero__nota { font-size: 12px; color: rgba(255, 255, 255, .82); }
@media (max-width: 899px) {
  .hero__lado { flex-basis: 100%; }
  .hero__corpo { gap: 22px; }
}

/* --- O projeto ------------------------------------------------------------ */
.projeto__grelha { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: 36px; }
@media (min-width: 900px) { .projeto__grelha { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.projeto__imagem img { aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: var(--raio-grande); }
.projeto__texto { display: flex; flex-direction: column; gap: 26px; }
.projeto__texto .texto { font-size: 18px; }

.numeros {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--filete);
}
.numeros__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 32px 8px 8px 0; }
.numeros__valor {
  display: block;
  font-size: clamp(34px, 10vw, 44px); font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.numeros__unidade { font-size: .45em; letter-spacing: 0; margin-left: 4px; }
.numeros__rotulo { display: block; margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--texto-2); }
/* No telemóvel: 2 × 2, sem filetes laterais. O tamanho dos números desce um
   pouco abaixo de 440 px para «56–253 m²» caber sem partir. */
@media (min-width: 900px) {
  .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .numeros__item { padding: 32px 28px 8px; border-left: 1px solid var(--filete); }
  .numeros__item:first-child { padding-left: 0; border-left: 0; }
  .numeros__valor { font-size: clamp(44px, 4.4vw, 64px); }
}

/* --- Imagem grande -------------------------------------------------------- */
.imagem-grande { padding-top: clamp(56px, 6vw, 88px); }
.imagem-grande img { aspect-ratio: 16 / 7.4; min-height: 300px; object-fit: cover; border-radius: var(--raio-grande); }

/* --- Cabeçalho de secção com botão ---------------------------------------- */
.seccao__topo {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 40px;
}
.seccao__titulos { display: flex; flex-direction: column; gap: 20px; }

/* --- Cartões -------------------------------------------------------------- */
.cartoes { display: grid; gap: 20px; }
.cartoes > li { display: flex; }
.cartoes > li > .cartao { flex: 1; }
/* Sem número de WhatsApp o terceiro cartão fica escondido: dois cartões a meias. */
@media (min-width: 640px) { .cartoes:has(> li[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 899px) { .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cartao {
  display: flex; flex-direction: column;
  background: var(--cartao); border: 1px solid var(--borda-cartao); border-radius: var(--raio-cartao);
  color: var(--atlantico);
}
.cartao:hover { color: var(--atlantico); border-color: var(--contorno); }
.cartao:hover .seta, .cartao:focus-visible .seta { background: var(--atlantico); border-color: var(--atlantico); color: #FFFFFF; }

.cartao--tipologia { gap: 18px; padding: 12px 12px 22px; }
.cartao--tipologia img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--raio-imagem); }
.cartao--tipologia .legenda { left: 10px; bottom: 10px; font-size: 11px; padding: 6px 12px; }
.cartao__base { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 10px; }
.cartao__textos { display: flex; flex-direction: column; gap: 6px; }
.cartao__numero { font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.cartao__nome { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.cartao__linha { font-size: 15px; line-height: 1.45; color: var(--texto-2); }
.cartao__valor { margin-top: 4px; font-size: 17px; line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums; }
.tipologias__nota { margin-top: 24px; max-width: 760px; font-size: 14px; }

.cartao--accao { gap: 18px; padding: 28px; }
.cartao--accao > svg { width: 28px; height: 28px; }
.cartao--accao .cartao__nome { font-size: 22px; letter-spacing: -0.02em; }
.cartao--accao .seta { margin-top: auto; }
.passos .etiqueta { margin-bottom: 32px; }

.cartao--perfil { gap: 14px; padding: 28px; }
.cartao--perfil .cartao__nome { font-size: 22px; letter-spacing: -0.02em; }
.para-quem { padding-top: clamp(56px, 6vw, 88px); }

/* --- Frações e valores (versão 2.1) ---------------------------------------
   Resumo sempre visível e lista recolhível dentro do mesmo cartão. Acima de
   700 px a lista é uma tabela; abaixo, cartões (o principal.js escreve as duas
   a partir do data/fracoes.json e o CSS mostra uma). */
.fracoes__cabecalho { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }
.valores {
  background: var(--cartao); border: 1px solid var(--borda-cartao); border-radius: var(--raio-grande);
  overflow: hidden;
}
.valores__topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px);
}
.valores__resumo { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: clamp(20px, 4vw, 56px); }
.valores__resumo dt { font-size: 12px; line-height: 1.4; color: var(--texto-2); }
.valores__resumo dd {
  margin-top: 4px; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 899px) { .valores__resumo { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.valores__divisa { transition: transform .2s; }
[aria-expanded='true'] > .valores__divisa { transform: rotate(180deg); }

.valores__lista { border-top: 1px solid var(--borda-cartao); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px clamp(18px, 2.6vw, 32px) 6px; }
.filtro {
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--contorno); background: var(--cartao); color: var(--atlantico);
  font-family: inherit; font-size: 14px; cursor: pointer;
}
.filtro:hover { border-color: var(--atlantico); }
.filtro[aria-pressed='true'] { border-color: var(--atlantico); background: var(--atlantico); color: #FFFFFF; font-weight: 600; }

.tabela-fracoes { overflow-x: auto; }
.tabela-fracoes table { width: 100%; min-width: 660px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela-fracoes th {
  padding: 14px 12px 12px; border-bottom: 1px solid var(--filete); text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2);
}
.tabela-fracoes td { padding: 12px; border-bottom: 1px solid #EEF0EC; font-size: 15px; line-height: 1.4; }
.tabela-fracoes :is(th, td):first-child { padding-left: clamp(18px, 2.6vw, 32px); }
.tabela-fracoes :is(th, td):last-child { padding-right: clamp(18px, 2.6vw, 32px); text-align: right; }
.tabela-fracoes td:last-child { padding-block: 10px; }
.tabela-fracoes .num { text-align: right; }
.tabela-fracoes .forte { font-weight: 600; }
.tabela-fracoes .fraco { color: var(--texto-2); }
.letra {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 999px; background: var(--fundo); font-weight: 600;
}
.btn--planta { min-height: 36px; padding: 0 14px; font-size: 13px; font-weight: 500; }

.cartoes-fracoes { display: none; }
@media (max-width: 699px) {
  .tabela-fracoes { display: none; }
  .cartoes-fracoes { display: grid; gap: 10px; padding: 14px clamp(18px, 2.6vw, 32px) 6px; }
}
.cartao-fracao {
  display: grid; gap: 14px; padding: 16px;
  border: 1px solid var(--borda-cartao); border-radius: var(--raio-imagem);
  font-variant-numeric: tabular-nums;
}
.cartao-fracao__topo { display: flex; align-items: center; gap: 12px; }
.cartao-fracao__nome { font-size: 17px; font-weight: 600; line-height: 1.3; }
.cartao-fracao__piso { font-size: 14px; color: var(--texto-2); }
.cartao-fracao__areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cartao-fracao__areas dt { font-size: 12px; color: var(--texto-2); }
.cartao-fracao__areas dd { font-size: 15px; white-space: nowrap; }
.cartao-fracao__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 12px; border-top: 1px solid #EEF0EC;
}
.cartao-fracao__valor { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.valores__nota { padding: 14px clamp(18px, 2.6vw, 32px) 20px; font-size: 12px; line-height: 1.6; }

/* --- Arquitetura ---------------------------------------------------------- */
.arquitetura { text-align: center; }
.arquitetura .etiqueta { margin-bottom: 22px; }
.arquitetura__titulo {
  margin-inline: auto; max-width: 900px;
  font-size: clamp(40px, 5.2vw, 76px); line-height: .98; letter-spacing: -0.045em;
}
.arquitetura .texto { margin: 26px auto 0; }
.arquitetura__esboco { width: 100%; max-width: 1040px; margin: clamp(32px, 4vw, 56px) auto 0; }
.arquitetura .btn { margin-top: 28px; }

/* --- Localização ---------------------------------------------------------- */
.metades { display: grid; gap: clamp(32px, 5vw, 80px); }
@media (min-width: 900px) { .metades { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }
.localizacao__texto { display: flex; flex-direction: column; gap: 24px; }
.localizacao__texto .texto { max-width: 520px; }
.distancias { margin-top: 8px; border-top: 1px solid var(--filete); }
.distancias li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--filete); font-size: 17px;
}
.distancias li span:last-child { color: var(--texto-2); text-align: right; }
.localizacao__nota { font-size: 12px; }

/* Fotografia editada da zona no lugar do bloco liso (versão 2.1). */
.mapa-foto {
  position: relative; overflow: hidden; min-height: 460px;
  border-radius: var(--raio-grande); background: var(--pedra);
  display: flex; align-items: flex-end;
}
@media (max-width: 899px) { .mapa-foto { min-height: 320px; } }
.mapa-foto picture, .mapa-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-foto img { object-fit: cover; }
.mapa-foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,48,58,0) 45%, rgba(20,48,58,.8) 100%);
}
.mapa-foto__conteudo {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 24px; color: #FFFFFF;
}
.mapa-foto__conteudo svg { flex: none; width: 24px; height: 24px; }
.mapa-foto__conteudo p { flex: 1 1 auto; font-size: 17px; font-weight: 600; }
.mapa-foto .todo { border-bottom-color: #FFFFFF; }

/* --- Viver aqui (versão 2.1) ------------------------------------------------
   Cartões-fotografia de 500 px, véu Atlântico em baixo. Só fotografias
   editadas pelo Lourenço; legenda com o sítio e o mês e ano. */
.viver__topo { margin-bottom: 36px; }
.viver__titulo { max-width: 760px; }
.viver { display: grid; gap: 20px; }
@media (min-width: 640px) and (max-width: 899px) { .viver { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .viver { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.viver__cartao {
  position: relative; height: 500px; overflow: hidden;
  border-radius: var(--raio-grande); background: var(--pedra);
}
.viver__cartao picture, .viver__cartao img { position: absolute; inset: 0; width: 100%; height: 100%; }
.viver__cartao img { object-fit: cover; }
.viver__cartao::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,48,58,0) 50%, rgba(20,48,58,.78) 100%);
}
.viver__texto { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; color: #FFFFFF; }
.viver__nome { font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; }
.viver__texto p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.viver__texto .todo { border-bottom-color: #FFFFFF; }

/* --- Barra fixa no telemóvel (versão 2.1) ------------------------------------ */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
  display: flex; gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--cartao); border-top: 1px solid var(--borda-cartao);
}
.barra-fixa .btn { flex: 1 1 0; min-width: 0; padding: 0 16px; }
.barra-fixa .btn--contorno { flex-grow: .6; }
@media (min-width: 900px) { .barra-fixa { display: none !important; } }

/* --- Registo de interesse ------------------------------------------------- */
.registo__bloco {
  display: grid; overflow: hidden;
  border-radius: var(--raio-grande); background: var(--atlantico); color: #F3F5F2;
}
@media (min-width: 900px) { .registo__bloco { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); } }
.registo__corpo { display: flex; flex-direction: column; gap: 22px; padding: clamp(28px, 5vw, 64px); }
.registo__corpo .etiqueta { color: var(--texto-claro); }
.registo__titulo {
  color: #FFFFFF; font-size: clamp(36px, 4.4vw, 64px); line-height: .98; letter-spacing: -0.045em;
}
.registo__texto { max-width: 460px; font-size: 16px; line-height: 1.6; color: var(--texto-claro); }
.registo__imagem { position: relative; min-height: 280px; }
.registo__imagem img, .registo__imagem picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.registo__imagem img { object-fit: cover; object-position: 62% 55%; }
@media (min-width: 900px) { .registo__imagem { min-height: 520px; } }

.formulario { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.campos { display: grid; gap: 14px; }
@media (min-width: 560px) { .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo--largo { grid-column: 1 / -1; }
.campo label, .escolha legend { font-size: 13px; color: var(--texto-claro); }
.obrigatorio { color: #FFFFFF; }
.campo input, .campo textarea {
  width: 100%; min-height: 50px; padding: 0 16px;
  border-radius: var(--raio-campo); border: 1px solid rgba(243, 245, 242, .2);
  background: rgba(243, 245, 242, .06); color: #FFFFFF; font-size: 16px;
}
.campo textarea { padding: 14px 16px; min-height: 110px; resize: vertical; line-height: 1.5; }
.campo input::placeholder, .campo textarea::placeholder { color: #8FA3A6; opacity: 1; }
.campo input:hover, .campo textarea:hover { border-color: rgba(243, 245, 242, .4); }
.campo input:focus, .campo textarea:focus { border-color: #FFFFFF; }
.campo[data-erro='true'] input { border-color: var(--erro-escuro); border-width: 2px; }
.campo__erro { font-size: 13px; color: var(--erro-escuro); }
.campo__contador { align-self: flex-end; font-size: 12px; color: var(--texto-claro); font-variant-numeric: tabular-nums; }
.campo__contador--perto { color: #FFFFFF; font-weight: 600; }
.campo__erro:empty { display: none; }

.escolha { border: 0; padding: 0; margin: 0; min-width: 0; }
.escolha legend { padding: 0; margin-bottom: 10px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao {
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(243, 245, 242, .3); background: transparent; color: #F3F5F2;
  font-family: inherit; font-size: 14px; cursor: pointer;
}
.opcao:hover { border-color: #FFFFFF; }
.opcao[aria-pressed='true'] { border-color: #FFFFFF; background: #FFFFFF; color: var(--atlantico); font-weight: 600; }

.consentimento { display: flex; align-items: flex-start; gap: 12px; }
.consentimento input {
  width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--luz);
}
.consentimento > div { font-size: 13px; line-height: 1.5; }
.consentimento label { color: var(--texto-claro); }
.consentimento a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulario__estado { font-size: 15px; line-height: 1.55; color: #FFFFFF; }
.formulario__estado:empty { display: none; }
.formulario__estado a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.formulario__estado--erro { color: var(--erro-escuro); }
.formulario__estado strong { font-weight: 700; }
.registo__corpo .nota { color: var(--texto-claro); }
.registo__corpo .nota a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

/* --- Rodapé --------------------------------------------------------------- */
.rodape { padding-block: clamp(72px, 8vw, 110px) 40px; }
/* No telemóvel a barra fixa tapa o fim da página: o rodapé ganha a altura dela. */
@media (max-width: 899px) { .rodape:has(~ .barra-fixa) { padding-bottom: 112px; } }
.rodape__topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding-bottom: 32px; border-bottom: 1px solid var(--filete);
}
.rodape__nav { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 14px; }
.rodape__colunas {
  display: grid; gap: 28px; padding-top: 28px;
  font-size: 13px; line-height: 1.6; color: var(--texto-2);
}
@media (min-width: 760px) { .rodape__colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rodape__colunas .etiqueta { margin-bottom: 6px; }
.rodape__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  margin-top: 36px; font-size: 13px; color: var(--texto-2);
}
.rodape__ligacoes { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rodape__ligacoes a, .rodape__ligacoes button {
  color: var(--texto-2); background: none; border: 0; padding: 0; cursor: pointer;
  font-size: inherit; font-family: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: transparent;
}
.rodape__ligacoes a:hover, .rodape__ligacoes button:hover { color: var(--atlantico); text-decoration-color: currentColor; }

/* --- Cookies -------------------------------------------------------------- */
.cookies {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 150;
  max-width: 760px; margin-inline: auto; padding: 20px 22px;
  background: var(--cartao); border: 1px solid var(--borda-cartao); border-radius: var(--raio-cartao);
  display: grid; gap: 16px; align-items: center;
}
@media (min-width: 760px) { .cookies { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; } }
.cookies p { font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.cookies a { color: var(--atlantico); text-decoration: underline; text-underline-offset: 3px; }
.cookies .grupo-botoes { gap: 8px; }

dialog.definicoes {
  border: 1px solid var(--borda-cartao); border-radius: var(--raio-grande); padding: 0;
  width: min(34rem, calc(100vw - 24px));
  background: var(--cartao); color: var(--atlantico);
}
dialog.definicoes::backdrop { background: rgba(20, 48, 58, .6); }
.definicoes__interior { padding: clamp(24px, 4vw, 40px); display: grid; gap: 22px; }
.definicoes h2 { font-size: 26px; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 8px; }
.definicoes__opcao {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  border-top: 1px solid var(--filete); padding-top: 18px;
}
.definicoes__opcao input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--atlantico); }
.definicoes__opcao label { font-size: 15px; font-weight: 600; }
.definicoes__opcao p { font-size: 14px; color: var(--texto-2); line-height: 1.5; margin-top: 4px; }
.definicoes__accoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* --- Escolha do WhatsApp (19/10/2026) ---------------------------------------
   Com dois agentes, os botões de WhatsApp abrem este diálogo (principal.js). */
dialog.escolha-whatsapp {
  border: 1px solid var(--borda-cartao); border-radius: var(--raio-grande); padding: 0;
  width: min(26rem, calc(100vw - 24px));
  background: var(--cartao); color: var(--atlantico);
}
dialog.escolha-whatsapp::backdrop { background: rgba(20, 48, 58, .6); }
.escolha-whatsapp__interior { display: grid; gap: 16px; padding: clamp(24px, 4vw, 32px); }
.escolha-whatsapp h2 { font-size: 26px; letter-spacing: -0.03em; line-height: 1.1; }
.escolha-whatsapp__lista { display: grid; gap: 10px; margin-top: 4px; }
.escolha-whatsapp__contacto {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 14px 14px 18px; border: 1px solid var(--borda-cartao); border-radius: var(--raio-cartao);
}
.escolha-whatsapp__contacto:hover { color: var(--atlantico); border-color: var(--contorno); }
.escolha-whatsapp__contacto:hover .seta, .escolha-whatsapp__contacto:focus-visible .seta {
  background: var(--atlantico); border-color: var(--atlantico); color: #FFFFFF;
}
.escolha-whatsapp__textos { display: flex; flex-direction: column; gap: 2px; }
.escolha-whatsapp__nome { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.escolha-whatsapp__numero { font-size: 14px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.escolha-whatsapp .btn { justify-self: end; }

/* --- Páginas de texto (política de privacidade) --------------------------- */
.cabecalho--pagina { max-width: calc(var(--maxw) + 2 * var(--margem)); margin-inline: auto; padding: 22px var(--margem); }
.cabecalho--pagina .idiomas { display: block; }
.cabecalho--pagina .idiomas a { color: var(--atlantico); }
@media (max-width: 899px) { .cabecalho--pagina .idiomas { display: none; } }
.texto-legal { max-width: 46rem; display: grid; gap: 20px; padding-top: clamp(40px, 6vw, 80px); }
.texto-legal h1 { font-size: clamp(38px, 4.6vw, 68px); line-height: 1; letter-spacing: -0.04em; margin-top: 4px; }
.texto-legal h2 { font-size: 24px; letter-spacing: -0.02em; line-height: 1.2; margin-top: 16px; }
.texto-legal p, .texto-legal li { color: var(--texto-2); }
.texto-legal ul { display: grid; gap: 10px; padding-left: 1.2rem; list-style: disc; }
.texto-legal a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }

/* --- Movimento ------------------------------------------------------------
   Entrada discreta das secções, só com prefers-reduced-motion: no-preference.
   O JavaScript só esconde o que ainda está abaixo do ecrã, por isso sem
   JavaScript (ou com ele parado) nada fica invisível. */
@media (prefers-reduced-motion: no-preference) {
  .a-revelar { opacity: 0; transform: translateY(16px); }
  .revelada { transition: opacity .5s ease, transform .5s ease; }
}

/* --- Página 404 (bilingue: o GitHub Pages só usa um 404.html) ------------- */
.erro404 { padding-top: clamp(32px, 6vw, 72px); }
.erro404__bloco {
  padding: clamp(28px, 5vw, 64px);
  background: var(--cartao); border: 1px solid var(--borda-cartao); border-radius: var(--raio-grande);
}
.erro404__codigo {
  font-size: clamp(72px, 14vw, 180px); font-weight: 800; font-stretch: 96%;
  line-height: .85; letter-spacing: -0.05em; color: var(--texto-2);
  margin-bottom: clamp(24px, 4vw, 48px);
}
.erro404__linguas { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .erro404__linguas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
  .erro404__lingua + .erro404__lingua { border-left: 1px solid var(--filete); padding-left: clamp(32px, 5vw, 80px); }
}
@media (max-width: 899px) {
  .erro404__lingua + .erro404__lingua { border-top: 1px solid var(--filete); padding-top: 40px; }
}
.erro404__lingua { display: flex; flex-direction: column; gap: 22px; }
.erro404 + .rodape { padding-top: 48px; }