/* ==========================================================================
   SCENE 05: CÓMO TRABAJAMOS (Guided Process)
   Pieza tipográfica/procesual: el propio recorrido de 4 etapas —número,
   título, descripción y línea de progreso— es el protagonista visual.
   Sin escenario ilustrado. El gran capítulo cobre de la Home: la superficie
   vive en cobre profundo durante todo el recorrido, incluido el cierre; el
   fondo se anima desde JS solo en la entrada (grafito→cobre) en desktop, y
   en mobile esa misma entrada queda resuelta en el ::before por CSS.
   ========================================================================== */

.hp-process {
  position: relative;
  background: #8B5136;
  color: #F3EEE6;
  z-index: 3;
}

/* Vignette/materialidad muy sutil: variación tonal dentro de la familia cobre,
   sin textura ni ruido. Sirve además de puente cromático en mobile. */
.hp-process::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 22% 10%, rgba(255, 255, 255, .06), transparent 55%),
    radial-gradient(140% 100% at 82% 100%, rgba(0, 0, 0, .24), transparent 60%);
}

/* ---------- Stage (sticky scrub en desktop) ---------- */
.hp-process__wrap {
  position: relative;
  z-index: 1;
  height: clamp(760px, 200svh, 1800px);
}
.hp-process__stage {
  position: sticky;
  /* El header fijo no debe invadir el primer renglón en laptops bajas. */
  top: 76px;
  height: calc(100svh - 76px);
  min-height: 544px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 5vh, 56px);
  padding: clamp(56px, 8vh, 84px) 6vw;
  overflow: hidden;
}

/* ---------- Intro editorial: compacto, deja protagonismo al track ---------- */
.hp-process__intro {
  max-width: 46ch;
  flex: 0 0 auto;
}
.hp-process__heading {
  font-family: var(--font-clash, 'Clash Display', sans-serif);
  text-transform: uppercase;
  font-weight: 500;
  font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4.2rem);
  line-height: .96;
  letter-spacing: -.015em;
  color: #F3EEE6;
}

/* ---------- Track: la pieza editorial a escala grande ---------- */
.hp-process__track {
  position: relative;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
}

/* Palabra material de fondo: única aparición de Comico en la Home, tallada
   en la propia superficie cobre. El contraste viene de luz/sombra, no de
   color — el relleno queda muy cerca del tono base #8B5136. */
.hp-process__bgword {
  position: absolute;
  inset: -8% 0 auto 0;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hp-process__bgword-item {
  position: absolute;
  left: 0;
  top: 86%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  font-family: var(--font-comico, 'Comico', sans-serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .002em;
  font-size: clamp(7.6rem, 5rem + 15.4vw, 19.2rem);
  line-height: 1;
  /* Transparencia horneada en el color (no en la opacity del elemento):
     así el relieve (stroke + sombras) no se diluye junto con la lectura. */
  color: rgba(48, 22, 13, .3);
  opacity: 0;
  white-space: nowrap;
  will-change: opacity, transform;
  -webkit-text-stroke: .5px rgba(255, 216, 190, .1);
  text-shadow:
    -1px -1px 0 rgba(255, 220, 195, .1),
    -2px -2px 6px rgba(255, 215, 185, .04),
     1px  2px 0 rgba(48, 20, 12, .24),
     2px  4px 1px rgba(45, 18, 10, .14),
     5px  7px 8px rgba(35, 13, 8, .13),
     9px 12px 16px rgba(25, 8, 5, .09);
}

/* CONSTRUIR es la más larga (9 caracteres): a igual escala que las demás
   excede el ancho útil y se corta. Fit específico, sin deformar la fuente. */
.hp-process__bgword-item--build {
  /* Escala casi puramente por vw (sin componente rem fijo): así el ratio
     texto/contenedor se mantiene estable en distintos anchos de viewport,
     a diferencia de un clamp con base rem que se desproporciona en tablet. */
  font-size: clamp(7.4rem, 14.5vw, 16.6rem);
}

.hp-process__track-inner {
  position: relative;
  z-index: 1;
}
.hp-process__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 2px;
  background: rgba(6, 6, 4, .35);
  border-radius: 2px;
}
.hp-process__line-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: #F3EEE6;
  border-radius: 2px;
  will-change: transform;
}
.hp-process__steps {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hp-process__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hp-process__node {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(6, 6, 4, .28);
  border: 2px solid rgba(243, 238, 230, .32);
  margin-bottom: clamp(24px, 4vh, 40px);
  transition: transform .35s ease, border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
  will-change: transform;
}
.hp-process__num {
  font-family: var(--font-cabinet, 'Cabinet Grotesk', sans-serif);
  font-size: clamp(.8rem, .68rem + .4vw, 1rem);
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(243, 238, 230, .42);
  margin-bottom: clamp(6px, 1vh, 12px);
  transition: color .35s ease, transform .35s ease;
  display: block;
  will-change: transform;
}
.hp-process__title {
  font-family: var(--font-clash, 'Clash Display', sans-serif);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -.005em;
  color: rgba(243, 238, 230, .46);
  transition: color .35s ease, transform .35s ease;
}
.hp-process__desc {
  margin-top: clamp(10px, 1.6vh, 16px);
  font-family: var(--font-cabinet, 'Cabinet Grotesk', sans-serif);
  font-size: clamp(.9rem, .82rem + .3vw, 1.05rem);
  line-height: 1.5;
  color: rgba(243, 238, 230, .34);
  transition: color .35s ease, transform .35s ease, opacity .35s ease;
}

/* estado activo */
.hp-process__step.is-active .hp-process__node {
  border-color: #F3EEE6;
  background: #F3EEE6;
  transform: scale(1.15);
  box-shadow: 0 0 0 7px rgba(6, 6, 4, .22);
}
.hp-process__step.is-active .hp-process__num {
  color: #F3EEE6;
  transform: translateY(-8px);
}
.hp-process__step.is-active .hp-process__title {
  color: #F9F6F1;
  transform: translateY(-4px);
}
.hp-process__step.is-active .hp-process__desc { color: rgba(243, 238, 230, .82); }

/* estado completado: legible, menos énfasis que activo, nunca vuelve a apagado */
.hp-process__step.is-done .hp-process__node {
  border-color: rgba(243, 238, 230, .55);
  background: rgba(243, 238, 230, .85);
  transform: scale(1);
}
.hp-process__step.is-done .hp-process__num,
.hp-process__step.is-done .hp-process__title { color: rgba(243, 238, 230, .68); }
.hp-process__step.is-done .hp-process__desc { color: rgba(243, 238, 230, .5); }

/* ---------- Continuidad: extensión fina de la línea al cerrar MEDIR ----------
   Antes era un arco SVG (curva en U) que leía como "loop de retorno" — se
   reemplaza por una simple extensión recta que se desvanece, sugiriendo que
   el recorrido sigue sin dibujar un símbolo literal de repetición. */
.hp-process__continuum {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(16px, 3vh, 26px);
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.hp-process__continuum-line {
  display: block;
  width: clamp(64px, 7vw, 108px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(243, 238, 230, .55), rgba(243, 238, 230, 0));
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

/* ---------- Cierre editorial: mejora continua ---------- */
.hp-process__evolve {
  flex: 0 0 auto;
  align-self: flex-end;
  max-width: 38ch;
  margin: 0;
  text-align: right;
  font-family: var(--font-cabinet, 'Cabinet Grotesk', sans-serif);
  font-weight: 500;
  letter-spacing: -.004em;
  font-size: clamp(1.02rem, .9rem + .45vw, 1.28rem);
  line-height: 1.32;
  color: rgba(243, 238, 230, .82);
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}

/* Laptop y desktop de poca altura: la escala conserva masa editorial, pero
   queda limitada por la altura útil del stage para que ninguna palabra roce
   el borde inferior. */
@media (min-width: 821px) and (max-height: 920px) {
  .hp-process__bgword-item {
    top: 72%;
    font-size: clamp(7.6rem, min(15vw, 30svh), 14rem);
  }
  .hp-process__bgword-item--build {
    font-size: clamp(7rem, min(13.3vw, 27svh), 12.5rem);
  }
}

/* ==========================================================================
   Reduced motion: proceso completo, legible, sin depender de la animación
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hp-process__stage { position: relative; height: auto; padding-top: clamp(56px, 8vh, 84px); padding-bottom: clamp(48px, 7vh, 72px); }
  .hp-process__wrap { height: auto; }
  .hp-process__line-fill { transform: scaleX(1) !important; }
  .hp-process__step { opacity: 1 !important; }
  .hp-process__step .hp-process__node,
  .hp-process__step .hp-process__num,
  .hp-process__step .hp-process__title,
  .hp-process__step .hp-process__desc { transform: none !important; }
  .hp-process__bgword-item { opacity: 0 !important; }
  .hp-process__continuum,
  .hp-process__evolve { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Responsive — 820px: recorrido vertical, sin scroll horizontal
   ========================================================================== */
@media (max-width: 820px) {
  /* mobile no anima el fondo por scroll (sin pin): el ::before resuelve el
     puente cromático grafito→cobre y cobre→piedra en los bordes de la sección,
     mientras el cobre queda protagonista en el resto del recorrido vertical */
  .hp-process::before {
    background:
      radial-gradient(120% 90% at 22% 10%, rgba(255, 255, 255, .06), transparent 55%),
      radial-gradient(140% 60% at 50% 100%, rgba(0, 0, 0, .18), transparent 60%),
      linear-gradient(180deg, #060604 0%, transparent 4%, transparent 100%);
  }

  .hp-process__stage {
    position: relative;
    height: auto;
    min-height: 0;
    padding: clamp(56px, 9vh, 76px) 7vw clamp(48px, 7vh, 64px) 7vw;
    gap: clamp(28px, 5vh, 40px);
  }
  .hp-process__wrap { height: auto; }

  /* Las palabras Comico pasan a una segunda profundidad vertical: acompañan
     cada hito sin competir con la lectura del track. */
  .hp-process__bgword {
    display: block;
    inset: 0;
    height: 100%;
    overflow: hidden;
  }
  .hp-process__bgword-item {
    left: -2vw;
    width: 104%;
    text-align: left;
    font-size: clamp(4.2rem, 16vw, 6rem);
    color: rgba(48, 22, 13, .25);
    -webkit-text-stroke: .5px rgba(255, 216, 190, .09);
  }
  .hp-process__bgword-item--build { font-size: clamp(3.65rem, 13vw, 4.9rem); }
  .hp-process__bgword-item:nth-child(1) { top: 11%; }
  .hp-process__bgword-item:nth-child(2) { top: 37%; }
  .hp-process__bgword-item:nth-child(3) { top: 63%; }
  .hp-process__bgword-item:nth-child(4) { top: 87%; }

  .hp-process__track { order: 2; }
  .hp-process__track-inner { padding-left: 34px; }
  .hp-process__line {
    left: 8px; right: auto; top: 4px; bottom: 4px;
    width: 2px; height: auto;
  }
  .hp-process__line-fill {
    transform: scaleY(0);
    transform-origin: top center;
  }
  .hp-process__steps {
    flex-direction: column;
    gap: 0;
  }
  /* min-height reparte las 4 etapas en varias pantallas y ralentiza la activación:
     sin esto, los 4 triggers de scroll caen dentro del mismo viewport y se
     activan casi simultáneos (objetivo total ~170-190svh de recorrido) */
  .hp-process__step { position: relative; min-height: 46svh; padding-top: 2px; }
  .hp-process__step:last-child { min-height: 22svh; }
  .hp-process__node { position: absolute; left: -34px; top: 2px; margin-bottom: 0; }
  .hp-process__num { margin-bottom: 8px; }
  .hp-process__title { font-size: clamp(1.6rem, 1.3rem + 3vw, 2.2rem); }

  .hp-process__continuum { display: none; }

  .hp-process__evolve {
    order: 3;
    align-self: flex-start;
    text-align: left;
    max-width: 34ch;
    margin-top: clamp(32px, 6vh, 48px);
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .hp-process__line-fill { transform: scaleY(1) !important; }
  .hp-process__bgword-item { opacity: .18 !important; }
}