/* ===== tr · VEIO 04 · Tratamentos ===== */
.tr{--tr-eixo:7rem;--tr-linha:color-mix(in oklab,var(--wf-veio-claro) 45%,transparent)}

/* abertura: título grande à esquerda, apoio à direita, alinhados pela base */
.tr-topo{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:end;margin:0 0 clamp(4rem,7vw,7.5rem)}
.tr-h2{font-size:clamp(2.4rem,1.2rem + 4.2vw,5.2rem);line-height:1.02}
.tr-topo-b{display:grid;gap:1.8rem;padding-bottom:.6rem}
.tr-lead{margin:0}

/* o caminho: coluna esquerda · eixo do veio · coluna direita */
.tr-caminho{position:relative;display:grid;grid-template-columns:1fr var(--tr-eixo) 1fr;row-gap:clamp(4rem,6.5vw,7rem)}
.tr-veio{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}
.tr-caminho>:not(.tr-veio):not(.tr-veu){position:relative;z-index:1}
/* véu: acalma a pedra ao longo do eixo para o veio desenhado mandar */
.tr-veu{position:absolute;z-index:0;top:-4rem;bottom:-8rem;left:50%;width:min(46rem,60%);transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(246,240,235,.85),rgba(246,240,235,0))}

/* etapas: a palavra pende à esquerda do veio, o número à direita */
.tr-etapa{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;margin:0}
.tr-etapa-p{grid-column:1;justify-self:end;font-family:var(--b-serifa);font-weight:200;font-style:italic;font-size:clamp(2.6rem,1.4rem + 4vw,5.4rem);line-height:1;letter-spacing:-.015em;color:var(--wf-terracota)}
.tr-etapa-n{grid-column:3;grid-row:1;font-family:var(--b-mono);font-size:var(--t-rotulo);letter-spacing:.22em;text-transform:uppercase;color:var(--wf-tinta-suave)}
.tr-etapa-n::after{content:" / 03"}
.tr-etapa-s{grid-column:3;grid-row:1;align-self:end;margin-bottom:.5rem;font-family:var(--b-serifa);font-style:italic;font-weight:300;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);color:var(--wf-tinta-suave)}
.tr-etapa-n{align-self:start;margin-top:.6rem}
.tr-etapa::before{content:"";grid-column:3;grid-row:1;align-self:center;height:1px;margin-left:-1rem;background:linear-gradient(90deg,var(--tr-linha),transparent 85%)}
.tr-etapa>span{position:relative}

.tr-item{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:start}
.tr-a{grid-column:1;justify-self:end;width:min(100%,32rem)}
.tr-b{grid-column:3;justify-self:start;width:min(100%,32rem)}
.tr-num{margin:0 0 .7rem;font-family:var(--b-mono);font-size:.72rem;letter-spacing:.2em;color:var(--wf-terracota)}
.tr-h3{font-size:clamp(1.55rem,1.2rem + 1.1vw,2.3rem);line-height:1.1;margin-bottom:1rem}
.tr-a .wf-texto,.tr-b .wf-texto{margin:0 0 1.1rem}

/* 04.1: foto grande que sangra até a borda */
.tr-i1{align-items:center}
.tr-i1 .tr-a{width:auto;justify-self:stretch;margin-left:calc(-1 * var(--b-margem))}
.tr-foto-visor{aspect-ratio:1080/1000}
.tr-fato{margin:0 0 1.6rem;padding:.9rem 0;border-top:1px solid var(--tr-linha);border-bottom:1px solid var(--tr-linha);
  font-family:var(--b-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.7;color:var(--wf-tinta-suave)}
.tr-fato span{display:block;color:var(--wf-terracota)}

/* vozes */
.tr-voz{margin:0;font-family:var(--b-serifa);font-style:italic;font-weight:300;font-size:clamp(1.2rem,1rem + .8vw,1.75rem);line-height:1.36;color:var(--wf-tinta)}
.tr-voz-autor{margin:.9rem 0 0;font-family:var(--b-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wf-tinta-suave)}
.tr-i2 .tr-b{padding-top:2.2rem}
.tr-i3 .tr-a .tr-voz{font-size:clamp(1.1rem,1rem + .45vw,1.4rem);margin-top:1.4rem}
.tr-cita p{font-size:clamp(1.02rem,.96rem + .3vw,1.22rem)}
.tr-vozes{display:grid;gap:1.6rem;padding-top:2rem}
.tr-link{color:var(--wf-terracota);font-weight:500}

/* 04.3: retrato com o laser, alto */
.tr-i3{align-items:center}
.tr-i3 .tr-b{width:min(100%,26rem)}
/* filete de pedra cortada atrás das fotos */
.tr-foto::before{content:"";position:absolute;inset:-14px auto auto -14px;width:100%;height:100%;border:1px solid color-mix(in oklab,var(--wf-terracota) 40%,transparent);z-index:-1;pointer-events:none}
.tr-foto-visor::before{inset:auto -14px -14px auto}
.tr-foto-laser{aspect-ratio:780/990}

/* 04.5: lista */
.tr-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--tr-linha)}
.tr-lista li{padding:.95rem 0;border-bottom:1px solid var(--tr-linha);font-family:var(--b-serifa);font-weight:300;font-size:clamp(1.15rem,1rem + .5vw,1.5rem);color:var(--wf-tinta)}

/* 04.6: o ano */
.tr-i6{align-items:center}
.tr-ano{margin:0;text-align:right;font-family:var(--b-serifa);font-weight:200;font-size:clamp(5rem,3rem + 8vw,11rem);line-height:.85;letter-spacing:-.03em;color:var(--wf-terracota)}
.tr-ano span{display:block;font-family:var(--b-mono);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wf-tinta-suave);margin-bottom:.6rem;padding-right:.6rem}

/* veio do caminho (desenhado em tr.js) */
.tr-veio .tr-v-fundo{fill:none;stroke:var(--wf-veio-claro);stroke-linecap:round;opacity:.45}
.tr-veio .tr-v-halo{fill:none;stroke:#c98f80;stroke-linecap:round;opacity:.2}
.tr-veio .tr-v-luz{fill:none;stroke:var(--wf-terracota);stroke-linecap:round}
.tr-veio .tr-v-ramo{fill:none;stroke:var(--wf-terracota);stroke-linecap:round;opacity:.5}
.tr-veio .tr-v-no{fill:var(--wf-marfim);stroke:var(--wf-veio-claro);stroke-width:1.2;transition:fill .6s var(--b-ease),stroke .6s var(--b-ease)}
.tr-veio .tr-v-no.is-on{fill:var(--wf-terracota);stroke:var(--wf-terracota)}
.tr-veio .tr-v-anel{fill:none;stroke:var(--wf-veio-claro);stroke-width:1;transition:stroke .6s var(--b-ease)}
.tr-veio .tr-v-anel.is-on{stroke:var(--wf-terracota)}

/* fecho: o veio termina aqui */
.tr-fecho{margin:clamp(3rem,6vw,6rem) auto 0;max-width:44rem;text-align:center;display:grid;justify-items:center;gap:.9rem;position:relative;z-index:1}
.tr-fecho-ponto{display:block;width:13px;height:13px;border-radius:50%;background:var(--wf-terracota);box-shadow:0 0 0 6px color-mix(in oklab,var(--wf-terracota) 14%,transparent),0 0 0 14px color-mix(in oklab,var(--wf-terracota) 6%,transparent);margin-bottom:1.2rem}
.tr-fecho-frase{margin:0;font-family:var(--b-serifa);font-weight:200;font-style:italic;font-size:clamp(1.8rem,1.2rem + 2.4vw,3.2rem);line-height:1.12;color:var(--wf-tinta);text-wrap:balance}
.tr-fecho-autor{margin:0 0 .9rem;font-family:var(--b-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wf-tinta-suave)}

@media (max-width:1100px) and (min-width:861px){
  .tr{--tr-eixo:4.5rem}
}
@media (max-width:860px){
  .tr{--tr-eixo:1.6rem}
  .tr-topo{grid-template-columns:1fr;align-items:start}
  .tr-caminho{grid-template-columns:var(--tr-eixo) 1fr;row-gap:3.6rem}
  .tr-etapa{display:flex;flex-direction:column;align-items:flex-start;grid-column:2;gap:.4rem}
  .tr-etapa-p{font-size:3rem}
  .tr-etapa-n{order:-1;margin:0}
  .tr-etapa::before{display:none}
  .tr-etapa-s{margin:0;align-self:flex-start}
  .tr-veu{display:none}
  .tr-fecho-ponto{margin-left:calc(-1 * var(--tr-eixo) / 2 - 6.5px)}
  .tr-item{row-gap:1.6rem}
  .tr-a,.tr-b,.tr-i3 .tr-b{grid-column:2;justify-self:stretch;width:auto}
  .tr-i1 .tr-a{margin-left:0;margin-right:calc(-1 * var(--b-margem))}
  .tr-i3 .tr-b{max-width:21rem}
  .tr-i4 .tr-b{grid-row:1}
  .tr-vozes,.tr-i2 .tr-b{padding-top:0}
  .tr-ano{text-align:left;font-size:5.2rem}
  .tr-ano span{padding:0}
  .tr-fecho{text-align:left;justify-items:start;padding-left:var(--tr-eixo)}
}