/* ===========================================================================
   Mach 80 Viagens e Turismo — site institucional
   ---------------------------------------------------------------------------
   Os tokens abaixo saem do MANUAL DA MARCA (PDF "Logos primitivas Mach 80"):
   amarelo #FFCC29, grafite #373435, Montserrat ExtraBold + Roag Regular.
   Ate 06/08/2026 o site herdava os tokens do CRM (#FFDA00 / #0A0A0A / DM Sans),
   que estavam errados — o CRM tambem precisa ser alinhado com o manual.

   TEMA UNICO, de proposito. Nao ha modo escuro: papel creme + amarelo E' a
   identidade da agencia, e inverter isso deixaria o site parecido com qualquer
   outro. A pagina se compromete com um mundo visual so.

   Conceito: a pagina inteira e' um DOCUMENTO DE VIAGEM. Perfuracao entre as
   secoes, rotulos de campo de bilhete, e um canhoto destacavel no fim, onde
   mora o CNPJ — a prova de que a agencia existe, no lugar de depoimento
   inventado.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     CORES OFICIAIS DO MANUAL DA MARCA (PDF "Logos primitivas Mach 80").
     Antes o site herdava os tokens do CRM (#FFDA00 / #0A0A0A). O manual
     manda outra coisa, e o Joao sentiu os dois no olho:
       "o preto marca muito"          -> o escuro oficial e' #373435, grafite,
                                          nao preto puro
       "amarelo gema, quero mais claro" -> o amarelo oficial e' #FFCC29
     --------------------------------------------------------------------- */
  --ink: #373435;        /* grafite oficial */
  --ink-2: #454142;      /* um degrau acima, pra hover */
  --paper: #faf7f0;
  --paper-2: #f2ece0;
  --paper-3: #e6dfcf;
  --yellow: #ffcc29;     /* amarelo oficial */
  /* Amarelo escurecido 54% — e' o ponto exato em que ele passa 4.5:1 sobre o
     papel creme (medido: 4.54). O #FFCC29 puro da 1.7:1 e nao serve pra texto. */
  --yellow-lo: #8a6e16;
  --yellow-halo: #ffe89c;
  --yellow-cream: #fff6d6;
  --hairline: #d6cfc0;
  --muted: #5f5c5a;      /* 6.20:1 no papel; o #6B6B6B anterior dava 4.98 */

  --medida: 65ch; /* largura de leitura confortavel */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --radio: 14px;
}

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

html { scroll-behavior: smooth; }

@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;
  }
}

body {
  margin: 0;
  background-color: var(--paper);
  /* Mesmo grao de papel do CRM (.bg-paper-grain) */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(55, 52, 53, 0.015) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 204, 41, 0.05) 0, transparent 40%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--yellow-lo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Tipografia -------------------------------------------------------- */

h1, h2, h3 {
  font-family: 'Montserrat', Inter, system-ui, sans-serif;
  font-weight: 800;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 3.3vw, 2.45rem); letter-spacing: -0.028em; }
h3 { font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.25; }

p { margin: 0; }

/* Rotulo de campo de bilhete. Repetido no site inteiro — e' o que amarra o
   conceito. Nunca decorativo: sempre nomeia o dado logo abaixo. */
.campo {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0;
}

.dado {
  font-family: 'Montserrat', Inter, sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin: 0.15rem 0 0;
}

/* Grifo amarelo sob o texto — o mesmo gesto da tela de entrada do CRM. */
.grifo { position: relative; display: inline-block; }
.grifo > span { position: relative; z-index: 1; }
.grifo::after {
  content: '';
  position: absolute;
  inset-inline: -0.08em;
  bottom: 0.05em;
  height: 0.24em;
  background: var(--yellow);
  transform: skewX(-6deg);
  z-index: 0;
}

/* --- Estrutura --------------------------------------------------------- */

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

section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* Perfuracao entre secoes: o gesto que transforma a pagina em bilhete. */
.picote {
  height: 1px;
  background-image: linear-gradient(90deg, var(--hairline) 6px, transparent 6px);
  background-size: 12px 1px;
  background-repeat: repeat-x;
  border: 0;
  margin: 0;
}

/* --- Revelacao no scroll -----------------------------------------------
   Fade curto com 12px de deslocamento — le como aparicao, nao como slide.
   Feito com IntersectionObserver + transicao CSS em vez de GSAP: numa pagina
   estatica de tres arquivos, 60KB de biblioteca por um fade nao se paga.

   So vale quando ha JS (a classe .js entra no <html> antes da pintura). Sem
   JS — e pro robo do Google — tudo nasce visivel, porque conteudo abaixo da
   dobra escondido por padrao e' risco de indexacao.
   --------------------------------------------------------------------- */

.js .revelar {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
.js .revelar.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1; transform: none; transition: none; }
}

/* --- Topo -------------------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 240, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.topo__interno {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}

.topo__logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.topo__logo img { width: 42px; mix-blend-mode: multiply; }
.topo__nome {
  font-family: 'Montserrat', Inter, sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.topo__nome span {
  display: block;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* Abaixo de 420px "VIAGENS E TURISMO" quebrava em duas linhas e engordava o
   cabecalho inteiro. O logo ja diz o que e' a marca. */
@media (max-width: 419px) {
  .topo__nome span { display: none; }
}

.topo__nav {
  display: none;
  margin-inline-start: auto;
  gap: 1.75rem;
  font-size: 0.875rem;
}
.topo__nav a { text-decoration: none; color: var(--ink); opacity: 0.75; transition: opacity 0.15s; }
.topo__nav a:hover { opacity: 1; }

@media (min-width: 900px) {
  .topo__nav { display: flex; }
}

/* --- Botoes ------------------------------------------------------------ */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 44px e' o minimo pra dedo, nao estetica: abaixo disso o toque erra o alvo
     no celular, que e' de onde vem quase todo o contato de uma agencia. */
  min-height: 44px;
  padding: 0.72rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s;
  white-space: nowrap;
}
.botao:hover { transform: translateY(-1px); }

.botao--principal {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 10px 30px -12px rgba(255, 204, 41, 0.9);
}
.botao--principal:hover { background: var(--yellow-hi, #ffd94f); }

.botao--contorno {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.botao--contorno:hover { background: var(--ink); color: var(--paper); }

.botao--claro {
  border-color: rgba(250, 247, 240, 0.35);
  color: var(--paper);
}
.botao--claro:hover { background: rgba(250, 247, 240, 0.1); }

.topo .botao { margin-inline-start: auto; }
@media (min-width: 900px) { .topo .botao { margin-inline-start: 0; } }

/* Os links do menu tambem precisam de area de toque. Ficam visiveis so a
   partir de 900px, onde ha mouse, mas o alvo maior ajuda qualquer um. */
.topo__nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- Capa -------------------------------------------------------------- */

/* A capa passou a ser FOTOGRAFICA (pedido do Joao, 06/08). O tratamento e' o
   da arte oficial da agencia: foto de tela cheia + camada escura + tipo claro.
   Manter o papel creme com foto por tras deixaria a foto lavada e o texto
   preto boiando em cima dela — sem contraste garantido em nenhum dos dois. */
.capa {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: var(--paper);
}
.capa h1 { color: var(--paper); }
.capa .capa__texto { color: rgba(250, 247, 240, 0.82); }
/* 0.90 e nao 0.70: medido sobre o trecho de ceu claro da foto, 0.70 dava
   4.09:1 — abaixo do minimo de 4.5 pra texto pequeno. */
.capa .capa__eyebrow { color: rgba(250, 247, 240, 0.9); }
.capa .capa__eyebrow::before { background: var(--yellow); }

/* O grifo amarelo fica ATRAS de texto claro agora. Amarelo solido comeria a
   leitura, entao ele vira um risco mais baixo, so sublinhando. */
.capa .grifo::after { height: 0.18em; bottom: 0.02em; }

/* Botao secundario: contorno escuro sumiria na foto. */
.capa .botao--contorno { border-color: rgba(250, 247, 240, 0.55); color: var(--paper); }
.capa .botao--contorno:hover { background: rgba(250, 247, 240, 0.12); color: var(--paper); }

/* A camada escura da capa e' mais leve que a das outras faixas: aqui a foto E'
   o assunto, nao textura de fundo. */
#capa.com-foto::after {
  background: linear-gradient(
    to bottom,
    rgba(55, 52, 53, 0.82) 0%,
    rgba(55, 52, 53, 0.62) 42%,
    rgba(55, 52, 53, 0.80) 100%
  );
}

.capa__halo {
  position: absolute;
  inset-block-start: -18%;
  inset-inline-end: -12%;
  width: min(58vw, 640px);
  aspect-ratio: 1;
  background: radial-gradient(
    closest-side,
    rgba(255, 204, 41, 0.20) 0%,
    rgba(255, 204, 41, 0.09) 46%,
    rgba(255, 204, 41, 0) 78%
  );
  pointer-events: none;
}

.capa__grade {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 940px) {
  .capa__grade { grid-template-columns: 1.15fr 0.85fr; }
}

.capa__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-block-end: 1.25rem;
}
.capa__eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--yellow-lo);
}

.capa h1 { margin-block-end: 1.4rem; }

/* Mantem "leva você" e o aviao na mesma linha, sempre. */
.capa__fecho { white-space: nowrap; }

.capa__aviao {
  display: inline-block;
  width: clamp(28px, 3.4vw, 40px);
  vertical-align: -0.12em;
  margin-inline-start: 0.35rem;
  transform: rotate(-12deg);
  color: var(--yellow-lo);
}

.capa__texto {
  max-width: 46ch;
  color: rgba(55, 52, 53, 0.72);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.capa__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

/* Cartao de embarque da capa. Aqui o conceito aparece literal: campos reais
   de um bilhete, com dados reais da agencia. */
.bilhete {
  /* Branco com alpha EXPLICITO, nao `#fff`: dentro do contexto de empilhamento
     da capa fotografica o branco solido renderizava translucido e o texto do
     bilhete sumia (cinza claro sobre foto). Aqui eu fixo a opacidade em vez de
     depender da ordem de pintura. */
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* Cor do texto FIXADA no cartao. `.dado` nunca declarou cor propria: herdava
     a do corpo (tinta). Quando a capa virou escura e passou a definir
     `color: paper`, os valores do bilhete viraram branco sobre branco e
     sumiram. Fixar aqui resolve pra tudo que estiver dentro do cartao. */
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radio);
  box-shadow: 0 1px 3px rgba(55, 52, 53, 0.06), 0 18px 40px -22px rgba(55, 52, 53, 0.22);
  overflow: hidden;
  transform: rotate(-1.1deg);
}
@media (prefers-reduced-motion: no-preference) {
  .bilhete { animation: entra-carimbo 700ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
}

@keyframes entra-carimbo {
  from { opacity: 0; transform: rotate(-5deg) scale(0.94); }
  60%  { opacity: 1; transform: rotate(0.4deg) scale(1.01); }
  to   { opacity: 1; transform: rotate(-1.1deg) scale(1); }
}

/* Foto do destino no topo do bilhete. O degrade no pe dela costura a imagem
   com o branco do cartao, em vez de cortar reto. */
.bilhete__destino {
  height: clamp(130px, 18vw, 172px);
  background-image:
    linear-gradient(to bottom, rgba(55, 52, 53, 0) 55%, rgba(55, 52, 53, 0.12) 100%),
    url('assets/destino-capa.jpg');
  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;
}

.bilhete__faixa {
  height: 7px;
  background: var(--yellow);
}

.bilhete__corpo { padding: 1.4rem 1.5rem 1.6rem; }

.bilhete__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--paper-3);
}

.bilhete__campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1rem;
  padding-block: 1.15rem;
}

.bilhete__rodape {
  border-block-start: 1px dashed var(--hairline);
  padding-block-start: 1rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* --- Faixa escura (serviços) ------------------------------------------ */

.escuro {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  isolation: isolate;
}
.escuro h2 { color: var(--paper); }
.escuro .campo { color: rgba(250, 247, 240, 0.55); }

/* --- Foto de fundo -----------------------------------------------------
   Tratamento tirado da arte oficial da agencia (a do Rio ao entardecer):
   foto escura + camada por cima + tipo claro. Foto NAO entra no papel creme —
   la ela briga com o texto; entra so nas faixas escuras, que e' onde a marca
   ja usa.

   `background-image` no CSS, e nao <img>: enquanto o arquivo nao existir, o
   navegador simplesmente nao pinta nada e a secao continua preta, intacta.
   Uma tag de imagem mostraria icone de quebrado. Mesmo padrao da tela de
   entrada do CRM.

   Pra usar: jogue o arquivo em assets/ com o nome indicado. Só isso.
   --------------------------------------------------------------------- */

.com-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* A camada que garante o texto legivel POR CIMA de qualquer foto. Sem ela, a
   legibilidade fica na sorte do que a foto tiver naquele ponto. */
.com-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(55, 52, 53, 0.93) 0%,
    rgba(55, 52, 53, 0.78) 45%,
    rgba(55, 52, 53, 0.93) 100%
  );
}

#capa.com-foto::before { background-image: url('assets/destino-capa.jpg'); background-position: center 62%; }
#servicos.com-foto::before { background-image: url('assets/fundo-servicos.jpg'); }
#contato-fundo.com-foto::before { background-image: url('assets/fundo-contato.jpg'); }


/* Grade de servicos: as celulas sao pretas SOLIDAS de proposito. Com a foto
   atras, celula transparente deixava o texto boiando sobre o mar e a leitura
   virava sorte. O 1px de folga entre elas e' o que desenha a grade. */
.servicos__grade {
  display: grid;
  gap: 1px;
  background: rgba(250, 247, 240, 0.14);
  border: 1px solid rgba(250, 247, 240, 0.14);
  border-radius: var(--radio);
  overflow: hidden;
  margin-block-start: 2.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .servicos__grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .servicos__grade { grid-template-columns: repeat(4, 1fr); } }

/* Celula "vidro fosco" sobre a foto.
   A translucidez aqui e' DECIDIDA, nao herdada: com a foto atras eu dependia
   de ordem de pintura entre pseudo-elementos negativos e conteudo em fluxo pra
   a celula ficar opaca — e o resultado real nao batia com a teoria. Definindo
   a cor com alpha explicito eu controlo o contraste em vez de torcer por ele.
   O blur garante que detalhe de foto nao encoste na leitura do texto. */
.servico {
  background: rgba(55, 52, 53, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 1.5rem 1.35rem;
  transition: background-color 0.18s ease;
}
.servico:hover { background: rgba(26, 26, 26, 0.9); }

/* Sem suporte a backdrop-filter (Firefox antigo), a foto encostaria no texto.
   Ali a celula vira quase solida — perde o efeito, mantem a legibilidade. */
@supports not (backdrop-filter: blur(6px)) {
  .servico { background: rgba(55, 52, 53, 0.94); }
}
.servico h3 { color: var(--paper); }
.servico p {
  margin-block-start: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(250, 247, 240, 0.62);
}
.servico__num {
  font-family: 'Montserrat', Inter, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--yellow);
  display: block;
  margin-block-end: 0.7rem;
  font-variant-numeric: tabular-nums;
}

/* --- Destinos: o leque -------------------------------------------------
   O estado ESCRITO AQUI e' a grade parada. O leque so existe quando o JS
   acrescenta `.destinos--animado`, e ele so faz isso se houver JS e se o
   sistema nao pedir menos movimento. Ou seja: sem JS, com JS quebrado, ou com
   "reduzir movimento" ligado, a pessoa ve as 29 fotos numa grade comum — que
   e' conteudo de verdade, nao um espaco vazio.
   ----------------------------------------------------------------------- */

/* Na grade parada o palco faz as vezes de `.envelope` — sem isto as fotos
   encostam na borda da tela, porque a secao nao tem o wrapper das outras (o
   modo leque precisa da largura toda). */
.destinos__palco {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.destinos__dizeres h2 { margin-block-start: 0.75rem; max-width: 16ch; }
.destinos__linha {
  margin-block-start: 0.9rem;
  max-width: 46ch;
  color: rgba(55, 52, 53, 0.72);
}
.destinos__dica { display: none; }

/* Grade parada (o padrao) */
.destinos__leque {
  margin-block-start: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}
.destinos .destino { margin: 0; }
.destinos .destino img {
  width: 100%;
  height: 100%;
  aspect-ratio: 400 / 540;
  object-fit: cover;
  border-radius: 10px;
}

/* --- Modo leque (com JS) ----------------------------------------------- */

/* O trilho e' alto de proposito: a altura dele E' a duracao da animacao.
   O palco gruda no topo e fica parado enquanto o trilho passa por tras. */
.destinos--animado { padding-block: 0; }
.destinos--animado .destinos__trilho { height: 300vh; }
.destinos--animado .destinos__palco {
  max-width: none;
  padding-inline: 0;
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* Contem o desenho: 29 cartoes mudando de transform a cada quadro nao
     devem forcar o navegador a recalcular o resto da pagina. */
  contain: layout paint;
}

.destinos--animado .destinos__dizeres {
  position: absolute;
  z-index: 2;
  text-align: center;
  padding-inline: var(--gutter);
  max-width: 30rem;
  pointer-events: none;
  /* O JS sobe este bloco conforme o circulo vira arco. */
  will-change: transform;
}
.destinos--animado .destinos__dizeres h2 { max-width: none; }
.destinos--animado .destinos__linha { margin-inline: auto; max-width: 34ch; }

.destinos--animado .destinos__leque {
  position: absolute;
  inset: 0;
  margin: 0;
  display: block;
}

.destinos--animado .destino {
  --l: 128px;
  --a: 174px;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--l);
  height: var(--a);
  margin-block-start: calc(var(--a) / -2);
  margin-inline-start: calc(var(--l) / -2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 30px -14px rgba(55, 52, 53, 0.55);
  /* O JS escreve translate/rotate/scale aqui a cada quadro. */
  backface-visibility: hidden;
}
@media (max-width: 759px) {
  .destinos--animado .destino { --l: 92px; --a: 124px; }
}

/* `will-change` so enquanto a secao esta por perto (quem liga e desliga a
   classe e' o mesmo IntersectionObserver que roda o laco). Cravado no CSS ele
   promoveria 29 camadas de GPU o tempo todo, inclusive com a secao a tres
   telas de distancia — conta que pesa em celular fraco. */
.destinos--perto .destino { will-change: transform, opacity; }

.destinos--animado .destino img {
  border-radius: 0;
  /* Veu leve: sem ele as 29 fotos saturadas brigam com o amarelo da marca e
     com o texto por cima. Sai no hover, que e' quando a foto vira o assunto. */
  filter: saturate(0.92) brightness(0.94);
  transition: filter 0.3s ease;
}
@media (hover: hover) {
  .destinos--animado .destino:hover img { filter: none; }
}

/* Dica de rolagem: some assim que a pessoa entende (o JS controla o alfa).
   Mora DENTRO do bloco de texto — solta no rodape do palco, ela caia bem em
   cima do aro de fotos, que ocupa a altura toda no inicio. */
.destinos--animado .destinos__dica {
  display: block;
  margin: 1.75rem 0 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  pointer-events: none;
}

/* --- Motivos ----------------------------------------------------------- */

.motivos__grade {
  display: grid;
  gap: 1.75rem;
  margin-block-start: 2.75rem;
}
@media (min-width: 820px) { .motivos__grade { grid-template-columns: repeat(3, 1fr); } }

.motivo {
  padding-block-start: 1.25rem;
  border-block-start: 2px solid var(--ink);
}
.motivo:nth-child(2) { border-block-start-color: var(--yellow); }
.motivo p {
  margin-block-start: 0.55rem;
  color: rgba(55, 52, 53, 0.7);
  font-size: 0.9375rem;
}

/* --- Como funciona (sequencia real, por isso numerada) ----------------- */

.passos {
  display: grid;
  gap: 1.5rem;
  margin-block-start: 2.75rem;
  counter-reset: passo;
}
@media (min-width: 820px) { .passos { grid-template-columns: repeat(3, 1fr); } }

.passo {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radio);
  padding: 1.75rem 1.5rem 1.5rem;
}
.passo::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  inset-block-start: -16px;
  inset-inline-start: 1.5rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-family: 'Montserrat', Inter, sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
}
.passo p {
  margin-block-start: 0.5rem;
  font-size: 0.9375rem;
  color: rgba(55, 52, 53, 0.7);
}

/* --- Pagamento: boleto pre-pago ----------------------------------------
   Faixa em papel-2, e nao no creme do Grupo VIP: as duas passariam a parecer
   a mesma coisa separadas so pela secao "Quem somos". O contraste real da
   secao esta no canhoto escuro a direita — que e' onde moram as condicoes.
   ----------------------------------------------------------------------- */

.pagamento {
  background: var(--paper-2);
  border-block: 1px solid var(--hairline);
}

.pagamento__grade {
  display: grid;
  gap: 2rem;
  align-items: start;
  margin-block-start: 2.25rem;
}
@media (min-width: 900px) {
  .pagamento__grade { grid-template-columns: 1.3fr 1fr; gap: 3rem; }
}

.pagamento__texto > p:first-child {
  max-width: 46ch;
  color: rgba(55, 52, 53, 0.72);
}

.pagamento__nome {
  margin-block-start: 1.9rem;
  font-family: 'Montserrat', Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.pagamento__lista {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 560px) { .pagamento__lista { grid-template-columns: 1fr 1fr; } }

.pagamento__lista li {
  position: relative;
  padding-inline-start: 2rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* A marca de conferido da arte oficial, redesenhada em CSS: dois pseudos em
   vez de um <svg> por item. O disco amarelo e o risco em grafite — o mesmo
   par de cores do resto da pagina, sem imagem nova pra carregar. */
.pagamento__lista li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.05em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--yellow);
}
.pagamento__lista li::after {
  content: '';
  position: absolute;
  inset-inline-start: 0.46rem;
  inset-block-start: 0.36rem;
  width: 0.32rem;
  height: 0.6rem;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* O canhoto de carne. Escuro pelo mesmo motivo do canhoto de contato: e' o
   pedaco que a pessoa precisa ler inteiro antes de decidir. */
.carne {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radio);
  padding: 2.1rem 1.5rem 1.6rem;
}

/* Picote no topo, em negativo — o mesmo gesto que separa as secoes da pagina.
   E' o que faz o bloco parecer destacado de um carne, e nao um card qualquer. */
.carne::before {
  content: '';
  position: absolute;
  inset-block-start: 0.95rem;
  inset-inline: 1.1rem;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(250, 247, 240, 0.35) 6px, transparent 6px);
  background-size: 12px 1px;
  background-repeat: repeat-x;
}

.carne .campo { color: rgba(250, 247, 240, 0.55); }
.carne .dado { color: var(--paper); font-size: 0.9375rem; line-height: 1.3; }

.carne__item { margin-block-start: 1.25rem; }

.carne__nota {
  margin-block-start: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(250, 247, 240, 0.62);
}

.carne .botao {
  display: flex;
  width: 100%;
  margin-block-start: 1.75rem;
}

/* --- Grupo VIP --------------------------------------------------------- */

.vip {
  background: var(--yellow-cream);
  border-block: 1px solid var(--hairline);
}
.vip__interno {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
@media (min-width: 820px) {
  .vip__interno { grid-template-columns: 1fr auto; }
}
.vip p {
  margin-block-start: 0.6rem;
  max-width: 52ch;
  color: rgba(55, 52, 53, 0.72);
}

/* --- Canhoto de contato ------------------------------------------------
   O risco estetico da pagina: um canhoto destacavel de verdade, com os
   recortes semicirculares nas laterais. E' aqui que o CNPJ aparece — prova
   concreta no lugar de depoimento inventado.
   --------------------------------------------------------------------- */

.canhoto {
  position: relative;
  /* Alpha explicito pelo mesmo motivo da celula de servico: com foto atras eu
     controlo o contraste em vez de depender da ordem de pintura. */
  background: rgba(55, 52, 53, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--paper);
  border-radius: var(--radio);
  overflow: hidden;
}

.canhoto__grade {
  display: grid;
  gap: 0;
}
@media (min-width: 860px) {
  .canhoto__grade { grid-template-columns: 1.35fr 1fr; }
}

.canhoto__principal { padding: clamp(2rem, 4vw, 3rem); }
.canhoto__principal h2 { color: var(--paper); }
.canhoto__principal > p {
  margin-block-start: 0.9rem;
  max-width: 44ch;
  color: rgba(250, 247, 240, 0.7);
}

.canhoto__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 1.75rem;
}

/* A linha de destaque + os recortes. No mobile o corte e' horizontal. */
.canhoto__talao {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem);
  border-block-start: 2px dashed rgba(250, 247, 240, 0.28);
}
@media (min-width: 860px) {
  .canhoto__talao {
    border-block-start: 0;
    border-inline-start: 2px dashed rgba(250, 247, 240, 0.28);
  }
}

/* Recortes: circulos da cor do FUNDO da pagina, sobrepostos a borda. */
.canhoto__talao::before,
.canhoto__talao::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--paper);
}
.canhoto__talao::before { inset-block-start: -13px; inset-inline-start: -13px; }
.canhoto__talao::after { inset-block-end: -13px; inset-inline-start: -13px; }
@media (max-width: 859px) {
  .canhoto__talao::before { inset-inline-start: -13px; inset-block-start: -13px; }
  .canhoto__talao::after {
    inset-inline-start: auto;
    inset-inline-end: -13px;
    inset-block-start: -13px;
    inset-block-end: auto;
  }
}

.canhoto__linhas { display: grid; gap: 1.15rem; }
.canhoto__linhas .dado { color: var(--paper); font-size: 0.9375rem; }
.canhoto__linhas a { color: var(--yellow); text-decoration: none; }
.canhoto__linhas a:hover { text-decoration: underline; }

/* Carimbo: girado, com a borda dupla de carimbo de passaporte. */
.carimbo {
  display: inline-block;
  margin-block-start: 2rem;
  padding: 0.55rem 0.9rem;
  border: 2px solid var(--yellow);
  border-radius: 6px;
  color: var(--yellow);
  font-family: 'Montserrat', Inter, sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  opacity: 0.92;
  font-variant-numeric: tabular-nums;
}
.carimbo span { display: block; font-size: 0.625rem; letter-spacing: 0.1em; opacity: 0.75; }

/* --- Rodape ------------------------------------------------------------ */

.rodape { padding-block: 2.5rem 3rem; font-size: 0.8125rem; color: var(--muted); }
.rodape__interno {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.rodape a { color: var(--muted); text-decoration: none; }
.rodape a:hover { color: var(--ink); text-decoration: underline; }

/* --- Botao flutuante de WhatsApp --------------------------------------- */

.zap {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.15rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 14px 34px -12px rgba(55, 52, 53, 0.55);
  transition: transform 0.15s ease;
}
.zap:hover { transform: translateY(-2px); }
.zap svg { width: 20px; height: 20px; }
@media (max-width: 620px) {
  .zap__texto { display: none; }
  .zap { padding: 0.9rem; }
}

/* --- Identidade institucional -------------------------------------------
   Texto oficial do dono. Duas colunas pra missao/visao (paragrafos longos) e
   os nove valores numa lista propria, larga — em coluna estreita eles viravam
   uma torre de linhas quebradas.
   --------------------------------------------------------------------- */

.essencia {
  margin: 2rem 0 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--yellow);
}
.essencia p {
  font-family: 'Montserrat', Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.essencia cite {
  display: block;
  margin-block-start: 0.6rem;
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.mvv__grade {
  display: grid;
  gap: 1.75rem 2.5rem;
  margin-block-start: 2.5rem;
}
@media (min-width: 820px) { .mvv__grade { grid-template-columns: 1fr 1fr; } }

.mvv { padding-block-start: 1.1rem; border-block-start: 2px solid var(--paper-3); }
.mvv:nth-child(2) { border-block-start-color: var(--yellow); }
.mvv > p:last-child {
  margin-block-start: 0.6rem;
  color: rgba(55, 52, 53, 0.78);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.valores { margin-block-start: 2.5rem; padding-block-start: 1.1rem; border-block-start: 2px solid var(--paper-3); }
.valores__lista {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem 2rem;
  font-size: 0.9375rem;
  color: rgba(55, 52, 53, 0.78);
}
@media (min-width: 640px) { .valores__lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .valores__lista { grid-template-columns: repeat(3, 1fr); } }

.valores__lista li { padding-inline-start: 1rem; position: relative; }
.valores__lista li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--yellow-lo);
}

/* --- Selo Cadastur (capa) -----------------------------------------------
   Um carimbo redondo, do mesmo vocabulario do `.carimbo` da secao de contato:
   tudo em amarelo sobre o escuro da capa, texto correndo em volta do aro.

   Tamanho em `clamp`, e nao em breakpoint: o selo encolhe junto com a tela em
   vez de pular de tamanho, e a linha ao lado dele so quebra quando precisa.
   ----------------------------------------------------------------------- */

.capa__selo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-start: 2.25rem;
  flex-wrap: wrap;
}

.selo {
  flex: none;
  display: block;
  width: clamp(88px, 21vw, 124px);
  color: var(--yellow);
  /* Inclinado como carimbo batido na mao; endireita no hover. */
  transform: rotate(-6deg);
  transition: transform 0.25s ease;
}
.selo:hover { transform: rotate(0deg) scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .selo, .selo:hover { transition: none; transform: rotate(-6deg); }
}

.selo svg { width: 100%; height: auto; display: block; overflow: visible; }

.selo__aro {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  opacity: 0.9;
}
.selo__aro--fino { stroke-width: 0.7; opacity: 0.6; }

.selo__volta {
  font-family: Inter, sans-serif;
  font-size: 8.4px;
  font-weight: 600;
  letter-spacing: 1.3px;
  fill: currentColor;
}

.selo__aviao { fill: currentColor; opacity: 0.9; }

.selo__marca {
  font-family: 'Montserrat', Inter, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-anchor: middle;
  fill: currentColor;
}
.selo__nota {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(250, 247, 240, 0.72);
  max-width: 30ch;
}
.selo__nota strong { color: var(--paper); font-weight: 600; }

/* --- Faixa de credenciamento -------------------------------------------
   Fica entre o grupo VIP e o contato: e' o ultimo argumento antes de a pessoa
   decidir chamar no WhatsApp. */

.credenciamento {
  background: var(--paper-2);
  border-block: 1px solid var(--hairline);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.credenciamento__interno {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .credenciamento__interno { grid-template-columns: 1fr auto; gap: 3rem; }
}

/* O certificado. Azul do governo dentro de uma pagina creme: em vez de fingir
   que combina, eu o trato como o que ele e' — um documento anexado. Moldura
   branca, sombra curta, e a borda arredondada do resto do site pra ele nao
   parecer colado por cima. */
.certificado {
  display: block;
  text-decoration: none;
  max-width: 420px;
  width: 100%;
  justify-self: start;
}
.certificado img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #fff;
  padding: 6px;
  border: 1px solid var(--hairline);
  box-shadow: 0 12px 28px -16px rgba(55, 52, 53, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.certificado:hover img {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -16px rgba(55, 52, 53, 0.55);
}
.certificado .campo {
  display: block;
  margin-block-start: 0.6rem;
  color: var(--yellow-lo);
}
@media (prefers-reduced-motion: reduce) {
  .certificado img, .certificado:hover img { transition: none; transform: none; }
}
.credenciamento__frase {
  margin-block-start: 0.5rem;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: rgba(55, 52, 53, 0.85);
}
.credenciamento__frase strong { color: var(--ink); }

/* Os dados passaram a dividir a coluna com a frase (o certificado ocupa a
   outra), entao ganharam respiro em cima — antes eram uma coluna propria e nao
   precisavam. O `minmax` subiu de 140 pra 172px porque a 140 o numero do
   cadastro quebrava no meio, e numero de registro partido em duas linhas nao
   se le nem se copia. */
.credenciamento__dados {
  display: grid;
  /* O `min(100%, 200px)` e' o que impede a quebra no celular: sem ele, a
     coluna minima de 200px forcaria duas colunas numa tela de 430px e o numero
     do cadastro partia no meio. Com ele, a tela estreita cai pra uma coluna de
     largura cheia e o numero cabe inteiro. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1.25rem 2rem;
  margin: 1.75rem 0 0;
}
.credenciamento__dados dd { margin: 0.15rem 0 0; }

/* --- QR codes no canhoto ----------------------------------------------- */

.qrs { display: flex; gap: 1rem; }
.qr {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-decoration: none;
}
.qr img {
  width: 104px;
  height: 104px;
  border-radius: 8px;
  background: #fff;
  /* A margem branca nao e' estetica: QR sem "quiet zone" em volta falha em
     leitor de celular. 9px no arquivo recortado da a folga que o padrao pede. */
  padding: 9px;
}
.qr .campo { color: rgba(250, 247, 240, 0.65); }
.qr:hover .campo { color: var(--yellow); }

/* --- Equipe -------------------------------------------------------------
   Retrato alto (4:5) porque as fotos vieram todas em retrato do celular —
   forcar quadrado cortaria cabeca ou ombro de alguem. */

.equipe__grade {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .equipe__grade { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .equipe__grade { grid-template-columns: repeat(5, 1fr); } }

.pessoa img,
.pessoa__semfoto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%; /* rosto costuma ficar no terco de cima */
  border-radius: 12px;
  display: block;
  background: var(--paper-2);
}

/* Sem foto: iniciais no amarelo da marca, no lugar de um vazio cinza. */
.pessoa__semfoto {
  display: grid;
  place-items: center;
  background: var(--yellow-halo);
  color: var(--ink);
  font-family: 'Montserrat', Inter, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.pessoa__nome {
  margin-block-start: 0.65rem;
  font-family: 'Montserrat', Inter, sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.pessoa__papel {
  margin-block-start: 0.1rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* --- Rota: o picote com um aviao passando -------------------------------
   Pedido do Joao (07/08): "fazer um mini aviao se mexendo, nao deixar o site
   tao parado".

   O aviao voa sobre a MESMA perfuracao que ja separa as secoes — ou seja, o
   movimento reforca o conceito de bilhete/rota em vez de ser enfeite solto.
   A linha se pinta atras dele, como rota de mapa de bordo.

   So anda quando entra na tela (classe .voando, posta pelo IntersectionObserver)
   e so uma vez. Aviao dando voltas eternas vira distracao no meio da leitura.
   --------------------------------------------------------------------- */

.rota {
  position: relative;
  height: 34px;
  overflow: hidden;
}

/* A linha pontilhada: mesma trama do .picote, pra ser o mesmo objeto. */
.rota__linha {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(90deg, var(--hairline) 6px, transparent 6px);
  background-size: 12px 1px;
  background-repeat: repeat-x;
  transform-origin: left center;
  transform: scaleX(0);
}
.voando .rota__linha { animation: rota-pinta 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* O aviao anda por `left` em PORCENTAGEM, nao por translateX.
   Motivo: a linha cresce com scaleX, que e' relativo ao pai. translateX e'
   relativo ao proprio elemento (22px), entao os dois avancavam em ritmos
   diferentes — no meio do voo o aviao ficava a frente da rota, e depois a rota
   passava na frente dele. Com `left` em %, os dois usam a mesma referencia e o
   aviao fica cravado na ponta da linha, que e' a ideia: a rota e' desenhada
   por ele.
   O balanco vertical fica no `transform`, separado, pra nao brigar com o X. */
.rota__aviao {
  position: absolute;
  inset-block-start: 50%;
  left: -22px;
  width: 22px;
  height: 22px;
  margin-block-start: -11px;
  color: var(--yellow-lo);
  opacity: 0;
}
.voando .rota__aviao {
  animation:
    rota-anda 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    rota-balanca 2.4s ease-in-out forwards;
}

@keyframes rota-pinta {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Sobe e desce de leve no meio do trajeto — avia~o que anda em linha reta
   perfeita parece adesivo escorregando. */
@keyframes rota-anda {
  0%   { left: -22px; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Sobe e desce de leve: aviao em linha reta perfeita parece adesivo
   escorregando, nao voo. */
@keyframes rota-balanca {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-4px) rotate(-11deg); }
}

/* O aviao da capa respira de leve, em vez de ficar cravado. */
@media (prefers-reduced-motion: no-preference) {
  .capa__aviao { animation: pairar 4.5s ease-in-out infinite; }
}
@keyframes pairar {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50%      { transform: rotate(-12deg) translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .rota__linha { transform: scaleX(1); animation: none; }
  .rota__aviao { display: none; }
}

/* --- Holofote nas fotos da equipe ---------------------------------------
   Pedido do Joao: "mais elementos que se movem", com holofote nas fotos.

   O componente que ele mandou de referencia e' React + Tailwind, e este site
   e' HTML/CSS puro. O efeito, porem, e' so um radial-gradient seguindo o
   ponteiro — feito nativo aqui, sem trazer framework nenhum pra uma pagina de
   tres arquivos.

   Cor: amarelo da marca. O original tinha paleta azul/roxo/verde com hue
   rotativo, que brigaria com a identidade inteira.
   --------------------------------------------------------------------- */

.pessoa__moldura {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
}

/* O facho. `screen` deixa o amarelo iluminar a foto em vez de sujar por cima. */
.pessoa__moldura::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    170px circle at var(--x, 50%) var(--y, 50%),
    rgba(255, 204, 41, 0.34),
    rgba(255, 204, 41, 0.10) 48%,
    transparent 72%
  );
  /* SEM mix-blend-mode. Com `screen` o facho clareava proporcionalmente ao que
     a foto ja tinha de claro — grudava na parede branca do fundo da Melisa em
     vez de seguir o ponteiro, e lia como mancha, nao como holofote.
     Sobreposicao normal e' previsivel: a luz cai onde o ponteiro esta,
     independente do que tem embaixo. */
  opacity: 0;
  transition: opacity 0.28s ease;
}

/* O anel: mesma luz, so na borda, pra a foto ganhar contorno sob o facho. */
.pessoa__moldura::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px rgba(255, 204, 41, 0);
  transition: box-shadow 0.28s ease;
}

.pessoa:hover .pessoa__moldura::after { opacity: 1; }
.pessoa:hover .pessoa__moldura::before { box-shadow: inset 0 0 0 2px rgba(255, 204, 41, 0.65); }

/* A foto sobe de leve — o holofote sozinho parecia mancha sobre algo parado. */
.pessoa img { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1); }
.pessoa:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .pessoa img,
  .pessoa__moldura::after,
  .pessoa__moldura::before { transition: none; }
  .pessoa:hover img { transform: none; }
}

/* --- Consentimento (LGPD) -----------------------------------------------
   Card no canto inferior ESQUERDO no desktop: o botao flutuante do WhatsApp
   mora no direito, e cobrir justo ele seria trocar um atendimento por um
   aviso. No celular nao existem dois cantos — a barra ocupa a largura e o
   botao sobe, usando a altura real medida pelo tracking.js.
   ----------------------------------------------------------------------- */
.consentimento {
  position: fixed;
  /* acima do .zap (60), que fica visivel e clicavel do lado oposto */
  z-index: 80;
  inset-block-end: 1.25rem;
  inset-inline-start: 1.25rem;
  max-width: 25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radio);
  box-shadow: 0 22px 48px -18px rgba(55, 52, 53, 0.45);
  animation: consentimento-entra 0.3s ease both;
}

/* `display:flex` ganharia do atributo hidden — sem isto o banner aparece
   pra quem ja escolheu. */
.consentimento[hidden] { display: none; }

.consentimento__texto p:not(.campo) {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: none; /* o card ja limita a largura */
}

.consentimento__acoes {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.consentimento__acoes .botao { flex: 1 1 auto; }

@keyframes consentimento-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .consentimento {
    inset-inline: 0.75rem;
    inset-block-end: 0.75rem;
    max-width: none;
  }
  /* Sem isto a barra cobre o botao do WhatsApp no celular — que e' o unico
     lugar de onde sai atendimento. A altura vem do tracking.js. */
  body.consentimento-aberto .zap {
    inset-block-end: calc(var(--consentimento-altura, 9rem) + 1.5rem);
  }
}

/* --- Páginas internas ---------------------------------------------------
   /bio/, /check-in-online/ e /politica-de-privacidade/. Não repetem a capa:
   quem chega nelas já sabe onde está e veio buscar uma coisa específica. O
   topo é uma faixa fina com a marca e o caminho de volta.
   ----------------------------------------------------------------------- */
.interna__topo {
  border-block-end: 1px solid var(--hairline);
  background: var(--paper);
}
.interna__topo .envelope {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1rem;
}
.interna__voltar {
  margin-inline-start: auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.interna__voltar:hover { color: var(--ink); }

.interna__capa { padding-block: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; }
.interna__capa h1 {
  font-family: 'Montserrat', Inter, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0.6rem 0 0;
}
.interna__capa p {
  max-width: var(--medida);
  /* Os paragrafos de abertura vinham colados um no outro: o reset zera a
     margem de p e a capa nao tinha regra propria. */
  margin-block: 1.1rem 0;
}

.interna__corpo { padding-block: 1rem clamp(3rem, 7vw, 5rem); }

/* Companhias aéreas: alvo grande, nome legível, sem logo — os logos são de
   terceiros e usá-los sem licença num site comercial é encrenca à toa. */
.aereas {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.aereas a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radio);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.aereas a::after {
  content: '↗';
  color: var(--yellow-lo);
  font-weight: 700;
}
.aereas a:hover { border-color: var(--ink); transform: translateY(-1px); }

/* Bio: uma coluna estreita de botões, que é como se lê no celular vindo do
   Instagram — que é de onde vem praticamente todo o tráfego desta página. */
.bio { max-width: 26rem; margin-inline: auto; text-align: center; }
.bio__marca { margin-block: 2.5rem 1.25rem; }
.bio__marca img { border-radius: 50%; }
.bio__marca h1 {
  font-family: 'Montserrat', Inter, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 0.35rem;
}
.bio__marca p { color: var(--muted); font-size: 0.9375rem; margin: 0; }
.bio__links { display: grid; gap: 0.7rem; margin-block: 2rem; }
.bio__links .botao { width: 100%; }

/* Texto legal: coluna estreita e hierarquia clara, senão ninguém lê. */
.legal { max-width: 46rem; }
.legal h2 {
  font-family: 'Montserrat', Inter, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin-block: 2.5rem 0.75rem;
}
.legal h2:first-child { margin-block-start: 0; }
.legal p, .legal li { font-size: 0.9375rem; line-height: 1.7; }
.legal ul { padding-inline-start: 1.25rem; }
.legal li { margin-block: 0.35rem; }
.legal__data {
  margin-block-start: 3rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--hairline);
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Vitrine de pacotes (pacotes.js)
   Os cards chegam do CRM, entao o numero deles varia: grade que se vira
   sozinha, sem quebrar quando ha 1 ou quando ha 12.
--------------------------------------------------------------------------- */
.pacotes { padding: 4rem 1.5rem; max-width: 1100px; margin: 0 auto; }
.pacotes[hidden] { display: none; }
.pacotes__topo { margin-bottom: 2rem; text-align: center; }
.pacotes__titulo { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 .4rem; }
.pacotes__linha { color: #6b6b6b; margin: 0; }
.pacotes__grade {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.pacote {
  border: 1px solid #e7e1d5; border-radius: 14px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
}
.pacote__foto { width: 100%; height: 170px; object-fit: cover; display: block; }
.pacote__corpo { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.pacote__destino { margin: 0 0 .35rem; font-size: 1.15rem; }
.pacote__desc { margin: 0 0 .7rem; color: #6b6b6b; font-size: .9rem; }
.pacote__itens { list-style: none; padding: 0; margin: 0 0 .9rem; font-size: .85rem; }
.pacote__itens li { margin-bottom: .25rem; }
.pacote__preco { margin: auto 0 .2rem; font-size: .9rem; color: #6b6b6b; }
.pacote__preco strong { font-size: 1.35rem; color: #0a0a0a; display: block; }
/* Regra de ouro: sai sempre junto do preco, nunca escondida. */
.pacote__regra { margin: 0 0 .9rem; font-size: .7rem; color: #8a8a8a; line-height: 1.35; }
.pacote__cta {
  display: block; text-align: center; padding: .7rem 1rem; border-radius: 9px;
  background: #0a0a0a; color: #ffcc29; font-weight: 600; text-decoration: none;
}
.pacote__cta:hover { filter: brightness(1.15); }
.pacotes__rodape {
  margin: 1.5rem 0 0; text-align: center; font-size: .75rem; color: #8a8a8a;
}

/* Galeria do card: scroll horizontal com encaixe. Sem biblioteca — no celular
   o dedo ja faz o trabalho, e e' onde a maioria vai olhar. */
.pacote__galeria {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pacote__galeria::-webkit-scrollbar { display: none; }
.pacote__galeria .pacote__foto {
  flex: 0 0 100%; scroll-snap-align: start;
}
.pacote__contador {
  margin: 0; padding: .3rem .9rem 0; font-size: .68rem; color: #8a8a8a;
}