/* ==========================================================================
   RotasSul Transfer — Fase 16: a jornada do passageiro

   Um único momento de scrollytelling na home: quatro etapas — chegada,
   encontro, trajeto, destino — que se montam conforme o visitante rola, e
   assentam numa composição final estável com o CTA.

   AS MESMAS TRÊS REGRAS DA FASE 15 VALEM AQUI

   1. O estado FINAL é o estado padrão. Sem JavaScript, com movimento
      reduzido, em tela estreita ou se o script falhar, a seção já nasce
      montada: quatro etapas legíveis, quatro fotos, título, texto e CTA.
      A pista de rolagem, o sticky e a sobreposição das peças só existem
      depois que o JS acrescenta `journey-scrub`. Nunca há conteúdo preso em
      opacity:0 esperando script.

   2. Nada aqui entra no caminho crítico de imagem. A seção fica bem abaixo
      da dobra e as fotos são materializadas por js/journey-scrollytelling.js
      só quando a seção se aproxima — a URL real nem chega ao HTML.

   3. As proporções são fixas. No modo editorial por `aspect-ratio`; no modo
      preso, por caixas em porcentagem do palco. Zero CLS nos dois.

   DOIS MODOS, escolhidos por `data-journey-modo` na seção:
     a) editorial cinematográfica — uma moldura, as fotos se sucedem nela
     b) scrollytelling transformativo — quatro molduras que se encaixam

   O modo preso só existe a partir de 1100px, pelo mesmo motivo medido na
   Fase 15: abaixo disso a composição vertical não cabe na janela útil e a
   seção seguinte cobre o fim dela.

   Prefixo de classe: journey-story / jr-
   ========================================================================== */

.journey-story {
  /* Vem depois da frota, que termina em branco, e entrega para o
     entretenimento, que começa em branco. O degradê sai do branco, escurece
     no miolo e volta — é essa continuidade que evita o corte seco pedido
     no briefing. */
  background: linear-gradient(180deg, #fff 0%, #f4f1ec 14%, #efeae1 50%, #f6f4f0 86%, #fff 100%);
  padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 96px);
  position: relative;
}

/* O palco é a pista de rolagem do modo preso. No modo editorial ele não
   existe: a seção tem a altura do próprio conteúdo. */
.journey-story__palco {
  position: relative;
}

.journey-story__stage {
  position: static;
}

.journey-story__inner {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 20px;
  position: relative;
  width: 100%;
}

/* -------- Cabeçalho -------- */

.journey-story__head {
  margin: 0 0 clamp(26px, 3.4vw, 40px);
  max-width: 560px;
}

.journey-story__title {
  color: var(--color-2, #102536);
  font-family: Epilogue, sans-serif;
  font-size: clamp(27px, 3.3vw, 44px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin: 12px 0 14px;
  text-transform: none;
}

.journey-story__lead {
  color: #102536b0;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.6;
  margin: 0;
  max-width: 44ch;
}

/* -------- Etapas -------- */

.journey-story__steps {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.6vw, 44px);
  margin: 0;
  padding: 0;
}

.journey-story__step {
  margin: 0;
}

.journey-story__frame {
  background: #ddd6cb;   /* cor média das fotos: a caixa existe antes da imagem */
  border-radius: 16px;
  margin: 0 0 18px;
  overflow: hidden;
  position: relative;
}

/* <picture> nasce display:inline e sem altura definida — o height:100% do
   <img> resolveria contra uma caixa sem altura e a moldura colapsaria.
   Mesma armadilha do viewer do hero (Fase 14) e do mosaico (Fase 15). */
.journey-story__frame picture {
  display: block;
  height: 100%;
  width: 100%;
}

.journey-story__img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.journey-story__kicker {
  align-items: baseline;
  color: #1f5f91;
  display: flex;
  font-size: 12px;
  font-weight: 900;
  gap: 9px;
  letter-spacing: .12em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.journey-story__num {
  /* 4,64:1 sobre o ponto mais escuro do degrade (#efeae1). Com #1f5f9199
     dava 2,59:1 — abaixo de AA para 12px. */
  color: #1f5f91e6;
  font-variant-numeric: tabular-nums;
}

.journey-story__step-title {
  color: var(--color-2, #102536);
  font-family: Epilogue, sans-serif;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.32;
  margin: 0;
  text-transform: none;
}

/* -------- Trilho de progresso --------
   Editorial, não tutorial: um filete e quatro rótulos. Fora do modo preso
   ele não tem função nenhuma, então nem é exibido. */

.journey-story__progress {
  display: none;
}

/* -------- Fechamento -------- */

.journey-story__cta {
  margin: clamp(30px, 3.6vw, 44px) 0 0;
}

/* `a:not(.no-style,.cta_button){color:var(--color-6)}` do tema pesa (0,1,1)
   e pintaria o texto de verde. A classe sozinha empata e perde por ordem;
   com o ancestral, (0,2,0) resolve sem !important. */
.journey-story .journey-story__button {
  align-items: center;
  background: linear-gradient(135deg, #f7d86c, #efbf44);
  border-radius: 100px;
  box-shadow: 0 10px 24px #dfb13e42;
  color: var(--color-2, #102536);
  display: inline-flex;
  font-size: 15px;
  font-weight: 800;
  gap: 10px;
  letter-spacing: .01em;
  line-height: 1;
  padding: 16px 26px;
  text-decoration: none;
  transition: background .25s var(--ease-out, ease), transform .2s var(--ease-out, ease), box-shadow .25s var(--ease-out, ease);
}

.journey-story .journey-story__button:hover,
.journey-story .journey-story__button:focus-visible {
  background: linear-gradient(135deg, #f8de82, #f1c14d);
  box-shadow: 0 14px 30px #dfb13e52;
  transform: translateY(-1px);
}

.journey-story__button svg {
  flex: 0 0 auto;
}

.journey-story__nota {
  /* 5,05:1. Com #10253699 dava 4,01:1, abaixo de AA para 13px. */
  color: #102536ad;
  font-size: 13px;
  line-height: 1.5;
  margin: 14px 0 0;
  max-width: 40ch;
}

/* ==========================================================================
   MODO EDITORIAL LARGO — a partir de 768px, ainda sem prender nada.
   Cada etapa vira uma linha de duas colunas, alternando o lado da foto.
   É este o layout que o tablet, o "sem JS" e o movimento reduzido recebem.
   ========================================================================== */

@media (min-width: 768px) {
  .journey-story__step {
    align-items: center;
    display: grid;
    gap: clamp(22px, 3vw, 40px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .journey-story__step:nth-child(2n) .journey-story__frame {
    order: 2;
  }

  .journey-story__frame {
    aspect-ratio: 16 / 10;
    margin: 0;
  }

  .journey-story__head {
    margin-bottom: clamp(34px, 4vw, 52px);
    max-width: 620px;
  }
}

/* ==========================================================================
   MODO PRESO (journey-scrub) — só entra por JavaScript, só a partir de
   1100px, só com movimento permitido.
   ========================================================================== */

.journey-story.journey-scrub .journey-story__palco {
  /* Altura fixa de pista: é a diferença entre ela e o sticky que vira o
     curso da animação. Com padding no lugar de altura, sobrava um bloco
     branco depois que a composição soltava (medido na Fase 15). */
  height: 300vh;
}

.journey-story.journey-scrub .journey-story__stage {
  align-items: center;
  display: flex;
  /* O cabeçalho do site é sticky e termina em ~150px: a folga tem de partir
     dali, senão o título da seção fica por baixo dele. */
  height: calc(100vh - 158px);
  position: sticky;
  top: 158px;
}

/* Desde a Fase 16.1 existem DOIS `__inner` na seção: o do palco e o do
   rodapé. A grade de duas colunas e a altura cheia valem só para o primeiro —
   sem este escopo, o bloco de destinos e o do Natal Luz herdavam a grade do
   palco e se sobrepunham. */
.journey-story.journey-scrub .journey-story__palco .journey-story__inner {
  display: grid;
  gap: 0;
  /* 50/50 desde o ajuste visual: com 46/54 o texto ficava com 374px úteis
     num título de 40px, e o mosaico ocupava 564px de vão horizontal. O texto
     passa a 432px e o mosaico encolhe — a leitura vem antes da imagem. */
  grid-template-columns: minmax(0, 52%) minmax(0, 48%);
  height: 100%;
}

/* Duas colunas dentro da coluna de texto: o trilho à esquerda, o conteúdo à
   direita. O trilho é um item de grade normal — nada posicionado —, o que
   mantém `__inner` como bloco de contenção das molduras. */
.journey-story.journey-scrub .journey-story__copy {
  align-content: center;
  display: grid;
  grid-column: 1;
  grid-template-areas:
    "trilho cabeca"
    "trilho etapas"
    "trilho fecho";
  grid-template-columns: 100px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 24px;
  min-height: 0;
  /* Espaço negativo entre o fim do texto e a primeira moldura: 144px
     medidos, contra 94px no estado original. */
  padding-right: 36px;
}

.journey-story.journey-scrub .journey-story__head { grid-area: cabeca; }
.journey-story.journey-scrub .journey-story__steps { grid-area: etapas; }
.journey-story.journey-scrub .journey-story__cta { grid-area: fecho; }

.journey-story.journey-scrub .journey-story__head {
  margin-bottom: clamp(18px, 2.2vw, 30px);
}

/* As quatro etapas passam a ocupar a MESMA célula: a caixa fica do tamanho
   da maior e nada pula quando o texto troca. */
.journey-story.journey-scrub .journey-story__steps {
  display: grid;
  gap: 0;
  min-height: 0;
}

.journey-story.journey-scrub .journey-story__step {
  display: block;
  grid-area: 1 / 1;
  min-height: 0;
}

.journey-story.journey-scrub .journey-story__body {
  transition: opacity .28s var(--ease-out, ease);
  will-change: opacity;
}

/* A moldura sai do fluxo e vai para a metade direita. Não há ancestral
   posicionado entre ela e `__inner`, então as porcentagens abaixo são do
   palco inteiro — e por isso a composição nunca transborda, em nenhuma
   altura de janela. */
.journey-story.journey-scrub .journey-story__frame {
  aspect-ratio: auto;
  border-radius: 14px;
  box-shadow: 0 10px 28px #10253617;
  height: var(--jr-h);
  left: var(--jr-l);
  margin: 0;
  position: absolute;
  top: var(--jr-t);
  width: var(--jr-w);
  z-index: var(--jr-z, 1);
}

/* Véu sobre as peças que não são a etapa corrente. Transição no CSS, classe
   no JS: o laço de rolagem escreve só opacity/translate/scale, que são
   propriedades compostas. */
.journey-story.journey-scrub .journey-story__frame::after {
  background: #0d1f2e;
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: .42;
  pointer-events: none;
  position: absolute;
  transition: opacity .4s var(--ease-out, ease);
}

.journey-story.journey-scrub .journey-story__step.is-ativa .journey-story__frame::after,
.journey-story.journey-scrub.is-assentada .journey-story__frame::after {
  opacity: 0;
}

.journey-story.journey-scrub .journey-story__step.is-ativa .journey-story__frame {
  box-shadow: 0 16px 38px #10253626;
}

/* -------- Composição do modo B: quatro peças em cascata --------
   Descida em zigue-zague: aeroporto no alto, veículo no meio (duas peças),
   destino embaixo. É o estado final do briefing, e é o estado padrão desta
   folha assim que o modo preso entra. */

/* Ajuste visual — o desequilíbrio era VERTICAL, e foi medido: a cascata
   ocupava 92% da altura do palco (691px) contra 463px do bloco de texto, ou
   seja, era 49% mais alta e envolvia o texto por cima e por baixo.

   A cascata passou a ocupar 75,5% da altura, centrada no mesmo eixo do texto,
   e as peças encolheram de 29% para 25% da largura. Com isso o mosaico fica
   MAIS ESTREITO que a coluna de texto e só um pouco mais alto, em vez de 49%.

   A conta da cascata: extensão = 3 × passo + altura. Para encurtar a extensão
   sem empilhar as peças umas sobre as outras, o caminho é diminuir a altura,
   não o passo — por isso as peças encolheram junto. */
.journey-story[data-journey-modo="b"].journey-scrub .journey-story__step:nth-child(1) .journey-story__frame { --jr-l: 61%; --jr-t: 12.5%; --jr-w: 25%; --jr-h: 23%; --jr-z: 1; }
.journey-story[data-journey-modo="b"].journey-scrub .journey-story__step:nth-child(2) .journey-story__frame { --jr-l: 67%; --jr-t: 30%;   --jr-w: 25%; --jr-h: 22%; --jr-z: 2; }
.journey-story[data-journey-modo="b"].journey-scrub .journey-story__step:nth-child(3) .journey-story__frame { --jr-l: 62%; --jr-t: 47.5%; --jr-w: 25%; --jr-h: 22%; --jr-z: 3; }
.journey-story[data-journey-modo="b"].journey-scrub .journey-story__step:nth-child(4) .journey-story__frame { --jr-l: 68%; --jr-t: 65%;   --jr-w: 25%; --jr-h: 23%; --jr-z: 4; }

/* -------- Composição do modo A: uma moldura só --------
   As quatro fotos ocupam exatamente a mesma caixa e se sucedem nela. */

.journey-story[data-journey-modo="a"].journey-scrub .journey-story__frame {
  /* Caixa deitada, próxima do 16:9 das fotos: numa moldura só, o corte
     agressivo de um retrato apareceria em cheio. */
  --jr-l: 51%; --jr-t: 26%; --jr-w: 47%; --jr-h: 46%;
  box-shadow: 0 22px 60px #1025362e;
}

.journey-story[data-journey-modo="a"].journey-scrub .journey-story__step:nth-child(1) .journey-story__frame { --jr-z: 1; }
.journey-story[data-journey-modo="a"].journey-scrub .journey-story__step:nth-child(2) .journey-story__frame { --jr-z: 2; }
.journey-story[data-journey-modo="a"].journey-scrub .journey-story__step:nth-child(3) .journey-story__frame { --jr-z: 3; }
.journey-story[data-journey-modo="a"].journey-scrub .journey-story__step:nth-child(4) .journey-story__frame { --jr-z: 4; }

/* No modo A a peça inativa não leva véu: ela simplesmente não está visível.
   Véu numa moldura única deixaria a foto suja durante toda a travessia. */
.journey-story[data-journey-modo="a"].journey-scrub .journey-story__frame::after {
  opacity: 0;
}

/* -------- Trilho de progresso, só no modo preso -------- */

.journey-story.journey-scrub .journey-story__progress {
  align-self: center;
  display: grid;
  gap: 0;
  grid-area: trilho;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  position: relative;
}

.journey-story.journey-scrub .journey-story__progress::before {
  background: #10253622;
  content: "";
  inset: 6px auto 6px 3px;
  position: absolute;
  width: 1px;
}

/* A linha que preenche. A altura vem de --jr-progresso, escrita pelo JS. */
.journey-story.journey-scrub .journey-story__progress::after {
  background: linear-gradient(180deg, #1f5f91, #2f8a68);
  content: "";
  height: calc(var(--jr-progresso, 0) * (100% - 12px));
  left: 3px;
  position: absolute;
  top: 6px;
  width: 1px;
}

.journey-story__progress-item {
  align-items: center;
  white-space: nowrap;
  /* 5,05:1. A hierarquia entre etapa corrente e as demais fica por conta do
     peso da cor cheia, da bolinha preenchida e da escala — nao de um cinza
     ilegivel: #10253666 dava 2,34:1. */
  color: #102536ad;
  display: flex;
  font-size: 10.5px;
  font-weight: 800;
  gap: 10px;
  letter-spacing: .14em;
  line-height: 1;
  padding: 9px 0;
  position: relative;
  text-transform: uppercase;
  transition: color .3s var(--ease-out, ease);
}

/* O tema numera QUALQUER <ol> por `ol:not(.no-style,…) li:before`, com
   `content: counter(i) "."` e `left:-20px`. Esse seletor pesa (0,1,3) — mais
   que uma classe sozinha —, então a bolinha do trilho precisa de (0,3,1)
   para existir. Mesma aritmética que resolveu os selos da frota na Fase 15. */
.journey-story .journey-story__progress .journey-story__progress-item::before {
  content: "";
  left: auto;
  position: static;
  top: auto;
}

.journey-story__progress-item::before {
  background: #fff;
  border: 1px solid #10253630;
  border-radius: 50%;
  content: "";
  flex: 0 0 auto;
  height: 7px;
  margin-left: -.5px;
  transition: background .3s var(--ease-out, ease), border-color .3s var(--ease-out, ease), scale .3s var(--ease-out, ease);
  width: 7px;
}

.journey-story__progress-item.is-ativa {
  color: var(--color-2, #102536);
}

.journey-story__progress-item.is-ativa::before {
  background: #1f5f91;
  border-color: #1f5f91;
  scale: 1.3;
}

.journey-story__progress-num {
  font-variant-numeric: tabular-nums;
  opacity: .55;
}

.journey-story__progress-item.is-ativa .journey-story__progress-num {
  opacity: 1;
}

/* -------- CTA no modo preso --------
   Só aparece quando a composição assenta. Antes disso ele não some do DOM,
   apenas não está visível — e volta a existir integralmente se o JS cair. */

.journey-story.journey-scrub .journey-story__cta {
  margin-top: clamp(20px, 2.4vw, 32px);
  min-height: 52px;
}

.journey-story.journey-scrub .journey-story__nota {
  transition: opacity .35s var(--ease-out, ease);
}

/* -------- No modo preso o kicker de cada etapa some: o trilho já numera.
   Fora dele o kicker é a única numeração, e continua visível. -------- */

.journey-story.journey-scrub .journey-story__num {
  display: none;
}

/* Janela baixa: com menos de 760px de altura a coluna de texto fica
   apertada. Encolhe o título e o respiro antes de deixar cortar. */
@media (min-width: 1100px) and (max-height: 780px) {
  .journey-story.journey-scrub .journey-story__title {
    font-size: clamp(24px, 2.4vw, 30px);
  }

  .journey-story.journey-scrub .journey-story__lead {
    font-size: 15px;
  }

  .journey-story.journey-scrub .journey-story__head {
    margin-bottom: 18px;
  }

  .journey-story.journey-scrub .journey-story__step-title {
    font-size: 18px;
  }

  .journey-story.journey-scrub .journey-story__progress-item {
    padding: 7px 0;
  }
}

/* ==========================================================================
   ARMAR / MOVIMENTO
   `journey-armed` no <html> é o que autoriza o estado inicial. Sem ele —
   sem JS, com movimento reduzido, ou depois que a cena assenta — não sobra
   nenhuma regra de opacidade pendurada.
   ========================================================================== */

/* Modo editorial: cada etapa chega em vez de aparecer de supetão. O estado
   inicial só existe sob `journey-armed`, que o JS só acrescenta depois de
   confirmar que tem IntersectionObserver para desfazê-lo. */
.journey-armed .journey-story:not(.journey-scrub) .journey-story__step {
  opacity: 0;
  transition: opacity .62s var(--ease-out, ease), translate .62s var(--ease-out, ease);
  translate: 0 20px;
}

.journey-armed .journey-story:not(.journey-scrub) .journey-story__step.is-revelada {
  opacity: 1;
  translate: 0 0;
}

.journey-armed .journey-story.journey-scrub .journey-story__frame {
  will-change: opacity, transform;
}

.journey-armed .journey-story.journey-scrub .journey-story__body {
  will-change: opacity;
}

/* `will-change` permanente custa memória de composição à toa. A classe
   `jr-moving` só existe enquanto a cena se move. */
html:not(.jr-moving) .journey-story.journey-scrub .journey-story__frame,
html:not(.jr-moving) .journey-story.journey-scrub .journey-story__body {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .journey-story__body,
  .journey-story__frame,
  .journey-story__nota,
  .journey-story__button {
    transition: none !important;
  }
}

/* ==========================================================================
   FASE 16.1 — RODAPÉ DA SUPERSEÇÃO

   Depois que o scrollytelling termina e a seção volta ao fluxo normal vem o
   que a antiga seção de destinos carregava: a geografia atendida, os links
   internos e o evento em destaque.

   Deliberadamente compacto. O impacto visual já aconteceu na cascata; aqui
   o trabalho é informação e navegação — nenhum mosaico novo, nenhuma
   segunda animação conduzida por scroll.
   ========================================================================== */

.journey-story__rodape {
  padding: clamp(40px, 5vw, 68px) 0 0;
  position: relative;
}

/* -------- Principais destinos e rotas -------- */

.journey-rotas__titulo {
  color: var(--color-2, #102536);
  font-family: Epilogue, sans-serif;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 0 0 clamp(16px, 2vw, 22px);
  text-transform: none;
}

/* Microcards sem foto: nome do destino e a nota que a peça do mosaico
   carregava. `no-style` desarma a marcação decorativa que o tema aplica a
   qualquer <li>. */
.journey-rotas__destinos {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  list-style: none;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  padding: 0;
}

.journey-story .journey-rotas__destinos li {
  background: #ffffffb8;
  border: 1px solid #10253614;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  letter-spacing: normal;
  margin: 0;
  padding: 12px 14px;
  position: relative;
}

/* O tema desenha um losango antes de todo <li>; aqui não há lista com
   marcador, são cartões. */
.journey-story .journey-rotas__destinos li::before {
  content: none;
}

.journey-rotas__local {
  color: var(--color-2, #102536);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.journey-rotas__nota {
  color: #102536ad;   /* 5,05:1 sobre o fundo da seção */
  font-size: 12.5px;
  line-height: 1.35;
}

/* -------- Links internos — preservados da seção antiga -------- */

.journey-rotas__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
}

.journey-story .journey-rotas__links a {
  align-items: center;
  color: #1f5f91;              /* 5,65:1 */
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 7px;
  letter-spacing: -.01em;
  line-height: 1.3;
  /* alvo de toque confortável sem empurrar o layout */
  padding: 7px 0;
  text-decoration: none;
  transition: color .2s var(--ease-out, ease);
}

.journey-story .journey-rotas__links a:hover,
.journey-story .journey-rotas__links a:focus-visible {
  color: #163f61;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.journey-story .journey-rotas__links a svg {
  flex: 0 0 auto;
  transition: translate .2s var(--ease-out, ease);
}

.journey-story .journey-rotas__links a:hover svg {
  translate: 3px 0;
}

/* -------- Evento em destaque — Natal Luz -------- */

.journey-evento {
  align-items: center;
  background: #ffffffcc;
  border: 1px solid #10253614;
  border-radius: 20px;
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  grid-template-columns: 1fr;
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  overflow: hidden;
  padding: 0;
}

.journey-evento__media {
  background: #dfd8cd;
  margin: 0;
  overflow: hidden;
  /* Enquadramento aprovado na Fase 15: nada de faixa esmagada. */
  aspect-ratio: 16 / 9;
}

.journey-evento__media picture {
  display: block;
  height: 100%;
  width: 100%;
}

.journey-evento__img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.journey-evento__copy {
  padding: 0 clamp(18px, 2.2vw, 26px) clamp(22px, 2.6vw, 28px);
}

.journey-evento__eyebrow {
  /* 5,43:1 sobre o fundo do card. O token do tema (--color-8, #b65a3a) dava
     4,49:1 — um centésimo abaixo de AA para 11,5px. */
  color: #a54e30;
  display: block;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .14em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.journey-evento__titulo {
  color: var(--color-2, #102536);
  font-family: Epilogue, sans-serif;
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.22;
  margin: 0 0 10px;
  text-transform: none;
}

.journey-evento__texto {
  color: #102536b8;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 52ch;
}

.journey-story .journey-evento__cta {
  align-items: center;
  color: #1f5f91;
  display: inline-flex;
  font-size: 14.5px;
  font-weight: 800;
  gap: 8px;
  letter-spacing: -.01em;
  line-height: 1.2;
  padding: 8px 0;
  text-decoration: none;
  transition: color .2s var(--ease-out, ease);
}

.journey-story .journey-evento__cta:hover,
.journey-story .journey-evento__cta:focus-visible {
  color: #163f61;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.journey-story .journey-evento__cta svg {
  flex: 0 0 auto;
  transition: translate .2s var(--ease-out, ease);
}

.journey-story .journey-evento__cta:hover svg {
  translate: 3px 0;
}

@media (min-width: 768px) {
  .journey-evento {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  }

  .journey-evento__media {
    aspect-ratio: 4 / 3;
    height: 100%;
  }

  .journey-evento__copy {
    padding: clamp(24px, 2.6vw, 32px) clamp(26px, 2.8vw, 34px) clamp(24px, 2.6vw, 32px) 0;
  }
}

/* -------- Saída para o seguro --------
   A seção seguinte é o painel azul-escuro do seguro, que está congelado. A
   passagem é preparada aqui, do lado de fora: o degradê da superseção fecha
   escurecendo de leve em vez de voltar ao branco, e um respiro maior separa
   os dois blocos. Nada dentro de #seguro-viagem é tocado. */

.journey-story {
  padding-bottom: clamp(64px, 7vw, 100px);
}

.journey-story::after {
  background: linear-gradient(180deg, #0d1f2e00, #0d1f2e14);
  bottom: 0;
  content: "";
  height: clamp(60px, 7vw, 96px);
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/* ==========================================================================
   FASE 16.2 — VÍDEO NAS ETAPAS 01 E 02

   O <video> ocupa exatamente a caixa que a foto ocupava. O `poster` é o
   estado padrão: sem JS, com movimento reduzido ou antes de a seção se
   aproximar, é ele que aparece — e é um frame do próprio vídeo, então a
   passagem de poster para reprodução não tem corte.
   ========================================================================== */

.journey-story__video {
  background: #ddd6cb;
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

/* O Chrome desenha o poster com `object-fit` próprio; sem isto ele aparece
   contido em vez de cobrir, e sobram faixas nas laterais. */
.journey-story__video[poster] {
  object-fit: cover;
}

/* Sem JavaScript o poster nunca é materializado, e quem aparece é o <img>
   do <noscript>. O <video> vazio ao lado dele duplicaria a caixa, então
   fica escondido — e volta a aparecer assim que o JS se anuncia.
   Especificidade: (0,2,0) para a regra que esconde, (0,3,1) para a que
   devolve, então a ordem entre elas não importa. */
.journey-story__video[data-poster] {
  display: none;
}
html.jr-js .journey-story__video[data-poster] {
  display: block;
}

/* ==========================================================================
   FASE 16.2 — LINHA DE PERCURSO (SVG)

   Um traço vertical com uma leve ondulação ligando os quatro nós do trilho.
   Não é mapa: não há coordenada, cidade nem ícone. É o gesto de "existe um
   caminho entre estas quatro etapas".

   A linha é SVG; os NÓS continuam sendo as bolinhas do trilho, em CSS. Essa
   divisão é o que permite esticar o SVG na vertical com
   `preserveAspectRatio="none"` sem deformar nada: a espessura do traço fica
   fixa por `vector-effect` e os nós, por serem CSS, não são escalados.
   ========================================================================== */

.journey-story__rota {
  display: none;
}

.journey-story.journey-scrub[data-journey-rota="1"] .journey-story__rota {
  bottom: 6px;
  display: block;
  left: 0;
  position: absolute;
  top: 6px;
  width: 24px;
}

/* O traço de fundo é o percurso inteiro, quase apagado: dá a leitura de
   "ainda falta caminho" sem competir com nada. */
.journey-story__rota-base {
  color: #10253626;
}

/* O traço que preenche. `--jr-rota` vai de 0 a 1 e é escrito pelo laço. */
.journey-story__rota-linha {
  color: #1f5f91;
  stroke-dasharray: var(--jr-rota-len, 200);
  stroke-dashoffset: calc(var(--jr-rota-len, 200) * (1 - var(--jr-rota, 0)));
}

/* Com a linha do SVG no lugar, o filete e o preenchimento em CSS saem de
   cena — senão ficam dois traços sobrepostos. */
.journey-story.journey-scrub[data-journey-rota="1"] .journey-story__progress::before,
.journey-story.journey-scrub[data-journey-rota="1"] .journey-story__progress::after {
  content: none;
}

/* Os nós ganham um anel quando a etapa é a corrente: é o que marca o ponto
   no percurso sem acrescentar ícone nenhum. */
.journey-story[data-journey-rota="1"] .journey-story__progress-item.is-ativa::before {
  box-shadow: 0 0 0 3px #1f5f9126;
}

@media (prefers-reduced-motion: reduce) {
  .journey-story__rota-linha {
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   FASE 16.2 — REVEAL POR CLIP-PATH

   A peça nasce levemente recolhida por dentro e resolve para a caixa cheia.
   O objetivo é "a imagem se forma", não "olhe esta máscara": o recorte
   máximo é de 6% na vertical e 5% na horizontal, com o mesmo raio de canto
   da moldura. Sem cortina, sem wipe, sem círculo, sem diagonal.

   `--jr-clip` vai de 1 (recolhido) a 0 (resolvido), escrito pelo laço.
   ========================================================================== */

.journey-story.journey-scrub[data-journey-clip="1"] .journey-story__frame {
  clip-path: inset(
    calc(var(--jr-clip, 0) * 6%)
    calc(var(--jr-clip, 0) * 5%)
    round 14px
  );
}

@media (prefers-reduced-motion: reduce) {
  .journey-story.journey-scrub[data-journey-clip="1"] .journey-story__frame {
    clip-path: none;
  }
}