/* ============================================================
   KROMA — refinamientos de feedback
   · timeline dinámico en "Cómo trabajamos"
   · más espacio + índices + aparición individual en Eventos
   · "Sobre nosotros" en formato manifiesto
   ============================================================ */

/* ---------- CÓMO TRABAJAMOS · timeline cronológico ---------- */
.process { position: relative; padding-top: 40px; }
/* la pista horizontal y su relleno (avanza con el scroll) */
.process__track {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--line);
  overflow: hidden; border-radius: 2px;
}
.process__fill {
  display: block; height: 100%; width: var(--pfill, 0%);
  background: linear-gradient(90deg, var(--green-deep), var(--green) 60%, var(--green-bright));
  box-shadow: 0 0 14px color-mix(in oklab, var(--green) 60%, transparent);
  transition: width .15s linear;
}
/* quita el borde superior antiguo de cada step (lo sustituye la pista) */
.process .step { border-top: 0; padding-top: 30px; }
/* punto en la línea de tiempo, por paso */
.step-dot {
  position: absolute; top: -5px; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--ink-3);
  transition: background .4s, border-color .4s, box-shadow .4s, transform .4s;
}
/* entrada lateral, escalonada y ligada al scroll (.lit) */
.process .step {
  opacity: 0; transform: translateX(-34px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.process .step.lit { opacity: 1; transform: none; }
.process .step.lit .step-dot {
  background: var(--sc, var(--green)); border-color: var(--sc, var(--green));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc, var(--green)) 25%, transparent);
  transform: scale(1.15);
}
.process .step.lit .step-n { -webkit-text-stroke-color: var(--sc, var(--green)); }
@media (prefers-reduced-motion: reduce) {
  .process .step { opacity: 1; transform: none; }
}
/* neutraliza el segmento antiguo del paso */
.process .step::before { display: none; }
/* en pantallas estrechas la línea de tiempo se simplifica */
@media (max-width: 860px) {
  .process__track { display: none; }
  .process .step { border-top: 0; }
  .step-dot {
    top: 0; width: 10px; height: 10px;
  }
  .process .step { padding-left: 22px; padding-top: 4px; }
  .step-dot { left: 0; top: 4px; }
}

/* ---------- EVENTOS · más espacio + cambio real + índices ---------- */
.events-sec {
  padding-top: clamp(96px, 15vw, 200px);
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in oklab, var(--green) 7%, transparent), transparent 60%),
    var(--bg);
}
.events-count { color: var(--green); }
.events-head { margin-bottom: clamp(48px, 7vw, 88px); }
.cases { gap: clamp(36px, 6vw, 80px); }
/* índice grande por caso */
.case__idx {
  position: absolute; top: clamp(22px, 3vw, 40px); right: clamp(24px, 4vw, 48px);
  z-index: 6;
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--ink); opacity: 0.55;
  letter-spacing: 0.05em;
}
.case--light .case__idx { color: #1a140a; }
/* aparición individual: cada caso entra por sí mismo (ya con [data-reveal]),
   reforzamos el desplazamiento para que se note el "uno a uno" */
.case[data-reveal] { transform: translateY(90px) scale(.97); }
.cases .case:nth-child(2), .cases .case:nth-child(3) { transition-delay: 0s; }

/* ---------- SECCIÓN CON ESCENA DE FONDO (Qué hacemos) ---------- */
.section--scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* el padding sube un poco para dar aire a la transición superior */
  padding-top: clamp(96px, 14vw, 180px);
}
.section--scene > .wrap { position: relative; z-index: 2; }
.section--scene .section__bg { position: absolute; inset: 0; z-index: 0; }
/* veil propio más oscuro para mantener legibilidad del texto y las tarjetas */
.section--scene .section__bg .scene__veil {
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(13,13,13,.62) 26%, rgba(13,13,13,.62) 74%, var(--bg) 100%),
    radial-gradient(120% 80% at 50% 45%, transparent 30%, rgba(13,13,13,.55) 100%);
}
/* transición natural: fundido a fondo de página arriba y abajo */
.section--scene::before,
.section--scene::after {
  content: ""; position: absolute; left: 0; right: 0; height: clamp(120px, 18vh, 200px);
  z-index: 1; pointer-events: none;
}
.section--scene::before { top: 0;    background: linear-gradient(to bottom, var(--bg), transparent); }
.section--scene::after  { bottom: 0; background: linear-gradient(to top,    var(--bg), transparent); }
/* las tarjetas de servicios, ligeramente translúcidas para que respire la escena */
.section--scene .services { background: color-mix(in oklab, var(--bg-1) 92%, transparent); }
.section--scene .service { background: transparent; }
.section--scene .service:hover { background: rgba(255,255,255,0.04); }

/* ---------- SOBRE NOSOTROS · manifiesto (un solo tamaño de texto) ---------- */
.about-head { max-width: 820px; }
.about-manifesto {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
/* TODO el cuerpo del manifiesto: un único tamaño */
.about-manifesto p {
  color: var(--ink-2);
  font-size: clamp(1.1rem, 1.55vw, 1.32rem);
  line-height: 1.6;
  letter-spacing: -0.005em;
}
.about-manifesto p + p { margin-top: 1.4rem; }
.about-manifesto .grn { color: var(--green); font-weight: 600; }
/* el cierre mantiene el MISMO tamaño, sólo resalta por color/peso */
.am-sign {
  color: var(--ink) !important;
  font-weight: 700;
  margin-top: 1.6rem !important;
}
.am-sign .chroma { font-weight: 700; }
.about-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: clamp(48px, 7vw, 88px);
}
.about-facts .fact { flex-direction: column; align-items: flex-start; gap: 8px; }
.about-facts .fact .big { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
@media (max-width: 820px) { .about-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .about-facts { grid-template-columns: 1fr; } }