/* ═══════════════════════════════════════════════════════════════
   LEX — sobre.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Intro / missão ─────────────────────────────────────────── */
.intro__lead {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: var(--font-display);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-black);
  margin-bottom: var(--space-lg);
  max-width: 24ch;
}
.intro__body .body-text { max-width: 56ch; }

/* ── Timeline ───────────────────────────────────────────────── */
.historia__head { margin-bottom: var(--space-2xl); }
.historia__head .label { display: block; margin-bottom: var(--space-md); }

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-blue-ghost);
}
.timeline__item {
  position: relative;
  padding-top: var(--space-lg);
}
.timeline__item::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-blue);
}
.timeline__year {
  display: block;
  color: var(--color-black);
  margin-bottom: var(--space-sm);
}
.timeline__event { max-width: 30ch; }

/* ── Equipe ─────────────────────────────────────────────────── */
.equipe__head { margin-bottom: var(--space-2xl); align-items: end; }
.equipe__head .label { display: block; margin-bottom: var(--space-md); }
.equipe__head-text .body-text { max-width: 34ch; }

.equipe__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
  max-width: 600px;
}
.member__portrait {
  aspect-ratio: 3 / 4;
  margin-bottom: var(--space-md);
}

/* Banda de imagem da intro */
.intro__band { margin-top: var(--space-2xl); }
.intro__band .img-frame {
  aspect-ratio: 21 / 9;
  width: 100%;
}
.member__name {
  font-size: var(--text-body);
  font-weight: var(--font-medium);
  letter-spacing: 0;
  color: var(--color-black);
  margin-bottom: 4px;
}
.member__role {
  font-size: var(--text-small);
  color: var(--color-gray-mid);
}

/* ── Valores ────────────────────────────────────────────────── */
.valores__head { margin-bottom: var(--space-2xl); }
.valores__head .label { display: block; margin-bottom: var(--space-md); }

.valor {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--color-blue-ghost);
}
.valor:last-child { border-bottom: 1px solid var(--color-blue-ghost); }
.valor__num {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: var(--font-display);
  color: rgba(74, 101, 128, 0.5);
  line-height: 0.85;
}
.valor__title { margin-bottom: var(--space-sm); color: var(--color-black); }
.valor__body .body-text { max-width: 52ch; }

/* ── Time sem fronteiras (globo) ────────────────────────────── */
.globo__head { text-align: center; margin-bottom: var(--space-2xl); }
.globo__head .label { display: inline-block; margin-bottom: var(--space-md); }
.globo__sub { max-width: 46ch; margin: var(--space-md) auto 0; }
.globo-svg {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 0 auto;
  color: var(--color-blue);
}
.globo-arc { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 5 10; opacity: 0.55; }
.globo-dot { fill: currentColor; }
.globo-node { fill: currentColor; }
.globo-ping {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: globoPing 2.8s ease-out infinite;
}
.globo-city:nth-of-type(2) .globo-ping { animation-delay: 0.95s; }
.globo-city:nth-of-type(3) .globo-ping { animation-delay: 1.9s; }
@keyframes globoPing {
  0%        { transform: scale(1);   opacity: 0.55; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}
.globo-label {
  fill: var(--color-gray-mid);
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: var(--font-medium);
  letter-spacing: 0.06em;
}
@media (max-width: 600px) {
  .globo-label { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .globo-ping { animation: none; opacity: 0; }
}

/* ── Responsivo ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { left: 3px; top: 0; width: 1px; height: 100%; }
  .timeline__item { padding-top: var(--space-md); padding-left: var(--space-lg); padding-bottom: var(--space-lg); }
  .timeline__item::before { top: 8px; }
  .equipe__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}
@media (max-width: 768px) {
  .globo__head { text-align: left; }
  .globo__sub { margin-left: 0; }
}
@media (max-width: 600px) {
  .valor { grid-template-columns: 1fr; gap: var(--space-sm); }
  .equipe__grid { grid-template-columns: 1fr 1fr; }
}