/*
  CSS especifico de pagina, extraido do bloco <style> inline de
  sobre.html no prototipo.

  Ficava dentro do HTML e por isso quase escapou da conversao. Aqui
  vira folha propria, carregada so na tela que precisa dela
  (ver inc/setup.php).
*/

.stat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-6);
      margin-top: var(--space-8);
      padding: var(--space-7) 0;
      border-top: 1px solid var(--ava-dourado-20);
      border-bottom: 1px solid var(--ava-dourado-20);
    }
    @media (max-width: 700px) {
      .stat-grid { grid-template-columns: repeat(2, 1fr); }
    }
    .stat {
      text-align: center;
    }
    .stat__value {
      font-family: var(--font-display);
      font-size: clamp(2.25rem, 4vw, 3.5rem);
      color: var(--ava-dourado);
      line-height: 1;
      display: block;
    }
    .stat__label {
      font-size: 0.6875rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--ava-cinza);
      margin-top: var(--space-3);
      display: block;
    }
    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--space-6);
    }
    .team-member {
      text-align: left;
    }
    .team-member__photo {
      aspect-ratio: 3 / 4;
      background-size: cover;
      background-position: center;
      margin-bottom: var(--space-5);
      border: 1px solid var(--ava-dourado);
      position: relative;
      overflow: hidden;
      transition: transform 0.6s var(--ease-smooth);
    }
    .team-member__photo::before {
      content: ''; position: absolute; inset: 12px;
      border: 1px solid var(--ava-dourado-20);
      z-index: 1; pointer-events: none;
    }
    .team-member__photo::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 40%, rgba(2,41,73,0.6) 100%);
    }
    .team-member:hover .team-member__photo { transform: translateY(-4px); }
    .team-member__name {
      font-family: var(--font-display);
      font-size: 1.25rem;
      color: var(--ava-branco);
      margin-bottom: var(--space-2);
      letter-spacing: 0.02em;
    }
    .team-member__role {
      font-size: 0.6875rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--ava-dourado);
      margin-bottom: var(--space-3);
    }
    /* Credenciais em tópicos (cargo/titulação) — devolutiva Sandra */
    .team-member__creds {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--space-4);
      text-align: left;
    }
    .team-member__creds li {
      position: relative;
      padding-left: 1.15em;
      font-size: 0.8125rem;
      line-height: 1.45;
      color: var(--ava-creme);
      margin-bottom: 0.35em;
    }
    .team-member__creds li::before {
      content: '◇';
      position: absolute;
      left: 0;
      top: 0.05em;
      color: var(--ava-dourado);
      font-size: 0.72em;
    }
    .team-member__bio {
      font-size: 0.875rem;
      color: var(--ava-cinza);
      line-height: 1.6;
      margin: 0;
    }
    .timeline {
      max-width: 720px;
      margin: 0 auto;
      position: relative;
      padding-left: var(--space-7);
    }
    .timeline::before {
      content: '';
      position: absolute;
      left: 12px;
      top: 12px;
      bottom: 12px;
      width: 1px;
      background: linear-gradient(180deg, var(--ava-dourado-20) 0%, var(--ava-dourado) 50%, var(--ava-dourado-20) 100%);
    }
    .timeline-item {
      position: relative;
      padding-bottom: var(--space-7);
    }
    .timeline-item::before {
      content: '';
      position: absolute;
      left: -36px;
      top: 6px;
      width: 24px;
      height: 24px;
      border: 1.5px solid var(--ava-dourado);
      border-radius: 50%;
      background: var(--ava-azul);
    }
    .timeline-item::after {
      content: '';
      position: absolute;
      left: -29px;
      top: 13px;
      width: 10px;
      height: 10px;
      background: var(--ava-dourado);
      border-radius: 50%;
    }
    .timeline-year {
      font-family: var(--font-display);
      font-size: 1.5rem;
      color: var(--ava-dourado);
      margin-bottom: var(--space-2);
      letter-spacing: 0.04em;
    }
    .timeline-title {
      font-family: var(--font-display);
      font-size: 1.125rem;
      color: var(--ava-branco);
      margin-bottom: var(--space-3);
    }
    .timeline-desc {
      color: var(--ava-cinza);
      line-height: 1.7;
      font-size: 0.9375rem;
    }