/* Seção 03 · "A avaliação, ponto por ponto" · prefixo av- */
.av-sec{overflow:clip}
.av-sec [data-wf="sobe"].wf-visto{clip-path:none}   /* a sombra dos quadros sai da caixa */
.av-dentro{container-type:inline-size}
.av-topo{max-width:44rem}
.av-lead{margin:clamp(1.2rem,2vw,1.8rem) 0 0}

/* ── celular e tablet: os passos em coluna; o fio entre os numerais faz o gesto da onda ── */
.av-campo{position:relative;margin-top:clamp(2.4rem,5vw,4rem)}
.av-onda{display:none}
.av-passos{list-style:none;margin:clamp(2.6rem,6vw,3.6rem) 0 0;padding:0}
.av-passo{position:relative;display:grid;grid-template-columns:3.4rem minmax(0,1fr);column-gap:1.1rem;padding-bottom:2.8rem}
.av-passo--5{padding-bottom:0}
.av-num{display:block;font-family:var(--wf-f-titulo);font-size:4rem;line-height:.9;letter-spacing:0;padding:.04em .06em .06em 0;justify-self:start;transition:opacity .9s var(--wf-ease);
  /* numeral pequeno: o mesmo ouro sem as faixas quase brancas, para nunca sumir na parede quando o reflexo passa */
  background-image:linear-gradient(105deg,#8a6a22 0%,#c9a24a 22%,#e0c270 36%,#a47f2e 52%,#7c5c1c 68%,#c9a24a 84%,#8a6a22 100%);background-size:180% 100%}
.av-js .av-passo:not(.av-on) .av-num{opacity:.2}
.av-fio{position:absolute;left:0;top:4.5rem;width:3.4rem;height:calc(100% - 5rem);color:var(--wf-ouro-fundo);clip-path:inset(0 0 calc((1 - var(--av-pi,1))*100%) 0)}
.av-corpo{padding-top:.5rem}
.av-corpo>p{margin:0 0 1rem;color:var(--wf-cafe-suave);text-wrap:pretty}
.av-corpo>p i{color:var(--wf-cafe)}
.av-nome{margin:0 0 .7rem;font-family:var(--wf-f-titulo);font-weight:400;font-size:clamp(1.12rem,1rem + .5vw,1.4rem);line-height:1.25;letter-spacing:.06em;text-transform:uppercase;text-wrap:balance}
.av-fala{padding-left:1rem;border-left:1px solid var(--wf-ouro-fundo)}
.av-fala + .av-fala{margin-top:1.1rem}
.av-fala p{text-wrap:pretty}
.av-pontos{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;grid-template-columns:repeat(2,max-content);gap:.45rem 1.5rem;font-family:var(--wf-f-titulo);font-size:var(--wf-t-mini);letter-spacing:.12em;text-transform:uppercase}
.av-pontos li{display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.av-pontos li::before{content:"";flex:none;width:.36rem;height:.36rem;border-radius:50%;background:var(--wf-ouro);box-shadow:0 0 0 1px var(--wf-ouro-fundo)}

@media (max-width:400px){.av-pontos{column-gap:1rem;letter-spacing:.08em}}

/* quadros na parede */
.av-quadro{margin:0;width:min(100%,460px)}
.av-quadro img{display:block;width:100%;height:auto;filter:var(--wf-sombra-parede)}
.av-quadro figcaption{margin-top:1.1rem;padding-top:.7rem;border-top:1px solid var(--wf-ouro-fundo);max-width:19rem;font-size:var(--wf-t-mini);line-height:1.45;color:var(--wf-cafe-suave)}
.av-quadro figcaption b{display:block;margin-bottom:.2rem;font-family:var(--wf-f-titulo);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--wf-cafe)}
.av-quadro--espelho{margin:3rem 0 0 auto}

.av-fim{margin-top:3rem}
.av-fim-fala p{font-size:var(--wf-t-lead);line-height:1.45;text-wrap:balance}
.av-botao{margin-top:1.6rem}
.av-fim-nota{margin:.9rem 0 0;font-size:var(--wf-t-mini);color:var(--wf-cafe-suave)}

/* tablet: quadros numa coluna ao lado dos passos */
@media (min-width:760px) and (max-width:1339px){
  .av-campo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);column-gap:clamp(2rem,5vw,4rem);align-items:start}
  .av-passos{grid-column:1;grid-row:1/4;margin-top:0}
  .av-quadro--tablet{grid-column:2;grid-row:1}
  .av-quadro--espelho{grid-column:2;grid-row:2;margin:3rem 0 0}
  .av-fim{grid-column:2;grid-row:3}
}

/* ── tela larga: a onda do N, inteira, atravessa a parede; os passos descem por ela ── */
@media (min-width:1340px){
  .av-campo{height:98cqw;margin-top:4.5cqw}
  .av-onda{display:block;position:absolute;left:0;top:0;width:100cqw;height:72.3cqw;z-index:-1;
    filter:drop-shadow(.1rem .16rem .12rem rgba(59,43,32,.5)) drop-shadow(.5rem .8rem .8rem rgba(59,43,32,.2));
    clip-path:inset(-6% -6% calc((1 - var(--av-p,1))*100%) -6%)}
  .av-onda::before{content:"";position:absolute;inset:0;transform:translate(.14rem,.2rem);background:linear-gradient(105deg,#5e4513,#8a6a22 40%,#6d4f17 70%,#8a6a22);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='370 98 1170 846' preserveAspectRatio='none'%3E%3Cpath d='M370 166 C410 122 470 98 540 98 C650 100 740 170 820 290 C900 410 960 520 1030 620 C1090 706 1140 770 1200 826 C1290 900 1400 912 1540 894 C1420 944 1300 944 1220 912 C1140 880 1080 820 1010 720 C930 600 860 470 780 350 C720 262 650 190 570 160 C500 136 430 142 370 166 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='370 98 1170 846' preserveAspectRatio='none'%3E%3Cpath d='M370 166 C410 122 470 98 540 98 C650 100 740 170 820 290 C900 410 960 520 1030 620 C1090 706 1140 770 1200 826 C1290 900 1400 912 1540 894 C1420 944 1300 944 1220 912 C1140 880 1080 820 1010 720 C930 600 860 470 780 350 C720 262 650 190 570 160 C500 136 430 142 370 166 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
  .av-onda i{position:relative;display:block;width:100%;height:100%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='370 98 1170 846' preserveAspectRatio='none'%3E%3Cpath d='M370 166 C410 122 470 98 540 98 C650 100 740 170 820 290 C900 410 960 520 1030 620 C1090 706 1140 770 1200 826 C1290 900 1400 912 1540 894 C1420 944 1300 944 1220 912 C1140 880 1080 820 1010 720 C930 600 860 470 780 350 C720 262 650 190 570 160 C500 136 430 142 370 166 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='370 98 1170 846' preserveAspectRatio='none'%3E%3Cpath d='M370 166 C410 122 470 98 540 98 C650 100 740 170 820 290 C900 410 960 520 1030 620 C1090 706 1140 770 1200 826 C1290 900 1400 912 1540 894 C1420 944 1300 944 1220 912 C1140 880 1080 820 1010 720 C930 600 860 470 780 350 C720 262 650 190 570 160 C500 136 430 142 370 166 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
  /* os cinco pontos da leitura, como os botões que prendem o acrílico à parede */
  .av-onda b{position:absolute;left:calc(var(--x)*1cqw);top:calc(var(--y)*1cqw);width:1.75cqw;height:1.75cqw;min-width:20px;min-height:20px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;
    font-family:var(--wf-f-titulo);font-weight:400;font-size:.875rem;line-height:1;color:var(--wf-cafe);
    background:radial-gradient(circle at 36% 30% in oklab,var(--wf-gelo-2),var(--wf-gesso) 70%);box-shadow:0 0 0 1px rgba(109,79,23,.55),.06rem .1rem .16rem rgba(59,43,32,.45)}
  .av-passos{margin:0}
  /* numeral e nome na mesma linha; o texto ocupa a largura toda do passo */
  .av-passo{position:absolute;display:block;padding:0}
  .av-fio{display:none}
  .av-num{position:absolute;left:0;top:0;font-size:5.6rem}
  .av-corpo{padding-top:0;font-size:1rem;line-height:1.55}
  .av-nome{display:flex;align-items:center;min-height:5.3rem;margin:0 0 .9rem;padding-left:5.2rem}
  .av-passo--1{left:0;top:17cqw;width:26cqw}
  .av-passo--2{left:50cqw;top:2cqw;width:24.5cqw}
  .av-passo--3{left:26.5cqw;top:45cqw;width:24.5cqw}
  .av-passo--4{left:71cqw;top:37cqw;width:29cqw}
  .av-passo--5{left:71cqw;top:75cqw;width:29cqw}
  .av-quadro{position:absolute}
  .av-quadro--tablet{left:77cqw;top:-9cqw;width:23cqw}
  .av-quadro--espelho{left:0;top:46cqw;width:22.5cqw;margin:0}
  .av-fim{position:absolute;left:0;bottom:0;width:38cqw;margin:0}
}