/* ============================================================
   N2 · Proceso (metodología)
   Antesala (eyebrow + h2) seguida de una pista de scroll con 5
   fases. En escritorio la pista ancla (.proc-stage sticky) y el
   scroll dentro de ella decide qué fase se muestra; en móvil el
   pin se desactiva y las fases quedan apiladas. Las pestañas
   inferiores permiten saltar a cualquier fase con un click.
   Depende de los tokens de brand.css. El cálculo de scroll vive
   en process.js.
   ============================================================ */

.proc {
  background: var(--bg);
}

/* ---- Antesala ---- */
/* Dos columnas: titular a la izquierda, índice 01–05 a la derecha, alineados
   arriba. Sin min-height: el índice ya da presencia, así no queda aire muerto
   ni antes (Hero→Proceso) ni después (título→pin). */
.proc-head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: start;
  gap: clamp(32px, 6vw, 88px);
  padding-top: clamp(64px, 8vh, 104px);
  padding-bottom: clamp(8px, 1.4vh, 18px);
}
.proc-head h2 {
  margin-top: 14px;
  max-width: 22ch;
}
.proc-head-sub {
  margin-top: 18px;
  max-width: 48ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
}

/* ---- Índice de fases (vista previa estática; las pestañas son el control real) ---- */
.proc-head-index {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
  padding-left: clamp(20px, 2.5vw, 40px);
  border-left: 1px solid var(--line);
}
.proc-head-index li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(14px, 1.1vw, 17px);
  color: var(--fg-dim);
}
.proc-idx-n {
  color: var(--fg-faint);
  font-size: 0.8em;
  letter-spacing: 0.04em;
}

/* ---- Pista de scroll ---- */
.proc-track {
  position: relative;
  height: 440vh; /* 5 fases × ~88vh de recorrido */
}

/* El stage agrupa contenido + pestañas como un solo bloque centrado:
   así nunca se desancla uno sin el otro al entrar/salir del pin. */
.proc-stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 5vh, 56px);
  padding: clamp(24px, 4vh, 40px) 0 clamp(24px, 4vh, 40px);
  overflow: hidden;
}

.proc-stage-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}

/* ---- Número fantasma ---- */
.proc-nums {
  position: relative;
  height: clamp(160px, 26vw, 360px);
  padding-left: clamp(18px, 2vw, 28px);
  pointer-events: none;
}

/* Rail vertical: comunica el avance entre las 5 fases dentro del pin */
.proc-rail {
  position: absolute;
  left: 0;
  top: 6%;
  bottom: 6%;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.proc-rail-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(var(--accent), var(--accent-glow));
  box-shadow: 0 0 12px var(--accent-glow);
  transform: scaleY(var(--proc-progress, 0));
  transform-origin: top;
  transition: transform 0.15s linear;
}

.proc-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(120px, 20vw, 280px);
  line-height: 1;
  color: var(--fg-ghost);
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Halo de acento muy tenue detrás del número activo (en vez de solo el flash) */
.proc-num::before {
  content: "";
  position: absolute;
  left: -6%;
  top: 50%;
  width: 116%;
  height: 130%;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(0, 200, 117, 0.1), transparent 72%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.proc-num.is-active {
  opacity: 1;
  transform: translateY(0);
}
.proc-num.is-active::before {
  opacity: 1;
}
/* Direccional: las fases ya vistas salen hacia arriba, las futuras llegan desde abajo */
.proc-num.is-past {
  transform: translateY(-18px);
}

/* ---- Panel de contenido ---- */
.proc-panels {
  position: relative;
  min-height: clamp(320px, 40vh, 420px);
}
.proc-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2vh, 20px);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.proc-panel.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.proc-panel.is-past {
  transform: translateY(-16px);
}

.proc-eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.proc-title {
  margin: 0;
  max-width: 18ch;
}
.proc-em {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.proc-desc {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
}

.proc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proc-list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--fg-dim);
}
.proc-list li::before {
  content: "—";
  font-family: "Geist Mono", ui-monospace, monospace;
  color: var(--accent);
  flex: 0 0 auto;
}

.proc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.proc-tag {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg-dim);
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- Pestañas de fase ---- */
/* (lleva además la clase .container, comparte alineación con el contenido) */
.proc-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.proc-tabs::-webkit-scrollbar {
  display: none;
}

.proc-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 16px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg-dim);
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}
/* Barra de avance intra-fase: se llena según el scroll dentro de la fase activa */
.proc-tab::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(var(--tab-fill, 0));
  transform-origin: left;
  transition:
    transform 0.15s linear,
    opacity 0.25s ease;
}
.proc-tab.is-active::after {
  opacity: 0.9;
}
.proc-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-faint);
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}
.proc-tab:hover {
  color: var(--fg);
}
.proc-tab.is-active {
  color: var(--fg);
  border-color: var(--fg);
}
.proc-tab.is-active .proc-tab-dot {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}
.proc-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- will-change acotado: solo mientras el stage está pineado y a la vista,
   para no retener capas de composición de más el resto del scroll ---- */
.proc-stage.is-pinned .proc-num,
.proc-stage.is-pinned .proc-panel {
  will-change: opacity, transform;
}

/* ---- Affordance "sigue haciendo scroll" — visible en la fase 01,
   se desvanece tras el primer avance (clase .is-advanced vía JS) ---- */
.proc-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  opacity: 0;
  animation: proc-hint-in 0.8s ease 0.6s forwards;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.proc-hint-chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: proc-bob 1.8s ease-in-out infinite;
}
.proc-stage.is-advanced .proc-hint {
  opacity: 0 !important;
}
@keyframes proc-hint-in {
  to {
    opacity: 1;
  }
}
@keyframes proc-bob {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
  }
  50% {
    transform: rotate(45deg) translate(3px, 3px);
  }
}

/* ============================================================
   Proceso · responsive — se abandona el pin, fases apiladas
   ============================================================ */
@media (max-width: 900px) {
  /* Antesala apilada; el índice se oculta porque las pestañas ya suben arriba
     (.proc-tabs order:-1) y hacen de índice — evita duplicarlo. */
  .proc-head {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: clamp(20px, 5vw, 28px);
    padding-top: clamp(72px, 12vh, 120px);
  }
  .proc-head-index {
    display: none;
  }

  .proc-track {
    height: auto;
  }
  .proc-stage {
    position: static;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: clamp(56px, 14vw, 96px);
    padding: clamp(8px, 3vh, 24px) 0 0;
  }
  .proc-stage-inner {
    display: contents;
  }

  .proc-nums {
    display: none;
  }

  .proc-panels {
    display: contents;
    min-height: 0;
  }
  .proc-panel {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding: 0 var(--gutter);
    scroll-margin-top: 96px;
  }

  .proc-tabs {
    order: -1; /* la barra de fases actúa de índice arriba del todo */
    margin-bottom: 8px;
  }

  /* El rail, el halo y el hint sólo tienen sentido en el pin de escritorio */
  .proc-hint {
    display: none;
  }
  /* En apilado todas las fases están visibles: sin barra de avance por pestaña */
  .proc-tab::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .proc-num,
  .proc-panel,
  .proc-tab,
  .proc-tab-dot,
  .proc-rail-fill,
  .proc-tab::after,
  .proc-num::before {
    transition: none;
  }
  .proc-hint {
    display: none;
  }
  .proc-hint-chev {
    animation: none;
  }
}