/* CSS específico — Sobre — Dr. Cláudio Lepéra */
.about-hero { padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 5vw, 80px); }
  .about-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
  .about-hero .ph { aspect-ratio: 4/5; }
  @media (max-width: 920px) { .about-hero-grid { grid-template-columns: 1fr; gap: 48px; } }

  .pull-quote {
    margin: clamp(60px, 8vw, 96px) auto;
    max-width: 880px; text-align: center;
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.2; color: var(--cream);
    font-weight: 300;
    padding: 0 var(--gutter);
  }
  .pull-quote em { color: var(--gold-hi); font-style: italic; }
  .pull-quote .attrib {
    display: block;
    font-family: var(--font-mono); font-size: 12px;
    color: var(--muted-on-dark); margin-top: 32px;
    letter-spacing: 0.16em; text-transform: uppercase;
  }

  /* Timeline */
  .timeline {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
  }
  .timeline::before {
    content: ''; position: absolute;
    left: 80px; top: 0; bottom: 0;
    width: 1px; background: var(--line);
  }
  .tl-item {
    display: grid; grid-template-columns: 80px 1fr;
    padding: 32px 0;
    gap: 48px;
    position: relative;
  }
  .tl-year {
    font-family: var(--font-display);
    font-size: 28px; color: var(--gold); line-height: 1;
    font-weight: 500;
  }
  .tl-item::before {
    content: ''; position: absolute;
    left: 76px; top: 38px;
    width: 9px; height: 9px;
    background: var(--gold); border-radius: 50%;
    border: 2px solid var(--ink);
  }
  .tl-item h4 { font-family: var(--font-display); font-size: 26px; color: var(--cream); margin-bottom: 8px; }
  .tl-item p { color: var(--muted-on-dark); font-size: 15px; max-width: 56ch; }
  @media (max-width: 720px) {
    .timeline::before { left: 8px; }
    .tl-item { grid-template-columns: 1fr; padding-left: 40px; gap: 6px; }
    .tl-item::before { left: 4px; top: 12px; }
  }

  /* memberships */
  .memberships {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    margin-top: 56px;
    border: 1px solid rgba(46,40,28,0.1);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .mem {
    padding: 32px 28px;
    border-right: 1px solid rgba(46,40,28,0.08);
    background: white;
  }
  .mem:last-child { border-right: 0; }
  .mem h4 { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin-bottom: 8px; }
  .mem p { font-size: 13px; color: var(--muted); }
  @media (max-width: 920px) { .memberships { grid-template-columns: 1fr 1fr; } .mem:nth-child(2n) { border-right: 0; } .mem:nth-child(-n+2) { border-bottom: 1px solid rgba(46,40,28,0.08); } }
  @media (max-width: 540px) { .memberships { grid-template-columns: 1fr; } .mem { border-right: 0 !important; border-bottom: 1px solid rgba(46,40,28,0.08); } .mem:last-child { border-bottom: 0; } }

  /* Values */
  .values {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    margin-top: 48px;
  }
  .value {
    padding: 40px 32px;
    border: 1px solid var(--ink-3);
    border-radius: var(--r-md);
    background: var(--ink-2);
  }
  .value .v-num {
    font-family: var(--font-display);
    font-size: 32px; color: var(--gold); margin-bottom: 16px;
    line-height: 1;
  }
  .value h4 { font-family: var(--font-display); font-size: 24px; color: var(--cream); margin-bottom: 12px; }
  .value p { font-size: 14px; color: var(--muted-on-dark); line-height: 1.6; }
  @media (max-width: 820px) { .values { grid-template-columns: 1fr; } }