/* 19 · perspectiva — capítulo claro. A linha amarela sobe de 2026 (12.555, real) a 2027 (15 mil,
   estimativa); o número rola de 12.555 para 15.000 e assenta como "15 mil". Foto real do pelotão na
   curva sangrando à direita, dissolvida por máscara (não por véu). Tudo sob #perspectiva. */
#perspectiva .pp-stage { background: transparent; }

/* a foto: fora da grade, medida pela altura; dissolve à esquerda e no pé (duas máscaras em interseção) */
#perspectiva .pp-photo {
  position: absolute; top: 0; right: 0; z-index: 0; margin: 0;
  width: min(54%, 100svh * .9); height: min(100%, 1180px); overflow: hidden; background: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, transparent 0%, #000 26%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(0deg, transparent 0%, #000 26%);
  mask-composite: intersect;
}
#perspectiva .pp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 40%; transform-origin: 70% 60%; }
#perspectiva .pp-photo .credit { position: absolute; right: 16px; top: calc(var(--hud-h) + 14px); z-index: 2; }
#perspectiva .pp-checker { left: -16vw; bottom: -20vw; top: auto; }

#perspectiva .pp-wrap { position: relative; z-index: 2; }
#perspectiva .pp-lay { height: 100%; align-content: center; padding-top: calc(var(--hud-h) + clamp(8px, 2vh, 24px)); padding-bottom: clamp(24px, 5vh, 56px); }
#perspectiva .pp-copy { --span: 1 / 7; container-type: inline-size; display: grid; justify-items: start; align-content: center; gap: clamp(10px, 1.8vh, 20px); }

/* o número: 12.555 rola para 15.000 e o ".000" vira "mil" */
#perspectiva .pp-title { display: grid; justify-items: start; gap: .1em; margin: 0; }
#perspectiva .pp-hero { display: inline-flex; align-items: flex-start; font-size: calc((min(24svh, 40cqi)) * var(--ts, 1)); line-height: 1; color: var(--acai-dark); letter-spacing: -.01em; }
#perspectiva .pp-hero > span:not(.pp-swap), #perspectiva .pp-tail > span { display: block; height: 1em; line-height: 1; }
#perspectiva .pp-col { display: block; height: 1em; overflow: visible; clip-path: inset(.16em -.35em .07em); } /* janela do dígito (medida: tinta de .185em a .912em) */
#perspectiva .pp-strip { display: flex; flex-direction: column; }
#perspectiva .pp-strip > span { display: block; height: 1em; line-height: 1; }
#perspectiva .pp-swap { display: inline-grid; height: 1em; clip-path: inset(.16em -.35em .07em); }
#perspectiva .pp-swap > span { grid-area: 1 / 1; display: inline-flex; align-items: flex-start; justify-self: start; height: 1em; line-height: 1; }
#perspectiva .pp-mil { margin-left: .2em; }
#perspectiva .pp-sub { display: inline-grid; clip-path: inset(0 -.3em); font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: calc((clamp(22px, 1.3vw + 9px, 36px)) * var(--ts, 1)); line-height: 1.12; letter-spacing: .005em; color: var(--acai); }
#perspectiva .pp-sub > span { grid-area: 1 / 1; }

/* o gráfico: só dois marcos, sem eixo (não há número de 2023–2025 no material) */
#perspectiva .pp-chart { position: relative; width: 100%; aspect-ratio: 1000 / 300; margin: clamp(4px, 1vh, 12px) 0 0; }
#perspectiva .pp-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#perspectiva .pp-ghost { fill: none; stroke: var(--acai-light); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 12; opacity: .55; }
#perspectiva .pp-road { fill: none; stroke: var(--acai); stroke-width: 20; stroke-linecap: round; opacity: .92; }
#perspectiva .pp-route { stroke-width: 10; vector-effect: none; filter: drop-shadow(0 2px 6px rgba(244, 178, 35, .4)); }
#perspectiva .pp-dot { fill: var(--acai); stroke: var(--offwhite); stroke-width: 4; }
#perspectiva .pp-ring { fill: var(--offwhite); stroke: var(--honey); stroke-width: 6; }
#perspectiva .pp-pulse { fill: none; stroke: var(--honey); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
#perspectiva .pp-head { fill: var(--honey); stroke: var(--offwhite); stroke-width: 3; filter: drop-shadow(0 0 8px rgba(244, 178, 35, .7)); }
#perspectiva.pp--done .pp-pulse { animation: pp-pulse 2.2s var(--ease-out) infinite; }
@keyframes pp-pulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

#perspectiva .pp-pt { position: absolute; white-space: nowrap; }
#perspectiva .pp-pt b { color: var(--acai-dark); font-size: calc((clamp(17px, .7vw + 10px, 24px)) * var(--ts, 1)); }
#perspectiva .pp-pt span { color: var(--ink-text-2); }
#perspectiva .pp-pt--a { left: 7%; top: calc(77.3% - 30px); translate: -12px -100%; }
#perspectiva .pp-pt--b { right: calc(10% + 30px); top: 20.7%; translate: 0 -50%; text-align: right; }

/* 150% */
#perspectiva .pp-growth { display: inline-flex; align-items: center; gap: .7em; margin-top: clamp(4px, 1vh, 12px); padding-top: clamp(12px, 1.8vh, 20px); border-top: 1px solid var(--ink-line); }
#perspectiva .pp-growth__n { font-size: calc((clamp(44px, 3.6vw + 8px, 78px)) * var(--ts, 1)); color: var(--acai); }
#perspectiva .pp-growth__l { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: calc((clamp(16px, .6vw + 10px, 22px)) * var(--ts, 1)); line-height: 1.15; color: var(--ink-text-2); max-width: 17ch; text-wrap: balance; }

/* sem a foto (ainda em produção ou falhou): o gráfico ganha a largura e o xadrez vai para a direita */
#perspectiva.pp--nophoto .pp-photo { display: none; }
#perspectiva.pp--nophoto .pp-copy { --span: 1 / 11; }
#perspectiva.pp--nophoto .pp-hero { font-size: calc((min(24svh, 26cqi)) * var(--ts, 1)); }
#perspectiva.pp--nophoto .pp-checker { left: auto; right: -14vw; bottom: auto; top: -8vw; opacity: .09; }

/* tela em pé (tablet): a foto vai para o pé, dissolvendo para cima */
@media (max-aspect-ratio: 1/1) {
  #perspectiva .pp-photo { top: auto; bottom: 0; left: 0; width: 100%; height: 40%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%); mask-image: linear-gradient(180deg, transparent 0%, #000 38%); }
  #perspectiva .pp-photo .credit { top: auto; bottom: 14px; }
  #perspectiva .pp-copy { --span: 1 / -1; }
  #perspectiva .pp-lay { align-content: start; padding-top: calc(var(--hud-h) + 6vh); }
  #perspectiva .pp-hero { font-size: calc((min(15svh, 26cqi)) * var(--ts, 1)); }
  #perspectiva .pp-chart { width: 86%; }
}