/* =========================================================
   T-Control · Proceso (the process section of KANZO/Web,
   itself from UI Vault sections/process/process-006)

   A pinned stage: the copy on the left, the five steps as cards on the
   right. The open card takes the room (flex-grow) and the others fold into
   slim strips with their name written vertically; everything moves on one
   curve and one duration so the change reads as a single calm motion.
   process.js only sets .is-active (and the step shown on the left).
   Steps and texts: "Nuestro Enfoque · Flujo de trabajo" of the inventory.
========================================================= */

.tc-process {
  overflow-x: clip;
  border-bottom: 1px solid var(--tc-line);
  background: var(--tc-white);
}

/* each of the five steps gets a real stretch of scroll */
.tc-process__track { height: 620vh; }

.tc-process__pin {
  --tc-process-ease: cubic-bezier(.65, 0, .35, 1);
  --tc-process-time: .9s;
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 28% 1fr;
  gap: 3vw;
  height: 100vh;
  height: 100svh;
  max-width: 1800px;
  margin: 0 auto;
  padding: 118px clamp(24px, 4vw, 64px) 36px; /* clears the floating menu */
}

/* ---------- copy ---------- */

.tc-process__copy { display: flex; flex-direction: column; min-width: 0; }

.tc-process__copy .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.tc-process__copy .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--tc-black); }

.tc-process__copy h2 { font-size: clamp(3.6rem, 6vw, 6.4rem); line-height: .9; }

/* the current step, bottom left; its lines swap softly */
.tc-process__step { margin-top: auto; }
.tc-process__step > * { transition: opacity .3s ease, translate .3s ease, filter .3s ease; }
.tc-process__step.is-swapping > * { opacity: 0; translate: 0 10px; filter: blur(4px); }

.tc-process__step strong {
  display: block;
  color: var(--tc-grey-light);
  font-family: var(--font-display);
  font-size: clamp(5rem, 8vw, 8.5rem);
  font-weight: 400;
  line-height: .8;
}

.tc-process__step span {
  display: block;
  margin-top: 14px;
  color: var(--tc-black);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* a thin progress line under the step: fills one fifth per step */
.tc-process__progress {
  position: relative;
  height: 2px;
  margin-top: 22px;
  overflow: hidden;
  background: var(--tc-line);
}
.tc-process__progress i {
  position: absolute;
  inset: 0;
  background: var(--tc-black);
  transform: scaleX(var(--tc-progress, .2));
  transform-origin: left;
  transition: transform var(--tc-process-time) var(--tc-process-ease);
}

/* ---------- cards ---------- */

.tc-process__cards { display: flex; gap: 8px; min-height: 0; }

.tc-process__card {
  position: relative;
  flex: 1 1 0;
  min-width: 76px;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--tc-black);
  color: var(--tc-white);
  cursor: pointer;
  transition: flex-grow var(--tc-process-time) var(--tc-process-ease);
}

/* the open card takes most of the row; the others stay slim strips */
.tc-process__card.is-active { flex-grow: 9; cursor: default; }

.tc-process__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* folded: grey and darker; the open one comes up to full light */
  filter: grayscale(1) brightness(.5);
  scale: 1.08;
  transition: scale 1.4s var(--tc-ease), filter var(--tc-process-time) var(--tc-process-ease);
}
.tc-process__card.is-active img { scale: 1; filter: grayscale(.25) brightness(1); }

.tc-process__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tc-black) 30%, transparent),
    color-mix(in srgb, var(--tc-black) 6%, transparent) 42%,
    color-mix(in srgb, var(--tc-black) 82%, transparent));
}

/* the name of each folded card: big, vertical, centred in its strip; it
   fades out as the card opens and the card's own text takes over */
.tc-process__label {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  rotate: 180deg;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: opacity .5s ease .35s, filter .5s ease .35s;
}
.tc-process__label b { margin-bottom: 14px; color: var(--tc-grey-light); font-weight: 400; }
.tc-process__card.is-active .tc-process__label { opacity: 0; filter: blur(6px); transition: opacity .3s ease, filter .3s ease; }

/* the text of the open card arrives once the card has opened */
.tc-process__info {
  position: absolute;
  bottom: 28px;
  left: 28px;
  width: min(440px, 80%);
  opacity: 0;
  translate: 0 18px;
  filter: blur(4px);
  transition: opacity .3s ease, translate .3s ease, filter .3s ease;
}
.tc-process__card.is-active .tc-process__info {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition: opacity .7s var(--tc-ease) .45s, translate .7s var(--tc-ease) .45s, filter .7s var(--tc-ease) .45s;
}

.tc-process__kicker {
  display: block;
  margin-bottom: 12px;
  color: var(--tc-grey-light);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
}

.tc-process__card h3 { color: var(--tc-white); font-size: clamp(2.2rem, 3vw, 3.2rem); line-height: .95; }
.tc-process__card p { margin: 12px 0 0; color: color-mix(in srgb, var(--tc-white) 82%, transparent); font-size: .95rem; line-height: 1.55; }

.tc-process__card:focus-visible { outline: 3px solid var(--tc-black); outline-offset: 3px; }

@media (max-width: 1100px) {
  .tc-process__pin { grid-template-columns: 32% 1fr; }
  .tc-process__card { min-width: 58px; }
  .tc-process__label { font-size: 1.5rem; }
}

/* phone: the five cards stacked, all open */
@media (max-width: 760px) {
  .tc-process__track { height: auto; }
  .tc-process__pin { position: relative; display: block; height: auto; padding: 96px 18px 72px; }
  .tc-process__step { display: none; }
  .tc-process__copy { margin-bottom: 36px; }
  .tc-process__cards { display: grid; gap: 12px; }
  .tc-process__card { height: 400px; cursor: default; }
  .tc-process__card img { scale: 1; filter: grayscale(.25) brightness(.95); }
  .tc-process__info { opacity: 1; translate: none; filter: none; left: 22px; bottom: 22px; width: calc(100% - 44px); }
  .tc-process__label { display: none; }

  /* scroll-driven (scripts/mobile-focus.js) */
  .tc-mfocus .tc-process__card:not(.is-focus) img { scale: 1.06; filter: grayscale(1) brightness(.45); }
  .tc-process__card p { transition: opacity .6s var(--tc-ease) .2s, translate .6s var(--tc-ease) .2s; }
  .tc-mfocus .tc-process__card:not(.is-focus) p { opacity: 0; translate: 0 10px; transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-process__card, .tc-process__card img, .tc-process__label, .tc-process__info,
  .tc-process__step > *, .tc-process__progress i { transition: none !important; }
}