/* vo · Vozes: 69 facetas, uma por avaliação; as citadas ficam acesas */
.vo-cabeca { display: grid; row-gap: 1.6rem; }
.vo-titulo { font-size: clamp(2.9rem, 7.1vw, 7rem); line-height: .94; }

.vo-palco { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); align-items: end; margin-top: clamp(2rem, 4vw, 3.5rem); }
.vo-nota { position: relative; z-index: 2; padding-bottom: clamp(1rem, 3vw, 3rem); }
.vo-cinco { font-family: var(--f-titulo); font-size: clamp(11rem, 31vw, 29rem); line-height: .76; letter-spacing: -.045em; color: var(--tinta); margin-left: -.05em; white-space: nowrap; width: max-content; }
.vo-estrelas { margin-top: clamp(1.4rem, 2.6vw, 2.4rem); font-size: 1.35rem; letter-spacing: .32em; color: var(--rosa); }
.vo-conta { margin-top: .8rem; max-width: 19em; }
.vo-elo { margin-top: .8rem; }

.vo-mosaico { margin: 0 0 0 -7%; position: relative; z-index: 1; }
.vo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.vo-cinta { stroke: var(--aresta); stroke-width: 3; }
.vo-cinta-fio { fill: none; stroke: var(--rosa); stroke-opacity: .6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.vo-f-fundo { stroke: var(--aresta); stroke-width: 2.5; }
/* as oito se acendem uma por vez, devagar, uma única vez */
.js .vo-mosaico .vo-f-g { opacity: 0; }
.js .vo-mosaico.wf-visto .vo-f-g { animation: vo-acende 1.3s var(--suave) both; animation-delay: calc(.5s + var(--n) * .5s); }
@keyframes vo-acende { from { opacity: 0; translate: 6px 10px; } to { opacity: 1; translate: 0 0; } }
.vo-f { stroke: var(--aresta); stroke-width: 2.5; stroke-linejoin: round; }
.vo-luz { mix-blend-mode: soft-light; pointer-events: none; }
.vo-escuro { mix-blend-mode: multiply; pointer-events: none; }
.vo-f-sombra { fill: #7e4a44; opacity: .28; transform: translate(7px, 9px); }
.vo-f-acesa { fill: #fffaf3; stroke: var(--rosa); stroke-width: 2; transition: fill .5s; }
.vo-f-g { cursor: default; transition: transform .7s var(--suave); }
.vo-f-g.vo-foco { transform: translate(-5px, -7px); }
.vo-f-g.vo-foco .vo-f-acesa { stroke: var(--tinta); stroke-width: 3; }
.vo-f-n { font-family: var(--f-titulo); font-size: 44px; fill: var(--tinta); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.vo-legenda { margin-top: .6rem; text-align: right; }

/* ───────── as frases ───────── */
.vo-vozes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: clamp(3.5rem, 7vw, 6.5rem); margin-top: clamp(4rem, 8vw, 7.5rem); }
.vo-grupo { display: grid; align-content: start; row-gap: clamp(1.6rem, 2.6vw, 2.4rem); }
.vo-grupo-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--fio); }
.vo-dado { display: flex; align-items: flex-end; gap: .9rem; }
.vo-dado b { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(3.4rem, 5.6vw, 5.2rem); line-height: .8; color: var(--tinta); }
.vo-dado span { font-size: var(--t-mini); line-height: 1.35; color: var(--tinta-suave); max-width: 13em; }
.vo-grupo-cab { align-items: flex-end; }
.vo-voz { position: relative; margin: 0; padding-left: 3.4rem; }
.vo-chip { position: absolute; left: 0; top: .1rem; display: grid; place-items: center; width: 2.7rem; height: 2.5rem; background: var(--rosa); clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%); transition: background-color .5s; }
.vo-chip::before { content: ""; position: absolute; inset: 1.5px 2.5px; background: #fffaf3; clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%); }
.vo-chip b { position: relative; font-family: var(--f-titulo); font-weight: 400; font-size: 1.05rem; color: var(--tinta); }
.vo-voz:nth-of-type(even) .vo-chip, .vo-voz:nth-of-type(even) .vo-chip::before { clip-path: polygon(0 0, 66% 0, 100% 100%, 34% 100%); }
.vo-voz.vo-foco .vo-chip { background: var(--tinta); }
.vo-voz .wf-fala { text-wrap: pretty; }
.vo-voz-g .wf-fala { font-size: clamp(2.3rem, 5.4vw, 5.2rem); line-height: 1; letter-spacing: -.01em; }
.vo-voz-m .wf-fala { font-size: clamp(1.6rem, 2.7vw, 2.6rem); line-height: 1.12; }
.vo-voz-p .wf-fala { font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.25; }

.vo-g-fica { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: inherit; }
.vo-g-fica .vo-grupo-cab { grid-column: 1 / -1; }
.vo-g-fica .vo-voz-g { grid-column: 1 / 9; }
.vo-g-fica .vo-voz:last-child { grid-column: 9 / -1; align-self: end; }
.vo-g-verdade { grid-column: 1 / 8; }
.vo-g-verdade .vo-voz-p { margin-left: 18%; }
.vo-g-equipe { grid-column: 9 / -1; }
.vo-g-acolhe { grid-column: 3 / -1; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 4rem); }
.vo-g-acolhe .vo-grupo-cab { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .vo-palco { grid-template-columns: 1fr; }
  .vo-nota { display: contents; }
  .vo-cinco { order: 1; position: relative; z-index: 2; font-size: clamp(10rem, 50vw, 19rem); }
  .vo-mosaico { order: 2; margin: -2.6rem calc(var(--margem) * -.4) 0 14%; }
  .vo-palco > .vo-nota > p:not(.vo-cinco) { order: 3; }
  .vo-estrelas { margin-top: 1.6rem; }
  .vo-legenda { text-align: left; }
  .vo-vozes { grid-template-columns: 1fr; }
  .vo-grupo, .vo-g-fica, .vo-g-acolhe { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .vo-g-fica .vo-voz-g, .vo-g-fica .vo-voz:last-child { grid-column: 1 / -1; }
  .vo-g-verdade .vo-voz-p { margin-left: 0; }
  .vo-f-n { font-size: 56px; }
}
@media (max-width: 600px) {
  .vo-voz { padding-left: 3.2rem; }
  .vo-voz-g { padding-left: 0; padding-top: 3.1rem; }
  .vo-voz-g .vo-chip { top: 0; }
  .vo-voz-p .wf-fala { font-size: 1.25rem; }
  .vo-grupo-cab { flex-direction: column; align-items: flex-start; gap: 1rem; }
}