/* 5 · Avaliações — classes av- (29 traços de graduação num tubo de vidro; os citados acesos) */
.av-secao{overflow:hidden}
.av-cabeca{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px clamp(32px,5vw,88px);align-items:end;margin-bottom:clamp(44px,5.5vw,76px)}
.av-olho-sep{width:1px;height:12px;background:currentColor;opacity:.5}
.av-titulo{max-width:16ch}
.av-intro{max-width:44ch;padding-bottom:6px}

.av-corpo{display:grid;grid-template-columns:minmax(240px,.36fr) 76px minmax(0,1fr);column-gap:clamp(20px,3vw,44px);align-items:start}

/* a nota */
.av-num{display:flex;flex-direction:column;gap:6px}
.av-num-valor{font-family:var(--serifa);font-weight:300;font-size:clamp(96px,10.5vw,160px);line-height:.86;letter-spacing:-.05em;color:var(--petroleo);font-variation-settings:"opsz" 72}
.av-estrelas{color:var(--caramelo);letter-spacing:.14em;font-size:16px;margin-top:12px}
.av-distrib{margin-top:8px;font-size:11px}
.av-fonte{margin-top:22px;font-size:15px}
.av-fonte .wf-link{font-size:15.5px;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.av-fonte .wf-link svg{width:13px;height:13px;color:var(--ameixa)}
.av-data{margin-top:10px;font-size:11px}

/* as palavras repetidas: cada uma com a sua mini-graduação, que entra traço a traço */
.av-palavras{margin-top:clamp(36px,4vw,56px);padding-top:22px;border-top:1px solid rgba(13,50,70,.16)}
.av-palavras-rotulo{color:var(--ameixa);margin-bottom:14px}
.av-lista{list-style:none;display:grid;row-gap:12px}
.av-lista li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:14px}
.av-palavra{font-family:var(--serifa);font-size:17.5px;color:var(--petroleo);white-space:nowrap}
.av-barra{display:flex;gap:4px;align-items:flex-end;height:12px;padding-bottom:1px;border-bottom:1px solid rgba(13,50,70,.18)}
.av-barra i{width:1px;height:9px;background:var(--petroleo);opacity:0;transition:opacity .4s var(--curva);transition-delay:calc(.3s + var(--k, 0) * 50ms)}
.av-barra i:first-child,.av-barra i:nth-child(5n+1){height:12px}
.av-palavras.wf-visivel .av-barra i{opacity:.6}
.av-palavras.wf-visivel .av-barra i:first-child,.av-palavras.wf-visivel .av-barra i:nth-child(5n+1){opacity:.8}
.av-barra i:nth-child(1){--k:0}.av-barra i:nth-child(2){--k:1}.av-barra i:nth-child(3){--k:2}.av-barra i:nth-child(4){--k:3}.av-barra i:nth-child(5){--k:4}.av-barra i:nth-child(6){--k:5}.av-barra i:nth-child(7){--k:6}.av-barra i:nth-child(8){--k:7}.av-barra i:nth-child(9){--k:8}.av-barra i:nth-child(10){--k:9}
.av-vezes{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ameixa-escura);min-width:3ch;text-align:right}

/* a escala: tubo de vidro em pé com 29 traços (01 embaixo, 29 em cima, como a proveta); presa na tela */
.av-escala{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column-reverse;gap:21px;padding:16px 0 18px;margin-top:4px;width:76px}
.av-escala::before{content:"";position:absolute;left:0;top:0;bottom:0;width:38px;border-radius:8px 8px 20px 20px;background:var(--vidro);box-shadow:var(--vidro-borda)}
.av-escala::after{content:"";position:absolute;left:0;width:38px;top:0;height:6px;border-radius:8px 8px 0 0;background:rgba(13,50,70,.1);box-shadow:inset 0 -1px 0 rgba(13,50,70,.25)}
.av-escala i{position:relative;display:block;margin-left:26px;width:12px;height:1px;background:var(--petroleo);opacity:0;translate:-6px 0;transition:opacity .5s var(--curva), translate .5s var(--curva), background .6s, width .7s var(--curva);transition-delay:calc(var(--i) * 40ms)}
.av-escala i:nth-child(5n){margin-left:22px;width:16px}
.av-escala i[data-n]{margin-left:20px;width:18px}
.av-escala i[data-n]::after{content:attr(data-n);position:absolute;right:calc(100% + 4px);top:50%;translate:0 -50%;font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--petroleo);opacity:.65}
.av-escala.wf-visivel i{opacity:.5;translate:0 0}
.av-escala.wf-visivel i.av-aceso{opacity:1;width:50px;height:2px;background:var(--ameixa);transition-delay:calc(1.2s + var(--i) * 70ms)}
.av-escala.wf-visivel i.av-aceso[data-n]{width:52px}
.av-escala i.av-aceso::before{content:"";position:absolute;right:-4px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--ameixa);translate:0 -50%;opacity:0;transition:opacity .5s calc(1.5s + var(--i) * 70ms);box-shadow:0 0 0 4px color-mix(in oklab, var(--ameixa) 18%, transparent)}
.av-escala.wf-visivel i.av-aceso::before{opacity:1}

/* as citações: uma grande (o ponto de entrada), as outras menores, em composição sem buraco */
.av-citas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,3.2vw,44px) clamp(28px,3.5vw,52px);align-content:start}
.av-cita{position:relative;margin:0}
.av-cita .av-fala{font-size:clamp(16.5px,1.25vw,19px);line-height:1.45;color:var(--tinta)}
.av-cita--grande{grid-column:1 / -1;margin-bottom:14px;padding-top:16px}
.av-cita--grande::before{content:"“";position:absolute;left:-.08em;top:-.2em;font-family:var(--serifa);font-weight:300;font-size:clamp(140px,12vw,190px);line-height:1;color:var(--ameixa-clara);opacity:.5;pointer-events:none;z-index:-1}
.av-cita--grande .av-fala{font-size:clamp(28px,2.7vw,40px);line-height:1.18;font-weight:300;color:var(--petroleo);letter-spacing:-.012em;max-width:30ch}
.av-cita--grande .wf-autor{margin-top:14px;font-size:12px}
.av-cita:nth-child(2n+1):not(.av-cita--grande){translate:0 22px}
.av-resposta{margin:22px 0 0;align-self:end;padding:18px 22px 16px;border-radius:14px;background:var(--vidro);box-shadow:var(--vidro-borda)}
.av-resposta-rotulo{color:var(--ameixa);margin-bottom:8px}
.av-resposta-fala{font-family:var(--serifa);font-style:italic;font-size:clamp(17px,1.3vw,20px);line-height:1.4;color:var(--petroleo)}

@media (max-width:1100px){
  .av-corpo{grid-template-columns:minmax(220px,.42fr) 76px minmax(0,1fr)}
  .av-citas{grid-template-columns:1fr}
  .av-cita:nth-child(2n+1):not(.av-cita--grande){translate:0 0}
  .av-resposta{margin-top:8px}
}
@media (max-width:760px){
  .av-cabeca{grid-template-columns:1fr;gap:18px;margin-bottom:36px}
  .av-corpo{grid-template-columns:1fr;row-gap:34px}
  .av-nota{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-items:end}
  .av-num{grid-row:1}
  .av-num-valor{font-size:clamp(84px,24vw,110px)}
  .av-meta{grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:4px}
  .av-estrelas{margin-top:10px;font-size:14px}
  .av-fonte{margin:0;order:1}
  .av-distrib{order:2;margin-top:12px;font-size:10.5px;line-height:1.5}
  .av-quebra{display:block;height:0;overflow:hidden}
  .av-data{order:3;margin-top:6px;font-size:10.5px}
  .av-palavras{grid-column:1 / -1;margin-top:30px}
  /* o tubo deita, como no hero */
  .av-escala{position:relative;top:auto;width:auto;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:0;padding:0 14px;margin:14px 0 0;height:34px}
  .av-escala::before{left:0;right:0;top:0;bottom:0;width:auto;border-radius:17px}
  .av-escala::after{display:none}
  .av-escala i{margin:0 0 4px 0;width:1px;height:12px;translate:0 6px}
  .av-escala i:nth-child(5n){margin:0 0 4px 0;width:1px;height:16px}
  .av-escala i[data-n]{margin:0 0 4px 0;width:1px;height:18px}
  .av-escala i[data-n]::after{right:auto;left:50%;top:auto;bottom:-24px;translate:-50% 0;font-size:10px;opacity:.8}
  .av-escala.wf-visivel i.av-aceso,.av-escala.wf-visivel i.av-aceso[data-n]{width:2px;height:46px}
  .av-escala i.av-aceso::before{right:auto;left:50%;top:-4px;translate:-50% 0}
  .av-cita--grande{padding-top:18px;margin-bottom:6px}
  .av-cita--grande::before{font-size:120px;left:-.06em}
  .av-cita--grande .av-fala{font-size:clamp(25px,7vw,30px)}
  .av-resposta{margin-top:6px}
}