/* Sfizia: colocar os ficheiros em assets/fonts/ (Sfizia-Regular.* e Sfizia-Bold.*) */
@font-face {
  font-family: 'Sfizia';
  src: url('../fonts/Sfizia-Regular.woff2') format('woff2'),
       url('../fonts/Sfizia-Regular.woff') format('woff'),
       url('../fonts/Sfizia-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sfizia';
  src: url('../fonts/Sfizia-Bold.woff2') format('woff2'),
       url('../fonts/Sfizia-Bold.woff') format('woff'),
       url('../fonts/Sfizia-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #faf9f6;
  --cream-2: #f5eee8;
  --beige: #e9ded0;
  --brown: #523216;
  --dark: #1e1e1e;
  --serif: 'Sfizia', Georgia, 'Times New Roman', serif;
  --sans: 'Lato', system-ui, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 6.9vw, 132px);
  --txt: clamp(15px, 1.04vw, 20px);
}

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: clamp(56px, 4.5vw, 86px); } /* espaço para o cabeçalho fixo compacto */

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--txt);
  line-height: 1.5;
  color: var(--brown);
  background: var(--cream);
}
img { max-width: 100%; height: auto; }

.titulo {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(26px, 2.08vw, 40px);
  line-height: 1.25;
  margin: 0 0 .9em;
}
.pequeno-titulo {
  font-family: var(--serif);
  text-transform: uppercase;
  font-size: clamp(16px, 1.45vw, 28px);
  margin: 0;
  text-align: center;
}

/* Botões em pílula */
.btn-pilula {
  display: inline-block;
  padding: .7em 1.6em;
  border: 0;
  border-radius: 40px;
  background: var(--cream-2);
  color: var(--brown);
  font: 700 clamp(12px, .78vw, 15px)/1 var(--sans);
  text-transform: uppercase;
  text-decoration: none;
}
.btn-pilula:hover { background: #fff; color: var(--brown); }

/* Cabeçalho */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding-top: clamp(8px, 2.5vw, 48px); transition: padding-top .25s; }
/* degradê da maquete (Figma 1:23 e 1:22): duas camadas em Multiply por cima da página, abaixo do cabeçalho */
.degrade-topo { position: fixed; top: 0; left: 0; right: 0; z-index: 19; pointer-events: none; mix-blend-mode: multiply; transition: height .25s, opacity .25s; }
.degrade-azul { height: clamp(110px, 12.6vw, 242px); opacity: .71; background: linear-gradient(#00548c, rgba(111,102,93,0)); }
.degrade-castanho { height: clamp(150px, 19.4vw, 373px); opacity: .51; background: linear-gradient(rgba(83,51,22,.64), rgba(83,51,22,0)); }
.site-header .navbar-brand img { width: clamp(170px, 25vw, 480px); height: auto; display: block; transition: width .25s; }
/* depois de sair do topo (classe posta por main.js): cabeçalho compacto */
.rolada .site-header { padding-top: 4px; }
.rolada .degrade-azul { height: 80px; }
.rolada .degrade-castanho { opacity: 0; }
.rolada .site-header .navbar-brand img { width: clamp(150px, 13vw, 250px); }
.site-header .nav-link {
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(12px, .78vw, 15px);
  padding: .5rem .55rem;
}
.site-header .nav-link:hover,
.site-header .nav-link[aria-current] { color: var(--beige); }
.site-header .navbar-toggler { border-color: rgba(255,255,255,.6); }
@media (max-width: 991.98px) {
  .site-header .navbar-collapse { background: rgba(30,30,30,.94); margin-top: .75rem; padding: .75rem 1rem; }
}

/* Hero */
.hero { position: relative; background: var(--dark); color: #fff; }
/* 16:9, mas nunca mais alto do que o ecrã (para a seta ficar sempre à vista); 100svh = altura visível em telemóvel */
.hero-img { display: block; width: 100%; height: clamp(480px, 56.25vw, 1080px); object-fit: cover; }
@supports (height: 100svh) { .hero-img { height: clamp(480px, min(56.25vw, 100svh), 1080px); } }
.hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-txt {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center; padding: 0 16px;
}
.hero h1 {
  font: 700 clamp(22px, 2.6vw, 50px)/1.2 var(--serif);
  margin: 0 0 .5em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0,0,0,.4);
}
.hero-txt p {
  font: 400 clamp(12px, 1.25vw, 24px)/1.3 var(--serif);
  letter-spacing: .04em; margin: 0; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
/* seta no fundo do topo: convida a fazer scroll (liga a #sobre) */
.hero-seta {
  position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: clamp(14px, 3vh, 40px);
  display: flex; padding: 8px; color: #fff; line-height: 0;
  filter: drop-shadow(0 1px 8px rgba(0,0,0,.45));
}
.hero-seta:hover { color: var(--beige); }
.hero-seta svg { width: clamp(24px, 2vw, 38px); height: auto; }
.btn-registo {
  position: fixed; right: 0; bottom: 6vh; z-index: 30;
  box-shadow: 0 2px 14px rgba(0,0,0,.28);
  padding: .95em 2em 1em 1.7em;
  border-radius: 40px 0 0 40px;
  background: var(--cream-2); color: var(--brown);
  font: 700 clamp(11px, .78vw, 15px)/1 var(--sans);
  text-transform: uppercase; text-decoration: none;
}
.btn-registo:hover { background: #fff; color: var(--brown); }
.btn-registo { transition: opacity .2s, visibility .2s, background .15s; }
/* classe posta por main.js quando o rodapé chega à zona do botão: evita tapar o rodapé */
.rodape-visivel .btn-registo { opacity: 0; visibility: hidden; pointer-events: none; }

/* Botão play do bloco da piscina (abre o vídeo numa janela) */
.play {
  position: absolute; top: 66%; left: 50%; transform: translate(-50%, -50%);
  width: clamp(48px, 5.2vw, 100px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(250,249,246,.75); pointer-events: none;
}
.play::after {
  content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: .85em 0 .85em 1.4em; border-color: transparent transparent transparent var(--dark);
  font-size: clamp(10px, 1.1vw, 21px);
}

/* Bem-vindo */
.bemvindo {
  padding: clamp(32px, 9.8vw, 188px) var(--gutter) clamp(40px, 6vw, 115px);
  min-height: 56.46vw; /* proporção do fundo (1920×1084), como na maquete */
  background: var(--cream) url('../img/welcome-background.png') center top / cover no-repeat;
}
@media (max-width: 991.98px) {
  .bemvindo { min-height: 0; padding-top: clamp(32px, 6vw, 60px); background-size: 160% auto; background-position: left top; }
}
.bemvindo img { display: block; width: 100%; aspect-ratio: 850 / 670; object-fit: cover; }
.bemvindo p { margin: 0 0 1.5em; }
/* ícones por baixo da foto e do texto (medidas da maquete v3: ícones 55 a 76 px de altura, legendas 18 px, a 1920 px de largura) */
.bv-icones {
  --g: clamp(16px, 2.9vw, 56px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 24px var(--g);
  margin: clamp(32px, 3.6vw, 70px) 0 0; padding: 0; list-style: none;
}
.bv-icones li { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, .73vw, 14px); text-align: center; }
.bv-icones .ic { display: flex; align-items: flex-end; height: clamp(46px, 4vw, 77px); } /* 76 px = o ícone mais alto (Jardins e Terraços) */
.bv-icones img { width: auto; max-width: none; height: 100%; aspect-ratio: auto; } /* max-width: none: senão o ícone mais largo do que a legenda (Piscina) é espremido */
/* alturas da maquete em relação aos 76 px, alinhadas pela base; ordem: apartamentos, tipologias, área, varandas, piscina, jardins, multiuso, estacionamento, arrecadações */
.espaco .bv-icones li:nth-child(1) img, .espaco .bv-icones li:nth-child(8) img { height: 92.6%; }
.espaco .bv-icones li:nth-child(2) img, .espaco .bv-icones li:nth-child(3) img { height: 95.2%; }
.espaco .bv-icones li:nth-child(4) img { height: 87.1%; }
.espaco .bv-icones li:nth-child(5) img { height: 77.7%; }
.espaco .bv-icones li:nth-child(7) img { height: 85.2%; }
.espaco .bv-icones li:nth-child(9) img { height: 71.4%; }
.bv-icones li > span:last-child { font: 700 clamp(12px, .94vw, 18px)/1.25 var(--sans); }
/* segunda fila (por baixo dos cartões): ícones e legendas em #978473; 74 px = o ícone mais alto (Jardim-Escola); ordem: natureza, golfe, clubhouse, padel, health club, café, jardim-escola */
.bv-icones-b .ic { height: clamp(44px, 3.85vw, 74px); }
.bv-icones-b li > span:last-child { color: #978473; }
.bv-icones-b li:nth-child(1) img { height: 96.8%; }
.bv-icones-b li:nth-child(2) img { height: 96.1%; }
.bv-icones-b li:nth-child(3) img { height: 87%; }
.bv-icones-b li:nth-child(4) img { height: 97.6%; }
.bv-icones-b li:nth-child(5) img { height: 75.9%; }
.bv-icones-b li:nth-child(6) img { height: 62.9%; }
.cartoes-sec .bv-icones { margin-top: clamp(40px, 6.46vw, 124px); padding: 0 var(--gutter); } /* maquete v3: ícones ~139 px abaixo do centro da seta, a 1920 */
@media (max-width: 767.98px) {
  .bv-icones li { flex: 0 0 calc((100% - 2 * var(--g)) / 3); } /* 3 por linha */
}

/* Bloco de vídeo: metade branca, metade creme (cores da maquete v3: #FFFFFF e #FAF9F6) */
/* a foto começa 94 px abaixo do topo do bloco e a mudança branco/creme fica 440 px abaixo (55,4%), como na maquete v3, a 1920 */
.video-bloco { padding: 0 var(--gutter); background: linear-gradient(#fff 55.4%, var(--cream) 55.4%); padding-top: clamp(32px, 4.9vw, 94px); }
.video-bloco figure { position: relative; margin: 0 auto; max-width: 1400px; }
.video-bloco img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.video-bloco .play { top: 50%; padding: 0; border: 0; pointer-events: auto; cursor: pointer; transition: background .15s, transform .15s; }
.video-bloco .play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.06); }
.video-bloco .play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* janela do vídeo completo (a classe "video-aberto" é posta no <body> por main.js: escurece só o fundo desta janela) */
.video-aberto .modal-backdrop { --bs-backdrop-opacity: .8; }
.modal-content.modal-video { position: relative; background: #000; border-radius: 0; }
.modal-video video { display: block; width: 100%; max-height: 85vh; background: #000; }
.modal-video .btn-close { position: absolute; top: .5rem; right: .5rem; z-index: 2; }
.perto { padding: clamp(36px, 5vw, 96px) var(--gutter) clamp(36px, 5vw, 96px); text-align: center; }
.perto .titulo { margin: 0; font-size: clamp(24px, 2.4vw, 46px); }
/* título a seguir às plantas, antes do golfe: fundo branco; na maquete v3 tem 50 px e as duas linhas distam 73 px (a 1920) */
.perto-coracao { background: #fff; padding: clamp(40px, 4.74vw, 91px) var(--gutter) clamp(36px, 4.95vw, 95px); }
.plantas-bloco + .perto-coracao { padding-top: clamp(24px, 2.66vw, 51px); } /* com plantas, o espaço de baixo da tabela já conta (150 px da tabela ao título, a 1920) */
.perto-coracao .titulo { font-size: clamp(26px, 2.6vw, 50px); line-height: 1.46; }

/* Cartões (carrossel horizontal) */
/* depois do golfe: 141 px (a 1920) entre a foto do golfe e o cartão mais alto, como na maquete v3 */
.cartoes-sec { background: #fff; padding: clamp(48px, 7.34vw, 141px) 0 clamp(40px, 6vw, 115px); position: relative; }
.cartoes {
  display: flex; align-items: flex-end; gap: clamp(16px, 1.6vw, 32px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
  padding: 0 var(--gutter);
  scrollbar-width: none;
}
.cartoes::-webkit-scrollbar { display: none; }
.cartao { position: relative; flex: 0 0 clamp(230px, 26vw, 500px); aspect-ratio: 5 / 7; scroll-snap-align: start; }
.cartao:nth-child(even) { margin-bottom: clamp(24px, 3.3vw, 64px); }
.cartao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cartao p {
  position: absolute; inset: 0; margin: 0; padding: 8% 6%;
  display: flex; flex-direction: column; justify-content: space-around; align-items: center; text-align: center;
  color: #fff; font: 700 clamp(13px, 1.15vw, 22px)/1.2 var(--serif); text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
/* espaçamento entre letras medido na imagem de referência (~0,2em); o padding-left iguala o espaço que o
   browser acrescenta depois da última letra, para o texto ficar centrado */
.cartao p span { letter-spacing: .2em; padding-left: .2em; }
.btn-seta {
  display: block; width: clamp(28px, 1.6vw, 32px); aspect-ratio: 1; margin: 18px var(--gutter) 0 auto;
  border: 1px solid currentColor; border-radius: 50%; background: transparent; color: var(--brown);
  font: 400 14px/1 var(--sans); cursor: pointer;
}
.cartoes-sec .btn-seta { margin-top: 26px; }

/* Localização */
/* duas áreas separadas por 10 px de branco: "a pé" (mapa aéreo com os pontos numerados) e "de carro" (mapa da região) */
.localizacao { background: var(--beige); }
.localizacao + .localizacao { border-top: 10px solid #fff; }
.localizacao-grid { display: grid; }
.localizacao-txt { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 66px) var(--gutter); }
.localizacao-txt ul, .localizacao-txt ol { list-style: none; margin: 0 0 1.1em; padding: 0; font-size: clamp(14px, 1.04vw, 20px); line-height: 1.8; }
.localizacao-txt ol { margin: 0; line-height: 1.3; }
.localizacao-txt ol li { display: flex; align-items: center; padding: .45em 0; } /* 1.3 + 0.9 = 2,2 de espaço por item; se o texto passar a 2 linhas, ficam juntas */
.localizacao-txt ul li::before { content: '•'; margin-right: .5em; }
.localizacao-txt strong { display: block; font-size: clamp(14px, 1.04vw, 20px); }
.localizacao-txt ol + strong { line-height: 1.3; padding: .45em 0; }
/* número do ponto no mapa: castanho (3 a 7) ou claro (1 e 2, as fases do projeto) */
.localizacao-txt .n {
  display: grid; place-items: center; flex: 0 0 auto; width: clamp(16px, 1.15vw, 22px); height: clamp(16px, 1.15vw, 22px);
  margin-right: clamp(8px, .63vw, 12px); border-radius: 50%; background: var(--brown); color: var(--cream-2);
  font: 700 clamp(8px, .6vw, 11.5px)/1 var(--serif);
  padding-top: .2em; /* os algarismos da Sfizia ficam ~0,1em acima do centro da linha; isto desce-os para o meio do círculo */
}
.localizacao-txt .n-claro { background: #f7f4f0; color: var(--brown); }
.localizacao-mapa img { display: block; width: 100%; height: auto; }
/* na maquete o mapa da região é mais baixo (750 de 824 px): corta-se ao centro */
.localizacao-carro .localizacao-mapa img { aspect-ratio: 1320 / 750; object-fit: cover; }
@media (min-width: 992px) {
  .localizacao-grid { grid-template-columns: 31.25% 1fr; align-items: stretch; }
  .localizacao:not(.localizacao-carro) .localizacao-grid { grid-template-columns: 33.333% 1fr; }
  .localizacao-txt { padding-right: 0; }
}

/* Galeria */
.espaco { padding: clamp(32px, 3.8vw, 72px) 0 clamp(40px, 5.68vw, 109px); }
.espaco .bv-icones { margin-top: clamp(32px, 3.96vw, 76px); padding: 0 var(--gutter); } /* maquete v3: icones ~91 px abaixo do centro da seta, a 1920 */
.espaco .titulo { padding: 0 var(--gutter); margin-bottom: clamp(24px, 3.33vw, 64px); } /* maquete v3: ~71 px entre o título e a 1.ª foto, a 1920 */
.espaco-fotos {
  display: flex; align-items: flex-start; gap: clamp(16px, 3vw, 58px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); padding: 0 var(--gutter); scrollbar-width: none;
}
.espaco-fotos::-webkit-scrollbar { display: none; }
.espaco-fotos figure { margin: 0; flex: 0 0 clamp(280px, 50vw, 960px); aspect-ratio: 4 / 3; scroll-snap-align: start; }
.espaco-fotos figure:nth-child(even) { margin-top: clamp(24px, 4.2vw, 80px); flex-basis: clamp(280px, 56vw, 1080px); aspect-ratio: 3 / 2; }
.espaco-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* arrastar com o rato nos carrosséis (ver main.js) */
.cartoes, .espaco-fotos { cursor: grab; }
.cartoes img, .espaco-fotos img { -webkit-user-drag: none; user-select: none; }
.cartoes.a-arrastar, .espaco-fotos.a-arrastar { cursor: grabbing; scroll-snap-type: none; user-select: none; }
/* a deslizar até ao cartão mais próximo depois de largar (main.js): sem snap para não "saltar" */
.cartoes.a-assentar, .espaco-fotos.a-assentar { scroll-snap-type: none; }

/* Golfe */
.golfe { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
/* a imagem é 60% mais alta que a secção: a folga (30% em cima e em baixo) é o curso do parallax (ver main.js) */
.golfe > img { position: absolute; left: 0; top: -30%; width: 100%; height: 160%; object-fit: cover; object-position: 75% center; will-change: transform; }
.golfe::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.25) 55%, rgba(0,0,0,0)); }
@media (max-width: 991.98px) { .golfe::after { background: rgba(0,0,0,.58); } }
/* marca de água "LA RÉSERVE" no fundo do texto, por cima da foto e do degradê */
.golfe-txt { position: relative; z-index: 2; background: url('../img/lareserve-layer.png') left top / auto 100% no-repeat; max-width: clamp(820px, 57.6vw, 1106px); padding: clamp(40px, 8.33vw, 160px) var(--gutter) clamp(40px, 5.4vw, 104px) clamp(16px, 12.7vw, 244px); font-size: var(--txt); } /* mesmo tamanho do texto do "Bem-vindo" */
.golfe .titulo { color: #fff; }
.golfe p { margin: 0 0 1.5em; }

/* Apartamentos */
.escuro { background: var(--cream); }
/* a seguir ao título do vídeo; fundo branco e espaços da maquete v3 (111 px em cima e 99 px em baixo, a 1920) */
.terraco { padding: clamp(36px, 5.78vw, 111px) var(--gutter) clamp(32px, 5.16vw, 99px); background: #fff; }
.terraco img { display: block; width: 100%; aspect-ratio: 960 / 650; object-fit: cover; }
.terraco-txt { color: var(--brown); font-size: var(--txt); } /* mesmo tamanho do texto do "Bem-vindo" (maquete: 30 px de linha a linha a 1920) */
.terraco-txt .btn-pilula { margin-top: .6em; }
.sala { padding: clamp(24px, 2.6vw, 50px) var(--gutter) 0; background: var(--cream); }
.sala img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; } /* foto da piscina, 1920 × 960 */
.logo-centro { display: block; width: clamp(200px, 18vw, 350px); height: auto; margin: clamp(32px, 3.6vw, 70px) auto; }
/* logótipo e plantas, a seguir à galeria: fundo branco; o logótipo fica a 91 px do topo (maquete v3, a 1920) */
.plantas-bloco { background: #fff; padding-top: clamp(40px, 4.74vw, 91px); }
.plantas-bloco .logo-centro { margin: 0 auto clamp(24px, 3.23vw, 62px); } /* o 1.º piso fica a 83 px do logótipo, como na maquete */

/* Tabela de plantas */
.plantas { padding: 0 var(--gutter) clamp(32px, 3.4vw, 64px); color: var(--brown); }
.piso { border-bottom: 1px solid rgba(82,50,22,.35); }
.piso:first-of-type { border-top: 1px solid rgba(82,50,22,.35); }
.piso summary {
  display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer;
  padding: clamp(10px, 1vw, 20px) clamp(8px, 1vw, 16px);
  font: 400 clamp(18px, 1.46vw, 28px)/1.2 var(--serif); text-transform: uppercase;
}
.piso summary::-webkit-details-marker { display: none; }
.piso summary::after { content: ''; width: .45em; height: .45em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.piso[open] summary::after { transform: rotate(-135deg); }
.tabela-plantas { margin: 0; min-width: 780px; --bs-table-bg: transparent; color: var(--brown); font-size: clamp(13px, .94vw, 18px); }
.tabela-plantas th { font: 400 clamp(11px, .72vw, 14px)/1.2 var(--sans); text-transform: uppercase; padding: .6em clamp(8px, 1vw, 16px); border-bottom: 1px solid rgba(82,50,22,.5); }
.tabela-plantas tbody td { background: var(--cream-2); font-weight: 700; padding: .55em clamp(8px, 1vw, 16px); border: 0; }
.tabela-plantas a { color: #6d6258; font-weight: 400; text-transform: uppercase; text-decoration: none; }
.estado { display: inline-block; margin-left: .5em; padding: .05em .6em; border: 1px solid currentColor; border-radius: 1em; font: 400 .72em/1.4 var(--sans); text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; }
.fracao-vendida td { opacity: .6; }
.plantas-nota { margin: .9rem clamp(8px, 1vw, 16px) 0; font-size: clamp(11px, .78vw, 14px); opacity: .85; }
/* Kronos Homes (#PUREDESIGN), a seguir às frações */
.kronos { padding: clamp(40px, 6.8vw, 130px) var(--gutter) clamp(48px, 7vw, 135px); text-align: center; color: var(--brown); }
.kronos img { display: block; width: clamp(200px, 36.7vw, 704px); height: auto; margin: 0 auto clamp(28px, 5.2vw, 100px); }
.kronos .titulo { margin: 0 0 .7em; }
.kronos p { max-width: 1200px; margin: 0 auto 1.5em; }
.kronos p:last-child { margin-bottom: 0; }

/* Chamada, contacto e rodapé sobre a foto das flores */
.fundo-flores { background: url('../img/contacto.jpg') center / cover no-repeat; }
.chamada { padding: clamp(40px, 7.3vw, 140px) var(--gutter) 0; text-align: center; color: var(--cream-2); }
.chamada .pequeno-titulo { margin-bottom: .3em; }
.chamada .titulo { margin: 0; font-size: clamp(24px, 2.4vw, 46px); }
.contacto { padding: clamp(28px, 5.7vw, 110px) var(--gutter) clamp(28px, 6vw, 116px); }
/* marca de água "La Réserve" (group-footer.png, 585x800, já em castanho a ~10 %) à direita do cartão; só em ecrãs largos */
.contacto-cartao { background: url('../img/group-footer.png') right top / auto 100% no-repeat, rgba(250,249,246,.9); padding: clamp(24px, 4vw, 76px) clamp(20px, 3.65vw, 70px); }
@media (max-width: 991.98px) { .contacto-cartao { background: rgba(250,249,246,.9); } }
.contacto form { max-width: 580px; }
.contacto .form-titulo { max-width: 580px; margin: 0 0 .75em; font-size: clamp(24px, 2.24vw, 43px); }
.contacto .intro { font-size: clamp(13px, .94vw, 18px); margin: 0 0 1.7em; }
.campo {
  display: block; width: 100%; margin-bottom: 1em; padding: .7em .3em;
  border: 0; border-bottom: 1px solid var(--brown); background: transparent; border-radius: 0;
  font: 400 clamp(16px, 1.25vw, 24px)/1.3 var(--sans); color: var(--brown);
}
.campo::placeholder { color: var(--brown); opacity: .85; }
.campo:focus { outline: 2px solid var(--brown); outline-offset: 2px; }
.consentimento { display: flex; gap: clamp(12px, 1.15vw, 22px); align-items: flex-start; margin: 2.2em 0 3em; font-size: clamp(11px, .78vw, 15px); line-height: 1.5; }
.consentimento input { flex: 0 0 auto; width: 1.8em; height: 1.8em; margin-top: 0; accent-color: var(--brown); }
.btn-enviar { border: 0; background: var(--brown); color: var(--cream); cursor: pointer; }
.btn-enviar:hover { background: #3d2510; color: var(--cream); }
.btn-enviar:disabled { opacity: .55; cursor: not-allowed; }
.contacto .btn-enviar { color: var(--cream-2); font-size: clamp(14px, 1.15vw, 22px); padding: .7em 2.7em; }

.site-footer { background: linear-gradient(rgba(33,16,4,.9), rgba(33,16,4,.9)), url('../img/contacto.jpg') center bottom / cover no-repeat; color: var(--cream); padding: clamp(28px, 3.4vw, 66px) var(--gutter); }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; gap: 28px; align-items: start; }
.footer-info img { display: block; width: clamp(200px, 17.7vw, 339px); height: auto; margin-bottom: 1.4em; }
.footer-info p { margin: 0 0 .6em; font-size: clamp(14px, .94vw, 18px); }
.footer-nav { display: flex; gap: clamp(24px, 2.6vw, 50px); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; font-size: clamp(14px, .94vw, 18px); line-height: 1.9; }
.footer-social { display: flex; align-items: center; gap: 6px; }
.footer-social a { display: block; padding: 7px; opacity: .95; }
.footer-social a:hover, .footer-social a:focus-visible { opacity: .65; text-decoration: none; }
.footer-social img { display: block; height: 22px; width: auto; }
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px;
  margin-top: clamp(24px, 3vw, 58px); padding-top: 16px; border-top: 1px solid rgba(250,249,246,.2);
  font-size: clamp(12px, .83vw, 16px);
}
.footer-legal p { margin: 0; opacity: .85; }
.footer-credito { margin: 14px 0 0; text-align: center; font-size: clamp(10px, .68vw, 13px); opacity: .7; }
.footer-legal a { opacity: .85; }

/* modal da Política de Privacidade */
.modal-content { background: var(--cream); color: var(--brown); border: 0; border-radius: 0; }
.modal-header, .modal-footer { border-color: rgba(82,50,22,.2); }
.modal-title { font: 400 clamp(20px, 1.6vw, 28px)/1.2 var(--serif); text-transform: uppercase; }
.modal-body { font-size: clamp(14px, .92vw, 17px); }
/* subtítulos da política: <p role="heading"> em vez de <h3>–<h5>, para não encher a página inicial de títulos (SEO); o aspeto é o mesmo */
.modal-body .sub3 { font: 400 1.15em/1.3 var(--serif); text-transform: uppercase; margin: 1.8em 0 .5em; }
.modal-body .sub4 { font: 700 1em/1.4 var(--sans); margin: 1.3em 0 .4em; }
.modal-body .sub5 { font: 700 1em/1.4 var(--sans); font-style: italic; margin: 1.1em 0 .3em; }
.modal-body ul { padding-left: 1.2em; }
.modal-body a { color: var(--brown); }
@media (min-width: 992px) {
  .footer-grid { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
  .footer-nav { justify-content: flex-end; text-align: right; }
  .footer-info { grid-row: 1 / 3; }
  .footer-social { justify-self: end; align-self: end; margin-top: clamp(24px, 3vw, 58px); }
}

/* mensagens do formulário de contacto */
.form-aviso { margin: 0 0 1.2em; padding: .8em 1em; border-left: 3px solid var(--brown); background: rgba(82, 50, 22, .08); font-size: clamp(13px, .9vw, 17px); }
.form-aviso p { margin: 0; }
.form-aviso p + p { margin-top: .35em; }
.form-aviso-ok { border-left-color: #2e7d32; background: rgba(46, 125, 50, .13); color: #1d5a22; font-size: clamp(15px, 1.1vw, 20px); }
.form-aviso-erro { border-left-color: #8a1c1c; background: rgba(138, 28, 28, .08); }

/* ===== Animações discretas =====
   Só correm sem "reduzir movimento". As classes .anima (no <html>) e .rv (nos blocos) são postas por main.js; sem JS
   ou com "reduzir movimento" a página fica como estava. Só se animam opacidade e transform (leves em telemóvel).
   Para afinar a intensidade: durações (1s), distância (22px) e atraso entre elementos (110ms, em main.js). */
:root { --suave: cubic-bezier(.22, .61, .36, 1); }
@keyframes subir { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes respirar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes anel { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.65); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* topo: o loop aparece por cima da imagem (main.js põe .a-tocar quando começa a tocar) e o texto entra depois */
  .hero-video { opacity: 0; transition: opacity 1.6s ease; }
  .hero-video.a-tocar { opacity: 1; }
  .hero-txt h1 { animation: subir 1.3s var(--suave) .35s both; }
  .hero-txt p { animation: subir 1.3s var(--suave) .8s both; }
  /* a seta entra depois do texto e "respira" devagar */
  .hero-seta { animation: subir 1.3s var(--suave) 1.4s both; }
  .hero-seta svg { animation: respirar 2.4s ease-in-out 2.7s infinite; }

  /* revelação ao fazer scroll */
  .anima .rv {
    opacity: 0; transform: translate3d(0, 22px, 0);
    transition: opacity 1s var(--suave) var(--atraso, 0s), transform 1.2s var(--suave) var(--atraso, 0s);
  }
  .anima .rv.vis { opacity: 1; transform: none; }

  /* menu: linha fina que cresce da esquerda */
  .site-header .nav-item:not(.idiomas) .nav-link { position: relative; }
  .site-header .nav-item:not(.idiomas) .nav-link::after {
    content: ''; position: absolute; left: .55rem; right: .55rem; bottom: .2rem; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--suave);
  }
  .site-header .nav-item:not(.idiomas) .nav-link:hover::after,
  .site-header .nav-item:not(.idiomas) .nav-link:focus-visible::after { transform: scaleX(1); }

  /* botões mais lentos a mudar */
  .btn-pilula { transition: background .5s ease, color .5s ease; }
  .btn-registo { transition: opacity .2s, visibility .2s, background .5s ease; }

  /* formulário: a linha do campo desenha-se ao escrever; o aviso de sucesso entra com fade */
  .campo {
    background-image: linear-gradient(var(--brown), var(--brown)); background-repeat: no-repeat;
    background-position: left bottom; background-size: 0 2px; transition: background-size .7s var(--suave);
  }
  .campo:focus { background-size: 100% 2px; }
  .campo:focus:not(:focus-visible) { outline: none; }
  .form-aviso { animation: subir .9s var(--suave) both; }

  /* botão play da piscina: anel suave de vez em quando */
  .video-bloco button.play::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(250, 249, 246, .85);
    pointer-events: none; animation: anel 4.2s ease-out 1.5s infinite;
  }
}

/* galerias: zoom lento da foto e o texto do cartão sobe um pouco (só com rato; no toque não há "hover") */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .cartao, .espaco-fotos figure { overflow: hidden; }
  .cartao img, .espaco-fotos img { transition: transform 1.4s var(--suave); }
  .cartao:hover img, .espaco-fotos figure:hover img { transform: scale(1.04); }
  .cartao p { transition: transform 1.2s var(--suave); }
  .cartao:hover p { transform: translate3d(0, -6px, 0); }
}

/* ao imprimir ou guardar em PDF mostra-se tudo, sem esperar pelo scroll */
@media print { .anima .rv { opacity: 1 !important; transform: none !important; } }