/* KM 4 · Avaliações — fim de tarde, parada na estrada, rádio ligado.
   O horizonte da seção é a onda do recado principal (uma barra por letra) contra o sol que se põe;
   abaixo dele, o pátio de asfalto com os outros recados, cada um com o seu horizonte pequeno. Prefixo av- */
.av { --av-asfalto: #16181d; padding-bottom: 0; }

.av-abre { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.av-nota { margin: 0 3px 6px; }

.av blockquote, .av figure { margin: 0; }
.av blockquote p { margin: 0; font-weight: 600; text-wrap: pretty; }
.av figcaption { margin-top: 14px; font-size: var(--t-mini); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); }
.av-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* o recado principal: grande, deslocado para a direita, com a aspa pendurada na margem */
.av .av-principal { margin: clamp(44px, 7vw, 104px) 0 0 auto; width: min(100%, 1060px); }
.av-principal__rotulo { margin: 0 0 clamp(12px, 1.6vw, 22px); }
.av-principal blockquote p { position: relative; font-size: clamp(1.7rem, 4.3vw, 4.1rem); line-height: 1.06; letter-spacing: -.018em; text-wrap: balance; }
.av-aspa { position: absolute; right: 100%; top: 0; margin-right: .08em; color: var(--d-pessego); }
.av-grifo { font-style: normal; font-weight: 800; color: var(--d-pessego); }

/* horizonte */
.av-horizonte { position: relative; left: 50%; width: 100vw; margin-left: -50vw; height: clamp(150px, 19vw, 280px); margin-top: clamp(4px, 1.5vw, 24px); }
.av-horizonte__luz { position: absolute; inset: -60% 0 0 0; background:
  radial-gradient(ellipse 46% 70% at 64% 100%, rgb(232 184 119 / .9), rgb(183 122 134 / .5) 45%, rgb(122 90 140 / 0) 74%),
  linear-gradient(to top, rgb(183 122 134 / .55), rgb(183 122 134 / 0) 50%); }
.av-horizonte__sol { position: absolute; left: 64%; bottom: 0; width: clamp(150px, 19vw, 280px); aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 999px 999px 0 0; background: linear-gradient(to bottom, #fbe6c2, #f0c388 70%, #e8b877); box-shadow: 0 0 80px 20px rgb(232 184 119 / .45); }
.av-onda { display: block; max-width: 100%; fill: var(--d-pessego); }
.av-onda--grande { position: absolute; left: 0; bottom: -1px; width: 100%; max-width: none; height: 74%; fill: var(--av-asfalto); }
.av-onda--grande rect { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.1s var(--d-curva); transition-delay: calc(var(--b) * 9ms + 200ms); }
.js .av-horizonte:not(.visto) .av-onda--grande rect { transform: scaleY(.04); }
.js .av-horizonte[data-entra] { opacity: 1; transform: none; }

/* pátio */
.av-chao { position: relative; background: var(--av-asfalto); box-shadow: 0 0 0 100vmax var(--av-asfalto); clip-path: inset(0 -100vmax); padding: 20px 0 clamp(40px, 6vw, 72px); }
.av-chao::before { content: ""; position: absolute; left: 50%; top: 0; width: 100vw; margin-left: -50vw; height: 220px; pointer-events: none; background: radial-gradient(ellipse 34% 100% at 64% 0, rgb(232 184 119 / .2), rgb(232 184 119 / 0) 70%); }
.av-chao__abre { position: relative; display: grid; gap: 28px; }
.av-chao__nota { margin: 0; font-size: var(--t-mini); color: var(--tinta-2); }
.av-intro { margin: 0; color: var(--tinta); }
.av-lista { position: relative; list-style: none; margin: clamp(44px, 5vw, 72px) 0 0; padding: 0; display: grid; gap: 48px; }
.av-recado__h { display: block; border-bottom: 2px solid rgb(232 184 119 / .55); margin-bottom: 16px; }
.av-recado .av-onda { height: 30px; }
.av-recado blockquote p { font-size: 1.05rem; line-height: 1.4; }
.av-recado--a blockquote p { font-size: clamp(1.4rem, 2.5vw, 2.3rem); line-height: 1.12; letter-spacing: -.01em; }
.av-recado--b blockquote p, .av-recado--c blockquote p { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.25; }

.av-faixa { display: block; position: relative; left: 50%; width: 100vw; margin-left: -50vw; height: 5px; margin-top: clamp(56px, 7vw, 96px); background: repeating-linear-gradient(to right, var(--d-faixa) 0 40px, transparent 40px 56px); }
.av-pe { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px; }
.av-link { font-size: 1.1rem; }
.av-fonte { margin: 0; font-size: var(--t-mini); color: var(--tinta-2); }

@media (max-width: 899px) {
  .av-principal blockquote p { padding-left: .5em; }
  .av-aspa { right: auto; left: -.04em; margin: 0; }
  .av-horizonte__sol, .av-horizonte__luz { left: 70%; } .av-horizonte__luz { left: 0; }
  .av-recado--b, .av-recado--d { padding-left: 14%; }
  .av-recado--c { padding-right: 10%; }
  .av-chao { padding-bottom: 96px; }
}
@media (min-width: 900px) {
  .av-chao__abre { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; }
  .av-lista { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 72px 24px; }
  .av-recado--a { grid-column: 1 / span 7; }
  .av-recado--b { grid-column: 9 / span 4; margin-top: 64px; }
  .av-recado--c { grid-column: 2 / span 4; }
  .av-recado--d { grid-column: 6 / span 4; margin-top: 56px; }
  .av-recado--e { grid-column: 10 / span 3; }
}