/* av · Avaliações (clara) — as palavras das pacientes como percurso */

.av { --av-vao: clamp(96px, 10vw, 150px); --av-arco: clamp(280px, 24vw, 360px); }
.av-malha {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 30% at 92% 6% in oklab, rgb(201 205 210 / .55), rgb(201 205 210 / 0)),
    radial-gradient(ellipse 40% 26% at 4% 46% in oklab, rgb(240 195 168 / .22), rgb(240 195 168 / 0)),
    radial-gradient(ellipse 44% 24% at 96% 64% in oklab, rgb(201 205 210 / .35), rgb(201 205 210 / 0));
}

/* ---------- cabeça: título, a palavra e o retrato ---------- */
.av-cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--av-arco);
  grid-template-rows: auto auto;
  column-gap: clamp(32px, 4.4vw, 64px);
  align-items: end;
}
.av-topo { grid-column: 1; grid-row: 1; align-self: start; max-width: 15.5em; font-size: var(--t-h2); }
.av-topo .rotulo { font-size: .8125rem; }
.av-topo .h2 { font-size: 1em; }
.av-palavra {
  grid-column: 1; grid-row: 2;
  margin: clamp(28px, 4vw, 56px) 0 0 -.05em;
  font-size: clamp(4.2rem, 13.4vw, 13.2rem);
  line-height: .86;
  letter-spacing: -.035em;
  color: var(--marinho);
  padding-bottom: .1em;
  white-space: nowrap;
}
.av-retrato { grid-column: 2; grid-row: 1 / 3; margin: 0; position: relative; z-index: 2; }

/* o retrato num arco de fim de tarde; a cabeça sai do arco */
.av-arco {
  position: relative;
  aspect-ratio: 1 / 1.3;
  margin-top: 13%;
  isolation: isolate;
}
.av-arco::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 999px 999px var(--raio) var(--raio);
  background:
    radial-gradient(ellipse 70% 40% at 66% 22% in oklab, rgb(240 195 168 / .55), rgb(240 195 168 / 0)),
    radial-gradient(ellipse 70% 50% at 10% 40% in oklab, rgb(143 138 166 / .55), rgb(143 138 166 / 0)),
    radial-gradient(ellipse 80% 40% at 50% 104% in oklab, rgb(78 90 69 / .55), rgb(78 90 69 / 0)),
    var(--marinho);
  box-shadow: 0 30px 60px -34px rgb(13 34 56 / .55);
}
.av-arco::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 0 0 var(--raio) var(--raio);
  background: linear-gradient(0deg in oklab, rgb(13 34 56 / .4), rgb(13 34 56 / 0));
}
.av-arco img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  /* laterais e base presas ao arco; o topo livre */
  clip-path: inset(-30% 0 0 0 round 0 0 var(--raio) var(--raio));
}

/* ---------- o fio: temas em duas colunas, percurso no vão ---------- */
.av-fio { position: relative; margin-top: clamp(48px, 6vw, 88px); }
.av-rota { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.av-rota .rota-trilha { stroke: rgb(19 48 74 / .3); stroke-width: 1.4; }
.av-rota .rota-traco { stroke-width: 2.2; }
.av-parada { position: relative; z-index: 1; }
.av-marca { position: absolute; width: 0; height: 0; }

.av-temas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--av-vao) minmax(0, 1fr);
  row-gap: 0;
}
.av-tema {
  --tt: calc(var(--tam) * .085rem + 1.25rem);
  padding-bottom: clamp(44px, 5vw, 72px);
}
.av-tema:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.av-tema:nth-child(2) { grid-column: 3; grid-row: 2 / 4; }
.av-tema:nth-child(3) { grid-column: 1; grid-row: 3 / 5; }
.av-tema:nth-child(4) { grid-column: 3; grid-row: 4 / 6; }
.av-tema:nth-child(5) { grid-column: 1; grid-row: 5 / 7; }

/* coluna da esquerda: alinhada ao vão (ao percurso) */
.av-tema:nth-child(odd) { text-align: right; }
.av-tema:nth-child(odd) .av-tema-nome { justify-content: flex-end; }
.av-tema:nth-child(odd) .av-cit { margin-left: auto; }
.av-tema:nth-child(odd) .av-marca { right: calc(var(--av-vao) * -.28); }
.av-tema:nth-child(even) .av-marca { left: calc(var(--av-vao) * -.28); }
.av-tema .av-marca { top: calc(var(--tt) * .56); }

.av-tema-nome {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 16px;
  margin: 0 0 18px;
}
.av-tema-nome .voz { font-size: var(--tt); line-height: 1.02; letter-spacing: -.03em; color: var(--marinho); }
.av-num { display: inline-flex; align-items: baseline; color: var(--marinho); white-space: nowrap; }
.av-num b { font-size: calc(var(--tt) * .78); font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.av-num > span { font-size: max(var(--t-mini), calc(var(--tt) * .34)); font-weight: 500; color: var(--tx-claro-2); margin-left: .12em; letter-spacing: -.01em; }
.av-tema-leg { flex-basis: 100%; font-size: var(--t-mini); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-claro-2); }
.av-tema-leg .voz { font-size: 1.35em; text-transform: none; letter-spacing: -.01em; color: var(--marinho); }

/* primeira parada: o número da palavra grande */
.av-tema:nth-child(1) { --tt: clamp(3.4rem, 6.4vw, 6rem); }
.av-tema:nth-child(1) .av-tema-nome { flex-direction: column; align-items: flex-end; gap: 10px; }
.av-tema:nth-child(1) .av-num b { font-size: var(--tt); }
.av-tema:nth-child(1) .av-num > span { font-size: calc(var(--tt) * .4); }
.av-tema:nth-child(1) .av-tema-leg { flex-basis: auto; }
.av-tema:nth-child(1) .av-marca { top: calc(var(--tt) * .48); }

/* as citações */
.av-cit { margin: 0; max-width: 25em; }
.av-cit blockquote {
  margin: 0;
  font-size: clamp(1.25rem, .95rem + .7vw, 1.5625rem);
  line-height: 1.38;
  color: var(--marinho);
  text-wrap: pretty;
}
.av-grifo {
  color: inherit;
  background: linear-gradient(0deg, rgb(240 195 168 / .62) 0 38%, transparent 38%) no-repeat;
  padding: 0 .08em;
  margin: 0 -.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.av-cit figcaption { margin-top: 12px; font-size: .9375rem; font-weight: 600; letter-spacing: .02em; color: var(--tx-claro-2); }

/* ---------- a chegada: painel marinho ---------- */
.av-fecho { margin-top: clamp(16px, 2vw, 32px); }
.av-marca--fim { left: 50%; top: 0; }
.av-painel {
  position: relative;
  overflow: clip;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  padding: clamp(48px, 5.4vw, 80px) clamp(28px, 5vw, 80px);
  border-radius: var(--raio);
  background: var(--marinho);
  color: var(--creme);
  box-shadow: 0 34px 70px -40px rgb(13 34 56 / .7);
}
.av-painel-luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 70% at 0% 100% in oklab, rgb(78 90 69 / .5), rgb(78 90 69 / 0)),
    radial-gradient(ellipse 40% 60% at 48% -10% in oklab, rgb(240 195 168 / .2), rgb(240 195 168 / 0)),
    radial-gradient(ellipse 50% 80% at 100% 30% in oklab, rgb(143 138 166 / .4), rgb(143 138 166 / 0));
}
.av-notas { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: clamp(22px, 2.6vw, 36px) 18px; }
.av-nota { display: contents; }
.av-nota > b { font-size: clamp(3.6rem, 7vw, 6.6rem); font-weight: 700; line-height: .8; letter-spacing: -.05em; color: var(--creme); }
.av-nota > span { font-size: 1rem; line-height: 1.4; color: var(--tx-escuro-2); padding-bottom: 2px; }
.av-estrelas { color: var(--pessego); letter-spacing: .12em; margin-right: 2px; }
.av-painel .av-cit { max-width: 22em; }
.av-painel .av-cit blockquote { color: var(--creme); font-size: clamp(1.4rem, 1rem + 1.1vw, 2rem); line-height: 1.3; }
.av-painel .av-cit figcaption { color: var(--tx-escuro-2); }
.av-links { display: flex; flex-wrap: wrap; gap: 0 32px; margin: 22px 0 0; }
.av-painel .btn-sec { color: var(--creme); text-decoration-color: rgb(240 195 168 / .6); }
.av-painel .btn-sec:hover { text-decoration-color: var(--pessego); }
.av-painel a:focus-visible { outline-color: var(--pessego); }
.av-metodo { margin: 18px 0 0; font-size: var(--t-mini); color: var(--tx-claro-2); }

/* ---------- celular e tablet em pé ---------- */
@media (max-width: 900px) {
  .av { --av-recuo: 40px; }
  .av-cabeca { grid-template-columns: minmax(0, 1fr); }
  .av-topo { max-width: 13em; }
  .av-retrato { grid-column: 1; grid-row: 2; width: min(64%, 330px); margin: 28px 0 0 auto; }
  .av-palavra { grid-row: 3; font-size: min(19.5vw, 9rem); margin-top: 18px; }
  .av-fio { margin-top: 32px; }
  .av-temas { display: block; }
  .av-tema { --tt: calc((var(--tam) * .085rem + 1.25rem) * .7); padding: 0 0 56px var(--av-recuo); }
  .av-tema:nth-child(odd) { text-align: left; }
  .av-tema:nth-child(odd) .av-tema-nome { justify-content: flex-start; }
  .av-tema:nth-child(odd) .av-cit { margin-left: 0; }
  .av-tema .av-marca, .av-tema:nth-child(odd) .av-marca, .av-tema:nth-child(even) .av-marca { left: 8px; right: auto; }
  .av-tema:nth-child(1) { --tt: 3.4rem; }
  .av-tema:nth-child(1) .av-tema-nome { align-items: flex-start; }
  .av-fecho { margin-top: 8px; }
  .av-marca--fim { left: 8px; }
  .av-painel { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}