/* Seção "Trajetória" · prefixo tra- · a fatia: do miolo (1986) à casca (2026) */
.tra{--tra-h:3.6rem;--tra-fh:clamp(11rem,17vw,15rem);--tra-a:calc(var(--tra-h)*7);--tra-b:15.5rem}
.tra-cabeca{max-width:34rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.tra-titulo{font-size:clamp(2.3rem,1rem + 4.4vw,4.7rem);line-height:1}
.tra-titulo em{display:block}
.tra-cabeca .w-texto{margin-top:1.6rem;max-width:30rem}
/* no desktop largo o título ocupa o canto vazio da escada: os dois degraus de cima ficam ao lado dele */
@media (min-width:1300px){.tra-cabeca{margin-bottom:calc(var(--tra-h)*-2 + 1.2rem)}}

.tra-palco{position:relative;height:calc(var(--tra-a) + var(--tra-fh) + var(--tra-b))}
.tra-fatia{position:absolute;left:0;right:0;top:var(--tra-a);height:var(--tra-fh);filter:drop-shadow(0 1.6rem 2rem rgba(0,0,0,.55))}
.tra-fatia img{width:100%;height:100%;max-width:none}
/* a fatia como objeto: luz no fio de cima, sombra no de baixo */
.tra-fatia::after{content:"";position:absolute;left:0;right:3.1%;top:0;bottom:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,236,200,.5) 0,rgba(255,236,200,0) 2px,rgba(18,10,6,0) 72%,rgba(18,10,6,.42) 100%)}
/* períodos acesos sobre os anéis */
.tra-periodo{position:absolute;top:0;bottom:0;left:calc(var(--x0)*1%);width:calc((var(--x1) - var(--x0))*1%);display:flex;flex-wrap:wrap;gap:0 .4em;padding:.5rem .6rem;font-size:var(--w-t-mini);line-height:1.25;color:var(--b-tinta);border-left:1px solid rgba(255,240,214,.85);border-right:1px solid rgba(255,240,214,.85);background:linear-gradient(180deg,rgba(255,232,190,.26),rgba(255,232,190,.08))}
.tra-periodo b{font-weight:600}
.tra-periodo--crm{align-content:flex-start;padding-right:calc((89.35 - 76.63)*1% + .3rem)}
.tra-periodo span{white-space:nowrap}
.tra-periodo--codame{align-content:flex-end;z-index:1;background:linear-gradient(180deg,rgba(255,232,190,.06),rgba(255,236,200,.42))}
/* a régua: um risco por anel, mais longo a cada dez */
.tra-escala{position:absolute;left:0;top:calc(var(--tra-a) + var(--tra-fh) + .35rem);width:100%;height:.8rem;overflow:visible}
.tra-escala path{stroke:rgba(242,235,227,.5);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.tra-decadas{margin:0;position:absolute;left:0;right:0;top:calc(var(--tra-a) + var(--tra-fh) + 1.5rem);font-size:var(--w-t-mini);color:var(--b-creme-suave);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.tra-decadas span{position:absolute;left:calc(var(--x)*1%);transform:translateX(-50%)}


.tra-marcos{list-style:none;margin:0;padding:0}
.tra-placa{margin:0;flex:none;display:inline-flex;align-items:baseline;gap:.5em;padding:.2em .7em .24em;border-radius:3px;background:rgba(18,10,6,.8);border:1px solid rgba(242,235,227,.2);font-family:var(--b-sans);font-weight:400;font-size:var(--w-t-mini);line-height:1.3;color:var(--b-creme-suave);letter-spacing:.02em;white-space:nowrap}
.tra-placa b{font-weight:600;color:var(--b-creme);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.tra-desc{margin:0;font-size:.95rem;line-height:1.4;color:var(--b-creme-suave)}
.tra-desc q{font-family:var(--b-serif);font-style:italic;font-size:1.08em;color:var(--b-creme)}

/* marcos de cima: escada que sobe para a casca */
.tra-sobe{position:absolute;right:calc(100% - var(--x)*1%);bottom:calc(var(--tra-b) + var(--tra-fh) + var(--n)*var(--tra-h));height:var(--tra-h);display:flex;flex-direction:row-reverse;align-items:center;gap:1rem;padding-right:1rem}
.tra-sobe .tra-desc{max-width:33rem;text-align:right;text-wrap:balance}
.tra-sobe::after{content:"";position:absolute;right:0;top:50%;width:1rem;height:calc(var(--n)*var(--tra-h) + var(--tra-h)/2);border-top:1px solid rgba(242,235,227,.6);border-right:1px solid rgba(242,235,227,.6)}
.tra-sobe::before{content:"";position:absolute;z-index:1;right:-3.5px;top:calc(100% + var(--n)*var(--tra-h) - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--b-creme);box-shadow:0 0 0 3px rgba(18,10,6,.42),0 0 10px rgba(255,226,170,.6)}
/* marcos de baixo: as origens */
.tra-desce{position:absolute;left:calc(var(--x)*1%);top:calc(var(--tra-a) + var(--tra-fh));padding:2.6rem 0 0 1rem;max-width:calc(23.3% - 1rem)}
.tra-desce .tra-desc{margin-top:.6rem}
.tra-desce::after{content:"";position:absolute;left:0;top:0;width:1rem;height:calc(2.6rem + .8em);border-left:1px solid rgba(242,235,227,.6);border-bottom:1px solid rgba(242,235,227,.6)}
.tra-desce::before{content:"";position:absolute;z-index:1;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--b-creme);box-shadow:0 0 0 3px rgba(18,10,6,.42),0 0 10px rgba(255,226,170,.6)}

/* a faixa contínua: corre por baixo da fatia, sem ano de início */
.tra-continua{margin:0;position:absolute;left:0;right:3.25%;top:calc(var(--tra-a) + var(--tra-fh) + 3.4rem);min-height:2.2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 .6em;padding:.3rem .9rem;border-radius:0 3px 3px 0;font-size:var(--w-t-mini);line-height:1.3;color:var(--b-tinta);background:linear-gradient(90deg in oklab,rgba(227,167,99,0) 0%,rgba(227,167,99,.55) 34%,#e3a763 58%,#ecb777 100%)}
.tra-continua b{font-weight:600}
.tra-desce{padding-top:7.4rem}
.tra-desce::after{height:calc(7.4rem + .8em)}
.tra-desce--larga{max-width:min(34%,27rem)}
/* a voz dele, a única da seção */
.tra-voz{margin:.9rem 0 0}
.tra-voz blockquote{margin:0;font-family:var(--b-serif);font-style:italic;font-size:var(--w-t-sub);line-height:1.2;color:var(--b-creme);text-wrap:balance}
.tra-voz figcaption{margin-top:.4rem;font-size:var(--w-t-mini);letter-spacing:.04em;color:var(--b-creme-suave)}
.tra-desce .tra-desc{font-size:1rem}

/* gesto: a fatia se revela do miolo para a casca, e cada marco aparece quando o corte chega nele */
.w-js .tra-fatia{clip-path:inset(-5% 100% -40% 0);transition:clip-path 2.6s cubic-bezier(.3,.6,.3,1)}
.w-js .tra-marcos li,.w-js .tra-decadas span{opacity:0;transition:opacity .8s ease calc(var(--x)*24ms)}
.w-js .tra-continua{clip-path:inset(0 100% 0 0);transition:clip-path 2.6s cubic-bezier(.3,.6,.3,1) .5s}
.w-js .tra-periodo{opacity:0;transition:opacity 1s ease 2.4s}
.w-js .tra-escala{clip-path:inset(0 100% 0 0);transition:clip-path 2.6s cubic-bezier(.3,.6,.3,1) .15s}
.w-js .tra-visto .tra-fatia{clip-path:inset(-5% -2% -40% 0)}
.w-js .tra-visto .tra-marcos li,.w-js .tra-visto .tra-decadas span,.w-js .tra-visto .tra-periodo{opacity:1}
.w-js .tra-visto .tra-continua,.w-js .tra-visto .tra-escala{clip-path:inset(0)}

/* tablet e celular: a régua fica em pé, miolo em cima; cada trecho mostra os anéis até o marco seguinte */
@media (max-width:999px){
  .tra-palco{height:auto}
  .tra-fatia{position:relative;top:0;height:4.6rem;margin-bottom:2rem}
  .tra-periodo,.tra-escala{display:none}
  .tra-decadas{display:none}
  .tra-marcos{position:relative}
  .tra-marcos::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2.75rem;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(255,230,180,.07) 0 1px,transparent 1px 3px,rgba(60,30,10,.06) 3px 4px,transparent 4px 7px),linear-gradient(180deg in oklab,#8a4f26 0%,#b8743a 40%,#d99a55 75%,#e3a763 100%);box-shadow:inset 1px 0 0 rgba(255,236,200,.35),inset -6px 0 8px -4px rgba(18,10,6,.45)}
  .tra-sobe,.tra-desce{position:relative;left:auto;right:auto;top:auto;bottom:auto;height:auto;max-width:none;display:block;padding:0 0 1.9rem 4.1rem;min-height:calc(var(--a)*9px + 2rem)}
  .tra-sobe .tra-desc,.tra-desce .tra-desc{margin-top:.55rem;text-align:left;max-width:30rem}
  .tra-sobe::after,.tra-desce::after{left:0;right:auto;top:0;bottom:0;width:2.75rem;height:auto;border:0;background:repeating-linear-gradient(180deg,rgba(58,28,10,.6) 0 1.5px,transparent 1.5px calc(100%/var(--a)))}
  .tra-sobe::before,.tra-desce::before{left:calc(2.75rem - 3.5px);right:auto;top:.75rem}
  .tra-placa{position:relative}
  .tra-placa::before{content:"";position:absolute;right:100%;top:50%;width:calc(1.35rem - 3.5px);height:1px;background:rgba(242,235,227,.6)}
  .tra-hoje{min-height:0;padding-bottom:1.2rem}
  .tra-hoje::after{background:linear-gradient(180deg,rgba(58,28,10,.6) 0 1.5px,transparent 1.5px calc(100% - 1rem),#2a160c calc(100% - 1rem))}
  .tra-desce{padding-top:0}
  .tra-desce--larga{max-width:none}
  .tra-sobe .tra-desc{text-wrap:pretty}
  /* os dez anos de conselho ficam acesos na régua em pé */
  .tra-conselho::after{box-shadow:inset 0 0 0 99rem rgba(255,236,200,.24),inset 3px 0 0 rgba(255,244,222,.9)}
  .tra-continua{position:relative;left:auto;right:auto;top:auto;margin-top:1.4rem;padding:.6rem .9rem;justify-content:flex-start;border-radius:3px;background:linear-gradient(90deg in oklab,rgba(227,167,99,.7) 0%,#e3a763 40%,#ecb777 100%)}
  .w-js .tra-marcos li{transition-delay:calc(var(--x)*8ms)}
}
@media (prefers-reduced-motion:reduce){
  .w-js .tra-fatia,.w-js .tra-continua,.w-js .tra-escala{clip-path:none}
  .w-js .tra-marcos li,.w-js .tra-decadas span,.w-js .tra-periodo{opacity:1}
}