/* vozes — o que os pacientes dizem (noite) · prefixo vz- */
.vz-cabeca { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: end; }

/* 109 pontos, um por opinião: os 75 que dizem "atencioso" acendem */
.vz-quadro { justify-self: end; width: min(100%, 26rem); }
.vz-pontos { display: grid; grid-template-columns: repeat(22, minmax(0, 1fr)); gap: clamp(5px, .55vw, 8px); }
.vz-pontos i { aspect-ratio: 1; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--tinta-noite) 32%, transparent); }
.vz-pontos i:nth-child(-n+75) { background: var(--ambar-luz); border-color: var(--ambar-luz); box-shadow: 0 0 8px 0 rgb(240 194 127 / .45); }
.js .vz-quadro[data-rev] .vz-pontos i:nth-child(-n+75) { background: transparent; border-color: color-mix(in oklab, var(--tinta-noite) 32%, transparent); box-shadow: none;
  transition: background .5s, border-color .5s, box-shadow .8s; transition-delay: calc(.5s + var(--k) * 22ms); }
.js .vz-quadro.wf-on .vz-pontos i:nth-child(-n+75) { background: var(--ambar-luz); border-color: var(--ambar-luz); box-shadow: 0 0 8px 0 rgb(240 194 127 / .45); }
.vz-numeros { list-style: none; margin: 1.4rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--linha-noite); display: grid; gap: .7rem; }
.vz-numeros li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: baseline; gap: .8rem; }
.vz-numeros b { font-family: var(--serif); font-weight: 400; font-size: 2.25rem; line-height: 1; color: var(--tinta-noite); font-variant-numeric: lining-nums; }
.vz-n-aceso b { color: var(--ambar-luz); }
.vz-numeros span { font-size: 1.0625rem; line-height: 1.35; color: var(--tinta-noite-suave); }

/* citações */
.vz-cita { margin: 0; }
.vz-cita p { margin: 0; font-family: var(--serif); color: var(--tinta-noite); line-height: 1.2; letter-spacing: -.01em; text-wrap: pretty; }
.vz-cita footer { margin-top: 1rem; display: flex; align-items: center; gap: .8rem; }
.vz-cita footer::before { content: ""; width: 1.6rem; height: 1px; background: var(--linha-noite); }
.vz-cita cite { font-style: normal; font-size: var(--t-mini); color: var(--tinta-noite-suave); letter-spacing: .02em; }

/* o gesto: um fio âmbar se desenha sob cada "atencioso" */
.vz-marca { background: none; color: inherit; position: relative; white-space: nowrap; }
.vz-marca::after { content: ""; position: absolute; left: .02em; right: .02em; bottom: .1em; height: max(1px, .04em); border-radius: 1px;
  background: linear-gradient(to right, var(--ambar), var(--ambar-luz)); box-shadow: 6px 0 12px -2px rgb(240 194 127 / .55); transform-origin: left center; }
.js [data-rev] .vz-marca::after { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.45,.05,.2,1); transition-delay: calc(var(--atraso, 0s) + .7s); }
.js [data-rev].wf-on .vz-marca::after { transform: scaleX(1); }

.vz-maior { margin: clamp(4rem, 7vw, 7rem) 0 0; max-width: 64rem; }
.vz-maior p { font-size: clamp(2.5rem, 1rem + 4.4vw, 5.6rem); line-height: 1.04; letter-spacing: -.022em; text-indent: -.42em; }
.vz-maior .vz-marca { color: var(--ambar-luz); }

.vz-mural { margin-top: clamp(4.5rem, 8vw, 8rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(3.5rem, 6vw, 6rem) clamp(1.5rem, 3vw, 3rem); align-items: end; }
.vz-a { grid-column: 1 / 8; } .vz-a p { font-size: clamp(1.6rem, 1.05rem + 1.3vw, 2.3rem); }
.vz-b { grid-column: 9 / 13; } .vz-b p { font-size: clamp(1.35rem, 1.1rem + .5vw, 1.625rem); }
.vz-d { grid-column: 2 / 8; align-self: start; } .vz-d p { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.75rem); }
.vz-pilha { grid-column: 9 / 13; display: grid; gap: 3rem; align-self: start; }
.vz-b p, .vz-c p, .vz-e p { color: var(--tinta-noite-suave); }
.vz-c p, .vz-e p { font-size: clamp(1.3rem, 1.1rem + .4vw, 1.5rem); }

.vz-fecho { margin: clamp(5rem, 9vw, 9rem) 0 0; padding-top: clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid var(--linha-noite); text-align: right; }
.vz-fecho p { font-size: clamp(2.6rem, .9rem + 5vw, 6.4rem); line-height: 1; letter-spacing: -.025em; }
.vz-fecho footer { justify-content: flex-end; }
.vz-acao { margin: 2.6rem 0 0; display: flex; justify-content: flex-end; }
.vz-ler { color: var(--tinta-noite); border-bottom-color: var(--ambar-luz); font-size: 1.125rem; }
.vz-ler::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: .7em; border-radius: 50%; background: var(--ambar-luz); }

@media (max-width: 980px) {
  .vz-cabeca { grid-template-columns: 1fr; }
  .vz-quadro { justify-self: start; margin-top: .5rem; }
  .vz-mural { display: block; }
  .vz-mural > * + *, .vz-pilha > * + * { margin-top: 3rem; }
  .vz-b, .vz-pilha .vz-e { margin-left: 12%; }
  .vz-maior p { text-indent: 0; }
  .vz-fecho { text-align: left; }
  .vz-fecho footer, .vz-acao { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-rev] .vz-marca::after { transform: none !important; }
  .js .vz-quadro[data-rev] .vz-pontos i:nth-child(-n+75) { background: var(--ambar-luz) !important; border-color: var(--ambar-luz) !important; }
}