/* ============================================================
   ASTRON — SEÇÃO 7 · OFERTA

   Os dois blocos de valor, um no vão de cada portal.

   POR QUE ELES SÃO DOM E NÃO 3D: preço é LEITURA, não cenografia.
   O letreiro PLANO DE AÇÃO vive no Three.js porque precisa ser
   ocluído pelos portais e porque ninguém precisa lê-lo com
   precisão. Estes aqui o lead precisa ler, e numa call comprimida
   pelo Meet — texto em DOM continua nítido onde textura assada
   viraria borrão.

   Eles também ficam FORA da passada de aberração cromática, que
   acontece só no canvas: o preço não pode franjar.

   A LARGURA É O CONTROLE CRÍTICO. O vão entre os arcos mede 2.16
   unidades de mundo — 216px na escala do projeto. Estes blocos vão
   um pouco além disso e encostam nas bordas internas dos arcos, o
   que funciona porque ali a peça é escura e o texto é claro.
   Estreitar demais faz o parágrafo virar uma coluna alta e magra;
   alargar demais joga a linha por cima do metal claro do topo.
   ============================================================ */

.oferta__in {
  text-align: center;
}

/* ============================================================
   A CHAMADA DA PARADA DO PLANO DE AÇÃO

   Fica perto da câmera e baixa no quadro, logo acima do menu — a
   sete unidades de distância, contra as trinta dos portais. É essa
   diferença de profundidade que separa as duas leituras: a
   pergunta chega perto do lead, os caminhos ficam ao fundo.

   É a pergunta que transforma preço em comparação. O closer fala
   por cima dela antes de mostrar qualquer número, e ela sai de
   cena assim que a câmera anda — pertence a esta parada só.
   ============================================================ */

.oferta__chamada {
  text-align: center;
}

.oferta__head {
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--bone);
  text-transform: uppercase;
}

.oferta__destaque {
  color: var(--lime);
}

.oferta__apoio {
  margin: 16px auto 0;
  max-width: 30ch;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(248, 247, 242, 0.72);
  text-wrap: pretty;
}

.oferta__head,
.oferta__apoio {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

@media (max-height: 800px) {
  .oferta__head { font-size: 34px }
  .oferta__apoio { margin-top: 12px; font-size: 16px }
}

@media (max-width: 768px) {
  .oferta__head { font-size: 30px }
  .oferta__apoio { font-size: 15px }
}

/* --- O preço ------------------------------------------------
   Entra com o mesmo glitch das headlines das outras seções, no
   mesmo instante em que as lâmpadas do portal piscam. */
.oferta__preco {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--lime);
  white-space: nowrap;
  margin: 0;
}

/* --- O ciclo -------------------------------------------------
   Pequeno, branco, logo abaixo do número. É ele que impede o
   preço de ser lido como valor único. */
.oferta__ciclo {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone);
}

/* --- O escopo ------------------------------------------------
   O que o caminho entrega, em uma frase. Sobe linha a linha com
   o mesmo stagger dos parágrafos do resto da apresentação. */
.oferta__desc {
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(248, 247, 242, 0.78);
  text-wrap: pretty;
}

/* Um fio de sombra: nas bordas o texto encosta no metal, e sem
   isto a leitura briga com o relevo da peça. */
.oferta__preco,
.oferta__ciclo,
.oferta__desc {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}

/* --- Notebook baixo ------------------------------------------
   A apresentação roda em call, e boa parte das telas dos closers
   tem menos altura útil do que parece. */
@media (max-height: 800px) {
  .oferta__preco { font-size: 40px }
  .oferta__ciclo { margin-top: 8px; font-size: 14px }
  .oferta__desc { margin-top: 14px; font-size: 14px }
}

@media (max-width: 768px) {
  .oferta__preco { font-size: 38px }
  .oferta__desc { font-size: 14px }
}


/* ============================================================
   SEÇÃO 8 · DECOLE — o encerramento

   A headline É HORA DE DECOLAR NÃO está aqui: ela vive no 3D, no
   astronauta.js, porque precisa ser ocluída pela figura. Texto em
   camada HTML desenharia por cima dele e perderia a profundidade.

   O que fica em DOM é este parágrafo, que o lead precisa LER com
   precisão numa call comprimida pelo Meet — e onde os destaques
   em peso e cor têm que ser exatos.
   ============================================================ */

.decole__apoio {
  margin: 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--bone);
  text-align: center;
  text-wrap: pretty;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}

/* Os dois trechos que o Thiago marcou em negrito. */
.decole__apoio b {
  font-weight: 600;
}

/* E o número, que é o argumento inteiro condensado numa linha. */
.decole__valor {
  font-weight: 600;
  color: var(--lime);
}

@media (max-height: 800px) {
  .decole__apoio { font-size: 17px }
}

@media (max-width: 768px) {
  .decole__apoio { font-size: 16px }
}