/* ==========================================================================
   FB VIAGENS — Base
   Reset, tipografia de documento, primitivas de layout e acessibilidade.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* O menu mobile e o painel de orçamento travam a rolagem do documento. */
body.is-locked {
  overflow: hidden;
}

img,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

::selection {
  background: var(--gold);
  color: var(--ink);
}

/* Foco visível e consistente — nunca removido, só desenhado com a marca. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Movimento reduzido ----------
   Regra do projeto: qualquer coisa que se mova sozinha precisa de um
   equivalente parado. As cenas de scroll/JS leem esta preferência também. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* O atraso também é movimento. Zerar só a duração deixaria o herói
       esperando 0,74s para aparecer e o escalonamento somando 80ms por
       item — o conteúdo chega, mas chega tarde, que é o oposto do que
       esta preferência pede. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Grade de 12 colunas: as seções alinham conteúdo a ela em vez de
   inventar divisões com flex a cada bloco. */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
}

/* Toda seção fica acima do globo. Sem exceção — é esta regra que faz o
   planeta sumir atrás do conteúdo opaco e aparecer atrás do translúcido. */
.section {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--s-9);
}

.section--tight {
  padding-block: clamp(64px, 8vw, 104px);
}

/* ==========================================================================
   Scroll em camadas
   As seções de fundo sólido são folhas empilhadas: cada uma sobe por cima da
   anterior, com o canto de cima arredondado e uma sombra no encontro. Cada
   folha puxa a si mesma para cima com uma margem de topo negativa igual à
   altura da capa, e recebe um z-index maior que o da anterior — assim o corpo
   dela cobre de fato o pé da folha de baixo, e não apenas desenha uma faixa
   acima. A rolagem faz o resto: a folha de cima sobe por cima enquanto a de
   baixo continua no fluxo. Nada aqui depende de JavaScript nem de posição de
   rolagem, então não há custo por quadro.

   O quanto elas se cobrem é `--capa-altura` (a capa) somado à margem negativa
   de mesma medida — no máximo ~80px, bem dentro do `padding-block` das seções
   (`--s-9`, 88–152px). O encontro cai sempre no respiro do pé, nunca sobre
   conteúdo.

   As duas seções do globo (`.secao-orbita`) ficam de fora de propósito: o
   fundo delas é um gradiente translúcido, e um canto sólido brigaria com a
   abertura por onde o planeta aparece. Elas são os vãos da pilha, não folhas.

   A `::before` é usada só por quem não tem fundo próprio a defender — as
   seções do globo já gastam a delas no gradiente.
   ========================================================================== */

.sobre,
.destinos,
.processo,
.depoimentos,
.rodape {
  position: relative;
  margin-top: calc(var(--capa-altura) * -1);
}

/* A ordem do empilhamento sobe com a ordem de leitura, para que a folha de
   cima vença sempre, em qualquer navegador e sem depender da ordem do DOM. */
.sobre { z-index: 2; }
.destinos { z-index: 3; }
.processo { z-index: 4; }
.depoimentos { z-index: 5; }
.rodape { z-index: 6; }

.sobre::before,
.destinos::before,
.processo::before,
.depoimentos::before,
.rodape::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--capa-altura);
  background: var(--capa);
  border-radius: var(--capa-raio) var(--capa-raio) 0 0;
  /* A sombra cai sobre a folha de baixo, que é o que faz a de cima parecer
     apoiada nela em vez de apenas encostada. Sobre fundo escuro ela precisa
     ser mais funda que o preto da tinta para o degrau aparecer. */
  box-shadow: 0 -20px 40px -24px rgba(0, 0, 0, 0.62);
  /* O filete de luz na aresta superior é o que lê o canto como borda de folha
     levantada; sem ele duas tintas escuras quase iguais se encontram sem
     degrau visível. Quase invisível de tão discreto — é intenção. */
  border-top: 1px solid rgba(247, 243, 234, 0.07);
  pointer-events: none;
}

/* A capa tem a cor do próprio topo da seção: uma capa de outra tinta viraria
   remendo. Todas as folhas são da mesma tinta — o que separa uma da outra é o
   filete de luz na aresta e a sombra, não a troca de cor. */
.sobre,
.destinos,
.processo,
.depoimentos,
.rodape {
  --capa: var(--ink);
}

/* ---------- Revelação em etapas ----------
   Um grupo `data-onda` entrega os blocos de texto um depois do outro, na
   ordem em que aparecem na tela: primeiro o rótulo, depois o título, depois
   a abertura. É o "aparece em etapas" sem laço de rolagem — cada bloco é
   revelado uma única vez, quando entra na tela (ver interface-revelacoes.js). */
html.js [data-onda] [data-reveal] {
  transition-delay: calc(var(--i, 0) * 90ms);
}

.pular-para-conteudo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 500;
  background: var(--petrol);
  color: var(--ivory);
  border-bottom: 1px solid var(--gold);
  padding: 12px 22px;
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-out);
}

.pular-para-conteudo:focus {
  transform: translate(-50%, 0);
}

/* Bloco visualmente escondido, disponível para leitores de tela. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Tipografia de documento
   ========================================================================== */

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
}

.h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: 1.3;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.62;
  color: var(--ivory-78);
  max-width: 48ch;
  text-wrap: pretty;
}

.prosa p + p {
  margin-top: 1em;
}

.prosa p {
  max-width: 62ch;
  color: var(--ivory-78);
}

.destaque {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  color: var(--ivory);
}

/* Marca o acento dourado dentro de um título — usado com moderação,
   uma vez por página no máximo. */
.acento {
  color: var(--gold);
  font-style: normal;
}

/* Sobre fundo escuro */
.on-dark {
  color: var(--ivory);
}
.on-dark .lede,
.lede.on-dark {
  color: var(--ivory-78);
}
.on-dark .prosa p {
  color: var(--ivory-78);
}

/* ---------- Eyebrow: rótulo pequeno em caixa alta com filete dourado ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-lit);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold);
  flex: none;
}

/* ---------- Cabeçalho padrão de seção ----------
   Uma única composição para todas as seções: rótulo, título e uma
   abertura de apoio. Mantém o ritmo idêntico de ponta a ponta. */
.secao-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(24px, 5vw, 80px);
  margin-bottom: clamp(44px, 6vw, 84px);
}

/* Coluna da esquerda: rótulo em cima, título embaixo. O invólucro existe
   porque a grade tem duas colunas — sem ele, o rótulo ocuparia a coluna do
   apoio e o título cairia para a linha de baixo. */
.secao-topo__principal {
  min-width: 0;
}

.secao-topo__titulo {
  margin-top: var(--s-5);
}

.secao-topo__apoio {
  padding-bottom: 0.35em;
}

@media (max-width: 900px) {
  .secao-topo {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--s-5);
  }
}

/* ---------- Filetes ---------- */
.filete {
  height: 1px;
  border: 0;
  background: var(--hairline-on-ink);
  width: 100%;
  margin: 0;
}

/* ---------- Numerais tabulares para números em coluna ---------- */
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}