/* =====================================================================
   gig.mx Fase 1 · Nosotros (ERS §7, NOS-A … NOS-F). Solo en /nosotros.
   ===================================================================== */

/* ---------- NOS-A · Hero ---------- */
.gx-about-hero { position: relative; isolation: isolate; height: max(100vh, calc(var(--gx-u) * 1080)); min-height: 620px; overflow: hidden; background: var(--gx-ink); color: var(--gx-surface); }
.gx-about-hero__video, .gx-about-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.gx-about-hero__video { object-fit: cover; z-index: -2; }
.gx-about-hero__shade { z-index: -1; background: linear-gradient(0deg, rgba(26, 26, 26, .55) 0%, rgba(26, 26, 26, 0) 60%); }
.gx-about-hero__content { position: absolute; left: var(--gx-pad-x); right: var(--gx-pad-x); bottom: calc(var(--gx-u) * 180); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.gx-about-hero__title { font-size: var(--gx-fs-display-l); line-height: .9; letter-spacing: -.015em; font-weight: 500; opacity: .96; margin: 4px 0 calc(var(--gx-u) * 60); }
.gx-about-hero__title span { display: block; }
.gx-about-hero .gx-stats { margin: 0 0 calc(var(--gx-u) * 90); min-width: calc(var(--gx-u) * 688); }

/* ---------- NOS-B · Storytelling y valores ---------- */
.gx-story { position: relative; isolation: isolate; z-index: 2; margin-top: calc(var(--gx-u) * -77); padding: calc(var(--gx-u) * 190) calc(var(--gx-u) * 80) calc(var(--gx-u) * 140); overflow: hidden; }
.gx-story__bg { border-radius: inherit; }
.gx-story__bg::after { background: linear-gradient(90deg, rgba(250, 250, 250, .7) 0%, rgba(250, 250, 250, .92) 35%, rgba(250, 250, 250, .92) 100%); }
.gx-story__text { margin-left: calc(var(--gx-u) * 598); max-width: calc(var(--gx-u) * 900); }
.gx-story__text .gx-h2 { margin: 6px 0 calc(var(--gx-u) * 20); }
.gx-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--gx-u) * 55); margin-top: calc(var(--gx-u) * 80); }
.gx-value-card { background: var(--gx-white); border-radius: var(--gx-r-card); box-shadow: var(--gx-shadow-card); padding: calc(var(--gx-u) * 40); min-height: calc(var(--gx-u) * 470);
  opacity: 0; transform: translateX(880px); transition: transform 1s var(--gx-ease-in-out), opacity 1s var(--gx-ease-in-out); transition-delay: calc(var(--gx-i, 0) * 120ms); }
.gx-values.is-in .gx-value-card { opacity: 1; transform: none; }
.gx-value-card__icon { display: flex; align-items: center; justify-content: center; width: calc(var(--gx-u) * 80); height: calc(var(--gx-u) * 80); min-width: 52px; min-height: 52px; border-radius: 50%; background: rgba(var(--gx-purple-rgb), .1); margin-bottom: calc(var(--gx-u) * 60); }
.gx-value-card__icon img { width: 50%; height: 50%; }
.gx-value-card__title { font-size: var(--gx-fs-h4); line-height: 1.2; color: var(--gx-t-80); margin-bottom: calc(var(--gx-u) * 18); }
.gx-value-card__body p { font-size: var(--gx-fs-body-l); line-height: 1.136; color: var(--gx-t-50); }
.gx-value-card__body p + p { margin-top: calc(var(--gx-u) * 18); }

/* ---------- NOS-C · Línea de tiempo ---------- */
.gx-history { padding: calc(var(--gx-u) * 140) 0 calc(var(--gx-u) * 120); overflow: hidden; }
.gx-history__intro { padding: 0 var(--gx-pad-x); max-width: calc(var(--gx-u) * 1000 + var(--gx-pad-x)); margin-bottom: calc(var(--gx-u) * 70); }
.gx-history__intro .gx-h2 { margin: 6px 0 calc(var(--gx-u) * 20); }
.gx-tl { position: relative; }
.gx-tl__track { display: flex; align-items: flex-start; gap: calc(var(--gx-u) * 25); transition: transform .8s var(--gx-ease-in-out); will-change: transform; }
.gx-tl-card { flex: 0 0 calc(var(--gx-u) * 400); min-width: 200px; cursor: pointer; transition: flex-basis .8s var(--gx-ease-in-out); }
.gx-tl-card.is-active { flex-basis: calc(var(--gx-u) * 575); min-width: 280px; cursor: default; }
.gx-tl-card__media { position: relative; height: calc(var(--gx-u) * 520); min-height: 260px; border-radius: calc(var(--gx-u) * 15); overflow: hidden; background: #E9E7EE; transition: height .8s var(--gx-ease-in-out); }
.gx-tl-card.is-active .gx-tl-card__media { height: calc(var(--gx-u) * 700); min-height: 350px; }
.gx-tl-card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.gx-tl-card__media > img.is-active { opacity: 1; }
.gx-tl-card__btn { position: absolute; left: 50%; bottom: calc(var(--gx-u) * 30); transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .4s .3s; }
.gx-tl-card.is-active .gx-tl-card__btn { opacity: 1; pointer-events: auto; }
.gx-tl-bars { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; opacity: 0; transition: opacity .3s; }
.gx-tl-card.is-stories .gx-tl-bars { opacity: 1; }
.gx-tl-bar { width: calc(var(--gx-u) * 50); min-width: 32px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .4); overflow: hidden; }
.gx-tl-bar > span { display: block; height: 100%; width: 0; background: #FFFFFF; }
.gx-tl-bar.is-done > span { width: 100%; }
.gx-tl-bar.is-run > span { width: 100%; transition: width 3s linear; }
.gx-tl-card__head { margin-top: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--gx-fs-lead); color: var(--gx-t-60); }
.gx-tl-card__year { font-weight: 400; }
.gx-tl-card.is-active .gx-tl-card__head { white-space: normal; }
.gx-tl-card.is-active .gx-tl-card__year { font-size: max(24px, calc(var(--gx-u) * 40)); font-weight: 500; color: var(--gx-purple); margin-right: 10px; }
.gx-tl-card.is-active .gx-tl-card__title { font-size: var(--gx-fs-h4); color: var(--gx-t-80); }
.gx-tl-card__text { display: none; margin-top: 8px; max-width: calc(var(--gx-u) * 560); font-size: var(--gx-fs-body-l); line-height: 1.136; color: var(--gx-t-50);
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gx-tl-card.is-active .gx-tl-card__text { display: -webkit-box; }
.gx-tl__arrows { position: absolute; right: calc(var(--gx-u) * 105); bottom: calc(var(--gx-u) * 40); }

/* ---------- NOS-D · Metodología ---------- */
.gx-method { position: relative; overflow: hidden; display: grid; grid-template-columns: calc(var(--gx-u) * 930) 1fr; gap: calc(var(--gx-u) * 80); padding: calc(var(--gx-u) * 100) var(--gx-pad-x); align-items: center; }
.gx-method__media { position: relative; height: calc(var(--gx-u) * 870); min-height: 360px; border-radius: var(--gx-r-card); overflow: hidden; background: #E9E7EE; z-index: 1; }
.gx-method__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--gx-ease-in-out); }
.gx-method__media img.is-active { opacity: 1; }
.gx-method__side .gx-h2 { margin: 6px 0 calc(var(--gx-u) * 40); }
.gx-steps { margin-bottom: calc(var(--gx-u) * 40); }
.gx-step { position: relative; padding: calc(var(--gx-u) * 14) 0; }
.gx-step::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background: rgba(var(--gx-purple-rgb), .04); opacity: 0; transition: opacity .6s var(--gx-ease-in-out); z-index: -1; }
.gx-step.is-active::before { opacity: 1; }
.gx-step__btn { display: flex; gap: calc(var(--gx-u) * 25); align-items: baseline; text-align: left; width: 100%; padding-left: calc(var(--gx-u) * 25); }
.gx-step__num { font-size: max(22px, calc(var(--gx-u) * 40)); color: rgba(var(--gx-purple-rgb), .3); transition: color .6s; }
.gx-step.is-active .gx-step__num { color: var(--gx-purple); }
.gx-step__title { font-size: var(--gx-fs-h4); line-height: 1.2; color: var(--gx-t-80); }
.gx-step__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--gx-ease-in-out); padding-left: calc(var(--gx-u) * 25 + max(22px, calc(var(--gx-u) * 40)) + var(--gx-u) * 25); }
.gx-step__body > p { overflow: hidden; font-size: var(--gx-fs-body); line-height: 1.25; color: var(--gx-t-50); max-width: calc(var(--gx-u) * 600); }
.gx-step.is-active .gx-step__body { grid-template-rows: 1fr; }
.gx-step.is-active .gx-step__body > p { padding-top: 8px; }

/* ---------- NOS-E · Reconocimientos ---------- */
.gx-awards { padding: calc(var(--gx-u) * 140) var(--gx-pad-x) calc(var(--gx-u) * 160); text-align: center; }
.gx-awards .gx-h2 { max-width: calc(var(--gx-u) * 1000); margin: 6px auto calc(var(--gx-u) * 70); }
.gx-awards__carousel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--gx-u) * 40); }
.gx-awards__viewport { overflow: hidden; padding: 8px 4px 16px; }
.gx-awards__track { display: flex; gap: calc(var(--gx-u) * 60); transition: transform .6s var(--gx-ease-in-out); justify-content: flex-start; }
.gx-award { flex: 0 0 calc((100% - var(--gx-u) * 180) / 4); min-width: 200px; }
.gx-award__in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--gx-u) * 30); height: calc(var(--gx-u) * 340); min-height: 220px;
  padding: 24px; background: var(--gx-white); border-radius: var(--gx-r-card); box-shadow: var(--gx-shadow-card); }
.gx-award__logo { width: calc(var(--gx-u) * 100); height: calc(var(--gx-u) * 100); min-width: 64px; min-height: 64px; border-radius: 50%; background: rgba(var(--gx-purple-rgb), .1); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gx-award__logo img { width: 80%; height: 80%; object-fit: contain; }
.gx-award__text { font-size: var(--gx-fs-h4); line-height: 1.09; color: var(--gx-t-70); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- NOS-F · Bolsa de trabajo ---------- */
.gx-jobs { margin: 0 calc(var(--gx-u) * 41); min-height: calc(var(--gx-u) * 650); padding: 48px 24px; border-radius: var(--gx-r-md); background: var(--gx-purple); color: var(--gx-surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--gx-u) * 12); }
.gx-jobs__title { color: var(--gx-surface); font-weight: 400; max-width: calc(var(--gx-u) * 1100); margin-bottom: calc(var(--gx-u) * 50); }
.gx-jobs .gx-btn--arrow { margin-right: 0; }

/* ---------- Responsive (KOUD) ---------- */
@media (max-width: 1279px) {
  .gx-about-hero__content { flex-direction: column; align-items: flex-start; gap: 28px; bottom: 110px; }
  .gx-about-hero .gx-stats { min-width: 0; width: min(100%, 560px); margin: 0; }
  .gx-story__text { margin-left: 30%; }
  .gx-method { grid-template-columns: 1fr 1fr; }
  .gx-award { flex-basis: calc((100% - var(--gx-u) * 120) / 3); }
}
@media (max-width: 1023px) {
  .gx-about-hero { height: 100svh; }
  .gx-about-hero__content { left: 24px; right: 24px; bottom: 48px; flex-direction: column; align-items: flex-start; }
  .gx-about-hero .gx-stats { min-width: 0; width: 100%; margin: 0; }
  .gx-story { margin-top: -30px; border-radius: 30px 30px 0 0; padding: 72px 24px; }
  .gx-story__text { margin-left: 0; }
  .gx-values { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .gx-value-card { min-height: 0; transform: translateX(60px); }
  .gx-history { padding: 72px 0; }
  .gx-history__intro { padding: 0 24px; }
  .gx-tl__arrows { position: static; justify-content: flex-end; padding: 16px 24px 0; }
  .gx-method { grid-template-columns: 1fr; padding: 72px 24px; }
  .gx-method__media { height: 60vw; min-height: 280px; }
  .gx-awards { padding: 72px 16px; }
  .gx-awards__carousel { gap: 8px; }
  .gx-award { flex-basis: calc((100% - var(--gx-u) * 60) / 2); }
  .gx-jobs { margin: 0 16px; min-height: 440px; }
}
@media (max-width: 767px) {
  .gx-about-hero__title { font-size: 44px; margin-bottom: 24px; }
  .gx-about-hero .gx-stat__num { font-size: 44px; }
  .gx-about-hero .gx-stat__label { font-size: 15px; }
  .gx-tl-card { min-width: 64vw; }
  .gx-tl-card.is-active { min-width: 78vw; }
  .gx-award { flex-basis: 100%; min-width: 0; }
  .gx-awards__carousel { grid-template-columns: 44px 1fr 44px; }
  .gx-jobs__title { font-size: 38px; line-height: 1.05; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-value-card { opacity: 1; transform: none; transition: none; }
  .gx-tl__track, .gx-tl-card, .gx-tl-card__media, .gx-awards__track { transition: none; }
}