/* Amergent Partners — Quiénes somos. Loaded after site.css.
   Mobile-first: base rules target phones, then md (768), lg (1024) and xl (1280).
   From 1440px up it renders exactly as the original desktop design. */

/* ── Shared section scaffolding (this page) ─────────────────────────── */

.sec { padding: var(--space-section-lg) var(--pad-x); background: var(--color-bg); }
.sec--dark { background: var(--color-text); color: var(--color-bg); }
.sec--dark .display-2 .muted { color: var(--color-neutral-500); }
.sec-stack { display: flex; flex-direction: column; gap: clamp(20px, 0.751vw + 17.19px, 28px); }

.sec-head { align-items: end; }
.sec-head__title { display: flex; flex-direction: column; gap: clamp(20px, 0.751vw + 17.19px, 28px); }
.sec-head__text {
  margin: 0; max-width: 60ch;
  font-size: 17px; line-height: 1.65; color: var(--color-neutral-300); text-wrap: pretty;
}

@media (min-width: 1024px) {
  .sec-head__title { grid-column: 1 / span 6; }
  .sec-head__text { grid-column: 8 / span 5; max-width: none; }
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.qs-hero { --hero-h: 70vh; --hero-min: 560px; --focus: 50% 30%; }
@supports (height: 1svh) {
  .qs-hero { --hero-h: 70svh; }
}
.qs-hero .page-hero__shade {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-text) 80%, transparent) 0%,
      color-mix(in srgb, var(--color-text) 25%, transparent) 38%,
      color-mix(in srgb, var(--color-text) 88%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 70%, transparent) 0%, transparent 60%);
}
/* 40px on phones, growing to 64px at 1024; from there the original scale. */
.qs-hero .page-hero__title { font-size: clamp(40px, 3.698vw + 26.13px, 64px); }

@media (min-width: 1024px) {
  .qs-hero .page-hero__title { font-size: clamp(64px, 6.4vw, 104px); }
}

/* ── 01 · Propósito ─────────────────────────────────────────────────── */

.purpose { padding-top: clamp(80px, 7.512vw + 51.83px, 160px); }
.purpose__body { display: flex; flex-direction: column; gap: clamp(40px, 2.254vw + 31.55px, 64px); min-width: 0; }
.purpose__lead {
  margin: 0; max-width: 1020px;
  font-size: clamp(24px, 1.127vw + 19.78px, 36px); line-height: 1.28; letter-spacing: -0.02em; text-wrap: pretty;
}
.purpose__cols { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
.purpose__cols p { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.65; color: var(--color-neutral-700); text-wrap: pretty; }

/* Key figures: stacked rows on phones, three columns from md. */
.stat-row {
  display: grid; grid-template-columns: minmax(0,1fr);
  margin-top: clamp(64px, 5.258vw + 44.29px, 120px); border-top: 1px solid var(--color-neutral-300);
}
.stat-row > div { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; }
.stat-row > div + div { border-top: 1px solid var(--color-neutral-300); }
.stat-row__value { font-size: clamp(28px, 1.878vw + 20.96px, 48px); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.stat-row__label { font-size: var(--fs-13); color: var(--color-neutral-700); }

@media (min-width: 768px) {
  .purpose__cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; }
  .stat-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .stat-row > div { padding: 24px 24px 0; border-left: 1px solid var(--color-neutral-300); }
  .stat-row > div + div { border-top: 0; }
  .stat-row > div:first-child { padding-left: 0; border-left: 0; }
}

@media (min-width: 1024px) {
  .purpose__label { grid-column: 1 / span 3; padding-top: 12px; }
  .purpose__body { grid-column: 4 / span 9; }
  .purpose__cols { gap: 48px; }
  .stat-row > div { padding: 32px 32px 0; }
}

/* ── 02 · Estrategia: four strategy cards with animated glyphs ──────── */

/* One card per row on phones, two on tablets, the original four from lg. */
.strategies { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin-top: clamp(48px, 4.507vw + 31.1px, 96px); }
.strat-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 264px; padding: 24px;
  background: color-mix(in srgb, var(--color-bg) 6%, var(--color-text)); transition: background 400ms;
}
.strat-card__n { font-size: 12px; letter-spacing: 0.08em; color: var(--color-neutral-400); }
.strat-card__glyph { flex: 1; display: flex; align-items: center; min-width: 0; }
.strat-card__name { margin: 0; font-size: clamp(20px, 0.376vw + 18.59px, 24px); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; }

.glyph-bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
.glyph-bars > span { display: block; width: 16px; transform-origin: bottom; background: var(--color-neutral-600); }
.glyph-bars > span:last-child { background: var(--color-bg); }

.glyph-stack { display: flex; align-items: flex-end; gap: 4px; height: 140px; }
.glyph-stack > div { display: flex; flex-direction: column-reverse; gap: 4px; }
.glyph-stack span { display: block; width: 15px; height: 15px; background: var(--color-neutral-600); }
.glyph-stack .is-peak span { background: var(--color-bg); }

/* The two widest glyphs keep their 198/200px design width and narrow with a tight card. */
.glyph-arc { display: grid; grid-template-columns: repeat(11, minmax(0, 18px)); grid-auto-rows: 20px; width: 100%; max-width: 198px; height: 140px; }
.glyph-arc > span { display: flex; align-items: center; justify-content: center; }
.glyph-arc > span::before { content: ""; display: block; width: 4px; height: 4px; background: var(--color-neutral-700); }
.glyph-arc > .is-base::before { background: var(--color-neutral-500); }
.glyph-arc > .is-on::before { content: none; }
.glyph-arc > .is-on > span { display: block; width: 8px; height: 8px; background: var(--color-bg); }

.glyph-tiers { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; width: 100%; max-width: 200px; height: 140px; }
.glyph-tiers > span { display: block; height: 22px; transform-origin: left; }
.glyph-tiers > span:nth-child(1) { background: var(--color-bg); }
.glyph-tiers > span:nth-child(2) { background: var(--color-neutral-400); }
.glyph-tiers > span:nth-child(3) { background: var(--color-neutral-600); }
.glyph-tiers > span:nth-child(4) { background: var(--color-neutral-700); }

@media (min-width: 768px) {
  .strategies { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .strat-card { gap: 32px; min-height: 320px; padding: 28px; }
}

@media (min-width: 1024px) {
  .strategies { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .strat-card { height: 420px; }
}

@media (hover: hover) {
  .strat-card:hover { background: color-mix(in srgb, var(--color-bg) 10%, var(--color-text)); }
}

/* ── 03 · Cómo creamos valor: sticky intro + pillar accordion ───────── */

.value-model { align-items: start; }
.value-model__intro { display: flex; flex-direction: column; gap: clamp(20px, 0.751vw + 17.19px, 28px); }
.value-model__intro p {
  margin: 0; max-width: 60ch;
  font-size: clamp(17px, 0.188vw + 16.3px, 19px); line-height: 1.55; color: var(--color-neutral-700); text-wrap: pretty;
}

.pillars { margin-top: 16px; border-top: 1px solid var(--color-neutral-300); }
.pillar { border-bottom: 1px solid var(--color-neutral-300); }
.pillar__h { margin: 0; font: inherit; }
.pillar__btn {
  width: 100%; display: grid; grid-template-columns: 32px minmax(0,1fr) 24px; align-items: center; gap: 12px; padding: 22px 0;
  background: transparent; border: 0; font-family: inherit; color: var(--color-text); text-align: left; cursor: pointer;
}
.pillar__n { font-size: 13px; letter-spacing: 0.08em; color: var(--color-neutral-600); }
.pillar__title { font-size: clamp(22px, 0.751vw + 19.19px, 30px); line-height: 1.15; letter-spacing: -0.02em; }
/* Plus sign; its vertical stroke folds away when the pillar opens. */
.pillar__icon { position: relative; display: block; width: 18px; height: 18px; }
.pillar__icon::before,
.pillar__icon::after { content: ""; position: absolute; background: var(--color-text); }
.pillar__icon::before { left: 0; right: 0; top: 8px; height: 2px; }
.pillar__icon::after { top: 0; bottom: 0; left: 8px; width: 2px; transition: transform 300ms cubic-bezier(.2,.7,.2,1); }
.pillar.is-open .pillar__icon::after { transform: scaleY(0); }

.pillar__panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 300ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 300ms;
}
.pillar.is-open .pillar__panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.pillar__panel > div { overflow: hidden; min-height: 0; }
/* Text lines up with the pillar title (number column + gap). */
.pillar__panel p {
  margin: 0; padding: 0 0 28px 44px; max-width: 640px;
  font-size: 17px; line-height: 1.65; color: var(--color-neutral-700); text-wrap: pretty;
  opacity: 0; transition: opacity 300ms ease;
}
.pillar.is-open .pillar__panel p { opacity: 1; }

@media (min-width: 768px) {
  .pillar__btn { grid-template-columns: 56px minmax(0,1fr) 24px; gap: 16px; }
  .pillar__panel p { padding: 0 40px 32px 72px; }
}

@media (min-width: 1024px) {
  .value-model__intro { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + var(--safe-top) + var(--anchor-h) + 20px); }
  .pillars { grid-column: 6 / span 7; margin-top: 0; }
  .pillar__btn { padding: 30px 0; }
  .pillar__panel p { padding-bottom: 36px; }
}

/* ── 04 · Nuestro nombre: fitted wordmark with etymology brackets ───── */

.name { overflow: hidden; }
.wordmark { position: relative; margin-top: clamp(48px, 3.005vw + 36.73px, 80px); }
/* JS sets the final size (100px, or smaller to fit the column); this is only the pre-script size. */
.wordmark__text {
  margin-left: -0.04em; font-size: min(100px, 9vw); font-weight: 400; line-height: 0.86; letter-spacing: -0.045em;
  white-space: nowrap; text-transform: uppercase;
}
/* JS grows it if the labels need more room (narrow screens); 250px is the design. */
.wordmark__notes { position: relative; height: 250px; margin-top: 24px; }
/* Default geometry; JS replaces it with values measured from the letters. */
.bracket { position: absolute; top: 0; }
.bracket--mergent { left: 12%; width: 40%; }
.bracket--amer { left: 0; width: 28%; }
.bracket__line { border: 1px solid var(--color-bg); border-top: 0; }
.bracket--mergent .bracket__line { height: 22px; }
.bracket--amer .bracket__line { height: 112px; }
.bracket-label { position: absolute; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, 70%); }
.bracket-label--mergent { top: 44px; left: 30%; }
.bracket-label--amer { top: 134px; left: 0; }
.bracket-label > span:first-child { font-size: clamp(20px, 0.376vw + 18.59px, 24px); letter-spacing: -0.015em; }
.bracket-label > span:last-child { font-size: var(--fs-15); line-height: 1.5; color: var(--color-neutral-300); }

.name__lead {
  margin: clamp(32px, 2.254vw + 23.55px, 56px) 0 0; max-width: 1000px;
  font-size: clamp(20px, 0.751vw + 17.19px, 28px); line-height: 1.4; letter-spacing: -0.015em; text-wrap: pretty;
}
.name__cols { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; margin-top: clamp(48px, 4.507vw + 31.1px, 96px); }
.name__cols p {
  margin: 0; max-width: 60ch; padding-top: 24px; border-top: 1px solid var(--color-neutral-700);
  font-size: 17px; line-height: 1.65; color: var(--color-neutral-300); text-wrap: pretty;
}

@media (min-width: 1024px) {
  .name__cols { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 48px; }
  .name__cols p { max-width: none; }
}

/* ── 05 · Valores ───────────────────────────────────────────────────── */

/* Phones: one card per row. md: the design's rows of three and two. lg: the lead card splits in two. */
.values { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin-top: clamp(40px, 3.005vw + 28.73px, 72px); }
.value {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: 24px; background: var(--color-surface);
}
.value__n { font-size: 12px; letter-spacing: 0.08em; color: var(--color-neutral-700); }
.value__body { display: flex; flex-direction: column; gap: 14px; }
.value__title { margin: 0; font-size: clamp(20px, 0.376vw + 18.59px, 24px); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; }
.value__text { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--color-neutral-700); text-wrap: pretty; }

.value--lead { gap: 32px; padding: 32px 24px; background: var(--color-text); color: var(--color-bg); }
.value--lead .value__head { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.value__kicker { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-300); }
.value__rule { display: block; flex: none; width: 32px; height: 1px; background: var(--color-bg); }
.value--lead .value__title { margin-left: -0.04em; font-size: clamp(44px, 2.629vw + 34.15px, 72px); line-height: 1; letter-spacing: -0.035em; }
.value--lead .value__text { max-width: 60ch; font-size: clamp(17px, 0.188vw + 16.3px, 19px); color: var(--color-neutral-300); }

@media (min-width: 768px) {
  .values { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .value { grid-column: span 2; gap: 40px; min-height: 260px; }
  .value--half { grid-column: span 3; }
  .value--lead { grid-column: span 6; padding: 40px; }
}

@media (min-width: 1024px) {
  .value { gap: 48px; min-height: 300px; padding: 32px; }
  .value--lead {
    display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 0 24px; align-items: end;
    min-height: 320px; padding: 48px;
  }
  .value--lead .value__head { grid-column: 1 / span 6; align-self: stretch; gap: 72px; }
  .value--lead .value__text { grid-column: 8 / span 5; max-width: none; }
}

/* ── 06 · Cierre ────────────────────────────────────────────────────── */

.closing { padding: 0 var(--pad-x) var(--space-section-lg); background: var(--color-bg); }
.closing__grid { row-gap: 48px; padding-top: clamp(48px, 2.254vw + 39.55px, 72px); border-top: 1px solid var(--color-neutral-300); }
.closing__copy { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(32px, 2.254vw + 23.55px, 56px); }
.closing__actions { display: flex; flex-direction: column; }
.closing__cta { align-self: flex-start; gap: 28px; margin-top: 32px; padding: 15px 20px; font-size: 15px; }
/* Below lg the photo gets its own height; from lg it fills the row. */
.closing__photo { --focus: 58% 50%; aspect-ratio: 4 / 3; }

@media (min-width: 768px) {
  .closing__photo { aspect-ratio: 16 / 10; }
}

@media (min-width: 1024px) {
  .closing__grid { min-height: 600px; row-gap: 0; }
  .closing__copy { grid-column: 1 / span 5; }
  .closing__photo { grid-column: 7 / span 6; aspect-ratio: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .strat-card, .pillar__panel, .pillar__panel p, .pillar__icon::after { transition: none; }
}