/* pagina: sobre (extraido del mockup 06-sobre-socorro) */
.about-hero{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;padding-top:8px}
  .about-hero .photo{position:relative;max-width:460px;margin:0 auto}
  .about-hero .photo img{border-radius:26px;aspect-ratio:4/5;object-fit:cover;border:5px solid var(--bg-elev);box-shadow:var(--shadow)}
  .about-hero .photo .dot{width:54px;height:54px}
  .stat-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
  .stat{background:var(--bg-elev);border:1.5px solid var(--line);border-radius:var(--radius);padding:18px}
  .stat b{font-family:var(--font-display);font-size:30px;color:var(--brand-teal-deep);display:block;line-height:1}
  .stat span{font-size:13.5px;font-weight:700;color:var(--ink-soft)}
  .prose{max-width:720px}
  .prose p{font-size:17px;line-height:1.72;margin-bottom:18px;color:var(--ink)}
  .values{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
  .value{display:flex;gap:16px;align-items:flex-start;background:var(--bg-elev);border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:22px}
  .value .ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .value .ic svg{width:24px;height:24px;color:var(--on-accent)}
  .value h3{font-size:19px;margin-bottom:4px}
  .timeline{max-width:720px;position:relative;padding-left:28px}
  .timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line-strong)}
  .tl-item{position:relative;padding-bottom:24px}
  .tl-item::before{content:"";position:absolute;left:-28px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--brand-green);box-shadow:0 0 0 4px var(--bg)}
  .tl-item .yr{font-family:var(--font-display);font-weight:700;color:var(--brand-teal-deep)}
  .quote-band{background:linear-gradient(135deg,var(--brand-green),var(--brand-teal));border-radius:var(--radius-lg);padding:40px 28px;color:var(--on-accent);text-align:center}
  .quote-band p{font-family:var(--font-display);font-size:clamp(22px,3.4vw,30px);line-height:1.3;color:var(--on-accent);max-width:24ch;margin:0 auto}
  @media(min-width:820px){
    .about-hero{grid-template-columns:.9fr 1.1fr;gap:48px}
    .about-hero .photo{max-width:none;margin:0}
    .values{grid-template-columns:1fr 1fr}
  }