/* ==========================================================================
   Kairos Factory — PAGINA NOSOTROS  (/nosotros/)
   Se carga solo en la plantilla page-nosotros.php, encadenada despues de
   landing.css: de alli salen .kf-wrap, .kf-sec, .kf-btn, .kf-badge, .kf-cta,
   .kf-eyebrow y la tipografia de .kf-landing.

   Comparte con mayoreo.css tres piezas que ya estaban resueltas alli y que no
   tiene sentido reescribir: .kf-nota, .kf-centro y .kf-wrap--angosto. Se
   redefinen aqui de forma identica para que la pagina no dependa de que
   mayoreo.css este encolado (no lo esta).
   ========================================================================== */

.kf-nos { display: block; }

/* Piezas compartidas con /mayoreo/ (ver cabecera) --------------------------- */
.kf-wrap--angosto { max-width: 820px; }
.kf-centro { text-align: center; margin-top: 34px; }
.kf-nota {
  margin-top: 22px;
  font-size: 14.5px;
  color: var(--kf-muted);
  text-align: center;
  line-height: 1.6;
}
.kf-nota a { color: var(--kf-primary); }

/* --- Portada ------------------------------------------------------------- */
.kf-nos__hero {
  background: linear-gradient(160deg, var(--kf-lavender) 0%, var(--kf-sky) 100%);
  padding: 62px 0 70px;
}
.kf-nos__hero-in {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  align-items: center;
}
.kf-nos__hero h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 800;
}
.kf-nos__hero h1 em { font-style: normal; color: var(--kf-primary); }
.kf-nos__lead {
  font-size: 18px;
  line-height: 1.62;
  color: var(--kf-text-2);
  margin-top: 18px;
  max-width: 34em;
}
.kf-nos__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Cifras: rejilla 2x2 en vez de fila, porque son cuatro y dos llevan una
   etiqueta larga que en una sola linea obligaria a encogerlas. */
.kf-nos__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.kf-nos__chips li {
  background: rgba(255,255,255,.74);
  border: 1px solid var(--kf-border);
  border-radius: 18px;
  padding: 16px 18px;
}
.kf-nos__chips b {
  display: block;
  font-family: var(--kf-font-head);
  font-size: 20px;
  font-weight: 800;
  color: var(--kf-primary-dark);
  line-height: 1.15;
}
.kf-nos__chips span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--kf-text-2);
}

/* --- El flujo de la cadena ------------------------------------------------
   Los dos recorridos van APILADOS y sobre la MISMA rejilla de 6 columnas. El
   corto solo tiene 3 nodos, asi que ocupa la mitad del ancho: la frase "la
   cadena es mas corta" pasa a verse, no solo a leerse. Puestos en dos columnas
   lado a lado, esa diferencia de longitud se perdia por completo.

   FAIL-VISIBLE. El estado por defecto es el FINAL: sellos visibles, todo
   legible. La clase .esta-animado (la pone nosotros.js al entrar en pantalla)
   solo AGREGA movimiento. Si el JS no corre, no se rompe nada — al reves de
   gsap.from(), que arranca en opacidad 0 y dejo el hero invisible en su dia.
   -------------------------------------------------------------------------- */
.kf-flujo { display: grid; gap: 18px; }

.kf-via {
  background: var(--kf-surface-soft);
  border: 1px solid var(--kf-border-card);
  border-radius: 26px;
  padding: 26px 30px 24px;
}
/* El recorrido propio se destaca: es el que el visitante debe recordar. */
.kf-via--corta {
  background: linear-gradient(120deg, var(--kf-lavender), var(--kf-sky));
  border-color: transparent;
}

.kf-via__cab {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.kf-via__cab h3 { font-size: 18px; font-weight: 800; }
.kf-via__pasos {
  font-family: var(--kf-font-head);
  font-weight: 700;
  font-size: 12.5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--kf-muted);
}
.kf-via__pasos--bien { color: var(--kf-success); background: var(--kf-success-bg); }

.kf-via__ruta { position: relative; padding: 6px 0 4px; }

.kf-via__nodos {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Seis columnas en AMBOS recorridos: es lo que hace que el corto mida la
     mitad. Si cada uno usara su propio numero de columnas, los dos ocuparian
     todo el ancho y el argumento visual desapareceria. */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.kf-nodo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 34px; /* deja sitio al sello encima */
}
/* Riel entre discos: del centro del nodo anterior al centro de este. */
.kf-nodo + .kf-nodo::before {
  content: "";
  position: absolute;
  top: 57px;
  left: -50%;
  right: 50%;
  height: 3px;
  background: var(--kf-border);
  z-index: 0;
}
.kf-via--corta .kf-nodo + .kf-nodo::before { background: rgba(255,255,255,.85); }

.kf-nodo__disco {
  position: relative;
  z-index: 2;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 21px;
  background: #fff;
  border: 2px solid var(--kf-border);
}
.kf-nodo__disco--kf { border-color: var(--kf-primary); box-shadow: 0 0 0 4px rgba(123,106,212,.16); }
.kf-nodo--fin .kf-nodo__disco { border-color: var(--kf-primary); }

.kf-nodo b {
  margin-top: 10px;
  font-family: var(--kf-font-head);
  font-size: 13px;
  line-height: 1.3;
  color: var(--kf-text-2);
  max-width: 13ch;
}
.kf-nodo--fin b { color: var(--kf-text); }

.kf-sello {
  position: absolute;
  top: 0;
  font-style: normal;
  font-family: var(--kf-font-head);
  font-weight: 700;
  font-size: 11.5px;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--kf-error-bg);
  color: var(--kf-error);
}

/* La caja que recorre el riel. Decorativa: sin JS no se ve y no falta nada. */
.kf-caja {
  position: absolute;
  top: 57px;
  left: 8.333%;
  z-index: 3;
  font-size: 22px;
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* --- Animacion (solo cuando nosotros.js marca la seccion) ----------------- */
/* Se anima `left` en porcentaje y no transform porque el recorrido depende del
   ANCHO DEL RIEL, y translateX en % se calcula sobre el propio elemento. Es un
   solo nodo y una sola pasada: el coste es irrelevante. */
@keyframes kf-viaja {
  0%        { left: 8.333%; opacity: 0; }
  8%        { opacity: 1; }
  92%       { opacity: 1; }
  100%      { left: var(--kf-fin); opacity: 0; }
}
@keyframes kf-sella {
  0%   { opacity: 0; transform: translateY(8px) scale(.7); }
  60%  { opacity: 1; transform: translateY(0) scale(1.12); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Centro del primer disco = 8,333% (mitad de 1/6). Centro del ultimo: sexto
   nodo = 91,667%; tercer nodo = 41,667%. La corta recorre menos distancia a la
   misma velocidad, asi que ademas LLEGA ANTES. */
.kf-via--larga { --kf-fin: 91.667%; --kf-dur: 3.2s; }
.kf-via--corta { --kf-fin: 41.667%; --kf-dur: 1.28s; }

.esta-animado .kf-caja {
  animation: kf-viaja var(--kf-dur) cubic-bezier(.45,.05,.55,.95) forwards;
}
/* backwards mantiene el fotograma 0 durante el retardo y, al terminar, el sello
   vuelve al estilo base (visible). Sin `forwards` no queda nada pegado. */
.esta-animado .kf-sello { animation: kf-sella .45s ease-out backwards; }
.esta-animado .kf-via--larga .kf-nodo:nth-child(2) .kf-sello { animation-delay: .64s; }
.esta-animado .kf-via--larga .kf-nodo:nth-child(3) .kf-sello { animation-delay: 1.28s; }
.esta-animado .kf-via--larga .kf-nodo:nth-child(4) .kf-sello { animation-delay: 1.92s; }
.esta-animado .kf-via--larga .kf-nodo:nth-child(5) .kf-sello { animation-delay: 2.56s; }

@media (prefers-reduced-motion: reduce) {
  .esta-animado .kf-caja,
  .esta-animado .kf-sello { animation: none; }
  .kf-caja { opacity: 0; }
}

/* --- Dos puertas --------------------------------------------------------- */
.kf-puertas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.kf-puerta {
  background: #fff;
  border: 1px solid var(--kf-border-card);
  border-radius: 26px;
  padding: 32px 30px;
  /* Columna con el boton abajo: sin esto, la tarjeta con la lista mas corta
     deja su boton a media altura y las dos dejan de leerse como pareja. */
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 32px rgba(76,44,145,.07);
}
.kf-puerta__ico {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 14px;
}
.kf-puerta h3 { font-size: 20px; font-weight: 800; }
.kf-puerta ul {
  list-style: none;
  margin: 18px 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
  flex: 1;
}
.kf-puerta li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--kf-text-2);
}
.kf-puerta li::before {
  content: "";
  position: absolute;
  left: 4px; top: 3px;
  width: 6px; height: 11px;
  border: solid var(--kf-primary);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(43deg);
}
.kf-puerta .kf-btn { align-self: flex-start; }

/* --- Las 7 reglas -------------------------------------------------------- */
.kf-reglas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: regla;
}
.kf-reglas li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--kf-border-card);
  border-radius: 18px;
  padding: 18px 22px;
}
.kf-reglas__n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--kf-lavender);
  color: var(--kf-primary-dark);
  font-family: var(--kf-font-head);
  font-weight: 800;
  font-size: 14px;
}
.kf-reglas b {
  font-family: var(--kf-font-head);
  font-size: 16.5px;
  color: var(--kf-text);
}
.kf-reglas p {
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--kf-text-2);
}

/* --- Canales ------------------------------------------------------------- */
.kf-canales {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.kf-canal {
  background: var(--kf-surface-soft);
  border: 1px solid var(--kf-border-card);
  border-radius: 24px;
  padding: 26px 24px;
  text-decoration: none;
  color: inherit;
  display: block;
  /* 44px de alto tactil minimo, como el resto del sitio. */
  min-height: 44px;
}
a.kf-canal { transition: transform .2s ease, box-shadow .2s ease; }
a.kf-canal:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(76,44,145,.10);
}
.kf-canal__ico { font-size: 26px; line-height: 1; display: block; margin-bottom: 12px; }
.kf-canal b {
  display: block;
  font-family: var(--kf-font-head);
  font-size: 16.5px;
  color: var(--kf-text);
  margin-bottom: 7px;
}
.kf-canal span {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--kf-text-2);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .kf-nos__hero-in { grid-template-columns: 1fr; }
  .kf-canales { grid-template-columns: 1fr; }
  .kf-nodo b { font-size: 12px; max-width: 11ch; }
  .kf-nodo__disco { width: 42px; height: 42px; font-size: 18px; }
  .kf-nodo + .kf-nodo::before,
  .kf-caja { top: 54px; }
}

@media (max-width: 760px) {
  .kf-nos__hero { padding: 44px 0 50px; }
  .kf-puertas { grid-template-columns: 1fr; }
  .kf-nos__chips { grid-template-columns: 1fr; }
  .kf-via { padding: 24px 20px; }
  .kf-puerta { padding: 26px 22px; }
  .kf-reglas li { padding: 16px 18px; }

  /*
   * En movil el riel se pone VERTICAL. Seis discos en fila no caben en 375 px
   * sin encoger el texto hasta lo ilegible, y encoger la fuente para salvar una
   * metafora es mal negocio. Se pierde la comparacion de longitud lado a lado,
   * pero se conserva la de numero de pasos, que es el argumento.
   */
  .kf-via__nodos { grid-template-columns: 1fr; gap: 4px; }
  .kf-nodo {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 14px;
    padding: 6px 0 6px 0;
  }
  .kf-nodo__disco { width: 38px; height: 38px; font-size: 17px; }
  .kf-nodo b { margin-top: 0; max-width: none; font-size: 14px; }
  /* Riel vertical: del disco anterior al de este nodo. */
  .kf-nodo + .kf-nodo::before {
    top: -4px;
    bottom: auto;
    left: 19px;
    right: auto;
    width: 3px;
    height: 12px;
  }
  .kf-sello {
    position: static;
    margin-left: auto;
    align-self: center;
  }
  /* La caja viajera se retira: sin riel horizontal no tiene recorrido. */
  .kf-caja { display: none; }
}