/* ===== av · VEIO 05 · Avaliações ===== */
.av{--av-junta:4px}
.av-topo{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:end;margin-bottom:clamp(3rem,5vw,5rem)}
.av-h2{font-size:clamp(2.2rem,1.1rem + 3.6vw,4.6rem);line-height:1.04}
.av-notas{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;border-top:1px solid rgba(243,193,178,.25);padding-top:1.4rem}
.av-nota dt{font-family:var(--b-mono);font-size:var(--t-rotulo);letter-spacing:.2em;text-transform:uppercase;color:var(--b-cinza-texto);margin-bottom:.5rem}
.av-nota dd{margin:0;display:grid;gap:.35rem}
.av-nota-n{font-family:var(--b-serifa);font-weight:200;font-size:clamp(3.2rem,2rem + 3vw,4.8rem);line-height:.9;color:var(--b-creme)}
.av-estrelas{color:var(--b-rose);letter-spacing:.18em;font-size:.85rem}
.av-nota-t{font-size:var(--t-mini);color:var(--b-creme-suave)}

/* parede: UMA pedra clara cortada em placas (os veios continuam de uma placa para a outra);
   as juntas de grafite são a sombra de cada placa por cima da pedra */
.av-parede{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--av-junta);
  background:var(--wf-marfim) url("../img/marmore-claro-a.webp") center/cover no-repeat}
.av-parede::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 100% at 30% 30% in oklab,rgba(246,240,235,.2),rgba(246,240,235,.6));pointer-events:none}
.av-resto{display:contents}
.av-parede .av-veio{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.av-placa{position:relative;margin:0;padding:clamp(1.6rem,2.4vw,2.6rem);display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem;color:var(--wf-tinta);
  box-shadow:0 0 0 calc(var(--av-junta) / 2) var(--b-grafite-1), inset 1px 1px 0 rgba(255,255,255,.7), inset -1px -1px 0 rgba(42,33,36,.12), inset 0 -22px 34px -26px rgba(42,33,36,.3)}
.av-fala,.av-quem,.av-aspas{position:relative;z-index:2}
.av-fala{margin:0}
.av-fala p{margin:0;font-family:var(--b-serifa);font-weight:300;font-style:italic;font-size:clamp(1.15rem,1rem + .5vw,1.45rem);line-height:1.38;color:var(--wf-tinta)}
.av-quem{font-family:var(--b-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wf-tinta-suave);padding-top:.9rem;border-top:1px solid color-mix(in oklab,var(--wf-veio-claro) 50%,transparent)}
.av-aspas{position:absolute;top:-.12em;right:.12em;font-family:var(--b-serifa);font-weight:200;font-size:clamp(9rem,6rem + 8vw,15rem);line-height:1;color:var(--wf-terracota);opacity:.16;pointer-events:none}

.av-p1{grid-column:1/8;grid-row:1/3;padding:clamp(2rem,4vw,4.2rem)}
.av-p1 .av-fala p{font-weight:200;font-size:clamp(1.6rem,1.1rem + 1.6vw,2.6rem);line-height:1.2}
.av-p2{grid-column:8/13;grid-row:1}
.av-p3{grid-column:8/13;grid-row:2}
.av-p4{grid-column:1/5;grid-row:3}
.av-p5{grid-column:5/10;grid-row:3}
.av-p6{grid-column:10/13;grid-row:3/5}
.av-p7{grid-column:1/4;grid-row:4}
.av-p8{grid-column:4/10;grid-row:4}
.av-p7 .av-fala p,.av-p8 .av-fala p{font-size:clamp(1.1rem,1rem + .4vw,1.35rem)}
.av-p2 .av-fala p,.av-p3 .av-fala p{font-weight:200;font-size:clamp(1.3rem,1rem + .9vw,1.85rem);line-height:1.25}
.av-p6{justify-content:flex-end}
.av-p6 .av-fala p{font-size:clamp(1.2rem,1rem + .6vw,1.6rem)}
.av-parede{grid-template-rows:auto auto minmax(14rem,auto) minmax(11rem,auto)}
.av-dica{display:none}

/* pé: palavras + links */
.av-pe{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(2rem,5vw,6rem);margin-top:clamp(3.5rem,6vw,6rem);align-items:end}
.av-palavras-tit{margin:0 0 1.4rem;font-family:var(--b-mono);font-weight:400;font-size:var(--t-rotulo);letter-spacing:.2em;text-transform:uppercase;color:var(--b-rose)}
.av-barras{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.av-barras li{display:grid;grid-template-columns:minmax(12rem,18rem) 1fr 4.6rem;align-items:center;gap:1rem;min-height:2.1rem}
.av-b-p{font-size:var(--t-mini);color:var(--b-creme-suave)}
.av-b-l{height:2px;background:rgba(244,236,230,.12);position:relative;border-radius:2px}
.av-b-l::after{content:"";position:absolute;left:0;top:-1px;height:4px;border-radius:0 2px 2px 0;width:calc(var(--n) / 61 * 100%);background:var(--b-rose)}
.av-b-n{font-family:var(--b-mono);font-size:.85rem;color:var(--b-creme);text-align:right;white-space:nowrap}
.av-b-n small{font-size:.7rem;color:var(--b-cinza-texto)}
.av-barras li.av-b-top{min-height:3rem}
.av-b-top .av-b-p{font-family:var(--b-serifa);font-style:italic;font-weight:300;font-size:1.45rem;color:var(--b-rose)}
.av-b-top .av-b-l::after{height:6px;top:-2px}
.av-b-top .av-b-n{font-size:1rem;color:var(--b-rose)}
.av-escala{margin:1rem 0 0;font-family:var(--b-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--b-cinza-texto)}
.av-links{display:grid;align-self:start;border-top:1px solid rgba(243,193,178,.25)}
.av-links-tit{margin:1.2rem 0 .6rem;font-family:var(--b-mono);font-size:var(--t-rotulo);letter-spacing:.2em;text-transform:uppercase;color:var(--b-rose)}
.av-ir{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.2rem 1rem;padding:1.3rem 0;min-height:48px;text-decoration:none;color:var(--b-creme);border-bottom:1px solid rgba(243,193,178,.25);transition:padding .5s var(--b-ease)}
.av-ir-nome{font-family:var(--b-serifa);font-weight:200;font-size:clamp(1.9rem,1.4rem + 1.4vw,2.8rem);line-height:1}
.av-ir-info{grid-column:1;font-size:var(--t-mini);color:var(--b-creme-suave)}
.av-ir-seta{grid-column:2;grid-row:1/3;align-self:center;font-size:1.5rem;color:var(--b-rose);transition:transform .5s var(--b-ease)}
.av-ir:hover{padding-left:.6rem}
.av-ir:hover .av-ir-seta{transform:translate(3px,-3px)}

@media (max-width:1100px) and (min-width:761px){
  .av-p1{grid-column:1/-1;grid-row:auto}
  .av-p2,.av-p3,.av-p7,.av-p8{grid-column:span 6;grid-row:auto}
  .av-p4,.av-p5,.av-p6{grid-column:span 4;grid-row:auto}
}
@media (max-width:760px){
  .av-topo,.av-pe{grid-template-columns:1fr}
  .av-parede{display:block;background:none}
  .av-parede::before{display:none}
  .av-parede{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto}
  .av-parede .av-veio{position:relative;inset:auto;grid-area:1/1;align-self:stretch;height:auto;min-height:100%}
  .av-p1{grid-area:1/1}
  .av-resto{grid-row:2}
  .av-placa{box-shadow:none;background:var(--wf-marfim) url("../img/marmore-claro-b.webp") center/cover no-repeat}
  .av-placa::before{content:"";position:absolute;inset:0;background:rgba(246,240,235,.5)}
  .av-p1{background-image:url("../img/marmore-claro-a.webp");padding:2rem 1.5rem}
  /* as outras placas correm de lado, com a próxima aparecendo na borda */
  .av-resto{display:flex;gap:var(--av-junta);overflow-x:auto;scroll-snap-type:x mandatory;margin:var(--av-junta) calc(-1 * var(--b-margem)) 0;padding:0 var(--b-margem);scroll-padding:0 var(--b-margem);scrollbar-width:none}
  .av-resto::-webkit-scrollbar{display:none}
  .av-resto .av-placa{flex:0 0 82%;scroll-snap-align:start;min-height:17rem}
  .av-p3,.av-p5,.av-p7{background-position:70% 40%}
  .av-barras li{grid-template-columns:1fr auto;row-gap:.45rem;padding:.45rem 0}
  .av-b-p{grid-column:1;font-size:.9rem}
  .av-b-n{grid-column:2;grid-row:1}
  .av-b-l{grid-column:1/-1}
  .av-dica{display:block;margin:.9rem 0 0;font-family:var(--b-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--b-cinza-texto)}
  .av-dica span{color:var(--b-rose)}
}