/* av · As clientes */
.av-topo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px); align-items: end;
}
.av-cabeca { min-width: 0; }
.av-nota { margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.av-num { margin: 0 0 1.1rem; display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 24px); }
.av-num-v {
  font-family: var(--f-display); font-variation-settings: "opsz" 100; font-weight: 340;
  font-size: clamp(7rem, 13vw, 13rem); line-height: .78; letter-spacing: -.02em; color: var(--indigo-noite);
}
.av-selo { display: grid; gap: .5rem; padding-bottom: .4rem; }
.av-estrelas { color: var(--royal); letter-spacing: .14em; font-size: 1.15rem; }
.av-conta { color: var(--texto-suave); font-size: .95rem; line-height: 1.35; }

/* falas */
.av-fala, .av-faixa, .av-resposta { margin: 0; min-width: 0; }
.av-fala blockquote {
  margin: 0;
  font-family: var(--f-display); font-variation-settings: "opsz" 30; font-weight: 400;
  line-height: 1.3; color: var(--indigo); text-wrap: pretty;
}
.av-fala figcaption, .av-faixa figcaption, .av-resposta figcaption {
  margin-top: .8rem; font-size: .8rem; letter-spacing: .08em; color: var(--texto-suave);
}
.av-fala--g blockquote { font-size: clamp(1.75rem, 2.9vw, 2.75rem); line-height: 1.14; font-variation-settings: "opsz" 70; color: var(--indigo-noite); }
.av-fala--m blockquote { font-size: clamp(1.4rem, 1.9vw, 1.75rem); line-height: 1.24; font-variation-settings: "opsz" 48; }
.av-fala--p blockquote { font-size: clamp(1.22rem, 1.4vw, 1.36rem); }
.av-fala .wf-grifo { white-space: nowrap; text-indent: 0; }
/* aspas penduradas: a margem ótica bate com o título */
.av-fala--g blockquote, .av-fala--m blockquote, .av-resposta blockquote { text-indent: -.4em; }

/* mural das falas curtas: um bloco só, separado por traços de pincel */
.av-mural {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 60px) clamp(24px, 3vw, 48px);
  padding-top: clamp(8px, 2vw, 24px);
}
.av-mural > * { grid-column: span 2; position: relative; padding-top: 26px; }
.av-mural > :nth-child(n+4) { grid-column: span 3; }
.av-mural > :nth-child(4) { padding-right: 12%; }
.av-mural > :nth-child(5) { padding-left: 12%; }
.av-mural > *::before {
  content: ""; position: absolute; top: 0; width: 64px; height: 10px;
  background: var(--malha-clara);
  -webkit-mask: url(../img/pincel-3.png) center / 100% 100% no-repeat;
          mask: url(../img/pincel-3.png) center / 100% 100% no-repeat;
}
.av-mural > :nth-child(5)::before { left: 12%; }

.av-todas {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.6em; border-radius: var(--raio);
  border: 1px solid color-mix(in oklab, var(--indigo) 35%, transparent);
  color: var(--indigo); text-decoration: none; letter-spacing: .02em;
  transition: background .3s, color .3s, border-color .3s;
}
.av-todas:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* a parede: grade de 12 com recuos diferentes */
.av-parede {
  margin-top: clamp(64px, 8vw, 130px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.av-magna { grid-column: 1 / 7; grid-row: 1; }
.av-ellen { grid-column: 2 / 7; grid-row: 2; }
.av-tinta { grid-column: 8 / 13; grid-row: 1 / 3; }
.av-faixa { grid-column: 1 / -1; grid-row: 3; }
.av-mural { grid-column: 1 / -1; grid-row: 4; }
.av-fim { grid-column: 1 / -1; grid-row: 5; margin: 0; text-align: center; }

/* bloco de tinta funda, com borda de pincel numa camada de fundo */
.av-tinta {
  position: relative; isolation: isolate; color: var(--noite-texto);
  padding: clamp(40px, 4.4vw, 70px) clamp(32px, 3.6vw, 60px);
}
.av-tinta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--malha-funda);
}
.av-tinta::after {
  content: ""; position: absolute; inset: -7% -6%; z-index: -2;
  background: var(--malha-funda);
  -webkit-mask: url(../img/pincel-largo.png) center / 100% 100% no-repeat;
          mask: url(../img/pincel-largo.png) center / 100% 100% no-repeat;
}
.av-tinta .av-fala blockquote { color: #fff; }
.av-tinta figcaption { color: var(--noite-suave); }
.av-resposta { margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .22); }
.av-resposta-rot { display: flex; align-items: center; gap: .7em; margin: 0 0 .8rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #bab7ee; }
.av-resposta-rot::before {
  content: ""; width: 34px; height: 9px; background: var(--malha-clara);
  -webkit-mask: url(../img/pincel-3.png) center / 100% 100% no-repeat;
          mask: url(../img/pincel-3.png) center / 100% 100% no-repeat;
}
.av-resposta blockquote {
  margin: 0; font-family: var(--f-display); font-variation-settings: "opsz" 18; font-weight: 400;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.38; color: #fff;
}

/* faixa "Mãos de fada…": pincelada larga atravessando a parede */
.av-faixa { position: relative; isolation: isolate; text-align: center; padding: clamp(36px, 4vw, 60px) 0; }
.av-faixa::before {
  content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; top: 12%; bottom: 22%;
  background: var(--malha-clara);
  -webkit-mask: url(../img/pincel-1.png) center / 100% 100% no-repeat;
          mask: url(../img/pincel-1.png) center / 100% 100% no-repeat;
  opacity: .75; transform-origin: left center;
}
.av-faixa blockquote {
  margin: 0; font-family: var(--f-display); font-variation-settings: "opsz" 100; font-weight: 420;
  font-size: clamp(3rem, 8.5vw, 8.4rem); line-height: .95; color: var(--indigo-noite);
}
.js .av-faixa::before { transform: scaleX(0); }
.js .av-faixa.wf-visto::before { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.6, 0, .2, 1) .2s; }

@media (max-width: 899px) {
  .av-secao { padding-bottom: calc(var(--secao-y) + 40px); }
  .av-topo { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .av-parede { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .av-parede > * { grid-column: 1 !important; grid-row: auto !important; margin-top: 0 !important; }
  .av-mural { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .av-mural > *, .av-mural > :nth-child(n+4) { grid-column: 1; padding: 22px 0 0 !important; }
  .av-mural > :nth-child(5)::before { left: 0; }
  .av-todas { width: 100%; justify-content: center; text-align: center; padding: .95em 1em; font-size: .92rem; }
  .av-tinta { margin: 0 calc(var(--pad-x) * -1); padding: 56px calc(var(--pad-x) + 12px); }
  .av-tinta::after { inset: -14px 0; }
  .av-faixa::before { left: -6%; right: -6%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .av-faixa::before { transform: none; }
}