/* V · Quem já foi atendido (av) — a quarta voz: as frases dos clientes acendem uma por vez */
.av{position:relative;padding:clamp(72px,11vh,140px) 0 clamp(36px,6vh,72px)}
.av-grade{max-width:1680px;margin:0 auto;padding:0 var(--margem)}

/* cabeça: título à esquerda, nota como placar à direita */
.av-cabeca{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end;
  padding-bottom:clamp(22px,3.4vh,36px);border-bottom:1px solid var(--linha)}
.av-rotulo{margin:0 0 14px;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--tinta-suave)}
.av-rom{font-family:var(--f-serifa);font-weight:600;letter-spacing:.04em;color:var(--camelo)}
.av-titulo{margin:0;font-family:var(--f-serifa);font-weight:500;font-size:clamp(30px,3.4vw,54px);line-height:1.04;letter-spacing:-.018em;color:var(--tinta)}
.av-tl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.av-tl>span{display:inline-block;text-wrap:balance}
.av-tl2{color:var(--camelo)}

.av-nota{justify-self:end;display:grid;grid-template-columns:auto auto;column-gap:18px;align-items:end}
.av-nota p{margin:0}
.av-nota-num{grid-row:1 / 5;display:flex;flex-direction:column;align-items:flex-start}
.av-nota-num strong{font-family:var(--f-serifa);font-weight:500;font-size:clamp(56px,5.6vw,96px);line-height:.9;letter-spacing:-.02em;color:var(--cafe)}
.av-estrelas{color:var(--camelo);letter-spacing:.16em;font-size:15px;margin-top:8px}
.av-nota-txt{color:var(--tinta);font-weight:600}
.av-data{font-size:var(--t-mini);color:var(--tinta-suave)}
.av-nota .av-temas{margin-top:4px;font-size:var(--t-mini);color:var(--tinta-suave)}
.av-temas span{color:var(--cafe);font-weight:600}
.av-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--cafe);text-decoration:underline;text-decoration-color:color-mix(in oklab, var(--camelo) 60%, transparent);text-underline-offset:5px}

/* palco: a fala e a fileira das oito vozes */
.av-palco{padding-top:clamp(28px,5vh,56px)}
.av-falas{display:grid;max-width:1180px}
.av-fala{margin:0;display:flex;flex-direction:column;justify-content:flex-end}
.av-texto{margin:0;font-family:var(--f-serifa);font-weight:500;font-size:clamp(24px,2.6vw,42px);line-height:1.24;letter-spacing:-.01em;color:var(--tinta);text-wrap:pretty;quotes:"“" "”"}
.av-longa .av-texto{font-size:clamp(21px,2.05vw,33px);line-height:1.28}
.av-curta .av-texto{font-size:clamp(30px,3.7vw,60px);line-height:1.1;letter-spacing:-.015em}
.av-texto::before{content:open-quote;color:var(--camelo);margin-left:-.42em}
.av-texto::after{content:close-quote;color:var(--camelo)}
.av-quem{margin-top:18px;font-size:var(--t-mini);color:var(--tinta-suave)}
.av-quem strong{font-size:clamp(15px,1.12vw,18px);font-weight:650;color:var(--cafe);margin-right:6px}

.av-fileira{display:flex;gap:var(--vao);margin-top:clamp(28px,4.4vh,48px);height:clamp(96px,13vh,132px)}
.av-col{appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;position:relative;flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;justify-content:space-between;padding:12px 12px 14px;border:0;border-top:1px solid var(--linha);
  background:color-mix(in oklab, var(--areia) 38%, transparent);transition:flex-grow 1.2s var(--facil), background .8s ease}
.av-col:hover{background:color-mix(in oklab, var(--areia) 70%, transparent)}
.av-col[aria-selected="true"]{flex-grow:3.2;background:var(--cafe)}
/* bico: a coluna ativa aponta para a fala */
.av-col::before{content:"";position:absolute;left:clamp(16px,1.6vw,24px);top:-9px;width:18px;height:9px;background:var(--cafe);clip-path:polygon(0 100%,50% 0,100% 100%);
  opacity:0;transform:translateY(6px);transition:opacity .5s ease, transform .6s var(--facil)}
.av-col[aria-selected="true"]::before{opacity:1;transform:none;transition-delay:.5s}
.av-ini{font-family:var(--f-serifa);font-weight:500;font-size:clamp(26px,2.4vw,40px);line-height:1;color:color-mix(in oklab, var(--camelo) 75%, var(--tinta-suave));transition:color .8s}
.av-col[aria-selected="true"] .av-ini{color:#d2a77f}
.av-nm{font-size:var(--t-mini);color:var(--tinta-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .8s}
.av-col[aria-selected="true"] .av-nm{color:var(--creme);font-weight:600}
.av-tempo{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden}
.av-tempo i{display:block;height:100%;background:#d2a77f;transform:scaleX(0);transform-origin:left}
.av.av-ciclo .av-col[aria-selected="true"] .av-tempo i{animation:av-enche var(--av-dur,9s) linear forwards}
.av.av-fixo .av-col[aria-selected="true"] .av-tempo i{transform:scaleX(1);transition:transform .6s}
@keyframes av-enche{to{transform:scaleX(1)}}

/* sem JS: todas as falas em lista, sem fileira */
html:not(.js) .av-fileira{display:none}
html:not(.js) .av-falas{gap:28px}
html:not(.js) .av-texto,html:not(.js) .av-curta .av-texto,html:not(.js) .av-longa .av-texto{font-size:clamp(19px,1.6vw,26px)}

/* com JS: uma por vez, no mesmo lugar (a altura é a da maior) */
.js .av-fala{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity .6s ease, visibility 0s .6s}
.js .av-fala.av-ativa{opacity:1;visibility:visible;transition:opacity .6s ease}
.av-c{opacity:0}
.av-ativa .av-c{animation:av-letra .5s ease both;animation-delay:calc(.25s + var(--i) * 26ms)}
@keyframes av-letra{from{opacity:0}to{opacity:1}}
.av-w{white-space:nowrap}
.av-aspa{color:var(--camelo)}
.av-texto>span>.av-aspa:first-child{margin-left:-.42em}
.js .av-texto::before,.js .av-texto::after{content:none}

/* entrada */
.js .av-tl>span{transform:translateY(105%);transition:transform 1.1s var(--facil)}
.js .av-tl2>span{transition-delay:.18s}
.js .av-rotulo,.js .av-nota,.js .av-palco{opacity:0;transition:opacity 1s ease .4s}
.js .av.av-visto .av-tl>span{transform:none}
.js .av.av-visto .av-rotulo,.js .av.av-visto .av-nota,.js .av.av-visto .av-palco{opacity:1}

@media (max-width:900px){
  .av-cabeca{grid-template-columns:minmax(0,1fr);gap:22px}
  .av-nota{justify-self:start}
  .av-texto{font-size:clamp(21px,6vw,25px)}
  .av-longa .av-texto{font-size:clamp(19px,5.1vw,21px)}
  .av-curta .av-texto{font-size:clamp(27px,8vw,34px)}
  .av-fileira{gap:3px;height:78px}
  .av-col{flex:0 0 30px;padding:10px 0 12px;align-items:center}
  .av-col[aria-selected="true"]{flex:1 1 auto;padding:10px 12px 12px;align-items:flex-start}
  .av-col::before{left:12px}
  .av-col:not([aria-selected="true"]) .av-nm{display:none}
  .av-ini{font-size:22px}
}