@font-face{font-family:"Inter Tight";src:url("/static/fonts/inter-tight-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* El launcher vive en el documento padre: recibe las 15 bolas reales de la escena 04.
   El iframe de detalle v5.5 toma el relevo cuando se abre un módulo. */
/* v5.5: una vez aterrizan las bolas, el árbol que contiene el iframe queda totalmente
   plano. Conservamos la coreografía 3D durante el montaje, pero nunca rasterizamos texto
   bajo matrices/perspectiva en el estado de producto. */
html.kh-dash-flat .kh-capitulo.kh-activo .kh-panel--34{
  top:0;height:100vh;transform:none!important;will-change:auto!important
}
html.kh-dash-flat .kh-capitulo.kh-activo .kh-dash-cell{
  top:0;bottom:0;height:auto;transform:none!important;perspective:none!important;will-change:auto!important
}
html.kh-dash-flat #khDash,
html.kh-dash-flat #khDecisionStage{
  transform:none!important;perspective:none!important;will-change:auto!important
}
/* El escenario lo ancla ScrollTrigger como `position:fixed` con un `left` calculado desde la
   VENTANA. Pero #khCapitulo conserva un transform identidad —residuo del pin: no mueve nada,
   y aun así cualquier transform convierte al elemento en bloque contenedor de los `fixed` que
   lleva dentro—, así que ese `left` pasa a contarse desde el capítulo, que YA está centrado.
   El centrado se aplicaba dos veces y el panel aparecía empujado media columna a la derecha
   (medido a 1832: left 318,5 + capítulo en 319 = 637, con el centro en 1227 y no en 916).
   Se ata a su columna en vez de quitarle el transform al elemento anclado, que es justo lo que
   sostiene el pin: así vale para cualquier ancho y no se toca la coreografía. */
html.kh-dash-flat .kh-capitulo.kh-activo .kh-escenario{
  left:0!important;right:0!important;width:auto!important
}
/* El lanzador es la superficie donde ATERRIZAN las 15 bolas y, acto seguido, entrega el paso al
   tablero que vive en el iframe. Por eso lleva el lenguaje del tablero y no uno propio: si el
   aterrizaje fuera de otra familia, el relevo se leería como dos productos distintos pegados.
   Obsidiana + ámbar, los mismos valores que el rail del tablero. */
.khd.khd--decision{
  --khl-ink:#eef2f0;--khl-muted:#93a29d;
  --khl-obs:#12181a;--khl-obs-2:#1e2729;--khl-linea:#2b3537;
  /* UN acento, no seis. Seis baldosas con seis colores saturados son seis Von Restorff a la vez,
     y dos destacados ya se anulan entre sí (11-PLAYBOOK §jerarquía de acento). El ámbar queda
     reservado a lo que de verdad abre algo. */
  --khl-acento:#e8b53b;--khl-acento-tx:#12181a;
  --khl-ease:cubic-bezier(.22,1,.36,1);
  width:min(1180px,100%);height:min(670px,80vh);min-height:480px;padding:0;overflow:hidden;
  position:relative;transform-style:flat;border:0;border-radius:24px;color:var(--khl-ink);
  font-family:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--khl-obs);box-shadow:0 42px 110px -42px rgba(0,0,0,.86)
}
.khd--decision *{box-sizing:border-box}
.khd--decision button,.khd--decision input{font:inherit;color:inherit}
.khd--decision button{border:0;background:none;cursor:pointer}
.khd--decision svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.khd--decision :focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(232,181,59,.55)}
.khd--decision.is-ghost{background:var(--khl-obs)}

/* Atmósfera con propósito: UNA aura, y del ámbar de la casa. Tres auroras de tres familias
   (violeta + azul + cian) eran decoración compitiendo con el contenido; aquí la luz viene de
   abajo, que es de donde emerge el panel, y deja el centro limpio para el aterrizaje. */
.khl-launcher{
  position:absolute;inset:0;overflow:hidden;color:var(--khl-ink);
  background:
    radial-gradient(900px 520px at 50% 118%,rgba(232,181,59,.17),transparent 64%),
    radial-gradient(680px 420px at 8% 4%,rgba(232,181,59,.06),transparent 62%),
    linear-gradient(145deg,#12181a 0%,#161d1f 54%,#1b2426 100%)
}
.khl-launcher::before{
  content:"";position:absolute;inset:0;opacity:.24;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent)
}
.khl-launcher[hidden],.khd-decision-frame[hidden]{display:none!important}

.khl-launch-top{
  height:76px;padding:0 32px;display:flex;align-items:center;position:relative;z-index:2;
  border-bottom:1px solid rgba(255,255,255,.09)
}
.khl-launch-brand{display:flex;align-items:center;gap:11px;font-family:"Inter Tight",ui-sans-serif,system-ui,sans-serif;font-size:15px;font-weight:680;letter-spacing:-.02em}
/* El único relleno macizo de ámbar de la pantalla: la marca. Un solo Von Restorff. */
.khl-launch-brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--khl-acento);color:var(--khl-acento-tx);box-shadow:0 14px 30px -13px rgba(232,181,59,.45)}
.khl-launch-brand-mark svg{width:18px;height:18px;stroke-width:2}
.khl-launch-space{flex:1}
.khl-launch-sandbox{height:34px;padding:0 13px;border:1px solid var(--khl-linea);border-radius:999px;color:var(--khl-muted);background:var(--khl-obs-2);backdrop-filter:blur(14px)}
.khl-launch-sandbox>.khd-live{height:100%;display:flex;flex-direction:row;align-items:center;gap:8px;font-size:11.5px}
.khl-launch-sandbox i{width:7px;height:7px;border-radius:50%;background:#5fe0ac;box-shadow:0 0 0 5px rgba(95,224,172,.09)}
.khl-launch-avatar{width:34px;height:34px;margin-left:10px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:750;color:var(--khl-ink);background:var(--khl-obs-2);box-shadow:0 0 0 1px var(--khl-linea)}

.khl-launch-center{position:absolute;inset:76px 0 0;display:grid;place-items:center;padding-bottom:35px}
.khl-launch-inner{width:min(930px,88%);text-align:center}
.khl-launch-overline{font-size:10px;letter-spacing:.18em;color:var(--khl-muted);text-transform:uppercase;font-weight:720}
.khl-launch-title{margin:7px 0 36px;font-family:"Inter Tight",ui-sans-serif,system-ui,sans-serif;font-size:29px;line-height:32px;letter-spacing:-.04em;font-weight:620;color:var(--khl-ink)}
.khl-launch-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:28px;align-items:start}
.khl-launch-app{min-width:0;color:#fff;position:relative;padding:6px 2px 12px;border-radius:20px;text-align:center}
.khl-launch-app>.khd-live{display:flex;flex-direction:column;align-items:center;gap:13px}
.khl-launch-app::after{content:"";position:absolute;left:50%;bottom:0;width:34px;height:2px;border-radius:99px;background:var(--khl-acento);transform:translateX(-50%) scaleX(0);transition:transform .35s var(--khl-ease)}
.khl-launch-app:hover::after,.khl-launch-app:focus-visible::after{transform:translateX(-50%) scaleX(1)}
/* Baldosa = superficie, no color. El brillo interior blanco de antes leía a plástico sobre
   oscuro; aquí la separación la da la línea, como en el tablero. */
.khl-app-icon{width:86px;height:86px;border-radius:24px;display:grid;place-items:center;color:var(--khl-ink);background:var(--khl-obs-2);position:relative;isolation:isolate;box-shadow:0 26px 40px -23px rgba(0,0,0,.75),inset 0 0 0 1px var(--khl-linea);transition:transform .22s var(--khl-ease),box-shadow .22s var(--khl-ease)}
.khl-launch-app:hover .khl-app-icon{transform:translateY(-4px) scale(1.02);box-shadow:0 30px 42px -25px rgba(0,0,0,.78),inset 0 0 0 1px var(--khl-acento)}
.khl-launch-app:active .khl-app-icon{transform:translateY(0) scale(.98)}
.khl-app-icon svg{width:36px;height:36px;stroke-width:1.65}
.khl-app-label{font-family:"Inter Tight",ui-sans-serif,system-ui,sans-serif;font-size:13px;font-weight:570;letter-spacing:-.01em;color:var(--khl-ink)}
/* Los cuatro módulos que el tablero SIMULA llevan el ámbar; Compras y Atención existen en el
   sistema pero aquí no se simulan, y se dicen en gris en vez de fingir que están hechos. El
   alcance se enseña con la estructura, no con un párrafo que se disculpe. */
.khl-launch-app--direction .khl-app-icon,
.khl-launch-app--sales .khl-app-icon,
.khl-launch-app--products .khl-app-icon,
.khl-launch-app--inventory .khl-app-icon{color:var(--khl-acento)}
.khl-launch-app--purchasing .khl-app-icon,
.khl-launch-app--service .khl-app-icon{color:var(--khl-muted)}
.khl-launch-app--purchasing .khl-app-label,
.khl-launch-app--service .khl-app-label{color:var(--khl-muted)}

.khl-launch-command{margin:43px auto 0;width:280px;height:42px;border:1px solid rgba(255,255,255,.13);border-radius:13px;display:block;color:#bfc5e1;background:rgba(255,255,255,.065);backdrop-filter:blur(15px)}
.khl-launch-command>.khd-live{width:100%;height:100%;display:flex;flex-direction:row;align-items:center;padding:0 13px;gap:9px}
.khl-launch-command svg{width:15px;height:15px;flex:none}
.khl-launch-command input{min-width:0;flex:1;border:0;outline:0;background:transparent;font-size:11.5px}
.khl-launch-command input::placeholder{color:#bfc5e1;opacity:1}
.khl-launch-command kbd{margin-left:auto;padding:3px 6px;border:1px solid rgba(255,255,255,.13);border-radius:6px;font-family:inherit;font-size:10px;font-weight:500;color:#d7daea}
.khl-launch-command:focus-within{border-color:rgba(255,255,255,.32);box-shadow:0 0 0 3px rgba(70,88,255,.34)}
.khl-launch-app[aria-hidden="true"]{display:none}

.khd-decision-frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;border-radius:inherit;background:#050608}
.khd--decision.is-detail .khl-launcher{pointer-events:none}

@media(max-width:1099px){
  .khd.khd--decision{height:clamp(480px,62vw,600px);min-height:0}
  .khl-launch-center{padding-bottom:18px}
  .khl-launch-title{margin-bottom:25px}
  .khl-launch-grid{gap:15px}
  .khl-app-icon{width:70px;height:70px;border-radius:20px}
  .khl-launch-command{margin-top:30px}
}
@media(max-width:760px){
  .khd.khd--decision{height:clamp(430px,120vw,500px);min-height:0;border-radius:14px}
  .khl-launch-top{height:58px;padding:0 14px}
  .khl-launch-sandbox{font-size:0;width:34px;padding:0}
  .khl-launch-sandbox>.khd-live{justify-content:center;font-size:0}
  .khl-launch-avatar{display:none}
  .khl-launch-center{inset:58px 0 0;padding:0 12px}
  .khl-launch-title{font-size:22px;line-height:24px;margin:4px 0 17px}
  .khl-launch-grid{grid-template-columns:repeat(3,1fr);gap:13px 8px}
  .khl-app-icon{width:58px;height:58px;border-radius:17px}
  .khl-app-icon svg{width:26px;height:26px}
  .khl-app-label{font-size:10px}
  .khl-launch-command{margin-top:19px;width:230px;height:36px}
}
@media(prefers-reduced-motion:reduce){
  .khl-launch-app::after,.khl-app-icon{transition:none!important}
}


/* v5.5 en primer plano: los seis módulos ocupan el viewport inicial y el
   relato Know How existente continúa debajo con scroll normal de página. */
.kh-product-first{
  width:100%;height:calc(100svh - 64px);min-height:560px;padding:clamp(10px,1.7vw,24px);
  position:relative;overflow:hidden;background:#050816;display:grid;place-items:center
}
.kh-product-first-frame{
  display:block;width:min(1500px,100%);height:min(780px,100%);border:0;border-radius:clamp(16px,2vw,28px);
  overflow:hidden;background:var(--khl-obs);box-shadow:0 42px 110px -42px rgba(0,0,0,.86)
}

/* Las seis baldosas del launcher narrativo conservan la firma lenta de v5.5. */
.khl-app-icon{
  transition:transform 1.22s cubic-bezier(.22,1,.36,1),filter 1.05s ease,box-shadow 1.05s ease
}
.khl-launch-app--direction:is(:hover,:focus-visible) .khl-app-icon{transform:scale(1.065)}
.khl-launch-app--sales:is(:hover,:focus-visible) .khl-app-icon{transform:translate(8px,-8px) scale(1.02)}
.khl-launch-app--products:is(:hover,:focus-visible) .khl-app-icon{transform:rotateY(-4deg) rotateX(2deg) scale(1.035)}
.khl-launch-app--inventory:is(:hover,:focus-visible) .khl-app-icon{transform:translateX(-11px)}
.khl-launch-app--purchasing:is(:hover,:focus-visible) .khl-app-icon{transform:translateY(3px) scale(1.02)}
.khl-launch-app--service:is(:hover,:focus-visible) .khl-app-icon{
  transform:translateX(5px) scaleX(1.055);transform-origin:25% 70%
}
@media(max-width:760px){
  .kh-product-first{height:calc(100svh - 64px);min-height:500px;padding:8px}
  .kh-product-first-frame{border-radius:16px}
}
@media(prefers-reduced-motion:reduce){
  .khl-app-icon{transition:none!important}
}