/* Sobre: seções em campo, só com tokens (docs/design.md "Sobre" e "Redesign vivo"). */
body[data-pagina="sobre"] main { padding-block: 0; min-height: 0; }
.sobre-sec.campo--mare { padding-block: calc(var(--borda-mare-altura) + var(--esp-8)) var(--esp-9); }
.sobre-sec h2 { margin: 0; }
.sobre-titulo { font-size: var(--texto-2xl); font-weight: var(--peso-preto); letter-spacing: var(--tracking-preto); line-height: var(--entrelinha-display); color: var(--campo-realce); }
.sobre-titulo::after { content: ""; display: block; width: var(--esp-9); height: var(--esp-2); margin-top: var(--esp-4); background: var(--realce-2); }

/* SVG decorativo: contorno, na margem, nunca atrás de texto */
.deco { display: block; height: auto; fill: none; stroke: var(--campo-realce); stroke-width: var(--deco-traco); stroke-linecap: round; stroke-linejoin: round; opacity: var(--deco-opacidade); }
.deco path { vector-effect: non-scaling-stroke; }

/* 1. Abertura: nome em Black e retrato em arco, cinza sobre a cor */
.sobre-abertura { padding-block: var(--esp-8) calc(var(--esp-9) + var(--borda-mare-altura)); }
.sobre-abertura__grade { display: grid; gap: var(--esp-6); }
.sobre-abertura__grade > * { min-width: 0; }
.sobre-nome { font-size: var(--texto-4xl); font-weight: var(--peso-preto); letter-spacing: var(--tracking-preto); line-height: var(--entrelinha-display); color: var(--cor-mare-funda); }
.sobre-nome span { display: block; }
/* Retrato: foto em cores, arco alto, cobrindo a coluna; bloco de cor atrás (deslocado) e fio em arco do outro lado. */
.retrato { position: relative; width: min(100%, 30rem); margin: 0 auto; padding: 0 var(--sobre-deslocamento) var(--sobre-deslocamento) var(--sobre-deslocamento); }
.retrato::before, .retrato::after { content: ""; position: absolute; border-radius: 999px 999px 0 0; pointer-events: none; }
.retrato::before { inset: var(--sobre-deslocamento) 0 0 var(--sobre-deslocamento); background: var(--sobre-bloco); }
.retrato::after { inset: 0 var(--sobre-deslocamento) var(--sobre-deslocamento) 0; border: var(--filete) solid var(--sobre-duotone-luz); z-index: 2; }
.retrato__moldura { position: relative; z-index: 1; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--sobre-duotone-luz); box-shadow: var(--sombra-quadro); }
.retrato img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.deco--raizes { width: var(--esp-10); }
@media (min-width: 56rem) {
  .sobre-abertura__grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--esp-8); grid-template-rows: auto 1fr; }
  .sobre-nome { grid-column: 1; grid-row: 1; align-self: end; }
  .retrato { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: end; width: min(100%, 34rem); margin: 0; }
  .deco--raizes { grid-column: 1; grid-row: 2; width: calc(2 * var(--esp-10)); }
}

/* 2. Declaração: campo floresta, o 1o parágrafo em Light grande */
.sobre-decl__grade { display: grid; gap: var(--esp-7); }
.sobre-decl__grade > * { min-width: 0; }
.declaracao p { font-size: var(--texto-base); line-height: var(--entrelinha-corpo); }
.declaracao p:first-child { font-size: var(--texto-xl); font-weight: var(--peso-leve); line-height: var(--entrelinha-titulo); letter-spacing: var(--tracking-titulo); max-width: var(--medida-destaque); margin-bottom: var(--esp-7); }
.deco--folha { width: var(--esp-10); justify-self: end; }
@media (min-width: 56rem) {
  .sobre-decl__grade { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--esp-9); align-items: start; }
  .deco--folha { width: calc(1.5 * var(--esp-10)); }
}

/* 3 e 4. Biografia e currículo: título à esquerda, texto à direita no desktop */
.sobre-duas { display: grid; gap: var(--esp-6); }
.sobre-duas > * { min-width: 0; }
.sobre-corpo { font-size: var(--texto-lg); }
.sobre-corpo p:last-child { margin-bottom: 0; }
.sobre-curriculo__cabeca { display: grid; gap: var(--esp-6); align-content: start; }
.deco--mare { width: var(--esp-10); }
@media (min-width: 56rem) {
  .sobre-duas { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--esp-8); align-items: start; }
  .sobre-curriculo__cabeca { position: sticky; top: var(--esp-6); }
  .deco--mare { width: calc(2 * var(--esp-10)); }
}

/* Linha do tempo: um bloco por ano; traço, ponto e ano entram ao rolar */
.linha-tempo { --col-ano: 0px; --col-linha: var(--esp-7); margin: 0; }
.ano { position: relative; padding: 0 0 var(--esp-7) var(--col-linha); }
.ano::before, .ano::after { content: ""; position: absolute; }
.ano::before { top: 0; bottom: 0; left: calc((var(--linha-tempo-ponto) - var(--linha-tempo-traco)) / 2); width: var(--linha-tempo-traco); background: var(--linha-tempo-cor); transform-origin: top; transition: transform var(--mov-lento) var(--curva-saida) calc(var(--i, 0) * var(--mov-escalonar) + var(--mov-escalonar)); }
.ano::after { top: calc(var(--texto-2xl) * var(--entrelinha-titulo) / 2 - var(--linha-tempo-ponto) / 2); left: 0; width: var(--linha-tempo-ponto); height: var(--linha-tempo-ponto); border-radius: 50%; background: var(--campo-realce); box-shadow: 0 0 0 var(--linha-tempo-traco) var(--campo); transition: transform var(--mov-medio) var(--curva-saida) calc(var(--i, 0) * var(--mov-escalonar)); }
.ano:first-child::before { top: calc(var(--texto-2xl) * var(--entrelinha-titulo) / 2); }
.ano:last-child::before { bottom: var(--esp-7); }
.ano dt { font-size: var(--texto-2xl); font-weight: var(--peso-preto); line-height: var(--entrelinha-titulo); letter-spacing: var(--tracking-preto); color: var(--campo-realce); margin-bottom: var(--esp-3); transition: opacity var(--mov-lento) var(--curva-saida) calc(var(--i, 0) * var(--mov-escalonar) + var(--mov-escalonar)), transform var(--mov-lento) var(--curva-saida) calc(var(--i, 0) * var(--mov-escalonar) + var(--mov-escalonar)); }
.ano dd { margin: 0 0 var(--esp-3); max-width: var(--medida); font-size: var(--texto-base); line-height: var(--entrelinha-corpo); transition: opacity var(--mov-lento) var(--curva-saida) calc(var(--i, 0) * var(--mov-escalonar) + 2 * var(--mov-escalonar)); }
@media (min-width: 56rem) {
  .linha-tempo { --col-ano: calc(var(--esp-10) + var(--esp-6)); }
  .ano { display: grid; grid-template-columns: var(--col-ano) var(--col-linha) minmax(0, 1fr); align-items: baseline; padding-left: 0; }
  .ano dt { grid-column: 1; text-align: right; margin-bottom: 0; }
  .ano dd { grid-column: 3; }
  .ano::before { left: calc(var(--col-ano) + (var(--col-linha) - var(--linha-tempo-traco)) / 2); }
  .ano::after { left: calc(var(--col-ano) + (var(--col-linha) - var(--linha-tempo-ponto)) / 2); }
}

/* 5. Fechamento: campo nanquim, duas linhas grandes e tocáveis */
.fecho__lista { list-style: none; margin: var(--esp-7) 0 0; padding: 0; display: grid; gap: var(--esp-5); max-width: var(--medida); }
.fecho__lista a { display: block; min-height: var(--alvo-botao); padding-block: var(--esp-4); border-top: var(--linha-tempo-traco) solid var(--realce); font-size: var(--texto-xl); font-weight: var(--peso-leve); text-decoration: none; }
.fecho__lista a:hover { color: var(--campo-texto); text-decoration: none; }
.fecho__lista a { display: grid; grid-template-columns: 2rem 1fr; column-gap: var(--esp-3); align-items: start; text-decoration: none; }
.fecho__lista .ico { grid-row: 1; grid-column: 1; width: 2rem; height: 2rem; margin: calc((1lh - 2rem) / 2) 0 0; vertical-align: baseline; }
.fecho__lista small { grid-column: 2; }
.fecho__lista small { display: block; margin-top: var(--esp-1); font-size: var(--texto-base); font-weight: var(--peso-normal); color: var(--campo-texto); }

/* Movimento: a revelação genérica do bloco do ano é trocada pela do traço, do ponto e do ano.
   Sem JS (sem mov-ok) tudo aparece depois de 2,5 s, como no resto do site. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .linha-tempo .ano[data-revela] { opacity: 1; transform: none; transition: none; }
  .linha-tempo .ano[data-revela]:not(.revelado)::before { transform: scaleY(0); }
  .linha-tempo .ano[data-revela]:not(.revelado)::after { transform: scale(0); }
  .linha-tempo .ano[data-revela]:not(.revelado) > dt { opacity: 0; transform: translateX(var(--desloc-linha-tempo)); }
  .linha-tempo .ano[data-revela]:not(.revelado) > dd { opacity: 0; }
  :root:not(.mov-ok) .linha-tempo .ano[data-revela]::before, :root:not(.mov-ok) .linha-tempo .ano[data-revela]::after,
  :root:not(.mov-ok) .linha-tempo .ano[data-revela] > * { animation: mostrar 1ms linear 2.5s forwards; }
}