/* =========================================================================
   style.css — template de pousada (v2, bespoke).
   Mobile-first. Sem framework, sem build. Abrir index.html direto renderiza.

   As cores, fontes, textura e "voz de movimento" sao TOKENS setados pelo boot
   (presets.js -> POUSADA.preset). Os valores em :root sao o preset default
   (praiano-rustico) — garantem coerencia mesmo antes/sem JS.

   NOTA DE PERFORMANCE: fontes carregam via <link> (Google Fonts + Fontshare).
   Auto-hospedar os .woff2 (self-host, com font-display:swap) e otimizacao futura.
========================================================================= */

:root {
  /* ---- tokens de cor (default = praiano-rustico; boot sobrescreve) ---- */
  --bg: #F4EEE4;
  --bg2: #EADFCE;
  --ink: #2A2420;
  --accent: #C05F33;
  --accent2: #4E7C6F;
  --line: rgba(42, 36, 32, 0.14);
  --muted: #655749;
  --shadow: 42 36 32;              /* "R G B" p/ sombras em camadas */
  --luz: #F6F0E6;                  /* texto claro sobre faixas escuras */
  --accentInk: #FDF7EF;            /* texto sobre botao de acento */

  /* texto de corpo: tinta suavizada rumo ao fundo (recalcula com bg/ink) */
  --texto: color-mix(in oklch, var(--ink) 84%, var(--bg));

  /* marca WhatsApp (fixa — nao vem do preset) */
  --wa: #1FA855;
  --wa-escuro: #17864A;
  --wa-ink: #FFFFFF;

  /* ---- fontes (default; boot sobrescreve) ---- */
  --fonte-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fonte-corpo: 'General Sans', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ---- textura + icone ---- */
  --grao-opacidade: 0.06;
  --icone-stroke: 1.5;

  /* ---- voz de movimento (default; boot sobrescreve) ---- */
  --dur-fast: 180ms;
  --dur: 340ms;
  --dur-slow: 620ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --stagger: 70ms;

  /* ---- layout ---- */
  --content-max: 72rem;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --cabecalho-h: 4.5rem;

  /* ---- spacing FLUIDO com ratios variados (nunca 24px em tudo) ---- */
  --space-2xs: clamp(0.5rem, 0.47rem + 0.15vw, 0.625rem);
  --space-xs:  clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
  --space-s:   clamp(1rem, 0.88rem + 0.6vw, 1.5rem);
  --space-m:   clamp(1.5rem, 1.25rem + 1.2vw, 2.5rem);
  --space-l:   clamp(2.25rem, 1.8rem + 2.2vw, 4rem);
  --space-xl:  clamp(3.5rem, 2.7rem + 3.8vw, 6.5rem);
  --space-2xl: clamp(5rem, 3.8rem + 6vw, 9.5rem);

  /* ---- escala tipografica FLUIDA (vw + rem; max <= 2.5x min) ---- */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);        /* corpo */
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.44rem, 1.3rem + 0.7vw, 1.95rem);
  --step-3:  clamp(1.73rem, 1.5rem + 1.15vw, 2.6rem);
  --step-4:  clamp(2.07rem, 1.72rem + 1.75vw, 3.4rem);
  --step-5:  clamp(2.5rem, 1.95rem + 2.75vw, 4.6rem);       /* hero (1.84x) */

  /* ---- raios NAO-uniformes (intencionais) ---- */
  --r-xs: 4px;
  --r-sm: 9px;
  --r-md: 15px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* ---- sombras em CAMADAS (fonte de luz unica, matiz casado a paleta) ---- */
  --elev-1: 0 1px 2px rgb(var(--shadow) / .07), 0 2px 5px rgb(var(--shadow) / .05);
  --elev-2: 0 1px 2px rgb(var(--shadow) / .05), 0 6px 14px rgb(var(--shadow) / .08), 0 14px 28px rgb(var(--shadow) / .06);
  --elev-3: 0 2px 4px rgb(var(--shadow) / .06), 0 10px 22px rgb(var(--shadow) / .10), 0 26px 48px rgb(var(--shadow) / .13);
}

/* ---------- reset leve ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fonte-corpo);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--texto);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--fonte-display); font-weight: 500; line-height: 1.06; letter-spacing: -0.02em; }
::selection { background: var(--accent); color: var(--accentInk); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }

/* ---------- icones de linha: UM stroke-width no site todo ---------- */
.ico { fill: none; stroke: currentColor; stroke-width: var(--icone-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ico-marca { fill: currentColor; }        /* logo WhatsApp (nao e icone decorativo) */
.ico-wrap { display: inline-flex; }

/* ---------- camada de grao ---------- */
.grao {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: var(--grao-opacidade);
  mix-blend-mode: overlay;
}

/* ---------- skip link ---------- */
.pular {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 300;
  background: var(--ink); color: var(--luz);
  padding: .7em 1.2em; border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: transform var(--dur-fast) var(--ease);
}
.pular:focus-visible { transform: translate(-50%, 0); }

/* ---------- grid nomeado de pagina (imagens estouram p/ "full") ---------- */
.secao {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--pad), 1fr)
    [content-start] minmax(0, var(--content-max)) [content-end]
    minmax(var(--pad), 1fr) [full-end];
  row-gap: var(--space-m);
  padding-block: var(--space-2xl);
  position: relative;
}
.secao > * { grid-column: content; }
.secao > .full { grid-column: full; }

/* ---------- overline + numeracao + titulos ---------- */
.overline {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--space-2xs);
}
.overline--luz { color: color-mix(in oklch, var(--accent) 55%, var(--luz)); }
.secao__num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  font-size: var(--step--1);
  color: var(--muted);
  margin-bottom: var(--space-2xs);
}
.secao__num--luz { color: color-mix(in oklch, var(--luz) 60%, transparent); }
.secao__titulo {
  font-size: var(--step-4);
  line-height: 1.02;
  color: var(--ink);
  max-width: 18ch;
  text-wrap: balance;
}
.secao__titulo--luz { color: var(--luz); }

.secao__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}
.secao__intro {
  max-width: 34ch;
  color: var(--muted);
  font-size: var(--step-1);
  line-height: 1.5;
}

.prosa p { max-width: 60ch; margin-bottom: 1em; }
.prosa p:last-child { margin-bottom: 0; }
.assinatura {
  margin-top: var(--space-m);
  font-family: var(--fonte-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--accent);
}

/* ---------- tratamento de FOTO consistente (grade quente + leve grao global) ---------- */
.photo {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg2);
  border-radius: var(--r-md);
}
.photo > img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(1.03) contrast(1.02);
}
.photo::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--accent) 12%, transparent), transparent 42%),
    radial-gradient(130% 120% at 50% 8%, transparent 58%, color-mix(in oklch, var(--ink) 42%, transparent));
  mix-blend-mode: soft-light;
  opacity: .55;
}

/* =========================================================================
   BOTOES — micro-interacao de 3 tempos (hover eleva, active scale)
========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .85em 1.5em;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.1;
  letter-spacing: -0.01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn--grande { padding: 1.05em 1.9em; font-size: var(--step-1); }

.btn--wa { background: var(--wa); color: var(--wa-ink); box-shadow: 0 6px 18px rgb(var(--shadow) / .18); }
.btn--wa:hover { background: var(--wa-escuro); }

.btn--linha { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--linha:hover { border-color: var(--ink); background: color-mix(in oklch, var(--ink) 6%, transparent); }
.curatorial .btn--linha, .prova .btn--linha, .rodape .btn--linha { color: var(--luz); border-color: color-mix(in oklch, var(--luz) 35%, transparent); }
.curatorial .btn--linha:hover, .prova .btn--linha:hover { border-color: var(--luz); background: color-mix(in oklch, var(--luz) 12%, transparent); }

/* =========================================================================
   HEADER
========================================================================= */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--cabecalho-h);
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
  color: var(--luz);
}
.cabecalho__inner {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--pad));
  margin: 0 auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.marca {
  font-family: var(--fonte-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: inherit;
}
.cabecalho--solido {
  background: color-mix(in oklch, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--elev-1);
  color: var(--ink);
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav__link { font-size: var(--step-0); font-weight: 500; color: inherit; opacity: .92; transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.nav__link:hover { opacity: 1; color: var(--accent); }
.nav__link--cta {
  padding: .5em 1.1em;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: var(--wa-ink) !important;
  opacity: 1;
}
.nav__link--cta:hover { background: var(--wa-escuro); }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
}
.menu-toggle span { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }

/* =========================================================================
   1 · HERO (full-bleed + painel que INVADE a foto e a proxima secao)
========================================================================= */
.hero {
  position: relative;
  min-height: 94svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--cabecalho-h) + var(--space-l)) var(--pad) 0;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.photo--hero { border-radius: 0; }
.photo--hero::after {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--ink) 28%, transparent) 0%, transparent 32%),
    linear-gradient(0deg, color-mix(in oklch, var(--ink) 62%, transparent) 0%, transparent 55%);
  mix-blend-mode: normal;
  opacity: 1;
}
.hero__painel {
  position: relative;
  z-index: 2;
  width: min(42rem, 100%);
  margin-bottom: calc(-1 * var(--space-l));   /* overlap real na proxima secao */
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--r-xl) var(--r-xl) var(--r-sm) var(--r-xl);
  box-shadow: var(--elev-3);
}
.hero__local { color: var(--accent); }
.hero__frase {
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--space-s);
  text-wrap: balance;
}
.hero__tagline { font-size: var(--step-1); color: var(--muted); max-width: 40ch; margin-bottom: var(--space-m); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-s); }
.hero__reforco { font-size: var(--step--1); color: var(--muted); letter-spacing: 0.02em; }
.hero__rolar {
  position: absolute;
  left: var(--pad); bottom: var(--space-m);
  z-index: 2;
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--luz);
  font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.18em;
}

/* =========================================================================
   2 · NOSSA HISTORIA (editorial assimetrico, foto estoura a direita)
========================================================================= */
.historia {
  align-items: center;
  row-gap: var(--space-l);
}
.historia__foto { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--elev-2); aspect-ratio: 4/5; }
.historia__foto .photo { border-radius: inherit; }

/* =========================================================================
   3 · DETALHE CURATORIAL (faixa ink; foto estoura a esquerda; painel sobrepoe)
========================================================================= */
.curatorial {
  background: var(--ink);
  color: var(--luz);
  align-items: center;
  row-gap: 0;
}
.curatorial__media { aspect-ratio: 4/3; overflow: hidden; box-shadow: var(--elev-3); }
.curatorial__media .photo { border-radius: 0; }
.curatorial__painel {
  position: relative;
  z-index: 2;
  padding: var(--space-l);
  background: color-mix(in oklch, var(--ink) 88%, black);
  border: 1px solid color-mix(in oklch, var(--luz) 14%, transparent);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-3);
}
.curatorial__texto { color: color-mix(in oklch, var(--luz) 88%, transparent); font-size: var(--step-1); line-height: 1.55; max-width: 42ch; }

/* =========================================================================
   4 · ACOMODACOES (trilho horizontal com scroll-snap)
========================================================================= */
.quartos__trilho {
  grid-column: full;
  display: flex;
  gap: var(--space-s);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-xs) var(--pad) var(--space-s);
  list-style: none;
  scrollbar-width: thin;
}
.quarto {
  flex: 0 0 clamp(15rem, 74vw, 20rem);
  scroll-snap-align: start;
}
.quarto__foto { aspect-ratio: 4/5; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--elev-1); }
.quarto__corpo { padding: var(--space-s) 2px 0; }
.quarto__idx { font-variant-numeric: tabular-nums; font-size: var(--step--1); color: var(--accent); letter-spacing: 0.14em; }
.quarto__nome { font-size: var(--step-2); margin: 2px 0 .35em; color: var(--ink); }
.quarto__exp { color: var(--muted); font-size: var(--step-0); line-height: 1.5; }

/* =========================================================================
   5 · EXPERIENCIAS (FAB — beneficio vivido, nao 3 colunas frias)
========================================================================= */
.experiencias { background: var(--bg2); }
.experiencias__lista {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m) var(--space-l);
}
.exp { display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); align-items: start; }
.exp__ico {
  width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, var(--bg));
  border: 1px solid color-mix(in oklch, var(--accent) 24%, transparent);
}
.exp__ico .ico { width: 26px; height: 26px; }
.exp__titulo { font-size: var(--step-2); color: var(--ink); margin-bottom: .3em; }
.exp__texto { color: var(--muted); max-width: 46ch; }

/* =========================================================================
   6 · GALERIA (grade irregular, aspect-ratios variados, estoura full)
========================================================================= */
.galeria__grade {
  grid-column: full;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.5rem, 1.1vw, 0.9rem);
}
.galeria__item {
  border: 0; padding: 0; cursor: pointer;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg2);
  grid-column: span 3;
  aspect-ratio: 4/3;
}
.galeria__item .photo { border-radius: inherit; }
.galeria__item:nth-child(6n+1) { grid-column: span 4; aspect-ratio: 16/10; }
.galeria__item:nth-child(6n+2) { grid-column: span 2; aspect-ratio: 3/4; }
.galeria__item:nth-child(6n+4) { grid-column: span 2; aspect-ratio: 3/4; }
.galeria__item:nth-child(6n+5) { grid-column: span 4; aspect-ratio: 16/9; }

/* =========================================================================
   7 · PROVA SOCIAL (faixa ink; numeros animados + depoimentos + premios)
========================================================================= */
.prova { background: var(--ink); color: var(--luz); }
.prova__numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s);
  padding-block: var(--space-s) var(--space-l);
  border-top: 1px solid color-mix(in oklch, var(--luz) 14%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--luz) 14%, transparent);
}
.stat { text-align: center; }
.stat__num {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--step-5);
  line-height: 1;
  color: var(--luz);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat__rotulo { display: block; margin-top: .5em; font-size: var(--step--1); color: color-mix(in oklch, var(--luz) 62%, transparent); text-transform: uppercase; letter-spacing: 0.12em; }

.prova__depoimentos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  margin-top: var(--space-l);
}
.depo {
  padding: var(--space-m);
  background: color-mix(in oklch, var(--luz) 6%, transparent);
  border: 1px solid color-mix(in oklch, var(--luz) 12%, transparent);
  border-radius: var(--r-lg);
}
.depo__estrelas { display: inline-flex; gap: 2px; color: var(--accent); margin-bottom: var(--space-xs); }
.depo__estrelas .ico { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.depo__texto { font-family: var(--fonte-display); font-size: var(--step-1); line-height: 1.5; color: var(--luz); margin-bottom: var(--space-s); }
.depo__autor { display: flex; flex-direction: column; }
.depo__nome { font-weight: 600; color: var(--luz); }
.depo__cidade { font-size: var(--step--1); color: color-mix(in oklch, var(--luz) 60%, transparent); }

.prova__premios {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid color-mix(in oklch, var(--luz) 14%, transparent);
}
.premio { display: inline-flex; align-items: center; gap: .55em; font-size: var(--step-0); color: color-mix(in oklch, var(--luz) 82%, transparent); }
.premio .ico { width: 18px; height: 18px; color: var(--accent); fill: currentColor; stroke: none; flex: none; }

/* =========================================================================
   8 · RESERVA DIRETA + PIX
========================================================================= */
.reserva { align-items: start; row-gap: var(--space-l); }
.reserva__sub { color: var(--muted); font-size: var(--step-1); max-width: 46ch; margin-bottom: var(--space-m); }
.reserva__vantagens { list-style: none; display: grid; gap: var(--space-s); margin-bottom: var(--space-l); }
.vantagem { display: grid; grid-template-columns: auto 1fr; gap: var(--space-s); align-items: start; }
.vantagem__ico { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, var(--bg)); }
.vantagem__ico .ico { width: 22px; height: 22px; }
.vantagem__titulo { font-size: var(--step-1); color: var(--ink); }
.vantagem__texto { color: var(--muted); font-size: var(--step-0); }
.reserva__pix {
  align-self: start;
  padding: var(--space-m);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
}
.pix__rotulo { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: var(--accent); margin-bottom: var(--space-xs); }
.pix__rotulo .ico { width: 20px; height: 20px; }
.pix__nota { color: var(--muted); font-size: var(--step-0); margin-bottom: var(--space-s); }
.pix__dados { display: grid; gap: var(--space-xs); }
.pix__dados dt { font-size: var(--step--1); color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.pix__dados dd { font-weight: 500; color: var(--ink); word-break: break-word; }

/* =========================================================================
   9 · ESCASSEZ (faixa fina, honesta, condicional)
========================================================================= */
.escassez { padding-block: var(--space-l); background: color-mix(in oklch, var(--accent) 10%, var(--bg)); }
.escassez__bloco {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  padding: var(--space-m);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--elev-1);
}
.escassez__ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent); }
.escassez__bloco > div { flex: 1 1 16rem; }
.escassez__titulo { font-family: var(--fonte-display); font-size: var(--step-1); color: var(--ink); }
.escassez__texto { color: var(--muted); font-size: var(--step-0); }
.escassez .btn { margin-left: auto; }

/* =========================================================================
   10 · FAQ (accordion nativo details/summary)
========================================================================= */
.faq__lista { display: grid; gap: 0; max-width: 52rem; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__p {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  padding: var(--space-m) 0;
  cursor: pointer;
  font-family: var(--fonte-display);
  font-size: var(--step-2);
  color: var(--ink);
  list-style: none;
}
.faq__p::-webkit-details-marker { display: none; }
.faq__seta { flex: none; color: var(--accent); transition: transform var(--dur) var(--ease); }
.faq__item[open] .faq__seta { transform: rotate(180deg); }
.faq__r { padding: 0 0 var(--space-m); }
.faq__r p { max-width: 60ch; color: var(--muted); }

/* =========================================================================
   ONDE ESTAMOS
========================================================================= */
.local { background: var(--bg2); align-items: center; row-gap: var(--space-l); }
.local__endereco { color: var(--muted); font-size: var(--step-1); max-width: 32ch; margin-block: var(--space-s) var(--space-m); }
.local__mapa {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--elev-2);
  border: 1px solid var(--line);
  aspect-ratio: 16/11;
  background: var(--bg);
}
.local__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================================
   11 · FOOTER + CTA recorrente
========================================================================= */
.rodape { background: color-mix(in oklch, var(--ink) 94%, black); color: color-mix(in oklch, var(--luz) 80%, transparent); }
.rodape__cta {
  max-width: calc(var(--content-max) + 2 * var(--pad));
  margin: 0 auto;
  padding: var(--space-2xl) var(--pad) var(--space-l);
  text-align: center;
  border-bottom: 1px solid color-mix(in oklch, var(--luz) 12%, transparent);
}
.rodape__chamada { font-family: var(--fonte-display); font-size: var(--step-4); color: var(--luz); line-height: 1.05; margin-block: var(--space-2xs) var(--space-m); max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.rodape__base {
  max-width: calc(var(--content-max) + 2 * var(--pad));
  margin: 0 auto;
  padding: var(--space-l) var(--pad);
  display: grid;
  gap: var(--space-2xs);
}
.rodape__marca { font-family: var(--fonte-display); font-size: var(--step-2); color: var(--luz); }
.rodape__end { font-size: var(--step-0); }
.rodape__mini { font-size: var(--step--1); color: color-mix(in oklch, var(--luz) 55%, transparent); margin-top: var(--space-xs); }

/* =========================================================================
   CTA fixo (mobile) + WhatsApp flutuante (desktop)
========================================================================= */
.cta-fixo {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: none;
  padding: var(--space-xs) var(--pad) calc(var(--space-xs) + env(safe-area-inset-bottom));
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.cta-fixo .btn { width: 100%; justify-content: center; }

.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--wa); color: var(--wa-ink);
  box-shadow: 0 8px 22px rgb(var(--shadow) / .28);
}

/* =========================================================================
   LIGHTBOX
========================================================================= */
.lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid; place-items: center;
  padding: var(--space-m);
  background: color-mix(in oklch, var(--ink) 92%, black);
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 92vw; max-height: 88vh; border-radius: var(--r-md); box-shadow: var(--elev-3); }
.lightbox__fechar {
  position: absolute; top: var(--space-s); right: var(--space-s);
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  color: var(--luz);
  background: color-mix(in oklch, var(--luz) 14%, transparent);
  border: 0; border-radius: 50%; cursor: pointer;
}
.lightbox__fechar:hover { background: color-mix(in oklch, var(--luz) 24%, transparent); }

/* =========================================================================
   RESPONSIVO — RE-COMPOE (nao so empilha)
========================================================================= */
@media (min-width: 48rem) {
  /* historia: 2 colunas assimetricas, foto estoura a direita */
  .historia {
    grid-template-columns:
      [full-start] minmax(var(--pad), 1fr)
      [content-start] minmax(0, 33rem) [mid] minmax(0, 30rem) [content-end]
      minmax(var(--pad), 0.35fr) [full-end];
  }
  .historia__texto { grid-column: content-start / mid; padding-right: var(--space-l); }
  .historia__foto { grid-column: mid / full-end; aspect-ratio: 4/5; }

  /* curatorial: foto estoura a esquerda; painel invade a foto */
  .curatorial {
    grid-template-columns:
      [full-start] minmax(var(--pad), 0.35fr)
      [content-start] minmax(0, 30rem) [mid] minmax(0, 32rem) [content-end]
      minmax(var(--pad), 1fr) [full-end];
    padding-block: var(--space-2xl);
  }
  .curatorial__media { grid-column: full-start / mid; grid-row: 1; aspect-ratio: 3/4; align-self: stretch; }
  .curatorial__painel { grid-column: mid / content-end; grid-row: 1; margin-left: calc(-1 * var(--space-xl)); }

  /* experiencias: 2 colunas */
  .experiencias__lista { grid-template-columns: 1fr 1fr; }

  /* prova: depoimentos em 2 colunas */
  .prova__depoimentos { grid-template-columns: 1fr 1fr; }

  /* reserva: texto + PIX lado a lado */
  .reserva {
    grid-template-columns:
      [full-start] minmax(var(--pad), 1fr)
      [content-start] minmax(0, 1.4fr) [mid] minmax(0, 1fr) [content-end]
      minmax(var(--pad), 1fr) [full-end];
    column-gap: var(--space-l);
  }
  .reserva__texto { grid-column: content-start / mid; }
  .reserva__pix { grid-column: mid / content-end; }

  /* local: texto + mapa */
  .local {
    grid-template-columns:
      [full-start] minmax(var(--pad), 1fr)
      [content-start] minmax(0, 1fr) [mid] minmax(0, 1.2fr) [content-end]
      minmax(var(--pad), 1fr) [full-end];
    column-gap: var(--space-l);
  }
  .local__info { grid-column: content-start / mid; }
  .local__mapa { grid-column: mid / content-end; }

  .rodape__base { grid-template-columns: 1fr auto; align-items: end; }
  .rodape__mini { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
  .prova__depoimentos { grid-template-columns: repeat(2, 1fr); }
  .reserva__vantagens { gap: var(--space-m); }
}

/* mobile: galeria vira scroll-snap horizontal; CTA fixo aparece; nav vira menu */
@media (max-width: 47.99rem) {
  body { padding-bottom: 4.5rem; }   /* espaco pro CTA fixo nao cobrir o rodape */
  .menu-toggle { display: flex; }
  .nav {
    position: absolute;
    top: var(--cabecalho-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: color-mix(in oklch, var(--bg) 97%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--elev-2);
    max-height: 0; overflow: hidden;
    transition: max-height var(--dur) var(--ease);
  }
  .nav--aberto { max-height: 24rem; }
  .nav__link { color: var(--ink) !important; opacity: 1; padding: 1em var(--pad); border-bottom: 1px solid var(--line); }
  .nav__link--cta { margin: var(--space-xs) var(--pad); text-align: center; justify-content: center; }
  .cabecalho { color: var(--luz); }

  .galeria__grade {
    display: flex;
    grid-column: full;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-xs);
  }
  .galeria__item, .galeria__item:nth-child(6n+1), .galeria__item:nth-child(6n+2),
  .galeria__item:nth-child(6n+4), .galeria__item:nth-child(6n+5) {
    flex: 0 0 78%;
    scroll-snap-align: center;
    aspect-ratio: 4/5;
  }
  .prova__numeros { grid-template-columns: 1fr; gap: var(--space-m); }
  .cta-fixo { display: block; }
  .wa-float { display: none; }
  .hero__painel { border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); margin-bottom: calc(-1 * var(--space-m)); }
  .escassez .btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* =========================================================================
   MOTION — 100% dentro de prefers-reduced-motion: no-preference
   Animar so transform/opacity.
========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* transicoes de botao (3 tempos) */
  .btn { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .btn--wa:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(var(--shadow) / .26); }
  .btn:active { transform: scale(.98); }
  .nav__link--cta, .wa-float { transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .wa-float:hover { transform: scale(1.08); }

  /* foto: zoom lento no hover (galeria + quartos) */
  .galeria__item .photo > img, .quarto__foto .photo > img { transition: transform var(--dur-slow) var(--ease); }
  .galeria__item:hover .photo > img, .quarto__foto:hover .photo > img { transform: scale(1.05); }

  /* indicador de rolagem */
  .hero__rolar .ico { animation: flutua 2s var(--ease) infinite; }
  @keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

  /* HERO: load coreografado por --i (so quando ha JS) */
  .js .hero__painel > * { opacity: 0; transform: translateY(1.25rem); animation: heroIn var(--dur-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
  @keyframes heroIn { to { opacity: 1; transform: none; } }
  .js .photo--hero > img { animation: heroZoom 12s ease-out both; }
  @keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }

  /* REVEAL-on-scroll: fallback via IntersectionObserver (.is-visible) */
  .js .reveal { opacity: 0; transform: translateY(1.5rem); }
  .js .reveal.is-visible { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger)); }

  /* REVEAL-on-scroll: preferencial via CSS scroll-driven (quando suportado).
     Quando ha timeline, o JS NAO adiciona .is-visible — sem conflito. */
  @supports (animation-timeline: view()) {
    .js .reveal {
      opacity: 0;
      transform: translateY(1.5rem);
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 28%;
    }
    @keyframes revelar { to { opacity: 1; transform: none; } }
  }
}

/* reduz movimento: sem animacao, sem scroll suave (fallback = conteudo visivel) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}