/* ==========================================================================
   FB VIAGENS — Componentes
   Peças reutilizáveis: marca, navegação, botões, cartões, formulário,
   rodapé e acessórios de interface.
   ========================================================================== */

/* ---------- Barra de progresso de leitura ---------- */
.progresso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: var(--z-progress);
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ==========================================================================
   Marca
   ========================================================================== */

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

/* O selo do FB é mais alto que largo (162 × 195 unidades, por causa da ponta
   dourada), então a altura é o número que manda e a largura sai dela.

   34px é o piso, não uma escolha de gosto: a haste e o vão das letras medem
   12 unidades cada, e é essa razão que define até onde a marca desce. A 34px
   a haste fica com 2,1px e o vão continua aberto; abaixo de ~32px a letra
   começa a fechar e a marca precisa virar o selo sem a ponta — que é o que
   o favicon faz.

   A 34px o anel de 3,5 unidades da marca principal ficaria com 0,61px: abaixo
   de um pixel o traço não fica apenas fraco, ele se parte num arco pontilhado.
   Por isso aqui vale o corte de anel 8 — o mesmo que o cabeçalho e o rodapé
   usam. É também por isso que o viewBox é 162 × 195 e não 159,7 × 192,9: o
   anel mais grosso precisa da folga. Ver _arquivo/identidade-visual/. */
.marca__simbolo {
  width: 28.3px;
  height: 34px;
  flex: none;
}

.marca__nome {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: var(--track-word);
  text-transform: uppercase;
  white-space: nowrap;
}

/* 44px ainda está abaixo do ponto em que o anel fino sobrevive (0,80px), por
   isso o tamanho grande continua no corte de anel 8. */
.marca--grande .marca__simbolo {
  width: 36.6px;
  height: 44px;
}
.marca--grande .marca__nome {
  font-size: 19px;
}

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-m) var(--ease-out),
    border-color var(--dur-m) var(--ease-out);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  width: 100%;
}

/* Sem backdrop-filter de propósito. O cabeçalho fica sobre o globo nas
   seções escuras — justamente onde o planeta está desenhando — e um
   desfoque de tela inteira ali é recalculado a cada quadro, além de custar
   uma camada nova toda vez que o cabeçalho muda de estado. Com o fundo a
   90% de opacidade o vidro não aparecia: o que se via era a tinta. */
.cabecalho.is-fixo {
  background: rgba(11, 31, 39, 0.9);
  border-bottom-color: var(--hairline-on-ink);
}

.navegacao {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}

.navegacao ul {
  display: flex;
  gap: clamp(20px, 2.4vw, 36px);
}

.navegacao a,
.rodape__nav a {
  position: relative;
  padding-bottom: 5px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--ivory-78);
  transition: color var(--dur-fast) var(--ease-out);
}

.navegacao a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-m) var(--ease-out);
}

.navegacao a:hover,
.navegacao a[aria-current="true"] {
  color: var(--ivory);
}

.navegacao a:hover::after,
.navegacao a:focus-visible::after,
.navegacao a[aria-current="true"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
}

/* O CTA do cabeçalho é uma variação discreta do botão primário: contorno,
   porque no topo da página ele não pode competir com a chamada do herói.
   No hover ele preenche de marfim — o mesmo estado do primário em repouso,
   de modo que os dois botões são o mesmo objeto em dois momentos. */
.cabecalho .btn--primario {
  --filete-inset: 24px;
  background: transparent;
  border-color: var(--gold-45);
  color: var(--ivory);
  padding: 13px 24px;
}

.cabecalho .btn--primario:hover {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--ink);
}

.btn-alternar-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 30px;
  height: 30px;
  z-index: calc(var(--z-menu) + 1);
}

.btn-alternar-menu span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--ivory);
  transition: transform var(--dur-m) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.btn-alternar-menu[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.btn-alternar-menu[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.btn-alternar-menu[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Menu mobile ---------- */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 24px) var(--gutter) var(--s-8);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-m) var(--ease-out),
    visibility 0s linear var(--dur-m);
}

.menu-mobile.is-aberto {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--dur-m) var(--ease-out), visibility 0s;
}

.menu-mobile ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.menu-mobile a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 8vw, 2.6rem);
  line-height: 1.2;
  color: var(--ivory);
}

.menu-mobile a:hover {
  color: var(--gold-lit);
}

.menu-mobile__meta {
  margin-top: auto;
  padding-top: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  color: var(--stone);
  font-size: var(--t-small);
}

@media (max-width: 980px) {
  .navegacao {
    display: none;
  }
  .btn-alternar-menu {
    display: flex;
  }
}

@media (max-width: 560px) {
  .cabecalho .btn--primario {
    display: none;
  }
}

/* Navegação só faz sentido dentro do menu em telas pequenas. */
@media (min-width: 981px) {
  .menu-mobile {
    display: none;
  }
}

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
  --filete-inset: 32px; /* acompanha o padding horizontal de cada variação */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 17px 32px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--dur-m) var(--ease-out),
    color var(--dur-m) var(--ease-out),
    border-color var(--dur-m) var(--ease-out);
}

/* O primário é marfim, não dourado. A regra da marca é explícita: o dourado
   é filete, ponto e acento de precisão, nunca preenchimento grande. Um botão
   dourado é uma chapa de ouro no meio do quadro — briga com o planeta e vira
   cor de alerta. Marfim sobre tinta é o par de maior contraste da paleta
   (15:1) e é o que sobra de mais elegante num fundo escuro. */
.btn--primario {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--ink);
}

/* O acento dourado entra no hover, como filete que se desenha sob o rótulo.
   Vale para todas as variações: é o mesmo gesto em toda a página, e é o
   único lugar em que o dourado aparece nos botões. */
.btn--primario::after,
.btn--solido::after,
.btn--contorno::after {
  content: "";
  position: absolute;
  left: var(--filete-inset);
  right: var(--filete-inset);
  bottom: 11px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-m) var(--ease-out);
}

.btn--primario:hover::after,
.btn--solido:hover::after,
.btn--contorno:hover::after {
  transform: scaleX(1);
}

.btn--primario:hover {
  background: var(--ivory-dim);
  border-color: var(--ivory-dim);
}

.btn--solido {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

.btn--solido:hover {
  background: var(--petrol);
  border-color: var(--petrol);
}

.btn--contorno {
  background: transparent;
  border-color: var(--gold-45);
  color: inherit;
}

.btn--contorno:hover {
  border-color: var(--gold);
  color: var(--gold-lit);
}

.btn__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  transition: transform var(--dur-m) var(--ease-out);
}

.btn__seta svg {
  width: 100%;
  height: 100%;
}

.btn:hover .btn__seta {
  transform: translateX(4px);
}

/* Link de texto com filete — usado em ações secundárias. */
.link-filete {
  position: relative;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gold-45);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  transition: border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.link-filete:hover {
  border-bottom-color: var(--gold);
  color: var(--gold-lit);
}

/* Botão redondo de controle de carrossel */
.btn-rail {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--hairline-on-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.btn-rail:hover:not(:disabled) {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--ink);
}

.btn-rail:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-rail svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Cartões e blocos
   ========================================================================== */

/* Grade de valores: a "costura" é um filete de 1px, não uma borda dupla. */
.grade-valores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline-on-ink);
  border-block: 1px solid var(--hairline-on-ink);
}

.valor {
  background: var(--petrol);
  padding: clamp(26px, 2.6vw, 38px) clamp(20px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 248px;
}

.valor__indice {
  font-family: var(--font-display);
  font-size: var(--t-small);
  color: var(--gold-lit);
  letter-spacing: 0.08em;
}

.valor h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
}

.valor p {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ivory-78);
}

@media (max-width: 1080px) {
  .grade-valores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .grade-valores {
    grid-template-columns: 1fr;
  }
  .valor {
    min-height: 0;
  }
}

/* ==========================================================================
   Formulário
   ========================================================================== */

.formulario {
  width: 100%;
  max-width: 780px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-6);
  text-align: left;
}

.campo--largo {
  grid-column: 1 / -1;
}

.campo label {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--s-2);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-on-ink);
  color: var(--ivory);
  font-size: var(--t-body);
  padding: 10px 2px;
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.campo textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: rgba(247, 243, 234, 0.38);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.campo select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9C2B4' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 16px;
  padding-right: 26px;
}

.campo select option {
  color: var(--ivory);
  background: var(--petrol);
}

.campo-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}

.campo-check input {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 4px;
  accent-color: var(--gold);
}

.campo-check label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-small);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ivory-78);
}

/* Mensagem de erro presa ao campo — aparece só quando há erro. */
.campo__erro {
  display: none;
  margin-top: 6px;
  font-size: var(--t-micro);
  color: #e8a08a;
}

.campo.tem-erro .campo__erro {
  display: block;
}

.campo.tem-erro input,
.campo.tem-erro select {
  border-bottom-color: #e8a08a;
}

.formulario__acoes {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}

.formulario__nota {
  grid-column: 1 / -1;
  font-size: var(--t-micro);
  color: var(--ivory-58);
  max-width: 56ch;
}

/* Sem `.formulario__status`: o retorno do envio é um aviso flutuante, criado
   pelo próprio módulo de orçamento. Uma faixa de status fixa no formulário
   diria a mesma coisa duas vezes e empurraria o botão para baixo. */

@media (max-width: 620px) {
  .formulario {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Rodapé
   ========================================================================== */

/* O rodapé também precisa subir acima do globo: sem posição declarada, o
   fundo dele ficaria abaixo da tela fixa do planeta. O z-index não é declarado
   aqui — quem o define é a rampa das folhas em base.css, para que o rodapé
   vença a seção de cima em vez de ser coberto por ela. */
.rodape {
  position: relative;
  background: var(--ink);
  color: var(--stone);
  padding-block: clamp(60px, 7vw, 92px) var(--s-6);
}

.rodape__topo {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--hairline-on-ink);
}

.rodape__marca .marca__nome {
  color: var(--ivory);
  font-size: 18px;
}

.rodape__marca p {
  margin-top: var(--s-4);
  max-width: 34ch;
  font-size: var(--t-small);
  line-height: 1.65;
}

.rodape__titulo {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-lit);
  margin-bottom: var(--s-5);
}

.rodape__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.rodape__col li,
.rodape__col a {
  font-size: var(--t-small);
  color: var(--stone);
}

.rodape__nav a {
  color: var(--stone);
  padding-bottom: 2px;
}

.rodape__nav a:hover {
  color: var(--ivory);
}

.rodape__fim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-top: var(--s-6);
  font-size: var(--t-micro);
  color: rgba(201, 194, 180, 0.7);
}

.rodape__social {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}

/* Link do rodapé (WhatsApp). O filete dourado no hover é o mesmo gesto dos
   outros links do site — ele parece link porque é link. */
.rodape__link {
  color: var(--stone);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.rodape__link:hover,
.rodape__link:focus-visible {
  color: var(--ivory);
  border-bottom-color: var(--gold);
}

@media (max-width: 1080px) {
  .rodape__topo {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

@media (max-width: 780px) {
  .rodape__topo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--s-7);
  }
  .rodape__marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 460px) {
  .rodape__topo {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Acessórios
   ========================================================================== */

.botao-whatsapp {
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: var(--z-fab);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--gold-45);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(11, 31, 39, 0.34);
  transition: transform var(--dur-m) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-m) var(--ease-out);
}

.botao-whatsapp:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}

.botao-whatsapp svg {
  width: 24px;
  height: 24px;
  color: var(--gold);
}

/* Enquanto o painel de orçamento está aberto o atalho sai de cena. */
body.is-locked .botao-whatsapp {
  opacity: 0;
  pointer-events: none;
}

/* Cursor de leitura (apenas ponteiro fino)
   O ponto é um `::after`: o JS escreve só a posição no elemento, e o
   crescimento vira `transform: scale()` — composto pela GPU — em vez de
   largura e altura, que forçariam um layout a cada quadro da transição. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  width: 10px;
  height: 10px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-fast) linear;
  mix-blend-mode: difference;
  opacity: 0;
}

.cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gold);
  transform: scale(1);
  transition: transform var(--dur-fast) var(--ease-out);
}

.cursor.is-visivel {
  opacity: 1;
}

.cursor.is-ativo::after {
  transform: scale(5.8);
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ==========================================================================
   Revelação ao entrar na tela
   O estado inicial é escondido apenas quando o JS está de pé — a classe `js`
   é escrita no <html> por um script no <head>. Sem JavaScript, nenhuma
   destas regras se aplica e a página inteira aparece normalmente.
   ========================================================================== */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--dur-l) var(--ease-out),
    transform var(--dur-l) var(--ease-out);
}

html.js [data-reveal].is-visivel {
  opacity: 1;
  transform: none;
}

html.js [data-reveal-escala] {
  opacity: 0;
  transform: scale(0.955);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

html.js [data-reveal-escala].is-visivel {
  opacity: 1;
  transform: none;
}

/* ---------- Grupo escalonado ----------
   O contêiner é revelado como um todo; cada filho direto entra um pouco
   depois do anterior. O índice `--i` é escrito pelo JS na inicialização.
   O trilho de destinos usa isto: o cartão que está fora da tela à direita
   já entra revelado, então nunca fica um buraco na faixa. */
html.js [data-escalonar] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-l) var(--ease-out),
    transform var(--dur-l) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}

html.js [data-escalonar].is-visivel > * {
  opacity: 1;
  transform: none;
}