/* Wily do Jet
   A cor vem do lugar: maré, água, água rasa e sal. As ações usam o degradê verde e azul do logo.
   O tipo vem do casco: Archivo largo e forte nos títulos, normal no texto. */

:root {
  --mare: #07363c;
  --agua: #0f6e73;
  --raso: #bfe3da;
  --sal: #f3f6f4;
  --acento: #a8ec12;
  --degrade: linear-gradient(135deg, #d4f70e 0%, #62d814 100%);
  --degrade-forte: linear-gradient(135deg, #e2fb45 0%, #78e32c 100%);
  --degrade-azul: linear-gradient(135deg, #4fd4fa 0%, #0a9bea 100%);
  --ceu: #d6dcdf;
  --texto-2: #3f5f62;
  --linha: rgba(7, 54, 60, .18);
  --linha-clara: rgba(243, 246, 244, .24);
  --foco: var(--agua);
  --g: clamp(20px, 4vw, 64px);
  --curva: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}
html:not(.anima) { scroll-behavior: smooth; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--sal);
  color: var(--mare);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video, picture, canvas { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
a { color: inherit; }
button { font: inherit; color: inherit; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

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

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 40;
  padding: .5rem 1rem;
  background: var(--mare);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-200%);
}
.pular:focus { opacity: 1; pointer-events: auto; transform: none; }

.faixa {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--g);
}

/* Tipografia */

.t2 {
  font-size: clamp(2.25rem, 5vw, 5rem);
  font-stretch: 114%;
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -.028em;
}

.t3 {
  font-size: clamp(1.625rem, 2.5vw, 2.375rem);
  font-stretch: 110%;
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.015em;
}

.t4 {
  font-size: 1.1875rem;
  font-stretch: 106%;
  font-weight: 600;
  line-height: 1.3;
}

/* Ações */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 48px;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  background: var(--degrade);
  color: var(--mare);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s;
}
.btn:hover { background: var(--degrade-forte); }
.btn--azul { background: var(--degrade-azul); }
.btn--azul:hover { background: var(--degrade-azul); filter: brightness(1.08); }
.btn--nav { min-height: 42px; padding: .45rem 1.15rem; font-size: .9375rem; }
.btn--inteiro { width: 100%; }

.ico { width: 1.25em; height: 1.25em; flex: none; }

.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  transition: text-underline-offset .2s;
}
.link:hover { text-underline-offset: .2em; }
.link--claro { color: #fff; }

/* Navegação: a logomarca começa grande sobre o céu e diminui ao rolar */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  height: 72px;
  padding-inline: var(--g);
  transition: background-color .25s, box-shadow .25s;
}
.nav.is-solto { background: var(--sal); box-shadow: 0 1px 0 var(--linha); }
/* Sobre a foto da capa, o texto do menu fica branco */
.nav:not(.is-solto):not(.is-menu) { --foco: #fff; color: #fff; }

.nav__marca {
  position: relative;
  z-index: 1;
  display: block;
  flex: none;
  width: 104px;
  height: 72px;
}
.nav__marca img {
  position: absolute;
  top: 8px;
  left: 0;
  width: 100px;
  height: auto;
  transform-origin: 0 0;
  transition: transform .3s var(--curva);
}
.nav.is-solto .nav__marca img { transform: scale(.6); }

/* Opções centralizadas, cada uma com seu ícone */
.nav__links { display: flex; align-items: center; justify-content: center; gap: clamp(2px, .5vw, 8px); }
.nav__links > a {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 44px;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.nav__links > a:hover { background: var(--mare); color: #fff; }
.nav__contatos { display: none; }
/* Logo acima do menu de celular, as seis opções só cabem centralizadas no espaço livre e com menos respiro */
@media (min-width: 1081px) and (max-width: 1240px) {
  .nav { grid-template-columns: auto minmax(0, 1fr) auto; }
  .nav__links > a { padding-inline: .5rem; }
}

.nav__acoes { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.nav__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--degrade);
  color: var(--mare);
  transition: filter .2s, transform .2s;
}
.nav__icone--azul { background: var(--degrade-azul); }
.nav__icone:hover { filter: brightness(1.08); transform: translateY(-1px); }

.nav__botao { display: none; }

html.menu-aberto { overflow: hidden; }

/* Hero: o casal é o assunto. Título no alto, informações embaixo, e as sombras só onde há texto. */

.hero {
  position: relative;
  height: max(100svh, 620px);
  overflow: hidden;
  background: var(--mare);
}

.hero__cena { position: absolute; inset: 0; }
.hero__cena picture { position: absolute; inset: 0; }

.hero__capa {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 44%;
  background: linear-gradient(to bottom, rgba(7, 54, 60, .6), rgba(7, 54, 60, .3) 52%, rgba(7, 54, 60, 0));
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 60% 0 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(7, 54, 60, .9), rgba(7, 54, 60, .58) 50%, rgba(7, 54, 60, 0));
  pointer-events: none;
}

.hero__titulos {
  position: absolute;
  top: clamp(108px, 14.5vh, 136px);
  left: var(--g);
  right: var(--g);
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 20px rgba(7, 54, 60, .6);
}

.hero__titulo {
  font-size: clamp(2.75rem, 5.2vw, 7rem);
  font-stretch: 120%;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.hero__sub {
  margin-top: .3em;
  font-size: clamp(1.25rem, 2.15vw, 2.75rem);
  font-stretch: 116%;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-shadow: 0 1px 14px rgba(7, 54, 60, .85), 0 0 3px rgba(7, 54, 60, .5);
}

.hero__base {
  position: absolute;
  left: var(--g);
  bottom: clamp(24px, 5vh, 56px);
  z-index: 2;
  width: min(36rem, 100% - 2 * var(--g));
  color: #fff;
  --foco: #fff;
}

.hero__lead {
  font-size: clamp(1.25rem, 1.85vw, 1.75rem);
  font-stretch: 108%;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.hero__texto { margin-top: .75rem; font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.5; }

.hero__fatos { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: .9rem; font-size: .9375rem; }
.hero__fatos b { font-weight: 650; }
.hero__fatos li + li { padding-left: 1.25rem; border-left: 1px solid rgba(255, 255, 255, .45); }

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  margin-top: 1.25rem;
}

/* Explorar: mouse com a seta subindo devagar, como quem puxa a página */

.explorar {
  --foco: #fff;
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3.4vh, 36px);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: .4rem;
  color: #fff;
  text-decoration: none;
  transform: translateX(-50%);
}
.explorar__seta { width: 22px; height: 22px; animation: puxa 2.8s ease-in-out infinite; }
.explorar__mouse {
  position: relative;
  display: block;
  width: 26px;
  height: 42px;
  border: 2px solid currentColor;
  border-radius: 14px;
}
.explorar__mouse i {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: currentColor;
  animation: rodinha 2.8s ease-in-out infinite;
}
.explorar__texto { font-size: .875rem; font-weight: 600; line-height: 1.2; }

@keyframes puxa {
  0% { opacity: 0; transform: translateY(12px); }
  35% { opacity: 1; }
  80% { opacity: 1; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes rodinha {
  0% { opacity: 0; transform: translateY(12px); }
  30% { opacity: 1; }
  85%, 100% { opacity: 0; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__titulos { animation: surge 1.2s var(--curva) .2s backwards; }
  .hero__base { animation: surge 1.2s var(--curva) .5s backwards; }
}
@keyframes surge { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }


/* Play ao rolar. Sem efeito, é a capa seguida dos três textos. */

.play { position: relative; padding-block: clamp(56px, 8vw, 96px); background: var(--mare); color: var(--sal); }
.play__janela { position: relative; width: min(100%, 520px); margin-inline: auto; overflow: hidden; }
.play__capa { width: 100%; }
.play__tela, .play__letreiro, .play__dica { display: none; }
.play__passos { display: grid; gap: 2rem; max-width: 40rem; margin-inline: auto; padding: 2rem var(--g) 0; }
.play__passo p { margin-top: .5rem; color: var(--raso); }

/* O Explorar chega com a seção já na tela inteira, sem a folga que os outros links têm para o menu */
.anima .play { height: 280vh; padding: 0; scroll-margin-top: -88px; }
.anima .play__palco { position: sticky; top: 0; height: 100svh; overflow: hidden; }

.anima .play__janela {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: auto;
  height: 100%;
  aspect-ratio: 640 / 1138;
  margin: 0;
  transform: translateX(-50%);
}
.anima .play__capa { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.anima .play__tela { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

.anima .play__letreiro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2vh;
  overflow: hidden;
  color: rgba(243, 246, 244, .07);
  font-size: 40vh;
  font-stretch: 120%;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.anima .play__linha { display: block; }

.anima .play__passos {
  position: absolute;
  inset: 0;
  align-items: center;
  max-width: none;
  padding: 0 var(--g);
  pointer-events: none;
}
.anima .play__passo { grid-area: 1 / 1; justify-self: start; width: min(calc(50vw - 28.2svh - var(--g) - 24px), 400px); opacity: 0; visibility: hidden; }
.anima .play__passo:nth-child(2) { justify-self: end; }
.anima .play__passo:first-child { opacity: 1; visibility: visible; }
.anima .play__passo .t3 { font-size: clamp(2rem, 3.3vw, 3.5rem); line-height: 1.05; }
.anima .play__passo p { font-size: 1.1875rem; }

.anima .play__dica {
  position: absolute;
  right: var(--g);
  bottom: 24px;
  display: block;
  color: var(--raso);
  font-size: .9375rem;
}

/* Dois jeitos: uma foto abaixo da outra por padrão */

.jeitos { padding-block: clamp(88px, 12vw, 176px) 0; }
.jeitos__titulo { margin-bottom: clamp(40px, 6vw, 88px); }

.jeitos__corpo { display: flex; flex-direction: column; }
.jeitos__fotos, .jeitos__textos { display: contents; }

.jeito__foto { position: relative; overflow: hidden; }
.jeito__foto img { width: 100%; }
.jeito__foto--1 { order: 1; }
.jeito__texto--1 { order: 2; }
.jeito__foto--2 { order: 3; }
.jeito__texto--2 { order: 4; }

.jeito__texto { padding-block: 1.25rem 56px; }
.jeito__texto p { max-width: 30rem; margin-top: .5rem; color: var(--texto-2); }
.jeito__texto .link { margin-top: .5rem; }

/* No computador: a foto fica fixa à esquerda e é substituída enquanto os textos passam */
@media (min-width: 901px) {
  .anima .jeitos__corpo {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 96px);
    align-items: start;
  }
  .anima .jeitos__fotos {
    position: sticky;
    top: 96px;
    display: block;
    height: calc(100svh - 128px);
    overflow: hidden;
  }
  .anima .jeitos__textos { display: block; }
  .anima .jeito__foto { position: absolute; inset: 0; }
  .anima .jeito__foto--2 { clip-path: inset(100% 0% 0% 0%); }
  .anima .jeito__foto img { height: 100%; object-fit: cover; }
  .anima .jeito__foto--1 img { object-position: 54% 50%; }
  .anima .jeito__foto--2 img { object-position: 100% 50%; }
  .anima .jeito__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 92vh;
    padding-block: 0;
    opacity: .28;
    transition: opacity .4s;
  }
  .anima .jeito__texto.is-ativo, .anima .jeito__texto:focus-within { opacity: 1; }
  .anima .jeito__texto .t3 { font-size: clamp(2.25rem, 3.6vw, 3.75rem); line-height: 1.05; }
  .anima .jeito__texto p { font-size: 1.1875rem; }
}

/* Galeria horizontal: sem efeito, é uma faixa para deslizar com o dedo */

.fotos { padding-block: clamp(40px, 6vw, 88px) clamp(72px, 9vw, 120px); }
.fotos__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; }
.fotos__dica { color: var(--texto-2); font-size: .9375rem; }
.fotos__dica-rola { display: none; }

.fotos__carrossel { position: relative; margin-top: clamp(28px, 4vw, 48px); }

/* Setas sobre a foto, na altura do meio da imagem */
.fotos__seta {
  position: absolute;
  top: calc(min(82vw, 560px) * .375);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(243, 246, 244, .94);
  color: var(--mare);
  box-shadow: 0 4px 18px rgba(7, 54, 60, .28);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .2s, color .2s;
}
.fotos__seta:hover { background: var(--mare); color: #fff; }
.fotos__seta--voltar { left: 10px; }
.fotos__seta--voltar .ico { transform: rotate(180deg); }
.fotos__seta--seguir { right: 10px; }

.fotos__trilho {
  display: flex;
  gap: clamp(12px, 1.6vw, 24px);
  padding: 0 var(--g);
  overflow-x: auto;
  scroll-padding-inline: var(--g);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.fotos__trilho::-webkit-scrollbar { display: none; }

.quadro { flex: 0 0 min(82vw, 560px); scroll-snap-align: start; }
.quadro__janela { overflow: hidden; aspect-ratio: 4 / 3; background: var(--raso); }
.quadro__janela img { width: 100%; height: 100%; object-fit: cover; }
.quadro figcaption { margin-top: .6rem; color: var(--texto-2); font-size: .9375rem; line-height: 1.35; }

@media (min-width: 901px) {
  .anima .fotos { padding: 0; }
  .anima .fotos__palco {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100svh;
    padding-top: 72px;
    overflow: hidden;
  }
  .anima .fotos__dica-rola { display: inline; }
  .anima .fotos__dica-toque, .anima .fotos__seta { display: none; }
  .anima .fotos__carrossel { margin-top: clamp(20px, 3.5vh, 40px); }
  .anima .fotos__trilho {
    width: max-content;
    height: clamp(300px, 58vh, 620px);
    gap: clamp(20px, 2.4vw, 40px);
    overflow: visible;
  }
  .anima .quadro { flex: none; height: 100%; }
  .anima .quadro figure { display: flex; flex-direction: column; height: 100%; }
  .anima .quadro__janela { flex: 1; min-height: 0; aspect-ratio: auto; width: calc(58vh * 1.34); max-width: 830px; }
  .anima .quadro__janela img { width: 114%; max-width: none; margin-left: -7%; }
  /* Com duas fotos, elas dividem a largura da página e não há rolagem de lado */
  .anima .fotos--duas .fotos__trilho { width: 100%; max-width: 1680px; }
  .anima .fotos--duas .quadro { flex: 1 1 0; min-width: 0; }
  .anima .fotos--duas .quadro__janela { width: auto; max-width: none; }
}

/* Frota: texto e foto menor à esquerda, foto maior à direita. As fotos nunca se sobrepõem. */

.frota { padding-block: clamp(24px, 4vw, 64px) clamp(88px, 12vw, 176px); }

.frota__grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: clamp(16px, 2vw, 32px);
}

.frota__texto { grid-column: 1 / 6; padding-bottom: clamp(16px, 3vw, 48px); }
.frota__texto p { max-width: 30rem; margin-top: 1rem; color: var(--texto-2); }

.frota__foto { position: relative; overflow: hidden; }
.frota__foto img { width: 100%; height: 100%; object-fit: cover; }
.frota__foto--a { grid-column: 6 / -1; grid-row: 1 / 3; min-height: 100%; }
.frota__foto--b { grid-column: 1 / 6; grid-row: 2; aspect-ratio: 4 / 3; }

/* A foto se move dentro da própria moldura */
.anima .frota__foto img { height: 118%; }

/* Valores: a régua do dia */

.tempo {
  --foco: var(--acento);
  padding-block: clamp(88px, 12vw, 176px);
  background: var(--mare);
  color: var(--sal);
}

.regua { --t: .0714; margin-top: clamp(40px, 6vw, 88px); }

.regua__linha { position: relative; height: 2px; background: var(--linha-clara); }

.regua__rastro {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .18), #fff);
  transform: scaleX(var(--t));
  transform-origin: 0 50%;
  transition: transform .8s var(--curva);
}

.regua__corre {
  position: absolute;
  top: 0;
  left: calc(var(--t) * 100%);
  transition: left .8s var(--curva);
}

.regua__corre i {
  position: absolute;
  top: -6px;
  left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--acento);
}

.regua__horas {
  position: relative;
  height: 1.5rem;
  margin-top: .85rem;
  color: var(--raso);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

.regua__horas span {
  position: absolute;
  left: calc(var(--i) / 7 * 100%);
  transform: translateX(-50%);
}
.regua__horas span:first-child { transform: none; }
.regua__horas span:last-child { transform: translateX(-100%); }

.regua__nota { margin-top: .75rem; color: var(--raso); font-size: .875rem; }

.tempo__grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
}

.filas { border-top: 1px solid var(--linha-clara); }

.fila { position: relative; display: block; border-bottom: 1px solid var(--linha-clara); cursor: pointer; }

.fila input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.fila__corpo {
  --n: clamp(3rem, 6.4vw, 6.25rem);
  display: grid;
  grid-template-columns: calc(var(--n) * 1.5) minmax(0, 1fr) auto;
  column-gap: clamp(12px, 1.6vw, 24px);
  align-items: baseline;
  padding-block: clamp(10px, 1.3vw, 20px);
  color: var(--raso);
  transition: color .2s;
}

.fila__n {
  color: inherit;
  font-size: var(--n);
  font-stretch: 122%;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  text-align: right;
  transition: color .2s;
}

.fila__nome { font-size: 1.125rem; line-height: 1.3; }
.fila__nome small { display: block; font-size: .875rem; }

.fila__preco {
  font-size: clamp(1.125rem, 2vw, 1.75rem);
  font-stretch: 110%;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.fila:hover .fila__corpo { color: #fff; }
.fila input:checked + .fila__corpo { color: #fff; }
.fila input:checked + .fila__corpo .fila__n { color: var(--acento); }
.fila input:focus-visible + .fila__corpo { outline: 2px solid var(--acento); outline-offset: -2px; }

.monte {
  --foco: var(--agua);
  position: sticky;
  top: 88px;
  padding: clamp(22px, 2.6vw, 40px);
  background: var(--sal);
  color: var(--mare);
}

.grupo { margin-top: 1.25rem; }
.grupo legend, .campo > span { display: block; padding: 0; margin-bottom: .5rem; font-size: .9375rem; font-weight: 600; }
.grupo legend small { color: var(--texto-2); font-size: .8125rem; font-weight: 400; }

.opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcao { position: relative; cursor: pointer; }
.opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcao span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .4rem 1rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: .9375rem;
  transition: background-color .15s, color .15s, border-color .15s;
}
.opcao:hover span { border-color: var(--mare); }
.opcao input:checked + span { background: var(--mare); border-color: var(--mare); color: #fff; }
.opcao input:focus-visible + span { outline: 2px solid var(--agua); outline-offset: 2px; }

.grupo--dupla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: end; }

.contador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: #fff;
  transition: box-shadow .3s;
}
.contador button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.contador button:hover:not(:disabled) { background: rgba(7, 54, 60, .08); }
.contador button:disabled { opacity: .3; cursor: not-allowed; }
.contador output { font-variant-numeric: tabular-nums; font-weight: 650; }
.contador.is-mudou { box-shadow: 0 0 0 3px var(--acento); }

.nota-jets { margin-top: .5rem; color: var(--texto-2); font-size: .875rem; line-height: 1.4; }

/* Calendário: no mesmo desenho do restante do formulário */

.campo--data { position: relative; }

.data__botao {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: 46px;
  padding: .4rem 1rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: #fff;
  font-size: .9375rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s;
}
.data__botao:hover, .data__botao[aria-expanded="true"] { border-color: var(--mare); }
.data__botao.tem-data { font-weight: 600; }

.cal {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 6;
  padding: 1rem;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(7, 54, 60, .28);
}
.cal[hidden] { display: none; }
.cal--cima { top: auto; bottom: calc(100% - 1.75rem + 8px); }

.cal__topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cal__topo strong { font-size: 1.0625rem; font-stretch: 108%; font-weight: 650; }
.cal__topo strong::first-letter { text-transform: uppercase; }
.cal__nav {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.cal__nav:hover:not(:disabled) { background: var(--mare); color: #fff; }
.cal__nav:disabled { opacity: .3; cursor: not-allowed; }
.cal__volta { transform: rotate(180deg); }

.cal__semana, .cal__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; }
.cal__semana { margin-top: .75rem; color: var(--texto-2); font-size: .8125rem; font-weight: 600; }

.cal__dia {
  width: 100%;
  max-width: 42px;
  aspect-ratio: 1;
  min-height: 34px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .12s, color .12s;
}
.cal__dia:hover:not(:disabled) { background: var(--raso); }
.cal__dia:disabled { color: rgba(7, 54, 60, .28); cursor: not-allowed; }
.cal__dia.is-hoje { box-shadow: inset 0 0 0 2px var(--acento); font-weight: 650; }
.cal__dia[aria-pressed="true"] { background: var(--mare); color: #fff; font-weight: 650; }

.cal__base { margin-top: .5rem; text-align: center; }
.cal__limpar {
  min-height: 40px;
  padding: 0 .75rem;
  border: 0;
  background: none;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .25em;
  cursor: pointer;
}

.total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linha);
}
.total strong {
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-stretch: 120%;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.total__nota { margin-block: .5rem 1rem; color: var(--texto-2); font-size: .8125rem; line-height: 1.45; }
.total__nota--centro { margin-block: .75rem 0; text-align: center; }

/* A diária: mesma cena, câmera parada. Sem efeito, fica a foto da igrejinha. */

.diaria { position: relative; background: var(--mare); }

.diaria__palco { position: relative; height: 100svh; min-height: 620px; overflow: hidden; color: #fff; }

.diaria__fotos { position: absolute; inset: 0; }
.diaria__capa { width: 100%; height: 100%; object-fit: cover; }
.diaria__tela { display: none; }

.anima .diaria { height: 400vh; }
.anima .diaria__palco { position: sticky; top: 0; }
.anima .diaria__tela { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

.diaria__palco::after {
  content: '';
  position: absolute;
  inset: 34% 0 0;
  background: linear-gradient(to top, rgba(7, 54, 60, .9), rgba(7, 54, 60, .5) 55%, rgba(7, 54, 60, 0));
  pointer-events: none;
}

.diaria__conteudo {
  position: absolute;
  left: var(--g);
  right: var(--g);
  bottom: clamp(36px, 7vh, 72px);
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem clamp(24px, 4vw, 64px);
  align-items: end;
  --foco: #fff;
}

.diaria__texto { max-width: 42rem; }
.diaria__texto .t2 { font-size: clamp(2.25rem, 4.2vw, 4.25rem); font-weight: 700; }

.diaria__horario { margin-top: .75rem; font-size: 1.125rem; font-weight: 500; }
.diaria__valores { margin: 1.25rem 0 1.5rem; font-size: 1.125rem; }
.diaria__valores li { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: .5rem; border-top: 1px solid rgba(255, 255, 255, .35); font-weight: 500; }
.diaria__valores b { font-stretch: 110%; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }

.diaria__relogio { text-align: right; }
.diaria__relogio span {
  display: block;
  font-size: clamp(5rem, 15vw, 15rem);
  font-stretch: 122%;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.05em;
}
.diaria__linha { display: none; height: 2px; margin-top: 1rem; background: rgba(255, 255, 255, .35); }
.diaria__linha i { display: block; height: 100%; background: var(--acento); transform: scaleX(0); transform-origin: 0 50%; }
.anima .diaria__linha { display: block; }

/* Passeios */

.passeios { padding-block: clamp(88px, 12vw, 176px) 0; }

.passeios__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.passeios__sub { margin-top: .75rem; color: var(--texto-2); }

.passeios__setas { display: flex; flex: none; gap: .5rem; }
.seta {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.seta:hover { background: var(--mare); color: #fff; }
.seta--voltar .ico { transform: rotate(180deg); }

.trilho {
  --cena: clamp(232px, 23vw, 380px);
  display: flex;
  gap: clamp(8px, 1vw, 16px);
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0 var(--g);
  overflow-x: auto;
  scroll-padding-inline: var(--g);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho li { flex: 0 0 var(--cena); scroll-snap-align: start; }
.trilho li.larga { flex-basis: min(calc(var(--cena) * 2), 86vw); }

.cena { position: relative; display: block; width: 100%; overflow: hidden; background: var(--raso); }
.cena img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
/* Foto deitada: mesma altura das outras miniaturas, com a imagem quase inteira */
.cena--larga img { height: calc(var(--cena) * 4 / 3); aspect-ratio: auto; }

.registre {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto;
  gap: 1rem clamp(24px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 72px);
}
.registre p { margin-top: .25rem; color: var(--texto-2); }
.registre__itens { color: var(--texto-2); }
.registre__itens b { color: var(--mare); font-weight: 600; }

/* Como reservar */

.etapas { padding-block: clamp(88px, 12vw, 176px); }

.etapas__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(16px, 2vw, 32px);
  margin-top: clamp(32px, 4vw, 56px);
}
.etapas__lista li { padding-top: 1.25rem; border-top: 1px solid var(--linha); }
.etapas__lista p { max-width: 26rem; margin-top: .4rem; color: var(--texto-2); }
.etapas__n {
  display: block;
  margin-bottom: 1.5rem;
  color: var(--agua);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-stretch: 122%;
  font-weight: 500;
  line-height: 1;
}

/* Destino: texto com o mapa logo abaixo, e a foto real ao lado */

.destino { padding-block: 0 clamp(72px, 10vw, 144px); }

.destino__grade {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 2rem clamp(32px, 5vw, 88px);
  align-items: start;
}

.destino__texto .t2 { font-size: clamp(2.25rem, 4vw, 4.25rem); font-weight: 700; }
.destino__texto p { max-width: 42rem; margin-top: 1rem; color: var(--texto-2); }
.destino__texto .destino__lead { color: var(--mare); font-size: clamp(1.1875rem, 1.6vw, 1.5rem); font-weight: 500; line-height: 1.35; }

.mapa {
  position: relative;
  margin-top: clamp(24px, 3vw, 40px);
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 20px;
  aspect-ratio: 16 / 10;
  background: var(--raso);
}
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

.destino__foto { position: sticky; top: 96px; overflow: hidden; }
.destino__foto img { width: 100%; height: calc(100svh - 128px); min-height: 420px; object-fit: cover; object-position: 10% 50%; }

/* Dúvidas */

.duvidas { padding-block: clamp(72px, 10vw, 144px); background: #e9efec; }

.duvidas__grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem clamp(24px, 4vw, 64px);
  align-items: start;
}
.duvidas__grade .t2 { font-size: clamp(2rem, 3.5vw, 3.875rem); font-weight: 700; }

.duvidas__lista { border-bottom: 1px solid var(--linha); }
.duvidas__lista details { border-top: 1px solid var(--linha); }
.duvidas__lista summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding-block: .75rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.duvidas__lista summary::-webkit-details-marker { display: none; }
.duvidas__lista summary::after {
  content: '+';
  flex: none;
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .25s var(--curva);
}
.duvidas__lista details[open] summary::after { transform: rotate(45deg); }
.duvidas__lista details p { max-width: 42rem; padding-bottom: 1.25rem; color: var(--texto-2); }

/* Chamada final: o pôr do sol de fundo e o título em destaque */

.final {
  --foco: #fff;
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100svh;
  overflow: hidden;
  background: var(--mare);
  color: #fff;
}
.final__foto { position: absolute; inset: 0; }
.final__foto img { width: 100%; height: 100%; object-fit: cover; }
.final::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 54, 60, .92), rgba(7, 54, 60, .45) 55%, rgba(7, 54, 60, .1));
  pointer-events: none;
}
.final__conteudo { position: relative; z-index: 1; padding-block: 140px clamp(56px, 9vh, 96px); }
.final__titulo {
  font-size: clamp(3.25rem, 10vw, 11.5rem);
  font-stretch: 118%;
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.04em;
  text-shadow: 0 2px 40px rgba(7, 54, 60, .45);
}
.final__texto { max-width: 32rem; margin-block: 1.5rem 2rem; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); font-weight: 500; }

/* Rodapé */

.rodape {
  --foco: var(--acento);
  padding-block: clamp(56px, 7vw, 96px) 1.5rem;
  background: var(--mare);
  color: var(--raso);
}

.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.5fr));
  gap: 2.5rem clamp(24px, 4vw, 64px);
}

.rodape__marca img { width: clamp(150px, 15vw, 210px); }
.rodape__marca p { max-width: 24rem; margin-top: 1rem; }

.rodape__col { display: grid; gap: .15rem; align-content: start; justify-items: start; }
.rodape__col h2 { margin-bottom: .75rem; color: #fff; font-size: 1.0625rem; font-stretch: 108%; font-weight: 650; }
.rodape__col a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 36px;
  text-decoration: none;
}
.rodape__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: .3em; }
.rodape__col p { margin-top: .5rem; line-height: 1.45; }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 1.25rem;
  padding-left: max(var(--g), 84px); /* espaço do botão de subir */
  background: linear-gradient(var(--linha-clara), var(--linha-clara)) top / calc(100% - 2 * var(--g)) 1px no-repeat;
  font-size: .875rem;
}
.rodape__base a { margin-left: 1rem; }
.rodape__base a:first-child { margin-left: 0; }
.rodape__base a:hover { color: #fff; }

/* Botão de voltar ao topo: aparece à esquerda quando o rodapé chega */

.subir {
  --foco: var(--mare);
  position: fixed;
  left: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 15;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--degrade);
  color: var(--mare);
  box-shadow: 0 6px 24px rgba(7, 54, 60, .35);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s, visibility .25s, background-color .2s;
}
.subir svg { width: 24px; height: 24px; }
.subir:hover { background: var(--degrade-forte); }
.subir.is-on { opacity: 1; visibility: visible; transform: none; }

/* Reservar sempre à mão no celular */

.flutuante {
  position: fixed;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 15;
  display: none;
  align-items: center;
  gap: .5em;
  min-height: 48px;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  background: var(--degrade);
  color: var(--mare);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(7, 54, 60, .3);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.flutuante svg { width: 1.25em; height: 1.25em; }
.flutuante.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* Páginas de política */

.legal__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--g);
  border-bottom: 1px solid var(--linha);
}
.legal__topo img { width: 72px; }

.legal {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 80px) var(--g) clamp(64px, 8vw, 112px);
}
.legal h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-stretch: 114%; font-weight: 700; line-height: 1.05; letter-spacing: -.028em; }
.legal__data { margin-top: .75rem; color: var(--texto-2); font-size: .9375rem; }
.legal h2 { margin-top: 2.5rem; font-size: 1.375rem; font-stretch: 108%; font-weight: 650; line-height: 1.25; }
.legal p, .legal ul { margin-top: .75rem; }
.legal ul { padding-left: 1.25rem; list-style: disc; }
.legal li + li { margin-top: .35rem; }
.legal a { font-weight: 500; }
.legal mark { padding: 0 .25em; background: var(--acento); color: var(--mare); }

.legal__tabela { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: 1rem; }
.legal__tabela th, .legal__tabela td { padding: .75rem .5rem .75rem 0; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.legal__tabela th { font-weight: 650; }

.rodape--legal { padding-block: 1.5rem; }
.rodape--legal .rodape__base { margin-top: 0; padding-top: 0; padding-left: var(--g); background: none; }

/* Telas em pé */

@media (max-aspect-ratio: 1/1) {
  /* Em pé, a capa é a versão vertical, inteira na largura da tela, e o mar se funde com o fundo. */
  .hero__cena {
    inset: 0 0 auto;
    height: min(100%, calc(100vw * 1672 / 941));
    -webkit-mask-image: linear-gradient(#000 86%, transparent);
    mask-image: linear-gradient(#000 86%, transparent);
  }
  .hero__capa { object-position: 50% 62%; }
  .hero::before { height: 34%; }
  .hero__texto { display: none; }
  .hero__titulo {
    font-size: clamp(2.5rem, 12vw, 6.5rem);
    line-height: 1.02;
    white-space: normal;
  }
  .hero__sub { font-size: clamp(1.0625rem, 5.2vw, 2.5rem); }
  .hero::after { inset: 68% 0 0; background: linear-gradient(to top, rgba(7, 54, 60, .94), rgba(7, 54, 60, .68) 55%, rgba(7, 54, 60, 0)); }

  .anima .play__janela { left: 0; width: 100%; aspect-ratio: auto; transform: none; }
  .anima .play__letreiro, .anima .play__dica { display: none; }
  /* No celular, o texto fica no topo, sobre o mar, para o jet ficar livre */
  .anima .play__palco::after {
    content: '';
    position: absolute;
    inset: 0 0 58%;
    background: linear-gradient(to bottom, rgba(7, 54, 60, .94), rgba(7, 54, 60, .78) 58%, rgba(7, 54, 60, 0));
    pointer-events: none;
  }
  .anima .play__passos { z-index: 1; align-items: start; padding-top: 84px; }
  .anima .play__passo, .anima .play__passo:nth-child(2) { justify-self: stretch; width: auto; }
  .anima .play__passo p { color: #fff; }

  /* A foto do dia fica na parte de cima, para a igreja não ficar atrás do relógio e do texto */
  .diaria__fotos { bottom: auto; height: 72%; }
  .diaria__capa, .anima .diaria__tela { object-position: 56% 50%; }
  .diaria__palco::after {
    inset: 38% 0 0;
    background: linear-gradient(to top, var(--mare) 44%, rgba(7, 54, 60, .55) 70%, rgba(7, 54, 60, 0));
  }
}

/* Celular baixo em pé: a cena da diária sobe, para a igreja não ficar atrás do relógio */
@media (max-aspect-ratio: 1/1) and (max-height: 780px) {
  .diaria__fotos {
    height: 56%;
    -webkit-mask-image: linear-gradient(#000 76%, transparent);
    mask-image: linear-gradient(#000 76%, transparent);
  }
}

/* Tablet em pé: título em duas linhas no céu */
@media (max-aspect-ratio: 1/1) and (min-width: 600px) {
  .hero__titulo { font-size: 9.5vw; }
  .hero__sub { font-size: 4vw; }
}

/* Telas baixas de notebook */
@media (min-aspect-ratio: 1/1) and (max-height: 760px) {
  .nav__marca img { width: 78px; top: 6px; }
  .nav__marca { width: 82px; }
  .hero__titulos { top: 92px; }
  .hero__titulo { font-size: clamp(2.5rem, 4.6vw, 4.5rem); }
  .hero__sub { font-size: clamp(1.125rem, 1.9vw, 1.75rem); }
  .hero__texto { display: none; }
  .hero__fatos { margin-top: .5rem; }
  .hero__acoes { margin-top: .75rem; }
}

/* Tela deitada: texto à esquerda, Explorar no centro e botões à direita, numa faixa sobre a água, abaixo do jet */
@media (min-aspect-ratio: 1/1) and (min-width: 901px) {
  .hero__base {
    display: grid;
    grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
    column-gap: 2rem;
    align-items: end;
    width: calc(100% - 2 * var(--g));
  }
  .hero__texto { display: none; }
  .hero__lead { grid-column: 1; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); }
  .hero__fatos { grid-column: 1; }
  .hero__acoes { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; margin-top: 0; }
}

/* Largura em que o texto do hero chega ao centro: o Explorar vai para a direita */
@media (max-width: 1180px) {
  .explorar { left: auto; right: var(--g); transform: none; }
}
@media (min-aspect-ratio: 1/1) and (min-width: 901px) and (max-width: 1180px) {
  .hero__acoes { flex-direction: column; align-items: flex-end; padding-right: 4.5rem; }
}
/* Celular deitado: pouca altura, então ficam só o título e os botões, para não cobrir o jet */
@media (min-aspect-ratio: 1/1) and (max-height: 620px) {
  .hero { height: 100svh; }
  .hero__titulos { top: 80px; }
  .hero__titulo { font-size: clamp(1.75rem, 3.8vw, 2.5rem); }
  .hero__sub { margin-top: .15em; font-size: 1rem; }
  .hero__lead, .hero__texto, .hero__fatos { display: none; }
  .hero__base { bottom: 14px; }
  .hero__acoes { margin-top: 0; }
}

/* Menu em tela cheia: opções centralizadas e grandes, com WhatsApp e Instagram */

@media (max-width: 1080px) {
  .nav { display: flex; height: 64px; gap: .75rem; }
  .nav__marca { width: 76px; height: 64px; }
  .nav__marca img { width: 72px; top: 6px; }
  .nav.is-solto .nav__marca img { transform: scale(.72); }
  .nav__acoes { margin-left: auto; }
  .nav__icone { display: none; }
  .nav__botao {
    position: relative;
    display: block;
    flex: none;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .nav__botao span {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 1.5px;
    background: currentColor;
    transition: transform .25s var(--curva);
  }
  .nav__botao span:first-child { top: 18px; }
  .nav__botao span:last-child { top: 25px; }
  .nav__botao[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav__botao[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  .nav__links {
    position: fixed;
    inset: 64px 0 0;
    display: none;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem var(--g) max(1.25rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    background: var(--sal);
    border-top: 1px solid var(--linha);
  }
  .nav__links::before, .nav__links::after { content: ''; margin-block: auto; }
  .nav__links.is-aberto { display: flex; }
  .nav.is-menu { background: var(--sal); box-shadow: none; }
  .nav__links > a {
    justify-content: center;
    gap: .55em;
    width: min(100%, 360px);
    min-height: 58px;
    flex: none;
    font-size: clamp(1.25rem, 5.6vw, 1.5rem);
    font-stretch: 108%;
    font-weight: 650;
  }
  .nav__links > a .ico { color: var(--agua); }
  .nav__links > a:hover .ico { color: inherit; }
  .nav__contatos {
    display: grid;
    flex: none;
    gap: .6rem;
    width: min(100%, 360px);
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linha);
  }
  .nav__contatos .btn { min-height: 54px; font-size: 1.0625rem; }
}

/* Celular e tablet */

@media (max-width: 900px) {
  .hero__titulos { top: 88px; }

  .frota__grade { grid-template-rows: none; }
  .frota__texto, .frota__foto--a, .frota__foto--b { grid-column: 1 / -1; grid-row: auto; }
  .frota__texto { padding-bottom: 0; }
  .frota__foto--a, .frota__foto--b { aspect-ratio: 4 / 3; min-height: 0; }

  .diaria__conteudo { grid-template-columns: minmax(0, 1fr); }
  .diaria__relogio { grid-row: 1; text-align: left; }
  .diaria__relogio span { font-size: clamp(4.5rem, 24vw, 9rem); }

  .tempo__grade { grid-template-columns: minmax(0, 1fr); }
  .monte { position: static; }

  .etapas__lista { grid-template-columns: minmax(0, 1fr); }
  .destino__grade { grid-template-columns: minmax(0, 1fr); }
  .destino__foto { position: static; order: -1; }
  .destino__foto img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .duvidas__grade { grid-template-columns: minmax(0, 1fr); }
  .registre { grid-template-columns: minmax(0, 1fr); }
  .registre .link { justify-self: start; }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__marca { grid-column: 1 / -1; }
  .flutuante { display: inline-flex; }
}

@media (max-width: 520px) {
  .hero__texto { font-size: .9375rem; line-height: 1.42; }
  .hero__lead { font-size: 1.1875rem; }
  .hero__base { bottom: 16px; }
  .hero__fatos { gap: .1rem .75rem; margin-top: .6rem; font-size: .8125rem; }
  .hero__fatos li + li { padding-left: .75rem; }
  .hero__fatos li:nth-child(2) { display: none; }
  .hero__acoes { gap: .25rem 1rem; margin-top: .75rem; }
  .hero__acoes .link { display: none; }
  .explorar { bottom: 14px; gap: .2rem; }
  .explorar__seta { width: 16px; height: 16px; }
  .explorar__mouse { width: 22px; height: 32px; }
  .explorar__texto { font-size: .8125rem; }

  .diaria__relogio span { font-size: clamp(3.75rem, 19vw, 6rem); }

  .regua__horas span:nth-child(2), .regua__horas span:nth-child(4), .regua__horas span:nth-child(6), .regua__horas span:nth-child(7) { display: none; }
  .fila__nome small { font-size: .8125rem; }
  .fila__corpo { --n: 2.75rem; }
  .cal { padding: .75rem; }
  .rodape__grade { grid-template-columns: minmax(0, 1fr); }
}

/* Celular muito estreito: o botão de reservar ocupa a largura, o Explorar sai e as setas da galeria descem */
@media (max-width: 360px) {
  .explorar { display: none; }
  .passeios__topo { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .explorar__seta, .explorar__mouse i { opacity: 1; }
}

/* Telas muito largas: as fotos da galeria cabem inteiras, sem precisar rolar */
.fotos--cabem .fotos__dica-rola { display: none; }
.fotos--cabem .fotos__trilho { margin-inline: auto; }