/* voz · #avaliacoes · papel — ecomapa de vozes (fig. 4) */
.voz { padding-bottom: calc(var(--sec-pad) * .8); }
.voz-malha {
  position: absolute; inset: -8%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 62% in oklab, color-mix(in oklab, var(--p-ambar) 11%, transparent), transparent) 0 0 / 100% 100% no-repeat,
    radial-gradient(closest-side at 12% 18% in oklab, var(--p-papel-2), transparent) 0 0 / 80% 70% no-repeat,
    radial-gradient(closest-side at 92% 88% in oklab, var(--p-papel-3), transparent) 0 0 / 70% 70% no-repeat,
    radial-gradient(closest-side at 86% 12% in oklab, color-mix(in oklab, var(--p-papel-3) 60%, transparent), transparent) 0 0 / 60% 60% no-repeat;
  animation: voz-respira 32s ease-in-out infinite alternate;
}
@keyframes voz-respira { to { transform: translate3d(1.5%, -2%, 0) scale(1.05); } }

/* topo */
.voz-topo {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px 64px;
  align-items: end; max-width: 1320px; margin: 0 auto;
}
.voz-topo .fig { grid-column: 1 / -1; }
.voz-tit { max-width: 11em; font-size: clamp(44px, 6.4vw, 104px); line-height: .96; }
.voz-lado { padding-bottom: .6em; }
.voz-apoio { margin: 0; font-size: 19px; }
.voz-apoio strong { color: var(--p-tinta); font-weight: 600; }
.voz-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; min-height: 44px;
  font-family: var(--c-f-mono); font-size: 14px; letter-spacing: .03em; color: var(--p-tinta);
  text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--p-aco) 40%, transparent);
  transition: border-color .3s, color .3s;
}
.voz-link:hover, .voz-link:focus-visible { border-color: var(--p-ambar); color: var(--p-ambar-txt); }

/* palco: o núcleo e as falas em volta */
.voz-palco {
  position: relative; margin: clamp(56px, 7vw, 104px) auto 0; max-width: 1400px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px minmax(0, 1fr);
  grid-template-areas:
    "a b c"
    "d n e"
    "f g h"
    "x x x";
  gap: 40px 48px; align-items: center;
}
.voz-fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.voz-fios path { fill: none; stroke: var(--p-aco); stroke-width: 1.6; stroke-linecap: round; }
.voz-fios .voz-f--forte { stroke-width: 2.6; stroke: var(--p-tinta-2); }
.voz-fios .voz-f--tenue { stroke-dasharray: 6 7; stroke-width: 1.3; }
.voz-fios .voz-pulso { fill: var(--p-ambar); }

.voz-nucleo { grid-area: n; position: relative; z-index: 1; display: grid; justify-items: center; padding: 50px 0; }
.voz-tracos { position: absolute; left: 50%; top: 0; width: 400px; height: 400px; translate: -50% 0; overflow: visible; }
.voz-tracos line { stroke: var(--p-aco); stroke-width: 1.4; stroke-linecap: round; }
.voz-tracos .voz-t--sem { stroke: color-mix(in oklab, var(--p-aco) 45%, transparent); }
.voz-tracos .voz-t--a { stroke: var(--p-ambar); stroke-width: 2.6; }
.voz-conta { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid color-mix(in oklab, var(--p-aco) 22%, transparent); font-family: var(--c-f-mono); font-size: 13.5px; line-height: 1.65; letter-spacing: .02em; color: var(--p-aco); }
.voz-conta__k { display: inline-flex; gap: 5px; margin-right: 10px; vertical-align: -2px; }
.voz-conta__k i { width: 1.6px; height: 14px; background: var(--p-aco); }
.voz-conta__k i.a { width: 2.6px; height: 17px; margin-top: -3px; background: var(--p-ambar); }
.voz-conta__a { color: var(--p-ambar-txt); }
.voz-nucleo__aro {
  position: relative; width: 300px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  border: 1.6px solid var(--p-aco);
  background: radial-gradient(closest-side in oklab, var(--p-papel), color-mix(in oklab, var(--p-papel) 80%, transparent));
}
.voz-nucleo__aro::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1.4px dotted color-mix(in oklab, var(--p-aco) 70%, transparent);
}
.voz-nucleo__nota { margin: 0; display: grid; justify-items: center; gap: 6px; }
.voz-nucleo__cinco {
  font-weight: 520; font-variation-settings: "wdth" 76, "opsz" 12; font-size: 120px; line-height: .9; letter-spacing: -.02em;
}
.voz-nucleo__estrelas { color: var(--p-ambar); letter-spacing: .14em; font-size: 18px; }
.voz-nucleo__qtd { line-height: 1.4; font-family: var(--c-f-mono); font-size: 14px; letter-spacing: .03em; color: var(--p-aco); }

/* satélites (falas) */
.voz-sat { position: relative; z-index: 1; margin: 0; max-width: 25em; }
.voz-sat p { margin: 0; font-style: italic; font-weight: 380; font-variation-settings: "wdth" 88; font-size: 19px; line-height: 1.45; color: var(--p-tinta); }
.voz-sat footer { margin-top: 10px; font-family: var(--c-f-mono); font-size: 13.5px; letter-spacing: .02em; color: var(--p-aco); }
.voz-sat--grande { max-width: 13em; }
.voz-sat--grande p { font-size: clamp(24px, 2.1vw, 31px); line-height: 1.22; font-weight: 320; }
.voz-sat--grande footer { font-size: 14px; }
.voz-marca { background: none; color: var(--p-ambar-txt); font-weight: 440; }
.voz-marca > span {
  background: linear-gradient(color-mix(in oklab, var(--p-ambar) 42%, transparent), color-mix(in oklab, var(--p-ambar) 42%, transparent)) 0 92% / 100% .16em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.1s var(--c-ease) .55s;
}
.js .voz-sat:not(.is-on) .voz-marca > span { background-size: 0% .16em; }

.voz-sat--a { grid-area: a; } .voz-sat--b { grid-area: b; } .voz-sat--c3 { grid-area: c; }
.voz-sat--d { grid-area: d; } .voz-sat--e { grid-area: e; }
.voz-sat--f { grid-area: f; } .voz-sat--g { grid-area: g; } .voz-sat--h { grid-area: h; }
.voz-sat--l { justify-self: end; text-align: right; }
/* quebra a grade: cada fala numa distância diferente do núcleo */
.voz-sat--a { translate: -6% 10px; } .voz-sat--c3 { translate: 4% 64px; }
.voz-sat--b { align-self: start; } .voz-sat--f { translate: 8% -30px; } .voz-sat--h { translate: -4% 40px; }
.voz-sat--g { align-self: end; translate: 0 30px; }
.voz-sat--r { justify-self: start; }
.voz-sat--c { justify-self: center; text-align: center; max-width: 19em; }

.voz-sat__no {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: var(--p-papel); border: 1.6px solid var(--p-aco);
  transition: background .5s, border-color .5s, box-shadow .5s;
}
.voz-sat--l .voz-sat__no { right: -30px; top: .55em; }
.voz-sat--r .voz-sat__no { left: -30px; top: .55em; }
.voz-sat--b .voz-sat__no { left: calc(50% - 7px); bottom: -28px; }
.voz-sat--g .voz-sat__no { left: calc(50% - 7px); top: -28px; }
.voz-sat--grande .voz-sat__no { border-color: var(--p-tinta-2); border-width: 2px; }
.voz-sat.voz-acende .voz-sat__no { background: var(--p-ambar); border-color: var(--p-ambar); box-shadow: 0 0 0 6px color-mix(in oklab, var(--p-ambar) 22%, transparent); }

.voz-legenda { grid-area: x; margin-top: 20px; text-align: center; font-family: var(--c-f-mono); font-size: 13px; letter-spacing: .03em; color: var(--p-aco); }

/* entrada: cada fala aparece quando a ligação chega */
.js .voz-sat > p, .js .voz-sat > footer { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--c-ease), transform .8s var(--c-ease); }
.js .voz-sat > footer { transition-delay: .12s; }
.js .voz-sat .voz-sat__no { opacity: 0; transform: scale(.4); transition: opacity .4s, transform .5s var(--c-ease), background .5s, border-color .5s, box-shadow .5s; }
.js .voz-sat.is-on > p, .js .voz-sat.is-on > footer { opacity: 1; transform: none; }
.js .voz-sat.is-on .voz-sat__no { opacity: 1; transform: none; }

/* celular e tablet em pé: núcleo em cima, falas numa coluna */
@media (max-width: 999.98px) {
  .voz-topo { grid-template-columns: minmax(0, 1fr); }
  .voz-palco { display: flex; flex-direction: column; align-items: stretch; gap: 44px; }
  .voz-nucleo { margin-bottom: 8px; order: 0; }
  .voz-sat { translate: none !important; order: 3; align-self: stretch !important; }
  .voz-sat--d { order: 1; } .voz-sat--e { order: 2; }
  .voz-legenda { order: 9; }
  .voz-sat--grande { max-width: 36em; }
  .voz-sat, .voz-sat--l, .voz-sat--r, .voz-sat--c { justify-self: auto; text-align: left; max-width: 36em; padding-left: 40px; }
  .voz-sat .voz-sat__no, .voz-sat--l .voz-sat__no, .voz-sat--r .voz-sat__no, .voz-sat--b .voz-sat__no, .voz-sat--g .voz-sat__no { left: 0; right: auto; top: .45em; bottom: auto; }
  .voz-legenda { margin-top: 0; text-align: left; }
}
@media (max-width: 520px) {
  .voz-nucleo { padding-top: 38px; }
  .voz-tracos { width: 300px; height: 300px; }
  .voz-nucleo__aro { width: 226px; }
  .voz-nucleo__cinco { font-size: 96px; }
  .voz-conta { font-size: var(--t-mini); }
  .voz-nucleo { padding-bottom: 30px; }
  .voz-tit { font-size: clamp(40px, 11.6vw, 60px); }
  .voz-sat p { font-size: 18px; }
  .voz-sat--grande p { font-size: 25px; }
  .voz-sat footer { font-size: var(--t-mini); }
  .voz-legenda { font-size: var(--t-mini); }
}

@media (prefers-reduced-motion: reduce) {
  .voz-malha { animation: none; }
  .js .voz-sat > p, .js .voz-sat > footer, .js .voz-sat .voz-sat__no { opacity: 1; transform: none; }
}
