/* Blog xlatent — prosa de artículos y cards del índice (usa tokens --xl-* de brand.css) */

/* ---- Meta del artículo ---- */
.xl-artmeta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;
  font-family:var(--xl-font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--xl-text-on-dark-2)}
.xl-artmeta .cat{color:var(--xl-signal)}
.xl-langswitch{display:inline-flex;border:1px solid var(--xl-border-dark);border-radius:999px;overflow:hidden;
  font-family:var(--xl-font-mono);font-size:.72rem}
.xl-langswitch a,.xl-langswitch span{padding:.3rem .7rem;color:var(--xl-text-on-dark-2);text-decoration:none}
.xl-langswitch .on{background:var(--xl-signal);color:#0B1016;font-weight:600}

/* ---- Prosa ---- */
.xl-prose{max-width:720px;margin-inline:auto;font-size:1.02rem;line-height:1.78;color:var(--xl-text-on-dark)}
.xl-prose p{margin:1.05rem 0}
.xl-prose h2{font-size:1.4rem;line-height:1.3;margin:2.3rem 0 .7rem;color:var(--xl-text-on-dark)}
.xl-prose h3{font-size:1.12rem;margin:1.8rem 0 .5rem}
.xl-prose a{color:var(--xl-signal);text-decoration:none;border-bottom:1px solid rgba(196,245,59,.35)}
.xl-prose a:hover{border-bottom-color:var(--xl-signal)}
.xl-prose strong{color:var(--xl-text-on-dark)}
.xl-prose ul,.xl-prose ol{margin:1rem 0;padding-left:1.4rem}
.xl-prose li{margin:.45rem 0}
.xl-prose li::marker{color:var(--xl-signal)}
.xl-prose blockquote{margin:1.4rem 0;padding:.9rem 1.15rem;border-left:3px solid var(--xl-signal);
  background:var(--xl-bg-raised);border-radius:0 14px 14px 0;color:var(--xl-text-on-dark-2)}
.xl-prose blockquote p{margin:.3rem 0}

/* ---- Código ---- */
.xl-prose code{font-family:var(--xl-font-mono);font-size:.86em;background:var(--xl-bg-raised);
  border:1px solid var(--xl-border-dark);border-radius:6px;padding:.1em .35em;color:var(--xl-text-on-dark)}
.xl-prose pre{position:relative;margin:1.3rem 0;padding:1rem 1.1rem;background:#0A0F16;
  border:1px solid var(--xl-border-dark);border-radius:14px;overflow-x:auto;line-height:1.6}
.xl-prose pre code{background:none;border:none;padding:0;font-size:.83rem;color:#D5DBE5}
.xl-copybtn{position:absolute;top:.55rem;right:.55rem;font-family:var(--xl-font-mono);font-size:.66rem;
  letter-spacing:.08em;padding:.28rem .6rem;border-radius:8px;cursor:pointer;
  background:var(--xl-bg-raised);border:1px solid var(--xl-border-dark);color:var(--xl-text-on-dark-2)}
.xl-copybtn:hover{border-color:var(--xl-signal);color:var(--xl-signal)}
.xl-copybtn.ok{border-color:var(--xl-signal);color:var(--xl-signal)}

/* Pygments (codehilite) — paleta oscura mínima */
.codehilite .k,.codehilite .kd,.codehilite .kn{color:#C4F53B}
.codehilite .s,.codehilite .s1,.codehilite .s2,.codehilite .sb{color:#9ECE8C}
.codehilite .c,.codehilite .c1,.codehilite .cm{color:#5B6675;font-style:italic}
.codehilite .n,.codehilite .nv{color:#D5DBE5}
.codehilite .nb,.codehilite .nf,.codehilite .nc{color:#8AB8F0}
.codehilite .o,.codehilite .p{color:#98A2B3}
.codehilite .m,.codehilite .mi,.codehilite .mf{color:#E0B76B}

/* ---- Figuras / diagramas ---- */
.xl-figure{margin:1.7rem 0;padding:1.2rem;background:var(--xl-bg-raised);
  border:1px solid var(--xl-border-dark);border-radius:16px;overflow-x:auto}
.xl-figure svg{display:block;min-width:560px}

/* ---- CTA final del artículo ---- */
.xl-artcta{max-width:720px;margin:2.6rem auto 0}

/* ---- Cards del índice ---- */
.xl-postcard{display:flex;flex-direction:column;gap:.6rem;padding:1.5rem;text-decoration:none;color:inherit}
.xl-postcard .xl-artmeta{font-size:.66rem}
.xl-postcard h2{font-size:1.18rem;line-height:1.35;color:var(--xl-text-on-dark);margin:0}
.xl-postcard p{color:var(--xl-text-on-dark-2);font-size:.92rem;line-height:1.6;margin:0;flex:1}
.xl-postcard .more{font-family:var(--xl-font-mono);font-size:.74rem;color:var(--xl-signal);letter-spacing:.08em}
.xl-postcard:hover h2{color:var(--xl-signal)}

@media (max-width:640px){
  .xl-prose{font-size:.98rem}
  .xl-figure svg{min-width:520px}
}

/* ---- Barra de progreso de lectura ---- */
.xl-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--xl-signal);
  z-index:99;box-shadow:0 0 12px 1px rgba(196,245,59,.4);transition:width .1s linear}

/* ---- TL;DR "En 30 segundos" ---- */
.xl-tldr{max-width:720px;margin:1.6rem auto 0;padding:1.1rem 1.3rem;background:var(--xl-bg-raised);
  border:1px solid var(--xl-border-dark);border-radius:16px;position:relative;overflow:hidden}
.xl-tldr::before{content:"";position:absolute;top:0;left:1.1rem;width:90px;height:3px;
  background:var(--xl-signal);border-radius:0 0 3px 3px}
.xl-tldr .h{font-family:var(--xl-font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--xl-signal)}
.xl-tldr ul{margin:.6rem 0 0;padding-left:1.2rem}
.xl-tldr li{margin:.35rem 0;color:var(--xl-text-on-dark);font-size:.95rem;line-height:1.55}
.xl-tldr li::marker{color:var(--xl-signal)}

/* ---- Widgets interactivos ---- */
.xl-widget{margin:2rem 0;padding:1.4rem;background:linear-gradient(180deg,var(--xl-bg-raised),rgba(20,28,38,.6));
  border:1px solid var(--xl-border-dark);border-radius:18px;position:relative;overflow:hidden}
.xl-widget::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:110px;height:4px;background:var(--xl-signal);border-radius:0 0 4px 4px;
  box-shadow:0 6px 22px 2px rgba(196,245,59,.16)}
.xl-widget .wh{font-family:var(--xl-font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--xl-text-on-dark-2);text-align:center;margin-bottom:1rem}
.xl-widget .wh b{color:var(--xl-signal);font-weight:500}
.xl-wbtn{font-family:var(--xl-font-mono);font-size:.8rem;padding:.55rem 1rem;border-radius:10px;
  cursor:pointer;background:var(--xl-bg-raised);border:1px solid var(--xl-border-dark);
  color:var(--xl-text-on-dark);transition:.15s}
.xl-wbtn:hover{border-color:var(--xl-signal)}
.xl-wbtn.on{background:var(--xl-signal);color:#0B1016;border-color:var(--xl-signal);font-weight:600}
.xl-wbtn.go{background:var(--xl-signal);color:#0B1016;border-color:var(--xl-signal);font-weight:700;
  box-shadow:0 6px 18px -6px rgba(196,245,59,.55)}
.xl-wbtn.go:disabled{opacity:.45;cursor:default;box-shadow:none}
.xl-wrow{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}

/* Simulador: carrera chatbot vs agente, lado a lado */
.xl-sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.1rem}
@media(max-width:640px){.xl-sim-grid{grid-template-columns:1fr}}
.xl-sim-lane{padding:.9rem;border-radius:14px;background:rgba(11,16,22,.5);
  border:1px solid var(--xl-border-dark);display:flex;flex-direction:column;gap:.5rem;min-height:230px}
.xl-sim-lane.winner{border-color:rgba(196,245,59,.5)}
.xl-sim-lanehead{display:flex;align-items:center;gap:.55rem;margin-bottom:.2rem}
.xl-sim-av{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--xl-bg-raised);border:1px solid var(--xl-border-dark);font-size:.95rem}
.xl-sim-av.sig{border-color:var(--xl-signal);color:var(--xl-signal);font-weight:700}
.xl-sim-lanehead .nm{font-family:var(--xl-font-mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--xl-text-on-dark-2)}
.xl-sim-typing{display:inline-flex;gap:4px;padding:.65rem .9rem}
.xl-sim-typing i{width:6px;height:6px;border-radius:50%;background:var(--xl-text-on-dark-2);
  animation:xl-simtype 1s ease-in-out infinite}
.xl-sim-typing i:nth-child(2){animation-delay:.18s}.xl-sim-typing i:nth-child(3){animation-delay:.36s}
@keyframes xl-simtype{0%,100%{opacity:.25;transform:none}50%{opacity:1;transform:translateY(-3px)}}
/* (base) */
.xl-sim-stage{min-height:170px;margin-top:1.1rem;display:flex;flex-direction:column;gap:.55rem;
  align-items:center;justify-content:center}
.xl-sim-step{display:flex;align-items:center;gap:.6rem;width:100%;
  padding:.55rem .8rem;border-radius:12px;background:var(--xl-bg-raised);
  border:1px solid var(--xl-border-dark);font-size:.88rem;opacity:.25;transform:translateY(4px);
  transition:.35s}
.xl-sim-step.on{opacity:1;transform:none;border-color:rgba(196,245,59,.45)}
.xl-sim-step .n{font-family:var(--xl-font-mono);font-size:.68rem;color:var(--xl-signal);flex:none}
.xl-sim-step .ok{margin-left:auto;color:var(--xl-signal);font-weight:700;opacity:0;transition:.3s}
.xl-sim-step.done .ok{opacity:1}
.xl-sim-bubble{width:100%;padding:.8rem 1rem;border-radius:14px;
  background:var(--xl-bg-raised);border:1px solid var(--xl-border-dark);font-size:.9rem;line-height:1.5}
.xl-sim-note{font-family:var(--xl-font-mono);font-size:.7rem;color:var(--xl-text-on-dark-2)}
.xl-sim-note.bad{color:#E8A0A0}
.xl-sim-note.good{color:var(--xl-signal)}

/* Quiz */
.xl-quiz-q{max-width:520px;margin:0 auto .8rem;padding:.8rem 1rem;background:var(--xl-bg-raised);
  border:1px solid var(--xl-border-dark);border-radius:12px}
.xl-quiz-q p{margin:0 0 .6rem;font-size:.92rem;color:var(--xl-text-on-dark)}
.xl-quiz-res{max-width:520px;margin:1rem auto 0;padding:1.2rem 1.3rem;border-radius:14px;
  border:1px solid var(--xl-signal);background:var(--xl-bg-raised);
  box-shadow:0 0 0 3px rgba(196,245,59,.16), 0 10px 30px -12px rgba(0,0,0,.6);
  text-align:center;display:none}
.xl-quiz-res.show{display:block;animation:xl-wpop .35s ease}
.xl-quiz-res .t{font-weight:700;color:var(--xl-text-on-dark);font-size:1.18rem}
.xl-quiz-res p{font-size:.92rem;color:var(--xl-text-on-dark-2);margin:.5rem 0 0;line-height:1.6}
@keyframes xl-wpop{0%{opacity:0;transform:scale(.96)}100%{opacity:1;transform:none}}

/* Calculadora */
.xl-calc-row{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem .8rem;align-items:center;
  max-width:560px;margin:0 auto .55rem;padding:.6rem .8rem;background:var(--xl-bg-raised);
  border:1px solid var(--xl-border-dark);border-radius:12px;font-size:.88rem}
.xl-calc-row.off{opacity:.45}
.xl-calc-row input[type=checkbox]{accent-color:#C4F53B;width:1.05rem;height:1.05rem}
.xl-calc-row input[type=range]{width:100%;accent-color:#C4F53B}
.xl-calc-row .hrs{font-family:var(--xl-font-mono);font-size:.8rem;color:var(--xl-signal);
  min-width:3.2rem;text-align:right}
.xl-calc-total{max-width:560px;margin:1.1rem auto 0;padding:1.1rem;border-radius:14px;text-align:center;
  border:1px solid var(--xl-signal);background:rgba(196,245,59,.06)}
.xl-calc-total .big{font-size:2.2rem;font-weight:700;color:var(--xl-signal);line-height:1.1;
  font-variant-numeric:tabular-nums}
.xl-calc-total .sub{font-family:var(--xl-font-mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--xl-text-on-dark-2);text-transform:uppercase;margin-top:.3rem}

/* Índice: card destacada */
.xl-postcard.feat{grid-column:1/-1;flex-direction:column}
@media(min-width:760px){.xl-postcard.feat{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem 2rem}}
.xl-postcard.feat h2{font-size:1.55rem}
.xl-newpill{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--xl-font-mono);
  font-size:.62rem;letter-spacing:.12em;color:var(--xl-signal);border:1px solid rgba(196,245,59,.4);
  border-radius:999px;padding:.2rem .6rem}
.xl-newpill i{width:.45rem;height:.45rem;border-radius:50%;background:var(--xl-signal);
  animation:xl-newpulse 1.8s ease-in-out infinite}
@keyframes xl-newpulse{0%,100%{opacity:.4}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .xl-newpill i,.xl-quiz-res.show{animation:none}
  .xl-sim-step{transition:none}
}

/* ---- Tarjetas de dato flotantes (rompen el bloque recto) ---- */
.xl-stat{float:right;width:225px;margin:.35rem -40px 1.1rem 1.6rem;padding:1rem 1.1rem;
  background:var(--xl-bg-raised);border:1px solid var(--xl-border-dark);
  border-left:3px solid var(--xl-signal);border-radius:14px}
.xl-stat.left{float:left;margin:.35rem 1.6rem 1.1rem -40px}
.xl-stat b{display:block;font-size:1.9rem;color:var(--xl-signal);font-weight:700;line-height:1.05;
  letter-spacing:-.02em}
.xl-stat span{display:block;font-size:.78rem;color:var(--xl-text-on-dark-2);line-height:1.5;margin-top:.35rem}
@media(max-width:900px){.xl-stat{margin-right:0}.xl-stat.left{margin-left:0}}
@media(max-width:640px){.xl-stat,.xl-stat.left{float:none;width:auto;margin:1.2rem 0}}

/* ---- Secciones numeradas // 01 ---- */
.xl-prose{counter-reset:xlsec}
.xl-prose>h2{counter-increment:xlsec}
.xl-prose>h2::before{content:"// 0" counter(xlsec);display:block;font-family:var(--xl-font-mono);
  font-size:.72rem;font-weight:400;letter-spacing:.16em;color:var(--xl-signal);margin-bottom:.35rem}

/* ---- Chat de diagnóstico (quiz conversacional) ---- */
.xl-chat{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:.55rem;min-height:300px}
.xl-cb{max-width:85%;padding:.65rem .9rem;border-radius:14px;font-size:.9rem;line-height:1.55;
  animation:xl-cbin .3s ease;background:var(--xl-bg-raised);border:1px solid var(--xl-border-dark);
  color:var(--xl-text-on-dark);align-self:flex-start;border-bottom-left-radius:4px}
.xl-cb.user{align-self:flex-end;background:var(--xl-signal);color:#0B1016;font-weight:600;
  border:none;border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.xl-cb.verdict{border-color:var(--xl-signal);box-shadow:0 0 0 3px rgba(196,245,59,.16)}
.xl-cb .vt{font-weight:700;font-size:1rem;display:block;margin-bottom:.25rem}
@keyframes xl-cbin{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.xl-chat-chips{display:flex;gap:.5rem;align-self:flex-end;animation:xl-cbin .3s ease}
.xl-chat-av{display:flex;align-items:center;gap:.45rem;font-family:var(--xl-font-mono);
  font-size:.66rem;letter-spacing:.12em;color:var(--xl-text-on-dark-2);text-transform:uppercase}
.xl-chat-av i{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;
  font-style:normal;background:var(--xl-bg-raised);border:1px solid var(--xl-signal);
  color:var(--xl-signal);font-size:.8rem;font-weight:700}
@media (prefers-reduced-motion: reduce){.xl-cb,.xl-chat-chips{animation:none}}

/* ==== ESCENAS VIVAS (se animan solas, sin clicks) ==== */
.xl-esc{display:flex;flex-direction:column;gap:.9rem;align-items:center;padding:.4rem 0}
.xl-esc-item{font-family:var(--xl-font-mono);font-size:.82rem;padding:.5rem .9rem;border-radius:10px;
  background:var(--xl-bg-raised);border:1px solid var(--xl-border-dark);color:var(--xl-text-on-dark);
  opacity:0}
.run .xl-esc-item{animation:esc-item 7.5s ease-in-out infinite}
@keyframes esc-item{0%{opacity:0;transform:translateY(-8px)}6%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
.xl-esc-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;justify-content:center}
.xl-esc-step{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:118px}
.xl-esc-av{position:relative;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;
  background:var(--xl-bg-raised);border:1px solid var(--xl-border-dark);font-weight:700;font-size:.95rem;
  color:var(--xl-text-on-dark)}
.xl-esc-av i{position:absolute;right:-1px;bottom:-1px;width:.55rem;height:.55rem;border-radius:50%;
  background:var(--xl-signal);border:2px solid #0B1016;font-style:normal}
.xl-esc-step .nm{font-family:var(--xl-font-mono);font-size:.56rem;letter-spacing:.12em;color:var(--xl-text-on-dark-2)}
.xl-esc-step .tk{font-size:.7rem;color:var(--xl-text-on-dark-2);text-align:center;line-height:1.35}
.run .xl-esc-step{animation:esc-step 7.5s ease-in-out infinite;animation-delay:var(--d)}
@keyframes esc-step{0%,8%{opacity:.4}12%,26%{opacity:1}32%,100%{opacity:.75}}
.run .xl-esc-step .xl-esc-av{animation:esc-av 7.5s ease-in-out infinite;animation-delay:var(--d)}
@keyframes esc-av{0%,10%{border-color:var(--xl-border-dark);box-shadow:none;transform:none}
  14%,24%{border-color:var(--xl-signal);box-shadow:0 0 0 4px rgba(196,245,59,.16);transform:translateY(-3px)}
  30%,100%{border-color:var(--xl-border-dark);box-shadow:none;transform:none}}
.xl-esc-link{width:26px;height:1px;background:var(--xl-border-dark);position:relative;flex:none}
.xl-esc-link b{position:absolute;top:-2.5px;left:0;width:5px;height:5px;border-radius:50%;background:var(--xl-signal);opacity:0}
.run .xl-esc-link b{animation:esc-pulse 7.5s ease-in-out infinite;animation-delay:var(--d)}
@keyframes esc-pulse{0%,12%{left:0;opacity:0}14%{opacity:1}22%{left:calc(100% - 5px);opacity:1}26%,100%{left:100%;opacity:0}}
.xl-esc-res{font-size:.85rem;padding:.55rem 1rem;border-radius:12px;background:var(--xl-bg-raised);
  border:1px solid rgba(196,245,59,.5);color:var(--xl-text-on-dark);opacity:0}
.xl-esc-res b{color:var(--xl-signal)}
.run .xl-esc-res{animation:esc-res 7.5s ease-in-out infinite}
@keyframes esc-res{0%,72%{opacity:0;transform:translateY(6px)}78%,90%{opacity:1;transform:none}97%,100%{opacity:0}}

/* Escena criterios: escáner que revisa 3 tarjetas */
.xl-crit{position:relative;max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:.6rem}
.xl-crit-card{display:flex;align-items:center;gap:.7rem;padding:.75rem .95rem;border-radius:12px;
  background:var(--xl-bg-raised);border:1px solid var(--xl-border-dark);font-size:.9rem;color:var(--xl-text-on-dark)}
.xl-crit-card .ic{flex:none;font-size:1.05rem}
.xl-crit-card .ok{margin-left:auto;color:var(--xl-signal);font-weight:700;opacity:0;transform:scale(.6)}
.run .xl-crit-card{animation:crit-card 9s ease-in-out infinite;animation-delay:var(--d)}
@keyframes crit-card{0%,8%{border-color:var(--xl-border-dark)}12%,22%{border-color:var(--xl-signal)}
  28%,100%{border-color:var(--xl-border-dark)}}
.run .xl-crit-card .ok{animation:crit-ok 9s ease-in-out infinite;animation-delay:var(--d)}
@keyframes crit-ok{0%,14%{opacity:0;transform:scale(.6)}20%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
.xl-crit-scan{position:absolute;left:-6px;right:-6px;height:3px;border-radius:3px;top:0;opacity:0;
  background:linear-gradient(90deg,transparent,var(--xl-signal),transparent)}
.run .xl-crit-scan{animation:crit-scan 9s ease-in-out infinite}
@keyframes crit-scan{0%{top:6%;opacity:0}6%{opacity:.9}20%{top:20%}42%{top:53%}64%{top:86%}70%{opacity:.9}76%,100%{top:96%;opacity:0}}
.xl-crit-verdict{text-align:center;padding:.7rem 1rem;border-radius:12px;border:1px solid var(--xl-signal);
  background:rgba(196,245,59,.07);font-weight:700;color:var(--xl-text-on-dark);opacity:0}
.xl-crit-verdict b{color:var(--xl-signal)}
.run .xl-crit-verdict{animation:crit-verdict 9s ease-in-out infinite}
@keyframes crit-verdict{0%,72%{opacity:0;transform:scale(.97)}78%,94%{opacity:1;transform:none}100%{opacity:0}}

/* Escena semana: los agentes absorben lo repetitivo */
.xl-week2{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem}
.xl-week2-bar{display:flex;gap:5px}
.xl-week2-bar i{flex:1;height:2rem;border-radius:7px;background:#3A4655;font-style:normal;position:relative;overflow:hidden}
.xl-week2-bar i::after{content:"";position:absolute;inset:0;border-radius:7px;background:var(--xl-signal);
  transform:scaleX(0);transform-origin:left}
.run .xl-week2-bar i.q::after{transform:scaleX(1)}
.run .xl-week2-bar i.flip::after{animation:wk-flip 11s ease-in-out infinite;animation-delay:var(--d)}
@keyframes wk-flip{0%,10%{transform:scaleX(0)}16%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.xl-week2-ag{display:flex;justify-content:center;gap:1.1rem}
.xl-week2-ag .xl-esc-step{width:auto}
.xl-week2-count{text-align:center}
.xl-week2-count .n{font-size:2.3rem;font-weight:700;color:var(--xl-signal);font-variant-numeric:tabular-nums;line-height:1.1}
.xl-week2-count .l{font-family:var(--xl-font-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--xl-text-on-dark-2);margin-top:.25rem}
.xl-week2-leg{display:flex;justify-content:center;gap:1.4rem;font-size:.72rem;color:var(--xl-text-on-dark-2)}
.xl-week2-leg i{display:inline-block;width:.8rem;height:.8rem;border-radius:4px;vertical-align:-2px;margin-right:.35rem;font-style:normal}

@media (prefers-reduced-motion: reduce){
  .run *{animation:none !important}
  .xl-esc-item,.xl-esc-res,.xl-crit-card .ok,.xl-crit-verdict{opacity:1 !important;transform:none !important}
  .run .xl-week2-bar i.flip::after{transform:scaleX(1)}
}

/* Los botones dentro de la prosa no heredan el estilo de link (lima sobre lima = invisible) */
.xl-prose a.btn,.xl-widget a.btn{border-bottom:none}
.xl-prose a.btn-primary,.xl-widget a.btn-primary{color:#0B1016}

/* ==== Juego: adivina la siguiente palabra ==== */
.xl-adiv{max-width:520px;margin:0 auto}
.xl-adiv-frase{font-size:1.05rem;text-align:center;color:var(--xl-text-on-dark);line-height:1.6;
  padding:.9rem 1rem;background:var(--xl-bg-raised);border:1px solid var(--xl-border-dark);border-radius:14px}
.xl-adiv-frase b{color:var(--xl-signal);border-bottom:2px dashed var(--xl-signal)}
.xl-adiv-round{font-family:var(--xl-font-mono);font-size:.66rem;letter-spacing:.14em;
  color:var(--xl-text-on-dark-2);text-align:center;text-transform:uppercase;margin-bottom:.6rem}
.xl-adiv-ops{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.9rem}
.xl-prob{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.xl-prob-row{display:grid;grid-template-columns:110px 1fr 52px;gap:.6rem;align-items:center;font-size:.88rem}
.xl-prob-row .w{color:var(--xl-text-on-dark);text-align:right}
.xl-prob-row .track{height:16px;border-radius:6px;background:rgba(36,50,68,.5);overflow:hidden}
.xl-prob-row .fill{height:100%;border-radius:6px;background:#3A4655;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.xl-prob-row.top .fill{background:var(--xl-signal)}
.xl-prob-row .pct{font-family:var(--xl-font-mono);font-size:.74rem;color:var(--xl-text-on-dark-2)}
.xl-prob-row.top .pct{color:var(--xl-signal)}
.xl-prob-row.pick .w::after{content:" ← " attr(data-you);font-size:.68rem;color:var(--xl-signal);font-family:var(--xl-font-mono)}
.xl-adiv-lesson{margin-top:1rem;text-align:center;font-size:.9rem;color:var(--xl-text-on-dark-2);
  line-height:1.6;min-height:2.6rem}
.xl-adiv-lesson b{color:var(--xl-signal)}

/* ==== Juego: la fábrica (teoría de restricciones) ==== */
.xl-fab{max-width:560px;margin:0 auto}
.xl-fab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}
@media(max-width:560px){.xl-fab-grid{grid-template-columns:repeat(2,1fr)}}
.xl-fab-st{padding:.7rem .6rem;border-radius:12px;background:var(--xl-bg-raised);
  border:1px solid var(--xl-border-dark);text-align:center;transition:border-color .3s}
.xl-fab-st.neck{border-color:#E8A0A0}
.xl-fab-st .ic{font-size:1.3rem}
.xl-fab-st .nm{font-size:.72rem;color:var(--xl-text-on-dark);margin-top:.15rem}
.xl-fab-st .rate{font-family:var(--xl-font-mono);font-size:.95rem;color:var(--xl-text-on-dark);margin:.25rem 0}
.xl-fab-st.neck .rate{color:#E8A0A0}
.xl-fab-st input[type=range]{width:100%;accent-color:#C4F53B}
.xl-fab-st .q{font-family:var(--xl-font-mono);font-size:.6rem;color:#E8A0A0;min-height:.9rem;display:block}
.xl-fab-out{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem;
  padding:.9rem;border-radius:14px;border:1px solid var(--xl-signal);background:rgba(196,245,59,.06)}
.xl-fab-out .n{font-size:2.4rem;font-weight:700;color:var(--xl-signal);font-variant-numeric:tabular-nums;line-height:1}
.xl-fab-out .l{font-family:var(--xl-font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--xl-text-on-dark-2);max-width:9rem;text-align:left;line-height:1.5}
.xl-fab-out.bump .n{animation:fab-bump .5s ease}
@keyframes fab-bump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.xl-fab-lesson{margin-top:.9rem;text-align:center;font-size:.9rem;line-height:1.6;
  color:var(--xl-text-on-dark-2);min-height:2.6rem}
.xl-fab-lesson b{color:var(--xl-signal)}
.xl-fab-lesson .bad{color:#E8A0A0}

/* ==== Juego: constructor de instrucciones ==== */
.xl-bld{max-width:560px;margin:0 auto}
.xl-bld-ing{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.xl-bld-txt{margin-top:1rem;padding:.9rem 1.1rem;border-radius:12px;background:var(--xl-bg-raised);
  border:1px solid var(--xl-border-dark);font-size:.9rem;line-height:1.7;color:var(--xl-text-on-dark)}
.xl-bld-txt .frag{color:var(--xl-signal);opacity:0;display:none}
.xl-bld-txt .frag.on{display:inline;opacity:1;animation:xl-cbin .35s ease}
.xl-bld-meter{margin-top:.9rem;display:flex;align-items:center;gap:.8rem}
.xl-bld-meter .track{flex:1;height:10px;border-radius:6px;background:rgba(36,50,68,.5);overflow:hidden}
.xl-bld-meter .fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#E8A0A0,#E0B76B,#C4F53B);
  width:8%;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.xl-bld-meter .lab{font-family:var(--xl-font-mono);font-size:.7rem;color:var(--xl-text-on-dark-2);
  min-width:8.5rem;text-align:right}
.xl-bld-res{margin-top:.9rem;padding:.9rem 1.1rem;border-radius:12px;background:rgba(11,16,22,.55);
  border:1px solid var(--xl-border-dark);font-size:.86rem;line-height:1.65;color:var(--xl-text-on-dark-2);
  min-height:5.2rem;transition:border-color .4s}
.xl-bld-res.good{border-color:rgba(196,245,59,.5);color:var(--xl-text-on-dark)}
.xl-bld-res .rh{font-family:var(--xl-font-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--xl-text-on-dark-2);display:block;margin-bottom:.4rem}

/* ==== Rail lateral: índice de secciones (desktop) ==== */
.xl-rail{position:fixed;top:50%;transform:translateY(-50%);left:max(18px,calc(50% - 645px));
  width:190px;display:none;z-index:5}
@media(min-width:1280px){.xl-rail{display:block}}
.xl-rail .rh{font-family:var(--xl-font-mono);font-size:.6rem;letter-spacing:.16em;
  color:var(--xl-text-on-dark-2);text-transform:uppercase;margin-bottom:.6rem}
.xl-rail .rh b{color:var(--xl-signal);font-weight:500}
.xl-rail nav{border-left:1px solid var(--xl-border-dark)}
.xl-rail a{position:relative;display:flex;gap:.55rem;padding:.34rem 0 .34rem .85rem;
  color:var(--xl-text-on-dark-2);font-size:.74rem;line-height:1.4;text-decoration:none;
  transition:color .2s}
.xl-rail a::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;
  background:transparent;transition:background .2s}
.xl-rail a .n{font-family:var(--xl-font-mono);font-size:.6rem;color:var(--xl-text-on-dark-2);
  padding-top:.14rem;flex:none;transition:color .2s}
.xl-rail a:hover{color:var(--xl-text-on-dark)}
.xl-rail a.on{color:var(--xl-text-on-dark)}
.xl-rail a.on::before{background:var(--xl-signal)}
.xl-rail a.on .n{color:var(--xl-signal)}
.xl-rail .rf{margin-top:.8rem;font-family:var(--xl-font-mono);font-size:.58rem;
  letter-spacing:.12em;color:var(--xl-text-on-dark-2)}

/* ==== Confetti de victoria ==== */
i.xlc{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:2px;
  background:var(--xl-signal);pointer-events:none;animation:xlc .85s ease-out forwards}
i.xlc:nth-child(3n){background:#EDF0F5;width:5px;height:5px}
@keyframes xlc{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(260deg);opacity:0}}
@media (prefers-reduced-motion: reduce){i.xlc{display:none}}