/* sobre.css — "Por que escrevemos assim" + guia "Antes e depois" (Fase J do
 * Pacto, Eixo 3). Cabeçalho + duas seções de texto fixo + galeria de pares
 * antes/depois com delta de legibilidade. */

.sobre-pg {
  max-width: var(--largura-maxima);
  margin: 0 auto;
}

/* ---------- Cabeçalho (mesmo padrão do glossário) ---------- */
.sobre-pg__cabecalho {
  margin-bottom: var(--esp-5);
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid var(--cor-fio);
}
.sobre-pg__voltar {
  margin-bottom: var(--esp-3);
  font-size: 14px;
}
.sobre-pg__voltar-link {
  color: var(--cor-suave);
  text-decoration: none;
}
.sobre-pg__voltar-link:hover {
  color: var(--acento);
}
.sobre-pg__chapeu {
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
}
.sobre-pg__titulo {
  margin-top: var(--esp-1);
  color: var(--cor-titulo);
}
.sobre-pg__subtitulo {
  margin-top: var(--esp-2);
  color: var(--cor-suave);
  font-size: var(--escala-pequena);
}

/* ---------- Seções de texto fixo ---------- */
.sobre-pg__secao {
  margin-bottom: var(--esp-6);
}
.sobre-pg__secao-tit {
  color: var(--cor-titulo);
  margin-bottom: var(--esp-3);
}
.sobre-pg__secao-intro,
.sobre-pg__secao-txt {
  color: var(--texto);
  line-height: 1.6;
  max-width: 62ch;
}
.sobre-pg__regras {
  margin: var(--esp-3) 0;
  padding-left: 1.25em;
  color: var(--texto);
  line-height: 1.6;
}
.sobre-pg__regras li {
  margin-bottom: var(--esp-2);
}
.sobre-pg__fonte {
  margin-top: var(--esp-3);
  font-size: var(--escala-pequena);
  color: var(--cor-suave);
}
.sobre-pg__fonte-link {
  color: var(--acento);
}

/* ---------- "Ouça como podcast" (feed RSS, Fase K) ---------- */
.sobre-pg__podcast-link {
  color: var(--acento);
  font-weight: 600;
}

.sobre-pg__carregando {
  color: var(--cor-suave);
}

/* ---------- Galeria "Antes e depois" ---------- */
.sobre-pg__pares {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.sobre-pg__par {
  padding: var(--esp-4) var(--esp-5);
  background: var(--superficie);
  border: 1px solid var(--cor-fio-suave);
  border-radius: 14px;
}

.sobre-pg__par-cab {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-bottom: var(--esp-3);
}
.sobre-pg__par-assunto {
  margin: 0;
  font-weight: 600;
  color: var(--cor-titulo);
}
.sobre-pg__delta {
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--cor-suave);
}
.sobre-pg__delta--positivo {
  color: #2f8a5b;
}

.sobre-pg__par-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-4);
}
@media (min-width: 720px) {
  .sobre-pg__par-grade {
    grid-template-columns: 1fr 1fr;
  }
}

.sobre-pg__col {
  padding: var(--esp-3) var(--esp-4);
  border-radius: 10px;
  border-left: 3px solid var(--cor-fio);
}
.sobre-pg__col.is-antes {
  border-left-color: var(--cor-suave);
  background: color-mix(in srgb, var(--cor-suave) 6%, transparent);
}
.sobre-pg__col.is-depois {
  border-left-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 8%, transparent);
}
.sobre-pg__col-rotulo {
  margin: 0 0 6px;
  font-family: var(--fonte-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-suave);
}
.sobre-pg__col-txt {
  margin: 0;
  color: var(--texto);
  line-height: 1.55;
}

.sobre-pg__par-rodape {
  margin: var(--esp-3) 0 0;
  font-size: var(--escala-pequena);
}
.sobre-pg__par-link {
  color: var(--acento);
}

/* ---------- Impressão ---------- */
@media print {
  .sobre-pg__voltar {
    display: none !important;
  }
}