/* Página Sobre */
@keyframes sobre-sobe { from { opacity: 0; transform: translateY(28px); } }
@keyframes sobre-cresce { from { transform: scaleX(0); } }

/* Topo escuro com as duas faixas */
.pg-sobre .heroi { background: var(--grafite); color: #F5F7FB; overflow: hidden; }
.pg-sobre .heroi-texto { padding-top: 104px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 28px; }
.pg-sobre .heroi .sobretitulo { color: var(--ciano); }
.pg-sobre .heroi .titulo-pagina { font-size: clamp(44px, 6vw, 80px); max-width: 831px; }
.pg-sobre .heroi-intro { font-size: 20px; line-height: 1.6; color: var(--noite-texto); max-width: 720px; }
.pg-sobre .heroi-texto > * { animation: sobre-sobe .8s var(--anima) both; }
.pg-sobre .heroi-texto > :nth-child(2) { animation-delay: .09s; }
.pg-sobre .heroi-texto > :nth-child(3) { animation-delay: .18s; }
.pg-sobre .faixas { display: flex; flex-direction: column; gap: 14px; padding-bottom: 96px; }
.pg-sobre .faixa { height: 72px; border-radius: 0 999px 999px 0; transform-origin: left; animation: sobre-cresce 1.1s var(--anima) .2s both; }
/* como no desenho: a linha da faixa azul sobe enquanto a faixa cresce */
.pg-sobre .faixa-linha { animation: sobre-sobe .8s var(--anima) both; }
.pg-sobre .faixa-azul { width: 55%; background: var(--azul); }
.pg-sobre .faixa-clara { width: 72%; background: var(--fundo); }

/* O nome e o símbolo */
.pg-sobre .simbolo-secao { padding-top: 112px; padding-bottom: 112px; display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.pg-sobre .simbolo-figura { flex: 1 1 320px; display: flex; justify-content: center; }
.pg-sobre .simbolo-texto { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pg-sobre .simbolo-texto .titulo-secao { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; }
.pg-sobre .bloco-item { display: flex; gap: 16px; align-items: flex-start; }
.pg-sobre .marcador { flex: 0 0 auto; margin-top: 6px; width: 40px; height: 18px; background: var(--azul); border-radius: 0 999px 999px 0; }
.pg-sobre .marcador-escuro { background: var(--grafite); }
.pg-sobre .bloco-item p, .pg-sobre .texto { font-size: 17px; color: var(--grafite-suave); }
.pg-sobre .bloco-item strong { color: var(--grafite); }

/* Como pensamos */
.pg-sobre .pensamos { background: var(--superficie); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.pg-sobre .pensamos-dentro { padding-top: 104px; padding-bottom: 104px; display: flex; flex-direction: column; gap: 48px; }
.pg-sobre .valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.pg-sobre .valores strong { font-size: 20px; }

/* Quem faz */
.pg-sobre .time { padding-top: 104px; padding-bottom: 104px; display: flex; flex-direction: column; gap: 40px; }
.pg-sobre .pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.pg-sobre .pessoa { display: flex; flex-direction: column; gap: 12px; }
.pg-sobre .pessoa strong { font-size: 18px; }
.pg-sobre .pessoa .apoio { margin-top: -8px; }
.pg-sobre .foto { aspect-ratio: 1; background: var(--azul-claro); border-radius: 20px; overflow: hidden; }
.pg-sobre .foto img { width: 100%; height: 100%; object-fit: cover; }

/* Chamada final */
.pg-sobre .chamada { background: var(--azul); color: #fff; }
.pg-sobre .chamada-dentro { padding-top: 88px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.pg-sobre .chamada .titulo-secao { flex: 1 1 520px; }

@media (max-width: 720px) {
  .pg-sobre .heroi-texto { padding-top: 64px; padding-bottom: 48px; gap: 20px; }
  .pg-sobre .heroi-intro { font-size: 18px; }
  .pg-sobre .faixas { padding-bottom: 64px; }
  .pg-sobre .faixa { height: 48px; }
  .pg-sobre .simbolo-secao { padding-top: 64px; padding-bottom: 64px; gap: 40px; }
  .pg-sobre .simbolo-figura svg { width: 180px; height: auto; }
  .pg-sobre .simbolo-texto, .pg-sobre .chamada .titulo-secao { flex-basis: 100%; }
  .pg-sobre .pensamos-dentro, .pg-sobre .time { padding-top: 64px; padding-bottom: 64px; gap: 32px; }
  .pg-sobre .chamada-dentro { padding-top: 64px; padding-bottom: 64px; }
}