/* ══════════════════════════════════════════════════════════════════════════
   EL CAPÍTULO EN TRES PASOS · /know-how
   TODO acotado bajo el prefijo `khc-`. El sitio ya tiene `.point`, `.points` y
   `.kicker` propios: sin prefijo, esto los pisaría (precedente medido en este
   repo: la hoja del producto cambiaba el body a 14px y el gap del nav de 30 a 4).

   Los tres pasos son pestañas seleccionables. El que no está elegido NO se apaga
   solo con opacidad —eso deja un texto fantasma sin contraste—: se hunde, con
   fondo más oscuro, borde más tenue y tinta apagada. Y la marca de «estás aquí»
   es una barra, no un color, para que se vea sin depender de él.
   ══════════════════════════════════════════════════════════════════════════ */

.khc{ --khc-ez:cubic-bezier(.2,0,0,1); margin:clamp(28px,4vw,44px) 0 0; }

/* ── las tres pestañas ── */
.khc-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.khc-paso{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:22px 22px 24px;text-align:left;cursor:pointer;min-width:0;
  background:#0a0d10;border:1px solid var(--border,#20262e);border-radius:16px;
  color:#5b656f;font:inherit;font-size:14px;line-height:1.5;
  transition:background-color .28s var(--khc-ez),border-color .28s var(--khc-ez),
             color .28s var(--khc-ez),transform .28s var(--khc-ez);
}
.khc-paso .khc-n{font-family:var(--display,'Inter Tight',sans-serif);font-weight:600;
  font-size:12px;letter-spacing:.16em;color:#79838f;transition:color .28s var(--khc-ez)}
.khc-paso .khc-t{font-family:var(--display,'Inter Tight',sans-serif);font-weight:600;
  font-size:clamp(17px,1.5vw,20px);letter-spacing:-.025em;color:#a9b4c0;
  transition:color .28s var(--khc-ez)}
.khc-paso p{margin:0;color:inherit}
.khc-paso:hover{border-color:#2b333c;transform:translateY(-2px)}
.khc-paso[aria-selected="true"]{background:#0d1014;border-color:#3a4552;color:#a9b4c0;
  transform:none}
.khc-paso[aria-selected="true"] .khc-n{color:var(--warn,#e8b53b)}
.khc-paso[aria-selected="true"] .khc-t{color:var(--text,#eef2f7)}
.khc-paso::after{content:'';position:absolute;left:22px;right:22px;bottom:0;height:2px;
  border-radius:2px 2px 0 0;background:var(--warn,#e8b53b);transform:scaleX(0);
  transform-origin:left center;transition:transform .32s var(--khc-ez)}
.khc-paso[aria-selected="true"]::after{transform:scaleX(1)}
.khc-paso:focus-visible{outline:2px solid var(--brand,#4f8cff);outline-offset:3px}

/* ── los paneles ── */
.khc-panel{margin:24px 0 0}
.khc-panel[hidden]{display:none}
/* La hoja de cálculo necesita alto: con 780 px se veían siete filas y los
   gráficos quedaban cortados por abajo. */
.khc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;margin:0}
.khc-marco{position:relative;width:100%;height:clamp(560px,calc(100vh - 90px),960px);
  border-radius:14px;overflow:hidden;background:#0d1014;border:1px solid var(--border,#20262e)}
.khc-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* El sistema del paso 03 llenaba 670 px dentro de un marco de 810: al venir del
   paso 02 —donde el mismo ERP mide 744— la caja daba un salto de 74 px justo en
   el cambio de pestaña. Aquí manda el marco, como en los otros dos paneles. */
#khc-panel-3 .khd.khd--decision{width:100%;height:100%;min-height:0;border-radius:0;
  box-shadow:none}
.khc-nota{margin:11px 0 0;font-size:12px;color:#79838f}
.khc-vacio{display:grid;place-items:center;height:100%;padding:40px;text-align:center;
  color:#79838f;font-size:14px}
.khc-vacio span{max-width:52ch}

/* ── LA TIRA: los tres pasos, DESDE la animación ─────────────────────────────
   Una vez estás mirando la escena, las tarjetas quedan 175 px por encima y hay
   que subir para cambiar de paso. La tira los trae aquí.

   ⛔ NO puede ocupar alto. El marco mide `100vh - 90px`: a 1440x900 sobran 90 px
   en TODA la ventana, así que cualquier barra en flujo se come el aire y deja la
   escena pegada a los bordes. Va `absolute` dentro del marco —que ya es
   `relative` y `overflow:hidden`— y por eso no cuesta ni un píxel de animación
   ni obliga a re-encajar el iframe.

   ⛔ Y NO es un desplegable, aunque «pop up» fuera la palabra. Los clics dentro
   de un iframe NO llegan al documento padre y `Escape` con el foco dentro
   tampoco cruza esa frontera: un menú abierto sobre la escena no se podría
   cerrar ni pulsando fuera ni con teclado. Sin estado abierto/cerrado, ese fallo
   no existe — y además se ven los tres de un vistazo, que es lo que se pidió.

   ESQUINA INFERIOR DERECHA, y es la única de las cuatro que sirve en las tres
   escenas: arriba (izq. y der.) vive la franja de texto, que es la protagonista
   del fotograma; abajo a la izquierda, el acto final del paso 02 pone el rail
   oscuro del ERP y una pastilla oscura sobre fondo oscuro no separa. */
.khc-tira{position:absolute;right:20px;bottom:var(--khc-tira-b,46px);z-index:5;
  display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;
  background:#141a21;border:1px solid #626d7c;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.85)}
.khc-tira-b{position:relative;display:flex;align-items:center;gap:8px;
  min-height:34px;padding:0 12px;border:0;border-radius:999px;background:transparent;
  font:inherit;color:#79838f;cursor:pointer;
  transition:color .2s var(--khc-ez),background-color .2s var(--khc-ez)}
.khc-tira-b i{font-style:normal;font-family:var(--display,'Inter Tight',sans-serif);
  font-weight:600;font-size:12px;letter-spacing:.14em;font-variant-numeric:tabular-nums}
/* El título solo lo lleva el paso activo: con los tres escritos la tira medía
   ~600 px, media anchura del marco. Los otros dos van por su número, y su nombre
   completo sigue en el `aria-label` (lector de pantalla) y en el `title` (globo
   del navegador). No se revela al pasar por encima a propósito: mostrarlo
   ensancharía la tira bajo el cursor y le movería el suelo a los otros dos. */
.khc-tira-b b{display:none;font-family:var(--display,'Inter Tight',sans-serif);font-weight:600;
  font-size:13.5px;letter-spacing:-.01em;color:var(--text,#eef2f7);white-space:nowrap}
.khc-tira-b[aria-current] b{display:inline}
.khc-tira-b:hover{color:#a9b4c0;background:#1a2129}
.khc-tira-b[aria-current]{color:#eef2f7;background:#1d252e}
.khc-tira-b[aria-current] i{color:var(--warn,#e8b53b)}
/* La marca de «estás aquí» es una BARRA, no un color — la misma frase visual que
   ya usa `.khc-paso::after`, y la misma razón: que se vea sin depender del tono. */
.khc-tira-b[aria-current]::after{content:'';position:absolute;left:12px;right:12px;
  bottom:3px;height:2px;border-radius:2px;background:var(--warn,#e8b53b)}
.khc-tira-b:focus-visible{outline:2px solid var(--brand,#4f8cff);outline-offset:-2px}

@media (max-width:820px){
  /* En móvil no. La escena mide 348 px de ancho y la tira se llevaría un tercio;
     además las tarjetas están apiladas justo encima, a un golpe de dedo. */
  .khc-tira{display:none}
  .khc-pasos{grid-template-columns:1fr;gap:10px}
  .khc-paso{padding:16px 18px 18px}
  .khc-paso::after{left:18px;right:18px}
  .khc-marco{height:auto;aspect-ratio:3/4.6}
  /* El paso 02 es una COLUMNA: seis nodos apilados con su ficha debajo. En el
     marco de 3/4.6 no le cabía ni un acto y había que encogerlo al 0,82, o sea
     texto de 11,5 px. Va a sangre y con la altura que pide su composición. */
  #khc-panel-2 .khc-marco{aspect-ratio:auto;height:min(92vh,780px);
    margin-inline:calc(-1 * var(--gutter,20px));width:auto;border-radius:0;
    border-left:0;border-right:0}
}
@media (max-width:520px){ .khc-marco{height:auto;aspect-ratio:9/13.6}
  #khc-panel-2 .khc-marco{aspect-ratio:auto;height:min(92vh,780px)} }

/* ── EL STORYBOARD: el vehículo del móvil (y el fallback sin JS) ──────────
   En escritorio no existe; en móvil sustituye a la escena viva. Cada figura es
   el fotograma FINAL de su cue —el resultado, como los endframes de Apple— con
   su frase encima. El scroll, única interacción garantizada, gobierna todo. */
.khc-sb{display:none}
.khc-sb-fig{margin:0 0 22px;border:1px solid var(--linea,#20262e);border-radius:14px;
  overflow:hidden;background:#0d1014}
.khc-sb-fig img{display:block;width:100%;height:auto}
.khc-sb-fig figcaption{padding:14px 16px 12px;font-family:var(--display,'Inter Tight',sans-serif);
  font-weight:400;font-size:17px;line-height:1.3;letter-spacing:-.02em;color:#fffce1}
.khc-sb-fig figcaption i{font-style:normal;display:block;font-size:11px;font-weight:600;
  letter-spacing:.14em;color:#79838f;margin:0 0 6px}
@media (max-width:820px){
  .khc-marco--historia,.khc-marco--historia+.khc-nota{display:none}
  .khc-sb{display:block;margin-top:18px}
}
html:not(.js) .khc-marco--historia{display:none}
html:not(.js) .khc-sb{display:block}

/* Sin JavaScript los tres paneles se ven seguidos: nada queda escondido tras una
   pestaña que no se puede pulsar. */
html:not(.js) .khc-panel[hidden]{display:block}
html:not(.js) .khc-pasos [role="tab"]{cursor:default}
@media (prefers-reduced-motion:reduce){ .khc-paso,.khc-paso::after{transition:none} }