/* =========================================================================
   VENDAS — blocos exclusivos da página Viaje Quase de Graça
   -------------------------------------------------------------------------
   theme.css traz cores, fontes e medidas.
   main.css é uma cópia do site principal e NÃO deve ser editada aqui:
   para mudar um componente comum, mude no site principal e copie de novo.
   Este arquivo só acrescenta o que existe apenas nesta página.
   ========================================================================= */

/* 1. CABEÇALHO ----------------------------------------------------------- */
/* Página de vendas não tem menu: só a marca e o preço, para não tirar
   o visitante do caminho da compra. */
.site-header--vendas .site-header__inner { justify-content: space-between; }
.site-header__price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--brand);
  white-space: nowrap;
}
@media (max-width: 419px) { .site-header__price { display: none; } }

/* 2. HERO ---------------------------------------------------------------- */
.hero .hero-claim { color: rgba(255, 255, 255, .92); max-width: 34ch; }
.hero .hero-claim strong { color: var(--accent); font-weight: 400; }

/* A foto da capa é mais alta que o padrão 4:5 do site: a proporção segue a
   da imagem (1200x1650) para a Torre Eiffel caber inteira, da ponta à base,
   sem corte automático. Ao trocar a foto, acerte este valor junto. */
.hero__photo .media--hero { aspect-ratio: 8 / 11; }
.hero__photo .media--hero img { object-position: 50% 50%; }

/* No site principal a foto do hero alinha pela base. Aqui ela sobe e começa
   na mesma linha do texto, para a torre aparecer inteira já na abertura. */
@media (min-width: 960px) { .hero__grid { align-items: start; } }

/* 2b. MICROPROVA DO TOPO ------------------------------------------------ */
/* Uma linha de confiança logo abaixo do botão, antes de a pessoa rolar. */
.microprova {
  margin: var(--space-2) 0 0;
  padding-left: 1.75rem;
  position: relative;
  max-width: 44ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}
.microprova::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 16px;
  height: 1px;
  background: var(--accent);
}
.microprova:empty { display: none; }

/* 3. SEQUÊNCIA DE FRASES CURTAS ----------------------------------------- */
/* Usada para aquele encadeamento de passos curtos ("Você escolhe um
   destino. / Abre o site..."). Cada linha ganha respiro e um traço fino. */
.beats {
  list-style: none;
  display: grid;
  gap: .65rem;
  margin: var(--space-3) 0;
  padding-left: var(--space-3);
  border-left: 1px solid var(--line);
  counter-reset: none;
}
.beats li {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--ink-2);
}
.beats--light { border-left-color: rgba(255, 255, 255, .25); }
.beats--light li { color: rgba(255, 255, 255, .88); }

/* 4. RETRATO E NÚMEROS -------------------------------------------------- */
.media--retrato { aspect-ratio: 3 / 4; }
.stats {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border);
}
/* São quatro números numa coluna estreita: 2x2 dá respiro a cada um e
   deixa o valor economizado fechando o bloco. */
@media (min-width: 480px) { .stats { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); } }
.stats dt {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .3rem;
}
/* Os rótulos têm comprimentos diferentes e quebram em mais ou menos linhas.
   Empurrando o número para a base da célula, os dois da mesma fila ficam
   alinhados mesmo assim. */
.stats div { display: flex; flex-direction: column; justify-content: flex-end; }
.stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  color: var(--brand);
}
/* O valor economizado é o número que mais convence: ganha o destaque. */
.stats div:last-child dd { color: var(--accent); }

/* 4b. PROVA FORTE ANTES DO PREÇO ---------------------------------------- */
/* Um depoimento só, no momento da decisão. O print fica pequeno e clicável;
   quem decide é a frase ao lado, com o resultado concreto. */
.prova-destaque {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: var(--space-3);
  background: var(--paper-2);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
}
@media (min-width: 640px) { .prova-destaque { padding: var(--space-4); gap: var(--space-4); } }

.prova-destaque__texto { display: grid; gap: .5rem; }
.prova-destaque blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--ink);
}

/* O print fica aberto, na largura toda do bloco, para ser lido sem clique.
   A proporção acompanha a imagem (1320x970), então nada é cortado. */
.prova-destaque__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0b0d12;
  cursor: zoom-in;
}
.prova-destaque__media img { width: 100%; height: auto; display: block; }

/* No celular o print encolhe demais para ler: o selo deixa claro que dá
   para tocar e ampliar. No desktop ele só aparece ao passar o mouse. */
.prova-destaque__zoom {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  padding: .35rem .75rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-deep);
  background: rgba(255, 255, 255, .92);
  border-radius: var(--radius);
}
@media (min-width: 760px) and (hover: hover) {
  .prova-destaque__zoom { opacity: 0; transition: opacity var(--dur) var(--ease); }
  .prova-destaque__media:hover .prova-destaque__zoom,
  .prova-destaque__media:focus-visible .prova-destaque__zoom { opacity: 1; }
}

/* 5. BLOCO DE OFERTA ---------------------------------------------------- */
.closing__sub {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--muted);
}
.closing__sub:empty { display: none; }

.offer-points {
  list-style: none;
  display: grid;
  gap: .5rem;
  margin: var(--space-3) 0;
  text-align: left;
}
.offer-points li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.offer-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 11px;
  height: 11px;
  border: 1px solid var(--accent);
  border-radius: 50%;
}
/* Linha única do fechamento: preço | acesso | garantia */
.linha-oferta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .5rem 1rem;
  margin: var(--space-5) 0 var(--space-4);
}
.linha-oferta strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1;
  color: var(--brand);
}
.linha-oferta span {
  font-size: var(--fs-small);
  color: var(--muted);
}
.linha-oferta span + span::before,
.linha-oferta strong + span::before {
  content: "|";
  margin-right: 1rem;
  color: var(--line);
}
/* No celular os três viram linhas empilhadas, sem as barras separadoras. */
@media (max-width: 479px) {
  .linha-oferta { flex-direction: column; align-items: center; gap: .35rem; }
  .linha-oferta span + span::before,
  .linha-oferta strong + span::before { content: none; margin: 0; }
}

/* 6. BOTÃO DECISIVO ----------------------------------------------------- */
/* Só os três botões que fecham a venda (topo, oferta e final) usam este
   tamanho. Os demais ficam no tamanho normal, para a hierarquia se manter. */
.btn--xl {
  min-height: 64px;
  padding: 1.1rem 2.2rem;
  font-size: 1.0625rem;
  letter-spacing: .05em;
}
@media (max-width: 559px) { .btn--xl { width: 100%; padding: 1.1rem 1.4rem; } }

/* 7. UTILIDADES DE CENTRALIZAÇÃO --------------------------------------- */
.btn-row--center { justify-content: center; }
.section--dark .closing__note.on-dark { color: rgba(255, 255, 255, .8); }

/* 7. BARRA FIXA DE COMPRA ---------------------------------------------- */
/* Aparece quando o primeiro botão do hero sai da tela. */
.buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-header);
  background: var(--brand-deep);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding: .65rem 0 calc(.65rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  /* Escondida também para o teclado e o leitor de tela: sem isso o botão
     continuaria recebendo foco fora da tela. */
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.buybar.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.no-js .buybar { display: none; }
.buybar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.buybar__info { display: grid; line-height: 1.3; min-width: 0; }
.buybar__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buybar__meta { font-size: .875rem; color: rgba(255, 255, 255, .72); white-space: nowrap; }
.buybar__meta strong { font-weight: 700; color: #fff; }
.buybar__garantia::before { content: "·"; margin: 0 .4rem; }
.buybar .btn { min-height: 48px; padding: .6rem 1.2rem; white-space: nowrap; }

/* No celular o nome do produto sai: já está no topo da tela e no título.
   Fica só o que decide a compra, em duas linhas curtas. */
@media (max-width: 559px) {
  .buybar__name { display: none; }
  .buybar__meta { display: grid; line-height: 1.2; }
  .buybar__meta strong { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; }
  .buybar__garantia { font-size: .8125rem; }
  .buybar__garantia::before { content: none; }
  .buybar .btn { padding: .6rem 1rem; font-size: .9375rem; }
}

/* A barra é fixa em qualquer largura: o rodapé ganha folga para que o aviso
   legal nunca fique encoberto por ela. */
.site-footer { padding-bottom: calc(var(--space-4) + 5.5rem); }

/* 8. AVISO DE COOKIES --------------------------------------------------- */
.cookie { bottom: calc(var(--space-2) + 4.5rem); }
.cookie__acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie__acoes .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .cookie__acoes .btn { flex: 0 0 auto; } }

/* 9. RODAPÉ ------------------------------------------------------------- */
.footer-legal { display: grid; gap: var(--space-2); max-width: 90ch; }
.footer-legal p { margin: 0; font-size: var(--fs-small); line-height: 1.6; }
.footer-legal__brand {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: #fff;
}
.footer-legal__disclaimer {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .6);
}

/* 10. IMPRESSÃO --------------------------------------------------------- */
@media print {
  .buybar, .cookie, .site-header { display: none !important; }
}