/* =========================================================================
   Casa da Floresta Imbassai
   Folha unica. Sem framework, sem build. Ordem: base, tokens, componentes.
   ========================================================================= */

/* ---------- fontes ---------- */
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant-var.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/cormorant-var-italic.woff2') format('woff2');
  font-weight: 300 600; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* ---------- tokens ---------- */
:root {
  /* a paleta sai das proprias fotos: madeira, mata, telha e a luz das jacuzzis */
  --noite:  #0a0d0a;
  --casca:  #11160f;
  --mata:   #1a2318;
  --musgo:  #2e3b2b;
  --pedra:  #6d7768;
  --areia:  #c6bda9;
  --osso:   #efe9dc;
  --luz:    #fbf8f1;
  --brasa:  #c0894f;
  --brasa-claro: #dcb384;

  --tinta: var(--osso);
  --fundo: var(--noite);

  --serif: 'Cormorant', 'Iowan Old Style', Garamond, Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --largura: 1560px;
  --texto: 62ch;

  /* curvas: tudo no site usa uma dessas tres */
  --saida: cubic-bezier(.22, 1, .36, 1);
  --suave: cubic-bezier(.65, 0, .35, 1);
  --lento: 1.1s;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* o cabecalho fixo nao pode cobrir o alvo das ancoras */
  scroll-padding-top: 5rem;
}
body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--mata); }
/* `contents` tira o <picture> da arvore de caixas: sem isso o `height: 100%`
   do <img> tenta resolver contra o <picture> (altura auto), nao resolve, e a
   foto de fundo fica com a altura natural em vez de preencher a secao. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
::selection { background: var(--brasa); color: var(--noite); }
/* qualquer `display` declarado depois venceria o `hidden` do navegador */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--brasa-claro);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- tipografia ---------- */
.display, h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.015em;
  text-wrap: balance;
}
/* a Cormorant entrega algarismos antigos por padrao, e o "1" dela vira um risco
   parecido com "I". Em numero solto ("1 quarto", "4,95") isso confunde. */
.numero, .ficha b, .distancias b, .selo b {
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1, 'onum' 0;
}
h1 { font-size: clamp(3.4rem, 11.5vw, 10.5rem); }
h2 { font-size: clamp(2.4rem, 6vw, 5.25rem); }
h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.05; }
em, .italico { font-style: italic; }

.olho {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brasa);
  line-height: 1.4;
}
.olho--claro { color: var(--areia); }

.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.6;
  color: var(--areia);
  max-width: var(--texto);
}
p { max-width: var(--texto); }
.grande {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.9rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  max-width: 22ch;
}

/* ---------- utilitarios ---------- */
.env { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }
.secao { padding-block: clamp(6rem, 13vh, 11rem); position: relative; }
.pilha > * + * { margin-top: var(--e, 1.5rem); }
.claro { --fundo: var(--luz); --tinta: var(--mata); background: var(--fundo); color: var(--tinta); }
.claro .olho { color: #8a5f2e; }
.claro .lead { color: #4a5545; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.pular {
  position: absolute; top: .75rem; left: .75rem; z-index: 100;
  padding: .6rem 1rem; background: var(--luz); color: var(--mata);
  transform: translateY(-160%); transition: transform .2s;
}
.pular:focus { transform: none; }

.fio { height: 1px; background: currentColor; opacity: .16; border: 0; }

/* ---------- botoes ---------- */
.btn {
  --alt: 3.35rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: var(--alt); padding-inline: 1.7rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  border-radius: 999px;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .45s var(--suave), border-color .45s var(--suave);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--brasa);
  transform: translateY(101%);
  transition: transform .55s var(--saida);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }

.btn--cheio { background: var(--brasa); color: var(--noite); }
.btn--cheio::before { background: var(--luz); }
.btn--cheio:hover { color: var(--noite); }

.btn--linha { border: 1px solid color-mix(in srgb, currentColor 34%, transparent); }
.btn--linha:hover, .btn--linha:focus-visible { color: var(--noite); border-color: var(--brasa); }

.btn--zap::after {
  content: ''; width: 1.05em; height: 1.05em; flex: none;
  background: currentColor;
  -webkit-mask: var(--zap) center / contain no-repeat;
  mask: var(--zap) center / contain no-repeat;
}
:root {
  --zap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.24 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.8-.78.97-.15.16-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.51.11-.11.25-.29.37-.44.13-.15.17-.25.25-.42.08-.16.04-.31-.02-.44-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.41-.56-.42h-.47c-.16 0-.42.06-.64.31-.22.25-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.69 2.58 4.1 3.62.57.25 1.02.39 1.37.5.58.18 1.1.16 1.51.1.46-.07 1.47-.6 1.68-1.18.21-.58.21-1.08.14-1.18-.06-.11-.22-.17-.47-.29z'/%3E%3C/svg%3E");
}

/* ---------- revelacao no scroll ----------
   Padrao unico: [data-revela] entra com opacidade + deslocamento.
   O JS so troca a classe; a animacao inteira e CSS.

   Sem JS nada troca de classe, entao a pagina inteira ficaria invisivel: o
   `html.js` (ligado por um script minusculo no <head>) e a trava contra isso. */
html:not(.js) [data-revela] { opacity: 1 !important; transform: none !important; }
html:not(.js) .linha > span,
html:not(.js) .cortina img { transform: none !important; }
/* a jornada depende do JS pra trocar de etapa; sem ele vira uma tela so */
html:not(.js) .jornada__trilho { height: 100svh; }
html:not(.js) .jornada__indice { display: none; }

[data-revela] {
  opacity: 0;
  transform: translate3d(0, 2.2rem, 0);
  transition:
    opacity 1s var(--saida) var(--atraso, 0s),
    transform 1.25s var(--saida) var(--atraso, 0s);
}
[data-revela].dentro { opacity: 1; transform: none; }

/* linhas de texto que sobem por tras de uma mascara */
.linha { display: block; overflow: hidden; padding-bottom: .06em; }
.linha > span {
  display: block;
  transform: translate3d(0, 108%, 0);
  transition: transform 1.15s var(--saida) var(--atraso, 0s);
}
.dentro .linha > span, .linha.dentro > span { transform: none; }

/* imagem que abre como uma cortina */
.cortina { overflow: hidden; }
.cortina img {
  transform: scale(1.16);
  transition: transform 1.6s var(--saida) var(--atraso, 0s), opacity .8s linear;
}
.dentro .cortina img, .cortina.dentro img { transform: none; }

/* =========================================================================
   CABECALHO
   ========================================================================= */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.35rem var(--gutter);
  color: var(--luz);
  transition: background .5s var(--suave), padding .5s var(--suave), backdrop-filter .5s;
}
.topo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(8,11,8,.62), transparent);
  transition: opacity .5s;
}
.topo.encolhido {
  padding-block: .8rem;
  background: color-mix(in srgb, var(--noite) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.topo.encolhido::before { opacity: 0; }

.marca {
  font-family: var(--serif); font-size: 1.32rem; line-height: 1;
  letter-spacing: .01em; white-space: nowrap;
}
.marca small {
  display: block; font-family: var(--sans);
  font-size: .55rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--brasa); margin-top: .34rem;
}

.menu { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.3rem); margin-left: auto; }
.menu a {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  position: relative; padding-block: .35rem; opacity: .82;
  transition: opacity .3s;
}
.menu a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--brasa); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--saida);
}
.menu a:hover { opacity: 1; }
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu .btn { font-size: .7rem; --alt: 2.6rem; padding-inline: 1.3rem; }
.menu .btn::after { display: none; }

.hamburguer { display: none; width: 2.5rem; height: 2.5rem; margin-left: auto; position: relative; }
.hamburguer span {
  position: absolute; left: 50%; width: 1.35rem; height: 1px; background: currentColor;
  transform: translateX(-50%);
  transition: transform .45s var(--saida), opacity .25s;
}
.hamburguer span:nth-child(1) { top: 1rem; }
.hamburguer span:nth-child(2) { top: 1.45rem; }
[aria-expanded='true'].hamburguer span:nth-child(1) { top: 1.22rem; transform: translateX(-50%) rotate(45deg); }
[aria-expanded='true'].hamburguer span:nth-child(2) { top: 1.22rem; transform: translateX(-50%) rotate(-45deg); }

/* =========================================================================
   HERO
   ========================================================================= */
/* `isolation: isolate` em toda caixa que tem filho com z-index negativo.
   Sem ela o fundo escapa pro contexto da raiz e some atras do fundo da pagina. */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: end;
  padding-block: 8rem clamp(2.5rem, 7vh, 5rem);
  overflow: clip; isolation: isolate;
}
.hero__fundo { position: absolute; inset: 0; z-index: -2; }
.hero__fundo img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06) translate3d(0, calc(var(--p, 0) * 7vh), 0);
  /* a foto respira: o ambiente nunca fica totalmente parado */
  animation: respirar 26s var(--suave) infinite alternate;
}
.hero__fundo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,11,8,.9) 0%, rgba(8,11,8,.35) 42%, rgba(8,11,8,.5) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(8,11,8,.55), transparent 60%);
}
@keyframes respirar {
  from { scale: 1; }
  to { scale: 1.11; }
}

.hero__conteudo { position: relative; display: grid; gap: 1.6rem; }
.hero h1 { margin-block: .1em -.05em; }
.hero__linha { display: flex; flex-wrap: wrap; align-items: end; gap: clamp(1.5rem, 4vw, 4rem); }
.hero__linha p { flex: 1 1 22ch; max-width: 34ch; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: .85rem; }

/* fica na lateral, nao no rodape: no rodape ela bate nos botoes do hero */
.rolar {
  position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%;
  display: grid; justify-items: center; gap: 1rem;
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--areia);
  opacity: .75;
}
.rolar span { writing-mode: vertical-rl; }
.rolar i {
  display: block; width: 1px; height: 3.2rem;
  background: linear-gradient(var(--brasa), transparent);
  transform-origin: top;
  animation: escorrer 2.6s var(--suave) infinite;
}
@media (max-width: 860px) { .rolar { display: none; } }
@keyframes escorrer {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(100%); opacity: 0; }
}

/* =========================================================================
   MANIFESTO
   ========================================================================= */
.manifesto { padding-block: clamp(7rem, 20vh, 15rem); }
.manifesto__texto {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.1vw, 4rem);
  line-height: 1.18; letter-spacing: -.018em;
  max-width: 24ch; margin-inline: auto; text-align: center;
}
.manifesto__texto em { color: var(--brasa-claro); }
.manifesto__rodape {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem;
  margin-top: clamp(3rem, 7vh, 5rem);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pedra);
}
.manifesto__rodape span { display: inline-flex; align-items: center; gap: .7rem; }
.manifesto__rodape span::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--brasa);
}

/* =========================================================================
   A JORNADA — o percurso pela casa preso ao scroll
   Cada etapa e uma camada; o JS so escreve --etapa e --avanco.
   ========================================================================= */
.jornada { position: relative; }
.jornada__trilho { height: var(--altura, 560svh); }
.jornada__palco {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: grid; grid-template-areas: 'palco'; place-items: end start;
}
.jornada__palco > * { grid-area: palco; }

.etapa {
  position: relative; width: 100%; height: 100svh;
  opacity: 0; transition: opacity .9s var(--suave);
  pointer-events: none;
}
.etapa img {
  width: 100%; height: 100%; object-fit: cover;
  /* o zoom acompanha o avanco DENTRO da etapa: sensacao de caminhar */
  transform: scale(calc(1.18 - var(--avanco, 0) * .18));
  transition: transform .1s linear;
}
.etapa::after {
  content: ''; position: absolute; inset: 0;
  background:
    /* mancha extra no canto de baixo à esquerda: é onde a legenda cai, e sem ela
       o texto some em cima das fotos claras (madeira, folhagem no sol) */
    radial-gradient(75% 60% at 8% 92%, rgba(8,11,8,.82), transparent 72%),
    linear-gradient(to top, rgba(8,11,8,.88), rgba(8,11,8,.15) 55%, rgba(8,11,8,.45));
}
.etapa.ativa { opacity: 1; }

.jornada__legendas { position: relative; z-index: 2; width: 100%; padding: 0 var(--gutter) clamp(3.5rem, 10vh, 7rem); }
.legenda {
  position: absolute; bottom: clamp(3.5rem, 10vh, 7rem); left: var(--gutter); right: var(--gutter);
  max-width: 30ch;
  opacity: 0; transform: translate3d(0, 1.6rem, 0);
  transition: opacity .7s var(--suave), transform .9s var(--saida);
  pointer-events: none;
}
.legenda.ativa { opacity: 1; transform: none; }
.legenda__num {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .3em; color: var(--brasa);
  display: block; margin-bottom: 1rem;
}
.legenda h3 { margin-bottom: .7rem; }
.legenda p { color: var(--areia); font-size: 1rem; max-width: 32ch; }

.jornada__indice {
  position: absolute; z-index: 3; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: grid; gap: .95rem; justify-items: end;
  /* o indice flutua direto sobre a foto, sem gradiente por baixo */
  text-shadow: 0 1px 12px rgba(8,11,8,.9);
}
.jornada__indice li { list-style: none; display: flex; align-items: center; gap: .8rem; }
.jornada__indice b {
  font-family: var(--sans); font-weight: 400; font-size: .66rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--pedra);
  opacity: 0; transform: translateX(.6rem);
  transition: opacity .4s, transform .5s var(--saida), color .4s;
}
.jornada__indice i {
  display: block; width: 1.6rem; height: 1px; background: var(--pedra); opacity: .45;
  transition: width .6s var(--saida), background .4s, opacity .4s;
}
.jornada__indice .ativa b { opacity: 1; transform: none; color: var(--osso); }
.jornada__indice .ativa i { width: 3.2rem; background: var(--brasa); opacity: 1; }

/* =========================================================================
   ACOMODACOES — a escolha
   ========================================================================= */
.escolha__cabeca {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 2rem; margin-bottom: clamp(3rem, 7vh, 5rem);
}
.escolha__cabeca p { max-width: 34ch; }

/* A foto fica em cima e as informacoes num bloco solido embaixo. Texto sobre
   foto nunca contrasta igual em todas as fotos (a nota se perdia nas claras) e
   a altura variava de cartao pra cartao. Aqui tudo fica na mesma linha. */
.cartoes { display: grid; gap: clamp(2.5rem, 3vw, 3rem) clamp(1.2rem, 2.2vw, 2.2rem); }
@media (min-width: 900px) { .cartoes { grid-template-columns: repeat(3, 1fr); } }

.cartao {
  display: flex; flex-direction: column;
  color: var(--tinta);
}
.cartao__foto { overflow: clip; background: var(--mata); }
.cartao__foto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  filter: saturate(.95);
  transition: transform 1.5s var(--saida), filter 1s var(--suave);
}
.cartao:hover .cartao__foto img, .cartao:focus-visible .cartao__foto img {
  transform: scale(1.07); filter: saturate(1.04);
}

.cartao__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-top: 1.5rem;
}
.cartao__tipo {
  font-size: .64rem; letter-spacing: .28em; text-transform: uppercase; color: var(--brasa);
}
.cartao__nota {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  font-size: .74rem; letter-spacing: .04em; color: var(--areia);
  font-variant-numeric: lining-nums;
}
.cartao__nota svg { width: .78rem; height: .78rem; fill: var(--brasa); translate: 0 .06em; }

.cartao h3 {
  margin: .7rem 0 1.4rem;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  transition: color .5s var(--suave);
}
.cartao:hover h3 { color: var(--brasa-claro); }

/* ficha em linhas rotulo/valor: toda acomodacao ocupa o mesmo numero de linhas,
   entao os tres cartoes terminam alinhados sem depender de subgrid */
.cartao__ficha { display: grid; margin: 0; }
.cartao__ficha > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .7rem 0;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.cartao__ficha dt {
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pedra);
}
.cartao__ficha dd {
  margin: 0; font-size: .92rem; color: var(--areia); text-align: right;
  font-variant-numeric: lining-nums;
}

.cartao__cta {
  display: flex; align-items: center; gap: .9rem;
  margin-top: auto; padding-top: 1.6rem;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--osso);
}
.cartao__cta i {
  display: block; height: 1px; flex: 1; max-width: 3.5rem;
  background: color-mix(in srgb, currentColor 45%, transparent);
  transition: max-width .6s var(--saida), background .5s;
}
.cartao:hover .cartao__cta { color: var(--brasa-claro); }
.cartao:hover .cartao__cta i { max-width: 6rem; background: var(--brasa); }

.claro .cartao__ficha dd, .claro .cartao__nota { color: #4a5545; }

/* =========================================================================
   PAINEIS COM PARALAXE — os pilares
   ========================================================================= */
.painel {
  position: relative; min-height: clamp(34rem, 88vh, 56rem);
  display: grid; align-items: center; overflow: clip; isolation: isolate;
}
.painel__fundo { position: absolute; inset: -12% 0; z-index: -2; }
.painel__fundo img {
  width: 100%; height: 100%; object-fit: cover;
  transform: translate3d(0, calc(var(--p, .5) * 14% - 7%), 0) scale(1.02);
  will-change: transform;
}
.painel::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(8,11,8,.9) 0%, rgba(8,11,8,.55) 45%, rgba(8,11,8,.15) 100%);
}
.painel--direita::after { background: linear-gradient(260deg, rgba(8,11,8,.9) 0%, rgba(8,11,8,.55) 45%, rgba(8,11,8,.15) 100%); }
.painel--direita .painel__texto { margin-left: auto; }
.painel__texto { max-width: 40ch; }
.painel__texto h2 { margin: 1.1rem 0 1.4rem; }

/* =========================================================================
   DETALHES — grade editorial
   ========================================================================= */
.detalhes { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 860px) {
  .detalhes { grid-template-columns: 1.05fr .95fr; }
  .detalhes--invertido > :first-child { order: 2; }
}
.detalhes figure { position: relative; }
.detalhes figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.detalhes--largo figure img { aspect-ratio: 3 / 2; }
figcaption {
  margin-top: .9rem; font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pedra);
}

.lista-marcada { display: grid; gap: .9rem; padding: 0; margin-top: 2rem; }
.lista-marcada li {
  list-style: none; display: grid; grid-template-columns: auto 1fr; gap: .9rem;
  align-items: baseline; font-size: .95rem; color: var(--areia);
}
.lista-marcada li::before {
  content: ''; width: 1.1rem; height: 1px; background: var(--brasa); translate: 0 -.35em;
}
.claro .lista-marcada li { color: #4a5545; }

/* =========================================================================
   MOSAICO DE FOTOS
   ========================================================================= */
.mosaico {
  display: grid; gap: clamp(.5rem, .9vw, 1rem);
  grid-template-columns: repeat(2, 1fr);
  /* `dense` reaproveita os buracos que os blocos 2x1 e 1x2 deixam pra tras */
  grid-auto-flow: dense;
}
@media (min-width: 760px) { .mosaico { grid-template-columns: repeat(4, 1fr); } }
.mosaico button { display: block; width: 100%; overflow: clip; position: relative; }
.mosaico img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1;
  transition: transform 1.1s var(--saida), filter .7s;
  filter: saturate(.95);
}
.mosaico button:hover img { transform: scale(1.05); filter: saturate(1.05); }
.mosaico .alto { grid-row: span 2; }
.mosaico .alto img { aspect-ratio: 1 / 2.04; }
.mosaico .largo { grid-column: span 2; }
.mosaico .largo img { aspect-ratio: 2.04 / 1; }

/* =========================================================================
   IMBASSAI
   ========================================================================= */
.distancias {
  display: grid; gap: 1px; margin-top: clamp(2.5rem, 6vh, 4rem);
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-block: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
@media (min-width: 700px) { .distancias { grid-template-columns: repeat(4, 1fr); } }
.distancias div {
  background: var(--fundo); padding: 1.6rem clamp(1rem, 2vw, 1.8rem);
  display: grid; gap: .4rem; align-content: start;
}
.distancias b {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1;
}
.distancias span { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pedra); }

/* =========================================================================
   AVALIACOES
   ========================================================================= */
.selo {
  display: inline-flex; align-items: center; gap: 1.6rem;
  padding: 1rem 1.6rem; border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 999px; margin-bottom: 2.5rem;
}
.selo b { font-family: var(--serif); font-size: 2rem; font-weight: 300; line-height: 1; }
.selo span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pedra); }

.depoimentos { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 820px) { .depoimentos { grid-template-columns: repeat(3, 1fr); } }
.depoimento {
  display: grid; gap: 1.2rem; align-content: start;
  padding-top: 1.8rem; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.depoimento blockquote {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.35; letter-spacing: -.01em;
}
.depoimento cite {
  font-style: normal; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pedra);
}

/* =========================================================================
   RESERVA
   ========================================================================= */
.reserva { position: relative; overflow: clip; isolation: isolate; }
.reserva__fundo { position: absolute; inset: 0; z-index: -2; }
.reserva__fundo img { width: 100%; height: 100%; object-fit: cover; }
.reserva::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(8,11,8,.94), rgba(8,11,8,.72) 60%, rgba(8,11,8,.5));
}

.consulta {
  display: grid; gap: 1.5rem; max-width: 44rem; margin-top: clamp(2.5rem, 6vh, 3.5rem);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: rgba(251,248,241,.055);
  border: 1px solid rgba(251,248,241,.14);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}
.consulta__campo { display: grid; gap: .7rem; }
.consulta__campo > span {
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--areia);
}
.opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcoes label { position: relative; }
.opcoes input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcoes span {
  display: block; padding: .7rem 1.15rem; border-radius: 999px;
  border: 1px solid rgba(251,248,241,.22);
  font-size: .78rem; letter-spacing: .06em;
  transition: background .4s var(--suave), border-color .4s, color .4s;
}
.opcoes input:checked + span { background: var(--brasa); border-color: var(--brasa); color: var(--noite); }
.opcoes input:focus-visible + span { outline: 2px solid var(--brasa-claro); outline-offset: 3px; }

.consulta__grade { display: grid; gap: 1.2rem; }
@media (min-width: 620px) { .consulta__grade { grid-template-columns: 1fr 1fr 1fr; } }
.consulta input[type='date'], .consulta select {
  width: 100%; padding: .85rem 1rem;
  background: rgba(10,13,10,.5); border: 1px solid rgba(251,248,241,.2);
  border-radius: 2px; font-size: .92rem;
  color-scheme: dark;
}
.consulta__nota { font-size: .78rem; color: var(--pedra); max-width: 46ch; }

/* =========================================================================
   RODAPE
   ========================================================================= */
.rodape { padding-block: clamp(4rem, 9vh, 7rem) 2.5rem; border-top: 1px solid rgba(251,248,241,.1); }
.rodape__grade { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 780px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; } }
.rodape h4 {
  font-family: var(--sans); font-size: .68rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--brasa);
  margin-bottom: 1.2rem;
}
.rodape ul { padding: 0; display: grid; gap: .65rem; }
.rodape li { list-style: none; font-size: .9rem; color: var(--areia); }
.rodape a:hover { color: var(--luz); }
.rodape__base {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  margin-top: clamp(3rem, 7vh, 5rem); padding-top: 1.8rem;
  border-top: 1px solid rgba(251,248,241,.1);
  font-size: .74rem; color: var(--pedra);
}

/* =========================================================================
   PAGINA DE ACOMODACAO
   ========================================================================= */
.capa {
  position: relative; min-height: 88svh; display: grid; align-items: end;
  padding-block: 9rem clamp(3rem, 8vh, 5rem); overflow: clip; isolation: isolate;
}
.capa__fundo { position: absolute; inset: 0; z-index: -2; }
.capa__fundo img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04) translate3d(0, calc(var(--p, 0) * 6vh), 0);
}
.capa__fundo::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 6% 88%, rgba(8,11,8,.78), transparent 70%),
    linear-gradient(to top, rgba(8,11,8,.92), rgba(8,11,8,.3) 55%, rgba(8,11,8,.55));
}
.capa h1 { font-size: clamp(3rem, 8.5vw, 8rem); margin-block: .12em .25em; }
.voltar {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--areia);
}
.voltar::before {
  content: ''; width: 1.6rem; height: 1px; background: currentColor;
  transition: width .4s var(--saida);
}
.voltar:hover::before { width: 2.6rem; }

.ficha {
  display: grid; gap: 1px; background: rgba(251,248,241,.12);
  border-block: 1px solid rgba(251,248,241,.12);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .ficha { grid-template-columns: repeat(4, 1fr); } }
.ficha div { background: var(--fundo); padding: 1.4rem clamp(.9rem, 2vw, 1.6rem); display: grid; gap: .3rem; }
.ficha b { font-family: var(--serif); font-size: 2rem; font-weight: 300; line-height: 1; }
.ficha span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pedra); }

.comodidades { display: grid; gap: .8rem 2rem; padding: 0; }
@media (min-width: 620px) { .comodidades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .comodidades { grid-template-columns: repeat(3, 1fr); } }
.comodidades li {
  list-style: none; display: grid; grid-template-columns: auto 1fr; gap: .8rem;
  align-items: baseline; font-size: .92rem; color: var(--areia);
  padding-bottom: .8rem; border-bottom: 1px solid rgba(251,248,241,.08);
}
.comodidades li::before { content: ''; width: .85rem; height: 1px; background: var(--brasa); translate: 0 -.3em; }

.outras { display: grid; gap: clamp(2.5rem, 3vw, 3rem) clamp(1.2rem, 2.2vw, 2.2rem); }
@media (min-width: 760px) { .outras { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
   LIGHTBOX
   ========================================================================= */
.lupa {
  position: fixed; inset: 0; z-index: 90; border: 0; padding: 0; width: 100%; height: 100%;
  background: rgba(8,11,8,.97);
  /* fechado tem que sumir: um display fixo aqui sobrescreve o `display:none`
     que o navegador da ao <dialog> sem [open] e a caixa cobre a pagina toda */
  display: none;
}
.lupa[open] {
  display: grid; grid-template-rows: auto 1fr auto; gap: 1rem;
  animation: aparecer .4s var(--saida);
}
.lupa::backdrop { background: rgba(8,11,8,.9); }
@keyframes aparecer { from { opacity: 0; } }
.lupa__topo { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem var(--gutter) 0; }
.lupa__contador { font-size: .72rem; letter-spacing: .2em; color: var(--pedra); }
.lupa__palco { display: grid; place-items: center; padding-inline: var(--gutter); min-height: 0; }
.lupa__palco img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.lupa__base { display: flex; justify-content: center; gap: 1rem; padding-bottom: 1.6rem; }
.lupa__nav {
  width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(251,248,241,.25);
  display: grid; place-items: center; transition: background .4s, color .4s, border-color .4s;
}
.lupa__nav:hover { background: var(--brasa); border-color: var(--brasa); color: var(--noite); }
.lupa__nav::before {
  content: ''; width: .7rem; height: .7rem;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
}
.lupa__nav--ant::before { transform: rotate(-135deg) translate(-.1em, -.1em); }
.lupa__nav--prox::before { transform: rotate(45deg) translate(-.1em, .1em); }
.fechar { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }

/* =========================================================================
   BARRA FIXA NO CELULAR
   ========================================================================= */
.barra-zap {
  position: fixed; z-index: 55; left: 0; right: 0; bottom: 0;
  display: none; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--noite) 88%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(251,248,241,.12);
  transform: translateY(110%); transition: transform .5s var(--saida);
}
.barra-zap.visivel { transform: none; }
.barra-zap .btn { width: 100%; }

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width: 860px) {
  /* ---- no celular tudo que se toca precisa de ~44px de altura, e as
          etiquetas em caixa alta sobem um pouco pra sair da faixa ilegivel ---- */
  .olho, .legenda__num, .cartao__tipo, .cartao__ficha dt, .cartao__cta,
  .ficha span, .distancias span, .selo span, .depoimento cite,
  figcaption, .rodape h4, .lupa__contador, .consulta__campo > span {
    font-size: .76rem;
  }
  .rodape ul { gap: 0; }
  .rodape li { font-size: .95rem; }
  .rodape li a { display: block; padding-block: .7rem; }
  .voltar { padding-block: .8rem; }
  .marca { padding-block: .3rem; }

  .menu {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; justify-content: center; gap: 1.2rem;
    background: color-mix(in srgb, var(--noite) 97%, transparent);
    backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden;
    transition: opacity .5s var(--suave), visibility .5s;
  }
  .menu.aberto { opacity: 1; visibility: visible; }
  .menu a { font-size: 1.05rem; letter-spacing: .18em; padding-block: .8rem; }
  .hamburguer { display: block; z-index: 2; }
  .jornada__indice { display: none; }
  .barra-zap { display: block; }
  /* a barra fixa do WhatsApp come o rodape da tela: legenda e rodape sobem */
  .legenda { max-width: none; bottom: 7.5rem; }
  .rodape { padding-bottom: 7rem; }
  .mosaico .alto, .mosaico .largo { grid-row: auto; grid-column: auto; }
  .mosaico .alto img, .mosaico .largo img { aspect-ratio: 1; }
}

@media (max-width: 520px) {
  .hero { min-height: 92svh; }
  .cartao { min-height: 26rem; }
  .selo { flex-wrap: wrap; gap: 1rem; }
}

/* ---------- quem pediu menos movimento recebe menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-revela] { opacity: 1; transform: none; }
  .linha > span { transform: none; }
  .cortina img, .etapa img, .painel__fundo img, .hero__fundo img, .capa__fundo img { transform: none; }
  .etapa { transition: opacity .2s linear; }
}

/* ---------- impressao: so o essencial ---------- */
@media print {
  .topo, .barra-zap, .rolar, .jornada { display: none; }
  body { background: #fff; color: #000; }
}