/* =========================================================
   SOBRE NÓS — page styles
   Classes novas, escopadas a esta página. Não altera
   variáveis, tokens nem estilos compartilhados.
   ========================================================= */

/* ---- "O que você não vê em outras escolas" ----
   Antes: foto + painel de 2 parágrafos. Agora a seção carrega ~400 palavras,
   então vira foto full-bleed + coluna única de leitura com 4 blocos numerados.
   Em duas colunas a medida cairia para ~36 caracteres por linha em telas de
   1024px, estreita demais para parágrafos deste tamanho. */
.difere{ background:#fff; padding-top:0; }
.difere__media{
  width:100vw; margin-left:calc(50% - 50vw);
  /* 44vw reproduz a proporcao 2,28:1 da foto, entao ela aparece quase
     inteira em vez de perder um pedaco em cima e embaixo. */
  position:relative; height:clamp(240px,44vw,640px);
  background:var(--cream-2);
  margin-bottom:clamp(48px,6vw,88px);
}
.difere__media image-slot{ position:absolute; inset:0; width:100%; height:100%; }

/* O container usa a largura cheia da página para o título caber em uma linha;
   quem fica limitado à medida de leitura é o texto, logo abaixo. */
.difere__in{ max-width:var(--maxw); }
/* coluna de leitura: 880px menos as gutters ≈ 66 caracteres por linha */
.difere .numblocks{ max-width:880px; }
.difere h2{
  font-size:clamp(2rem,4vw,3.2rem); line-height:1.08; color:var(--ink);
  margin-bottom:clamp(2rem,3vw,2.8rem);
  text-wrap:balance;
}
/* Ate 579px nao ha tamanho de fonte legivel que caiba em uma linha (seriam
   ~21px). Nessa faixa a quebra e assumida: duas linhas equilibradas e
   centradas, para parecer decisao e nao acidente. Medido: quebra ate 570px,
   uma linha a partir de 580px. */
@media (max-width:579px){
  .difere h2{ text-align:center; }
}
.difere h2 i{ font-style:italic; color:var(--alecrim); }
.difere .btn{ margin-top:clamp(2rem,3vw,2.6rem); }

/* ---- Blocos numerados 01–04 ----
   Mesmo vocabulário visual dos cartões 01–04 da proposta pedagógica
   (número em caixa alta, tracking largo), porém em texto corrido empilhado:
   os parágrafos são longos demais para caber dentro de um card.
   Sem altura igual entre blocos — cada um respira conforme o próprio tamanho. */
.numblocks{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
  gap:clamp(30px,3.4vw,46px);
}
.numblock{ position:relative; }
.numblock + .numblock{ padding-top:clamp(30px,3.4vw,46px); border-top:1px solid var(--line); }
.numblock__n{
  display:block; margin-bottom:.55rem;
  font-family:var(--font-display); font-weight:600;
  font-size:.82rem; letter-spacing:.14em;
  color:var(--alecrim);
}
.numblock__title{
  font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.06;
  margin:0 0 .7rem; color:var(--ink);
}
/* teto de segurança da medida de leitura, independente da largura da tela */
.numblock p{ color:var(--ink-soft); font-size:1.08rem; line-height:1.65; margin:0; max-width:68ch; }