/* ==========================================================================
   Apex Consulting · Quiénes somos
   Se apoya en tokens.css, site.css (navegación, cumbre, pie) y comun.css.
   Sin JS (o con movimiento reducido) la subida es una lista legible y la
   montaña se ve completa, con el banderín ya plantado.
   ========================================================================== */

/* ==========================================================================
   HERO · el campamento base
   ========================================================================== */
.ab-hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + var(--sp-7)) var(--gutter) max(22svh, 9rem);
}
.ab-hero__label { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--sp-4); }
.ab-hero__title {
  max-width: 14ch;
  font-size: clamp(2.5rem, 0.4rem + 5.2vw, 6.4rem); font-weight: 850; font-stretch: 125%;
  line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance;
}
.ab-hero__title .dim { display: block; }
.ab-hero__lede { margin-top: var(--sp-5); max-width: 36rem; font-size: var(--fs-lg); line-height: 1.55; color: var(--ink-2); }

/* ==========================================================================
   LA SUBIDA
   ========================================================================== */
.climb { position: relative; }
.climb__zone { position: absolute; left: 0; width: 1px; pointer-events: none; visibility: hidden; }
.climb__sticky { position: relative; padding: var(--sp-8) var(--gutter); }
.climb__alt { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: var(--sp-5); font-variant-numeric: tabular-nums; }
.climb__alt span { font-size: var(--fs-sm); color: var(--ink-3); }
.climb__alt b { font-size: var(--fs-xl); font-weight: 750; font-stretch: 112%; letter-spacing: -0.02em; }
.climb__alt i { font-style: normal; }
.climb__stops { list-style: none; display: grid; gap: var(--sp-7); }
.stop__tag { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--fs-sm); color: var(--ink-2); }
.stop__tag::before { content: ""; width: 0.6rem; height: 0.52rem; background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.stop h3 {
  margin-top: var(--sp-3); max-width: 16ch;
  font-size: clamp(2rem, 0.9rem + 2.6vw, 3.6rem); font-weight: 820; font-stretch: 118%;
  line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance;
}
.stop p:not(.stop__tag) { margin-top: var(--sp-4); max-width: 30rem; color: var(--ink-2); font-size: var(--fs-md); }
.climb__view { position: relative; height: min(80vh, 44rem); margin-top: var(--sp-6); }
@media (max-width: 40rem) { .climb__view { height: min(56vh, 26rem); } }
/* sin JS no hay lienzo que pintar */
html:not(.js) .climb__view { display: none; }

.climb__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ==========================================================================
   LO QUE CREEMOS
   ========================================================================== */
.beliefs { position: relative; padding: var(--sp-9) var(--gutter) var(--sp-8); }
.beliefs__head { max-width: 50rem; }
.beliefs__title { font-size: var(--fs-h2); font-weight: 800; font-stretch: 116%; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.beliefs__title .dim { display: block; }
.beliefs__mv { margin-top: var(--sp-7); display: grid; gap: var(--sp-6) clamp(1.5rem, 4vw, 4.5rem); }
.belief { --rule: 1; position: relative; padding-top: var(--sp-5); }
.belief::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong); transform: scaleX(var(--rule)); transform-origin: 0 50%; }
.belief__tag { font-size: var(--fs-sm); color: var(--ink-3); }
.belief--big h3 { margin-top: var(--sp-3); font-size: clamp(1.6rem, 0.8rem + 1.9vw, 2.7rem); font-weight: 760; font-stretch: 112%; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.beliefs__grid { margin-top: var(--sp-8); display: grid; gap: var(--sp-6) clamp(1.5rem, 3vw, 3rem); }
.beliefs__grid .belief h3 { font-size: var(--fs-xl); font-weight: 780; font-stretch: 112%; line-height: 1.15; letter-spacing: -0.02em; }
.beliefs__grid .belief p { margin-top: var(--sp-3); color: var(--ink-2); }
@media (min-width: 48rem) {
  .beliefs__mv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beliefs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) { .beliefs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   LA SUBIDA COREOGRAFIADA — escenario fijo mientras dura la sección
   ========================================================================== */
.st-measure .climb__sticky { position: relative !important; top: auto !important; }
.js:not(.reduce) .climb { height: 900vh; }
.js:not(.reduce) .climb__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding: 0;
}
.js:not(.reduce) .climb__view { position: absolute; inset: 0; height: auto; margin: 0; }
.js:not(.reduce) .climb__copy {
  position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 0;
  padding: 0 0 max(var(--sp-6), 4svh);
}
/* velo para leer sobre la montaña */
.js:not(.reduce) .climb__sticky::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, oklch(8% 0.03 262 / 0.92) 0%, oklch(8% 0.03 262 / 0.55) 34%, transparent 58%);
}
.js:not(.reduce) .climb__stops { display: grid; gap: 0; }
.js:not(.reduce) .stop {
  grid-area: 1 / 1; align-self: end;
  opacity: 0; transform: translateY(1.2rem); visibility: hidden;
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out), visibility 0s 0.5s;
}
.js:not(.reduce) .stop.is-active { opacity: 1; transform: none; visibility: visible; transition: opacity 0.6s var(--ease-out) 0.08s, transform 0.8s var(--ease-out) 0.08s, visibility 0s; }
.js:not(.reduce) .stop h3 { font-size: clamp(1.7rem, 0.8rem + 3.4vw, 2.6rem); }
.js:not(.reduce) .stop p:not(.stop__tag) { font-size: var(--fs-sm); }
@media (min-width: 64rem) and (min-height: 37.5rem) {
  .js:not(.reduce) .climb__sticky::after {
    background: linear-gradient(90deg, oklch(8% 0.03 262 / 0.85) 0%, oklch(8% 0.03 262 / 0.45) 34%, transparent 54%);
  }
  .js:not(.reduce) .climb__copy {
    top: 0; right: auto; bottom: 0; width: min(34rem, 40vw);
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--nav-h) + 2rem) 0 3rem;
  }
  .js:not(.reduce) .stop { align-self: center; }
  .js:not(.reduce) .stop h3 { font-size: clamp(2.2rem, 0.9rem + 2.6vw, 3.6rem); }
  .js:not(.reduce) .stop p:not(.stop__tag) { font-size: var(--fs-md); }
  .js:not(.reduce) .climb__alt { margin-bottom: var(--sp-6); }
}
@media (max-width: 40rem) {
  .ab-hero__lede { font-size: var(--fs-md); }
}