/* ACT 2 — La oficina agéntica. Scoped under #act-02 (dark theme). Tokens only; motion = transforms/opacity. */

#act-02 { background: var(--ink); color: var(--off); overflow: clip; }
#act-02 .screen { padding-block: clamp(80px, 12vh, 150px); }
#act-02 .kicker { margin-bottom: 20px; }
#act-02 .h-1 { max-width: 16em; }
#act-02 .lead { margin-top: 22px; }
#act-02 .card { background: var(--ink-2); color: var(--off); }
#act-02 .card--line { background: transparent; border-color: var(--line-dark); }
#act-02 .card--accent { background: var(--yellow); color: var(--ink); }
#act-02 .num { color: var(--yellow); }
#act-02 dl { display: grid; gap: 10px 14px; grid-template-columns: auto 1fr; margin-top: 14px; }
#act-02 dt { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding-top: 3px; white-space: nowrap; }
#act-02 dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }

/* ---------- 1 · Opener ---------- */
#act-02 .c2-open { min-height: 100vh; background:
  radial-gradient(900px 520px at 85% 10%, rgba(251, 215, 4, .08), transparent 60%),
  radial-gradient(700px 480px at 0% 100%, rgba(233, 78, 27, .10), transparent 60%),
  var(--ink); }
#act-02 .c2-open__title { max-width: 11.5em; }
#act-02 .c2-open__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; margin-top: clamp(32px, 5vh, 56px); }
#act-02 .c2-open__aside { display: grid; gap: 18px; }
#act-02 .c2-thesis, #act-02 .c2-metric { border-left: 2px solid var(--yellow); padding: 6px 0 6px 20px; }
#act-02 .c2-thesis p, #act-02 .c2-metric p { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -.01em; margin-top: 6px; }
#act-02 .c2-metric { border-left-color: var(--orange); }
#act-02 .c2-metric small { display: block; margin-top: 8px; font-size: 13px; color: var(--mute); }

/* ---------- 2 · Comparación ---------- */
#act-02 .c2-cmp { margin-top: clamp(32px, 5vh, 56px); border-top: 1px solid var(--line-dark); }
#act-02 .c2-cmp__head, #act-02 .c2-cmp__row { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr) minmax(0, 1.4fr); gap: clamp(16px, 3vw, 48px); align-items: center; }
#act-02 .c2-cmp__head { padding: 14px 0; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
#act-02 .c2-cmp__head span:last-child { color: var(--yellow); }
#act-02 .c2-cmp__row { padding: 24px 0; border-top: 1px solid var(--line-dark); }
#act-02 .c2-cmp__dim { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: -.01em; }
#act-02 .c2-cmp__old { font-size: 15px; color: var(--fg-2); }
#act-02 .c2-cmp__new { position: relative; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.3; color: var(--off); padding: 10px 16px; }
#act-02 .c2-cmp__glow { position: absolute; inset: 0; border-radius: var(--radius-sm); background: rgba(251, 215, 4, .13); border-left: 3px solid var(--yellow); transform-origin: left center; z-index: -1; }
#act-02 .c2-cmp__row.is-static .c2-cmp__old { opacity: .35; }

/* ---------- 3 · Capas (pinned) ---------- */
#act-02 .c2-layers .act__pin { min-height: 100vh; display: flex; align-items: center; padding-block: clamp(40px, 6vh, 72px); background:
  radial-gradient(640px 640px at 78% 55%, rgba(251, 215, 4, .07), transparent 62%), var(--ink); }
#act-02 .c2-layers__wrap { width: min(var(--max), calc(100% - 2 * var(--gutter))); }
#act-02 .c2-layers__head { margin-bottom: clamp(20px, 3vh, 36px); }
#act-02 .c2-layers__title { font-size: clamp(26px, 3.2vw, 44px); max-width: 20em; }
#act-02 .c2-layers__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
#act-02 .c2-stack { display: flex; flex-direction: column-reverse; gap: 8px; }
#act-02 .c2-layer { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--ink-2); border: 1px solid var(--line-dark); will-change: transform, opacity; }
#act-02 .c2-layer__id { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--yellow); letter-spacing: .04em; }
#act-02 .c2-layer__body b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
#act-02 .c2-layer__body span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--fg-2); margin-top: 2px; }
#act-02 .c2-layer__tag { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line-dark); border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
#act-02 .c2-layer--core { border-color: rgba(251, 215, 4, .55); background: rgba(251, 215, 4, .07); }
#act-02 .c2-layer--human { border-color: rgba(233, 78, 27, .6); }
#act-02 .c2-layer--human .c2-layer__id { color: var(--orange); }
#act-02 .c2-layer--human .c2-layer__tag { color: var(--orange); border-color: rgba(233, 78, 27, .6); }
#act-02 .c2-entities { margin-top: 22px; }
#act-02 .c2-entities__label { font-size: 12px; color: var(--mute); display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
#act-02 .c2-entities__list { display: flex; flex-wrap: wrap; gap: 8px; }
#act-02 .c2-ent { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--off); background: var(--ink-2); will-change: transform, opacity; }
#act-02 .c2-ent::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: var(--mute); vertical-align: 1px; }
#act-02 .c2-ent[data-group="comercial"]::before { background: var(--yellow); }
#act-02 .c2-ent[data-group="contractual"]::before { background: var(--orange); }
#act-02 .c2-ent[data-group="talento"]::before { background: var(--off); }
#act-02 .c2-ent[data-group="finanzas"]::before { background: #7fb3ff; }
#act-02 .c2-ent[data-group="control"]::before { background: var(--orange); }
#act-02 .c2-core { position: relative; aspect-ratio: 1; width: min(100%, 460px); margin-inline: auto; }
#act-02 .c2-core__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#act-02 .c2-core__orbit circle:first-child { fill: none; stroke: var(--line-dark); stroke-width: 1; }
#act-02 .c2-core__dot { fill: var(--yellow); }
#act-02 .c2-core__nucleus { fill: none; stroke: var(--yellow); stroke-width: 1.5; opacity: .45; }
#act-02 .c2-core__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#act-02 .c2-core__caption { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: var(--mute); display: flex; gap: 10px; align-items: center; }

/* ---------- 4 · Dominios ---------- */
/* Fit the five domain cards in one viewport so the deck stop shows the whole slide. */
#act-02 .screen.c2-domains { padding-block: calc(var(--nav-h, 64px) + 16px) 24px; }
#act-02 .c2-domains .h-display { font-size: clamp(32px, 3.6vw, 56px); }
#act-02 .c2-domains .c2-domains__grid { margin-top: 20px; }
#act-02 .c2-domains .c2-dom { padding: 20px 24px; }
#act-02 .c2-domains .c2-dom dl { gap: 2px; }
#act-02 .c2-domains .c2-dom dt { padding-top: 4px; }
#act-02 .c2-domains__note { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--mute); }
#act-02 .c2-domains__note .pill--line { color: var(--yellow); }
#act-02 .c2-domains__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); margin-top: clamp(28px, 4vh, 44px); }
#act-02 .c2-dom .h-3 { margin-top: 10px; font-size: clamp(17px, 1.4vw, 20px); }
#act-02 .c2-dom dl { grid-template-columns: 1fr; gap: 6px; }
#act-02 .c2-dom dt { padding-top: 6px; }
#act-02 .c2-evidence { display: grid; gap: 10px; align-content: start; }
#act-02 .c2-evidence .frame { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
#act-02 .c2-evidence .frame img { aspect-ratio: 1470 / 1145; object-fit: cover; object-position: top; max-height: 230px; }
#act-02 .c2-evidence .small { color: var(--fg-2); }

/* ---------- 5 · Gobierno humano ---------- */
#act-02 .c2-gov__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); margin-top: clamp(32px, 5vh, 56px); align-items: start; }
#act-02 .c2-ladder__steps { display: grid; gap: 10px; margin-top: 24px; }
#act-02 .c2-rung { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-dark); background: var(--ink-2); }
#act-02 .c2-rung:nth-child(1) { margin-left: 0; }
#act-02 .c2-rung:nth-child(2) { margin-left: 24px; }
#act-02 .c2-rung:nth-child(3) { margin-left: 48px; }
#act-02 .c2-rung:nth-child(4) { margin-left: 72px; border-color: rgba(251, 215, 4, .5); }
#act-02 .c2-rung__id { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--yellow); padding-top: 2px; }
#act-02 .c2-rung b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
#act-02 .c2-rung span:not(.c2-rung__id) { display: block; font-size: 13px; color: var(--fg-2); margin-top: 2px; }
#act-02 .c2-rung em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--off); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-dark); }
#act-02 .c2-rung em i { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin-right: 8px; }
#act-02 .c2-controls__list { display: grid; gap: 10px; margin-top: 24px; }
#act-02 .c2-ctl { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line-dark); overflow: hidden; }
#act-02 .c2-ctl__fill { position: absolute; inset: 0; background: var(--orange); transform-origin: left center; }
#act-02 .c2-ctl__n, #act-02 .c2-ctl__t { position: relative; }
#act-02 .c2-ctl__n { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--orange); }
#act-02 .c2-ctl__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.4vw, 19px); letter-spacing: -.01em; }
#act-02 .c2-ctl.is-on .c2-ctl__n, #act-02 .c2-ctl.is-on .c2-ctl__t { color: #fff; }

/* ---------- 6 · Ciclo (pinned, horizontal) ---------- */
#act-02 .c2-cycle .act__pin { min-height: 100vh; display: flex; align-items: center; padding-block: clamp(40px, 6vh, 72px); }
#act-02 .c2-cycle__wrap { width: min(var(--max), calc(100% - 2 * var(--gutter))); }
#act-02 .c2-cycle__head { margin-bottom: clamp(36px, 6vh, 64px); }
#act-02 .c2-cycle__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 18px; font-size: 13px; color: var(--fg-2); }
#act-02 .c2-cycle__key { width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); display: inline-block; margin-right: 8px; }
#act-02 .c2-cycle__key--human { background: var(--orange); }
#act-02 .c2-cycle__viewport { position: relative; padding-top: 10px; }
#act-02 .c2-cycle__rail { position: absolute; left: 0; right: calc(-1 * var(--gutter)); top: 20px; height: 2px; background: var(--line-dark); }
#act-02 .c2-cycle__progress { position: absolute; inset: 0; background: var(--yellow); transform-origin: left center; transform: scaleX(1); }
#act-02 .c2-cycle__track { display: flex; gap: 28px; width: max-content; will-change: transform; }
#act-02 .c2-step { position: relative; width: 250px; flex: 0 0 auto; padding-top: 36px; }
#act-02 .c2-step__node { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 6px var(--ink); }
#act-02 .c2-step--human .c2-step__node { background: var(--orange); width: 26px; height: 26px; top: -2px; }
#act-02 .c2-step__body { display: grid; gap: 4px; }
#act-02 .c2-step__body b { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.01em; }
#act-02 .c2-step__body span:not(.num) { font-size: 13px; line-height: 1.45; color: var(--fg-2); }
#act-02 .c2-step--human .num { color: var(--orange); }
#act-02 .c2-step--human .c2-step__body b { color: #fff; }
#act-02 .c2-step--human::after { content: 'Decide una persona'; display: inline-block; margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); border: 1px solid rgba(233, 78, 27, .6); border-radius: 6px; padding: 4px 8px; }

/* ---------- 7 · Fases ---------- */
#act-02 .c2-phases__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); margin-top: clamp(32px, 5vh, 56px); }
#act-02 .c2-phase { position: relative; display: grid; gap: 6px; align-content: start; padding: 26px 24px 24px; border: 1px solid var(--line-dark); min-height: 220px; }
#act-02 .c2-phase::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--yellow); }
#act-02 .c2-phase:nth-child(1)::before { opacity: .55; }
#act-02 .c2-phase:nth-child(2)::before { opacity: 1; }
#act-02 .c2-phase:nth-child(3)::before { opacity: .8; }
#act-02 .c2-phase:nth-child(4)::before { opacity: .65; }
#act-02 .c2-phase__id { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.03em; color: var(--yellow); }
#act-02 .c2-phase__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -.01em; line-height: 1.2; }
#act-02 .c2-phase__gate { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-dark); font-size: 13.5px; line-height: 1.45; color: var(--fg-2); }
#act-02 .c2-phase__gate span { display: block; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin-bottom: 4px; }
#act-02 .c2-deps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(32px, 5vh, 56px); }
#act-02 .c2-deps__label { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-right: 6px; }
#act-02 .c2-deps__list { display: contents; }
#act-02 .c2-dep { font-size: 13px; color: var(--fg-2); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-dark); background: var(--ink-2); white-space: nowrap; }
#act-02 .c2-dep b { font-family: var(--font-display); font-weight: 700; color: var(--off); margin-right: 6px; }
#act-02 .c2-dep b::after { content: '·'; color: var(--yellow); margin-left: 6px; }

/* ---------- 8 · Métricas y siguiente paso ---------- */
#act-02 .c2-next__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
#act-02 .c2-metric--big { margin-top: 28px; }
#act-02 .c2-metric--big p { font-size: clamp(24px, 2.6vw, 36px); }
#act-02 .c2-indicators { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--line-dark); }
#act-02 .c2-indicators li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
#act-02 .c2-indicators b { font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 1.3vw, 18px); }
#act-02 .c2-next__step { padding: clamp(28px, 3vw, 44px); }
#act-02 .c2-next__kicker { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); opacity: .7; margin-bottom: 14px; }
#act-02 .c2-next__step .h-2 { color: var(--ink); max-width: 10em; }
#act-02 .c2-next__list { display: grid; gap: 14px; margin-top: 24px; }
#act-02 .c2-next__list li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; color: var(--ink); font-size: 16px; line-height: 1.45; border-top: 1px solid rgba(18, 18, 18, .2); padding-top: 14px; }
#act-02 .c2-next__list span { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .06em; padding-top: 2px; }

/* ---------- Reduced motion: no pins, everything static and visible ---------- */
#act-02.is-reduced .c2-cmp__old { opacity: .35; }
#act-02.is-reduced .c2-cycle__track { flex-wrap: wrap; width: auto; gap: 28px 20px; }
#act-02.is-reduced .c2-cycle__rail { display: none; }
#act-02.is-reduced .c2-cycle__viewport { overflow: visible; }
#act-02.is-reduced .c2-layers .act__pin, #act-02.is-reduced .c2-cycle .act__pin { min-height: 0; padding-block: clamp(80px, 12vh, 150px); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #act-02 .c2-domains__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #act-02 .c2-phases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  #act-02 .c2-open__grid, #act-02 .c2-layers__grid, #act-02 .c2-gov__grid, #act-02 .c2-next__grid { grid-template-columns: 1fr; }
  #act-02 .c2-layers .act__pin { align-items: flex-start; }
  #act-02 .c2-core { width: min(100%, 320px); }
  #act-02 .c2-cmp__head, #act-02 .c2-cmp__row { grid-template-columns: 1fr; gap: 6px; }
  #act-02 .c2-cmp__head span:not(:last-child) { display: none; }
  #act-02 .c2-rung:nth-child(n) { margin-left: 0; }
  #act-02 .c2-dep { white-space: normal; }
}
@media (max-width: 760px) {
  #act-02 .c2-domains__grid, #act-02 .c2-phases__grid { grid-template-columns: 1fr; }
  #act-02 .c2-layer { grid-template-columns: 36px 1fr; }
  #act-02 .c2-layer__tag { display: none; }
  #act-02 .c2-step { width: 220px; }
}