/* ==========================================================================
   Hospedagem Pedro e Maria · o que muda em cima do sistema do modelo de hospedagem
   As fotos da casa são claras (o modelo nasceu com fotos de noite): o texto branco da capa e da
   chamada final ganha um véu escuro por baixo, só onde ele fica.
   ========================================================================== */

.capa__foto::after,
.chamada__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.capa__foto::after {
  background:
    linear-gradient(180deg, rgba(20, 17, 13, 0.42) 0%, rgba(20, 17, 13, 0) 22%),
    linear-gradient(0deg, rgba(20, 17, 13, 0.8) 0%, rgba(20, 17, 13, 0.5) 50%, rgba(20, 17, 13, 0.22) 78%, rgba(20, 17, 13, 0) 96%);
}

.chamada__foto::after {
  background: linear-gradient(0deg, rgba(20, 17, 13, 0.8) 0%, rgba(20, 17, 13, 0.4) 50%, rgba(20, 17, 13, 0.12) 100%);
}

/* as notas da seção de avaliações vêm antes das falas, com respiro */
#avaliacoes .notas {
  margin-bottom: var(--e40);
}

/* Sem laranja (João, 30/09: "essa barra laranja foge do clima premium"). A marcação do sistema passa a ser
   areia-champanhe. */
:root {
  --brasa: #c9a77c;
}

/* A nota dos hóspedes era uma faixa cheia entre a capa e o resto (João, 30/09: "algo mais no estilo da header, com
   uma transição mais suave"). Virou uma pílula de vidro igual à barra do topo, apoiada no pé da foto, que entra
   devagar depois do título. A foto passa direto para o creme, sem o corte de uma faixa. */
.capa__nota {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--e20) var(--e40);
  margin-top: clamp(28px, 4vh, 44px);
  padding: 14px 32px 14px 26px;
  border-radius: var(--r-pilula);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(18, 16, 14, 0.34);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 1.1s var(--curva) 0.55s, transform 1.1s var(--curva) 0.55s;
}

.pronto .capa__nota {
  opacity: 1;
  transform: none;
}

.capa__nota p {
  margin: 0;
}

.capa__nota-num {
  display: flex;
  align-items: center;
  gap: var(--e12);
  flex: none;
  font-size: var(--t-legenda);
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.78);
}

.capa__nota-num b {
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--brasa);
}

.capa__nota-cita {
  flex: 1;
  font-size: var(--t-corpo);
  letter-spacing: -0.02em;
  text-wrap: balance;
  padding-left: var(--e40);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.capa__nota-fonte {
  flex: none;
  font-size: var(--t-legenda);
  color: rgba(255, 255, 255, 0.66);
}

/* o "Role" dividia o pé da capa com a pílula: sai */
.capa__desce {
  display: none;
}

@media (max-width: 860px) {
  .capa__nota {
    flex-wrap: wrap;
    border-radius: 24px;
    padding: 16px 20px;
    gap: var(--e12) var(--e20);
  }

  .capa__nota-cita {
    flex-basis: 100%;
    order: 3;
    padding-left: 0;
    border-left: 0;
    padding-top: var(--e12);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .capa__nota {
    background: rgba(18, 16, 14, 0.9);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capa__nota {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Linho e noite (30/09, João: "depois da capa está tudo muito branco, monocromático, pouco premium").
   Tirado do DNA de hotelaria de alto padrão (aman.com, ver _pesquisa/referencias): nada de branco nem de preto
   puros; neutros quentes em camadas (linho, areia, marfim) alternando com seções de noite, que levam o clima da
   capa página abaixo. O champanhe é o único acento; o bronze é a versão dele que passa como texto sobre o claro.
   ========================================================================== */
:root {
  --creme: #f3eee7;    /* linho: o fundo */
  --branco: #fbf8f3;   /* marfim: o que se ergue sobre o fundo */
  --tinta: #26211d;    /* carvão quente no lugar do preto */
  --seixo: #6b625a;    /* texto secundário: 5,4:1 no linho, 4,8:1 na areia */
  --bruma: #dcd3c7;
  --areia: #e8e0d4;
  --noite: #15110d;
  --cafe: #211b16;
  --bronze: #7a5b37;   /* 5,6:1 no linho, 4,9:1 na areia */
  --sombra: 0 1px 2px rgba(38, 33, 29, 0.06), 0 22px 44px -26px rgba(38, 33, 29, 0.38);
}

html {
  scrollbar-color: #b9a58b var(--creme);
  accent-color: var(--bronze);
}

::selection {
  background: rgba(201, 167, 124, 0.5);
  color: var(--noite);
}

body {
  caret-color: var(--bronze);
}

blockquote {
  margin: 0;
}

.secao {
  padding-block: clamp(72px, 7.5vw, 124px);
}

/* ---------------------------------------------------------------- fundos */

.secao--noite {
  --creme: var(--noite);
  --branco: var(--cafe);
  --tinta: #efe8de;
  --seixo: #b3a797;    /* 8,2:1 na noite */
  --bruma: rgba(239, 232, 222, 0.14);
  background-color: var(--noite);
  background-image: radial-gradient(60% 42% at 88% 0%, rgba(201, 167, 124, 0.1), transparent 72%);
  color: var(--tinta);
}

.secao--noite ::selection {
  color: var(--noite);
}

.secao--areia {
  --creme: var(--areia);
  --branco: #f8f3ec;
  background: var(--areia);
}

/* ------------------------------------------------------ o lugar: "a pé" */

.perto {
  position: absolute;
  left: clamp(12px, 1.4vw, 20px);
  bottom: clamp(12px, 1.4vw, 20px);
  z-index: 2;
  display: flex;
  padding: 12px 4px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(21, 17, 13, 0.52);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  color: #fbf8f3;
}

.perto__item {
  display: grid;
  gap: 2px;
  padding-inline: 18px;
}

.perto__item + .perto__item {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.perto__item b {
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.perto__item i {
  font-style: normal;
  font-size: var(--t-legenda);
  color: rgba(251, 248, 243, 0.74);
}

/* ------------------------------------------------------------ as suítes */

.secao--areia .chale {
  padding: 12px 12px 28px;
  border-radius: 28px;
  background: var(--branco);
  box-shadow: var(--sombra);
}

.secao--areia .chale__foto {
  border-radius: 18px;
}

.secao--areia .chale > :not(.moldura) {
  margin-inline: clamp(8px, 1.4vw, 20px);
}

.secao--areia .chale__topo {
  border-bottom-color: var(--bruma);
}

/* ------------------------------------------------------- tudo incluído */

.incluso {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5.5vw, 96px);
  align-items: start;
}

.incluso__foto {
  position: sticky;
  top: calc(var(--barra) + 36px);
  margin: 0;
}

.incluso__foto .moldura {
  aspect-ratio: 4 / 5;
}

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

.incluso__lista {
  list-style: none;
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
}

.incluso__item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;
  align-content: start;
  padding-block: 24px;
  border-top: 1px solid var(--bruma);
}

.incluso__item h3,
.incluso__item p {
  margin: 0;
  grid-column: 2;
}

.incluso__item p {
  max-width: 34ch;
}

.incluso__ico {
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 50%;
  background: var(--areia);
  color: var(--bronze);
}

/* ------------------------------------------------------------- galeria */

.galeria--solta {
  margin-top: 0;
}

/* ---------------------------------------------------------- avaliações */

.depo {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(40px, 5vw, 72px);
}

.depo figure {
  margin: 0;
}

.depo figcaption {
  font-size: var(--t-legenda);
  letter-spacing: -0.01em;
  color: var(--seixo);
}

.depo__grande {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: clamp(300px, 30vw, 420px);
  padding: clamp(32px, 4vw, 60px);
  border-radius: 28px;
  background-color: var(--noite);
  background-image: radial-gradient(70% 60% at 100% 0%, rgba(201, 167, 124, 0.18), transparent 72%);
  color: #efe8de;
  box-shadow: var(--sombra);
}

.depo__grande p {
  margin: 0;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.22;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.depo__grande figcaption {
  color: var(--brasa);
}

.depo__lado {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
}

.depo__card {
  display: grid;
  align-content: space-between;
  gap: 20px;
  padding: clamp(26px, 2.6vw, 36px);
  border-radius: 24px;
  background: var(--branco);
  box-shadow: var(--sombra);
}

.depo__card p {
  margin: 0;
  font-size: var(--t-corpo-g);
  line-height: 1.42;
  letter-spacing: -0.02em;
}

.notas--depo {
  margin-top: clamp(40px, 5vw, 64px);
}

.notas--depo dd {
  color: var(--bronze);
}

/* -------------------------------------------------------------- rodapé */

.rodape.secao--noite {
  border-top: 0;
  padding-block: clamp(56px, 6vw, 88px) var(--e28);
}

.rodape.secao--noite .rodape__pe {
  border-top-color: var(--bruma);
}

/* -------------------------------------------------------------- celular */

@media (max-width: 860px) {
  .perto {
    right: 12px;
    padding: 10px 2px;
    border-radius: 16px;
  }

  .perto__item {
    flex: 1;
    padding-inline: 12px;
  }

  .incluso,
  .depo {
    grid-template-columns: minmax(0, 1fr);
  }

  .incluso__foto {
    position: static;
  }

  .incluso__foto .moldura {
    aspect-ratio: 4 / 3;
  }

  .incluso__lista {
    grid-template-columns: minmax(0, 1fr);
  }

  .depo__grande {
    min-height: 0;
  }
}

/* títulos das seções: o sistema do modelo apertava a -0,05em; abaixo da capa, -0,04em é o piso de leitura */
.secao .titulo-g,
.secao .titulo {
  letter-spacing: -0.04em;
}

/* ==========================================================================
   Datas livres (05/10): o calendário lido do sistema de reservas da casa, dentro de "Como reservar".
   Um cartão de marfim sobre o linho, como os das suítes. Dia lotado fica riscado e apagado; a estadia escolhida
   vai de uma ponta de carvão à outra, com a areia no meio.
   ========================================================================== */

.datas {
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(20px, 3vw, 44px);
  border-radius: 28px;
  background: var(--branco);
  box-shadow: var(--sombra);
}

.datas[hidden] {
  display: none;
}

.datas__topo,
.datas__pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e20);
}

.datas__topo h3 {
  margin: 0;
}

.datas__setas {
  display: flex;
  gap: var(--e8);
}

/* uma aba por suíte: fita de pílulas que rola de lado no celular, sem barra à vista */
.datas__abas {
  display: flex;
  gap: var(--e8);
  margin-top: var(--e20);
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

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

.datas__abas[hidden] {
  display: none;
}

.datas__aba {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--bruma);
  border-radius: var(--r-pilula);
  background: none;
  font: inherit;
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color 0.25s var(--curva), color 0.25s var(--curva), border-color 0.25s var(--curva);
}

.datas__aba:hover,
.datas__aba:focus-visible {
  border-color: var(--tinta);
}

.datas__aba[aria-selected="true"] {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--branco);
}

.datas__meses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 80px);
  margin-block: clamp(24px, 3vw, 40px);
}

.datas__nome {
  margin: 0 0 var(--e16);
  font-size: var(--t-corpo);
  font-weight: 600;
  letter-spacing: -0.02em;
}

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

.datas__grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: 4px;
}

.datas__semana {
  padding-bottom: var(--e8);
  font-size: var(--t-legenda);
  text-align: center;
  color: var(--seixo);
}

.datas__dia {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pilula);
  background: none;
  font: inherit;
  font-size: var(--t-mini);
  font-weight: 500;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color 0.25s var(--curva), color 0.25s var(--curva);
}

.datas__dia:hover:not(:disabled),
.datas__dia:focus-visible:not(:disabled) {
  background: var(--areia);
}

.datas__dia:disabled {
  color: #9a9087;   /* fora do alcance: apagado, mas ainda legível como número (3:1 no marfim) */
  cursor: default;
}

.datas__dia--lotado {
  text-decoration: line-through;
}

/* hoje: um aro fino em volta do número */
.datas__dia--hoje {
  box-shadow: inset 0 0 0 1px var(--bruma);
}

/* últimas suítes: um ponto de bronze embaixo do número */
.datas__dia--pouco::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bronze);
}

.datas__dia--ponta.datas__dia--pouco::after {
  background: var(--brasa);
}

.datas__dia--meio {
  border-radius: 0;
  background: var(--areia);
}

.datas__dia--ponta,
.datas__dia--ponta:hover:not(:disabled),
.datas__dia--ponta:focus-visible:not(:disabled),
.datas__dia--ponta:disabled {
  background: var(--tinta);
  color: var(--branco);
  text-decoration: none;
}

/* com a estadia fechada, as pontas viram um disco de carvão e a faixa de areia encosta nelas, sem degrau */
.datas__dia--ini,
.datas__dia--fim {
  border-radius: 0;
}

.datas__dia--ini,
.datas__dia--ini:hover:not(:disabled),
.datas__dia--ini:focus-visible:not(:disabled),
.datas__dia--ini:disabled {
  background:
    radial-gradient(circle closest-side, var(--tinta) 97%, transparent 100%),
    linear-gradient(90deg, transparent 50%, var(--areia) 50%);
}

.datas__dia--fim,
.datas__dia--fim:hover:not(:disabled),
.datas__dia--fim:focus-visible:not(:disabled),
.datas__dia--fim:disabled {
  background:
    radial-gradient(circle closest-side, var(--tinta) 97%, transparent 100%),
    linear-gradient(90deg, var(--areia) 50%, transparent 50%);
}

.datas__pe {
  padding-top: var(--e24);
  border-top: 1px solid var(--bruma);
}

.datas__pe p {
  margin: 0;
}

.datas__resumo {
  font-size: var(--t-corpo-g);
  letter-spacing: -0.02em;
}

.datas__nota {
  margin-top: var(--e4);
}

.datas--uma .datas__ultimas {
  display: none;
}

.datas__nota i {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 5px 2px 0;
  border-radius: 50%;
  background: var(--bronze);
}

.datas__zap {
  flex: none;
}

@media (max-width: 860px) {
  .datas__meses {
    grid-template-columns: minmax(0, 1fr);
  }

  .datas__mes + .datas__mes {
    display: none;
  }

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

  .datas__zap {
    justify-content: center;
  }
}

/* ------------------------------------------------- quarto a quarto (08/10)
   Uma ficha por quarto, com as fotos tiradas dos vídeos que a casa mandou. As fotos são pequenas (480 px), por isso
   aparecem em três molduras estreitas, nunca esticadas. */

.quartos {
  margin-top: clamp(72px, 9vw, 144px);
}

.quartos__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e12) var(--e40);
  padding-bottom: var(--e20);
  border-bottom: 1px solid var(--tinta);
}

.quartos__topo .corpo {
  max-width: 44ch;
}

.quarto {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
  padding-block: clamp(36px, 5vw, 72px);
  border-bottom: 1px solid var(--bruma);
}

.quarto:nth-of-type(even) {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
}

.quarto:nth-of-type(even) .quarto__texto {
  order: 2;
}

.quarto__num {
  font-size: var(--t-legenda);
  letter-spacing: 0.18em;
  color: var(--bronze);
  margin-bottom: var(--e12);
}

.quarto__frase {
  margin-top: var(--e12);
  max-width: 38ch;
}

.quarto__lote {
  margin-top: var(--e20);
}

.quarto__fotos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.quarto__foto {
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  box-shadow: var(--sombra);
}

.quarto__foto:nth-child(2) {
  translate: 0 clamp(14px, 2.2vw, 34px);
}

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

@media (max-width: 860px) {
  .quarto,
  .quarto:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);
  }

  .quarto:nth-of-type(even) .quarto__texto {
    order: 0;
  }

  .quarto__fotos {
    padding-bottom: 24px;
  }

  .quarto__foto {
    border-radius: 14px;
  }
}

/* ----------------------------------------------- a logo da casa (08/10) */

.marca {
  flex: none;
  width: 24px;
  height: 22px;
}

.barra__marca {
  gap: 10px;
}

.rodape__marca {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rodape__marca .marca {
  width: 40px;
  height: 37px;
}

@media (max-width: 420px) {
  .barra__marca .marca {
    display: none;
  }
}

/* --------------------------------------- os sete quartos (08/10, site oficial)
   No início, uma grade de cartões; cada um leva à página do quarto (quarto-N.html), que tem a ficha, as fotos e o
   calendário só dele. */

.qgrade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px) clamp(14px, 2vw, 28px);
  margin: clamp(28px, 4vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.qcard__link {
  display: grid;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.qcard__foto {
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  margin-bottom: 10px;
  box-shadow: var(--sombra);
}

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

.qcard__link:hover .qcard__foto img,
.qcard__link:focus-visible .qcard__foto img {
  scale: 1.04;
}

.qcard--fala {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--e16);
  padding: clamp(20px, 2.2vw, 32px);
  border: 1px solid var(--bruma);
  border-radius: 18px;
}

.qcard--fala .qcard__frase {
  font-size: var(--t-corpo);
}

.qcard__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e12);
}

.qcard__topo i {
  font-style: normal;
  color: var(--bronze);
}

.qcard__frase {
  font-size: var(--t-mini);
  color: var(--seixo);
}

.qcard__ir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: var(--t-mini);
  font-weight: 500;
}

.qcard__ir .seta {
  width: 14px;
  transition: translate 0.4s ease;
}

.qcard__link:hover .qcard__ir .seta {
  translate: 4px 0;
}

/* a página do quarto */

.pq__topo {
  padding-top: calc(var(--barra) + clamp(48px, 7vw, 104px));
}

.pq__trilha {
  display: flex;
  gap: 10px;
  color: var(--seixo);
}

.pq__trilha a {
  color: inherit;
}

.pq__trilha [aria-current] {
  color: var(--tinta);
}

.quarto--pagina {
  border-bottom: 0;
  padding-bottom: 0;
  align-items: start;
}

.quarto--pagina .quarto__num {
  margin-bottom: var(--e16);
}

.quarto__nota {
  margin-top: clamp(36px, 4vw, 56px);
  color: var(--seixo);
}

.pq__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e16) var(--e28);
}

.pq .datas {
  margin-top: clamp(32px, 4vw, 56px);
}

/* sem o calendário (consulta fora do ar), fica a frase; com ele, a frase some */
.datas:not([hidden]) + .datas__reserva {
  display: none;
}

.datas__reserva {
  margin-top: var(--e28);
}

.qoutros {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--e12);
  margin-top: var(--e28);
}

.qoutro {
  display: grid;
  gap: 4px;
  padding: 18px 18px 20px;
  border-radius: 18px;
  background: var(--branco);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--sombra);
  transition: translate 0.4s ease;
}

.qoutro:hover,
.qoutro:focus-visible {
  translate: 0 -3px;
}

.qoutro b {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.qoutro span {
  font-size: var(--t-legenda);
  color: var(--seixo);
}

/* formulário de contato: monta a mensagem e abre o WhatsApp (js/contato.js) */

.contato {
  margin-top: clamp(48px, 6vw, 88px);
  padding: clamp(22px, 3vw, 40px);
  border-radius: 28px;
  background: var(--branco);
  box-shadow: var(--sombra);
}

.contato__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px var(--e28);
  padding-bottom: var(--e20);
  border-bottom: 1px solid var(--bruma);
}

.contato__topo .legenda {
  color: var(--seixo);
}

.contato__campos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e20) var(--e20);
  align-items: start;
  margin-top: var(--e24);
}

.campo {
  display: grid;
  min-width: 0;
  gap: 8px;
  font-size: var(--t-legenda);
  color: var(--seixo);
}

.campo i {
  font-style: normal;
  opacity: 0.8;
}

.campo--largo {
  grid-column: span 2;
}

.campo input,
.campo select,
.campo textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--bruma);
  border-radius: 14px;
  background: var(--creme);
  color: var(--tinta);
  font: inherit;
  font-size: 16px; /* abaixo disso o iPhone dá zoom ao focar */
}

.campo textarea {
  height: auto;
  min-height: 96px;
  resize: vertical;
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
  border-color: transparent;
}

.contato__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e16) var(--e24);
  margin-top: var(--e24);
}

.contato__erro {
  margin-right: auto;
  color: #9a3b1f;
}

@media (max-width: 1100px) {
  .qgrade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .qoutros {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .contato__campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .qgrade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qoutros {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contato__pe .pilula {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------- site em páginas (08/10)
   A barra virou abas: a da página aberta fica sublinhada. No início, a vitrine dos quartos vem logo depois da capa. */

.barra a.fantasma[aria-current="page"],
.menu__lista a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.vitrine .quartos {
  margin-top: 0;
}

.pq__topo .pq__trilha {
  margin-bottom: clamp(28px, 4vw, 56px);
}

/* ==========================================================================
   Refatoração de UX e UI (08/10/2026, noite)
   Barra com botões úteis, quartos em lista e a página do quarto com o calendário na primeira tela.
   ========================================================================== */

/* ---------------------------------------------------------------- a barra */

.barra__caixa {
  grid-template-columns: auto 1fr auto;
  padding-left: var(--e20);
}

.barra__marca {
  padding-inline: 0;
}

.barra__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 36px);
  min-width: 0;
}

.barra__dir {
  gap: var(--e12);
}

.qmenu {
  position: relative;
}

.qmenu__botao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--t-mini);
  cursor: pointer;
}

.qmenu__botao svg {
  width: 11px;
  height: 11px;
  transition: rotate 0.3s var(--curva);
}

.qmenu__botao[aria-expanded="true"] svg {
  rotate: 180deg;
}

/* o painel tem as cores dele: abre igual sobre a foto da capa e sobre o linho */
.qmenu__painel {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  translate: -50% 0;
  width: min(560px, 92vw);
  padding: 10px;
  border-radius: 24px;
  background: #fbf8f3;
  color: #26211d;
  box-shadow: 0 1px 2px rgba(38, 33, 29, 0.08), 0 30px 60px -24px rgba(38, 33, 29, 0.5);
  animation: qmenu-abre 0.28s var(--curva);
}

.qmenu__painel[hidden] {
  display: none;
}

@keyframes qmenu-abre {
  from {
    opacity: 0;
    translate: -50% -8px;
  }
}

.qmenu__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qmenu__lista a {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: baseline;
  gap: var(--e16);
  padding: 12px 14px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  font-size: var(--t-mini);
  transition: background-color 0.2s var(--curva);
}

.qmenu__lista a:hover,
.qmenu__lista a:focus-visible {
  background: #e8e0d4;
}

.qmenu__lista b {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.qmenu__lista span {
  color: #6b625a;
}

.qmenu__todos {
  display: block;
  margin-top: 6px;
  padding: 14px;
  border-top: 1px solid #dcd3c7;
  color: inherit;
  font-size: var(--t-mini);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

/* situação de hoje, lida do sistema de reservas (js/quartos.js); vazio enquanto não chega */
[data-livre] {
  font-style: normal;
  font-size: var(--t-legenda);
  white-space: nowrap;
  color: #6b625a;
}

[data-livre]:empty {
  display: none;
}

[data-livre].hoje {
  color: #3d6b47;
}

[data-livre].hoje::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  translate: 0 -1px;
}

.barra__fala {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid currentColor;
  border-radius: var(--r-pilula);
  color: inherit;
  font-size: var(--t-mini);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.3s var(--curva), color 0.3s var(--curva);
}

.barra__fala svg {
  width: 16px;
  height: 16px;
}

.barra--clara .barra__fala {
  border-color: rgba(255, 255, 255, 0.5);
}

.barra--clara .barra__fala:hover {
  background: var(--branco);
  color: #26211d;
}

.barra--pousada .barra__fala {
  border-color: var(--bruma);
}

.barra--pousada .barra__fala:hover {
  background: var(--tinta);
  color: var(--creme);
}

.so-estreito {
  display: none;
}

.menu__quartos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e8);
  margin: var(--e28) 0 0;
  padding: 0;
  list-style: none;
}

.menu__quartos a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--bruma);
  border-radius: var(--r-pilula);
  color: inherit;
  font-size: var(--t-mini);
  text-decoration: none;
}

@media (max-width: 1020px) {
  .barra__fala span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .barra__fala {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 860px) {
  .barra__nav {
    display: none;
  }

  .barra__caixa {
    grid-template-columns: 1fr auto;
  }

  .barra .barra__dir .pilula--barra {
    display: inline-flex;
    padding-inline: 16px;
  }

  .so-largo {
    display: none;
  }

  .so-estreito {
    display: inline;
  }

  .barra .gatilho {
    margin-left: 0;
  }
}

/* ------------------------------------------------------- quartos em lista */

.qlista {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
  margin-top: clamp(36px, 5vw, 72px);
}

.qlista__palco {
  position: sticky;
  top: calc(var(--barra) + 36px);
  aspect-ratio: 4 / 5;
  margin: 0;
  border-radius: 24px;
  box-shadow: var(--sombra);
}

.qlista__foto {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s var(--curva);
}

.qlista__foto.ativa {
  opacity: 1;
}

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

.qlista__linhas {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tinta);
}

.qlista__linhas--solta {
  margin-top: var(--e28);
}

.qlinha {
  display: grid;
  grid-template-columns: clamp(118px, 12vw, 168px) minmax(0, 1fr) clamp(150px, 14vw, 190px) 20px;
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  padding: clamp(18px, 2vw, 26px) clamp(8px, 1vw, 16px);
  border-bottom: 1px solid var(--bruma);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s var(--curva), padding 0.3s var(--curva);
}

.qlinha:hover,
.qlinha:focus-visible {
  background: var(--branco);
}

.qlinha__foto {
  display: none;
}

.qlinha__nome {
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.qlinha__desc {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.qlinha__desc b {
  font-weight: 500;
  letter-spacing: -0.015em;
}

.qlinha__desc small {
  font-size: var(--t-legenda);
  color: var(--seixo);
}

.qlinha__livre {
  justify-self: end;
  text-align: right;
}

.qlinha__ir {
  display: grid;
  place-items: center;
}

.qlinha__ir span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.qlinha__ir .seta {
  width: 16px;
  transition: translate 0.35s var(--curva);
}

.qlinha:hover .seta,
.qlinha:focus-visible .seta {
  translate: 5px 0;
}

@media (max-width: 860px) {
  .qlista {
    grid-template-columns: minmax(0, 1fr);
  }

  .qlista__palco {
    display: none;
  }

  .qlinha {
    grid-template-columns: 64px minmax(0, 1fr) 16px;
    grid-template-areas: "foto nome ir" "foto desc ir" "foto livre ir";
    row-gap: 3px;
    padding-inline: 0;
  }

  .qlinha__foto {
    display: block;
    grid-area: foto;
    width: 64px;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
  }

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

  .qlinha__nome {
    grid-area: nome;
    align-self: end;
  }

  .qlinha__desc {
    grid-area: desc;
  }

  .qlinha__livre {
    grid-area: livre;
    align-self: start;
    justify-self: start;
  }

  .qlinha__ir {
    grid-area: ir;
  }
}

/* --------------------------------------------- a página de um quarto
   Primeira tela: à esquerda o quarto, à direita o calendário dele. Nada de rolar para ver as datas. */

.pq__tela {
  padding-top: calc(var(--barra) + clamp(28px, 4.5vh, 56px));
  padding-bottom: clamp(40px, 6vw, 88px);
}

.pq__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.78fr);
  grid-template-areas: "nome datas" "ficha datas";
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 88px);
  row-gap: clamp(18px, 2.6vh, 32px);
  align-items: start;
}

.pq__nome {
  grid-area: nome;
}

.pq__datas {
  grid-area: datas;
  position: sticky;
  top: calc(var(--barra) + 28px);
}

.pq__ficha {
  grid-area: ficha;
}

.pq__troca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: clamp(14px, 2.4vh, 26px);
  font-size: var(--t-legenda);
  color: var(--seixo);
}

.pq__troca span {
  margin-right: 6px;
}

.pq__troca a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--bruma);
  border-radius: 50%;
  color: var(--tinta);
  font-size: var(--t-mini);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.25s var(--curva), color 0.25s var(--curva), border-color 0.25s var(--curva);
}

.pq__troca a:hover,
.pq__troca a:focus-visible {
  border-color: var(--tinta);
}

.pq__troca a[aria-current] {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--creme);
}

.pq__frase {
  margin-top: var(--e12);
  max-width: 42ch;
}

.pq__ficha .quarto__fotos {
  max-width: 560px;
  padding-bottom: clamp(14px, 2.2vw, 34px);
}

.pq__ficha .quarto__nota {
  margin-top: 0;
}

.pq__fatos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 44px);
  margin: clamp(18px, 2.4vh, 28px) 0 0;
  max-width: 620px;
}

.pq__fatos div {
  display: grid;
  gap: 2px;
  padding-block: 12px;
  border-top: 1px solid var(--bruma);
  font-size: var(--t-mini);
}

.pq__fatos dt {
  font-size: var(--t-legenda);
  color: var(--seixo);
}

.pq__fatos dd {
  margin: 0;
}

/* o calendário compacto: um mês só, células menores, tudo num cartão que cabe na primeira tela */
.pq .datas--compacta {
  margin-top: 0;
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: 24px;
}

.datas--compacta .datas__meses {
  grid-template-columns: minmax(0, 1fr);
  margin-block: 14px 12px;
}

.datas--compacta .datas__mes:nth-child(2) {
  display: none;
}

.datas--compacta .datas__nome {
  margin-bottom: 8px;
}

.datas--compacta .datas__grade {
  row-gap: 2px;
}

.datas--compacta .datas__semana {
  padding-bottom: 4px;
}

.datas--compacta .datas__pe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--bruma);
}

.datas--compacta .datas__resumo {
  margin: 0;
  min-height: 2.6em;
  font-size: var(--t-mini);
}

.datas--compacta .datas__zap {
  justify-content: center;
  width: 100%;
}

@media (min-width: 861px) {
  .datas--compacta .datas__dia {
    min-height: clamp(30px, 5.2vh, 42px);
  }

  .datas--compacta .redonda {
    width: 36px;
    height: 36px;
  }
}

/* sem o calendário (consulta fora do ar), o cartão vira um convite ao WhatsApp */
.pq__datas .datas__reserva {
  display: grid;
  gap: var(--e16);
  justify-items: start;
  margin: 0;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: 24px;
  background: var(--branco);
  box-shadow: var(--sombra);
}

.pq__datas .datas:not([hidden]) + .datas__reserva {
  display: none;
}

.pq__notas {
  margin-top: 0;
}

@media (max-width: 860px) {
  .pq__grade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nome" "datas" "ficha";
  }

  .pq__datas {
    position: static;
  }

  .pq__troca {
    gap: 5px;
  }

  .pq__troca span {
    display: none;
  }

  .pq__troca a {
    width: 40px;
    height: 40px;
  }

  .pq__fatos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qmenu__painel {
    animation: none;
  }

  .qlista__foto {
    transition: none;
  }
}

/* ------------------------------------------------ a busca por datas da capa
   Fica no pé da capa, no mesmo vidro da barra (era ali a pílula da nota). Chegada, saída e um botão: a resposta aparece
   na lista de quartos logo abaixo. A nota do Booking continua, menor, dentro da própria busca. */

.busca {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0;
  padding: 8px 8px 8px 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 28px;
  background: rgba(18, 16, 14, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  color: #fbf8f3;
  color-scheme: dark;
}

.busca__campo {
  display: grid;
  gap: 2px;
  padding: 6px clamp(16px, 2vw, 28px);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--t-legenda);
  color: rgba(251, 248, 243, 0.74);
  cursor: pointer;
}

.busca__campo input {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: #fbf8f3;
  font: inherit;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
}

.busca__campo input:focus-visible {
  outline: 2px solid #c9a77c;
  outline-offset: 6px;
  border-radius: 4px;
}

.busca__nota {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-inline: clamp(16px, 2vw, 28px);
  font-size: var(--t-legenda);
  line-height: 1.25;
  color: rgba(251, 248, 243, 0.74);
}

.busca__nota b {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.05em;
  color: #c9a77c;
}

.busca__botao {
  min-height: 52px;
  padding-inline: clamp(20px, 2.2vw, 32px);
  border: 0;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.busca__erro {
  grid-column: 1 / -1;
  margin: 8px 0 2px clamp(16px, 2vw, 28px);
  font-size: var(--t-mini);
  color: #ffd9c2;
}

.busca__erro[hidden] {
  display: none;
}

/* o resultado da busca, em cima da lista */
.qlista__resultado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px var(--e24);
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 16px clamp(16px, 2vw, 24px);
  border-radius: 18px;
  background: var(--branco);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.qlista__resultado[hidden] {
  display: none;
}

.qlista__resultado + .qlista {
  margin-top: clamp(20px, 3vw, 36px);
}

.qlista__resultado button {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-mini);
  font-weight: 400;
  cursor: pointer;
}

.qlinha--ocupada .qlinha__nome,
.qlinha--ocupada .qlinha__desc {
  opacity: 0.45;
}

[data-livre].ocupado {
  color: #8a5a3c;
}

@media (max-width: 860px) {
  .busca {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 0;
    padding: 10px;
    border-radius: 22px;
  }

  .busca__campo {
    padding: 4px 10px;
  }

  .busca__campo:nth-of-type(2) {
    border-right: 0;
  }

  .busca__nota {
    display: none;
  }

  .busca__botao {
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 48px;
  }
}

/* ==========================================================================
   A voz da marca nos títulos (08/10/2026, noite)
   A logo da casa assina "Suíte privativa e clima de casa" numa serifada itálica de alto contraste. Os títulos do site
   passam a falar nessa mesma voz (Playfair Display, hospedada aqui); o texto corrido e os números seguem em DM Sans.
   A frase da capa é a própria assinatura da logo, por isso vem em itálico, como lá.
   ========================================================================== */

@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/playfair-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/playfair-italico-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  --serifa: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

.display,
.titulo-g,
.titulo,
.qlinha__nome,
.voz-grande {
  font-family: var(--serifa);
  font-weight: 500;
  letter-spacing: -0.022em;
  font-variant-numeric: lining-nums;   /* "Quarto 3" com o número na altura das letras */
}

.display {
  font-style: italic;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.titulo-g {
  line-height: 1.06;
}

.titulo {
  font-weight: 400;
}

.qlinha__nome {
  font-size: clamp(23px, 2.2vw, 32px);
  letter-spacing: -0.02em;
}

/* a citação grande das avaliações é fala de hóspede: itálico, como a assinatura */
.depo__grande blockquote,
.depo__grande > p:first-of-type {
  font-family: var(--serifa);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* --------------------------------------- o calendário que abre da busca (08/10)
   A seção de reserva do fim da página saiu; o calendário da casa abre por cima da capa, a partir dos campos da busca e do
   "Ver datas livres" da barra. No celular ocupa a tela, de baixo para cima. */

button.busca__campo {
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  background: none;
  font: inherit;
  font-size: var(--t-legenda);
  text-align: left;
  justify-items: start;
}

.busca__campo b {
  color: #fbf8f3;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 30px;
}

button.busca__campo:hover b {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

button.busca__campo:focus-visible {
  outline: 2px solid #c9a77c;
  outline-offset: -4px;
  border-radius: 20px;
}

.busca__painel {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
  color: #26211d;
  color-scheme: light;
}

.busca__painel[hidden] {
  display: none;
}

.busca__fundo {
  position: absolute;
  inset: 0;
  background: rgba(21, 17, 13, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: painel-fundo 0.3s ease;
}

.busca__painel .datas--busca {
  position: relative;
  width: min(880px, 100%);
  max-height: 100%;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(18px, 2.4vw, 32px);
  animation: painel-sobe 0.38s var(--curva);
}

@keyframes painel-fundo {
  from {
    opacity: 0;
  }
}

@keyframes painel-sobe {
  from {
    opacity: 0;
    translate: 0 18px;
  }
}

.datas--busca .datas__meses {
  margin-block: clamp(14px, 2.4vh, 28px) clamp(10px, 2vh, 22px);
}

.datas--busca .datas__pe {
  flex-wrap: wrap;
  padding-top: var(--e16);
  border-top: 1px solid var(--bruma);
}

.datas--busca .datas__resumo {
  margin: 0 0 4px;
  font-weight: 500;
}

.busca__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e12) var(--e24);
}

.busca__acoes .pilula {
  border: 0;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

@media (min-width: 861px) {
  .datas--busca .datas__dia {
    min-height: clamp(32px, 5.4vh, 44px);
  }
}

@media (max-width: 860px) {
  .busca__painel {
    place-items: end stretch;
    padding: 0;
  }

  .busca__painel .datas--busca {
    width: 100%;
    max-height: 92svh;
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .busca__acoes {
    width: 100%;
    justify-content: space-between;
  }

  button.busca__campo {
    border-right: 1px solid rgba(255, 255, 255, 0.18);
  }

  button.busca__campo:nth-of-type(2) {
    border-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .busca__fundo,
  .busca__painel .datas--busca {
    animation: none;
  }
}

/* ------------------------------------- a página do quarto, completa (08/10)
   Depois da primeira tela (o quarto e o calendário), a página segue como a de um anúncio bem feito: o quarto por dentro,
   o que vem com a diária, onde fica e as avaliações. */

.pq__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(12px, 2vh, 20px) 0 0;
  padding: 0;
  list-style: none;
}

.pq__selos li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--bruma);
  border-radius: var(--r-pilula);
  font-size: var(--t-legenda);
  color: var(--tinta);
}

.pq__selos .pq__selo-livre.hoje {
  border-color: transparent;
  background: #e3ecdf;
  color: #2f5a39;
}

.pq__ficha .quarto__fotos {
  max-width: 640px;
}

.pq__dentro {
  align-items: start;
}

.pq__dentro .incluso__foto .moldura {
  aspect-ratio: 4 / 5;
}

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

.pq__dentro .pq__notas {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(28px, 4vw, 48px);
}

@media (max-width: 860px) {
  .busca__acoes .pilula {
    flex: 1;
    justify-content: center;
  }
}

/* ------------------------------------ acertos do teste no motor do Safari (08/10)
   No iPhone a área útil é mais baixa (664 px num iPhone 13): o calendário do quarto não cabia inteiro na primeira tela e o
   botão do calendário da capa quebrava em duas linhas. */

.busca__acoes .pilula {
  white-space: nowrap;
}

@media (max-width: 860px) {
  .busca__acoes {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 14px;
  }

  .busca__acoes .datas__zap {
    align-self: center;
  }

  .pq__tela {
    padding-top: calc(var(--barra) + 22px);
  }

  .pq__troca {
    margin-bottom: 10px;
  }

  /* a frase volta logo abaixo, em "O Quarto N por dentro"; aqui ela empurrava o calendário para fora da tela */
  .pq__frase {
    display: none;
  }

  .pq__selos {
    margin-top: 8px;
  }

  .pq__grade {
    row-gap: 14px;
  }

  .pq .datas--compacta {
    padding: 14px 16px 16px;
  }

  .datas--compacta .datas__topo .redonda {
    width: 38px;
    height: 38px;
  }

  .datas--compacta .datas__meses {
    margin-block: 8px 6px;
  }

  .datas--compacta .datas__nome {
    margin-bottom: 4px;
  }

  .datas--compacta .datas__grade {
    row-gap: 0;
  }

  .datas--compacta .datas__dia {
    min-height: 40px;
  }

  .datas--compacta .datas__pe {
    gap: 8px;
    padding-top: 10px;
  }

  .datas--compacta .datas__resumo {
    min-height: 0;
  }

  .datas--compacta .datas__zap {
    min-height: 46px;
  }
}

/* ==========================================================================
   Formato de site de reserva (08/10/2026, noite)
   João: "muito simples a disposição das fotos, tamanho delas, o calendário, morto, sem efeitos... faça algo já conhecido em
   sites de reservas". A página do quarto ganha mosaico de fotos com galeria, cartão de reserva fixo e vivo, e conteúdo só
   do quarto; no início, os quartos viram resultados com foto grande.
   ========================================================================== */

/* ------------------------------------------------ resultados (os quartos) */

ol.qlista {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(28px, 4vw, 56px);
  border-top: 0;
}

.qres {
  display: grid;
  grid-template-columns: clamp(220px, 26vw, 340px) minmax(0, 1fr) auto;
  gap: clamp(18px, 2.4vw, 36px);
  align-items: stretch;
  padding: 12px;
  border-radius: 26px;
  background: var(--branco);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(38, 33, 29, 0.05);
  transition: box-shadow 0.45s var(--curva), translate 0.45s var(--curva), opacity 0.4s var(--curva);
}

.qres:hover,
.qres:focus-visible {
  translate: 0 -3px;
  box-shadow: var(--sombra);
}

.qres__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
}

.qres__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.1s var(--curva);
}

.qres:hover .qres__foto img,
.qres:focus-visible .qres__foto img {
  scale: 1.05;
}

.qres__conta {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: var(--r-pilula);
  background: rgba(21, 17, 13, 0.62);
  color: #fbf8f3;
  font-size: var(--t-legenda);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.qres__texto {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  padding-block: 8px;
}

.qres__onde {
  font-size: var(--t-legenda);
  color: var(--bronze);
}

.qres__nome {
  font-family: var(--serifa);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: lining-nums;
}

.qres__desc {
  max-width: 46ch;
  color: var(--seixo);
}

.qres__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.qres__selos i {
  padding: 5px 12px;
  border: 1px solid var(--bruma);
  border-radius: var(--r-pilula);
  font-style: normal;
  font-size: var(--t-legenda);
}

.qres__lado {
  display: grid;
  align-content: space-between;
  justify-items: end;
  gap: var(--e16);
  padding: 10px 10px 10px 0;
}

.qres__ir {
  white-space: nowrap;
}

.qres--ocupada {
  opacity: 0.55;
}

.qres--ocupada .qres__ir {
  background: none;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--bruma);
}

/* a tira "os outros quartos": os mesmos resultados, em cartões que correm de lado */
ol.qtira {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  margin: clamp(24px, 3vw, 40px) calc(var(--margem) * -1) 0;
  padding: 6px var(--margem) 18px;
  border-top: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

ol.qtira::-webkit-scrollbar {
  display: none;
}

.qtira > li {
  flex: 0 0 clamp(250px, 24vw, 320px);
  scroll-snap-align: start;
}

.qtira .qres {
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  gap: 12px;
}

.qtira .qres__desc,
.qtira .qres__selos,
.qtira .qres__ir {
  display: none;
}

.qtira .qres__texto,
.qtira .qres__lado {
  padding: 0 8px 8px;
  justify-items: start;
}

.qtira .qres__nome {
  font-size: 26px;
}

@media (max-width: 860px) {
  .qres {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .qres__texto {
    padding: 0 8px;
  }

  .qres__lado {
    grid-auto-flow: column;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 8px;
  }
}

/* ------------------------------------------------- a página do quarto */

.pq__pagina {
  padding-top: calc(var(--barra) + clamp(26px, 4vh, 44px));
  padding-bottom: clamp(48px, 7vw, 104px);
}

.pq__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px var(--e28);
  margin-bottom: clamp(14px, 2.2vh, 24px);
}

.pq__cabeca .pq__troca {
  margin: 0;
}

.pq__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 8px 0 0;
  font-size: var(--t-mini);
  color: var(--seixo);
}

.pq__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 10px 3px;
  border-radius: 50%;
  background: var(--bruma);
}

.pq__meta a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.pq__meta-livre:empty {
  display: none;
}

.pq__meta-livre.hoje::before {
  display: none;
}

.pq__meta-livre.hoje {
  margin-left: 12px;
  padding: 3px 10px;
  border-radius: var(--r-pilula);
  background: #e3ecdf;
  color: #2f5a39;
}

.pq__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(330px, 30vw, 400px);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
}

.pq__corpo .pq__datas {
  grid-area: auto;
  position: sticky;
  top: calc(var(--barra) + 24px);
}

/* o mosaico: uma foto grande e as outras ao lado; clique abre a galeria */
.mosaico {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  height: clamp(300px, calc(100svh - var(--barra) - 190px), 560px);
  border-radius: 26px;
  overflow: hidden;
}

.mosaico__foto {
  position: relative;
  min-height: 0;
  padding: 0;
  border: 0;
  background: var(--areia);
  overflow: hidden;
  cursor: zoom-in;
}

.mosaico__foto:first-child {
  grid-row: 1 / -1;
}

.mosaico--3 .mosaico__foto {
  grid-row: 1 / -1;
}

.mosaico--4 .mosaico__foto:nth-child(4) {
  grid-column: 2 / -1;
}

.mosaico__foto picture,
.mosaico__foto img {
  display: block;
  width: 100%;
  height: 100%;
}

.mosaico__foto img {
  object-fit: cover;
  transition: scale 1.2s var(--curva), filter 0.5s var(--curva);
}

.mosaico__foto:hover img,
.mosaico__foto:focus-visible img {
  scale: 1.06;
}

/* ao passar o mouse, as outras fotos recuam um pouco: o olho vai para a que está em foco */
.mosaico:hover .mosaico__foto:not(:hover) img {
  filter: brightness(0.82);
}

.mosaico__foto:focus-visible {
  outline: 3px solid var(--bronze);
  outline-offset: -3px;
}

.mosaico__todas {
  position: absolute;
  right: 14px;
  bottom: 14px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pilula);
  background: rgba(251, 248, 243, 0.94);
  color: #26211d;
  font: inherit;
  font-size: var(--t-mini);
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(21, 17, 13, 0.5);
  transition: translate 0.3s var(--curva);
}

.mosaico__todas:hover {
  translate: 0 -2px;
}

.pq__aviso {
  margin: 10px 0 0;
  color: var(--seixo);
}

.pq__bloco {
  padding-block: clamp(26px, 3.4vw, 44px);
  border-bottom: 1px solid var(--bruma);
}

.pq__bloco:last-child {
  border-bottom: 0;
}

.pq__bloco .titulo {
  max-width: 26ch;
}

.pq__bloco .titulo-p {
  margin-bottom: var(--e20);
}

.pq__bloco .corpo {
  max-width: 58ch;
  margin-bottom: var(--e16);
}

.pq__oferece {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(20px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pq__oferece li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.pq__ico {
  width: 24px;
  height: 24px;
  color: var(--bronze);
}

.pq__oferece b {
  display: block;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.pq__oferece small {
  display: block;
  font-size: var(--t-legenda);
  color: var(--seixo);
}

.pq__oferece--saber {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --------------------------------------------- o cartão de reserva, vivo */

.pq .reserva {
  padding: clamp(16px, 1.6vw, 22px);
  border-radius: 26px;
  box-shadow: 0 1px 2px rgba(38, 33, 29, 0.06), 0 34px 60px -34px rgba(38, 33, 29, 0.5);
}

.reserva__puxador,
.reserva__fechar {
  display: none;
}

.reserva__caixas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--bruma);
  border-radius: 16px;
  overflow: hidden;
}

.reserva__caixas p {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 9px 14px;
  transition: background-color 0.4s var(--curva);
}

.reserva__caixas p + p {
  border-left: 1px solid var(--bruma);
}

.reserva__caixas span {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--seixo);
}

.reserva__caixas b {
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--seixo);
}

.reserva__caixas b.cheia {
  color: var(--tinta);
  animation: reserva-entra 0.45s var(--curva);
}

/* a caixa que espera o próximo toque fica acesa */
.reserva__caixas p.vez {
  background: var(--areia);
}

@keyframes reserva-entra {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}

.reserva .datas__topo {
  margin-top: 14px;
}

.reserva .datas__topo h2 {
  margin: 0;
  font-size: var(--t-mini);
  font-weight: 500;
  color: var(--seixo);
}

.reserva__nota {
  margin: 0;
  text-align: center;
  color: var(--seixo);
}

/* dias: toque com resposta, faixa que acompanha o mouse, mês que desliza */
.datas__dia {
  transition: background-color 0.2s var(--curva), color 0.2s var(--curva), scale 0.2s var(--curva);
}

.datas__dia:active:not(:disabled) {
  scale: 0.9;
}

.datas__dia--ponta {
  animation: dia-marca 0.38s var(--curva);
}

@keyframes dia-marca {
  from {
    scale: 0.6;
  }
}

.datas__dia--previa {
  border-radius: 0;
  background: var(--areia);
}

.datas__dia--previa-fim {
  border-radius: 0 var(--r-pilula) var(--r-pilula) 0;
  background: var(--areia);
  box-shadow: inset 0 0 0 1px var(--tinta);
}

.datas__meses.vai .datas__mes {
  animation: mes-vai 0.36s var(--curva);
}

.datas__meses.volta .datas__mes {
  animation: mes-volta 0.36s var(--curva);
}

@keyframes mes-vai {
  from {
    opacity: 0;
    translate: 22px 0;
  }
}

@keyframes mes-volta {
  from {
    opacity: 0;
    translate: -22px 0;
  }
}

/* o botão só fica cheio quando a estadia está marcada: antes disso ele convida, não manda */
.reserva .datas__zap {
  background: none;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta);
  transition: background-color 0.4s var(--curva), color 0.4s var(--curva), box-shadow 0.4s var(--curva);
}

.reserva.datas--pronta .datas__zap {
  background: var(--tinta);
  color: var(--creme);
  box-shadow: 0 14px 26px -14px rgba(38, 33, 29, 0.7);
  animation: reserva-pronta 0.6s var(--curva);
}

@keyframes reserva-pronta {
  40% {
    scale: 1.035;
  }
}

.reserva-barra {
  display: none;
}

/* ------------------------------------------------------ galeria em tela cheia */

.galeria-tela {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(21, 17, 13, 0.94);
  color: #fbf8f3;
  animation: painel-fundo 0.3s ease;
}

.galeria-tela[hidden] {
  display: none;
}

.galeria-tela__palco {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: 0;
  max-height: 100%;
}

.galeria-tela__palco img {
  max-width: min(92vw, 1100px);
  max-height: calc(100svh - 120px);
  border-radius: 18px;
  object-fit: contain;
  animation: galeria-troca 0.4s var(--curva);
}

@keyframes galeria-troca {
  from {
    opacity: 0;
    scale: 0.97;
  }
}

.galeria-tela figcaption {
  font-size: var(--t-mini);
  color: rgba(251, 248, 243, 0.78);
  text-align: center;
}

.galeria-tela__fechar,
.galeria-tela__seta {
  position: absolute;
  z-index: 1;
}

.galeria-tela__fechar {
  top: clamp(12px, 2vw, 28px);
  right: clamp(12px, 2vw, 28px);
}

.galeria-tela__seta {
  top: 50%;
  translate: 0 -50%;
}

.galeria-tela__seta--ant {
  left: clamp(8px, 2vw, 28px);
}

.galeria-tela__seta--prox {
  right: clamp(8px, 2vw, 28px);
}

.pq__mais {
  overflow: hidden;
}

/* ---------------------------------------------------------- no celular */

@media (max-width: 860px) {
  .pq__pagina {
    padding-top: calc(var(--barra) + 20px);
  }

  .pq__cabeca {
    flex-direction: column-reverse;
    align-items: start;
  }

  .pq__corpo {
    grid-template-columns: minmax(0, 1fr);
  }

  /* as fotos viram um carrossel que corre com o dedo, de ponta a ponta da tela */
  .mosaico {
    display: flex;
    gap: 8px;
    height: auto;
    margin-inline: calc(var(--margem) * -1);
    padding-inline: var(--margem);
    border-radius: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

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

  .mosaico__foto {
    flex: 0 0 82%;
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    scroll-snap-align: center;
  }

  .mosaico__todas {
    position: sticky;
    right: 12px;
    bottom: auto;
    align-self: end;
    flex: none;
    margin: 0 0 12px -150px;
  }

  .pq__oferece,
  .pq__oferece--saber {
    grid-template-columns: minmax(0, 1fr);
  }

  /* a reserva: barra fixa no pé e o calendário numa folha que sobe */
  .reserva-barra {
    position: fixed;
    inset: auto 0 0;
    z-index: 58;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e16);
    padding: 10px var(--margem) calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--bruma);
    background: color-mix(in srgb, var(--branco) 94%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .reserva-barra p {
    display: grid;
    gap: 1px;
    margin: 0;
    font-size: var(--t-mini);
  }

  .reserva-barra b {
    font-weight: 600;
  }

  .reserva-barra .pilula {
    border: 0;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
  }

  .pq main {
    padding-bottom: 76px;
  }

  .pq__corpo .pq__datas {
    position: fixed;
    inset: 0;
    z-index: 85;
    top: 0;
    display: grid;
    align-items: end;
    visibility: hidden;
    background: rgba(21, 17, 13, 0);
    transition: background-color 0.35s ease, visibility 0s linear 0.4s;
  }

  .pq__corpo .pq__datas.aberta {
    visibility: visible;
    background: rgba(21, 17, 13, 0.6);
    transition-delay: 0s;
  }

  .pq__corpo .pq__datas > * {
    translate: 0 105%;
    transition: translate 0.42s var(--curva);
    border-radius: 26px 26px 0 0;
    max-height: 92svh;
    overflow-y: auto;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .pq__corpo .pq__datas.aberta > * {
    translate: 0 0;
  }

  .reserva__puxador {
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 4px;
    background: var(--bruma);
  }

  .reserva__caixas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    border: 0;
    gap: 8px;
    overflow: visible;
  }

  .reserva__caixas p {
    border: 1px solid var(--bruma);
    border-radius: 14px;
  }

  .reserva__fechar {
    display: grid;
    align-self: center;
  }

  .datas--compacta.reserva .datas__dia {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .datas__dia--ponta,
  .datas__meses .datas__mes,
  .reserva.datas--pronta .datas__zap,
  .reserva__caixas b.cheia,
  .galeria-tela,
  .galeria-tela__palco img {
    animation: none;
  }
}

/* acertos da primeira conferência do formato de reserva (08/10) */

/* a lista de resultados é uma coluna só (a regra antiga da .qlista tinha duas, para a foto ao lado) */
ol.qlista {
  grid-template-columns: minmax(0, 1fr);
}

.pq__cabeca .titulo-g {
  font-size: clamp(34px, 3.6vw, 52px);
}

.reserva .datas__topo {
  margin-top: 10px;
}

.reserva .datas__resumo {
  min-height: 0;
}

.reserva .datas__pe {
  gap: 10px;
  padding-top: 12px;
}

/* em tela baixa (o notebook do João tem 633 px úteis) o cartão inteiro, com o botão, cabe sem rolar */
@media (min-width: 861px) and (max-height: 780px) {
  .pq__pagina {
    padding-top: calc(var(--barra) + 20px);
  }

  .pq__cabeca {
    margin-bottom: 12px;
  }

  .pq__corpo .pq__datas {
    top: calc(var(--barra) + 18px);
  }

  .pq .reserva {
    padding: 14px 16px;
  }

  .reserva__caixas p {
    padding-block: 6px;
  }

  .reserva .datas__topo {
    margin-top: 6px;
  }

  .reserva .redonda {
    width: 32px;
    height: 32px;
  }

  .datas--compacta.reserva .datas__meses {
    margin-block: 4px 6px;
  }

  .datas--compacta.reserva .datas__dia {
    min-height: clamp(26px, 4.6vh, 36px);
  }

  .reserva__nota {
    display: none;
  }

  .reserva .datas__zap {
    min-height: 44px;
  }

  .mosaico {
    height: calc(100svh - var(--barra) - 178px);
  }
}

/* celular: o título encosta nas fotos (a situação de hoje já está na barra de reserva do pé) */
@media (max-width: 860px) {
  .pq__cabeca {
    gap: 10px;
    margin-bottom: 14px;
  }

  .pq__meta-livre {
    display: none;
  }
}

/* o modelo de hospedagem já tinha uma classe .mosaico, com respiro em cima: aqui o mosaico encosta no título */
.mosaico {
  margin-top: 0;
}

/* ------------------------------------- quatro opções em vez de sete (08/10)
   João: "essa lista toda dos 7 quartos, como podemos melhorar isso?". As quatro suítes dos containers são iguais e viraram
   uma opção só, com as unidades dentro; e a lista virou uma grade de duas colunas, que cabe em pouco mais de uma tela. */

ol.qlista {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

ol.qlista > li {
  display: grid;
}

.qlista .qres {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 0;
  padding: 12px 12px 18px;
}

.qlista .qres__foto {
  aspect-ratio: 16 / 9;
  display: block;
}

.qlista .qres__texto {
  align-content: start;
  padding: 18px 10px 0;
}

.qlista .qres__lado {
  grid-auto-flow: column;
  align-items: center;
  justify-content: space-between;
  padding: 18px 10px 0;
}

.qres--grupo:hover,
.qres--grupo:focus-within {
  translate: 0 -3px;
  box-shadow: var(--sombra);
}

.qres--grupo:hover .qres__foto img {
  scale: 1.05;
}

/* as unidades do grupo: cada suíte com a situação dela, levando à página própria */
.qres__unidades {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 18px 10px 0;
  list-style: none;
}

.qres__unidades a {
  display: grid;
  gap: 1px;
  min-height: 52px;
  align-content: center;
  padding: 8px 14px;
  border: 1px solid var(--bruma);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.25s var(--curva), background-color 0.25s var(--curva);
}

.qres__unidades a:hover,
.qres__unidades a:focus-visible {
  border-color: var(--tinta);
  background: var(--creme);
}

.qres__unidades b {
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.qres__unidades a:has(.ocupado) {
  opacity: 0.55;
}

@media (max-width: 860px) {
  ol.qlista {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------ auditoria de UX do início (08/10)
   No celular a linha do dia eram quatro blocos altos, um embaixo do outro (uns 2.500 px de rolagem): viraram cartões que
   correm de lado, como as fotos do quarto. */
@media (max-width: 860px) {
  .diaria .trilho {
    display: none;
  }

  .momentos {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--margem) * -1);
    padding: 0 var(--margem) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

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

  .momentos .momento {
    flex: 0 0 84%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 16px;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
  }

  .momentos .momento__foto {
    aspect-ratio: 4 / 3;
    width: 100%;
    margin: 0;
  }

  .momentos .momento__texto {
    padding: 0;
  }
}

/* sem o trilho, a linha do dia ocupa a largura toda no celular (o grid de duas colunas espremia os cartões) */
@media (max-width: 860px) {
  .diaria {
    display: block;
  }

  .momentos {
    min-height: 0;
  }
}

@media (max-width: 860px) {
  .momentos {
    scroll-padding-inline: var(--margem);
  }

  .momentos .momento:first-child {
    margin-left: var(--margem);
  }

  .momentos .momento:last-child {
    margin-right: var(--margem);
  }
}