/** Paleta, tipografia e dimensões compartilhadas pela página. */
:root {
  --negro:#33231a;
  --sol:#d9b27c;
  --mata:#1f6b43;
  --amber:#f9a825;
  --mist:#eef2ee;
  --ink:#1d2420;
  --r:6px;
  --w:1180px
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  font:17px/1.65 Figtree,system-ui,sans-serif;
  background:var(--mist);
  color:var(--ink);
  padding-bottom:70px
}

h1,h2,h3,.disp {
  font-family:"Bricolage Grotesque",Figtree,system-ui,sans-serif;
  line-height:1.02;
  letter-spacing:-.025em
}

a {
  color:inherit
}

img {
  max-width:100%;
  display:block
}

:focus-visible {
  outline:3px solid var(--amber);
  outline-offset:3px
}

.wrap {
  max-width:var(--w);
  margin:0 auto;
  padding:0 24px
}

.sec {
  padding:clamp(60px,9vw,120px) 0
}

h2 {
  font-size:clamp(2.1rem,4.6vw,3.6rem);
  font-weight:800
}

/** Cabeçalho da marca e seletor de idioma. */
.top {
  background:var(--amber);
  color:var(--negro)
}

.top .wrap {
  display:flex;
  align-items:center;
  gap:12px;
  padding-top: clamp(10px, 1.6vw, 16px);
  padding-bottom: clamp(10px, 1.6vw, 16px)
}

.top .wrap > div {
  min-width:0
}

.top img {
  width: clamp(52px, 6vw, 68px);
  height: clamp(52px, 6vw, 68px);
  border-radius:50%
}

.top b {
  font:800 clamp(1rem, 2vw, 1.3rem) "Bricolage Grotesque",sans-serif;
  display:block;
  line-height:1.2;
  color: #fff
}

.top span {
  font-size:.8rem;
  display:none
}

@media(min-width:700px) {
  .top span {
    display:block
  }

}

.lang {
  margin-left:auto;
  font-weight:700;
  text-decoration:none;
  border:2px solid var(--negro);
  border-radius:99px;
  padding:3px 14px;
  font-size:.88rem
}

.lang:hover {
  background:var(--negro);
  color:var(--amber)
}

.btn {
  display:inline-flex;
  align-items:center;
  background:#1fa855;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  padding:15px 30px;
  border-radius:99px;
  transition:transform .2s,background .2s
}

.btn:hover {
  background:#188a45;
  transform:translateY(-2px)
}

.btn.ghost {
  background:transparent;
  box-shadow:inset 0 0 0 2px currentColor
}

.btn.ghost:hover {
  background:#fff;
  color:var(--negro)
}

/** Hero: apresentação principal, oferta e imagem de destaque. */
.hero {
  background:var(--negro);
  color:#fff;
  display:grid;
  overflow:hidden
}

.ph {
  position:relative;
  height:56vh;
  min-height:340px;
  order:-1
}

.shore {
  position:absolute;
  inset:0;
  background:var(--sol);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V90C80 100 70 80 50 92S20 100 0 88Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V90C80 100 70 80 50 92S20 100 0 88Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat
}

.shore img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:66% 50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V86C80 96 70 76 50 88S20 96 0 84Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V86C80 96 70 76 50 88S20 96 0 84Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat
}

.badge {
  position:absolute;
  right:20px;
  bottom:0;
  width:128px;
  height:128px;
  border-radius:50%;
  background:var(--amber);
  color:var(--negro);
  display:grid;
  place-content:center;
  text-align:center;
  transform:rotate(-9deg);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  animation:stamp .6s .3s both cubic-bezier(.2,1.4,.4,1)
}

.badge small {
  font-size:.72rem;
  font-weight:700;
  line-height:1.2
}

.badge s {
  font-size:.8rem;
  opacity:.7
}

.badge strong {
  font:800 1.9rem/1 "Bricolage Grotesque",sans-serif
}

@keyframes stamp {
  from {
    transform:rotate(-30deg) scale(.4);
    opacity:0
  }

}

.txt {
  padding:28px 24px 56px
}

.hero h1 {
  font-size:clamp(3.2rem,13vw,7rem);
  font-weight:800;
  margin-bottom:20px
}

.hero .lead {
  font-size:1.2rem;
  max-width:30em;
  opacity:.9;
  margin-bottom:30px
}

.btns {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:40px
}

.facts {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px 16px;
  border-top:1px solid rgba(255,255,255,.22);
  padding-top:24px
}

.facts dt {
  font:800 2rem/1 "Bricolage Grotesque",sans-serif;
  color:var(--amber)
}

.facts dd {
  font-size:.88rem;
  opacity:.8;
  margin-top:4px;
  line-height:1.3
}

@media(min-width:900px) {
  .hero {
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    min-height:calc(100vh - 60px)
  }

  .ph {
    order:1;
    height:auto;
    min-height:0
  }

  .hero h1 {
    font-size:clamp(3rem,5.3vw,5.8rem)
  }

  .shore {
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M12 0C2 18 22 32 8 50S18 82 4 100H100V0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M12 0C2 18 22 32 8 50S18 82 4 100H100V0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat
  }

  .shore img {
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M14.5 0C4.5 18 24.5 32 10.5 50S20.5 82 6.5 100H100V0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M14.5 0C4.5 18 24.5 32 10.5 50S20.5 82 6.5 100H100V0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
    object-position:66% 50%
  }

  .badge {
    right:auto;
    left:-6px;
    bottom:12%;
    width:150px;
    height:150px
  }

  .badge strong {
    font-size:2.3rem
  }

  .txt {
    padding:clamp(48px,7vw,96px) 24px clamp(48px,6vw,80px) max(24px,calc((100vw - var(--w))/2 + 24px));
    align-self:center
  }

  .facts {
    grid-template-columns:repeat(4,1fr)
  }

}

/** Galeria em mosaico dos atrativos. */
.bento {
  display:grid;
  gap:14px;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:210px;
  margin-top:40px
}

.bento figure {
  position:relative;
  overflow:hidden;
  border-radius:var(--r)
}

.bento img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s
}

.bento figure:hover img {
  transform:scale(1.05)
}

.bento figcaption {
  position:absolute;
  inset:auto 0 0;
  padding:44px 16px 14px;
  background:linear-gradient(0deg,rgba(30,18,10,.88),transparent);
  color:#fff;
  line-height:1.3
}

.bento b {
  display:block;
  font:800 1.15rem "Bricolage Grotesque",sans-serif
}

.bento span {
  font-size:.85rem;
  opacity:.85
}

.bento figure:first-child {
  grid-column:1/-1;
  grid-row:span 2
}

.bento figure:last-child {
  grid-column:1/-1
}

@media(min-width:900px) {
  .bento {
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:250px
  }

  .bento figure:first-child {
    grid-column:1/3
  }

  .bento figure:last-child {
    grid-column:3/5
  }

}

/** Texto e vídeo sobre a experiência. */
.about {
  display:grid;
  gap:36px;
  align-items:center
}

@media(min-width:900px) {
  .about {
    grid-template-columns:1fr 1.2fr;
    gap:64px
  }

}

.about p {
  font-size:1.2rem
}

.about p+p {
  margin-top:14px;
  font-size:1rem;
  opacity:.8
}

.video {
  aspect-ratio:16/9;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--negro);
  box-shadow:14px 14px 0 var(--sol)
}

.video iframe {
  width:100%;
  height:100%;
  border:0
}

/** Faixa visual com chamada para reserva. */
.band {
  display:grid;
  background:var(--sol);
  color:var(--negro)
}

.band img {
  width:100%;
  height:100%;
  min-height:240px;
  object-fit:cover
}

.band div {
  padding:clamp(40px,7vw,88px) 24px
}

.band h2 {
  margin-bottom:16px
}

.band p {
  margin-bottom:28px;
  max-width:28em
}

@media(min-width:900px) {
  .band {
    grid-template-columns:1fr 1fr
  }

  .band div {
    padding-left:72px;
    padding-right:max(24px,calc((100vw - var(--w))/2 + 24px));
    align-self:center
  }

}

/** Roteiro do passeio e seus itens numerados. */
.itin {
  background:var(--negro);
  color:#f4ece4;
  position:relative;
  padding-top:clamp(110px,14vw,170px)
}

.itin>svg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:70px;
  display:block
}

.itin .in {
  display:grid;
  gap:36px
}

@media(min-width:900px) {
  .itin .in {
    grid-template-columns:.8fr 1.2fr;
    gap:80px
  }

  .itin .side {
    position:sticky;
    top:32px;
    align-self:start
  }

}

.itin .sub {
  color:var(--sol);
  font-weight:600;
  margin:14px 0 26px
}

.itin ol {
  list-style:none;
  counter-reset:s
}

.itin li {
  counter-increment:s;
  display:grid;
  grid-template-columns:72px 1fr;
  padding:22px 0;
  border-top:1px solid rgba(255,255,255,.16)
}

.itin li::before {
  content:counter(s,decimal-leading-zero);
  font:800 2.2rem/1 "Bricolage Grotesque",sans-serif;
  color:var(--amber)
}

.itin h3 {
  font-size:1.5rem;
  margin-bottom:6px;
  letter-spacing:-.015em
}

.itin li p {
  opacity:.8;
  max-width:34em
}

/** Depoimentos dos visitantes. */
.tq {
  display:grid;
  gap:40px;
  margin-top:44px
}

@media(min-width:900px) {
  .tq {
    grid-template-columns:1.3fr 1fr;
    gap:72px
  }

}

.tq .big p {
  font:700 clamp(1.7rem,3.4vw,2.6rem)/1.15 "Bricolage Grotesque",sans-serif;
  letter-spacing:-.02em;
  color:var(--mata)
}

.tq .big p::before {
  content:"“";
  display:block;
  font-size:5rem;
  line-height:.6;
  color:var(--amber)
}

.tq cite {
  display:block;
  margin-top:16px;
  font-style:normal;
  font-weight:700;
  font-size:.92rem
}

.tq .sm blockquote {
  padding:0 0 26px;
  margin-bottom:26px;
  border-bottom:1px solid rgba(0,0,0,.15)
}

.tq .sm blockquote:last-child {
  border:0;
  margin:0
}

/** Lista de perguntas expansíveis. */
.faq {
  background:#e1e8e0
}

.faq .in {
  display:grid;
  gap:36px
}

@media(min-width:900px) {
  .faq .in {
    grid-template-columns:.8fr 1.2fr;
    gap:80px
  }

  .faq .side {
    position:sticky;
    top:32px;
    align-self:start
  }

}

.faq .side p {
  margin:14px 0 22px
}

details {
  border-bottom:1px solid rgba(0,0,0,.2)
}

summary {
  cursor:pointer;
  font:700 1.2rem "Bricolage Grotesque",sans-serif;
  padding:20px 0;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:16px
}

summary::after {
  content:"+";
  font-size:1.7rem;
  line-height:1;
  color:var(--mata);
  transition:transform .25s
}

details[open] summary::after {
  transform:rotate(45deg)
}

details p {
  padding:0 0 22px;
  max-width:36em
}

/** Seção final de conversão. */
.end {
  background:var(--mata);
  color:#fff;
  text-align:center
}

.end h2 {
  max-width:14em;
  margin:0 auto 16px
}

.end p {
  max-width:30em;
  margin:0 auto 28px;
  opacity:.9
}

.end .btn {
  background:var(--amber);
  color:var(--negro)
}

.end .btn:hover {
  background:#ffbb3d
}

footer {
  background:var(--negro);
  color:#e9ddd0;
  padding:30px 0;
  font-size:.92rem;
  text-align:center
}

footer p+p {
  margin-top:6px;
  opacity:.65
}

footer a {
  color:var(--amber)
}

/** Botão de reserva fixo em telas pequenas. */
.bar {
  position:fixed;
  inset:auto 0 0;
  z-index:20;
  background:var(--negro);
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#fff;
  box-shadow:0 -4px 16px rgba(0,0,0,.25)
}

.bar b {
  font-family:"Bricolage Grotesque",sans-serif
}

.bar .btn {
  padding:10px 20px
}

@media(min-width:900px) {
  .bar {
    display:none
  }

  body {
    padding-bottom:0
  }

}

/** Respeita a preferência do visitante por menos movimento. */
@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    scroll-behavior:auto!important;
    transition:none!important
  }

}

/* Espaço entre o ícone e o texto do botão. */
.icon-spacing {
  margin-right: 8px;
}

/* Remove o espaçamento superior da seção de apresentação. */
.section-no-top-padding {
  padding-top: 0;
}