/* /como-funciona: peças da animação (as cenas, o palco e os controlos vêm de listas.css). Tudo em px do palco 1280x720. */
.fz { display: grid; grid-template-columns: 560px 1fr; gap: 40px; align-items: center; }
.fz.fz-larga { grid-template-columns: 1fr; justify-items: center; }
.fz-svg { display: block; overflow: visible; }
.fz-dir { align-self: center; }
.fz-dir2 { position: absolute; right: 70px; top: 180px; width: 300px; }
.lp svg [data-t] { transform: none !important; transition: opacity .5s ease; }
.lp svg .nd[data-t], .lp svg .pp[data-t], .lp svg .deg[data-t] { transform-box: fill-box; transform-origin: center; transform: scale(.6) !important; transition: opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.lp svg .nd[data-t].on, .lp svg .pp[data-t].on, .lp svg .deg[data-t].on { transform: none !important; }
.lp svg .deg[data-t] { transform-origin: 50% 100%; transform: scaleY(.2) !important; }
.lp svg [data-t].off { opacity: 0 !important; }
.lp svg .ln { stroke: rgba(255,255,255,.45); stroke-width: 2; }
.lp svg .hl { stroke: var(--lp-o); stroke-width: 5; }
.lp svg .rep { stroke: var(--lp-o); stroke-width: 3; }
.lp svg .pp { stroke: rgba(255,255,255,.7); stroke-width: 2; }
.sv { fill: #fff; font: 700 30px var(--font-num); }
.sv.grande { font-size: 84px; }
.sv.med { font-size: 28px; }
.sv.peq { font-size: 22px; font-weight: 600; fill: var(--lp-t2); }
.sv.peq.b { fill: #fff; font-weight: 700; }
.fz-svg text { dominant-baseline: middle; }
.nota { display: flex; align-items: center; gap: 18px; }
.nota .ic { width: 46px; height: 46px; color: var(--lp-p); flex: none; }
.nota b { display: block; font-size: 28px; }
.nota small { display: block; font-size: 21px; color: var(--lp-t2); }
.ranking2 { padding: 22px 26px; min-width: 520px; }
.rk2 { display: flex; align-items: center; gap: 16px; padding: 7px 0; font-size: 26px; }
.rk2 .pos { width: 58px; color: var(--lp-o); font: 700 26px var(--font-num); opacity: 0; transition: opacity .5s; }
.rk2 .pos.on { opacity: 1; }
.rk2 .nm { width: 190px; font-weight: 600; }
.rk2 .b { flex: 1; background: var(--lp-p); }
.estrela { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.estrela .ic.big { width: 190px; height: 190px; color: #FFD24D; filter: drop-shadow(0 0 22px rgba(255,210,77,.5)); }
.fluxo { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.seta-v { padding-left: 24px; }
.seta-v .ic { width: 46px; height: 46px; color: var(--lp-t2); transform: rotate(0deg); }
.inst .ic { color: var(--lp-o); }
.lp svg .mini circle:first-child { stroke-width: 1.5; }
.inst-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inst-grid .cartao { padding: 14px 16px; }
.inst-grid .nota b { font-size: 24px; }
.rk2 .b { flex: none; }
.sv.mini { font-size: 17px; font-weight: 700; fill: #fff; }