/*
 * Página "Aluno Turista" (/aluno-turista/): só o que é próprio dela (prefixo at-). O resto vem do jornada.css, na
 * mesma ordem de seções das páginas de venda: abertura em duotone, três gestos, portas em arco, "Talvez você",
 * o que é a DL2 com a coreografia que se solta, "Vale tudo", a aula como playlist, depoimentos, pegadas que acendem,
 * ingresso com o menu de pagamento (vendas.css) e dúvidas com os pés que se encontram.
 * Cada .ci-shape (onda no topo da seção) tem a cor da seção anterior: ao reordenar, ajuste aqui.
 */

/* ---------- 3. dois caminhos: portas em arco ---------- */

.at-caminhos {
  background: var(--off-white);
}

.at-caminhos .ci-shape {
  fill: var(--vinho);
}

.at-caminhos .ci-eyebrow {
  color: var(--laranja-forte);
}

.at-portas {
  display: grid;
  gap: 28px;
  max-width: calc(900px + var(--gutter) * 2);
  margin-block: clamp(48px, 12vw, 80px);
}

/* no celular: porta à esquerda, texto à direita */
.at-porta {
  display: grid;
  grid-template-columns: clamp(96px, 27vw, 132px) 1fr;
  align-items: center;
  gap: 20px;
  text-align: left;
}

.at-portas .ci-arco {
  margin-top: 0;
}

.at-porta:nth-child(2) {
  transition-delay: 0.12s;
}

.at-porta__rotulo {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--laranja-forte);
}

.at-porta__nome {
  margin-top: 6px;
  font-size: clamp(1.375rem, 5.6vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--vinho-profundo);
}

.at-porta__desc {
  margin-top: 8px;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--texto);
  text-wrap: pretty;
}

/* ---------- 4. talvez você (ci-mover) ---------- */

.at .ci-mover .ci-shape {
  fill: var(--off-white);
}

/* ---------- 7. como é cada aula ---------- */

.at-encontro {
  background: var(--cinza);
}

.at-encontro .ci-shape {
  fill: var(--laranja);
}

.at-encontro .ci-eyebrow {
  color: var(--laranja-forte);
}

/* ---------- 9. como funciona ---------- */

.at-como .ci-shape {
  fill: var(--pessego);
}

.at-como .ci-eyebrow {
  color: var(--laranja-forte);
}

/* ---------- 10. ingresso ---------- */

.at-preco .ci-shape {
  fill: var(--off-white);
}

.at-duvida {
  margin-top: 28px;
  text-align: center;
}

/* ---------- 11. dúvidas e fim ---------- */

.at-faq .ci-shape {
  fill: var(--amarelo);
}

.at-fim {
  text-align: center;
}

.at-fim .ci-viva {
  margin-top: clamp(1.5rem, 6vw, 2.5rem) !important;
  font-size: clamp(2.75rem, 12vw, 6rem);
}

.at-fim .ci-lead {
  margin-top: 0.5rem;
  color: var(--vinho-profundo);
}

/* ---------- tablet e desktop: as duas portas lado a lado ---------- */

@media (min-width: 768px) {
  .at-portas {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .at-porta {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .at-porta .ci-arco__porta {
    width: min(100%, 220px);
  }

  .at-porta:nth-child(2) {
    margin-top: 48px;
  }
}