/* ==========================================================================
   AXIOS NOSOTROS — same art direction as the home (tokens and shared
   components come from home.css). Only the About-specific pieces live here.
   ========================================================================== */

#about.page-view { padding-top: 0; }

/* ---------- Hero ---------- */
#about .ab-hero { min-height: min(700px, 100svh); }
#about .ab-hero-media { background-image: url('../assets/hero-slide-2.webp'); background-position: 65% 50%; }
#about .hx-hero-title { max-width: 14ch; }

#about .ab-mission-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Story ---------- */
#about .ab-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: clamp(28px, 5vw, 56px);
  border-radius: 28px;
  border: 1px solid var(--hx-line);
  background:
    radial-gradient(55% 80% at 0% 100%, rgba(227, 83, 9, 0.28), transparent 70%),
    radial-gradient(45% 70% at 100% 0%, rgba(34, 195, 214, 0.16), transparent 70%),
    linear-gradient(180deg, #11141C, #0C0F15);
}
#about .ab-story-mark {
  position: absolute;
  z-index: -1;
  right: -50px;
  bottom: -80px;
  width: 340px;
  height: 300px;
  fill: rgba(255, 255, 255, 0.035);
}
#about .ab-story-head { display: flex; flex-direction: column; gap: 14px; }
#about .ab-story-text {
  margin: 0;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  line-height: 1.65;
  color: #E2E6EE;
}
#about .ab-story-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--hx-line);
}
#about .ab-story-sign { font-family: var(--font-serif); font-style: italic; color: #FFB27A; }

/* ---------- Team ---------- */
#about .ab-founder {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: 10px;
  border-radius: 26px;
  border: 1px solid transparent;
  background:
    linear-gradient(#0E1118, #0E1118) padding-box,
    linear-gradient(150deg, var(--hx-orange-l), rgba(255, 255, 255, 0.15) 45%, var(--hx-aqua)) border-box;
  box-shadow: 0 30px 80px -40px rgba(255, 107, 31, 0.55);
}
#about .ab-founder-photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
}
#about .ab-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
#about .ab-founder-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 50% at 50% 115%, rgba(255, 107, 31, 0.45), transparent 70%);
}
#about .ab-chip-tl { top: 14px; left: 14px; right: auto; bottom: auto; z-index: 1; }

#about .ab-founder-info { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 22px 18px 0; }
#about .ab-founder-name {
  margin: 0;
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--hx-text);
}
#about .ab-founder-bio { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--hx-muted); }
#about .ab-read { margin-top: 4px; }

#about .ab-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
#about .ab-member .hx-shot img { object-position: 50% 20%; }
#about .ab-member-n { margin: 8px 6px 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; color: var(--c); }
#about .ab-member .hx-card-title { margin-top: 0; }
#about .ab-member-role { margin: -4px 6px 0; font-size: 0.8125rem; font-weight: 600; color: #D5DAE3; }

#about .ab-more {
  align-self: flex-start;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Governance ---------- */
#about .ab-gov-wrap { padding-top: 14px; }
#about .ab-gov { padding: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  #about .ab-story { grid-template-columns: 1fr; }
  #about .ab-founder { grid-template-columns: 1fr; }
  #about .ab-founder-info { padding: 8px 12px 14px; }
  #about .ab-team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  #about .ab-hero-media { background-position: 70% 50%; }
  #about .hx-hero-title { max-width: none; }
  #about .ab-team-grid { grid-template-columns: 1fr; }
  #about .ab-story-foot .hx-btn { width: 100%; }
  #about .ab-gov { padding: 22px; }
}