/* ============================================================
   Feriado Prolongado de Novembro 2026 · Hotel & Spa Saint Michel

   Variação sobre a base do Dia das Crianças, para as campanhas não
   terem todas a mesma cara. O que muda aqui: o destaque sai do
   amarelo e vai para o âmbar do fogo e do pôr do sol, que é a cena
   da campanha, e o véu do topo fica mais leve e quente para a foto
   do platô aparecer como foto, não só como atmosfera.

   Direção: editorial de montanha. Pinho profundo, luz champagne,
   papel quente e vidro. A vivacidade vem da luz real das fotos do
   hotel, nunca de bloco de cor. Bloco vibrante, forma arredondada
   e ícone ilustrado leem como infantil genérico e derrubam a
   percepção premium.

   Único elemento vibrante liberado: o amarelo do selo, sempre com
   texto preto e nunca como fundo de área grande.

   Tipografia: Cormorant Garamond nos títulos e Raleway no texto.
   A Raleway é a fonte do site do hotel; a serifa entra só no
   display, que é o que dá o registro editorial ao layout.

   Contraste conferido: todo par de texto e fundo passa em AA.
   ============================================================ */

:root {
  --pinho:        #003432;
  --pinho-dark:   #001e1d;
  --pinho-deep:   #001413;
  --champagne:    #b9a46e;
  --champagne-lt: #e0cfa0;
  --salvia:       #b5c99a;
  --areia:        #faf8f3;
  --papel:        #f6f3ea;
  --amarelo:      #f0a04b; /* âmbar do fogo; o nome do token fica para não mexer no resto */

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Raleway", "Helvetica Neue", Arial, sans-serif;

  --largura: 76rem;
  --raio:    1.25rem;
  --raio-sm: .75rem;

  --sombra:      0 1.25rem 3rem rgba(0, 20, 19, .28);
  --sombra-forte:0 1.75rem 4rem rgba(0, 20, 19, .45);
  --brilho:      0 0 1.75rem rgba(240, 160, 75, .4);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--pinho-dark);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease,
              border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.btn--grande { padding: 1.05rem 2.1rem; font-size: .82rem; }

.btn--amarelo { background: var(--amarelo); color: #101010; box-shadow: var(--brilho); }
.btn--amarelo:hover { background: #f6b870; transform: translateY(-2px); }

.btn--ouro {
  background: linear-gradient(135deg, var(--champagne-lt), var(--champagne));
  color: var(--pinho-dark);
}
.btn--ouro:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.5rem rgba(185,164,110,.4); }

.btn--vidro {
  background: rgba(255, 255, 255, .08);
  color: var(--papel);
  border: 1px solid rgba(224, 207, 160, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--vidro:hover { background: rgba(255,255,255,.16); border-color: var(--champagne-lt); }

.btn--linha { border: 1px solid rgba(224,207,160,.5); color: var(--champagne-lt); }
.btn--linha:hover { background: var(--champagne); color: var(--pinho-dark); border-color: var(--champagne); }

.btn--claro { background: var(--papel); color: var(--pinho-dark); }
.btn--claro:hover { background: var(--champagne-lt); transform: translateY(-2px); }

.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }

.btn-grupo { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-grupo--centro { justify-content: center; }

/* ============================================================
   BARRA DE AVISO
   ============================================================ */
.aviso {
  background: var(--pinho-deep);
  color: var(--papel);
  border-bottom: 1px solid rgba(185,164,110,.2);
  font-size: .72rem;
}
.aviso__inner {
  max-width: var(--largura);
  margin: 0 auto;
  padding: .55rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
}
.aviso p { margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.aviso__ponto {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--amarelo); flex: none;
}
.aviso__tag {
  color: var(--champagne-lt);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .64rem;
}
.aviso__texto { color: rgba(246,243,234,.85); }
.aviso__selo {
  color: var(--amarelo);
  font-weight: 700;
  border: 1px solid rgba(255,203,0,.4);
  background: rgba(255,203,0,.1);
  padding: .1rem .55rem;
  border-radius: 999px;
}
.aviso__preco { color: rgba(224,207,160,.9); }

/* ============================================================
   CABEÇALHO FIXO
   ============================================================ */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(0, 30, 29, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(185,164,110,.22);
  transition: box-shadow .3s ease;
}
.topo.is-rolado { box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.35); }
.topo__inner {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.marca { display: flex; align-items: center; gap: .7rem; }
.marca__logo { height: 2.5rem; width: auto; }
.marca__txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca__nome {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--papel);
}
.marca__sub {
  font-size: .52rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(224,207,160,.7);
}

.nav { display: none; gap: 1.6rem; }
.nav a {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(246,243,234,.8);
  transition: color .2s ease;
}
.nav a:hover { color: var(--champagne-lt); }

.topo__acoes { display: flex; align-items: center; gap: .6rem; }
.btn--wpp-topo { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 88svh;
  padding: 3.5rem 1.25rem 4rem;
  background: var(--pinho-dark);
  color: var(--papel);
  overflow: hidden;
  isolation: isolate;
}
.hero__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
}
/* Gradiente forte de propósito: a foto entra como atmosfera, não como
   documento, e o texto precisa passar contraste sobre ela em qualquer ponto. */
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28,16,8,.62) 0%, rgba(28,16,8,.3) 38%, rgba(0,20,19,.9) 100%),
    linear-gradient(90deg, rgba(0,20,19,.62) 0%, rgba(0,20,19,.12) 60%, rgba(0,20,19,.45) 100%);
}

/* Marcação de imagem ilustrativa, no canto do hero. Discreta, mas legível:
   esconder a ressalva anula o efeito de tê-la. */
.hero__ilustrativa {
  position: absolute;
  right: 1.25rem;
  bottom: .85rem;
  z-index: 2;
  margin: 0;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(246, 243, 234, .6);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: rgba(185,164,110,.15);
  border: 1px solid rgba(185,164,110,.38);
  color: var(--champagne-lt);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero__titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 8.5vw, 5rem);
  line-height: 1.03;
  letter-spacing: -.01em;
  text-shadow: 0 .25rem 1.25rem rgba(0,20,19,.6);
}
.hero__titulo em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--champagne-lt);
}

.hero__badges { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
}
/* A data é o segundo fato mais importante da página, depois do título, e
   estava no mesmo corpo de um rótulo qualquer. Vale no desktop também, não
   só no celular. */
.badge--data {
  background: rgba(0,52,50,.85);
  border: 1px solid rgba(185,164,110,.45);
  color: var(--papel);
  font-size: 1.05rem;
  font-weight: 700;
  padding: .5rem 1.2rem;
}
.badge--amarelo {
  background: var(--amarelo);
  color: #101010;
  font-weight: 800;
  box-shadow: var(--brilho);
}
.badge--selo { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

.hero__lead {
  max-width: 34rem;
  margin: 0 0 1.75rem;
  font-size: 1.02rem;
  font-weight: 300;
  color: rgba(246,243,234,.92);
}

/* ---------- Caixa de preço ---------- */
.preco {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  border-radius: var(--raio);
  background: rgba(0,20,19,.72);
  border: 1px solid rgba(185,164,110,.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.preco__bloco { display: flex; flex-direction: column; gap: .15rem; }
.preco__bloco--valor { border-left: 1px solid rgba(255,255,255,.14); padding-left: 1.25rem; }
.preco__rot {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(224,207,160,.75);
}
.preco__dur { font-size: 1rem; font-weight: 600; }
.preco__linha { display: flex; align-items: baseline; gap: .35rem; }
.preco__pref { font-size: .7rem; color: rgba(246,243,234,.65); }
.preco__num { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; color: var(--amarelo); }
.preco__uni { font-size: .7rem; color: rgba(246,243,234,.75); }

/* ---------- Contagem regressiva ---------- */
.contagem { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); }
.contagem__rot {
  display: block;
  margin-bottom: .6rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--salvia);
}
.contagem__blocos {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  border-radius: var(--raio-sm);
  background: rgba(0,20,19,.7);
  border: 1px solid rgba(255,255,255,.1);
}
.contagem__b { display: flex; flex-direction: column; align-items: center; min-width: 2.6rem; }
.contagem__b b {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--champagne-lt);
  font-variant-numeric: tabular-nums;
}
.contagem__b i {
  font-style: normal;
  font-size: .52rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(246,243,234,.55);
}
.contagem__sep { color: var(--champagne); opacity: .5; }

/* ---------- Coluna fotográfica do hero ---------- */
.hero__aside { display: none; position: relative; }
.cartao-foto {
  position: relative;
  margin: 0;
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid rgba(185,164,110,.45);
  box-shadow: var(--sombra-forte);
  transform: rotate(1.5deg);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.cartao-foto:hover { transform: rotate(0deg); }
.cartao-foto img { width: 100%; height: 23rem; object-fit: cover; }
.cartao-foto figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.25rem 1.1rem;
  background: linear-gradient(transparent, rgba(0,20,19,.92));
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.cartao-foto__eyebrow {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--champagne);
}
.cartao-foto__txt { font-family: var(--serif); font-size: 1.05rem; line-height: 1.3; }

.cartao-flutua {
  position: absolute;
  left: -1.5rem;
  bottom: -1.5rem;
  max-width: 14rem;
  padding: .9rem 1rem;
  border-radius: var(--raio-sm);
  background: rgba(0,20,19,.94);
  border: 1px solid rgba(185,164,110,.5);
  box-shadow: var(--sombra-forte);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cartao-flutua__tit {
  display: block;
  margin-bottom: .3rem;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--champagne);
}
.cartao-flutua__txt { margin: 0; font-size: .78rem; font-weight: 300; color: rgba(246,243,234,.9); }

/* ============================================================
   FAIXA DE BENEFÍCIOS
   ============================================================ */
.faixa {
  background: var(--pinho);
  color: var(--papel);
  border-bottom: 1px solid rgba(185,164,110,.25);
  padding: 1.75rem 1.25rem;
}
.faixa__lista {
  max-width: var(--largura);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}
.faixa__item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem .9rem;
  border-radius: var(--raio-sm);
  background: rgba(0,20,19,.4);
  border: 1px solid rgba(185,164,110,.18);
}
.faixa__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  background: rgba(185,164,110,.16);
  border: 1px solid rgba(185,164,110,.4);
  color: var(--champagne-lt);
}
.faixa__marca--num { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; }
.faixa__marca svg { width: 1.3rem; height: 1.3rem; }
.faixa__cx { display: flex; flex-direction: column; }
.faixa__cx b { font-size: .92rem; font-weight: 700; }
.faixa__cx i { font-style: normal; font-size: .75rem; color: rgba(224,207,160,.78); }

/* ============================================================
   BLOCOS DE SEÇÃO
   ============================================================ */
.bloco { position: relative; padding: 4.5rem 1.25rem; }
.bloco__inner { position: relative; max-width: var(--largura); margin: 0 auto; }

.bloco--claro { background: var(--papel); }
.bloco--areia { background: var(--areia); }
.bloco--pinho { background: var(--pinho); color: var(--papel); }
.bloco--foto, .bloco--final { background: var(--pinho-dark); color: var(--papel); overflow: hidden; }

.bloco__foto { position: absolute; inset: 0; z-index: 0; background-position: center; background-size: cover; }
.bloco__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,20,19,.9) 0%, rgba(0,20,19,.6) 45%, rgba(0,20,19,.95) 100%);
}
.bloco__foto--final::after { background: rgba(0,20,19,.93); }
.bloco--foto .bloco__inner, .bloco--final .bloco__inner { z-index: 1; }
.bloco__cta { margin-top: 2.5rem; text-align: center; }

/* ---------- Cabeçalho de seção ---------- */
.cab { max-width: 42rem; margin: 0 auto 3rem; text-align: center; }
.cab--esq { margin-left: 0; text-align: left; }
.cab__eyebrow {
  margin: 0 0 .5rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--champagne);
}
.bloco--claro .cab__eyebrow, .bloco--areia .cab__eyebrow { color: var(--pinho); }
.cab__titulo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 5.5vw, 3.4rem);
  line-height: 1.1;
}
.cab__titulo em { font-style: italic; font-weight: 400; color: var(--champagne); }
.bloco--foto .cab__titulo em, .bloco--pinho .cab__titulo em, .bloco--final .cab__titulo em {
  color: var(--champagne-lt);
}
.cab__titulo--esq { text-align: left; }
.cab__fio { display: block; width: 3.5rem; height: 2px; background: var(--champagne); margin: 1rem auto; }
.cab__fio--esq { margin-left: 0; }
.cab__texto { margin: 0; font-weight: 300; color: inherit; opacity: .8; }

/* ============================================================
   PILARES DA PROGRAMAÇÃO
   ============================================================ */
.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.25rem;
}
.pilar {
  position: relative;
  padding: 2.25rem 1.5rem 1.75rem;
  border-radius: var(--raio);
  background: #fff;
  border: 1px solid rgba(185,164,110,.3);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.pilar:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.pilar__tag {
  position: absolute;
  top: -.65rem;
  right: 1.25rem;
  padding: .22rem .7rem;
  border-radius: 999px;
  background: var(--pinho-dark);
  color: var(--champagne-lt);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pilar__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: var(--raio-sm);
  background: rgba(181,201,154,.22);
  color: var(--pinho);
}
.pilar__icone svg { width: 1.35rem; height: 1.35rem; }
.pilar__titulo {
  margin: 0 0 .9rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--pinho-dark);
}
.pilar__itens { display: flex; flex-direction: column; gap: .55rem; }
.pilar__itens li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .86rem;
  color: rgba(0,30,29,.82);
}
.pilar__itens li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55rem;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: var(--champagne);
}

/* Nota de rodapé do pilar: o que é consumo à parte, separado do que a
   diária cobre. Discreta de propósito, mas legível, porque esconder custo
   é o que gera reclamação na saída. */
.pilar__nota {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(185,164,110,.25);
  font-size: .76rem;
  font-style: italic;
  color: rgba(0,30,29,.6);
}

/* ---------- CTA do meio ---------- */
.cta-meio {
  margin-top: 3rem;
  padding: 2rem 1.75rem;
  border-radius: var(--raio);
  background: linear-gradient(120deg, var(--pinho-dark), var(--pinho) 60%, var(--pinho-dark));
  border: 1px solid rgba(185,164,110,.35);
  color: var(--papel);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: var(--sombra);
}
.cta-meio__eyebrow {
  margin: 0 0 .3rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amarelo);
}
.cta-meio__titulo { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }
.cta-meio__texto { margin: .35rem 0 0; font-size: .85rem; font-weight: 300; color: rgba(224,207,160,.85); }

/* ============================================================
   O QUE JÁ ESTÁ NA DIÁRIA
   Ícone e duas palavras por item. É um bloco de leitura rápida,
   não de leitura. Serve para a pessoa varrer com o olho e parar
   de perguntar no WhatsApp o que já está pago.
   ============================================================ */
.inclui {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1rem;
}
.inclui__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: 1.5rem .85rem 1.25rem;
  text-align: center;
  border-radius: var(--raio);
  background: #fff;
  border: 1px solid rgba(185,164,110,.3);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.inclui__item:hover { transform: translateY(-3px); border-color: var(--champagne); }
.inclui__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: .6rem;
  border-radius: 50%;
  background: rgba(181,201,154,.22);
  color: var(--pinho);
}
.inclui__icone svg { width: 1.35rem; height: 1.35rem; }
.inclui__tit { font-size: .92rem; font-weight: 700; color: var(--pinho-dark); }
.inclui__txt { font-style: normal; font-size: .74rem; color: rgba(0,30,29,.6); }

@media (max-width: 599px) {
  .inclui { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .inclui__item { padding: 1.15rem .6rem 1rem; }
}

/* ============================================================
   RECURSOS DO COMPLEXO AQUÁTICO
   ============================================================ */
/* Cinco recursos desde que o bar molhado ganhou cartão próprio. A coluna
   mínima encolheu para os cinco caberem numa linha só no desktop, em vez
   de quatro mais um sobrando. */
.recursos { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 1rem; }
.recurso {
  padding: 1.5rem 1.25rem;
  border-radius: var(--raio);
  background: rgba(0,20,19,.7);
  border: 1px solid rgba(185,164,110,.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s ease, transform .3s ease;
}
.recurso:hover { border-color: var(--champagne); transform: translateY(-4px); }
.recurso__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: .9rem;
  border-radius: var(--raio-sm);
  background: rgba(185,164,110,.16);
  color: var(--champagne-lt);
}
.recurso__icone svg { width: 1.25rem; height: 1.25rem; }
.recurso__titulo { margin: 0 0 .4rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.recurso__texto { margin: 0; font-size: .8rem; font-weight: 300; color: rgba(246,243,234,.8); }

/* ============================================================
   MOSAICO DE EXPERIÊNCIAS
   Larguras diferentes de propósito: seis cartões idênticos leriam
   como lista de comodidades, que é o que o tom de voz proíbe.
   ============================================================ */
.mosaico { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.exp {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid rgba(185,164,110,.35);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.exp:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.exp--claro { background: #fff; color: var(--pinho-dark); }
.exp--escuro { background: var(--pinho-dark); color: var(--papel); }

.exp__foto { overflow: hidden; }
.exp__foto img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.exp:hover .exp__foto img { transform: scale(1.05); }
.exp--grande .exp__foto img { height: 16rem; }

.exp__cx { display: flex; flex-direction: column; gap: .4rem; padding: 1.5rem 1.4rem; flex: 1; }
.exp__eyebrow {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--champagne);
}
.exp__titulo { margin: 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.exp--grande .exp__titulo { font-size: 1.9rem; }
.exp__texto { margin: 0; font-size: .86rem; font-weight: 300; opacity: .85; }
.exp__rodape {
  margin-top: auto;
  padding-top: .9rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--champagne);
}

/* ============================================================
   ACOMODAÇÕES
   ============================================================ */
.acomoda { display: grid; gap: 2.5rem; align-items: center; }
.acomoda__foto { position: relative; margin: 0; border-radius: var(--raio); overflow: hidden;
  border: 1px solid rgba(185,164,110,.4); box-shadow: var(--sombra-forte); }
.acomoda__foto img { width: 100%; height: 22rem; object-fit: cover; }
.acomoda__foto figcaption {
  position: absolute;
  inset: auto .9rem .9rem;
  padding: .8rem 1rem;
  border-radius: var(--raio-sm);
  background: rgba(0,20,19,.88);
  border: 1px solid rgba(185,164,110,.3);
  font-size: .78rem;
  color: rgba(246,243,234,.9);
}
.acomoda__lead { margin: 1rem 0 1.75rem; font-weight: 300; opacity: .88; }
.acomoda__itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .9rem; margin-bottom: 2rem; }
.acomoda__itens li {
  padding: .9rem 1rem;
  border-radius: var(--raio-sm);
  background: rgba(0,20,19,.45);
  border: 1px solid rgba(185,164,110,.2);
}
.acomoda__itens b { display: block; font-size: .85rem; color: var(--champagne-lt); }
.acomoda__itens i { font-style: normal; font-size: .75rem; color: rgba(246,243,234,.72); }

/* ============================================================
   CATÁLOGO DE CATEGORIAS
   Escada de preço. O cartão é sóbrio de propósito: quem chega
   aqui já decidiu vir, e o que ele quer é comparar valor sem
   ruído visual.
   ============================================================ */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; }
.cat {
  display: flex;
  flex-direction: column;
  border-radius: var(--raio);
  background: #fff;
  border: 1px solid rgba(185,164,110,.32);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease,
              border-color .3s ease;
}
/* A foto sangra até a borda do cartão; o texto mantém o respiro na caixa. */
.cat__foto { overflow: hidden; }
.cat__foto img {
  width: 100%;
  height: 11rem;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.cat:hover .cat__foto img { transform: scale(1.05); }
.cat__cx {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.4rem;
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--champagne); }
.cat__nome {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--pinho-dark);
}
.cat__cap { margin: .4rem 0 0; font-size: .82rem; font-weight: 600; color: var(--pinho); }
.cat__recursos { display: flex; flex-direction: column; gap: .35rem; margin: 1rem 0 1.25rem; }
.cat__recursos li {
  position: relative;
  padding-left: 1rem;
  font-size: .8rem;
  color: rgba(0,30,29,.72);
}
.cat__recursos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5rem;
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: var(--champagne);
}
.cat__preco {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(185,164,110,.28);
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.cat__preco span {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(0,30,29,.5);
}
.cat__preco b {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--pinho-dark);
}
.cat__preco i { font-style: normal; font-size: .72rem; color: rgba(0,30,29,.55); }
.cat__btn {
  margin-top: 1.25rem;
  width: 100%;
  background: var(--pinho-dark);
  color: var(--papel);
  border: 1px solid var(--pinho-dark);
}
.cat__btn:hover { background: var(--pinho); border-color: var(--pinho); transform: translateY(-2px); }
/* As outras categorias, sem tarifa na página. Fica num tom mais baixo que os
   cartões, porque é convite para conversar, não item de comparação. */
.cats__outras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--raio);
  background: rgba(0,52,50,.06);
  border: 1px dashed rgba(185,164,110,.5);
  text-align: center;
}
.cats__outras p { margin: 0; font-size: .88rem; color: rgba(0,30,29,.78); }
.cats__outras .btn { background: var(--pinho-dark); color: var(--papel); border-color: var(--pinho-dark); }
.cats__outras .btn:hover { background: var(--pinho); border-color: var(--pinho); transform: translateY(-2px); }

.cats__nota {
  max-width: 44rem;
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: .78rem;
  color: rgba(0,30,29,.6);
}

/* ============================================================
   NOTAS DE AVALIAÇÃO
   ============================================================ */
.notas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; }
.nota {
  padding: 2rem 1.5rem;
  text-align: center;
  border-radius: var(--raio);
  background: #fff;
  border: 1px solid rgba(185,164,110,.3);
}
.nota__valor { display: block; font-family: var(--serif); font-size: 3.2rem; font-weight: 600;
  line-height: 1; color: var(--pinho-dark); font-variant-numeric: tabular-nums; }
/* A barra mostra a nota na escala real. Cinco estrelas cheias ao lado de um
   4,6 seriam prova inflada, e prova inflada é o começo de reclamação. */
.nota__escala {
  display: block;
  width: 7rem;
  height: .3rem;
  margin: .9rem auto .8rem;
  border-radius: 999px;
  background: rgba(0,30,29,.12);
  overflow: hidden;
}
.nota__escala i { display: block; height: 100%; background: var(--amarelo); }
.nota__fonte { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pinho); }
.nota__det { display: block; margin-top: .3rem; font-size: .76rem; color: rgba(0,30,29,.6); }

/* ============================================================
   LOCALIZAÇÃO
   ============================================================ */
.local { display: grid; gap: 2rem; }
.endereco {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  border-radius: var(--raio-sm);
  background: rgba(0,20,19,.45);
  border: 1px solid rgba(185,164,110,.28);
  max-width: 32rem;
}
.endereco__rot {
  display: block;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--champagne);
}
.endereco__txt { margin: .3rem 0 0; font-size: .92rem; font-weight: 600; }

/* ============================================================
   FECHAMENTO
   ============================================================ */
.final { max-width: 46rem; margin: 0 auto; text-align: center; }
.final__titulo {
  margin: 1.25rem 0 1.75rem;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 5.5vw, 3.2rem);
  line-height: 1.12;
}
.final__titulo em { display: block; font-style: italic; font-weight: 400; color: var(--champagne-lt); }

.resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--raio);
  background: rgba(0,20,19,.85);
  border: 1px solid rgba(185,164,110,.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.resumo__item { display: flex; flex-direction: column; gap: .25rem; }
.resumo__item span {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(224,207,160,.7);
}
/* Os valores do resumo são o que a pessoa procura quando rola até o fim
   para decidir. Estavam menores que o texto corrido ao lado. */
.resumo__item b { font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.resumo__item--destaque span { color: var(--amarelo); }
.resumo__item--destaque b { color: var(--amarelo); }

.final__nota {
  margin: 1.5rem auto 2rem;
  max-width: 36rem;
  font-size: .8rem;
  font-weight: 300;
  color: rgba(246,243,234,.72);
}

.garantias {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 1.75rem;
}
.garantias li {
  position: relative;
  padding-left: 1.3rem;
  font-size: .76rem;
  color: rgba(224,207,160,.85);
}
.garantias li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  width: .5rem;
  height: .28rem;
  border-left: 2px solid var(--salvia);
  border-bottom: 2px solid var(--salvia);
  transform: rotate(-45deg);
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape { background: var(--pinho-deep); color: rgba(246,243,234,.7); padding: 3rem 1.25rem; font-size: .76rem; }
.rodape__inner {
  max-width: var(--largura);
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
  text-align: center;
}
.rodape__nome {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--papel);
}
.rodape__end { margin: .4rem 0 0; font-size: .7rem; opacity: .65; }
.rodape__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; color: var(--champagne-lt); }
.rodape__nav a:hover { text-decoration: underline; }
.rodape__legal { margin: 0; font-size: .66rem; opacity: .55; }
.rodape__legal a { color: var(--champagne); }

/* ============================================================
   CONVERSÃO FIXA
   ============================================================ */
.barra-fixa {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .9rem calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(0,20,19,.96);
  border-top: 1px solid rgba(185,164,110,.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.barra-fixa.is-visible { transform: none; }
.barra-fixa__info { display: flex; flex-direction: column; line-height: 1.25; }
.barra-fixa__info b { font-size: .6rem; font-weight: 800; text-transform: uppercase; color: var(--amarelo); }
.barra-fixa__info i { font-style: normal; font-size: .74rem; font-weight: 600; color: var(--papel); }
.barra-fixa .btn { padding: .7rem 1.1rem; font-size: .68rem; }

.flutua {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  display: none;
  align-items: center;
  gap: .7rem;
  padding: .6rem 1.1rem .6rem .6rem;
  border-radius: 999px;
  background: rgba(0,20,19,.96);
  border: 1px solid var(--champagne);
  box-shadow: var(--sombra-forte);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .35s ease, transform .35s ease;
}
.flutua.is-visible { opacity: 1; transform: none; }
.flutua__icone {
  width: 2rem; height: 2rem; flex: none;
  border-radius: 50%;
  background: var(--amarelo);
}
.flutua__txt { display: flex; flex-direction: column; line-height: 1.2; }
.flutua__txt b { font-size: .58rem; font-weight: 800; text-transform: uppercase; color: var(--amarelo); }
.flutua__txt i { font-style: normal; font-size: .76rem; font-weight: 600; color: var(--papel); }

/* ============================================================
   REVELAÇÃO NA ROLAGEM
   ============================================================ */
.reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (min-width: 600px) {
  .rodape__inner { grid-template-columns: 1fr auto; text-align: left; align-items: center; }
  .rodape__legal { grid-column: 1 / -1; }
}

@media (min-width: 860px) {
  .bloco { padding: 6rem 2rem; }
  .hero { padding: 4.5rem 2rem 5rem; }
  .hero__inner { grid-template-columns: 1.55fr 1fr; align-items: center; gap: 3.5rem; }
  .hero__aside { display: block; }
  .acomoda { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .acomoda__foto img { height: 30rem; }
  .btn--wpp-topo { display: inline-flex; }
  .barra-fixa { display: none; }
  .flutua { display: flex; }

  /* Mosaico assimétrico */
  .exp--grande  { grid-column: span 7; }
  .exp--media   { grid-column: span 5; }
  .exp--pequena { grid-column: span 4; }
}

@media (min-width: 1040px) {
  .nav { display: flex; }
}

@media (max-width: 859px) {
  /* A barra de aviso sai inteira no celular. Ela repetia, acima da dobra, a
     mesma data e o mesmo preço que o hero já entrega logo abaixo, e a
     repetição só tumultuava a primeira tela. No desktop sobra espaço e ela
     continua valendo. */
  .aviso { display: none; }

  /* A data é o segundo fato mais importante do hero, depois do título.
     No celular ela ganha linha própria, para poder crescer sem disputar
     espaço com o selo amarelo e sem quebrar no meio. */
  .hero__badges { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .badge--data {
    font-size: 1.3rem;
    padding: .5rem 1.2rem;
    font-weight: 700;
    letter-spacing: .01em;
  }
  .badge--data svg { width: 1.1rem; height: 1.1rem; }
  .badge--amarelo { font-size: .78rem; }
  body { padding-bottom: 4.5rem; }
  .cta-meio { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-meio .btn { width: 100%; }
  .preco { width: 100%; }
  .preco__bloco--valor { border-left: 0; padding-left: 0; }
}

/* ============================================================
   ACESSIBILIDADE, respeita quem pediu menos movimento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .cartao-foto { transform: none; }
}

/* ==== marca do site novo: inicio (gerado por scripts/alinhar-landings.py) ==== */
:root{
  --serif:"Newsreader",Georgia,serif;
  --sans:"Inter","Segoe UI",system-ui,sans-serif;
  --script:"Newsreader",Georgia,serif;
}
html,body{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
*{font-variant-numeric:lining-nums}
h1,h2,h3{font-weight:300;font-style:normal}
em,i,cite,blockquote,[class*="titulo"] em{font-style:normal}
.btn,[class*="btn--"]{border-radius:2px}
/* A Inter e mais larga que a Raleway: menu e nome do hotel nao podem quebrar. */
.nav a,.marca__nome,.marca__txt,.topo__acoes a{white-space:nowrap}
.nav a{letter-spacing:.08em}
/* Selo flutuante do WhatsApp: era so um circulo dourado, sem o desenho, e
   sumia no fundo (gestor, 2026-10-14). Agora verde com o icone branco. */
.flutua__icone{background:#25d366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.1l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.2-.2-.4-.3Z'/%3E%3C/svg%3E") center/58% no-repeat}
/* ==== marca do site novo: fim ==== */