/* =========================================================================
   PORTO MONTE — folha de estilo única
   Ordem do ficheiro: 1 tokens · 2 base · 3 tipografia · 4 grelha
   5 cabeçalho · 6 hero · 7 barra das horas · 8 momentos · 9 quartos
   10 pontuações · 11 mapa · 12 galeria · 13 comentários · 14 perguntas
   15 formulários · 16 noite/rodapé · 17 utilitários · 18 movimento
   (calendário do formulário) · 19 página de cada quarto · 20 páginas de texto
   21 reserva
   ========================================================================= */

/* 1 ─ TOKENS ───────────────────────────────────────────────────────────── */
:root{
  /* cal, ocre e água — tirados do próprio edifício */
  --cal:#FBFAF6; --cal-2:#F1EBDF; --areia:#E7DCC7; --sombra:#D8CDB8;
  --ocre:#F0A81E; --ocre-esc:#B8790A;
  --agua:#17A2B0; --agua-esc:#0C5F6B;
  --terra:#C8552C; --telha:#B4543A;
  /* terracota para texto pequeno: passa os 4,5:1 sobre todos os tons do papel */
  --terra-texto:#984027;
  --verde:#5F7350; --caqui:#8C8B6B;
  /* tinta-45 a a6 (e não 94): mínimo de 4,7:1 sobre todos os tons do papel */
  --tinta:#17171A; --tinta-70:#17171Ab3; --tinta-45:#17171Aa6;
  --noite:#141A2E; --noite-2:#1E2740;

  /* conduzidos pelo scroll (ver assets/js/site.js) */
  --sol:#F0A81E;
  --halo:rgba(240,168,30,.30);
  --papel:#FBF7EE;
  --sol-x:78%; --sol-y:16%;

  --linha:color-mix(in srgb, var(--tinta) 14%, transparent);
  --linha-forte:color-mix(in srgb, var(--tinta) 26%, transparent);

  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --texto:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --max:1440px;
  --gutter:clamp(1.15rem,4vw,3.5rem);
  --margem:var(--gutter);   /* margem esquerda: abre para a régua das horas */
  --bloco:clamp(4.5rem,11vh,9rem);
  --raio:2px;
  --raio-img:6px;  /* fotografias: um pouco mais redondas do que a interface */
  --ease:cubic-bezier(.25,.8,.25,1);        /* interface: hover, cores */
  --ease-suave:cubic-bezier(.16,1,.3,1);    /* entradas: saída exponencial */
}

/* 2 ─ BASE ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--texto);font-size:clamp(1.02rem,.35vw + .95rem,1.2rem);
  line-height:1.62;font-weight:380;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--ocre);color:var(--tinta)}

:focus-visible{
  outline:2px solid var(--tinta);outline-offset:3px;border-radius:var(--raio);
}
.saltar{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--tinta);color:var(--cal);padding:.7rem 1.1rem;
  font-family:var(--mono);font-size:.78rem;transition:top .25s var(--ease);
}
.saltar:focus{top:.8rem}

/* a luz — a assinatura do site */
.luz{position:fixed;inset:0;z-index:0;pointer-events:none}
.luz::before{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(closest-side circle at var(--sol-x) var(--sol-y),
             var(--halo),transparent 72%);
}
.luz::after{
  content:"";position:absolute;
  left:var(--sol-x);top:var(--sol-y);width:min(20vw,190px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--sol);opacity:.5;filter:blur(46px);
}

/* 3 ─ TIPOGRAFIA ───────────────────────────────────────────────────────── */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:620;
  font-variation-settings:"wdth" 92,"opsz" 40;
  line-height:.93;letter-spacing:-.035em;margin:0;text-wrap:balance;
}
.d-xl{font-size:clamp(2.5rem,6.6vw,6.4rem);font-variation-settings:"wdth" 86,"opsz" 48}
.d-l {font-size:clamp(2.3rem,5.6vw,4.6rem)}
.d-m {font-size:clamp(1.7rem,3.2vw,2.75rem);line-height:.98}
.d-s {font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.06;letter-spacing:-.02em}
p{margin:0 0 1.1em}
.chapeu{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta-45);margin:0 0 1.4rem;
  display:flex;align-items:center;gap:.7rem;font-weight:400;
}
.chapeu::before{content:"";width:1.6rem;height:1px;background:var(--linha-forte);flex:none}
.hora{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  color:var(--terra-texto);font-weight:500;
}
.entrada{font-size:clamp(1.25rem,1.9vw,1.72rem);line-height:1.42;font-weight:340}
.legenda{
  font-family:var(--mono);font-size:.72rem;line-height:1.5;letter-spacing:.04em;
  color:var(--tinta-45);margin:.75rem 0 0;
}
.nota{font-family:var(--mono);font-size:.75rem;letter-spacing:.03em;color:var(--tinta-45)}
em{font-style:italic;font-variation-settings:"opsz" 20}

/* 4 ─ GRELHA E BOTÕES ──────────────────────────────────────────────────── */
.env{max-width:var(--max);margin-inline:auto;padding-left:var(--margem);padding-right:var(--gutter)}
.grelha{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
/* No telemóvel a grelha passa a uma coluna. Várias páginas escrevem a coluna no
   atributo style (grid-column:9/span 4), que ganha a qualquer regra desta folha;
   sem o !important, o texto ficava espremido numa coluna de 100 px. */
@media(max-width:900px){.grelha>[style*="grid-column"]{grid-column:1/-1!important}}
section{position:relative;z-index:1}

.btn{
  --bg:var(--tinta);--fg:var(--cal);
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.92rem 1.5rem;background:var(--bg);color:var(--fg);
  font-family:var(--mono);font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--bg);border-radius:99px;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ocre);
  transform:translateY(101%);transition:transform .32s var(--ease);
}
/* tinta fixa: o ocre é sempre claro, mesmo onde --tinta passa a clara
   (cabeçalho sobre a fotografia, secções .noite) */
.btn:hover{color:#17171A;border-color:var(--ocre)}
.btn:hover::after{transform:translateY(0)}
.btn--linha{--bg:transparent;--fg:var(--tinta);border-color:var(--linha-forte)}
.btn--linha:hover{border-color:var(--ocre)}
.btn--claro{--bg:transparent;--fg:var(--cal);border-color:#ffffff40}

.seta{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--linha-forte);padding-bottom:.35rem;
  transition:border-color .3s var(--ease),gap .3s var(--ease);
}
.seta:hover{border-color:var(--terra);gap:1rem}
.seta span{transition:transform .3s var(--ease)}
.seta:hover span{transform:translateX(3px)}

/* 5 ─ CABEÇALHO ────────────────────────────────────────────────────────── */
.topo{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem var(--gutter);
  transition:padding .35s var(--ease),background-color .35s var(--ease),
             box-shadow .35s var(--ease);
}
.topo--preso{padding-block:.7rem}
/* O vidro fosco vive num pseudo-elemento: um backdrop-filter no próprio .topo
   torna-o bloco de contenção e prende o menu de telemóvel (position:fixed)
   dentro da altura do cabeçalho. */
.topo::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:color-mix(in srgb,var(--papel) 88%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  opacity:0;transition:opacity .35s var(--ease);
}
.topo--preso::before{opacity:1}

/* O horizonte: a linha de base do cabeçalho. O sol atravessa-a do nascer
   (esquerda) ao pôr (direita), conduzido pelo scroll; o que desce abaixo da
   linha fica escondido. --sol-p e --sol-arco vêm do site.js. */
.horizonte{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;
  background:var(--linha);pointer-events:none;
}
.horizonte__ceu{position:absolute;inset:0;clip-path:inset(-140px -60px 0 -60px)}
.horizonte__sol{
  position:absolute;top:0;left:calc(var(--sol-p,.5) * 100%);
  width:14px;height:14px;border-radius:50%;background:var(--sol);
  translate:-50% calc(-50% - var(--sol-arco,1) * 20px);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--sol) 24%,transparent),
             0 0 28px 8px var(--halo);
}
.horizonte__hora{
  position:absolute;top:.5rem;left:calc(var(--sol-p,.5) * 100%);translate:-50% 0;
  padding:.08rem .4rem;border-radius:99px;background:var(--papel);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--tinta-45);
  white-space:nowrap;
}
.horizonte__hora:empty{display:none}
@media(max-width:700px){.horizonte__hora{display:none}}
.marca{
  display:flex;align-items:baseline;gap:.6rem;text-decoration:none;
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.05rem,1.5vw,1.28rem);
}
.marca b{font-weight:700}
.marca i{
  font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tinta-45);
}
.menu{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)}
.menu a{
  text-decoration:none;font-family:var(--mono);font-size:.79rem;letter-spacing:.07em;
  position:relative;padding-block:.3rem;
}
/* o sublinhado é dos links do menu; o botão Reservar tem o seu próprio
   ::after (o ocre que sobe), que esta regra, mais específica, apagava */
.menu a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--terra);transform:scaleX(0);transform-origin:right;
  transition:transform .28s var(--ease);
}
.menu a:not(.btn):hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
/* selector de idioma */
.lingua{
  border:1px solid var(--linha-forte);border-radius:99px;padding:.34rem .7rem;
  font-size:.7rem!important;letter-spacing:.12em;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.lingua::after{display:none}
.lingua:hover{border-color:var(--ocre);background:var(--ocre)}
/* as quatro línguas numa só cápsula; a da página fica preenchida */
.linguas{display:inline-flex;align-items:center;gap:.1rem;padding:.14rem;
  border:1px solid var(--linha-forte);border-radius:99px}
.linguas .lingua{border:0;padding:.26rem .5rem;font-family:var(--mono);letter-spacing:.1em}
.linguas .lingua[aria-current]{background:var(--tinta);color:var(--papel)}
.linguas a.lingua:hover{background:var(--ocre)}

.menu-btn{
  display:none;background:none;border:1px solid var(--linha-forte);border-radius:99px;
  padding:.6rem .95rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;
}

@media(max-width:860px){
  /* por cima do menu aberto, que ocupa o ecrã todo: é por aqui que se fecha */
  .menu-btn{display:block;position:relative;z-index:2}
  .menu{
    position:fixed;inset:0;flex-direction:column;justify-content:center;
    gap:1.6rem;background:var(--papel);
    clip-path:circle(0% at calc(100% - 4rem) 2.5rem);
    transition:clip-path .5s var(--ease-suave);
  }
  .menu[data-aberto="sim"]{clip-path:circle(150% at calc(100% - 4rem) 2.5rem)}
  .menu a{font-family:var(--display);font-size:2.1rem;font-weight:500;letter-spacing:-.03em}
  .menu .lingua{font-family:var(--mono);font-size:.85rem!important;font-weight:400;
                padding:.5rem 1.1rem}
  .menu .linguas .lingua{padding:.5rem .85rem}
  .menu .btn{font-family:var(--mono);font-size:.8rem}
}

/* 6 ─ HERO ─────────────────────────────────────────────────────────────── */
/* padding-block, nunca o atalho: o atalho apagaria as margens laterais de .env */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
      padding-block:clamp(6.2rem,11vh,7.6rem) clamp(1.2rem,3vh,2rem)}
.hero__grelha{align-items:end}
.hero__txt{grid-column:1/span 7;align-self:end}
.hero h1{margin-bottom:0;font-size:clamp(2.5rem,5.3vw,5.6rem)}
.hero h1 .fio{
  display:block;color:var(--terra);
  font-variation-settings:"wdth" 78,"opsz" 48;font-weight:400;font-style:italic;
}
.hero__sub{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:end;
  justify-content:space-between;gap:1rem 2rem}
.hero__sub p{max-width:36ch;margin:0;color:var(--tinta-70)}
.hero__foto{grid-column:8/span 5;align-self:end}
.hero__foto .moldura{aspect-ratio:5/4}
.hero__marca{
  grid-column:1/span 12;display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem 2rem;margin-top:1.35rem;padding-top:.95rem;border-top:1px solid var(--linha);
}
.selo{display:flex;align-items:baseline;gap:.55rem}
.selo b{font-family:var(--display);font-size:1.85rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.selo .selo__pre{max-width:none}
.selo span{font-family:var(--mono);font-size:.73rem;letter-spacing:.09em;color:var(--tinta-45);max-width:16ch}
.hero__pontos{display:flex;flex-wrap:wrap;gap:.5rem}
.pastilha{
  font-family:var(--mono);font-size:.71rem;letter-spacing:.06em;
  border:1px solid var(--linha-forte);border-radius:99px;padding:.42rem .85rem;color:var(--tinta-70);
}

/* barra de reserva */
.reserva{
  grid-column:1/span 12;margin-top:1.05rem;
  display:grid;grid-template-columns:repeat(4,1fr) auto;gap:1px;
  background:var(--linha-forte);border:1px solid var(--linha-forte);border-radius:var(--raio);
  overflow:hidden;
}
.reserva label{
  display:flex;flex-direction:column;gap:.3rem;padding:.85rem 1.05rem;background:var(--papel);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tinta-45);transition:background-color .3s var(--ease);
}
.reserva label:focus-within{background:var(--cal-2)}
.reserva input,.reserva select{
  border:0;background:none;font-family:var(--texto);font-size:1rem;color:var(--tinta);
  padding:0;width:100%;
}
.reserva input:focus,.reserva select:focus{outline:none}
.reserva button{
  border:0;background:var(--tinta);color:var(--cal);padding-inline:clamp(1.2rem,3vw,2.4rem);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease);
}
.reserva button:hover{background:var(--ocre);color:var(--tinta)}
@media(max-width:900px){
  .hero__txt,.hero__foto{grid-column:1/-1}
  .hero__foto{margin-top:1.4rem}
  .hero__foto .moldura{aspect-ratio:3/2}
  .reserva{grid-template-columns:1fr 1fr}
  .reserva button{grid-column:1/-1;padding-block:1rem}
}

/* 6b ─ HERO CHEIO ─────────────────────────────────────────────────────
   A fotografia ocupa o primeiro ecrã de ponta a ponta e o texto assenta por
   cima, em claro. A figura posiciona-se contra a .hero (section, relative):
   a caixa da .env está centrada, por isso left:50% + 100vw dá a largura toda
   da janela, mesmo com a margem esquerda maior da régua das horas. */
/* --funde: a faixa, abaixo do primeiro ecrã, onde a fotografia se desvanece
   no papel em vez de acabar num corte seco */
.hero--cheia{min-height:0;padding-top:0;--funde:clamp(6rem,20vh,12rem)}
/* 1.ª linha da grelha = o ecrã da fotografia mais a faixa do desvanecimento.
   O texto fica um pouco acima do fundo do ecrã: entre ele e o desvanecimento
   sobra só fotografia limpa (o chão claro), sem véu escuro. A marca e a barra
   de reserva seguem nas linhas de baixo, já sobre o papel. */
.hero--cheia .hero__grelha{
  grid-template-rows:minmax(calc(100svh + var(--funde)),auto);align-items:start;
}
.hero--cheia .hero__txt{
  grid-row:1;align-self:end;
  padding-block:clamp(6.5rem,14vh,9rem) calc(var(--funde) + clamp(4.5rem,16vh,9rem));
}
/* a máscara torna a fotografia transparente aos poucos, quase toda abaixo do
   primeiro ecrã: por baixo fica o papel do body, que muda com o scroll, por
   isso a cor bate sempre. Os passos imitam uma curva suave (ease-in-out). */
.hero--cheia .hero__foto{
  position:absolute;top:0;left:50%;width:100vw;height:calc(100svh + var(--funde));
  translate:-50% 0;margin:0;z-index:0;--raio-img:0;
  --mascara:linear-gradient(to bottom,
    #000 calc(100% - var(--funde) * 1.2),
    rgb(0 0 0/.93) calc(100% - var(--funde) * .95),
    rgb(0 0 0/.72) calc(100% - var(--funde) * .7),
    rgb(0 0 0/.42) calc(100% - var(--funde) * .45),
    rgb(0 0 0/.16) calc(100% - var(--funde) * .22),
    rgb(0 0 0/.03) calc(100% - var(--funde) * .06),
    transparent);
  -webkit-mask-image:var(--mascara);mask-image:var(--mascara);
}
.hero--cheia .hero__foto .moldura{height:100%;aspect-ratio:auto;background:var(--noite)}
.hero--cheia .moldura img{object-position:50% 62%}
/* sem a cortina de cima para baixo: num ecrã inteiro mostrava o texto claro
   sobre o papel claro; fica só o zoom de entrada (assenta) e o parallax */
.com-js .hero--cheia [data-revela]{clip-path:none}
/* véu: uma mancha redonda e suave só atrás do texto (em vez de uma faixa de
   lado a lado), que se apaga antes do desvanecimento — assim a fotografia
   passa para o papel a partir do chão claro, sem escuro pelo meio — e um
   escurecer leve no topo, para o cabeçalho */
.hero--cheia .hero__foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 62% 40% at 20% calc(100% - var(--funde) - 27%),
      rgb(20 26 46/.62),rgb(20 26 46/.4) 38%,rgb(20 26 46/.14) 66%,rgb(20 26 46/0) 86%),
    linear-gradient(to bottom,rgb(20 26 46/.42),rgb(20 26 46/0) 22%);
}
.hero--cheia .hero__txt{
  position:relative;z-index:1;color:#F2EDE2;
  --tinta:#F2EDE2;--tinta-70:#F2EDE2eb;--tinta-45:#F2EDE2c7;
  --linha:#F2EDE247;--linha-forte:#F2EDE280;
  text-shadow:0 1px 2px rgb(20 26 46/.3),0 2px 32px rgb(20 26 46/.5);
}
.hero--cheia h1 .fio{color:#F6C46A}

/* cabeçalho claro enquanto está por cima da fotografia; ao prender ganha o
   vidro de papel e volta à tinta escura */
body:has(.hero--cheia) .topo{transition:padding .35s var(--ease),color .35s var(--ease)}
body:has(.hero--cheia) .topo:not(.topo--preso){
  color:#F2EDE2;
  --tinta:#F2EDE2;--tinta-70:#F2EDE2eb;--tinta-45:#F2EDE2c7;
  --linha:#F2EDE247;--linha-forte:#F2EDE280;--papel:var(--noite);
}
body:has(.hero--cheia) .topo:not(.topo--preso) .btn{--bg:#F2EDE2;--fg:var(--noite)}
body:has(.hero--cheia) .topo:not(.topo--preso) .menu-btn{color:#F2EDE2}
/* a régua das horas só aparece depois da fotografia (data-palco: site.js) */
.horas{transition:opacity .35s var(--ease)}
[data-palco="sim"] .horas{opacity:0;pointer-events:none}
@media(max-width:860px){
  /* o menu aberto ocupa o ecrã em papel: aí a tinta volta a ser escura */
  body:has(.hero--cheia) .topo:not(.topo--preso):has(.menu[data-aberto="sim"]){
    color:var(--tinta);--tinta:#17171A;--tinta-70:#17171Ab3;--tinta-45:#17171Aa6;
    --linha:color-mix(in srgb,#17171A 14%,transparent);
    --linha-forte:color-mix(in srgb,#17171A 26%,transparent);--papel:#FBF7EE;
  }
}

/* 7 ─ BARRA DAS HORAS ──────────────────────────────────────────────────── */
.horas{
  position:fixed;left:clamp(.9rem,2vw,1.6rem);top:50%;transform:translateY(-50%);
  z-index:40;display:none;flex-direction:column;gap:.85rem;
  padding-left:.9rem;border-left:1px solid var(--linha);
}
@media(min-width:1180px){
  .horas{display:flex}
  :root{--margem:calc(var(--gutter) + 4.2rem)}
}
.horas a{
  display:flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--tinta-45);
  transition:color .25s var(--ease);
}
.horas a::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--linha-forte);
  transition:transform .3s var(--ease-suave),background-color .25s var(--ease);
}
.horas a em{
  font-style:normal;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .35s var(--ease-suave),opacity .25s var(--ease);
}
.horas a:hover em,.horas a:focus-visible em{max-width:11rem;opacity:1}
.horas a em{padding-left:.55rem}
.horas a[aria-current="true"]{color:var(--tinta)}
.horas a[aria-current="true"]::before{background:var(--terra);transform:scale(2.1)}

/* 8 ─ MOMENTOS ─────────────────────────────────────────────────────────── */
.momento{padding-block:var(--bloco)}
/* sobre ocre ou água, a tinta secundária escurece e a hora deixa de ser
   terracota (terracota sobre ocre não se lê) */
:root[data-fundo="cor"]{--tinta-45:#17171Abd;--tinta-70:#17171Ae3}
[data-cor] .hora{color:var(--tinta)}
.momento__cab{grid-column:1/span 5;position:sticky;top:clamp(6rem,16vh,9rem);align-self:start}
.momento__fig{grid-column:7/span 6}
.momento--espelho .momento__cab{grid-column:8/span 5;order:2}
.momento--espelho .momento__fig{grid-column:1/span 6;order:1}
.momento__cab p{color:var(--tinta-70);max-width:38ch}
.momento h2{margin-bottom:1.3rem}
.lista-fina{list-style:none;margin:1.8rem 0 0;padding:0;border-top:1px solid var(--linha)}
.lista-fina li{
  display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
  padding:.72rem 0;border-bottom:1px solid var(--linha);
  font-family:var(--mono);font-size:.79rem;letter-spacing:.03em;
}
.lista-fina li span:last-child{color:var(--tinta-45);text-align:right;flex:none}
@media(max-width:560px){.lista-fina li span:last-child{flex:0 1 auto}}
/* duas listas lado a lado, que no telemóvel passam a uma só */
.listas-duplas{grid-column:6/span 7;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gutter)}
@media(max-width:900px){.listas-duplas{grid-column:1/-1}}
@media(max-width:700px){
  .listas-duplas{grid-template-columns:1fr}
  .listas-duplas .lista-fina+.lista-fina{border-top:0}
}

figure{margin:0}
.moldura{
  position:relative;overflow:hidden;border-radius:var(--raio-img);background:var(--cal-2);
}
.moldura img{width:100%;height:100%;object-fit:cover;transition:scale .7s var(--ease-suave)}
.moldura:hover img{scale:1.035}
.moldura::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--sol);opacity:.07;mix-blend-mode:multiply;
}
.moldura--alta{aspect-ratio:4/5}
.moldura--larga{aspect-ratio:3/2}
.fig-dupla{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:end}
.fig-dupla .moldura:first-child{aspect-ratio:3/4}
.fig-dupla .moldura:last-child{aspect-ratio:1;margin-bottom:2.5rem}

@media(max-width:900px){
  .momento__cab,.momento__fig,
  .momento--espelho .momento__cab,.momento--espelho .momento__fig{grid-column:1/-1;position:static}
  .momento--espelho .momento__cab{order:0}
  .momento--espelho .momento__fig{order:1}
  .momento__fig{margin-top:2rem}
}

/* frase do anfitrião */
.frase{padding-block:var(--bloco);text-align:center}
.frase blockquote{
  margin:0 auto;max-width:22ch;font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,5.4vw,4.4rem);line-height:1;letter-spacing:-.04em;
  font-variation-settings:"wdth" 84,"opsz" 48;
}
.frase blockquote em{color:var(--terra)}
.frase figcaption{margin-top:1.8rem;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-45)}

/* 9 ─ QUARTOS ──────────────────────────────────────────────────────────── */
.quartos{
  grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--gutter);margin-top:2.6rem;
}
.quarto>a{display:block;text-decoration:none}
.quarto__img{aspect-ratio:4/5}
.quarto h3{margin:1.15rem 0 .45rem;font-size:1.32rem;letter-spacing:-.02em;
  transition:color .25s var(--ease)}
.quarto>a:hover h3{color:var(--terra)}
.quarto__meta{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-family:var(--mono);font-size:.73rem;
  color:var(--tinta-45);letter-spacing:.04em;margin:0;
}
.quarto__meta b{color:var(--tinta);font-weight:500}
.quarto__preco{flex-basis:100%;color:var(--tinta);margin-top:.2rem}
.quarto__preco b{font-family:var(--display);font-size:1.08rem;letter-spacing:-.01em}
@media(max-width:1100px){.quartos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.quartos{grid-template-columns:1fr}.quarto__img{aspect-ratio:4/3}}

/* botão de reserva fixo — só em telemóvel; aparece depois do hero e
   esconde-se no rodapé, que tem o seu próprio botão */
.fixo{
  position:fixed;left:.75rem;right:.75rem;bottom:max(.75rem,env(safe-area-inset-bottom));
  z-index:55;display:none;align-items:center;justify-content:space-between;gap:1rem;
  padding:.5rem .5rem .5rem 1.15rem;border-radius:99px;
  background:color-mix(in srgb,var(--noite) 95%,transparent);color:#F2EDE2;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 12px 32px -12px rgba(20,26,46,.55);
  translate:0 calc(100% + 2rem);transition:translate .45s var(--ease-suave);
}
@media(max-width:860px){.fixo{display:flex}}
.fixo[data-visivel="sim"]{translate:0 0}
.fixo__info{margin:0;display:flex;flex-direction:column;gap:.1rem;line-height:1.25;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.03em}
.fixo__info b{font-weight:500;color:#fff}
.fixo__info span+span{color:#F2EDE299}
.fixo .btn{--bg:#F2EDE2;--fg:var(--noite);padding:.78rem 1.25rem;flex:none}
.fixo .btn:hover{color:var(--noite)}

/* 10 ─ PONTUAÇÕES ──────────────────────────────────────────────────────── */
.notas{grid-column:1/span 12;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.notas__n{grid-column:1/span 4}
.notas__n b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(5rem,15vw,12rem);line-height:.8;letter-spacing:-.06em;
  font-variation-settings:"wdth" 80;
}
.notas__l{grid-column:6/span 7;display:grid;grid-template-columns:1fr 1fr;
  gap:.2rem 2.5rem;align-content:start}
.nota-linha{padding:.8rem 0;border-bottom:1px solid var(--linha)}
.nota-linha div{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:.78rem;margin-bottom:.5rem;letter-spacing:.03em}
.nota-linha i{display:block;height:2px;background:var(--linha-forte);position:relative;overflow:hidden}
.nota-linha i::after{
  content:"";position:absolute;inset:0;background:var(--terra);
  transform:scaleX(1);transform-origin:left;
  transition:transform .8s var(--ease-suave) var(--atraso,0s);
}
.com-js .a-ver .nota-linha i::after{transform:scaleX(var(--v,1))}
@media(max-width:900px){
  .notas{grid-template-columns:1fr}
  .notas__n,.notas__l{grid-column:1/-1}
  .notas__l{grid-template-columns:1fr;margin-top:1.5rem}
}

/* 11 ─ MAPA / ARREDORES ────────────────────────────────────────────────── */
.mapa{grid-column:1/span 6;position:relative;aspect-ratio:1;align-self:start}
.mapa svg{width:100%;height:100%;overflow:visible}
.mapa .ponto{transition:r .4s var(--ease),fill .4s var(--ease)}
.mapa .rotulo{font-family:var(--mono);font-size:15px;fill:var(--tinta-45);
  transition:fill .35s var(--ease)}
.mapa g.act .ponto{fill:var(--terra);r:9}
.mapa g.act .rotulo{fill:var(--tinta)}
.destinos{grid-column:8/span 5;align-self:center;list-style:none;margin:0;padding:0}
.destinos li{border-bottom:1px solid var(--linha)}
.destinos button{
  width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  background:none;border:0;padding:.95rem 0;cursor:pointer;text-align:left;
  transition:padding-left .25s var(--ease-suave),color .2s var(--ease);
}
.destinos button:hover,.destinos button[aria-current="true"]{padding-left:.7rem;color:var(--terra)}
.destinos strong{font-family:var(--display);font-weight:500;font-size:1.12rem;letter-spacing:-.02em}
.destinos span{font-family:var(--mono);font-size:.79rem;color:var(--tinta-45);flex:none}
.destinos button:hover span{color:var(--terra)}
@media(max-width:900px){.mapa,.destinos{grid-column:1/-1}.destinos{margin-top:2rem}}

/* 12 ─ GALERIA ─────────────────────────────────────────────────────────── */
.galeria{columns:3;column-gap:var(--gutter);margin-top:2.5rem}
@media(max-width:900px){.galeria{columns:2}}
@media(max-width:560px){.galeria{columns:1}}
.galeria figure{break-inside:avoid;margin-bottom:var(--gutter)}
.galeria button{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--raio-img);overflow:hidden;position:relative;
}
/* height:auto — sem ela, a altura do atributo height fica e a foto espalma */
.galeria img{width:100%;height:auto;transition:scale .7s var(--ease-suave)}
.galeria button:hover img{scale:1.04}
/* legenda ao passar o rato: o texto vem do alt (site.js); em ecrãs de toque
   não aparece, porque o toque abre logo a lupa, que já tem legenda */
.galeria__leg{
  position:absolute;left:.6rem;bottom:.6rem;max-width:calc(100% - 1.2rem);
  padding:.38rem .62rem;border-radius:calc(var(--raio-img) - 2px);
  background:color-mix(in srgb,var(--noite) 84%,transparent);color:#F2EDE2;
  font-family:var(--mono);font-size:.72rem;line-height:1.35;letter-spacing:.04em;text-align:left;
  opacity:0;translate:0 .4rem;pointer-events:none;
  transition:opacity .3s var(--ease),translate .45s var(--ease-suave);
}
@media(hover:hover){.galeria button:hover .galeria__leg{opacity:1;translate:none}}
.galeria button:focus-visible .galeria__leg{opacity:1;translate:none}
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.filtros button{
  border:1px solid var(--linha-forte);background:none;border-radius:99px;padding:.5rem 1.05rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.filtros button[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}

dialog.lupa{
  border:0;padding:0;background:none;max-width:100vw;max-height:100vh;
  width:100%;height:100%;overflow:hidden;
}
dialog.lupa::backdrop{background:color-mix(in srgb,var(--noite) 92%,transparent);
  backdrop-filter:blur(6px)}
.lupa__cx{display:grid;place-items:center;height:100%;padding:clamp(1rem,5vw,4rem);position:relative}
.lupa__cx img{max-height:82vh;width:auto;border-radius:var(--raio-img);
  animation:entra-lupa .32s var(--ease-suave) both}
@keyframes entra-lupa{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lupa__leg{position:absolute;left:clamp(1rem,5vw,4rem);bottom:clamp(1rem,4vw,2.5rem);
  color:#fff;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em}
.lupa__ctl{position:absolute;top:clamp(1rem,4vw,2rem);right:clamp(1rem,5vw,4rem);
  display:flex;gap:.6rem}
.lupa__ctl button{
  width:3rem;height:3rem;border-radius:50%;border:1px solid #ffffff40;background:none;
  color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:background-color .3s var(--ease)}
.lupa__ctl button:hover{background:#ffffff1f}

/* 13 ─ COMENTÁRIOS ─────────────────────────────────────────────────────── */
/* grelha dentro da grelha: sem grid-column ocupava só a primeira das 12 colunas,
   e os cartões ficavam com 88 px de largura */
.vozes{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);margin-top:3rem}
.voz{
  grid-column:span 4;display:flex;flex-direction:column;gap:1.1rem;margin:0;
  padding-top:1.3rem;border-top:1px solid var(--linha-forte);
}
.voz:nth-child(3n+2){margin-top:clamp(0rem,5vw,4rem)}
.voz p{font-size:1.08rem;line-height:1.55;margin:0}
.voz footer{margin-top:auto;font-family:var(--mono);font-size:.73rem;letter-spacing:.08em;
  color:var(--tinta-45);display:flex;justify-content:space-between;gap:1rem}
@media(max-width:900px){.voz{grid-column:1/-1}.voz:nth-child(3n+2){margin-top:0}}

/* 14 ─ PERGUNTAS ───────────────────────────────────────────────────────── */
.perguntas{grid-column:1/span 12;border-top:1px solid var(--linha-forte);margin-top:2.5rem}
details{border-bottom:1px solid var(--linha)}
summary{
  list-style:none;cursor:pointer;padding:1.25rem 0;display:flex;gap:1.5rem;
  align-items:baseline;justify-content:space-between;
  font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,1.7vw,1.35rem);
  letter-spacing:-.02em;transition:color .3s var(--ease);
}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--terra)}
summary::after{content:"+";font-family:var(--mono);font-size:1.1rem;color:var(--tinta-45);
  transition:transform .4s var(--ease);flex:none}
details[open] summary::after{transform:rotate(45deg)}
details .resp{padding:0 0 1.5rem;max-width:60ch;color:var(--tinta-70);
  animation:abre .28s var(--ease-suave) both}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 15 ─ FORMULÁRIOS ─────────────────────────────────────────────────────── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.campo{display:flex;flex-direction:column;gap:.45rem}
.campo--largo{grid-column:1/-1}
.campo>span{font-family:var(--mono);font-size:.75rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tinta-45)}
.campo input,.campo select,.campo textarea{
  border:0;border-bottom:1px solid var(--linha-forte);background:none;
  padding:.7rem 0;font-family:var(--texto);font-size:1.05rem;color:var(--tinta);
  transition:border-color .3s var(--ease);border-radius:0;
}
.campo textarea{resize:vertical;min-height:7rem;line-height:1.55}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--terra)}
/* Só assinala erros depois de a pessoa tentar enviar. Antes disso, um campo
   por preencher não é um erro — e as datas nunca mostram placeholder, por isso
   a regra antiga pintava-as de vermelho desde o início. */
.form[data-validado] .campo :invalid{border-color:var(--terra)}

/* o pedido agrupado por assunto, em vez de uma parede de campos */
.form__seccao{
  grid-column:1/-1;margin:1.7rem 0 -.3rem;padding-top:1rem;
  border-top:1px solid var(--linha);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-45);
}
.form__seccao:first-child{margin-top:0;padding-top:0;border-top:0}
.resumo-datas{
  grid-column:1/-1;margin:-.5rem 0 0;min-height:1.2rem;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--terra-texto);
}

/* o que fica no lugar do formulário depois de enviar */
.feito{max-width:36rem}
.feito h2{margin:.6rem 0 1.1rem}
.feito>p{color:var(--tinta-70)}
.feito .lista-fina{margin-top:1.8rem}
.feito__nota{margin-top:1.6rem}
.erro{font-family:var(--mono);font-size:.72rem;color:var(--terra-texto);min-height:1rem}
@media(max-width:700px){.form{grid-template-columns:1fr}}

/* 16 ─ NOITE / RODAPÉ ──────────────────────────────────────────────────── */
.noite{
  --papel:var(--noite);--tinta:#F2EDE2;
  --tinta-70:#F2EDE2b3;--tinta-45:#F2EDE280;
  --linha:#F2EDE224;--linha-forte:#F2EDE23d;
  background:var(--noite);color:#F2EDE2;position:relative;z-index:1;
  padding-block:var(--bloco);
}
.noite ::selection{background:var(--ocre);color:var(--noite)}
/* o botão primário inverte-se sobre o fundo escuro */
.noite .btn{--bg:#F2EDE2;--fg:var(--noite)}
.noite .btn:hover{color:var(--noite)}
.noite .btn--claro{--bg:transparent;--fg:#F2EDE2;border-color:#F2EDE240}
.rodape__col:last-of-type{grid-column:span 3}
.rodape{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:start}
.rodape__marca{grid-column:1/span 5}
.rodape__marca .d-l{margin-bottom:1.2rem}
.rodape__col{grid-column:span 2}
.rodape__col h4{font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-45);margin-bottom:1rem;letter-spacing:.18em}
.rodape__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.rodape__col a{text-decoration:none;font-size:.98rem;transition:color .3s var(--ease)}
.rodape__col a:hover{color:var(--ocre)}
.rodape__fim{
  grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  margin-top:clamp(3rem,7vw,5rem);padding-top:1.3rem;border-top:1px solid var(--linha);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--tinta-45);
}
.rodape__fim a{text-decoration:none;border-bottom:1px solid var(--linha-forte);
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.rodape__fim a:hover{color:var(--ocre);border-color:var(--ocre)}
@media(max-width:900px){
  .rodape__marca{grid-column:1/-1}
  .rodape__col{grid-column:span 6;margin-top:2rem}
}

/* 17 ─ UTILITÁRIOS ─────────────────────────────────────────────────────── */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cab-secao{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:1.5rem;grid-column:1/span 12}
.cab-secao>:first-child{flex:1 1 20rem}
.cab-secao>.nota{flex:0 1 auto;text-align:right}
@media(max-width:700px){.cab-secao>.nota{text-align:left}}
.regua{grid-column:1/-1;height:1px;background:var(--linha);margin-block:var(--bloco) 0}

.com-js .nota-linha i::after{transform:scaleX(0)}

/* 18 ─ MOVIMENTO ───────────────────────────────────────────────────────── */
/* Regra: entradas curtas (0,4–0,8 s) com saída exponencial. O movimento faz-se
   quase todo no primeiro terço e depois assenta. Nada espera mais de ~0,3 s
   pelo elemento anterior. */

/* palavras — o preenchimento com margem negativa alarga a zona de corte,
   para o overflow não comer acentos, descendentes (í, ç, p, g) nem a
   inclinação dos itálicos (o m de «com», o l de «sol») */
.p{display:inline-block;overflow:hidden;vertical-align:top;
   padding:.1em .12em .16em;margin:-.1em -.12em -.16em}
.com-js .p>i{
  display:inline-block;font-style:inherit;
  transform:translateY(1.3em) rotate(1.5deg);opacity:0;
  transition:transform .65s var(--ease-suave) var(--atraso,0s),
             opacity .4s var(--ease) var(--atraso,0s);
}
.com-js .a-ver .p>i{transform:none;opacity:1}

.com-js [data-surge]{
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease) var(--atraso,0s),
             transform .6s var(--ease-suave) var(--atraso,0s);
}
.com-js [data-surge].a-ver{opacity:1;transform:none}

/* o recorte leva o mesmo arredondamento da moldura: no Safari, o overflow
   arredondado nem sempre corta a fotografia quando esta tem transform */
.com-js [data-revela]{clip-path:inset(0 0 100% 0 round var(--raio-img));
  transition:clip-path .8s var(--ease-suave) var(--atraso,0s)}
.com-js [data-revela].a-ver{clip-path:inset(0 round var(--raio-img))}

/* sombra das fotografias (página inicial, quartos e galeria): suave e
   quente, em três camadas — um contorno quase nada, um meio-tom curto e uma
   sombra longa e difusa por baixo — para a fotografia assentar no papel em
   vez de ficar chapada. Ficam de fora a do topo da página inicial, que se
   desvanece no papel, e a dos contactos (moldura--alta), que não foi pedida.
   O recorte da revelação cortaria a sombra, por isso aqui termina um pouco
   para fora da moldura; os cantos da fotografia ficam a cargo do overflow
   arredondado, e o isolation segura-o no Safari. */
:root{
  --sombra-img:
    0 1px 2px rgb(56 40 24/.06),
    0 6px 14px -4px rgb(56 40 24/.09),
    0 22px 44px -18px rgb(56 40 24/.24);
}
.moldura:not(.hero__foto .moldura,.moldura--alta),
.galeria button{isolation:isolate;box-shadow:var(--sombra-img)}
.com-js .moldura[data-revela].a-ver:not(.hero__foto .moldura,.moldura--alta){
  clip-path:inset(-2.5rem -2.5rem -4rem -2.5rem round var(--raio-img));
}
/* a imagem assenta enquanto a moldura abre; com `backwards` o valor não fica
   preso no fim, e o zoom do hover volta a funcionar */
.com-js [data-revela].a-ver img{
  animation:assenta .9s var(--ease-suave) var(--atraso,0s) backwards}
@keyframes assenta{from{scale:1.08}}

/* transições entre páginas — Chrome, Edge e Safari 18.2+;
   nos outros browsers a página muda sem animação, como antes */
@view-transition{navigation:auto}
.topo{view-transition-name:topo}
::view-transition-old(root){animation:sai-pagina .18s var(--ease) both}
::view-transition-new(root){animation:entra-pagina .42s var(--ease-suave) both}
@keyframes sai-pagina{to{opacity:0}}
@keyframes entra-pagina{from{opacity:0;translate:0 12px}}

/* parallax: a fotografia é 16 % mais alta do que a moldura e desliza ±6 %
   enquanto a moldura atravessa o ecrã — acompanha o scroll, não atrasa nada.
   `translate` compõe-se com o `scale` do hover e da entrada. */
@supports (animation-timeline:view()){
  /* A linha do tempo é a da moldura a atravessar o ecrã. view() na própria
     imagem não serve: o overflow:hidden da moldura faz dela um contentor de
     scroll, e a imagem media-se contra uma moldura que nunca se mexe. */
  .moldura{view-timeline:--moldura block}
  .moldura img{
    position:absolute;inset:-8% 0 auto;height:116%;
    animation:paralaxe linear both;animation-timeline:--moldura;
  }
  .com-js [data-revela].a-ver img{
    animation:assenta .9s var(--ease-suave) var(--atraso,0s) backwards,paralaxe linear both;
    animation-timeline:auto,--moldura;
  }
  @keyframes paralaxe{from{translate:0 -6%}to{translate:0 6%}}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .p>i,[data-surge],[data-revela]{opacity:1!important;transform:none!important;
    clip-path:none!important}
  .luz{display:none}
  @view-transition{navigation:none}
  .moldura img{animation:none!important;position:static!important;
    height:100%!important;translate:none!important}
}

/* ── calendário de disponibilidade no formulário ────────────────────────
   Ajuda visual: os campos de data nativos continuam a mandar. Uma célula é
   uma noite; o dia de saída não é noite, por isso pode estar ocupado. */
.calendario{
  margin-top:.7rem;padding:1rem 1.1rem 1.1rem;
  border:1px solid var(--linha);border-radius:var(--raio);
}
.calendario__topo{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:.9rem}
.calendario__meses{margin:0;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-45)}
.calendario__seta{
  width:2rem;height:2rem;flex:none;border-radius:50%;border:1px solid var(--linha-forte);
  background:none;cursor:pointer;display:grid;place-items:center;font-size:.78rem;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.calendario__seta:hover{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.calendario__grelha{display:grid;gap:1.4rem}
@media(min-width:700px){.calendario__grelha{grid-template-columns:1fr 1fr}}
.calendario__titulo{margin:0 0 .5rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.06em;color:var(--tinta-45)}
.calendario__dias{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calendario__inicial{font-family:var(--mono);font-size:.6rem;color:var(--tinta-45);
  text-align:center;padding-bottom:.3rem}
.calendario__dia{
  aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;border-radius:2px;
  font-family:var(--mono);font-size:.76rem;color:var(--tinta);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.calendario__dia:hover:not(:disabled){background:var(--cal-2)}
.calendario__dia:disabled{cursor:default}
.calendario__dia[data-passado="sim"]{opacity:.3}
.calendario__dia[data-ocupada="sim"]{
  color:var(--tinta-45);text-decoration:line-through;
  background:repeating-linear-gradient(-45deg,transparent,transparent 3px,
             var(--sombra) 3px,var(--sombra) 4px);
}
.calendario__dia[data-dentro="sim"]{background:var(--cal-2)}
.calendario__dia[data-ponta]{background:var(--tinta);color:var(--papel)}
.calendario__rodape{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;
  margin:.9rem 0 0;font-family:var(--mono);font-size:.7rem;color:var(--tinta-45);
}
.calendario__chave{display:flex;align-items:center;gap:.45rem}
.calendario__chave i{
  width:.85rem;height:.85rem;border-radius:2px;border:1px solid var(--linha);
  background:repeating-linear-gradient(-45deg,transparent,transparent 3px,
             var(--sombra) 3px,var(--sombra) 4px);
}
.calendario__aviso{color:var(--terra-texto);text-align:right}

/* 19 ─ PÁGINA DE CADA QUARTO ───────────────────────────────────────────── */
.quarto-topo{padding-top:clamp(8rem,20vh,12rem);padding-bottom:clamp(2rem,5vh,3.5rem)}
.quarto-topo__txt{grid-column:1/span 8}
.quarto-topo__txt h1{margin:0}
.migalhas a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linha-forte);
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.migalhas a:hover{color:var(--terra);border-color:var(--terra)}
.quarto-topo__preco{grid-column:9/span 4;align-self:end;margin:0;
  font-family:var(--mono);font-size:.79rem;letter-spacing:.04em;color:var(--tinta-45)}
.quarto-topo__preco b{display:block;margin:.2rem 0 .35rem;font-family:var(--display);
  font-size:clamp(2.2rem,4vw,3.2rem);font-weight:650;letter-spacing:-.04em;
  line-height:1;color:var(--tinta)}

.quarto-corpo{padding-bottom:var(--bloco)}
.quarto-corpo__foto{grid-column:1/span 8}
.quarto-corpo__info{grid-column:9/span 4;position:sticky;top:clamp(6rem,16vh,9rem);
  align-self:start}
.quarto-corpo__info>p{color:var(--tinta-70)}
.quarto-corpo__info .lista-fina{margin-top:1.4rem}
.quarto-corpo__accoes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
  margin-top:1.8rem}

/* mais fotografias do quarto: escritas por tools/usar-fotos.py entre os
   marcadores <!-- fotos:… --> e <!-- /fotos -->; sem elas, não aparece nada */
.fotos-quarto{grid-column:1/span 8;display:grid;grid-template-columns:1fr 1fr;
  gap:var(--gutter)}
.fotos-quarto .moldura{aspect-ratio:3/2}
.fotos-quarto figure:nth-child(odd):last-child{grid-column:1/-1}
/* com mais fotografias, a coluna do texto acompanha-as até ao fim */
@media(min-width:901px){
  .grelha:has(>.fotos-quarto)>.quarto-corpo__info{grid-row:1/span 2}
}

/* os outros três quartos, no fim da página: a regra vem depois da de .quartos,
   por isso ganha-lhe também nos ecrãs médios */
.quartos--tres{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){
  .quarto-topo__txt,.quarto-topo__preco,.quarto-corpo__foto,
  .quarto-corpo__info,.fotos-quarto{grid-column:1/-1;position:static}
  .quarto-topo__preco{margin-top:1.4rem}
  .quarto-corpo__info{margin-top:2rem}
}
@media(max-width:700px){
  .quartos--tres{grid-template-columns:1fr}
  .quartos--tres .quarto__img{aspect-ratio:3/2}
}
@media(max-width:560px){.fotos-quarto{grid-template-columns:1fr}}

/* o calendário do quarto: uma escolha de datas que segue para o pedido */
/* o salto de «ver as noites livres» não pode esconder as datas sob o cabeçalho */
.quarto-datas{scroll-margin-top:clamp(5.5rem,12vh,7.5rem)}
.datas-quarto{grid-column:6/span 7}
.datas-quarto .calendario{margin-top:0}
.datas-quarto__fim{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;
  gap:1rem 1.5rem}
.datas-quarto__fim .nota{margin:0;max-width:44ch}
@media(max-width:900px){.datas-quarto{grid-column:1/-1;margin-top:2rem}}

/* 20 ─ PÁGINAS DE TEXTO (privacidade) ──────────────────────────────────── */
.indice{grid-column:1/span 4;position:sticky;top:clamp(6rem,16vh,9rem);align-self:start}
.indice ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.indice a{display:flex;gap:.9rem;padding:.62rem 0;border-bottom:1px solid var(--linha);
  font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;text-decoration:none;
  color:var(--tinta-70);transition:color .25s var(--ease),padding-left .25s var(--ease-suave)}
.indice a span{color:var(--tinta-45)}
.indice a:hover{color:var(--terra);padding-left:.5rem}
.texto{grid-column:6/span 7;max-width:64ch}
.texto h2{font-size:clamp(1.4rem,2.1vw,1.9rem);line-height:1.04;letter-spacing:-.025em;
  margin:3.4rem 0 1.1rem;scroll-margin-top:7rem;display:flex;gap:.9rem;align-items:baseline}
.texto h2:first-child{margin-top:0}
.texto h2 span{font-family:var(--mono);font-size:.74rem;font-weight:400;letter-spacing:.06em;
  color:var(--terra);flex:none}
.texto p,.texto li{color:var(--tinta-70)}
.texto strong{color:var(--tinta);font-weight:520}
.texto ul{margin:0 0 1.1em;padding-left:1.15rem}
.texto li{margin-bottom:.45rem;padding-left:.2rem}
.texto li::marker{color:var(--terra)}
.texto a{text-decoration-color:var(--linha-forte);text-underline-offset:.18em;
  transition:text-decoration-color .25s var(--ease)}
.texto a:hover{text-decoration-color:var(--terra)}
/* quem mais trata os dados: nome, papel e onde */
.fichas{list-style:none!important;padding:0!important;margin:1.4rem 0 1.6rem!important;
  border-top:1px solid var(--linha)}
.fichas li{display:grid;grid-template-columns:9.5rem 1fr;gap:.3rem 1.5rem;margin:0;
  padding:.95rem 0;border-bottom:1px solid var(--linha)}
.fichas b{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.02em;
  color:var(--tinta)}
.fichas p{margin:0}
.fichas small{display:block;margin-top:.3rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.04em;color:var(--tinta-45)}
@media(max-width:900px){
  .indice{display:none}
  .texto{grid-column:1/-1}
}
@media(max-width:560px){.fichas li{grid-template-columns:1fr}}

/* 21 ─ RESERVA ─────────────────────────────────────────────────────────── */
/* quantos quartos de cada tipo: nome, preço da estadia, livres e − n + */
.escolha__ajuda{margin:-.5rem 0 0}
.escolha-quartos{display:grid;border-top:1px solid var(--linha)}
.escolha{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"nome qtd" "preco qtd" "livres qtd";
  gap:.2rem 1.5rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--linha);
}
.escolha__nome{grid-area:nome;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .8rem}
.escolha__nome b{font-family:var(--display);font-weight:560;font-size:1.08rem;letter-spacing:-.015em}
.escolha__nome span{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--tinta-45)}
.escolha__preco{grid-area:preco;margin:0;font-family:var(--mono);font-size:.76rem;color:var(--tinta-70)}
.escolha__livres{grid-area:livres;margin:0;min-height:1.1em;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;color:var(--verde)}
.escolha[data-esgotado="sim"] .escolha__livres{color:var(--terra-texto)}
.escolha[data-esgotado="sim"] .escolha__nome,
.escolha[data-esgotado="sim"] .escolha__preco{opacity:.45}
.escolha__qtd{grid-area:qtd;display:flex;align-items:center;gap:.3rem}
.escolha__qtd input{
  width:2.2rem;padding:0;border:0;background:none;text-align:center;color:var(--tinta);
  font-family:var(--display);font-size:1.3rem;font-weight:620;-moz-appearance:textfield;
}
.escolha__qtd input::-webkit-inner-spin-button,
.escolha__qtd input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.escolha__botao{
  width:2.4rem;height:2.4rem;flex:none;border-radius:50%;border:1px solid var(--linha-forte);
  background:none;cursor:pointer;display:grid;place-items:center;font-size:1.05rem;line-height:1;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.escolha__botao:hover:not(:disabled){background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.escolha__botao:disabled{opacity:.28;cursor:default}
.lotacao{margin:-.6rem 0 0;min-height:1.1em;font-family:var(--mono);font-size:.72rem;color:var(--tinta-45)}

/* pagar tudo já, ou um sinal de 50 % e o resto na chegada */
.modo-pagar{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:0;padding:0;border:0;min-width:0}
.modo-pagar__opcao{
  display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.1rem;cursor:pointer;
  border:1px solid var(--linha-forte);border-radius:var(--raio);
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.modo-pagar__opcao:hover{border-color:var(--tinta-45)}
.modo-pagar__opcao:has(input:checked){border-color:var(--tinta);background:color-mix(in srgb,var(--tinta) 4%,transparent)}
.modo-pagar__opcao input{width:1.05rem;height:1.05rem;margin:.2rem 0 0;flex:none;accent-color:var(--tinta)}
.modo-pagar__opcao b{display:block;font-family:var(--display);font-weight:560;font-size:1.02rem;letter-spacing:-.015em}
.modo-pagar__opcao b+span{display:block;margin-top:.25rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--tinta-45)}
@media(max-width:560px){.modo-pagar{grid-template-columns:1fr}}

/* a conta: o que custa, o que se paga agora e o que fica para a chegada */
.conta .lista-fina{margin-top:0}
.conta .lista-fina li span:last-child{color:var(--tinta)}
.conta__somas{border-top:0!important}
.conta__sinal span:first-child{color:var(--tinta)}
.conta__sinal span:last-child{font-family:var(--display);font-size:1.2rem;font-weight:650;letter-spacing:-.02em}

.aceito{display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;font-size:.98rem;color:var(--tinta-70)}
.aceito input{width:1.1rem;height:1.1rem;margin:.28rem 0 0;flex:none;accent-color:var(--tinta)}
.form[data-validado] .aceito input:invalid{outline:2px solid var(--terra);outline-offset:2px}

/* voltou da Stripe sem pagar */
.aviso-pagamento{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;
  margin-bottom:2.2rem;padding:1.2rem 1.4rem;border:1px solid var(--ocre);border-radius:var(--raio);
  background:color-mix(in srgb,var(--ocre) 10%,transparent);
}
.aviso-pagamento p{margin:0;max-width:44ch}