/* piel.css — piel de la 26 para el onboarding (copia de ../onboarding-dividida.css, la de las opciones D–F). El paso 2 (elegir la
 * propiedad) se queda exactamente como antes, por pedido de Jaime: aquí nada toca .step[data-step="1"].
 * Origen: la misma pantalla dividida del onboarding actual
 * (chat a la izquierda, «Lo que ves tú» a la derecha; mismas posiciones y tamaños) con el lenguaje de la landing 26:
 * titulares Inter Tight 900, renglones sobre líneas, el punto de la bitácora, gris en vez de lila y Gu con el borde que gira.
 * Carga después de onboarding.css y ../luz.css. */
:root { --bg: var(--k0a0b0d); --fill: var(--k0d0e10);
  --conico: conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1)); }

/* barra como la de la landing (sin encogerse) */
.top { flex: none; height: 64px; background: var(--k0a0b0d-8); }
.top-logo { height: 18px; opacity: .9; }
.link-s { font-size: 13.5px; }

/* titulares de la 26, en su mismo lugar */
.step:not([data-step="1"]) h1 { font-weight: 900; font-size: clamp(28px, 2.9vw, 38px); line-height: 1.02; letter-spacing: -.045em; }
.step:not([data-step="1"]) .sub { margin-top: 10px; font-size: 15.5px; color: var(--ka9adb6); }
.demo { margin-top: 28px; }
.mono { font-family: var(--sans); font-size: 13px; letter-spacing: 0; color: var(--muted); }

/* progreso: tramos de línea; el actual con la luz */
.dashes { gap: 6px; }
.dashes button { width: 20px; height: 1px; border-radius: 0; background: var(--line2); }
.dashes button::before { content: ""; display: block; height: 16px; margin-top: -8px; }
.dashes button[aria-current="step"] { width: 40px; background: linear-gradient(90deg, rgb(var(--t1) / .25), var(--b1) 60%, var(--b2)); box-shadow: 0 0 8px rgb(var(--t1) / .8); }

/* ---------- burbujas: el cliente en gris, Gu con borde gris tenue (monocromo, sin lila) ---------- */
.msg.them { background: var(--k1c1d21); border-color: transparent; }
.msg.gu { border: 1px solid var(--kffffff-14); background: var(--k0f1013); animation: msg .38s var(--ease) both; }
.typing, .typing.them { background: var(--k17181b); }
.chat-live .msg.them { background: var(--k26272c); color: var(--fg); border: 0; }
.chat-live .msg.gu { background: var(--k0f1013); border: 1px solid var(--kffffff-14); }
.msg .pc span { color: var(--kc9ccd1); }

/* ---------- lo que ves tú: renglones con el punto de la bitácora ---------- */
.feed li { position: relative; grid-template-columns: 18px 1fr; }
.feed li > .luz-l { bottom: -1px; animation: barreUna 1.3s cubic-bezier(.4, 0, .2, 1) both; }
.ck, .feed li.ok .ck, .feed li.acc .ck { width: 9px; height: 9px; margin: 6px 0 0 3px; border: 0; background: var(--fg); box-shadow: 0 0 0 4px rgb(var(--t1) / .22); }
.ck svg { display: none; }
.feed li.acc .ck { background: var(--conico); animation: giraBorde 4s linear infinite; box-shadow: 0 0 0 4px rgb(var(--t1) / .3), 0 0 12px rgb(var(--t1) / .7); }
.feed b { font-family: var(--disp); font-size: 15px; font-weight: 800; letter-spacing: -.015em; }
.chip { font-family: var(--sans); font-size: 12px; color: var(--kc9ccd1); border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; padding: 0 0 1px; margin-right: 6px; }
.bar s { height: 1px; }
.bar.best s { box-shadow: 0 0 8px rgb(var(--t1) / .6); }
.bar em, .ahorro { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.bar.best em { color: var(--fg); background: none; -webkit-background-clip: border-box; background-clip: border-box; }

/* ---------- paso 2 ---------- */
.prop-chip span { font-family: var(--sans); }
.rol-k { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--kc9c6f2); }
.rol-k::before { background: linear-gradient(90deg, var(--b1), var(--b2)); box-shadow: 0 0 6px rgb(var(--t1) / .8); }
.datos input { background: none; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; padding: 8px 0; }
.datos input:focus { border-bottom-color: var(--b1); box-shadow: 0 1px 0 var(--b1); }
.send { background: var(--fg); }

@media (prefers-reduced-motion: reduce) { .msg.gu, .feed li.acc .ck { animation: none !important; } }