/* Página Sobre. Depende de tokens.css, site.css e landing.css (chamada final). */
.pg-sobre main > section { background: var(--bg); color: var(--fg); }
.pg-sobre .kicker { color: var(--destaque); }
.pg-sobre [data-tema="claro"] .titulo-secao, .pg-sobre [data-tema="verde"] .titulo-secao { color: var(--roxo); }
.provisorio { font-size: var(--t-mini); opacity: .7; margin-top: 1.4rem; }

/* ---------- Manifesto ---------- */
.sb-abertura { padding: clamp(8rem, 18vh, 11rem) 0 var(--secao); }
.sb-abertura__titulo { font-size: var(--t-mega); font-weight: 800; letter-spacing: -0.035em; }
.sb-abertura .sublinha { color: var(--branco); }
.manifesto { margin-top: clamp(2.5rem, 6vw, 5rem); max-width: 22em; font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem); line-height: 1.18; letter-spacing: -0.015em; }
.manifesto .palavra { opacity: .16; transition: none; }
.manifesto .palavra.is-destaque { color: var(--verde); }

/* ---------- Partículas ---------- */
.particulas { padding: var(--secao) 0; overflow: hidden; }
.particulas__grade { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.particulas__texto p:not(.kicker) { margin-top: 1.2rem; font-size: var(--t-3); max-width: 28rem; }
.particulas__palco { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 620px; justify-self: center; }
.particulas__palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }

/* ---------- Mapa de rotas ---------- */
.rotas { padding: var(--secao) 0; }
.rotas__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.rotas__texto p:not(.kicker) { margin-top: 1.2rem; font-size: var(--t-3); max-width: 30rem; opacity: .9; }
.rotas__lista { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.rotas__lista li { padding: .5em 1em; border-radius: var(--pilula); border: 1.5px solid rgb(var(--branco-rgb) / .25); font-weight: 700; font-size: var(--t-legenda); }
.mapa { width: 100%; max-height: 82vh; justify-self: center; overflow: visible; }
.mapa__uf { font: 800 160px/1 var(--f-titulo); fill: rgb(var(--branco-rgb) / .05); letter-spacing: -0.04em; }
.mapa__rotas path { fill: none; stroke: var(--verde); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; opacity: .75; }
.cidade circle { fill: var(--verde); stroke: var(--noite); stroke-width: 4; transform-box: fill-box; transform-origin: center; }
.cidade--base circle { fill: var(--branco); stroke: var(--verde); stroke-width: 6; }
.cidade text { font: 700 26px/1 var(--f-titulo); fill: var(--branco); paint-order: stroke; stroke: var(--noite); stroke-width: 8px; }
.cidade--base text { font-size: 32px; fill: var(--verde); }
.cidade:hover circle { fill: var(--branco); }

/* ---------- Equipe ---------- */
.equipe__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.pessoa { display: grid; gap: .4rem; }
.pessoa__foto { aspect-ratio: 4 / 5; border-radius: var(--raio); background: linear-gradient(160deg, var(--roxo), var(--noite)); display: grid; place-items: center; margin-bottom: .8rem; overflow: hidden; position: relative; }
.pessoa__foto span { font: 600 var(--t-legenda)/1 var(--f-titulo); color: rgb(var(--branco-rgb) / .5); letter-spacing: var(--espaco-rotulo); text-transform: uppercase; }
.pessoa__foto::after { content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--verde); opacity: .18; bottom: -12%; right: -10%; transition: transform var(--dur-cena) var(--ease); }
.pessoa:hover .pessoa__foto::after { transform: scale(2.6); }
.pessoa h3 { font-size: var(--t-3); color: var(--roxo); }
.pessoa__papel { font-weight: 700; color: var(--texto-2); }
.pessoa__extra { font-size: var(--t-legenda); color: var(--texto-3); }

/* ---------- Jeito Broccoli ---------- */
.jeito { padding: var(--secao) 0; }
.jeito__lista { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3.5rem) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 5vw, 5rem); }
.jeito__lista li { border-top: 2px solid var(--roxo); padding-top: 1.2rem; display: grid; gap: .5rem; }
.jeito__lista span { font: 800 1rem/1 var(--f-titulo); }
.jeito__lista h3 { font-size: var(--t-2); color: var(--roxo); }
.jeito__lista p { font-size: var(--t-3); font-weight: 500; max-width: 26rem; }

/* ---------- Bastidores ---------- */
.sb-bastidores { padding-bottom: var(--secao); overflow: hidden; }
.sb-bastidores__grade { display: flex; gap: 1rem; padding: clamp(2rem, 4vw, 3rem) var(--gutter) 0; width: max-content; will-change: transform; }
.sb-bastidores__grade img { height: clamp(260px, 46vh, 460px); width: auto; border-radius: var(--raio-p); }
.sb-acoes { display: flex; flex-wrap: wrap; gap: .7rem; }

@media (max-width: 900px) {
  .particulas__grade, .rotas__grade { grid-template-columns: 1fr; }
  .equipe__grade { grid-template-columns: 1fr 1fr; }
  .jeito__lista { grid-template-columns: 1fr; }
  .sb-bastidores__grade { width: auto; overflow-x: auto; }
  .mapa { max-height: none; }
}
@media (max-width: 560px) { .equipe__grade { grid-template-columns: 1fr; } }
.sem-movimento .manifesto .palavra, html:not(.js) .manifesto .palavra { opacity: 1; }
.js:not(.sem-movimento) [data-pessoa], .js:not(.sem-movimento) [data-jeito] { opacity: 0; }

/* ponto do pontilhado do mapa (sem estilo inline, por causa da CSP) */
.pontilhado { fill: rgb(var(--branco-rgb) / .12); }