/* Sobre — quem está por trás, versão B (Figma 8355:3485 · mobile 8689:2027) */

/* 8355:3485: px 32 · py 120 · gap 80 (lista → nota) · strokes gray-900 em cima e embaixo sobre o conteúdo */
.sobre-socios {
  padding-block: var(--section-py);
  background: var(--black-200);
  box-shadow: inset 0 1px 0 var(--gray-900), inset 0 -1px 0 var(--gray-900);
}
.sobre-socios__inner { display: flex; flex-direction: column; gap: 80px; }

/* Team Members List 8355:3490: título | fotos | bio — 3 colunas de 405,33, gap 80 */
.sobre-socios__list { display: flex; align-items: flex-start; gap: 80px; }
.sobre-socios__intro,
.sobre-socios__photos,
.sobre-socios__info { flex: 1 1 0; min-width: 0; }

/* Título e bio ficam fixos enquanto as fotos passam (no topo, na mesma altura em que começam) */
.sobre-socios__intro,
.sobre-socios__info { position: sticky; top: 120px; }

/* 8355:3557: gap 16 · título Exo 40/1.2 · texto 18/1.5 */
.sobre-socios__intro { display: flex; flex-direction: column; gap: 16px; }
.sobre-socios__lead { text-wrap: pretty; }

/* 8355:3491: fotos 3:4, gap 32 — a do centro da tela em 100%, as outras a 20% */
.sobre-socios__photos { display: flex; flex-direction: column; gap: 32px; }
.sobre-socios__photo { margin: 0; opacity: .2; transition: opacity .5s ease; }
.sobre-socios__photo.is-active { opacity: 1; }
.sobre-socios__photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }

/* 8355:3522: as bios ocupam a mesma célula; só a da foto ativa aparece */
.sobre-socios__info { display: grid; }
.sobre-socios__member {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.sobre-socios__member.is-active { opacity: 1; visibility: visible; transition: opacity .4s ease; }
/* Text Block 8355:3518: gap 16 · nome Exo 24/1.3 (caixa 31) · cargo Cabin 16/1.5 blue-300 */
.sobre-socios__text { display: flex; flex-direction: column; gap: 16px; }
.sobre-socios__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 31px;
  color: var(--gray-0);
}
.sobre-socios__role { font-size: 16px; line-height: 1.5; color: var(--blue-300); }
/* 8355:3516 · Cabin 16/1.5 gray-300, parágrafos com 16 */
.sobre-socios__bio { display: flex; flex-direction: column; gap: 16px; }
.sobre-socios__bio p { font-size: 16px; line-height: 1.5; color: var(--gray-300); }

/* 768–1023: as 3 colunas ficam estreitas — título em cima, fotos e bio lado a lado */
@media (max-width: 1023px) {
  .sobre-socios__list { flex-wrap: wrap; gap: 40px; }
  .sobre-socios__intro { flex: 1 1 100%; position: static; }
  .sobre-socios__info { top: 100px; }
}

/* --------------------------------------------------------------------------
   Mobile (≤767) · 8689:2027 (375×2678,33): py 60 · gap 40 · título + gap 40 + [foto 1, bio, fotos 2–4] com gap 32
   — a coluna de fotos vira parte da lista (display: contents) para a bio entrar logo depois da 1ª foto, como no Figma
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .sobre-socios__inner { gap: 40px; }
  .sobre-socios__list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 32px; }
  .sobre-socios__intro { margin-bottom: 8px; }
  .sobre-socios__photos { display: contents; }
  .sobre-socios__photo:nth-child(1) { order: 1; }
  .sobre-socios__info { order: 2; position: static; }
  .sobre-socios__photo:nth-child(n+2) { order: 3; }
  /* 8689:2030 · Exo 28 (caixa 34) */
  .sobre-socios__title { font-size: 28px; line-height: 34px; }
  /* No celular a bio que aparece é a da 1ª pessoa (8693:2585) */
  .sobre-socios__member { display: none; }
  .sobre-socios__member:first-child { display: flex; opacity: 1; visibility: visible; }
  /* 8693:2586: gap 8 · nome Exo 20/1.3 */
  .sobre-socios__text { gap: 8px; }
  .sobre-socios__name { font-size: 20px; line-height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .sobre-socios__photo,
  .sobre-socios__member,
  .sobre-socios__member.is-active { transition: none; }
}