/* Imersões */
.auvp-dest__head {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-bottom: clamp(1.5rem, 2.8vw, 2.5rem);
}
/* Dois destinos, dois cards — maiores, porque agora carregam a
   chamada inteira na frente. */
/* Sem `align-items: start`: com ele, cada card tinha a própria altura —
   o de Próximos destinos crescia até caber o formulário do verso e o da
   China ficava no mínimo. Eram dois cards de alturas diferentes lado a
   lado, e a diferença mudava de monitor para monitor, porque o
   formulário quebra em mais ou menos linhas conforme a largura. No
   esticado (o padrão da grade) os dois sempre têm a altura da linha, que
   é a do mais alto: iguais em qualquer tela, e sem rolagem por dentro. */
.auvp-dest__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.4rem);
}
/* Grade de uma célula só, para o card repassar a altura da linha ao
   flip — que é quem desenha. */
.auvp-card { display: grid; }

/* Dois cards com o mesmo desenho e destinos diferentes: o da China é um
   link inteiro para a página da missão; o de Próximos destinos gira e
   mostra o formulário no verso. O giro mora num checkbox escondido, com
   os <label> por cima — o mesmo recurso das abas da dobra Experiência,
   sem JavaScript. */
.auvp-card { perspective: 1600px; }

/* O mínimo é o piso do card quando o conteúdo é curto; quem manda acima
   dele é a altura da linha da grade, igual para os dois.

   O teto entrou com os aceites legais: o formulário passou de 900px, e
   sem limite a dobra inteira ficava maior que a tela — com o card da
   China crescendo junto, virando uma foto gigante de puro enchimento.
   Com teto, quem cede é o verso, que rola por dentro (o `overflow-y`
   mais abaixo); a frente é foto e não muda. Numa coluna só o teto sai:
   lá os cards ficam empilhados e quem rola é a página, que é melhor que
   rolar dentro de um card no celular. */
.auvp-card__flip {
  position: relative;
  display: grid;
  min-height: clamp(460px, 68vh, 660px);
  max-height: min(86vh, 820px);
  transform-style: preserve-3d;
  transition: transform 0.85s var(--ease);
}
.auvp-card__gatilho:checked ~ .auvp-card__flip { transform: rotateY(180deg); }
/* O checkbox continua alcançável pelo teclado (é .auvp-sr, não
   display:none), então o foco precisa aparecer em algum lugar. */
.auvp-card__gatilho:focus-visible ~ .auvp-card__flip {
  outline: 2px solid var(--verde);
  outline-offset: 4px;
}

.auvp-card__frente,
.auvp-card__verso {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--line-soft);
}
.auvp-card__frente {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 2.2vw, 2.4rem);
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
}
.auvp-card__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.auvp-card__media img { transition: transform 1.4s var(--ease); }
.auvp-card:hover .auvp-card__media img { transform: scale(1.07); }
.auvp-card__frente::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(28,27,24,0.94) 30%, rgba(28,27,24,0.55) 62%, rgba(28,27,24,0) 100%);
}
.auvp-card__title { font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 1; margin-bottom: 0.55rem; }
.auvp-card__sub {
  font-size: var(--fs-small);
  color: var(--paper);
  line-height: 1.4;
  margin-bottom: 0.75rem;
}
/* Descrição e chamada ficam sempre visíveis. Antes só apareciam no
   hover, o que deixava o toque sem saída: no celular não há hover e o
   card não anunciava que virava. */
.auvp-card__desc {
  font-size: var(--fs-small);
  color: rgba(247, 245, 241, 0.82);
  max-width: 38ch;
  line-height: 1.65;
}
.auvp-card__cta,
.auvp-card__voltar {
  display: inline-flex; align-items: center; gap: 0.7rem;
  align-self: flex-start;
  cursor: pointer;
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: gap 0.4s var(--ease);
}
.auvp-card__cta {
  margin-top: clamp(1.25rem, 2vw, 1.9rem);
  padding: 0.85em 1.5em;
  border: 1px solid rgba(247, 245, 241, 0.5);
  color: var(--paper);
}
.auvp-card__cta:hover,
.auvp-card__frente:hover .auvp-card__cta { gap: 1.1rem; border-color: var(--paper); }

.auvp-card__verso {
  transform: rotateY(180deg);
  display: grid;
  align-content: start;
  gap: 1.35rem;
  padding: clamp(1.5rem, 2.2vw, 2.4rem);
  background: var(--paper-2);
  overflow-y: auto;
}
.auvp-card__verso h4 { font-size: 1.15rem; }
.auvp-card__verso p { font-size: var(--fs-small); color: var(--ink-60); line-height: 1.7; }
.auvp-card__voltar { color: var(--verde); margin-top: 0.5rem; }
.auvp-card__voltar:hover { gap: 1.1rem; }

/* Depois do envio sobra só o agradecimento dentro do card, e o card
   continua com a altura da linha da grade. Alinhado ao topo, ele ficava
   pendurado com meia altura de vazio embaixo; no meio, o card inteiro
   vira a confirmação. O "Voltar" acompanha o centro para a coluna não
   ficar torta. Sem suporte a `:has()` fica tudo como antes, no topo —
   que é feio, não quebrado. */
.auvp-card__verso:has(.auvp-form__recibo) { align-content: center; }
.auvp-card__verso:has(.auvp-form__recibo) .auvp-card__voltar { justify-self: center; }

@media (max-width: 860px) {
  /* Numa coluna só os dois ficam empilhados, não lado a lado: não há
     comparação a fazer, e cada um volta a ter a altura do que carrega. */
  .auvp-dest__grid { grid-template-columns: 1fr; }
  .auvp-card__flip { min-height: clamp(420px, 76vh, 560px); max-height: none; }
}