/* tr · Trajetória (#trajetoria, papel sálvia) — fotos reais como pranchas de atlas + a linha da formação
   Gesto: o fio da formação se desenha com a rolagem; cada nó acende quando o fio chega nele (js/tr.js). */

.tr-sec{--tr-fio:rgba(20,44,72,.26);--tr-marca:rgba(20,44,72,.5)}
.tr-grade{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));column-gap:clamp(16px, 2.2vw, 32px);align-items:start}
.tr-cab{grid-column:1 / span 6;grid-row:1;padding-bottom:clamp(48px, 6vw, 80px)}
.tr-p1{grid-column:7 / span 6;grid-row:1 / span 2}
.tr-esq{grid-column:1 / span 5;grid-row:2 / span 2;align-self:stretch}
.tr-mural{grid-column:6 / span 7;grid-row:3;margin-top:clamp(56px, 7vw, 110px)}

/* ---------- prancha: foto como prancha de atlas (papel, marcas de corte, legenda em mono) ---------- */
.tr-prancha{margin:0;position:relative;padding:14px 14px 12px;background:#F7F8F6;
  box-shadow:0 1px 0 rgba(20,44,72,.06), 0 22px 46px -30px rgba(4,33,65,.45)}
/* marcas de corte nos quatro cantos, por fora da folha */
.tr-prancha::before{content:"";position:absolute;inset:-9px;pointer-events:none;
  --l:14px;--c:var(--tr-marca);
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) 1px, linear-gradient(var(--c),var(--c)) 0 0/1px var(--l),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) 1px, linear-gradient(var(--c),var(--c)) 100% 0/1px var(--l),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) 1px, linear-gradient(var(--c),var(--c)) 0 100%/1px var(--l),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) 1px, linear-gradient(var(--c),var(--c)) 100% 100%/1px var(--l);
  background-repeat:no-repeat}
.tr-leg-topo{display:flex;justify-content:space-between;gap:12px;margin:0 0 10px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-papel-fina);white-space:nowrap}
.tr-leg-topo span:first-child{color:var(--tinta-papel)}
.tr-foto{position:relative;background:#0B2240}
.tr-foto img{width:100%;height:auto}
.tr-leg{margin:12px 2px 0;font-size:.92rem;line-height:1.5;color:var(--tinta-papel-suave);text-wrap:pretty}

/* rótulo de atlas sobre a foto: ponto + fio + mono */
.tr-rot{position:absolute;left:var(--x);top:var(--y);padding-left:36px;transform:translate(-4px,-50%);line-height:1;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.07em;color:var(--gelo);white-space:nowrap;pointer-events:none}
.tr-rot b{display:block;font-weight:400;padding:5px 8px 5px;border-radius:3px;background:rgba(4,33,65,.78);backdrop-filter:blur(3px)}
.tr-rot i{position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--gelo);box-shadow:0 0 0 3px rgba(11,34,64,.4)}
.tr-rot i::after{content:"";position:absolute;left:12px;top:3.5px;width:20px;height:1px;background:rgba(244,245,250,.85)}
.tr-rot-e{padding:0 36px 0 0;transform:translate(calc(-100% + 4px),-50%)}
.tr-rot-e i{left:auto;right:0}
.tr-rot-e i::after{left:auto;right:12px}

/* ---------- a linha da formação ---------- */
.tr-linha-caixa{position:relative}
.tr-sub{margin:0 0 22px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--salvia-escura)}
.tr-linha{list-style:none;margin:0;padding:0 0 0 34px;position:relative;--tr-prog:0}
.tr-linha::before,.tr-linha::after{content:"";position:absolute;left:4px;top:8px;height:var(--tr-alt, calc(100% - 16px));width:1px;background:var(--tr-fio)}
.tr-linha::after{width:2px;left:3.5px;background:var(--salvia-escura);transform-origin:top;transform:scaleY(var(--tr-prog))}
.tr-linha li{position:relative;padding:0 0 28px}
.tr-linha li::before{content:"";position:absolute;left:-34px;top:5px;width:9px;height:9px;border-radius:50%;background:#E4EAE5;border:1.5px solid var(--tr-marca);transition:background .5s var(--curva), border-color .5s, box-shadow .6s var(--curva)}
.tr-linha li.tr-aceso::before{background:var(--salvia-escura);border-color:var(--salvia-escura);box-shadow:0 0 0 5px rgba(78,106,96,.16)}
.tr-n{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;color:var(--tinta-papel-suave)}
.tr-linha b{display:block;margin-top:3px;font-weight:700;font-variation-settings:"wdth" 86;font-size:1.14rem;line-height:1.25;color:var(--tinta-papel);text-wrap:balance}
.tr-onde{display:block;margin-top:5px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.03em;color:var(--salvia-escura)}
.tr-linha li{opacity:.55;transition:opacity .6s var(--curva)}
.tr-linha li.tr-aceso{opacity:1}

/* 05 · hoje: o clímax — o preceptor */
.tr-hoje{padding:26px 0 0!important;margin-top:4px}
.tr-hoje::before{top:33px!important;width:13px!important;height:13px!important;left:-36px!important}
.tr-hoje::after{content:"";position:absolute;left:-46px;top:23px;width:33px;height:33px;border-radius:50%;
  background:conic-gradient(from 0deg, var(--salvia-escura) 0 113deg, transparent 113deg 122deg, var(--salvia-escura) 122deg 292deg, transparent 292deg 302deg, var(--salvia-escura) 302deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));mask:radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  opacity:0;transform:rotate(-40deg) scale(.7);transition:opacity .8s var(--curva), transform 1.2s var(--curva-articula)}
.tr-hoje.tr-aceso::after{opacity:1;transform:none}
.tr-hoje .tr-n{color:var(--salvia-escura)}
.tr-hoje b{font-size:clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem);font-weight:800;font-variation-settings:"wdth" 76;line-height:1}
.tr-hoje .tr-onde{font-size:.82rem;margin-top:8px}
.tr-hoje-txt{margin:14px 0 0;font-size:1.04rem;line-height:1.6;color:var(--tinta-papel-suave);max-width:30em;text-wrap:pretty}

/* ---------- o mural das pranchas menores ---------- */
.tr-mural{display:grid;grid-template-columns:repeat(7, minmax(0,1fr));column-gap:clamp(16px, 2.2vw, 32px);align-items:start}
.tr-p2{grid-column:1 / span 3;grid-row:1}
.tr-p3{grid-column:4 / span 4;grid-row:1;margin-top:clamp(80px, 12vw, 170px)}
.tr-p4{margin:clamp(48px, 5vw, 72px) 0 0 34px;width:min(78%, 330px)}
.tr-pista{display:none}

/* ---------- a gravura do logo, marca d'água atrás do preceptor ---------- */
.tr-gravura{position:absolute;z-index:-1;pointer-events:none;width:clamp(300px, 30vw, 440px);aspect-ratio:1;right:clamp(-120px, -6vw, -40px);top:-120px;
  background:var(--tinta-papel);opacity:0;transform:rotate(-14deg) scale(.96);transition:opacity 1.4s var(--curva), transform 1.8s var(--curva-articula);
  -webkit-mask:url(../img/osso-escapula-umero.svg) center/contain no-repeat;mask:url(../img/osso-escapula-umero.svg) center/contain no-repeat}
.tr-hoje.tr-aceso .tr-gravura{opacity:.075;transform:rotate(0) scale(1)}
.tr-hoje > :not(.tr-gravura){position:relative}

/* ---------- o foco: a foto em cor por baixo do duotom ---------- */
.tr-foto{overflow:hidden}
.tr-foto .tr-cor{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--curva)}
.tr-prancha{transition:transform .6s var(--curva), box-shadow .6s var(--curva)}
@media (hover:hover){
  .tr-prancha:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(20,44,72,.06), 0 30px 56px -30px rgba(4,33,65,.55)}
  .tr-prancha:hover .tr-cor{opacity:1}
}
@media (hover:none){.tr-cor{display:none}}

/* ---------- coreografia dos rótulos: foto, depois ponto, depois fio e tarja ---------- */
.js .tr-rot i{transform:scale(0);transition:transform .5s var(--curva) calc(var(--d,0s) + .55s)}
.js .tr-rot i::after{transform:scaleX(0);transform-origin:left;transition:transform .5s var(--curva) calc(var(--d,0s) + .75s)}
.js .tr-rot-e i::after{transform-origin:right}
.js .tr-rot b{opacity:0;transform:translateX(-6px);transition:opacity .5s var(--curva) calc(var(--d,0s) + .95s), transform .6s var(--curva) calc(var(--d,0s) + .95s)}
.js .tr-rot-e b{transform:translateX(6px)}
.js .tr-rot + .tr-rot i{transition-delay:calc(var(--d,0s) + .75s)}
.js .tr-rot + .tr-rot i::after{transition-delay:calc(var(--d,0s) + .95s)}
.js .tr-rot + .tr-rot b{transition-delay:calc(var(--d,0s) + 1.15s)}
.wf-visto .tr-rot i,.wf-visto .tr-rot i::after{transform:none}
.wf-visto .tr-rot b{opacity:1;transform:none}

/* ---------- notebook ---------- */
@media (max-width:1180px) and (min-width:861px){
  .tr-cab{grid-column:1 / span 7}
  .tr-p1{grid-column:8 / span 5}
  .tr-esq{grid-column:1 / span 6}
  .tr-mural{grid-column:7 / span 6}
  .tr-mural{grid-template-columns:repeat(6, minmax(0,1fr))}
  .tr-p2{grid-column:1 / span 5}
  .tr-p3{grid-column:2 / span 5;grid-row:2;margin-top:40px}
}

/* ---------- tablet e celular: tudo em uma coluna; pranchas menores numa faixa com rolagem lateral ---------- */
@media (max-width:860px){
  .tr-grade{display:block}
  .tr-cab{padding-bottom:40px}
  .tr-p1{margin-bottom:56px}
  .tr-mural{display:flex;gap:18px;margin:56px calc(var(--margem) * -1) 0;padding:12px var(--margem) 16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);scrollbar-width:none;overscroll-behavior-x:contain}
  .tr-mural::-webkit-scrollbar{display:none}
  .tr-mural .tr-prancha{flex:0 0 min(78%, 360px);scroll-snap-align:start;margin:0;grid-area:auto}
  .tr-p4{margin:44px 0 0 34px;width:min(80%, 320px)}
  .tr-pista{display:flex;gap:8px;margin:56px 0 0;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-papel-suave)}
  .tr-pista span{color:var(--salvia-escura);animation:tr-empurra 1.8s var(--curva) infinite}
  .tr-mural{margin-top:14px}
  .tr-gravura{width:260px;right:-70px;top:-60px}
}
@keyframes tr-empurra{50%{transform:translateX(5px)}}
@media (max-width:520px){
  .tr-prancha{padding:10px 10px 10px}
  .tr-leg{font-size:.86rem}
  .tr-leg-topo{font-size:.68rem;letter-spacing:.06em}
  .tr-rot{font-size:.64rem}
  .tr-onde{font-size:.72rem}
}