/* 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; }
.hero-img { display: block; width: 100%; height: clamp(480px, 56.25vw, 1080px); 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);
}
.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; }

/* Ícone de vídeo (decorativo até existirem os ficheiros de vídeo) */
.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; }

/* Bloco de vídeo: metade escura, metade creme */
.video-bloco { padding: 0 var(--gutter); background: linear-gradient(var(--dark) 50%, var(--cream) 50%); padding-top: clamp(24px, 2.6vw, 50px); }
.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%; }
.perto { padding: clamp(36px, 5vw, 96px) var(--gutter) clamp(36px, 5vw, 96px); text-align: center; }
.perto .pequeno-titulo { margin-bottom: .4em; }
.perto .titulo { margin: 0; font-size: clamp(24px, 2.4vw, 46px); }

/* Cartões (carrossel horizontal) */
.cartoes-sec { background: var(--dark); padding: clamp(32px, 3.4vw, 64px) 0 clamp(32px, 3.6vw, 70px); 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);
}
.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; color: var(--cream); }

/* Localização */
.localizacao { background: var(--beige); }
.localizacao-grid { display: grid; }
.localizacao-txt { padding: clamp(28px, 3.4vw, 66px) var(--gutter); }
.localizacao-txt ul { list-style: none; margin: 0 0 1.1em; padding: 0; font-size: clamp(14px, .83vw, 16px); line-height: 2.25; }
.localizacao-txt li::before { content: '•'; margin-right: .5em; }
.localizacao-txt strong { display: block; font-size: clamp(14px, .83vw, 16px); }
.localizacao-mapa img { display: block; width: 100%; height: auto; }
@media (min-width: 992px) {
  .localizacao-grid { grid-template-columns: 31.25% 1fr; align-items: stretch; }
  .localizacao-txt { padding-right: 0; padding-left: clamp(24px, 3.4vw, 66px); }
}

/* Galeria */
.espaco { padding: clamp(32px, 3.8vw, 72px) 0 clamp(28px, 3.4vw, 64px); }
.espaco .titulo { padding: 0 var(--gutter); }
.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(2) { 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; }

/* 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: 820px; padding: clamp(40px, 5.4vw, 104px) var(--gutter) clamp(40px, 5.4vw, 104px) clamp(16px, 12.7vw, 244px); font-size: clamp(14px, .92vw, 18px); }
.golfe .titulo { color: #fff; }
.golfe p { margin: 0 0 1.5em; }

/* Apartamentos */
.escuro { background: var(--cream); }
.terraco { padding: clamp(32px, 3.4vw, 64px) var(--gutter) clamp(24px, 2.6vw, 50px); background: var(--cream); }
.terraco img { display: block; width: 100%; aspect-ratio: 960 / 650; object-fit: cover; }
.terraco-txt { color: var(--brown); font-size: clamp(14px, .92vw, 18px); }
.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: 1650 / 1020; object-fit: cover; }
.logo-centro { display: block; width: clamp(200px, 18vw, 350px); height: auto; margin: clamp(32px, 3.6vw, 70px) auto; }

/* 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); }
.piso-vazio { margin: 0; padding: 0 clamp(8px, 1vw, 16px) 16px; font-size: clamp(13px, .85vw, 16px); }
.tabela-plantas { margin: 0; min-width: 640px; --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; }
.chamada { padding: clamp(24px, 3vw, 58px) var(--gutter) clamp(24px, 3vw, 58px); text-align: center; color: var(--brown); }
.chamada .pequeno-titulo { margin-bottom: .3em; }
.chamada .titulo { margin: 0; font-size: clamp(24px, 2.4vw, 46px); }

/* Contacto + rodapé sobre a foto das flores */
.fundo-flores { background: url('../img/contacto.jpg') center / cover no-repeat; }
.contacto { padding: clamp(28px, 4.6vw, 88px) var(--gutter); }
.contacto-cartao { background: rgba(250,249,246,.9); padding: clamp(20px, 2.8vw, 54px); }
.contacto form { max-width: 580px; }
.contacto .intro { font-size: clamp(13px, .83vw, 16px); margin: 0 0 1.4em; }
.campo {
  display: block; width: 100%; margin-bottom: .75em; padding: .55em .3em;
  border: 0; border-bottom: 1px solid var(--brown); background: transparent; border-radius: 0;
  font: 400 clamp(16px, 1.04vw, 20px)/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: 14px; align-items: flex-start; margin: 1.6em 0 1.4em; font-size: clamp(11px, .72vw, 14px); line-height: 1.5; }
.consentimento input { flex: 0 0 auto; width: 1.4em; height: 1.4em; margin-top: .15em; 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; }

.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: 6px 6px; opacity: .95; }
.footer-social a:hover, .footer-social a:focus-visible { opacity: .65; text-decoration: none; }
.footer-social img { display: block; height: 29px; 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-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); }
.modal-body h3 { font: 400 1.15em/1.3 var(--serif); text-transform: uppercase; margin: 1.8em 0 .5em; }
.modal-body h4 { font: 700 1em/1.4 var(--sans); margin: 1.3em 0 .4em; }
.modal-body h5 { 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); }
}
