/* 05 · perfil — uma foto real do pelotão dos 21 km dividida pela linha amarela entre a corredora e o
   corredor. Tudo sob #perfil.
   A foto (3840×2561) é posta em escala para que o ponto x = 0,745 da foto — o vão entre os dois atletas —
   caia no meio da tela e a borda direita da foto ainda cubra a tela: largura ≥ 196% da tela
   (0,5 + 0,255·w ≥ 1) ou 150% da altura em tela em pé; rostos (y ≈ 0,40 da foto) a ~45% da altura. */
#perfil .pf-stage { --split: 50%; --w: max(196vw, 150svh); --h: calc(var(--w) * 2561 / 3840); background: var(--acai-dark); }
#perfil .pf-window { position: absolute; inset: 0; overflow: hidden; background: var(--acai-dark); }
#perfil .pf-photo { position: absolute; margin: 0; width: var(--w); height: var(--h); max-width: none; left: calc(50% - .745 * var(--w)); top: clamp(calc(100svh - var(--h)), calc(45svh - .40 * var(--h)), 0px); }
#perfil .pf-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; will-change: transform; transform-origin: 74.5% 40%; }
#perfil .pf-credit { position: absolute; right: 16px; top: calc(var(--hud-h) + 14px); z-index: 2; }

#perfil .pf-scrim-b { background: linear-gradient(0deg, rgba(14, 7, 19, .9) 0%, rgba(14, 7, 19, .62) 22%, rgba(14, 7, 19, .12) 46%, rgba(14, 7, 19, 0) 60%); }
#perfil .pf-top { background: linear-gradient(180deg, rgba(14, 7, 19, .88) 0%, rgba(14, 7, 19, .48) 17%, rgba(14, 7, 19, 0) 34%); }
/* a linha nasce abaixo do título: com o texto 10% maior o título de uma linha só (1280, tablet) passava do
   meio da tela e a linha cortava o "E" de GENTE. --pf-head-b = base do título + folga, medida pelo JS no refresh */
#perfil .pf-split { position: absolute; top: max(clamp(170px, 26vh, 250px), var(--pf-head-b, 0px)); bottom: 0; left: var(--split); width: 4px; margin-left: -2px; z-index: 2; background: var(--honey); box-shadow: 0 0 24px rgba(244, 178, 35, .6); transform-origin: 50% 0; }

#perfil .pf-wrap { position: relative; z-index: 3; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding-top: calc(var(--hud-h) + clamp(28px, 5vh, 56px)); padding-bottom: clamp(28px, 6vh, 64px); }
#perfil .pf-head { display: grid; justify-items: start; text-align: left; gap: 10px; max-width: 62%; } /* à esquerda, acima da corredora: o boné do corredor sobe até a faixa do título */
#perfil .pf-head .h2 { text-wrap: balance; font-size: calc((clamp(40px, 4.6vw, 80px)) * var(--ts, 1)); text-shadow: 0 2px 24px rgba(14, 7, 19, .55); }
#perfil .pf-nums { align-self: end; }
#perfil .pf-n { display: inline-flex; align-items: center; gap: .18em; font-size: calc((clamp(76px, 9.6vw, 176px)) * var(--ts, 1)); color: var(--offwhite); filter: drop-shadow(0 6px 30px rgba(14, 7, 19, .6)); }
#perfil .pf-stat--r { justify-items: end; text-align: right; }
#perfil .pf-sym { width: .42em; height: .62em; fill: none; stroke: var(--honey); stroke-width: 5; stroke-linecap: round; overflow: visible; }
#perfil .pf-stat--r .pf-sym { width: .6em; }
#perfil .pf-stat .stat__l { font-size: calc((clamp(18px, .8vw + 10px, 26px)) * var(--ts, 1)); color: var(--offwhite); }
#perfil .pf-age { justify-self: center; margin-top: clamp(20px, 4vh, 44px); }
#perfil .pf-age b { font-weight: 900; font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
  #perfil .pf-nums { grid-template-columns: 1fr 1fr; }
  #perfil .pf-nums > .stat { grid-column: auto; }
}