/* Amergent Partners — Estrategia y modelo. 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 .muted { color: var(--color-neutral-500); }
.sec--surface { background: var(--color-surface); }
.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: clamp(17px, 0.188vw + 16.3px, 19px); line-height: 1.55; color: var(--color-neutral-800); text-wrap: pretty;
}

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

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

/* Design: 65vh / min 520px. The min is 560px here so the three-line title never runs into the
   breadcrumb on short screens (1280×800); from 862px of viewport height up it is identical. */
.eym-hero { --hero-h: 65vh; --hero-min: 560px; --focus: 50% 60%; }
@supports (height: 1svh) {
  .eym-hero { --hero-h: 65svh; }
}
.eym-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) 90%, 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. */
.eym-hero .page-hero__title { font-size: clamp(40px, 3.698vw + 26.13px, 64px); }
.eym-hero__lede {
  margin: 0; max-width: 60ch; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--color-bg) 30%, transparent);
  font-size: clamp(17px, 0.282vw + 15.94px, 20px); line-height: 1.55; color: color-mix(in srgb, var(--color-bg) 90%, transparent); text-wrap: pretty;
}

@media (min-width: 1024px) {
  .eym-hero .page-hero__title { font-size: clamp(64px, 6.4vw, 104px); }
  .eym-hero .page-hero__body { grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: 48px; }
  .eym-hero__lede { max-width: none; }
}

@media (min-width: 1280px) {
  .eym-hero .page-hero__body { grid-template-columns: minmax(0,1fr) minmax(0,520px); gap: 80px; }
}

/* ── 01 · Socios estratégicos: sticky stepper + strategy flow diagram ── */

/* Below lg the diagram sits above the three steps, which read as plain paragraphs.
   From lg the diagram stays in view (sticky) while the steps scroll past and drive it. */
.socios { padding: clamp(80px, 7.512vw + 51.83px, 160px) var(--pad-x) clamp(64px, 5.258vw + 44.29px, 120px); }
.socios__head { display: flex; flex-direction: column; gap: clamp(20px, 0.751vw + 17.19px, 28px); max-width: 760px; }
.socios__title {
  margin: 0 0 0 -0.04em; font-size: clamp(40px, 3.303vw + 27.61px, 61.44px); font-weight: 400; line-height: 1.02; letter-spacing: -0.03em;
  text-wrap: balance;
}
.socios__title > span { display: block; }

.stepper {
  margin-top: clamp(48px, 4.507vw + 31.1px, 96px); padding-top: clamp(32px, 1.502vw + 26.38px, 48px);
  border-top: 1px solid var(--color-neutral-300);
}
.stepper__visual { position: relative; min-width: 0; }
.stepper__sticky { display: flex; flex-direction: column; gap: 24px; }
.stepper__caption { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-800); }

.flow { display: block; width: 100%; max-width: 640px; height: auto; overflow: visible; font-family: var(--font-body); }
/* SVG text scales with the diagram; on phones it is set larger (in diagram units) so it renders at
   ~11–16px. JS re-spaces the two-line labels for the larger size. */
.flow__cap { font-size: clamp(14px, 32.2px - 2.37vw, 24px); letter-spacing: 0.06em; fill: var(--color-neutral-800); }
.flow__txt { font-size: clamp(16px, 34.6px - 2.42vw, 26px); fill: var(--color-text); }
.flow [data-fl] { transition: opacity 400ms ease; }
.flow [data-fl="outline"] { opacity: 0; } /* only shown for Principio B */
.flow [data-fl-w] { transition: stroke-width 300ms; }

.stepper__rail { display: none; position: relative; }
.stepper__dots { position: sticky; top: 50vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.stepper__dot {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
.stepper__dot::before {
  content: ""; display: block; width: 8px; height: 8px;
  border: 1px solid var(--color-text); background: transparent; transition: background 300ms ease;
}
.stepper__dot.is-active::before { background: var(--color-text); }

.stepper__steps { display: flex; flex-direction: column; gap: 40px; margin-top: 16px; }
.stepper__step { display: flex; flex-direction: column; gap: 16px; transition: opacity 500ms ease; }
.stepper__lead { margin: 0; font-size: clamp(20px, 0.563vw + 17.9px, 26px); line-height: 1.42; letter-spacing: -0.012em; color: var(--color-neutral-700); text-wrap: pretty; }
.stepper__k { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-800); }
.stepper__text { margin: 0; max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--color-neutral-700); text-wrap: pretty; }

/* Key phrases: hovering or focusing one underlines it and highlights its part of the diagram.
   Below lg they take focus on tap, so vertical padding (which doesn't move the lines) makes them
   44px tall; the underline stays under the text (content-box origin). */
.hl {
  color: var(--color-text); cursor: default; padding: 13px 0;
  background: linear-gradient(var(--color-text), var(--color-text)) no-repeat 0 100% / 0% 1px;
  background-origin: content-box;
  transition: background-size 300ms ease;
}
.hl.is-on { background-size: 100% 1px; }

@media (min-width: 768px) {
  .flow__cap { font-size: 14px; letter-spacing: 0.1em; }
  .flow__txt { font-size: 16px; }
}

@media (min-width: 1024px) {
  .socios__title { font-size: clamp(56px, 6vw, 88px); }
  .stepper__visual { grid-column: 1 / span 6; }
  .stepper__sticky { position: sticky; top: calc(var(--nav-h) + var(--safe-top) + 48px); }
  .stepper__rail { display: block; grid-column: 7 / span 1; }
  .stepper__steps { grid-column: 8 / span 5; gap: 0; margin-top: 0; }
  /* Tall enough for the scroll to step through; capped so huge screens don't leave empty bands. */
  .stepper__step { min-height: min(60vh, 720px); min-height: min(60svh, 720px); justify-content: center; opacity: 0.7; }
  .stepper__step.is-active { opacity: 1; }
  .hl { padding: 0; }
}

/* ── 02 · Creación de valor: linked phrases + value cycle ───────────── */

.creacion__text {
  margin: 0; max-width: 62ch; font-size: clamp(17px, 0.188vw + 16.3px, 19px); line-height: 1.65;
  color: color-mix(in srgb, var(--color-bg) 85%, transparent); text-wrap: pretty;
}
.creacion__strong { color: var(--color-bg); }
.linked {
  cursor: default;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size 400ms cubic-bezier(.2,.7,.2,1), color 300ms;
}
.linked.is-on { color: var(--color-bg); background-size: 100% 1px; }

/* The cycle: stacked cards on phones (arrows point down), the original row of three from md. */
.cycle { margin-top: clamp(48px, 4.507vw + 31.1px, 96px); }
.cycle__top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-bottom: 16px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-400);
}
.cycle__seq { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cycle__row { display: grid; grid-template-columns: minmax(0,1fr); border-top: 1px solid var(--color-neutral-700); }
.cycle__sat {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  gap: 32px; min-height: 168px; padding: 24px 20px; border: 0;
  background: transparent; color: var(--color-bg); font-family: inherit; text-align: left; cursor: default;
  transition: background 300ms ease, opacity 300ms ease;
}
.cycle__sat + .cycle__sat { border-top: 1px solid var(--color-neutral-700); }
.cycle__sat.is-on { background: color-mix(in srgb, var(--color-bg) 9%, var(--color-text)); }
.cycle__row.has-sel .cycle__sat:not(.is-on) { opacity: 0.6; }
.cycle__arrow {
  position: absolute; right: 20px; top: -15px; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--color-neutral-700); background: var(--color-text); color: var(--color-bg);
}
.cycle__arrow .ic { transform: rotate(90deg); }
.cycle__n { font-size: 13px; letter-spacing: 0.1em; color: var(--color-neutral-400); }
.cycle__name { font-size: clamp(24px, 0.563vw + 21.9px, 30px); line-height: 1.12; letter-spacing: -0.02em; }
.cycle__base {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 20px;
  border-top: 1px solid var(--color-bg); border-bottom: 1px solid var(--color-neutral-700);
}
.cycle__base-name { display: flex; align-items: center; gap: 16px; font-size: clamp(18px, 0.376vw + 16.59px, 22px); line-height: 1.2; letter-spacing: -0.01em; color: var(--color-bg); }
.cycle__base-name::before { content: ""; display: block; flex: none; width: 8px; height: 8px; background: var(--color-bg); }
.cycle__base-tag { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-400); white-space: nowrap; }

@media (min-width: 768px) {
  .creacion__nowrap { white-space: nowrap; }
  .cycle__row { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cycle__sat { height: 260px; min-height: 0; padding: 28px 24px; }
  .cycle__sat + .cycle__sat { border-top: 0; border-left: 1px solid var(--color-neutral-700); }
  .cycle__arrow { left: -15px; right: auto; top: 24px; }
  .cycle__arrow .ic { transform: none; }
  .cycle__base { flex-direction: row; justify-content: space-between; align-items: center; gap: 32px; padding: 28px 24px; }
}

@media (min-width: 1024px) {
  .cycle__sat { height: 300px; padding: 32px; }
  .cycle__arrow { top: 28px; }
  .cycle__base { padding: 28px 32px; }
}

/* ── 03 · Proceso: before / after the closing ───────────────────────── */

/* Below lg: both phases stacked, then a vertical timeline with the closing marked between
   steps 04 and 05 (one grid column; the highlight lines span the rows of their half).
   From lg: the original horizontal track. */
.timeline { position: relative; margin-top: clamp(48px, 3.756vw + 33.92px, 88px); }
.timeline__phases { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; }
.timeline__phase { display: flex; flex-direction: column; gap: 14px; transition: opacity 400ms ease; }
.timeline__phase.is-dim { opacity: 0.3; }
.timeline__k { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); }
.timeline__phase p { margin: 0; max-width: 640px; font-size: clamp(18px, 0.376vw + 16.59px, 22px); line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; }

.timeline__track { position: relative; display: grid; grid-template-columns: minmax(0,1fr); margin-top: 40px; }
.timeline__nodes { display: contents; }
.timeline__rule { position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--color-neutral-300); }
.timeline__hl { grid-column: 1; justify-self: start; width: 2px; margin-left: 5.5px; background: var(--color-text); opacity: 0; transition: opacity 400ms ease; }
.timeline__hl--pre { grid-row: 1 / 5; }
.timeline__hl--post { grid-row: 6 / 8; }
.timeline__hl.is-on { opacity: 1; }

.timeline__node {
  grid-column: 1; display: flex; align-items: center; gap: 18px; min-height: 52px; margin: 0; padding: 8px 0;
  background: transparent; border: 0; font-family: inherit; color: var(--color-text); text-align: left; cursor: pointer;
  transition: opacity 400ms ease;
}
.timeline__node:nth-child(1) { grid-row: 1; }
.timeline__node:nth-child(2) { grid-row: 2; }
.timeline__node:nth-child(3) { grid-row: 3; }
.timeline__node:nth-child(4) { grid-row: 4; }
.timeline__node:nth-child(5) { grid-row: 6; }
.timeline__node:nth-child(6) { grid-row: 7; }
.timeline__node.is-dim { opacity: 0.3; }
.timeline__sq {
  display: block; flex: none; width: 13px; height: 13px;
  border: 1px solid var(--color-text); background: var(--color-bg); transition: background 400ms ease;
}
.timeline__node.is-on .timeline__sq { background: var(--color-text); }
.timeline__node-text { display: flex; align-items: baseline; gap: 12px; }
.timeline__node-n { font-size: 12px; letter-spacing: 0.08em; color: var(--color-neutral-700); }
.timeline__node-name { font-size: clamp(17px, 0.282vw + 15.94px, 20px); line-height: 1.2; letter-spacing: -0.01em; }

/* The closing: a full-width rule with its tag, between the two halves. */
.timeline__close-line { grid-row: 5; grid-column: 1; align-self: center; height: 2px; background: var(--color-text); }
.timeline__close-tag {
  position: relative; grid-row: 5; grid-column: 1; justify-self: start; align-self: center; margin: 12px 0; padding: 7px 12px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--color-text); color: var(--color-bg);
}

@media (min-width: 768px) {
  .timeline__phases { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 32px; }
}

@media (min-width: 1024px) {
  .timeline__phases,
  .timeline__nodes { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 0 24px; }
  .timeline__phase--pre { grid-column: 1 / span 4; padding-right: 64px; }
  .timeline__phase--post { grid-column: 5 / span 2; padding-left: 32px; }

  .timeline__track { display: block; margin-top: 64px; }
  .timeline__rule { left: 0; right: 0; bottom: auto; width: auto; height: 1px; }
  /* Absolute from here: reset the grid alignment (it would shrink-wrap abspos boxes). */
  .timeline__hl,
  .timeline__close-line,
  .timeline__close-tag { justify-self: auto; align-self: auto; }
  .timeline__hl { position: absolute; top: -0.5px; height: 2px; margin: 0; }
  .timeline__hl--pre { left: 0; width: calc(66.666% - 8px); }
  .timeline__hl--post { left: calc(66.666% + 40px); right: 0; width: auto; }

  .timeline__node:nth-child(n) { grid-row: auto; grid-column: auto; }
  .timeline__node { flex-direction: column; align-items: flex-start; min-height: 0; padding: 0 0 8px; }
  /* After the closing the copy steps away from the marker (32px here, the design's 56px from xl). */
  .timeline__node--post { padding-left: 32px; }
  .timeline__sq { margin-top: -6.5px; }
  .timeline__node-text { flex-direction: column; align-items: stretch; gap: 6px; }

  /* The closing marker runs up through the phase copy above the track. */
  .timeline__close-line { position: absolute; left: calc(66.666% - 1px); top: -260px; bottom: -8px; width: 2px; height: auto; }
  .timeline__close-tag { position: absolute; left: 66.666%; top: 0; margin: 0; transform: translate(-50%, -50%); }
}

@media (min-width: 1280px) {
  .timeline__phase--post,
  .timeline__node--post { padding-left: 56px; }
  .timeline__hl--post { left: calc(66.666% + 64px); }
}

/* ── 04 · Áreas de apoyo: cards with animated glyphs ────────────────── */

/* One card per row on phones, two on tablets, the original four from lg. */
.support { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin-top: clamp(48px, 3.756vw + 33.92px, 88px); }
.support-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 264px; padding: 24px;
  background: var(--color-bg); transition: background 400ms;
}
.support-card__n { font-size: 12px; letter-spacing: 0.08em; color: var(--color-neutral-700); }
.support-card__glyph { flex: 1; display: flex; align-items: center; min-width: 0; }
.support-card__name { margin: 0; font-size: clamp(20px, 0.282vw + 18.94px, 23px); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; text-wrap: pretty; }

/* Glyphs keep their 200×140 design size and narrow with a tight card. */
.glyph-svg { display: block; width: 100%; max-width: 200px; height: auto; aspect-ratio: 200 / 140; }
.glyph-svg--org { overflow: visible; }
.glyph-svg [data-g] { transform-box: fill-box; transform-origin: center; }

.glyph-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 20px)); grid-auto-rows: 20px; width: 100%; max-width: 200px; }
.glyph-grid > span { display: flex; align-items: center; justify-content: center; }
.glyph-grid > span::before { content: ""; display: block; width: 4px; height: 4px; background: var(--color-neutral-500); }
.glyph-grid > .is-on::before { content: none; }
.glyph-grid > .is-on > span { display: block; width: 9px; height: 9px; background: var(--color-text); }

.glyph-layers { position: relative; flex: none; width: 160px; height: 140px; }
.glyph-layers > span { position: absolute; width: 96px; height: 96px; border: 1px solid var(--color-text); }
.glyph-layers > span:nth-child(1) { background: var(--color-neutral-300); }
.glyph-layers > span:nth-child(2) { background: var(--color-neutral-500); }
.glyph-layers > span:nth-child(3) { background: var(--color-text); }

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

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

@media (hover: hover) {
  .support-card:hover { background: color-mix(in srgb, var(--color-bg) 70%, var(--color-neutral-100)); }
}

/* ── 05 · Para quién ────────────────────────────────────────────────── */

.audience-head__lead {
  margin: 0; max-width: 1000px;
  font-size: clamp(24px, 1.502vw + 18.38px, 40px); line-height: 1.25; letter-spacing: -0.02em; text-wrap: pretty;
}
.audience { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; margin-top: clamp(56px, 5.258vw + 36.29px, 112px); }
.audience__item { display: flex; flex-direction: column; gap: 20px; padding-top: 24px; border-top: 1px solid var(--color-neutral-700); }
.audience__n { font-size: 13px; letter-spacing: 0.08em; color: var(--color-neutral-400); }
.audience__title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0;
  font-size: clamp(22px, 0.376vw + 20.59px, 26px); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em;
}
.audience__bar { font-weight: 300; color: var(--color-neutral-500); }
.audience__item p { margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.65; color: var(--color-neutral-300); text-wrap: pretty; }

@media (min-width: 1024px) {
  .audience-head__label { grid-column: 1 / span 3; padding-top: 14px; }
  .audience-head__lead { grid-column: 4 / span 9; }
  .audience { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 48px; }
}

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

.closing { padding: var(--space-section-lg) var(--pad-x); background: var(--color-bg); }
.closing__grid { row-gap: 48px; }
.closing__copy { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(32px, 2.254vw + 23.55px, 56px); }
.closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.closing__actions .link-thin { align-self: auto; }
.closing__cta { gap: 28px; 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: 560px; row-gap: 0; }
  /* One more column for the copy until xl, so the question keeps to two lines. */
  .closing__copy { grid-column: 1 / span 6; }
  .closing__photo { grid-column: 7 / span 6; aspect-ratio: auto; }
}

@media (min-width: 1280px) {
  .closing__copy { grid-column: 1 / span 5; }
}

@media (prefers-reduced-motion: reduce) {
  .flow [data-fl], .flow [data-fl-w], .stepper__step, .stepper__dot::before, .hl, .linked,
  .cycle__sat, .timeline__phase, .timeline__hl, .timeline__node, .timeline__sq { transition: none; }
}