/* Oryza Guest House & Suites — sistema visual
   Paleta tirada da própria casa: cal branca das paredes, azul dos azulejos
   e das portas, barro dos telhados (reservado ao botão de reserva). */

:root {
  --paper: #f4f2ed;
  --paper-soft: #faf9f6;
  --stone: #e6e1d8;
  --line: rgba(31, 36, 40, 0.14);
  --ink: #1f2428;
  --muted: rgba(31, 36, 40, 0.66);
  --white: #ffffff;
  --blue: #2c4a6e;
  --blue-dark: #16313f;
  --rodape: #0e0b08; /* quase-preto: as fotos do palco esbatem para ele sem virar azul */
  --clay: #9f5937;
  --clay-dark: #87462a;
  --gold: #ead2a0;

  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 4px;
  --shadow-soft: 0 24px 70px rgba(22, 28, 24, 0.14);
  --shadow-tight: 0 14px 34px rgba(22, 28, 24, 0.12);

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 32px;
  --space-5: 56px;
  --space-6: 88px;
  --space-7: 120px;

  --max-width: 1220px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  scrollbar-gutter: stable; /* o visor fecha o scroll: sem isto a página saltava */
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
}

img, picture, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul[class], dl[class] {
  list-style: none;
  padding: 0;
}

figure {
  margin: 0;
}

address {
  font-style: normal;
}

button {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1, h2, h3, h4 {
  font-weight: inherit;
  line-height: 1.05;
  letter-spacing: 0;
  text-wrap: balance; /* sem palavras sozinhas na última linha */
}

p, dd, li {
  text-wrap: pretty;
}

/* «pequeno-almoço» não se parte no hífen */
.nw {
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0;
  left: -999px;
  z-index: 10000;
  background: var(--ink);
  color: var(--paper-soft);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

/* viewport-fit=cover: no telemóvel deitado, a página vai até trás do
   entalhe; as margens crescem desse lado (em pé os env() são 0). */
.wrap {
  width: min(calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)), var(--max-width));
  margin-inline: auto;
}

section[id],
.quarto,
.lugar {
  scroll-margin-top: var(--space-4);
}

/* ---------- Tipografia partilhada ---------- */

/* Etiqueta de secção: um pequeno azulejo antes do texto. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: currentColor;
}

.section-title {
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 500;
  line-height: 1.02;
  color: var(--ink);
}

.section-lead {
  max-width: 44ch;
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1.35;
  color: var(--muted);
}

.editorial {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.42;
  color: var(--ink);
}

.editorial p + p {
  margin-top: var(--space-3);
}

.text-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.text-link:hover {
  color: var(--clay);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 100%;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--clay);
  color: var(--white);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.btn--primary:hover {
  background: var(--clay-dark);
}

.btn--outline {
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--white);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.13);
}

/* ============================================================
   Header e hero — composição protegida. Não alterar a estrutura.
   ============================================================ */
.site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  padding-block: var(--space-4);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  width: min(calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)), var(--max-width));
  margin-inline: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  width: 100%;
}

.main-nav__left,
.main-nav__right {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  /* encolhe em ecrãs médios para os dez links e o PT / EN não tocarem no wordmark */
  gap: clamp(18px, 2.5vw, 40px);
}

/* O wordmark está ao centro, em absoluto: cada lista espalha os seus cinco
   links pela sua metade e guarda-lhe a mesma folga dos dois lados. */
.main-nav .main-nav__left {
  justify-content: space-between;
  padding-right: 100px;
}

.main-nav .main-nav__right {
  justify-content: space-between;
  padding-left: 100px;
}

.main-nav a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.34);
  transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--white);
}

.main-nav a[aria-current="page"] {
  border-bottom: 1px solid currentColor;
}

/* Língua: um <details> fechado, «PT ▾», que abre por baixo a lista das quatro
   línguas, cada uma no seu nome. Ocupa o espaço de uma sigla, para a metade
   direita do menu não ficar mais apertada do que a esquerda. O link da língua
   da página leva aria-current (aplicar.py troca-o nas versões traduzidas); o
   main.js fecha-o ao clicar fora e, no telemóvel, deixa-o aberto para os nomes
   entrarem na roda como os outros links. */
.main-nav__linguas {
  position: relative;
}

.linguas__atual {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.34);
}

.linguas__atual::-webkit-details-marker {
  display: none;
}

.linguas__atual::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

/* ul.: o reset «ul[class]» tira o padding e ganha a uma classe só */
ul.linguas__lista {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  list-style: none;
  white-space: nowrap;
  background: rgba(18, 28, 28, 0.92);
  border-radius: var(--radius);
  transform: translateX(-50%);
}

.linguas__lista a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Reservar: o único link com caixa, para se distinguir dos outros. */
.main-nav .main-nav__reservar {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.main-nav .main-nav__reservar:hover {
  border-color: var(--clay);
  background: var(--clay);
  color: var(--white);
}

.wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-align: center;
  transform: translate(-50%, -50%);
}

.wordmark__name {
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 25px;
  font-style: italic;
  font-weight: 600;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.38);
}

.wordmark__sub {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.34);
  text-transform: uppercase;
}

/* Entre o ecrã largo e o telemóvel, com dez links e o PT / EN, aperta-se;
   abaixo de 960px o wordmark deixa de estar em absoluto ao centro e passa a
   viver entre as duas listas (display: contents no nav, para as listas serem
   filhas do cabeçalho): assim nada se sobrepõe. Fica depois do .wordmark
   para lhe ganhar. */
@media (max-width: 1100px) {
  .main-nav__left,
  .main-nav__right {
    gap: 12px;
  }

  .main-nav a {
    font-size: 13px;
  }

  .main-nav .main-nav__reservar {
    padding: 7px 11px;
  }

  .linguas__atual {
    font-size: 11px;
  }
}

@media (min-width: 761px) and (max-width: 960px) {
  .main-nav {
    display: contents;
  }

  .main-nav__left,
  .main-nav__right {
    flex: 0 1 auto;
    gap: 8px;
  }

  .main-nav .main-nav__left {
    order: 1;
    padding-right: 0;
  }

  .wordmark {
    position: static;
    flex: 1 1 auto;
    order: 2;
    margin-inline: 12px;
    transform: none;
  }

  .main-nav .main-nav__right {
    order: 3;
    padding-left: 0;
  }

  .main-nav a {
    font-size: 12px;
  }

  .main-nav .main-nav__reservar {
    padding: 6px 9px;
  }
}

@media (min-width: 761px) and (max-width: 820px) {
  .wordmark__sub {
    display: none;
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 24px;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  text-align: center;
}

.hero__content {
  position: relative;
  width: min(calc(100% - 40px), 660px);
  color: var(--white);
}

.hero__eyebrow {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
}

.hero__title {
  margin-top: var(--space-2);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 58px;
  font-weight: 500;
  line-height: 1.02;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.hero__subtitle {
  margin-top: var(--space-3);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1.35;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Reserva rápida no hero: mais larga do que o texto, campos só com a linha
   de baixo e o texto dentro, botão em pílula. Entra campo a campo depois do
   título. */
.reserva-rapida {
  --largura: min(calc(100vw - 40px), 880px);
  display: grid;
  grid-template-columns: 1.5fr 1.2fr auto;
  align-items: end;
  gap: 28px;
  width: var(--largura);
  margin: var(--space-5) calc((100% - var(--largura)) / 2) 0;
  text-align: left;
}

.reserva-rapida__campo,
.reserva-rapida__ir {
  animation: reserva-entra 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(1.1s + var(--i, 0) * 0.12s) both;
}

@keyframes reserva-entra {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reserva-rapida__campo,
  .reserva-rapida__ir {
    animation: none;
  }
}

.reserva-rapida__campo {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}

/* a seta ▾ de cada campo */
.reserva-rapida__campo::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  border: 4px solid transparent;
  border-top: 5px solid currentColor;
  border-bottom: 0;
  pointer-events: none;
}

.reserva-rapida__campo:hover,
.reserva-rapida__campo:focus-within,
.reserva-rapida__campo.tem-valor {
  border-bottom-color: #fff;
  color: #fff;
}

.reserva-rapida__campo:focus-within {
  border-bottom-color: var(--gold);
}

.reserva-rapida__abrir {
  width: 100%;
  height: 100%;
  padding: 0 20px 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.reserva-rapida__abrir:focus-visible {
  outline: none; /* a linha do campo fica dourada (:focus-within) */
}

.reserva-rapida__ir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 26px;
  border: 1px solid var(--clay);
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.reserva-rapida__ir span {
  transition: transform 0.25s ease;
}

.reserva-rapida__ir:hover {
  border-color: var(--clay-dark);
  background: var(--clay-dark);
}

.reserva-rapida__ir:hover span {
  transform: translateX(4px);
}

/* Painéis (calendário, adultos e crianças): vidro escuro por baixo do campo. */
.reserva-rapida__datas,
.reserva-rapida__hosp {
  z-index: 3; /* por cima dos outros campos, que também animam */
}

.reserva-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(290px, calc(100vw - 40px));
  padding: 14px 14px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  /* opaco: com transparência o texto de baixo via-se através do painel
     (o backdrop-filter não desfoca dentro do palco, que é uma camada própria) */
  background: #1a1510;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  color: #fff;
  text-shadow: none;
  cursor: default;
  animation: calendario-abre 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reserva-pop[hidden] {
  display: none;
}

@keyframes calendario-abre {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.calendario__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.calendario__mes {
  font-family: var(--font-serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1;
}

.calendario__mes::first-letter {
  text-transform: uppercase;
}

.calendario__seta,
.hospedes__linha button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.calendario__seta:hover:not(:disabled),
.hospedes__linha button:hover:not(:disabled) {
  border-color: var(--gold);
}

.calendario__seta:disabled,
.hospedes__linha button:disabled {
  opacity: 0.25;
  cursor: default;
}

.calendario__grelha {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}

.calendario__semana {
  padding-bottom: 2px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
}

.calendario__dia {
  position: relative;
  height: 32px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* o círculo do dia é um ::before, para a faixa do intervalo ficar contínua */
.calendario__dia::before {
  content: "";
  position: absolute;
  inset: 0 3px;
  z-index: -1;
  border-radius: 50%;
  transition: background-color 0.15s ease;
}

.calendario__dia:hover:not(:disabled)::before {
  background: rgba(255, 255, 255, 0.12);
}

.calendario__dia:disabled {
  color: rgba(255, 255, 255, 0.22);
  cursor: default;
}

.calendario__dia.is-hoje::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--gold);
}

.calendario__dia.is-entre {
  background: rgba(159, 89, 55, 0.3);
}

.calendario__dia.is-inicio,
.calendario__dia.is-fim {
  font-weight: 600;
}

.calendario__dia.is-inicio::before,
.calendario__dia.is-fim::before,
.calendario__dia.is-inicio:hover::before,
.calendario__dia.is-fim:hover::before {
  background: var(--clay);
}

.calendario__grelha {
  isolation: isolate; /* o z-index: -1 dos círculos fica dentro da grelha */
}

.calendario__pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

/* da largura do campo, como a linha por cima */
.hospedes {
  width: 100%;
  min-width: 240px;
  padding: 6px 18px;
}

/* Com um painel aberto, o "Conhecer a casa" sai de baixo dele. */
.hero__content:has(.reserva-pop:not([hidden])) .capa__seta {
  opacity: 0;
  visibility: hidden;
}

.capa__seta {
  transition: opacity 0.2s ease, visibility 0.2s;
}

.hospedes__linha {
  display: grid;
  grid-template-columns: 1fr auto 26px auto;
  align-items: center;
  gap: 8px;
  padding-block: 10px;
  font-size: 15px;
}

.hospedes__linha + .hospedes__linha {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hospedes__linha output {
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.calendario__limpar {
  border: 0;
  background: none;
  color: var(--gold);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.reserva-pop :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

@media (max-width: 760px) {
  .reserva-rapida {
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
  }

  /* as datas ocupam a linha toda: o texto "30 set. – 1 out." é comprido */
  .reserva-rapida__datas {
    grid-column: 1 / -1;
  }

  .reserva-rapida__ir {
    justify-content: center;
  }
}

/* SplitText: o texto entra palavra a palavra, como uma legenda a ser
   escrita (o título do hero, as comodidades, as legendas do palco). O main.js
   parte o texto e dá .is-in quando chega ao ecrã; as legendas do palco
   escrevem-se de novo cada vez que o passo fica ativo. Sem JS, ou com
   movimento reduzido, o texto aparece normalmente. */
.split .split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
}

.split.is-in .split-word,
.is-ativo:not(.hero) .split .split-word {
  opacity: 1;
  transform: none;
  transition: opacity var(--split-dur, 0.7s) ease, transform var(--split-dur, 0.7s) cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * var(--split-passo, 55ms));
}

.hero__title {
  --split-dur: 1.1s;
  --split-passo: 90ms;
}

/* BlurText (react-bits): os títulos dos passos entram de cima, desfocados,
   palavra a palavra, na primeira vez que o passo fica ativo (main.js). */
.blur-in .split-word {
  display: inline-block;
  opacity: 0;
}

.foi-ativo .blur-in .split-word {
  animation: blur-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 90ms) both;
}

@keyframes blur-in {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-0.6em);
  }
  50% {
    opacity: 0.5;
    filter: blur(5px);
    transform: translateY(0.08em);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* No telemóvel sem o desfoque: um filter por palavra, a correr mesmo na
   mudança de secção, pesava no scroll. Fica a entrada de cima, a aparecer. */
@media (max-width: 760px) {
  .foi-ativo .blur-in .split-word {
    animation-name: blur-in-leve;
  }
}

@keyframes blur-in-leve {
  0% {
    opacity: 0;
    transform: translateY(-0.6em);
  }
  100% {
    opacity: 1; /* explícito: sem isto acabava na opacidade 0 da palavra */
    transform: none;
  }
}

/* CountUp: a largura dos algarismos não dança enquanto conta */
[data-conta] {
  font-variant-numeric: tabular-nums;
}

/* GlareHover: um brilho fino atravessa a fotografia em diagonal ao passar
   o rato. Só em dispositivos com hover. */
@media (hover: hover) {
  .viver__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.28) 70%, rgba(255, 255, 255, 0) 80%) no-repeat;
    background-size: 250% 250%;
    background-position: -100% -100%;
    transition: background-position 0.65s ease;
  }

  .viver__photo:hover::after {
    background-position: 100% 100%;
  }
}

/* ============================================================
   A partir daqui: tudo o que vem depois do hero.
   ============================================================ */

.reveal {
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Fotografias: zoom lento em hover, sem sombra, sem cantos pronunciados. */
.photo {
  overflow: hidden;
  background: var(--stone);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
  .photo:hover img {
    transform: scale(1.035);
  }
}

/* ---------- A Casa ---------- */
.casa__text {
  max-width: 620px;
}

.casa__text .editorial {
  margin-top: var(--space-4);
}

.casa__facts {
  display: grid;
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.casa__facts > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.casa__facts dt {
  white-space: nowrap;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.casa__facts dd {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- História (página inicial: só uma amostra) ----------
   No palco da página inicial: texto à direita, o homem e os bois à esquerda. */
.historia__texto {
  max-width: 560px;
}

@media (min-width: 761px) {
  .historia__texto {
    margin-left: auto;
  }
}

.historia__texto .text-link {
  margin-top: var(--space-4);
}

/* Página da história em tons de arquivo: sépia escuro, luz de vela no topo.
   Os tokens mudam só dentro do main; cabeçalho e rodapé mantêm os seus. */
.pagina-antiga main {
  --paper: #17120d;
  --paper-soft: #1e1812;
  --stone: #261e16;
  --ink: #ece2cc;
  --muted: rgba(236, 226, 204, 0.64);
  --line: rgba(236, 226, 204, 0.14);
  --blue: var(--gold);
  background:
    radial-gradient(ellipse 70% 520px at 50% 0, rgba(201, 146, 84, 0.2), transparent 70%),
    var(--paper);
  color: var(--ink);
}

.pagina-antiga main img {
  filter: sepia(0.3) contrast(1.05) brightness(0.92);
}

.pagina-antiga .palco__fundo img {
  filter: sepia(0.3);
}

.pagina-antiga .reservar__panel {
  border-color: var(--line);
}

/* ---------- Ficar aqui ---------- */
.viver {
  background: var(--paper);
  padding-block: var(--space-7);
}

.viver__head {
  max-width: 640px;
  margin-bottom: var(--space-5);
}

.viver__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--space-4);
}

.viver__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--stone);
}

.viver__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
  .viver__item:hover .viver__photo img {
    transform: scale(1.035);
  }
}

.viver__item h3 {
  margin-top: var(--space-3);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.1;
}

.viver__item p {
  max-width: 40ch;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Na página inicial os cartões dos quartos são links para o quarto. */
.viver__link {
  display: block;
}

.viver__link h3 {
  transition: color 0.2s ease;
}

.viver__link:hover h3 {
  color: var(--clay);
}

.viver__mais {
  margin-top: var(--space-5);
}

/* ---------- Onde estamos (página inicial, no palco) ---------- */
.onde__texto,
.quartos-intro,
.galeria__head {
  max-width: 600px;
}

.onde__lista {
  margin-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.onde__lista li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.onde__lista span:last-child {
  color: var(--blue);
  font-weight: 600;
  white-space: nowrap;
}

.onde__nota {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 12px;
}

.onde__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}

/* ---------- Capa: o primeiro passo dos palcos ---------- */
.capa__head {
  position: relative;
  z-index: 1;
  padding-block: var(--space-7);
}

.capa__head .eyebrow,
.capa__head .section-title {
  color: var(--white);
}

.capa__head .section-title {
  max-width: 14ch;
  font-size: clamp(46px, 6.4vw, 88px);
  line-height: 0.98;
}

.capa__head .section-lead {
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.88);
}

.capa__seta {
  display: inline-block;
  margin-top: var(--space-5);
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Palco: a página lê-se sempre sobre uma foto ----------
   (Início, História, Quinta, Quartos, Coimbra.) Um fundo preso ao ecrã com
   uma foto por passo (.palco__passo), pela mesma ordem, sempre nítidas. O
   main.js faz de cada foto uma cena (foto + véu) que sobe agarrada ao topo
   do seu passo, com a borda esbatida, e tapa a anterior.
   clip-path: a foto presa (sticky, com margem negativa) desceria para lá do
   fim do palco e taparia a secção seguinte; o recorte segura-a sem estragar
   o sticky (overflow: hidden estragava). */
.palco {
  position: relative;
  clip-path: inset(0);
  background: #15110d;
  color: #fff;
  --ink: #fff;
  --muted: rgba(255, 255, 255, 0.88);
  --line: rgba(255, 255, 255, 0.24);
  --blue: var(--gold);
}

/* O Reservar é o último passo de cada palco: sem caixa creme, sobre a foto. */
.palco .reservar {
  padding: 0;
  background: none;
}

.palco .reservar__panel {
  padding-inline: 0;
  border: 0;
  background: none;
}

/* O fim do palco desvanece para o rodapé. O esbatido é do rodapé e não do
   palco: dentro do palco (clip-path, fotos em camada própria) a foto chegava
   a ficar por cima dele e via-se uma linha no fim. */
main:has(.palco) + .site-footer::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(100% - 1px); /* 1px dentro do rodapé: sem fresta de subpíxel */
  left: 0;
  z-index: 1;
  height: 26vh;
  background: linear-gradient(180deg, transparent, var(--rodape) 85%);
  pointer-events: none;
}

/* lvh e não svh: no telemóvel, com a barra do browser recolhida, o ecrã
   fica mais alto do que o svh e via-se um buraco escuro por baixo da foto.
   O lvh é a altura maior e não muda com a barra (nada salta). */
.palco__fundo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  overflow: hidden;
}

.palco__fundo > img,
.palco__fundo > picture,
.palco__cena,
.palco__cena > * {
  position: absolute;
  inset: 0;
}

/* Sem JS: só a primeira foto. */
.palco__fundo:not(.is-vivo) > :not(:first-child) {
  display: none;
}

.palco__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.palco__fundo > img:first-child,
.palco__cena:first-child > img {
  object-position: center 42%;
}

/* A cena sobe com o topo do seu passo: transparente na linha do topo e
   inteira 25vh abaixo, para a borda ser um esbatido e não um corte. A cena
   começa 25vh acima do ecrã (é aí que está o esbatido) e o main.js desce-a
   com o passo, subindo a foto e o véu o mesmo; a máscara nunca muda, por
   isso nada se repinta durante o scroll. */
.palco__cena {
  top: -25vh;
  background: #15110d;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25vh);
  mask-image: linear-gradient(180deg, transparent 0, #000 25vh);
}

.palco__fundo .palco__cena > * {
  top: 25vh;
  height: calc(100% - 25vh); /* a altura do ecrã (a cena tem mais 25vh) */
}

/* Camadas próprias só para as cenas à vista (o main.js dá .is-viva, são
   duas de cada vez): uma camada de ecrã inteiro por foto, em todas, pesava
   no telemóvel. */
.palco__cena.is-viva,
.palco__cena.is-viva > * {
  will-change: transform;
}

.palco__cena:first-child {
  -webkit-mask-image: none;
  mask-image: none;
}

/* (Foto e véu mudam a cada frame do scroll: camada própria e sem transição;
   uma transição recomeçada a cada frame atrasa a foto e dá solavancos.) */

.palco__fundo img.is-sepia {
  filter: sepia(0.3);
}

/* Fotos pequenas ou documentos: inteiros, sem corte nem ampliação, sobre o
   escuro, afastados da legenda (à esquerda). */
.palco__fundo img.is-inteira {
  padding: 12vh 6vw 16vh;
  object-fit: contain;
  object-position: 68% center;
  /* sem o zoom: o main.js só a mantém parada no ecrã */
}

/* Véus: um por cena, conforme o passo (data-veu). */
.palco__veu--texto,
.palco__fundo:not(.is-vivo)::after {
  background: linear-gradient(90deg, rgba(18, 14, 10, 0.72) 0%, rgba(18, 14, 10, 0.6) 48%, rgba(18, 14, 10, 0.22) 72%, rgba(18, 14, 10, 0) 100%);
}

.palco__fundo:not(.is-vivo)::after {
  content: "";
  position: absolute;
  inset: 0;
}

.palco__veu--direita {
  background: linear-gradient(270deg, rgba(18, 14, 10, 0.72) 0%, rgba(18, 14, 10, 0.6) 48%, rgba(18, 14, 10, 0.22) 72%, rgba(18, 14, 10, 0) 100%);
}

.palco__veu--foto {
  background: linear-gradient(0deg, rgba(18, 14, 10, 0.72) 0%, rgba(18, 14, 10, 0.32) 30%, rgba(18, 14, 10, 0) 55%);
}

.palco__veu--baixo {
  background: linear-gradient(0deg, rgba(18, 14, 10, 0.8) 0%, rgba(18, 14, 10, 0.66) 50%, rgba(18, 14, 10, 0.22) 78%, rgba(18, 14, 10, 0) 100%);
}

/* O do hero, igual ao de sempre. */
.palco__veu--centro {
  background:
    linear-gradient(180deg, rgba(15, 13, 11, 0.36) 0%, rgba(15, 13, 11, 0.3) 35%, rgba(15, 13, 11, 0.52) 100%),
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(15, 13, 11, 0.16), rgba(15, 13, 11, 0.5) 100%);
}

@media (max-width: 760px) {
  .palco__veu--texto,
  .palco__veu--direita,
  .palco__veu--baixo,
  .palco__fundo:not(.is-vivo)::after {
    background: rgba(18, 14, 10, 0.56);
  }
}

.palco__passos {
  position: relative;
  padding: 0 0 var(--space-6);
  list-style: none;
}

.palco__capa,
.palco__passo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
}

/* véus mais leves (pedido do cliente: "mais luz"), por isso sombra um pouco mais forte */
.palco__passo {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 16px rgba(0, 0, 0, 0.45);
}

/* A opacidade segue o scroll (main.js): em camada, para o texto com sombra
   não se repintar a cada frame. */
.palco.is-vivo .palco__passo {
  will-change: opacity;
}

.palco__passos .palco__passo,
.palco__passo > .wrap {
  padding-block: var(--space-6);
}

.palco__passos .palco__passo {
  align-items: flex-start;
  max-width: 720px;
}

/* Com JS, cada passo é um painel: o texto (.palco__fixo, criado pelo main.js)
   fica preso ao ecrã enquanto a foto do passo está no fundo, e o passo tem
   mais altura do que o ecrã (--demora) para esse tempo de leitura. Um texto
   mais alto que o ecrã corre até ao fim antes de prender (--fixo-topo). */
.palco.is-vivo .palco__passo {
  display: block;
  min-height: 0;
  padding: 0;
}

/* A folga é um espaçador e não padding: o sticky só se move dentro da caixa
   de conteúdo do pai, e o padding fica de fora. */
.palco.is-vivo .palco__passo::after {
  content: "";
  display: block;
  /* curta: enquanto dura, nada mexe no ecrã e o scroll parecia travar */
  height: var(--demora, 12vh);
}

.palco.is-vivo .palco__capa {
  --demora: 0px;
  overflow: visible; /* o hero cortava: com overflow o sticky não prende */
}

.palco.is-vivo .palco__foto {
  --demora: 20vh;
}

.palco__fixo {
  position: sticky;
  top: var(--fixo-topo, 0px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: var(--space-6);
}

.palco__passos .palco__fixo {
  align-items: flex-start;
}

.hero > .palco__fixo {
  align-items: center;
}

.palco__foto > .palco__fixo {
  justify-content: flex-end;
  padding-bottom: 0;
}

.palco.is-vivo .palco__legenda {
  position: static;
}

/* Legenda com link (os quartos na página inicial). */
.palco__passo .palco__legenda:not(:last-child) {
  margin-bottom: var(--space-2);
}

.palco__foto .text-link {
  margin-bottom: var(--space-6);
}

/* Passo só de foto: a legenda fica presa em baixo do ecrã enquanto a foto
   está no fundo, e só se vê com o passo ativo. */
.palco__passos .palco__foto {
  justify-content: flex-end;
  min-height: 80vh;
  min-height: 80svh;
  padding-block: 0;
}

/* (.palco__passo > para ganhar à regra dos parágrafos do passo) */
.palco__passo .palco__legenda {
  position: sticky;
  bottom: var(--space-6);
  max-width: 30ch;
  margin-bottom: calc(var(--space-6) + 40px);
  color: #fff;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.4vw, 32px);
  font-style: italic;
  line-height: 1.25;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.palco__marca {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.palco__marca::after {
  content: "";
  width: 40px;
  height: 1px;
  background: currentColor;
}

/* Na história, a marca é o ano, grande. */
.palco__marca--ano {
  font-family: var(--font-serif);
  font-size: clamp(60px, 6.4vw, 92px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.9;
  text-transform: none;
}

.palco__marca--ano::after {
  display: none;
}

.palco__passo h2 {
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 500;
  line-height: 1.05;
}

.palco__passo > p,
.palco__fixo > p {
  margin-top: var(--space-3);
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: clamp(21px, 1.9vw, 24px);
  line-height: 1.45;
}

.palco__passo .text-link {
  margin-top: var(--space-4);
}

/* A receita (e o que mais for para ler só a pedido): fechada por defeito. */
.palco__passo .lugar__historia {
  margin-top: var(--space-4);
}

.palco__passo .lugar__historia p,
.palco__passo .lugar__historia li {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.palco__passo .lugar__historia h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.palco__passo .lugar__historia ul,
.palco__passo .lugar__historia ol {
  display: grid;
  gap: 4px;
  padding-left: 1.2em;
}

/* em mobile a barra «Reservar Agora» ocupa o fundo do ecrã */
@media (max-width: 760px) {
  .palco__passo .palco__legenda {
    bottom: calc(var(--space-6) + 40px);
  }
}

/* ---------- Comodidades ----------
   Sem caixas: quatro listas em texto corrido sobre a foto. */
.comodidades__grupos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  max-width: 760px;
  margin-top: var(--space-5);
}

.comodidades__grupo h3 {
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 28px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
}

.comodidades__grupo ul {
  margin-top: var(--space-2);
  padding: 0;
  list-style: none;
}

.comodidades__grupo li {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

@media (max-width: 480px) {
  .comodidades__grupos {
    gap: var(--space-4) var(--space-3);
  }

  .comodidades__grupo h3 {
    font-size: 24px;
  }

  .comodidades__grupo li {
    font-size: 14px;
  }
}

/* Em ecrã largo, as quatro listas numa fila, em baixo; o véu sobe do fundo
   e a foto fica à vista na metade de cima. */
@media (min-width: 1000px) {
  .comodidades .palco__fixo {
    justify-content: flex-end;
  }

  .comodidades__grupos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
  }
}

/* ---------- A Quinta (página inicial) ---------- */
.pa__text {
  max-width: 520px;
}

.pa__text .editorial {
  margin-top: var(--space-4);
  font-size: 20px;
}

.pa__link {
  margin-top: var(--space-4);
}

/* ---------- Galeria (página inicial) ---------- */
.galeria__more {
  margin-top: var(--space-4);
}

/* ---------- Galeria (galeria.html) ----------
   Pedido do cliente (2026-10-02): só a foto em ecrã inteiro, sem faixa nem
   barra, e um botão redondo em baixo, ao meio, que passa à seguinte (main.js):
   anel dourado com o progresso, a foto seguinte lá dentro com o rato por
   cima, seta que troca de lugar e íman (Magnet do react-bits). Fica
   presa ao fundo do ecrã enquanto a galeria o ocupa e não segue para o
   Reservar. Só entram fotos de 2400 px (catálogo PHOTOS no main.js). */
.pagina-galeria main {
  --ink: #fff;
  --muted: rgba(255, 255, 255, 0.8);
  --line: rgba(255, 255, 255, 0.24);
  --blue: var(--gold);
  color: var(--ink);
}

.galeria-faixa {
  --seta-fundo: var(--space-4);
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--blue-dark);
  color: #fff;
}

/* o fundo: duas camadas; a nova entra por cima, revelada de lado (main.js) */
.galeria-palco__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.galeria-palco__fundo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.galeria-palco__fundo img.is-on {
  opacity: 1;
}

/* véu leve: só escurece o topo (menu) e esbate o fundo para o Reservar */
.galeria-palco__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* por cima das camadas, que levam z-index na troca */
  background: linear-gradient(180deg, rgba(22, 49, 63, 0.4) 0%, rgba(22, 49, 63, 0) 22%, rgba(22, 49, 63, 0) 80%, rgba(22, 49, 63, 0.45) 100%);
}

.galeria-seta {
  --tam: 72px;
  position: absolute;
  left: calc(50% - var(--tam) / 2);
  bottom: var(--seta-fundo);
  display: grid;
  place-items: center;
  width: var(--tam);
  height: var(--tam);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(14, 11, 8, 0.28); /* lê-se também sobre paredes brancas */
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  color: #fff;
  cursor: pointer;
  transition: translate 0.35s ease-out, scale 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.galeria-seta:active {
  scale: 0.96;
}

.galeria-seta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* a foto seguinte, que cresce dentro do círculo com o rato por cima */
.galeria-seta__previa {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: center / cover no-repeat;
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.4s ease, scale 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.galeria-seta__previa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(14, 11, 8, 0.35);
}

/* o anel: o fundo claro e, por cima, o dourado com o progresso (main.js) */
.galeria-seta__anel {
  position: absolute;
  inset: 0;
  rotate: -90deg;
  overflow: visible;
}

.galeria-seta__anel circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
}

.galeria-seta__anel circle + circle {
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--progresso, 0));
  transition: stroke-dashoffset 0.9s cubic-bezier(0.77, 0, 0.18, 1);
}

/* duas setas: com o rato por cima, a primeira sai pela direita e a outra
   entra pela esquerda */
.galeria-seta__icone {
  position: relative;
  width: 24px;
  height: 24px;
  overflow: hidden;
}

.galeria-seta__icone svg {
  position: absolute;
  inset: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}

.galeria-seta__icone svg + svg {
  translate: -110% 0;
}

/* só com rato: no telemóvel o toque deixava o hover preso */
@media (hover: hover) {
  .galeria-seta:hover {
    scale: 1.08;
  }

  .galeria-seta:hover .galeria-seta__previa {
    opacity: 1;
    scale: 1;
  }

  .galeria-seta:hover .galeria-seta__icone svg:first-child {
    translate: 110% 0;
  }

  .galeria-seta:hover .galeria-seta__icone svg + svg {
    translate: 0 0;
  }
}

html:not(.js) .galeria-seta {
  display: none;
}

/* crédito do fotógrafo, pequeno, por cima da seta (o cliente pediu os créditos) */
.galeria-faixa__credito {
  position: absolute;
  left: 50%;
  bottom: calc(var(--seta-fundo) + 72px + 12px);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0.85;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  transform: translateX(-50%);
}

/* no telemóvel o WhatsApp e o Reservar ocupam o fundo do ecrã: a seta sobe */
@media (max-width: 760px) {
  .galeria-faixa {
    --seta-fundo: calc(var(--space-4) + 48px + 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .galeria-seta,
  .galeria-seta *,
  .galeria-seta__anel circle + circle {
    transition: none;
  }
}

/* ---------- Galeria na página inicial ----------
   O texto à esquerda e, à direita, uma foto pequena sem moldura que vai
   trocando sozinha (main.js), com a legenda por cima; tudo leva à galeria. */
.galeria__grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
}

.galeria-foto {
  display: grid;
  justify-items: center;
  color: inherit;
}

.galeria-foto:focus-visible {
  outline: none;
}

.galeria-foto__quadro {
  position: relative;
  display: block;
  width: 260px;
  aspect-ratio: 3 / 4;
}

.galeria-foto__janela {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: #2a2119;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.5), 0 12px 30px -16px rgba(0, 0, 0, 0.35);
}

.galeria-foto:focus-visible .galeria-foto__janela {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}

.galeria-foto__janela img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galeria-foto__janela img.a-entrar {
  animation: foto-entra 1s cubic-bezier(0.3, 0.6, 0.2, 1) both;
}

@keyframes foto-entra {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
}

.galeria-foto__legenda {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 56px 16px 14px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(transparent, rgba(10, 8, 6, 0.6));
  color: #fff;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.galeria-foto__nome {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.2;
}

.galeria-foto:hover .galeria-foto__nome {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .galeria__grelha {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .galeria__grelha .galeria-foto {
    justify-items: start;
  }

  .galeria-foto__quadro {
    width: 170px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galeria-foto__janela img.a-entrar {
    animation: none;
  }
}

/* ---------- Reservar ---------- */
/* Escuro em todas as páginas: a reserva rápida é branca e o bloco liga ao
   rodapé. (No palco o fundo é a foto: ver .palco .reservar.) */
.reservar {
  --ink: #fff;
  --muted: rgba(255, 255, 255, 0.78);
  --line: rgba(255, 255, 255, 0.2);
  --blue: var(--gold);
  --paper: transparent;
  background: var(--rodape);
  color: #fff;
  padding-block: var(--space-6);
}

.reservar .reservar__panel {
  border-color: rgba(255, 255, 255, 0.14);
}

/* com a reserva rápida no painel, o botão "Reservar Agora" (para quem não
   tem JS) fica a mais */
.reservar__panel:has(.reserva-rapida) .btn--primary {
  display: none;
}

.reservar__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border: 1px solid rgba(31, 36, 40, 0.22);
  background: var(--paper);
}

.reservar__text {
  max-width: 560px;
}

.reservar__text .section-title {
  font-size: clamp(30px, 3.4vw, 42px);
}

.reservar__support {
  max-width: 46ch;
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.reservar__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.reservar__actions .btn--primary {
  box-shadow: none;
}

/* A reserva rápida no Reservar: a toda a largura do painel, por baixo do
   texto, sem a entrada animada do hero. Os painéis abrem para cima, porque
   por baixo já é o fim da página. */
.reservar .reserva-rapida {
  grid-column: 1 / -1;
  width: 100%;
  margin: var(--space-3) 0 0;
}

.reservar .reserva-rapida__campo,
.reservar .reserva-rapida__ir {
  animation: none;
}

.reservar .reserva-pop {
  top: auto;
  bottom: calc(100% + 10px);
}

/* ---------- Rodapé ---------- */
.site-footer {
  position: relative;
  background: var(--rodape);
  color: var(--paper-soft);
  padding-top: var(--space-5);
  padding-bottom: var(--space-4);
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-footer__name {
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 30px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
}

.site-footer__sub {
  color: rgba(250, 249, 246, 0.7);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: rgba(250, 249, 246, 0.78);
  font-size: 14px;
  line-height: 1.5;
}

.site-footer__contact a {
  color: var(--paper-soft);
  border-bottom: 1px solid transparent;
}

.site-footer__contact a:hover {
  border-bottom-color: currentColor;
}

.site-footer__sep {
  margin-inline: 8px;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.site-footer__copy,
.site-footer__legal {
  color: rgba(250, 249, 246, 0.6);
  font-size: 13px;
  line-height: 1.45;
}

.site-footer__legal {
  border-bottom: 1px solid transparent;
}

.site-footer__legal:hover {
  border-bottom-color: currentColor;
}

/* ---------- CTA persistente ---------- */
/* Aparece depois do hero; recolhe-se quando a secção Reservar está à vista. */
.sticky-cta {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: var(--radius);
  background: var(--clay);
  color: var(--white);
  box-shadow: 0 14px 34px rgba(22, 28, 24, 0.2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

.sticky-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sticky-cta.is-visible.is-docked {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.sticky-cta:hover {
  background: var(--clay-dark);
}

@keyframes rodape-fixo-entra {
  from {
    opacity: 0;
  }
}

/* ---------- Voltar ao topo (main.js) ----------
   Círculo escuro por cima do Reservar, como o botão do menu no telemóvel. */
.topo {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + 48px + 12px);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(14, 11, 8, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.2s ease;
}

.topo.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.topo:hover {
  border-color: var(--gold);
}

.topo:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .topo {
    right: var(--space-2);
    bottom: calc(var(--space-2) + 50px + 10px + env(safe-area-inset-bottom));
  }

  html:has(.main-nav.is-open) .topo {
    visibility: hidden;
  }
}

/* Lenis (scroll suave no computador): o scroll-behavior: smooth do html
   brigava com ele. */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: clip;
}

/* só durante o scroll: o mapa dos contactos não apanha a roda a meio */
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ---------- Balão do WhatsApp ----------
   Só o ícone, sempre à vista, no canto esquerdo (o Reservar fica à direita).
   Azul do azulejo em vez do verde do WhatsApp, para combinar com o site. */
.wa-balao {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 14px 34px rgba(22, 28, 24, 0.22);
  transition: background-color 0.2s ease;
}

.wa-balao:hover {
  background: var(--blue-dark);
}

/* centrado ao pixel parece descaído: a ponta do balão pesa em baixo à
   esquerda, por isso sobe e vai para a direita 1px (centro ótico) */
.wa-balao svg {
  width: 26px;
  height: 26px;
  transform: translate(1px, -1px);
}

.wa-balao:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .wa-balao {
    left: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
  }
}

/* ---------- Página legal (política de privacidade) ----------
   Página sem hero: o cabeçalho ganha fundo próprio, porque o texto branco
   sobre creme não se lê. Nada aqui afeta a página inicial. */
.site-header--solid {
  position: static;
  padding-block: var(--space-3);
  background: var(--blue-dark);
}

/* Cabeçalho sobre fundo claro (páginas sem foto por trás): texto escuro, sem sombra. */
.site-header--escuro .wordmark__name,
.site-header--escuro .wordmark__sub,
.site-header--escuro .main-nav a {
  color: var(--ink);
  text-shadow: none;
}

.site-header--escuro .main-nav a:hover {
  color: var(--clay);
}

.site-header--escuro .main-nav .main-nav__reservar {
  border-color: var(--clay);
  color: var(--clay);
}

.site-header--escuro .main-nav .main-nav__reservar:hover {
  background: var(--clay);
  color: var(--white);
}

.site-header--escuro .nav-toggle__bar {
  background: var(--ink);
}

.legal {
  background: var(--paper);
  padding-block: var(--space-6) var(--space-7);
}

.legal__head {
  max-width: 680px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.legal__intro {
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink);
}

.legal__date {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.legal__body {
  max-width: 680px;
  margin-top: var(--space-5);
}

.legal__body h2 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.2;
}

.legal__body h2:first-child {
  margin-top: 0;
}

.legal__body p,
.legal__body li {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.legal__body p + p {
  margin-top: var(--space-2);
}

.legal__body strong {
  color: var(--ink);
  font-weight: 600;
}

.legal__body ul {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  list-style: none;
}

.legal__body li {
  position: relative;
  margin-bottom: 10px;
  padding-left: var(--space-3);
}

.legal__body li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--blue);
}

.legal__body a {
  color: var(--blue);
  border-bottom: 1px solid currentColor;
}

.legal__body a:hover {
  color: var(--clay);
}

.legal__block {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  border-left: 2px solid var(--clay);
}

.legal__back {
  max-width: 680px;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .legal {
    padding-block: var(--space-5) var(--space-6);
  }

  .legal__body h2 {
    font-size: 22px;
  }

  .legal__intro {
    font-size: 19px;
  }
}

/* ---------- Página de contactos ----------
   Cabeçalho, faixa de avaliações a passar, dados de contacto e mapa. */
.contactos {
  background: var(--paper);
}

/* Cabeçalho com a foto da casa por trás; o véu escuro garante a leitura do texto. */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(460px, 62vh, 620px); /* o cabeçalho do site assenta por cima da foto */
  overflow: hidden;
  background: var(--blue-dark);
}

.page-hero__bg,
.page-hero::after {
  position: absolute;
  inset: 0;
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 68%; /* mais para baixo: árvore, latada e pátio */
}

.page-hero::after {
  content: "";
  /* acaba no azul exato da faixa: a foto dissolve-se nela, sem linha de corte */
  background: linear-gradient(180deg, rgba(22, 49, 63, 0.5) 0%, rgba(22, 49, 63, 0.2) 22%, rgba(22, 49, 63, 0.5) 50%, rgba(22, 49, 63, 0.85) 80%, var(--blue-dark) 100%);
}

.page-hero__head {
  position: relative;
  z-index: 1;
  padding-block: var(--space-6) var(--space-5);
}

.page-hero__head .eyebrow,
.page-hero__head .section-title {
  color: var(--white);
}

.page-hero__head .section-title {
  font-size: clamp(42px, 5vw, 64px);
}

.page-hero__head .section-lead {
  color: rgba(255, 255, 255, 0.86);
}

/* Faixa de avaliações: os cartões passam sozinhos da direita para a esquerda.
   Sem JS (ou com movimento reduzido) fica uma fila que se desliza à mão. */
/* Pouco azul à volta: os cartões ocupam quase toda a faixa. */
.faixa {
  padding-block: 6px var(--space-3);
  background: var(--blue-dark);
  color: var(--paper-soft);
}

/* Nota geral centrada, toda em serifa itálica, como uma legenda. */
.faixa__top {
  margin-bottom: var(--space-3);
  text-align: center;
}

.faixa__titulo {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 14px;
  font-family: var(--font-serif);
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.82);
}

.faixa__nota {
  font-size: 30px;
  font-weight: 500;
  color: var(--white);
}

.faixa__estrelas {
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0.12em;
}

/* Duas notas lado a lado (Booking e Google); partem linha em ecrãs estreitos. */
.faixa__fonte {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
}

.faixa .faixa__titulo {
  column-gap: var(--space-5);
}

.faixa__data {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.faixa__viewport {
  overflow-x: auto;
  scrollbar-width: none;
}

.faixa__viewport::-webkit-scrollbar {
  display: none;
}

.faixa .faixa__lista {
  display: flex;
  width: max-content;
  padding-inline: 20px 4px;
}

.review {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 300px;
  margin-right: 16px; /* margem e não gap: o loop de -50% fica exato */
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--paper-soft);
  color: var(--ink);
}

.review__estrelas {
  color: var(--clay);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
}

.review blockquote {
  flex: 1;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.32;
}

.review__autor {
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.review__autor span {
  color: var(--muted);
  font-weight: 400;
}

/* Com JS: a lista vem duplicada e anda metade do comprimento em loop. */
.faixa.is-animada .faixa__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

/* puxa-se de lado (main.js); o scroll vertical da página continua no dedo */
.faixa.is-animada .faixa__viewport {
  touch-action: pan-y;
  cursor: grab;
}

.faixa.is-arrastar .faixa__viewport {
  cursor: grabbing;
}

.faixa.is-animada img {
  -webkit-user-drag: none;
}

.faixa.is-animada .faixa__lista {
  padding-inline: 0;
  will-change: transform;
  animation: faixa-passa var(--faixa-duracao, 80s) linear infinite;
}

.faixa.is-animada:hover .faixa__lista,
.faixa.is-animada:focus-within .faixa__lista {
  animation-play-state: paused;
}

@keyframes faixa-passa {
  to {
    transform: translateX(-50%);
  }
}

.linha {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 4px var(--space-3);
  padding-block: 16px;
  border-top: 1px solid var(--line);
}

.linha:last-child {
  border-bottom: 1px solid var(--line);
}

.linha__rotulo {
  padding-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.linha__valor {
  display: grid;
  gap: 2px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

.linha__valor a {
  width: fit-content;
  max-width: 100%;
  color: var(--blue);
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.linha__valor a:hover {
  border-bottom-color: currentColor;
  color: var(--clay);
}

.linha__valor small {
  color: var(--muted);
  font-size: 12px;
}

/* Contactos e mapa: linhas à esquerda, mapa arredondado à direita,
   com folga antes do rodapé. */
.mapa {
  padding-block: var(--space-6);
}

.mapa__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.mapa__titulo {
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.1;
}

.mapa__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.mapa__frame {
  overflow: hidden;
  height: clamp(320px, 42vw, 460px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--stone);
}

.mapa__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 900px) {
  .mapa__grid {
    grid-template-columns: minmax(340px, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-5);
  }

  .mapa__frame {
    height: auto;
    min-height: 480px;
  }
}

@media (max-width: 760px) {
  .page-hero {
    min-height: 420px;
  }

  .page-hero__head {
    padding-block: var(--space-5) var(--space-4);
  }

  .faixa .faixa__lista {
    padding-inline: 16px 4px;
  }

  .review {
    width: 264px;
  }

  .linha {
    grid-template-columns: 1fr;
  }

  .linha__rotulo {
    padding-top: 0;
  }

}

/* ---------- Página «O que fazer à volta» (no palco) ----------
   Capa com os capítulos; cada capítulo abre com um título e segue lugar a
   lugar, cada um com a sua foto no fundo: distância, nome, a dica de quem cá
   vive, a história a pedido e o crédito da foto. */
.capitulos-nav .capitulos-nav__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-5);
}

.capitulos-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid rgba(31, 36, 40, 0.2);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.capitulos-nav a span {
  color: var(--clay);
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
}

/* Na capa: botões claros sobre a foto. */
.capa__head .capitulos-nav a {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--white);
}

.capa__head .capitulos-nav a span {
  color: var(--gold);
}

.capa__head .capitulos-nav a:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

.capitulo__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  max-width: 780px;
}

.capitulo__num {
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: clamp(44px, 5vw, 64px);
  font-style: italic;
  line-height: 1;
}

.capitulo__head .section-title {
  margin-top: 4px;
}

.capitulo__intro {
  max-width: 52ch;
  margin-top: var(--space-2);
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: 21px;
  font-style: italic;
  line-height: 1.4;
}

.lugar__distancia {
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lugar__texto {
  width: 100%;
}

.lugar__texto h3 {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.05;
}

.lugar__dica {
  margin-top: var(--space-2);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.8vw, 23px);
  font-style: italic;
  line-height: 1.4;
}

.lugar__acoes {
  margin-top: var(--space-3);
}

/* A história do sítio fica fechada: só a lê quem quer. */
.lugar__historia {
  margin-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.lugar__historia summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.lugar__historia summary::-webkit-details-marker {
  display: none;
}

.lugar__historia summary::after {
  content: "+";
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
}

.lugar__historia[open] summary::after {
  content: "−";
}

.lugar__historia p {
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.lugar__credito {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.8;
}

.lugar__credito a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.arredores__nota {
  margin-top: var(--space-5);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 760px) {
  .capitulo__head {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .capitulo__intro {
    font-size: 19px;
  }

  .capitulos-nav a {
    padding-inline: 14px;
  }
}

/* ---------- Página dos quartos (no palco) ---------- */
.quarto__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block: var(--space-3) var(--space-4);
  padding: 0;
  list-style: none;
}

.quarto__tags li {
  padding: 4px 12px;
  border: 1px solid var(--line);
  color: var(--blue);
  font-size: 13px;
}

.quarto__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* no telemóvel ficam um sobre o outro: a mesma largura */
@media (max-width: 760px) {
  .quarto__acoes .btn {
    flex: 1 1 100%;
  }
}

/* ---------- Visor: as fotografias de um quarto, por cima da página ----------
   <dialog> nativo (o main.js cria-o): Esc fecha e o foco fica lá dentro. */
.visor {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: var(--space-5) var(--space-3);
  border: 0;
  background: transparent;
  color: #fff;
}

.visor[open] {
  display: grid;
  place-items: center;
}

.visor::backdrop {
  background: rgba(12, 10, 8, 0.9);
}

html:has(.visor[open]) {
  overflow: hidden;
}

.visor__figura {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  animation: visor-entra 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes visor-entra {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

.visor__img {
  max-width: min(100%, 1200px);
  max-height: calc(100svh - 150px);
  object-fit: contain;
}

.visor__legenda {
  font-family: var(--font-serif);
  font-size: 19px;
  font-style: italic;
  text-align: center;
}

.visor__fechar,
.visor__nav {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.visor__fechar:hover,
.visor__nav:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}

.visor__fechar {
  top: var(--space-3);
  right: var(--space-3);
}

.visor__nav {
  top: 50%;
  translate: 0 -50%;
}

.visor__nav--ant {
  left: var(--space-3);
}

.visor__nav--seg {
  right: var(--space-3);
}

.visor.is-unica .visor__nav {
  display: none;
}

@media (max-width: 599px) {
  .visor__nav {
    top: auto;
    bottom: var(--space-3);
    translate: none;
  }
}

.palco__passo .quarto__nota {
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: italic;
}

/* ============================================================
   Responsivo
   ============================================================ */

@media (min-width: 620px) {
  .viver__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .viver__item h3 {
    font-size: 24px;
  }
}

@media (min-width: 700px) {
  .reservar__panel {
    grid-template-columns: minmax(0, 1.3fr) auto;
    align-items: center;
    padding: var(--space-5);
  }

  .reservar__actions {
    align-items: flex-end;
    text-align: right;
  }
}

@media (min-width: 900px) {
  .viver__item h3 {
    font-size: 27px;
  }
}

@media (max-width: 899px) {
  .hero__title {
    font-size: 46px;
  }

  .hero__subtitle {
    font-size: 20px;
  }
}

@media (max-width: 760px) {
  :root {
    --space-6: 68px;
    --space-7: 82px;
  }

  body {
    padding-bottom: 0;
    background: var(--rodape);
    overscroll-behavior-y: none;
  }

  /* a folga da barra fixa fica dentro do rodapé */
  .site-footer {
    padding-bottom: calc(var(--space-3) + 62px + env(safe-area-inset-bottom));
  }

  .wrap,
  .site-header__inner {
    width: min(calc(100% - 32px), var(--max-width));
  }

  .hero__content {
    width: calc(100vw - 32px);
    max-width: 358px;
    margin-inline: auto;
  }

  .site-header {
    padding-block: var(--space-3);
  }

  .site-header__inner {
    justify-content: space-between;
  }

  .wordmark {
    position: static;
    align-items: flex-start;
    text-align: left;
    transform: none;
  }

  .wordmark__name {
    font-size: 21px;
  }

  .wordmark__sub {
    font-size: 9px;
  }

  /* O botão do menu fica sempre à mão: o cabeçalho não acompanha o scroll,
     e a meio da página não havia como abrir o menu. Um círculo escuro para
     se ler sobre qualquer foto. */
  .nav-toggle {
    position: fixed;
    top: 12px;
    right: 12px;
    display: flex;
    box-sizing: border-box;
    width: 46px;
    height: 46px;
    padding: 14px 12px;
    border-radius: 50%;
    background: rgba(14, 11, 8, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* com o menu aberto, o WhatsApp e o "Reservar Agora" não ficam por cima */
  html:has(.main-nav.is-open) .sticky-cta,
  html:has(.main-nav.is-open) .wa-balao {
    visibility: hidden;
  }

  /* O menu abre sobre a fotografia do hero: sem caixa, sem linhas, sem cartão.
     Fica em z-index negativo para passar por baixo do wordmark e do botão,
     que continuam visíveis e clicáveis por cima. */
  .main-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    /* o desktop centra e distribui os dois grupos: aqui não */
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 88px 28px 32px;
    overflow-y: auto; /* oito links: num ecrã baixo o menu desliza */
    overscroll-behavior: contain;
    /* vidro escuro e quente: a página continua a ver-se, desfocada */
    background: rgba(14, 11, 8, 0.72);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    backdrop-filter: blur(22px) saturate(1.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s;
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* com o menu aberto, a página por trás não desliza */
  html:has(.main-nav.is-open) {
    overflow: hidden;
  }

  /* as línguas são links como os outros: o main.js abre o <details> e o
     «PT ▾» esconde-se; sem JS fica fechado e toca-se para abrir */
  .main-nav__linguas details,
  .linguas__lista {
    display: block;
    position: static;
    margin: 0;
    padding: 0;
    background: none;
    transform: none;
  }

  .main-nav__linguas details[open] > .linguas__atual {
    display: none;
  }

  /* os dois grupos deixam de ser esquerda/direita e passam a uma lista só */
  .main-nav__left,
  .main-nav__right {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    gap: 0;
    padding: 0;
  }

  /* centrado na vertical quando cabe; quando não cabe, desliza desde o topo
     (com justify-content: center o topo ficava fora de alcance) */
  .main-nav__left {
    margin-top: auto;
  }

  .main-nav__right {
    margin-bottom: auto;
  }

  .main-nav li {
    border: 0;
  }

  .main-nav a {
    display: block;
    width: fit-content;
    padding-block: 10px;
    color: var(--paper-soft);
    font-family: var(--font-serif);
    font-size: clamp(30px, 8.5vw, 38px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0;
    text-align: left;
    text-shadow: none;
    text-transform: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* um pequeno azulejo em barro marca o link tocado, como nas etiquetas */
  .main-nav a::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 14px;
    background: var(--clay);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    vertical-align: middle;
  }

  .main-nav a:active::before,
  .main-nav a:focus-visible::before {
    opacity: 1;
    transform: none;
  }

  /* os links entram um a um, de baixo para cima */
  .main-nav.is-open a {
    opacity: 1;
    transform: none;
  }

  .main-nav.is-open .main-nav__left li:nth-child(1) a {
    transition-delay: 0.05s;
  }

  .main-nav.is-open .main-nav__left li:nth-child(2) a {
    transition-delay: 0.10s;
  }

  .main-nav.is-open .main-nav__left li:nth-child(3) a {
    transition-delay: 0.15s;
  }

  .main-nav.is-open .main-nav__left li:nth-child(4) a {
    transition-delay: 0.20s;
  }

  .main-nav.is-open .main-nav__right li:nth-child(1) a {
    transition-delay: 0.25s;
  }

  .main-nav.is-open .main-nav__right li:nth-child(2) a {
    transition-delay: 0.30s;
  }

  .main-nav.is-open .main-nav__right li:nth-child(3) a {
    transition-delay: 0.35s;
  }

  .main-nav.is-open .main-nav__right li:nth-child(4) a {
    transition-delay: 0.40s;
  }

  /* três traços que se cruzam quando o menu está aberto */
  .nav-toggle__bar {
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .main-nav.is-open ~ .nav-toggle .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .main-nav.is-open ~ .nav-toggle .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .main-nav.is-open ~ .nav-toggle .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* menu aberto: o fundo é escuro, por isso tudo volta a claro, também nas
     páginas de cabeçalho escuro */
  .site-header--escuro .main-nav a {
    color: var(--paper-soft);
  }

  .main-nav.is-open ~ .wordmark .wordmark__name,
  .main-nav.is-open ~ .wordmark .wordmark__sub {
    color: var(--white);
  }

  .main-nav.is-open ~ .nav-toggle .nav-toggle__bar {
    background: var(--white);
  }

  .main-nav a[aria-current="page"] {
    border-bottom: 0;
  }

  .main-nav a[aria-current="page"]::before {
    opacity: 1;
    transform: none;
  }

  .main-nav .main-nav__reservar,
  .main-nav .main-nav__reservar:hover,
  .site-header--escuro .main-nav .main-nav__reservar,
  .site-header--escuro .main-nav .main-nav__reservar:hover {
    padding: 10px 0;
    border: 0;
    background: none;
    color: var(--gold);
    font-size: clamp(30px, 8.5vw, 38px);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* Roda de opções (main.js, OptionWheel do react-bits): cada link fica
     centrado à esquerda e o main.js desloca-o pelo arco (transform,
     opacity, filter); --ow-p vai de 0 a 1 ao chegar ao centro. */
  .main-nav.is-roda {
    padding: 0;
    overflow: hidden;
    touch-action: none;
  }

  .main-nav.is-roda ul,
  .main-nav.is-roda li {
    display: contents;
  }

  .main-nav.is-roda a,
  .main-nav.is-roda .main-nav__reservar,
  .main-nav.is-roda .main-nav__reservar:hover {
    position: absolute;
    top: 50%;
    left: 80px;
    padding: 0;
    color: color-mix(in srgb, var(--ow-ativa, #fff) calc(var(--ow-p, 0) * 100%), #a6a6a6);
    font-size: 3rem;
    line-height: 1;
    white-space: nowrap;
    transform-origin: left center;
    transition: none;
    will-change: transform, opacity, filter;
    user-select: none;
    -webkit-user-drag: none;
  }

  .main-nav.is-roda .main-nav__reservar {
    --ow-ativa: var(--gold);
  }

  .hero {
    min-height: 100svh;
  }

  .hero__title {
    max-width: 9.5em;
    margin-inline: auto;
    font-size: 36px;
  }

  .hero__subtitle {
    max-width: 15.5em;
    margin-inline: auto;
    font-size: 18px;
  }

  .hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .editorial {
    font-size: 20px;
  }

  .section-lead {
    font-size: 20px;
  }

  .casa__facts > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .viver__photo {
    aspect-ratio: 4 / 3;
  }

  .reservar__panel {
    padding: var(--space-4) var(--space-3);
  }

  .site-footer__contact {
    font-size: 13px;
  }

  .site-footer__sep {
    margin-inline: 6px;
  }

  /* Em mobile o CTA passa a barra inferior, sempre acessível. */
  /* à esquerda fica o balão do WhatsApp, da mesma altura */
  .sticky-cta {
    right: var(--space-2);
    bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    left: calc(var(--space-2) + 60px);
    display: flex;
    min-height: 50px;
    font-size: 13px;
  }

  .sticky-cta.is-visible.is-docked {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  /* Rodapé fixo por trás do WhatsApp e do Reservar: o conteúdo passa por
     baixo dele e não por trás dos botões soltos. Vidro desfocado, para ir
     tomando as cores da foto que está atrás. */
  body:has(.sticky-cta.is-visible)::after {
    content: "";
    position: fixed;
    inset: auto 0 0;
    z-index: 89;
    height: calc(var(--space-2) * 2 + 50px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(14, 11, 8, 0.35);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    pointer-events: none;
    animation: rodape-fixo-entra 0.3s ease;
  }

  html:has(.main-nav.is-open) body::after {
    display: none;
  }

  .wa-balao {
    left: var(--space-2);
    bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    width: 50px;
    height: 50px;
    min-height: 50px;
  }
}

@media (max-width: 480px) {
  .hero__title {
    max-width: 8.3em;
    font-size: 30px;
  }

  .hero__eyebrow {
    font-size: 12px;
  }

  .hero__subtitle {
    font-size: 18px;
  }
}