/* Estilos da home (eram inline no index.html). Ficaram em arquivo próprio para
   a Content-Security-Policy não precisar de 'unsafe-inline' em style-src. */

/* ================= TOKENS ================= */
:root {
  --noite:   #141F17;  /* fundo — verde pinheiro escuro */
  --pinho:   #1D2C22;  /* superfície dos cartões */
  --musgo:   #35462F;  /* bordas e detalhes */
  --nevoa:   #EDE8DB;  /* texto principal */
  --salvia:  #A6B49B;  /* texto secundário */
  --fogo:    #E29A4D;  /* âmbar de lareira — ação */
  --fogo-claro: #F0BC82;
  --display: "Fraunces", Georgia, serif;
  --texto:   "Albert Sans", -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* O atributo hidden vale menos que um display do CSS: sem esta linha, todo
   bloco com display declarado (resultados, estados da busca) continua na
   tela mesmo escondido pelo JS. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--noite);
  color: var(--nevoa);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

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

/* ================= BOTÃO DO MINIGOLFE (parceria Canaã Resort) ================= */
.faixa-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .7rem;
  background: #5FB07E;   /* verde-grama do botão */
  color: #0B2718;
  font-weight: 800;
  font-size: .82rem;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 999px;
  padding: .55rem 1rem;
  transition: background .25s;
}
.faixa-btn:hover { background: #74C592; }

/* ================= CABEÇALHO ================= */
.topo {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
}
.marca {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .02em;
}
/* O arco do logo no cabeçalho: alto o bastante para se reconhecer, baixo
   o bastante para não engordar a barra sobre a foto do hero. */
.marca-arco {
  height: 34px;
  width: auto;
  flex: none;
  /* A arte já vem com um halo verde-escuro semitransparente; sobre a foto
     do hero ele viraria uma mancha. A sombra devolve o destaque sem plano
     de fundo. */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
/* Emblema completo (arco + tipografia do logo). Só onde há espaço para a
   tipografia ser lida — abaixo de ~110px o "HORIZONTE" fecha. */
.marca-emblema { display: inline-block; line-height: 0; }
.marca-emblema img {
  width: min(15rem, 62vw);
  height: auto;
}

/* ================= HERO ================= */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}
.hero-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* display:contents faz o <picture> sumir da caixa: quem recebe os 100% de
   altura da moldura é a <img>, como era antes de existir a versão mobile. */
.hero-foto picture { display: contents; }
.hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  filter: saturate(1.18);   /* realça os verdes da paisagem */
}
.hero::after {   /* véu verde leve: a foto aparece mais, o texto segue legível */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(26,53,36,.28) 0%,
      rgba(26,53,36,.04) 34%,
      rgba(22,42,30,.18) 62%,
      rgba(20,31,23,.85) 92%,
      var(--noite) 100%);
}
.hero-conteudo {
  position: relative;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem 4.5rem;
  animation: subir .9s ease-out both .15s;
  text-shadow: 0 1px 5px rgba(10, 18, 12, .5), 0 2px 22px rgba(10, 18, 12, .6);
}
@keyframes subir {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fogo-claro);
  margin-bottom: .9rem;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 550;
  font-size: clamp(2.7rem, 11vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 14ch;
}
.hero h1 em {
  font-style: italic;
  color: var(--fogo-claro);
}
/* Linha de contexto abaixo do título: diz ao visitante (e ao Google)
   o que é, para quem e onde fica, sem tirar a frase da marca. */
.hero-chamada {
  margin-top: .9rem;
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(237,232,219,.94);
  text-shadow: 0 1px 12px rgba(10,16,12,.75);
}
.hero-local {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.3rem;
  background: rgba(10,16,12,.55);
  backdrop-filter: blur(3px);
  border-radius: 999px;
  padding: .6rem 1.1rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fogo-claro);
}
.hero-local svg { flex: none; }

/* ============ BARRA DE BUSCA DO HERO ============ */
/* Primeira coisa útil da página: no celular — de onde vem quase todo o
   tráfego — a escolha de datas tem que caber na primeira tela, e não a
   uma rolagem de distância. Cartão claro de propósito: sobre a foto
   escura do hero é o único elemento que puxa o olho. */
.busca-topo {
  margin-top: 1.5rem;
  max-width: 40rem;
  background: #F6F2E8;
  border-radius: 18px;
  padding: .9rem;
  box-shadow: 0 18px 40px rgba(8,14,10,.45);
  text-shadow: none;
}
.bt-titulo {
  font-family: var(--display);
  font-size: 1rem;
  color: #1D2C22;
  margin: .15rem .3rem .7rem;
}
.bt-campos { display: grid; gap: .5rem; }
/* Grade deixa o item crescer até o conteúdo: com data longa no campo, o
   "25/08/2026 → 28/08/2026 · 3 noites" empurrava o cartão para fora. */
.bt-campos > * { min-width: 0; }
.bt-campo {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 56px;
  text-align: left;
  background: #fff;
  border: 1px solid #DCD5C4;
  border-radius: 12px;
  padding: .65rem .85rem;
  font-family: var(--texto);
  color: #1D2C22;
}
button.bt-campo { cursor: pointer; transition: border-color .2s, box-shadow .2s; }
button.bt-campo:hover { border-color: var(--fogo); }
button.bt-campo:focus-visible { outline: 2px solid var(--fogo); outline-offset: 2px; }
.bt-campo svg { flex: none; color: #6E7A66; }
.bt-campo span { flex: 1 1 auto; min-width: 0; }
.bt-campo small {
  display: block;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6E7A66;
}
.bt-campo strong {
  display: block;
  margin-top: .14rem;
  font-size: .97rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bt-periodo.preenchido strong { color: #2C5A38; }
.bt-buscar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 56px;
  border: none;
  border-radius: 12px;
  background: var(--fogo);
  color: #1D2C22;
  font-family: var(--texto);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.bt-buscar:hover { background: var(--fogo-claro); }
.bt-buscar:active { transform: scale(.99); }
.bt-rodape {
  margin: .7rem .3rem .1rem;
  font-size: .78rem;
  color: #5C6857;
}

/* ============ MODAL DE DATAS ============ */
.modal {
  width: min(34rem, calc(100vw - 1.4rem));
  max-height: min(90svh, 46rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--musgo);
  border-radius: 20px;
  background: var(--pinho);
  color: var(--nevoa);
}
/* display só no estado aberto: com display fixo, a regra do navegador que
   esconde o <dialog> fechado perde e o modal fica sempre na tela. */
.modal[open] { display: flex; flex-direction: column; }
.modal::backdrop { background: rgba(8,14,10,.74); }
/* O filtro divide a linha do título: no corpo ele consumia uma faixa
   inteira acima do calendário, que é o que o hóspede veio ver. Sem wrap:
   deixando quebrar, o X caía sozinho numa segunda linha e abria uma faixa
   vazia maior do que a que o filtro ocupava antes. Quem encolhe é o
   resumo do filtro, com reticências. */
.md-topo {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .7rem;
  padding: 1.1rem 1.2rem .6rem;
}
.md-topo h2 { font-family: var(--display); font-size: 1.35rem; font-weight: 550; white-space: nowrap; }
.md-topo .filtro-abrir { flex: 0 1 auto; min-width: 0; }
.md-fechar { margin-left: auto; }
.md-fechar {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20,31,23,.6);
  border: 1px solid var(--musgo);
  color: var(--nevoa);
  font-size: 1rem;
  cursor: pointer;
}
.md-fechar:hover { border-color: var(--fogo); }
.md-corpo { padding: 0 1.2rem 1.1rem; overflow-y: auto; }
.md-rodape {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  padding: .9rem 1.2rem 1.1rem;
  border-top: 1px solid var(--musgo);
  background: rgba(20,31,23,.55);
}
.md-resumo { flex: 1 1 11rem; min-width: 0; }
.md-resumo small {
  display: block;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--salvia);
}
.md-resumo strong { display: block; margin-top: .15rem; font-size: .92rem; font-weight: 600; }
.md-confirmar {
  flex: none;
  border: none;
  border-radius: 12px;
  padding: .85rem 1.3rem;
  background: var(--fogo);
  color: #1D2C22;
  font-family: var(--texto);
  font-weight: 800;
  font-size: .84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.md-confirmar:disabled {
  background: rgba(166,180,155,.22);
  color: rgba(237,232,219,.45);
  cursor: not-allowed;
}

/* ---------- seção de resultados antes e depois das datas ---------- */
.busca-sem-datas { display: grid; gap: .9rem; justify-items: start; }
.busca-sem-datas p { color: var(--salvia); font-size: .95rem; line-height: 1.5; }
.btn-datas {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: none;
  border-radius: 999px;
  padding: .85rem 1.3rem;
  background: var(--fogo);
  color: #1D2C22;
  font-family: var(--texto);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  transition: background .2s;
}
.btn-datas:hover { background: var(--fogo-claro); }
.busca-com-datas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}
.busca-com-datas p { font-weight: 600; }
.bcd-alterar {
  flex: none;
  background: none;
  border: 1px solid var(--musgo);
  border-radius: 999px;
  padding: .5rem 1rem;
  color: var(--nevoa);
  font-family: var(--texto);
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
}
.bcd-alterar:hover { border-color: var(--fogo); }

/* ============ LINHA DO HORIZONTE (assinatura) ============ */
.horizonte {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.horizonte svg { flex: none; }
.horizonte::before, .horizonte::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--musgo);
}

/* ================= SEÇÕES ================= */
section { padding: 3.5rem 0; }
.miolo {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.titulo-secao {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: .6rem;
}
.sub-secao {
  color: var(--salvia);
  max-width: 36rem;
  margin-bottom: 2.2rem;
}

/* ================= CHALÉS ================= */
.chale {
  background: var(--pinho);
  border: 1px solid var(--musgo);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 2.2rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.chale.visivel { opacity: 1; transform: none; }
/* Chegando pelo "Ver fotos" do resultado, o cartão precisa de um respiro
   acima e de um segundo de destaque — senão a rolagem para num ponto
   qualquer e o hóspede não sabe onde foi parar. */
.chale { scroll-margin-top: 1.2rem; }
.chale.realce { border-color: var(--fogo); box-shadow: 0 0 0 2px rgba(226,154,77,.35); }

/* --- capa do chalé + galeria em tela cheia --- */
.galeria { position: relative; }
/* A capa é um botão: precisa anunciar que existe mais coisa atrás dela,
   senão o visitante nunca clica e as outras cinco fotos não existem. */
.capa {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.capa img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.capa-selo {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(20,31,23,.62);
  backdrop-filter: blur(4px);
  color: var(--nevoa);
  font-family: var(--texto);
  font-size: .76rem;
  font-weight: 700;
  transition: background .2s, color .2s;
}
.capa:hover .capa-selo { background: rgba(20,31,23,.85); color: var(--fogo-claro); }
.capa:focus-visible { outline: 2px solid var(--fogo); outline-offset: 3px; }

.selo-comodidades {
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.selo-comodidades span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--nevoa);
  background: rgba(20,31,23,.55);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: .32rem .65rem;
}
.selo-comodidades svg { flex: none; color: var(--fogo-claro); }

/* --- ficha do chalé --- */
.ficha { padding: 1.5rem 1.25rem 1.6rem; }
.ficha .selo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fogo-claro);
  margin-bottom: .55rem;
}
.ficha h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 550;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: .005em;
}
.ficha .descricao {
  margin-top: .7rem;
  color: var(--salvia);
  font-size: .97rem;
}
.comodidades {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.05rem;
  list-style: none;
}
.comodidades li {
  font-size: .78rem;
  font-weight: 500;
  color: var(--nevoa);
  border: 1px solid var(--musgo);
  border-radius: 999px;
  padding: .32rem .75rem;
  background: rgba(53,70,47,.25);
}

/* Link para a página completa do chalé (fotos + disponibilidade). */
.ver-chale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.2rem;
  padding: .8rem 1rem;
  border: 1px solid var(--fogo);
  border-radius: 12px;
  background: rgba(226,154,77,.12);
  color: var(--fogo-claro);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: background .2s;
}
.ver-chale:hover { background: rgba(226,154,77,.22); }
.ver-chale svg { flex: none; }

/* --- botões de reserva --- */
.reservar { margin-top: 1.4rem; }
.reservar p {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--salvia);
  margin-bottom: .65rem;
}
.canais {
  display: grid;
  gap: .55rem;
  list-style: none;
}
.canais a {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  border: 1px solid var(--musgo);
  border-radius: 14px;
  padding: .85rem 1rem;
  background: rgba(20,31,23,.45);
  font-weight: 600;
  font-size: .95rem;
  transition: border-color .25s, background .25s, transform .2s;
}
.canais a:hover {
  border-color: var(--fogo);
  background: rgba(226,154,77,.08);
  transform: translateX(3px);
}
.canais .icone {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}
.canais .airbnb .icone  { background: rgba(255,56,92,.14); color: #FF7189; }
.canais .booking .icone { background: rgba(63,113,231,.16); color: #7FA4F5; }
.canais .cabanas .icone { background: rgba(226,154,77,.14); color: var(--fogo-claro); }
.canais small {
  display: block;
  font-weight: 400;
  font-size: .74rem;
  color: var(--salvia);
}
.canais .seta {
  margin-left: auto;
  color: var(--salvia);
  flex: none;
}

/* --- chalé vendido só pelo site --- */
/* É um <p> dentro de .reservar, que caixa-alta o rótulo "RESERVAS". Sem
   desfazer isso aqui, a frase inteira sairia gritando. */
.reservar .so-aqui {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-top: .9rem;
  margin-bottom: 0;
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.5;
  color: var(--salvia);
}
.reservar .so-aqui svg { flex: none; margin-top: .15rem; color: var(--fogo-claro); }
.reservar .so-aqui b { color: var(--fogo-claro); font-weight: 700; }
.esgotado-aviso {
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid var(--fogo);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  color: var(--fogo-claro);
  background: rgba(226, 154, 77, .08);
  font-weight: 700;
  font-size: .95rem;
}
.esgotado-aviso svg { flex: none; }

/* --- chalé "em breve" --- */
.em-breve-foto {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(226,154,77,.14), transparent 60%),
    linear-gradient(180deg, #22331F, #182619);
}
.em-breve-foto figcaption {
  display: grid;
  justify-items: center;
  gap: .8rem;
  color: var(--salvia);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ================= A PROPRIEDADE ================= */
.propriedade { background: var(--pinho); border-block: 1px solid var(--musgo); }
.vivencias {
  display: grid;
  gap: 1.4rem;
  list-style: none;
  margin-top: 2rem;
}
.vivencias li {
  display: flex;
  gap: .95rem;
  align-items: flex-start;
}
.vivencias .icone-viv {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--musgo);
  border-radius: 12px;
  color: var(--fogo-claro);
  background: rgba(20,31,23,.5);
}
.vivencias strong { display: block; font-size: 1rem; }
.vivencias span { color: var(--salvia); font-size: .9rem; }
/* Bloco para o botão do minigolfe cair na linha de baixo em vez de colar no
   fim do texto. Não pega o .icone-viv, que também é um span mas mora fora
   desta div e tem regra mais específica. */
.vivencias div span { display: block; }

/* ================= INSTAGRAM ================= */
.insta-mosaico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: 2rem;
  text-decoration: none;
}
.insta-mosaico img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  transition: transform .25s, filter .25s;
}
.insta-mosaico:hover img { filter: brightness(1.08); }
.acao-insta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.2rem;
  background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF);
  color: #FFFFFF;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border-radius: 999px;
  padding: .9rem 1.5rem;
  transition: filter .25s, transform .2s;
}
.acao-insta:hover { filter: brightness(1.1); transform: translateY(-2px); }
@media (min-width: 860px) {
  .insta-mosaico { grid-template-columns: repeat(6, 1fr); }
}

/* ================= PERGUNTAS FREQUENTES ================= */
.faq { display: grid; gap: .6rem; margin-top: 1.6rem; }
.faq details {
  background: var(--pinho);
  border: 1px solid var(--musgo);
  border-radius: 14px;
  padding: .95rem 1.1rem;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: none;
  color: var(--fogo-claro);
  font-size: 1.3rem;
  line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq details[open] summary { color: var(--fogo-claro); }
.faq p {
  margin-top: .7rem;
  color: var(--salvia);
  font-size: .95rem;
  line-height: 1.6;
}

/* ================= COMO CHEGAR ================= */
.mapa-moldura {
  border: 1px solid var(--musgo);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 2rem;
}
.mapa-moldura iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  filter: saturate(.85);
}
.acao-rota {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.2rem;
  background: var(--fogo);
  color: #201409;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border-radius: 999px;
  padding: .9rem 1.5rem;
  transition: background .25s;
}
.acao-rota:hover { background: var(--fogo-claro); }

/* ================= WHATSAPP ================= */
.whatsapp-flutuante {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 20;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform .2s;
}
.whatsapp-flutuante:hover { transform: scale(1.08); }
.contato-whats {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--nevoa);
  font-weight: 600;
  text-decoration: none;
}
.contato-whats:hover { color: var(--fogo-claro); }

/* ================= RESERVA DIRETA ================= */
.reserva-direta {
  display: grid;
  gap: .45rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--fogo);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: .55rem;
  background: rgba(226,154,77,.1);
  color: var(--nevoa);
  font-family: var(--texto);
  font-weight: 600;
  font-size: .95rem;
  transition: background .25s, transform .2s;
}
.reserva-direta:hover { background: rgba(226,154,77,.18); transform: translateX(3px); }
.reserva-direta .icone {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(226,154,77,.18);
  color: var(--fogo-claro);
}
.reserva-direta small {
  display: block;
  font-weight: 400;
  font-size: .74rem;
  color: var(--salvia);
}
.reserva-direta .seta { margin-left: auto; color: var(--fogo-claro); flex: none; }
.rd-cabeca {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .15rem;
}
.rd-cabeca strong {
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}
.rd-cabeca .icone { width: 30px; height: 30px; }
.rd-selo {
  font-style: normal;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #201409;
  background: var(--fogo);
  border-radius: 999px;
  padding: .16rem .45rem;
}
.rd-linha {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-weight: 400;
  font-size: .86rem;
  color: var(--salvia);
}
.rd-linha .fio {
  flex: 1;
  min-width: 1rem;
  border-bottom: 1px dotted rgba(166, 180, 155, .35);
  transform: translateY(-4px);
}
.rd-linha b {
  font-weight: 700;
  color: var(--fogo-claro);
  white-space: nowrap;
}
.rd-linha b em {
  font-style: normal;
  font-weight: 400;
  font-size: .74rem;
  color: var(--salvia);
}
.rd-destaque span:first-child { color: var(--nevoa); font-weight: 600; }
.rd-destaque b { color: var(--fogo); }
.reserva-direta > small { margin-top: .3rem; }

.busca-cartao {
  border: 1px solid var(--musgo);
  border-radius: 20px;
  background: var(--pinho);
  color: var(--nevoa);
  padding: 1.4rem 1.3rem 1.3rem;
}
/* Os três chips ocupavam duas linhas no celular e empurravam o calendário
   para fora da tela logo na abertura. Agora ficam atrás de um botão: quem
   quer filtrar abre, quem não quer ganha o espaço de volta. */
.filtro-abrir {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(20,31,23,.5);
  border: 1px solid var(--musgo);
  border-radius: 999px;
  padding: .45rem .9rem;
  color: var(--salvia);
  font-family: var(--texto);
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.filtro-abrir:hover { border-color: var(--fogo); }
.filtro-rotulo { font-weight: 600; }
.filtro-abrir svg { flex: none; }
.filtro-resumo { color: var(--nevoa); }
/* Filtro ligado precisa se anunciar mesmo fechado: senão o hóspede vê
   "sem vagas" sem lembrar que foi ele quem escondeu dois chalés. */
.filtro-abrir.filtrando {
  border-color: var(--fogo);
  background: rgba(226,154,77,.16);
  color: var(--nevoa);
}
.filtro-seta { font-size: .62rem; opacity: .8; transition: transform .2s; }
.filtro-abrir.aberto .filtro-seta { transform: rotate(180deg); }
.busca-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
/* Tela estreita: "Filtrar por chalés" não cabe ao lado do título. O funil
   mais o resumo bastam — e o resumo é a parte que informa, então some o
   rótulo, nunca ele. */
@media (max-width: 560px) {
  .md-topo { gap: .4rem; padding-left: 1rem; padding-right: 1rem; }
  .md-topo h2 { font-size: 1.05rem; }
  .filtro-rotulo { display: none; }
  .filtro-abrir { padding: .35rem .6rem; }
  /* Trava o resumo: "Refúgio e Lagoa" empurraria o X para fora da linha. */
  .filtro-resumo {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(20,31,23,.5);
  border: 1px solid var(--musgo);
  border-radius: 999px;
  padding: .5rem 1rem;
  color: var(--salvia);
  font-family: var(--texto);
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.filtro-chip svg { flex: none; display: none; }
.filtro-chip.ativo .olho-aberto { display: inline-block; color: var(--fogo-claro); }
.filtro-chip:not(.ativo) .olho-fechado { display: inline-block; color: var(--salvia); }
.filtro-chip:hover { border-color: var(--fogo); }
.filtro-chip.ativo {
  background: rgba(226,154,77,.16);
  border-color: var(--fogo);
  color: var(--nevoa);
}
.busca-calendario { margin-top: 1.1rem; }
/* Três colunas fixas: as setas nunca empurram o nome do mês para fora do
   centro, mesmo quando um dos lados está escondido. */
.mr-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .4rem;
  margin-bottom: .7rem;
}
.mr-nav strong {
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
}
/* A seta sozinha não dizia para onde levava: quem abria num mês lotado
   concluía que o site não tinha vaga nenhuma e ia embora. O botão agora
   carrega o nome do mês vizinho e quantas noites livres existem lá. */
.mr-nav button {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-height: 38px;
  padding: .28rem .6rem;
  border: 1px solid var(--musgo);
  border-radius: 19px;
  background: none;
  color: var(--nevoa);
  font-family: inherit;
  line-height: 1.15;
  cursor: pointer;
}
#busca-ant { justify-self: start; }
#busca-prox { justify-self: end; }
/* Escondido em vez de esmaecido: um botão a 30% ainda parece clicável, e a
   partir do mês corrente o anterior nunca é navegável. */
.mr-nav button:disabled { visibility: hidden; }
.mrn-seta { font-size: 1rem; opacity: .75; }
.mrn-txt { display: flex; flex-direction: column; }
#busca-ant .mrn-txt { align-items: flex-start; }
#busca-prox .mrn-txt { align-items: flex-end; }
.mrn-mes { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.mrn-vagas {
  font-size: .66rem;
  font-weight: 700;
  white-space: nowrap;
  color: #8FCFA3;
}
.mrn-vagas.vazio { color: var(--salvia); font-weight: 600; }
/* O avanço de mês é preenchido no mesmo verde dos dias livres: contra uma
   grade toda vermelha ele precisa ler como saída, não como enfeite. O
   retroceder fica de contorno — é a rota secundária. */
#busca-prox {
  background: rgba(90,168,120,.5);
  border-color: rgba(122,191,142,.9);
  color: #F2FBF4;
  padding: .32rem .75rem;
}
#busca-prox:hover { background: rgba(90,168,120,.72); }
#busca-prox .mrn-mes { font-size: .84rem; font-weight: 700; }
#busca-prox .mrn-vagas { color: #DDF2E2; }
#busca-prox .mrn-seta { opacity: 1; }
/* Repete a saída embaixo da grade: no celular o topo do modal já saiu da
   tela quando o dedo chega na última semana do mês. */
.mr-prox-baixo {
  display: block;
  width: 100%;
  margin-top: .7rem;
  padding: .6rem .8rem;
  border: 1px solid rgba(122,191,142,.9);
  border-radius: 12px;
  background: rgba(90,168,120,.5);
  color: #F2FBF4;
  font-family: inherit;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
.mr-prox-baixo:hover { background: rgba(90,168,120,.72); }
@media (max-width: 380px) {
  .mr-nav button { padding: .28rem .45rem; }
  .mrn-mes { font-size: .74rem; }
  .mrn-vagas { font-size: .62rem; }
}
.mr-semana, .mr-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.mr-semana span {
  text-align: center;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--salvia);
  padding-bottom: .3rem;
}
.mr-grade button {
  min-height: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  border-radius: 9px;
  background: rgba(20,31,23,.5);
  color: var(--nevoa);
  font-family: var(--texto);
  font-size: .85rem;
  cursor: pointer;
  /* No toque, um dedo parado meio segundo em cima do dia selecionava o
     "R$ 397" e abria a bolha de copiar em vez de marcar a data. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mr-grade .preco-dia {
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fogo-claro);
  /* A célula é estreita e o valor agora tem espaço depois do "R$": sem
     isso, "R$" e o número cairiam em linhas separadas. */
  white-space: nowrap;
}
.mr-grade .vagas-dia {
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--nevoa);
}
.mr-grade .sel .preco-dia, .mr-grade .sel .vagas-dia { color: #201409; }
/* Noite de feriado: preço em destaque e um filete no topo, para não se
   confundir com um fim de semana comum. */
.mr-grade .noite-feriado { box-shadow: inset 0 3px 0 var(--fogo); }
.mr-grade .preco-dia.feriado { color: var(--fogo); font-weight: 800; }
.mr-grade .sel .preco-dia.feriado { color: #201409; }
.mr-grade button:hover:not(:disabled) { background: rgba(226,154,77,.2); }
.mr-grade .vazio { min-height: 4.5rem; background: none; cursor: default; }
.mr-grade button:disabled {
  color: rgba(166,180,155,.4);
  background: rgba(20,31,23,.25);
  cursor: default;
  text-decoration: line-through;
}
.mr-grade .sel {
  background: var(--fogo);
  color: #201409;
  font-weight: 700;
}
.mr-grade .faixa { background: rgba(226,154,77,.3); }
/* 2 ou mais chalés livres nessa noite: verde forte. */
.mr-grade .muitas-vagas {
  background: rgba(90,168,120,.55);
  border: 1px solid rgba(90,168,120,.9);
}
.mr-grade .muitas-vagas:hover { background: rgba(90,168,120,.7); }
.mr-grade .muitas-vagas.sel { background: var(--fogo); border-color: var(--fogo); }
/* Só 1 chalé livre nessa noite: verde claro. */
.mr-grade .poucas-vagas {
  background: rgba(122,191,142,.22);
  border: 1px solid rgba(122,191,142,.5);
}
.mr-grade .poucas-vagas:hover { background: rgba(122,191,142,.35); }
.mr-grade .poucas-vagas.sel { background: var(--fogo); border-color: var(--fogo); }
/* Dia ocupado, mas ainda clicável: pode ser escolhido como checkout
   (a diária vira às 12h, então dá para receber outro hóspede à tarde). */
.mr-grade .ocupado {
  color: #FFD6D6;
  background: rgba(212,58,58,.42);
  border: 1px solid rgba(255,120,120,.55);
  text-decoration: line-through;
  text-decoration-color: rgba(255,214,214,.85);
}
.mr-grade .ocupado:hover { background: rgba(212,58,58,.6); }
.mr-grade .ocupado.sel { background: var(--fogo); color: #201409; border-color: var(--fogo); text-decoration: none; }
/* Dia ocupado que, com o check-in já marcado, vale como saída. Metade
   âmbar (a manhã livre) e metade vermelha (a noite reservada), sem risco
   no número: o dia deixa de parecer bloqueado e volta a pedir clique. */
.mr-grade .so-saida {
  color: #FFE9C9;
  background: linear-gradient(135deg, rgba(226,154,77,.32) 0 46%, rgba(212,58,58,.42) 54% 100%);
  border: 1px dashed rgba(226,154,77,.85);
  text-decoration: none;
}
.mr-grade .so-saida:hover {
  background: rgba(226,154,77,.4);
  border-style: solid;
}
/* Dia que nenhum chalé alcança a partir do check-in escolhido: sai de foco
   sem sair de cena, porque um clique nele recomeça a estadia ali. */
.mr-grade .fora-alcance {
  opacity: .3;
  filter: saturate(.35);
}
.mr-grade .fora-alcance:hover { opacity: .6; }
.mr-grade .saida-dia {
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fogo-claro);
}
/* Data já passada: mesmo vermelho do "ocupado" — reforça a sensação de
   poucas vagas em vez do cinza neutro padrão de dia desabilitado. */
.mr-grade button.passado:disabled {
  color: #FFD6D6;
  background: rgba(212,58,58,.42);
  border: 1px solid rgba(255,120,120,.55);
  text-decoration: line-through;
  text-decoration-color: rgba(255,214,214,.85);
}
.mr-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.3rem;
  align-items: center;
  margin-top: .9rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--nevoa);
}
.mr-legenda i {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  margin-right: .4rem;
  vertical-align: -2px;
}
.mr-legenda .lg-muitas { background: rgba(90,168,120,.65); border: 1px solid rgba(90,168,120,.9); }
.mr-legenda .lg-poucas { background: rgba(122,191,142,.32); border: 1px solid rgba(122,191,142,.6); }
.mr-legenda .lg-ocupado { background: rgba(212,58,58,.42); border: 1px solid rgba(255,120,120,.55); }
/* No celular não existe hover nem tooltip: o title dos dias fora de alcance
   nunca aparece. Esta linha diz em texto o que o apagado quer dizer. */
.mr-dica {
  margin-top: .7rem;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--salvia);
}
/* Tela estreita: a coluna do calendário ficava com 39px de largura, abaixo
   do mínimo confortável para o dedo. Colar o gap e deixar a grade avançar
   um pouco sobre o respiro do cartão devolve ~44px sem apertar o resto do
   conteúdo, que continua com a margem original. */
@media (max-width: 520px) {
  .mr-semana, .mr-grade {
    gap: 2px;
    margin-left: -.5rem;
    margin-right: -.5rem;
  }
  .busca-cartao, .md-corpo { padding-left: .8rem; padding-right: .8rem; }
  /* Dia que já passou não tem preço, vaga nem clique — só ocupa altura e
     empurra para fora da tela as datas que ainda dá para reservar. No
     celular ele encolhe. A linha inteira encolhe junto, porque a altura da
     linha vem da célula mais alta: semana só de passados fica baixa, e a
     semana que mistura passado com dia livre mantém o tamanho cheio. */
  .mr-grade button.passado:disabled {
    min-height: 2.1rem;
    font-size: .78rem;
  }
  /* As células vazias antes do dia 1 seguiam a altura cheia e seguravam a
     primeira linha esticada mesmo com tudo passado nela. */
  .mr-grade .vazio { min-height: 0; }
}
/* Só entra na legenda quando existe dia "só saída" na grade — antes do
   check-in esse estado não está na tela, e explicá-lo seria ruído. */
.mr-legenda .lg-saida {
  background: linear-gradient(135deg, rgba(226,154,77,.32) 0 46%, rgba(212,58,58,.42) 54% 100%);
  border: 1px dashed rgba(226,154,77,.85);
}
.mr-legenda #legenda-saida { color: var(--fogo-claro); }
.busca-resultados {
  display: grid;
  gap: .7rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--musgo);
}
.busca-resultado {
  display: flex;
  align-items: center;
  /* A quebra é o que deixa o rodapé de selos cair para a linha de baixo em
     vez de espremer foto, preço e botão. */
  flex-wrap: wrap;
  gap: .8rem;
  background: rgba(20,31,23,.5);
  border: 1px solid var(--musgo);
  border-radius: 14px;
  padding: .7rem .8rem;
  transition: border-color .3s, box-shadow .3s;
}
.busca-resultado.realce { border-color: var(--fogo); box-shadow: 0 0 0 2px rgba(226,154,77,.35); }
.busca-resultado img {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
}
.busca-resultado-info { flex: 1; min-width: 0; }
.busca-resultado-info strong { display: block; font-size: .98rem; }
.busca-resultado-info span { display: block; font-size: .82rem; color: var(--fogo-claro); font-weight: 600; margin-top: .1rem; }
/* Sobrancelha: diz o tamanho da estadia, que é o que dá sentido ao número
   logo abaixo. Some do caminho do preço em vez de disputar com ele. */
.busca-resultado-info .br-noites {
  color: var(--salvia);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-top: .25rem;
}
/* O preço na serifada dos títulos, não na fonte de interface. Numa lista de
   comparação ele é a informação principal, e algarismos tabulares alinham
   os três chalés na vertical — dá para comparar de cima a baixo sem ler.
   O âmbar saiu daqui e foi para o selo: em âmbar o preço parecia link, e
   sobravam duas coisas âmbar disputando a mesma atenção. */
.busca-resultado-info .br-preco {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .05rem;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 550;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--nevoa);
  font-variant-numeric: tabular-nums;
}
.busca-resultado-info .br-preco .preco-cheio { font-size: 1rem; }
/* O âmbar da lareira, que no site inteiro significa ação e calor. Aqui é o
   único ponto quente do card — o resto é fundo e texto. */
.br-selo-pix {
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(226,154,77,.14);
  border: 1px solid rgba(226,154,77,.5);
  color: var(--fogo-claro);
  font-family: var(--texto);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
/* A taxa que existe e não está sendo cobrada. O riscado é o preço real da
   limpeza; o "Grátis" é o que o hóspede paga por ela nesta promoção. */
.busca-resultado-info .br-limpeza {
  color: var(--salvia);
  font-size: .76rem;
  font-weight: 600;
  margin-top: .15rem;
}
.br-limpeza s { opacity: .6; }
/* "Grátis" em branco forte, não em verde: o âmbar do selo já é o único
   ponto quente do card, e um verde aqui traria de volta a terceira cor que
   essa passada tirou. O riscado ao lado já diz que é vantagem. */
.br-limpeza b { color: var(--nevoa); font-weight: 700; }
.busca-resultado-info .br-cartao {
  color: var(--salvia);
  font-size: .78rem;
  font-weight: 600;
  margin-top: .2rem;
  font-variant-numeric: tabular-nums;
}
/* Escolha do meio de pagamento, no formulário de reserva. */
.ro-metodos { display: grid; gap: .5rem; margin: .2rem 0 .1rem; }
.ro-metodo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .8rem;
  border: 1px solid var(--musgo);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ro-metodo:has(input:checked) { border-color: var(--fogo); background: rgba(226,154,77,.1); }
.ro-metodo input { accent-color: var(--fogo); flex: none; }
.ro-metodo-txt { display: grid; gap: .1rem; }
.ro-metodo-txt strong { font-size: .9rem; }
.ro-metodo-txt span { font-size: .78rem; color: var(--salvia); }
.br-fotos {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .35rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--salvia);
  font-family: var(--texto);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.br-fotos:hover { color: var(--fogo-claro); }
.br-fotos svg { flex: none; }
.busca-resultado .mr-btn { flex: none; padding: .6rem .9rem; font-size: .85rem; }
/* Rodapé do card: ocupa a linha inteira abaixo de foto, preço e botão —
   o cartão é flex com quebra, e este bloco força a quebra sozinho. */
.br-rodape {
  flex: 1 0 100%;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(53,70,47,.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .9rem;
  flex-wrap: wrap;
}
.br-comodidades { display: flex; align-items: center; gap: .4rem .8rem; flex-wrap: wrap; }
.br-comodidades span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--salvia);
  white-space: nowrap;
}
.br-comodidades svg { flex: none; color: var(--fogo-claro); }
.busca-resultado.indisponivel { opacity: .55; }
.busca-resultado-info .sem-vagas { color: #E8A090; }

/* ---------- cupom de parceiro ---------- */
.cupom-area { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--musgo); }
.cupom-abrir {
  background: none;
  border: none;
  color: var(--salvia);
  font-family: var(--texto);
  font-size: .84rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
}
.cupom-abrir:hover { color: var(--fogo-claro); }
.cupom-form { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
#cupom-codigo {
  flex: 1 1 160px;
  min-width: 0;
  background: rgba(20,31,23,.6);
  border: 1px solid var(--musgo);
  border-radius: 10px;
  color: var(--nevoa);
  font-family: var(--texto);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .6rem .75rem;
}
#cupom-codigo:focus { border-color: var(--fogo); outline: none; }
.cupom-aplicar {
  flex: none;
  background: none;
  border: 1px solid var(--fogo);
  border-radius: 10px;
  color: var(--fogo-claro);
  font-family: var(--texto);
  font-weight: 700;
  font-size: .85rem;
  padding: .6rem 1.1rem;
  cursor: pointer;
}
.cupom-aplicar:hover { background: rgba(226,154,77,.12); }
.cupom-aplicar[disabled] { opacity: .5; cursor: default; }
.cupom-recado { margin-top: .5rem; font-size: .82rem; font-weight: 600; color: #E8A090; }
.cupom-selo {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .6rem;
  background: rgba(93,160,101,.14);
  border: 1px solid #5DA065;
  border-radius: 999px;
  padding: .45rem .5rem .45rem .9rem;
  width: fit-content;
  max-width: 100%;
  font-size: .84rem;
  font-weight: 700;
  color: #8FCB96;
}
.cupom-selo button {
  flex: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: #8FCB96;
  font-size: .75rem;
  cursor: pointer;
}
.cupom-selo button:hover { background: rgba(143,203,150,.2); }
/* Preço cheio riscado ao lado do valor com desconto. */
.preco-cheio { text-decoration: line-through; opacity: .55; font-weight: 600; margin-right: .35rem; }
.busca-resultado-info .cupom-nota { color: var(--salvia); font-weight: 600; font-size: .76rem; }
.busca-vazio {
  font-size: .85rem;
  color: var(--fogo-claro);
}
.busca-vazio .mr-btn { margin-top: .7rem; }
/* ---------- reserva online ---------- */
.busca-resultado-acoes { display: flex; flex-direction: column; gap: .45rem; }
/* Tela estreita: os botões disputavam a largura com o texto e espremiam a
   coluna de informação a ponto de sobrar uma palavra por linha — pior
   ainda com dois botões, quando a reserva online está ligada. Aqui eles
   caem para uma linha própria e o preço fica com o espaço todo ao lado da
   foto. O container já tem flex-wrap; o flex-basis de 100% é o que empurra. */
@media (max-width: 560px) {
  /* Coluna de texto mais alta que a foto: centralizada, a foto flutuava no
     meio do card, desencontrada do nome. Alinhada pelo topo ela encosta na
     linha do nome, que é onde o olho começa. */
  .busca-resultado { align-items: flex-start; }
  .busca-resultado-info { min-width: 8rem; }
  .busca-resultado-acoes { flex: 1 0 100%; flex-direction: row; }
  .busca-resultado-acoes .mr-btn { flex: 1; text-align: center; }
}
.mr-btn-secundario {
  background: none;
  border: 1px solid var(--musgo);
  color: var(--salvia);
  font-weight: 600;
}
.mr-btn-secundario:hover { border-color: var(--fogo); color: var(--fogo-claro); }
.reserva-online {
  background: var(--pinho);
  border: 1px solid var(--fogo);
  border-radius: 16px;
  padding: 1.1rem;
  display: grid;
  gap: .6rem;
  margin-top: .6rem;
}
.reserva-online h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.reserva-online h3.ro-ok { color: var(--stays, #7BC4A4); }
.reserva-online-sub { font-size: .85rem; color: var(--salvia); }
.reserva-online label { display: grid; gap: .25rem; font-size: .78rem; font-weight: 700; color: var(--salvia); }
.reserva-online input {
  background: rgba(20,31,23,.6);
  border: 1px solid var(--musgo);
  border-radius: 10px;
  color: var(--nevoa);
  font-family: var(--texto);
  font-size: 1rem;   /* 16px: abaixo disso o iPhone dá zoom ao focar o campo */
  font-weight: 400;
  padding: .65rem .75rem;
}
.reserva-online input:focus { outline: none; border-color: var(--fogo); }
.reserva-online-politica { font-size: .78rem; color: var(--salvia); line-height: 1.5; }
.reserva-online-erro { font-size: .85rem; color: var(--fogo-claro); font-weight: 600; }
.reserva-online-total { font-family: var(--display); font-size: 1.9rem; color: var(--fogo-claro); }
.reserva-online-prazo, .reserva-online-espera { font-size: .82rem; color: var(--salvia); }
.reserva-online .ro-fechar {
  background: none; border: none; color: var(--salvia);
  font-family: var(--texto); font-size: .82rem; cursor: pointer; text-decoration: underline;
}
.busca-resumo-datas {
  font-size: .85rem;
  color: var(--salvia);
  margin-bottom: .3rem;
}
.mr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: #25D366;
  color: #0B2E17;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border-radius: 999px;
  padding: .9rem 1.2rem;
  transition: filter .2s;
}
.mr-btn:hover { filter: brightness(1.08); }
.mr-btn[aria-disabled="true"] {
  background: rgba(166,180,155,.2);
  color: rgba(237,232,219,.45);
  pointer-events: none;
}

/* ================= RODAPÉ ================= */
footer { padding: 3rem 0 2.2rem; }
footer .miolo {
  display: grid;
  gap: 1.4rem;
  text-align: center;
  justify-items: center;
}
footer .marca-emblema { margin-bottom: .2rem; }
footer address {
  font-style: normal;
  color: var(--salvia);
  font-size: .9rem;
  line-height: 1.7;
}
footer .fina {
  font-size: .78rem;
  color: rgba(166,180,155,.65);
}
/* Selo do fornecedor do sistema de reservas (Nuvemsim). Formato de pílula
   com ícone + divisória + texto, na identidade do site em vez de branco. */
.selo-nuvemsim {
  grid-column: 1 / -1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: .6rem;
  padding: .5rem .9rem;
  border: 1px solid var(--musgo);
  border-radius: 12px;
  background: var(--pinho);
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.selo-nuvemsim:hover { border-color: var(--fogo); transform: translateY(-1px); }
.sn-icone {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(226,154,77,.14);
  color: var(--fogo-claro);
}
.sn-icone svg { width: 19px; height: 19px; }
.sn-divisor { width: 1px; height: 24px; background: var(--musgo); }
.sn-texto { display: grid; gap: 1px; line-height: 1.12; text-align: left; }
.sn-texto small {
  font-size: .56rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--salvia);
}
.sn-texto strong { font-size: 1.02rem; font-weight: 700; color: var(--nevoa); }

/* ================= MOVIMENTO REDUZIDO ================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-conteudo { animation: none; }
  .chale { opacity: 1; transform: none; transition: none; }
  .canais a { transition: none; }
}

/* ============ CELULAR: HERO CURTO ============ */
/* Com 92svh de hero a barra de busca nascia abaixo da dobra — que é
   exatamente o que esta mudança veio resolver. Aqui a altura passa a ser a
   do conteúdo, e o título e a chamada cedem alguns pixels. */
@media (max-width: 859px) {
  .hero { min-height: 0; }
  .hero-conteudo { padding: 5.4rem 1.25rem 1.8rem; }
  /* Uma linha só: em duas, o texto de apoio custava 24px de dobra. */
  .eyebrow { margin-bottom: .7rem; font-size: .64rem; letter-spacing: .1em; }
  .hero h1 { font-size: clamp(2rem, 8.4vw, 3.2rem); }
  .hero-chamada { margin-top: .7rem; font-size: .94rem; }
  .busca-topo { margin-top: 1.2rem; }
  .hero-local { margin-top: 1rem; padding: .4rem .8rem; font-size: .8rem; }
}

/* ================= TELAS MAIORES ================= */
@media (min-width: 860px) {
  section { padding: 5rem 0; }
  .topo { padding: 1.4rem 2.2rem; }
  .busca-topo { max-width: 46rem; padding: 1rem; }
  .bt-campos { grid-template-columns: 1fr auto; }
  .bt-buscar { padding: 0 1.7rem; }
  .chale {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    margin-bottom: 2.8rem;
  }
  .chale:nth-of-type(even) { direction: rtl; }
  .chale:nth-of-type(even) > * { direction: ltr; }
  .galeria, .capa, .capa img, .em-breve-foto { height: 100%; }
  .capa img { aspect-ratio: auto; }
  .ficha {
    padding: 2.4rem 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .vivencias { grid-template-columns: repeat(4, 1fr); }
  footer .miolo {
    text-align: left;
    justify-items: start;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* Substitutos dos antigos style="" inline (a CSP bloqueia atributo style).
   O !important reproduz a precedência que o atributo tinha. */
.horizonte-rodape { margin-top: 3rem !important; }
.mr-btn-topo { margin-top: .7rem !important; }

/* ================= MODAL DE HÓSPEDES ================= */
.modal-hospedes { width: min(26rem, calc(100vw - 1.4rem)); }
.mh-corpo { display: grid; gap: .2rem; padding-top: .3rem; }
.mh-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--musgo);
}
.mh-linha > span { display: grid; gap: .15rem; min-width: 0; }
.mh-linha strong { font-size: 1rem; }
.mh-linha small { font-size: .8rem; color: var(--salvia); }
.mh-contador { display: flex; align-items: center; gap: .6rem; flex: none; }
.mh-contador button {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--musgo);
  background: rgba(20,31,23,.6);
  color: var(--nevoa);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.mh-contador button:hover:not(:disabled) { border-color: var(--fogo); }
.mh-contador button:disabled { opacity: .35; cursor: not-allowed; }
.mh-contador output { min-width: 1.4rem; text-align: center; font-size: 1.1rem; font-weight: 700; }
.mh-dica { font-size: .85rem; color: var(--salvia); margin: .8rem 0 .3rem; min-height: 1.2em; }
.mh-dica strong { color: var(--nevoa); }
.mh-pronto { margin-top: .5rem; }

/* Botão de pessoas no card de um chalé que recebe mais que o casal. */
.br-grupo {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  margin: .1rem 0 .15rem;
  padding: .3rem .7rem;
  border: 1px solid var(--musgo);
  border-radius: 999px;
  background: rgba(20,31,23,.5);
  color: var(--nevoa);
  font-family: var(--texto);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.br-grupo:hover { border-color: var(--fogo); }
.br-grupo b { color: var(--fogo-claro); font-weight: 700; }
.br-extra { display: block; font-size: .8rem; color: var(--salvia); }