/* =============================================================
   nosotros — About page sections
   Depends on tokens.css, base.css, site.css.
   ============================================================= */

/* Current-page underline only — do not set display:flex here; it would
   override base.css mobile hide (nav stays open). Layout lives in site.css. */
.page-header .nav a[aria-current="page"] {
  color: var(--sm-navy-deep);
  text-decoration: underline;
  text-underline-offset: .35em;
}

/* ---------- page hero body nest ---------- */
.page-hero__body { width: 100%; }

/* ---------- story ---------- */
.story {
  padding-block: var(--sm-section-y);
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: clamp(2.5rem, 5.6vw, 5rem);
  align-items: center;
}
.story__media { position: relative; }
.story__block {
  position: absolute; left: -1.75rem; top: 2.25rem;
  width: 100%; height: 100%; background: var(--sm-navy);
}
.story__photo { position: relative; aspect-ratio: 3 / 2; }
.story__text .lead { margin-top: var(--sm-gap-sm); }
.story__text .lead ~ p { margin-top: var(--sm-gap-sm); color: var(--sm-text-body); }

.badge {
  position: absolute; right: .5rem; bottom: -.375rem;
  width: clamp(104px, 10.4vw, 150px); aspect-ratio: 1;
  background: var(--sm-lime); color: var(--sm-navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.badge strong {
  font-family: var(--sm-font-display); font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1;
}
.badge small {
  font-size: var(--sm-text-2xs); font-weight: 700;
  letter-spacing: var(--sm-ls-label); text-transform: uppercase;
}

/* ---------- why different ---------- */
.diff { padding-block: var(--sm-section-y); }
.diff__intro { max-width: 40rem; margin-bottom: var(--sm-gap-xl); }
.diff__intro .lead { margin-top: var(--sm-gap-sm); }
.diff__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sm-gap-lg);
}
.diff__grid li {
  padding-top: var(--sm-gap-sm);
  border-top: 3px solid var(--sm-lime);
}
.diff__n {
  display: block;
  font-size: var(--sm-text-2xs);
  font-weight: 700;
  letter-spacing: var(--sm-ls-label);
  color: var(--sm-text-muted);
  margin-bottom: var(--sm-gap-xs);
}
.diff__grid h3 { margin-bottom: var(--sm-gap-2xs); }
.diff__grid p { color: var(--sm-text-body); font-size: var(--sm-text-lead); }

/* ---------- how we work (home band pattern + shared .steps strip) ---------- */
.band { position: relative; background: var(--sm-ink); isolation: isolate; }
.band__media, .band__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.band__media { z-index: -2; }
.band__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: var(--sm-scrim-band);
}
.band__body {
  padding-block: var(--sm-section-y);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.band__body .lead { margin-top: 1.375rem; max-width: 40rem; }

.work__steps { width: 100%; margin-top: clamp(2.5rem, 4.9vw, 4.375rem); }

/* ---------- team ---------- */
.team {
  padding-block: var(--sm-section-y);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(2.5rem, 5.6vw, 5rem);
  align-items: center;
}
.team__text .lead { margin-top: var(--sm-gap-sm); }
.team__owner {
  margin-top: var(--sm-gap-lg);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sm-gap-2xs) var(--sm-gap-sm);
  font-size: var(--sm-text-lead);
  color: var(--sm-text-body);
}
.team__owner strong {
  font-family: var(--sm-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--sm-ls-display);
  color: var(--sm-navy);
  font-size: var(--sm-text-h4);
}
.team__role {
  color: var(--sm-text-body);
  font-size: var(--sm-text-small);
}
.team__quote {
  margin-top: var(--sm-gap-md);
  padding-left: var(--sm-gap-sm);
  border-left: 3px solid var(--sm-lime);
}
.team__quote p {
  font-size: var(--sm-text-lead);
  font-style: italic;
  font-weight: 600;
  line-height: var(--sm-lh-snug);
  color: var(--sm-navy);
}
.team__photo { aspect-ratio: 4 / 3; }

/* ---------- CTA ---------- */
.cta-band {
  background: var(--sm-navy);
  padding-block: var(--sm-section-y);
}
.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sm-gap-sm);
  max-width: 40rem;
  margin-inline: auto;
}
.cta-band .btn-row {
  margin-top: var(--sm-gap-xs);
  justify-content: center;
}

/* ---------- focus on light surfaces ---------- */
.page-header :focus-visible,
.story :focus-visible,
.diff :focus-visible,
.team :focus-visible,
.trust :focus-visible { outline-color: var(--sm-navy); }

/* ---------- breakpoints ---------- */
@media (max-width: 1100px) {
  .diff__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sm-gap-md); }
}

@media (max-width: 900px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__block { left: -1rem; top: 1.25rem; }
  .team { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .btn-row .btn { width: 100%; }
  .badge { right: auto; left: 0; }
}