/* =============================================================
   RETIRO TOCA DOS LEÕES — landing page
   Template reutilizável Velane (agentes WhatsApp).
   Para reaproveitar: troque os tokens em :root e o número
   nos links wa.me do index.html.
   ============================================================= */

:root {
  /* --- Paleta (derivada do lugar: mata, água, madeira) --- */
  --mata:    #22402E;  /* verde de mata — primário/escuro          */
  --mata-2:  #315a3f;  /* verde mais claro — gradientes            */
  --folha:   #7a9b67;  /* verde folha/sálvia — apoio               */
  --agua:    #17877c;  /* água (piscina/lago) — acento assinatura  */
  --agua-d:  #0f5f57;  /* água profunda — texto/hover sobre claro  */
  --madeira: #c99a63;  /* madeira mel — calor, uso pontual         */
  --areia:   #eff1e8;  /* papel com verde — fundo                  */
  --nevoa:   #fbfcf7;  /* superfície de cards                      */
  --carvao:  #23281f;  /* quase-preto quente — texto               */
  --carvao-70: #23281fb3;

  /* --- WhatsApp (canal de conversão) --- */
  --wpp:     #17877c;  /* usa a água do Toca p/ manter a paleta    */
  --wpp-d:   #0f5f57;

  /* --- Tipografia --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Métrica --- */
  --wrap: 1140px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 18px;
  --radius-lg: 30px;
  --shadow: 0 14px 40px -22px rgba(34, 64, 46, .45);
  --shadow-soft: 0 6px 22px -16px rgba(34, 64, 46, .5);

  --ease: cubic-bezier(.4, .1, .2, 1);
}

/* --- Reset leve --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--carvao);
  background: var(--areia);
  line-height: 1.6;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--agua-d); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* --- Acessibilidade --- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--mata); color: #fff; padding: .7rem 1rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }
:focus-visible {
  outline: 3px solid var(--agua);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   BOTÕES
   ============================================================= */
.btn {
  --btn-bg: var(--mata);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: .96rem;
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: .85rem 1.35rem; border-radius: 100px; border: 1.5px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 1.05rem 1.7rem; font-size: 1.02rem; }

.btn-wpp { --btn-bg: var(--wpp); }
.btn-wpp:hover { background: var(--wpp-d); }
.btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--mata);
  border-color: color-mix(in srgb, var(--mata) 35%, transparent);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--mata) 8%, transparent); }
.btn-outline {
  --btn-bg: var(--nevoa); --btn-fg: var(--mata);
  border-color: color-mix(in srgb, var(--mata) 22%, transparent);
  font-weight: 500;
}
.btn-outline:hover { background: #fff; }

/* Glifo WhatsApp (SVG inline, sem asset externo) */
.wpp-glyph {
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--wpp-svg) center / contain no-repeat;
  mask: var(--wpp-svg) center / contain no-repeat;
  --wpp-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.5 14.4c-.3-.15-1.75-.86-2-.96-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.75-1.64-2.05-.17-.3-.02-.46.13-.6.13-.14.3-.35.44-.53.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.6-.92-2.2-.24-.58-.49-.5-.67-.5l-.57-.01c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.22 3.08.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.63.71.22 1.36.2 1.87.12.57-.09 1.75-.72 2-1.4.24-.7.24-1.28.17-1.4-.07-.13-.27-.2-.57-.35zM12.05 21.5h-.02a9.4 9.4 0 0 1-4.8-1.32l-.34-.2-3.57.94.95-3.48-.22-.36a9.38 9.38 0 0 1-1.44-5.01c0-5.18 4.22-9.4 9.42-9.4a9.36 9.36 0 0 1 9.4 9.42c0 5.18-4.22 9.4-9.4 9.4zM20.05 3.93A11.34 11.34 0 0 0 12.04.6C5.8.6.73 5.67.73 11.9c0 2 .52 3.95 1.52 5.67L.63 23.4l5.98-1.57a11.3 11.3 0 0 0 5.42 1.38h.01c6.24 0 11.31-5.07 11.31-11.3 0-3.02-1.18-5.86-3.3-8z'/%3E%3C/svg%3E");
}
.wpp-glyph-lg { width: 1.6em; height: 1.6em; }

/* =============================================================
   HEADER
   ============================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--areia) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--mata) 12%, transparent);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--mata); }
.brand-logo { display: inline-flex; }
.brand-logo img { height: 46px; width: 46px; display: block; }
.brand-name { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name strong { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--mata); }
.brand-name em { font-style: normal; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--carvao-70); }

.site-nav { display: none; margin-left: auto; gap: 1.55rem; }
.site-nav a {
  color: var(--carvao); text-decoration: none; font-weight: 500; font-size: .95rem;
  position: relative; padding: .2rem 0;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--agua); transition: width .25s var(--ease);
}
.site-nav a:hover::after { width: 100%; }

.header-cta { margin-left: auto; }
.site-nav + .header-cta { margin-left: 0; }
/* 13/10/2026 — o cabeçalho NÃO quebra linha. Em ~1150 px, «Day Use», «Como chegar» e o subtítulo da
   marca caíam em duas linhas e o menu parecia torto (Henrique). Tudo em uma linha, o menu CENTRADO
   entre a marca e o botão e mais compacto; abaixo de 1280 px some o subtítulo e o botão vira
   «Reservar» (a área útil tem largura fixa, então 1366 px não dá mais folga que 1220). Abaixo de
   900 px o menu já some (mobile), como antes. */
.brand, .header-cta { flex-shrink: 0; }
.brand-name em, .site-nav a, .header-cta { white-space: nowrap; }
@media (min-width: 900px) {
  .site-nav { margin-inline: auto; gap: 1.1rem; }
  .site-nav a { font-size: .9rem; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .brand-name em { display: none; }
  .cta-longo { display: none; }
}

/* =============================================================
   HERO
   ============================================================= */
.hero { padding-top: clamp(2.2rem, 6vw, 4rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.hero-inner { display: grid; gap: clamp(1.8rem, 5vw, 3.2rem); align-items: center; }

.eyebrow {
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--agua-d); margin-bottom: 1rem;
}
.eyebrow-c { color: var(--folha); }
.eyebrow-c { color: color-mix(in srgb, var(--mata) 62%, var(--folha)); }

.hero h1 {
  font-size: clamp(2.4rem, 6.5vw, 4.1rem);
  font-weight: 500;
  color: var(--mata);
  margin-bottom: 1.15rem;
}
.lede {
  font-size: clamp(1.08rem, 2.2vw, 1.28rem);
  color: var(--carvao-70);
  max-width: 34ch;
  margin-bottom: 1.7rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; }
.hero-note { font-size: .9rem; color: var(--carvao-70); }
.hero-note::before { content: "◆"; color: var(--madeira); font-size: .7em; margin-right: .5em; vertical-align: middle; }

/* moldura orgânica (forma de lago) para as imagens — assinatura */
.hero-media { margin: 0; }
/* Preenchimento de marca (enquanto não há foto real). Sustenta-se sozinho:
   gradiente da paleta + ícone de linha + brilho sutil, dentro da moldura orgânica.
   Quando a foto chegar, troca-se o .figfill por <img class="media ph-*"> (1-por-1). */
.figfill {
  position: relative; display: grid; place-items: center; overflow: hidden;
  isolation: isolate;
  background: linear-gradient(155deg, var(--f1, var(--mata)), var(--f2, var(--agua-d)));
  color: var(--f-ink, #eff1e8);
}
.figfill::before {                       /* brilho suave — dá profundidade, não “buraco” */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(115% 90% at 28% 6%, rgba(255,255,255,.14), transparent 58%);
}
.figfill::after {                        /* ondulação assinatura no rodapé do painel */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 0;
  opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'%3E%3Cpath d='M0 15c15 0 15 -10 30 -10s15 10 30 10 15 -10 30 -10 15 10 30 10' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M0 23c15 0 15 -10 30 -10s15 10 30 10 15 -10 30 -10 15 10 30 10' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' opacity='.3'/%3E%3C/svg%3E") repeat-x bottom / 120px 30px;
}
.figfill > svg {
  position: relative; z-index: 1;
  width: 44%; max-width: 120px; height: auto;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.figfill .i-sun { fill: var(--madeira); stroke: none; }
.figfill .i-fill { fill: currentColor; stroke: none; }

/* variantes de tom, coesas com cada seção */
.figfill-deep  { --f1: var(--mata);   --f2: var(--agua-d); }
.figfill-fresh { --f1: #2b9d93;       --f2: var(--agua-d); }
.figfill-leaf  { --f1: #5f7f4e;       --f2: var(--mata);   }

/* tamanhos de ícone por contexto */
.ph-hero  > svg { width: 66%; max-width: 340px; }
.ph-dayuse > svg { width: 54%; max-width: 240px; }
.ph-map   > svg { width: 34%; max-width: 120px; }
.ph-stay  > svg { width: 34%; max-width: 130px; }

/* Foto real: use <img class="media ph-hero"> (mesma classe de forma do placeholder).
   object-fit: cover garante que a foto preenche a moldura orgânica sem distorcer.

   🔴 `height` É `auto`, NUNCA `100%` — e isto é conserto de um bug que foi PARA O AR no
   local em 23/09/2026. Com `height: 100%`, a imagem de um card que também tem texto
   (`.attr`: figura + h3 + p) estica até a altura INTEIRA do card — porque o grid dá
   `align-items: stretch` ao article — e o título e a descrição ficam POR BAIXO da foto.
   Medido: card de 337×398, imagem de 337×398 ocupando tudo. Os quiosques escaparam por
   acidente (lá a figure só tem a imagem, e a legenda é absoluta), então o defeito aparecia
   em 4 cards e não em 12 — o que o fazia parecer coisa das fotos novas, e não do `.media`.
   🔑 Com `aspect-ratio` na classe de forma + `width: 100%`, a altura sai do próprio
   aspect-ratio. `height: 100%` só existe onde a moldura NÃO tem aspect-ratio (ver
   `.stay-wide` no responsivo). */
.media {
  display: block; width: 100%; height: auto;
  object-fit: cover;
  border: 0; background: none;
}
img.ph-hero, img.ph-attr, img.ph-stay, img.ph-dayuse, img.ph-map, img.ph-kiosk {
  object-fit: cover; width: 100%; border: 0;
}
.ph-hero {
  aspect-ratio: 5 / 4;
  border-radius: 62% 38% 55% 45% / 55% 52% 48% 45%;
  box-shadow: var(--shadow);
}

/* Faixa de funcionamento */
.strip {
  list-style: none; margin: clamp(1.8rem, 5vw, 3rem) 0 0; padding: 1.1rem clamp(1rem, 3vw, 1.6rem);
  display: grid; gap: .9rem;
  background: var(--mata); color: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.strip li { display: flex; flex-direction: column; gap: .1rem; }
.strip-k { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.strip-v { font-size: .9rem; color: #ffffffc0; }

/* =============================================================
   RIPPLE DIVIDER (assinatura — superfície da água)
   ============================================================= */
.ripple {
  height: 34px; margin: clamp(2rem, 6vw, 3.5rem) 0;
  background:
    var(--ripple-svg) repeat-x center / 120px 34px;
  --ripple-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0 17c15 0 15 -12 30 -12s15 12 30 12 15 -12 30 -12 15 12 30 12' fill='none' stroke='%2317877c' stroke-width='2.4' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0 25c15 0 15 -12 30 -12s15 12 30 12 15 -12 30 -12 15 12 30 12' fill='none' stroke='%237a9b67' stroke-width='2' stroke-linecap='round' opacity='.4'/%3E%3C/svg%3E");
}
.ripple-flip { transform: scaleY(-1); }

/* =============================================================
   SECTIONS genéricas
   ============================================================= */
.section { padding-block: clamp(2.6rem, 7vw, 5rem); }
.section-title {
  font-size: clamp(1.7rem, 4.2vw, 2.7rem); color: var(--mata); max-width: 20ch; margin-bottom: 1.6rem;
}
.section-head { display: grid; gap: 1rem; margin-bottom: 2.2rem; }
.section-head .section-title { margin-bottom: 0; }
.section-lead { color: var(--carvao-70); font-size: 1.06rem; max-width: 52ch; }

.section-agua { background: color-mix(in srgb, var(--agua) 9%, var(--areia)); }
.section-madeira { background: color-mix(in srgb, var(--madeira) 15%, var(--areia)); }

/* --- Pilares --- */
.pillars { display: grid; gap: 1.1rem; }
.pillar {
  background: var(--nevoa); border-radius: var(--radius); padding: 1.6rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--mata) 10%, transparent);
  box-shadow: var(--shadow-soft);
}
.pillar-num {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--agua-d); background: color-mix(in srgb, var(--agua) 14%, transparent);
  padding: .3rem .6rem; border-radius: 100px; margin-bottom: .9rem;
}
.pillar h3 { font-size: 1.4rem; color: var(--mata); margin-bottom: .5rem; }
.pillar p { color: var(--carvao-70); }

/* --- Atrações --- */
.attractions { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, 1fr); }
.attr h3 { font-size: 1.2rem; color: var(--mata); margin: .8rem 0 .25rem; }
.attr p { color: var(--carvao-70); font-size: .92rem; }
/* 13/10/2026: com 5 atrações (caiaque e pedalinho viraram um card), a última fileira fica CENTRADA
   em vez de encostada à esquerda: a grade tem o dobro de colunas e cada card ocupa duas. */
@media (max-width: 619px) {
  .attractions { grid-template-columns: repeat(4, 1fr); }
  .attractions > .attr { grid-column: span 2; }
  .attractions > .attr:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
.ph-attr { aspect-ratio: 1 / 1; border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%; }
.attr-foot { margin-top: 1.8rem; font-size: .95rem; color: var(--carvao-70); }
.attr-foot::before { content: "🐾"; margin-right: .5em; }

/* --- Quiosques (23/09/2026) ---
   São OITO e a foto é o argumento: aqui a imagem é o card inteiro, com o nome numa faixa
   por cima. `aspect-ratio: 3/4` é a proporção nativa das fotos do celular do cliente, então
   o recorte é quase zero — o que chega do `fotos_site.mjs` é o que aparece. */
.kiosks-lead { max-width: 58ch; margin-bottom: 1.8rem; }
.kiosks { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.kiosk {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
  background: var(--nevoa);
}
.ph-kiosk { aspect-ratio: 3 / 4; border-radius: var(--radius); border-width: 0; }
.kiosk figcaption {
  position: absolute; inset: auto 0 0 0;
  font-family: var(--font-display); font-size: clamp(1rem, 2.6vw, 1.15rem); color: #fff;
  padding: 2.2rem .9rem .8rem;
  /* degradê em vez de faixa sólida: o nome fica legível sobre foto clara ou escura */
  background: linear-gradient(to top, rgba(12, 30, 22, .82), rgba(12, 30, 22, 0));
}
.kiosk-sem-foto .figfill { aspect-ratio: 3 / 4; }
.kiosk-sem-foto .figfill > svg { width: 30%; max-width: 90px; }
.kiosks-foot { margin-top: 1.6rem; }
.kiosks-foot::before { content: none; }          /* a pata do .attr-foot não cabe aqui */
.kiosks-foot a { font-weight: 600; color: var(--agua-d); }

/* --- Hospedagem / stays --- */
.stays { display: grid; gap: 1.2rem; }
.stay {
  background: var(--nevoa); border-radius: var(--radius); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mata) 10%, transparent);
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
}
.ph-stay { aspect-ratio: 3 / 2; border-radius: 0; border-width: 0 0 1.5px 0; }
/* GALERIA DO CARD (13/10/2026): todas as fotos da unidade, de deslizar com o dedo, o QUARTO primeiro.
   Rolagem nativa com encaixe (scroll-snap): funciona sem JS, no celular é o gesto que todo mundo
   conhece. O JS só atualiza o contador «1/3» e liga as setas, que aparecem com o mouse por cima. */
.stay-fotos { position: relative; }
.stay-trilho {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.stay-trilho::-webkit-scrollbar { display: none; }
.stay-trilho > img.ph-stay { flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.stay-trilho:focus-visible { outline: 3px solid var(--agua); outline-offset: -3px; }
.stay-conta {
  position: absolute; right: .6rem; bottom: .6rem; pointer-events: none;
  background: rgba(12, 30, 22, .62); color: #fff; font-size: .78rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: 100px; letter-spacing: .02em;
}
.stay-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--mata); font-size: 1.5rem; line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18); opacity: 0; transition: opacity .2s ease;
}
.stay-seta[hidden] { display: none; }
.stay-ant { left: .6rem; } .stay-prox { right: .6rem; }
.stay-seta:focus-visible { opacity: 1; outline: 3px solid var(--agua); }
@media (hover: hover) { .stay-fotos:hover .stay-seta { opacity: 1; } }
.stay-body { padding: 1.2rem 1.3rem 1.4rem; }
.stay-body h3 { font-size: 1.3rem; color: var(--mata); margin-bottom: .4rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.stay-body p { color: var(--carvao-70); font-size: .95rem; }
.stay-badge {
  font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: var(--folha); padding: .22rem .55rem; border-radius: 100px;
}
.stays-foot { margin-top: 1.6rem; color: var(--carvao-70); font-size: 1rem; }
.stays-foot a { display: inline-block; margin-top: .4rem; font-weight: 600; color: var(--agua-d); }

/* Café da manhã — foto larga fechando a seção de hospedagem */
.stays-cafe { margin: 2rem 0 0; }
.stays-cafe img { aspect-ratio: 3 / 2; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.stays-cafe figcaption,
.restaurant-media figcaption {
  margin-top: .7rem; font-size: .92rem; color: var(--carvao-70); font-style: italic;
}

/* --- Day Use --- */
.dayuse-inner { display: grid; gap: clamp(1.6rem, 5vw, 3rem); align-items: center; }
.dayuse-copy p { color: var(--carvao-70); margin-bottom: 1.3rem; max-width: 48ch; }
.dayuse-cta { justify-self: start; }
.dayuse-inner > .precos { margin: 0; }   /* o espaço vem do gap da grade */
.ticks { list-style: none; padding: 0; margin: 0 0 1.7rem; display: grid; gap: .6rem; }
.ticks li { position: relative; padding-left: 1.9rem; color: var(--carvao); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 1.3rem; height: 1.3rem;
  background: var(--agua); border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat;
}
.ph-dayuse { aspect-ratio: 4 / 3; border-radius: 42% 58% 60% 40% / 48% 42% 58% 52%; box-shadow: var(--shadow); }

/* --- Bloco de valores (23/09/2026) ---
   51% de quem escreve no WhatsApp pergunta preço. O bloco existe para responder antes de
   virar mensagem numa fila que hoje deixa 60% dos pedidos sem retorno. */
.precos {
  margin: 1.8rem 0 1.6rem; padding: 1.2rem 1.3rem 1.1rem;
  background: var(--nevoa); border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--mata) 12%, transparent);
}
.precos-titulo {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--folha);
  margin-bottom: .8rem;
}
.precos-lista { list-style: none; padding: 0; margin: 0 0 .9rem; display: grid; gap: .55rem; }
.precos-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; color: var(--carvao); }
.precos-lista strong {
  font-family: var(--font-display); font-size: 1.25rem; color: var(--mata);
  min-width: 3.6ch;                      /* alinha os valores numa coluna só */
}
.precos-lista span { color: var(--carvao-70); font-size: .88rem; flex: 1 1 12ch; }
.precos-nota { color: var(--carvao-70); font-size: .9rem; margin-bottom: .6rem; }
.precos-data { color: var(--carvao-70); font-size: .8rem; font-style: italic; margin: 0; }

/* --- Restaurante --- */
.restaurant-lead { color: var(--carvao-70); font-size: 1.08rem; max-width: 56ch; margin-bottom: 1.6rem; }
.menu-hints {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.menu-hints li {
  background: color-mix(in srgb, var(--madeira) 20%, var(--nevoa));
  border: 1px solid color-mix(in srgb, var(--madeira) 40%, transparent);
  color: var(--carvao); font-weight: 500; font-size: .92rem;
  padding: .5rem .95rem; border-radius: 100px;
}
.restaurant-foot { color: var(--carvao-70); font-size: .95rem; font-style: italic; }
.restaurant-media { margin: 0 0 1.4rem; }
.restaurant-media img { aspect-ratio: 3 / 2; border-radius: var(--radius); box-shadow: var(--shadow-soft); }

/* --- Retiros e encontros (23/09/2026) --- */
.retiro-inner { display: grid; gap: clamp(1.6rem, 5vw, 3rem); align-items: center; }
.retiro-copy p { color: var(--carvao-70); margin-bottom: 1.1rem; max-width: 48ch; }
.retiro-copy .btn { margin-top: .5rem; }
.retiro-media { margin: 0; }
.retiro-media img {
  aspect-ratio: 4 / 3;
  border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%;   /* mesma família orgânica do .ph-dayuse */
  box-shadow: var(--shadow);
}

/* =============================================================
   CTA FINAL
   ============================================================= */
.cta-final {
  background: linear-gradient(160deg, var(--mata), var(--mata-2));
  color: #fff; text-align: center; position: relative; overflow: hidden;
  padding-block: clamp(3rem, 8vw, 5.5rem);
}
.cta-final::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: var(--ripple-svg) repeat center / 120px 34px;
  --ripple-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='34' viewBox='0 0 120 34'%3E%3Cpath d='M0 17c15 0 15 -12 30 -12s15 12 30 12 15 -12 30 -12 15 12 30 12' fill='none' stroke='%2317877c' stroke-width='2' stroke-linecap='round' opacity='.35'/%3E%3C/svg%3E");
  -webkit-mask: linear-gradient(#000, transparent 70%); mask: linear-gradient(#000, transparent 70%);
}
.cta-inner { position: relative; max-width: 620px; }
.cta-final h2 { font-size: clamp(2rem, 5vw, 3.1rem); margin-bottom: 1rem; }
.eyebrow-light { color: color-mix(in srgb, var(--madeira) 80%, #fff); }
.cta-lede { color: #ffffffcf; font-size: 1.1rem; margin-bottom: 2rem; }
.cta-final .btn-wpp { --btn-bg: #fff; --btn-fg: var(--agua-d); }
.cta-final .btn-wpp:hover { --btn-bg: var(--areia); background: var(--areia); }
.cta-note { margin-top: 1.1rem; font-size: .9rem; color: #ffffffb0; }

/* =============================================================
   LOCALIZAÇÃO
   ============================================================= */
.local-inner { display: grid; gap: clamp(1.6rem, 5vw, 3rem); align-items: center; }
.local-address { font-style: normal; font-size: 1.15rem; color: var(--carvao); margin-bottom: 1.6rem; line-height: 1.5; }
.local-links { display: flex; flex-wrap: wrap; gap: .8rem; }
.ph-map { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer { background: var(--mata); color: #fff; padding-block: 2.4rem; }
.footer-inner { display: grid; gap: 1.3rem; }
.footer-brand { display: flex; flex-direction: column; }
.footer-brand strong { font-family: var(--font-display); font-size: 1.25rem; }
.footer-brand span { font-size: .85rem; color: #ffffffa0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-nav a { color: #fff; text-decoration: none; font-size: .95rem; opacity: .85; }
.footer-nav a:hover { opacity: 1; text-decoration: underline; }
.footer-legal { font-size: .82rem; color: #ffffff85; }

/* =============================================================
   FAB WHATSAPP (flutuante)
   ============================================================= */
.fab-wpp {
  position: fixed; right: clamp(1rem, 4vw, 1.8rem); bottom: clamp(1rem, 4vw, 1.8rem); z-index: 120;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--wpp); color: #fff; text-decoration: none; font-weight: 700;
  padding: .85rem 1.15rem; border-radius: 100px;
  box-shadow: 0 12px 30px -8px rgba(15, 95, 87, .6);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.fab-wpp:hover { transform: translateY(-3px) scale(1.03); background: var(--wpp-d); }
.fab-label { font-size: .95rem; }

/* =============================================================
   RESPONSIVO
   ============================================================= */
@media (min-width: 620px) {
  .strip { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  .strip li { padding-inline: .3rem; }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .attractions { grid-template-columns: repeat(6, 1fr); }
  .attractions > .attr { grid-column: span 2; }
  .attractions > .attr:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
  .kiosks { grid-template-columns: repeat(3, 1fr); }
  .stays { grid-template-columns: repeat(2, 1fr); }
  .stay-wide { grid-column: 1 / -1; flex-direction: row; }
  /* aqui a moldura perde o aspect-ratio (acompanha a altura do texto ao lado), então é o
     único lugar em que a imagem precisa de `height: 100%` — ver a nota em `.media`. */
  .stay-wide .stay-fotos { flex: 0 0 46%; width: 46%; min-width: 0; border-right: 1.5px solid color-mix(in srgb, var(--mata) 10%, transparent); }
  .stay-wide .stay-trilho { height: 100%; }
  /* 13/10/2026: com a FOTO (antes era o desenho), `height: 100%` fazia a imagem derivar a largura da
     altura pela proporção 3/2 e engolir o card inteiro (927 px de foto, 138 px de texto). A largura
     é fixa e a altura acompanha a do texto ao lado (stretch); o recorte fica com o object-fit. */
  .stay-wide .stay-trilho > img.ph-stay { height: 100%; min-height: 300px; aspect-ratio: auto; border-width: 0; }
  .stay-wide .stay-body { align-self: center; }
  .section-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 2rem; }
  .footer-inner { grid-template-columns: 1fr auto; align-items: center; }
  .footer-legal { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .hero-inner { grid-template-columns: 1.05fr .95fr; }
  /* 13/10/2026: sem a foto (era pequena e solta no meio da coluna), o quadro de preços vira a coluna
     da direita, ao lado do texto; o botão fica embaixo do texto. No celular: texto, preços, botão. */
  .dayuse-inner { grid-template-columns: 1fr 1fr; align-items: start; column-gap: clamp(2rem, 5vw, 4rem); }
  .dayuse-inner > .dayuse-copy { grid-column: 1; grid-row: 1; }
  .dayuse-inner > .precos { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
  .dayuse-inner > .dayuse-cta { grid-column: 1; grid-row: 2; }
  .local-inner { grid-template-columns: 1.1fr .9fr; }
  .retiro-inner { grid-template-columns: .9fr 1.1fr; }
  .attractions { gap: 1.5rem; }
  .kiosks { grid-template-columns: repeat(4, 1fr); }
  .stays { grid-template-columns: repeat(3, 1fr); }
}

/* Header: em telas pequenas, some o texto do CTA e a nav vira só o botão */
@media (max-width: 560px) {
  .header-cta { padding: .7rem .9rem; font-size: 0; gap: 0; }
  .header-cta .wpp-glyph { width: 1.3rem; height: 1.3rem; }
  .brand-name em { display: none; }
}

/* =============================================================
   MOVIMENTO — entrada ao rolar e resposta ao passar o mouse (23/09/2026)

   🔴 TUDO AQUI DEPENDE DA CLASSE `.js` NO <html>, e isso não é firula: o JS a acrescenta na
   primeira linha do script. Sem ela, nenhuma regra de opacidade pega e a página aparece
   inteira, do jeito antigo. Se o script quebrar, falhar ao carregar ou o visitante tiver JS
   desligado, o pior caso é «sem animação» — NUNCA «site em branco», que é o que acontece
   quando se esconde o conteúdo no CSS e se espera o JS para mostrar.
   ============================================================= */

/* --- Entrada ao rolar --- */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* a foto do topo entra de leve, sem deslocar: ela é a primeira coisa que a pessoa vê */
.js .hero-media.reveal { transform: scale(.985); }
.js .hero-media.reveal.is-in { transform: none; }

/* --- Passar o mouse: card de quiosque ---
   A foto é o card inteiro, então o zoom é dela, e o cartão sobe um pouco. */
.kiosk img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.kiosk { transition: transform .35s ease, box-shadow .35s ease; }
@media (hover: hover) {
  .kiosk:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .kiosk:hover img { transform: scale(1.06); }
}

/* --- Passar o mouse: atração ---
   A moldura é um blob com raio orgânico; o zoom precisa de `overflow: hidden` no wrapper,
   que aqui é a própria imagem (ela já é o elemento arredondado), então animo a escala dela. */
.attr img, .attr .figfill { transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease; }
@media (hover: hover) {
  .attr:hover img, .attr:hover .figfill { transform: scale(1.04); box-shadow: var(--shadow-soft); }
}

/* --- Passar o mouse: unidade de hospedagem --- */
.stay { transition: transform .3s ease, box-shadow .3s ease; }
@media (hover: hover) {
  .stay:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
}

/* --- Botões: um leve empurrão, sem exagero --- */
.btn { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
}

/* --- Cabeçalho ganha sombra depois que a página rola --- */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(12, 30, 22, .10); }

/* =============================================================
   MOTION — respeita reduced-motion
   ⚠️ Vem por último de propósito: precisa vencer tudo acima. Quem pediu menos movimento no
   sistema recebe a página estática e COMPLETA — por isso o `.reveal` volta a ser visível
   aqui, em vez de simplesmente perder a transição (senão ficaria invisível para sempre).
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal, .js .hero-media.reveal { opacity: 1 !important; transform: none !important; }
}