/* ============================================================
   NOSSO COMPROMISSO — declaração de fechamento (página Sobre nós)
   A frase de efeito ganha destaque com um "aceso de leitura": o
   texto entra apagado e acende conforme a seção passa pela faixa
   de leitura da tela — dinâmico e ligado ao scroll, sem depender
   de clique. Glow suave + textura blueprint (já usados no resto
   do site) dão presença ao bloco sem introduzir nada novo.
   ============================================================ */
.compromisso { position:relative; isolation:isolate; }
.compromisso::before {
  content:"";
  position:absolute; left:50%; top:42%;
  width:min(720px,80vw); height:min(720px,80vw);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(243,149,8,.12), transparent 68%);
  pointer-events:none; z-index:-1;
}

.compromisso__tagline {
  --reveal:35%;
  display:block;
  max-width:34ch;
  margin:1.1rem auto 0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--step-2);
  line-height:1.3;
  letter-spacing:-0.01em;
  background-image:linear-gradient(to bottom, var(--ink) 0%, var(--ink) var(--reveal), var(--slate-300) var(--reveal), var(--slate-300) 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text) {
  .compromisso__tagline { color:var(--ink); background-image:none; -webkit-text-fill-color:currentColor; }
}

.compromisso__body {
  max-width:70ch;
  margin:1.1rem auto 0;
  text-align:center;
  color:var(--muted);
  font-size:var(--step-0);
  line-height:1.75;
}

.compromisso__accent { color:var(--orange); font-weight:700; }

@media (prefers-reduced-motion: reduce) {
  .compromisso__tagline { --reveal:100% !important; }
}