/* ==========================================================================
   FB VIAGENS — Seções
   Uma regra por seção da página, na ordem em que ela aparece.
   ========================================================================== */

/* ==========================================================================
   1. Sobre / manifesto
   ========================================================================== */

.sobre {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-lift) 100%);
  color: var(--ivory);
}

.sobre .secao-topo {
  margin-bottom: clamp(40px, 5vw, 72px);
}

/* A abertura editorial: a frase grande à esquerda, o apoio à direita,
   separados por um filete. É o respiro entre o herói e os valores. */
.sobre__abertura {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--hairline-on-ink);
  margin-bottom: clamp(56px, 7vw, 96px);
}

.sobre__abertura .prosa p {
  color: var(--ivory-78);
}

/* O manifesto faz o papel de título desta seção, então herda o respiro que
   o rótulo pede em todas as outras. */
.sobre__abertura .eyebrow + .manifesto {
  margin-top: var(--s-5);
}

@media (max-width: 900px) {
  .sobre__abertura {
    grid-template-columns: 1fr;
  }
}

/* A abertura editorial: uma frase grande em Fraunces, que é o que
   sustenta a página quando não há fotografia. */
.manifesto {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.48;
  letter-spacing: -0.005em;
  color: var(--ivory);
  max-width: 26ch;
  text-wrap: pretty;
}

.manifesto .acento {
  color: var(--gold-lit);
}

/* ==========================================================================
   2. Destinos
   ========================================================================== */

.destinos {
  background: var(--ink);
  color: var(--ivory);
}

/* Trilho horizontal. O arraste nativo resolve o toque; as setas resolvem
   o ponteiro; o teclado é atendido porque cada cartão é focável. */
/* O trilho sangra até a borda da janela e devolve o respiro em `padding`,
   para os cartões alinharem com a coluna de conteúdo parados no começo. Mas
   o encaixe não sabe do padding: ele alinha ao início da área rolável, o que
   puxaria o primeiro cartão para fora da margem e deixaria o trilho parado a
   64px do início — com a seta "anterior" acesa sem ter para onde voltar. O
   `scroll-padding` corrige o encaixe, o foco por teclado e a posição de
   repouso de uma vez só. */
.trilho {
  display: flex;
  gap: clamp(16px, 1.8vw, 26px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  padding-bottom: var(--s-2);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.trilho::-webkit-scrollbar {
  display: none;
}

.trilho.is-arrastando {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.cartao-destino {
  position: relative;
  flex: 0 0 auto;
  width: min(72vw, 372px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--petrol);
  scroll-snap-align: start;
  display: block;
}

.cartao-destino img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(0.92) contrast(1.02) brightness(0.96);
  transition: transform 1.2s var(--ease-out), filter 0.8s var(--ease-out);
}

.cartao-destino:hover img,
.cartao-destino:focus-visible img {
  transform: scale(1.09);
  filter: saturate(1) contrast(1.03) brightness(1);
}

/* Véu em gradiente: garante que o texto do cartão seja sempre legível,
   independentemente da foto por baixo. */
.cartao-destino__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 31, 39, 0.34) 0%,
    rgba(11, 31, 39, 0) 34%,
    rgba(11, 31, 39, 0.55) 66%,
    rgba(11, 31, 39, 0.94) 100%
  );
}

.cartao-destino__corpo {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(20px, 2.2vw, 28px);
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.cartao-destino__regiao {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-lit);
}

.cartao-destino__nome {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 1.8vw, 1.6rem);
  line-height: 1.2;
}

.cartao-destino__nota {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ivory-78);
  padding-top: var(--s-3);
  margin-top: var(--s-1);
  border-top: 1px solid var(--hairline-on-ink);
}

/* Filete dourado que se desenha sobre o cartão no hover */
.cartao-destino__filete {
  position: absolute;
  left: clamp(20px, 2.2vw, 28px);
  right: clamp(20px, 2.2vw, 28px);
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--ease-out);
}

.cartao-destino:hover .cartao-destino__filete,
.cartao-destino:focus-visible .cartao-destino__filete {
  transform: scaleX(1);
}

.controles-trilho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-6);
}

.controles-trilho__progresso {
  position: relative;
  height: 1px;
  flex: 1;
  background: var(--hairline-on-ink);
  overflow: hidden;
}

.controles-trilho__progresso span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: var(--gold);
  transform: translateX(0);
  transition: transform 0.2s linear;
}

.controles-trilho__botoes {
  display: flex;
  gap: var(--s-3);
  flex: none;
}

.controles-trilho__contagem {
  font-family: var(--font-display);
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  color: var(--stone);
  flex: none;
}

/* ==========================================================================
   3. Como funciona
   ========================================================================== */

.processo {
  background: var(--ink);
  color: var(--ivory);
  counter-reset: passo;
}

.passos {
  border-top: 1px solid var(--hairline-on-ink);
}

.passo {
  counter-increment: passo;
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding-block: clamp(28px, 3.6vw, 46px);
  border-bottom: 1px solid var(--hairline-on-ink);
}

.passo__indice {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.1vw, 2.9rem);
  line-height: 1;
  color: var(--gold);
}

.passo__indice::before {
  content: "0" counter(passo);
}

.passo h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.28;
  max-width: 16ch;
}

.passo p {
  color: var(--ivory-78);
  max-width: 54ch;
  font-size: var(--t-body);
}

/* O filete dourado cresce quando o passo entra na tela. */
.passo__filete {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--gold);
  transition: width 1.1s var(--ease-out);
}

.passo.is-visivel .passo__filete {
  width: 100%;
}

@media (max-width: 860px) {
  .passo {
    grid-template-columns: 62px minmax(0, 1fr);
    row-gap: var(--s-3);
  }
  .passo p {
    grid-column: 2;
  }
  .passo h3 {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .passo {
    grid-template-columns: 1fr;
    row-gap: var(--s-3);
  }
  .passo p {
    grid-column: 1;
  }
}

/* ==========================================================================
   4. Alcance — a segunda aparição do globo
   ========================================================================== */

.alcance {
  color: var(--ivory);
}

.alcance .secao-topo {
  margin-bottom: clamp(36px, 5vw, 64px);
}

/* Regiões atendidas: lista editorial, sem número inventado. A largura para
   antes da borda esquerda do planeta (≈62% do quadro), para o texto não
   depender do véu. */
.regioes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 5vw, 72px);
  max-width: 820px;
}

.regiao {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--hairline-on-ink);
}

.regiao__nome {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ivory);
}

.regiao__nota {
  font-size: var(--t-small);
  color: var(--stone);
  text-align: right;
}

.compromissos {
  display: flex;
  gap: clamp(24px, 4vw, 64px);
  flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline-on-ink);
}

.compromisso {
  max-width: 26ch;
}

.compromisso__valor {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.1;
  color: var(--ivory);
}

.compromisso__rotulo {
  margin-top: var(--s-2);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

@media (max-width: 700px) {
  .regioes {
    grid-template-columns: 1fr;
  }
  .regiao__nota {
    text-align: right;
  }
}

/* ==========================================================================
   5. Depoimentos
   ========================================================================== */

.depoimentos {
  background: var(--ink);
  color: var(--ivory);
}

.cartao-depoimento {
  flex: 0 0 auto;
  width: min(84vw, 480px);
  scroll-snap-align: start;
  /* Painel translúcido: sobre o petróleo do topo da seção ele lê como um
     plano mais fundo; sobre a tinta da base, quem o desenha é o filete e a
     sombra. Um fundo opaco sumiria em uma das duas pontas do gradiente. */
  background: rgba(11, 31, 39, 0.55);
  border: 1px solid var(--hairline-on-ink);
  box-shadow: 0 24px 56px -34px rgba(0, 0, 0, 0.9);
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-height: 340px;
}

.cartao-depoimento__aspas {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--gold);
  height: 0.55em;
}

.cartao-depoimento__texto {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.52;
  color: var(--ivory);
  text-wrap: pretty;
  flex: 1;
}

/* Citações longas são cortadas com elegância e podem ser abertas —
   nunca resumidas ou reescritas. */
.cartao-depoimento__texto.is-cortado {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cartao-depoimento__mais {
  align-self: flex-start;
  margin-top: calc(var(--s-4) * -1);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--gold-lit);
  border-bottom: 1px solid var(--gold-45);
  padding-bottom: 2px;
}

.cartao-depoimento__mais:hover {
  border-bottom-color: var(--gold);
}

.pessoa {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline-on-ink);
  margin-top: auto;
}

.pessoa__foto {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--hairline-on-ink);
}

.pessoa__nome {
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--ivory);
}

.pessoa__viagem {
  font-size: var(--t-micro);
  color: var(--ivory-58);
  margin-top: 2px;
}

/* ==========================================================================
   6. Planejar (CTA final)
   ========================================================================== */

/* Sem fundo próprio: quem escurece esta seção é o véu de .secao-orbita,
   que deixa o planeta aparecer atrás do convite final. */
.planejar {
  color: var(--ivory);
  text-align: center;
}

.planejar__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
}

.planejar__titulo {
  max-width: 20ch;
}

.planejar__resumo {
  max-width: 54ch;
  color: var(--ivory-78);
}

.planejar__formulario {
  margin-top: var(--s-4);
}

.planejar__rodape {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
  justify-content: center;
}

.planejar__ou {
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--stone);
}

/* Camada de avisos (toast) — confirma o envio sem tirar o usuário da página. */
.aviso {
  position: fixed;
  left: 50%;
  bottom: clamp(20px, 4vh, 40px);
  transform: translate(-50%, 140%);
  z-index: var(--z-menu);
  max-width: min(92vw, 520px);
  background: var(--petrol);
  color: var(--ivory);
  border: 1px solid var(--gold-45);
  padding: var(--s-4) var(--s-6);
  font-size: var(--t-small);
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 18px 48px rgba(11, 31, 39, 0.5);
  transition: transform 0.6s var(--ease-out);
}

.aviso.is-visivel {
  transform: translate(-50%, 0);
}