/* Metodologia: só o que é desta página. O resto (abertura, avião com a faixa, "Como ensinamos",
   cartões, destaque, cartão "Hoje", próximo passo) vem de assets/estilo.css. */

/* ── Abertura: o avião com a faixa, maior, entre duas nuvens que andam ── */
.mt-voo { min-height: 320px; }
.mt-voo::before { top: -6%; }
.mt-voo .aviao { margin-left: 4%; }
.mt-voo .aviao img { width: clamp(170px, 17vw, 236px); }
.mt-voo .aviao__faixa { margin: 6px 0 0 -3px; padding: 10px 30px 10px 15px; font-size: clamp(1rem, .8rem + .45vw, 1.2rem); color: var(--teal-texto); }
.nuvem--mv1 { width: 118px; left: 6%; bottom: 12%; opacity: .95; animation-duration: 28s; }
.nuvem--mv2 { width: 70px; right: 4%; top: 12%; opacity: .8; animation-duration: 34s; }

/* ── Em sala: os primeiros níveis (técnicas em cartões, com o menino voando) e os níveis seguintes (a fada) ── */
.sala { overflow: hidden; overflow: clip; }
.nuvem--mt1 { width: 96px; top: 40px; left: 3%; opacity: .9; }
.nuvem--mt2 { width: 84px; left: 6%; bottom: 20%; z-index: 1; opacity: .95; animation-duration: 30s; }
.sala__linha { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px 64px; align-items: center; }
.sala__linha--depois { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); margin-top: 104px; }
.sala__texto h2 { margin-bottom: 14px; }
.sala__texto p { color: var(--suave); font-size: 1.12rem; max-width: 560px; }
.sala__texto p:last-child { margin-bottom: 0; }
.sala__tecnicas { position: relative; }
/* (o menino voa por cima do canto do primeiro cartão, inteiro dentro da seção mesmo no alto do voo, como em Quem somos) */
.sala__menino { position: absolute; z-index: 2; top: -70px; right: 14px; width: 126px; height: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 14px 14px rgba(11, 74, 115, .18)); }
.tecnicas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tecnica { --c: var(--azul); padding: 24px 24px 26px; }
.tecnica .cartao__icone { margin-bottom: 14px; color: var(--c); background: color-mix(in srgb, var(--c) 11%, white); }
.tecnica h3 { margin: 0 0 6px; font-size: 1.18rem; }
.tecnica__nome { display: block; margin-top: 3px; font: 700 .86rem/1.3 var(--texto); letter-spacing: 0; color: var(--suave); }
.tecnica p { margin: 0; font-size: 1rem; line-height: 1.55; }
/* A fada num pedaço de céu redondo, com o sol atrás (o mesmo céu das aberturas) */
.sala__arte { position: relative; display: grid; place-items: center; min-height: 360px; }
.sala__arte::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(100%, 360px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side at 60% 38%, rgba(255, 251, 232, .95), rgba(255, 251, 232, 0) 62%), linear-gradient(180deg, #bddcff, var(--ceu) 55%, var(--ceu-claro)); box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .55), var(--sombra); }
.sala__fada { position: relative; z-index: 1; width: 176px; height: auto; max-width: none; filter: drop-shadow(0 20px 18px rgba(11, 74, 115, .18)); }

/* ── Princípios: a lista com as marcas nas cores dos cinco passos; ao lado, a avaliação e as três aulas ── */
.principios__grade { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 32px 56px; align-items: end; }
.principios__lista h2 { margin-bottom: 26px; }
.principios__itens { list-style: none; margin: 0; padding: 10px 28px; }
.principios__itens li { --c: var(--azul); display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; align-items: start; padding: 15px 0; font-size: 1.08rem; line-height: 1.5; color: var(--tinta); }
.principios__itens li + li { border-top: 1px solid var(--linha); }
.principios__marca { width: 34px; height: 34px; margin-top: -4px; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 14%, transparent); }
.principios__marca svg { width: 17px; height: 17px; }
.principios__lado { display: grid; gap: 20px; }
.principios__lado .destaque { margin: 0; }
.aulas h3 { margin-top: 0; }

/* ── Formação: o cartão "Hoje" com as três pessoas que acompanham os professores ── */
.formacao { padding-top: 64px; }
.formacao .hoje h2 { margin: 6px 0 12px; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); }
.formacao .hoje > p { max-width: 720px; }
.formacao .hoje__equipe { grid-template-columns: repeat(3, 1fr); max-width: 760px; margin-inline: auto; }

/* ── Telas médias e celular ── */
@media (max-width: 960px) {
  .sala__linha, .sala__linha--depois { grid-template-columns: minmax(0, 1fr); }
  .sala__linha--depois { margin-top: 72px; }
  .sala__linha--inicio { row-gap: 76px; }
  .sala__texto { max-width: 640px; margin-inline: auto; text-align: center; }
  .sala__texto p { margin-inline: auto; }
  .sala__tecnicas { width: 100%; max-width: 640px; margin: 0 auto; }
  .sala__arte { order: -1; min-height: 250px; }
  .sala__arte::before { width: 250px; }
  .sala__fada { width: 128px; }
  .principios__grade { grid-template-columns: minmax(0, 1fr); }
  .principios__lista { text-align: center; }
  .principios__itens { text-align: left; }
  .principios__lista, .principios__lado { width: 100%; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .mt-voo { min-height: 180px; }
  .mt-voo .aviao { margin-left: 0; }
  .mt-voo .aviao img { width: 150px; }
  .mt-voo .aviao__faixa { font-size: .95rem; padding: 8px 24px 8px 12px; }
  .nuvem--mv1 { width: 76px; left: 4%; bottom: 8%; }
  .nuvem--mv2 { display: none; }
  .nuvem--mt1 { width: 64px; top: 18px; left: auto; right: 4%; }
  .sala__linha--depois { margin-top: 56px; }
  .sala__texto p { font-size: 1.04rem; text-align: left; }   /* (texto longo: alinhado à esquerda, mais fácil de ler) */
  .sala__menino { top: -60px; right: 14px; width: 88px; }
  .tecnicas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tecnica { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: start; padding: 18px 18px 20px; }
  .tecnica .cartao__icone { width: 48px; height: 48px; margin: 0; border-radius: 15px; }
  .tecnica .cartao__icone svg { width: 24px; height: 24px; }
  .tecnica h3 { font-size: 1.1rem; }
  .tecnica p { font-size: .97rem; }
  .sala__arte { min-height: 210px; }
  .sala__arte::before { width: 210px; box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .55), var(--sombra); }
  .sala__fada { width: 108px; }
  .nuvem--mt2 { width: 60px; left: calc(50% - 128px); bottom: 16%; }
  .principios__lista h2 { margin-bottom: 18px; }
  .principios__itens { padding: 4px 18px; }
  .principios__itens li { grid-template-columns: 30px 1fr; column-gap: 14px; padding: 13px 0; font-size: 1rem; }
  .principios__marca { width: 30px; height: 30px; margin-top: -3px; }
  .principios__marca svg { width: 15px; height: 15px; }
  .formacao { padding-top: 48px; }
  .formacao .hoje__selo { font-size: 1.12rem; padding: 11px 20px; }
  .formacao .hoje > p { text-align: left; }
  .formacao .hoje__equipe { grid-template-columns: 1fr 1fr; }
  .formacao .hoje__equipe li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}