/* Missão China
   Estilos exclusivos da página missao-china.html. Todo o resto vem dos
   arquivos compartilhados (01 a 06, 15, 16 e 17) — esta folha só entra
   nessa página e não afeta a home. */

/* ---- Abertura ----
   Título e frase no papel, sem faixa de foto: a que havia era a foto da
   home repetida, e empurrava o mosaico — imagem de verdade desta
   viagem — para baixo da dobra. */
.auvp-capa__texto {
  text-align: center;
  /* O `var(--nav-h)` no respiro de cima não é enfeite: a barra do topo
     puxa o conteúdo seguinte para baixo dela com uma margem negativa de
     uma altura de barra. Sem somar essa altura aqui, o respiro era
     engolido inteiro e o título encostava na barra. */
  padding-block: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem)) clamp(1.75rem, 4vw, 3rem);
}
.auvp-capa__title {
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.auvp-capa__lede {
  max-width: 46ch;
  margin: clamp(1.25rem, 2.4vw, 1.75rem) auto 0;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-60);
}

/* ---- Mosaico de fotos ----
   Cada quadro fica parado e troca a foto por dentro, com fade — não é
   uma esteira rolando. As fotos de um quadro ficam empilhadas no mesmo
   lugar e só a opacidade se alterna. Quantas são, o quadro diz na
   classe: --quarteto, --duo, ou nada para três. */
.auvp-mosaico {
  --ciclo: 16s;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.4rem, 0.8vw, 0.75rem);
  background: var(--paper-2);
}
.auvp-mosaico__quadro {
  position: relative;
  height: clamp(300px, 46vh, 520px);
  overflow: hidden;
}
.auvp-mosaico__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: auvp-troca var(--ciclo) linear infinite;
}
/* Cada quadro anda no seu passo, senão as três colunas trocam de foto
   ao mesmo tempo e o conjunto pisca como um bloco só.

   O passo é o --ciclo do quadro, não um animation-duration à parte: os
   atrasos abaixo são frações de --ciclo, e se a duração fosse alterada
   por fora, atraso e duração deixariam de bater. Quando isso acontecia,
   as fotos de um quadro paravam de se sobrepor e abria um piscar de
   fundo entre uma e a seguinte. */
.auvp-mosaico__quadro--2 { --ciclo: 20s; }
.auvp-mosaico__quadro--3 { --ciclo: 18s; }

/* Três fotos: cada uma fica um terço do ciclo no ar. É o padrão — um
   quadro sem classe de quantidade cai aqui. */
.auvp-mosaico__foto--1 { animation-delay: 0s; }
.auvp-mosaico__foto--2 { animation-delay: calc(var(--ciclo) / -3); }
.auvp-mosaico__foto--3 { animation-delay: calc(var(--ciclo) / -3 * 2); }
@keyframes auvp-troca {
  0%   { opacity: 1; }
  28%  { opacity: 1; }
  36%  { opacity: 0; }
  92%  { opacity: 0; }
  100% { opacity: 1; }
}

/* Duas fotos: metade do ciclo cada, com a janela de exibição maior. As
   bordas de fade continuam se sobrepondo, que é o que evita o piscar. */
.auvp-mosaico__quadro--duo .auvp-mosaico__foto { animation-name: auvp-troca-duo; }
.auvp-mosaico__quadro--duo .auvp-mosaico__foto--2 { animation-delay: calc(var(--ciclo) / -2); }
@keyframes auvp-troca-duo {
  0%   { opacity: 1; }
  44%  { opacity: 1; }
  52%  { opacity: 0; }
  92%  { opacity: 0; }
  100% { opacity: 1; }
}

/* Quatro fotos: um quarto do ciclo cada. Mesma regra dos outros dois
   casos — o atraso divide o ciclo em partes iguais e a janela de
   exibição encolhe na mesma proporção, com as bordas de fade ainda se
   sobrepondo. O ciclo do quadro cresce junto (16s e 20s), senão cada
   foto passaria depressa demais para ser vista. */
.auvp-mosaico__quadro--quarteto .auvp-mosaico__foto { animation-name: auvp-troca-quarteto; }
.auvp-mosaico__quadro--quarteto .auvp-mosaico__foto--2 { animation-delay: calc(var(--ciclo) / -4); }
.auvp-mosaico__quadro--quarteto .auvp-mosaico__foto--3 { animation-delay: calc(var(--ciclo) / -4 * 2); }
.auvp-mosaico__quadro--quarteto .auvp-mosaico__foto--4 { animation-delay: calc(var(--ciclo) / -4 * 3); }
@keyframes auvp-troca-quarteto {
  0%   { opacity: 1; }
  20%  { opacity: 1; }
  28%  { opacity: 0; }
  92%  { opacity: 0; }
  100% { opacity: 1; }
}

/* Bloco de cor logo abaixo das fotos, sem respiro entre os dois. */
.auvp-registro__texto {
  background: var(--verde);
  color: var(--paper);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.auvp-relato {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3.5rem);
}
.auvp-relato__item h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.25;
  margin-bottom: 0.9rem;
  color: var(--paper);
}
.auvp-relato__item p {
  font-size: var(--fs-small);
  line-height: 1.75;
  color: rgba(247, 245, 241, 0.86);
}

@media (max-width: 900px) {
  .auvp-mosaico__quadro { height: clamp(200px, 30vh, 300px); }
  .auvp-relato { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---- No celular, foto e texto alternados ----
   Em tela larga são duas faixas: três fotos em cima, três relatos no
   bloco verde embaixo. Num celular as três fotos viravam colunas de
   ~126px — mais altas que largas por um fator de dois, com gente cortada
   pela metade — e os três relatos caíam todos juntos num paredão verde.

   Aqui as duas faixas viram uma coluna só, alternando: foto, relato,
   foto, relato, foto, relato. Cada foto ocupa a largura inteira e cada
   relato vem logo abaixo da sua.

   Como o mosaico e o bloco de texto são irmãos no HTML — e precisam
   continuar sendo, que é o que desenha as duas faixas no desktop —, quem
   intercala é o `display: contents`: os invólucros somem da caixa e os
   seis filhos viram itens diretos da dobra, aí o `order` alterna. O verde
   e o gutter, que eram do invólucro, passam para cada relato. */
@media (max-width: 720px) {
  .auvp-registro { display: flex; flex-direction: column; }
  .auvp-mosaico,
  .auvp-registro__texto,
  .auvp-registro__texto > .auvp-shell,
  .auvp-relato { display: contents; }

  .auvp-mosaico__quadro--1 { order: 1; }
  .auvp-relato__item:nth-child(1) { order: 2; }
  .auvp-mosaico__quadro--2 { order: 3; }
  .auvp-relato__item:nth-child(2) { order: 4; }
  .auvp-mosaico__quadro--3 { order: 5; }
  .auvp-relato__item:nth-child(3) { order: 6; }

  /* A foto agora tem a largura toda: a altura vem da proporção, não de
     um clamp, senão o retrato esticado volta em telas mais largas. */
  .auvp-mosaico__quadro { height: auto; aspect-ratio: 4 / 3; }

  /* O verde e o respiro lateral eram do invólucro, que deixou de existir
     como caixa. Sem intervalo entre um relato e a foto seguinte, as
     faixas se encostam e a alternância lê como uma peça só. */
  .auvp-relato__item {
    background: var(--verde);
    padding: clamp(1.5rem, 6vw, 2.25rem) var(--gutter);
  }
}

/* ---- Números da viagem ----
   Cada número centralizado sobre o próprio rótulo, sem as linhas que
   separavam as colunas. */
.auvp-placar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.auvp-placar__item { padding-block: clamp(1rem, 2vw, 1.5rem); }
.auvp-placar__n {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--verde);
}
.auvp-placar__rot {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
}
@media (max-width: 760px) { .auvp-placar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Dobra do vídeo ----
   Texto e player lado a lado. Na largura inteira, um 16:9 ocupava uma
   tela sozinho e a dobra virava só o vídeo. */
.auvp-video__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.auvp-video__head { display: grid; gap: 1.25rem; align-content: center; }
.auvp-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.auvp-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 860px) { .auvp-video__grid { grid-template-columns: 1fr; } }

/* ---- Canton Fair ---- */
.auvp-canton { background: var(--paper-2); border-block: 1px solid var(--line-soft); }

/* Título e os dois parágrafos de fato ficam ao lado do mapa — é ele que
   ilustra o "acontece em Guangzhou". O argumento vem depois, na largura
   inteira, onde ganha peso. */
.auvp-canton__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.auvp-canton__intro { display: grid; gap: 1.35rem; align-content: start; }
.auvp-canton__intro .auvp-title { margin-bottom: 0.5rem; }
.auvp-canton__intro p { color: var(--ink-60); }

/* O fecho atravessa a largura inteira em duas colunas: a virada de um
   lado, a explicação do outro. Empilhado, deixava metade da dobra vazia
   ao lado do mapa. */
.auvp-canton__fecho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-soft);
}
.auvp-canton__fecho p { color: var(--ink-60); max-width: 54ch; }
/* A virada do argumento — de preço para repertório — ganha peso de
   citação para não passar como mais um parágrafo. */
.auvp-canton__fecho .auvp-canton__virada {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  border-left: 2px solid var(--verde);
  padding-left: clamp(1rem, 1.8vw, 1.6rem);
}

/* ---- Mapa ----
   O mapa é o assets/img/china.svg; o cinza mora no próprio arquivo, para
   não haver duas cópias dos contornos. A logo é um elemento por cima,
   posicionado em porcentagem sobre o desenho. */
.auvp-mapa { position: relative; margin: 0; }
.auvp-mapa__img { width: 100%; height: auto; display: block; }

.auvp-mapa__marca {
  position: absolute;
  left: 68%;
  top: 86%;
  width: clamp(52px, 11%, 96px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 12px rgba(28, 27, 24, 0.35));
}
.auvp-mapa__logo {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 50% 50%;
  animation: auvp-girar 18s linear infinite;
}
/* Giro lento para a esquerda, sem sair do lugar: quem posiciona é o
   invólucro, quem gira é a imagem. */
@keyframes auvp-girar { to { transform: rotate(-360deg); } }

@media (max-width: 860px) {
  .auvp-canton__grid { grid-template-columns: 1fr; }
  .auvp-canton__fecho { grid-template-columns: 1fr; }
  .auvp-mapa { max-width: 460px; margin-inline: auto; }
}

/* ---- Chamada final e formulário ---- */
.auvp-jornada__head { text-align: center; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.auvp-jornada__title { font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.08; max-width: 20ch; margin-inline: auto; }
/* O painel é o verso do card de Próximos destinos, na home, repetido
   aqui: mesma largura útil, mesmo papel de um tom mais escuro, mesma
   borda fina, mesmo respiro por dentro e mesmo intervalo entre as
   perguntas — por isso os valores abaixo repetem os do
   `.auvp-card__verso` no 09-imersoes.css. Mexeu num, mexa no outro.

   Aqui já morou outro formulário, com sete perguntas em duas colunas, e
   é de lá que vinha a largura de 1040px. Com as duas perguntas de agora,
   uma coluna estreita é o certo — e é o que faz os dois parecerem a
   mesma peça. */
.auvp-jornada__form {
  /* 640px é a largura que o verso do card tem numa tela de 1440 — o
     painel de lá é fração da grade, então não há um número que bata em
     toda largura; este é o que bate onde a maioria vê. */
  max-width: 640px;
  margin-inline: auto;
  display: grid;
  align-content: start;
  gap: 1.35rem;
  padding: clamp(1.5rem, 2.2vw, 2.4rem);
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
}
.auvp-jornada__chamada {
  font-size: var(--fs-small);
  color: var(--ink-60);
  line-height: 1.7;
}