/* ==========================================================================
   QUEM-SOMOS.CSS
   ========================================================================== */

.qs-intro .title-1 { margin-block: var(--space-2) var(--space-4); }
.qs-intro .entry { color: #C9C9D2; }

.qs-ceo { background: var(--surface); }
.qs-ceo__inner {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-5);
    align-items: start;
    margin-block-end: var(--space-5);
}

.qs-ceo__foto { position: relative; }
.qs-ceo__foto img {
    width: 100%;
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
}
.qs-ceo__foto figcaption {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-block-start: var(--space-2);
    padding-inline-start: var(--space-2);
    border-inline-start: 1px solid var(--ztw-mauve);
}
.qs-ceo__foto strong { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; }
.qs-ceo__foto span {
    font-size: var(--fs-micro);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-dim);
}

.qs-ceo__texto .title-2 { margin-block: var(--space-2) var(--space-3); }
.qs-ceo__texto .lead + .lead { margin-block-start: var(--space-2); }

/* Trajetória — trilha horizontal com nós nos marcos.
   A ordem carrega informação real, então a sequência é legítima. */
.trajetoria {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    padding-block-start: var(--space-4);
}
.trajetoria::before {
    content: "";
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline: 0;
    height: var(--trace-width);
    background: var(--gradient-ztw);
}
.trajetoria__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-block-start: var(--space-3);
}
.trajetoria__no {
    position: absolute;
    inset-block-start: calc(var(--node-size) / -2);
    inset-inline-start: 0;
    width: var(--node-size);
    height: var(--node-size);
    border-radius: 50%;
    border: var(--node-ring) solid var(--ztw-mauve);
    background: var(--surface);
}
.trajetoria__quando {
    font-family: var(--font-data);
    font-size: var(--fs-small);
    color: var(--ztw-pink);
}
.trajetoria__oque { font-size: var(--fs-small); color: #C9C9D2; }

.qs-cta .title-2 { margin-block-end: var(--space-3); }

@media (max-width: 900px) {
    .qs-ceo__inner { grid-template-columns: 1fr; }
    .trajetoria { grid-template-columns: 1fr; gap: 0; padding-inline-start: var(--space-3); }
    .trajetoria::before { inset-inline: 0 auto; inset-block: var(--space-4) 0; width: var(--trace-width); height: auto; }
    .trajetoria__item { padding-block: var(--space-2); padding-inline-start: var(--space-2); }
    .trajetoria__no { inset-inline-start: calc(var(--space-3) * -1 - var(--node-size) / 2 + var(--space-2)); inset-block-start: var(--space-2); }
}