/* ============================================================================
   VOAR · DESIGN SYSTEM  —  Quiet Luxury / Golden Ratio
   ----------------------------------------------------------------------------
   Toda medida de espaço vem da sequência de Fibonacci (3 5 8 13 21 34 55 89
   144 233 377 610 987). Toda medida de texto vem da razão áurea φ = 1,618.
   Paleta, logotipo e fotografia permanecem exatamente como estavam.
   ============================================================================ */

:root {
  /* ── φ ──────────────────────────────────────────────────────────────── */
  --phi: 1.618;
  --phi-inv: 0.618;
  --fr-phi: 1.618fr;            /* proporção áurea em grid — fr não aceita calc() */

  /* ── Espaço · Fibonacci (px) ────────────────────────────────────────── */
  --s-3: 3px;
  --s-5: 5px;
  --s-8: 8px;
  --s-13: 13px;
  --s-21: 21px;
  --s-34: 34px;
  --s-55: 55px;
  --s-89: 89px;
  --s-144: 144px;
  --s-233: 233px;

  /* ── Ritmo vertical de seção ──────────────────────────────────────────
     Escalonado por breakpoint, nunca interpolado: um clamp() fluido
     produziria valores fora da sequência (8vw = 102,4px em 1280).
     Aqui todo valor entregue ao layout é um número de Fibonacci. */
  --section-y: 55px;
  --section-y-lg: 89px;
  --section-x: 21px;

  /* ── Tipografia · escala Fibonacci, razões de φ ───────────────────────
     13 · 16 · 21 · 34 · 55 · 89   →   55/34 = 34/21 = 21/13 = 1,618
     Também escalonada por breakpoint: um clamp() fluido entregaria
     tamanhos entre os degraus e quebraria a razão. */
  --fs-micro: 13px;
  --fs-body: 16px;
  --fs-lead: 16px;
  --fs-h3: 21px;
  --fs-h2: 21px;
  --fs-h1: 34px;
  --fs-display: 55px;

  --lh-display: 1.09;
  --lh-title: 1.18;
  --lh-sub: 1.309;
  --lh-lead: 1.5;
  --lh-body: 1.618;

  --track-eyebrow: 0.21em;
  --track-title: -0.011em;

  /* ── Medidas de coluna (Fibonacci) ──────────────────────────────────── */
  --w-narrow: 610px;
  --w-text: 987px;
  --w-wide: 1220px;
  --w-full: 1597px;
  --measure: 55ch;
  --measure-tight: 34ch;

  /* ── Superfície ─────────────────────────────────────────────────────── */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 13px;
  --r-pill: 610px;

  --line: 1px solid var(--border);
  --line-strong: 1px solid var(--border-lt);

  --lift-1: 0 5px 21px rgba(30, 59, 78, .05);
  --lift-2: 0 13px 34px rgba(30, 59, 78, .07);
  --lift-3: 0 21px 55px rgba(30, 59, 78, .10);

  /* ── Movimento — discreto por princípio ─────────────────────────────── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-1: .21s;
  --dur-2: .34s;
  --dur-3: .55s;

  /* ── Textura: opacidade máxima de 6% (regra do briefing) ────────────── */
  --tex-opacity: .055;
  --tex-opacity-soft: .04;
}

@media (min-width: 760px) {
  :root {
    --section-y: 89px; --section-y-lg: 144px; --section-x: 34px;
    --fs-lead: 21px; --fs-h2: 34px; --fs-h1: 55px; --fs-display: 89px;
  }
}

@media (min-width: 1200px) {
  :root { --section-y: 89px; --section-y-lg: 233px; --section-x: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: .001s; --dur-2: .001s; --dur-3: .001s; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   TEXTURAS — carta de voo, curvas de nível, linhas de navegação
   Sempre em ::before, sempre atrás do conteúdo, sempre ≤ 6% de opacidade.
   ============================================================================ */

.tex { position: relative; isolation: isolate; }

.tex::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--tex-opacity);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.tex > * { position: relative; z-index: 1; }

.tex-grid::before {
  background-image: url("../tex/chart-grid.svg");
  background-repeat: repeat;
  background-size: 233px 233px;
  opacity: var(--tex-opacity-soft);
}

.tex-contour::before {
  background-image: url("../tex/contour.svg");
  background-position: center top;
}

.tex-path::before {
  background-image: url("../tex/flightpath.svg");
  background-position: center;
  background-size: 100% auto;
}

.tex-compass::before {
  background-image: url("../tex/compass.svg");
  background-repeat: no-repeat;
  background-position: right -144px top 50%;
  background-size: 610px 610px;
}

/* combinação usada nas faixas de transição narrativa */
.tex-transition::before {
  background-image: url("../tex/contour.svg"), url("../tex/chart-grid.svg");
  background-repeat: no-repeat, repeat;
  background-position: center top, center;
  background-size: cover, 233px 233px;
  opacity: var(--tex-opacity);
}

/* filete de horizonte entre seções — substitui bordas duras */
.rule-h {
  border: 0;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--border-lt) 21%, var(--border-lt) 79%, transparent);
}

/* ============================================================================
   TIPOGRAFIA
   ============================================================================ */

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted-brand);
  margin: 0 0 var(--s-21);
  line-height: var(--lh-sub);
}

.title-1,
.title-2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: var(--track-title);
  color: var(--ink, #1E3B4E);
  text-wrap: balance;
  margin: 0;
}

.title-1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
.title-2 { font-size: var(--fs-h2); line-height: var(--lh-title); }

.title-1 em,
.title-2 em { font-style: italic; }

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: var(--lh-lead);
  color: var(--muted);
  max-width: var(--measure);
  margin: 0;
}

.body-sm { font-size: var(--fs-micro); line-height: var(--lh-body); color: var(--muted); }

/* ============================================================================
   LAYOUT
   ============================================================================ */

.shell { width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--section-x); }
.shell-narrow { max-width: var(--w-narrow); }
.shell-text { max-width: var(--w-text); }

.section { padding-block: var(--section-y); }
.section-lg { padding-block: var(--section-y-lg); }

/* cabeçalho de seção centrado, com respiro áureo abaixo */
.sec-head { text-align: center; max-width: var(--w-text); margin: 0 auto var(--s-55); }
.sec-head .lead { margin-inline: auto; }
.sec-head .title-2 + .lead { margin-top: var(--s-21); }

/* divisão áurea: conteúdo 61,8% / apoio 38,2% */
.split-phi {
  display: grid;
  gap: var(--s-55);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split-phi { grid-template-columns: var(--fr-phi) 1fr; gap: var(--s-89); align-items: center; }
}

/* ============================================================================
   BOTÕES
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-13);
  min-height: 55px;
  padding: var(--s-13) var(--s-34);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}

.btn:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }

.btn-gold { background: var(--grad-gold); color: var(--night); border-color: var(--gold-dk); font-weight: 700; }
.btn-gold:hover { background: var(--grad-gold-hi); border-color: var(--gold-dk); }

.btn-outline { background: transparent; color: var(--ink, #1E3B4E); border-color: var(--border-lt); }
.btn-outline:hover { border-color: var(--night); background: rgba(169, 201, 222, .16); }

.btn-quiet {
  min-height: 34px;
  padding: var(--s-8) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-lt);
  border-radius: 0;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.btn-quiet:hover { color: var(--night); border-color: var(--night); }

.btn-block { width: 100%; }

/* ============================================================================
   CLUSTERS DE EXPERIÊNCIA (home)
   ============================================================================ */

.clusters { display: grid; gap: var(--s-34); grid-template-columns: 1fr; }

@media (min-width: 860px) {
  .clusters { grid-template-columns: repeat(2, 1fr); gap: var(--s-55); }
}

.cluster {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--lift-1);
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}

.cluster:hover { box-shadow: var(--lift-3); border-color: var(--border-lt); transform: translateY(-3px); }
.cluster:focus-within { border-color: var(--gold-dk); }

.cluster-media { position: relative; aspect-ratio: 1.618; overflow: hidden; background: var(--bg3); }
.cluster-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-3) var(--ease); }
.cluster:hover .cluster-media img { transform: scale(1.034); }

.cluster-tag {
  position: absolute;
  inset-block-start: var(--s-13);
  inset-inline-start: var(--s-13);
  padding: var(--s-5) var(--s-13);
  background: rgba(244, 248, 250, .93);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-brand);
}

.cluster-body { display: flex; flex-direction: column; gap: var(--s-13); padding: var(--s-34); flex: 1; }

.cluster-kicker {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted-brand);
}

.cluster-title { font-family: var(--cormorant); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-sub); color: var(--ink, #1E3B4E); margin: 0; }
.cluster-desc { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); margin: 0; max-width: var(--measure); }

.cluster-price { display: flex; align-items: baseline; gap: var(--s-8); margin-top: var(--s-8); }
.cluster-price-label { font-size: var(--fs-micro); color: var(--muted-brand); }
.cluster-price-value { font-family: var(--serif); font-size: var(--fs-h3); color: var(--ink, #1E3B4E); }
.cluster-price-unit { font-size: var(--fs-micro); color: var(--muted); }

.cluster-feats { list-style: none; margin: var(--s-13) 0 0; padding: 0; display: grid; gap: var(--s-8); }
.cluster-feats li { position: relative; padding-inline-start: var(--s-21); font-size: var(--fs-micro); line-height: var(--lh-body); color: var(--muted); }
.cluster-feats li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .55em;
  width: var(--s-8);
  height: 1px;
  background: var(--sky);
}

.cluster-foot { margin-top: auto; padding-top: var(--s-21); display: flex; align-items: center; justify-content: space-between; gap: var(--s-13); }
.cluster-go { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-brand); }
.cluster:hover .cluster-go { color: var(--night); }

/* faixa discreta do corporativo */
/* ── BALÃO CORPORATIVO (B2B) ─────────────────────────────────────────
   Era uma faixa em Céu diluído que sumia no fim da seção. Agora é um card
   em Noite sólida: rota secundária, mas com autoridade — o contraste faz
   ele parar de ser rodapé e virar afirmação. */
.corp-band {
  display: flex;
  align-items: center;
  gap: var(--s-21);
  flex-wrap: wrap;
  max-width: var(--w-text);
  margin: var(--s-55) auto 0;
  padding: var(--s-21) var(--s-34);
  background: var(--night, #1E3B4E);
  border: 1px solid rgba(230, 202, 117, .30);
  border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: 0 13px 34px rgba(30, 59, 78, .13);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}

.corp-band:hover {
  border-color: rgba(230, 202, 117, .68);
  box-shadow: 0 21px 55px rgba(30, 59, 78, .21);
  transform: translateY(-1px);
}
.corp-band:focus-visible { outline: 2px solid var(--gold, #E6CA75); outline-offset: 3px; }

.corp-band img {
  width: 89px; height: 89px; object-fit: cover;
  border-radius: var(--r-sm); flex: 0 0 auto;
  border: 1px solid rgba(230, 202, 117, .22);
}

.corp-band-body { flex: 1 1 280px; display: flex; flex-direction: column; gap: 6px; }

.corp-band-kicker {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: .21em; text-transform: uppercase;
  color: var(--gold, #E6CA75);
}

.corp-band-text {
  font-size: var(--fs-micro);
  line-height: var(--lh-body);
  color: var(--mist, #F4F8FA);
  opacity: .80;
}

.corp-band-cta {
  font-size: var(--fs-micro); font-weight: 600;
  color: var(--mist, #F4F8FA);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(230, 202, 117, .44);
  border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.corp-band-cta i { font-style: normal; color: var(--gold, #E6CA75); transition: transform var(--dur-1) var(--ease); }
.corp-band:hover .corp-band-cta { background: rgba(230, 202, 117, .10); border-color: rgba(230, 202, 117, .68); }
.corp-band:hover .corp-band-cta i { transform: translateX(3px); }

@media (max-width: 559px) {
  .corp-band { gap: var(--s-13); padding: var(--s-21); }
  .corp-band img { width: 55px; height: 55px; }
  .corp-band-cta { white-space: normal; width: 100%; justify-content: center; }
}

/* ============================================================================
   CONSULTA — formulário mínimo (data + PAX + intenção)
   ============================================================================ */

.consult { background: var(--bg2); border-block: var(--line); }

.consult-grid { display: grid; gap: var(--s-55); grid-template-columns: 1fr; align-items: start; }

@media (min-width: 900px) {
  .consult-grid { grid-template-columns: 1fr var(--fr-phi); gap: var(--s-89); }
}

.consult-copy .title-2 { margin-bottom: var(--s-21); }

.consult-card {
  background: var(--bg);
  border: var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--s-34);
  box-shadow: var(--lift-2);
  display: grid;
  gap: var(--s-21);
}

@media (min-width: 560px) { .consult-card { padding: var(--s-55); } }

.field { display: grid; gap: var(--s-8); }

.field-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-brand);
}

.field-hint { font-size: var(--fs-micro); color: var(--muted); line-height: var(--lh-sub); }

.field input[type="date"] {
  width: 100%;
  min-height: 55px;
  padding: var(--s-13) var(--s-21);
  background: #fff;
  border: var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink, #1E3B4E);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.2;
  transition: border-color var(--dur-1) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.field input[type="date"]:focus { outline: none; border-color: var(--gold-dk); }

/* stepper de passageiros — alvo de toque 55px, sem <select> */
.pax {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-13);
  min-height: 55px;
  padding: var(--s-5);
  background: #fff;
  border: var(--line-strong);
  border-radius: var(--r-md);
}

.pax-btn {
  width: 55px;
  height: 45px;
  flex: 0 0 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink, #1E3B4E);
  font-size: var(--fs-h3);
  font-family: var(--sans);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.pax-btn:hover:not(:disabled) { background: var(--gold-lt); }
.pax-btn:disabled { opacity: .34; cursor: not-allowed; }
.pax-btn:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 2px; }

.pax-value { flex: 1; text-align: center; font-family: var(--serif); font-size: var(--fs-h3); color: var(--ink, #1E3B4E); line-height: 1; }
.pax-value small { display: block; font-family: var(--sans); font-size: var(--fs-micro); font-weight: 400; color: var(--muted); margin-top: var(--s-5); letter-spacing: .04em; }

/* nota de família em public/1/ — encaminha 3-4 pessoas para a cotação da home.
   Ouro NUNCA como texto sobre fundo claro: o link usa --gold-ink (4,58:1). */
.pkg-familia-nota {
  max-width: var(--w-text);
  margin: var(--s-34) auto 0;
  text-align: center;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  line-height: var(--lh-body);
  color: var(--muted);
}
.pkg-familia-nota a {
  color: var(--gold-ink, #8A6D1F);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding-inline: var(--s-5);
}
.pkg-familia-nota a:hover { color: var(--ink, #1E3B4E); }
.pkg-familia-nota a:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 2px; }

/* seletor de tipo de voo — segmentado, sempre com um lado escolhido, então
   não acrescenta campo em branco para preencher. Mesma tinta dos chips. */
.segm {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
}
@media (min-width: 480px) { .segm { grid-template-columns: 1fr 1fr; } }

.segm-op {
  display: grid;
  gap: var(--s-3);
  min-height: 55px;
  padding: var(--s-13) var(--s-21);
  background: #fff;
  border: var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.segm-op strong { font-size: var(--fs-body); font-weight: 600; color: var(--ink, #1E3B4E); line-height: 1.309; }
.segm-op small { font-size: var(--fs-micro); font-weight: 400; color: var(--muted); line-height: var(--lh-sub); }
.segm-op:hover { border-color: var(--night); }
.segm-op[aria-pressed="true"] { background: var(--night); border-color: var(--night); }
.segm-op[aria-pressed="true"] strong { color: var(--mist); }
.segm-op[aria-pressed="true"] small { color: var(--muted-on-dark); }
.segm-op:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 2px; }

/* chips de intenção */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-8); }

.chip-intent {
  min-height: 45px;
  padding: var(--s-8) var(--s-21);
  background: #fff;
  border: var(--line-strong);
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: var(--fs-micro);
  color: var(--muted);
  cursor: pointer;
  line-height: 1.3;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.chip-intent:hover { border-color: var(--night); color: var(--night); }
.chip-intent[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: var(--mist); font-weight: 600; }
.chip-intent:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 2px; }

/* leitura do encaminhamento escolhido */
.consult-readout {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-21);
  background: var(--bg3);
  border-radius: var(--r-md);
  font-size: var(--fs-micro);
  line-height: var(--lh-body);
  color: var(--muted);
  min-height: 89px;
}

.consult-readout strong { color: var(--ink, #1E3B4E); font-weight: 600; }
.consult-readout[data-intent="romantic"] { background: rgba(230, 202, 117, .13); }

.consult-micro { font-size: var(--fs-micro); color: var(--muted-brand); text-align: center; line-height: var(--lh-sub); }

/* ============================================================================
   NARRATIVA DO VOO (subpáginas + home)
   ============================================================================ */

.story { position: relative; }

/* ══════════════════════════════════════════════════════════════════════
   TRILHA · linha do tempo / vitrine das subpáginas
   A rota tracejada É a espinha da seção — costura os capítulos em vez de
   decorar em volta deles (mesma lógica da Jornada da home). Marcas de rumo
   nos pontos de virada, foto de cada capítulo, muito ar entre eles.
   ══════════════════════════════════════════════════════════════════════ */

.story-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
  display: grid;
  gap: var(--s-55);
  max-width: var(--w-text);
}

/* a rota */
.story-list::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 20px;
  top: 21px;
  bottom: 21px;
  border-left: 1px dashed rgba(30, 59, 78, .24);
}

.story-step {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-21);
  padding-left: 55px;
  border-bottom: 0;
  padding-block-end: 0;
}

/* ponto de rumo — mesma linguagem da .rota-fix da home */
.story-fix {
  position: absolute;
  left: 0; top: 0;
  width: 41px; height: 41px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg, #F4F8FA);
  border: 1px solid rgba(30, 59, 78, .22);
  box-shadow: 0 0 0 5px var(--bg, #F4F8FA);
}
.story-fix::after {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(217, 184, 95, .40);
}
.story-fix b {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: rgba(30, 59, 78, .74);
}

.story-fig {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg2, #EBF2F7);
}
.story-fig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
}

.story-body { display: flex; flex-direction: column; gap: var(--s-8); }

.story-meta { display: flex; align-items: baseline; gap: var(--s-13); }

.story-n {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: .21em;
  color: rgba(30, 59, 78, .74);
}

/* ouro aqui reprovava em contraste (1,79:1 sobre a névoa) e a KV reserva ouro
   para ação. O horário volta para Noite a 74% — 5,16:1, AA folgado. */
.story-time {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: .21em; text-transform: uppercase;
  color: rgba(30, 59, 78, .74);
}

.story-title {
  font-family: var(--serif);
  font-size: var(--fs-h3); font-weight: 400;
  line-height: var(--lh-sub);
  color: var(--ink, #1E3B4E);
  margin: 0;
}
.story-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  margin: 0;
  max-width: var(--measure);
}

/* desktop: a rota desce pelo meio e os capítulos alternam de lado */
@media (min-width: 900px) {
  .story-list { gap: var(--s-89); }
  .story-list::before { left: 50%; }

  .story-step {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-89);
    padding-left: 0;
    align-items: center;
  }
  .story-fix { left: 50%; top: 50%; transform: translate(-50%, -50%); }

  .story-step:nth-child(even) .story-fig  { order: 2; }
  .story-step:nth-child(even) .story-body { order: 1; text-align: right; }
  .story-step:nth-child(even) .story-meta { justify-content: flex-end; }
  .story-step:nth-child(even) .story-text { margin-left: auto; }
}


/* ============================================================================
   PROVA — números em linha, sem barra pesada
   ============================================================================ */

.proof-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-21) var(--s-13);
  max-width: var(--w-text);
  margin-inline: auto;
}

@media (min-width: 760px) { .proof-row { grid-template-columns: repeat(4, 1fr); gap: var(--s-34); } }

.proof-item { text-align: center; display: grid; gap: var(--s-5); }
.proof-value { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; color: var(--ink, #1E3B4E); line-height: 1; }
.proof-label { font-size: var(--fs-micro); color: var(--muted); line-height: var(--lh-sub); }

/* ============================================================================
   ENTRADA SUAVE — sem deslocamento de layout (CLS = 0)
   ============================================================================ */

.rise { opacity: 0; transform: translateY(var(--s-13)); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.rise.is-in { opacity: 1; transform: none; }

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

/* ============================================================================
   ACESSIBILIDADE
   ============================================================================ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-13);
  top: calc(var(--s-13) * -6);
  z-index: 999;
  padding: var(--s-13) var(--s-21);
  background: var(--gold);
  color: var(--ink, #1E3B4E);
  border-radius: var(--r-md);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-1) var(--ease);
}

.skip-link:focus { top: var(--s-13); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold-dk);
  outline-offset: 2px;
}

/* ============================================================================
   BARRA FINA DE CONVERSÃO (dock)
   Substitui a antiga barra fixa de 165px com quatro números.
   ============================================================================ */

.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-21);
  padding: var(--s-13) var(--s-21) calc(var(--s-13) + env(safe-area-inset-bottom));
  background: var(--night);
  border-top: 1px solid rgba(169, 201, 222, .22);
  box-shadow: 0 -8px 34px rgba(30, 59, 78, .18);
  animation: dockIn var(--dur-2) var(--ease);
}

.dock[hidden] { display: none; }

@keyframes dockIn { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) { .dock { animation: none; } }

.dock-text { font-size: var(--fs-micro); color: rgba(244, 248, 250, .76); letter-spacing: .04em; }
.dock-btn { min-height: 48px; padding-inline: var(--s-34); font-size: var(--fs-micro); }

@media (max-width: 560px) {
  .dock { justify-content: space-between; gap: var(--s-13); }
  .dock-text { flex: 1; }
  .dock-btn { flex: 0 0 auto; padding-inline: var(--s-21); }
}

/* ============================================================================
   REAJUSTE DOS COMPONENTES HERDADOS AO RITMO DE FIBONACCI
   A antiga barra fixa saiu — o espaço reservado para ela também.
   ============================================================================ */

#pageMain { padding-bottom: 0; }

.strip { display: none !important; }

.proof-section { background: var(--bg); }

/* galeria / depoimentos */
.depos { padding-block: var(--section-y-lg); padding-inline: var(--section-x); border-top: 0; }
.depos-inner { max-width: var(--w-text); }
.depos .sec-head { margin-bottom: var(--s-55); }
.gallery-carousel { gap: var(--s-34); }
.gallery-nav { gap: var(--s-13); }
.gallery-arrow { width: 48px; height: 48px; }

/* avaliações Google */
.google-reviews { padding-block: var(--section-y-lg); padding-inline: var(--section-x); border-top: 0; }
.gr-inner { max-width: var(--w-wide); gap: var(--s-55); }
.gr-card { padding: var(--s-21); gap: var(--s-13); border-radius: var(--r-lg); }
.gr-arrow { width: 48px; height: 48px; flex-basis: 48px; }
.gr-text { font-size: var(--fs-micro); line-height: var(--lh-body); }

/* FAQ */
.faq { border-top: 0; }
.faq-grid { max-width: var(--w-wide); }
.faq-left { padding: var(--section-y) var(--s-55); }
.faq-right { padding: var(--s-21) var(--s-55); }
.faq-kicker { margin-bottom: var(--s-21); font-size: var(--fs-micro); letter-spacing: var(--track-eyebrow); }
.faq-title { margin-bottom: var(--s-21); }
.faq-desc { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure-tight); }
.faq-q { padding: var(--s-21) var(--s-3); font-size: var(--fs-h3); min-height: 55px; gap: var(--s-21); }
.faq-plus { width: 34px; height: 34px; flex: 0 0 34px; }
.faq-a-inner { padding: 0 var(--s-3) var(--s-21); font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); }

@media (max-width: 900px) {
  .faq-left { padding: var(--section-y) var(--s-21); }
  .faq-right { padding: var(--s-13) var(--s-21) var(--s-34); }
}

/* rodapé */
footer { gap: var(--s-13); padding: var(--s-34) var(--s-21); font-size: var(--fs-micro); }
.footer-logo { height: 34px; width: auto; object-fit: contain; opacity: .92; }

/* herdado: o .fade-up antigo continua funcionando onde ainda existir */
.fade-up { opacity: 0; transform: translateY(var(--s-21)); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.fade-up.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; } }

/* alvos de toque: nada abaixo de 48px em qualquer controle */
.btn, .pax-btn, .chip-intent, .gallery-arrow, .gr-arrow, .faq-q, .gr-more,
.tour-btn-outline, .tour-btn-primary, .whatsapp-btn { touch-action: manipulation; }

.gr-more { min-height: 44px; display: inline-flex; align-items: center; padding-block: var(--s-8); }

/* ── remate da narrativa (subpáginas) ──────────────────────────────── */
.story-foot { margin: var(--s-55) 0 0; text-align: center; }

.story-scope {
  display: block;
  margin-top: var(--s-13);
  margin-bottom: var(--s-13);
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted-brand, rgba(30, 59, 78, .52));
}

/* subpáginas: o topo passa a ser a narrativa, não um hero de imagem */
.story .sec-head { margin-bottom: var(--s-89); }
.story:first-of-type { padding-top: calc(var(--section-y-lg) + var(--s-55)); }

/* Rede de segurança do runtime: quando a entrada suave é dispensada
   (aba oculta, movimento reduzido, sem IntersectionObserver), o estado
   final é aplicado sem transição — conteúdo invisível nunca é uma opção. */
.voar-no-anim .rise,
.voar-no-anim .fade-up,
.voar-no-anim .hidden { transition: none !important; }

.voar-no-anim .rise { opacity: 1; transform: none; }
.voar-no-anim .hidden { opacity: 1; transform: none; }

/* ============================================================================
   SUBPÁGINAS · correções de usabilidade herdadas
   ============================================================================ */

/* campos: nada abaixo de 48px de altura de toque */
.form-group input,
.form-group select,
.form-group textarea {
  min-height: 48px;
  font-size: var(--fs-body);
  line-height: 1.35;
}

.form-group textarea { min-height: 89px; }

.form-group label {
  display: block;
  margin-bottom: var(--s-8);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-brand);
}

/* botão flutuante do WhatsApp: alvo confortável e sem sobrepor o rodapé */
.whatsapp-float {
  min-height: 48px;
  min-width: 48px;
  padding: var(--s-13) var(--s-21);
  border-radius: var(--r-pill);
  gap: var(--s-8);
}

.whatsapp-float .wa-icon { width: 24px; height: 24px; }

@media (max-width: 720px) {
  .whatsapp-float { width: 56px; height: 56px; min-height: 56px; padding: 0; }
}

/* cartões de pacote e adicionais no ritmo Fibonacci */
.tour-card-body { padding: var(--s-34) var(--s-21) var(--s-21); }
.tour-btn-primary, .tour-btn-outline, .whatsapp-btn, .btn-primary { min-height: 55px; }
.extras-mini h3 { margin-bottom: var(--s-21); }
.mini-extra { min-height: 89px; }
.select-extra-mini { min-width: 34px; min-height: 34px; }

/* carrosséis também param quando a entrada suave é dispensada */
.voar-no-anim .gr-card,
.voar-no-anim .gallery-slide { transition: none !important; }

/* impede o ajuste automatico de fonte do navegador, que quebraria a escala */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ============================================================================
   HERO · trava da escala
   A style.css herdada redefine o hero em três media queries com valores em
   rem e vw (2.35rem, .74rem, 11.5vw…). Como ela carrega antes, estas regras
   devolvem o hero à escala Fibonacci em qualquer largura.
   ============================================================================ */

/* base inferior maior que a superior = bloco textual sobe para a zona optica.
   Era 144/34 (colado no rodape) — a causa real do "texto muito embaixo".
   22/08: 131 -> 144 e 96 -> 144 (Fibonacci). 144 tambem e o unico valor da
   sequencia que limpa a marca flutuante nas duas larguras: no desktop a nav
   ocupa 89 + 21x2 = 131px; no celular, 76 + 13x2 = 102px. */
.hero-content { max-width: var(--w-text); padding: var(--s-144) var(--s-34) 5svh;
  justify-content: flex-end; }
.hero-eyebrow { font-size: var(--fs-micro); margin-bottom: var(--s-21); }
.hero-title { font-size: var(--fs-h1); line-height: var(--lh-display); margin-bottom: var(--s-13); }
.hero-sub { font-size: var(--fs-lead); line-height: var(--lh-lead); margin: 0 auto; }
.hero-proof { gap: var(--s-5) var(--s-21); margin: 0 auto; }
.hero-proof li { font-size: var(--fs-micro); padding-left: 13px; }
.hero-proof li::before { width: 5px; height: 5px; margin-top: -2.5px; }

@media (max-width: 759px) {
  .hero-content { padding: var(--s-144) var(--s-21) 5svh; }
  .hero-proof { gap: var(--s-5) var(--s-13); margin: 0 auto; }
}

/* telas baixas (paisagem no celular, notebook curto): encolhe proporcionalmente,
   mantendo a base maior que o topo para o texto nao voltar a descer.
   22/08: 76 -> 89 (Fibonacci); com os 4 validadores na ancora, quem cede
   espaco em tela curta e o painel (ver @media max-height:700px no index), nao o titulo. */
@media (max-height: 760px) {
  .hero-content { padding-top: var(--s-89); padding-bottom: 4svh; }
}

/* últimos resquícios em rem da folha herdada, trazidos para a escala */
.nav-brand { font-size: var(--fs-micro); }
.gr-score-tag { font-size: var(--fs-body); }
.gr-name { font-size: var(--fs-micro); }
.gr-time { font-size: 11px; }
.faq-plus { font-size: var(--fs-body); }
.corp-band-cta, .corp-band-text { font-size: var(--fs-micro); }

/* ============================================================================
   SUBPÁGINAS · trava da escala tipográfica
   As folhas de 1/, 2/ e 3/ trazem tamanhos em rem/vw fora da escala — entre
   eles rótulos de 7px e 8px nos adicionais, ilegíveis no celular.
   ============================================================================ */

.packages-title,
.section-title h2,
.booking-info h2 { font-size: var(--fs-h2); line-height: var(--lh-title); }

.section-title span { font-size: var(--fs-micro); letter-spacing: var(--track-eyebrow); }
.section-title p { font-size: var(--fs-lead); line-height: var(--lh-lead); }

.tour-card-title { font-size: var(--fs-h3); line-height: var(--lh-sub); }
.tour-quick li { font-size: var(--fs-micro); }
.tour-btn-primary,
.tour-btn-outline { font-size: var(--fs-body); }

.summary-card h3,
.extras-mini h3 { font-size: var(--fs-h3); line-height: var(--lh-sub); }

/* rótulos dos adicionais: eram 8px e 7px */
.mini-extra-overlay h4 { font-size: var(--fs-micro); line-height: var(--lh-sub); }
.mini-extra-overlay strong { font-size: var(--fs-micro); font-weight: 600; }


/* ============================================================================
   MARCA FLUTUANTE DAS SUBPÁGINAS
   Quem chega em /1/, /2/ ou /3/ por anúncio precisa ver a marca e ter volta.
   Só o balão — o wordmark ficava ilegível sobre foto clara.
   ============================================================================ */

.voar-mark {
  position: fixed;
  inset-block-start: var(--s-13);
  inset-inline-start: var(--s-13);
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 55px;
  min-height: 55px;
  padding: var(--s-5);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: opacity var(--dur-1) var(--ease);
}

.voar-mark img { width: 46px; height: 46px; object-fit: contain; display: block; }
.voar-mark:hover { opacity: .82; }
.voar-mark:focus-visible { outline: 2px solid var(--gold-dk); outline-offset: 3px; }

@media (min-width: 760px) {
  .voar-mark { inset-block-start: var(--s-21); inset-inline-start: var(--s-21); }
  .voar-mark img { width: 55px; height: 55px; }
}


/* ════════════════════════════════════════════════════════════════════
   A JORNADA · rota cartográfica até o voo
   Linguagem de carta de navegação aérea: a rota tracejada É a espinha da
   seção — costura os pontos em vez de decorar em volta deles. Os fixos são
   marcas de rumo, não bolinhas de timeline. Rosa dos ventos entra pela
   textura .tex-compass já existente, em opacidade mínima.
   ════════════════════════════════════════════════════════════════════ */

.jornada-head { text-align: center; max-width: var(--w-text); margin: 0 auto; }
.jornada-head .lead { margin-top: var(--s-13); }

/* o invólucro carrega o respiro e serve de referência para a aerovia */
.rota-wrap { position: relative; margin-top: var(--s-55); }

/* a aerovia — só no traçado horizontal (desktop). Em coluna, quem desenha a
   rota é o .rota::before vertical. vector-effect mantém filete e tracejado
   com a mesma espessura apesar do preserveAspectRatio="none". */
.rota-airway {
  position: absolute;
  z-index: 0;
  top: 0; left: 0;
  width: 100%; height: 118px;
  display: none;
  overflow: visible;
}
.rota-leg {
  fill: none;
  stroke: rgba(30, 59, 78, .26);
  stroke-width: 1;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}
/* marcas de distância no meio de cada perna */
.rota-tick line {
  stroke: rgba(30, 59, 78, .20);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.rota {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: var(--s-34);
}

/* a rota em coluna — tracejada, hairline, some nas pontas.
   left = metade do fixo (34/2), para o traço nascer no centro dele */
.rota::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 17px; top: var(--s-21); bottom: var(--s-34);
  border-left: 1px dashed rgba(30, 59, 78, .26);
}

.rota-p { position: relative; z-index: 1; padding-left: var(--s-55); }

/* ponto de rumo: círculo hairline sobre a névoa, com anel externo de ouro */
.rota-fix {
  position: absolute;
  left: 0; top: 0;
  width: var(--s-34); height: var(--s-34);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg, #F4F8FA);
  border: 1px solid rgba(30, 59, 78, .22);
  box-shadow: 0 0 0 5px var(--bg, #F4F8FA);
}
.rota-fix::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(217, 184, 95, .40);
}
.rota-fix b {
  font-family: var(--sans);
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .06em;
  color: rgba(30, 59, 78, .74);
}
/* último ponto: o destino — ouro cheio, é onde a rota termina */
.rota-fix-fim { border-color: rgba(217, 184, 95, .72); }
.rota-fix-fim::after { border-color: rgba(217, 184, 95, .80); }
/* o ouro do último ponto fica no anel (decorativo), não no número (texto) */
.rota-fix-fim b { color: var(--night, #1E3B4E); }

.rota-t {
  font-family: var(--serif);
  font-size: var(--s-21); font-weight: 400; line-height: 1.309;
  color: var(--ink, #1E3B4E);
  margin: var(--s-8) 0 var(--s-5);
}
.rota-d {
  font-size: var(--fs-micro);
  line-height: var(--lh-body);
  color: rgba(30, 59, 78, .74);
  max-width: 38ch;
}

@media (min-width: 900px) {
  /* column-gap ZERO de proposito: com gap em pixel as colunas deixam de medir
     20% cada e o centro de cada fixo desliza (medido: ate 0,8% da largura, ~9px
     nas pontas em 1280) — a aerovia passava ao lado do fixo em vez de dentro.
     Sem gap, os centros caem exatos em 10/30/50/70/90% em qualquer largura, e o
     respiro entre colunas vira padding do proprio item. */
  .rota { grid-template-columns: repeat(5, 1fr); column-gap: 0; row-gap: var(--s-21); align-items: start; }
  /* a aerovia assume; o traço em coluna sai */
  .rota::before { content: none; }
  .rota-airway { display: block; }
  .rota-p { padding-left: 0; padding-inline: var(--s-13); padding-top: var(--s-55); text-align: center; }
  .rota-fix { left: 50%; transform: translateX(-50%); }
  .rota-d { max-width: none; }

  /* ASCENSÃO — cada fixo sobe um degrau de 21px sobre o anterior.
     Rumo constante: os cinco centros ficam colineares, e é isso que a
     polyline da aerovia liga (centros em y 101 · 80 · 59 · 38 · 17). */
  .rota-p:nth-child(1) { margin-top: 84px; }
  .rota-p:nth-child(2) { margin-top: 63px; }
  .rota-p:nth-child(3) { margin-top: 42px; }
  .rota-p:nth-child(4) { margin-top: 21px; }
  .rota-p:nth-child(5) { margin-top: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   CONSULTA EXPANSÍVEL · o formulário só aparece depois da intenção
   ════════════════════════════════════════════════════════════════════ */

.reveal-head { text-align: center; max-width: var(--w-text); margin: 0 auto; }
.reveal-head .lead { margin: var(--s-13) auto 0; max-width: 55ch; }

.btn-reveal {
  margin-top: var(--s-34);
  display: inline-flex; align-items: center; justify-content: center; gap: 13px;
  min-height: 55px; padding: 13px 34px;
  width: auto; max-width: 100%;
}
.btn-reveal-icon {
  font-size: 20px; line-height: 1; font-weight: 400;
  transition: transform var(--dur-1) var(--ease);
}
.btn-reveal.is-open .btn-reveal-icon { transform: rotate(135deg); }

.reveal-panel {
  max-width: 610px;
  margin: var(--s-34) auto 0;
  animation: revelar var(--dur-3, .55s) var(--ease) both;
}
.reveal-panel[hidden] { display: none; }

@keyframes revelar {
  from { opacity: 0; transform: translateY(13px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-panel { animation: none; }
}

@media (max-width: 559px) {
  .btn-reveal { width: 100%; }
}

/* ── Card único de pacote (Smart e Select passaram a ter preço único) ──
   A grade herdada era de 3 colunas; com um card só ela esticava o card
   para 1/3 da largura. */
.tour-cards-grid.tour-cards-solo {
  grid-template-columns: 1fr;
  max-width: 610px;
  margin-inline: auto;
}
.tour-card-kicker {
  display: block;
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: .21em; text-transform: uppercase;
  color: rgba(30, 59, 78, .74);
  margin-bottom: var(--s-8);
}
.tour-card-desc {
  font-size: var(--fs-micro);
  line-height: var(--lh-body);
  color: var(--muted);
  margin: 0 0 var(--s-13);
}
.tour-card-note {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(30, 59, 78, .74);
  margin: var(--s-13) 0 0;
  padding-top: var(--s-13);
  border-top: 1px solid var(--border-lt, rgba(30,59,78,.18));
}
/* o painel de reserva das subpáginas é mais largo que o da home */
.reveal-panel-wide { max-width: 900px; }