/* Trajetória (Figma: Sobre 339:987 / Sessão trajetória). Cards de
   557×200 que se alternam esquerda/direita, um por linha da grade, sem
   vão vertical entre eles (cada card começa onde o anterior termina);
   a linha do tempo (30px de bolinha, fio de 1px) corre no centro. */

.trajetoria { padding: 56px 0; overflow-x: clip; /* cards entram deslizando 28px de fora */ }
@media (min-width: 1024px) {
  .trajetoria { padding: 0; }
}

.trajetoria-intro { text-align: center; margin-bottom: 32px; }
.trajetoria-intro .eyebrow { margin-bottom: 24px; }
.trajetoria-intro h2 { max-width: 902px; margin: 0 auto; text-wrap: wrap; }
@media (min-width: 1024px) {
  .trajetoria-intro { margin-bottom: 64px; }
}

/* Mobile: coluna de 30px só pra bolinha/fio + coluna de conteúdo.
   Desktop: 557 | 166 | 557 (colunas em fr, escalam com o container). */
.trajetoria-timeline {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: repeat(var(--trajetoria-rows), auto);
  row-gap: 20px;
  column-gap: 16px;
}
@media (min-width: 1024px) {
  .trajetoria-timeline {
    grid-template-columns: 557fr 166fr 557fr;
    grid-template-rows: repeat(var(--trajetoria-rows), 200px);
    row-gap: 0;
    column-gap: 0;
  }
}

.trajetoria-track {
  grid-column: 1;
  grid-row: 1 / -1;
  position: relative;
}
@media (min-width: 1024px) {
  .trajetoria-track { grid-column: 2; }
}

/* Fio de 1px (#FDAC83) com o preenchimento (#EC4208) por cima, que
   cresce com a rolagem (ver main.js). Mobile: vai do centro da primeira
   bolinha (15px + 28px de margem) até o centro da última. */
.trajetoria-line {
  position: absolute;
  left: 14.5px;
  top: 43px;
  bottom: -43px;
  width: 1px;
  background: #FDAC83;
}
.trajetoria-line-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  max-height: 100%;
  background: #EC4208;
  transition: height 0.1s linear;
}
@media (min-width: 1024px) {
  /* Figma: fio de y=2058 a y=2870 numa seção que começa em y=1970. */
  .trajetoria-line { left: 50%; top: 88px; bottom: 100px; }
}

/* Bolinha de 30px: laranja cheia quando ativa; inativa tem um miolo
   branco de 16px (círculo "vazado" do Figma). */
.trajetoria-dot {
  grid-column: 1;
  justify-self: center;
  align-self: start;
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  margin-top: 28px;
  border-radius: 50%;
  background: var(--color-orange);
}
.trajetoria-dot::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--color-white);
  transform: scale(1);
  transition: transform 0.4s ease;
}
.trajetoria-dot.is-active::after { transform: scale(0); }
@media (min-width: 1024px) {
  /* Centro de cada bolinha = centro do card (85px do topo da linha de
     200px), exceto a primeira, que no Figma está 7px acima (78px). */
  .trajetoria-dot { grid-column: 2; margin-top: 85px; }
  .trajetoria-dot:nth-of-type(1) { margin-top: 78px; }
}

.trajetoria-item { grid-column: 2; position: relative; }
@media (min-width: 1024px) {
  .trajetoria-item--left { grid-column: 1; }
  .trajetoria-item--right { grid-column: 3; }
}

/* Sem JS (progressive enhancement, ver main.js): tudo já visível e
   com a linha cheia, pra não esconder conteúdo de quem não roda JS. */
html:not(.js) .trajetoria-item { opacity: 1; transform: none; }
html:not(.js) .trajetoria-dot::after { transform: scale(0); }
html:not(.js) .trajetoria-line-fill { height: 100% !important; }

.trajetoria-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.trajetoria-item.is-visible { opacity: 1; transform: none; }
@media (min-width: 1024px) {
  .trajetoria-item--left { transform: translate(-28px, 0); }
  .trajetoria-item--right { transform: translate(28px, 0); }
  .trajetoria-item--left.is-visible,
  .trajetoria-item--right.is-visible { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .trajetoria-item { opacity: 1; transform: none; transition: none; }
}

.trajetoria-card {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1.05px solid var(--color-border-blue);
  border-radius: 20px;
  padding: 28px 24px;
  background: var(--color-white);
}
@media (min-width: 1024px) {
  .trajetoria-card { border-radius: 30px; padding: 0 0 0 43px; }
  .trajetoria-item--left .trajetoria-card p { max-width: 456px; }
  .trajetoria-item--right .trajetoria-card p { max-width: 463px; }
}

.trajetoria-card h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.22px; color: var(--color-navy); }
@media (min-width: 1024px) {
  .trajetoria-card h3 { font-size: 22px; }
}
.trajetoria-year { color: var(--color-orange); }
.trajetoria-card p { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--color-gray-04); }

/* Mobile: título do card com peso menor (600) e descrição em 14px. */
@media (max-width: 767px) {
  .trajetoria-card h3 { font-size: 18px; font-weight: 600; }
  .trajetoria-card p { font-size: 14px; }
}

/* Título da seção: fade + slide-up ao rolar. */
.trajetoria-intro {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.trajetoria-intro.is-visible { opacity: 1; transform: none; }
html:not(.js) .trajetoria-intro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .trajetoria-intro { opacity: 1; transform: none; transition: none; }
}

/* Bolinha que acabou de ativar dá um "pulso" (anel que expande). */
.trajetoria-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-orange);
  opacity: 0;
}
.trajetoria-dot.is-active::before { animation: trajetoria-pulse 0.9s ease-out; }
@keyframes trajetoria-pulse {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 0; transform: scale(2); }
}
@media (prefers-reduced-motion: reduce) {
  .trajetoria-dot.is-active::before { animation: none; }
}