.about-page { background: var(--surface); color: var(--text); }
.about-page [hidden] { display: none !important; }
.about-wrap { max-width: 1440px; margin-inline: auto; padding-inline: clamp(24px,5vw,80px); }
.about-page :is(h1,h2,h3) { font-stretch: normal; font-variation-settings: "wdth" 100; text-transform: none; font-weight: 520; letter-spacing: -.03em; text-wrap: balance; }
.about-page svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: 0 0 auto; }
.about-page p { color: var(--text-muted); line-height: 1.65; }
.about-intro { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 64px; padding-block: 72px 48px; }
.about-intro h1 { font-size: clamp(38px,4.3vw,62px); line-height: 1.07; margin: 0; }
.about-intro p { font-size: 16px; max-width: 45ch; margin: 0 0 14px; }
.about-link { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; font-size: 14px; text-underline-offset: 5px; }
.about-link:hover { color: var(--accent-text); }
.about-team { padding-bottom: 72px; }
.about-portraits { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.about-person { min-width: 0; margin: 0; }
.about-person img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center; display: block; border-radius: 4px; background: var(--surface-alt); }
.about-person img[src$="/daniela-ubaque.jpg"] { object-position: 50% 45%; }
.about-person figcaption { padding-top: 16px; }
.about-person h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.2; }
.about-person p { margin: 0; font-size: 12px; }
.about-person .about-person-bio { margin-top: 12px; font-size: 14px; line-height: 1.6; max-width: 44ch; }
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 72px; border-top: 1px solid var(--line); }
.about-page .about-story h2, .about-software h2, .about-partnership h2 { font-size: clamp(30px,3.2vw,44px); line-height: 1.12; margin: 0 0 24px; max-width: 22ch; }
.about-story-copy p { font-size: 17px; margin: 0 0 20px; }
.about-story-copy p:last-child { margin: 0; }
.about-story strong { font-weight: 600; color: var(--text); }
.about-software { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; padding-block: 64px; background: var(--surface-alt); }
.about-software-copy > p { font-size: 16px; max-width: 48ch; margin: 0 0 20px; }
.about-software-copy > a { display: flex; width: fit-content; }
.about-connection { margin: 0; padding: 32px 0 24px 24px; }
.connection-step { display: grid; grid-template-columns: 20px 1fr; gap: 24px; align-items: start; }
.connection-node { display: block; height: 20px; width: 20px; border: 1px solid var(--text-muted); border-radius: 50%; margin-top: 3px; background: var(--surface-alt); }
.connection-step h3 { font-size: 24px; line-height: 1.2; margin: 0 0 8px; }
.connection-step p { margin: 0; font-size: 14px; max-width: 32ch; }
.connection-path { width: 1px; height: 50px; margin: 8px 0 8px 10px; background: var(--line); position: relative; }
.connection-path i { position: absolute; inset: 0; background: var(--orange); transform-origin: top; }
.connection-destination .connection-node { background: var(--orange); border-color: var(--orange); }
.about-connection figcaption { margin: 30px 0 4px 44px; font-size: 12px; color: var(--text-muted); }
.about-replay { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; margin-left: 44px; padding: 8px 0; background: transparent; color: var(--text); border: 0; font: inherit; font-size: 12px; cursor: pointer; }
.about-replay:hover { color: var(--accent-text); }
.about-partnership { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 80px; }
.about-partnership dl { margin: 0; }
.about-partnership dl > div { padding: 22px 0; border-top: 1px solid var(--line); }
.about-partnership dt { font-size: 20px; font-weight: 520; margin-bottom: 8px; }
.about-partnership dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-muted); max-width: 48ch; }
.about-close { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 48px; background: var(--orange); color: var(--ink); }
.about-close h2 { font-size: clamp(30px,3.2vw,44px); line-height: 1.12; margin: 0; }
.about-close a { display: inline-flex; gap: 24px; align-items: center; min-height: 52px; padding: 14px 20px; background: var(--ink); color: var(--paper); font-size: 14px; text-decoration: none; border-radius: 6px; }
.about-close a:hover { background: var(--paper); color: var(--ink); }
.about-page :is(a,button):focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.about-close a:focus-visible { outline-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .about-connection.is-playing .connection-path i { animation: about-connect 800ms cubic-bezier(.16,1,.3,1) both; }
  .about-connection.is-playing .connection-path:nth-of-type(4) i { animation-delay: 900ms; }
  .about-connection.is-playing .connection-destination .connection-node { animation: about-arrive 600ms ease-out 1700ms both; }
  @keyframes about-connect { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes about-arrive { from { background: var(--surface-alt); border-color: var(--text-muted); } to { background: var(--orange); border-color: var(--orange); } }
}
@media (max-width: 1100px) { .about-portraits { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 40px; } }
@media (max-width: 1000px) { .about-intro { grid-template-columns: 1.25fr 1fr; gap: 32px; } .about-portraits { gap: 40px 16px; } .about-person h2 { font-size: 18px; } .about-story, .about-software, .about-partnership { gap: 40px; } .about-connection { padding-left: 0; } }
@media (max-width: 760px) {
  .about-intro { grid-template-columns: 1fr; gap: 24px; padding-block: 42px 28px; }
  .about-intro h1 { font-size: 38px; }
  .about-portraits { grid-template-columns: 1fr; gap: 40px; }
  .about-person figcaption { padding-top: 12px; }
  .about-person h2 { font-size: 18px; }
  .about-person p { font-size: 12px; line-height: 1.4; }
  .about-team { padding-bottom: 40px; }
  .about-story, .about-software, .about-partnership { grid-template-columns: 1fr; gap: 20px; padding-block: 40px; }
  .about-page .about-story h2, .about-software h2, .about-partnership h2 { font-size: 32px; margin-bottom: 16px; }
  .about-story-copy p { font-size: 16px; }
  .about-connection { padding: 24px 0 0; }
  .connection-step { gap: 20px; }
  .connection-step h3 { font-size: 22px; }
  .about-connection figcaption, .about-replay { margin-left: 40px; }
  .about-close { align-items: flex-start; flex-direction: column; gap: 24px; }
}