/* ====================================================================
   Hotel Fazenda Minas Real · Folha de estilo única (design system + páginas)
   Estilo inspirado nos padrões de UX/UI de resorts de luxo (Four Seasons):
   fotografia full-bleed, muito respiro, tipografia serifada elegante,
   paleta neutra e sóbria com 1 acento discreto (dourado fosco).
   --------------------------------------------------------------------
   ▸ PERSONALIZE AQUI: edite as variáveis no bloco :root abaixo.
   ==================================================================== */

/* ============================================================
   PALETA — TODA EM ESCALA DE CINZA NEUTRA, DE PROPOSITO.
   Nenhuma cor de marca sobrou neste arquivo.

   Para aplicar a marca do hotel, troque SO os valores abaixo.
   Mantenha o mesmo nivel de contraste do cinza que esta ali:
   se o valor atual e escuro, escolha uma cor escura — senao o
   texto claro por cima some.

   As unicas cores que restam no arquivo sao funcionais e nao
   pertencem a marca: verde do WhatsApp e vermelho de erro.
   ============================================================ */
:root {
  /* ================= PALETA OFICIAL DO MINAS REAL =================
     Cores da marca. Os nomes --c-* continuam existindo porque sao usados em
     ~200 lugares; eles agora apontam para os tokens oficiais.               */
  --verde-real:     #066233;   /* oficial do logo                          */
  --verde-profundo: #12301D;
  --dourado-real:   #F5B219;   /* oficial do logo                          */
  --amarelo-sol:    #F2C94C;
  --creme:          #F6F1E6;

  /* ---------- Papeis ---------- */
  --c-bg:        var(--creme);           /* fundo geral                    */
  --c-bg-alt:    #ECE5D4;                /* secoes alternadas — areia do creme */
  --c-sand:      #DED3B8;
  --c-ink:       var(--verde-profundo);  /* texto — 12,7:1 sobre creme     */
  --c-muted:     #4C5B50;                /* apoio — 6,4:1 sobre creme      */
  --c-line:      rgba(18,48,29,.14);
  --c-accent:    var(--verde-real);      /* 6,7:1 sobre creme              */
  --c-accent-dk: #044A26;                /* hover                          */
  --c-gold:      var(--dourado-real);    /* SO preenchimento, filete e icone
                                            grande: sobre claro da 1,7:1 e
                                            nunca pode ser cor de texto.    */
  --c-gold-ink:  #8A6A0E;                /* dourado que PODE ser texto:
                                            5,1:1 no branco, 4,5:1 no creme */
  --c-sun:       var(--amarelo-sol);     /* acento sobre fundo escuro       */
  --c-white:     #ffffff;
  --c-dark:      var(--verde-profundo);  /* rodape e faixas escuras         */
  --c-on-dark:   var(--creme);           /* 12,7:1 sobre verde profundo     */
  --cta-bg:      var(--dourado-real);    /* botao de reserva                */
  --cta-bg-dk:   #DDA00F;                /* hover do botao                  */
  --cta-texto:   var(--verde-profundo);  /* 7,7:1 sobre o dourado           */
  --c-alerta:    #c0503f;                /* vermelho de atencao — o mesmo do
                                            painel de WhatsApp (--wl-err), para
                                            o site nao ganhar um segundo vermelho */

  /* ---------- TIPOGRAFIA ---------- */
  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* títulos */
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* corpo */

  /* ---------- RITMO / LAYOUT ---------- */
  --maxw:      1280px;            /* largura máxima do conteúdo          */
  --gutter:    clamp(1.25rem, 5vw, 5rem);  /* margem lateral             */
  --section-y: clamp(4.5rem, 10vw, 10rem); /* respiro vertical (generoso)*/
  --radius:    2px;              /* cantos discretos                     */

  /* ---------- MOTION (timings confortáveis 0.3–0.6s, ease) ---------- */
  --ease:  cubic-bezier(.33, .65, .35, 1);
  --t-fast: .3s;
  --t-med:  .5s;
  --t-slow: .7s;

  --header-h: 86px;
}

/* ====================================================================
   RESET
   ==================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-weight: 400;
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, select, textarea { font: inherit; }
::selection { background: var(--c-accent); color: #fff; }

/* ====================================================================
   TIPOGRAFIA / HELPERS
   ==================================================================== */
/* text-wrap: balance distribui as palavras entre as linhas em vez de encher
   a primeira e largar o resto embaixo. Sem isso, titulos como "Celebrar
   longe do barulho da cidade" quebravam com uma palavra sozinha na ultima
   linha. Vale para todos os titulos do site de uma vez; navegador antigo
   ignora a propriedade e quebra como antes.                              */
.display { font-family: var(--f-display); font-weight: 500; line-height: 1.08; letter-spacing: .005em; text-wrap: balance; }
/* Escala tipografica no padrao Komplexa (mesma da Solar Dona Dora).
   O Template 2 vinha um degrau acima e o titulo tapava a foto.        */
.h1 { font-size: clamp(1.9rem, 5vw, 3.4rem); }
.h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); }
.h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }

.eyebrow {
  font-family: var(--f-body);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--c-accent-dk);
}
/* O modificador --light so aparece SOBRE FUNDO ESCURO: os cartoes de foto da
   home e de /eventos/ (texto sobre o veu escuro) e os dois CTA .section--dark.
   Mesmo assim ele usava o --c-accent, que fora da .section--alt e o verde
   #146a32 — verde escuro sobre foto escura, quase ilegivel. Passa a usar o
   --c-sun, que e o token que existe exatamente para acento sobre fundo escuro
   e e o mesmo amarelo dos rotulos do rodape. */
.eyebrow--light { color: var(--c-sun); }
.lead { font-size: clamp(.95rem, 1.1vw, 1.06rem); color: var(--c-muted); max-width: 62ch; }
.section__head.center .lead { margin-inline: auto; }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
/* Container mais largo que o padrao, para a dobra em que a FOTO e o argumento
   e nao o texto. Mexe so no --maxw local: continua sendo o mesmo .container,
   com a mesma calha, entao nao ha estouro lateral nem breakout com 100vw. */
.container--largo { --maxw: 1560px; }
.section { padding-block: var(--section-y); }
/* ---------- Secoes intercaladas em Verde Real ----------
   Em vez de reescrever cada componente, a seccao REDEFINE os tokens no proprio
   escopo. Tudo que ja usa var(--c-ink), var(--c-muted), var(--c-line) etc. vira
   sozinho — inclusive os que ainda nao existem. As secoes normais continuam
   creme, entao a pagina alterna creme / verde / creme.
   Contrastes medidos: creme sobre verde real 6,65:1 · amarelo sol sobre verde
   real 4,72:1 · creme sobre o verde profundo dos cartoes 12,72:1.            */
.section--alt {
  background: var(--verde-real);
  color: var(--creme);

  --c-ink:       var(--creme);              /* titulos e texto forte          */
  --c-muted:     rgba(246,241,230,.84);     /* texto de apoio — 5,3:1         */
  --c-line:      rgba(246,241,230,.24);     /* filetes e divisorias           */
  --c-accent:    var(--amarelo-sol);        /* rotulos e numeros — 4,7:1      */
  --c-accent-dk: var(--amarelo-sol);
  --c-bg:        var(--verde-profundo);     /* cartoes dentro da secao        */
  --c-bg-alt:    var(--verde-profundo);
  --c-white:     var(--verde-profundo);
}
/* O dourado do CTA continua dourado: e o unico botao que nao vira token local. */
.section--alt .btn--solid { background: var(--cta-bg); color: var(--cta-texto); }
.section--dark { background: var(--c-dark); color: var(--c-on-dark); }
/* O CTA final e o rodape sao os dois verde profundo: emendados, o respiro de
   ate 10rem embaixo do CTA mais os 6rem de cima do rodape viravam um bloco
   escuro vazio de 16rem. Como a cor nao separa mais os dois, o espaco tambem
   nao precisa. Vale so para a ultima secao do <main>.                        */
main > .section:last-child { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section--dark .display, .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-white); }
.center { text-align: center; }
.section__head { max-width: 680px; margin-inline: auto; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
/* ---------- .h2--sol ----------
   Titulo em amarelo, um degrau maior que o .h2 comum. Existe para a promessa
   central da home ("Nao e pensao completa. E completissima."): ela precisa pesar mais que os
   outros titulos da pagina, e o amarelo-sol e o acento da .section--alt, onde
   ela vive — 4,7:1 sobre o Verde Real. Fora de secao verde o --c-accent e o
   dourado, que sobre creme continua legivel, entao a classe e reaproveitavel. */
.h2--sol { color: var(--c-accent); font-size: clamp(2.1rem, 5.6vw, 3.3rem); }
.section__head .eyebrow { display: block; margin-bottom: 1rem; }
.section__head .lead { margin-top: 1.1rem; }

/* ---------- .lead--abertura ----------
   Para a dobra que nao tem cabecalho proprio: em experiencias/ o page-hero ja
   diz "Experiencias" e "Um dia inteiro aqui dentro", entao repetir eyebrow e
   h2 logo abaixo era so eco. Sem eles, porem, sobrava um paragrafo de 1rem
   solto no meio do creme, e a dobra comecava sem nenhuma entrada.
   Esta linha assume o papel do titulo: fonte de display, corpo de subtitulo e
   o mesmo filete dourado do .hero__divider por cima, que e o sinal de "comeca
   aqui" que o site ja usa no topo. */
.lead--abertura {
  position: relative;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.7vw, 1.95rem);
  line-height: 1.32;
  color: var(--c-ink);
  max-width: 32ch;
  margin-inline: auto;
  padding-top: 2.4rem;
}
.lead--abertura::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 3px; background: var(--c-gold);
}

/* ---------- BOTÕES ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 2.2rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn--solid  { background: var(--cta-bg); color: var(--cta-texto); }
.btn--solid:hover  { background: var(--cta-bg-dk); transform: translateY(-2px); }
.btn--outline { border-color: currentColor; color: var(--c-ink); }
.btn--outline:hover { background: var(--c-ink); color: var(--c-bg); }
.btn--light  { border-color: rgba(255,255,255,.6); color: #fff; }
.btn--light:hover  { background: #fff; color: var(--c-ink); border-color: #fff; }
.btn--sm { padding: .75rem 1.5rem; font-size: .68rem; }

/* Link com sublinhado animado */
.ulink {
  position: relative; display: inline-block;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--c-accent-dk); padding-bottom: 4px;
}
.ulink::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(.4); transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.ulink:hover::after { transform: scaleX(1); }

/* ====================================================================
   HEADER (transparente → sólido ao rolar)
   ==================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}
.site-header__inner {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  /* O brasao e quase quadrado, entao ele ganha altura e a barra compensa com
     menos respiro vertical: o topo continua com os mesmos ~90px de antes. */
  padding: .75rem var(--gutter);
}
.brand { display: flex; flex-direction: column; line-height: 1; color: #fff; transition: color var(--t-med) var(--ease); }
.brand__name { font-family: var(--f-display); font-size: 1.7rem; font-weight: 600; letter-spacing: .26em; padding-left: .26em; }
.brand__tag  { font-size: .54rem; letter-spacing: .42em; text-transform: uppercase; margin-top: 5px; opacity: .85; }
/* Logo (imagem) — brasao dourado oficial, mesmo desenho no topo e no rodape */
.brand__logo { height: clamp(52px, 6vw, 66px); width: auto; display: block; transition: filter var(--t-med) var(--ease); }
/* O brasao e so dourado, entao ele aparece bem tanto sobre a foto do hero
   quanto sobre a barra verde. A sombra leve so garante o contorno sobre as
   fotos mais claras do topo. */
.site-header .brand__logo { filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.site-header.is-solid .brand__logo { filter: none; }
.footer__brand .brand__logo { filter: none; opacity: 1; height: 120px; width: auto; align-self: flex-start; margin-top: 0; }

.nav { display: flex; gap: clamp(1.1rem, 2.2vw, 2.4rem); }
.nav a {
  position: relative; color: #fff; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .92; padding: .4rem 0; transition: opacity var(--t-fast) var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--amarelo-sol); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav a:hover { opacity: 1; } .nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 1rem; }

/* Estado sólido */
.site-header.is-solid {
  background: var(--verde-real);
  box-shadow: 0 1px 0 rgba(18,48,29,.35), 0 12px 40px -28px rgba(18,48,29,.55);
}
/* Sobre o Verde Real a barra pede texto claro: creme da 6,65:1. */
.site-header.is-solid .brand,
.site-header.is-solid .nav a { color: var(--creme); }
.site-header.is-solid .btn--light { border-color: rgba(246,241,230,.55); color: var(--creme); }
.site-header.is-solid .btn--light:hover { background: var(--creme); color: var(--verde-profundo); }
.site-header.is-hidden { transform: translateY(-100%); }

/* Burger */
.burger { display: none; width: 30px; height: 20px; position: relative; }
/* O desenho continua 30x20, mas o dedo precisa de 44x44 (WCAG 2.5.5).
   O alvo cresce por fora, num pseudo-elemento, para nao empurrar o header. */
.burger::before { content: ''; position: absolute; inset: -12px -7px; }
.burger span { position: absolute; left: 0; height: 2px; width: 100%; background: #fff; transition: all var(--t-fast) var(--ease); }
.burger span:nth-child(1){ top: 0; } .burger span:nth-child(2){ top: 9px; } .burger span:nth-child(3){ top: 18px; }
.site-header.is-solid .burger span { background: var(--creme); }
body.nav-open .burger span:nth-child(1){ top: 9px; transform: rotate(45deg); background: var(--c-ink); }
body.nav-open .burger span:nth-child(2){ opacity: 0; }
body.nav-open .burger span:nth-child(3){ top: 9px; transform: rotate(-45deg); background: var(--c-ink); }

/* Menu mobile
   A folha cobre a tela inteira, mas o header continua por cima (z-index 100),
   entao o painel comeca ABAIXO da barra: o padding-top reserva a altura do
   topo + folga, senao o brasao caia em cima do primeiro item ("Acomodacoes").
   O bloco de links fica centrado no que sobra e, em tela baixa, rola sozinho. */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99; background: var(--c-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  padding: calc(var(--header-h) + 1.25rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-100%); visibility: hidden;
  transition: transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.mobile-nav.is-open { transform: translateY(0); visibility: visible; transition: transform var(--t-med) var(--ease), visibility 0s; }
.mobile-nav a { font-family: var(--f-display); font-size: clamp(1.5rem, 6.5vw, 1.9rem); line-height: 1.15; color: var(--c-ink); padding: .45rem 1rem; }
.mobile-nav .btn { margin-top: .9rem; }

/* Com o menu aberto a pagina atras nao rola, a barra nao se esconde no scroll
   e o topo fica transparente sobre o creme: so o brasao dourado e o X. O botao
   "Reservar" do header sai de cena — ele e texto branco sobre creme (sumiria)
   e o proprio menu ja traz o "Reservar Agora". */
body.nav-open { overflow: hidden; }
body.nav-open .site-header,
body.nav-open .site-header.is-solid { background: transparent; box-shadow: none; transform: none; }
body.nav-open .site-header .brand__logo { filter: none; }
body.nav-open .header-actions .btn { opacity: 0; pointer-events: none; }

/* ====================================================================
   HERO full-bleed + Ken Burns + parallax
   ==================================================================== */
.hero { position: relative; height: 100svh; min-height: 600px; display: flex; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Sem Ken Burns. Os 120% de altura existiam so para dar folga ao zoom da
   animacao; sem ela, viram 100% — senao a foto seria cortada a toa. O hero
   nao tem data-parallax, entao nada mais depende dessa folga. */
/* O <picture> do hero precisa virar bloco de tamanho cheio, senao a <img>
   dentro dele (inline por padrao) perde o height: 100%. */
.hero__media picture { display: block; position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Duas camadas. A vertical e a de sempre. A horizontal entrou com a foto
     nova: o lado esquerdo do quadro e a fachada amarela em pleno sol, e o
     titulo branco sumia em cima dela. Ela escurece so a faixa da esquerda,
     onde fica o texto, e solta a foto do meio para a direita. */
  background:
    linear-gradient(90deg, rgba(18,48,29,.55) 0%, rgba(18,48,29,.24) 42%, rgba(18,48,29,0) 68%),
    linear-gradient(180deg, rgba(18,48,29,.45) 0%, rgba(18,48,29,.18) 38%, rgba(18,48,29,.60) 100%);
}
/* O bloco continua centralizado na altura, mas desce um degrau: centralizado
   no osso ele encostava no meio da foto e brigava com a fachada. O translate
   move so o desenho, sem mexer na caixa — no celular ele nao vale, porque la
   o conteudo ja fica colado na base. */
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin-inline: auto; padding-left: clamp(.75rem, 1.1vw, 1.1rem); padding-right: var(--gutter); color: #fff; transform: translateY(clamp(1.5rem, 7vh, 5rem)); }
.hero__eyebrow { color: rgba(255,255,255,.9); display: block; margin-bottom: 1.1rem; font-size: clamp(.66rem, 1vw, .92rem); }
/* O titulo repete o lockup da marca: "Hotel Fazenda" centralizado em cima de
   "Minas Real". A quebra vem do <br> no HTML e a caixa encolhe ate o texto,
   entao o bloco continua alinhado a esquerda do hero. */
.hero__title { font-family: var(--f-display); font-weight: 500; line-height: 1.08; font-size: clamp(1.8rem, 4.2vw, 3.4rem); width: fit-content; text-align: center; }
/* Filete entre o nome do hotel e a tagline — padrao Komplexa. */
.hero__divider { display: block; width: 60px; height: 3px; background: var(--c-gold); margin: 1.1rem 0 1.3rem; }
.hero__sub { max-width: 42ch; font-size: clamp(1rem, 1.5vw, 1.2rem); color: rgba(255,255,255,.95); text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }
.hero__scroll { position: absolute; left: 50%; bottom: 1.8rem; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: #fff; }
.hero__scroll .line { width: 1px; height: 46px; background: rgba(255,255,255,.5); overflow: hidden; position: relative; }
.hero__scroll .line::after { content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--c-accent); animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { to { top: 100%; } }
.hero__scroll span { font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; }

/* Hero menor para páginas internas */
/* 92vh, subido de 84 em 10/09/2026 a pedido do cliente, em TODAS as paginas
   internas: quanto mais alta a faixa, menos ela corta a foto, porque a
   proporcao dela se aproxima do 1,5:1 dos arquivos. Em 84vh aparecia ~73% da
   altura do quadro; em 92vh passa de 80%.
   O custo, que a versao anterior deste comentario evitava de proposito: com a
   faixa quase do tamanho da tela, a secao seguinte quase nao aparece na
   primeira dobra. Foi decisao do cliente, depois de ver as duas.
   O caminho tambem funciona ao contrario, e isso ja foi testado aqui: a
   /eventos/ chegou a ter 66vh e a foto apareceu MENOS, nao mais.          */
.page-hero { position: relative; height: 92vh; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; }
/* Sem parallax no topo das paginas internas. O inset de -10% e o height de
   115% existiam so para dar curso ao movimento, e juntos comiam quase um
   quinto do quadro — em cima de uma faixa que ja e 2,6:1 contra fotos de
   1,5:1. Com inset 0 e height 100% a foto aparece o maximo que a faixa
   permite, e o assunto fica reconhecivel. Mesma direcao da remocao do Ken
   Burns do hero da home.                                                    */
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media picture { display: block; position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18,48,29,.45), rgba(18,48,29,.60)); }
.page-hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) clamp(1rem, 2vw, 1.6rem); color: #fff; }
.page-hero .eyebrow { color: rgba(255,255,255,.9); display: block; margin-bottom: .9rem; }
.page-hero h1 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.08; max-width: 16ch; }
.breadcrumb { margin-top: 1rem; font-size: .78rem; letter-spacing: .04em; color: rgba(255,255,255,.8); }
.breadcrumb a:hover { color: #fff; }

/* ====================================================================
   FAIXA INTRO / SPLIT (texto + imagem)
   ==================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; overflow: hidden; border-radius: var(--radius); }
.split__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.split__media:hover img { transform: scale(1.05); }
.split__text p { color: var(--c-muted); margin-top: 1.2rem; max-width: 52ch; }
.split__text .eyebrow { display: block; margin-bottom: 1rem; }
.split__text h2 { margin-bottom: .4rem; }
.split__text .btn, .split__text .ulink { margin-top: 1.8rem; }

/* Métricas */
.metrics { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.4rem; }
.metric .n { font-family: var(--f-display); font-size: 2.6rem; color: var(--c-accent-dk); line-height: 1; }
.metric .l { font-size: .74rem; letter-spacing: .04em; color: var(--c-muted); margin-top: .3rem; max-width: 16ch; }

/* ====================================================================
   CARDS DE ACOMODAÇÃO / EXPERIÊNCIA
   ==================================================================== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.5vw, 2rem); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
/* ---------- .cards--centro ----------
   Grade de 3 colunas que CENTRALIZA a ultima fileira quando ela fica
   incompleta, em vez de deixar o vao a direita. Usada em /experiencias/, que
   tem 8 cartoes (3+3+2). Vira flex porque grid nao centraliza fileira orfa sem
   gambiarra de margem. A base de 1/3 reproduz exatamente a largura que as tres
   colunas tinham, entao as fileiras cheias nao mudam nada.
   Quando a recreacao ganhar foto e virar o 9o cartao isto deixa de ter efeito
   sozinho: 3x3 nao tem fileira orfa.                                          */
.cards--centro { display: flex; flex-wrap: wrap; justify-content: center; }
.cards--centro > * { flex: 0 1 calc((100% - 2 * clamp(1.4rem, 2.5vw, 2rem)) / 3); }
.card {
  position: relative; overflow: hidden; border-radius: var(--radius); background: var(--c-white);
  border: 1px solid var(--c-line); display: flex; flex-direction: column;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(28,28,28,.45); }
.card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
/* ---------- .cards--vitrine ----------
   Grade em que a foto e o argumento, e nao a ficha tecnica: a media passa de
   4/3 para 5/4 e o corpo do cartao respira mais. E modificador na GRADE, e nao
   no .card, porque o mesmo componente aparece em grades que nao querem isso —
   os cartoes de evento, por exemplo, onde o texto e o argumento.
   Usado na home e na dobra de categorias de /acomodacoes/, que sao as duas
   grades em que a pessoa escolhe olhando a foto.
   Anda junto com o .container--largo: 445 px de tile no lugar de 352. Os
   ala-*-01 ja sao os originais de 1600 px (servem tambem ao lightbox), entao
   nao ha nada para regerar. */
.cards--vitrine .card__media { aspect-ratio: 5/4; }
.cards--vitrine .card__body { padding: 1.9rem 2rem 2.1rem; }
.cards--vitrine .card__body p { font-size: 1rem; }
/* A mesma grade tambem serve aos .imm (texto sobre a foto). Ali nao ha media
   separada para esticar: o que cresce e a altura do proprio cartao, dos 460 px
   do .imm base para 560. Com o .container--largo o cartao vai a 445x560, quase
   o dobro da area de antes. */
.cards--vitrine .imm { min-height: 560px; }
.cards--vitrine .imm__body p { font-size: .95rem; }
.card__tag { position: absolute; top: 1rem; left: 1rem; background: rgba(28,28,28,.78); color: #fff; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; padding: .4rem .75rem; }
.card__body { padding: 1.6rem 1.7rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .5rem; }
.card__body p { color: var(--c-muted); font-size: .95rem; margin-bottom: 1.4rem; }
.card__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: auto 0 1.4rem; }
.card__meta span { font-size: .7rem; letter-spacing: .03em; color: var(--c-muted); border: 1px solid var(--c-line); padding: .3rem .65rem; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; }
.card__price { font-size: .82rem; color: var(--c-muted); }
.card__price strong { color: var(--c-ink); font-weight: 600; }

/* Card "imersivo" (texto sobre a foto) — estilo Four Seasons */
.imm { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 460px; display: flex; align-items: flex-end; }
.imm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.imm:hover img { transform: scale(1.06); }
/* Cartão que virou galeria (data-gallery): a foto principal fica parada.
   O zoom de hover era o único sinal de que o cartão respondia ao mouse;
   agora quem faz esse papel é o selo "N fotos", que diz o que acontece
   no clique em vez de só se mexer. Escopo: só os .imm com galeria — os
   outros (home e eventos) seguem com o zoom. */
.imm.has-gallery img { transition: none; }
.imm.has-gallery:hover img { transform: none; }
.imm::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,48,29,0) 35%, rgba(18,48,29,.60)); }
.imm__body { position: relative; z-index: 1; padding: 2rem; color: #fff; }
.imm__body h3 { margin: .4rem 0 .6rem; }
.imm__body p { color: rgba(255,255,255,.85); font-size: .88rem; line-height: 1.55; max-width: 34ch; }
.imm__body .ulink { color: #fff; margin-top: 1rem; }

/* Variante .imm--focus — cards com o texto sobre a foto.
   O estado padrão JÁ é o estado final: overline + título no terço
   central e o CTA ancorado no rodapé, sempre visíveis, sem depender
   de hover. O gradiente fica sempre ligado e é forte na faixa do meio
   para o título branco ler mesmo sobre foto clara.
   No hover há apenas realce: o overlay escurece um pouco e a imagem
   dá o zoom sutil herdado de .imm — nada aparece nem some.
   Escopo isolado: os .imm sem o modificador seguem com o texto
   ancorado no rodapé. */
.imm--focus { align-items: stretch; }

.imm--focus::after {
  background: linear-gradient(180deg, rgba(18,48,29,.45) 0%, rgba(18,48,29,.55) 45%, rgba(18,48,29,.60) 100%);
  transition: background var(--t-med) var(--ease);
}
.imm--focus:hover::after,
.imm--focus:focus-within::after {
  background: linear-gradient(180deg, rgba(18,48,29,.50) 0%, rgba(18,48,29,.58) 45%, rgba(18,48,29,.60) 100%);
}

/* Overline + título no terço central; o CTA ancorado no rodapé. */
.imm--focus .imm__body {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; padding-bottom: 4.6rem;
}
.imm--focus .imm__body .ulink { position: absolute; left: 2rem; bottom: 2rem; margin-top: 0; }

/* O padding-bottom acima reserva a faixa do CTA ancorado. Nos cards
   sem CTA (os 6 do Day Use) essa reserva empurraria o texto para
   fora do centro, entao devolvemos o padding normal.
   Sem suporte a :has() o texto so fica um pouco acima do centro —
   degrada sem quebrar. */
.imm--focus .imm__body:not(:has(.ulink)) { padding-bottom: 2rem; }

/* .imm--reveal — camada aplicada POR CIMA de .imm--focus, usada só nos
   3 cards de Experiências da home. Em repouso o card é apenas a foto:
   sem texto e sem overlay. No hover (ou no foco por teclado) o
   gradiente entra e o bloco de texto desce de cima para baixo até a
   posição final.
   Precisa vir depois de .imm--focus: os seletores empatam em
   especificidade e quem decide é a ordem no arquivo.
   Os cards de piscina em experiencias/ usam .imm--focus SEM esta
   camada, então seguem com o texto sempre visível. */
.imm--reveal::after {
  opacity: 0;
  transition: opacity var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.imm--reveal:hover::after,
.imm--reveal:focus-within::after { opacity: 1; }

.imm--reveal .imm__body {
  opacity: 0;
  transform: translateY(-2rem);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.imm--reveal:hover .imm__body,
.imm--reveal:focus-within .imm__body { opacity: 1; transform: translateY(0); }

/* Touch não tem hover: mostra foto e texto juntos, senão o card
   ficaria mudo no celular.
   Mas o arranjo do desktop não serve aqui: com o texto no terço
   central e o gradiente forte — que existe para dar contraste na
   revelação — a foto ficava escura e o texto plantado no meio dela.
   Sem hover não há revelação a preparar, então o card volta ao
   comportamento do .imm base: texto ancorado no rodapé e overlay
   leve, que só escurece a faixa de baixo e deixa a foto respirar.
   Estas regras vêm depois das de .imm--focus/.imm--reveal e empatam
   em especificidade, então vencem por ordem. */
@media (hover: none) {
  .imm--reveal::after { opacity: 1; }
  .imm--reveal .imm__body { opacity: 1; transform: none; }

  .imm--focus { align-items: flex-end; }
  .imm--focus::after,
  .imm--focus:hover::after,
  .imm--focus:focus-within::after {
    background: linear-gradient(180deg, rgba(18,48,29,0) 48%, rgba(18,48,29,.60));
  }
  .imm--focus .imm__body { display: block; width: auto; padding-bottom: 2rem; }
  .imm--focus .imm__body .ulink { position: static; margin-top: .9rem; }
}

/* ====================================================================
   GALERIA (carrosséis por categoria) + LIGHTBOX
   ==================================================================== */
/* ---------- Galeria em carrosséis por categoria ----------
   Substituiu o mosaico de fileiras justificadas em 09/09/2026. O mosaico
   funcionava, mas jogava as 88 fotos numa parede só, e a parede abria pelas
   fotos dos quartos — as piores do acervo. Em carrossel, cada assunto tem o
   seu bloco, a pessoa escolhe onde entrar e as suítes ficam por último.
   Todos os slides têm o MESMO tamanho, em 4:3. A primeira versão dava a cada
   foto a largura da proporção real dela, o que criava uma fileira irregular —
   ficou inquieta, e nas categorias com muita foto em pé virava uma sequência
   de tiras estreitas. Com o retângulo fixo, a fileira tem ritmo e o assunto de
   cada foto é o que muda. O corte é `object-fit: cover`, e a foto inteira,
   sem corte, aparece no lightbox.
   O scroll é nativo, então funciona com o dedo, com trackpad e com as setas do
   teclado quando a faixa tem foco. As setas ‹ › são atalho de mouse, não a
   única forma de navegar — por isso somem quando não há o que rolar.         */
/* ---------- Parede de fotos da galeria ----------
   Uma grade so, todas as fotos no mesmo quadrado e encostadas uma na outra.
   Antes eram carrosseis por categoria, com titulo, resumo e setas: o pedido
   foi galeria padrao — a foto direto, sem moldura, sem fresta creme entre
   uma e outra e sem nada para clicar antes de ver o acervo.
   A grade fica dentro do container, em cinco colunas, com uma calha fina
   entre as fotos.
   Nenhum numero de fotos fecha linha exata nas quatro larguras ao mesmo
   tempo, entao quem resolve a ponta vazia do fim e o JS: a ultima foto se
   estica pelas colunas que sobrarem (ver fecharUltimaFileira no main.js).
   O corte e do object-fit: cover e a foto inteira aparece no lightbox.     */
.galgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(8px, .9vw, 14px);
}
.galgrid__item {
  position: relative; margin: 0;
  aspect-ratio: 1; overflow: hidden; cursor: pointer;
  border-radius: var(--radius);          /* mesmo canto discreto dos cartoes */
  background: var(--c-bg-alt);           /* segura o espaco antes de carregar */
}
.galgrid__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease); }
/* O + no hover e o unico aviso de que a foto abre maior — sem ele, a parede
   encostada nao parece clicavel. */
.galgrid__item::after {
  content: '+'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 2rem; font-weight: 200;
  background: rgba(18,18,18,0); opacity: 0;
  transition: all var(--t-med) var(--ease);
}
.galgrid__item:hover img { transform: scale(1.06); }
.galgrid__item:hover::after { background: rgba(18,48,29,.60); opacity: 1; }

/* Menos colunas conforme a tela encolhe, para a foto nunca virar selo. */
@media (max-width: 1200px) { .galgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .galgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .galgrid { grid-template-columns: repeat(2, 1fr); } }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(13,13,13,.96); display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox img { max-width: 90vw; max-height: 84vh; border-radius: var(--radius); }
.lightbox__close { position: absolute; top: 1.4rem; right: 2rem; font-size: 2.4rem; color: #fff; line-height: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2.6rem; color: #fff; padding: 1rem; opacity: .75; transition: opacity var(--t-fast); }
.lightbox__nav:hover { opacity: 1; }
.lightbox__nav.prev { left: 1rem; } .lightbox__nav.next { right: 1rem; }
.lightbox__count { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: .82rem; letter-spacing: .1em; }

/* Galerias de seção: selo "N fotos" + estado clicável (data-gallery) */
.has-gallery { cursor: pointer; }
.has-gallery:focus-visible { outline: 2px solid var(--c-accent-dk, #848484); outline-offset: 3px; }
.gallery-badge {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .38rem;
  background: rgba(28,28,28,.78); color: #fff;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .4rem .7rem; border-radius: 999px; pointer-events: none;
  transition: background var(--t-fast) var(--ease);
}
.gallery-badge svg { display: block; opacity: .9; }
.has-gallery:hover .gallery-badge { background: rgba(28,28,28,.92); }

/* No celular nao existe hover, e o selo sozinho nao dizia que dava para abrir e
   passar as fotos — o cliente reparou que "nao tem setas indicando que tem mais
   fotos". Duas camadas de recado:
   1) o selo ganha uma seta e mais corpo, para ler como botao e nao como etiqueta;
   2) dentro do lightbox as setas viram pastilhas solidas. Elas ja existiam, mas
      eram brancas sem fundo em cima da propria foto: numa foto clara sumiam, e
      no celular a foto ocupa 90vw, entao nao havia margem escura onde pousar. */
@media (max-width: 768px) {
  .gallery-badge {
    font-size: .68rem;
    padding: .5rem .8rem;
    background: rgba(18, 48, 29, .82);
  }
  .gallery-badge::after {
    content: '›';
    font-size: 1.05rem;
    line-height: 1;
    margin-left: .1rem;
    transform: translateY(-1px);
  }

  .lightbox__nav {
    width: 46px; height: 46px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; line-height: 1;
    background: rgba(18, 48, 29, .82);
    border-radius: 999px;
    opacity: 1;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .38);
  }
  .lightbox__nav.prev { left: .6rem; }
  .lightbox__nav.next { right: .6rem; }
  /* O contador subiu junto: no celular ele encostava na barra do navegador. */
  .lightbox__count { bottom: 2.4rem; }
}

/* ====================================================================
   FAIXA PARALLAX (citação sobre foto fixa)
   ==================================================================== */
/* ---------- .section--foto ----------
   Faixa escura com foto no fundo, no mesmo desenho da .quote-band: a foto vai
   numa camada abaixo do conteudo e um veu verde por cima garante o contraste do
   texto branco. E modificador porque as outras .section--dark do site sao
   chapadas de proposito — a foto so entra onde a dobra fecha uma pagina de
   imagem, hoje o rodape da galeria. O alt vazio + aria-hidden sao de propositto:
   a foto e decoracao, e quem usa leitor de tela nao ganha nada com a descricao
   de um fundo. */
.section--foto { position: relative; overflow: hidden; isolation: isolate; }
.section__foto { position: absolute; inset: 0; z-index: -2; }
.section__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section--foto::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(18,48,29,.72); }
/* O texto da faixa e todo branco: o .lead herda o --c-muted, que e verde
   escuro e sobre a foto escura da faixa quase sumia. */
.section--foto .display, .section--foto .lead { color: #fff; }

.quote-band { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 10vw, 8.5rem); text-align: center; color: #fff; isolation: isolate; }
.quote-band__bg { position: absolute; inset: -10% 0; z-index: -2; }
.quote-band__bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.quote-band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(18,48,29,.60); }
/* A faixa de /experiencias/ deixou de ser citacao de hospede e virou frase
   do hotel, entao ali o elemento e um <p> e nao um <blockquote>. A da home
   continua sendo citacao real. Os dois selectors dividem o mesmo desenho. */
.quote-band blockquote,
.quote-band__frase { font-family: var(--f-display); font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.35; max-width: 30ch; margin-inline: auto; font-weight: 500; }
/* As duas faixas de citacao ficaram SEM assinatura em 09/09/2026, a pedido do
   cliente: saiu o "Danielle - hospede" da home e o "Daniel - hospede" daqui.
   A regra fica de pe porque a citacao continua sendo de hospede real (as duas
   sao avaliacoes publicadas pelo hotel) e a assinatura pode voltar; se voltar,
   ela ja nasce legivel. Branco, e nao var(--c-accent): o verde #146a32 sobre o
   scrim escuro da faixa dava 1,69:1, contra os 4,5:1 que texto pequeno exige,
   e verde escuro sobre fundo escuro nao se resolve com scrim. O scrim subiu de
   .5 para .6 no mesmo movimento, o que ajuda tambem a citacao. */
.quote-band cite { display: block; margin-top: 1.4rem; font-style: normal; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.9); }

/* ====================================================================
   DEPOIMENTOS
   ==================================================================== */
/* Dourado puro sobre cartao claro da 1,86:1. As estrelas sao TEXTO, entao
   usam o --c-gold-ink (5,1:1). O --c-gold fica para filete e preenchimento. */
.stars { color: var(--c-gold-ink); letter-spacing: .12em; font-size: .95rem; }
.testi { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 2rem 1.9rem; display: flex; flex-direction: column; }
.testi blockquote { font-family: var(--f-display); font-size: 1.34rem; line-height: 1.45; font-style: italic; margin: 1rem 0 1.4rem; }
.testi__who { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.testi__who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testi__who strong { display: block; font-size: .95rem; }
.testi__who span { font-size: .8rem; color: var(--c-muted); }

/* ====================================================================
   LOCALIZAÇÃO
   ==================================================================== */
.map-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -34px rgba(0,0,0,.4); }
.map-wrap iframe { width: 100%; height: 480px; border: 0; filter: grayscale(.25) contrast(1.04); }
/* Bloco de dados da localização — rótulo em cima, valor embaixo, com divisória */
.facts { display: grid; gap: 0; margin: 1.8rem 0; }
.facts > div { padding: 1rem 0; border-top: 1px solid var(--c-line); }
.facts > div:last-child { border-bottom: 1px solid var(--c-line); }
.facts dt { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent-dk); margin-bottom: .35rem; }
.facts dd { margin: 0; color: var(--c-ink); font-size: 1.02rem; line-height: 1.45; }
.info-list li { padding: 1.05rem 0; border-top: 1px solid var(--c-line); font-size: 1rem; line-height: 1.5; color: var(--c-ink); }
.info-list li:last-child { border-bottom: 1px solid var(--c-line); }
.info-list strong { display: block; margin-bottom: .2rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; }

/* ====================================================================
   FORMULÁRIO (float label)
   ==================================================================== */
.form .fg { position: relative; margin-bottom: 1.4rem; }
.form input, .form textarea, .form select {
  width: 100%; padding: 1.05rem 0 .55rem; border: none; border-bottom: 1px solid var(--c-line);
  background: transparent; color: var(--c-ink); outline: none; transition: border-color var(--t-fast) var(--ease);
}
.form textarea { resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--c-accent); }
.form label { position: absolute; left: 0; top: 1.05rem; color: var(--c-muted); pointer-events: none; transition: all var(--t-fast) var(--ease); }
.form input:focus + label, .form input:not(:placeholder-shown) + label,
.form textarea:focus + label, .form textarea:not(:placeholder-shown) + label {
  top: -.55rem; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent-dk);
}
.form .ok { color: #5e5e5e; font-size: .95rem; margin-top: 1rem; }
.contact-channels li { padding: 1rem 0; border-top: 1px solid var(--c-line); }
.contact-channels li:last-child { border-bottom: 1px solid var(--c-line); }

/* Formulário em painel com campos delimitados (página de Contato) */
.form--panel { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius); padding: clamp(1.6rem, 3.2vw, 2.6rem); box-shadow: 0 30px 60px -42px rgba(28,28,28,.35); }
.form--panel .fg { margin-bottom: 1.15rem; }
.form--panel .fg input, .form--panel .fg textarea {
  border: 1px solid var(--c-line); border-radius: 10px; padding: 1.15rem .95rem .65rem; background: var(--c-bg);
}
.form--panel .fg label { left: .95rem; top: 1.1rem; }
.form--panel .fg input:focus, .form--panel .fg textarea:focus { border-color: var(--c-accent); }
.form--panel .fg input:focus + label, .form--panel .fg input:not(:placeholder-shown) + label,
.form--panel .fg textarea:focus + label, .form--panel .fg textarea:not(:placeholder-shown) + label {
  top: -.5rem; left: .7rem; background: var(--c-white); padding: 0 .35rem; color: var(--c-accent-dk);
}
.contact-channels span { display: block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent-dk); margin-bottom: .2rem; }
.contact-channels a { font-size: 1.1rem; }
.contact-channels a:hover { color: var(--c-accent-dk); }

/* ====================================================================
   FOOTER
   ==================================================================== */
/* Escala do rodape. Antes eram CINCO tamanhos para tres papeis (.70 .76 .80
   .92 .94rem) — a diferenca entre .92 e .94 nao se le como intencao, se le como
   desleixo. Agora sao tres, declarados aqui e usados por todo mundo.
   As cores tambem: eram tres cinzas rgba(226,226,226,...) que nem eram da
   paleta. Viraram creme com duas opacidades. Contraste sobre o verde profundo:
   72% da 7,30:1 e 62% da 5,83:1 — os dois passam em AA para texto pequeno.   */
.footer {
  background: var(--c-dark); color: var(--c-on-dark);
  padding: clamp(3.5rem, 6vw, 6rem) var(--gutter) 2rem;
  --fz-rotulo: .72rem;   /* rotulo de coluna e link social, em caixa alta */
  --fz-corpo:  .9rem;    /* texto de apoio e links de navegacao           */
  --fz-legal:  .8rem;    /* linha de baixo                                */
  --ink-1: rgba(246,241,230,.72);
  --ink-2: rgba(246,241,230,.62);
}
.footer__grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); padding-bottom: 3rem; border-bottom: 1px solid rgba(246,241,230,.16); align-items: start; }
.footer__brand .brand { color: #fff; margin-bottom: 1rem; }
.footer__brand p { color: var(--ink-1); max-width: 36ch; font-size: var(--fz-corpo); }
.footer__social { display: flex; gap: 1.3rem; margin-top: 1.4rem; }
.footer__social a { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fz-rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-1); }
/* O icone herda a cor do link, entao acompanha o hover sem regra extra. */
.footer__ico { flex: none; display: block; }
.footer__social a:hover { color: var(--c-sun); }
/* Sobre o verde profundo do rodape, --c-accent daria 1,7:1. Amarelo sol: 9,0:1. */
.footer__col h4 { font-size: var(--fz-rotulo); letter-spacing: .2em; text-transform: uppercase; color: var(--c-sun); margin-bottom: 1.1rem; }
.footer__col a { display: block; color: var(--ink-1); font-size: var(--fz-corpo); padding: .32rem 0; transition: color var(--t-fast) var(--ease); }
.footer__col a:hover { color: #fff; }
.footer__bottom { max-width: var(--maxw); margin-inline: auto; padding-top: 1.6rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* min-width:0 e overflow-wrap: sem isso o item flex nao encolhe abaixo do
   conteudo e a linha do CNPJ (05.952.773/0001-91, sem espaco no meio)
   estourava a caixa em tela estreita. */
.footer__bottom p, .footer__bottom a { font-size: var(--fz-legal); color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.footer__legal { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.footer__legal a:hover { color: #fff; }

/* Assinatura da agência — ocupa a linha inteira para não deslocar o copyright
   nem os links legais, que seguem em space-between na primeira linha.        */
.footer__credit { flex: 1 0 100%; margin-top: .9rem; }
/* Azul da Komplexa. Vem da propria marca da agencia: no CSS do
   komplexagrowth.com o token --primary-light e hsl(195 100% 55%).
   Usamos o -light, e nao o --primary (#00A1D6), porque sobre o verde
   do rodape o primary da 4.32:1 e o light da 6.45:1.                */
.footer__credit a { color: #1AC6FF; text-decoration: underline; text-underline-offset: .18em; transition: color var(--t-fast) var(--ease); }
.footer__credit a:hover { color: #fff; }

/* ====================================================================
   WIDGET DE RESERVA — calendário de intervalo + seleção de hóspedes
   Casca, campos e botão seguem a MESMA linguagem visual do painel de
   WhatsApp (.wl-*): borda de 1px em --c-line, cantos de 14px/10px,
   sombra 0 18px 48px -12px e campos em caixa branca sobre o fundo.
   ==================================================================== */

.bk-step-label { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-accent-dk); font-weight:600; margin-bottom:.7rem; }

/* ----- casca do painel (marcação: .bk-modal > .bk-panel) ----- */
.bk-modal { padding: clamp(.75rem, 3vw, 2rem); }
.bk-panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 520px; margin-inline: auto;   /* centralizado em telas largas */
  max-height: min(92vh, 820px); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.6rem, 3.4vw, 2.4rem);
  background: var(--c-bg); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: 14px;
  box-shadow: 0 18px 48px -12px rgba(18,18,18,.34);
}
.bk-close {
  position: absolute; top: .5rem; right: .5rem;
  width: 44px; height: 44px;            /* área de toque confortável */
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none;
  font-size: 1.6rem; line-height: 1; color: var(--c-muted); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.bk-close:hover { background: var(--c-bg-alt); color: var(--c-ink); }
.bk-close:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Alca de arrasto do modo folha. Injetada por main.js, invisivel no desktop. */
.bk-grabber { display: none; }

/* ----- calendário ----- */
.bk-cal { border:1px solid var(--c-line); border-radius:10px; padding:.7rem .9rem .8rem; margin-bottom:.3rem; background:var(--c-white); }
.bk-cal__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.55rem; }
.bk-cal__title { font-family:var(--f-display); font-size:1.18rem; color:var(--c-ink); text-transform:capitalize; }
.bk-nav { width:2.1rem; height:2.1rem; border-radius:50%; border:1px solid var(--c-line); display:grid; place-items:center; color:var(--c-ink); font-size:1rem; transition:all var(--t-fast) var(--ease); background:transparent; }
.bk-nav:hover:not(:disabled) { background:var(--c-accent); color:#fff; border-color:var(--c-accent); }
.bk-nav:disabled { opacity:.28; cursor:not-allowed; }
.bk-dow { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:.35rem; }
.bk-dow span { text-align:center; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); padding:.2rem 0; }
.bk-grid { display:grid; grid-template-columns:repeat(7,1fr); row-gap:2px; }
.bk-day { position:relative; height:2.3rem; border:none; background:transparent; color:var(--c-ink); font-size:.86rem; cursor:pointer; display:grid; place-items:center; z-index:1; transition:color var(--t-fast) var(--ease); }
.bk-day::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1.95rem; height:1.95rem; border-radius:50%; z-index:-1; transition:background var(--t-fast) var(--ease); }
.bk-day:hover:not(:disabled)::before { background:var(--c-bg-alt); }
.bk-day.is-empty { pointer-events:none; }
.bk-day:disabled { color:var(--c-line); cursor:not-allowed; text-decoration:line-through; }
.bk-day.is-today { font-weight:700; }
.bk-day.is-today::after { content:''; position:absolute; bottom:.35rem; width:4px; height:4px; border-radius:50%; background:var(--c-accent); }
/* faixa de intervalo — "caminho" ligando entrada e saída */
.bk-day.in-range { background:rgba(132,132,132,.14); border-radius:0; }
.bk-day.in-range::before { background:transparent; }
.bk-day.is-start, .bk-day.is-end { color:#fff; font-weight:700; }
.bk-day.is-start::before, .bk-day.is-end::before { background:var(--c-accent); }
.bk-day.is-start.has-range { background:linear-gradient(to right, transparent 50%, rgba(132,132,132,.14) 50%); }
.bk-day.is-end.has-range { background:linear-gradient(to left, transparent 50%, rgba(132,132,132,.14) 50%); }
.bk-day.is-today::after { z-index:2; }
.bk-day.is-start::after, .bk-day.is-end::after { background:#fff; }

.bk-summary { display:flex; align-items:center; justify-content:center; gap:.6rem; font-size:.84rem; color:var(--c-muted); margin:.2rem 0 .9rem; min-height:1.1rem; }
.bk-summary b { color:var(--c-ink); }
.bk-summary .bk-nights { color:var(--c-accent-dk); font-weight:600; }

/* ----- hóspedes ----- */
.bk-guests { border:1px solid var(--c-line); border-radius:10px; padding:.3rem 1.1rem; margin-bottom:1rem; background:var(--c-white); transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.bk-guests.is-invalid { border-color:#c0503f; box-shadow:0 0 0 3px rgba(192,80,63,.12); }
.bk-stepper { display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; }
.bk-stepper + .bk-stepper { border-top:1px solid var(--c-line); }
.bk-stepper__info b { display:block; font-size:.94rem; color:var(--c-ink); }
.bk-stepper__info small { color:var(--c-muted); font-size:.74rem; }
.bk-count { display:flex; align-items:center; gap:.9rem; }
.bk-count output { min-width:1.4rem; text-align:center; font-size:1rem; font-weight:600; color:var(--c-ink); font-variant-numeric:tabular-nums; }
.bk-pm { width:2.1rem; height:2.1rem; border-radius:50%; border:1px solid var(--c-accent); color:var(--c-accent-dk); background:transparent; font-size:1.2rem; line-height:1; display:grid; place-items:center; transition:all var(--t-fast) var(--ease); }
.bk-pm:hover:not(:disabled) { background:var(--c-accent); color:#fff; }
.bk-pm:disabled { opacity:.3; cursor:not-allowed; }

/* ----- avisos ----- */
.bk-warn { display:none; align-items:center; gap:.5rem; font-size:.82rem; color:#c0503f; background:rgba(192,80,63,.08); border:1px solid rgba(192,80,63,.25); border-radius:10px; padding:.7rem .9rem; margin-bottom:1rem; }
.bk-warn.is-on { display:flex; animation:bk-shake .4s var(--ease); }
.bk-warn::before { content:'!'; flex:none; width:1.3rem; height:1.3rem; border-radius:50%; background:#c0503f; color:#fff; display:grid; place-items:center; font-weight:700; font-size:.8rem; }
@keyframes bk-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.bk-focus-flash { animation:bk-flash 1.1s var(--ease); }
@keyframes bk-flash { 0%,100%{box-shadow:0 0 0 0 rgba(132,132,132,0)} 30%{box-shadow:0 0 0 4px rgba(132,132,132,.35)} }

/* ----- campos do formulário (mesma caixa dos campos do painel .wl-field) -----
   .fg vira flex column-reverse só para o rótulo ESTÁTICO dos <select> subir
   acima do campo; os rótulos flutuantes dos <input> são absolutos e não são
   afetados pela mudança de fluxo.                                            */
#bookingForm .fg { display: flex; flex-direction: column-reverse; margin-bottom: .75rem; }
#bookingForm .fg input,
#bookingForm .fg select {
  width: 100%; min-height: 56px;
  padding: 1.45rem .9rem .5rem;
  border: 1px solid var(--c-line); border-radius: 10px;
  background: var(--c-white); color: var(--c-ink);
  font-family: var(--f-body); font-size: 1rem; line-height: 1.3;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#bookingForm .fg select { padding: .95rem 2.2rem .95rem .9rem; cursor: pointer; }
#bookingForm .fg input:focus,
#bookingForm .fg select:focus {
  border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(132,132,132,.14);
}
/* rótulo flutuante: repouso dentro da caixa → sobe para o topo dela ao preencher */
#bookingForm .fg input + label { left: .95rem; top: 1.55rem; font-size: 1rem; color: var(--c-muted); }
#bookingForm .fg input:focus + label,
#bookingForm .fg input:not(:placeholder-shown) + label {
  top: .5rem; left: .95rem; font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-accent-dk);
}
/* rótulo estático (selects) — mesma tipografia do estado flutuado */
#bookingForm .bk-lbl {
  position: static; display: block;
  margin: 0 0 .3rem .1rem;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-accent-dk);
}

/* ----- botão principal: cor da marca, largura total, bem clicável ----- */
#bookingForm button[type="submit"] {
  width: 100%; min-height: 54px; margin-top: .5rem;
  border-radius: 10px; letter-spacing: .16em;
  box-shadow: 0 12px 26px -14px rgba(132,132,132,.95);
}
#bookingForm button[type="submit"]:hover { box-shadow: 0 16px 30px -14px rgba(132,132,132,1); }

/* ----- mobile: legibilidade, toque de 44px+ e nada transbordando ----- */
@media (max-width: 560px) {
  /* Popup flutuante: no celular o painel fica CENTRALIZADO, com folga em todos
     os lados — nao encosta em nenhum canto da tela. O fundo escurecido aparece
     em volta, entao ele le como uma janela pousada sobre a pagina. Fecha no X,
     tocando fora, no Esc ou puxando para baixo com o dedo em qualquer ponto
     dele (o gesto esta em bookingModal(), no main.js). */
  .bk-modal {
    align-items: center;
    padding: max(1.1rem, env(safe-area-inset-top)) 1rem
             max(1.1rem, env(safe-area-inset-bottom));
    background: rgba(13,13,13,.72);   /* deixa a pagina entrever atras do popup */
  }
  .bk-panel {
    width: 100%; max-width: none;
    max-height: 100%;                 /* 100% da area util = tela menos a folga acima */
    padding: .25rem .85rem 1.1rem;
    border-radius: 16px;
    box-shadow: 0 24px 60px -16px rgba(13,13,13,.6);
    transition: transform .3s var(--ease);
    will-change: transform;
    touch-action: pan-y;          /* quando o conteudo nao cabe, a rolagem manda */
  }
  /* Conteudo coube inteiro: nao ha rolagem a preservar, entao o painel entrega o
     gesto vertical ao JS. E o que faz o "puxar para fechar" funcionar do comeco
     ao fim — com pan-y o navegador reivindica o gesto no primeiro pixel e os
     touchmove seguintes chegam nao-cancelaveis. A classe e posta por
     bookingModal(), medindo scrollHeight contra clientHeight. */
  .bk-panel--fixo { touch-action: none; }
  /* Cabecalho enxuto no celular: o calendario cabe inteiro no popup, em vez de
     ficar espremido. */
  .bk-panel > h3 { font-size: 1.2rem !important; margin-bottom: .1rem !important; }
  .bk-panel > p  { font-size: .8rem; margin-bottom: .55rem !important; }
  .bk-step-label { margin-bottom: .45rem; }
  .bk-summary { margin: .2rem 0 .7rem; }
  /* A entrada e uma animacao, nao uma classe: o popup ja nasce no lugar certo,
     entao ele aparece mesmo se a animacao nao rodar. O @keyframes so reinicia
     porque .lightbox sai de display:none ao abrir. */
  .bk-modal.is-open .bk-panel { animation: bk-popup-entra .28s var(--ease); }
  @keyframes bk-popup-entra { from { transform: translateY(14px) scale(.96); opacity: 0; } }
  .bk-panel.is-dragging { animation: none; transition: none; }   /* o dedo manda enquanto arrasta */
  /* A alca e a garantia do gesto: ela tem touch-action:none, entao puxar dali
     funciona mesmo quando o painel precisa rolar (e o corpo dele fica em pan-y).
     Por isso a area de toque e alta — 36px, o minimo de um controle de dedo —
     e nao a espessura do risco, que e so o desenho. */
  .bk-grabber {
    display: block; position: sticky; top: 0; z-index: 3;
    margin: 0 -.85rem .25rem; padding: 15px 0 13px;
    background: var(--c-bg); border-radius: 16px 16px 0 0; touch-action: none;
    cursor: grab;
  }
  .bk-grabber:active { cursor: grabbing; }
    /* A alca era var(--c-line), o filete mais claro da paleta: quase nao aparecia
     sobre o creme do painel, e ninguem adivinha um gesto que nao ve. Passou para
     o cinza de texto de apoio, no contraste de um controle. */
  .bk-grabber span { display: block; width: 46px; height: 5px; margin-inline: auto; border-radius: 99px; background: var(--c-muted); opacity: .55; }
  /* O X fica ACIMA da alca: ela e sticky, opaca e com z-index 3, entao sem isso
     o botao ficava escondido atras dela e o popup so fechava no gesto/toque fora.
     O risco da alca tem 46px centrados, entao o botao no canto direito nao
     encosta nele. O fundo circular e o que faz o X ler como controle sobre o
     creme do painel, no mesmo tom do hover do desktop. */
  .bk-close {
    top: 0; right: .1rem; z-index: 4;
    width: 40px; height: 40px; font-size: 1.5rem;
    background: var(--c-bg-alt); color: var(--c-ink);
  }
  .bk-cal { padding: .55rem .2rem .65rem; }
  .bk-cal__title { font-size: 1.1rem; }
  .bk-nav { width: 44px; height: 44px; }
  .bk-day { height: 44px; font-size: .92rem; }
  .bk-day::before { width: 2.4rem; height: 2.4rem; }
  .bk-dow span { font-size: .58rem; letter-spacing: .04em; }
  /* 16px evita o zoom automático do iOS ao focar o campo */
  #bookingForm .fg input, #bookingForm .fg select { font-size: 16px; min-height: 54px; }
  #bookingForm .fg input + label { font-size: 16px; }
}

/* ====================================================================
   FLUTUANTES (WhatsApp + voltar ao topo)
   ==================================================================== */
.to-top { position: fixed; right: 1.5rem; bottom: calc(1.5rem + var(--kx-banner-h, 0px)); z-index: 89; width: 46px; height: 46px; border-radius: 50%; background: var(--c-ink); color: #fff; display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(14px); transition: all var(--t-fast) var(--ease); }
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ====================================================================
   PAINEL DE WHATSAPP (.wl-*)
   Painel lateral no canto inferior DIREITO, ancorado acima do .to-top.
   Sem overlay: a página continua visível e rolável enquanto está aberto.
   Injetado por main.js (WA_PANEL_HTML). O verde do WhatsApp é a única cor
   fora dos tokens do :root — todo o resto usa as variáveis do site.
   ==================================================================== */
.wl-panel {
  /* Estes cinco eram CINZA (#464646, #373737, #f0f0f0, #8e8e8e, #f4f4f4) apesar
     dos nomes: o painel abria todo cinza. Agora usam o verde da marca, e nao o
     #25d366 do WhatsApp — aquele com texto branco da 1,98:1 e nao passa em
     contraste. O #25d366 fica so no botao flutuante, que e o que precisa ser
     reconhecivel como WhatsApp. Branco sobre --c-accent: 6,69:1.              */
  --wl-green:    var(--c-accent);      /* cabeçalho / botão / check */
  --wl-green-dk: var(--c-accent-dk);   /* hover do botão            */
  --wl-green-lt: #eaf3ed;              /* caixa do opt-in           */
  --wl-err:      #c0503f;              /* mesmo vermelho do modal de reserva */
  --wl-err-bg:   #fbeeeb;

  position: fixed; right: 1.5rem;
  /* acompanha o botão flutuante quando o banner de cookies empurra tudo p/ cima */
  bottom: calc(1.5rem + 46px + .75rem + var(--kx-banner-h, 0px));   /* ancorado acima do .to-top */
  z-index: 120;
  width: 340px; max-width: calc(100vw - 3rem);
  max-height: min(560px, calc(100vh - 9rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 14px;
  box-shadow: 0 18px 48px -12px rgba(18,18,18,.34);
  font-family: var(--f-body);
  opacity: 0; visibility: hidden;
  transform: translateY(12px) scale(.97); transform-origin: 100% 100%;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.wl-panel.is-open { opacity: 1; visibility: visible; transform: none; }

/* Enquanto o painel está aberto o "voltar ao topo" some (ficaria por baixo). */
body.wl-open .to-top { opacity: 0; pointer-events: none; }

/* ---- Cabeçalho ---- */
.wl-head { flex-shrink: 0; display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; background: var(--wl-green); color: #fff; }
.wl-head__icon { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; }
.wl-head__icon svg { width: 22px; height: 22px; fill: currentColor; }
.wl-head__title { flex: 1; font-size: .92rem; font-weight: 600; letter-spacing: .01em; }
.wl-head__close { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; opacity: .85; transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.wl-head__close svg { width: 20px; height: 20px; }
.wl-head__close:hover { opacity: 1; background: rgba(255,255,255,.16); }

/* ---- Corpo ---- */
.wl-body { padding: 1rem; overflow-y: auto; }
.wl-greet { margin: 0 0 .9rem; padding: .7rem .85rem; background: var(--c-bg-alt); color: var(--c-ink); font-size: .84rem; line-height: 1.5; border-radius: 12px 12px 12px 3px; }

/* ---- Campos: container único, fundo branco, separados por fio ---- */
.wl-fields { margin-bottom: .8rem; background: var(--c-white); border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; }
.wl-field { display: flex; align-items: center; gap: .55rem; padding: 0 .8rem; }
.wl-field + .wl-field { border-top: 1px solid var(--c-line); }
.wl-field:focus-within { background: var(--c-bg); }
.wl-field input { flex: 1; width: 100%; padding: .72rem 0; border: 0; background: none; font-family: var(--f-body); font-size: .86rem; color: var(--c-ink); }
.wl-field input:focus { outline: none; }
.wl-field input::placeholder { color: var(--c-muted); opacity: 1; }
.wl-flag { flex-shrink: 0; display: grid; place-items: center; }
.wl-flag svg { display: block; width: 21px; height: 15px; border-radius: 2px; }

/* ---- Opt-in (marcado por padrão e obrigatório) ---- */
.wl-optin { display: flex; align-items: flex-start; gap: .55rem; padding: .65rem .75rem; background: var(--wl-green-lt); border: 1px solid rgba(20,106,50,.22); border-radius: 10px; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.wl-optin input { flex-shrink: 0; width: 15px; height: 15px; margin-top: .12rem; accent-color: var(--wl-green); cursor: pointer; }
.wl-optin__txt { font-size: .78rem; line-height: 1.45; color: var(--c-ink); }
.wl-optin.is-error { background: var(--wl-err-bg); border-color: var(--wl-err); }
.wl-optin.is-error .wl-optin__txt { color: var(--c-ink); }
.wl-optin__err { display: none; margin: .45rem 0 0; font-size: .74rem; line-height: 1.4; color: var(--wl-err); }
.wl-optin__err.is-on { display: block; }

/* ---- Botão enviar (pílula verde, avião depois do texto) ---- */
.wl-send { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; margin-top: .9rem; padding: .72rem 1rem; border: 0; border-radius: 999px; background: var(--wl-green); color: #fff; font-family: var(--f-body); font-size: .88rem; font-weight: 600; cursor: pointer; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.wl-send svg { width: 16px; height: 16px; fill: currentColor; }
.wl-send:hover { background: var(--wl-green-dk); }
.wl-send:active { transform: translateY(1px); }

/* ---- Rodapé do painel ---- */
.wl-foot { flex-shrink: 0; padding: .6rem 1rem .7rem; border-top: 1px solid var(--c-line); background: var(--c-bg-alt); text-align: center; font-size: .7rem; color: var(--c-muted); }
.wl-foot a { color: var(--c-muted); text-decoration: underline; text-underline-offset: .16em; transition: color var(--t-fast) var(--ease); }
.wl-foot a:hover { color: var(--c-ink); }

@media (max-width: 480px) {
  .wl-panel { left: .9rem; right: .9rem; width: auto; max-width: none; bottom: calc(1.5rem + 58px + .7rem + var(--kx-banner-h, 0px)); max-height: min(74vh, calc(100vh - 7.5rem - var(--kx-banner-h, 0px))); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-panel { transition: opacity var(--t-fast) linear, visibility var(--t-fast); transform: none; }
}

/* ====================================================================
   SCROLL REVEAL (Intersection Observer adiciona .is-in)
   ==================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

/* ====================================================================
   ACESSIBILIDADE — reduz/desativa movimento se o usuário preferir
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  /* o texto ainda aparece no hover, mas sem o deslocamento vertical */
  .imm--reveal .imm__body { transform: none; }
  .imm--reveal:hover .imm__body, .imm--reveal:focus-within .imm__body { transform: none; }
}

/* ====================================================================
   RESPONSIVO (mobile-first nas reduções)
   ==================================================================== */
@media (max-width: 1024px) {
  :root { --header-h: 70px; }
  .nav { display: none; }
  .burger { display: block; }
  .split, .split--reverse { grid-template-columns: 1fr; }
  /* Empilhado, o texto vem primeiro e a foto ilustra logo abaixo.
     Move só a mídia — mexer na ordem do .split__text empurraria para
     cima o formulário do Contato e o mapa da Localização, que dividem
     o .split com o texto e não são imagens. */
  .split__media, .split--reverse .split__media { order: 2; }
  .split__media img { aspect-ratio: 16/10; }
  /* Foto em pe (o cachorro do Pet, por exemplo): o 16/10 do empilhado cortava
     o assunto no meio. Com o modificador ela mantem o retrato do desktop. */
  .split__media--retrato img { aspect-ratio: 4/5; }
  /* Empilhado, o vão interno (32px) ficava quase igual ao vão entre
     blocos (40px) e a página virava uma coluna contínua. Aperta o
     interno, para texto + foto lerem como uma unidade, e separa os
     blocos consecutivos com fio e respiro — o único lugar onde dois
     .split são irmãos é a seção das piscinas em experiencias/. */
  .split { gap: 1.4rem; }
  .split + .split {
    border-top: 1px solid var(--c-line);
    padding-top: clamp(2rem, 7vw, 3rem);
  }
  .cards, .cards--2 { grid-template-columns: repeat(2, 1fr); }
  .cards--centro > * { flex-basis: calc((100% - clamp(1.4rem, 2.5vw, 2rem)) / 2); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ====================================================================
   SPLIT COM O BOTAO ABAIXO DA FOTO (.split--cta-sob-foto)
   Empilhado, o .split poe o texto inteiro primeiro e a foto depois, entao
   o botao ficava espremido entre o paragrafo e a imagem. Aqui ele desce
   para o fim do bloco, embaixo da foto. Usado na intro de /eventos/.
   O display: contents dissolve a caixa do .split__text para que titulo,
   paragrafos, foto e botao virem itens da mesma coluna e possam ser
   ordenados. Efeito colateral conhecido: sem caixa, o fade do .reveal nao
   roda nesse bloco — o texto simplesmente ja aparece.
   ==================================================================== */
@media (max-width: 1024px) {
  .split--cta-sob-foto { display: flex; flex-direction: column; }
  .split--cta-sob-foto .split__text { display: contents; }
  .split--cta-sob-foto .split__text > .eyebrow { order: 1; }
  .split--cta-sob-foto .split__text > h2 { order: 2; }
  .split--cta-sob-foto .split__text > p { order: 3; }
  .split--cta-sob-foto .split__media { order: 4; }
  /* Centralizado a pedido do cliente: encostado a esquerda ele ficava solto
     embaixo da foto, que ocupa a largura toda. */
  .split--cta-sob-foto .split__text > .btn { order: 5; align-self: center; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .cards, .cards--2 { grid-template-columns: 1fr; }
  .cards--centro > * { flex-basis: 100%; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  /* no celular a linha legal desce um degrau para caber sem apertar */
  .footer { --fz-legal: .72rem; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  /* Mobile: libera o topo do hero para o vídeo aparecer.
     Conteúdo desce para a base; some o subtítulo e o botão "Ver Acomodações". */
  .hero { align-items: flex-end; }
  .hero__inner { padding-bottom: clamp(4.5rem, 16vw, 7rem); display: flex; flex-direction: column; transform: none; }
  .hero__cta .btn--light { display: none; }
  /* No mobile o overline desce para baixo do bloco nome + filete + tagline. */
  .hero__title { order: 1; }
  .hero__divider { order: 2; margin: .9rem 0 .8rem; }
  .hero__sub { order: 3; }
  .hero__eyebrow { order: 4; margin: .9rem 0 0; }
  .hero__cta { order: 5; }
  /* No celular o parallax é desativado via JS; imagens ficam estáticas e leves */
}

/* ====================================================================
   HERO DA HOME NO CELULAR — legibilidade do texto sobre a foto
   Pedido do cliente (10/09/2026). A foto nova clareia muito na metade de
   baixo (a borda branca do ofurô e o prédio amarelo no sol), justamente
   onde caem a tagline e a linha de localização, e o texto branco sumia.
   TUDO daqui vale só até 768px — o desktop não é tocado por nenhuma
   destas regras.
   ==================================================================== */
@media (max-width: 768px) {
  /* svh no lugar de vh: a barra do Chrome no celular muda a altura da
     janela no meio do scroll e o hero "pulava" ao aparecer/sumir. */
  .hero { min-height: 100svh; }

  /* Scrim em degradê duplo, topo e base, no Verde Profundo da marca em vez
     de preto — preto sujava o azul do céu. A base vai bem mais forte que o
     topo porque é lá que o texto encontra o branco do ofurô. O
     pointer-events: none garante que a camada não engula o toque no CTA. */
  .hero__scrim {
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(18, 48, 29, .58) 0%,
      rgba(18, 48, 29, .20) 30%,
      rgba(18, 48, 29, .34) 55%,
      rgba(18, 48, 29, .80) 100%);
  }
  /* O conteúdo já vinha em z-index 2, acima do scrim (1). Fica explícito
     em 3 para nenhuma regra futura empatar com a camada escura. */
  .hero__inner { position: relative; z-index: 3; }

  /* Enquadramento um pouco mais alto, para o texto cair sobre céu e copa
     das árvores. Só tem efeito em tela larga o bastante para o corte
     acontecer na vertical — ver nota no FOTOS.md. */
  .hero__media img { object-position: 50% 25%; }

  /* Texto: creme da marca no lugar do branco puro, corpo maior e sombra
     leve como segunda camada de segurança, caso o scrim não dê conta em
     alguma tela. */
  .hero__eyebrow {
    font-size: 12px;
    letter-spacing: .12em;
    color: var(--creme);
    opacity: 1;
    text-shadow: 0 1px 6px rgba(18, 48, 29, .6);
  }
  .hero__title {
    font-size: clamp(2rem, 9vw, 2.5rem);
    line-height: 1.15;
    text-wrap: balance;
    text-shadow: 0 2px 12px rgba(18, 48, 29, .55);
  }
  .hero__sub {
    font-size: 1.05rem;
    color: var(--creme);
    text-shadow: 0 2px 10px rgba(18, 48, 29, .6);
  }

  /* CTA do hero vazado no celular, a pedido do cliente: o botão sólido
     dourado brigava com o amarelo do prédio logo atrás. Vale só no hero —
     o botão sólido do resto do site continua igual. */
  .hero__cta .btn--solid {
    background: transparent;
    border-color: rgba(246, 241, 230, .65);
    color: var(--creme);
  }
  .hero__cta .btn--solid:hover,
  .hero__cta .btn--solid:focus-visible {
    background: var(--creme);
    border-color: var(--creme);
    color: var(--verde-profundo);
    transform: none;
  }

  /* O balão do atendimento (Asksuite) fica fixo no canto e cobria a ponta
     direita do "Reservar Estadia". Subir o balão foi a primeira tentativa e
     piorou: a 96px ele passava a cobrir o botão inteiro, porque o CTA no
     celular fica justamente a ~72px da base. O que resolve é encolher — 68px
     viram 52px — e afastar o conteúdo do hero um degrau da base. O widget é
     um iframe de terceiro; o container externo é a única parte que dá para
     tocar daqui, e o scale leva junto o balão de mensagem. */
  .infochat_floatmain {
    transform: scale(.76);
    transform-origin: bottom right;
  }
  .hero__inner { padding-bottom: clamp(6.5rem, 20vw, 8.5rem); }
}

/* ====================================================================
   BANNER DE COOKIES · Consent Mode v2 (kxConsent)
   Injetado por main.js só quando window.kxConsentState === null.
   Usa os tokens do :root (cores/fonte/radius) — nada de !important.
   ==================================================================== */
/* Era uma barra escura de ponta a ponta, colada na base. O balao do
   atendimento (Asksuite) mora fixo no canto inferior direito e ficava por
   cima dela — o widget e um iframe de terceiro com z-index proprio, entao
   nao adianta disputar empilhamento. A saida foi encolher: virou um cartao
   compacto ancorado a ESQUERDA, longe do canto do balao. */
.kx-cookie {
  position: fixed; left: 1.25rem; right: auto; bottom: 1.25rem; z-index: 150;
  width: min(360px, calc(100vw - 2.5rem));
  display: flex; flex-direction: column; align-items: stretch;
  gap: .65rem;
  padding: .85rem .95rem;
  background: var(--c-dark); color: var(--c-on-dark);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(18, 18, 18, .32);
  font-family: var(--f-body); font-size: .74rem; line-height: 1.5;
  animation: kx-cookie-in var(--t-med) var(--ease) both;
}
@keyframes kx-cookie-in { from { transform: translateY(calc(100% + 1.5rem)); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .kx-cookie { animation: none; } }

.kx-cookie__text { margin: 0; }

.kx-cookie__actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: .5rem; }

.kx-cookie__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: .4rem 1rem;
  font-size: .62rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.kx-cookie__btn--accept { background: var(--cta-bg); color: var(--cta-texto); }
.kx-cookie__btn--accept:hover { background: var(--cta-bg-dk); }
.kx-cookie__btn--ghost { border-color: rgba(255, 255, 255, .5); color: var(--c-on-dark); }
.kx-cookie__btn--ghost:hover { background: #fff; color: var(--c-ink); border-color: #fff; }
.kx-cookie__btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Em tela estreita o balao de saudacao do widget ("Melhor preco aqui!") abre
   para a esquerda e alcanca o lado do cartao. Medido no site: ele ocupa ate
   ~107px acima da base. Entao, dai para baixo, o cartao sobe e passa a morar
   acima do widget em vez de disputar o mesmo canto. */
@media (max-width: 900px) {
  .kx-cookie { bottom: calc(1.25rem + 108px); }
}

@media (max-width: 640px) {
  .kx-cookie {
    left: .75rem; right: .75rem; width: auto;
    bottom: calc(.75rem + 108px + env(safe-area-inset-bottom, 0px));
    padding: .75rem .85rem; gap: .55rem;
    font-size: .72rem; line-height: 1.45;
  }
  /* nowrap garante os dois botoes lado a lado, nunca empilhados */
  .kx-cookie__btn { flex: 1 1 0; min-width: 0; min-height: 38px; padding: .45rem .6rem; font-size: .6rem; letter-spacing: .12em; }
}


/* ====================================================================
   MODULOS ADICIONADOS PARA O HOTEL FAZENDA MINAS REAL
   Nao existiam no Template 2. Duas dobras novas na home:
   .incluso  — grade do que entra na diaria (pensao completa)
   .oferta   — cartoes de desconto do canal direto
   ==================================================================== */

/* ---------- O que esta incluso na diaria ---------- */
.incluso {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 3rem;
}
.incluso li {
  padding: 1.4rem 0;
  border-top: 1px solid var(--c-line);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--c-muted);
}
.incluso strong {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--f-display);
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--c-ink);
}

/* ---------- Variante com foto: .incluso--fotos ----------
   So a dobra da pensao completa na home usa ("Nao e pensao completa. E completissima.").
   As outras tres listas
   .incluso (acomodacoes, experiencias e localizacao) sao de texto puro e
   seguem exatamente como estavam — dai o modificador em vez de mexer na base.
   Com a foto separando os itens, o filete de topo vira ruido e sai. */
.incluso--fotos { gap: 3rem 2.2rem; }
/* position:relative porque cada item virou galeria e o selo "N fotos" e
   posicionado em relacao a ele. */
.incluso--fotos li { border-top: 0; padding: 0; position: relative; font-size: 1rem; }
/* 5/4 em vez de 4/3, dentro do .container--largo: no 1280 padrao o tile dava
   352 px, agora da 445 e a foto ocupa 68% mais area. As derivadas incluso-*
   foram refeitas em 1000x800 para acompanhar — a excecao e a incluso-02, cuja
   unica fonte tem 620 px (ver FOTOS.md). */
.incluso--fotos img {
  display: block; width: 100%; aspect-ratio: 5/4; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 1.1rem;
  background: var(--c-bg-alt);   /* segura o espaco antes de a foto carregar */
}
.incluso--fotos strong { font-size: 1.4rem; }

/* ---------- Variante com icone: .incluso--icones ----------
   So a lista "Incluso na diaria" de experiencias/ usa. As outras .incluso
   (acomodacoes e localizacao) sao de texto puro e seguem como estavam — dai o
   modificador, no mesmo espirito da .incluso--fotos.
   O filete de topo sai e cada item vira cartao: com treze linhas, o filete
   virava treze riscos e a lista lia como tabela. Com cartao, cada item tem
   comeco e fim, e sobra o canto onde o icone assenta.
   Os icones sao SVG de linha em currentColor, herdando o --c-accent (amarelo
   sol dentro da .section--alt, dourado se a lista for para uma secao clara). */
.incluso--icones { gap: 1rem; }
.incluso--icones li {
  border-top: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .2rem 1.1rem;
  align-items: start;
  padding: 1.35rem 1.4rem;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
/* O icone ocupa a coluna 1 nas duas linhas (titulo e descricao), entao ele
   fica ancorado no topo do cartao e o texto todo corre a direita dele. */
.incluso__ico { grid-row: 1 / span 2; margin-top: .15rem; color: var(--c-accent); flex: none; }
.incluso--icones strong { margin-bottom: 0; }

/* ---------- .nota-excecao ----------
   A unica excecao ao "Nao e pensao completa. E completissima.". Ja foi nota de rodape em letra
   miuda, depois frase solta em fonte de titulo, e depois caixa vermelha cheia.
   A caixa gritava mais que a propria dobra do "tudo incluso" — a excecao
   chamava mais atencao que a regra. Agora sobrou so o icone de atencao ao lado
   da frase, sem fundo: continua sendo um sinal, mas no peso de nota.
   Sem caixa, nao ha cor propria a defender: texto e icone herdam o --c-muted
   da secao, entao a nota funciona igual sobre o verde da .section--alt (creme
   a 84%) e sobre o creme das outras (cinza de apoio).                       */
.nota-excecao {
  width: fit-content;
  max-width: 46ch;
  margin: 2.4rem auto 0;
  display: flex; align-items: center; gap: .7rem;
  color: var(--c-muted);
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.35;
  text-align: left;
}
/* Circulo vazado + "!", os dois em currentColor: sem o fundo vermelho, um
   circulo chapado viraria uma bolota solida no meio do texto, e o "!" em
   --c-dark sumiria sobre o verde da .section--alt. */
.nota-excecao__ico { flex: none; display: block; }

/* ---------- .amenidades ----------
   Era a .incluso, uma lista de texto com filete fino em cima de cada item.
   Ganhou o filete DOURADO, titulo na fonte de display e mais respiro, para
   parecer uma ficha do quarto e nao uma lista de compras. Mesma grade de 3
   colunas, mesmos pontos de quebra da .incluso.                             */
.amenidades {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem 3rem;
}
.amenidades li { padding-top: 1.2rem; border-top: 2px solid var(--c-gold); }

/* ---------- Variante com icone: .amenidades--icones ----------
   O filete dourado dava conta de seis itens de texto, mas nao dizia nada
   sozinho: era preciso ler para saber o que cada item era. Com icone, a dobra
   se le de relance — que e o papel dela, ja que o argumento aqui e "isso vem em
   TODAS as suites". O filete vira cartao, no mesmo desenho da .incluso--icones
   de experiencias/, para as duas listas do site nao terem sotaques diferentes.
   Icone em currentColor herdando o --c-accent: amarelo sol na .section--alt. */
.amenidades--icones { gap: 1rem; }
.amenidades--icones li {
  border-top: 0;
  padding: 1.4rem 1.5rem;
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  align-items: start;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.amenidades__ico { margin-top: .15rem; color: var(--c-accent); }
.amenidades--icones p { max-width: none; }
.amenidades h3 {
  font-family: var(--f-display); font-weight: 500;
  font-size: 1.3rem; line-height: 1.2; margin: 0 0 .45rem; color: var(--c-ink);
}
.amenidades p { font-size: .94rem; line-height: 1.55; color: var(--c-muted); max-width: 30ch; }
@media (max-width: 900px) { .amenidades { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
                            .amenidades--icones { gap: 1rem; } }
@media (max-width: 620px) { .amenidades { grid-template-columns: 1fr; } }

/* ---------- .horarios ----------
   Check-in e check-out estavam como nota de rodape em .9rem. Sao os dois 16:00,
   ou seja, diaria de 24 horas — informacao que decide viagem e que ninguem lia.
   Viraram dois numeros grandes, na fonte de display, com o filete dourado.     */
.horarios {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(2.5rem, 8vw, 6rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2rem;
  border-top: 2px solid var(--c-gold);
  max-width: 34rem; margin-inline: auto;
}
.horarios__item { text-align: center; }
.horarios__item span {
  display: block; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-muted); margin-bottom: .5rem;
}
.horarios__item strong {
  display: block; font-family: var(--f-display); font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1;
  color: var(--c-ink); font-variant-numeric: tabular-nums;
}

/* (o visual da .nota-excecao esta no bloco proprio, mais acima) */

/* ---------- Ofertas do canal direto ---------- */
.oferta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
}
.oferta__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
  padding: 2.6rem 2.2rem;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-gold);
  border-radius: var(--radius);
}
.oferta__n {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  line-height: 1;
  color: var(--c-accent);
}
.oferta__card p { color: var(--c-muted); font-size: .95rem; line-height: 1.6; }
.oferta__card .btn { margin-top: auto; }

@media (max-width: 900px) {
  .incluso { grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
  /* a base zera o espaco entre linhas; as variantes em cartao precisam dele */
  .incluso--fotos { gap: 2.2rem 1.4rem; }
  .incluso--icones { gap: 1rem; }
}
@media (max-width: 620px) {
  .incluso { grid-template-columns: 1fr; }
  .oferta__card { padding: 2rem 1.6rem; }
}