/* vivo.css — capítulo de dados vivos (homologação v2, 27/09/2026).
   A técnica é a do atlas ("dados vivos", plugin de design): os MESMOS objetos mudam de lugar a cada
   passo da rolagem; a posição é sempre o dado. Aqui em SVG, com projeção oblíqua, porque os
   conjuntos são pequenos (29 países, 80 fontes, 15 pessoas).
   O fundo do capítulo troca com o passo, nas quatro cores do canon, sem escala tonal. */
.vivo{--vivo-bg:var(--white);position:relative;overflow-x:clip;background:var(--vivo-bg);color:var(--black);transition:background .55s var(--ease),color .55s var(--ease)}
.vivo[data-fundo="vermelho"]{--vivo-bg:var(--red);color:var(--white)}
.vivo[data-fundo="preto"]{--vivo-bg:var(--black);color:var(--white)}
.vivo[data-fundo="cinza"]{--vivo-bg:var(--gray)}
.vivo__grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);max-width:1320px;margin-inline:auto;padding-inline:var(--gutter);gap:clamp(24px,4vw,64px)}
.vivo__palco{position:sticky;top:var(--topo);height:calc(100svh - var(--topo));grid-column:2;grid-row:1;display:flex;align-items:center}
.vivo__cena{position:relative;width:100%;height:min(78svh,640px)}
.vivo__cena svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;touch-action:pan-y}
.vivo__rotulos{position:absolute;inset:0;pointer-events:none}
.vivo__rot{position:absolute;transform:translate(-50%,-100%);font-size:12px;font-weight:700;line-height:1.1;white-space:nowrap;padding:2px 5px;background:var(--fundo-rot,var(--white));color:currentColor;opacity:0;transition:opacity .35s var(--ease)}
.vivo__rot.on{opacity:1}
.vivo__rot.destaque{color:var(--red)}
.vivo[data-fundo="vermelho"] .vivo__rot{--fundo-rot:var(--red)}
.vivo[data-fundo="vermelho"] .vivo__rot.destaque{color:var(--white);background:var(--black)}
.vivo[data-fundo="preto"] .vivo__rot{--fundo-rot:var(--black)}
.vivo[data-fundo="cinza"] .vivo__rot{--fundo-rot:var(--gray)}
.vivo__eixo{position:absolute;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:.85}
.vivo__passos{grid-column:1;grid-row:1;padding:12svh 0 30svh}
.vivo__passo{min-height:92svh;display:flex;flex-direction:column;justify-content:center}
.vivo__passo:last-child{min-height:70svh}
.vivo__passo .num{font-weight:900;font-size:clamp(56px,8vw,112px);line-height:.9;letter-spacing:-.04em;margin:0 0 6px}
.vivo__passo .num small{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-top:10px;line-height:1.3}
.vivo__passo h2{font-size:clamp(28px,3.6vw,48px)}
.vivo__passo .fine{margin-top:6px}
.vivo .eyebrow{color:var(--red)}
.vivo[data-fundo="vermelho"] .eyebrow,.vivo[data-fundo="preto"] .eyebrow{color:var(--white)}
.vivo[data-fundo="vermelho"] .regua .r,.vivo[data-fundo="preto"] .regua .r{color:var(--white)}
.vivo__dica{position:absolute;z-index:3;pointer-events:none;min-width:170px;max-width:240px;padding:10px 12px;background:var(--black);color:var(--white);font-size:13px;line-height:1.35;opacity:0;transition:opacity .2s}
.vivo__dica.on{opacity:1}
.vivo__dica b{display:block;font-size:14px;margin-bottom:2px}
.vivo[data-fundo="preto"] .vivo__dica{background:var(--white);color:var(--black)}
.vivo__dados{max-width:1320px;margin-inline:auto;padding:0 var(--gutter) clamp(48px,8vh,96px)}
.vivo__dados details{border-top:1px solid currentColor;padding-top:14px}
.vivo__dados summary{cursor:pointer;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.vivo__tabela{overflow-x:auto;margin-top:14px}
.vivo__tabela table{border-collapse:collapse;font-size:14px;min-width:520px;width:100%}
.vivo__tabela th,.vivo__tabela td{text-align:left;padding:6px 12px 6px 0;border-bottom:1px solid color-mix(in srgb,currentColor 25%,transparent);font-variant-numeric:tabular-nums}
.vivo__tabela td.n,.vivo__tabela th.n{text-align:right}
.vivo__fonte{font-size:13px;opacity:.8;margin-top:12px;max-width:80ch}
.vivo__aviso{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;padding:4px 8px;margin-bottom:14px}
@media (max-width:860px){
  .vivo__grade{display:block;padding-inline:0}
  .vivo__palco{top:var(--topo);height:46svh;z-index:3;padding-inline:var(--gutter);background:var(--vivo-bg);transition:background .55s var(--ease)}
  .vivo__cena{height:100%}
  .vivo__passos{position:relative;z-index:1;padding:4svh var(--gutter) 20svh}
  .vivo__passo{min-height:70svh;justify-content:flex-end;padding-bottom:6svh}
  .vivo__passo>div{padding:16px 0}
  .vivo__passo .num{font-size:clamp(48px,14vw,72px)}
  .vivo__passo h2{font-size:clamp(26px,7.4vw,34px)}
}
@media (prefers-reduced-motion:reduce){.vivo,.vivo__rot{transition:none}}