/* Página Sobre no estilo Pop da Landing World (sobre.html). Só tokens --pop-*; sem HEX. Pressupõe pop.css e landing-pop.css (cabeçalho e estados). */
.sb-sec { max-width: 1200px; margin: 0 auto; padding: 56px 16px 0; }
.sb-sec > h2 { margin: 0 0 24px; }
.sb-topo { padding-top: 48px; }
.sb-topo-card { padding: 48px; display: flex; flex-direction: column; gap: 16px; }
.sb-topo-card h1 { overflow-wrap: anywhere; }
.sb-lead { font-size: var(--pop-t-corpo); font-weight: 600; max-width: 56ch; margin: 0; overflow-wrap: anywhere; }
.sb-botoes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.sb-botoes:empty { display: none; }
.sb-historia { padding: 32px; }
.sb-texto { display: flex; flex-direction: column; gap: 16px; max-width: 70ch; min-width: 0; overflow-wrap: anywhere; }
.sb-texto p { margin: 0; }
.sb-mascote-card { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; padding: 40px; }
.sb-mascote-card > * { min-width: 0; }
.sb-mascote-card h2 { margin: 0 0 12px; }
.sb-mascote-card p { margin: 0; max-width: 56ch; overflow-wrap: anywhere; }
.sb-mascote-cena { display: grid; place-items: center; }
.sb-mascote-img { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.sb-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.sb-bloco { display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow-wrap: anywhere; padding: 24px; color: var(--pop-carvao); }
.sb-bloco h3, .sb-bloco p { margin: 0; }
.sb-bloco h3 { font-family: var(--pop-font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.sb-bloco img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: var(--pop-borda); border-radius: var(--pop-raio-botao); }
.sb-bloco .cs-pop-btn { align-self: flex-start; margin-top: auto; }
/* blocos sem cor própria alternam as cores da paleta (o texto fica em carvão nos dois temas) */
.sb-bloco:not([class*="cs-pop-cor--"]):nth-child(4n+1) { background: var(--pop-rosa); }
.sb-bloco:not([class*="cs-pop-cor--"]):nth-child(4n+2) { background: var(--pop-menta); }
.sb-bloco:not([class*="cs-pop-cor--"]):nth-child(4n+3) { background: var(--pop-azul); }
.sb-bloco:not([class*="cs-pop-cor--"]):nth-child(4n) { background: var(--pop-amarelo); }
.lw-rodape-grade { grid-template-columns: 1.4fr repeat(2, 1fr); }
@media (min-width: 1920px) { .sb-sec { max-width: 1440px; } }
@media (max-width: 760px) {
  .sb-topo-card, .sb-historia { padding: 24px; }
  .sb-mascote-card { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .lw-rodape-grade { grid-template-columns: 1fr; }
}
/* .cs-pop-card vem depois das cores no pop.css e ganharia delas: aqui a cor do cartão vale (texto em carvão nos dois temas) */
.cs-pop-card.cs-pop-cor--lilas { background: var(--pop-lilas); color: var(--pop-carvao); }
.cs-pop-card.cs-pop-cor--amarelo { background: var(--pop-amarelo); color: var(--pop-carvao); }
.cs-pop-card.cs-pop-cor--menta { background: var(--pop-menta); color: var(--pop-carvao); }
.cs-pop-card.cs-pop-cor--rosa { background: var(--pop-rosa); color: var(--pop-carvao); }