/* ===== av · Quem já passou por aqui (parede caramelo) ===== */
.av-secao{--tinta-suave:#f8eeda;overflow:hidden;background:radial-gradient(ellipse 70% 55% at 22% 58% in oklab,#9a5a19,transparent 72%),radial-gradient(ellipse 60% 60% at 100% 0% in oklab,#7a4410,transparent 70%),var(--caramelo-fundo)}
.av-dentro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.25rem,2.4vw,2.5rem);row-gap:clamp(2.5rem,4.6vw,4rem)}
.av-topo{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:end;row-gap:1.4rem}
.av-topo .wf-olho{grid-column:1/-1}
.av-titulo{grid-column:1/9;margin-top:0;padding-left:var(--recuo)}
.av-titulo strong{color:var(--marfim)}

/* a nota, dita uma vez, com a conta honesta embaixo */
.av-conta{grid-column:9/-1;padding-bottom:.4rem}
.av-nota{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .9rem;color:var(--marfim)}
.av-nota b{font-family:var(--f-serifa);font-style:italic;font-weight:250;font-size:clamp(4rem,7.4vw,6.8rem);line-height:.8;letter-spacing:-.04em;color:var(--caramelo-texto);font-variation-settings:"opsz" 60}
.av-nota span{font-size:1rem;letter-spacing:.02em}
.av-aviso{color:var(--tinta-suave);max-width:21rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--fio);font-size:1rem}

/* a página de livro */
.av-pagina{grid-column:1/9;position:relative;color:var(--tinta);--caramelo-texto:#8a4f12;--tinta-suave:#50543f;
  background:linear-gradient(100deg in oklab,#efe6d2 0,var(--marfim) 9%,var(--marfim) 100%);
  border-radius:0 clamp(5rem,13vw,12rem) 0 0 / 0 clamp(4rem,10vw,9rem) 0 0;
  padding:clamp(1.6rem,3.2vw,3rem) clamp(1.4rem,4.6vw,4.6rem) clamp(1.8rem,3.4vw,3.2rem) clamp(1.6rem,5.4vw,5.4rem);
  box-shadow:0 7px 0 -3px #eadfc6,0 14px 0 -6px #dbc9a3,0 40px 60px -34px rgb(40 18 2/.7)}
.av-cabeco{display:flex;gap:.9rem;align-items:baseline;font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave);padding-bottom:1rem;border-bottom:1px solid rgb(167 100 29/.45);margin-right:clamp(4rem,10vw,9rem)}
.av-cabeco span+span::before{content:"·";margin-right:.9rem}
.av-fala{margin-top:clamp(1.4rem,2.6vw,2.2rem)}
.av-fala p{font-family:var(--f-serifa);font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.4;font-weight:380;letter-spacing:-.01em;font-variation-settings:"opsz" 28;text-wrap:pretty}
.av-aspa{color:var(--palha);font-weight:300}
.av-aspa:first-child{position:absolute;transform:translate(-105%,-.12em);font-size:2.6em;line-height:1;font-style:italic}
.av-aspa:last-child{font-size:1.5em;line-height:0;margin-left:.06em;vertical-align:-.18em}
/* as duas passagens marcadas saem da mancha e viram linha própria, nas duas vozes */
.av-par{display:block;text-indent:0;font-size:clamp(2.2rem,4.9vw,4.5rem);line-height:1;letter-spacing:-.028em;font-variation-settings:"opsz" 60;margin:.32em 0 .36em -.04em;white-space:nowrap}
.av-par .wf-doce{font-weight:250}
.av-par .wf-firme{font-weight:860}
.av-assina{display:flex;flex-direction:column;gap:.1rem;margin-top:clamp(1.6rem,3vw,2.4rem);font-size:var(--t-mini);color:var(--tinta-suave)}
.av-assina b{font-family:var(--f-serifa);font-size:1.25rem;font-weight:600;color:var(--tinta);letter-spacing:-.005em}
.av-assina--clara b{color:var(--marfim)}

/* ao lado: a segunda voz em cima, a resposta dela embaixo, um fio entre as duas */
.av-lado{grid-column:9/-1;display:flex;flex-direction:column;padding:clamp(1.6rem,3.2vw,3rem) 0 clamp(1.8rem,3.4vw,3.2rem)}
.av-fala2 p{font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.24;letter-spacing:-.012em;color:var(--marfim);text-indent:-.42em;font-variation-settings:"opsz" 40}
.av-lado::after{content:"";order:1;flex:1;min-height:2.5rem;width:1px;background:var(--fio);margin:1.4rem 0 1.4rem .1rem}
.av-resposta{order:2}
.av-rotulo{font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.av-fala3{font-family:var(--f-serifa);font-size:clamp(1.2rem,1.5vw,1.4rem);line-height:1.34;font-weight:600;color:var(--marfim);margin-top:.7rem;text-indent:-.42em}

/* pé: a linha leva até a fonte */
.av-pe{grid-column:1/-1;display:flex;align-items:flex-end;gap:1.4rem;margin-top:clamp(0rem,1vw,1rem)}
.av-linha{flex:1;min-width:0;height:clamp(2.6rem,5vw,4.2rem)}
.av-link{color:var(--marfim);flex:none;border-bottom:0;transform:translateY(22%)}
.av-link[data-wf].wf-visto{transform:translateY(22%)}
.av-link:hover{color:var(--caramelo-texto)}
.av-secao .wf-linha .wf-folha{fill:var(--palha-clara)}
.av-secao :focus-visible{outline-color:var(--marfim)}

@media (max-width:1000px){
  .av-titulo,.av-conta,.av-pagina,.av-lado{grid-column:1/-1}
  .av-titulo{padding-left:0}
  .av-conta{display:flex;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
  .av-aviso{margin-top:0;padding-top:0;border-top:0;border-left:1px solid var(--fio);padding-left:1.5rem;max-width:24rem}
  .av-fala p{max-width:none}
  .av-lado{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:2rem;align-items:end;padding:0}
  .av-lado::after{content:none}
  .av-resposta{border-left:1px solid var(--fio);padding-left:1.6rem}
}
@media (max-width:640px){
  .av-conta{display:block}
  .av-aviso{border-left:0;padding-left:0;border-top:1px solid var(--fio);padding-top:1rem;margin-top:1rem}
  .av-lado{grid-template-columns:minmax(0,1fr)}
  .av-resposta{border-left:0;padding-left:0;border-top:1px solid var(--fio);padding-top:1.4rem}
  .av-aspa:first-child{position:static;transform:none;font-size:1em;font-style:normal}
  .av-pagina{margin-inline:calc(-1*var(--borda) + .6rem)}
  .av-cabeco{flex-direction:column;gap:.1rem}
  .av-cabeco span+span::before{content:none}
  .av-par{font-size:clamp(2.1rem,10.4vw,2.9rem);white-space:normal}
  .av-pe{flex-direction:column;align-items:stretch;gap:.4rem}
  .av-linha{flex:none}
  .av-link,.av-link[data-wf].wf-visto{transform:none;align-self:flex-end;border-bottom:1px solid currentColor}
}