/* Matrículas abertas: só o que é desta página (o resto vem de estilo.css e dos componentes). */

/* A cena da abertura: a casa flutuante de cena(), com o menino e a ciclista, e o avião com a faixa de
   boas-vindas voando no lugar da fada. O avião voa no céu livre, à direita do diamante (e do brilho dele),
   acima do telhado e acima da nuvem da direita: não encosta na casa, no diamante, nas nuvens nem no texto
   (medido de 1440 a 360 px, com a casa no alto do flutuar e o avião no fundo do pairar). Entre 961 e
   ~1340 px, onde o céu ao lado da casa fica estreito, ele diminui junto com a tela, até o tamanho do celular. */
.matriculas__cena { position: relative; width: 100%; max-width: 460px; margin-inline: auto; }
.matriculas__cena .cena { max-width: none; }
.matriculas__aviao { position: absolute; z-index: 2; left: calc(60% + 30px); top: 1%; filter: drop-shadow(0 12px 14px rgba(11, 74, 115, .16)); }
.matriculas__aviao img { width: clamp(58px, 14.05vw - 76.8px, 112px); }
.matriculas__aviao .aviao__faixa { font-size: clamp(.72rem, .585vw + 5.9px, .86rem); padding: .51em 1.45em .51em .8em; }

/* Como começar: à esquerda, o título e a chamada (param enquanto os passos rolam); à direita, os passos. */
.matriculas__grade { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 72px; align-items: start; }
.matriculas__lado { position: sticky; top: calc(var(--topo) + 32px); }
.matriculas__cabeca h2 { margin-bottom: 14px; }
.matriculas__acao > p { color: var(--suave); font-size: 1.12rem; max-width: 460px; }
.matriculas__acao .botoes { margin-top: 22px; }
.matriculas__passos { padding-top: 6px; }
.matriculas__passos .etapa p a { font-weight: 700; }
@media (min-width: 961px) and (max-width: 1160px) {   /* (a coluna ao lado dos passos fica estreita e os dois botões vão um
  embaixo do outro: os dois com a largura da coluna, como os da abertura no celular; mais largo, ficam lado a lado como na abertura) */
  .matriculas__acao .botao { flex: 1 1 auto; }
}

@media (max-width: 960px) {
  .matriculas__cena { order: -1; width: min(100%, 420px); }
  /* (aqui a nuvem de cima passa por cima da casa: o avião voa à direita dela, no tamanho do computador) */
  .matriculas__aviao { left: 83%; }
  .matriculas__aviao img { width: 112px; }
  .matriculas__aviao .aviao__faixa { font-size: .86rem; }
  /* Empilhado: título, passos e, por último, a chamada */
  .matriculas__grade { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .matriculas__lado { display: contents; }
  .matriculas__cabeca { order: 1; text-align: center; }
  .matriculas__passos { order: 2; width: 100%; max-width: 640px; margin-inline: auto; }
  .matriculas__acao { order: 3; width: 100%; max-width: 640px; margin: 8px auto 0; text-align: center; }
  .matriculas__acao > p { margin-inline: auto; }
  .matriculas__acao .botoes { justify-content: center; }
}
@media (max-width: 760px) {
  .matriculas__cena { width: min(100%, 350px); }
  /* (à direita do diamante, sem encostar nele nem na borda da tela; a nuvem de cima vai para a direita da casa,
     abaixo do avião, para deixar o céu dele livre) */
  .matriculas__aviao { left: calc(57% + 22px); top: 4%; }
  .matriculas__aviao img { width: clamp(58px, 20vw - 14px, 64px); }
  .matriculas__aviao .aviao__faixa { font-size: clamp(.66rem, 3.2vw - .96px, .72rem); padding: .52em 1.39em .52em .78em; }
  .nuvem--a1 { left: 76%; top: 70px; }
  .matriculas__acao > p { font-size: 1.02rem; }
  .matriculas__acao .botao { flex: 1 1 100%; }
}